/* One owner for site surrounds. Cover art remains inside its own card. */
body:has(#app) {
  --surround-image: url("assets/night-lobby.webp");
  --surround-position: center top;
  --surround-mobile-position: 68% top;
  --surround-tint: #0c1319;
  --surround-mask: linear-gradient(180deg, #0b121d48 0, #0b121db3 420px, #0b121de8 980px);
  --chrome-text: #d6d0c4;
  --chrome-muted: #b1b5b0;
  --chrome-accent: #c4ab85;
  --chrome-line: #b39a743b;
  background: var(--surround-tint);
  isolation: isolate;
  color-scheme: dark;
}
body:has(#app)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--surround-mask), var(--surround-image) var(--surround-position) / cover no-repeat;
  opacity: 1;
}
body:has(#app > .archive-case) {
  --surround-image: url("assets/case-street-background.webp");
  --surround-mobile-position: 66% top;
}
body:has(#app > .moor-quick) {
  --surround-image: url("assets/case-moor-background.webp");
  --surround-tint: #131b19;
  --surround-mask: linear-gradient(180deg, #10191545, #101915b8 440px, #101915ed 980px);
  --surround-mobile-position: 70% top;
}
body:has(#app > .signal-quick) {
  --surround-image: url("assets/case-signal-background.webp");
  --surround-tint: #101a20;
  --surround-mobile-position: 70% top;
}
body:has(#app > .murdle-page .murdle-progress) {
  --surround-image: url("assets/case-murdle-background.webp");
  --surround-tint: #151b19;
  --surround-mobile-position: 70% top;
}
body:has(#app):not(:has(#app > :is(.case-selection, .lab-hub, .linked-library))) > #app {
  max-width: 1480px;
  padding: 28px 4.2% 56px;
}
body:has(#app) > footer {
  max-width: 1480px;
  padding: 24px 4.2% 30px;
  color: var(--chrome-muted);
  border-color: var(--chrome-line);
}

/* A reading measure shared by case introductions; investigations retain their own layouts. */
#app > :is(.archive-case, .moor-quick, .signal-quick) { max-width: 1100px; }
#app > .murdle-page:not(.lab-hub) { padding: 0; }
#app > :is(.case-selection, .lab-hub, .linked-library) > :is(.selection-head, .lab-hub-heading) h1 {
  text-shadow: 0 2px 22px #070d15b0;
}
#app > .world-methods > .world-index-head h1 {
  font: 500 clamp(1.875rem, 3.15vw, 2.875rem)/1.5 "Songti SC", "SimSun", Georgia, serif;
  color: var(--chrome-text);
}
#app > .world-methods > .world-index-head p { color: var(--chrome-muted); }

