:root {
  --ink: #0a0807;
  --bone: #ece3cf;
  --bone-dim: rgba(236, 227, 207, 0.58);
  --bone-faint: rgba(236, 227, 207, 0.14);
  --blood: #9c0f16;
  --blood-bright: #d42029;
  --amber: #e3a93c;
  --panel: rgba(12, 9, 8, 0.8);
  --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --ui: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --black: 'UnifrakturMaguntia', 'Old English Text MT', serif;
  --u: min(1vh, 1.6vw);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--bone); font-family: var(--ui); }
body { user-select: none; -webkit-user-select: none; }
[hidden] { display: none !important; }
canvas#c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

#grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 50; opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.3 -0.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 0.6s steps(6) infinite;
}
body.ingame #grain { opacity: 0; }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; }
#title, #lobby, #over, #disc, #loading {
  background: radial-gradient(ellipse at 50% 38%, rgba(10, 6, 5, 0.15) 0%, rgba(8, 5, 4, 0.72) 55%, rgba(4, 2, 2, 0.95) 100%);
}
#pause { background: rgba(5, 3, 3, 0.62); backdrop-filter: blur(3px); z-index: 40; }
#clicktoplay { z-index: 35; background: rgba(0, 0, 0, 0.35); cursor: pointer; }

.panel {
  background: var(--panel); border: 1px solid var(--bone-faint); padding: 28px 30px; width: min(440px, 100%);
  display: flex; flex-direction: column; gap: 14px; backdrop-filter: blur(6px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
h2 { font-family: var(--display); font-weight: 400; letter-spacing: 0.04em; margin: 0; font-size: 40px; line-height: 1; text-transform: uppercase; }

.btn {
  font-family: var(--ui); font-weight: 500; font-size: 17px; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--bone-faint); background: rgba(236, 227, 207, 0.06); color: var(--bone);
  padding: 12px 18px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.08s, color 0.15s;
}
.btn:hover { background: rgba(236, 227, 207, 0.13); border-color: rgba(236, 227, 207, 0.35); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.primary { background: var(--blood); border-color: #c31a23; color: #fff4e6; box-shadow: 0 0 24px rgba(156, 15, 22, 0.35); }
.btn.primary:hover { background: #b8141c; }
.btn.ghost { background: transparent; }
.btn.small { font-size: 13px; padding: 8px 12px; letter-spacing: 0.14em; }
.btn:focus-visible, input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

input[type=text], input:not([type]) {
  font-family: var(--ui); font-size: 18px; color: var(--bone); background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--bone-faint); padding: 11px 12px; width: 100%; letter-spacing: 0.04em;
}
input::placeholder { color: rgba(236, 227, 207, 0.3); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span, .lobby-label { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bone-dim); }
.msg { min-height: 1.2em; font-size: 15px; color: #ff8f7a; letter-spacing: 0.03em; }
.msg.ok { color: var(--amber); }

/* ---------- title ---------- */
.title-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 4vh, 44px); width: 100%; }
.marquee { text-align: center; }
.marquee-top {
  font-family: var(--black); color: var(--amber); font-size: clamp(26px, 4.4vh, 46px); line-height: 1;
  text-shadow: 0 0 18px rgba(227, 169, 60, 0.45); margin-bottom: 0.1em;
}
.logo {
  position: relative; margin: 0; font-family: var(--display); font-weight: 400; line-height: 0.86;
  font-size: clamp(72px, min(19vh, 15vw), 210px); letter-spacing: 0.035em; color: var(--bone);
  text-shadow: 0 0 40px rgba(236, 227, 207, 0.18);
  animation: flicker 7s infinite;
}
.logo::before {
  content: attr(data-text); position: absolute; inset: 0; color: var(--blood); z-index: -1;
  transform: translate(0.045em, 0.04em); text-shadow: none; filter: blur(0.5px);
}
.marquee-sub {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px;
  font-size: clamp(12px, 1.6vh, 15px); letter-spacing: 0.3em; text-transform: uppercase; color: var(--bone-dim);
}
.marquee-sub span { display: block; width: clamp(20px, 6vw, 70px); height: 1px; background: var(--bone-faint); }
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; filter: none; }
  20%, 24%, 55% { opacity: 0.55; filter: brightness(0.7); }
  70% { opacity: 0.93; } 71% { opacity: 1; }
}
#title-form { width: min(380px, 100%); }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
#code { text-transform: uppercase; letter-spacing: 0.5em; text-align: center; font-family: var(--display); font-size: 22px; padding: 8px 10px 8px 18px; }
.title-foot { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(236, 227, 207, 0.35); text-align: center; }

