:root{color-scheme:light;--ink:#163d43;--teal:#087d82;--cream:#fff6e3;--coral:#ca6c53;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0;background:#087d82;color:var(--ink);overscroll-behavior:none}body{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:700 12px Arial;min-height:44px;min-width:44px;border:1px solid #16494a30;background:var(--cream);border-radius:12px;color:var(--ink);padding:10px 13px;cursor:pointer;touch-action:none}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #ffb54b;outline-offset:3px}button:disabled{opacity:.5}a{color:inherit}#app{height:100dvh;height:100vh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}@supports(height:100dvh){#app{height:100dvh}}header{display:flex;align-items:center;justify-content:space-between;min-height:62px;padding:7px clamp(12px,3vw,40px);background:var(--cream);gap:8px}header a{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-size:13px;letter-spacing:1.5px;font-weight:900}.brand-thin{font-weight:400}.header-actions{display:flex;gap:7px}#pause{font-size:17px}.hud{position:relative;padding:12px clamp(14px,3vw,40px) 15px;display:flex;justify-content:space-between;gap:8px;background:#f3e6cb;min-height:70px}.hud>div:first-child{display:flex;flex-direction:column;gap:4px;min-width:0}#course{font-size:9px;letter-spacing:2px;font-weight:900}#objective{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metrics{display:flex;align-items:center;gap:13px;flex-shrink:0;font-size:13px}#hull{color:#a53e33;letter-spacing:2px}#progress{position:absolute;bottom:0;left:0;width:100%;height:4px;border:0;background:#d5c8ab}#progress::-webkit-progress-bar{background:#d5c8ab}#progress::-webkit-progress-value{background:var(--coral)}#progress::-moz-progress-bar{background:var(--coral)}#scene{position:relative;flex:1;min-height:0;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}#speed{position:absolute;bottom:18px;left:24px;font-size:36px;font-weight:900;color:var(--cream);text-shadow:0 2px 5px #00383b88;font-variant-numeric:tabular-nums}#speed small{font-size:9px;letter-spacing:1px}.scene-label{position:absolute;right:22px;bottom:22px;writing-mode:vertical-rl;font-size:9px;letter-spacing:2px;color:#fff3d3b0;pointer-events:none}.scene-label span{margin-top:30px;opacity:.6}#checkpoint-note{position:absolute;left:50%;top:18px;transform:translateX(-50%);background:#153e43e8;color:#fff6e3;padding:9px 16px;border-radius:30px;font-size:12px;white-space:nowrap}#checkpoint-note:empty{display:none}.controls{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--cream);padding:10px clamp(12px,3vw,40px);min-height:100px}.steering,.pedals{display:flex;align-items:center;gap:7px}#joystick{width:76px;height:76px;position:relative;border-radius:50%;background:#dae8dc;border:1px solid #087d8255;touch-action:none;flex-shrink:0}#stick{width:46px;height:46px;position:absolute;left:14px;top:14px;display:grid;place-items:center;background:var(--teal);color:white;border-radius:50%;font-weight:900;font-size:22px;pointer-events:none}#left,#right{font-size:19px;padding:9px}#assist{font-size:11px;padding:8px;max-width:75px;background:#e8edda}#assist[aria-pressed=true]{background:#087d82;color:white}#brake{background:#e9d9c0}#boost{background:#ca6c53;color:#fff8e9}.pedals button{min-height:58px;min-width:64px}.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:14px;background:#063a4599;backdrop-filter:blur(7px);z-index:5}.overlay[hidden]{display:none}.card{background:var(--cream);border:1px solid #fff9ed;border-radius:24px;width:min(430px,100%);max-height:calc(100dvh - 28px);overflow:auto;padding:25px 30px;text-align:center;box-shadow:0 24px 90px #00383b66}.eyebrow{font-size:10px;letter-spacing:2.8px;font-weight:900;color:#897253}h1{font-size:clamp(36px,7vh,58px);letter-spacing:-2px;line-height:.95;margin:14px 0}h1 em{color:var(--coral);font-family:Georgia,serif;font-weight:400}#dialog-copy p{font-size:13px;line-height:1.5;margin:8px 0}#ready-art{height:110px;margin:15px -12px 12px;background:#087d82 url('../artwork/dcbnest-play-banner.svg') center 48%/cover;border-radius:12px}#event-label{font-size:11px;font-weight:700;letter-spacing:.5px;margin:12px 0}.card button{width:100%;margin-top:7px}.card .primary{background:var(--teal);color:white;font-size:14px;min-height:50px}.text-button{border:0;background:transparent;color:#8e5849}.portal-link{display:block;margin-top:12px;min-height:44px;font-size:11px;padding:15px 0}.card.help h1,.card.result h1,.card.paused h1,.card.confirm h1{font-size:34px;letter-spacing:-1px}.card.help #dialog-copy{text-align:left}.card.help #dialog-copy p{padding-bottom:7px}.card:not(.ready) #ready-art{display:none}body[data-phase=playing] #pause{background:var(--ink);color:var(--cream)}@media(max-width:600px){header{min-height:56px;padding:5px 12px}header a{font-size:10px;letter-spacing:1px;gap:5px}.hud{padding:10px 12px 13px;min-height:68px}#course{font-size:8px;letter-spacing:1px}#objective{font-size:12px}.metrics{flex-direction:column;gap:2px;font-size:11px;align-items:flex-end}#hull{font-size:10px}.controls{padding:8px;gap:4px;min-height:94px}.steering{gap:3px}#joystick{width:64px;height:64px}#stick{left:8px;top:8px}.pedals{gap:4px}.pedals button{min-width:48px;font-size:10px;padding:6px}#assist{max-width:57px;font-size:10px;padding:5px}.scene-label{right:9px;font-size:8px}#speed{left:14px;bottom:12px;font-size:28px}.card{padding:21px 24px}#ready-art{height:90px}}@media(max-width:360px){#joystick{display:none}.controls{min-height:78px}#assist{max-width:70px}.pedals button{min-width:59px}.steering{gap:5px}}@media(max-height:480px){header{min-height:48px;padding-top:2px;padding-bottom:2px}.hud{min-height:48px;padding:5px 18px 8px}#objective{font-size:12px}.metrics{flex-direction:row}.controls{min-height:58px;padding:5px 15px}#joystick{display:none}.pedals button{min-height:44px}#speed{font-size:24px}.card{padding:16px 25px}#ready-art{height:75px}h1{font-size:38px}.card.ready{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;text-align:left;max-width:650px;width:650px}.ready .eyebrow,.ready h1,.ready #dialog-copy{grid-column:1}.ready #ready-art{grid-column:2;grid-row:1/4;height:135px;margin:0}.ready #event-label{grid-column:1;margin:4px 0}.ready #primary{grid-column:2;grid-row:4}.ready #help{grid-column:2}.ready #fresh{grid-column:1}.ready .portal-link{grid-column:1/3;text-align:center;margin:0;padding:10px;min-height:44px}.card.help #dialog-copy p{font-size:12px;margin:4px 0;padding:0}}