:root{color-scheme:dark;font:16px/1.5 Arial,sans-serif;color:#f5f1e9;background:#08090d;--gold:#ffcf70;--cyan:#75e8ed}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#202131,#08090d 65%);height:100vh;height:100dvh;display:flex;flex-direction:column}a{color:var(--cyan)}button,select{font:inherit;color:inherit;background:#171b25;border:1px solid #556073;border-radius:8px;min-height:44px;padding:8px 14px}button{cursor:pointer}button:hover:not(:disabled){border-color:var(--gold)}button:disabled{opacity:.35;cursor:default}button:focus-visible,select:focus-visible,a:focus-visible,.comic-page:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.reader-header{width:100%;max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;border-bottom:1px solid #353748;flex:none}.reader-header>a{font-size:14px;text-decoration:none;white-space:nowrap}.reader-header>div{text-align:center}.reader-header p{margin:0;font-size:12px;letter-spacing:.08em;color:var(--gold)}h1{margin:0;font:700 clamp(16px,2.4vw,23px)/1.25 Georgia,serif}
main{flex:1;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:6px;padding:8px 12px max(8px,env(safe-area-inset-bottom))}.page-controls{display:flex;align-items:center;justify-content:center;gap:10px}.page-controls select{min-width:145px}.reader-help{text-align:center;margin:0;font-size:14px;color:#c6c7d1}.reader-help button{min-height:30px;padding:3px 8px;background:none;border-color:transparent;color:var(--cyan);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.reading-surface{container-type:size;width:100%;min-height:0;display:grid;place-items:center;touch-action:pan-y pinch-zoom;overflow:auto;overscroll-behavior:contain;padding:0}
.comic-page{position:relative;container-type:inline-size;background:#000;width:min(100cqw,75cqh,1000px);aspect-ratio:3/4;display:grid;grid-template-rows:1fr 1fr;gap:6px;margin:0;border:6px solid #000;color:#fff;overflow:hidden;box-shadow:0 12px 45px #000b}
.comic-heading,.comic-folio,#page-status,.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.comic-panel{position:relative;margin:0;min-height:0;background:#000;overflow:hidden}.art-wrap{position:absolute;inset:0;background:#15151d}.comic-panel img{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.comic-panel figcaption{position:absolute;z-index:2;left:3%;right:3%;bottom:3%;display:flex;flex-direction:column;align-items:flex-start;gap:5px;font:600 clamp(14px,3.2cqw,23px)/1.22 Georgia,serif;color:#201809;pointer-events:none}
.comic-panel figcaption p{display:inline-block;max-width:96%;margin:0;padding:6px 9px;background:#ffe795;border:2px solid #080808;box-shadow:2px 3px 0 #0009}
.comic-panel figcaption .dialogue{background:#fff8df;border-radius:12px;color:#17131a}.comic-panel figcaption .dialogue:nth-child(even){align-self:flex-end}
.score-inset{position:absolute;right:4%;top:5%;max-width:67%;padding:5px 8px;background:#031015f5;border:1px solid #76f4e2;color:#9dffcb;text-shadow:0 0 8px #58ff9b;font:700 clamp(11px,2.5cqw,18px)/1.3 monospace;white-space:pre-line}
.closing{position:absolute;right:4%;bottom:1%;z-index:3;margin:0;padding:4px 8px;background:#000;color:var(--gold);font:700 clamp(12px,2.8cqw,18px)/1.25 Arial,sans-serif}.comic-page:has(.closing) .comic-panel:last-of-type figcaption{bottom:12%}
.cover-page{width:min(100cqw,67.09cqh,900px);aspect-ratio:848/1264;grid-template-rows:1fr}.cover-page img{object-fit:contain}.cover-page figcaption{display:none}
.reader-header{justify-content:center;padding:5px 12px}.page-controls button,#full-reader button{border:2px solid #00ffff;border-radius:24px;color:#00ffff;background:#070b14;font:10px/1.5 'Press Start 2P',monospace;box-shadow:0 0 9px #00ffff60,inset 0 0 8px #00ffff25}.page-controls button:hover,#full-reader button:hover{color:#ff66ff;border-color:#ff66ff}.page-controls select{border-color:#00ffff;color:#00ffff}
#full-reader{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;color:white;overflow:hidden}#full-reader::backdrop{background:#000}#full-mount,#full-reader .reading-surface{width:100%;height:100%;overflow:hidden}#full-reader .comic-page.enlarged{width:min(100cqw,75cqh);max-width:none;margin:0;align-self:center}#full-reader .cover-page.enlarged{width:min(100cqw,67.09cqh)}#full-reader button{position:absolute;z-index:10;min-width:44px;min-height:44px;background:#050914ec}#full-close{right:max(8px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top))}#full-previous{left:6px;top:48%}#full-next{right:6px;top:48%}
.image-error{position:absolute;inset:0;background:#181723;display:grid;place-content:center;padding:20px;text-align:center;font-size:16px}[hidden]{display:none!important}
@media(max-width:600px){.reader-header{padding:8px 10px;gap:8px}.reader-header p{display:none}.reader-header>a{font-size:12px}h1{font-size:16px}.page-controls{gap:6px}.page-controls button{font-size:14px;padding:8px}.page-controls select{min-width:125px;font-size:14px}main{padding:6px 6px max(6px,env(safe-area-inset-bottom));gap:3px}.reader-help{font-size:12px}.reader-help button{font-size:13px}.comic-page{gap:4px;border-width:4px}.comic-panel figcaption p{padding:5px 7px}}
@media(max-height:540px) and (min-width:440px){.reader-header{padding:4px 14px}.reader-header p{display:none}main{gap:2px;padding-top:4px}.reader-help{font-size:12px}.reader-help button{min-height:24px;padding:0 6px}.comic-page:not(.cover-page):not(.enlarged){width:min(100cqw,300cqh);aspect-ratio:3/1;grid-template-columns:1fr 1fr;grid-template-rows:1fr}.comic-panel figcaption{font-size:clamp(12px,2cqw,19px)}.score-inset{font-size:clamp(10px,1.6cqw,14px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* Comic-book masthead and controls framing the page, not occupying the artwork. */
.reader-header{border:0;padding:8px 12px 4px}.reader-header p{display:block;font:700 10px/1.5 'Press Start 2P',monospace;letter-spacing:.08em;color:#ffcf70}.reader-header h1{font:900 italic clamp(21px,3vw,32px)/1.12 Impact,'Arial Black',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#ffe795;text-shadow:2px 2px 0 #853552,3px 3px 0 #030610,0 0 18px #ff66ff45}.reader-header>div{transform:skew(-3deg)}main{grid-template-rows:auto minmax(0,1fr) auto}.reader-help{display:flex;justify-content:center;align-items:center;gap:16px}body .reader-help #size-toggle{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;min-height:36px;padding:4px 8px;text-decoration:underline!important;text-underline-offset:4px;font:14px/1.5 Arial,sans-serif!important;text-transform:none}body .reader-help button:not(#size-toggle){font-size:18px;min-width:44px;min-height:36px;padding:1px 8px}.page-controls select{font-size:13px;min-width:125px}.page-controls{padding-top:4px}
@media(max-width:600px){.reader-header p{font-size:8px}.reader-header h1{font-size:20px}.reader-header{padding:6px 6px 3px}body .page-controls button{font-size:8px;padding:8px 6px}.page-controls select{min-width:112px;padding:8px 4px;font-size:12px}}