:root {
  --ink: #1c2a33;
  --ink-soft: #3a4d59;
  --parchment: #f7efdf;
  --cheese: #f0b429;
  --cheese-deep: #d4891a;
  --forest: #2f5d50;
  --forest-deep: #1d3f37;
  --celebration: #c45c26;
  --danger: #a8352b;
  --cream: #fff9ef;
  --shadow: rgba(28, 42, 51, 0.28);
  --glow: rgba(240, 180, 41, 0.55);

  /* Scenery palette. Every location plate is drawn from these so the twelve
     read as one illustrated world. Dark moods retint them further down: a
     silhouette that reads dark against the day sky has to read light against
     the night sky, so the tone flips rather than the shape. */
  --art-solid: rgba(58, 40, 28, 0.92);
  --art-solid-2: rgba(88, 60, 40, 0.92);
  --art-edge: rgba(255, 243, 214, 0.34);
  --art-lit: rgba(255, 219, 138, 0.95);
  --art-glow: rgba(255, 186, 84, 0.4);
  --art-stone: rgba(118, 104, 80, 0.96);
  --art-stone-2: rgba(64, 55, 42, 0.96);
  --art-wood: rgba(118, 80, 50, 0.92);
  --art-cloth: rgba(196, 92, 38, 0.85);
  --art-cloth-2: rgba(255, 249, 239, 0.85);
  --art-leaf: rgba(38, 74, 63, 0.9);

  --ground-1: #1d3f37;
  --ground-2: #2a5046;
  --ground-3: #16322c;
  --ground-base: #102722;

  --floor-1: #4a3626;
  --floor-2: #2e2118;
  --wall-1: rgba(96, 70, 48, 0.5);
  --wall-2: rgba(52, 38, 26, 0.5);
  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Outfit", "Segoe UI", sans-serif;
  --radius: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: var(--font-ui);
  background: #132028;
}

body {
  min-height: 100dvh;
}

button,
input {
  font: inherit;
}

.hidden {
  display: none !important;
}

.app {
  position: relative;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
}

/* ------------------------------------------------------------- backgrounds */

.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(240, 180, 41, 0.35), transparent 55%),
    linear-gradient(180deg, #6ea0b8 0%, #c9b27a 35%, #e8c98a 62%, #2f5d50 100%);
  transition: background 0.9s var(--ease), filter 0.9s var(--ease);
}

