html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b0d10;
  font-family: "Segoe UI", "IBM Plex Sans", system-ui, sans-serif;
  color: #e8ecef;
  user-select: none;
}
#c { display: block; width: 100%; height: 100%; }
#hud {
  position: fixed; inset: 0; pointer-events: none;
}
.topbar {
  position: absolute; top: 14px; left: 16px; right: 16px;
  display: flex; justify-content: space-between; align-items: flex-start;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.9;
}
.title { font-weight: 700; color: #f2c14e; }
.meta { text-align: right; color: #b7c0c8; }
#hudK { color: #f2c14e; font-weight: 700; }
#feed {
  position: absolute; top: 44px; right: 16px; width: 320px;
  font-size: 12px; text-align: right; line-height: 1.5; color: #d5dde3;
}
#feed div { opacity: 0.92; }
#feed .hs { color: #ffb14a; }
#feed .youkill { color: #f2c14e; }
.bottom {
  position: absolute; left: 0; right: 0; bottom: 22px;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 28px;
}
.hpwrap { width: 240px; }
.hpbar {
  height: 10px; background: #1b2228; border: 1px solid #3a4650;
}
.hpfill { height: 100%; background: #3ecf7a; width: 100%; }
.hptext { margin-top: 6px; font-size: 12px; letter-spacing: 0.12em; color: #c5cdd3; }
.centerbot { text-align: center; min-width: 200px; }
.wep { font-size: 18px; font-weight: 700; letter-spacing: 0.16em; color: #f2c14e; }
.ammo { font-size: 28px; font-variant-numeric: tabular-nums; }
.ammo span { font-size: 14px; color: #8b969e; }
.util { margin-top: 4px; font-size: 11px; letter-spacing: 0.16em; color: #9aa8b2; }
.score { text-align: right; font-size: 11px; letter-spacing: 0.14em; color: #8b969e; text-transform: lowercase; }
.score b { color: #fff; font-size: 20px; letter-spacing: 0.06em; text-transform: none; }
#slots {
  position: absolute; left: 28px; bottom: 78px;
  font-size: 11px; letter-spacing: 0.1em; color: #8b969e;
  line-height: 1.45;
}
#slots b { color: #f2c14e; }
#brandmark {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.28em; color: rgba(242,193,78,0.35);
  text-transform: lowercase;
}
#cross {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  transform: translate(-50%, -50%);
}
#cross i {
  position: absolute; background: #e8ecef;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.45);
}
#cross .h { height: 2px; width: 8px; top: 6px; }
#cross .h.l { left: -6px; } #cross .h.r { right: -6px; }
#cross .v { width: 2px; height: 8px; left: 6px; }
#cross .v.t { top: -6px; } #cross .v.b { bottom: -6px; }
#cross.hit i { background: #ff4d4d; }
#cross.head i { background: #ffb14a; }
#cross.hide { opacity: 0; }
#hm {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px;
  margin: -9px 0 0 -9px; opacity: 0;
  border: 2px solid #ff4d4d; transform: rotate(45deg);
}
#hm.on { opacity: 1; }
#hm.head { border-color: #ffb14a; }
#scope {
  display: none; position: absolute; inset: 0;
  background: transparent;
  pointer-events: none;
}
#scope.on { display: block; }
#scope .ring {
  position: absolute; left: 50%; top: 50%;
  width: min(52vh, 52vw); height: min(52vh, 52vw);
  margin: calc(min(52vh, 52vw) / -2) 0 0 calc(min(52vh, 52vw) / -2);
  border-radius: 50%;
  box-shadow: 0 0 0 200vmax #050607;
  background: radial-gradient(circle at 50% 50%, transparent 62%, rgba(5,6,7,0.55) 86%, #050607 100%);
}
#scope.dmr .ring {
  width: min(78vh, 78vw); height: min(78vh, 78vw);
  margin: calc(min(78vh, 78vw) / -2) 0 0 calc(min(78vh, 78vw) / -2);
  box-shadow: 0 0 0 200vmax rgba(5, 6, 7, 0.48);
  background: radial-gradient(circle at 50% 50%, transparent 70%, rgba(5,6,7,0.22) 88%, rgba(5,6,7,0.5) 100%);
}
#scope.sniper .ring {
  width: min(46vh, 46vw); height: min(46vh, 46vw);
  margin: calc(min(46vh, 46vw) / -2) 0 0 calc(min(46vh, 46vw) / -2);
  box-shadow: 0 0 0 200vmax #050607;
  background: radial-gradient(circle at 50% 50%, transparent 58%, rgba(5,6,7,0.62) 84%, #050607 100%);
}
#scope .hair {
  position: absolute; left: 50%; top: 50%; background: rgba(232,236,239,0.55);
}
#scope .hair.h { width: 18px; height: 1px; margin: 0 0 0 -9px; }
#scope .hair.v { width: 1px; height: 18px; margin: -9px 0 0 0; }
#vignette {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 80px 20px rgba(160, 20, 20, 0);
}
#stunfx {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 120px 40px rgba(200, 180, 60, 0);
}
#dmgind i {
  position: absolute; opacity: 0; pointer-events: none;
  background: linear-gradient(var(--dir), rgba(210,28,28,0.72), transparent);
  transition: opacity 0.08s linear;
}
#dmgind i.on { opacity: 1; }
#dmgind .n { top: 0; left: 18%; right: 18%; height: 56px; --dir: to bottom; }
#dmgind .s { bottom: 0; left: 18%; right: 18%; height: 56px; --dir: to top; }
#dmgind .e { right: 0; top: 18%; bottom: 18%; width: 56px; --dir: to left; }
#dmgind .w { left: 0; top: 18%; bottom: 18%; width: 56px; --dir: to right; }
#pickup {
  position: absolute; left: 50%; bottom: 110px; transform: translateX(-50%);
  font-size: 13px; letter-spacing: 0.14em; color: #f2c14e; opacity: 0;
}
#pickup.on { opacity: 1; }
#brandflash {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  pointer-events: none; font-size: 64px; letter-spacing: 0.18em; color: #f2c14e;
  text-shadow: 0 0 24px rgba(242,193,78,0.35);
  animation: brandpop 0.85s ease-out forwards;
}
#brandflash.on { display: flex; }
@keyframes brandpop {
  0% { opacity: 0; transform: scale(0.86); }
  18% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}
#overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 8, 10, 0.72);
  pointer-events: auto; cursor: default;
}
#overlay .card {
  text-align: center; max-width: 720px; padding: 28px 32px;
  border: 1px solid #2b353c; background: #12171b;
}
#overlay .maps {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin: 16px 0 8px;
}
#overlay .maps button {
  pointer-events: auto; cursor: pointer;
  background: #1a2228; color: #c8d0d6; border: 1px solid #3a4650;
  letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px;
  padding: 10px 12px; min-width: 132px;
}
#overlay .maps button:hover { border-color: #f2c14e; color: #fff; }
#overlay .maps button.on { background: #2a2414; border-color: #f2c14e; color: #f2c14e; }
#overlay .play {
  display: block; width: 100%; margin-top: 10px;
  pointer-events: auto; cursor: pointer;
  background: #f2c14e; color: #1a1408; border: 0;
  letter-spacing: 0.22em; font-weight: 700; font-size: 16px;
  padding: 12px 16px;
}
#overlay .play:hover { filter: brightness(1.08); }
#overlay .hint { display: none; }
#overlay h1 {
  margin: 0 0 8px; letter-spacing: 0.18em; font-size: 48px; color: #f2c14e;
  text-transform: lowercase;
}
#overlay h2 { margin: 0 0 18px; font-weight: 500; font-size: 13px; letter-spacing: 0.2em; color: #9aa6ae; }
#overlay p { margin: 0 0 10px; color: #c8d0d6; font-size: 14px; line-height: 1.5; }
#overlay .hint { margin-top: 16px; color: #f2c14e; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; }
#dead {
  position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(40, 0, 0, 0.45); pointer-events: none; gap: 8px;
  font-size: 28px; letter-spacing: 0.3em; color: #ffd0d0;
}
#deadby { font-size: 13px; letter-spacing: 0.16em; color: #f2c14e; }
#board {
  position: absolute; left: 50%; top: 90px; transform: translateX(-50%);
  display: none; min-width: 320px; background: rgba(10,14,18,0.86);
  border: 1px solid #314049; padding: 12px 16px; font-size: 13px;
}
#board h3 { margin: 0 0 8px; letter-spacing: 0.18em; color: #f2c14e; font-size: 12px; }
#board table { width: 100%; border-collapse: collapse; }
#board td { padding: 3px 6px; }
#board td.n { color: #fff; }
#board td.you { color: #f2c14e; }

