/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Kill the browser's default blue tap-highlight rectangle on every
     element, not just specific buttons — this used to only be set on a
     handful of icon buttons, which left it showing up on anything not
     explicitly covered (settings rows, face/skin picker buttons, mode
     buttons, list rows, etc). */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Buttons/links still get a visible focus state for keyboard/a11y users
   (outline), just not the mobile tap-highlight flash or a stray blue
   focus ring on touch taps. */
button, a, [role="button"] {
  -webkit-user-select: none;
  user-select: none;
}
button:focus, [role="button"]:focus, a:focus {
  outline: none;
}
button:focus-visible, [role="button"]:focus-visible, a:focus-visible {
  outline: 2px solid var(--green, #39ff6a);
  outline-offset: 2px;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #050a0f;
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: #e0f0ff;
  /* Prevent all default touch gestures globally; canvas gets its own touch-action */
  touch-action: none;
  /* Fill the safe area on iOS notch devices */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* A hair taller than the viewport purely so the browser has 1px of
   page-level scroll room to collapse its address bar into on load
   (see the _hideAddressBar script). All real UI still lives in
   position:fixed layers (#overlay, #hud, #game-canvas) so this
   invisible overscroll never affects layout or gameplay. */
body::after {
  content: '';
  display: block;
  height: 1px;
}

/* ─── Canvas ────────────────────────────────────────────────── */
#game-canvas {
  display: block;
  position: fixed;
  /* Expand to fill the entire screen including under notches */
  top: 0; left: 0;
  width: 100%; height: 100%;
  /* Extend behind safe areas so background color fills notch region */
  margin: calc(-1 * env(safe-area-inset-top)) calc(-1 * env(safe-area-inset-right))
          calc(-1 * env(safe-area-inset-bottom)) calc(-1 * env(safe-area-inset-left));
  width: calc(100% + env(safe-area-inset-left) + env(safe-area-inset-right));
  height: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
  cursor: none;
  touch-action: none; /* Critical: prevents passive-listener console warnings */
}

/* ─── HUD ───────────────────────────────────────────────────── */
/* ── First-run quick tutorial: two small cards, non-interactive
   (pointer-events: none) so it never blocks touch/steering input,
   fades in then auto-fades out after a few seconds. ─────────────── */
#quick-tutorial {
  position: fixed;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#quick-tutorial.visible { opacity: 1; }

.quick-tutorial-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 20px;
  background: rgba(10, 20, 18, 0.82);
  border: 1px solid var(--green-dim, rgba(126,255,178,0.4));
  color: var(--text, #eafff5);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}

.quick-tutorial-icon { font-size: 1rem; }

/* ── Random-event banner: food rain / double score window announcement.
   Sits below the HUD row, fades in/out, never blocks touch input. ──── */
#event-banner {
  position: fixed;
  left: 50%;
  top: 78px;
  transform: translateX(-50%);
  z-index: 16;
  pointer-events: none;
  padding: 8px 20px;
  border-radius: 22px;
  background: rgba(10, 20, 18, 0.85);
  border: 1.5px solid var(--green, #7effb2);
  color: var(--green, #7effb2);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  box-shadow: 0 0 18px rgba(126, 255, 178, 0.35);
}

#event-banner.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#event-banner.hidden { display: none; }

#hud {
  position: fixed;
  /* Push below the safe area (notch/dynamic island) */
  top: max(10px, calc(env(safe-area-inset-top) + 6px));
  /* Keep away from left/right safe areas and always centred */
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  /* Don't stretch full-width on tablets/desktop; cap it */
  max-width: min(96vw, 700px);
  /* Auto-centre between the safe-area margins */
  margin: 0 auto;
  /* Layout */
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  /* Remove rigid background - elements have their own */
  background: transparent;
  border: none;
  padding: 0;
  /* Typography */
  font-size: clamp(0.62rem, 2.2vw, 0.82rem);
  letter-spacing: 0.045em;
  color: rgba(180,230,255,0.9);
  box-sizing: border-box;
  max-height: 80px;
  overflow: hidden;
}

/* Individual HUD elements get their own badges */
#hud > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  /* Perf: backdrop-filter here forced continuous GPU recompositing every
     frame since the canvas underneath repaints at 60fps — a real mobile
     lag contributor. A solid semi-opaque background gives nearly the same
     "frosted pill" look for a fraction of the GPU cost. */
  background: rgba(8,16,26,0.82);
  border: 1px solid rgba(126,255,178,0.25);
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Score badge - warm blue gradient */
#hud-name-score {
  background: linear-gradient(135deg, rgba(50,150,255,0.15), rgba(100,200,255,0.08));
  border-color: rgba(100,200,255,0.4);
  color: #64c8ff;
  text-shadow: 0 0 8px rgba(100,200,255,0.6);
}

/* Best score badge - golden glow */
#hud-best-score {
  background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,215,0,0.06));
  border-color: rgba(255,215,0,0.5);
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255,215,0,0.6);
}

