/* ═══════════════════════════════════════════════════════════════════════
   MasquePlay — Layout 06 · The Seam

   The page is built around one idea: two people, choosing separately,
   converging. A hairline "seam" runs down the spine of the page, the
   hero is two portraits leaning in from opposite edges, and the play
   stage puts your locked character above a seam and your partner's pool
   below it — a seam that ignites gold only when the match actually lands.

   The stage plays one beat at a time off [data-step] (scene → pick →
   swipe → reveal) and shows the outcome off [data-outcome]. Both mirror
   the real app's screens; see app.js for why each beat looks like it does.

   Self-contained: this file is the whole design system for layout 06.
   No inline <style> or style="" anywhere — the marketing CSP ships
   style-src 'self'. Dynamic values are set through the CSSOM instead.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  --bg-base: #0c0a10;
  --bg-surface: #141018;
  --bg-card: #1c1724;
  --bg-hover: #241e2e;

  --border: #2c2438;
  --border-strong: #44364e;

  --rose: #e8407a;
  --rose-hover: #f55590;
  --rose-glow: rgba(232, 64, 122, 0.32);
  --gold: #f0b440;
  --gold-soft: rgba(240, 180, 64, 0.24);
  --gold-glow: rgba(240, 180, 64, 0.3);
  --violet: #9b6dff;
  --violet-glow: rgba(155, 109, 255, 0.3);

  --text-primary: #f2eaf8;
  --text-secondary: #b8a8cc;
  --text-muted: #7a6a8e;
  --red: #f87171;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --wrap: 1180px;
  --gutter: 26px;
  --transition: 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-slow: 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Per-section accent — overridden by [data-world] and .band-* below. */
  --accent: var(--rose);
  --accent-glow: var(--rose-glow);
}

/* ── Reset ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Suppress the grey iOS flash; :active/:focus-visible already show state. */
  -webkit-tap-highlight-color: transparent;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.04; letter-spacing: -0.012em; }
p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Shared primitives ─────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 90;
  padding: 10px 18px;
  background: var(--gold);
  color: #14100a;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); }


/* The spine. A single hairline down the centre of the viewport, dim by
   default, lit gold for a moment when the demo match lands. */
.seam {
  position: fixed;
  top: 0; bottom: 0; left: 50%;
  z-index: 0;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(180deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
  opacity: 0.55;
  transition: background var(--transition-slow), opacity var(--transition-slow);
  pointer-events: none;
}
body.is-lit .seam {
  opacity: 1;
  background: linear-gradient(180deg, transparent, var(--gold-soft) 10%, var(--gold) 50%, var(--gold-soft) 90%, transparent);
}

.eyebrow {
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before { content: '✦'; margin-right: 10px; opacity: 0.7; }
.eyebrow-center { text-align: center; }

.rule-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rule-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}
.rule-label span { color: var(--accent); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 27px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition), color var(--transition);
}
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.button-primary {
  background: var(--rose);
  color: #fff;
  box-shadow: 0 10px 34px var(--rose-glow);
}
.button-primary:hover { background: var(--rose-hover); box-shadow: 0 14px 40px var(--rose-glow); }

.button-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.button-ghost:hover { border-color: var(--gold); color: var(--gold); background: rgba(240, 180, 64, 0.05); }

.button-small { padding: 10px 19px; font-size: 13.5px; }

/* Content stays readable without JavaScript. Only an initialized observer
   may opt a section into the scroll animation. The honeypot is separate. */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.is-pending { opacity: 0; transform: translateY(22px); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-pending { opacity: 1; transform: none; transition: none; }
}

/* The header is sticky, so in-page jumps need it cleared or the target
   lands underneath the bar. */
#main, #top, #play, #worlds, #questions, #invite { scroll-margin-top: 96px; }

.section { position: relative; z-index: 1; padding: 118px 0; }
.section-lede {
  max-width: 54ch;
  color: var(--text-secondary);
  font-size: 17px;
}

.section-heading { max-width: 720px; margin-bottom: 62px; }
.section-heading h2 { font-size: clamp(38px, 5.4vw, 62px); margin-bottom: 20px; }

