/* 新版入口（W6）HUD；v1 的 style.css 只給 legacy.html 用
   B17：整套介面共用一組 CSS 變數（字級、留白、圓角、半透明底、安全區）；hud.css／touch.css／hud-dock.css／manual.css 都用這組。
   版面（電腦）：左上＝速度＋模式；右上＝HUD 小卡（hud.css）→ 下面一列圖標（📖 手冊、⚙️ 設定、🎒、Y 系統圖標＝hud-dock.mjs）→ 任務卡；右下＝小地圖。
   觸控版面在 touch.css（body.tc-on）。 */
:root {
  --ui-font: system-ui, "Noto Sans TC", sans-serif;
  --ui-fs: 13px; --ui-fs-sm: 11.5px; --ui-fs-lg: 15px;
  --ui-bg: rgba(16, 20, 28, .72); --ui-bg-strong: rgba(16, 20, 28, .92); --ui-bg-hover: rgba(42, 49, 64, .9);
  --ui-fg: #fff; --ui-muted: #b9c4d0; --ui-line: rgba(255, 255, 255, .16);
  --ui-accent: #ffd23f; --ui-good: #7dff8a; --ui-bad: #ff7b6b;
  --ui-r: 12px; --ui-r-sm: 8px; --ui-gap: 8px;
  --ui-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  --ui-icon: 40px;
  --ui-edge-t: max(12px, env(safe-area-inset-top)); --ui-edge-r: max(12px, env(safe-area-inset-right));
  --ui-edge-b: max(12px, env(safe-area-inset-bottom)); --ui-edge-l: max(12px, env(safe-area-inset-left));
  /* hud-dock.mjs 每 0.25 s 量好寫進來：HUD 小卡底、圖標列底（px） */
  --card-b: 132px; --dock-b: 180px;
}
html, body { margin: 0; height: 100%; overflow: hidden; background: #a9cfee; font: 14px/1.5 var(--ui-font); color: #fff; }
canvas#view { display: block; width: 100vw; height: 100vh; touch-action: none; }
[hidden] { display: none !important; }
.panel { position: fixed; padding: 8px 12px; background: var(--ui-bg); border-radius: var(--ui-r); pointer-events: none; box-shadow: var(--ui-shadow); }
.muted { color: var(--ui-muted); font-size: 12px; }

/* ── 左上：只有速度＋模式（B17）；除錯資訊在設定裡 ── */
.tl { left: var(--ui-edge-l); top: var(--ui-edge-t); padding: 5px 12px 6px; font-size: var(--ui-fs); line-height: 1.25; }
.tl .spdline { white-space: nowrap; }
.tl b { font-size: 22px; font-variant-numeric: tabular-nums; }
.tl .unit { font-size: 11px; color: var(--ui-muted); }
.tl #st { color: #e4ebf2; white-space: nowrap; }

/* 舊的整段按鍵說明：B17 起收進 📖 遊戲手冊；元素保留（hud.addKeyHints 照舊補 Y 鍵）但不顯示 */
.keys { display: none; }

/* ── 圖標（📖 ⚙️ 與 Y 系統圖標共用；hud-dock.css 排版） ── */
.ui-icon { position: relative; pointer-events: auto; display: grid; place-items: center; width: var(--ui-icon); height: var(--ui-icon); padding: 0; box-sizing: border-box;
  border: 1px solid var(--ui-line); border-radius: 50%; background: var(--ui-bg); color: #fff; font: 18px/1 var(--ui-font); cursor: pointer; box-shadow: var(--ui-shadow);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ui-icon:hover { background: var(--ui-bg-hover); }
.ui-icon:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ui-icon.on, .ui-icon[aria-expanded=true] { background: var(--ui-accent); color: #222; }
#setBtn.muted-on::after { content: "🔇"; position: absolute; right: -5px; bottom: -5px; font-size: 12px; }
.ui-card { background: var(--ui-bg-strong); border-radius: var(--ui-r); box-shadow: var(--ui-shadow); border: 1px solid var(--ui-line); }

/* ── ⚙️ 設定（音量／靜音／畫質／除錯資訊／OSM）：圖標正下方展開 ── */
.settings { position: relative; pointer-events: auto; }
.setbox { position: absolute; right: 0; top: calc(100% + 8px); z-index: 2; width: 260px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
  font-size: var(--ui-fs); color: #fff; text-align: left; }
.setbox label { display: flex; align-items: center; gap: 6px; }
.setbox input[type=range] { width: 120px; }
.setbox select { font: inherit; font-size: var(--ui-fs); }
.setbox .dbg { margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--ui-line); }
.setbox .dbg b { display: block; font-size: 12px; color: var(--ui-accent); }
.setbox .dbg div { font-size: 11px; line-height: 1.4; word-break: break-all; }
.setbox .credits { margin-top: 2px; font-size: 11px; }
.loading-attr a, .setbox .credits a { color: #9cc8ff; }

/* ── OSM 標示（進場 6 s 後淡出；設定與手冊「說明」常駐） ── */
.corner { position: fixed; right: 204px; bottom: max(6px, env(safe-area-inset-bottom)); font-size: 11px; background: rgba(255, 255, 255, .75); color: #333; padding: 2px 6px; border-radius: 4px; transition: opacity .8s; }
.corner a { color: #1a4f8a; }
.corner.faded { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .8s, visibility 0s .8s; }

.loading-attr { position: absolute; bottom: 14px; font-size: 13px; opacity: .85; }
.loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(11, 26, 44, .55); font-size: 16px; }
.spinner { width: 42px; height: 42px; border: 4px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* I3：車上／機上收起 G2 HUD 的武器欄，右上角讓給飛行 HUD */
.ghud.in-vehicle .ghud-weapon, .ghud.in-vehicle .ghud-slots { display: none; }
@media (max-width: 480px) { .corner { right: 136px; } }