* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; color: #fff;
  font-family: "Roboto Condensed", "Arial Narrow", "DejaVu Sans Condensed", "Liberation Sans Narrow", sans-serif; user-select: none; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
#fps { position: absolute; top: 8px; left: 10px; font-size: 13px; color: #b9f5a0; opacity: .85; font-family: monospace; }

#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair .ch { position: absolute; background: #4cff4c; box-shadow: 0 0 0 1px rgba(0,0,0,.65); }
#crosshair .t, #crosshair .b { width: 2px; height: 7px; left: -1px; }
#crosshair .l, #crosshair .r { height: 2px; width: 7px; top: -1px; }
#crosshair .dot { width: 2px; height: 2px; left: -1px; top: -1px; display: none; }

#scope { position: absolute; inset: 0; }
#scope .lens { position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0, rgba(0,0,0,0) 41vh, rgba(0,0,0,.55) 42vh, #000 43.5vh); }
#scope .sl { position: absolute; background: #000; }
#scope .sl.h { left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; }
#scope .sl.v { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; }

#botbar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 340px; text-align: center;
  background: linear-gradient(180deg, rgba(10,14,20,.72), rgba(10,14,20,.35)); padding: 7px 14px 8px; border-radius: 3px; }
#botbar .name { font-size: 15px; letter-spacing: 2px; font-weight: 700; color: #ffd27a; }
#botbar .name span { color: #cfd8e3; font-weight: 400; letter-spacing: 1px; }
#botbar .bar { height: 7px; margin: 6px 0 4px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
#bothp { height: 100%; width: 100%; background: linear-gradient(90deg, #d8423a, #f0a93a); transition: width .12s; }
#botbar .sub { font-size: 13px; color: #cfd8e3; }
#botbar .sub b { color: #ffd27a; font-size: 16px; }

#stats { position: absolute; top: 14px; right: 14px; width: 190px; background: rgba(10,14,20,.55); padding: 8px 12px; border-radius: 3px; font-size: 14px; }
#stats .title { font-size: 12px; letter-spacing: 3px; color: #9fb2c8; margin-bottom: 4px; }
#stats div:not(.title) { display: flex; justify-content: space-between; line-height: 21px; }
#stats b { color: #fff; font-weight: 700; }

#killfeed { position: absolute; top: 210px; right: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kf { background: rgba(0,0,0,.6); border: 2px solid #d63c32; padding: 4px 10px; font-size: 15px; border-radius: 2px; display: flex; gap: 8px; align-items: center;
  animation: kfin .18s ease-out; }