.section-heading-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 46px;
  align-items: end;
  max-width: none;
}
.section-heading-split h2 { margin: 0; }

/* ── Header ────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 18px 0;
  transition: background var(--transition), border-color var(--transition), padding var(--transition);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  padding: 11px 0;
  background: rgba(12, 10, 16, 0.86);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}

.header-inner { display: flex; align-items: center; gap: 26px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: 0.02em;
}
.brand img { width: 46px; height: auto; }

.site-nav {
  display: flex;
  gap: 30px;
  margin-left: auto;
  font-size: 14.5px;
  color: var(--text-secondary);
}
.site-nav a {
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.site-nav a:hover { color: var(--text-primary); border-bottom-color: var(--gold); }

/* ── Hero ──────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  z-index: 1;
  padding: 92px 0 132px;
  overflow: hidden;
}

.hero-halo {
  position: absolute;
  inset: -20% -10% auto;
  height: 120%;
  background:
    radial-gradient(ellipse 46% 40% at 50% 24%, rgba(155, 109, 255, 0.2), transparent 68%),
    radial-gradient(ellipse 60% 34% at 50% 78%, rgba(232, 64, 122, 0.14), transparent 66%);
  pointer-events: none;
}

/* The two portraits leaning in from opposite edges: You and Them, before
   the page has told you which is which. */
.wing {
  position: absolute;
  top: 50%;
  z-index: 0;
  width: 26vw;
  max-width: 330px;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 0.42;
  filter: saturate(0.78);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%, #000 62%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 26%, #000 62%, transparent);
}
.wing-left { left: -3vw; transform: translateY(-52%) rotate(-6deg); }
.wing-right { right: -3vw; transform: translateY(-46%) rotate(6deg); }

.hero-inner { position: relative; z-index: 2; text-align: center; }

/* Sized so the explicit <br> is the only break: the long line —
   "Tonight you get to be" — has to clear 21 characters without re-wrapping. */
.hero h1 {
  margin: 0 auto 26px;
  max-width: 26ch;
  font-size: clamp(30px, 9.4vw, 94px);
  font-weight: 400;
  line-height: 0.98;
}
.hero h1 em {
  display: inline-block;
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}