.app[data-mood="investigation"] .sky {
  background:
    radial-gradient(ellipse 60% 40% at 30% 15%, rgba(120, 140, 220, 0.25), transparent 55%),
    linear-gradient(180deg, #1b2440 0%, #2b2a52 40%, #33325c 70%, #1a2b30 100%);
}

.app[data-mood="persuasion"] .sky {
  background:
    radial-gradient(ellipse 70% 40% at 25% 20%, rgba(240, 180, 41, 0.3), transparent 55%),
    linear-gradient(180deg, #7aa8b8 0%, #d6b878 45%, #c8904a 78%, #2f5d50 100%);
}

.app[data-mood="secrecy"] .sky {
  background:
    radial-gradient(ellipse 50% 35% at 70% 10%, rgba(90, 110, 190, 0.22), transparent 55%),
    linear-gradient(180deg, #111a2e 0%, #1c2340 45%, #24203a 78%, #131d1f 100%);
}

.app[data-mood="confrontation"] .sky {
  background:
    radial-gradient(ellipse 70% 45% at 50% 8%, rgba(240, 180, 41, 0.4), transparent 52%),
    linear-gradient(180deg, #1a2740 0%, #3b2a4f 42%, #6b3a35 78%, #1d3f37 100%);
}

.app[data-mood="records"] .sky {
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(240, 180, 41, 0.22), transparent 55%),
    linear-gradient(180deg, #24313d 0%, #3a4453 45%, #5b5340 78%, #1d3f37 100%);
}

.app[data-mood="ending1"] .sky {
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255, 224, 130, 0.65), transparent 55%),
    linear-gradient(180deg, #f0b429 0%, #e8952f 35%, #c45c26 68%, #3f7a63 100%);
}

.app[data-mood="ending2"] .sky {
  background:
    radial-gradient(ellipse 60% 40% at 70% 12%, rgba(168, 53, 43, 0.45), transparent 55%),
    linear-gradient(180deg, #2a1a1e 0%, #4d2226 42%, #6d2f26 74%, #1b1b1f 100%);
}

.app[data-mood="ending3a"] .sky {
  background:
    radial-gradient(ellipse 55% 35% at 50% 12%, rgba(120, 60, 150, 0.35), transparent 55%),
    linear-gradient(180deg, #0e1420 0%, #1e1830 45%, #2a1c2e 76%, #0d1114 100%);
}

.app[data-mood="ending3b"] .sky {
  background:
    radial-gradient(ellipse 70% 45% at 50% 20%, rgba(210, 190, 120, 0.3), transparent 50%),
    linear-gradient(180deg, #241f33 0%, #3c3348 40%, #5b5449 72%, #23262a 100%);
  filter: saturate(0.65);
}

/* Night moods: flip silhouettes from dark-on-light to warm-on-dark, and cool
   the land, so every plate keeps its shape when the sky goes blue. */
.app[data-mood="investigation"],
.app[data-mood="secrecy"],
.app[data-mood="ending3a"],
.app[data-mood="ending2"],
.app[data-mood="ending3b"] {
  --art-solid: rgba(96, 84, 76, 0.95);
  --art-solid-2: rgba(126, 110, 96, 0.95);
  --art-edge: rgba(255, 240, 205, 0.42);
  --art-stone: rgba(126, 126, 128, 0.95);
  --art-stone-2: rgba(84, 84, 90, 0.95);
  --art-wood: rgba(112, 84, 62, 0.95);
  --art-cloth: rgba(168, 88, 54, 0.8);
  --art-cloth-2: rgba(206, 200, 190, 0.7);
  --art-leaf: rgba(34, 56, 56, 0.9);
  --ground-1: #16232c;
  --ground-2: #1f303a;
  --ground-3: #121c25;
  --ground-base: #0c141b;
  --floor-1: #34302f;
  --floor-2: #1b1a1c;
  --wall-1: rgba(94, 92, 106, 0.42);
  --wall-2: rgba(44, 44, 58, 0.5);
}

/* Ceremony moods: firelit dusk, so mid-tone bodies and a hotter light. */
.app[data-mood="confrontation"],
.app[data-mood="ending1"] {
  --art-solid: rgba(72, 46, 34, 0.92);
  --art-solid-2: rgba(104, 66, 44, 0.92);
  --art-lit: rgba(255, 231, 163, 0.98);
  --art-glow: rgba(255, 168, 66, 0.5);
  --art-stone: rgba(158, 134, 112, 0.92);
  --art-stone-2: rgba(108, 88, 72, 0.92);
  --ground-1: #1f3630;
  --ground-2: #2c4a41;
  --ground-3: #182b27;
  --ground-base: #10201d;
}

.scene-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* top scrim seats the status pills over any artwork; bottom scrim settles
     the land into the frame */
  background:
    linear-gradient(180deg, rgba(18, 28, 36, 0.34) 0%, transparent 13%),
    linear-gradient(180deg, transparent 52%, rgba(28, 42, 51, 0.2) 100%);
}

.scene-art::before,
.scene-art::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity 0.7s var(--ease);
}

/* Wooded hills on the horizon — the shared land every outdoor plate stands on. */
.scene-art::before {
  height: 34%;
  background:
    radial-gradient(ellipse 19% 58% at 11% 100%, var(--ground-1) 0 70%, transparent 71%),
    radial-gradient(ellipse 16% 50% at 27% 100%, var(--ground-2) 0 70%, transparent 71%),
    radial-gradient(ellipse 23% 64% at 49% 100%, var(--ground-3) 0 72%, transparent 73%),
    radial-gradient(ellipse 18% 52% at 71% 100%, var(--ground-2) 0 70%, transparent 71%),
    radial-gradient(ellipse 21% 60% at 89% 100%, var(--ground-1) 0 70%, transparent 71%),
    linear-gradient(180deg, transparent 0%, var(--ground-3) 56%, var(--ground-base) 100%);
}

/* Drifting motes / fireflies. */
.scene-art::after {
  height: 30%;
  opacity: 0.9;
  background:
    radial-gradient(circle at 18% 40%, var(--cheese) 0 7px, transparent 8px),
    radial-gradient(circle at 42% 58%, #fff4c8 0 4px, transparent 5px),
    radial-gradient(circle at 68% 34%, var(--cheese) 0 6px, transparent 7px),
    radial-gradient(circle at 84% 62%, #fff4c8 0 4px, transparent 5px),
    linear-gradient(180deg, transparent, rgba(16, 39, 34, 0.7));
  animation: drift 8s ease-in-out infinite alternate;
}

.app[data-mood="secrecy"] .scene-art::after,
.app[data-mood="ending3a"] .scene-art::after {
  opacity: 0.35;
}

/* ------------------------------------------------------------- interiors */

/* Four plates happen indoors, so they swap the wooded horizon for a floor
   and lose the fireflies. Without this every interior sat in a forest. */
.app[data-location="archive"] .scene-art::before,
.app[data-location="chamber"] .scene-art::before,
.app[data-location="kitchen"] .scene-art::before,
.app[data-location="mayor"] .scene-art::before {
  height: 30%;
  background:
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 86px),
    linear-gradient(180deg, var(--floor-1) 0%, var(--floor-2) 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
}

.app[data-location="archive"] .scene-art::after,
.app[data-location="chamber"] .scene-art::after,
.app[data-location="kitchen"] .scene-art::after,
.app[data-location="mayor"] .scene-art::after {
  height: 22%;
  opacity: 0.5;
  background:
    radial-gradient(circle at 26% 30%, rgba(255, 236, 190, 0.5) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 52%, rgba(255, 236, 190, 0.4) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 26%, rgba(255, 236, 190, 0.45) 0 3px, transparent 4px),
    linear-gradient(180deg, transparent, rgba(24, 18, 14, 0.6));
}

/* ------------------------------------------------------ per-place scenery */

/* Composition contract for every plate below.

   The dialogue box occupies roughly 27%–80% of the viewport height and, below
   about 1100px wide, the full width. So a motif may only live in one of three
   places: the LOW band (bottom-anchored, under the box), the TOP band
   (0–26%, above the box), or spread FULL-HEIGHT as a pattern that reads as
   texture rather than as a single sliceable object. Nothing recognisable is
   ever parked at mid-height in the middle of the frame.

   Surfaces available per location: .place-art (full-height ambient),
   ::before (LOW motif), ::after (TOP motif). */

.place-art {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: background 0.6s var(--ease);
}

.place-art::before,
.place-art::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  transition: opacity 0.6s var(--ease);
  animation: fade-up 0.6s var(--ease);
}

/* LOW band: sits under the dialogue box. 28% is what stays clear when a node
   shows a full list of choices and pushes the box down to 74% of the height. */
.place-art::before {
  bottom: 0;
  height: min(215px, 26%);
}

/* TOP band: sits above the dialogue box. */
.place-art::after {
  top: 0;
  height: min(210px, 25%);
}

/* --------------------------------------------- 1. Briehaven Square (outdoor)
   Rooftops of the town along the horizon; festival bunting strung overhead.
   LOW + TOP. */
.app[data-location="square"] .place-art::before {
  height: min(215px, 26%);
  background-image:
    /* chimney on every other house */
    linear-gradient(90deg, transparent 0 214px, var(--art-solid) 214px 236px, transparent 236px),
    /* two lit windows and a door per house */
    radial-gradient(circle at 50% 84%, var(--art-lit) 0 11%, transparent 12%),
    radial-gradient(circle at 30% 34%, var(--art-lit) 0 9%, transparent 10%),
    radial-gradient(circle at 70% 34%, var(--art-lit) 0 9%, transparent 10%),
    /* pale eave board where roof meets wall */
    linear-gradient(var(--art-edge), var(--art-edge)),
    /* house wall, a clear step lighter than the roof */
    linear-gradient(180deg, #7d5236 0%, #573520 100%),
    /* pitched roof */
    conic-gradient(from 133deg at 50% 0%, #3c2519 0 94deg, transparent 0),
    /* hazy rooftops further back */
    conic-gradient(from 133deg at 50% 0%, var(--art-solid-2) 0 94deg, transparent 0);
  background-size:
    304px 40px,
    152px calc(100% - 74px), 152px calc(100% - 74px), 152px calc(100% - 74px),
    152px 4px,
    152px calc(100% - 74px),
    152px 100%,
    116px calc(100% - 40px);
  background-position:
    0 calc(100% - 168px),
    0 100%, 0 100%, 0 100%,
    0 calc(100% - 74px),
    0 100%,
    0 100%,
    64px 100%;
  background-repeat: repeat-x;
}

.app[data-location="square"] .place-art::after {
  top: 6%;
  height: 160px;
  background-image:
    /* lower string */
    conic-gradient(from -31deg at 50% 100%, var(--celebration) 0 62deg, transparent 0),
    conic-gradient(from -31deg at 50% 100%, var(--cheese) 0 62deg, transparent 0),
    linear-gradient(var(--art-solid), var(--art-solid)),
    /* upper string */
    conic-gradient(from -31deg at 50% 100%, var(--cream) 0 62deg, transparent 0),
    conic-gradient(from -31deg at 50% 100%, var(--forest) 0 62deg, transparent 0),
    linear-gradient(var(--art-solid), var(--art-solid));
  background-size:
    72px 30px, 72px 30px, 100% 3px,
    72px 26px, 72px 26px, 100% 3px;
  background-position:
    0 74px, 36px 74px, 0 71px,
    18px 14px, 54px 14px, 0 11px;
  background-repeat: repeat-x;
  opacity: 0.92;
}

/* ------------------------------------------- 2. The Town Archive (interior)
   Book spines behind a floor-to-ceiling wooden shelf frame. FULL-HEIGHT. */
.app[data-location="archive"] .place-art {
  background:
    radial-gradient(ellipse 40% 34% at 14% 82%, var(--art-glow) 0 40%, transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 40%, transparent 40%, rgba(18, 12, 8, 0.55) 100%);
}

/* spines: colour bands, revealed only in the gaps between shelf boards */
.app[data-location="archive"] .place-art::before {
  top: 0;
  bottom: 0;
  height: auto;
  background-image: repeating-linear-gradient(90deg,
    #8a4a32 0 11px, #b5762c 11px 20px, #6b5330 20px 31px, #97302a 31px 39px,
    #7c5a3a 39px 52px, #c98a3a 52px 60px, #5e4a68 60px 70px, #9c6a3a 70px 83px);
  mask-image: repeating-linear-gradient(180deg,
    transparent 0 12px, #000 16px 90px, transparent 94px 96px);
  -webkit-mask-image: repeating-linear-gradient(180deg,
    transparent 0 12px, #000 16px 90px, transparent 94px 96px);
  opacity: 0.62;
}

/* shelf carcass drawn over the spines */
.app[data-location="archive"] .place-art::after {
  top: 0;
  bottom: 0;
  height: auto;
  background-image:
    repeating-linear-gradient(180deg,
      var(--art-wood) 0 12px, transparent 12px 84px, var(--art-wood) 84px 96px),
    repeating-linear-gradient(90deg,
      var(--art-wood) 0 15px, transparent 15px 176px);
  opacity: 0.78;
}

/* ------------------------------- 3. Old Wensleydale's Cottage (outdoor)
   One lit cottage off to the left with smoke, a fence, and a lone tree
   on the right. LOW. */
.app[data-location="cottage"] .place-art::before {
  height: min(215px, 26%);
  background-image:
    /* smoke curling off the chimney */
    radial-gradient(circle at 50% 50%, var(--art-edge) 0 44%, transparent 58%),
    radial-gradient(circle at 50% 50%, var(--art-edge) 0 44%, transparent 58%),
    /* chimney and its cap */
    linear-gradient(180deg, var(--art-solid-2) 0 8px, var(--art-solid) 8px 100%),
    /* lit door, then a window either side of it */
    radial-gradient(ellipse 50% 96% at 50% 100%, #ffd98f 0 99%, transparent 100%),
    radial-gradient(ellipse 50% 50% at 50% 50%, #ffd98f 0 92%, transparent 100%),
    radial-gradient(ellipse 50% 50% at 50% 50%, #ffd98f 0 92%, transparent 100%),
    /* cottage wall under a deep thatched roof */
    linear-gradient(180deg, #7a5539 0%, #55371f 100%),
    conic-gradient(from 118deg at 50% 0%, #3f2617 0 124deg, transparent 0),
    /* garden fence running off toward the tree */
    linear-gradient(var(--art-solid-2), var(--art-solid-2)),
    repeating-linear-gradient(90deg,
      var(--art-solid-2) 0 8px, transparent 8px 28px),
    /* a lone tree on the rise */
    linear-gradient(var(--art-solid), var(--art-solid)),
    radial-gradient(circle at 50% 50%, var(--art-leaf) 0 48%, transparent 50%),
    radial-gradient(circle at 50% 50%, var(--art-leaf) 0 48%, transparent 50%);
  background-size:
    58px 58px, 42px 42px,
    28px 70px,
    46px 62px, 34px 30px, 34px 30px,
    252px calc(100% - 88px),
    300px 100%,
    258px 6px, 258px 52px,
    16px 104px, 148px 148px, 104px 104px;
  background-position:
    212px calc(100% - 230px), 190px calc(100% - 194px),
    198px calc(100% - 168px),
    186px 100%, 128px calc(100% - 56px), 256px calc(100% - 56px),
    198px 100%,
    194px 100%,
    398px calc(100% - 46px), 398px 100%,
    712px 100%, 652px calc(100% - 78px), 722px calc(100% - 130px);
  background-repeat: no-repeat;
}

/* ----------------------------------------------- 4. The Shrine Plaza (outdoor)
   Two tall shrine idols standing in the left and right margins over a swept
   flagstone plaza with a ring of votive offerings. MARGIN-FLANKING + LOW. */
.app[data-location="plaza"] .place-art {
  background-image:
    /* left idol: head, shoulders, tapering plinth */
    radial-gradient(circle at 50% 50%, var(--art-stone) 0 47%, transparent 49%),
    radial-gradient(circle at 34% 46%, var(--ink) 0 12%, transparent 14%),
    radial-gradient(circle at 66% 46%, var(--ink) 0 12%, transparent 14%),
    linear-gradient(180deg, var(--art-stone) 0 100%),
    linear-gradient(180deg, var(--art-stone-2) 0 100%),
    /* right idol */
    radial-gradient(circle at 50% 50%, var(--art-stone) 0 47%, transparent 49%),
    radial-gradient(circle at 34% 46%, var(--ink) 0 12%, transparent 14%),
    radial-gradient(circle at 66% 46%, var(--ink) 0 12%, transparent 14%),
    linear-gradient(180deg, var(--art-stone) 0 100%),
    linear-gradient(180deg, var(--art-stone-2) 0 100%);
  background-size:
    92px 92px, 92px 92px, 92px 92px, 78px calc(100% - 176px), 124px 32px,
    92px 92px, 92px 92px, 92px 92px, 78px calc(100% - 176px), 124px 32px;
  background-position:
    18px 112px, 18px 112px, 18px 112px, 25px 100%, 2px 100%,
    calc(100% - 18px) 112px, calc(100% - 18px) 112px, calc(100% - 18px) 112px,
    calc(100% - 25px) 100%, calc(100% - 2px) 100%;
  background-repeat: no-repeat;
}

.app[data-location="plaza"] .place-art::before {
  height: min(215px, 26%);
  background-image:
    /* votive candles set out on the flagstones */
    radial-gradient(circle at 50% 22%, var(--art-lit) 0 4px, var(--art-glow) 5px 13px, transparent 14px),
    linear-gradient(var(--art-edge), var(--art-edge)),
    /* flagstones sweeping back toward the shrine */
    repeating-conic-gradient(from -100deg at 50% 118%,
      rgba(214, 200, 172, 0.2) 0 4deg, transparent 4deg 8deg),
    repeating-linear-gradient(180deg,
      rgba(214, 200, 172, 0.16) 0 2px, transparent 2px 34px);
  background-size: 78px 60px, 78px 22px, 100% 100%, 100% 100%;
  background-position: 0 calc(100% - 46px), 30px calc(100% - 24px), 0 0, 0 0;
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
  mask-image: linear-gradient(180deg, transparent 0, #000 26%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%);
  animation: candle-flicker 4.5s ease-in-out infinite alternate, fade-up 0.6s var(--ease);
}

/* ------------------------------------------ 5. The Ritual Chamber (interior)
   A vaulted stone cellar: block courses, deep vignette, torches low in the
   margins and the worn offering circle on the floor. FULL-HEIGHT + LOW. */
.app[data-location="chamber"] .place-art {
  background-image:
    /* torchlight pooling on both side walls */
    radial-gradient(ellipse 16% 26% at 7% 58%, var(--art-glow) 0 30%, transparent 72%),
    radial-gradient(ellipse 16% 26% at 93% 58%, var(--art-glow) 0 30%, transparent 72%),
    /* cellar wall behind everything */
    linear-gradient(180deg, rgba(38, 34, 34, 0.5), rgba(18, 16, 18, 0.62));
}

/* Masonry and vault shadow, laid over everything else in the room. */
.app[data-location="chamber"] .place-art::after {
  top: 0;
  bottom: 0;
  height: auto;
  background-image:
    radial-gradient(ellipse 76% 60% at 50% 48%, transparent 26%, rgba(4, 7, 12, 0.9) 100%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0 3px, transparent 3px 112px),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0 3px, transparent 3px 56px);
  background-size: 100% 100%, 112px 56px, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
}

.app[data-location="chamber"] .place-art::before {
  height: min(215px, 26%);
  background-image:
    /* two torch flames pinned to the side walls */
    radial-gradient(circle at 50% 50%, var(--art-lit) 0 34%, var(--art-glow) 40% 100%),
    radial-gradient(circle at 50% 50%, var(--art-lit) 0 34%, var(--art-glow) 40% 100%),
    /* worn offering circle, in perspective on the floor */
    radial-gradient(ellipse 26% 40% at 50% 74%,
      transparent 0 74%, var(--art-lit) 76% 86%, transparent 88%),
    radial-gradient(ellipse 34% 52% at 50% 74%,
      transparent 0 80%, rgba(255, 236, 190, 0.28) 82% 90%, transparent 92%),
    radial-gradient(ellipse 30% 44% at 50% 74%, rgba(255, 222, 150, 0.13) 0 70%, transparent 84%);
  background-size: 26px 34px, 26px 34px, 100% 100%, 100% 100%, 100% 100%;
  background-position: 7% 40px, 93% 40px, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  animation: candle-flicker 5s ease-in-out infinite alternate, fade-up 0.6s var(--ease);
}

/* -------------------------------------------------- 6. Your Kitchen (interior)
   Warm plaster room: a bright window up in the left of the top band throwing
   a light shaft, herbs hung on the right, and the counter across the bottom
   with a board, a loaf and a wheel of cheese. TOP + LOW. */
.app[data-location="kitchen"] .place-art {
  background-image:
    /* daylight falling in across the plaster from the window */
    linear-gradient(154deg, transparent 14%, rgba(255, 228, 164, 0.3) 22%,
      rgba(255, 226, 158, 0.08) 44%, transparent 58%),
    /* plaster wall, warm above the wainscot rail */
    linear-gradient(180deg, rgba(216, 176, 124, 0.82) 0%, rgba(186, 140, 92, 0.82) 62%,
      rgba(140, 96, 58, 0.82) 100%);
}

.app[data-location="kitchen"] .place-art::after {
  top: 0;
  height: min(200px, 24%);
  background-image:
    /* window: glazing bars over four sunlit panes, on a heavy sill */
    linear-gradient(var(--art-solid), var(--art-solid)),
    linear-gradient(var(--art-solid), var(--art-solid)),
    linear-gradient(var(--art-solid), var(--art-solid)),
    linear-gradient(var(--art-solid), var(--art-solid)),
    linear-gradient(180deg, #fff6d8 0%, #ffd98f 100%),
    /* pots and herb bunches hung off the rail on the far side */
    radial-gradient(ellipse 50% 50% at 50% 30%, #b9743a 0 92%, transparent 100%),
    linear-gradient(var(--art-solid-2), var(--art-solid-2)),
    radial-gradient(ellipse 50% 50% at 50% 24%, #a2622f 0 92%, transparent 100%),
    linear-gradient(var(--art-solid-2), var(--art-solid-2)),
    radial-gradient(ellipse 50% 50% at 50% 70%, var(--art-leaf) 0 90%, transparent 100%),
    linear-gradient(var(--art-solid-2), var(--art-solid-2)),
    radial-gradient(ellipse 50% 50% at 50% 70%, var(--art-leaf) 0 90%, transparent 100%),
    linear-gradient(var(--art-solid-2), var(--art-solid-2)),
    /* the rail itself */
    linear-gradient(180deg, #8b6034 0 4px, #5c3d20 4px 100%);
  background-size:
    244px 11px, 11px 130px, 244px 11px, 262px 14px, 244px 130px,
    52px 38px, 5px 24px, 42px 30px, 5px 20px,
    34px 60px, 5px 26px, 28px 48px, 5px 22px,
    290px 11px;
  background-position:
    68px 40px, 184px 40px, 68px 159px, 59px 170px, 68px 40px,
    calc(100% - 232px) 75px, calc(100% - 209px) 51px,
    calc(100% - 168px) 71px, calc(100% - 150px) 51px,
    calc(100% - 108px) 77px, calc(100% - 94px) 51px,
    calc(100% - 52px) 73px, calc(100% - 41px) 51px,
    calc(100% - 260px) 40px;
  background-repeat: no-repeat;
}

.app[data-location="kitchen"] .place-art::before {
  height: min(215px, 26%);
  background-image:
    /* the cut wedge lying beside the wheel */
    conic-gradient(from 118deg at 12% 100%, #ffd45e 0 46deg, transparent 0),
    /* wheel of cheese, rind and all */
    radial-gradient(circle at 50% 50%, #ffe08a 0 40%, var(--cheese) 42% 46%,
      var(--cheese-deep) 48% 52%, transparent 54%),
    /* loaf */
    radial-gradient(ellipse 50% 50% at 50% 82%, #b1743a 0 88%, transparent 100%),
    /* crock and mixing bowl */
    radial-gradient(ellipse 50% 50% at 50% 4%, var(--cream) 0 92%, transparent 100%),
    radial-gradient(ellipse 50% 50% at 50% 14%, #cf9a52 0 92%, transparent 100%),
    /* chopping board */
    linear-gradient(180deg, #b07d45 0 4px, #8b6034 4px 100%),
    /* counter top, then the boarded apron below it */
    repeating-linear-gradient(90deg, rgba(48, 24, 10, 0.28) 0 3px, transparent 3px 78px),
    linear-gradient(180deg, #c08b4e 0 16px, #8a5b2f 16px 34px, #6b4423 34px 100%);
  background-size:
    46px 34px, 86px 86px, 104px 46px, 74px 38px, 56px 30px,
    172px 15px,
    100% calc(100% - 96px), 100% calc(100% - 96px);
  background-position:
    172px calc(100% - 130px), 96px calc(100% - 148px), 250px calc(100% - 132px),
    calc(100% - 196px) calc(100% - 128px), calc(100% - 288px) calc(100% - 122px),
    232px calc(100% - 96px),
    0 100%, 0 100%;
  background-repeat: no-repeat;
}

/* --------------------------------------- 7. The Mayor's Office (interior)
   Panelled civic room: wainscot the full height, the town clock high on the
   left, and the mayor's desk with ledger, candle and coin stacks across the
   bottom. FULL-HEIGHT + TOP + LOW. */
.app[data-location="mayor"] .place-art {
  background-image:
    repeating-linear-gradient(90deg,
      var(--wall-2) 0 6px, transparent 6px 8px, var(--wall-1) 8px 96px,
      transparent 96px 98px, var(--wall-2) 98px 104px),
    linear-gradient(180deg, rgba(84, 62, 42, 0.3), rgba(44, 32, 22, 0.42));
}

.app[data-location="mayor"] .place-art::after {
  top: 0;
  height: 25%;
  background-image:
    /* clock hands */
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)),
    /* face and case */
    radial-gradient(circle at 50% 50%, var(--cream) 0 36%, var(--art-solid) 38% 46%, transparent 48%),
    /* civic banner hung on the right */
    conic-gradient(from -18deg at 50% 100%, var(--forest) 0 36deg, transparent 0),
    linear-gradient(180deg, var(--forest) 0 100%),
    radial-gradient(circle at 50% 50%, var(--cheese) 0 40%, transparent 42%);
  background-size:
    3px 30px, 26px 3px, 110px 110px,
    64px 22px, 64px 74px, 30px 30px;
  background-position:
    118px 62px, 120px 90px, 66px 40px,
    calc(100% - 140px) 118px, calc(100% - 140px) 44px, calc(100% - 123px) 68px;
  background-repeat: no-repeat;
}

.app[data-location="mayor"] .place-art::before {
  height: min(215px, 26%);
  background-image:
    /* candle flame + taper */
    radial-gradient(circle at 50% 50%, var(--art-lit) 0 36%, var(--art-glow) 44% 100%),
    linear-gradient(var(--cream), var(--cream)),
    /* open ledger: two leaves either side of the spine */
    radial-gradient(ellipse 50% 50% at 50% 88%, var(--cream) 0 92%, transparent 100%),
    radial-gradient(ellipse 50% 50% at 50% 88%, var(--parchment) 0 92%, transparent 100%),
    /* coin stacks */
    repeating-linear-gradient(180deg, var(--cheese) 0 5px, var(--cheese-deep) 5px 8px),
    repeating-linear-gradient(180deg, var(--cheese) 0 5px, var(--cheese-deep) 5px 8px),
    /* desk top and front */
    linear-gradient(180deg, #6f4b2c 0 12px, var(--art-solid) 12px 100%);
  background-size:
    22px 30px, 10px 46px,
    86px 40px, 86px 40px,
    34px 32px, 34px 22px, 100% 132px;
  background-position:
    172px calc(100% - 178px), 178px calc(100% - 148px),
    calc(50% - 44px) calc(100% - 132px), calc(50% + 44px) calc(100% - 132px),
    calc(100% - 210px) calc(100% - 132px), calc(100% - 166px) calc(100% - 132px),
    0 100%;
  background-repeat: no-repeat;
  animation: candle-flicker 4s ease-in-out infinite alternate, fade-up 0.6s var(--ease);
}

/* ------------------------------------------------ 8. The Gatehouse (outdoor)
   A stone arch that frames the whole scene: piers down both margins, a
   voussoir head across the top and a portcullis in the opening. The dialogue
   box sits inside the archway, so the structure is never cut.
   MARGIN-FLANKING + TOP. */
.app[data-location="gatehouse"] .place-art {
  background-image:
    /* torch brackets burning on the inside face of each tower */
    radial-gradient(circle at 50% 50%, var(--art-lit) 0 26%, var(--art-glow) 34% 100%),
    radial-gradient(circle at 50% 50%, var(--art-lit) 0 26%, var(--art-glow) 34% 100%),
    /* portcullis hanging in the top of the opening */
    repeating-linear-gradient(180deg, var(--art-solid-2) 0 6px, transparent 6px 44px),
    repeating-linear-gradient(90deg, var(--art-solid-2) 0 6px, transparent 6px 42px),
    /* arrow slits punched through each tower */
    radial-gradient(ellipse 26% 46% at 50% 50%, #17130d 0 92%, transparent 100%),
    radial-gradient(ellipse 26% 46% at 50% 50%, #17130d 0 92%, transparent 100%),
    radial-gradient(ellipse 26% 46% at 50% 50%, #17130d 0 92%, transparent 100%),
    radial-gradient(ellipse 26% 46% at 50% 50%, #17130d 0 92%, transparent 100%),
    /* block joints scored across the masonry */
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0 4px, transparent 4px 58px),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0 4px, transparent 4px 58px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 4px, transparent 4px 64px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 4px, transparent 4px 64px),
    /* the two towers, each modelled away from the gateway */
    linear-gradient(96deg, var(--art-stone) 0%, var(--art-stone-2) 82%),
    linear-gradient(264deg, var(--art-stone) 0%, var(--art-stone-2) 82%);
  background-size:
    42px 42px, 42px 42px,
    52% 120px, 52% 120px,
    30px 76px, 30px 76px, 30px 76px, 30px 76px,
    180px 100%, 180px 100%,
    180px 100%, 180px 100%,
    180px 100%, 180px 100%;
  background-position:
    150px 46%, calc(100% - 150px) 46%,
    50% 96px, 50% 96px,
    78px 22%, calc(100% - 78px) 22%, 78px 64%, calc(100% - 78px) 64%,
    0 0, 100% 0,
    0 0, 100% 0,
    0 0, 100% 0;
  background-repeat: no-repeat;
}

/* The arch head bridging the towers. Masked so the opening is cut out of it,
   which puts the dialogue box inside the archway rather than across it. */
.app[data-location="gatehouse"] .place-art::after {
  top: 0;
  height: min(215px, 26%);
  background-image:
    /* shadowed soffit right around the opening reads as depth */
    radial-gradient(ellipse 40% 82% at 50% 100%, rgba(0, 0, 0, 0.55) 0 96%, transparent 100%),
    /* voussoirs radiating out of the arch head */
    repeating-conic-gradient(from 182deg at 50% 100%,
      rgba(0, 0, 0, 0.3) 0 1.6deg, transparent 1.6deg 13deg),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0 3px, transparent 3px 52px),
    linear-gradient(180deg, var(--art-stone) 0%, var(--art-stone-2) 100%);
  mask-image: radial-gradient(ellipse 34% 78% at 50% 100%, transparent 0 99%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse 34% 78% at 50% 100%, transparent 0 99%, #000 100%);
}

.app[data-location="gatehouse"] .place-art::before {
  height: min(170px, 22%);
  background-image:
    /* cobbled road running out under the gate */
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, 0.18) 0 3px, transparent 3px 44px),
    linear-gradient(180deg, transparent 0%, rgba(58, 50, 40, 0.7) 55%);
  mask-image: linear-gradient(90deg, transparent 10%, #000 26% 74%, transparent 90%);
  -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 26% 74%, transparent 90%);
}

/* --------------------------------------------------- 9. Market Row (outdoor)
   Scalloped stall awnings overhead on their posts, and the stalls themselves
   heaped with cheeses and barrels along the bottom. TOP + LOW. */
.app[data-location="market"] .place-art::after {
  top: 4%;
  height: 200px;
  background-image:
    /* scalloped valance along the front edge of the awning */
    radial-gradient(circle at 50% 0, var(--art-cloth) 0 13px, transparent 14px),
    radial-gradient(circle at 50% 0, var(--art-cloth-2) 0 13px, transparent 14px),
    /* the awning canopy: alternating stripes */
    repeating-linear-gradient(90deg,
      var(--art-cloth) 0 28px, var(--art-cloth-2) 28px 56px),
    /* short brackets carrying the canopy, kept out in the margins */
    linear-gradient(var(--art-wood), var(--art-wood)),
    linear-gradient(var(--art-wood), var(--art-wood));
  background-size: 56px 28px, 56px 28px, 100% 62px, 10px 96px, 10px 96px;
  background-position: 0 62px, 28px 62px, 0 0, 42px 56px, calc(100% - 42px) 56px;
  background-repeat: repeat-x, repeat-x, repeat-x, no-repeat, no-repeat;
  opacity: 0.92;
}

.app[data-location="market"] .place-art::before {
  height: min(215px, 26%);
  background-image:
    /* cheese wheels piled on the counter */
    radial-gradient(circle at 50% 50%, #ffd45e 0 44%, var(--cheese-deep) 46% 50%, transparent 52%),
    radial-gradient(circle at 50% 50%, #ffd45e 0 44%, var(--cheese-deep) 46% 50%, transparent 52%),
    radial-gradient(circle at 50% 50%, #ffe08a 0 44%, var(--cheese-deep) 46% 50%, transparent 52%),
    radial-gradient(circle at 50% 50%, #ffd45e 0 44%, var(--cheese-deep) 46% 50%, transparent 52%),
    /* barrel with its hoops */
    repeating-linear-gradient(180deg,
      #a9713f 0 13px, #5e3a1e 13px 17px),
    /* crate of produce */
    repeating-linear-gradient(180deg, #9c6a3a 0 9px, #7a5029 9px 12px),
    /* stall trestle, lit from the awning above */
    linear-gradient(180deg, #c08b4e 0 12px, #7d5028 12px 100%);
  background-size:
    66px 66px, 52px 52px, 52px 52px, 44px 44px,
    58px 70px, 84px 50px, 100% 118px;
  background-position:
    118px calc(100% - 118px), 186px calc(100% - 118px), 168px calc(100% - 166px),
    236px calc(100% - 118px),
    calc(100% - 140px) calc(100% - 118px), calc(100% - 240px) calc(100% - 118px),
    0 100%;
  background-repeat: no-repeat;
}

/* ------------------------------------------- 10. The Festival Barn (outdoor)
   One big timber barn: pitched roof, plank walls, hayloft window and a wide
   arched door with the festival light spilling out. LOW. */
.app[data-location="barn"] .place-art::before {
  height: min(215px, 26%);
  background-image:
    /* light spilling out of the open doors */
    radial-gradient(ellipse 50% 88% at 50% 100%, var(--art-lit) 0 60%, var(--art-glow) 62% 99%, transparent 100%),
    /* the doorway itself */
    radial-gradient(ellipse 50% 92% at 50% 100%, #40200f 0 99%, transparent 100%),
    /* hayloft hatch, up on the gable end */
    radial-gradient(ellipse 50% 74% at 50% 100%, var(--art-lit) 0 99%, transparent 100%),
    /* white barn trim along the eaves */
    linear-gradient(var(--cream), var(--cream)),
    /* plank lines down the wall */
    repeating-linear-gradient(90deg,
      rgba(64, 28, 12, 0.35) 0 3px, transparent 3px 36px),
    /* the wall, a shade lighter than the roof */
    linear-gradient(180deg, #b0603a 0%, #8d4526 100%),
    /* hay bales at either end */
    radial-gradient(ellipse 50% 50% at 50% 62%, #cfa85e 0 92%, transparent 100%),
    radial-gradient(ellipse 50% 50% at 50% 62%, #bb9149 0 92%, transparent 100%),
    /* pitched roof: one wedge, full width at the eaves */
    conic-gradient(from 100deg at 50% 0%, #6f3620 0 160deg, transparent 0);
  background-size:
    150px 84px,
    166px 92px,
    54px 30px,
    660px 7px,
    660px calc(100% - 62px),
    660px calc(100% - 62px),
    92px 40px, 66px 30px,
    660px 100%;
  background-position:
    50% 100%,
    50% 100%,
    50% calc(100% - 108px),
    50% calc(100% - 62px),
    50% 100%,
    50% 100%,
    calc(50% - 276px) 100%, calc(50% + 282px) 100%,
    50% 100%;
  background-repeat: no-repeat;
}

/* --------------------------------- 11. The Candlemakers' Row (outdoor)
   Dipped tapers hanging from the workshop rail overhead and a long bench of
   burning candles along the bottom. TOP + LOW. */
.app[data-location="candlemakers"] .place-art::after {
  top: 3%;
  height: 200px;
  background-image:
    /* pairs of dipped tapers slung over the rail to cool: one long and one
       short per 54px cell, drawn inside the cell so the row stays a row */
    linear-gradient(90deg, transparent 0 13px, #fbeec4 13px 24px, transparent 24px),
    linear-gradient(90deg, transparent 0 36px, #e6d4a2 36px 46px, transparent 46px),
    radial-gradient(ellipse 11% 46% at 34% 100%, #dcc287 0 88%, transparent 100%),
    /* the drying rail */
    linear-gradient(180deg, #a9713f 0 4px, #5c3d20 4px 100%);
  background-size: 54px 108px, 54px 76px, 54px 18px, 100% 12px;
  background-position: 0 34px, 27px 34px, 0 22px, 0 22px;
  background-repeat: repeat-x;
  opacity: 0.9;
}

.app[data-location="candlemakers"] .place-art::before {
  height: min(215px, 26%);
  background-image:
    /* One 92px cell holds a tall taper and a short one, so the row reads as
       individual candles instead of a single lit strip. */
    radial-gradient(ellipse 6% 6.5% at 29% 18%, #fffdf2 0 46%, #ffd45e 62% 88%, transparent 96%),
    radial-gradient(ellipse 5.5% 6% at 71% 30%, #fffdf2 0 46%, #ffd45e 62% 88%, transparent 96%),
    radial-gradient(ellipse 18% 16% at 29% 19%, var(--art-glow) 0 30%, transparent 80%),
    radial-gradient(ellipse 16% 14% at 71% 31%, var(--art-glow) 0 30%, transparent 80%),
    radial-gradient(ellipse 8% 18% at 29% 40%, #f7e6bb 0 94%, transparent 100%),
    radial-gradient(ellipse 7% 12% at 71% 46%, #e8d09a 0 94%, transparent 100%),
    /* the workbench they stand on */
    linear-gradient(180deg, #a9713f 0 9px, #6b4423 9px 100%);
  background-size:
    92px 100%, 92px 100%, 92px 100%, 92px 100%, 92px 100%, 92px 100%,
    100% 92px;
  background-position:
    0 100%, 0 100%, 0 100%, 0 100%, 0 100%, 0 100%,
    0 100%;
  background-repeat: repeat-x;
  animation: candle-flicker 3.5s ease-in-out infinite alternate, fade-up 0.6s var(--ease);
}

@keyframes candle-flicker {
  from { opacity: 0.78; }
  to { opacity: 1; }
}

/* ------------------------------------------------------ 12. The Altar (outdoor)
   The Cheese God's disc burning high above, and broad ceremonial steps
   climbing to the offering slab below. TOP + LOW. */
.app[data-location="altar"] .place-art {
  background-image:
    radial-gradient(ellipse 60% 34% at 50% 6%, var(--art-glow) 0 30%, transparent 72%);
}

.app[data-location="altar"] .place-art::after {
  top: 0;
  height: 30%;
  background-image:
    /* rays */
    repeating-conic-gradient(from 0deg at 50% 34%,
      rgba(255, 214, 128, 0.16) 0 3deg, transparent 3deg 11deg),
    /* the disc: a great wheel of cheese, holes and all */
    radial-gradient(circle at 42% 40%, rgba(190, 130, 30, 0.5) 0 4%, transparent 5%),
    radial-gradient(circle at 60% 56%, rgba(190, 130, 30, 0.5) 0 3%, transparent 4%),
    radial-gradient(circle at 54% 28%, rgba(190, 130, 30, 0.45) 0 2.5%, transparent 3.5%),
    radial-gradient(circle at 50% 50%, #ffd45e 0 44%, var(--cheese-deep) 46% 50%, transparent 52%);
  background-size: 100% 100%, 200px 200px, 200px 200px, 200px 200px, 200px 200px;
  background-position: 0 0, 50% 18px, 50% 18px, 50% 18px, 50% 18px;
  background-repeat: no-repeat;
  animation: floaty 6s ease-in-out infinite alternate, fade-up 0.6s var(--ease);
}

.app[data-location="altar"] .place-art::before {
  height: min(215px, 26%);
  background-image:
    /* the offering slab, waiting on the top step */
    linear-gradient(180deg, #d8c79c 0 7px, #a89170 7px 100%),
    /* five swept steps, each broader than the one above, tread edges catching
       the light so the flight reads as steps and not as a mound */
    radial-gradient(ellipse 20% 100% at 50% 100%, #e0d0a6 0 26%, #b6a17c 28% 99%, transparent 100%),
    radial-gradient(ellipse 28% 100% at 50% 100%, #d3c096 0 24%, #a8926f 26% 99%, transparent 100%),
    radial-gradient(ellipse 37% 100% at 50% 100%, #c8b489 0 22%, #9c8664 24% 99%, transparent 100%),
    radial-gradient(ellipse 48% 100% at 50% 100%, #bda87e 0 20%, #8f7a5a 22% 99%, transparent 100%),
    radial-gradient(ellipse 60% 100% at 50% 100%, #b09b72 0 18%, #816d4f 20% 99%, transparent 100%);
  background-size:
    132px 30px,
    100% 46px, 100% 46px, 100% 46px, 100% 46px, 100% 46px;
  background-position:
    50% calc(100% - 180px),
    0 calc(100% - 154px), 0 calc(100% - 120px), 0 calc(100% - 84px),
    0 calc(100% - 44px), 0 100%;
  background-repeat: no-repeat;
  opacity: 0.94;
}

.app[data-fx="shake"] .scene-art {
  animation: shake 0.55s var(--ease);
}

.app[data-fx="flash"] .sky {
  animation: flash 0.7s var(--ease);
}

@keyframes drift {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px) rotate(-0.4deg); }
  40% { transform: translateX(8px) rotate(0.4deg); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

@keyframes flash {
  0%, 100% { filter: brightness(1); }
  35% { filter: brightness(1.75) saturate(1.2); }
}

@keyframes floaty {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ----------------------------------------------------------------- top bar */

.top-bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem;
}

.status-cluster {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  min-width: 0;
}

.day-counter {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 249, 239, 0.45);
  background: rgba(28, 42, 51, 0.55);
  color: var(--cream);
  backdrop-filter: blur(6px);
  transition: background 0.4s, border-color 0.4s, color 0.4s;
}

.day-number {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.day-label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
}

.day-counter[data-urgency="warn"] {
  background: rgba(196, 92, 38, 0.85);
  border-color: #ffd9a8;
  color: #fff6e8;
}

.day-counter[data-urgency="urgent"] {
  background: rgba(168, 53, 43, 0.92);
  border-color: #ffc9c0;
  color: #fff2ef;
  animation: urgent-pulse 1.5s ease-in-out infinite;
}

@keyframes urgent-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 53, 43, 0.6); }
  50% { box-shadow: 0 0 0 10px rgba(168, 53, 43, 0); }
}

.place-plate {
  margin: 0;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cream);
  background: rgba(28, 42, 51, 0.58);
  border: 1.5px solid rgba(255, 249, 239, 0.35);
  backdrop-filter: blur(6px);
}

.place-plate::before {
  content: "◆ ";
  opacity: 0.6;
}

.icon-btn {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid rgba(255, 249, 239, 0.55);
  border-radius: 999px;
  background: rgba(28, 42, 51, 0.45);
  color: var(--cream);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform 0.2s var(--ease), background 0.2s;
}

.icon-btn:hover {
  transform: translateY(-1px);
  background: rgba(28, 42, 51, 0.7);
}

/* ----------------------------------------------------------------- screens */

.screen {
  position: relative;
  z-index: 5;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 1.25rem;
  padding-top: 4.25rem;
}

.menu-panel,
.ending-panel,
.records-panel,
.overlay-card {
  width: min(720px, 100%);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(180deg, #fff9ef 0%, #f3e7cf 100%);
  border: 1px solid rgba(212, 137, 26, 0.4);
  box-shadow: 0 20px 50px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  animation: fade-up 0.7s var(--ease);
}

.records-panel {
  width: min(920px, 100%);
}

.eyebrow {
  margin: 0 0 0.6rem;
  color: var(--forest);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-title,
.screen-title,
.ending-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.brand-title {
  font-size: clamp(2.3rem, 7vw, 3.9rem);
  max-width: 14ch;
}

.ending-title {
  font-size: clamp(2rem, 6vw, 3.1rem);
  max-width: 20ch;
}

.tagline,
.screen-lede,
.ending-summary {
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  line-height: 1.55;
  max-width: 42ch;
}

.menu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.75rem;
}

.btn {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 0.9rem 1.35rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s, opacity 0.2s, background 0.2s;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.btn:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.btn-primary {
  background: linear-gradient(180deg, var(--cheese), var(--cheese-deep));
  color: #23180a;
  box-shadow: 0 8px 20px rgba(212, 137, 26, 0.35);
}

.btn-secondary {
  background: rgba(47, 93, 80, 0.12);
  color: var(--forest-deep);
  border: 2px solid rgba(47, 93, 80, 0.35);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 2px solid rgba(28, 42, 51, 0.2);
}

/* ------------------------------------------------------------------- story */

/* Flex column with auto margins rather than centred grid content: when the
   stage is taller than the screen it overflows downward, where the page can
   scroll to it, instead of upward underneath the top bar. */
.screen-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: clamp(1rem, 3vh, 2rem);
  cursor: pointer;
}

.story-stage {
  width: min(820px, 100%);
  margin-block: auto;
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.character-slot {
  --skin: #f0d2b0;
  --hair: #5a3a28;
  --cloth: #d27b4a;
  --accent: #8b4a2a;
  width: min(150px, 34vw);
  height: min(210px, 48vw);
  aspect-ratio: auto;
  border-radius: 0;
  position: relative;
  background: transparent;
  box-shadow: none;
  animation: floaty 3.5s ease-in-out infinite alternate;
  transition: transform 0.4s var(--ease), filter 0.4s;
  filter: drop-shadow(0 14px 18px rgba(28, 42, 51, 0.28));
}

.character-slot .sprite-head,
.character-slot .sprite-torso,
.character-slot .sprite-arm,
.character-slot .sprite-leg,
.character-slot .sprite-extra {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.character-slot .sprite-head {
  width: 42%;
  aspect-ratio: 1;
  left: 29%;
  top: 4%;
  border-radius: 48% 48% 42% 42%;
  background:
    radial-gradient(circle at 32% 42%, #1c2a33 0 7%, transparent 8%),
    radial-gradient(circle at 68% 42%, #1c2a33 0 7%, transparent 8%),
    radial-gradient(circle at 50% 18%, var(--hair) 0 34%, transparent 35%),
    linear-gradient(180deg, var(--skin) 0 100%);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.06);
  z-index: 3;
}

.character-slot .sprite-torso {
  width: 48%;
  height: 34%;
  left: 26%;
  top: 30%;
  border-radius: 18px 18px 12px 12px;
  background: linear-gradient(180deg, var(--cloth) 0 70%, var(--accent) 71% 100%);
  z-index: 2;
}

.character-slot .sprite-arm {
  width: 14%;
  height: 28%;
  top: 32%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cloth) 0 42%, var(--skin) 43% 100%);
  z-index: 1;
}

.character-slot .sprite-arm-l { left: 10%; transform: rotate(8deg); }
.character-slot .sprite-arm-r { right: 10%; transform: rotate(-8deg); }

.character-slot .sprite-leg {
  width: 16%;
  height: 30%;
  top: 62%;
  border-radius: 10px 10px 8px 8px;
  background: linear-gradient(180deg, var(--accent) 0 78%, #2a1c14 79% 100%);
  z-index: 1;
}

.character-slot .sprite-leg-l { left: 30%; }
.character-slot .sprite-leg-r { right: 30%; }

.character-slot .sprite-extra {
  display: none;
}

.character-slot::before,
.character-slot::after {
  display: none;
}

.character-slot[data-character="narrator"] {
  width: 0;
  height: 0;
  opacity: 0;
  margin: 0;
  animation: none;
  filter: none;
}

.character-slot[data-character="hero"] {
  --skin: #efd0ad;
  --hair: #6b3d22;
  --cloth: #c45c26;
  --accent: #7a3a18;
}

.character-slot[data-character="mayor"] {
  --skin: #f2d9ba;
  --hair: #3d4650;
  --cloth: #5d7f8f;
  --accent: #334e5c;
}

.character-slot[data-character="mayor"] .sprite-extra {
  display: block;
  width: 54%;
  height: 10%;
  left: 23%;
  top: 0;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #d4af37, #9a7b1a);
  z-index: 4;
}

.character-slot[data-character="survivor"] {
  --skin: #e8d0b4;
  --hair: #c9c0b2;
  --cloth: #9c8f7d;
  --accent: #6a6055;
}

.character-slot[data-character="survivor"] .sprite-extra {
  display: block;
  width: 58%;
  height: 8%;
  left: 21%;
  top: 28%;
  border-radius: 4px;
  background: #efe6d4;
  z-index: 4;
  box-shadow: 0 14px 0 #efe6d4;
}

.character-slot[data-character="guard"] {
  --skin: #e7d0b2;
  --hair: #2c3946;
  --cloth: #4a5b68;
  --accent: #2c3946;
}

.character-slot[data-character="guard"] .sprite-head {
  background:
    linear-gradient(180deg, #6b7784 0 28%, transparent 29%),
    radial-gradient(circle at 32% 48%, #1c2a33 0 7%, transparent 8%),
    radial-gradient(circle at 68% 48%, #1c2a33 0 7%, transparent 8%),
    linear-gradient(180deg, var(--skin) 0 100%);
}

.character-slot[data-character="follower"] {
  --skin: #e5d2bc;
  --hair: #1c1630;
  --cloth: #4b3f6b;
  --accent: #2a2340;
}

.character-slot[data-character="follower"] .sprite-extra {
  display: block;
  width: 70%;
  height: 18%;
  left: 15%;
  top: 2%;
  border-radius: 40% 40% 8% 8%;
  background: #2a2340;
  z-index: 4;
}

.character-slot[data-character="archivist"] {
  --skin: #f0d8ba;
  --hair: #4f4568;
  --cloth: #7d6f9c;
  --accent: #4f4568;
}

.character-slot[data-character="archivist"] .sprite-extra {
  display: block;
  width: 46%;
  height: 12%;
  left: 27%;
  top: 38%;
  border-radius: 4px;
  background: #f2ead6;
  border: 2px solid #c9b89a;
  z-index: 4;
}

.character-slot[data-character="crowd"] {
  width: min(220px, 52vw);
  height: min(180px, 42vw);
  animation: none;
}

.character-slot[data-character="crowd"] .sprite-head,
.character-slot[data-character="crowd"] .sprite-torso,
.character-slot[data-character="crowd"] .sprite-arm,
.character-slot[data-character="crowd"] .sprite-leg {
  display: none;
}

.character-slot[data-character="crowd"] .sprite-extra {
  display: block;
  inset: 18% 0 0;
  background:
    radial-gradient(circle at 18% 28%, #f0d2b0 0 10%, transparent 11%),
    radial-gradient(circle at 18% 55%, #c45c26 0 14%, transparent 15%),
    radial-gradient(circle at 50% 18%, #f0d2b0 0 11%, transparent 12%),
    radial-gradient(circle at 50% 48%, #2f5d50 0 16%, transparent 17%),
    radial-gradient(circle at 82% 28%, #f0d2b0 0 10%, transparent 11%),
    radial-gradient(circle at 82% 55%, #d4891a 0 14%, transparent 15%);
}

.character-slot[data-character="cheeseGod"] {
  --skin: #ffd45e;
  width: min(200px, 46vw);
  height: min(200px, 46vw);
  animation: floaty 5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 28px rgba(240, 180, 41, 0.45));
}

.character-slot[data-character="cheeseGod"] .sprite-head,
.character-slot[data-character="cheeseGod"] .sprite-torso,
.character-slot[data-character="cheeseGod"] .sprite-arm,
.character-slot[data-character="cheeseGod"] .sprite-leg {
  display: none;
}

.character-slot[data-character="cheeseGod"] .sprite-extra {
  display: block;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, #fff7d6 0 10%, transparent 11%),
    radial-gradient(circle at 34% 46%, #2a1a05 0 4%, transparent 5%),
    radial-gradient(circle at 66% 46%, #2a1a05 0 4%, transparent 5%),
    radial-gradient(circle at 50% 55%, #ffd45e 0 40%, var(--cheese-deep) 41% 56%, #a8650f 57% 70%, transparent 71%);
}

.dialogue-box {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 0.9rem;
  row-gap: 0.15rem;
  background: linear-gradient(180deg, rgba(255, 249, 239, 0.98), rgba(247, 239, 223, 0.96));
  border: 2px solid rgba(28, 42, 51, 0.16);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1rem;
  box-shadow: 0 16px 36px var(--shadow);
  min-height: 9.5rem;
  align-items: start;
}

.dialogue-box[data-has-portrait="true"] {
  grid-template-columns: auto 1fr;
}

.dialogue-portrait {
  grid-column: 1;
  grid-row: 1;
  width: clamp(72px, 16vw, 104px);
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(28, 42, 51, 0.18);
  background: #fff9ef;
  box-shadow: 0 8px 18px rgba(28, 42, 51, 0.16);
  align-self: start;
}

.dialogue-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  image-rendering: auto;
}

.dialogue-copy {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.dialogue-box[data-has-portrait="true"] .dialogue-copy {
  grid-column: 2;
}

.dialogue-box .choice-preview,
.dialogue-box .choice-list,
.dialogue-box .click-hint {
  grid-column: 1 / -1;
}

.speaker {
  margin: 0 0 0.35rem;
  min-height: 1rem;
  color: var(--forest);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dialogue-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 2.7vw, 1.42rem);
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
}

/* ----------------------------------------------------------------- cast select */

.cast-panel {
  width: min(920px, 100%);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(180deg, #fff9ef 0%, #f3e7cf 100%);
  border: 1px solid rgba(212, 137, 26, 0.4);
  box-shadow: 0 20px 50px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  animation: fade-up 0.7s var(--ease);
}

.cast-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.6rem;
}

.cast-card {
  appearance: none;
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  text-align: center;
  cursor: pointer;
  padding: 0.9rem 0.75rem 1rem;
  border-radius: 18px;
  border: 2px solid rgba(212, 137, 26, 0.4);
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.95), rgba(247, 232, 199, 0.92));
  color: var(--ink);
  transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s;
  animation: pop-in 0.4s var(--ease) both;
}

.cast-card:nth-child(2) { animation-delay: 0.06s; }
.cast-card:nth-child(3) { animation-delay: 0.12s; }

.cast-card:hover,
.cast-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--cheese-deep);
  box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.28);
  outline: none;
}

.cast-card-art {
  width: min(100%, 160px);
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(28, 42, 51, 0.14);
  background: #fff;
}

.cast-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
}

.cast-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
}

.cast-card-blurb {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.35;
  max-width: 18ch;
}

@media (max-width: 720px) {
  .cast-grid {
    grid-template-columns: 1fr;
  }

  .cast-card {
    grid-template-columns: auto 1fr;
    text-align: left;
    justify-items: start;
    align-items: center;
    column-gap: 0.9rem;
  }

  .cast-card-art {
    width: 88px;
    grid-row: span 2;
  }

  .cast-card-blurb {
    max-width: none;
  }
}

.click-hint {
  margin: 0.9rem 0 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
  opacity: 0.72;
}

/* ----------------------------------------------------------------- choices */

.choice-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(212, 137, 26, 0.5);
  max-height: 44vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.choice-btn {
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 2px solid rgba(212, 137, 26, 0.45);
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.9), rgba(247, 232, 199, 0.9));
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  font-weight: 500;
  line-height: 1.35;
  animation: pop-in 0.35s var(--ease) both;
  transition: transform 0.18s var(--ease), border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.choice-btn:nth-child(2) { animation-delay: 0.05s; }
.choice-btn:nth-child(3) { animation-delay: 0.1s; }
.choice-btn:nth-child(4) { animation-delay: 0.15s; }
.choice-btn:nth-child(5) { animation-delay: 0.2s; }
.choice-btn:nth-child(6) { animation-delay: 0.25s; }
.choice-btn:nth-child(7) { animation-delay: 0.3s; }

.choice-btn:hover,
.choice-btn:focus-visible {
  transform: translateX(4px);
  border-color: var(--cheese-deep);
  background: linear-gradient(180deg, #fff4d6, #f7e3b4);
  box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.25);
  outline: none;
}

/* Sits in the stage flow directly above the dialogue box, so it can never
   cover the status cluster above it or the dialogue text below it. */
.impact-banner {
  z-index: 15;
  width: min(560px, 100%);
  margin: 0;
  padding: 0.95rem 1.2rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff4d6 0%, #f2d99a 100%);
  border: 2px solid var(--cheese-deep);
  box-shadow: 0 14px 34px rgba(28, 42, 51, 0.4), 0 0 0 6px rgba(240, 180, 41, 0.18);
  animation: impact-in 0.5s var(--ease);
  text-align: left;
}

.impact-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  color: #6b3d05;
}

.impact-title::before {
  content: "✦ ";
}

.impact-body {
  margin: 0.35rem 0 0;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--ink);
}

@keyframes impact-in {
  from { opacity: 0; transform: translateY(-14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.standing {
  margin-top: 1.15rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: rgba(47, 93, 80, 0.09);
  border: 1px solid rgba(47, 93, 80, 0.2);
}

.standing-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--forest-deep);
}

.standing-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.32rem;
}

.standing-list li {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ----------------------------------------------------------------- records */

.records-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.record-card {
  padding: 1.1rem;
  border-radius: var(--radius);
  border: 2px solid rgba(28, 42, 51, 0.14);
  background: rgba(255, 255, 255, 0.5);
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}

.record-card[data-state="unlocked"] {
  border-color: var(--cheese-deep);
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.95), rgba(247, 230, 195, 0.9));
  box-shadow: 0 10px 26px rgba(212, 137, 26, 0.22);
}

.record-card[data-state="locked"] {
  filter: grayscale(0.85);
  opacity: 0.72;
}

.record-label {
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
}

.record-art {
  height: 74px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  background: linear-gradient(140deg, #2b3a44, #16222a);
}

.record-card[data-state="unlocked"][data-ending="ending1"] .record-art {
  background: linear-gradient(140deg, #f0b429, #c45c26);
}

.record-card[data-state="unlocked"][data-ending="ending2"] .record-art {
  background: linear-gradient(140deg, #6d2f26, #2a1a1e);
}

.record-card[data-state="unlocked"][data-ending="ending3a"] .record-art {
  background: linear-gradient(140deg, #2a1c2e, #0e1420);
}

.record-card[data-state="unlocked"][data-ending="ending3b"] .record-art {
  background: linear-gradient(140deg, #5b5449, #241f33);
}

.record-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.22rem;
  color: var(--ink);
}

.record-summary {
  margin: 0.45rem 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* ---------------------------------------------------------------- overlays */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(16, 24, 30, 0.6);
  backdrop-filter: blur(4px);
}

.overlay-card {
  width: min(430px, 100%);
}

.overlay-card h2 {
  margin: 0;
  font-family: var(--font-display);
}

.overlay-card p {
  margin: 0.75rem 0 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.overlay-note {
  font-size: 0.9rem;
  opacity: 0.85;
}

.volume-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.volume-row label {
  font-weight: 600;
  color: var(--ink-soft);
}

.volume-row input[type="range"] {
  width: 100%;
  accent-color: var(--cheese-deep);
}

/* ----------------------------------------------------- scene picture panel */

.scene-visual {
  width: min(520px, 100%);
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid rgba(28, 42, 51, 0.14);
  background: rgba(255, 249, 239, 0.55);
  box-shadow: 0 12px 28px rgba(28, 42, 51, 0.18);
  animation: pop-in 0.35s var(--ease);
}

.scene-visual-art {
  height: clamp(120px, 22vw, 180px);
  position: relative;
  background: linear-gradient(180deg, #6ea0b8, #2f5d50);
}

.scene-visual-art::before,
.scene-visual-art::after {
  content: "";
  position: absolute;
  inset: 0;
}

.scene-visual-caption {
  margin: 0;
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(255, 249, 239, 0.92);
}

.scene-visual-art[data-visual="festival"] {
  background:
    repeating-linear-gradient(90deg, #c45c26 0 12px, #f0b429 12px 24px, #2f5d50 24px 36px, #6ea0b8 36px 48px),
    linear-gradient(180deg, #7aa8b8 0 40%, #e8c98a 41% 70%, #2f5d50 71% 100%);
  background-size: 48px 28px, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  background-position: top, center;
}

.scene-visual-art[data-visual="barrel"]::before {
  inset: 18% 32%;
  border-radius: 42%;
  background:
    repeating-linear-gradient(180deg, #8b5a2b 0 10px, #6e4520 10px 14px),
    #8b5a2b;
  box-shadow: inset 0 0 0 4px #5a3414, 0 10px 20px rgba(0, 0, 0, 0.25);
}

.scene-visual-art[data-visual="barrel"] {
  background: radial-gradient(ellipse at 50% 80%, #c9b27a, #3a4d59);
}

.scene-visual-art[data-visual="ribbons"] {
  background:
    repeating-linear-gradient(115deg, transparent 0 14px, #c45c26 14px 20px, transparent 20px 34px),
    repeating-linear-gradient(65deg, transparent 0 18px, #f0b429 18px 24px, transparent 24px 40px),
    linear-gradient(180deg, #9eb8c8, #e8c98a);
}

.scene-visual-art[data-visual="candles"] {
  background: linear-gradient(180deg, #24313d, #5b5340);
}

.scene-visual-art[data-visual="candles"]::before {
  background-image:
    radial-gradient(circle at 20% 35%, #ffb347 0 6px, transparent 7px),
    linear-gradient(#f7efdf, #f7efdf),
    radial-gradient(circle at 50% 30%, #ffb347 0 7px, transparent 8px),
    linear-gradient(#f7efdf, #f7efdf),
    radial-gradient(circle at 80% 38%, #ffb347 0 5px, transparent 6px),
    linear-gradient(#f7efdf, #f7efdf);
  background-size: 18px 18px, 8px 55%, 20px 20px, 9px 60%, 16px 16px, 7px 48%;
  background-position: 20% 35%, 20% 55%, 50% 28%, 50% 55%, 80% 36%, 80% 58%;
  background-repeat: no-repeat;
}

.scene-visual-art[data-visual="kitchen"] {
  background:
    linear-gradient(90deg, #6b4a2e 0 18%, transparent 19%),
    linear-gradient(180deg, #f3e7cf 0 55%, #c9a66b 56% 100%);
}

.scene-visual-art[data-visual="kitchen"]::after {
  inset: 28% 28% auto auto;
  width: 22%;
  height: 28%;
  background: radial-gradient(circle, #ffe08a, transparent 70%);
  border-radius: 4px;
  box-shadow: inset 0 0 0 3px #5a4030;
}

.scene-visual-art[data-visual="archive"] {
  background:
    repeating-linear-gradient(90deg, #5b4634 0 18px, #3f2f22 18px 22px),
    linear-gradient(180deg, #2a2118, #1a1510);
}

.scene-visual-art[data-visual="archive"]::before {
  background:
    repeating-linear-gradient(180deg, transparent 0 18px, rgba(247, 239, 223, 0.2) 18px 20px);
}

.scene-visual-art[data-visual="survivor"] {
  background: linear-gradient(180deg, #6ea0b8 0 45%, #2f5d50 46% 100%);
}

.scene-visual-art[data-visual="survivor"]::before {
  inset: 30% 35% 10%;
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(180deg, #8b4a2a 0 18%, #c9a07a 19% 100%);
  box-shadow: 0 0 0 4px #5a3414;
}

.scene-visual-art[data-visual="shrine"] {
  background: linear-gradient(180deg, #1b2440, #2b2a52);
}

.scene-visual-art[data-visual="shrine"]::before {
  background:
    radial-gradient(circle at 25% 70%, #f0b429 0 12%, transparent 13%),
    radial-gradient(circle at 50% 62%, #ffd45e 0 16%, transparent 17%),
    radial-gradient(circle at 75% 70%, #f0b429 0 12%, transparent 13%),
    linear-gradient(180deg, transparent 55%, #1a2b30 56%);
}

.scene-visual-art[data-visual="chamber"] {
  background:
    radial-gradient(circle at 50% 70%, transparent 0 28%, rgba(240, 180, 41, 0.35) 29% 32%, transparent 33%),
    linear-gradient(180deg, #0e1420, #1e1830);
}

.scene-visual-art[data-visual="salt"] {
  background:
    radial-gradient(circle at 30% 55%, #fff 0 8%, transparent 9%),
    radial-gradient(circle at 55% 40%, #ff7a3c 0 10%, transparent 11%),
    radial-gradient(circle at 72% 60%, #9ec9ff 0 9%, transparent 10%),
    linear-gradient(180deg, #3a4d59, #1c2a33);
}

.scene-visual-art[data-visual="mayor"] {
  background:
    linear-gradient(90deg, #5d7f8f 0 22%, transparent 23%),
    linear-gradient(180deg, #dfe6ea, #8aa0ad);
}

.scene-visual-art[data-visual="mayor"]::before {
  inset: 40% 20% 15% 35%;
  background: #6e552f;
  border-radius: 4px;
  box-shadow: 0 -18px 0 #3d4650;
}

.scene-visual-art[data-visual="guards"] {
  background:
    linear-gradient(90deg, transparent 40%, #4a5b68 41% 59%, transparent 60%),
    linear-gradient(180deg, #7aa0b4, #2c3946);
}

.scene-visual-art[data-visual="guards"]::before {
  inset: 25% 42% 35%;
  background: #dfe6ea;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 28px 0 #2c3946;
}

.scene-visual-art[data-visual="market"] {
  background:
    repeating-linear-gradient(90deg, #c45c26 0 30px, #f0b429 30px 60px, #2f5d50 60px 90px),
    linear-gradient(180deg, #87a8b8 0 40%, #d6b878 41% 100%);
  background-size: 90px 35%, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  background-position: bottom, center;
}

.scene-visual-art[data-visual="barn"] {
  background: linear-gradient(180deg, #6ea0b8 0 40%, #8b5a2b 41% 100%);
}

.scene-visual-art[data-visual="barn"]::before {
  inset: 28% 18% 8%;
  background: #6e4520;
  clip-path: polygon(50% 0, 100% 28%, 100% 100%, 0 100%, 0 28%);
}

.scene-visual-art[data-visual="families"],
.scene-visual-art[data-visual="candles"] {
  /* candles already styled; families reuse the row feel */
}

.scene-visual-art[data-visual="families"] {
  background: linear-gradient(180deg, #4a5560, #2a2118);
}

.scene-visual-art[data-visual="families"]::before {
  background-image:
    radial-gradient(circle at 25% 40%, #ffb347 0 5px, transparent 6px),
    linear-gradient(#f7efdf, #f7efdf),
    radial-gradient(circle at 50% 35%, #ffb347 0 6px, transparent 7px),
    linear-gradient(#f7efdf, #f7efdf),
    radial-gradient(circle at 75% 42%, #ffb347 0 5px, transparent 6px),
    linear-gradient(#f7efdf, #f7efdf);
  background-size: 14px 14px, 6px 45%, 16px 16px, 7px 50%, 14px 14px, 6px 40%;
  background-position: 25% 38%, 25% 58%, 50% 32%, 50% 55%, 75% 40%, 75% 58%;
  background-repeat: no-repeat;
}

.scene-visual-art[data-visual="altar"] {
  background:
    linear-gradient(180deg, transparent 60%, #1d3f37 61%),
    linear-gradient(180deg, #1a2740, #6b3a35);
}

.scene-visual-art[data-visual="altar"]::before {
  inset: 45% 20% 12%;
  background: #c9b27a;
  clip-path: polygon(10% 100%, 20% 0, 80% 0, 90% 100%);
}

.scene-visual-art[data-visual="cheeseGod"] {
  background: radial-gradient(circle at 50% 50%, #ffd45e 0 28%, #d4891a 29% 42%, #1a2740 43%);
}

.scene-visual-art[data-visual="cheeseGod"]::before {
  inset: 30% 32%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff7d6 0 12%, transparent 13%),
    radial-gradient(circle at 32% 48%, #2a1a05 0 6%, transparent 7%),
    radial-gradient(circle at 68% 48%, #2a1a05 0 6%, transparent 7%),
    #f0b429;
}

.scene-visual-art[data-visual="bite"] {
  background:
    radial-gradient(circle at 50% 45%, #fff7d6 0 18%, #f0b429 19% 34%, transparent 35%),
    linear-gradient(180deg, #f0b429, #c45c26);
}

.scene-visual-art[data-visual="bite"]::before {
  inset: 28% 22% 30% 48%;
  background: #6b3a35;
  border-radius: 0 50% 40% 0;
  box-shadow: -20px 10px 0 #6b3a35;
}

.scene-visual-art[data-visual="wanted"] {
  background:
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(168, 53, 43, 0.35) 28px 30px),
    linear-gradient(180deg, #4d2226, #1b1b1f);
}

.scene-visual-art[data-visual="wanted"]::before {
  inset: 12% 28%;
  background: #f3e7cf;
  border: 4px solid #a8352b;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35);
}

.scene-visual-art[data-visual="ritual"] {
  background:
    radial-gradient(circle at 50% 70%, rgba(120, 60, 150, 0.45) 0 20%, transparent 21%),
    linear-gradient(180deg, #0e1420, #2a1c2e);
}

.scene-visual-art[data-visual="memory"] {
  background:
    radial-gradient(circle at 40% 40%, rgba(210, 190, 120, 0.35), transparent 50%),
    linear-gradient(180deg, #241f33, #5b5449);
  filter: saturate(0.7);
}

/* ---------------------------------------------------- choice hover preview */

.choice-preview {
  margin: 0.75rem 0 0.25rem;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(212, 137, 26, 0.45);
  background: rgba(255, 244, 214, 0.9);
  animation: pop-in 0.25s var(--ease);
}

.choice-preview-art {
  height: 110px;
  position: relative;
  background: #2b3a44;
}

.choice-preview-art::before,
.choice-preview-art::after {
  content: "";
  position: absolute;
  inset: 0;
}

.choice-preview-label {
  margin: 0;
  padding: 0.45rem 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}

/* Reuse place-art motifs inside the small preview / transition tiles */
.choice-preview-art[data-location],
.transition-preview[data-location] {
  background-size: cover;
}

.choice-preview-art[data-location="archive"],
.transition-preview[data-location="archive"] {
  background:
    repeating-linear-gradient(90deg, #5b4634 0 14px, #3f2f22 14px 18px),
    #2a2118;
}

.choice-preview-art[data-location="cottage"],
.transition-preview[data-location="cottage"] {
  background:
    linear-gradient(180deg, #6ea0b8 0 42%, #2f5d50 43%),
    #2f5d50;
}

.choice-preview-art[data-location="cottage"]::before,
.transition-preview[data-location="cottage"]::before {
  inset: 35% 30% 8%;
  background: #8b4a2a;
  clip-path: polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%);
}

.choice-preview-art[data-location="plaza"],
.transition-preview[data-location="plaza"] {
  background:
    radial-gradient(circle at 25% 70%, #f0b429 0 10%, transparent 11%),
    radial-gradient(circle at 50% 60%, #ffd45e 0 14%, transparent 15%),
    radial-gradient(circle at 75% 70%, #f0b429 0 10%, transparent 11%),
    linear-gradient(180deg, #1b2440, #2b2a52);
}

.choice-preview-art[data-location="chamber"],
.transition-preview[data-location="chamber"] {
  background:
    radial-gradient(circle at 50% 70%, transparent 0 22%, rgba(240, 180, 41, 0.4) 23% 26%, transparent 27%),
    #0e1420;
}

.choice-preview-art[data-location="kitchen"],
.transition-preview[data-location="kitchen"] {
  background:
    linear-gradient(90deg, #6b4a2e 0 16%, transparent 17%),
    linear-gradient(180deg, #f3e7cf 0 55%, #c9a66b 56%);
}

.choice-preview-art[data-location="mayor"],
.transition-preview[data-location="mayor"] {
  background: linear-gradient(180deg, #dfe6ea, #5d7f8f);
}

.choice-preview-art[data-location="gatehouse"],
.transition-preview[data-location="gatehouse"] {
  background:
    linear-gradient(90deg, transparent 38%, #4a5b68 39% 61%, transparent 62%),
    linear-gradient(180deg, #7aa0b4, #2c3946);
}

.choice-preview-art[data-location="market"],
.transition-preview[data-location="market"] {
  background:
    repeating-linear-gradient(90deg, #c45c26 0 24px, #f0b429 24px 48px, #2f5d50 48px 72px),
    linear-gradient(180deg, #87a8b8, #d6b878);
  background-size: 72px 40%, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  background-position: bottom, center;
}

.choice-preview-art[data-location="barn"],
.transition-preview[data-location="barn"] {
  background: linear-gradient(180deg, #6ea0b8 0 40%, #8b5a2b 41%);
}

.choice-preview-art[data-location="barn"]::before,
.transition-preview[data-location="barn"]::before {
  inset: 30% 18% 8%;
  background: #6e4520;
  clip-path: polygon(50% 0, 100% 28%, 100% 100%, 0 100%, 0 28%);
}

.choice-preview-art[data-location="candlemakers"],
.transition-preview[data-location="candlemakers"] {
  background: linear-gradient(180deg, #4a5560, #2a2118);
}

.choice-preview-art[data-location="candlemakers"]::before,
.transition-preview[data-location="candlemakers"]::before {
  background-image:
    radial-gradient(circle at 20% 40%, #ffb347 0 5px, transparent 6px),
    linear-gradient(#f7efdf, #f7efdf),
    radial-gradient(circle at 50% 35%, #ffb347 0 6px, transparent 7px),
    linear-gradient(#f7efdf, #f7efdf),
    radial-gradient(circle at 80% 42%, #ffb347 0 5px, transparent 6px),
    linear-gradient(#f7efdf, #f7efdf);
  background-size: 12px 12px, 5px 45%, 14px 14px, 6px 50%, 12px 12px, 5px 40%;
  background-position: 20% 38%, 20% 58%, 50% 32%, 50% 55%, 80% 40%, 80% 58%;
  background-repeat: no-repeat;
}

.choice-preview-art[data-location="square"],
.transition-preview[data-location="square"],
.choice-preview-art[data-location="altar"],
.transition-preview[data-location="altar"] {
  background:
    repeating-linear-gradient(90deg, #c45c26 0 10px, #f0b429 10px 20px, #2f5d50 20px 30px),
    linear-gradient(180deg, #6ea0b8, #2f5d50);
  background-size: 30px 22%, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  background-position: top, center;
}

/* --------------------------------------------------------- transitions */

.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(10, 14, 18, 0.82);
  backdrop-filter: blur(6px);
  animation: fade-up 0.35s var(--ease);
}

.transition-card {
  width: min(460px, 100%);
  text-align: center;
  color: var(--cream);
}

.place-card .transition-preview {
  height: 150px;
  border-radius: var(--radius);
  margin-bottom: 1.1rem;
  border: 2px solid rgba(255, 249, 239, 0.25);
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.place-card .transition-preview::before,
.place-card .transition-preview::after {
  content: "";
  position: absolute;
  inset: 0;
}

.transition-eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.transition-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
}

.day-card {
  padding: 1.5rem;
}

.day-transition-number {
  margin: 0.4rem 0;
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 8rem);
  font-weight: 800;
  line-height: 0.9;
  color: var(--cheese);
  text-shadow: 0 0 40px rgba(240, 180, 41, 0.45);
  animation: pop-in 0.45s var(--ease);
}

.day-transition-label {
  margin: 0;
  font-size: clamp(1rem, 3vw, 1.25rem);
  letter-spacing: 0.04em;
  opacity: 0.9;
}

.transition-overlay[data-urgency="warn"] .day-transition-number {
  color: #f0a04b;
}

.transition-overlay[data-urgency="urgent"] .day-transition-number {
  color: #ff6b5a;
  animation: urgent-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes urgent-pulse {
  from { transform: scale(1); text-shadow: 0 0 24px rgba(255, 107, 90, 0.35); }
  to { transform: scale(1.04); text-shadow: 0 0 48px rgba(255, 107, 90, 0.65); }
}

/* ---------------------------------------------------- presentation polish */

.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.85rem;
  color: var(--ink-soft);
  font-weight: 600;
  cursor: pointer;
}

.toggle-row input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--cheese-deep);
}

.dialogue-text {
  min-height: 3.2em;
}

.click-hint.is-typing {
  opacity: 0.9;
  color: var(--celebration);
}

.character-slot.cue-enlarge {
  transform: scale(1.22);
  transition: transform 0.8s var(--ease);
}

.festival-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}

.app[data-location="square"] .festival-layer {
  opacity: 1;
}

.festival-banners {
  position: absolute;
  left: 0;
  right: 0;
  top: 8%;
  height: 48px;
  background:
    repeating-linear-gradient(90deg,
      #c45c26 0 18px,
      #f0b429 18px 36px,
      #2f5d50 36px 54px,
      #6ea0b8 54px 72px);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 96% 100%, 92% 55%, 88% 100%, 84% 55%, 80% 100%, 76% 55%, 72% 100%, 68% 55%, 64% 100%, 60% 55%, 56% 100%, 52% 55%, 48% 100%, 44% 55%, 40% 100%, 36% 55%, 32% 100%, 28% 55%, 24% 100%, 20% 55%, 16% 100%, 12% 55%, 8% 100%, 4% 55%, 0 100%);
  transform-origin: top center;
  animation: banner-sway 3.8s ease-in-out infinite alternate;
  opacity: 0.85;
}

.festival-dancers {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 14%;
  height: 54px;
  background:
    radial-gradient(circle at 12% 40%, #f0d2b0 0 8px, transparent 9px),
    radial-gradient(circle at 12% 78%, #c45c26 0 14px, transparent 15px),
    radial-gradient(circle at 32% 35%, #f0d2b0 0 8px, transparent 9px),
    radial-gradient(circle at 32% 78%, #2f5d50 0 14px, transparent 15px),
    radial-gradient(circle at 55% 38%, #f0d2b0 0 8px, transparent 9px),
    radial-gradient(circle at 55% 78%, #d4891a 0 14px, transparent 15px),
    radial-gradient(circle at 78% 36%, #f0d2b0 0 8px, transparent 9px),
    radial-gradient(circle at 78% 78%, #5d7f8f 0 14px, transparent 15px);
  animation: dancers-bob 1.8s ease-in-out infinite alternate;
  opacity: 0.7;
}

.festival-sparks {
  position: absolute;
  inset: 10% 5% 30%;
  background:
    radial-gradient(circle at 20% 30%, #fff4c8 0 2px, transparent 3px),
    radial-gradient(circle at 70% 20%, #ffb347 0 2px, transparent 3px),
    radial-gradient(circle at 40% 60%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 85% 55%, #f0b429 0 2px, transparent 3px);
  animation: sparkle 2.4s ease-in-out infinite alternate;
  opacity: 0.8;
}

.app[data-location="square"] .sky {
  filter: saturate(1.15) brightness(1.05);
}

@keyframes banner-sway {
  from { transform: translateY(0) skewX(0deg); }
  to { transform: translateY(4px) skewX(-2deg); }
}

@keyframes dancers-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

@keyframes sparkle {
  from { opacity: 0.35; transform: translateY(0); }
  to { opacity: 0.9; transform: translateY(-6px); }
}

.world-fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.app[data-cue] .world-fx {
  opacity: 1;
}

.world-fx.cue-wind {
  background: linear-gradient(100deg, transparent 0 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: wind-sweep 1.2s var(--ease);
}

.world-fx.cue-bells {
  box-shadow: inset 0 0 80px rgba(240, 180, 41, 0.28);
  animation: flash 0.9s var(--ease);
}

.world-fx.cue-fear {
  background: radial-gradient(ellipse at 50% 70%, rgba(28, 42, 51, 0.25), transparent 55%);
  animation: fear-pulse 1.2s var(--ease);
}

.world-fx.cue-magic i,
.world-fx.cue-hypnosis i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff4c8;
  box-shadow: 0 0 12px #f0b429;
  animation: float-particle 1.4s var(--ease) forwards;
}

.world-fx.cue-magic i:nth-child(1) { left: 20%; top: 60%; animation-delay: 0s; }
.world-fx.cue-magic i:nth-child(2) { left: 35%; top: 70%; animation-delay: 0.08s; }
.world-fx.cue-magic i:nth-child(3) { left: 50%; top: 65%; animation-delay: 0.16s; }
.world-fx.cue-magic i:nth-child(4) { left: 62%; top: 72%; animation-delay: 0.24s; }
.world-fx.cue-magic i:nth-child(5) { left: 74%; top: 58%; animation-delay: 0.32s; }
.world-fx.cue-magic i:nth-child(6) { left: 44%; top: 52%; animation-delay: 0.4s; }

.world-fx.cue-hypnosis {
  filter: hue-rotate(40deg);
}

.world-fx.cue-festival span,
.world-fx.cue-fireworks span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffb347;
  animation: firework 1.1s var(--ease) forwards;
}

.world-fx.cue-festival span:nth-child(1),
.world-fx.cue-fireworks span:nth-child(1) { left: 25%; top: 30%; background: #f0b429; }
.world-fx.cue-festival span:nth-child(2),
.world-fx.cue-fireworks span:nth-child(2) { left: 55%; top: 22%; background: #fff; }
.world-fx.cue-festival span:nth-child(3),
.world-fx.cue-fireworks span:nth-child(3) { left: 70%; top: 35%; background: #c45c26; }
.world-fx.cue-festival span:nth-child(4),
.world-fx.cue-fireworks span:nth-child(4) { left: 40%; top: 18%; background: #6ea0b8; }
.world-fx.cue-festival span:nth-child(5),
.world-fx.cue-fireworks span:nth-child(5) { left: 60%; top: 40%; background: #ffd45e; }

.world-fx.cue-approach,
.world-fx.cue-zoom {
  background: radial-gradient(circle at 50% 40%, rgba(240, 180, 41, 0.2), transparent 45%);
  animation: zoom-pulse 1.2s var(--ease);
}

.world-fx.cue-ritual {
  background: radial-gradient(circle at 50% 60%, rgba(90, 40, 120, 0.35), transparent 50%);
}

@keyframes wind-sweep {
  from { background-position: 100% 0; opacity: 0; }
  30% { opacity: 1; }
  to { background-position: -100% 0; opacity: 0; }
}

@keyframes fear-pulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.8; }
}

@keyframes float-particle {
  from { transform: translateY(0) scale(0.6); opacity: 0; }
  20% { opacity: 1; }
  to { transform: translateY(-70px) scale(1.2); opacity: 0; }
}

@keyframes firework {
  from { transform: scale(0.4); opacity: 0; box-shadow: 0 0 0 transparent; }
  30% { opacity: 1; }
  to { transform: scale(1.8); opacity: 0; box-shadow: 0 0 24px currentColor; }
}

@keyframes zoom-pulse {
  from { transform: scale(1); opacity: 0.2; }
  50% { transform: scale(1.04); opacity: 0.75; }
  to { transform: scale(1); opacity: 0; }
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 760px) {
  .records-grid {
    grid-template-columns: 1fr;
  }

  .brand-title {
    max-width: none;
  }

  .menu-actions .btn {
    flex: 1 1 100%;
    text-align: center;
  }

  .character-slot {
    width: min(120px, 32vw);
    height: min(170px, 46vw);
  }

  .scene-visual-art {
    height: 110px;
  }
}

/* Below this width the day counter and the location plate no longer fit on one
   line, so the top bar becomes two rows and the story needs to clear it. */
@media (max-width: 580px) {
  .screen-story {
    padding-top: 7.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}