:root{
  --bg:#070a12;
  --bg-2:#0d1322;
  --panel:rgba(14,20,34,.72);
  --panel-brd:rgba(255,255,255,.09);
  --txt:#eef3ff;
  --txt-2:#9fb0cc;
  --accent:#ffb020;
  --accent-2:#ff6a3d;
  --cyan:#3ddc97;
  --danger:#ff4d5e;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --r:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, #17233d 0%, transparent 60%),
    radial-gradient(900px 500px at 105% 110%, #2a1a12 0%, transparent 55%),
    var(--bg);
  color:var(--txt);
  font-family:"Tajawal",system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex;align-items:center;justify-content:center;
  padding:14px;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
#shell{
  width:100%;max-width:1320px;
  display:flex;flex-direction:column;gap:10px;
}
#stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--panel-brd);
  box-shadow:var(--shadow);
  background:#05070d;
}
canvas#game{display:block;width:100%;height:100%;touch-action:none;cursor:none}

/* ================= HUD ================= */
#hud{position:absolute;inset:0;pointer-events:none;padding:14px;
  display:flex;flex-direction:column;justify-content:space-between;
  font-variant-numeric:tabular-nums}
.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hud-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.panel{
  background:var(--panel);
  border:1px solid var(--panel-brd);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:var(--r);
  padding:10px 14px;
}
.panel-stats{display:flex;gap:18px}
.stat{display:flex;flex-direction:column;line-height:1.1}
.stat .k{font-size:11px;color:var(--txt-2);letter-spacing:.02em}
.stat .v{font-size:22px;font-weight:800;color:var(--accent)}
.panel-vitals{min-width:270px;display:flex;flex-direction:column;gap:8px}
.bar-row{display:flex;align-items:center;gap:8px}
.bar-label{font-size:12px;color:var(--txt-2);min-width:46px}
.bar{flex:1;height:12px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;
  border:1px solid rgba(255,255,255,.06)}
.bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--cyan),#1fa97c);
  transition:width .18s ease,background .2s ease}
