* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  width: 100%; height: 100%;
  /* CRITICAL for iOS Safari URL-bar hide: html needs to be tall
     enough to be SCROLLABLE so window.scrollTo(0, 1) can drop the
     URL bar. min-height 101% gives just enough scroll range. */
  min-height: 101%;
}
html, body {
  width: 100%; height: 100%;
  /* DON'T use overflow:hidden + position:fixed on body — that blocks
     the scrollTo(0, 1) trick which is the ONLY reliable way to hide
     the iOS Safari URL bar without PWA install. The canvas + HUD are
     each position:fixed individually so the page itself can scroll
     a tiny amount without disturbing the game layout. */
  background: #000; font-family: system-ui, -apple-system, sans-serif; color: #fff;
  /* touch-action: none on the body still prevents zoom + multi-touch
     gestures while playing — but it does NOT block scrollTo. */
  touch-action: none;
}
/* Use 100dvh on the game container so it expands to fill the visible
   viewport AFTER the URL bar hides on mobile. Falls back to 100% on
   older browsers. */
#game, #hud {
  height: 100dvh;
}
#game { position: fixed; inset: 0; }
canvas { display: block; }

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

/* ── TOPBAR (cartoon bamboo pills) ───────────────────────────────
   Two chunky cream-and-green pills floating at the top: deliveries
   counter on the left, match timer on the right. Replaces the old
   dark glassy chips. */
#topbar {
  position: absolute; top: 16px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 14px;
  pointer-events: none;
}
.top-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 22px;
  background: linear-gradient(180deg, #fff6dc 0%, #ffe5a3 100%);
  border: 3px solid #5b3a1a;
  border-radius: 999px;
  box-shadow:
    0 5px 0 #5b3a1a,
    0 12px 24px rgba(0,0,0,0.30),
    inset 0 2px 0 rgba(255,255,255,0.85);
  font-family: var(--pt-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: #5b3a1a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}
.top-pill .top-icon { font-size: 22px; line-height: 1; }
.top-pill.timer-pill {
  background: linear-gradient(180deg, #d8f4c6 0%, #7fdc6a 100%);
  color: #2d5a18;
  border-color: #2d5a18;
  box-shadow:
    0 5px 0 #2d5a18,
    0 12px 24px rgba(0,0,0,0.30),
    inset 0 2px 0 rgba(255,255,255,0.55);
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}
#timer { font-variant-numeric: tabular-nums; }
#timer.warn { color: #c75a18; }
#timer.crit { color: #c73a3a; animation: blink 0.6s infinite; }
#parts-counter { font-variant-numeric: tabular-nums; }

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

/* Sky / time-of-day indicator — big glassy banner under the timer.
   Hidden by default; main.js adds .show + .phase-{morning|dusk|night}
   when the phase flips, then drops .show after ~6s. */
#sky-indicator {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%) translateY(-8px);
  display: flex; align-items: center; gap: 14px;
  min-width: 360px; max-width: 80vw;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(20,12,40,0.78) 0%, rgba(8,8,18,0.85) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.10);
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease-out, transform 700ms ease-out;
  z-index: 6;
}
#sky-indicator.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sky-icon {
  font-size: 30px; line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.sky-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sky-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  color: #ffd166; text-transform: uppercase;
}
.sky-intro {
  font-size: 13px; color: #e5dffa; line-height: 1.35;
  font-style: italic;
}
/* Per-phase accent — paint the rim glow + label color so the eye knows
   we shifted between Morning / Dusk / Night without reading the label. */
#sky-indicator.phase-morning { border-color: rgba(255,209,102,0.55); box-shadow: 0 12px 32px rgba(0,0,0,0.50), 0 0 24px rgba(255,209,102,0.18), inset 0 1px 0 rgba(255,255,255,0.10); }
#sky-indicator.phase-morning .sky-label { color: #ffd166; }
#sky-indicator.phase-dusk    { border-color: rgba(255,107,53,0.55);  box-shadow: 0 12px 32px rgba(0,0,0,0.50), 0 0 24px rgba(255,107,53,0.20),  inset 0 1px 0 rgba(255,255,255,0.10); }
#sky-indicator.phase-dusk    .sky-label { color: #ff8a3a; }
#sky-indicator.phase-night   { border-color: rgba(34,197,94,0.55);  box-shadow: 0 12px 32px rgba(0,0,0,0.50), 0 0 24px rgba(34,197,94,0.30),  inset 0 1px 0 rgba(255,255,255,0.10); }
#sky-indicator.phase-night   .sky-label { color: #bbf7d0; }

/* #hp-bars-wrap, #checklist, .hp-* — REMOVED. The lives bar and the
   "find 10 machine parts" checklist were artifacts of the old build.
   Wolf Pandana doesn't have player HP or per-part tracking; the
   delivery counter in the topbar carries the only progress info. */

/* ── STATUS CHIPS (cartoon bamboo bubbles) ──────────────────────
   Bottom-centre row of chunky cream-cap pills with bamboo-green
   bottoms. Each chip has a thick brown stroke + 4px drop shadow,
   reading as a hand-drawn label instead of a dark glass widget.
   #heal-panel and #murder-cds were removed entirely. */
#status {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px;
  pointer-events: none;
}
.cd {
  position: relative;
  background: linear-gradient(180deg, #fff6dc 0%, #ffe5a3 100%);
  border: 3px solid #5b3a1a;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--pt-display);
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  color: #5b3a1a;
  box-shadow:
    0 4px 0 #5b3a1a,
    0 10px 18px rgba(0,0,0,0.30),
    inset 0 2px 0 rgba(255,255,255,0.70);
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background 180ms;
}
.cd.ready {
  background: linear-gradient(180deg, #d8f4c6 0%, #7fdc6a 100%);
  border-color: #2d5a18;
  color: #1f3e10;
  box-shadow:
    0 4px 0 #2d5a18,
    0 0 14px rgba(127,220,106,0.45),
    inset 0 2px 0 rgba(255,255,255,0.55);
}
.cd.cooldown {
  background: linear-gradient(180deg, #e8e2cf 0%, #c8bda1 100%);
  border-color: #6a5a3a;
  color: #6a5a3a;
  box-shadow:
    0 4px 0 #6a5a3a,
    0 10px 18px rgba(0,0,0,0.20),
    inset 0 2px 0 rgba(255,255,255,0.40);
  opacity: 0.85;
}
.cd.active {
  background: linear-gradient(180deg, #ffe98a 0%, #ffc23a 100%);
  border-color: #a05f08;
  color: #4a2a05;
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 #a05f08,
    0 0 20px rgba(255,194,58,0.55),
    inset 0 2px 0 rgba(255,255,255,0.65);
}
/* No more wolf-side chips — kept the .murder class as a defensive
   stub so anything that tries to add it doesn't NaN. */
.cd.murder { display: none; }

/* ── CAPTURED INDICATOR (left panel) ─────────────────────────────
   One cute chip per panda. Cream pill with a brown stroke; panda face
   on the left, name in the middle, FREE/CAUGHT tag on the right.
   The "you" chip gets a yellow rim, "trapped" chips swap to a pink
   background + sad emoji + bouncing animation. */
#teammates {
  position: absolute; top: 90px; left: 16px;
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--pt-display);
  pointer-events: none;
}
.tm {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px;
  min-width: 150px;
  background: linear-gradient(180deg, #fff6dc 0%, #ffe5a3 100%);
  border: 3px solid #5b3a1a;
  border-radius: 999px;
  box-shadow:
    0 4px 0 #5b3a1a,
    0 10px 18px rgba(0,0,0,0.25),
    inset 0 2px 0 rgba(255,255,255,0.65);
  color: #5b3a1a;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  transition: transform 180ms, background 180ms, border-color 180ms;
}
.tm-face {
  font-size: 18px; line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.20));
}
.tm-name { flex: 1; }
.tm-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px; font-weight: 900; letter-spacing: 0.08em;
  border: 2px solid #5b3a1a;
  box-shadow: 0 2px 0 #5b3a1a;
}
.tm-tag.tag-free {
  background: #b8e890; color: #2d5a18; border-color: #2d5a18; box-shadow: 0 2px 0 #2d5a18;
}
.tm-tag.tag-trapped {
  background: #ffb3c8; color: #4a1a30; border-color: #4a1a30; box-shadow: 0 2px 0 #4a1a30;
}
.tm.you {
  border-color: #a05f08;
  box-shadow: 0 4px 0 #a05f08, 0 10px 18px rgba(0,0,0,0.25), inset 0 2px 0 rgba(255,255,255,0.65);
}
.tm.trapped {
  background: linear-gradient(180deg, #ffd9e6 0%, #ffb3c8 100%);
  border-color: #4a1a30;
  box-shadow: 0 4px 0 #4a1a30, 0 0 14px rgba(255,179,200,0.55), inset 0 2px 0 rgba(255,255,255,0.55);
  color: #4a1a30;
  animation: tm-shake 0.6s ease-in-out infinite;
}
@keyframes tm-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-2px) rotate(-2deg); }
  75%      { transform: translateX(2px)  rotate(2deg); }
}

#carry-indicator {
  position: absolute; top: 110px; left: 50%; transform: translateX(-50%);
  background: rgba(255,209,102,0.18); border: 1px solid #ffd166; color: #ffd166;
  padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600;
  opacity: 0; transition: opacity 0.2s;
}
#carry-indicator.show { opacity: 1; }

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

#action-bar {
  position: absolute; bottom: 26%; left: 50%; transform: translateX(-50%);
  width: 260px; height: 12px; background: rgba(0,0,0,0.6); border-radius: 4px;
  overflow: hidden; opacity: 0; transition: opacity 0.15s;
}
#action-bar.show { opacity: 1; }
#action-bar-fill { height: 100%; width: 0%; background: #ffd166; transition: width 0.05s linear; }
#action-bar-label {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.1em; color: #ddd; white-space: nowrap;
}

#vignette {
  position: absolute; inset: 0;
  background: transparent;
  pointer-events: none;
  transition: background 0.2s;
}

#chase-flash {
  position: absolute; inset: 0; background: rgba(180,0,0,0); pointer-events: none;
  transition: opacity 0.1s;
  backdrop-filter: blur(0);
}
#chase-flash.active {
  background: rgba(180,0,0,0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

#jumpscare {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.9) 0%, rgba(255,0,0,0.7) 30%, rgba(0,0,0,0.95) 100%);
  opacity: 0;
}
#jumpscare.active {
  opacity: 1;
  animation: jumpscare-shake 0.5s ease-out;
}
@keyframes jumpscare-shake {
  0% { opacity: 0; transform: scale(1); }
  10% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1); }
}

#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; }
@keyframes shake {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-6px,4px); }
  40% { transform: translate(5px,-3px); }
  60% { transform: translate(-4px,-2px); }
  80% { transform: translate(3px,5px); }
}

#stun-overlay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.7); border: 2px solid #ffd166;
  padding: 12px 28px; border-radius: 8px; color: #ffd166;
  font-size: 22px; font-weight: 800; letter-spacing: 0.1em;
  display: none;
}
#stun-overlay.show { display: block; }

/* ── MOBILE CONTROL BUTTONS (cartoon bamboo) ─────────────────────
   4 chunky cartoon buttons (Sprint / Hide / Lantern / Save) tucked
   into the bottom-right corner in a 2×2 grid. Each button is a
   colored bubble with a thick brown stroke + 4-6px drop shadow that
   reads as paper-cut sticker rather than glossy jewel. Pressed state
   compresses the shadow so it feels like physically pushing the
   button down. ATTACK / USE / TAUNT / HEAL / SKILL are gone — their
   DOM nodes were removed in index.html. */
