/* Compact instrument strip. Landscape tablets share the desktop bottom anchor,
   rather than the older coarse-pointer layout which lifts it above the sticks. */
.viewport .telemetry{bottom:calc(env(safe-area-inset-bottom) + 24px);left:50%;transform:translateX(-50%);display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;align-items:center;gap:0;padding:10px 4px;border:1px solid #c1dcbd40;border-radius:18px;background:linear-gradient(135deg,#1e3435f5,#112226ed);box-shadow:0 6px 24px #03141135,inset 0 1px 0 #ffffff12;min-width:380px;max-width:calc(100% - 32px);pointer-events:none}
.viewport .telemetry>div{display:flex;flex-direction:column;justify-content:center;min-height:46px;padding:0 17px;border-left:1px solid #d5e7d520}
.viewport .telemetry>div:first-child{border-left:0}
.viewport .telemetry small{font-size:8px;letter-spacing:1px;font-weight:650;color:#b3c8c3;line-height:1.4}
.viewport .telemetry b{font-size:24px;line-height:1.25;font-weight:650;letter-spacing:-.6px;color:#f1f7f2;font-variant-numeric:tabular-nums}
.viewport .telemetry em{font-size:10px;font-weight:500;letter-spacing:0;color:#c0d4ce}
.viewport .telemetry #speed{color:#d0eea4}
.speed-secondary{font-size:9px;color:#a8bdb7;font-variant-numeric:tabular-nums;line-height:1.3;letter-spacing:.2px}
.viewport .session-status{bottom:calc(env(safe-area-inset-bottom) + 102px)}
@media(orientation:landscape){.viewport .telemetry{bottom:calc(env(safe-area-inset-bottom) + 24px)}.viewport .session-status{bottom:calc(env(safe-area-inset-bottom) + 102px)}}
@media(max-width:900px) and (orientation:landscape){.viewport .telemetry{min-width:310px;padding:7px 2px;border-radius:14px}.viewport .telemetry>div{padding:0 12px;min-height:42px}.viewport .telemetry b{font-size:20px}.viewport .telemetry small{font-size:7px}.viewport .telemetry>div:last-child{display:none}.viewport .telemetry{grid-template-columns:1.25fr 1fr 1fr}.viewport .session-status{bottom:calc(env(safe-area-inset-bottom) + 91px)}}
@media(max-width:600px) and (orientation:portrait){.viewport .telemetry{bottom:calc(max(32px,env(safe-area-inset-bottom)) + 164px);min-width:290px;grid-template-columns:1.3fr 1fr 1fr;padding:7px 2px;border-radius:14px}.viewport .telemetry>div{padding:0 12px;min-height:42px}.viewport .telemetry b{font-size:20px}.viewport .telemetry small{font-size:7px}.viewport .telemetry>div:last-child{display:none}.viewport .session-status{bottom:calc(max(32px,env(safe-area-inset-bottom)) + 233px)}}
.controller-connected .viewport .telemetry{left:14px;transform:none;min-width:0;max-width:calc(100% - 230px)}
@media(max-width:600px){.controller-connected .viewport .telemetry{bottom:calc(env(safe-area-inset-bottom) + 24px);left:8px;max-width:calc(100% - 160px);padding:7px 1px;grid-template-columns:1.1fr 1fr 1fr}.controller-connected .viewport .telemetry>div{padding:0 7px;min-height:38px}.controller-connected .viewport .telemetry b{font-size:16px}.controller-connected .viewport .telemetry small{font-size:6px;letter-spacing:.2px}.controller-connected .viewport .telemetry em{font-size:8px}.controller-connected .viewport .session-status{bottom:130px}}
@media(orientation:landscape){body:not(.controller-connected) .touch>small{position:fixed;top:auto;bottom:calc(env(safe-area-inset-bottom) + 7px);left:50%;transform:translateX(-50%)}}
/* Lightweight flight instruments: no extra WebGL scene or animation loop. */
.viewport .telemetry{min-width:0;width:344px;padding:8px 2px;border-radius:12px;grid-template-columns:1.35fr 1fr .85fr 1fr;background:linear-gradient(155deg,#183332f2,#0c1c22ef);box-shadow:0 4px 16px #00141030,inset 0 1px #deffec16}
.viewport .telemetry>div{padding:0 10px;min-height:40px;position:relative}
.viewport .telemetry small{font-size:6.5px;letter-spacing:.65px;white-space:nowrap}
.viewport .telemetry b{font-size:20px;line-height:1.25;letter-spacing:-.5px}
.viewport .telemetry em{font-size:8px}.viewport .speed-secondary{display:none}
.instrument-track{display:block;height:3px;margin-top:4px;border-radius:4px;background:#abc9bd26;overflow:hidden;width:100%}
.instrument-track i{display:block;width:100%;height:100%;background:#98c5ca;transform:scaleX(0);transform-origin:left;transition:transform .12s linear}
.speed-track{background:repeating-linear-gradient(90deg,#bedcb32b 0,#bedcb32b 18%,transparent 18%,transparent 20%)}.speed-track i{background:linear-gradient(90deg,#75bdbc,#d7f39c)}
.viewport .session-status{bottom:calc(env(safe-area-inset-bottom) + 88px)}
.controller-connected .viewport .telemetry{left:max(16px,env(safe-area-inset-left));bottom:calc(env(safe-area-inset-bottom) + 24px);transform:none;max-width:calc(100% - 200px)}
@media(min-width:768px){.controller-connected .viewport .session-status{left:18px;transform:none;bottom:calc(env(safe-area-inset-bottom) + 86px);text-align:left}}
@media(max-width:900px) and (orientation:landscape){.viewport .telemetry{width:278px;grid-template-columns:1.35fr 1fr .9fr}.viewport .telemetry>div{padding:0 9px}.viewport .telemetry>div:last-child{display:none}}
@media(max-width:600px) and (orientation:portrait){.viewport .telemetry{width:278px;grid-template-columns:1.35fr 1fr .9fr}.viewport .session-status{bottom:calc(max(32px,env(safe-area-inset-bottom)) + 228px)}}
@media(max-width:600px){.controller-connected .viewport .telemetry{left:8px;width:220px;max-width:calc(100% - 155px);grid-template-columns:1.2fr 1fr .8fr}.controller-connected .viewport .telemetry>div{padding:0 6px}.controller-connected .viewport .telemetry b{font-size:16px}.controller-connected .viewport .telemetry small{font-size:6px;letter-spacing:0}}
.field-label .wind-indicator{border-radius:13px;padding:5px 10px 5px 4px;gap:5px;background:linear-gradient(145deg,#203c3cef,#0e2229ec);box-shadow:inset 0 1px #ffffff13,0 3px 12px #00182020;max-width:180px}
.compass-face{width:62px;height:60px;position:relative;flex:none}.wind-indicator .compass-face svg{position:absolute;width:56px;height:56px;left:3px;top:1px;overflow:visible}
.wind-indicator .compass-shadow{fill:#020e15;stroke:#527473;stroke-width:.5}.wind-indicator .compass-rim{fill:#244343;stroke:#8eaaa0;stroke-width:1.2}.wind-indicator .compass-inner{fill:#112b32;stroke:#77969355;stroke-width:.7}.wind-indicator .wind-guide{stroke:#a5bcb0;stroke-width:1}.wind-indicator .compass-hub{fill:#efffe1;stroke:#102026;stroke-width:1}.needle-source{fill:#d0f59b}.needle-tail{fill:#608888}
.compass-view,.compass-you{position:absolute;left:0;right:0;text-align:center;font-size:7px;font-weight:650;color:#bfcec7;line-height:9px}.compass-view{top:0}.compass-you{bottom:0}
.field-label .wind-indicator .wind-from{display:block!important;text-transform:uppercase;font-size:7px;letter-spacing:1px;color:#aec4bb}.field-label .wind-indicator b{font-size:13px;line-height:1.6}.field-label .wind-indicator #windDirection{display:block!important;font-size:9px;color:#ddedce;max-width:95px}.field-label .wind-indicator .compass-face{pointer-events:none}
@media(max-height:480px){.compass-face{width:50px;height:49px}.wind-indicator .compass-face svg{width:46px;height:46px;left:2px;top:0}.compass-view,.compass-you{font-size:6px}.field-label .wind-indicator{padding:3px 7px 3px 3px}.field-label .wind-indicator b{font-size:11px}}
.field-label .wind-indicator .compass-view,.field-label .wind-indicator .compass-you{display:block!important;font-size:7px;letter-spacing:.6px;line-height:9px;margin:0}

/* Actual drawn FPS, updated once per second; never intercept field dragging. */
.fps-counter{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(5px,env(safe-area-inset-bottom));z-index:4;pointer-events:none;user-select:none;color:#76b900;background:#102007c2;border-radius:3px;padding:1px 5px;font:700 12px/16px ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 1px 1px #000}
@media(prefers-color-scheme:dark){.fps-counter{background:#050a03c2}}