/* Length badge - mint green */
#hud-length {
  background: linear-gradient(135deg, rgba(126,255,178,0.12), rgba(126,255,178,0.06));
  border-color: rgba(126,255,178,0.4);
  color: #7effb2;
  text-shadow: 0 0 8px rgba(126,255,178,0.5);
}

/* Lives container - compact and glowing */
#hud-lives {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,80,80,0.1), rgba(255,100,100,0.05));
  border: 1px solid rgba(255,100,100,0.3);
  box-shadow: 0 0 15px rgba(255,80,80,0.3);
}

/* Tighter gap + smaller on very narrow portrait phones */
@media (max-width: 479px) {
  #hud {
    gap: 5px;
    padding: 0;
    font-size: 0.6rem;
    letter-spacing: 0.03em;
    flex-wrap: wrap;
  }
  
  #hud > span {
    padding: 5px 10px;
    font-size: 0.65rem;
  }
  
  #hud-lives {
    padding: 5px 8px;
  }
  
  /* Shrink separator dots on mobile */
  #hud span + span::before {
    margin-right: 2px;
    font-size: 0.5rem;
  }
  
  /* Boost label compact */
  .hud-boost-off { font-size: 0.6rem; }
  .hud-boost-on  { font-size: 0.6rem; }
  
  /* Hearts slightly smaller */
  .life-heart { font-size: 0.85rem; }
  
  /* Power-up badges compact */
  .powerup-badge { font-size: 0.6rem; padding: 2px 8px; }
}

#hud span {
  font-variant-numeric: tabular-nums;
}

/* Separator dots between HUD items */
#hud span + span::before {
  content: '·';
  margin-right: 6px;
  opacity: 0.3;
  color: rgba(126,255,178,0.4);
}

/* Remove separator before lives and pause button */
#hud #hud-lives::before {
  content: none !important;
  margin: 0 !important;
}

#hud #pause-btn::before {
  content: none !important;
  margin: 0 !important;
}

/* Boost indicator states */
.hud-boost-off {
  color: rgba(160,210,255,0.45);
  font-size: 0.75rem;
  text-shadow: none;
}

.hud-boost-on {
  color: #ffd04b;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255,208,75,0.8);
  animation: pulse-boost 0.4s ease-in-out infinite alternate;
}

@keyframes pulse-boost {
  from { opacity: 0.8; }
  to   { opacity: 1;   }
}

/* Timer — matches the HUD's blue-teal palette instead of clashing green */
#hud-timer {
  font-weight: 700;
  color: #7ee0ff;
  text-shadow: 0 0 6px rgba(126,224,255,0.5);
  font-size: 0.88rem;
}

#hud-timer.hud-timer-danger {
  color: #ff4444 !important;
  animation: pulse-danger 0.5s ease-in-out infinite alternate;
}

@keyframes pulse-danger {
  from { opacity: 0.8; }
  to   { opacity: 1; text-shadow: 0 0 10px rgba(255,60,60,0.8); }
}