#mobile-controls {
  position: fixed; right: 14px; bottom: 14px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 14px;
  pointer-events: none;
  z-index: 5;
}
.mobile-btn {
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 4px solid #5b3a1a;
  font-family: var(--pt-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #5b3a1a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  pointer-events: auto;
  background-color: #fff6dc;
  box-shadow:
    0 6px 0 #5b3a1a,
    0 14px 22px rgba(0,0,0,0.30),
    inset 0 4px 0 rgba(255,255,255,0.65);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, filter 90ms;
}
.mobile-btn:active,
.mobile-btn.pressed {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #5b3a1a,
    0 6px 12px rgba(0,0,0,0.35),
    inset 0 4px 0 rgba(255,255,255,0.45);
  filter: brightness(1.05);
}
.mobile-btn.ready {
  box-shadow:
    0 6px 0 #5b3a1a,
    0 0 22px rgba(127,220,106,0.60),
    0 14px 22px rgba(0,0,0,0.30),
    inset 0 4px 0 rgba(255,255,255,0.65);
}
.mobile-btn.cooldown {
  filter: grayscale(0.6) brightness(0.85);
  opacity: 0.7;
}

/* Per-skill bubble colors — bamboo green, sky blue, lantern amber,
   panda pink. All share the same brown-outlined cartoon framing. */
.sprint-btn { background-color: #b8e890; }     /* spring green */
.hide-btn   { background-color: #b3e8c4; }     /* mint */
.torch-btn  { background-color: #ffd166; }     /* lantern amber */
.rescue-btn { background-color: #ffb3c8; color: #4a1a30; border-color: #4a1a30; }
.rescue-btn { box-shadow:
              0 6px 0 #4a1a30,
              0 14px 22px rgba(0,0,0,0.30),
              inset 0 4px 0 rgba(255,255,255,0.55); }
.rescue-btn:active, .rescue-btn.pressed {
  box-shadow:
    0 2px 0 #4a1a30,
    0 6px 12px rgba(0,0,0,0.35),
    inset 0 4px 0 rgba(255,255,255,0.40);
}

/* Old buttons that may still get added by stale JS — hide hard. */
.attack-btn, .taunt-btn, .skill-btn, .heal-btn, .action-btn {
  display: none !important;
}

/* Virtual joystick (touch only). Sits at fixed bottom-left mirroring
   BH's setup. Hidden on hover-capable desktops via the media query
   block further down. */
#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, 14, 40, 0.45);
  pointer-events: auto;
  display: none;                            /* shown by mobile media query */
  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(167, 139, 250, 0.85);    /* PT violet */
  border: 3px solid rgba(255,255,255,0.85);
  pointer-events: none;
}
@media (pointer: coarse), (max-width: 900px) {
  #joystick { display: block; }
}

/* Top-right ⛶ fullscreen toggle — visible on EVERY device (including
   desktop) per the user's "can't see the fullscreen button" complaint. */
#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;
  display: flex; align-items: center; justify-content: center;
}
#fs-btn:hover { background: rgba(0,0,0,0.75); }
#fs-btn.fs-active { background: rgba(167,139,250,0.7); color: #1a0d30; }

/* TOUCH DEVICES (any width) — mobile-specific tweaks. The desktop
   #status chips strip is suppressed (the 4 mobile buttons already
   communicate cooldown state), and the buttons shrink slightly for
   small viewports. The topbar pills stay visible (they're small +
   informative). */
@media (pointer: coarse), (max-width: 900px) {
  .mobile-btn { width: 72px; height: 72px; font-size: 10.5px; }
  #status { display: none !important; }
  /* Topbar pills shrink a notch on phones. */
  .top-pill { font-size: 16px; padding: 7px 16px; border-width: 2.5px; }
  .top-pill .top-icon { font-size: 16px; }
}
@media (hover: hover) and (pointer: fine) {
  /* Hide touch-only HUD on hover-capable desktops. #fs-btn stays
     visible — fullscreen is useful on web too. */
  #mobile-controls { display: none; }
  #joystick        { display: none !important; }
}

#lobby {
  position: fixed; inset: 0; background: rgba(8,12,18,0.94);
  display: flex; align-items: center; justify-content: center; z-index: 20;
}
#lobby.hidden { display: none; }
#lobby-card {
  position: relative;
  width: min(560px, 92vw); padding: 32px 28px;
  background: #15171d; border: 1px solid #2c3340; border-radius: 14px;
  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: #ff5252; margin-bottom: 6px; letter-spacing: 0.02em; }
.lobby-tagline { font-size: 13px; color: #4a3e2e; margin-bottom: 16px; font-style: italic; }
#connect-status { font-size: 14px; color: #99a; margin-bottom: 16px; }
#connect-status.ok { color: #6dd76d; }
#connect-status.err { color: #ff6262; }
.lobby-name-row { margin-bottom: 16px; }
#my-name {
  width: 70%; padding: 10px 14px; border-radius: 6px; border: 1px solid #444;
  background: #0e1218; color: #fff; font-size: 14px;
}
#lobby-players {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px;
}
.slot {
  background: #0e1218; border: 1px solid #2c3340; padding: 10px 6px; border-radius: 8px;
  font-size: 11px; color: #9aa;
}
.slot.taken { border-color: #5da; color: #c4f0c4; }
.slot.you { background: #0d2230; border-color: #66d9ff; color: #c8eaff; }
.slot.ai { color: #777; font-style: italic; }
.slot .role { font-weight: 700; font-size: 10px; letter-spacing: 0.5px; opacity: 0.7; margin-bottom: 4px; }
.slot .name { font-size: 12px; }
#countdown-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 8px 0 18px;
}
#countdown-wrap.hidden { display: none; }
#countdown-label {
  font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
  color: #99a; font-weight: 600;
}
#countdown-clock {
  position: relative; width: 130px; height: 130px;
}
#countdown-svg { width: 100%; height: 100%; transform: scale(1); transition: transform 0.15s; }
#countdown-arc { transition: stroke-dashoffset 1s linear, stroke 0.2s; }
/* Legacy SVG-clock layout only — scoped to #countdown-clock so it doesn't
   bleed into the new .lobby-clock pill layout (where #countdown-num is just
   inline text). The old absolute-inset rule was sitting on top of the entire
   main-lobby card and intercepting every click — including READY UP. */
#countdown-clock #countdown-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 48px; font-weight: 800; color: #ffd166;
  font-variant-numeric: tabular-nums;
}
#countdown-wrap.warn #countdown-num { color: #ff8b3a; }
#countdown-wrap.warn #countdown-arc { stroke: #ff8b3a; }
#countdown-wrap.crit #countdown-num { color: #ff5252; animation: pulse 0.6s infinite; }
#countdown-wrap.crit #countdown-arc { stroke: #ff5252; }
#countdown-wrap.crit #countdown-svg { animation: cdshake 0.4s infinite; }
#countdown-hint { font-size: 11px; color: #99a; margin-top: 4px; }
@keyframes pulse { 50% { opacity: 0.4; } }
@keyframes cdshake { 25% { transform: scale(1.04); } 75% { transform: scale(0.97); } }

.lobby-roles { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 0; }
.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.7; color: #99a; margin-top: 18px;
}

#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: #15171d; border: 1px solid #333;
  border-radius: 12px; text-align: center;
}
#overlay-card h1 { font-size: 32px; margin-bottom: 16px; color: #ff5252; }
#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.
   ============================================================ */
@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{
  /* Brand accent — deep forest green, matches the main lobby.
     Cyan/teal had bad contrast as text on cream/white. Variable
     names kept (--pt-purple) so existing selectors don't churn. */
  --pt-purple:#166534;            /* green-800 — buttons, borders, headings */
  --pt-purple-mid:#16a34a;        /* green-600 — hover, mid accents */
  /* Lobby background gradient — deepened-teal tones so the dark
     glassy aesthetic still reads, just without the violet hue. */
  --pt-bg-1:#0f2a35;
  --pt-bg-2:#071921;
  --pt-bg-3:#040c11;
  /* Dim text color — the lobby card uses the cream/sand bamboo
     theme (override block at the end of this file wins). Bright
     bg → text needs to be DARK, not light. Was washed-out
     purple-grey (#9994b3) → now a warm dark grey that contrasts
     strongly against cream and pairs with the brown body text. */
  --pt-dim:#4a3e2e;
  --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{
  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{
  /* NOTE: this rule is overridden by the WP bamboo-overlay block
     at the end of the file (cream/sand card). Kept for any legacy
     branch where the overlay theme isn't loaded.
     Original dark-glass aesthetic. */
  background:rgba(6, 16, 22, 0.96);
  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.55), 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;
}
.lobby-tagline{ color:var(--pt-dim); font-style:normal; font-size:13px; }

/* Pin the back button to the VIEWPORT (not the lobby card) so it stays
   visible even when the card is taller than the screen. */
#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);
}

/* ID-scoped hide rule — `#role-picker.hidden { display:none }` beats the
   default `#role-picker { display:flex }` (same ID specificity, last one wins). */
#role-picker.hidden,
#lobby-players.hidden{ display:none; }

#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);
  margin-bottom:14px;
}
#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); }

/* Name input */
#my-name{
  width:80%;
  padding:11px 14px; border-radius:10px;
  background:rgba(0,0,0,0.35); color:#fff;
  border:1px solid var(--pt-hairline);
  font-size:14px; font-family:var(--pt-body);
}
#my-name:focus{ outline:none; border-color:var(--pt-purple-mid); }

/* Player slot grid */
.slot{
  background:rgba(0,0,0,0.25);
  border:1px solid var(--pt-hairline);
  border-radius:10px;
  color:var(--pt-dim);
}
.slot.taken{
  background:rgba(34,197,94,0.10);
  border-color:rgba(34,197,94,0.45);
  color:#dcfce7;
}
.slot.you{
  background:rgba(34,197,94,0.18);
  border-color:var(--pt-purple);
  color:#fff;
  box-shadow:0 0 0 1px rgba(34,197,94,0.5) inset;
}
.slot.ai{ color:var(--pt-dim); font-style:normal; }
.slot.taken.ready{
  border-color:#8be38b;
  box-shadow:0 0 0 1px rgba(139,227,139,0.45) inset;
}
.slot .role{
  font-family:var(--pt-display);
  font-size:10px; letter-spacing:0.1em; font-weight:800;
  text-transform:uppercase;
}

/* Countdown */
#countdown-label{
  color:var(--pt-dim);
  font-size:11px; letter-spacing:0.12em;
  font-weight:700;
}
#countdown-num{
  font-family:var(--pt-display);
  color:#fff;
  font-variant-numeric:tabular-nums;
}
#countdown-arc{ stroke:var(--pt-purple-mid); }
#countdown-wrap.warn #countdown-num{ color:#ffb84d; }
#countdown-wrap.warn #countdown-arc { stroke:#ffb84d; }
#countdown-wrap.crit #countdown-num{ color:#ff8a8a; }
#countdown-wrap.crit #countdown-arc { stroke:#ff8a8a; }
#countdown-hint{ color:var(--pt-dim); }

/* Role picker */
.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(34,197,94,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; }

/* Ready / GO buttons */
#go-btn,
.ready-btn{
  background:var(--pt-purple); color:#fff;
  border:none; border-radius:999px;
  padding:13px 28px;
  font-family:var(--pt-display); font-weight:800;
  letter-spacing:0.08em;
  transition:all 0.15s ease;
  box-shadow:0 8px 22px rgba(34,197,94,0.35);
}
#go-btn:hover,
.ready-btn:hover{ background:var(--pt-purple-mid); transform:translateY(-1px); filter:none; }
#go-btn:disabled{ background:rgba(255,255,255,0.05); color:var(--pt-dim); box-shadow:none; cursor:not-allowed; }
.ready-btn.ready{ background:#3b7a35; box-shadow:0 8px 22px rgba(59,122,53,0.35); }

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

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

/* Overlay */
#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(34,197,94,0.35);
}
#overlay-btn:hover{ background:var(--pt-purple-mid); }

/* ============================================================
   PT MAIN+SUB LOBBY LAYOUT — mirrors Bunny Harvest's structure.
   ============================================================ */
#lobby-card{
  /* widen for the 3-col lobby-shell (nav | panes | queue rail) */
  width:min(1200px, 96vw) !important;
  text-align:left !important;
  max-height: 96vh;
  overflow-y: auto;
}
#lobby-card h1{ text-align:center; }
.lobby-tagline{ text-align:center; }
/* #lobby-body wraps .lobby-shell which IS the 3-col grid. Was a stale
   2-col 1fr/1.6fr grid that squeezed the entire shell into the left
   column. Reset to plain block. */
#lobby-body{
  display:block;
  margin: 14px 0 18px;
}
.section-head{
  display:flex; align-items:center; gap:8px;
  margin-bottom:6px;
}
.section-head h3{
  font-family:var(--pt-display); font-weight:700;
  font-size:1rem; flex:1; letter-spacing:0.02em;
}
.section-icon{ font-size:18px; }
.section-count{
  background:rgba(255,255,255,0.06); border:1px solid var(--pt-hairline);
  border-radius:999px; padding:2px 10px;
  font-family:var(--pt-display); font-weight:700;
  font-size:11px; color:var(--pt-dim);
}
.section-blurb{ font-size:11.5px; color:var(--pt-dim); line-height:1.45; margin-bottom:12px; }

#sub-section{
  background:rgba(217,119,6,0.06);
  border:1px solid rgba(217,119,6,0.30);
  border-radius:14px; padding:14px 14px 12px;
  display:flex; flex-direction:column; gap:10px;
}
/* Title colour overridden in the cartoon-lobby pass below — left
   here as a no-op so the rule isn't pruned. The Wolf Pandana card
   uses bamboo-dark green for ALL section titles per readability. */
