:root{
  --bg:#0b0f1a; --panel:#0f1424cc; --glass:rgba(18,24,44,.6);
  --txt:#d7e0ff; --muted:#8aa0c8; --accent:#7b5cff; --accent2:#00e5ff;
  --danger:#ff3b6e; --ok:#00ffbf; --yellow:#ffd166;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%, #101738 0%, #0b0f1a 60%, #06080f 100%);color:var(--txt);font:14px/1.5 'PixelFont','Segoe UI',Tahoma,Arial,Verdana,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color: transparent}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid #1a2140;background:linear-gradient(180deg,#0f1424 0,#0b0f1a 100%)}
.brand .logo{font-weight:700;letter-spacing:.5px;color:#c8d1ff;filter:url(#glow)}
.brand .accent{color:var(--accent)}
.brand .subtitle{display:block;font-size:12px;color:var(--muted)}
.wallet-area{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.segmented{display:inline-flex;border:1px solid #2a3766;border-radius:999px;overflow:hidden;background:#0f1426}
.segmented .seg{border:0;background:transparent;color:#b7c4f5;padding:6px 10px;cursor:pointer}
.segmented .seg.active{background:#1a2140;color:#fff;box-shadow:inset 0 0 8px #7b5cff55}
.toggle-sound{position:relative;display:flex;align-items:center;gap:6px}
.toggle-sound input{display:none}
.toggle-sound label{position:relative;display:inline-block;width:54px;height:28px;background:#1a2140;border:1px solid #2a3766;border-radius:999px;cursor:pointer;box-shadow:inset 0 0 10px #000}
.toggle-sound label:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,#7b5cff,#00e5ff);box-shadow:0 0 12px #7b5cffaa;transition:transform .2s ease}
.toggle-sound input:checked + label:after{transform:translateX(26px)}
.toggle-sound span{margin-left:6px;color:#b7c4f5;font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.muted{color:var(--muted)}
.tiny{font-size:12px}
.container{max-width:1100px;margin:0 auto;padding:16px}
.screen{display:none}
.screen.active{display:block}
.panel{padding:16px;border:1px solid #1a2140;border-radius:8px}
.glass{background:var(--glass);backdrop-filter:blur(6px)}
.title{font-size:32px;margin:0 0 8px}
.desc{margin:0 0 16px;color:#b7c4f5}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{appearance:none;border:1px solid #263166;background:#151b31;color:var(--txt);padding:10px 14px;border-radius:6px;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.touch{font-size:22px;width:64px;height:64px;border-radius:50%}
.btn.outline{background:transparent}
.neon{border-color:var(--accent);box-shadow:0 0 8px #7b5cff66, inset 0 0 8px #7b5cff33}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;margin:8px 0}
.field.inline{display:flex;flex-direction:row;align-items:center;gap:8px}
select,input.input{background:#0f1426;border:1px solid #2a3766;color:var(--txt);padding:8px;border-radius:6px;width:100%}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:8px 0}
code{background:#0e1433;padding:2px 4px;border-radius:4px;border:1px solid #232c55}

#hud{display:flex;gap:12px;align-items:center;justify-content:center;padding:8px;margin-bottom:8px;border-radius:8px}
#game{width:100%;max-width:960px;display:block;margin:0 auto;background:linear-gradient(180deg,#060912 0,#0a0f1e 100%);border:1px solid #1a2140;border-radius:14px}
#game{box-shadow:0 0 40px 8px #7b5cff22, 0 0 100px 16px #00e5ff1f}

/* Enhanced neon background behind canvas */
body{
  background:
    radial-gradient(800px 400px at 20% -20%, #1a1f3f55 0%, transparent 70%),
    radial-gradient(1000px 600px at 120% 0%, #00334d55 0%, transparent 70%),
    radial-gradient(1400px 700px at 50% 120%, #4d1a6b40 0%, transparent 70%),
    linear-gradient(180deg,#0b0f1a 0%, #06080f 100%);
}

#touch-controls{display:none;position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);justify-content:center;gap:28px;z-index:30}

@media (max-width: 900px){
  .grid-2{grid-template-columns:1fr}
  #touch-controls{display:flex}
}

@media (max-width: 600px){
  .container{padding:10px}
  .topbar{padding:8px 12px}
  .brand .subtitle{font-size:11px}
  #hud{flex-wrap:wrap;gap:8px;font-size:12px}
  .panel{padding:12px}
  .kv{grid-template-columns:1fr 1fr;gap:4px 8px;font-size:12px}
  #game{height:70vh;max-width:none}
  .btn.touch{width:76px;height:76px;font-size:24px}
  .segmented .seg{padding:5px 8px;font-size:12px}
  .toggle-sound span{font-size:11px}
}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-content{max-width:420px;width:92%;}

/* Tutorial coachmarks */
.highlight-pulse{position:relative;z-index:5}
.highlight-pulse::after{content:"";position:absolute;inset:-6px;border-radius:10px;border:2px solid var(--accent2);box-shadow:0 0 16px #00e5ffaa;animation:hpulse 1.2s infinite ease-in-out;pointer-events:none}
@keyframes hpulse{0%{opacity:.3;transform:scale(1)}50%{opacity:.8;transform:scale(1.04)}100%{opacity:.3;transform:scale(1)}}
.tutorial{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:4}
.tutorial.active{display:flex}
.tutorial .card{max-width:520px;width:92%;padding:16px} 
.tutorial .steps{font-size:12px;color:var(--muted);margin-bottom:8px}

.toasts{position:fixed;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:20}
.toast{padding:10px 12px;border-radius:6px;border:1px solid #2a3766;background:#0f1426;max-width:320px}
.toast.ok{border-color:var(--ok);color:#d6fff4}
.toast.err{border-color:var(--danger);color:#ffd6e3}
.toast.warn{border-color:var(--yellow);color:#fff7d6}

.mono.muted, .muted .mono{color:var(--muted)}

/* CRT overlay container */
#crt-overlay{position:fixed;inset:0;pointer-events:none;opacity:.35;background:radial-gradient(1600px 800px at 50% -30%, transparent 40%, rgba(0,0,0,.3) 70%, rgba(0,0,0,.65) 100%)}

/* Flash highlight for Required field */
.flash{
  animation: flashPulse .8s ease;
}
@keyframes flashPulse{0%{box-shadow:0 0 0 0 rgba(0,229,255,.0)}50%{box-shadow:0 0 12px 4px rgba(0,229,255,.5)}100%{box-shadow:0 0 0 0 rgba(0,229,255,0)}}