/* =====================================================================
   PREMIUM PASS (29 Oct): one file, loaded last. Remove its <link> in index.html to revert.
   Thesis: a card table at night. Dark felt, real cards as the hero, gold as a hairline accent,
   OG blue only for things you press. Fewer boxes: spacing, hairlines and type do the grouping.
   The banner overlay (.lay-banner) and its bn-* parts are untouched: every overlay rule is scoped to
   .stage-wrap:not(.lay-banner).
   ===================================================================== */
:root {
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --hair: rgba(216,184,121,.16);
  --hair-soft: rgba(238,236,228,.07);
  --surface: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  --lift: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.5), 0 10px 24px -12px rgba(0,0,0,.8);
  --card-depth: 0 1px 1px rgba(0,0,0,.6), 0 6px 12px -4px rgba(0,0,0,.65), 0 22px 40px -18px rgba(0,0,0,.9);
  --ease: cubic-bezier(.22,1,.36,1);
  --text-2: #b9b3a5;
  --grain-faint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .75 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body { background: #060607; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* numbers: tabular body figures, not the typewriter mono */
.num:where(:not(.lay-banner *)) { font-family: var(--body); font-variant-numeric: tabular-nums; }
/* eyebrows: quiet body type, not mono caps */
.eyebrow:where(:not(.lay-banner *)) { font-family: var(--body); font-weight: 600; font-size: 12px; letter-spacing: .08em; color: var(--muted); }

/* ---------- cards: real depth, the art is the hero ---------- */
.card:where(:not(.lay-banner *)) .inner { border-radius: 6%/4.3%; box-shadow: var(--card-depth); }
.card:where(:not(.lay-banner *)) .face, .card:where(:not(.lay-banner *)) .back { border-radius: 6%/4.3%; }
.card:where(:not(.lay-banner *)) .face { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.card:where(:not(.lay-banner *)) .back { box-shadow: inset 0 0 0 1px rgba(142,113,64,.6); }
/* face-down slots wait quietly so every flipped card reads first */
.card:not([data-n]):not(.empty):where(:not(.lay-banner *)) .back { filter: brightness(.5) saturate(.75); }
.card.serial:where(:not(.lay-banner *)) .face { box-shadow: 0 0 0 1.5px var(--gold), 0 0 22px rgba(216,184,121,.45); }
.card.legend:where(:not(.lay-banner *)) .face { box-shadow: 0 0 0 1.5px var(--gold-hi), 0 0 26px rgba(244,220,154,.5); }
.card:where(:not(.lay-banner *)) .tag { font-family: var(--body); font-weight: 700; letter-spacing: .1em; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
/* a landing card catches the light once */
.card.in:where(:not(.lay-banner *)) .inner::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,246,220,.42) 50%, transparent 62%) -120% 0/250% 100% no-repeat; }
.card.in:not(.noanim):where(:not(.lay-banner *)) .inner::after { animation: pmSheen 1.1s .45s var(--ease) both; }
@keyframes pmSheen { 0% { opacity: 1; background-position: -120% 0; } 100% { opacity: 1; background-position: 140% 0; } }
.card.hit:where(:not(.lay-banner *))::after { inset: -4px; border-width: 2px; box-shadow: 0 0 14px rgba(99,217,142,.45); }

