/* =============================================================================
   SCAMOSPHERE — styles. Mobile-first (phone frame, max 480px), dark neon, tactile.
   Palette:  bg #0a0a12 · money green #39ff7a · heat red #ff2e4d · gold #ffd23f
============================================================================= */
:root{
  /* Palette — research-tuned. Green (#39ff7a) is the "trust-greenwash" money lie (kept as hero);
     red is urgency/heat (kept); deeper black + warmer cheap-flex gold; Telegram-blue + slip-orange
     are the two satirical accents (join-the-channel / betting-slip). Arc runs green→gold→red. */
  --bg:#080810; --panel:#12121c; --panel-2:#1c1c2a; --ink:#f4f1ea; --muted:#8a8a9c;
  --green:#39ff7a; --green-dim:#1f7d45; --bookie:#027b5b;
  --red:#ff2e4d; --red-soft:#ff5470; --maroon:#7a0b1d;
  --gold:#ffc21f; --gold-hi:#fff4c2;
  --tg:#29b6f6; --slip:#ff8a1f;
  --line:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.5);
  /* Type identity */
  --font-display:'Anton','Arial Narrow',system-ui,sans-serif;  /* logo + every big number */
  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Space Mono',ui-monospace,'Courier New',monospace; /* receipts + fine print */
  --r:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-ui);
  background:radial-gradient(120% 100% at 50% 0%,#15101d 0%,var(--bg) 55%);
  color:var(--ink); min-height:100vh; min-height:100dvh;
  display:flex; justify-content:center; overscroll-behavior:none;
}

/* ===== real brand logos (assets/*.svg) ================================== */
.brand-ico{height:26px; width:auto; max-width:118px; object-fit:contain; display:inline-block; vertical-align:middle}
.t-emoji-img{height:17px; max-width:104px; display:block}      /* in a tactic card's top row */
.si-emoji .brand-ico{height:24px; max-width:92px}              /* in a shop flex row */