/* ---------- lobby ---------- */
.lobby-panel { align-items: stretch; text-align: center; }
.lobby-code {
  font-family: var(--display); font-size: clamp(64px, 13vh, 118px); letter-spacing: 0.22em; line-height: 1;
  padding-left: 0.22em; color: var(--bone); text-shadow: 3px 3px 0 var(--blood);
}
.player-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.player-list li {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: rgba(0, 0, 0, 0.35);
  border-left: 4px solid var(--c, var(--bone)); font-size: 18px; letter-spacing: 0.04em;
}
.player-list li .you { margin-left: auto; font-size: 11px; letter-spacing: 0.25em; color: var(--bone-dim); text-transform: uppercase; }
.lobby-note { font-size: 13px; color: var(--bone-dim); letter-spacing: 0.05em; }
.cheat-note { color: var(--amber); letter-spacing: 0.25em; text-transform: uppercase; font-size: 11px; }

/* ---------- click to play ---------- */
.ctp-inner { text-align: center; }
.ctp-big { font-family: var(--display); font-size: clamp(40px, 8vh, 76px); letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 4px 30px #000; }
.ctp-small { font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bone-dim); }

/* ---------- pause ---------- */
.pause-panel { width: min(470px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.pause-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pause-room { font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--bone-dim); }
.pause-room b { font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--bone); letter-spacing: 0.2em; }
.pause-note { font-size: 13px; color: var(--bone-dim); margin-top: -6px; }
.settings { display: flex; flex-direction: column; gap: 12px; padding: 6px 0; }
.slider { display: flex; flex-direction: column; gap: 6px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim); }
.slider b { color: var(--bone); font-weight: 500; margin-left: 6px; }
input[type=range] { width: 100%; accent-color: var(--blood-bright); }
.check { display: flex; gap: 10px; align-items: center; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim); cursor: pointer; }
.check input { accent-color: var(--blood-bright); width: 16px; height: 16px; }
.cheats .cheat-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
kbd { font-family: var(--ui); font-size: 0.85em; border: 1px solid var(--bone-faint); padding: 0 5px; margin-left: 4px; color: var(--bone-dim); }
.controls summary { cursor: pointer; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-dim); }
.controls dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; margin: 10px 0 0; font-size: 14px; }
.controls dt { color: var(--amber); letter-spacing: 0.06em; }
.controls dd { margin: 0; color: var(--bone); }

/* ---------- game over ---------- */
.over-panel { width: min(640px, 100%); text-align: center; }
.over-title { font-size: clamp(56px, 10vh, 96px); color: var(--blood-bright); text-shadow: 0 0 30px rgba(212, 32, 41, 0.35); font-family: var(--black); text-transform: none; letter-spacing: 0.01em; }
.over-sub { font-size: 16px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--bone-dim); }
.over-sub b { color: var(--bone); font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: 0.08em; }
.over-actions { display: flex; flex-direction: column; gap: 8px; }
table.stats, #scoreboard table { width: 100%; border-collapse: collapse; font-size: 16px; }
table.stats th, #scoreboard th { font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); padding: 6px 8px; text-align: right; }
table.stats td, #scoreboard td { padding: 8px; text-align: right; border-top: 1px solid var(--bone-faint); font-variant-numeric: tabular-nums; }
table.stats td:first-child, #scoreboard td:first-child, table.stats th:first-child, #scoreboard th:first-child { text-align: left; }
td .swatch { display: inline-block; width: 10px; height: 10px; margin-right: 10px; background: var(--c); vertical-align: 1px; }