.hero-lede {
  max-width: 58ch;
  margin: 0 auto 38px;
  color: var(--text-secondary);
  font-size: clamp(16px, 1.6vw, 19px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 54px;
}

.ledger {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ledger li { padding: 0 18px; border-left: 1px solid var(--border-strong); }
.ledger li:first-child { border-left: 0; }

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 2;
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Premise: what it isn't / what it is ───────────────────────────── */

.premise { padding-top: 40px; }

.premise-line {
  max-width: 20ch;
  margin: 0 auto 26px;
  text-align: center;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 400;
}
.premise-line em { font-style: italic; font-weight: 300; color: var(--gold); }

.premise-lede {
  max-width: 58ch;
  margin: 0 auto;
  text-align: center;
  font-size: 17px;
  color: var(--text-secondary);
}

/* ── The play: moves + interactive stage ───────────────────────────── */

.play-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 68px;
  align-items: start;
}

.moves { display: grid; gap: 4px; position: sticky; top: 108px; }

.move {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 8px;
  padding: 20px 20px 20px 4px;
  border-left: 1px solid var(--border);
  transition: border-color var(--transition), opacity var(--transition);
  opacity: 0.5;
}
.move h3 { font-size: 25px; margin-bottom: 5px; font-weight: 500; }
.move p { color: var(--text-secondary); font-size: 15.5px; line-height: 1.55; }
.move-num {
  padding-left: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  transition: color var(--transition);
}
.move.is-active { opacity: 1; border-left-color: var(--gold); }
.move.is-active .move-num { color: var(--gold); }
.move.is-done { opacity: 0.72; border-left-color: var(--border-strong); }

/* Stage shell */
.stage {
  --accent: var(--rose);
  --accent-glow: var(--rose-glow);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, rgba(28, 23, 36, 0.9), rgba(15, 12, 20, 0.9));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.stage[data-world='veil'] { --accent: var(--violet); --accent-glow: var(--violet-glow); }
.stage[data-world='perigee'] { --accent: var(--gold); --accent-glow: var(--gold-glow); }

.stage-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(12, 10, 16, 0.5);
}
.stage-chips-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stage-chips-set { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.chip:hover { color: var(--text-primary); border-color: var(--accent); }
.chip.is-selected { color: #fff; border-color: var(--accent); background: var(--accent); }
.stage[data-world='perigee'] .chip.is-selected { color: #17120a; }

/* The running scene, held on screen from beat 02 onward. */
.scene-strip {
  display: none;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(240, 180, 64, 0.04);
}
.stage:not([data-step='scene']) .scene-strip { display: block; }
.scene-strip-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 3px;
}
.scene-strip-facet {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.35;
  color: var(--text-primary);
}

/* ── Beats ─────────────────────────────────────────────────────────── */

/* One beat is on screen at a time, driven by [data-step]. Without JS the
   markup's own data-step="scene" leaves beat 01 showing. */
.beat { display: none; padding: 22px 18px 6px; animation: beat-in 0.42s ease both; }
.stage[data-step='scene'] [data-beat='scene'],
.stage[data-step='pick'] [data-beat='pick'],
.stage[data-step='swipe'] [data-beat='swipe'],
.stage[data-step='reveal'] [data-beat='reveal'] { display: block; }

@keyframes beat-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.beat-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.beat-num { color: var(--gold); }
.beat-head small {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-align: right;
  margin-right: -0.12em;
}
.counter { color: var(--accent); }

.beat-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.beat-foot p { font-size: 12.5px; color: var(--text-muted); }

/* ── Beat 01 · the scene ───────────────────────────────────────────── */

.scenes { display: grid; gap: 8px; }

.scene-option {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(12, 10, 16, 0.4);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.scene-option:hover { border-color: var(--accent); background: rgba(12, 10, 16, 0.7); transform: translateY(-1px); }

.scene-radio {
  flex: none;
  width: 15px; height: 15px;
  margin-top: 4px;
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: border-color var(--transition);
}
.scene-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--transition);
}
.scene-option:hover .scene-radio { border-color: var(--accent); }
.scene-option.is-selected { border-color: var(--accent); background: rgba(12, 10, 16, 0.75); }
.scene-option.is-selected .scene-radio { border-color: var(--accent); }
.scene-option.is-selected .scene-radio::after { opacity: 1; }

.scene-body { display: block; }
.scene-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 2px;
}
.scene-body em {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.44;
  color: var(--text-secondary);
}

/* ── Beat 02 · your pool ───────────────────────────────────────────── */

.pool { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.mask {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  aspect-ratio: 3 / 4;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.mask img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.mask-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 10, 16, 0) 38%, rgba(12, 10, 16, 0.9) 90%);
}
.mask-copy { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 8px; display: block; }
.mask-copy strong { font-family: var(--font-display); font-size: 19px; font-weight: 500; }
.mask-copy small { margin-left: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }

.mask:hover { border-color: var(--accent); transform: translateY(-3px); }

.mask-claim {
  position: absolute;
  z-index: 2;
  top: 9px; left: 9px;
  padding: 4px 9px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--transition);
}
.stage[data-world='perigee'] .mask-claim { color: #17120a; }
.mask.is-kept {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 12px 34px var(--accent-glow);
}
.mask.is-kept .mask-claim { opacity: 1; }

/* ── Beat 03 · their pool ──────────────────────────────────────────── */

.lane-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lane-label small {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-right: -0.14em;
}

.stage-seam {
  position: relative;
  height: 1px;
  margin: 14px 0 18px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent);
  transition: background var(--transition-slow);
}
.stage-seam-node {
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background var(--transition-slow), box-shadow var(--transition-slow), transform var(--transition-slow);
}

/* The card stack. Every face is visible — the secret is which one they
   kept, not what any of them look like. */
.deck {
  position: relative;
  height: 386px;
  margin-bottom: 16px;
  touch-action: pan-y;
}