/* ===== shared satire motifs ============================================= */
/* Holographic "VERIFIED" foil — the visual lie of legitimacy. Reserve to ONE per screen. */
.holo{
  background:
    linear-gradient(115deg, transparent 18%, #29b6f6 42%, #b06cff 52%, #ffd76b 62%, transparent 82%),
    conic-gradient(from 45deg, #ffe08a, #7ef0ff, #d6a0ff, #ffe08a);
  background-size:240% 240%; background-blend-mode:screen;
  animation:shimmer 6s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.holo{animation:none}}
/* Chrome / foil-gold text — the cheap-luxury "greed" headline treatment. */
.chrome{
  background:linear-gradient(180deg,#fff4c2,#ffc21f 42%,#b3760f 55%,#ffc21f 70%,#fff4c2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
}
#app{
  width:100%; max-width:480px; min-height:100vh; min-height:100dvh;
  position:relative; background:var(--bg); box-shadow:var(--shadow);
  overflow-x:clip; /* clip (not hidden) so it doesn't become a scroll container & break the sticky HUD */
}

/* ── CRT / broadcast overlay: horizontal scanlines + a slow rolling refresh bar.
   Fixed to the phone frame (the window scrolls underneath, so the "screen" effect stays put),
   pointer-events:none so it never blocks taps. Sits above content incl. the sticky HUD, but
   below the mute button (z70) and flash toast (z80). Same look Roadman Run draws on its
   canvas — done in CSS here since SCAMOSPHERE is a DOM game. */
#app::after{   /* the scanlines */
  content:''; position:fixed; inset:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px; pointer-events:none; z-index:64;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}
#app::before{   /* the soft refresh bar drifting down the screen */
  content:''; position:fixed; top:0; left:50%; transform:translateX(-50%) translateY(-90px);
  width:100%; max-width:480px; height:90px; pointer-events:none; z-index:65;
  background:linear-gradient(to bottom, transparent, rgba(180,255,210,.045) 45%, rgba(255,255,255,.06) 50%, rgba(180,255,210,.045) 55%, transparent);
  animation:crtRoll 7s linear infinite;
}
@keyframes crtRoll{ to{ transform:translateX(-50%) translateY(100vh) } }
@media(prefers-reduced-motion:reduce){ #app::before{ display:none } }

/* screens */
.screen{display:none; padding:16px 16px 40px; animation:fade .25s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* buttons */
.btn{
  border:none; border-radius:14px; font-weight:800; font-size:16px; cursor:pointer;
  padding:14px 18px; color:#06120a; background:#2a2a3a; color:var(--ink);
  transition:transform .08s ease, filter .15s ease; font-family:inherit;
}
.btn:active{transform:scale(.97)}
/* Glossy, chunky CTAs — gloss laid on thick enough to read as parody (the hard 0 5px 0 edge
   gives that cheap mobile-game-ad bounce). Green = money/go, gold = greed, red = consequence. */
.btn.primary{background:linear-gradient(180deg,#9bffc6,#4dffa0 45%,var(--green)); color:#04210f; text-transform:uppercase; letter-spacing:.03em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 5px 0 #149048, 0 14px 22px rgba(57,255,122,.3)}
.btn.primary:active{transform:translateY(3px) scale(.99); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 #149048, 0 8px 14px rgba(57,255,122,.25)}
.btn.greed{background:linear-gradient(180deg,var(--gold-hi),var(--gold) 45%,var(--slip)); color:#3a2400; text-transform:uppercase; letter-spacing:.03em;
  box-shadow:inset 0 1px 0 #fffbe6, 0 5px 0 #b3760f, 0 14px 22px rgba(255,138,31,.32)}
.btn.greed:active{transform:translateY(3px) scale(.99); box-shadow:inset 0 1px 0 #fffbe6, 0 2px 0 #b3760f, 0 8px 14px rgba(255,138,31,.28)}
.btn.danger{background:linear-gradient(180deg,#ff7d93,#ff5470 45%,var(--red)); color:#fff; text-transform:uppercase; letter-spacing:.03em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 5px 0 #a3122a, 0 14px 22px rgba(255,46,77,.3)}
.btn.danger:active{transform:translateY(3px) scale(.99); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 #a3122a, 0 8px 14px rgba(255,46,77,.25)}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--muted)}
.btn.small{padding:9px 14px; font-size:14px; border-radius:11px}
.btn.tiny{padding:6px; font-size:12px; font-weight:600}
.btn.wide{width:100%}
.btn.big{padding:18px; font-size:19px}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* ============ INTRO ============ */
.intro{padding:24px 6px; text-align:center}
.intro-badge{display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(255,210,63,.3); padding:5px 12px; border-radius:999px; margin-top:24px}
.logo{font-family:var(--font-display); font-size:88px; line-height:.82; margin:20px 0 8px; letter-spacing:0; text-transform:uppercase;
  background:linear-gradient(180deg,#fff,#7affb0); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 46px rgba(57,255,122,.32)}
.logo span{color:transparent; background:linear-gradient(180deg,var(--green),#0f8f48); -webkit-background-clip:text; background-clip:text}
.tagline{color:var(--muted); font-size:16px; line-height:1.5; margin:8px 14px 22px}
.tagline b{color:var(--ink)}
.intro-rules{list-style:none; padding:0; margin:0 4px 16px; text-align:left}
.intro-rules li{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; margin-bottom:9px; font-size:14px; color:#dfe2ef}
.intro-rules b{color:var(--green)}

/* how-to-play panel */
.howto{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:15px 16px 17px; margin:0 4px 24px; text-align:left}
.howto-title{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  font-weight:800; text-align:center; margin-bottom:13px}
.howto-loop{list-style:none; counter-reset:step; padding:0; margin:0 0 13px}
.howto-loop li{counter-increment:step; position:relative; padding:6px 0 6px 38px;
  font-size:14px; color:#dfe2ef; line-height:1.4}
.howto-loop li::before{content:counter(step); position:absolute; left:0; top:4px;
  width:25px; height:25px; border-radius:50%; background:linear-gradient(180deg,#4dffa0,var(--green));
  color:#04210f; font-weight:900; font-size:13px; display:flex; align-items:center; justify-content:center}
.howto-loop b{color:#fff}
.howto-goals{display:flex; flex-direction:column; gap:8px}
.goal{display:flex; gap:9px; align-items:baseline; font-size:13.5px; padding:9px 12px;
  border-radius:11px; line-height:1.35; color:#dfe2ef}
.goal span{font-weight:900; font-size:11px; letter-spacing:.06em; flex:none}
.goal b{color:#fff}
.goal.win{background:rgba(57,255,122,.1); border:1px solid rgba(57,255,122,.3)}
.goal.win span{color:var(--green)}
.goal.lose{background:rgba(255,46,77,.1); border:1px solid rgba(255,46,77,.3)}
.goal.lose span{color:var(--red-soft)}
#start-btn{margin-bottom:10px}
.disclaimer{font-size:11px; color:#666b82; line-height:1.5; margin:22px 8px 0}
.disclaimer b{color:#8a90a8}
.disclaimer a{color:#8a90a8; text-decoration:underline}

/* intro mode picker: Daily Scam vs Free play */
.mode-block{display:flex; flex-direction:column; gap:10px; margin:0 4px 4px}
.mode-note{font-size:12px; color:var(--muted); line-height:1.5; margin:-3px 6px 2px}
.mode-stats{font-size:13px; font-weight:700; color:var(--gold); letter-spacing:.02em; margin-top:6px}
.mode-done{background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:13px 16px;
  font-size:14px; line-height:1.55; color:#dfe2ef; margin-bottom:4px}
.mode-done b{color:var(--green); font-family:var(--font-display); font-size:21px; vertical-align:-1px}
/* daily badge on the ending hero */
.daily-chip{display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em;
  color:var(--gold); border:1px solid rgba(255,194,31,.4); border-radius:6px; padding:3px 11px; margin-bottom:14px}

/* ============ HUD ============ */
#hud{position:sticky; top:0; z-index:20; background:linear-gradient(180deg,#0a0a12 70%,rgba(10,10,18,0));
  padding:8px 2px 12px; margin:-16px -16px 8px; padding-left:16px; padding-right:16px}
.hud-row{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:10px; padding-right:34px}
/* sound toggle — top-right of the phone frame */
.mute-btn{position:absolute; top:10px; right:11px; z-index:70; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line); background:rgba(12,12,20,.72); color:var(--ink); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; line-height:1}
.mute-btn:active{transform:scale(.9)}
.hud-cash-wrap label, .hud-foll{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.fakechip{display:inline-block; font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:.05em;
  color:var(--gold); border:1px solid rgba(255,194,31,.4); border-radius:5px; padding:1px 5px; margin-left:5px;
  vertical-align:middle; text-transform:uppercase; line-height:1.5}
.hud-cash{font-family:var(--font-display); font-size:46px; color:var(--green); line-height:.92; letter-spacing:.01em;
  text-shadow:0 0 22px rgba(57,255,122,.4); font-variant-numeric:tabular-nums}
.hud-meta{text-align:right}
.hud-day{font-size:15px; font-weight:800; letter-spacing:.05em}
/* heat */
.heat-bar, .lambo-bar{position:relative; height:22px; border-radius:11px; background:var(--panel-2);
  overflow:hidden; border:1px solid var(--line); margin-top:7px}
.heat-fill{height:100%; width:0; background:linear-gradient(90deg,#ffb020,var(--red)); transition:width .6s cubic-bezier(.2,.8,.2,1)}
.heat-bar.hot .heat-fill{box-shadow:0 0 16px var(--red)}
.heat-bar.critical{animation:pulseRed .8s ease-in-out infinite}
@keyframes pulseRed{0%,100%{box-shadow:0 0 0 rgba(255,46,77,0)}50%{box-shadow:0 0 22px rgba(255,46,77,.8)}}
.lambo-fill{height:100%; width:0; background:linear-gradient(90deg,#7a5cff,var(--gold)); transition:width .6s ease}
.heat-label,.lambo-label{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* ============ STAGE ============ */
.stage{min-height:240px}
.stage-title{font-size:16px; font-weight:800; margin:6px 2px 14px; color:#eaecf6; line-height:1.35}

/* tactic grid */
.tactic-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tactic{display:flex; flex-direction:column; gap:6px; text-align:left; align-items:stretch;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px; color:var(--ink);
  cursor:pointer; min-height:104px; transition:transform .08s, border-color .15s, background .15s; font-family:inherit}
.tactic:not(.locked):active{transform:scale(.97)}
.tactic:not(.locked):hover{border-color:rgba(57,255,122,.4); background:#181826}
.tactic.locked{opacity:.5; cursor:not-allowed}
.t-top{display:flex; justify-content:space-between; align-items:center}
.t-emoji{font-size:26px}
.cost{font-size:12px; font-weight:800; color:var(--red-soft)}
.cost.free{color:var(--green)}
.t-label{font-size:14px; font-weight:800; line-height:1.2}
.t-tech{font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:auto}

/* tactic preview (the bait + the lesson) */
.preview{animation:fade .2s ease}
.phone-post{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px; margin-bottom:14px}
.pp-head{display:flex; gap:10px; align-items:center; margin-bottom:10px}
.pp-avatar{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#39ff7a,#7a5cff);
  display:flex; align-items:center; justify-content:center; font-size:20px; flex:none}
.pp-name{font-weight:800; font-size:15px}
.pp-tick{color:var(--tg)}
.pp-handle{font-family:var(--font-mono); font-size:11px; color:var(--muted)}
.holo-badge{margin-left:auto; align-self:flex-start; font-size:9.5px; font-weight:800; letter-spacing:.04em;
  color:#0a0a12; padding:3px 9px; border-radius:999px; white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 2px 8px rgba(41,182,246,.3)}
.pp-body{font-size:16px; line-height:1.45; margin-bottom:12px}
.pp-actions{font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:10px}
.pp-fake{color:var(--green); font-weight:700}
.pp-ig{height:12px; width:12px; vertical-align:-2px; margin-right:3px}
.pp-flex{margin:2px 0 12px; padding:16px; border-radius:12px; min-height:66px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center}
.pp-flexlogo{height:36px; max-width:78%; object-fit:contain; filter:drop-shadow(0 0 16px rgba(255,194,31,.22))}
.pp-flex.pp-scene{padding:0; min-height:0; overflow:hidden; background:none; border-color:rgba(255,255,255,.1)}
.scene-svg{display:block; width:100%; height:auto; border-radius:11px}
.lesson{background:linear-gradient(180deg,rgba(255,46,77,.12),rgba(255,46,77,.05));
  border:1px solid rgba(255,46,77,.35); border-radius:14px; padding:13px 14px; margin-bottom:16px}
.lesson-tag{font-size:12px; font-weight:900; letter-spacing:.06em; color:var(--red-soft); margin-bottom:5px}
.lesson-body{font-size:14px; line-height:1.5; color:#f0e3e6}
.preview-actions{display:flex; gap:10px; margin-top:6px}
.preview-actions .btn{flex:1}

/* result / payday */
.result{animation:fade .2s ease}
.result-head{font-size:15px; font-weight:700; margin-bottom:12px; color:#dfe2ef}
.result-head b{color:#fff}
.result-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:14px}
.rg{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:11px; text-align:center}
.rg span{display:block; font-family:var(--font-display); font-size:27px; line-height:1; font-variant-numeric:tabular-nums}
.rg label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.rg.loss span{color:var(--red-soft)}
.payout{background:linear-gradient(180deg,rgba(57,255,122,.14),rgba(57,255,122,.04));
  border:1px solid rgba(57,255,122,.4); border-radius:16px; padding:16px; text-align:center; margin-bottom:14px}
.payout label{font-size:12px; color:#aef3c9; text-transform:uppercase; letter-spacing:.05em}
.payout-num{font-family:var(--font-display); font-size:62px; color:var(--green); text-shadow:0 0 32px rgba(57,255,122,.55);
  font-variant-numeric:tabular-nums; line-height:1.04; letter-spacing:.01em}
.heat-pop{background:rgba(255,46,77,.1); border:1px solid rgba(255,46,77,.3); border-radius:12px;
  padding:11px 13px; font-size:13.5px; line-height:1.45; margin-bottom:14px; color:#ffd7dd}
.heat-pop b{color:var(--red-soft)}

/* roguelite daily market event banner */
.day-event{display:flex; align-items:center; gap:11px; background:var(--panel); border:1px solid var(--line);
  border-left:4px solid var(--muted); border-radius:13px; padding:11px 13px; margin-bottom:14px; animation:fade .25s ease}
.day-event.good{border-left-color:var(--green); background:linear-gradient(90deg,rgba(57,255,122,.09),var(--panel) 62%)}
.day-event.bad{border-left-color:var(--red); background:linear-gradient(90deg,rgba(255,46,77,.09),var(--panel) 62%)}
.day-event.wild{border-left-color:var(--gold); background:linear-gradient(90deg,rgba(255,194,31,.1),var(--panel) 62%)}
.de-emoji{font-size:24px; flex:none}
.de-body{display:flex; flex-direction:column; gap:3px; min-width:0}
.de-body b{font-size:13.5px; color:#eef0f7; line-height:1.35; font-weight:700}
.de-tag{font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--muted)}
.day-event.good .de-tag{color:var(--green)}
.day-event.bad .de-tag{color:var(--red-soft)}
.day-event.wild .de-tag{color:var(--gold)}
.day-event.sm .de-body{flex-direction:row; flex-wrap:wrap; gap:6px; align-items:baseline; font-size:13px; color:#cfd3e3}

/* mid-run moral dilemma */
.dilemma{animation:fade .25s ease; padding:4px 2px}
.dil-tag{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--red-soft); font-weight:900; text-align:center; margin-bottom:14px}
.dil-setup{font-size:17.5px; line-height:1.5; color:#eef0f7; background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--red); border-radius:14px; padding:16px; margin-bottom:18px}
.dil-setup.faint{opacity:.55; font-size:14.5px; border-left-color:var(--line); margin-bottom:14px}
.dil-actions{display:flex; flex-direction:column; gap:10px}
.dil-actions .btn{text-align:center; line-height:1.3; padding:15px 16px; text-transform:none; letter-spacing:0; font-size:15px}
.dil-outcome{font-size:17px; line-height:1.55; padding:16px; border-radius:14px; margin-bottom:12px}
.dil-outcome.exploit{background:rgba(255,46,77,.1); border:1px solid rgba(255,46,77,.35); color:#ffd7dd}
.dil-outcome.spare{background:rgba(57,255,122,.08); border:1px solid rgba(57,255,122,.3); color:#cdeed8}
.dil-effect{font-size:13px; text-align:center; margin-bottom:16px; font-weight:700; letter-spacing:.02em}
.dil-effect.exploit{color:var(--red-soft)}
.dil-effect.spare{color:var(--green)}

/* shop */
.shop-list{display:flex; flex-direction:column; gap:9px; margin-bottom:14px}
.shop-item{display:flex; gap:11px; align-items:center; background:var(--panel); border:1px solid var(--line);
  border-radius:13px; padding:11px}
.shop-item.poor{opacity:.55}
.si-emoji{font-size:26px; min-width:30px; flex:none; display:flex; align-items:center; justify-content:center}
.si-text{flex:1; min-width:0}
.si-name{font-weight:800; font-size:14px}
.si-desc{font-size:12px; color:var(--muted); line-height:1.35}
.si-cost{font-weight:900; font-size:14px; color:var(--gold); white-space:nowrap}
.shop-item .btn{flex:none}

/* feed */
.feed-wrap{margin-top:20px; border-top:1px solid var(--line); padding-top:12px}
.feed-head{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.feed{display:flex; flex-direction:column; gap:6px}
.feed-item{font-size:12.5px; line-height:1.4; padding:7px 11px; border-radius:9px; background:var(--panel);
  border-left:3px solid var(--line); animation:slideIn .3s ease}
@keyframes slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.feed-item.cash{border-left-color:var(--green); color:#cdeed8}
.feed-item.heat{border-left-color:var(--red); color:#ffd7dd}
.feed-item.ruin{border-left-color:var(--red-soft); color:#ffc2cc}
.feed-item.signup{border-left-color:#7a5cff; color:#d8d2ff}
.feed-item.spend{border-left-color:var(--gold); color:#ffeec2}
.feed-item.sys{border-left-color:var(--muted)}

/* money rain */
.rain{position:fixed; inset:0; pointer-events:none; z-index:60; max-width:480px; left:50%; transform:translateX(-50%)}
.note{position:absolute; top:-40px; animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(220deg); opacity:.2}}

/* flash toast */
.flash{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#fff; color:#0a0a12; font-weight:800; font-size:14px; padding:11px 18px; border-radius:999px;
  opacity:0; transition:.25s; z-index:80; pointer-events:none; max-width:90%}
.flash.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ============ ENDING ============ */
#screen-ending{padding:0 16px 60px}
.end-hero{text-align:center; padding:34px 14px 26px; border-radius:0 0 24px 24px; margin:0 -16px 8px;
  background:radial-gradient(120% 100% at 50% 0,rgba(57,255,122,.18),transparent 70%)}
.end-hero.lose{background:radial-gradient(120% 100% at 50% 0,rgba(255,46,77,.2),transparent 70%)}
.end-kicker{font-size:54px; margin-bottom:4px}
.end-title{font-family:var(--font-display); font-size:54px; line-height:.92; margin:0 0 10px; letter-spacing:.01em; text-transform:uppercase}
.end-hero.win .end-title{color:var(--green)}
.end-hero.lose .end-title{color:var(--red-soft)}
.end-line{color:var(--muted); font-size:15px; line-height:1.5; margin:0 6px 14px}
.end-myscore{font-size:18px; color:#dfe2ef}
.end-myscore b{font-family:var(--font-display); font-size:34px; letter-spacing:.01em; vertical-align:-2px}

/* the scammer-persona identity beat */
.persona{text-align:center; padding:18px 12px 4px; margin-top:6px; animation:fade .4s ease}
.persona-label{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.persona-name{font-family:var(--font-display); font-size:42px; line-height:1.0; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap}
.persona-emoji{font-size:34px}
.persona-tag{font-style:italic; font-size:16.5px; color:#eef0f7; margin:12px 6px 0; line-height:1.4}
.persona-desc{font-size:13.5px; color:var(--muted); line-height:1.55; margin:11px 14px 0; max-width:420px; margin-left:auto; margin-right:auto}

/* the flip */
.end-flip{margin-top:22px; animation:fade .4s ease}
.flip-rule{height:2px; background:linear-gradient(90deg,transparent,var(--red),transparent); margin:0 0 18px}
.flip-lead{text-align:center; font-size:17px; font-weight:700; line-height:1.5; color:#fff; margin:0 4px 18px}
.other-stats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:8px}
.os{background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:13px 6px; text-align:center}
.os span{display:block; font-family:var(--font-display); font-size:25px; line-height:1; font-variant-numeric:tabular-nums}
.os label{font-size:10.5px; color:var(--muted); line-height:1.3; display:block; margin-top:3px}
.os.bad span{color:var(--red-soft)}

/* ledger */
.ledger{margin-top:20px}
.ledger-title{font-size:12px; letter-spacing:.1em; color:var(--red-soft); font-weight:900; margin-bottom:10px; text-align:center}
.ledger-row{display:grid; grid-template-columns:auto auto 1fr; gap:8px; align-items:baseline;
  padding:10px 12px; border-bottom:1px solid var(--line); font-size:13px}
.lr-name{font-weight:800; color:#fff; white-space:nowrap}
.lr-lost{font-family:var(--font-mono); color:var(--red-soft); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.lr-line{color:var(--muted); font-size:12.5px; text-align:right; line-height:1.3}
.ledger-more{text-align:center; color:var(--muted); font-size:13px; padding:14px 0; font-style:italic}

/* end-screen dilemma callback */
.met{margin-top:24px; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px}
.met-title{font-size:13px; letter-spacing:.08em; color:var(--gold); font-weight:900; text-align:center; margin-bottom:12px}
.met-row{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:10px 4px;
  border-bottom:1px solid var(--line); font-size:14px}
.met-name{font-weight:800; color:#fff; white-space:nowrap}
.met-line{color:var(--muted); text-align:right; font-size:13px; line-height:1.35}
.met-row.exploit .met-line{color:var(--red-soft)}
.met-row.spare .met-line{color:var(--green)}
.met-sum{text-align:center; font-size:13.5px; color:#cfd3e3; line-height:1.5; margin-top:13px; font-style:italic}

/* reveal — the payload */
.reveal{margin-top:26px; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:18px}
.reveal-title{font-size:18px; font-weight:900; color:var(--green); letter-spacing:.01em; text-align:center}
.reveal-sub{font-size:13px; color:var(--muted); text-align:center; margin:6px 0 16px; line-height:1.5}
.reveal-item{border-top:1px solid var(--line); padding:13px 2px}
.reveal-item:first-of-type{border-top:none}
.ri-head{font-size:15px; margin-bottom:5px}
.ri-head b{color:#fff}
.ri-tell{font-size:13.5px; line-height:1.5; color:#cfd3e3}
.ri-key{color:var(--gold); font-weight:800}
.reveal-extra{margin-top:16px; border-top:1px dashed var(--line); padding-top:14px}
.re-title{font-size:12px; color:var(--muted); margin-bottom:10px; line-height:1.4}
.re-item{font-size:12.5px; color:#8d93a8; line-height:1.5; margin-bottom:8px}
.re-item b{color:#b9bed0}

/* share card */
.card-host{margin-top:24px; text-align:center}
#share-canvas{width:100%; max-width:360px; border-radius:18px; border:1px solid var(--line); box-shadow:var(--shadow)}
.closing{text-align:center; margin:22px 0 6px}
.closing-line{font-size:22px; font-weight:900; color:var(--green); text-shadow:0 0 24px rgba(57,255,122,.35)}
.end-actions{display:flex; flex-direction:column; gap:10px; margin-top:18px}

/* global leaderboard */
.lb{margin-top:24px; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px}
.intro-lb:empty{display:none}
.intro-lb{margin-top:12px; background:var(--panel-2)}
.lb-title{font-size:15px; font-weight:900; color:var(--gold); text-align:center; letter-spacing:.01em; margin-bottom:14px}
.lb-submit{display:flex; gap:8px}
.lb-name{flex:1; min-width:0; background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  color:var(--ink); font-family:var(--font-ui); font-size:15px; font-weight:600; padding:12px 14px; outline:none}
.lb-name:focus{border-color:rgba(57,255,122,.5)}
.lb-submit .btn{flex:none; white-space:nowrap}
.lb-note{font-size:12px; color:var(--muted); line-height:1.5; margin-top:10px; text-align:center}
.lb-rank{text-align:center; font-size:15px; color:#dfe2ef; margin-bottom:12px}
.lb-rank b{font-family:var(--font-display); color:var(--green); font-size:22px; vertical-align:-1px}
.lb-list{display:flex; flex-direction:column; max-height:340px; overflow-y:auto; border-top:1px solid var(--line)}
.lb-list.lb-loading{padding:14px 0; text-align:center; color:var(--muted); font-size:13px; max-height:none; overflow:visible}
.lb-row{display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:8px;
  padding:9px 6px; border-bottom:1px solid var(--line); font-size:14px}
.lb-pos{font-weight:800; color:var(--muted); font-size:13px; text-align:center}
.lb-nm{font-weight:700; color:#eef0f7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lb-dead{opacity:.7; font-size:12px}
.lb-ca{font-family:var(--font-display); font-size:18px; color:var(--green); font-variant-numeric:tabular-nums; letter-spacing:.01em}
.lb-row.me{background:rgba(57,255,122,.1); border-radius:8px}
.lb-row.me .lb-nm{color:var(--green)}

/* achievements screen */
#screen-ach{padding:18px 16px 50px}
.ach-head{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.ach-h2{font-family:var(--font-display); font-size:30px; letter-spacing:.01em; text-transform:uppercase}
.ach-back{flex:none}
.ach-prog-label{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:20px 2px 8px}
.ach-prog-label b{color:var(--green); font-family:var(--font-display); font-size:18px; vertical-align:-1px}
.ach-progress{height:10px; border-radius:6px; background:var(--panel-2); border:1px solid var(--line); overflow:hidden}
.ach-progress-fill{height:100%; background:linear-gradient(90deg,#4dffa0,var(--green)); transition:width .5s ease}
.ach-done{margin-top:10px; font-size:14px; color:var(--green); font-weight:700; text-align:center}
.ach-hint{margin-top:8px; font-size:12.5px; color:var(--muted); text-align:center; line-height:1.5}
.tells-grid{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.tell-card{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--green); border-radius:11px; padding:11px 13px}
.tell-card.locked{border-left-color:var(--line); opacity:.6}
.tell-tech{font-size:13px; font-weight:800; color:#eef0f7; margin-bottom:4px; letter-spacing:.02em}
.tell-card.locked .tell-tech{color:var(--muted)}
.tell-tell{font-size:13px; color:#cfd3e3; line-height:1.5}
.tell-card.locked .tell-tell{color:#6a6e82; font-style:italic}
.ach-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.ach-badge{background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:14px 12px; text-align:center}
.ach-badge.locked{opacity:.5}
.ach-emoji{font-size:30px; line-height:1; margin-bottom:8px}
.ach-name{font-size:13.5px; font-weight:800; color:#fff; margin-bottom:4px}
.ach-badge.locked .ach-name{color:var(--muted)}
.ach-desc{font-size:11.5px; color:var(--muted); line-height:1.4}
/* end-screen achievement reveal */
.ach-end{margin-top:22px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:15px}
.ach-end-tells{font-size:15px; text-align:center; color:#dfe2ef}
.ach-end-tells b{color:var(--green); font-family:var(--font-display); font-size:19px; vertical-align:-1px}
.ach-end-title{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:900; text-align:center; margin:14px 0 8px}
.ach-end-row{display:flex; align-items:center; gap:10px; font-size:13.5px; color:#dfe2ef; padding:6px 4px; line-height:1.4}
.ach-end-emoji{font-size:24px; flex:none}
.ach-end-row b{color:#fff}
.ach-end-view{margin-top:14px}

/* desktop niceties */
@media(min-width:520px){
  body{padding:24px 0}
  #app{border-radius:28px; min-height:auto; border:1px solid var(--line)}
  .screen{border-radius:28px}
}