:root{--panel-bg: rgb(17 24 39 / 82%);--panel-border: rgb(255 255 255 / 12%);--accent-gas: rgb(34 160 84 / 88%);--accent-brake: rgb(200 60 55 / 88%);--touch-size: max(72px, 13vmin)}*{box-sizing:border-box}html,body,#renderCanvas{width:100%;height:100%;margin:0;overflow:hidden}body{background:#111827;color:#fff;font-family:system-ui,-apple-system,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none}#renderCanvas{display:block;touch-action:none;outline:none}#hud{position:fixed;top:calc(env(safe-area-inset-top) + .9rem);left:calc(env(safe-area-inset-left) + .9rem);display:flex;flex-direction:column;gap:.4rem;padding:.6rem .95rem;border:1px solid var(--panel-border);border-radius:.75rem;background:var(--panel-bg);box-shadow:0 .5rem 1.5rem #00000040;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.hud-row{display:flex;gap:.7rem;align-items:baseline}#hud strong{letter-spacing:.08em;font-size:.85rem;opacity:.8}.hud-gear{font-weight:700;font-size:.95rem;padding:0 .4rem;border-radius:.35rem;background:#ffffff1f}#speed{min-width:5rem;font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums}#speed.over-limit{color:#ff6b5e}.hud-sub{align-items:center;font-size:.8rem}.limit{display:inline-flex;align-items:center;gap:.35rem;padding:.1rem .4rem;background:#fff;color:#111;border-radius:.3rem;font-weight:700}.limit-num{font-variant-numeric:tabular-nums}.limit-unit{font-size:.6rem;font-weight:600;opacity:.7}.zone-label{color:#d7e34a;font-weight:700;letter-spacing:.04em}.signal-ind{margin-left:auto;display:inline-flex;gap:.5rem}.signal-ind .ind{opacity:.2;color:#ffb020;font-size:1rem}.signal-ind .ind.on{opacity:1;animation:blink .9s steps(1,end) infinite}@keyframes blink{50%{opacity:.15}}.stop-cue{align-self:flex-start;padding:.15rem .5rem;border-radius:.3rem;background:#b32217;color:#fff;font-weight:700;font-size:.8rem;letter-spacing:.03em}.stop-cue[hidden]{display:none}.coach{position:fixed;z-index:10;top:calc(env(safe-area-inset-top) + 4.4rem);left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:.3rem;padding:.5rem .9rem;border:1px solid var(--panel-border);border-radius:.75rem;background:var(--panel-bg);box-shadow:0 .5rem 1.5rem #00000040;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;width:min(84vw,28rem);text-align:left}.coach-top{display:flex;align-items:baseline;gap:.5rem}.lesson-title{font-weight:800;font-size:.95rem;margin-right:auto}.coach-label{font-size:.6rem;letter-spacing:.12em;opacity:.7}.coach-score{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums;color:#46d17f}.coach-score.warn{color:#ffcf5e}.coach-score.bad{color:#ff6b5e}.lesson-instruction{font-size:.72rem;line-height:1.3;opacity:.85}.lesson-objectives{display:flex;flex-direction:column;gap:.1rem;font-size:.72rem}.lesson-objectives .obj{opacity:.65}.lesson-objectives .obj.done{opacity:1;color:#46d17f}.coach-flash{min-height:.9rem;font-size:.72rem;font-weight:600;color:#ff8177;opacity:0;transition:opacity .2s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coach-flash.good{color:#46d17f}.coach-flash.show{opacity:1}.lesson-status{padding:.15rem .4rem;border-radius:.3rem;font-weight:800;font-size:.85rem;text-align:center}.lesson-status.passed{background:#1f7a45;color:#eafff2}.lesson-status.failed{background:#8f2018;color:#ffecea}.lesson-status[hidden]{display:none}#signalControls{left:50%;transform:translate(-50%);bottom:calc(env(safe-area-inset-bottom) + 1rem);gap:1.2rem}.signal-button{width:3.6rem;height:3.6rem;border-radius:.9rem;font-size:1.3rem;color:#ffb020}.signal-button.on{background:#ffb0204d;border-color:#ffb020b3;animation:blink .9s steps(1,end) infinite}.control-cluster{position:fixed;z-index:10;display:flex;gap:.85rem}#topControls{top:calc(env(safe-area-inset-top) + .9rem);right:calc(env(safe-area-inset-right) + .9rem)}#steeringControls{left:calc(env(safe-area-inset-left) + 1rem);bottom:calc(env(safe-area-inset-bottom) + 1rem)}#pedalControls{right:calc(env(safe-area-inset-right) + 1rem);bottom:calc(env(safe-area-inset-bottom) + 1rem)}button{font-family:inherit;color:#fff;border:1px solid var(--panel-border);background:var(--panel-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;transition:transform .05s ease,filter .05s ease,background .05s ease}#topControls button{padding:.7rem 1.1rem;min-height:2.9rem;border-radius:.7rem;font-size:.95rem;font-weight:600}.drive-button{width:var(--touch-size);height:var(--touch-size);border-radius:1rem;font-size:1.5rem;font-weight:700;display:flex;align-items:center;justify-content:center}.drive-button.pedal{--pedal: 0;font-size:1rem;letter-spacing:.06em;touch-action:none}.drive-button.gas{background:linear-gradient(to top,#ffffff52 calc(var(--pedal) * 100%),#fff0 calc(var(--pedal) * 100%)),var(--accent-gas)}.drive-button.brake{background:linear-gradient(to top,#ffffff52 calc(var(--pedal) * 100%),#fff0 calc(var(--pedal) * 100%)),var(--accent-brake)}.drive-button.gear{width:calc(var(--touch-size) * .62);height:var(--touch-size);border-radius:.8rem;font-size:1.35rem;letter-spacing:.04em;align-self:stretch;background:#28344ac7}.drive-button.gear.reverse{background:#c47814eb;border-color:#ffbe5ae5}.steer-wheel{width:max(104px,22vmin);height:max(104px,22vmin);border-radius:50%;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;will-change:transform}.steer-wheel.is-pressed{cursor:grabbing}.steer-wheel svg{display:block;width:100%;height:100%;filter:drop-shadow(0 .3rem .6rem rgb(0 0 0 / 35%))}.wheel-rim{fill:#111827d1;stroke:#ffffff8c;stroke-width:7}.wheel-hub{fill:#ffffff38}.wheel-spoke{stroke:#ffffff8c;stroke-width:7;stroke-linecap:round}.steer-wheel.is-pressed .wheel-rim,.steer-wheel.is-pressed .wheel-spoke{stroke:#78b4fff2}button:active,button.is-pressed{transform:scale(.94);filter:brightness(1.25)}@media(orientation:landscape){:root{--touch-size: max(76px, 12vmin)}}@media(orientation:portrait){:root{--touch-size: max(72px, 18vw)}#steeringControls,#pedalControls{bottom:calc(env(safe-area-inset-bottom) + 1.5rem)}}