.bar i.low{background:linear-gradient(90deg,#ff9d3d,var(--danger))}
.bar-veh i{background:linear-gradient(90deg,#7ab8ff,#3d6dff)}
.bar-num{font-size:12px;color:var(--txt-2);min-width:34px;text-align:left}
.ammo-big{display:flex;align-items:baseline;gap:4px;justify-content:flex-end}
.ammo-big b{font-size:26px;font-weight:800;color:var(--txt)}
.ammo-big span{font-size:14px;color:var(--txt-2)}
.ammo-big.reload b{color:var(--accent-2);animation:pulse .7s infinite}
@keyframes pulse{50%{opacity:.35}}

/* ================= weapon rail ================= */
.weapons{display:flex;gap:10px;padding:9px 12px;pointer-events:auto}
.wslot{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:7px 11px;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  transition:transform .16s ease,background .2s ease,border-color .2s ease;
  min-width:104px;
}
.wslot .num{font-size:11px;color:var(--txt-2)}
.wslot .nm{font-size:13px;font-weight:700}
.wslot .am{font-size:12px;color:var(--txt-2);margin-inline-start:auto}
.wslot.active{
  background:linear-gradient(180deg,rgba(255,176,32,.22),rgba(255,106,61,.10));
  border-color:rgba(255,176,32,.55);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(255,140,40,.18);
}
.wslot.empty{opacity:.38}
.hints{font-size:12.5px;color:var(--txt-2);pointer-events:none}
.hints kbd{color:var(--txt)}
kbd{
  display:inline-block;min-width:20px;text-align:center;
  padding:2px 6px;margin:0 2px;border-radius:7px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-bottom-width:2px;
  font-family:inherit;font-size:12px;font-weight:700;
}
.toast{
  position:absolute;top:96px;left:50%;transform:translateX(-50%);
  background:rgba(8,12,20,.9);border:1px solid var(--panel-brd);
  padding:9px 18px;border-radius:99px;font-size:14px;font-weight:600;
  animation:toastIn .25s ease both;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-10px)}}

/* ================= overlays ================= */
.overlay{
  position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  background:radial-gradient(700px 420px at 50% 40%,rgba(12,18,32,.72),rgba(4,6,12,.94));
  backdrop-filter:blur(6px);
  animation:fadeIn .3s ease both;
}
.overlay[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}}
.card{
  width:min(760px,100%);
  background:linear-gradient(180deg,rgba(20,28,46,.95),rgba(10,14,24,.95));
  border:1px solid var(--panel-brd);
  border-radius:22px;
  padding:26px 30px;
  box-shadow:var(--shadow);
  text-align:center;
  animation:fadeUp .42s cubic-bezier(.22,1,.36,1) both;
}
.card.small{width:min(460px,100%)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}}
.logo{
  width:74px;height:74px;margin:0 auto 6px;border-radius:20px;
  display:grid;place-items:center;color:var(--accent);
  background:linear-gradient(160deg,rgba(255,176,32,.2),rgba(255,106,61,.08));
  border:1px solid rgba(255,176,32,.35);
}
.card h1{margin:6px 0 2px;font-size:clamp(30px,4.4vw,44px);font-weight:800;letter-spacing:-.01em}
.card h2{margin:0 0 6px;font-size:26px;font-weight:800}
.sub{margin:0 auto 16px;max-width:60ch;color:var(--txt-2);font-size:14.5px;line-height:1.7}
.tiny{margin:14px 0 0;font-size:11.5px;color:#6f7f99}
.keys{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:7px;margin:4px 0 20px;text-align:start;
}
.keys div{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:12.5px;color:var(--txt-2);
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);
  border-radius:11px;padding:7px 10px;
}
.keys em{font-style:normal;margin-inline-start:auto;color:var(--txt);font-weight:600}
.btn{
  pointer-events:auto;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:800;color:#1a1206;
  padding:13px 40px;border-radius:14px;border:0;
  background:linear-gradient(180deg,#ffd066,var(--accent));
  box-shadow:0 10px 26px rgba(255,150,40,.28);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(255,150,40,.36);filter:brightness(1.05)}
.btn:active{transform:translateY(0)}

/* ================= touch controls ================= */
#touch{
  display:flex;justify-content:space-between;gap:10px;
  padding:0 2px;
}
#touch[hidden]{display:none}
.tpad{display:flex;gap:10px;align-items:flex-end}
.tbtn{
  cursor:pointer;font-family:inherit;
  min-width:64px;height:60px;padding:0 16px;
  font-size:15px;font-weight:800;color:var(--txt);
  border-radius:16px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(38,50,74,.9),rgba(18,24,38,.9));
  backdrop-filter:blur(8px);
  transition:transform .1s ease,filter .1s ease;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.tbtn.alt{background:linear-gradient(180deg,rgba(255,176,32,.22),rgba(255,106,61,.14));border-color:rgba(255,176,32,.35)}
.tbtn:active{transform:scale(.94);filter:brightness(1.2)}

@media (max-width:900px){
  body{padding:8px;align-items:flex-start}
  #shell{max-width:none}
  .panel-stats{gap:12px;padding:8px 10px}
  .stat .v{font-size:17px}
  .panel-vitals{min-width:180px;padding:8px 10px}
  .weapons{flex-wrap:wrap;gap:6px;padding:7px 8px}
  .wslot{min-width:82px;padding:6px 8px}
  .wslot .nm{font-size:11.5px}
  .hints{display:none}
  #touch{display:flex}
}
@media (hover:hover) and (pointer:fine){
  #touch{display:none !important}
}

/* ================= weapon rail is clickable ================= */
.weapons{pointer-events:auto}
.wslot{cursor:pointer;pointer-events:auto}
.wslot:hover{transform:translateY(-2px);background:rgba(255,255,255,.07)}
.wslot.active:hover{transform:translateY(-2px)}