:root{
  --bg:#07070f; --bg2:#0c0c1a; --panel:#10101f; --panel2:#151530;
  --pink:#ff2d78; --cyan:#22e6ff; --yellow:#ffd319; --green:#39ff6a; --purple:#a06bff; --red:#ff3b3b; --orange:#ff8a00;
  --ink:#eef2ff; --muted:#9aa0c3; --line:#26264a;
  --font-pixel:'Press Start 2P',monospace; --font-hud:'Chakra Petch',sans-serif; --font-mono:'Share Tech Mono',monospace; --font-body:'Space Grotesk',sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);overflow-x:hidden;min-height:100dvh;
  background-image:radial-gradient(1200px 600px at 15% -5%,rgba(255,45,120,.12),transparent 60%),radial-gradient(1000px 500px at 90% 10%,rgba(34,230,255,.10),transparent 60%),radial-gradient(800px 600px at 50% 110%,rgba(160,107,255,.12),transparent 60%),linear-gradient(#07070f,#07070f);}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(34,230,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(34,230,255,.05) 1px,transparent 1px);background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 50% 0%,black 30%,transparent 75%);}
::selection{background:var(--pink);color:#fff}
img{max-width:100%}
button{font-family:inherit}
.font-pixel{font-family:var(--font-pixel)!important}
.font-mono2{font-family:var(--font-mono)!important}
.w-full{width:100%}
.hidden{display:none!important}
#app{position:relative;z-index:2}
.screen{display:none;min-height:100dvh}
.screen.active{display:block;animation:screenIn .35s ease}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page-shell{max-width:1180px;margin:0 auto;padding:14px 14px 40px}
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:14px;padding:16px;position:relative;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 50px rgba(0,0,0,.45)}
.panel-title{font-size:11px;letter-spacing:1px;color:var(--cyan);text-shadow:0 0 12px rgba(34,230,255,.6);margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.neon-border{border-color:rgba(34,230,255,.35);box-shadow:0 0 24px rgba(34,230,255,.12),inset 0 0 40px rgba(34,230,255,.04)}
.top-hud{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px}
.hud-brand{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--yellow);text-shadow:0 0 10px rgba(255,211,25,.5)}
.hud-dot{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.hud-right{display:flex;align-items:center;gap:8px}
.hud-clock{color:var(--muted);font-size:14px}
.icon-btn{background:#1a1a33;border:1px solid var(--line);color:var(--ink);border-radius:10px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.icon-btn:hover{border-color:var(--cyan);box-shadow:0 0 12px rgba(34,230,255,.4)}
.icon-btn svg{width:18px;height:18px}
.field-label{display:block;font-family:var(--font-hud);font-weight:700;font-size:12px;letter-spacing:2px;color:var(--muted);margin:14px 0 8px}
.field-hint{color:var(--muted);font-size:12px;margin:6px 0 0}
.link-action{color:var(--cyan);font-family:var(--font-mono);font-size:12px;cursor:pointer;background:none;border:none;padding:0;margin-left:8px}
.link-action:hover{text-decoration:underline}
.arcade-input{width:100%;background:#0a0a18;border:2px solid var(--line);border-radius:10px;color:var(--ink);padding:12px 14px;font-family:var(--font-hud);font-size:16px;font-weight:600;letter-spacing:1px;outline:none;transition:.15s}
.arcade-input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,230,255,.15),0 0 18px rgba(34,230,255,.25)}
.arcade-input::placeholder{color:#555a80}
.code-input{text-transform:uppercase;text-align:center;font-size:20px!important;letter-spacing:4px!important}
/* Buttons */
.btn-arcade{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:12px;cursor:pointer;font-family:var(--font-hud);font-weight:700;letter-spacing:1.5px;font-size:14px;padding:12px 20px;position:relative;transition:transform .08s,box-shadow .15s,filter .15s;text-transform:uppercase}
.btn-arcade svg{width:18px;height:18px}
.btn-arcade:active{transform:translateY(3px)}
.btn-arcade.primary{background:linear-gradient(180deg,#ff5c9c,var(--pink) 55%,#c40e52);color:#fff;box-shadow:0 5px 0 #7d0a36,0 0 22px rgba(255,45,120,.5);text-shadow:0 2px 0 rgba(0,0,0,.35)}
.btn-arcade.primary:active{box-shadow:0 1px 0 #7d0a36,0 0 12px rgba(255,45,120,.4)}
.btn-arcade.secondary{background:linear-gradient(180deg,#4ff0ff,var(--cyan) 55%,#0a7f96);color:#04222a;box-shadow:0 5px 0 #074e5d,0 0 22px rgba(34,230,255,.45)}
.btn-arcade.secondary:active{box-shadow:0 1px 0 #074e5d}
.btn-arcade.ghost{background:#1a1a33;border:1px solid var(--line);color:var(--ink);box-shadow:none}
.btn-arcade.ghost:hover{border-color:var(--purple);box-shadow:0 0 14px rgba(160,107,255,.35)}
.btn-arcade.danger{background:linear-gradient(180deg,#ff6b6b,var(--red) 55%,#a00);color:#fff;box-shadow:0 4px 0 #5c0000,0 0 16px rgba(255,59,59,.4)}
.btn-arcade.big{font-size:16px;padding:16px 26px}
.btn-arcade.sm{font-size:12px;padding:9px 14px}
.btn-arcade:disabled{filter:grayscale(.8) brightness(.6);cursor:not-allowed;transform:none}
.btn-arcade.ready-on{background:linear-gradient(180deg,#5cff8d,var(--green) 55%,#0d8a2c);color:#03240d;box-shadow:0 5px 0 #05531b,0 0 22px rgba(57,255,106,.5)}
/* Scrollbars */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a0a18}
::-webkit-scrollbar-thumb{background:#2c2c55;border-radius:6px;border:2px solid #0a0a18}
::-webkit-scrollbar-thumb:hover{background:var(--pink)}
/* Focus visible */
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body.reduced-effects *,body.reduced-effects *::before,body.reduced-effects *::after{animation-duration:.01ms!important}
@media (max-width:640px){.page-shell{padding:10px 10px 30px}.panel{padding:12px}}