/* 玄鐵：深色儀表板、琥珀強調色。淺色／深色／跟隨系統三種主題。 */
:root, [data-theme="dark"] {
  --bg: #0F1216; --paper: #171B21; --raise: #1E242C; --ink: #E6E9EE; --muted: #8F98A6; --line: #283039; --line-strong: #364050;
  --accent: #E0A34A; --accent-ink: #1A1408; --accent-soft: #3A2E17;
  --ok: #5FC28C; --ok-soft: #17342A; --danger: #E06B6B; --danger-soft: #3A1E1E;
  --male: #4E7FBF; --female: #C25A7A;
  --shadow: 0 12px 32px rgba(0,0,0,.45);
}
[data-theme="light"] {
  --bg: #E9ECF1; --paper: #F7F8FA; --raise: #FFFFFF; --ink: #171B21; --muted: #586170; --line: #D1D6DE; --line-strong: #B9C1CC;
  --accent: #A86A12; --accent-ink: #FFFFFF; --accent-soft: #F4E6CC;
  --ok: #2E7D4F; --ok-soft: #DDF1E5; --danger: #B23A3A; --danger-soft: #F7DDDD;
  --male: #3E6A9A; --female: #A84A68;
  --shadow: 0 12px 32px rgba(20,30,50,.18);
}
@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --bg: #E9ECF1; --paper: #F7F8FA; --raise: #FFFFFF; --ink: #171B21; --muted: #586170; --line: #D1D6DE; --line-strong: #B9C1CC;
    --accent: #A86A12; --accent-ink: #FFFFFF; --accent-soft: #F4E6CC;
    --ok: #2E7D4F; --ok-soft: #DDF1E5; --danger: #B23A3A; --danger-soft: #F7DDDD;
    --male: #3E6A9A; --female: #A84A68;
    --shadow: 0 12px 32px rgba(20,30,50,.18);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.5 "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
