/* 「作戰板」風格：深夜藍頂部、金色重點、卡片和按鈕底下有一條實色的邊，像遊戲裡的按鈕 */
:root {
  --bg: #eceef1;
  --surface: #ffffff;
  --sunk: #f6f7f9;
  --pill: #dde1e7;
  --ink: #1c2128;
  --muted: #4f5966;
  --line: #d3d8df;
  --line-soft: #e3e7ec;
  --ledge: #bfc6d0;
  --night: #1e2938;
  --night-2: #2c3a4e;
  --night-ink: #aeb8c6;
  --night-ledge: #0e151f;
  --gold: #f5b70a;
  --gold-ledge: #b98000;
  --accent: #8a5a00;
  --link: #0969da;
  --mine: #1a7f37;
  --r-gold: #8a5a00;
  --r-elixir: #7a2a8c;
  --r-dark: #4a3a5c;
  --font-display: "Lilita One", "Noto Sans TC", system-ui, sans-serif;
  --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12161c; --surface: #1b212b; --sunk: #171c24; --pill: #252d39; --ink: #e8ecf1; --muted: #9aa4b2;
    --line: #2b3340; --line-soft: #252c37; --ledge: #0b0f14; --night: #0d131b; --night-2: #1f2a38; --night-ledge: #05080c;
    --accent: #f5b70a; --link: #4493f8; --mine: #3fb950; --r-gold: #f2c230; --r-elixir: #e08af0; --r-dark: #c3a6e0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12161c; --surface: #1b212b; --sunk: #171c24; --pill: #252d39; --ink: #e8ecf1; --muted: #9aa4b2;
  --line: #2b3340; --line-soft: #252c37; --ledge: #0b0f14; --night: #0d131b; --night-2: #1f2a38; --night-ledge: #05080c;
  --accent: #f5b70a; --link: #4493f8; --mine: #3fb950; --r-gold: #f2c230; --r-elixir: #e08af0; --r-dark: #c3a6e0;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }  /* 關掉手機瀏覽器自帶的點擊色塊，改用下面各按鈕自己的按下效果 */
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--night); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
/* 快速連點按鈕時，不要觸發手機「點兩下放大」 */
a, button, select, label { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.wrap { max-width: 980px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
/* 深色色帶延伸到整個視窗寬度 */
.band { background: var(--night); box-shadow: 0 0 0 100vmax var(--night); clip-path: inset(0 -100vmax); }

/* 頂部 */
header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--night); }
header .wrap { display: grid; gap: 10px; padding-block: 12px 10px; }
.top { display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-size: 24px; font-weight: 900; letter-spacing: .02em; white-space: nowrap; line-height: 1; }
.brand img { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; box-shadow: 0 2px 0 var(--night-ledge); }
.brand b { color: var(--gold); font-weight: 900; }
.search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; background: #fff; border-radius: 12px; box-shadow: inset 0 -3px 0 #d3d8df; }
.search svg { flex-shrink: 0; display: block; }
.sbtn { order: -1; flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; margin-left: -7px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transition: transform .15s ease; }
.sbtn:active { transform: scale(.92); }
@media (hover: hover) { .sbtn:hover { transform: scale(1.25); } }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #1c2128; font-size: 16px; }
.search input::placeholder { color: #6b7480; }
.navrow { display: flex; align-items: flex-start; gap: 12px; }
.navrow .crumbs { flex: 1; min-width: 0; }
.toplinks { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; font-size: 14px; font-weight: 700; min-height: 26px; align-items: center; }
.toplinks a { display: inline-flex; align-items: center; gap: 5px; color: #c9d2de; text-decoration: none; padding: 2px 8px; border-radius: 8px; position: relative; }
.toplinks a { white-space: nowrap; }
.toplinks a:hover { color: #fff; }
/* 頁首的文字連結（網站名稱、版本更新、常見問題、路徑）：滑鼠移上去跳一下再落回原位，原本的變色、底線效果照舊 */
.brand, .toplinks a, .crumbs a { transition: color .15s ease; }
@keyframes link-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-3px); } 70% { transform: translateY(.5px); } }
/* 金色底線做相反的動作，抵銷文字的跳動，看起來就留在原地 */
@keyframes link-hop-back { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(3px); } 70% { transform: translateY(-.5px); } }
/* 底線不算連結的一部分：滑鼠移到底線上不會觸發跳動 */
.toplinks a::after, .crumbs a::after { pointer-events: none; }
/* 加大手指可以點的範圍（上下各多 9px，用負的 margin 抵銷），字的位置和大小不變 */
.toplinks a, .crumbs a.home, .crumbs a { padding-block: 11px; margin-block: -9px; }
@media (hover: hover) {
  .brand:hover, .toplinks a:hover, .crumbs a:hover { animation: link-hop .45s ease; }
  .toplinks a:hover::after, .crumbs a:hover::after { animation: link-hop-back .45s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .brand:hover, .toplinks a:hover, .crumbs a:hover, .toplinks a:hover::after, .crumbs a:hover::after { animation: none; }
}
.toplinks a[aria-current="page"] { color: #fff; }
.toplinks a[aria-current="page"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--gold); }
.toplinks .dot { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 15px; font-weight: 700; color: #fff; min-height: 26px; }
.crumbs a { color: #fff; text-decoration: none; }
.crumbs a:not(.home):hover { text-decoration: underline; text-underline-offset: 4px; }
.crumbs .sep { color: #6f7c8e; }
/* 「首頁」：字比網站名稱小、比後面的路徑大，顏色跟「版本更新」「常見問題」一樣 */
.crumbs a.home { font-size: 20px; font-weight: 900; line-height: 1.15; color: #c9d2de; }
.crumbs a.home:hover, .crumbs a.home[aria-current] { color: #fff; }
.crumbs a.home[aria-current] { position: relative; }
.crumbs a.home[aria-current]::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 4px; height: 3px; border-radius: 2px; background: var(--gold); }

main .wrap { padding-block: 16px 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }

/* 共用：有厚度的白卡片 */
.vcard, a.tile, .links a, .panel { background: var(--surface); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--ledge); }
.vcard:active, a.tile:active, .links a:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ledge); }

/* 首頁 */
.intro h1 { margin: 0 0 6px; font-size: 30px; font-weight: 900; line-height: 1.15; }
.intro p { margin: 0; color: var(--muted); }
.vcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vcard { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: 0 4px 0 var(--ledge); }
.vcard img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 396; object-fit: cover; }
.vcard .vt { padding: 10px 14px 12px; border-top: 2px solid var(--line); }
.vcard h2 { margin: 0; font-size: 20px; font-weight: 900; }
.vcard p { margin: 2px 0 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 滑鼠移到首頁的大卡片：金色外框（跟小方塊一樣）、卡片微微浮起、圖片稍微放大 */
.vcard img { transition: transform .25s ease; }
.vcard { transition: transform .15s ease, border-color .15s ease; }
@media (hover: hover) {
  .vcard:hover { border-color: var(--gold); transform: translateY(-3px); }
  .vcard:hover img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .vcard, .vcard img { transition: none; }
  .vcard:hover, .vcard:hover img { transform: none; }
}
.passbar { display: grid; gap: 8px; }
.passbar .lbl { font-size: 13px; font-weight: 700; color: var(--muted); }
.seg4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 5px; background: var(--pill); border-radius: 14px; max-width: 480px; }
.seg4 button { height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-family: var(--font-display); font-size: 17px; }
.seg4 button:first-child { font-family: var(--font-body); font-size: 15px; font-weight: 700; }
.seg4 button[aria-pressed="true"] { background: var(--gold); color: #1c2128; box-shadow: 0 3px 0 var(--gold-ledge); }
.seg4 button:first-child[aria-pressed="true"] { font-weight: 900; }
/* 滑鼠移到沒選中的折扣上：出現淡色框，跟分類列一樣 */
@media (hover: hover) {
  .seg4 button { cursor: pointer; }
  .seg4 button:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
}

/* 分類頁的分頁：接在頂部下面的深色色帶 */
.subtabs { display: flex; margin-top: -16px; padding-top: 4px; overflow-x: auto; scrollbar-width: none; }
/* 往下滑時分類列貼在頁首下方，--head-h 是頁首的高度（app.js 量的） */
.subtabs { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--head-h, 0px)); z-index: 4; }
.subtabs a { flex: 1; min-width: 72px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--night-ink); white-space: nowrap; text-decoration: none; border-radius: 12px 12px 0 0; }
.subtabs a[aria-current="page"] { background: var(--bg); color: var(--ink); font-weight: 900; }
/* 滑鼠移到沒選中的分類上：像 GitHub 分頁一樣出現淡色框 */
.subtabs a { position: relative; isolation: isolate; }
@media (hover: hover) {
  .subtabs a:not([aria-current="page"]):hover { color: #fff; }
  .subtabs a:not([aria-current="page"]):hover::before { content: ""; position: absolute; inset: 6px 8px; z-index: -1; border-radius: 8px; background: rgba(255, 255, 255, .1); }
}

h2.group { margin: 0 0 12px; font-size: 20px; color: var(--ink); font-weight: 900; display: flex; align-items: center; gap: 10px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
a.tile { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 12px 6px 10px; border-radius: 14px; text-decoration: none; color: var(--ink); text-align: center; }
a.tile:hover { border-color: var(--gold); }
/* 滑鼠移到小方塊：跟首頁大卡片一樣微微浮起、圖片稍微放大 */
a.tile { transition: transform .15s ease, border-color .15s ease; }
a.tile img { transition: transform .25s ease; }
@media (hover: hover) {
  a.tile:hover { transform: translateY(-3px); }
  a.tile:hover img { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  a.tile, a.tile img { transition: none; }
  a.tile:hover, a.tile:hover img { transform: none; }
}
.tile img, .tile .noimg { width: 72px; height: 72px; object-fit: contain; }
.noimg { display: grid; place-items: center; border-radius: 10px; background: var(--sunk); color: var(--muted); font-family: var(--font-display); font-size: 22px; }
.tile .n { font-size: 14px; font-weight: 700; line-height: 1.25; }
.tile .lv { font-family: var(--font-display); font-size: 16px; color: var(--accent); line-height: 1; }
.tile.off { opacity: .45; }

/* 依大本營等級 */
.hallpick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hallpick .lbl { font-weight: 900; margin-right: 4px; }
.chip { border: 2px solid var(--line); background: var(--surface); border-radius: 999px; min-width: 44px; height: 44px; padding: 0 10px; font-family: var(--font-display); font-size: 17px; color: var(--ink); box-shadow: 0 2px 0 var(--ledge); }
.chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1c2128; box-shadow: 0 3px 0 var(--gold-ledge); }
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--pill); border-radius: 12px; justify-self: start; }
.seg button { border: 0; background: transparent; height: 40px; padding: 0 18px; border-radius: 9px; font-weight: 700; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--gold); color: #1c2128; font-weight: 900; box-shadow: 0 3px 0 var(--gold-ledge); }
/* 依大本營等級：滑鼠移到沒選中的村莊、等級上時變淡灰色，跟月卡折扣一樣 */
@media (hover: hover) {
  .seg button, .chip { cursor: pointer; }
  .seg button:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
  .chip:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
}
.note { color: var(--muted); font-size: 13px; margin: 0; }

