:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
  background: #020713;
  color: #f8fbff;
  --navy: #030a19;
  --panel: rgba(3, 12, 28, 0.86);
  --line: rgba(126, 214, 255, 0.24);
  --cyan: #42d8ff;
  --violet: #8c55ff;
  --gold: #ffca4b;
  --green: #73dd53;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; overflow: hidden; }
button, input, a { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.story-game {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
}

.story-game[hidden], [hidden] { display: none !important; }

.scene-art {
  position: absolute;
  inset: 88px 286px 230px 254px;
  z-index: -4;
  width: calc(100% - 540px);
  height: calc(100% - 318px);
  max-width: none;
  object-fit: contain;
  object-position: center;
  border: 1px solid rgba(126, 214, 255, 0.22);
  border-radius: 8px;
  background: rgba(1, 6, 16, 0.84);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), 0 0 32px rgba(66, 216, 255, 0.08);
  transform: none;
  animation: scene-breathe 12s ease-in-out infinite alternate;
  transition: opacity 280ms ease, filter 280ms ease;
}

.story-game.is-changing .scene-art { opacity: 0.52; filter: blur(2px); }
.story-game.motion-off .scene-art { animation: none; }

@keyframes scene-breathe {
  from { filter: saturate(0.98) brightness(0.98); }
  to { filter: saturate(1.05) brightness(1.03); }
}

.scene-vignette {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1, 6, 17, 0.76) 0%, rgba(1, 7, 18, 0.06) 18%, rgba(1, 6, 17, 0.08) 52%, rgba(1, 6, 17, 0.92) 100%),
    linear-gradient(90deg, rgba(1, 6, 17, 0.78), transparent 23%, transparent 74%, rgba(1, 6, 17, 0.82));
}

.glass-panel {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(5, 17, 38, 0.9), rgba(2, 9, 23, 0.84));
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
}

