:root {
  --bg: #0b0c0e;
  --raise: #141618;
  --ink: #e7e4df;
  --muted: #9b9893;
  --green: #d7d4ce;
  --green-soft: #f3f1ec;
  --green-deep: #23262b;
  --green-mid: #3a3e44;
  --line: #34373c;
  --death: #c4c0ba;
  --death-deep: #1a1b1e;
  --header: #101114;
  --serif: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  --sans: "Segoe UI", "Helvetica Neue", sans-serif;
  --mono: Consolas, "Cascadia Mono", ui-monospace, monospace;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  --beam: 5.6rem;
  --inventory-h: 4.75rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: var(--inventory-h);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.55;
  background:
    radial-gradient(ellipse 80% 46% at 50% -12%, rgba(180, 182, 186, 0.14), transparent 58%),
    var(--bg);
}

img, video, iframe { max-width: 100%; }

a { color: var(--green); }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: #e4e1db;
  color: #141516;
  padding: 0.5rem 0.8rem;
  z-index: 20;
  border-radius: 6px;
}

.skip:focus { top: 0.6rem; }

.first-screen {
  height: calc(100dvh - var(--inventory-h));
  max-height: calc(100dvh - var(--inventory-h));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-anchor: none;
}

.spark-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(18, 18, 18, 0.94);
  border-bottom: 1px solid #242424;
  backdrop-filter: blur(10px);
}

.site-header a {
  display: block;
  padding: 0.65rem 1rem;
  color: #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  font-size: 0.95rem;
  font-weight: 650;
}

.site-header a:hover { color: var(--green); }

.site-footer {
  padding: 2.5rem 1.25rem 3rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}

.site-footer p { margin: 0.2rem 0; }

.powered { letter-spacing: 0.04em; }

/* "Powered by HAWKES GEN" on every page, and the parent company on the home page. */
.powered-mark {
  color: var(--ink);
  font-weight: 650;
  letter-spacing: 0.22em;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.powered-mark:hover,
.powered-mark:focus-visible { color: var(--green-soft); border-bottom-color: var(--muted); }

.parent-company { font-size: 0.85rem; }

.parent-company a { color: inherit; text-underline-offset: 0.2em; }

.parent-company a:hover { color: var(--ink); }

/* Hawkes Analytics (js/analytics.js): the footer's privacy line, the privacy page's switch, and the feedback card. */
.stats-note { font-size: 0.78rem; opacity: 0.75; }

.stats-note a { color: inherit; text-underline-offset: 0.2em; }

.analytics-choice { margin: 1.2rem 0; }

.analytics-toggle {
  font: inherit;
  color: #f4f2ee;
  background: var(--green-deep);
  border: 1px solid #5a5e64;
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

.analytics-toggle:hover { background: #3c4046; }

/* The SDK's card is fixed to the corner of its host: a zero-height strip just above the inventory bar, so the
   card never sits on the flashlight or a story's items (the transform makes the strip its containing block). */
[data-hawkes-ask] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--inventory-h);
  height: 0;
  transform: translateZ(0);
  z-index: 2147483000;
}

.spark {
  scroll-margin-top: 3.4rem;
  width: min(920px, calc(100% - 1.25rem));
  flex: 1;
  min-height: 0;
  height: auto;
  max-height: none;
  margin: 0.35rem auto;
  padding: 0.7rem 0.9rem 0.75rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(210, 212, 216, 0.08), transparent 32%),
    #121417;
  border: 1px solid #3a3d42;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.spark[data-state="dead"] {
  border-color: #5c5854;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 34%),
    #0e0f11;
}

.spark-kicker {
  margin: 0;
  color: var(--green);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.live-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: #d5d2cc;
  box-shadow: 0 0 0 0 rgba(213, 210, 204, 0.45);
  animation: pulse 1.8s ease-out infinite;
  vertical-align: 0.05rem;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 7px rgba(213, 210, 204, 0); }
  100% { box-shadow: 0 0 0 0 rgba(213, 210, 204, 0); }
}

