/*
 * Skirmish — client chrome.
 *
 * Hand-written, no framework, no webfonts: the whole game has to run on a LAN
 * with no route to the internet, so every asset here is either a CSS gradient
 * or a system font. The canvas paints the game; this file only styles the thin
 * layer of DOM around it (menu, connection overlay, chat input, help hint).
 *
 * Palette: near-black ground, one restrained accent (#4ea1ff, the same blue the
 * server hands out as PLAYER_COLORS[0]) and one alarm colour (#ff5f56).
 */

:root {
  --bg:          #05070a;
  --bg-panel:    #0b1019;
  --bg-input:    #070b11;
  --line:        #1c2634;
  --line-strong: #2b3a4e;
  --text:        #cbd6e4;
  --text-dim:    #6d7d92;
  --accent:      #4ea1ff;
  --accent-soft: rgba(78, 161, 255, 0.16);
  --danger:      #ff5f56;

  /* One monospace stack, no downloads. The arcade look comes from the tracking
     and the uppercase, not from a display face we would have to ship. */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas,
          "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;

  color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.45;
  /* The canvas is the interface; stray text selection from a drag-to-aim would
     only ever be an accident. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/*
 * JS toggles this on #menu, #overlay and #chat-bar. The `[hidden]` twin matters
 * because these three elements set an explicit `display`, which out-specifies
 * the user-agent rule for the `hidden` attribute — so toggling the property
 * alone would not hide them.
 */
.hidden,
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ */
/* Canvas                                                              */
/* ------------------------------------------------------------------ */

#game {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg);
  /* The canvas draws its own reticle at the mouse (render.js drawCursorHud). */
  cursor: none;
  /* Stop mobile/trackpad gestures from panning the page under the game. */
  touch-action: none;
}

/* ------------------------------------------------------------------ */
/* Chat bar (bottom-left, under the canvas-drawn chat log)             */
/* ------------------------------------------------------------------ */

/*
 * Vertical placement is dictated by what render.js paints in this corner. The
 * HP bar and ammo cluster occupy the bottom band (18px margin + a 20px bar), and
 * the canvas chat log stacks upward from 12px above that. Sitting the input at
 * 46px keeps the health and ammo readouts — the things you need mid-fight —
 * fully visible while typing; the bar only ever overlays the newest chat lines,
 * and only for as long as the input is open.
 */
/* Its bottom offset and height are mirrored by CHAT_BAR_CLEAR in
   client/render.js (the open chat log starts that far up): change one, change
   the other. Its left edge and width are the chat log's column: client/main.js
   measures the bar (measureChatColumn), and client/chat.js chatColumnFallback
   mirrors this rule for when it cannot. */
#chat-bar {
  position: fixed;
  left: 14px;
  bottom: 46px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(460px, calc(100vw - 28px));
  padding: 7px 11px;
  background: rgba(7, 11, 17, 0.92);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.chat-caret {
  color: var(--accent);
  font-weight: 700;
  line-height: 1;
}

#chat-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.02em;
  -webkit-user-select: text;
  user-select: text;
}

#chat-input::placeholder { color: #45536a; }

/* ------------------------------------------------------------------ */
/* Help hint (bottom-right)                                            */
/* ------------------------------------------------------------------ */

#help-hint {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 15;
  max-width: min(560px, 60vw);
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  /* Never steal a click that was meant for the arena. */
  pointer-events: none;
}

#help-hint b {
  color: #9fb2c8;
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Full-screen panels: #menu and #overlay                              */
/* ------------------------------------------------------------------ */

#menu,
#overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(78, 161, 255, 0.10), rgba(0, 0, 0, 0) 60%),
    rgba(3, 5, 8, 0.86);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

#overlay { z-index: 50; }

.card {
  width: 100%;
  max-width: 380px;
  padding: 26px 26px 22px;
  background:
    linear-gradient(180deg, rgba(78, 161, 255, 0.05), rgba(0, 0, 0, 0) 120px),
    var(--bg-panel);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  /* The "soft glow": a tight accent halo plus a deep drop shadow so the card
     reads as lit from within rather than pasted on. */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(78, 161, 255, 0.14),
    0 24px 60px rgba(0, 0, 0, 0.7);
  text-align: center;
}

/* Thin accent rule across the top edge of the card. */
.card {
  position: relative;
}

/* Centred while it fits; when it is taller than the window the auto margins
   fall to 0, so it starts at the panel's top and scrolls, instead of being
   clipped above the top where no scrollbar can reach (align-items: center). */
#menu > .card,
#overlay > .card { margin: auto; }
.card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg,
              rgba(0, 0, 0, 0), var(--accent) 35%, var(--accent) 65%, rgba(0, 0, 0, 0));
  opacity: 0.75;
}

/* ------------------------------------------------------------------ */
/* Menu card                                                           */
/* ------------------------------------------------------------------ */

.wordmark {
  margin: 4px 0 2px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.22em;
  /* Optical correction: heavy tracking pushes the block right of centre. */
  text-indent: 0.22em;
  color: #eaf2ff;
  text-shadow: 0 0 18px rgba(78, 161, 255, 0.55), 0 2px 0 rgba(0, 0, 0, 0.6);
}

