/* ============================================================
   Lobby — minimal screen slider.
   A white room with a flat, infinite horizontal slider of plain
   hairline rectangles (the "TVs"). Active one is centred and
   self-draws via DrawSVG; neighbours peek at the sides and dim.
   Matches the landing hero frame's minimal stroke look.
   Geometry + loop live in tv-slider.js.
   ============================================================ */

.lobby {
  --ink: var(--color-fg);           /* line/text colour — flips when lights go off */
  --ink-muted: var(--color-muted);
  --room-bg: var(--color-bg);       /* current room background (for cut-out rings) */

  position: relative;
  min-height: 100vh;
  background: var(--room-bg);
  color: var(--ink);
  overflow: hidden;                 /* neighbour screens slide past the edges */
  transition: background-color var(--duration-base) var(--ease-out-expo);
}
/* Lights off — full invert: dark room, lines + text turn light. */
.lobby.lights-off {
  --ink: var(--dark-fg);
  --ink-muted: var(--dark-muted);
  --room-bg: var(--dark-bg);
}

/* The interactive surface — drag here to slide. */
.lobby__stage {
  position: relative;
  height: 100vh;
  cursor: grab;
  touch-action: pan-y;              /* vertical scroll passes through to the page */
}
.lobby__stage.is-dragging { cursor: grabbing; }

/* Items are absolutely centred; tv-slider.js offsets each via transform. */
.tv-track { position: absolute; inset: 0; }

/* ---- A single screen (rectangle) --------------------------- */
.screen {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60vw;
  height: 40vh;
  will-change: transform, opacity;  /* JS owns transform (translate + x) */
}
.screen__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Hairline frame — same minimal stroke as the landing hero. */
.screen__rect {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;  /* crisp uniform line at any box size */
  transition: stroke var(--duration-base) var(--ease-out-expo);
}

/* Small corner index — quiet, on-system caps label. */
.screen__label {
  position: absolute;
  top: 18px;
  left: 22px;
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-muted);
  transition: color var(--duration-base) var(--ease-out-expo);
}

/* ---- Light switch — one global old-school throw lever, mounted flush on
   the extreme left edge, just above the TV row. A wall bracket + pivot bolt
   + stick with a ball grip that swings up (on) / down (off). All --ink so it
   stays visible after the invert. ---- */
.lights {
  position: absolute;
  left: 0;                              /* flush to the extreme edge */
  top: 50%;
  transform: translateY(calc(-20vh - 50% - 8px));   /* pivot just above TV top */
  z-index: 6;
  width: 74px;
  height: 100px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
/* Wall bracket bolted to the edge. */
.lights__base {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 40px;
  background: var(--ink);
  border-radius: 0 3px 3px 0;
  transition: background var(--duration-base) var(--ease-out-expo);
}
/* Pivot bolt the stick swings around. */
.lights__base::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--room-bg);   /* gap ring so the joint reads */
}
/* The throw handle. */
.lights__stick {
  position: absolute;
  left: 9px;
  top: 50%;
  width: 48px;
  height: 7px;
  margin-top: -3.5px;
  background: var(--ink);
  border-radius: 4px;
  transform-origin: 3px 50%;            /* pivot at the bracket end */
  transform: rotate(-54deg);            /* up = lights on */
  transition: transform var(--duration-base) cubic-bezier(0.34, 1.56, 0.64, 1),
              background var(--duration-base) var(--ease-out-expo);
}
/* Ball grip at the tip. */
.lights__stick::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: 19px;
  height: 19px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 0 0 2px var(--room-bg);   /* grip ring detail */
}
.lobby.lights-off .lights__stick { transform: rotate(54deg); }   /* down = off */

/* Invite-to-flick: a soft light glides across the lever — the same sweep the
   landing's melon word uses (a bright band moved via background-position). The
   metal keeps its --ink fill; this is a translucent highlight band on top, so it
   reads as a glint travelling along the handle. */
.lights__base::before,
.lights__stick::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(100deg,
    transparent 38%, rgba(255, 255, 255, 0.7) 50%, transparent 62%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 130% 50%;
  animation: lever-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}
.lights:hover .lights__base::before,
.lights:hover .lights__stick::before { animation-duration: 1.4s; }   /* perks up on hover */
@keyframes lever-shine {
  0%   { background-position: 130% 50%; }
  100% { background-position: -130% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .lights__base::before,
  .lights__stick::before { animation: none; }
}

/* ---- Lights keeper — the grumpy wall mascot (+ his gang) that won't let you
        keep the lights off. Built + animated by lobby_animations.js across 4
        escalating levels. L1 is a muted cursor-dot (blends like the cursor);
        L2–L4 turn solid red. ---- */
.lobby-keeper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;                  /* a foreground actor; still under the cursor (10000) */
  pointer-events: none;
  mix-blend-mode: difference;     /* L1: reads on the dark room AND once re-lit */
  will-change: transform;
}
.lobby-keeper__svg { display: block; width: 38px; height: auto; overflow: visible; }
.lobby-keeper__body { fill: var(--keeper-body, var(--color-muted)); }

/* Angry red goons (L2–L4): true red needs a normal blend + a drop-shadow to sit
   on any background, so we drop mix-blend here. */
.lobby-keeper--red {
  mix-blend-mode: normal;
  --keeper-body: #e23b3b;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

/* Scold doodles — a row of marks above the head. */
.lobby-keeper__doodles {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: 3px;
  color: #fff;
}
.lobby-keeper__doodle { display: block; }

/* The L4 cursor stand-in — cursor-sized, blends like the real dot it replaces. */
.lobby-keeper--standin { z-index: 8998; }                 /* under the gang beating it */
.lobby-keeper--standin .lobby-keeper__svg { width: 24px; }

/* Beatdown dust puffs. */
.lobby-dust {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(226, 226, 232, 0.7);
  pointer-events: none;
  z-index: 8997;
  will-change: transform, opacity;
}

/* L4 cartoon fight cloud — sits OVER the gang (they brawl inside it). */
.lobby-fightcloud {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9001;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
  will-change: transform;
}
.lobby-fightcloud__svg { display: block; width: 120px; height: auto; overflow: visible; }

/* Stars / limbs poking out of the brawl cloud. */
.lobby-poke {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9002;
  color: #fff;
  pointer-events: none;
  will-change: transform, opacity;
}
.lobby-poke svg { display: block; }

/* L4: while the gang has the cursor, hide whatever cursor was showing (the dot or
   the morphed hand) — the stand-in takes its place. */
html.cursor-caught .cursor,
html.cursor-caught .cursor-hand,
html.cursor-caught .cursor-icon { opacity: 0 !important; }

/* ---- Minimal prev/next + index ----------------------------- */
.tv-controls {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 7vh, 72px);
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.tv-btn {
  border: none;
  background: none;
  padding: var(--space-2);
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--duration-fast) var(--ease-out-expo),
              transform var(--duration-fast) var(--ease-out-expo),
              color var(--duration-base) var(--ease-out-expo);
}
.tv-btn:hover { opacity: 1; }
.tv-btn.is-pressed { transform: scale(0.86); }
.tv-controls__label {
  min-width: 86px;
  text-align: center;
  font-family: var(--font-primary);
  font-size: var(--text-nav);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
  transition: color var(--duration-base) var(--ease-out-expo);
}
.tv-controls__label span { color: var(--ink); }