/* ═══════════════════════════════════════════════════════════════
   OVERLAY — redesigned: solid black background, flat vibrant
   accent colors (no glassy transparent-green soup), hero
   (name + nickname + play) always visible first, everything
   else revealed below without needing a scroll to reach Play.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink:        #060907;   /* base canvas — slight green-black, not flat #000 */
  --panel:      #0d130f;   /* primary surface — subtle green tint ties cards to the snake identity */
  --panel-2:    #131a15;   /* nested/secondary surface, one step up from --panel */
  --line:       rgba(126,255,178,0.12);  /* hairline — green-tinted, not disconnected gray */
  --line-strong: rgba(126,255,178,0.28); /* for borders that need more presence (active states) */
  --green:      #39ff6a;   /* primary accent — solid, no alpha */
  --green-dim:  #1f8a42;
  --green-soft: #7effb2;   /* secondary emphasis — matches player head color elsewhere in-game */
  --amber:      #ffb300;   /* secondary accent */
  --red:        #ff3b3b;
  --blue:       #2fb8ff;
  --purple:     #b06bff;
  --text:       #eef5f0;   /* faint green-white, not flat gray */
  --text-dim:   #869e8f;   /* green-gray, ties dim text into the palette */
}

#overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background:
    radial-gradient(ellipse 900px 500px at 50% -8%, rgba(57,255,106,0.07), transparent 60%),
    var(--ink);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    max(20px, calc(env(safe-area-inset-top) + 14px))
    max(14px, env(safe-area-inset-right))
    max(28px, calc(env(safe-area-inset-bottom) + 16px))
    max(14px, env(safe-area-inset-left));
}

/* Faint drifting dot-field — echoes the game world's own particle
   texture (visible once you're playing) so the menu reads as sitting
   inside the same world rather than a flat page bolted in front of it.
   Two layers at different dot sizes/speeds for subtle parallax depth. */
#overlay::before {
  content: '';
  position: fixed;
  inset: -10% -10%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(126,255,178,0.16) 1px, transparent 1px),
    radial-gradient(rgba(126,255,178,0.09) 1px, transparent 1px);
  background-size: 46px 46px, 74px 74px;
  background-position: 0 0, 20px 30px;
  animation: overlay-drift 90s linear infinite;
}

@keyframes overlay-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-46px, -74px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #overlay::before { animation: none; }
}

#overlay-scroll {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: auto 0;
}

/* ── HERO — title / byline / nickname / play, always first ─── */
#hero-block {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding-top: 8px;
}

/* Top-corner icon buttons — gear (settings) top-left, speaker top-right.
   Fixed to the viewport corners so they stay put regardless of scroll
   position inside #overlay (previously absolute to #hero-block, which
   is vertically centered and made them drift toward the middle). */
#settings-gear-btn,
.icon-btn {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  width: 46px;
  height: 46px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
  z-index: 21;
  -webkit-tap-highlight-color: transparent;
}

#settings-gear-btn { left: max(14px, env(safe-area-inset-left)); }
.icon-btn           { right: max(14px, env(safe-area-inset-right)); }

#settings-gear-btn:hover,
.icon-btn:hover { border-color: var(--green-dim); }

#settings-gear-btn:active,
.icon-btn:active { transform: scale(0.92); }

.icon-btn.active { border-color: var(--green); }

#overlay-title {
  font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(1.55rem, 7.3vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--green);
  text-shadow: 0 0 28px rgba(57,255,106,0.25);
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 360px) {
  #overlay-title {
    font-size: clamp(1.3rem, 7vw, 3.2rem);
    letter-spacing: -0.005em;
  }
}

#overlay-byline {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}

#overlay-subtitle {
  font-size: 0.82rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

/* Player nickname — solid input bar, slither.io style */
#player-name-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 240px;
}

#player-name-display,
#player-name-input {
  width: 100%;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
}

#player-name-display {
  padding: 11px 20px;
  border-radius: 12px;
  background: var(--panel);
  border: 2px solid var(--line);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

#player-name-display:hover,
#player-name-display:active {
  border-color: var(--green);
}

#player-name-input {
  padding: 11px 20px;
  border-radius: 12px;
  background: var(--panel);
  border: 2px solid var(--green);
  color: var(--green);
  outline: none;
}

/* Play button — solid, punchy, one deliberate signature motion: a slow,
   low-amplitude breathing glow that reads as "alive" without being a
   flashy neon pulse. Everything else on the page stays still. */
