/* Ratios referenced from DJI Fly's camera-view guide, drawn on a 1280x720 HUD.
   https://repair.dji.com/help/content?customId=01700006562&lang=en&spaceId=17
   Every measurement below scales with the feed, never the browser breakpoint. */
.camera-hud{position:absolute;left:0;top:0;width:1280px;height:720px;transform:scale(var(--hud-scale,.40625));transform-origin:0 0;pointer-events:none;z-index:1;text-shadow:0 2px 4px #0009}
.camera-hud button,.camera-hud .telemetry-panel{pointer-events:auto}
.camera-hud .screen-top{top:22px;left:26px;right:24px;gap:14px;font-size:24px}
.camera-hud .screen-mode{font-size:26px;padding:5px 10px;border-radius:5px}
.camera-hud #cameraState{font-size:26px;line-height:1.3}
.camera-hud #cameraState.warning-state{font-size:24px;padding:6px 10px;border-radius:5px}
.camera-hud .telemetry-top{gap:12px;font-size:24px}
.camera-hud .telemetry-stat,.camera-hud .telemetry-top button{gap:7px}
.camera-hud .telemetry-top svg{width:34px;height:34px}
.camera-hud .battery-info{gap:8px!important}
.camera-hud .battery-ring{width:42px;height:42px}
.camera-hud .battery-ring svg{width:100%;height:100%}
.camera-hud .battery-ring b{font-size:20px}
.camera-hud #flightTime{font-size:24px;min-width:82px}
.camera-hud .signal-info svg{width:34px;height:34px}
.camera-hud .signal-info small{font-size:14px}
.camera-hud .gnss-info{gap:5px!important}
.camera-hud .gnss-info svg{width:34px}
.camera-hud .telemetry-menu{font-size:32px!important;letter-spacing:2px;padding:6px!important}
.camera-hud .telemetry-panel{top:84px;right:24px;width:520px;max-width:calc(100% - 48px);max-height:calc(100% - 108px);padding:20px 24px;border-radius:10px;font-size:23px}
.camera-hud .telemetry-panel p{font-size:23px}
.camera-hud .screen-bottom{left:26px;right:26px;bottom:26px;gap:28px}
.camera-hud .heading{width:76px;height:76px;border-width:2px}
.camera-hud .heading span{font-size:32px;line-height:36px}
.camera-hud .heading small{display:block;font-size:13px!important}
.camera-hud .flight-telemetry{font-size:28px;line-height:1.25;column-gap:36px}
.camera-hud .telemetry-column{min-width:144px}
.camera-hud .camera-controls{right:28px;top:50%;width:160px;height:310px}
.camera-hud .camera-control-disc{width:48px;height:48px;font-size:21px}
.camera-hud .camera-controls svg{width:38px;height:38px;stroke-width:1.6}
.camera-hud .camera-orientation{top:54px}
.camera-hud .camera-orientation svg{width:34px;height:34px}
.camera-hud .camera-video-icon{right:16px;top:0;width:40px;height:40px}
.camera-hud .camera-controls #cameraZoom{top:126px;font-size:20px;letter-spacing:-.02em}
.camera-hud .camera-record{right:0;top:119px;width:72px;height:72px;border-width:2px}
.camera-hud .camera-af{top:198px;font-size:19px}
.camera-hud .camera-playback{right:16px;bottom:0;width:40px;height:40px}
.camera-hud .auto-flight{left:24px;top:50%;width:72px;padding:6px 4px;gap:5px;border-radius:12px;background:#12202920}
.camera-hud .auto-flight svg{width:56px;height:56px}
.camera-hud .auto-flight span{font-size:19px}
.camera-hud .home-marker>span{width:42px;height:42px;font-size:27px;border-width:2px}
.camera-hud .home-marker>i{inset:-12px}
.camera-hud .home-marker>i:before{left:calc(50% - 6px);border-left-width:6px;border-right-width:6px;border-bottom-width:8px}
.camera-hud .camera-center{width:24px;height:24px;border-width:1px}
.camera-hud .camera-center i{left:10px;top:10px;width:2px;height:2px}
.camera-hud .flight-notices{top:88px;left:26px;gap:10px;max-width:calc(100% - 236px)}
.camera-hud .training-warnings{gap:8px}
.camera-hud .training-warning{gap:12px;padding:12px 16px;border-radius:5px;font-size:23px}
.camera-hud .training-warning i{width:12px;height:12px}
.camera-hud .flight-limit-notice{font-size:24px;padding:12px 18px;gap:18px;border-left-width:5px;border-radius:7px}
.camera-hud .gimbal-angle-indicator{right:238px;top:24%;bottom:23%;width:90px;font-size:19px}
.camera-hud .gimbal-angle-track{width:2px}
.camera-hud .gimbal-angle-limit,.camera-hud .gimbal-angle-zero{left:13px}
.camera-hud .gimbal-angle-limit:before,.camera-hud .gimbal-angle-zero:before{right:calc(100% + 5px);width:9px;height:2px}
.camera-hud .gimbal-angle-zero:before{width:14px}
.camera-hud .gimbal-angle-marker i{right:-5px;width:12px;height:12px}
.camera-hud .gimbal-angle-value{right:15px;min-width:61px;padding:6px 8px;border-radius:5px;font-size:20px}
.camera-hud .gimbal-angle-value:after{border-top-width:5px;border-bottom-width:5px;border-left-width:7px}
.obstacle-radar{position:absolute;left:50%;top:50%;width:190px;height:190px;transform:translate(-50%,-50%);z-index:3;pointer-events:none;filter:drop-shadow(0 1px 2px #0008)}
.obstacle-radar svg{display:block;width:100%;height:100%;overflow:visible}
.obstacle-radar [data-sector]{fill:none;stroke:#ffffff3d;stroke-width:2;stroke-linecap:round}
.obstacle-radar [data-sector].danger{stroke:#ff3c38;stroke-width:7;filter:drop-shadow(0 0 4px #ff2c2870)}
.obstacle-radar .radar-aircraft{fill:#fff;stroke:#263330;stroke-width:1;opacity:.85}
.obstacle-radar:not([hidden])~.camera-center{visibility:hidden}
.collision-layer{position:absolute;inset:0;z-index:7;pointer-events:none}
.collision-event{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:16px;padding:20px 30px;border:1px solid #ffb4b480;border-radius:15px;background:#c93232f5;box-shadow:0 8px 28px #39000040;color:#fff;font-size:34px;font-weight:700;line-height:1.2;letter-spacing:-.035em;white-space:nowrap;text-shadow:none}
.collision-event[hidden]{display:none}
.collision-event svg{width:42px;height:42px;overflow:visible;fill:#ffffff14;stroke:#fff;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.collision-event svg path+path{stroke:#fff;stroke-width:2.3}
.collision-impact-frame{position:absolute;inset:6px;border:3px solid #ef5757;border-radius:8px;opacity:0;box-shadow:inset 0 0 20px #e9715212}

/* Keep the takeoff/landing control anchored while holding it. */
#autoFlight{transition:background .16s,border-color .16s}
#autoFlight:active:not(:disabled){transform:translateY(-50%)}