.story-top-controls {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  min-height: 88px;
  display: grid;
  grid-template-columns: minmax(270px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  background: linear-gradient(180deg, rgba(2, 8, 20, 0.9), rgba(2, 8, 20, 0.38));
}

.story-heading, .audio-controls, .resource-controls { display: flex; align-items: center; gap: 12px; }
.story-heading h1, .story-heading p { margin: 0; }
.story-heading h1 { font-size: clamp(1.1rem, 2vw, 1.7rem); letter-spacing: 0; }
.story-heading p { margin-top: 4px; color: rgba(225, 235, 250, 0.78); font-size: 0.88rem; }

.icon-button {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(154, 202, 255, 0.24);
  border-radius: 8px;
  background: rgba(3, 11, 27, 0.75);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.back-button { color: var(--gold); font-size: 2.5rem; line-height: 1; }
.audio-controls { justify-content: center; }

.audio-control, .auto-play-toggle, .resource-pill {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid rgba(154, 202, 255, 0.22);
  border-radius: 8px;
  background: rgba(3, 11, 27, 0.7);
}

.audio-control input { width: 100px; accent-color: var(--violet); }
.audio-control:nth-child(2) input { accent-color: var(--cyan); }
.audio-control strong { font-size: 0.82rem; }
.auto-play-toggle { color: #fff; cursor: pointer; }
.auto-play-toggle[aria-pressed="true"] { border-color: var(--cyan); background: rgba(29, 133, 177, 0.32); }
.resource-controls { justify-content: flex-end; }
.resource-pill b { color: var(--cyan); text-shadow: 0 0 12px var(--cyan); }

.chapter-progress {
  position: absolute;
  z-index: 8;
  left: 20px;
  top: 98px;
  bottom: 110px;
  width: 234px;
  display: flex;
  flex-direction: column;
  padding: 16px 14px 12px;
  border-radius: 8px;
}

.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading > span, .companion-section h2, .rewards-panel h2 {
  margin: 0;
  color: #b8d9ff;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.chapter-progress ol {
  flex: 1;
  min-height: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  margin: 10px 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.chapter-node {
  position: relative;
  min-height: 47px;
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: rgba(228, 236, 250, 0.76);
}

.chapter-node button {
  display: contents;
  color: inherit;
  cursor: pointer;
}

.chapter-node .node-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(126, 214, 255, 0.3);
  border-radius: 50%;
  background: #07162d;
  font-weight: 800;
}

.chapter-node.is-current {
  border-color: rgba(140, 85, 255, 0.8);
  background: rgba(77, 32, 149, 0.38);
  color: #fff;
}

.chapter-node.is-current .node-number { border-color: var(--cyan); box-shadow: 0 0 16px rgba(66, 216, 255, 0.5); }
.chapter-node.is-complete .node-state { color: #92ff4e; }
.chapter-node.is-locked { opacity: 0.5; }

.chapter-map-button, .secondary-action, .corner-actions button, .settings-popover button {
  min-height: 42px;
  border: 1px solid rgba(154, 202, 255, 0.24);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.status-rail {
  position: absolute;
  z-index: 8;
  right: 20px;
  top: 98px;
  bottom: 112px;
  width: 274px;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-y: auto;
}

.companion-section, .rewards-panel { padding: 14px; border-radius: 8px; }
.companion-card {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid rgba(126, 214, 255, 0.14);
}

.companion-card img {
  width: 78px;
  height: 92px;
  object-fit: cover;
  border: 1px solid rgba(126, 214, 255, 0.25);
  border-radius: 7px;
  background: #07142a;
}

.companion-card h3, .companion-card p { margin: 0; }
.companion-card h3 { font-size: 1rem; }
.companion-card p { margin-top: 4px; color: rgba(221, 232, 249, 0.72); font-size: 0.75rem; }
.companion-stats { display: grid; grid-template-columns: 1fr auto; gap: 5px; margin-top: 9px; font-size: 0.72rem; }
.xp-track { grid-column: 1 / -1; height: 8px; overflow: hidden; border: 1px solid rgba(140, 85, 255, 0.45); border-radius: 999px; }
.xp-track span { display: block; height: 100%; background: linear-gradient(90deg, #4932c9, #a624ed); }

.reward-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
.reward-grid > div { min-width: 0; display: grid; justify-items: center; gap: 3px; padding: 7px 4px; text-align: center; border-right: 1px solid rgba(126, 214, 255, 0.14); }
.reward-grid > div:last-child { border: 0; }
.reward-grid strong { font-size: 0.72rem; }
.reward-grid small { color: rgba(225, 235, 250, 0.72); font-size: 0.65rem; }
.reward-icon { font-size: 2rem; }
.reward-icon.gold { color: var(--gold); text-shadow: 0 0 16px #f4a600; }
.reward-icon.cyan { color: var(--cyan); }
.reward-icon.violet { color: #c183ff; }

.dialogue-panel {
  position: absolute;
  z-index: 9;
  left: max(242px, 17vw);
  right: max(286px, 19vw);
  bottom: 20px;
  min-height: 260px;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px 18px;
  padding: 18px 20px 16px 152px;
  border: 1px solid rgba(255, 204, 84, 0.58);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(3, 14, 31, 0.94), rgba(3, 8, 23, 0.9));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(60, 124, 255, 0.06);
  backdrop-filter: blur(18px);
}

.dialogue-panel::before, .dialogue-panel::after {
  content: "";
  position: absolute;
  top: 0;
  width: 22%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.dialogue-panel::before { left: 0; }
.dialogue-panel::after { right: 0; transform: scaleX(-1); }

.speaker-portrait {
  position: absolute;
  left: 18px;
  top: -34px;
  width: 118px;
  height: 118px;
  padding: 5px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: #07142b;
  box-shadow: 0 0 25px rgba(255, 202, 75, 0.24);
}

.speaker-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.speaker-name {
  grid-column: 1 / 3;
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(61, 22, 112, 0.96), rgba(57, 19, 99, 0.55), transparent);
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
}

.voice-button {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(140, 85, 255, 0.65);
  border-radius: 8px;
  background: rgba(70, 34, 122, 0.5);
  color: #fff;
  cursor: pointer;
}

.dialogue-copy { grid-column: 1 / -1; min-height: 56px; }
.dialogue-copy p { max-width: 900px; margin: 2px 0 0; color: rgba(248, 251, 255, 0.95); font-size: clamp(1rem, 1.4vw, 1.22rem); line-height: 1.55; font-weight: 600; }

.choice-cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.story-game.is-waiting-for-choice .scene-art { filter: none; }
.story-game.is-waiting-for-choice .scene-vignette { background: rgba(1, 5, 18, 0.06); }
.decision-heading { margin: 0 0 12px; padding: 12px 14px; border-left: 3px solid #ffd34e; background: rgba(17,10,43,.72); }
.decision-heading span { color: #ffd34e; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.decision-heading strong { display: block; margin-top: 4px; font-size: 1.08rem; }
.decision-heading p { margin: 5px 0 0; color: #f5f7ff; font-weight: 800; }
.decision-heading button { margin-top: 9px; padding: 7px 10px; border: 1px solid #7960ad; border-radius: 6px; background: #171035; color: #d9c8ff; font-weight: 800; cursor: pointer; }
#cluesPanel { margin-top: 8px; color: #cfeeff; font-size: .78rem; line-height: 1.45; }

.choice-card {
  min-height: 92px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 12px 14px;
  border: 1px solid rgba(66, 216, 255, 0.7);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(3, 39, 69, 0.96), rgba(3, 17, 38, 0.9));
  color: #fff;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.35;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
}
.choice-card strong { display: block; font-size: .94rem; }
.choice-card span { display: block; margin-top: 5px; color: #bcd2e9; font-size: .72rem; font-weight: 700; }

.choice-card:nth-child(2) { border-color: rgba(115, 221, 83, 0.65); background: linear-gradient(135deg, rgba(15, 59, 30, 0.95), rgba(4, 26, 20, 0.9)); }
.choice-card:nth-child(3) { border-color: rgba(171, 89, 255, 0.72); background: linear-gradient(135deg, rgba(52, 20, 87, 0.95), rgba(18, 10, 43, 0.9)); }
.choice-card:hover { transform: translateY(-2px); filter: brightness(1.15); }

.dialogue-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.dialogue-footer > span { color: rgba(222, 232, 249, 0.58); font-size: 0.75rem; }
.secondary-action { padding: 0 14px; }
.continue-button {
  min-width: 180px;
  min-height: 54px;
  border: 1px solid #ffe08a;
  border-radius: 8px;
  background: linear-gradient(180deg, #eaa313, #a65d00);
  color: #fff;
  box-shadow: 0 0 24px rgba(255, 170, 18, 0.42), inset 0 1px rgba(255,255,255,.35);
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
}

.corner-actions {
  position: absolute;
  z-index: 10;
  right: 20px;
  bottom: 20px;
  display: grid;
  gap: 8px;
}
.corner-actions button { padding: 0 14px; }

.mobile-story-actions, .mobile-drawer-head, .mobile-close { display: none; }

.settings-popover {
  position: fixed;
  z-index: 40;
  top: 80px;
  right: 20px;
  width: 260px;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 8px;
}
.settings-popover h2 { margin: 0; font-size: 1rem; }
.settings-popover label { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; }

.chapter-map-modal {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(1, 5, 15, 0.84);
}
.chapter-map-modal > section { width: min(900px, 100%); max-height: 80vh; overflow: auto; padding: 22px; border-radius: 8px; }
.chapter-map-modal h2 { margin: 0; }
.chapter-map-modal .panel-heading button { border: 0; background: none; color: #fff; font-size: 2rem; cursor: pointer; }
#chapterMapGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 18px; }
.map-card { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(8, 20, 45, 0.8); }
.map-card strong, .map-card span { display: block; }
.map-card span { margin-top: 5px; color: rgba(222, 232, 249, 0.65); font-size: 0.75rem; }

.branch-loading {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(circle, rgba(44, 83, 174, 0.24), transparent 26rem), rgba(2, 7, 24, 0.96);
}
.branch-loading h2, .branch-loading p { margin: 0; }
.branch-loading p { color: rgba(213, 226, 249, 0.82); }
.branch-loading-ring {
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--cyan) 0 var(--branch-progress), var(--violet) var(--branch-progress), rgba(255,255,255,.1) var(--branch-progress) 360deg);
}
.branch-loading-ring::after { content: ""; position: absolute; inset: 8px; border-radius: inherit; background: #07102d; }
.branch-loading-ring span { position: relative; z-index: 1; font-weight: 900; }

.storybook-preparation {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(52, 174, 226, 0.17), transparent 24rem),
    rgba(2, 7, 24, 0.985);
}

.storybook-preparation[hidden] { display: none; }
.storybook-preparation h2,
.storybook-preparation p { max-width: 620px; margin: 0; }
.storybook-preparation h2 { font-size: clamp(1.45rem, 3vw, 2.25rem); }
.storybook-preparation > p:not(.preparation-eyebrow) { color: rgba(213, 226, 249, 0.8); line-height: 1.55; }
.preparation-eyebrow {
  color: var(--cyan);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.preparation-ring {
  position: relative;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 50%;
  background: conic-gradient(var(--cyan) 0 var(--preparation-progress), var(--violet) var(--preparation-progress), rgba(255,255,255,.1) var(--preparation-progress) 360deg);
  box-shadow: 0 0 36px rgba(66, 216, 255, 0.16);
}
.preparation-ring::after { content: ""; position: absolute; inset: 9px; border-radius: inherit; background: #07102d; }
.preparation-ring span { position: relative; z-index: 1; font-size: 1.05rem; font-weight: 900; }
.preparation-actions { display: flex; gap: 10px; margin-top: 10px; }
.preparation-actions button,
.preparation-actions a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(126, 214, 255, 0.34);
  border-radius: 7px;
  background: rgba(13, 49, 85, 0.76);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  cursor: pointer;
}

.book-empty {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 24px;
  text-align: center;
  background: #050b20;
}
.book-empty h1, .book-empty p { margin: 0 0 12px; }
.book-empty a { min-height: 46px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 8px; background: var(--violet); color: #fff; text-decoration: none; font-weight: 900; }

@media (max-width: 1100px) {
  .story-top-controls { grid-template-columns: 1fr auto; }
  .audio-controls { position: absolute; top: 82px; left: 50%; transform: translateX(-50%); }
  .chapter-progress { top: 148px; width: 210px; }
  .status-rail { top: 148px; width: 238px; }
  .dialogue-panel { left: 228px; right: 252px; }
  .scene-art {
    inset: 138px 252px 230px 228px;
    width: calc(100% - 480px);
    height: calc(100% - 368px);
  }
  .audio-control strong { display: none; }
}

@media (max-width: 760px) {
  html, body { overflow: auto; }
  .story-game { min-height: 100svh; }
  .scene-art {
    position: fixed;
    inset: 166px 10px auto;
    width: calc(100% - 20px);
    height: min(36svh, 310px);
    object-fit: contain;
  }
  .story-top-controls {
    position: fixed;
    min-height: 70px;
    grid-template-columns: 1fr auto;
    padding: 10px 12px;
  }
  .story-heading { min-width: 0; }
  .story-heading h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
  .story-heading p { font-size: 0.7rem; }
  .icon-button { width: 42px; height: 42px; }
  .resource-pill { min-height: 42px; padding: 0 10px; }
  .resource-controls .icon-button { display: none; }
  .audio-controls {
    position: fixed;
    z-index: 12;
    top: 74px;
    left: 12px;
    right: 12px;
    transform: none;
    justify-content: center;
  }
  .audio-control { min-height: 40px; flex: 1; padding: 0 8px; }
  .audio-control input { width: 100%; }
  .auto-play-toggle { min-height: 40px; padding: 0 10px; font-size: 0.72rem; }

  .chapter-progress, .status-rail {
    position: fixed;
    inset: 0;
    z-index: 50;
    width: auto;
    height: 100svh;
    max-height: none;
    padding: 22px;
    border-radius: 0;
    transform: translateX(-105%);
    transition: transform 220ms ease;
  }
  .status-rail { display: block; overflow: auto; transform: translateX(105%); background: rgba(2, 8, 22, 0.96); }
  .chapter-progress.is-open, .status-rail.is-open { transform: translateX(0); }
  .mobile-drawer-head, .mobile-close { display: flex; }
  .mobile-drawer-head { align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .mobile-close { width: 40px; height: 40px; align-items: center; justify-content: center; border: 0; background: none; color: #fff; font-size: 2rem; }

  .mobile-story-actions {
    position: fixed;
    z-index: 14;
    top: 126px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
  }
  .mobile-story-actions button {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(3, 11, 27, 0.78);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
  }

  .dialogue-panel {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    min-height: 0;
    max-height: calc(100svh - 178px);
    display: block;
    overflow-y: auto;
    padding: 50px 14px 14px;
  }
  .speaker-portrait { left: 14px; top: -28px; width: 76px; height: 76px; }
  .speaker-name { min-height: 36px; padding-left: 68px; font-size: 0.82rem; }
  .voice-button { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; }
  .dialogue-copy p { margin: 14px 0; font-size: 0.94rem; line-height: 1.48; }
  .choice-cards { grid-template-columns: 1fr; }
  .choice-card { min-height: 62px; }
  .dialogue-footer { margin-top: 12px; justify-content: space-between; }
  .dialogue-footer > span { display: none; }
  .continue-button { min-width: 142px; min-height: 50px; }
  .secondary-action { min-height: 50px; }
  .corner-actions { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Immersive player */
.scene-art {
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: #020713;
  box-shadow: none;
  transform: scale(0.75);
  animation: cinematic-drift 22s ease-in-out infinite alternate;
  transition: opacity 520ms ease, filter 520ms ease, transform 900ms ease;
  will-change: transform;
}

.story-game.is-changing .scene-art {
  opacity: 0.36;
  filter: blur(5px) saturate(0.8);
  transform: scale(0.79);
}

@keyframes cinematic-drift {
  0% { transform: scale(0.75) translate3d(-0.7%, -0.3%, 0); }
  50% { transform: scale(0.785) translate3d(0.8%, 0.45%, 0); }
  100% { transform: scale(0.81) translate3d(-0.2%, 0.8%, 0); }
}

.scene-vignette {
  background:
    linear-gradient(180deg, rgba(1, 5, 14, 0.24) 0%, transparent 15%, transparent 72%, rgba(1, 5, 14, 0.36) 100%),
    linear-gradient(90deg, rgba(1, 5, 14, 0.14), transparent 12%, transparent 88%, rgba(1, 5, 14, 0.14));
}

.beat-transition {
  position: absolute;
  inset: 0;
  z-index: 24;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(135, 213, 255, 0.18), transparent 28%),
    #020713;
}

.beat-transition.is-active {
  animation: beat-cinematic-transition 700ms ease both;
}

@keyframes beat-cinematic-transition {
  0% { opacity: 0; }
  38% { opacity: 0.78; }
  100% { opacity: 0; }
}

.story-top-controls {
  min-height: 74px;
  grid-template-columns: minmax(280px, 1fr) auto minmax(160px, 1fr);
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(2, 7, 18, 0.76), transparent);
  pointer-events: none;
}

.story-top-controls > * { pointer-events: auto; }
.story-heading h1 { font-size: clamp(1.05rem, 1.8vw, 1.55rem); }
.story-heading p { font-size: 0.76rem; }
.icon-button { width: 42px; height: 42px; background: rgba(2, 9, 22, 0.6); backdrop-filter: blur(12px); }
.back-button { font-size: 2rem; }
.resource-pill { min-height: 42px; padding: 0 13px; background: rgba(2, 9, 22, 0.62); backdrop-filter: blur(12px); }

.settings-drawer-toggle {
  width: 46px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(174, 113, 255, 0.7);
  border-radius: 999px;
  background: rgba(4, 10, 25, 0.68);
  color: #fff;
  box-shadow: 0 0 22px rgba(140, 85, 255, 0.25);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.settings-drawer-toggle span { font-size: 1.55rem; transform: translateY(-3px); transition: transform 180ms ease; }
.settings-drawer-toggle[aria-expanded="true"] span { transform: translateY(3px) rotate(180deg); }

.settings-popover {
  position: fixed;
  z-index: 40;
  top: 68px;
  left: 50%;
  right: auto;
  width: min(760px, calc(100% - 32px));
  transform: translateX(-50%);
  gap: 12px;
  padding: 14px;
  background: rgba(3, 11, 27, 0.9);
}

.settings-heading, .settings-audio, .settings-options {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-heading { justify-content: space-between; }
.settings-heading h2 { margin: 0; }
.settings-heading button { width: 34px; height: 34px; border: 0; background: transparent; color: #fff; font-size: 1.6rem; cursor: pointer; }
.settings-audio { flex: 1; }
.settings-audio .audio-control { flex: 1; min-height: 42px; }
.settings-options { flex-wrap: wrap; }
.settings-options > button,
.settings-options > label {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(154, 202, 255, 0.22);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}

.settings-options .read-story-button {
  border-color: rgba(88, 221, 255, 0.72);
  background: rgba(12, 110, 151, 0.34);
  box-shadow: 0 0 18px rgba(65, 205, 255, 0.14);
}

.narration-status {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: rgba(219, 238, 255, 0.84);
  font-size: 0.74rem;
  font-weight: 800;
}

.narration-status.is-error { color: #ff9db0; }

.drawer-launcher {
  position: absolute;
  z-index: 11;
  top: 92px;
  left: 18px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(126, 214, 255, 0.28);
  border-radius: 7px;
  background: rgba(2, 9, 22, 0.64);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.chapter-progress {
  top: 88px;
  bottom: 96px;
  left: 18px;
  width: 250px;
  padding: 14px 12px 12px;
  transform: translateX(calc(-100% - 30px));
  transition: transform 240ms ease;
}

.chapter-progress.is-open { transform: translateX(0); }
.chapter-progress .mobile-close { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 0; background: transparent; color: #fff; font-size: 1.5rem; }
.chapter-progress ol { align-content: start; }
.chapter-node { min-height: 39px; padding: 4px 6px; }
.chapter-node .node-number { width: 25px; height: 25px; font-size: 0.75rem; }

.status-rail {
  top: 94px;
  right: 18px;
  bottom: auto;
  width: 224px;
  overflow: visible;
}

.companion-section {
  padding: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#companionCards { display: grid; gap: 8px; }
.companion-card {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 9px;
  margin: 0;
  padding: 7px;
  border: 1px solid rgba(126, 214, 255, 0.25);
  border-radius: 8px;
  background: rgba(2, 9, 22, 0.68);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
}

.companion-card img { width: 54px; height: 58px; }
.companion-card h3 { font-size: 0.82rem; }
.companion-card p { margin-top: 2px; font-size: 0.63rem; }
.companion-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 5px;
  font-size: 0.6rem;
}
.companion-stats span:nth-child(2),
.companion-stats span:nth-child(4),
.companion-stats span:nth-child(6) { display: none; }
.xp-track { width: 100%; height: 5px; }

.dialogue-panel {
  left: max(270px, 19vw);
  right: max(220px, 17vw);
  bottom: 16px;
  min-height: 168px;
  max-height: 44vh;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto minmax(42px, auto) auto auto;
  gap: 6px 10px;
  padding: 12px 16px 12px 132px;
  background: linear-gradient(145deg, rgba(3, 14, 31, 0.9), rgba(3, 8, 23, 0.82));
  transition: left 220ms ease, right 220ms ease, max-height 220ms ease, min-height 220ms ease;
}

.dialogue-panel.is-expanded {
  left: max(80px, 8vw);
  right: max(80px, 8vw);
  min-height: 310px;
  max-height: 72vh;
  overflow-y: auto;
}

.speaker-portrait {
  left: -54px;
  top: -30px;
  width: 156px;
  height: 178px;
  padding: 4px;
  border-radius: 48% 48% 12px 12px;
  overflow: hidden;
}
.speaker-portrait img { border-radius: inherit; object-position: top center; }
.speaker-name { grid-column: 1; min-height: 34px; padding: 0 14px; font-size: 0.82rem; }
.voice-button, .dialogue-expand-button {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(140, 85, 255, 0.65);
  border-radius: 7px;
  background: rgba(70, 34, 122, 0.5);
  color: #fff;
  cursor: pointer;
}
.dialogue-expand-button { border-color: rgba(126, 214, 255, 0.38); background: rgba(7, 33, 58, 0.64); }
.dialogue-panel.is-expanded .dialogue-expand-button { transform: rotate(180deg); }
.dialogue-copy { min-height: 42px; max-height: 86px; overflow-y: auto; }
.dialogue-panel.is-expanded .dialogue-copy { max-height: none; overflow: visible; }
.dialogue-copy p { font-size: clamp(0.9rem, 1.25vw, 1.08rem); line-height: 1.45; }
.narration-word {
  border-radius: 3px;
  transition: color 120ms ease, background-color 120ms ease;
}
.narration-word.is-read {
  color: #fff;
  background: rgba(56, 207, 255, 0.18);
  box-shadow: 0 0 8px rgba(56, 207, 255, 0.08);
}
.choice-cards { gap: 8px; }
.choice-card { min-height: 66px; padding: 9px 12px; font-size: 0.8rem; }
.dialogue-footer { gap: 8px; }
.continue-button { min-width: 148px; min-height: 44px; font-size: 0.92rem; }
.secondary-action { min-height: 40px; font-size: 0.78rem; }
.corner-actions { display: none; }
.mobile-story-actions { display: none; }

.story-game:fullscreen .story-top-controls,
.story-game.is-reading-mode .story-top-controls { opacity: 0.74; }

.creator-step-trail {
  position: absolute;
  z-index: 12;
  top: 78px;
  left: 50%;
  display: flex;
  gap: 5px;
  transform: translateX(-50%);
  align-items: center;
  pointer-events: auto;
}

.creator-step-trail a,
.creator-step-trail span {
  padding: 4px 7px;
  border: 1px solid rgba(154, 202, 255, 0.18);
  border-radius: 999px;
  background: rgba(3, 11, 27, 0.62);
  color: rgba(225, 235, 250, 0.58);
  font-size: 0.58rem;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.creator-step-trail a {
  color: rgba(225, 235, 250, 0.72);
  text-decoration: none;
}

.creator-step-trail a:hover,
.creator-step-trail a[aria-current="page"] {
  border-color: rgba(78, 216, 255, 0.62);
  color: #fff;
}

.creator-step-trail > span {
  padding-inline: 1px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.creator-step-trail span.is-complete {
  border-color: rgba(59, 229, 150, 0.46);
  color: #8fffc4;
}

@media (max-width: 980px) {
  .status-rail { width: 184px; }
  .dialogue-panel { left: 86px; right: 190px; }
  .speaker-portrait { width: 126px; height: 148px; left: -46px; }
  .story-heading p { display: none; }
}

@media (max-width: 760px) {
  html, body { overflow: hidden; }
  .scene-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .story-top-controls {
    position: absolute;
    min-height: 62px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 8px 10px;
  }
  .story-heading h1 { font-size: 0.9rem; }
  .story-heading p { display: block; font-size: 0.62rem; }
  .back-button { width: 38px; height: 38px; }
  .settings-drawer-toggle { width: 40px; height: 36px; }
  .resource-pill { min-height: 38px; padding: 0 9px; font-size: 0.78rem; }
  .settings-popover {
    top: 58px;
    width: calc(100% - 20px);
    max-height: calc(100svh - 72px);
    overflow-y: auto;
  }
  .settings-audio { display: grid; grid-template-columns: 1fr; width: 100%; }
  .settings-options { align-items: stretch; }
  .settings-options > * { flex: 1 1 120px; justify-content: center; }
  .drawer-launcher { top: 74px; left: 10px; min-height: 36px; }
  .drawer-launcher span:last-child { display: none; }

  .chapter-progress {
    inset: 0 auto 0 0;
    width: min(84vw, 320px);
    height: 100svh;
    padding: 18px;
    border-radius: 0;
    transform: translateX(-105%);
  }

  .status-rail {
    top: 72px;
    right: 8px;
    bottom: auto;
    left: auto;
    width: 72px;
    height: auto;
    max-height: none;
    display: block;
    transform: none;
    background: transparent;
  }
  .companion-section { padding: 0; }
  #companionCards { gap: 6px; }
  .companion-card {
    display: block;
    padding: 5px;
  }
  .companion-card img { width: 60px; height: 64px; display: block; }
  .companion-card > div { display: none; }

  .dialogue-panel {
    position: absolute;
    left: 50px;
    right: 8px;
    bottom: 8px;
    min-height: 148px;
    max-height: 42svh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto auto auto;
    overflow: visible;
    padding: 10px 10px 10px 68px;
  }
  .dialogue-panel.is-expanded {
    left: 8px;
    right: 8px;
    min-height: 56svh;
    max-height: 78svh;
    overflow-y: auto;
    padding-left: 74px;
  }
  .speaker-portrait { left: -48px; top: -18px; width: 106px; height: 128px; }
  .speaker-name { min-height: 32px; padding: 0 10px; font-size: 0.72rem; }
  .voice-button, .dialogue-expand-button { position: static; width: 32px; height: 32px; }
  .dialogue-copy { margin: 0; max-height: 68px; }
  .dialogue-copy p { margin: 6px 0; font-size: 0.82rem; line-height: 1.4; }
  .choice-cards { grid-template-columns: 1fr; max-height: 34svh; overflow-y: auto; }
  .choice-card { min-height: 52px; }
  .dialogue-footer { margin-top: 2px; }
  .continue-button { min-width: 118px; min-height: 40px; }
  .secondary-action { min-height: 40px; padding: 0 10px; }
  .creator-step-trail { top: 64px; gap: 3px; }
  .creator-step-trail span { padding: 3px 5px; font-size: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-art,
  .beat-transition.is-active {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}