:root {
  --alpha: #f0a03c;
  --bravo: #3fb4e8;
  --ink: #dfe6ec;
  --dim: #8c9aa8;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #0d1013; color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  user-select: none;
  -webkit-user-select: none;
}
#game { position: fixed; inset: 0; }
#game canvas { display: block; }

.hidden { display: none !important; }

/* ------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }

#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair .ch { position: absolute; background: rgba(232, 242, 250, 0.92); box-shadow: 0 0 2px rgba(0,0,0,.9); }
#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; opacity: .8; }
#crosshair.hide { opacity: 0; }
#crosshair { transition: opacity .09s linear; }

#hitmarker { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
#hitmarker i {
  position: absolute; width: 8px; height: 2px; background: #fff;
  box-shadow: 0 0 3px rgba(0,0,0,.9);
}
#hitmarker i:nth-child(1) { transform: rotate(45deg) translate(6px, 0); }
#hitmarker i:nth-child(2) { transform: rotate(-45deg) translate(6px, 0); }
#hitmarker i:nth-child(3) { transform: rotate(135deg) translate(6px, 0); }
#hitmarker i:nth-child(4) { transform: rotate(-135deg) translate(6px, 0); }
#hitmarker.show { opacity: 1; }
#hitmarker.head i { background: #ff5c4d; }

#dmgdir {
  position: absolute; left: 50%; top: 50%; width: 220px; height: 220px;
  margin: -110px 0 0 -110px; border-radius: 50%;
  border: 3px solid transparent; opacity: 0;
  background: radial-gradient(circle, transparent 58%, rgba(214, 40, 30, .55) 100%);
  transition: opacity .4s ease-out;
}

#topbar {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 22px;
  background: rgba(10, 14, 18, .55);
  border: 1px solid rgba(255,255,255,.08);
  padding: 8px 18px; border-radius: 4px;
  backdrop-filter: blur(4px);
}
.teamscore { display: flex; align-items: baseline; gap: 8px; font-size: 22px; font-weight: 700; letter-spacing: .06em; }
.teamscore .label { font-size: 10px; letter-spacing: .18em; opacity: .7; }
.teamscore.alpha { color: var(--alpha); }
.teamscore.bravo { color: var(--bravo); }
#timerbox { text-align: center; }
#timer { font-size: 20px; font-weight: 700; letter-spacing: .08em; }
#timer.warn { color: #ff6a5a; }
#roundno { font-size: 9px; letter-spacing: .22em; color: var(--dim); margin-top: 2px; }

#vitals { position: absolute; left: 22px; bottom: 22px; width: 190px; }
#vitals .bar {
  position: relative; height: 15px; margin-top: 6px;
  background: rgba(8, 12, 15, .68); border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
}
#vitals .bar > div { position: absolute; inset: 0 auto 0 0; width: 100%; transition: width .18s ease-out; }
#hpfill { background: linear-gradient(90deg, #4fae5a, #7fd88a); }
#hpfill.low { background: linear-gradient(90deg, #b8352a, #e2634f); }
#apfill { background: linear-gradient(90deg, #3b6f9e, #6ea8d6); }
#vitals .bar span {
  position: absolute; right: 6px; top: -1px; font-size: 11px;
  line-height: 15px; text-shadow: 0 1px 2px #000;
}

#ammo { position: absolute; right: 22px; bottom: 22px; text-align: right; }
#ammo .row { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
#mag { font-size: 40px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
#mag.empty { color: #ff6a5a; }
#reserve { font-size: 15px; color: var(--dim); }
#wname { font-size: 9px; letter-spacing: .2em; color: var(--dim); margin-top: 4px; }
#reloadbar { height: 3px; width: 132px; margin: 7px 0 0 auto; background: rgba(255,255,255,.12); opacity: 0; }
#reloadbar.on { opacity: 1; }
#reloadfill { height: 100%; width: 0%; background: var(--alpha); }

#killfeed { position: absolute; right: 22px; top: 92px; width: 320px; text-align: right; }
.kf {
  font-size: 12px; padding: 3px 7px; margin-bottom: 3px;
  background: rgba(10, 14, 18, .62); display: inline-block;
  border-left: 2px solid #555; animation: kfin .18s ease-out;
}
.kf.me { border-left-color: var(--alpha); }
.kf .a { color: var(--alpha); }
.kf .b { color: var(--bravo); }
.kf .w { color: #cfd8e0; opacity: .75; margin: 0 6px; }
@keyframes kfin { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } }

#banner {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
  font-size: 26px; letter-spacing: .16em; font-weight: 700;
  text-shadow: 0 2px 12px rgba(0,0,0,.85), 0 0 24px rgba(0,0,0,.6);
  opacity: 0; transition: opacity .25s; text-align: center; white-space: nowrap;
}
#banner.on { opacity: 1; }
#banner .sub { display: block; font-size: 12px; letter-spacing: .3em; opacity: .8; margin-top: 6px; font-weight: 400; }

#netstat { position: absolute; left: 22px; top: 18px; font-size: 10px; color: var(--dim); letter-spacing: .1em; }

/* ------------------------------------------------------------ overlays */
.overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(18, 24, 30, .72), rgba(6, 8, 10, .92));
  backdrop-filter: blur(3px); z-index: 20;
}
.overlay.hidden { display: none; }
.panel {
  width: min(520px, 90vw); padding: 34px 36px;
  background: rgba(13, 17, 21, .9);
  border: 1px solid rgba(255,255,255,.1);
  border-top: 2px solid var(--alpha);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.panel.small { width: min(360px, 86vw); text-align: center; }
h1 {
  margin: 0 0 10px; font-size: 34px; letter-spacing: .1em; font-weight: 800;
}
h1 span { color: var(--alpha); }
.tag { margin: 0 0 22px; font-size: 11.5px; line-height: 1.7; color: var(--dim); letter-spacing: .04em; }
h2 { margin: 0 0 8px; font-size: 19px; letter-spacing: .16em; }
.panel p { font-size: 12px; color: var(--dim); line-height: 1.6; }

#name {
  width: 100%; padding: 11px 12px; margin-bottom: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  color: var(--ink); font: inherit; font-size: 13px; letter-spacing: .08em;
  outline: none;
}
#name:focus { border-color: var(--alpha); }
button {
  width: 100%; padding: 13px; cursor: pointer;
  background: var(--alpha); color: #14100a; border: 0;
  font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .2em;
}
button:hover { filter: brightness(1.1); }
button:disabled { opacity: .5; cursor: default; }

.ctl {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 14px;
  margin: 22px 0 16px; font-size: 10.5px; color: var(--dim);
}
.ctl b { color: var(--ink); font-weight: 600; }
.sens { display: flex; align-items: center; gap: 12px; font-size: 10.5px; color: var(--dim); letter-spacing: .1em; }
.sens input { flex: 1; accent-color: var(--alpha); }

#paused { pointer-events: auto; }
#dead { background: rgba(40, 6, 4, .35); backdrop-filter: none; }
#dead h2 { color: #ff6a5a; }