/* ARENA ROYALE — style.css
 * HUD and menu chrome. The visual language follows the arena's dusk sky:
 * deep indigo ground, mint-cyan for "yours", magenta/violet for the storm,
 * and the loot rarity colours reused verbatim so the HUD and world agree.
 */

:root {
  --bg: #101a26;
  --ink: #eef2ff;
  --muted: #a7b6cb;
  --mint: #38f2c0;
  --cyan: #4ecbff;
  --violet: #a94dff;
  --magenta: #ff4dd8;
  --amber: #ffb01f;
  --danger: #ff4159;
  --shield: #5b9bff;
  --health: #3ed46a;

  /* Panels stay dark for text contrast over a now-bright arena, but neutral
     slate rather than near-black violet, so the UI doesn't read as a different
     game from the world behind it. */
  --panel: rgba(18, 27, 40, 0.80);
  --panel-line: rgba(140, 190, 255, 0.30);
  --glow-mint: 0 0 18px rgba(56, 242, 192, 0.45);

  --display: Orbitron, "Arial Black", sans-serif;
  --mono: "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body, #game-root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

#viewport { display: block; width: 100%; height: 100%; }

kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 2px 6px;
  border: 1px solid rgba(168, 140, 255, 0.45);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(20, 14, 38, 0.75);
  color: var(--mint);
  font: inherit;
  font-size: 0.85em;
  text-align: center;
}

/* ============================================================
   HUD
   ============================================================ */

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}

#hud[hidden] { display: none; }

.hud-topleft   { position: absolute; top: 20px; left: 20px; }
.hud-topcenter { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); text-align: center; }
.hud-topright  { position: absolute; top: 20px; right: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.hud-bottomleft  { position: absolute; bottom: 22px; left: 22px; display: grid; gap: 10px; }
.hud-bottomright { position: absolute; bottom: 22px; right: 22px; text-align: right; }

/* ---------- minimap ---------- */

.minimap {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(168, 140, 255, 0.35);
  background: rgba(8, 5, 18, 0.62);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.55), inset 0 0 30px rgba(80, 40, 160, 0.25);
}

.minimap canvas { width: 100%; height: 100%; display: block; }

.minimap-n {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--mint);
  text-shadow: 0 0 8px rgba(56, 242, 192, 0.8);
}

/* ---------- storm timer ---------- */

.zone-chip {
  display: grid;
  gap: 2px;
  padding: 10px 26px 12px;
  background: linear-gradient(180deg, rgba(24, 12, 48, 0.9), rgba(12, 8, 26, 0.75));
  border: 1px solid var(--panel-line);
  border-radius: 3px;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  min-width: 190px;
}

.zone-label {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--muted);
}

.zone-time {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ink);
}

.zone-phase {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.zone-chip.closing {
  border-color: rgba(217, 77, 255, 0.75);
  box-shadow: 0 0 26px rgba(180, 60, 255, 0.35);
}

.zone-chip.closing .zone-label,
.zone-chip.closing .zone-time { color: var(--magenta); }

.zone-chip.urgent { animation: zone-pulse 0.8s ease-in-out infinite; }

@keyframes zone-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 65, 89, 0.3); border-color: rgba(255, 65, 89, 0.6); }
  50%      { box-shadow: 0 0 34px rgba(255, 65, 89, 0.75); border-color: rgba(255, 65, 89, 1); }
}

/* ---------- King of the Hill capture meter ---------- */

.koth-chip {
  margin-top: 8px;
  display: grid;
  gap: 6px;
  padding: 8px 20px 10px;
  background: linear-gradient(180deg, rgba(24, 12, 48, 0.9), rgba(12, 8, 26, 0.75));
  border: 1px solid var(--panel-line);
  border-radius: 3px;
  min-width: 220px;
  text-align: center;
}

.koth-label {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--amber);
}

.koth-bar {
  position: relative;
  height: 8px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.koth-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  transition: left 0.15s linear, width 0.15s linear, background-color 0.3s ease;
}

.koth-mid {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-1px);
  background: rgba(238, 242, 255, 0.5);
}