/* ---------- buttons ---------- */
.big-btn, .cta { border-radius: var(--r-md); letter-spacing: .05em;
  background: linear-gradient(180deg, #5f8bff, #3f6ff0); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.25), 0 10px 24px -10px rgba(76,125,255,.75);
  transition: transform .18s var(--ease), filter .2s var(--ease), box-shadow .2s var(--ease); }
.big-btn:hover { filter: brightness(1.07); }
.big-btn:active { transform: scale(.98); }
.big-btn:disabled { filter: grayscale(.6) brightness(.7); }
.ghost, .chipbtn { border-color: var(--hair); }

/* =====================================================================
   PHONE
   ===================================================================== */
/* atmosphere: the playmat, barely there, under a vignette and a little grain */
.phone::before { background:
  radial-gradient(120% 70% at 50% 0%, rgba(216,184,121,.09), transparent 60%),
  radial-gradient(140% 90% at 50% 45%, transparent 35%, rgba(0,0,0,.7) 100%),
  var(--grain-faint), #060607; }
.phone::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url(assets/playmat.webp) center/cover no-repeat; opacity: .1;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 16%, transparent 84%, #000); mask-image: linear-gradient(to bottom, #000, transparent 16%, transparent 84%, #000); }
.p-main { gap: var(--s5); }

/* header: lockup left, product name as a small gold wordmark */
.p-head { padding: 16px 0 6px; }
.p-head .lockup img.og { width: 30px; height: 30px; filter: none; }
.p-head .lockup .x { font-family: var(--body); color: var(--gold-lo); font-size: 12px; }
.p-head .eyebrow { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* mission: a quiet status plate, not a loud box */
.mission { border: 1px solid var(--hair-soft); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--lift); padding: 14px 16px; gap: 12px; }
.m-dot { width: 8px; height: 8px; }
.mission.wait { padding: 14px 16px; } /* .wait (the old centered wait block) zeroed its padding */
.m-title { font-size: 25px; letter-spacing: .01em; }
.m-sub { color: var(--text-2); }
.m-secs { font-family: var(--display); font-weight: 800; font-size: 32px; line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.m-timer { height: 3px; border-radius: 2px; background: rgba(255,255,255,.06); }
.mission.go { border-color: rgba(216,184,121,.28); background: linear-gradient(180deg, rgba(216,184,121,.10), rgba(216,184,121,.02) 70%); }
.mission.hurry { border-color: rgba(255,93,93,.55); }
.mission.done { border-color: rgba(99,217,142,.3); }
.mission.watch { border-color: rgba(157,212,236,.22); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(244,220,154,.55); } 70% { box-shadow: 0 0 0 8px rgba(244,220,154,0); } 100% { box-shadow: 0 0 0 0 rgba(244,220,154,0); } }

/* step dots */
.dots { gap: 5px; }
.dots i { height: 3px; width: 22px; background: rgba(255,255,255,.08); }
.dots i.done { background: var(--gold-lo); }
.dots i.now { background: var(--gold-hi); width: 40px; }

/* the question */
.ask { gap: 14px; }
.qnum { font-family: var(--body); font-weight: 700; font-size: 12px; letter-spacing: .14em; color: var(--gold); }
.ask h2 { font-size: 40px; line-height: .93; letter-spacing: .005em; }
.hint, .tip { color: var(--text-2); }

/* Call it tiles: pressable plates with a lit top edge */
.tiles { gap: 10px; }
.tile { border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); background: var(--surface), #0c0d10; box-shadow: var(--lift);
  transition: transform .18s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.tile:hover { border-color: rgba(216,184,121,.32); }
.tile:active { transform: scale(.985); }
.tile .t-sub { font-family: var(--body); font-size: 13px; color: var(--muted); letter-spacing: .01em; }
.tile.row { padding: 15px 16px; grid-template-columns: 58px 1fr; column-gap: 10px; }
.tile.row .t-big { font-size: 31px; letter-spacing: .01em; }
.tile.row .t-gem { font-size: 15px; letter-spacing: 2px; color: var(--gold); opacity: .9; }
.t-gem.gL { text-shadow: 0 0 8px rgba(244,220,154,.6); }
.tile.yes { background: linear-gradient(135deg, rgba(255,155,228,.10), rgba(158,244,255,.10), rgba(248,255,158,.08)), #0c0d10; }
.tile.sel { border-color: rgba(107,147,255,.9); background: linear-gradient(180deg, rgba(76,125,255,.20), rgba(76,125,255,.07)), #0c0f1c; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 3px rgba(76,125,255,.18), 0 12px 28px -14px rgba(76,125,255,.7); }
.tile.sel::after { width: 22px; height: 22px; font-size: 13px; top: 10px; right: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.tile.sideA { border-color: rgba(216,184,121,.28); } .tile.sideB { border-color: rgba(107,147,255,.32); }
.tile.sideA.sel { border-color: var(--sideA); background: linear-gradient(180deg, rgba(216,184,121,.18), rgba(216,184,121,.05)), #0c0d10; }
.tile.sideB.sel { border-color: var(--sideB); background: linear-gradient(180deg, rgba(107,147,255,.2), rgba(107,147,255,.06)), #0c0d10; }
.backbtn { color: var(--text-2); font-weight: 600; }

/* bonus card grid */
.search { background: rgba(255,255,255,.04); border: 1px solid var(--hair-soft); border-radius: var(--r-sm); }
.search:focus { outline: none; border-color: rgba(107,147,255,.8); box-shadow: 0 0 0 3px rgba(76,125,255,.18); }
.grid { gap: 8px; }
.gcard { border-radius: 6px; box-shadow: 0 4px 10px -4px rgba(0,0,0,.8); }
.gcard .odds { font-family: var(--body); font-weight: 700; font-size: 10px; border-radius: 4px; background: rgba(0,0,0,.72); }
.gcard.sel { box-shadow: 0 0 0 2px var(--blue), 0 8px 18px -6px rgba(76,125,255,.7); }

/* your guesses: three slim plates */
.picks { gap: 8px; }
.pick { border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); background: var(--surface), #0c0d10; box-shadow: var(--lift); padding: 12px 10px; }
.pick small { font-family: var(--body); font-weight: 700; font-size: 10px; letter-spacing: .12em; }
.pick b { font-size: 21px; }
.pick em { font-family: var(--body); font-weight: 700; }
.pick .state { font-family: var(--body); font-size: 12px; font-weight: 600; line-height: 1.25; }
.pick img { opacity: .28; }
.pick.ok { border-color: rgba(99,217,142,.7); background: linear-gradient(180deg, rgba(99,217,142,.16), rgba(99,217,142,.04)), #0c0d10; }
.pick.no { border-color: rgba(255,93,93,.28); }
.power { border: 1px solid var(--hair); border-radius: var(--r-md); background: rgba(216,184,121,.03); }
.power span { color: var(--text-2); }
.chipbtn { border-color: rgba(216,184,121,.3); }
.sticky-cta { background: linear-gradient(to bottom, transparent, #060607 40%); }
.link { color: #a9c0ff; }

/* watching: the cards breathe */
.mini-pulls { gap: 7px; }
.side-h { font-size: 21px; }

/* results */
.result .pts { font-size: 112px; letter-spacing: -.01em; text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 40px rgba(216,184,121,.22); }
.result .pts.zero { color: #4d493f; text-shadow: none; }
.ptsl { font-family: var(--body); font-weight: 700; font-size: 12px; letter-spacing: .16em; margin-top: 2px; }
.lines { gap: 0; border-top: 1px solid var(--hair-soft); }
.lines li { background: none; border-radius: 0; border-left: 0; padding: 13px 2px; border-bottom: 1px solid var(--hair-soft); }
.lines li span { font-weight: 600; }
.lines li small { color: var(--muted); }
.lines li b { font-family: var(--display); font-weight: 800; font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.lines li.no b, .lines li.void b { color: #5c574d; }
.lines li.jackpot b { color: var(--gold-hi); }
.mults span { font-family: var(--body); font-weight: 700; font-size: 12px; background: rgba(216,184,121,.08); border: 1px solid var(--hair); border-radius: 99px; padding: 4px 10px; }
.rankmove { font-family: var(--body); font-weight: 600; font-size: 15px; color: var(--text-2); margin: 2px 0 0; }

/* phone leaderboard: ranked list, gold numerals, aligned scores, no box per row */
.p-board { margin-top: 10px; background: none; border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: 14px 0 0; text-align: left; }
.p-board h3 { font: 800 22px var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--paper); margin: 0 0 6px; }
.p-board ol { list-style: none; padding: 0; counter-reset: pb; gap: 0; }
.p-board li { counter-increment: pb; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hair-soft); font-weight: 600; }
.p-board li::before { content: counter(pb); font: 800 22px/1 var(--display); color: var(--gold-lo); text-align: left; }
.p-board li:first-child::before { color: var(--gold-hi); }
.p-board li bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-board li b { float: none; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: .01em; color: var(--paper); font-variant-numeric: tabular-nums; }
.p-board li.me { color: var(--gold-hi); }
.p-board li.me b { color: var(--gold-hi); }

/* lobby: the flow as a numbered list, not three boxes */
.explain h2 { font-size: 24px; }
.flow { gap: 0; border-top: 1px solid var(--hair-soft); }
.flow li { background: none; border-radius: 0; padding: 12px 2px; border-bottom: 1px solid var(--hair-soft); grid-template-columns: 34px 1fr; }
.flow li::before { font-size: 30px; color: var(--gold-hi); }
.flow b { font-size: 22px; }
.flow span { color: var(--text-2); }

/* join */
.join { padding-top: 4px; }
.join-hero { gap: 14px; }
.join-hero .fan { height: 176px; margin-top: 6px; }
.join-hero .fan img { width: 104px; margin-left: -52px; border-radius: 7px; box-shadow: 0 1px 1px rgba(0,0,0,.6), 0 14px 30px -8px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.08); }
.join-hero h1 { font-size: 54px; line-height: .9; }
.join-hero p { color: var(--text-2); }
.join-form { gap: 10px; }
.join-form label { font-size: 14px; color: var(--text-2); }
.join-form input { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); font-size: 20px; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.join-form input::placeholder { color: #5f5a50; }
.join-form input:focus { border-color: rgba(107,147,255,.85); box-shadow: 0 0 0 3px rgba(76,125,255,.18); }
.fine { font-family: var(--body); font-size: 13px; letter-spacing: 0; }

/* bottom bar: a frosted strip with a gold hairline */
.me-bar { gap: 8px; background: rgba(8,8,10,.82); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(216,184,121,.35), transparent) 1; }
.me-name { font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; }
.me-stat { min-width: 44px; }
.me-stat small { font-family: var(--body); font-weight: 700; font-size: 9px; letter-spacing: .12em; }
.me-stat b { font-size: 23px; font-variant-numeric: tabular-nums; }
.me-chat { border-color: rgba(255,255,255,.12); padding: 0 12px; }
.me-help { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); width: 40px; height: 40px; }

/* sheets */
.sheet { background: rgba(0,0,0,.66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sheet-card { background: linear-gradient(180deg, #15161a, #0d0e11); border: 1px solid var(--hair-soft); border-radius: var(--r-lg); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px -20px rgba(0,0,0,.9); }
.sheet-card p { color: var(--text-2); }
.rules { gap: 0; }
.rules li { background: none; border-radius: 0; border-bottom: 1px solid var(--hair-soft); padding: 10px 2px; }
.rules li span { font-family: var(--body); font-weight: 600; font-size: 13px; }
.t-stack img, .t-foil { box-shadow: var(--card-depth); }

/* notices and asks: solid hairlines, no dashed outlines */
.ask-row { border: 0; border-top: 1px solid var(--hair-soft); border-radius: 0; margin: 24px 16px 96px; padding: 16px 0 0; }
.ask-btn { font-weight: 600; color: var(--gold); text-decoration-color: rgba(216,184,121,.4); }
.claim-bar { border-color: var(--hair); background: rgba(216,184,121,.06); border-radius: var(--r-md); }
.net-warn, .net-bar { border-radius: var(--r-md); }
.claim { font-family: var(--body); font-weight: 700; }

/* =====================================================================
   CLASSIC OVERLAY (1920x1080). Scoped away from the banner layout.
   ===================================================================== */
.stage-wrap:not(.lay-banner) { background: #050506; }
.stage-wrap:not(.lay-banner) .stage { background:
  radial-gradient(60% 55% at 36% 52%, rgba(216,184,121,.07), transparent 70%),
  radial-gradient(130% 100% at 50% 50%, transparent 45%, rgba(0,0,0,.8) 100%),
  var(--grain-faint), #070708; }
/* the rope comes off every panel: one hairline system instead */
.stage-wrap:not(.lay-banner) .rope::before { display: none; }

/* header */
.stage-wrap:not(.lay-banner) .ov-head .lockup img.og { filter: none; width: 54px; height: 54px; }
.stage-wrap:not(.lay-banner) .ov-head .lockup .x { font-family: var(--body); }
.stage-wrap:not(.lay-banner) .ov-head .lockup .title { font-size: 66px; letter-spacing: .015em; padding-left: 24px; margin-left: 18px; border-left: 1px solid var(--hair); line-height: .85; }
.stage-wrap:not(.lay-banner) .ov-pack .title { font-size: 62px; letter-spacing: .01em; }
.stage-wrap:not(.lay-banner) .ov-pack .title small { font-size: 32px; color: #7d776b; }
.ring:where(:not(.lay-banner *)) { font-family: var(--display); font-weight: 800; background: conic-gradient(var(--gold) calc(var(--p) * 360deg), rgba(255,255,255,.07) 0); }
.ring.urgent:where(:not(.lay-banner *)) { background: conic-gradient(var(--bad) calc(var(--p) * 360deg), rgba(255,255,255,.07) 0); }
.ring:where(:not(.lay-banner *))::after { background: #08080a; }
.stage-wrap:not(.lay-banner) .ov-pack .ring { width: 88px; height: 88px; font-size: 38px; }
.stage-wrap:not(.lay-banner) .ov-pack .ring::after { inset: 4px; }

/* card zone: no box, the cards sit on a pool of light */
.stage-wrap:not(.lay-banner) .ov-stage { gap: 26px; }
.stage-wrap:not(.lay-banner) .ov-pulls { background: radial-gradient(70% 70% at 50% 55%, rgba(216,184,121,.07), transparent 75%); border-radius: 0; padding: 10px 6px; gap: 26px; }
.stage-wrap:not(.lay-banner) .ov-open + .ov-pulls { gap: 14px; padding: 6px; background: none; }
.stage-wrap:not(.lay-banner) .ov-side.sideB .ov-pulls.b { box-shadow: none; }
.stage-wrap:not(.lay-banner) .ov-pulls.b { gap: 10px; padding: 6px; }

/* guess window: three columns divided by hairlines, not three boxes */
.stage-wrap:not(.lay-banner) .ov-open { gap: 0; }
.stage-wrap:not(.lay-banner) .ov-q { background: none; border-radius: 0; padding: 4px 36px; gap: 16px; border-left: 1px solid var(--hair-soft); }
.stage-wrap:not(.lay-banner) .ov-q:first-child { border-left: 0; padding-left: 8px; }
.stage-wrap:not(.lay-banner) .ov-q h3 { font-size: 34px; letter-spacing: .02em; color: var(--paper); }
.stage-wrap:not(.lay-banner) .bar { grid-template-columns: 150px 1fr 66px; gap: 16px; }
.stage-wrap:not(.lay-banner) .bar .lbl { font-weight: 700; font-size: 25px; color: var(--text-2); }
.stage-wrap:not(.lay-banner) .bar .trk { height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); }
.stage-wrap:not(.lay-banner) .bar .trk i { border-radius: 4px; }
.stage-wrap:not(.lay-banner) .bar .pc { font-family: var(--display); font-weight: 800; font-size: 28px; font-variant-numeric: tabular-nums; }
.stage-wrap:not(.lay-banner) .ov-shot img { width: 104px; border-radius: 7px; box-shadow: var(--card-depth); }
.stage-wrap:not(.lay-banner) .ov-shot .eyebrow, .stage-wrap:not(.lay-banner) #cc { font-size: 17px; }

/* truth line + callouts: display type, not spaced mono */
.stage-wrap:not(.lay-banner) .ov-truth { font-family: var(--display); font-weight: 700; font-size: 32px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.stage-wrap:not(.lay-banner) .ov-truth b { color: var(--gold-hi); }
.stage-wrap:not(.lay-banner) .ov-callout .sub { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.stage-wrap:not(.lay-banner) .ov-callout .title { text-shadow: 0 0 40px rgba(216,184,121,.45), 0 6px 0 #000; }

/* leaderboard: one quiet surface, rows divided by hairlines, gold rank numerals, aligned scores */
.stage-wrap:not(.lay-banner) .ov-board { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01) 40%, transparent); border: 1px solid var(--hair-soft); border-top-color: rgba(216,184,121,.3); border-radius: var(--r-lg); padding: 28px 30px; gap: 6px; box-shadow: inset 0 1px 0 rgba(244,220,154,.08), 0 40px 80px -40px rgba(0,0,0,.9); }
.stage-wrap:not(.lay-banner) .ov-board h3 { font-size: 44px; color: var(--paper); margin: 0 0 10px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.stage-wrap:not(.lay-banner) .ov-board h3 #lbt { font-size: 44px; color: var(--paper); }
.stage-wrap:not(.lay-banner) .ov-board h3 #pc { font-family: var(--body); font-size: 17px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stage-wrap:not(.lay-banner) .lb { gap: 0; }
.stage-wrap:not(.lay-banner) .lb li { background: none; border-radius: 0; padding: 13px 4px; border-bottom: 1px solid var(--hair-soft); grid-template-columns: 48px minmax(0, 1fr) auto 110px; gap: 14px; font-size: 25px; }
.stage-wrap:not(.lay-banner) .lb li:last-child { border-bottom: 0; }
.stage-wrap:not(.lay-banner) .lb li .rk { font-size: 34px; text-align: left; color: #6c675c; }
.stage-wrap:not(.lay-banner) .lb li:nth-child(1) .rk { color: var(--gold-hi); }
.stage-wrap:not(.lay-banner) .lb li:nth-child(2) .rk { color: var(--gold); }
.stage-wrap:not(.lay-banner) .lb li:nth-child(3) .rk { color: var(--gold-lo); }
.stage-wrap:not(.lay-banner) .lb li:nth-child(1) { background: linear-gradient(90deg, rgba(216,184,121,.13), transparent 75%); border-bottom-color: rgba(216,184,121,.22); }
.stage-wrap:not(.lay-banner) .lb li:nth-child(1) .nm { color: var(--gold-hi); }
.stage-wrap:not(.lay-banner) .lb li .nm { font-weight: 600; }
.stage-wrap:not(.lay-banner) .lb li .sc { font-family: var(--display); font-weight: 800; font-size: 32px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.stage-wrap:not(.lay-banner) .lb li .dl { font-family: var(--body); }
.stage-wrap:not(.lay-banner) .ov-total { border-top-color: var(--hair); }
.stage-wrap:not(.lay-banner) .ov-total:empty { display: none; }
.stage-wrap:not(.lay-banner) .ov-total small { font-family: var(--body); font-weight: 700; }
.stage-wrap:not(.lay-banner) .ov-total i { font-family: var(--display); font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; }
@keyframes pmRowflash { 0% { background: rgba(99,217,142,.22); } }
.stage-wrap:not(.lay-banner) .lb li.flash { animation: pmRowflash 1.2s ease-out; }

/* footer: join CTA reads as one line of type, ticker in body type */
.stage-wrap:not(.lay-banner) .join-cta { gap: 22px; }
.stage-wrap:not(.lay-banner) .join-cta .eyebrow { font-size: 19px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.stage-wrap:not(.lay-banner) .join-cta .title { font-size: 58px; letter-spacing: .01em; }
.stage-wrap:not(.lay-banner) .join-cta .title b { color: #6f97ff; }
.stage-wrap:not(.lay-banner) .ticker { font-family: var(--body); font-size: 20px; }
.stage-wrap:not(.lay-banner) .ov-chat .oc-line { background: rgba(14,15,18,.82); border: 1px solid var(--hair-soft); }
.stage-wrap:not(.lay-banner) .ov-break { border: 1px solid var(--hair); background: rgba(6,6,8,.92); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); }
.stage-wrap:not(.lay-banner) .ov-final { background: radial-gradient(60% 60% at 50% 50%, rgba(216,184,121,.10), rgba(5,5,7,.92) 70%); }

/* =====================================================================
   DEMO
   ===================================================================== */
.demo { gap: 24px; padding-top: 24px; background: radial-gradient(80% 60% at 40% 30%, rgba(216,184,121,.05), transparent 70%); min-height: 100vh; }
.demo-head { padding-bottom: 6px; border-bottom: 1px solid var(--hair-soft); }
.demo-head .title { font-size: 34px; }
.demo-head p { color: var(--text-2); line-height: 1.5; }
.demo .ov { border: 1px solid var(--hair-soft); border-radius: var(--r-md); box-shadow: 0 40px 80px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.6); }
.demo .ph { border: 6px solid #141417; border-radius: 40px; box-shadow: 0 0 0 1px rgba(216,184,121,.22), 0 40px 80px -30px rgba(0,0,0,.95); }

@media (max-width: 360px) {
  .m-secs { font-size: 26px; }
  .tile.row .t-big { font-size: 26px; }
  .me-name { font-size: 17px; }
  .me-stat { min-width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .card.in .inner::after { animation: none !important; opacity: 0; }
  .tile, .big-btn { transition: none; }
}

/* small phones keep the 22 Oct device fixes: PLAY stays above the fold on 360x640 / 375x667 */
@media (max-width: 360px) {
  .m-title { font-size: 21px; }
  .ask h2 { font-size: 32px; }
  .pick b { font-size: 17px; }
  .join-hero h1 { font-size: 42px; }
}
@media (max-height: 680px) {
  .mission { padding: 10px 14px; gap: 8px; }
  .tile.row { padding: 10px 14px; }
  .join-hero .fan { height: 120px; }
  .join-hero .fan img { width: 78px; margin-left: -39px; }
  .join-hero h1 { font-size: 42px; }
}
/* result lines: readable zero scores, and a slim state stripe so right and wrong differ by more than colour */
.result .pts.zero { color: #7d776c; }
.lines li { border-left: 3px solid transparent; padding-left: 12px; }
.lines li.ok { border-left-color: var(--ok); }
.lines li.jackpot { border-left-color: var(--gold-hi); }
.lines li.no b, .lines li.void b { color: #8a8478; }