/* 星露奇境 介面（介面改版：WebMMORPG 式三欄冒險者版面）
   米白底、圓角白卡片、淡綠點綴；左欄冒險者資訊／能力／任務，中間場景＋操作列＋冒險紀錄與聊天室，右欄旅途資訊與功能 */
:root {
  --bg: #edf2e9;
  --bg2: #e2ecdf;
  --card: #fffcf5;
  --card2: #fffdf8;
  --line: #d9e5d5;
  --line2: #e8e6d8;
  --ink: #3f6456;
  --ink-soft: #84a090;
  --ink-mute: #9db0a2;
  --accent: #3b7762;
  --green: #84bf96;
  --green-deep: #4c9468;
  --green-pale: #e5f1e3;
  --soft: #f1f6ed;
  --pink: #efa6b6;
  --pink-pale: #fcebf0;
  --hp: #f19aa0;
  --mp: #8fc8e2;
  --exp: #a9d48f;
  --gold: #dcb04f;
  --jade: #8db7e8;
  --shadow: 0 6px 18px rgba(64, 104, 77, .08), 0 1px 2px rgba(64, 104, 77, .08);
  --radius: 18px;
  /* 背包外框、整理鈕、密語紀錄（夜間模式在 [data-theme="dark"] 覆寫） */
  --bag-bg1: #fffdf5;
  --bag-bg2: #f3f7ec;
  --bag-line: #c9d9bc;
  --sort-bg: #f4dce5;
  --sort-line: #dfb9c8;
  --sort-ink: #86566c;
  --wh-log-bg: #f4f2e6;
  --wh-mine: #3f8f5a;
  --wh-other: #b5508f;
  --close-bg: #fff;
  --potion-bg: #fffdf7;
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
  color: var(--ink);
}

[data-theme="dark"] {
  --bg: #141a17;
  --bg2: #1b2420;
  --card: #1c2621;
  --card2: #23302a;
  --line: #2e3e35;
  --line2: #384b41;
  --ink: #dbe8e1;
  --ink-soft: #9bb5a7;
  --ink-mute: #7a9486;
  --accent: #6ecfa7;
  --green: #58a87b;
  --green-deep: #70d49e;
  --green-pale: #1f3529;
  --soft: #233029;
  --pink: #e5889e;
  --pink-pale: #3d242c;
  --hp: #f19aa0;
  --mp: #8fc8e2;
  --exp: #a9d48f;
  --gold: #e5bb5c;
  --jade: #9cc1ee;
  --shadow: 0 6px 20px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);
  --bag-bg1: #1f2a24;
  --bag-bg2: #18211c;
  --bag-line: #3a4d42;
  --sort-bg: #3d242c;
  --sort-line: #6b4252;
  --sort-ink: #f2bccd;
  --wh-log-bg: #161e1a;
  --wh-mine: #87d4b0;
  --wh-other: #f28cc9;
  --close-bg: var(--card2);
  --potion-bg: #2c3a33;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: linear-gradient(135deg, #f9f9f1, #dbe9dd); overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
input, select { font: inherit; color: var(--ink); }
.hidden { display: none !important; }

.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ---------- 上方選單列 ---------- */
.topbar {
  display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 18px; flex: none;
  background: rgba(255, 253, 245, .96); border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.logo-icon {
  width: 34px; height: 34px; border-radius: 12px; flex: none;
  object-fit: cover; box-shadow: 0 0 0 1px var(--line);
}
.logo-name { font-size: 21px; font-weight: 800; letter-spacing: 3px; color: var(--accent); }
.logo-sub { font-size: 9px; letter-spacing: 2px; color: var(--ink-mute); }
.menu { display: flex; gap: 2px; flex: 1; justify-content: center; }
.menu-btn {
  display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 7px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 700; color: #5f8676;
}
.menu-btn:hover { background: var(--green-pale); }
.ico { width: 18px; height: 18px; border-radius: 6px; display: inline-block; background: var(--green); }
.ico-bag { background: #d9a35b; } .ico-skill { background: var(--pink); } .ico-forge { background: #a0a7b5; }
.ico-shop { background: #e08f6e; } .ico-friend { background: #7fb6e8; } .ico-team { background: #e6a85b; } .ico-rank { background: #c9a227; }
.top-icons { display: flex; align-items: center; gap: 8px; }
#btnTheme { font-size: 16px; padding: 0; line-height: 1; user-select: none; }
.round-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--card2);
  box-shadow: var(--shadow); flex: none; display: grid; place-items: center; padding: 0;
}
.top-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--pink-pale); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); }

