/* Full-window play surface. Geometry reserves the measured HUD and control areas. */
html,body{overflow:hidden}body{background:#314c47}main{max-width:none;width:100%;height:100dvh;padding:0;gap:0}
.game{position:static;display:block;flex:none;width:100%;height:100dvh;border:0;border-radius:0;background:transparent;box-shadow:3px 3px 0 #102b28;overflow:visible}
.stage{position:fixed;inset:0;z-index:0;min-height:0}.stage canvas{inset:0;width:100%;height:100%}
header{position:fixed;z-index:4;top:8px;left:16px;right:16px;min-height:0;height:54px;margin:0;gap:12px;flex-wrap:nowrap;pointer-events:none}header>*{pointer-events:auto}
.brand{width:96px;height:60px;filter:drop-shadow(0 3px 2px #18352b99)}.brand img{width:96px;top:-2px}
header nav{width:auto;order:0;margin-right:auto;background:#193d35f5;border:2px solid #819074;border-radius:0;padding:3px;box-shadow:3px 3px 0 #102b28}
header nav button,html[data-theme=dark] header nav button{color:#e1e5c9;font-size:12px;padding:10px 14px}
header nav button[aria-pressed=true],html[data-theme=dark] header nav button[aria-pressed=true]{background:#e1ad61;color:#243e32;box-shadow:3px 3px 0 #102b28}
.settings{gap:6px}.settings button,html[data-theme=dark] .settings button{background:#193d35f5;color:#f1edce;border:1px solid #88977b;border-radius:0;padding:11px 12px;font-size:11px;box-shadow:3px 3px 0 #102b28}
.route{position:fixed;z-index:3;top:76px;left:16px;width:310px;padding:9px 12px;display:block;border-left:5px solid #dea45b;background:#183b33f5;border-radius:0;box-shadow:3px 3px 0 #102b28;color:#f5edcc}
.route h1{font-size:21px;margin:4px 0;color:#f5edcc}.route p,html[data-theme=dark] .route p{font-size:11px;line-height:1.4;color:#d5dfbd}.route .eyebrow,html[data-theme=dark] .route .eyebrow{font-size:8px;color:#dfb775;letter-spacing:1.3px}
#levelsButton{position:absolute;right:0;top:-58px;background:#193d35;color:#f1edce;border:1px solid #89997a;padding:11px;font-size:11px;transform:translateX(100%);margin-right:-12px}
.hud{position:fixed;z-index:3;top:76px;left:346px;right:16px;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;border:0;align-items:start}
.mode-daily .hud{grid-template-columns:repeat(4,minmax(0,1fr))}
.hud>div,.hud>div:first-child,.hud>div:last-child{padding:9px 10px;min-height:66px;border:1px solid #b2b08b;border-bottom:3px solid #aa8c54;border-radius:0;background:#f7edccf5;box-shadow:3px 3px 0 #102b28;text-align:left}
.hud span,html[data-theme=dark] .hud span{color:#566d55;font-size:8px;letter-spacing:.6px}.hud strong{font-size:23px;margin:5px 0 0;color:#234b3e}.hud .metrics span{font-size:23px;color:#234b3e}.metrics small{margin-top:5px;font-size:9px;color:#536b54}
#balance,html[data-theme=dark] #balance{color:#406e37}
html[data-theme=dark] .game{border:0}html[data-theme=dark] .hud{border:0}html[data-theme=dark] .hud>div{background:#183b32f5;border-color:#789172;color:#f3e8bf}html[data-theme=dark] .hud strong,html[data-theme=dark] .hud .metrics span{color:#f3e8bf}html[data-theme=dark] .hud span,html[data-theme=dark] .metrics small{color:#c1d0b0}html[data-theme=dark] #balance{color:#bfdd9a}
.action-bar{position:fixed;z-index:3;left:16px;right:16px;bottom:20px;display:flex;gap:15px;padding:10px 14px;background:#15392ff5;border:1px solid #829577;border-radius:0;box-shadow:3px 3px 0 #102b28}
.feedback{height:auto;min-width:0}#hint{font-size:12px!important;color:#f4eac6;margin:0 0 4px!important;line-height:1.35}#hint.error{color:#ffbc99}#selectedInfo,html[data-theme=dark] #selectedInfo{font-size:11px;color:#c2d2b3}
.controls{flex:none;margin:0;gap:6px;flex-wrap:nowrap}.controls button,html[data-theme=dark] .controls button{font-size:12px;padding:12px 15px;flex:none;background:#365746;color:#ede9c9;border:1px solid #8b9d7c;border-bottom:3px solid #152e25;border-radius:0}
.controls #closeVan,html[data-theme=dark] .controls #closeVan{background:#efaa50;color:#253b2d;border-color:#f3cf89;border-bottom-color:#ac692c;min-width:155px;box-shadow:3px 3px 0 #102b28;font-size:14px}
.controls button:disabled{opacity:.6}.controls kbd{background:#173d32;color:#e8ddb9}.guide{position:fixed;z-index:3;bottom:3px;left:20px;right:20px;padding:0;border:0;display:flex;color:#fff1ca;font-size:9px;text-shadow:0 1px 3px #18392b;pointer-events:none}.guide span{display:block}.progress{position:fixed;z-index:4;bottom:0;left:0;right:0;height:3px;background:#193d32}
.yard-tools{height:42px;padding:4px 10px}.yard-tools label{color:#314c3a;font-size:10px;letter-spacing:2px}.yard-tools select{height:32px;background:#f2e6c4;color:#314c3a;border:1px solid #a4a883;font-size:11px}.yard-tools button{min-width:30px;min-height:32px;padding:1px 8px;background:#d4c696;color:#314c3a}.yard-tools #yardPage{color:#314c3a}
html[data-theme=dark] .yard-tools label,html[data-theme=dark] .yard-tools #yardPage{color:#e5d6b1}html[data-theme=dark] .yard-tools select{background:#203e34;color:#eadcbb}html[data-theme=dark] .yard-tools button{background:#45604b;color:#f1e5c4}
.cargo-zoom{min-height:34px;background:#21493ee8;color:#f8edcc;box-shadow:3px 3px 0 #102b28}
#dropStatus{bottom:auto;max-width:min(420px,calc(100vw - 28px));font-size:11px}
dialog{max-height:94dvh;overflow:auto}
@media(max-width:1000px) and (min-width:601px){header{left:10px;right:10px}.settings{gap:3px}.settings button{padding:10px 7px}.route{left:10px;width:240px}.route h1{font-size:18px}.hud{left:266px;right:10px;gap:4px}.hud>div,.hud>div:first-child,.hud>div:last-child{padding:8px 6px}.hud strong,.hud .metrics span{font-size:18px}.hud span{font-size:7px}.action-bar{left:10px;right:10px;padding:8px;gap:8px}.controls button{padding:11px 9px;font-size:11px}.controls #closeVan{min-width:130px;font-size:12px}#hint{font-size:10px!important}#selectedInfo{font-size:9px}#levelsButton{display:none}.guide{font-size:8px}}
@media(max-width:600px){header{top:5px;left:8px;right:8px;height:89px;display:grid;grid-template-columns:70px 1fr;grid-template-rows:43px 36px;gap:5px}.brand{width:70px;height:48px}.brand img{width:70px;top:-1px}.settings{grid-column:2;grid-row:1;justify-content:flex-end;gap:4px}.settings button,html[data-theme=dark] .settings button{min-height:36px;padding:6px 8px;font-size:10px}header nav{grid-column:1/-1;grid-row:2;width:100%;margin:0;display:flex;padding:2px}header nav button,html[data-theme=dark] header nav button{flex:1;font-size:11px;padding:7px}.route{top:96px;left:8px;right:8px;width:auto;padding:5px 9px;min-height:35px}.route h1{font-size:15px;margin:2px 0}.route .eyebrow{font-size:7px}.route p{display:none}#levelsButton{display:none}.hud{left:8px;right:8px;top:147px;gap:3px}.hud>div,.hud>div:first-child,.hud>div:last-child{min-height:51px;padding:5px 4px;border-radius:0}.hud span,html[data-theme=dark] .hud span{font-size:6px;letter-spacing:0}.hud strong,.hud .metrics span{font-size:15px;margin-top:4px}.metrics small{font-size:7px;margin-top:4px}.action-bar{left:8px;right:8px;bottom:13px;display:block;padding:7px 8px}.feedback{height:32px}#hint{font-size:10px!important}#selectedInfo,html[data-theme=dark] #selectedInfo{font-size:9px}.controls{display:flex;gap:4px;margin-top:5px}.controls button,html[data-theme=dark] .controls button{flex:1;padding:9px 4px;min-height:38px;font-size:10px}.controls #closeVan,html[data-theme=dark] .controls #closeVan{flex:1.5;min-width:105px;font-size:11px}.guide{bottom:3px;left:10px;right:10px;font-size:7px}.guide span:first-child{display:none}.yard-tools{padding:3px 6px}.yard-tools label{font-size:8px;letter-spacing:1px}.yard-tools select{font-size:10px}.cargo-zoom{font-size:9px;min-height:29px;padding:5px 8px}}
@media(max-height:540px) and (min-width:601px){header{top:4px;height:40px}.brand{height:45px;width:75px}.brand img{width:75px}.route{top:54px}.route h1{font-size:16px}.route p{display:none}.hud{top:54px}.hud>div,.hud>div:first-child,.hud>div:last-child{min-height:52px;padding:5px 7px}.hud strong,.hud .metrics span{font-size:17px}.action-bar{bottom:12px;padding:5px 9px}.controls button{padding:8px}.guide{display:none}}

header #levelsButton{position:static;transform:none;margin:0;display:inline-block;font-size:11px;padding:11px 12px}
@media(max-width:600px){header #levelsButton{font-size:10px;padding:6px 7px;min-height:36px}.settings{gap:3px}.settings button,html[data-theme=dark] .settings button{padding:6px;font-size:9px}}

.hud{left:auto;width:min(820px,calc(100vw - 362px))}.hud #timer{font-size:23px;white-space:nowrap;line-height:1.1}.hud .metrics:before{content:'TEMPO';display:block;font-size:8px;letter-spacing:1px;color:#566d55;margin-bottom:4px}html[data-theme=dark] .hud .metrics:before{color:#c1d0b0}header nav button{white-space:nowrap}header nav,.settings{flex-shrink:0}
@media(max-width:1000px) and (min-width:601px){.hud{left:266px;width:auto}.hud #timer{font-size:18px}header nav button,html[data-theme=dark] header nav button{font-size:11px;padding:9px 10px}}
@media(max-width:600px){.hud{left:8px;width:auto}.hud #timer{font-size:14px;margin-top:0}.hud .metrics:before{font-size:6px;margin-bottom:2px;letter-spacing:0}.hud .metrics small{font-size:6px;margin-top:3px}}
@media(max-height:540px) and (min-width:601px){.hud #timer{font-size:17px}.hud .metrics:before{font-size:7px;margin-bottom:2px}}


/* Van enamel instruments. Original nine-slice pixel frames, shared across controls. */
@font-face{font-family:CargoPixel;src:url('assets/cargo-pixel.ttf') format('truetype');font-display:swap}
:root{--pixel-ink:#193c38;--pixel-paper:#f1dfac;--pixel-light:#fff1c9;--pixel-edge:#9b733f;--pixel-muted:#657465;
 --frame-green:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill%3D%22%23102d36%22%20d%3D%22M6%200h20v2h4v4h2v20h-2v4h-4v2H6v-2H2v-4H0V6h2V2h4z%22%2F%3E%3Cpath%20fill%3D%22%23658877%22%20d%3D%22M6%202h20v2h2v2h2v20h-2v2h-2v2H6v-2H4v-2H2V6h2V4h2z%22%2F%3E%3Cpath%20fill%3D%22%23b1c7a0%22%20d%3D%22M6%204h20v2H6zM4%206h2v18H4z%22%2F%3E%3Cpath%20fill%3D%22%23193832%22%20d%3D%22M6%2026h20v2H6zM26%206h2v20h-2z%22%2F%3E%3Cpath%20fill%3D%22%23274e46%22%20d%3D%22M6%206h20v20H6z%22%2F%3E%3Cpath%20fill%3D%22%23b1c7a0%22%20d%3D%22M5%205h2v2H5zM25%205h2v2h-2z%22%2F%3E%3C%2Fsvg%3E");--frame-blue:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill%3D%22%23132b44%22%20d%3D%22M6%200h20v2h4v4h2v20h-2v4h-4v2H6v-2H2v-4H0V6h2V2h4z%22%2F%3E%3Cpath%20fill%3D%22%23285b8d%22%20d%3D%22M6%202h20v2h2v2h2v20h-2v2h-2v2H6v-2H4v-2H2V6h2V4h2z%22%2F%3E%3Cpath%20fill%3D%22%238cbee1%22%20d%3D%22M6%204h20v2H6zM4%206h2v18H4z%22%2F%3E%3Cpath%20fill%3D%22%231c456e%22%20d%3D%22M6%2026h20v2H6zM26%206h2v20h-2z%22%2F%3E%3Cpath%20fill%3D%22%23326ea5%22%20d%3D%22M6%206h20v20H6z%22%2F%3E%3Cpath%20fill%3D%22%238cbee1%22%20d%3D%22M5%205h2v2H5zM25%205h2v2h-2z%22%2F%3E%3C%2Fsvg%3E");--frame-gold:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill%3D%22%23443623%22%20d%3D%22M6%200h20v2h4v4h2v20h-2v4h-4v2H6v-2H2v-4H0V6h2V2h4z%22%2F%3E%3Cpath%20fill%3D%22%23c48b37%22%20d%3D%22M6%202h20v2h2v2h2v20h-2v2h-2v2H6v-2H4v-2H2V6h2V4h2z%22%2F%3E%3Cpath%20fill%3D%22%23fff0ae%22%20d%3D%22M6%204h20v2H6zM4%206h2v18H4z%22%2F%3E%3Cpath%20fill%3D%22%23a4652d%22%20d%3D%22M6%2026h20v2H6zM26%206h2v20h-2z%22%2F%3E%3Cpath%20fill%3D%22%23edb54e%22%20d%3D%22M6%206h20v20H6z%22%2F%3E%3Cpath%20fill%3D%22%23fff0ae%22%20d%3D%22M5%205h2v2H5zM25%205h2v2h-2z%22%2F%3E%3C%2Fsvg%3E");--frame-paper:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill%3D%22%23213b39%22%20d%3D%22M6%200h20v2h4v4h2v20h-2v4h-4v2H6v-2H2v-4H0V6h2V2h4z%22%2F%3E%3Cpath%20fill%3D%22%23b69b60%22%20d%3D%22M6%202h20v2h2v2h2v20h-2v2h-2v2H6v-2H4v-2H2V6h2V4h2z%22%2F%3E%3Cpath%20fill%3D%22%23fff0bf%22%20d%3D%22M6%204h20v2H6zM4%206h2v18H4z%22%2F%3E%3Cpath%20fill%3D%22%23867447%22%20d%3D%22M6%2026h20v2H6zM26%206h2v20h-2z%22%2F%3E%3Cpath%20fill%3D%22%23eddfb1%22%20d%3D%22M6%206h20v20H6z%22%2F%3E%3Cpath%20fill%3D%22%23fff0bf%22%20d%3D%22M5%205h2v2H5zM25%205h2v2h-2z%22%2F%3E%3C%2Fsvg%3E")}
html[data-theme=dark]{--pixel-paper:#233e38;--pixel-ink:#f2e5b9;--pixel-light:#49685a;--pixel-muted:#becbb2}
html header nav{background:transparent;border:0;box-shadow:none;display:flex;gap:6px;padding:0}
html header nav button,html[data-theme=dark] header nav button,
html .settings button,html[data-theme=dark] .settings button,
html .controls button,html[data-theme=dark] .controls button,
html .cargo-zoom,html dialog button,html .yard-tools button,html.android #nativeMenu{
 border:4px solid transparent;border-image:var(--frame-gold) 8 fill / 8px / 0 stretch;
 border-radius:0;background:transparent;color:#332e24;box-shadow:none;
 text-shadow:none;image-rendering:pixelated;transition:filter .1s,transform .1s}
html header nav button[aria-pressed=true],html[data-theme=dark] header nav button[aria-pressed=true],
html .controls #closeVan,html[data-theme=dark] .controls #closeVan,
html dialog .win-card>button:not(.quiet):not(.secondary){border-image-source:var(--frame-gold);background:transparent;color:#332e24;text-shadow:none;box-shadow:none}
html .controls #closeVan{font-family:CargoPixel,monospace;font-size:12px}
html button:hover:not(:disabled){filter:brightness(1.12);box-shadow:none}
html button:active:not(:disabled){transform:translateY(2px);filter:brightness(.96);box-shadow:none}
html button:disabled,html .controls button:disabled,html[data-theme=dark] .controls button:disabled,html #shopDialog button:disabled{border-image-source:var(--frame-green);background:transparent;color:#c6d2c4;opacity:1;filter:saturate(.4);text-shadow:none;box-shadow:none;cursor:not-allowed}
html button:focus-visible,html select:focus-visible{outline:2px solid #fff0a9;outline-offset:2px}
html kbd{background:#17364a;color:#fff0c5;border-radius:0;box-shadow:none}
html .route{border:4px solid transparent;border-image:var(--frame-green) 8 fill / 8px;box-shadow:none;background:transparent;padding-left:14px}
html .route h1{font-family:CargoPixel,monospace;font-size:18px;line-height:1.3;letter-spacing:-.6px}
html .hud,html[data-theme=dark] .hud{border:4px solid transparent;border-image:var(--frame-green) 8 fill / 8px;gap:0;background:transparent;box-shadow:none;align-items:stretch}
html .hud>div,html .hud>div:first-child,html .hud>div:last-child,
html[data-theme=dark] .hud>div{background:transparent;border:0;box-shadow:none;border-radius:0;min-width:0;position:relative}
html .hud>div+div:before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:2px;background:#75958566}
html .hud strong,html[data-theme=dark] .hud strong{font-family:CargoPixel,monospace;font-size:19px;letter-spacing:-1px;color:#fff0bb;white-space:nowrap;text-shadow:1px 2px #143b36}
html .hud span,html[data-theme=dark] .hud span{color:#c9dab9}
html .hud #balance,html[data-theme=dark] .hud #balance{color:#d4eaa6}
html .hud .metrics{border:3px solid transparent!important;border-image:var(--frame-blue) 8 fill / 8px!important}
html .hud .metrics:before{position:static;width:auto;background:none;content:'TEMPO';color:#d2e0e3;font-size:8px;letter-spacing:1px;margin-bottom:4px}
html .hud #timer{font-family:CargoPixel,monospace;font-size:23px;color:#fff0ae;letter-spacing:0;text-shadow:2px 2px #183652}
html .hud .metrics small,html[data-theme=dark] .hud .metrics small{color:#e0e7da}
html .hud #timer.time-warning{color:#ffb389!important}
html .action-bar{background:transparent;border:0;box-shadow:none;padding:0;gap:12px;bottom:10px}
html .feedback{border:4px solid transparent;border-image:var(--frame-green) 8 fill / 8px;padding:8px 14px;height:auto}
html #hint.error{color:#ffbb9d!important}
html .controls{padding:3px 0}
html .controls button{min-height:46px}
html .guide,html .progress{display:none}
html .yard-tools{padding-left:10px;padding-right:10px}
html .yard-tools select{appearance:none;border:4px solid transparent;border-image:var(--frame-green) 8 fill / 8px;border-radius:0;box-shadow:none;background:transparent;color:#f5e9c6;padding:3px 16px 3px 7px}
html .yard-tools select option{background:#264a42;color:#f5e9c6}
html .yard-tools label,html .yard-tools #yardPage{color:#f5e9c6}
html #dropStatus{border:4px solid transparent;border-image:var(--frame-green) 8 fill / 8px;box-shadow:none;border-radius:0}
html dialog{border:8px solid transparent;border-image:var(--frame-paper) 8 fill / 12px;background:var(--pixel-paper);background-clip:padding-box;border-radius:0;box-shadow:0 6px 0 #102b2855;color:var(--pixel-ink)}
html[data-theme=dark] dialog{border-image-source:var(--frame-green)}
html dialog h2{font-family:CargoPixel,monospace;letter-spacing:-.7px;font-size:22px;line-height:1.35}
html #resultStats div,html .welcome-mode,html .stamp,html .swatch{border-radius:2px;box-shadow:none}
html #resultStats div{background:var(--pixel-light);border:0}
html #resultStats strong{font-family:CargoPixel,monospace;font-size:16px}
html #resultStats small,html #winText{color:var(--pixel-ink)}
html #pauseTitle{font-size:clamp(30px,7vw,52px)}
@media(max-width:1000px){html .hud strong{font-size:16px}html .route h1{font-size:16px}}
@media(max-width:600px){html .route h1{font-size:13px}html .hud strong{font-size:12px;letter-spacing:-1px}html .hud #timer{font-size:14px}html .hud>div{padding-left:3px;padding-right:3px}html .controls #closeVan{font-size:9px}html dialog h2{font-size:19px}html .feedback{padding:5px 8px}html .yard-tools label{letter-spacing:0}html .action-bar{bottom:5px}html .controls button{min-height:38px}}
@media(max-height:540px) and (min-width:601px){html .hud #timer{font-size:17px}html .route h1{font-size:14px}}
@media(prefers-reduced-motion:reduce){html button{transition:none}}

#hintList{text-align:left;font-size:12px;line-height:1.6}#assistsDialog p{font-size:12px;line-height:1.5}
@media(max-width:600px){header{grid-template-columns:55px 1fr}.brand,.brand img{width:55px}.settings{gap:2px}html .settings button{padding:6px 4px;font-size:8px}header #levelsButton{padding:6px 4px;font-size:8px}}

/* Yellow enamel controls keep dark lettering, including legacy ID rules. */
html header #levelsButton,html.android #nativeMenu,html dialog button,html .cargo-zoom{color:#332e24;text-shadow:none}
html header nav button[aria-pressed=true]{filter:brightness(1.12);text-decoration:underline;text-underline-offset:4px}
/* Menu labels stay dark on the shared yellow enamel, including night mode. */
html dialog button,html[data-theme=dark] dialog button,
html .controls button,html[data-theme=dark] .controls button{color:#161410!important;text-shadow:none}
html dialog button:disabled,html .controls button:disabled,html[data-theme=dark] .controls button:disabled{border-image-source:var(--frame-gold);filter:grayscale(1);color:#161410!important}
html #resetSave,html #confirmReset,html[data-theme=dark] #resetSave,html[data-theme=dark] #confirmReset{border-image:none;border:3px solid #662b25;background:#ed7864;color:#161410!important;box-shadow:inset 2px 2px #ffb5a0,inset -2px -3px #b5483d}