:root{
  --bg:#080611;
  --bg2:#0e0a1f;
  --panel:#120d24;
  --panel2:#1a1233;
  --cyan:#00f0ff;
  --magenta:#ff2bd6;
  --yellow:#ffe600;
  --green:#39ff14;
  --red:#ff3b5c;
  --ink:#e8e4ff;
  --dim:#7c74a8;
  --border:#2a2150;
  --shadow:0 0 0 2px #000, 4px 4px 0 0 #000;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:
    radial-gradient(120% 80% at 50% 0%, #160f33 0%, var(--bg) 60%) fixed,
    var(--bg);
  color:var(--ink);
  font-family:"VT323",monospace;
  font-size:20px;
  overflow-x:hidden;
  -webkit-font-smoothing:none;
  image-rendering:pixelated;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
.hidden{display:none !important;}
.blink{animation:blink 1s steps(2,start) infinite;}
@keyframes blink{to{visibility:hidden;}}

/* CRT scanline overlay (thin) */
.crt-overlay{
  pointer-events:none;position:fixed;inset:0;z-index:9000;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.10) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;
}
.crt-overlay::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,0.45) 100%);
}

h1,h2,h3,.pixel{font-family:"Press Start 2P",monospace;}
h1{font-size:18px;line-height:1.5;}
h2{font-size:13px;line-height:1.6;}
h3{font-size:10px;line-height:1.6;}

