:root{
  --bg:#0a0d0a; --panel:#11150f; --panel-2:#161b13; --line:#27301f;
  --text:#d7e2cf; --muted:#7d8a72; --t:#e0463e; --ct:#3b7de0;
  --acc:#a7e06a; --acc-dim:#6f9a44;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --display:"Oswald","Arial Narrow",system-ui,sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=DM+Mono:wght@400;500&display=swap');
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:radial-gradient(1200px 600px at 50% -10%,#14201040 0%,transparent 60%),var(--bg);
  color:var(--text);font-family:var(--mono);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.screen{display:none;min-height:100vh}.screen.active{display:flex}
#lobby{align-items:flex-start;justify-content:center;padding:48px 20px}
.lobby-wrap{width:100%;max-width:560px}
.brand{display:flex;align-items:center;gap:16px;margin-bottom:30px}
.brand-mark{font-size:26px;color:var(--acc);width:54px;height:54px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#1a2113,#0e120c);box-shadow:0 0 24px #7ce04020 inset}
.brand h1{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:.14em;margin:0;line-height:1}
.tagline{margin:6px 0 0;color:var(--muted);font-size:12.5px}
.panel{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:14px;padding:20px;margin-bottom:18px}
.field-label{display:block;font-family:var(--display);letter-spacing:.16em;text-transform:uppercase;
  font-size:12px;color:var(--acc-dim);margin-bottom:12px}
.create-row{display:flex;gap:10px}
#nickInput{flex:1;background:#0c0f0a;border:1px solid var(--line);color:var(--text);
  font-family:var(--mono);font-size:15px;padding:12px 14px;border-radius:9px;outline:none}
#nickInput:focus{border-color:var(--acc-dim);box-shadow:0 0 0 3px #7ce04018}
#nickInput::placeholder{color:#566049}
.btn-primary{background:var(--acc);color:#0c1207;border:none;border-radius:9px;font-family:var(--display);
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;padding:0 18px;cursor:pointer}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:8px;
  font-family:var(--mono);font-size:12.5px;padding:7px 13px;cursor:pointer}
.btn-ghost:hover{color:var(--text);border-color:var(--acc-dim)}
.hint{color:var(--muted);font-size:12px;margin:12px 0 0}
.list-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.list-head .field-label{margin-bottom:0}
.arena-list{list-style:none;margin:8px 0 0;padding:0;max-height:300px;overflow-y:auto}
.arena-list .muted{color:var(--muted);font-size:13px;padding:14px 4px}
.arena-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;
  border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#0d110a}
.arena-name{font-size:15px}.arena-sub{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.arena-right{display:flex;align-items:center;gap:10px}
.tag{font-size:10px;letter-spacing:.1em;padding:4px 8px;border-radius:5px;font-family:var(--display);font-weight:600}
.tag-open{background:#16240e;color:var(--acc)}.tag-live{background:#2a1410;color:#ff9b6a}
.btn-join{background:#1a2113;color:var(--acc);border:1px solid var(--acc-dim);border-radius:8px;
  font-family:var(--mono);font-size:12.5px;padding:7px 14px;cursor:pointer}
.btn-join:hover{background:#22301a}
.controls-card{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;color:var(--muted);font-size:12px;margin-top:8px}
.ctrl{display:inline-flex;align-items:center;gap:6px}
kbd{font-family:var(--mono);font-size:11px;background:#161b12;border:1px solid var(--line);
  border-bottom-width:2px;border-radius:5px;padding:2px 7px;color:var(--text)}
#game{align-items:center;justify-content:center;padding:12px}
.game-wrap{width:100%;max-width:min(97vw,1560px);display:flex;flex-direction:column}
.hud{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:12px;padding:10px 14px;margin-bottom:10px}
.hud-left,.hud-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hud-nick{font-size:12.5px;color:var(--muted)}.hud-nick b{color:var(--text);font-weight:500}
.side-badge{font-family:var(--display);font-weight:700;letter-spacing:.1em;font-size:12px;padding:5px 11px;border-radius:6px}
.side-badge.t{background:#2a100e;color:var(--t);border:1px solid #5a201c}
.side-badge.ct{background:#0e1c2e;color:var(--ct);border:1px solid #1d3a5e}
.scoreboard{display:flex;align-items:center;gap:14px}
.score-block{display:flex;flex-direction:column;gap:5px;align-items:center}
.score-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.score-label.lt{color:var(--t)}.score-label.lct{color:var(--ct)}
.pips{display:flex;gap:4px}
.pip{width:13px;height:13px;border-radius:50%;border:1px solid var(--line);background:#0c0f0a}
.pip.on{background:var(--acc);border-color:var(--acc);box-shadow:0 0 8px #7ce04066}
.score-vs{color:var(--muted);font-size:11px;font-family:var(--display)}
.ammo{display:flex;align-items:center;gap:5px}
.ammo-label{font-size:10px;letter-spacing:.12em;color:var(--muted)}
.bullet{width:7px;height:16px;border-radius:3px;background:#2a3322;border:1px solid var(--line)}
.bullet.on{background:#ffd24a;border-color:#caa53a;box-shadow:0 0 6px #ffd24a55}
.reload-txt{font-size:11px;color:#ff9b6a;min-width:86px}
.bot-btns{display:flex;gap:6px}
.stage{position:relative;width:100%}
#field{width:auto;height:auto;max-width:100%;max-height:80vh;display:block;margin:0 auto;border-radius:12px;
  border:1px solid var(--line);background:#0c100c;box-shadow:0 0 60px #00000080;cursor:crosshair;outline:none}
.banner{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-family:var(--display);font-weight:600;
  letter-spacing:.06em;font-size:17px;color:var(--text);background:#0a0d0acc;border:1px solid var(--line);
  padding:8px 18px;border-radius:8px;opacity:0;transition:opacity .2s;pointer-events:none;text-align:center;max-width:90%}
.banner.show{opacity:1}
.toast{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--acc);
  background:#0a0d0ad9;border:1px solid var(--acc-dim);padding:8px 16px;border-radius:8px;opacity:0;
  transition:opacity .25s;pointer-events:none;max-width:90%;text-align:center}
.toast.show{opacity:1}
.plant-hint{position:absolute;bottom:58px;left:50%;transform:translateX(-50%);font-family:var(--display);
  font-weight:600;font-size:15px;color:#ffd24a;background:#1c160add;border:1px solid #caa53a;
  padding:7px 16px;border-radius:8px;opacity:0;transition:opacity .15s;pointer-events:none}
.plant-hint.show{opacity:1}
.camp-warn{position:absolute;top:62px;left:50%;transform:translateX(-50%);font-family:var(--display);
  font-weight:700;font-size:16px;letter-spacing:.1em;color:#ff5546;background:#1d0c0add;border:1px solid #7a2a22;
  padding:7px 18px;border-radius:8px;opacity:0;pointer-events:none;animation:blink 0.6s infinite}
.camp-warn.show{opacity:1}
@keyframes blink{50%{opacity:.25}}
@media (max-width:640px){.hud{justify-content:center}.brand h1{font-size:28px}}