#start-btn {
  margin-top: 2px;
  padding: 13px 56px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000;
  background: var(--green);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
  animation: start-btn-breathe 3.2s ease-in-out infinite;
}

@keyframes start-btn-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(57,255,106,0.35); }
  50%      { box-shadow: 0 0 0 10px rgba(57,255,106,0); }
}

@media (prefers-reduced-motion: reduce) {
  #start-btn { animation: none; }
}

#start-btn:hover { background: #55ff85; }
#start-btn:active { transform: scale(0.96); }

/* Score displays (game-over state, still inside hero block) */
#score-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.85rem;
  color: var(--text-dim);
  background: var(--panel);
  border: 2px solid var(--line);
  padding: 14px 40px;
  border-radius: 14px;
  margin-top: 4px;
}

#final-score {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--green);
  line-height: 1.1;
}

.share-score-btn {
  margin-top: 10px;
  min-height: 40px;
  padding: 8px 20px;
  border-radius: 20px;
  border: 1.5px solid var(--green-dim, rgba(126,255,178,0.5));
  background: rgba(126, 255, 178, 0.08);
  color: var(--green);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.share-score-btn:hover  { background: rgba(126, 255, 178, 0.16); }
.share-score-btn:active { transform: scale(0.96); }

#best-score-display {
  text-align: center;
}

#best-score-display p:first-child {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--amber);
  text-transform: uppercase;
  margin: 0;
}

#best-score-value {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--amber);
  margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
}

#overlay-title.victory { color: var(--amber); }

/* Daily challenge badge — solid pill, no pulse-glow soup */
.daily-badge {
  padding: 6px 18px;
  background: var(--amber);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #000;
}

/* ── Rotating instruction cards ──────────────────────────────
   Cards are stacked absolutely; JS toggles .active to fade/swap
   one at a time. Fixed-height wrapper so nothing jumps. ──────── */
#hint-carousel {
  width: 92%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hint-card-track {
  position: relative;
  width: 100%;
  height: 68px;
}

.hint-card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(13,19,15,0.6);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.hint-card.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  border-color: var(--line-strong);
}

.hint-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.hint-text {
  font-size: 0.78rem;
  color: var(--text);
  line-height: 1.25;
  text-align: left;
}

.hint-text strong {
  color: var(--green);
}

.hint-dots {
  display: flex;
  gap: 5px;
}

.hint-dots .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s ease, transform 0.2s ease;
}

.hint-dots .dot.active {
  background: var(--green);
  transform: scale(1.4);
}

/* ── Feature card — mode select + power summary chips ───────── */
#feature-card {
  position: relative;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 17px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  overflow: hidden;
}

/* Thin top-edge accent line — a quiet structural cue that this card
   holds the game's core rules/settings, without adding another full
   border weight competing with the hero above it. */
#feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green-dim) 20%, var(--green) 50%, var(--green-dim) 80%, transparent);
  opacity: 0.55;
}

.feature-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}

.feature-card-icon { font-size: 0.8rem; }

.mode-btns {
  display: flex;
  gap: 8px;
}

.mode-btn {
  flex: 1;
  padding: 10px 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 9px;
  border: 2px solid var(--line);
  background: var(--panel-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.mode-btn:hover {
  border-color: var(--green-dim);
}

.mode-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: #000;
}

.mode-desc {
  font-size: 0.68rem;
  color: var(--text-dim);
  line-height: 1.3;
}

.daily-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.daily-toggle:hover { border-color: var(--green-dim); }

.daily-toggle[aria-pressed="true"] {
  border-color: var(--green);
  background: rgba(126, 255, 178, 0.08); /* --green-soft at low alpha */
}

.daily-toggle-icon { font-size: 1.1rem; flex-shrink: 0; }

.daily-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.daily-toggle-title {
  font-size: 0.78rem;
  font-weight: 700;
}

.daily-toggle-sub {
  font-size: 0.64rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.powerups-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.powerups-toggle:hover,
.powerups-toggle:active {
  border-color: var(--green-dim);
  color: var(--text);
}

.powerups-toggle-arrow {
  font-size: 0.85rem;
  transition: transform 0.15s ease;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 7px;
}

.feature-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 4px;
  border-radius: 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.feature-chip span:first-child {
  font-size: 1.15rem;
  line-height: 1;
}

.feature-chip #achievement-count {
  color: var(--amber);
}

/* ── Settings Modal — centered overlay, opened via gear icon ─── */
#settings-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#settings-modal.hidden { display: none; }

#settings-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2,4,3,0.86);
  backdrop-filter: blur(2px);
}

