/* 餘燼全書（client/wiki/）的樣式：跟遊戲介紹頁 client/site/site.css 同一套色票 / 字型（深色底 + 餘燼橘），
 * 版面照資料庫網站的慣例：左邊目錄、右邊內容（標題 → 分頁列 → 篩選 → 表格）。只用系統字型，不連外。 */
:root {
  --font: "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "Heiti TC", sans-serif;
  --bg: #0b0e15; --card: #151b27; --card-2: #1a2130; --inset: #0d1119; --line: #262e40; --line-2: #354058;
  --text: #eef1f6; --dim: #b7bfcf; --mute: #949db1;
  --ember: #ff8a3d; --ember-2: #ff6b22; --ember-hi: #ffc58f; --ember-ink: #1f1006; --ember-glow: rgba(255, 122, 47, 0.16);
  --focus: #8cc8ff;
  /* 稀有度色 = shared/constants.js RARITY_COLORS（一般 / 魔法 / 稀有 / 傳說 / 神話）；--rar5 給寵物的神話品質 */
  --rar0: #e6e1d6; --rar1: #6f9cff; --rar2: #ffd84a; --rar3: #ff9a2e; --rar4: #ff3d5a; --rar5: #7cf0d8;
  --fs-small: 13px; --radius: 12px; --radius-sm: 8px; --topbar: 60px; --side: 220px; --pad-x: 28px;
  color-scheme: dark;
}
@media (pointer: coarse) { :root { --fs-small: 14px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: radial-gradient(1000px 420px at 10% -10%, rgba(255, 138, 61, 0.07), transparent 70%), var(--bg); color: var(--text); font: 15px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
.px { image-rendering: pixelated; }
a { color: var(--ember-hi); text-underline-offset: 3px; }
a:hover { color: #ffd9b3; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--card-2); color: var(--text); border-radius: 8px; }
.skip:focus { top: 12px; }
.wrap { max-width: 1480px; margin: 0 auto; padding: 0 var(--pad-x); }
.nw { white-space: nowrap; }
.mute { color: var(--mute); }
.dim { color: var(--dim); }
.num { font-variant-numeric: tabular-nums; }

/* ── 頂列 ── */
.topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar); background: rgba(11, 14, 21, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar .wrap { height: 100%; display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-height: 44px; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: 0.1em; }
.brand-en { font-size: 11px; font-weight: 600; letter-spacing: 0.26em; color: var(--mute); }
.topnav { margin-left: auto; display: flex; gap: 4px; }
.topnav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; color: var(--dim); text-decoration: none; font-size: 14px; border-radius: 8px; }
.topnav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.topnav a.play { color: var(--ember-ink); background: linear-gradient(180deg, #ffa25a, var(--ember) 55%, var(--ember-2)); font-weight: 700; }
.menu-btn { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; font-size: 18px; cursor: pointer; }

/* ── 版面：左目錄 + 右內容 ── */
.frame { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); column-gap: 28px; align-items: start; padding-top: 22px; min-height: 60vh; }
.sidenav { position: sticky; top: calc(var(--topbar) + 16px); display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.sidenav a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: 8px; color: var(--dim); text-decoration: none; font-size: 15px; }
.sidenav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.sidenav a.active { color: var(--ember-hi); background: rgba(255, 138, 61, 0.1); font-weight: 700; }
.sidenav a .ico { width: 22px; text-align: center; font-size: 15px; opacity: 0.85; }
.sidenav .sub { display: flex; flex-direction: column; gap: 1px; margin: 0 0 4px 30px; }
.sidenav .sub a { min-height: 32px; font-size: 14px; padding: 0 10px; }
.content { min-width: 0; padding-bottom: 60px; }
.loading { color: var(--mute); }

/* ── 頁面標題與分頁列 ── */
.page-title { margin: 4px 0 2px; font-size: 30px; font-weight: 800; letter-spacing: 0.06em; }
.page-sub { margin: 0 0 14px; color: var(--mute); font-size: 14px; }
.crumbs { margin: 0 0 6px; font-size: var(--fs-small); color: var(--mute); }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; }
.tabs a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--dim); text-decoration: none; font-size: 14px; }
.tabs a:hover { color: var(--text); border-color: var(--line-2); }
.tabs a.active { color: var(--ember-ink); background: linear-gradient(180deg, #ffa25a, var(--ember) 55%, var(--ember-2)); border-color: transparent; font-weight: 700; }
.tabs.small a { min-height: 30px; font-size: var(--fs-small); padding: 0 10px; }
.note { margin: 10px 0 14px; padding: 10px 14px; border-left: 3px solid var(--ember); background: rgba(255, 138, 61, 0.07); border-radius: 0 8px 8px 0; color: var(--dim); font-size: 14px; }
.note ul, .note ol { margin: 4px 0 0; padding-left: 20px; }
.note li + li { margin-top: 2px; }
.hint { margin: 6px 0 10px; color: var(--mute); font-size: var(--fs-small); }
.section { margin: 26px 0 0; }
.section > h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: 0.04em; }
.section > h3 { margin: 14px 0 6px; font-size: 16px; color: var(--ember-hi); }

/* ── 篩選列 ── */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; }
.filters label { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 14px; }
.filters select, .filters input[type="search"], .filters input[type="text"] { min-height: 34px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--inset); color: var(--text); font: inherit; font-size: 14px; }
.filters input[type="search"] { min-width: 220px; }
.filters .count { margin-left: auto; color: var(--mute); font-size: var(--fs-small); }

