@font-face{font-family:Express;src:url(./assets/studio-pixel.ttf) format("truetype");font-display:swap}
:root{color-scheme:dark;--bg:#201c32;--panel:#30253f;--dark:#241d34;--line:#916b60;--paper:#fbeac1;--dim:#e2c3ac;--gold:#f3bd78;--mint:#a9ead4;--pink:#f2a9cc;--pixel:Express,monospace;--body:system-ui,sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}html{background:var(--bg)}body{margin:0;min-height:100svh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(ellipse at 52% 0%,#54314a,var(--bg) 72%);color:var(--paper);font:15px/1.38 var(--body)}h1,h2,h3,p{margin:0}button,input{font:inherit}
button{min-width:44px;min-height:44px;border:1px solid #896660;border-radius:0;background:#473248;color:var(--paper);padding:5px 6px;font:10px/1.18 var(--pixel);text-transform:uppercase;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:#ffd38a55}button.primary{background:#edb676;color:#322138;border-color:#f5d194;box-shadow:inset 0 -3px #ad6c56}button.secondary{background:#305453;border-color:#70978a;box-shadow:inset 0 -3px #254047}button:disabled{opacity:.48;cursor:default;box-shadow:none}button:active:not(:disabled){filter:brightness(1.23)}button:focus-visible,input:focus-visible{outline:2px solid #fff0a8;outline-offset:-3px}button[aria-pressed=true]{background:#594254;border-color:#f0c08a}.flipper{touch-action:none}
.mast{display:flex;max-width:1120px;margin:auto;justify-content:space-between;align-items:center;gap:7px;padding:8px 12px;color:var(--dim);font:9px/1.3 var(--pixel);letter-spacing:.05em}.mast span:last-child{text-align:right}.mast i{display:inline-block;width:8px;height:7px;background:var(--gold);box-shadow:2px 2px #b26875;margin-right:3px}
main{width:min(100%,1120px);margin:auto;padding:0 8px}.cabinet{position:relative;isolation:isolate;background:var(--panel);border:2px solid #d09e73;box-shadow:0 3px #644457,0 16px 39px #151328b5}
.menu{display:grid;padding:5px}.cover,.car-art,.screen{overflow:hidden;background:#201f37;border:1px solid #936b61}
canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.cover canvas{aspect-ratio:3/2;object-fit:cover}
.intro{padding:9px 5px 4px}.intro h1{font:clamp(24px,7.8vw,50px)/1.05 var(--pixel);letter-spacing:.015em;text-shadow:2px 3px #65354d}.intro em{font-style:normal;color:var(--gold)}.tagline{font-size:clamp(15px,4.4vw,24px);margin:4px 0 8px;color:#f5d5a9;font-weight:600}.blurb{display:none;color:var(--dim)}
.starts,.tools,.cabinet-buttons{display:grid;gap:4px}.starts{grid-template-columns:repeat(2,minmax(44px,1fr))}.menu-tools{grid-template-columns:repeat(5,minmax(44px,1fr));margin-top:4px}.menu-tools button{padding-inline:2px}.save-note{margin-top:5px;color:var(--mint);font:9px/1.25 var(--pixel);text-transform:uppercase}
.footer{display:flex;justify-content:space-between;gap:8px;margin-top:12px;padding:9px 1px 16px;border-top:1px solid #8c695f;color:var(--dim);font-size:12px}.footer span:last-child{font:9px/1.3 var(--pixel);text-align:right}
.train{display:grid;gap:5px;padding:5px}.train-left,.train-right{min-width:0}.head{display:flex;min-height:40px;justify-content:space-between;align-items:center;gap:5px;padding:4px 6px;background:#443049;border:1px solid #8f6b5e;border-bottom:0}
.head h2{font:13px/1.15 var(--pixel);text-transform:uppercase}.head p{margin-top:3px;color:var(--dim);font:8px/1.2 var(--pixel);text-transform:uppercase}.ticket-count{color:var(--gold);font:8px/1.25 var(--pixel);white-space:nowrap}.ticket-count strong{font:14px/1 var(--pixel)}
.car-art canvas{aspect-ratio:3.3/1;object-fit:cover;object-position:center 47%}.screen canvas{aspect-ratio:224/176;object-fit:contain}
.mileage{display:flex;justify-content:space-between;gap:4px;min-height:21px;padding:4px 5px;background:#3a2c47;color:var(--mint);font:9px/1.15 var(--pixel);text-transform:uppercase;border:1px solid #775867;border-top:0}
.lounge{display:grid;gap:4px;margin-bottom:4px}.machine-option{display:grid;grid-template-columns:45px minmax(0,1fr);gap:6px;align-items:center;text-align:left;min-height:48px;padding:3px 5px;background:#3a304c}
.atlas{display:block;width:44px;height:39px;border:1px solid #a47c67;background:url(./assets/car.png) no-repeat;background-size:200% 200%;image-rendering:pixelated}.atlas.a1{background-position:100% 0}.atlas.a2{background-position:0 100%}.atlas.a3{background-position:100% 100%}
.machine-option small{display:block;font:12px/1.18 var(--body);color:var(--dim);text-transform:none;margin-top:3px}.train-tools{grid-template-columns:repeat(4,minmax(44px,1fr));gap:3px}.train-tools button,.cabinet-buttons button{padding-inline:3px;font-size:9px}
.play{margin-bottom:4px}.scoreboard{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:4px 6px;background:#47334e;border:1px solid #896366}.scoreboard h3{font:12px/1.15 var(--pixel);text-transform:uppercase}.scoreboard strong{font:14px/1.1 var(--pixel);color:var(--gold)}
.readout{padding:4px 3px 3px;color:var(--mint);font:10px/1.25 var(--pixel);min-height:20px;text-transform:uppercase}.feedback{font-size:12px;color:var(--dim);padding:3px 3px 0;min-height:17px;line-height:1.19}.cabinet-buttons{grid-template-columns:repeat(2,minmax(44px,1fr));gap:3px}.cabinet-buttons.pin{grid-template-columns:repeat(3,minmax(44px,1fr))}
.shade{position:fixed;inset:0;z-index:6;display:grid;place-items:center;background:#161326bd;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.dialog{width:min(100%,540px);max-height:min(100%,calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom))));overflow:auto;overscroll-behavior:contain;background:#3a2c48;border:2px solid #ca9b73;box-shadow:4px 4px 0 #231a36,0 20px 52px #161326;scrollbar-color:#a77d67 #332740}
.dialog-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:7px;min-height:51px;padding:3px 6px 3px 11px;background:#584056;border-bottom:1px solid #b48870}.dialog-head h2{font:14px/1.17 var(--pixel);text-transform:uppercase}
.dialog-body{padding:10px;display:grid;gap:7px}.dialog-body p{line-height:1.31}.fine{font-size:13px;color:var(--dim)}
.note,.prize{padding:6px 8px;background:#2d263f;border:1px solid #84645f;line-height:1.28}.note b,.prize b{display:block;color:var(--gold);font:10px/1.3 var(--pixel);text-transform:uppercase;margin-bottom:3px}.prize{display:grid;grid-template-columns:35px minmax(0,1fr) auto;gap:6px;align-items:center}.prize button{min-width:62px}.prize canvas{width:32px;height:32px}.prize small{font-size:12px;color:var(--dim)}
.dialog-actions{display:flex;flex-wrap:wrap;gap:4px}.dialog-actions button{flex:1 1 88px}.result-title{font:21px/1.13 var(--pixel);text-transform:uppercase;color:var(--gold)}
.volume{display:grid;grid-template-columns:1fr auto;font:10px/1.4 var(--pixel);text-transform:uppercase;gap:3px}.volume input{grid-column:1/-1;width:100%;min-height:44px;margin:0;accent-color:var(--gold);touch-action:pan-y}
#save-warning{padding:5px 8px;color:#ffd3ad;font-size:13px}.expanded-body{overflow:hidden}.cabinet.expanded,.cabinet:fullscreen{position:fixed;inset:0;width:100%;height:100dvh;z-index:10;border:0;box-shadow:none;background:#30253e;overflow:auto;overscroll-behavior:contain;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.cabinet.expanded #content,.cabinet:fullscreen #content{width:min(100%,1080px);margin-inline:auto}.cabinet:fullscreen::backdrop{background:#30253e}
@media (orientation:portrait) and (max-height:600px){.mast{padding:5px 8px}.cover canvas{height:min(36dvh,214px)}.intro{padding-top:7px}.tagline{margin:4px 0 6px}.screen canvas{max-height:calc(100dvh - 235px)}}
@media (orientation:landscape),(min-width:690px){.menu{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center}.intro{padding:11px}.intro h1{font-size:clamp(22px,4.3vw,50px)}.tagline{font-size:clamp(16px,2.35vw,25px)}
.train{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:7px}.train-right{align-self:center}.head h2{font-size:clamp(13px,2.1vw,22px)}.car-art canvas{aspect-ratio:3/2}}
@media (orientation:landscape) and (max-height:420px){main{padding-inline:5px}.mast{padding:4px 7px}.intro{padding:3px 6px}.tagline{margin:3px 0 6px}.cover canvas{height:clamp(123px,calc(100dvh - 45px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),320px)}.screen canvas,.car-art canvas{max-height:calc(100dvh - 97px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.footer{display:none}.dialog-body{padding:8px;gap:6px}}
@media (orientation:landscape) and (max-width:620px){.menu,.train{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.menu-tools button,.train-tools button,.cabinet-buttons button{font-size:8px}.menu-tools{gap:3px}}
@media (min-width:850px) and (min-height:500px){.mast{padding-block:18px 11px}.menu,.train{padding:8px}.intro{padding:18px}.tagline{margin:8px 0 10px}.blurb{display:block;margin-bottom:16px;max-width:36ch}.train-right{padding:10px}.head{padding:6px 9px}.tools button,.starts button,.cabinet-buttons button{min-height:48px;font-size:11px}.feedback{font-size:15px}.machine-option{min-height:58px}}
@media (max-width:355px){.mast{font-size:8px}.menu-tools button,.train-tools button,.cabinet-buttons button{font-size:8px}.footer{font-size:11px}}

.mile-track{display:flex;align-items:center;gap:2px;min-width:0}.mile-track i{width:9px;height:6px;display:block;background:#645266;border:1px solid #9b7573}.mile-track i.paid{background:#edba76;border-color:#fbd296}.points{display:flex;align-items:baseline;gap:7px;white-space:nowrap}.points small{color:var(--mint);font:8px/1.2 var(--pixel)}