/* 項目頁 */
.hero { margin-top: -16px; padding: 4px 0 22px; display: flex; align-items: center; gap: 16px; color: #fff; }
.hero .pic { width: 96px; height: 96px; flex-shrink: 0; border-radius: 20px; background: var(--night-2); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .35); display: grid; place-items: center; }
.hero .pic img, .hero .pic .noimg { width: 80px; height: 80px; object-fit: contain; }
.hero .who { display: grid; gap: 2px; min-width: 0; }
.hero .crumb { font-size: 13px; font-weight: 700; color: var(--night-ink); }
.hero h1 { margin: 0; font-size: 28px; font-weight: 900; line-height: 1.15; text-wrap: balance; }
.hero .en { color: var(--night-ink); font-size: 14px; }
.hero .max { margin-left: auto; display: grid; justify-items: center; gap: 2px; flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--night-ink); }
.hero .max b { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1; color: #1c2128; background: var(--gold); border-radius: 12px; padding: 6px 10px 8px; box-shadow: 0 3px 0 var(--gold-ledge); }
.desc { margin: 0; color: var(--muted); }
.links { display: flex; flex-wrap: wrap; gap: 10px; }
.links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 6px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; }
/* 滑鼠移到捷徑按鈕（例如英雄頁的裝備）：跟小方塊一樣金色外框、微微浮起、圖片稍微放大 */
.links a { transition: transform .15s ease, border-color .15s ease; }
.links a img { transition: transform .25s ease; }
@media (hover: hover) {
  .links a:hover { border-color: var(--gold); transform: translateY(-3px); }
  .links a:hover img { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .links a, .links a img { transition: none; }
  .links a:hover, .links a:hover img { transform: none; }
}
.links img { width: 30px; height: 30px; object-fit: contain; }

dl.attrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; margin: 0; background: var(--line-soft); border: 2px solid var(--line); border-radius: 16px; overflow: hidden; }
dl.attrs div { background: var(--surface); padding: 10px 14px; min-width: 0; }
dl.attrs dt { font-size: 12px; color: var(--muted); }
dl.attrs dd { margin: 0; font-size: 16px; font-weight: 900; overflow-wrap: anywhere; }
dl.attrs div.wide { grid-column: 1 / -1; }
dl.attrs ul { margin: 2px 0 0; padding-left: 18px; font-weight: 500; font-size: 15px; }

