/* ═══════════════════════════════════════════════════════════════════════════
   slither.io — black and green chrome.

   The world is the interface: a huge dark circle of food with snakes drawn on
   it, so everything around it is quiet — one accent green, greys for the panels,
   and the only saturated colour on screen belonging to the game (the red
   boundary band, the palette of the snakes, the glow of the food).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --font-display: 'Bebas Neue', 'DM Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --bg: #000000;
  --surface: #0b0b0b;
  --surface2: #131313;
  --surface3: #1c1c1c;
  --border: #232323;
  --border2: #2f2f2f;

  --text: #f5f5f5;
  --muted: #8a8a8a;

  --green: #1db954;
  --green-bright: #1ed760;
  --green-dim: #0f5c2a;
  --red: #e91429;

  /* The arena's own palette, so the canvas and the CSS agree. */
  --world: #070c09;
  --band: #b3241f;
  --orb: #7ef7a8;
}

html[data-theme='light'] {
  --bg: #f4f6f4;
  --surface: #ffffff;
  --surface2: #f0f3f0;
  --surface3: #e6eae6;
  --border: #d8ded8;
  --border2: #c6cec6;
  --text: #101410;
  --muted: #5c665c;
  --world: #dfeae3;
  --orb: #2f9e5c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.shell { max-width: 1080px; margin: 0 auto; padding: 14px 16px 44px; }

/* ── Header ─────────────────────────────────────────────────────────────── */

.header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.home-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; color: var(--muted);
  border: 1px solid var(--border); text-decoration: none;
  transition: color .16s ease, border-color .16s ease;
}
.home-btn:hover { color: var(--green-bright); border-color: var(--green-dim); }
.home-btn svg { width: 18px; height: 18px; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); }
.brand-mark {
  width: 14px; height: 14px; border-radius: 4px; background: var(--green);
  box-shadow: 0 0 14px rgba(29, 185, 84, .6);
}
.brand-text { font-size: 22px; letter-spacing: .5px; }
.brand-accent { color: var(--green); }
.header-right { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: var(--green-bright); border-color: var(--green-dim); }
.icon-btn svg { width: 18px; height: 18px; }
.link-btn { color: var(--muted); font-size: 13px; }

/* ── Screens, panels, buttons ───────────────────────────────────────────── */

.screen { display: none; }
.screen.active { display: block; }

/* `hidden` must actually hide: a display:flex in a class rule beats the user
   agent's [hidden] rule at equal specificity, and an overlay that stays laid out
   is an invisible wall over everything under it. */
.overlay[hidden],
.touch[hidden] { display: none; }

.menu-hero { padding: 26px 0 8px; }
.hero-title {
  font-family: var(--font-display); font-size: 46px; letter-spacing: 1px;
  margin: 0 0 6px; line-height: 1;
}
.hero-sub { color: var(--muted); margin: 0; max-width: 640px; line-height: 1.6; }
.hero-sub strong { color: var(--green-bright); }

.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 14px; }

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.panel.slim { padding: 10px 12px; margin-bottom: 10px; }
.panel-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin: 0 0 12px; font-weight: 600;
}
.count {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface3); color: var(--text); font-size: 11px;
}

.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.field input {
  width: 100%; padding: 11px 12px; border-radius: 10px; font-size: 15px;
  background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
  font-family: var(--font-body);
}
.field input:focus { outline: none; border-color: var(--green); }
#join-code { text-transform: uppercase; letter-spacing: .28em; font-family: var(--font-mono); }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
  padding: 11px 16px; border-radius: 10px; cursor: pointer; font-size: 14px;
  background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
  font-family: var(--font-body); transition: background .16s ease, border-color .16s ease;
}
.btn:hover { border-color: var(--green-dim); }
.btn.primary { background: var(--green); border-color: var(--green); color: #04120a; font-weight: 700; }
.btn.primary:hover { background: var(--green-bright); border-color: var(--green-bright); }
.btn.tiny { padding: 6px 10px; font-size: 12px; }
.hint { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 10px 0 0; }
.hint.err { color: var(--red); }

.skins { display: flex; flex-wrap: wrap; gap: 8px; }
.skin {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border2); border-radius: 10px;
  color: var(--text); font-size: 13px;
}
.skin.on { border-color: var(--green); background: var(--surface3); }
.skin .swatch { width: 26px; height: 12px; border-radius: 6px; }

.lobby-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lobby-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px; background: var(--surface2);
  border: 1px solid var(--border);
}
.lobby-row .code { font-family: var(--font-mono); letter-spacing: .16em; font-size: 15px; }
.lobby-row .mode { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.mode.public { color: var(--green-bright); }
.mode.private { color: #4b8fe2; }
.lobby-row .meta { color: var(--muted); font-size: 12px; }

/* ── The game screen is full-bleed ─────────────────────────────────────── */

.screen.game { position: fixed; inset: 0; display: none; background: var(--world); }
.screen.game.active { display: block; }
#canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }

.hud { position: absolute; inset: 0; pointer-events: none; }
.hud-left { position: absolute; left: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; }
.hud-right { position: absolute; right: 14px; top: 14px; width: min(230px, 34vw); }
.hud-right .panel { background: rgba(11, 11, 11, .72); backdrop-filter: blur(6px); }
html[data-theme='light'] .hud-right .panel { background: rgba(255, 255, 255, .8); }

.chip {
  background: rgba(11, 11, 11, .72); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; width: fit-content;
}
.chip.big { font-size: 18px; font-weight: 700; color: var(--green-bright); }
#hud-arena { font-family: var(--font-mono); letter-spacing: .16em; }
#hud-best { color: #f5c518; }

.board, .kills { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.board li, .kills li {
  display: flex; align-items: center; gap: 6px; padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.board li:last-child, .kills li:last-child { border-bottom: none; }
.board .rank { color: var(--muted); font-family: var(--font-mono); width: 16px; }
.board .who { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .who.mine { color: var(--green-bright); font-weight: 600; }
.board .len { font-family: var(--font-mono); color: var(--muted); }
.kills li { color: var(--muted); }
.kills .victim { color: var(--text); }
.kills .killer { color: var(--red); }
#minimap { display: block; width: 170px; height: 170px; border-radius: 10px; background: rgba(0,0,0,.35); }

/* ── Death overlay ─────────────────────────────────────────────────────── */

.overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .72); z-index: 6; padding: 16px;
}
.overlay-card {
  background: var(--surface); border: 1px solid var(--border2); border-radius: 16px;
  padding: 22px; width: min(460px, 100%); text-align: center;
}
.overlay-title { font-family: var(--font-display); font-size: 34px; margin: 0 0 6px; letter-spacing: .5px; }
.overlay-sub { color: var(--muted); margin: 0 0 16px; line-height: 1.5; }
.overlay-actions { display: flex; gap: 10px; justify-content: center; }

/* ── Touch ─────────────────────────────────────────────────────────────── */

.touch { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.touch .fire {
  position: absolute; right: 22px; bottom: 40px; width: 96px; height: 96px;
  border-radius: 50%; pointer-events: auto; font-weight: 700; letter-spacing: .1em;
}

/* ── Settings dropdown ─────────────────────────────────────────────────── */

.settings-dropdown {
  position: fixed; right: 16px; top: 64px; width: 250px; z-index: 20;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 14px;
  padding: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.settings-dropdown hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; cursor: pointer; }
.check input { accent-color: var(--green); }
.theme-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }

@media (max-width: 760px) {
  .menu-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 36px; }
  .hud-right { display: none; }
}