/* [claude code] 2026-07-12 v0.47:戰鬥手感 —— #hurt 紅屏 vignette(flash/lowhp)、.sk-slot.cast 施放 flash+punch */
/* [claude code] 2026-07-12 v0.45:HUD 版本 chip(.hud-ver,.line1 可換行)+ 裝備詞條/寶石膠囊 chip(.aff-row/.aff-chip/.aff-lbl/.aff-empty/.eq-base)—— 詞條不再擠成一行 */
/* [claude code] 2026-07-11 v0.25:面板桌面版置中成視窗(@media 720px)+ #backdrop 遮罩 */
/* [claude code] 2026-07-11 v0.22:清單卡整張可點(.tappable/.go-tag)+ 換裝提示(.card.upgrade 金框 / 🎒 .has-upgrade 紅點) */
/* [claude code] 2026-07-11 v0.21:上下分區(dock 個人 / 看板主城)+ 個人屬性頁(.guide 內嵌攻略)+ 主城看板美化(.build 主題色 / 圖示徽章)+ HUD 角色列可點 */
/* [claude code] 2026-07-11 v0.20:主城設施看板(#city / .build)—— 進城取代 canvas,點設施辦事不用走 */
/* [claude code] 2026-07-10 手機優先(v0.1 拍板):相對尺寸 + flex,觸控友善 */
:root {
  --bg: #12101c;
  --surface: #1c1930;
  --surface-2: #262242;
  --border: #35305a;
  --text: #e8e6f2;
  --mute: #9a94b8;
  --accent: #8b7cf6;
  --gold: #e8c46a;
  --hp: #e06a6a;
  --exp: #6ab4e0;
  --mp: #7b8cf0;
  --danger: #e05a5a;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--bg); color: var(--text); overflow: hidden;
  font: 15px/1.5 "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
  height: 100dvh;
}
.hidden { display: none !important; }