.disc-panel { text-align: center; }
.loading-inner { font-family: var(--black); font-size: 34px; color: var(--amber); animation: flicker 3s infinite; }

#toast {
  position: fixed; left: 50%; top: 22px; transform: translate(-50%, -140%); z-index: 60; padding: 10px 18px;
  background: rgba(120, 12, 16, 0.92); border: 1px solid #d42029; font-size: 15px; letter-spacing: 0.05em;
  transition: transform 0.25s, opacity 0.25s, visibility 0.25s; pointer-events: none; max-width: calc(100vw - 32px);
  opacity: 0; visibility: hidden;
}
#toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 20; font-family: var(--ui); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }

#crosshair { position: absolute; left: 50%; top: 50%; --gap: 10px; transition: opacity 0.12s; }
#crosshair i { position: absolute; background: rgba(255, 250, 240, 0.9); box-shadow: 0 0 2px rgba(0, 0, 0, 0.9); }
#crosshair .ch-t, #crosshair .ch-b { width: 2px; height: 9px; left: -1px; }
#crosshair .ch-l, #crosshair .ch-r { width: 9px; height: 2px; top: -1px; }
#crosshair .ch-t { top: calc(-1 * var(--gap) - 9px); }
#crosshair .ch-b { top: var(--gap); }
#crosshair .ch-l { left: calc(-1 * var(--gap) - 9px); }
#crosshair .ch-r { left: var(--gap); }
#crosshair b { position: absolute; width: 2px; height: 2px; left: -1px; top: -1px; background: rgba(255, 250, 240, 0.8); }
#crosshair.hidden { opacity: 0; }

#hitmarker { position: absolute; left: 50%; top: 50%; opacity: 0; --c: #fff; }
#hitmarker i { position: absolute; width: 11px; height: 2px; background: var(--c); box-shadow: 0 0 3px rgba(0, 0, 0, 0.8); left: -5.5px; top: -1px; }
#hitmarker i:nth-child(1) { transform: rotate(45deg) translateX(-11px); }
#hitmarker i:nth-child(2) { transform: rotate(45deg) translateX(11px); }
#hitmarker i:nth-child(3) { transform: rotate(-45deg) translateX(-11px); }
#hitmarker i:nth-child(4) { transform: rotate(-45deg) translateX(11px); }
#hitmarker.show { animation: hitm 0.28s ease-out; }
#hitmarker.head { --c: #ffd24a; }
#hitmarker.kill { --c: #ff2e2e; }
#hitmarker.kill.show { animation: hitk 0.42s ease-out; }
@keyframes hitm { 0% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1); } }
@keyframes hitk { 0% { opacity: 1; transform: scale(1.6); } 60% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }

#scope { position: absolute; inset: 0; }
#scope .scope-ring { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0, transparent 38vmin, rgba(0, 0, 0, 0.6) 38.4vmin, #000 39.5vmin); }
#scope i { position: absolute; background: rgba(0, 0, 0, 0.85); }
#scope .scope-h { left: 50%; top: 50%; width: 76vmin; height: 1px; transform: translate(-50%, -0.5px); }
#scope .scope-v { left: 50%; top: 50%; height: 76vmin; width: 1px; transform: translate(-0.5px, -50%); }