.koth-status {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.koth-chip.capturing .koth-status { color: var(--mint); }
.koth-chip.contested .koth-status { color: var(--amber); }
.koth-chip.losing .koth-status { color: var(--danger); }

.koth-chip.contested { animation: zone-pulse 0.8s ease-in-out infinite; }

/* ---------- alive / kill counters ---------- */

.counters { display: flex; gap: 10px; }

.counter {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 74px;
  padding: 7px 12px 8px;
  background: rgba(12, 8, 26, 0.78);
  border: 1px solid var(--panel-line);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.counter-num {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.counter-label {
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--muted);
}

.counter.alive .counter-num { color: var(--mint); text-shadow: var(--glow-mint); }
.counter.kills .counter-num { color: var(--amber); text-shadow: 0 0 16px rgba(255, 176, 31, 0.5); }

/* ---------- kill feed ---------- */

.killfeed {
  list-style: none;
  display: grid;
  gap: 5px;
  justify-items: end;
  max-width: 340px;
}

.killfeed li {
  padding: 5px 11px;
  background: rgba(10, 6, 22, 0.8);
  border-right: 3px solid var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  animation: feed-in 0.28s ease-out;
  white-space: nowrap;
}

.killfeed li.mine { border-right-color: var(--amber); background: rgba(60, 34, 4, 0.75); }
.killfeed li .name { color: var(--muted); }
.killfeed li .verb { color: var(--danger); font-weight: bold; padding: 0 4px; }
.killfeed li.mine .you { color: var(--amber); font-weight: bold; }

.killfeed li.fading { opacity: 0; transform: translateX(12px); transition: opacity 0.4s, transform 0.4s; }

@keyframes feed-in {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- crosshair ---------- */

.crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  --spread: 6px;
}

.crosshair .ch {
  position: absolute;
  background: var(--mint);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  transition: opacity 0.12s;
}

.ch-t, .ch-b { left: 50%; width: 2px; height: 7px; margin-left: -1px; }
.ch-l, .ch-r { top: 50%; height: 2px; width: 7px; margin-top: -1px; }

.ch-t { top: 50%; transform: translateY(calc(-100% - var(--spread))); }
.ch-b { top: 50%; transform: translateY(var(--spread)); }
.ch-l { left: 50%; transform: translateX(calc(-100% - var(--spread))); }
.ch-r { left: 50%; transform: translateX(var(--spread)); }

.ch-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.85;
}

.crosshair.hidden { opacity: 0; }
.crosshair.hot .ch { background: var(--danger); }

/* ---------- hitmarker ---------- */

.hitmarker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.hitmarker span {
  position: absolute;
  width: 11px;
  height: 2px;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
}

.hitmarker span:nth-child(1) { top: 4px;  left: 3px;  transform: rotate(45deg); }
.hitmarker span:nth-child(2) { top: 4px;  right: 3px; transform: rotate(-45deg); }
.hitmarker span:nth-child(3) { bottom: 4px; left: 3px; transform: rotate(-45deg); }
.hitmarker span:nth-child(4) { bottom: 4px; right: 3px; transform: rotate(45deg); }

.hitmarker.show { animation: hit-pop 0.24s ease-out; }
.hitmarker.head span { background: var(--danger); height: 3px; width: 13px; }
.hitmarker.kill span { background: var(--amber); height: 3px; width: 15px; }

@keyframes hit-pop {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- sniper scope ---------- */

.scope {
  position: absolute;
  inset: 0;
  background: #000;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 31vh, #000 31.4vh);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 31vh, #000 31.4vh);
}

.scope[hidden] { display: none; }

.scope-glass {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62vh;
  height: 62vh;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.9);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.85), inset 0 0 140px rgba(60, 20, 90, 0.3);
}

.scope-cross-h, .scope-cross-v { position: absolute; background: rgba(10, 10, 10, 0.9); }
.scope-cross-h { left: 6%; right: 6%; top: 50%; height: 1px; }
.scope-cross-v { top: 6%; bottom: 6%; left: 50%; width: 1px; }

.scope-mil {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 1px;
  margin-left: -11px;
  background: rgba(10, 10, 10, 0.75);
}