.tagline {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.server {
  margin-bottom: 18px;
  padding: 7px 10px;
  background: var(--accent-soft);
  border: 1px solid rgba(78, 161, 255, 0.28);
  border-radius: 3px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #a9cdff;
  /* Server names are arbitrary; keep a long one on one line. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field {
  display: block;
  text-align: left;
  margin-bottom: 14px;
}

.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

#menu-name {
  display: block;
  width: 100%;
  padding: 11px 12px;
  background: var(--bg-input);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  letter-spacing: 0.08em;
  outline: 0;
  transition: border-color 0.12s linear, box-shadow 0.12s linear;
  -webkit-user-select: text;
  user-select: text;
}

#menu-name::placeholder { color: #3f4c60; }

#menu-name:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(78, 161, 255, 0.18);
}

/*
 * Spawn loadout: three radio cards in a row. The radio itself is invisible but
 * still focusable (arrow keys move the pick); the card body beside it shows
 * the checked and focused states.
 */
.loadout {
  min-width: 0;          /* a fieldset otherwise refuses to shrink below its content */
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  text-align: left;
}

.loadout legend { padding: 0; }

.loadout-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.loadout-card {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.loadout-card input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.loadout-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 8px 8px 7px;
  background: var(--bg-input);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  transition: border-color 0.12s linear, background-color 0.12s linear, box-shadow 0.12s linear;
}

.loadout-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.loadout-gun,
.loadout-nades {
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  /* One line each at any card width; the card's title has the whole kit. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loadout-card:hover .loadout-body { border-color: rgba(78, 161, 255, 0.55); }

/* Border and text only, no glow: PLAY is the one lit thing on the card. */
.loadout-card input:checked + .loadout-body {
  background: rgba(78, 161, 255, 0.10);
  border-color: var(--accent);
}

.loadout-card input:checked + .loadout-body .loadout-name { color: #dcecff; }
.loadout-card input:checked + .loadout-body .loadout-gun { color: #a9cdff; }

.loadout-card input:focus-visible + .loadout-body {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#menu-play,
#overlay-button {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: #dcecff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  cursor: pointer;
  transition: background-color 0.12s linear, color 0.12s linear,
              box-shadow 0.12s linear, transform 0.06s linear;
}

#menu-play:hover,
#overlay-button:hover {
  background: var(--accent);
  color: #04070c;
  box-shadow: 0 0 22px rgba(78, 161, 255, 0.45);
}

#menu-play:active,
#overlay-button:active {
  transform: translateY(1px);
  box-shadow: 0 0 10px rgba(78, 161, 255, 0.3);
}

#menu-play:focus-visible,
#overlay-button:focus-visible,
#menu-name:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#menu-play:disabled,
#overlay-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--accent-soft);
  color: var(--text-dim);
  box-shadow: none;
  transform: none;
}

/* PLAY (RESUME on the pause card) is the only solid accent on the card. */
#menu-play {
  background: var(--accent);
  color: #04070c;
  box-shadow: 0 0 18px rgba(78, 161, 255, 0.3);
}

#menu-play:not(:disabled):hover {
  background: #6fb4ff;
  box-shadow: 0 0 26px rgba(78, 161, 255, 0.5);
}

.play-row {
  display: flex;
  gap: 6px;
}

.play-row #menu-play {
  flex: 1 1 auto;
  width: auto;
}

/* Fullscreen: a quiet square toggle as tall as PLAY. Corners out when off,
   in when on (aria-pressed, kept by main.js from fullscreenchange). */
#menu-fullscreen {
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.12s linear, color 0.12s linear, background-color 0.12s linear;
}

#menu-fullscreen:hover { border-color: var(--accent); color: #dcecff; }

#menu-fullscreen[aria-pressed="true"] {
  background: rgba(78, 161, 255, 0.10);
  border-color: var(--accent);
  color: #dcecff;
}

#menu-fullscreen .fs-exit { display: none; }
#menu-fullscreen[aria-pressed="true"] .fs-enter { display: none; }
#menu-fullscreen[aria-pressed="true"] .fs-exit { display: inline; }

/* One focus ring for every control on the card. */
#menu :is(input[type="range"], select, button, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#menu .setting.check:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/*
 * The error line reserves its height even when empty so that showing a message
 * ("server full") never shifts the button out from under the cursor.
 */
#menu-error {
  min-height: 18px;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--danger);
  text-shadow: 0 0 12px rgba(255, 95, 86, 0.35);
}

/*
 * Settings: one even grid, label over control, the value at the label's
 * right end. Sound and aim on the first row, camera and feel on the second;
 * a new setting (M5's music, M12's minimap) takes the next free cell.
 */
.settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  align-items: end;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: left;
}

.setting {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.setting .field-label {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.setting output {
  color: #a9cdff;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
}

.setting.check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  cursor: pointer;
}

.setting.check .field-label { margin: 0; }

/* Mouse speed does nothing without the mouse lock (main.js greys it then). */
.setting.off { opacity: 0.45; }

#menu-volume,
#menu-sens {
  width: 100%;
  margin: 2px 0;
  accent-color: var(--accent);
}

