/* Additional pages share the approved product page, facts and gift artwork. */
.additional-page h1 {
  max-width: 17ch;
  font: var(--type-heading-lg);
  letter-spacing: var(--tracking-heading);
}
.additional-page h2 {
  max-width: 20ch;
  font: var(--type-heading-md);
  letter-spacing: var(--tracking-heading);
}
.additional-page h3 { font: var(--type-heading-sm); }
.additional-page .additional-art { aspect-ratio: 4 / 3; }
.additional-page .additional-art--b12 { aspect-ratio: 1; }
.additional-status { display: flex; align-items: start; gap: var(--space-12); margin-top: var(--space-32); font: var(--type-body); }
.additional-status .icon { --icon-optical-offset: 2px; /* Align with the text baseline. */ margin-top: var(--icon-optical-offset); color: var(--text-on-dark-muted); }
.additional-note { margin-top: var(--space-16); max-width: 60ch; color: var(--text-on-dark-muted); font: var(--type-caption); }
.additional-story { padding-block: var(--space-80); background: var(--surface-dark-raised); }
.additional-story .surmav-section-heading { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-24); }
.additional-story .surmav-section-heading p { max-width: 62ch; }
.additional-experience { padding-block: var(--space-80); border-top: 1px solid var(--line-dark-subtle); }
.additional-story-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-80); align-items: start; }
.additional-story-layout > p { max-width: 62ch; color: var(--text-on-dark-muted); font: var(--type-prose); }
.additional-story-label { display: block; margin-bottom: var(--space-16); color: var(--text-on-dark-muted); font: var(--type-caption); }
.additional-scene img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line-dark); border-radius: var(--radius-art); }
.additional-scene--haunted img { object-position: left center; }
.additional-scene figcaption { margin-top: var(--space-12); color: var(--text-on-dark-muted); font: var(--type-caption); }
.additional-controls { margin-top: var(--space-48); }
.additional-controls ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-40); padding: 0; margin: var(--space-32) 0 0; list-style: none; }
.additional-controls li { display: flex; gap: var(--space-16); padding-top: var(--space-24); border-top: 1px solid var(--line-dark); }
.additional-step { padding-top: var(--space-4); color: var(--text-on-dark-muted); font: var(--type-caption); }
.additional-controls h4 { margin: 0 0 var(--space-12); font: var(--type-body); }
.additional-controls p { color: var(--text-on-dark-muted); font: var(--type-small); }
.additional-demo { padding-block: var(--space-80); }
.additional-demo-layout { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: var(--space-80); }
.additional-demo-layout > div { min-width: 0; }
.additional-demo-layout h2 + p { margin-top: var(--space-24); }
.additional-demo-layout p + p { margin-top: var(--space-16); }
.additional-demo-layout p { max-width: 60ch; color: var(--text-on-dark-muted); font: var(--type-prose); }
.additional-demo-layout .additional-note { font: var(--type-caption); }
.additional-demo-action { justify-self: end; }
.additional-text-link { display: inline-flex; align-items: center; gap: var(--space-12); min-height: var(--touch-min); max-width: 100%; margin-top: var(--space-16); font: var(--type-small); }
.additional-text-link .icon { width: var(--icon-small); height: var(--icon-small); }
.additional-demo-action .additional-text-link { display: flex; color: var(--text-on-dark-muted); }

.additional-page--gift {
  color: var(--color-white);
  background: var(--color-black);
  --focus-ring: var(--focus-on-dark);
  --link-hover-color: var(--color-yellow);
  --link-hover-thickness: 1px;
  overflow: clip;
}
.additional-page--gift .surmav-back { margin-block: var(--space-16); }
.additional-page--gift .surmav-back:hover { color: var(--color-white); }
.additional-gift-hero { padding-bottom: var(--space-96); }
.gift-purchase-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'intro preview'; column-gap: var(--space-80); align-items: center; padding-top: 0; }
.gift-purchase-intro { grid-area: intro; }
.gift-purchase-preview { grid-area: preview; }
.additional-page--gift .gift-copy > p { max-width: 38ch; }
.additional-page--gift .gift-occasions { margin-bottom: 0; }
/* The rotated card extends beyond its untransformed box. Keep its full
   silhouette inside the artwork slot, with the shared caption gap below. */