/* 其他語言：拉丁字母（含越南文聲調）用 Noto Sans，日文假名用 Noto Sans JP */
html:lang(en) body, html:lang(vi) body { font-family: "Noto Sans", "Noto Sans TC", system-ui, sans-serif; }
html:lang(ja) body { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans TC", system-ui, sans-serif; }
a { color: var(--accent); text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: var(--raise); border-radius: 8px; padding: 0 12px; height: 36px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
button:hover { border-color: var(--line-strong); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button.ghost:hover { background: var(--raise); color: var(--ink); }
button.icon { width: 36px; padding: 0; justify-content: center; }
button.danger { color: var(--danger); }
input, select { height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); width: 100%; }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic.f { fill: currentColor; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.muted { color: var(--muted); }
.warn { color: var(--danger); }
.ok { color: var(--ok); }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 7px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); font-weight: 500; white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.plain { background: transparent; border: 1px solid var(--line); color: var(--muted); font-weight: 400; }

/* ===== 版面 ===== */
.app { display: grid; grid-template-columns: 64px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.rail { border-right: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 6px; }
.rail .logo { width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; font-size: 20px; }
.rail button { width: 46px; height: 46px; flex-direction: column; gap: 3px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 10px; border-radius: 10px; }
.rail button.on, .rail button:hover { background: var(--accent-soft); color: var(--accent); }
.rail .ic { font-size: 18px; }
.rail .spacer { flex: 1; }
.theme-switch { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.theme-switch button { width: 34px; height: 30px; border-radius: 8px; font-size: 15px; }
.theme-switch button.on { background: var(--accent-soft); color: var(--accent); }

.shell { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.top { height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.top .title { font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.top .meta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.top .grow { flex: 1; }
.top .model { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ok); display: inline-block; }
.dot.off { background: var(--muted); }

/* 狀態列（v0.17）：依重要度分三組、一行高、數字放大當背景、底邊是劑量條 */
.hud { display: flex; gap: 16px; padding: 7px 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.hud .tier { display: flex; gap: 6px; flex: var(--n, 1) 1 0; min-width: 0; }
.hud .stat { --c: var(--accent); position: relative; flex: 1 1 0; min-width: 0; height: 32px; padding: 0 10px 3px; display: flex; align-items: center; gap: 6px;
  white-space: nowrap; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); overflow: hidden; }
.hud .stat .ic { font-size: 13px; color: var(--c); }
.hud .stat .nm { font-size: 12.5px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 背景數字：SVG 文字，基線固定在劑量條上緣再往下 .1em → 不管哪種字型都是「頂端貼近卡片上緣、下緣被蓋住約 1/7」。
   所有數字字級一律相同、不依寬度縮小（卡片太窄時數字會墊在名稱後面，像浮水印）；滿值的三位數改顯示「滿」（見 app.js hudCard）。 */
.hud .stat .big { --fs: 38px; position: absolute; left: 0; top: 0; width: calc(100% - 8px); height: calc(100% - 3px); pointer-events: none;
  font-size: var(--fs); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; fill: var(--c); opacity: .34; }
/* 「滿」「MAX」是字不是數字：中日文字比數字高（約 .9em 對 .73em）、英文字母又比數字寬，縮一點才不會頂出上緣或壓到名稱 */
.hud .stat .big.full { font-size: calc(var(--fs) * .78); }
.hud .stat .gauge { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line); }
.hud .stat .gauge i { position: absolute; top: 0; bottom: 0; background: var(--c); }
.hud .stat.bi .gauge::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.hud .stat.t3 { --c: var(--nb); }
.hud .stat.lv-ok { --c: var(--ok); }
.hud .stat.qi { --c: #5B8DB8; }
.hud .stat .wd { flex: none; font-size: 10.5px; line-height: 1; padding: 2px 4px; border-radius: 4px; color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.hud .stat.wounded.w1 .wd { color: var(--warn, #b7791f); background: color-mix(in srgb, var(--warn, #b7791f) 16%, transparent); }
.hud .stat.lv-low, .hud .stat.neg, .hud .stat.warn { --c: var(--danger); }
.hud .stat.warn { border-color: color-mix(in srgb, var(--danger) 70%, var(--line)); }
.bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }

.body { flex: 1; display: flex; min-height: 0; }
main.game { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.story { flex: 1; overflow-y: auto; padding: 24px 56px 16px; font-size: 16px; line-height: 1.95; }
.story .turn { margin-bottom: 22px; max-width: 860px; margin-inline: auto; }
.story .you { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 500; margin-bottom: 8px; max-width: 100%; }
.story .you span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story .text { white-space: pre-wrap; }
.story .text.opening { color: var(--muted); }
.story .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.story .chips span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; white-space: nowrap; }
.story .chapter { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; letter-spacing: .1em; margin: 6px 0 18px; }
.story .chapter::before, .story .chapter::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.status-line { min-height: 20px; font-size: 12px; color: var(--muted); padding: 0 56px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 輸入列：重寫按鈕貼左、送出按鈕貼右，中間的輸入框吃滿剩下的寬度，隨視窗寬度伸縮 */
.composer { display: flex; align-items: center; gap: 8px; padding: 10px 12px 14px; border-top: 1px solid var(--line); background: var(--paper); }
.composer > * { flex-shrink: 0; }
.composer input { flex: 1 1 auto; min-width: 0; height: 40px; }
.composer .icon { width: 40px; height: 40px; }
.composer .primary { height: 40px; }

.panel { width: 340px; border-left: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; min-height: 0; }
/* 右面板分頁：方格書籤，一排四格，多了自動換行；還沒開放的反灰加鎖 */
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px; border-bottom: 1px solid var(--line); background: linear-gradient(var(--paper), var(--bg)); }
.tabs button { position: relative; height: 54px; flex-direction: column; gap: 3px; padding: 0 3px; border-radius: 10px; background: var(--raise); border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 500; justify-content: center; min-width: 0; transition: border-color .15s, background .15s, color .15s; }
.tabs button > .ic:first-child { font-size: 19px; }
.tabs button .tl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.tabs button:hover { color: var(--ink); border-color: var(--line-strong); }
.tabs .n { position: absolute; top: 4px; right: 5px; font-size: 9px; min-width: 15px; height: 15px; line-height: 15px; padding: 0 3px; border-radius: 999px; background: var(--line); color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }
.tabs .n:empty { display: none; }
.tabs .lk { display: none; position: absolute; top: 5px; right: 5px; font-size: 10px; }
.tabs button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 4px 14px color-mix(in srgb, var(--accent) 18%, transparent); }
.tabs button.on .n { background: var(--accent); color: var(--accent-ink); }
.tabs button.lock { opacity: .45; background: transparent; border-style: dashed; }
.tabs button.lock .lk { display: block; }
.tabs button.lock .n { display: none; }
.tabs button.lock.on { opacity: .8; box-shadow: none; }
.panel .view { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); min-width: 0; }
.card.now { border-color: var(--accent); background: var(--accent-soft); }
.card .tile { width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 17px; }
.card .avatar { position: relative; width: 36px; height: 36px; border-radius: 10px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; flex-shrink: 0; }
.card .avatar.m { background: var(--male); } .card .avatar.f { background: var(--female); } .card .avatar.x { background: var(--muted); }
.card .avatar .g { position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; border-radius: 999px; background: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 11px; }
.card .avatar.m .g { color: var(--male); } .card .avatar.f .g { color: var(--female); }
.card .body2 { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.card .name { font-size: 13px; font-weight: 500; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.card .sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pips { display: flex; gap: 2px; }
.pips i { width: 8px; height: 8px; border-radius: 2px; background: var(--line); }
.pips i.on { background: var(--accent); } .pips i.neg { background: var(--danger); }
.empty { color: var(--muted); font-size: 12px; text-align: center; padding: 20px 0; }
.profile-line { font-size: 11px; color: var(--muted); padding: 4px 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tabbar { display: none; }
.show-m { display: none; }

/* 標題列的時間天氣 */
.top .env .wx { font-size: 15px; color: var(--accent); }
.top .env .w { color: var(--ink); }
.env-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.env-card > .ic { font-size: 24px; color: var(--accent); }
.env-card b { font-weight: 500; font-size: 13px; }

/* 故事中的小標籤：發現底細、羈絆變化 */
.story .chips span.found { border-color: var(--accent); color: var(--accent); }
.story .turn.rewriting { opacity: .35; }

/* ===== 人物：卡片與關係圖 ===== */
.npc-bar { display: flex; align-items: center; }
.seg { display: flex; padding: 3px; gap: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); width: 100%; }
.seg button { flex: 1; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; justify-content: center; }
.seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.cat-row { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.cat-row::-webkit-scrollbar { display: none; }
.cat-chip { flex: 0 0 auto; height: 28px; padding: 0 9px; font-size: 12px; border-radius: 999px; gap: 5px; color: var(--muted); background: var(--bg); }
.cat-chip .n { font-size: 10px; color: var(--muted); }
.cat-chip.on { border-color: currentColor; background: var(--raise); }
.cat-chip.zero { opacity: .45; }
/* 分類顏色：友好綠、仇人紅、一面之緣灰、血緣琥珀、戀愛粉、師徒結拜藍 */
.c-all { --cc: var(--ink); } .c-friend { --cc: var(--ok); } .c-foe { --cc: var(--danger); } .c-acquaint { --cc: var(--muted); }
.c-kin { --cc: var(--accent); } .c-love { --cc: var(--female); } .c-mentor { --cc: var(--male); }
.cat-chip.on, .cat-chip .ic { color: var(--cc); }
.cat-chip.on .n { color: var(--cc); }
.rel { color: var(--cc); font-weight: 500; }
.npc-item { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); overflow: hidden; flex-shrink: 0; }
.npc-item .card { border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.npc-item .chev { color: var(--muted); font-size: 14px; }
.npc-item.open { border-color: var(--line-strong); }
.npc-item.dead { opacity: .55; }
.npc-detail { padding: 2px 12px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.npc-detail .d-meta { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npc-detail .d-desc { line-height: 1.7; }
.npc-detail .d-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); letter-spacing: .05em; border-top: 1px dashed var(--line); padding-top: 8px; }
.facets { display: flex; flex-direction: column; gap: 5px; }
.facet { display: grid; grid-template-columns: 16px 64px minmax(0, 1fr); align-items: center; gap: 6px; }
.facet > .ic { color: var(--accent); }
.facet .k { color: var(--muted); white-space: nowrap; }
.facet .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 4px; }
.facet.locked > .ic, .facet.locked .v { color: var(--muted); opacity: .7; }
.hist { display: flex; flex-direction: column; gap: 3px; }
.hist div { display: flex; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist b { font-weight: 600; min-width: 26px; font-variant-numeric: tabular-nums; }
.graph { display: flex; flex-direction: column; gap: 6px; }
.graph svg { width: 100%; height: auto; max-height: 70vh; }
.graph .gl { stroke: var(--cc); stroke-linecap: round; opacity: .85; }
.graph .gl.c-foe { stroke-dasharray: 5 4; }
.graph .gl.c-acquaint { stroke-dasharray: 1 5; }
.graph .me circle { fill: var(--accent); }
.graph .me text { fill: var(--accent-ink); font-size: 14px; font-weight: 700; text-anchor: middle; }
.graph .gnode { cursor: pointer; }
.graph .gnode.dead { opacity: .45; }
.graph .av { fill: var(--muted); stroke: var(--paper); stroke-width: 2; }
.graph .av.m { fill: var(--male); } .graph .av.f { fill: var(--female); }
.graph .here { fill: none; stroke: var(--ok); stroke-width: 2; }
.graph text { text-anchor: middle; }
.graph .nm, .graph .dg { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.graph .ini { fill: #fff; font-size: 14px; font-weight: 600; }
.graph .nm { fill: var(--ink); font-size: 12px; font-weight: 500; }
.graph .dg { fill: var(--cc); font-size: 10.5px; }
.center { text-align: center; }

/* ===== 對話框 ===== */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
.dialog { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; width: min(560px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: var(--shadow); }
.dialog header { display: flex; align-items: center; gap: 10px; padding: 16px 18px 0; }
.dialog header h2 { margin: 0; font-size: 16px; font-weight: 700; flex: 1; }
.dialog .content { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.dialog .actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 4px; }
.dialog .err { color: var(--danger); font-size: 12px; min-height: 16px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 5px; min-height: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.preview .p { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 11px; color: var(--muted); white-space: nowrap; }
.preview .p .ic { font-size: 16px; color: var(--accent); }
.preview .p b { font-size: 14px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.preview .p small { font-size: 10px; }
.preview .p small.up { color: var(--ok); } .preview .p small.down { color: var(--danger); }
.save-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.save-item .body2 { flex: 1; min-width: 0; }
.save-item .name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.save-item .sub { font-size: 11px; color: var(--muted); white-space: nowrap; }
.login { width: min(380px, 100%); }
.login .content { gap: 10px; }
.login .tagline { margin: 0 0 4px; font-size: 13px; line-height: 1.8; letter-spacing: .06em; text-align: center; color: var(--muted); }

/* ===== 設定頁 ===== */
.page { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; }
.page h1 { font-size: 20px; margin: 8px 0 4px; display: flex; align-items: center; gap: 10px; }
.page .lead { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.page .field { margin: 14px 0; }
.note { padding: 10px 12px; background: var(--accent-soft); color: var(--accent); border-radius: 8px; font-size: 13px; margin-top: 8px; }
.note b { color: inherit; }
.inline { display: flex; gap: 8px; align-items: center; }
.inline input { flex: 1; min-width: 0; }
.small { font-size: 12px; color: var(--muted); }
.radio { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.radio input { width: auto; height: auto; }
.perf-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; white-space: nowrap; }

/* ===== 手機 ===== */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .rail { display: none; }
  .top { height: 52px; padding: 0 12px; gap: 8px; }
  .top .title { font-size: 14px; }
  .hide-m { display: none !important; }
  .show-m { display: inline; }
  /* 狀態列：全部屬性列成一排，左右滑動；還沒滑到底時右側淡出 */
  .hud { gap: 10px; padding: 7px 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 12px; scrollbar-width: none;
         -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .hud.at-end { -webkit-mask-image: none; mask-image: none; }
  .hud::-webkit-scrollbar { display: none; }
  /* 每一組的寬度必須明確算出（卡片數 × 卡片寬 + 間距），不能寫 auto：iPhone Safari 會把 auto 算成卡片內文字寬度的總和，
     比卡片固定寬度窄，卡片就溢出去壓在下一組上面（Chromium 不會重現）。--sw＝一張卡片的寬度，--n 由前端依組內張數寫在 .tier 上。 */
  .hud { --sw: 116px; }
  html:not(:lang(zh-Hant)) .hud { --sw: 130px; }
  .hud .tier { --tw: calc(var(--n, 1) * var(--sw) + (var(--n, 1) - 1) * 6px); flex: 0 0 var(--tw); width: var(--tw); }
  .hud .stat { flex: 0 0 var(--sw); width: var(--sw); height: 30px; padding: 0 8px 3px; gap: 5px; scroll-snap-align: start; }
  .hud .stat .nm { font-size: 12px; }
  .hud .stat .big { --fs: 35px; width: calc(100% - 6px); }
  /* 手機：底部分頁列只放常用的，面板上方仍有完整的方格書籤（家業、武學、地點等在這裡切換） */
  .tabs { gap: 5px; padding: 8px 10px; }
  .tabs button { height: 48px; gap: 2px; }
  .tabs button > .ic:first-child { font-size: 17px; }
  .story { padding: 16px 18px 12px; font-size: 16px; line-height: 1.9; }
  .status-line { padding: 0 14px 4px; }
  .composer { padding: 8px 12px; }
  .composer .primary { width: 44px; padding: 0; justify-content: center; }
  .panel { position: absolute; inset: 0; width: auto; border-left: 0; z-index: 5; display: none; }
  .app.show-panel .panel { display: flex; }
  .app.show-panel main.game { display: none; }
  .body { position: relative; }
  .tabbar { display: flex; height: 62px; padding: 6px 8px 10px; gap: 4px; background: var(--paper); border-top: 1px solid var(--line); }
  .tabbar button { flex: 1; height: 46px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); flex-direction: column; gap: 3px; font-size: 10px; padding: 0; }
  .tabbar button.on { background: var(--accent-soft); color: var(--accent); }
  .tabbar .ic { font-size: 19px; }
  .grid2 { grid-template-columns: 1fr; }
  .dialog { border-radius: 14px; }
}

/* ===== 共用世界：登入、簡報、人物狀態 ===== */
.top .who { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink); white-space: nowrap; }
.top .who .ic { color: var(--accent); }
.badge.bad { background: var(--danger-soft); color: var(--danger); }
.login .seg { margin-bottom: 2px; }
.briefing { max-width: 860px; margin: 4px auto 22px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); font-size: 14px; line-height: 1.7; }
.briefing .b-head { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.briefing ul { margin: 0 0 6px; padding-left: 20px; }
.npc-detail .d-name { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.npc-detail .d-name.ok { color: var(--ok); }
.hist.chron div { align-items: center; }
.hist.chron .ic { color: var(--accent); flex-shrink: 0; }
.panel .view > * { flex-shrink: 0; }

/* ===== 人名性別色、物品稀有度色（兩種主題） ===== */
:root, [data-theme="dark"] {
  --male-t: #7FA8E0; --female-t: #E58AAA; --nb: #B39BE6;
  --r-common: #A9B1BD; --r-fine: #5FC28C; --r-rare: #5B9BE0; --r-precious: #B083E8; --r-legend: #E8B04A;
}
[data-theme="light"] {
  --male-t: #2F5F95; --female-t: #A8436A; --nb: #7456B8;
  --r-common: #6B7280; --r-fine: #2E7D4F; --r-rare: #2F6DB5; --r-precious: #7B4DB8; --r-legend: #A86A12;
}
@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --male-t: #2F5F95; --female-t: #A8436A; --nb: #7456B8;
    --r-common: #6B7280; --r-fine: #2E7D4F; --r-rare: #2F6DB5; --r-precious: #7B4DB8; --r-legend: #A86A12;
  }
}
.story .nm { font-weight: 500; }
.story .nm.g-m { color: var(--male-t); }
.story .nm.g-f { color: var(--female-t); }
.story .nm.g-x { color: var(--nb); }
.story .nm.g-me { color: var(--accent); }
.r-common { --rc: var(--r-common); } .r-fine { --rc: var(--r-fine); } .r-rare { --rc: var(--r-rare); }
.r-precious { --rc: var(--r-precious); } .r-legend { --rc: var(--r-legend); }
.card.item .iname { color: var(--rc); font-weight: 600; }
.card.item.r-common .iname { color: var(--ink); font-weight: 500; }
.card.item .tile { color: var(--rc); background: color-mix(in srgb, var(--rc) 16%, transparent); }
.card.item.r-legend .tile, .card.item.r-precious .tile { box-shadow: 0 0 0 1px var(--rc), 0 0 12px color-mix(in srgb, var(--rc) 45%, transparent); }
.badge.rar { background: transparent; border: 1px solid var(--rc); color: var(--rc); }

/* ===== 讀取畫面 ===== */
.loading { display: flex; gap: 12px; align-items: center; margin-top: 6px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; background: var(--paper); line-height: 1.5; }
.loading.compact { padding: 2px 0; gap: 8px; border: 0; background: transparent; margin-top: 4px; }
.loading canvas { flex-shrink: 0; }
.l-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.l-phase { font-weight: 700; font-size: 14px; white-space: nowrap; }
.l-dots { display: inline-block; width: 1.4em; color: var(--accent); }
.l-flavor { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .22s; }
.l-tip { font-size: 13px; line-height: 1.6; min-height: 3.2em; transition: opacity .3s; }
.l-tag { display: inline-block; font-size: 11px; padding: 0 6px; margin-right: 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-weight: 500; vertical-align: 1px; }
.l-fade { opacity: 0; }
.loading.compact .l-phase, .loading.compact .l-flavor { font-size: 12px; }
.loading.compact .l-txt { flex-direction: row; gap: 10px; align-items: baseline; }

/* ===== 標題列展開的完整資訊 ===== */
.top .title { cursor: pointer; }
.infobar { display: none; padding: 12px 16px 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
.app.info-open .infobar { display: block; }
.i-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.i-card { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.i-card .i-txt { min-width: 0; }
.i-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 15px; font-weight: 700; }
.i-h .ic { color: var(--accent); font-size: 17px; }
.i-sub { font-size: 12px; font-weight: 400; color: var(--muted); }
.i-desc { margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.i-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.i-tag { font-size: 11px; font-weight: 400; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 0 7px; }
.i-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.i-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); font-size: 12.5px; white-space: nowrap; }
.i-chip > .ic { color: var(--accent); font-size: 13px; }
.i-chip .k { color: var(--muted); }
.i-chip .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.i-chip .dot { margin-right: 4px; vertical-align: 1px; }
.i-chips .i-lang { margin-left: auto; height: 28px; padding: 0 10px; gap: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); font-size: 12.5px; }
.i-chips .i-lang > .ic { color: var(--muted); font-size: 13px; }
.arc { flex-shrink: 0; width: 112px; height: 62px; }
.arc .hz { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.arc .trk { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 2 4; fill: none; stroke-linecap: round; }
.arc .tick { stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; }
.arc .prg { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; }
.arc .sun { fill: var(--accent); }
.arc .halo { fill: var(--accent); opacity: .18; }
.arc.night .prg { stroke: #5B8DB8; }
.arc .moon, .arc.night .halo { fill: #5B8DB8; }
.loader-preview { max-width: 520px; }
@media (max-width: 900px) {
  .app.info-open .infobar { padding: 10px 12px 12px; }
  .i-cards { grid-template-columns: 1fr; gap: 8px; }
  .i-card { padding: 10px 12px; gap: 12px; }
  .arc { width: 88px; height: 49px; }
  .i-chips .i-lang { margin-left: 0; }
.top #btnInfo { width: 32px; }
}

/* ===== 主角立繪：選出身時清楚顯示，遊戲中只作不攔點擊的淡背景 ===== */
.portrait-frame { position: relative; display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.portrait-frame > .ic { position: absolute; inset: 0; margin: auto; width: 40%; height: 40%; color: var(--muted); }
.portrait-frame > img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; visibility: hidden; }
.portrait-frame.portrait-ready > img { visibility: visible; }
.portrait-frame.portrait-ready > .ic { display: none; }
.top #btnInfo { padding: 0; justify-content: center; flex-shrink: 0; }
.top #btnInfo .ic { transition: transform .18s; }
.top #btnInfo[aria-expanded="true"] .ic { transform: rotate(180deg); }
.creation-origin { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 12px 14px 0; border: 1px solid var(--line); border-radius: 12px; background: radial-gradient(ellipse at bottom right, var(--accent-soft), var(--bg) 70%); }
.origin-controls { flex: 1; min-width: 0; padding-bottom: 12px; }
.origin-controls .hint { line-height: 1.65; overflow-wrap: anywhere; }
.creation-art { width: 154px; height: 160px; flex: none; align-self: flex-end; }
.panel { position: relative; isolation: isolate; overflow: hidden; }
.portrait-watermark > .ic { display: none; }
.portrait-watermark { opacity: .24; }
.portrait-watermark > img { inset: auto; width: calc(180px * var(--portrait-scale, 1)); height: auto; max-width: none; left: 50%; top: var(--portrait-top, -16px); transform: translateX(calc(-1 * var(--portrait-focus, 50%))); }
.top { min-height: 72px; flex-shrink: 0; }
.top .who { min-width: 0; max-width: 32%; gap: 0; }
.who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.identity-art { width: 100px; height: 71px; flex: none; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 90%, transparent); mask-image: linear-gradient(#000 90%, transparent); }
.infobar { position: relative; flex-shrink: 0; max-height: min(48dvh, 360px); overflow-y: auto; }
.more-hero { position: relative; isolation: isolate; min-height: 154px; overflow: hidden; }
.more-art { position: absolute; z-index: 0; left: 0; top: 0; width: 122px; height: 154px; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 68%, transparent); mask-image: linear-gradient(#000 68%, transparent); }
.more-art .portrait-watermark { opacity: .28; }
.more-art img { width: calc(238px * var(--portrait-scale, 1)); top: calc(var(--portrait-top, -16px) + 8px); }
.more-hero header { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 36px; padding-left: 126px; gap: 6px; }
.more-hero header h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-hero header .badge { grid-column: 1; grid-row: 2; justify-self: start; }
.more-hero #btnCloseMore { grid-column: 2; grid-row: 1; }
.more-hero .env-card { position: relative; z-index: 1; margin: 12px 18px 0 126px; padding: 0; gap: 7px; border: 0; background: transparent; align-items: flex-start; }
.more-hero .env-card > .ic { font-size: 18px; margin-top: 2px; }
.more-hero .env-card > div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .top { min-height: 52px; }
  .creation-origin { gap: 10px; padding: 10px 10px 0; }
  .panel { position: absolute; }
  .creation-art { width: 112px; height: 140px; }
  .origin-controls { padding-bottom: 10px; }
  .tabbar button { justify-content: center; align-items: center; }
  .tabbar .ic { display: block; }
}

/* ===== 多語言 ===== */
.flag { display: inline-flex; width: 22px; height: 15px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); flex-shrink: 0; }
.flag svg { width: 100%; height: 100%; display: block; }
.lang-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.flag-btn { height: auto; min-height: 52px; padding: 7px 4px; flex-direction: column; gap: 5px; justify-content: center; font-size: 11px; color: var(--muted); background: var(--bg); white-space: normal; text-align: center; line-height: 1.2; }
.flag-btn .flag { width: 30px; height: 20px; }
.flag-btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.lang-note { margin-top: 8px; }
.lang-pick + .small, .lang-pick + .seg { margin-top: 2px; }
.rail > button { width: 58px; height: auto; min-height: 46px; padding: 5px 2px; white-space: normal; text-align: center; line-height: 1.15; }
.rail > button span { max-width: 56px; overflow-wrap: anywhere; }
.rail .lang-cur .flag { width: 22px; height: 15px; }
#mLang .flag { width: 22px; height: 15px; }
#mLang .grow { flex: 1; }
.seg.gender button .ic { font-size: 14px; }
.seg.gender button[data-gender="m"].on { color: var(--male); background: color-mix(in srgb, var(--male) 18%, transparent); }
.seg.gender button[data-gender="f"].on { color: var(--female); background: color-mix(in srgb, var(--female) 18%, transparent); }
/* 人物卡：底細可換行、心上人一列、人際關係 */
.facet { align-items: start; }
.facet > .ic { margin-top: 3px; }
.facet .v { white-space: normal; overflow-wrap: anywhere; }
html:not(:lang(zh-Hant)) .facet { grid-template-columns: 16px minmax(0, 36%) minmax(0, 1fr); }
html:not(:lang(zh-Hant)) .facet .k { white-space: normal; line-height: 1.3; }
.facet.heart > .ic { color: var(--female); }
.npc-detail .hist div { white-space: normal; }
.hist.ties div { align-items: baseline; gap: 6px; }
.hist.ties small { color: var(--muted); font-size: 11px; }
.tie { display: inline-block; min-width: 36px; padding: 0 6px; border-radius: 4px; font-size: 11px; background: var(--raise); border: 1px solid var(--line); color: var(--muted); text-align: center; }
.tie.k-親人 { color: var(--ok); border-color: var(--ok); }
.tie.k-戀人 { color: var(--female); border-color: var(--female); }
.tie.k-情敵, .tie.k-仇人 { color: var(--danger); border-color: var(--danger); }
.story .chips span.love { border-color: var(--female); color: var(--female); }
.story .chips span.bad { border-color: var(--danger); color: var(--danger); }
.story .chips span { white-space: normal; }
/* 其他語言的字比較長：標題列可縮、物品名稱可換行 */
.top > button, .top .who, .top .model { flex-shrink: 0; }
.top .meta { min-width: 0; flex-shrink: 1; }
.top .meta > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card.item .name { flex-wrap: wrap; white-space: normal; row-gap: 3px; }
html:lang(en) .iname, html:lang(vi) .iname { display: inline-block; }
html:lang(en) .iname::first-letter, html:lang(vi) .iname::first-letter { text-transform: uppercase; }
.npc-detail .d-meta { white-space: normal; }
html:not(:lang(zh-Hant)) .tabs button { font-size: 10.5px; }
.top .title { flex: 0 1 auto; min-width: 72px; }
.top .env .w, .top .env .wx { flex-shrink: 0; }
.npc-item .card .body2 { min-width: 0; }
.npc-item .card .name { flex-wrap: wrap; white-space: normal; row-gap: 3px; }

/* ===== 成就 ===== */
:root { --t-bronze: #C58A5A; --t-silver: #A9B6C4; --t-gold: #E3B34C; --t-platinum: #8FD3E6; }
[data-theme="light"] { --t-bronze: #9C5F2E; --t-silver: #66727F; --t-gold: #A77A12; --t-platinum: #2B8FA8; }
.t-bronze { --tc: var(--t-bronze); } .t-silver { --tc: var(--t-silver); } .t-gold { --tc: var(--t-gold); } .t-platinum { --tc: var(--t-platinum); }
.dialog.wide { width: min(760px, 100%); }
.dialog header h2 .ic { color: var(--accent); vertical-align: -2px; }
.ach-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ach-tier { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.ach-tier .ic { color: var(--tc); font-size: 20px; }
.ach-tier b { font-size: 12px; color: var(--tc); }
.ach-tier span { font-size: 13px; font-variant-numeric: tabular-nums; }
.ach-head { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--tc); margin-top: 6px; font-size: 13px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.ach { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); opacity: .72; }
.ach.on { opacity: 1; border-color: color-mix(in srgb, var(--tc) 60%, var(--line)); background: color-mix(in srgb, var(--tc) 9%, var(--bg)); }
.ach.closed { opacity: .5; border-style: dashed; }
.ach .medal { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--muted); background: var(--raise); border: 1px solid var(--line); font-size: 17px; }
.ach.on .medal { color: var(--tc); border-color: var(--tc); box-shadow: 0 0 10px color-mix(in srgb, var(--tc) 40%, transparent); }
.ach-b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ach-n { font-weight: 600; font-size: 13px; }
.ach.on .ach-n { color: var(--tc); }
.ach-h { font-size: 12px; color: var(--muted); line-height: 1.45; }
.ach-f { font-size: 11px; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.ach-f .muted { display: inline-flex; align-items: center; gap: 4px; }
.ach-note { margin-top: 4px; }
.story .chips span.ach-chip { border-color: var(--tc); color: var(--tc); }
#mAch .grow { flex: 1; }
.toast-wrap { position: fixed; top: 64px; right: 16px; z-index: 40; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 320px; padding: 10px 14px; border-radius: 12px; background: var(--paper);
  border: 1px solid var(--tc, var(--accent)); box-shadow: var(--shadow); animation: toast-in .35s ease-out; transition: opacity .5s, transform .5s; }
.toast > .ic { font-size: 24px; color: var(--tc, var(--accent)); }
.toast b { color: var(--tc, var(--accent)); font-size: 12px; }
.toast div div { font-size: 14px; font-weight: 600; }
.toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .toast-wrap { left: 12px; right: 12px; top: 60px; align-items: center; }
  .ach-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ===== 禁止誤觸縮放、不讓頁面超出螢幕 ===== */
html, body { touch-action: manipulation; overflow-x: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 900px) {
  /* iOS 在字級小於 16px 的輸入框聚焦時會自動放大畫面，統一 16px 避免 */
  input, select, textarea { font-size: 16px; }
}

/* ===== 進遊戲前的背景圖（登入、選角、建角）：半透明深色遮罩，讓畫面不花 ===== */
.art-bg { display: none; position: fixed; inset: 0; z-index: 15; background: #0b0d11 url(/static/img/bg-tall-tiny.webp) center / cover no-repeat; }
.art-bg::before { content: ""; position: absolute; inset: 0; background: url(/static/img/bg-tall.webp) center 30% / cover no-repeat; }
.art-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 16, .50) 0%, rgba(10, 12, 16, .62) 45%, rgba(10, 12, 16, .82) 100%); }
@media (min-aspect-ratio: 1/1) {
  .art-bg::before { background-image: url(/static/img/bg-wide.webp); background-position: center 12%; }
}
[data-theme="light"] .art-bg::after { background: linear-gradient(180deg, rgba(233, 236, 241, .45) 0%, rgba(233, 236, 241, .62) 50%, rgba(233, 236, 241, .8) 100%); }
@media (prefers-color-scheme: light) {
  [data-theme="system"] .art-bg::after { background: linear-gradient(180deg, rgba(233, 236, 241, .45) 0%, rgba(233, 236, 241, .62) 50%, rgba(233, 236, 241, .8) 100%); }
}
body.prelude .art-bg { display: block; }
body.prelude .overlay { background: transparent; }
body.prelude .overlay .dialog { background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ===== 安裝成 App ===== */
.app-install { display: flex; gap: 16px; align-items: flex-start; }
.app-install img { width: 64px; height: 64px; border-radius: 16px; box-shadow: var(--shadow); flex-shrink: 0; }
.app-install-b { min-width: 0; flex: 1; }
.app-install-b .lead { margin-top: 0; }
.ach-tier { text-align: center; }
.ach-tier b { white-space: nowrap; }
@media (max-width: 900px) { .ach-sum { gap: 6px; } .ach-tier { padding: 8px 4px; } .ach-tier b { font-size: 11px; } }

/* 交出物品的確認列、只知道化名 */
.npc-detail .d-name.alias { color: var(--accent); }
.story .suspect { margin-top: 8px; display: grid; gap: 6px; }
.story .suspect .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px;
  border: 1px dashed var(--accent); border-radius: 8px; background: var(--accent-soft); font-size: 13px; color: var(--ink); }
.story .suspect .row .q { flex: 1 1 200px; min-width: 0; }
.story .suspect .row button { height: 28px; padding: 0 10px; font-size: 12px; border: 1px solid var(--line-strong); color: var(--ink); }
.story .suspect .row button[data-act="remove"] { border-color: var(--accent); color: var(--accent); }
.story .suspect .row.settled { border-style: solid; background: transparent; color: var(--muted); }

/* 設定頁：版本資訊 */
.ver-box { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); max-width: 420px; }
.ver-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; }
.ver-row + .ver-row { border-top: 1px solid var(--line); }
.ver-row .k { color: var(--muted); }
.ver-row code.v { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; letter-spacing: .04em; }

/* 設定頁：已擋下與提醒的紀錄 */
.log-turn { margin-bottom: 12px; }
.log-head { font-size: 12px; color: var(--muted); margin: 4px 2px 6px; font-weight: 600; }
.log-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); margin-bottom: 6px; font-size: 13px; line-height: 1.55; }
.log-row .badge { flex-shrink: 0; margin-top: 1px; }
.log-row .txt { min-width: 0; overflow-wrap: anywhere; }
.log-foot { text-align: center; color: var(--muted); margin: 10px 0 4px; }

/* 狀態列帶按鈕時：文字可截斷，按鈕固定在右側 */
.status-line:has(.st-acts) { display: flex; align-items: center; gap: 6px; }
.status-line .st-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-line .st-acts { flex-shrink: 0; display: inline-flex; gap: 4px; }
.status-line .st-acts button { height: 24px; padding: 0 8px; font-size: 12px; }

.log-help { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 13px; line-height: 1.7; }
.log-help-t { font-weight: 600; }
.log-help-r { display: flex; gap: 8px; align-items: flex-start; }
.log-help-r .badge { flex-shrink: 0; margin-top: 3px; min-width: 64px; justify-content: center; }
.log-box { margin-top: 12px; display: grid; gap: 10px; max-width: 640px; }
.log-box #logFilter { max-width: 320px; }
.log-empty { padding: 10px 2px; color: var(--muted); }

/* 設定頁：同名重新開局 */
.rs-confirm { margin-top: 12px; display: grid; gap: 8px; max-width: 420px; padding: 12px 14px; border: 1px solid var(--danger); border-radius: 10px;
  background: var(--danger-soft); }
.rs-confirm label { font-size: 13px; }
#rsResult:empty { display: none; }
.card.item .badge.uniq { background: color-mix(in srgb, var(--r-legend, var(--accent)) 18%, transparent); color: var(--r-legend, var(--accent)); }
/* 家業（搶先試玩：房產）：背包上方的一小區 */
.est-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); letter-spacing: .05em; margin: 2px 0 6px; }
.est-head .ic { color: var(--accent); }
.card.est { border-color: var(--accent-soft); }
.card.est .tile { color: var(--accent); }
.card.est.deal { border-style: dashed; }
.badge.deed { background: #8E2F2F; color: #FBEAEA; }
.est-empty { text-align: left; padding: 4px 2px 10px; line-height: 1.6; }
/* 設定頁：搶先試玩的開關 */
.beta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.beta-row label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.beta-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.card.est .sub { white-space: normal; line-height: 1.5; }
/* 伏筆卡片：整句換行完整顯示（伏筆是線索，不截斷）。圖示是右側的超大浮水印（像狀態卡片的背景數字）：
   故意放大到超出卡片邊框、被邊框切掉一大塊，只露出一部分，才不會干擾閱讀；文字與按鈕疊在上面（按鈕有底色，不被透出的線條干擾）。
   顏色依類型：進行中＝琥珀、因果＝紅、擱置＝藍、已淡去＝灰、苗頭＝綠。 */
.card.thread { --c: var(--accent); position: relative; overflow: hidden; align-items: flex-start; }
.card.thread > .wm { position: absolute; right: -22px; top: 50%; width: 124px; height: 124px; transform: translateY(-50%); pointer-events: none;
  color: var(--c); stroke-width: 1.05; opacity: .24; }
.card.thread > .body2, .card.thread > .right { position: relative; z-index: 1; }
.card.thread .mini { background: var(--bg); }
.card.thread.shelved { --c: #5B8DB8; }
.card.thread.faded { --c: var(--muted); }
.card.thread.seed { --c: var(--ok); }
.card.thread.locked { --c: var(--danger); }
.card.thread .thread-text { font-size: 13px; font-weight: 500; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }
.card.thread .sub { margin-top: 2px; }
/* 錢袋：背包最上方，面額大到小排成一列 */
.card.purse { align-items: flex-start; border-color: var(--accent); margin-bottom: 10px; }
.card.purse .name { justify-content: space-between; }
.card.purse .purse-total { font-size: 11px; font-weight: 400; color: var(--muted); }
.coins { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 6px; margin-top: 6px; }
.coin { display: flex; flex-direction: column; align-items: center; padding: 5px 2px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); line-height: 1.2; }
.coin b { font-size: 15px; font-variant-numeric: tabular-nums; }
.coin span { font-size: 11px; color: var(--muted); }
.coin.zero { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.coin.zero b { font-weight: 500; }

/* ---------- 武學（搶先試玩） ---------- */
.xpbar { flex: 1; min-width: 40px; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.xpbar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.xpn { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mart-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mart-sum .ms { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.mart-sum .ms > .ic { font-size: 20px; color: var(--accent); margin-top: 2px; }
.mart-sum .ms-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mart-sum .k { font-size: 11px; color: var(--muted); }
.mart-sum .v { font-size: 13px; line-height: 1.45; }
.mart-sum b { font-variant-numeric: tabular-nums; }
.mart-sum .bar { height: 5px; }
.mart-sum .bar i { background: #5B8DB8; }
.mart-alert { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--danger); border-radius: 10px; background: var(--danger-soft); color: var(--danger); line-height: 1.5; }
.mart-alert .ic { font-size: 20px; margin-top: 2px; }
.mart-alert .small { color: var(--ink); opacity: .85; }
.mart-syn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border: 1px dashed var(--accent); border-radius: 10px; color: var(--accent); }
.mart-syn span { color: var(--ink); font-size: 13px; }
.mart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mart-card { display: flex; flex-direction: column; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); min-width: 0; }
.mart-card.main { border-color: var(--accent); }
.mart-card.empty { align-items: center; justify-content: center; text-align: center; color: var(--muted); border-style: dashed; font-size: 13px; line-height: 1.6; min-height: 140px; }
.mart-card.empty .ic { font-size: 22px; }
.mc-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mc-head > .ic { font-size: 18px; color: var(--accent); }
.mc-head b { font-size: 16px; }
.mc-sub { font-size: 12px; color: var(--muted); line-height: 1.5; }
.mc-stage { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-weight: 500; }
.mc-stage .phrase { font-size: 12px; color: var(--muted); font-weight: 400; }
.pips10 { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.pips10 i { height: 8px; border-radius: 2px; background: var(--line); }
.pips10 i.on { background: var(--accent); }
.pips10 i.lock { background: transparent; border: 1px dashed var(--line-strong); }
.pips10 i.gate { box-shadow: -2px 0 0 0 var(--paper), -3px 0 0 0 var(--muted); }
.mc-xp { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-row { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.mc-row > .ic { color: var(--accent); }
.mc-row .grow { flex: 1; }
.mc-traits { display: flex; flex-direction: column; gap: 4px; }
.mc-traits .trait { display: flex; gap: 8px; font-size: 12px; line-height: 1.5; }
.mc-traits .trait b { flex-shrink: 0; min-width: 2.5em; padding: 0 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); text-align: center; font-weight: 500; }
.mc-desc { font-size: 12px; color: var(--muted); line-height: 1.6; }
.mc-next { display: flex; gap: 6px; font-size: 12px; line-height: 1.5; padding-top: 6px; border-top: 1px dashed var(--line); }
.mc-next .ic { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.mart-man { display: flex; flex-direction: column; gap: 6px; }
.mart-man > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.mart-man .ic { color: var(--accent); }
.mart-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mart-stages > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.mart-stages small { color: var(--muted); }
.mart-guide { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.mart-guide summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.mart-guide ul { margin: 8px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.7; }
/* 武學分頁：面板窄，一律單欄 */
.mart-tab { display: flex; flex-direction: column; gap: 10px; }
.mart-tab .mart-sum, .mart-tab .mart-grid { grid-template-columns: 1fr; }
.mart-tab .mart-sum .ms { padding: 8px 10px; }
.mart-tab .mart-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mart-tab .mart-card.empty { min-height: 90px; }
.mart-tab .ach-head { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .05em; }
.mart-tab .ach-head .ic { color: var(--accent); }
.illusion { opacity: .55; font-style: italic; text-decoration: underline dotted var(--muted); text-underline-offset: 4px; }
.ill-tag { display: inline-block; margin: 0 4px; padding: 0 6px; border-radius: 5px; font-size: 11px; background: var(--danger-soft); color: var(--danger); vertical-align: 1px; }
@media (max-width: 900px) {
  .mart-grid { grid-template-columns: 1fr; }
  .mart-sum { grid-template-columns: 1fr; }
  .mart-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 分頁鎖：搶先試玩沒打開、尚未開放 ---------- */
.lock-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 18px 22px; margin-top: 4px;
  border: 1px dashed var(--line-strong); border-radius: 14px; background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--line) 35%, transparent) 10px 11px); }
.lock-card .ic.big { font-size: 34px; color: var(--muted); opacity: .8; }
.lock-card b { font-size: 15px; }
.lock-card p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink); opacity: .85; max-width: 26em; }
.lock-why { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 4px 10px; border-radius: 999px; background: var(--raise); border: 1px solid var(--line); }
.lock-card button { margin-top: 6px; }

/* ---------- 錢袋記帳 ---------- */
.card.purse { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 12px 12px; }
.purse-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.purse-head .tile { width: 26px; height: 26px; border-radius: 7px; font-size: 14px; }
.purse-head .iname { font-size: 13px; font-weight: 600; white-space: nowrap; }
.card.purse .purse-total { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card.purse .coins { margin-top: 10px; }
.plog-btn { height: 24px; padding: 0 8px; gap: 4px; font-size: 11px; font-weight: 500; border-radius: 6px; background: transparent; color: var(--muted); }
.plog-btn .ic { font-size: 12px; }
.plog-btn:hover { color: var(--accent); border-color: var(--accent); }
.plog-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.plog { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; display: flex; flex-direction: column; }
.plog-row { display: grid; grid-template-columns: 14px auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 5px 2px; font-size: 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.plog-row:last-of-type { border-bottom: 0; }
.plog-row > .ic { color: var(--muted); font-size: 13px; }
.plog-row .pt { color: var(--muted); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plog-row .pn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--ink); }
.plog-row b { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.plog-row b.up { color: var(--ok); }
.plog-row b.down { color: var(--danger); }
.plog-empty, .plog-foot { font-size: 11px; color: var(--muted); padding: 4px 2px 0; line-height: 1.6; font-weight: 400; white-space: normal; }
.plog-foot { text-align: right; }
/* 武學分頁的總覽：三列收成一張卡 */
.mart-tab .mart-sum { gap: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.mart-tab .mart-sum .ms { border: 0; border-radius: 0; background: transparent; padding: 8px 10px; gap: 8px; align-items: center; }
.mart-tab .mart-sum .ms + .ms { border-top: 1px dashed var(--line); }
.mart-tab .mart-sum .ms > .ic { font-size: 16px; margin-top: 0; }
.mart-tab .mart-sum .ms-b { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); column-gap: 8px; row-gap: 4px; align-items: baseline; }
html:not(:lang(zh-Hant)) .mart-tab .mart-sum .ms-b { grid-template-columns: 5.5em minmax(0, 1fr); }
.mart-tab .mart-sum .ms-b .bar { grid-column: 1 / -1; }
.mart-tab .mart-sum .v { font-size: 12.5px; }

/* ---------- 劇情欄：章節卡片（舊回合收成摘要，點開才載全文） ---------- */
.story-wrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.story-wrap .story { flex: 1; min-height: 0; }
.story .chap { max-width: 860px; margin: 0 auto 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.story .chap-head { width: 100%; height: auto; min-height: 42px; padding: 8px 14px; border: 0; border-radius: 12px; background: transparent; gap: 8px; font-size: 13px; text-align: left; white-space: nowrap; }
.story .chap-head > .ic { color: var(--accent); font-size: 15px; }
.story .chap-no { font-weight: 700; color: var(--accent); letter-spacing: .04em; }
.story .chap-range { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.story .chap-act { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.story .chap-act .ic { transition: transform .2s; }
.story .chap-head:hover .chap-act { color: var(--accent); }
.story .chap .a-close, .story .chap .a-wait, .story .chap.open .a-open, .story .chap.loading .a-open { display: none; }
.story .chap.open .a-close, .story .chap.loading .a-wait { display: inline; }
.story .chap.open .chap-act .ic { transform: rotate(180deg); }
.story .chap.loading .chap-act { color: var(--accent); }
.story .chap-sum { list-style: none; margin: 0; padding: 0 14px 10px 37px; font-size: 13px; line-height: 1.75; color: var(--muted); }
.story .chap-sum li { display: flex; gap: 10px; min-width: 0; }
.story .chap-sum li b { flex-shrink: 0; min-width: 1.6em; text-align: right; font-weight: 500; font-size: 11px; color: var(--line-strong); font-variant-numeric: tabular-nums; padding-top: 2px; }
.story .chap-sum li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story .chap-sum li.more span { font-size: 12px; opacity: .8; }
.story .chap-body { display: none; padding: 10px 0 0; }
.story .chap.open { border-color: transparent; background: transparent; }
.story .chap.open .chap-sum { display: none; }
.story .chap.open .chap-body { display: block; }
.story .chap.open .chap-head { position: sticky; top: -24px; z-index: 3; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.story .chap-end { display: flex; justify-content: center; padding: 0 0 6px; border-bottom: 1px dashed var(--line); margin-bottom: 4px; }
.story .chap-end button { height: 30px; font-size: 12px; }
.story .chap-earlier { display: flex; margin: 0 auto 12px; height: 32px; font-size: 12px; border: 1px dashed var(--line-strong); border-radius: 999px; }

/* ---------- 回合刻度（桌面）：取代原生捲動軸 ---------- */
.trail { position: absolute; z-index: 5; top: 14px; bottom: 14px; right: 10px; width: 26px; cursor: pointer; user-select: none; touch-action: none; }
.trail.off { display: none; }
.trail .tr-track { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--line); transition: background .2s; }
.trail:hover .tr-track, .trail.drag .tr-track { background: var(--line-strong); }
.trail .tr-ticks { position: absolute; inset: 0; pointer-events: none; }
.trail .tk { position: absolute; left: 50%; width: 8px; height: 1.5px; margin: -.75px 0 0 -4px; border-radius: 1px; background: var(--line-strong); }
.trail .tk.ch { width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--muted); }
.trail .tk.chap { width: 16px; height: 5px; margin: -2.5px 0 0 -8px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 55%, transparent); border: 1px solid var(--line-strong); }
.trail .tr-band { position: absolute; left: 50%; width: 6px; margin-left: -3px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 30%, transparent); transition: background .2s; }
.trail:hover .tr-band, .trail.drag .tr-band { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.trail .tr-dia { position: absolute; left: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; transform: rotate(45deg); border-radius: 2px; background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent), 0 2px 10px rgba(0,0,0,.35); pointer-events: none; transition: top .12s ease-out; }
.trail.drag .tr-dia { transition: none; }
.trail .tr-label, .trail .tr-hover { position: absolute; right: 24px; transform: translateY(-50%); padding: 3px 9px; border-radius: 7px; font-size: 11.5px; white-space: nowrap; pointer-events: none;
  background: var(--raise); border: 1px solid var(--line-strong); color: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,.25); opacity: 0; transition: opacity .25s; }
.trail .tr-label { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.trail .tr-label.show, .trail .tr-hover.show { opacity: 1; }
.trail:hover .tr-label { opacity: 0; }
.to-latest { position: absolute; right: 48px; bottom: 12px; z-index: 4; height: 32px; padding: 0 12px 0 10px; gap: 5px; border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--paper); border: 1px solid var(--accent); color: var(--accent); box-shadow: var(--shadow); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.to-latest.show { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 901px) {
  .story { scrollbar-width: none; }
  .story::-webkit-scrollbar { display: none; }
}
@media (max-width: 900px) {
  .trail { display: none; }
  .to-latest { right: 14px; bottom: 10px; }
  .story .chap-sum { padding-left: 14px; }
  .story .chap.open .chap-head { top: -16px; }
}
@media (prefers-reduced-motion: reduce) { .trail .tr-dia, .to-latest { transition: none; } }

/* ---------- 設定頁：分類手風琴 ---------- */
.set-page { max-width: 760px; }
.set-top { display: flex; align-items: center; gap: 10px; }
.set-top .grow { flex: 1; }
.set-page h1 { margin: 14px 0 2px; }
.set-page h1 .ic { color: var(--accent); }
.grouph { font-size: 12px; color: var(--muted); letter-spacing: .12em; margin: 22px 4px 8px; font-weight: 600; }
details.sec { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); margin-bottom: 8px; transition: border-color .2s; }
details.sec[open] { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.sec-hd { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; border-radius: 12px; min-width: 0; }
.sec-hd::-webkit-details-marker { display: none; }
.sec-hd:hover { background: color-mix(in srgb, var(--raise) 60%, transparent); }
.sec-hd > .ic:first-child { font-size: 18px; color: var(--accent); }
.sec-t { font-weight: 600; font-size: 15px; white-space: nowrap; }
.sec-s { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.sec-hd .chev { color: var(--muted); transition: transform .2s; }
details.sec[open] > .sec-hd .chev { transform: rotate(180deg); }
details.sec[open] > .sec-hd { border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.sec-bd { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.sec-bd .lead { margin: 0; }
.sec-bd .field { margin: 0; }
.sec-bd .log-box { margin-top: 0; }
.inline.wrap { flex-wrap: wrap; }
.sub-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .06em; margin-top: 4px; }
.sub-h .ic { color: var(--accent); }
.sub-h:first-child { margin-top: 0; }
.theme-seg { max-width: 420px; }
.theme-seg button { height: 34px; gap: 6px; }
/* 搶先試玩：功能卡片＋開關 */
.feat { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.feat .ic.big { font-size: 22px; color: var(--accent); margin-top: 2px; }
.feat-b { flex: 1; min-width: 0; }
.feat-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feat-t b { font-size: 14px; font-weight: 600; }
.feat-b p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.feat.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--bg)); }
.feat.lock, .feat.off-mode { opacity: .55; border-style: dashed; }
.feat.lock .ic.big { color: var(--muted); }
.feat > .badge { flex-shrink: 0; margin-top: 2px; }
.switch { position: relative; flex-shrink: 0; width: 42px; height: 24px; margin-top: 1px; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: inherit; }
.switch .knob { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background .2s; pointer-events: none; }
.switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .2s; }
.switch input:checked + .knob { background: var(--accent); }
.switch input:checked + .knob::after { left: 21px; background: var(--accent-ink); }
.switch input:focus-visible + .knob { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + .knob { opacity: .5; }
/* 說明 */
.help-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--muted); }
.help-search:focus-within { border-color: var(--accent); }
.help-search input { border: 0; background: transparent; height: 100%; padding: 0; outline: none; }
.help-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.help-chips button { height: 30px; padding: 0 11px; border-radius: 999px; font-size: 12px; color: var(--muted); background: var(--bg); gap: 6px; }
.help-chips button .n { font-size: 10px; opacity: .75; font-variant-numeric: tabular-nums; }
.help-chips button.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 600; }
.help-list { display: flex; flex-direction: column; gap: 6px; }
details.qa { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
details.qa[open] { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
details.qa summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13.5px; font-weight: 500; cursor: pointer; list-style: none; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary > .ic:first-child { color: var(--accent); font-size: 15px; }
details.qa summary > span:not(.tag) { flex: 1; min-width: 0; }
details.qa .tag { font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 0 6px; white-space: nowrap; }
details.qa .chev { color: var(--muted); font-size: 13px; transition: transform .2s; }
details.qa[open] .chev { transform: rotate(180deg); }
.help-lead { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.7; }
.help-chips button.zero { opacity: .45; }
.qa-group { display: flex; align-items: center; gap: 8px; margin: 10px 2px 2px; font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--accent) 70%, var(--ink)); letter-spacing: .02em; }
.qa-group:first-child { margin-top: 0; }
.qa-group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.qa-group .n { order: 2; font-size: 10px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
details.qa .qa-a { padding: 0 14px 12px 35px; font-size: 13px; color: var(--ink); line-height: 1.8; }
.qa-a p, .qa-a ul, .qa-a ol { margin: 0 0 6px; opacity: .9; }
.qa-a > :last-child { margin-bottom: 0; }
.qa-a b { color: var(--ink); opacity: 1; font-weight: 650; }
.qa-a ul, .qa-a ol { padding-left: 18px; }
.qa-a li { margin: 2px 0; padding-left: 2px; }
.qa-a ul { list-style: none; padding-left: 14px; }
.qa-a ul > li { position: relative; }
.qa-a ul > li::before { content: ""; position: absolute; left: -12px; top: .8em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .75; }
.qa-a ol > li::marker { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.qa-a .qa-note { color: var(--muted); border-left: 2px solid var(--line-strong); padding-left: 10px; font-size: 12.5px; opacity: 1; }
.qa-go { height: 30px; margin-top: 8px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; color: var(--accent); border-color: var(--line); gap: 6px; }
.qa-go:hover { background: var(--accent-soft); color: var(--accent); }
.help-none { padding: 8px 2px; }
@media (max-width: 900px) {
  .sec-hd { padding: 12px; gap: 8px; }
  .sec-s { font-size: 11px; }
  .sec-bd { padding: 12px; }
  details.qa .tag { display: none; }
  details.qa .qa-a { padding-left: 14px; }
}
@media (max-width: 600px) {
  /* 手機：頁籤收成一排、可左右滑，不要擠成四五行；右邊淡出提示還有更多 */
  .help-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 28px 2px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .help-chips::-webkit-scrollbar { display: none; }
  .help-chips button { flex: none; }
}
@media (max-width: 480px) {
  .sec-hd { flex-wrap: wrap; row-gap: 2px; }
  .sec-hd .chev { margin-left: auto; }
  .sec-s { order: 5; flex-basis: 100%; text-align: left; padding-left: 28px; }
}

/* ---------- 背包：排序列、遞送中（灰色專屬區）、物品去向 ---------- */
.packbar { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.packbar .pb-label { font-size: 11px; color: var(--muted); margin-right: 1px; }
.packbar .plog-btn { margin-left: auto; }
.sortchip { height: 24px; padding: 0 9px; font-size: 11px; border-radius: 999px; background: transparent; color: var(--muted); }
.sortchip:hover { color: var(--accent); border-color: var(--accent); }
.sortchip.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); font-weight: 500; }
.pend-sec { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px dashed var(--line-strong); border-radius: 10px;
  background: color-mix(in srgb, var(--muted) 8%, transparent); }
.pend-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pend-head b { font-weight: 600; color: var(--ink); }
.pend-head .n { margin-left: auto; min-width: 18px; text-align: center; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--raise); border: 1px solid var(--line); }
.pend-hint { font-size: 11px; line-height: 1.5; color: var(--muted); }
.card.item.pending { filter: grayscale(1); opacity: .75; border-style: dashed; background: transparent; }
.card.item.pending .iname { color: var(--muted); font-weight: 500; }
.card.item.pending .sub { white-space: normal; }
.plog.ilog .plog-row { grid-template-columns: 14px auto minmax(0, 1fr); }
.story .suspect .stepper { display: inline-flex; align-items: center; gap: 2px; }
.story .suspect .stepper button { width: 28px; padding: 0; justify-content: center; font-size: 15px; }
.story .suspect .stepper .qn { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- 面板搜尋列（在 #view 外面，打字不會重畫它）與伏筆分頁 ---- */
.view-tools { padding: 10px 12px 0; }
.view-tools[hidden] { display: none; }
.vt-search { position: relative; display: flex; align-items: center; }
.vt-search > .ic { position: absolute; left: 10px; font-size: 14px; color: var(--muted); pointer-events: none; }
.vt-search input { height: 34px; padding: 0 34px 0 31px; font-size: 13px; -webkit-appearance: none; appearance: none; }
.vt-search input::-webkit-search-cancel-button, .vt-search input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.vt-clear { position: absolute; right: 4px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); justify-content: center; }
.vt-clear[hidden] { display: none; }
.vt-clear:hover { color: var(--ink); background: var(--line); }
.sortchip .ic { font-size: 12px; margin-right: 3px; }
.sortchip .n { margin-left: 4px; font-size: 10px; opacity: .75; font-variant-numeric: tabular-nums; }
.thr-seg button { gap: 5px; padding: 0 4px; min-width: 0; }
.thr-seg .tl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thr-seg .n { flex: none; font-size: 10px; opacity: .75; font-variant-numeric: tabular-nums; }
.thr-hint { font-size: 11px; line-height: 1.55; color: var(--muted); padding: 0 2px; }
.thr-err { font-size: 12px; line-height: 1.5; padding: 6px 8px; border-radius: 8px; background: var(--danger-soft); }
.card.thread .sub { white-space: normal; }
.card.thread .tid { font-weight: 600; color: var(--c); font-variant-numeric: tabular-nums; }
.card.thread.shelved { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.card.thread.faded { opacity: .8; }
.card.thread .right { align-self: center; display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.thr-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.thr-badges .badge { display: inline-flex; align-items: center; gap: 3px; }
.thr-badges .badge .ic { font-size: 11px; }
.badge.lockb { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.thr-lockwhy { margin-top: 3px; font-size: 11px; line-height: 1.45; color: var(--danger); }
.card.thread.locked { border-color: color-mix(in srgb, var(--c) 60%, var(--line)); }
.thr-seeds { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; }
.thr-seeds-h { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.thr-seeds-h .ic { font-size: 13px; }
.card.thread.seed { opacity: .8; border-style: dashed; }
.mini.drop:hover:not(:disabled) { color: var(--danger, #c0392b); border-color: var(--danger, #c0392b); }
.mini:disabled { opacity: .45; cursor: not-allowed; }
.mini { height: 26px; padding: 0 8px; gap: 4px; font-size: 11px; border-radius: 7px; background: transparent; color: var(--muted); }
.mini .ic { font-size: 12px; }
.mini:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
@media (max-width: 900px) { .vt-search input { font-size: 16px; } }          /* 手機字級要 16px，iOS 才不會在點進搜尋框時自動放大 */
html:not(:lang(zh-Hant)) .thr-seg button { font-size: 11px; }

/* ---------- 管理工具（只給遊戲主人） ---------- */
.adm .sec-bd { gap: 10px; }
.adm-list { display: flex; flex-direction: column; gap: 10px; }
.adm-group, .adm-card { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.adm-gh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-gh .grow { flex: 1; }
.adm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 13px; }
.adm-row .nm { font-weight: 600; min-width: 7em; }
.adm-row .dt { flex: 1 1 220px; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.adm-kv { display: flex; gap: 10px; font-size: 13px; }
.adm-kv span { color: var(--muted); min-width: 5em; }
.adm-kv b { font-weight: 500; overflow-wrap: anywhere; }
.adm-ok { display: flex; align-items: center; gap: 6px; color: var(--ok); }
.adm-q { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.adm-q .seg { width: auto; }
.adm-q input { flex: 1 1 200px; }
@media (max-width: 560px) {                   /* 手機：名字、說明各一行，按鈕排在同一行 */
  .adm-row .nm, .adm-row .dt { flex: 1 1 100%; min-width: 0; }
}
.adm-scroll { overflow-x: auto; }
.adm-tbl { border-collapse: collapse; font-size: 13px; width: 100%; }
.adm-tbl th, .adm-tbl td { padding: 4px 6px; border-top: 1px dashed var(--line); text-align: left; white-space: nowrap; }
.adm-tbl input { width: 4.2em; height: 28px; padding: 0 4px; }
.adm-tbl .rk { color: var(--muted); }
.small-btn { height: 28px; padding: 0 10px; font-size: 12px; }
.ver-row .pid { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.ver-row .pid-wrap { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- 武學第二版：掛載欄、武學庫、自廢預覽 ---------- */
.mart-hint { color: var(--muted); line-height: 1.6; margin-top: -4px; }
.mart-tab .ach-head .grow { flex: 1; }
.mart-tab .ach-head .lib-count { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.mart-rest { display: flex; gap: 10px; padding: 10px 12px; border: 1px dashed var(--danger); border-radius: 10px; color: var(--danger); line-height: 1.5; }
.mart-rest .ic { font-size: 18px; margin-top: 2px; }
.mart-rest .small { color: var(--ink); opacity: .85; font-weight: 400; }
.mart-slots { display: flex; flex-direction: column; gap: 6px; }
.mart-slot { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); min-width: 0; }
.mart-slot.main { border-color: var(--accent); }
.mart-slot .mart-card:not(.empty) { border: 0; padding: 0; background: transparent; }
.msl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msl-head .badge { flex-shrink: 0; }
.msl-sel { flex: 1; min-width: 0; width: auto; height: 32px; padding: 0 28px 0 10px; font-size: 13px; background-position: calc(100% - 14px) 13px, calc(100% - 9px) 13px; }
.msl-lock { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.mart-slot.locked .msl-sel { opacity: .7; }
.mart-swap { display: flex; justify-content: center; }
.swapbtn { height: 30px; padding: 0 14px; gap: 6px; border-radius: 999px; font-size: 12px; background: var(--bg); color: var(--accent); border-color: var(--accent); }
.swapbtn .ic { font-size: 16px; }
.swapbtn:hover:not(:disabled) { background: var(--accent-soft); }
.lib-cat { display: flex; flex-direction: column; gap: 6px; }
.lib-h { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.lib-h .ic { color: var(--accent); }
.lib-h .n { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lib-h .n.full { color: var(--accent); font-weight: 600; }
.lib-none { font-size: 12px; color: var(--muted); padding-left: 22px; }
.lib-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 13px; min-width: 0; }
.lib-row .ic { color: var(--accent); }
.lib-row .badge { margin-left: auto; }
details.lib-row { display: block; padding: 0; }
details.lib-row > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; cursor: pointer; list-style: none; }
details.lib-row > summary::-webkit-details-marker { display: none; }
details.lib-row[open] > summary { border-bottom: 1px dashed var(--line); }
details.lib-row > .mart-card { border: 0; padding: 10px; background: transparent; }
.lib-row.unmounted b, .mart-card.unmounted .mc-head b { color: var(--muted); }
.mart-card.unmounted > :not(.mc-foot):not(.mc-quit) { opacity: .7; }
.mart-card.unmounted .pips10 i.on { background: var(--muted); }
.mc-foot { display: flex; justify-content: flex-end; }
.mc-quit { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--danger); border-radius: 10px; background: var(--danger-soft); font-size: 13px; line-height: 1.5; }
.mc-quit b { color: var(--danger); }
.mc-quit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mc-quit li { display: flex; align-items: flex-start; gap: 6px; }
.mc-quit li .ic { color: var(--danger); margin-top: 3px; }
.mc-quit-btns { display: flex; justify-content: flex-end; gap: 8px; }
.mini.danger { color: var(--danger); }
.mini.danger:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.preview .p small.bonus { color: var(--accent); white-space: normal; text-align: center; line-height: 1.2; }

/* ---------- 主線故事（伏筆頁最上方，v0.35 卷宗版面）：頁籤＋卷宗本體；月輪進度、「暫停主線」開關、問號說明、直向時間軸 ----------
   狀態不只靠顏色：已交代有勾、進行中有實心點與卡片、未揭開是虛線問號；暫停時整區轉灰、外框改虛線。標題用明體（--serif，字型不擋畫面） */
:root { --serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif; }
html:lang(en), html:lang(vi) { --serif: "Noto Serif", Georgia, "Noto Serif TC", serif; }
html:lang(ja) { --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif TC", serif; }
.camp { --c: var(--accent); display: flex; flex-direction: column; margin-bottom: 12px; min-width: 0; }
.camp-tab { align-self: flex-start; position: relative; top: 1px; display: flex; align-items: center; gap: 6px; max-width: 100%; height: 30px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--raise); color: var(--c); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
html:lang(en) .camp-tab, html:lang(vi) .camp-tab { letter-spacing: .04em; }
.camp-tab .ic { flex: none; font-size: 14px; }
.camp-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camp-lock .camp-tab { color: var(--muted); }
.camp-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px 10px 14px 14px; border: 1px solid var(--line-strong); border-radius: 0 12px 12px 12px; background: var(--raise); }
.camp-paused .camp-body, .camp-lock .camp-body { border-style: dashed; }
.camp-paused .camp-body { gap: 10px; padding-bottom: 6px; }
.camp-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.camp-paused .camp-head { gap: 12px; }
.camp-title { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.camp-ch { font-family: var(--serif); font-size: 19px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.camp-paused .camp-ch { font-size: 16px; color: var(--muted); }
.camp-sub { font-size: 12px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.camp-sub em { font-style: normal; font-weight: 500; color: var(--c); }
.camp-state { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
/* 月輪：SVG 弧線一段一個節點，數字是 HTML 字（跟著介面字型） */
.camp-ring { position: relative; flex: none; width: var(--sz); height: var(--sz); display: flex; align-items: center; justify-content: center; }
.camp-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.camp-ring .s { fill: none; stroke: var(--line-strong); }
.camp-ring .s.done { stroke: var(--c); }
.camp-ring .s.active { stroke: color-mix(in srgb, var(--c) 48%, var(--line-strong)); }
.camp-paused .camp-ring .s.done { stroke: var(--muted); }
.camp-paused .camp-ring .s.active { stroke: color-mix(in srgb, var(--muted) 45%, var(--line)); }
.camp-paused .camp-ring .s.locked { stroke: var(--line); }
.camp-ring > span { position: relative; display: flex; align-items: baseline; gap: 1px; line-height: 1; font-variant-numeric: tabular-nums; }
.camp-ring b { font-size: calc(var(--sz) * .31); font-weight: 700; }
.camp-ring small { font-size: max(10px, calc(var(--sz) * .17)); color: var(--muted); }
.camp-paused .camp-ring b { color: var(--muted); }
/* 開關列：「暫停主線」文字＋開關是同一顆按鈕（role=switch），右邊是問號 */
.camp-ctl { display: flex; align-items: center; gap: 4px; min-width: 0; padding-top: 6px; border-top: 1px solid var(--line); }
.camp .camp-switch { flex: 1 1 0; min-width: 0; height: auto; min-height: 44px; justify-content: space-between; gap: 10px; padding: 0 2px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); font-size: 14px; font-weight: 500; white-space: normal; text-align: left; }
.camp-sw-t { min-width: 0; overflow-wrap: anywhere; }
.camp-sw { position: relative; flex: none; width: 42px; height: 24px; box-sizing: border-box; border: 1.5px solid var(--muted); border-radius: 999px; background: transparent; transition: background .2s, border-color .2s; }
.camp-sw i { position: absolute; top: 2.5px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: left .2s, background .2s; }
.camp-switch[aria-checked="true"] .camp-sw { background: var(--c); border-color: var(--c); }
.camp-switch[aria-checked="true"] .camp-sw i { left: 20px; background: var(--accent-ink); }
.camp .camp-switch:focus-visible, .camp .camp-help-btn:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.camp .camp-help-btn { flex: none; width: 44px; height: 44px; padding: 0; justify-content: center; border: 0; border-radius: 12px; background: transparent; color: var(--muted); }
.camp .camp-help-btn .ic { font-size: 24px; }
.camp .camp-help-btn:hover { color: var(--c); }
.camp-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.camp .camp-btn { height: 36px; min-width: 36px; padding: 0 12px; font-size: 12px; background: var(--bg); justify-content: center; }
.camp-why { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
/* 時間軸：左欄是節點記號與往下一列的連線，右欄是內容 */
.camp-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.camp-li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; min-width: 0; }
.camp-rail { display: flex; flex-direction: column; align-items: center; padding-top: 11px; }
.camp-li.active .camp-rail { padding-top: 12px; }
.camp-li.locked .camp-rail { padding-top: 0; justify-content: center; }
.camp-mk { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.camp-mk.done { background: var(--c); color: var(--accent-ink); }
.camp-mk.done .ic { font-size: 13px; stroke-width: 2.6; }
.camp-mk.active { border: 2px solid var(--c); background: var(--raise); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 16%, transparent); }
.camp-mk.active i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.camp-mk.locked { border: 1.5px dashed var(--muted); color: var(--muted); font-size: 11px; line-height: 1; }
.camp-line { flex: 1 1 0; width: 2px; min-height: 10px; background: var(--line-strong); }
.camp-line.done { background: var(--c); }
.camp-line.dash { width: 0; background: none; border-left: 2px dashed var(--line-strong); }
.camp-no { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.camp-ok { min-width: 0; padding-bottom: 4px; }
.camp-ok > summary, .camp-ok > .camp-sum { display: flex; align-items: center; gap: 8px; min-height: 44px; list-style: none; min-width: 0; }
.camp-ok > summary { cursor: pointer; }
.camp-ok > summary::-webkit-details-marker { display: none; }
.camp-nt { flex: 1 1 0; min-width: 0; font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.camp-turn { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.camp-chev { flex: none; margin-left: auto; font-size: 16px; color: var(--muted); transition: transform .15s; }
details[open] > summary > .camp-chev { transform: rotate(180deg); }
.camp-ok .camp-known { padding: 0 0 10px; }
.camp-li.active > .camp-card { margin-bottom: 12px; }
.camp-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.camp-t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.camp-t .camp-no { font-weight: 700; color: var(--c); }
.camp-t b { flex: 1 1 0; min-width: 8em; font-family: var(--serif); font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.camp-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 6px; align-items: baseline; margin: 0; }
.camp-dl dt { font-size: 12px; white-space: nowrap; color: var(--muted); }
.camp-dl dt.goal { color: var(--c); }
.camp-dl dt.known { color: var(--ok); }
.camp-dl dd { margin: 0; min-width: 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.camp-dl dd.hint { font-size: 12px; color: var(--muted); }
.camp-known { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; line-height: 1.6; }
.camp-known li { display: flex; align-items: flex-start; gap: 6px; overflow-wrap: anywhere; }
.camp .mk { flex: none; color: var(--ok); font-weight: 700; }
.camp-pity { font-size: 12px; color: var(--ink); }
.camp-pity::before { content: '✦ '; color: var(--c); }
.camp-lockline { display: flex; align-items: center; min-height: 32px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.camp-end { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.camp-review { min-width: 0; }
.camp-review > summary { display: flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; list-style: none; font-size: 12px; color: var(--muted); }
.camp-review > summary::-webkit-details-marker { display: none; }
.camp-review[open] > summary { margin-bottom: 6px; }
/* 主線說明（問號）：手機從下方滑上來，桌面置中；內容在 .camp-help 裡捲動 */
.camp-help { --c: var(--accent); position: relative; width: min(480px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--raise); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow); }
.camp-help .grab { display: none; }
.camp-help .ch-head { display: flex; align-items: center; gap: 10px; }
.camp-help h2 { margin: 0; flex: 1 1 0; min-width: 0; font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.camp-help .ch-x { flex: none; width: 44px; height: 44px; margin: -8px -10px -8px 0; justify-content: center; }
.camp-help .lead { margin: 0; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.camp-help section { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; }
.camp-help .no { font-family: var(--serif); font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--c); }
.camp-help section > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.camp-help h3 { margin: 0 0 2px; font-family: var(--serif); font-size: 15px; font-weight: 700; line-height: 1.4; }
.camp-help section ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.camp-help section li, .camp-help section p { margin: 0; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.camp-help section li { position: relative; padding-left: 1em; }
.camp-help section li::before { content: "・"; position: absolute; left: 0; }
html:lang(en) .camp-help section li::before, html:lang(vi) .camp-help section li::before { content: "•"; left: .2em; }
.camp-help section p.ch-note { color: var(--muted); padding-left: 1em; text-indent: -1em; }
.camp-help .ch-ex { min-width: 0; margin: 4px 0 0; padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg); }
.camp-help .ch-ex legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.camp-help .ch-ex div { display: flex; flex-direction: column; gap: 2px; }
.camp-help .ch-ex b { font-size: 12px; color: var(--muted); }
.camp-help .ch-ex b.on { color: var(--c); }
.camp-help .ch-ex p { margin: 0; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.camp-help .foot { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); text-align: center; }
.camp-help .ch-ok { flex: none; width: 100%; height: 44px; justify-content: center; border-radius: 10px; font-size: 14px; }
@media (max-width: 900px) {
  #campHelpOverlay { align-items: flex-end; padding: 0; }
  .camp-help { width: 100%; max-height: 88vh; max-height: 88dvh; padding: 8px 18px calc(24px + env(safe-area-inset-bottom)); border-bottom: 0; border-radius: 20px 20px 0 0; }
  .camp-help .grab { display: block; flex: none; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); }
  .camp-help { animation: camp-sheet-up .2s ease-out; }
}
@keyframes camp-sheet-up { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .camp-help { animation: none; } }

/* ---------- 改版紀錄（設定頁「關於」） ---------- */
.cl { display: flex; flex-direction: column; gap: 10px; }
.cl-ver { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 9px 12px 10px; }
.cl-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.cl-h b { font-size: 13.5px; letter-spacing: .02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.cl-h span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cl-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cl-items li { font-size: 13px; line-height: 1.55; }
.cl-n { display: inline-block; min-width: 1.4em; color: var(--muted); font-variant-numeric: tabular-nums; }
.cl-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* ---------- 狀態卡片的說明彈窗（點上方的數值卡片） ---------- */
.hud .stat[data-stat] { cursor: pointer; transition: border-color .15s; }
.hud .stat[data-stat]:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); }
.hud .stat[data-stat]:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
/* 沿用狀態卡片的配色規則：能力＝主色、聲望＝紫、內力＝藍、體力依水位、過低或走火入魔轉紅（卡片的 warn 在這裡叫 red，
   因為全站的 .warn 會把整段文字染紅） */
.stat-pop { --c: var(--accent); position: relative; overflow: hidden; width: min(380px, 100%);
  border: 1px solid color-mix(in srgb, var(--c) 60%, var(--line)); border-radius: 16px; box-shadow: var(--shadow);
  background: color-mix(in srgb, var(--c) 7%, var(--paper)); }
.stat-pop.t3 { --c: var(--nb); }
.stat-pop.lv-ok { --c: var(--ok); }
.stat-pop.qi { --c: #5B8DB8; }
.stat-pop.lv-low, .stat-pop.neg, .stat-pop.red { --c: var(--danger); }
/* 背後的大數字：SVG 文字，基線放在卡片下緣再往下 .15em → 數字下緣被卡片邊切掉約 1/5，不受字型影響。
   它貼著卡片（外框）不動，文字在裡面的 .sp-body 捲動，螢幕很矮時數字也不會跟著捲上去壓到字 */
.stat-pop .sp-big { position: absolute; left: 0; top: 0; width: calc(100% - 14px); height: 100%; pointer-events: none;
  font-size: 128px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; fill: var(--c); opacity: .16; }
.stat-pop .sp-big.full { font-size: 100px; }
.stat-pop .sp-body { position: relative; max-height: calc(100vh - 34px); max-height: calc(100dvh - 34px); overflow-y: auto;
  padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
/* 大數字墊在文字後面：最後一段文字和卡片下緣之間留出位置，數字露出的部分才不會全被文字蓋住 */
.stat-pop .sp-body::after { content: ""; flex: none; height: 54px; }
.stat-pop .sp-head { display: flex; align-items: center; gap: 8px; }
.stat-pop .sp-head .ic { font-size: 18px; color: var(--c); }
.stat-pop .sp-head b { font-size: 17px; flex: 1; min-width: 0; }
.stat-pop .sp-head .wd { flex: none; font-size: 11.5px; line-height: 1; padding: 3px 6px; border-radius: 5px; color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.stat-pop.w1 .sp-head .wd { color: var(--warn, #b7791f); background: color-mix(in srgb, var(--warn, #b7791f) 16%, transparent); }
.stat-pop .sp-x { margin: -6px -8px -6px 0; }
.stat-pop .sp-sum { margin: 0; font-size: 14px; line-height: 1.6; }
.stat-pop .sp-now { align-self: flex-start; font-size: 12.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.stat-pop .sp-h { font-size: 12px; color: var(--muted); letter-spacing: .04em; margin-top: 2px; }
.stat-pop .sp-fx { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; line-height: 1.55; }
.stat-pop .sp-fx li::marker { color: var(--c); }
/* 沒有記帳、不算數的那段故事（存檔沒變）：淡掉，玩家再送一次 */
.turn.void .text { color: var(--muted); }
.turn.void .void-tag { display: inline-block; margin-left: .4em; }