/* Hangstone home page v2 (EN and DE). Builds on base.css.
   Idea: the page is the studio pegboard the tiles hang on. The hero is a pegboard panel on the
   paper desk, the rules are played out on real little boards, the close returns inverted.
   Colour fields come from the game's own tiles: Saffron for the live board, Plum for fair play,
   Ink for money. One accent for actions: Saffron. */

:root {
  --fs-xl: clamp(2.75rem, 1.05rem + 6.4vw, 6rem);
  --fs-l: clamp(2.125rem, 1.25rem + 3.3vw, 4.25rem);
  --fs-m: clamp(1.25rem, 1.05rem + 0.75vw, 1.625rem);
  --fs-h3: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);

  --board: #FBF8F2;
  --board-lip: #E1D9CC;
  --hole: #DCD4C6;
  --peg: url("/assets/img/peg.svg");
  --ghost: #24212B;

  --try-field: var(--saffron);
  --try-ink: var(--ink);
  --fair-field: var(--plum);
  --fair-ink: #FBF8F2;
  --slip: #FBF8F2;
  --slip-ink: var(--ink);
  --money-field: var(--ink);
  --money-ink: #F3EEE6;
  --money-soft: #BDB5C2;
  --close-field: var(--ink);
  --close-ink: #F3EEE6;
  --action: var(--saffron);
  --on-action: var(--ink);
  --label-bg: #24212B;
  --label-ink: #FBF8F2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --board: #201F2A; --board-lip: #0E0D13; --hole: #34323F; --peg: url("/assets/img/peg-ink.svg"); --ghost: #EFE9DF;
    --f-S: #FFBC33; --f-J: #22C792; --f-C: #FF5F55; --f-A: #2F6BEF; --f-P: #B48CFF;
    --l-S: #C98A10; --l-J: #11946B; --l-C: #C9403A; --l-A: #1F4FB8; --l-P: #7E5CC4;
    --g-S: #D9930F; --g-J: #16A577; --g-C: #DE4A43; --g-A: #2457CC; --g-P: #9670E0;
    --stone: #5E5953; --stone-lip: #3F3B37; --speck: #77716A; --speck-2: #4A4641;
    --try-field: #F2A814; --try-ink: #17161F;
    --fair-field: #2A1D45; --slip: #EFE9DF; --slip-ink: #24212B;
    --money-field: #0E0D13; --money-soft: #A8A1AE;
    --close-field: #EFE9DF; --close-ink: #24212B;
    --label-bg: #EFE9DF; --label-ink: #24212B;
  }
}
:root[data-theme="dark"] {
  --board: #201F2A; --board-lip: #0E0D13; --hole: #34323F; --peg: url("/assets/img/peg-ink.svg"); --ghost: #EFE9DF;
  --f-S: #FFBC33; --f-J: #22C792; --f-C: #FF5F55; --f-A: #2F6BEF; --f-P: #B48CFF;
  --l-S: #C98A10; --l-J: #11946B; --l-C: #C9403A; --l-A: #1F4FB8; --l-P: #7E5CC4;
  --g-S: #D9930F; --g-J: #16A577; --g-C: #DE4A43; --g-A: #2457CC; --g-P: #9670E0;
  --stone: #5E5953; --stone-lip: #3F3B37; --speck: #77716A; --speck-2: #4A4641;
  --try-field: #F2A814; --try-ink: #17161F;
  --fair-field: #2A1D45; --slip: #EFE9DF; --slip-ink: #24212B;
  --money-field: #0E0D13; --money-soft: #A8A1AE;
  --close-field: #EFE9DF; --close-ink: #24212B;
  --label-bg: #EFE9DF; --label-ink: #24212B;
}

html { scroll-padding-top: 16px; scroll-padding-bottom: 96px; }
main > section { scroll-margin-top: 8px; }
.nb { white-space: nowrap; }
.wrap-max, .hero, .rules, .inside, .gc, .world, .faq { max-width: calc(var(--max) + 2 * var(--m)); margin-inline: auto; }
h2 { font-size: var(--fs-l); }
h3 { font-size: var(--fs-m); letter-spacing: -0.02em; line-height: 1.12; }

/* ---------- the pegboard panel ---------- */
.peg {
  background-color: var(--board);
  background-image: var(--peg);
  background-size: 44px 44px;
  background-position: center 10px;
  border-radius: 28px;
  border-bottom: 8px solid var(--board-lip);
}