/* ── Settings Panel ──────────────────────────────────────────── */
#settings-panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 85svh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(126,255,178,0.04);
}

.settings-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.settings-icon { font-size: 0.9rem; }

#settings-close-btn {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#settings-close-btn:hover { color: var(--text); }

/* ── Fullscreen Minimap — opened by tapping the in-game minimap ─── */
#fullmap-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
}

#fullmap-overlay.hidden { display: none; }

#fullmap-backdrop {
  position: absolute;
  inset: 0;
  background: #000;
}

#fullmap-panel {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100svh;
  background: #030608;
  overflow: hidden;
}

/* Canvas now fills the entire screen edge-to-edge — the header and the
   snake list both float on top of it as overlays (see below) rather than
   taking their own layout row, so the map itself gets all the space. */
#fullmap-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.fullmap-header {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(5,10,15,0.75);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
}

.fullmap-icon { font-size: 0.9rem; }

#fullmap-close-btn {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#fullmap-close-btn:hover { color: var(--text); }

/* Snake list — a collapsible bottom sheet floating over the map canvas.
   Collapsed by default to a single header bar so the map stays fully
   visible; tapping the header expands it to show the full scrollable
   list without navigating away from the map. */
#fullmap-list-wrap {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 2;
  max-height: 60svh;
  display: flex;
  flex-direction: column;
  background: rgba(5,10,15,0.82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.fullmap-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  flex: 0 0 auto;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}

.fullmap-list-arrow {
  transition: transform 0.2s;
  font-size: 0.6rem;
}

/* Collapsed state — only the header bar shows, list content is hidden
   entirely so it doesn't block the map underneath. */
#fullmap-list-wrap.collapsed #fullmap-list { display: none; }
#fullmap-list-wrap.collapsed .fullmap-list-arrow { transform: rotate(180deg); }

#fullmap-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  padding: 0 8px 8px;
}

.fullmap-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
}

.fullmap-row.fullmap-row--player {
  background: rgba(126,255,178,0.14);
  border: 1px solid rgba(126,255,178,0.35);
}

.fullmap-row.fullmap-row--boss {
  background: rgba(255,60,20,0.14);
  border: 1px solid rgba(255,60,20,0.35);
}

.fullmap-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.fullmap-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.fullmap-row-len {
  flex: 0 0 auto;
  color: var(--green);
  font-weight: 700;
}

.fullmap-row-pos {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 0.66rem;
  min-width: 66px;
  text-align: right;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.setting-row--vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.setting-label {
  font-size: 0.84rem;
  color: var(--text);
  white-space: nowrap;
  cursor: default;
  user-select: none;
}

.toggle-btn {
  padding: 6px 18px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--panel-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  min-width: 56px;
}

.toggle-btn.active {
  background: var(--green);
  color: #000;
  border-color: var(--green);
}

.slider-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
}

#setting-sensitivity {
  -webkit-appearance: none;
  appearance: none;
  width: 130px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  outline: none;
  cursor: pointer;
}

#setting-sensitivity::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green);
  cursor: pointer;
  transition: transform 0.12s;
}

#setting-sensitivity::-webkit-slider-thumb:hover { transform: scale(1.2); }

#setting-sensitivity::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green);
  border: none;
  cursor: pointer;
}

#sensitivity-val {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--green);
  min-width: 20px;
  text-align: right;
  font-weight: 700;
}