.panel { border-radius: 16px; padding: 14px; display: grid; gap: 12px; max-width: 560px; }
.panel .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel .lbl { font-size: 18px; font-weight: 900; }  /* 「我的大本營」「我的英雄等級」「月卡折扣」標題 */
.panel hr { border: 0; height: 1px; background: var(--line-soft); margin: 0; }
.panel .say { font-size: 15px; color: var(--muted); }
.panel .say b { color: var(--ink); }
.panel .say b.hl { color: var(--accent); }
/* 「我的大本營」和「我的等級」兩個面板：電腦上並排，手機上下排 */
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 560px)); gap: 16px; align-items: start; }
.panels .panel { max-width: none; }
@media (max-width: 720px) { .panels { grid-template-columns: minmax(0, 1fr); } }
.calc .out { display: grid; gap: 8px; }
.calc .sum { font-size: 22px; font-weight: 900; }
.calc .lvin { width: 96px; height: 44px; padding: 0 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-family: var(--font-display); font-size: 24px; text-align: center; -moz-appearance: textfield; }
.calc .lvin::-webkit-inner-spin-button, .calc .lvin::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc .lvin:focus { border-color: var(--gold); outline: none; }
.step { display: flex; align-items: center; gap: 8px; }
.step button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--pill); color: var(--ink); font-size: 22px; font-weight: 900; line-height: 1; box-shadow: 0 3px 0 var(--ledge); }
.step button:disabled { opacity: .4; cursor: default; }
/* − / + 按鈕：按下去往下壓（手機也有）；滑鼠移上去顏色變深，等級選單出現金色外框 */
.step button:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ledge); }
@media (hover: hover) {
  .step button:not(:disabled) { cursor: pointer; }
  .step button:not(:disabled):hover { background: color-mix(in srgb, var(--ink) 14%, var(--pill)); }
  .step .n:hover { border-color: var(--gold); }
}
.step .n { min-width: 64px; height: 44px; padding: 0 22px 0 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235a6472' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 8px center; color: var(--ink); font-family: var(--font-display); font-size: 24px; line-height: 1; text-align: center; text-align-last: center; -webkit-appearance: none; appearance: none; cursor: pointer; }

section.tbl h3 { margin: 0 0 4px; font-size: 20px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
section.tbl h3 .ti { width: 36px; height: 36px; object-fit: contain; }
/* 表格標題右邊的「（已套用月卡 -20%）」：比標題小，跟標題隔開一點 */
section.tbl h3 .dnote { margin-left: 2px; font-size: 18px; font-weight: 700; }
section.tbl .sub { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.scroll { overflow-x: auto; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); -webkit-overflow-scrolling: touch; }
table { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; font-size: 14px; min-width: 100%; }
th, td { padding: 9px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line-soft); }
thead th { position: sticky; top: 0; background: var(--night); font-size: 12px; font-weight: 700; color: #dce2ea; text-align: right; vertical-align: bottom; white-space: normal; min-width: 64px; line-height: 1.3; border-bottom: 0; }
tbody tr:nth-child(even) td { background: var(--sunk); }
/* 英雄頁：使用者輸入的「英雄等級」那一列亮起來
   綠色底、左邊一條綠色標記，等級方塊維持原本的深色；滑到這一列出現在畫面上（.seen）後等 1 秒，整列閃一下、方塊彈一下 */
tbody tr.mine td { background: color-mix(in srgb, var(--mine) 13%, var(--surface)); }
tbody tr.mine td:first-child { box-shadow: inset 5px 0 0 var(--mine); }
tbody tr.mine.seen td { animation: mine-flash .7s ease-out 1s; }
tbody tr.mine.seen td:first-child .lvb { animation: mine-pop .45s ease-out 1s; }
@keyframes mine-flash { from { background: color-mix(in srgb, var(--mine) 40%, var(--surface)); } }
@keyframes mine-pop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { tbody tr.mine.seen td, tbody tr.mine.seen td:first-child .lvb { animation: none; } }
/* 第一欄是固定欄，往右滑時其他欄會從它底下經過；只讓裡面的等級標籤變淡，格子本身保持不透明 */
tbody tr.above td:not(:first-child), tbody tr.above td:first-child .lvb { opacity: .38; }
th:first-child, td:first-child { position: sticky; left: 0; text-align: center; background: var(--surface); z-index: 1; border-right: 1px solid var(--line-soft); }
thead th:first-child { background: var(--night); z-index: 2; }
td:first-child { font-weight: 700; white-space: nowrap; }
td:first-child .lvb { display: inline-block; min-width: 28px; font-family: var(--font-display); font-weight: 400; font-size: 15px; color: #fff; background: var(--night); border-radius: 7px; padding: 2px 5px 3px; }
td:first-child .lvb.sc { display: inline-flex; align-items: center; gap: 3px; background: var(--r-elixir); }
td:first-child .lvb.sc img { width: 16px; height: 16px; }
.attrs .links { margin-top: 4px; }
.attrs .unit { font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
.cost { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.c-gold, .c-builder-gold, .c-capital-gold { color: var(--r-gold); }
.c-elixir, .c-builder-elixir { color: var(--r-elixir); }
.c-dark-elixir { color: var(--r-dark); }
.ri { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); }
.legend .ri { margin: 0 4px 0 0; }
.disc { color: var(--accent); font-weight: 700; }
.empty { padding: 40px 0; text-align: center; color: var(--muted); }
.loading { padding: 80px 0; text-align: center; color: var(--muted); font-size: 18px; font-weight: 700; }
.loading i { display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--gold); animation: hop 1s ease-in-out infinite; }
.loading i:nth-child(2) { animation-delay: .15s; }
.loading i:nth-child(3) { animation-delay: .3s; }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .loading i { animation: none; } }
.seo { display: none; }
.faq { display: grid; gap: 12px; max-width: 720px; }
.faq section { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.faq h2 { margin: 0 0 6px; font-size: 17px; font-weight: 900; }
.faq p { margin: 0; color: var(--muted); line-height: 1.7; }
.faq a { color: var(--link); font-weight: 700; overflow-wrap: anywhere; }
.faq a:hover { text-decoration: none; }
.license { margin: 10px 0 0; padding: 12px 14px; background: var(--sunk); border: 1px solid var(--line-soft); border-radius: 10px;
  color: var(--muted); font: 13px/1.6 var(--font-body); white-space: pre-line; overflow-wrap: anywhere; }
/* 解鎖兵種／法術／裝備：點名稱到該項目的頁面 */
a.nm { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a.nm:hover { text-decoration-color: currentColor; }
footer { color: var(--muted); font-size: 12px; display: grid; gap: 6px; padding-top: 14px; border-top: 2px dashed var(--line); }
.log { display: grid; gap: 14px; max-width: 760px; }
.log .day { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 0 16px; }
.log .day > summary { display: flex; align-items: center; gap: 8px; padding: 14px 0; cursor: pointer; list-style: none; }
.log .day > summary::-webkit-details-marker { display: none; }
.log .day > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.log .day[open] > summary::before { transform: rotate(90deg); }
.log .day[open] { padding-bottom: 8px; }
.log h2 { margin: 0; font-size: 18px; font-weight: 900; }
.log h3 { margin: 4px 0 8px; font-size: 14px; color: var(--muted); }
.log .item { border-top: 1px solid var(--line); padding-top: 8px; }
.log .item .name { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.log .item .name img, .log .item .name .noimg { width: 32px; height: 32px; object-fit: contain; }
.log .fold { display: block; width: 100%; min-height: 44px; margin: 8px 0 4px; border: 2px solid var(--line); border-radius: 12px; background: var(--sunk); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
/* 日期列、收合按鈕：滑鼠移上去變淡灰色（跟月卡折扣一樣），收合按鈕按下去往下壓 */
.log .day > summary { margin-inline: -16px; padding-inline: 16px; border-radius: 14px; }
.log .day[open] > summary { border-radius: 14px 14px 0 0; }
.log .fold { transition: background .15s ease; box-shadow: 0 2px 0 var(--ledge); }
.log .fold:active { transform: translateY(2px); box-shadow: none; }
@media (hover: hover) {
  .log .day > summary:hover { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }
  .log .fold:hover { background: color-mix(in srgb, var(--ink) 8%, var(--sunk)); }
}
.log ul { margin: 0 0 8px; padding-left: 20px; line-height: 1.7; overflow-wrap: anywhere; }
.log .lvl { display: block; color: var(--muted); }
.log li .ri { width: 14px; height: 14px; vertical-align: -2px; margin-left: 2px; }
footer p { margin: 0; }
footer a { color: inherit; }
footer a:hover { color: var(--link); }  /* 頁尾連結平常跟文字同色，滑鼠移上去變藍色 */

@media (max-width: 720px) {
  .vcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .vcard.big { grid-column: 1 / -1; }
  .vcard:not(.big) h2 { font-size: 18px; }
  .vcard:not(.big) p { font-size: 12px; }
  .vcard.big h2 { font-size: 22px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  /* 手機：版本更新、常見問題移到最上列，跟網站名稱同一列；搜尋列和目前位置各佔一列 */
  header .wrap { grid-template-columns: auto 1fr; grid-template-areas: "brand links" "search search" "crumbs crumbs"; row-gap: 12px; }
  .top, .navrow { display: contents; }
  .brand { grid-area: brand; }
  .search { grid-area: search; }
  .navrow .crumbs { grid-area: crumbs; }
  .toplinks { grid-area: links; justify-self: end; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .grid.heroes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile img, .tile .noimg { width: 64px; height: 64px; }
  table { font-size: 15px; }
  thead th { font-size: 12px; }
  dl.attrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dl.attrs dt { font-size: 13px; }
  .note, .legend { font-size: 14px; }
  footer { font-size: 13px; }
  .hero .pic { width: 84px; height: 84px; }
  .hero .pic img, .hero .pic .noimg { width: 70px; height: 70px; }
  .hero h1 { font-size: 26px; }
}
/* 比較窄的手機：網站名稱縮小一點，「版本更新」「常見問題」才不會被擠成兩行 */
@media (max-width: 380px) {
  .brand { font-size: 20px; gap: 8px; }
  .toplinks { gap: 2px; }
  .toplinks a { padding-inline: 6px; }
}
@media (max-width: 340px) {
  .brand { font-size: 18px; }
  .brand img { width: 30px; height: 30px; }
  .toplinks { font-size: 13px; }
  .toplinks a { padding-inline: 4px; }
}
/* 按下去時一律往下壓（要放在滑鼠浮起的效果後面，才不會被蓋掉） */
.vcard:active, a.tile:active, .links a:active { transform: translateY(2px); }
/* 手機、平板按下去的反應：手指按住時就有變化，不用等頁面切換 */
.subtabs a:not([aria-current="page"]):active::before { content: ""; position: absolute; inset: 6px 8px; z-index: -1; border-radius: 8px; background: rgba(255, 255, 255, .14); }
.seg4 button:not([aria-pressed="true"]):active, .seg button:not([aria-pressed="true"]):active { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.chip:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ledge); }
.log .day > summary:active { background: color-mix(in srgb, var(--ink) 10%, var(--surface)); }
.brand:active, .toplinks a:active, .crumbs a:active, a.nm:active, .faq a:active, footer a:active { opacity: .6; }