.swipe {
  position: absolute;
  top: 0; left: 50%;
  width: 250px;
  height: 340px;
  margin-left: -125px;
  /* Scale from the top edge so the cards behind peek out at the bottom
     instead of shrinking away from it. */
  transform-origin: 50% 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--dx, 0px)) rotate(var(--rot, 0deg));
  transition: transform var(--transition), opacity var(--transition), border-color var(--transition), box-shadow var(--transition), filter var(--transition);
}
.swipe img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; user-select: none; -webkit-user-drag: none; }
.swipe-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 10, 16, 0) 26%, rgba(12, 10, 16, 0.72) 58%, rgba(12, 10, 16, 0.97) 86%);
}

.swipe.is-top { opacity: 1; pointer-events: auto; cursor: grab; z-index: 3; }
.swipe.is-top.is-dragging { transition: none; cursor: grabbing; }
.swipe.is-next { opacity: 1; z-index: 2; transform: translateY(26px) scale(0.94); filter: brightness(0.62); }
.swipe.is-third { opacity: 1; z-index: 1; transform: translateY(52px) scale(0.88); filter: brightness(0.42); }
.swipe.is-gone { opacity: 0; }

.swipe.is-flying-left { opacity: 0; transform: translateX(-460px) rotate(-22deg); }
.swipe.is-flying-right { opacity: 0; transform: translateX(460px) rotate(22deg); }

.swipe-copy { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: block; }
/* The personas' real scene-presence lines. app.js already trims them to a
   clean clause; the clamp is only a backstop so a card can never grow a
   paragraph. */
.swipe-copy em {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  margin-bottom: 6px;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.36;
  color: var(--text-primary);
}
.swipe-copy strong { font-family: var(--font-display); font-size: 22px; font-weight: 500; }
.swipe-copy small { margin-left: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }

.swipe-stamp {
  position: absolute;
  z-index: 2;
  top: 18px;
  padding: 5px 13px;
  border: 2px solid;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.swipe-stamp-like { right: 16px; color: var(--green, #2ed8a8); border-color: var(--green, #2ed8a8); transform: rotate(12deg); opacity: var(--like, 0); }
.swipe-stamp-nope { left: 16px; color: var(--red); border-color: var(--red); transform: rotate(-12deg); opacity: var(--nope, 0); }

.swipe-actions { display: flex; justify-content: center; gap: 16px; }
.swipe-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: rgba(12, 10, 16, 0.6);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), transform var(--transition), background var(--transition);
}
.swipe-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.05); }
.swipe-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.swipe-btn-pass { color: var(--text-secondary); }
.swipe-btn-pass:hover:not(:disabled) { color: var(--red); border-color: var(--red); }
.swipe-btn-star { color: var(--gold); font-size: 17px; }
.swipe-btn-star:hover:not(:disabled) { border-color: var(--gold); background: rgba(240, 180, 64, 0.1); }
.swipe-btn-like { color: var(--rose); }
.swipe-btn-like:hover:not(:disabled) { border-color: var(--rose); background: rgba(232, 64, 122, 0.12); }

/* ── Beat 04 · the held reveal ─────────────────────────────────────── */