.kf .you { color: #e8c35a; font-weight: 700; } .kf .bot { color: #6fb4ff; font-weight: 700; }
.kf .wpn { color: #fff; opacity: .9; font-size: 13px; letter-spacing: 1px; }
.kf .hs { color: #ff5a4a; font-weight: 700; }
@keyframes kfin { from { transform: translateX(30px); opacity: 0; } }

#dmgnums { position: absolute; inset: 0; overflow: hidden; }
.dn { position: absolute; font-weight: 800; font-size: 22px; color: #fff; transform: translate(-50%, -50%); white-space: nowrap;
  text-shadow: 0 0 3px #000, 0 2px 4px #000; }
.dn.head { color: #ff4b3a; font-size: 30px; }
.dn.leg { color: #c9d3de; font-size: 19px; }
.dn small { display: block; font-size: 12px; letter-spacing: 2px; text-align: center; }

#nameplate { position: absolute; transform: translate(-50%, -100%); font-size: 13px; letter-spacing: 1px; color: #6fb4ff; font-weight: 700; display: none; }
#nameplate b { color: #ffd27a; }

#hp { position: absolute; left: 22px; bottom: 18px; font-size: 40px; font-weight: 700; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0)); padding: 2px 40px 2px 12px; }
#hp .ico { font-size: 26px; color: #e9eef3; opacity: .9; } #hp .arm { margin-left: 14px; }
#ammo { position: absolute; right: 24px; bottom: 18px; text-align: right; font-weight: 700;
  background: linear-gradient(270deg, rgba(0,0,0,.55), rgba(0,0,0,0)); padding: 2px 12px 4px 50px; }
#ammo-mag { font-size: 46px; } #ammo .sep { font-size: 26px; opacity: .6; margin: 0 6px; } #ammo-res { font-size: 26px; opacity: .85; }
#ammo.low #ammo-mag { color: #ff5a4a; }
#wname { font-size: 13px; letter-spacing: 3px; color: #b9c6d4; margin-top: -4px; }
#slots { position: absolute; right: 24px; bottom: 110px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#slots div { font-size: 14px; letter-spacing: 2px; color: rgba(255,255,255,.45); padding: 2px 8px; }
#slots div.on { color: #fff; background: rgba(0,0,0,.45); border-right: 3px solid #e8c35a; }
#slots div b { color: #e8c35a; margin-right: 8px; }
#hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 12px; color: rgba(255,255,255,.55); letter-spacing: 1px; }
#toast { position: absolute; top: 34%; left: 50%; transform: translateX(-50%); font-size: 20px; letter-spacing: 2px; color: #ffd27a;
  opacity: 0; transition: opacity .25s; background: rgba(0,0,0,.45); padding: 6px 16px; border-radius: 3px; }
#toast.show { opacity: 1; }

/* ---------- Menü ---------- */
#menu, #loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: radial-gradient(ellipse at center, rgba(20,16,10,.55), rgba(0,0,0,.88)); z-index: 10; }
#loading { background: radial-gradient(ellipse at center, #2a2216 0%, #0b0907 75%); }
.logo { font-size: 72px; font-weight: 800; letter-spacing: 14px; color: #f1c66b; text-align: center;
  text-shadow: 0 4px 18px rgba(0,0,0,.8), 0 0 40px rgba(241,160,60,.25); }
.logo small { display: block; font-size: 16px; letter-spacing: 6px; color: #cfc3ad; font-weight: 400; margin-top: 2px; }
.lbar { width: 420px; height: 6px; background: rgba(255,255,255,.12); margin-top: 34px; border-radius: 3px; overflow: hidden; }
#lprog { height: 100%; width: 0; background: linear-gradient(90deg, #d8823a, #f1c66b); transition: width .2s; }
#ltext { margin-top: 12px; color: #a99d88; font-size: 14px; letter-spacing: 2px; }
.panel { width: min(920px, 94vw); background: rgba(14,12,9,.82); border: 1px solid rgba(241,198,107,.25); padding: 26px 34px; border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.panel .logo { font-size: 54px; }
#play { display: block; margin: 18px auto 22px; padding: 14px 70px; font: inherit; font-size: 24px; font-weight: 800; letter-spacing: 6px;
  color: #1a1206; background: linear-gradient(180deg, #f6d27e, #d99a3c); border: 0; border-radius: 3px; cursor: pointer; }
#play:hover { filter: brightness(1.1); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.panel h3 { font-size: 14px; letter-spacing: 4px; color: #f1c66b; margin-bottom: 10px; font-weight: 700; }
.settings label { display: block; font-size: 14px; color: #ddd; margin-bottom: 12px; }
.settings output { float: right; color: #f1c66b; }
.settings input[type=range] { width: 100%; accent-color: #e0a64a; margin-top: 4px; }
.settings select { width: 100%; margin-top: 4px; padding: 5px; background: #221c14; color: #fff; border: 1px solid #5a4a30; font: inherit; }
.controls table { width: 100%; font-size: 14px; border-collapse: collapse; }
.controls td { padding: 3px 0; color: #ddd; } .controls td:first-child { color: #f1c66b; width: 46%; font-weight: 700; }
.credits { margin-top: 18px; font-size: 12px; color: #8b8070; text-align: center; letter-spacing: 1px; }