:root {
  --canvas: oklch(0.12 0.025 255);
  --canvas-deep: oklch(0.085 0.02 255);
  --surface: oklch(0.16 0.026 252);
  --surface-raised: oklch(0.2 0.03 250);
  --surface-soft: oklch(0.24 0.035 250 / 0.68);
  --ink: oklch(0.94 0.018 84);
  --ink-muted: oklch(0.74 0.025 252);
  --ink-faint: oklch(0.59 0.03 252);
  --rose: oklch(0.71 0.13 12);
  --rose-soft: oklch(0.71 0.13 12 / 0.18);
  --water: oklch(0.7 0.1 200);
  --gold: oklch(0.78 0.12 83);
  --danger: oklch(0.69 0.14 28);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  background: var(--canvas-deep);
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  background: var(--canvas-deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; }
button { touch-action: manipulation; }
button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.hidden { display: none !important; }
.mobile-only { display: none; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 20; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--gold); color: var(--canvas-deep); transition: top .2s var(--ease); }
.skip-link:focus { top: 12px; }

.app-shell { min-height: 100vh; background: radial-gradient(circle at 12% 8%, oklch(0.23 0.06 222 / .34), transparent 34%), var(--canvas-deep); }
.screen { min-height: 100vh; }

.title-screen {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 100vh;
  max-width: 620px;
  margin: 0 auto;
  padding: 60px 28px 40px;
  overflow: hidden;
}
.title-screen::before, .title-screen::after {
  position: absolute;
  content: "";
  pointer-events: none;
  border: 1px solid oklch(0.75 0.09 190 / .13);
  border-radius: 50%;
  transform: rotate(-18deg);
}
.title-screen::before { width: 640px; height: 260px; right: -360px; top: 14%; }
.title-screen::after { width: 460px; height: 180px; left: -300px; bottom: 10%; border-color: oklch(0.76 0.12 12 / .11); }
.title-orbit { position: absolute; width: 340px; height: 340px; right: -90px; top: 22%; border-radius: 50%; background: radial-gradient(circle at 40% 42%, oklch(0.28 0.1 210 / .3), transparent 64%); filter: blur(1px); }
.eyebrow, .section-label, .brand-kicker, .hint, .private-note { text-transform: uppercase; letter-spacing: .17em; font-size: 10px; color: var(--ink-faint); }
.eyebrow { margin: 0 0 24px; }
.title-screen h1 { position: relative; margin: 0; color: var(--ink); font-family: Baskerville, "Iowan Old Style", "Songti SC", serif; font-size: clamp(66px, 16vw, 118px); font-weight: 400; line-height: .86; letter-spacing: -.05em; }
.title-subtitle { margin: 17px 0 0; color: var(--rose); font-family: Baskerville, "Iowan Old Style", "Songti SC", serif; font-size: 20px; letter-spacing: .07em; }
.title-intro { max-width: 20em; margin: 48px 0 20px; color: var(--ink-muted); font-family: "Songti SC", "STSong", serif; font-size: 17px; line-height: 1.8; text-wrap: pretty; }
.title-divider { display: flex; align-items: center; gap: 12px; width: 160px; color: var(--gold); }
.title-divider::before, .title-divider::after { content: ""; height: 1px; flex: 1; background: oklch(0.78 0.12 83 / .35); }
.name-form { margin-top: 42px; }
.name-form label { display: block; margin-bottom: 10px; color: var(--ink-muted); font-size: 12px; letter-spacing: .08em; }
.name-row { display: flex; gap: 10px; }
.name-row input { width: 100%; min-width: 0; border: 0; border-bottom: 1px solid oklch(0.74 0.03 250 / .4); border-radius: 0; padding: 14px 2px 12px; background: transparent; color: var(--ink); font-family: Baskerville, "Songti SC", serif; font-size: 22px; }
.name-row input::placeholder { color: var(--ink-faint); }
.primary-button, .continue-button { border: 0; border-radius: var(--radius-sm); background: var(--rose); color: oklch(0.98 0.01 20); cursor: pointer; box-shadow: 0 8px 24px oklch(0.2 0.1 10 / .27); transition: transform .2s var(--ease), background-color .2s ease; }
.primary-button { min-width: 132px; padding: 13px 17px; font-size: 13px; letter-spacing: .04em; }
.primary-button:hover, .continue-button:hover { background: oklch(0.76 0.13 12); }
.primary-button:active, .continue-button:active, .icon-button:active, .choice-button:active { transform: scale(.96); }
.title-actions { display: flex; gap: 20px; margin-top: 22px; }
.text-button { min-height: 40px; padding: 5px 0; border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; font-size: 12px; letter-spacing: .04em; }
.text-button:hover { color: var(--ink); }
.danger-text:hover { color: var(--danger); }
.private-note { margin: 72px 0 0; font-size: 9px; }

