@font-face{font-family:CabPixel;src:url(./assets/studio-pixel.ttf) format("truetype");font-display:swap}
:root{color-scheme:dark;--ink:#151328;--screen:#1b1836;--edge:#524565;--light:#fff0d5;--muted:#c6bad5;--gold:#ffd05d;--pink:#ff8fba;--mint:#76f1d7;--pad:clamp(8px,2.9vw,20px);--pixel:CabPixel,"Courier New",monospace;--mono:"Courier New",monospace;--body:system-ui,sans-serif}
*{box-sizing:border-box}
html{min-width:280px;background:#141127}
body{margin:0;color:var(--light);font:500 14px/1.38 var(--body);background:radial-gradient(ellipse at 25% 0,#342442 0%,transparent 48%),#141127}
img{display:block;image-rendering:pixelated}
button{appearance:none;min-height:44px;min-width:44px;touch-action:manipulation;cursor:pointer;color:var(--light);background:#2e2748;border:1px solid #625172;border-radius:0;font:700 .88rem/1.15 var(--body);padding:6px 11px}
button:active{filter:brightness(1.22)}
button:disabled{cursor:default;color:#b5a9c8;background:#25203b}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--mint);outline-offset:1px;position:relative;z-index:1}
a{color:inherit;text-decoration:none}
svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter}
h1,h2,h3,p,dl,dd,figure{margin:0}
h1,h2{font-family:var(--pixel);line-height:1.12;font-weight:400}
h2{font-size:clamp(1.23rem,5vw,1.65rem);color:var(--light)}
h3{font-size:1rem;line-height:1.16}
small{color:var(--muted)}
.label,.mast,.chrome,.game-tag,.taxi-pill{font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.075em}
.label{font-size:.74rem;color:var(--mint)}
.mast,main,footer{width:min(100%,1020px);margin-inline:auto;padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
.mast{display:flex;align-items:center;min-height:calc(45px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);gap:12px;justify-content:space-between;color:var(--gold);font-size:.74rem}
.wordmark{min-height:44px;display:flex;gap:8px;align-items:center;font-weight:800;font-size:.82rem}
.checkers{display:inline-block;width:25px;height:16px;background:conic-gradient(var(--gold) 25%,transparent 0 50%,var(--gold) 0 75%,transparent 0) 0 0/12px 12px;border-left:2px solid var(--gold)}
.mast-tag{display:none;color:var(--muted);font-family:var(--body);text-transform:none;letter-spacing:0}
.mast-lamp{display:flex;align-items:center;gap:5px;white-space:nowrap}
.mast-lamp i,.meter-light,.taxi-pill i{width:7px;height:7px;display:inline-block;background:var(--mint);box-shadow:0 0 11px #77ffd9b0;flex:none}
#cabinet{--cab-h:calc(100dvh - 53px - env(safe-area-inset-top) - env(safe-area-inset-bottom));position:relative;isolation:isolate;display:grid;grid-template-rows:44px minmax(0,1fr) 46px;min-width:0;width:100%;height:min(var(--cab-h),730px);min-height:290px;border:2px solid #766084;background:#26213e;box-shadow:0 6px 0 #100d20,0 18px 42px #0d0b1eae}
#cabinet[data-page=title]{height:auto;min-height:0}
.chrome{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #625471;background:linear-gradient(90deg,#302541,#211e39);font-size:.74rem;padding-left:10px}
.chrome-label{display:flex;align-items:center;gap:8px}
#expand{display:grid;place-items:center;height:44px;background:#2d2445;border:0;border-left:1px solid #625172}
.screen{position:relative;overflow:auto;overscroll-behavior:contain;scrollbar-color:#6b587e #1b1836;background:var(--screen);min-height:0;min-width:0}
.screen:focus{outline:none}
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#241c3a}
.tools button{min-width:0;background:#28223d;border:0;border-top:1px solid #6a587b;border-right:1px solid #4e3e63;padding-inline:3px}
.tools button:last-child{border-right:0}
.tools button[aria-pressed=false]{color:#c8b6d0}
.tools button:disabled{color:#9f93af}
.cab-art{position:relative;isolation:isolate;overflow:hidden;height:clamp(185px,68vw,min(450px,52dvh));background:#302844}
.cab-art img,.cab-art canvas,.title-shade{position:absolute;inset:0;width:100%;height:100%}
.cab-art img{object-fit:cover;object-position:53% 51%}
.cab-art canvas{image-rendering:pixelated}
.title-shade{background:linear-gradient(90deg,#130f28f7,#1b152bc9 25%,#18122723 70%),linear-gradient(0deg,#181328b0,transparent 29%);z-index:1}
.title-copy{position:absolute;z-index:2;bottom:clamp(11px,4vw,27px);left:clamp(12px,4.2vw,34px)}
.taxi-pill{display:inline-flex;align-items:center;gap:7px;background:#22172d;color:var(--gold);border:1px solid #ffd05d87;padding:4px 6px;font-size:.65rem;line-height:1}
.taxi-pill i{width:5px;height:5px;background:var(--gold);box-shadow:none}
h1{margin:10px 0 6px;color:#fff0d0;font-size:clamp(2.18rem,9.1vw,5.65rem);letter-spacing:-.035em;text-shadow:3px 4px 0 #181126}
h1 span{color:var(--gold)}
.title-copy p{color:#fff1dc;font-size:clamp(.83rem,2.4vw,1.13rem);font-weight:650}
.ticket-bar{padding:8px;display:grid;gap:6px;background:#27203d;border-top:3px solid #a67645}
.primary-row,.secondary-row,.result-actions{display:flex;gap:6px}
.primary-row button,.secondary-row button,.result-actions button{flex:1}
.secondary-row button span{margin-left:4px;color:var(--gold);font-family:var(--mono)}
.primary{background:var(--gold);color:#20162a;border-color:#ffe090;font-weight:850;box-shadow:inset 0 -3px 0 #ba7e40}
.plain{background:#302747}
.trip-strip{margin:15px 0 10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.trip-strip figure{border:1px solid #4e3e65;background:#211b34}
.trip-strip img{width:100%;height:auto;aspect-ratio:2.1;object-fit:cover}
.trip-strip figcaption{padding:6px 3px;text-align:center;color:#e7d7ec;font-size:.74rem}
footer{display:flex;justify-content:space-between;gap:12px;padding-top:7px;padding-bottom:max(12px,env(safe-area-inset-bottom));color:#c0b3cc;font:700 .73rem/1.35 var(--mono)}
.page{padding:clamp(9px,3vw,22px);display:grid;gap:10px;max-width:880px;margin:0 auto;align-content:start}
.page-head{display:grid;gap:4px}
.page-head p:last-child,.route-card p:not(.label),.mode-card p,.district-head p:last-child{color:#eaddec}
.mode-list,.route-choices{display:grid;gap:8px}
.mode-card{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:8px;border:1px solid #655576;background:#282141;padding:6px}
.mode-card img{width:56px;height:58px;object-fit:cover}
.mode-card p{font-size:.79rem;margin-top:4px}
.locked{max-width:86px;color:var(--muted);font:700 .7rem/1.2 var(--mono)}
.back{justify-self:start}
.district-head,.result-art{display:grid;align-content:center;gap:4px;min-height:76px;padding:9px 11px;background:linear-gradient(90deg,#221933f5 7%,#221933a6 61%,#22193341),var(--district-art) center 54%/cover;border-left:4px solid var(--district,var(--gold));image-rendering:pixelated}
.district-head .label,.result-art .label{color:var(--district,var(--gold))}
.route-card{display:grid;gap:5px;padding:8px;background:#2a2344;border:1px solid #61537a;border-left:3px solid var(--district)}
.route-card.detour{border-left-color:var(--pink)}
.route-card.detour .label{color:var(--pink)}
.route-card p:not(.label){font-size:.8rem}
.route-button{display:flex;justify-content:space-between;align-items:center;gap:6px;text-align:left;border-color:#81707e;background:#372d4c}
.route-button span{color:var(--gold);font-family:var(--mono)}
.game-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.game-head h2{margin-top:3px}
.game-tag{color:var(--gold);font-size:.65rem;white-space:nowrap;border:1px solid #6b5776;padding:4px 5px}
.traffic-layout,.signal-layout,.trivia-layout{display:grid;gap:8px;align-items:start}
.traffic-map{text-align:center}
#map,#signals{display:block;width:min(100%,290px);height:auto;margin:0 auto;border:1px solid #655575;image-rendering:pixelated;background:#141829}
#map{width:min(100%,244px)}
.board-legend{display:flex;justify-content:center;gap:13px;font:700 .73rem/1.45 var(--mono);margin-top:4px;color:var(--muted)}
.board-legend span{display:flex;align-items:center;gap:4px}
.board-legend b{display:block;width:9px;height:9px}
.legend-parcel{background:#ffb272}.legend-exit{background:#76f1d7}.legend-gate{background:#ff648d}
.traffic-controls{display:grid;gap:5px;justify-items:center;text-align:center}
.game-status{color:var(--mint);font:700 .77rem/1.1 var(--mono)}
.dpad{display:grid;grid-template-areas:". up ." "left wait right" ". down .";grid-template-columns:repeat(3,48px);gap:3px}
.dpad button{display:grid;place-items:center;padding:0;min-height:44px;touch-action:none}
.dpad .up{grid-area:up}.dpad .left{grid-area:left}.dpad .right{grid-area:right}.dpad .down{grid-area:down}.dpad .wait{grid-area:wait;color:var(--gold)}
.game-feedback{min-height:18px;color:#f6dfb3;font-size:.81rem}
.signal-chart{position:relative;width:min(100%,290px);margin:auto}
.signal-meter{position:absolute;right:3px;top:3px;color:var(--gold);font:700 .73rem var(--mono);background:#17132a;padding:2px 4px}
.signal-console{display:grid;gap:6px;text-align:center}
.signal-cue{min-height:24px;color:var(--gold);font:800 .88rem/1.4 var(--mono);text-transform:uppercase}
.pads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pad{--padcolor:var(--gold);display:grid;justify-items:center;align-content:center;min-height:55px;gap:2px;color:var(--padcolor);border-color:var(--padcolor);box-shadow:inset 0 -3px 0 #131126;padding:5px 0;touch-action:none}
.pad i{font:normal 12px/1 var(--body)}
.pad-1{--padcolor:var(--mint)}.pad-2{--padcolor:var(--pink)}
.pad.cue{background:var(--padcolor);color:#181328}
.trivia-art img{width:100%;height:clamp(40px,16vw,92px);object-fit:cover;object-position:center 52%;border-left:3px solid var(--pink)}
.guide-sheet,.quiz-sheet{display:grid;gap:7px}
.guide-sheet ul{margin:0;padding-left:20px;color:#f1e0b9}
.guide-sheet li+li{margin-top:4px}
.question{font-size:1rem;font-weight:800}
.answer-list{display:grid;gap:4px}
.answer{text-align:left}
.answer.correct{border-color:var(--mint);color:var(--mint)}
.answer.wrong{border-color:var(--pink);color:var(--pink)}
.quiz-feedback{color:#f4e6c8;font-size:.8rem}
.quiz-feedback strong{color:var(--gold)}
.result-art{min-height:113px}
.medal{color:var(--gold);font-size:clamp(1.7rem,8vw,2.5rem)}
.medal.clear{color:var(--mint)}.medal.miss{color:var(--pink)}
.result-body{display:grid;gap:7px}
.result-body strong,.receipt-top strong{color:var(--gold)}
.receipt-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.receipt-top p{font-size:.8rem;margin-top:3px}
.receipt-top>strong{font:400 clamp(1.35rem,6vw,2.2rem)/1 var(--pixel);white-space:nowrap}
.receipt-lines{background:#2b2343;border:1px solid #655575;padding:3px 8px}
.receipt-lines>div{display:flex;justify-content:space-between;gap:4px;padding:6px 0;border-bottom:1px solid #5a4b70;font-size:.83rem}
.receipt-lines>div:last-child{border-bottom:0}
.receipt-lines dt span{color:var(--muted);font-size:.72rem;margin-left:3px}
.receipt-lines dd{white-space:nowrap;color:var(--mint);font:700 .8rem var(--mono)}
.unlock{padding:6px 9px;background:#173837;color:#b4ffee;border-left:3px solid var(--mint);font-weight:750;font-size:.82rem}
.collection-grid,.practice-list{padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.collection-grid li{list-style:none;background:#2e2748;border:1px solid #5d4f6d;overflow:hidden}
.collection-grid li.earned{border-color:var(--district)}
.collection-grid li div{padding:6px}
.collection-grid li img{width:100%;height:38px;object-fit:cover;filter:saturate(.15) brightness(.48)}
.collection-grid li.earned img{filter:none}
.collection-grid small{display:block}
.practice-list{grid-template-columns:1fr}
.practice-list section{padding:7px;background:#211d3a;border:1px solid #59496e}
.practice-list h3{color:var(--gold);margin-bottom:5px}
.practice-list section div{display:flex;flex-wrap:wrap;gap:5px}
dialog{position:fixed;inset:0;width:min(90%,430px);max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)));padding:0;color:var(--light);background:#251e39;border:2px solid #8a719d;overscroll-behavior:contain}
dialog::backdrop{background:#0f0b22bc}
#dialog-body{padding:12px;display:grid;gap:9px}
.dialog-actions{display:flex;gap:6px}.dialog-actions button{flex:1}
.dialog-help{display:grid;gap:7px;color:#f5e4dc}
.volume-row{min-height:44px;display:flex;align-items:center;gap:8px}
.volume-row input{width:100%;height:44px;accent-color:var(--gold)}
body.expanded{overflow:hidden}
#cabinet.expanded,#cabinet:fullscreen{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;min-height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);border:0;z-index:5}
#cabinet.expanded .title-wrap,#cabinet:fullscreen .title-wrap{width:min(100%,950px);height:100%;margin:auto;display:grid;grid-template-rows:minmax(0,1fr) auto}
#cabinet.expanded .cab-art,#cabinet:fullscreen .cab-art{height:100%}
@media(min-width:490px){.mast-tag{display:inline}.ticket-bar{grid-template-columns:1.25fr 1fr}.trip-strip{gap:10px}.trip-strip figcaption{font-size:.85rem}.collection-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:590px),(orientation:landscape) and (min-width:470px){
 .route-choices{grid-template-columns:1fr 1fr}
 .traffic-layout,.signal-layout,.trivia-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
 .trivia-art img{height:auto;max-height:230px;aspect-ratio:1.55}
 .practice-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(orientation:landscape) and (max-height:500px){
 :root{--pad:8px}
 .mast{min-height:calc(44px + env(safe-area-inset-top))}
 #cabinet{--cab-h:calc(100dvh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:0}
 #cabinet[data-page=title]{height:var(--cab-h)}
 .title-wrap{height:100%;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
 .cab-art{height:100%}
 #cabinet.expanded .title-wrap,#cabinet:fullscreen .title-wrap{grid-template-rows:minmax(0,1fr)}
 .title-copy{bottom:8px;left:10px}
 h1{font-size:clamp(1.4rem,7dvh,2.55rem);margin:5px 0}
 .title-copy p{font-size:.78rem}
 .ticket-bar{grid-template-columns:1fr;align-content:center;border-top:0;border-left:3px solid #a67645;padding:4px;gap:3px}
 .ticket-bar button{font-size:.75rem;padding-inline:5px}
 .page{padding:5px 8px;gap:5px}
 .district-head{min-height:52px;padding-block:4px}
 h2{font-size:1.12rem}
 .game-head h2{margin-top:0}
 .traffic-page .game-head{position:absolute;top:5px;left:8px;pointer-events:none;z-index:1}
 .traffic-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .traffic-map{padding-top:24px}
 .traffic-map #map{max-height:clamp(64px,calc(100dvh - 189px),160px);width:auto;max-width:100%}
 .traffic-controls{gap:2px}
 .dpad{grid-template-columns:repeat(3,46px);gap:2px}
 .game-feedback{font-size:.73rem;min-height:14px}
 .signal-chart{width:min(100%,225px)}
 .trivia-art img{max-height:115px}
 .result-art{min-height:65px}
 .receipt-lines>div{padding:3px 0}
}
@media(max-width:350px) and (orientation:portrait){
 .traffic-layout,.signal-layout{gap:5px}
 #map{width:min(100%,204px)}
 .dpad{grid-template-areas:"left up down right wait";grid-template-columns:repeat(5,44px)}
 .traffic-controls{gap:4px}
 .pad{min-height:48px}
}

@media(min-height:670px) and (orientation:portrait){
 .result-art{min-height:clamp(145px,28dvh,245px);align-content:end}
 .district-head{min-height:109px}
 .receipt-page{gap:15px}
 .receipt-lines>div{padding:10px 0}
}
@media(orientation:landscape) and (max-height:390px) and (min-width:470px){
 .traffic-layout{grid-template-columns:minmax(0,44fr) minmax(0,56fr)}
 .traffic-map{padding-top:39px}
 .traffic-map #map{max-height:clamp(54px,calc(100dvh - 226px),142px)}
 .dpad{grid-template-areas:"left up down right wait";grid-template-columns:repeat(5,44px)}
 .traffic-controls{gap:8px}
 .trivia-layout{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start}
 .answer-list{grid-template-columns:repeat(3,minmax(0,1fr))}
 .answer-list button{padding-inline:5px;font-size:.78rem}
}
.storage-warning{margin:8px;color:var(--gold);padding:8px;border:1px solid var(--gold)}
.dialog-help{max-height:calc(100dvh - 145px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;padding-right:4px}
#cabinet.expanded[data-page=title],#cabinet:fullscreen[data-page=title]{height:100dvh}
@media(orientation:landscape) and (max-height:390px) and (min-width:470px){
 .signal-chart{width:min(100%,clamp(132px,calc((100dvh - 195px)*1.6),225px))}
}