/* ---------- hero ---------- */
.hero { padding-top: 4px; }
.hero-board {
  display: grid; gap: 40px;
  padding: clamp(28px, 4.4vw, 72px) clamp(20px, 4.4vw, 72px) clamp(32px, 4.4vw, 64px);
}
.hero h1 { font-size: var(--fs-xl); letter-spacing: -0.045em; line-height: .96; }
.hero h1 span { display: block; }
/* the product lockup inside the H1: icon + name, so the brand is part of the heading (search: "hangstone", not "hanging stone") */
.hero h1 .h1-brand {
  display: flex; align-items: center; gap: 12px; margin-bottom: clamp(14px, 1.8vw, 24px);
  font-size: clamp(1.125rem, 1rem + .45vw, 1.5rem); letter-spacing: -0.02em; line-height: 1;
}
.h1-brand img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.lede { margin-top: 22px; font-size: var(--fs-m); font-weight: 650; line-height: 1.35; max-width: 31ch; letter-spacing: -0.01em; }
.get { margin-top: 30px; }
.get-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.badge img { height: 52px; width: auto; }
/* Phase 0: no store yet. The hero's action is the practice board on this page. */
.get-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.get-soon p { font-weight: 850; }
.get-soon .store-link { background: var(--action); color: var(--on-action); border-color: var(--action); }
.get-soon .store-link:hover { background: color-mix(in srgb, var(--action) 86%, #fff); }
.get-soon .store-link svg, .close-soon .store-link svg { transition: transform .2s var(--ease-out); }
.get-soon .store-link svg { rotate: 90deg; }
.get-soon .store-link:hover svg { transform: translateX(2px); }
.qr-box { display: none; }
.get-note { margin-top: 14px; font-size: var(--fs-small); color: var(--soft); font-weight: 650; }
.get-note strong { color: var(--text); font-weight: 850; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; font-weight: 800; font-size: var(--fs-small); }
.facts li { display: inline-flex; align-items: center; gap: 9px; }
.facts svg { width: 22px; height: 22px; flex: none; }

.hero-media { position: relative; justify-self: center; width: min(76vw, 340px); }
/* The preview's top 15 % is the App Store caption band ("One move." …), which only repeats the H1:
   the frame crops it off, so the board starts right at the top. A neutral frame, never an iPhone. */
.screen {
  position: relative; overflow: hidden;
  border-radius: 34px; background: var(--ground-2);
  aspect-ratio: 720 / 1320;
  border: 6px solid #0E0D13;
}
.screen video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.play-btn {
  position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%;
  border: 0; background: var(--text); color: var(--ground); cursor: pointer; display: grid; place-items: center;
  transition: transform .2s var(--ease-out);
}
.play-btn svg { width: 30px; height: 30px; margin-left: 4px; }
.play-btn:hover { transform: scale(1.06); }
.play-btn:active { transform: scale(.96); }
.media-ctrl { display: flex; justify-content: center; gap: 10px; margin-top: 14px; min-height: 44px; }   /* reserved: home.js shows the buttons after load (no shift) */
.media-ctrl button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: 999px; border: 0; background: var(--ground-2); color: var(--text);
  font-weight: 800; font-size: var(--fs-small); cursor: pointer; transition: background-color .2s;
}
.media-ctrl button:hover { background: color-mix(in srgb, var(--text) 12%, var(--ground-2)); }
.media-ctrl svg { width: 20px; height: 20px; }
.sound .mute, .sound[aria-pressed="true"] .wave { display: none; }
.sound[aria-pressed="true"] .mute { display: inline; }
.pause .i-play, .pause[aria-pressed="true"] .i-pause { display: none; }
.pause[aria-pressed="true"] .i-play { display: inline; }

@media (min-width: 960px) {
  .hero-board { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(40px, 5vw, 96px); min-height: min(86svh, 860px); }
  .hero-media { width: clamp(280px, calc((100svh - 250px) * 0.545), 400px); }
  .lede { max-width: 30ch; }
  .qr-box { display: flex; align-items: center; gap: 12px; margin-left: 8px; }
  .qr-box figcaption { font-size: var(--fs-small); font-weight: 750; color: var(--soft); max-width: 12ch; line-height: 1.25; }
  .qr { border-radius: 8px; background: #fff; padding: 4px; }
  .hero .qr { width: 64px; height: 64px; }
  .h1-brand img { width: 52px; height: 52px; border-radius: 12px; }
  /* the H1 is sized by its own column, so it stays on two lines at every desktop width and height */
  .hero-copy { container-type: inline-size; }
  .hero h1 { font-size: min(var(--fs-xl), 100cqi / 6.6); }
  .hero h1:lang(de) { font-size: min(var(--fs-xl), 100cqi / 7.75); }
}
/* phones: the gameplay comes right after the store line; the three facts follow it */
@media (max-width: 959px) {
  .hero-board { gap: 0; }
  .hero-copy { display: contents; }
  .hero-media { order: 2; margin-top: 30px; }
  .hero .facts { order: 3; margin-top: 26px; justify-content: center; }
  .lede { font-size: var(--fs-body); margin-top: 16px; font-weight: 650; }
  .get { margin-top: 22px; }
}

/* ---------- the little boards (engine.js) ---------- */
.hb { position: relative; width: 100%; }
.hb-well { background: var(--board); border-radius: 22px; border-bottom: 7px solid var(--board-lip); padding: 4.5%; }
.hb-grid { position: relative; aspect-ratio: var(--cols) / var(--rows); }
.hb-holes { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--hole); }
.hb-layer, .hb-fx { position: absolute; inset: 0; }
.hb-fx { pointer-events: none; }
.pc, .ghost {
  position: absolute; left: 0; top: 0;
  width: calc(100% / var(--cols)); height: calc(100% / var(--rows));
  transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
}
.pc svg { width: 100%; height: 100%; padding: 3%; overflow: visible; }
.pc.is-falling, .pc.is-rising { transition: transform var(--fall, 300ms) cubic-bezier(.5, 0, .9, .55); }
.pc.is-rising { transition-timing-function: cubic-bezier(.3, .7, .3, 1); }
.hb.no-motion .pc { transition: none !important; }
.pc.is-held { z-index: 2; }
.pc.is-held svg { filter: drop-shadow(0 6px 6px rgb(36 33 43 / .25)); } /* taste-skill-ignore: only while a piece floats on its way in, never at rest */
.pc.is-lit svg { filter: brightness(1.12) saturate(1.1); }
.ghost::after { content: ""; position: absolute; inset: 3%; border: 2.5px dashed var(--ghost); border-radius: 26%; opacity: .55; }
.hb-label {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  white-space: nowrap; font-weight: 900; letter-spacing: -0.02em; line-height: 1;
  pointer-events: none; z-index: 3;
}
.hb-label.is-chain, .hb-label.is-rest, .hb-label.is-vein { font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); color: var(--label-ink); background: var(--label-bg); padding: .28em .6em .32em; border-radius: 999px; }
/* the vein is named near the top, so it never lands on the points or on a tile of its own colour */
.hb-label.is-vein { top: 18%; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); }
.hb-label.is-pts, .hb-label.is-held {
  left: calc(var(--c) / var(--cols) * 100%); top: calc(var(--r) / var(--rows) * 100%);
  font-size: clamp(1rem, .85rem + .6vw, 1.375rem); color: var(--text);
  -webkit-text-stroke: 5px var(--board); paint-order: stroke fill;
}
.hb-under { position: relative; height: 0; }
.hb-incoming {
  position: absolute; left: 4.5%; right: 4.5%; top: -7px; z-index: -1;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr);
  transform: translateY(calc(-40% + var(--m, 0) * -18%));
  transition: transform .35s var(--ease-out);
}
.hb-incoming span svg { width: 100%; height: auto; padding: 3%; }
/* rise meter (engine.js setMeter): glass tubes beside the board, a tag with the moves left beside the incoming row */
.hb.has-pips { padding-bottom: 64px; }
.hb.has-pips .hb-well, .hb.has-pips .hb-under { margin-inline: 22px; }
.hb-tube {
  position: absolute; top: 20px; bottom: 71px; width: 10px; border-radius: 5px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 5%, var(--board));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 30%, transparent);
}
.hb-tube.is-l { left: 6px; }
.hb-tube.is-r { right: 6px; }
.hb-tube i {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--fill, 0) * 100%);
  background: var(--text); opacity: .8; transition: height .32s var(--ease-out), background-color .2s;
}
.hb-tube b { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 100%); height: 1.5px; z-index: 1; background: color-mix(in srgb, var(--text) 35%, transparent); }
.hb.is-last .hb-tube { box-shadow: inset 0 0 0 1.5px var(--coral); }
.hb-tag {
  position: absolute; top: 6px; width: 22px; display: grid; justify-items: center; gap: 2px; padding: 4px 0 5px;
  border: 1.5px solid var(--text); border-radius: 7px; background: var(--board); color: var(--text);
  font-weight: 900; font-size: 14px; line-height: 1;
}
.hb-tag.is-l { left: -22px; }
.hb-tag.is-r { right: -22px; }
.hb-tag svg { width: 10px; height: 12px; }
.hb.is-last .hb-tag { background: var(--coral); border-color: var(--coral); color: #fff; }
.hb.no-motion .hb-tube i { transition: none; }

/* ---------- how it plays ---------- */
.rules { padding-top: var(--section); }
.rules-head { display: grid; gap: 18px; max-width: 760px; }
.rules-head p { font-size: var(--fs-m); font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; }
.steps { display: grid; gap: clamp(56px, 8vw, 96px); margin-top: clamp(48px, 6vw, 80px); counter-reset: none; }
.step { display: grid; gap: 14px; align-content: start; }
.step h3 { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.step h3 svg { width: 1.1em; height: 1.1em; flex: none; }
.step p { max-width: 40ch; }
.step .demo { order: 3; margin-top: 14px; }
.demo { position: relative; width: min(100%, 440px); }
@media (max-width: 959px) {
  .demo { width: min(86%, 330px); }
  .step:nth-child(even) .demo { justify-self: end; }
}
/* after the practice board's colour field, the second rules section starts closer */
.try + .rules { padding-top: clamp(72px, 9vw, 136px); }
.demo img { width: 100%; height: auto; }
.demo .hb + img, .demo.is-live > img { display: none; }
.replay {
  position: absolute; right: 10px; top: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 10px;
  border-radius: 999px; border: 0; background: var(--label-bg); color: var(--label-ink);
  font-weight: 800; font-size: var(--fs-small); cursor: pointer;
  opacity: 0; transition: opacity .25s, transform .2s var(--ease-out);
}
.replay svg { width: 18px; height: 18px; }
.replay.is-shown { opacity: 1; }
.replay:not(.is-shown) { pointer-events: none; }
.replay:focus-visible { opacity: 1; }
.replay:hover { transform: scale(1.04); }
.replay:active { transform: scale(.96); }
.rules-stage { display: none; }
.demo-board { position: relative; }

@media (min-width: 960px) {
  .js .rules-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 112px); }
  .js .rules-stage { display: block; position: sticky; top: max(24px, calc(50svh - 330px)); align-self: start; margin-top: clamp(48px, 6vw, 80px); }
  .js .rules-stage .demo-board { width: min(100%, 480px); }
  .js .steps { gap: 0; }
  .js .step { min-height: 64svh; align-content: center; padding-block: 40px; }
  .js .step .demo { display: none; }
  .js .step h3, .js .step p { transition: color .3s; }
  .js .step:not(.is-active) h3, .js .step:not(.is-active) p { color: var(--soft); }
  .js .step:not(.is-active) h3 svg { opacity: .55; transition: opacity .3s; }
  .step h3 { font-size: var(--fs-h3); }
  .step p { font-size: var(--fs-m); line-height: 1.4; font-weight: 600; }
  :not(.js) .steps, .steps { grid-template-columns: 1fr; }
  html:not(.js) .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 40px; }
}