.spark h1 {
  margin: 0;
  color: var(--green);
  font-family: var(--sans);
  font-size: clamp(1.05rem, 2.4vh, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

.spark-sub {
  margin: 0.15rem 0 0.45rem;
  color: #a7a39c;
  font-size: 0.8rem;
}

.spark-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0;
}

.spark-step {
  color: #8e8b86;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* How much of the story you've found (unlocked scenes / all of them), in the site's English like the tabs. */
.spark-explored {
  color: #8e8b86;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.choice {
  font: inherit;
  color: #f4f2ee;
  background: var(--green-deep);
  border: 1px solid #5a5e64;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}

.choice:hover {
  background: #3c4046;
}

#spark-play {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "stage panel";
  gap: 0.55rem 1rem;
}

.spark-copy { grid-area: head; }

.spark-stage {
  grid-area: stage;
  min-height: 0;
  min-width: 0;
  display: grid;
  place-items: center;
  container-type: size;
}

.spark-panel {
  grid-area: panel;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.spark-video {
  position: relative;
  width: min(100cqw, calc(100cqh * 9 / 16));
  height: min(100cqh, calc(100cqw * 16 / 9));
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 9 / 16;
  margin: 0;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px rgba(0, 0, 0, 0.35);
}

.spark-video video,
.spark-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  background: #000;
}

.spark-story {
  margin: 0 0 0.35rem;
  font-size: clamp(0.86rem, 1.7vh, 1.02rem);
  line-height: 1.35;
  white-space: pre-line;
}

.spark-question {
  margin: 0.2rem 0 0.55rem;
  color: var(--green-soft);
  font-size: clamp(0.95rem, 2vh, 1.12rem);
  font-weight: 700;
}

.spark[data-state="dead"] .spark-question { color: var(--death); }

.spark-choices {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.choice {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  text-align: left;
  transition: background 0.15s ease, transform 0.15s ease;
}

.choice:hover { transform: translateY(-1px); }

.spark-ending {
  margin: 0.55rem 0 0;
  padding: 0.55rem 0.7rem;
  color: #c8c4be;
  font-size: 0.95rem;
  line-height: 1.5;
  border: 1px dashed #6a6661;
  border-radius: 8px;
}

.blog {
  width: min(760px, calc(100% - 2rem));
  margin: 3.2rem auto 1rem;
}

.blog h2,
.passage-wrap h1,
.post-article h1,
.recent h2 {
  font-family: var(--serif);
  font-weight: 560;
}

.blog h2 {
  margin: 0 0 1.4rem;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 500;
}

.blog h2::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 1px;
  margin: 0.7rem auto 0;
  background: #8d8374;
}

.post-list {
  display: flex;
  flex-direction: column;
}

.post-card {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
  padding: 1.15rem 0;
  border-top: 1px solid #242824;
  color: inherit;
  text-decoration: none;
}

.post-list .post-card:last-child { border-bottom: 1px solid #242824; }

.post-card img {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 4px;
  background: #111;
}

.post-card time {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.post-card h3 {
  margin: 0 0 0.3rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 560;
  color: var(--ink);
}

.post-card p {
  margin: 0;
  color: #d9d3c6;
  white-space: pre-line;
}

.more {
  display: inline-block;
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.post-card:hover h3,
.post-card:hover .more { color: var(--green); }

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 42rem) 260px;
  gap: 2.4rem;
  width: min(1080px, calc(100% - 2.4rem));
  margin: 0 auto;
  padding: 1.6rem 0 2rem;
}

.post-kicker {
  display: inline-block;
  margin-bottom: 1.1rem;
  color: var(--muted);
  text-decoration: none;
}

.post-kicker:hover { color: var(--green); }

.post-article h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.15;
}

.post-article time {
  display: block;
  margin-bottom: 1.1rem;
  color: var(--muted);
}

.hero-image,
.inline-image {
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #000;
}

.hero-image { margin: 0 0 1.3rem; }

.inline-image { margin: 1.2rem 0; }

.post-body p,
.poem p {
  margin: 0 0 1rem;
}

.poem p {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.65;
  white-space: pre-line;
}

.path {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  color: var(--green-soft);
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.45;
  background: #0c120e;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.short {
  width: min(100%, 360px);
  aspect-ratio: 9 / 16;
  margin: 0 0 1.2rem;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}

.short video,
.short iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  background: #000;
}

.post-body h2 {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 560;
  margin: 0.2rem 0 0.8rem;
}

.recent h2 {
  margin: 0.2rem 0 1rem;
  font-size: 1.25rem;
}

.recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.recent-list a {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.recent-list img {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
}

.recent-list a > span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.recent-list strong {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 620;
  line-height: 1.3;
}

.recent-list a > span > span {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.3;
}

.recent-list a:hover strong { color: var(--green); }

.passage {
  width: min(640px, calc(100% - 2rem));
  margin: 2rem auto 1rem;
  text-align: center;
}

.passage h1 {
  margin: 0 0 0.8rem;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 540;
  line-height: 1.2;
}

.passage-note {
  margin: 0 0 1rem;
  color: #d7d0c3;
}

.passage video {
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  height: auto;
  margin: 0 auto 1.2rem;
  background: #000;
  border-radius: 12px;
}

.passage-prompt {
  margin: 0.2rem 0 1rem;
  color: var(--green-soft);
  font-size: 1.2rem;
  font-weight: 700;
}

.passage .spark-choices { text-align: left; }

.missing {
  width: min(40rem, calc(100% - 2rem));
  margin: 4rem auto;
  text-align: center;
}

.missing h1 {
  font-family: var(--serif);
  font-weight: 540;
}

/* A story's own link, /<id>/ (tools/build-story.mjs): it forwards to the player at once, and until it has, it shows
   the story's card (picture, title, logline) instead of a blank dark page. */
.story-link {
  width: min(28rem, calc(100% - 2rem));
  min-height: 60dvh;
  margin: 1.5rem auto;
  text-align: center;
}

.story-link img { display: block; width: 100%; max-height: 50dvh; object-fit: cover; border: 1px solid var(--green-soft); border-radius: 6px; }
.story-link h1 { font-family: var(--serif); font-weight: 540; }
.story-link p { color: var(--muted); }
.story-link-go { display: inline-block; min-width: 44px; min-height: 44px; padding: 0.55rem 1.6rem; color: #f4f2ee; background: var(--green-deep); border: 1px solid #5a5e64; border-radius: 8px; text-decoration: none; letter-spacing: 0.1em; text-transform: uppercase; }

@media (max-width: 720px) {
  #spark-play {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "head"
      "stage"
      "panel";
  }

  .spark-panel {
    justify-content: flex-start;
    min-height: min-content;
  }
}

@media (max-width: 720px) and (max-height: 500px) {
  #spark-play {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "stage panel";
  }

  .spark-panel { min-height: 0; }
}

@media (max-height: 560px) {
  .site-header a { padding: 0.28rem 0.75rem; }
  .spark { margin: 0.15rem auto; padding: 0.35rem 0.5rem 0.4rem; }
  .spark h1 { font-size: 0.95rem; }
  .spark-sub { display: none; }
  .spark-tabs { margin-bottom: 0.1rem; }
  .choice { padding: 0.28rem 0.5rem; }
  .spark-story { font-size: 0.78rem; line-height: 1.25; margin-bottom: 0.2rem; }
  .spark-question { margin: 0.05rem 0 0.25rem; font-size: 0.86rem; }
  .spark-choices { gap: 0.25rem; }
}

@media (max-width: 860px) {
  .post-layout { grid-template-columns: 1fr; }
  .recent { order: 2; }
}

@media (max-width: 560px) {
  .post-card {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 0.8rem;
  }

  .post-card img {
    width: 92px;
    height: 92px;
  }

  .post-card h3 { font-size: 1.15rem; }
}

.spark.is-tree {
  width: min(1140px, calc(100% - 1.25rem));
}

.spark-tabs { flex: none; }

/* The player's top row: back to the landing page on the left, Play/Tree on the right. */
.spark-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.35rem;
}

.spark-bar .spark-tabs { margin: 0; }

.stories-back {
  color: #b7b3ad;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.35rem 0.2rem;
  white-space: nowrap;
}

.stories-back:hover,
.stories-back:focus-visible { color: #fff; }

/* The landing page: one card per story (the cards come from story/stories.json, written by tools/build-story.mjs). */
.first-screen.is-landing {
  height: auto;
  max-height: none;
  min-height: calc(100dvh - var(--inventory-h));
  overflow: visible;
}

.spark[hidden],
.stories[hidden] { display: none; }

.stories {
  width: min(960px, calc(100% - 1.25rem));
  margin: 1.4rem auto 0.6rem;
  text-align: center;
}

.stories h1 {
  margin: 0;
  color: var(--green);
  font-family: var(--sans);
  font-size: clamp(1.15rem, 3vh, 1.7rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
}

.stories-sub {
  margin: 0.25rem 0 1.2rem;
  color: #a7a39c;
  font-size: 0.9rem;
}

.story-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 290px));
  justify-content: center;
  gap: 1rem;
}

.story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-align: left;
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(210, 212, 216, 0.08), transparent 32%),
    #121417;
  border: 1px solid #3a3d42;
  border-radius: 18px;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.story-card:hover,
.story-card:focus-visible { border-color: #8d9096; transform: translateY(-2px); }

.story-card img,
.story-card video,
.story-card-blank {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 46vh;
  object-fit: cover;
  object-position: center 35%;
  background: #0b0c0e;
}

.story-card-meta,
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  margin: 0 0 0.45rem !important;
  color: var(--muted) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.meta-runtime { color: var(--green); font-weight: 700; }
.meta-mood::before { content: "\00b7"; margin-right: 0.6rem; }

.row-title {
  margin: 1.3rem 0 0.7rem;
  color: #d9d3c6;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
}

/* The hero: the featured story, wide on a desktop, stacked on a phone. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  overflow: hidden;
  min-height: 15rem;
  color: inherit;
  text-align: left;
  text-decoration: none;
  background: #121417;
  border: 1px solid #3a3d42;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.hero:hover,
.hero:focus-visible { border-color: #8d9096; }

.hero img,
.hero-blank {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 22rem;
  min-height: 15rem;
  object-fit: cover;
  object-position: center 35%;
  background: #0b0c0e;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2rem;
  padding: 1.2rem 1.4rem;
}

.hero-kicker {
  color: var(--green);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero h2 {
  margin: 0.1rem 0 0.4rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 560;
}

.hero-text p { margin: 0 0 0.5rem; color: #d9d3c6; line-height: 1.45; }

.hero-go,
.continue-go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.3rem;
  color: #f4f2ee;
  background: #1c1e22;
  border: 1px solid #5c6066;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero:hover .hero-go,
.continue-card:hover .continue-go { color: #fff; border-color: #8d9096; }

/* Continue watching: a row that scrolls sideways inside itself, a progress bar per story. */
.continue-row[hidden] { display: none; }

.continue-list {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scroll-snap-type: x proximity;
}

.continue-card {
  flex: 0 0 min(100%, 300px);
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  overflow: hidden;
  color: inherit;
  text-align: left;
  text-decoration: none;
  background: #121417;
  border: 1px solid #3a3d42;
  border-radius: 14px;
  scroll-snap-align: start;
}

.continue-card:hover,
.continue-card:focus-visible { border-color: #8d9096; }

.continue-card img,
.continue-card video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 7.5rem;
  object-fit: cover;
}

.continue-card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.7rem 0.8rem;
}

