html,body{margin:0;height:100%;background:#0e0f13;color:#e6e6e6;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";overflow:hidden}#mobile-lock-screen{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(145deg,#0e0f13,#1a1c22,#0e0f13);z-index:10000;flex-direction:column;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;text-align:center}#mobile-lock-screen.visible{display:flex}.lock-icon{width:80px;height:80px;margin-bottom:24px;opacity:.9}.lock-icon svg{width:100%;height:100%}.lock-title{font-size:24px;font-weight:600;color:#fff;margin-bottom:12px;letter-spacing:-.5px}.lock-subtitle{font-size:16px;color:#9bd;margin-bottom:24px}.lock-description{font-size:14px;color:#888;line-height:1.6;max-width:320px;margin-bottom:32px}.lock-features{display:flex;flex-direction:column;gap:12px;margin-bottom:32px;text-align:left}.lock-feature{display:flex;align-items:center;gap:12px;font-size:13px;color:#aaa}.lock-feature-icon{width:20px;height:20px;background:#9bbbdd26;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.lock-feature-icon svg{width:12px;height:12px;opacity:.8}.lock-buttons{display:flex;flex-direction:column;gap:12px;width:100%;max-width:280px}.lock-btn{padding:14px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;border:none;font-family:inherit}.lock-btn-primary{background:#9bbbdd26;color:#9bd;border:1px solid rgba(155,187,221,.3)}.lock-btn-primary:hover{background:#9bbbdd40}.lock-btn-secondary{background:transparent;color:#666;border:1px solid rgba(255,255,255,.1)}.lock-btn-secondary:hover{color:#888;border-color:#fff3}.lock-credit{position:absolute;bottom:24px;font-size:12px;color:#555}.lock-credit a{color:#777;text-decoration:none}.lock-credit a:hover{color:#9bd}#app-container{display:flex;width:100%;height:100%;overflow:hidden}#canvas-container{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}#canvas-container canvas{display:block;width:100%;height:100%}canvas.drop-target{outline:1px solid transparent;transition:outline-color .2s ease}canvas.drop-target.drag-over{outline:2px dashed rgba(155,187,221,.85)}#panel-container{width:280px;min-width:280px;height:100%;overflow-y:auto;overflow-x:hidden;background:#14161cf2;border-left:1px solid rgba(255,255,255,.08);scrollbar-width:thin;scrollbar-color:#444 #1a1c22}#panel-container::-webkit-scrollbar{width:8px}#panel-container::-webkit-scrollbar-track{background:#1a1c22}#panel-container::-webkit-scrollbar-thumb{background:#444;border-radius:4px}#panel-container::-webkit-scrollbar-thumb:hover{background:#555}#panel-container .tp-dfwv{width:100%!important;position:relative!important;right:auto!important;top:auto!important}#controlsBar{position:fixed;bottom:0;left:0;right:280px;font-size:11px;color:#ff9000;background:#000;padding:4px 12px;z-index:100;display:flex;align-items:center;gap:16px;font-weight:500}#controlsBar .controls{display:flex;gap:16px;flex:1}#controlsBar .control-item{white-space:nowrap}#controlsBar .control-item kbd{background:#ff900033;padding:1px 4px;border-radius:2px;font-family:inherit;font-weight:600}#controlsBar .credit{margin-left:auto;white-space:nowrap;font-weight:500}#controlsBar a{color:#ff9000;text-decoration:none;font-weight:600;background:#ff900033;padding:1px 4px;border-radius:2px}#controlsBar a:hover{background:#ff900059}a,a:visited{color:#9bd;text-decoration:none}a:hover{text-decoration:underline}@media (max-width: 768px){#panel-container{display:none}#controlsBar{right:0;font-size:10px;padding:6px 10px;flex-direction:column;gap:4px}#controlsBar .controls{display:none}#controlsBar .mobile-hint{display:block}#controlsBar .credit{margin-left:0}}@media (max-width: 480px){#controlsBar{font-size:9px;padding:4px 8px}}#controlsBar .mobile-hint{display:none}#dev-panel-toggle{cursor:pointer;display:none}#dev-panel-toggle .arrow{display:inline-block;transition:transform .2s ease;font-size:9px}#dev-panel-toggle.panel-open .arrow{transform:rotate(180deg)}#panel-container{transition:width .3s ease,min-width .3s ease,opacity .3s ease}#panel-container.hidden{width:0;min-width:0;opacity:0;pointer-events:none;overflow:hidden}#controlsBar.panel-hidden{right:0}.curved-gauge{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:280px;height:120px;pointer-events:none;z-index:100}.curved-gauge svg{width:100%;height:100%;overflow:visible}.gauge-track{fill:none;stroke:#ff900033;stroke-width:2}.gauge-arc{fill:none;stroke:#ff900080;stroke-width:2;stroke-linecap:round}.gauge-tick{stroke:#ff9000;stroke-width:1;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(255,144,0,.8))}.gauge-value{font-size:10px;fill:#ff9000;font-weight:600;font-family:SF Mono,Fira Code,Consolas,monospace}.gauge-value.left{text-anchor:end}.gauge-value.right{text-anchor:start}.gauge-label{font-size:8px;fill:#ff900099;font-weight:500;font-family:SF Mono,Fira Code,Consolas,monospace;text-transform:uppercase;letter-spacing:.5px}.gauge-label.left{text-anchor:end}.gauge-label.right{text-anchor:start}.gauge-scale line{stroke:#ff900040;stroke-width:1}.gauge-scale line.major{stroke:#ff900066;stroke-width:1.5}.gauge-tick,.gauge-value{transition:all .1s ease-out}@media (max-width: 768px){.curved-gauge{width:220px;height:100px}}.flight-status-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:150;pointer-events:none;opacity:0;transition:opacity .3s ease}.flight-status-overlay.visible{opacity:1}#landed-overlay{color:#4ade80;text-shadow:0 0 20px rgba(74,222,128,.5)}#landed-overlay .status-text{font-size:24px;font-weight:600;letter-spacing:2px;margin-bottom:8px}#landed-overlay .status-hint{font-size:14px;color:#4ade80cc;letter-spacing:1px}#landed-overlay .status-hint kbd{background:#4ade8033;padding:2px 8px;border-radius:4px;border:1px solid rgba(74,222,128,.4);font-family:inherit;font-weight:600}#crash-overlay{color:#f44;text-shadow:0 0 30px rgba(255,68,68,.7)}#crash-overlay .status-text{font-size:32px;font-weight:700;letter-spacing:4px;margin-bottom:12px;animation:crash-shake .1s ease-in-out infinite}#crash-overlay .status-hint{font-size:14px;color:#f44c;letter-spacing:1px}#crash-overlay .status-hint kbd{background:#f443;padding:2px 8px;border-radius:4px;border:1px solid rgba(255,68,68,.4);font-family:inherit;font-weight:600}@keyframes crash-shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}#mobile-hud{display:none;position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:90}#mobile-hud.visible{display:block}#throttle-zone-up,#throttle-zone-down{position:absolute;left:0;width:80px;pointer-events:auto;display:flex;align-items:center;justify-content:center;transition:background .15s ease}#throttle-zone-up{top:0;height:45%;background:linear-gradient(180deg,rgba(74,222,128,.08) 0%,transparent 100%);border-bottom:1px solid rgba(74,222,128,.15)}#throttle-zone-down{bottom:0;height:45%;background:linear-gradient(0deg,rgba(255,144,0,.08) 0%,transparent 100%);border-top:1px solid rgba(255,144,0,.15)}#throttle-zone-up.active{background:linear-gradient(180deg,rgba(74,222,128,.25) 0%,transparent 100%)}#throttle-zone-down.active{background:linear-gradient(0deg,rgba(255,144,0,.25) 0%,transparent 100%)}.throttle-icon{opacity:.4;transition:opacity .15s ease}.active .throttle-icon{opacity:.9}.throttle-icon svg{width:32px;height:32px}#strafe-zone-left,#strafe-zone-right{position:absolute;right:0;width:80px;pointer-events:auto;display:flex;align-items:center;justify-content:center;transition:background .15s ease}#strafe-zone-left{top:0;height:45%;background:linear-gradient(180deg,rgba(155,187,221,.08) 0%,transparent 100%);border-bottom:1px solid rgba(155,187,221,.15)}#strafe-zone-right{bottom:0;height:45%;background:linear-gradient(0deg,rgba(155,187,221,.08) 0%,transparent 100%);border-top:1px solid rgba(155,187,221,.15)}#strafe-zone-left.active{background:linear-gradient(180deg,rgba(155,187,221,.25) 0%,transparent 100%)}#strafe-zone-right.active{background:linear-gradient(0deg,rgba(155,187,221,.25) 0%,transparent 100%)}.strafe-icon{opacity:.4;transition:opacity .15s ease}.active .strafe-icon{opacity:.9}.strafe-icon svg{width:28px;height:28px}#calibrate-btn{position:absolute;top:12px;left:50%;transform:translate(-50%);padding:8px 16px;background:#0009;border:1px solid rgba(155,187,221,.3);border-radius:20px;color:#9bd;font-size:12px;font-weight:500;pointer-events:auto;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px}#calibrate-btn:active{background:#9bbbdd33;transform:translate(-50%) scale(.95)}#calibrate-btn svg{width:14px;height:14px}#calibrate-btn.calibrating{background:#4ade8033;border-color:#4ade8080;color:#4ade80}#gyro-status{position:absolute;bottom:70px;left:50%;transform:translate(-50%);padding:8px 14px;background:#0009;border-radius:12px;font-size:12px;font-family:SF Mono,Fira Code,monospace;color:#666;display:flex;align-items:center;gap:8px;white-space:nowrap}#gyro-status.active{color:#4ade80}#gyro-status .dot{width:8px;height:8px;border-radius:50%;background:#444;flex-shrink:0}#gyro-status.active .dot{background:#4ade80;box-shadow:0 0 8px #4ade80;animation:pulse-dot 1.5s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.5}}#mobile-sonar-hint{position:absolute;bottom:100px;left:50%;transform:translate(-50%);padding:8px 16px;background:#0006;border-radius:16px;font-size:11px;color:#888;white-space:nowrap}@media (max-width: 768px){#landed-overlay .status-hint,#crash-overlay .status-hint{font-size:16px;padding:12px 24px;background:#0006;border-radius:8px;margin-top:8px}#landed-overlay .status-hint kbd,#crash-overlay .status-hint kbd{display:none}#landed-overlay .status-hint:after{content:"Tap throttle ▲ to launch"}#crash-overlay .status-hint:after{content:"Tap here to restart"}#crash-overlay{pointer-events:auto;cursor:pointer}}#tilt-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;pointer-events:none;opacity:0;transition:opacity .3s ease;background:#0000004d;border-radius:50%;padding:10px;box-sizing:border-box}#tilt-indicator.visible{opacity:1}#tilt-indicator svg{width:100%;height:100%}.tilt-ring{fill:none;stroke:#ff90004d;stroke-width:2}.tilt-crosshair{stroke:#ff900066;stroke-width:1}.tilt-dot{fill:#ff9000;filter:drop-shadow(0 0 6px rgba(255,144,0,1));transition:cx .05s ease-out,cy .05s ease-out}.boost-ui{position:fixed;top:65%;left:50%;transform:translate(-50%,-50%);width:200px;text-align:center;z-index:100;pointer-events:none;opacity:0;transition:opacity .3s ease}.boost-ui.visible{opacity:1}.boost-label{font-size:10px;font-weight:700;color:#ff9000;letter-spacing:2px;margin-bottom:6px;text-shadow:0 0 10px rgba(255,144,0,.5)}.boost-progress-bg{width:100%;height:4px;background:#ff90001a;border-radius:2px;overflow:hidden;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,144,0,.2)}.boost-progress-fill{width:0%;height:100%;background:#ff9000;box-shadow:0 0 12px #ff9000cc;transition:width .1s linear}.boost-ui.active .boost-label{color:#4ade80;text-shadow:0 0 10px rgba(74,222,128,.8);animation:boost-pulse .5s ease-in-out infinite alternate}.boost-ui.active .boost-progress-fill{background:#4ade80;box-shadow:0 0 15px #4ade80}@keyframes boost-pulse{0%{opacity:.7;transform:scale(.98)}to{opacity:1;transform:scale(1.02)}}