.design-btns {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.design-btn {
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 8px;
  border: 2px solid var(--line);
  background: var(--panel-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.design-btn:hover { border-color: var(--green-dim); }

.design-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: #000;
}

.design-btn.locked {
  opacity: 0.55;
  color: var(--text-dim);
  border-style: dashed;
}

.design-btn.locked:hover { border-color: var(--line); }

.design-btn-lock { font-size: 0.7rem; margin-right: 2px; }

.face-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 168px;
  overflow-y: auto;
  padding: 2px;
  /* Own scroll area inside the settings panel, since the emoji list is
     long — keeps the whole modal from growing tall on small screens. */
}

.face-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  border-radius: 8px;
  border: 2px solid var(--line);
  background: var(--panel-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
  padding: 0;
}

.face-btn:hover { border-color: var(--green-dim); transform: scale(1.06); }

.face-btn.active {
  background: var(--green);
  border-color: var(--green);
}

.face-btn--none {
  width: auto;
  padding: 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.face-btn--none.active { color: #000; }

.species-btns {
  display: flex;
  gap: 8px;
}

.species-btn {
  flex: 1 1 0;
  padding: 10px 8px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
}

.species-btn:hover { border-color: var(--green-dim); }

.species-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: #000;
}

.skin-lock-toast {
  width: 100%;
  padding: 8px 12px;
  margin-top: 4px;
  border-radius: 8px;
  background: rgba(255, 180, 60, 0.12);
  border: 1px solid rgba(255, 180, 60, 0.4);
  color: #ffcf7a;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
}

/* ── Stats Panel ─────────────────────────────────────────────── */
#stats-panel {
  width: 100%;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.stats-header:hover { background: var(--panel-2); }

.stats-arrow { transition: transform 0.2s; color: var(--text-dim); }
.stats-arrow.open { transform: rotate(90deg); }

#stats-body {
  padding: 0 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
}

.stat-row span:last-child {
  font-weight: 800;
  color: var(--green);
}

/* ─── Utility ───────────────────────────────────────────────── */
.hidden { display: none !important; }

.life-heart {
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.15s ease, opacity 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(255,100,100,0.9));
  text-shadow: 0 0 8px rgba(255,80,80,0.8);
}

.life-heart.lost {
  opacity: 0.22;
  filter: drop-shadow(0 0 2px rgba(255,80,80,0.3));
  transform: scale(0.8);
}

@keyframes life-lost-flash {
  0%   { background: rgba(255,60,60,0.38); }
  100% { background: transparent; }
}

.life-lost-flash {
  animation: life-lost-flash 0.45s ease-out forwards;
}

/* Power-up active badges on HUD */
#hud-powerups {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  pointer-events: none;
}

.powerup-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.2s ease;
  background: rgba(8,16,26,0.82);
  border: 1px solid;
}

.powerup-badge:hover { transform: scale(1.05); }

.powerup-badge.magnet {
  background: rgba(80,180,255,0.18);
  border-color: rgba(80,180,255,0.5);
  color: #52aaff;
  text-shadow: 0 0 6px rgba(82,170,255,0.8);
}

.powerup-badge.attack {
  background: rgba(255,60,60,0.18);
  border-color: rgba(255,80,80,0.55);
  color: #ff5e5e;
  text-shadow: 0 0 6px rgba(255,80,80,0.8);
  animation: pulse-attack 0.5s ease-in-out infinite alternate;
}

.powerup-badge.shield {
  background: rgba(160,216,255,0.15);
  border-color: rgba(160,216,255,0.55);
  color: #a0d8ff;
  text-shadow: 0 0 6px rgba(160,216,255,0.8);
  animation: pulse-shield 0.8s ease-in-out infinite alternate;
}

.powerup-badge.ghost {
  background: rgba(200,160,255,0.15);
  border-color: rgba(200,160,255,0.5);
  color: #c8a0ff;
  text-shadow: 0 0 6px rgba(200,160,255,0.8);
}

.powerup-badge.mine {
  background: rgba(255,159,64,0.15);
  border-color: rgba(255,159,64,0.5);
  color: #ff9f40;
  text-shadow: 0 0 6px rgba(255,159,64,0.8);
  animation: pulse-mine 0.6s ease-in-out infinite alternate;
}