.scope-mil-1 { top: 58%; }
.scope-mil-2 { top: 64%; width: 16px; margin-left: -8px; }
.scope-mil-3 { top: 70%; width: 10px; margin-left: -5px; }

/* ---------- damage direction ---------- */

.damage-dirs { position: absolute; inset: 0; }

.damage-dir {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-origin: 0 0;
}

.damage-dir::after {
  content: "";
  position: absolute;
  left: -46px;
  top: -150px;
  width: 92px;
  height: 26px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 65, 89, 0.92), rgba(255, 65, 89, 0));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* ---------- banners and toasts ---------- */

.banner {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px, 3vw, 38px);
  letter-spacing: 0.12em;
  text-align: center;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9);
  opacity: 0;
  white-space: nowrap;
}

.banner.show { animation: banner-in 2.1s ease-out; }
.banner.elim  { color: var(--amber); }
.banner.warn  { color: var(--magenta); }
.banner.danger { color: var(--danger); }
.banner.victory { color: var(--mint); text-shadow: 0 4px 24px rgba(0,0,0,0.9), 0 0 30px rgba(56, 242, 192, 0.6); }

@keyframes banner-in {
  0%   { opacity: 0; transform: translateX(-50%) scale(1.35); letter-spacing: 0.4em; }
  12%  { opacity: 1; transform: translateX(-50%) scale(1); letter-spacing: 0.12em; }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.04); }
}

.toast {
  position: absolute;
  left: 50%;
  top: 32%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 8px 18px;
  background: rgba(10, 6, 22, 0.85);
  border-left: 3px solid var(--mint);
  opacity: 0;
  white-space: nowrap;
}

.toast.show { animation: toast-in 1.8s ease-out; }

@keyframes toast-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  78%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- interact prompt ---------- */

.interact {
  position: absolute;
  left: 50%;
  top: 57%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: rgba(10, 6, 22, 0.8);
  border: 1px solid var(--panel-line);
  font-size: 14px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.interact[hidden] { display: none; }
.interact .rarity { font-family: var(--display); font-weight: 700; }

/* ---------- heal channel ---------- */

.channel {
  position: absolute;
  left: 50%;
  bottom: 24%;
  transform: translateX(-50%);
  width: 260px;
  text-align: center;
}

.channel[hidden] { display: none; }

.channel-label {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--mint);
}

.channel-bar {
  margin-top: 6px;
  height: 8px;
  background: rgba(6, 4, 14, 0.85);
  border: 1px solid var(--panel-line);
}

.channel-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--mint), #b8ffe9);
  box-shadow: var(--glow-mint);
}

/* ---------- vitals ---------- */

.vitals { display: grid; gap: 5px; width: 340px; }

.bar {
  position: relative;
  height: 20px;
  background: rgba(6, 4, 14, 0.8);
  border: 1px solid rgba(168, 140, 255, 0.22);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  overflow: hidden;
}

.bar-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  transform-origin: left center;
  transition: transform 0.14s ease-out;
}

/* The ghost trails behind the fill so you can see how much you just lost. */
.bar-ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  transform-origin: left center;
  background: rgba(255, 255, 255, 0.32);
  transition: transform 0.5s ease-out 0.25s;
}

