/* [claude code] 2026-10-19 v0.2 萌將千秋自己的版面:頂欄 / 任務追蹤 / 地圖區 / 聊天列 / 建角 / 表單。顏色一律用 theme.css 的變數。 */
/* [claude code] 2026-10-19 v0.5 地圖區的 canvas 規則只管直接子層(HUD 裡的小地圖不能被撐滿) */
/* [claude code] 2026-10-19 v0.6 面板開著時底部導覽照樣點得到(英靈 → 隊伍直接切):導覽蓋在遮罩上面、面板停在導覽上緣 */

/* 頂欄:頭像 · 名字 + 境界 + 修為條 · 貨幣 */
#hud { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; border-bottom: 1px solid var(--border); background: var(--surface); }
html[data-ui-skin] #hud .avatar { width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 2px solid var(--gold); overflow: hidden; }
.look-dot { display: block; width: 100%; height: 100%; border-radius: 999px; }
.look-dot.l0 { background: var(--look-0); }
.look-dot.l1 { background: var(--look-1); }
.look-dot.l2 { background: var(--look-2); }
.look-dot.l3 { background: var(--look-3); }
.hud-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hud-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.hud-line b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-realm { font-size: 11px; color: var(--gold-ink); white-space: nowrap; }
.bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.hud-wallet { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.coin { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text); white-space: nowrap; }
.coin i { width: 8px; height: 8px; border-radius: 999px; background: var(--gold); }
.coin.stone i { background: var(--fac-xuanwu); }
.coin.ticket i { background: var(--fac-zhuque); }

/* 任務追蹤:一行,點了開任務 */
.tracker { padding: 4px 12px; font-size: 11px; color: var(--mute); border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tracker:empty { display: none; }

/* 地圖區(Pixi 畫布會放進來) */
.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--surface-2); }
.stage > canvas { display: block; width: 100%; height: 100%; touch-action: none; } /* 只管地圖本身那張(HUD 裡的小地圖有自己的大小) */
.stage-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; font-size: 13px; color: var(--mute); text-align: center; }

/* 聊天列:第 6 段起在 social.css(表情鈕 + 最新一則 + 未讀) */

/* 底部導覽在遮罩(25)/ 面板(30)之上、戰鬥(40)/ 召喚演出(50)之下;--dock-h 由 app.js 量 */
#dock { position: relative; z-index: 35; }
#game .sheet { bottom: calc(var(--dock-h, 0px) + 8px); }

/* 表單(登入 / 建角 / 綁定) */
.form { display: flex; flex-direction: column; gap: 8px; }
.form[hidden] { display: none; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--mute); }
.msg { min-height: 20px; font-size: 13px; color: var(--danger); }
.msg.ok { color: var(--accent); }

/* 建角:外觀 */
.look-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
html[data-ui-skin] .look-list button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 96px; padding: 8px 4px; border-radius: 14px; background: var(--surface); }
html[data-ui-skin] .look-list button[aria-checked="true"] { border: 2px solid var(--accent); box-shadow: var(--shadow); }
.look-list .look-dot { width: 56px; height: 56px; }
.look-list span:last-child { font-size: 11px; color: var(--mute); }

/* 「更多」裡的入口 */
.grid-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-ui-skin] .grid-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 72px; padding: 12px; border-radius: 14px; background: var(--surface); text-align: left; }
.grid-list b { font-size: 15px; }
.grid-list small { font-size: 11px; color: var(--mute); }
.grid-list .ready { border-color: var(--gold); }

/* 設定裡的帳號區 */
.box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.box h3 { margin: 0; font-size: 15px; }
.rescue { padding: 12px; border: 2px dashed var(--gold); border-radius: 8px; font-size: 20px; letter-spacing: .2em; text-align: center; color: var(--gold-ink); background: var(--surface-2); user-select: all; }
button.danger { color: var(--danger); border-color: var(--danger); background: transparent; }