:root {
  --void: #0b0d12;
  --void-grid: #161a22;
  --ice: #5ee7ff;
  --coral: #ff5d5d;
  --signal: #ffd23f;
  --paper: #eef3f8;
  --paper-dim: #8b96a8;
  --panel: #11141b;
  --panel-border: #232a36;
  --panel-bg: #14171f;
  --panel-bg-alt: #12151c;
  --input-bg: #0d1017;
  /* HUD text over the game canvas has no background box anymore, so a soft
     shadow does the legibility work the box used to do (text still follows
     --paper/--paper-dim since the canvas fill re-themes right along with
     everything else — see the ctx.fillStyle theme check in game.js). */
  --hud-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* The game world re-themes along with everything else (see game.js's
   ctx.fillStyle theme check) — this block only re-themes the UI chrome:
   overlay screens, buttons, inputs. */
:root[data-theme="light"] {
  --void: #eef1f6;
  --void-grid: #dce1ea;
  --ice: #0ea5c4;
  --coral: #d43f3f;
  --signal: #a9720a;
  --paper: #171b24;
  --paper-dim: #5c6478;
  --panel: #ffffff;
  --panel-border: #d7dce6;
  --panel-bg: #ffffff;
  --panel-bg-alt: #ffffff;
  --input-bg: #f3f5f9;
  --hud-shadow: 0 1px 3px rgba(255, 255, 255, 0.7);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--void);
  font-family: 'Nunito Sans', sans-serif;
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--void);
  touch-action: none;
}

/* Bump this on every push to Render — outside #hud/#start-screen so it's
   visible regardless of game state, a quick "did my deploy actually land"
   check without opening dev tools. */
/* Only on the start screen (not during play — no reason to clutter the
   HUD) — a small corner badge instead of another row in the panel, so it's
   discoverable without competing with Play for attention. */
#discord-link {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  background: var(--input-bg);
  color: var(--paper-dim);
}
#discord-link svg {
  width: 20px;
  height: 20px;
}
#discord-link:hover {
  color: #5865f2;
  border-color: #5865f2;
}

#version-tag {
  position: fixed;
  right: 8px;
  bottom: 6px;
  font-size: 11px;
  font-family: 'JetBrains Mono', 'Nunito Sans', monospace;
  color: var(--paper-dim);
  opacity: 0.55;
  text-shadow: var(--hud-shadow);
  pointer-events: none;
  z-index: 20;
}

/* ---------- HUD ---------- */
/* Plain text over the game canvas, no panels — a text-shadow carries the
   legibility work a background box used to do. */
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: 'Nunito Sans', sans-serif;
}
#hud.hidden { display: none; }

#leaderboard {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 190px;
}
.lb-title {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-shadow: var(--hud-shadow);
  margin-bottom: 8px;
}
#lb-list {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 13px;
  line-height: 1.65;
}
#lb-list li { color: var(--paper); text-shadow: var(--hud-shadow); }
#lb-list li span { color: var(--paper-dim); font-family: 'Nunito Sans', sans-serif; font-size: 12px; }
#lb-list li span.me { color: var(--ice); font-family: inherit; font-size: inherit; font-weight: 700; }

#minimap-canvas {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 150px;
  height: 150px;
  background-color: rgba(24, 28, 38, 0.75);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 20px 20px;
  border-radius: 4px;
}

/* Only shown once a player's mass passes POWERUP_MASS_CAP (server.js) —
   explains why power-ups still get picked up but stop doing anything
   except Virus Immunity, instead of leaving that silent. */
#oversized-note {
  position: absolute;
  bottom: 100px;
  left: 22px;
  max-width: 220px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 12px;
  color: var(--paper-dim);
  text-shadow: var(--hud-shadow);
}
#oversized-note.hidden { display: none; }

#effects-hud {
  position: absolute;
  bottom: 68px;
  left: 22px;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
}
.effect-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 12px;
  color: var(--paper);
  text-shadow: var(--hud-shadow);
  white-space: nowrap;
}
.effect-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.effect-badge.low {
  animation: effect-blink 0.5s step-start infinite;
}
@keyframes effect-blink {
  50% { opacity: 0.25; }
}

#mass-readout {
  position: absolute;
  bottom: 22px;
  left: 22px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--ice);
  text-shadow: var(--hud-shadow);
}
#mass-readout::after {
  content: ' mass';
  font-size: 13px;
  color: var(--paper-dim);
  font-family: 'Nunito Sans', sans-serif;
}

#best-readout {
  position: absolute;
  bottom: 24px;
  left: 130px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  color: var(--paper-dim);
  text-shadow: var(--hud-shadow);
}
#best-readout span {
  color: var(--paper);
  font-weight: 500;
}

#kill-feed {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.kill-feed-entry {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  color: var(--paper);
  text-shadow: var(--hud-shadow);
}
.kill-feed-entry .name { color: var(--coral); }
.kill-feed-entry .me { color: var(--ice); }

#player-count {
  position: absolute;
  bottom: 22px;
  right: 22px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 12px;
  color: var(--paper-dim);
  text-shadow: var(--hud-shadow);
}

