/* ============================================================================
   BLASTER ARENA 3D - style.css

   The whole interface. Nothing here is drawn by the 3-D engine: the menus and
   the heads-up display are ordinary HTML, which keeps text sharp, keeps the
   game's frame cost down, and means the layout adapts to any window size for
   free.

   Colours are defined once, at the top, so the whole thing can be retinted
   from one place.
   ========================================================================== */

:root {
  --bg: #070b18;
  --bg-2: #0c1226;
  --panel: rgba(11, 17, 36, 0.94);
  --panel-line: rgba(90, 130, 220, 0.28);
  --ink: #e8f0ff;
  --dim: #8fa3c8;
  --cyan: #36e6ff;
  --pink: #ff4fa3;
  --violet: #c46bff;
  --orange: #ffa23b;
  --green: #3ddc97;
  --danger: #ff4d6d;
  --gold: #ffd166;
  --radius: 14px;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  --font: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Stop a stray swipe from scrolling or rubber-banding the page on a phone,
     and stop the blue flash when a touch control is tapped. */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* The app is exactly the size of the usable screen.

   --app-height is set from JavaScript, because on mobile browsers the address
   bar comes and goes and none of 100vh, 100dvh and innerHeight is right in
   every browser. The fallback here means the layout is still correct before the
   script has run, and the value is measured from the document element rather
   than from this element, so it can never chase its own tail. */
#app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: var(--app-height, 100%);
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 50% -12%, #1b2550 0%, #0a0f22 55%, #05070f 100%);
}

.hidden { display: none !important; }

/* ---------------------------------------------------------------------------
   The canvas
   --------------------------------------------------------------------------- */
#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  touch-action: none;
}
body.pointer-locked #game-canvas { cursor: none; }
body:not(.pointer-locked) #game-canvas { cursor: crosshair; }

/* ---------------------------------------------------------------------------
   Heads-up display
   --------------------------------------------------------------------------- */
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  font-family: var(--font);
  user-select: none;
  /* Keep every readout clear of the notch, the rounded corners and the home
     indicator on a modern phone. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* --- Aiming reticle ------------------------------------------------------ */
#crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
}
#crosshair .ch-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
  transition: transform 90ms linear;
}
#crosshair .ch-top,
#crosshair .ch-bottom { left: 11px; width: 4px; height: 8px; }
#crosshair .ch-left,
#crosshair .ch-right { top: 11px; height: 4px; width: 8px; }
#crosshair .ch-top { top: 0; }
#crosshair .ch-bottom { bottom: 0; }
#crosshair .ch-left { left: 0; }
#crosshair .ch-right { right: 0; }
#crosshair .ch-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}
/* The reticle opens up as the blaster's spread grows. */
#hud.spread-1 #crosshair .ch-top { transform: translateY(-3px); }
#hud.spread-1 #crosshair .ch-bottom { transform: translateY(3px); }
#hud.spread-1 #crosshair .ch-left { transform: translateX(-3px); }
#hud.spread-1 #crosshair .ch-right { transform: translateX(3px); }
#hud.spread-2 #crosshair .ch-top { transform: translateY(-7px); }
#hud.spread-2 #crosshair .ch-bottom { transform: translateY(7px); }
#hud.spread-2 #crosshair .ch-left { transform: translateX(-7px); }
#hud.spread-2 #crosshair .ch-right { transform: translateX(7px); }
#hud.spread-3 #crosshair .ch-top { transform: translateY(-12px); }
#hud.spread-3 #crosshair .ch-bottom { transform: translateY(12px); }
#hud.spread-3 #crosshair .ch-left { transform: translateX(-12px); }
#hud.spread-3 #crosshair .ch-right { transform: translateX(12px); }
#hud.on-target #crosshair .ch-dot { background: var(--danger); box-shadow: 0 0 8px var(--danger); }

/* --- Hit marker ---------------------------------------------------------- */
#hit-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  opacity: 0;
}
#hit-marker span {
  position: absolute;
  width: 10px;
  height: 3px;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}
