/* ═══════════════════════════════════════════════════════════════════════════
   官網地基（2026-10-17 改版第一刀）：代幣、字型、官方視窗框、頂欄／頁尾。
   載入順序：style → layout → app/main → enhance … mobile → **foundation** → motion
     · 排在舊樣式後面：同特異度時這裡贏，舊頁不用一頁一頁改就跟著換字型、圓角、底色。
     · motion.css 仍是最後一支（tests/test-site-motion.js 守）：互動狀態要贏過這裡。
   方向（Kevin 核准）：攻略站／BBS 的排法，官方遊戲素材當裝飾。
     · 圓角 2–4px，不用漸層、光暈、毛玻璃；陰影只留一條 1px 的木頭下緣。
     · 標題：霞鶩文楷 TC（手寫感，maple-life 也用這套）；內文 Noto Sans TC 14px；只用 400／700 兩個字重。
     · 表格數字一律等寬（tabular-nums）。
   ⚠️ 字色只用代幣（深色模式會翻）：橘字 --accent-text、次要字 --muted-brown。
   ⚠️ 官方視窗框（ui/tooltip/frame.png）上緣 24px 是遊戲裡的白色標題列，永遠是白底 → 標題字寫死深色，不跟主題翻。
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --font-display: "LXGW WenKai TC", "Kaiti TC", "STKaiti", "Noto Sans TC", serif;
  --font-body: "Noto Sans TC", system-ui, -apple-system, sans-serif;
  /* 圓角：全站收到 2–4px。--rad-pill 也一起收（膠囊按鈕是這次要拿掉的樣子） */
  --r: 4px; --r-sm: 2px;
  --rad-sm: 2px; --rad-md: 3px; --rad-lg: 4px; --rad-pill: 3px;
  /* 陰影：只留木頭下緣，不要浮起來的卡片 */
  --shadow-wood: 0 1px 0 rgba(90, 60, 25, .14);
  --shadow-card: 0 1px 0 rgba(90, 60, 25, .12);
  --shadow-hover: 0 1px 0 rgba(90, 60, 25, .2);
  --e1: 0 1px 0 rgba(90, 60, 25, .1);
  --e2: 0 1px 0 rgba(90, 60, 25, .14);
  --e3: 0 2px 0 rgba(90, 60, 25, .16);
  --rim: none;
  /* 木頭與紙（新元件用；深色模式在下面翻） */
  --wood-bar: #5b3a1d;          /* 深木條（頂欄下緣、橫幅木牌）—— 上面的字用 --on-solid */
  --wood-bar-hi: #8a5a2b;
  --paper: #fbf6ea;
  --frame-body: #fffdf7;        /* 官方視窗框的本體底色 */
  --frame-title: #1a202c;       /* 白色標題列上的字：不翻 */
  --bb-gap: 20px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1b1712;
    --frame-body: #1f1a14;
    --shadow-wood: 0 1px 0 rgba(0, 0, 0, .5);
    --shadow-card: 0 1px 0 rgba(0, 0, 0, .5);
    --e1: 0 1px 0 rgba(0, 0, 0, .4);
    --e2: 0 1px 0 rgba(0, 0, 0, .5);
    --e3: 0 2px 0 rgba(0, 0, 0, .5);
  }
  /* 頁面底：拿掉光暈，留實色 */
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) body { background: var(--bg); }
}

/* ── 頁面底與內文 ── */
html, body { background: var(--bg); }
body { font: 14px/1.75 var(--font-body); }
b, strong, th { font-weight: 700; }
table, .num, td.num, .kv b, time { font-variant-numeric: tabular-nums lining-nums; }

/* ── 標題：手寫感字型、兩個字重、不用 emoji 當裝飾 ── */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; color: var(--text-title); }
h1 { font-size: 1.75rem; line-height: 1.3; }
h2 { font-size: 1.375rem; line-height: 1.35; margin: 32px 0 12px; }
h3 { font-size: 1.125rem; }
/* 舊版 h2 前面是 🍁 emoji：換成官方「楓葉」道具圖示（Item 4001126） */
h2::before {
  content: ""; flex: none; width: 18px; height: 18px; font-size: 0;
  background: url("/icons/4001126.png") center / contain no-repeat;
  image-rendering: pixelated; filter: none;
}
h2::after { background: var(--wood-border); height: 1px; border-radius: 0; }
@media (max-width: 560px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; margin: 26px 0 10px; font-family: var(--font-display); font-weight: 700; }
}

