:root{color:#f7fbfa;font-family:Inter,system-ui,sans-serif;background:#b8d4da;font-synthesis:none}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}#app{position:relative;background:#bcd5d8;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#game{display:block;width:100%;height:100%}.topbar{position:absolute;inset:0 0 auto;height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 38px;background:linear-gradient(180deg,#081c26f2,#081c26c7);border-bottom:1px solid rgba(255,255,255,.22);box-shadow:0 8px 30px #0619212e}.brand{display:flex;align-items:center;gap:12px;font:700 19px/1 Barlow Condensed,sans-serif;letter-spacing:.12em}.brand b{color:#ef3d32}.brand-mark{display:grid;place-items:center;width:34px;height:34px;color:#fff;background:#e84436;clip-path:polygon(50% 0,100% 100%,0 100%);font-size:12px;padding-top:9px}.event{text-align:center;font:700 18px/1 Barlow Condensed,sans-serif;letter-spacing:.16em}.event small{display:block;color:#9db1b8;font:600 9px/1 Inter,sans-serif;letter-spacing:.23em;margin-top:8px}button{color:inherit;font:700 11px/1 Inter,sans-serif;letter-spacing:.15em;cursor:pointer}.restart{justify-self:end;border:1px solid rgba(255,255,255,.28);background:#ffffff0f;border-radius:3px;padding:11px 14px}.restart:hover{background:#ffffff29}.restart span{margin-right:7px;font-size:16px;vertical-align:-1px}.telemetry{position:absolute;top:98px;left:38px;display:flex;align-items:center;gap:18px;padding:14px 20px;background:#091f28e8;border-left:3px solid #ef4437;box-shadow:0 10px 25px #0a222a33}.metric span{display:block;color:#9aadb3;font-size:8px;letter-spacing:.2em;margin-bottom:5px}.metric strong{font:700 25px/1 Barlow Condensed,monospace;letter-spacing:.06em}.metric strong em{font-style:normal;color:#fff}.metric strong i{color:#7d9299;font-style:normal;font-size:16px}.rule{width:1px;height:30px;background:#ffffff29}.boost-meter{width:112px}.boost-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}.boost-label span{margin:0;color:#9aadb3;font-size:8px;letter-spacing:.2em}.boost-label strong{color:#d8e5e5;font:700 11px/1 Barlow Condensed,monospace;letter-spacing:.08em}.boost-track{height:9px;overflow:hidden;padding:2px;border:1px solid #607780;background:#162f39;box-shadow:inset 0 1px 3px #00000080}.boost-fill{width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:repeating-linear-gradient(90deg,#e6cf3d 0 8px,#bda923 8px 10px);box-shadow:0 0 8px #e6cf3d4d;transition:transform .12s linear}.boost-meter.active .boost-label strong{color:#fff176}.boost-meter.active .boost-fill{background:#fff176;box-shadow:0 0 10px #fff176cc}.status-card{position:absolute;left:50%;bottom:8%;transform:translate(-50%);width:min(440px,calc(100% - 32px));text-align:center;padding:25px 34px 28px;background:#071d27ed;border-top:3px solid #e8483c;box-shadow:0 18px 55px #09222b61;transition:opacity .25s,transform .25s}.status-card.hidden{opacity:0;transform:translate(-50%,20px);pointer-events:none}.status-card p{margin:0 0 10px;color:#9db0b7;font:700 9px/1 Inter;letter-spacing:.25em}.status-card h1{margin:0;font:800 38px/.88 Barlow Condensed;letter-spacing:.045em}.status-card h1 em{color:#ef4b3e;font-style:italic}.controls{display:flex;justify-content:center;gap:25px;margin:20px 0;color:#9dafb5;font-size:8px;letter-spacing:.12em}.touch-help,.touch-controls{display:none}kbd{display:inline-grid;place-items:center;min-width:22px;height:20px;margin-right:3px;color:#fff;font:700 11px Inter;border:1px solid #657a82;border-radius:2px;background:#243f49;box-shadow:0 2px #122831}#start{border:0;padding:14px 22px;background:#e74538;min-width:190px;box-shadow:0 4px #9f2b24}#start:hover{background:#f15347}#start span{float:right;font-size:19px;margin-top:-4px}.gate-callout{position:absolute;left:50%;bottom:26px;transform:translate(-50%);color:#70858c;font:700 9px Inter;letter-spacing:.18em;opacity:0;transition:opacity .3s}.gate-callout.visible{opacity:1}.gate-callout span{color:#29444d}.touch-controls{position:absolute;z-index:2;inset:auto 18px max(18px,env(safe-area-inset-bottom));justify-content:space-between;align-items:end;pointer-events:none}.touch-steering{display:flex;gap:12px}.touch-control{width:72px;height:72px;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:50%;color:#fff;background:#08232dc7;box-shadow:0 5px #05171eb8,0 10px 25px #05171e38;line-height:1;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s,background .08s;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.touch-steer{font-size:31px}.touch-boost{display:grid;place-content:center;gap:3px;color:#fff176;border-color:#fff176a6;font-size:24px}.touch-boost small{font:800 8px/1 Inter,sans-serif;letter-spacing:.12em}.touch-control[aria-pressed=true]{color:#fff;background:#e74538;box-shadow:0 2px #9f2b24,0 6px 18px #05171e40;transform:translateY(3px)}.touch-control:focus-visible{outline:3px solid #fff;outline-offset:4px}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px #0b2c3447}@media(max-width:620px){.topbar{padding:0 15px;height:64px}.event{display:none}.topbar{grid-template-columns:1fr 1fr}.telemetry{top:78px;left:15px;right:15px;gap:10px;padding:11px 12px}.metric strong{font-size:20px}.metric strong i{font-size:13px}.boost-meter{width:auto;min-width:72px;flex:1}.status-card{bottom:4%}.brand{font-size:16px}}@media(any-pointer:coarse){.keyboard-help{display:none}.touch-help{display:inline}.touch-controls{display:grid;grid-template-columns:72px 1fr 72px;left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right))}.touch-steering{display:contents}.touch-steer-left{grid-column:1}.touch-boost{grid-column:2;justify-self:center}.touch-steer-right{grid-column:3}.racing .touch-control{opacity:1;pointer-events:auto;transform:translateY(0)}.gate-callout{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 94px)}}