/* ---------- try one move ---------- */
.try { margin-top: var(--section); background: var(--try-field); color: var(--try-ink); --focus: var(--try-ink); }
.try-in { max-width: calc(var(--max) + 2 * var(--m)); margin-inline: auto; padding-block: clamp(72px, 9vw, 140px); display: grid; gap: 40px; }
.try-lede { margin-top: 16px; font-size: var(--fs-m); font-weight: 650; line-height: 1.35; max-width: 26ch; }
.try-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.try-tabs button, .try-btn {
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 2.5px solid currentColor; background: transparent; color: inherit; font-weight: 850; font-size: var(--fs-small);
  transition: background-color .2s, color .2s, transform .15s;
}
.try-tabs button[aria-pressed="true"] { background: var(--try-ink); color: var(--try-field); }
.try-tabs button:hover, .try-btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.try-tabs button[aria-pressed="true"]:hover { background: var(--try-ink); }
.try-tabs button:active, .try-btn:active { transform: scale(.97); }
.try-result { margin-top: 22px; }
/* the result line and the bridge below it always have their space: nothing moves when they appear (CLS) */
.try-status { min-height: 3lh; font-weight: 800; font-size: var(--fs-body); max-width: 32ch; }
.try-get { visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s linear .3s; }
.try-get.is-on { visibility: visible; opacity: 1; transition: opacity .3s; }
.try-more { font-weight: 650; max-width: 34ch; }
.try-get .store-link { margin-top: 14px; background: var(--try-ink); color: var(--try-field); border-color: var(--try-ink); }
.try-get .store-link:hover { background: color-mix(in srgb, var(--try-ink) 88%, var(--try-field)); }
.soon-note { font-weight: 850; }
.try-get .soon-note { margin-top: 10px; }
.try-play { display: grid; gap: 18px; justify-items: center; }
.try-board { width: min(100%, 460px); }
.try-grid { position: relative; }
.try-grid .hb { width: 100%; }
.try-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); z-index: 5; }
.try-cells button {
  position: relative; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; border-radius: 26%;
  -webkit-tap-highlight-color: transparent;
}
.try-cells button[aria-disabled="true"] { cursor: default; }
.try-cells button:not([aria-disabled="true"]):hover::after,
.try-cells button:focus-visible::after,
.try-cells button.is-hint::after {
  content: ""; position: absolute; inset: 5%; border-radius: 26%;
  border: 3px dashed var(--ghost); opacity: .75;
}
.try-cells button.is-hint::after { border-style: solid; border-color: var(--text); animation: hint 1s var(--ease-out) 4 alternate; }
@keyframes hint { from { transform: scale(.88); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.try-cells button:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.try-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* the tile sits in its own little tray: a saffron tile on the saffron field would vanish */
.try-piece {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 850; font-size: var(--fs-small); margin-right: 6px;
  background: var(--board); color: var(--text); padding: 6px 8px 6px 14px; border-radius: 16px; border-bottom: 4px solid var(--board-lip);
}
.try-tile { width: 44px; height: 44px; display: block; }
.try-tile svg { width: 100%; height: 100%; }
.try-fallback img { width: min(64vw, 300px); height: auto; border-radius: 26px; border: 6px solid var(--try-ink); aspect-ratio: 390 / 770; object-fit: cover; object-position: 50% 66%; }
.js .try-fallback { display: none; }

@media (min-width: 960px) {
  .try-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(48px, 6vw, 112px); }
  .try-play { justify-items: start; }
  .try-side { justify-content: flex-start; }
}
/* phones: tile and buttons above the board, the result under it, so the board never moves */
@media (max-width: 959px) {
  .try-in { gap: 0; }
  .try-copy, .try-play { display: contents; }
  .try-tabs { order: 3; }
  .try-side { order: 4; margin-top: 26px; min-height: 100px; align-content: center; }
  .try-board { order: 5; margin-top: 14px; justify-self: center; }
  .try-fallback { order: 5; margin-top: 28px; justify-self: center; }
  .try-result { order: 6; margin-top: 20px; }
}

/* ---------- inside the game: index with preview ---------- */
.inside { padding-top: var(--section); }
.inside-head { display: grid; gap: 18px; max-width: 760px; }
.inside-head p { font-size: var(--fs-m); font-weight: 650; line-height: 1.35; }
.moments { display: grid; gap: 4px; margin-top: 36px; }
.moment { display: grid; }
.moment-btn {
  all: unset; box-sizing: border-box; display: grid; gap: 2px; padding: 14px 0; cursor: pointer; border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
.moment-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.m-title { font-weight: 900; font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.12; transition: color .24s, transform .24s var(--ease-out); }
.m-text { color: var(--soft); font-size: var(--fs-body); font-weight: 600; }
.js .moment:not(.is-active) .m-title { color: var(--soft); }
/* the screenshots carry the iOS status bar (09:41) and the home indicator: cropped off here */
.moment-shot img { width: 100%; height: auto; border-radius: 26px; background: var(--ground-2); aspect-ratio: 390 / 770; object-fit: cover; object-position: 50% 66%; }
@media (max-width: 959px) {
  .moment-shot { display: block; width: min(78vw, 330px); margin: 6px 0 18px; }
  .js .moment:not(.is-active) .moment-shot { display: none; }
  .js .moment.is-active .moment-shot { animation: shot-in .35s var(--ease-out); }
}
@keyframes shot-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (min-width: 960px) {
  .moments {
    position: relative; overflow: visible; margin: 56px 0 0; padding: 0;
    display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-auto-rows: auto; gap: 0 clamp(48px, 6vw, 112px);
    min-height: 780px;
  }
  .moment { grid-column: 1; width: auto; display: block; }
  .moment-btn { grid-template-columns: 1fr; gap: 6px; width: 100%; padding: 22px 0; }
  .moment.is-active .m-title { transform: translateX(10px); }
  .moment-shot {
    position: absolute; top: 0; right: 0; width: min(380px, 100%);
    grid-column: 2; opacity: 0; transition: opacity .24s ease, transform .24s var(--ease-out);
    transform: translateY(8px) scale(.985); pointer-events: none;
  }
  .moments { grid-template-columns: minmax(0, 1fr) 380px; }
  .moment.is-active .moment-shot { opacity: 1; transform: none; }
  html:not(.js) .moment:first-child .moment-shot { opacity: 1; transform: none; }
}

/* ---------- fair play: the slip ---------- */
.fair { margin-top: var(--section); background: var(--fair-field); color: var(--fair-ink); }
.fair-in { max-width: calc(var(--max) + 2 * var(--m)); margin-inline: auto; padding-block: clamp(80px, 10vw, 160px); display: grid; gap: 48px; }
.fair-copy p { margin-top: 18px; font-size: var(--fs-m); font-weight: 650; line-height: 1.35; max-width: 30ch; }
.fair-copy .fair-maker { margin-top: 26px; font-size: var(--fs-body); max-width: 40ch; }
.slip {
  background: var(--slip); color: var(--slip-ink); width: min(100%, 520px); justify-self: center;
  padding: 34px clamp(20px, 3vw, 36px) 64px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 95% 100%, 90% calc(100% - 14px), 85% 100%, 80% calc(100% - 14px), 75% 100%, 70% calc(100% - 14px), 65% 100%, 60% calc(100% - 14px), 55% 100%, 50% calc(100% - 14px), 45% 100%, 40% calc(100% - 14px), 35% 100%, 30% calc(100% - 14px), 25% 100%, 20% calc(100% - 14px), 15% 100%, 10% calc(100% - 14px), 5% 100%, 0 calc(100% - 14px));
  font-variant-numeric: tabular-nums;
}
.slip dl > div { display: flex; align-items: baseline; gap: 10px; padding-block: 9px; }
.slip dt { font-weight: 650; }
.slip dd { margin: 0; font-weight: 900; white-space: nowrap; text-align: right; }
.slip dl > div::after { content: none; }
.slip dt { flex: 0 1 auto; display: flex; align-items: baseline; gap: 10px; }
.slip dl > div { position: relative; }
.slip dt::after { content: ""; flex: 1 1 24px; min-width: 24px; border-bottom: 4px dotted color-mix(in srgb, var(--slip-ink) 35%, transparent); transform: translateY(-4px); }
.slip dl > div { justify-content: space-between; }
.slip dt { flex: 1 1 auto; }
.slip-end {
  margin: 22px calc(-1 * clamp(20px, 3vw, 36px)) 0; padding: 14px clamp(20px, 3vw, 36px);
  background: var(--slip-ink); color: var(--slip); font-weight: 850;
}
@media (min-width: 960px) {
  .fair-in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; gap: clamp(48px, 6vw, 112px); }
  .slip { justify-self: end; }
}
/* narrow slips: term left, value right, no broken dot leaders */
@media (max-width: 519px) {
  .slip dt::after { display: none; }
  .slip dl > div { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; }
}