/* ── 表格 ── */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 8px 12px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl thead th { background: var(--card-2); color: var(--mute); font-weight: 700; font-size: var(--fs-small); letter-spacing: 0.04em; border-top: 0; white-space: nowrap; }
.tbl tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td.name { font-weight: 700; white-space: nowrap; }
.tbl td.wrapok { white-space: normal; }
.tbl .sub { display: block; font-weight: 400; color: var(--mute); font-size: var(--fs-small); }
.tbl tr.group th { background: var(--inset); color: var(--ember-hi); font-size: 14px; letter-spacing: 0.06em; }
.tbl .desc { color: var(--dim); white-space: pre-line; }
.tbl .kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: var(--fs-small); }
.tbl .kv b { color: var(--mute); font-weight: 600; }
.empty { padding: 18px; color: var(--mute); }

/* ── 稀有度 / 標籤 ── */
.r0 { color: var(--rar0); } .r1 { color: var(--rar1); } .r2 { color: var(--rar2); } .r3 { color: var(--rar3); } .r4 { color: var(--rar4); } .r5 { color: var(--rar5); }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--inset); color: var(--dim); font-size: 12px; line-height: 1.6; white-space: nowrap; }
.tag.ember { color: var(--ember-hi); border-color: rgba(255, 138, 61, 0.35); background: rgba(255, 138, 61, 0.1); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* ── 卡片格（地城 / 寵物）── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.card h3 { margin: 0 0 6px; font-size: 16px; }
.card p { margin: 4px 0 0; color: var(--dim); font-size: 14px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.thumbs canvas, .thumbs img { width: 72px; height: 72px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--inset); image-rendering: pixelated; }
.thumbs figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.thumbs figcaption { font-size: 12px; color: var(--mute); }

/* ── 世界地圖 ── */
.world { position: relative; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); }
.world canvas { display: block; }
.world-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; color: var(--mute); font-size: var(--fs-small); }
.world-info { margin-top: 10px; }

/* ── 小螢幕 ── */
@media (max-width: 960px) {
  :root { --pad-x: 14px; --topbar: 52px; }
  .brand-en { display: none; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .frame { grid-template-columns: minmax(0, 1fr); padding-top: 12px; }
  .sidenav { display: none; position: static; margin-bottom: 12px; }
  body.nav-open .sidenav { display: flex; }
  .page-title { font-size: 24px; }
  .tbl th, .tbl td { padding: 6px 8px; }
  .filters input[type="search"] { min-width: 160px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── 頁尾 ── */
.foot { border-top: 1px solid var(--line); padding: 20px 0 30px; color: var(--mute); font-size: var(--fs-small); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.foot nav { display: flex; gap: 16px; margin-left: auto; }
.foot a { color: var(--dim); text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }