@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{color-scheme:dark;--bg:#0d1118;--panel:#171c26;--line:#333b49;--muted:#a5aebb;--text:#f1f3ed;--accent:#d7f23a;--pink:#e993b3}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 'IBM Plex Sans',sans-serif}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button,input,a{ -webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}.game-shell{max-width:1200px;margin:auto;padding:0 36px}header{height:100px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line)}.title{font:800 30px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;text-decoration:none;color:var(--text)}.account{display:flex;gap:25px;align-items:center;color:var(--muted);font-size:14px}.account b{color:var(--text);font-family:'IBM Plex Mono',monospace;font-weight:400;margin-left:8px}#sound{border:0;background:none;color:var(--muted);font-size:14px;padding:10px 0}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:36px;align-items:start;padding:42px 0 25px}.world{min-width:0}.scene-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:14px;color:#c5ccd6;padding-bottom:14px}.scene-heading>span:last-child{font-size:13px;color:var(--muted)}.screen{position:relative;border:1px solid #414459;aspect-ratio:16/9;overflow:hidden;background:#16152a}canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.scene-shade{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 65px #04081166}.scene-message{position:absolute;left:0;right:0;top:36%;text-align:center;pointer-events:none}.scene-message strong{font:800 48px/1 'Barlow Condensed',Impact,sans-serif;color:var(--text);text-shadow:3px 3px #111526;letter-spacing:1px}.scene-message.win strong{color:var(--accent)}.scene-message.loss strong{color:#ff91ac}.route-strip{display:flex;list-style:none;margin:0;padding:23px 0;gap:12px;counter-reset:stop}.route-strip li{flex:1;min-width:0;border-top:2px solid #333c4e;padding-top:11px;color:#848fa0;font-size:14px}.route-strip li span{display:block;font-size:12px;color:#8591a2;margin-bottom:4px}.route-strip li.chosen{color:var(--text)}.route-strip li.current{border-color:var(--accent)}.route-strip li.clear{border-color:var(--accent);color:var(--accent)}.route-strip li.caught{border-color:#ef789b;color:#ef789b}.controls{min-width:0;padding-top:0}.step-label{font-size:14px;color:var(--muted);margin:0 0 7px}h1{font:700 38px/1.1 'Barlow Condensed',Impact,sans-serif;margin:0 0 15px}h2{font:700 32px 'Barlow Condensed',Impact,sans-serif;margin:0 0 20px}.instruction{font-size:16px;line-height:1.6;color:#b9c2ce;margin:0 0 25px}.roads{display:grid;gap:10px}.road{border:1px solid #3b4351;background:#171d27;color:var(--text);padding:17px 18px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:15px}.road strong{font-size:17px;font-weight:500}.road small{display:block;font-size:14px;color:var(--muted);margin-top:2px}.road>span{font-family:'IBM Plex Mono',monospace;font-size:18px}.road[aria-pressed=true]{background:#262f27;border-color:var(--accent)}.road[aria-pressed=true]>span{color:var(--accent)}.road:hover{border-color:#a0adb6}.hint{font-size:14px;line-height:1.55;color:var(--muted);margin:17px 0 22px}.actions{display:flex;gap:10px}.primary,.secondary{border:0;padding:14px 18px;min-height:50px;text-align:center;font-weight:600}.primary{background:var(--accent);color:#182019;width:100%;font-size:17px}.primary:hover:not(:disabled){background:#e4ff59}.secondary{border:1px solid #4c5665;background:transparent;color:var(--text);font-size:16px}.text-button{border:0;background:none;color:var(--muted);padding:11px 0;font-size:14px;text-decoration:underline;text-underline-offset:4px}.controls>.text-button,.controls div>.text-button{display:block;margin:7px auto}.bet-summary{padding:18px 0 24px;margin-bottom:22px;border-bottom:1px solid var(--line)}.bet-summary div{display:flex;flex-direction:column;gap:7px}.bet-summary span{font-size:15px;color:#b8c2cf}.bet-summary strong{font:500 29px 'IBM Plex Mono',monospace}label{display:flex;justify-content:space-between;font-size:16px;margin-bottom:9px}label span{font-size:14px;color:var(--muted)}input{border:1px solid #536073;background:#111720;color:var(--text);width:100%;padding:12px 15px;font:400 24px 'IBM Plex Mono',monospace;border-radius:0}.payout{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:23px 0;font-size:15px}.payout strong{color:var(--accent);font:500 23px 'IBM Plex Mono',monospace}.payout small{font-size:13px;color:var(--muted)}#error{color:#ff99b8;font-size:14px;line-height:1.4;margin:10px 0}#error:empty{display:none}.checkpoints{border-top:1px solid var(--line);margin:20px 0}.checkpoint-row{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:15px 0;font-size:15px}.checkpoint-row span:last-child{color:var(--muted);font-size:14px}.checkpoint-row.clear span:last-child{color:var(--accent)}.checkpoint-row.caught span:last-child{color:#ff99b8}.checkpoint-row.current span:last-child{color:#f1f3ed}.result-money{padding:22px 0 28px;margin:10px 0 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:7px}.result-money span{color:var(--muted);font-size:15px}.result-money strong{font:500 32px 'IBM Plex Mono',monospace}.result-money small{font-size:15px;color:var(--muted)}#outcome.win .result-money strong{color:var(--accent)}#outcome.loss .result-money strong{color:#ff99b8}footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:15px 0;color:#909cac;font-size:14px}dialog{max-height:90dvh;overflow-y:auto;width:min(560px,calc(100% - 32px));padding:30px;border:1px solid #536073;background:#171d27;color:var(--text)}dialog::backdrop{background:#050911dd}dialog p{font-size:16px;line-height:1.7;color:#c1cad5}.close{position:absolute;right:15px;top:10px;border:0;background:transparent;color:var(--muted);font-size:30px;width:40px;height:40px}details{border-top:1px solid var(--line);padding:16px 0}summary{cursor:pointer;font-weight:500}details p{font-size:14px;overflow-wrap:anywhere}#refill{width:100%;margin-top:12px}.log-row{font-size:14px;padding:12px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px}.log-row small{color:var(--muted);display:block;font-size:13px}
@media(max-width:900px){.game-shell{padding:0 24px}.game-layout{grid-template-columns:minmax(0,1fr) 300px;gap:24px}.route-strip{gap:8px}.route-strip li{font-size:12px}.scene-message strong{font-size:36px}}@media(max-width:720px){.game-shell{padding:0 18px}header{height:78px}.title{font-size:25px}.account{gap:12px;font-size:12px}.account>span{display:flex;flex-direction:column;gap:2px}.account b{margin:0;font-size:13px}#sound{font-size:12px}.game-layout{grid-template-columns:1fr;padding-top:23px;gap:13px}.scene-heading{font-size:13px;padding-bottom:10px}.screen{max-height:250px}.route-strip{padding:16px 0 14px}.route-strip li{font-size:14px}.route-strip li span{font-size:12px}.controls{padding:5px 0 12px}h1{font-size:34px;margin-bottom:10px}.instruction{margin-bottom:18px}.road{padding:14px 16px}.hint{margin:13px 0 19px}.scene-message strong{font-size:40px}.bet-summary{margin:0 0 18px;padding:10px 0 18px}.bet-summary div{flex-direction:row;align-items:center;justify-content:space-between;gap:20px}.bet-summary span{max-width:180px}.bet-summary strong{font-size:26px}footer{font-size:12px}.payout{margin:20px 0}.scene-shade{box-shadow:inset 0 0 40px #04081155}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Art pass: the city owns the frame; controls remain quiet. */
body{background:radial-gradient(ellipse at 25% 10%,#192036 0,transparent 60%),#0b1019}
.game-shell{max-width:1440px}.game-layout{grid-template-columns:minmax(0,1fr) 330px;gap:40px;padding-top:32px}
.title{font-style:italic;letter-spacing:2px;font-size:34px;color:#e4edc3;text-shadow:2px 2px #713b65}
.screen{border:1px solid #546074;box-shadow:0 18px 55px #02061188,0 0 0 5px #141c2a;aspect-ratio:16/9}
.scene-shade{box-shadow:inset 0 0 40px #04081133}
.road{padding:9px;gap:12px;min-height:78px;background:#141c29}.road>div{flex:1}.road>span{padding-right:6px;font-size:17px}
.road-art{display:block;flex:0 0 54px;height:58px;background-size:116px 174px;background-position:18% 62%;image-rendering:pixelated;border:1px solid #526075;filter:saturate(.8)}
.road-art-0{background-image:url('./assets/backstreets.webp')}.road-art-1{background-image:url('./assets/downtown.webp')}.road-art-2{background-image:url('./assets/expressway.webp')}
.road[aria-pressed=true]{background:#252f2a}.road[aria-pressed=true] .road-art{border-color:var(--accent);filter:none}
.scene-message{top:20%;}.scene-message strong{font-style:italic;letter-spacing:3px;font-size:55px;text-shadow:3px 3px #050a17,-1px -1px #050a17}
@media(max-width:1000px){.game-layout{gap:24px;grid-template-columns:minmax(0,1fr) 300px}.game-shell{padding:0 24px}}
@media(max-width:720px){.game-shell{padding:0 18px}.game-layout{grid-template-columns:1fr;gap:10px;padding-top:22px}.screen{max-height:280px;aspect-ratio:16/9}.title{font-size:25px}.road{min-height:69px;padding:7px 10px}.road-art{height:50px;flex-basis:50px}.scene-message strong{font-size:40px}}

.payout strong,.result-money strong,.account b{overflow-wrap:anywhere;min-width:0}.payout strong{max-width:65%;font-size:19px}.game-shell{padding-bottom:48px}