#menu-shake {
  margin: 0;
  accent-color: var(--accent);
}

/* The music's level and mute switch (M5), drawn like the slider and switch above. */
#menu-music {
  width: 100%;
  margin: 2px 0;
  accent-color: var(--accent);
}

#menu-music-mute {
  margin: 0;
  accent-color: var(--accent);
}

#menu-look {
  font: inherit;
  font-size: 12px;
  color: inherit;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  padding: 3px 6px;
  accent-color: var(--accent);
}

#menu-look option { color: #111; }

/* The menu as the pause card: the match shows through, the tagline says it
   has not stopped, the callsign is fixed for the session, and the error
   line's slot holds how to get back (and out). */
.tag-pause,
.pause-only,
.pause-foot { display: none; }

#menu.paused .tag-menu { display: none; }

#menu.paused .tag-pause {
  display: inline;
  color: var(--danger);
}

#menu.paused .pause-only {
  display: inline;
  text-transform: none;
  letter-spacing: 0.04em;
}

#menu.paused .field,
#menu.paused #menu-error { display: none; }

#menu.paused .pause-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 18px;
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-align: left;
}

#menu-leave {
  flex: 0 0 auto;
  padding: 4px 0 4px 8px;
  background: none;
  border: 0;
  color: var(--text-dim);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
}

#menu-leave:hover,
#menu-leave:focus-visible { color: var(--danger); }

#menu.paused {
  cursor: pointer;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(78, 161, 255, 0.08), rgba(0, 0, 0, 0) 60%),
    rgba(3, 5, 8, 0.62);
}

#menu.paused .card { cursor: default; }

/* The vote the pause card carries while the match's end card is up
   (#menu-vote, filled by main.js syncPauseVote): the end card's own choices,
   which the pause card covers. */
.vote {
  margin: 4px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  background: rgba(78, 161, 255, 0.05);
  text-align: left;
}

.vote-title {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* The card's prompt, what the choices are for ("Vote for the next map"). */
.vote-prompt {
  margin: -2px 0 7px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.vote-choices {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vote-choice {
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.vote-choice:hover,
.vote-choice:focus-visible { border-color: var(--accent); }

.vote-choice.picked {
  border-color: var(--accent);
  background: rgba(78, 161, 255, 0.18);
  font-weight: 800;
}

.vote-choice.picked::after { content: "  \2713"; }

.vote-hint {
  margin-top: 7px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

/* ------------------------------------------------------------------ */
/* Toast (volume / mute feedback)                                      */
/* ------------------------------------------------------------------ */

#toast {
  position: fixed;
  left: 50%;
  top: 14px;
  /* Above the menu and the overlay: a toast about the FULLSCREEN button
     must be seen from the menu. It never takes a click. */
  z-index: 60;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: rgba(7, 11, 17, 0.9);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text);
  pointer-events: none;
}

/* The keyboard legend, folded under a Controls header (a native <details>);
   the in-game hint line carries the keys in play. */
.controls {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  text-align: left;
}

.controls summary {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin: 0;
  cursor: pointer;
  list-style: none;
}

.controls summary::-webkit-details-marker { display: none; }

.controls summary::before {
  content: "\25B8";
  font-size: 9px;
  transition: transform 0.12s linear;
}

.controls[open] summary::before { transform: rotate(90deg); }
.controls summary:hover { color: #dcecff; }

.legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 14px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  text-align: left;
  color: var(--text-dim);
}

.legend li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.legend b {
  flex: 0 0 auto;
  color: #9fb2c8;
  font-weight: 700;
}

.legend span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Connection overlay                                                  */
/* ------------------------------------------------------------------ */

#overlay .card {
  max-width: 340px;
  padding: 28px 26px 24px;
}

.status-dot {
  width: 10px;
  height: 10px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(255, 95, 86, 0.14), 0 0 18px rgba(255, 95, 86, 0.7);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

#overlay-text {
  margin-bottom: 20px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text);
  /* Close reasons come straight off the wire and can be long. */
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* Small viewports (must stay usable at 800x600)                       */
/* ------------------------------------------------------------------ */

@media (max-height: 660px), (max-width: 560px) {
  .card { padding: 18px 18px 16px; max-width: 340px; }
  .wordmark { font-size: 26px; }
  .tagline { margin-bottom: 12px; }
  .server { margin-bottom: 12px; }
  .loadout { margin-bottom: 12px; }
  .loadout-body { padding: 6px 6px 5px; }
  .settings { gap: 8px 12px; padding-top: 10px; }
  .controls { margin-top: 10px; }
  #help-hint { font-size: 10px; max-width: 46vw; }
  #chat-bar { width: min(360px, calc(100vw - 28px)); }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot { animation: none; }
  #menu-play, #overlay-button, #menu-name, .loadout-body, #menu-fullscreen,
  .controls summary::before { transition: none; }
}