:root{
  --bg:#05070c; --ink:#e8eef7; --dim:#93a4bd; --line:rgba(255,255,255,.10);
  --glass:rgba(255,255,255,.05); --accent:#ff7a18; --accent2:#ffd166;
  --hp:#3ddc84; --shield:#4aa8ff; --danger:#ff3b5c;
  --ui:'Segoe UI',Tahoma,'Noto Naskh Arabic',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--ui)}
canvas#viewport{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none !important}
button{font-family:inherit}

.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 70% 0%,#122033 0%,#070b12 55%,#04060a 100%);z-index:40}
.menu-card{width:min(560px,92vw);padding:34px 30px;border-radius:22px;text-align:center;
  background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.logo{font-size:clamp(34px,7vw,58px);font-weight:800;letter-spacing:1px;line-height:1;
  background:linear-gradient(100deg,var(--accent2),var(--accent) 60%,#ff4d4d);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.logo span{display:block;font-size:.30em;letter-spacing:8px;color:var(--dim);
  -webkit-text-fill-color:var(--dim);margin-top:10px}
.tag{color:var(--dim);margin:14px 0 22px;font-size:15px}
button.primary{width:100%;padding:16px;border:0;border-radius:14px;cursor:pointer;
  font-size:19px;font-weight:800;color:#1a0d00;
  background:linear-gradient(100deg,var(--accent2),var(--accent));
  transition:transform .18s ease,box-shadow .18s ease}
button.primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,122,24,.35)}
button.ghost{width:100%;margin-top:10px;padding:13px;border-radius:14px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--ink);font-size:15px}
button.ghost:hover{background:rgba(255,255,255,.06)}
.opts{margin:22px 0;display:grid;gap:14px;text-align:right;font-size:14px;color:var(--dim)}
.opts b{color:var(--accent2)}
.opts input[type=range]{width:100%;accent-color:var(--accent);margin-top:6px}
.opts select{width:100%;margin-top:6px;padding:10px;border-radius:10px;background:#0c1420;
  color:var(--ink);border:1px solid var(--line)}
.keys{display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;font-size:12px;color:var(--dim)}
kbd{background:#101a28;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;
  padding:2px 7px;font-family:inherit;font-size:11px;color:#cfe0f5}

/* ---------- loader ---------- */
.loader-inner{text-align:center;width:min(420px,86vw)}
.bar{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:26px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .25s ease}
#loadmsg{margin-top:14px;color:var(--dim);font-size:13px}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;user-select:none}
.topbar{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.pill{min-width:74px;padding:7px 12px;border-radius:12px;text-align:center;
  background:rgba(8,12,20,.55);backdrop-filter:blur(10px);border:1px solid var(--line)}
.pill span{display:block;font-size:19px;font-weight:800;line-height:1.05}
.pill small{font-size:10px;color:var(--dim);letter-spacing:1px}
.pill.kill span{color:var(--accent2)} .pill.storm span{color:#8fd3ff}

.bottombar{position:absolute;inset:auto 0 0 0;padding:0 22px 22px;display:flex;
  align-items:flex-end;justify-content:space-between;gap:20px}
.hpwrap{flex:1;max-width:420px}
.hpbar{position:relative;height:22px;border-radius:8px;overflow:hidden;
  background:rgba(6,10,16,.65);border:1px solid var(--line)}
.hpbar i{position:absolute;inset:0 0 0 auto;width:100%;transition:width .2s ease}
#hpFill{background:linear-gradient(90deg,#2fbf71,var(--hp))}
#shieldFill{background:linear-gradient(90deg,#2f6fbf,var(--shield));height:100%;opacity:.9}
.hpbar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;text-shadow:0 1px 3px #000}
.wname{margin-top:8px;font-size:13px;color:var(--dim)}
.ammo{text-align:left;display:flex;align-items:flex-end;gap:6px;font-variant-numeric:tabular-nums}
.ammo b{font-size:44px;line-height:.85;font-weight:800}
.ammo span{color:var(--dim);font-size:16px;padding-bottom:4px}
.ammo small{display:block;position:absolute;bottom:64px;left:22px;color:var(--accent2);font-size:13px}

/* ---------- crosshair / fx ---------- */
#crosshair{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%)}
#crosshair i{position:absolute;background:rgba(255,255,255,.85);box-shadow:0 0 4px #000}
#crosshair i:nth-child(1),#crosshair i:nth-child(2){width:2px;height:8px;left:12px}
#crosshair i:nth-child(1){top:0} #crosshair i:nth-child(2){bottom:0}
#crosshair i:nth-child(3),#crosshair i:nth-child(4){height:2px;width:8px;top:12px}
#crosshair i:nth-child(3){right:0} #crosshair i:nth-child(4){left:0}
#crosshair b{position:absolute;left:12px;top:12px;width:2px;height:2px;border-radius:50%;
  background:var(--accent2)}
#hitmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:22px;
  color:#fff;opacity:0;text-shadow:0 0 8px #000;font-weight:800}
#hitmark.on{animation:hm .28s ease}
@keyframes hm{0%{opacity:1;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
#vignette{position:absolute;inset:0;opacity:0;transition:opacity .25s;
  background:radial-gradient(circle at 50% 50%,transparent 45%,rgba(255,0,40,.55) 100%)}
#vignette.on{opacity:1}
#dmgdir{position:absolute;inset:0}

#minimap{position:absolute;top:14px;right:14px;width:180px;height:180px;border-radius:14px;
  background:rgba(6,10,16,.55);backdrop-filter:blur(8px);border:1px solid var(--line)}

#feed{position:absolute;top:210px;right:14px;display:grid;gap:6px;justify-items:end}
.feedrow{padding:6px 11px;border-radius:9px;font-size:12.5px;background:rgba(8,12,20,.6);
  border:1px solid var(--line);animation:fadeIn .3s ease}
.feedrow b{color:var(--accent2)} .feedrow.me{background:rgba(255,122,24,.18)}
#toast{position:absolute;left:50%;top:26%;transform:translateX(-50%);display:grid;gap:8px;
  justify-items:center;text-align:center}
.toast{padding:9px 18px;border-radius:12px;font-size:15px;font-weight:700;
  background:rgba(8,12,20,.72);border:1px solid var(--line);animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0 22px;font-size:14px}
.stats div{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:12px}
.stats b{display:block;font-size:22px;color:var(--accent2)}
#overTitle{font-size:32px;font-weight:800}
#overTitle.win{background:linear-gradient(100deg,var(--accent2),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
#overTitle.lose{color:var(--danger)}