:root {
  color-scheme: dark;
  --ink:#faf0dc; --muted:#c6b8ad; --paper:#201c2d; --panel:#262234;
  --gold:#ffd18e; --line:#554558; --teal:#82d3ca;
  font-family: system-ui, sans-serif;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:0; min-height:100vh; background:radial-gradient(ellipse at 48% 0%, #31233d, #141421 62%); color:var(--ink); }
button, a { font:inherit; }
button, a[href] { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
:focus-visible { outline:3px solid var(--teal); outline-offset:4px; }
.shell { width:min(1090px, calc(100% - 48px)); margin:auto; }
.topbar { min-height:76px; display:flex; align-items:center; gap:18px; justify-content:space-between; }
.brand { display:block; width:68px; height:68px; object-fit:contain; flex:none; }
.status { color:var(--muted); font-size:.83rem; margin-left:auto; white-space:nowrap; }
.tools { display:flex; gap:8px; margin-left:auto; }
.quiet, .secondary { color:var(--ink); border:1px solid var(--line); background:#2d2639; border-radius:8px; min-height:44px; padding:.58rem .9rem; }
.quiet:hover, .secondary:hover { background:#41324c; }
.quiet:disabled { opacity:.45; cursor:default; }
main > section { border:1px solid var(--line); border-radius:21px; overflow:hidden; background:var(--paper); box-shadow:0 22px 62px #100d1b80; }
.title-screen { min-height:570px; display:grid; grid-template-columns: 1.15fr .85fr; }
.title-copy { padding:clamp(28px, 5vw, 64px); z-index:1; }
.eyebrow { color:var(--gold); font-size:.81rem; font-weight:800; letter-spacing:.12em; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:Georgia, serif; }
h1 { margin:.85rem 0; font-size:clamp(1.75rem, 3.65vw, 3.5rem); font-weight:800; line-height:1.38; letter-spacing:-.045em; }
h1 em { color:var(--gold); font-style:normal; }
.subtitle { color:var(--muted); font-size:.97rem; line-height:1.75; }
blockquote { margin:26px 0; padding:13px 16px; border-left:2px solid #bc8264; background:#32273b; color:#f3d8c7; font-size:1rem; line-height:1.7; }
.primary { background:var(--gold); color:#261a20; border:1px solid #ffe2aa; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; gap:.7rem; min-height:48px; padding:.68rem 1.15rem; font-weight:800; text-decoration:none; }
.primary:hover { background:#ffe1b0; }
.meta { color:var(--muted); font-size:.82rem; margin:13px 0 0; }
.meta span, footer span { color:#937491; }
.title-art { min-height:100%; position:relative; overflow:hidden; background:linear-gradient(135deg,#3f2d52,#262543 55%,#222033); isolation:isolate; border-left:1px solid #715165; }
.title-art::before, .stage::before { content:""; position:absolute; inset:0; z-index:-1; background:url("assets/hall.svg") center bottom / cover no-repeat; }
.title-art::before { opacity:.62; }
.title-moon { position:absolute; left:16%; top:13%; width:66%; aspect-ratio:1; border:1px solid #d6a98088; border-radius:50%; background:radial-gradient(circle,#fdcf9370,#b683a429 67%, transparent 68%); box-shadow:0 0 0 12px #ffd18e10,0 0 0 26px #ffd18e08; }
.title-art .character-art { position:absolute; bottom:10%; width:61%; filter:drop-shadow(0 15px 18px #0b0817aa); }
.title-king { left:-2%; transform:rotate(-6deg); }
.title-demon { right:-1%; transform:rotate(5deg); }
.title-art p { position:absolute; bottom:0; left:0; right:0; padding:16px 9px; margin:0; text-align:center; font-size:.82rem; letter-spacing:.12em; color:var(--gold); background:#1c172dbb; }
.letter-seal { position:absolute; right:12%; top:10%; display:grid; place-items:center; width:48px; aspect-ratio:1; border-radius:50%; border:2px solid #ffb38f; color:#ffd5a6; background:#853b54; box-shadow:0 0 0 5px #3b2539; }
.story-screen { max-width:790px; margin-inline:auto; }
.chapter-progress { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; list-style:none; margin:0; padding:10px 14px; background:#171522; }
.chapter-progress li { padding:4px 0 5px; border-bottom:4px solid #65536a; border-radius:4px; text-align:center; color:#c6b8ad; font-size:.78rem; }
.chapter-progress .complete { border-color:var(--teal); color:#e2efeb; }
.chapter-progress [aria-current="step"] { border-color:var(--gold); background:#422f40; color:var(--gold); font-weight:800; }
.stage { position:relative; min-height:98px; padding:15px 22px; display:flex; align-items:center; justify-content:space-between; gap:8px; isolation:isolate; background:linear-gradient(110deg,#342139,#2d3559); overflow:hidden; }
.stage::before { opacity:.25; }
.stage[data-scene="council"] { background:linear-gradient(110deg,#312139,#59334c); }
.stage[data-scene="forge"] { background:linear-gradient(110deg,#2b2035,#713e43); }
.stage[data-scene="road"] { background:linear-gradient(110deg,#182b40,#28575e); }
.stage[data-scene="road"]::before { background-image:url("assets/road.svg"); }
.stage[data-scene="office"] { background:linear-gradient(110deg,#252137,#444468); }
.chapter { min-width:0; }
.chapter h2 { margin:.25rem 0 0; font-size:clamp(1.05rem, 2.8vw, 1.65rem); line-height:1.42; }
.dialogue { border-top:1px solid #765765; padding:22px clamp(17px, 4.5vw, 46px) 27px; background:linear-gradient(140deg,#282236,#211d2e); }
.scene-title { color:var(--muted); font-size:.83rem; margin-bottom:11px; letter-spacing:.06em; }
.line { line-height:1.85; margin:0; font-size:clamp(1rem, 1.9vw, 1.15rem); overflow-wrap:anywhere; }
.line:focus, #ending-title:focus { outline:none; }
.character-art { display:block; aspect-ratio:1; background-image:url("assets/portrait-atlas.png"); background-size:300% 200%; background-repeat:no-repeat; }
.character-art[data-character="king"] { background-position:0 0; }
.character-art[data-character="demon"] { background-position:50% 0; }
.character-art[data-character="aide"] { background-position:100% 0; }
.character-art[data-character="merchant"] { background-position:0 100%; }
.character-art[data-character="pursuit"] { background-position:50% 100%; }
.character-art[data-character="hr"] { background-position:100% 100%; }
#speech { min-height:100px; padding:8px 0; display:grid; align-items:center; }
#speech.spoken { grid-template-columns:104px minmax(0,1fr); gap:15px; }
#portrait { width:100%; border-radius:10px; transform:scaleX(-1); }
.spoken .line { color:#ffe8ce; font-weight:650; }
.actions { margin-top:14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.choice { text-align:left; display:flex; align-items:center; gap:.7rem; color:var(--ink); background:#382b44; border:1px solid #705774; border-radius:8px; min-height:48px; padding:9px 13px; line-height:1.45; }
.choice span { color:var(--gold); font-size:.74rem; font-weight:800; }
.choice:hover { background:#4b3552; border-color:#c69594; }
.next { justify-self:end; grid-column:1 / -1; }
.diagnosis-screen { text-align:center; padding:clamp(52px,10vw,100px) 16px; background:radial-gradient(ellipse at top,#45334f,#201c2d 75%); }
.diagnosis-screen h2 { margin:0 0 24px; color:var(--gold); font-size:clamp(1.55rem,5vw,2.5rem); }
.diagnosis-screen h2:focus { outline:none; }
#view-diagnosis { width:min(100%, 280px); min-height:56px; box-shadow:0 4px 0 #a76547; }
#view-diagnosis:active { transform:translateY(2px); box-shadow:0 2px 0 #a76547; }
.ending-hero { position:relative; display:grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 28%); align-items:center; gap:20px; background:linear-gradient(125deg,#34273c,#52405e); padding:clamp(22px,5vw,52px); padding-bottom:24px; overflow:hidden; }
.ending-hero > div { z-index:1; }
.ending-art { display:block; width:100%; max-width:265px; aspect-ratio:1; justify-self:end; background:url("assets/hero-type-atlas.png") no-repeat; background-size:400% 400%; }
.ending-hero h2 { font-size:clamp(1.3rem,3vw,2rem); margin:0; text-wrap:balance; overflow-wrap:anywhere; }

.type { font-size:clamp(2.65rem,7vw,5.2rem); color:var(--gold); margin:0; font-weight:900; letter-spacing:.02em; }
.quip { color:#f5d6c6; margin:4px 0 0; line-height:1.65; }
.ending-content { display:grid; grid-template-columns:1.15fr 1fr; column-gap:36px; padding:clamp(19px,4.5vw,44px); }
.ending-content h3 { color:var(--gold); font-size:1.02rem; margin-bottom:.5rem; }
.ending-story p { line-height:1.78; }
.ratio { margin:0 0 18px; }
.ratio-label > span:last-child { text-align:right; }
.ratio-label { display:flex; justify-content:space-between; gap:6px; font-size:.79rem; margin-bottom:6px; }
.bar { position:relative; height:12px; margin-inline:4px; border-radius:50px; background:linear-gradient(to right, var(--teal) 0 var(--split), #a077ad var(--split) 100%); }
.bar::after { content:""; position:absolute; top:50%; left:var(--split); width:9px; height:20px; transform:translate(-50%,-50%); border-radius:5px; background:#fff2dd; border:2px solid #252032; box-shadow:0 0 0 1px #fff2dd; }
.disclaimer, .result-actions, .studio-links, #share-note, #card-hint { grid-column:1 / -1; }
.disclaimer { border-top:1px solid var(--line); margin:8px 0 16px; padding-top:13px; color:var(--muted); font-size:.81rem; line-height:1.65; }
#save-card { display:inline-flex; align-items:center; text-decoration:none; }
#save-card[aria-disabled] { opacity:.55; cursor:wait; }
.result-actions, .studio-links { display:flex; flex-wrap:wrap; gap:10px; }
.studio-links { margin-top:18px; gap:10px 20px; }
.studio-links a { color:var(--teal); font-size:.85rem; text-underline-offset:.23em; }
footer { padding:19px 0 25px; font-size:.78rem; color:var(--muted); }
dialog { border:1px solid #967a96; border-radius:15px; width:min(630px, calc(100% - 24px)); background:#231c31; color:var(--ink); padding:18px; }
dialog::backdrop { background:#100a17b8; }
.log-head { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.log-head h2 { margin:0; font-size:1.2rem; }
#log-list { max-height:58vh; overflow:auto; padding-left:1.5em; }
#log-list li { border-top:1px solid var(--line); padding:10px 10px 4px 0; }
#log-list p { margin:.3em 0; line-height:1.6; }
@media (max-width:660px) {
  .shell { width:calc(100% - 22px); }
  .topbar { min-height:60px; gap:7px; flex-wrap:wrap; padding:6px 0; }
  .brand { width:54px; height:54px; }
  .status { font-size:.73rem; }
  .tools { gap:4px; }
  .quiet { font-size:.77rem; padding:.34rem .45rem; }
  main > section { border-radius:14px; }
  .title-screen { grid-template-columns:1fr; }
  .title-copy { padding:23px 19px; }
  .title-art { min-height:240px; border-left:0; border-top:1px solid var(--line); }
  .title-moon { width:43%; left:29%; }
  .title-art .character-art { width:46%; }
  .title-king { left:9%; }
  .title-demon { right:8%; }
  .stage { min-height:74px; padding:10px 12px; }
  .dialogue { padding:13px 13px 17px; }
  #speech { min-height:84px; }
  #speech.spoken { grid-template-columns:clamp(58px, 19vw, 82px) minmax(0,1fr); gap:9px; }
  .actions, .ending-content { grid-template-columns:1fr; }
  .ending-hero { grid-template-columns:minmax(0,1fr) minmax(76px,31%); gap:10px; padding:16px; }
  .ratios { margin-top:7px; }
}
@media (max-width:350px) {
  .topbar { column-gap:4px; }
}
@media (prefers-reduced-motion:no-preference) {
  .title-screen, .result-screen { animation:appear .23s ease-out; }
  @keyframes appear { from {opacity:.65;} to {opacity:1;} }
}