#hit-marker span:nth-child(1) { top: 6px; left: 4px; transform: rotate(45deg); }
#hit-marker span:nth-child(2) { top: 6px; right: 4px; transform: rotate(-45deg); }
#hit-marker span:nth-child(3) { bottom: 6px; left: 4px; transform: rotate(-45deg); }
#hit-marker span:nth-child(4) { bottom: 6px; right: 4px; transform: rotate(45deg); }
#hit-marker.show { animation: hit-pop 160ms ease-out; }
#hit-marker.kill span { background: var(--danger); }
@keyframes hit-pop {
  0% { opacity: 1; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.25); }
}

/* --- Damage vignette ----------------------------------------------------- */
#vignette {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse at center,
      rgba(255, 40, 70, 0) 38%,
      rgba(255, 40, 70, 0.42) 78%,
      rgba(180, 0, 30, 0.75) 100%);
  transition: opacity 150ms linear;
}
#hud.low-health #vignette {
  opacity: 0.55;
  animation: low-pulse 1.1s ease-in-out infinite;
}
@keyframes low-pulse {
  0%, 100% { opacity: 0.32; }
  50% { opacity: 0.62; }
}

/* --- Top bar ------------------------------------------------------------- */
#top-bar {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.hud-card {
  min-width: 108px;
  padding: 7px 16px 9px;
  text-align: center;
  background: rgba(8, 13, 30, 0.72);
  border: 1px solid var(--panel-line);
  border-radius: 12px;
  backdrop-filter: blur(6px);
}
.hud-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--dim);
  text-transform: uppercase;
}
.hud-value {
  display: block;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}
#timer-card .hud-value { color: var(--cyan); }
#score-card .hud-value { color: var(--gold); }
#leader-card .hud-value { font-size: 16px; color: var(--pink); }
#timer-card.urgent .hud-value { color: var(--danger); animation: blink 1s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

/* --- Scoreboard ---------------------------------------------------------- */
#scoreboard {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 236px;
  padding: 10px 10px 8px;
  background: rgba(8, 13, 30, 0.72);
  border: 1px solid var(--panel-line);
  border-radius: 12px;
  backdrop-filter: blur(6px);
}
.sb-title {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 6px;
}
#scoreboard table,
#results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
#scoreboard th,
#results-table th {
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--dim);
  text-transform: uppercase;
  padding: 2px 4px;
}
#scoreboard th:first-child,
#scoreboard td:first-child,
#results-table th:first-child { width: 20px; }
#scoreboard td,
#results-table td {
  padding: 3px 4px;
  border-top: 1px solid rgba(90, 130, 220, 0.14);
}
#scoreboard td.num,
#results-table td.num {
  font-family: var(--mono);
  text-align: right;
  width: 30px;
}
#scoreboard tr.is-you td {
  color: var(--cyan);
  font-weight: 700;
  background: rgba(54, 230, 255, 0.1);
}
#scoreboard tr.is-leader td {
  color: var(--gold);
}
#scoreboard tr.is-you.is-leader td { color: var(--gold); }
#scoreboard td.name { max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: baseline;
}

/* --- Health -------------------------------------------------------------- */
#health-block {
  position: absolute;
  left: 22px;
  bottom: 22px;
  width: 260px;
}
#health-bar {
  height: 16px;
  border-radius: 9px;
  background: rgba(6, 10, 24, 0.8);
  border: 1px solid var(--panel-line);
  overflow: hidden;
}
#health-fill {
  height: 100%;
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #2ee6a8, #36e6ff);
  transition: width 120ms linear, background 200ms linear;
}
#health-block.hurt #health-fill { background: linear-gradient(90deg, #ffb03b, #ff8c42); }
#health-block.critical #health-fill { background: linear-gradient(90deg, #ff4d6d, #ff2d55); }
#health-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 5px;
  font-family: var(--mono);
}
#health-value { font-size: 24px; font-weight: 700; }
#health-text .unit { font-size: 11px; color: var(--dim); letter-spacing: 0.14em; }

/* --- Weapon -------------------------------------------------------------- */
#weapon-block {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 236px;
  text-align: right;
}
#weapon-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#weapon-kind { font-size: 11px; color: var(--dim); margin-bottom: 7px; }
#weapon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#weapon-list li {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--dim);
  background: rgba(8, 13, 30, 0.5);
  border: 1px solid transparent;
}
#weapon-list li .wkey {
  font-family: var(--mono);
  font-size: 10px;
  opacity: 0.7;
}
#weapon-list li.active {
  color: #08111f;
  font-weight: 700;
  background: var(--cyan);
  border-color: #fff;
}