#sub-section .section-head h3{ color:var(--wp-bamboo-dk, #2d5a18); }
#sub-queue-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:4px;
  font-size:12px; max-height:160px; overflow-y:auto;
}
#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:8px; padding:6px 10px;
  color:#d8d3ec; display:flex; align-items:center; gap:8px;
}
#sub-queue-list li.queue-empty{
  color:var(--pt-dim); font-style:italic;
  background:rgba(0,0,0,0.15); border-left-color:transparent;
}

#main-section{
  background:rgba(34,197,94,0.06);
  border:1px solid rgba(34,197,94,0.30);
  border-radius:14px; padding:14px 16px;
  display:flex; flex-direction:column; gap:10px;
}
#main-section .section-head h3{ color:var(--wp-bamboo-dk, #2d5a18); }
.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.25);
  border:1px solid var(--pt-hairline); border-left-width:3px;
  border-left-color:rgba(255,255,255,0.12);
  border-radius:8px; padding:7px 10px;
  display:flex; align-items:center; gap:10px;
  color:#d8d3ec;
}
.lobby-player-row .role-tag{
  font-family:var(--pt-display); font-weight:800;
  font-size:10px; letter-spacing:0.1em;
  background:rgba(255,255,255,0.06); color:#cfc8ea;
  padding:2px 8px; border-radius:4px; 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{ color:#8be38b; font-size:10px; font-weight:800; letter-spacing:0.1em; }
/* Supporter chip — inline next to a player's name in the lobby
   roster. Pure acknowledgement, no gameplay impact. Each tier gets
   a slightly bolder treatment. */
.wp-supporter-chip{
  display:inline-flex; align-items:center;
  padding:2px 7px; font-size:11px; line-height:1;
  border-radius:999px; border:1.5px solid;
  margin-right:4px; cursor:help;
}
.wp-supporter-chip.t1{ background:rgba(132,204,22,0.22); color:#365314; border-color:#365314; }
.wp-supporter-chip.t2{ background:rgba(34,197,94,0.25);  color:#0f3a14; border-color:#166534; }
.wp-supporter-chip.t3{ background:rgba(217,169,58,0.35); color:#7a4d10; border-color:#7a4d10; }
.wp-supporter-chip.t4{ background:rgba(132,204,22,0.40); color:#1a2e05; border-color:#365314; }
.wp-supporter-chip.t5{
  background:linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
  color:#3a2208; border-color:#a86d00;
  box-shadow:0 2px 0 #a86d00;
}
.lobby-player-row .waiting-tag{ color:var(--pt-dim); font-size:10px; }
.lobby-player-row .empty-tag{ color:var(--pt-dim); font-size:10px; font-style:italic; }
.lobby-player-row.empty{ background:rgba(0,0,0,0.12); border-left-color:transparent; opacity:0.7; }
.lobby-player-row.taken{ border-left-color:#4ade80; color:#dcfce7; }
.lobby-player-row.taken.ready{ border-left-color:#8be38b; }
.lobby-player-row.you{
  background:rgba(34,197,94,0.14);
  border-left-color:#4ade80;
}
.lobby-player-row.you .role-tag{ background:rgba(34,197,94,0.30); color:#fff; }
.lobby-player-row.murder-seat{
  border-left-color:#ff5252;
  background:rgba(255,82,82,0.07);
}
.lobby-player-row.murder-seat .role-tag{
  background:rgba(255,82,82,0.20); color:#ffb0b0;
}

.lobby-clock{
  display:flex; align-items:center; gap:8px;
  background:rgba(34,197,94,0.10);
  border:1px solid rgba(34,197,94,0.40);
  border-radius:10px; padding:8px 12px;
  font-size:13px; color:#d8c8ff;
  flex-wrap:wrap;
}
.lobby-clock.hidden{ display:none; }
.lobby-clock .clock-time{
  margin-left:auto;
  font-family:var(--pt-display); font-weight:800;
  color:#b698ff; letter-spacing:1px;
  font-variant-numeric:tabular-nums;
}
.lobby-clock .countdown-bar{
  flex-basis:100%; height:4px;
  background:rgba(255,255,255,0.06);
  border-radius:2px; overflow:hidden;
}
.lobby-clock .countdown-bar-fill{
  height:100%; width:100%;
  background:linear-gradient(90deg, #4ade80 0%, #86efac 100%);
  transition:width 0.3s linear;
}

.role-picker-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin: 4px 0 6px;
}
.role-picker-label{
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--pt-dim); font-weight:700;
}
#role-picker{ display:flex; gap:6px; flex-wrap:wrap; }
.role-btn{
  padding:7px 14px;
  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(34,197,94,0.18);
  border-color:var(--pt-purple-mid);
  color:#fff;
}
.role-btn.active{ background:var(--pt-purple); border-color:var(--pt-purple); color:#fff; }
.role-btn:disabled{ opacity:0.35; cursor:not-allowed; }

.lobby-action-row{ display:flex; gap:10px; }
#go-btn:disabled{
  background:rgba(255,255,255,0.05); color:var(--pt-dim);
  box-shadow:none; cursor:not-allowed;
}

.queue-btn{
  background:#d97706; color:#1a0500;
  border:none; border-radius:999px;
  padding:10px 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{ 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:10px 16px;
  font-family:var(--pt-display); font-weight:700;
}
.unqueue-btn.hidden, .hidden{ display:none; }

.sub-foot{ font-size:11px; color:var(--pt-dim); line-height:1.4; }
.watch-live-btn{
  background:var(--pt-purple); color:#fff;
  border:none; border-radius:999px;
  padding:10px 16px; font-family:var(--pt-display);
  font-weight:800; letter-spacing:0.1em;
  box-shadow:0 6px 18px rgba(34,197,94,0.32);
}
.watch-live-btn:hover{ background:var(--pt-purple-mid); }

/* ===== Sub-lobby estimate clock + spectate CTA ===== */
#sub-match-clock{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px;
  background:rgba(34,197,94,0.10);
  border:1px solid rgba(34,197,94,0.40);
  font-size:12.5px; color:#d8c8ff; font-weight:600;
}
#sub-match-clock.hidden{ display:none; }
#sub-match-clock .clock-label{ color:var(--pt-dim); font-weight:500; }
#sub-match-clock .clock-time{
  margin-left:auto;
  font-family:var(--pt-display); font-weight:800; letter-spacing:1px;
  color:#b698ff;
}
#sub-spectate-cta{
  display:flex; flex-direction:column; gap:8px;
  padding:10px 12px; border-radius:10px;
  background:rgba(34,197,94,0.07);
  border:1px solid rgba(34,197,94,0.32);
  margin-top:6px;
}
#sub-spectate-cta.hidden{ display:none; }
#sub-spectate-cta .cta-text{
  display:flex; gap:8px; align-items:flex-start;
  font-size:12px; color:#d8d3ec; line-height:1.4;
}
#sub-spectate-cta .cta-icon{ font-size:16px; flex-shrink:0; }
#sub-spectate-cta .sub-foot{ font-size:11px; color:var(--pt-dim); line-height:1.4; }

/* ===== Secret Panel (welcome + perks summary) =====
   Mirrors BH's Secret Panel in PT's purple/gold palette. Sits above the
   marketplace strip. Cosmetic-only "you found it" reward block with the
   shared wallet credits + perk badges. */
.lobby-secret-panel{
  margin-top:18px; padding:14px 16px;
  background:linear-gradient(135deg, rgba(255,209,102,0.12) 0%, rgba(34,197,94,0.14) 100%);
  border:1.5px solid rgba(255,209,102,0.45);
  border-radius:12px;
  display:flex; flex-direction:column; gap:10px;
  text-align:left;
  box-shadow:0 0 24px rgba(255,184,77,0.10);
}
.lobby-secret-panel.hidden{ display:none; }
.lobby-secret-panel .lsp-head{
  display:flex; align-items:center; gap:12px;
}
.lobby-secret-panel .lsp-head h2{
  font-family:var(--pt-display); font-weight:800;
  font-size:18px; color:#7a4d10; flex:1; letter-spacing:0.4px;
  margin:0;
  /* Was #ffd166 light yellow — invisible on cream. Now deep amber. */
}
.lobby-secret-panel .lsp-credits{
  /* Yellow text on yellow tint on cream = unreadable. Bumped bg
     contrast + swapped text to dark amber for legibility. */
  background:rgba(255,209,102,0.45);
  border:1.5px solid #a86d00;
  border-radius:999px;
  padding:4px 12px;
  font-size:13px; font-weight:800; color:#5b3206;
}
.lobby-secret-panel .lsp-blurb{
  /* Was #d8c896 (dusty yellow on dark glass theme) — too low contrast
     on the cream lobby card which actually wins (bamboo overlay).
     Switched to a deep warm brown so the "everything is free" pitch
     is sharply readable against the cream/sand background. */
  font-size:12.5px; line-height:1.55; color:#3a2e1e;
  margin:0;
}
.lobby-secret-panel .lsp-perks{
  display:flex; flex-wrap:wrap; gap:6px;
}
.lobby-secret-panel .lsp-perks:empty{ display:none; }
.lobby-secret-panel .lsp-perk{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px;
  font-size:11.5px; font-weight:800; letter-spacing:0.4px;
  /* Yellow-on-cream was invisible. Bumped bg + amber text. */
  background:rgba(255,209,102,0.35);
  border:1.5px solid #a86d00;
  color:#5b3206;
  border-radius:999px;
}
.lobby-secret-panel .lsp-perk-admin{
  background:#ffd166; color:#1a1004; border-color:#ffe19a;
}
.lobby-secret-panel .lsp-perk-lifetime{
  background:rgba(34,197,94,0.30); border-color:rgba(34,197,94,0.65); color:#bbf7d0;
}
.lobby-secret-panel .lsp-perk-priority{
  /* Was light cyan text on cyan tint on cream — invisible.
     Now: green chip with green-dark text. */
  background:rgba(34,197,94,0.20); border-color:#166534; color:#0f3a14;
}
.lobby-secret-panel .lsp-perk-cosmetic{
  /* Was lavender text — invisible on cream. Now: warm-brown chip. */
  background:rgba(91,58,26,0.10); border-color:#8b5a2b; color:#3a2e1e;
}
.lobby-secret-panel .lsp-perk-guest{
  background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.18); color:#99a;
}

/* Bring-into-match loadout block (inside the Secret Panel) */
.lsp-loadout{
  margin-top:6px; padding:12px;
  background:rgba(0,0,0,0.30);
  border:1px solid rgba(34,197,94,0.30);
  border-radius:10px;
}
.lsp-loadout-head{
  font-size:13px; font-weight:800; letter-spacing:0.04em;
  color:#fff; margin-bottom:10px;
}
.lsp-loadout-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
}
@media (max-width:640px){ .lsp-loadout-row{ grid-template-columns:1fr; } }
.lsp-loadout-row label{
  display:flex; flex-direction:column; gap:4px;
  font-size:11px; color:var(--pt-dim); letter-spacing:0.4px;
}
.lsp-loadout-label{
  font-weight:700; color:#e0d4ff;
}
.lsp-loadout-row select{
  background:#15101e; color:#fff;
  border:1px solid rgba(34,197,94,0.40);
  border-radius:8px;
  padding:7px 10px;
  font-size:12.5px; font-weight:600;
  cursor:pointer;
}
.lsp-loadout-row select:hover{ border-color:rgba(34,197,94,0.70); }
.lsp-loadout-row select:focus{ outline:none; border-color:#4ade80; box-shadow:0 0 0 2px rgba(167,139,250,0.25); }
.lsp-loadout-foot{
  margin-top:8px;
  font-size:11px; color:var(--pt-dim); line-height:1.5;
}

/* Tabs + dynamic grid for the new marketplace shape */
.lobby-market-tabbed .lm-tabs{
  display:flex; gap:4px; margin:0 0 12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.lm-tab{
  background:transparent; color:var(--pt-dim);
  border:0; padding:8px 12px;
  font-size:12px; font-weight:700; letter-spacing:0.3px;
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color 0.12s, border-color 0.12s;
}
.lm-tab:hover{ color:#fff; }
.lm-tab.active{ color:#fff; border-bottom-color:#4ade80; }

/* Card buy/equip overlay state */
.lm-card-owned{ border-color:rgba(126,255,158,0.45); }
.lm-card-equipped{ border-color:#4ade80; box-shadow:0 0 14px rgba(167,139,250,0.25); }
.lm-card-cant{ opacity:0.55; }
.lm-card-action{
  margin-top:6px;
  display:inline-block; width:100%;
  padding:5px 0;
  font-size:11px; font-weight:800; letter-spacing:0.4px;
  border-radius:6px; border:1px solid transparent;
  cursor:pointer;
}
.lm-card-action.buy   { background:#ffd166; color:#1a1004; border-color:#ffe19a; }
.lm-card-action.buy:hover{ background:#ffe19a; }
.lm-card-action.equip { background:rgba(34,197,94,0.30); color:#e0d4ff; border-color:rgba(34,197,94,0.55); }
.lm-card-action.equip:hover{ background:rgba(34,197,94,0.50); color:#fff; }
.lm-card-action.equipped{ background:#4ade80; color:#15101e; border-color:#bbf7d0; cursor:default; }
.lm-card-action.locked{ background:rgba(255,255,255,0.06); color:#99a; border-color:rgba(255,255,255,0.10); cursor:not-allowed; }
.lm-card-sub{
  margin-top:4px; font-size:10.5px; color:var(--pt-dim);
}

/* ===== Marketplace strip ===== */
.lobby-market{
  margin-top:18px; padding:16px;
  background:linear-gradient(180deg, rgba(34,197,94,0.10) 0%, rgba(0,0,0,0.18) 100%);
  border:1px solid rgba(34,197,94,0.30);
  border-radius:14px;
}
.lobby-market.hidden{ display:none; }
.lm-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:12px;
}
.lm-title{
  font-family:var(--pt-display); font-weight:800;
  font-size:14px; letter-spacing:0.04em;
  /* Was #fff — invisible on cream lobby card. Deep brown for contrast. */
  color:var(--wp-brown); flex:1;
}
.lm-credits{
  font-family:var(--pt-display); font-weight:800;
  font-size:12px;
  /* Was yellow text on tint — invisible. Now: deep amber on bolder chip. */
  background:rgba(255,209,102,0.45); color:#5b3206;
  padding:4px 12px; border-radius:999px;
  border:1.5px solid #a86d00;
}
.lm-credits b{ font-weight:800; }
.lm-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
}
@media (max-width:640px){ .lm-grid{ grid-template-columns:repeat(2, 1fr); } }
.lm-card{
  text-align:center;
  padding:12px 8px;
  background:rgba(0,0,0,0.30);
  border:1px solid var(--pt-hairline);
  border-radius:10px;
  transition:transform 0.15s ease, border-color 0.15s ease;
  cursor:pointer;
}
.lm-card:hover{
  transform:translateY(-2px);
  border-color:var(--pt-purple-mid);
}
.lm-emoji{ font-size:30px; line-height:1; margin-bottom:6px; }
.lm-name{
  font-family:var(--pt-display); font-weight:700;
  font-size:11.5px; color:#fff;
  margin-bottom:4px;
}
.lm-price{
  font-size:11px; color:var(--pt-dim); font-weight:600;
}
.lm-benefit{
  font-size:10.5px; color:#9a8fb5;
  margin-top:5px; padding-top:5px;
  border-top:1px dashed rgba(255,255,255,0.10);
  line-height:1.35;
}
.lm-foot{
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--pt-hairline);
  font-size:11px; color:var(--pt-dim); text-align:center;
  line-height:1.4;
}
.lm-foot a{ color:var(--pt-purple-mid); text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   GLASSMORPHISM LOBBY OVERHAUL  ·  PT
   ──────────────────────────────────────────────────────────────────────────
   Glossy / glass material across the whole lobby:
     • backdrop-filter blur on every card
     • semi-transparent dark fill so the painted background bleeds through
     • 1px hairline + inset highlight at the top edge for "lit glass"
     • soft drop shadow under each card for elevation
   PT keeps its purple/gold accents on top of the glass; BH uses the same
   ruleset with warm yellow accents for visual cohesion across both games.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Painted backdrop behind the lobby card so the glass actually has
   something to refract. Replaces the flat dark wash. */
#lobby{
  background:
    radial-gradient(60% 50% at 18% 20%, rgba(34,197,94,0.35) 0%, rgba(34,197,94,0) 70%),
    radial-gradient(45% 50% at 82% 80%, rgba(255,209,102,0.18) 0%, rgba(255,209,102,0) 70%),
    radial-gradient(80% 90% at 50% 50%, rgba(8,6,18,0.96) 0%, rgba(0,0,0,1) 100%) !important;
}

/* Lobby card — the "main pane" of glass */
#lobby-card{
  background: linear-gradient(180deg, rgba(28,18,52,0.55) 0%, rgba(14,8,26,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-section + main-section: nested glass 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(34,197,94,0.30); }

/* Secret Panel — warm glass with a gold rim glow */
.lobby-secret-panel{
  background: linear-gradient(135deg, rgba(255,209,102,0.16) 0%, rgba(34,197,94,0.16) 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.16),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

/* Marketplace — cooler glass tile */
.lobby-market{
  background: linear-gradient(180deg, rgba(34,197,94,0.10) 0%, rgba(0,0,0,0.20) 100%) !important;
  border: 1px solid rgba(34,197,94,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);
}

/* Marketplace cards — small glass chips */
.lm-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  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;
}
.lm-card:hover{
  transform: translateY(-1px);
  border-color: rgba(167,139,250,0.45);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.35),
    0 0 18px rgba(167,139,250,0.15),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Loadout block inside Secret Panel — darker glass for contrast */
.lsp-loadout{
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.30) 100%);
  border: 1px solid rgba(34,197,94,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);
}

/* Profile panel (signed-in chip) */
#pt-profile-panel{
  background: linear-gradient(135deg, rgba(34,197,94,0.18) 0%, rgba(255,209,102,0.10) 100%) !important;
  border: 1.5px solid rgba(34,197,94,0.45) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 14px;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Sign-in CTA pill (when signed out) */
#pt-auth{
  background: rgba(34,197,94,0.14) !important;
  border: 1px solid rgba(34,197,94,0.35) !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);
}

/* How-to card */
#pt-howto{
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Section blocks inside the new how-to. Each one is a small inset glass
   tile so the eye groups Goal / Lobby / Survivor / Murder / Phases /
   Lighting separately. */
.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.07);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.howto-block-murder{
  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);
}
.howto-h{
  font-family: var(--pt-display);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.howto-keys{
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: #dceaf0;
}
.howto-keys span{ line-height: 1.5; }
.howto-keys b{ color: #fff; }
.howto-foot{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.10);
  font-size: 11.5px;
  color: var(--pt-dim);
  line-height: 1.5;
}

/* Buttons — glassy with subtle gradient sheen */
.ready-btn,
.queue-btn,
.unqueue-btn,
.watch-live-btn{
  background: linear-gradient(180deg, rgba(34,197,94,0.85) 0%, rgba(91,33,182,0.95) 100%) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 6px 16px rgba(34,197,94,0.35),
    inset 0 1px 0 rgba(255,255,255,0.20);
  transition: transform 0.08s, box-shadow 0.15s;
}
.ready-btn:hover,
.queue-btn:hover,
.unqueue-btn:hover,
.watch-live-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 8px 22px rgba(34,197,94,0.45),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.ready-btn.ready{
  background: linear-gradient(180deg, rgba(126,255,158,0.85) 0%, rgba(61,180,93,0.95) 100%) !important;
  border-color: rgba(255,255,255,0.25) !important;
  box-shadow:
    0 6px 16px rgba(61,180,93,0.40),
    inset 0 1px 0 rgba(255,255,255,0.30);
}

/* Lobby clock + queue list items get glass too */
.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{
  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);
}

/* ── PACK PRESSURE BAR — appears top-centre when 4+ pandas caught.
   Big red banner + bar that fills as the 3s wolf-win timer ticks. */
#pack-pressure {
  position: fixed;
  top: 80px; left: 50%; transform: translateX(-50%);
  display: none;
  flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none;
  z-index: 6;
  font-family: var(--pt-display);
}
#pack-pressure.show { display: flex; animation: pack-pulse 0.8s ease-in-out infinite alternate; }
@keyframes pack-pulse { 0% { transform: translateX(-50%) scale(1.0); } 100% { transform: translateX(-50%) scale(1.06); } }
#pack-pressure-label {
  font-size: 14px; font-weight: 900; letter-spacing: 0.10em;
  color: #fff; text-shadow: 0 2px 0 #4a1a30, 0 0 12px rgba(255,90,74,0.85);
  padding: 4px 14px;
  background: linear-gradient(180deg, #ff5a8a 0%, #c73a3a 100%);
  border: 3px solid #4a1a30;
  border-radius: 999px;
  box-shadow: 0 4px 0 #4a1a30, 0 10px 18px rgba(0,0,0,0.30);
}
#pack-pressure-bar {
  width: 240px; height: 14px;
  background: rgba(74,26,48,0.65);
  border: 2px solid #4a1a30;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 0 rgba(0,0,0,0.20);
}
#pack-pressure-fill {
  width: 0%; height: 100%;
  background: linear-gradient(90deg, #ff5a8a 0%, #ffd166 100%);
  transition: width 80ms linear;
  box-shadow: 0 0 12px rgba(255,209,102,0.85);
}
#pack-pressure-sub {
  font-size: 11px; color: #fff; font-weight: 700;
  text-shadow: 0 1px 0 #4a1a30;
}

/* ── SCORE POPUP — "+1 🎍" floats up from the temple after each
   delivery. Spawned by spawnScorePopup() in main.js, fades + drifts
   up via the keyframe below, removed after 1.4s. */
.score-popup {
  position: fixed;
  font-family: var(--pt-display);
  font-size: 28px; font-weight: 900;
  color: #2d5a18;
  text-shadow: 0 2px 0 #fff, 0 4px 6px rgba(0,0,0,0.35);
  pointer-events: none;
  z-index: 7;
  animation: score-float 1.4s ease-out forwards;
}
@keyframes score-float {
  0%   { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
  15%  { transform: translate(-50%, -10px) scale(1.2); opacity: 1; }
  30%  { transform: translate(-50%, -20px) scale(1.0); opacity: 1; }
  100% { transform: translate(-50%, -90px) scale(0.85); opacity: 0; }
}

/* ── CAPTURE FLASH — full-screen pink vignette pulse when YOU get
   caught. Fades in fast, out slow. */
#capture-flash {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  background: radial-gradient(120% 80% at 50% 50%,
    rgba(255,90,138,0) 0%,
    rgba(255,90,138,0.55) 60%,
    rgba(199,58,58,0.85) 100%);
  mix-blend-mode: multiply;
}
#capture-flash.show { animation: capture-flash-anim 0.9s ease-out forwards; }
@keyframes capture-flash-anim {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── PARK-TOUR MINIMAP ─────────────────────────────────────────
   Circular minimap top-right showing player + items + wolves +
   islands. Drawn each frame in main.js drawMinimap(). The mask is
   a thick brown ring + cream sand backing for the cartoon park-map
   aesthetic. */
#minimap {
  position: fixed;
  top: 12px; right: 12px;
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 4px solid #5b3a1a;
  background: rgba(255,246,220,0.85);
  box-shadow:
    0 6px 0 #5b3a1a,
    0 14px 24px rgba(0,0,0,0.30),
    inset 0 3px 0 rgba(255,255,255,0.65);
  pointer-events: none;
  z-index: 4;
}
@media (max-width: 720px) {
  #minimap { width: 110px; height: 110px; top: 60px; }
}

/* ── PANDA LAND SHINE FLASH ───────────────────────────────────
   Full-screen warm golden vignette that triggers when the local
   player crosses into Panda Land. Pulses from invisible → bright
   → faded over ~1.2s so it reads as "you stepped into the safe
   zone". Soft radial gradient so the centre stays clear (you can
   still see your panda) while the edges glow gold. */
#panda-land-shine {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: 0;
  background:
    radial-gradient(120% 80% at 50% 50%,
      rgba(255,236,160,0) 0%,
      rgba(255,236,160,0.45) 60%,
      rgba(255,200,80,0.75) 100%);
  mix-blend-mode: screen;
}
#panda-land-shine.show {
  animation: panda-land-shine-anim 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes panda-land-shine-anim {
  0%   { opacity: 0; transform: scale(1.05); }
  20%  { opacity: 1; transform: scale(1.00); }
  100% { opacity: 0; transform: scale(1.00); }
}

/* Marketplace tabs — highlighted underline */
.lm-tab.active{
  color: #fff;
  border-bottom-color: #ffd166;
  text-shadow: 0 0 12px rgba(255,209,102,0.50);
}

/* ============================================================
   CARTOON LOBBY OVERRIDE — Wolf Pandana paint pass.
   Loaded LAST so it wins over the legacy purple/dark glass theme
   above. Same selectors, new palette: sky-blue background, cream
   bamboo-paper card, chunky cartoon buttons with thick brown
   strokes and 4-6px drop shadows.
   ============================================================ */

:root {
  --wp-cream:#fff6dc;
  --wp-cream-2:#ffe5a3;
  --wp-bamboo-lt:#cfe898;          /* light bamboo leaf */
  --wp-bamboo:#7fdc6a;              /* mid bamboo */
  --wp-bamboo-leaf:#4a9028;         /* deep leaf green */
  --wp-bamboo-dk:#2d5a18;           /* shadow bamboo */
  --wp-sand:#f0dfb0;                /* pale sand */
  --wp-sand-2:#d9bf80;              /* warm sand */
  --wp-sand-dk:#a8884c;             /* shadow sand */
  --wp-brown:#5b3a1a;
  --wp-brown-mid:#8b5a2b;
  --wp-pink:#ffb3c8;
  --wp-pink-dk:#4a1a30;
  --wp-sky:#cfeaff;
  --wp-sky-2:#9ed9ff;
  --wp-shadow:rgba(91,58,26,0.30);
  /* Glossy highlight band — used as an overlay on cards / buttons. */
  --wp-gloss-band: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.20) 25%,
    rgba(255,255,255,0.00) 50%);
}