.held {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  padding: 34px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: rgba(12, 10, 16, 0.4);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.held:hover { border-color: var(--gold); background: rgba(240, 180, 64, 0.05); }
.held-kicker {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.held-label {
  display: block;
  font-family: var(--font-display);
  font-size: 29px;
  color: var(--gold);
}

.outcome { display: none; }
.stage[data-outcome='held'] .outcome { display: none; }
.stage[data-outcome='held'] .held { display: block; }
.stage[data-outcome='match'] .held,
.stage[data-outcome='gold'] .held,
.stage[data-outcome='miss'] .held { display: none; }
.stage[data-outcome='match'] .outcome,
.stage[data-outcome='gold'] .outcome,
.stage[data-outcome='miss'] .outcome { display: block; animation: beat-in 0.55s ease both; }

/* A match lights the seam and the page's spine; a miss stays quiet. */
.stage[data-outcome='match'] .stage-seam,
.stage[data-outcome='gold'] .stage-seam {
  background: linear-gradient(90deg, transparent, var(--gold-soft) 12%, var(--gold) 50%, var(--gold-soft) 88%, transparent);
}
.stage[data-outcome='match'] .stage-seam-node,
.stage[data-outcome='gold'] .stage-seam-node {
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(240, 180, 64, 0.16), 0 0 22px var(--gold-glow);
  transform: scale(1.35);
}

.outcome-kicker {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--gold);
}
.stage[data-outcome='miss'] .outcome-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.outcome-line {
  max-width: 56ch;
  margin-bottom: 20px;
  font-size: 15px;
  color: var(--text-secondary);
}
.stage[data-outcome='miss'] .outcome-line {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1.36;
  color: var(--text-primary);
}

.thread { display: grid; gap: 9px; margin-bottom: 18px; }
.stage[data-outcome='miss'] .thread { display: none; }
.bubble {
  max-width: 78%;
  padding: 11px 15px;
  border-radius: var(--radius);
  font-size: 15px;
  animation: bubble-in 0.45s ease both;
}
.bubble span {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bubble em { font-style: normal; }
.bubble-them {
  justify-self: start;
  border-bottom-left-radius: 4px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  animation-delay: 0.5s;
}
.bubble-you {
  justify-self: end;
  border-bottom-right-radius: 4px;
  background: rgba(232, 64, 122, 0.16);
  border: 1px solid rgba(232, 64, 122, 0.4);
  animation-delay: 1.2s;
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.outcome-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.outcome-foot p { flex: 1 1 250px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }

/* The two kept characters, side by side. On a match the link between them
   is gold and lit; on a miss it stays broken and both cards go quiet. */
.outcome-pair {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.outcome-card {
  /* Shrinkable: below ~340px the pair would otherwise overflow the beat and
     be cropped by the body's overflow guard rather than fitting. */
  flex: 0 1 120px;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  transition: border-color var(--transition), box-shadow var(--transition), filter var(--transition);
}
.outcome-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 22%; }
/* Real persona names run to two lines. Reserve the space in both captions so
   the pair never sits at two different heights. */
.outcome-card figcaption { padding: 8px 10px 10px; }
.outcome-card small {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.outcome-card strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.14;
  /* Exactly two lines whether the name wraps or not, so the pair of cards is
     always the same height. */
  height: 2.28em;
}

.outcome-link {
  flex: 1;
  height: 1px;
  background: var(--border-strong);
  position: relative;
  transition: background var(--transition-slow);
}
.outcome-link::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background var(--transition-slow), box-shadow var(--transition-slow), transform var(--transition-slow);
}

.stage[data-outcome='match'] .outcome-card,
.stage[data-outcome='gold'] .outcome-card {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 12px 34px var(--gold-glow);
}
.stage[data-outcome='match'] .outcome-link,
.stage[data-outcome='gold'] .outcome-link { background: var(--gold); }
.stage[data-outcome='match'] .outcome-link::after,
.stage[data-outcome='gold'] .outcome-link::after {
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(240, 180, 64, 0.16), 0 0 22px var(--gold-glow);
  transform: scale(1.35);
}

.stage[data-outcome='miss'] .outcome-card { filter: grayscale(0.7) brightness(0.8); }
.stage[data-outcome='miss'] .outcome-link {
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 5px, transparent 5px 11px);
}

/* ── Narration ─────────────────────────────────────────────────────── */

.stage-foot {
  padding: 8px 18px 18px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.stage-say {
  padding-top: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  min-height: 44px;
}

/* ── Worlds: full-width poster bands ───────────────────────────────── */

.worlds { padding-bottom: 96px; }

.band {
  --accent: var(--rose);
  position: relative;
  padding: 56px 0;
  border-top: 1px solid var(--border);
}
.band-veil { --accent: var(--violet); }
.band-perigee { --accent: var(--gold); }
.band:last-of-type { border-bottom: 1px solid var(--border); }

.band::before {
  content: '';
  position: absolute;
  inset: 0 0 0 0;
  background: linear-gradient(90deg, var(--accent-tint, rgba(232, 64, 122, 0.07)), transparent 46%);
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}
.band-real { --accent-tint: rgba(232, 64, 122, 0.08); }
.band-veil { --accent-tint: rgba(155, 109, 255, 0.08); }
.band-perigee { --accent-tint: rgba(240, 180, 64, 0.07); }
.band:hover::before, .band:focus-within::before { opacity: 1; }

.band-inner {
  display: grid;
  /* Wide enough to keep "The Real World" on one line at the display size. */
  grid-template-columns: minmax(0, 384px) minmax(0, 1fr);
  gap: 46px;
  align-items: center;
}

.band-copy h3 {
  font-size: clamp(38px, 4.4vw, 52px);
  font-weight: 400;
  margin-bottom: 14px;
}
.band-copy p:last-child { color: var(--text-secondary); font-size: 15.5px; }

/* Horizontal, drag/scroll strip of portraits — no autoplay, so it costs
   nothing when a visitor ignores it and stays honest under reduced motion. */
/* Two fixed slots per world — no scroller. app.js swaps one photo at a
   time out of a deeper queue so the section stays alive on its own. */
.band-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* The frame holds the border and the lift; the photo inside it does the
   zoom, so the border stays put while the picture moves under it. */
.band-shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg-card);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.band-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), filter var(--transition), opacity 0.55s ease;
}
/* Mid-swap the photo fades out, is replaced, and fades back in. */
.band-shot.is-swapping img { opacity: 0; }