/* Only shown in the final minute before a scheduled restart — deliberately
   loud (big, warm, pulsing) since it only appears when it actually matters,
   unlike the old always-visible dim countdown. */
#reset-countdown {
  position: absolute;
  bottom: 48px;
  right: 22px;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--coral);
  text-shadow: var(--hud-shadow);
  animation: reset-countdown-pulse 1s ease-in-out infinite;
}
#reset-countdown.hidden { display: none; }
@keyframes reset-countdown-pulse {
  50% { opacity: 0.6; }
}

#rank-badge {
  position: absolute;
  top: 180px;
  left: 20px;
  width: 150px;
  box-sizing: border-box;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  text-shadow: var(--hud-shadow);
}
#rank-badge.hidden { display: none; }
#rank-badge.rank-1 { color: #ffd23f; }
#rank-badge.rank-2 { color: #cdd6e0; }
#rank-badge.rank-3 { color: #d99a5b; }

/* Sits a little above dead-center — your own cube is always drawn at true
   screen-center (camera follows you), so a banner right on top of it would
   cover your own name/mass label. */
#spawn-protected-banner {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.03em;
  color: var(--ice);
  text-shadow: var(--hud-shadow);
  animation: spawn-protected-pulse 1s ease-in-out infinite;
}
#spawn-protected-banner.hidden { display: none; }
@keyframes spawn-protected-pulse {
  50% { opacity: 0.55; }
}

#effect-hints {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: right;
}
.effect-hint {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  text-shadow: var(--hud-shadow);
}

/* ---------- Overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--void);
  overflow: hidden;
}
.overlay.hidden { display: none; }
#settings-overlay, #skin-overlay { z-index: 10; }

.void-grid {
  position: absolute;
  inset: -50%;
  background-image:
    linear-gradient(var(--void-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--void-grid) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: drift 30s linear infinite;
  opacity: 0.55;
}
@keyframes drift {
  from { transform: translate(0, 0); }
  to { transform: translate(42px, 42px); }
}

/* No card, no border, no shadow — just the content, like a plain hand-written
   HTML page instead of a dashboard. */
.start-panel {
  position: relative;
  z-index: 1;
  width: min(360px, 88vw);
  padding: 20px;
  text-align: center;
}

/* logo.svg is an 800x300 wordmark with its own dark background/glow — sized
   to the panel's own content width so it reads as the page's actual title,
   not a small icon next to text. See favicon.svg for the cropped, text-free
   version used as the browser-tab icon. */
.logo {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto 22px;
}
/* Wordmark/tagline fills follow the page theme instead of the fixed
   white/light-green the standalone logo.svg uses — that combination is
   illegible in light theme (light text on a light page). */
.logo-wordmark { fill: var(--paper); }
.logo-io { fill: var(--ice); }
.logo-tagline { fill: var(--paper-dim); }

.field {
  display: block;
  text-align: left;
  margin-bottom: 14px;
}
.field span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 6px;
}
.skin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.skin-swatch {
  aspect-ratio: 1;
  border: 1px solid var(--panel-border);
  cursor: pointer;
  padding: 0;
  background: var(--input-bg);
  overflow: hidden;
}
.skin-swatch canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.skin-swatch.selected {
  border-color: var(--ice);
}

.skin-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
#skin-preview {
  width: 40px;
  height: 40px;
  border: 1px solid var(--panel-border);
  flex: none;
}

.server-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
#server-select {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid var(--panel-border);
  background: transparent;
  color: var(--paper);
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14px;
}
#server-select:focus {
  outline: none;
  border-bottom-color: var(--ice);
}

.quality-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  flex: none;
}
.quality-bars .bar {
  width: 4px;
  background: var(--panel-border);
}
.quality-bars .bar-1 { height: 6px; }
.quality-bars .bar-2 { height: 11px; }
.quality-bars .bar-3 { height: 16px; }
.quality-bars[data-level="1"] .bar-1 { background: var(--coral); }
.quality-bars[data-level="2"] .bar-1,
.quality-bars[data-level="2"] .bar-2 { background: var(--signal); }
.quality-bars[data-level="3"] .bar-1,
.quality-bars[data-level="3"] .bar-2,
.quality-bars[data-level="3"] .bar-3 { background: #3ddc84; }

/* Plain flat buttons — no radius, no drop shadow, just a color change on
   hover, the way a button looks when nobody's tried to make it fancy. */
#play-btn, #respawn-btn, #menu-restart-btn, #menu-resume-btn {
  width: 100%;
  padding: 13px;
  margin-top: 8px;
  border: none;
  background: var(--ice);
  color: #06222b;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
}
#play-btn:hover, #respawn-btn:hover, #menu-restart-btn:hover, #menu-resume-btn:hover {
  opacity: 0.85;
}
#play-btn:active, #respawn-btn:active, #menu-restart-btn:active, #menu-resume-btn:active {
  opacity: 0.7;
}
#play-btn:focus-visible, #respawn-btn:focus-visible, #menu-restart-btn:focus-visible, #menu-resume-btn:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 2px;
}

#connection-status {
  min-height: 18px;
  font-size: 12px;
  color: var(--coral);
  margin: 12px 0 0;
}

