:root {
  --bg: #070a12;
  --grid: #101827;
  --ink: #e6edf7;
  --dim: #6b7a90;
  --accent: #46e0b0;
  --danger: #ff5a6a;
  --ground: #1d2942;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 600px at 50% -10%, #16203a 0%, transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  user-select: none;
  -webkit-user-select: none;
}

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

#hud {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--grid);
  font-size: 0.95rem;
}

.hud-left { display: flex; gap: 0.6rem; align-items: baseline; }
.hud-left > span:not(.hud-label) { color: var(--ink); margin-right: 0.9rem; }
.hud-left #wave { color: var(--accent); font-weight: 700; }
.hud-left #targets { font-variant-numeric: tabular-nums; }

.hud-label {
  color: var(--dim);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

.hud-right { display: flex; align-items: baseline; gap: 0.5rem; }
#civilization { font-size: 1.6rem; font-weight: 700; color: #a7d8ff; font-variant-numeric: tabular-nums; }
.civilization-hud { padding-right: 0.8rem; border-right: 1px solid var(--grid); }
#civilization-era { color: #d4e7fa; font-size: 0.85rem; }
#civilization-next { display: block; font-size: 0.58rem; color: #a8bbd3; }
.civilization-eras { margin: 0.7rem 0; color: #a8bbd3; font-size: 0.75rem; text-align: left; }
.civilization-eras summary { cursor: pointer; }
.civilization-eras ul { padding-left: 1.2rem; line-height: 1.7; }
@media (max-width: 700px) { #hud { flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem; } .hud-label { font-size: 0.6rem; } }

#ammo {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--accent);
  margin-left: 0.55rem;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s;
}

#ammo.low { color: var(--danger); }

/* Every shot thumps the ammunition counter. Two beats, the second softer, so
   it reads as a heartbeat rather than a single bounce. `scale` is animated
   rather than `transform` so it composites on its own and cannot clash with
   any layout transform on the counter. */
#ammo.beat { animation: heartbeat 0.62s ease-out; }

@keyframes heartbeat {
  0%   { scale: 1; }
  12%  { scale: 1.28; }
  26%  { scale: 1; }
  40%  { scale: 1.16; }
  62%  { scale: 1; }
}

/* ---------- Field ---------- */

#field {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

#sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#sky-compass { position: absolute; top: 16px; left: 20px; color: #c0d5e8; font-size: 0.68rem; letter-spacing: 0.1em; pointer-events: none; z-index: 1500; }
#crosshair { position: absolute; top: 50%; left: 50%; translate: -50% -50%; color: #cee5f050; font-size: 24px; pointer-events: none; }
#sky-status { position: absolute; bottom: 18px; left: 50%; translate: -50% 0; width: min(75%, 600px); text-align: center; color: #d0e6f4; font-size: 0.78rem; pointer-events: none; z-index: 1500; text-shadow: 0 1px 5px #000; }
#comet-radar { position: absolute; right: 18px; top: 30px; width: 88px; height: 88px; border: 1px solid #7dacc969; border-radius: 50%; background: radial-gradient(circle, #142a3980, #081726b0); pointer-events: none; z-index: 1500; }
#comet-radar::after { content: ''; position: absolute; left: 43px; top: 3px; height: 81px; border-left: 1px solid #7dacc930; }
#comet-radar span { position: absolute; top: -20px; width: 100%; text-align: center; font-size: 9px; color: #aac6db; letter-spacing: 0.06em; }
#comet-radar b { position: absolute; left: 39px; top: 35px; font-size: 11px; color: var(--accent); }
.radar-dot { position: absolute; width: 5px; height: 5px; translate: -50% -50%; border-radius: 50%; background: #ffc788; box-shadow: 0 0 5px #ffae55; }
.radar-dot.urgent { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.sky-intro { color: #a8bbd3; font-size: 0.82rem; line-height: 1.6; }
#game-help { position: fixed; left: 16px; bottom: 12px; z-index: 5000; color: #c8d7eb; font-size: 0.7rem; max-width: min(440px, calc(100vw - 32px)); }
#game-help[open] { background: #0d192ef5; border: 1px solid #35506d; border-radius: 10px; padding: 18px; max-height: 75vh; overflow-y: auto; font-size: 0.82rem; line-height: 1.6; }
#game-help summary { cursor: pointer; }
#game-help a { color: var(--accent); }
#connection-status { position: fixed; left: 50%; top: 80px; translate: -50% 0; z-index: 5000; color: #ffe0ad; font-size: 0.8rem; text-align: center; pointer-events: none; }
#visitor-count { color: #a7d8ff; }

.question {
  position: absolute;
  top: 0;
  transform: translateY(0);
  translate: none;
  padding: 0.35rem 0.7rem;
  font-size: clamp(1rem, 2.3vw, 1.45rem);
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
  /* Opaque, not translucent: questions can cross mid-flight, and a see-through
     box turns both expressions into unreadable mush when they do. */
  background: #0c172bef;
  border: 1px solid #c3946155;
  border-radius: 7px;
  text-shadow: 0 0 14px rgba(70, 224, 176, 0.28);
}

.question.urgent { border-color: var(--danger); color: #ffd6c1; }

/* Animate `scale`/`opacity` only. The falling position is driven by inline
   `transform: translateY(...)`, so animating `transform` here would snap the
   question back to the top of the field for the length of the animation. */
.question.hit {
  animation: pop 0.24s ease-out forwards;
}

/* The one question left standing after a ground hit — the reason the run
   ended. Marked in the danger colour and lifted above everything else. */
.question.grounded {
  z-index: 2000;
  color: var(--danger);
  border-color: var(--danger);
  box-shadow: 0 0 26px rgba(255, 90, 106, 0.35);
  text-shadow: 0 0 14px rgba(255, 90, 106, 0.4);
}

@keyframes pop {
  to { scale: 1.6; opacity: 0; }
}

/* Wave announcement. Sits over the field during the between-wave lull and
   fades out on its own; pointer-events none so it never eats a keystroke
   target or blocks a falling question visually for longer than the fade. */
#banner {
  position: absolute;
  top: 34%;
  left: 50%;
  translate: -50% -50%;
  z-index: 3000;
  pointer-events: none;
  opacity: 0;
  font-size: clamp(2rem, 7vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-shadow: 0 0 40px rgba(70, 224, 176, 0.45);
}

#banner.show { animation: wave-in 2.5s ease-out; }

@keyframes wave-in {
  0%   { opacity: 0; scale: 0.85; }
  14%  { opacity: 1; scale: 1; }
  70%  { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1.05; }
}

/* Pause curtain. Covers the field only — the HUD stays readable so the
   player can see the state they are returning to. */
#pause {
  position: absolute;
  inset: 0;
  z-index: 3500;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: rgba(7, 10, 18, 0.82);
  backdrop-filter: blur(3px);
}

#pause.visible { display: flex; }

#pause span {
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}

#pause small { color: var(--dim); font-size: 0.85rem; }

/* ---------- Turret ---------- */

#turret {
  flex: 0 0 auto;
  padding: 0.7rem 1.25rem 2.3rem;
  text-align: center;
  border-top: 2px solid var(--ground);
  background: linear-gradient(180deg, rgba(29, 41, 66, 0.35), transparent);
}

#typed {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-height: 1.2em;
  transition: color 0.15s, text-shadow 0.15s;
}

#typed.hit { color: var(--accent); text-shadow: 0 0 22px var(--accent); }
#typed.miss { color: var(--danger); text-shadow: 0 0 22px var(--danger); }

.hint { margin: 0.15rem 0 0; color: var(--dim); font-size: 0.78rem; }

kbd {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--grid);
  border-radius: 4px;
  background: #0d1424;
  font-family: inherit;
  font-size: 0.9em;
}

/* ---------- Game over ---------- */

#overlay {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 1.5rem;
  background: rgba(7, 10, 18, 0.9);
  backdrop-filter: blur(4px);
}

