/* ============================================================
   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; }
}