/* --- Messages ------------------------------------------------------------ */
#center-msg {
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  text-align: center;
}
#msg-big {
  font-size: 74px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.75), 0 0 24px rgba(54, 230, 255, 0.5);
}
#msg-big.pop { animation: msg-pop 320ms cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes msg-pop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
#msg-small {
  margin-top: 6px;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
#msg-big.danger { color: var(--danger); }
#msg-big.good { color: var(--green); }
#msg-big.gold { color: var(--gold); }

/* --- Respawn ------------------------------------------------------------- */
#respawn-block {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 18px 42px 22px;
  background: rgba(10, 6, 20, 0.7);
  border: 1px solid rgba(255, 77, 109, 0.5);
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
}
.rs-title { font-size: 26px; font-weight: 800; letter-spacing: 0.2em; color: var(--danger); }
.rs-timer { font-family: var(--mono); font-size: 54px; font-weight: 700; line-height: 1.1; }
.rs-hint { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }

/* --- Kill feed ----------------------------------------------------------- */
#killfeed {
  position: absolute;
  left: 22px;
  bottom: 110px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 380px;
}
.feed-item {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 8px;
  background: rgba(8, 13, 30, 0.72);
  border-left: 3px solid var(--dim);
  animation: feed-in 200ms ease-out;
}
.feed-item.you { border-left-color: var(--cyan); color: var(--cyan); font-weight: 700; }
.feed-item.you-died { border-left-color: var(--danger); color: var(--danger); font-weight: 700; }
.feed-item .vs { color: var(--dim); margin: 0 6px; }
@keyframes feed-in {
  0% { opacity: 0; transform: translateX(-14px); }
  100% { opacity: 1; transform: none; }
}

/* --- Corner readouts ----------------------------------------------------- */
#hud-corner {
  position: absolute;
  left: 22px;
  top: 14px;
  display: flex;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
}

/* --- Click-to-play prompt ------------------------------------------------ */
#click-prompt {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 7, 16, 0.55);
  backdrop-filter: blur(3px);
  cursor: pointer;
}
.cp-inner {
  padding: 22px 42px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: prompt-pulse 2s ease-in-out infinite;
}
@keyframes prompt-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
.cp-title { font-size: 26px; font-weight: 800; letter-spacing: 0.04em; }
.cp-sub { margin-top: 6px; font-size: 12px; color: var(--dim); }

/* ---------------------------------------------------------------------------
   Screens (menus)
   --------------------------------------------------------------------------- */
#screens {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  overflow-x: hidden;
}
.screen {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 18px;
  background: radial-gradient(1000px 620px at 50% 0%, rgba(30, 46, 100, 0.55), rgba(4, 7, 16, 0.92));
  backdrop-filter: blur(7px);
}
.screen.hidden { display: none; }

.panel {
  width: 100%;
  max-width: 560px;
  padding: 26px 30px 24px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel-wide { max-width: 860px; }

.brand { text-align: center; margin-bottom: 20px; }
.brand h1 {
  margin: 0;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ink);
}
.brand h1 span { color: var(--cyan); }
.brand h1 em {
  font-style: normal;
  font-size: 28px;
  vertical-align: super;
  color: var(--pink);
  letter-spacing: 0;
}
.tagline { margin: 8px 0 0; font-size: 13px; color: var(--dim); }

h2 {
  margin: 0 0 14px;
  font-size: 24px;
  letter-spacing: 0.03em;
}
h2 + .panel-text { margin-top: -6px; }

.menu-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
}
.menu-main { display: flex; flex-direction: column; gap: 10px; }
.menu-side {
  padding: 16px;
  background: rgba(6, 10, 24, 0.6);
  border: 1px solid var(--panel-line);
  border-radius: 12px;
}
.side-title {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.side-hint {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--dim);
}
.spacer { flex: 1; }
.menu-note {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--dim);
}