#left-stack { position: absolute; left: calc(3.2 * var(--u)); bottom: calc(2.6 * var(--u)); display: flex; flex-direction: column; gap: calc(1.2 * var(--u)); align-items: flex-start; }
#round { position: relative; line-height: 0.8; }
#round .round-num {
  font-family: var(--display); font-size: calc(13 * var(--u)); color: #8e0c12; letter-spacing: 0.02em;
  text-shadow: 0 0 calc(2 * var(--u)) rgba(150, 10, 14, 0.45), 2px 3px 0 rgba(0, 0, 0, 0.6);
  transform: skewX(-4deg);
}
#round .round-tally { display: flex; gap: calc(1.1 * var(--u)); height: calc(10 * var(--u)); align-items: stretch; position: relative; padding: 0 calc(0.4 * var(--u)); }
#round .round-tally i {
  display: block; width: calc(1.3 * var(--u)); background: #8e0c12; border-radius: 40% 40% 30% 30%;
  box-shadow: 0 0 calc(1.6 * var(--u)) rgba(150, 10, 14, 0.45); transform: rotate(var(--r, 0deg));
}
#round .round-tally i.slash {
  position: absolute; left: -10%; top: 45%; width: 125%; height: calc(1.2 * var(--u)); transform: rotate(-22deg);
}
#round.change .round-num, #round.change .round-tally i { animation: roundpulse 3.2s ease-out; }
@keyframes roundpulse {
  0% { color: #fff; background-color: #fff; filter: brightness(1.6); opacity: 0; }
  12% { opacity: 1; }
  45% { color: #fff; background-color: #fff; filter: brightness(1.3); }
  100% { color: #8e0c12; background-color: #8e0c12; filter: none; }
}
#round.end .round-num, #round.end .round-tally { animation: roundblink 1.2s ease-in-out infinite; }
@keyframes roundblink { 50% { opacity: 0.35; } }

#perks { display: flex; gap: calc(0.9 * var(--u)); }
.perk {
  width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--g), var(--c) 60%, #000 140%);
  box-shadow: 0 0 calc(1.4 * var(--u)) var(--g), inset 0 0 0 2px rgba(255, 255, 255, 0.25);
  animation: perkin 0.5s ease-out;
}
.perk svg { width: 64%; height: 64%; }
@keyframes perkin { 0% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

#right-stack { position: absolute; right: calc(3.2 * var(--u)); bottom: calc(2.6 * var(--u)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(1.4 * var(--u)); }
#points { display: flex; flex-direction: column; align-items: flex-end; gap: calc(0.3 * var(--u)); }
.pt-row { position: relative; display: flex; align-items: baseline; gap: calc(0.8 * var(--u)); font-family: var(--display); font-size: calc(2.7 * var(--u)); color: var(--c); letter-spacing: 0.04em; }
.pt-row .pt-name { font-family: var(--ui); font-size: calc(1.4 * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.pt-row.me { font-size: calc(4.4 * var(--u)); }
.pt-row.me .pt-name { display: none; }
.pt-row.down .pt-val { color: #ff4b4b; }
.pt-row.dead { opacity: 0.4; text-decoration: line-through; }
.pt-row::before { content: ''; width: calc(0.5 * var(--u)); align-self: stretch; margin-right: calc(0.4 * var(--u)); background: var(--c); order: 3; }
.pt-pop {
  position: absolute; right: 100%; top: 0; margin-right: 10px; font-family: var(--display); color: var(--amber);
  font-size: calc(2.6 * var(--u)); white-space: nowrap; animation: ptpop 1s ease-out forwards;
}
.pt-pop.neg { color: #ff5a4a; }
@keyframes ptpop { 0% { opacity: 1; transform: translate(0, 0) scale(1.1); } 100% { opacity: 0; transform: translate(calc(-12 * var(--u)), var(--dy, 0)) scale(0.9); } }

#weapon { text-align: right; line-height: 1; }
#weapon .ammo { font-family: var(--display); font-size: calc(6 * var(--u)); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
#weapon .ammo .sep { opacity: 0.4; margin: 0 calc(0.6 * var(--u)); font-size: 0.7em; }
#weapon .ammo .reserve { font-size: 0.62em; opacity: 0.8; }
#weapon .ammo.low .mag { color: var(--blood-bright); }
#weapon .ammo.empty { color: var(--blood-bright); }
#weapon .wname { font-size: calc(1.8 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: var(--bone-dim); margin-top: calc(0.5 * var(--u)); }
#weapon .wname.up { color: #c89bff; text-shadow: 0 0 10px rgba(160, 90, 255, 0.6); }
#weapon .nades { display: flex; justify-content: flex-end; gap: calc(0.5 * var(--u)); margin-bottom: calc(0.8 * var(--u)); height: calc(2.6 * var(--u)); }
#weapon .nades svg { height: 100%; width: auto; }

#prompt {
  position: absolute; left: 50%; bottom: 27vh; transform: translateX(-50%); font-size: calc(2.5 * var(--u)); letter-spacing: 0.06em;
  text-align: center; white-space: nowrap; opacity: 0; transition: opacity 0.12s;
}
#prompt.show { opacity: 1; }
#prompt kbd { font-family: var(--display); font-size: 1em; color: var(--ink); background: var(--bone); padding: 0 0.35em; margin: 0 0.2em; border: none; text-shadow: none; }
#prompt .cost { color: var(--amber); margin-left: 0.3em; }
#prompt .cost.poor { color: #ff4f45; }
#prompt .muted { color: var(--bone-dim); }
#progress { position: absolute; left: 50%; bottom: 23vh; transform: translateX(-50%); width: calc(30 * var(--u)); text-align: center; }
#progress .progress-label { font-size: calc(1.6 * var(--u)); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 6px; }
#progress .progress-bar { height: 6px; background: rgba(0, 0, 0, 0.6); border: 1px solid var(--bone-faint); }
#progress .progress-bar i { display: block; height: 100%; width: 0; background: var(--bone); }

#hint { position: absolute; left: 50%; top: calc(50% + 9vh); transform: translateX(-50%); font-size: calc(2 * var(--u)); letter-spacing: 0.3em; text-transform: uppercase; color: var(--amber); }
#hint.bad { color: var(--blood-bright); }

#announce {
  position: absolute; left: 50%; top: 17vh; transform: translateX(-50%); font-family: var(--display); font-size: calc(6.5 * var(--u));
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; opacity: 0;
}
#announce.show { animation: announce 2.8s ease-out forwards; }
@keyframes announce {
  0% { opacity: 0; transform: translateX(-50%) scale(1.5); letter-spacing: 0.3em; }
  10% { opacity: 1; transform: translateX(-50%) scale(1); letter-spacing: 0.08em; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(0.96); }
}

#powerups { position: absolute; left: 50%; top: calc(2.5 * var(--u)); transform: translateX(-50%); display: flex; gap: calc(1.4 * var(--u)); }
.pu { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pu .pu-icon { width: calc(6 * var(--u)); height: calc(6 * var(--u)); display: grid; place-items: center; border-radius: 12%; background: rgba(0, 0, 0, 0.5); border: 2px solid var(--c); box-shadow: 0 0 calc(1.6 * var(--u)) var(--c); color: var(--c); font-family: var(--display); font-size: calc(3 * var(--u)); }
.pu .pu-icon svg { width: 70%; height: 70%; }
.pu .pu-t { font-size: calc(1.6 * var(--u)); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.pu.blink .pu-icon { animation: blink 0.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }

#notes { position: absolute; left: calc(3.2 * var(--u)); top: calc(3 * var(--u)); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.note { font-size: calc(1.8 * var(--u)); letter-spacing: 0.06em; padding: 3px 10px 3px 8px; border-left: 3px solid var(--c, var(--bone)); background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent); animation: notein 0.25s ease-out, noteout 0.5s ease-in 4s forwards; }
.note.deny { --c: var(--blood-bright); }
.note.good { --c: var(--amber); }
@keyframes notein { from { opacity: 0; transform: translateX(-12px); } }
@keyframes noteout { to { opacity: 0; transform: translateX(-8px); } }
#denyline { position: absolute; left: 50%; bottom: 31vh; transform: translateX(-50%); }

#zone-toast {
  position: absolute; left: 50%; top: 11vh; transform: translateX(-50%); font-size: calc(2.2 * var(--u)); font-weight: 300;
  letter-spacing: 0.6em; padding-left: 0.6em; text-transform: uppercase; opacity: 0; white-space: nowrap;
}
#zone-toast::before, #zone-toast::after { content: ''; display: inline-block; width: calc(4 * var(--u)); height: 1px; background: var(--bone-dim); vertical-align: middle; margin: 0 1.2em; }
#zone-toast.show { animation: zonet 3.4s ease-out forwards; }
@keyframes zonet { 0% { opacity: 0; letter-spacing: 0.9em; } 15% { opacity: 1; letter-spacing: 0.6em; } 75% { opacity: 1; } 100% { opacity: 0; } }

#timers { position: absolute; right: calc(3.2 * var(--u)); top: calc(3 * var(--u)); display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.timer { font-size: calc(1.7 * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; background: rgba(0, 0, 0, 0.45); border-right: 3px solid var(--c, var(--amber)); }
.timer b { font-family: var(--display); font-weight: 400; font-size: 1.25em; margin-left: 8px; letter-spacing: 0.04em; }

#hit-dirs { position: absolute; left: 50%; top: 50%; }
.hitdir { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: hitdir 1.2s ease-out forwards; }
.hitdir::before {
  content: ''; position: absolute; left: calc(-9 * var(--u)); top: calc(-19 * var(--u)); width: calc(18 * var(--u)); height: calc(5 * var(--u));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-top: calc(1.1 * var(--u)) solid rgba(210, 20, 20, 0.85); filter: blur(1px);
}
@keyframes hitdir { 0% { opacity: 1; } 100% { opacity: 0; } }

#markers { position: absolute; inset: 0; }
.marker { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translate(-50%, -50%); }
.marker .mk-icon { width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); border-radius: 50%; border: 2px solid var(--c); background: rgba(160, 10, 10, 0.7); display: grid; place-items: center; animation: mkpulse 1s ease-in-out infinite; }
.marker .mk-icon svg { width: 60%; height: 60%; }
.marker .mk-label { font-size: calc(1.4 * var(--u)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); white-space: nowrap; }
.marker.reviving .mk-icon { background: rgba(255, 255, 255, 0.35); animation: none; }
@keyframes mkpulse { 50% { transform: scale(1.18); } }

#downed { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bleed-ring { width: calc(10 * var(--u)); height: calc(10 * var(--u)); transform: rotate(-90deg); }
.bleed-ring circle { fill: none; stroke-width: 7; }
.bleed-ring .bleed-bg { stroke: rgba(0, 0, 0, 0.5); }
.bleed-ring .bleed-fg { stroke: var(--blood-bright); stroke-dasharray: 326.73; stroke-dashoffset: 0; transition: stroke-dashoffset 0.2s linear, stroke 0.2s; }
#downed.reviving .bleed-fg { stroke: var(--bone); }
.downed-title { font-family: var(--display); font-size: calc(4.4 * var(--u)); letter-spacing: 0.12em; color: var(--blood-bright); }
.downed-sub { font-size: calc(1.8 * var(--u)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim); }

#spectate { position: absolute; left: 50%; top: 14vh; transform: translateX(-50%); padding: 10px 22px; background: rgba(0, 0, 0, 0.55); border: 1px solid var(--bone-faint); font-size: calc(2.1 * var(--u)); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
#spectate b { color: var(--c); font-weight: 500; }

#scoreboard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%); width: min(720px, calc(100vw - 32px)); background: rgba(8, 6, 5, 0.86); border: 1px solid var(--bone-faint); padding: 18px 22px; }
#scoreboard .sb-head { display: flex; justify-content: space-between; font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 8px; }
#scoreboard td { font-size: 18px; }
#scoreboard tr.me td { color: var(--amber); }

@media (max-width: 600px) {
  .panel { padding: 22px 18px; }
  #prompt { white-space: normal; width: calc(100vw - 32px); }
}