/* Face Down web player. Afterglow: the light that leaks out from under a face-down phone.
   Tokens mirror Apps/iOS/Design/Theme.swift. Always dark: there is no light mode by design. */

:root {
  --ground: #060608; --lift: #0D0D12; --slab: #111116; --slab-top: #1A1A21; --slab-bottom: #0B0B0F;
  --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.16);
  --text: #F5F1EA; --muted: rgba(245,241,234,.58); --faint: rgba(245,241,234,.36);
  --loss: #FF3B1F; --hot: #FF8A3D; --deep: #E0153A; --night: #0A0304;
  --ember: #FF6B2C; --gold: #FFC83D; --rose: #FF3D7F;
  --g: clamp(16px, 6.2vw, 24px);
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
  --spring: cubic-bezier(.2,.85,.25,1.08);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; background: var(--ground); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  height: 100%; background: var(--ground); color: var(--text);
  font: 400 16px/1.38 Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
input { font: inherit; color: inherit; border: 0; outline: 0; background: none; -webkit-user-select: text; user-select: text; }
a { color: inherit; }
:focus-visible { outline: 2px solid rgba(255,107,44,.8); outline-offset: 3px; }
svg { display: block; }
[hidden] { display: none !important; }
#app { position: fixed; inset: 0; overflow: hidden; background: var(--ground); }

/* ── screens ── */
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: calc(var(--st) + 10px) var(--g) calc(var(--sb) + 14px);
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  opacity: 0; transition: opacity .45s ease;
}
.screen.in { opacity: 1; }
.screen.out { opacity: 0; pointer-events: none; }
.screen > * { position: relative; flex: none; }
.grow { flex: 1 1 0 !important; min-height: 10px; }
.grow2 { flex: 1.5 1 0 !important; min-height: 10px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.center-text { text-align: center; }

/* ── type ── */
.display { font-stretch: 125%; font-weight: 900; line-height: 1.03; letter-spacing: -.012em; }
.wide { font-stretch: 125%; font-weight: 800; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--faint); line-height: 1.25; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.num { font-variant-numeric: tabular-nums; }
.lede { font-size: 16px; color: var(--muted); line-height: 1.4; }

/* ── buttons ── */
.btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; text-align: center; transition: transform .3s var(--spring), box-shadow .3s, opacity .3s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .35; pointer-events: none; box-shadow: none; }
.btn-primary {
  height: 60px; border-radius: 30px; background: var(--text); color: var(--ground);
  font-stretch: 125%; font-weight: 800; font-size: 18px; letter-spacing: .005em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 16px 46px -12px rgba(var(--glow, 255,107,44), .7), 0 6px 26px -10px rgba(var(--glow, 255,107,44), .5);
}
.btn-primary:active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 6px 22px -8px rgba(var(--glow, 255,107,44), .6); }
.btn-slab { height: 56px; border-radius: 20px; background: var(--slab); box-shadow: inset 0 0 0 1px var(--line); font-stretch: 125%; font-weight: 700; font-size: 16px; }
.btn-glass {
  height: 48px; border-radius: 16px; background: rgba(0,0,0,.32); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  font-weight: 700; font-size: 14px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.btn-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--slab); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; flex: none; transition: transform .25s var(--spring); }
.btn-icon:active { transform: scale(.94); }
.btn-text { height: 44px; padding: 0 2px; font-weight: 600; font-size: 15px; color: var(--muted); }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }

/* ── wordmark ── */
.bar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 12px; }
.bar > .wordmark { flex: none; }
.bar .side { width: 44px; flex: none; }
.wordmark { display: inline-flex; align-items: center; gap: calc(var(--s) * .65); font-size: var(--s); font-stretch: 125%; font-weight: 800; white-space: nowrap; line-height: 1; }
.mark {
  width: calc(var(--s) * .81); height: calc(var(--s) * 1.35); border-radius: calc(var(--s) * .3); background: var(--slab); flex: none;
  box-shadow: 0 0 0 1px rgba(255,107,44,.6), 0 0 calc(var(--s) * .62) calc(var(--s) * .1) rgba(255,107,44,.72), 0 0 calc(var(--s) * 1.5) calc(var(--s) * .4) rgba(255,61,127,.3);
}