.game-screen { display: flex; flex-direction: column; min-height: 100vh; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 15px clamp(18px, 4vw, 46px); border-bottom: 1px solid oklch(0.8 0.02 255 / .1); background: oklch(0.08 0.02 255 / .72); }
.brand-lockup, .topbar-actions, .speaker-row, .rail-heading, .group-heading-row, .dialogue-footer { display: flex; align-items: center; }
.brand-lockup { gap: 10px; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid oklch(0.78 0.12 83 / .58); border-radius: 50%; color: var(--gold); font-family: Baskerville, serif; font-size: 18px; }
.brand-title { display: block; color: var(--ink); font-family: Baskerville, "Songti SC", serif; font-size: 17px; line-height: 1; }
.brand-kicker { display: block; margin-top: 5px; font-size: 8px; letter-spacing: .12em; }
.topbar-actions { gap: 12px; }
.chapter-label { color: var(--ink-faint); font-size: 10px; letter-spacing: .18em; }
.icon-button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid oklch(0.8 0.02 255 / .13); border-radius: 50%; background: transparent; color: var(--ink-muted); cursor: pointer; transition: color .2s ease, border-color .2s ease, transform .2s var(--ease); }
.icon-button:hover { border-color: oklch(0.78 0.12 83 / .55); color: var(--gold); }

