html,body{margin:0;height:100%;background:#000;overflow:hidden;color:#fff;font-family:Arial,Helvetica,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
#game,#menu{position:fixed;inset:0;width:100%;height:100%;display:none;touch-action:none}
#overlay{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#overlay>*{pointer-events:auto}
.menu-edit{position:fixed;border:0;padding:0 4px;margin:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;font-weight:bold;outline:none}
.menu-video{position:fixed;object-fit:fill;background:#000}
#status{position:fixed;left:8px;bottom:8px;font-size:14px;white-space:pre-wrap;pointer-events:none;z-index:50}

:root{--hud-unit:.75px;--panel-top:0px;--wheel-size:clamp(148px,44vmin,224px);--wheel-left:max(20px,env(safe-area-inset-left));--wheel-bottom:max(16px,env(safe-area-inset-bottom));--action-size:clamp(54px,15vmin,84px);--pill-height:clamp(30px,5vh,38px);--hud-right:env(safe-area-inset-right,0px);--hud-top:env(safe-area-inset-top,0px);--hud-bottom:env(safe-area-inset-bottom,0px)}
/* The fifth rank portrait reaches 60% down the screen: on short screens the reference's wheel clears it a little further in. */
@media (max-height:600px){:root{--wheel-left:calc(env(safe-area-inset-left,0px) + 10vh)}}
@media (max-width:600px){:root:not(.race-portrait){--wheel-size:140px}}
:root.race-portrait{--wheel-size:clamp(148px,45vw,224px);--wheel-left:max(16px,env(safe-area-inset-left));--action-size:clamp(60px,18vw,88px)}
#game.no-pointer{cursor:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#touch-controls{position:fixed;inset:0;pointer-events:none;z-index:10}
#touch-controls[hidden],#dialog-keys[hidden]{display:none}
#touch-controls button,#touch-wheel,#dialog-keys button,#race-stop{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#touch-wheel{position:absolute;left:var(--wheel-left);bottom:var(--wheel-bottom);width:var(--wheel-size);height:var(--wheel-size);border-radius:50%;background:radial-gradient(circle,#15203875 0 44%,transparent 65%);cursor:grab;outline-offset:5px}
#touch-wheel img{display:block;width:100%;height:100%;pointer-events:none;will-change:transform;transform:rotate(var(--steer-angle,0deg));filter:drop-shadow(0 2px 2px #0008);opacity:.85}
#touch-wheel.held{cursor:grabbing}#touch-wheel.held img{opacity:1}
#touch-wheel:focus-visible{outline:3px solid #edff53}
#touch-wheel span{position:absolute;left:50%;transform:translateX(-50%);padding:2px 7px;border-radius:10px;background:#111c32d9;color:#fff;font-size:12px;font-weight:bold;white-space:nowrap;pointer-events:none}
.touch-wheel-forward{top:19%}.touch-wheel-reverse{bottom:18%}
#touch-wheel[data-drive=forward] .touch-wheel-forward,#touch-wheel[data-drive=reverse] .touch-wheel-reverse{background:#ffcb35;color:#111}
/* Beside the Speedometer, unless RaceRunner.layout finds that this covers the Communicator: then above it. */
.touch-actions{position:absolute;right:calc(var(--hud-right) + var(--hud-unit)*205 + 8px);bottom:var(--wheel-bottom);display:flex;align-items:flex-end;gap:10px}
.actions-lifted .touch-actions{right:max(14px,var(--hud-right));bottom:calc(var(--hud-bottom) + var(--hud-unit)*178 + 6px)}
.touch-actions button,.touch-top button,#dialog-keys button,#race-stop{border:2px solid #cfe7a5;border-radius:50%;background:#16361bcc;color:#e9ffc9;font:bold 12px Arial,Helvetica,sans-serif;width:var(--action-size);height:var(--action-size);padding:0}
.touch-actions button.held,.touch-top button.held,#dialog-keys button.held,#race-stop.held{background:#7fd35acc;color:#10220c}
#touch-handbrake{position:relative}
#touch-handbrake img{position:absolute;inset:10% 14% 34%;width:72%;height:56%;object-fit:contain;pointer-events:none;opacity:.85}
#touch-handbrake span{position:absolute;left:0;right:0;bottom:14%;font-size:10px}
/* A column at the right edge between the statistics and the Speedometer. On a short screen it wraps to the left. */
.touch-top{position:absolute;right:max(8px,var(--hud-right));top:calc(var(--hud-top) + var(--hud-unit)*100 + 4px);bottom:calc(var(--hud-bottom) + var(--hud-unit)*178 + 6px);display:flex;flex-flow:column wrap-reverse;align-content:flex-start;gap:6px}
.actions-lifted .touch-top{bottom:calc(var(--hud-bottom) + var(--hud-unit)*178 + var(--action-size) + 12px)}
.touch-top button{width:74px;height:var(--pill-height);border-radius:8px;font-size:11px;opacity:.9}
.touch-top .touch-extra{display:none}
.more .touch-top .touch-extra{display:block}
#touch-more[aria-expanded=true]{background:#2f6a2bcc}
/* Finish table and game-over screens: only Verder remains. */
.race-results #touch-wheel,.race-results .touch-actions,.race-results .touch-top{display:none}
/* Below the requestor frame, whose bottom is canvas y 320.7. */
#dialog-keys{position:fixed;left:50%;top:calc(50% + var(--hud-unit)*81 + 6px);transform:translateX(-50%);display:flex;gap:16px;z-index:20;--action-size:64px}
#dialog-keys button[hidden],#race-settings[hidden],#race-stop[hidden]{display:none}
.race-results #dialog-keys{left:auto;right:max(16px,var(--hud-right));top:auto;bottom:var(--wheel-bottom);transform:none;--action-size:74px}
.race-portrait .touch-actions{right:max(16px,var(--hud-right));max-height:var(--wheel-size);flex-flow:column-reverse wrap-reverse;align-content:flex-start;align-items:flex-end;gap:8px}
/* Portrait: two rows of four at the top of the panel, however short it is above the wheel. */
:root.race-portrait{--pill-height:clamp(28px,calc((100vh - var(--panel-top) - var(--wheel-size) - 32px)/2),38px)}
.race-portrait .touch-top{left:max(8px,env(safe-area-inset-left));right:calc(max(8px,var(--hud-right)) + 40px);top:calc(var(--panel-top) + 4px);bottom:auto;flex-flow:row wrap;align-content:flex-start;gap:4px}
.race-portrait .touch-top button{width:calc(25% - 3px);font-size:clamp(10px,3vw,12px)}
.race-portrait .touch-top .touch-extra{display:block}
.race-portrait #touch-more{display:none}
.race-portrait.race-touch #dialog-keys{top:calc(var(--panel-top) + var(--pill-height)*2 + 12px)}
.race-portrait.race-results #dialog-keys{left:50%;right:auto;transform:translateX(-50%);top:auto;bottom:calc(var(--hud-bottom) + 24px)}

#loading{position:fixed;inset:0;background:#000;z-index:30;display:flex;align-items:center;justify-content:center}
#loading[hidden]{display:none}
#loading-stage{position:relative;aspect-ratio:4/3;width:min(100vw,calc(100vh*4/3));width:min(100vw,calc(100dvh*4/3))}
#loading-art{display:block;width:100%;height:100%}
#loading-stage.pixels img{image-rendering:pixelated}
/* OVL_PROGRESS_BAR's rectangle on the 640x480 wait picture: 308.5-596.5 by 438-462. */
#loading-bar{position:absolute;left:48.2031%;top:91.25%;width:45%;height:5%}
#loading-bar:not([src]){visibility:hidden}

/* The gear beside the statistics, clear of the chase timer that ends at canvas x 441. */
#race-settings{position:fixed;top:max(8px,var(--hud-top));right:calc(var(--hud-right) + var(--hud-unit)*135 + 8px);width:34px;height:34px;border-radius:8px;border:2px solid #cfe7a5;background:#16361bcc;color:#e9ffc9;font:18px Arial,sans-serif;padding:0;z-index:15;opacity:.65;pointer-events:auto}
#race-stop{position:fixed;top:max(8px,var(--hud-top));right:calc(var(--hud-right) + var(--hud-unit)*135 + 48px);width:54px;height:34px;border-radius:8px;z-index:15;opacity:.65}
.race-portrait.race-touch #race-settings{top:calc(var(--panel-top) + 4px);right:max(8px,var(--hud-right));opacity:1}
#settings-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,420px);max-height:90vh;overflow:auto;box-sizing:border-box;padding:14px 18px;background:#123015f2;border:2px solid #cfe7a5;border-radius:10px;color:#e9ffc9;font:bold 14px Arial,Helvetica,sans-serif;z-index:40}
#settings-panel[hidden]{display:none}
#settings-panel h2{margin:0 0 10px;font-size:18px}
#settings-panel label{display:flex;align-items:center;gap:10px;margin:10px 0;justify-content:space-between;flex-wrap:wrap}
#settings-panel label[hidden]{display:none}
#settings-panel input[type=range]{flex:1;min-width:120px}
#settings-panel output{min-width:44px;text-align:right}
#settings-panel select{flex:1;min-width:140px;font:inherit;background:#0b2a10;color:#e9ffc9;border:1px solid #cfe7a5;padding:4px}
#settings-panel .check{justify-content:flex-start}
#settings-panel button{margin-top:8px;width:100%;min-height:40px;font:inherit;background:#6fcf3f;color:#10220c;border:0;border-radius:6px}
#set-effective{margin:4px 0;font-weight:normal}
@media (max-height:420px){#settings-panel{padding:8px 18px}#settings-panel h2{margin:0 0 4px;font-size:15px}#settings-panel label{margin:5px 0}#settings-panel button{margin-top:4px;min-height:32px}#set-effective{margin:2px 0}}
@media (max-height:420px) and (min-width:560px){#settings-panel:not([hidden]){width:min(92vw,680px);display:grid;grid-template-columns:1fr 1fr;column-gap:18px;align-items:center}#settings-panel h2,#set-close{grid-column:1/-1}#settings-panel input[type=range]{min-width:60px}#settings-panel select{min-width:90px}#settings-panel label{flex-wrap:nowrap;white-space:nowrap}}
#fps{position:fixed;left:8px;top:50%;font:12px monospace;color:#fff;background:#0008;padding:2px 5px;z-index:12;pointer-events:none}
#fps[hidden]{display:none}