/* after a colour field the next paper section starts closer: the field's own padding is the gap */
.fair + .gc, .money + .world { padding-top: clamp(72px, 9vw, 136px); }

/* ---------- game center ---------- */
.gc { padding-top: var(--section); display: grid; gap: 44px; }
.gc-head { display: grid; gap: 18px; max-width: 820px; }
.gc-head p { font-size: var(--fs-m); font-weight: 650; line-height: 1.35; }
.medals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.medals li { display: flex; align-items: center; gap: 14px; }
.medals img { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.medals span { font-size: var(--fs-small); color: var(--soft); font-weight: 650; line-height: 1.3; }
.medals b { display: block; color: var(--text); font-weight: 900; font-size: var(--fs-body); }
@media (min-width: 700px) { .medals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .medals { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; } .medals img { width: 88px; height: 88px; } }

/* ---------- money (MONETIZATION block) ---------- */
.money { margin-top: var(--section); background: var(--money-field); color: var(--money-ink); }
.money-in { max-width: calc(var(--max) + 2 * var(--m)); margin-inline: auto; padding-block: clamp(80px, 10vw, 160px); display: grid; gap: 56px; }
.money-head p { margin-top: 18px; font-size: var(--fs-m); font-weight: 650; line-height: 1.35; max-width: 30ch; }
.menu { display: grid; gap: 48px; }
.menu-group h3 { font-size: var(--fs-m); font-weight: 850; margin-bottom: 18px; }
.menu-group ul { display: grid; gap: 22px; }
.menu-group li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; font-variant-numeric: tabular-nums; }
.menu .item { font-weight: 850; }
.menu .val { font-weight: 850; text-align: right; }
.menu .desc { grid-column: 1 / -1; color: var(--money-soft); font-size: var(--fs-small); max-width: 40ch; margin-top: 2px; }
.menu-note { margin-top: 28px; color: var(--money-soft); max-width: 44ch; font-size: var(--fs-small); }
.menu-text { max-width: 44ch; line-height: 1.45; }
.menu-text + .menu-text { margin-top: 14px; color: var(--money-soft); }
.themes-head h3 { font-size: var(--fs-m); }
.themes-head p { margin-top: 8px; color: var(--money-soft); }
.themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; margin-top: -24px; }
.themes li { display: grid; gap: 10px; align-content: start; }
@media (min-width: 640px) { .themes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.themes img { width: 100%; height: auto; border-radius: 18px; }
.themes span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-weight: 850; }
.themes em { font-style: normal; font-weight: 700; font-size: var(--fs-small); color: var(--money-soft); }
.money-cta.soon-note { font-size: var(--fs-m); }
.money .store-link { color: var(--money-ink); }
@media (min-width: 960px) {
  .money-in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px clamp(48px, 6vw, 112px); }
  .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  .themes-head, .themes, .money-cta { grid-column: 1 / -1; }
  .themes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
}