/* ── BACKGROUND: bamboo grove + warm sand (Wolf Pandana hero palette)
   Top: light bamboo-green canopy. Middle: warm sand horizon. Bottom:
   deep bamboo green forest floor. Plus a soft golden sunlight glow
   rising from the horizon line for that "afternoon in the grove"
   warmth. No more sky-blue. */
#lobby {
  background:
    /* Sunlight glow at the horizon */
    radial-gradient(70% 55% at 50% 62%, rgba(255,232,150,0.55) 0%, rgba(255,232,150,0) 60%),
    /* Vertical bamboo+sand gradient */
    linear-gradient(180deg,
      #cfe898 0%,      /* light bamboo canopy */
      #b8da7a 18%,
      #f0dfb0 42%,     /* sand horizon band */
      #d9bf80 55%,     /* warm sand */
      #88c84a 78%,
      #4a9028 100%) !important;
  font-family: var(--pt-body);
  overflow: hidden;
}

/* Animated cloud strip drifting left → right across the sky.
   Built as repeating radial gradients so we get 3 cloud blobs per
   tile, then a 60s linear translate animation. */
#lobby::before {
  content: '';
  position: fixed;
  top: 6%; left: -50%;
  width: 200%; height: 110px;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse 80px 28px at 80px 50px,
      rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.5) 60%, transparent 80%),
    radial-gradient(ellipse 70px 26px at 320px 38px,
      rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.45) 60%, transparent 80%),
    radial-gradient(ellipse 95px 30px at 580px 56px,
      rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.40) 60%, transparent 80%),
    radial-gradient(ellipse 60px 22px at 820px 44px,
      rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.35) 60%, transparent 80%);
  background-repeat: repeat-x;
  background-size: 1100px 110px;
  animation: lobby-cloud-drift 120s linear infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
}
@keyframes lobby-cloud-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