.additional-page--gift .gift-art { aspect-ratio: 1.45; }
.additional-page--gift .gift-card-rig { width: min(480px, 90%); }
.additional-page--gift .gift-art::before { background: radial-gradient(ellipse, #b7974626, transparent 68%); }
.additional-page--gift .gift-format { text-align: center; }
.additional-page--gift :is(.gift-format, .gift-eyebrow, .gift-copy > p, .gift-occasions) { color: var(--text-on-dark-muted); }
.additional-page--gift .gift-occasions li:not(:last-child)::after { background: var(--text-on-dark-muted); }
/* One row per game: a new room adds a row, the hero above stays the same. */
.additional-gift-games { --focus-ring: var(--focus-on-light); padding-block: var(--space-96); background: var(--surface-paper); color: var(--color-black); }
.additional-gift-games h2 { font: var(--type-heading-md); letter-spacing: var(--tracking-heading); }
.additional-gift-games .container > p { margin-top: var(--space-8); color: var(--text-on-light-muted); font: var(--type-small); }
.gift-game-list { display: grid; gap: var(--space-12); margin: var(--space-32) 0 0; padding: 0; list-style: none; }
.gift-game-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-24); padding: var(--space-16); background: var(--surface-light); border: 1px solid var(--line-light); border-radius: var(--radius-control); }
.gift-game-row-art { position: relative; display: block; border-radius: var(--radius-control); overflow: clip; }
.gift-game-row-art .format-mark { top: var(--space-8); right: var(--space-8); width: var(--space-48); }
.gift-game-row img { display: block; width: 160px; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.gift-game-row h3 { font: var(--type-heading-sm); letter-spacing: var(--tracking-heading); }
.gift-game-row h3 a { color: inherit; text-decoration: none; }
.gift-game-row h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--space-4); }
.gift-game-row-copy p { margin-top: var(--space-4); color: var(--text-on-light-muted); font: var(--type-caption); }
.gift-game-row-copy .gift-game-row-summary { max-width: 34em; margin-top: var(--space-8); color: var(--text-on-light-secondary); font: var(--type-small); text-wrap: pretty; }
.gift-game-row-price { font: var(--type-price-sm); letter-spacing: var(--tracking-price); white-space: nowrap; }
.gift-game-row-actions { display: flex; gap: var(--space-8); }
.additional-page--gift .additional-gift-rules { background: var(--surface-dark-raised); border-top: 1px solid var(--line-dark); }
.additional-gift-rules { padding-block: var(--space-96); }
.additional-rules { margin: 0; }
.additional-rules > div + div { border-top: 1px solid var(--line-dark); margin-top: var(--space-24); padding-top: var(--space-24); }
.additional-rules dt { font: var(--type-body); }
.additional-rules dd { margin: var(--space-8) 0 0; color: var(--text-on-dark-muted); font: var(--type-prose); }

@media (max-width: 1180px) {
  .additional-story-layout, .additional-demo-layout, .additional-option-grid { gap: var(--space-40); }
}
@media (max-width: 1000px) {
  .gift-game-row { grid-template-columns: 160px minmax(0, 1fr) auto; align-items: start; gap: var(--space-16) var(--space-24); }
  .gift-game-row-art { grid-row: span 2; }
  .gift-game-row-actions { grid-column: 2 / -1; }
}
@media (max-width: 920px) {
  .additional-page .product-introduction { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .additional-page .product-introduction-copy { padding: 0; }
  .additional-page .additional-art { height: auto; }
  .additional-page .additional-art--b12 { max-height: 600px; }
  .additional-story-layout, .additional-demo-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .additional-demo-action { justify-self: start; }
  .gift-purchase-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'intro' 'preview'; gap: var(--space-32); }
  .gift-purchase-preview { width: min(100%, 560px); justify-self: center; }
  .additional-page--gift .gift-art { max-width: 640px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .additional-story .surmav-section-heading { gap: var(--space-16); }
  .additional-controls { margin-top: var(--space-32); }
  .additional-controls ol { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); margin-top: var(--space-24); }
  .additional-scene img { aspect-ratio: 4 / 3; }
  .additional-story, .additional-experience, .additional-demo, .additional-gift-options, .additional-gift-rules { padding-block: var(--space-64); }
  .additional-gift-hero { padding-bottom: var(--space-64); }
  .additional-gift-games { padding-block: var(--space-64); }
  .gift-game-row { grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: var(--space-12) var(--space-16); }
  .gift-game-row-art { grid-row: 1; }
  .gift-game-row-copy { display: contents; }
  .gift-game-row-copy h3 { grid-column: 2; grid-row: 1; align-self: center; }
  .gift-game-row-copy p { grid-column: 1 / -1; margin-top: 0; }
  .gift-game-row-copy .gift-game-row-summary { margin-top: 0; max-width: none; }
  .gift-game-row img { width: 100%; }
  .gift-game-row-art .format-mark { top: var(--space-4); right: var(--space-4); width: var(--space-32); }
  .gift-game-row-price { grid-column: 1 / -1; }
  .gift-game-row-actions { grid-column: 1 / -1; flex-direction: column; }
  .gift-purchase-layout { padding-top: var(--space-16); }
  .additional-option-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); margin-top: var(--space-32); }
}
@media (max-width: 380px) {
  .gift-game-row { grid-template-columns: var(--space-80) minmax(0, 1fr); }
}