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}

/* Network races, source/net/: the lobby over the main menu, standings and name tags in a race. */
#mp{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-start;justify-content:center;overflow:auto;background:#000a;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));font:15px/1.35 Arial,Helvetica,sans-serif;color:#e8f4d8}
#mp[hidden]{display:none}
#mp .mp-panel{width:min(760px,100%);margin:auto;background:linear-gradient(#1b2a12f2,#0b1208f2);border:2px solid #76fa00;border-radius:10px;box-shadow:0 0 24px #76fa0055;padding:14px 18px 16px}
#mp header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
#mp h1{margin:0;font-size:26px;letter-spacing:.04em;color:#ffd200;text-shadow:2px 2px 0 #000;font-style:italic;text-transform:uppercase}
#mp h2{margin:4px 0 8px;font-size:18px;color:#76fa00}
#mp h3{margin:6px 0;font-size:16px;color:#ffd200}
#mp button,#mp select,#mp input{font:inherit;border-radius:6px;border:1px solid #76fa0099;background:#0d1a08;color:#e8f4d8;padding:7px 11px;min-height:36px}
#mp input,#mp select{min-width:0}
#mp button{cursor:pointer;background:#24401a}
#mp button:hover:not(:disabled),#mp button:focus-visible{background:#335c22;outline:2px solid #ffd200;outline-offset:1px}
#mp button:disabled{opacity:.45;cursor:default}
#mp .mp-primary{background:#ffd200;color:#1a1a00;border-color:#ffd200;font-weight:bold}
#mp .mp-primary:hover:not(:disabled),#mp .mp-primary:focus-visible{background:#ffe45c}
#mp .mp-field{display:flex;flex-direction:column;gap:3px;margin:6px 0;flex:1}
#mp .mp-field span{font-size:13px;color:#b8d89a}
#mp .mp-box{border:1px solid #76fa0044;border-radius:8px;padding:8px 12px 12px;margin:12px 0;background:#0006}
#mp .mp-row{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
#mp .mp-row input{flex:1}
#mp .mp-rooms{list-style:none;margin:0 0 10px;padding:0;max-height:40vh;overflow:auto}
#mp .mp-rooms li{display:flex;align-items:center;gap:10px;padding:6px 4px;border-bottom:1px solid #76fa0022}
#mp .mp-room-name{flex:1;font-weight:bold;overflow-wrap:anywhere}
#mp .mp-room-info{color:#b8d89a;font-size:13px}
#mp .mp-empty{color:#b8d89a;font-style:italic}
#mp .mp-error{background:#5a1010;border:1px solid #ff6a6a;border-radius:6px;padding:7px 10px;margin:6px 0}
#mp .mp-error[hidden]{display:none}
#mp .mp-settings{display:flex;gap:10px;flex-wrap:wrap}
#mp .mp-settings[hidden],#mp .mp-settings-text[hidden]{display:none}
#mp .mp-settings-text{color:#ffd200;margin:4px 0 8px}
#mp table{width:100%;border-collapse:collapse;margin:8px 0}
#mp th{text-align:left;font-size:12px;color:#b8d89a;font-weight:normal;border-bottom:1px solid #76fa0055;padding:3px 4px}
#mp td{padding:5px 4px;border-bottom:1px solid #76fa0022;overflow-wrap:anywhere}
#mp tr.mine td{color:#ffd200}
#mp .mp-kick{min-height:28px;padding:2px 8px;font-size:13px}
#mp .mp-results ol{margin:0;padding-left:22px}
#mp .mp-results li span{margin-right:10px}
#mp .mp-results li span+span{color:#b8d89a;font-size:13px}
#mp .mp-results[hidden],#mp section[hidden],#mp button[hidden]{display:none}
#mp .mp-status{color:#b8d89a;margin:6px 0}
#mp .mp-actions{justify-content:flex-end;margin-top:8px}
#mp .mp-note{font-size:12px;color:#8fa87a;margin:12px 0 0}
@media (max-width:520px){#mp{font-size:14px;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}#mp .mp-panel{padding:10px}#mp th:nth-child(5),#mp td:nth-child(5){display:none}#mp h1{font-size:21px}}
#loading-note{position:absolute;left:0;right:0;top:80%;margin:0;text-align:center;font:bold 18px Arial,Helvetica,sans-serif;color:#ffd200;text-shadow:2px 2px 0 #000}
#loading-note[hidden]{display:none}
#net-hud{position:fixed;inset:0;pointer-events:none;z-index:11;font:bold 14px Arial,Helvetica,sans-serif;color:#fff;text-shadow:1px 1px 0 #000,-1px 1px 0 #000}
#net-hud[hidden]{display:none}
#net-hud .net-standings{position:absolute;left:50%;top:max(6px,env(safe-area-inset-top));transform:translateX(-50%);margin:0;padding:3px 8px;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;max-width:min(70vw,640px);background:#0007;border-radius:6px}
#net-hud .net-standings li{white-space:nowrap}
#net-hud .net-standings b{color:#76fa00;margin-right:4px}
#net-hud .net-standings i{font-style:normal;color:#ffd200;margin-left:4px}
#net-hud .net-standings li.mine span{color:#ffd200}
#net-hud .net-standings li.gone{opacity:.45}
#net-hud .net-tag{position:absolute;left:0;top:0;padding:1px 6px;border-radius:4px;background:#0008;white-space:nowrap;will-change:transform}
#net-hud .net-tag[hidden]{display:none}
.race-results #net-hud .net-tags{display:none}
#mp input{-webkit-user-select:text;user-select:text}