/* Bamboo silhouettes peeking up from the bottom — gentle sway. */
#lobby::after {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 38vh;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* Bamboo stalks (vertical stripes) */
    repeating-linear-gradient(90deg,
      transparent 0px,
      transparent 78px,
      rgba(74,144,40,0.55) 78px,
      rgba(74,144,40,0.65) 86px,
      transparent 86px,
      transparent 132px,
      rgba(45,90,24,0.50) 132px,
      rgba(45,90,24,0.60) 142px,
      transparent 142px,
      transparent 198px,
      rgba(74,144,40,0.50) 198px,
      rgba(74,144,40,0.60) 208px,
      transparent 208px,
      transparent 260px),
    /* Soft hill base */
    radial-gradient(120% 80% at 50% 100%,
      rgba(60,140,40,0.85) 0%,
      rgba(60,140,40,0.55) 40%,
      transparent 70%);
  background-position: 0 bottom, 0 0;
  background-repeat: repeat-x, no-repeat;
  background-size: 260px 100%, 100% 100%;
  transform-origin: bottom center;
  animation: lobby-bamboo-sway 6s ease-in-out infinite alternate;
}
@keyframes lobby-bamboo-sway {
  0%   { transform: skewX(-0.5deg) translateX(-4px); }
  100% { transform: skewX(0.5deg)  translateX(4px); }
}

/* Floating bamboo leaves drifting across the lobby. Pure CSS layer:
   we attach two .lobby-leaf elements (added by JS) with looping
   keyframes; this rule sets the base look. */
.lobby-leaf {
  position: fixed;
  z-index: 0;
  font-size: 28px;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.15));
  opacity: 0.85;
  animation: lobby-leaf-fall var(--leaf-dur, 14s) linear infinite;
  animation-delay: var(--leaf-delay, 0s);
}
@keyframes lobby-leaf-fall {
  0%   { transform: translate(var(--lx0, 10vw), -10vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { transform: translate(var(--lx1, 30vw), 110vh) rotate(720deg); opacity: 0; }
}

/* Subtle pop-in animation for the lobby card. */
#lobby-card {
  animation: lobby-card-in 600ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes lobby-card-in {
  0%   { transform: translateY(20px) scale(0.96); opacity: 0; }
  100% { transform: translateY(0) scale(1);       opacity: 1; }
}

/* ── LOBBY CARD: glossy cream-sand bamboo paper ─────────────────
   Multi-layer background: sand gradient base + a baked-in top-down
   gloss highlight. NO pseudo-element decoration (those previously
   clipped the card's scrollable content) — the gloss is now part of
   the static background gradient stack so nothing covers the lobby
   queue / ready button. */
#lobby-card {
  background:
    /* Top-down gloss highlight band */
    linear-gradient(180deg,
      rgba(255,255,255,0.65) 0%,
      rgba(255,255,255,0.25) 18%,
      rgba(255,255,255,0.00) 38%),
    /* Soft corner sheen at top-left for depth */
    radial-gradient(60% 40% at 25% 8%, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0) 70%),
    /* Sand paper base */
    linear-gradient(180deg,
      #fff7df 0%,
      #fff   28%,
      var(--wp-sand) 70%,
      #ffe19a 100%) !important;
  border: 4px solid var(--wp-bamboo-dk) !important;
  border-radius: 28px !important;
  box-shadow:
    0 10px 0 var(--wp-bamboo-dk),
    0 28px 60px rgba(0,0,0,0.30),
    0 0 0 1px rgba(255,255,255,0.40) inset,
    inset 0 4px 0 rgba(255,255,255,0.90),
    inset 0 -2px 0 rgba(74,144,40,0.25) !important;
  color: var(--wp-brown);
  position: relative;
  z-index: 1;
  /* NO overflow: hidden — that broke the lobby scroll body. */
}
#lobby-card h1 {
  font-family: var(--pt-display);
  color: var(--wp-bamboo-dk) !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 2px 0 rgba(255,255,255,0.65), 0 4px 0 rgba(91,58,26,0.15);
}
.lobby-tagline {
  color: var(--wp-brown) !important;
  font-weight: 600 !important;
  font-style: normal !important;
}

/* Back-home pill — cartoon. */
#back-home {
  background: linear-gradient(180deg, var(--wp-cream) 0%, var(--wp-cream-2) 100%) !important;
  color: var(--wp-brown) !important;
  border: 3px solid var(--wp-brown) !important;
  font-weight: 800 !important;
  box-shadow:
    0 4px 0 var(--wp-brown),
    0 10px 18px rgba(0,0,0,0.25) !important;
  backdrop-filter: none !important;
}
#back-home:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Connect status pill — cartoon. */
#connect-status {
  background: var(--wp-cream) !important;
  color: var(--wp-brown) !important;
  border: 2px solid var(--wp-brown) !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}
#connect-status.ok {
  background: linear-gradient(180deg, #d8f4c6 0%, var(--wp-bamboo) 100%) !important;
  color: var(--wp-bamboo-dk) !important;
  border-color: var(--wp-bamboo-dk) !important;
}
#connect-status.err {
  background: linear-gradient(180deg, #ffd9e6 0%, var(--wp-pink) 100%) !important;
  color: var(--wp-pink-dk) !important;
  border-color: var(--wp-pink-dk) !important;
}

/* Name input — paper card style. */
#my-name {
  background: #fff !important;
  color: var(--wp-brown) !important;
  border: 3px solid var(--wp-brown) !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  box-shadow: inset 0 2px 0 rgba(91,58,26,0.10);
}
#my-name::placeholder { color: rgba(91,58,26,0.45); }
#my-name:focus { border-color: var(--wp-bamboo-dk) !important; outline: none; }

/* Slot tiles — cream tabs with brown trim. */
.slot {
  background: var(--wp-cream) !important;
  border: 3px solid var(--wp-brown) !important;
  border-radius: 14px !important;
  color: var(--wp-brown) !important;
  font-weight: 700 !important;
  box-shadow:
    0 3px 0 var(--wp-brown),
    inset 0 2px 0 rgba(255,255,255,0.55);
}
.slot.taken {
  background: linear-gradient(180deg, #d8f4c6 0%, var(--wp-bamboo) 100%) !important;
  border-color: var(--wp-bamboo-dk) !important;
  color: var(--wp-bamboo-dk) !important;
  box-shadow:
    0 3px 0 var(--wp-bamboo-dk),
    inset 0 2px 0 rgba(255,255,255,0.55) !important;
}
.slot.you {
  background: linear-gradient(180deg, #ffe98a 0%, #ffc23a 100%) !important;
  border-color: #a05f08 !important;
  color: #4a2a05 !important;
  box-shadow:
    0 3px 0 #a05f08,
    inset 0 2px 0 rgba(255,255,255,0.55) !important;
}
.slot.ai {
  background: var(--wp-cream-2) !important;
  color: var(--wp-brown-mid) !important;
}
.slot.taken.ready {
  border-color: var(--wp-bamboo-dk) !important;
  box-shadow:
    0 0 0 3px rgba(45,90,24,0.40) inset,
    0 3px 0 var(--wp-bamboo-dk) !important;
}

/* GO / READY / QUEUE / WATCH-LIVE buttons — chunky GLOSSY bamboo
   green primaries. Lacquered finish with a top highlight band. */
#go-btn,
.ready-btn,
.queue-btn,
.unqueue-btn,
.watch-live-btn {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.65) 0%,
      rgba(255,255,255,0.10) 40%,
      rgba(255,255,255,0) 50%),
    linear-gradient(180deg, var(--wp-bamboo-lt) 0%, var(--wp-bamboo) 55%, var(--wp-bamboo-leaf) 100%) !important;
  color: #143612 !important;
  border: 3px solid var(--wp-bamboo-dk) !important;
  border-radius: 999px !important;
  padding: 12px 26px !important;
  font-family: var(--pt-display);
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  box-shadow:
    0 5px 0 var(--wp-bamboo-dk),
    0 14px 22px rgba(0,0,0,0.25),
    inset 0 3px 0 rgba(255,255,255,0.85),
    inset 0 -3px 0 rgba(45,90,24,0.40) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, filter 90ms;
}
#go-btn:hover,
.ready-btn:hover,
.queue-btn:hover,
.unqueue-btn:hover,
.watch-live-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}
#go-btn:active,
.ready-btn:active,
.queue-btn:active,
.unqueue-btn:active,
.watch-live-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 var(--wp-brown),
    0 6px 12px rgba(0,0,0,0.30),
    inset 0 3px 0 rgba(255,255,255,0.55) !important;
}
#go-btn:disabled {
  background: #e8e2cf !important;
  color: var(--wp-brown-mid) !important;
  opacity: 0.6;
  box-shadow: 0 2px 0 var(--wp-brown-mid), inset 0 2px 0 rgba(255,255,255,0.40) !important;
  cursor: not-allowed;
  transform: none !important;
}
.ready-btn.ready {
  background: linear-gradient(180deg, #d8f4c6 0%, var(--wp-bamboo) 100%) !important;
  border-color: var(--wp-bamboo-dk) !important;
  color: var(--wp-bamboo-dk) !important;
  box-shadow:
    0 5px 0 var(--wp-bamboo-dk),
    0 14px 22px rgba(0,0,0,0.25),
    inset 0 3px 0 rgba(255,255,255,0.65) !important;
}
.unqueue-btn {
  background: linear-gradient(180deg, #ffd9e6 0%, var(--wp-pink) 100%) !important;
  border-color: var(--wp-pink-dk) !important;
  color: var(--wp-pink-dk) !important;
  box-shadow:
    0 5px 0 var(--wp-pink-dk),
    0 14px 22px rgba(0,0,0,0.25),
    inset 0 3px 0 rgba(255,255,255,0.55) !important;
}
.watch-live-btn {
  background: linear-gradient(180deg, #cfeaff 0%, var(--wp-sky-2) 100%) !important;
  border-color: #1f5a8a !important;
  color: #0a3055 !important;
  box-shadow:
    0 5px 0 #1f5a8a,
    0 14px 22px rgba(0,0,0,0.25),
    inset 0 3px 0 rgba(255,255,255,0.55) !important;
}

/* Role / sub buttons — same cartoon framing, smaller. */
.role-btn {
  background: var(--wp-cream) !important;
  color: var(--wp-brown) !important;
  border: 2.5px solid var(--wp-brown) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  padding: 7px 14px !important;
  box-shadow: 0 3px 0 var(--wp-brown), inset 0 2px 0 rgba(255,255,255,0.55) !important;
}
.role-btn:hover {
  background: linear-gradient(180deg, #d8f4c6 0%, var(--wp-bamboo) 100%) !important;
  border-color: var(--wp-bamboo-dk) !important;
  color: var(--wp-bamboo-dk) !important;
}
.role-btn.active {
  background: linear-gradient(180deg, var(--wp-bamboo) 0%, var(--wp-bamboo-leaf) 100%) !important;
  border-color: var(--wp-bamboo-dk) !important;
  color: #fff !important;
}

/* Sub / main section heads — chunky bamboo-leaf strip. */
.section-head {
  background: linear-gradient(180deg, var(--wp-cream) 0%, var(--wp-cream-2) 100%);
  border-bottom: 3px solid var(--wp-brown);
}
.section-head h3,
#sub-section h3,
#main-section h3,
#sub-section .section-head h3,
#main-section .section-head h3 {
  font-family: var(--pt-display) !important;
  color: var(--wp-bamboo-dk) !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}
.section-blurb {
  color: var(--wp-brown);
  font-weight: 500;
}
.section-icon { filter: drop-shadow(0 2px 4px rgba(91,58,26,0.30)); }
.section-count {
  background: var(--wp-cream) !important;
  color: var(--wp-brown) !important;
  border: 2px solid var(--wp-brown) !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 0 var(--wp-brown);
}

/* Sub / main sections — glossy sand paper panels inside the card. */
#sub-section,
#main-section {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg, var(--wp-sand) 0%, #fff2c8 50%, var(--wp-sand) 100%) !important;
  border: 3px solid var(--wp-bamboo-dk) !important;
  border-radius: 18px !important;
  box-shadow:
    0 4px 0 var(--wp-bamboo-dk),
    0 12px 24px rgba(0,0,0,0.18),
    inset 0 3px 0 rgba(255,255,255,0.80),
    inset 0 -2px 0 rgba(74,144,40,0.20) !important;
  overflow: hidden;
}

/* Lobby clocks. */
#sub-match-clock,
#countdown-wrap {
  background: var(--wp-cream) !important;
  border: 2.5px solid var(--wp-brown) !important;
  color: var(--wp-brown) !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 0 var(--wp-brown), inset 0 2px 0 rgba(255,255,255,0.65);
}
.clock-time, #countdown-num {
  color: var(--wp-bamboo-dk) !important;
  font-family: var(--pt-display) !important;
}