/* --- Fields -------------------------------------------------------------- */
.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  font-size: 12.5px;
}
.field > span { color: var(--dim); letter-spacing: 0.06em; }
.field select {
  flex: 0 1 auto;
  min-width: 128px;
  max-width: 62%;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: rgba(14, 22, 46, 0.95);
  border: 1px solid var(--panel-line);
  border-radius: 9px;
  cursor: pointer;
}
.field select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 22px;
}
.settings-note {
  margin: 16px 0 4px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--dim);
}
.settings-note b { color: var(--ink); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  position: relative;
  padding: 11px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(22, 34, 68, 0.95);
  border: 1px solid var(--panel-line);
  border-radius: 11px;
  cursor: pointer;
  transition: transform 90ms ease, background 140ms ease, border-color 140ms ease;
}
.btn:hover { background: rgba(34, 52, 100, 0.98); border-color: var(--cyan); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.btn-primary {
  color: #05121f;
  background: linear-gradient(180deg, #6ef2ff, var(--cyan));
  border-color: #b9f5ff;
}
.btn-primary:hover { background: linear-gradient(180deg, #9df7ff, #4ae9ff); border-color: #fff; }
.btn-big { padding: 15px 22px; font-size: 17px; }
.btn-big small {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
  opacity: 0.75;
}
.btn-small { padding: 7px 13px; font-size: 11.5px; }
.btn-ghost { background: transparent; }
.link-btn {
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--cyan);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

.panel-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
  flex-wrap: wrap;
}
.panel-actions-column { flex-direction: column; align-items: stretch; }
.panel-text { font-size: 13px; line-height: 1.6; color: var(--dim); }
.panel-text.small { font-size: 11.5px; }
.panel-text code {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(90, 130, 220, 0.18);
  color: var(--ink);
}
.panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-line);
  font-size: 11px;
  color: var(--dim);
}

/* --- Help ---------------------------------------------------------------- */
#help-body { min-height: 190px; }
.help-page-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 10px;
}
.help-line { font-size: 13px; line-height: 1.65; color: var(--ink); }
.help-line.dim { color: var(--dim); }
.help-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
#help-counter { font-family: var(--mono); font-size: 12px; color: var(--dim); }

.controls-table {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-line);
}
.control-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  font-size: 12.5px;
}
.control-keys { flex: 0 0 168px; display: flex; gap: 5px; flex-wrap: wrap; }
.control-keys kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(22, 34, 68, 0.95);
  border: 1px solid var(--panel-line);
  border-bottom-width: 2px;
  color: var(--ink);
}
.control-text { color: var(--dim); }

/* --- Pause --------------------------------------------------------------- */
.pause-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 6px;
}
.pause-stat {
  flex: 1 1 110px;
  padding: 10px 12px;
  background: rgba(6, 10, 24, 0.6);
  border: 1px solid var(--panel-line);
  border-radius: 10px;
}
.pause-stat .hud-label { margin-bottom: 3px; }
.pause-stat .stat-value { font-family: var(--mono); font-size: 20px; font-weight: 700; }

/* --- Results ------------------------------------------------------------- */
#results-table-wrap {
  max-height: 46vh;
  overflow-y: auto;
  margin-top: 8px;
}
#results-table { font-size: 13px; }
#results-table th { position: sticky; top: 0; background: var(--bg-2); }
#results-table td { padding: 7px 6px; }
#results-table tr.is-you td { color: var(--cyan); font-weight: 700; background: rgba(54, 230, 255, 0.09); }
#results-table tr.is-winner td { color: var(--gold); }
#results-table td.rank { font-family: var(--mono); }
.results-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 5px;
  background: rgba(90, 130, 220, 0.25);
  color: var(--dim);
}
.results-badge.you { background: rgba(54, 230, 255, 0.22); color: var(--cyan); }

/* --- About --------------------------------------------------------------- */
.about-list {
  margin: 10px 0 14px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--dim);
}
.about-list b { color: var(--ink); }

/* ---------------------------------------------------------------------------
   Loading, errors, orientation
   --------------------------------------------------------------------------- */
#loading {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(900px 600px at 50% 40%, #141d3c, #05070f 75%);
}
#loading.hidden { display: none; }
.loading-mark { display: flex; gap: 8px; }
.loading-mark span {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--cyan);
  animation: loading-bounce 1s ease-in-out infinite;
}
.loading-mark span:nth-child(2) { background: var(--pink); animation-delay: 0.15s; }
.loading-mark span:nth-child(3) { background: var(--violet); animation-delay: 0.3s; }
@keyframes loading-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-11px); opacity: 1; }
}
#loading-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: 0.14em; }
#loading-tip { margin: 0; font-size: 12px; color: var(--dim); max-width: 380px; text-align: center; }