/* Small shared controls stay in the masthead, clear of the investigation. */
body:has(#app) .header-tools {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
  grid-column: 3;
  grid-row: 1;
}
body:has(#app) .music-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--chrome-line);
  border-radius: 2px;
  color: var(--chrome-muted);
  background: #0c151a55;
  font-size: .8125rem;
  white-space: nowrap;
  cursor: pointer;
}
body:has(#app) .music-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body:has(#app) .music-toggle[data-state="playing"] {
  color: #dbc6a0;
  border-color: #b49b7177;
  background: #3f493750;
}
body:has(#app) .music-toggle:focus-visible { outline: 2px solid #d9be86; outline-offset: 4px; }

@media (max-width: 900px) {
  body:has(#app):not(:has(#app > :is(.case-selection, .lab-hub, .linked-library))) .header-tools {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (max-width: 640px) {
  body:has(#app)::before {
    background:
      var(--surround-mobile-mask, var(--surround-mask)),
      var(--surround-image) var(--surround-mobile-position) / auto 850px no-repeat,
      var(--surround-tint);
  }
  body:has(#app):not(:has(#app > :is(.case-selection, .lab-hub, .linked-library))) > #app {
    padding: 23px 5% 42px;
  }
  body:has(#app) > footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 5% 28px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
  body:has(#app) .header-tools { grid-column: 2; grid-row: 1; gap: 6px; }
  body:has(#app) .music-toggle { width: 42px; min-width: 42px; padding: 10px; }
  body:has(#app) .music-label { display: none; }
}
#refresh-page .refresh-icon {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: view-box;
  transform-origin: 50% 50%;
}
#refresh-page.is-refreshing { opacity: .8; cursor: progress; }
#refresh-page.is-refreshing .refresh-icon { animation: header-refresh-spin .8s linear infinite; }
@keyframes header-refresh-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  #refresh-page .refresh-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #refresh-page.is-refreshing .refresh-icon { animation: none; }
}
body[data-motion=reduce] #refresh-page.is-refreshing .refresh-icon { animation: none; }

/* Case 002: environmental background; the catalog uses its own cover. */
body:has(#app > .murdle-page.moon-page .murdle-progress){--surround-image:url("assets/moon-landscape.webp");--surround-position:center center;}

body:has(#app > .murdle-page.village-page .murdle-progress){--surround-image:url("assets/village-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.backlot-page .murdle-progress){--surround-image:url("assets/studio-004-background.webp");--surround-position:center center;}
body:has(#app > .murdle-page.island-page .murdle-progress){--surround-image:url("assets/island-005-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.postal-page .murdle-progress){--surround-image:url("assets/postal-006-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.cemetery-page .murdle-progress){--surround-image:url("assets/cemetery-007-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.cinema-page .murdle-progress){--surround-image:url("assets/hollywood-008-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.gallery-page .murdle-progress){--surround-image:url("assets/gallery-009-background.webp");--surround-position:center center;}
body:has(#app > .murdle-page.forest-page .murdle-progress){--surround-image:url("assets/forest-010-background.webp");--surround-position:center center;}
body:has(#app > .murdle-page.institute-page .murdle-progress){--surround-image:url("assets/institute-011-background.webp");--surround-position:center center;}
body:has(#app > .murdle-page.premiere-page .murdle-progress){--surround-image:url("assets/premiere-012-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.rail-page .murdle-progress){--surround-image:url("assets/rail-013-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.observatory-page .murdle-progress){--surround-image:url("assets/observatory-014-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.grove-page .murdle-progress){--surround-image:url("assets/grove-015-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.harbor-page .murdle-progress){--surround-image:url("assets/harbor-016-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.clinic-page .murdle-progress){--surround-image:url("assets/clinic-017-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.attic-page .murdle-progress){--surround-image:url("assets/attic-018-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.castaway-page .murdle-progress){--surround-image:url("assets/castaway-019-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.screening-page .murdle-progress){--surround-image:url("assets/screening-020-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.alley-page .murdle-progress){--surround-image:url("assets/alley-021-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.director-page .murdle-progress){--surround-image:url("assets/director-022-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.webgarden-page .murdle-progress){--surround-image:url("assets/webgarden-023-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.bargain-page .murdle-progress){--surround-image:url("assets/bargain-024-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.vicar-page .murdle-progress){--surround-image:url("assets/vicar-025-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.coil-page .murdle-progress){--surround-image:url("assets/coil-026-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.hymn-page .murdle-progress){--surround-image:url("assets/hymn-027-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.convention-page .murdle-progress){--surround-image:url("assets/convention-028-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.heirloom-page .murdle-progress){--surround-image:url("assets/heirloom-029-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.relic-page .murdle-progress){--surround-image:url("assets/relic-030-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.hedge-page .murdle-progress){--surround-image:url("assets/hedge-031-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.park-page .murdle-progress){--surround-image:url("assets/park-032-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.gardenpath-page .murdle-progress){--surround-image:url("assets/gardenpath-033-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.columbarium-page .murdle-progress){--surround-image:url("assets/columbarium-034-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.yacht-page .murdle-progress){--surround-image:url("assets/yacht-035-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.studiolot-page .murdle-progress){--surround-image:url("assets/studiolot-036-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.tavern-page .murdle-progress){--surround-image:url("assets/tavern-037-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.lowroof-page .murdle-progress){--surround-image:url("assets/lowroof-038-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.millruins-page .murdle-progress){--surround-image:url("assets/millruins-039-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.studiotour-page .murdle-progress){--surround-image:url("assets/studiotour-040-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.cafecup-page .murdle-progress){--surround-image:url("assets/cafecup-041-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.freight-page .murdle-progress){--surround-image:url("assets/freight-042-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.ledshore-page .murdle-progress){--surround-image:url("assets/ledshore-043-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.soundstage-page .murdle-progress){--surround-image:url("assets/soundstage-044-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.bookfold-page .murdle-progress){--surround-image:url("assets/bookfold-045-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.rusthome-page .murdle-progress){--surround-image:url("assets/rusthome-046-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.hometown-page .murdle-progress){--surround-image:url("assets/hometown-047-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.greenroom-page .murdle-progress){--surround-image:url("assets/greenroom-048-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.drywell-page .murdle-progress){--surround-image:url("assets/drywell-049-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.starvilla-page .murdle-progress){--surround-image:url("assets/starvilla-050-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.snowabbey-page .murdle-progress){--surround-image:url("assets/snowabbey-051-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.towerbar-page .murdle-progress){--surround-image:url("assets/towerbar-052-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.cafecrest-page .murdle-progress){--surround-image:url("assets/cafecrest-053-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.ghostwaltz-page .murdle-progress){--surround-image:url("assets/ghostwaltz-054-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.ivymaze-page .murdle-progress){--surround-image:url("assets/ivymaze-055-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.propvilla-page .murdle-progress){--surround-image:url("assets/propvilla-056-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.parrotcove-page .murdle-progress){--surround-image:url("assets/parrotcove-057-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.clockvault-page .murdle-progress){--surround-image:url("assets/clockvault-058-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.rectorhall-page .murdle-progress){--surround-image:url("assets/rectorhall-059-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.finalcut-page .murdle-progress){--surround-image:url("assets/finalcut-060-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.royalty-page .murdle-progress){--surround-image:url("assets/royalty-061-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.seance-page .murdle-progress){--surround-image:url("assets/seance-062-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.revolt-page .murdle-progress){--surround-image:url("assets/revolt-063-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.talent-page .murdle-progress){--surround-image:url("assets/talent-064-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.inkvoyage-page .murdle-progress){--surround-image:url("assets/inkvoyage-065-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.coppercup-page .murdle-progress){--surround-image:url("assets/coppercup-066-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.lakecrown-page .murdle-progress){--surround-image:url("assets/lakecrown-067-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.ghoststage-page .murdle-progress){--surround-image:url("assets/ghoststage-068-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.awardslate-page .murdle-progress){--surround-image:url("assets/awardslate-069-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.froststation-page .murdle-progress){--surround-image:url("assets/froststation-070-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.lunarrelic-page .murdle-progress){--surround-image:url("assets/lunarrelic-071-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.legalhour-page .murdle-progress){--surround-image:url("assets/legalhour-072-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.lavendertour-page .murdle-progress){--surround-image:url("assets/lavendertour-073-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.woodlandstage-page .murdle-progress){--surround-image:url("assets/woodlandstage-074-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.conjurershall-page .murdle-progress){--surround-image:url("assets/conjurershall-075-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.occultshop-page .murdle-progress){--surround-image:url("assets/occultshop-076-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.officeframe-page .murdle-progress){--surround-image:url("assets/officeframe-077-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.driveinveil-page .murdle-progress){--surround-image:url("assets/driveinveil-078-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.cinderalley-page .murdle-progress){--surround-image:url("assets/cinderalley-079-background.webp");--surround-position:center center;}

body:has(#app > .murdle-page.presssilence-page .murdle-progress){--surround-image:url("assets/presssilence-080-background.webp");--surround-position:center center;}

/* All three main entrances share the same night surround. */
body:has(#app > .main-directory){--surround-mask:radial-gradient(ellipse at 50% 42%,#122c2448,#06110ed9 74%),linear-gradient(#06110c70,#080f0ee8);--chrome-accent:#d1b57d;--chrome-line:#b299603b}

/* Rain-night scenes carry their location in the illustration, against quiet ink. */
body:has(#app > .chronicle-page){--surround-image:none;--surround-tint:#091510;--surround-mask:radial-gradient(ellipse at 35% 10%,#30473765,transparent 70%),linear-gradient(#091611,#07110e)}

/* Reading keeps only a suggestion of the lobby around the illustrated page. */
body.story-reading:has(#app){--surround-tint:#09130f;--surround-mask:linear-gradient(180deg,#09150fd9,#07110ef2 650px);--surround-mobile-mask:linear-gradient(180deg,#09150fe8,#07110ef8 560px)}
body.story-reading:has(#app)>#app{padding-top:20px}
@media(max-width:680px){body.story-reading:has(#app)>#app{padding:14px 3.5% 30px}}

/* London uses the displayed scene in both full play and read-only review. */
body:has(#app)[data-story-chapter],body:has(#app [data-london-setting]) {
  --surround-position: center center;
  --surround-mobile-position: center top;
  --surround-tint: #09130f;
  --surround-mask: linear-gradient(180deg,#09150f70,#07110eb3 75%,#07110ec9);
  --surround-mobile-mask: linear-gradient(180deg,#09150f8c,#07110ebf 75%,#07110ed9);
}
body:has(#app)[data-story-chapter="0"] {
  --surround-image: url("assets/night-lobby.webp");
}
body:has(#app)[data-story-chapter="1"] {
  --surround-image: url("assets/chronicle/morning-office.webp");
}
body:has(#app)[data-story-chapter="2"],body:has(#app [data-london-setting="office"]) {
  --surround-image: url("assets/chronicle/london-office-v5.webp");
}
body:has(#app [data-london-setting="stairs"]) {
  --surround-image: url("assets/chronicle/london-service-stairs.webp");
}
body:has(#app [data-london-setting="street"]) {
  --surround-image: url("assets/chronicle/london-passage.webp");
}
body:has(#app [data-london-setting="rail"]){--surround-image:url("assets/chronicle/london-chase-platform.webp")}
body:has(#app [data-london-setting="rail-exit"]){--surround-image:url("assets/chronicle/london-chase-exit.webp")}

body:has(#app [data-london-setting="waiting-room"]){--surround-image:url("assets/chronicle/london-parley-v20-hands.webp")}

body:has(#app [data-london-setting="station-records"]){--surround-image:url("assets/chronicle/london-parley-records.webp")}

/* Later London scenes retain the same atmosphere owner and responsive veil. */
body:has(#app [data-london-setting="london-relief"]){--surround-image:url("assets/chronicle/london-scale-table.webp")}
body:has(#app [data-london-setting="london-river"]){--surround-image:url("assets/chronicle/london-shore-step.webp")}
body:has(#app [data-london-setting="london-time"]){--surround-image:url("assets/chronicle/london-clock-work.webp")}
body:has(#app [data-london-setting="london-private"]){--surround-image:url("assets/chronicle/london-parley-water.webp")}
/* Current private record reading has no implied station conversation or body identity. */
body:has(#app [data-london-setting="london-private-records"]){--surround-image:none}
body:has(#app [data-london-setting="london-street"]){--surround-image:url("assets/chronicle/london-passage.webp")}
body:has(#app [data-london-setting="london-theatre"]){--surround-image:url("assets/chronicle/london-stage-light.webp")}
body:has(#app [data-london-setting="london-plans"]){--surround-image:url("assets/chronicle/london-hidden-door.webp")}
body:has(#app [data-london-setting="london-care"]){--surround-image:url("assets/chronicle/london-rescue-passage.webp")}
body:has(#app [data-london-setting="london-yard"]){--surround-image:url("assets/chronicle/london-service-yard.webp")}
body:has(#app [data-london-setting="london-records"]){--surround-image:url("assets/chronicle/london-parley-records.webp")}