/* ============================================================
   TRASH DASH — arcade-style dynamic token skin.
   CSS variables --primary / --primary-2 / --primary-dark /
   --primary-glow / --on-primary are set at runtime by script.js
   from the dominant color of the token logo.
   ============================================================ */

:root{
  --bg:        #05070a;
  --bg-2:      #0a0d12;
  --panel:     #0d1218;
  --panel-2:   #11171f;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);
  --ink:       #e9f5ec;
  --ink-dim:   #7d8a94;
  --danger:    #ff5b6c;

  /* Dynamic (script.js overrides at runtime) */
  --primary:      #22ff88;
  --primary-2:    #6dffb1;
  --primary-dark: #14b264;
  --primary-glow: rgba(34,255,136,.45);
  --on-primary:   #05070a;
  --accent:       var(--primary);

  --f-title: "Black Ops One", "Bebas Neue", Impact, sans-serif;
  --f-body:  "Space Mono", ui-monospace, Menlo, monospace;
  --f-hero:  "Bebas Neue", Impact, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--primary);color:var(--on-primary)}

/* ---- BODY STATES ---- */
body[data-state="loading"] #app{opacity:0;pointer-events:none}
body[data-state="ready"]   #loader{opacity:0;pointer-events:none}
body[data-state="ready"]   #app{opacity:1;pointer-events:auto}