#load-error {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px;
  text-align: center;
  background: #0a0f22;
}
#load-error.show { display: flex; }
#load-error b { font-size: 18px; color: var(--danger); }
#load-error p { margin: 0; max-width: 520px; font-size: 13px; line-height: 1.6; color: var(--dim); }
#load-error-detail { font-family: var(--mono); font-size: 11px; color: var(--orange); }

.fallback-warning {
  position: absolute;
  z-index: 50;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 26px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
}

#rotate-hint {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 20;
  margin: 0;
  padding: 7px 14px;
  font-size: 12px;
  color: var(--dim);
  background: rgba(8, 13, 30, 0.85);
  border: 1px solid var(--panel-line);
  border-radius: 20px;
}

/* ---------------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .menu-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .brand h1 { font-size: 34px; }
  .brand h1 em { font-size: 20px; }
  #scoreboard { width: 186px; }
  #scoreboard td.name { max-width: 76px; }
  #health-block { width: 190px; }
  #weapon-block { width: 180px; }
  #killfeed { max-width: 260px; }
  #msg-big { font-size: 54px; }
  .control-keys { flex-basis: 132px; }
}

@media (max-width: 560px) {
  .panel { padding: 20px 18px; }
  #top-bar { gap: 6px; }
  .hud-card { min-width: 76px; padding: 5px 10px 7px; }
  .hud-value { font-size: 17px; }
  #leader-card { display: none; }
  #scoreboard { width: 148px; font-size: 11px; }
  #scoreboard td.name { max-width: 62px; }
  #killfeed { display: none; }
  #msg-big { font-size: 40px; }
}

@media (orientation: portrait) and (max-width: 900px) {
  #rotate-hint { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ===========================================================================
   FULLSCREEN BUTTONS
   =========================================================================== */
#hud-buttons {
  position: absolute;
  left: 22px;
  top: 14px;
  display: flex;
  gap: 8px;
  z-index: 7;
  /* The buttons are the one part of the HUD that must accept a tap. */
  pointer-events: auto;
}
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 42px;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
  background: rgba(8, 13, 30, 0.76);
  border: 1px solid var(--panel-line);
  border-radius: 11px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 90ms ease;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { background: rgba(30, 46, 92, 0.95); border-color: var(--cyan); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
body.is-fullscreen #hud-fullscreen { border-color: var(--cyan); color: var(--cyan); }

/* The readouts move below the buttons so nothing overlaps. */
#hud-corner {
  left: 22px;
  top: 64px;
}

.fullscreen-hint {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--dim);
  text-align: center;
}
.fullscreen-hint:empty { display: none; }

/* ===========================================================================
   TOUCH CONTROLS

   Three layers, in this order from the bottom up:

     3  #touch-look      the aiming surface - the whole screen
     5  #hud             readouts (mostly pointer-events: none)
     7  #touch-controls  the buttons, which must be above everything

   Because a finger that lands on a button hits the button first, the aiming
   surface underneath never sees it - which is exactly what makes it possible
   to aim with one thumb while holding FIRE with the other.
   =========================================================================== */
#touch-look {
  position: absolute;
  inset: 0;
  z-index: 3;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#touch-look.hidden { display: none; }

#touch-controls {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;   /* only the buttons themselves take touches */
  user-select: none;
  -webkit-user-select: none;
}

/* --- The joystick --------------------------------------------------------- */
/* Parked off-screen until a thumb lands, so it can never be mistaken for a
   panel that is "in the way" while it is invisible. */
