:root{color-scheme:dark;font-family:Inter,Segoe UI,system-ui,sans-serif;background:#141b20;color:#edf0e9;font-synthesis:none}
.speed-panel{position:absolute;top:78px;left:22px;width:148px;color:#213d43;pointer-events:none}.speed-panel label{font-size:10px;letter-spacing:1px;font-weight:800}.speed-panel small{font-size:8px;opacity:.7;margin-left:5px}.speed-panel strong{font-size:18px;font-variant-numeric:tabular-nums}.speed-panel span{font-size:10px}.speed-panel meter{display:block;width:100%;height:12px}.speed-panel meter::-webkit-meter-bar{background:#6b918c55;border:0}.speed-panel meter::-webkit-meter-optimum-value{background:#305e63}
*{box-sizing:border-box}
body{margin:0}
header,main{max-width:1440px;margin:auto;padding:24px 36px}
header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #344047}
.eyebrow{font-size:11px;letter-spacing:2.2px;color:#b1c3c3;font-weight:700}
h1{font-size:30px;letter-spacing:-1px;margin:9px 0 0}
h1 span{font-size:13px;letter-spacing:0;color:#9facb3;font-weight:400;margin-left:20px}
h1 .level-name{font-size:inherit;letter-spacing:inherit;color:inherit;font-weight:inherit;margin:0}
.level-note{margin:6px 0 0;font-size:12px;color:#d9b98a;min-height:1.4em;max-width:640px}
.level-picker{display:flex;align-items:center;gap:8px;font-size:13px;color:#aebfc4}
.level-picker select{background:#223139;border:1px solid #4a5960;border-radius:7px;color:#edf0e9;font:inherit;padding:8px 10px;max-width:220px}
.actions{display:flex;gap:10px}
button{background:#223139;border:1px solid #4a5960;border-radius:7px;color:inherit;font:inherit;font-size:13px;font-weight:600;padding:11px 16px;cursor:pointer;touch-action:none}
button:hover{background:#344851}
button:focus-visible,summary:focus-visible{outline:3px solid #f8cc75;outline-offset:3px}
button[aria-pressed=true]{border-color:#ffcf75;background:#4d4432}
kbd{margin-left:7px;font-size:11px;color:#bec7c9}
main{padding-top:22px}
.stage{position:relative;border:1px solid #4b5c62;border-radius:12px;overflow:hidden;background:#b9d5cd}
canvas{display:block;width:100%;height:min(63vh,650px);min-height:340px}
.hud{position:absolute;top:20px;left:22px;display:flex;gap:26px;color:#213d43;pointer-events:none}
.hud span{display:block;font-size:10px;letter-spacing:1.5px;font-weight:800}
.hud strong{font-size:24px;font-variant-numeric:tabular-nums}
.view-controls{position:absolute;top:18px;right:18px;display:flex;gap:6px}
.view-controls button{font-size:11px;background:#24424be6;padding:9px 12px}
#message{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);background:#14272eea;border:1px solid #637c7b;padding:12px 22px;border-radius:8px;text-align:center;max-width:80%;font-size:14px;pointer-events:none}
#message:empty{display:none}
.controls{display:flex;align-items:center;gap:24px;padding:22px 0}
.drive{display:flex;gap:9px}
.drive button{width:118px;font-size:26px;padding:7px 18px;background:#e7ba6b;color:#25363a;border:1px solid #f4d9a6;user-select:none}
.drive button.active{background:#ffe1a4;transform:translateY(2px)}
.drive span{font-size:9px;letter-spacing:1px;display:block;padding:2px 0 5px}
.controls p{font-size:13px;color:#aebfc4;line-height:1.8;margin:0}
.controls b{font-weight:500;color:#e6dbc3}
#export{margin-left:auto;background:transparent;font-size:12px}
details{border-top:1px solid #344047;border-bottom:1px solid #344047;padding:16px 0;font-size:13px;color:#aebfc4;line-height:1.7}
summary{cursor:pointer;color:#e2e7e7}
details p{max-width:1000px}
footer{display:flex;justify-content:space-between;padding:18px 0;color:#83979d;font-size:9px;letter-spacing:1.2px}
@media(max-width:760px){header,main{padding:18px}
h1 span{display:block;margin:5px 0 0}
header{flex-wrap:wrap;gap:12px}.actions{flex-wrap:wrap}
.actions button{padding:9px}
canvas{height:57vh}
.hud{gap:16px;left:15px;top:15px}
.hud strong{font-size:19px}
.view-controls{top:auto;bottom:12px;right:12px}
.controls{gap:12px;flex-wrap:wrap}
.controls p{font-size:11px}
.drive button{width:90px}
#export{margin-left:0}
footer{gap:15px;line-height:1.6}
#message{bottom:57px;width:85%}
}

.loadout{border:1px solid #344047;border-radius:7px;margin:0 0 18px;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;font-size:13px;color:#aebfc4}
.loadout legend{padding:0 6px;color:#e6dbc3;font-weight:600}
.loadout legend small{font-weight:400;color:#8a9ca1;margin-left:6px}
.loadout select{background:#223139;border:1px solid #4a5960;border-radius:7px;color:inherit;font:inherit;padding:7px 10px;margin-left:6px}
.loadout #upgrades{display:flex;flex-wrap:wrap;gap:6px 16px}
.loadout #upgrades label{display:flex;align-items:center;gap:6px;cursor:pointer}
.loadout p{flex-basis:100%;margin:0;font-size:12px;min-height:1.5em}
/* Device views keep the original screen shape, limited by the window height. */
canvas[data-device=ipad]{aspect-ratio:4/3;width:min(100%,calc(min(75vh,720px)*4/3));height:auto;min-height:0;margin:0 auto}
canvas[data-device=wide]{aspect-ratio:16/9;width:min(100%,calc(min(75vh,720px)*16/9));height:auto;min-height:0;margin:0 auto}
/* Fit window: the full width, as tall as 16:9 allows within 80% of the window, never wider than ~21:9. */
canvas[data-device=fit]{width:100%;aspect-ratio:16/9;height:auto;max-height:80vh;max-width:calc(80vh*2.33);min-height:0;margin:0 auto}
canvas[data-device=iphone]{aspect-ratio:3/2;width:min(100%,calc(min(70vh,650px)*3/2));height:auto;min-height:0;margin:0 auto}
.loadout .extra-powers{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.loadout .extra-powers>span small{color:#8a9ca1}

/* Levels.plist medal targets, scored like TrialSession::checkTarget. */
.medals{border:1px solid #344047;border-radius:7px;margin:0 0 18px;padding:10px 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.medals h2{margin:0;font-size:13px;font-weight:600;color:#e6dbc3}
.medals ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:#aebfc4}
.medals li::before{content:'○';display:inline-block;width:1.4em;color:#8a9ca1}
.medals li.passed{color:#e6dbc3}
.medals li.passed::before{content:'★';color:#f2c14e}
.medals li.failed{color:#7d8b8f;text-decoration:line-through}
.medals li.failed::before{content:'✕';color:#b5574a}
.medals li.no-targets{font-style:italic;color:#7d8b8f}
.medals li.no-targets::before{content:none}

/* The original TrialHUD draws the timer, boost meter and controls on the canvas. */
.stage .hud,.stage .speed-panel{display:none}
#world{touch-action:none}
.controls .view-controls{position:static;margin-left:auto}

/* Game only (the default; `?dev` shows the recovery lab around it): the canvas fills the viewport
   and every lab element is hidden. The canvas HUD carries the drive, pause and restart controls. */
body.game-only{background:#b9d5cd;overflow:hidden}
body.game-only header,body.game-only .controls,body.game-only .medals,body.game-only .loadout,body.game-only details,body.game-only footer,
body.game-only .hud,body.game-only .speed-panel,body.game-only #message{display:none}
body.game-only main{max-width:none;padding:0;margin:0}
/* The stage is pinned to the visible viewport (no 100vw/100dvh: browsers without dvh dropped the
   height and the canvas fell back to its intrinsic 2:1 ratio, taller than a landscape phone, and a
   page that can scroll or rubber-band shifts it off screen). With viewport-fit=cover the stage pads
   itself out of the notch, rounded corners and home indicator, so the canvas, and every control
   drawn on it, sits inside the safe area; the padding shows the stage's backdrop colour. */
body.game-only{position:fixed;inset:0;overscroll-behavior:none;touch-action:none;-webkit-text-size-adjust:100%}
body.game-only .stage{position:fixed;inset:0;height:auto;border:0;border-radius:0;box-sizing:border-box;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
body.game-only canvas,body.game-only canvas[data-device]{width:100%;height:100%;max-width:none;max-height:none;min-height:0;aspect-ratio:auto;margin:0}