:root{
  --bg:#03050b;
  --panel:rgba(8,13,24,.80);
  --panel-border:rgba(121,199,255,.16);
  --text:#eef5ff;
  --muted:#8ba4c8;
  --cyan:#54ddff;
  --cyan-2:#34a4ff;
  --red:#ff507f;
  --orange:#ffb259;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  height:100%;
  overflow:hidden;
  background:radial-gradient(circle at top,#09172a 0,#03050b 46%,#010207 100%);
  color:var(--text);
  font-family:Inter,Arial,Helvetica,sans-serif;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 18% 20%, rgba(0,194,255,.18), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(81,117,255,.15), transparent 30%),
    radial-gradient(circle at 50% 110%, rgba(255,118,50,.08), transparent 40%);
  pointer-events:none;
  z-index:0;
}
canvas{display:block}
#overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.48); backdrop-filter:blur(10px); z-index:40;
}
.card{
  width:min(92vw,620px);
  padding:30px;
  border-radius:26px;
  border:1px solid var(--panel-border);
  background:linear-gradient(180deg,rgba(10,16,32,.96),rgba(5,8,18,.98));
  box-shadow:0 35px 80px rgba(0,0,0,.45),0 0 40px rgba(0,212,255,.08);
}
.eyebrow{
  color:var(--cyan); text-transform:uppercase; letter-spacing:.30em; font-size:12px; margin-bottom:14px;
}
h1{margin:0 0 8px;font-size:46px;line-height:1}
.subtitle{margin:0;color:var(--muted);line-height:1.65;max-width:52ch}
.status{margin-top:12px;color:#d9f6ff;font-size:13px;opacity:.9}
.label{display:block;margin-top:18px;margin-bottom:8px;color:var(--muted);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
input{
  width:100%; padding:14px 16px; border-radius:15px; background:#0b1222; color:#fff;
  border:1px solid rgba(255,255,255,.09); outline:none; font-size:16px;
}
button{
  margin-top:18px; width:100%; border:none; border-radius:999px; padding:16px 20px;
  background:linear-gradient(135deg,#36d5ff,#63e4ff); color:#02111b; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; cursor:pointer; transition:transform .18s ease, filter .18s ease;
}
button:hover{transform:translateY(-1px);filter:brightness(1.05)}
.legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px;color:var(--muted);font-size:13px}
#hud{position:fixed; inset:0; pointer-events:none; z-index:20;}
.hud-left{position:absolute; left:18px; top:18px; display:flex; gap:10px; flex-wrap:wrap; max-width:56vw;}
.pill{
  padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.1);
  background:rgba(5,8,18,.68); backdrop-filter:blur(8px); font-size:13px; color:var(--muted)
}
.pill strong{color:#fff}
.crosshair{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%; border:1px solid rgba(255,255,255,.86);
  box-shadow:0 0 14px rgba(255,255,255,.22);
}
.crosshair::before,.crosshair::after{content:""; position:absolute; left:50%; top:50%; background:#fff; transform:translate(-50%,-50%);}
.crosshair::before{width:24px;height:1px}
.crosshair::after{width:1px;height:24px}
.hud-right{position:absolute; right:18px; top:18px; width:min(325px,28vw); display:flex; flex-direction:column; gap:14px;}
.scoreboard,.feed,.weapon-panel{
  border-radius:22px; border:1px solid rgba(255,255,255,.1);
  background:rgba(5,8,18,.72); backdrop-filter:blur(10px); padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.scoreboard-title{margin-bottom:10px; color:var(--cyan); text-transform:uppercase; letter-spacing:.18em; font-size:12px;}
.score-row{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:14px;}
.score-row:last-child{border-bottom:none}
.feed-line{font-size:13px; color:var(--muted); padding:7px 0; border-bottom:1px solid rgba(255,255,255,.05);}
.feed-line:last-child{border-bottom:none}
.weapon-panel{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);min-width:260px;text-align:center;padding:12px 18px}
.weapon-title{font-size:18px;font-weight:800;letter-spacing:.03em}
.weapon-ammo{display:flex;justify-content:center;gap:8px;font-size:34px;line-height:1.1;margin:4px 0 3px}
.weapon-meta{font-size:12px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
#reloadNotice{margin-top:6px;font-size:12px;color:#ffd99c;text-transform:uppercase;letter-spacing:.16em}
#respawnNotice{
  position:fixed; left:50%; bottom:130px; transform:translateX(-50%);
  background:rgba(255,80,127,.15); color:#ffd6e1; border:1px solid rgba(255,80,127,.35);
  padding:14px 18px; border-radius:999px; z-index:40;
}
.movement-tip{
  position:absolute; left:50%; top:86px; transform:translateX(-50%);
  padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.1);
  background:rgba(5,8,18,.68); color:var(--muted); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; backdrop-filter:blur(8px);
}
#hitmarker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;opacity:0;transition:opacity .08s ease;}
#hitmarker.active{opacity:1}
#hitmarker::before,#hitmarker::after,#hitmarker span::before,#hitmarker span::after{
  content:"";position:absolute;background:#fff;width:2px;height:16px;left:50%;top:50%;margin-left:-1px;margin-top:-8px;border-radius:2px;
}
#hitmarker::before{transform:translate(-12px,-12px) rotate(45deg)}
#hitmarker::after{transform:translate(10px,-12px) rotate(-45deg)}
#hitmarker span::before{transform:translate(-12px,10px) rotate(-45deg)}
#hitmarker span::after{transform:translate(10px,10px) rotate(45deg)}
#damageFlash{position:fixed; inset:0; background:radial-gradient(circle, transparent 40%, rgba(255,44,98,.22) 100%); opacity:0; transition:opacity .12s ease; pointer-events:none}
#damageFlash.active{opacity:1}
@media (max-width: 960px){
  .hud-right{width:calc(100vw - 36px); top:auto; bottom:110px; right:18px}
  .scoreboard{max-height:180px; overflow:auto}
  .movement-tip{top:auto;bottom:85px}
  .weapon-panel{bottom:16px;min-width:220px}
}