:root{color-scheme:dark;--yellow:#f8db61;--muted:#99939f;--line:#35303d}*{box-sizing:border-box}body{margin:0;background:#111016;color:#f7f3ea;font:14px Arial,sans-serif}main{max-width:1180px;margin:auto;padding:30px 36px}button,select{font:inherit;color:inherit;cursor:pointer}button{background:transparent;border:1px solid var(--line);padding:11px 16px;transition:.15s}button:hover{border-color:var(--yellow);color:var(--yellow)}button:focus-visible,select:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.brand{font-size:30px;font-weight:950;letter-spacing:-1.8px;color:#f8f1dd;text-decoration:none;line-height:.9}.brand span{color:var(--yellow)}.brand small{display:block;font:9px monospace;letter-spacing:2px;margin-top:9px}.edition{font:11px monospace;letter-spacing:2px}.edition span{display:block;color:var(--muted);font-size:9px;margin:6px 0 0 15px}.edition i{display:inline-block;width:6px;height:6px;background:var(--yellow);border-radius:50%;margin-right:9px}#sound{font:10px monospace}.machine{border:1px solid #45404a;background:#211c27;padding:10px;box-shadow:0 18px 80px #0005}.topline,.bottomline{display:flex;align-items:center;justify-content:space-between;font:10px monospace;letter-spacing:1px;padding:9px 7px 15px;color:#bdb5c6}.topline span:first-child{color:var(--yellow)}.topline button{border:0;padding:0;font:10px monospace}.screen{position:relative;background:#050409;aspect-ratio:4/3;overflow:hidden;border:1px solid #09080c}canvas{width:100%;height:100%;display:block;outline:none}.bottomline{padding:15px 7px 7px;font-size:9px}.bottomline b{color:var(--yellow);padding:0 10px}.overlay{position:absolute;inset:0;display:grid;grid-template-columns:.85fr 1.4fr;gap:24px;align-content:center;padding:40px;background:linear-gradient(90deg,#14111bf5,#14111be9);overflow:auto}.intro h1{font-size:clamp(25px,4vw,52px);letter-spacing:-2px;line-height:1.05;margin:22px 0}.intro em{font-style:normal;color:var(--yellow)}.intro p{font-size:13px;color:#b6aebe;line-height:1.8}.eyebrow{font:10px monospace;letter-spacing:2px;color:var(--yellow)}.slots{display:flex;align-items:center;gap:9px;margin-bottom:12px}.slots button{flex:1;text-align:left;font:10px monospace;padding:12px}.slots strong{display:block;margin-top:8px;font:15px Arial}.slots button.active{border-color:var(--yellow);background:#f8db610b}.slots b{font:italic 15px serif;color:var(--muted)}.roster{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;max-height:300px;overflow:auto;scrollbar-color:#655569 #211b28}.card{position:relative;padding:0;min-width:0;background:linear-gradient(#302635,#1a151e);border:1px solid #483b4d;height:66px;overflow:hidden}.card img{height:96px;width:100%;object-fit:cover;object-position:50% 0;image-rendering:auto}.card span{position:absolute;bottom:0;left:0;right:0;background:#08060bdf;font:8px monospace;padding:4px 1px;white-space:nowrap;overflow:hidden}.card.selected{border-color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)}.skin-note{font:10px monospace;line-height:1.5;color:#b5a9bc;min-height:30px;margin:9px 0}.settings{display:flex;gap:10px;margin:10px 0 14px}.settings label{flex:1;font:9px monospace;color:var(--muted)}select{display:block;width:100%;background:#241d2c;border:1px solid #4c4057;padding:9px 5px;margin-top:6px;font-size:11px}.primary{background:var(--yellow);color:#21190d;border:1px solid var(--yellow);font:bold 12px monospace;letter-spacing:2px;width:100%;padding:16px}.primary:hover{background:#ffec97;color:#111}.primary:disabled{opacity:.5;cursor:wait}.menuFoot{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid #4c4057;padding-top:18px;color:#a89eaf;font:9px monospace}.hidden{display:none!important}.pause{position:absolute;inset:0;background:#110e18d9;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;backdrop-filter:blur(4px)}.pause h2{font:bold 44px monospace;text-align:center;margin:0 0 10px}.pause button{min-width:250px;width:auto}.controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;margin:28px 0}.controls .eyebrow{font-size:9px;color:#b5a9bc}.controls p{font-size:11px;color:#c6bfcc;line-height:1.9;margin:9px 0}kbd{display:inline-block;min-width:21px;text-align:center;border:1px solid #55485e;border-bottom-width:3px;border-radius:3px;padding:1px 3px;margin-right:4px;font:10px monospace;color:#f0e8f3}.tip button{font:9px monospace;padding:7px 10px}footer{display:flex;justify-content:space-between;font:8px monospace;letter-spacing:2px;color:#796e82;border-top:1px solid var(--line);padding-top:20px}.touch{display:none;gap:5px;flex-wrap:wrap;margin-bottom:15px}.touch button{touch-action:none;user-select:none;flex:1;font:10px monospace;padding:15px 8px}.machine:fullscreen{display:flex;flex-direction:column;align-items:center;background:#08060c}.machine:fullscreen .screen{height:90vh;width:auto;max-width:100vw}.machine:fullscreen .topline,.machine:fullscreen .bottomline{width:100%}@media(max-width:800px){main{padding:18px 12px}.edition{display:none}.controls{grid-template-columns:1fr 1fr;gap:10px}.tip{grid-column:1/-1}.overlay{padding:20px;gap:15px;grid-template-columns:1fr 1.7fr}.intro h1{font-size:32px}.intro p{font-size:11px}.roster{max-height:195px}.card{height:50px}.card img{height:78px}.menuFoot{padding-top:9px;font-size:7px}.touch{display:flex}.skin-note{font-size:8px}.settings{margin:4px 0}.primary{padding:12px}.eyebrow{font-size:8px}header{margin-bottom:18px}.topline{font-size:8px}.topline span:nth-child(2){display:none}}@media(max-width:520px){.overlay{display:block;padding:14px}.intro h1,.intro p{display:none}.intro{margin-bottom:10px}.slots button{padding:6px}.slots strong{font-size:12px;margin-top:4px}.roster{max-height:150px}.card{height:43px}.card img{height:65px}.menuFoot{margin-top:9px}.settings select{padding:6px}.skin-note{min-height:20px;margin:4px 0}.bottomline{font-size:7px}.controls p{font-size:10px}.brand{font-size:25px}.pause h2{font-size:28px}}

.costumes{display:flex;gap:6px;margin-top:10px}.costumes button{flex:1;padding:8px 5px;font:10px monospace;color:var(--yellow)}

.portal-screen{position:absolute;inset:0;overflow:auto;padding:7%;background:linear-gradient(120deg,#15101bf5,#17111be8)}.portal-screen h1{font-size:clamp(28px,5vw,62px);line-height:1.02;letter-spacing:-2px;margin:20px 0;color:var(--yellow)}.portal-screen>p{color:#c0b4ca;line-height:1.7}.portal-choices{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}.portal-choices button,.arcade-chapters button{text-align:left;padding:22px;background:#22192ce8}.portal-choices b{font:10px monospace;color:var(--yellow)}.portal-choices strong,.arcade-chapters strong{display:block;font-size:23px;margin:12px 0}.portal-choices span,.portal-choices small,.arcade-chapters span{display:block;font-size:11px;color:#c7b9d1;line-height:1.7}.portal-choices small{margin-top:12px}.arcade-chapters{display:grid;gap:12px;margin:28px 0}.arcade-chapters button b{float:right;color:var(--yellow);font:40px monospace}.arcade-chapters strong{font-size:18px;margin:0 0 6px}.chapter-screen{position:absolute;inset:0;display:flex;flex-direction:column;background:#080b14}.chapter-screen>div:first-child{padding:12px;color:var(--yellow);font:11px monospace}.chapter-screen iframe{border:0;width:100%;flex:1;min-height:0;background:#080b14}#chapterLoading{position:absolute;inset:50% 10% auto;text-align:center;background:#161020;padding:20px;font:12px monospace;pointer-events:none}.portal-open .controls,.portal-open .touch,.chapter-open .controls,.chapter-open .touch{display:none}@media(max-width:620px){.portal-screen{padding:5%}.portal-screen h1{font-size:32px;margin:12px 0}.portal-choices{grid-template-columns:1fr;gap:10px;margin-top:14px}.portal-choices button{padding:13px}.portal-choices strong{font-size:19px;margin:6px 0}.portal-choices small{margin-top:5px}.arcade-chapters{margin:14px 0;gap:8px}.arcade-chapters button{padding:14px}.arcade-chapters strong{font-size:15px}#hubHome{font-size:9px;padding:9px}}

#chapterLoading{pointer-events:auto}#chapterRetry{display:block;margin:14px auto 0;font:11px monospace;color:var(--yellow)}

#chapterLoading{inset:36px 0 0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#090d17}

.narrative-screen{position:absolute;inset:0;display:flex;flex-direction:column;background:#07060b}.narrative-screen video,.narrative-screen img{display:block;width:100%;height:calc(100% - 44px);min-height:0;object-fit:contain}.narrative-actions{height:44px;display:flex;align-items:center;justify-content:flex-end;padding:5px 12px;background:#15101d}.narrative-actions button{padding:7px 13px;color:var(--yellow);font:11px monospace}#introPlay{position:absolute;left:25%;top:45%;width:50%}

/* The prologue is a film: only the explicit skip action is interactive. */
#storyIntro{pointer-events:none}#storyIntro::-webkit-media-controls{display:none!important}.intro-playing #sound{visibility:hidden}.story-only .portal-choices{grid-template-columns:minmax(0,1fr);max-width:660px;margin-inline:auto}[hidden]{display:none!important}

/* One physical CRT and a single continuous lens over the entire comic page. */
.comic-stage{flex:1;min-height:0;display:flex;padding:clamp(8px,1.6vw,20px);background:radial-gradient(ellipse at center,#252333,#08070b 76%)}
.crt-bezel{position:relative;width:100%;height:100%;padding:clamp(8px,1.5vw,19px);border:3px solid #4e4d57;border-radius:4%/5%;background:linear-gradient(135deg,#41414e,#191922 18%,#08080e 70%,#33323e);box-shadow:inset 0 2px 3px #96909c66,inset 0 -5px 9px #000,0 4px 17px #000}
.crt-glass{position:relative;width:100%;height:100%;overflow:hidden;border-radius:3%/4%;background:#010105;border:3px solid #030308;box-shadow:0 0 0 2px #73707c44,0 0 15px #a379fa22}
#comicPage{width:100%;height:100%;object-fit:contain;filter:saturate(1.08) contrast(1.03)}
.crt-glass:before,.crt-glass:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit}
.crt-glass:before{background:repeating-linear-gradient(0deg,#00000018 0px,#00000018 1px,transparent 1px,transparent 3px);box-shadow:inset 0 0 32px 8px #0009}
.crt-glass:after{background:linear-gradient(118deg,transparent 3%,#b7d9ff15 8%,#ffffff22 10%,#d4e3ff0e 17%,transparent 31%),radial-gradient(ellipse at 50% -15%,#dfecff1c 0%,transparent 63%),linear-gradient(169deg,#ffffff0d 0%,transparent 45%,#04020e26 100%);box-shadow:inset 4px 3px 12px #b9dcff24,inset -7px -5px 24px #020108bb}
.crt-power{position:absolute;right:3%;bottom:5px;width:5px;height:3px;background:#ff5148;box-shadow:0 0 6px #ff322d}
.event-screen{justify-content:center;background:#030208}.event-screen #eventPoster{flex:1;width:100%;height:calc(100% - 58px);object-fit:contain;min-height:0}.event-screen .narrative-actions{height:auto;min-height:58px;flex-wrap:wrap;justify-content:center;gap:10px}.event-screen .narrative-actions button{font-size:12px}

body.narrative-open .screen{height:min(720px,calc(100dvh - 220px));min-height:220px;aspect-ratio:auto}.comic-stage{justify-content:center}.crt-bezel{width:auto;aspect-ratio:4/3;max-width:100%;flex:none}body.narrative-open .machine:fullscreen .screen{height:calc(100dvh - 80px)}