.band-shot:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.band-shot:hover img {
  transform: scale(1.06);
  filter: saturate(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .band-shot:hover { transform: none; }
  .band-shot:hover img { transform: none; }
}

/* "Tonight" is the mono label; the names stay in the UI face so the line
   fits the copy column without wrapping. */
.band-cast {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--text-secondary);
}
.band-cast span {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.worlds-note {
  max-width: var(--wrap);
  margin: 42px auto 0;
  padding: 0 var(--gutter);
  font-size: 14.5px;
  color: var(--text-muted);
}
.worlds-note span { color: var(--gold); margin-right: 8px; }

/* ── Beta + invite form ────────────────────────────────────────────── */

.beta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: 56px;
  align-items: start;
  padding-top: 56px;
  padding-bottom: 56px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.beta-copy h2 { font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 20px; }
.beta-copy > p { max-width: 52ch; color: var(--text-secondary); }

.commitments { display: grid; gap: 2px; }
.commitments li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 4px 10px;
  padding: 17px 0;
  border-top: 1px solid var(--border);
}
.commitments span {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold);
  padding-top: 4px;
}
.commitments strong { font-weight: 500; font-size: 16.5px; }
.commitments small { color: var(--text-muted); font-size: 14px; }

/* Form */
.invite-form {
  padding: 30px 30px 26px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(28, 23, 36, 0.92), rgba(15, 12, 20, 0.86));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.44);
}
.invite-form > label {
  display: block;
  margin-bottom: 14px;
  font-size: 14.5px;
  color: var(--text-secondary);
}

.invite-row { display: flex; gap: 10px; flex-wrap: wrap; }
.invite-row input[type='email'] {
  flex: 1 1 190px;
  min-width: 0;
  padding: 15px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: rgba(12, 10, 16, 0.7);
  color: var(--text-primary);
  font-family: var(--font-ui);
  /* Never below 16px: iOS Safari zooms the page on focus under that. */
  font-size: 16px;
  transition: border-color var(--transition), background var(--transition);
}
.invite-row input[type='email']::placeholder { color: var(--text-muted); }
.invite-row input[type='email']:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(12, 10, 16, 0.95);
}
.invite-row input[type='email']:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Honeypot — present for bots, gone for everyone else. */
.form-trap {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.turnstile-slot:not(:empty) { margin-top: 16px; }

.form-privacy {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}
.form-privacy a { color: var(--text-secondary); }

.form-status:not(:empty) {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.form-status.is-error { color: var(--red); }

/* ── Questions ─────────────────────────────────────────────────────── */

.questions-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 62px;
  align-items: start;
}
.questions-grid h2 { font-size: clamp(34px, 4.2vw, 50px); margin-bottom: 18px; }

.question-list { border-top: 1px solid var(--border); }
.question-list details { border-bottom: 1px solid var(--border); }
.question-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  transition: color var(--transition);
}
.question-list summary::-webkit-details-marker { display: none; }
.question-list summary:hover { color: var(--gold); }
.question-list summary span {
  flex: none;
  width: 22px; height: 22px;
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: border-color var(--transition), transform var(--transition);
}
.question-list summary span::before,
.question-list summary span::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 1px;
  margin: -0.5px 0 0 -4.5px;
  background: var(--text-secondary);
  transition: transform var(--transition), background var(--transition);
}
.question-list summary span::after { transform: rotate(90deg); }
.question-list details[open] summary { color: var(--gold); }
.question-list details[open] summary span { border-color: var(--gold); }
.question-list details[open] summary span::before,
.question-list details[open] summary span::after { background: var(--gold); }
.question-list details[open] summary span::after { transform: rotate(0deg); }
.question-list details p {
  max-width: 64ch;
  padding: 0 2px 24px;
  color: var(--text-secondary);
  font-size: 15.5px;
}

