/* Reader controls and typography. Story art and character blocking stay in style.css. */
:root{--reader-accent:#2d665a;--reader-focus:#b75f35;--reader-paper:#fff7e8}
header{min-height:76px;padding:16px 4%;gap:20px}.brand{font-size:16px}nav{align-items:center;gap:8px}nav button,nav .account-link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px 15px;font:12px system-ui;letter-spacing:.025em;border:1px solid #e8c88b40;border-radius:999px;color:#f4e5c5;text-decoration:none}nav .account-link{margin-left:4px}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--reader-focus);outline-offset:4px}.chapter{padding:13px 0;font-size:10px}.chapter>#position{letter-spacing:.04em;font-size:10px;text-transform:none}
.reader,.reader:has(#portrait:not([hidden])){padding:24px 28px 15px!important;border:1px solid #dfc99b;border-radius:15px;background:linear-gradient(120deg,#fff8e9f7,#f5ead2fa);box-shadow:0 14px 40px #041b244d}.reader:has(#choices button){display:block!important}.reader .eyebrow,.reader:has(#portrait:not([hidden])) .eyebrow{left:18px;top:-32px;padding:9px 17px;border-radius:10px 10px 0 0;min-width:110px;font:700 13px/1.2 system-ui;letter-spacing:.015em;color:#38574a;background:#fff8e9;border-color:#dfc99b}
.reader #prose{font:18px/1.7 Georgia,'Times New Roman',serif;color:#284941;min-height:62px;cursor:pointer;touch-action:manipulation;overflow-wrap:break-word}.reader #prose p{margin:0 0 12px}.reader #prose .sr-only{grid-area:auto}body[data-text-size=large] .reader #prose{font-size:21px;line-height:1.75}.dialogue-controls{display:flex;align-items:center;justify-content:flex-end;gap:13px;min-height:48px;font:11px system-ui;color:#6e7c61}.dialogue-controls #line-position{margin-right:auto;white-space:nowrap;font-variant-numeric:tabular-nums}#dialogue-next{display:inline-flex;align-items:center;justify-content:center;min-width:124px;min-height:46px;margin:0;padding:10px 18px;border:1px solid #2d665a;border-radius:999px;background:var(--reader-accent);color:#fffaf0;font:600 13px system-ui;line-height:1.2;touch-action:manipulation}#dialogue-next:hover:not(:disabled){background:#1d5045}#dialogue-next:disabled{opacity:.65;cursor:default;background:#e5ead9;border-color:#d1d9bf;color:#587052}#reader-recap{min-width:55px;min-height:46px;border:0;background:transparent;color:#4e725d;font:600 12px system-ui;padding:9px 8px;text-decoration:underline;text-underline-offset:4px;touch-action:manipulation}.reading-footnote{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #c8cba955;margin-top:10px;padding-top:11px;font:10px/1.5 system-ui;color:#6c7c60}.reading-footnote #save-status:before{content:'✓';color:#5e8657;margin-right:5px}.reading-footnote #save-status{max-width:55%}.keyboard-hint{font-size:9px;text-align:right;opacity:.85}
.choice-prompt{margin:18px 0 10px;font:700 11px/1.5 system-ui;letter-spacing:.06em;color:#5b765b}.choice-prompt[hidden]{display:none}.reader #choices{display:grid;grid-template-columns:1fr;gap:9px;margin:0}.reader #choices button,.reader:has(#choices button) #choices button{position:relative;min-height:64px;width:100%;padding:15px 41px 15px 52px!important;border:1px solid #c0cbaa;border-radius:12px;background:#fcfff2;color:#285148;text-align:left;box-shadow:0 2px 0 #c4cda34d;transition:background .15s,border-color .15s;touch-action:manipulation}.reader #choices button:before{content:attr(data-choice);display:grid;place-items:center;position:absolute;left:14px;top:50%;transform:translateY(-50%);width:25px;height:25px;border-radius:7px;border:1px solid #d2ddc0;background:#edf3e3;color:#64805d;font:700 11px system-ui}.reader #choices button:after{content:'→';position:absolute;top:50%;right:16px;transform:translateY(-50%);font:18px system-ui;color:#668861}.reader #choices button:hover:not(:disabled){background:#e5f0dc;border-color:#7ea174;transform:none}.reader #choices button:disabled{opacity:.65}.reader #choices span{font:600 15px/1.5 system-ui}.reader #choices small{font:12px/1.6 system-ui;color:#657b5b;margin-top:4px}.reader-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;margin:3px 0 10px;background:#f3ead5;border:1px solid #d8c49a;border-radius:10px;font:12px/1.6 system-ui;color:#6f603e}.reader-status[hidden]{display:none}.reader-status>span{flex:1;min-width:150px}.reader-status>button{min-height:44px;padding:10px 15px;background:#fff9e9;border:1px solid #c6b78d;border-radius:999px;color:#536741;font:600 12px system-ui}.reader[aria-busy=true] #prose{cursor:wait}#prose:focus{outline:none}
#modal{max-height:85dvh;overflow:auto;border-radius:20px;background:#fff7e8;color:#385347;border-color:#d5c39b;padding:30px;overscroll-behavior:contain}#modal h2{font-family:Georgia,serif;color:#274d42;font-size:29px;margin:4px 40px 20px 0}#modal-body{font:14px/1.8 system-ui;color:#5d6f55}#modal-body label{display:block;margin:18px 0;font-size:13px;font-weight:600;color:#425f4d}#modal-body select,#modal-body input[type=text]{width:100%;min-height:46px;padding:11px 13px;border:1px solid #bfcaaf;border-radius:10px;background:#fffdf4;color:#34523f;font:14px system-ui;margin-top:8px}#modal-body input[type=range]{display:block;width:100%;min-height:44px;accent-color:#2d665a}#modal #close{min-width:44px;min-height:44px;line-height:1;border:0;background:#edeedc;border-radius:50%;padding:0;color:#657956}#modal-body .menu-action{min-height:48px;text-decoration:none;line-height:1.7;font:600 14px/1.7 system-ui;padding:12px 16px!important}.recap-note{font-size:12px;line-height:1.8;color:#798069}.recap-line{padding:15px 0;border-bottom:1px solid #dee0cb}.recap-line:last-child{border-bottom:0}.recap-line strong{font-size:11px;color:#77855e;letter-spacing:.03em}.recap-line p{font:16px/1.8 Georgia,serif;color:#3d5849;margin:7px 0 0}.save-slot{padding:12px 0 22px}.save-slot p{font-size:12px}.save-slot button{min-height:44px;margin-top:10px}.journal-tabs button{min-height:44px}#toast{z-index:100;bottom:calc(20px + env(safe-area-inset-bottom));font:12px/1.6 system-ui}
@media(min-width:1000px){.reader #choices:has(button:nth-child(3)){grid-template-columns:1fr 1fr}}
@media(max-width:600px){header{padding:8px 12px;min-height:64px;gap:10px;align-items:center}.brand{font-size:13px;letter-spacing:.08em;white-space:nowrap}.brand span{display:none}nav{width:auto;gap:5px;flex-wrap:nowrap;margin-left:auto}nav button{min-height:44px;min-width:44px;font-size:10px;letter-spacing:0;padding:10px 11px}nav .account-link{display:none}main{padding:0 10px 20px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}.chapter{padding:9px 0 11px;gap:7px}.chapter>span:first-child,.chapter>#place{font-size:8px}.chapter>#position{font-size:9px;white-space:nowrap}.stage{height:clamp(250px,45svh,405px)!important}body[data-event-art] .stage{height:clamp(230px,42svh,375px)!important}.reader,.reader:has(#portrait:not([hidden])){margin-top:0!important;margin-bottom:0!important;padding:22px 18px 14px!important;border-radius:0 0 15px 15px}.reader .eyebrow,.reader:has(#portrait:not([hidden])) .eyebrow{font-size:12px;left:12px;top:-32px;padding:10px 14px;margin-left:0}.reader #prose{font-size:17px;line-height:1.65;min-height:76px}.reader #prose p{margin-bottom:10px}body[data-text-size=large] .reader #prose{font-size:20px}.dialogue-controls{gap:6px;min-height:48px;font-size:10px;flex-wrap:nowrap}#dialogue-next{min-width:113px;min-height:46px;font-size:12px;padding:11px 14px}#reader-recap{font-size:11px;min-width:49px;padding:10px 7px}.reader #choices button,.reader:has(#choices button) #choices button{min-height:64px;padding:14px 34px 14px 46px!important;border-radius:11px}.reader #choices button:before{left:11px;width:24px;height:24px}.reader #choices button:after{right:12px;font-size:16px}.reader #choices span{font-size:14px;line-height:1.5}.reader #choices small{font-size:12px;line-height:1.55}.choice-prompt{font-size:11px;margin-top:16px}.reading-footnote{font-size:10px;justify-content:center;margin-top:12px;padding-top:9px}.reading-footnote #save-status{max-width:100%}.keyboard-hint{display:none}#modal{padding:25px 22px;width:calc(100% - 28px)}#modal h2{font-size:26px}#modal-body{font-size:13px}.reader-status{font-size:12px;padding:12px}.reader-status>span{min-width:130px}}
@media(max-width:360px){header{padding:7px 9px;gap:6px}.brand{font-size:11px}nav{gap:4px}nav button{padding:10px 8px;font-size:9px}.chapter>#position{font-size:8px}.reader,.reader:has(#portrait:not([hidden])){padding:20px 14px 12px!important}.dialogue-controls{gap:2px}.dialogue-controls #line-position{font-size:9px}#reader-recap{min-width:45px;padding:10px 5px}#dialogue-next{min-width:105px;font-size:11px}.reader #prose{font-size:16px}.reader #choices span{font-size:13px}}
@media(max-height:540px) and (orientation:landscape){.stage{height:clamp(180px,45svh,250px)!important}body[data-event-art] .stage{height:clamp(170px,42svh,230px)!important}}
@media(prefers-reduced-motion:reduce){.reader #choices button{transition:none}}
@media(min-width:601px){
 .stage{height:clamp(350px,calc(100svh - 165px),680px)!important}
 body[data-event-art] .stage{height:clamp(330px,calc(100svh - 165px),680px)!important}
 .reader[data-cast-count="1"] #portrait:is([data-character="changyuan"],[data-character="chengan"],[data-character="lin-xiaoyu"],[data-character="elder-wu"],[data-character="chen-bo"],[data-character="yan-commander"]){width:clamp(330px,58svh,560px)!important;height:clamp(330px,58svh,560px)!important}
 .reader[data-cast-count="2"] #portrait,.reader[data-cast-count="2"] .cast-extra,.reader[data-ensemble=true] #portrait,.reader[data-ensemble=true] #companion-portrait{width:clamp(310px,55svh,510px)!important;height:clamp(310px,55svh,510px)!important}
}
@media(min-width:601px){.stage,body[data-event-art] .stage{height:clamp(350px,calc(100svh - 270px),650px)!important}}
@media(min-width:900px){.reader #choices:has(button:nth-child(2)){grid-template-columns:1fr 1fr}}
.reader[data-choices=true] #dialogue-next:not(:disabled){background:#e4ecd9;border-color:#c4d1b4;color:#416446}.reader[data-choices=true] #dialogue-next:hover:not(:disabled){background:#d7e5c9}
.save-slot.requested-slot{padding:17px;background:#edf2df;border:1px solid #ccd7b7;border-radius:14px;margin:8px 0}
/* Approved opaque portrait atlases blend softly into the scene at their outer edges. */
.reader #portrait[data-portrait-format=opaque],.reader .cast-extra[data-portrait-format=opaque]{mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent),linear-gradient(0deg,transparent,#000 8%,#000 91%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent),linear-gradient(0deg,transparent,#000 8%,#000 91%,transparent);-webkit-mask-composite:source-in}
.reader .cast-extra[data-speaking=false]{filter:brightness(.82) saturate(.86);transition:filter 180ms ease-out,opacity 180ms ease-out}.reader #portrait[data-speaking=true]{filter:brightness(1) drop-shadow(0 8px 14px #061b3233)}
.scene-backdrop-layer{position:absolute;inset:0;z-index:0;pointer-events:none;background-repeat:no-repeat;opacity:0;transition:opacity 240ms ease-out}.scene-backdrop-layer[hidden]{display:none!important}.stage{background-color:#17353a}
@media(prefers-reduced-motion:reduce){.scene-backdrop-layer,.reader #portrait,.reader .cast-extra{transition:none!important}}