#stick {
  position: fixed;
  left: -400px;
  top: -400px;
  width: 122px;
  height: 122px;
  margin: -61px 0 0 -61px;
  border-radius: 50%;
  border: 2px solid rgba(120, 165, 255, 0.38);
  background: radial-gradient(circle at 50% 50%, rgba(12, 18, 38, 0.45), rgba(12, 18, 38, 0.16));
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
  z-index: 8;
}
#stick.active { opacity: 1; }
#stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9df7ff, var(--cyan) 60%, #1aa7c4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* --- The buttons ---------------------------------------------------------- */
#touch-buttons {
  position: absolute;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.touch-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.touch-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 60px;
  height: 60px;
  padding: 0;
  font-family: inherit;
  color: var(--ink);
  background: rgba(10, 16, 34, 0.62);
  border: 2px solid rgba(120, 165, 255, 0.45);
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 70ms ease, background 90ms ease, border-color 90ms ease;
}
.touch-btn .tb-icon { font-size: 19px; line-height: 1; }
.touch-btn .tb-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.85;
}
.touch-btn.pressed,
.touch-btn:active {
  background: rgba(54, 230, 255, 0.9);
  border-color: #eafcff;
  color: #041018;
  transform: scale(0.93);
}
.touch-btn-small { width: 54px; height: 54px; }
.touch-btn-fire {
  width: 88px;
  height: 88px;
  border-color: rgba(255, 79, 163, 0.6);
  background: rgba(40, 10, 30, 0.62);
}
.touch-btn-fire .tb-icon { font-size: 26px; }
.touch-btn-fire .tb-label { font-size: 10px; }
.touch-btn-fire.pressed,
.touch-btn-fire:active {
  background: var(--pink);
  border-color: #fff;
  color: #1a0410;
}

/* ===========================================================================
   TOUCH LAYOUT

   On a touchscreen the two bottom corners belong to the thumbs, so the
   readouts move out of the way: health to the bottom centre (between the
   joystick and the fire button), the blaster to the top left, and everything
   else stays in the top band. Nothing overlaps a control.
   =========================================================================== */
body.touch-mode #health-block {
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: 200px;
}
body.touch-mode #health-text { justify-content: center; }
body.touch-mode #health-value { font-size: 18px; }
body.touch-mode #health-bar { height: 12px; }

body.touch-mode #weapon-block {
  left: 22px;
  right: auto;
  top: 106px;
  bottom: auto;
  width: 172px;
  text-align: left;
}
body.touch-mode #weapon-name { font-size: 14px; }
body.touch-mode #weapon-kind { display: none; }
body.touch-mode #weapon-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}
body.touch-mode #weapon-list li { padding: 2px 6px; font-size: 9.5px; }
body.touch-mode #weapon-list li .wname { display: none; }

body.touch-mode #killfeed {
  bottom: auto;
  top: 46%;
  max-width: 210px;
  font-size: 11px;
}
body.touch-mode #center-msg { top: 24%; }
body.touch-mode #msg-big { font-size: 46px; }
body.touch-mode #msg-small { font-size: 12px; }

body.touch-mode #scoreboard {
  width: 158px;
  padding: 7px 7px 5px;
}
body.touch-mode #scoreboard table { font-size: 11px; }
body.touch-mode #scoreboard td.name { max-width: 66px; }
body.touch-mode #scoreboard td.num { width: 22px; }

body.touch-mode #crosshair { width: 22px; height: 22px; margin: -11px 0 0 -11px; }

/* Short screens (a phone in landscape) - trim everything down. */
@media (max-height: 470px) {
  #hud-corner { display: none; }
  body.touch-mode #weapon-block { top: 62px; width: 140px; }
  .touch-btn { width: 50px; height: 50px; }
  .touch-btn-small { width: 46px; height: 46px; }
  .touch-btn-fire { width: 74px; height: 74px; }
  #stick { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
  #stick-knob { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  #top-bar { top: 8px; }
  .hud-card { padding: 4px 12px 6px; }
  .hud-value { font-size: 18px; }
  #scoreboard { width: 140px; }
  body.touch-mode #msg-big { font-size: 34px; }
}

/* ===========================================================================
   ROTATE PROMPT
   =========================================================================== */
#rotate-overlay {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(700px 500px at 50% 40%, #16204a, #05070f 78%);
}
#rotate-overlay.hidden { display: none; }
.rotate-inner {
  max-width: 380px;
  text-align: center;
}
.rotate-icon {
  font-size: 62px;
  line-height: 1;
  margin-bottom: 12px;
  animation: rotate-nudge 2.4s ease-in-out infinite;
}
@keyframes rotate-nudge {
  0%, 40%, 100% { transform: rotate(0deg); }
  55%, 85% { transform: rotate(90deg); }
}
.rotate-inner h2 { font-size: 24px; margin-bottom: 8px; }
.rotate-inner p { font-size: 13.5px; line-height: 1.6; color: var(--dim); margin: 0 0 18px; }

