* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: system-ui, -apple-system, sans-serif; color: #fff; }
#game { position: fixed; inset: 0; }
canvas { display: block; }
#game canvas { touch-action: none; }

#hud { position: fixed; inset: 0; pointer-events: none; }

#topbar {
  position: absolute; top: 18px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 32px;
  font-size: 28px; font-weight: 700;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
#timer { color: #fff; }
#timer.warn { color: #ffb84d; }
#timer.crit { color: #ff5252; animation: blink 0.6s infinite; }
#harvest { color: #ffd166; }

@keyframes blink { 50% { opacity: 0.4; } }

/* Player state pills — top-center, under the timer/harvest topbar */
#player-status {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  pointer-events: none;
  max-width: 92vw;
}
.ps-pill {
  background: rgba(0,0,0,0.72);
  border: 1.5px solid rgba(255,255,255,0.25);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.ps-pill.hidden    { background: rgba(20,40,72,0.85);  border-color: #66d9ff; color: #b9ecff; box-shadow: 0 0 12px rgba(102,217,255,0.35); }
.ps-pill.sprinting { background: rgba(20,52,28,0.85);  border-color: #6dd76d; color: #c4f0c4; box-shadow: 0 0 12px rgba(109,215,109,0.35); }
.ps-pill.taunting  { background: rgba(58,28,12,0.88);  border-color: #ff6b35; color: #ffd2bd; box-shadow: 0 0 14px rgba(255,107,53,0.55); animation: pillPulse 0.4s infinite alternate; }
.ps-pill.trapped   { background: rgba(60,38,12,0.88);  border-color: #ffb84d; color: #ffe0a8; }
.ps-pill.eliminated{ background: rgba(60,12,12,0.92);  border-color: #ff5252; color: #ffb0b0; animation: blink 1.0s infinite; }
.ps-pill.escaped   { background: rgba(40,20,60,0.92);  border-color: #c9a4ff; color: #e8d4ff; box-shadow: 0 0 12px rgba(201,164,255,0.45); }
.ps-pill.blocked   { background: rgba(50,50,50,0.85);  border-color: #888; color: #bbb; }
.ps-pill.skill-fired{ background: rgba(56,28,80,0.92); border-color: #c9a4ff; color: #e8d4ff;
                      box-shadow: 0 0 18px rgba(201,164,255,0.65); animation: pillPulse 0.35s 3 alternate; }
.ps-pill.skill-cd   { background: rgba(40,40,52,0.88); border-color: #66d9ff; color: #b9ecff; }
.ps-pill .ps-icon  { font-size: 14px; }

@keyframes pillPulse {
  from { box-shadow: 0 0 6px rgba(255,107,53,0.35); }
  to   { box-shadow: 0 0 16px rgba(255,107,53,0.85); }
}

@media (max-width: 720px) {
  #player-status { top: 54px; gap: 5px; }
  .ps-pill { padding: 4px 9px; font-size: 10px; letter-spacing: 0.8px; }
  .ps-pill .ps-icon { font-size: 12px; }
}

#status {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px;
}
/* Cooldown / status chips (SPRINT, HIDE, etc.) — glassy pill with
   colored rim glow per state. Reads as a real HUD piece, not a flat
   label. Mirrors PT's chip aesthetic. */
.cd {
  position: relative;
  background: linear-gradient(180deg, rgba(20,18,28,0.78) 0%, rgba(8,6,14,0.85) 100%);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
  color: #e5dffa;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.10);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  transition: border-color 0.18s, color 0.18s, box-shadow 0.18s;
}
.cd.ready {
  border-color: rgba(126,255,158,0.65);
  color: #c4f0c4;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.45),
    0 0 14px rgba(126,255,158,0.18),
    inset 0 1px 0 rgba(255,255,255,0.16);
}
.cd.cooldown {
  color: #99a3b0;
  border-color: rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(20,18,28,0.55) 0%, rgba(8,6,14,0.65) 100%);
}
.cd.active {
  border-color: rgba(255,209,102,0.85);
  color: #ffd166;
  background: linear-gradient(180deg, rgba(60,42,8,0.70) 0%, rgba(28,18,4,0.80) 100%);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.50),
    0 0 22px rgba(255,209,102,0.40),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
#status { gap: 10px; }

/* SAVE prompt — center-bottom panel that fades in when the local bunny
   is in range of a TRAPPED teammate. Pulses softly so the eye catches
   it. Single-tap E (or the SAVE mobile button) frees the teammate. */
@keyframes bh-save-pulse {
  0%   { box-shadow: 0 8px 20px rgba(0,0,0,0.45), 0 0 18px rgba(255,158,196,0.40), inset 0 1px 0 rgba(255,255,255,0.14); }
  50%  { box-shadow: 0 8px 22px rgba(0,0,0,0.50), 0 0 30px rgba(255,158,196,0.65), inset 0 1px 0 rgba(255,255,255,0.20); }
  100% { box-shadow: 0 8px 20px rgba(0,0,0,0.45), 0 0 18px rgba(255,158,196,0.40), inset 0 1px 0 rgba(255,255,255,0.14); }
}
#bh-rescue-prompt {
  position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(8px);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  background: linear-gradient(180deg, rgba(40,18,28,0.82) 0%, rgba(20,8,14,0.88) 100%);
  border: 1.5px solid rgba(255,158,196,0.65);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffd6e3;
  font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}
#bh-rescue-prompt.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  animation: bh-save-pulse 1.6s ease-in-out infinite;
}
#bh-rescue-prompt .key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: #ff9ec4; color: #2a0814;
  border-radius: 6px;
  font-weight: 900; font-size: 14px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.20), 0 1px 0 rgba(255,255,255,0.45);
}
#bh-rescue-prompt .icon { font-size: 18px; line-height: 1; }
#bh-rescue-prompt .name { color: #fff; font-weight: 800; }

/* ────────────────────────────────────────────────────────────────
   TEAMMATES SIDEBAR — richer "card" look with depth, gradient
   avatars, segmented HP bars, state pills. Drops the flat one-line
   text in favour of a 3-column layout: avatar / name+HP / pill.
   ──────────────────────────────────────────────────────────────── */
#teammates {
  position: absolute; top: 64px; left: 18px;
  display: flex; flex-direction: column; gap: 8px;
  width: 248px;
  font-family: system-ui, -apple-system, sans-serif;
  /* Shrink the whole roster panel 15% at the corner so it takes up less
     screen real estate — width, avatars, fonts, gaps all scale together. */
  transform: scale(0.85);
  transform-origin: top left;
}
.tm {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px 7px 8px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(20,18,38,0.86) 0%, rgba(8,6,22,0.92) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 6px 14px -8px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Side-glow accent for the YOU row */
.tm.you {
  box-shadow:
    0 6px 18px -8px rgba(102,217,255,0.45),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 3px 0 0 #66d9ff;
}
.tm.trapped {
  box-shadow:
    0 6px 18px -8px rgba(255,184,77,0.45),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 3px 0 0 #ffb84d;
  animation: tmTrappedPulse 1.6s ease-in-out infinite;
}
.tm.dead {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.tm.dead .tm-name { text-decoration: line-through; }
.tm.escaped {
  box-shadow:
    0 6px 18px -8px rgba(255,209,102,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 3px 0 0 #ffd166;
  opacity: 0.85;
  filter: none;
}
.tm.escaped .tm-name { text-decoration: none; color: #ffd166; }

/* Avatar bubble — gradient ball with the name initial */
.tm-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 16px;
  color: #fff;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 50%),
    radial-gradient(circle at 50% 50%, var(--c, #7C3AED) 0%, rgba(0,0,0,0.55) 110%);
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.45),
    inset 0 2px 3px rgba(255,255,255,0.30),
    0 4px 10px -4px rgba(0,0,0,0.6);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  flex: none;
}
.tm.dead .tm-avatar { filter: saturate(0.3); }

.tm-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tm-name {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700; font-size: 13px; letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm.you .tm-name { color: #c8eaff; }
.tm.trapped .tm-name { color: #ffd9a8; }
.tm-dist { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: #9aa3b5; }

/* Segmented HP bar — 3 cells, glow when on, embossed when off */
.tm-hp { display: flex; gap: 3px; }
.hp-cell {
  flex: 1; height: 7px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%);
  box-shadow:
    inset 0 1px 1px rgba(0,0,0,0.6),
    inset 0 -1px 0 rgba(255,255,255,0.04);
}
.hp-cell.on {
  background: linear-gradient(180deg, #84e88a 0%, #2f9b3a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 2px rgba(0,0,0,0.35),
    0 0 6px rgba(132,232,138,0.45);
}
.tm.trapped .hp-cell.on {
  background: linear-gradient(180deg, #ffd166 0%, #c97a16 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 2px rgba(0,0,0,0.35),
    0 0 6px rgba(255,209,102,0.45);
}

/* State pills (right side) */
.tm-pill {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 9.5px; letter-spacing: 0.1em;
  padding: 3px 8px; border-radius: 999px;
  white-space: nowrap;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}
.tm-pill.you      { background: rgba(102,217,255,0.18); color: #b9ecff; border-color: rgba(102,217,255,0.45); }
.tm-pill.trapped  { background: rgba(255,184,77,0.20);  color: #ffd9a8; border-color: rgba(255,184,77,0.55);
                    animation: tmPillPulse 1.2s ease-in-out infinite; }
.tm-pill.dead     { background: rgba(255,82,82,0.18);   color: #ffb0b0; border-color: rgba(255,82,82,0.45); }
.tm-pill.escaped  { background: rgba(255,209,102,0.22); color: #ffd166; border-color: rgba(255,209,102,0.55); }

@keyframes tmTrappedPulse {
  0%, 100% { box-shadow:
    0 6px 18px -8px rgba(255,184,77,0.45),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 3px 0 0 #ffb84d;
  }
  50%      { box-shadow:
    0 6px 22px -6px rgba(255,184,77,0.75),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 3px 0 0 #ffd166;
  }
}
@keyframes tmPillPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1.0; }
}

#prompt {
  position: absolute; bottom: 30%; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.7); padding: 10px 18px; border-radius: 6px;
  font-size: 16px; font-weight: 600; opacity: 0;
  transition: opacity 0.15s;
}
#prompt.show { opacity: 1; }

#harvest-bar {
  position: absolute; bottom: 26%; left: 50%; transform: translateX(-50%);
  width: 220px; height: 8px; background: rgba(0,0,0,0.6); border-radius: 4px;
  overflow: hidden; opacity: 0; transition: opacity 0.15s;
}
#harvest-bar.show { opacity: 1; }
/* No CSS width transition — the fill is updated every render frame from
   slot.progress, so easing here just lags the actual game state by 50ms.
   Drop the transition so the bar tracks the harvest 1:1. */
#harvest-bar-fill { height: 100%; width: 0%; background: #ffd166; }

#vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(120,0,0,0.0) 100%);
  pointer-events: none;
  transition: background 0.2s;
}

#fear-flash {
  position: absolute; inset: 0; background: rgba(180,0,0,0); pointer-events: none;
  transition: background 0.1s;
}
#fear-flash.active { background: rgba(180,0,0,0.35); animation: shake 0.4s; }

#scare-flash {
  position: absolute; inset: 0; background: transparent; pointer-events: none;
  mix-blend-mode: screen; opacity: 0;
}
#scare-flash.active {
  background: radial-gradient(ellipse at center, rgba(220,40,40,0.85) 0%, rgba(180,0,0,0.5) 40%, transparent 80%);
  opacity: 1;
  animation: scareflash 0.45s ease-out, shake 0.5s;
}
@keyframes scareflash {
  0% { opacity: 0; }
  10% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes shake {
  0%, 100% { transform: translate(0,0); }
  10% { transform: translate(-12px, 8px) rotate(-0.5deg); }
  25% { transform: translate(10px,-6px) rotate(0.4deg); }
  40% { transform: translate(-8px,-4px) rotate(-0.3deg); }
  55% { transform: translate(6px,10px) rotate(0.2deg); }
  70% { transform: translate(-4px,-8px) rotate(-0.2deg); }
  85% { transform: translate(3px, 5px) rotate(0.1deg); }
}

#hud.shake { animation: shake 0.5s; }

#mobile-controls {
  position: fixed; right: 0; bottom: 0;
  width: 0; height: 0; pointer-events: none; z-index: 5;
}
/* Glossy / jewel mobile buttons. Each per-button rule sets a base color
   via `background-color`; this base layer adds:
     • radial top-left highlight (specular shine)
     • upper-half soft white gradient (glass sheen)
     • inset bottom shadow (curvature)
     • inset top hairline (rim light)
     • outer soft drop shadow + colored rim glow on press
   The result reads as a polished jewel on top of the original color
   instead of a flat sticker. */
.mobile-btn {
  position: absolute;
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.55);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #1a1a1a;
  text-shadow: 0 1px 1px rgba(255,255,255,0.45);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* none, not manipulation — manipulation still lets the browser claim a
     pan from a touch that starts on the button, dropping the hold. */
  touch-action: none;
  pointer-events: auto;
  background-image:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 48%, rgba(0,0,0,0.20) 100%);
  background-color: #999;            /* fallback — overridden per .X-btn */
  background-blend-mode: normal;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.50),
    0 2px 6px rgba(0,0,0,0.35),
    inset 0 2px 0 rgba(255,255,255,0.55),
    inset 0 -8px 14px rgba(0,0,0,0.28);
  transition: transform 0.06s ease-out, box-shadow 0.12s, filter 0.06s;
}
.mobile-btn:active, .mobile-btn.pressed {
  /* No transform:scale — used to be scale(0.92), which shrinks the
   * button under the finger and triggers spurious pointerleave events
   * that prematurely release the harvest hold ('bar stuck at 0' bug).
   * We get the same 'pressed' visual via filter + box-shadow without
   * touching the layout bounding box. */
  filter: brightness(1.25) saturate(1.2);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -4px 8px rgba(0,0,0,0.40),
    inset 0 0 22px rgba(255,255,255,0.40);
}

/* Fan layout — quarter circle around bottom-right pivot, radius 200, button radius 48 */
.harvest-btn { right:  52px; bottom: 252px; background-color: #ffd166; }
.sprint-btn  { right: 152px; bottom: 222px; background-color: #6dd76d; color: #0d2a0d; }
.hide-btn    { right: 222px; bottom: 152px; background-color: #66d9ff; color: #0d2230; }
/* Triple-mode HARVEST/SAVE/HELP button — ui.js swaps these classes
   each frame based on player state. Each tint reads as a distinct
   urgency level: yellow=harvest, pink=save, red=help. */
.harvest-btn.mode-rescue { background-color: #ff9ec4; color: #2a0814;
                           box-shadow:
                             0 0 18px rgba(255,158,196,0.55),
                             0 10px 24px rgba(0,0,0,0.50),
                             inset 0 2px 0 rgba(255,255,255,0.55),
                             inset 0 -8px 14px rgba(0,0,0,0.30); }
.harvest-btn.mode-help   { background-color: #ff5252; color: #fff;
                           animation: bh-help-pulse 0.9s ease-in-out infinite;
                           box-shadow:
                             0 0 22px rgba(255,82,82,0.75),
                             0 10px 24px rgba(0,0,0,0.50),
                             inset 0 2px 0 rgba(255,255,255,0.55),
                             inset 0 -8px 14px rgba(0,0,0,0.30); }
@keyframes bh-help-pulse {
  0%, 100% { transform: scale(1.00); filter: brightness(1.00); }
  50%      { transform: scale(1.06); filter: brightness(1.18); }
}
/* Standalone .rescue-btn is now hidden by ui.js (display:none) since
   the dual harvest button covers SAVE. Rule kept so the legacy class
   doesn't break if any code re-shows it. */
.rescue-btn  { right: 252px; bottom:  52px; background-color: #ff9ec4; color: #2a0814; }
.taunt-btn   { right:  56px; bottom: 358px; background-color: #ff6b35; color: #1a0500;
               width: 86px; height: 86px; font-size: 13px;
               box-shadow:
                 0 0 22px rgba(255,107,53,0.55),
                 0 10px 24px rgba(0,0,0,0.50),
                 inset 0 2px 0 rgba(255,255,255,0.55),
                 inset 0 -8px 14px rgba(0,0,0,0.30); }
.skill-btn   { right:  56px; bottom: 458px; background-color: #c9a4ff; color: #1a0530;
               width: 86px; height: 86px; font-size: 13px;
               box-shadow:
                 0 0 22px rgba(201,164,255,0.65),
                 0 10px 24px rgba(0,0,0,0.50),
                 inset 0 2px 0 rgba(255,255,255,0.55),
                 inset 0 -8px 14px rgba(0,0,0,0.30); }
/* TAUNT stays parked (2026-08-17) — it lures the farmer to you, which reads
   as a trap to new players. The T key still works; delete this rule to bring
   the button back. SKILL came back once the three skills went free. */
#btn-taunt { display: none !important; }

/* ── COOLDOWN BUTTONS (SKILL / SPRINT / HIDE) ────────────────────────
   While a button is counting down it greys out and swaps its label for
   the whole seconds remaining (20, 19, 18 …). ui.js owns the `cooling`
   class and the number; input.js refuses the tap while it is set. The
   button deliberately keeps pointer-events so it still swallows the
   touch — otherwise a tap on a dead button would fall through to the
   field and spin the camera. */
.mobile-btn .mb-cd { display: none; }
.mobile-btn.cooling .mb-label { display: none; }
.mobile-btn.cooling .mb-cd {
  display: block;
  font-size: 26px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;   /* digits don't jitter as they change */
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.mobile-btn.cooling {
  filter: grayscale(0.9) brightness(0.55);
  cursor: not-allowed;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.45),
    inset 0 2px 0 rgba(255,255,255,0.18),
    inset 0 -6px 12px rgba(0,0,0,0.35);
}
/* Kill the press feedback so a blocked tap doesn't look like it worked. */
.mobile-btn.cooling.pressed,
.mobile-btn.cooling:active { transform: none; filter: grayscale(0.9) brightness(0.55); }

@media (max-width: 720px) {
  .mobile-btn { width: 78px; height: 78px; font-size: 12px; border-width: 3px; }
  /* radius 150, button radius 39 */
  .harvest-btn { right:  41px; bottom: 191px; }
  .sprint-btn  { right: 116px; bottom: 169px; }
  .hide-btn    { right: 169px; bottom: 116px; }
  .rescue-btn  { right: 191px; bottom:  41px; }
  /* Taunt sits in the very bottom-right corner of the screen */
  .taunt-btn   { right:  10px; bottom:  10px; width: 64px; height: 64px; font-size: 10px;
                 letter-spacing: 0.4px; }
  /* Skill stacks just above taunt in the corner */
  .skill-btn   { right:  10px; bottom:  82px; width: 64px; height: 64px; font-size: 10px;
                 letter-spacing: 0.4px; }
}

/* Admin "Reports" button (top-left, just right of Report). Only visible when
   localStorage profile has isAdmin: true. */
#admin-reports-btn {
  position: fixed; top: 14px; left: 96px;
  background: linear-gradient(135deg, #ffd166 0%, #ff6b35 100%);
  color: #1a0500;
  border: 1.5px solid #ffe19a;
  padding: 7px 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.4px;
  border-radius: 8px; cursor: pointer; pointer-events: auto;
  z-index: 21;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
#admin-reports-btn:hover { filter: brightness(1.12); }
#admin-reports-btn.hidden { display: none; }
@media (max-width: 720px) {
  #admin-reports-btn { left: 92px; padding: 6px 10px; font-size: 11px; }
}

/* Admin reports side panel — slides in from the right edge */
#admin-panel {
  position: fixed; top: 0; right: 0; height: 100vh;
  width: min(420px, 92vw);
  background: #14181f;
  border-left: 2px solid #ffd166;
  z-index: 36;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 24px rgba(0,0,0,0.5);
  pointer-events: auto;
}
#admin-panel.hidden { display: none; }
.admin-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,209,102,0.3);
  background: linear-gradient(90deg, rgba(255,209,102,0.10) 0%, rgba(255,107,53,0.06) 100%);
}
.admin-panel-head h2 { font-size: 16px; color: #ffd166; flex: 1; letter-spacing: 0.4px; }
.admin-panel-refresh, .admin-panel-close {
  background: transparent; border: 1px solid #4a5568;
  color: #ccc; border-radius: 6px;
  padding: 4px 10px; font-size: 14px; cursor: pointer;
}
.admin-panel-refresh:hover, .admin-panel-close:hover { border-color: #ffd166; color: #fff; }
.admin-panel-meta {
  font-size: 11px; color: #88909a; padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.admin-panel-list {
  flex: 1; overflow-y: auto;
  padding: 8px 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.admin-panel-empty {
  color: #88909a; text-align: center; padding: 30px 10px;
  font-style: italic;
}
.report-row {
  background: rgba(20,28,40,0.6);
  border: 1px solid #2c3340;
  border-left: 3px solid #4a5568;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  color: #c8d0dc;
}
.report-row .row-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.report-row .cat-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
  padding: 2px 8px; border-radius: 4px;
}
.report-row.cat-bug         .cat-tag { background: rgba(102,217,255,0.15); color: #66d9ff; border: 1px solid #66d9ff; }
.report-row.cat-suspicious  .cat-tag { background: rgba(255,184,77,0.15); color: #ffb84d; border: 1px solid #ffb84d; }
.report-row.cat-abuse       .cat-tag { background: rgba(255,82,82,0.15);  color: #ff5252; border: 1px solid #ff5252; }
.report-row.cat-cheating    .cat-tag { background: rgba(255,107,53,0.18); color: #ff6b35; border: 1px solid #ff6b35; }
.report-row.cat-other       .cat-tag { background: rgba(201,164,255,0.15);color: #c9a4ff; border: 1px solid #c9a4ff; }
.report-row .ts {
  font-size: 10px; color: #88909a; margin-left: auto;
}
.report-row .reporter {
  font-weight: 700; color: #fff; font-size: 12px;
}
.report-row .target {
  font-size: 11px; color: #ffb0b0;
  margin-top: 2px;
}
.report-row .desc {
  margin-top: 6px;
  white-space: pre-wrap;
  background: rgba(0,0,0,0.25);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 11.5px; line-height: 1.5;
  color: #e0e6ee;
}
.report-row .meta-line {
  margin-top: 4px;
  font-size: 10px; color: #667;
}

/* Report button — top-right corner, available to everyone (including guests,
   even pre-login). Glassy red pill matches the rest of the lobby aesthetic. */
#report-btn {
  position: fixed; top: 14px; right: 14px;
  background: linear-gradient(180deg, rgba(255,82,82,0.20) 0%, rgba(199,58,74,0.30) 100%);
  color: #ffb0b0;
  border: 1.5px solid rgba(255,116,116,0.85);
  padding: 7px 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.4px;
  border-radius: 999px; cursor: pointer; pointer-events: auto;
  z-index: 21;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.15);
  transition: transform 0.08s, box-shadow 0.15s, background 0.15s;
}
#report-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,82,82,0.35) 0%, rgba(199,58,74,0.45) 100%);
  color: #fff;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.50),
    0 0 18px rgba(255,82,82,0.30),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Report modal */
#report-modal {
  position: fixed; inset: 0; background: rgba(8,12,18,0.92);
  display: flex; align-items: center; justify-content: center; z-index: 35;
  pointer-events: auto;
}
#report-modal.hidden { display: none; }
.report-card {
  width: min(540px, 96vw);
  background: #1a1f28; border: 1.5px solid #ff7474; border-radius: 14px;
  padding: 22px 24px;
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 92vh; overflow-y: auto;
}
.report-card h2 { font-size: 22px; color: #ff9b9b; }
.report-close {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: none; color: #99a3b0;
  font-size: 26px; line-height: 1; cursor: pointer; pointer-events: auto;
}
.report-close:hover { color: #fff; }
.report-blurb { font-size: 13px; color: #b8c0cc; line-height: 1.5; }
.report-label {
  font-size: 12px; font-weight: 700; color: #ffd166;
  letter-spacing: 0.4px; margin-top: 6px;
}
.report-optional { color: #99a3b0; font-weight: 500; font-style: italic; }
.report-input {
  background: #0e1218; color: #fff;
  border: 1.5px solid #4a5568; border-radius: 8px;
  padding: 9px 12px; font-size: 13px; font-family: inherit;
  width: 100%; box-sizing: border-box;
  pointer-events: auto;
  resize: vertical;
}
.report-input:focus { outline: none; border-color: #66d9ff; box-shadow: 0 0 0 3px rgba(102,217,255,0.2); }
.report-meta {
  font-size: 11px; color: #88909a;
  background: rgba(255,255,255,0.03);
  border-radius: 6px; padding: 6px 10px;
  line-height: 1.4;
}
.report-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px;
}
.report-btn-cancel {
  background: transparent; color: #99a3b0;
  border: 1.5px solid #4a5568;
  padding: 9px 16px; font-size: 13px; font-weight: 700;
  border-radius: 8px; cursor: pointer; pointer-events: auto;
}
.report-btn-cancel:hover { color: #fff; border-color: #fff; }
.report-btn-submit {
  background: #ff5252; color: #fff;
  border: 1.5px solid #ff7474;
  padding: 9px 18px; font-size: 13px; font-weight: 800;
  border-radius: 8px; cursor: pointer; pointer-events: auto;
  letter-spacing: 0.4px;
}
.report-btn-submit:hover { background: #ff7474; }
.report-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.report-status {
  background: rgba(109,215,109,0.1);
  border: 1px solid #6dd76d;
  color: #c4f0c4;
  border-radius: 6px; padding: 8px 12px;
  font-size: 13px;
}
.report-status.hidden { display: none; }
.report-status.error {
  background: rgba(255,82,82,0.1);
  border-color: #ff5252;
  color: #ff9b9b;
}

@media (max-width: 720px) {
  #report-btn { padding: 6px 10px; font-size: 11px; }
}

/* HELP button — centered at bottom-middle of the screen, only when bunny is TRAPPED. */
.help-btn {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  background: #ff5252; color: #fff;
  border: 3px solid #ffb0b0;
  padding: 14px 24px; font-size: 16px; font-weight: 900; letter-spacing: 1.5px;
  border-radius: 12px; cursor: pointer; pointer-events: auto;
  box-shadow: 0 0 24px rgba(255,82,82,0.7), 0 6px 18px rgba(0,0,0,0.6);
  animation: helpPulse 1s infinite alternate;
  z-index: 8;
  -webkit-tap-highlight-color: transparent;
}
.help-btn:active, .help-btn.pressed { transform: translateX(-50%) scale(0.95); }
.help-btn.hidden { display: none; }
@keyframes helpPulse {
  from { box-shadow: 0 0 12px rgba(255,82,82,0.5), 0 6px 18px rgba(0,0,0,0.6); }
  to   { box-shadow: 0 0 32px rgba(255,82,82,0.95), 0 6px 18px rgba(0,0,0,0.6); }
}
@media (max-width: 720px) {
  .help-btn { padding: 12px 20px; font-size: 14px; bottom: 24px; }
}

/* Hide mobile-only action buttons + joystick on hover-capable devices (desktops with a mouse).
   Keep #fs-btn visible — fullscreen is useful on web too. */
@media (hover: hover) and (pointer: fine) {
  .mobile-btn, #joystick { display: none !important; }
}

/* Spectator bar — visible only when local player is DEAD mid-match */
#spectator-bar {
  position: fixed; left: 50%; top: 78px;
  transform: translateX(-50%);
  background: rgba(15,18,24,0.92);
  border: 2px solid #ff5252;
  border-radius: 14px;
  padding: 10px 16px;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center;
  z-index: 6;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7);
  font-family: system-ui, -apple-system, sans-serif;
  color: #fff;
  pointer-events: auto;
  max-width: 92vw;
}
#spectator-bar.hidden { display: none; }
#spectator-bar .spec-text {
  font-size: 14px; font-weight: 600; letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 8px;
}
#spectator-bar .spec-skull { font-size: 18px; }
#spectator-bar .spec-buttons {
  display: flex; gap: 8px;
}
#spectator-bar button {
  background: #2a3140;
  color: #fff;
  border: 1px solid #4a5568;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
#spectator-bar button:hover { background: #3a4458; }
#spectator-bar #spec-leave { background: #5a1f1f; border-color: #8b3030; }
#spectator-bar #spec-leave:hover { background: #7a2828; }

#joystick {
  position: fixed; left: 28px; bottom: 32px;
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.5);
  background: rgba(20, 24, 32, 0.45);
  pointer-events: auto;
  display: none;
  touch-action: none;
  z-index: 5;
}
#joystick-stick {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255, 209, 102, 0.85);
  border: 3px solid rgba(255,255,255,0.85);
  pointer-events: none;
}
@media (pointer: coarse), (max-width: 900px) {
  #joystick {
    display: block;
    left: calc(10px + env(safe-area-inset-left));
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 112px;
    height: 112px;
  }
  #joystick-stick { width: 48px; height: 48px; }

  /* Two compact rows stay clear of the left joystick on 320–430px phones,
     including landscape phones whose width is greater than 720px. */
  .mobile-btn {
    width: 58px;
    height: 58px;
    border-width: 2px;
    font-size: 10px;
  }
  .harvest-btn {
    right: calc(10px + env(safe-area-inset-right));
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .sprint-btn {
    right: calc(74px + env(safe-area-inset-right));
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .hide-btn {
    right: calc(138px + env(safe-area-inset-right));
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .taunt-btn {
    right: calc(10px + env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: 58px;
    height: 58px;
    font-size: 9px;
  }
  .skill-btn {
    right: calc(74px + env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: 58px;
    height: 58px;
    font-size: 9px;
  }
  #status { display: none; }
  #bh-rescue-prompt {
    bottom: calc(170px + env(safe-area-inset-bottom));
    max-width: 80vw;
    font-size: 11px;
  }
  #back-home {
    top: calc(10px + env(safe-area-inset-top)) !important;
    left: calc(10px + env(safe-area-inset-left)) !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

#lobby {
  position: fixed; inset: 0; background: rgba(8,12,18,0.92);
  display: flex; align-items: center; justify-content: center; z-index: 20;
}
#lobby.hidden { display: none; }
#lobby-card {
  position: relative;
  /* Reserve 104px each side for the fixed side-tool columns (.lst-col:
     20px inset + 76px tile + gap) — at 96vw the card slid underneath them
     on phone-landscape and mid-width windows and the lobby looked jumbled.
     ≤560px overrides this back to 96vw (tools move to a bottom row there). */
  width: min(1200px, calc(100vw - 208px)); padding: 28px 28px 24px;
  background: #1a1f28; border: 1px solid #2c3340; border-radius: 14px;
  text-align: left;             /* was center — broke arena alignment */
  max-height: 96vh; overflow-y: auto;
  /* The default scrollbar paints a bright white track down the card edge. */
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.22) transparent;
}
#lobby-card::-webkit-scrollbar { width: 6px; }
#lobby-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 3px; }
#lobby-card::-webkit-scrollbar-track { background: transparent; }
/* Keep header/title areas centered the way they used to be — only
   the lobby-shell + arena (which use grid/flex internally) need left
   alignment. */
#lobby-card > h1,
#lobby-card > #connect-status,
#lobby-card > .signin-cta,
#lobby-card > .lobby-name-row{ text-align: center; }
#back-home {
  position: absolute; top: 14px; left: 16px;
  font-size: 12px; color: #99a; padding: 6px 10px; border-radius: 6px;
  border: 1px solid transparent; transition: all 0.15s;
  text-decoration: none; pointer-events: auto;
}
#back-home:hover { color: #66d9ff; border-color: #66d9ff; background: rgba(102,217,255,0.06); }
#lobby-card h1 { font-size: 30px; color: #ffd166; margin-bottom: 14px; }
#connect-status { font-size: 14px; color: #99a; margin-bottom: 16px; }
#connect-status.ok { color: #6dd76d; }
#connect-status.err { color: #ff6262; }

#tier-banner {
  font-size: 13px; font-weight: 700; letter-spacing: 0.6px;
  padding: 6px 12px; border-radius: 6px; margin-bottom: 10px;
  text-align: center;
}
#tier-banner.hidden { display: none; }
#tier-banner.main { background: rgba(20,52,28,0.7); color: #c4f0c4; border: 1px solid #6dd76d; }
#tier-banner.sub  { background: rgba(58,28,12,0.85); color: #ffd2bd; border: 1px solid #ff6b35; }

/* === Two-column lobby layout: LEFT sub | CENTER main === */
.section-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
  text-align: left;
}
.section-head h3 {
  font-size: 16px; font-weight: 800; letter-spacing: 0.6px;
  flex: 1;
}
.section-icon { font-size: 18px; }
.section-count {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px; font-weight: 700; color: #b8c0cc;
}
.section-blurb {
  font-size: 11.5px; color: #99a3b0; line-height: 1.45;
  text-align: left; margin-bottom: 12px;
}

#sub-match-clock {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,184,77,0.10);
  border: 1px solid rgba(255,184,77,0.45);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12.5px;
  color: #ffd9a8;
}
#sub-match-clock.hidden { display: none; }
#sub-match-clock .clock-icon { font-size: 14px; }
#sub-match-clock .clock-label { letter-spacing: 0.4px; color: #c8b692; }
#sub-match-clock .clock-time {
  margin-left: auto;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffb84d;
  font-variant-numeric: tabular-nums;
}

/* Sub Lobby (left column) */
#sub-section {
  background: rgba(40,28,16,0.45);
  border: 1.5px solid rgba(255,107,53,0.40);
  border-radius: 12px;
  padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
  min-width: 0;
}
#sub-section .section-head h3 { color: #ffc6a8; }
#sub-section.you-here {
  border-color: #ff6b35;
  box-shadow: 0 0 0 1px rgba(255,107,53,0.35), 0 4px 18px rgba(255,107,53,0.2);
}
#sub-queue-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; max-height: 180px; overflow-y: auto;
}
#sub-queue-list li {
  background: rgba(0,0,0,0.35);
  padding: 6px 10px; border-radius: 6px;
  border-left: 3px solid #4a5568;
  display: flex; align-items: center; gap: 8px;
  color: #c8cfd8;
}
#sub-queue-list li.queued { border-left-color: #ffb84d; color: #ffd9a8; }
#sub-queue-list li.you { border-left-color: #ff6b35; color: #ffd2bd; font-weight: 700; }
#sub-queue-list li .pos {
  font-weight: 700; color: #ffb84d; min-width: 22px;
}
#sub-queue-list li.queue-empty {
  color: #667; font-style: italic; border-left-color: transparent;
  background: rgba(0,0,0,0.2);
}