.continue-card h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 560;
}

.continue-bar {
  display: block;
  width: 100%;
  height: 4px;
  background: #2a2d32;
  border-radius: 2px;
}

.continue-bar span { display: block; height: 100%; background: var(--green); border-radius: 2px; }

.continue-meta {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero img,
  .hero-blank { min-height: 0; max-height: 14rem; aspect-ratio: 16 / 10; }
  .continue-card { flex-basis: 100%; }
}

.story-card-text { padding: 0.8rem 1rem 1rem; }

.story-card h2 {
  margin: 0 0 0.3rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 560;
}

.story-card p {
  margin: 0;
  color: #d9d3c6;
  font-size: 0.95rem;
  line-height: 1.45;
}

.story-card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin-top: 0.7rem;
}

.story-card-explored {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-card-go {
  display: inline-block;
  padding: 0.35rem 0.95rem;
  color: #f4f2ee;
  background: #1c1e22;
  border: 1px solid #5c6066;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.story-card:hover .story-card-go { color: #fff; border-color: #8d9096; }

/* Every card's progress badge, a ribbon across its top right corner: the viewer's own progress in that story
   (js/game.js sets data-progress from its saved place). Completed is the bright one. */
.story-card-ribbon {
  position: absolute;
  top: 1.45rem;
  right: -2.6rem;
  z-index: 1;
  width: 10.5rem;
  padding: 0.32rem 0;
  color: #121417;
  background: var(--green);
  border-block: 1px solid var(--green-soft);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(45deg);
  pointer-events: none;
}

.story-card[data-progress="new"] .story-card-ribbon {
  color: var(--muted);
  background: #1c1e22;
  border-color: #4a4d53;
}

.story-card[data-progress="started"] .story-card-ribbon {
  color: #121417;
  background: #8d9096;
  border-color: #a9acb1;
}

#spark-tree {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#spark-play[hidden],
#spark-tree[hidden] { display: none; }

.tree-scroll {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.spark-tabs {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
}

.spark-tab {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  color: #b7b3ad;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
  cursor: pointer;
}

.spark-tab.is-active {
  color: #f4f2ee;
  background: #1c1e22;
  border-color: #5c6066;
}

.spark-tab:hover { color: #fff; }

.tree-view { text-align: left; }

.tree-note {
  margin: 0 0 0.8rem;
  color: #a7a39c;
  font-size: 0.86rem;
  text-align: center;
}

.tree-scroll {
  overflow: auto;
  max-height: none;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.28), transparent 55%),
    linear-gradient(180deg, #c5c6c3 0%, #9ea09c 42%, #7d7f7c 100%);
  box-shadow: inset 0 0 80px rgba(40, 42, 46, 0.35);
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
}

.tree-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.tree-scroll.is-dragging { cursor: grabbing; }

.tree-scroll,
.tree-scroll * { touch-action: none; }

.tree-canvas { position: relative; }

.tree-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.tendril {
  fill: none;
  stroke: #141416;
  stroke-width: 9;
  stroke-linecap: round;
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.28));
}

.tendril-return {
  fill: none;
  stroke: #101113;
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.9;
}

.tree-node {
  position: absolute;
  width: 150px;
  min-height: 62px;
  margin: 0;
  padding: 0.45rem 0.6rem 0.4rem;
  text-align: left;
  color: #f2f0eb;
  background: rgba(16, 17, 19, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.28);
  font: inherit;
}

/* The tree is a map, not a way around: nothing in it can be pressed. */
.tree-node.is-current {
  border-color: #f4f2ee;
  background: #0c0d0f;
}

.tree-node.is-dead { color: #c8c4be; }

/* A way you haven't taken: a "?", nothing below it. */
.tree-node.is-locked {
  color: #8e8b86;
  background: rgba(16, 17, 19, 0.6);
  border-style: dashed;
  box-shadow: none;
}

.tree-node.is-locked .tree-node-title { font-size: 1.2rem; }

.tree-node-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.2;
}

.tree-node-via {
  display: block;
  margin-top: 0.2rem;
  color: #b7b3ad;
  font-size: 0.72rem;
  line-height: 1.25;
}

.tree-edge-label {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0.1rem 0.35rem;
  color: #1a1b1d;
  background: rgba(236, 236, 232, 0.82);
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  pointer-events: none;
  white-space: nowrap;
}

.spot {
  --spot-x: -20rem;
  --spot-y: -20rem;
  --spot-r: var(--beam);
  position: relative;
  display: inline-grid;
}

h1.spot,
h2.spot,
h3.spot,
p.spot,
button.spot,
a.choice.spot,
.spark-story.spot,
.spark-question.spot,
.spark-ending.spot,
.passage-prompt.spot,
.passage-note.spot,
.recent-list strong.spot,
.tree-node-title .spot,
.tree-node-via .spot {
  display: grid;
  width: 100%;
  max-width: 100%;
}

.spark-step.spot {
  display: inline-grid;
  width: max-content;
  max-width: 100%;
}

.spot-jp,
.spot-src,
.spot-en {
  grid-area: 1 / 1;
  justify-self: stretch;
  white-space: pre-line;
}

.spot-jp,
.spot-src {
  -webkit-mask-image: radial-gradient(circle var(--spot-r) at var(--spot-x) var(--spot-y), transparent 0%, transparent 42%, #000 74%);
  mask-image: radial-gradient(circle var(--spot-r) at var(--spot-x) var(--spot-y), transparent 0%, transparent 42%, #000 74%);
}

.spot-en {
  pointer-events: none;
  color: #fffaf2;
  text-shadow: 0 0 10px rgba(255, 236, 200, 0.45);
  -webkit-mask-image: radial-gradient(circle var(--spot-r) at var(--spot-x) var(--spot-y), #000 0%, #000 42%, transparent 74%);
  mask-image: radial-gradient(circle var(--spot-r) at var(--spot-x) var(--spot-y), #000 0%, #000 42%, transparent 74%);
}

.recent-list strong.spot .spot-jp,
.recent-list strong.spot .spot-src,
.recent-list strong.spot .spot-en,
.tree-node .spot-en {
  color: inherit;
  font-size: inherit;
  text-shadow: none;
}

.inventory {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  height: var(--inventory-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  background: linear-gradient(180deg, rgba(12, 13, 15, 0), #0c0d0f 26%);
  border-top: 1px solid #2a2c30;
  pointer-events: none;
}

.inventory-label {
  margin: 0;
  color: #8e8b86;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
}

.torch-slot {
  pointer-events: auto;
  width: 5.6rem;
  height: 3.15rem;
  padding: 0;
  border-radius: 14px;
  border: 1px solid #3c4046;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.05), transparent 60%),
    #121417;
  box-shadow: inset 0 10px 16px rgba(0, 0, 0, 0.55);
  cursor: grab;
  touch-action: none;
}

.torch-slot:focus-visible {
  outline: 2px solid #d7d4ce;
  outline-offset: 3px;
}

body.is-holding .torch-slot { cursor: grabbing; }

.torch {
  position: fixed;
  z-index: 80;
  width: 28px;
  height: 76px;
  pointer-events: none;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5));
  transform: translate(-50%, 0);
}

.torch.can-slide.is-docked {
  transition: left 0.28s ease, top 0.28s ease, transform 0.28s ease;
}

.torch.is-docked { transform: translate(-50%, -50%) rotate(-72deg); }

.torch.is-held {
  transition: none;
  transform: translate(-50%, 0);
}

.torch-lens {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 36%, #fff 0 2px, #f4efe6 16%, #8a867c 48%, #24262a 74%);
  box-shadow: 0 0 0 3px #1c1e22;
}

.torch.is-held .torch-lens {
  box-shadow: 0 0 0 3px #1c1e22, 0 0 16px 5px rgba(255, 236, 200, 0.7);
}

.torch-grip {
  display: block;
  width: 16px;
  height: 48px;
  margin: -6px auto 0;
  border-radius: 3px 3px 9px 9px;
  background: linear-gradient(90deg, #232528, #7a756c 42%, #2e3034 46%, #1a1c1f 78%);
}

.torch-beam {
  position: fixed;
  z-index: 55;
  width: calc(var(--beam) * 2);
  height: calc(var(--beam) * 2);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 248, 232, 0.42) 0%, rgba(255, 244, 220, 0.14) 40%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
}

.torch-beam.is-on { opacity: 1; }

/* The inventory belongs to the stories: the landing page (js/game.js sets <html data-view>) has none. */
html[data-view="landing"] { --inventory-h: 0px; }
/* The blog belongs to the landing page: while a story is open it is not on the page, so no scroll position
   (a #blog link, scroll restoration) can show it under the story's inventory bar. */
html[data-view="story"] body > main { display: none; }
html[data-view="landing"] .inventory,
html[data-view="landing"] .torch,
html[data-view="landing"] .torch-beam { display: none; }

/* A story with its own inventory (js/kit.js: The Water Road's revolver, bullets and flask) instead of the
   flashlight: js/game.js and its branch pages set <html data-kit>. */
html[data-kit] .inventory:not(.kit),
html[data-kit] .torch,
html[data-kit] .torch-beam,
html:not([data-kit]) .inventory.kit { display: none; }

.kit-items {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.kit-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.9rem;
  padding: 0 0.7rem;
  border: 1px solid #4a3f33;
  border-radius: 14px;
  color: #d9c7a8;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 220, 170, 0.06), transparent 60%),
    #17140f;
  box-shadow: inset 0 10px 16px rgba(0, 0, 0, 0.55);
}

.kit-icon svg { display: block; height: 1.6rem; width: auto; }
.kit-revolver .kit-icon svg { height: 1.25rem; }

.kit-rounds { display: flex; gap: 2px; }
.kit-round svg { display: block; height: 1.45rem; width: auto; }
.kit-round.is-spent { opacity: 0.22; }

.kit-name {
  color: #9c8d78;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kit-count {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 30rem) {
  .kit-items { gap: 0.3rem; }
  .kit-item { padding: 0 0.45rem; gap: 0.3rem; }
  .kit-name { display: none; }
  .kit-round svg { height: 1.2rem; }
}

/* A draft story's scene with no video yet: its title where the video will be. */
.spark-video-blank,
.passage-blank {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  color: #8e8b86;
  background: radial-gradient(ellipse at 50% 45%, #1d1b18, #000 75%);
  font-family: var(--serif);
  font-size: 1.3rem;
  text-align: center;
}

.passage-blank {
  width: min(22rem, 100%);
  height: auto;
  aspect-ratio: 9 / 16;
  max-height: 60vh;
  margin: 0 auto 1.2rem;
  border-radius: 12px;
}

body.is-holding { touch-action: none; }

@media (max-width: 720px) {
  :root { --beam: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .live-dot { animation: none; }
  .choice { transition: none; }
}

/* What's new (releases.json, filled by js/hawkes-release.js) and the version in the footer. */
.releases .hawkes-release { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 1.1rem; margin-top: 1.3rem; }
.releases .hawkes-release:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.releases h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; margin: 0 0 0.4rem; }
.hawkes-release-date { margin-left: auto; opacity: 0.6; font-size: 0.85rem; font-weight: 400; }
.footer-version { font-size: 0.85rem; opacity: 0.75; }
.footer-version a { color: inherit; }

/* The standard sound setup (js/hawkes-sound.js): the Tap to play prompt and the Settings panel. */
html.is-tap-waiting, html.is-tap-waiting body { overflow: hidden; }

/* Before the title splash is up (index.html's head script sets is-splash-pending, js/hawkes-sound.js lifts it):
   the page stays hidden under a cover that looks like the splash, so nothing flashes before it. */
html.is-splash-pending, html.is-splash-pending body { overflow: hidden; }
html.is-splash-pending body { visibility: hidden; }
html.is-splash-pending::after {
  content: attr(data-tap-title);
  position: fixed;
  inset: 0;
  z-index: 8999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 170, 70, 0.16), transparent 34vmax),
    #070807;
  color: var(--green-soft);
  font-family: var(--sans);
  font-size: clamp(1.3rem, 6.2vmin, 3.4rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-align: center;
}

.tap-to-play {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 3vmin, 1.4rem);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 170, 70, 0.16), transparent 34vmax),
    #070807;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  transition: opacity 0.25s ease;
}

.tap-to-play.is-gone { opacity: 0; pointer-events: none; }

/* The landing page's title splash (splash() in js/hawkes-sound.js): the prompt's background and title, nothing to
   tap; it fades away by itself (SPLASH_FADE there matches this transition). */
.tap-splash { cursor: default; transition: opacity 0.9s ease; }
.tap-to-play:focus { outline: none; }

.tap-title {
  margin: 0;
  padding: 0 1rem;
  color: var(--green-soft);
  font-size: clamp(1.3rem, 6.2vmin, 3.4rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}

.tap-match {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #ffb347;
  box-shadow: 0 0 1.2rem 0.4rem rgba(255, 160, 60, 0.55), 0 0 3.5rem 1.4rem rgba(255, 120, 30, 0.2);
  animation: tap-flicker 1.6s ease-in-out infinite;
}

.tap-button {
  min-height: 3.2rem;
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 2rem;
  border: 1px solid var(--green-mid);
  border-radius: 999px;
  background: var(--green-deep);
  color: var(--green-soft);
  font-size: clamp(1.05rem, 4.6vmin, 1.5rem);
  font-weight: 650;
  letter-spacing: 0.08em;
}

.tap-to-play:hover .tap-button,
.tap-to-play:focus-visible .tap-button { border-color: var(--green); }

.tap-note {
  margin: 0;
  padding: 0 6vw;
  color: var(--muted);
  font-size: clamp(0.85rem, 3.2vmin, 1.05rem);
}

.tap-settings {
  margin-top: 0.4rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--muted);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: clamp(0.85rem, 3vmin, 1rem);
  cursor: pointer;
}
.tap-settings:hover, .tap-settings:focus-visible { color: var(--green-soft); border-color: var(--green); }

@keyframes tap-flicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  45% { opacity: 0.78; transform: scale(0.92); }
  60% { opacity: 0.95; transform: scale(1.05); }
}

.sound-gear {
  position: absolute;
  top: 50%;
  right: max(0.5rem, env(safe-area-inset-right));
  transform: translateY(-50%);
  min-width: 44px;
  min-height: 44px;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.sound-gear svg { width: 1.35rem; height: 1.35rem; }
.sound-gear:hover, .sound-gear:focus-visible { color: var(--green-soft); background: rgba(255, 255, 255, 0.06); }
.sound-gear.is-floating { position: fixed; top: 0.5rem; transform: none; z-index: 70; }

.sound-settings {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.62);
}

.sound-card {
  width: min(22rem, 100%);
  padding: 1.2rem 1.3rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--raise);
  box-shadow: var(--shadow);
}

