:root { --bg:#0b0d1a; --panel:#141830; --line:#2a3160; --ink:#d7dcff; --dim:#7b84b8; --hot:#ff3d81; --gold:#ffc83d; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:"Courier New", ui-monospace, monospace; }
body { overflow-x:hidden; }
button, input { font:inherit; color:inherit; }
button { cursor:pointer; background:var(--panel); border:2px solid var(--line); padding:8px 12px; letter-spacing:1px; }
button:hover { border-color:var(--hot); }
button.big { width:100%; padding:14px; font-size:18px; font-weight:bold; background:var(--hot); border-color:#000; color:#fff; text-shadow:2px 2px 0 #000; }
button.big:hover { filter:brightness(1.15); }
button.small { padding:5px 9px; font-size:12px; }
input { background:#080a16; border:2px solid var(--line); padding:8px; width:100%; text-transform:none; }
input:focus { outline:none; border-color:var(--hot); }
[hidden] { display:none !important; }

#menu { max-width:760px; margin:0 auto; padding:16px; }
header { text-align:center; padding:18px 0 8px; }
header h1 { margin:0; font-size:56px; letter-spacing:6px; text-shadow:4px 4px 0 var(--hot); }
header h1 span { color:var(--gold); }
header p { margin:4px 0 0; color:var(--dim); letter-spacing:3px; }
.card { background:var(--panel); border:2px solid var(--line); padding:14px; margin:12px 0; box-shadow:4px 4px 0 #000; }
.card label { display:block; margin:8px 0; font-size:12px; color:var(--dim); letter-spacing:2px; }
.lbl { font-size:12px; color:var(--dim); letter-spacing:2px; margin-bottom:8px; }
.row { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px; }
.codes input { width:110px; text-transform:uppercase; text-align:center; letter-spacing:4px; }
.hint { font-size:12px; color:var(--dim); margin-top:8px; }
.err { color:#ff6b6b; min-height:20px; margin-top:8px; font-size:13px; }
.tabs { display:flex; gap:6px; margin-bottom:8px; }
.tabs button { flex:1; }
.tabs button.on { background:var(--hot); border-color:#000; color:#fff; }
.pill { padding:2px 8px; font-size:12px; color:#000; font-weight:bold; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:10px 0; text-align:center; font-size:11px; color:var(--dim); }
.stats b { display:block; font-size:20px; color:var(--ink); }

#gang-pick { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.gcard { border:3px solid var(--line); padding:10px; cursor:pointer; text-align:center; font-weight:bold; background:#0a0c1c; }
.gcard.on { border-color:var(--c); box-shadow:0 0 0 2px var(--c) inset; }
.gcard i { display:block; width:100%; height:10px; background:var(--c); margin-bottom:6px; }

#citymap { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.dist { border:2px solid var(--c); background:color-mix(in srgb, var(--c) 22%, #0a0c1c); padding:8px 4px; text-align:center; font-size:11px; min-height:58px; }
.dist b { display:block; font-size:12px; }
.dist small { color:var(--dim); }
#gangs { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px; font-size:12px; }
#gangs div { border-left:6px solid var(--c); padding:4px 8px; background:#0a0c1c; }
#shop { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
#shop div { border:2px solid var(--line); padding:8px; text-align:center; background:#0a0c1c; }
#shop button { margin-top:6px; width:100%; }
#top div { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.help div { font-size:13px; margin:4px 0; }
.help b { color:var(--gold); }

/* game */
#game { position:fixed; inset:0; background:#000; cursor:none; user-select:none; }
#c { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; image-rendering:crisp-edges; }
#crosshair { position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; pointer-events:none; border:2px solid #fff; border-radius:50%; mix-blend-mode:difference; }
#crosshair::after { content:""; position:absolute; left:50%; top:50%; width:4px; height:4px; margin:-2px; background:#fff; }
#crosshair.hit { animation:hm .14s ease-out; }
@keyframes hm { 0% { transform:scale(1.6) rotate(45deg); border-color:#ff4d5e; } 100% { transform:scale(1); } }
#flash { position:absolute; inset:0; background:#f00; opacity:0; pointer-events:none; transition:opacity .25s; }
#hud-tl { position:absolute; left:12px; top:12px; width:300px; text-shadow:2px 2px 0 #000; }
#h-zone { font-size:18px; font-weight:bold; }
#h-obj { font-size:13px; color:var(--gold); margin:4px 0 8px; }
.bar { position:relative; height:18px; background:#000a; border:2px solid #000; margin-bottom:4px; }
.bar i { position:absolute; left:0; top:0; bottom:0; width:0; background:#ff6b6b; }
.bar.cap i { background:var(--gold); }
.bar.hp i { background:#43e07a; }
.bar span { position:absolute; inset:0; text-align:center; font-size:11px; line-height:14px; }
#hud-tr { position:absolute; right:12px; top:12px; text-align:right; text-shadow:2px 2px 0 #000; font-size:13px; }
#h-role { margin-top:8px; font-size:20px; font-weight:bold; color:var(--hot); }
#hud-bl { position:absolute; left:12px; bottom:12px; width:240px; text-shadow:2px 2px 0 #000; }
#h-cash { font-size:22px; color:#7dff9a; }
#mini { position:absolute; right:12px; bottom:12px; border:2px solid #000; background:#0008; image-rendering:pixelated; }
#banner { position:absolute; left:0; right:0; top:28%; text-align:center; font-size:52px; font-weight:bold; letter-spacing:6px; text-shadow:4px 4px 0 #000; pointer-events:none; opacity:0; transition:opacity .3s; }
#banner.on { opacity:1; }
#feed { position:absolute; left:50%; transform:translateX(-50%); top:12px; text-align:center; font-size:14px; text-shadow:2px 2px 0 #000; }
#feed div { margin-bottom:2px; }
#hint-bottom { position:absolute; left:0; right:0; bottom:6px; text-align:center; font-size:11px; color:#fff8; pointer-events:none; }
.floaty { position:absolute; color:#7dff9a; font-weight:bold; text-shadow:2px 2px 0 #000; pointer-events:none; animation:fl 1.1s ease-out forwards; }
@keyframes fl { to { transform:translateY(-50px); opacity:0; } }
/* touch */
#game.touch { touch-action:none; }
#game.touch #crosshair, #game.touch #hint-bottom { display:none; }
#touch { position:absolute; inset:0; touch-action:none; pointer-events:none; }
#touch > * { pointer-events:auto; touch-action:none; }
#t-stick { position:absolute; left:24px; bottom:28px; width:140px; height:140px; border-radius:50%; background:#ffffff14; border:3px solid #ffffff40; }
#t-knob { position:absolute; left:50%; top:50%; width:60px; height:60px; margin:-30px; border-radius:50%; background:var(--hot); border:3px solid #000; }
#t-aim { position:absolute; right:0; top:15%; bottom:0; width:58%; display:flex; align-items:flex-end; justify-content:center; padding-bottom:12px; color:#fff6; font-size:11px; letter-spacing:2px; }
#t-drift { position:absolute; right:24px; bottom:40px; width:96px; height:96px; border-radius:50%; background:#ffffff1c; border:3px solid #ffffff55; font-weight:bold; }
#t-swap, #t-exit { position:absolute; top:auto; bottom:190px; font-size:12px; padding:8px 12px; background:#000a; }
#t-swap { left:24px; } #t-exit { left:110px; }
#touch[data-role="gunner"] #t-stick, #touch[data-role="gunner"] #t-drift { display:none; }
#touch[data-role="driver"] #t-aim { display:none; }
#game.touch #mini { bottom:auto; top:110px; width:110px; height:110px; }
@media (max-width:820px), (max-height:500px) {
  #hud-tl { width:210px; font-size:12px; } #h-zone { font-size:14px; } #h-obj { font-size:11px; }
  #hud-tr { font-size:11px; } #h-role { font-size:15px; }
  #game.touch #hud-bl { left:50%; transform:translateX(-50%); bottom:8px; width:180px; }
  #banner { font-size:32px; }
}
@media (max-width:600px) { #shop, #gangs { grid-template-columns:repeat(2,1fr); } .stats { grid-template-columns:repeat(2,1fr); } header h1 { font-size:40px; } }