#sub-self-card {
  background: rgba(255,107,53,0.07);
  border: 1px solid rgba(255,107,53,0.35);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
#sub-self-card.hidden { display: none; }
.sub-status {
  font-size: 13px; font-weight: 700; color: #ffd2bd;
}
.sub-status.queued { color: #6dd76d; }
.sub-action-row { display: flex; gap: 8px; flex-wrap: wrap; }
.queue-btn, .unqueue-btn {
  flex: 1; min-width: 100px;
  padding: 9px 12px; font-size: 13px; font-weight: 800; letter-spacing: 1px;
  border-radius: 8px; cursor: pointer; border: 2px solid transparent;
  pointer-events: auto;
}
.queue-btn   { background: #ff6b35; color: #1a0500; border-color: #ff8b55; }
.queue-btn:hover { background: #ff8055; }
.queue-btn.queued, .queue-btn:disabled { background: #6dd76d; color: #0d2a0d; border-color: #8ae08a; cursor: default; }
.unqueue-btn { background: rgba(70,40,40,0.85); color: #ffb0b0; border-color: #663333; }
.unqueue-btn:hover { background: rgba(110,55,55,0.95); }
.unqueue-btn.hidden { display: none; }
.sub-foot { font-size: 11px; color: #99a3b0; line-height: 1.4; }

#sub-spectate-cta {
  background: rgba(18,42,60,0.7);
  border: 1.5px solid rgba(102,217,255,0.55);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
#sub-spectate-cta.hidden { display: none; }
#sub-spectate-cta .cta-text {
  font-size: 12px; color: #b9ecff;
  display: flex; gap: 6px; align-items: flex-start;
  line-height: 1.4;
}
#sub-spectate-cta .cta-icon { font-size: 16px; flex-shrink: 0; }
.watch-live-btn {
  background: #66d9ff; color: #0d2230;
  border: 2px solid #88e6ff;
  padding: 10px 14px;
  font-size: 13px; font-weight: 800; letter-spacing: 1.2px;
  border-radius: 8px; cursor: pointer; pointer-events: auto;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.watch-live-btn:hover { background: #88e6ff; }

/* Main Lobby (center column) */
#main-section {
  background: rgba(20,28,40,0.55);
  border: 1.5px solid rgba(102,217,255,0.30);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
#main-section .section-head h3 { color: #b9ecff; }
#main-section.you-here {
  border-color: #66d9ff;
  box-shadow: 0 0 0 1px rgba(102,217,255,0.35), 0 4px 18px rgba(102,217,255,0.2);
}
#main-section.locked {
  border-color: #ffb84d;
  box-shadow: 0 0 0 1px rgba(255,184,77,0.4);
}
/* Compact main-lobby player list — mirrors the survivor-queue look */
.lobby-player-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px;
}
.lobby-player-row {
  background: rgba(0,0,0,0.35);
  padding: 7px 10px; border-radius: 6px;
  border-left: 3px solid #4a5568;
  display: flex; align-items: center; gap: 10px;
  color: #c8cfd8;
  transition: border-color 0.15s, background 0.15s;
}
.lobby-player-row .role-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px;
  background: rgba(255,255,255,0.08);
  padding: 2px 8px; border-radius: 4px;
  color: #ccd0d8;
  flex-shrink: 0;
}
.lobby-player-row .nm { font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-player-row .ready-tag,
.lobby-player-row .empty-tag,
.lobby-player-row .waiting-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  flex-shrink: 0;
}
.lobby-player-row .ready-tag    { color: #6dd76d; }
.lobby-player-row .waiting-tag  { color: #99a3b0; }
.lobby-player-row .empty-tag    { color: #88909a; font-style: italic; }
.lobby-player-row.empty {
  opacity: 0.6;
  border-left-color: transparent;
  background: rgba(0,0,0,0.18);
}
.lobby-player-row.empty .role-tag { background: rgba(255,255,255,0.04); color: #88909a; }
.lobby-player-row.taken { border-left-color: #66d9ff; color: #d8e8f4; }
.lobby-player-row.taken.ready { border-left-color: #6dd76d; color: #c4f0c4; }
.lobby-player-row.you {
  background: rgba(102,217,255,0.10);
  border-left-color: #ffd166;
}
.lobby-player-row.you .role-tag { background: rgba(255,209,102,0.20); color: #ffd166; }
.lobby-player-row.farmer {
  border-left-color: #ff5252;
  background: rgba(255,82,82,0.07);
  color: #ffb0b0;
}
.lobby-player-row.farmer .role-tag {
  background: rgba(255,82,82,0.20); color: #ffb0b0;
}

/* Slim countdown clock — same visual language as #sub-match-clock */
.lobby-clock {
  display: flex; align-items: center; gap: 8px;
  background: rgba(102,217,255,0.10);
  border: 1px solid rgba(102,217,255,0.45);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #b9ecff;
  position: relative;
  flex-wrap: wrap;
}
.lobby-clock.hidden { display: none; }
.lobby-clock .clock-icon { font-size: 14px; }
.lobby-clock .clock-label { letter-spacing: 0.4px; color: #88a8b8; }
.lobby-clock .clock-time {
  margin-left: auto;
  font-weight: 800; letter-spacing: 1px;
  color: #66d9ff;
  font-variant-numeric: tabular-nums;
}
.lobby-clock .countdown-bar {
  flex-basis: 100%;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.lobby-clock .countdown-bar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #66d9ff 0%, #6dd76d 100%);
  transition: width 0.3s linear, background 0.2s;
}
#countdown-wrap.warn  { border-color: #ffb84d; color: #ffd9a8; background: rgba(255,184,77,0.10); }
#countdown-wrap.warn  .clock-time { color: #ffb84d; }
#countdown-wrap.warn  .countdown-bar-fill { background: linear-gradient(90deg, #ffb84d, #ff8b3a); }
#countdown-wrap.crit  { border-color: #ff5252; color: #ffb0b0; background: rgba(255,82,82,0.10); }
#countdown-wrap.crit  .clock-time { color: #ff5252; animation: pulse 0.6s infinite; }
#countdown-wrap.crit  .countdown-bar-fill { background: #ff5252; }

/* Slimmer role-picker row */
.role-picker-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 2px;
}
.role-picker-row .role-picker-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
  color: #99a3b0; text-transform: uppercase;
}
.role-picker-row .lobby-roles { margin-bottom: 0; gap: 4px; flex: 1; justify-content: flex-start; }

/* Sub-lobby live spectator bar (during match) */
#sub-spectator-bar {
  position: fixed; left: 50%; top: 64px;
  transform: translateX(-50%);
  background: rgba(15,18,24,0.92);
  border: 2px solid #ff6b35;
  border-radius: 14px;
  padding: 10px 16px;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center;
  z-index: 6;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7);
  font-family: system-ui, -apple-system, sans-serif;
  color: #fff;
  pointer-events: auto;
  max-width: 92vw;
}
#sub-spectator-bar.hidden { display: none; }
#sub-spectator-bar .spec-text {
  font-size: 14px; font-weight: 600; letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: center;
}
#sub-spectator-bar .spec-eye { font-size: 18px; }
#sub-spectator-bar .spec-queue {
  background: rgba(255,107,53,0.2);
  border: 1px solid rgba(255,107,53,0.55);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  color: #ffc6a8;
}
#sub-spectator-bar .spec-buttons { display: flex; gap: 8px; }
#sub-spectator-bar button {
  background: #2a3140; color: #fff;
  border: 1px solid #4a5568; border-radius: 8px;
  padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
}
#sub-spectator-bar button:hover { background: #3a4458; }
#sub-spectator-bar #sub-spec-leave { background: #5a1f1f; border-color: #8b3030; }
#sub-spectator-bar #sub-spec-leave:hover { background: #7a2828; }
#login-card {
  background: rgba(20,28,40,0.65);
  border: 1.5px solid rgba(102,217,255,0.30);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 12px;
}
#login-card.hidden { display: none; }

.account-chip {
  display: flex; align-items: center; gap: 10px;
  background: rgba(20,28,40,0.7);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  width: fit-content;
  margin-left: auto; margin-right: auto;
}
.account-chip.hidden { display: none; }
.account-chip .account-icon { font-size: 16px; }
.account-chip b { color: #66d9ff; }
.admin-tag {
  display: inline-block;
  background: linear-gradient(135deg, #ffd166 0%, #ff6b35 100%);
  color: #1a0500;
  font-size: 9px; font-weight: 900; letter-spacing: 1.2px;
  border-radius: 999px; padding: 1px 7px;
  margin-left: 5px;
  vertical-align: middle;
}
.account-chip .account-credits {
  background: rgba(255,209,102,0.12);
  border: 1px solid rgba(255,209,102,0.4);
  border-radius: 999px;
  padding: 2px 9px;
  color: #ffd166;
  font-weight: 700; font-size: 12px;
}
.profile-btn {
  background: #ffd166; color: #1a1004;
  border: 1.5px solid #ffe19a; border-radius: 6px;
  padding: 4px 10px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.4px; cursor: pointer; pointer-events: auto;
}
.profile-btn:hover { background: #ffe19a; }

.signout-btn {
  background: transparent; color: #99a3b0;
  border: 1px solid #4a5568; border-radius: 6px;
  padding: 4px 10px; font-size: 11px; font-weight: 700;
  cursor: pointer; pointer-events: auto;
}
.signout-btn:hover { color: #fff; border-color: #ff9b9b; background: rgba(255,82,82,0.1); }
.login-row {
  display: flex; gap: 8px; justify-content: stretch; align-items: stretch;
}
#my-email, #my-name {
  flex: 1; min-width: 0;
  padding: 11px 14px; border-radius: 8px; border: 1.5px solid #4a5568;
  background: #0e1218; color: #fff; font-size: 14px; font-weight: 600;
  letter-spacing: 0.3px;
  pointer-events: auto;
}
#my-email { font-weight: 500; }
#my-email:focus, #my-name:focus {
  outline: none; border-color: #66d9ff;
  box-shadow: 0 0 0 3px rgba(102,217,255,0.2);
}
.name-submit-btn {
  background: #ffd166; color: #1a1004;
  border: 2px solid #ffe19a;
  padding: 0 18px; font-size: 13px; font-weight: 800; letter-spacing: 1px;
  border-radius: 8px; cursor: pointer; pointer-events: auto;
  white-space: nowrap;
  flex-shrink: 0;
}
.name-submit-btn:hover:not(:disabled) { background: #ffe19a; }
.name-submit-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.name-submit-btn.hidden { display: none; }
.login-greeting {
  font-size: 12px; color: #b9ecff;
  background: rgba(102,217,255,0.08);
  border: 1px solid rgba(102,217,255,0.35);
  border-radius: 6px;
  padding: 6px 10px;
  text-align: center;
}
.login-greeting.hidden { display: none; }
.login-greeting b { color: #ffd166; }
.login-greeting .cancel-auto {
  margin-left: 6px; color: #ff9ec4; text-decoration: underline;
}
.login-greeting .cancel-auto:hover { color: #fff; }

.login-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: #88909a; letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 2px 0;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,0.10);
}

.guest-btn {
  background: transparent; color: #b8c0cc;
  border: 1.5px solid #4a5568;
  padding: 10px 14px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 8px; cursor: pointer; pointer-events: auto;
  transition: all 0.15s;
}
.guest-btn:hover {
  color: #fff; border-color: #66d9ff;
  background: rgba(102,217,255,0.08);
}

/* (Demo account button removed — admin entitlement now flows from the email
    allow-list at login time. Sign in with reinerpui@gmail.com for admin.) */

#my-password {
  flex: 1; min-width: 0;
  padding: 11px 14px; border-radius: 8px; border: 1.5px solid #4a5568;
  background: #0e1218; color: #fff; font-size: 14px; font-weight: 500;
  letter-spacing: 0.3px;
  pointer-events: auto;
}
#my-password:focus { outline: none; border-color: #66d9ff; box-shadow: 0 0 0 3px rgba(102,217,255,0.2); }

.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; color: #2c3340;
  border: 1.5px solid #d0d6e0;
  padding: 9px 14px; font-size: 13px; font-weight: 700;
  border-radius: 8px; cursor: pointer; pointer-events: auto;
}
.oauth-btn:hover { background: #f0f4f9; }
/* The legacy oauth/guest buttons ship with the `hidden` attribute, but
   `display:flex` above out-specifies the UA's [hidden] rule — the oauth
   button rendered as a stray white bar across the lobby card. */
.oauth-btn.hidden, .oauth-btn[hidden],
.guest-btn.hidden, .guest-btn[hidden] { display: none !important; }
.oauth-btn .g-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #4285F4 0%, #EA4335 50%, #FBBC04 75%, #34A853 100%);
  color: #fff; font-weight: 900; font-size: 14px;
}
.login-error {
  background: rgba(255,82,82,0.1);
  border: 1px solid #ff5252; color: #ff9b9b;
  border-radius: 6px; padding: 6px 10px;
  font-size: 12px; text-align: center;
}
.login-error.hidden { display: none; }

/* Primary "Sign in on Mini Games" CTA — replaces the old email/password login. */
.signin-cta {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(124,58,237,0.18) 0%, rgba(255,209,102,0.10) 100%);
  border: 1.5px solid rgba(124,58,237,0.55);
  border-radius: 10px;
  padding: 12px 14px; text-decoration: none; color: #fff;
  pointer-events: auto;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.signin-cta:hover {
  border-color: #a78bfa;
  background: linear-gradient(135deg, rgba(124,58,237,0.30) 0%, rgba(255,209,102,0.18) 100%);
  transform: translateY(-1px);
}
.signin-cta-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.signin-cta-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.signin-cta-text b { font-size: 14px; color: #fff; letter-spacing: 0.2px; }
.signin-cta-sub { font-size: 11px; color: #b9b3d6; line-height: 1.4; }
.signin-cta-arrow {
  font-size: 18px; color: #ffd166; font-weight: 900; flex-shrink: 0;
  transition: transform 0.12s ease;
}
.signin-cta:hover .signin-cta-arrow { transform: translateX(3px); }

/* === Secret Panel (welcome + perks summary) ===
   Sits above the marketplace. Cosmetic-only "you found it" reward block
   with credits readout + perk badges. Visually warmer than the Marketplace
   so the eye distinguishes the two cards at a glance. */
.lobby-secret-panel {
  background: linear-gradient(135deg, rgba(255,209,102,0.10) 0%, rgba(255,107,53,0.08) 100%);
  border: 1.5px solid rgba(255,209,102,0.45);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 18px 0 10px;
  text-align: left;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 0 24px rgba(255,184,77,0.10);
}
.lobby-secret-panel.hidden { display: none; }
.lsp-head {
  display: flex; align-items: center; gap: 12px;
}
.lsp-head h2 {
  font-size: 18px; color: #ffd166; flex: 1; letter-spacing: 0.4px;
  margin: 0;
}
.lsp-credits {
  background: rgba(255,209,102,0.18);
  border: 1px solid rgba(255,209,102,0.55);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px; font-weight: 700; color: #ffd166;
}
.lsp-blurb {
  font-size: 12.5px; line-height: 1.55; color: #d8c896;
  margin: 0;
}
.lsp-perks {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.lsp-perks:empty { display: none; }
.lsp-perk {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.4px;
  background: rgba(255,209,102,0.15);
  border: 1px solid rgba(255,209,102,0.50);
  color: #ffd166;
  border-radius: 999px;
}
.lsp-perk.lsp-perk-admin {
  background: #ffd166; color: #1a1004; border-color: #ffe19a;
}
.lsp-perk.lsp-perk-lifetime {
  background: rgba(255,107,53,0.20); border-color: #ff8a3a; color: #ffb273;
}
.lsp-perk.lsp-perk-priority {
  background: rgba(102,217,255,0.15); border-color: rgba(102,217,255,0.55); color: #66d9ff;
}
.lsp-perk.lsp-perk-sub {
  background: rgba(124,58,237,0.20); border-color: rgba(124,58,237,0.55); color: #c8b6ff;
}
.lsp-perk.lsp-perk-guest {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: #99a;
}

/* === Inline Marketplace (in the lobby card) === */
.lobby-shop {
  background: linear-gradient(180deg, rgba(20,28,40,0.55) 0%, rgba(15,18,24,0.85) 100%);
  border: 1.5px solid rgba(255,209,102,0.30);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 18px 0 12px;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
  scroll-margin-top: 16px;
}
.lobby-shop.hidden { display: none; }
.lobby-shop-head {
  display: flex; align-items: center; gap: 12px;
}
.lobby-shop-head h2 {
  font-size: 18px; color: #ffd166; flex: 1; letter-spacing: 0.4px;
}
.lobby-shop-credits {
  background: rgba(255,209,102,0.12);
  border: 1px solid rgba(255,209,102,0.45);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px; font-weight: 700; color: #ffd166;
}
.guest-shop-cta {
  background: linear-gradient(90deg, rgba(255,209,102,0.15) 0%, rgba(255,107,53,0.18) 100%);
  border: 1.5px solid #ffb84d;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  box-shadow: 0 0 16px rgba(255,184,77,0.18);
}
.guest-shop-cta.hidden { display: none; }
.guest-shop-cta .guest-cta-text {
  flex: 1; min-width: 200px;
  font-size: 13px; color: #ffeac8; line-height: 1.45;
  display: flex; align-items: center; gap: 8px;
}
.guest-shop-cta .guest-cta-text b { color: #ffd166; }
.guest-shop-cta .guest-cta-emoji { font-size: 18px; flex-shrink: 0; }
.guest-cta-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.guest-cta-btn {
  background: #ffd166; color: #1a1004;
  border: 2px solid #ffe19a;
  padding: 9px 16px; font-size: 13px; font-weight: 800; letter-spacing: 0.6px;
  border-radius: 8px; cursor: pointer; pointer-events: auto;
  white-space: nowrap;
}
.guest-cta-btn:hover { background: #ffe19a; }
.guest-cta-btn-ghost {
  background: transparent; color: #ffeac8;
  border: 1.5px solid rgba(255, 209, 102, 0.55);
  font-weight: 700; letter-spacing: 0.3px;
}
.guest-cta-btn-ghost:hover {
  background: rgba(255, 209, 102, 0.12);
  border-color: #ffd166;
  color: #ffd166;
}

/* ─── Help-cry proximity flash ─────────────────────────────────────────────
   help-indicator.js owns its own #help-vignette div (created on first call)
   and toggles its opacity directly — no external CSS needed. The previous
   .help-indicator chevron arrow rules have been removed; the new mechanic
   is a yellow edge-vignette flash that fires periodically while the local
   player is within ~14yd of any trapped teammate. */

.lobby-shop-tabline {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lobby-shop .shop-tabs { border-bottom: none; }
.lobby-shop .shop-tab {
  font-size: 12px; padding: 8px 11px;
}
.lobby-shop .shop-grid {
  max-height: 440px; overflow-y: auto;
  padding-right: 4px;
}
@media (max-width: 760px) {
  .lobby-shop .shop-tab { font-size: 11px; padding: 7px 9px; letter-spacing: 0.2px; }
  .lobby-shop-head h2 { font-size: 16px; }
  .lobby-shop .shop-grid { max-height: 380px; }
}

/* === Marketplace === */
#open-shop-btn {
  position: fixed; top: 14px; right: 60px;
  background: #ffd166; color: #1a1004;
  border: 2px solid #ffe19a;
  padding: 8px 14px; font-size: 13px; font-weight: 800; letter-spacing: 0.6px;
  border-radius: 8px; cursor: pointer; pointer-events: auto;
  z-index: 21;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
#open-shop-btn:hover { background: #ffe19a; }
#open-shop-btn.hidden { display: none; }

/* Top-right Log on / Log off toggle */
#auth-toggle-btn {
  position: fixed; top: 14px; right: 200px;
  background: #66d9ff; color: #0d2230;
  border: 2px solid #88e6ff;
  padding: 8px 14px; font-size: 13px; font-weight: 800; letter-spacing: 0.6px;
  border-radius: 8px; cursor: pointer; pointer-events: auto;
  z-index: 21;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
#auth-toggle-btn:hover { background: #88e6ff; }
#auth-toggle-btn.logout {
  background: rgba(255,82,82,0.18);
  border-color: #ff7474;
  color: #ffb0b0;
}
#auth-toggle-btn.logout:hover {
  background: rgba(255,82,82,0.30);
  color: #fff;
}
#auth-toggle-btn.hidden { display: none; }
@media (max-width: 720px) {
  #auth-toggle-btn { top: 14px; right: 14px; padding: 7px 11px; font-size: 12px; }
  #open-shop-btn   { top: 56px; right: 14px; }
}

#shop-modal {
  position: fixed; inset: 0; background: rgba(8,12,18,0.92);
  display: flex; align-items: center; justify-content: center; z-index: 30;
  pointer-events: auto;
}
#shop-modal.hidden { display: none; }
.shop-card {
  width: min(820px, 96vw); max-height: 92vh; overflow-y: auto;
  background: #1a1f28; border: 1px solid #2c3340; border-radius: 14px;
  padding: 22px 24px;
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
}
.shop-head {
  display: flex; align-items: center; gap: 14px;
}
.shop-head h2 { font-size: 22px; color: #ffd166; flex: 1; }
.shop-credits {
  background: rgba(255,209,102,0.12);
  border: 1px solid rgba(255,209,102,0.45);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px; font-weight: 700; color: #ffd166;
}
.shop-close {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: none; color: #99a3b0;
  font-size: 26px; line-height: 1; cursor: pointer; pointer-events: auto;
}
.shop-close:hover { color: #fff; }

.shop-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid #2c3340;
  flex-wrap: wrap;
}
.shop-tab {
  background: transparent; border: none;
  color: #99a3b0; font-size: 13px; font-weight: 700;
  padding: 10px 14px; cursor: pointer; pointer-events: auto;
  border-bottom: 2px solid transparent;
  letter-spacing: 0.3px;
}
.shop-tab:hover { color: #fff; }
.shop-tab.active { color: #ffd166; border-bottom-color: #ffd166; }

.shop-fairness {
  background: rgba(102,217,255,0.07);
  border: 1px solid rgba(102,217,255,0.3);
  border-radius: 6px; padding: 6px 10px;
  font-size: 11.5px; color: #99c4d4;
  line-height: 1.4;
}

.shop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.shop-item {
  background: rgba(20,28,40,0.6);
  border: 1.5px solid #2c3340; border-radius: 10px;
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
  text-align: center;
}
.shop-item.owned { border-color: #6dd76d; }
.shop-item.equipped { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255,209,102,0.3); }
.shop-item .swatch {
  width: 100%; height: 80px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 38px;
}
.shop-item .name { font-size: 14px; font-weight: 800; color: #fff; }
.shop-item .desc { font-size: 11.5px; color: #99a3b0; line-height: 1.4; min-height: 2.8em; }
.shop-item .price-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto;
}
.shop-item .price { font-size: 12px; font-weight: 700; color: #ffd166; }
.shop-item button {
  background: #ffd166; color: #1a1004;
  border: 1.5px solid #ffe19a; border-radius: 6px;
  padding: 6px 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.5px;
  cursor: pointer; pointer-events: auto;
}
.shop-item button:hover:not(:disabled) { background: #ffe19a; }
.shop-item button:disabled { opacity: 0.5; cursor: not-allowed; }
.shop-item button.equip { background: #66d9ff; border-color: #88e6ff; color: #0d2230; }
.shop-item button.equip:hover { background: #88e6ff; }
.shop-item button.equipped-tag { background: #6dd76d; border-color: #8ae08a; color: #0d2a0d; cursor: default; }
.shop-item .priority-uses {
  font-size: 11px; color: #ffb84d; font-weight: 700; margin-top: 4px;
}
.shop-item .per-month {
  font-size: 10px; font-weight: 600; color: #99a3b0; margin-left: 2px;
}
.shop-item .sub-expiry {
  background: rgba(109,215,109,0.12);
  border: 1px solid rgba(109,215,109,0.4);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px; font-weight: 700; color: #a8e8a8;
  align-self: center;
}
.shop-item.bundle {
  border-color: #66d9ff;
  box-shadow: 0 0 0 1px rgba(102,217,255,0.2);
}
.shop-item.bundle.lifetime {
  border-color: #ffd166;
  box-shadow: 0 0 0 1px rgba(255,209,102,0.3), 0 0 18px rgba(255,209,102,0.15);
}
.shop-item .bundle-includes {
  font-size: 11px; color: #c8d0dc; font-weight: 700;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 4px 8px;
  line-height: 1.5;
}
.shop-item .bundle-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
  color: #ffd166; text-align: center;
}
.shop-item.bundle.lifetime .bundle-tag { color: #ffe19a; }

.loadout-card {
  background: rgba(20,28,40,0.5);
  border: 1px solid #2c3340;
  border-radius: 10px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.loadout-row {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  font-size: 13px;
}
.loadout-label { color: #99a3b0; font-weight: 700; flex-shrink: 0; }
.loadout-value { display: flex; align-items: center; gap: 8px; }
.loadout-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0; }
.loadout-info {
  font-size: 11.5px; color: #b8c0cc;
  background: rgba(102,217,255,0.06);
  border-left: 3px solid #66d9ff;
  padding: 6px 10px; line-height: 1.4;
}
.loadout-tip {
  font-size: 11px; color: #99a3b0; text-align: center; font-style: italic;
}
.loadout-select {
  background: #0e1218; color: #fff;
  border: 1.5px solid #4a5568;
  border-radius: 6px;
  padding: 6px 10px; font-size: 12px; font-weight: 700;
  cursor: pointer; pointer-events: auto;
}
.loadout-select:focus { outline: none; border-color: #66d9ff; }
.loadout-topup-btn {
  background: #ff9ec4; color: #2a0814;
  border: 1.5px solid #ffb8d6;
  padding: 4px 10px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.4px; border-radius: 6px;
  cursor: pointer; pointer-events: auto;
  margin-left: 8px;
}
.loadout-topup-btn:hover { background: #ffb8d6; }
.swatch-mini {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  display: inline-block;
}

.donate-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  background: rgba(255,158,196,0.08);
  border: 1px solid rgba(255,158,196,0.3);
  border-radius: 10px;
  padding: 14px;
}
.donate-row p {
  width: 100%; font-size: 12px; color: #d0c8c0; margin-bottom: 6px;
  line-height: 1.5;
}
.donate-pkg {
  flex: 1; min-width: 100px;
  background: rgba(20,28,40,0.6);
  border: 1.5px solid #ff9ec4;
  border-radius: 8px;
  padding: 10px; cursor: pointer; pointer-events: auto;
  font-weight: 800; color: #fff; text-align: center;
  font-size: 13px;
}
.donate-pkg:hover { background: rgba(255,158,196,0.15); }
.donate-pkg .amt { color: #ff9ec4; font-size: 18px; }
.donate-pkg .credits { color: #ffd166; font-size: 12px; margin-top: 4px; }
.name-prompt {
  font-size: 12.5px; color: #99a3b0; line-height: 1.5;
  background: rgba(255,209,102,0.08); border: 1px solid rgba(255,209,102,0.3);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 14px;
  text-align: center;
}
.name-prompt.hidden { display: none; }
/* #lobby-body now wraps .lobby-shell (which IS the 3-col grid:
   nav | panes | queue rail). The OLD 280px+1fr grid here was
   squeezing the entire shell into a 280px column. Reset to plain
   block so .lobby-shell can use the full card width. */
#lobby-body {
  display: block;
  text-align: left;
}
/* (Old #lobby-players grid removed — see .lobby-player-list. Element no longer in DOM.) */
#lobby-queue {
  background: #0e1218; border: 1px solid #2c3340; border-radius: 8px; padding: 12px;
  text-align: left;
}
#lobby-queue h3 {
  font-size: 11px; color: #99a; letter-spacing: 0.12em; text-transform: uppercase;
  margin: 0 0 10px 0; font-weight: 600;
}
#queue-list { list-style: none; padding: 0; margin: 0; font-size: 13px; }
#queue-list li { padding: 6px 8px; margin-bottom: 4px; border-radius: 4px;
  background: rgba(255,255,255,0.03); border-left: 3px solid #444; color: #ccc; }
#queue-list li.you { border-left-color: #66d9ff; color: #c8eaff; }
#queue-list li.ready { border-left-color: #6dd76d; color: #c4f0c4; }
#queue-list li.kicktimer { color: #ff8b3a; font-size: 11px; }
#queue-list li.queue-empty { opacity: 0.5; font-style: italic; border-left-color: transparent; }
/* ── TOP-RIGHT HUD CLUSTER — fullscreen toggle, field map, waypoint ──
   These three sit together in the corner, so they share one visual
   language: dark glass surface, a single hairline weight, and warmth
   reserved for the objective text. Previously each had its own
   treatment (cyan ring / thick gold ring / orange pill) and the corner
   read as three unrelated widgets. The toggle is a rounded square so it
   reads as a control next to the circular map, not a second dial. */
#fs-btn {
  position: fixed; top: 12px; right: 12px; z-index: 6;
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,8,18,0.72);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.8);
  color: #cfc8de; font-size: 16px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  pointer-events: auto;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#fs-btn:hover {
  background: rgba(30,24,52,0.85); color: #fff;
  border-color: rgba(255,255,255,0.26);
}
#fs-btn.fs-active { color: #fff; border-color: rgba(255,255,255,0.30); }
/* Old slot grid + circular countdown SVG removed — replaced by .lobby-player-list
   and the slim .lobby-clock chip above. Keep the @keyframes since other elements
   (eg. countdown crit pulse) reuse them. */
@keyframes pulse { 50% { opacity: 0.4; } }
@keyframes shake { 25% { transform: scale(1.04); } 75% { transform: scale(0.97); } }

.lobby-roles { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 0; }
.role-btn {
  padding: 6px 12px; border-radius: 6px; border: 1px solid #444; background: #0e1218;
  color: #ccc; font-size: 12px; cursor: pointer;
}
.role-btn:hover { background: #1c2230; }
.role-btn.active { border-color: #ffd166; color: #ffd166; }
.role-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.lobby-action-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#go-btn, .ready-btn {
  background: #ffd166; color: #1a1a1a; border: none; padding: 12px 28px;
  font-size: 15px; font-weight: 800; border-radius: 8px; cursor: pointer;
  letter-spacing: 1px;
}
#go-btn:hover, .ready-btn:hover { filter: brightness(1.1); }
#go-btn:disabled { background: #2a2f3a; color: #666; cursor: not-allowed; }
.ready-btn { background: #66d9ff; color: #0d2230; }
.ready-btn.ready { background: #6dd76d; color: #0d2a0d; }
.ready-btn.ready::after { content: ' ✓'; }
.slot.taken.ready { border-color: #6dd76d; box-shadow: 0 0 0 1px #6dd76d inset; }
#ready-timer-row {
  font-size: 12px; color: #ff8b3a; margin-top: 10px; min-height: 18px;
  letter-spacing: 0.05em;
}
#ready-timer-row.crit { color: #ff5252; font-weight: 700; }
.lobby-hint {
  font-size: 12px; line-height: 1.6; color: #99a; margin-top: 18px;
}

#portal-intro {
  position: fixed; inset: 0; pointer-events: none; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; color: #ff4040;
}
#portal-intro.hidden { display: none; }
.portal-intro-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(40,0,0,0.85) 0%, rgba(0,0,0,0.95) 80%);
  animation: introBgPulse 0.6s ease-out;
}
.portal-intro-content {
  position: relative; text-align: center; max-width: 90vw;
  text-shadow: 0 0 24px rgba(255,40,40,0.6), 0 0 8px rgba(0,0,0,0.9);
}
.portal-intro-eye {
  font-size: 90px; line-height: 1; margin-bottom: 8px;
  animation: introEye 1.4s infinite alternate;
  filter: drop-shadow(0 0 16px #ff2020);
}
@keyframes introEye {
  0% { transform: scale(0.95); filter: drop-shadow(0 0 16px #ff2020); }
  100% { transform: scale(1.08); filter: drop-shadow(0 0 32px #ff5050); }
}
#portal-intro h1 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(2rem, 6vw, 4rem); font-weight: 800;
  letter-spacing: 0.08em; margin: 8px 0;
  animation: introShake 0.4s infinite;
}
.portal-intro-sub { font-size: 14px; color: #c89090; margin-bottom: 18px; opacity: 0.9; }
.portal-intro-figure {
  font-size: 120px; line-height: 1; margin: 16px 0;
  animation: introTransform 3.0s ease-out forwards;
}
@keyframes introTransform {
  0%   { transform: scale(1) rotate(0); filter: none; }
  35%  { transform: scale(1.4) rotate(-3deg); filter: hue-rotate(-30deg) brightness(0.7); }
  50%  { transform: scale(0.85) rotate(4deg); filter: hue-rotate(-90deg) brightness(0.4); }
  70%  { transform: scale(1.3) rotate(0); filter: hue-rotate(180deg) brightness(0.3) saturate(0); }
  100% { transform: scale(1.6) rotate(0); filter: brightness(0) saturate(0); }
}
.portal-intro-foot {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(0.9rem, 2.5vw, 1.4rem); font-weight: 700;
  color: #ffd166; letter-spacing: 0.06em;
}
#portal-intro-timer { color: #ff5050; font-size: 1.25em; }
@keyframes introBgPulse { from { opacity: 0; } to { opacity: 1; } }
@keyframes introShake {
  0%, 100% { transform: translate(0,0); }
  25% { transform: translate(-3px, 1px); }
  75% { transform: translate(3px, -1px); }
}

#overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center; z-index: 10;
  pointer-events: auto;
}
#overlay.hidden { display: none; }
#overlay-card {
  max-width: 540px; padding: 36px; background: #1a1a1a; border: 1px solid #333;
  border-radius: 12px; text-align: center;
}
#overlay-card h1 { font-size: 32px; margin-bottom: 16px; color: #ffd166; }
#overlay-card p { font-size: 15px; line-height: 1.6; color: #ccc; margin-bottom: 24px; }
#overlay-btn {
  background: #ffd166; color: #1a1a1a; border: none; padding: 12px 32px;
  font-size: 16px; font-weight: 700; border-radius: 6px; cursor: pointer;
}
#overlay-btn:hover { background: #ffdb85; }

/* ============================================================
   LOBBY UI/UX RESTYLE — dark glassy purple aesthetic.
   Strict visual layer: no selector renames, no behavior change.
   Sits at end of file so it overrides earlier rules.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Josefin+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700&display=swap');

:root{
  --pt-purple:#7C3AED;
  --pt-purple-mid:#9b5cff;
  --pt-purple-pale:#EDE4FF;
  --pt-bg-1:#1a1432;
  --pt-bg-2:#0e0a1f;
  --pt-bg-3:#07051a;
  --pt-dim:#9994b3;
  --pt-hairline:rgba(255,255,255,0.08);
  --pt-hairline-2:rgba(255,255,255,0.16);
  --pt-display:'Bricolage Grotesque', system-ui, sans-serif;
  --pt-body:'Josefin Sans', system-ui, sans-serif;
}

/* Lobby backdrop — purple radial */
#lobby{
  background:radial-gradient(80% 60% at 50% 0%, var(--pt-bg-1) 0%, var(--pt-bg-2) 60%, var(--pt-bg-3) 100%);
  font-family:var(--pt-body);
}

/* Lobby card — glassy with blur */
#lobby-card{
  background:rgba(20, 14, 40, 0.82);
  border:1px solid var(--pt-hairline);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
#lobby-card h1{
  font-family:var(--pt-display); font-weight:700;
  color:#fff; letter-spacing:-0.01em;
}

/* Back-home pill — pinned to the VIEWPORT (not the lobby card) so it stays
   visible above #lobby (z-index 20). Lives outside #lobby-card in the HTML
   so backdrop-filter doesn't trap its position:fixed in the card's
   containing block. */
#back-home{
  position:fixed !important;
  top:18px !important; left:18px !important;
  z-index:40;
  background:rgba(11,9,24,0.6); color:var(--pt-dim);
  border:1px solid var(--pt-hairline); border-radius:999px;
  padding:8px 14px; font-size:13px; font-weight:600;
  backdrop-filter:blur(8px);
  text-decoration:none;
  transition:all 0.15s ease;
}
#back-home:hover{
  color:#fff; border-color:var(--pt-hairline-2);
  background:rgba(11,9,24,0.85);
}

/* Connect / tier banners */
#connect-status{
  display:inline-block;
  font-size:11px; letter-spacing:0.08em;
  color:var(--pt-dim);
  padding:5px 11px; border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--pt-hairline);
}
#connect-status.ok { color:#8be38b; background:rgba(139,227,139,0.06); border-color:rgba(139,227,139,0.3); }
#connect-status.warn{ color:#ffd9a8; background:rgba(255,184,77,0.08); border-color:rgba(255,184,77,0.35); }
#connect-status.err{ color:#ff8a8a; background:rgba(255,138,138,0.06); border-color:rgba(255,138,138,0.3); }

#tier-banner.main{ background:rgba(124,58,237,0.16); color:#d8c8ff; border-color:rgba(124,58,237,0.45); }
#tier-banner.sub { background:rgba(217,119,6,0.14);  color:#f5cd8d; border-color:rgba(217,119,6,0.45); }

/* Section headers */
.section-head h3{
  font-family:var(--pt-display); font-weight:700;
  font-size:1rem; letter-spacing:0.02em;
}
#sub-section .section-head h3{ color:#f5cd8d; }
#main-section .section-head h3{ color:#d8c8ff; }
.section-count{
  background:rgba(255,255,255,0.05);
  border:1px solid var(--pt-hairline);
  color:var(--pt-dim);
  font-family:var(--pt-display); font-weight:700;
}
.section-blurb{ color:var(--pt-dim); }

/* Sub & main section cards */
#sub-section{
  background:rgba(217,119,6,0.06);
  border:1px solid rgba(217,119,6,0.30);
  border-radius:16px;
  padding:18px;
}
#sub-section.you-here{
  border-color:rgba(217,119,6,0.65);
  box-shadow:0 0 0 1px rgba(217,119,6,0.4), 0 8px 28px rgba(217,119,6,0.18);
}
#main-section{
  background:rgba(124,58,237,0.06);
  border:1px solid rgba(124,58,237,0.30);
  border-radius:16px;
  padding:18px;
}
#main-section.you-here{
  border-color:rgba(124,58,237,0.7);
  box-shadow:0 0 0 1px rgba(124,58,237,0.45), 0 8px 28px rgba(124,58,237,0.22);
}
#main-section.locked{
  border-color:rgba(255,184,77,0.55);
  box-shadow:0 0 0 1px rgba(255,184,77,0.35);
}

/* Queue list */
#sub-queue-list li{
  background:rgba(0,0,0,0.25);
  border:1px solid var(--pt-hairline); border-left-width:3px;
  border-left-color:rgba(255,255,255,0.12);
  border-radius:10px;
  color:#d8d3ec;
}
#sub-queue-list li.queued{ border-left-color:#f5a25d; color:#f5cd8d; }
#sub-queue-list li.you   { border-left-color:#ff8a3d; color:#ffd2bd; }
#sub-queue-list li .pos  { color:#f5a25d; }
#sub-queue-list li.queue-empty{
  color:var(--pt-dim);
  background:rgba(0,0,0,0.15);
  border-left-color:transparent;
}

/* Sub match clock + lobby-clock */
#sub-match-clock{
  background:rgba(217,119,6,0.10);
  border:1px solid rgba(217,119,6,0.40);
  border-radius:10px;
  color:#f5cd8d;
}
#sub-match-clock .clock-time{ color:#ffb84d; font-family:var(--pt-display); }

.lobby-clock{
  background:rgba(124,58,237,0.10);
  border:1px solid rgba(124,58,237,0.40);
  border-radius:10px;
  color:#d8c8ff;
}
.lobby-clock .clock-time{ color:#b698ff; font-family:var(--pt-display); }
.lobby-clock .countdown-bar{ background:rgba(255,255,255,0.06); }
.lobby-clock .countdown-bar-fill{
  background:linear-gradient(90deg, #9b5cff 0%, #c4a3ff 100%);
}

/* Sub-self-card / spectate-cta */
#sub-self-card{
  background:rgba(217,119,6,0.05);
  border:1px solid rgba(217,119,6,0.30);
  border-radius:12px;
}
.sub-status        { color:#f5cd8d; }
.sub-status.queued { color:#8be38b; }
.sub-foot          { color:var(--pt-dim); }

#sub-spectate-cta{
  background:rgba(124,58,237,0.08);
  border:1px solid rgba(124,58,237,0.40);
  border-radius:12px;
}
#sub-spectate-cta .cta-text{ color:#d8c8ff; }

/* Player rows in main lobby */
.lobby-player-row{
  background:rgba(0,0,0,0.25);
  border:1px solid var(--pt-hairline); border-left-width:3px;
  border-left-color:rgba(255,255,255,0.12);
  border-radius:10px;
  color:#d8d3ec;
}
.lobby-player-row.empty{
  background:rgba(0,0,0,0.12);
  border-left-color:transparent;
  opacity:0.7;
}
.lobby-player-row.empty .role-tag{
  background:rgba(255,255,255,0.04); color:var(--pt-dim);
}
.lobby-player-row.taken{ border-left-color:#9b5cff; color:#e8e3ff; }
.lobby-player-row.taken.ready{ border-left-color:#8be38b; color:#cdf0c8; }
.lobby-player-row.you{
  background:rgba(124,58,237,0.14);
  border-left-color:#9b5cff;
}
.lobby-player-row.you .role-tag{
  background:rgba(124,58,237,0.30); color:#fff;
}
.lobby-player-row.farmer{
  background:rgba(217,119,6,0.10);
  border-left-color:#f5a25d;
  color:#f5cd8d;
}
.lobby-player-row.farmer .role-tag{
  background:rgba(217,119,6,0.30); color:#f5cd8d;
}
.lobby-player-row .role-tag{
  background:rgba(255,255,255,0.06);
  color:#cfc8ea;
  font-family:var(--pt-display); font-weight:800;
  letter-spacing:0.1em;
  border-radius:6px;
}
.lobby-player-row .ready-tag   { color:#8be38b; }
.lobby-player-row .waiting-tag { color:var(--pt-dim); }
.lobby-player-row .empty-tag   { color:var(--pt-dim); }

/* Buttons — pill primary purple, pill secondary glass */
.ready-btn{
  background:var(--pt-purple); color:#fff;
  border:none; border-radius:999px;
  padding:14px 28px;
  font-family:var(--pt-display); font-weight:800;
  letter-spacing:0.08em;
  transition:all 0.15s ease;
  box-shadow:0 8px 22px rgba(124,58,237,0.35);
}
.ready-btn:hover{ background:var(--pt-purple-mid); transform:translateY(-1px); }
.ready-btn.ready{ background:#3b7a35; box-shadow:0 8px 22px rgba(59,122,53,0.35); }
.ready-btn.ready::after{ content:' ✓'; }

.queue-btn{
  background:#d97706; color:#1a0500;
  border:none; border-radius:999px;
  padding:11px 18px;
  font-family:var(--pt-display); font-weight:800;
  letter-spacing:0.08em;
  box-shadow:0 6px 18px rgba(217,119,6,0.35);
}
.queue-btn:hover{ background:#f5a25d; }
.queue-btn.queued, .queue-btn:disabled{
  background:#3b7a35; color:#fff; box-shadow:none;
}
.unqueue-btn{
  background:rgba(255,255,255,0.06); color:#ff8a8a;
  border:1px solid rgba(255,138,138,0.3);
  border-radius:999px;
  padding:11px 18px;
  font-family:var(--pt-display); font-weight:700;
}
.unqueue-btn:hover{ background:rgba(255,138,138,0.12); }

.watch-live-btn{
  background:var(--pt-purple); color:#fff;
  border:none; border-radius:999px;
  padding:12px 18px;
  font-family:var(--pt-display); font-weight:800;
  letter-spacing:0.1em;
  box-shadow:0 6px 18px rgba(124,58,237,0.32);
}
.watch-live-btn:hover{ background:var(--pt-purple-mid); }

/* Role picker — pill chips */
#role-picker{ display:flex; gap:6px; flex-wrap:wrap; }
.role-btn{
  padding:8px 16px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--pt-hairline);
  border-radius:999px;
  color:#ddd;
  font-size:12px; font-weight:600;
  font-family:var(--pt-body);
  transition:all 0.15s ease;
}
.role-btn:hover{
  background:rgba(124,58,237,0.18);
  border-color:var(--pt-purple-mid);
  color:#fff;
}
.role-btn.active{
  background:var(--pt-purple); color:#fff;
  border-color:var(--pt-purple);
}
.role-btn:disabled{ opacity:0.35; cursor:not-allowed; }
.role-picker-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.role-picker-label{
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--pt-dim); font-weight:700;
}

/* Login card — glassy */
#login-card{
  background:rgba(0,0,0,0.18);
  border:1px solid var(--pt-hairline);
  border-radius:14px;
}
.login-row input,
#my-name{
  background:rgba(0,0,0,0.35); color:#fff;
  border:1px solid var(--pt-hairline);
  border-radius:10px;
}
.login-row input:focus,
#my-name:focus{ outline:none; border-color:var(--pt-purple-mid); }

.name-submit-btn{
  background:var(--pt-purple); color:#fff;
  border:none; border-radius:10px;
  font-family:var(--pt-display); font-weight:800;
  letter-spacing:0.08em;
  box-shadow:0 6px 18px rgba(124,58,237,0.35);
}
.name-submit-btn:hover{ background:var(--pt-purple-mid); }

.login-divider{ color:var(--pt-dim); font-size:11px; letter-spacing:0.1em; }
.login-divider::before, .login-divider::after{ background:var(--pt-hairline); }

.login-greeting{ color:#d8d3ec; }
.login-greeting b{ color:#fff; }

.login-error{
  background:rgba(255,138,138,0.10);
  border:1px solid rgba(255,138,138,0.3);
  color:#ffb0b0;
  border-radius:10px;
}

/* Sign-in CTA card */
.signin-cta{
  background:linear-gradient(135deg, var(--pt-purple) 0%, #5b21b6 100%);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  color:#fff;
  box-shadow:0 12px 28px rgba(124,58,237,0.32);
}
.signin-cta:hover{
  background:linear-gradient(135deg, var(--pt-purple-mid) 0%, var(--pt-purple) 100%);
  transform:translateY(-1px);
}
.signin-cta-text b{ font-family:var(--pt-display); }
.signin-cta-sub{ color:rgba(255,255,255,0.78); }

/* Account chip */
#account-chip{
  background:rgba(124,58,237,0.12);
  border:1px solid rgba(124,58,237,0.4);
  border-radius:14px;
  color:#fff;
}
#account-chip b{ color:#fff; }
.account-credits{ color:#f5cd8d; font-family:var(--pt-display); font-weight:800; }
.profile-btn,
.signout-btn{
  background:rgba(255,255,255,0.05);
  color:#fff;
  border:1px solid var(--pt-hairline);
  border-radius:999px;
  padding:7px 13px;
  font-size:12px;
  font-family:var(--pt-display); font-weight:700;
  transition:all 0.15s ease;
}
.profile-btn:hover{ background:var(--pt-purple); border-color:var(--pt-purple); }
.signout-btn:hover{ background:rgba(255,138,138,0.18); border-color:rgba(255,138,138,0.4); color:#ffb0b0; }

/* Name prompt */
#name-prompt{
  color:var(--pt-dim); font-size:12px; line-height:1.6;
}
#name-prompt a{ color:var(--pt-purple-mid); text-decoration:underline; }

/* Lobby hint */
.lobby-hint{ color:var(--pt-dim); }
.lobby-hint b{ color:#fff; }

/* === BH How to Play card (mirrors the PT lobby's structure with the
   yellow/orange palette). Glass tile parent + small inset glass blocks
   per section so a player can scan top-to-bottom in 30s. === */
.bh-howto {
  margin-top: 14px; padding: 16px 18px;
  background: linear-gradient(180deg, rgba(20,18,12,0.55) 0%, rgba(10,10,14,0.65) 100%);
  border: 1px solid rgba(255,209,102,0.30);
  border-radius: 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06);
  font-size: 12.5px; color: #d8d0bc; line-height: 1.6;
}
.bh-howto-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.bh-howto-icon { font-size: 18px; }
.bh-howto-title {
  font-weight: 800; font-size: 14px; color: #fff; letter-spacing: 0.04em;
}
.bh-howto-meta {
  margin-left: auto; font-size: 11px; color: #99a3b0; letter-spacing: 0.5px;
}
.bh-howto-block {
  margin-bottom: 10px; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.bh-howto-h {
  font-weight: 800; font-size: 12.5px; letter-spacing: 0.04em; margin-bottom: 6px;
}
.bh-howto-italic { font-style: italic; color: #ffeac8; }
.bh-howto-italic b { color: #fff; }
.bh-howto-keys {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: #d8d0bc;
}
.bh-howto-keys span { line-height: 1.5; }
.bh-howto-keys b { color: #fff; }
.bh-howto-foot {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.10);
  font-size: 11.5px; color: #99a3b0; line-height: 1.5;
}
.bh-howto-story { border-color: rgba(255,209,102,0.30); }
.bh-howto-rescue { border-color: rgba(255,128,144,0.28); }
.bh-howto-block-farmer {
  background: linear-gradient(180deg, rgba(199,58,74,0.10) 0%, rgba(199,58,74,0.02) 100%);
  border-color: rgba(255,128,144,0.25);
}

/* Ready timer row */
#ready-timer-row{ color:#f5cd8d; }
#ready-timer-row.crit{ color:#ff8a8a; }

/* Lobby-shop frame */
.lobby-shop{
  background:rgba(0,0,0,0.25);
  border:1px solid var(--pt-hairline);
  border-radius:16px;
}
.lobby-shop-head h2{ font-family:var(--pt-display); color:#fff; }
.lobby-shop-credits{
  font-family:var(--pt-display);
  background:rgba(124,58,237,0.14);
  border:1px solid rgba(124,58,237,0.4);
  border-radius:999px;
  padding:5px 14px;
}

/* Overlay end-game card */
#overlay{
  background:radial-gradient(80% 60% at 50% 0%, rgba(26,20,50,0.94) 0%, rgba(7,5,26,0.97) 100%);
}
#overlay-card{
  background:rgba(20, 14, 40, 0.92);
  border:1px solid var(--pt-hairline);
  backdrop-filter:blur(18px);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
#overlay-card h1{
  font-family:var(--pt-display); font-weight:700; color:#fff;
  letter-spacing:-0.01em;
}
#overlay-card p{ color:var(--pt-dim); }
#overlay-btn{
  background:var(--pt-purple); color:#fff;
  border:none; border-radius:999px;
  padding:13px 30px;
  font-family:var(--pt-display); font-weight:800;
  letter-spacing:0.08em;
  box-shadow:0 8px 22px rgba(124,58,237,0.35);
}
#overlay-btn:hover{ background:var(--pt-purple-mid); }

/* ═══════════════════════════════════════════════════════════════════════════
   GLASSMORPHISM LOBBY OVERHAUL  ·  BH
   ──────────────────────────────────────────────────────────────────────────
   Mirrors the glass material applied to PT for visual cohesion across both
   games. BH keeps its warm yellow/orange palette on top of the glass.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Painted backdrop behind the lobby card so the glass actually has
   something to refract. */
/* Hide the in-match HUD (timer, harvest counter, control chips) while the
   immersive lobby is up — those belong to active play, not the lobby. */
body.bh-in-lobby #hud{ display:none !important; }

/* ── IMMERSIVE LOBBY SIDE TOOLS — edge buttons, shown only in the lobby ── */
#lobby-side-tools{ display:none; }
body.bh-in-lobby #lobby-side-tools{ display:block; }
.lst-col{ position:fixed; top:50%; transform:translateY(-50%); z-index:30; display:flex; flex-direction:column; gap:14px; }
.lst-left{ left:20px; }
.lst-right{ right:20px; }
.lst-btn{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  width:76px; padding:12px 6px;
  background:rgba(14,12,26,0.55); border:1px solid rgba(255,255,255,0.12);
  border-radius:16px; color:#f3edff; cursor:pointer;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.lst-btn:hover{ background:rgba(40,30,70,0.82); transform:translateY(-2px); border-color:rgba(255,255,255,0.26); }
.lst-ico{ font-size:22px; line-height:1; }
.lst-lbl{ font-size:10px; font-weight:700; letter-spacing:0.02em; text-align:center; opacity:0.85; }
@media (max-width:560px){
  .lst-col{
    top:auto;
    bottom:calc(8px + env(safe-area-inset-bottom));
    transform:none;
    flex-direction:row;
    gap:8px;
  }
  .lst-left{ left:calc(50% - 108px); }
  .lst-right{ left:calc(50% + 4px); right:auto; }
  .lst-btn{ width:48px; height:48px; padding:6px 4px; border-radius:12px; }
  .lst-ico{ font-size:18px; }
  .lst-lbl{ display:none; }
  #lobby-card{ width:96vw; padding-bottom:72px; }
}

/* ── LOBBY MODAL (How to Play / Settings / Leaderboard) ── */
#lobby-modal{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:rgba(4,4,10,0.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
#lobby-modal.hidden{ display:none; }
.lobby-modal-card{
  position:relative; width:min(92vw, 480px); max-height:82vh; overflow-y:auto;
  background:linear-gradient(180deg, rgba(28,22,46,0.98), rgba(18,14,30,0.98));
  border:1px solid rgba(255,255,255,0.14); border-radius:20px;
  padding:26px; color:#ece7ff; box-shadow:0 30px 80px rgba(0,0,0,0.6);
}
.lobby-modal-card h2{ margin:0 0 14px; font-size:22px; color:#ffd166; font-weight:800; }
.lobby-modal-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  color:#fff; cursor:pointer; font-size:15px; line-height:1;
}
.lobby-modal-close:hover{ background:rgba(255,255,255,0.18); }
#lobby-modal-body{ font-size:14px; line-height:1.7; }
#lobby-modal-body h3{ font-size:15px; color:#ffd166; margin:16px 0 6px; }
#lobby-modal-body ul{ margin:6px 0 6px 18px; padding:0; }
#lobby-modal-body li{ margin:5px 0; }
#lobby-modal-body kbd{ background:rgba(255,255,255,0.13); border:1px solid rgba(255,255,255,0.12); border-radius:6px; padding:2px 7px; font-size:12px; font-weight:700; }
#lobby-modal-body .lm-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
#lobby-modal-body .lm-row:last-child{ border-bottom:none; }
#lobby-modal-body .lm-rank{ display:flex; align-items:center; gap:10px; }
#lobby-modal-body .lm-num{ width:24px; font-weight:800; color:#ffd166; }
.lm-toggle{ width:46px; height:26px; border-radius:999px; border:none; cursor:pointer; background:#3a3550; position:relative; transition:background 0.15s; }
.lm-toggle.on{ background:#3b9e3b; }
.lm-toggle::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left 0.15s; }
.lm-toggle.on::after{ left:23px; }

/* IMMERSIVE LOBBY — the live 3D scene (#game) renders behind this overlay, so
   the overlay is just a soft vignette: darker at the edges for readability,
   clear in the middle so the moonlit field + idle bunny show through. */
#lobby{
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(4,4,8,0.62) 100%) !important;
}

/* Lobby card — main pane of glass */
#lobby-card{
  background: linear-gradient(180deg, rgba(34,28,18,0.55) 0%, rgba(18,12,8,0.62) 100%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(28px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.2) !important;
  border-radius: 22px !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* Sub + main lobby section tiles inside the main pane */
#sub-section,
#main-section{
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
#sub-section{ border-color: rgba(217,119,6,0.30); }
#main-section{ border-color: rgba(255,209,102,0.30); }

/* Secret Panel — warm glass with gold rim glow (now also hosts the
   My Bunny Profile loadout block). */
.lobby-secret-panel{
  background: linear-gradient(135deg, rgba(255,209,102,0.16) 0%, rgba(255,107,53,0.14) 100%) !important;
  border: 1.5px solid rgba(255,209,102,0.50) !important;
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  border-radius: 16px;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.40),
    0 0 32px rgba(255,184,77,0.18),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

/* Loadout block inside the Secret Panel (the moved My Bunny Profile) */
.lobby-secret-loadout{
  margin-top: 6px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.30) 100%);
  border: 1px solid rgba(255,209,102,0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.lobby-secret-loadout:empty{ display: none; }
/* Override the inline `grid-column: 1/-1` so the moved card fills the
   non-grid container cleanly. */
.lobby-secret-loadout .loadout-card{
  grid-column: auto !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Marketplace — cool glass tile distinct from the Secret Panel */
.lobby-shop{
  background: linear-gradient(180deg, rgba(20,28,40,0.45) 0%, rgba(10,12,18,0.55) 100%) !important;
  border: 1px solid rgba(255,209,102,0.30) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Sign-in CTA at the top of the login card */
.signin-cta{
  background: linear-gradient(135deg, rgba(102,217,255,0.18) 0%, rgba(124,58,237,0.18) 100%) !important;
  border: 1px solid rgba(102,217,255,0.40) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Login card pieces */
#login-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 14px;
}

/* Account chip (signed-in pill) */
#account-chip{
  background: linear-gradient(135deg, rgba(126,255,158,0.14) 0%, rgba(102,217,255,0.10) 100%) !important;
  border: 1px solid rgba(126,255,158,0.40) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Lobby clock + queue rows */
.lobby-clock,
#sub-match-clock{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
}
#sub-queue-list li,
.lobby-player-list li{
  background: rgba(0,0,0,0.30) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Marketplace cards — glass chips */
.shop-grid > div,
.shop-grid > article{
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.shop-grid > div:hover,
.shop-grid > article:hover{
  transform: translateY(-1px);
  border-color: rgba(255,209,102,0.45) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.35),
    0 0 18px rgba(255,209,102,0.12),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Glassy primary buttons (READY / QUEUE / WATCH / play / overlay) */
.queue-btn,
.unqueue-btn,
.watch-live-btn,
#name-submit-btn{
  background: linear-gradient(180deg, rgba(255,209,102,0.92) 0%, rgba(255,184,77,1) 100%) !important;
  color: #1a1004 !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 6px 16px rgba(255,184,77,0.35),
    inset 0 1px 0 rgba(255,255,255,0.45);
  transition: transform 0.08s, box-shadow 0.15s;
}
.queue-btn:hover,
.unqueue-btn:hover,
.watch-live-btn:hover,
#name-submit-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 8px 22px rgba(255,184,77,0.45),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

/* ─── PRIVATE-ROOM BANNER + PUBLIC-LOBBY ROOM ACTIONS (BH) ──────── */
.bh-room-banner{
  margin:14px 0 8px; padding:12px 14px;
  background:linear-gradient(180deg, #fff8e1 0%, #ffe5a3 100%);
  border:2.5px solid #a86d00;
  border-radius:14px;
  box-shadow:0 4px 0 #a86d00, inset 0 2px 0 rgba(255,255,255,0.7);
  color:#5b3206; font-weight:700;
}
.bh-room-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
}
.bh-room-banner .bh-room-pill{
  display:inline-flex; align-items:center; padding:4px 12px;
  background:#a86d00; color:#fff; border-radius:999px;
  font-size:11.5px; letter-spacing:0.08em; font-weight:800;
  text-transform:uppercase;
}
.bh-room-banner .bh-room-code{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:22px; font-weight:900; color:#5b3206; letter-spacing:0.15em;
  background:#fff; padding:4px 14px;
  border:2px dashed #a86d00; border-radius:10px;
}
.bh-room-banner .bh-room-btn{
  display:inline-flex; align-items:center; padding:7px 14px;
  background:#fff; color:#5b3206;
  border:2px solid #a86d00; border-radius:10px;
  font:inherit; font-weight:800; font-size:12.5px;
  text-decoration:none; cursor:pointer;
  box-shadow:0 3px 0 #a86d00;
  transition:transform 0.12s ease;
}
.bh-room-banner .bh-room-btn:hover{ transform:translateY(-1px); }
.bh-room-banner .bh-room-btn-leave{
  background:rgba(255,255,255,0.65); margin-left:auto;
}
.bh-room-lonely{
  margin-top:10px; padding:8px 12px;
  background:rgba(255,255,255,0.55);
  border:1.5px dashed #a86d00; border-radius:10px;
  font-size:12.5px; line-height:1.5; color:#5b3206; font-style:italic;
}
.bh-room-qr-box{
  margin-top:10px; padding:8px;
  background:rgba(255,255,255,0.65);
  border:1.5px solid #a86d00; border-radius:12px;
  display:flex; flex-direction:column; align-items:center;
}
.bh-room-actions{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin:14px 0 8px; padding:10px 14px;
  background:rgba(255,255,255,0.55);
  border:2px dashed #8b5a2b; border-radius:14px;
  color:#5b3a1a;
}
.bh-room-create-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; font:inherit; font-size:13.5px; font-weight:800;
  cursor:pointer;
  background:linear-gradient(180deg, #cfe898 0%, #88c84a 100%);
  color:#1a3a05;
  border:2px solid #2d5a18; border-radius:12px;
  box-shadow:0 4px 0 #2d5a18, inset 0 2px 0 rgba(255,255,255,0.35);
  transition:transform 0.12s ease;
}
.bh-room-create-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 #2d5a18, inset 0 2px 0 rgba(255,255,255,0.40); }
.bh-room-create-btn:active{ transform:translateY(1px); box-shadow:0 2px 0 #2d5a18, inset 0 2px 0 rgba(255,255,255,0.30); }
.bh-room-join-form{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; }
.bh-room-join-label{ font-size:12.5px; font-weight:700; color:#5b3a1a; }
.bh-room-join-input{
  width:110px; padding:7px 10px;
  font:inherit; font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:700; font-size:15px; letter-spacing:0.12em; text-transform:uppercase;
  background:#fff; color:#5b3a1a;
  border:2px solid #8b5a2b; border-radius:10px; outline:none;
}
.bh-room-join-input.bh-room-join-err{
  border-color:#dc2626; animation:bh-room-shake 0.18s linear 3;
}
@keyframes bh-room-shake{
  0%,100%{ transform:translateX(0); }
  25%    { transform:translateX(-3px); }
  75%    { transform:translateX(3px); }
}
.bh-room-join-btn{
  padding:7px 14px; font:inherit; font-size:12.5px; font-weight:800;
  cursor:pointer;
  background:#5b3a1a; color:#fff;
  border:2px solid #5b3a1a; border-radius:10px;
  box-shadow:0 3px 0 #5b3a1a;
}
@media (max-width: 640px){
  .bh-room-row{ flex-direction:column; align-items:flex-start; }
  .bh-room-banner .bh-room-btn-leave{ margin-left:0; width:100%; justify-content:center; }
  .bh-room-actions{ flex-direction:column; align-items:stretch; }
  .bh-room-join-form{ margin-left:0; flex-wrap:wrap; }
  .bh-room-join-input{ flex:1 1 80px; }
}


/* ─── POST-MATCH REMATCH-IN-PRIVATE-ROOM CTA (BH overlay) ──────── */
.overlay-rematch{
  margin-top:18px; padding-top:14px;
  border-top:2px dashed rgba(91,58,26,0.30);
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.overlay-rematch-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 18px; font:inherit; font-weight:800; font-size:13.5px;
  cursor:pointer;
  background:linear-gradient(180deg, #fff8e1 0%, #ffe5a3 100%);
  color:#5b3206;
  border:2px solid #a86d00; border-radius:12px;
  box-shadow:0 4px 0 #a86d00;
  transition:transform 0.12s ease;
}
.overlay-rematch-btn:hover{ transform:translateY(-1px); }
.overlay-rematch-btn:active{ transform:translateY(1px); box-shadow:0 2px 0 #a86d00; }
.overlay-rematch-share{
  padding:10px; width:100%;
  background:rgba(255,255,255,0.55);
  border:1.5px solid #a86d00; border-radius:12px;
}
.overlay-rematch-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  justify-content:center;
}
.overlay-rematch-code{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:20px; font-weight:900; letter-spacing:0.15em;
  color:#5b3206;
  background:#fff; padding:4px 12px;
  border:2px dashed #a86d00; border-radius:10px;
}
.overlay-rematch-hint{
  font-size:11.5px; color:#5b3206; font-style:italic;
  margin-top:6px; text-align:center; line-height:1.45;
}
@media (max-width: 640px){
  .overlay-rematch-row{ flex-direction:column; align-items:stretch; }
}


/* ─── CUSTOM LOBBIES BROWSER (public lobby only, BH) ─────────────── */
.bh-custom-lobbies{
  margin:14px 0 8px; padding:12px 14px;
  background:rgba(255,255,255,0.55);
  border:2.5px solid #2d5a18;
  border-radius:14px;
  box-shadow:0 4px 0 #2d5a18, inset 0 2px 0 rgba(255,255,255,0.7);
  color:#5b3a1a;
}
.bh-custom-lobbies-head{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.bh-custom-lobbies-title{
  font-family:'Bricolage Grotesque', system-ui, sans-serif; font-weight:900;
  font-size:15px; color:#5b3a1a;
}
.bh-custom-lobbies-count{
  padding:3px 10px;
  background:rgba(34,197,94,0.20); color:#0f3a14;
  border:1.5px solid #166534; border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:0.08em;
}
.bh-custom-lobbies-refresh{
  margin-left:auto; padding:5px 10px;
  font:inherit; font-size:13px; cursor:pointer;
  background:rgba(255,255,255,0.65); color:#5b3a1a;
  border:1.5px solid #8b5a2b; border-radius:8px;
}
.bh-custom-lobbies-list{
  display:flex; flex-direction:column; gap:6px;
}
.bh-custom-lobbies-empty{
  padding:14px; background:rgba(255,255,255,0.40);
  border:1.5px dashed #8b5a2b; border-radius:10px;
  font-size:12.5px; font-style:italic; color:#5b3a1a; text-align:center;
}
.bh-cl-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 10px;
  background:rgba(255,255,255,0.75);
  border:1.5px solid #8b5a2b; border-radius:10px;
}
.bh-cl-row-code{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:900; font-size:16px; letter-spacing:0.12em; color:#5b3206;
  padding:2px 10px; background:#fff;
  border:1.5px dashed #a86d00; border-radius:8px;
}
.bh-cl-row-host{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; color:#3a2e1e; }
.bh-cl-row-size{
  padding:2px 8px; font-size:11.5px; font-weight:800;
  background:rgba(34,197,94,0.18); color:#0f3a14;
  border:1.5px solid #166534; border-radius:999px;
}
.bh-cl-row-status{
  padding:2px 8px; font-size:11px; font-weight:800; letter-spacing:0.06em;
  border-radius:999px; border:1.5px solid;
}
.bh-cl-row-status-open  { background:rgba(132,204,22,0.22); color:#365314; border-color:#365314; }
.bh-cl-row-status-match { background:rgba(245,158,11,0.20); color:#7a4d10; border-color:#a86d00; }
.bh-cl-row-join{
  padding:6px 14px; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer;
  background:linear-gradient(180deg, #cfe898 0%, #88c84a 100%);
  color:#1a3a05;
  border:2px solid #2d5a18; border-radius:10px;
  box-shadow:0 3px 0 #2d5a18;
}
.bh-cl-row-join:hover{ transform:translateY(-1px); }
.bh-custom-lobbies-foot{
  margin-top:10px; padding-top:8px;
  border-top:1px dashed rgba(91,58,26,0.30);
  font-size:11.5px; color:#5e4a2e; font-style:italic; line-height:1.4;
}
.bh-room-listed-row{
  margin-top:10px; padding:8px 10px;
  background:rgba(255,255,255,0.55);
  border:1.5px dashed #a86d00; border-radius:10px;
}
.bh-room-listed-label{
  display:flex; align-items:flex-start; gap:9px; cursor:pointer; color:#5b3206;
}
.bh-room-listed-label input{ margin-top:3px; flex:none; }
.bh-room-listed-text{ font-size:12.5px; line-height:1.45; }
.bh-room-listed-text b{ display:block; }
.bh-room-listed-text .bh-room-listed-sub{
  display:block; font-weight:500; font-size:11.5px; color:#5e4a2e; margin-top:2px;
}
@media (max-width: 640px){
  .bh-cl-row{ flex-direction:column; align-items:stretch; }
  .bh-cl-row-join{ width:100%; }
}

/* ── 4-tab lobby nav — vertical sidebar (Main / Private / Loadout / Library) ── */
/* Layout: .lobby-shell is a flex row. Sidebar is a fixed-width column
   on the left; .lobby-panes-wrap fills the remaining space. Below the
   mobile breakpoint the sidebar collapses to a horizontal scroll bar
   above the panes. */
/* 3-column lobby shell: nav | panes | queue rail.
   minmax(0,1fr) on the middle column lets the panes shrink without
   forcing the queue rail off-screen. The right column is the Survive
   Queue rail (200px); collapses on mobile (see breakpoints below). */
.lobby-shell{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) 200px;
  gap:12px; align-items:flex-start;
  margin-top:14px;
}
.lobby-panes-wrap{ min-width:0; }   /* allow grid cell to shrink */
#lobby-tabs.lobby-tabs{
  display:flex; gap:6px;
  padding:8px;
  background:linear-gradient(180deg, rgba(40,30,55,0.55), rgba(28,22,45,0.50));
  border:1.5px solid rgba(168,216,255,0.20);
  border-radius:14px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.20);
  position:relative;
  z-index:8;
}
#lobby-tabs.lobby-tabs.lobby-tabs-vertical{
  flex-direction:column;
  width:160px; flex:none;
}
#lobby-tabs.lobby-tabs.lobby-tabs-vertical > .lobby-tab{
  flex:none; justify-content:flex-start;
  text-align:left;
}
/* Older fallback for non-vertical (kept for safety though all callers pass vertical) */
#lobby-tabs.lobby-tabs:not(.lobby-tabs-vertical){
  flex-wrap:wrap; margin:14px 0 10px;
}
/* Parked tabs must actually disappear. The `display:inline-flex` below is
   specificity (0,3,1) and out-ranks the UA's `[hidden]{display:none}`, so a
   tab marked hidden still painted — it looked clickable but the guard in
   bhSetLobbyTab bounced it back to Main Lobby, reading as a dead button. */
#lobby-tabs.lobby-tabs > .lobby-tab[hidden]{ display:none; }
#lobby-tabs.lobby-tabs > .lobby-tab{
  flex:1 1 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 14px;
  font:inherit; font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:800; font-size:13px; letter-spacing:0.04em;
  color:#d8e1f2;
  background:transparent;
  border:1.5px solid transparent;
  border-radius:10px;
  cursor:pointer;
  transition:background-color 0.15s ease, color 0.15s ease, transform 0.10s ease, box-shadow 0.15s ease;
}
#lobby-tabs.lobby-tabs > .lobby-tab:hover{
  background:rgba(168,216,255,0.10);
  color:#fff;
}
#lobby-tabs.lobby-tabs > .lobby-tab.active{
  background:linear-gradient(180deg, #2c3a55 0%, #1a2540 100%);
  color:#ffd166;
  border-color:#a8d8ff;
  box-shadow:0 3px 0 #4a6fb8, inset 0 1px 0 rgba(255,255,255,0.10);
  transform:translateY(-1px);
}
#lobby-tabs.lobby-tabs > .lobby-tab.is-opening{
  animation:bhTabOpen 0.45s ease;
}
.lobby-pane.is-opening{
  animation:bhPaneOpen 0.35s ease;
}
@keyframes bhTabOpen{
  0%{ box-shadow:0 0 0 0 rgba(255,209,102,0.7); }
  55%{ box-shadow:0 0 0 8px rgba(255,209,102,0.18); }
  100%{ box-shadow:0 3px 0 #4a6fb8, inset 0 1px 0 rgba(255,255,255,0.10); }
}
@keyframes bhPaneOpen{
  0%{ opacity:0; transform:translateY(8px); }
  100%{ opacity:1; transform:none; }
}
#lobby-tabs.lobby-tabs > .lobby-tab .lt-emoji{ font-size:16px; line-height:1; }
#lobby-tabs.lobby-tabs > .lobby-tab .lt-text{ white-space:nowrap; }
@media (max-width: 560px){
  #lobby-tabs.lobby-tabs > .lobby-tab{ padding:8px 10px; font-size:11.5px; gap:5px; }
  #lobby-tabs.lobby-tabs > .lobby-tab .lt-emoji{ font-size:15px; }
}
@media (max-width: 380px){
  #lobby-tabs.lobby-tabs > .lobby-tab .lt-text{ display:none; }
  #lobby-tabs.lobby-tabs > .lobby-tab{ padding:9px 10px; }
}
/* Mobile: sidebar collapses to a horizontal scroll above the panes */
@media (max-width: 720px){
  .lobby-shell{ flex-direction:column; gap:8px; }
  #lobby-tabs.lobby-tabs.lobby-tabs-vertical{
    flex-direction:row; width:auto; position:static;
    overflow-x:auto;
  }
  #lobby-tabs.lobby-tabs.lobby-tabs-vertical > .lobby-tab{
    flex:1 1 auto; justify-content:center; text-align:center;
  }
}
.lobby-pane{ display:none; animation:bhPaneFade 0.18s ease-out; }
.lobby-pane.active{ display:block; }
@keyframes bhPaneFade{ from{opacity:0; transform:translateY(2px);} to{opacity:1; transform:none;} }
.lobby-pane-intro{
  margin-bottom:12px; padding:10px 14px;
  background:rgba(40,30,55,0.55);
  border:1.5px solid rgba(168,216,255,0.18);
  border-left:4px solid #a8d8ff;
  border-radius:10px;
  color:#d8e1f2;
}
.lobby-pane-intro .lobby-pane-h{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:15px; font-weight:800; letter-spacing:0.02em; margin:0 0 4px;
  color:#ffd166;
}
.lobby-pane-intro .lobby-pane-sub{
  margin:0; font-size:12.5px; line-height:1.5; color:#bcc8e0;
}

/* ────────────────────────────────────────────────────────────────────
   ARENA — stage layout for the Main Lobby pane.
   Big animated header strip, 5 seats arranged in an arc above a
   central match clock, prominent ready/start buttons, and a tiny
   activity feed at the bottom. The 6th li (farmer) is hidden — only
   the 5 bunnies appear on stage.
─────────────────────────────────────────────────────────────────────*/
.arena{
  position:relative;
  padding:14px 16px 12px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 60%, rgba(255,209,102,0.08) 0%, rgba(0,0,0,0) 72%),
    linear-gradient(180deg, #20262f 0%, #181c23 100%);
  border:1.5px solid #2c3340;
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 6px 20px -10px rgba(0,0,0,0.55);
  overflow:hidden;
}
.arena-header{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:6px 10px; margin-bottom:8px;
  background:rgba(0,0,0,0.30);
  border:1px solid #2c3340;
  border-radius:999px;
  font-size:12px;
}
.arena-mode-chip{
  padding:3px 10px;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:900; font-size:11px; letter-spacing:0.10em;
  color:#fff; border-radius:999px;
}
.arena-mode-public{
  background:linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  border:1.5px solid #7c2d12;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,0.25);
}
.arena-mode-private{
  background:linear-gradient(180deg, #ffd166 0%, #ff8a3d 100%);
  border:1.5px solid #b45309; color:#3a2410;
  text-shadow:0 1px 0 rgba(255,255,255,0.30);
}
.arena-divider{ color:#4a5060; }
.arena-mode-sub{ color:#cfd5e0; font-weight:700; font-size:11.5px; }
.arena-flex{ flex:1; }
.arena-room-code{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:900; font-size:14px; letter-spacing:0.16em;
  padding:2px 10px;
  color:#1a1f28; background:#ffd166;
  border:1.5px dashed #b45309; border-radius:8px;
  font-variant-numeric:tabular-nums;
}
.arena-count-pill{
  display:inline-flex; align-items:baseline; gap:5px;
  padding:3px 10px;
  background:rgba(0,0,0,0.30);
  border:1.5px solid #ffd166;
  border-radius:999px;
  line-height:1;
}
.arena-count-num{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:900; font-size:13px; color:#ffd166;
  font-variant-numeric:tabular-nums;
}
.arena-count-lbl{
  font-size:9px; letter-spacing:0.14em;
  color:#88909a; font-weight:700;
}

/* Stage — 5 seats in a horizontal row above a centered clock.
   Was absolute-positioned in an arc; switched to grid so it never
   overlaps when the column is narrow and stays robust at any width. */
.arena-stage{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  margin:4px 0;
  padding:4px 0;
}
.arena-seats{
  list-style:none; padding:0; margin:0;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:6px;
  width:100%;
}
.arena-seats > li{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px 8px;
  min-width:0;          /* let grid track shrink */
  background:linear-gradient(180deg, #232932 0%, #181c23 100%);
  border:1.5px solid #2c3340;
  border-radius:10px;
  font-size:12px; color:#c8cfd8;
  text-align:center;
  transition:transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.arena-seats > li.you{
  border-color:#ff8a3d;
  background:linear-gradient(180deg, rgba(255,138,61,0.18) 0%, #181c23 100%);
  box-shadow:0 0 0 2px rgba(255,138,61,0.18), 0 4px 12px -6px rgba(255,138,61,0.40);
  transform:translateY(-2px);
}
.arena-seats > li.ready{
  border-color:#ffd166;
  background:linear-gradient(180deg, rgba(255,209,102,0.16) 0%, #181c23 100%);
  box-shadow:0 0 0 2px rgba(255,209,102,0.18);
}
.arena-seats > li.pending{ opacity:0.55; filter:grayscale(0.4); }
.arena-seats > li .role-tag,
.arena-seats > li .farmer-tag{
  font-size:9px; letter-spacing:0.10em; color:#88909a;
  text-transform:uppercase; font-weight:700;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.arena-seats > li .nm{
  font-weight:800; font-size:12px; color:#fff;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.arena-seats > li .ready-tag{
  font-size:9.5px; letter-spacing:0.08em; color:#ffd166; font-weight:800;
  white-space:nowrap;
}
.arena-seats > li .waiting-tag{
  font-size:9.5px; letter-spacing:0.08em; color:#88909a; font-style:italic;
  white-space:nowrap;
}
/* HIDE the farmer row — bunnies-only on stage. The grid auto-collapses
   the empty cell. */
.arena-seats > li.farmer{ display:none; }

/* Center clock — golden heartbeat below the seats. */
.arena-clock{
  width:180px; padding:10px 14px;
  background:linear-gradient(180deg, rgba(255,209,102,0.14) 0%, rgba(255,138,61,0.08) 100%);
  border:1.5px solid #ffd166;
  border-radius:12px;
  text-align:center;
  box-shadow:0 0 18px -6px rgba(255,209,102,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
}
.arena-clock-num{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:900; font-size:32px; line-height:1;
  color:#ffd166;
  text-shadow:0 0 10px rgba(255,209,102,0.40);
  font-variant-numeric:tabular-nums;
}
.arena-clock-lbl{
  margin-top:3px;
  font-size:9.5px; letter-spacing:0.18em;
  color:#fcd34d; font-weight:800;
}
.arena-clock-bar{
  height:3px; margin-top:7px;
  background:rgba(255,209,102,0.12);
  border-radius:2px; overflow:hidden;
}
.arena-clock-bar-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, #ffd166 0%, #ff8a3d 100%);
  transition:width 0.3s linear;
}

.arena-role-picker{
  margin:6px 0 0; padding:5px 10px;
  background:rgba(0,0,0,0.25);
  border:1px dashed #2c3340;
  border-radius:8px;
  font-size:11.5px; color:#88909a;
}
.arena-role-picker:has(.lobby-roles:empty){ display:none; }

/* Big primary action band */
.arena-actions{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; margin-top:8px;
  background:linear-gradient(180deg, rgba(255,209,102,0.06) 0%, rgba(0,0,0,0) 100%);
  border:1px solid #2c3340;
  border-radius:10px;
}

/* PLAY NOW — primary one-click "get me into a match" button. */
.play-now-btn{
  display:block; width:100%;
  margin:10px 0 4px;
  background:linear-gradient(180deg,#6dd76d 0%,#3b9e3b 100%);
  color:#0d2a0d;
  border:none; border-radius:999px;
  padding:16px 28px;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:900; font-size:17px; letter-spacing:0.1em;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(59,122,53,0.42);
  transition:filter 0.15s ease, transform 0.1s ease;
}
.play-now-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.play-now-btn:active{ transform:translateY(0); }
.play-now-btn:disabled{ background:#2a2f3a; color:#667; cursor:not-allowed; box-shadow:none; }
.play-now-status{
  min-height:1.3em;
  margin:4px 8px 8px;
  text-align:center;
  color:#aeb7c5;
  font-size:12px;
  font-weight:650;
}
.play-now-status.is-starting{ color:#ffd166; }
.play-now-status.is-error{ color:#ffb4b4; }
.role-picker-opt{ font-weight:600; font-size:11px; opacity:0.6; letter-spacing:0; }

/* GUEST MODE — strip the lobby down to just PLAY NOW. Signed-in accounts get
   the full experience (seats, Survive Queue, roles, Loadout, Library).
   ⚠️ The Main/Private tab rail used to be in this list, and that is how a
   guest lost every route to Private Lobby — i.e. the only way to play with
   a friend. A guest with a 4-letter room code is exactly who that pane is
   for, and joining one clears `bh-guest` anyway (see renderLobby: the strip
   is public-lobby only). The rail stays.
   `.arena-pick-hint` is in the list because `.arena-stage` is: the hint
   says "Tap a seat above" and for a guest there are no seats above it. */
#lobby-body.bh-guest #queue-rail,
#lobby-body.bh-guest .arena-header,
#lobby-body.bh-guest .arena-stage,
#lobby-body.bh-guest .arena-pick-hint,
#lobby-body.bh-guest #countdown-wrap,
#lobby-body.bh-guest .arena-role-picker,
#lobby-body.bh-guest .arena-actions,
#lobby-body.bh-guest #ready-timer-row,
#lobby-body.bh-guest .arena-feed { display:none !important; }
#lobby-body.bh-guest .arena { border:none; background:none; padding:0; min-height:0; }
#lobby-body.bh-guest .lobby-shell { display:block; }
#lobby-body.bh-guest .play-now-btn { margin:6px 0; font-size:19px; padding:18px; }
/* Follow the active tab like everyone else. This was pinned to the Main
   pane so a stored Loadout/Library/Private tab could not strand a guest on
   a pane whose tab button was hidden — but with the rail visible the tab IS
   reachable, and bhSetLobbyTab already redirects the parked ones to Main. */
#lobby-body.bh-guest .lobby-pane { display:none !important; }
#lobby-body.bh-guest .lobby-pane.active { display:block !important; }
/* Hide the tier/queue banner for guests (lives outside #lobby-body). */
#lobby-card.bh-guest #tier-banner { display:none !important; }
/* The rail in guest mode. `.lobby-shell` is display:block here, so the
   desktop 160px vertical sidebar became a narrow stack floating off to
   the left of an otherwise centred immersive column — it read as broken.
   Guest mode has no sidebar to be part of: make it a segmented control
   the width of the floating card, the same shape phones get. */
#lobby-body.bh-guest #lobby-tabs.lobby-tabs.lobby-tabs-vertical{
  flex-direction:row; width:auto;
  margin:0 0 10px;
  padding:4px; gap:4px; border-radius:12px;
  background:linear-gradient(180deg, rgba(40,30,55,0.72), rgba(20,16,34,0.68));
}
#lobby-body.bh-guest #lobby-tabs.lobby-tabs.lobby-tabs-vertical > .lobby-tab{
  flex:1 1 0; justify-content:center; text-align:center;
}
#lobby-body.bh-guest #lobby-tabs.lobby-tabs > .lobby-tab.active{
  transform:none; box-shadow:0 2px 0 #4a6fb8, inset 0 1px 0 rgba(255,255,255,0.10);
}
/* Centre the connect pill under the title — left-aligned it sat directly
   below the ⌂ button in this layout. */
#lobby-card.bh-guest > #connect-status{ display:block; width:fit-content; margin:0 auto 10px; }

/* IMMERSIVE GUEST LOBBY — float the title + PLAY NOW low over the 3D scene,
   no card chrome. The live moonlit field + idle bunny show behind it. */
#lobby-card.bh-guest{
  background:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border:none !important; box-shadow:none !important;
  align-self:flex-end;
  margin-bottom:7vh;
  max-width:580px; width:92%;
  padding:0 !important;
}
#lobby-card.bh-guest h1{
  text-shadow:0 3px 24px rgba(0,0,0,0.92), 0 1px 3px rgba(0,0,0,0.85);
}
#lobby-card.bh-guest #connect-status{ text-shadow:0 2px 12px rgba(0,0,0,0.9); }
/* Account: keep the glass panel, just a touch more transparent over the scene. */
#lobby-card:not(.bh-guest){
  background: linear-gradient(180deg, rgba(34,28,18,0.40) 0%, rgba(18,12,8,0.52) 100%) !important;
}
.arena-ready{
  flex:1 1 180px;
  font-size:14px;
}
.arena-ready-count{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:800; font-size:12px; letter-spacing:0.04em;
  color:#ffd166;
  padding:4px 10px;
  background:rgba(255,209,102,0.10);
  border:1.5px solid rgba(255,209,102,0.35);
  border-radius:999px;
  white-space:nowrap;
}
.arena-start{ flex:1 1 180px; }
.arena-leave{ font-size:12px; }

/* Activity feed — 4 most-recent events scroll bottom→top */
.arena-feed{
  display:flex; align-items:center; gap:8px;
  margin-top:8px; padding:5px 10px;
  background:rgba(0,0,0,0.30);
  border:1px solid #2c3340;
  border-radius:8px;
  font-size:11px; color:#99a3b0;
  min-height:26px;
}
.arena-feed-icon{ font-size:12px; line-height:1; flex:none; opacity:0.6; }
.arena-feed-list{
  list-style:none; padding:0; margin:0;
  display:flex; gap:12px; flex-wrap:wrap;
  flex:1; min-width:0;
}
.arena-feed-list li{
  display:inline-flex; align-items:center; gap:4px;
  padding:1px 0;
  animation:arenaFeedIn 0.30s ease-out;
}
.arena-feed-list li.arena-feed-empty{ font-style:italic; color:#88909a; }
.arena-feed-list li.feed-join{ color:#ffd166; }
.arena-feed-list li.feed-leave{ color:#ff8a3d; }
.arena-feed-list li.feed-match{ color:#86efac; }
@keyframes arenaFeedIn{
  from{ opacity:0; transform:translateY(3px); }
  to  { opacity:1; transform:none; }
}

/* ────── Queue Rail — the Survive Queue's own column on the right ── */
/* (.lobby-shell grid is defined above; queue-rail occupies the 3rd column.) */
.queue-rail{
  display:flex; flex-direction:column; gap:7px;
  padding:10px 10px;
  background:linear-gradient(180deg, #20262f 0%, #181c23 100%);
  border:1.5px solid #2c3340;
  border-radius:12px;
  /* sticky disabled — #lobby-card has overflow-y:auto which makes
     sticky behave oddly. Fixed-flow within the grid cell is fine. */
}
.queue-rail-head{
  display:flex; align-items:center; gap:7px;
  padding-bottom:7px;
  border-bottom:1.5px dashed #2c3340;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:800; font-size:12.5px; letter-spacing:0.04em;
  color:#ffd166;
}
.queue-rail-icon{ font-size:13px; line-height:1; }
.queue-rail-title{ flex:1; }
.queue-rail-count{
  padding:1px 8px;
  background:rgba(255,209,102,0.12); color:#ffd166;
  border:1px solid rgba(255,209,102,0.40); border-radius:999px;
  font-variant-numeric:tabular-nums; font-size:11px;
}
.queue-rail-clock{
  display:flex; align-items:center; gap:6px;
  padding:4px 8px;
  font-size:10.5px; color:#99a3b0;
  background:rgba(0,0,0,0.30);
  border-radius:8px;
}
.queue-rail-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:3px;
  font-size:11.5px;
  max-height:280px; overflow-y:auto;
  scrollbar-width:thin;
}
.queue-rail-list li{
  display:flex; align-items:center; gap:6px;
  padding:5px 8px;
  background:rgba(0,0,0,0.30); color:#c8cfd8;
  border-radius:6px;
  border-left:3px solid #4a5568;
}
.queue-rail-list li.queued{ border-left-color:#ffb84d; color:#ffd9a8; }
.queue-rail-list li.you{ border-left-color:#ff6b35; color:#ffd2bd; font-weight:700; }
.queue-rail-list li.queue-empty{
  color:#667; font-style:italic;
  background:rgba(0,0,0,0.18);
  border-left-color:transparent;
  text-align:center; padding:10px 8px;
}
.queue-rail-list li .pos{
  font-weight:800; color:#ffb84d; min-width:22px; font-size:10px;
}
.queue-rail-list li .nm{
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.queue-rail-self{ padding:8px 10px; }
.queue-rail-self .sub-status{ font-size:11.5px; }
.queue-rail-self .sub-action-row{ margin-top:6px; display:flex; gap:6px; }
.queue-rail-self .sub-action-row button{ flex:1; font-size:11px; padding:6px 8px; }
.queue-rail-self .sub-foot{ font-size:10.5px; color:#7a839e; margin-top:6px; line-height:1.4; }
.queue-rail-spectate{ padding:8px 10px; }

/* "Skip the wait?" — anyone in the queue can hop straight to a
   Public-Host Private Lobby instead of waiting for a public seat. */
.queue-rail-private-cta{
  display:flex; align-items:center; gap:10px;
  margin-top:8px; padding:9px 12px;
  font:inherit;
  color:#cfe898;
  background:linear-gradient(135deg, rgba(34,197,94,0.20) 0%, rgba(22,163,74,0.10) 100%);
  border:1.5px solid rgba(34,197,94,0.45);
  border-radius:10px;
  cursor:pointer;
  text-align:left;
  transition:transform 0.10s ease, background 0.15s ease, border-color 0.15s ease;
}
.queue-rail-private-cta:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg, rgba(34,197,94,0.30) 0%, rgba(22,163,74,0.18) 100%);
  border-color:#22c55e;
}
.queue-rail-private-cta .qrpc-emoji{
  font-size:18px; line-height:1; flex:none;
}
.queue-rail-private-cta .qrpc-text{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:2px;
  font-size:11.5px; line-height:1.35;
}
.queue-rail-private-cta .qrpc-text b{ color:#86efac; font-size:12px; }
.queue-rail-private-cta .qrpc-sub{ color:#cfe898; font-weight:600; }
.queue-rail-private-cta .qrpc-sub #queue-rail-private-count{
  color:#fff; font-weight:900;
  background:rgba(34,197,94,0.30);
  padding:0 6px; border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.queue-rail-private-cta .qrpc-arrow{
  font-size:16px; color:#86efac; font-weight:900;
  flex:none;
  transition:transform 0.18s ease;
}
.queue-rail-private-cta:hover .qrpc-arrow{ transform:translateX(3px); }

/* Mobile breakpoint — stack vertically */
@media (max-width: 960px){
  .lobby-shell{ grid-template-columns:auto minmax(0, 1fr); }
  .queue-rail{ grid-column:1 / -1; margin-top:6px; }
  .queue-rail-list{ max-height:160px; }
}
@media (max-width: 720px){
  .lobby-shell{ grid-template-columns:1fr; }
  .arena-seats > li{ padding:6px 4px; font-size:11px; }
  .arena-seats > li .nm{ font-size:11px; }
  .arena-clock{ width:150px; padding:7px 10px; }
  .arena-clock-num{ font-size:24px; }
}

/* ── Main-pane "you're in a private room" redirect notice ──────────
   Shown in Main Lobby tab when the user is connected to a private
   room. The Main tab is PUBLIC ONLY — all private gameplay UI lives
   in the Private Lobby tab. This notice nudges the user there. */
.ml-private-redirect{
  text-align:center;
  padding:48px 24px;
  background:linear-gradient(180deg, #20262f 0%, #181c23 100%);
  border:1.5px solid #2c3340;
  border-radius:14px;
}
.ml-private-redirect-icon{
  font-size:48px; line-height:1;
  margin-bottom:14px;
  filter:drop-shadow(0 4px 8px rgba(255,209,102,0.30));
}
.ml-private-redirect-h{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:800; font-size:1.35rem; letter-spacing:-0.01em;
  color:#ffd166;
  margin:0 0 10px;
}
.ml-private-redirect-h code{
  display:inline-block; margin-left:6px;
  padding:1px 10px;
  font-family:inherit;
  font-weight:900; font-size:1rem; letter-spacing:0.18em;
  color:#1a1f28; background:#ffd166;
  border:1.5px dashed #b45309; border-radius:6px;
  vertical-align:middle;
  font-variant-numeric:tabular-nums;
}
.ml-private-redirect-sub{
  font-size:13.5px; line-height:1.55; color:#bcc8e0;
  margin:0 auto 22px; max-width:480px;
}
.ml-private-redirect-sub b{ color:#ffd166; }
.ml-private-redirect-cta{
  display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap;
  justify-content:center;
}
.ml-private-redirect-go{
  padding:12px 22px;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:900; font-size:14px; letter-spacing:0.04em;
  color:#1a1f28;
  background:linear-gradient(180deg, #ffd166 0%, #ff8a3d 100%);
  border:1.5px solid #b45309;
  border-radius:10px;
  cursor:pointer;
  box-shadow:0 4px 0 #b45309;
  transition:transform 0.10s ease;
}
.ml-private-redirect-go:hover{ transform:translateY(-1px); }
.ml-private-redirect-leave{
  padding:11px 18px;
  font-size:12.5px; font-weight:700;
  text-decoration:none; color:#bcc8e0;
  background:transparent;
  border:1px solid rgba(168,216,255,0.30);
  border-radius:10px;
  transition:color 0.15s ease, border-color 0.15s ease;
}
.ml-private-redirect-leave:hover{ color:#fff; border-color:#a8d8ff; }

/* ── Private-mode action band (Ready/Start/Leave) ─────────────────── */
.ml-private-action-band{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:14px; padding:12px 14px;
  background:linear-gradient(180deg, rgba(255,209,102,0.08) 0%, rgba(0,0,0,0) 100%);
  border:1px solid #2c3340;
  border-radius:10px;
}
.ml-private-action-band #ready-btn-private{
  flex:1 1 180px;
}
.ml-private-action-band .bh-private-start{
  flex:1 1 200px;
}
.ml-private-action-band .bh-private-leave{
  padding:10px 18px; font:inherit; font-weight:700; font-size:12.5px;
  text-decoration:none; color:#bcc8e0;
  background:transparent;
  border:1px solid rgba(168,216,255,0.30); border-radius:10px;
  transition:color 0.15s ease, border-color 0.15s ease;
}
.ml-private-action-band .bh-private-leave:hover{
  color:#fff; border-color:#a8d8ff;
}

/* Private-mode match clock — sits between Setup and Joined Players */
.bh-priv-clock{
  margin:14px auto;
  width:200px; padding:12px 16px;
  background:linear-gradient(180deg, rgba(255,209,102,0.16) 0%, rgba(255,138,61,0.08) 100%);
  border:1.5px solid #ffd166;
  border-radius:12px;
  text-align:center;
  box-shadow:0 0 18px -6px rgba(255,209,102,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
}
.bh-priv-clock-num{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:900; font-size:32px; line-height:1;
  color:#ffd166;
  text-shadow:0 0 10px rgba(255,209,102,0.40);
  font-variant-numeric:tabular-nums;
}
.bh-priv-clock-lbl{
  margin-top:3px;
  font-size:9.5px; letter-spacing:0.18em;
  color:#fcd34d; font-weight:800;
}
.bh-priv-clock-bar{
  height:3px; margin-top:7px;
  background:rgba(255,209,102,0.12);
  border-radius:2px; overflow:hidden;
}
.bh-priv-clock-bar-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, #ffd166 0%, #ff8a3d 100%);
  transition:width 0.3s linear;
}

/* Joined-players ready chip — appears next to the count chip */
.bh-joined-ready{
  margin-left:10px;
  padding:3px 10px;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:800; font-size:11px; letter-spacing:0.04em;
  color:#86efac;
  background:rgba(34,197,94,0.10);
  border:1px solid rgba(34,197,94,0.32);
  border-radius:999px;
  font-variant-numeric:tabular-nums;
}

/* ── Mode-hint banner — sits at the top of the Main Lobby pane so the
     public/private split is unmistakable on first glance. */
.ml-mode-hint{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; margin-bottom:14px;
  border-radius:12px;
  font-size:13px; line-height:1.5;
}
.ml-mode-hint .ml-mode-hint-icon{ font-size:22px; line-height:1; flex:none; }
.ml-mode-hint .ml-mode-hint-text{ flex:1; color:#bcc8e0; }
.ml-mode-hint .ml-mode-hint-text b{ color:#ffd166; }
.ml-mode-hint-public{
  background:linear-gradient(180deg, rgba(34,197,94,0.18) 0%, rgba(22,163,74,0.10) 100%);
  border:1.5px solid rgba(34,197,94,0.45);
  border-left:4px solid #22c55e;
}
.ml-mode-hint-public .ml-mode-hint-text b{ color:#86efac; }
.ml-mode-hint-private{
  background:linear-gradient(180deg, rgba(255,209,102,0.18) 0%, rgba(245,158,11,0.10) 100%);
  border:1.5px solid rgba(255,209,102,0.45);
  border-left:4px solid #ffd166;
}

/* ── Main Lobby — public/private mode swap (Survive List → Setup) ─ */
/* Mode-aware UI uses [data-mode-only="public|private"] sprinkled
   through the Main + Private panes; #lobby-body[data-mode] is the
   single source of truth, set by paintBhMainMode. */
#lobby-body[data-mode="public"]  [data-mode-only="private"] { display:none; }
#lobby-body[data-mode="private"] [data-mode-only="public"]  { display:none; }

/* Inline Survive Queue inside Main pane (was a separate tab). */
.ml-queue-inline{
  margin-top:14px; padding:12px 14px;
  background:rgba(40,30,55,0.45);
  border:1.5px solid rgba(168,216,255,0.18);
  border-radius:12px;
}
/* Sub-self-card already had its own styling; tighten its sub-status line
   so it sits cleanly under the queue list instead of feeling like a
   second column. */
.ml-queue-inline #sub-self-card{ margin-top:8px; padding:8px 10px; }
.ml-queue-inline #sub-status,
.ml-queue-inline .sub-status{ font-size:12px; }
.ml-queue-inline #sub-spectate-cta{ margin-top:8px; }
.ml-queue-head{
  display:flex; align-items:center; gap:8px;
  margin-bottom:8px;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:800; font-size:13px; color:#a8d8ff;
  letter-spacing:0.04em;
}
.ml-queue-head .ml-queue-title{ flex:1; }

/* Private Lobbies browser (Create + Join + listed rooms) */
.ml-private-browser{
  padding:14px 16px;
  background:rgba(40,30,55,0.55);
  border:1.5px solid rgba(168,216,255,0.20);
  border-radius:14px;
}

/* Setup section (private mode) */
.ml-setup{
  padding:14px 16px;
  background:rgba(255,250,235,0.06);
  border:1.5px solid rgba(255,209,102,0.30);
  border-left:4px solid #ffd166;
  border-radius:12px;
}
.ml-setup .section-head .section-icon{ font-size:22px; }
.ml-setup-code{
  display:inline-block; margin-left:8px;
  padding:2px 12px;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:900; font-size:18px; letter-spacing:0.18em;
  background:#fff;
  color:#3a2e1e;
  border:1.5px dashed #a86d00; border-radius:8px;
  font-variant-numeric:tabular-nums;
}
.ml-setup .section-count{
  background:rgba(255,209,102,0.20); color:#7a4d10;
  border:1.5px solid #a86d00;
  font-weight:800;
}

/* Joined Players section (private mode) */
.ml-joined{
  padding:14px 16px;
  background:rgba(40,30,55,0.55);
  border:1.5px solid rgba(168,216,255,0.20);
  border-radius:12px;
}
.ml-joined .section-head .section-icon{ font-size:20px; }

/* Start Match action row */
.ml-private-action-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(132,204,22,0.10) 0%, rgba(34,197,94,0.06) 100%);
  border:1.5px solid rgba(34,197,94,0.30);
  border-radius:12px;
}
.bh-private-start{
  flex:1 1 220px;
  padding:14px 22px;
  font:inherit; font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:900; font-size:16px; letter-spacing:0.04em;
  color:#fff; cursor:pointer;
  background:linear-gradient(180deg, #4ade80 0%, #22c55e 60%, #16a34a 100%);
  border:2px solid #166534;
  border-radius:12px;
  box-shadow:0 4px 0 #166534, 0 8px 18px -8px rgba(22,163,74,0.5);
  transition:transform 0.10s ease, box-shadow 0.15s ease;
  text-shadow:0 1px 1px rgba(0,0,0,0.20);
}
.bh-private-start:not(:disabled):hover{
  transform:translateY(-1px);
  box-shadow:0 5px 0 #166534, 0 10px 22px -8px rgba(22,163,74,0.6);
}
.bh-private-start:disabled{ filter:grayscale(0.5); }
.bh-private-leave{
  padding:10px 16px; font:inherit; font-weight:700; font-size:13px;
  text-decoration:none; color:#bcc8e0;
  background:transparent;
  border:1px solid rgba(168,216,255,0.30); border-radius:10px;
  transition:color 0.15s ease, border-color 0.15s ease;
}
.bh-private-leave:hover{ color:#fff; border-color:#a8d8ff; }
.ml-private-foot{
  padding:10px 14px;
  font-size:12px; line-height:1.55; color:#bcc8e0;
  background:rgba(40,30,55,0.40);
  border:1px dashed rgba(168,216,255,0.18);
  border-radius:8px;
}
.ml-private-foot b{ color:#ffd166; }

/* Lock icon chip in custom-lobbies row */
.bh-cl-row-lock{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:rgba(132,204,22,0.18);
  border:1.5px solid #365314;
  font-size:14px; line-height:1;
  flex-shrink:0;
}

/* ── Ping latency badge + host kick + auto-kick panel ───────────── */
.bh-ping{
  display:inline-block; margin-left:8px;
  padding:2px 8px; font-size:11px; font-weight:800; letter-spacing:0.04em;
  border:1.5px solid; border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.bh-ping-green   { color:#0f3a14; background:rgba(34,197,94,0.18);  border-color:#166534; }
.bh-ping-amber   { color:#7a4d10; background:rgba(245,158,11,0.20); border-color:#a86d00; }
.bh-ping-red     { color:#7a1d1d; background:rgba(239, 68, 68,0.18); border-color:#991b1b; }
.bh-ping-unknown { color:#5e4a2e; background:rgba(91,58,26,0.10);    border-color:rgba(91,58,26,0.45); }
.bh-row-kick{
  margin-left:6px; padding:2px 9px;
  font:inherit; font-weight:900; font-size:12px; cursor:pointer; color:#fff;
  background:linear-gradient(180deg,#ef4444 0%,#b91c1c 100%);
  border:1.5px solid #7f1d1d; border-radius:999px;
  box-shadow:0 2px 0 #7f1d1d;
}
.bh-row-kick:hover{ transform:translateY(-1px); }
.bh-room-autokick-row{
  margin-top:10px; padding:10px 12px;
  background:rgba(255,250,235,0.65);
  border:1.5px dashed #b8350b; border-radius:10px;
  color:#5b3206;
}
.bh-room-autokick-head{
  font-weight:900; font-size:13px; letter-spacing:0.02em;
  color:#7a1d1d; margin-bottom:6px;
}
.bh-room-autokick-input{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; color:#3a2e1e;
}
.bh-room-autokick-input input{
  width:90px; padding:5px 8px; font:inherit; font-weight:800;
  background:#fff; color:#3a2e1e;
  border:1.5px solid #a86d00; border-radius:8px;
  font-variant-numeric:tabular-nums;
}
.bh-room-autokick-state{
  margin-top:6px; font-size:11.5px; color:#5e4a2e; line-height:1.45;
}
/* ── Lock / Unlock pill (room visibility) ─────────────────────────
   Replaces the old "List my room publicly" checkbox. Red 🔒 LOCKED
   when code-only; green 🔓 PUBLIC HOST when listed in the browser.
   Click the pill to flip — server enforces host-only. */
.bh-room-listed-head{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:900; font-size:13px; letter-spacing:0.02em;
  color:#ffd166; margin-bottom:8px;
}
.bh-room-listed-row-body{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.lock-toggle{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px 8px 12px;
  font:inherit; font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:900; font-size:13px; letter-spacing:0.10em;
  color:#fff; cursor:pointer;
  border:1.5px solid; border-radius:999px;
  transition:transform 0.10s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-shadow:0 1px 1px rgba(0,0,0,0.22);
  flex:none;
}
.lock-toggle:hover{ transform:translateY(-1px); }
.lock-toggle .lock-toggle-icon{ font-size:16px; line-height:1; }
.lock-toggle.locked{
  background:linear-gradient(180deg, #fb7185 0%, #ef4444 60%, #b91c1c 100%);
  border-color:#7f1d1d;
  box-shadow:0 3px 0 #7f1d1d;
}
.lock-toggle.unlocked{
  background:linear-gradient(180deg, #4ade80 0%, #22c55e 60%, #16a34a 100%);
  border-color:#166534;
  box-shadow:0 3px 0 #166534;
}

/* ON/OFF toggle pill — see WP styles.css for design notes. */
.autokick-toggle{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px 5px 7px;
  font:inherit; font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:900; font-size:12px; letter-spacing:0.08em;
  color:#fff; cursor:pointer;
  border:1.5px solid; border-radius:999px;
  transition:background 0.15s ease, border-color 0.15s ease, transform 0.10s ease, box-shadow 0.15s ease;
  text-shadow:0 1px 1px rgba(0,0,0,0.20);
}
.autokick-toggle:hover{ transform:translateY(-1px); }
.autokick-toggle .autokick-toggle-dot{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  background:#fff;
  box-shadow:inset 0 -1px 2px rgba(0,0,0,0.18);
  transition:transform 0.18s ease;
}
.autokick-toggle.on{
  background:linear-gradient(180deg, #4ade80 0%, #22c55e 60%, #16a34a 100%);
  border-color:#166534;
  box-shadow:0 2px 0 #166534;
}
.autokick-toggle.off{
  background:linear-gradient(180deg, #fb7185 0%, #ef4444 60%, #b91c1c 100%);
  border-color:#7f1d1d;
  box-shadow:0 2px 0 #7f1d1d;
}
.autokick-toggle.off .autokick-toggle-dot{ background:#ffe5e5; }
.autokick-toggle .autokick-toggle-label{ font-variant-numeric:tabular-nums; }


/* ── Home ⇄ Lobby gate ──────────────────────────────────────────────────────
   The page opens on "Home": just the 3D scene + side tools. The lobby panel is
   hidden until the player presses the "Lobby" button under the rabbit. A small
   "← Home" pill (shown while the lobby is open) returns to Home. Driven by the
   `bh-home` class on <body> (set by the inline script in index.html). */
body.bh-home #lobby { display: none !important; }

/* Big inviting "Lobby" button, centred under the rabbit. Only on Home. */
#bh-open-lobby {
  display: none;
  position: fixed;
  left: 50%; top: 72%;
  transform: translateX(-50%);
  z-index: 30;
  align-items: center; gap: 12px;
  padding: 16px 34px;
  border: 1.5px solid #ffd166;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd166 0%, #ff8a3d 100%);
  color: #2a1606;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 20px; letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 14px 34px -10px rgba(255,138,61,0.55), 0 0 0 6px rgba(255,209,102,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  animation: bh-lobby-pulse 2.4s ease-in-out infinite;
}
body.bh-in-lobby.bh-home #bh-open-lobby { display: inline-flex; }
#bh-open-lobby:hover { transform: translateX(-50%) translateY(-2px); filter: brightness(1.05); box-shadow: 0 18px 42px -10px rgba(255,138,61,0.65), 0 0 0 8px rgba(255,209,102,0.12); }
#bh-open-lobby:active { transform: translateX(-50%) translateY(0); }
#bh-open-lobby .bh-open-lobby-ico { font-size: 24px; line-height: 1; }
@keyframes bh-lobby-pulse {
  0%, 100% { box-shadow: 0 14px 34px -10px rgba(255,138,61,0.55), 0 0 0 6px rgba(255,209,102,0.08); }
  50%      { box-shadow: 0 14px 34px -10px rgba(255,138,61,0.55), 0 0 0 12px rgba(255,209,102,0.16); }
}
@media (prefers-reduced-motion: reduce) { #bh-open-lobby { animation: none; } }

/* Home icon — pinned to the top-left of the lobby card (#lobby-card is
   position:relative), only while the lobby panel is open. */
#bh-go-home {
  display: none;
  position: absolute;
  top: 14px; left: 16px;
  z-index: 6;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border: 1px solid var(--pt-hairline, rgba(255,255,255,0.14));
  border-radius: 10px;
  background: rgba(11,9,24,0.5);
  color: var(--pt-dim, #cfc6f3);
  cursor: pointer;
  transition: all 0.15s ease;
}
body.bh-in-lobby:not(.bh-home) #bh-go-home { display: inline-flex; }
#bh-go-home:hover { color: #fff; border-color: rgba(255,255,255,0.28); background: rgba(11,9,24,0.78); }
#bh-go-home svg { display: block; }
@media (max-width: 560px) {
  #bh-open-lobby { font-size: 18px; padding: 14px 26px; }
}

/* ── Tap-a-seat role picker + clash notice ──────────────────────────────────
   The seat boxes are now the role picker (the old button row is hidden). The
   clash notice sits just above PLAY NOW and blocks it while shown. */
.arena-seats .lobby-player-row.bh-seat {
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.arena-seats .lobby-player-row.bh-seat:hover {
  border-color: #ffd166;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -10px rgba(255,209,102,0.45);
}
.arena-pick-hint {
  text-align: center; margin: 12px 0 0;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: #cfc6f3; opacity: 0.72;
}
.bh-role-clash {
  margin: 12px auto 0; max-width: 680px;
  text-align: center; font-weight: 700; font-size: 13.5px;
  color: #ffb4b4;
  background: rgba(220,38,38,0.12);
  border: 1px solid rgba(248,113,113,0.45);
  border-radius: 10px; padding: 9px 14px;
}
.play-now-btn.is-clash-blocked {
  pointer-events: none;
  opacity: 0.5;
  filter: grayscale(0.4);
}

/* ── Fullscreen toggle — top-right of the home/lobby screen ──────────────────
   Mirrors #back-home (top-left). Only while the lobby/home is up. */
#bh-fullscreen {
  display: none;
  position: fixed;
  top: 18px; right: 18px;
  z-index: 40;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  background: rgba(11,9,24,0.6);
  color: #cfc6f3;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
body.bh-in-lobby #bh-fullscreen { display: inline-flex; }
#bh-fullscreen:hover { color: #fff; border-color: rgba(255,255,255,0.3); background: rgba(11,9,24,0.85); transform: translateY(-1px); }
#bh-fullscreen svg { width: 19px; height: 19px; display: block; }

/* Private-room open seats — clearly joinable, no fake names. */
.arena-seats .lobby-player-row.bh-seat-open{
  border-style:dashed;
  border-color:rgba(255,209,102,0.45);
  background:rgba(255,209,102,0.04);
}
.arena-seats .lobby-player-row.bh-seat-open:hover{ border-color:#ffd166; background:rgba(255,209,102,0.10); }
.arena-seats .lobby-player-row.bh-seat-open .bh-seat-open-nm{ color:#9aa3b5; font-style:italic; font-weight:600; }
.arena-seats .lobby-player-row.bh-seat-open .waiting-tag{ color:#ffd166; font-weight:700; }

/* Render wake / first-connect wait — looks like matchmaking, not a server error. */
.match-wait{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  padding-bottom:max(20px, env(safe-area-inset-bottom));
  background:rgba(4,6,4,0.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:auto;
}
.match-wait.hidden{ display:none; }
.match-wait-card{
  position:relative;
  width:min(22rem, 100%);
  text-align:center;
  padding:28px 22px 24px;
  border-radius:20px;
  background:rgba(20,14,40,0.94);
  border:1px solid rgba(255,209,102,0.28);
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
  color:#f4f1e8;
}
.match-wait-close{
  position:absolute; top:8px; right:8px;
  width:44px; height:44px;
  border:0; border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:#f4f1e8;
  font-size:18px; line-height:1;
  cursor:pointer;
  pointer-events:auto;
}
.match-wait-close:hover{ background:rgba(255,255,255,0.16); }
.match-wait-card h2{
  margin:0 0 8px;
  font-size:clamp(1.1rem, 4.2vw, 1.35rem);
  font-weight:800;
  color:#ffd166;
  line-height:1.25;
}
.match-wait-card p{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:#c8c2b4;
}
.match-wait-spin{
  width:36px; height:36px; margin:0 auto 16px;
  border:3px solid rgba(255,209,102,0.22);
  border-top-color:#ffd166;
  border-radius:50%;
  animation:match-wait-spin 0.8s linear infinite;
}
@keyframes match-wait-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .match-wait-spin{ animation:none; border-top-color:rgba(255,209,102,0.22); background:#ffd166; }
}

/* ── MATCH SKILL PICKER (Main Lobby, above PLAY NOW) ──────────────────
   One skill per match. Sits directly above the start button so the choice
   is made in the same glance as starting, with no extra navigation. */
.bh-skill-picker{
  margin:14px 0 12px;
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(124,58,237,0.10) 0%, rgba(10,8,22,0.35) 100%);
  border:1px solid rgba(168,85,247,0.28);
}
.bh-sp-head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-bottom:10px;
}
.bh-sp-title{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:800; font-size:14px; letter-spacing:0.02em; color:#e9ddff;
}
.bh-sp-sub{ font-size:11px; font-weight:700; color:#a99bc4; letter-spacing:0.03em; }
.bh-sp-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px;
}
.bh-sp-card{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 8px;
  border-radius:12px; cursor:pointer; pointer-events:auto;
  background:rgba(12,10,26,0.72);
  border:1.5px solid rgba(255,255,255,0.10);
  color:#d8d2e6; text-align:center;
  transition:border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.bh-sp-card:hover{ border-color:rgba(168,85,247,0.55); transform:translateY(-1px); }
.bh-sp-card.active{
  border-color:#a855f7;
  background:rgba(124,58,237,0.22);
  color:#fff;
  box-shadow:0 0 0 1px rgba(168,85,247,0.35), 0 8px 20px -12px rgba(124,58,237,0.9);
}
.bh-sp-emoji{ font-size:20px; line-height:1; }
.bh-sp-name{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:800; font-size:12px; letter-spacing:0.02em;
}
.bh-sp-desc{ font-size:10px; line-height:1.35; color:#a99bc4; }
.bh-sp-card.active .bh-sp-desc{ color:#d3c6ec; }
@media (max-width:560px){
  .bh-sp-grid{ gap:6px; }
  .bh-sp-card{ padding:8px 5px; }
  .bh-sp-desc{ display:none; }   /* name + emoji carry it on small screens */
}

/* In-match field map — carrots, team, hunter. Hidden in the lobby. */
#bh-radar{
  position:absolute; top:58px; right:12px;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  pointer-events:none; z-index:5;
}
#bh-radar.off{ display:none; }
#minimap{
  width:148px; height:148px;
  border-radius:50%;
  /* Hairline matches #fs-btn and .bh-way — the 3px gold ring made the map
     the loudest element on screen and clashed with the warm objective pill
     directly beneath it. */
  border:2px solid rgba(255,255,255,0.16);
  background:radial-gradient(circle at 50% 42%, #1d2a19 0%, #121a10 100%);
  box-shadow:0 10px 26px -12px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.07);
}
.bh-way{
  display:flex; align-items:center; gap:6px;
  max-width:min(16rem, 46vw);
  padding:6px 10px;
  border-radius:999px;
  background:rgba(10,8,18,0.72);
  /* Warm but quiet — enough to read as "objective", not a warning banner. */
  border:1px solid rgba(255,184,116,0.28);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 20px -12px rgba(0,0,0,0.8);
  color:#f3e5d5;
  font-size:12px; font-weight:700; line-height:1.3;
  text-shadow:0 1px 2px rgba(0,0,0,0.6);
}
.bh-way-ico{ font-size:14px; }
.bh-radar-key{
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px 8px;
  max-width:148px;
  font-size:9px; font-weight:700; letter-spacing:0.04em;
  color:rgba(255,255,255,0.62);
}
@media (max-width:720px){
  #bh-radar{ top:52px; right:8px; }
  #minimap{ width:104px; height:104px; }
  .bh-way{ font-size:11px; max-width:min(12.5rem, 52vw); }
  .bh-radar-key{ display:none; }
  #teammates{ width:168px; top:52px; left:8px; }
}

@media (pointer:coarse), (max-width:900px){
  #back-home{
    top:calc(10px + env(safe-area-inset-top)) !important;
    left:calc(10px + env(safe-area-inset-left)) !important;
  }
  #topbar{ top:calc(12px + env(safe-area-inset-top)); }
  #player-status{ top:calc(52px + env(safe-area-inset-top)); }
  #bh-radar{
    top:calc(52px + env(safe-area-inset-top));
    right:calc(8px + env(safe-area-inset-right));
  }
  #teammates{
    top:calc(52px + env(safe-area-inset-top));
    left:calc(8px + env(safe-area-inset-left));
  }
}

.leave-confirm{
  position:fixed; inset:0; z-index:220;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  padding-bottom:max(20px, env(safe-area-inset-bottom));
  background:rgba(7,5,26,0.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.leave-confirm.hidden{ display:none; }
.leave-confirm-card{
  width:min(22rem, 100%);
  text-align:center;
  padding:28px 22px 22px;
  border-radius:22px;
  background:linear-gradient(180deg, #24183f 0%, #140e28 100%);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
  color:#fff;
}
.leave-confirm-card h2{
  margin:0 0 8px;
  font-family:var(--pt-display);
  font-size:clamp(1.2rem, 4.2vw, 1.45rem);
  font-weight:800;
  color:#ffd166;
}
.leave-confirm-card p{
  margin:0 0 20px;
  font-size:15px;
  line-height:1.5;
  color:#cfc8e0;
}
.leave-confirm-actions{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.leave-confirm-actions button{
  min-height:44px; min-width:8.5rem;
  padding:10px 16px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
}
#leave-confirm-stay{
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  color:#fff;
}
#leave-confirm-leave{
  border:0;
  background:#ffd166;
  color:#1a1432;
}

/* ══════════════════════════════════════════════════════════════════════
   PHONE LOBBY — fit the first screen, no scrolling to reach PLAY NOW
   ──────────────────────────────────────────────────────────────────────
   Everything above was tuned for a desktop card ~1100px wide. On a 375px
   phone the same paddings/type push the seats, the skill picker and the
   green button below the fold, so the first thing a player sees is a wall
   of chrome. This block shrinks the chrome only — nothing is removed that
   carries information, except:

   - nothing. An earlier pass hid the Main/Private tab rail on phones and
     that was wrong: the rail is how you reach Private Lobby, which is how
     you play with friends, and the fallback routes to it (the queue rail's
     "Skip the wait?" CTA) sit far below the fold on a landscape phone. The
     rail stays — it is reshaped instead, from a 160px vertical sidebar
     into a ~36px two-up segmented control across the top.
   - "· Open to Everyone" in the arena header — the 🌍 PUBLIC LOBBY chip
     right beside it already says exactly that, and dropping it keeps the
     header on one line instead of wrapping to two.
   ════════════════════════════════════════════════════════════════════ */
/* The breakpoint is NOT width alone. This game demands landscape (see
   #bh-play-gate), and a phone turned sideways is 740-930px wide — wider
   than any sane "phone" width query, and only ~400px tall. A width-only
   720px rule therefore missed the one orientation players actually use,
   which is exactly where the tab rail was still showing. Hence: narrow
   viewports, OR any touch device up to small-tablet width, OR any touch
   device that is short (landscape phone at any width). */
@media (max-width: 720px),
       (pointer: coarse) and (max-width: 1000px),
       (max-height: 560px) and (max-width: 1100px){
  /* — tab rail: a two-up segmented control, not a sidebar —
     The desktop rail is a 160px column, which on a landscape phone eats a
     fifth of the width and on a portrait phone stacks into two tall rows.
     Laid across the top it costs ~36px of height and both destinations
     stay one tap away. The .lobby-tabs-vertical selectors are matched
     exactly because the base rules use them — a plain .lobby-tab selector
     is one class short and loses. */
  .lobby-shell{ grid-template-columns:1fr; }
  #lobby-tabs.lobby-tabs.lobby-tabs-vertical{
    flex-direction:row; width:auto;
    padding:4px; gap:4px; border-radius:12px;
  }
  #lobby-tabs.lobby-tabs.lobby-tabs-vertical > .lobby-tab{
    flex:1 1 0; justify-content:center; text-align:center;
    min-height:34px; padding:7px 8px; gap:6px; font-size:12px;
  }
  /* Only two tabs are unparked, so the labels fit. The <=380px rule above
     drops them to bare emoji — fine when four tabs shared a row, but "🔒"
     alone is a guess, and this is the route to playing with friends. */
  #lobby-tabs.lobby-tabs > .lobby-tab .lt-text{ display:inline; }
  #lobby-tabs.lobby-tabs > .lobby-tab .lt-emoji{ font-size:14px; }
  /* The lift + 3px underglow reads as a misaligned row when the tabs sit
     side by side rather than stacked. */
  #lobby-tabs.lobby-tabs > .lobby-tab.active{
    transform:none; box-shadow:0 2px 0 #4a6fb8, inset 0 1px 0 rgba(255,255,255,0.10);
  }

  /* — side tools (How to play / Settings / Sound / Leaderboard) —
     They are pinned to the viewport edges, so in the lobby they sit ON TOP
     of the card on a phone — over the seats in landscape, over the queue
     rail in portrait. They belong to the Home screen (the idle bunny + the
     Lobby button), which has nothing else competing for those edges. Hidden
     for the whole time the lobby panel is open; press ⌂ to get them back. */
  body.bh-in-lobby:not(.bh-home) .lst-col{ display:none; }
  /* Same reasoning for the "← Back" pill: it is position:fixed at 18/18 and
     the card now runs to 96vw, so it lands on top of whatever the card has
     scrolled under it. The card's own ⌂ button is the in-lobby exit, and
     Back is still there on the Home screen behind it. */
  body.bh-in-lobby:not(.bh-home) #back-home{ display:none; }
  /* ⌂ takes over that freed top-left corner. As an absolute child of the
     card it sat on the "Connected" pill — worst in guest mode, where the
     card is only 92%/580px wide and centred, so the icon landed in from
     the edge and straight on top of the pill. Pinned to the viewport it
     is out of the header's way entirely and mirrors the fullscreen button
     on the right. (Fixed positioning works here because the coarse-pointer
     rules in mobile.css drop the card's backdrop-filter — a filtered
     ancestor would otherwise trap it in the card's box.) */
  #bh-go-home{
    position:fixed; top:8px; left:8px;
    width:34px; height:34px; border-radius:10px;
  }
  /* Centre the pill under the title as well, so nothing can meet in that
     corner even if the icon ever moves back. */
  #lobby-card > #connect-status{ display:block; width:fit-content; margin:0 auto 8px; }

  /* — card shell —
     With the tools gone the card no longer has to dodge the 104px gutters
     the base rule reserves for them, so it can use the full width. */
  #lobby-card{
    width:96vw;
    padding:14px 12px 18px;
    border-radius:16px;
    max-height:100vh;
  }
  #lobby-card h1{ font-size:21px; margin-bottom:6px; }
  #connect-status{ font-size:10px; padding:3px 9px; margin-bottom:8px; }
  #tier-banner{ font-size:11px; padding:6px 10px; margin-bottom:8px; line-height:1.35; }
  .account-chip{
    gap:7px; padding:5px 10px 5px 8px; margin-bottom:8px;
    font-size:11.5px; flex-wrap:wrap;
  }
  .account-chip .account-icon{ font-size:13px; }
  #name-prompt, .name-prompt{ font-size:11px; line-height:1.45; }
  .lobby-shell{ margin-top:8px; gap:8px; }

  /* — arena — */
  .arena{ padding:9px 9px 8px; border-radius:12px; }
  .arena-header{ padding:5px 8px; margin-bottom:6px; gap:6px; font-size:11px; }
  .arena-divider, .arena-mode-sub{ display:none; }
  .arena-mode-chip{ font-size:10px; padding:3px 8px; letter-spacing:0.06em; }
  .arena-count-num{ font-size:12px; }
  .arena-count-lbl{ font-size:8px; letter-spacing:0.10em; }
  .arena-stage{ gap:6px; margin:0; padding:0; }
  .arena-seats{ gap:4px; }
  .arena-seats > li{ padding:5px 2px 4px; gap:2px; }
  .arena-pick-hint{ margin:6px 0 0; font-size:10.5px; }

  /* — skill picker — */
  .bh-skill-picker{ margin:8px 0; padding:8px 9px; border-radius:12px; }
  .bh-sp-head{ margin-bottom:6px; gap:7px; }
  .bh-sp-title{ font-size:12.5px; }
  .bh-sp-sub{ font-size:10px; }
  .bh-sp-card{ padding:7px 5px; border-radius:10px; }
  .bh-sp-emoji{ font-size:17px; }
  .bh-sp-name{ font-size:11px; }

  /* — actions — */
  .play-now-btn{ margin:7px 0 2px; padding:13px 18px; font-size:15px; }
  .play-now-status{ margin:2px 4px 6px; font-size:10.5px; }
  .arena-actions{ margin-top:6px; padding:7px 8px; gap:7px; }
  .ready-btn{ padding:10px 18px; }
  .arena-ready{ flex:1 1 110px; font-size:12.5px; }
  .arena-ready-count{ font-size:11px; padding:3px 8px; }
  #ready-timer-row{ font-size:11px; margin-top:6px; min-height:14px; }

  /* — feed — */
  .arena-feed{ margin-top:6px; padding:4px 8px; font-size:10px; min-height:22px; }

  /* — survive queue rail (full width under the arena at this breakpoint) — */
  .queue-rail{ padding:8px 9px; gap:5px; }
  .queue-rail-head{ padding-bottom:5px; font-size:11.5px; }
  .queue-rail-list{ max-height:112px; font-size:11px; }
  .queue-rail-list li{ padding:4px 7px; }
}

/* Narrow phones — the seats row is 5 across; give it back every pixel. */
@media (max-width: 400px){
  #lobby-card{ padding-left:9px; padding-right:9px; }
  .arena{ padding:8px 7px 7px; }
  .arena-seats{ gap:3px; }
  .arena-seats > li{ padding:4px 1px; }
  .arena-seats > li .nm{ font-size:10px; }
  .bh-sp-grid{ gap:5px; }
}