/* ---------- offline, 34 languages ---------- */
.world { padding-top: var(--section); display: grid; gap: 40px; }
.world-head { display: grid; gap: 28px; }
.world-head h2 { max-width: 16ch; }
.world-facts { display: grid; gap: 18px; max-width: 60ch; }
/* 34 names in their own scripts, set like a register. content-visibility skips their (expensive, many system
   fonts) layout until the browser is idle (home.js); the reserved heights are measured, and deliberately not
   "auto", which made jumps to #questions land 600 px off. */
.langs { columns: 2; column-gap: 24px; border-top: 2px solid var(--rule); padding-top: 18px; content-visibility: auto; contain-intrinsic-size: none 612px; }
.langs li { padding: 4px 0; font-weight: 750; break-inside: avoid; }
.langs li[dir="rtl"] { text-align: left; }   /* the register stays one left edge */
@media (min-width: 640px) { .langs { columns: 3; contain-intrinsic-size: none 420px; } }
@media (min-width: 960px) { .langs { columns: 4; column-gap: 32px; contain-intrinsic-size: none 328px; } }
@media (min-width: 960px) {
  .world-head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 112px); align-items: end; }
}

/* ---------- questions ---------- */
.faq { padding-top: var(--section); display: grid; gap: 36px; }
.qa { display: grid; gap: 8px; max-width: 880px; }
.qa details { background: var(--ground-2); border-radius: 18px; }
.qa summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 22px; font-weight: 850; font-size: var(--fs-body); border-radius: 18px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--ease-out); }
.qa details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.qa summary:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.answer { padding: 0 22px 22px; max-width: 68ch; }
@media (min-width: 960px) { .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(48px, 6vw, 112px); align-items: start; } .faq h2 { position: sticky; top: 32px; } }