/* ---- 登入 / 創角 ---- */
.screen { display: flex; align-items: center; justify-content: center; height: 100dvh; padding: 20px; }
.panel {
  width: min(420px, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 28px 22px; text-align: center;
}
.panel h1 { font-size: 30px; letter-spacing: 4px; background: linear-gradient(90deg, #a99bff, #e8c46a);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { color: var(--mute); font-size: 13px; margin: 8px 0 22px; }
input, button, select { font: inherit; }
input[type=text], input[type=password], input:not([type]), input[type=number] {
  width: 100%; padding: 13px 14px; margin-bottom: 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
button {
  padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer; transition: .15s;
}
button:active { transform: scale(.97); }
button.primary { background: linear-gradient(135deg, #7c6cf0, #a08bff); border-color: transparent; font-weight: 700; }
button.danger { background: linear-gradient(135deg, #e0563e, #f0836a); border-color: transparent; font-weight: 700; }
/* 難度分級卡:卡片可換行,難度按鈕列獨佔整條第二排(否則會把圖名/說明擠成一字一行)*/
.card.has-diffs { flex-wrap: wrap; }
.card.has-diffs .diff-row { flex-basis: 100%; margin-top: 8px; }
.diff-row { flex-wrap: wrap; }
.diff-row button { flex: 1 1 auto; }
.row { display: flex; gap: 10px; }
.row button { flex: 1; }
.msg { margin-top: 14px; font-size: 13px; color: var(--gold); min-height: 20px; }
.msg.err { color: var(--danger); }
.ver { margin-top: 18px; font-size: 11px; color: var(--mute); }
.roll-result { margin: 10px 0 20px; font-size: 14px; line-height: 2; }
.roll-result .kind { font-size: 22px; font-weight: 700; color: var(--gold); }

/* ---- HUD ---- */
#game { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
#hud {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.hud-left { flex: 1; min-width: 0; }
.line1 { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--gold); font-weight: 400; }
.bar { position: relative; height: 14px; margin-top: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar i { position: absolute; inset: 0; width: 0; display: block; transition: width .2s; }
.bar.exp i { background: var(--exp); }
.bar.exp.full i { background: linear-gradient(90deg, #e8c46a, #f0d488); } /* 大圓滿修為滿溢 → 金色(該突破了) */
.bar.hp i { background: var(--hp); }
.bar.mp i { background: var(--mp); }
.bar span { position: relative; display: block; text-align: center; font-size: 10px; line-height: 14px; }
.hud-right { text-align: right; font-size: 12px; color: var(--mute); white-space: nowrap; }
.hud-right .ico { margin-right: 4px; }
#hud-lingshi { color: var(--gold); font-weight: 700; }

/* ---- 離線閉關估算條(野圖常駐,HUD 下方一行) ---- */
#offlinebar {
  flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 5px 12px; font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden;
  border-bottom: 1px solid var(--border); background: var(--surface);
}
#offlinebar .ob-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#offlinebar .ob-l strong { color: var(--gold); }
#offlinebar .ob-mon { color: var(--mute); font-size: 11px; } /* 各怪種細目,窄螢幕先被省略號吃掉 */
#offlinebar .ob-r { flex-shrink: 0; font-size: 11px; }
#offlinebar.ob-full { background: linear-gradient(90deg, rgba(232,196,106,.16), var(--surface)); }
#offlinebar.ob-full .ob-r { color: var(--gold); font-weight: 700; }
#offlinebar.ob-fill .ob-r { color: var(--accent); }
#offlinebar.ob-wait, #offlinebar.ob-wait .ob-r { color: var(--mute); }

/* ---- 地圖 ---- */
/* 🔴 min-height:0 讓 canvas 能在 flex 下縮小 —— 否則它撐開版面把底部 dock 擠出畫面(踩過) */
#stage { flex: 1; min-height: 0; width: 100%; display: block; touch-action: none; background:
  radial-gradient(circle at 50% 40%, #1e1b32 0%, #12101c 70%); }

/* ---- 主城設施看板(進城取代 canvas,點設施辦事、不用走) ---- */
#city { flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px 14px calc(16px + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(139,124,246,.20) 0%, transparent 55%),
    radial-gradient(circle at 50% 20%, #241f40 0%, #12101c 74%); }
.city-head { text-align: center; margin: 2px 0 14px; }
.city-head h2 { font-size: 27px; letter-spacing: 5px; font-weight: 800;
  background: linear-gradient(90deg, #a99bff, #e8c46a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(139,124,246,.35)); }
.city-head p { font-size: 12px; color: var(--mute); margin-top: 5px; }
.city-stat { display: flex; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.city-stat span { font-size: 11px; color: var(--text); background: rgba(255,255,255,.06);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; }
.city-sub { font-size: 11px; color: var(--mute); letter-spacing: 1px; margin: 4px 2px 10px; }
#city-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.build { --accent-b: var(--accent); position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: 18px; padding: 18px 12px 16px;
  text-align: center; cursor: pointer; transition: transform .12s, border-color .15s, box-shadow .15s;
  display: flex; flex-direction: column; align-items: center; }
/* 左緣一道設施主題色 —— 讓看板有「不同建築」的層次感,不再像純表單 */
.build::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent-b); opacity: .9; }
.build:active { transform: scale(.97); }
.build:hover { border-color: var(--accent-b); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.build.wide { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 14px; padding: 12px; }
.build.wide .b-ico { font-size: 22px; margin: 0; }
.build.wide .b-name, .build.wide .b-desc { text-align: left; }
/* v0.76 城設施圖示縮小(使用者:圖示太大) */
.build .b-ico { font-size: 22px; line-height: 1; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 6px;
  background: color-mix(in srgb, var(--accent-b) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-b) 45%, transparent); }
.build.wide .b-ico { width: 38px; height: 38px; }
.build .b-name { font-weight: 700; font-size: 15px; }
.build .b-desc { font-size: 11px; color: var(--mute); margin-top: 4px; line-height: 1.45; }
.build .b-badge { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 700;
  color: #12101c; background: var(--gold); padding: 2px 8px; border-radius: 999px; }

/* ---- HUD 角色列可點 → 個人屬性頁 ---- */
#hud-char { cursor: pointer; border-radius: 10px; transition: background .15s; }
#hud-char:active { background: rgba(255,255,255,.05); }
.pw-chip { font-size: 11px; color: var(--gold); font-weight: 700; }
.tap-hint { font-size: 10px; color: var(--accent); opacity: .8; }
.line1 { flex-wrap: wrap; } /* 版本移進來後,窄螢幕容得下就同排、擠不下就換行 */
.hud-ver { margin-left: auto; font-size: 10px; color: var(--mute); font-weight: 400; white-space: nowrap; } /* 版本靠右,不搶戲 */

/* ---- 個人屬性頁:面板網格 + 內嵌攻略 ---- */
#attr-panel, #attr-innate { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
/* 一級屬性模擬加點:單欄,每列一個屬性 + −／＋ 步進(整列可放按鈕不擠) */
#alloc-sim { display: flex; flex-direction: column; gap: 8px; }
#alloc-sim .hint { margin: 0 0 2px; }
#alloc-sim .actions button { min-width: 40px; font-size: 16px; font-weight: 700; }
.guide { font-size: 12.5px; color: var(--text); }
.guide details { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.guide summary { cursor: pointer; font-weight: 700; font-size: 13px; list-style: none; }
.guide summary::-webkit-details-marker { display: none; }
.guide summary::before { content: '▸ '; color: var(--accent); }
.guide details[open] summary::before { content: '▾ '; }
.guide p { color: var(--mute); line-height: 1.7; margin-top: 7px; }
.guide b { color: var(--text); }

/* ---- 整張卡可點(單一動作清單:傳送 / 學功法 / 換裝)---- */
.card.tappable { cursor: pointer; }
.card.tappable:active { transform: scale(.98); }
.card.tappable:hover { border-color: var(--accent); }
.go-tag { margin-left: auto; padding-left: 10px; font-size: 12px; font-weight: 700;
  color: var(--accent); white-space: nowrap; align-self: center; }
.go-tag.up { color: var(--gold); }
/* 可換上:柔和金色光暈(不加硬邊框 → 邊框保持品質色,不被誤看成品質)+ 「↑換上」標示 */
.card.upgrade { box-shadow: 0 0 12px 2px rgba(232,196,106,.32); }
.msg.gold { color: var(--gold); }
/* 🎒 背包鈕紅點:背包有更好的裝備可換上 */
#dock button.has-upgrade { position: relative; }
#dock button.has-upgrade::after { content: ''; position: absolute; top: 6px; right: 10px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 7px var(--gold); }

/* 🔴 z-index 必須高於面板(.sheet=30)與遮罩(#backdrop=25):否則商店 / 鍛器坊開著時,
   「賣裝額度已滿」這類 toast 會被面板壓住看不到(使用者回報)。訊息永遠要在最上面。 */
#toast {
  position: fixed; top: 84px; left: 50%; transform: translateX(-50%);
  padding: 10px 18px; border-radius: 12px; background: rgba(20,17,35,.94);
  border: 1px solid var(--border); font-size: 13px; opacity: 0; transition: opacity .25s;
  pointer-events: none; max-width: 88vw; text-align: center; z-index: 50;
}
#toast.show { opacity: 1; }
#toast.warn { border-color: var(--danger); color: #ffb4b4; }

/* HUD 右上 ⚙️ 設定按鈕 */
#hud-settings { cursor: pointer; border-radius: 8px; transition: background .15s; }
#hud-settings:active { background: rgba(255,255,255,.06); }

/* ---- 合成 / 大事件結果特效(#burst):置中大字彈出,成功金色縮放、失敗紅色搖晃 ---- */
#burst {
  position: fixed; top: 38%; left: 50%; z-index: 60; pointer-events: none;
  font-size: 30px; font-weight: 800; text-align: center; white-space: nowrap;
  transform: translate(-50%, -50%) scale(.6); opacity: 0;
}
#burst.ok   { color: #ffe08a; text-shadow: 0 0 18px rgba(232,196,106,.9), 0 2px 6px rgba(0,0,0,.6); }
#burst.fail { color: #ff8a8a; text-shadow: 0 0 16px rgba(240,90,90,.85), 0 2px 6px rgba(0,0,0,.6); }
#burst.ok.show   { animation: burst-ok .55s cubic-bezier(.2,1.4,.4,1) forwards, burst-fade 1.1s forwards; }
#burst.fail.show { animation: burst-fail .5s ease forwards, burst-fade 1.1s forwards; }
@keyframes burst-ok   { 0% { transform: translate(-50%,-50%) scale(.5) rotate(-6deg); opacity: 0; }
  60% { transform: translate(-50%,-50%) scale(1.18) rotate(2deg); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1) rotate(0); opacity: 1; } }
@keyframes burst-fail { 0%,100% { transform: translate(-50%,-50%) scale(1); }
  20% { transform: translate(calc(-50% - 10px),-50%) scale(1.05); }
  40% { transform: translate(calc(-50% + 9px),-50%) scale(1.05); }
  60% { transform: translate(calc(-50% - 7px),-50%); }
  80% { transform: translate(calc(-50% + 5px),-50%); } }
@keyframes burst-fade { 0%,70% { opacity: 1; } 100% { opacity: 0; } }

/* ---- 受傷 / 死亡 / 低血:螢幕邊緣紅色 vignette(純視覺,z 低於面板)---- */
#hurt {
  position: fixed; inset: 0; z-index: 18; pointer-events: none; opacity: 0;
  --hurt-a: .5;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(224,40,40,.55) 100%);
}
#hurt.flash { animation: hurtFlash .42s ease-out; }
@keyframes hurtFlash { 0% { opacity: var(--hurt-a); } 100% { opacity: 0; } }
#hurt.lowhp { animation: hurtLowPulse 1.1s ease-in-out infinite; } /* 低血:持續脈動 */
@keyframes hurtLowPulse { 0%,100% { opacity: 0; } 50% { opacity: .38; } }
/* .flash 規則寫在 .lowhp 之後 → 兩者同時出現時,一次性紅屏先蓋過脈動,閃完移除再恢復脈動 */

/* ---- 虛擬搖桿(手機方向控制) ---- */
#joystick {
  position: fixed; right: 22px; bottom: calc(84px + env(safe-area-inset-bottom));
  width: 112px; height: 112px; border-radius: 50%; z-index: 20;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  touch-action: none; opacity: .5; user-select: none; -webkit-user-select: none;
}
#joystick:active { opacity: .8; }
#joy-knob {
  width: 48px; height: 48px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(135deg, #7c6cf0, #a08bff); box-shadow: 0 2px 10px #0007;
  transition: transform .04s linear;
}

/* ---- 功法格 HUD(野圖顯示,自動施放時轉 CD)---- */
#skillbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 15;
  display: flex; gap: 8px; pointer-events: none;
}
.sk-slot {
  position: relative; width: 44px; height: 44px; border-radius: 12px; overflow: hidden;
  background: rgba(20, 17, 35, .72); border: 1px solid var(--border);
  display: grid; place-items: center;
}
.sk-slot.cooling { border-color: var(--accent); }
/* 施放瞬間:格子 flash + punch(讓玩家知道「這下放出去了」)*/
.sk-slot.cast { animation: skCast .32s ease-out; }
@keyframes skCast {
  0% { transform: scale(1.28); box-shadow: 0 0 16px var(--accent); border-color: #fff; }
  100% { transform: scale(1); box-shadow: none; }
}
.sk-ico { font-size: 22px; line-height: 1; }
.sk-mask { position: absolute; inset: 0; pointer-events: none; }
.sk-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000;
}

/* 傳功閣:可展開的功法卡(點卡片展開介紹,學習鈕在裡面)---- */
.card.expandable { flex-wrap: wrap; cursor: pointer; }
.card.expandable:active { transform: scale(.99); }
.sk-detail { flex-basis: 100%; width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.sk-line { font-size: 12px; color: var(--mute); line-height: 1.7; }
.sk-line b { color: var(--text); }

/* ---- 底部工具列 ---- */
#dock { display: flex; flex-shrink: 0; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border); flex-wrap: wrap; }
#dock button { flex: 1; font-size: 12px; padding: 12px 4px; }
#dock button.on { background: linear-gradient(135deg, #7c6cf0, #a08bff); border-color: transparent; }
#dock button.blocked { opacity: .55; color: var(--danger); border-color: var(--danger); } /* 戰鬥中不能打坐 */

/* ---- 面板 ---- */
#backdrop { position: fixed; inset: 0; z-index: 25; background: rgba(8, 6, 16, .55); }
.sheet {
  position: fixed; inset: auto 0 0 0; max-height: 74dvh; overflow-y: auto; z-index: 30;
  background: var(--surface); border-top: 1px solid var(--border);
  border-radius: 18px 18px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
}
/* 桌面 / 寬螢幕:面板改成置中的「跳出視窗」,不再貼底整條拉滿 */
@media (min-width: 720px) {
  .sheet {
    inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    width: min(480px, 92vw); max-height: 82vh;
    border: 1px solid var(--border); border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
    padding: 18px 18px 22px;
  }
}
.sheet h2 { display: flex; justify-content: space-between; align-items: center; font-size: 17px; margin-bottom: 10px; }
.sheet h3 { font-size: 13px; color: var(--mute); margin: 16px 0 8px; }
.sheet .close { padding: 4px 12px; }
.hint { font-size: 12px; color: var(--mute); background: var(--surface-2);
  border-left: 3px solid var(--accent); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
/* v0.69 區塊說明:點標題(summary)才展開,預設收合 → 面板預設乾淨,想看說明再點。視覺對齊 .sheet h3 */
.hint-sec { margin: 16px 0 8px; }
.hint-sec > summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 700;
  color: var(--mute); padding: 2px 0; }
.hint-sec > summary::-webkit-details-marker { display: none; }
.hint-sec > summary::before { content: '▸ '; color: var(--accent); }
.hint-sec[open] > summary::before { content: '▾ '; }
.hint-sec > .hint { margin-top: 6px; }
/* 收合時明確藏起說明(不靠瀏覽器 UA 預設 —— 某些渲染引擎不會自動收合 details 內容) */
.hint-sec:not([open]) > .hint { display: none; }
/* 事件日誌:收合區(預設關)+ 上限下拉 + 分頁 */
.log-sec { margin-top: 6px; }
.log-sec > summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: var(--mute); padding: 4px 0; }
.log-sec > summary::-webkit-details-marker { display: none; }
.log-sec > summary::before { content: '▸ '; color: var(--accent); }
.log-sec[open] > summary::before { content: '▾ '; }
.log-sec:not([open]) > *:not(summary) { display: none; } /* 同 hint-sec:此渲染引擎不自動收合 */
.log-ctl { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 12px; color: var(--mute); }
.log-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.log-nav button { padding: 5px 12px; }
.log-nav-info { font-size: 12px; color: var(--mute); }
#log-list > div { font-size: 12px; line-height: 1.6; }
.sheet label { display: block; font-size: 13px; color: var(--mute); margin: 12px 0 4px; }
.sheet label.chk { display: flex; align-items: center; gap: 8px; color: var(--text); }
.sheet input[type=checkbox] { width: 18px; height: 18px; }

.card {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
}
.card .icon { font-size: 22px; }
.card .body { flex: 1; min-width: 0; }
.card .title { font-weight: 700; font-size: 14px; }
.card .desc { font-size: 11.5px; color: var(--mute); }
/* 裝備卡:基礎數值一列、詞條一列、寶石一列 —— 每個詞條 / 寶石是一顆小標籤,不再擠成一坨 */
.card .desc .eq-base { color: var(--mute); }
.aff-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.aff-lbl { font-size: 10px; color: var(--accent); font-weight: 700; }
.aff-lbl.gem { color: var(--gold); }
.aff-chip { font-size: 10.5px; line-height: 1.5; padding: 1px 7px; border-radius: 999px;
  background: rgba(139,124,246,.16); border: 1px solid rgba(139,124,246,.4); color: #cbbfff; white-space: nowrap; }
.aff-chip.gem { background: rgba(232,196,106,.14); border-color: rgba(232,196,106,.42); color: var(--gold); }
.aff-empty { font-size: 12px; color: var(--mute); letter-spacing: 3px; }
.card .actions { display: flex; gap: 6px; flex-shrink: 0; }
/* 多顆 / 長按鈕(如寶石槽的「搬移 450💎」×N)會把標題擠到一字一行 → 讓按鈕整排掉到標題下面 */
.card.wrap-acts { flex-wrap: wrap; }
.card.wrap-acts .actions { flex-basis: 100%; margin-top: 8px; justify-content: flex-end; flex-wrap: wrap; }
.card button { padding: 7px 10px; font-size: 12px; white-space: nowrap; }
/* 小型行內按鈕(如日誌「🗑️ 清除」放在 h3 旁) */
.mini-btn { font-size: 12px; padding: 3px 10px; margin-left: 8px; vertical-align: middle;
  border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--mute); }
.mini-btn:active { transform: scale(.96); }
/* 按鈕上下一欄(舊材料卡用;保留給其他地方) */
.btn-col { display: flex; flex-direction: column; gap: 4px; }
.btn-col button { min-width: 78px; }
/* v0.68 緊湊材料卡:小圖示 / 小字 / 四顆小鈕單排在標題下 → 每格矮很多 */
.card.mat { padding: 7px 11px; flex-wrap: wrap; gap: 8px; }
.card.mat .icon { font-size: 18px; }
.card.mat .title { font-size: 13px; }
.card.mat .mat-acts { flex-basis: 100%; display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap; }
.card.mat .mat-acts button { padding: 5px 12px; font-size: 12px; min-width: 46px; }
/* 掛機自動賣裝門檻下拉(階 / 品質) */
.sell-filter { margin: 6px 0 2px; padding: 8px 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; }
.sf-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--mute); margin-bottom: 6px; }
.sell-filter .hint { margin: 2px 0 0; }
select.sel { padding: 6px 10px; font-size: 13px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border); color: var(--text); min-width: 96px; }
/* 🗺️ 地圖情報:怪物 / 掉落卡 */
#hud-mapinfo { cursor: pointer; }
.mi-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; margin-bottom: 6px; }
.mi-h { font-size: 14px; font-weight: 700; }
.mi-h .mi-sub { font-size: 11px; color: var(--mute); font-weight: 400; }
.mi-b { font-size: 12px; color: var(--mute); margin-top: 3px; }
.mi-drop { font-size: 12.5px; padding: 7px 11px; margin-bottom: 5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
/* 🔁 討伐令里程碑 */
.ms-line { font-size: 12.5px; color: var(--mute); margin: 8px 0 6px; padding: 8px 10px; background: var(--surface-2); border-radius: 8px; line-height: 1.6; }
.ms-btn { display: block; width: 100%; margin-bottom: 6px; }
/* 數字 +/- 步進器(取代 input-number 的上下箭頭) */
.steprow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 8px 0; font-size: 13px; color: var(--mute); flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; padding: 3px 6px; }
.stepper .st-btn { width: 30px; height: 30px; padding: 0; font-size: 18px; line-height: 1;
  border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.stepper .st-btn:active { transform: scale(.9); }
.stepper .st-val { min-width: 26px; text-align: center; font-weight: 700; color: var(--text); font-size: 15px; }
.stepper .st-unit { color: var(--mute); font-size: 12px; }
.card.locked { opacity: .45; }
.slot-no { width: 22px; height: 22px; border-radius: 6px; background: var(--accent);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; }

#log-list div { font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--border); color: var(--mute); }
#log-list .hi { color: var(--gold); }
#log-list .bad { color: #ff9a9a; }

/* ---- 🎯 每日任務 ---- */
.quest { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 13px; margin-bottom: 10px; }
.quest.ready { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.quest.claimed { opacity: .5; }
.quest.allclear { background: linear-gradient(135deg, rgba(124,108,240,.12), rgba(232,196,106,.08)); }
.quest.repeat { background: linear-gradient(135deg, rgba(106,180,224,.11), rgba(124,108,240,.06)); }
.q-loop { color: var(--accent); font-size: 11px; }
.q-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.q-top b { font-size: 14px; }
.q-rw { font-size: 13px; color: var(--gold); white-space: nowrap; }
.q-desc { font-size: 12px; color: var(--mute); margin: 3px 0 7px; }
.q-bar { height: 7px; border-radius: 4px; background: rgba(0,0,0,.35); overflow: hidden; }
.q-bar span { display: block; height: 100%; border-radius: 4px; transition: width .3s;
  background: linear-gradient(90deg, #7c6cf0, #a08bff); }
.quest.ready .q-bar span { background: linear-gradient(90deg, #e8c46a, #f0d488); }
.q-prog { font-size: 11px; color: var(--mute); text-align: right; margin-top: 3px; }
.ver-line { margin-top: 6px; font-size: 12px; color: var(--mute); font-weight: 400; }
/* 分頁列(鍛器坊等:一次只看一種玩法)*/
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tabs button { flex: 1 1 auto; font-size: 12.5px; }
.tabs .tab.on { background: var(--accent); color: #fff; border-color: var(--accent); } /* 選中的分頁高亮 */
/* 離線掛機 主/備 速率槽 */
.oslot { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface-2); }
.oslot.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.oslot-head { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.oslot-use { color: var(--gold); font-size: 12px; font-weight: 400; }
.oslot-rate { font-size: 12px; color: var(--mute); line-height: 1.5; }
.oslot-rate strong { color: var(--gold); }
.oslot-note { font-size: 11px; color: var(--mute); line-height: 1.5; margin-top: 4px; }
#btn-offline-record { margin-top: 4px; }
.oslot-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.oslot-acts button { flex: 1 1 auto; }
.q-st { font-weight: 700; }
.q-st.doing { color: #7fb6e8; } /* 進行中(藍)*/
.q-st.ready { color: var(--gold); } /* 可領取(金)*/
.q-st.done { color: #7fd18a; } /* 已領(綠)*/
/* 已完成任務 → 收進可展開列表(預設收起)*/
.quest-done-group { margin-top: 8px; }
.quest-done-group > summary { cursor: pointer; padding: 9px 12px; color: var(--mute); font-size: 13px;
  border: 1px dashed var(--border); border-radius: 10px; list-style: none; user-select: none; }
.quest-done-group > summary::-webkit-details-marker { display: none; }
.quest-done-group > summary::before { content: '▸ '; }
.quest-done-group[open] > summary::before { content: '▾ '; }
.quest-done-group[open] > summary { margin-bottom: 8px; }
.quest-done-group .quest { margin-top: 8px; }
.quest button.primary { margin-top: 8px; width: 100%; }

/* ---- ⚡ 渡劫突破演出(z-index 60:蓋過 toast 50 / 面板 30)---- */
#tribulation.trib { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 20px;
  background: radial-gradient(circle at 50% 40%, rgba(30,20,60,.85), rgba(6,4,14,.97)); cursor: pointer; }
.trib-sky { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% -10%, rgba(130,95,230,.4), transparent 60%);
  animation: tribFlicker .45s infinite; }
@keyframes tribFlicker { 0%,100%{opacity:.5} 45%{opacity:.95} 50%{opacity:.25} }
.trib-eye { font-size: 62px; filter: drop-shadow(0 0 22px #a48bff); animation: tribPulse 1s infinite; }
@keyframes tribPulse { 0%,100%{transform:scale(1);opacity:.85} 50%{transform:scale(1.16);opacity:1} }
.trib-title { font-weight: 900; letter-spacing: 6px; }
.trib-title.glow { font-size: 34px; color: #cbb8ff; text-shadow: 0 0 18px #8b7cf6, 0 0 44px #6a4bd0; animation: tribPulse 1s infinite; }
.trib-title.big { font-size: 40px; animation: tribPop .55s cubic-bezier(.2,1.5,.4,1) both; position: relative; }
.trib-title.success { color: #ffe6a0; text-shadow: 0 0 24px #e8c46a, 0 0 60px #ffb347; }
.trib-title.fail { color: #ff8a8a; text-shadow: 0 0 22px #e05a5a; }
@keyframes tribPop { 0%{transform:scale(.3);opacity:0} 100%{transform:scale(1);opacity:1} }
.trib-flash { position: absolute; inset: 0; background: #fff; pointer-events: none; animation: tribFlash .55s ease-out both; }
.trib-flash.red { background: #ff5a5a; }
@keyframes tribFlash { 0%{opacity:.85} 100%{opacity:0} }
.trib-rays { position: absolute; inset: -20%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255,220,150,.16) 0deg 5deg, transparent 5deg 17deg);
  animation: tribSpin 9s linear infinite, tribFade .8s ease-out both; }
@keyframes tribSpin { to { transform: rotate(360deg); } }
@keyframes tribFade { from{opacity:0} to{opacity:1} }
.trib-realm { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: 3px; position: relative; }
.trib-power { font-size: 15px; color: var(--mute); position: relative; }
.trib-power b { color: var(--gold); font-size: 19px; }
.trib-power .up { color: var(--gold); font-weight: 800; margin-left: 5px; } /* 力量暴漲用金色(避開紅賺綠賠的紅綠歧義) */
.trib-sub { font-size: 13px; color: var(--mute); max-width: 82vw; position: relative; }
.trib-sub.gold { color: var(--gold); font-weight: 600; }
.trib-note { font-size: 11px; color: var(--mute); position: relative; }
.trib-tap { margin-top: 14px; font-size: 12px; color: var(--accent); opacity: .75; animation: tribPulse 1.4s infinite; position: relative; }
.trib-bolts { font-size: 58px; position: relative; animation: tribShake .38s 3; }
@keyframes tribShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-9px)} 75%{transform:translateX(9px)} }
.trib.reveal.fail { animation: tribShake .32s 2; }
/* 飛升更盛大:不同世界層換色調 */
.trib.ascend-minor { background: radial-gradient(circle at 50% 40%, rgba(40,90,130,.92), rgba(4,10,22,.98)); }
.trib.ascend-minor .trib-title.success { color: #bfe6ff; text-shadow: 0 0 26px #6ab4e0, 0 0 64px #3a8fd0; }
.trib.ascend-major { background: radial-gradient(circle at 50% 40%, rgba(130,95,25,.95), rgba(16,9,2,.99)); }

/* ---- 🧘 離線收益(閉關)歡迎回來窗 ---- */
#welcome { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: radial-gradient(circle at 50% 40%, rgba(30,25,55,.9), rgba(6,4,14,.95)); }
.wel-box { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 22px 20px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.wel-title { font-size: 20px; font-weight: 800; background: linear-gradient(90deg, #a99bff, #e8c46a);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.wel-cap { font-size: 12px; color: var(--mute); -webkit-text-fill-color: var(--mute); }
.wel-sub { font-size: 12px; color: var(--mute); margin: 6px 0 16px; }
.wel-rows { text-align: left; display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.wel-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 14px; padding: 8px 12px; background: var(--surface-2); border-radius: 10px; }
.wel-rows span { color: var(--mute); font-size: 13px; }
.wel-rows b { color: var(--gold); }
.wel-bymon b { color: var(--text); font-weight: 500; font-size: 12px; text-align: right; } /* 各怪種細目可能較長 → 允許換行 */
.wel-ok { width: 100%; }

/* ---- 📜 技能欄拖動排序:握把 + 拖曳中樣式 ---- */
.sk-grip { cursor: grab; touch-action: none; font-size: 18px; line-height: 1; padding: 6px 10px;
  color: var(--mute); background: var(--surface-2); }
.sk-grip:active { cursor: grabbing; }
.sk-bar-card.dragging { opacity: .75; border-color: var(--gold) !important; box-shadow: 0 6px 18px rgba(0,0,0,.4); }

/* ---- 🎰 機率動作滾動數字揭示(強化 / 合成手動單顆)---- */
#roll-reveal { position: fixed; inset: 0; z-index: 58; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: radial-gradient(circle at 50% 42%, rgba(30,25,55,.82), rgba(6,4,14,.9)); }
.rr-box { width: min(320px, 92vw); background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 20px 18px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.rr-title { font-size: 15px; color: var(--mute); }
.rr-rate { font-size: 14px; margin: 2px 0 12px; } .rr-rate b { color: var(--gold); font-size: 17px; }
.rr-num { height: 88px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #12101c; border: 2px solid var(--border); border-radius: 14px; margin: 0 auto; width: 130px; }
.rr-num span { font-size: 54px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
  background: linear-gradient(180deg, #d8c9ff, #a99bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rr-num.ok  { border-color: var(--gold); }
.rr-num.ok span  { background: linear-gradient(180deg, #ffe9a8, #e8c46a); -webkit-background-clip: text; background-clip: text; }
.rr-num.fail { border-color: #e06a6a; }
.rr-num.fail span { background: linear-gradient(180deg, #ffb0b0, #e06a6a); -webkit-background-clip: text; background-clip: text; }
.rr-thr { font-size: 12px; color: var(--mute); margin-top: 8px; }
.rr-result { font-size: 20px; font-weight: 800; margin-top: 10px; min-height: 26px; }
.rr-result.ok { color: var(--gold); } .rr-result.fail { color: #e06a6a; }

/* ---- 💎 我的寶石:種類篩選晶片(寶石多時點一下只看某種類)---- */
.gem-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.gem-chip { padding: 4px 10px; font-size: 12px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--mute); cursor: pointer; }
.gem-chip.on { border-color: var(--gold); color: var(--gold); background: rgba(232,196,106,.1); }
/* 選階一鍵合成列 */
.gem-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px; font-size: 13px; color: var(--mute); }
.gem-bulk .sel { min-width: 72px; }

/* ---- 💠 鑲嵌目標挑選(選了寶石 → 直接彈出「有空槽的裝備」清單,免捲到最底)---- */
#gem-picker, #confirm { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(8, 6, 16, .6); }
#confirm .pk-box .actions { margin-top: 14px; display: flex; gap: 8px; }
#confirm .pk-box .actions button { flex: 1; }
.pk-box { width: min(440px, 100%); max-height: 80dvh; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; padding: 18px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.pk-box h2 { display: flex; justify-content: space-between; align-items: center; font-size: 16px; margin-bottom: 4px; }
.pk-box .close { padding: 4px 12px; }
.pk-gem { font-size: 13px; color: var(--mute); margin-bottom: 12px; }
.pk-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-bottom: 8px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; transition: border-color .12s, background .12s; }
.pk-item:hover, .pk-item:active { border-color: var(--gold); background: rgba(232,196,106,.08); }
.pk-item .pk-ico { font-size: 22px; }
.pk-item .pk-main { flex: 1; min-width: 0; }
.pk-item .pk-name { font-weight: 600; font-size: 14px; }
.pk-item .pk-sub { font-size: 12px; color: var(--mute); }
.pk-item .pk-go { color: var(--gold); font-size: 13px; white-space: nowrap; }

/* ---- ✨ 洗鍊(重擲詞條)---- */
.reforge-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 7px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 13px; }
.reforge-row.locked { border-color: var(--gold); color: var(--gold); }
.reforge-row input { width: 18px; height: 18px; accent-color: var(--gold); }

/* 渡劫演出:突破前的境界(淡化,箭頭指向新境界 → 一看就知是升上去不是倒退) */
.trib-from { color: var(--mute); font-weight: 400; font-size: 16px; }