#overlay.visible { display: grid; }

.panel {
  width: min(30rem, 100%);
  padding: 1.75rem 2rem 2rem;
  border: 1px solid var(--grid);
  border-radius: 14px;
  background: #0b1120;
  text-align: center;
}

.panel h1 {
  margin: 0;
  font-size: 1.9rem;
  letter-spacing: 0.04em;
  color: var(--danger);
}

#over-reason { margin: 0.4rem 0 1.1rem; color: var(--dim); font-size: 0.9rem; }

.reached { margin: 0 0 1rem; color: var(--dim); font-size: 0.9rem; }
.reached strong { color: var(--accent); }

.final { margin: 0 0 1.3rem; font-size: 1rem; color: var(--dim); }
.final strong {
  display: block;
  font-size: 2.6rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

#board {
  margin: 0 0 1.3rem;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 0.92rem;
}

#board li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.32rem 0.5rem;
  border-radius: 6px;
}

#board li.mine { background: rgba(70, 224, 176, 0.11); }
#board li.loading { color: var(--dim); justify-content: center; }

.board-head {
  display: flex;
  gap: 0.7rem;
  padding: 0 0.5rem 0.3rem;
  color: var(--dim);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}
.board-head .who { flex: 1; }

.rank { width: 1.6rem; color: var(--dim); text-align: right; }
.wv { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 0.85em; }
.who { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pts { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 700; }

.restart { margin: 0; color: var(--dim); font-size: 0.82rem; }

/* ================= Multiplayer ================= */

/* Lobby and waiting room reuse the game-over panel chrome. */
#lobby, #waiting {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  place-items: center;
  padding: 1.5rem;
  overflow-y: auto;
  background: rgba(7, 10, 18, 0.94);
  backdrop-filter: blur(5px);
}