/* Auth / profile cards in the lobby. Override the inline styles by
   restating with higher specificity + !important. */
#pt-auth {
  background: linear-gradient(180deg, var(--wp-cream) 0%, var(--wp-cream-2) 100%) !important;
  border: 3px solid var(--wp-brown) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 0 var(--wp-brown);
}
#pt-auth b { color: var(--wp-brown) !important; }
#pt-auth div { color: var(--wp-brown) !important; }
#pt-auth-sub { color: var(--wp-brown-mid) !important; }
#pt-auth-btn {
  background: linear-gradient(180deg, var(--wp-bamboo) 0%, var(--wp-bamboo-leaf) 100%) !important;
  color: #fff !important;
  font-weight: 900 !important;
  border: 2.5px solid var(--wp-bamboo-dk) !important;
  box-shadow: 0 4px 0 var(--wp-bamboo-dk) !important;
}

#pt-profile-panel {
  background: linear-gradient(180deg, var(--wp-cream) 0%, #fff 50%, var(--wp-cream-2) 100%) !important;
  border: 3px solid var(--wp-brown) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 0 var(--wp-brown);
}
#pt-profile-name, #pt-profile-credits { color: var(--wp-brown) !important; }
#pt-profile-panel div { color: var(--wp-brown) !important; }

/* Queue list rows — cream pills. */
#sub-queue-list li,
.queue-row {
  background: var(--wp-cream);
  border: 2px solid var(--wp-brown);
  color: var(--wp-brown);
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 2px 0 var(--wp-brown);
}
.queue-empty { color: var(--wp-brown-mid); font-style: italic; }

/* Overlay (end-of-match popup) — bamboo paper too. */
#overlay {
  background: radial-gradient(80% 60% at 50% 0%, rgba(127,220,106,0.40) 0%, rgba(207,234,255,0.85) 100%) !important;
}
#overlay-card {
  background: linear-gradient(180deg, var(--wp-cream) 0%, #fff 50%, var(--wp-cream-2) 100%) !important;
  border: 4px solid var(--wp-brown) !important;
  border-radius: 28px !important;
  box-shadow:
    0 10px 0 var(--wp-brown),
    0 28px 60px rgba(0,0,0,0.30),
    inset 0 4px 0 rgba(255,255,255,0.85) !important;
  color: var(--wp-brown);
}
#overlay-card h1 {
  font-family: var(--pt-display);
  color: var(--wp-bamboo-dk) !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 0 rgba(255,255,255,0.65);
}
#overlay-card p { color: var(--wp-brown) !important; }
#overlay-btn {
  background: linear-gradient(180deg, var(--wp-cream) 0%, var(--wp-cream-2) 100%) !important;
  color: var(--wp-brown) !important;
  border: 3px solid var(--wp-brown) !important;
  border-radius: 999px !important;
  font-family: var(--pt-display);
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  box-shadow:
    0 5px 0 var(--wp-brown),
    0 14px 22px rgba(0,0,0,0.25),
    inset 0 3px 0 rgba(255,255,255,0.65) !important;
}
#overlay-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════
   LOBBY REDESIGN — BAMBOO GROVE THEME (2026-05)
   Hero banner + sign-in card + status pills, all tuned to match the
   cream/sand bamboo overlay. Replaces the old plain h1 + cyan boxes
   that clashed with the warm cream lobby card.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── HERO BANNER ─────────────────────────────────────────────────── */
.wp-hero{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:-4px -4px 18px;
  padding:18px 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 60%),
    linear-gradient(90deg, #cfe898 0%, #fff6dc 50%, #cfe898 100%);
  border:3px solid var(--wp-bamboo-dk);
  border-radius:22px;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.7),
    inset 0 -2px 0 rgba(74,144,40,0.30),
    0 6px 0 var(--wp-bamboo-dk),
    0 16px 32px -10px rgba(0,0,0,0.25);
}
.wp-hero::before, .wp-hero::after{
  content:''; position:absolute;
  left:0; right:0; height:4px;
  background:repeating-linear-gradient(90deg,
    var(--wp-bamboo-dk) 0px, var(--wp-bamboo-dk) 12px,
    transparent 12px, transparent 22px);
  opacity:0.35;
}
.wp-hero::before{ top:10px; }
.wp-hero::after { bottom:10px; }

.wp-hero-side{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  flex:0 0 auto;
}
.wp-hero-side .wp-hero-emoji{
  font-size:46px; line-height:1;
  filter: drop-shadow(0 4px 6px rgba(91,58,26,0.40));
  animation: wp-hero-bob 3.2s ease-in-out infinite;
}
.wp-hero-side .wp-hero-leaf{
  font-size:18px; opacity:0.85;
  animation: wp-hero-spin 8s linear infinite;
}
.wp-hero-side-l .wp-hero-emoji{ transform:rotate(-6deg); }
.wp-hero-side-r .wp-hero-emoji{ transform:rotate(6deg); animation-delay:-1.6s; }
@keyframes wp-hero-bob{
  0%,100%{ transform:translateY(0)    rotate(-6deg); }
  50%    { transform:translateY(-6px) rotate(-3deg); }
}
.wp-hero-side-r .wp-hero-emoji{
  animation-name: wp-hero-bob-r;
}
@keyframes wp-hero-bob-r{
  0%,100%{ transform:translateY(0)    rotate(6deg); }
  50%    { transform:translateY(-6px) rotate(3deg); }
}
@keyframes wp-hero-spin{
  from{ transform:rotate(0); } to{ transform:rotate(360deg); }
}

.wp-hero-core{
  flex:1 1 auto; text-align:center; min-width:0;
}
.wp-hero-title{
  font-family:var(--pt-display); font-weight:900;
  font-size:clamp(28px, 5vw, 42px); line-height:1;
  color:var(--wp-brown);
  letter-spacing:-0.01em;
  text-shadow:
    0 2px 0 rgba(255,255,255,0.8),
    0 4px 0 var(--wp-bamboo-lt),
    0 6px 12px rgba(91,58,26,0.25);
  margin:2px 0 6px;
}
.wp-hero-sub{
  font-size:13px; color:#5b4a30; font-style:italic;
  margin:0 0 12px; line-height:1.4;
}
.wp-hero-pills{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
}

/* Status pill — recolors itself when class flips (live/match/offline). */
.wp-mode-pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px;
  background:rgba(255,255,255,0.65);
  border:2px solid var(--wp-bamboo-dk);
  border-radius:999px;
  font-size:11.5px; font-weight:800; letter-spacing:0.04em;
  color:var(--wp-brown);
  text-transform:uppercase;
  box-shadow:0 2px 0 rgba(74,144,40,0.25);
}
.wp-mode-pill-info{
  background:rgba(255,246,220,0.85);
  text-transform:none; letter-spacing:0.01em;
  font-weight:700; font-size:11px;
}
/* Keep the connection-status colours feeding through the old #connect-status
   id classes (.ok / .err / .warn) — re-skin them as bamboo pills. */
#connect-status.ok{
  background:linear-gradient(180deg, #b8da7a, #88c84a);
  border-color:var(--wp-bamboo-dk); color:#1a3a05;
  box-shadow:0 2px 0 var(--wp-bamboo-dk);
}
#connect-status.err{
  background:linear-gradient(180deg, #ff8a8a, #d44848);
  border-color:#7a1c1c; color:#fff;
  box-shadow:0 2px 0 #7a1c1c;
}
#connect-status.warn{
  background:linear-gradient(180deg, #ffd166, #f59e0b);
  border-color:#7a4d10; color:#3a2a08;
  box-shadow:0 2px 0 #7a4d10;
}

/* ─── PRIVATE-ROOM BANNER + PUBLIC-LOBBY ROOM ACTIONS ─────────── */
.wp-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;
}
.wp-room-banner .wp-room-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
}
.wp-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;
}
.wp-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;
}
.wp-room-banner .wp-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;
}
.wp-room-banner .wp-room-code{
  font-family:var(--pt-display); font-size:22px; font-weight:900;
  color:#5b3206; letter-spacing:0.15em;
  background:#fff; padding:4px 14px;
  border:2px dashed #a86d00; border-radius:10px;
}
.wp-room-banner .wp-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;
}
.wp-room-banner .wp-room-btn:hover{ transform:translateY(-1px); }
.wp-room-banner .wp-room-btn-leave{
  background:rgba(255,255,255,0.65); margin-left:auto;
}
.wp-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 var(--wp-brown-mid);
  border-radius:14px;
  color:var(--wp-brown);
}
.wp-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 var(--wp-bamboo-dk); border-radius:12px;
  box-shadow:0 4px 0 var(--wp-bamboo-dk), inset 0 2px 0 rgba(255,255,255,0.35);
  transition:transform 0.12s ease;
}
.wp-room-create-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--wp-bamboo-dk), inset 0 2px 0 rgba(255,255,255,0.40); }
.wp-room-create-btn:active{ transform:translateY(1px); box-shadow:0 2px 0 var(--wp-bamboo-dk), inset 0 2px 0 rgba(255,255,255,0.30); }
.wp-room-join-form{
  display:inline-flex; align-items:center; gap:8px; margin-left:auto;
}
.wp-room-join-label{
  font-size:12.5px; font-weight:700; color:var(--wp-brown);
}
.wp-room-join-input{
  width:110px; padding:7px 10px;
  font:inherit; font-family:var(--pt-display); font-weight:700;
  font-size:15px; letter-spacing:0.12em; text-transform:uppercase;
  background:#fff; color:var(--wp-brown);
  border:2px solid var(--wp-brown-mid); border-radius:10px;
  outline:none;
}
.wp-room-join-input.wp-room-join-err{
  border-color:#dc2626; animation:wp-room-shake 0.18s linear 3;
}
@keyframes wp-room-shake{
  0%,100%{ transform:translateX(0); }
  25%    { transform:translateX(-3px); }
  75%    { transform:translateX(3px); }
}
.wp-room-join-btn{
  padding:7px 14px; font:inherit; font-size:12.5px; font-weight:800;
  cursor:pointer;
  background:var(--wp-brown); color:#fff;
  border:2px solid var(--wp-brown); border-radius:10px;
  box-shadow:0 3px 0 var(--wp-brown);
}
.wp-room-join-btn:hover{ filter:brightness(1.05); }
@media (max-width: 640px){
  .wp-room-banner{ flex-direction:column; align-items:flex-start; }
  .wp-room-banner .wp-room-btn-leave{ margin-left:0; width:100%; justify-content:center; }
  .wp-room-actions{ flex-direction:column; align-items:stretch; }
  .wp-room-join-form{ margin-left:0; flex-wrap:wrap; }
  .wp-room-join-input{ flex:1 1 80px; }
}

