:root{--ink:#111a29;--paper:#f8efd9;--sub:#c6c9ca;--amber:#ffbd70;--edge:#556071;--cyan:#83e0df}
html,body{font-family:"Trebuchet MS","Segoe UI",sans-serif}
.dialog{color:var(--paper);border:1px solid var(--edge);background:#162233;border-radius:16px;box-shadow:0 28px 90px #0009;max-height:94dvh}
.dialog h2,.dialog h3{font-family:"Trebuchet MS","Segoe UI",sans-serif;letter-spacing:-.045em}
.dialog h2{margin:9px 0 14px;font-size:clamp(26px,3.2vw,40px)}
.dialog p{color:#d1d8db}
#modals{background:#080e19c9;backdrop-filter:blur(5px)}
.btn,.close,.iconBtn{border-radius:8px}
.btn.primary,#actions .primary{background:var(--amber);color:#211b19;border:1px solid #ffd6a5}
.btn.primary:hover{background:#ffce93}
.linkBtn{border:0;border-radius:4px;background:transparent;color:#c4d9e5;padding:8px 6px;font-weight:700;text-decoration:underline;text-underline-offset:4px;min-height:42px}
.callSign,.channel,.routeState,.plate span,.boardStats,.radioMeta,.cast figcaption,.transcript b{font-family:Consolas,"Courier New",monospace}
.callSign{color:var(--amber);letter-spacing:.13em;font-size:12px;font-weight:700}
.coverDialog,.radioDialog{padding:0;width:min(830px,100%)}
.coverDialog{background:#121a27}
.welcomeArt{aspect-ratio:2.28;background:center / cover url("assets/cover.webp");border-bottom:2px solid var(--amber)}
.welcomeCopy{padding:clamp(19px,3.1vw,37px)}
.welcomeCopy h2{font-family:Impact,"Arial Black",sans-serif;text-transform:uppercase;font-size:clamp(56px,8.5vw,105px);font-weight:900;letter-spacing:-.045em;line-height:.98;margin:8px 0 12px}
.welcomeCopy p{font-size:clamp(16px,1.7vw,20px);line-height:1.5;max-width:53ch;margin:0}
.welcomeActions,.radioBottom,.radioNav,.channel,.boardFooter,.boardStats,.radioMeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.welcomeActions{margin-top:22px;gap:22px}.welcomeActions .btn{padding:13px 23px}
.boardDialog{width:min(790px,100%);padding:clamp(18px,3.5vw,36px)}
.boardStats{border-block:1px solid #58637280;color:#f2d2a2;padding:10px 0;gap:20px;margin:12px 0 18px;font-size:13px}
.routes{display:grid;gap:8px}.routeCard{display:flex;align-items:center;gap:15px;padding:7px 10px 7px 7px;border:1px solid #404a59;background:#192537;border-radius:8px}
.routeCard.ready{border-color:#a27b4a;background:#253043}.routeCard img{width:100px;height:64px;object-fit:cover;border-radius:4px}
.routeCard:not(.ready) img{filter:saturate(.43) brightness(.8)}
.routeCard>div{flex:1;min-width:0}.routeState{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#c1c5c8}
.routeCard.ready .routeState{color:var(--amber)}.routeCard h3{margin:1px 0 2px;font-size:20px}.routeCard p{margin:0;font-size:13px}
.boardFooter{margin-top:12px;justify-content:space-between}
.manual{padding-left:22px}.manual li{margin:12px 0}
.demoStrip,.processRibbon{display:flex;align-items:center;justify-content:center;gap:clamp(10px,4vw,36px);border:1px solid #65748770;border-radius:6px;min-height:50px;background:repeating-linear-gradient(90deg,#223242 0 1px,transparent 1px 24px),#1b2938;margin-bottom:10px}
.demoStrip span{font-size:24px}.demoStrip i,.processRibbon i{font-style:normal;color:var(--amber);font-size:20px}
.demoStrip.mode0 span:first-child,.demoStrip.mode2 span:first-child{animation:walkMarker 2.1s ease-in-out infinite}.demoStrip.mode1 i{animation:scanRipple 1.6s ease-out infinite}
.demoStrip.mode3 span,.processRibbon span{font-size:14px;font-weight:bold;text-align:center}.demoStrip.mode3 span:last-child,.processRibbon span:last-child{animation:refine 2s ease infinite}
.processRibbon{padding:12px}
@keyframes walkMarker{0%,100%{transform:translateX(-7px)}65%{transform:translateX(12px)}}
@keyframes scanRipple{0%{transform:scale(.7);opacity:.35}90%{transform:scale(1.5);opacity:1}}
@keyframes refine{50%{color:#ffcb7f}}
html.still *,html.still *:before,html.still *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
#questToggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:3px 0;border:0;background:none;color:#e4edee;font-size:12px;font-weight:800}
#quests.collapsed #questList,#quests.collapsed #progress{display:none}
#homeRange{font:700 11px Consolas,monospace;text-align:center;color:var(--amber);margin-top:4px}
#quests{top:385px}#warning{top:338px}#notice{pointer-events:none}.panel{border-radius:11px}
@media(max-width:690px){#modals{padding:8px}.dialog{max-height:96dvh}.radioArt{height:clamp(105px,20vh,156px)}.radioBody h2{font-size:26px}.transmission{gap:8px;padding:9px}.cast{gap:2px;flex-direction:column}.cast img{width:38px;height:39px}.cast figure:not(.active){display:none}.cast .active img{width:54px;height:55px}.cast figcaption{font-size:9px}.transcript p{font-size:15px}.channel .callSign,.channel{font-size:10px}
.routeCard{gap:8px}.routeCard img{width:59px;height:64px}.routeCard h3{font-size:16px}.routeCard p{font-size:12px}.routeCard .btn{padding:7px;min-height:41px}.boardStats{gap:12px}.plate b{font-size:20px}.radioMeta{gap:4px}.radioBottom{gap:3px}.radioBottom .btn{padding:8px}.radioBottom>div{gap:0}.welcomeCopy p{font-size:16px}.welcomeCopy .callSign{font-size:10px}#quests{top:300px}#warning{top:255px}.demoStrip.mode3 span{font-size:12px}.demoStrip{gap:15px}.processRibbon{gap:6px}}
@media(max-height:620px) and (min-width:691px){.radioArt{height:90px}.radioBody{padding-block:10px}.radioBody h2{font-size:26px;margin:5px 0}.welcomeArt{height:160px}.welcomeCopy{padding:16px 24px}.welcomeCopy h2{font-size:58px}#quests{display:block;top:94px;left:50%;transform:translateX(-50%);width:190px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none;transition:none}}
.storyShow{color:#f7efdd;background:#142031}
.radioDialog{width:min(970px,100%);padding:0;max-height:94dvh;overflow:auto}
.storyHead,.storyFoot,.storyFoot>div,.storyControls{display:flex;align-items:center;gap:10px}
.storyHead{justify-content:space-between;padding:14px clamp(14px,3vw,28px);background:#111c2c}
.storyHead h2{font-size:clamp(20px,2.6vw,29px);margin:3px 0 0}
.storyHead .callSign,.storyHead #lineCount{font:700 11px/1.35 Consolas,monospace;letter-spacing:.08em}
.storyHead #lineCount{color:#e9ceb0;margin-right:24px}
.storyStage{position:relative;overflow:hidden;border-block:1px solid #647287;background:#192747}
#storyScreen{width:100%;height:auto;display:block}
.storyCaption #onAir{color:#ffd293;font:800 14px "Trebuchet MS",sans-serif}
.storyBody{padding:14px clamp(14px,3vw,28px) 12px}
.storyCaption{border-left:3px solid var(--amber);padding:2px 12px 3px}
.storyCaption>span{font-size:12px;font-weight:700;color:#dfc598}
.storyCaption p{margin:2px 0 0;color:#fff4db;font-weight:700;font-size:clamp(18px,2.5vw,28px);line-height:1.3;min-height:1.3em}
.storyControls{margin:12px 0;flex-wrap:wrap;gap:7px}
.storyControls .btn,.storyFoot .btn{min-height:40px;padding:8px 13px}
.storyControls #playRadio{min-width:110px}
.storyFoot{justify-content:space-between;border-top:1px solid #465568;padding-top:8px;flex-wrap:wrap}.storyFoot a{color:#b1dedf;font-size:12px}.storyFoot .linkBtn{color:#f6c47d;margin:0!important}
#radioStatus:empty{display:none}
@media(max-width:690px){.radioDialog{max-height:96dvh}.storyHead{padding-block:10px}.storyHead #lineCount{margin-right:5px;font-size:10px}.storyScreen{aspect-ratio:1.23}.storyStage{grid-template-columns:minmax(0,40fr) minmax(0,60fr)}.stagePet{height:91%;width:100%;bottom:5%}.petStage strong{font-size:10px;bottom:3px;padding:2px 6px}.storyBody{padding-block:10px}.storyControls{gap:4px}.storyControls .linkBtn{padding:6px 4px;font-size:12px}.storyControls #playRadio{min-width:83px}.storyControls .btn{padding:7px 10px}.storyFoot{gap:4px}.storyFoot>div{gap:5px}.storyFoot .btn{font-size:13px}.storyFoot a{font-size:10px}.storyCaption p{min-height:2.6em}.storyCaption>span{font-size:11px}#actionName{font-size:10px;max-width:96%;white-space:normal;text-align:center}}
@media(max-height:560px) and (min-width:691px){.storyScreen{aspect-ratio:2.9}.storyHead,.storyBody{padding-block:7px}.storyControls{margin:6px 0}.stagePet{max-height:170px}}
@media(prefers-reduced-motion:reduce){.screenLayer{transition:none}.storyStage .stagePet,.storyStage .screenLayer img{animation:none!important}}


@media(min-width:691px) and (max-height:850px){.radioDialog{width:min(960px,calc((100dvh - 275px)*2.04),100%);min-width:min(560px,100%)}}
@media(max-width:690px){.radioDialog{width:100%}.storyStage{display:block}.storyCaption #onAir{font-size:13px}}
@media(max-width:690px){#storyScreen{display:block;width:147%;max-width:none;transform:translateX(var(--camera-pan,0%))}}