/* ── Closing ───────────────────────────────────────────────────────── */

.closing {
  position: relative;
  z-index: 1;
  padding: 124px 0 118px;
  overflow: hidden;
  border-top: 1px solid var(--border);
}
.closing-glow {
  position: absolute;
  inset: auto -20% -60%;
  height: 140%;
  background: radial-gradient(ellipse 46% 50% at 50% 100%, rgba(240, 180, 64, 0.16), transparent 68%);
  pointer-events: none;
}
.closing-inner { position: relative; text-align: center; }
.closing-inner > img { margin: 0 auto 26px; opacity: 0.85; }
.closing h2 {
  max-width: 16ch;
  margin: 0 auto 40px;
  font-size: clamp(38px, 6vw, 74px);
  font-weight: 400;
}
.closing h2 em { font-style: italic; font-weight: 300; color: var(--gold); }

.invite-form-closing { max-width: 620px; margin: 0 auto; text-align: left; }

/* ── Footer ────────────────────────────────────────────────────────── */

.site-footer {
  position: relative;
  z-index: 1;
  padding: 42px 0;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  font-size: 13.5px;
  color: var(--text-muted);
}
.footer-inner .brand { font-size: 18px; }
.footer-inner nav { display: flex; gap: 22px; margin-left: auto; }
.footer-inner nav a { text-decoration: none; transition: color var(--transition); }
.footer-inner nav a:hover { color: var(--gold); }

/* ═══════════════════════  RESPONSIVE  ═══════════════════════ */

/* These all collapse to a single column. It has to be minmax(0, 1fr) rather
   than a bare 1fr — the latter floors at the content's min-content width, so
   the column stops shrinking and pushes the page sideways on small phones. */
