/* 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; position: relative; overflow: 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; }
/* Neu's two dark dot eyes ride on the guide (app.js "guide face"); they press, shrink and shake with it */
@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: the app's card (passport_card.dart), laid out on its 252-unit grid at 340 px; --u scales it ── */
.pass {
  --u: calc(100cqw / 340); --ink: #1b102a; --well: #5ea1f8;
  position: relative; container-type: inline-size; width: min(340px, 100%); aspect-ratio: 340 / 483; margin: 0 auto;
  border-radius: clamp(26px, 9.7vw, 37.8px); overflow: hidden; background: #2e80e4; color: var(--ink); font-weight: 700; line-height: 1.2;
  box-shadow: 0 5.4px 10.8px rgba(27, 16, 42, 0.16), 0 27px 46px -5.4px rgba(27, 16, 42, 0.3);
}
.pass.thud { animation: thud 420ms var(--ease); }
@keyframes thud { 20% { transform: translateY(5px) scale(0.99); } 50% { transform: translateY(-2px); } }
.pc-shape { position: absolute; inset: 0; width: 100%; height: 100%; fill: #3f90f5; }
.pc-user { position: absolute; left: calc(24.3 * var(--u)); right: calc(151 * var(--u)); top: calc(27 * var(--u)); font-size: calc(16.2 * var(--u)); font-weight: 400; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-no { position: absolute; right: calc(24.3 * var(--u)); top: calc(28.3 * var(--u)); display: flex; align-items: center; gap: calc(2.9 * var(--u)); font-size: calc(14.2 * var(--u)); line-height: 1; }
.pc-no i { width: calc(7.2 * var(--u)); height: calc(7.2 * var(--u)); border-radius: 50%; background: var(--ink); }
.pc-no i:first-of-type { margin-left: calc(3.6 * var(--u)); }
.pc-no i:nth-of-type(4), .pc-no i:nth-of-type(7) { margin-left: calc(5.4 * var(--u)); }
.pc-photo { position: absolute; left: calc(21.6 * var(--u)); top: calc(62 * var(--u)); width: calc(140 * var(--u)); height: calc(181 * var(--u)); border-radius: calc(24.3 * var(--u)); background: var(--well); display: grid; place-items: center; font-size: calc(56.7 * var(--u)); }
.pc-stamps { position: absolute; left: calc(183.5 * var(--u)); top: calc(83.7 * var(--u)); width: calc(135 * var(--u)); height: calc(138 * var(--u)); }
.pc-spot { position: absolute; width: calc(59.4 * var(--u)); height: calc(59.4 * var(--u)); display: grid; place-items: center; rotate: var(--tilt); }
.pc-spot::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: var(--well); }
.pc-spot:nth-child(1) { --tilt: -6deg; }
.pc-spot:nth-child(2) { --tilt: 5deg; left: calc(75.6 * var(--u)); }
.pc-spot:nth-child(3) { --tilt: 4deg; top: calc(78.3 * var(--u)); }
.pc-spot:nth-child(4) { --tilt: -7deg; left: calc(75.6 * var(--u)); top: calc(78.3 * var(--u)); }
.pc-spot > * { position: relative; }
.pc-flag { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
/* each flag keeps its whole round art and shows only its share of the disc, as the app splits two roots in half */
.pc-flag img { position: absolute; left: -2%; top: -2%; width: 104%; height: 104%; }
.pc-flag.n2 img:nth-child(1) { clip-path: inset(0 50% 0 0); }
.pc-flag.n2 img:nth-child(2) { clip-path: inset(0 0 0 50%); }
.pc-flag.n3 img:nth-child(1) { clip-path: inset(0 66.7% 0 0); }
.pc-flag.n3 img:nth-child(2) { clip-path: inset(0 33.3% 0 33.3%); }
.pc-flag.n3 img:nth-child(3) { clip-path: inset(0 0 0 66.7%); }
.pc-stamp-pop { animation: stamp-pop 450ms cubic-bezier(0.2, 0.9, 0.3, 1.25) backwards; }
@keyframes stamp-pop { from { transform: scale(1.7) rotate(-40deg); opacity: 0; } 40% { opacity: 1; } }
.pc-beta { width: 100%; height: 100%; opacity: 0; fill: var(--ink); }
.pc-beta text { fill: #2e80e4; font: 700 50px var(--sans); }
.pass.stamped .pc-beta { opacity: 1; }
.pc-name { position: absolute; left: calc(21.6 * var(--u)); right: calc(21.6 * var(--u)); top: calc(261.7 * var(--u)); margin: 0; font-size: calc(29.7 * var(--u)); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-name.long { font-size: calc(20.2 * var(--u)); }
.pc-name.placeholder { opacity: 0.45; }
.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; }
}

@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) { color: color-mix(in srgb, currentColor 40%, transparent); background: color-mix(in srgb, var(--card-2) 55%, transparent); }
.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 .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; }
  .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 { color: #fff8f7; background: color-mix(in srgb, #c45562 78%, transparent); }

/* 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; }
}

/* October 27 · Challenge Europe is the full panel from the start and scrolls like the rest of the page
   (Edvin: visitors felt stuck in the pinned track while the live card grew into it) */
.arcade-track { height: auto; }
.arcade-stage { position: relative; height: auto; min-height: 0; overflow: visible; padding: clamp(72px, 12svh, 120px) 0 0; }

/* October 27 · country balls (app.js "country balls"): the app's flag cast on the page.
   A ball's box is its size; app.js moves it by its ground point and squashes its body from the bottom. */
.cb { position: absolute; z-index: 1; pointer-events: none; will-change: transform; }
.cb-body, .cb-art { position: absolute; inset: 0; }
.cb-body { transform-origin: 50% 100%; }
.cb .cb-art img, .cb-face { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 0; }
.cb-face { overflow: visible; transform-origin: 50% 43%; }
.cb-shadow { position: absolute; left: 14%; right: 14%; bottom: -5%; height: 12%; border-radius: 50%; background: rgba(27, 16, 42, 0.18); transform-origin: 50% 50%; }
/* the crew travels above the page but under the guide; a chip keeps its seat while its ball is away */
/* a flying ball always passes above panels, whatever kind it is: .cb.cb-fly outranks .cb-opt and the like (Edvin, November 2) */
.cb-crew, .cb.cb-fly { z-index: 24; }
#lang-chips, #phone, #duel-phone { position: relative; }
.chip-seat { position: relative; display: block; flex: none; width: 30px; height: 30px; border-radius: 999px; }
.chip-seat.empty { background: color-mix(in srgb, currentColor 14%, transparent); transition: background-color 260ms var(--ease); }
/* a ranking seat waiting for its ball shows nothing, never an empty square (Edvin, November 2) */
.d-opts > span { position: relative; }
/* the ranking: each row's flag is its ball; a leaping ball flies in the layer above the rows */
#ranking { position: relative; }
.rank-air { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rank-ball { position: relative; display: block; width: 32px; height: 32px; }
.coe .rank { grid-template-columns: 22px 32px minmax(84px, 128px) 1fr 50px; }
/* the answers: each country stands on its own button */
.coe-opts { margin-top: 24px; }
.coe-opts > span { position: relative; }
.cb-opt { z-index: 2; }
/* a ball's speech bubble, as in the app's live quiz (live_quiz_crowd.dart): it grows out of its tail above the ball */
/* the app's live-quiz bubble (live_quiz_crowd.dart): one 2 px ink outline around the body and its tail together */
.cb-say { --dx: 0px; position: absolute; left: calc(50% + var(--dx)); z-index: 5; transform: translateX(-50%); transform-origin: calc(50% - var(--dx)) calc(100% + 11px); padding: 6px 10px; border: 2px solid #1b102a; border-radius: 16px; background: #fff8f7; color: #1b102a; font: 900 13px/1.2 var(--sans); white-space: nowrap; pointer-events: none; }
.cb-say > svg { position: absolute; left: calc(50% - var(--dx) - 10px); top: 100%; width: 20px; height: 12px; overflow: visible; }
/* the sign-up crowd stands on an invisible floor; it hides only what is below it */
.cb-crowd { position: relative; height: 62px; max-width: 300px; margin: 26px auto 0; clip-path: inset(-400px -100vw -6px -100vw); }
.cb-crowd + .passport-journey { margin-top: 26px; }
/* phones: bigger balls (Edvin: "like ants"); the phone mockups give up a little width so the crew fits beside them */
@media (max-width: 760px) {
  .phone { width: min(276px, 72vw); min-width: 0; }
  .chip-seat { width: 34px; height: 34px; }
  .coe .rank { grid-template-columns: 16px 32px minmax(0, 1fr) 50px 34px; }
  .coe-opts { margin-top: 26px; }
  .cb-crowd { height: 60px; margin-top: 24px; }
  .cb-crowd + .passport-journey { margin-top: 20px; }
}