/* ── phones ── */
.slab { position: relative; width: var(--w); height: calc(var(--w) * 1.82); }
.slab > * { position: absolute; inset: 0; border-radius: calc(var(--w) * .26); }
.spill {
  box-shadow: 0 0 calc(var(--w) * .42) calc(var(--w) * .07) rgba(var(--rgb), .85), 0 0 calc(var(--w) * 1.4) calc(var(--w) * .42) rgba(var(--rgb), .42);
  opacity: 0; transition: opacity .3s;
}
.slab.down .spill { opacity: var(--gl, 1); transition: opacity .7s .35s; }
.breathe .slab.down .spill { animation: breathe 3.2s ease-in-out infinite; animation-delay: var(--bd, 0s); }
@keyframes breathe { 0%, 100% { opacity: calc(var(--gl, 1) * .72); } 50% { opacity: var(--gl, 1); } }
.shade { box-shadow: 0 calc(var(--w) * .4) calc(var(--w) * .9) rgba(0,0,0,.6); opacity: 0; }
.card { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: perspective(calc(var(--w) * 3.3)) rotateY(0deg); }
.slab.down .card { transform: perspective(calc(var(--w) * 3.3)) rotateY(180deg); }
.face { position: absolute; inset: 0; border-radius: inherit; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.front {
  background: radial-gradient(circle calc(var(--w) * 1.46) at 50% 30%, var(--lh), var(--lc) 50%, var(--ld));
  box-shadow: inset 0 0 0 max(1.5px, calc(var(--w) * .06)) rgba(0,0,0,.85), 0 0 calc(var(--w) * 1.05) calc(var(--w) * .05) rgba(var(--lrgb), calc(var(--gl, 1) * .45));
}
.front::after { content: ""; position: absolute; left: 50%; top: calc(var(--w) * .11); width: calc(var(--w) * .28); height: max(2px, calc(var(--w) * .07)); transform: translateX(-50%); border-radius: 9px; background: rgba(0,0,0,.8); }
.back {
  transform: rotateY(180deg); background: linear-gradient(var(--slab-top), var(--slab-bottom));
  box-shadow: inset 0 0 0 1px rgba(var(--rgb), calc(var(--gl, 1) * .55));
  display: grid; place-items: center; font-stretch: 125%; font-weight: 800; font-size: calc(var(--w) * .32); color: rgba(255,255,255,.16); line-height: 1;
}
.back::before { content: ""; position: absolute; left: calc(var(--w) * .1); top: calc(var(--w) * .1); width: calc(var(--w) * .36); height: calc(var(--w) * .36); border-radius: calc(var(--w) * .1); background: rgba(255,255,255,.05); }

/* ── the table ── */
.table { position: relative; flex: none; margin: 0 auto; width: calc(var(--d) + 140px); height: calc(var(--d) + 90px); }
.pool, .disc, .center { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.pool { width: calc(var(--d) * 1.08); height: calc(var(--d) * 1.08); filter: blur(calc(var(--d) * .16)); opacity: 0; transition: opacity .9s; }
.disc {
  width: var(--d); height: var(--d);
  background: radial-gradient(circle calc(var(--d) * .6) at 50% 38%, #1A1A21, #0E0E13 50%, #09090C);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.8);
}
.disc svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.center { width: calc(var(--d) * .74); height: calc(var(--d) * .56); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 2; }
.seat { position: absolute; left: 50%; top: 50%; margin: calc(var(--w) * -.91) 0 0 calc(var(--w) * -.5); transition: transform .8s var(--spring), opacity .5s; z-index: 1; }
.tag { position: absolute; left: 50%; top: 50%; width: 86px; margin-left: -43px; text-align: center; transition: transform .8s var(--spring), opacity .5s; z-index: 3; pointer-events: none; }
.tag b { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c, var(--text)); transition: color .5s; }
.tag.me b { font-weight: 800; }
.tappable { cursor: pointer; pointer-events: auto; }
.seat.tappable:active { filter: brightness(1.25); }
.tag small { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .21em; text-transform: uppercase; color: var(--faint); margin-top: 2px; min-height: 1px; }
.tag small:empty { display: none; }
.center .count { font-stretch: 125%; font-weight: 900; font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.center .sub { font-size: 12px; font-weight: 600; color: var(--faint); margin-top: 3px; }

/* ── light ── */
.ambient { position: absolute !important; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ambient i {
  position: absolute; left: 50%; top: 50%; width: 120vmin; height: 120vmin; margin: -60vmin 0 0 -60vmin; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), var(--c2) 45%, transparent);
  animation: drift var(--dur) ease-in-out var(--del) infinite alternate; will-change: transform;
}
@keyframes drift { from { transform: translate(var(--x0), var(--y0)) scale(.92); } to { transform: translate(var(--x1), var(--y1)) scale(1.08); } }
.screen > .ambient, .screen > .embers, .screen > .flood, .screen > .backdrop { position: absolute !important; }
.flood { inset: 0; background: var(--night); overflow: hidden; pointer-events: none; }
.flood i {
  position: absolute; left: 50%; bottom: 0; width: calc(var(--fh, 100vh) * 2.3); height: calc(var(--fh, 100vh) * 2.3); border-radius: 50%;
  transform: translate(-50%, 50%) translateY(calc(var(--fh, 100vh) * .1)) scale(0);
  background: radial-gradient(closest-side, #FF8A3D 0%, #FF3B1F 22%, #E0153A 42%, rgba(90,8,23,.6) 66%, rgba(10,3,4,0) 85%);
  transition: transform 1s cubic-bezier(.16,.84,.3,1);
}
.flood.on i { transform: translate(-50%, 50%) scale(var(--lv, 1)); }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ── home ── */
.home .hero { height: clamp(206px, 33vh, 320px); display: flex; align-items: center; justify-content: center; margin: 0 calc(var(--g) * -1); overflow: visible; }
.home .hero .table { transform: scale(var(--hs, 1)); }
.hero-glow { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,59,31,.45), transparent); opacity: 0; transition: opacity .6s; pointer-events: none; }
.hero-glow.on { opacity: 1; }
.home h1 { font-size: clamp(28px, 8.4vw, 34px); }
.home .pitch { display: flex; flex-direction: column; gap: 12px; }
.tiles { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.tile {
  height: clamp(60px, 9.4vh, 78px); border-radius: 18px; background: var(--slab); display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--line); font-stretch: 125%; font-weight: 900; font-size: 36px;
  transition: box-shadow .35s, transform .35s var(--spring);
}
.tile.on { box-shadow: inset 0 0 0 1px rgba(var(--rgb), .6), 0 0 26px -2px rgba(var(--rgb), .45); }
.tile.caret { box-shadow: inset 0 0 0 2px var(--ember); }
.tile.pop { animation: pop .35s var(--spring); }
@keyframes pop { from { transform: scale(.86); } }
.tiles input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: .011; font-size: 16px; color: transparent; caret-color: transparent;
  text-transform: uppercase; letter-spacing: 1em; -webkit-user-select: text; user-select: text;
}
.tiles.shake, .shake { animation: shake .5s; }
@keyframes shake { 20% { transform: translateX(10px); } 40% { transform: translateX(-8px); } 60% { transform: translateX(6px); } 80% { transform: translateX(-3px); } }
.note { font-size: 13px; color: var(--faint); line-height: 1.4; }
.note.err { color: #FF7A5C; }
.getapp a { color: var(--muted); font-weight: 600; text-decoration: none; }

/* ── name ── */
.field {
  width: 100%; height: 64px; padding: 0 18px; border-radius: 20px; background: var(--slab);
  box-shadow: inset 0 0 0 1px var(--line); font-stretch: 125%; font-weight: 800; font-size: 24px; transition: box-shadow .3s;
}
.field:focus { box-shadow: inset 0 0 0 1px rgba(255,107,44,.6), 0 0 22px -6px rgba(255,107,44,.5); }
.field::placeholder { color: var(--faint); }
.applink {
  display: flex; align-items: center; justify-content: center; gap: 9px; align-self: center; margin-top: 10px; padding: 9px 16px;
  border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--muted); text-decoration: none; transition: opacity .3s;
}
.applink b { color: var(--text); font-weight: 700; }
.applink .mark { width: 9px; height: 15px; }
.applink.tried { opacity: .5; }
.flipper { height: 176px; display: grid; place-items: center; }