/* ═══ 官方視窗框（遊戲「道具欄」視窗，tools/wz/build-ui-frame.mjs 切的九宮格）═══
   <section class="frame"><h2 class="frame-t">標題</h2>…</section>
   上緣 24px 是官方白色標題列：.frame-t 絕對定位進那條帶。本體底色走 --frame-body（深色模式會翻）。 */
.frame {
  position: relative; margin: 0; min-width: 0;
  border: 8px solid transparent; border-top-width: 24px;
  border-image: url("/ui/tooltip/frame.png") 24 8 8 8 / 24px 8px 8px 8px stretch;
  background: var(--frame-body); background-clip: padding-box;
  padding: 10px 12px 12px;
}
.frame > .frame-t {
  position: absolute; left: 0; right: 0; top: -22px; height: 18px; margin: 0;
  display: flex; align-items: center; gap: 8px;
  font: 700 13px/18px var(--font-body); color: var(--frame-title); letter-spacing: 0;
  white-space: nowrap; overflow: hidden;
}
.frame > .frame-t::before, .frame > .frame-t::after { content: none; }
.frame > .frame-t a { margin-left: auto; font-weight: 400; font-size: 0.75rem; color: #8a3a00; }
.frame > .frame-t a:hover { text-decoration: underline; }

/* ═══ 頂欄：一條紙色橫條＋深木下緣，沒有膠囊、沒有陰影 ═══ */
header.top, header.top.is-compact {
  background: var(--paper); box-shadow: none;
  border-bottom: 3px solid var(--wood-bar);
}
.brand-t b, #brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
.top .brand .leaf { display: none; }
.top .brand::before {
  content: ""; width: 28px; height: 28px; flex: none;
  background: url("/icons/4001126.png") center / 24px no-repeat; image-rendering: pixelated;
}
.top .brand { display: inline-flex; align-items: center; gap: 8px; }
.nav-pill { display: none !important; }
.top .nav a.nav-top, .top .nav .nav-btn {
  border-radius: 0; background: transparent; box-shadow: none; border: 0;
  font-weight: 700; color: var(--text-brown);
  border-bottom: 2px solid transparent;
}
.top .nav a.nav-top::after { content: none; }
.top .nav a.nav-top:hover, .top .nav .nav-btn:hover, .nav-grp.open .nav-btn { background: transparent; color: var(--accent-text); transform: none; box-shadow: none; }
.top .nav a.nav-top.on, .top .nav .nav-btn.on, .top .nav a.nav-top[aria-current="page"] {
  color: var(--accent-text); background: transparent; border-bottom-color: var(--accent);
}
.top .nav .nav-btn.on, .nav-grp.open .nav-btn.on { color: var(--accent-text); }
.nav-panel { border-radius: var(--rad-lg); box-shadow: 0 2px 0 rgba(60, 40, 15, .18); }
.top .search input { border-radius: var(--rad-md); box-shadow: none; }
.auth-btn {
  border-radius: var(--rad-md); box-shadow: none; font-weight: 700;
}
.auth-btn .i { display: none; }

/* ═══ 頁尾 ═══ */
.foot { border-top: 3px solid var(--wood-bar); font-weight: 400; }
.foot .theme-sw button, .foot-login { border-radius: var(--rad-md); }
.foot a { color: var(--accent-text); text-decoration: underline; }

/* ═══ 舊頁共用元件壓平（2026-10-17 改版第二批）═══
   面板、卡片、篩選列、籌碼、徽章：拿掉漸層、浮起陰影、hover 上移；圓角走代幣（2–4px）。
   版面一行都不動，只換外觀，舊頁不用逐頁改就跟上。 */
.panel, .card, .filters { border-width: 1px; box-shadow: none; }
.card:hover, .raid:hover, .panel:hover { transform: none; box-shadow: none; }
.card:hover { border-color: var(--wood-border-dark); }
.card .thumb, .mob .sp, .gear .ic { background: var(--card-wood); }
.chip { border-width: 1px; font-weight: 700; }
.chip.on { background: var(--accent-ink); box-shadow: none; }
.badge { box-shadow: none; border-width: 1px; }
.panel h3 { border-bottom: 1px solid var(--line-strong); font-family: var(--font-display); font-weight: 700; }
th, td { border-bottom-color: var(--line-strong); }
th { font-weight: 700; }
.btn { border-radius: var(--rad-md); box-shadow: none; }

.nowrap { white-space: nowrap; }

/* 兩欄說明表：<dl class="dl2"><dt>項目</dt><dd>內容</dd>…</dl> */
.dl2 {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 12px 0 16px;
  background: var(--frame-body); border: 1px solid var(--wood-border);
}
.dl2 dt, .dl2 dd { margin: 0; padding: 7px 12px; border-bottom: 1px solid var(--line-strong); }
.dl2 dt { background: var(--th-bg); color: var(--text-brown); font-weight: 700; white-space: nowrap; }
.dl2 dd { color: var(--text-dark); }
.dl2 dt:nth-last-of-type(1), .dl2 dd:last-of-type { border-bottom: 0; }
@media (max-width: 560px) { .dl2 dt { white-space: normal; max-width: 7em; } }

/* 寬表格：外層橫捲（手機不撐出整頁） */
.tscroll { overflow-x: auto; max-width: 100%; }
.tscroll > table { min-width: 0; }
/* 橫捲容器裡的表頭不能黏（sticky 會改以容器為基準，表頭被推到第一列下面） */
html body .tscroll table thead th, html body .tscroll table > tbody > tr:first-child > th, html body .tscroll table > tr:first-child > th { position: static; box-shadow: none; }
@media (max-width: 960px) { .tscroll > table { min-width: 460px; } }
/* 官方視窗框裡的表格：框不能 overflow（會把上緣標題列切掉），表格自己縮、字換行 */
@media (max-width: 960px) { .frame table:not(.tscroll > table) { min-width: 0; } .frame td, .frame th { padding: 6px 8px; overflow-wrap: anywhere; } }
/* grid／flex 子項預設 min-width:auto，會被裡面的寬表格撐開整頁 */
.detail > div, .rk-toolbar > *, .bb-board > *, .bb-lower > * { min-width: 0; max-width: 100%; }

/* 官方視窗框當段落用（突襲每隻王、職業頁區塊）：段落之間留距離 */
.frame + .frame, .tscroll + .frame { margin-top: 36px; }
h2 + .frame { margin-top: 8px; }
.bb-board > .frame { margin-top: 0; }   /* 首頁三欄並排：不要吃上面那條段落間距 */

/* ═══ 各頁改版（舊頁本體在 site/app.js，樣式放這裡才排得過舊樣式）═══ */

/* ── 突襲：入場條件兩欄表、王的一覽表、每隻王一個官方視窗框 ── */
.rk-solo { display: block; background: none; border: 0; border-left: 3px solid var(--accent); border-radius: 0; padding: 2px 0 2px 12px; font-weight: 400; color: var(--text); }
.rk-foot { margin: 6px 0 0; font-size: var(--fs-2xs); }
.rk-index .rk-ic { width: 44px; padding: 4px 6px; }
.rk-index .rk-ic img { max-width: 40px; max-height: 40px; display: block; image-rendering: pixelated; }
.rk-index td a { color: var(--accent-text); font-weight: 700; white-space: nowrap; }
.rk-index td:nth-child(3), .rk-index td:nth-child(4), .rk-index td:nth-child(5), .rk-index td:nth-child(6) { white-space: nowrap; }
.rk-index td a:hover { text-decoration: underline; }
.rk-boss { padding: 14px 16px 16px; }
.rk-boss .rk-sprite { float: right; max-width: 120px; max-height: 120px; margin: 0 0 8px 12px; image-rendering: pixelated; }
.rk-boss h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); margin: 18px 0 8px; clear: both; }
.rk-mech { box-shadow: none; border-radius: var(--rad-md); }
@media (max-width: 560px) { .rk-boss .rk-sprite { max-width: 72px; max-height: 72px; } }

