* { 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; }

#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; }

/* 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-tap-highlight-color: transparent;
  touch-action: manipulation;
  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); }

@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; }
}

#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;
  width: min(1200px, 96vw); 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;
}
/* 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; }
.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; }
#fs-btn {
  position: fixed; top: 12px; right: 12px; z-index: 6;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.4);
  color: #fff; font-size: 18px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  pointer-events: auto;
}
#fs-btn:hover { background: rgba(0,0,0,0.75); }
#fs-btn.fs-active { background: rgba(102,217,255,0.7); color: #0d2230; }
/* 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.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. */
#lobby{
  background:
    radial-gradient(60% 50% at 18% 20%, rgba(255,184,77,0.22) 0%, rgba(255,184,77,0) 70%),
    radial-gradient(45% 50% at 82% 82%, rgba(255,107,53,0.18) 0%, rgba(255,107,53,0) 70%),
    radial-gradient(80% 90% at 50% 50%, rgba(8,8,12,0.96) 0%, rgba(0,0,0,1) 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);
}
#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;
}
#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 .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;
}
.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; }