/* Layout */
.app{min-height:100vh;padding:60px 14px 86px;max-width:680px;margin:0 auto;}
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:8000;height:52px;
  display:flex;align-items:center;justify-content:space-between;padding:0 12px;
  background:linear-gradient(180deg,#160f33,#0c0820);
  border-bottom:2px solid var(--border);
  padding-top:env(safe-area-inset-top);
}
.tb-left{display:flex;align-items:baseline;gap:6px;}
.logo{font-family:"Press Start 2P";font-size:15px;color:var(--cyan);text-shadow:0 0 6px var(--cyan),2px 2px 0 #000;}
.logo-sub{font-family:"Press Start 2P";font-size:9px;color:var(--magenta);text-shadow:0 0 6px var(--magenta);}
.tb-right{display:flex;gap:6px;}
.hud-chip{
  display:flex;align-items:center;gap:4px;background:#0a0718;border:2px solid var(--border);
  padding:3px 7px;font-size:18px;color:var(--yellow);box-shadow:2px 2px 0 #000;
}
.hud-chip.streak{color:var(--magenta);}
.hud-ico{font-size:11px;color:var(--cyan);font-family:"Press Start 2P";}

/* Bottom nav */
.navbar{
  position:fixed;bottom:0;left:0;right:0;z-index:8000;height:64px;display:flex;
  background:linear-gradient(0deg,#160f33,#0c0820);border-top:2px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-btn{
  flex:1;background:none;border:none;color:var(--dim);font-family:"Press Start 2P";
  font-size:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;border-top:3px solid transparent;
}
.nav-btn .nav-ico{font-size:20px;}
.nav-btn.active{color:var(--cyan);border-top-color:var(--cyan);text-shadow:0 0 8px var(--cyan);}

/* Boot */
.boot{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;}
.boot-logo{font-family:"Press Start 2P";font-size:42px;color:var(--cyan);text-shadow:0 0 16px var(--cyan),4px 4px 0 var(--magenta);}
.boot-text{font-size:24px;color:var(--yellow);}

/* Pixel buttons */
.btn{
  font-family:"Press Start 2P";font-size:10px;color:#000;background:var(--cyan);
  border:none;padding:12px 14px;cursor:pointer;position:relative;
  box-shadow:var(--shadow);transition:transform .05s, box-shadow .05s;
  text-transform:uppercase;letter-spacing:1px;width:100%;
}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 2px #000;}
.btn.magenta{background:var(--magenta);color:#fff;}
.btn.yellow{background:var(--yellow);}
.btn.green{background:var(--green);}
.btn.ghost{background:#0a0718;color:var(--cyan);border:2px solid var(--cyan);box-shadow:2px 2px 0 #000;}
.btn.danger{background:var(--red);color:#fff;}
.btn:disabled{filter:grayscale(1) brightness(.6);cursor:not-allowed;}

/* Panels */
.panel{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:2px solid var(--border);box-shadow:4px 4px 0 #000;padding:14px;margin-bottom:14px;
}
.panel .panel-title{font-family:"Press Start 2P";font-size:10px;color:var(--cyan);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;}

/* Section header */
.view-head{margin:6px 0 16px;}
.view-head h1{color:var(--ink);text-shadow:2px 2px 0 #000;}
.view-sub{color:var(--dim);font-size:18px;margin-top:4px;}

/* Arcade cabinet grid (HUB) */
.cab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media(min-width:560px){.cab-grid{grid-template-columns:repeat(3,1fr);}}
.cabinet{
  position:relative;background:linear-gradient(180deg,#1c1140,#0d0822);
  border:3px solid var(--border);box-shadow:5px 5px 0 #000;padding:12px 12px 14px;
  cursor:pointer;overflow:hidden;transition:transform .08s;
}
.cabinet:active{transform:translateY(2px) scale(.99);}
.cabinet .screen{
  height:96px;border:2px solid #000;margin-bottom:10px;display:flex;align-items:center;justify-content:center;
  font-size:46px;background:radial-gradient(circle at 50% 40%, #0a1f2b, #050a12);
  box-shadow:inset 0 0 18px rgba(0,240,255,.25);
}
.cabinet .cab-name{font-family:"Press Start 2P";font-size:8.5px;color:var(--yellow);line-height:1.5;min-height:26px;}
.cabinet .cab-best{font-size:16px;color:var(--cyan);margin-top:4px;}
.cabinet .marquee{position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--yellow));}

/* lists */
.row{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--border);}
.row:last-child{border-bottom:none;}
.rank{font-family:"Press Start 2P";font-size:11px;width:34px;color:var(--yellow);}
.rank.r1{color:#ffd700;}.rank.r2{color:#c0c0c0;}.rank.r3{color:#cd7f32;}
.avatar{width:30px;height:30px;border:2px solid var(--border);background:#0a0718;flex:none;object-fit:cover;}
.row .name{flex:1;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row .val{color:var(--cyan);font-size:20px;}

/* progress */
.bar{height:14px;background:#0a0718;border:2px solid var(--border);position:relative;overflow:hidden;}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta));}
.xp-wrap{margin-top:6px;font-size:15px;color:var(--dim);display:flex;justify-content:space-between;}

/* stat tiles */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.stat{background:#0a0718;border:2px solid var(--border);padding:12px;text-align:center;box-shadow:3px 3px 0 #000;}
.stat .k{font-family:"Press Start 2P";font-size:8px;color:var(--dim);}
.stat .v{font-size:30px;color:var(--cyan);margin-top:6px;line-height:1;}
.stat.magenta .v{color:var(--magenta);}
.stat.yellow .v{color:var(--yellow);}

/* tabs */
.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.tab{font-family:"Press Start 2P";font-size:8px;padding:8px 9px;background:#0a0718;border:2px solid var(--border);color:var(--dim);cursor:pointer;}
.tab.active{color:#000;background:var(--cyan);}

/* quest items */
.quest{display:flex;gap:10px;align-items:flex-start;padding:11px;border:2px solid var(--border);background:#0a0718;margin-bottom:10px;box-shadow:3px 3px 0 #000;}
.quest .q-ico{font-size:24px;}
.quest .q-body{flex:1;}
.quest .q-title{font-family:"Press Start 2P";font-size:9px;color:var(--yellow);margin-bottom:5px;}
.quest .q-desc{font-size:16px;color:var(--dim);margin-bottom:7px;}
.quest .q-reward{color:var(--green);font-size:16px;}
.quest.done{opacity:.6;}
.quest.done .q-title{color:var(--green);}

/* badges */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px;}
.badge{text-align:center;background:#0a0718;border:2px solid var(--border);padding:8px 4px;box-shadow:2px 2px 0 #000;}
.badge .b-ico{font-size:26px;}
.badge .b-name{font-size:13px;color:var(--cyan);margin-top:4px;line-height:1.1;}
.badge.locked{filter:grayscale(1) brightness(.45);}

/* toast */
.toast{
  position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:9500;
  background:#0a0718;border:2px solid var(--cyan);color:var(--ink);font-size:17px;
  padding:10px 14px;box-shadow:4px 4px 0 #000;max-width:90%;text-align:center;
}
.toast.err{border-color:var(--red);color:#ffd5dd;}
.toast.ok{border-color:var(--green);}

/* game canvas */
.game-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;}
.game-topbar{width:100%;display:flex;justify-content:space-between;align-items:center;}
canvas#stage{width:100%;max-width:420px;aspect-ratio:3/4;background:#04060e;border:3px solid var(--border);box-shadow:4px 4px 0 #000;touch-action:none;}
.game-score{font-family:"Press Start 2P";font-size:12px;color:var(--yellow);}
.banner{font-size:16px;color:var(--magenta);text-align:center;border:2px dashed var(--magenta);padding:8px;margin-bottom:12px;}
.mult-flag{color:var(--green);font-family:"Press Start 2P";font-size:8px;}

/* quiz */
.q-card{background:#0a0718;border:2px solid var(--border);padding:14px;box-shadow:4px 4px 0 #000;}
.q-question{font-size:21px;margin-bottom:14px;color:var(--ink);}
.q-opt{display:block;width:100%;text-align:left;font-family:"VT323";font-size:19px;color:var(--ink);background:#120d24;border:2px solid var(--border);padding:11px;margin-bottom:9px;cursor:pointer;box-shadow:2px 2px 0 #000;}
.q-opt:active{transform:translate(2px,2px);box-shadow:none;}
.q-opt.sel{border-color:var(--cyan);color:var(--cyan);}
.timer{height:10px;background:#0a0718;border:2px solid var(--border);overflow:hidden;margin-bottom:12px;}
.timer > i{display:block;height:100%;background:var(--yellow);width:100%;}

/* misc text helpers */
.muted{color:var(--dim);}
.small{font-size:15px;}
.center{text-align:center;}
.mt{margin-top:12px;}
.mb{margin-bottom:12px;}
.warn-box{border:2px solid var(--yellow);background:rgba(255,230,0,.06);padding:10px;font-size:16px;color:var(--ink);}
a.link{color:var(--cyan);text-decoration:underline;cursor:pointer;}
.faq-q{font-family:"Press Start 2P";font-size:9px;color:var(--yellow);margin-top:14px;}
.faq-a{font-size:17px;color:var(--ink);margin-top:5px;}
.spin-wheel{font-size:40px;text-align:center;padding:8px;}