/* ─── SIGN-IN / AUTH CARD (cream bamboo) ─────────────────────────── */
.wp-auth-card{
  display:flex; align-items:center; gap:12px;
  margin:14px 0; padding:12px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #fff7df 0%, #ffe8b3 100%);
  border:2.5px solid var(--wp-brown-mid);
  border-radius:14px;
  box-shadow:
    0 4px 0 var(--wp-brown-mid),
    inset 0 2px 0 rgba(255,255,255,0.7);
}
.wp-auth-icon{ font-size:22px; line-height:1; flex:none; }
.wp-auth-text{ flex:1; font-size:13px; line-height:1.4; color:var(--wp-brown); }
.wp-auth-text b{ display:block; color:var(--wp-brown); font-size:13.5px; }
.wp-auth-text #pt-auth-sub{
  display:block; margin-top:3px; font-size:11.5px; color:#5e4a2e; font-weight:500;
}
.wp-auth-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; font-weight:800; font-size:13px;
  background:linear-gradient(180deg, #7fdc6a 0%, #4a9028 100%);
  color:#fff; text-decoration:none;
  border:2px solid var(--wp-bamboo-dk); border-radius:12px;
  box-shadow:
    0 4px 0 var(--wp-bamboo-dk),
    inset 0 2px 0 rgba(255,255,255,0.35);
  transition:transform 0.12s ease;
  white-space:nowrap;
}
.wp-auth-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 6px 0 var(--wp-bamboo-dk),
    inset 0 2px 0 rgba(255,255,255,0.40);
}
.wp-auth-btn:active{
  transform:translateY(1px);
  box-shadow:
    0 2px 0 var(--wp-bamboo-dk),
    inset 0 2px 0 rgba(255,255,255,0.30);
}

/* ─── PROFILE CARD (cream bamboo, replaces cyan) ─────────────────── */
.wp-profile-card{
  margin:14px 0; padding:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #fff7df 0%, #ffe8b3 100%);
  border:2.5px solid var(--wp-bamboo-dk);
  border-radius:16px;
  box-shadow:
    0 4px 0 var(--wp-bamboo-dk),
    inset 0 2px 0 rgba(255,255,255,0.7);
  color:var(--wp-brown);
}
.wp-profile-row{ display:flex; align-items:center; gap:14px; }
.wp-profile-avatar{
  flex:none; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; line-height:1;
  background:linear-gradient(180deg, #cfe898 0%, #88c84a 100%);
  border:2.5px solid var(--wp-bamboo-dk);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.55),
    0 3px 0 var(--wp-bamboo-dk);
}
.wp-profile-meta{ flex:1; min-width:0; }
.wp-profile-name-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.wp-profile-meta b{ color:var(--wp-brown); font-size:15px; }
.wp-profile-sub{
  font-size:11.5px; color:#5e4a2e; margin-top:3px; font-weight:600;
}
.wp-profile-tag{
  padding:2px 8px; border-radius:999px; font-size:10px;
  font-weight:800; letter-spacing:0.5px;
  border:1.5px solid;
}
.wp-profile-tag-admin{
  background:#ffd166; color:#5b3206; border-color:#a86d00;
}
.wp-profile-tag-priority{
  background:rgba(255,209,102,0.30); color:#7a4d10; border-color:#a86d00;
}
.wp-profile-supporter{ text-align:right; flex:none; }
.wp-profile-supporter-label{
  font-size:10px; color:#5e4a2e; letter-spacing:0.6px; font-weight:800;
}
.wp-profile-supporter-amt{
  font-size:14px; font-weight:800; color:#a86d00;
  margin-top:2px;
}
.wp-profile-supporter-tier{
  margin-top:6px;
}
/* Supporter badge — colour ramps with tier. Wanderer (t0) shows
   plain helper text; t1–t5 get progressively bolder treatments. */
.wp-supporter-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px;
  font-size:11.5px; font-weight:800; letter-spacing:0.4px;
  border-radius:999px;
  border:1.5px solid;
}
.wp-supporter-badge.t1{ background:rgba(132,204,22,0.20); color:#365314; border-color:#365314; }
.wp-supporter-badge.t2{ background:rgba(34,197,94,0.20);  color:#166534; border-color:#166534; }
.wp-supporter-badge.t3{ background:rgba(217,169,58,0.30); color:#7a4d10; border-color:#7a4d10; }
.wp-supporter-badge.t4{ background:rgba(132,204,22,0.36); color:#1a2e05; border-color:#365314; }
.wp-supporter-badge.t5{
  background:linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
  color:#3a2208; border-color:#a86d00;
  box-shadow:0 2px 0 #a86d00;
}
.wp-profile-bottom{
  display:flex; align-items:center; gap:8px;
  margin-top:12px; padding-top:10px;
  border-top:2px dashed rgba(91,58,26,0.30);
  flex-wrap:wrap;
}
.wp-profile-bottom-label{
  font-size:10.5px; color:#5e4a2e; letter-spacing:0.6px; font-weight:800;
}
.wp-profile-scarf-chip{
  padding:4px 12px;
  background:rgba(255,255,255,0.75);
  border:2px solid var(--wp-brown-mid);
  border-radius:10px;
  font-size:12px; font-weight:700; color:var(--wp-brown);
}
.wp-profile-action{
  padding:6px 12px;
  font-family:inherit; font-size:12px; font-weight:800;
  border-radius:10px; text-decoration:none; cursor:pointer;
  border:2px solid; transition:transform 0.12s ease;
}
.wp-profile-action:hover{ transform:translateY(-1px); }
.wp-profile-action:active{ transform:translateY(1px); }
.wp-profile-action-donate{
  background:linear-gradient(180deg, #ff8a8a 0%, #e11d48 100%);
  color:#fff; border-color:#9e1029;
  box-shadow:0 3px 0 #9e1029;
}
.wp-profile-action-acct{
  background:linear-gradient(180deg, #cfe898 0%, #88c84a 100%);
  color:#1a3a05; border-color:var(--wp-bamboo-dk);
  box-shadow:0 3px 0 var(--wp-bamboo-dk);
}
.wp-profile-action-signout{
  background:rgba(255,255,255,0.65); color:var(--wp-brown);
  border-color:var(--wp-brown-mid);
  box-shadow:0 3px 0 var(--wp-brown-mid);
}

/* ─── Mobile tuning ─────────────────────────────────────────────── */
@media (max-width: 640px){
  .wp-hero{ padding:14px; gap:10px; }
  .wp-hero-side .wp-hero-emoji{ font-size:36px; }
  .wp-hero-side .wp-hero-leaf{ display:none; }
  .wp-hero-title{ font-size:26px; }
  .wp-hero-sub{ font-size:12px; }
  .wp-auth-card{ flex-wrap:wrap; }
  .wp-auth-btn{ width:100%; justify-content:center; }
  .wp-profile-row{ flex-wrap:wrap; }
  .wp-profile-supporter{ width:100%; text-align:left; }
  .wp-profile-bottom .wp-profile-action{ flex:1; text-align:center; }
}


/* ─── POST-MATCH REMATCH-IN-PRIVATE-ROOM CTA (WP 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, WP) ─────────────── */
.wp-custom-lobbies{
  margin:14px 0 8px; padding:12px 14px;
  background:rgba(255,255,255,0.55);
  border:2.5px solid var(--wp-bamboo-dk);
  border-radius:14px;
  box-shadow:0 4px 0 var(--wp-bamboo-dk), inset 0 2px 0 rgba(255,255,255,0.7);
  color:var(--wp-brown);
}
.wp-custom-lobbies-head{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.wp-custom-lobbies-title{
  font-family:var(--pt-display); font-weight:900;
  font-size:15px; color:var(--wp-brown);
}
.wp-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;
}
.wp-custom-lobbies-refresh{
  margin-left:auto; padding:5px 10px;
  font:inherit; font-size:13px; cursor:pointer;
  background:rgba(255,255,255,0.65); color:var(--wp-brown);
  border:1.5px solid var(--wp-brown-mid); border-radius:8px;
}
.wp-custom-lobbies-list{
  display:flex; flex-direction:column; gap:6px;
}
.wp-custom-lobbies-empty{
  padding:14px; background:rgba(255,255,255,0.40);
  border:1.5px dashed var(--wp-brown-mid); border-radius:10px;
  font-size:12.5px; font-style:italic; color:var(--wp-brown); text-align:center;
}
.wp-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 var(--wp-brown-mid); border-radius:10px;
}
.wp-cl-row-code{
  font-family:var(--pt-display); font-weight:900; font-size:16px;
  letter-spacing:0.12em; color:var(--wp-brown);
  padding:2px 10px; background:#fff;
  border:1.5px dashed #a86d00; border-radius:8px;
}
.wp-cl-row-host{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:700; color:#3a2e1e;
}
.wp-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;
}
.wp-cl-row-status{
  padding:2px 8px; font-size:11px; font-weight:800; letter-spacing:0.06em;
  border-radius:999px; border:1.5px solid;
}
.wp-cl-row-status-open  { background:rgba(132,204,22,0.22); color:#365314; border-color:#365314; }
.wp-cl-row-status-match { background:rgba(245,158,11,0.20); color:#7a4d10; border-color:#a86d00; }
.wp-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 var(--wp-bamboo-dk); border-radius:10px;
  box-shadow:0 3px 0 var(--wp-bamboo-dk);
}
.wp-cl-row-join:hover{ transform:translateY(-1px); }
.wp-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;
}
/* Host's '📢 List publicly' toggle inside the private-room banner. */
.wp-room-listed-row{
  margin-top:10px; padding:8px 10px;
  background:rgba(255,255,255,0.55);
  border:1.5px dashed #a86d00; border-radius:10px;
}
.wp-room-listed-label{
  display:flex; align-items:flex-start; gap:9px; cursor:pointer;
  color:#5b3206;
}
.wp-room-listed-label input{ margin-top:3px; flex:none; }
.wp-room-listed-text{ font-size:12.5px; line-height:1.45; }
.wp-room-listed-text b{ display:block; }
.wp-room-listed-text .wp-room-listed-sub{
  display:block; font-weight:500; font-size:11.5px; color:#5e4a2e; margin-top:2px;
}
@media (max-width: 640px){
  .wp-cl-row{ flex-direction:column; align-items:stretch; }
  .wp-cl-row-join{ width:100%; }
}

/* ── 4-tab lobby nav — vertical sidebar (Main / Private / Loadout / Library) ── */
.lobby-shell{
  display:flex; gap:14px; align-items:flex-start;
  margin-top:14px;
}
.lobby-panes-wrap{ flex:1 1 0; min-width:0; }
.lobby-tabs{
  display:flex; gap:6px;
  padding:8px;
  background:linear-gradient(180deg, rgba(255,250,235,0.65), rgba(255,236,200,0.55));
  border:1.5px solid rgba(91,58,26,0.22);
  border-radius:14px;
  box-shadow:inset 0 1px 2px rgba(91,58,26,0.10);
}
.lobby-tabs.lobby-tabs-vertical{
  flex-direction:column;
  width:184px; flex:none;
  position:sticky; top:14px;
}
.lobby-tabs.lobby-tabs-vertical .lobby-tab{
  flex:none; justify-content:flex-start;
  text-align:left;
}
.lobby-tabs:not(.lobby-tabs-vertical){
  flex-wrap:wrap; margin:14px 0 10px;
}
.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:var(--pt-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-weight:800; font-size:13px; letter-spacing:0.04em;
  color:#5b3206;
  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-tab:hover{
  background:rgba(255,255,255,0.55);
  color:#3a2e1e;
}
.lobby-tabs .lobby-tab.active{
  background:linear-gradient(180deg, #fff8e6 0%, #ffe6a8 100%);
  color:#3a2e1e;
  border-color:#a86d00;
  box-shadow:0 3px 0 #a86d00, inset 0 1px 0 rgba(255,255,255,0.6);
  transform:translateY(-1px);
}
.lobby-tabs .lobby-tab .lt-emoji{ font-size:16px; line-height:1; }
.lobby-tabs .lobby-tab .lt-text{ white-space:nowrap; }
/* Mobile: compress text, keep emojis prominent. */
@media (max-width: 560px){
  .lobby-tabs .lobby-tab{ padding:8px 10px; font-size:11.5px; gap:5px; }
  .lobby-tabs .lobby-tab .lt-emoji{ font-size:15px; }
}
@media (max-width: 380px){
  .lobby-tabs .lobby-tab .lt-text{ display:none; }
  .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-vertical{
    flex-direction:row; width:auto; position:static;
    overflow-x:auto;
  }
  .lobby-tabs.lobby-tabs-vertical .lobby-tab{
    flex:1 1 auto; justify-content:center; text-align:center;
  }
}
/* Panes — only the .active one is shown. Animation is a subtle fade so
   tab swaps don't feel jarring. */
.lobby-pane{ display:none; animation:wpPaneFade 0.18s ease-out; }
.lobby-pane.active{ display:block; }
@keyframes wpPaneFade{ from{opacity:0; transform:translateY(2px);} to{opacity:1; transform:none;} }
.lobby-pane-intro{
  margin-bottom:12px; padding:10px 14px;
  background:rgba(255,255,255,0.55);
  border:1.5px solid rgba(91,58,26,0.18);
  border-left:4px solid #a86d00;
  border-radius:10px;
  color:#3a2e1e;
}
.lobby-pane-intro .lobby-pane-h{
  font-family:var(--pt-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-size:15px; font-weight:800; letter-spacing:0.02em; margin:0 0 4px;
  color:#7a4d10;
}
.lobby-pane-intro .lobby-pane-sub{
  margin:0; font-size:12.5px; line-height:1.5; color:#5e4a2e;
}

/* ── Main-pane "you're in a private room" redirect notice ──────────
   Shown in the 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. */
.ml-private-redirect{
  text-align:center;
  padding:48px 24px;
  background:linear-gradient(180deg, rgba(255,250,235,0.85) 0%, rgba(255,236,200,0.75) 100%);
  border:1.5px solid rgba(91,58,26,0.25);
  border-radius:14px;
}
.ml-private-redirect-icon{
  font-size:48px; line-height:1;
  margin-bottom:14px;
  filter:drop-shadow(0 4px 8px rgba(168,109,0,0.30));
}
.ml-private-redirect-h{
  font-family:var(--pt-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-weight:800; font-size:1.35rem; letter-spacing:-0.01em;
  color:#7a4d10;
  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:#3a2e1e; background:#fff;
  border:1.5px dashed #a86d00; border-radius:6px;
  vertical-align:middle;
  font-variant-numeric:tabular-nums;
}
.ml-private-redirect-sub{
  font-size:13.5px; line-height:1.55; color:#5e4a2e;
  margin:0 auto 22px; max-width:480px;
}
.ml-private-redirect-sub b{ color:#7a4d10; }
.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:var(--pt-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-weight:900; font-size:14px; letter-spacing:0.04em;
  color:#3a2410;
  background:linear-gradient(180deg, #ffd166 0%, #f59e0b 100%);
  border:1.5px solid #92400e;
  border-radius:10px;
  cursor:pointer;
  box-shadow:0 4px 0 #92400e;
  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:#5b3206;
  background:transparent;
  border:1px solid rgba(91,58,26,0.30);
  border-radius:10px;
  transition:color 0.15s ease, border-color 0.15s ease;
}
.ml-private-redirect-leave:hover{ color:#3a2e1e; border-color:#3a2e1e; }

/* ── 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.10) 0%, rgba(255,250,235,0) 100%);
  border:1px solid rgba(91,58,26,0.22);
  border-radius:10px;
}
.ml-private-action-band #ready-btn-private{ flex:1 1 180px; }
.ml-private-action-band .wp-private-start{ flex:1 1 200px; }
.ml-private-action-band .wp-private-leave{
  padding:10px 18px; font:inherit; font-weight:700; font-size:12.5px;
  text-decoration:none; color:#5b3206;
  background:transparent;
  border:1px solid rgba(91,58,26,0.30); border-radius:10px;
  transition:color 0.15s ease, border-color 0.15s ease;
}
.ml-private-action-band .wp-private-leave:hover{
  color:#3a2e1e; border-color:#3a2e1e;
}

/* ── 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:#3a2e1e; }
.ml-mode-hint .ml-mode-hint-text b{ color:#15803d; }
.ml-mode-hint-public{
  background:linear-gradient(180deg, rgba(132,204,22,0.20) 0%, rgba(34,197,94,0.10) 100%);
  border:1.5px solid #166534;
  border-left:4px solid #166534;
}
.ml-mode-hint-private{
  background:linear-gradient(180deg, rgba(255,209,102,0.30) 0%, rgba(245,158,11,0.18) 100%);
  border:1.5px solid #a86d00;
  border-left:4px solid #a86d00;
}
.ml-mode-hint-private .ml-mode-hint-text b{ color:#7a4d10; }

/* ── 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 paintWpMainMode. */
#lobby-body[data-mode="public"]  [data-mode-only="private"] { display:none; }
#lobby-body[data-mode="private"] [data-mode-only="public"]  { display:none; }

.ml-queue-inline{
  margin-top:14px; padding:12px 14px;
  background:rgba(255,250,235,0.55);
  border:1.5px solid rgba(91,58,26,0.18);
  border-radius:12px;
}
.ml-queue-head{
  display:flex; align-items:center; gap:8px;
  margin-bottom:8px;
  font-family:var(--pt-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-weight:800; font-size:13px; color:#7a4d10;
  letter-spacing:0.04em;
}
.ml-queue-head .ml-queue-title{ flex:1; }

.ml-private-browser{
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,250,235,0.55));
  border:1.5px solid rgba(91,58,26,0.22);
  border-radius:14px;
}

.ml-setup{
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(255,236,200,0.55), rgba(255,250,235,0.45));
  border:1.5px solid #a86d00;
  border-left:4px solid #a86d00;
  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:var(--pt-display, '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.30); color:#7a4d10;
  border:1.5px solid #a86d00;
  font-weight:800;
}

.ml-joined{
  padding:14px 16px;
  background:rgba(255,250,235,0.60);
  border:1.5px solid rgba(91,58,26,0.22);
  border-radius:12px;
}
.ml-joined .section-head .section-icon{ font-size:20px; }
/* The WP lobby card sits on a cream/sand background. The global
   .lobby-player-row is themed for dark backgrounds (light lavender
   text on near-black) — washes out completely against cream.
   Override to dark-on-light for EVERY lobby-player-row inside the
   WP card (covers both the Public Lobby seats in #main-section AND
   the Private Lobby's Joined Players panel in .ml-joined). */
#lobby-card .lobby-player-row{
  background:#fff !important;
  border-color:rgba(91,58,26,0.18) !important;
  border-left-color:#a86d00 !important;
  color:#3a2e1e !important;
  opacity:1 !important;
}
#lobby-card .lobby-player-row .role-tag{
  background:rgba(168,109,0,0.16) !important;
  color:#7a4d10 !important;
}
#lobby-card .lobby-player-row .nm{
  color:#3a2e1e !important; font-weight:700;
}
#lobby-card .lobby-player-row .waiting-tag,
#lobby-card .lobby-player-row .empty-tag{
  color:#88909a !important;
}
#lobby-card .lobby-player-row .ready-tag{
  color:#15803d !important;
}
#lobby-card .lobby-player-row .wp-ping-unknown{
  color:#5e4a2e !important;
}
#lobby-card .lobby-player-row.empty{
  background:rgba(255,255,255,0.55) !important;
  border-left-color:transparent !important;
}
#lobby-card .lobby-player-row.empty .nm{
  color:#88909a !important;
  font-style:italic; font-weight:600;
}
#lobby-card .lobby-player-row.empty .role-tag{
  background:rgba(91,58,26,0.10) !important;
  color:#88909a !important;
}
#lobby-card .lobby-player-row.you{
  border-left-color:#ff8a3d !important;
  background:linear-gradient(180deg, rgba(255,138,61,0.12) 0%, #fff 100%) !important;
}
#lobby-card .lobby-player-row.taken{
  border-left-color:#16a34a !important;
}
#lobby-card .lobby-player-row.murder-seat{
  border-left-color:#9d174d !important;
}
#lobby-card .lobby-player-row.murder-seat .role-tag{
  background:rgba(157,23,77,0.16) !important;
  color:#9d174d !important;
}