/* ---------- close (inverted) ---------- */
.close { margin-top: var(--section); background: var(--close-field); color: var(--close-ink); --focus: var(--close-ink); }
.close-in { max-width: calc(var(--max) + 2 * var(--m)); margin-inline: auto; padding-block: clamp(88px, 11vw, 160px); display: grid; gap: 40px; container-type: inline-size; }
.close-main { display: contents; }
.close h2 { font-size: var(--fs-xl); line-height: .94; letter-spacing: -0.045em; }
.close h2:lang(de) { font-size: min(var(--fs-xl), 100cqi / 8.6); }
.close h2 span { display: block; }
.close-board { width: min(78vw, 300px); }
.close-board > div:empty { aspect-ratio: 1 / 1.16; }   /* the board's own shape, reserved before home.js draws it */
html:not(.js) .close-board { display: none; }
@media (max-width: 959px) { .close-board { order: 1; justify-self: center; } .close-row { order: 2; } }
.close-row { display: grid; gap: 32px; align-items: end; }
.close-soon p { font-weight: 850; font-size: var(--fs-m); }
.close-soon { flex-wrap: wrap; gap: 14px 20px; }
.close-copy { display: grid; gap: 16px; max-width: 46ch; }
.close .get-note { color: inherit; opacity: 1; }
.close-get { display: flex; align-items: center; gap: 20px; }
.close .store-link { background: var(--action); color: var(--on-action); border-color: var(--action); }
.close .store-link:hover { background: color-mix(in srgb, var(--action) 86%, #fff); }
.close .qr { display: none; }
@media (min-width: 960px) {
  .close-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(48px, 6vw, 112px); }
  .close-main { display: grid; gap: 56px; container-type: inline-size; }
  .close-board { width: clamp(300px, 26vw, 380px); }
  .close .qr { display: block; }
}

/* ---------- phone dock ---------- */
.dock {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px;
  background: var(--text); color: var(--ground); border-radius: 20px; --focus: var(--ground);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 8px 24px rgb(0 0 0 / .25);
  transform: translateY(140%); visibility: hidden;   /* out of the tab order and the screen reader while down */
  transition: transform .35s var(--ease-out), visibility 0s linear .35s;
}
.dock.is-up { transform: none; visibility: visible; transition: transform .35s var(--ease-out), visibility 0s; }
.dock img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
/* two short lines, never three: name, then the ads line */
.dock p { flex: 1; min-width: 0; font-size: .875rem; line-height: 1.25; white-space: nowrap; }
.dock p b, .dock p span { display: block; overflow: hidden; text-overflow: ellipsis; }
.dock p span { opacity: .82; font-weight: 650; }
.dock-link {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: 999px; background: var(--action); color: var(--on-action); font-weight: 900; font-size: .9375rem; text-decoration: none;
}
.dock-link:active { transform: scale(.97); }
@media (min-width: 960px) { .dock { display: none !important; } }
@media (max-width: 439px) { .dock img { display: none; } .dock { padding-left: 16px; } }
.dock p span { font-size: .8125rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dock { background: #2A2935; color: #EFE9DF; --focus: #EFE9DF; } }
:root[data-theme="dark"] .dock { background: #2A2935; color: #EFE9DF; --focus: #EFE9DF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .screen { box-shadow: 0 0 0 1px #34323F; } }
:root[data-theme="dark"] .screen { box-shadow: 0 0 0 1px #34323F; }

/* ---------- footer on this page ---------- */
.foot { padding-top: clamp(80px, 10vw, 140px); }

/* ---------- entrances (home.js adds .pre, then .in) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pre { opacity: 0; transform: translateY(22px); }
  .pre.in { opacity: 1; transform: none; transition: opacity .6s var(--ease-out) calc(var(--i, 0) * 70ms), transform .7s var(--ease-out) calc(var(--i, 0) * 70ms); }
  /* hero text is not faded in: it is the LCP on phones and must paint at once. The video card rises in. */
  .hero-media { animation: lift-in .9s var(--ease-out) both; }   /* transform only: the poster is the LCP and must paint at once */
  .hero .facts li { animation: tile-in .5s var(--ease-out) both; }
  .hero .facts li:nth-child(2) { animation-delay: .08s; }
  .hero .facts li:nth-child(3) { animation-delay: .16s; }
}
@keyframes tile-in { from { transform: translateY(-10px); } to { transform: none; } }
@keyframes lift-in { from { transform: translateY(24px); } to { transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* the App Store badge never animates (Apple): nothing around it moves either */

@media (max-width: 959px) {
  .bar nav .opt { display: none; }
}
@media (max-width: 420px) {
  .get-row { gap: 12px; }
  .badge img { height: 48px; }
}
/* "Eine ganze Kette." is 7.6 em wide: on phones it gets exactly the width it needs, so the headline stays on two lines */
/* EN "A whole chain." is 6.5 em, DE "Eine ganze Kette." 7.6 em: on phones each gets the width it needs (two lines, never three) */
@media (max-width: 959px) {
  .hero h1 { font-size: min(var(--fs-xl), calc((100vw - 2 * var(--m) - 2 * clamp(20px, 4.4vw, 72px)) / 6.6)); }
  .hero h1:lang(de) { font-size: min(var(--fs-xl), calc((100vw - 2 * var(--m) - 2 * clamp(20px, 4.4vw, 72px)) / 7.75)); }
}
.medals li, .medals span { min-width: 0; }
@media (max-width: 599px) {
  .medals { gap: 26px 16px; }
  .medals li { flex-direction: column; align-items: flex-start; gap: 8px; }
  .medals img { width: 56px; height: 56px; }
}
.qa details:not([open]) .answer { display: none; }