/* ── lobby ── */
.code-block { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.code { display: flex; gap: .06em; font-stretch: 125%; font-weight: 900; font-size: var(--cs, 54px); line-height: 1.05; margin: 2px 0 0 -.03em; }
.code span { display: inline-block; animation: land .7s var(--spring) both; }
@keyframes land { from { opacity: 0; transform: translateY(.3em); filter: blur(8px); } }
.qr { flex: none; width: 100px; height: 100px; padding: 8px; border-radius: 16px; background: var(--text); box-shadow: 0 8px 30px -6px rgba(255,107,44,.42); transition: transform .25s var(--spring); }
.qr:active { transform: scale(.95); }
.qr.locked { opacity: .32; filter: grayscale(1); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-top: 10px; padding: 0 11px 0 9px; border-radius: 14px;
  background: var(--slab); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap;
  transition: color .3s, box-shadow .3s, transform .25s var(--spring);
}
.pill:active { transform: scale(.95); }
.pill.on { color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255,200,61,.45), 0 0 18px -5px rgba(255,200,61,.55); }
.pill:disabled { cursor: default; transform: none; }
.qr svg { width: 100%; height: 100%; }
.rule-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 64px; padding: 10px 18px;
  border-radius: 20px; background: var(--slab); box-shadow: inset 0 0 0 1px var(--line); text-align: left;
}
.rule-card .wide { font-size: 16px; margin-top: 4px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rule-card > span { min-width: 0; }
.rule-card svg { color: var(--faint); flex: none; }
.chips { display: flex; align-items: center; gap: 6px; }
.chips > svg { color: var(--faint); margin-right: 4px; flex: none; }
.chip { flex: 1; height: 34px; border-radius: 17px; background: var(--slab); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-weight: 700; font-size: 13px; white-space: nowrap; transition: background .25s, color .25s, transform .25s var(--spring); }
.chip.on { background: var(--text); color: var(--ground); box-shadow: none; }
.chip:active { transform: scale(.94); }
.waiting { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; font-size: 15px; font-weight: 600; color: var(--muted); text-align: center; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dc, var(--ember)); flex: none; animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(.85); box-shadow: 0 0 2px var(--dc, var(--ember)); } 50% { transform: scale(1.15); box-shadow: 0 0 9px 1px var(--dc, var(--ember)); } }
.link { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(245,241,234,.35); }