.bar.health .bar-fill { background: linear-gradient(90deg, #1f8f45, var(--health)); box-shadow: 0 0 14px rgba(62, 212, 106, 0.4); }
.bar.shield .bar-fill { background: linear-gradient(90deg, #2f5cb8, var(--shield)); box-shadow: 0 0 14px rgba(91, 155, 255, 0.45); }
.bar.shield { height: 14px; }

.bar-num {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.bar.critical .bar-fill { animation: crit-flash 0.55s ease-in-out infinite; }

@keyframes crit-flash {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.9); }
}

/* ---------- consumables ---------- */

.items { display: flex; gap: 7px; }

.item {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 54px;
  padding: 6px 8px;
  background: rgba(10, 6, 22, 0.78);
  border: 1px solid var(--panel-line);
  border-bottom-width: 3px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.item strong { font-family: var(--display); font-size: 15px; color: var(--ink); }
.item.shield { border-bottom-color: var(--shield); }
.item.health { border-bottom-color: var(--health); }
.item.gadget { border-bottom-color: var(--amber); }

/* ---------- ammo and weapon ---------- */

.ammo { font-family: var(--display); line-height: 1; }
.ammo-mag { font-size: 46px; font-weight: 800; text-shadow: 0 3px 16px rgba(0, 0, 0, 0.8); }
.ammo-sep { font-size: 22px; color: var(--muted); margin: 0 3px; }
.ammo-reserve { font-size: 22px; color: var(--muted); }
.ammo.empty .ammo-mag { color: var(--danger); animation: crit-flash 0.5s ease-in-out infinite; }

.weapon-name {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-top: 2px;
}

.reload-bar {
  margin: 6px 0 0 auto;
  width: 190px;
  height: 5px;
  background: rgba(6, 4, 14, 0.85);
  border: 1px solid var(--panel-line);
}

.reload-bar[hidden] { display: none; }

.reload-fill {
  height: 100%;
  width: 0;
  background: var(--amber);
  box-shadow: 0 0 12px rgba(255, 176, 31, 0.6);
}

.slots { display: flex; gap: 7px; justify-content: flex-end; margin-top: 9px; }

.slot {
  position: relative;
  width: 84px;
  height: 46px;
  background: rgba(10, 6, 22, 0.72);
  border: 1px solid rgba(168, 140, 255, 0.2);
  border-bottom: 3px solid rgba(168, 140, 255, 0.3);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--muted);
  opacity: 0.6;
}

.slot .slot-key {
  position: absolute;
  top: 2px;
  left: 5px;
  font-size: 9px;
  color: var(--muted);
}

.slot .slot-name { font-family: var(--display); font-size: 11px; font-weight: 700; color: var(--ink); }
.slot.active { opacity: 1; background: rgba(30, 18, 56, 0.9); box-shadow: 0 0 18px rgba(168, 140, 255, 0.25); }
.slot.empty .slot-name { color: rgba(154, 147, 189, 0.5); }

/* ---------- misc HUD ---------- */

.hud-hint {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 11px;
  color: rgba(154, 147, 189, 0.55);
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: opacity 0.6s;
}

.hud-hint.faded { opacity: 0; }

.fps {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--mint);
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 8px;
}

.fps[hidden] { display: none; }

/* Full-screen tint layers driven by the game (low health, storm). */
#game-root::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 34%, rgba(255, 20, 45, 0.55) 100%);
  transition: opacity 0.25s;
}

#game-root.hurt::after { opacity: 1; }

/* ============================================================
   SCREENS (menu / results / pause / loading)
   ============================================================ */

.screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 40, 180, 0.28), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 110, 40, 0.16), transparent 55%),
    rgba(6, 4, 14, 0.9);
  backdrop-filter: blur(6px);
  pointer-events: auto;
}

.screen[hidden] { display: none; }

.screen-inner { width: min(1080px, 100%); }
.screen-inner.narrow { width: min(560px, 100%); text-align: center; }

.brand { text-align: center; margin-bottom: 26px; }

.eyebrow {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.42em;
  color: var(--mint);
  margin-bottom: 10px;
  text-shadow: var(--glow-mint);
}

.title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 7vw, 74px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #ffffff 20%, #b78cff 65%, #ff7a3d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 30px rgba(150, 70, 255, 0.45));
}

.title span { display: block; }

.lead {
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
  max-width: 60ch;
  margin: 12px auto 0;
}

.menu-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 820px) {
  .menu-grid { grid-template-columns: 1fr; }
}

.card {
  padding: 22px 22px 24px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.card h2 {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--muted);
  margin: 18px 0 9px;
}

.card h2:first-child { margin-top: 0; }

.field { display: grid; gap: 6px; }
.field > span { font-size: 11px; letter-spacing: 0.16em; color: var(--muted); }

.field input[type="text"] {
  padding: 11px 12px;
  background: rgba(6, 4, 14, 0.85);
  border: 1px solid var(--panel-line);
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  outline: none;
}

.field input[type="text"]:focus { border-color: var(--mint); box-shadow: var(--glow-mint); }

.field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  background: rgba(168, 140, 255, 0.25);
  outline: none;
  cursor: pointer;
}

.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: var(--glow-mint);
  cursor: pointer;
}

