:root{--paper:#fff2d9;--cream:#f6e6c8;--ink:#33293f;--muted:#726177;--lavender:#dbccdf;--line:#b5a0ba;--apricot:#f7b369;--dark:#51405e;font:16px/1.45 ui-rounded,'Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;font-synthesis:none;color:var(--ink);background:var(--cream)}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit;color:inherit}button,select,summary{min-width:44px;min-height:44px}button,select{padding:9px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);max-width:100%;overflow-wrap:anywhere}button{cursor:pointer;font-weight:700}button:disabled{opacity:.5;cursor:default}button:hover:enabled{background:#ffdbad}button.primary{background:var(--apricot);border-color:#bc7f42;box-shadow:0 3px 0 #d3995b}button:focus-visible,select:focus-visible,summary:focus-visible,#stage:focus-visible{outline:3px solid #9852b4;outline-offset:3px}[hidden]{display:none!important}h1,h2,h3,p,small,strong{overflow-wrap:anywhere}h1{font-size:clamp(27px,4vw,40px);line-height:1.1;margin:5px 0}h2{font-size:25px;line-height:1.2;margin:0 0 12px}h3{font-size:19px;line-height:1.2}p{margin:12px 0}small{color:var(--muted)}#home{max-width:1160px;margin:auto;padding:20px}.townHeader{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:20px}.townHeader nav,.actions{display:flex;gap:9px;flex-wrap:wrap}.townHeader small{letter-spacing:.05em}.welcome{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center}.welcome>img{width:100%;height:100%;max-height:360px;object-fit:cover;border-radius:24px}.welcome>div{padding:5px 0}.welcome .actions{margin-top:18px}#progress{font-size:20px}#saved,#boot,#notice{color:var(--muted)}.explore{margin:28px 0;display:grid;grid-template-columns:1fr 1fr;gap:28px;border-top:1px solid var(--line);padding-top:22px}.explore h2{font-size:22px}.explore details{align-self:start}details{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:8px 14px}summary{cursor:pointer;font-weight:700;padding:8px 0}label{display:flex;align-items:center;gap:12px;min-height:44px;margin:10px 0}label select{min-width:0;flex:1}input[type=checkbox]{width:24px;height:24px;accent-color:#9874aa;flex:none}#game{position:fixed;inset:0;background:var(--lavender);overflow:hidden}#stage,#canvas{width:100%;height:100%;display:block}#stage{outline-offset:-4px;touch-action:none;user-select:none}.driveHud{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));width:340px;max-width:calc(100% - 164px);padding:11px 14px;border-radius:14px;background:#fff2d9f2;box-shadow:0 3px 15px #33293f24;display:flex;flex-direction:column;gap:4px;pointer-events:none}.driveHud small{font-size:12px}.driveHud strong{font-size:17px;line-height:1.25}.meters{display:flex;gap:10px;flex-wrap:wrap;font-size:13px}.meters span:empty{display:none}#speed{font-size:21px;font-weight:750;font-variant-numeric:tabular-nums}#timer{font-variant-numeric:tabular-nums}#gameNotice{font-size:12px;color:#853d37}.driveTools{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));display:flex;gap:6px;max-width:140px;flex-wrap:wrap;justify-content:end}.driveTools button{padding:8px 10px;flex:1;font-size:13px;min-width:44px;background:#fff2d9f2}#rear[aria-pressed=true]{background:var(--apricot)}#mapPanel{position:absolute;right:12px;top:122px;width:140px;height:140px;margin:0;border:2px solid #fff2d9;border-radius:15px;overflow:hidden;box-shadow:0 3px 14px #33293f33;background:var(--paper)}#minimap{width:100%;height:100%;display:block}#inputHint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);max-width:80%;margin:0;padding:6px 12px;background:#fff2d9e6;border-radius:8px;font-size:13px;pointer-events:none;text-align:center}.touchControls{display:none;position:absolute;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));justify-content:space-between;pointer-events:none}.steering,.pedals{display:flex;gap:8px;align-items:end}.touchControls button{width:56px;height:58px;padding:0;font-size:27px;touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:auto;background:#fff2d9e8;border:2px solid #796384;box-shadow:0 3px 0 #33293f44}.touchControls button.active{background:var(--apricot);transform:translateY(2px);box-shadow:none}.touchControls .gas{height:75px;background:#f7b369ed}.pedals button[data-control=handbrake]{width:46px;font-size:23px}dialog{width:min(700px,94vw);max-height:90dvh;overflow:auto;border:2px solid var(--dark);border-radius:22px;background:var(--paper);color:var(--ink);padding:24px;box-shadow:0 20px 80px #33293f66}dialog::backdrop{background:#33293f85}dialog button{margin-top:6px}.jobGrid,.carGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:15px 0}.jobGrid button{text-align:start;white-space:normal;display:flex;flex-direction:column;gap:7px;padding:14px}.jobGrid button small{font-weight:400}.carGrid article{min-width:0;border:1px solid var(--line);padding:12px;border-radius:14px}.carGrid img{width:100%;aspect-ratio:1.6;object-fit:contain;border-radius:10px}.carGrid h3{margin:5px 0}.carGrid p{font-size:13px}.carGrid button{width:100%}.language{flex-direction:column;align-items:stretch}#briefLimits{display:block}body.playing{overflow:hidden}
@media(pointer:coarse),(max-width:800px){.touchControls{display:flex}#inputHint{display:none}}
@media(max-width:650px){#home{padding:14px}.townHeader{gap:12px;margin-bottom:14px}.townHeader nav{width:100%;gap:6px}.townHeader nav button{font-size:13px;flex:1;padding:8px}.welcome{grid-template-columns:1fr;gap:8px}.welcome>img{max-height:230px;aspect-ratio:16/9}.welcome p{margin:9px 0}.welcome .actions button{flex:1}.explore{grid-template-columns:1fr;gap:20px;margin-top:24px}.driveHud{left:9px;top:max(9px,env(safe-area-inset-top));max-width:calc(100% - 138px);padding:9px 11px;gap:3px}.driveHud strong{font-size:15px}.driveHud small{font-size:11px}.meters{font-size:12px;gap:7px}#speed{font-size:18px}.driveTools{right:9px;max-width:117px;gap:5px}.driveTools button{font-size:12px;padding:6px}#mapPanel{width:117px;height:117px;right:9px;top:115px}.touchControls{left:10px;right:10px}.steering,.pedals{gap:6px}.touchControls button{width:52px;height:56px}.pedals button[data-control=handbrake]{width:42px}.touchControls .gas{height:70px}dialog{padding:18px}.jobGrid,.carGrid{gap:9px}.jobGrid button{padding:10px;font-size:14px}.carGrid article{padding:8px}.carGrid h3{font-size:17px}.carGrid p{font-size:12px}}
@media(max-height:500px){.driveHud{width:320px}.driveHud small{display:none}#mapPanel{width:110px;height:110px;top:115px}.touchControls{bottom:max(9px,env(safe-area-inset-bottom))}.touchControls button{height:48px}.touchControls .gas{height:58px}dialog{max-height:92dvh;padding:16px}#inputHint{bottom:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Narrow portrait keeps the full job name in the route book and gives tools whole words. */
@media(max-width:360px){.driveHud small{display:none}.driveHud{max-width:calc(100% - 117px)}.driveHud strong{font-size:13px}.driveTools{width:96px;max-width:96px;flex-direction:column}.driveTools button{flex:none;width:100%}}

/* The map follows the real HUD/tool row height, including larger text. */
#game{display:grid;grid-template-columns:minmax(0,340px) minmax(0,140px);grid-auto-rows:max-content;align-content:start;justify-content:space-between;column-gap:8px;row-gap:8px;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
#stage{position:absolute;inset:0}
.driveHud{position:relative;inset:auto;grid-column:1;grid-row:1;width:100%;max-width:none}
.driveTools{position:relative;inset:auto;grid-column:2;grid-row:1;width:100%;max-width:none;align-self:start}
#mapPanel{position:relative;inset:auto;grid-column:2;grid-row:2;justify-self:end;width:100%;height:auto;aspect-ratio:1;margin:0}
@media(max-width:650px){#game{grid-template-columns:minmax(0,1fr) minmax(0,117px);column-gap:3px;padding:max(9px,env(safe-area-inset-top)) 9px 0 9px}}
@media(max-width:360px){#game{grid-template-columns:minmax(0,1fr) minmax(0,96px)}.driveTools{width:100%;max-width:none}}

/* Native select intrinsic width must not widen a home grid track. */
.welcome>*,.explore>*{min-width:0}
@media(max-width:650px){.explore details label{flex-direction:column;align-items:stretch}}

/* Larger user text needs a full line box inside each pedal and steering target. */
.touchControls button{min-height:calc(1.45em + 4px)}

/* Keep localized tool labels intact, and let the goal own the mobile HUD. */
.driveTools{flex-direction:column}.driveTools button{flex:none;width:100%}
@media(max-width:650px){.driveHud small{display:none}}

/* Leave the lower pedals clear when a touch screen is short and wide. */
@media(pointer:coarse) and (min-width:651px) and (max-height:500px){#mapPanel{width:96px}}