#death-title {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--coral);
}
#death-detail {
  color: var(--paper-dim);
  font-size: 14px;
  margin: 0 0 20px;
}

.menu-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.menu-setting-row span:first-child {
  text-transform: none;
  font-size: 13px;
  color: var(--paper);
  letter-spacing: normal;
}
.toggle-btn {
  border: none;
  background: none;
  padding: 0;
  color: var(--paper-dim);
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.toggle-btn.on {
  color: var(--ice);
}
.menu-hint {
  color: var(--paper-dim);
  font-size: 12px;
  margin: 14px 0 0;
}

/* Plain underlined text instead of an outlined box — a border with nothing
   filled in behind it read as a stray rectangle rather than a button. */
.secondary-btn {
  display: block;
  width: 100%;
  padding: 8px 0;
  margin-top: 8px;
  border: none;
  background: none;
  color: var(--paper-dim);
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.secondary-btn:hover {
  color: var(--paper);
}
#skin-picker-btn {
  display: inline;
  width: auto;
  margin-top: 0;
  font-size: 13px;
}

.controls-note {
  position: relative;
  z-index: 1;
  color: var(--paper-dim);
  font-size: 12px;
  text-align: center;
  margin: 0 0 14px;
}

.alltime-list {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  max-height: 130px;
  overflow-y: auto;
}
.alltime-list li { color: var(--paper); }
.alltime-list li span { color: var(--paper-dim); font-family: 'Nunito Sans', sans-serif; font-size: 12px; }
.alltime-list li.empty { color: var(--paper-dim); list-style: none; margin-left: -18px; }

@media (max-width: 480px) {
  #leaderboard { width: 150px; }
  #mass-readout { font-size: 22px; }
}

/* ---------- Touch-only controls (joystick, feed/split/pulse) ----------
   Everything below is gated behind body.touch-device, added in game.js
   only when the pointer is coarse (a phone/tablet) — desktop with a mouse
   never sees any of this. #hud has pointer-events:none globally so the
   canvas underneath still receives clicks; each control here opts back
   into pointer-events individually. */
#mobile-controls { display: none; }

body.touch-device #mobile-controls { display: block; }

#joystick-base {
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: auto;
  touch-action: none;
}
#joystick-thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: rgba(94, 231, 255, 0.35);
  border: 1px solid var(--ice);
  pointer-events: none;
}

#action-buttons {
  position: absolute;
  right: 20px;
  bottom: 24px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
}
.action-btn {
  pointer-events: auto;
  touch-action: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  background: rgba(20, 23, 31, 0.6);
  color: var(--paper);
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-shadow: var(--hud-shadow);
}
.action-btn:active { background: rgba(94, 231, 255, 0.25); border-color: var(--ice); }
.action-btn.hidden { display: none; }
#pulse-btn { border-color: #39ff8a; color: #39ff8a; }

/* Reflow the rest of the HUD around the joystick (bottom-left) and the
   action buttons (bottom-right) instead of letting them collide. */
body.touch-device #minimap-canvas { width: 96px; height: 96px; }
body.touch-device #rank-badge { top: 126px; width: 120px; font-size: 12px; }
/* No Escape key on a phone — this opens the same pause menu as the key
   does on desktop. Leaderboard is pushed down to make room below it. */
#menu-btn { display: none; }
body.touch-device #menu-btn {
  display: block;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  background: rgba(20, 23, 31, 0.6);
  color: var(--paper);
  font-size: 16px;
  line-height: 1;
  pointer-events: auto;
  text-shadow: var(--hud-shadow);
}
body.touch-device #menu-btn:active { background: rgba(94, 231, 255, 0.25); border-color: var(--ice); }
body.touch-device #leaderboard { top: 64px; right: 16px; width: 128px; }
body.touch-device .menu-hint { display: none; } /* no Esc key on a phone — the Resume button replaces it */
body.touch-device .lb-title { font-size: 10px; margin-bottom: 4px; }
body.touch-device #lb-list { font-size: 11px; line-height: 1.5; }
body.touch-device #lb-list li:nth-child(n+6) { display: none; }
/* Centered+full-width kill-feed text was running under the top-right
   leaderboard on narrow screens — constrain it to the left portion instead
   of letting long "X ate Y" lines stretch edge to edge. */
body.touch-device #kill-feed {
  left: 12px;
  right: 150px;
  transform: none;
  align-items: flex-start;
  text-align: left;
}
body.touch-device .kill-feed-entry { font-size: 11px; }
/* The big descriptive effect text ("You can't be eaten" etc) is what made
   the mobile HUD feel cluttered — the compact badges below already carry
   the same information in a fraction of the space. */
body.touch-device #effect-hints { display: none; }
body.touch-device #player-count { display: none; }
body.touch-device #reset-countdown { bottom: 260px; }
body.touch-device #mass-readout { bottom: 150px; font-size: 20px; }
body.touch-device #best-readout { bottom: 176px; }
body.touch-device #effects-hud { bottom: 200px; }
body.touch-device #oversized-note { bottom: 224px; max-width: 150px; font-size: 11px; }