.field input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border: 0; border-radius: 50%;
  background: var(--mint); cursor: pointer;
}

.slider-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }

.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.choice {
  display: grid;
  gap: 2px;
  padding: 11px 8px;
  background: rgba(6, 4, 14, 0.6);
  border: 1px solid var(--panel-line);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.choice strong { font-family: var(--display); font-size: 12px; letter-spacing: 0.1em; }
.choice em { font-style: normal; font-size: 10px; color: var(--muted); }
.choice:hover { border-color: var(--mint); transform: translateY(-1px); }

.choice.active {
  background: linear-gradient(180deg, rgba(56, 242, 192, 0.22), rgba(56, 242, 192, 0.06));
  border-color: var(--mint);
  box-shadow: 0 0 20px rgba(56, 242, 192, 0.2);
}

.choice.active strong { color: var(--mint); }

button.primary, button.ghost {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 15px 20px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  transition: transform 0.1s, filter 0.15s;
}

button.primary {
  color: #04110c;
  background: linear-gradient(135deg, var(--mint), #7affd8 60%, var(--cyan));
  box-shadow: 0 10px 34px rgba(56, 242, 192, 0.3);
}

button.ghost {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--panel-line);
}

button.primary:hover { filter: brightness(1.1); transform: translateY(-2px); }
button.ghost:hover { border-color: var(--mint); color: var(--mint); }
button:active { transform: translateY(1px); }

.button-row { display: flex; gap: 10px; }
.button-row button { flex: 1; }

/* ---------- records ---------- */

.records { display: grid; gap: 7px; }
.records-empty { color: var(--muted); font-size: 12px; line-height: 1.6; }

.record {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  background: rgba(6, 4, 14, 0.6);
  border-left: 3px solid var(--panel-line);
  font-size: 12px;
}

.record .rank { font-family: var(--display); font-weight: 800; color: var(--muted); font-size: 13px; }
.record .who { font-family: var(--display); letter-spacing: 0.1em; }
.record .what { color: var(--muted); font-size: 11px; text-align: right; }
.record.win { border-left-color: var(--amber); }
.record.win .rank { color: var(--amber); }

.controls { list-style: none; display: grid; gap: 6px; font-size: 12px; }
.controls li { display: flex; align-items: center; gap: 5px; }
.controls li span { color: var(--muted); margin-left: 5px; }

/* ---------- results ---------- */

.result-title { font-size: clamp(46px, 9vw, 96px); }

.result-title.victory {
  background: linear-gradient(180deg, #fff6d0 10%, var(--amber) 55%, #ff6a1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 6px 34px rgba(255, 176, 31, 0.55));
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin: 22px 0 6px;
}

.stat {
  padding: 13px 8px;
  background: rgba(10, 6, 22, 0.7);
  border: 1px solid var(--panel-line);
}

.stat strong { display: block; font-family: var(--display); font-size: 22px; font-weight: 800; }
.stat span { font-size: 9px; letter-spacing: 0.2em; color: var(--muted); }

.personal-best {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--amber);
  min-height: 18px;
}

/* ---------- loading ---------- */

.loading { background: radial-gradient(ellipse at center, #180d33, #06040e 70%); }

.loading-bar {
  margin: 22px auto 0;
  width: 320px;
  height: 6px;
  background: rgba(168, 140, 255, 0.18);
  overflow: hidden;
}

.loading-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--mint), var(--cyan));
  box-shadow: var(--glow-mint);
  transition: width 0.25s ease-out;
}

/* ---------- The Second World (top-down mode) ---------- */

#survivors-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--display);
}

.sv-topright { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; text-align: right; }

/* Portrait-box readout, styled after the arcade cabinet look — a bevelled
 * metal frame with a chunky LCD-digit score above the health bar, the way
 * Smash T.V.'s player-1 box reads at a glance mid-fight. */
