/* neuws pitch landing v3
   Each section owns a brand hue; cards separate from their band by colour,
   not by near-identical whites. Tokens trace to docs/m3_expressive_color_system.md and
   lib/theme/app_theme.dart. Four type sizes. No italics outside real story headlines. */

:root {
  --platinum: #ede2e0; --thistle: #dec2db; --liberty: #5b62b3; --blue: #2e80e4; --sky: #6da0e1;
  --on-platinum: #124c91; --on-thistle: #242a6b; --on-blue: #1b102a; --on-liberty: #fff8f7; --on-sky: #242a6b;
  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Libre Baskerville", Georgia, serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.45, 0.5, 1);
  --gutter: clamp(16px, 5vw, 56px);
  --wrap: 1120px;
  --t-title: clamp(34px, 4.2vw, 56px);
  --t-body: clamp(17px, 1.35vw, 19px);
  --t-label: 15px;
}

/* ── section palettes ─────────────────────────────────────────────── */
:root {
  color-scheme: only light;
  --page: #ede2e0;
  --bar: #fff8f7; --bar-ink: #242a6b; --bar-chip: #ede2e0;
  --hero-bg: #ede2e0; --hero-ink: #5b62b3; --hero-body: #4a4f8c;
  --read-bg: #d4e2f5; --read-ink: #1d2a6b; --read-body: #3c4f86; --read-accent: #2269c4;
  --learn-bg: #dec2db; --learn-ink: #242a6b; --learn-body: #4d3f73; --learn-accent: #454ca6;
  --play-bg: #5b62b3; --play-ink: #fff8f7; --play-body: #e5e2f7; --play-accent: #f1d6ee;
  --become-bg: #ede2e0; --become-ink: #242a6b; --become-body: #4a4f8c; --become-accent: #2e6fd0;
  --close-bg: #2e80e4; --close-ink: #1b102a;
  --foot-bg: var(--close-bg); --foot-ink: var(--close-ink);
  --card: #fff8f7; --card-ink: #242a6b; --card-soft: #625d63; --card-2: #eadcea; --card-3: #dccbde;
  --screen: #fff8f7; --screen-ink: #124c91; --screen-soft: #625d63; --screen-round: #eadcea; --word: #dde4f6; --bezel: #1b1d2e;
  --field: #fff8f7; --field-line: #cdbccc;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); scroll-padding-top: 90px; overflow-x: clip; }
body { margin: 0; background: var(--page); color: var(--card-ink); font-family: var(--sans); font-size: var(--t-body); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--blue); color: var(--on-blue); font-weight: 800; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 12px; }

/* ── bands ── */
.band { --bg: var(--page); --ink: var(--card-ink); --body-ink: var(--card-soft); --accent: var(--blue);
  background: var(--bg); color: var(--ink); padding: clamp(96px, 11vw, 150px) var(--gutter); transition: background-color 300ms var(--ease); }
.b-hero { --bg: var(--hero-bg); --ink: var(--hero-ink); --body-ink: var(--hero-body); --accent: var(--blue); }
.b-read { --bg: var(--read-bg); --ink: var(--read-ink); --body-ink: var(--read-body); --accent: var(--read-accent); }
.b-learn { --bg: var(--learn-bg); --ink: var(--learn-ink); --body-ink: var(--learn-body); --accent: var(--learn-accent); }
.b-play { --bg: var(--play-bg); --ink: var(--play-ink); --body-ink: var(--play-body); --accent: var(--play-accent); }
.b-become { --bg: var(--become-bg); --ink: var(--become-ink); --body-ink: var(--become-body); --accent: var(--become-accent); }
.b-close { --bg: var(--close-bg); --ink: var(--close-ink); }
.wrap { width: min(var(--wrap), 100%); margin: 0 auto; }
.center { text-align: center; }
.split { display: grid; gap: clamp(48px, 7vw, 96px); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; } }

.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: var(--t-label); font-weight: 800; color: var(--accent); }
.kicker span { display: inline-grid; place-items: center; min-width: 32px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--accent); color: var(--bg); font-size: 12px; }
h2, .sub-h { margin: 0; color: var(--ink); font-weight: 800; font-size: var(--t-title); line-height: 1.02; letter-spacing: -0.035em; }
.accent { color: var(--accent); }
.body { max-width: 40ch; margin: 22px 0 0; color: var(--body-ink); }
.center .body { margin-inline: auto; }

/* ── pills ── */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border: 0; border-radius: 999px; font-weight: 800; font-size: 16px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 180ms var(--ease), background-color 180ms var(--ease); }
.pill:active { transform: scale(0.97); }
.pill-primary { background: var(--blue); color: var(--on-blue); }
.pill-primary:hover { background: #3f8ce9; }
.pill-quiet { background: var(--card-2); color: var(--card-ink); }
.pill-invert { background: var(--platinum); color: var(--on-platinum); }
.pill-sm { height: 40px; padding: 0 18px; font-size: 15px; }
.pill-lg { height: 58px; padding: 0 30px; font-size: 18px; }
.pill.wide { width: 100%; }
.pill.attention { animation: attention 1.6s var(--ease) infinite; }
@keyframes attention { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ── bar: content-width, aligned with the page column ── */
.bar { position: fixed; z-index: 30; top: 12px; left: 50%; width: min(var(--wrap), calc(100% - 24px)); height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 22px; border-radius: 999px; background: var(--bar); transform: translate(-50%, -150%); transition: transform 420ms var(--ease), background-color 300ms var(--ease); }
.bar.show { transform: translate(-50%, 0); }
.bar-mark { color: var(--blue); font-weight: 800; font-size: 26px; letter-spacing: -0.045em; text-decoration: none; }
.bar-right { display: flex; align-items: center; gap: 8px; }
.bar-count { display: inline-flex; align-items: center; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--bar-chip); color: var(--bar-ink); font-size: 15px; font-weight: 700; text-decoration: none; animation: pop 420ms var(--spring); transition: transform 260ms var(--spring); }
.bar-count b { font-weight: 800; }
.bar-count.bump { transform: scale(1.14); }
.count-gem { width: 11px; height: 11px; margin-right: 8px; border-radius: 3px; background: var(--blue); transform: rotate(45deg); }

/* ── hero: v1 orbit + wordmark, calm two-word swap ── */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding-top: 56px; padding-bottom: 120px; text-align: center; }
.hero-center { display: grid; justify-items: center; gap: clamp(20px, 3.4svh, 40px); }
.orbit { position: relative; width: min(560px, calc(100vw - 40px)); height: clamp(190px, min(26vw, 30svh), 250px); }
.wordmark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; color: var(--blue); font-weight: 800; font-size: clamp(82px, min(10vw, 14svh), 118px); letter-spacing: -0.05em; line-height: 1; }
.flag { position: absolute; left: 50%; top: 50%; width: clamp(30px, 3.8vw, 42px); height: clamp(30px, 3.8vw, 42px); border-radius: 999px; object-fit: cover; will-change: transform; transform: translate(-50%, -50%); }
.promise { display: grid; margin: 0; font-weight: 800; font-size: clamp(40px, min(6vw, 7svh), 62px); line-height: 1.02; letter-spacing: -0.035em; color: var(--ink); }
.promise span { display: block; white-space: nowrap; }
.promise b { font-weight: 800; color: var(--blue); transition: color 160ms var(--ease); }
.promise b.swap-sky { color: var(--sky); }
.promise b.swap-liberty { color: var(--liberty); }
.lede { max-width: 32ch; margin: 0; color: var(--body-ink); }
.scroll-cue { position: absolute; left: 50%; bottom: clamp(26px, 5svh, 56px); width: 54px; height: 54px; transform: translateX(-50%); color: var(--blue); animation: cue 1300ms ease-in-out infinite alternate; }
.scroll-cue::before { content: ""; position: absolute; left: 50%; top: 40%; width: 26px; height: 26px; border-right: 7px solid currentColor; border-bottom: 7px solid currentColor; border-radius: 5px; transform: translate(-50%, -50%) rotate(45deg); }
@keyframes cue { from { translate: 0 0; } to { translate: 0 12px; } }

