/* [claude code] 2026-10-19 v0.5 斜格世界的 HUD(疊在地圖上):地名 · 小地圖 · 隊伍血條 · 提示行 · 巡邏 / 回城鈕 · 搖桿圈 · 遇怪一閃;傳送陣面板 · 確認框 · 地圖操作設定
   顏色一律用 theme.css 的變數;地圖本身(Pixi)在 client/src/iso/。
   [claude code] 2026-10-19 v0.6 確認框停在底部導覽上緣(導覽改成蓋在面板上面) */
.world-canvas { position: absolute; inset: 0; }
.world-hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.world-hud button { pointer-events: auto; }

.wh-top { position: absolute; left: 8px; top: 8px; max-width: calc(100% - 152px); display: flex; flex-direction: column; padding: 4px 12px; border-radius: 14px; background: var(--hud-bg); color: var(--hud-text); }
.wh-top b { font-size: 15px; }
.wh-top span { font-size: 11px; opacity: .85; }
.wh-mini { position: absolute; right: 8px; top: 8px; width: 120px; height: 64px; border-radius: 8px; background: var(--hud-bg); border: 1px solid var(--hud-line); }

.wh-party { position: absolute; left: 8px; top: 60px; display: flex; flex-direction: column; gap: 2px; }
.wh-party:empty { display: none; }
.wh-hp { display: grid; grid-template-columns: minmax(0, 52px) minmax(0, 64px); align-items: center; gap: 4px; padding: 0 8px; border-radius: 999px; background: var(--hud-bg); color: var(--hud-text); font-size: 11px; }
.wh-hp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-hp i { position: relative; display: block; height: 6px; border-radius: 999px; background: var(--hp-back); overflow: hidden; }
.wh-hp b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--hp-ally); }
.wh-hp.down { opacity: .6; }

.wh-notice { position: absolute; left: 50%; top: 64px; transform: translate(-50%, -8px); max-width: calc(100% - 32px); padding: 4px 12px; border-radius: 999px; background: var(--hud-bg); color: var(--gold); font-size: 13px; opacity: 0; transition: opacity .2s, transform .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-notice.show { opacity: 1; transform: translate(-50%, 0); }
.wh-status { position: absolute; left: 8px; right: 8px; bottom: 64px; margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--hud-bg); color: var(--hud-text); font-size: 13px; text-align: center; }
.wh-status[hidden] { display: none; }

.wh-actions { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 8px; }
/* 城鎮:第幾線(按下去列出每一線幾人) */
html[data-ui-skin] .world-hud .wh-line { position: absolute; right: 8px; top: 80px; min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--hud-line); background: var(--hud-bg); color: var(--hud-text); font-size: 13px; }
.wh-line[hidden] { display: none; }
.wh-lines { position: absolute; right: 8px; top: 120px; display: flex; flex-direction: column; gap: 4px; pointer-events: auto; }
.wh-lines[hidden] { display: none; }
html[data-ui-skin] .world-hud .wh-lines .wh-btn { min-width: 120px; min-height: 40px; padding: 4px 12px; font-size: 13px; }
/* 祕境:丹藥選單(回血丹 / 驅怪香),開在動作鈕上面 */
.wh-items { position: absolute; right: 8px; bottom: 64px; display: flex; flex-direction: column; gap: 4px; pointer-events: auto; }
.wh-items[hidden] { display: none; }
html[data-ui-skin] .world-hud .wh-items .wh-btn { min-height: 44px; font-size: 13px; }
html[data-ui-skin] .world-hud .wh-btn { min-width: 64px; min-height: 48px; padding: 8px 16px; border-radius: 999px; background: var(--hud-bg); color: var(--hud-text); border: 1px solid var(--hud-line); font-size: 15px; }
html[data-ui-skin] .world-hud .wh-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent-deep); color: var(--ink); }
.wh-btn[hidden] { display: none; }

.wh-joy { position: absolute; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 999px; border: 2px solid var(--hud-line); background: var(--hud-soft); }
.wh-joy[hidden] { display: none; }
.wh-joy i { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 999px; background: var(--hud-text); opacity: .8; }

.wh-flash { position: absolute; inset: 0; background: var(--flash); opacity: 0; }
.wh-flash[hidden] { display: none; }
.wh-flash.go { animation: wh-flash .42s ease-out; }
@keyframes wh-flash { 0% { opacity: 0; } 30% { opacity: .95; } 60% { opacity: .2; } 80% { opacity: .9; } 100% { opacity: 1; } }

/* 傳送陣 / 確認框 / 設定 */
#teleport-body h3 { margin: 8px 0 0; font-size: 15px; color: var(--mute); }
#teleport-body .row button { flex: none; }
small.lock { color: var(--mute); }
.sheet-small { inset: auto 8px calc(var(--dock-h, 0px) + 8px); }
.confirm-body { margin: 0; white-space: pre-line; font-size: 15px; }
.confirm-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; margin-top: 12px; }
html[data-ui-skin] .confirm-actions button { min-height: 48px; }
.toggle { text-align: left; }
.seg { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13px; }
.seg span { margin-right: 4px; }
.seg button[aria-checked="true"] { border-color: var(--accent); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .wh-flash.go { animation: none; opacity: 1; } .wh-notice { transition: none; } }