#lobby.visible, #waiting.visible { display: grid; }

.lobby-panel { width: min(34rem, 100%); }
.guide-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1rem; margin: 1rem 0; font-size: 0.8rem; }
.guide-links a { color: var(--accent); text-underline-offset: 0.2em; }
.guide-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.lobby-panel h1 { color: var(--accent); letter-spacing: 0.14em; }
.tagline { margin: 0.3rem 0 1.2rem; color: var(--dim); font-size: 0.9rem; }

.btn {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--grid);
  border-radius: 7px;
  background: #121b2f;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: #041014; border-color: var(--accent); font-weight: 700; }
.btn.subtle { color: var(--dim); }
.btn.tiny { padding: 0.25rem 0.55rem; font-size: 0.78rem; }

.divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.3rem 0 1rem;
  color: var(--dim);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--grid);
}

.field { display: block; text-align: left; margin-bottom: 0.7rem; }
.field span { display: block; color: var(--dim); font-size: 0.7rem; letter-spacing: 0.12em; margin-bottom: 0.25rem; }

input, select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--grid);
  border-radius: 7px;
  background: #0d1424;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }

.create-row, .join-row, .share-row { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; }
.create-row select { flex: 1; }
.join-row input { text-transform: uppercase; letter-spacing: 0.2em; }

.rooms-title {
  margin: 1.3rem 0 0.5rem;
  color: var(--dim);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  font-weight: 400;
  text-align: left;
}

#room-list { list-style: none; margin: 0; padding: 0; text-align: left; }
#room-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  font-size: 0.88rem;
}
#room-list li:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
#room-list .rcode { color: var(--accent); font-weight: 700; letter-spacing: 0.1em; }
#room-list .rname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#room-list .rmeta { color: var(--dim); font-size: 0.78rem; }
#room-list .empty { color: var(--dim); justify-content: center; }

.lobby-error { margin: 0.8rem 0 0; color: var(--danger); font-size: 0.82rem; min-height: 1em; }

#waiting-players { list-style: none; margin: 1rem 0; padding: 0; text-align: left; }
#waiting-players li { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem; }
.picon { font-size: 1.1rem; }
.pname { flex: 1; }
.tag { color: var(--dim); font-size: 0.7rem; letter-spacing: 0.1em; }
.tag.off { color: var(--danger); }

.req-title { color: var(--dim); font-size: 0.7rem; letter-spacing: 0.14em; margin: 0.8rem 0 0.4rem; text-align: left; }
.req { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; }
.req span { flex: 1; text-align: left; }

/* Live roster during a shared round. */
#roster {
  position: fixed;
  bottom: 9rem;
  right: 0.9rem;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--grid);
  border-radius: 9px;
  background: rgba(11, 17, 32, 0.85);
  font-size: 0.82rem;
  pointer-events: none;
}
#roster[hidden] { display: none; }
.rp { display: flex; align-items: baseline; gap: 0.5rem; }
.rp.me { font-weight: 700; }
.rp .pname { min-width: 5rem; }
.rp .pkills { color: var(--dim); font-size: 0.75rem; min-width: 1.4rem; text-align: right; }
.rp .pammo { font-variant-numeric: tabular-nums; min-width: 2.2rem; text-align: right; }

/* Shot tracer: a short beam from the firing player's slot to the target,
   drawn in that player's colour so every client can see who killed what. */
.tracer {
  position: absolute;
  height: 2px;
  transform-origin: 0 50%;
  border-radius: 2px;
  pointer-events: none;
  z-index: 2500;
  animation: tracer-fade 0.3s ease-out forwards;
}
.tracer.missed { opacity: 0.45; height: 1px; }

@keyframes tracer-fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}