#feed .wicon { width: 16px; height: 16px; vertical-align: -3px; margin: 0 6px; image-rendering: pixelated; }
#feed span { vertical-align: middle; }
#netstat { letter-spacing: 0.12em; }
#netstat.online { color: #3ecf7a; }
#netstat.connecting { color: #f2c14e; }
#netstat.offline { color: #8b969e; }
#plist {
  position: absolute; top: 52px; left: 16px; max-width: 280px;
  font-size: 11px; letter-spacing: 0.08em; color: #8b969e;
}
#board { min-width: 420px; }
#board td.hd, #board tr.hd td { color: #8b969e; font-size: 11px; letter-spacing: 0.12em; }
.namefield {
  display: block; margin: 12px auto 14px; color: #9aa6ae;
  letter-spacing: 0.16em; font-size: 11px;
}
.namefield input {
  display: block; width: 100%; margin-top: 6px; box-sizing: border-box;
  pointer-events: auto; cursor: text;
  background: #0e1317; color: #e8ecef; border: 1px solid #3a4650;
  padding: 10px 12px; font-size: 16px; letter-spacing: 0.08em; text-align: center;
}
.namefield input:focus { outline: none; border-color: #f2c14e; }
.namefield input.bad { border-color: #e24b4b; }
#slots { min-width: 180px; }

#clock { color: #f2c14e; font-variant-numeric: tabular-nums; letter-spacing: 0.12em; }
#feed { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
#feed div { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
#feed img.wicon { width: 18px; height: 18px; image-rendering: pixelated; opacity: 0.95; }
#dmgfloat { position: absolute; inset: 0; pointer-events: none; }
#dmgfloat .dnum {
  position: absolute; left: 52%; top: 44%;
  font-size: 18px; font-weight: 700; color: #ff4d4d;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(0,0,0,0.6);
  animation: dmgpop 0.7s ease-out forwards;
  letter-spacing: 0.04em;
}
#dmgfloat .dnum.hs { color: #ffb14a; font-size: 22px; }
@keyframes dmgpop {
  0% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  100% { opacity: 0; transform: translate(-40%, -28px) scale(0.92); }
}
#chatlog {
  position: absolute; left: 16px; bottom: 128px; width: 320px;
  font-size: 13px; line-height: 1.45; color: #e8ecef;
  text-shadow: 0 1px 2px #000;
}
#chatlog div { opacity: 0.92; margin-top: 2px; transition: opacity 0.6s linear; }
#chatlog div.fade { opacity: 0; }
#chatlog b { color: #f2c14e; font-weight: 600; }
#chatbox {
  position: fixed; left: 16px; bottom: 18px; width: min(420px, 70vw);
  display: none; pointer-events: auto; z-index: 20;
}
#chatbox.on { display: block; }
#chatIn {
  width: 100%; box-sizing: border-box;
  background: rgba(12,16,20,0.72);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff; font: 14px "Segoe UI", system-ui, sans-serif;
  padding: 8px 12px; outline: none;
  backdrop-filter: blur(10px);
}
#board.end { display: block !important; border-color: #f2c14e; }
#board .hd td { color: #8b969e; font-size: 10px; letter-spacing: 0.14em; }
#overlay {
  background:
    radial-gradient(1200px 700px at 50% 8%, rgba(242,193,78,0.08), transparent 55%),
    rgba(6, 8, 10, 0.38);
  backdrop-filter: blur(10px) saturate(1.15);
}
#overlay .card { display: none; }
#overlay .glass {
  text-align: center; width: min(640px, 92vw);
  padding: 36px 36px 28px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 24px 60px rgba(0,0,0,0.35);
  backdrop-filter: blur(28px) saturate(1.45);
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
}
#overlay .onlinepill {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(232,236,239,0.55); margin-bottom: 10px;
}
#overlay #netstat.online { color: #3ecf7a; }
#overlay #netstat.connecting { color: #f2c14e; }
#overlay #netstat.offline { color: #8b969e; }
#overlay h1 {
  margin: 0; letter-spacing: 0.06em; font-size: 72px; font-weight: 650;
  color: #fff; text-transform: lowercase;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
#overlay .sub {
  margin: 4px 0 10px; font-size: 13px; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(242,193,78,0.85);
}
#overlay .blurb { margin: 0 0 18px; color: rgba(232,236,239,0.72); font-size: 14px; }
#overlay .namewrap {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin: 0 auto 18px; max-width: 280px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #9aa6ae;
}
#overlay #nameIn {
  flex: 1; pointer-events: auto; cursor: text;
  background: rgba(8,10,12,0.35);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  color: #fff; font: 14px "Segoe UI", system-ui, sans-serif;
  padding: 8px 14px; outline: none; letter-spacing: 0.04em; text-transform: none;
}
#overlay #nameIn:focus { border-color: rgba(242,193,78,0.7); }
#overlay #nameIn.bad { border-color: #e24b4b; }
#overlay .maps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 8px 0 18px;
}
#overlay .maps button {
  pointer-events: auto; cursor: pointer;
  background: rgba(255,255,255,0.04);
  color: rgba(232,236,239,0.7);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px;
  padding: 12px 8px; min-width: 0;
}
#overlay .maps button:hover { border-color: rgba(242,193,78,0.45); color: #fff; }
#overlay .maps button.on {
  background: rgba(242,193,78,0.12);
  border-color: rgba(242,193,78,0.55); color: #f2c14e;
}
#overlay .play {
  display: block; width: 100%; margin: 0 auto;
  pointer-events: auto; cursor: pointer;
  background: rgba(255,255,255,0.92); color: #111;
  border: 0; border-radius: 999px;
  letter-spacing: 0.28em; font-weight: 700; font-size: 15px;
  padding: 14px 16px;
  box-shadow: inset 0 1px 0 #fff, 0 8px 24px rgba(0,0,0,0.2);
}
#overlay .play:hover { filter: brightness(1.04); }
#overlay .hintline {
  margin: 16px 0 6px; color: rgba(232,236,239,0.4);
  font-size: 11px; letter-spacing: 0.08em;
}
#overlay .plist {
  margin: 0; color: rgba(232,236,239,0.35); font-size: 11px;
}