/* ---- LOADER ---- */
.loader{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:radial-gradient(ellipse at center,#0a0f14,#000);transition:opacity .5s}
.loader-stage{width:min(520px,92vw)}
.crt-frame{padding:36px 30px;border:2px solid var(--primary);border-radius:14px;background:linear-gradient(180deg,#04080b,#000);position:relative;overflow:hidden;box-shadow:0 0 0 4px #000, 0 0 42px var(--primary-glow)}
.crt-scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 2px,transparent 2px 4px);mix-blend-mode:overlay}
.crt-scanlines.soft{opacity:.5}
.loader-title{font-family:var(--f-title);font-size:44px;color:var(--primary);letter-spacing:3px;text-shadow:0 0 22px var(--primary-glow)}
.loader-sub{margin-top:10px;color:var(--ink-dim);font-size:13px;letter-spacing:2px;text-transform:uppercase}
.loader-bar{margin-top:22px;height:14px;border:2px solid var(--primary);background:#000;border-radius:3px;overflow:hidden}
.loader-bar>span{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--primary) 0 8px,transparent 8px 12px);transition:width .3s}
.loader-hint{margin-top:14px;text-align:right;font-size:11px;color:var(--primary);letter-spacing:3px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---- APP FRAME ---- */
.app{opacity:0;transition:opacity .5s}
.bg-scan{position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 2px,transparent 2px 4px);z-index:1}
.bg-particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-particles i{position:absolute;width:3px;height:3px;background:var(--primary);border-radius:50%;opacity:.35;box-shadow:0 0 6px var(--primary-glow);animation:drift linear infinite}
@keyframes drift{from{transform:translateY(110vh)}to{transform:translateY(-10vh)}}

/* ---- MARQUEE ---- */
.marquee{position:relative;z-index:5;border-block:1px solid var(--primary);background:#000;overflow:hidden}
.marquee-track{display:flex;gap:28px;padding:8px 0;white-space:nowrap;animation:marq 32s linear infinite;color:var(--primary);font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase}
.marquee-track b{color:#fff}
.marquee-track .sep{color:var(--primary);opacity:.6}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- NAV ---- */
.nav{position:sticky;top:0;z-index:20;background:rgba(5,7,10,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1240px;margin:0 auto;padding:14px 22px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px}
.brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-title);letter-spacing:2px;color:#fff}
.brand-badge{width:38px;height:38px;border-radius:10px;background:var(--primary);display:grid;place-items:center;overflow:hidden;box-shadow:0 0 20px var(--primary-glow)}
.brand-logo{width:100%;height:100%;object-fit:cover}
.brand-name{font-size:18px;color:var(--primary);text-shadow:0 0 12px var(--primary-glow)}
.nav-menu{display:flex;justify-content:center;gap:26px;font-size:12px;letter-spacing:2px;color:var(--ink-dim)}
.nav-menu a:hover{color:var(--primary)}
.nav-cta{justify-self:end}

/* ---- BUTTONS ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;font-family:var(--f-title);font-size:14px;letter-spacing:2px;border-radius:6px;transition:transform .12s ease, box-shadow .2s ease;text-transform:uppercase;cursor:pointer;user-select:none}
.btn-sm{padding:8px 14px;font-size:12px}
.btn-block{display:flex;width:100%;padding:14px 22px}
.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:0 0 0 2px #000, 0 0 24px var(--primary-glow), inset 0 -4px 0 rgba(0,0,0,.25)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 0 2px #000, 0 0 36px var(--primary-glow), inset 0 -4px 0 rgba(0,0,0,.35)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.btn-ghost:hover{background:var(--primary);color:var(--on-primary)}

/* ---- HERO ---- */
.hero{position:relative;z-index:2;padding:60px 22px 40px}
.hero-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.15fr .95fr;gap:44px;align-items:center}
.hero-text .badge{display:inline-block;padding:5px 12px;border:1px solid var(--primary);color:var(--primary);font-size:11px;letter-spacing:3px;border-radius:3px}
.hero-text h1{font-family:var(--f-title);font-size:clamp(56px,9vw,120px);line-height:.92;margin:18px 0 16px;color:var(--primary);text-shadow:0 0 26px var(--primary-glow), 4px 4px 0 rgba(0,0,0,.6);letter-spacing:2px}
.glitch{position:relative}
.lead{font-size:15px;line-height:1.65;color:#c6d0d6;max-width:520px}
.accent-glow{color:var(--primary);text-shadow:0 0 14px var(--primary-glow)}
.accent-green{color:#3aff90}
.hero-cta{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px;max-width:520px}
.hero-stats div{padding:14px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--panel)}
.hs-num{font-family:var(--f-hero);font-size:36px;color:var(--primary);line-height:1;text-shadow:0 0 16px var(--primary-glow)}
.hs-lbl{font-size:10px;letter-spacing:2px;color:var(--ink-dim);margin-top:4px}

/* ---- CABINET ---- */
.cabinet{position:relative;border:2px solid var(--primary);border-radius:14px;background:linear-gradient(180deg,#0a0f14,#04080b);padding:14px;box-shadow:0 0 0 4px #000, 0 20px 60px var(--primary-glow)}
.cabinet-top{display:flex;align-items:center;gap:6px;padding:0 4px 10px;border-bottom:1px dashed var(--line-2);color:var(--ink-dim);font-size:11px;letter-spacing:2px}
.cab-led{width:8px;height:8px;border-radius:50%;background:#ff5f57}
.cab-led:nth-child(2){background:#febc2e}.cab-led:nth-child(3){background:#28c840}
.cab-title{margin-left:10px}
.cabinet-screen{position:relative;margin:12px 0;height:260px;border-radius:8px;background:radial-gradient(circle at center,#0f151a 0%,#02040a 90%);border:1px solid var(--line-2);overflow:hidden;display:grid;place-items:center;text-align:center}
.scanlines{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 2px,transparent 2px 4px);pointer-events:none;mix-blend-mode:overlay}
.cab-token{width:120px;height:120px;border-radius:50%;background:var(--panel-2);border:2px solid var(--primary);overflow:hidden;box-shadow:0 0 30px var(--primary-glow);position:relative;z-index:1}
.cab-token img{width:100%;height:100%;object-fit:cover}
.cab-symbol{font-family:var(--f-title);font-size:22px;color:var(--primary);margin-top:14px;letter-spacing:2px;z-index:1;text-shadow:0 0 12px var(--primary-glow)}
.cab-tag{font-size:10px;letter-spacing:3px;color:var(--ink-dim);margin-top:4px;z-index:1;animation:blink 1.4s steps(2) infinite}
.cabinet-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cab-stat{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px;text-align:center}
.cab-stat span{display:block;font-size:9px;letter-spacing:2px;color:var(--ink-dim)}
.cab-stat b{display:block;font-family:var(--f-title);font-size:16px;margin-top:4px;color:#fff}
.cab-ca{display:flex;gap:8px;align-items:center;margin-top:10px;padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:6px;font-size:12px}
.cab-ca span{font-size:10px;letter-spacing:2px;color:var(--ink-dim)}
.cab-ca code{flex:1;color:#fff;font-family:var(--f-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{padding:4px 10px;background:var(--primary);color:var(--on-primary);border-radius:4px;font-family:var(--f-title);font-size:10px;letter-spacing:1.5px}

/* ---- SECTIONS ---- */
.section{position:relative;z-index:2;padding:70px 22px;border-top:1px solid var(--line)}
.container{max-width:1240px;margin:0 auto}
.center{text-align:center}
.pill-badge{display:inline-block;padding:5px 12px;border:1px solid var(--primary);color:var(--primary);font-size:11px;letter-spacing:3px;border-radius:3px;margin-bottom:14px}
.section-title{font-family:var(--f-title);font-size:clamp(32px,5vw,52px);line-height:1;color:#fff;letter-spacing:2px;margin:0 0 12px}
.section-title .accent-glow{color:var(--primary)}
.section-lead{color:var(--ink-dim);max-width:640px;margin:0 auto}

/* ---- GAME SECTION ---- */
.game-section{padding-top:40px}
.rule-strip{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;background:var(--primary);color:var(--on-primary);border-radius:6px;font-family:var(--f-title);letter-spacing:2px;font-size:14px;box-shadow:0 0 24px var(--primary-glow);margin-bottom:20px;text-align:center;flex-wrap:wrap}
.rule-strip .accent-glow{color:var(--on-primary);text-shadow:none;text-decoration:underline}
.rs-icon{filter:drop-shadow(0 0 6px #000)}

.game-shell{display:grid;grid-template-columns:1fr 260px;gap:18px;align-items:start}
.game-stage{position:relative;border:2px solid var(--primary);border-radius:10px;background:#000;overflow:hidden;box-shadow:0 0 0 3px #000, 0 0 40px var(--primary-glow);aspect-ratio:720/440}
#game-canvas{display:block;width:100%;height:100%;background:linear-gradient(180deg,#02060a,#000)}
.game-overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,.35),rgba(0,0,0,.85))}
.go-title{font-family:var(--f-title);font-size:clamp(38px,6vw,66px);color:var(--primary);text-shadow:0 0 22px var(--primary-glow);letter-spacing:3px}
.go-sub{margin-top:8px;color:#c6d0d6;font-size:12px;letter-spacing:3px}
.go-hint{margin-top:22px;color:var(--primary);font-family:var(--f-title);letter-spacing:3px;font-size:16px;animation:blink 1s steps(2) infinite}
.go-emoji{margin-top:16px;font-size:56px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.game-overlay.hidden{display:none}
.game-emojis{position:absolute;bottom:6px;left:0;right:0;display:flex;justify-content:center;gap:18px;font-size:22px;opacity:.85;pointer-events:none}

.hud{display:flex;flex-direction:column;gap:12px}
.hud-card{border:1px solid var(--primary);border-radius:8px;padding:14px;background:linear-gradient(180deg,#0a0f14,#04080b);box-shadow:inset 0 0 24px rgba(0,0,0,.4)}
.hud-card.small{padding:10px 12px}
.hud-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line);font-size:11px;letter-spacing:2px;color:var(--ink-dim)}
.hud-row:last-child{border-bottom:0}
.hud-row b{font-family:var(--f-title);color:var(--primary);font-size:22px;text-shadow:0 0 10px var(--primary-glow)}
.lives{display:flex;gap:4px;font-size:20px}
.lives i{font-style:normal;filter:drop-shadow(0 0 6px var(--primary-glow))}
.lives i.dead{opacity:.15;filter:grayscale(1)}
.hud-inst{font-size:11px;color:var(--ink-dim);padding:3px 0;letter-spacing:1px}
.hud-inst b{color:var(--primary)}
.legend-row{display:flex;justify-content:space-between;font-size:11px;padding:4px 0;color:#d5dee4;letter-spacing:1px}
.legend-row.danger b{color:var(--danger)}
.legend-row b{color:var(--primary)}

.touchpad{display:none;margin-top:14px;grid-template-columns:1fr auto 1fr;gap:10px}
.tp{padding:16px;font-family:var(--f-title);font-size:22px;background:var(--panel);border:2px solid var(--primary);color:var(--primary);border-radius:8px;letter-spacing:2px}
.tp:active{background:var(--primary);color:var(--on-primary)}
.tp-start{font-size:14px;padding:16px 24px}

/* ---- HOW ---- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.feature.card{padding:22px;border:1px solid var(--primary);border-radius:10px;background:linear-gradient(180deg,#0a0f14,#04080b);text-align:left;transition:transform .2s, box-shadow .2s}
.feature.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px var(--primary-glow)}
.feature .fi{font-size:32px;margin-bottom:10px}
.feature h3{font-family:var(--f-title);letter-spacing:2px;color:var(--primary);margin:0 0 6px;font-size:16px}
.feature p{color:#c6d0d6;font-size:13px;line-height:1.6;margin:0}

/* ---- FAQ ---- */
.faq-section .faq{max-width:820px;margin:30px auto 0;text-align:left;display:flex;flex-direction:column;gap:10px}
.q{border:1px solid var(--line-2);border-radius:8px;background:var(--panel);overflow:hidden}
.q[open]{border-color:var(--primary);box-shadow:0 0 22px var(--primary-glow)}
.q summary{list-style:none;padding:14px 16px;cursor:pointer;font-family:var(--f-title);letter-spacing:1.5px;font-size:13px;display:flex;justify-content:space-between;color:#fff}
.q summary::-webkit-details-marker{display:none}
.q .chev{color:var(--primary);transition:transform .2s}
.q[open] .chev{transform:rotate(45deg)}
.q p{padding:0 16px 14px;margin:0;color:#c6d0d6;font-size:13px;line-height:1.7}

/* ---- FOOTER ---- */
.footer{position:relative;z-index:2;border-top:1px solid var(--primary);background:#000;padding:22px 22px 14px;margin-top:40px}
.footer-inner{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.footer-tag{color:var(--ink-dim);font-size:11px;letter-spacing:2px}
.footer-socials{display:flex;gap:16px;font-family:var(--f-title);color:var(--primary);letter-spacing:2px}
.footer-socials a:hover{text-shadow:0 0 12px var(--primary-glow)}
.footer-bottom{max-width:1240px;margin:14px auto 0;color:var(--ink-dim);font-size:10px;letter-spacing:2px;text-align:center}
.back-top{position:fixed;right:20px;bottom:20px;z-index:30;width:40px;height:40px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-weight:900;box-shadow:0 0 24px var(--primary-glow);opacity:0;transition:opacity .2s}
.back-top.show{opacity:1}

/* ---- REVEAL ---- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* ---- RESPONSIVE ---- */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr;gap:30px}
  .game-shell{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .nav-menu{display:none}
  .touchpad{display:grid}
}
@media (max-width: 560px){
  .hero{padding:36px 16px 20px}
  .section{padding:48px 16px}
  .hero-stats{grid-template-columns:repeat(3,1fr);gap:10px}
  .hs-num{font-size:26px}
  .rule-strip{font-size:12px;padding:12px 14px}
  .brand-name{font-size:14px}
  .nav-inner{grid-template-columns:auto 1fr;padding:12px 14px}
  .nav-cta .btn{padding:6px 10px;font-size:10px}
  .footer-inner{flex-direction:column;text-align:center}
}

/* ============================================================
   GATE (index.html) — arcade prompt screen
   ============================================================ */
.gate-body{margin:0;min-height:100vh;background:radial-gradient(ellipse at center,#0a0f14,#000);color:var(--ink);font-family:var(--f-body);display:grid;place-items:center;padding:22px;position:relative;overflow-x:hidden}
.gate-body::before{content:"";position:fixed;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 2px,transparent 2px 4px);pointer-events:none;z-index:1}
.gate-wrap{max-width:560px;width:100%;position:relative;z-index:2}
.gate-card{padding:36px 28px;border:2px solid var(--primary);border-radius:14px;background:linear-gradient(180deg,#0a0f14,#04080b);box-shadow:0 0 0 4px #000, 0 0 60px var(--primary-glow);text-align:center;position:relative;overflow:hidden}
.gate-card::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 2px,transparent 2px 4px);pointer-events:none;mix-blend-mode:overlay}
.gate-logo{width:70px;height:70px;margin:0 auto 14px;border-radius:14px;background:var(--primary);display:grid;place-items:center;font-family:var(--f-title);font-size:34px;color:var(--on-primary);box-shadow:0 0 30px var(--primary-glow);position:relative;z-index:1}
.gate-card h1{font-family:var(--f-title);font-size:34px;letter-spacing:2px;color:var(--primary);text-shadow:0 0 20px var(--primary-glow);margin:6px 0 6px;position:relative;z-index:1}
.gate-sub{color:var(--ink-dim);font-size:13px;line-height:1.6;margin:0 auto 22px;max-width:420px;position:relative;z-index:1}
.ca-form{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
#ca-input{padding:14px 14px;background:#000;color:#fff;border:2px solid var(--primary);border-radius:6px;font-family:var(--f-body);font-size:13px;outline:none;letter-spacing:.5px}
#ca-input:focus{box-shadow:0 0 22px var(--primary-glow)}
.ca-actions{display:flex;gap:10px}
.ca-actions .btn{flex:1}
.ca-error{color:var(--danger);font-size:12px;min-height:1em;text-align:left;letter-spacing:1px}
.gate-foot{margin-top:22px;font-size:11px;color:var(--ink-dim);letter-spacing:1.5px;position:relative;z-index:1}
.gate-foot code{background:#000;padding:2px 6px;border-radius:3px;color:var(--primary);border:1px solid var(--line-2)}

/* ==================== Touch controls ==================== */
/* Show large LEFT/RIGHT buttons under the canvas on mobile */
.touchpad{
  display:none;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}
.tp{
  padding:22px 16px;
  font-family:var(--f-title);
  font-size:22px;
  background:var(--panel);
  border:2px solid var(--primary);
  color:var(--primary);
  border-radius:10px;
  letter-spacing:3px;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.tp:active{ background:var(--primary); color:var(--on-primary); transform:translateY(1px); }
.tp-arrow{ font-size:24px; padding:26px 8px; }
.tp-start-alt{
  display:none;
  width:100%;
  margin-top:10px;
  font-size:16px;
  padding:14px;
}
@media (max-width: 900px){
  .touchpad{ display:grid; }
  .tp-start-alt{ display:block; }
}

/* ==================== Download modal ==================== */
.modal{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  padding:20px;
  animation:modalFade .25s ease-out;
}
.modal.hidden{ display:none; }
.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(2,4,8,.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.modal-card{
  position:relative;
  width:min(460px, 100%);
  background:var(--panel, #0b0f14);
  border:2px solid var(--primary);
  border-radius:18px;
  padding:34px 28px 24px;
  text-align:center;
  box-shadow:0 0 60px rgba(0,0,0,.6), 0 0 40px var(--primary);
  animation:modalPop .35s cubic-bezier(.2,1.2,.4,1);
}
.modal-emoji{ font-size:56px; line-height:1; margin-bottom:8px; }
.modal-card h2{
  font-family:var(--f-title);
  font-size:32px;
  letter-spacing:2px;
  margin:0 0 10px;
  color:var(--primary);
  text-shadow:0 0 20px var(--primary);
}
.modal-lead{
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin:0 0 6px;
}
.modal-sub{
  font-size:14px;
  color:#b7c1c9;
  line-height:1.45;
  margin:0 0 18px;
}
.modal-score{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 20px;
  border:2px dashed var(--primary);
  border-radius:10px;
  color:#c6d0d6;
  font-family:var(--f-title);
  font-size:14px;
  letter-spacing:3px;
  margin-bottom:16px;
}
.modal-score b{ color:var(--primary); font-size:22px; }
.modal .btn-block{ width:100%; margin-top:10px; }
.modal-close{
  position:absolute; top:10px; right:14px;
  background:transparent; border:0; color:#8a95a0;
  font-size:26px; cursor:pointer; line-height:1;
  padding:4px 8px; border-radius:6px;
}
.modal-close:hover{ color:#fff; background:rgba(255,255,255,.06); }

@keyframes modalFade { from { opacity:0; } to { opacity:1; } }
@keyframes modalPop  { from { transform:translateY(20px) scale(.94); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }

/* ==================== Leaderboard ==================== */
.leaderboard-section .lb-shell{
  display:grid; grid-template-columns:1fr 260px; gap:18px; margin-top:26px; align-items:start;
}
.lb-list{
  list-style:none; margin:0; padding:0;
  border:1px solid var(--primary); border-radius:10px;
  background:linear-gradient(180deg,#0a0f14,#04080b);
  box-shadow:inset 0 0 24px rgba(0,0,0,.4);
  overflow:hidden;
}
.lb-row{
  display:grid; grid-template-columns:60px 1fr auto 90px; gap:12px;
  align-items:center; padding:14px 18px;
  border-bottom:1px dashed var(--line);
  font-family:var(--f-body); font-size:13px; color:#c6d0d6; letter-spacing:1px;
}
.lb-row:last-child{ border-bottom:0; }
.lb-row:hover{ background:rgba(255,255,255,.03); }
.lb-rank{ font-family:var(--f-title); font-size:20px; color:var(--primary); text-shadow:0 0 10px var(--primary-glow); }
.lb-name{ font-family:var(--f-title); letter-spacing:2px; color:#fff; }
.lb-date{ font-size:11px; color:var(--ink-dim); letter-spacing:1.5px; }
.lb-score{
  text-align:right; font-family:var(--f-title); font-size:22px;
  color:var(--primary); text-shadow:0 0 10px var(--primary-glow);
}
.lb-empty{ padding:28px; text-align:center; color:var(--ink-dim); letter-spacing:2px; font-size:12px; }
.lb-side{ display:flex; flex-direction:column; gap:12px; }
.lb-side-card{
  border:1px solid var(--primary); border-radius:10px;
  background:linear-gradient(180deg,#0a0f14,#04080b);
  padding:16px 14px; text-align:center;
  box-shadow:inset 0 0 24px rgba(0,0,0,.4);
}
.lb-side-lbl{ font-size:10px; letter-spacing:3px; color:var(--ink-dim); }
.lb-side-num{ font-family:var(--f-title); font-size:38px; color:var(--primary); text-shadow:0 0 14px var(--primary-glow); line-height:1; margin-top:4px; }
.lb-side-sub{ font-size:10px; letter-spacing:2px; color:var(--ink-dim); margin-top:4px; }

/* ==================== Info grid ==================== */
.info-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:30px;
}
.info-card{ padding:22px; border:1px solid var(--primary); border-radius:10px;
  background:linear-gradient(180deg,#0a0f14,#04080b); text-align:left;
  transition:transform .2s, box-shadow .2s;
}
.info-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px var(--primary-glow); }
.info-card .fi{ font-size:28px; margin-bottom:8px; }
.info-card h3{ font-family:var(--f-title); letter-spacing:2px; color:var(--primary); margin:0 0 6px; font-size:14px; }
.info-card p{ color:#c6d0d6; font-size:12px; line-height:1.6; margin:0; }
.info-card code{ background:#000; padding:1px 5px; border-radius:3px; color:var(--primary); border:1px solid var(--line-2); font-size:11px; }

/* ==================== Community ==================== */
.community-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px; }
.community-card{
  padding:22px; border:1px solid var(--primary); border-radius:12px;
  background:linear-gradient(180deg,#0a0f14,#04080b);
  text-align:center; text-decoration:none; color:#c6d0d6;
  transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.community-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px var(--primary-glow); }
.community-card .cc-icon{
  width:56px; height:56px; border-radius:12px; display:grid; place-items:center;
  font-family:var(--f-title); font-size:22px; color:var(--on-primary);
  background:var(--primary); box-shadow:0 0 20px var(--primary-glow);
}
.community-card h3{ font-family:var(--f-title); letter-spacing:2px; color:#fff; margin:6px 0 0; font-size:15px; }
.community-card p{ font-size:12px; line-height:1.5; margin:0; }
.community-card .cc-cta{ margin-top:6px; color:var(--primary); font-family:var(--f-title); letter-spacing:2px; font-size:12px; }

/* ==================== Mouse hint on canvas ==================== */
#game-canvas{ cursor:crosshair; }
#game-canvas.mouse-on{ cursor:none; }

/* ==================== Responsive ==================== */
@media (max-width: 980px){
  .lb-shell{ grid-template-columns:1fr; }
  .info-grid{ grid-template-columns:repeat(2,1fr); }
  .community-grid{ grid-template-columns:1fr; }
  .lb-row{ grid-template-columns:44px 1fr 70px; }
  .lb-row .lb-date{ display:none; }
}
@media (max-width: 560px){
  .info-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   UPGRADE PACK — KOL leaderboard rows, live activity feed,
   disabled social state, demo badge. Purely additive.
   ============================================================ */

/* Demo pill inside section lead */
.demo-tag{
  display:inline-block; padding:1px 8px; margin:0 2px; border-radius:999px;
  background:rgba(255,255,255,.08); color:var(--primary); font-family:var(--f-title);
  letter-spacing:2px; font-size:10px; border:1px solid var(--primary);
}

/* Enhanced leaderboard rows (avatar + tag) */
.lb-row{
  display:grid !important;
  grid-template-columns: 46px 34px 1fr 66px 90px;
  gap:12px; align-items:center; padding:14px 16px;
}
.lb-row.is-you{
  background:linear-gradient(90deg, rgba(255,255,255,.02), var(--primary-glow));
  box-shadow: inset 3px 0 0 var(--primary);
}
.lb-avatar{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  background:var(--primary); color:var(--on-primary);
  font-family:var(--f-title); font-size:14px; letter-spacing:1px;
  box-shadow:0 0 12px var(--primary-glow);
}
.lb-who{ display:flex; flex-direction:column; min-width:0; }
.lb-who b{
  font-family:var(--f-title); letter-spacing:2px; color:#fff; font-size:14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lb-who em{ font-style:normal; font-size:11px; color:var(--ink-dim); letter-spacing:1.2px; }
.lb-tag{
  justify-self:end; font-family:var(--f-title); font-size:10px; letter-spacing:2px;
  color:var(--primary); padding:3px 8px; border:1px solid var(--primary);
  border-radius:999px; opacity:.85;
}
.lb-score{
  justify-self:end; font-family:var(--f-title); font-size:18px;
  color:var(--primary); text-shadow:0 0 12px var(--primary-glow);
}

/* Community grid → 4 cols (with website), collapses on mobile */
.community-grid{ grid-template-columns:repeat(4,1fr) !important; }

/* Disabled social state (community cards + footer icons) */
.community-card.is-disabled,
.footer-socials .soc.is-disabled{
  opacity:.32; filter:grayscale(1); cursor:not-allowed;
  pointer-events:auto; /* keep tooltip */
}
.community-card.is-disabled:hover{
  transform:none; box-shadow:none;
}
.footer-socials .soc{ transition:opacity .2s, transform .2s; }
.footer-socials .soc:not(.is-disabled):hover{ transform:translateY(-2px); }

/* Live activity ticker */
.activity-shell{
  margin-top:30px; border:1px solid var(--line-2); border-radius:14px;
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  padding:18px 20px; box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.activity-head{
  display:flex; align-items:center; gap:10px;
  padding-bottom:12px; margin-bottom:8px;
  border-bottom:1px dashed var(--line);
  font-family:var(--f-title); letter-spacing:2px; font-size:12px;
}
.activity-title{ color:#fff; }
.activity-meta{ margin-left:auto; color:var(--primary); text-shadow:0 0 10px var(--primary-glow); font-size:11px; }
.live-dot{
  width:9px; height:9px; border-radius:50%; background:#ff3355;
  box-shadow:0 0 10px #ff3355; animation:pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot{ 50%{ transform:scale(1.4); opacity:.6; } }
.activity-feed{ list-style:none; margin:0; padding:0; }
.af-row{
  display:grid; grid-template-columns: 32px 130px 1fr 80px;
  gap:10px; align-items:center; padding:10px 6px;
  border-bottom:1px solid var(--line);
  font-size:12px; color:var(--ink-dim); letter-spacing:.5px;
  animation:fade-in .5s ease;
}
.af-row:last-child{ border-bottom:0; }
.af-country{ font-size:18px; }
.af-user{ color:var(--primary); font-family:var(--f-title); letter-spacing:1.5px; font-size:12px; }
.af-text{ color:var(--ink); font-family:var(--f-body); }
.af-text b{ color:var(--primary); text-shadow:0 0 8px var(--primary-glow); }
.af-ago{ text-align:right; font-size:10px; letter-spacing:2px; text-transform:uppercase; }
@keyframes fade-in{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }

@media (max-width: 900px){
  .community-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .lb-row{ grid-template-columns: 36px 30px 1fr 70px !important; }
  .lb-row .lb-tag{ display:none; }
  .af-row{ grid-template-columns: 26px 100px 1fr; }
  .af-row .af-ago{ display:none; }
}
@media (max-width: 560px){
  .community-grid{ grid-template-columns:1fr !important; }
}

/* ============================================================
 * Reward panel + modal (device-aware — see /reward.js)
 * ============================================================ */
.reward-panel{
  margin-top:22px; padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.35));
  box-shadow:0 20px 60px -30px var(--primary-glow,rgba(0,0,0,.6));
  position:relative; overflow:hidden;
  transition:box-shadow .4s ease, border-color .4s ease;
}
.reward-panel[data-stage="unlocked"],
.reward-panel[data-stage="ready-to-claim"]{
  border-color:var(--primary,#22ff88);
  box-shadow:0 24px 80px -20px var(--primary-glow,rgba(34,255,136,.6));
}
.reward-panel.celebrate{ animation:reward-pulse .8s ease-out; }
@keyframes reward-pulse{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.015); }
  100%{ transform:scale(1); }
}
.reward-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.reward-chip{
  font-family:"Space Mono",monospace; font-size:11px; letter-spacing:2px;
  padding:4px 8px; border-radius:4px;
  background:var(--primary,#22ff88); color:var(--on-primary,#000); font-weight:800;
}
.reward-label{ font-size:13px; color:#c6d0d6; letter-spacing:.5px; }
.reward-progress{
  height:6px; border-radius:6px; background:rgba(255,255,255,.06);
  overflow:hidden; position:relative;
}
.reward-progress-fill{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--primary-dark,#1a9c5a), var(--primary,#22ff88));
  transition:width .35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 12px var(--primary-glow,rgba(34,255,136,.6));
}
.reward-meta{
  display:flex; justify-content:space-between; margin-top:8px;
  font-family:"Space Mono",monospace; font-size:11px; letter-spacing:1.5px; color:#7d8a94;
}
.reward-meta b{ color:var(--primary,#22ff88); }
.reward-actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.reward-actions .btn{ flex:1; min-width:160px; }
.claim-btn.is-ready{ animation:claim-glow 1.6s ease-in-out infinite; }
@keyframes claim-glow{
  0%,100%{ box-shadow:0 0 0 0 var(--primary-glow,rgba(34,255,136,.5)); }
  50%    { box-shadow:0 0 24px 4px var(--primary-glow,rgba(34,255,136,.6)); }
}
.reward-hint{
  margin-top:10px; font-size:12px; color:#c6d0d6; display:flex; align-items:center; gap:8px;
}
.reward-hint .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--primary,#22ff88); animation:dot-pulse 1s infinite;
}
@keyframes dot-pulse{ 0%,100%{opacity:.4;} 50%{opacity:1;} }
.reward-nudge{
  display:block; margin-top:12px; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.04); color:#c6d0d6; font-size:13px;
  text-decoration:none; border:1px dashed rgba(255,255,255,.14);
  transition:background .2s;
}
.reward-nudge:hover{ background:rgba(255,255,255,.08); color:#fff; }
.reward-nudge b{ color:var(--primary,#22ff88); }

/* Only expose the "play full experience" nudge to non-desktop */
html[data-device="desktop"] .reward-nudge{ display:none !important; }

/* Confetti burst on celebrate */
.reward-confetti{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.reward-confetti i{
  position:absolute; top:-8px; left:var(--x,50%);
  width:8px; height:12px; background:var(--primary,#22ff88);
  transform:rotate(var(--r,0deg));
  animation:confetti-fall var(--d,900ms) cubic-bezier(.2,.6,.3,1) forwards;
  opacity:.9;
}
.reward-confetti i:nth-child(3n){ background:var(--primary-2,#7dffbc); }
.reward-confetti i:nth-child(3n+1){ background:#fff; }
@keyframes confetti-fall{
  to{ transform:translateY(340px) rotate(720deg); opacity:0; }
}

/* Reward modal */
.reward-modal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.reward-modal[hidden]{ display:none; }
.reward-modal-backdrop{
  position:absolute; inset:0; background:rgba(4,6,10,.7);
  backdrop-filter:blur(6px);
  opacity:0; transition:opacity .22s ease;
}
.reward-modal.is-open .reward-modal-backdrop{ opacity:1; }
.reward-modal-card{
  position:relative; max-width:440px; width:100%;
  background:#0b0f14; border:1px solid var(--primary,#22ff88);
  border-radius:18px; padding:32px 24px 24px; text-align:center;
  box-shadow:0 30px 100px -20px var(--primary-glow,rgba(34,255,136,.55));
  transform:translateY(12px) scale(.96); opacity:0;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.1), opacity .22s ease;
}
.reward-modal.is-open .reward-modal-card{ transform:none; opacity:1; }
.reward-modal-close{
  position:absolute; top:10px; right:10px;
  background:transparent; border:0; color:#7d8a94; font-size:18px;
  cursor:pointer; padding:8px; line-height:1;
}
.reward-modal-close:hover{ color:#fff; }
.reward-modal-emoji{ font-size:56px; line-height:1; margin-bottom:8px; animation:emoji-pop .5s cubic-bezier(.3,1.4,.4,1); }
@keyframes emoji-pop{ 0%{transform:scale(.4) rotate(-20deg); opacity:0;} 100%{transform:none; opacity:1;} }
.reward-modal-card h2{
  margin:6px 0 14px; font-family:"Black Ops One",sans-serif;
  color:var(--primary,#22ff88); letter-spacing:3px; font-size:28px;
}
.reward-modal-score{ margin:0 auto 12px; }
.reward-modal-score b{
  display:block; font-family:"Bebas Neue",sans-serif; font-size:64px; line-height:1;
  color:#fff; letter-spacing:2px;
}
.reward-modal-score span{
  font-family:"Space Mono",monospace; font-size:12px; letter-spacing:3px; color:#7d8a94;
}
.reward-modal-msg{ color:#c6d0d6; font-size:14px; margin:8px 0 18px; }

/* Small helper */
.btn-block{ width:100%; }
.btn-sm{ font-size:12px; padding:8px 12px; }

/* Device-scoped hints on the panel */
.reward-panel[data-stage="claimed"] .reward-progress-fill{ background:var(--primary,#22ff88); }
.reward-panel[data-stage="downloading"] .reward-chip{ background:#febc2e; color:#000; }
.reward-panel[data-stage="ready-to-claim"] .reward-chip{ background:var(--primary,#22ff88); }
.reward-panel[data-stage="claimed"] .reward-chip{ background:#7d8a94; color:#000; }

@media (max-width:640px){
  .reward-actions .btn{ min-width:100%; }
  .reward-modal-card{ padding:24px 18px; }
  .reward-modal-score b{ font-size:52px; }
}

/* ============================================================
   FINAL PASS — reward panel under game, mobile leaderboard,
   claim-button emphasis rule, mobile responsiveness.
   ============================================================ */

/* Reward panel is now a grid child of .game-shell — it fills the space
   directly under the canvas, sitting beside START / RESET in the sidebar
   column. No forced centring, no big top margin. */
.game-section .reward-panel{
  margin:0; padding:18px 20px;
  border:2px solid var(--primary,#22ff88);
  border-radius:12px;
  background:linear-gradient(180deg,#0a0f14,#04080b);
  box-shadow:0 0 0 3px #000, 0 12px 40px var(--primary-glow, rgba(34,255,136,.22));
  align-self:start;
}
.game-section .reward-panel .reward-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.game-section .reward-panel .reward-actions .btn{ font-size:14px; padding:14px 18px; flex:1 1 180px; }

/* Only the CLAIM button carries the accent emphasis. Regular reward text
   uses normal theme colors so the panel doesn't turn into a wall of yellow. */
.reward-panel .reward-label,
.reward-panel .reward-meta,
.reward-panel .reward-meta b{ color:#c6d0d6 !important; }
.reward-panel .reward-chip{ background:#1a222a; color:#c6d0d6; }
.reward-panel[data-stage="unlocked"] .reward-chip,
.reward-panel[data-stage="claimed"]  .reward-chip{
  background:var(--primary,#22ff88); color:var(--on-primary,#000);
}
.reward-panel .claim-btn:not(:disabled){
  background:var(--primary,#22ff88); color:var(--on-primary,#000);
  box-shadow:0 0 24px var(--primary-glow, rgba(34,255,136,.5));
}
.reward-panel .claim-btn:disabled{
  background:#2a323a; color:#6b7580; cursor:not-allowed; box-shadow:none;
  border-color:#3a424a;
}
.reward-nudge{
  display:inline-block; margin-top:12px; padding:10px 14px;
  border:1px dashed var(--primary,#22ff88); border-radius:8px;
  color:#c6d0d6; font-size:12px; letter-spacing:1.4px;
  text-align:center; width:100%;
}
.reward-nudge b{ color:var(--primary,#22ff88); }
html[data-device="desktop"] .reward-nudge{ display:none !important; }

/* Mobile leaderboard rework — collapse table into stacked cards on phones */
@media (max-width: 560px){
  .leaderboard-section .lb-shell{ grid-template-columns:1fr; gap:12px; }
  .lb-list{ border-radius:8px; }
  .lb-row{
    grid-template-columns: 32px 30px 1fr auto !important;
    padding:10px 12px; gap:8px; font-size:12px;
  }
  .lb-row .lb-tag{ display:none; }
  .lb-who b{ font-size:12px; }
  .lb-who em{ font-size:10px; }
  .lb-score{ font-size:16px; }
  .lb-side{ flex-direction:row; gap:8px; }
  .lb-side-card{ flex:1; padding:10px 8px; }
  .lb-side-num{ font-size:26px; }
  .lb-side-card:last-child{ flex-basis:100%; }
}

/* Touch-friendly buttons + no overflow on mobile */
@media (max-width: 640px){
  .container{ padding-left:16px; padding-right:16px; }
  .btn{ min-height:44px; }
  .reward-actions{ flex-direction:column; }
  .reward-actions .btn{ width:100%; }
  .game-shell{ overflow:hidden; }
  #game-canvas{ max-width:100%; height:auto; }
  .cabinet-foot{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hero-inner{ gap:24px; }
  .marquee{ font-size:11px; }
  .modal-card, .reward-modal-card{ width:calc(100% - 32px); max-width:100%; }
}

/* ============================================================
   Final polish v3 — bigger primary CTA in mobile reward modal
   ============================================================ */
.reward-modal .btn-lg{
  font-size:16px; padding:16px 20px; letter-spacing:2px;
  box-shadow:0 10px 30px -8px var(--primary-glow, rgba(34,255,136,.55));
}
/* Guarantee the modal fully covers the viewport (iOS Safari) */
.reward-modal{ position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; }
.reward-modal-backdrop{ background:rgba(4,6,10,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }

/* ============================================================
 * v4 — Device-aware popup + mobile console polish
 * ============================================================ */

/* Mobile modal choice groups (primary "Download on PC" vs "Claim Points") */
.reward-modal-choice{ margin-top:12px; }
.reward-modal-choice small{
  display:block; margin-top:6px; color:#9aa5ad; font-size:11px;
  letter-spacing:.8px; text-align:center;
}
.reward-modal-choice.primary .btn{
  box-shadow:0 0 32px var(--primary-glow, rgba(34,255,136,.55));
}

/* Mobile: hide the desktop HUD start/reset buttons — they double up with
   the touchpad START/RESET below the canvas. Keeps the mobile view feeling
   like an actual mobile game rather than a compressed desktop UI. */
@media (max-width: 900px){
  .hud > #btn-start,
  .hud > #btn-reset{ display:none !important; }
}

/* Touchpad START + RESET row */
.tp-actions{
  display:none;
  grid-template-columns:1fr auto;
  gap:10px;
  margin-top:10px;
}
.tp-reset-alt{
  font-size:14px; padding:14px 18px; letter-spacing:2px;
}
@media (max-width: 900px){
  .tp-actions{ display:grid; }
  /* the standalone .tp-start-alt (no wrapper) is now unused; hide any
     stray legacy instance so we never show duplicates */
  #tp-start.tp-start-alt:not(.tp-actions #tp-start){ display:none; }
}

/* Reward panel — feel like the "result panel" of the arcade cabinet:
   share the game-shell border colour, sit directly beneath it with no
   perceived gap on mobile. */
.game-section .reward-panel{
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}
@media (max-width: 900px){
  .game-section .reward-panel{
    margin-top:12px;
    padding:16px 14px;
  }
  .game-section .reward-panel .reward-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .game-section .reward-panel .reward-actions .btn{
    width:100%;
  }
}

/* Popup fully covers the viewport, blocks background interaction,
   and always centres — even on very small phones. */
.reward-modal{
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  z-index:10000;
}
.reward-modal .reward-modal-card{
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 420px){
  .reward-modal .reward-modal-card{ padding:22px 16px 20px; }
  .reward-modal-emoji{ font-size:44px; }
  .reward-modal-card h2{ font-size:20px; letter-spacing:1.5px; }
  .reward-modal-score b{ font-size:44px; }
}

/* ============================================================
 * v5 — Fuse reward panel into game console (no visible gap)
 * ============================================================ */
.game-section .game-shell{ row-gap:0; }

.game-section .game-stage{
  border-bottom:0 !important;
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}

.game-section .reward-panel{
  margin-top:0 !important;
  border:2px solid var(--primary,#22ff88);
  border-top:1px solid rgba(255,255,255,.10);
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
  background:linear-gradient(180deg,#04080b,#02060a);
  box-shadow:0 0 0 3px #000, 0 20px 60px -10px var(--primary-glow, rgba(34,255,136,.28));
  /* the outer 3px black glow ring on .game-stage must continue seamlessly */
  position:relative;
}
/* Subtle inner divider — dashed accent that reads as "console seam" */
.game-section .reward-panel::before{
  content:"";
  position:absolute; left:14px; right:14px; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--primary, #22ff88), transparent);
  opacity:.35; pointer-events:none;
}

/* On mobile, HUD moves below stage. Keep reward flush to whatever is
   above it (stage on desktop, HUD on mobile).  */
@media (max-width: 900px){
  .game-section .game-shell{ display:flex; flex-direction:column; }
  .game-section .reward-panel{
    order:2;
    border-top:1px dashed rgba(255,255,255,.14);
  }
  .game-section .hud{ order:1; }
  .game-section .game-stage{ order:0; }
}

/* ============================================================
 * v5 — Modal text safety (no overflow / letter-spacing clip)
 * ============================================================ */
.reward-modal-card h2{
  word-break:break-word;
  overflow-wrap:anywhere;
  max-width:100%;
}
.reward-modal-card{
  overflow-wrap:anywhere;
}
@media (max-width:480px){
  .reward-modal-card h2{
    font-size:22px !important;
    letter-spacing:1.5px !important;
    padding:0 4px;
  }
  .reward-modal-msg{ font-size:13px; }
}

/* ============================================================
 * v5 — Desktop popup: KEEP PLAYING as a refined secondary action
 * ============================================================ */
#reward-modal-desktop .btn-ghost{
  margin-top:10px;
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  color:#c6d0d6;
  letter-spacing:2px;
}
#reward-modal-desktop .btn-ghost:hover{
  border-color:var(--primary,#22ff88);
  color:#fff;
}

/* ============================================================
 * v6 — Premium mobile "Download on PC" popup
 * ============================================================ */
.mobile-pc-card{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(34,255,136,.14), transparent 55%),
    linear-gradient(180deg,#0b1218 0%, #05090d 100%);
  border:1px solid var(--primary,#22ff88);
  box-shadow:
    0 0 0 1px rgba(34,255,136,.10),
    0 40px 120px -30px var(--primary-glow, rgba(34,255,136,.55));
  padding-top:38px;
}
.mobile-pc-badge{
  display:inline-block;
  font-family:"Space Mono",monospace;
  font-size:10px; letter-spacing:3px; font-weight:800;
  padding:5px 10px; border-radius:999px;
  background:rgba(34,255,136,.12);
  color:var(--primary,#22ff88);
  border:1px solid rgba(34,255,136,.35);
  margin-bottom:10px;
}
.mobile-pc-perks{
  list-style:none; padding:12px 14px; margin:0 0 18px;
  display:grid; gap:8px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  text-align:left;
}
.mobile-pc-perks li{
  display:flex; align-items:center; gap:10px;
  font-family:"Space Mono",monospace;
  font-size:12px; letter-spacing:1px; color:#c6d0d6;
}
.mobile-pc-perks li span{
  width:26px; height:26px; display:grid; place-items:center;
  background:rgba(34,255,136,.12); border-radius:8px; font-size:14px;
  flex:0 0 26px;
}
.mobile-pc-cta{
  font-size:17px !important; padding:18px 22px !important;
  letter-spacing:2.5px !important;
  background:linear-gradient(180deg, var(--primary,#22ff88), var(--primary-dark,#1a9c5a)) !important;
  color:#000 !important;
  border:0 !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4) inset,
    0 12px 40px -6px var(--primary-glow, rgba(34,255,136,.7)) !important;
  animation:mobile-pc-glow 2.4s ease-in-out infinite;
}
@keyframes mobile-pc-glow{
  0%,100%{ box-shadow:0 0 0 1px rgba(0,0,0,.4) inset, 0 10px 30px -8px var(--primary-glow, rgba(34,255,136,.55)); }
  50%    { box-shadow:0 0 0 1px rgba(0,0,0,.4) inset, 0 16px 48px -6px var(--primary-glow, rgba(34,255,136,.85)); }
}
.mobile-pc-secondary{
  margin-top:12px;
  font-size:12px !important; letter-spacing:2px !important;
  color:#8a949c !important;
  background:transparent !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
.mobile-pc-secondary:hover{ color:#fff !important; }
.reward-modal-mobile .reward-modal-choice small{
  color:#8a949c;
}

@media (max-width:420px){
  .mobile-pc-card{ padding-top:34px; }
  .mobile-pc-cta{ font-size:15px !important; padding:16px 18px !important; letter-spacing:2px !important; }
  .mobile-pc-perks li{ font-size:11px; }
}

/* ============================================================
 * v7 — FINAL polish: desktop gap fix, mobile reorder, alignment
 * ============================================================ */

/* --- Desktop: reward panel spans the full width of the console shell
   so there is no empty area beside the sidebar and no gap below the
   stage when the HUD column is taller than the canvas. --- */
@media (min-width: 901px){
  .game-section .game-shell{
    grid-template-columns: 1fr 260px;
    align-items: stretch;
    row-gap: 0;
    column-gap: 18px;
  }
  .game-section .reward-panel{
    grid-column: 1 / -1;
    margin-top: 14px;
    /* Restore its own rounded corners now that it no longer needs to fuse
       flush to the stage (the stage keeps its full rounded frame). */
    border: 1px solid var(--primary, #22ff88) !important;
    border-radius: 12px !important;
  }
  .game-section .reward-panel::before{ display:none; }
  .game-section .game-stage{
    border-bottom: 2px solid var(--primary) !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
  }
  /* HUD column: buttons align to the bottom so START/RESET meet the same
     baseline as the canvas edge — no dangling empty box under RESET. */
  .game-section .hud{ height: 100%; }
  .game-section .hud > #btn-start{ margin-top: auto; }
}

/* --- Mobile: flatten .game-shell so touchpad + tp-actions can be
   reordered together with the stage, HUD and reward panel via `order`. --- */
@media (max-width: 900px){
  .game-section .container{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .game-section .rule-strip{ order: -1; }
  .game-section .game-shell{
    display: contents;
  }

  .game-section .game-stage{ order: 1; margin: 0; }
  .game-section .touchpad{ order: 2; margin: 0; }
  .game-section .tp-actions{ order: 3; margin: 0; }
  .game-section .hud{ order: 4; width: 100%; }
  .game-section .reward-panel{ order: 5; width: 100%; margin: 0; }
  .game-section #download-modal{ order: 99; }

  /* HUD cards fill the full width — no dead space on the right. */
  .game-section .hud,
  .game-section .hud-card{ width: 100%; box-sizing: border-box; }
  .game-section .hud-card{ padding: 12px 14px; }

  /* Touch controls: two equal buttons */
  .game-section .touchpad{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .game-section .touchpad .tp{
    min-height: 52px; font-size: 14px; letter-spacing: 2px;
    width: 100%;
  }
  .game-section .tp-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .game-section .tp-actions .tp{ width: 100%; min-height: 48px; }

  /* Reward panel keeps its own rounded frame on mobile — no forced flush
     since it now sits below the touchpad/HUD, not the stage. */
  .game-section .reward-panel{
    border: 1px solid var(--primary, #22ff88) !important;
    border-radius: 12px !important;
    padding: 16px 14px !important;
  }
  .game-section .reward-panel::before{ display: none; }
  .game-section .game-stage{
    border-radius: 10px !important;
    border: 2px solid var(--primary) !important;
  }
}

/* --- Container / spacing consistency across the page --- */
.game-section .rule-strip{ margin-bottom: 16px; }
.game-section .container > * + *{ /* fallback for non-flattened cases */ }

/* Congratulations / modal title never overflow */
.modal-card h2,
.reward-modal-card h2{
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  max-width: 100%;
  padding: 0 6px;
}
@media (max-width: 420px){
  .modal-card h2{ font-size: 22px !important; letter-spacing: 1px !important; }
  .modal-card{ padding: 22px 16px !important; }
}

/* ============================================================
 * v8 FINAL — Popup overflow safety + compact mobile popup
 * ============================================================ */

/* Card can never exceed viewport, and scrolls internally as a last resort */
.reward-modal .reward-modal-card,
.modal .modal-card{
  max-height: calc(100dvh - 24px);
  max-width: min(440px, calc(100vw - 24px));
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  overscroll-behavior: contain;
}

/* Every direct child stays within the card */
.reward-modal .reward-modal-card > *,
.modal .modal-card > *{
  max-width: 100%;
  box-sizing: border-box;
}

/* Buttons never blow out horizontally */
.reward-modal .btn,
.modal .btn{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-word;
}

/* Compact the mobile PC popup so it fits without scrolling on ~640-720px tall phones */
@media (max-width: 480px){
  .mobile-pc-card{ padding: 30px 16px 18px !important; }
  .mobile-pc-card .reward-modal-emoji{ font-size: 38px; margin-bottom: 4px; }
  .mobile-pc-card h2{ font-size: 18px !important; letter-spacing: 1.2px !important; margin: 4px 0 8px; }
  .mobile-pc-card .reward-modal-score b{ font-size: 38px; }
  .mobile-pc-card .reward-modal-score span{ font-size: 10px; letter-spacing: 2px; }
  .mobile-pc-card .reward-modal-msg{ font-size: 12px; margin: 6px 0 10px; }
  .mobile-pc-perks{ padding: 8px 10px; gap: 6px; margin: 0 0 12px; }
  .mobile-pc-perks li{ font-size: 11px; }
  .mobile-pc-perks li span{ width: 22px; height: 22px; flex: 0 0 22px; font-size: 12px; }
  .mobile-pc-cta{ font-size: 14px !important; padding: 14px 16px !important; letter-spacing: 1.5px !important; }
  .mobile-pc-secondary{ padding: 10px 14px !important; }
  .reward-modal-choice{ margin-top: 8px; }
  .reward-modal-choice small{ font-size: 10px; margin-top: 4px; }
}

/* Very short screens — hide the perks list to guarantee no-scroll fit */
@media (max-height: 640px){
  .mobile-pc-perks{ display: none !important; }
  .mobile-pc-card{ padding-top: 26px !important; }
  .mobile-pc-card .reward-modal-emoji{ font-size: 34px; }
  .mobile-pc-card h2{ font-size: 17px !important; }
  .mobile-pc-card .reward-modal-score b{ font-size: 34px; }
}

/* Extra-small (<360px) — tighten desktop popup too */
@media (max-width: 360px){
  .reward-modal .reward-modal-card{ padding: 20px 14px 16px; }
  .reward-modal-card h2{ font-size: 17px !important; letter-spacing: 1px !important; }
  .reward-modal-emoji{ font-size: 36px; }
  .reward-modal-score b{ font-size: 36px !important; }
}

/* Ensure the mobile popup never sits under a browser chrome/safe-area */
.reward-modal{
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Device gating (belt-and-suspenders on top of reward.js checks) —
   never show the desktop-only popup to phones, and vice versa. */
html[data-device="mobile"]  #reward-modal-desktop,
html[data-device="tablet"]  #reward-modal-desktop { display: none !important; }
html[data-device="desktop"] #reward-modal-mobile  { display: none !important; }

/* ============================================================
 * v8.2 — Desktop overflow safety: prevent .game-stage from
 * blowing the grid track wider than the container. The stage
 * uses aspect-ratio 720/440; when the HUD column is taller
 * than the canvas AND the grid stretches rows, the stage
 * expands vertically, its aspect-ratio pushes the width past
 * the 1fr track, and the sidebar/rule-strip get shoved off
 * screen. Lock the track and the stage so this cannot happen.
 * ============================================================ */
@media (min-width: 901px){
  .game-section .game-shell{
    grid-template-columns: minmax(0, 1fr) 260px !important;
    align-items: start !important;
  }
  .game-section .game-stage{
    min-width: 0;
    max-width: 100%;
    width: 100%;
    height: auto;
    align-self: start;
  }
  .game-section .hud{
    min-width: 0;
    height: auto !important;
  }
  .game-section .reward-panel{
    min-width: 0;
    max-width: 100%;
  }
}
/* Global belt-and-suspenders: never let the shell overflow its container. */
.game-section .container{ min-width: 0; overflow-x: clip; }
.game-shell{ min-width: 0; max-width: 100%; }

/* ============================================================
 * v8.3 — Reward panel sits directly under the stage; HUD column
 * spans full height beside them. Kills the vertical dead-space
 * that appeared between the canvas and the reward panel when
 * the HUD (with legend + START/RESET) was taller than the stage.
 * ============================================================ */
@media (min-width: 901px){
  .game-section .game-shell{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 260px !important;
    grid-template-areas: "stage hud" "reward hud" !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
    align-items: start !important;
  }
  .game-section .game-shell > .game-stage   { grid-area: stage; border-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
  .game-section .game-shell > .hud          { grid-area: hud; align-self: stretch; }
  .game-section .game-shell > .reward-panel {
    grid-area: reward;
    margin: 0 !important;
    border: 2px solid var(--primary, #22ff88) !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  }
}