/* flight-hud.css — G3 飛行 HUD（flight-hud.mjs）＋觸控操控（FlightControls.mountTouch）。
   右下角留給小地圖：--fh-mm＝小地圖寬（桌機 180 px、≤480 px 手機 120 px，同 minimap.css）。 */
.fh{--fh-mm:180px;--fh-fg:#e9fff1;--fh-acc:#5dffa0;--fh-bg:#0b1218b8;--fh-warn:#ffcf3a;--fh-danger:#ff4d4d;
  position:fixed;inset:0;pointer-events:none;z-index:1000;color:var(--fh-fg);font:600 13px/1.25 system-ui,"Noto Sans TC",sans-serif;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000a;user-select:none}
.fh[hidden]{display:none}

/* ── 上中：航向帶＋水平儀 ── */
.fh-top{position:absolute;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.fh-hdg{position:relative;width:240px;height:34px;overflow:hidden;border-radius:8px;background:var(--fh-bg)}
.fh-hdg-tape{position:absolute;left:0;top:4px;white-space:nowrap;transform:translateX(calc(120px - (var(--h,0) + 360) * 1.33333px))}
.fh-hdg-tick{display:inline-block;width:20px;height:10px;text-align:center;font-size:10px;line-height:10px;border-left:1px solid #fff6;box-sizing:border-box;vertical-align:top;text-indent:-10px;overflow:visible}
.fh-hdg-tick.major{border-left-color:#fff;height:12px;color:#fff}
.fh-hdg-caret{position:absolute;left:50%;top:0;margin-left:-5px;border:5px solid transparent;border-top:6px solid var(--fh-acc)}
.fh-hdg-val{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:12px;color:var(--fh-acc)}
.fh-att{position:relative;width:104px;height:104px;border-radius:50%;overflow:hidden;border:2px solid #fff8;box-shadow:0 2px 10px #0006}
.fh-horizon{position:absolute;left:-50%;top:-50%;width:200%;height:200%;transform:rotate(var(--roll,0deg)) translateY(calc(var(--pitch,0) * 2.2px));transition:transform .06s linear}
.fh-sky,.fh-ground{position:absolute;left:0;right:0;height:50%}
.fh-sky{top:0;background:linear-gradient(#2a6fd6,#5ea3ff)}
.fh-ground{bottom:0;background:linear-gradient(#9a6a35,#5b3c1c);border-top:2px solid #fff}
.fh-ladder{position:absolute;inset:0}
.fh-rung{position:absolute;left:50%;width:36px;margin-left:-18px;height:0;border-top:1px solid #fffc;font-size:8px;line-height:8px;text-indent:40px;color:#fff}
.fh-rung.neg{border-top-style:dashed}
.fh-rung[data-p="10"]{top:calc(50% - 22px)}.fh-rung[data-p="20"]{top:calc(50% - 44px)}
.fh-rung[data-p="-10"]{top:calc(50% + 22px)}.fh-rung[data-p="-20"]{top:calc(50% + 44px)}
.fh-wings{position:absolute;left:22%;right:22%;top:50%;height:3px;margin-top:-1px;background:var(--fh-warn);border-radius:2px;box-shadow:0 0 0 1px #000a}
.fh-wings::after{content:"";position:absolute;left:50%;top:-3px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--fh-warn)}
.fh-bank{position:absolute;left:50%;top:3px;margin-left:-4px;border:4px solid transparent;border-bottom:7px solid #fff;border-top:0}

/* ── 左右欄 ── */
.fh-col{position:absolute;top:max(150px,22vh);display:flex;flex-direction:column;gap:8px;width:104px}
.fh-left{left:max(12px,env(safe-area-inset-left))}
.fh-right{right:max(12px,env(safe-area-inset-right))}
.fh-box{padding:6px 9px;border-radius:9px;background:var(--fh-bg);border:1px solid #ffffff22}
.fh-lbl{font-size:11px;opacity:.75}
.fh-val{font-size:26px;line-height:1.1;color:var(--fh-acc)}
.fh-sub{font-size:11px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fh-box.low .fh-val{color:var(--fh-warn)}
.fh-box.bad .fh-sub{color:var(--fh-danger)}
.fh-bar{position:relative;height:8px;margin:5px 0 3px;border-radius:4px;background:#ffffff22;overflow:hidden}
.fh-bar-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v,0) * 100%);background:var(--fh-acc)}
.fh-vsi-bar{position:relative;height:44px;width:10px;margin:4px 0;border-radius:5px;background:#ffffff22;overflow:hidden}
.fh-vsi-fill{position:absolute;left:0;right:0;top:0;height:50%;transform-origin:bottom;transform:scaleY(var(--v,0));background:var(--fh-acc)}

/* ── 警示 ── */
.fh-warn{position:absolute;left:50%;top:max(178px,26vh);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.fh-w{padding:5px 14px;border-radius:8px;font-size:17px;letter-spacing:.06em;background:#000a}
.fh-w.caution{color:var(--fh-warn);border:1px solid var(--fh-warn)}
.fh-w.danger{color:#fff;background:#c81e1ee6;border:1px solid var(--fh-danger);animation:fh-blink .6s steps(2) infinite}
@keyframes fh-blink{50%{opacity:.35}}
.fh-status{position:absolute;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);max-width:calc(100vw - 2 * var(--fh-mm) - 48px);
  padding:4px 10px;border-radius:8px;background:var(--fh-bg);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fh.broken .fh-val{color:var(--fh-danger)}

/* ── 觸控（FlightControls.mountTouch）── */
.fl-touch{--fh-mm:180px;position:fixed;inset:0;pointer-events:none;z-index:1002;user-select:none;touch-action:none;font:600 13px system-ui,"Noto Sans TC",sans-serif}
.fl-touch>*{pointer-events:auto}
.fl-stick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%;
  background:radial-gradient(#ffffff18,#ffffff30);border:2px solid #ffffff55;touch-action:none}
.fl-stick-knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#ffffffcc;box-shadow:0 2px 8px #0007}
.fl-thr{--v:0;position:absolute;right:calc(var(--fh-mm) + 30px + env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:52px;height:150px;
  border-radius:14px;background:#0b1218a8;border:2px solid #ffffff55;overflow:hidden;touch-action:none}
.fl-thr-fill{position:absolute;left:0;right:0;bottom:0;height:calc(var(--v) * 100%);background:linear-gradient(#5dffa0,#2fbf6d)}
.fl-thr-knob{position:absolute;left:4px;right:4px;height:10px;bottom:calc(var(--v) * (100% - 10px));border-radius:5px;background:#fff}
.fl-thr-label{position:absolute;left:0;right:0;top:4px;text-align:center;font-size:11px;color:#fff;text-shadow:0 1px 2px #000}
.fl-touch.heli .fl-thr::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed #fff8}
.fl-btns{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 146px);display:flex;flex-wrap:wrap;gap:6px;max-width:200px}
.fl-btn{min-width:56px;height:40px;padding:0 10px;border:0;border-radius:10px;background:#0b1218c8;color:#fff;font:inherit;border:1px solid #ffffff44}
.fl-btn:active,.fl-btn.on{background:#2fbf6d}
.fl-btn[hidden]{display:none}
@media (hover:hover) and (pointer:fine){.fl-touch:not(.force){display:none}}

/* 手機：小地圖 120 px */
@media (max-width:480px){
  .fh,.fl-touch{--fh-mm:120px}
  .fh-hdg{width:200px}.fh-hdg-tape{transform:translateX(calc(100px - (var(--h,0) + 360) * 1.33333px))}
  .fh-att{width:84px;height:84px}
  .fh-col{width:88px;top:176px}
  .fh-val{font-size:21px}
  .fh-warn{top:176px;max-width:180px}
  .fh-w{font-size:15px;padding:4px 10px}
  .fh-status{top:142px;bottom:auto;max-width:calc(100vw - 32px);font-size:11px}
  .fl-stick{width:116px;height:116px}
  .fl-thr{right:calc(var(--fh-mm) + 22px);width:46px;height:128px}
  .fl-btns{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 128px);max-width:180px}
  .fl-btn{min-width:48px;height:36px;padding:0 8px;font-size:12px}
}
/* 橫拿手機（矮螢幕）：左右欄往上 */
@media (max-height:500px){
  .fh-col{top:12px}.fh-warn{top:132px}
  .fh-att{width:72px;height:72px}
  .fl-thr{height:110px}
  .fl-btns{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 124px)}
}