.powerup-badge.speedboost {
  background: rgba(255,255,128,0.15);
  border-color: rgba(255,255,128,0.5);
  color: #ffff80;
  text-shadow: 0 0 6px rgba(255,255,128,0.8);
  animation: pulse-speed 0.3s ease-in-out infinite alternate;
}

@keyframes pulse-attack {
  from { opacity: 0.75; box-shadow: 0 0 4px rgba(255,80,80,0.3); }
  to   { opacity: 1;    box-shadow: 0 0 12px rgba(255,80,80,0.7); }
}

@keyframes pulse-shield {
  from { box-shadow: 0 0 4px rgba(160,216,255,0.3); }
  to   { box-shadow: 0 0 14px rgba(160,216,255,0.7); }
}

@keyframes pulse-mine {
  from { opacity: 0.8; }
  to   { opacity: 1; box-shadow: 0 0 10px rgba(255,159,64,0.5); }
}

@keyframes pulse-speed {
  from { opacity: 0.8; }
  to   { opacity: 1; box-shadow: 0 0 12px rgba(255,255,128,0.6); }
}

/* ─── Pause Button (in HUD) ────────────────────────────────── */
#pause-btn {
  pointer-events: auto; /* HUD itself has pointer-events:none, so re-enable for this control */
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(126,224,255,0.4);
  background: linear-gradient(135deg, rgba(30,100,150,0.3), rgba(10,50,80,0.3));
  color: #7ee0ff;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 15px rgba(126,224,255,0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#pause-btn:hover {
  background: linear-gradient(135deg, rgba(50,150,200,0.4), rgba(20,100,150,0.4));
  border-color: rgba(126,224,255,0.6);
  box-shadow: 0 0 20px rgba(126,224,255,0.4);
  transform: scale(1.1);
}

#pause-btn:active {
  transform: scale(0.95);
  background: linear-gradient(135deg, rgba(30,100,150,0.5), rgba(10,50,80,0.5));
}

/* ─── Pause Overlay ─────────────────────────────────────────── */
#pause-overlay {
  position: fixed;
  inset: 0;
  z-index: 30; /* above HUD (10) and canvas, below nothing else needed */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3,7,12,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px;
}
#pause-overlay.hidden { display: none; }

#pause-panel {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 28px 24px;
  border-radius: 20px;
  background: rgba(8,16,22,0.9);
  border: 1px solid rgba(80,200,255,0.22);
  box-shadow: 0 0 40px rgba(0,0,0,0.5);
  text-align: center;
}
#pause-panel h2 {
  font-size: 1.4rem;
  color: #7ee0ff;
  text-shadow: 0 0 12px rgba(126,224,255,0.5);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.pause-menu-btn {
  padding: 13px 18px;
  border-radius: 12px;
  border: 1px solid rgba(80,200,255,0.22);
  background: rgba(20,35,45,0.8);
  color: #e0f0ff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.pause-menu-btn:active { transform: scale(0.97); }

.pause-menu-btn-primary {
  background: rgba(126,224,255,0.16);
  border-color: rgba(126,224,255,0.5);
  color: #b8f0ff;
}
.pause-menu-btn-primary:active { background: rgba(126,224,255,0.3); }

.pause-menu-btn-danger {
  color: #ffb3b3;
  border-color: rgba(255,100,100,0.25);
}
.pause-menu-btn-danger:active { background: rgba(255,80,80,0.15); }

/* ═══════════════════════════════════════════════════════════════
   MULTIPLAYER — entry button, lobby overlay, in-match HUD/canvas.
   Deliberately mirrors the settings-modal / daily-toggle visual
   patterns above rather than inventing a new style language, since
   this is still "the same app", just a different mode.
═══════════════════════════════════════════════════════════════ */

/* ── Entry point button (start screen, feature card) ─────────── */
.mp-open-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mp-open-btn:hover { border-color: var(--green-dim); }
.mp-open-icon { font-size: 1.1rem; flex-shrink: 0; }
.mp-open-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mp-open-title { font-size: 0.78rem; font-weight: 700; }
.mp-open-sub {
  font-size: 0.64rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Lobby overlay (create/join room) ─────────────────────────── */
#mp-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#mp-overlay.hidden { display: none; }

#mp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2,4,3,0.86);
  backdrop-filter: blur(2px);
}

#mp-panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 85svh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(126,255,178,0.04);
}