.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.16) 0%, rgba(34,197,94,0.10) 100%);
  border:1.5px solid #166534;
  border-radius:12px;
}
.wp-private-start{
  flex:1 1 220px;
  padding:14px 22px;
  font:inherit; font-family:var(--pt-display, '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);
}
.wp-private-start:not(:disabled):hover{
  transform:translateY(-1px);
  box-shadow:0 5px 0 #166534, 0 10px 22px -8px rgba(22,163,74,0.6);
}
.wp-private-start:disabled{ filter:grayscale(0.5); }
.wp-private-leave{
  padding:10px 16px; font:inherit; font-weight:700; font-size:13px;
  text-decoration:none; color:#5b3206;
  background:transparent;
  border:1px solid rgba(91,58,26,0.30); border-radius:10px;
  transition:color 0.15s ease, border-color 0.15s ease;
}
.wp-private-leave:hover{ color:#3a2e1e; border-color:#3a2e1e; }
.ml-private-foot{
  padding:10px 14px;
  font-size:12px; line-height:1.55; color:#5e4a2e;
  background:rgba(255,250,235,0.55);
  border:1px dashed rgba(91,58,26,0.22);
  border-radius:8px;
}
.ml-private-foot b{ color:#7a4d10; }

.wp-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.22);
  border:1.5px solid #365314;
  font-size:14px; line-height:1;
  flex-shrink:0;
}

/* ── Ping latency badge + host kick + auto-kick panel ───────────── */
.wp-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;
}
.wp-ping-green   { color:#0f3a14; background:rgba(34,197,94,0.18);  border-color:#166534; }
.wp-ping-amber   { color:#7a4d10; background:rgba(245,158,11,0.20); border-color:#a86d00; }
.wp-ping-red     { color:#7a1d1d; background:rgba(239, 68, 68,0.18); border-color:#991b1b; }
.wp-ping-unknown { color:#5e4a2e; background:rgba(91,58,26,0.10);    border-color:rgba(91,58,26,0.45); }
.wp-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;
}
.wp-row-kick:hover{ transform:translateY(-1px); }
.wp-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;
}
.wp-room-autokick-head{
  font-weight:900; font-size:13px; letter-spacing:0.02em;
  color:#7a1d1d; margin-bottom:6px;
}
.wp-room-autokick-input{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; color:#3a2e1e;
}
.wp-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;
}
.wp-room-autokick-state{
  margin-top:6px; font-size:11.5px; color:#5e4a2e; line-height:1.45;
}
/* "Skip the wait?" CTA — anyone in the Survive Queue can jump
   straight to a Public-Host Private Lobby instead of waiting. */
.queue-rail-private-cta{
  display:flex; align-items:center; gap:10px;
  margin-top:8px; padding:9px 12px;
  font:inherit;
  color:#3a2e1e;
  background:linear-gradient(135deg, rgba(132,204,22,0.30) 0%, rgba(34,197,94,0.18) 100%);
  border:1.5px solid #166534;
  border-radius:10px;
  cursor:pointer;
  text-align:left;
  transition:transform 0.10s ease, background 0.15s ease;
}
.queue-rail-private-cta:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg, rgba(132,204,22,0.40) 0%, rgba(34,197,94,0.25) 100%);
}
.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:#15803d; font-size:12px; }
.queue-rail-private-cta .qrpc-sub{ color:#3a2e1e; font-weight:600; }
.queue-rail-private-cta .qrpc-sub #queue-rail-private-count{
  color:#fff; font-weight:900;
  background:#16a34a;
  padding:0 6px; border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.queue-rail-private-cta .qrpc-arrow{
  font-size:16px; color:#15803d; font-weight:900;
  flex:none;
  transition:transform 0.18s ease;
}
.queue-rail-private-cta:hover .qrpc-arrow{ transform:translateX(3px); }

/* ── Lock / Unlock pill (room visibility) ─────────────────────────
   Red 🔒 LOCKED when code-only; green 🔓 PUBLIC HOST when listed. */
.wp-room-listed-head{
  font-family:var(--pt-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-weight:900; font-size:13px; letter-spacing:0.02em;
  color:#7a4d10; margin-bottom:8px;
}
.wp-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:var(--pt-display, '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;
  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 (sits next to "Kick if ping > ___" input).
   Green when ON, red when OFF. The dot snaps left/right to make
   the toggle behaviour obvious at a glance. Click anywhere on the
   pill to flip — same hit area, same behaviour as a switch. */
.autokick-toggle{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px 5px 7px;
  font:inherit; font-family:var(--pt-display, '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.on .autokick-toggle-dot{ transform:translateX(0); background:#fff; }
.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; }