#rotate-hint {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(8px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 20;
  margin: 0;
  padding: 6px 14px;
  font-size: 11.5px;
  color: var(--dim);
  background: rgba(8, 13, 30, 0.85);
  border: 1px solid var(--panel-line);
  border-radius: 20px;
  pointer-events: none;
}
body.portrait-phone #rotate-hint { display: block; }

/* ===========================================================================
   MOBILE MENUS

   Bigger tap targets, and panels that never trap the player off-screen on a
   short landscape view - the whole screen scrolls if it has to.
   =========================================================================== */
@media (pointer: coarse), (max-width: 900px) {
  .btn { padding: 14px 20px; font-size: 15px; }
  .btn-big { padding: 17px 22px; font-size: 18px; }
  .btn-small { padding: 10px 15px; font-size: 12.5px; }
  .field { margin-bottom: 12px; font-size: 13.5px; }
  .field select { padding: 11px 12px; font-size: 14px; min-width: 140px; }
  .panel-actions .btn { flex: 1 1 auto; }
  .screen { align-items: flex-start; padding: 16px 12px 20px; }
  .panel { padding: 20px 18px; }
  .link-btn { font-size: 13px; padding: 6px 0; }
}

@media (orientation: portrait) and (max-width: 820px) {
  .brand h1 { font-size: 30px; }
  .menu-side { padding: 13px; }
  .about-list { font-size: 12.5px; }
}

/* ===========================================================================
   SMALL SCREENS

   A phone in landscape has very little height, and a phone in portrait has
   very little width. On both, the three cards in the top bar and the
   scoreboard would otherwise collide, so the bar is compacted, the "leader"
   card is dropped (the scoreboard already marks the leader in gold) and the
   readouts are pulled in to the corners.

   These come last in the file on purpose: they are the rules most likely to
   need to win.
   =========================================================================== */
@media (max-width: 900px) {
  #top-bar { top: 8px; gap: 5px; }
  .hud-card { min-width: 62px; padding: 4px 9px 6px; }
  .hud-label { font-size: 8.5px; letter-spacing: 0.12em; }
  .hud-value { font-size: 16px; }
  #leader-card { display: none; }

  #scoreboard { top: 8px; right: 8px; width: 138px; padding: 6px 6px 5px; }
  #scoreboard table { font-size: 10.5px; }
  #scoreboard th, #scoreboard td { padding: 2px 3px; }
  #scoreboard td.name { max-width: 56px; }
  #scoreboard td.num { width: 20px; }

  #hud-buttons { left: 8px; top: 8px; gap: 6px; }
  .icon-btn { width: 40px; height: 36px; font-size: 14px; }
  #hud-corner { display: none; }

  body.touch-mode #weapon-block { top: 92px; left: 8px; width: 126px; }
  body.touch-mode #killfeed { top: 38%; max-width: 170px; font-size: 10.5px; }
}

@media (orientation: portrait) and (max-width: 820px) {
  /* There is not enough width for the cards and the scoreboard side by side,
     so in portrait the scoreboard drops below them. */
  #scoreboard { top: 60px; right: 8px; width: 128px; }
  #hud-buttons { top: 8px; left: 8px; }
  .icon-btn { width: 36px; height: 34px; }

  body.touch-mode #weapon-block { top: 60px; left: 8px; width: 118px; }
  body.touch-mode #weapon-name { font-size: 12.5px; }
  body.touch-mode #health-block { width: 146px; }
  body.touch-mode #health-value { font-size: 16px; }
  body.touch-mode #killfeed { display: none; }
  body.touch-mode #msg-big { font-size: 36px; }

  .touch-btn { width: 54px; height: 54px; }
  .touch-btn-small { width: 48px; height: 48px; }
  .touch-btn-fire { width: 78px; height: 78px; }
  #stick { width: 108px; height: 108px; margin: -54px 0 0 -54px; }
  #stick-knob { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
}