.sound-card h2 {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.sound-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 3rem;
}

.sound-label { flex: 0 0 4.5rem; color: var(--ink); }

.sound-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0 0.4rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.sound-switch-knob {
  position: relative;
  width: 2.8rem;
  height: 1.55rem;
  border-radius: 999px;
  background: var(--green-mid);
  transition: background 0.15s ease;
}

.sound-switch-knob::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s ease, background 0.15s ease;
}

.sound-switch[aria-checked="true"] .sound-switch-knob { background: #c98a3c; }
.sound-switch[aria-checked="true"] .sound-switch-knob::after { transform: translateX(1.25rem); background: #fff; }

.sound-row input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 2.75rem;
  accent-color: #c98a3c;
}

.sound-row input[type="range"]:disabled { opacity: 0.4; }
.sound-value { flex: 0 0 2.8rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.sound-done {
  width: 100%;
  min-height: 2.9rem;
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--green-deep);
  color: var(--green-soft);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.sound-done:hover, .sound-done:focus-visible { border-color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .tap-match { animation: none; }
  .tap-to-play, .sound-switch-knob, .sound-switch-knob::after { transition: none; }
}

/* ---------------- console stories (js/console.js; story doc: story/README.md, "Console stories") ----------------
   One screen: the bar, the wall of camera feeds (three columns: 2x3 for six cameras, 3x3 for nine), the enlarged feed,
   then the subtitles, the line controls and the choices. Wide landscape screens put the wall on the left and the
   words on the right. Nothing may be wider than the screen; what doesn't fit scrolls up and down inside. */
html[data-type="console"] { --inventory-h: 0px; }
html[data-type="console"] .inventory,
html[data-type="console"] .torch,
html[data-type="console"] .torch-beam { display: none; }

.console[hidden] { display: none; }

.console {
  position: relative;
  flex: 1;
  min-height: 0;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0.25rem max(0.5rem, env(safe-area-inset-right)) max(0.35rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
}

.console-bar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.4rem;
  min-height: 44px;
}

.console-bar .stories-back { min-height: 44px; display: inline-flex; align-items: center; }

.console-bar h1 {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--green);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-time {
  color: #d9c58a;
  font: 700 0.95rem var(--mono);
  letter-spacing: 0.06em;
}

.console-explored { color: var(--muted); font-size: 0.66rem; white-space: nowrap; }

.console-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: #f4f2ee;
  background: var(--green-deep);
  border: 1px solid #5a5e64;
  border-radius: 8px;
  cursor: pointer;
}

.console-btn:disabled { opacity: 0.45; cursor: default; }
.console-btn[aria-pressed="true"] { background: #3a3e44; border-color: #d9c58a; }
.console-btn:focus-visible, .feed:focus-visible { outline: 2px solid #d9c58a; outline-offset: 2px; }

.console-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "stage" "panel";
  gap: 0.35rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.console.is-log .console-body { display: none; }

.wall {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.feed {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font: inherit;
  color: #cfd8d2;
  background: #000;
  border: 1px solid #3a3d42;
  border-radius: 4px;
  cursor: pointer;
}

figure.feed { cursor: default; }
.feed[data-state]:not([data-state="normal"]) { border-color: #c99a3a; }
.feed.is-selected { border-color: #d9c58a; box-shadow: 0 0 0 2px #d9c58a; }

.feed-pic, .big-pic { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.feed-pic img, .big-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.feed-blank {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%, #2a3a33, #0d1210 78%);
  color: #6f8f7f;
}

.feed-blank i { font: 700 1.15rem var(--mono); font-style: normal; letter-spacing: 0.08em; }
.feed-blank u { position: absolute; right: 4px; top: 3px; color: #e0b45a; font-size: 0.58rem; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; }

.feed-cap, .feed figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 4px 1px;
  overflow: hidden;
  font-size: 0.6rem;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}

.feed-cap b, .feed figcaption b { color: #d9c58a; }

/* The stage: the control room (js/console-room.js draws it), the one big screen both characters face (js/console.js
   owns its picture and the CRT flash) and a strip of the nine cameras under it. Nothing in it can be pressed. */
.console-stage {
  grid-area: stage;
  min-width: 0;
  width: min(100%, calc(36dvh * 1.667));
  justify-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.console-room {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: #10161a;
  border: 1px solid #3a4a52;
  border-radius: 6px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.room-art, .room-figs { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.2s ease; }
.console-room svg { display: block; width: 100%; height: 100%; }
.console-room[data-swap] .room-art, .console-room[data-swap] .room-figs { opacity: 0; }

/* The screen: over the room's screen in the room, a small inset in the corner out of it. */
.console-big {
  position: absolute;
  left: 31.25%;
  top: 5%;
  width: 37.5%;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  background: #000;
  border-radius: 2px;
}

.console-room[data-mode="away"] .console-big {
  left: 72%;
  top: 4%;
  width: 26%;
  border: 2px solid #46555b;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.big-pic { position: absolute; inset: 0; display: block; }
.big-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.big-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
  padding: 1px 4px;
  overflow: hidden;
  color: #d9c58a;
  font: 700 clamp(0.5rem, 1.9vw, 0.7rem) var(--mono);
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.7);
}
.big-mark {
  position: absolute;
  right: 0;
  top: 0;
  padding: 1px 4px;
  color: #e0b45a;
  font: 700 clamp(0.45rem, 1.6vw, 0.62rem) var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.7);
}
.big-cap { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The CRT channel change: the picture collapses to a line, snaps back bright and noisy, and settles (about 260 ms). */
.big-crt {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.7) 0 1px, rgba(10, 14, 12, 0.55) 1px 3px),
    linear-gradient(90deg, rgba(120, 140, 130, 0.5), rgba(235, 245, 240, 0.85) 50%, rgba(120, 140, 130, 0.5));
}
.console-big.is-flash .big-crt { animation: crt-static 0.26s ease-out; }
.console-big.is-flash .big-pic { animation: crt-pic 0.26s ease-out; }
@keyframes crt-static {
  0% { opacity: 1; transform: translateY(-18%); }
  45% { opacity: 0.75; transform: translateY(6%); }
  100% { opacity: 0; transform: none; }
}
@keyframes crt-pic {
  0% { filter: brightness(3.2) contrast(1.8) saturate(0); transform: scaleY(0.05); }
  30% { filter: brightness(2.1) contrast(1.4) saturate(0.4); transform: scaleY(1.04); }
  100% { filter: none; transform: none; }
}

/* The strip of the nine cameras: just the numbers and what each shows, the one on the screen lit. */
.console-wall {
  display: grid;
  grid-template-columns: repeat(var(--cams, 9), minmax(0, 1fr));
  gap: 3px;
  min-width: 0;
  pointer-events: none;
}
.console-wall .feed { cursor: default; border-radius: 3px; border-width: 1px; }
.console-wall .feed.is-selected { border-color: #d9c58a; box-shadow: 0 0 0 1px #d9c58a; }
.console-wall .feed:not(.is-selected) .feed-pic { opacity: 0.62; }
.console-wall .feed-num {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 1.05em;
  padding: 0 3px;
  color: #d9c58a;
  font: 700 clamp(0.55rem, 2vw, 0.72rem) var(--mono);
  text-align: center;
  background: rgba(0, 0, 0, 0.72);
}
.console-wall .feed-blank i { font-size: 0.7rem; }
.console-wall .feed-blank u { display: none; }

.room-action {
  flex: none;
  min-height: 1.25rem;
  margin: 0;
  padding: 0 0.2rem;
  overflow: hidden;
  color: #d9c58a;
  font: 0.72rem/1.3 var(--mono);
  letter-spacing: 0.02em;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* What the people do. Poses are inline transforms from js/console-room.js; these are the transitions and the little effects. */
.fig { transition: transform 1.25s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.3s ease; }
.fig[data-show="0"] { opacity: 0; visibility: hidden; }
.fig .rig, .fig .a, .fig .f, .fig .head, .chair-seat .push, .fig .leg { transition: transform 0.45s ease; }
.fig.no-tx, .fig.no-tx * { transition: none !important; }
.fig .tag { paint-order: stroke; stroke: #0b1114; stroke-width: 2.6px; opacity: 0.92; }
.fig .fx-anger, .fig .fx-knock, .fig .fx-talk, .fig .held { opacity: 0; }
.fig[data-angry] .fx-anger { opacity: 1; animation: fig-shake 0.18s linear 8; }
.fig[data-pose="knock"] .fx-knock { opacity: 1; animation: fig-knock 0.85s ease-in-out 2; }
.fig[data-pose="phone"] .held-phone, .fig[data-pose="drink"] .held-cup, .fig[data-pose="eat"] .held-cup, .fig[data-pose="spill"] .held-cup, .fig[data-pose="write"] .held-pencil { opacity: 1; }
.fig[data-pose="write"] .arm.r .fw { animation: fig-scribble 0.3s ease-in-out infinite alternate; }
.fig[data-pose="knock"] .arm.r .fw { animation: fig-knock-arm 0.85s ease-in-out 2; }
.fig[data-pose="angry"] .torso, .fig[data-angry] .torso { animation: fig-shake 0.14s linear infinite; }
.fig[data-pose="count"] .arm.r .fw { animation: fig-scribble 0.5s ease-in-out infinite alternate; }
.fig[data-speaking] .fx-talk { opacity: 1; animation: fig-talk 0.9s ease-in-out infinite; }
.fig[data-speaking] .head .back, .fig[data-speaking] .head .front { animation: fig-nod 0.42s ease-in-out infinite alternate; }
.fig.is-walking .leg.l { animation: fig-stride 0.42s ease-in-out infinite alternate; }
.fig.is-walking .leg.r { animation: fig-stride 0.42s ease-in-out infinite alternate-reverse; }
.fig.is-walking .torso { animation: fig-bob 0.42s ease-in-out infinite alternate; }
@keyframes fig-shake { 0%, 100% { transform: translate(-1.2px, 0); } 50% { transform: translate(1.2px, -1px); } }
@keyframes fig-scribble { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes fig-knock { 0%, 100% { opacity: 0; } 30%, 60% { opacity: 1; } }
@keyframes fig-knock-arm { 0%, 40%, 100% { transform: rotate(0); } 15%, 60% { transform: rotate(10deg); } }
@keyframes fig-talk { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes fig-nod { from { transform: translateY(0); } to { transform: translateY(-1.6px); } }
@keyframes fig-stride { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes fig-bob { from { transform: translateY(0); } to { transform: translateY(-2.4px); } }

/* The room's own things: the phone rings, the panel buzzes, the door opens, coffee spills, the tablet fills, the radios are counted. */
.console-room .ring, .console-room .door-light, .console-room .drip { opacity: 0; }
.console-room[data-ring] .ring { animation: room-ring 0.5s steps(2, jump-none) 6; }
.console-room[data-ring] .r-phone { animation: fig-shake 0.12s linear 14; }
.console-room[data-buzz] .fire-trouble { fill: #ff5a4a; animation: room-blink 0.25s steps(2, jump-none) 10; }
.console-room[data-buzz] .r-fire rect:first-child { animation: room-blink 0.25s steps(2, jump-none) 10; }
.console-room .door-leaf { transform-box: fill-box; transform-origin: left center; transition: transform 0.4s ease; }
.console-room[data-door] .door-leaf { transform: scaleX(0.22) skewY(-6deg); }
.console-room[data-door] .door-light { opacity: 1; transition: opacity 0.3s ease; }
.console-room[data-writing] .tablet-screen { fill: #f6f1b8; }
.console-room[data-writing] .tablet-lines line { stroke-dasharray: 24; animation: room-draw 0.8s ease-out 3; }
.console-room .puddle { transform-box: fill-box; transform-origin: left center; transition: transform 1.4s ease-out; }
.console-room[data-spill] .puddle { transform: scale(8, 3.4); }
.console-room[data-spill] .drip { opacity: 1; }
.console-room[data-spill] .cup { transform-box: fill-box; transform-origin: right bottom; transform: rotate(78deg); transition: transform 0.35s ease-in; }
.console-room[data-count] .radio-led { animation: room-blink 0.45s steps(2, jump-none) 6; }
.console-room[data-count] .radio-1 .radio-led { animation-delay: 0s; }
.console-room[data-count] .radio-2 .radio-led { animation-delay: 0.3s; }
.console-room[data-count] .radio-3 .radio-led { animation-delay: 0.6s; }
.console-room[data-count] .radio-4 .radio-led { animation-delay: 0.9s; }
.console-room[data-press] .r-access rect:nth-child(2) { fill: #6bd18a; animation: room-blink 0.3s steps(2, jump-none) 4; }
.console-room[data-switching] .r-led { fill: #ffd37a; }
.console-room[data-flicker] { animation: room-flicker 0.9s steps(6, jump-none); }
.console-room[data-look="color"][data-mode="room"] .room-art { filter: sepia(0.35) saturate(1.3) brightness(1.35); }
.console-room[data-touch]::after {
  content: "";
  position: absolute;
  left: var(--touch-x, 50%);
  top: 28%;
  width: 7%;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: room-ripple 0.7s ease-out 2;
}
@keyframes room-ring { from { opacity: 0.15; } to { opacity: 1; } }
@keyframes room-blink { 50% { opacity: 0.15; } }
@keyframes room-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes room-flicker { 0%, 40%, 80% { filter: brightness(0.45); } 20%, 60%, 100% { filter: none; } }
@keyframes room-ripple { from { opacity: 1; transform: translate(-50%, -50%) scale(0.4); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } }

/* Reduced motion: the people change place and pose with a short fade, the screen change is a brief dip, and nothing loops. */
@media (prefers-reduced-motion: reduce) {
  .fig, .fig .rig, .fig .a, .fig .f, .fig .head, .chair-seat .push, .fig .leg, .console-room .door-leaf, .console-room .puddle { transition-duration: 0.01s !important; }
  .fig *, .console-room *, .console-room[data-flicker], .console-room[data-touch]::after { animation: none !important; }
  .console-big.is-flash .big-crt { animation: none !important; }
  .console-big.is-flash .big-pic { animation: crt-soft 0.16s ease-out !important; }
  .console-room[data-ring] .ring { opacity: 1; }
  .console-room[data-touch]::after { opacity: 0.8; }
  .fig[data-speaking] .fx-talk { opacity: 1; }
}
@keyframes crt-soft { from { opacity: 0.55; } to { opacity: 1; } }

@media (orientation: landscape) and (min-width: 640px) {
  .console-stage { align-self: start; width: min(100%, calc((100dvh - 7.6rem - 2.4rem) / 0.6625)); }
}

.console-panel {
  grid-area: panel;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.console-subs {
  scrollbar-gutter: stable; /* a scrollbar coming and going must not re-wrap the lines (it fed a resize loop) */
  flex: 1 1 auto;
  min-height: 3.2rem;
  padding: 0.3rem 0.4rem;
  overflow-y: auto;
  text-align: left;
  font-size: 0.98rem;
  line-height: 1.35;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.sub { margin: 0 0 0.25rem; color: #8d8a84; }
.sub.is-now { color: var(--green-soft); }
.sub b { margin-right: 0.3rem; color: #d9c58a; font-size: 0.72em; letter-spacing: 0.1em; text-transform: uppercase; }

.console[data-subs="off"] .console-subs { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }

.console-controls { flex: none; display: flex; gap: 0.4rem; }
.console-controls .console-btn { flex: 1; }

.console-choices { flex: none; display: flex; flex-direction: column; gap: 0.35rem; }
.console-choices[hidden], .console-ending[hidden] { display: none; }
.console-choices .choice { min-height: 44px; overflow-wrap: anywhere; }

.console-ending {
  flex: none;
  margin: 0;
  padding: 0.5rem;
  color: var(--green-soft);
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

@media (orientation: landscape) and (min-width: 640px) {
  .console-body {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "stage panel";
    align-items: start;
    gap: 0.35rem 0.6rem;
  }
  .console-panel { align-self: stretch; }
}

/* The end screen on a portrait phone fits with no scroll: a smaller card, a tighter name and subtitles, and a wall as wide as the height allows. */
@media (orientation: portrait) {
  .console[data-state="soon"] .console-endcard { max-height: 16dvh; margin-bottom: 0.2rem; }
  .console[data-state="soon"] .console-ending { padding: 0.2rem; font-size: 1rem; line-height: 1.25; }
  /* The subtitles take what the end screen leaves (the player also lifts their minimum to the newest line's height), so a whole line always shows. */
  .console[data-state="soon"][data-lines="done"] .console-subs { flex: 1 1 0; min-height: 2.6rem; max-height: none; }
  .console[data-state="soon"] .console-panel { gap: 0.25rem; }
}

/* A short portrait screen (360x640): a slimmer card and enlarged feed on the end screen leave room for a whole subtitle line. */
@media (orientation: portrait) and (max-height: 700px) {
  .console[data-state="soon"] .console-endcard { max-height: 8dvh; }
}

/* Once the lines are heard, the choices (and the end screen) take what the subtitles need less, on any screen. */
.console[data-lines="done"] .console-subs { max-height: 40dvh; }
.console-endcard { max-height: 40dvh; }

/* A phone on its side (844x390): the words column scrolls by itself, so many choices (up to fifteen) never push the
   Log button or the subtitles off the screen; once the lines are heard the subtitles give room to the choices. */
@media (orientation: landscape) and (max-height: 520px) {
  .console-panel { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  /* The strip takes all the room the choices leave (it was a fixed 6rem box with half the screen empty) and shrinks, to the newest line at least, when the choices need it. */
  .console[data-lines="done"] .console-subs { flex: 1 1 auto; min-height: 2.6rem; max-height: none; }
  .console .console-endcard { width: auto; max-width: 100%; max-height: 32dvh; }
  /* The end screen (844x390): the card, the ending's name and the line buttons all fit without the column scrolling. */
  .console[data-state="soon"][data-lines="done"] .console-subs { flex: 1 1 0; min-height: 2.6rem; max-height: none; }
  .console[data-state="soon"] .console-endcard { max-height: 20dvh; margin-bottom: 0.2rem; }
  .console[data-state="soon"] .console-ending { padding: 0.2rem; font-size: 1rem; line-height: 1.25; }
  .console[data-state="soon"] .console-panel { gap: 0.25rem; }
  /* The stage's width follows the height that is left under the site bar and the console bar, so it never pushes the page into a scroll. */
  .console-stage { width: min(100%, calc((100dvh - 7.6rem - 2.4rem) / 0.6625)); }
  /* Many choices (up to twelve) scroll inside the words column; each stays whole and 44px tall. */
  .console-choices { padding-bottom: 0.15rem; }
  .console-choices .choice { flex: none; }
}

@media (min-width: 1000px) and (min-height: 700px) {
  .console-bar h1 { font-size: 0.95rem; }
  .room-action { font-size: 0.82rem; }
  .console-subs { font-size: 1.12rem; }
}

/* A phone upright (360x640): the wall and the bar keep their place and the words column scrolls by itself, so four or more
   choices never push the page into a scroll; once the lines are heard the subtitles give room to the choices. */
@media (max-width: 559px) and (orientation: portrait) {
  .console-body { overflow-y: hidden; }
  .console-panel { min-height: 8rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .console[data-lines="done"] .console-subs { flex: 1 1 auto; min-height: 2.6rem; max-height: none; }
  .console-choices { padding-bottom: 0.15rem; }
}

@media (max-width: 559px) {
  .console-bar h1 { display: none; }
  .console-bar .stories-back { flex: 1; font-size: 0.66rem; letter-spacing: 0.1em; }
}

/* The shift log: a Daily Activity Report on ruled paper. Nothing in it can be pressed. */
.shift-log[hidden] { display: none; }

.shift-log {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.dar {
  width: min(640px, 100%);
  min-height: 100%;
  margin: 0 auto;
  padding: 0.8rem 0.9rem 1rem;
  color: #1c1b18;
  background: #e8e1c8;
  border-radius: 4px;
  box-shadow: var(--shadow);
  text-align: left;
}

.dar-head { border-bottom: 3px double #1c1b18; margin-bottom: 0.4rem; padding-bottom: 0.3rem; }
.dar-head h2 { margin: 0; font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0.14em; text-transform: uppercase; }
.dar-head p { margin: 0; font: 0.72rem var(--mono); letter-spacing: 0.05em; text-transform: uppercase; }

.dar-sheet { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dar-cols th { padding: 0.15rem 0.3rem; font: 700 0.68rem var(--mono); letter-spacing: 0.1em; text-align: left; text-transform: uppercase; border-bottom: 1px solid #1c1b18; }
.dar-cols th:first-child, .dar-time { width: 3.6rem; }
.dar-row td { height: 2.1rem; padding: 0.1rem 0.3rem; vertical-align: bottom; border-bottom: 1px solid rgba(40, 70, 120, 0.4); }
.dar-time { font: 0.78rem var(--mono); color: #5a4a2a; }
.dar-text { font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 0.92rem; line-height: 1.2; overflow-wrap: anywhere; }
.dar-row.is-done .dar-text { font-weight: 700; }
.dar-redacted { display: block; width: 70%; height: 0.95em; background: #111; border-radius: 1px; }
.dar-row.is-redacted:nth-child(3n) .dar-redacted { width: 52%; }
.dar-row.is-redacted:nth-child(3n + 1) .dar-redacted { width: 84%; }
.dar-foot { margin: 0.8rem 0 0; font: 0.74rem var(--mono); letter-spacing: 0.05em; }

/* A console scene's branch page (tools/build-story.mjs). */
.console-passage .wall { max-width: 640px; margin: 0.6rem auto; }
.console-passage .canon { display: grid; gap: 0.15rem; max-width: 640px; margin: 0.6rem auto; padding: 0.6rem 0.8rem; font-size: 0.82rem; border: 2px dashed #d9c58a; border-radius: 6px; background: rgba(217, 197, 138, 0.08); }
.console-passage .canon strong { color: #d9c58a; letter-spacing: 0.08em; text-transform: uppercase; }
.console-passage .canon-note { color: var(--muted); font-size: 0.74rem; }
.console-passage .passage-lines { max-width: 640px; margin: 0.6rem auto; padding-left: 1.3rem; }
.console-passage .line-who { color: #d9c58a; font-size: 0.78em; letter-spacing: 0.1em; text-transform: uppercase; }
.console-passage audio { display: block; width: 100%; max-width: 360px; margin: 0.2rem 0 0.4rem; }
.console-passage .choice.is-locked { opacity: 0.5; cursor: default; }
.console-passage .choice.is-locked small { color: var(--muted); }
.console-passage .spark-choices { max-width: 640px; margin: 0.6rem auto; }

.console-endcard { display: block; width: min(100%, 28rem); margin: 0 auto 0.5rem; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--green-soft); }

/* A scene video that failed to load after retries: the message and a Retry button over the video's place. */
.spark-video-blank[role="alert"] {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  align-content: center;
  justify-items: center;
  gap: 0.75rem;
}

/* The photographed room (js/console-room.js, night-shift/media/stage/stage.json): the plate, its overlays and one silhouette layer
   per person, every layer a full-plate image. When it is on (data-art="photo") the SVG room and people are not drawn. */
.room-photo { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.2s ease; }
.console-room[data-swap] .room-photo { opacity: 0; }
.room-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.room-photo .room-pose, .room-photo .room-ov { position: absolute; inset: 0; }
.room-photo .room-pose img.pose { opacity: 0; transition: opacity 0.25s ease; }
.room-photo .room-pose img.pose.on { opacity: 1; }
.room-photo .room-pose[data-speaking] img.pose.on { filter: drop-shadow(0 0 5px rgba(217, 197, 138, 0.55)); }
.room-photo .room-ov { opacity: 0; transition: opacity 0.25s ease; }
.console-room[data-door][data-door-side="left"] .ov-door-left,
.console-room[data-door][data-door-side="right"] .ov-door-right,
.console-room[data-writing] .ov-writing,
.console-room[data-spill] .ov-spill,
.console-room[data-buzz] .ov-buzz { opacity: 1; }
.console-room[data-buzz] .ov-buzz { animation: room-blink 0.5s steps(2, jump-none) 5; }
.room-photo .room-clock { position: absolute; width: 5.2%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.room-photo .room-clock svg { width: 100%; height: 100%; }
.console-room[data-art="photo"] .room-art, .console-room[data-art="photo"] .room-figs { display: none; }
.console-room[data-art="photo"][data-mode="room"] .console-big {
  left: 36.46%;
  top: 19.57%;
  width: 26.37%;
  height: 25.54%;
  aspect-ratio: auto;
}
@media (prefers-reduced-motion: reduce) {
  .room-photo .room-pose img.pose, .room-photo .room-ov { transition-duration: 0.01ms; }
  .console-room[data-buzz] .ov-buzz { animation: none; opacity: 1; }
}

/* The ending card (js/game.js showEndingCard): the ending's own name, the choices made, Try another path. */
.spark-ending.ending-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 0;
  text-align: center;
  color: #f2f0eb;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.09), rgba(12, 13, 15, 0.94) 70%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  animation: ending-in 0.8s ease both;
}
.ending-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #c8c4be;
}
.ending-name {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 5.5vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.ending-count { margin: 0; font-size: 0.78rem; color: #a9a59f; }
.ending-recap-head {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a9a59f;
}
.ending-recap {
  margin: 0;
  padding: 0 0 0 1.4rem;
  max-height: 7.5rem;
  overflow-y: auto;
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.35;
}
.ending-recap li { margin: 0.1rem 0; }
.ending-again { margin-top: 0.4rem; min-height: 44px; text-align: center; font-weight: 700; }
@keyframes ending-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .spark-ending.ending-card { animation: none; } }
@media (max-height: 560px) { .ending-recap { max-height: 3.6rem; } .ending-name { font-size: 1.15rem; } }

/* Try another path: where the last run went (the choice you took, the nodes in the Tree). */
.choice.was-taken { border-color: #f4f2ee; }
.choice.was-taken::after {
  content: "Last time";
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a9a59f;
}
.tree-node.is-walked { border-color: #d8b45a; }

/* ---------------- Cinematic player chrome (J, 2026-11-06) ----------------
   Desktop: the video sits in a 2.39:1 letterbox (black bars), the choices wait dimmed while the clip plays and come up
   with a thin countdown when it ends, and the bar and title fade away after 3 s without movement. */
.choice-timer { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.45rem; min-height: 14px; transition: opacity 0.4s ease; }
/* Hidden keeps its row: the video stage must not resize when the countdown appears. */
.choice-timer[hidden] { display: flex; visibility: hidden; }
.choice-timer-track { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden; }
.choice-timer-bar { display: block; height: 100%; width: 100%; background: #c8c4be; transform-origin: left center; animation: choice-timer linear forwards; }
.choice-timer-label { min-width: 3.6em; text-align: right; color: #8e8b86; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.choice-timer[data-state="done"] { opacity: 0.55; }
.choice-timer[data-state="done"] .choice-timer-bar { animation: none; transform: scaleX(0); }
@keyframes choice-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.spark-choices[data-phase="waiting"] .choice { opacity: 0.22; }
.spark-choices[data-phase="ready"] .choice { animation: choice-in 0.7s ease both; }
.spark-choices[data-phase="ready"] .choice:nth-child(2) { animation-delay: 0.12s; }
.spark-choices[data-phase="ready"] .choice:nth-child(3) { animation-delay: 0.24s; }
.spark-choices[data-phase="ready"] .choice:nth-child(n+4) { animation-delay: 0.36s; }
@keyframes choice-in { from { opacity: 0.22; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.spark-bar, .spark-copy { transition: opacity 0.6s ease; }
.spark.is-idle:not(.is-tree) .spark-bar,
.spark.is-idle:not(.is-tree) .spark-copy { opacity: 0; }
.spark.is-idle .spark-bar:focus-within { opacity: 1; }

@media (min-width: 900px) and (min-height: 560px) {
  #spark-play {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "head"
      "stage"
      "panel";
  }
  .spark-stage { background: #000; border-radius: 12px; }
  .spark-video {
    width: min(100cqw, calc(100cqh * 2.39));
    height: min(100cqh, calc(100cqw / 2.39));
    aspect-ratio: 2.39 / 1;
    border-radius: 0;
    box-shadow: none;
  }
  .spark-video video, .spark-video iframe { object-fit: contain; }
  .spark-panel { justify-content: flex-start; min-height: min-content; max-width: 760px; margin: 0 auto; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .spark-choices[data-phase="ready"] .choice { animation: none; }
  .spark-bar, .spark-copy { transition: none; }
}