:root{color-scheme:dark;font:16px Arial,"Helvetica Neue",sans-serif;background:#191916;color:#eee8da}body{margin:0;overflow:hidden}button,.button{font:inherit;background:#2a2922;color:inherit;border:1px solid #82755e;border-radius:2px;padding:.65rem;cursor:pointer}button:active{background:#735144}#loader{position:fixed;z-index:20;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:#191916}#loader[hidden]{display:none}#status{max-width:85vw;overflow-wrap:anywhere}progress{width:min(80vw,32rem)}canvas#game{position:fixed;inset:0;width:100vw!important;height:100dvh!important;outline:none;touch-action:none}#tools{position:fixed;z-index:10;top:env(safe-area-inset-top,0);right:env(safe-area-inset-right,0);display:flex;align-items:center;gap:.3rem;opacity:.65}#tools:hover{opacity:1}#tools button,.button{font-size:.7rem}input[type=file]{display:none}#tools select{font:inherit;font-size:.7rem;line-height:normal;max-width:6.5rem;background:#2a2922;color:inherit;border:1px solid #82755e;border-radius:2px;padding:.65rem .25rem;cursor:pointer}
#tools-toggle{display:none;position:fixed;z-index:12;top:max(4px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:44px;height:40px;padding:0;opacity:.65}
#touch{display:none;position:fixed;inset:0;z-index:10;pointer-events:none;--edge:max(12px,env(safe-area-inset-left));--bottom:max(12px,env(safe-area-inset-bottom));--control:clamp(52px,min(16dvh,17vw),88px)}
#touch>div{position:absolute;display:flex;gap:8px;align-items:center;bottom:var(--bottom)}
#touch button{display:grid;place-items:center;box-sizing:border-box;line-height:1;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;min-width:48px;min-height:44px;opacity:.65;font-size:12px;background:#24241fcc;border:1px solid #b3a48a88}
#touch button svg{display:block;width:16px;height:16px;fill:currentColor;pointer-events:none}
#touch .steering button{padding:0}
#touch .steering button svg{width:28px;height:28px}
#touch button.held{opacity:1;background:#875447dd;border-color:#fff}
#touch .steering{left:var(--edge);gap:6px}
#touch .steering button{width:var(--control);height:var(--control);font-size:28px;border-radius:20px}
#touch .pedals{right:max(12px,env(safe-area-inset-right))}
#touch .pedals button{width:var(--control);height:var(--control);border-radius:20px;padding:4px;overflow-wrap:anywhere}
#touch .pedals button[data-code="Space"]{height:48px;width:clamp(52px,11dvh,68px);align-self:flex-start}
#touch .race-actions{left:50%;transform:translateX(-50%);bottom:var(--bottom);gap:5px}
#touch .race-actions button{padding:5px;min-width:40px}
#touch .menu-arrows{left:var(--edge);bottom:calc(var(--bottom) + 6px);display:grid;grid-template-columns:repeat(3,48px);gap:4px}
.menu-arrows button:first-child{grid-column:2}.menu-arrows button:nth-child(2){grid-column:1;grid-row:2}.menu-arrows button:nth-child(3){grid-column:2;grid-row:2}.menu-arrows button:nth-child(4){grid-column:3;grid-row:2}
#touch .menu-actions{right:max(12px,env(safe-area-inset-right));flex-direction:column;gap:6px}
#touch .menu-actions button{min-width:68px}
#touch .race-controls{display:none}
:root[data-controls-mode="race"] #touch .race-controls{display:flex}
:root[data-controls-mode="race"] #touch .menu-controls{display:none}
:root:not([data-game-mode="menu"]):not([data-game-mode="race"]) #touch{display:none}
#text-input{position:fixed;z-index:11;box-sizing:border-box;margin:0;padding:0;border:0;opacity:.01;background:transparent;color:transparent;caret-color:transparent;font-size:16px;touch-action:manipulation}
#text-input[hidden]{display:none}
@media(any-pointer:coarse){
 #touch{display:block}#tools-toggle{display:block}
 #tools{display:none;top:max(4px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));max-width:min(360px,calc(50vw - 38px));padding:8px;opacity:1;flex-wrap:wrap;justify-content:end;text-shadow:0 1px 2px #000}
 :root[data-tools-open="true"] #tools{display:flex}
}
/* Desktop: a race fills every HUD corner, so the toolbar folds into a ☰ on the bottom centre strip,
   the one place the HUD leaves free (the touch layout uses it for its race buttons too). The panel
   opens upwards above the button; the menu keeps the toolbar open in the top right. */
@media not all and (any-pointer:coarse){
 :root[data-game-mode="race"] #tools{display:none}
 :root[data-game-mode="race"] #tools-toggle{display:block;top:auto;bottom:max(6px,env(safe-area-inset-bottom));left:0;right:0;margin-inline:auto;transform:none;width:44px;height:36px;padding:0;opacity:.5}
 :root[data-game-mode="race"] #tools-toggle:hover{opacity:1}
 :root[data-game-mode="race"][data-tools-open="true"] #tools{display:flex;top:auto;bottom:calc(max(6px,env(safe-area-inset-bottom)) + 42px);left:0;right:0;margin-inline:auto;width:max-content;max-width:min(34rem,calc(100vw - 1rem));padding:8px;flex-wrap:wrap;justify-content:center;opacity:1;background:#24241fed;border:1px solid #82755e;border-radius:2px;text-shadow:0 1px 2px #000}
}
@media(max-width:740px){#touch .race-actions{bottom:calc(var(--bottom) + var(--control) + 8px)}}
#render-size{font-size:.7rem;opacity:.75;font-variant-numeric:tabular-nums;min-width:4.5rem;text-align:right}

/* The loading shell stays independent of the game's canvas and input layouts. */
#loader{box-sizing:border-box;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right));overflow:auto;background:radial-gradient(ellipse at top,#d6b47909,transparent 60%),#191916;color:#eee8da}
.loading-card{box-sizing:border-box;display:grid;grid-template-columns:1fr 1.1fr;width:min(100%,1040px);margin:auto;border:1px solid #a7987a55;border-radius:0;overflow:hidden;background:#24241f;box-shadow:0 30px 100px #0004}
.loading-art{min-height:540px;border-right:1px solid #a7987a40;background:linear-gradient(0deg,#24241f33,#24241f00),url('porsche-993-alpine.webp') 66% center/cover}
.loading-content{padding:clamp(24px,4vw,48px);min-width:0}
.loading-brand{display:flex;align-items:center;gap:12px;color:#eee8da;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.04em}.loading-brand>span{background:#873d32;color:#eee8da;border:1px solid #c98e6b;transform:skew(-7deg);font-size:20px;font-style:italic;letter-spacing:-.06em;padding:6px 9px;border-radius:0}
.loading-eyebrow{margin:36px 0 12px;color:#d6b479;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
#loading-title{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(34px,4.5vw,52px);line-height:1.05;letter-spacing:-.045em;margin:0 0 18px}
#status{max-width:none;min-height:3em;font-size:14px;line-height:1.6;color:#c2bdaf;margin:0 0 24px}
.loading-steps{display:flex;list-style:none;gap:8px;padding:0;margin:0 0 24px}.loading-steps li{display:flex;align-items:center;gap:8px;flex:1;color:#aaa697;font-size:12px}.loading-steps li>span:first-child{display:grid;place-items:center;border:1px solid #ffffff26;border-radius:0;width:27px;height:27px;font-size:10px;flex-shrink:0}.loading-steps li[aria-current="step"]{color:#d6b479}.loading-steps li[aria-current="step"]>span:first-child{border-color:#d6b479;background:#d6b47915}.loading-steps li[data-complete="true"]{color:#eee8da}
.loading-progress-heading{display:flex;justify-content:space-between;gap:12px;min-height:18px;margin-bottom:8px;font-size:11px;font-variant-numeric:tabular-nums;color:#aaa697}
#progress{display:block;appearance:none;-webkit-appearance:none;box-sizing:border-box;border:0;border-radius:0;overflow:hidden;width:100%;height:5px;background:#ffffff12;color:#d6b479;accent-color:#d6b479}#progress::-webkit-progress-bar{background:#ffffff12}#progress::-webkit-progress-value{background:#d6b479}#progress::-moz-progress-bar{background:#d6b479}#progress:indeterminate{background:linear-gradient(90deg,#ffffff12 15%,#d6b479 50%,#ffffff12 85%);background-size:200% 100%;animation:loading-sweep 1.8s linear infinite}#progress:indeterminate::-moz-progress-bar{background:transparent}#progress:indeterminate::-webkit-progress-bar{background:transparent}
.loading-hint{font-size:12px;line-height:1.7;color:#aaa697;margin:22px 0}.loading-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px}.loading-actions a{font-size:12px;color:#aaa697;text-underline-offset:4px}#start{border:1px solid #b66c54;border-radius:0;padding:12px 24px;background:#873d32;color:#fff2df;font-size:14px;font-weight:700}#start:hover{background:#a24c3c}#start[hidden]{display:none}#loader a:focus-visible,#start:focus-visible,#loading-details summary:focus-visible{outline:2px solid #d6b479;outline-offset:5px}
#loading-details{margin-top:24px;font-size:12px;color:#aaa697}#loading-details summary{cursor:pointer}#loading-error{white-space:pre-wrap;overflow-wrap:anywhere;max-height:120px;overflow:auto;font-size:11px;line-height:1.6;color:#f1b5a5}#loader[data-state="error"] #status{color:#f1b5a5}#loader[data-state="loading"]{cursor:progress}
@keyframes loading-sweep{from{background-position:200% 0}to{background-position:0 0}}
@media(max-width:700px){.loading-card{grid-template-columns:1fr;max-width:460px}.loading-art{min-height:0;height:160px;border-right:0;border-bottom:1px solid #a7987a40;background-position:center 62%}.loading-eyebrow{margin-top:24px}#loader{justify-content:flex-start}.loading-content{padding:24px}.loading-steps{gap:5px}.loading-steps li{font-size:11px;gap:5px}}
@media(max-height:620px) and (min-width:701px){.loading-art{min-height:0}.loading-content{padding:24px}.loading-eyebrow{margin-top:20px}#status{margin-bottom:14px}.loading-steps{margin-bottom:14px}.loading-hint{margin:14px 0}}
@media(prefers-reduced-motion:reduce){#progress:indeterminate{animation:none}}

/* In-session preparation is a small progress panel; keep the game visible. */
#loader[data-presentation="compact"]{background:#0003}
#loader[data-presentation="compact"] .loading-card{display:block;width:min(100%,400px);margin:auto auto max(12px,env(safe-area-inset-bottom));border-radius:0;box-shadow:0 8px 32px #0005}
#loader[data-presentation="compact"] .loading-content{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;padding:18px 20px}
#loader[data-presentation="compact"] :is(.loading-art,.loading-brand,.loading-eyebrow,#loading-title,.loading-steps,.loading-hint,#loading-count,.loading-actions a){display:none}
#loader[data-presentation="compact"] #status{grid-column:1;grid-row:1;min-height:0;margin:0;font-size:13px;line-height:1.5}
#loader[data-presentation="compact"] .loading-progress-heading{grid-column:2;grid-row:1;min-height:0;margin:0}
#loader[data-presentation="compact"] #progress{grid-column:1/-1;grid-row:2;margin-top:12px;height:4px}
#loader[data-presentation="compact"] .loading-actions{grid-column:1/-1;margin-top:14px}
#loader[data-presentation="compact"][data-state="loading"] .loading-actions{display:none}
#loader[data-presentation="compact"] #loading-details{grid-column:1/-1;margin-top:14px}
/* The player left through the in-game Exit: the shell is saving and returning home. */
:root[data-game-mode="exited"] :is(canvas#game,#tools,#tools-toggle,#touch){display:none}