/* ---------- 三欄版面 ---------- */
.layout {
  flex: 1; min-height: 0; display: grid; grid-template-columns: 282px minmax(420px, 1fr) 282px; gap: 12px; padding: 12px;
}
.side {
  display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #b3cdb7 transparent;
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 14px; position: relative;
}
.card-title {
  margin: 0 0 10px; padding-bottom: 9px; border-bottom: 1px dashed var(--line2);
  font-size: 14px; font-weight: 800; color: #4f806b; letter-spacing: .4px; display: flex; align-items: center; gap: 8px;
}
.card-title small { font-size: 11px; color: var(--ink-mute); font-weight: 500; margin-left: auto; }
.card-title .more { margin-left: auto; font-size: 12px; color: var(--ink-soft); font-weight: 400; cursor: pointer; }
.leaf { width: 14px; height: 9px; border-radius: 0 100% 0 100%; background: var(--green); display: inline-block; transform: rotate(-30deg); }
.flower { width: 16px; height: 16px; border-radius: 50%; display: inline-block; background: radial-gradient(circle, #fff3a8 0 3px, var(--pink) 4px); }

/* 可收合區（details） */
details.fold > summary { list-style: none; cursor: pointer; user-select: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "▾"; margin-left: auto; color: var(--ink-mute); transition: transform .2s; }
details.fold:not([open]) > summary { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
details.fold:not([open]) > summary::after { transform: rotate(-90deg); }

/* 共用按鈕 */
.soft-btn {
  border: 1px solid var(--line); background: var(--card2); border-radius: 10px; padding: 7px 10px; font-size: 13px; font-weight: 700;
  color: #5c8172; box-shadow: 0 2px 2px rgba(89,109,66,.12), inset 0 1px 0 #fff;
}
.soft-btn:hover { border-color: var(--green); background: #f6fbf3; }
.soft-btn:active { box-shadow: inset 0 2px 4px rgba(72,100,67,.18); }
.soft-btn.wide { width: 100%; }
.tiny-btn { border: 1px solid var(--line); background: var(--card2); border-radius: 99px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.tiny-btn:hover { border-color: var(--green); }
.tiny-btn.on { background: var(--green-pale); border-color: var(--green); color: var(--green-deep); }
.tiny-btn:disabled { opacity: .5; }
.main-btn {
  width: 100%; height: 42px; border: 0; border-radius: 12px; color: #fff; font-weight: 800; font-size: 15px;
  background: linear-gradient(#6fb98a, #3f8f61); box-shadow: var(--shadow);
}
.sub-btn { width: 100%; height: 40px; margin-top: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); font-weight: 700; }
.sub-btn:disabled { opacity: .55; cursor: default; }

/* ---------- 左欄：冒險者資訊 ---------- */
.char-head { display: flex; gap: 12px; align-items: center; margin: 2px 0 8px; }
.avatar {
  width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 26px; font-weight: 800; color: #fff; background: var(--green);
  border: 4px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 4px 12px rgba(214,181,189,.35);
}
.char-meta { min-width: 0; }
.portrait { position: relative; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.portrait .portrait-canvas { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.portrait-ready { background: var(--green-pale) !important; }
.portrait-ready .portrait-canvas { visibility: visible; }
.portrait-ready .portrait-fallback { visibility: hidden; }
.char-portrait {
  width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--green-pale);
  border: 2px solid var(--line); color: var(--ink); font-size: 25px; font-weight: 800;
}
.char-name { font-size: 18px; font-weight: 800; color: #4a7766; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-sub { font-size: 12px; color: #6f9282; margin-top: 2px; font-weight: 700; }
.char-title { font-size: 10px; color: var(--ink-mute); margin-top: 3px; }
#charLevel { display: inline-block; }
#charLevel.lvpop { animation: lvpop .8s ease-out; }
@keyframes lvpop { 0% { transform: scale(1); color: #ffb02e; } 30% { transform: scale(1.8); color: #ffb02e; } 100% { transform: scale(1); } }
.meter-label { display: flex; justify-content: space-between; font-size: 11px; color: #8ca493; margin-top: 8px; margin-bottom: 4px; }
.meter-label b { color: #64897a; font-weight: 700; font-variant-numeric: tabular-nums; }
.bar { height: 8px; border-radius: 99px; background: #e9eee1; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .3s; }
.bar-hp i { background: linear-gradient(90deg, #f7b6b9, var(--hp)); }
.bar-mp i { background: linear-gradient(90deg, #b9def0, var(--mp)); }
.bar-exp i { background: linear-gradient(90deg, #c9e6b6, var(--exp)); }
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; align-items: center; }
.tag { font-size: 11px; font-weight: 700; border-radius: 99px; padding: 2px 8px; background: var(--soft); color: #5f8a72; border: 1px solid var(--line); }
.tag-job { background: #e8f5e9; color: var(--green-deep); border-color: #b9dcbf; }
.tag-realm { background: #f2edfb; color: #7a62b0; border-color: #ddd2f0; }
.tag-power b { color: #c9772c; display: inline-block; }
.tag-power b.up { animation: lvpop .8s ease-out; }
#realmBtn { background: #fff0c9; border-color: #e8b54a; color: #9a6a10; }
.wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.wallet-grid .coin { background: var(--soft); border-radius: 10px; padding: 6px 8px; font-size: 12px; position: relative; cursor: help; }
/* 貨幣只顯示圖示與數量，滑過或點一下才顯示名稱與說明 */
.wallet-grid .coin[data-tip]:hover::after, .wallet-grid .coin[data-tip]:focus::after {
  content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: 220px;
  background: rgba(38,58,48,.95); color: #eef5ea; font-size: 12px; font-weight: 500; line-height: 1.5; padding: 8px 10px; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); pointer-events: none; }
.wallet-grid .coin-jade[data-tip]:hover::after, .wallet-grid .coin-jade[data-tip]:focus::after { left: auto; right: 0; }
.wallet-grid .coin:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.wallet-grid .coin span { color: var(--ink-soft); font-weight: 500; }
.wallet-grid .coin b { margin-left: auto; font-variant-numeric: tabular-nums; }
.coin { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.coin i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; flex: none; }
.coin-gold i { background: radial-gradient(circle at 35% 35%, #fff2b3, var(--gold)); box-shadow: inset 0 -2px #c99320; }
.coin-jade i { background: radial-gradient(circle at 35% 35%, #e9f4ff, var(--jade)); transform: rotate(45deg); border-radius: 4px; width: 14px; height: 14px; }
.coin i.has-ico { border-radius: 0; box-shadow: none; transform: none; width: 20px; height: 20px; }

/* 基礎能力與裝備 */
.ap-badge { font-size: 11px; font-weight: 800; color: #fff; background: var(--green-deep); border-radius: 99px; padding: 1px 8px; margin-left: auto; }
.ap-badge.zero { background: #c9d6cb; }
.ap-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; background: #eaf5e6; border-radius: 9px; padding: 5px 9px; margin-bottom: 7px; color: #5a8a6c; }
.ap-row b { font-size: 15px; color: var(--green-deep); }
.attr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-bottom: 7px; }
.attr { display: flex; align-items: center; gap: 4px; padding: 3px 5px 3px 8px; min-height: 32px; border-radius: 8px; background: var(--soft); font-size: 11px; }
.attr span { color: #6c8d7c; font-weight: 700; }
.attr span small { font-weight: 400; color: var(--ink-mute); margin-left: 2px; }
.attr b { margin-left: auto; font-size: 13px; min-width: 18px; text-align: right; font-variant-numeric: tabular-nums; }
.attr button {
  width: 24px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid #b9dcbf; background: #fff; color: var(--green-deep);
  font-size: 15px; font-weight: 800; line-height: 1; flex: none;
}
.attr button:disabled { opacity: .35; cursor: default; }
.attr.bump b { animation: lvpop .6s ease-out; }
.ap-confirm { background: #fffaf0; border: 1px solid #ecdcb6; border-radius: 10px; padding: 7px 9px; margin: 6px 0; font-size: 12px; }
.ap-confirm p { margin: 0 0 6px; line-height: 1.6; }
.derived { font-size: 11px; line-height: 1.6; color: #6f8f7f; margin: 8px 0; background: #f6f8ef; border-radius: 8px; padding: 5px 8px; }
.equip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.eq-slot {
  position: relative; border-radius: 10px; background: #f5f3e7; border: 2px solid var(--line2); height: 52px; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-soft);
}
.eq-slot.has { background: var(--card2); cursor: pointer; }
.eq-slot i { width: 24px; height: 24px; border-radius: 50%; display: block; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.eq-slot span { display: block; box-sizing: border-box; font-weight: 700; color: var(--ink); max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 3px; }
.eq-slot em, .bag-slot em { position: absolute; left: 3px; top: 1px; font-style: normal; font-size: 10px; font-weight: 800; color: #d0782a; }
.equip-tip { font-size: 11px; color: var(--ink-mute); margin: 6px 0 0; }
.two-btn { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }

/* 冒險任務 */
#questTrack { display: flex; flex-direction: column; gap: 7px; }
.qt-item { border-radius: 12px; padding: 8px 10px; cursor: pointer; border: 1px solid var(--line2); background: #f9f6e8; transition: background .15s, border-color .15s; }
.qt-item:hover { border-color: #a1caaa; }
.qt-item.tracking { border-color: #a1caaa; background: #e8f5e9; }
.qt-item.qt-side { background: #f8f9f2; }
.qt-item.open .quest-name { color: var(--ink-soft); }
.quest-tag { font-size: 11px; color: #bc9a7f; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.qt-item.qt-side .quest-tag { color: #6f9a4f; }
.qt-code { font-size: 10px; color: var(--ink-mute); background: #fff; border-radius: 6px; padding: 0 5px; font-weight: 700; }
.qt-go { margin-left: auto; font-size: 10px; font-weight: 700; color: #fff; background: var(--green-deep); border-radius: 99px; padding: 1px 8px; }
.qt-item.tracking .qt-go { background: var(--pink); }
.quest-name { font-size: 15px; font-weight: 800; margin: 4px 0; color: #50846a; }
.quest-desc { font-size: 11px; color: #8d9883; line-height: 1.6; margin: 0 0 6px; }
.quest-steps { list-style: none; padding: 6px 0 0; margin: 0; font-size: 12px; border-top: 1px dashed #d8dec8; font-weight: 700; color: #6e9b7b; }
.quest-steps li { padding: 2px 0 2px 20px; position: relative; }
.quest-steps li::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); background: #fff; }
.quest-steps li.done::before { background: var(--green); border-color: var(--green); box-shadow: inset 0 0 0 2px #fff; }
.quest-steps li.turnin { color: #c0782a; }
.quest-steps li.turnin::before { border-color: #e8a320; background: #fff3d1; }
.quest-reward-title { font-size: 11px; color: var(--ink-mute); margin: 6px 0 4px; }
.rewards { display: flex; gap: 5px; flex-wrap: wrap; }
.reward { display: flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; background: #fff; border-radius: 8px; padding: 3px 6px; }
.reward i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 7px; color: #fff; flex: none; }
.r-exp { background: var(--green-deep); } .r-gold { background: radial-gradient(circle at 35% 35%, #fff2b3, var(--gold)); } .r-item { background: radial-gradient(circle at 50% 30%, #bfe3a6, #6ea85a); }
.reward i[style*="assets/icons"] { border-radius: 0; color: transparent; }
.qt-auto { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 8px; cursor: pointer; }

/* ---------- 中間欄 ---------- */
.center { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(210px, 46.75dvh) auto minmax(160px, 1fr); gap: 8px; position: relative; }
.center.hidden-stage { grid-template-rows: auto minmax(160px, 1fr); }
.center.hidden-stage > .stage { display: none; }
.stage {
  --hud-scale: 1;
  container-type: inline-size;
  container-name: stage;
  position: relative; min-width: 0; min-height: 0; border-radius: 20px; overflow: hidden;
  border: 6px solid #fcfbf0; box-shadow: 0 9px 24px rgba(76,128,99,.14); background: #9fc6a9;
}
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
.pill {
  position: absolute; top: 12px; display: flex; align-items: center; gap: 7px; z-index: 3;
  background: rgba(255, 254, 242, .93); color: #4d876c; border-radius: 99px; padding: 7px 14px;
  font-weight: 800; font-size: 13px; box-shadow: 0 4px 12px rgba(61,119,84,.14); pointer-events: none;
}
.pill-loc {
  left: 12px;
  transform: scale(var(--hud-scale, 1));
  transform-origin: top left;
  max-width: calc((100% - 240px * var(--hud-scale, 1)) / var(--hud-scale, 1));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.stage-tr {
  position: absolute; top: 10px; right: 12px; display: flex; gap: 8px; align-items: flex-start; z-index: 3; pointer-events: none;
  transform: scale(var(--hud-scale, 1));
  transform-origin: top right;
}
.stage-tr .pill { position: static; font-weight: 700; margin-top: 2px; }
.minimap {
  width: 92px; height: 92px; border-radius: 50%; overflow: hidden; background: #fffdf2;
  border: 4px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 4px 12px rgba(61,119,84,.2);
}
.minimap canvas { width: 100%; height: 100%; display: block; object-fit: cover; }
.side-toggle {
  display: none; position: absolute; top: 56px; width: 36px; height: 36px; border-radius: 50%; z-index: 5;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow);
}
.toggle-left { left: 12px; transform: scale(var(--hud-scale, 1)); transform-origin: top left; }
.toggle-right { right: 12px; top: 112px; transform: scale(var(--hud-scale, 1)); transform-origin: top right; }

/* 技能列（場景底部置中，隨場景框縮放） */
.hotbar {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%) scale(var(--hud-scale, 1));
  transform-origin: bottom center;
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: flex-end;
  pointer-events: none;
  z-index: 3;
  width: max-content;
  max-width: calc((100% - 24px) / var(--hud-scale, 1));
}
.hotbar > * { pointer-events: auto; }
.skills, .potions { display: flex; gap: 7px; background: rgba(255,253,246,.88); padding: 6px 8px 10px; border-radius: 16px; box-shadow: 0 4px 15px rgba(61,119,84,.18); }

/* 場景框很窄時（< 620px）：資源條移到技能列上方一行，技能與藥水並排於下方 */
@media (min-width: 821px) {
  .stage.narrow .hotbar {
    display: grid;
    grid-template-areas:
      "blade blade"
      "skills potions";
    justify-content: center;
    align-items: end;
    gap: 6px 10px;
  }
  .stage.narrow .blade-bar {
    grid-area: blade;
    justify-self: center;
    max-width: 100%;
  }
  .stage.narrow .skills {
    grid-area: skills;
  }
  .stage.narrow .potions {
    grid-area: potions;
  }
}

@container stage (max-width: 619px) {
  @media (min-width: 821px) {
    .hotbar {
      display: grid;
      grid-template-areas:
        "blade blade"
        "skills potions";
      justify-content: center;
      align-items: end;
      gap: 6px 10px;
    }
    .blade-bar {
      grid-area: blade;
      justify-self: center;
      max-width: 100%;
    }
    .skills {
      grid-area: skills;
    }
    .potions {
      grid-area: potions;
    }
  }
}
.skill-slot, .potion {
  width: 48px; height: 48px; border-radius: 12px; position: relative; overflow: visible;
  border: 1px solid #e5d4b7; background: #fff5e6; box-shadow: 0 2px 0 #e5d4b7;
}
.skill-slot.locked { background: #eceae2; border-color: #d6d2c4; }
.skill-key {
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 16px; height: 16px; border-radius: 50%; background: #5f7f70; color: #fff; font-size: 10px; line-height: 16px;
}
.potion-hp { background: radial-gradient(circle at 50% 60%, #ff9aa5 0 10px, #fffdf7 11px); }
.potion-mp { background: radial-gradient(circle at 50% 60%, #8fc0f5 0 10px, #fffdf7 11px); }
.potion b { position: absolute; right: 3px; bottom: 0; font-size: 11px; text-shadow: 0 0 3px #fff; z-index: 2; }
.skill-slot .skill-name {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #7a5232;
  letter-spacing: 1px; text-shadow: 0 1px 0 #fff;
}
.skill-slot .cd, .potion .cd {
  position: absolute; inset: 0; border-radius: inherit; display: grid; place-items: center; pointer-events: none;
  font-style: normal; font-weight: 800; font-size: 12px; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.6); z-index: 1;
}
.skill-slot.no-mp .skill-name { color: #6a8bbf; opacity: .6; }
.skill-slot.lv-low { filter: grayscale(.8); }
.skill-slot.lv-low .cd { background: rgba(120,110,100,.35) !important; font-size: 10px; align-items: end; padding-bottom: 6px; color: #6b5a46; text-shadow: 0 0 2px #fff; }
.skill-slot.lv-low .skill-name { inset: 0 0 auto 0; height: 60%; align-items: end; opacity: .55; font-size: 12px; }
.skill-slot.queued { box-shadow: 0 0 0 3px var(--pink); }
.skill-slot.locked .skill-name { display: none; }
.skill-slot .skill-lv { position: absolute; left: 3px; top: 1px; font-size: 9px; font-weight: 800; color: #d0782a; z-index: 3; }
.skill-slot.has-ico { background-size: 76%; background-position: center 40%; background-repeat: no-repeat; background-color: #fff8e6; }
.skill-slot.has-ico .skill-name { place-items: end center; padding-bottom: 5px; font-size: 9px; letter-spacing: 0; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; }
.potion.has-ico { background-color: #fffdf7; }

/* 場景下方操作列 */
.ctrl-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 4px; }
.ctrl-tip { flex: 1; min-width: 0; font-size: 11px; color: #819c8b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoom { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
.zoom button { width: 32px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid var(--line); background: var(--card2); font-size: 16px; font-weight: 800; color: #5c8172; }
.zoom span { min-width: 44px; text-align: center; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* 冒險紀錄＋聊天室 */
.dock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px; min-height: 0; }
.dock-card { display: flex; flex-direction: column; min-height: 0; padding: 9px 11px; border-radius: 14px; }
.dock-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dock-head .card-title { margin: 0; padding: 0; border: 0; flex: none; }
.dock-tabs { display: flex; gap: 3px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dock-tabs button { border: 1px solid transparent; background: transparent; color: var(--ink-soft); border-radius: 7px; padding: 3px 8px; font-size: 12px; white-space: nowrap; flex: none; }
.dock-tabs button.active { background: var(--green-pale); border-color: var(--line); color: var(--accent); font-weight: 800; }
.dock-swap { display: none; }
.log-list, .chat-log {
  flex: 1; min-height: 0; overflow-y: auto; font-size: 12.5px; line-height: 1.6; padding: 4px 8px;
  background: #f4f2e6; border-radius: 9px; box-shadow: inset 0 2px 5px rgba(106,120,85,.1);
}
.line { word-break: break-all; padding: 1px 0; }
.line .ts { color: var(--ink-mute); font-size: 10.5px; margin-right: 5px; font-variant-numeric: tabular-nums; }
.log-list .ch-sys { color: #4f7464; }
.log-list .ch-cbt { color: #9a6a54; font-size: 12px; }
.log-list .ch-kill { color: #5c7f3c; }
.log-list .ch-loot { color: #8b6b32; }
.log-list .ch-notice { color: #b0761c; font-weight: 700; }
.chat-log .ch-world { color: #79619b; }
.chat-log .ch-near { color: #3f6456; }
.chat-log .ch-party { color: #2f7fb5; }
.chat-log .ch-whisper { color: #b2508f; }
.chat-log .ch-notice { color: #b0761c; font-weight: 700; }
.chat-log .nm { cursor: pointer; font-weight: 700; }
.chat-log .nm:hover { text-decoration: underline; }
.guild-note { margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); background: #fffaf0; border-radius: 8px; padding: 6px 8px; }
.chat-input { display: flex; gap: 6px; margin-top: 6px; }
.chat-input select { border: 1px solid var(--line); background: var(--green-pale); border-radius: 8px; padding: 0 4px; height: 32px; }
.chat-input input { flex: 1; min-width: 0; border: 1px solid var(--line); background: #fff; border-radius: 8px; outline: none; padding: 5px 9px; height: 32px; }
.send-btn { border: 0; background: var(--green-deep); color: #fff; height: 32px; padding: 0 14px; border-radius: 8px; font-weight: 800; }
.chat-fold { display: none; border: 1px solid var(--line); background: var(--card2); width: 28px; height: 24px; border-radius: 8px; font-size: 12px; flex: none; }

/* ---------- 右欄 ---------- */
.travel-info { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0; font-size: 12px; background: var(--soft); border-radius: 10px; padding: 9px 11px; }
.travel-info dt { color: var(--ink-soft); }
.travel-info dd { margin: 0; font-weight: 800; text-align: right; color: #4a7766; }
#tvType.t-safe { color: var(--green-deep); } #tvType.t-hunt { color: #c4553f; } #tvType.t-dungeon { color: #8a5ab8; }
#tvState.s-hunt { color: #c4553f; } #tvState.s-quest { color: #2f7fb5; }
.func-list { display: flex; flex-direction: column; gap: 6px; }
.func-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; width: 100%;
  border: 1px solid #ecebe0; background: var(--card2); border-radius: 12px; padding: 7px 10px; color: #5f8273;
}
.func-btn b { font-size: 13px; } .func-btn small { font-size: 10px; color: var(--ink-mute); }
.func-btn:hover { border-color: #a1caaa; background: #f3faf1; }
.only-mobile { display: none; }
.auto-btn {
  width: 100%; height: 48px; border-radius: 14px; border: 3px solid #fff; margin: 2px 0;
  background: linear-gradient(#6fbf8a, #3f9461); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 1px;
  box-shadow: 0 0 0 1px #8cc9a0, var(--shadow);
}
.auto-btn:hover { filter: brightness(1.05); }
.auto-btn.on { background: linear-gradient(#f2a7b8, #d67a8f); box-shadow: 0 0 0 1px #f2c2cf, var(--shadow); }
.switch-list { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.switch-list label { display: flex; align-items: center; gap: 6px; cursor: pointer; background: var(--soft); border-radius: 8px; padding: 5px 8px; }
.switch-list label.disabled { opacity: .5; cursor: default; }
.loot-note { font-size: 11px; line-height: 1.7; color: #86a58f; background: #edf5e9; border-radius: 10px; padding: 7px 9px; margin: 8px 0 0; }
.gm-btn { align-self: flex-start; border: 1px dashed #c9bfae; background: transparent; color: #a08a6a; border-radius: 8px; padding: 3px 9px; font-size: 11px; }
.gm-diag { font: 12px/1.6 Consolas, monospace; background: #f4f2e6; border-radius: 8px; padding: 8px; margin: 0 0 8px; white-space: pre-wrap; }
.gm-cmds { display: flex; gap: 6px; flex-wrap: wrap; }
.map-list { display: flex; flex-direction: column; gap: 6px; max-height: 380px; overflow-y: auto; }
.map-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 12px; background: var(--soft); border: 1px solid transparent; }
.map-row.here { border-color: #a1caaa; background: #e8f5e9; }
.map-row div { flex: 1; min-width: 0; }
.map-row b { display: block; font-size: 14px; }
.map-population { color: #c62828; font-weight: normal; display: inline-block; }
[data-theme="dark"] .map-population { color: #ff8585; }
.map-row small { font-size: 11px; color: var(--ink-soft); }
.map-row small.map-who { display: block; margin-top: 2px; line-height: 1.4; }

/* ---------- 目標框、視窗 ---------- */
.target-frame {
  position: absolute; top: 12px; left: 50%; width: 240px; z-index: 4;
  background: rgba(255,253,247,.94); border: 1px solid var(--line); border-radius: 14px; padding: 6px 12px 5px; box-shadow: var(--shadow);
  transform: translateX(-50%) scale(var(--hud-scale, 1));
  transform-origin: top center;
}
.tf-head { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.tf-lv { margin-left: auto; color: #b0763f; font-weight: 700; font-size: 12px; }
.tf-tag { font-size: 10px; border-radius: 99px; padding: 1px 7px; background: var(--green-pale); color: var(--green-deep); font-weight: 700; }
.tf-tag.aggro { background: #fde3dc; color: #c4553f; }
.tf-tag.boss { background: #fff0c9; color: #b07a1e; }
.target-frame .bar { height: 8px; margin-top: 3px; }
.tf-hp { font-size: 10px; text-align: center; color: var(--ink-soft); margin-top: 1px; }

.win { position: absolute; z-index: 6; right: 14px; top: 58px; width: 404px; max-width: calc(100% - 28px); max-height: calc(100% - 72px); overflow-y: auto; }
.win-left { left: 14px; right: auto; }
.win-close {
  margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--close-bg); color: var(--ink);
  font-size: 17px; line-height: 1; position: relative; z-index: 1; flex: none; padding: 0;
}
.card-title small + .win-close { margin-left: 8px; }
.bag-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.bag-slot {
  aspect-ratio: 1; border-radius: 9px; background: #f4f2e6; border: 1px solid var(--line2); position: relative;
  display: grid; place-items: center; font-size: 10px; color: var(--ink-soft);
}
.bag-slot.has { background: var(--card2); cursor: default; }
.bag-slot.t-potion, .bag-slot.t-equip, .bag-slot.t-material { cursor: pointer; }
.bag-slot.t-potion:hover { border-color: var(--green); }
.bag-slot.t-equip { border-color: #e6c87a; }
.bag-slot i { width: 22px; height: 22px; border-radius: 50%; display: block; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); margin-top: -8px; }
.bag-slot span { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-weight: 700; color: var(--ink); }
.bag-slot b { position: absolute; top: 1px; right: 4px; font-size: 10px; color: #8a5a2a; }
.bag-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
.bag-slot i.has-ico, .bag-slot i[style*="assets/icons"] { width: 78%; height: 78%; border-radius: 0; box-shadow: none; margin-top: 0; }
.bag-slot:has(i[style*="assets/icons"]) > span { font-size: 9px; bottom: 0; opacity: .8; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.bag-slot em { z-index: 1; }
.q0 { border-color: #d8d0bf !important; }
.q1 { border-color: #5fd068 !important; }
.q2 { border-color: #4aa3ff !important; }
.q3 { border-color: #c06cff !important; box-shadow: 0 0 6px rgba(192,108,255,.45); }
.q4 { border-color: #ff9a2e !important; box-shadow: 0 0 8px rgba(255,154,46,.55); }
.bag-slot.q1, .eq-slot.q1 { background: radial-gradient(circle, rgba(95,208,104,.22), #fffdf8 72%); }
.bag-slot.q2, .eq-slot.q2 { background: radial-gradient(circle, rgba(74,163,255,.26), #fffdf8 72%); }
.bag-slot.q3, .eq-slot.q3 { background: radial-gradient(circle, rgba(192,108,255,.3), #fffdf8 72%); }
.bag-slot.q4, .eq-slot.q4 { background: radial-gradient(circle, rgba(255,154,46,.34), #fffdf8 72%); }
.eq-slot i[style*="assets/icons"] { width: 30px; height: 30px; border-radius: 0; box-shadow: none; }

.item-tip {
  position: fixed; z-index: 50; width: 250px; pointer-events: none; background: rgba(38,58,48,.95); color: #eef5ea;
  border-radius: 12px; padding: 10px 12px; font-size: 12px; line-height: 1.6; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.item-tip .tt-name { font-size: 15px; font-weight: 800; }
.item-tip .tt-sub { color: #b9cbbf; }
.item-tip .tt-sec { border-top: 1px solid rgba(255,255,255,.12); margin-top: 6px; padding-top: 6px; }
.item-tip .tt-bad { color: #ff8a80; } .item-tip .tt-good { color: #8fe08a; } .item-tip .tt-ax { color: #7fc4ff; }
.item-tip .tt-en { color: #ffcf6b; } .item-tip .tt-hint { color: #a3b6a8; font-size: 11px; }
.tt-ico { width: 30px; height: 30px; vertical-align: middle; margin-right: 6px; object-fit: contain; }

.shop-list { max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.shop-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px; background: var(--soft); font-size: 13px; }
.shop-row i { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.shop-row .sr-name { flex: 1; font-weight: 700; }
.shop-row .sr-name small { color: var(--ink-soft); font-weight: 400; margin-left: 4px; }
.shop-row .sr-price { color: #b07a1e; min-width: 56px; text-align: right; }
.shop-row input { width: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 1px 3px; }
.shop-row.lv-low .sr-name { color: #b9a58c; }
.wh-grid { grid-template-columns: repeat(10, 1fr); }
#whWin { width: 470px; }
#forgeWin { width: 440px; }
.forge-body { display: flex; gap: 10px; }
.forge-list { width: 150px; max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.forge-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; background: var(--soft); border: 2px solid transparent; font-size: 12px; cursor: pointer; }
.forge-item.on { border-color: #a1caaa; background: #e8f5e9; }
.forge-item i { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.forge-item b { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.forge-item small { color: var(--ink-soft); }
.shop-row i[style*="assets/icons"], .forge-item i[style*="assets/icons"] { border-radius: 0; width: 26px; height: 26px; }
.forge-info { flex: 1; font-size: 13px; line-height: 1.7; }
.forge-info .fi-name { font-size: 17px; font-weight: 800; text-shadow: 0 0 1px rgba(0,0,0,.4); }
.forge-info .fi-step { font-size: 22px; font-weight: 900; color: #d0782a; margin: 4px 0; }
.forge-info .fi-rate { font-size: 15px; font-weight: 800; }
.forge-info .fi-bad { color: #c4553f; }
.forge-info .fi-pity { height: 8px; border-radius: 99px; background: #efe6d0; overflow: hidden; margin: 2px 0 6px; }
.forge-info .fi-pity i { display: block; height: 100%; background: linear-gradient(90deg, #ffcf6b, #ff8a3d); }
.forge-info .fi-result { min-height: 24px; font-weight: 800; }
.forge-info .fi-result.ok { color: #3f9a5a; } .forge-info .fi-result.fail { color: #c4553f; }
.forge-info .main-btn { margin-top: 8px; }
#skillWin { width: 440px; }
.build-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.build-actions button { min-height: 38px; padding: 6px 12px; }
#buildStatus { color: #925319; }
.sk-row { border-radius: 12px; background: var(--soft); padding: 8px 10px; margin-bottom: 6px; font-size: 13px; }
.sk-row .sk-head { display: flex; align-items: center; gap: 8px; }
.sk-row .sk-head b { font-size: 15px; }
.sk-row .sk-lv { color: #d0782a; font-weight: 800; }
.sk-row .sk-head button { margin-left: auto; }
.sk-row p { margin: 2px 0; color: var(--ink-soft); }
.sk-row.locked { opacity: .6; }
.sk-ico { width: 30px; height: 30px; object-fit: contain; }

/* 倒下 */
.revive { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(50,74,60,.35); }
.revive-card { width: 300px; background: var(--card); border-radius: 20px; border: 1px solid var(--line); padding: 22px; text-align: center; box-shadow: 0 10px 40px rgba(50,80,60,.25); }
.revive-title { font-size: 22px; font-weight: 800; color: #c4553f; }
.revive-card p { color: var(--ink-soft); font-size: 13px; }

/* NPC 對話框 */
.npc-dialog {
  position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 7;
  width: 560px; max-width: calc(100% - 24px); display: flex; gap: 14px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px 14px 14px; box-shadow: 0 10px 30px rgba(50,80,60,.22);
}
.nd-portrait { width: 104px; height: 120px; flex: none; border-radius: 16px; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); display: grid; place-items: end center; overflow: hidden; }
.nd-portrait img { height: 112px; max-width: 100%; object-fit: contain; object-position: bottom; }
.nd-body { flex: 1; min-width: 0; }
.nd-name b { font-size: 17px; color: #3f7a8f; }
.nd-name small { margin-left: 8px; font-size: 12px; color: #a07a4a; background: #faf1df; border-radius: 99px; padding: 1px 8px; }
.nd-text { font-size: 14px; line-height: 1.7; margin: 6px 0 10px; white-space: pre-line; min-height: 48px; }
.nd-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.nd-opt { border: 1px solid var(--line); background: var(--card2); border-radius: 99px; padding: 5px 14px; font-weight: 700; font-size: 13px; }
.nd-opt.main { border-color: var(--green); background: var(--green-pale); color: var(--green-deep); }
.nd-opt:hover { border-color: var(--pink); }
.npc-dialog .win-close { position: absolute; right: 10px; top: 10px; }

/* 技能與補給設定 */
#huntWin { width: 380px; }
.hs-sec { font-size: 13px; color: var(--ink-soft); margin: 10px 0 6px; }
.hs-skill { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 10px; background: var(--soft); margin-bottom: 4px; font-size: 14px; }
.hs-skill label { flex: 1; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.hs-skill button { border: 1px solid var(--line); background: #fff; border-radius: 8px; width: 26px; height: 24px; font-size: 11px; }
.hs-row { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; margin-top: 8px; }
.hs-row input[type=number] { width: 54px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 8px; }
.hs-row select { border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
#hsMobs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; margin-bottom: 12px; }
.hs-mob { background: var(--soft); border-radius: 99px; padding: 3px 10px; cursor: pointer; }

/* ---------- 登入／選角 ---------- */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; background: rgba(237, 242, 233, .88); backdrop-filter: blur(4px); }
.dialog { width: 360px; max-width: calc(100vw - 32px); background: var(--card); border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(50,80,60,.18); padding: 28px; text-align: center; }
.dialog-logo { font-size: 30px; font-weight: 800; letter-spacing: 6px; color: var(--accent); }
.dialog-sub { color: var(--ink-soft); font-size: 13px; }
.dialog-title { margin: 0 0 14px; }
.dialog input { width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; margin-bottom: 12px; }
.dialog-err { color: #d0566a; min-height: 1.2em; font-size: 13px; margin: 10px 0 0; }
.char-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; margin-bottom: 16px; }
.char-item { display: flex; align-items: center; gap: 12px; border: 2px solid var(--line); border-radius: 16px; padding: 10px; background: var(--card2); text-align: left; }
.char-item-info { min-width: 0; overflow-wrap: anywhere; }
.char-item:hover { border-color: var(--green); }
.char-list > p { grid-column: 1 / -1; }
.char-item b { display: block; font-size: 16px; }
.char-item small { display: block; margin-top: 4px; color: var(--ink-soft); }
.create { border-top: 1px dashed var(--line); padding-top: 12px; }
.char-list-wrap.empty { display: none; }
.char-list-wrap.empty + .create { border-top: 0; padding-top: 0; }
.pick { border: 2px solid var(--line); background: var(--card2); border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.pick.on { border-color: var(--green); background: var(--green-pale); font-weight: 700; }
.dialog-create { width: 920px; max-height: calc(100vh - 40px); overflow-y: auto; text-align: left; }
.char-list-wrap .dialog-title { text-align: center; }
.create-title { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 18px; }
.create-title small { font-size: 12px; color: var(--ink-soft); font-weight: 400; }
/* 職業選擇：五張斜切直式立繪卡，滑過放大、選中發光 */
.job-cards { display: flex; gap: 6px; height: 420px; padding: 4px 10px; }
.job-card { flex: 1 1 0; min-width: 0; position: relative; border: 0; padding: 0; border-radius: 16px; overflow: hidden; cursor: pointer;
  transform: skewX(-6deg); transition: flex-grow .3s ease, box-shadow .2s, filter .2s; background: var(--jc); box-shadow: 0 4px 14px rgba(60,80,60,.18); }
.job-card .jc-art { position: absolute; inset: -2px -52px; transform: skewX(6deg); }
.job-card .jc-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .35s ease; display: block; }
.job-card .jc-info { position: absolute; left: -48px; right: -48px; bottom: 0; padding: 40px 62px 14px; transform: skewX(6deg);
  background: linear-gradient(to top, rgba(30,30,40,.78), rgba(30,30,40,.35) 70%, transparent); color: #fff; text-align: center; }
.job-card .jc-name { font-size: 20px; font-weight: 900; letter-spacing: 2px; text-shadow: 0 2px 6px rgba(0,0,0,.45); }
.job-card .jc-role { font-size: 12px; font-weight: 800; margin: 3px 0 0; color: #fff !important; opacity: .92; }
.job-card .jc-intro { font-size: 12px; line-height: 1.55; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s, opacity .3s, margin .3s; }
.job-card:hover, .job-card:focus-visible { flex-grow: 1.7; filter: brightness(1.04); box-shadow: 0 8px 24px rgba(60,80,60,.3); }
.job-card:hover .jc-art img { transform: scale(1.04); }
.job-card:hover .jc-intro, .job-card:focus-visible .jc-intro { max-height: 80px; opacity: 1; margin-top: 6px; }
.job-card.on { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--jc), 0 8px 24px rgba(60,80,60,.3); }
@media (max-width: 820px) {
  /* 手機：五個職業直向排成五條橫幅，一次全部看得到；不斜切、不橫滑 */
  .job-cards { flex-direction: column; height: auto; gap: 8px; padding: 4px 2px 8px; overflow: visible; }
  .job-card { flex: 0 0 auto; height: 92px; transform: none; border-radius: 14px; }
  .job-card:hover, .job-card:focus-visible { flex-grow: 0; }
  .job-card .jc-art { inset: 0; transform: none; }
  .job-card .jc-art img { object-position: 50% 30%; }
  .job-card:hover .jc-art img { transform: none; }
  .job-card .jc-info { inset: 0 auto 0 0; width: 62%; padding: 0 14px; transform: none; text-align: left;
    display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(to right, rgba(30,30,40,.82), rgba(30,30,40,.45) 70%, transparent); }
  .job-card .jc-name { font-size: 19px; letter-spacing: 1px; }
  .job-card .jc-role { font-size: 12px; }
  .job-card .jc-intro, .job-card:hover .jc-intro, .job-card:focus-visible .jc-intro { max-height: 0; opacity: 0; margin: 0; }
  .job-card.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--jc), 0 6px 16px rgba(60,80,60,.3); }
}
.create-bottom { display: flex; gap: 22px; margin-top: 6px; align-items: stretch; }
.create.step-job .create-bottom { display: none; }
.create.step-look .job-cards { display: none; }
.pick-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pick-row > label { width: 40px; flex: none; font-size: 13px; color: var(--ink-soft); font-weight: 700; }
.pick-row > .sex-toggle { margin: 0; flex-wrap: wrap; justify-content: flex-start; }
.pick-row > input { flex: 1; }
.create-actions { display: flex; gap: 10px; margin-top: 14px; }
.create-actions > .main-btn { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
.create-actions > .back-btn { flex: 0 0 140px; height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; font-weight: 700; }
/* 建角大預覽：2D 立繪（同一具身體只換髮型與臉，兩張圖交叉淡入）＋職業武器；背景是職業顏色的柔和漸層 */
.preview {
  --job: #8cc96b;
  width: 360px; flex: none; border-radius: 18px; border: 1px solid var(--line); padding: 8px; text-align: center; position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 52% 8% at 40% 90%, color-mix(in srgb, var(--job) 30%, rgba(60,50,30,.18)) 0 60%, transparent 100%),
    radial-gradient(circle at 50% 38%, #fffdf6 0 22%, transparent 62%),
    linear-gradient(170deg, color-mix(in srgb, var(--job) 42%, #fffaf0) 0%, color-mix(in srgb, var(--job) 14%, #fffaf0) 58%, #fffaf0 100%);
  transition: background .4s;
}
.preview canvas { width: 300px; height: 340px; display: block; margin: 0 auto; }
.art-stage { position: relative; width: 100%; height: 390px; margin: 0 auto; user-select: none; }
.art-fig { position: absolute; left: 40%; bottom: 4px; height: 92%; width: auto; transform: translateX(-50%); opacity: 0; transition: opacity .28s ease; z-index: 1; pointer-events: none; }
.art-fig.show { opacity: 1; z-index: 2; }
.art-fig.keep { opacity: 1; z-index: 1; transition: none; }
.art-wpn { position: absolute; opacity: 0; transition: opacity .3s ease; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(60,40,20,.18)); }
.art-wpn.show { opacity: 1; animation: art-float 3.2s ease-in-out infinite; }
@keyframes art-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
.art-cap { font-size: 12px; color: var(--ink-soft); margin-top: 2px; min-height: 1.4em; }
.sex-toggle { display: flex; gap: 6px; justify-content: center; }
.sex-toggle .pick { flex: 1; }
.hair-toggle { margin-top: 6px; }
.hair-toggle .pick { font-size: 12px; padding-left: 2px; padding-right: 2px; white-space: nowrap; }
.create-form { flex: 1; }
.create-job { font-size: 14px; margin-bottom: 10px; line-height: 1.6; color: var(--ink-soft); }
.create-job b { color: var(--ink); font-size: 18px; margin-right: 6px; }
@media (max-width: 900px) {
  .create-bottom { flex-direction: column; align-items: stretch; }
  .preview { width: auto; }
  .art-stage { height: min(52vh, 340px); max-width: 360px; }
}

.toast {
  position: fixed; left: 50%; top: 76px; transform: translateX(-50%); z-index: 60;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px;
  box-shadow: var(--shadow); opacity: 0; transition: opacity .3s; pointer-events: none;
}
.toast.show { opacity: 1; }

/* ---------- 第 5 週：組隊、好友、私聊、名字選單、副本 ---------- */
.party-panel { position: absolute; left: 12px; top: 56px; z-index: 4; width: 196px; background: rgba(255,253,247,.93); border: 1px solid var(--line); border-radius: 14px; padding: 6px 8px; box-shadow: var(--shadow); transform: scale(var(--hud-scale, 1)); transform-origin: top left; }
.pp-head { display: flex; align-items: baseline; gap: 6px; font-size: 13px; margin-bottom: 4px; }
.pp-bonus { font-size: 11px; color: #3f9a5a; font-weight: 700; margin-left: auto; }
.pm { display: flex; gap: 6px; align-items: center; padding: 3px 2px; border-radius: 10px; }
.pm.self { background: #f3f9ee; }
.pm.away { opacity: .6; }
.pm.dead .pm-av { filter: grayscale(1); }
.pm-av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.pm-info { flex: 1; min-width: 0; }
.pm-top { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.pm-name { overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.pm-lv { color: #b0763f; font-weight: 700; margin-left: auto; font-size: 11px; }
.pm-crown { font-size: 10px; background: #fff0c9; color: #b07a1e; border-radius: 99px; padding: 0 5px; font-weight: 800; }
.pm-hp { height: 6px; margin-top: 2px; }
.pm-map { font-size: 10px; color: var(--ink-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pp-foot { display: flex; gap: 6px; margin-top: 4px; }
.pp-foot .tiny-btn { flex: 1; white-space: nowrap; font-size: 11px; padding: 2px 6px; }
.pp-leave { background: #fbe4ea !important; color: #b5503f !important; }
.pp-ico { width: 20px; height: 20px; align-self: center; }
.ctx-menu { position: fixed; z-index: 70; min-width: 132px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(40,70,50,.22); padding: 4px; display: flex; flex-direction: column; }
.ctx-title { font-weight: 800; font-size: 13px; padding: 4px 8px; border-bottom: 1px dashed var(--line); margin-bottom: 2px; }
.ctx-item { border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 8px; font-size: 14px; }
.ctx-item:hover { background: var(--green-pale); }
.pop-stack { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; flex-direction: column; gap: 6px; width: 340px; max-width: calc(100% - 24px); }
.pop { background: var(--card); border: 2px solid var(--pink); border-radius: 16px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(40,70,50,.22); font-size: 14px; }
.pop-friend { border-color: #7fb6e8; }
.pop-btns { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; }
.pop-btns .tiny-btn { min-width: 64px; }
/* 遊戲內確認框（client/js/confirm.js） */
.qx-confirm { left: 0; right: 0; top: 32%; margin: 0 auto; width: 320px; z-index: 95; }
.qx-confirm-text { margin: 0 2px; font-size: 13px; line-height: 1.6; color: var(--ink); white-space: pre-line; }
#friendWin { width: 360px; }
.fr-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.fr-form { display: flex; gap: 6px; margin-bottom: 8px; }
.fr-form input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 5px 8px; background: #fff; }
.fr-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.fr { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 10px; background: var(--soft); font-size: 13px; }
.fr-dot { width: 9px; height: 9px; border-radius: 50%; background: #c9bfae; flex: none; }
.fr.on .fr-dot { background: #4fbf6a; box-shadow: 0 0 0 3px rgba(79,191,106,.2); }
.fr-info { flex: 1; min-width: 0; }
.fr-info small { display: block; color: var(--ink-soft); font-size: 11px; }
.fr-name { cursor: pointer; }
.fr-empty { font-size: 12px; color: var(--ink-soft); text-align: center; }
#friendWin .card-title .ui-ico { width: 22px; height: 22px; }
.whisper-wins { position: absolute; right: 12px; bottom: 84px; z-index: 6; display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; }
.whisper { width: 260px; padding: 8px 10px; pointer-events: auto; }
.whisper .card-title { font-size: 14px; margin-bottom: 6px; }
.wh-log { height: 110px; overflow-y: auto; font-size: 13px; background: var(--wh-log-bg); color: var(--ink); border-radius: 10px; padding: 4px 8px; }
.wh-line.mine b { color: var(--wh-mine); }
.wh-line b { color: var(--wh-other); }
.whisper .chat-input { margin-top: 6px; }
.wh-name { cursor: pointer; }
#inspectWin { width: 320px; }
.ins-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.ins-av { width: 52px; height: 52px; font-size: 22px; }
.ins-name { font-size: 18px; }
.ins-sub { font-size: 12px; color: var(--ink-soft); }
.ins-eq { display: grid; grid-template-columns: 1fr; gap: 3px; font-size: 13px; }
.ins-row { display: flex; gap: 8px; padding: 3px 8px; background: var(--soft); border-radius: 8px; }
.ins-part { color: var(--ink-soft); width: 34px; flex: none; }
.ins-row b { color: #5a4a3a; text-shadow: 0 0 1px rgba(0,0,0,.35); }
.ins-none { color: #c9bfae; }
.ins-btns { display: flex; gap: 6px; margin-top: 10px; }
.dg-hud { position: absolute; top: 12px; left: 50%; z-index: 5; min-width: 300px; text-align: center; background: rgba(50,62,52,.86); color: #f6fbf0; border-radius: 16px; padding: 6px 16px 8px; box-shadow: var(--shadow); transform: translateX(-50%) scale(var(--hud-scale, 1)); transform-origin: top center; }
.dg-hud.boss { background: rgba(140,40,32,.9); box-shadow: 0 0 0 2px #ffb36b, var(--shadow); }
.dg-name { font-weight: 800; letter-spacing: 2px; font-size: 13px; color: #ffd98a; }
.dg-wave { font-size: 15px; font-weight: 800; }
.dg-timer { font-size: 13px; opacity: .9; }
.dg-timer.urgent { color: #ff9a8a; font-weight: 800; }
.dg-hud .tiny-btn { margin-top: 4px; color: var(--ink); }
#dgLeave .btn-ico { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin: 0 3px 0 0; }
.stage:has(.dg-hud:not(.hidden)) .target-frame { top: 104px; }
.dg-result { left: 50%; right: auto; top: 100px; transform: translateX(-50%); width: 380px; }
.dg-rewards { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-rw { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 4px 8px; font-size: 13px; font-weight: 700; text-shadow: 0 0 1px rgba(0,0,0,.25); }
body:has(.dg-hud:not(.hidden)) .toast { top: 190px; }

/* 圖示 */
.ui-ico { display: block; object-fit: contain; pointer-events: none; }
.menu-ico { width: 24px; height: 24px; flex: none; }
.btn-ico { width: 22px; height: 22px; margin: auto; }
.auto-btn.has-ico::before, .auto-fab.has-ico::before { content: ""; display: inline-block; width: 26px; height: 26px; vertical-align: middle; margin-right: 6px; background: var(--ico) center / contain no-repeat; }
.auto-fab { display: none; }

/* ---------- 中等寬度（901～1180px）：左右欄保留、變窄，中間遊戲畫面縮小 ---------- */
@media (min-width: 901px) and (max-width: 1180px) {
  .layout { grid-template-columns: 236px minmax(360px, 1fr) 236px; gap: 8px; padding: 8px; }
}

/* ---------- 窄螢幕（821～900px）：左右欄收成抽屜，中間佔滿 ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; position: relative; overflow: hidden; } /* 收起來的抽屜不撐出橫向捲動 */
  .side {
    position: absolute; top: 12px; bottom: 12px; width: 300px; z-index: 10; transition: transform .25s;
    background: var(--bg); box-shadow: var(--shadow); border-radius: var(--radius); padding: 8px;
  }
  .side-left { left: 12px; transform: translateX(calc(-100% - 20px)); }
  .side-right { right: 12px; transform: translateX(calc(100% + 20px)); }
  .layout.show-left .side-left, .layout.show-right .side-right { transform: none; }
  .side-toggle { display: block; }
  .menu-btn { padding: 8px; font-size: 0; }
  .party-panel { top: 100px; }
}

/* ---------- 手機版（寬 ≤ 820px） ---------- */
@media (max-width: 820px) {
  body { overscroll-behavior: none; }
  #scene { touch-action: none; }
  .topbar { height: 48px; gap: 8px; padding: 0 8px; }
  .logo { min-width: 0; gap: 6px; }
  .logo-icon { width: 28px; height: 28px; }
  .logo-name { font-size: 17px; letter-spacing: 2px; }
  .logo-sub, .top-icons { display: none; }
  .menu { justify-content: safe flex-end; overflow-x: auto; scrollbar-width: none; }
  .menu-btn { padding: 0; width: 40px; height: 40px; justify-content: center; flex: none; }
  .menu-btn .ico { width: 22px; height: 22px; }
  .menu-btn .menu-ico { width: 28px; height: 28px; }
  .layout { padding: 0; gap: 0; }
  .center { display: block; height: 100%; }
  .stage { position: absolute; inset: 0; border-radius: 0; border: 0; }
  .ctrl-row { display: none; }
  .only-mobile { display: flex; }
  /* 左右欄：抽屜（從邊緣滑出、蓋在場景上） */
  .side { top: 0; bottom: 0; width: min(86vw, 330px); border-radius: 0 18px 18px 0; padding: 8px; z-index: 20; }
  .side-right { border-radius: 18px 0 0 18px; }
  .side-left { left: 0; }
  .side-right { right: 0; }
  .layout.show-left .side-left, .layout.show-right .side-right { box-shadow: 0 0 0 100vmax rgba(40,60,45,.35); }
  .side-toggle { width: 46px; height: 46px; font-size: 20px; top: 54px; }
  .toggle-left { left: 8px; transform: none; }
  .toggle-right { right: 8px; top: 106px; transform: none; }
  .pill-loc { left: 62px; top: 8px; font-size: 12px; padding: 5px 10px; max-width: calc(100% - 190px); transform: none; }
  .stage-tr { top: 6px; right: 8px; transform: none; }
  .stage-tr .pill-pos { display: none; }
  .minimap { width: 76px; height: 76px; }
  .party-panel { top: 108px; left: 8px; width: 156px; padding: 4px 6px; transform: none; }
  .pm-av { width: 24px; height: 24px; font-size: 12px; }
  .pp-head { font-size: 12px; }
  /* 技能列與藥水放大、靠右下；自動按鈕浮在技能列上方 */
  .stage.narrow .hotbar,
  .hotbar {
    left: auto;
    right: 8px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: auto;
    max-width: none;
  }
  .skills, .potions { background: none; box-shadow: none; padding: 0; }
  .stage.narrow .skills,
  .skills {
    grid-area: auto;
    display: grid;
    grid-template-columns: repeat(3, 64px);
    gap: 10px;
    direction: rtl;
  }
  .skill-slot, .potion { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
  .skill-slot .skill-name { font-size: 15px; }
  .skill-key { width: 20px; height: 20px; line-height: 20px; }
  .stage.narrow .potions,
  .potions {
    grid-area: auto;
    gap: 10px;
  }
  .stage.narrow .blade-bar,
  .blade-bar {
    grid-area: auto;
    justify-self: auto;
    max-width: calc(100vw - 16px);
    font-size: 11px;
    padding: 2px 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .auto-fab {
    display: block; position: absolute; right: 8px; bottom: calc(244px + env(safe-area-inset-bottom)); z-index: 5;
    width: 72px; height: 72px; border-radius: 50%; border: 3px solid #fff; color: #fff; font-size: 17px; font-weight: 900;
    background: linear-gradient(#6fbf8a, #3f9461); box-shadow: 0 0 0 2px #8cc9a0, var(--shadow);
    transform: none;
  }
  .auto-fab.on { background: linear-gradient(#f09aa8, #d0566a); box-shadow: 0 0 0 2px #f2a7b8, var(--shadow); }
  .auto-fab.has-ico::before { display: block; margin: 0 auto -2px; width: 30px; height: 30px; }
  .auto-fab.has-ico { font-size: 13px; line-height: 1.1; }
  /* 冒險紀錄／聊天室：左下浮動、一次顯示一張（紀錄／聊天切換）、可收合 */
  .dock { position: absolute; left: 8px; bottom: calc(10px + env(safe-area-inset-bottom)); width: calc(100% - 250px); min-width: 150px; display: block; z-index: 4; }
  .dock-card { background: rgba(40,62,52,.72); border: 0; color: #fff; padding: 6px; backdrop-filter: blur(3px); }
  .dock .card-title { display: none; }
  .dock-tabs button { color: #e6f1e8; padding: 4px 8px; }
  .dock-tabs button.active { background: #fffdf7; color: var(--ink); }
  .dock-swap { display: block; border: 0; background: rgba(255,255,255,.22); color: #fff; border-radius: 8px; font-size: 12px; padding: 3px 8px; flex: none; }
  .dock .log-card { display: none; }
  .dock.show-log .log-card { display: flex; }
  .dock.show-log .chat { display: none; }
  .log-list, .chat-log { height: 96px; flex: none; background: rgba(255,255,255,.08); box-shadow: none; }
  .log-list .line, .chat-log .line { color: #f4f8f2 !important; }
  .line .ts { color: #c9dccf; }
  .chat-fold { display: block; background: rgba(255,255,255,.22); color: #fff; border: 0; width: 34px; height: 28px; font-size: 14px; }
  .chat.folded .chat-log, .chat.folded .guild-note { display: none; }
  .chat.folded .chat-tab:not(.active) { display: none; }
  .chat-input select { max-width: 54px; }
  .chat-input input { font-size: 16px; } /* 16px 以上 iOS 不會自動放大 */
  .send-btn { padding: 0 10px; }
  /* 視窗：佔滿寬度 */
  .win, .win-left, #whWin, #forgeWin, #skillWin, #friendWin, #inspectWin, #mapWin, #gmWin, .dg-result {
    left: 8px !important; right: 8px !important; width: auto !important; top: 56px !important; transform: none !important;
    max-height: calc(100% - 70px); overflow-y: auto; z-index: 15;
  }
  .bag-grid { grid-template-columns: repeat(6, 1fr); }
  .wh-grid { grid-template-columns: repeat(6, 1fr); }
  .forge-body { flex-direction: column; }
  .forge-list { width: auto; max-height: 160px; }
  .npc-dialog { bottom: 150px; padding: 10px; gap: 8px; }
  .nd-opts button { min-height: 40px; }
  .tiny-btn, .win-close { min-height: 34px; min-width: 34px; }
  .attr button { width: 34px; height: 34px; }
  .dg-hud { min-width: 0; width: calc(100% - 140px); top: 54px; padding: 4px 10px 6px; transform: translateX(-50%); }
  .dg-wave { font-size: 13px; }
  .target-frame { top: 54px; width: 200px; transform: translateX(-50%); }
  .stage:has(.dg-hud:not(.hidden)) .target-frame { top: 150px; }
  .whisper-wins { left: 8px; right: 8px; bottom: 160px; align-items: stretch; }
  .whisper { width: auto; }
  .pop-stack { top: 56px; }
  .ctx-item { padding: 11px 14px; font-size: 15px; }
}

/* 功能視窗獨立於場景：共用頁面大小，保留場景本身的裁切。 */
#windowLayer { position: fixed; inset: 68px 16px 16px; z-index: 30; pointer-events: none; }
#windowLayer > .win { pointer-events: auto; position: absolute; inset: 0 auto auto 50%; transform: translateX(-50%); width: min(760px, 100%); max-width: 100%; max-height: 100%; margin: 0; box-shadow: 0 18px 70px #24493740; border: 1px solid #c9ddc7; }
#windowLayer > .win > .card-title { position: sticky; top: -1px; background: var(--card); z-index: 3; padding: 6px 0 12px; }
#windowLayer > #skillWin, #windowLayer > #forgeWin { width: min(960px, 100%); }
#windowLayer > #bagWin, #windowLayer > #whWin, #windowLayer > #mapWin { width: min(800px, 100%); }
#windowLayer > #friendWin, #windowLayer > #inspectWin, #windowLayer > #huntWin { width: min(620px, 100%); }
#windowLayer > #buildWin { width: min(1440px, 100%); height: min(800px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
#windowLayer.inventory-pair > #shopWin, #windowLayer.inventory-pair > #whWin, #windowLayer.inventory-pair > #forgeWin { left: 0; right: auto; width: calc(55% - 8px); transform: none; }
#windowLayer.inventory-pair > #bagWin { left: auto; right: 0; width: calc(45% - 8px); transform: none; }
.map-filters { display: flex; gap: 8px; margin: 10px 0; }
.map-filters input { flex: 1; min-width: 0; }
.map-filters input, .map-filters select { padding: 9px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fffdf5; color: var(--ink); }
@media (max-width: 700px) {
  #windowLayer { inset: 56px 8px 8px; }
  #windowLayer > .win { left: 0 !important; right: 0 !important; top: 0 !important; width: 100% !important; max-width: 100%; max-height: 100%; transform: none !important; }
  #windowLayer > #buildWin { height: 100%; padding: 10px; }
  #windowLayer.inventory-pair > #shopWin, #windowLayer.inventory-pair > #whWin, #windowLayer.inventory-pair > #forgeWin { max-height: calc(50% - 6px); }
  #windowLayer.inventory-pair > #bagWin { top: 50% !important; max-height: 50%; }
}

/* 浮刃使源磁刀刃列（職業資源） */
.blade-bar { display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 10px; background: rgba(14, 22, 36, .72); color: #dfefff; font-size: 12px; }
.blade-bar.hidden { display: none; }
.blade-bar b { font-weight: 600; margin-right: 4px; }
.blade-bar small { margin-left: 4px; color: #ffd27a; }
.blade-pip { width: 8px; height: 16px; border-radius: 4px 4px 2px 2px; background: #3a4658; transform: rotate(12deg); }
.blade-pip.free { background: linear-gradient(#e8f6ff, #7fb6d9); box-shadow: 0 0 4px #9fd8ff; }
.rune-issue { color: #ff9a8a; font-size: 12px; margin: 2px 0; }
/* 風語學者風壓列（職業資源） */
.wind-pip { width: 12px; height: 12px; border-radius: 50%; background: #3a4658; }
.wind-pip.on { background: radial-gradient(circle at 35% 35%, #f4fff8, #7fd6b0); box-shadow: 0 0 5px #9fe8c8; }
/* 重裝鬥士過載條：70 刻度以上爆發效率下降，滿值過熱 */
.heat-meter { position: relative; width: 96px; height: 10px; border-radius: 5px; background: #3a4658; overflow: hidden; }
.heat-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #ffd27a, #ff9a4a); }
.heat-meter.high i { background: linear-gradient(90deg, #ffb04a, #ff6a3a); }
.heat-meter.hot i { background: linear-gradient(90deg, #ff6a3a, #e83a3a); box-shadow: 0 0 6px #ff6a3a; }
.heat-meter u { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .7); text-decoration: none; }
.heat-vent { margin-left: 4px; padding: 1px 6px; border: 1px solid #ffb04a; border-radius: 8px; background: rgba(60, 30, 10, .6); color: #ffe2b8; font-size: 11px; cursor: pointer; }
.heat-vent:disabled { opacity: .5; cursor: default; }
/* 鍊金藥師試劑列（職業資源） */
.reagent-pip { width: 11px; height: 14px; border-radius: 3px 3px 6px 6px; background: #3a4658; }
.reagent-pip.on { background: linear-gradient(#f4ffe8, #8cc96b); box-shadow: 0 0 5px #b8e89a; }
.ink-meter i { background: linear-gradient(90deg, #a9c2ef, #4a6fb0); }
.quota-pip { width: 8px; height: 10px; }
.quota-pip.on { background: linear-gradient(#fff6d0, #e7c35a); box-shadow: 0 0 5px #f0d98a; }
/* 技能列尚未開放的格子（Lv18 第 5 格、Lv30 第 6 格） */
.skill-slot.slot-closed { background: repeating-linear-gradient(135deg, #eceae2 0 6px, #e2ded2 6px 12px); border-style: dashed; }
.skill-slot.slot-closed .cd { font-size: 10px; color: #8a7c66; display: grid; place-items: end center; padding-bottom: 4px; }

/* ---------- 配置視窗（介面改版 26）：技能盤、天賦盤、配置頁；一頁看完不用捲動 ---------- */
.fam-aoe { --fam: #62b07f; --fam-pale: #e3f3e6; }
.fam-one { --fam: #e4879f; --fam-pale: #fdeaf0; }
.fam-sup { --fam: #6ea5dc; --fam-pale: #e6f0fb; }
.fam-sum { --fam: #a28bd6; --fam-pale: #efeafb; }
.fam-mov { --fam: #d4a440; --fam-pale: #fbf1d8; }
.rune-form { --rn: #6ea5dc; --rn-pale: #e6f0fb; }
.rune-cond { --rn: #e4879f; --rn-pale: #fdeaf0; }
.rune-tune { --rn: #d4a440; --rn-pale: #fbf1d8; }
.c-pink { --br: #e4879f; --br-pale: #fdeaf0; }
.c-green { --br: #5dac7a; --br-pale: #e2f3e5; }
.c-blue { --br: #6aa2da; --br-pale: #e5effb; }
.c-gold { --br: #d1a23e; --br-pale: #fbf1d7; }
.k-area { --k: #5dac7a; --k-pale: #e2f3e5; }
.k-single { --k: #e07f98; --k-pale: #fdeaf0; }
.k-party { --k: #6aa2da; --k-pale: #e5effb; }
.k-custom { --k: #c99f45; --k-pale: #fbf1d7; }

@keyframes qxPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(228, 135, 159, .55); } 50% { box-shadow: 0 0 0 9px rgba(228, 135, 159, 0); } }
@keyframes qxBreath { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--br) 55%, transparent); } 55% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--br) 0%, transparent); } }
@keyframes qxBurst { 0% { transform: scale(1.28); filter: brightness(1.35); } 60% { transform: scale(.96); } 100% { transform: scale(1); filter: none; } }
@keyframes qxRing { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes qxIn { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes qxGlowSlot { 0%, 100% { border-color: #f2b8c6; box-shadow: 0 0 0 0 rgba(228, 135, 159, .35); } 50% { border-color: #e4879f; box-shadow: 0 0 0 6px rgba(228, 135, 159, 0); } }
@keyframes qxGem { 0%, 100% { box-shadow: 0 4px 12px rgba(209, 162, 62, .25), 0 0 0 0 rgba(209, 162, 62, .45); } 50% { box-shadow: 0 4px 12px rgba(209, 162, 62, .25), 0 0 0 8px rgba(209, 162, 62, 0); } }

#windowLayer > #buildWin { width: min(1440px, 100%); height: min(820px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; padding: 12px 16px 12px; z-index: 18;
  background: radial-gradient(circle at 12% 0, #fff6f8 0, transparent 30%), radial-gradient(circle at 90% 100%, #eef6ea 0, transparent 35%), var(--card); }
#windowLayer > #buildWin > .card-title.build-head { position: static; display: flex; align-items: center; gap: 14px; padding: 0 0 10px; margin: 0; border-bottom: 1px solid var(--line); flex: none; }
#buildJob { font-size: 16px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.build-tabs { display: flex; gap: 4px; padding: 4px; background: #eef4e8; border-radius: 14px; border: 1px solid var(--line); }
.build-tabs button { position: relative; border: 0; background: transparent; padding: 8px 20px; border-radius: 10px; font-weight: 800; font-size: 14px; color: var(--ink-soft); transition: background .15s, color .15s; }
.build-tabs button:hover { color: var(--accent); background: #ffffffa0; }
.build-tabs button[aria-pressed="true"] { background: #fff; color: var(--accent); box-shadow: 0 2px 8px rgba(64, 104, 77, .14); }
.tab-badge { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--pink); color: #fff; font-size: 11px; font-style: normal; line-height: 18px; animation: qxPulse 1.6s infinite; }
.build-quick { margin-left: auto; border: 0; border-radius: 12px; padding: 8px 16px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f3a9ba, #e07f98); box-shadow: 0 4px 12px rgba(224, 127, 152, .35); transition: transform .12s; white-space: nowrap; }
.build-quick:hover { transform: translateY(-1px); }
#buildClose { margin-left: 0; }
.build-panel { flex: 1; min-height: 0; overflow: auto; padding: 10px 0 8px; }
.build-panel.hidden { display: none; }
#buildWin button { transition: transform .12s, box-shadow .12s, background .12s; }

/* 圖示 */
.qx-ico { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none; }
.qx-ico img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; pointer-events: none; }
.qx-ico > i { font-style: normal; font-weight: 900; font-size: 18px; color: var(--br, var(--rn, var(--accent))); }
.sk-ico { width: 54px; height: 54px; border: 3px solid var(--fam, #b9ccb8); background: radial-gradient(circle at 40% 35%, #fff, var(--fam-pale, #f2f5ec)); box-shadow: 0 3px 8px rgba(64, 104, 77, .16), inset 0 0 0 2px #fff; }
.sk-ico img { width: 88%; height: 88%; }
.sk-ico.gray img { filter: grayscale(1); opacity: .6; }
.sk-ico.xs { width: 32px; height: 32px; border-width: 2px; }
.sk-ico em { position: absolute; font-style: normal; font-weight: 800; font-size: 10px; line-height: 1; }
.sk-lv { right: -4px; bottom: -3px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 99px; background: #fff; color: var(--accent); border: 2px solid var(--fam, #b9ccb8); }
.sk-lock { left: 50%; bottom: -6px; transform: translateX(-50%); padding: 3px 6px 3px 16px; border-radius: 99px; background: #6f7a72 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2.5 5V3.5a2.5 2.5 0 0 1 5 0V5' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3Crect x='1' y='5' width='8' height='6.5' rx='1.4' fill='%23fff'/%3E%3C/svg%3E") 5px 50% / 8px no-repeat; color: #fff; white-space: nowrap; }
.sk-badge { position: absolute; top: -5px; right: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--green-deep); color: #fff; font-size: 11px; font-weight: 800; border: 2px solid #fff; }
.rune-ico { width: 36px; height: 36px; border-radius: 11px; border: 2px solid var(--rn, #cfd6c8); background: radial-gradient(circle at 40% 35%, #fff, var(--rn-pale, #f6f6ef)); box-shadow: 0 2px 6px rgba(64, 104, 77, .14); }
.rune-ico.rune-none { border-style: dashed; border-color: #c4cfc0; background: #fbfaf4; }
.rune-ico.rune-none > i { color: #a9b8a8; font-size: 16px; }
.rune-ico.xs { width: 16px; height: 16px; border-width: 1px; border-radius: 5px; box-shadow: none; }
.rune-ico.xs > i { font-size: 9px; }
.tal-ico { width: 50px; height: 50px; border: 3px solid #d3d9cc; background: radial-gradient(circle at 40% 35%, #fff, #f3f1e6); box-shadow: 0 3px 8px rgba(64, 104, 77, .12); transition: transform .12s, box-shadow .2s; }
.tal-ico img { width: 86%; height: 86%; }
.chip { display: inline-block; font-size: 11px; line-height: 1.5; padding: 1px 8px; border-radius: 99px; background: var(--green-pale); color: var(--green-deep); font-weight: 700; white-space: nowrap; }
.chip.gold { background: #fbf1d7; color: #a07320; }
.chip.pink { background: var(--pink-pale); color: #c0607a; }
.chip.mute { background: #f0f1ea; color: var(--ink-mute); font-weight: 500; }

/* 技能盤 */
.sb-layout { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.08fr) minmax(290px, 350px); gap: 14px; height: 100%; min-height: 0; }
.sb-pool, .sb-bar { min-height: 0; border-radius: 16px; border: 1px solid var(--line); padding: 10px 12px; box-shadow: 0 2px 10px rgba(64, 104, 77, .06); }
.sb-pool { display: flex; flex-direction: column; gap: 6px; background: linear-gradient(170deg, #f8fbf3, #eef5ea); }
.sb-group { display: flex; align-items: baseline; gap: 8px; }
.sb-group b, .sb-bar-head b, .tb-title b { font-size: 14px; color: var(--accent); }
.sb-group small, .sb-bar-head small, .tb-title small { font-size: 11px; color: var(--ink-mute); }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px 2px; }
.sk-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 5px; border: 1px solid transparent; border-radius: 12px; background: none; min-width: 0; cursor: grab; }
.sk-cell b { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3d6150; }
.sk-cell:hover { background: #ffffffc0; transform: translateY(-2px); }
.sk-cell:hover .sk-ico { box-shadow: 0 6px 14px rgba(64, 104, 77, .22), inset 0 0 0 2px #fff; }
.sk-cell.level-locked .sk-ico img { filter: grayscale(1); opacity: .5; }
.sk-cell.level-locked b { color: var(--ink-mute); }
.sk-cell.equipped .sk-ico { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--fam), 0 0 14px var(--fam); }
.sk-cell.selected { background: #fff; border-color: #e7e1cc; box-shadow: 0 4px 14px rgba(64, 104, 77, .14); }
.sk-cell.armed .sk-ico { animation: qxPulse 1.1s infinite; }
.sb-legend { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--ink-soft); }
.sb-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; background: var(--fam); vertical-align: -1px; }
.sb-bar { display: flex; flex-direction: column; gap: 8px; background: linear-gradient(170deg, #fffaf0, #f5f7ec); }
.sb-bar-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sb-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; flex: 1; min-height: 0; }
.sb-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px 6px 10px; border-radius: 16px; border: 2px solid #e4e6da; background: #fff; box-shadow: 0 3px 10px rgba(64, 104, 77, .08); min-width: 0; }
.sb-slot.filled { border-color: color-mix(in srgb, var(--fam) 55%, #fff); background: linear-gradient(180deg, #fff 30%, var(--fam-pale)); }
.sb-slot.selected { box-shadow: 0 0 0 3px #f3dfa6, 0 6px 16px rgba(64, 104, 77, .14); }
.sb-slot.closed { background: repeating-linear-gradient(135deg, #f1efe6 0 8px, #e9e6da 8px 16px); border-style: dashed; }
.sb-slots.armed .sb-slot:not(.closed) { animation: qxGlowSlot 1.1s infinite; }
.sb-slot.drop-hover, .sb-slot:has(.drop-hover) { border-color: var(--pink) !important; transform: scale(1.03); box-shadow: 0 0 0 4px var(--pink-pale), 0 8px 18px rgba(224, 127, 152, .25); }
.sb-key { position: absolute; top: 6px; left: 8px; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--ink-soft); background: #f0f3ea; }
.sb-clear { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); font-size: 14px; line-height: 1; padding: 0; opacity: 0; z-index: 2; }
.sb-slot:hover .sb-clear, .sb-clear:focus-visible { opacity: 1; }
.sb-clear:hover { background: var(--pink-pale); color: #c0607a; }
.sb-slot-main { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; padding: 0; width: 100%; min-width: 0; }
.sb-slot-main:disabled { cursor: default; }
.sb-slot-main .sk-ico { width: 64px; height: 64px; }
.sb-slot-main b { font-size: 13px; color: #355b49; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-slot.closed .sb-slot-main b { color: #988c74; font-size: 12px; }
.sb-empty { width: 64px; height: 64px; border-radius: 50%; border: 2px dashed #bccfbb; display: grid; place-items: center; font-size: 26px; color: #a3b6a5; background: #fbfcf7; }
.sb-empty.lock { border-color: #c9c1ad; background: #f5f2e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2.5 5V3.5a2.5 2.5 0 0 1 5 0V5' fill='none' stroke='%23a99d84' stroke-width='1.2'/%3E%3Crect x='1' y='5' width='8' height='6.5' rx='1.4' fill='%23a99d84'/%3E%3C/svg%3E") 50% 50% / 20px no-repeat; }
.sb-slot-main:not(:disabled):hover .sk-ico, .sb-slot-main:not(:disabled):hover .sb-empty { transform: scale(1.05); }
.sb-runes { display: flex; gap: 6px; }
.rune-sock { border: 0; background: none; padding: 0; }
.rune-sock.sm .rune-ico { width: 30px; height: 30px; border-radius: 9px; }
.rune-sock.sm .rune-ico > i { font-size: 13px; }
.rune-sock:disabled { cursor: default; }
.rune-sock:disabled .rune-ico { filter: grayscale(1); opacity: .4; }
.rune-sock:not(:disabled):hover .rune-ico { transform: translateY(-2px); box-shadow: 0 5px 12px color-mix(in srgb, var(--rn, #9bb39b) 45%, transparent); }
.rune-sock.on .rune-ico { box-shadow: 0 0 0 2px #fff, 0 0 10px color-mix(in srgb, var(--rn) 70%, transparent); }
.rune-sock.bad .rune-ico { border-color: #e06a5a; box-shadow: 0 0 0 2px #fff, 0 0 10px #e06a5a88; }
.tree-detail { min-height: 0; overflow: auto; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fffefa; font-size: 12.5px; line-height: 1.55; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 2px 10px rgba(64, 104, 77, .06); }
.sd-head { display: flex; gap: 12px; align-items: center; }
.sd-ico { width: 60px; height: 60px; }
.sd-head .sd-ico:not(.tal-ico) { border: 3px solid var(--fam, #b9ccb8); background: radial-gradient(circle at 40% 35%, #fff, var(--fam-pale, #f2f5ec)); box-shadow: 0 4px 12px rgba(64, 104, 77, .18), inset 0 0 0 2px #fff; }
.sd-head .sd-ico img { width: 88%; height: 88%; }
.sd-head h3 { margin: 1px 0; font-size: 19px; color: #2f6049; }
.tree-eyebrow { display: block; font-size: 11px; color: var(--ink-soft); letter-spacing: 1px; }
.tree-unlock { font-size: 12px; color: #a0732f; font-weight: 700; }
.tree-unlock.ok { color: var(--green-deep); }
.sd-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0; }
.sd-tags > small { font-size: 11px; color: var(--ink-mute); margin-right: 2px; }
.sd-desc { margin: 0; color: #46685a; }
.tree-stat { margin: 0; padding: 7px 10px; border-radius: 10px; background: #f2f7ee; color: #33704f; font-size: 12px; }
.tree-stat > small { display: block; font-size: 10px; color: var(--ink-mute); font-weight: 700; }
.tree-help { margin: 0; font-size: 11px; color: var(--ink-mute); }
.tree-warning { margin: 0; color: #a16c28; font-size: 12px; }
.sd-runes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sd-runes .rune-sock { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px 6px; border-radius: 12px; background: #f7f6ee; border: 1px solid var(--line2); min-width: 0; }
.sd-runes .rune-sock small { font-size: 10px; color: var(--ink-mute); }
.sd-runes .rune-sock b { font-size: 12px; color: #3d6150; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-runes .rune-sock:not(:disabled):hover { background: #fff; box-shadow: 0 4px 12px rgba(64, 104, 77, .12); }
.sd-runes .rune-sock.on { background: #fff; border-color: #e6dfc8; }
.rune-issue { margin: 0; color: #c4553f; font-size: 12px; font-weight: 700; }
.skill-upgrade-box { margin: 0; padding: 8px 10px; background: linear-gradient(180deg, #fffaf0, #fff4dc); border: 1px solid #ecdcae; border-radius: 12px; }
.skill-upgrade-box h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px; font-size: 13px; color: #8a6a2a; }
.skill-upgrade-box h4 .main-btn { width: auto; height: 30px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.skill-upgrade-box p { margin: 0 0 5px; font-size: 12px; }
.sd-req { display: flex; flex-wrap: wrap; gap: 4px; }
.requirement-met { color: #3b7856; }
.requirement-short { color: #ad6342; }
.chip.requirement-met { background: #e5f1e3; }
.chip.requirement-short { background: #fde3dc; }

/* 說明卡、彈出選單、拖曳 */
.qx-tip { position: fixed; z-index: 80; width: 300px; pointer-events: none; animation: qxIn .12s ease-out; }
.tip-card { background: #fffdf7; border: 1px solid #e6dfc8; border-top: 4px solid var(--fam, var(--rn, var(--br, var(--green)))); border-radius: 14px; box-shadow: 0 14px 34px rgba(40, 70, 55, .24); padding: 10px 12px; font-size: 12px; line-height: 1.55; color: var(--ink); }
.tip-card > b { font-size: 14px; }
.tip-head { display: flex; gap: 10px; align-items: center; }
.tip-head b { display: block; font-size: 15px; color: #2f6049; }
.tip-head small { display: block; font-size: 11px; color: var(--ink-soft); }
.tip-ico.sk-ico, .tip-card .tip-ico { width: 44px; height: 44px; }
.tip-card:not(.rune-card):not(.tal-card) .tip-ico { border: 3px solid var(--fam); background: radial-gradient(circle at 40% 35%, #fff, var(--fam-pale)); }
.tal-card .tip-ico { border-color: var(--br, #d1a23e); }
.tip-chips { display: flex; flex-wrap: wrap; gap: 3px; margin: 7px 0 4px; }
.tip-desc { margin: 5px 0; color: #46685a; }
.tip-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 6px 0; }
.tip-stat { background: #f2f7ee; border-radius: 8px; text-align: center; padding: 3px 2px; }
.tip-stat small { display: block; font-size: 10px; color: var(--ink-mute); }
.tip-stat b { font-size: 13px; color: #2f6049; }
.tip-now { margin: 5px 0 0; color: #2f6e55; font-weight: 600; }
.tip-rune { margin: 4px 0 0; color: #8a6a2a; }
.tip-hint { margin: 6px 0 0; font-size: 11px; color: var(--ink-mute); }
.tip-bad { margin: 5px 0 0; color: #c4553f; font-weight: 700; }
.qx-pop { position: fixed; z-index: 75; background: #fffdf7; border: 1px solid #ddd4b8; border-radius: 16px; box-shadow: 0 18px 44px rgba(40, 70, 55, .28); padding: 10px; width: 340px; max-width: calc(100vw - 16px); animation: qxIn .14s ease-out; }
.pick-title { font-weight: 800; font-size: 13px; color: #2f6049; margin: 0 2px 8px; padding-left: 8px; border-left: 4px solid var(--rn, var(--green)); }
.pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pick-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 5px; border: 1px solid transparent; border-radius: 11px; background: #f7f6ee; font-size: 11px; min-width: 0; }
.pick-item b { font-size: 12px; color: #3d6150; }
.pick-item:not(:disabled):hover { background: #fff; border-color: var(--rn); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(64, 104, 77, .14); }
.pick-item[aria-pressed="true"] { background: var(--rn-pale, #eef5e8); border-color: var(--rn, var(--green)); box-shadow: inset 0 0 0 1px var(--rn, var(--green)); }
.pick-item:disabled { opacity: .42; filter: grayscale(1); cursor: not-allowed; }
.pick-help { font-size: 11px; color: var(--ink-mute); margin: 8px 2px 0; }
.drag-ghost { position: fixed; z-index: 90; pointer-events: none; transform: translate(-50%, -50%) scale(1.12); opacity: .92; filter: drop-shadow(0 8px 14px rgba(40, 70, 55, .35)); }
body.qx-dragging, body.qx-dragging * { cursor: grabbing !important; user-select: none; }
.flash .sk-ico, .flash .tal-ico, .flash.sb-slot .sk-ico { animation: qxBurst .45s ease-out; }
.flash .qx-ico::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 3px solid var(--br, var(--fam, var(--pink))); animation: qxRing .55s ease-out forwards; pointer-events: none; }

/* 天賦盤 */
#buildPanel-talents { display: flex; flex-direction: column; }
.tb-top { flex: none; display: flex; align-items: center; gap: 14px; padding: 0 2px 10px; }
.tb-gem { flex: none; width: 82px; height: 58px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(160deg, #fff7e2, #f5dc9e); border: 1px solid #e7cf8d; color: #8a6420; box-shadow: 0 4px 12px rgba(209, 162, 62, .25); }
.tb-gem b { font-size: 26px; line-height: 1; }
.tb-gem small { font-size: 10px; font-weight: 700; }
.tb-gem.has { animation: qxGem 1.8s infinite; }
.tb-info { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.tb-info small { flex-basis: 100%; font-size: 11px; color: var(--ink-mute); }
.tb-reset { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 7px 14px; color: var(--ink-soft); }
.tb-reset:not(:disabled):hover { background: var(--pink-pale); color: #c0607a; }
.tb-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
.tb-job { min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 0, #ffffff 0, #f1f6ec 70%); box-shadow: 0 2px 10px rgba(64, 104, 77, .06); }
.tb-title { display: flex; align-items: baseline; gap: 8px; }
.tb-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tb-col { display: flex; flex-direction: column; align-items: center; padding: 6px 4px 4px; border-radius: 14px; background: linear-gradient(180deg, var(--br-pale), #ffffff00 85%); border: 1px solid color-mix(in srgb, var(--br) 25%, transparent); min-height: 0; }
.tb-branch { display: flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 99px; background: var(--br); color: #fff; box-shadow: 0 3px 8px color-mix(in srgb, var(--br) 40%, transparent); }
.tb-branch b { font-size: 13px; }
.tb-branch small { font-size: 10px; opacity: .9; }
.tb-step { position: relative; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; }
.tb-step::before { content: ''; position: absolute; left: 50%; top: -50%; bottom: 50%; width: 4px; margin-left: -2px; border-radius: 2px; background: #dfe2d6; z-index: 0; }
.tb-step.first::before { top: -6px; }
.tb-step.lit::before { background: var(--br); box-shadow: 0 0 8px var(--br); }
.tal-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; padding: 2px 6px; border-radius: 12px; min-width: 0; max-width: 100%; }
.tal-node b { font-size: 12px; color: #3d6150; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 4px; border-radius: 6px; }
.tal-node small { font-size: 10px; color: var(--ink-mute); }
.tal-node:hover .tal-ico { transform: scale(1.07); }
.tal-node:active .tal-ico { transform: scale(.93); }
.tal-node.core .tal-ico { border-radius: 16px; width: 54px; height: 54px; border-width: 3px; border-style: double; border-color: #d9c48f; }
.tal-node.core b::before { content: '◆ '; color: #d1a23e; font-size: 9px; }
.tal-node.on .tal-ico { border-color: var(--br); background: radial-gradient(circle at 40% 35%, #fff, var(--br-pale)); box-shadow: 0 0 0 3px #fff, 0 0 16px var(--br); }
.tal-node.on b { color: color-mix(in srgb, var(--br) 70%, #2c4c3c); }
.tal-node.maxed .tal-ico { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--br), 0 0 18px var(--br); }
.tal-node.addable:not(.on) .tal-ico { border-color: color-mix(in srgb, var(--br) 55%, #fff); animation: qxBreath 2.2s infinite; }
.tal-node.addable.on:not(.maxed) .tal-ico { animation: qxBreath 2.2s infinite; }
.tal-node.locked .tal-ico img, .tal-node.locked .tal-ico > i { filter: grayscale(1); opacity: .45; }
.tal-node.cant:not(.locked) .tal-ico { opacity: .62; }
.tal-node.unmatched:not(.on) { opacity: .7; }
.tal-node.selected b { background: #fff; box-shadow: 0 0 0 1px #e6dcc0; }
.tal-lock { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font-style: normal; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 99px; background: #6f7a72; color: #fff; }
.tal-pips { display: flex; gap: 3px; height: 8px; margin-top: 2px; }
.tal-pips i { width: 8px; height: 8px; border-radius: 50%; background: #dcdfd2; }
.tal-pips i.on { background: var(--br); box-shadow: 0 0 5px var(--br); }
.tb-side { min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.tb-common { flex: none; padding: 8px 12px; border-radius: 16px; border: 1px solid #ecdfbd; background: linear-gradient(170deg, #fffaf0, #fbf3df); box-shadow: 0 2px 10px rgba(64, 104, 77, .06); }
.tb-row { display: grid; grid-template-columns: 58px repeat(4, minmax(0, 1fr)); align-items: center; gap: 2px; padding: 3px 0; }
.tb-row + .tb-row { border-top: 1px dashed #eadcb7; }
.tb-row-name { font-size: 11px; color: #a07a35; font-weight: 700; line-height: 1.3; }
.tb-common .tal-ico { width: 40px; height: 40px; border-width: 2px; }
.tb-common .tal-pips { display: none; }
.tb-detail { flex: 1; }

/* 配置頁 */
.cfg-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px; height: 100%; min-height: 0; }
.cfg-layout h4 { margin: 0 0 8px; font-size: 14px; color: var(--accent); }
.cfg-layout h4 small { margin-left: 8px; font-size: 11px; font-weight: 500; color: var(--ink-mute); }
.page-box { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: #fffefa; box-shadow: 0 2px 10px rgba(64, 104, 77, .06); min-width: 0; }
.page-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; border-bottom: 2px solid #eef0e6; padding-bottom: 0; }
.page-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 104px; padding: 6px 14px 6px; margin-bottom: -2px; border: 1px solid var(--line); border-bottom: 3px solid color-mix(in srgb, var(--k) 45%, #fff); border-radius: 12px 12px 0 0; background: #f6f6ef; text-align: left; }
.page-tab .page-kind { font-size: 10px; font-weight: 800; color: var(--k); letter-spacing: 1px; }
.page-tab b { font-size: 13px; color: #3d6150; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-tab small { font-size: 10px; color: var(--ink-mute); }
.page-tab.cur small { color: var(--green-deep); font-weight: 800; }
.page-tab.cur::after { content: ''; position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--green-deep); box-shadow: 0 0 6px var(--green); }
.page-tab:hover { background: #fff; }
.page-tab[aria-pressed="true"] { background: #fff; border-color: color-mix(in srgb, var(--k) 50%, #fff); border-bottom-color: var(--k); box-shadow: 0 -4px 12px rgba(64, 104, 77, .08); }
.page-count { margin-left: auto; align-self: center; font-size: 11px; color: var(--ink-mute); }
.page-view { padding: 8px; border-radius: 12px; background: linear-gradient(180deg, #f6f9f1, #fbfbf5); }
.page-skills { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.page-skill { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.page-skill .sk-ico, .page-skill .sb-empty { width: 46px; height: 46px; font-size: 16px; }
.page-skill b { font-size: 11px; color: #3d6150; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-skill.closed b { color: #a39579; }
.page-runes { display: flex; gap: 2px; min-height: 16px; }
.page-tal { margin: 6px 2px 0; font-size: 12px; color: #557862; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.page-tools input { width: 10em; padding: 6px 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.page-tools button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 13px; }
.page-tools button:not(:disabled):hover { background: #f3f7ee; }
.page-tools .main-btn { width: auto; height: auto; padding: 7px 16px; border: 0; margin-left: auto; background: linear-gradient(#6fb98a, #3f8f61); color: #fff; }
.page-tools button:disabled { opacity: .5; cursor: default; }
.page-missing { padding: 6px 10px; border-radius: 10px; background: #fff1e0; color: #8a4b12; font-size: 12px; }
.page-missing ul { margin: 2px 0 0; padding-left: 1.2em; }
.cfg-rec { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; border: 1px solid #f1d3db; background: linear-gradient(165deg, #fff3f6, #fffaf0 60%, #f3f8ee); box-shadow: 0 2px 10px rgba(64, 104, 77, .06); min-height: 0; }
.rec-grid { display: grid; gap: 8px; }
.rec-btn { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 11px 14px 11px 58px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--k) 45%, #fff); background: linear-gradient(90deg, var(--k-pale), #fff 80%); text-align: left; box-shadow: 0 3px 10px rgba(64, 104, 77, .08); }
.rec-btn::before { content: ''; position: absolute; left: 14px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff 0 18%, var(--k) 70%); box-shadow: 0 0 0 3px #fff, 0 0 12px var(--k); }
.rec-btn b { font-size: 15px; color: color-mix(in srgb, var(--k) 65%, #2c4c3c); }
.rec-btn small { font-size: 11px; color: var(--ink-soft); }
.rec-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(64, 104, 77, .14); }
.rec-btn:active { transform: scale(.98); }
.rec-reset { border: 1px dashed #c8d6c4; background: #ffffffa0; border-radius: 10px; padding: 7px; color: var(--ink-soft); }
.cfg-auto { grid-column: 1; grid-row: 2; min-height: 0; overflow: auto; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: #fffefa; box-shadow: 0 2px 10px rgba(64, 104, 77, .06); }
#buildAuto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.auto-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--line2); background: linear-gradient(90deg, var(--fam-pale), #fff 70%); min-width: 0; }
.auto-row > b { font-size: 13px; color: #3d6150; white-space: nowrap; }
.auto-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.auto-edit { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--accent); }
.auto-edit:hover { background: #f3f7ee; }
.qx-pop .auto-rule, .pick.auto-rule { width: 100%; }
.qx-pop:has(.auto-rule) { width: 420px; }
.seg { display: flex; gap: 0; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { flex: 1; border: 0; background: #f7f6ee; padding: 6px 4px; font-size: 12px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--green-deep); color: #fff; font-weight: 800; }
.auto-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
.auto-grid label { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11.5px; color: #46685a; }
.auto-grid input { width: 4.2em; flex: none; padding: 3px 4px; border: 1px solid var(--line); border-radius: 7px; text-align: center; }

/* 底列 */
.build-footer { flex: none; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
#buildStatus { flex: 1; margin: 0; font-size: 12px; color: var(--ink-soft); min-width: 0; }
#buildStatus.dirty { color: #b06a1c; font-weight: 700; }
#buildStatus.bad { color: #c4553f; font-weight: 800; }
.build-footer .build-actions { margin: 0; flex: none; display: flex; gap: 8px; }
.build-footer .build-actions button { min-height: 38px; padding: 6px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.build-footer #buildSave { width: auto; min-width: 170px; height: 40px; border: 0; background: linear-gradient(#6fb98a, #3f8f61); color: #fff; }
.build-footer #buildSave:disabled { filter: grayscale(.6); opacity: .55; }
#buildSave.pulse { animation: qxPulse 1.6s infinite; }
.build-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.build-actions button { min-height: 34px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.build-actions .main-btn { width: auto; flex: 1; border: 0; }

/* 技能與補給設定 */
#windowLayer > #huntWin { width: min(880px, 100%); }
.hs-rec { position: relative; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 16px 11px 60px; border-radius: 14px; border: 1px solid #f0c3cf; background: linear-gradient(90deg, #fde9ef, #fff8ec 75%); text-align: left; box-shadow: 0 4px 12px rgba(224, 127, 152, .15); transition: transform .12s, box-shadow .12s; }
.hs-rec::before { content: ''; position: absolute; left: 16px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff 0 18%, #e4879f 70%); box-shadow: 0 0 0 3px #fff, 0 0 12px #e4879f; animation: qxPulse 1.8s infinite; }
.hs-rec b { font-size: 15px; color: #b8536f; }
.hs-rec small { font-size: 12px; color: var(--ink-soft); }
.hs-rec:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(224, 127, 152, .25); }
.hs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 8px 0 10px; }
.hs-sec small { margin-left: 6px; font-size: 11px; color: var(--ink-mute); }
#hsSkills .hs-skill { display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin-bottom: 5px; border-radius: 12px; background: #fff; border: 1px solid var(--line); cursor: grab; user-select: none; font-size: 13px; transition: box-shadow .12s; }
#hsSkills .hs-skill:hover { box-shadow: 0 3px 10px rgba(64, 104, 77, .1); }
#hsSkills .hs-skill.dragging { position: relative; z-index: 2; border-color: var(--pink); background: #fff7f9; box-shadow: 0 8px 18px rgba(224, 127, 152, .25); cursor: grabbing; }
.hs-grip { flex: none; width: 10px; height: 18px; background: radial-gradient(circle, #aebfae 1.4px, transparent 1.8px) 0 0 / 5px 6px; touch-action: none; cursor: grab; }
.hs-no { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: var(--green-deep); }
.hs-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #cfe2cf; box-shadow: inset 0 0 0 1px #fff; }
#hsSkills .hs-skill label { flex: 1; display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
#hsSkills .hs-skill label span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 38px; height: 22px; margin: 0; border-radius: 99px; background: #d5dbd0; cursor: pointer; transition: background .15s; }
.hs-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .15s; }
.hs-switch:checked { background: var(--green-deep); }
.hs-switch:checked::after { left: 19px; }
.hs-meter { display: grid; grid-template-columns: auto minmax(0, 1fr) 56px auto; align-items: center; gap: 8px; font-size: 13px; margin: 6px 0; }
.hs-meter input[type=range] { width: 100%; accent-color: var(--hp); }
.hs-meter.mp input[type=range] { accent-color: #5aa8d0; }
.hs-meter input[type=number] { width: 56px; padding: 3px 4px; border: 1px solid var(--line); border-radius: 8px; text-align: center; }
.hs-toggles { display: flex; flex-direction: column; gap: 5px; font-size: 13px; margin-top: 6px; }
.hs-rules { margin-top: 8px; padding: 6px 10px 8px; border-radius: 12px; background: #f6f8f0; border: 1px solid var(--line); }
.hs-rules .hs-sec { margin-top: 2px; }
.hs-rule { font-size: 12px; color: #46685a; padding: 1px 0; }
.hs-rule b { margin-right: 8px; color: var(--accent); }

@media (max-width: 1100px) {
  .sb-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; height: auto; }
  .sb-detail { grid-column: 1 / -1; overflow: visible; }
  .tb-layout { grid-template-columns: 1fr; }
  #buildPanel-talents { display: block; }
  .tb-job { min-height: 470px; }
  .tb-detail { overflow: visible; }
}
@media (max-width: 700px) {
  #windowLayer > #buildWin { padding: 10px; }
  #windowLayer > #buildWin > .card-title.build-head { flex-wrap: wrap; gap: 8px; }
  #buildJob { font-size: 14px; }
  .build-tabs { order: 3; flex-basis: 100%; }
  .build-tabs button { flex: 1; padding: 8px 4px; font-size: 13px; }
  .build-quick { padding: 6px 10px; font-size: 12px; }
  .sb-layout, .cfg-layout { display: flex; flex-direction: column; height: auto; }
  .sb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sb-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
  .sb-slot-main .sk-ico, .sb-empty { width: 52px; height: 52px; }
  .sb-clear { opacity: 1; }
  .tb-top { flex-wrap: wrap; }
  .tb-cols { gap: 6px; }
  .tal-ico { width: 44px; height: 44px; }
  .tb-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tb-row-name { grid-column: 1 / -1; }
  .cfg-auto { overflow: visible; }
  #buildAuto { grid-template-columns: 1fr; }
  .page-skills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .build-footer { flex-wrap: wrap; gap: 6px; }
  .build-footer .build-actions { flex: 1 1 100%; }
  .build-footer #buildSave { min-width: 0; flex: 1; }
  .hs-grid { grid-template-columns: 1fr; }
  .qx-tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #buildWin *, #huntWin *, .qx-tip, .qx-pop { animation: none !important; transition: none !important; }
}
.skill-upgrade-box h4 .main-btn:disabled { background: #d9d6c8; color: #8d8a7c; box-shadow: none; cursor: default; }
.tal-ico { background-color: #fbfaf3; }
.tal-node.cant:not(.locked) .tal-ico { opacity: 1; }
.tal-node.cant:not(.locked) .tal-ico img { opacity: .55; }
.tb-common .tal-ico { width: 36px; height: 36px; }
.tb-row { padding: 1px 0; }
.tb-common .tal-node { gap: 1px; padding: 1px 4px; }
.tb-detail { gap: 6px; }

/* 旅人背包：固定尺寸圖示格、柔和紙面與分類書籤。 */
#windowLayer > #bagWin,
#windowLayer.inventory-pair > #bagWin {
  width: 350px; max-width: 100%; padding: 12px;
  background: linear-gradient(145deg, var(--bag-bg1), var(--bag-bg2));
  border-radius: 18px; border: 1px solid var(--bag-line);
}
.bag-wallet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 8px; background: #f0eddf; border-radius: 8px; font-size: 11px; }
.bag-wallet .coin { gap: 5px; }
.bag-premium { color: #a16582; }
.bag-premium b { font-weight: 500; }
.bag-tabs { display: flex; gap: 3px; overflow-x: auto; padding: 7px 0; scrollbar-width: thin; }
.bag-tabs button { flex: 0 0 auto; border: 1px solid #dce4cf; border-radius: 7px; padding: 5px 6px; font: inherit; font-size: 11px; color: #64775d; background: #faf9ef; }
.bag-tabs button[aria-selected="true"] { background: #dcead0; color: #365336; border-color: #a6be95; box-shadow: inset 0 -2px #b9cda9; }
.bag-tabs button:focus-visible, #bagGrid .bag-slot:focus-visible { outline: 2px solid #b87896; outline-offset: 2px; }
#bagGrid { grid-template-columns: repeat(8, 36px); gap: 3px; justify-content: center; max-height: 310px; overflow-y: auto; padding: 3px; }
#bagGrid .bag-slot { width: 36px; height: 36px; min-width: 36px; padding: 2px; border-width: 1px; box-shadow: inset 0 1px 4px #6b735b0c; }
#bagGrid .bag-slot:disabled { opacity: 1; cursor: default; }
#bagGrid .bag-slot.has:hover { transform: translateY(-1px); box-shadow: 0 2px 7px #677c5430; }
#bagGrid .bag-slot i { margin: 0; width: 28px; height: 28px; }
#bagGrid .bag-slot > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#bagGrid .bag-slot b { top: auto; bottom: 0; right: 2px; color: #fffdf8; text-shadow: 0 1px 2px #273f32, 1px 0 2px #273f32, -1px 0 2px #273f32; font-size: 11px; }
.bag-empty { text-align: center; color: var(--ink-mute); font-size: 12px; padding-top: 8px; }
#bagWin .bag-foot { border-top: 1px solid #dce4cf; padding-top: 6px; margin-top: 6px; font-size: 11px; }
#bagSort { background: var(--sort-bg); border-color: var(--sort-line); color: var(--sort-ink); padding: 5px 8px; font-size: 11px; }
#bagSort:disabled { opacity: .6; cursor: wait; }
@media (min-width: 701px) and (max-width: 1000px) {
  #windowLayer.inventory-pair > #bagWin { width: 270px; }
  #windowLayer.inventory-pair #bagGrid { grid-template-columns: repeat(6, 36px); }
  #windowLayer.inventory-pair > #shopWin, #windowLayer.inventory-pair > #whWin, #windowLayer.inventory-pair > #forgeWin { width: calc(100% - 282px); }
}
@media (max-width: 700px) {
  #windowLayer > #bagWin,
  #windowLayer.inventory-pair > #bagWin {
    position: fixed; inset: 0 !important; width: 100% !important; height: 100dvh; max-height: 100dvh;
    border-radius: 0; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
    display: flex; flex-direction: column; z-index: 20; overflow: hidden;
  }
  #windowLayer > #bagWin.hidden { display: none; }
  #bagGrid { grid-template-columns: repeat(8, 36px); flex: 1; align-content: start; max-height: none; min-height: 0; }
  #bagWin .bag-foot { flex: none; }
  .bag-tabs, .bag-wallet { flex: none; }
  .bag-tabs button { min-height: 36px; }
}
@media (min-width: 410px) and (max-width: 700px) {
  #bagGrid { grid-template-columns: repeat(8, 36px); }
}
@media (max-width: 359px) {
  #bagGrid { grid-template-columns: repeat(6, 36px); }
}

/* 旅團商會（商城） */
#mallWin { width: min(620px, 94vw); }
.mall-dew { margin-left: auto; margin-right: 10px; font-size: 13px; color: #a05fbf; font-weight: 800; }
.mall-tabs { display: flex; gap: 6px; margin: 4px 0 10px; }
.mall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; padding: 2px; }
.mall-card { background: var(--card2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.mall-picwrap { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle at 50% 60%, #fff 0 40%, #f3eefa 70%); }
.mall-pic { background-repeat: no-repeat; }
.mall-card b { font-size: 14px; }
.mall-card small { font-size: 11px; color: var(--ink-soft); }
.mall-buy { width: 100%; height: 32px; font-size: 13px; margin-top: 4px; }
.mall-buy:disabled { opacity: .55; }
.mall-note { font-size: 11px; color: var(--ink-soft); margin: 8px 2px 0; }


/* 裝備設定摺疊後不擠壓角色欄。 */
.gear-settings {font-size:11px;margin-top:6px;}
.gear-settings label {display:flex;align-items:center;justify-content:space-between;gap:4px;margin:4px 0;}
.gear-settings select,.gear-settings input:not([type=checkbox]) {max-width:100%;min-width:0;font-size:11px;}

/* ============================================================
   暗色模式（Dark Theme）完整配色規則
   ============================================================ */
[data-theme="dark"] body {
  background: linear-gradient(135deg, #101613, #18221c);
  color: var(--ink);
}
[data-theme="dark"] .topbar {
  background: rgba(26, 36, 31, .96);
  border-bottom-color: var(--line);
}
[data-theme="dark"] .logo-name {
  color: var(--accent);
}
[data-theme="dark"] .logo-sub {
  color: var(--ink-mute);
}
[data-theme="dark"] .menu-btn {
  color: #a4c7b6;
}
[data-theme="dark"] .menu-btn:hover {
  background: var(--green-pale);
  color: #d8f5e6;
}
[data-theme="dark"] .round-btn {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .round-btn:hover {
  background: #2b3b33;
}
[data-theme="dark"] .top-avatar {
  border-color: #2e3e35;
}
[data-theme="dark"] .card {
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .card-title {
  color: #78c9a3;
  border-bottom-color: var(--line2);
}
[data-theme="dark"] .card-title small {
  color: var(--ink-mute);
}
[data-theme="dark"] .soft-btn {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .soft-btn:hover {
  background: #2b3b33;
  border-color: var(--green);
}
[data-theme="dark"] .tiny-btn {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .tiny-btn:hover {
  background: #2b3b33;
}
[data-theme="dark"] .tiny-btn.on {
  background: var(--green-pale);
  border-color: var(--green);
  color: #7de0aa;
}
[data-theme="dark"] .sub-btn {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .sub-btn:hover {
  background: #2b3b33;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}

/* 左欄：冒險者資訊、AP、裝備、任務 */
[data-theme="dark"] .char-title {
  color: var(--ink-soft);
}
[data-theme="dark"] .bar {
  background: #17221c;
}
[data-theme="dark"] .tag-job {
  background: #1f3627;
  color: #7de0aa;
  border-color: #2e543b;
}
[data-theme="dark"] .tag-realm {
  background: #2c253d;
  color: #baa4ea;
  border-color: #463963;
}
[data-theme="dark"] .ap-row {
  background: #1e3328;
  color: #83e0a9;
}
[data-theme="dark"] .attr {
  background: var(--card2);
  color: var(--ink);
}
[data-theme="dark"] .attr-plus {
  background: #25382e;
  border-color: #3b5a49;
  color: #7de0aa;
}
[data-theme="dark"] .attr-plus:hover {
  background: #2e4739;
}
[data-theme="dark"] .ap-confirm {
  background: #29261a;
  border-color: #4f4728;
  color: #f0cf75;
}
[data-theme="dark"] .derived {
  background: var(--card2);
  color: var(--ink-soft);
}
[data-theme="dark"] .eq-slot {
  background: var(--card2);
  border-color: var(--line2);
}
[data-theme="dark"] .eq-slot.has {
  background: #283730;
}
[data-theme="dark"] .qt-item {
  background: var(--card2);
  border-color: var(--line2);
  color: var(--ink);
}
[data-theme="dark"] .qt-item.tracking {
  background: #1e3529;
  border-color: var(--green);
}
[data-theme="dark"] .qt-item.qt-side {
  background: #1f2a24;
}
[data-theme="dark"] .qt-code {
  background: var(--card);
  color: var(--ink-mute);
}
[data-theme="dark"] .reward {
  background: var(--card);
  color: var(--ink);
}

/* 右欄：旅途、功能、拾取 */
[data-theme="dark"] .travel-info dt {
  color: var(--ink-mute);
}
[data-theme="dark"] .travel-info dd {
  color: var(--ink);
}
[data-theme="dark"] .func-btn {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .func-btn b {
  color: #78c9a3;
}
[data-theme="dark"] .func-btn small {
  color: var(--ink-mute);
}
[data-theme="dark"] .func-btn:hover {
  background: #2b3b33;
  border-color: var(--green);
}
[data-theme="dark"] .switch-list label {
  color: var(--ink);
}

/* 冒險紀錄與聊天室 */
[data-theme="dark"] .log-list,
[data-theme="dark"] .chat-log {
  background: #161e1a;
  border-color: var(--line);
}
[data-theme="dark"] .dock-tabs button {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink-soft);
}
[data-theme="dark"] .dock-tabs button:hover {
  background: #2b3b33;
  color: var(--ink);
}
[data-theme="dark"] .dock-tabs button.active {
  background: #161e1a;
  color: #78c9a3;
  border-color: var(--accent);
}
[data-theme="dark"] .dock-swap {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .chat-input select {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .chat-input input {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .log-list .ch-sys { color: #87d4b0; }
[data-theme="dark"] .log-list .ch-cbt { color: #e5a487; }
[data-theme="dark"] .log-list .ch-kill { color: #a4dd74; }
[data-theme="dark"] .log-list .ch-loot { color: #e5bd68; }
[data-theme="dark"] .log-list .ch-notice { color: #f2b852; }
[data-theme="dark"] .chat-log .ch-world { color: #cbb4f2; }
[data-theme="dark"] .chat-log .ch-near { color: #87d4b0; }
[data-theme="dark"] .chat-log .ch-party { color: #72c4fa; }
[data-theme="dark"] .chat-log .ch-whisper { color: #f28cc9; }
[data-theme="dark"] .chat-log .ch-notice { color: #f2b852; }

/* 功能視窗浮層 */
[data-theme="dark"] #windowLayer > .win {
  border-color: var(--line);
  box-shadow: 0 18px 70px rgba(0, 0, 0, .75);
}
[data-theme="dark"] #windowLayer > .win > .card-title {
  background: var(--card);
}

/* 背包 */
[data-theme="dark"] #bagWin .bag-wallet {
  background: var(--card2);
  border-color: var(--line);
}
[data-theme="dark"] .bag-tabs button {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink-soft);
}
[data-theme="dark"] .bag-tabs button[aria-selected="true"] {
  background: var(--card);
  color: #7de0aa;
  border-color: var(--accent);
}
[data-theme="dark"] .bag-slot {
  background: var(--card2);
  border-color: var(--line2);
  color: var(--ink);
}
[data-theme="dark"] .bag-slot.has {
  background: #283730;
}
[data-theme="dark"] #bagWin .bag-foot {
  border-top-color: var(--line);
  color: var(--ink-soft);
}
[data-theme="dark"] .bag-slot b { color: #e5bb5c; }
[data-theme="dark"] .bag-slot:has(i[style*="assets/icons"]) > span { text-shadow: 0 0 2px #000, 0 0 2px #000; }
[data-theme="dark"] .bag-premium { color: #f2a6c4; }

/* 自由配裝 buildWin（技能盤、天賦盤、配置頁） */
[data-theme="dark"] #windowLayer > #buildWin {
  background: radial-gradient(circle at 12% 0, #2c1e26 0, transparent 30%), radial-gradient(circle at 90% 100%, #172720 0, transparent 35%), var(--card);
}
[data-theme="dark"] #windowLayer > #buildWin > .card-title.build-head {
  border-bottom-color: var(--line);
}
[data-theme="dark"] .build-tabs {
  background: #161e1a;
  border-color: var(--line);
}
[data-theme="dark"] .build-tabs button {
  color: var(--ink-soft);
}
[data-theme="dark"] .build-tabs button:hover {
  background: rgba(255, 255, 255, .08);
  color: #7de0aa;
}
[data-theme="dark"] .build-tabs button[aria-pressed="true"] {
  background: var(--card2);
  color: #7de0aa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
[data-theme="dark"] .sb-pool {
  background: linear-gradient(170deg, #1b2520, #151d19);
  border-color: var(--line);
}
[data-theme="dark"] .sb-bar {
  background: linear-gradient(170deg, #22251d, #19201c);
  border-color: var(--line);
}
[data-theme="dark"] .sk-cell b {
  color: #dbe8e1;
}
[data-theme="dark"] .sk-cell:hover {
  background: rgba(255, 255, 255, .08);
}
[data-theme="dark"] .sk-cell.selected {
  background: var(--card2);
  border-color: var(--accent);
}
[data-theme="dark"] .sb-slot {
  background: var(--card2);
  border-color: var(--line2);
}
[data-theme="dark"] .sb-slot-main b {
  color: #dbe8e1;
}
[data-theme="dark"] .sb-slot.closed {
  background: repeating-linear-gradient(135deg, #1c2420 0 8px, #161c19 8px 16px);
  border-color: var(--line);
}
[data-theme="dark"] .sb-key {
  background: #19221d;
  color: var(--ink-soft);
}
[data-theme="dark"] .sb-empty {
  border-color: #3f5546;
  background: #19221d;
  color: #5d7a68;
}
[data-theme="dark"] .tree-detail {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .sd-head h3 {
  color: #7de0aa;
}
[data-theme="dark"] .sd-desc {
  color: #c9dbd2;
}
[data-theme="dark"] .tree-stat {
  background: #1e2c24;
  color: #7de0aa;
}
[data-theme="dark"] .sd-runes .rune-sock {
  background: var(--card);
  border-color: var(--line2);
}
[data-theme="dark"] .sd-runes .rune-sock b {
  color: #dbe8e1;
}
[data-theme="dark"] .sd-runes .rune-sock:not(:disabled):hover {
  background: #2c3c33;
}
[data-theme="dark"] .sd-runes .rune-sock.on {
  background: #24352b;
  border-color: var(--accent);
}
[data-theme="dark"] .skill-upgrade-box {
  background: linear-gradient(180deg, #282419, #221e14);
  border-color: #4d4329;
}
[data-theme="dark"] .skill-upgrade-box h4 {
  color: #ecc468;
}
[data-theme="dark"] .tb-gem {
  background: linear-gradient(160deg, #332a15, #221c0e);
  border-color: #574620;
  color: #f2cb68;
}
[data-theme="dark"] .tb-reset {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .tb-job {
  background: radial-gradient(ellipse at 50% 0, #222d27 0, #17201c 70%);
  border-color: var(--line);
}
[data-theme="dark"] .tb-common {
  background: linear-gradient(170deg, #26241b, #1d1e18);
  border-color: #423e2a;
}
[data-theme="dark"] .tb-common .tb-row-name {
  color: #e5bd68;
}
[data-theme="dark"] .tal-node b {
  color: #dbe8e1;
}
[data-theme="dark"] .tb-step::before {
  background: var(--line);
}
[data-theme="dark"] .page-box {
  background: var(--card2);
  border-color: var(--line);
}
[data-theme="dark"] .page-bar {
  border-bottom-color: var(--line);
}
[data-theme="dark"] .page-tab {
  background: var(--card);
  border-color: var(--line);
}
[data-theme="dark"] .page-tab b {
  color: #dbe8e1;
}
[data-theme="dark"] .page-tab:hover {
  background: #293830;
}
[data-theme="dark"] .page-tab[aria-pressed="true"] {
  background: #25352c;
  border-color: var(--line);
  border-bottom-color: var(--accent);
}
[data-theme="dark"] .page-view {
  background: var(--card);
}
[data-theme="dark"] .page-skill b {
  color: #dbe8e1;
}
[data-theme="dark"] .page-tools input,
[data-theme="dark"] .page-tools button {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .cfg-rec {
  background: linear-gradient(165deg, #2b1d23, #22241d 60%, #1a241e);
  border-color: #4c333e;
}
[data-theme="dark"] .rec-btn {
  background: linear-gradient(90deg, #2b2126, #1e2621 80%);
  border-color: var(--line);
}
[data-theme="dark"] .rec-btn b {
  color: #edd3dc;
}
[data-theme="dark"] .rec-reset {
  background: rgba(255, 255, 255, .06);
  border-color: var(--line);
  color: var(--ink-soft);
}
[data-theme="dark"] .cfg-auto {
  background: var(--card2);
  border-color: var(--line);
}
[data-theme="dark"] .auto-row {
  background: var(--card);
  border-color: var(--line2);
}
[data-theme="dark"] .auto-row > b {
  color: #dbe8e1;
}
[data-theme="dark"] .auto-edit {
  background: var(--card2);
  border-color: var(--line);
  color: #7de0aa;
}
[data-theme="dark"] .seg button {
  background: var(--card2);
  color: var(--ink-soft);
}
[data-theme="dark"] .build-footer {
  border-top-color: var(--line);
}
[data-theme="dark"] .build-footer .build-actions button {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}

/* 鍛造／鐵匠鋪 */
[data-theme="dark"] .forge-item {
  background: var(--card2);
  border-color: var(--line);
}
[data-theme="dark"] .forge-item.on {
  border-color: var(--accent);
  background: #25372e;
}
[data-theme="dark"] .forge-info {
  background: var(--card2);
  border-color: var(--line);
}

/* 商城 */
[data-theme="dark"] .mall-tabs button {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink-soft);
}
[data-theme="dark"] .mall-tabs button.on {
  background: var(--green-pale);
  border-color: var(--green);
  color: #7de0aa;
}
[data-theme="dark"] .mall-card {
  background: var(--card2);
  border-color: var(--line);
}
[data-theme="dark"] .mall-card b {
  color: #dbe8e1;
}
[data-theme="dark"] .mall-picwrap {
  background: radial-gradient(circle at 50% 60%, #2b3b33 0 40%, #1d2621 70%);
}

/* 世界地圖 */
[data-theme="dark"] .map-row {
  background: var(--card2);
  border-color: var(--line);
}
[data-theme="dark"] .map-row.here {
  background: #24382c;
  border-color: var(--accent);
}
[data-theme="dark"] .map-row b {
  color: #dbe8e1;
}
[data-theme="dark"] .map-filters input,
[data-theme="dark"] .map-filters select {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}

/* 好友 */
[data-theme="dark"] .fr-tabs button {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink-soft);
}
[data-theme="dark"] .fr-tabs button.on {
  background: var(--green-pale);
  border-color: var(--green);
  color: #7de0aa;
}
[data-theme="dark"] .fr {
  background: var(--card2);
  border-color: var(--line);
}
[data-theme="dark"] .fr-form input {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}

/* 商店與倉庫 */
[data-theme="dark"] .shop-row {
  background: var(--card2);
  border-color: var(--line);
}
[data-theme="dark"] .shop-row .sr-name {
  color: #dbe8e1;
}
[data-theme="dark"] .wh-grid .bag-slot {
  background: var(--card2);
  border-color: var(--line2);
}

/* 技能與補給 huntWin */
[data-theme="dark"] .hs-rec {
  background: linear-gradient(90deg, #2c1e24, #24221a 75%);
  border-color: #52353f;
}
[data-theme="dark"] .hs-sec {
  color: #78c9a3;
  border-bottom-color: var(--line2);
}
[data-theme="dark"] .hs-item {
  background: var(--card2);
  border-color: var(--line);
}

/* 登入與建角畫面 */
[data-theme="dark"] .dialog {
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .6);
}
[data-theme="dark"] .dialog-create {
  background: var(--card);
  border-color: var(--line);
}
[data-theme="dark"] .job-card {
  background: var(--card2);
  border-color: var(--line);
}
[data-theme="dark"] .job-card.on {
  background: #24382c;
  border-color: var(--accent);
}
[data-theme="dark"] .job-card b {
  color: #dbe8e1;
}
[data-theme="dark"] .preview {
  background: var(--card2);
  border-color: var(--line);
}
[data-theme="dark"] .sex-toggle button {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .sex-toggle button.on {
  background: var(--green-pale);
  border-color: var(--green);
  color: #7de0aa;
}
[data-theme="dark"] .create-form input {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}

/* 提示卡與選單 */
[data-theme="dark"] .tip-card {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
}
[data-theme="dark"] .tip-head b {
  color: #78c9a3;
}
[data-theme="dark"] .tip-desc {
  color: #c9dbd2;
}
[data-theme="dark"] .tip-stat {
  background: #19241d;
}
[data-theme="dark"] .tip-stat b {
  color: #7de0aa;
}
[data-theme="dark"] .qx-pop {
  background: var(--card2);
  border-color: var(--line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .7);
}
[data-theme="dark"] .pick-title {
  color: #78c9a3;
}
[data-theme="dark"] .pick-item {
  background: var(--card);
  border-color: var(--line);
}
[data-theme="dark"] .pick-item b {
  color: #dbe8e1;
}
[data-theme="dark"] .pick-item:not(:disabled):hover {
  background: #2b3b33;
}
[data-theme="dark"] .pick-item[aria-pressed="true"] {
  background: #24382c;
  border-color: var(--accent);
}
[data-theme="dark"] .ctx-menu {
  background: var(--card2);
  border-color: var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}
[data-theme="dark"] .ctx-item {
  color: var(--ink);
}
[data-theme="dark"] .ctx-item:hover {
  background: #2b3b33;
  color: #7de0aa;
}
[data-theme="dark"] .item-tip {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
}
[data-theme="dark"] .npc-dialog {
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .nd-opt {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .nd-opt:hover {
  background: #2b3b33;
  border-color: var(--accent);
}

/* Equipment details follow the active theme. */
.item-tip .tt-sub, .item-tip .tt-hint { color: var(--ink-soft); }
.item-tip .tt-sec { border-color: var(--line); }
.item-tip .tt-good, .forge-info .fi-result.ok { color: var(--green-deep); }
.item-tip .tt-ax { color: var(--jade); }
.item-tip .tt-en, .forge-info .fi-step { color: var(--gold); }
.item-tip .tt-bad, .forge-info .fi-bad, .forge-info .fi-result.fail { color: var(--hp); }
.forge-info .fi-pity { background: var(--bg2); }

#windowLayer > #bagWin, #windowLayer.inventory-pair > #bagWin { background: var(--card); color: var(--ink); }
#bagWin .bag-foot { color: var(--ink-soft); }

/* 夜間模式：遊戲畫面框與畫面上的面板改暗色（不留白邊） */
[data-theme="dark"] .stage { border-color: #1c2621; box-shadow: 0 9px 24px rgba(0,0,0,.45); }
[data-theme="dark"] .pill { background: rgba(28,38,33,.9); color: var(--ink); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
[data-theme="dark"] .minimap { border-color: #2e3e35; background: #1c2621; box-shadow: 0 0 0 1px #384b41, 0 4px 12px rgba(0,0,0,.4); }
[data-theme="dark"] .skills, [data-theme="dark"] .potions { background: rgba(28,38,33,.88); box-shadow: 0 4px 15px rgba(0,0,0,.4); }
[data-theme="dark"] .skill-slot, [data-theme="dark"] .potion { background-color: #26332c; border-color: #3a4d42; box-shadow: 0 2px 0 #14201a; }
[data-theme="dark"] .skill-slot.locked { background-color: #1f2924; border-color: #2e3e35; }
[data-theme="dark"] .skill-slot .skill-name { color: var(--ink); }
[data-theme="dark"] .skill-key { background: #3d5a4b; }
[data-theme="dark"] .side-toggle { background: var(--card); border-color: var(--line); }
.mall-ico { width: 72px; height: 72px; }
.mall-desc { font-size: 11px; color: var(--ink-soft); line-height: 1.5; text-align: center; }
.mall-buyrow { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mall-buyrow .mall-buy { flex: 1; padding: 6px 4px; font-size: 12px; }
.map-row .map-btns { display: flex; flex-direction: column; gap: 4px; flex: none; }
.tiny-btn.tp-btn { background: #e8f3ff; border-color: #9fc3e8; color: #2f5f8f; }
[data-theme="dark"] .tiny-btn.tp-btn { background: #1d2c3a; border-color: #34506a; color: #9fd3ff; }
[data-theme="dark"] .skill-slot.has-ico { background-color: #2c3a33; }
.item-link { cursor: pointer; font-weight: 800; text-decoration: underline dotted; text-underline-offset: 3px; }

/* 電腦版：技能列與藥水移到場景下方操作列（main.js 搬移），場景裡只留職業能量條、放大靠左 */
.ctrl-hotbar { display: none; }
@media (min-width: 821px) {
  .ctrl-row.has-hotbar .ctrl-tip { display: none; }
  .ctrl-row.has-hotbar .ctrl-hotbar { display: flex; flex: 1; justify-content: center; align-items: center; gap: 10px; min-width: 0; }
  .ctrl-hotbar .skills, .ctrl-hotbar .potions { padding: 5px 7px 9px; }
  .ctrl-hotbar .skill-slot, .ctrl-hotbar .potion { width: 44px; height: 44px; }
  .stage.bar-moved .hotbar, .stage.bar-moved.narrow .hotbar { left: 14px; right: auto; bottom: 14px; transform: scale(var(--hud-scale, 1)); transform-origin: bottom left; display: block; max-width: calc(100% - 28px); }
  .stage.bar-moved .blade-bar { font-size: 15px; padding: 6px 12px; gap: 6px; border-radius: 12px; }
  .stage.bar-moved .blade-pip { width: 10px; height: 20px; }
  .stage.bar-moved .wind-pip { width: 15px; height: 15px; }
  .stage.bar-moved .heat-meter { width: 140px; height: 13px; border-radius: 7px; }
}
/* 中間欄太窄放不下「按鈕＋技能列＋按鈕」時，技能列換到下一行置中 */
@media (min-width: 821px) {
  .center { container-type: inline-size; container-name: center; }
  @container center (max-width: 660px) {
    .ctrl-row.has-hotbar { flex-wrap: wrap; justify-content: space-between; row-gap: 6px; }
    .ctrl-row.has-hotbar .ctrl-hotbar { flex: 1 1 100%; } .ctrl-row.has-hotbar #layoutToggle { order: 3; }
  }
}

/* 開始自動狩獵＋右邊的設定齒輪（自動戰鬥設定） */
.auto-wrap { display: flex; gap: 6px; align-items: stretch; }
.auto-wrap .auto-btn { flex: 1; min-width: 0; }
.auto-set { flex: none; width: 48px; margin: 2px 0; border-radius: 14px; border: 1px solid var(--line); background: var(--card2); color: var(--ink-soft); font-size: 22px; box-shadow: var(--shadow); }
.auto-set:hover { color: var(--green-deep); border-color: var(--green); }
/* 操作列：技能列靠左、上班／上課專用鈕在最右邊 */
@media (min-width: 821px) {
  .ctrl-row.has-hotbar .ctrl-hotbar { justify-content: flex-start; }
  .ctrl-row #layoutToggle { margin-left: auto; flex: none; }
}
/* 副本清單 */
#dgWin { width: min(860px, 96vw); }
.dg-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; }
.dg-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); }
.dg-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dg-row b { font-size: 14px; }
.dg-row small { font-size: 11px; color: var(--ink-soft); }
.dg-row .dg-intro { line-height: 1.5; }
.dg-row button { flex: none; }
/* 副本上方資訊改成一行小條，首領血條移到左上（地名下面），畫面中間不擋怪 */
.dg-hud { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: calc(100% - 420px * var(--hud-scale, 1)); padding: 4px 6px 4px 14px; border-radius: 99px; white-space: nowrap; }
.dg-hud .dg-name { display: none; }
.dg-hud .dg-wave { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.dg-hud .dg-timer { font-size: 12px; }
.dg-hud .tiny-btn { margin-top: 0; padding: 3px 10px; }
.stage:has(.dg-hud:not(.hidden)) .target-frame { top: 54px; left: 12px; width: 220px; transform: scale(var(--hud-scale, 1)); transform-origin: top left; opacity: .92; }
/* 夜間模式：目標（怪物／首領）血條框改暗底，名字才看得清楚 */
[data-theme="dark"] .target-frame { background: rgba(28,38,33,.94); border-color: var(--line2); color: var(--ink); }
[data-theme="dark"] .tf-lv { color: #f0b878; }
[data-theme="dark"] .tf-tag.boss { background: #4a3a1a; color: #ffd27a; }
[data-theme="dark"] .tf-tag.aggro { background: #4a2620; color: #ff9a8a; }

/* 鍛造視窗分頁：強化與鍛造／重鑄洗練／材料分解（docs/36） */
.forge-tabs { display: flex; gap: 6px; margin: 2px 0 8px; flex-wrap: wrap; }
.forge-tabs .pick { padding: 3px 10px; font-size: 12px; }
.forge-info .fi-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.fi-affixes { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
.fi-affix { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--card2); font-size: 12px; cursor: pointer; }
.fi-affix.on { border-color: var(--green); background: var(--green-pale); font-weight: 700; }
.fi-work { margin-top: 8px; padding: 6px 8px; border-radius: 10px; border: 1px dashed var(--line); }
.fi-work > b { font-size: 14px; }
.fi-work .tiny-btn { margin-top: 4px; }
.salvage-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-height: 340px; overflow-y: auto; }
.salvage-row { padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); }
.salvage-row .sv-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.salvage-row .sv-mats { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 4px 0; font-size: 11px; }
.salvage-row .sv-mat { display: inline-flex; align-items: center; gap: 3px; }
.salvage-row .sv-mat i { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.salvage-row .sv-mat i[style*="assets/icons"] { border-radius: 0; }
.salvage-row .sv-mat.kept { color: var(--gold); }
.salvage-row .sv-empty { font-size: 11px; color: var(--ink-soft); margin: 2px 0; }
.item-tip .tt-trade { font-size: 12px; font-weight: 700; }
.item-tip .tt-trade-free { color: var(--green-deep); }
.item-tip .tt-trade-once { color: var(--gold); }
.item-tip .tt-trade-bound { color: var(--hp); }
/* 副本難度選擇 */
.dg-diffs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.dg-diff { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 10px; border: 2px solid var(--line); background: var(--card); font-size: 11px; line-height: 1.4; cursor: pointer; text-align: left; color: var(--ink); }
.dg-diff.on { border-color: var(--green); background: var(--green-pale); }
.dg-diff.locked { opacity: .55; cursor: not-allowed; }
.dg-diff b { font-size: 13px; }
.dg-diff .dg-d-hard { color: #d0782a; }
.dg-row.dg-row-diff { flex-direction: column; align-items: stretch; }
.dg-row .dg-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.dg-row .dg-foot small { flex: 1; }
@media (max-width: 560px) { .dg-diffs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 副本選擇：直式主視覺卡片，窄螢幕保留橫向捲動 */
.dg-gallery-title { margin: 0; font-size: 14px; color: var(--green-deep); }
.dg-gallery { display: flex; gap: 12px; overflow-x: auto; padding: 8px 6px 14px; scroll-snap-type: x proximity; }
.dg-card {
  position: relative; flex: 1 0 0; min-width: 160px; height: 360px; padding: 0; overflow: hidden;
  border: 2px solid var(--line2); border-radius: 16px; background: #162b2a; color: #fff; text-align: left;
  cursor: pointer; scroll-snap-align: start; box-shadow: 0 4px 10px rgba(16,38,30,.15);
  transition: border-color .2s, box-shadow .2s;
}
.dg-card-art { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.dg-card-info {
  position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: 6px; padding: 64px 14px 20px;
  background: linear-gradient(transparent, rgba(7,20,24,.86) 55%, #071418); text-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.dg-card-name { font-size: 19px; font-weight: 900; letter-spacing: 1px; }
.dg-card-level { color: #d9f2e7; font-size: 13px; font-weight: 700; }
.dg-card-lock { align-self: flex-start; padding: 3px 8px; border: 1px solid #98a3a6; border-radius: 6px; font-size: 12px; font-weight: 700; }
.dg-card:enabled:hover, .dg-card:focus-visible {
  border-color: var(--green); outline: 2px solid var(--green); outline-offset: 1px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--green) 45%, transparent);
}
.dg-card:enabled:hover .dg-card-art, .dg-card:focus-visible .dg-card-art { transform: scale(1.04); }
.dg-card:disabled { filter: saturate(0) brightness(.62); cursor: not-allowed; }
[data-theme="dark"] .dg-card { border-color: #506d63; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.dg-back { align-self: flex-start; margin: 0 0 4px; }
@media (max-width: 820px) {
  .dg-card { flex: 0 0 210px; height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .dg-card, .dg-card-art { transition: none; }
}

/* 副本詳細：左主視覺＋難度按鈕，右簡介與故事 */
.dg-panel { display: grid; grid-template-columns: minmax(260px, 42%) 1fr; gap: 12px; align-items: stretch; padding: 10px; }
.dg-panel > div { display: flex; flex-direction: column; min-width: 0; }
.dg-left { position: relative; min-height: 340px; border-radius: 14px; overflow: hidden; background: #1b2a2f center / cover no-repeat; padding: 12px; justify-content: space-between; }
.dg-title { font-size: 20px; font-weight: 900; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.7); letter-spacing: 2px; }
.dg-left .dg-diffs { display: flex; flex-direction: column; gap: 8px; align-self: flex-end; width: 46%; min-width: 120px; margin-top: auto; }
.dg-c0 { --dgc: #3fae63; } .dg-c1 { --dgc: #3b7fd6; } .dg-c2 { --dgc: #9b4fd1; } .dg-c3 { --dgc: #d8434b; }
.dg-left .dg-diff { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; border: 2px solid rgba(255,255,255,.75); color: #fff; font-size: 14px; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.35); text-shadow: 0 1px 2px rgba(0,0,0,.5); background: linear-gradient(180deg, color-mix(in srgb, var(--dgc) 80%, #fff), var(--dgc)); }
.dg-left .dg-diff small { font-size: 11px; opacity: .9; color: #fff; }
.dg-left .dg-diff.on { border-color: #fff; outline: 3px solid rgba(255,255,255,.55); transform: translateX(-4px); }
.dg-left .dg-diff.locked { filter: grayscale(.7) brightness(.7); cursor: not-allowed; }
.dg-right { max-height: 360px; overflow-y: auto; padding-right: 4px; gap: 4px; }
.dg-right h4 { margin: 8px 0 2px; font-size: 13px; color: var(--green-deep); }
.dg-right .dg-meta { font-size: 12px; color: var(--ink-soft); }
.dg-right p { margin: 0 0 6px; font-size: 13px; line-height: 1.7; color: var(--ink); }
.dg-detail { margin-top: 6px; padding: 8px 10px; border-radius: 10px; border-left: 4px solid var(--dgc); background: color-mix(in srgb, var(--dgc) 10%, var(--card)); font-size: 12px; line-height: 1.6; color: var(--ink); }
.dg-detail h4 { margin: 0 0 2px; color: var(--dgc); }
.dg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.dg-foot small { font-size: 12px; color: var(--ink-soft); }
.dg-actions { display: flex; align-items: stretch; gap: 8px; margin-left: auto; max-width: 100%; }
.dg-actions .dg-auto { width: auto; height: auto; min-height: 42px; margin: 0; padding: 8px 12px; font-size: 13px; }
.dg-actions .dg-auto:disabled { background: var(--soft); color: var(--ink-soft); filter: grayscale(1); opacity: 1; cursor: not-allowed; }
.dg-foot .dg-auto-requirement { width: 100%; text-align: right; color: var(--ink); }
@media (max-width: 560px) {
  .dg-actions { width: 100%; }
  .dg-foot .dg-actions .dg-auto, .dg-foot .dg-actions .dg-enter { flex: 1; min-width: 0; height: auto; padding: 8px; font-size: 12px; }
}
.dg-foot .dg-enter { background: var(--dgc); border-color: var(--dgc); color: #fff; padding: 8px 18px; }
.dg-pending { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line); font-size: 13px; }
@media (max-width: 820px) {
  .dg-panel { grid-template-columns: 1fr; }
  .dg-left { min-height: 260px; }
  .dg-right { max-height: none; }
}
#dgWin.card.win { width: min(900px, 96vw); max-width: 96vw; }
.dg-foot .dg-enter { width: auto; flex: none; min-width: 160px; }
/* 難度按鈕縮小、貼右下角，不擋主視覺 */
.dg-left .dg-diffs { width: auto; min-width: 0; gap: 5px; align-self: flex-end; }
.dg-left .dg-diff { padding: 4px 10px; font-size: 12px; border-radius: 10px; border-width: 1.5px; min-width: 108px; gap: 8px; }
.dg-left .dg-diff small { font-size: 10px; }
.dg-left .dg-diff.on { transform: translateX(-3px); outline-width: 2px; }
.dg-left .dg-diff { flex-direction: row; white-space: nowrap; padding: 3px 10px; min-width: 124px; line-height: 1.4; }
.dg-left .dg-diff b { font-size: 12px; }

/* 電腦版：冒險者資訊固定在左欄頂端，下方內容捲動時不動 */
@media (min-width: 901px) {
  .side-left > .profile-card { position: sticky; top: 0; z-index: 3; }
}
/* 自動狩獵按鈕：視窗縮小時不換行、字縮小 */
.auto-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; font-size: clamp(12px, 1.1vw, 16px); letter-spacing: 0; }
.auto-btn.has-ico::before { flex: none; }
/* 星芽交易所（docs/39） */
#xWin { width: min(680px, 94vw); }
.card-title .x-wallet { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.x-body { max-height: 60vh; overflow: auto; padding: 2px; display: flex; flex-direction: column; gap: 8px; }
.x-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.x-filter input, .x-filter select, .x-form input, .x-form select { height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--card2); color: var(--ink); padding: 0 8px; font: inherit; font-size: 13px; }
.x-filter { flex-direction: column; }
.x-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.x-frow > input:not(.x-num) { flex: 1 1 140px; min-width: 0; }
.x-filter .x-num { width: 84px; }
.x-lab { font-size: 12px; color: var(--ink-soft); }
.x-ax { display: inline-flex; align-items: center; gap: 4px; }
.x-ax select { max-width: 150px; }
.x-ax .x-num { width: 70px; }
.x-info .x-affix { color: var(--accent); }
.x-list { display: flex; flex-direction: column; gap: 6px; }
.x-row { display: flex; align-items: center; gap: 10px; background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; }
.x-ico { width: 36px; height: 36px; flex: none; border-radius: 8px; }
.x-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.x-info small, .x-row > small { font-size: 11px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-row > .x-name { flex: 1; }
.x-price { font-size: 13px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.x-reason { margin-left: auto; }
.x-empty { font-size: 12px; color: var(--ink-soft); margin: 10px 4px; }
.x-pager { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; color: var(--ink-soft); }
.x-sell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.x-bag { display: grid; grid-template-columns: repeat(auto-fill, 44px); gap: 6px; align-content: start; }
.x-slot { position: relative; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; padding: 0; }
.x-slot.on { outline: 2px solid var(--accent); }
.x-slot small { position: absolute; right: 3px; bottom: 1px; font-size: 10px; font-weight: 800; color: var(--ink); text-shadow: 0 0 2px var(--card); }
.x-form { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.x-form label { color: var(--ink-soft); }
.x-est { white-space: pre-line; color: var(--ink-soft); line-height: 1.5; }
.x-note { font-size: 11px; color: var(--ink-soft); margin: 2px; }
#xClaimGo { align-self: flex-end; }
@media (max-width: 560px) { .x-sell { grid-template-columns: 1fr; } }

/* 技能欄等級字：圖示上加深色底，深淺色模式都看得清楚 */
.skill-slot .skill-lv { left: 2px; top: 2px; padding: 0 3px; border-radius: 6px; line-height: 13px; font-size: 10px; color: #ffe2b8; background: rgba(20, 24, 22, .72); text-shadow: none; }
[data-theme="dark"] .sk-row .sk-lv { color: #f0b878; }
/* 技能欄鍵位改到左下角，不擋圖示上的數字 */
.skill-key { left: -5px; bottom: -5px; transform: none; }
[data-theme="dark"] .skill-slot.locked .cd { color: #cfd8d2; }

/* 小地圖放大 175%、黑底；座標不顯示 */
.minimap { width: 161px; height: 161px; background: #000; }
[data-theme="dark"] .minimap { background: #000; }
.stage-tr .pill-pos { display: none; }
@media (max-width: 820px) { .minimap { width: 120px; height: 120px; } }
/* ===== 夜間模式對比修正：寫死淺色底的改深色底＋淺字、寫死深色字的改亮色（淺色模式不受影響） ===== */
/* 1. 技能欄與藥水：技能名、藥水數量的白色光暈改深色描邊，藥水格底色跟著主題 */
[data-theme="dark"] .skill-slot.has-ico .skill-name { color: #f3f7f4; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 3px #000; }
[data-theme="dark"] .skill-slot .skill-name { text-shadow: 0 1px 2px #000; }
[data-theme="dark"] .skill-slot.no-mp .skill-name { color: #9cc0f0; }
[data-theme="dark"] .skill-slot.lv-low .cd { color: #e8dccb; text-shadow: 0 0 2px #000; }
[data-theme="dark"] .skill-slot.slot-closed { background: repeating-linear-gradient(135deg, #222c27 0 6px, #1b2420 6px 12px); }
[data-theme="dark"] .skill-slot.slot-closed .cd { color: #b9ad98; }
[data-theme="dark"] .potion-hp { background: radial-gradient(circle at 50% 60%, #d9707c 0 10px, var(--potion-bg) 11px); }
[data-theme="dark"] .potion-mp { background: radial-gradient(circle at 50% 60%, #5f97cf 0 10px, var(--potion-bg) 11px); }
[data-theme="dark"] .potion.has-ico { background-color: var(--potion-bg); }
[data-theme="dark"] .potion b { color: #f3f7f4; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 3px #000; }

/* 2. 自動戰鬥設定：技能順序列、規則框、開關 */
[data-theme="dark"] #hsSkills .hs-skill { background: var(--card2); border-color: var(--line2); color: var(--ink); }
[data-theme="dark"] #hsSkills .hs-skill:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
[data-theme="dark"] #hsSkills .hs-skill.dragging { background: #3a2a31; }
[data-theme="dark"] .hs-skill button { background: var(--card2); border-color: var(--line2); color: var(--ink); }
[data-theme="dark"] .hs-ico { border-color: var(--line2); box-shadow: none; }
[data-theme="dark"] .hs-grip { background: radial-gradient(circle, #6f8a7b 1.4px, transparent 1.8px) 0 0 / 5px 6px; }
[data-theme="dark"] .hs-switch { background: #3a4a41; }
[data-theme="dark"] .hs-switch:checked { background: var(--green); }
[data-theme="dark"] .hs-switch::after { background: #e6eee9; }
[data-theme="dark"] .hs-rules { background: var(--soft); border-color: var(--line2); }
[data-theme="dark"] .hs-rule { color: var(--ink); }
[data-theme="dark"] .hs-rec b { color: #f2a0b8; }
[data-theme="dark"] .hs-rec::before { box-shadow: 0 0 0 3px #3d242c, 0 0 12px #e4879f; }

/* 3. 左欄角色資訊、能力、任務 */
[data-theme="dark"] .char-name { color: var(--ink); }
[data-theme="dark"] .char-sub, [data-theme="dark"] .meter-label b, [data-theme="dark"] .attr span { color: var(--ink-soft); }
[data-theme="dark"] .tag { color: var(--ink-soft); }
[data-theme="dark"] #realmBtn { background: #3a3020; border-color: #8a6a2a; color: #f0cf7a; }
[data-theme="dark"] .attr button { background: var(--card2); border-color: var(--line2); }
[data-theme="dark"] .qt-item.qt-side .quest-tag { color: #a6d68a; }
[data-theme="dark"] .quest-name { color: #8fd8b0; }
[data-theme="dark"] .quest-steps { color: #a9cdb5; border-top-color: var(--line2); }
[data-theme="dark"] .quest-steps li::before { background: var(--card2); }
[data-theme="dark"] .quest-steps li.turnin { color: #f0b878; }
[data-theme="dark"] .quest-steps li.turnin::before { background: #3a3020; }

/* 4. 右欄旅途資訊、拾取說明、GM 診斷、公會提示 */
[data-theme="dark"] #tvType.t-hunt, [data-theme="dark"] #tvState.s-hunt { color: #ff9a85; }
[data-theme="dark"] #tvType.t-dungeon { color: #c9a0f0; }
[data-theme="dark"] #tvState.s-quest { color: #8cc8f0; }
[data-theme="dark"] .loot-note { background: var(--soft); color: var(--ink-soft); }
[data-theme="dark"] .gm-diag { background: var(--soft); color: var(--ink); }
[data-theme="dark"] .guild-note { background: var(--soft); }

/* 5. 隊伍面板、查看資訊 */
[data-theme="dark"] .party-panel { background: rgba(28, 38, 33, .93); color: var(--ink); }
[data-theme="dark"] .pm.self { background: var(--green-pale); }
[data-theme="dark"] .pp-bonus { color: #7fd6a0; }
[data-theme="dark"] .pm-lv { color: #f0b878; }
[data-theme="dark"] .pm-crown { background: #3a3020; color: #f0cf7a; }
[data-theme="dark"] .pp-leave { background: #3d242c !important; color: #ff9a85 !important; }
[data-theme="dark"] .ins-row b { color: var(--ink); text-shadow: none; }
[data-theme="dark"] .ins-none { color: var(--ink-mute); }

/* 6. 鍛造、商店、商城 */
[data-theme="dark"] .forge-info .fi-bad, [data-theme="dark"] .forge-info .fi-result.fail { color: #ff9a85; }
[data-theme="dark"] .forge-info .fi-result.ok { color: #7fd6a0; }
[data-theme="dark"] .forge-info .fi-pity { background: #33302a; }
[data-theme="dark"] .shop-row .sr-price { color: #e5bb5c; }
[data-theme="dark"] .mall-dew { color: #d4a5f0; }

/* 7. 技能與成長視窗（技能盤、天賦盤、配置頁、說明框）：分類淡色改深色版 */
[data-theme="dark"] .sk-lv { background: var(--card2); }
[data-theme="dark"] .rune-ico.rune-none { background: var(--soft); border-color: var(--line2); }
[data-theme="dark"] .chip.gold { background: #3a3020; color: #f0cf7a; }
[data-theme="dark"] .chip.pink { color: #f2a0b8; }
[data-theme="dark"] .chip.mute { background: var(--soft); }
[data-theme="dark"] .chip.requirement-met { background: var(--green-pale); }
[data-theme="dark"] .chip.requirement-short { background: #3d2a24; }
[data-theme="dark"] .requirement-met { color: #7fd6a0; }
[data-theme="dark"] .requirement-short { color: #ffab8a; }
[data-theme="dark"] .fam-aoe { --fam-pale: #1f3a2a; }
[data-theme="dark"] .fam-one { --fam-pale: #3d2530; }
[data-theme="dark"] .fam-sup { --fam-pale: #1f2f40; }
[data-theme="dark"] .fam-sum { --fam-pale: #2d2740; }
[data-theme="dark"] .fam-mov { --fam-pale: #3a3020; }
[data-theme="dark"] .rune-form { --rn-pale: #1f2f40; }
[data-theme="dark"] .rune-cond { --rn-pale: #3d2530; }
[data-theme="dark"] .rune-tune { --rn-pale: #3a3020; }
[data-theme="dark"] .c-pink { --br-pale: #3d2530; }
[data-theme="dark"] .c-green { --br-pale: #1f3a2a; }
[data-theme="dark"] .c-blue { --br-pale: #1f2f40; }
[data-theme="dark"] .c-gold { --br-pale: #3a3020; }
[data-theme="dark"] .sb-clear { background: var(--card2); }
[data-theme="dark"] .sb-clear:hover, [data-theme="dark"] .tb-reset:not(:disabled):hover { color: #f2a0b8; }
[data-theme="dark"] .sb-empty.lock { border-color: var(--line2); background-color: var(--soft); }
[data-theme="dark"] .tree-unlock, [data-theme="dark"] .tree-warning, [data-theme="dark"] .tb-row-name { color: #e5bb5c; }
[data-theme="dark"] .rune-issue, [data-theme="dark"] .tip-bad { color: #ff9a85; }
[data-theme="dark"] .tip-now { color: #7fd6a0; }
[data-theme="dark"] .tip-rune { color: #e5bb5c; }
[data-theme="dark"] .tal-node.on b { color: color-mix(in srgb, var(--br) 55%, #ffffff); }
[data-theme="dark"] .tal-node.selected b { background: var(--card2); box-shadow: 0 0 0 1px var(--line2); }
[data-theme="dark"] .tal-pips i { background: #3a4a41; }
[data-theme="dark"] .page-tal { color: var(--ink-soft); }
[data-theme="dark"] .page-tools button:not(:disabled):hover, [data-theme="dark"] .auto-edit:hover { background: var(--soft); }
[data-theme="dark"] .page-missing { background: #3a2c1e; color: #f0c08a; }
[data-theme="dark"] .auto-grid label { color: var(--ink); }
[data-theme="dark"] #buildStatus { color: #f0b878; }
[data-theme="dark"] #buildStatus.dirty { color: #f0b878; }
[data-theme="dark"] #buildStatus.bad { color: #ff9a85; }
[data-theme="dark"] .build-actions button { background: var(--card2); border-color: var(--line2); color: var(--ink); }
[data-theme="dark"] .skill-upgrade-box h4 .main-btn:disabled { background: #2e3a34; color: #7a9486; }

/* 8. NPC 對話框、登入與倒下畫面 */
[data-theme="dark"] .nd-name b { color: #8cd0e8; }
[data-theme="dark"] .nd-name small { background: #3a3020; color: #f0cf7a; }
[data-theme="dark"] .overlay { background: rgba(20, 26, 23, .88); }
[data-theme="dark"] .dialog-err { color: #ff9aae; }
[data-theme="dark"] .create-actions > .back-btn { background: var(--card2); border-color: var(--line2); color: var(--ink); }
[data-theme="dark"] .revive-title { color: #ff9a85; }
.func-btn[hidden] { display: none !important; }
/* 符文頁：獨立容量，材料、堆疊、說明與兌換都在同一頁。 */
.rune-panel{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;min-width:0}
.rune-wallet{font-weight:bold;color:var(--accent)}.rune-help{font-size:12px;line-height:1.5;margin:3px 0;color:var(--ink-soft)}
.rune-stones{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.rune-panel select{max-width:100%;background:var(--card2);color:var(--ink);padding:5px;border:1px solid var(--line);border-radius:5px}
.rune-inventory{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:7px}
.rune-card-button{display:flex;flex-direction:column;align-items:center;border:2px solid;border-radius:8px;padding:5px;background:var(--card2);color:var(--ink);cursor:pointer}
.rune-card-button[aria-pressed=true]{background:var(--green-pale)}.rune-card-button img{width:48px;height:48px}.rune-card-button small{font-size:10px}
.rune-detail{padding:8px;border:1px solid var(--line);border-radius:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.rune-detail .tip-card{width:100%;box-sizing:border-box}.rune-detail input{width:65px}.rune-detail .rune-help{width:100%}
#windowLayer > #bagWin.rune-bag{width:min(620px,100%)}
#bagWin.rune-bag #bagGrid{grid-template-columns:minmax(0,1fr);width:100%;max-height:min(620px,65vh);justify-content:stretch}
/* 公會頁：盾徽名片、分頁內容與可排序名冊共用明暗色票。 */
#windowLayer > #friendWin:has(.guild-panel:not([hidden])) { width: min(900px, 100%); }
.guild-panel {
  --guild-muted: #526b60;
  --guild-track: #dce8dc;
  --guild-fill: #38765b;
  --guild-gold-bg: #fff0c9;
  --guild-gold-ink: #735014;
  --guild-blue-bg: #e6eefb;
  --guild-blue-ink: #355681;
  --guild-danger: #9a393b;
  max-height: min(70dvh, 740px); overflow: auto; overflow-wrap: anywhere;
  padding: 2px 5px 6px 2px; font-size: 13px; color: var(--ink); scrollbar-gutter: stable;
}
.guild-panel[hidden], .guild-panel [hidden], #friendForm[hidden], #friendList[hidden] { display: none; }
.guild-panel h3, .guild-panel h4, .guild-panel p { margin: 0; }
.guild-panel .guild-muted { color: var(--guild-muted); }
.guild-panel .guild-footnote { font-size: 12px; line-height: 1.6; margin-top: 9px; }
.guild-panel .tiny-btn, .guild-panel input:not([type=checkbox]), .guild-panel select {
  min-height: 36px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px;
  margin: 0; background: var(--card2); color: var(--ink); font: inherit; line-height: 20px;
}
.guild-panel .tiny-btn:hover { background: var(--green-pale); border-color: var(--guild-fill); }
.guild-panel .tiny-btn:disabled { opacity: .55; cursor: wait; }
.guild-panel .guild-primary { background: var(--guild-fill); border-color: var(--guild-fill); color: #fff; font-weight: 700; }
.guild-panel .guild-primary:hover { background: #285a43; color: #fff; }
.guild-panel .guild-danger { color: var(--guild-danger); }
.guild-panel input:not([type=checkbox]), .guild-panel textarea { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.guild-panel input::placeholder { color: var(--guild-muted); opacity: 1; }
.guild-panel textarea {
  display: block; resize: vertical; min-height: 112px; margin-top: 6px; border: 1px solid var(--line);
  border-radius: 9px; padding: 10px 12px; background: var(--card2); color: var(--ink); font: inherit; line-height: 1.7;
}
.guild-panel :is(input, textarea, select, [role=button]):focus-visible { outline: 2px solid var(--guild-fill); outline-offset: 2px; }
.guild-hero, .guild-welcome {
  display: flex; align-items: center; gap: 22px; padding: 22px 24px; border: 1px solid var(--line);
  border-radius: 16px; background: radial-gradient(ellipse at top left, var(--green-pale), transparent 75%), var(--card2);
}
.guild-emblem {
  --guild-hue: 151;
  position: relative; flex: 0 0 76px; height: 88px; align-self: center;
  clip-path: polygon(50% 0, 95% 15%, 91% 66%, 76% 86%, 50% 100%, 24% 86%, 9% 66%, 5% 15%);
  background: linear-gradient(145deg, hsl(var(--guild-hue) 28% 50%), hsl(var(--guild-hue) 34% 24%));
  box-shadow: inset 0 0 24px #12261b33;
}
.guild-emblem::before {
  content: ''; position: absolute; inset: 6px;
  clip-path: polygon(50% 0, 95% 15%, 91% 66%, 76% 86%, 50% 100%, 24% 86%, 9% 66%, 5% 15%);
  background: linear-gradient(135deg, #f4de9a, #cfad60);
}
.guild-emblem::after {
  content: '✦'; position: absolute; inset: 10px; display: grid; place-items: center; padding-bottom: 9px;
  clip-path: polygon(50% 0, 95% 15%, 91% 66%, 76% 86%, 50% 100%, 24% 86%, 9% 66%, 5% 15%);
  background: hsl(var(--guild-hue) 30% 29%); color: #f6dfa3; font-size: 37px;
}
.guild-identity { flex: 1; min-width: 0; }
.guild-eyebrow { display: block; color: var(--guild-muted); font-size: 11px; letter-spacing: .18em; font-weight: 700; margin-bottom: 7px; }
.guild-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.guild-title-row h3 { font-size: 25px; line-height: 1.35; letter-spacing: .04em; }
.guild-level { display: inline-block; flex: none; padding: 3px 9px; border-radius: 7px; background: var(--guild-gold-bg); color: var(--guild-gold-ink); font-size: 12px; font-weight: 800; }
.guild-panel .guild-population { margin-top: 7px; margin-bottom: 12px; color: var(--guild-muted); font-variant-numeric: tabular-nums; }
.guild-exp { position: relative; height: 26px; border-radius: 8px; overflow: hidden; background: var(--guild-track); }
.guild-exp progress { position: absolute; inset: 0; height: 100%; width: 100%; }
.guild-exp span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 3px #102d20; background: #153f2bb0; }
.guild-panel progress { display: block; appearance: none; border: 0; overflow: hidden; background: var(--guild-track); color: var(--guild-fill); }
.guild-panel progress::-webkit-progress-bar { background: var(--guild-track); }
.guild-panel progress::-webkit-progress-value { background: var(--guild-fill); border-radius: inherit; }
.guild-panel progress::-moz-progress-bar { background: var(--guild-fill); border-radius: inherit; }
.guild-tabs { display: flex; gap: 6px; padding: 14px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.guild-tabs .tiny-btn { min-width: 90px; background: transparent; border-color: transparent; font-weight: 700; }
.guild-tabs .tiny-btn[aria-selected=true] { background: var(--green-pale); color: var(--ink); border-color: var(--line); box-shadow: inset 0 -3px var(--guild-fill); }
.guild-section { display: grid; gap: 14px; }
.guild-card { padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--card2); min-width: 0; }
.guild-panel .guild-card-title { font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.guild-notice-card { border-left: 4px solid var(--guild-fill); }
.guild-announcement { white-space: pre-wrap; line-height: 1.9; min-height: 44px; }
.guild-overview-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 14px; }
.guild-personal { display: flex; align-items: center; gap: 22px; min-height: 90px; }
.guild-personal > div { display: grid; gap: 5px; }
.guild-personal strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.guild-role { display: inline-block; white-space: nowrap; font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 6px; background: var(--soft); color: var(--ink); }
.guild-role-leader { background: var(--guild-gold-bg); color: var(--guild-gold-ink); }
.guild-role-deputy { background: var(--guild-blue-bg); color: var(--guild-blue-ink); }
.guild-role-officer { background: var(--green-pale); color: var(--ink); }
.guild-meter + .guild-meter { margin-top: 12px; }
.guild-meter-caption { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.guild-meter progress { width: 100%; height: 8px; border-radius: 5px; }
.guild-settings { padding: 2px 4px 4px; }
.guild-settings label { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
.guild-settings input { accent-color: var(--guild-fill); width: 17px; height: 17px; margin: 0; }
.guild-toolbar, .guild-footer, .guild-pager { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.guild-toolbar { justify-content: space-between; }
.guild-toolbar [aria-pressed=true] { background: var(--green-pale); border-color: var(--guild-fill); }
.guild-footer { justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; }
.guild-pager:not(:empty) { justify-content: flex-end; padding-top: 12px; }
.guild-member-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.guild-member-table th { white-space: nowrap; background: var(--soft); font-weight: 700; color: var(--guild-muted); }
.guild-member-table th, .guild-member-table td { padding: 12px 7px; border-bottom: 1px solid var(--line); }
.guild-member-table th .tiny-btn { border: 0; padding: 0 2px; background: transparent; min-height: 32px; font-size: 12px; }
.guild-member-table th:last-child { width: 190px; }
.guild-member-table td { vertical-align: middle; }
.guild-member-name { min-width: 92px; }
.guild-member-name [role=button] { cursor: pointer; line-height: 1.8; }
.guild-member-name [role=button]:hover { text-decoration: underline; }
.guild-presence { display: inline-block; width: 8px; height: 8px; border: 1px solid var(--guild-muted); border-radius: 50%; background: transparent; margin-right: 6px; vertical-align: middle; }
.guild-presence.is-online { background: var(--guild-fill); border-color: var(--guild-fill); box-shadow: 0 0 0 3px var(--green-pale); }
.guild-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.guild-actions .tiny-btn, .guild-actions select { font-size: 12px; padding: 7px 8px; }
.guild-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 14px 0; }
.guild-result-info { display: grid; gap: 7px; flex: 1; min-width: 160px; }
.guild-inline-form { display: flex; gap: 8px; margin-top: 7px; }
.guild-inline-form input { flex: 1; }
.guild-inline-form .tiny-btn { flex: none; }
.guild-card > p + .tiny-btn { margin-top: 10px; }
.guild-panel .guild-empty { padding: 12px 0; color: var(--guild-muted); line-height: 1.7; }
.guild-welcome h3 { font-size: 21px; margin-bottom: 9px; }
.guild-welcome p { line-height: 1.8; color: var(--guild-muted); }
.guild-welcome ~ .guild-card { margin-top: 14px; }
.guild-cooldowns:empty { display: none; }
.guild-cooldowns p { padding: 10px; background: var(--guild-gold-bg); color: var(--guild-gold-ink); border-radius: 8px; margin-top: 10px; }
.guild-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-theme="dark"] .guild-panel {
  --guild-muted: #b0c6b9; --guild-track: #354a3e; --guild-fill: #418465;
  --guild-gold-bg: #43371f; --guild-gold-ink: #f3d593;
  --guild-blue-bg: #273951; --guild-blue-ink: #bdd7ff; --guild-danger: #f4acaf;
}
[data-theme="dark"] .guild-presence.is-online { background: #88d6ab; }
@media (max-width: 600px) {
  .guild-panel { max-height: none; overflow: visible; padding: 0; scrollbar-gutter: auto; }
  .guild-hero, .guild-welcome { padding: 16px 13px; gap: 12px; }
  .guild-emblem { flex-basis: 52px; height: 64px; }
  .guild-emblem::after { font-size: 26px; inset: 9px; padding-bottom: 5px; }
  .guild-title-row { gap: 6px; }
  .guild-title-row h3 { font-size: 21px; }
  .guild-eyebrow { font-size: 10px; }
  .guild-population { font-size: 11px; }
  .guild-overview-grid { grid-template-columns: 1fr; }
  .guild-personal { min-height: 50px; }
  .guild-card { padding: 14px; }
  .guild-tabs .tiny-btn { flex: 1; min-width: 0; }
  .guild-member-table, .guild-member-table tbody { display: block; }
  .guild-member-table thead { display: block; margin-bottom: 10px; }
  .guild-member-table thead tr { display: flex; gap: 8px; }
  .guild-member-table th { display: none; }
  .guild-member-table th[aria-sort] { display: block; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; }
  .guild-member-table .guild-member-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; margin-bottom: 10px; background: var(--card2); border: 1px solid var(--line); border-radius: 12px; }
  .guild-member-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .guild-member-table td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; color: var(--guild-muted); margin-bottom: 4px; }
  .guild-member-table .guild-member-name { grid-column: 1; font-size: 15px; align-self: center; }
  .guild-member-table td[data-label=職位] { grid-column: 2; grid-row: 1; text-align: right; }
  .guild-member-table td[data-label=職位]::before { display: none; }
  .guild-member-table .guild-member-actions { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--line); }
  .guild-inline-form { flex-wrap: wrap; }
  .guild-inline-form input { flex-basis: 130px; }
  .guild-welcome { align-items: flex-start; }
  .guild-welcome h3 { font-size: 18px; }
  .guild-welcome p { font-size: 12px; }
}
.guild-dialog { width: min(420px, 85vw); max-height: 80vh; overflow: auto; border: 2px solid #5b8069; border-radius: 12px; padding: 18px; background: #f5f0df; color: #274433; }
.guild-dialog::backdrop { background: #10282099; }
.guild-dialog button { margin: 6px; }
.guild-dialog [data-error] { color: #973737; }
.line[data-ch=guild] { color: #286044; }
[data-theme="dark"] .line[data-ch=guild] { color: #b4e5cf; }
[data-theme="dark"] .guild-dialog { background: var(--card); color: var(--ink); border-color: #739c83; }
[data-theme="dark"] .guild-dialog [data-error] { color: #f0aaaa; }
#windowLayer > .pop-stack { z-index: 10000; pointer-events: auto; }
.monthly-card { grid-column: span 2; padding: 12px; gap: 8px; }
.monthly-art { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 10px; }
.monthly-card b { font-size: 19px; letter-spacing: .12em; }
.monthly-card .monthly-price { color: var(--accent); font-size: 16px; margin-top: 4px; }
.monthly-card .permanent-price { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 12px; }
.permanent-original { position: relative; display: inline-block; padding-top: 26px; color: var(--ink); font-size: 15px; font-weight: 400; }
.permanent-sale { position: absolute; top: -3px; left: -9px; width: 48px; height: 32px; object-fit: contain; }
.permanent-original s { position: relative; text-decoration: none; }
.permanent-original s::after { content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; background: currentColor; transform: rotate(-22deg); }
.permanent-current { font-size: 22px; font-weight: 800; white-space: nowrap; }
.mall-features .monthly-price { color: var(--accent); font-size: 18px; font-weight: 700; }
.monthly-card .main-btn { width: 100%; min-height: 40px; }
.monthly-card [data-monthly-remaining]:empty { display: none; }
.monthly-card .mall-desc { color: var(--ink); }
.mall-feature-btn { font-size: 12px; padding: 4px 12px; }
.mall-features { width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 20px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.mall-features::backdrop { background: rgba(0, 0, 0, .5); }
.mall-features h3 { margin: 0 0 12px; font-size: 18px; color: var(--accent); }
.mall-features ol { margin: 0 0 18px; padding-left: 24px; font-size: 14px; line-height: 1.8; }
.mall-features li + li { margin-top: 4px; }
.mall-features form { display: flex; justify-content: flex-end; }
#windowLayer > #monthlyWin { width: min(660px, 100%); padding: 16px 20px 0; }
.monthly-win { --monthly-muted: #526b60; }
[data-theme="dark"] .monthly-win { --monthly-muted: #acc3b6; }
.monthly-hero { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center; padding: 0 0 18px; }
.monthly-hero > img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); }
.monthly-hero h4 { font-size: 25px; letter-spacing: .16em; margin: 6px 0 10px; }
.monthly-hero small, .monthly-hero p { color: var(--monthly-muted); font-size: 12px; line-height: 1.6; margin: 8px 0 0; }
#monthlyStatus { display: inline-block; padding: 4px 12px; border-radius: 20px; background: var(--green-pale); color: var(--accent); font-size: 13px; }
#monthlyStatus.inactive { background: var(--soft); color: var(--monthly-muted); }
.monthly-sections { display: grid; gap: 12px; }
.monthly-section { border: 1px solid var(--line); background: var(--card2); border-radius: 14px; padding: 12px 16px; }
.monthly-section h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; color: var(--accent); font-size: 15px; }
.monthly-section h4 > span { font-size: 10px; letter-spacing: .05em; padding: 4px 5px; border-radius: 6px; background: var(--green-pale); }
.monthly-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; cursor: pointer; }
.monthly-row + .monthly-row { border-top: 1px solid var(--line); }
.monthly-row > span { min-width: 0; }
.monthly-row b { display: block; font-size: 13px; font-weight: 600; }
.monthly-row small { display: block; font-size: 11px; color: var(--monthly-muted); line-height: 1.6; margin-top: 4px; }
.monthly-row select, .monthly-row input[type=number] { flex: none; width: 112px; min-height: 36px; padding: 6px 8px; border: 1px solid var(--line2); border-radius: 8px; background: var(--soft); color: var(--ink); font: inherit; font-size: 12px; }
.monthly-row input[type=number] { width: 76px; text-align: center; }
.monthly-row .hs-switch { padding: 0; border: 0; background: #b5c4ba; }
.monthly-row .hs-switch:checked { background: var(--green-deep); }
.monthly-row :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.monthly-quest { width: 100%; min-height: 36px; font-size: 12px; }
.monthly-hint { font-size: 11px; line-height: 1.6; color: var(--monthly-muted); margin: 6px 0 0; }
.monthly-footer { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--card); padding: 14px 0; margin-top: 8px; border-top: 1px solid var(--line); }
.monthly-footer > span { font-size: 12px; color: var(--monthly-muted); }
.monthly-footer .main-btn { width: auto; flex: none; min-width: 150px; min-height: 40px; margin: 0; }
.monthly-bag-item img { width: 28px; height: 28px; object-fit: contain; }
.monthly-bag-detail { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; margin-top: 10px; border: 1px solid var(--line); background: var(--soft); border-radius: 12px; }
.monthly-bag-detail b, .monthly-bag-detail span, .monthly-bag-detail small { display: block; line-height: 1.7; }
.monthly-bag-detail span, .monthly-bag-detail small { font-size: 12px; }
.monthly-bag-detail .main-btn { width: auto; min-width: 80px; margin: 0; }
@media (max-width: 600px) {
  .monthly-card { grid-column: 1 / -1; }
  #windowLayer > #monthlyWin { padding: 12px 14px 0; }
  .monthly-hero { grid-template-columns: 110px 1fr; gap: 14px; padding-bottom: 14px; }
  .monthly-hero h4 { font-size: 20px; letter-spacing: .08em; }
  .monthly-section { padding: 12px; }
  .monthly-row { gap: 12px; }
  .monthly-footer .main-btn { min-width: 120px; }
}
.chat-guild-name { color: #876019; font-size: .9em; font-weight: 600; }
[data-theme="dark"] .chat-guild-name { color: #f3d593; }
.monthly-name { color: #7543ab !important; }
[data-theme="dark"] .monthly-name { color: #d6b5ff !important; }
.monthly-badge { display: inline-block; width: 20px; height: 20px; margin-right: 4px; vertical-align: -5px; object-fit: contain; }
.permanent-name { color: transparent !important; background: linear-gradient(100deg,#8a4800,#a5227f,#4c40b5,#007a68,#8a4800); background-clip: text; -webkit-background-clip: text; font-weight: 800; }
[data-theme="dark"] .permanent-name { background-image: linear-gradient(100deg,#ffe596,#ffb8e9,#c8baff,#91ecd6,#ffe596); }
.monthly-overflow { opacity: .75; outline: 1px dashed #cda6ff; }

/* 頂部選單：字不換行；視窗變窄先縮間距，再只留圖示（滑鼠移過去看名稱） */
.menu-btn { white-space: nowrap; flex: none; }
@media (max-width: 1360px) { .menu-btn { padding: 7px 7px; gap: 4px; font-size: 13px; } .menu { gap: 0; } }
@media (max-width: 1180px) { .menu-btn { padding: 7px; font-size: 0; gap: 0; } }
/* 冒險者資訊的月卡小圖 */
.monthly-chip { width: 26px; height: 26px; padding: 0; border: 1px solid #cda6ff; border-radius: 8px; background: var(--card2) center / 22px no-repeat; cursor: pointer; vertical-align: middle; }
.monthly-chip:hover { box-shadow: 0 0 0 2px rgba(205,166,255,.45); }
.monthly-chip.off { filter: grayscale(1); opacity: .55; border-color: var(--line); }
.char-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.char-name-row .char-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-name-row .monthly-chip { width: 22px; height: 22px; background-size: 18px; flex: none; }
/* 月卡／永久卡卡片等高，價格與購買鈕對齊同一條線 */
.mall-grid { align-items: stretch; }
.monthly-card { align-self: stretch; }
.monthly-card .monthly-price, .monthly-card .permanent-price { min-height: 58px; display: flex; align-items: flex-end; justify-content: center; }
.monthly-card .main-btn { margin-top: auto; }

/* 商城臉／髮專區：髮型、臉型分兩段，卡片上方是穿上去的頭像預覽 */
.mall-grid.mall-styles { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.mall-style-title { grid-column: 1 / -1; margin: 6px 2px 0; font-size: 14px; color: var(--ink-soft); }
.mall-style-pic { width: 104px; height: 96px; border-radius: 10px; background: linear-gradient(#fff8ee, #f3ead8); }
[data-theme="dark"] .mall-style-pic { background: linear-gradient(#3a3550, #2c2840); }
.mall-style .mall-buy { width: 100%; }
/* 有可分配 AP 時，徽章右上角亮紅點提醒（收合時也看得到） */
.ap-badge { position: relative; }
.ap-badge:not(.zero)::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px var(--card); }

/* 背包販賣共用狀態。 */
.bag-foot { flex-wrap: wrap; gap: 6px; }
.bag-selling .bag-slot.has { position: relative; }
.bag-slot.sale-selected { outline: 2px solid #e9b95b; outline-offset: -2px; }
.bag-slot.sale-selected::after { content: '✓'; position: absolute; top: 1px; right: 3px; color: #fff; background: #78561e; border-radius: 4px; padding: 0 3px; font-weight: bold; }
.bag-slot.sale-blocked { opacity: .48; cursor: not-allowed; }