/* ── 排行榜：一列一個角色的表格 ── */
.rk-toolbar { border-width: 1px; margin-bottom: 12px; }
.rk-chip, .rk-search-input { border-width: 1px; }
.rk-chip.on { box-shadow: none; }
.rk-table { background: var(--frame-body); border: 1px solid var(--wood-border); }
.rk-table tr.rk-card { display: table-row; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; }
.rk-table tr.rk-card:hover { transform: none; box-shadow: none; background: var(--row-hover); }
.rk-table td { padding: 6px 10px; }
.rk-table .rk-rank-badge { display: table-cell; width: 3.5em; text-align: right; }
.rank-crown, .rank-num { display: inline-block; min-width: 2em; padding: 1px 6px; border-radius: var(--rad-sm); text-align: center; font-weight: 700; font-size: var(--fs-2xs); box-shadow: none; border-width: 1px; }
.rank-crown.gold { background: #f5c542; color: #4a2e00; box-shadow: none; }
.rank-crown.silver { background: #d5dbe0; color: #2f3b44; box-shadow: none; }
.rank-crown.bronze { background: #e0a36b; color: #3d1d00; box-shadow: none; }
.rank-num { background: none; border: 0; color: var(--muted-brown); }
.rk-who { display: flex; align-items: center; gap: 8px; min-width: 9em; }
.rk-table th, .sk-table th, .rk-index th { white-space: nowrap; }
.rk-table img.rk-avatar { flex: none; width: 36px; height: 36px; object-fit: contain; border: 0; background: none; border-radius: 0; }
.rk-table .rk-name { font-size: var(--fs-xs); font-weight: 700; }
.rk-table .btn-inspect-gear { background: var(--card-wood); color: var(--text-brown); border: 1px solid var(--wood-border); border-radius: var(--rad-sm); box-shadow: none; padding: 3px 10px; min-height: 30px; font-weight: 700; }
.rk-table .btn-inspect-gear:hover { border-color: var(--accent); color: var(--accent-text); transform: none; }

/* ── 職業詳細頁：技能表、右欄官方視窗框、配點表 ── */
.jhero { background: var(--frame-body); border-width: 1px; border-left-width: 4px; box-shadow: none; }
.lockpill { border-width: 1px; }
.sk-table { background: var(--frame-body); border: 1px solid var(--wood-border); }
.sk-table td { vertical-align: top; padding: 8px 10px; }
.sk-table .sk-ic { width: 40px; }
.sk-table .sk-ic img { width: 32px; height: 32px; image-rendering: pixelated; }
.sk-table .sk-main b { font-size: var(--fs-xs); color: var(--text-title); }
.sk-table .sk-main .d { color: var(--text); font-size: var(--fs-2xs); margin-top: 2px; }
.sk-table .offnote { font-size: var(--fs-3xs); color: var(--gold-text); margin-top: 4px; background: none; border: 0; padding: 0; }
.sk-table details { margin-top: 6px; }
.sk-table summary { cursor: pointer; font-size: var(--fs-2xs); color: var(--accent-text); }
.sk-table .sk-orig { margin: 6px 0 0; font-size: var(--fs-3xs); }
.sk-table .kind { white-space: nowrap; }
.detail > div > .frame { margin-bottom: 20px; }
.detail > div > .frame + .frame { margin-top: 36px; }
.spcalc { padding: 12px 14px 14px; }
.spcalc .dl2 { margin: 8px 0 10px; }
.spcalc .dl2 dd.good { color: var(--green-text); }
.spcalc .dl2 dd.bad { color: var(--red-text); }
.bp-row { border-radius: var(--rad-sm); box-shadow: none; }

/* ── 怪物詳細：命中計算改兩欄表 ── */
.hc-dl dd.good, .ga-dl dd.good { color: var(--green-text); }
.hc-dl dd.mid { color: var(--gold-text); }
.hc-dl dd.bad { color: var(--red-text); }
.hc-dl dd b { font-size: var(--fs-sm); }

/* ── 轉蛋：說明改兩欄表，分層切換一排籌碼 ── */
.ga-tabs { margin: 0 0 14px; }
.gm-stage { border-radius: var(--rad-md); box-shadow: none; background: var(--card-wood); }

/* ── 製作：六位師傅改成表格，點一列切換配方 ── */
table.cf-npcs { background: var(--frame-body); border: 1px solid var(--wood-border); display: table; }
table.cf-npcs tr.cf-npc { cursor: pointer; display: table-row; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
table.cf-npcs tr.cf-npc:hover { background: var(--row-hover); }
table.cf-npcs tr.cf-npc.on { background: var(--tint-warm); }
table.cf-npcs tr.cf-npc.on td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.cf-card, .cf-grid > * { box-shadow: none; }
.cf-card:hover { transform: none; }
.cf-noic { font-size: var(--fs-2xs); color: var(--muted-brown); }

/* ── 外觀：格子壓平 ── */
.lookrow, .lookcell { box-shadow: none; border-width: 1px; }
.lookcell { background: var(--card-wood); }
.lookcell:hover { transform: none; }