.mp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--green);
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.mp-header-icon { font-size: 1rem; }
#mp-close-btn {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mp-close-btn:hover { color: var(--text); }

.mp-status {
  font-size: 0.76rem;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,179,0,0.1);
  border: 1px solid rgba(255,179,0,0.3);
  color: #ffd27a;
}
.mp-status.mp-status--error {
  background: rgba(255,60,60,0.1);
  border-color: rgba(255,60,60,0.35);
  color: #ff9a9a;
}
.mp-status.hidden { display: none; }

.mp-step { display: flex; flex-direction: column; gap: 10px; }
.mp-step.hidden { display: none; }

.mp-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.mp-action-btn:hover { border-color: var(--green-dim); }
.mp-action-btn:active { transform: scale(0.98); }

.mp-action-btn--primary {
  background: var(--green);
  border-color: var(--green);
  color: #000;
  font-weight: 700;
  justify-content: center;
}
.mp-action-btn--primary:hover { background: #55ff85; }
.mp-action-btn--primary .mp-action-sub { color: rgba(0,0,0,0.6); }

.mp-action-icon { font-size: 1.3rem; flex-shrink: 0; }
.mp-action-title { display: block; font-size: 0.86rem; font-weight: 700; }
.mp-action-sub { display: block; font-size: 0.68rem; color: var(--text-dim); margin-top: 1px; }

.mp-server-details {
  font-size: 0.72rem;
  color: var(--text-dim);
}
.mp-server-details summary {
  cursor: pointer;
  padding: 6px 2px;
  list-style: none;
}
.mp-server-details summary::-webkit-details-marker { display: none; }
.mp-server-label {
  display: block;
  margin: 8px 0 4px;
  font-size: 0.68rem;
}
.mp-server-input {
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: var(--ink);
  color: var(--text);
  font-size: 0.78rem;
}
.mp-server-input:focus { border-color: var(--green-dim); outline: none; }

.mp-code-label {
  font-size: 0.72rem;
  color: var(--text-dim);
}
.mp-code-input {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--panel-2);
  color: var(--green);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
}
.mp-code-input:focus { border-color: var(--green); outline: none; }

.mp-back-btn {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.78rem;
  cursor: pointer;
}
.mp-back-btn:hover { color: var(--text); }

.mp-waiting-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}
.mp-room-code {
  font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  color: var(--green);
  text-shadow: 0 0 24px rgba(57,255,106,0.25);
  text-align: center;
  padding: 6px 0;
}
.mp-copy-btn {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
}
.mp-copy-btn:hover { border-color: var(--green-dim); }
.mp-copy-btn.mp-copied { border-color: var(--green); color: var(--green); }

.mp-player-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.mp-player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--panel-2);
  font-size: 0.8rem;
}
.mp-player-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.mp-waiting-hint {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-align: center;
  margin-top: 2px;
}

/* ── In-match HUD ──────────────────────────────────────────────── */
#mp-hud {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  pointer-events: none;
}
#mp-hud.hidden { display: none; }
#mp-hud > * { pointer-events: auto; }

#mp-hud-room, #mp-hud-score, #mp-hud-length, #mp-hud-lives, #mp-hud-status {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(13,19,15,0.75);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
#mp-hud-room { color: var(--green-soft); }
#mp-hud-lives.hidden { display: none; }

#mp-hud-boost {
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(13,19,15,0.75);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}
#mp-hud-boost.hud-boost-active {
  background: rgba(255,179,0,0.18);
  border-color: rgba(255,179,0,0.45);
  color: #ffd27a;
}

#mp-exit-btn {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(13,19,15,0.75);
  backdrop-filter: blur(4px);
  color: var(--text-dim);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mp-exit-btn:hover { color: #ff9a9a; border-color: rgba(255,100,100,0.35); }

#mp-canvas {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: block;
  background: var(--ink);
}
#mp-canvas.hidden { display: none; }