/* The Ember Oath. Mobile first: one column, stage on top, reading panel below. */
:root{--night:#16121d;--ink:#2a2230;--muted:#6d6372;--paper:#f7f0e2;--paper2:#efe4cf;--line:#dccbaa;--ember:#c8642c;--ember2:#e8a352;--ash:#3f6f8f;--var:#7a4a8f;--good:#3f7a4a;--bad:#a3402a}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--ink);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;-webkit-text-size-adjust:100%}
button,input{font:inherit;-webkit-tap-highlight-color:transparent}
button{cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--ember2);outline-offset:2px}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:500}
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;padding-top:max(8px,env(safe-area-inset-top));background:#16121dee;color:#f2e4c8;backdrop-filter:blur(4px)}
.brand{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-size:12px;letter-spacing:2.5px}
.brand b{color:var(--ember2);font-weight:700}
.brand-mark{color:var(--ember2);font-size:18px}
.menu{background:none;border:0;color:#f2e4c8;font-size:24px;min-width:44px;min-height:44px}
main{max-width:640px;margin:0 auto;min-height:calc(100dvh - 60px);display:flex;flex-direction:column;background:var(--paper)}
.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--ember)}
.small-note{font-size:13px;color:var(--muted);line-height:1.5}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* buttons */
.primary{border:0;background:var(--ember);color:#fff;font-weight:700;padding:14px 22px;border-radius:12px;min-height:50px;box-shadow:0 3px 0 #8d3f17}
.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #8d3f17}
.primary:disabled{opacity:.45;box-shadow:none}
.secondary{background:transparent;border:1.5px solid #b9a27c;color:var(--ink);padding:12px 18px;border-radius:12px;min-height:48px}
.danger{background:var(--bad);border:0;color:#fff;padding:12px 18px;border-radius:12px;min-height:48px;font-weight:700}
.text-button{border:0;background:none;color:var(--ember);text-decoration:underline;padding:10px 0;font-size:14px}
.actions{display:flex;gap:10px;margin-top:16px}
.actions .primary{flex:1}
.actions.stack{flex-direction:column}
.actions.stack>*{width:100%}
.button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* meters */
.meters{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px 14px;background:#211a29;color:#e8dcc6}
.meter{display:grid;gap:3px;font-size:11px;letter-spacing:.5px}
.meter-bar{height:7px;border-radius:5px;background:#3a3044;overflow:hidden}
.meter-bar span{display:block;height:100%;background:linear-gradient(90deg,#8a7a5a,var(--ember2));transition:width .6s ease}
.meter.hot .meter-bar span{background:linear-gradient(90deg,var(--ember),#e0412a)}
.meter.hot .meter-label{color:#ffb39a}
.meter.rise{animation:pulse .9s ease 2}
@keyframes pulse{50%{filter:brightness(1.6)}}

/* stage */
.stage{position:relative;height:clamp(170px,30dvh,300px);background:var(--bg) center/cover no-repeat,#2b2333;overflow:hidden;flex:0 0 auto}
.stage:after{content:'';position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,#00000055)}
.portrait{position:absolute;z-index:1;bottom:0;left:50%;transform:translateX(-50%);height:92%;max-width:70%;animation:enter .2s ease both;filter:drop-shadow(0 6px 10px #0006)}
@keyframes enter{from{opacity:0;transform:translate(-50%,10px)}}
.place{position:absolute;z-index:2;top:8px;left:10px;font-size:11px;letter-spacing:1px;color:#f6ead2;background:#00000055;padding:3px 9px;border-radius:20px}

/* panel */
.panel{flex:1;padding:14px 16px calc(22px + env(safe-area-inset-bottom));background:var(--paper);border-top:3px solid var(--ember)}
.who{display:flex;align-items:baseline;gap:8px;margin:-2px 0 6px}
.who b{font-family:Georgia,serif;font-size:19px;font-weight:600}
.who span{font-size:12px;color:var(--muted)}
.line{font-family:Georgia,serif;font-size:18px;line-height:1.55;margin:4px 0 10px}
.line.narration{font-style:italic;color:#3f3646}
.line.bad{color:#7c2a17}
.line.good{color:#2f5e38}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chip{font-size:11px;font-weight:700;letter-spacing:.4px;padding:3px 9px;border-radius:20px;background:var(--paper2);color:#5b4c3c}
.chip.mode-choose{background:#e9e1ee}.chip.mode-catch{background:#f3e0d0}.chip.mode-cued{background:#dfe9dc}.chip.mode-free{background:#d8e6f0}
.chip.pivot{background:#7c2a17;color:#fff}.chip.twist{background:#4a3a6b;color:#fff}.chip.amends{background:var(--good);color:#fff}.chip.bad{background:var(--bad);color:#fff}
.chip.side-ash{background:#dbe7ef;color:#24506b}.chip.side-var{background:#eadff0;color:#5a2f6e}
.twist-note{font-size:14px;background:#ece6f5;border-left:3px solid #4a3a6b;padding:8px 10px;border-radius:6px}
.stem{font-family:Georgia,serif;font-size:20px;line-height:1.6;margin:10px 0;padding:12px 14px;background:#fffaf0;border:1px solid var(--line);border-radius:12px}
.gap{display:inline-block;min-width:3.5em;padding:0 6px;border-bottom:2px solid var(--ember);color:var(--ember);font-family:ui-monospace,Menlo,monospace;font-size:.85em;letter-spacing:1px}
.source{font-family:Georgia,serif;font-size:17px;line-height:1.5;margin:6px 0}
.keyword{display:inline-block;font-family:system-ui,sans-serif;font-weight:800;font-size:13px;letter-spacing:1.5px;background:var(--ink);color:#fff;padding:2px 8px;border-radius:6px;vertical-align:middle}
.meaning{font-size:15px;line-height:1.5;background:#fffaf0;border-left:3px solid var(--ember2);padding:8px 10px;border-radius:6px}
.meaning span{font-weight:700;display:block;font-size:12px;letter-spacing:.5px;color:var(--muted)}
.task-lead{font-size:14px;color:var(--muted);margin:6px 0}
.field{display:grid;gap:5px;margin:10px 0}
.field span{font-size:13px;font-weight:700;color:#4b3f50}
.field input{width:100%;font-size:18px;padding:13px 14px;border:2px solid #c9b48d;border-radius:12px;background:#fff;min-height:52px}
.field input:focus{border-color:var(--ember);outline:none}
.opt-list{display:grid;gap:8px;margin:10px 0}
.opt{text-align:left;border:2px solid #d4c19c;background:#fffaf0;border-radius:12px;padding:12px 14px;min-height:50px;font-size:17px;color:var(--ink)}
.opt.on{border-color:var(--ember);background:#fbe7d4;font-weight:700}
.opt.big{display:grid;gap:4px}
.opt.big b{font-family:Georgia,serif;font-size:18px}
.opt.big small{font-size:13px;color:var(--muted)}
.chunks{font-family:Georgia,serif;font-size:19px;line-height:2.1;margin:10px 0}
button.chunk{font:inherit;border:0;border-bottom:2px dotted #a58c64;background:#fffaf0;border-radius:6px;padding:4px 7px;color:var(--ink);min-height:44px}
button.chunk:active{background:#fbe7d4}
.chunk.wrong-part{background:#f6d9cc;border-bottom:2px solid var(--bad);border-radius:6px;padding:4px 7px;text-decoration:line-through;text-decoration-color:var(--bad)}
.retry{font-weight:700;color:#7c2a17;font-size:15px}
.hint{font-size:14px;background:#fff3d6;padding:8px 10px;border-radius:8px}
.hint-row{text-align:right}
.timer{position:relative;height:8px;border-radius:5px;background:#e8dcc6;overflow:hidden;margin:6px 0}
.timer span{display:block;height:100%;width:100%;background:var(--ember2);transition:width 1s linear}
.timer.out{height:auto;overflow:visible;background:none}
.timer.out:before{content:attr(data-label);font-size:13px;font-weight:700;color:var(--bad)}
.timer.out span{display:none}
.verdict{border-radius:12px;padding:12px 14px;margin:8px 0;border:1px solid}
.verdict.good{background:#e6efdf;border-color:#b9d0ae}
.verdict.bad{background:#f7e3da;border-color:#e2b6a3}
.verdict h3{margin:0 0 6px;font-size:20px}
.model{font-family:Georgia,serif;font-size:18px;line-height:1.5;margin:6px 0;font-weight:600}
.why{font-size:15px;line-height:1.55;margin:6px 0}
.clue{background:#2b2333;color:#f2e4c8;border-radius:10px;padding:10px 12px;font-size:14px}
.clue:before{content:'✦ ';color:var(--ember2)}

/* title, chapter, ending */
.title-card,.chapter-card,.ending{flex:1;display:flex;align-items:flex-end;background:linear-gradient(#16121d00 0%,#16121d10 35%,#16121ddd 68%,#16121df2),var(--bg) center 30%/cover no-repeat,var(--night);color:#f4e8d0;padding:22px 18px calc(28px + env(safe-area-inset-bottom));min-height:calc(100dvh - 60px)}
.title-inner,.chapter-inner,.ending-inner{width:100%}
.title-card h1{font-size:44px;margin:6px 0 10px;color:#fff3dc}
.title-card p{font-size:17px;line-height:1.55;max-width:30em}
.title-card .secondary,.chapter-card .secondary,.ending .secondary{color:#f4e8d0;border-color:#8a7a68}
.title-card .small-note,.ending .small-note{color:#cbbda6}
.chapter-card{align-items:center;text-align:center}
.chapter-card h2{font-size:36px;margin:8px 0 18px;color:#fff3dc}
.ending{align-items:stretch}
.ending-inner{background:#16121dcc;border-radius:16px;padding:16px}
.ending h2{font-size:30px;margin:6px 0}
.ending p{font-size:17px;line-height:1.6}
.last-line{font-family:Georgia,serif;font-style:italic;font-size:19px!important;color:#ffd9a8}
.ending h3{font-size:20px;margin:18px 0 8px}
.epilogue{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.epi{padding:9px 12px;border-radius:10px;background:#2b2333;font-size:15px;line-height:1.45;border-left:4px solid #6a7d5c}
.epi b{display:block;font-size:13px;letter-spacing:.5px;color:#e8c99a}
.epi.is-lost{border-left-color:var(--bad)}
.epi.is-redeemed{border-left-color:var(--ember2)}
.tier-tragic .ending-inner{background:#1a0f12dd}

/* dialog */
dialog{border:0;border-radius:18px;background:var(--paper);color:var(--ink);padding:18px;width:min(620px,94vw);max-height:88dvh;overflow:auto}
dialog::backdrop{background:#0d0a12bb}
dialog h2{font-size:26px;margin:4px 0 10px}
dialog p,dialog li{line-height:1.6}
dialog>.primary{width:100%;margin-top:14px}
.how{padding-left:18px}
.toggle{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fffaf0}
.toggle input{width:24px;height:24px;margin-top:2px;accent-color:var(--ember)}
.toggle small{color:var(--muted);line-height:1.4}

@media(min-width:700px){main{border-left:1px solid #2b2333;border-right:1px solid #2b2333}.stage{height:300px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.stage.compact{height:clamp(120px,19dvh,190px)}
.stage.compact .portrait{height:96%}
.opt-list.two{grid-template-columns:1fr 1fr}
.opt-list.two .opt{text-align:center}