.sv-portrait-box {
  display: flex;
  gap: 10px;
  align-items: stretch;
  background: linear-gradient(180deg, #3a3f4d, #1c1f28);
  border: 2px solid #0a0b10;
  border-radius: 4px;
  padding: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.5);
}
.sv-portrait-frame {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  color: #4ecbff;
  background: #0a0b10;
  border: 1px solid #000;
  border-radius: 2px;
}
.sv-portrait-readout { display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.sv-score {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #4ecbff;
  background: #04121a;
  padding: 1px 6px;
  border-radius: 2px;
  text-shadow: 0 0 8px rgba(78, 203, 255, 0.7);
}

.sv-bar-track {
  width: 200px;
  height: 14px;
  background: #0a0b10;
  border: 1px solid #000;
  border-radius: 2px;
  overflow: hidden;
}
.sv-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #2ecf5a, #8ef04d);
  transition: width 0.15s linear;
}

.sv-topcenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 220px;
}
.sv-level { font-size: 13px; font-weight: 800; letter-spacing: 0.2em; color: var(--mint); text-shadow: 0 0 10px rgba(56, 242, 192, 0.6); }
.sv-xp-track {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  overflow: hidden;
}
.sv-xp-fill { height: 100%; width: 0%; background: var(--cyan); transition: width 0.15s linear; }

/* Weapon pickup timer — only visible while a picked-up gun is active. */
.sv-weapon {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--amber);
}
.sv-weapon-track {
  width: 90px;
  height: 6px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  overflow: hidden;
}
.sv-weapon-fill { height: 100%; width: 100%; background: var(--amber); transition: width 0.1s linear; }

/* Boss health bar, spanning the top when one is alive. */
.sv-bossbar {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 70vw);
  text-align: center;
}
.sv-boss-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--danger);
  text-shadow: 0 0 10px rgba(255, 65, 89, 0.7);
}
.sv-boss-track {
  height: 14px;
  margin-top: 4px;
  background: #0a0b10;
  border: 2px solid #000;
  border-radius: 2px;
  overflow: hidden;
}
.sv-boss-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff4159, #ff8a4d); transition: width 0.15s linear; }

.sv-stat { display: flex; flex-direction: column; }
.sv-stat strong { font-size: 20px; font-weight: 800; color: var(--ink); }
.sv-stat em { font-style: normal; font-size: 10px; letter-spacing: 0.18em; color: var(--muted); }

.sv-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  background: rgba(6, 4, 14, 0.55);
  padding: 6px 14px;
  border-radius: 3px;
}

.sv-levelup-title, .sv-dead-title {
  text-align: center;
  font-size: clamp(38px, 7vw, 68px);
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 22px;
  background: linear-gradient(180deg, #fff6d0 10%, var(--amber) 55%, #ff6a1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sv-dead-title {
  background: linear-gradient(180deg, #ffd0dc 10%, var(--danger) 60%, #7a0f22 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.sv-dead-copy { text-align: center; color: var(--muted); margin-bottom: 20px; font-size: 14px; }

.sv-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: min(760px, 100%);
}

.sv-card {
  background: linear-gradient(180deg, rgba(24, 12, 48, 0.9), rgba(12, 8, 26, 0.75));
  border: 1px solid var(--panel-line);
  border-radius: 4px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.sv-card:hover {
  border-color: var(--amber);
  transform: translateY(-3px);
  box-shadow: 0 0 24px rgba(255, 176, 31, 0.25);
}
.sv-card strong {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--amber);
  margin-bottom: 8px;
}
.sv-card span { font-size: 12px; color: var(--muted); }

/* Second World aim reticle — follows the mouse in fixed screen coordinates,
 * independent of the character sprite's own rotation, so aim is always
 * confirmable at a glance regardless of how the game-world math lands. */
#sv-crosshair {
  position: fixed;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  margin-top: -13px;
  pointer-events: none;
  z-index: 50;
  border: 2px solid var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 176, 31, 0.7);
}
#sv-crosshair::before, #sv-crosshair::after {
  content: "";
  position: absolute;
  background: var(--amber);
}
#sv-crosshair::before { left: 11px; top: -5px; width: 2px; height: 6px; }
#sv-crosshair::after { left: -5px; top: 11px; width: 6px; height: 2px; }

.loadout-hint {
  margin: 8px 2px 0;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.choice.locked {
  opacity: 0.4;
  cursor: not-allowed;
}
.choice.locked:hover { border-color: var(--panel-line); transform: none; }