/* ── arming ── */
.arming h1 { font-size: 44px; text-align: center; white-space: nowrap; margin-left: calc(var(--g) * -.6) !important; margin-right: calc(var(--g) * -.6) !important; animation: slamIn .8s var(--spring) .05s both; }
@keyframes slamIn { from { transform: scale(1.25); filter: blur(12px); opacity: 0; } }
.count-ring { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.count-ring .ring { position: absolute; inset: 0; }
.count-ring .ring .arc { filter: drop-shadow(0 0 5px rgba(245,241,234,.8)); }
.count-ring b { font-stretch: 125%; font-weight: 900; font-size: 46px; line-height: 1; }
.count-ring b.tick { animation: tick .45s var(--spring); }
@keyframes tick { from { transform: scale(1.35); opacity: .3; } }
.hint { font-size: 13px; color: var(--faint); text-align: center; line-height: 1.4; }

/* ── live ── */
.live { background: #000; justify-content: center; align-items: center; }
.live .clock { font-stretch: 125%; font-weight: 900; font-size: 40px; color: rgba(255,255,255,.16); font-variant-numeric: tabular-nums; }
.live .left { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.1); margin-top: 6px; }
.bench { background: #000; align-items: center; text-align: center; }
.bench .clock { font-stretch: 125%; font-weight: 900; font-size: 48px; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 14px 0 22px; }

/* ── host grace ── */
.grace { align-items: center; text-align: center; }
.grace h1 { font-size: 30px; margin-top: 10px; }
.check { position: relative; width: 210px; height: 210px; margin: 34px auto; border-radius: 50%; display: grid; place-items: center; transition: transform .25s var(--spring); }
.check:active { transform: scale(.96); }
.check::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, #FFE9B0, #FFC83D 55%, #FF6B2C);
  box-shadow: 0 0 80px 6px rgba(255,200,61,.55), 0 0 30px rgba(255,200,61,.6); animation: glowPulse 1.6s ease-in-out infinite;
}
@keyframes glowPulse { 50% { box-shadow: 0 0 110px 14px rgba(255,200,61,.65), 0 0 36px rgba(255,200,61,.7); } }
.check .ring { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); }
.check .ring .arc { filter: drop-shadow(0 0 8px rgba(245,241,234,.8)); }
.check b { position: relative; font-stretch: 125%; font-weight: 900; font-size: 28px; line-height: 1.12; color: var(--ground); }
.picked { align-items: center; justify-content: center; text-align: center; }
.picked h1 { font-size: 30px; }