@media (max-width: 1080px) {
  .play-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .moves { position: static; grid-template-columns: minmax(0, 1fr); }
  .move { opacity: 1; }
  .section-heading-split { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
  .band-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* Once the band stacks, two slots would otherwise stretch to the full wrap
     width and tower over the copy. */
  .band-strip { max-width: 520px; }
  .questions-grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .beta-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

@media (max-width: 900px) {
  .seam { display: none; }
  .site-nav { display: none; }
  .header-inner { justify-content: space-between; }
  .site-header .button { margin-left: auto; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  :root { --gutter: 20px; }

  /* The scrolled header is ~46px here, not the ~96px it is on desktop, so the
     desktop offset dropped every in-page jump well below its target. */
  #main, #top, #play, #worlds, #questions, #invite { scroll-margin-top: 62px; }

  .section { padding: 68px 0; }
  .section-heading { margin-bottom: 38px; }
  .eyebrow { margin-bottom: 16px; }
  .hero { padding: 170px 0 84px; }
  /* On a phone the copy runs the full width of the screen, so there is no
     empty column to put a portrait in — anything centred behind the hero
     fights the headline, which is why these were dimmed to 0.24 to begin
     with. Give them a band of their own at the foot of the hero instead,
     below every line of copy, and they can run at full strength with no
     scrim and nothing to read through them.

     Cropped to the face rather than scaled down: a 2:3 portrait carries its
     subject in the upper third, so fading or shrinking the top is what made
     these read as texture instead of people. The band sits above the copy —
     the two of them lean in over the headline — so it is the lower edge that
     softens into the page. */
  .wing {
    width: 52vw;
    max-width: none;
    /* Near the source's own 2:3, so it reads as a portrait card rather than
       a cropped square. Tall enough to run down behind the copy. */
    height: 300px;
    /* Positive, and clear of the rotation's corner lift, so the hero's
       overflow:hidden has nothing of the portrait to clip. */
    top: 10px;
    bottom: auto;
    opacity: 0.9;
    filter: saturate(1);
    /* Solid through the face, then a long dissolve that carries the card
       down behind the copy. The 34%/52% stops are set by contrast, not by
       eye: the eyebrow and lede sit over the tail and need it at or under
       0.41 and 0.34 respectively to stay legible against the brightest
       highlight in these portraits. */
    -webkit-mask-image: linear-gradient(180deg, #000 34%, rgba(0, 0, 0, 0.35) 52%, transparent);
    mask-image: linear-gradient(180deg, #000 34%, rgba(0, 0, 0, 0.35) 52%, transparent);
  }
  /* Top-aligned. These portraits start the head about 3% into the frame, so
     any downward crop takes the top of it — which is what was cutting them. */
  .wing img { height: 100%; object-fit: cover; object-position: 50% 0; }
  /* Bottom-anchored, so the vertical centring transform has to go. */
  /* Shallower than desktop's 6deg: a wide box lifts its corners much further
     than a tall one at the same angle, and that lift is what meets the crop. */
  .wing-left { left: -10vw; transform: rotate(-4deg); }
  .wing-right { right: -10vw; transform: rotate(4deg); }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { width: 100%; }
  .ledger li { padding: 0 12px; font-size: 10px; }

  .move { grid-template-columns: 34px 1fr; padding: 14px 0 14px 4px; }
  .move-num { padding-left: 12px; }
  .move h3 { font-size: 22px; }
  .move p { font-size: 15px; }

  /* Three chips in a row still have to be tappable. */
  .chip { padding: 11px 13px; }

  .beat { padding: 18px 13px 6px; }
  .stage-chips { padding: 12px 13px; }
  .pool { gap: 8px; }
  .mask-copy { left: 7px; right: 7px; bottom: 7px; }
  .mask-copy strong { font-size: 15px; }
  .mask-copy small { font-size: 9px; }

  .scene-option { padding: 12px 13px; gap: 11px; }
  .scene-body strong { font-size: 18px; }
  .scene-body em { font-size: 12.5px; }

  /* The deck must stay taller than the card, or the stack overflows onto
     the pass/star/like row underneath it. */
  .deck { height: 326px; }
  .swipe { width: 200px; height: 280px; margin-left: -100px; }
  .swipe-copy { left: 13px; right: 13px; bottom: 12px; }
  .swipe-copy em { font-size: 13px; }
  .swipe-copy strong { font-size: 19px; }
  .swipe-btn { width: 46px; height: 46px; font-size: 17px; }

  .held { padding: 26px 16px; }
  .held-label { font-size: 24px; }
  .outcome-kicker { font-size: 26px; }
  .stage[data-outcome='miss'] .outcome-line { font-size: 19px; }
  .stage-foot { padding: 6px 14px 16px; }
  .bubble { max-width: 88%; }

  /* Smaller frames keep three world bands from dominating the scroll. */
  .band-strip { gap: 9px; max-width: 320px; }
  .band-cast { margin-top: 14px; font-size: 13.5px; }

  .invite-form { padding: 24px 20px 22px; }
  .invite-row .button { width: 100%; }

  .question-list summary { font-size: 20px; padding: 19px 2px; }
  .worlds-note { margin-top: 30px; font-size: 13.5px; }
  .beta-grid { padding-top: 42px; padding-bottom: 42px; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-inner nav { margin-left: 0; }
}

@media (max-width: 420px) {
  .pool { gap: 6px; }
  .mask-copy strong { font-size: 13px; }

  /* Stacked rather than wrapped: a wrapped row would begin with an orphaned
     divider, and the three items no longer fit one row at this width. */
  .ledger { flex-direction: column; gap: 7px; }
  .ledger li { padding: 0; border-left: 0; }
}