/* ── chips ── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 7px; border: 0; border-radius: 999px; background: var(--card); color: var(--card-ink); font-weight: 700; font-size: var(--t-label); cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 180ms var(--ease); }
.chip img { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; }
.chip[aria-checked="true"] { background: var(--liberty); color: var(--on-liberty); }
.chip.pressed { transform: scale(0.94); }
.group .chips { margin-top: 0; }
.hint { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; color: var(--body-ink); font-size: var(--t-label); font-weight: 700; }
.hint-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--accent); animation: pulse 1.8s var(--ease) infinite; }
.hint.done .hint-dot { animation: none; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.6); } }

/* ── phone: fixed real proportions (390 × 844), never resizes ── */
.phone { justify-self: center; width: min(350px, 100%, 39svh); min-width: min(300px, 100%); aspect-ratio: 390 / 844; padding: 11px; border-radius: 56px; background: var(--bezel); }
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 46px; background: var(--screen); padding: 0 18px; }
.status { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 12px; font-size: 14px; font-weight: 800; color: var(--screen-ink); }
.island { width: 96px; height: 28px; border-radius: 999px; background: #000; }
.status-icons { display: flex; gap: 4px; }
.status-icons i { width: 14px; height: 10px; border-radius: 3px; background: var(--screen-ink); opacity: 0.8; }
.reader-top { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.reader-top .grow { flex: 1; }
.round { width: 38px; height: 38px; border-radius: 999px; background: var(--screen-round); display: grid; place-items: center; }
.round svg { width: 17px; height: 17px; fill: none; stroke: var(--screen-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.story-title { margin: 14px 0 12px; font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.16; color: var(--screen-ink); }
.story-image { width: calc(100% + 36px); height: auto; max-width: none; margin: 0 -18px; aspect-ratio: 1080 / 600; object-fit: cover; }
.split-reader { margin-top: 14px; }
.split-reader p { margin: 0; font-size: 15.5px; line-height: 1.58; color: var(--screen-ink); }
.split-reader .src { color: var(--screen-soft); }
.split-rule { display: grid; place-items: center; margin: 8px 0; height: 12px; }
.split-rule span { width: 44px; height: 5px; border-radius: 999px; background: var(--word); }
.tgt { transition: opacity 260ms var(--ease); }
.tgt.fading { opacity: 0; }
.w { border-radius: 7px; padding: 0 3px; margin: 0 -1px; background: var(--word); color: var(--screen-ink); transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.tgt .w { cursor: pointer; font-weight: 700; }
.tgt button.w { border: 0; font: inherit; font-weight: 700; line-height: inherit; }
.w.lit { background: var(--liberty); color: var(--on-liberty); }
.w.kept { background: var(--sky); color: var(--on-sky); }
.home-indicator { position: absolute; left: 50%; bottom: 8px; width: 120px; height: 5px; margin-left: -60px; border-radius: 999px; background: var(--screen-ink); opacity: 0.5; }
.word-sheet { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; padding: 10px 20px 26px; border-radius: 36px; background: var(--card-2); transition: transform 380ms var(--spring), opacity 220ms var(--ease); }
.word-sheet.closing, .word-sheet.opening { transform: translateY(110%); opacity: 0; }
.sheet-grip { width: 40px; height: 5px; margin: 0 auto 14px; border-radius: 999px; background: var(--card-3); }
.sheet-head { display: flex; gap: 14px; align-items: center; }
.sheet-flag { width: 42px; height: 42px; border-radius: 999px; object-fit: cover; }
.sheet-word { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--card-ink); letter-spacing: -0.02em; }
.sheet-base { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--card-soft); }
.sheet-meaning { margin: 12px 0 16px; font-size: 17px; color: var(--card-ink); }
.sheet-meaning b { color: var(--blue); }
.sheet-actions { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.sheet-done { background: var(--sky) !important; color: var(--on-sky) !important; }

/* fingertip: a neuws-blue touch that demonstrates, then hands over */
.fingertip, .mini-tip { position: absolute; z-index: 45; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 999px; background: var(--blue); box-shadow: 0 0 0 4px var(--platinum); pointer-events: none; transition: opacity 320ms var(--ease); }
.fingertip.gone, .mini-tip.gone { opacity: 0; }
.fingertip::after, .mini-tip::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; border: 3px solid var(--sky); opacity: 0; }
.fingertip.tap, .mini-tip.tap { animation: press 440ms var(--ease); }
.fingertip.tap::after, .mini-tip.tap::after { animation: ripple 640ms var(--ease); }
@keyframes press { 40% { transform: scale(0.72); } }
@keyframes ripple { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
.mini-tip { width: 22px; height: 22px; margin: -11px 0 0 -11px; box-shadow: 0 0 0 3px var(--card); opacity: 0; }
.mini-tip.big { width: 30px; height: 30px; margin: -15px 0 0 -15px; }

/* ── learn: the word's journey ── */
.journey { list-style: none; margin: clamp(48px, 7vw, 80px) 0 0; padding: 0; display: grid; gap: 18px; position: relative; }
@media (min-width: 960px) { .journey { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.step { display: grid; grid-template-rows: auto 1fr; gap: 14px; }
.step-card { height: 100%; }
.step-label { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; color: var(--ink); }
.step-label span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; }
.step-card { position: relative; min-height: 250px; padding: 22px; border-radius: 32px; background: var(--card); color: var(--card-ink); }
.story-snip { display: grid; align-content: center; }
.story-snip p { margin: 0; font-size: 21px; line-height: 1.6; color: var(--card-soft); }
.story-snip .hl { padding: 1px 6px; border-radius: 8px; background: var(--sky); color: var(--on-sky); font-weight: 800; }
.word-card { display: grid; align-content: start; gap: 4px; }
.wc-top { display: flex; align-items: center; justify-content: space-between; }
.wc-top img { width: 36px; height: 36px; border-radius: 999px; object-fit: cover; }
.wc-tag { padding: 4px 11px; border-radius: 999px; background: var(--card-2); color: var(--card-soft); font-size: 12px; font-weight: 800; }
.wc-tag.yours { background: var(--sky); color: var(--on-sky); }
.wc-word { margin: 18px 0 0; font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; overflow-wrap: anywhere; }
.wc-base { margin: 0; font-size: 14px; font-weight: 700; color: var(--card-soft); }
.wc-meaning { margin: 10px 0 0; font-size: 18px; font-weight: 700; color: var(--blue); }
.wc-level { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-top: 18px; font-size: 13px; font-weight: 800; color: var(--card-soft); }
.wc-level b { color: var(--card-ink); }
.wc-bar { height: 10px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.wc-bar i { display: block; height: 100%; width: 12%; border-radius: 999px; background: #6fcdb9; transition: width 900ms var(--ease); }
.round-card { display: grid; align-content: start; gap: 12px; }
.rc-top { display: flex; align-items: center; justify-content: space-between; }
.rc-tag, .rc-streak { padding: 4px 11px; border-radius: 999px; background: var(--card-2); color: var(--card-soft); font-size: 12px; font-weight: 800; transition: background-color 300ms var(--ease), color 300ms var(--ease); }
.rc-streak.lit { background: #d99caf; color: #3b1020; animation: pop 520ms var(--spring); }
.rc-q { margin: 6px 0 2px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.rc-q b { color: var(--blue); }
.rc-xp { position: absolute; right: 20px; top: 56px; margin: 0; padding: 5px 12px; border-radius: 999px; background: #6fcdb9; color: #10231f; font-weight: 800; font-size: 14px; opacity: 0; pointer-events: none; }
.rc-xp.pop { animation: xp 1500ms var(--ease) forwards; }
@keyframes xp { 0% { opacity: 0; transform: translateY(10px) scale(0.9); } 18% { opacity: 1; transform: translateY(0) scale(1.06); } 70% { opacity: 1; transform: translateY(-4px); } 100% { opacity: 0; transform: translateY(-16px); } }
.travel { position: absolute; z-index: 5; margin: 0; padding: 3px 12px; border-radius: 999px; background: var(--sky); color: var(--on-sky); font-weight: 800; font-size: 16px; pointer-events: none; }

/* shared options */
.options { display: grid; gap: 8px; }
.option { width: 100%; min-height: 50px; padding: 11px 18px; border: 0; border-radius: 18px; background: var(--card-2); color: var(--card-ink); font-size: 16px; font-weight: 700; text-align: left; cursor: pointer; transition: background-color 220ms var(--ease), color 220ms var(--ease), transform 180ms var(--ease), opacity 220ms var(--ease); }
.option:hover:not(:disabled) { background: var(--card-3); }
.option:active:not(:disabled) { transform: scale(0.98); }
.option:disabled { cursor: default; }
.option.right { background: var(--blue) !important; color: var(--on-blue) !important; }
.option.wrong { background: #d99caf !important; color: #3b1020 !important; animation: nope 380ms var(--ease); }
.option.dim { opacity: 0.5; }
@keyframes nope { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ── play ── */
.b-play { padding: 0; }
.card { background: var(--card); color: var(--card-ink); border-radius: 36px; }
.stage-head { text-align: center; width: 100%; max-width: var(--wrap); }
.duel-track { position: relative; height: 200svh; }
.duel-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: 100%; grid-template-rows: auto 1fr; justify-items: center; padding: 96px var(--gutter) 20px; }
.arena { position: relative; width: min(980px, 100%); height: 100%; }
.duelist { position: absolute; top: 42%; left: 50%; display: grid; justify-items: center; gap: 12px; will-change: transform, opacity; }
.big-avatar { width: clamp(110px, 15vw, 160px); height: clamp(110px, 15vw, 160px); border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: clamp(44px, 5.6vw, 64px); }
.big-avatar.you, .mini-avatar.you { background: var(--blue); color: var(--on-blue); }
.big-avatar.them, .mini-avatar.them { background: var(--thistle); color: var(--on-thistle); }
.duelist-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; color: var(--ink); }
.duelist-name img { width: 22px; height: 22px; border-radius: 999px; }
.vs { position: absolute; left: 50%; top: 42%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 999px; background: var(--platinum); color: var(--on-thistle); font-weight: 800; font-size: 22px; }
.clash { position: absolute; left: 50%; top: 20px; width: min(440px, 100%); padding: 22px; transform: translateX(-50%); will-change: transform, opacity; }
.clash-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.mini-avatar { width: 50px; height: 50px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: 21px; }
.score { display: flex; justify-content: center; align-items: baseline; gap: 8px; font-size: 38px; font-weight: 800; letter-spacing: -0.04em; }
.score i { font-style: normal; color: var(--card-soft); }
.score b { display: inline-block; transition: transform 400ms var(--spring); }
.score b.bump { transform: scale(1.35); color: var(--blue); }
.clash-cat { margin: 16px 0 6px; display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 800; color: var(--card-soft); }
.clash-cat span { padding: 4px 10px; border-radius: 999px; background: var(--thistle); color: var(--on-thistle); }
.clash-q { margin: 0 0 14px; font-size: 21px; font-weight: 700; line-height: 1.28; }
.clash-after { margin: 12px 0 0; min-height: 22px; font-size: 15px; color: var(--card-soft); }
.clash-after b { color: var(--card-ink); }
.your-move { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--blue); }
.your-move::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: currentColor; animation: pulse 1.4s var(--ease) infinite; }
.clash.awaiting .option { animation: nudge 2.4s var(--ease) infinite; }
.clash.awaiting .option:nth-child(2) { animation-delay: 0.12s; }
.clash.awaiting .option:nth-child(3) { animation-delay: 0.24s; }
.clash.awaiting .option:nth-child(4) { animation-delay: 0.36s; }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(4px); } }

/* arcade scene */
.arcade-track { position: relative; height: 290svh; }
.arcade-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: 100%; grid-template-rows: auto 1fr; justify-items: center; padding: 100px 0 24px; }
.arcade-heads { display: grid; padding: 0 var(--gutter); }
.arcade-heads > * { grid-area: 1 / 1; transition: opacity 300ms var(--ease); }
.sub-h { font-size: clamp(30px, 3.6vw, 48px); }
.h-alt { opacity: 0; }
.arcade-row { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 18px; margin-top: clamp(28px, 4svh, 48px); width: 100%; }
.game { flex: 0 0 min(320px, 78vw); padding: 14px 14px 20px; will-change: transform, opacity; }
.game-art { position: relative; height: 240px; border-radius: 26px; background: var(--card-2); display: grid; place-items: center; overflow: hidden; }
.game-name { margin: 16px 6px 2px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.game-desc { margin: 0 6px; color: var(--card-soft); font-size: 15px; }

.lang-pill { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border-radius: 999px; background: var(--card); font-size: 12px; font-weight: 800; }
.lang-pill img { width: 20px; height: 20px; border-radius: 999px; }


.live-art { align-content: start; justify-items: stretch; place-items: stretch; padding: 14px 16px; gap: 10px; display: grid; }
.live-top { display: flex; justify-content: space-between; align-items: center; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: #d99caf; color: #3b1020; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.live-dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; animation: pulse 1.1s var(--ease) infinite; }
.live-time { font-size: 12px; font-weight: 800; color: var(--card-soft); }
.live-q { margin: 2px 0 0; font-size: 17px; font-weight: 800; line-height: 1.28; text-align: left; }
.live-opts { display: grid; gap: 6px; }
.live-opts span { padding: 8px 14px; border-radius: 14px; background: var(--card); font-size: 14px; font-weight: 700; transition: background-color 220ms var(--ease), color 220ms var(--ease); }
.live-opts span.hover { background: var(--card-3); }
.live-opts span.right { background: var(--blue); color: var(--on-blue); }

/* clash of europe (expanded live card) */
.coe { position: absolute; left: 50%; top: 50%; width: min(760px, calc(100vw - 32px)); padding: clamp(20px, 3vw, 32px); opacity: 0; pointer-events: none; transform-origin: 50% 0; will-change: transform, opacity; }
.coe-top { display: flex; justify-content: space-between; align-items: center; }
.coe-note { font-size: 12px; font-weight: 800; color: var(--card-soft); }
.coe-q { margin: 14px 0 12px; font-size: clamp(20px, 2.3vw, 28px); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.coe-answers { display: flex; flex-wrap: wrap; gap: 8px; }
.coe-answers span { padding: 9px 16px; border-radius: 16px; background: var(--card-2); font-weight: 700; font-size: 15px; transition: background-color 220ms var(--ease), color 220ms var(--ease); }
.coe-answers span.right { background: var(--blue); color: var(--on-blue); }
.coe-sub { margin: 18px 0 8px; font-size: 13px; font-weight: 800; color: var(--card-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.coe-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.coe-bar { display: grid; grid-template-columns: 28px minmax(84px, 110px) 1fr 52px; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; }
.coe-bar img { width: 26px; height: 26px; border-radius: 999px; }
.coe-bar .track { position: relative; height: 16px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.coe-bar .fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: var(--liberty); }
.coe-bar.you .fill { background: var(--blue); }
.coe-bar .boost { position: absolute; top: 0; bottom: 0; width: 0; border-radius: 0 999px 999px 0; background: var(--sky); transition: width 600ms var(--spring); }
.coe-bar .pct { text-align: right; font-variant-numeric: tabular-nums; }
.coe-bar .you-tag { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--blue); color: var(--on-blue); font-size: 11px; }
.coe-bar.you.boosted .pct { color: var(--blue); }
.coe-plus { position: absolute; z-index: 3; margin: 0; padding: 2px 9px; border-radius: 999px; background: var(--sky); color: var(--on-sky); font-weight: 800; font-size: 13px; pointer-events: none; }

/* ── become ── */
.builder { display: grid; gap: clamp(40px, 6vw, 72px); margin-top: clamp(48px, 7vw, 80px); align-items: start; }
@media (min-width: 960px) { .builder { grid-template-columns: 1.1fr 0.9fr; } .passport-col { position: sticky; top: 96px; } }
.group { margin: 0 0 34px; padding: 0; border: 0; min-width: 0; }
.group legend { display: flex; align-items: baseline; gap: 10px; padding: 0; margin-bottom: 14px; font-size: 19px; font-weight: 800; color: var(--ink); }
.group legend small { font-size: 14px; font-weight: 700; color: var(--body-ink); }
.b-become .chip, .interest { box-shadow: inset 0 0 0 1.5px var(--field-line); }
.b-become .chip[aria-checked="true"], .interest[aria-pressed="true"] { box-shadow: none; }
.text-button { margin-top: 14px; padding: 6px 0; border: 0; background: none; color: var(--accent); font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.interest-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.interest { height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--field); color: var(--card-ink); font-weight: 700; font-size: var(--t-label); cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 180ms var(--ease); }
.interest[aria-pressed="true"] { background: var(--liberty); color: var(--on-liberty); }
.interest.nudge { animation: nope 380ms var(--ease); }

.passport { perspective: 1400px; width: min(460px, 100%); margin: 0 auto; }
.passport-inner { position: relative; aspect-ratio: 1.5; transform-style: preserve-3d; transition: transform 900ms var(--ease); }
.passport.flipped .passport-inner { transform: rotateY(180deg); }
.passport.tick .passport-inner { animation: tick 380ms var(--spring); }
@keyframes tick { 40% { transform: scale(1.025) rotate(-0.6deg); } }
.passport-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 30px; padding: 22px 24px; display: grid; grid-template-rows: auto auto 1fr auto auto; overflow: hidden; }
.passport-face.front { background: var(--liberty) repeating-radial-gradient(circle at 88% 12%, #5b62b3 0 9px, #6168b8 9px 10px); color: var(--on-liberty); }
.passport-face.back { transform: rotateY(180deg); background: var(--blue); color: var(--on-blue); grid-template-rows: auto 1fr auto auto; }
.pp-top { display: flex; justify-content: space-between; align-items: baseline; }
.pp-mark { margin: 0; font-weight: 800; font-size: 24px; letter-spacing: -0.05em; }
.pp-kind { font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--thistle); }
.pp-flags { display: flex; gap: 6px; margin-top: 16px; min-height: 40px; }
.pp-flags img { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 3px var(--thistle); animation: pop 420ms var(--spring); }
.pp-flags .empty { width: 40px; height: 40px; border-radius: 999px; background: #6a71bd; }
.back .pp-flags img { box-shadow: 0 0 0 3px #fff8f7; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pp-name { margin: 12px 0 0; font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; align-self: end; overflow-wrap: anywhere; }
.pp-name.placeholder { color: #a6aadb; }
.pp-rows { margin: 14px 0 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px; }
.pp-rows div { min-width: 0; }
.pp-rows dt { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--thistle); }
.pp-rows dd { margin: 2px 0 0; font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16ch; }
.pp-rows div:last-child dd { white-space: normal; max-width: 22ch; }
.pp-foot { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 2px dashed #7a80c4; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--thistle); }
.pp-done { margin: 18px 0 0; font-weight: 800; font-size: clamp(44px, 5vw, 60px); letter-spacing: -0.05em; line-height: 0.95; }
.pp-done-sub { margin: 10px 0 0; font-size: 16px; font-weight: 700; max-width: 30ch; }

.signup { width: min(460px, 100%); margin: 20px auto 0; display: grid; gap: 8px; }
.field input { width: 100%; height: 56px; padding: 0 22px; border: 0; border-radius: 22px; background: var(--field); box-shadow: inset 0 0 0 1.5px var(--field-line); color: var(--card-ink); font: inherit; font-size: 17px; font-weight: 700; outline: none; }
.field input::placeholder { color: var(--card-soft); }
.field input:focus { box-shadow: inset 0 0 0 3px var(--sky); }
.consent { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 22px; background: var(--field); box-shadow: inset 0 0 0 1.5px var(--field-line); font-weight: 700; font-size: 15px; cursor: pointer; color: var(--card-ink); }
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent small { display: block; font-weight: 600; font-size: 13px; color: var(--card-soft); }
.check { width: 28px; height: 28px; border-radius: 10px; box-shadow: inset 0 0 0 3px var(--blue); display: grid; place-items: center; }
.check svg { width: 18px; height: 18px; fill: none; stroke: var(--on-blue); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.consent input:checked + .check { background: var(--blue); }
.consent input:checked + .check svg { opacity: 1; }
.form-msg { min-height: 24px; margin: 4px 0 0; text-align: center; font-weight: 800; color: var(--accent); }
.form-msg.error { color: #b0467a; }
.next { width: min(460px, 100%); margin: 18px auto 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--body-ink); font-size: 15px; }
.next b { color: var(--ink); }

/* ── close ── */
.close { padding-block: clamp(120px, 15vw, 190px); overflow: hidden; }
.living { display: grid; margin: 0 0 44px; font-size: clamp(34px, 9vw, 104px); font-weight: 800; line-height: 0.95; letter-spacing: -0.045em; color: var(--ink); }
.living span { display: block; white-space: nowrap; }
.living b { font-weight: 800; transition: color 180ms var(--ease); }
.living b.swap-a { color: var(--platinum); }
.living b.swap-b { color: var(--thistle); }
.living b.swap-c { color: #242a6b; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 28px var(--gutter) max(32px, env(safe-area-inset-bottom)); background: var(--foot-bg); color: var(--foot-ink); font-size: 14px; font-weight: 700; }
.foot nav { display: flex; gap: 18px; }
.foot a { text-underline-offset: 4px; }
.preview-flag { position: fixed; left: 12px; bottom: 12px; z-index: 40; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--on-blue); color: var(--platinum); font-size: 12px; font-weight: 800; pointer-events: none; }
.ghost { position: fixed; z-index: 60; margin: 0; padding: 2px 10px; border-radius: 999px; background: var(--sky); color: var(--on-sky); font-weight: 800; font-size: 17px; pointer-events: none; }

.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 800ms var(--ease), transform 900ms var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .bar { height: 54px; padding-left: 18px; }
  .bar-mark { font-size: 23px; }
  #count-label { display: none; }
  .bar-count { padding: 0 12px 0 10px; }
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip { justify-content: flex-start; }
  .step-card { min-height: 0; }
  .duel-stage, .arcade-stage { padding-top: 80px; }
  .game-art { height: 220px; }
  .coe-bar { grid-template-columns: 24px 1fr 44px; }
  .coe-bar .name { display: none; }
  .pp-rows { grid-template-columns: 1fr 1fr; }
  .pp-rows div:last-child { grid-column: 1 / -1; }
  .passport-inner { aspect-ratio: 1.25; }
  .preview-flag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .duel-track, .arcade-track { height: auto; }
  .duel-stage, .arcade-stage { position: relative; height: auto; padding-bottom: 80px; }
  .arena { display: grid; justify-items: center; }
  .duelist, .vs { display: none; }
  .clash, .coe { position: relative; left: auto; top: auto; transform: none !important; opacity: 1 !important; pointer-events: auto; }
  .coe { margin: 32px auto 0; }
  .arcade-row { flex-wrap: wrap; }
  .h-alt { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   v4 — the guide, packs, clash phone, clash of europe, founding passport
   ══════════════════════════════════════════════════════════════════════ */
:root { --gold: #e1be5f; --on-gold: #271800; --gold-container: #f3e2b0; --rose: #d99caf; --on-rose: #3b1020; }

/* guide: one circle that walks the visitor through the story */
.guide { position: fixed; left: 0; top: 0; z-index: 45; width: 30px; height: 30px; margin: -15px 0 0 -15px; pointer-events: none; will-change: transform; }
.guide::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--blue); box-shadow: 0 0 0 4px var(--platinum); transition: transform 220ms var(--ease), opacity 320ms var(--ease); }
.guide::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; border: 3px solid var(--sky); opacity: 0; }
.guide.tap::before { animation: press 360ms var(--ease); }
.guide.tap::after { animation: ripple 620ms var(--ease); }
.guide.hold::before { transform: scale(0.78); }
.guide.gone::before { opacity: 0; transform: scale(0.3); }
.guide.angry::before { animation: angry 300ms linear 2; }
@keyframes angry { 25% { transform: translate(-3px, 1px) scale(0.9); } 75% { transform: translate(3px, -1px) scale(0.9); } }
.guide-label { position: absolute; left: 50%; bottom: 40px; transform: translate(-50%, 6px); padding: 5px 12px; border-radius: 999px; background: var(--on-blue); color: var(--platinum); font-size: 13px; font-weight: 800; white-space: nowrap; opacity: 0; transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.guide.says .guide-label { opacity: 1; transform: translate(-50%, 0); }

.scroll-cue::before { transition: width 420ms var(--ease), height 420ms var(--ease), border-width 420ms var(--ease), border-radius 420ms var(--ease), transform 420ms var(--ease), background-color 420ms var(--ease), top 420ms var(--ease); }
.scroll-cue.morph { animation: none; }
.scroll-cue.morph::before { top: 50%; width: 30px; height: 30px; border-width: 0; border-radius: 999px; background: var(--blue); transform: translate(-50%, -50%) rotate(0deg); }
.scroll-cue.handed { visibility: hidden; }

/* you: the visitor's own pointer in the passport section */
.you-cursor { position: fixed; left: 0; top: 0; z-index: 46; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 999px; background: var(--blue); box-shadow: 0 0 0 4px var(--platinum); pointer-events: none; }
.you-cursor span { position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: var(--on-blue); color: var(--platinum); font-size: 12px; font-weight: 800; }
.you-cursor.pressing { transform-origin: center; }
@media (pointer: fine) { body.you-mode .b-become, body.you-mode .b-become * { cursor: none !important; } }
.touch-dot { position: fixed; z-index: 46; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 999px; background: var(--blue); box-shadow: 0 0 0 4px var(--platinum); pointer-events: none; animation: touch 600ms var(--ease) forwards; }
@keyframes touch { from { transform: scale(0.4); opacity: 1; } 60% { transform: scale(1); opacity: 1; } to { transform: scale(1.2); opacity: 0; } }

/* reader sheet: collection status like the app */
.sheet-x { position: absolute; right: 14px; top: 12px; width: 34px; height: 34px; border: 0; border-radius: 999px; background: var(--card-3); color: var(--card-ink); font-size: 20px; line-height: 1; cursor: pointer; }
.sheet-status { display: grid; gap: 8px; }
.not-collected { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--card-3); color: var(--card-ink); font-weight: 800; font-size: 14px; }
.not-collected svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.not-collected.nudge { animation: nope 420ms var(--ease); }
.sheet-tip { font-size: 13px; font-weight: 700; color: var(--card-soft); }

/* ── the pack ── */
.chest-stage { position: relative; display: grid; justify-items: center; gap: 12px; margin-top: clamp(40px, 6vw, 64px); }
.rarity { margin: 0; padding: 7px 16px; border-radius: 999px; background: var(--card); color: var(--card-soft); font-size: 14px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; transition: background-color 260ms var(--ease), color 260ms var(--ease); }
.rarity[data-r="0"] { background: #e2d3e3; color: #4a4f8c; }
.rarity[data-r="1"] { background: var(--sky); color: var(--on-sky); }
.rarity[data-r="2"] { background: var(--liberty); color: var(--on-liberty); }
.rarity[data-r="3"] { background: var(--gold); color: var(--on-gold); }
.rarity.pop { animation: rarity-pop 460ms var(--spring); }
@keyframes rarity-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.chest-btn { position: relative; width: min(280px, 68vw); aspect-ratio: 220 / 190; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chest { position: relative; z-index: 2; width: 100%; height: auto; overflow: visible; }
.c-shadow { fill: var(--chest-shadow, #c6a8c3); }
.c-box { fill: var(--liberty); }
.c-band, .c-body .c-strap { fill: #4b519f; }
.c-plate { fill: var(--platinum); }
.c-lid-top { fill: var(--sky); }
.c-lid .c-strap { fill: var(--blue); }
.c-rim { fill: #242a6b; }
.c-eye, .c-mouth { fill: none; stroke: #242a6b; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.c-eye-dot { fill: #242a6b; }
.c-star { fill: var(--gold); stroke: #242a6b; stroke-width: 1.6; stroke-linejoin: round; }
.c-blush { fill: var(--rose); }
.chest-btn.r3 .c-lid .c-strap, .chest-btn.r3 .c-body .c-strap { fill: var(--gold); }
.chest-btn.r2 .c-lid-top { fill: var(--thistle); }
.c-lid { transform-box: fill-box; transform-origin: 8% 100%; transition: transform 620ms var(--spring); }
.chest-btn.open .c-lid { transform: translate(-4px, -14px) rotate(-14deg); }
.rarity { position: relative; z-index: 5; }
.chest-btn.hit .chest { animation: var(--hit-anim, hit1) 360ms var(--ease); }
.chest-btn.r0 { --hit-anim: hit1; } .chest-btn.r1 { --hit-anim: hit2; } .chest-btn.r2 { --hit-anim: hit3; } .chest-btn.r3 { --hit-anim: hit4; }
@keyframes hit1 { 30% { transform: translateY(3px) scale(1.02, 0.97); } 70% { transform: translateY(-3px); } }
@keyframes hit2 { 20% { transform: rotate(-3deg) scale(1.03, 0.96); } 55% { transform: rotate(3deg) translateY(-6px); } 80% { transform: rotate(-1deg); } }
@keyframes hit3 { 15% { transform: rotate(-5deg) scale(1.05, 0.94); } 45% { transform: rotate(5deg) translateY(-12px); } 75% { transform: rotate(-3deg) translateY(-2px); } }
@keyframes hit4 { 10% { transform: scale(1.08, 0.9); } 40% { transform: translateY(-22px) rotate(-6deg) scale(1.04); } 65% { transform: translateY(-4px) rotate(5deg); } 85% { transform: rotate(-2deg); } }
.aura { position: absolute; z-index: 1; left: 50%; top: 52%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.6); border-radius: 999px; opacity: 0; background: radial-gradient(circle, var(--aura, #e2d3e3) 0 28%, transparent 64%); transition: opacity 360ms var(--ease), transform 460ms var(--spring); pointer-events: none; }
.aura::before { content: ""; position: absolute; inset: 8%; border-radius: 999px; opacity: 0; background: repeating-conic-gradient(var(--aura, #e2d3e3) 0 7deg, transparent 7deg 24deg); -webkit-mask: radial-gradient(circle, transparent 22%, #000 24%, #000 52%, transparent 70%); mask: radial-gradient(circle, transparent 22%, #000 24%, #000 52%, transparent 70%); animation: spin 9s linear infinite; transition: opacity 400ms var(--ease); }
.chest-btn.r0 .aura { --aura: #efe4ee; opacity: 0.8; transform: translate(-50%, -50%) scale(0.7); }
.chest-btn.r1 .aura { --aura: var(--sky); opacity: 0.75; transform: translate(-50%, -50%) scale(0.8); }
.chest-btn.r2 .aura { --aura: var(--liberty); opacity: 0.75; transform: translate(-50%, -50%) scale(0.92); }
.chest-btn.r3 .aura { --aura: var(--gold); opacity: 0.95; transform: translate(-50%, -50%) scale(1.05); }
.chest-btn.r2 .aura::before, .chest-btn.r3 .aura::before { opacity: 0.8; }
@keyframes spin { to { transform: rotate(360deg); } }
.burst { position: absolute; z-index: 3; left: 50%; top: 55%; width: 0; height: 0; pointer-events: none; }
.spark { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 3px; background: var(--spark, var(--sky)); transform: rotate(45deg); }
.chest-note { margin: 0; font-size: 13px; font-weight: 800; color: var(--body-ink); }
.reward { position: absolute; z-index: 4; left: 50%; top: 58px; transform: translateX(-50%); }
.reward.rise { animation: rise 900ms var(--spring) both; }
@keyframes rise { from { transform: translate(-50%, 160px) scale(0.3); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }

/* word cards (collection + reward) */
.wcard { width: 176px; padding: 16px; border-radius: 24px; background: var(--card); color: var(--card-ink); display: grid; gap: 4px; }
.wcard .wc-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wcard .wc-flag { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; }
.wcard .wc-r { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: #e2d3e3; color: #4a4f8c; }
.wcard .wc-r.r1 { background: var(--sky); color: var(--on-sky); }
.wcard .wc-r.r2 { background: var(--liberty); color: var(--on-liberty); }
.wcard .wc-r.r3 { background: var(--gold); color: var(--on-gold); }
.wcard .wc-w { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; overflow-wrap: anywhere; }
.wcard .wc-m { margin: 0; font-size: 14px; font-weight: 700; color: var(--card-soft); }
.wcard .wc-l { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; font-weight: 800; color: var(--card-soft); }
.wcard .wc-l b { color: var(--card-ink); }
.wcard .wc-bar { height: 8px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.wcard .wc-bar i { display: block; height: 100%; border-radius: 999px; background: #6fcdb9; }
.wcard.legendary { box-shadow: inset 0 0 0 3px var(--gold); }
.wcard.dragging { position: fixed; left: 0; top: 0; z-index: 44; margin: 0; pointer-events: none; transform-origin: 50% 20%; box-shadow: inset 0 0 0 3px var(--gold); }
.wcard.slot { position: relative; background: transparent; box-shadow: none; }
.wcard.slot > * { visibility: hidden; }
.wcard.slot::after { content: 'new word'; position: absolute; inset: 0; display: grid; place-items: center; border: 2.5px dashed color-mix(in srgb, var(--ink) 35%, var(--bg)); border-radius: inherit; color: var(--body-ink); font-weight: 800; font-size: 14px; }
.wcard.floaty { animation: floaty 4.2s ease-in-out infinite; }
.wcard.landed { animation: landed 620ms var(--spring), floaty 4.2s ease-in-out 620ms infinite; }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes landed { from { transform: scale(1.12) rotate(-3deg); } to { transform: none; } }
.collection-block { margin-top: clamp(96px, 14vw, 180px); }
.collection { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: clamp(28px, 4vw, 44px); }

/* ── quiz clash phone ── */
.duel-wrap { padding: clamp(96px, 11vw, 150px) var(--gutter) clamp(40px, 6vw, 80px); }
.duel-screen { display: block; }
.duel-title { margin: 6px 0 0; text-align: center; font-weight: 800; font-size: 20px; color: var(--screen-ink); letter-spacing: -0.02em; }
.d-versus, .d-question, .d-result { position: absolute; left: 16px; right: 16px; top: 96px; bottom: 34px; display: grid; opacity: 0; pointer-events: none; transition: opacity 420ms var(--ease), transform 520ms var(--ease); transform: translateY(18px); }
.d-versus.on, .d-question.on, .d-result.on { opacity: 1; transform: none; }
.d-versus { align-content: center; justify-items: center; gap: 22px; }
.d-round { margin: 0; padding: 5px 14px; border-radius: 999px; background: var(--rose); color: var(--on-rose); font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.d-players { display: flex; align-items: center; gap: 14px; }
.d-player { display: grid; justify-items: center; gap: 10px; }
.d-player b { display: inline-flex; align-items: center; gap: 6px; color: var(--screen-ink); font-size: 17px; }
.d-player img { width: 18px; height: 18px; border-radius: 999px; }
.av { width: 92px; height: 92px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: 38px; }
.av.you { background: var(--blue); color: var(--on-blue); }
.av.them { background: var(--thistle); color: var(--on-thistle); }
.av.sm { width: 38px; height: 38px; font-size: 16px; }
/* players are Neu-style balls: the tab icon's two dot eyes, looking down a little; in the duel they eye each other */
.av { position: relative; font-size: 0; }
.av::before, .av::after { content: ""; position: absolute; top: 45.4%; width: 13.6%; height: 23.2%; border-radius: 50%; background: #1b102a; }
.av::before { left: 29.2%; } .av::after { left: 57.2%; }
.av.sm.you::before, .av.sm.you::after { translate: 50% 0; }
.av.sm.them::before, .av.sm.them::after { translate: -50% 0; }
.av.xl { width: 110px; height: 110px; font-size: 44px; }
.d-vs { padding: 6px 12px; border-radius: 999px; background: var(--card-2); color: var(--card-ink); font-weight: 800; font-size: 15px; }
.d-score { margin: 0; font-size: 34px; font-weight: 800; color: var(--screen-ink); }
.d-question { align-content: start; gap: 12px; }
.d-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.d-mini-score { margin: 0; text-align: center; font-size: 28px; font-weight: 800; color: var(--screen-ink); }
.d-mini-score b { display: inline-block; transition: transform 400ms var(--spring); }
.d-mini-score b.bump { transform: scale(1.4); color: var(--thistle); }
.d-cat { margin: 4px 0 0; display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 800; color: var(--screen-soft); }
.d-cat span { padding: 3px 9px; border-radius: 999px; background: var(--rose); color: var(--on-rose); }
.d-q { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.28; color: var(--screen-ink); }
.d-opts { display: grid; gap: 8px; }
.d-opts span { padding: 12px 16px; border-radius: 16px; background: var(--card-2); color: var(--card-ink); font-weight: 700; font-size: 15px; transition: background-color 220ms var(--ease), color 220ms var(--ease); }
.d-opts span.hover { background: var(--card-3); }
.d-opts span.wrong { background: var(--rose); color: var(--on-rose); animation: nope 420ms var(--ease); }
.d-opts span.right { background: var(--blue); color: var(--on-blue); }
.d-result { align-content: center; justify-items: center; gap: 6px; text-align: center; }
.d-winner { position: relative; }
.crown { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); color: var(--gold); font-size: 34px; line-height: 1; }
.d-result.on .crown { animation: crown 900ms var(--spring) both 200ms; }
@keyframes crown { from { transform: translate(-50%, -30px) rotate(-20deg); opacity: 0; } to { transform: translate(-50%, 0) rotate(0); opacity: 1; } }
.d-wins { margin: 10px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--screen-ink); }
.d-final { margin: 0; font-size: 22px; font-weight: 800; color: var(--screen-soft); }
.d-sub { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--screen-soft); }
.d-rematch { height: 50px; padding: 0 34px; border: 0; border-radius: 999px; background: var(--blue); color: var(--on-blue); font: inherit; font-weight: 800; font-size: 17px; cursor: pointer; }
.d-result.on .d-rematch:not(.sent) { animation: blink 1.1s var(--ease) infinite; }
@keyframes blink { 0%, 100% { transform: scale(1); background: var(--blue); } 50% { transform: scale(1.06); background: #5a9cf0; } }
.d-rematch.squish { animation: squish 200ms var(--ease) !important; }
@keyframes squish { 50% { transform: scale(0.86, 0.9); } }
.d-rematch.sent { background: var(--sky); color: var(--on-sky); }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; }
.d-result.on .confetti i { animation: fall 1800ms var(--ease) forwards; }
@keyframes fall { to { transform: translateY(640px) rotate(540deg); } }

/* ── arcade → challenge europe ── */
.arcade-track { height: 320svh; }
.arcade-stage { display: block; padding: 92px 0 20px; }
.arcade-heads { position: relative; display: grid; min-height: 110px; }
.arcade-heads > * { grid-area: 1 / 1; }
.h-alt { display: grid; justify-items: center; opacity: 0; transition: opacity 260ms var(--ease); }
.arcade-heads.alt #arcade-h1 { opacity: 0; }
.arcade-heads.alt .h-alt { opacity: 1; }
.bam { font-size: clamp(34px, 4.6vw, 60px); }
.bam.pop { animation: bam 620ms var(--spring); }
@keyframes bam { 0% { transform: scale(1.7); opacity: 0; } 55% { transform: scale(0.94); opacity: 1; } 100% { transform: scale(1); } }
.bam-sub { margin: 6px 0 0; font-size: clamp(18px, 1.8vw, 24px); font-weight: 800; color: var(--accent); opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
.bam-sub.show { opacity: 1; transform: none; }
.arena-row { position: relative; height: calc(100svh - 240px); margin-top: 22px; }
.game.side { position: absolute; top: 0; left: 50%; width: min(300px, 72vw); flex: none; }
.live { position: absolute; top: 0; left: 50%; width: 300px; flex: none; padding: 16px; display: grid; gap: 10px; align-content: start; border-radius: 30px; overflow: hidden; }
.live .live-q { font-size: 18px; }
.live-opts span { transition: background-color 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease); }
.live.expanded .live-name, .live.expanded .live-desc { display: none; }
.live .live-name { margin-top: 6px; }
.live-correct { display: none; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: var(--blue); color: var(--on-blue); font-weight: 800; font-size: 15px; }
.live-correct .tick { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--on-blue); color: var(--blue); font-size: 15px; }
.live.correct .live-correct { display: flex; animation: pop 520ms var(--spring); }
.live-more { display: none; gap: 10px; }
.live.ranked.expanded .live-more { display: grid; }
.best { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; background: var(--gold-container); color: var(--on-gold); animation: pop 520ms var(--spring); }
.eu svg { width: 40px; height: 40px; display: block; }
.eu circle { fill: var(--liberty); }
.eu .star { fill: var(--gold); }
.best-label { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.best-name { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; }
.best-name img { width: 22px; height: 22px; border-radius: 999px; }
.best-crown { font-size: 26px; color: var(--gold); }
:root .best-crown { color: #9b7a16; }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.rank { display: grid; grid-template-columns: 24px 24px 1fr auto; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 14px; background: var(--card-2); font-weight: 800; font-size: 15px; opacity: 0; transform: translateY(8px); }
.rank.in { opacity: 1; transform: none; transition: opacity 360ms var(--ease), transform 360ms var(--ease); }
.rank img { width: 22px; height: 22px; border-radius: 999px; }
.rank .num { color: var(--card-soft); font-variant-numeric: tabular-nums; }
.rank .pct { font-variant-numeric: tabular-nums; }
.rank.you { background: var(--blue); color: var(--on-blue); }
.rank.you .num { color: var(--on-blue); }
.rank .you-tag { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--on-blue); color: var(--platinum); font-size: 11px; }
.rank.climb { animation: climb 900ms var(--spring); }
@keyframes climb { 30% { box-shadow: 0 0 0 4px var(--sky); } }
.live-note { margin: 2px 0 0; text-align: right; font-size: 11px; font-weight: 800; color: var(--card-soft); }

/* ── founding passport ── */
.pass {
  position: relative; width: min(460px, 100%); margin: 0 auto; padding: 20px 22px 18px; border-radius: 30px; overflow: hidden;
  display: grid; gap: 14px; color: var(--on-liberty);
  background: var(--liberty) repeating-radial-gradient(circle at 92% 8%, #5b62b3 0 9px, #6168b8 9px 10px);
  transition: box-shadow 200ms var(--ease);
}
.pass.drop { box-shadow: inset 0 0 0 4px var(--sky); }
.pass.thud { animation: thud 420ms var(--ease); }
@keyframes thud { 20% { transform: translateY(5px) scale(0.99); } 50% { transform: translateY(-2px); } }
.pass-head { display: flex; justify-content: space-between; align-items: baseline; }
.pass-mark { font-weight: 800; font-size: 24px; letter-spacing: -0.05em; }
.pass-kind { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--thistle); }
.pass-body { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: start; }
.pass-photo { width: 84px; height: 104px; border-radius: 18px; background: #6a71bd; display: grid; place-items: center; font-size: 44px; font-weight: 800; color: var(--platinum); }
.pass-fields { margin: 0; display: grid; gap: 8px; min-width: 0; }
.pass-fields dt { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--thistle); }
.pass-fields dd { margin: 1px 0 0; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.pass-fields .f-name dd { font-size: 24px; letter-spacing: -0.02em; line-height: 1.1; }
.pass-fields dd.placeholder { color: #a6aadb; }
.pass-visas { display: flex; gap: 10px; min-height: 56px; align-items: center; }
.visa { position: relative; width: 50px; height: 50px; border-radius: 999px; padding: 4px; border: 2px dashed var(--thistle); }
.visa img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; animation: pop 460ms var(--spring); }
.visa.empty { display: grid; place-items: center; color: var(--thistle); font-weight: 800; font-size: 20px; opacity: 0.7; }
.pass-mrz { margin: 0; padding-top: 10px; border-top: 2px dashed #7a80c4; font-family: "Atkinson Hyperlegible Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.14em; color: #cfd2f2; white-space: nowrap; overflow: hidden; }
.stamp-slot { position: absolute; right: 18px; top: 64px; width: 96px; height: 96px; border-radius: 999px; border: 2.5px dashed #8f95d4; display: grid; place-items: center; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #b9bde9; transition: opacity 200ms var(--ease); }
.stamp { position: absolute; right: 2px; top: 44px; width: 136px; height: 136px; opacity: 0; pointer-events: none; transform: rotate(-14deg) scale(2.6); }
.stamp svg { width: 100%; height: 100%; }
.stamp .s-outer { fill: none; stroke: var(--gold); stroke-width: 4; }
.stamp .s-inner { fill: none; stroke: var(--gold); stroke-width: 2.5; }
.stamp .s-ring-text { fill: var(--gold); font-size: 11.5px; font-weight: 800; letter-spacing: 1.6px; font-family: var(--sans); }
.stamp .s-center { fill: var(--gold); font-size: 17px; font-weight: 800; font-family: var(--sans); letter-spacing: -1px; }
.stamp .star { fill: var(--gold); }
.stamp.slam { animation: slam 520ms cubic-bezier(0.5, 0, 0.7, 1) forwards; }
@keyframes slam { 0% { opacity: 0; transform: rotate(-4deg) scale(2.6); } 70% { opacity: 1; transform: rotate(-14deg) scale(0.94); } 100% { opacity: 0.94; transform: rotate(-14deg) scale(1); } }
.pass.stamped .stamp-slot { opacity: 0; }
.welcome { margin: 18px auto 0; width: min(460px, 100%); padding: 16px 18px; border-radius: 22px; background: var(--gold-container); color: var(--on-gold); font-weight: 800; }
.welcome small { display: block; margin-top: 4px; font-weight: 700; opacity: 0.85; }
.flag-ghost { position: fixed; z-index: 47; left: 0; top: 0; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 999px; pointer-events: none; box-shadow: 0 0 0 4px var(--blue); }

@media (max-width: 640px) {
  .arcade-track { height: 330svh; }
  .arena-row { height: calc(100svh - 210px); }
  .live { padding: 14px; }
  .rank { font-size: 14px; padding: 5px 10px; }
  .pass-body { grid-template-columns: 70px 1fr; }
  .pass-photo { width: 70px; height: 88px; font-size: 36px; }
  .stamp-slot { width: 78px; height: 78px; top: 60px; right: 14px; }
  .stamp { width: 112px; height: 112px; top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .arcade-track { height: auto; }
  .arcade-stage { position: relative; height: auto; }
  .arena-row { height: auto; display: grid; gap: 16px; justify-items: center; }
  .game.side, .live { position: relative; left: auto; transform: none !important; width: min(560px, 100%) !important; }
  .h-alt { display: none; }
}

/* v4 fixes: visible answer rows on the live card; compact ranking so the expanded card fits ~760px screens */
.live .live-opts span { background: var(--card-2); color: var(--card-ink); }
.live .live-opts span.hover { background: var(--card-3); }
.live .live-opts span.right { background: var(--blue); color: var(--on-blue); }
.live.expanded { gap: 8px; padding: 16px 18px; }
.live.expanded .live-opts { grid-template-columns: repeat(3, 1fr); }
.live.expanded .live-opts span { text-align: center; }
.rank { padding: 4px 12px; font-size: 14px; }
.rank img { width: 20px; height: 20px; }
.best { padding: 8px 14px; }
.eu svg { width: 34px; height: 34px; }
.best { grid-template-columns: 34px 1fr auto; }
.arcade-stage { padding-top: 84px; }
.arcade-heads { min-height: 96px; }


/* ══════════ v5 ══════════ */
/* the guide lives in the page (scrolls with it) instead of floating on the screen */
.guide { position: absolute; }
.guide-label { bottom: 34px; min-width: 34px; height: 34px; padding: 0 10px; display: grid; place-items: center; font-size: 18px; line-height: 1; border-radius: 999px; }
:root { --err-c: #ffd9e2; --on-err-c: #7a1e3f; }
.not-collected { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; margin: 6px 0 0; border-radius: 18px; background: var(--err-c); color: var(--on-err-c); font-size: 17px; font-weight: 800; }
.not-collected svg { width: 20px; height: 20px; }
.word-sheet { padding-bottom: 22px; }

/* clash intro */
.duel-wrap { position: relative; }
.clash-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.clash-vs { position: absolute; left: 0; top: 0; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 999px; display: grid; place-items: center; background: var(--platinum); color: var(--on-thistle); font-weight: 800; font-size: 24px; opacity: 0; }
.clash-burst { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.d-names { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--screen-soft); font-weight: 700; font-size: 16px; }
.d-names b { display: inline-flex; align-items: center; gap: 6px; color: var(--screen-ink); }
.d-names img { width: 18px; height: 18px; border-radius: 999px; }
.d-versus { gap: 14px; }
.d-opts span.picked { background: var(--card-3); box-shadow: inset 0 0 0 3px var(--sky); }

/* arcade: three equal cards; the live card grows on its own once you arrive */
.arcade-track { height: 150svh; }
.game.side, .live { height: 430px; }
.game.side .game-art { height: 270px; }
.game.side { transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 500ms var(--ease); transform: translateX(calc(-50% + var(--off, 0px))); }
.live { width: 300px; transform: translateX(-50%); transition: width 700ms cubic-bezier(0.2, 0.7, 0.2, 1); display: flex; flex-direction: column; gap: 10px; }
.live.big { width: min(700px, calc(100vw - 32px)); height: auto; min-height: 430px; }
.live .live-name { margin-top: auto; }
.live.big .live-name, .live.big .live-desc { display: none; }
.unfold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 650ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.unfold > div { overflow: hidden; min-height: 0; }
.unfold.open { grid-template-rows: 1fr; }
.live-correct { display: flex; }
.live-more { display: grid; gap: 8px; padding-top: 2px; }
.rank { grid-template-columns: 20px 24px minmax(80px, 110px) 1fr 44px; }
.rbar { position: relative; height: 10px; border-radius: 999px; background: var(--card-3); overflow: hidden; }
.rbar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: var(--liberty); transition: width 1100ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.rank.you .rbar { background: #2566c0; }
.rank.you .rbar i { background: var(--platinum); }
.rank.you.glow .rbar i { background: var(--sky); }
.rank .pct { text-align: right; }
.plus-dot { position: absolute; z-index: 44; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 999px; background: var(--sky); box-shadow: 0 0 0 3px var(--platinum); pointer-events: none; }
@media (max-width: 640px) {
  .game.side, .live { height: 410px; }
  .game.side .game-art { height: 250px; }
  .rank { grid-template-columns: 18px 22px minmax(0, 1fr) 64px 38px; gap: 8px; }
}

/* carried card lives in the page like the guide */
.wcard.carried { position: absolute; }

/* ══════════ v6 ══════════ */
/* hero: the promise is set at the wordmark's size; logo, promise, invitation and arrow share one rhythm */
:root { --hero-type: clamp(44px, min(12.2vw, 12.5svh), 112px); --hero-gap: clamp(18px, 3.4svh, 36px); }
.hero { padding-top: 72px; padding-bottom: 40px; }
.hero-center { gap: var(--hero-gap); }
.orbit { width: min(560px, calc(100vw - 40px), calc(var(--hero-type) * 5.4)); height: max(150px, calc(var(--hero-type) * 2.25)); }
.wordmark { font-size: var(--hero-type); }
.promise { font-size: var(--hero-type); line-height: 0.96; letter-spacing: -0.05em; }
/* optical spacing: line boxes and descenders make equal CSS gaps look unequal, so nudge by the type size */
.promise { margin-top: calc(var(--hero-type) * -0.09); }
.lede { margin-top: 0; }
.lede { max-width: none; font-weight: 700; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.2; }
.scroll-cue { position: relative; left: auto; bottom: auto; transform: none; width: 54px; height: 34px; margin-top: -6px; }
.scroll-cue::before { top: 36%; }

/* the guide and anything it carries pass under the top bar, like the rest of the page */
.guide { z-index: 25; }
.wcard.dragging { z-index: 24; }
.plus-dot { z-index: 24; }
.chip.pressed { transform: scale(0.94); }
.collection { align-items: flex-start; }

/* Center the live quiz below the bar, with a calm purple landing beneath it. */
.arcade-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 0 40px; min-height: 660px; }
.arena-row { width: 100%; height: auto; min-height: 430px; }

/* a button's size never depends on its label */
.d-rematch { width: 200px; padding: 0; }

/* become: the guide taps "your" */
.you-cursor span { opacity: 0; transform: translate(-50%, 4px); transition: opacity 360ms var(--ease), transform 360ms var(--ease); }
.you-cursor.named span { opacity: 1; transform: translateX(-50%); }

/* challenge europe: the live card grows into one big panel, you on the left, europe on the right */
.live { transition: opacity 180ms var(--ease) 120ms; }
.live.under { opacity: 0; }
.coe { position: relative; z-index: 3; top: 0; left: auto; margin: 0 auto; width: min(1000px, calc(100vw - 32px)); min-height: 430px; display: grid; grid-template-columns: 1.08fr 1fr; gap: 44px; align-items: center; padding: 30px 32px; border-radius: 36px; background: var(--card); color: var(--card-ink); visibility: hidden; }
.coe { opacity: 1; pointer-events: auto; transform-origin: 50% 50%; will-change: auto; } /* v3 used this class name for an older design */
.coe.on { visibility: visible; }
.coe.grow { transition: clip-path 800ms cubic-bezier(0.05, 0.7, 0.1, 1); }
.coe-l, .coe-r { display: grid; align-content: start; gap: 18px; min-width: 0; }
.coe .fx { opacity: 0; transform: translateY(12px); transition: opacity 460ms var(--ease) var(--d, 0ms), transform 560ms var(--ease) var(--d, 0ms); }
.coe.open .fx { opacity: 1; transform: none; }
.coe-top { display: flex; align-items: center; gap: 12px; }
.coe-q { margin: 0; font-size: clamp(22px, 2.5vw, 32px); font-weight: 800; line-height: 1.14; letter-spacing: -0.025em; }
.coe-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.coe-opts span { display: grid; place-items: center; height: 66px; border-radius: 20px; background: var(--card-2); font-size: clamp(16px, 1.5vw, 19px); font-weight: 800; transition: background-color 280ms var(--ease), color 280ms var(--ease), opacity 420ms var(--ease), transform 460ms var(--spring); }
.coe-opts span.hover { background: var(--card-3); }
.coe-opts span.right { background: var(--blue); color: var(--on-blue); transform: scale(1.04); }
.coe-opts.answered span:not(.right) { opacity: 0.4; }
.best-stack { display: grid; }
.best-stack > * { grid-area: 1 / 1; height: 60px; transition: opacity 420ms var(--ease), transform 520ms var(--spring); }
.best-wait { margin: 0; display: flex; align-items: center; gap: 6px; padding: 0 18px; border-radius: 18px; background: var(--card-2); color: var(--card-soft); font-weight: 800; font-size: 15px; }
.best-wait i { width: 5px; height: 5px; border-radius: 999px; background: currentColor; animation: wait-dot 1.2s var(--ease) infinite; }
.best-wait i:first-of-type { margin-left: 4px; }
.best-wait i:nth-of-type(2) { animation-delay: 0.15s; } .best-wait i:nth-of-type(3) { animation-delay: 0.3s; }
@keyframes wait-dot { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
.coe .best { animation: none; opacity: 0; transform: scale(0.96); padding: 0 16px; }
.best-stack.done .best { opacity: 1; transform: none; }
.best-stack.done .best-wait { opacity: 0; }
.coe .ranking { gap: 8px; }
.coe .rank { opacity: 1; transform: none; height: 44px; padding: 0 14px; gap: 12px; border-radius: 16px; font-size: 17px; grid-template-columns: 22px 26px minmax(84px, 128px) 1fr 50px; }
.coe .rank img { width: 26px; height: 26px; }
.coe .rbar { height: 12px; }
.coe .live-note { margin: -6px 2px 0; }
.plus-dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.bam-sub { margin-top: 8px; }

@media (max-width: 760px) {
  .coe { grid-template-columns: 1fr; gap: 14px; padding: 18px 16px 16px; min-height: 410px; border-radius: 30px; }
  .coe-l, .coe-r { gap: 11px; }
  .coe-q { font-size: 20px; }
  .coe-opts { gap: 8px; }
  .coe-opts span { height: 48px; border-radius: 16px; font-size: 15px; }
  .best-stack > * { height: 48px; }
  .coe .ranking { gap: 5px; }
  .coe .rank { height: 32px; padding: 0 10px; gap: 8px; font-size: 14px; grid-template-columns: 16px 20px minmax(0, 1fr) 54px 36px; }
  .coe .rank img { width: 20px; height: 20px; }
  .coe .rank .you-tag { display: none; }
  .coe .rbar { height: 9px; }
  .coe .live-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade-track { height: auto; }
  .arcade-stage { min-height: 0; }
  .arcade-heads .h-alt { display: grid; }
  .coe { position: relative; left: auto; transform: none; visibility: visible; margin: 0 auto; }
  .live.under { display: none; }
}

/* September30 correction: stable objects and deliberate reveal. */
.avatar-seat { display: block; width: 38px; height: 38px; }
.clash-layer > .av { position: absolute; left: 0; top: 0; margin: -19px 0 0 -19px; will-change: transform; }
.d-question.docking { transition: none; transform: none; }
.d-question > :not(.d-head), .d-mini-score { transition: opacity 280ms var(--ease), transform 360ms var(--ease); }
.d-question.docking > :not(.d-head), .d-question.docking .d-mini-score { opacity: 0; visibility: hidden; transform: translateY(8px); transition: none; }
.b-play { padding-bottom: clamp(100px, 16svh, 180px); }
.arcade-track { height: 160svh; }
.arcade-stage { min-height: 640px; }
.arcade-heads { min-height: 0; }
.arcade-heads > * { align-self: center; }
.live-intro { max-width: 43ch; margin: 24px auto 0; text-align: center; }
.arena-row { min-height: 0; margin-top: 36px; }
.live { width: min(460px, calc(100vw - 32px)); height: auto; padding: 24px; gap: 18px; transition: opacity 240ms var(--ease) 220ms; }
.live .live-q { margin: 0; font-size: 24px; line-height: 1.18; }
.live .live-opts { margin: 0; }
.coe { min-height: 0; padding: 28px 32px; }
.coe.grow { transition: clip-path 1300ms cubic-bezier(0.4, 0, 0.2, 1); }
.bam.pop { animation: bam 1000ms var(--ease); }
@keyframes bam { from { transform: scale(1.12); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* One invitation, then its passport. Fields never collapse or move after entry. */
.passport-journey { max-width: 600px; margin: clamp(42px, 6vw, 68px) auto 0; }
.passport-details { display: grid; gap: 30px; }
.identity-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.journey-field, .flag-field { display: grid; gap: 9px; font-weight: 800; font-size: 17px; }
.journey-field input { width: 100%; min-width: 0; height: 64px; padding: 0 22px; border: 0; border-radius: 24px; background: var(--field); color: var(--card-ink); font: inherit; font-size: 20px; font-weight: 600; }
.journey-field input::placeholder { color: var(--card-soft); font-size: 17px; font-weight: 400; }
.flag-picker { display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 112px; height: 64px; padding: 0 18px; border: 0; border-radius: 24px; background: var(--thistle); color: var(--on-thistle); font: inherit; font-weight: 800; cursor: pointer; transition: transform 180ms var(--ease); }
.flag-picker:active { transform: scale(0.95); }
.flag-picker-icons { display: flex; align-items: center; flex-shrink: 0; min-width: 30px; justify-content: center; font-size: 18px; }
.flag-picker-icons img { width: 32px; height: 32px; border-radius: 999px; }
.flag-picker-icons img + img { margin-left: -14px; box-shadow: 0 0 0 3px var(--thistle); }
.passport-details > .pill { justify-self: center; }
/* Beta invites go to the account on the phone: TestFlight (Apple Account) or Google Play. */
.phone-field { display: grid; gap: 9px; font-weight: 800; font-size: 17px; }
.phone-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.phone-choice { height: 64px; border: 0; border-radius: 24px; background: var(--field); color: var(--card-ink); font: inherit; font-size: 19px; font-weight: 700; cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 180ms var(--ease); }
.phone-choice:active { transform: scale(0.96); }
.phone-choice[aria-pressed="true"] { background: var(--thistle); color: var(--on-thistle); font-weight: 800; }
.store-wrap { display: grid; grid-template-rows: 0fr; margin-top: -30px; transition: grid-template-rows 420ms var(--emph-decel), margin-top 420ms var(--emph-decel); }
.store-wrap.open { grid-template-rows: 1fr; margin-top: 0; }
.store-inner { display: grid; gap: 8px; min-height: 0; overflow: hidden; margin: -6px; padding: 6px; }
.store-hint { margin: 0 0 0 22px; font-size: 15px; line-height: 1.45; color: var(--become-body); white-space: pre-line; }
.step-error { margin: -12px 0; font-size: 15px; color: var(--become-ink); }
.step-error:empty { display: none; }
.passport-opening { overflow-anchor: none; }
.passport-reveal { overflow: clip; }
.passport-finish { display: grid; justify-items: center; gap: 24px; padding-top: 40px; }
.passport-finish h3 { text-align: center; font-size: 30px; }
.passport-finish .pass { width: min(480px, 100%); padding: 20px; gap: 12px; border-radius: 26px; }
.passport-finish .pass-body { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
.passport-finish .pass-photo { width: 64px; height: 80px; border-radius: 16px; font-size: 36px; }
.passport-finish .pass-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; align-content: start; }
.passport-finish .pass-fields .f-name { grid-column: 1 / -1; }
.passport-finish .pass-fields .f-name dd { font-size: 24px; }
.passport-finish .pass-fields dd { font-size: 14px; line-height: 1.25; }
.passport-finish .pass-visas { min-height: 54px; padding-right: 96px; gap: 8px; }
.passport-finish .visa { flex-shrink: 0; width: 38px; height: 38px; padding: 3px; }
.passport-finish .pass-mrz { padding-top: 8px; font-size: 10px; }
.passport-finish .stamp-slot { top: auto; bottom: 48px; right: 28px; width: 64px; height: 64px; font-size: 8px; }
.passport-finish .stamp { top: auto; bottom: 36px; right: 16px; width: 88px; height: 88px; }
.passport-finish .form-msg { margin: 0; min-height: 1.55em; }
/* Original flags-only sheet, with native modal focus and animated enter/exit. */
body.picking-flags { overflow: hidden; }
body.picking-flags .you-cursor, .guide.mobile-end { display: none; }
body.picking-flags, body.picking-flags * { cursor: auto !important; }
.flag-dialog { width: min(440px, calc(100vw - 28px)); max-height: min(70svh, 640px); margin: auto auto max(16px, env(safe-area-inset-bottom)); padding: 24px; border: 0; border-radius: 34px; background: var(--card); color: var(--card-ink); overflow: hidden; }
.flag-dialog[open] { display: flex; flex-direction: column; gap: 22px; }
.flag-dialog::backdrop { background: rgb(27 16 42 / 40%); animation: flag-shade-in 360ms var(--ease); }
.flag-dialog.closing::backdrop { animation: flag-shade-out 220ms ease-in forwards; }
@keyframes flag-shade-in { from { background: transparent; } to { background: rgb(27 16 42 / 40%); } }
@keyframes flag-shade-out { from { background: rgb(27 16 42 / 40%); } to { background: transparent; } }
.flag-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-shrink: 0; }
.flag-dialog h3 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.flag-dialog-head p { margin: 3px 0 0; color: var(--card-soft); font-size: 15px; }
.dialog-close { width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0; border: 0; background: var(--card-2); color: var(--card-ink); font-size: 25px; cursor: pointer; }
.flag-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 12px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; scrollbar-width: thin; scrollbar-color: var(--blue) transparent; }
.flag-choice { position: relative; min-width: 0; width: 100%; aspect-ratio: 1; display: grid; place-items: center; padding: 5px; border: 0; border-radius: 999px; background: var(--card-2); cursor: pointer; transition: background-color 180ms var(--ease), transform 200ms var(--spring); }
.flag-choice img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 999px; object-fit: cover; }
.flag-choice[aria-pressed="true"] { background: var(--blue); }
.flag-choice[aria-pressed="true"]::after { content: '✓'; position: absolute; bottom: 0; right: 0; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 999px; background: var(--blue); color: var(--on-blue); font-size: 12px; font-weight: 800; }
@media (hover: hover) { .flag-choice:hover { transform: translateY(-2px); } }
.flag-dialog-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-shrink: 0; }
#flag-count { font-size: 14px; color: var(--card-soft); }
@media (max-width: 760px) {
  .arcade-stage { min-height: 640px; }
  .live { padding: 20px; }
  .live .live-q { font-size: 22px; }
  .coe { min-height: 0; padding: 20px 16px; }
  .identity-row { gap: 10px; }
  .journey-field input { padding: 0 16px; font-size: 18px; }
  .journey-field input::placeholder { font-size: 15px; }
  .flag-picker { min-width: 96px; padding: 0 12px; gap: 10px; }
  .passport-details { gap: 26px; }
  .passport-finish .pass { padding: 16px; gap: 10px; border-radius: 22px; }
  .passport-finish .pass-head { gap: 10px; }
  .passport-finish .pass-mark { font-size: 21px; }
  .passport-finish .pass-kind { font-size: 9px; letter-spacing: 0.08em; }
  .passport-finish .pass-body { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .passport-finish .pass-photo { width: 52px; height: 68px; font-size: 30px; border-radius: 13px; }
  .passport-finish .pass-fields { gap: 8px 12px; }
  .passport-finish .pass-fields dt { font-size: 9px; }
  .passport-finish .pass-fields .f-name dd { font-size: 20px; }
  .passport-finish .pass-fields dd { font-size: 13px; }
  .passport-finish .pass-visas { min-height: 46px; padding-right: 76px; }
  .passport-finish .visa { width: 34px; height: 34px; }
  .passport-finish .stamp { width: 76px; height: 76px; right: 12px; bottom: 32px; }
  .passport-finish .stamp-slot { width: 56px; height: 56px; right: 22px; bottom: 42px; }
  .flag-dialog { padding: 20px 16px; }
  .flag-grid { gap: 10px; }
}
@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .you-cursor, .touch-dot { display: none !important; }
  body.you-mode .b-become, body.you-mode .b-become * { cursor: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade-track { height: auto; }
  .arcade-stage { min-height: 0; }
  .flag-choice { transition: none; }
  .flag-dialog::backdrop { animation: none; }
}

/* ══════════ v7 · October 6 founder round ══════════ */
/* hero: fills a phone screen, and arrives instead of just appearing.
   Letters spring up one by one, the flags burst out of the wordmark (app.js startOrbit),
   then the promise, the invitation and the arrow follow (about 2 s, the guide's "intro" band). */
:root { --emph-decel: cubic-bezier(0.05, 0.7, 0.1, 1); }
.orbit { width: min(820px, calc(100vw - 40px), calc(var(--hero-type) * 7.4)); height: max(170px, calc(var(--hero-type) * 2.9)); }
.flag { width: clamp(34px, 3.6vw, 52px); height: clamp(34px, 3.6vw, 52px); opacity: 0; }
.wordmark span { display: inline-block; animation: hero-letter 900ms var(--spring) both; animation-delay: calc(140ms + var(--i) * 70ms); }
@keyframes hero-letter { from { opacity: 0; transform: translateY(0.5em) scale(0.3) rotate(-10deg); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
.promise > span { animation: hero-rise 950ms var(--emph-decel) both; }
.promise > span:nth-child(1) { animation-delay: 780ms; }
.promise > span:nth-child(2) { animation-delay: 900ms; }
.lede { animation: hero-rise 900ms var(--emph-decel) 1180ms both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } }
.scroll-cue { animation: hero-cue-in 600ms var(--ease) 1500ms both, cue 1300ms ease-in-out 2100ms infinite alternate; }
@keyframes hero-cue-in { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  :root { --hero-type: min(15.4vw, 8svh); --hero-gap: clamp(14px, 2.6svh, 26px); }
  .hero { padding: max(18px, env(safe-area-inset-top)) var(--gutter) 18px; }
  .hero-center { width: 100%; }
  .orbit { width: 100%; height: min(100vw, 46svh); }
  .flag { width: clamp(38px, 11.4vw, 50px); height: clamp(38px, 11.4vw, 50px); }
  .lede { font-size: 21px; }
}

/* read: three languages to try, and a quiet note that there are many more */
.chip-more { justify-content: center !important; padding: 0 16px; background: #c2d4ef; color: var(--read-ink); cursor: default; }

/* quiz clash: the phone sits on the Liberty band, so its screen is the plum night stage (as the live card below):
   Platinum ink, dim, container, a Platinum pill for the selected answer and the one action,
   correct teal / wrong rose, reward gold for the crown and the score (Edvin, October 6: never page colour on the screen) */
.duel-screen { --screen: #1b102a; --screen-ink: #ede2e0; --screen-soft: #9c90ae; --card-2: #2b2140; --card-3: #3b2e57; --card-ink: #ede2e0; --stage-on-pill: #1b102a; }
.duel-screen .d-round, .duel-screen .d-cat span { background: var(--card-2); color: var(--screen-ink); }
.duel-screen .d-cat { color: var(--screen-soft); }
.duel-screen .d-mini-score b.bump { color: var(--gold); }
.d-timer { height: 8px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.d-timer i { display: block; height: 100%; border-radius: inherit; background: var(--platinum); transform-origin: 0 50%; }
.d-question.on:not(.docking) .d-timer i { animation: d-drain 7000ms linear forwards; }
@keyframes d-drain { from { transform: scaleX(1); } to { transform: scaleX(0.08); } }
.d-question.answered .d-timer i { animation-play-state: paused; }
.d-opts span.picked { background: var(--platinum); color: var(--stage-on-pill); box-shadow: none; }
.d-opts span.wrong { background: #c45562; color: #fff8f7; }
.d-opts span.right { background: #2a7e78; color: #fff8f7; animation: d-right 520ms var(--spring); }
@keyframes d-right { 40% { transform: scale(1.05); } }
.d-rematch { background: var(--platinum); color: var(--stage-on-pill); }
@keyframes blink { 0%, 100% { transform: scale(1); background: var(--platinum); } 50% { transform: scale(1.06); background: #fff8f7; } }
.d-rematch.sent { background: var(--card-2); color: var(--screen-ink); }

/* live quiz → challenge europe: a warm white card on the Liberty band, like the word game beside it
   (Edvin, October 7: the plum night panel felt black and out of place; plum stays only inside the Quiz Clash phone) */
.live, .coe { --card: #fff8f7; --card-ink: #242a6b; --card-soft: #625d63; --card-2: #eadcea; --card-3: #dccbde; background: var(--card); color: var(--card-ink); }
.live .live-pill, .coe .live-pill { background: var(--card-2); color: var(--card-ink); }
.live .live-dot, .coe .live-dot { background: #c45562; }
.live .live-opts span.right, .coe-opts span.right { background: #2a7e78; color: #fff8f7; }
.coe .rbar { background: var(--card-3); }
.coe .rbar i { background: var(--liberty); }
.coe .rank.you { background: var(--blue); color: var(--on-blue); }
.coe .rank.you .num { color: var(--on-blue); }
.coe .rank.you .rbar { background: #2566c0; }
.coe .rank.you .rbar i { background: var(--platinum); }
.coe .rank.you.glow .rbar i { background: var(--gold); }
.rank .you-tag { background: var(--on-blue); color: var(--platinum); }
@keyframes climb { 30% { background-color: var(--gold); color: var(--on-gold); } }
/* your vote is a gold star that tumbles to your flag and bursts on arrival */
.vote-star { position: absolute; z-index: 24; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; pointer-events: none; }
.vote-star svg { display: block; width: 100%; height: 100%; fill: var(--gold); stroke: #9b7a16; stroke-width: 1.1; stroke-linejoin: round; overflow: visible; }
.star-spark { position: absolute; z-index: 24; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; background: var(--gold); pointer-events: none; rotate: 45deg; }

/* the visitor can press what the guide presses */
.d-question.on .d-opts span, .live-opts span, .coe.open .coe-opts span, #reward-card { cursor: pointer; }
.coe-opts span.wrong { background: #c45562; color: #fff8f7; animation: nope 420ms var(--ease); }
.coe-opts.answered span.wrong { opacity: 0.8; }

/* the arrow returns when a scene is over and nobody scrolls: the guide's own circle with the hero's chevron */
.scroll-hint:not(.show) { pointer-events: none; }
.scroll-hint { position: fixed; left: 50%; bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px)); z-index: 30; width: 52px; height: 52px; margin-left: -26px; padding: 0; border: 0; border-radius: 999px; background: var(--blue); cursor: pointer; opacity: 0; transform: translateY(18px) scale(0.5); transition: opacity 380ms var(--ease), transform 520ms var(--spring); }
.scroll-hint::before { content: ""; position: absolute; left: 50%; top: 42%; width: 15px; height: 15px; border-right: 5px solid var(--on-blue); border-bottom: 5px solid var(--on-blue); border-radius: 3px; transform: translate(-50%, -50%) rotate(45deg); }
.scroll-hint.show { opacity: 1; transform: none; animation: hint-bob 1300ms ease-in-out 520ms infinite alternate; }
@keyframes hint-bob { to { transform: translateY(9px); } }
.scroll-hint:focus-visible { outline: 3px solid var(--on-blue); outline-offset: 3px; }

/* close: a full screen of blue on every device */
.close { min-height: 100svh; display: grid; align-content: center; }
@media (max-width: 640px) { .living { font-size: clamp(38px, 11.4vw, 104px); } }

@media (prefers-reduced-motion: reduce) {
  .wordmark span, .promise > span, .lede, .scroll-cue { animation: none; }
  .flag { opacity: 1; }
  .d-question.on .d-timer i { animation: none; }
  .scroll-hint, .scroll-hint.show { animation: none; transition: opacity 200ms linear; transform: none; }
}