/* ── the loss ── */
.loss { color: #fff; padding-left: 0; padding-right: 0; }
.loss .top { display: flex; justify-content: space-between; padding: 0 var(--g); }
.loss .top .eyebrow, .moment-eyebrow { color: rgba(255,255,255,.6); }
.loss .who { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 0 var(--g); }
.bars { display: flex; align-items: center; gap: 4px; height: 30px; opacity: 0; transition: opacity .5s; animation: fadeIn .4s .4s forwards; }
.bars i { width: 3px; border-radius: 2px; background: #fff; height: 9px; }
.bars:not(.on) { --o: .35; }
@keyframes fadeIn { to { opacity: var(--o, 1); } }
.name-wrap { position: relative; width: 100%; display: grid; place-items: center; }
.shock { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); opacity: 0; animation: shock .9s .38s cubic-bezier(.1,.6,.3,1) both; pointer-events: none; }
@keyframes shock { 0% { transform: scale(.3); opacity: 0; } 2% { opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }
.big-name {
  width: 100%; font-stretch: 125%; font-weight: 900; font-size: 64px; line-height: .98; letter-spacing: -.01em; text-transform: uppercase;
  text-shadow: 0 0 30px rgba(255,138,61,.8), 0 0 60px rgba(255,90,60,.35); overflow-wrap: anywhere;
  animation: slam .95s .35s both;
}
@keyframes slam {
  0% { transform: scale(1.7); filter: blur(18px); opacity: 0; animation-timing-function: cubic-bezier(.25,.6,.3,1); }
  55% { transform: scale(.965); filter: blur(0); opacity: 1; animation-timing-function: ease-in-out; }
  78% { transform: scale(1.012); }
  100% { transform: scale(1); filter: blur(0); opacity: 1; }
}
.verb { font-size: 30px; font-weight: 500; letter-spacing: -.01em; line-height: 1.1; animation: rise .6s .55s var(--spring) both; }
.held-for { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums; animation: rise .6s .65s var(--spring) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.rule-moment {
  margin: 34px var(--g) 0; padding: 18px; border-radius: 22px; background: rgba(0,0,0,.36); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  animation: rise .7s .6s var(--spring) both;
}
.rule-moment .wide { font-size: 21px; line-height: 1.2; margin-top: 6px; overflow-wrap: anywhere; }
.clip { position: absolute !important; inset: 0; overflow: hidden; pointer-events: none; }
.lifted {
  position: absolute; left: 50%; bottom: 0; width: 320px; height: 440px; margin-left: -160px; border-radius: 54px;
  background: linear-gradient(#141116, #070608 50%);
  box-shadow: inset 0 0 0 1.5px rgba(255,185,139,.85), 0 0 40px 6px rgba(255,59,31,.9), 0 0 120px 40px rgba(224,21,58,.55);
  transform: translateY(560px) rotate(-5deg); transition: transform 1.1s cubic-bezier(.2,.9,.25,1.04); pointer-events: none;
}
.lifted.up { transform: translateY(330px) rotate(-5deg); }
.lifted.settled { transform: translateY(400px) rotate(-2deg); transition-duration: .9s; }

/* ── you picked up ── */
.youlost { background: var(--loss); color: #fff; overflow: hidden; }
.youlost .heat { position: absolute !important; inset: 0; pointer-events: none; background: radial-gradient(ellipse 140% 75% at 50% 100%, rgba(255,138,61,.9), rgba(255,138,61,0) 70%); animation: heat 1.4s ease-in-out infinite alternate; }
@keyframes heat { from { opacity: .55; } }
.youlost .vignette { position: absolute !important; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(224,21,58,0) 120px, rgba(224,21,58,.8) 520px); }
.youlost .phone { position: absolute !important; left: 50%; top: 50%; opacity: .9; animation: phoneIn .9s .15s var(--spring) both; }
@keyframes phoneIn { from { transform: translate(260px, -420px) rotate(40deg); } to { transform: translate(var(--px), var(--py)) rotate(14deg); } }
.youlost .phone { transform: translate(var(--px), var(--py)) rotate(14deg); }
.youlost .copy { display: flex; flex-direction: column; gap: 16px; animation: shown .6s var(--spring) both; }
@keyframes shown { from { opacity: 0; transform: scale(.92); } }
.youlost h1 { font-size: clamp(38px, 12.3vw, 48px); animation: shake .5s .1s; }
.youlost .rule { font-size: 22px; color: rgba(255,255,255,.9); line-height: 1.2; overflow-wrap: anywhere; }
.youlost .held { font-size: 16px; font-weight: 500; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }

/* ── the table held ── */
.held-screen { align-items: center; text-align: center; background: var(--ground); }
.held-screen .warm { position: absolute !important; inset: 0; background: radial-gradient(circle 420px at 50% 38%, rgba(255,200,61,.28), transparent); pointer-events: none; }
.held-screen .t1 { font-size: 18px; color: var(--muted); }
.held-screen .big { font-stretch: 125%; font-weight: 900; font-size: clamp(48px, 17vw, 66px); line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(255,200,61,.6); }
.held-screen .copy { display: flex; flex-direction: column; gap: 6px; animation: rise .7s .1s var(--spring) both; }

/* ── result actions ── */
.actions { width: 100%; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(40px); transition: opacity .6s, transform .7s var(--spring); pointer-events: none; }
.actions.on { opacity: 1; transform: none; pointer-events: auto; }
.actions .waiting { min-height: 50px; color: rgba(245,241,234,.78); }
.youlost .actions .waiting, .loss .actions .waiting { color: rgba(255,255,255,.85); }
.loss .actions { padding: 0 var(--g); }

/* ── closed / connecting ── */
.closed h1 { font-size: 30px; }

/* ── overlays ── */
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .35s; z-index: 20; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; max-height: 92vh; overflow-y: auto;
  padding: 26px var(--g) calc(var(--sb) + 20px); border-radius: 34px 34px 0 0; background: var(--lift);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 -20px 60px rgba(0,0,0,.6);
  transform: translateY(105%); transition: transform .5s cubic-bezier(.2,.9,.25,1);
  display: flex; flex-direction: column; gap: 16px;
}
.overlay-on .backdrop { opacity: 1; }
.overlay-on .sheet { transform: none; }
.sheet h2 { font-size: 30px; line-height: 1.05; }
.sheet .head { display: flex; align-items: center; justify-content: space-between; }
.sheet .head .btn-icon { width: 36px; height: 36px; }
.rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rule-opt {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 104px; padding: 16px;
  border-radius: 22px; background: var(--slab); box-shadow: inset 0 0 0 1px var(--line); text-align: left; transition: box-shadow .3s, transform .25s var(--spring);
}
.rule-opt svg { color: var(--muted); }
.rule-opt .wide { font-size: 15px; line-height: 1.2; }
.rule-opt.on { box-shadow: inset 0 0 0 2px var(--ember), 0 0 26px -4px rgba(255,107,44,.45); }
.rule-opt.on svg { color: var(--ember); }
.rule-opt:active { transform: scale(.97); }
.sheet .field { font-size: 18px; height: 56px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.bigcode { position: fixed; inset: 0; z-index: 22; background: var(--ground); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: calc(var(--st) + 20px) 40px calc(var(--sb) + 20px); opacity: 0; transition: opacity .35s; }
.overlay-on .bigcode { opacity: 1; }
.bigcode .qr-big { width: min(78vw, 46vh, 340px); aspect-ratio: 1; padding: 18px; border-radius: 30px; background: var(--text); box-shadow: 0 10px 60px -6px rgba(255,107,44,.55); }
.bigcode .code { --cs: 72px; }
.bigcode .close { position: absolute; top: calc(var(--st) + 12px); right: var(--g); }
.card-preview { width: min(100%, 300px); aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 22px; overflow: hidden; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line), 0 18px 50px rgba(0,0,0,.6); }
.card-preview img { width: 100%; height: 100%; display: block; }
.steps { display: flex; flex-direction: column; gap: 10px; counter-reset: s; }
.steps li { list-style: none; display: flex; gap: 12px; font-size: 15px; color: var(--muted); line-height: 1.4; }
.steps li::before { counter-increment: s; content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--slab); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 700; color: var(--text); }
.steps b { color: var(--text); font-weight: 700; }

.banner {
  position: fixed; left: 50%; top: calc(var(--st) + 8px); z-index: 30; display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 16px;
  border-radius: 18px; background: var(--slab); box-shadow: inset 0 0 0 1px rgba(255,200,61,.5), 0 0 22px rgba(255,200,61,.25);
  font-size: 13px; font-weight: 600; white-space: nowrap; transform: translate(-50%, -70px); opacity: 0; transition: transform .5s var(--spring), opacity .4s;
}
.banner.on { transform: translate(-50%, 0); opacity: 1; }
.spinner { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(245,241,234,.25); border-top-color: var(--text); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast {
  position: fixed; left: var(--g); right: var(--g); bottom: calc(var(--sb) + 18px); z-index: 31; margin: 0 auto; max-width: 420px; padding: 14px 18px;
  border-radius: 18px; background: rgba(17,17,22,.96); box-shadow: inset 0 0 0 1px var(--line-strong), 0 14px 40px rgba(0,0,0,.6);
  font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center; transform: translateY(30px); opacity: 0; transition: transform .45s var(--spring), opacity .35s; pointer-events: none;
}
.toast.on { transform: none; opacity: 1; }
.sim {
  position: fixed; left: 10px; top: 50%; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px;
  border-radius: 18px; background: rgba(17,17,22,.9); box-shadow: inset 0 0 0 1px var(--line-strong); transform: translateY(-50%);
  font-size: 9px; font-weight: 700; letter-spacing: .16em; color: var(--faint); text-transform: uppercase;
}
.sim .slab { margin: 6px 4px; }
.rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rotate:not(.off) { display: flex; position: fixed; inset: 0; z-index: 50; background: var(--ground); align-items: center; justify-content: center; flex-direction: column; gap: 16px; text-align: center; padding: 24px; }
}

/* Phones in a browser lose ~180 px to toolbars: tighten the dense screens. */
@media (max-height: 700px) {
  .screen { padding-top: calc(var(--st) + 6px); padding-bottom: calc(var(--sb) + 10px); }
  .btn-primary { height: 54px; font-size: 17px; }
  .stack { gap: 9px; }
  .rule-card { min-height: 54px; padding-top: 7px; padding-bottom: 7px; }
  .rule-card .wide { font-size: 15px; }
  .chip { height: 30px; }
  .lobby .code-block { margin-top: 4px !important; }
  .qr { width: 88px; height: 88px; padding: 7px; }
  .pill { margin-top: 6px; }
  .home .pitch { gap: 8px; }
  .home h1 { font-size: clamp(24px, 7.4vw, 28px); }
  .lede { font-size: 15px; }
  .actions { gap: 9px; }
  .rule-moment { margin-top: 22px; }
}
@media (min-width: 600px) {
  .screen { padding-left: calc(50vw - 215px); padding-right: calc(50vw - 215px); }
  .loss .top, .loss .who, .loss .actions { padding-left: calc(50vw - 215px); padding-right: calc(50vw - 215px); }
  .rule-moment { margin-left: calc(50vw - 215px); margin-right: calc(50vw - 215px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; }
  .ambient i { animation: none; }
}