.game-grid { display: grid; grid-template-columns: minmax(214px, 270px) minmax(0, 1fr); flex: 1; }
.status-rail { padding: 28px 22px 24px; border-right: 1px solid oklch(0.8 0.02 255 / .1); background: oklch(0.1 0.022 255 / .68); }
.rail-heading { justify-content: space-between; gap: 12px; padding-bottom: 21px; border-bottom: 1px solid oklch(0.8 0.02 255 / .1); }
.save-status { color: var(--water); font-size: 10px; }
.status-group { padding: 24px 0 0; }
.status-group h2 { margin: 0 0 15px; color: var(--ink-muted); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.stat-line { display: flex; align-items: center; justify-content: space-between; min-height: 31px; color: var(--ink-muted); font-size: 12px; }
.stat-line strong { color: var(--ink); font-family: Baskerville, serif; font-size: 17px; font-weight: 400; }
.stat-line span { display: inline-flex; align-items: center; gap: 8px; }
.stat-dot { width: 7px; height: 7px; border-radius: 50%; }
.stat-dot.raw { background: var(--rose); box-shadow: 0 0 10px oklch(0.71 0.13 12 / .6); }
.stat-dot.controlled { background: var(--gold); box-shadow: 0 0 10px oklch(0.78 0.12 83 / .6); }
.stat-dot.revelation { background: var(--water); box-shadow: 0 0 10px oklch(0.7 0.1 200 / .6); }
.relationship-list { display: grid; gap: 8px; }
.relationship-item { display: grid; grid-template-columns: 1fr 62px; align-items: center; gap: 8px; color: var(--ink-muted); font-size: 11px; }
.relationship-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.relationship-meter { height: 3px; overflow: hidden; background: oklch(0.8 0.02 255 / .12); }
.relationship-fill { height: 100%; background: var(--rose); transform-origin: left; transition: transform .35s var(--ease); }
.relationship-value { color: var(--ink-faint); font-variant-numeric: tabular-nums; text-align: right; font-size: 10px; }
.group-heading-row { justify-content: space-between; }
.group-heading-row h2 { margin-bottom: 0; }
.group-heading-row span { color: var(--ink-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.clue-list { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }
.clue-list li { position: relative; padding-left: 16px; color: var(--ink-muted); font-family: "Songti SC", serif; font-size: 12px; line-height: 1.45; }
.clue-list li::before { position: absolute; left: 0; top: .4em; content: ""; width: 6px; height: 6px; border: 1px solid var(--water); border-radius: 50%; }
.clue-list li.empty { padding-left: 0; color: var(--ink-faint); font-style: italic; }
.clue-list li.empty::before { display: none; }

.scene-column { display: grid; grid-template-rows: minmax(330px, 52vh) auto; min-width: 0; }
.scene-stage { position: relative; overflow: hidden; min-height: 330px; background: var(--canvas); isolation: isolate; }
.scene-backdrop { position: absolute; inset: 0; z-index: -3; background: #111b2b; transition: background-color .45s ease; }
.scene-backdrop::before, .scene-backdrop::after { position: absolute; content: ""; inset: 0; }
.scene-backdrop::before { opacity: .7; background: radial-gradient(circle at 77% 24%, oklch(0.69 0.1 200 / .18), transparent 20%), radial-gradient(circle at 28% 58%, oklch(0.71 0.13 12 / .13), transparent 26%); }
.scene-backdrop::after { opacity: .2; background-image: linear-gradient(125deg, transparent 0 49%, oklch(0.8 0.05 220 / .19) 50%, transparent 51%); background-size: 31px 31px; }
.scene-weather { position: absolute; inset: 0; z-index: -2; opacity: .4; background: repeating-linear-gradient(112deg, transparent 0 28px, oklch(0.85 0.08 205 / .1) 29px, transparent 30px 56px); transform: translateX(-15%); animation: rain-drift 16s linear infinite; }
@keyframes rain-drift { to { transform: translateX(15%); } }
.scene-heading { position: absolute; left: clamp(20px, 4vw, 50px); top: 27px; display: flex; align-items: baseline; gap: 10px; }
.scene-location { color: var(--ink); font-family: Baskerville, "Songti SC", serif; font-size: clamp(24px, 3vw, 38px); letter-spacing: -.03em; }
.scene-time { color: var(--ink-faint); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.portrait-layer { position: absolute; right: clamp(40px, 13vw, 170px); bottom: 0; width: min(29vw, 290px); height: 78%; }
.portrait-placeholder { position: absolute; right: 0; bottom: 0; display: grid; place-items: end center; width: 100%; height: 100%; }
.portrait-placeholder.portrait-fallback-hidden { opacity: 0; transition: opacity .2s ease; }
.portrait-placeholder::before { position: absolute; bottom: 0; width: 76%; height: 76%; content: ""; border-radius: 48% 48% 0 0; background: radial-gradient(circle at 48% 28%, var(--portrait-light), transparent 17%), linear-gradient(152deg, var(--portrait-dark), var(--portrait-mid)); box-shadow: 0 -16px 58px var(--portrait-glow); clip-path: polygon(17% 100%, 18% 35%, 36% 9%, 62% 0, 82% 28%, 85% 100%); }
.portrait-placeholder::after { position: absolute; right: 10%; bottom: 5%; content: attr(data-initial); display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid oklch(0.9 0.04 80 / .42); border-radius: 50%; color: oklch(0.92 0.03 80 / .78); font-family: Baskerville, serif; font-size: 24px; background: oklch(0.1 0.02 250 / .35); }
.portrait-placeholder[data-character="narrator"] { --portrait-light: transparent; --portrait-dark: oklch(0.2 0.05 250); --portrait-mid: oklch(0.12 0.02 250); --portrait-glow: transparent; }
.portrait-placeholder[data-character="declan"] { --portrait-light: oklch(0.8 0.11 83 / .32); --portrait-dark: oklch(0.18 0.04 250); --portrait-mid: oklch(0.31 0.05 250); --portrait-glow: oklch(0.7 0.1 200 / .18); }
.portrait-placeholder[data-character="fabian"] { --portrait-light: oklch(0.7 0.13 12 / .35); --portrait-dark: oklch(0.18 0.03 20); --portrait-mid: oklch(0.32 0.06 18); --portrait-glow: oklch(0.7 0.13 12 / .2); }
.portrait-placeholder[data-character="luna"] { --portrait-light: oklch(0.7 0.1 200 / .35); --portrait-dark: oklch(0.13 0.03 245); --portrait-mid: oklch(0.28 0.08 220); --portrait-glow: oklch(0.7 0.1 200 / .22); }
.portrait-placeholder[data-character="xavier"] { --portrait-light: oklch(0.72 0.08 155 / .27); --portrait-dark: oklch(0.13 0.03 160); --portrait-mid: oklch(0.29 0.06 160); --portrait-glow: oklch(0.72 0.08 155 / .2); }
.portrait-placeholder[data-character="emma"] { --portrait-light: oklch(0.77 0.09 12 / .3); --portrait-dark: oklch(0.18 0.03 25); --portrait-mid: oklch(0.34 0.07 18); --portrait-glow: oklch(0.77 0.09 12 / .18); }
.portrait-placeholder[data-character="tiffany"] { --portrait-light: oklch(0.8 0.12 83 / .4); --portrait-dark: oklch(0.18 0.03 48); --portrait-mid: oklch(0.35 0.07 55); --portrait-glow: oklch(0.8 0.12 83 / .22); }
.real-portrait { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 -14px 30px oklch(0.03 0.02 250 / .4)); }
.portrait-label { position: absolute; right: 0; bottom: 10px; color: oklch(0.92 0.03 80 / .65); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.scene-caption { position: absolute; left: clamp(20px, 4vw, 50px); bottom: 24px; max-width: 320px; color: var(--ink-faint); font-family: "Songti SC", serif; font-size: 14px; line-height: 1.6; }
.dialogue-panel { padding: clamp(20px, 4vw, 38px) clamp(20px, 5vw, 62px) 30px; background: var(--surface); }
.speaker-row { gap: 13px; margin-bottom: 12px; }
.speaker-name { color: var(--rose); font-family: Baskerville, "Songti SC", serif; font-size: 22px; }
.speaker-note { color: var(--ink-faint); font-size: 10px; letter-spacing: .08em; }
.dialogue-text { max-width: 68ch; min-height: 58px; margin: 0; color: var(--ink); font-family: "Songti SC", "STSong", serif; font-size: clamp(17px, 2vw, 21px); line-height: 1.8; text-wrap: pretty; }
.choice-list { display: grid; gap: 10px; margin-top: 22px; }
.choice-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; padding: 13px 16px; border: 1px solid oklch(0.8 0.02 255 / .16); border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--ink-muted); cursor: pointer; text-align: left; transition: transform .2s var(--ease), border-color .2s ease, background-color .2s ease, color .2s ease; }
.choice-button:hover { border-color: oklch(0.78 0.12 83 / .6); background: oklch(0.27 0.04 250 / .82); color: var(--ink); }
.choice-button .choice-tag { color: var(--ink-faint); font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.choice-button.revelation { border-color: oklch(0.7 0.1 200 / .3); }
.ending-card { margin-top: 18px; padding: 16px 18px; border-top: 1px solid oklch(0.78 0.12 83 / .32); border-bottom: 1px solid oklch(0.78 0.12 83 / .14); background: oklch(0.2 0.03 250 / .35); }
.ending-card p { max-width: 55ch; margin: 10px 0 0; color: var(--ink-muted); font-family: "Songti SC", serif; line-height: 1.7; }
.dialogue-footer { justify-content: space-between; gap: 16px; margin-top: 20px; }
.continue-button { padding: 11px 18px; font-size: 12px; letter-spacing: .08em; }
.continue-button span { margin-left: 8px; font-size: 16px; }
.hint { margin-left: auto; font-size: 9px; letter-spacing: .1em; }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 30; max-width: min(90vw, 420px); padding: 11px 15px; border: 1px solid oklch(0.8 0.04 83 / .24); border-radius: var(--radius-sm); background: oklch(0.16 0.04 250 / .95); color: var(--ink); box-shadow: 0 12px 30px oklch(0.04 0.02 250 / .4); opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .22s ease, transform .22s var(--ease); font-size: 12px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.dialogue-panel.is-entering .dialogue-text, .dialogue-panel.is-entering .choice-list { animation: text-in .42s var(--ease) both; }
.dialogue-panel.is-entering .choice-list { animation-delay: .08s; }
@keyframes text-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 820px) {
  .game-grid { grid-template-columns: 1fr; }
  .status-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 18px 20px; border-right: 0; border-bottom: 1px solid oklch(0.8 0.02 255 / .1); }
  .rail-heading, .clue-group { grid-column: 1 / -1; }
  .status-group { padding-top: 16px; }
  .relationship-group { padding-right: 5px; }
  .scene-column { grid-template-rows: minmax(320px, 56vh) auto; }
  .portrait-layer { right: 6vw; width: min(38vw, 260px); }
}
@media (max-width: 560px) {
  .title-screen { padding: 48px 20px 30px; }
  .name-row { flex-direction: column; gap: 14px; }
  .primary-button { width: 100%; }
  .title-actions { flex-wrap: wrap; gap: 8px 18px; }
  .topbar { min-height: 64px; padding-inline: 15px; }
  .brand-kicker, .chapter-label { display: none; }
  .topbar-actions { gap: 7px; }
  .mobile-only { display: grid; }
  .status-rail { position: fixed; inset: 64px 0 0; z-index: 15; display: block; overflow-y: auto; padding: 22px 20px calc(30px + env(safe-area-inset-bottom)); border-bottom: 0; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity .2s ease, transform .2s var(--ease); }
  .status-rail.drawer-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .status-rail .status-group { padding-top: 22px; }
  .status-rail .rail-heading { padding-bottom: 21px; }
  .relationship-group { padding-right: 0; }
  .scene-stage { min-height: 330px; }
  .scene-heading { top: 20px; left: 20px; display: block; }
  .scene-time { display: block; margin-top: 5px; }
  .portrait-layer { right: 4vw; width: min(54vw, 240px); height: 70%; }
  .scene-caption { left: 20px; bottom: 18px; max-width: 190px; font-size: 12px; }
  .dialogue-panel { padding: 23px 18px calc(24px + env(safe-area-inset-bottom)); }
  .speaker-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .dialogue-text { font-size: 17px; line-height: 1.72; }
  .dialogue-footer { align-items: flex-start; flex-direction: column-reverse; }
  .hint { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}