* { margin: 0; padding: 0; box-sizing: border-box; }
/* 全站保險：任何 2.5D 變形都不得撐出橫向捲軸 */
html, body { overflow-x: clip; }
:root {
  /* 水彩墨插畫紙感主題（2026-07-11 重皮） */
  --bg: #f7f3ea;          /* 暖奶油紙底 */
  --paper2: #eef4f8;      /* 冷調水彩淡藍紙 */
  --panel: #ffffff;       /* 白卡 */
  --ink: #2b2b2b;         /* 墨線黑 */
  --accent: #6f9fc9;      /* 淡天藍（主色） */
  --accent2: #4a7ba6;     /* 深水藍 */
  --purple: #9a8fc4;      /* 柔紫墨 */
  --text: #2b2b2b;
  --muted: #5f646c;       /* 灰墨（加深以達對比） */
  --ink-70: rgba(43,43,43,.7);   /* 墨色 70%（深色模式自動反轉） */
  --ink-55: rgba(43,43,43,.55);  /* 墨色 55%（深色模式自動反轉） */
  --green: #4a9e6f;
  --red: #d05a54;
  --line: rgba(43,43,43,.12);   /* 墨線細框 */
  --wash-blue: #cfe0ee;
  --wash-cream: #f0e7d6;
  --flower-pink: #e5a3b2;
  --cjk: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-en: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", var(--cjk);
  --font-serif: "Baskerville", "Georgia", "Times New Roman", "Noto Serif TC", var(--cjk);
}

/* ── 今日 10 題：首頁單一主行動與短回合進度 ── */
.dq-home{position:relative;min-height:330px;overflow:hidden;padding:0!important;border:1px solid rgba(212,167,58,.6);background:#172a2d;color:#fff}
.dq-home-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 44%;filter:saturate(.86) contrast(1.05)}
.dq-home-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,20,24,.96) 0%,rgba(10,26,29,.84) 46%,rgba(10,20,22,.28) 100%)}
.dq-home-content{position:relative;z-index:1;display:flex;min-height:330px;max-width:620px;box-sizing:border-box;padding:34px;flex-direction:column;justify-content:center;align-items:flex-start;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.dq-kicker{color:#f3cf73;font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.dq-home h2{margin:8px 0 6px;font-size:clamp(2rem,6vw,3.4rem);line-height:1.05;color:#fff}
.dq-home p{margin:0 0 17px;color:#f6f0de;font-size:1rem}
.dq-home-meta{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 18px;font-size:.86rem;color:#fff4cb}
.dq-home-meta span{padding:6px 10px;border:1px solid rgba(243,207,115,.5);border-radius:999px;background:rgba(7,20,23,.58)}
.dq-primary{min-width:min(100%,330px);font-size:1.08rem;background:linear-gradient(135deg,#e1a62c,#f4cf70)!important;color:#2a1a05!important;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.dq-steps{display:grid;grid-template-columns:repeat(10,minmax(24px,1fr));gap:6px;width:100%;max-width:520px}
.dq-steps span{display:grid;aspect-ratio:1;place-items:center;border-radius:7px;border:1px solid #c7d1d1;background:rgba(255,255,255,.9);color:#526060;font-size:.72rem;font-weight:800;text-shadow:none}
.dq-steps span.ok{border-color:#2b9a72;background:#45b88a;color:#fff}
.dq-steps span.review{border-color:#d09232;background:#f2c35e;color:#513609}
.dq-session,.dq-done{max-width:760px;margin:0 auto}
.dq-session-head{display:flex;justify-content:space-between;align-items:center;margin:10px 0 12px;color:var(--ink,#2e342f)}
.dq-session>.dq-steps,.dq-done>.dq-steps{max-width:none;margin-bottom:22px}
.dq-week,.dq-teaser,.dq-reward-picked{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:14px 0;padding:14px 16px;border-radius:12px;background:#f5edd8;border:1px solid #dfc784;color:#4b3b20}
.dq-rewards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.dq-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.install-card{margin-top:20px;padding:18px;text-align:left;border:1px solid #b9c9bf;border-radius:14px;background:#f4f8f4;color:#253a32}
.install-card b{font-size:1.05rem}.install-card p{margin:7px 0 12px}.install-card ol{margin:8px 0 0;padding-left:1.4em}
.push-card{margin-top:14px;padding-top:14px;border-top:1px solid #cbd7cf}.push-card p{margin:7px 0 12px}.push-card label{display:flex;gap:10px;align-items:center;font-weight:700}.push-card select{min-width:105px;padding:9px;border:1px solid #aab9b0;border-radius:9px;background:#fff}.push-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.push-status{min-height:1.4em;margin-top:9px;color:#35654e}

@media(max-width:620px){
  .dq-home{min-height:420px;margin-left:-8px;margin-right:-8px;border-radius:18px}
  .dq-home-art{object-position:60% center}
  .dq-home-shade{background:linear-gradient(0deg,rgba(6,18,21,.98) 0%,rgba(7,21,24,.8) 62%,rgba(7,20,22,.28) 100%)}
  .dq-home-content{min-height:420px;padding:170px 20px 22px;justify-content:flex-end}
  .dq-home h2{font-size:2.2rem}
  .dq-home-meta{margin:10px 0 14px}
  .dq-rewards,.dq-actions{grid-template-columns:1fr}
  .dq-week{align-items:flex-start;flex-direction:column}
  .dq-steps{gap:4px}.dq-steps span{border-radius:5px;font-size:.64rem}
}
body {
  font-family: var(--cjk);
  background:
    radial-gradient(900px 500px at 12% 0%, rgba(207,224,238,.55) 0%, transparent 55%),
    radial-gradient(760px 480px at 100% 22%, rgba(240,231,214,.6) 0%, transparent 55%),
    radial-gradient(680px 520px at 30% 100%, rgba(229,163,178,.16) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
}
.container { max-width: 520px; margin: 0 auto; padding: 20px 16px calc(48px + env(safe-area-inset-bottom)); transition: max-width .2s; }
/* 桌機加寬：一般頁 720、會考閱讀雙欄 940 */
@media (min-width: 860px) {
  .container { max-width: 720px; }
  body[data-view="exam"] .container { max-width: 940px; }
}
.loading { text-align: center; padding-top: 40vh; color: var(--muted); }

.hero { text-align: center; padding: 48px 0 28px; }
.hero h1 {
  font-size: 44px; letter-spacing: 6px;
  background: linear-gradient(90deg, var(--accent), #ff9c4a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--muted); margin-top: 10px; }
.hero.small { padding: 24px 0 16px; }
.hero.small h1 { font-size: 30px; }

.btn {
  display: inline-block; border: none; border-radius: 14px; cursor: pointer;
  font-size: 18px; font-family: inherit; padding: 14px 22px;
  background: var(--accent2); color: #fff; font-weight: 700;
  transition: transform .08s;
}
.btn:active { transform: scale(.96); }
.btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--muted); }
.btn.yes { background: var(--green); color: #0b3320; }
.btn.no { background: var(--red); color: #fff; }
.btn:disabled { opacity: .85; cursor: default; }

.stage-btns, .menu-btns { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.btn.stage { padding: 22px; font-size: 22px; line-height: 1.5; }
.btn.stage span { font-size: 14px; font-weight: 400; }
.btn.main { padding: 20px; font-size: 20px; background: var(--panel); color: var(--text); border: 1px solid #dfe4ea; }
.menu-btns .ghost { align-self: center; margin-top: 8px; font-size: 14px; padding: 10px 18px; }

/* ── 主選單分組＋色票 ── */
.menu-group { margin-top: 18px; }
.menu-group:first-of-type { margin-top: 6px; }
.menu-glabel { font-size: 12px; letter-spacing: 2px; color: var(--muted); margin: 0 4px 8px; }
.menu-group .btn.main { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  border-left: 4px solid var(--c, #dfe4ea); }
.menu-group .btn.main .m-ico { font-size: 24px; flex: none; }
.menu-group .btn.main .m-sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.btn.main.c-study { --c: var(--accent2); }
.btn.main.c-battle { --c: var(--purple); background: linear-gradient(100deg, rgba(154,143,196,.14), #fff); font-size: 21px; }
.btn.main.c-tool { --c: var(--green); }
.menu-foot { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.menu-foot .btn { font-size: 14px; padding: 10px 18px; }

/* ── 首頁迷你戰況（Leitner 五盒分佈 + 連續天數） ── */
.dash { background: var(--panel); border: 1px solid #dfe4ea; border-radius: 16px; padding: 14px 16px; margin-top: 4px; }
.dash-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.dash-top .d-stage { font-weight: 700; }
.dash-top .d-streak { font-size: 13px; color: var(--accent); }
.dash-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #e6edf4; }
.dash-seg { height: 100%; }
.dash-seg.b0 { background: #3a4d80; }
.dash-seg.b1 { background: var(--accent2); }
.dash-seg.b2 { background: #6ad0c0; }
.dash-seg.b3 { background: #7be0a0; }
.dash-seg.b4 { background: var(--green); }
.dash-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.dash-legend b { color: var(--text); font-weight: 700; }
.dash-empty { color: var(--muted); font-size: 13px; text-align: center; }

.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.topbar .back { background: none; border: none; color: var(--accent2); font-size: 26px; cursor: pointer;
  padding: 10px 14px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.topbar h2 { font-size: 20px; font-weight: 600; }
.hdr-badge { margin-left: auto; display: flex; gap: 6px; }
.hdr-badge-i { font-size: 13px; font-weight: 700; color: var(--text); background: var(--panel);
  border: 1px solid #dfe4ea; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
body.dark .hdr-badge-i { border-color: #3a4258; }

.flash-progress { text-align: center; color: var(--muted); margin-bottom: 14px; font-size: 14px; }
.flash-session-progress { color: var(--ink); font-weight: 600; }
.flash-card {
  background: var(--panel); border: 1px solid #dfe4ea; border-radius: 20px;
  min-height: 300px; display: flex; align-items: center; justify-content: center;
  padding: 28px; cursor: pointer; text-align: center;
}
.flash-word { font-size: 42px; font-weight: 800; color: var(--accent2); word-break: break-word; font-family: var(--font-en); }
.flash-word.small { font-size: 28px; }
.flash-hint { color: var(--muted); margin-top: 16px; font-size: 14px; }
.flash-pos { color: var(--accent2); margin: 8px 0 4px; font-style: italic; }
.flash-zh { font-size: 26px; margin: 10px 0 16px; }
.flash-ex { font-size: 16px; line-height: 1.7; color: var(--text); font-family: var(--font-en); }
.flash-ex .ex-zh { color: var(--muted); font-size: 14px; }
.flash-btns { display: flex; gap: 14px; margin-top: 18px; }
.flash-btns .btn { flex: 1; padding: 18px; font-size: 20px; }
.hidden { display: none !important; }

.quiz-prompt {
  background: var(--panel); border: 1px solid #dfe4ea; border-radius: 16px;
  padding: 26px 20px; text-align: center; font-size: 26px; font-weight: 700;
  line-height: 1.6;
}
.quiz-sub { text-align: center; color: var(--muted); margin: 12px 0 18px; font-size: 14px; }
.quiz-opts { display: flex; flex-direction: column; gap: 12px; }

.lst-play { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 6px; }
.lst-icon { font-size: 48px; }
#lstReplay:disabled { opacity: .5; }
.tts-help { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; }
.tts-help.warn { background: #fff4e0; border: 1px solid #e6b062; border-radius: 10px; padding: 10px 12px; color: #7a4a12; }
.tts-lead { margin-bottom: 6px; }
.tts-lead b, .tts-help.warn b { color: #b5560f; }
.tts-help summary { cursor: pointer; color: var(--accent2); font-weight: 600; }
.tts-help:not(.warn) { text-align: center; }
.tts-help:not(.warn) summary { color: var(--ink-55); font-weight: 500; font-size: 13px; }
.tts-steps { text-align: left; margin-top: 6px; }
.tts-steps p { margin: 6px 0; }
.tts-steps a { color: var(--accent2); text-decoration: underline; font-weight: 600; }
.tts-note { color: var(--ink-55); font-size: 12.5px; }
body.dark .tts-help.warn { background: rgba(230,176,98,.14); border-color: rgba(230,176,98,.5); color: #e6c088; }
body.dark .tts-help.warn b, body.dark .tts-lead b { color: #f0b878; }
/* ── 統一選項樣式：左側字母徽章 + 靠左內文 ── */
.btn.opt {
  background: #eef4f8; color: var(--text); font-weight: 500;
  display: flex; align-items: center; gap: 12px; text-align: left;
}
.btn.opt .opt-key {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(43,43,43,.1); color: var(--muted);
  font-weight: 800; font-size: 15px; font-family: var(--font-en);
}
.btn.opt .opt-text { font-family: var(--font-en); }
.btn.opt.right { background: var(--green); color: #0b3320; font-weight: 800; }
.btn.opt.right .opt-key { background: rgba(0,0,0,.18); color: #0b3320; }
.btn.opt.wrong { background: var(--red); color: #fff; }
.btn.opt.wrong .opt-key { background: rgba(0,0,0,.2); color: #fff; }
/* 無障礙：對錯不只靠顏色，加符號（色盲友善） */
.btn.opt.right::after { content: '✓'; margin-left: auto; font-weight: 900; font-size: 18px; }
.btn.opt.wrong::after { content: '✗'; margin-left: auto; font-weight: 900; font-size: 18px; }

.card-done { text-align: center; padding: 60px 0; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.card-done .big { font-size: 64px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.stat-tile { background: var(--panel); border: 1px solid #dfe4ea; border-radius: 16px; padding: 18px; text-align: center; }
.stat-num { font-size: 34px; font-weight: 800; color: var(--accent); }
.stat-cap { color: var(--muted); font-size: 13px; margin-top: 4px; }
.stat-bar-label { font-size: 14px; color: var(--muted); margin: 14px 0 6px; }
.stat-bar { position: relative; background: #eef4f8; border-radius: 10px; height: 22px; overflow: hidden; }
.stat-bar-fill { background: linear-gradient(90deg, var(--accent2), var(--green)); height: 100%; border-radius: 10px; }
.stat-bar span { position: absolute; right: 8px; top: 0; line-height: 22px; font-size: 12px; }
.stat-note { color: var(--muted); font-size: 13px; margin: 16px 0 24px; }
.io-box { display: flex; flex-wrap: wrap; gap: 10px; }
.io-box textarea {
  width: 100%; min-height: 80px; border-radius: 10px; border: 1px solid #dfe4ea;
  background: #e6edf4; color: var(--text); padding: 10px; font-size: 12px; font-family: monospace;
}

/* ── 文學家對戰 ── */
.bt-pick { display: grid; gap: 14px; margin-top: 20px; }
.bt-modegrid { grid-template-columns: 1fr; }
.bt-modecard {
  position: relative; min-height: 190px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(111,82,39,.48); border-radius: 18px; background: #171712; color: #fff;
  box-shadow: 0 14px 32px rgba(42,30,18,.2); text-align: left;
}
.bt-modecard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.bt-modecard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(8,8,7,.88) 100%); }
.bt-modecard:hover img { transform: scale(1.035); }
.bt-modecopy { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 17px; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.bt-modecopy b { font: 800 23px/1.15 var(--font-serif); letter-spacing: 2px; text-shadow: 0 2px 8px #000; }
.bt-modecopy small { font-size: 12px; color: rgba(255,247,220,.76); letter-spacing: 1px; }
.bt-oppgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.bt-oppcard {
  position: relative; min-height: 280px; overflow: hidden;
  background: #171712; border: 1px solid rgba(111,82,39,.48); border-radius: 18px;
  padding: 0; text-align: left; cursor: pointer; color: #fff;
  box-shadow: 0 8px 22px rgba(43,43,43,.14);
  transition: transform .12s, box-shadow .12s;
}
.bt-oppcard > .bt-portrait { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; box-shadow: none; }
.bt-oppveil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,8,10,.04) 30%, rgba(9,10,10,.92) 100%); }
.bt-oppcopy { position: absolute; z-index: 2; left: 15px; right: 15px; bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.bt-oppcopy .bt-name { margin: 0; color: #fff8df; font-size: 19px; text-shadow: 0 2px 7px #000; }
.bt-oppcopy .bt-tier { margin: 0; background: rgba(11,11,9,.72); border: 1px solid rgba(242,220,159,.35); color: #f0d894; }
.bt-opptaunt { flex-basis: 100%; font-size: 10px; line-height: 1.35; color: rgba(255,249,229,.68); }
.bt-oppcard.locked > .bt-portrait { filter: grayscale(1) brightness(.48); }
.bt-oppcard.locked .bt-oppveil { background: linear-gradient(180deg, rgba(8,8,8,.48), rgba(8,8,8,.94)); }
.bt-oppcard:active { transform: scale(.97); }
.bt-oppcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(74,123,166,.18); }
.bt-face { font-size: 40px; }
.bt-face.big { font-size: 54px; }
.bt-name { font-family: var(--font-serif); font-weight: 700; margin-top: 6px; letter-spacing: 1px; }
.bt-tier { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 12px; border-radius: 99px; margin-top: 4px; letter-spacing: 2px; }
.t-入門 { background: rgba(111,159,201,.16); color: #4a7ba6; }
.t-進階 { background: rgba(74,158,111,.16); color: #3a7d57; }
.t-高手 { background: rgba(209,150,84,.18); color: #a06a2c; }
.t-宗師 { background: rgba(154,143,196,.20); color: #6a5da4; }

.bt-arena { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 16px; }
.bt-arena .bt-side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bt-arena .foe { order: 0; }
.bt-arena .me { order: 2; }
.bt-arena .bt-log { order: 1; }
.bt-hp {
  width: 100%; height: 20px; border-radius: 10px; background: #e6edf4;
  border: 1px solid #dfe4ea; position: relative; overflow: hidden;
}
.bt-hp-fill { height: 100%; background: linear-gradient(90deg, var(--green), #7bffb0); transition: width .4s; }
.bt-hp.low .bt-hp-fill { background: linear-gradient(90deg, var(--red), #ff9c8a); }
.bt-hp span { position: absolute; right: 8px; top: 1px; font-size: 12px; font-weight: 700; }
.bt-hp.active { box-shadow: 0 0 0 2px var(--accent); }
.bt-log {
  text-align: center; font-size: 14px; color: var(--accent); min-height: 20px;
  padding: 6px 4px; font-weight: 600;
}
.bt-turn { text-align: center; font-weight: 700; color: var(--accent2); margin-bottom: 10px; }
.bt-q .quiz-prompt { margin-top: 4px; }
.bt-quote { color: var(--muted); font-style: italic; margin: 12px 0; padding: 0 12px; }
.bt-portrait {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(111,159,201,.35); background: var(--panel);
  box-shadow: 0 4px 12px rgba(43,43,43,.08);
}
.bt-portrait.big { width: 120px; height: 120px; }
.bt-face-emoji { font-size: 40px; }
.bt-face-emoji.big { font-size: 54px; }

/* 文學家對戰：雙方圖片撐滿戰場，所有資料直接疊在立繪上 */
.bt-literary-arena {
  --lit-gold: #d7b65d; display: block; overflow: hidden; position: relative;
  border: 1px solid rgba(111,82,39,.62); border-radius: 18px; background: #15130f;
  box-shadow: 0 18px 42px rgba(42,28,15,.24); color: #fff8df;
}
.bt-literary-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(310px, 49vw, 430px); }
.bt-duelist { position: relative; min-width: 0; overflow: hidden; isolation: isolate; }
.bt-duelist:first-child { border-right: 1px solid rgba(216,183,95,.48); }
.bt-duelist > .bt-portrait, .bt-duelist > .bt-player-art {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; border-radius: 0;
  object-fit: cover; display: block; filter: saturate(.9) contrast(1.06); transform: scale(1.015);
}
.bt-duelist.foe > .bt-portrait { object-position: 50% 30%; }
.bt-duelist.me > .bt-player-art { object-position: 50% 35%; }
.bt-duelist-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,7,5,.02) 28%, rgba(10,8,5,.38) 58%, rgba(8,7,5,.96) 100%); }
.bt-duelist.foe .bt-duelist-shade { background: linear-gradient(180deg, rgba(64,16,12,.04) 24%, rgba(72,19,14,.42) 58%, rgba(34,10,8,.97) 100%); }
.bt-duelist.me .bt-duelist-shade { background: linear-gradient(180deg, rgba(8,37,52,.03) 24%, rgba(8,45,62,.4) 58%, rgba(4,23,32,.97) 100%); }
.bt-duelist-copy { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 13px; }
.bt-duelist-copy .bt-camp { display: block; margin-bottom: 4px; color: rgba(255,244,210,.68); }
.bt-duelist-copy .bt-name { display: flex; align-items: center; gap: 6px; margin: 0 0 7px; color: #fff7db; font-size: 20px; text-shadow: 0 2px 7px #000; }
.bt-duelist-copy .bt-name small { font: 700 10px/1 var(--font-sans); color: #f0cf72; }
.bt-duelist-copy .bt-tier { margin: 0; background: rgba(0,0,0,.48); border: 1px solid rgba(216,183,95,.5); color: #f0d589; }
.bt-literary-vs { position: absolute; z-index: 4; left: 50%; top: 42%; transform: translate(-50%,-50%) rotate(-7deg); width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(240,206,112,.8); border-radius: 50%; background: radial-gradient(circle,#74400f 0 30%,#21150b 68%); color: #ffdf87; font: 900 17px/1 var(--font-serif); box-shadow: 0 0 22px rgba(255,176,33,.38); text-shadow: 0 0 8px #ff9e16; }
.bt-literary-arena > .bt-log { margin: 0; padding: 10px 14px; min-height: 40px; border-top: 1px solid rgba(216,183,95,.36); background: rgba(15,13,9,.96); color: #f0d37d; }
.bt-literary-arena .bt-hp { height: 17px; border-color: rgba(234,210,145,.48); background: rgba(4,5,5,.7); }
.bt-literary-arena .bt-hp span { color: #fff8df; text-shadow: 0 1px 2px #000; }
.bt-literary-arena .bt-assist { display: flex; align-items: center; gap: 7px; margin: 0 0 7px; color: rgba(255,249,228,.86); }
.bt-literary-arena .bt-assist img { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid rgba(216,183,95,.58); background: #ede7d8; }
.bt-literary-arena .bt-assist span { font-size: 10px; line-height: 1.15; }
.bt-literary-arena .bt-assist small { color: rgba(255,249,228,.6); }

/* ── 字綴心智圖 ── */
.af-tabs { display: flex; gap: 8px; margin: 6px 0 12px; }
.af-tab {
  flex: 1; padding: 10px; border-radius: 12px; border: 1px solid #dfe4ea;
  background: var(--panel); color: var(--muted); font-family: inherit; font-size: 15px; cursor: pointer;
}
.af-tab.on { background: var(--accent); color: #333; font-weight: 700; border-color: var(--accent); }
.af-tab span { display: inline-block; margin-left: 4px; font-size: 12px; opacity: .8; }
.af-hint { text-align: center; color: var(--muted); font-size: 13px; margin: 8px 0; }
.af-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.af-card {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  background: var(--panel); border: 1px solid #dfe4ea; border-radius: 12px;
  padding: 12px; cursor: pointer; color: var(--text); text-align: left;
}
.af-card:active { transform: scale(.97); }
.af-form { font-size: 20px; font-weight: 700; color: var(--accent2); }
.af-form.big { font-size: 26px; }
.af-mean { font-size: 13px; color: var(--text); }
.af-count { font-size: 11px; color: var(--muted); }
.af-maphead { text-align: center; margin: 4px 0 2px; }
.af-maphead .af-mean { display: block; color: var(--muted); margin-top: 2px; }
.af-back { margin-bottom: 6px; }
.af-svg { width: 100%; height: auto; display: block; }
/* 水彩心智圖：墨線弧輻條＋暈染中心＋水彩點 */
.af-edge { stroke: rgba(43,43,43,.35); stroke-width: 1.3; fill: none;
  stroke-linecap: round; stroke-dasharray: 1 0; }
.af-dot { opacity: .5; }
.af-dot.d0 { fill: #9dbcd9; } .af-dot.d1 { fill: #e8d9b8; } .af-dot.d2 { fill: #b8cfe4; }
.af-center circle { fill: url(#afWash); opacity: .5; }
.af-center .af-cinner { fill: url(#afWash); opacity: 1; }
.af-ctext { text-anchor: middle; dominant-baseline: middle; fill: #fff; font-weight: 700;
  font-size: 16px; font-family: var(--font-serif); letter-spacing: .5px;
  paint-order: stroke; stroke: rgba(43,43,43,.25); stroke-width: 2px; }
.af-node { cursor: pointer; }
.af-node rect { fill: #fff; stroke: rgba(43,43,43,.55); stroke-width: 1.3;
  filter: drop-shadow(0 2px 3px rgba(43,43,43,.12)); }
.af-node:hover rect { stroke: var(--accent2); stroke-width: 2; }
.af-node:active rect { fill: var(--paper2); }
.af-node text { text-anchor: middle; dominant-baseline: middle; fill: var(--ink);
  font-size: 12.5px; font-family: var(--font-en); font-weight: 600; }
.af-addall { display: block; width: 100%; margin: 12px 0; }
.af-detail {
  background: var(--panel); border: 1px solid #dfe4ea; border-radius: 12px; padding: 14px; margin-top: 4px;
}
.af-dword { font-size: 20px; font-weight: 700; }
.af-pos { font-size: 12px; color: var(--accent2); font-weight: 400; }
.af-dzh { color: var(--accent); margin: 4px 0; }
.af-dex { font-size: 14px; margin-top: 6px; }
.af-dexz { font-size: 13px; color: var(--muted); }
.af-detail .af-add1 { margin-top: 10px; }

/* ── 發音鈕 ── */
.spk {
  border: none; background: rgba(74,194,255,.16); color: var(--accent2);
  border-radius: 8px; padding: 2px 7px; font-size: 15px; cursor: pointer;
  vertical-align: middle; line-height: 1.4; transition: transform .08s, background .12s;
}
.spk:hover { background: rgba(74,194,255,.3); }
.spk:active { transform: scale(.88); }

/* ── 回報鈕（緊跟在發音鈕旁，回報單字發音／解釋有問題） ── */
.rpt-btn {
  border: none; background: rgba(255,107,107,.14); color: #d9534f;
  border-radius: 8px; padding: 2px 6px; font-size: 12px; cursor: pointer;
  vertical-align: middle; line-height: 1.4; margin-left: 2px; opacity: .55;
  transition: transform .08s, background .12s, opacity .12s;
}
.rpt-btn:hover { background: rgba(255,107,107,.3); opacity: 1; }
.rpt-btn:active { transform: scale(.88); }

/* ── 小晶片按鈕（翻卡方向／腔調／分級） ── */
.chip {
  border: 1px solid #dfe4ea; background: var(--panel); color: var(--text);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-family: inherit; cursor: pointer;
}
.chip:active { transform: scale(.96); }
.flash-ctrl { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.flash-zh.big { font-size: 32px; font-weight: 800; color: var(--accent); }

/* ── 高中分級篩選列 ── */
.lvl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 2px 2px; }
.lvl-lab { font-size: 12px; letter-spacing: 2px; color: var(--muted); margin-right: 2px; }
.lvl-chip {
  border: 1px solid #dfe4ea; background: var(--panel); color: var(--muted);
  border-radius: 999px; padding: 5px 12px; font-size: 13px; font-family: inherit; cursor: pointer;
}
.lvl-chip.on { background: var(--accent2); color: #06283a; font-weight: 700; border-color: var(--accent2); }

/* ── 錯題複習選單卡 ── */
.btn.main.c-wrong { --c: var(--red); }

/* ── 自測答完回饋 ── */
.qz-word { font-size: 20px; font-weight: 700; margin-top: 8px; font-family: var(--font-en); }
.qz-zh { color: var(--accent); margin: 2px 0 6px; }
.qz-ex { font-size: 15px; line-height: 1.7; font-family: var(--font-en); }
.qz-next { display: block; width: 100%; margin-top: 12px; }

/* ── 會考考古題 ── */
.ex-passage-bar { font-size: 12px; color: var(--muted); margin-bottom: 6px; font-family: var(--cjk); }
.ex-empty { text-align: center; padding: 40px 12px; }
.ex-empty .big { font-size: 54px; }
.ex-empty p { margin-top: 10px; }
.ex-empty .ex-sub { color: var(--muted); font-size: 14px; }
.ex-filter { display: grid; gap: 14px; margin-top: 12px; }
.ex-frow { display: flex; align-items: center; gap: 10px; }
.ex-frow span { width: 44px; color: var(--muted); }
.ex-frow select {
  flex: 1; padding: 10px; border-radius: 10px; background: var(--panel);
  color: var(--text); border: 1px solid #dfe4ea; font-size: 16px; font-family: inherit;
}
.ex-filter { max-width: 460px; margin-left: auto; margin-right: auto; }
.ex-hint { text-align: center; color: var(--muted); font-size: 13px; margin-top: 12px; }
.ex-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ex-top .ex-back { font-size: 14px; padding: 8px 14px; }
.ex-meta { font-size: 13px; color: var(--muted); }
.ex-passage {
  background: var(--panel); border: 1px solid #dfe4ea; border-radius: 12px;
  padding: 14px 16px; font-size: 15px; line-height: 1.75; margin-bottom: 10px;
  max-height: 42vh; overflow-y: auto; font-family: var(--font-serif); white-space: pre-line;
}
/* 桌機雙欄：左 passage、右題目＋選項 */
.ex-qwrap.has-passage { display: block; }
.ex-qwrap:not(.has-passage) { max-width: 620px; margin: 0 auto; }
@media (min-width: 860px) {
  .ex-qwrap.has-passage {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;
  }
  .ex-qwrap.has-passage .ex-passage {
    margin-bottom: 0; max-height: calc(100vh - 160px); position: sticky; top: 16px;
  }
}
.ex-img { max-width: 100%; border-radius: 10px; margin-bottom: 10px; }
.ex-stem { font-size: 17px; line-height: 1.6; margin-bottom: 14px; font-family: var(--font-en); }
.ex-opts { display: grid; gap: 10px; }
.ex-opt { background: var(--panel); color: var(--text); border: 1px solid #dfe4ea; }
.ex-opt.right { background: var(--green); color: #0b3320; }
.ex-opt.wrong { background: var(--red); color: #fff; }
.ex-fb { border-radius: 12px; padding: 12px; margin: 12px 0; }
.ex-fb.ok { background: rgba(61,220,132,.12); border: 1px solid var(--green); }
.ex-fb.no { background: rgba(255,107,107,.12); border: 1px solid var(--red); }
.ex-verdict { font-weight: 700; }
.ex-explain { font-size: 14px; line-height: 1.6; margin-top: 8px; color: var(--text); }
.ex-addkw { margin-top: 10px; }
.ex-next { display: block; width: 100%; }

/* ── 無障礙：鍵盤焦點可見 + 拼寫題輸入框 ── */
:focus-visible { outline: 3px solid #6f9fc9; outline-offset: 2px; border-radius: 6px; }
.spk:focus-visible, .btn:focus-visible { outline-offset: 3px; }
.spell-row { display: flex; gap: 10px; margin-top: 6px; }
.spell-in {
  flex: 1; padding: 14px 16px; font-size: 20px; letter-spacing: 1px;
  font-family: var(--font-en); border-radius: 12px;
  border: 2px solid rgba(43,43,43,.18); background: #eef4f8; color: var(--text);
}
.spell-in::placeholder { color: var(--muted); font-size: 14px; letter-spacing: 0; }
.spell-in.right { border-color: var(--green); background: rgba(93,224,160,.14); }
.spell-in.wrong { border-color: var(--red); background: rgba(255,107,107,.14); }
.spell-go { flex: none; }
.qz-hint { font-size: 13px; opacity: .85; }

/* ── 詞彙深度：英英定義 + 搭配詞 ── */
.en-deep { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(43,43,43,.16); }
.en-def { font-family: var(--font-en); font-size: 14px; line-height: 1.5; color: var(--text); }
.en-collo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.en-chip {
  font-family: var(--font-en); font-size: 12.5px; padding: 3px 9px; border-radius: 999px;
  background: rgba(111,159,201,.14); border: 1px solid rgba(111,159,201,.35); color: var(--accent2);
}

/* ════════ 遊戲化 UI（八角） ════════ */
/* 英雄橫幅 */
.vg-strip { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; margin-bottom: 12px; border-radius: 16px; cursor: pointer;
  background: var(--panel); box-shadow: 0 6px 18px rgba(43,43,43,.06);
  border: 1px solid var(--line); border-left: 5px solid var(--accent); color: var(--text); }
.vg-av { font-size: 34px; line-height: 1; flex: none; background: none; border: none; }
.vg-info { flex: 1; min-width: 0; }
.vg-line1 { font-size: 14px; } .vg-line1 b { color: var(--accent2); }
.vg-line2 { font-size: 11px; color: var(--muted); }
.vg-xpbar { display: block; height: 8px; border-radius: 99px; background: rgba(43,43,43,.14); margin: 5px 0; overflow: hidden; }
.vg-xpbar > span { display: block; height: 100%; background: linear-gradient(90deg,#8fb8dd,#6f9fc9); border-radius: 99px; }
.vg-xpbar.big { height: 12px; }
.vg-coins { flex: none; font-size: 14px; font-weight: 700; color: var(--accent2); font-family: var(--font-en); }
/* 每日面板 */
.vg-daily { background: var(--panel); border: 1px solid rgba(43,43,43,.08); border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; }
.vg-daily-head { font-weight: 700; margin-bottom: 8px; font-size: 15px; }
.vg-theme { font-size: 12.5px; padding: 6px 10px; margin: 2px 0 8px; background: rgba(232,160,32,.12);
  border: 1px dashed #e8a020; border-radius: 10px; color: var(--ink); }
.vg-theme-desc { color: var(--muted); }
.vg-quest { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.vg-q-ico { font-size: 20px; flex: none; }
.vg-q-body { flex: 1; min-width: 0; }
.vg-q-name { font-size: 13px; } .vg-quest.done .vg-q-name { color: var(--green); }
.vg-q-bar { display: block; height: 6px; border-radius: 99px; background: rgba(43,43,43,.12); margin-top: 4px; overflow: hidden; }
.vg-q-bar > span { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.vg-q-prog { font-size: 12px; color: var(--muted); font-family: var(--font-en); flex: none; }
.vg-q-claimed { font-size: 12px; color: var(--muted); flex: none; }
.vg-q-claim { flex: none; padding: 5px 12px; border-radius: 99px; border: none; cursor: pointer;
  background: #6f9fc9; color: #3a2b00; font-weight: 800; font-size: 12px; }
.vg-mystery { width: 100%; margin-top: 8px; padding: 10px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(120deg,#4a3aa0,#7a5cff); border: none; color: #fff; font-weight: 700; font-size: 14px; }
.vg-mystery.opened { background: rgba(43,43,43,.08); color: var(--muted); }
/* toast */
#vg-toasts { position: fixed; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 60; pointer-events: none; }
.vg-toast { background: #2b2b2b; color: #fff; border: 1px solid rgba(111,159,201,.4); padding: 10px 16px;
  border-radius: 99px; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(12px); transition: .35s; max-width: 90vw; }
.vg-toast.show { opacity: 1; transform: translateY(0); }
/* 升級慶祝 */
.vg-levelup { position: fixed; inset: 0; background: rgba(6,12,30,.82); z-index: 70; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vg-lu-card { text-align: center; animation: luPop .5s cubic-bezier(.2,1.4,.5,1); }
.vg-lu-ico { font-size: 64px; }
.vg-lu-t { font-size: 30px; font-weight: 900; color: var(--accent2); margin-top: 6px; }
.vg-lu-title { font-size: 22px; font-weight: 800; margin-top: 4px; }
.vg-lu-sub { color: var(--muted); margin-top: 14px; font-size: 13px; }
@keyframes luPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* 英雄檔案 */
.hero-card { display: flex; gap: 16px; align-items: center; background: var(--panel); border-radius: 18px; padding: 16px; border: 1px solid rgba(111,159,201,.2); }
.hero-av { font-size: 52px; background: rgba(43,43,43,.06); border: 2px solid rgba(111,159,201,.35); border-radius: 16px; width: 78px; height: 78px; flex: none; cursor: pointer; }
.hero-meta { flex: 1; min-width: 0; }
.hero-nick { width: 100%; background: rgba(43,43,43,.06); border: 1px solid rgba(43,43,43,.14); border-radius: 8px; color: var(--text); padding: 6px 10px; font-size: 16px; font-weight: 700; }
.hero-lv { margin: 6px 0 2px; } .hero-lv b { color: var(--accent2); }
.hero-xp { font-size: 12px; color: var(--muted); }
.hero-wallet { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; font-weight: 700; }
.hero-wallet span:first-child { color: var(--accent2); }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.hero-shieldhint { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.hero-sec { font-weight: 800; margin: 20px 0 10px; font-size: 15px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr)); gap: 10px; }
.badge { text-align: center; padding: 10px 6px; border-radius: 12px; background: rgba(43,43,43,.05); border: 1px solid rgba(43,43,43,.08); }
.badge.lock { opacity: .5; }
.badge.got { background: rgba(111,159,201,.1); border-color: rgba(111,159,201,.35); }
.badge-ico { display: block; font-size: 26px; }
.badge-name { display: block; font-size: 12px; font-weight: 700; margin-top: 2px; }
.badge-desc { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.hero-share { display: flex; gap: 10px; }
.share-box { width: 100%; min-height: 76px; margin: 10px 0; background: var(--panel); color: var(--muted); border: 1px solid rgba(43,43,43,.12); border-radius: 10px; padding: 10px; font-size: 12.5px; font-family: var(--font-en); resize: vertical; }
/* 頭像選擇 modal */
.av-modal { position: fixed; inset: 0; background: rgba(6,12,30,.8); z-index: 70; display: flex; align-items: center; justify-content: center; padding: 20px; }
.av-panel { background: var(--panel); border-radius: 18px; padding: 20px; max-width: 340px; width: 100%; border: 1px solid rgba(111,159,201,.3); }
.av-title { font-weight: 800; text-align: center; margin-bottom: 14px; }
.av-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.av-opt { font-size: 32px; padding: 8px; border-radius: 12px; background: rgba(43,43,43,.06); border: 2px solid transparent; cursor: pointer; }
.av-opt.on { border-color: #6f9fc9; background: rgba(111,159,201,.15); }
/* 限時衝刺 */
.sp-intro { text-align: center; padding-top: 10px; }
.sp-big { font-size: 44px; font-weight: 900; color: var(--accent2); }
.sp-best { margin: 12px 0; } .sp-best b { color: var(--accent2); font-family: var(--font-en); }
.sp-chal { width: 100%; margin: 10px 0; background: var(--panel); border: 1px solid rgba(43,43,43,.14); border-radius: 10px; padding: 10px; color: var(--text); font-family: var(--font-en); font-size: 12px; }
.sp-hud { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sp-timer { position: relative; flex: 1; height: 24px; border-radius: 99px; background: rgba(43,43,43,.1); overflow: hidden; }
.sp-timer-fill { height: 100%; background: linear-gradient(90deg,var(--green),#8fb8dd); transition: width 1s linear; }
.sp-timer.danger .sp-timer-fill { background: var(--red); }
/* 剩 10 秒告急：1Hz 淡入淡出（遠低於 3Hz 光敏安全門檻）；reduced-motion／簡化／IEP 無限時模式一律改靜態變色不閃 */
.sp-timer.danger { animation: spDangerPulse 1s ease-in-out infinite; }
@keyframes spDangerPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .sp-timer.danger { animation: none; }
  .sp-timer.danger .sp-timer-fill { background: #a8433d; }
}
body.simplified .sp-timer.danger,
body.iep-notimer .sp-timer.danger {
  animation: none;
}
body.simplified .sp-timer.danger .sp-timer-fill,
body.iep-notimer .sp-timer.danger .sp-timer-fill { background: #a8433d; }
.sp-timer span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; font-family: var(--font-en); }
.sp-score { font-weight: 800; font-size: 16px; color: var(--accent2); flex: none; font-family: var(--font-en); }
/* 對戰鎖定 */
.bt-oppcard.locked { opacity: .55; }
.bt-locknote { font-size: 12px; color: var(--accent2); margin-top: 2px; }
.bt-lockhint { text-align: center; color: var(--muted); font-size: 12px; margin-top: 12px; }

/* ── 登入日曆 ── */
.vg-cal { margin-bottom: 10px; }
.vg-cal-strip { display: flex; justify-content: space-between; gap: 4px; }
.vg-cal-day { flex: 1; text-align: center; font-size: 15px; padding: 4px 0; border-radius: 8px; background: rgba(43,43,43,.04); }
.vg-cal-day i { display: block; font-size: 10px; font-style: normal; color: var(--muted); margin-bottom: 1px; }
.vg-cal-day.on { background: rgba(111,159,201,.14); }
.vg-cal-day.today { outline: 2px solid #6f9fc9; }
.vg-cal-note { text-align: center; font-size: 12px; color: var(--muted); margin-top: 6px; } .vg-cal-note b { color: var(--accent2); }
.vg-disclaimer { text-align: center; font-size: 12px; color: var(--muted); font-family: var(--cjk); }

/* ── 加星鈕 ── */
.mini-star { background: none; border: none; cursor: pointer; font-size: 18px; padding: 8px; vertical-align: middle; }
.mini-star.on { filter: drop-shadow(0 0 4px rgba(111,159,201,.6)); }
/* 觸控目標擴大：透明偽元素向外延伸 8px 命中區（不改視覺） */
.spk, .mini-star, .chip, .lvl-chip, .vg-q-claim { position: relative; }
.spk::after, .mini-star::after, .chip::after, .lvl-chip::after, .vg-q-claim::after {
  content: ''; position: absolute; inset: -8px; }

/* ── 查單字 ── */
.sr-box { position: sticky; top: 0; z-index: 5; padding: 4px 0 8px; background: linear-gradient(var(--bg,#f7f3ea) 70%, transparent); }
.sr-in { width: 100%; padding: 12px 14px; font-size: 16px; border-radius: 12px; border: 1px solid rgba(43,43,43,.16); background: var(--panel); color: var(--text); }
.sr-hint { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.sr-empty { text-align: center; color: var(--muted); padding: 30px 0; }
.sr-card { background: var(--panel); border: 1px solid rgba(43,43,43,.08); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.sr-top { display: flex; align-items: center; justify-content: space-between; }
.sr-word { font-size: 19px; font-weight: 700; font-family: var(--font-en); }
.sr-star { background: none; border: none; font-size: 22px; cursor: pointer; }
.sr-pos { color: var(--muted); font-size: 14px; margin: 4px 0; }
.sr-ex { font-family: var(--font-en); font-size: 14px; line-height: 1.5; }
.sr-card .sr-add { margin-top: 10px; }

/* ── 設定切換 ── */
.hero-settings { display: flex; gap: 10px; flex-wrap: wrap; }
.set-toggle { flex: 1; min-width: 130px; padding: 12px; border-radius: 12px; cursor: pointer;
  background: rgba(43,43,43,.05); border: 1px solid rgba(43,43,43,.12); color: var(--text); font-size: 14px; }
.set-toggle b { color: var(--accent2); }

/* ── 字級放大 ── */
body.fs-large { font-size: 112%; }
/* 主選單／對戰／城鎮主要文字（px、rem 不吃 body %，需明列）約 +12% */
body.fs-large .btn.main { font-size: 22px; }
body.fs-large .menu-group .btn.main .m-sub { font-size: 13.5px; }
body.fs-large .wc-mcard-title { font-size: 19px; }
body.fs-large .wc-mcard-sub { font-size: 13.5px; }
body.fs-large .wc-stage-name { font-size: 28px; }
body.fs-large .bt-name { font-size: 18px; }
body.fs-large .stat-num { font-size: 38px; }
body.fs-large .tw-bubble { font-size: 1.06rem; }
body.fs-large .tw-bopt { font-size: 1rem; }
body.fs-large .tw-quest { font-size: 1rem; }
body.fs-large .quiz-prompt { font-size: 30px; }
body.fs-large .opt-text, body.fs-large .ex-stem, body.fs-large .ex-passage { font-size: 18px; }
body.fs-large .flash-word { font-size: 40px; }
body.fs-large .flash-zh, body.fs-large .qz-zh, body.fs-large .sr-pos { font-size: 19px; }
body.fs-large .sr-word, body.fs-large .sr-ex, body.fs-large .en-def, body.fs-large .qz-ex { font-size: 17px; }

/* ── 字級放大：特大（fs-xlarge，第三段，涵蓋範圍與 fs-large 相同，數值再拉高） ── */
body.fs-xlarge { font-size: 128%; }
body.fs-xlarge .btn.main { font-size: 25px; }
body.fs-xlarge .menu-group .btn.main .m-sub { font-size: 15px; }
body.fs-xlarge .wc-mcard-title { font-size: 22px; }
body.fs-xlarge .wc-mcard-sub { font-size: 15px; }
body.fs-xlarge .wc-stage-name { font-size: 32px; }
body.fs-xlarge .bt-name { font-size: 21px; }
body.fs-xlarge .stat-num { font-size: 44px; }
body.fs-xlarge .tw-bubble { font-size: 1.2rem; }
body.fs-xlarge .tw-bopt { font-size: 1.14rem; }
body.fs-xlarge .tw-quest { font-size: 1.14rem; }
body.fs-xlarge .quiz-prompt { font-size: 34px; }
/* 選項按鈕・題幹・例句・聽力題幹：特大模式的核心，不能只放大閃卡 */
body.fs-xlarge .opt-text, body.fs-xlarge .ex-stem, body.fs-xlarge .ex-passage,
body.fs-xlarge .quiz-sub, body.fs-xlarge .lst-icon { font-size: 20px; }
body.fs-xlarge .flash-word { font-size: 46px; }
body.fs-xlarge .flash-zh, body.fs-xlarge .qz-zh, body.fs-xlarge .sr-pos, body.fs-xlarge .flash-pos { font-size: 22px; }
body.fs-xlarge .flash-ex, body.fs-xlarge .sr-word, body.fs-xlarge .sr-ex, body.fs-xlarge .en-def, body.fs-xlarge .qz-ex { font-size: 19px; }

/* ── 易讀字型（dyslexia）：CSP 禁外連字型且無本地字型檔，改用系統易讀字型堆疊
   TODO：日後若允許放本地字型檔，可換成 OpenDyslexic 或 Lexend webfont（@font-face + data: URI 內嵌），
   目前先以加大字距／行高／字重取代專用易讀字型的效果 ── */
body.dyslexia, body.dyslexia .quiz-prompt, body.dyslexia .flash-word, body.dyslexia .opt-text,
body.dyslexia .flash-ex, body.dyslexia .ex-stem, body.dyslexia .ex-passage {
  font-family: Verdana, Tahoma, "Trebuchet MS", var(--cjk), sans-serif;
  letter-spacing: .04em;
  line-height: 1.9;
  font-weight: 500;
}
body.dyslexia .quiz-prompt, body.dyslexia .flash-word { font-weight: 700; }

/* ── 高對比模式 ── */
body.high-contrast { --bg: #ffffff; --panel: #ffffff; --text: #000000; --ink: #000000; --muted: #333333; --line: rgba(0,0,0,.4); }
body.high-contrast .btn { background: #000; color: #fff; border: 2px solid #000; }
body.high-contrast .btn.ghost { background: #fff; color: #000; border: 2px solid #000; }
body.high-contrast .btn.opt { background: #fff; color: #000; border: 2px solid #000; }
body.high-contrast .quiz-prompt, body.high-contrast .flash-card { border: 2px solid #000; }
body.high-contrast.dark { --bg: #000; --panel: #000; --text: #fff; --ink: #fff; --muted: #ddd; --line: rgba(255,255,255,.5); }
body.high-contrast.dark .btn { background: #fff; color: #000; border: 2px solid #fff; }
body.high-contrast.dark .btn.ghost, body.high-contrast.dark .btn.opt { background: #000; color: #fff; border: 2px solid #fff; }

/* ── 精簡／專注模式（simplified）：隱藏遊戲經濟層，只留核心練習
   資料來自 app.js card()/lockCard() 加上的 data-view、menu-group 加上的 data-group ── */
body.simplified .menu-group[data-group="battle"],
body.simplified .menu-group[data-group="spirit"],
body.simplified .menu-group[data-group="city"] { display: none; }
/* 練習分組：只留閃卡／自測／聽力／弱字本／作業指派相關；收起寫作坊・限時衝刺・錯題複習等進階/PvP 玩法 */
body.simplified .menu-group[data-group="practice"] [data-view="write"],
body.simplified .menu-group[data-group="practice"] [data-view="sprint"],
body.simplified .menu-group[data-group="practice"] [data-view="review"] { display: none; }
/* 英雄分組：留英雄檔案（設定入口在裡面），收起字幣商店・圖鑑・攻略 */
body.simplified .menu-group[data-group="hero"] [data-view="shop"],
body.simplified .menu-group[data-group="hero"] [data-view="dex"],
body.simplified .menu-group[data-group="hero"] [data-view="guide"] { display: none; }
/* 更多工具：查單字・字綴・會考・雲端／班級榜（排行榜）・收藏 先收起，定位前測／跟我讀／Pre-A 解碼保留 */
body.simplified .tools-fold [data-view="search"],
body.simplified .tools-fold [data-view="affix"],
body.simplified .tools-fold [data-view="exam"],
body.simplified .tools-fold [data-view="cloud"],
body.simplified .tools-fold [data-view="starred"] { display: none; }
/* 首頁每日任務面板（寶箱／市場／抽卡週挑戰）與英雄橫幅字幣徽章：遊戲經濟層 */
body.simplified .vg-daily { display: none; }
body.simplified .vg-strip .vg-coins { display: none; }
/* 英雄檔案內：段位／PvP 排名、字幣錢包（含商店捷徑）、產生挑戰連結（PvP） */
body.simplified .hero-rank,
body.simplified .hero-wallet { display: none; }
body.simplified #chalBtn { display: none; }
/* 英雄檔案分頁：班級榜／詞靈榜＝排行榜，收起只留本人戰績 */
body.simplified .hero-tab[data-htab="class"],
body.simplified .hero-tab[data-htab="pet"],
body.simplified .hero-tab[data-htab="town"] { display: none; }

/* ── 3D Pixel 配圖 ── */
.m-img { width: 46px; height: 46px; flex: none; border-radius: 10px; object-fit: cover; }
.hero-banner { display: block; width: 100%; max-width: 420px; margin: 0 auto 6px; border-radius: 18px; }
.hero.small.mascot { display: flex; align-items: center; justify-content: center; gap: 10px; }
.menu-mascot { width: 46px; height: 46px; border-radius: 12px; }
.stage-img { display: block; width: 92px; height: 92px; margin: 0 auto 8px; border-radius: 14px; object-fit: cover; }
.stage-emoji { font-size: 46px; display: block; margin-bottom: 6px; }
.btn.stage .stage-t { display: block; font-size: 17px; font-weight: 800; }
.hero-banner2 { display: block; width: 100%; max-width: 360px; margin: 0 auto 12px; border-radius: 16px; }

/* 雲端存檔／班級榜 */
.cloud-sec { background: rgba(43,43,43,.04); border: 1px solid rgba(43,43,43,.08); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.cloud-h { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.cloud-tip { font-size: 13px; color: var(--muted); margin: 0 0 10px; line-height: 1.5; }
.cloud-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cloud-row .btn { flex: 1; min-width: 130px; }
.cloud-input { flex: 1; min-width: 120px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(43,43,43,.18); background: #f4f7fa; color: var(--text); font-size: 16px; }
.cloud-input::placeholder { color: #9aa0a8; }
.cloud-input:focus-visible { outline: 2px solid #6f9fc9; outline-offset: 1px; }
.cloud-msg { font-size: 13px; margin-top: 4px; min-height: 18px; }
.cloud-msg.ok { color: var(--accent2); }
.cloud-msg.err { color: var(--red); }
.board-tbl { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.board-tbl thead, .board-tbl tbody { display: table; width: 100%; table-layout: fixed; }
.board-tbl th, .board-tbl td { padding: 7px 6px; text-align: center; border-bottom: 1px solid rgba(43,43,43,.08); }
.board-tbl th { color: var(--muted); font-weight: 700; font-size: 12px; }
.board-tbl td:nth-child(2) { text-align: left; }
.board-tbl tr.me { background: rgba(111,159,201,.18); font-weight: 800; }
.qw-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.qw-row { background: var(--panel); border: 1px solid rgba(43,43,43,.08); border-radius: 12px; padding: 10px 12px; }
.qw-word { font-family: var(--font-en); font-weight: 800; color: var(--accent2); font-size: 14px; }
.qw-sentence { font-size: 13.5px; margin: 3px 0; line-height: 1.5; }
.qw-nick { font-size: 11.5px; color: var(--muted); text-align: right; }

/* ═══════════════ 水彩墨插畫重皮（2026-07-11）═══════════════ */
/* 標題／英雄區：文學襯線 + 墨色 */
.wc-hero { text-align: center; padding: 8px 0 6px; }
.wc-banner { display: block; width: 100%; max-width: 480px; margin: 0 auto 4px; }
.wc-title { font-family: var(--font-serif); font-weight: 700; font-size: 46px; letter-spacing: 8px;
  color: var(--ink); background: none; -webkit-text-fill-color: currentColor; }
.wc-tagline { color: var(--muted); margin-top: 6px; font-size: 14.5px; letter-spacing: .5px; }

/* 切換學制頁：大圖為主的三張水彩文豪卡 */
.wc-stage-grid { display: flex; flex-direction: column; gap: 20px; margin-top: 14px; }
@media (min-width: 760px) { .wc-stage-grid { flex-direction: row; } }
.wc-stage {
  position: relative; display: block; width: 100%; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(43,43,43,.10); transition: transform .14s, box-shadow .14s;
  text-align: left; -webkit-tap-highlight-color: transparent;
}
.wc-stage:hover, .wc-stage:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(74,123,166,.24); }
.wc-stage:active { transform: translateY(-1px) scale(.995); }
.wc-stage-img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 22%; }
.wc-stage-cap {
  position: relative; padding: 16px 20px 20px;
  background: var(--panel); border-top: 1px solid var(--line);
}
.wc-stage-name { font-family: var(--font-serif); font-size: 25px; font-weight: 700; color: var(--ink); letter-spacing: 1px; white-space: nowrap; }
.wc-stage-amb { display: inline-block; margin-top: 4px; font-size: 13px; color: #fff; background: var(--accent2);
  padding: 2px 10px; border-radius: 99px; letter-spacing: 1px; white-space: nowrap; }
.wc-stage-sub { color: var(--muted); font-size: 14px; margin-top: 8px; }
.wc-enter { display: inline-block; margin-top: 10px; font-weight: 800; color: var(--accent2);
  border-bottom: 2px solid var(--accent2); padding-bottom: 1px; letter-spacing: 1px; white-space: nowrap; }

/* 選單頁：頂端水彩橫幅 */
.wc-menu-top { text-align: center; margin-bottom: 6px; }
.wc-menu-banner { display: block; width: 100%; max-width: 440px; margin: 0 auto 2px; border-radius: 16px; }
.wc-menu-top h1 { font-family: var(--font-serif); font-size: 30px; letter-spacing: 4px; color: var(--ink);
  background: none; -webkit-text-fill-color: currentColor; }

/* 選單卡：白紙卡 + 墨線 + 彩色筆刷左邊 */
.menu-group .btn.main { background: var(--panel); box-shadow: 0 4px 16px rgba(43,43,43,.06); border: 1px solid var(--line); border-left: 5px solid var(--c, var(--accent)); }
.menu-group .btn.main .m-ico { font-size: 26px; }
.btn.main.c-battle { background: linear-gradient(100deg, rgba(154,143,196,.14), #fff); font-size: 21px; }
.menu-glabel { font-family: var(--font-serif); font-size: 13px; letter-spacing: 3px; color: var(--accent2); text-transform: uppercase; }

/* 選單圖卡：上圖下字，西洋文豪水彩風，風格一致 */
.wc-mgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 10px; }
@media (min-width: 860px) { .wc-mgrid { grid-template-columns: repeat(3, 1fr); } }
.wc-mcard {
  position: relative; display: flex; flex-direction: column; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--panel);
  box-shadow: 0 8px 22px rgba(43,43,43,.07); transition: transform .14s, box-shadow .14s;
  text-align: left; -webkit-tap-highlight-color: transparent;
}
.wc-mcard:hover, .wc-mcard:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(74,123,166,.20); }
/* 無障礙：大卡鍵盤焦點外框（勿再 outline:none） */
.wc-stage:focus-visible, .wc-mcard:focus-visible { outline: 3px solid #4a7ba6; outline-offset: 3px; }
.wc-mcard:active { transform: translateY(-1px) scale(.995); }
.wc-mcard-img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: 50% 45%; background: var(--paper2); }
.wc-mcard-ph { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4/3; font-size: 46px; background: var(--paper2); }
.wc-mcard-cap { padding: 11px 13px 13px; }
.wc-mcard-title { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: .5px; }
.wc-mcard-sub { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.45; }
.wc-mcard-badge { position: absolute; top: 8px; right: 8px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; padding: 1px 9px; border-radius: 99px; box-shadow: 0 2px 8px rgba(208,90,84,.4); }
/* 落單的最後一張卡自動變全寬，版面不留空洞 */
.wc-mgrid .wc-mcard:last-child:nth-child(2n+1):not(.feature) { grid-column: 1 / -1; }
.wc-mgrid .wc-mcard:last-child:nth-child(2n+1):not(.feature) .wc-mcard-img { aspect-ratio: 16/7; }
@media (min-width: 860px) {
  .wc-mgrid .wc-mcard:last-child:nth-child(2n+1):not(.feature) { grid-column: auto; }
  .wc-mgrid .wc-mcard:last-child:nth-child(2n+1):not(.feature) .wc-mcard-img { aspect-ratio: 4/3; }
  .wc-mgrid .wc-mcard:last-child:nth-child(3n+1):not(.feature) { grid-column: 1 / -1; }
  .wc-mgrid .wc-mcard:last-child:nth-child(3n+1):not(.feature) .wc-mcard-img { aspect-ratio: 16/6; }
}
/* 未解鎖灰卡：灰階、鎖住不可點，解鎖本身是獎勵 */
.menu-card.locked {
  filter: grayscale(1); opacity: .55; cursor: default; pointer-events: none;
  border-style: dashed; box-shadow: none;
}
.menu-card.locked .wc-mcard-ph { font-size: 38px; }
.menu-card.locked .wc-mcard-sub { font-weight: 700; color: var(--muted); }
.wc-lock-bar { display: block; height: 6px; border-radius: 4px; background: var(--paper2); margin-top: 6px; overflow: hidden; }
.wc-lock-bar span { display: block; height: 100%; background: var(--accent2); border-radius: 4px; }
/* 更多工具：摺疊卡，點開才展開題庫工具群 */
.tools-fold summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 14px 16px; box-shadow: 0 8px 22px rgba(43,43,43,.07);
  font-family: var(--font-serif); font-weight: 700; font-size: 17px; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.tools-fold summary::-webkit-details-marker { display: none; }
.tools-fold summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .15s; }
.tools-fold[open] summary::after { transform: rotate(180deg); }
.tools-fold summary .tf-ico { font-size: 22px; }
.tools-fold summary .tf-sub { font-family: var(--font-sans, system-ui); font-weight: 400; font-size: 12px; color: var(--muted); }
/* 首頁到期複習入口 */
.dash-due {
  display: block; width: 100%; margin-top: 12px; padding: 12px 14px; cursor: pointer;
  border: 1px solid rgba(111,159,201,.4); border-radius: 12px;
  background: rgba(111,159,201,.12); color: var(--accent2, #4a7ba6);
  font-size: 14px; font-weight: 700; text-align: center;
}
.dash-due:hover { background: rgba(111,159,201,.2); }
/* 本週擂主 banner（對手卡上緣） */
.bt-oppcard.champ { border: 2px solid #e8a020; padding-top: 32px; }
.bt-champ {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  background: linear-gradient(90deg, #e8a020, #f0c060); color: #4a3200;
  font-size: 11px; font-weight: 800; padding: 3px 6px; text-align: center;
  border-radius: 12px 12px 0 0; letter-spacing: .5px;
}
.bt-oppcard { position: relative; }
/* 全寬特色卡（單一項目，如文學家對戰、英雄檔案） */
.wc-mcard.feature { grid-column: 1 / -1; }
.wc-mcard.feature .wc-mcard-img { aspect-ratio: 16/6; object-position: 50% 42%; }
.wc-mcard.feature .wc-mcard-title { font-size: 20px; }
.wc-mcard.feature .wc-mcard-sub { font-size: 13px; }
/* 底部導覽列 */
.wc-menu-navrow { display: flex; gap: 12px; margin-top: 18px; }
.wc-menu-navrow .btn.ghost { flex: 1; }

/* 通用水彩卡：上圖下文 */
.wc-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(43,43,43,.07); margin-bottom: 16px;
}
.wc-card-img { display: block; width: 100%; aspect-ratio: 16/6; object-fit: cover; object-position: 50% 42%; }
.wc-card-img.tall { aspect-ratio: 16/9; }
.wc-card-body { padding: 14px 16px 16px; }
.hero-sec { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--ink);
  letter-spacing: 2px; margin: 2px 0 10px; padding-bottom: 6px; border-bottom: 2px solid rgba(111,159,201,.35); }
.hero-sec b { color: var(--accent2); }

/* 首頁英雄橫幅頭像（水彩圖/emoji 紙底圈） */
.vg-av-img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid rgba(111,159,201,.35); background: var(--panel); }
.vg-av-img.big { width: 84px; height: 84px; }
.vg-av.paper { display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; font-size: 26px;
  background: var(--paper2); border: 2px solid rgba(111,159,201,.35); }
.vg-av.paper.big { width: 84px; height: 84px; font-size: 44px; }

/* 每日面板卡內圖不留邊距 */
.vg-daily.wc-card { padding: 0; }
.vg-daily.wc-card > .vg-cal, .vg-daily.wc-card > .vg-daily-head,
.vg-daily.wc-card > .vg-quest, .vg-daily.wc-card > .vg-mystery,
.vg-daily.wc-card > .vg-disclaimer { margin-left: 16px; margin-right: 16px; }
.vg-daily.wc-card > .vg-disclaimer { margin-bottom: 14px; }
.vg-daily.wc-card > .vg-cal { margin-top: 14px; }
.vg-daily.wc-card > .vg-mystery { margin-bottom: 16px; width: calc(100% - 32px); }
.vg-daily-head { font-family: var(--font-serif); letter-spacing: 2px; font-size: 16px;
  padding-bottom: 6px; border-bottom: 2px solid rgba(111,159,201,.35); }
.vg-daily-head .ok { color: var(--green); }
/* 任務列：紙圈圖示＋水彩進度條 */
.vg-q-ico { display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; font-size: 17px;
  background: var(--paper2); border: 1px solid rgba(111,159,201,.3); }
.vg-q-bar { background: var(--paper2); border: 1px solid var(--line); height: 7px; }
.vg-q-bar > span { background: linear-gradient(90deg, #8fb8dd, var(--accent2)); }
.vg-quest.done .vg-q-bar > span { background: linear-gradient(90deg, #8fc9a8, var(--green)); }
.vg-q-prog { font-family: var(--font-en); }
.vg-cal-day i { font-family: var(--font-serif); }
.vg-cal-day { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.vg-cal-day.on { background: rgba(111,159,201,.14); border-color: rgba(111,159,201,.4); }
.vg-cal-day.today { outline: 2px solid var(--accent2); }
.vg-mystery { background: var(--paper2); border: 1px solid rgba(111,159,201,.3); border-radius: 12px;
  color: var(--accent2); font-weight: 700; padding: 12px; cursor: pointer; font-size: 14px; }
.vg-mystery.opened { background: var(--panel); color: var(--text); }

/* 徽章牆：白紙卡＋水彩淡染 */
.badge { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.badge.got { background: rgba(111,159,201,.10); border-color: rgba(111,159,201,.45); }
.badge.lock { background: var(--bg); opacity: .75; }
.badge-name { font-family: var(--font-serif); font-weight: 700; letter-spacing: 1px; }

/* 設定／分享：白紙卡按鈕 */
.set-toggle { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 3px 10px rgba(43,43,43,.05); color: var(--text); }
.set-toggle b { color: var(--accent2); }
.share-box, .io-box textarea { background: #fbfaf7; border: 1px solid var(--line); color: var(--text); }

/* 戰績頁：serif 大數字白紙磚 */
.stat-tile { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(43,43,43,.05); }
.stat-num { font-family: var(--font-serif); color: var(--accent2); }
.stat-bar { background: var(--paper2); border: 1px solid var(--line); }
.stat-bar-fill { background: linear-gradient(90deg, #8fb8dd, var(--accent2)); }

/* ghost 導覽鈕：白紙卡感 */
.btn.ghost { background: var(--panel); border: 1px solid var(--line); color: var(--accent2);
  box-shadow: 0 3px 10px rgba(43,43,43,.05); }
.btn.ghost.wide { display: block; width: 100%; text-align: center; }

/* 連結／可點字加強（點擊感明確）：ghost 按鈕變墨線底線字 */
.menu-foot .btn.ghost, .topbar .back { font-weight: 700; }
.btn.ghost { border-color: var(--line); color: var(--accent2); }
.btn.ghost:hover { border-color: var(--accent2); background: rgba(111,159,201,.08); }

/* 主 CTA 按鈕：藍墨底白字 */
.btn { color: #fff; }
.btn.ghost { color: var(--accent2); }

/* ══ 留存層（玩家視角五大建議）：商店/圖鑑/段位/名言卡/開箱/墨潑/里程碑/FOMO ══ */

/* FOMO 警示：連續天數快斷 */
.vg-fomo { margin: 12px 14px 0; padding: 10px 14px; border-radius: 12px; background: rgba(196,90,60,.10);
  border: 1px solid rgba(196,90,60,.28); color: #a4482c; font-size: 14px; font-weight: 700; }

/* 週任務列：金冠色微染，與每日任務區隔 */
.vg-quest.week { background: rgba(214,166,66,.07); border: 1px solid rgba(214,166,66,.25); border-radius: 12px; }
.vg-quest.week .vg-q-bar span { background: linear-gradient(90deg, #e4c26e, #c99a35); }

/* 里程碑鉤子：結算畫面「就差一點」 */
.vg-milestone { display: flex; align-items: center; gap: 10px; margin: 14px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; text-align: left; }
.card-done .vg-milestone { margin: 14px auto; max-width: 420px; }
.vg-ms-ico { font-size: 22px; }
.vg-ms-body { flex: 1; min-width: 0; }
.vg-ms-text { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }

/* 開箱動畫：稀有度分色全螢幕卡 */
.vg-chest { position: fixed; inset: 0; z-index: 72; display: flex; align-items: center; justify-content: center;
  background: rgba(6,12,30,.72); cursor: pointer; animation: chestIn .25s ease; }
@keyframes chestIn { from { opacity: 0; } to { opacity: 1; } }
.vg-chest-card { background: var(--panel); border-radius: 20px; padding: 28px 34px; text-align: center; max-width: 320px;
  border: 2px solid var(--accent); box-shadow: 0 18px 50px rgba(0,0,0,.35); animation: chestPop .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes chestPop { from { transform: scale(.6); } to { transform: scale(1); } }
.vg-chest-ico { font-size: 52px; }
.vg-chest-r { font-family: var(--font-serif); font-size: 22px; font-weight: 800; margin-top: 6px; }
.vg-chest-loot { font-size: 16px; font-weight: 700; margin-top: 8px; color: var(--accent2); }
.vg-chest-extra { font-size: 13px; color: rgba(43,43,43,.65); margin-top: 4px; }
.vg-chest.rare .vg-chest-card { border-color: #7ea4d8; box-shadow: 0 0 0 6px rgba(126,164,216,.25), 0 18px 50px rgba(0,0,0,.35); }
.vg-chest.rare .vg-chest-r { color: #4a7ba6; }
.vg-chest.legendary .vg-chest-card { border-color: #c99a35; box-shadow: 0 0 0 8px rgba(214,166,66,.3), 0 18px 60px rgba(0,0,0,.4); }
.vg-chest.legendary .vg-chest-r { color: #a67c1e; }

/* 連擊大場面：全螢幕墨潑 */
.vg-combosplash { position: fixed; inset: 0; z-index: 71; pointer-events: none;
  display: flex; align-items: center; justify-content: center; animation: csFade 1.4s ease forwards; }
@keyframes csFade { 0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.vg-cs-ink { position: absolute; width: 70vmin; height: 70vmin; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, rgba(111,159,201,.5), rgba(74,123,166,.35) 55%, transparent 72%);
  filter: blur(2px); animation: csInk .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes csInk { from { transform: scale(.2); } to { transform: scale(1); } }
.vg-cs-text { position: relative; font-family: var(--font-serif); font-size: clamp(38px, 9vw, 72px); font-weight: 900;
  color: #fff; text-shadow: 0 2px 4px rgba(43,43,43,.5), 0 0 24px rgba(74,123,166,.8);
  animation: csText .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes csText { from { transform: scale(.4) rotate(-6deg); } to { transform: scale(1) rotate(-2deg); } }

/* 對戰段位條 */
.bt-rank { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--line); border-left: 5px solid #c99a35; border-radius: 14px;
  box-shadow: 0 3px 12px rgba(43,43,43,.06); }
.bt-rank-ico { font-size: 26px; }
.bt-rank-body { flex: 1; min-width: 0; }
.bt-rank-name { display: block; font-family: var(--font-serif); font-size: 15px; }
.bt-rank-next { display: block; font-size: 12px; color: rgba(43,43,43,.55); margin-top: 3px; }
.bt-rank-rule { font-size: 12px; color: rgba(43,43,43,.45); white-space: nowrap; }
.bt-rankdelta { margin: 10px auto 0; padding: 8px 16px; border-radius: 99px; display: inline-block; font-weight: 800; font-size: 14px; }
.bt-rankdelta.up { background: rgba(96,142,90,.12); color: #4c7a46; }
.bt-rankdelta.down { background: rgba(196,90,60,.10); color: #a4482c; }

/* 文豪名言卡集 */
.bt-quotes { margin-top: 18px; }
.qt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 10px; }
.qt-mini { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.qt-mini .bt-portrait { width: 52px; height: 52px; }
.qt-mini:hover { border-color: var(--accent2); }
.qt-mini.lock { opacity: .55; background: var(--paper2); }
.qt-lock { font-size: 30px; line-height: 52px; }
.qt-name { font-size: 12px; color: var(--ink); }
.qt-card { text-align: center; }
.qt-card .bt-portrait.big { margin: 0 auto 10px; }
.qt-quote { font-family: var(--font-serif); font-size: 19px; font-weight: 800; line-height: 1.6; color: var(--ink); }
.qt-author { margin-top: 8px; font-size: 14px; color: var(--accent2); font-weight: 700; }
.qt-story { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(43,43,43,.2);
  font-size: 13.5px; line-height: 1.9; color: var(--ink-70); }
.qt-unlock { margin: 10px auto 0; padding: 10px 16px; max-width: 420px; border-radius: 12px;
  background: rgba(214,166,66,.1); border: 1px solid rgba(214,166,66,.3); color: #8a6a1c; font-size: 14px; }

/* 字幣商店 */
.shop-wallet { color: #a67c1e; }
.shop-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.shop-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 8px rgba(43,43,43,.05); }
.shop-item.owned { background: rgba(111,159,201,.05); }
.shop-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--paper2);
  border: 1.5px solid rgba(43,43,43,.25); display: flex; align-items: center; justify-content: center; font-size: 22px; flex: none; }
.shop-body { flex: 1; min-width: 0; }
.shop-name { display: block; font-weight: 800; font-size: 15px; color: var(--ink); }
.shop-count { color: var(--accent2); }
.shop-desc { display: block; font-size: 12.5px; color: rgba(43,43,43,.55); margin-top: 2px; }
.shop-tag.on { font-size: 12px; font-weight: 800; color: #4c7a46; background: rgba(96,142,90,.12);
  padding: 5px 10px; border-radius: 99px; white-space: nowrap; }

/* 頭像框（商店永久裝飾）：預覽圈與實際頭像共用 */
.fr-frame_ink { box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px rgba(43,43,43,.75) !important; }
.fr-frame_gold { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #c99a35, 0 0 12px rgba(214,166,66,.55) !important; }
.fr-frame_laurel { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #6d8f5e, 0 0 12px rgba(109,143,94,.5) !important; }

/* 單字圖鑑 */
.dex-legend { display: flex; gap: 16px; font-size: 12.5px; color: rgba(43,43,43,.6); margin: 8px 0 14px; }
.dex-legend span { display: flex; align-items: center; gap: 5px; }
.dex-dot { width: 10px; height: 10px; border-radius: 3px; background: rgba(43,43,43,.1); display: inline-block; }
.dex-dot.seen { background: rgba(111,159,201,.5); }
.dex-dot.gold { background: #c99a35; }
.dex-sec { margin-bottom: 10px; }
.dex-head { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 't s a' 'b b a';
  gap: 4px 12px; align-items: center; width: 100%; text-align: left; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.dex-head:hover { border-color: var(--accent2); }
.dex-title { grid-area: t; font-family: var(--font-serif); font-weight: 800; font-size: 15px; color: var(--ink); }
.dex-stat { grid-area: s; font-size: 12.5px; color: rgba(43,43,43,.6); justify-self: end; }
.dex-gold { color: #a67c1e; }
.dex-arrow { grid-area: a; color: rgba(43,43,43,.4); }
.dex-bar { grid-area: b; position: relative; height: 6px; border-radius: 99px; background: var(--paper2);
  border: 1px solid var(--line); overflow: hidden; }
.dex-bar .seen { position: absolute; inset: 0 auto 0 0; background: rgba(111,159,201,.45); }
.dex-bar .gold { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #e4c26e, #c99a35); }
.dex-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(14px, 1fr)); gap: 3px;
  padding: 12px; background: var(--paper2); border: 1px solid var(--line); border-radius: 0 0 12px 12px; margin-top: -4px; }
.dex-cell { aspect-ratio: 1; border-radius: 3px; background: rgba(43,43,43,.08); cursor: pointer; }
.dex-cell.seen { background: rgba(111,159,201,.5); }
.dex-cell.gold { background: #c99a35; box-shadow: 0 0 4px rgba(214,166,66,.6); }
.dex-cell:hover { outline: 1.5px solid var(--accent2); }

/* 英雄檔案段位列 */
.hero-rank { margin: 10px 0 4px; padding: 9px 14px; border-radius: 12px; font-size: 14px;
  background: rgba(214,166,66,.08); border: 1px solid rgba(214,166,66,.25); color: var(--ink); }
.dex-wall[hidden] { display: none; }

/* ══════════ 詞靈系統 ══════════ */
/* 星圖 */
#pg-canvas { width: 100%; display: block; border-radius: 12px; background:
  radial-gradient(circle at 50% 45%, rgba(111,159,201,.10), rgba(43,43,43,.04) 70%);
  border: 1px solid var(--line); cursor: grab; touch-action: none; }
#pg-canvas:active { cursor: grabbing; }
.pg-hint { font-size: 13.5px; color: rgba(43,43,43,.72); margin: 4px 0 10px; line-height: 1.6; }
.pg-fam { margin-top: 12px; padding: 12px 14px; background: var(--paper2); border: 1px solid var(--line);
  border-radius: 12px; font-size: 14px; line-height: 1.7; }
.pg-fam-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pg-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px;
  background: var(--panel); border: 1px solid var(--line); font-size: 13px; cursor: pointer; color: var(--ink); }
.pg-tag span { font-size: 11px; color: rgba(43,43,43,.5); }
.pg-tag:hover { border-color: var(--accent2); }
.pg-fam .dex-wall { border-radius: 10px; margin-top: 8px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.pg-fam .dex-cell { aspect-ratio: auto; padding: 4px 6px; font-size: 12.5px; text-align: center;
  border-radius: 6px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-fam .dex-cell.gold { color: #fff; }
.pg-side .wc-card-body { padding-top: 14px; }
.pg-total { font-size: 15px; margin-bottom: 6px; }
.pg-sub { font-weight: 700; font-size: 13.5px; margin: 14px 0 6px; color: var(--ink-70); }
.pg-row { display: grid; grid-template-columns: 78px 1fr 52px auto; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 13px; }
.pg-form { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-bar { position: relative; height: 7px; border-radius: 99px; background: var(--paper2);
  border: 1px solid var(--line); overflow: hidden; }
.pg-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; }
.pg-bar .top { background: linear-gradient(90deg, #e4c26e, #c99a35); }
.pg-bar .weak { background: rgba(111,159,201,.55); }
.pg-num { text-align: right; color: var(--ink-55); font-variant-numeric: tabular-nums; }
.pg-pet { font-size: 12px; color: var(--ink-55); }
.pg-empty { font-size: 13px; color: var(--ink-55); padding: 6px 0; }
.btn.small { padding: 4px 12px; font-size: 13px; }

/* 詞靈清單/詳情 */
.pet-grid .wc-mcard.locked .wc-mcard-img,
.pet-sil { filter: grayscale(1) brightness(1.12) contrast(.82) opacity(.75); }
.pet-detail { position: relative; }
.pet-stage { max-height: 340px; object-fit: contain; background:
  radial-gradient(circle at 50% 60%, rgba(111,159,201,.12), transparent 70%); }
.pet-deco { position: absolute; top: 10px; right: 14px; font-size: 34px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.pet-deco.big { font-size: 56px; top: 6px; right: 10px; }
.pet-lv { font-size: 15px; color: var(--accent2); font-weight: 700; margin-left: 4px; }
.pet-stats { display: flex; gap: 10px; margin: 10px 0; }
.pet-stat { flex: 1; text-align: center; padding: 10px 6px; border-radius: 12px; background: var(--paper2);
  border: 1px solid var(--line); font-size: 12.5px; color: rgba(43,43,43,.65); }
.pet-stat b { display: block; font-size: 19px; color: var(--ink); margin-top: 2px; }
/* P1-5 北極星金句＋攻擊力來源拆解 */
.pet-northstar { margin: 2px 0 8px; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 700;
  color: #7a4b12; background: linear-gradient(100deg, #fff4dc, #ffe9c2); border: 1px solid #f0d19a; line-height: 1.5; }
.pet-atk-formula { margin: -2px 0 8px; padding: 8px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.7;
  color: var(--ink); background: var(--paper2); border: 1px dashed var(--line); }
.pet-atk-formula b { color: #c0392b; font-size: 15px; }
.pet-atk-formula i { display: block; margin-top: 3px; font-size: 11.5px; color: rgba(43,43,43,.6); font-style: normal; }
.pet-atk-formula .atk-cap { margin-left: 4px; color: #b8860b; font-weight: 700; cursor: help; }
body.dark .pet-northstar { color: #ffd98a; background: linear-gradient(100deg, #3a2f1a, #4a3a1e); border-color: #6b5424; }
/* P2-7 精通位階 ★ */
.pet-stars { font-size: .82em; letter-spacing: -1px; filter: drop-shadow(0 1px 1px rgba(180,120,0,.4)); vertical-align: middle; }
.pet-stars.big { font-size: 1.05em; letter-spacing: 0; }
.pet-mastery { margin: 4px 0 8px; padding: 8px 12px; border-radius: 12px; background: var(--paper2); border: 1px solid var(--line); }
.pet-mastery i { color: rgba(43,43,43,.6); font-style: normal; font-size: 11.5px; }
body.dark .pet-mastery i { color: rgba(255,255,255,.55); }
/* P2-8 取名＋名片 */
.pet-rename { background: none; border: none; cursor: pointer; font-size: 15px; padding: 2px 4px; opacity: .7; }
.pet-rename:hover { opacity: 1; }
.pet-rename-in { font-size: 16px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); width: 160px; }
.pet-namecard { max-width: 320px; }
.pnc-inner { background: linear-gradient(160deg, #fffaf0, #ffeccd); border: 2px solid #e8c583; border-radius: 18px;
  padding: 18px 20px; color: #4a3413; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.pnc-head { font-size: 13px; font-weight: 700; color: #9a6b26; margin-bottom: 8px; }
.pnc-img { display: block; width: 130px; height: 130px; object-fit: contain; margin: 0 auto 8px; }
.fu-imgs.pnc-img { position: relative; }
.pnc-name { text-align: center; font-size: 20px; font-weight: 800; }
.pnc-sub { text-align: center; font-size: 12px; color: #9a6b26; margin-bottom: 10px; }
.pnc-row { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px dashed #e0c491; font-size: 14px; }
.pnc-row b { color: #c0392b; }
.pnc-foot { margin-top: 10px; text-align: center; font-size: 11px; color: #b08a4a; }
/* P3-13 今天的一件事 / P2-6 每日餵養 / P3-12 主題季 */
.pet-nba { padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.6; color: var(--ink);
  background: linear-gradient(100deg, #e7f3ff, #d7ebff); border: 1px solid #b8d9f5; }
body.dark .pet-nba { background: linear-gradient(100deg, #14293f, #16324a); border-color: #2c5273; }
.pet-feed { margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: var(--paper2); border: 1px solid var(--line); }
.pet-feed.done { border-color: #7cc47c; background: linear-gradient(100deg, #eafbe9, #dff5df); }
body.dark .pet-feed.done { background: linear-gradient(100deg, #1c3a1c, #234f23); border-color: #3f7a3f; }
.pf-head { font-size: 12.5px; font-weight: 700; color: #b8860b; }
.pf-body { font-size: 13px; margin: 2px 0 6px; color: var(--ink); }
.pf-bar { height: 7px; border-radius: 5px; background: rgba(0,0,0,.1); overflow: hidden; margin-top: 5px; }
.pf-bar span { display: block; height: 100%; background: linear-gradient(90deg, #f5b942, #f39c12); border-radius: 5px; }
.pet-season { margin-top: 8px; font-size: 12.5px; color: rgba(43,43,43,.7); }
body.dark .pet-season { color: rgba(255,255,255,.6); }
.season-tag { position: absolute; top: 4px; right: 4px; font-size: 15px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
/* P3-14 傳承銘文 */
.lore-form { margin: 4px 0; }
.lore-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.lore-list.others { padding: 8px; border-radius: 10px; background: var(--paper2); }
.lore-item { font-size: 13px; line-height: 1.5; padding: 6px 10px; border-radius: 10px; background: var(--paper2);
  border-left: 3px solid var(--accent); color: var(--ink); }
.lore-item b { color: var(--accent2, #c0392b); }
.lore-item i { display: block; margin-top: 2px; font-size: 11px; color: rgba(43,43,43,.55); font-style: normal; }
body.dark .lore-item i { color: rgba(255,255,255,.5); }
.pet-actrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.pet-max { align-self: center; color: #c99a35; font-weight: 700; }
.pet-skills { display: flex; flex-direction: column; gap: 6px; }
.pet-skill { display: grid; grid-template-columns: 34px auto 1fr; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px; background: var(--paper2); border: 1px solid var(--line); font-size: 13.5px; }
.pet-skill i { font-style: normal; color: rgba(43,43,43,.6); font-size: 12.5px; text-align: right; }
.pet-skill.locked { opacity: .55; }
.ps-ico { font-size: 20px; text-align: center; }
.pet-equips { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.pet-eq { padding: 10px 8px; border-radius: 10px; border: 1px dashed var(--line); background: var(--panel);
  font-size: 13px; text-align: center; color: var(--ink); cursor: pointer; }
.pet-eq i { display: block; font-style: normal; font-size: 12px; color: rgba(43,43,43,.55); margin-top: 3px; }
.pet-eq.empty { cursor: default; color: rgba(43,43,43,.45); background: var(--paper2); }
.pet-eq.t-rare { border: 1.5px solid rgba(111,159,201,.7); }
.pet-eq.t-legendary { border: 1.5px solid #c99a35; box-shadow: 0 0 8px rgba(214,166,66,.35); }
.pet-decos { display: flex; gap: 6px; flex-wrap: wrap; }
.pet-dbtn { min-width: 44px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); font-size: 17px; cursor: pointer; }
.pet-dbtn.on { border-color: var(--accent2); background: rgba(111,159,201,.14); }
.pet-evo, .pet-closeup { position: relative; text-align: center; max-width: min(86vw, 460px); animation: chestPop .5s ease; }
.pet-evo img, .pet-closeup img { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 16px;
  animation: petBreath 3.2s ease-in-out infinite; }
.pet-evo-txt { color: #fff; font-size: 21px; font-weight: 700; margin-top: 12px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
@keyframes petBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.vg-petav { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; margin-left: -8px;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); align-self: center; }

/* 競技：無限爬塔層數會一路長，用固定高度＋捲動收住，不然頁面隨玩家爬層越拉越長 */
.pb-floors { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; margin-bottom: 4px;
  max-height: 258px; overflow-y: auto; padding-right: 2px; scroll-behavior: smooth; }
.pb-floor { padding: 10px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel);
  text-align: center; font-size: 13px; cursor: pointer; color: var(--ink); }
.pb-floor i { display: block; font-style: normal; font-size: 12px; color: var(--ink-55); margin: 2px 0; }
.pb-floor .pb-fico { font-size: 24px; display: block; }
.pb-drop { font-size: 11.5px; color: var(--ink-55); }
.pb-floor.t-rare:not(.locked) { border-color: rgba(111,159,201,.6); }
.pb-floor.t-legendary:not(.locked) { border-color: #c99a35; }
.pb-floor.locked { opacity: .5; cursor: default; background: var(--paper2); }
.pb-floor:not(.locked):hover { border-color: var(--accent2); transform: translateY(-1px); }
.pb-shadowrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pb-face { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: flex;
  align-items: center; justify-content: center; background: var(--paper2); border: 2px solid var(--line); }
.pb-face img { width: 100%; height: 100%; object-fit: cover; }
.pb-face.me { border-color: var(--accent2); }
.pb-hue { filter: hue-rotate(140deg) saturate(.85); }

/* 詞靈競技戰鬥：雙陣營回合戰場（不影響文學家對戰共用的 .bt-arena） */
.bt-petbattle {
  --battle-blue: #163f56;
  --battle-blue-bright: #2d8298;
  --battle-red: #68261f;
  --battle-red-bright: #bd4a38;
  --battle-gold: #d9b763;
  --battle-ivory: #f7edcf;
  position: relative; display: block; overflow: hidden; isolation: isolate;
  margin: 4px 0 18px; border: 1px solid rgba(109,81,36,.68); border-radius: 18px;
  background: #171712; color: var(--battle-ivory);
  box-shadow: 0 18px 42px rgba(34,23,12,.28), inset 0 0 0 1px rgba(255,231,159,.12);
}
.bt-petbattle::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(7,38,48,.8), rgba(25,22,15,.15) 47%, rgba(57,15,12,.82)),
    url('../img/ui/h_arena.webp') center 40% / cover no-repeat;
  filter: saturate(.78) contrast(1.12) brightness(.62);
  transform: scale(1.03);
}
.bt-petbattle::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(245,202,97,.2), transparent 21%),
    linear-gradient(90deg, rgba(4,46,62,.48) 0 37%, transparent 48% 52%, rgba(91,21,15,.52) 63% 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
}
.bt-round-banner {
  position: relative; width: min(86%, 390px); margin: 14px auto 2px; padding: 8px 34px 9px;
  display: flex; flex-direction: column; align-items: center;
  border: 1px solid rgba(217,183,99,.72); border-radius: 6px;
  background: linear-gradient(180deg, rgba(38,34,24,.96), rgba(14,14,11,.94));
  box-shadow: 0 5px 18px rgba(0,0,0,.4), inset 0 0 18px rgba(217,183,99,.08);
}
.bt-round-banner::before, .bt-round-banner::after {
  content: ''; position: absolute; top: 50%; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--battle-gold));
}
.bt-round-banner::before { right: calc(100% + 7px); }
.bt-round-banner::after { left: calc(100% + 7px); transform: scaleX(-1); }
.bt-round-banner span { font: 700 9px/1 var(--font-en); letter-spacing: 3px; color: #a99054; }
.bt-round-banner b { margin-top: 4px; font: 700 22px/1.15 var(--font-serif); letter-spacing: 4px; color: #f7dfa0;
  text-shadow: 0 1px 8px rgba(255,196,62,.42); }
.bt-round-banner i { margin-top: 4px; font-style: normal; font-size: 10px; letter-spacing: 1px; color: rgba(247,237,207,.65); }
.bt-stage {
  position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0; align-items: stretch; margin-top: 10px; padding: 0;
  min-height: clamp(300px, 48vw, 420px); border-top: 1px solid rgba(217,183,99,.32); border-bottom: 1px solid rgba(217,183,99,.32);
}
.bt-petbattle .bt-side {
  position: relative; min-width: 0; padding: 0; gap: 0; align-items: stretch; overflow: hidden; isolation: isolate;
  border: 0; border-radius: 0; box-shadow: inset 0 0 28px rgba(0,0,0,.28);
}
.bt-petbattle .bt-side.me { order: 0; background: #19485e; border-right: 1px solid rgba(217,183,99,.42); }
.bt-petbattle .bt-side.foe { order: 2; background: #702c24; }
.bt-fighter-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; filter: saturate(1.04) contrast(1.08); transform: scale(1.02); }
.bt-petbattle .me .bt-fighter-art { mix-blend-mode: multiply; filter: saturate(1.18) contrast(1.12) brightness(1.18); }
.bt-fighter-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 25%, rgba(5,14,18,.18) 48%, rgba(3,18,25,.98) 100%); }
.bt-petbattle .foe .bt-fighter-shade { background: linear-gradient(180deg, transparent 25%, rgba(43,10,8,.15) 48%, rgba(34,9,7,.98) 100%); }
.bt-fighter-copy { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; }
.bt-camp { font-size: 9px; font-weight: 800; letter-spacing: 2px; color: rgba(247,237,207,.7); text-transform: uppercase; }
.bt-petbattle .foe .bt-camp { text-align: right; }
.bt-petbattle .bt-name {
  min-height: 28px; margin: 2px 0 3px; display: flex; align-items: center; justify-content: flex-start; gap: 6px;
  font-size: 18px; color: #fff4cf; text-align: left; text-shadow: 0 2px 6px #000;
}
.bt-petbattle .foe .bt-name { justify-content: flex-end; text-align: right; }
.bt-petbattle .bt-tier {
  flex: none; margin: 0; padding: 2px 6px; border: 1px solid rgba(217,183,99,.45);
  background: rgba(0,0,0,.3); color: #e7ca7e; font: 700 9px/1.2 var(--font-en); letter-spacing: 0;
}
.bt-stats { display: flex; justify-content: center; gap: 10px; font-size: 10px; color: rgba(247,237,207,.72); white-space: nowrap; }
.bt-stats b { color: #fff4cf; font-family: var(--font-en); }
.bt-petbattle .bt-hp {
  height: 16px; border-radius: 3px; border-color: rgba(230,205,138,.42); background: rgba(5,9,9,.68);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.75);
}
.bt-petbattle .bt-hp-fill { background: linear-gradient(90deg, #1a7e69, #6bd39c); border-right: 1px solid rgba(255,255,255,.65); }
.bt-petbattle .foe .bt-hp-fill { background: linear-gradient(90deg, #792b25, #dd634c); }
.bt-petbattle .bt-hp.low .bt-hp-fill { background: linear-gradient(90deg, #9c231d, #ff7b58); }
.bt-petbattle .bt-hp span { top: 0; right: 5px; line-height: 14px; color: #fff8df; font: 700 9px/14px var(--font-en); text-shadow: 0 1px 2px #000; }
.bt-versus {
  position: absolute; z-index: 4; left: 50%; top: 43%; transform: translate(-50%,-50%) rotate(-8deg); width: 50px; height: 50px; display: grid; place-items: center;
  border: 1px solid rgba(238,202,111,.72); border-radius: 50%;
  background: radial-gradient(circle, #754116 0 30%, #21160d 66%);
  box-shadow: 0 0 20px rgba(255,180,47,.28), inset 0 0 9px rgba(255,208,99,.2);
}
.bt-versus span { color: #ffd97c; font: 900 17px/1 var(--font-serif); text-shadow: 0 0 9px #ff9d16; transform: rotate(8deg); }
.bt-petbattle .bt-log {
  order: initial; min-height: 38px; margin: 0 14px 14px; padding: 9px 12px;
  border: 1px solid rgba(217,183,99,.32); border-radius: 8px;
  background: rgba(14,12,9,.76); color: #f3d786; font-size: 13px; letter-spacing: .4px;
  box-shadow: inset 0 0 14px rgba(217,183,99,.06);
}
.bt-pet-question { position: relative; margin-top: -2px; }
.bt-pet-question .quiz-prompt {
  border: 1px solid rgba(116,82,36,.34); border-radius: 12px; background: linear-gradient(180deg, #fffdf8, #f8f0df);
  box-shadow: 0 9px 22px rgba(60,42,22,.11), inset 0 0 0 3px rgba(197,157,79,.06);
  font-family: var(--font-en); color: #27241f;
}
.bt-pet-question .quiz-sub { color: #765e3e; font-weight: 600; letter-spacing: .4px; }
.bt-pet-question .btn.opt { border: 1px solid rgba(43,68,83,.13); box-shadow: 0 3px 9px rgba(32,40,48,.05); }
@media (max-width: 520px) {
  .bt-modecard { min-height: 170px; }
  .bt-modecopy { left: 14px; right: 14px; bottom: 13px; }
  .bt-modecopy b { font-size: 20px; }
  .bt-oppgrid { gap: 9px; }
  .bt-oppcard { min-height: 240px; }
  .bt-oppcopy { left: 11px; right: 11px; bottom: 11px; }
  .bt-oppcopy .bt-name { font-size: 16px; }
  .bt-opptaunt { display: none; }
  .bt-literary-stage { min-height: 300px; }
  .bt-duelist-copy { left: 9px; right: 9px; bottom: 10px; }
  .bt-duelist-copy .bt-name { font-size: 16px; gap: 4px; }
  .bt-literary-vs { width: 40px; height: 40px; font-size: 13px; }
  .bt-stage { min-height: 270px; }
  .bt-fighter-copy { left: 8px; right: 8px; bottom: 9px; }
  .bt-petbattle .bt-name { font-size: 14px; gap: 3px; }
  .bt-stats { gap: 6px; font-size: 8px; }
  .bt-versus { width: 34px; height: 34px; }
  .bt-versus span { font-size: 13px; }
  .bt-round-banner { margin-top: 10px; padding-inline: 18px; }
  .bt-round-banner b { font-size: 18px; }
  .bt-round-banner i { font-size: 9px; }
}
body.dark .bt-pet-question .quiz-prompt { background: linear-gradient(180deg, #2a2925, #211f1b); color: #f5ecd7; border-color: #665638; }
body.dark .bt-pet-question .quiz-sub { color: #c8b58e; }
body.high-contrast .bt-petbattle { border: 3px solid currentColor; }
body.high-contrast .bt-petbattle .bt-side, body.high-contrast .bt-petbattle .bt-log { border: 2px solid currentColor; }
.pb-dropcard { margin: 12px auto; padding: 14px 18px; border-radius: 14px; max-width: 300px;
  background: var(--paper2); border: 1.5px solid var(--line); font-size: 14.5px; animation: chestPop .5s ease; }
.pb-dropcard i { display: block; font-style: normal; font-size: 13px; color: var(--ink-55); margin: 3px 0 8px; }
.pb-dropcard .pb-dropico { font-size: 34px; }
.pb-dropcard.t-rare { border-color: rgba(111,159,201,.7); }
.pb-dropcard.t-legendary { border-color: #c99a35; box-shadow: 0 0 14px rgba(214,166,66,.4); }
/* 榜單開放到前 500 名後整頁塞不下，收進固定高度捲動框 */
.pb-board { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; max-height: 60vh; overflow-y: auto; padding-right: 2px; }
.pb-brow { display: grid; grid-template-columns: 38px 1fr auto 56px; gap: 8px; align-items: center;
  padding: 8px 12px; border-radius: 10px; background: var(--paper2); border: 1px solid var(--line); font-size: 14px; }
.pb-brow.me { border-color: var(--accent2); background: var(--accent2); color: #fff; box-shadow: 0 2px 8px rgba(111,159,201,.4); }
.pb-brow.me .pb-bnick i, .pb-brow.me .pb-bpet { color: rgba(255,255,255,.85); }
.pb-myrank { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: rgba(111,159,201,.12); border: 1px solid var(--accent2); font-size: 13.5px; font-weight: 600; }
.pb-rank { text-align: center; font-weight: 700; }
.pb-bnick i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-55); font-weight: 400; }
.pb-bpet { font-size: 12.5px; color: var(--ink-55); }
.pb-brow b { text-align: right; font-variant-numeric: tabular-nums; }

/* 彈性習慣每日任務（易/中/難三檔） */
.vg-daily-sub { font-style: normal; font-weight: 400; font-size: 12px; color: rgba(43,43,43,.55); margin-left: 6px; }
.vg-quest.elastic .vg-q-body { display: flex; flex-direction: column; gap: 4px; }
.vg-q-cur { font-style: normal; font-size: 12px; color: rgba(43,43,43,.55); margin-left: 8px; }
.vg-q-tiers { display: flex; flex-wrap: wrap; gap: 5px; }
.vg-tier { font-size: 11.5px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--panel); color: rgba(43,43,43,.65); }
.vg-tier.claimed { background: var(--paper2); color: rgba(43,43,43,.45); border-style: dashed; }
.vg-tier.claim { background: linear-gradient(135deg, #e4c26e, #c99a35); color: #fff; border: none;
  font-weight: 700; cursor: pointer; box-shadow: 0 1px 5px rgba(201,154,53,.4); animation: tierPulse 1.6s ease-in-out infinite; }
@keyframes tierPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* 商店水彩圖示 */
.shop-ico-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ── 單字關聯圖 ── */
.wg-tabs { display: flex; gap: 8px; margin: 0 0 10px; }
.wg-tab { border: 1.5px solid rgba(43,43,43,.25); background: transparent; border-radius: 20px; padding: 6px 16px; font-size: .92rem; color: var(--ink); cursor: pointer; font-family: inherit; }
.wg-tab.on { background: #2b2b2b; color: #fdfcf8; border-color: #2b2b2b; }
.hero-tabs { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.hero-tab { border: 1.5px solid rgba(43,43,43,.25); background: transparent; border-radius: 20px; padding: 6px 16px; font-size: .92rem; color: var(--ink); cursor: pointer; font-family: inherit; }
.hero-tab.on { background: #2b2b2b; color: #fdfcf8; border-color: #2b2b2b; }
body.dark .hero-tab { color: var(--ink); }
.wg-stats { font-size: .88rem; color: #5a6b78; margin: 0 0 8px; }
#wg-canvas { width: 100%; touch-action: none; cursor: grab; background: transparent; border: 1px dashed rgba(74,123,166,.25); border-radius: 12px; }

/* ── 二期D：背包/鍛造/裝備圖鑑/助戰/週末寶庫 ── */
.bag-it.sel { outline: 2.5px solid #c9a24b; outline-offset: 2px; }
.bt-assist { font-size: .78rem; color: #5a6b78; margin-top: 2px; }
.pb-vault { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border: 1.5px dashed #c9a24b; border-radius: 12px; font-size: .9rem; background: rgba(201,162,75,.07); }
.eqdex-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.eqdex-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 72px; padding: 8px 4px; border: 1px solid rgba(43,43,43,.15); border-radius: 10px; font-size: 1.1rem; opacity: .35; filter: grayscale(1); }
.eqdex-cell i { font-size: .68rem; font-style: normal; color: #5a6b78; }
.eqdex-cell.got { opacity: 1; filter: none; }
.eqdex-cell.t-rare.got { border-color: #4a7ba6; }
.eqdex-cell.t-legendary.got { border-color: #c9a24b; background: rgba(201,162,75,.08); }
.sp-perk { display: block; font-size: .8rem; color: #c9a24b; }

/* 傳說之上 10 階配色，越高階越炫（裝備卡／爬塔按鈕／掉落卡／圖鑑格共用） */
.t-mythic { --tc: #8a5fd6; --tcs: rgba(138,95,214,.4); }
.t-celestial { --tc: #2fb6c9; --tcs: rgba(47,182,201,.4); }
.t-emperor { --tc: #d6543f; --tcs: rgba(214,84,63,.4); }
.t-eternal { --tc: #3f9e5f; --tcs: rgba(63,158,95,.4); }
.t-genesis { --tc: #e0762f; --tcs: rgba(224,118,47,.4); }
.t-stellar { --tc: #d94f9b; --tcs: rgba(217,79,155,.4); }
.t-cosmic { --tc: #4f6bd9; --tcs: rgba(79,107,217,.4); }
.t-primordial { --tc: #6a4fd9; --tcs: rgba(106,79,217,.4); }
.t-transcendent { --tc: #cfa030; --tcs: rgba(207,160,48,.45); }
.t-supreme { --tc: #ff3b6b; --tcs: rgba(255,59,107,.5); }
.pet-eq.t-mythic, .pet-eq.t-celestial, .pet-eq.t-emperor, .pet-eq.t-eternal, .pet-eq.t-genesis,
.pet-eq.t-stellar, .pet-eq.t-cosmic, .pet-eq.t-primordial, .pet-eq.t-transcendent, .pet-eq.t-supreme {
  border: 1.5px solid var(--tc); box-shadow: 0 0 10px var(--tcs);
}
.pb-floor.t-mythic:not(.locked), .pb-floor.t-celestial:not(.locked), .pb-floor.t-emperor:not(.locked),
.pb-floor.t-eternal:not(.locked), .pb-floor.t-genesis:not(.locked), .pb-floor.t-stellar:not(.locked),
.pb-floor.t-cosmic:not(.locked), .pb-floor.t-primordial:not(.locked), .pb-floor.t-transcendent:not(.locked),
.pb-floor.t-supreme:not(.locked) { border-color: var(--tc); }
.pb-dropcard.t-mythic, .pb-dropcard.t-celestial, .pb-dropcard.t-emperor, .pb-dropcard.t-eternal,
.pb-dropcard.t-genesis, .pb-dropcard.t-stellar, .pb-dropcard.t-cosmic, .pb-dropcard.t-primordial,
.pb-dropcard.t-transcendent, .pb-dropcard.t-supreme { border-color: var(--tc); box-shadow: 0 0 16px var(--tcs); }
.eqdex-cell.t-mythic.got, .eqdex-cell.t-celestial.got, .eqdex-cell.t-emperor.got, .eqdex-cell.t-eternal.got,
.eqdex-cell.t-genesis.got, .eqdex-cell.t-stellar.got, .eqdex-cell.t-cosmic.got, .eqdex-cell.t-primordial.got,
.eqdex-cell.t-transcendent.got, .eqdex-cell.t-supreme.got { border-color: var(--tc); background: var(--tcs); }

/* ── 即時對戰 ── */
.rt-code { font-size: clamp(1.8rem, 12vw, 3rem); font-weight: 800; letter-spacing: .25em; overflow-wrap: anywhere; text-align: center; color: var(--ink); margin: 12px 0; }
.rt-join-in { width: 110px; padding: 10px 12px; border: 1.5px solid rgba(43,43,43,.3); border-radius: 12px; font-size: 1.05rem; text-align: center; letter-spacing: .2em; font-family: inherit; background: transparent; }
.rt-hud { display: flex; justify-content: space-between; font-size: .9rem; color: #5a6b78; margin-bottom: 6px; }
#rt-timer { font-weight: 700; }
#rt-timer.danger { color: #b0413e; animation: pulse 1s infinite; }

/* ── 詞源融合（幼靈） ── */
.fu-imgs { position: relative; display: block; overflow: hidden; }
.fu-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fu-imgs img.fu-b { opacity: .55; filter: hue-rotate(90deg); mix-blend-mode: multiply; }
.fu-imgs .fu-egg { position: absolute; right: 6px; bottom: 6px; font-size: 1.3rem; }
.wc-mcard .fu-imgs { height: 120px; }
.pet-detail .fu-imgs { height: 220px; }
.pg-tag.fu-cand.on, .pg-tag.fu-skill.on { background: #2b2b2b; color: #fdfcf8; }

/* ── 單字之城 ── */
.tw-resbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; font-size: .95rem; }
.tw-res { padding: 4px 10px; border: 1px solid rgba(43,43,43,.15); border-radius: 14px; background: rgba(255,255,255,.5); }
.tw-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; padding: 8px; border-radius: 14px; background-size: cover; background-position: center; border: 1px solid rgba(43,43,43,.12); }
.tw-cell { position: relative; aspect-ratio: 1; border: 1px dashed rgba(43,43,43,.14); border-radius: 8px; background: rgba(255,255,255,.25); cursor: pointer; padding: 0; overflow: hidden; }
.tw-cell:hover { border-color: #c9a24b; background: rgba(255,255,255,.5); }
.tw-cell.has { border-style: solid; background: rgba(255,255,255,.75); }
.tw-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-cell .tw-emoji { font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center; height: 100%; }
.tw-lv { position: absolute; left: 2px; bottom: 2px; font-size: .58rem; font-style: normal; background: rgba(43,43,43,.75); color: #fdfcf8; border-radius: 6px; padding: 0 4px; }
.tw-up { position: absolute; right: 2px; top: 2px; font-style: normal; font-size: .8rem; animation: pulse 1.2s infinite; }
.tw-buildmenu { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 8px; }
.tw-bopt { text-align: left; border: 1px solid rgba(43,43,43,.2); border-radius: 10px; padding: 8px 10px; background: rgba(255,255,255,.55); cursor: pointer; font-family: inherit; font-size: .88rem; }
.tw-bopt i { display: block; font-style: normal; color: #5a6b78; font-size: .78rem; }
.tw-bopt u { display: block; text-decoration: none; color: #b0413e; font-size: .72rem; }
.tw-bopt.no { opacity: .55; }
.tw-popgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin: 6px 0; }
.tw-npc { border: 1px solid rgba(43,43,43,.15); border-radius: 12px; background: rgba(255,255,255,.55); padding: 6px; cursor: pointer; font-family: inherit; }
.tw-npc img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; display: block; }
.tw-npc b { display: block; font-size: .82rem; margin-top: 4px; }
.tw-npc i { font-style: normal; font-size: .72rem; color: #5a6b78; }
.tw-npc .tw-emoji { font-size: 2rem; display: block; text-align: center; padding: 14px 0; }
.tw-bubble { margin-top: 10px; padding: 12px 14px; border: 1.5px solid rgba(74,123,166,.4); border-radius: 14px 14px 14px 4px; background: rgba(238,244,248,.8); font-size: .95rem; }
.tw-bubble .npc-w { cursor: pointer; color: #4a7ba6; border-bottom: 2px dotted #4a7ba6; }
.tw-quest { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1.5px dashed #4a7ba6; border-radius: 12px; font-size: .9rem; }
.tw-quest img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.tw-quest.done { opacity: .65; border-style: solid; }
.tw-quest i { font-style: normal; color: #5a6b78; font-size: .8rem; }
.tw-quest i.tw-lore { display: inline-block; margin-top: 3px; font-style: italic; color: #e8a020; }
.tw-sel { font-family: inherit; font-size: .92rem; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(43,43,43,.25); background: rgba(255,255,255,.7); }
/* P2-6 今天的一件事 CTA */
.tw-cta-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 8px 0 2px; padding: 10px 14px; border: none; border-radius: 12px; cursor: pointer; font-family: inherit; text-align: left; background: linear-gradient(100deg, #4a7ba6, #6aa0c8); color: #fff; box-shadow: 0 2px 8px rgba(74,123,166,.3); transition: transform .12s, box-shadow .12s; }
.tw-cta-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(74,123,166,.4); }
.tw-cta-txt { font-size: .95rem; font-weight: 600; }
.tw-cta-go { font-size: .88rem; white-space: nowrap; opacity: .95; }
body.dark .tw-cta-card { background: linear-gradient(100deg, #3a6288, #4f83ac); box-shadow: 0 2px 8px rgba(0,0,0,.4); }

/* ── 單字之城 平面俯視格子（2.5D 等角因 GPU 卡＋負邊距溢出重疊，已於 2026-07-12 退役；建築圖已去背 RGBA） ── */
.tw-iso { overflow: visible; margin: 8px 0; }
.tw-cell.has { background: rgba(255,255,255,.10); }
.tw-b3d { position: absolute; inset: 0; pointer-events: none; }
.tw-b3d img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(43,43,43,.3)); display: block; }
.tw-b3d .tw-emoji { font-size: 2rem; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.tw-b3d .tw-lv { left: 4px; bottom: 4px; }
.tw-b3d .tw-up { right: 4px; top: 4px; }
.tw-cell.mv .tw-b3d img { outline: 3px solid #c9a24b; animation: pulse 1s infinite; }
.tw-cell.mvtarget { border-color: #c9a24b; background: rgba(201,162,75,.12); }

/* 建城史詩慶典 */
.tw-epic { position: fixed; inset: 0; z-index: 90; background: rgba(43,43,43,.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.tw-epic-card { background: #fdfcf8; border: 2px solid #c9a24b; border-radius: 18px; padding: 26px 30px; text-align: center; max-width: 340px; box-shadow: 0 18px 50px rgba(43,43,43,.35); }
.tw-epic-card .big { font-size: 3rem; }
.tw-epic-card h3 { margin: 8px 0; font-family: serif; }
.tw-epic-card p { color: #5a6b78; font-size: .92rem; }
.tw-epic-card .btn { margin: 6px 4px 0; }

/* 稀有居民・城史・參觀 */
.tw-npc.rare { border: 2px solid #c9a24b; box-shadow: 0 0 10px rgba(201,162,75,.45); }
.tw-log { font-size: .86rem; line-height: 1.9; }
.tw-log i { font-style: normal; color: #9aa7b0; margin-right: 6px; font-size: .76rem; }
.tw-vgrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin: 8px 0; max-width: 300px; }
.tw-vcell { aspect-ratio: 1; border: 1px dashed rgba(43,43,43,.12); border-radius: 4px; background: rgba(255,255,255,.35); overflow: hidden; }
.tw-vcell img { width: 100%; height: 100%; object-fit: cover; }

/* 裝飾水彩小圖（emoji 僅 fallback） */
.pet-deco-img { position: absolute; top: 8px; right: 12px; width: 44px; height: 44px; object-fit: cover; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 3px 8px rgba(43,43,43,.25); }
.pet-deco-img.big { width: 64px; height: 64px; top: 4px; right: 8px; }
.pet-deco-img.mini { position: static; width: 20px; height: 20px; vertical-align: -4px; margin-right: 4px; border-width: 1px; box-shadow: none; }
.pet-deco-img.btn { position: static; width: 34px; height: 34px; border-width: 1px; box-shadow: none; display: block; margin: 0 auto; }

/* ── 深色模式（自習室護眼；水彩圖自然融入深底） ── */
body.dark {
  --bg: #191c22;
  --paper2: #1f242c;
  --panel: #232933;
  --ink: #e8e4da;
  --text: #e8e4da;
  --muted: #9aa3ad;
  --ink-70: rgba(232,228,218,.72);
  --ink-55: rgba(232,228,218,.55);
  --line: rgba(232,228,218,.14);
  --wash-blue: #2a3644;
  --wash-cream: #2e2a22;
  background: #191c22;
}
body.dark .wc-card, body.dark .stat-tile, body.dark .shop-item, body.dark .pet-stat,
body.dark .pg-fam, body.dark .tw-bubble, body.dark .tw-npc, body.dark .tw-bopt,
body.dark .pet-skill, body.dark .pet-eq, body.dark .wc-mcard, body.dark .tw-res,
body.dark .tw-quest, body.dark .set-toggle, body.dark .tw-epic-card {
  background: #232933; color: var(--text); border-color: var(--line);
}
body.dark .btn.ghost, body.dark .btn.sm.ghost, body.dark .btn.small.ghost { background: transparent; color: var(--text); border-color: var(--line); }
body.dark .btn.opt, body.dark input, body.dark textarea, body.dark select { background: #2a313d; color: var(--text); border-color: var(--line); }
body.dark .wc-card-img { filter: brightness(.9); }
body.dark .pg-hint, body.dark .stat-cap, body.dark .wc-mcard-sub { color: var(--muted); }
body.dark .tw-cell { background: rgba(255,255,255,.06); border-color: rgba(232,228,218,.12); }
body.dark .tw-cell.has { background: rgba(255,255,255,.1); }
body.dark .wg-tab, body.dark .rt-code { color: var(--ink); }
body.dark .en-chip { color: #cdd9ff; }

/* ── 無障礙：使用者要求減少動態時，關閉動畫與轉場 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── 站底完全攻略（.vd-guide，SPA 之外的靜態說明區） ── */
.vd-guide{border-top:3px solid #e8a020;background:linear-gradient(180deg,#fffdf8,#fdf6e9);
  padding:38px 16px 64px;margin-top:28px;color:#3a2f22;font-size:15px;line-height:1.75}
.vd-guide .vg-wrap{max-width:760px;margin:0 auto}
.vd-guide .vg-head h2{font-size:1.5em;margin:0 0 8px;color:#a8641a;letter-spacing:.5px}
.vd-guide .vg-lead{margin:0 0 20px;color:#6a5a45}
.vd-guide .vg-sec{border:1px solid #eadcc2;border-radius:12px;background:#fff;
  margin-bottom:12px;overflow:hidden;box-shadow:0 1px 4px rgba(120,90,40,.06)}
.vd-guide .vg-sec>summary{cursor:pointer;list-style:none;padding:15px 18px;font-weight:700;
  font-size:1.05em;color:#8a5a16;background:#fdf4e2;position:relative;transition:background .15s}
.vd-guide .vg-sec>summary::-webkit-details-marker{display:none}
.vd-guide .vg-sec>summary::after{content:"＋";position:absolute;right:18px;color:#c99442;font-weight:700}
.vd-guide .vg-sec[open]>summary::after{content:"－"}
.vd-guide .vg-sec>summary:hover{background:#fbedcf}
.vd-guide .vg-body{padding:6px 20px 18px}
.vd-guide .vg-body ul,.vd-guide .vg-body ol{margin:8px 0;padding-left:22px}
.vd-guide .vg-body li{margin:6px 0}
.vd-guide .vg-body b{color:#8a5a16}
.vd-guide .vg-tip{background:#fff7e6;border-left:4px solid #e8a020;border-radius:6px;
  padding:10px 14px;margin:12px 0 4px;color:#5a4a30}
.vd-guide .vg-tablewrap{overflow-x:auto;margin:10px 0}
.vd-guide .vg-table{border-collapse:collapse;width:100%;font-size:.95em;min-width:480px}
.vd-guide .vg-table th,.vd-guide .vg-table td{border:1px solid #ecdcc0;padding:9px 12px;text-align:left;vertical-align:top}
.vd-guide .vg-table th{background:#f6e6c8;color:#7a5214;font-weight:700}
.vd-guide .vg-table tr:nth-child(even) td{background:#fdf8ee}
.vd-guide .vg-lock{display:inline-block;background:#e8a020;color:#fff;font-size:.72em;
  padding:1px 6px;border-radius:6px;vertical-align:middle;margin-left:4px}
.vd-guide a{color:#c0791a;text-decoration:underline}
.vd-guide .vg-foot{text-align:center;color:#8a7455;margin:26px 0 0;font-size:.95em}

body.dark .vd-guide{background:linear-gradient(180deg,#1c1712,#17130e);border-top-color:#b57e2a;color:#e6dccb}
body.dark .vd-guide .vg-head h2{color:#e6a94a}
body.dark .vd-guide .vg-lead{color:#b6a487}
body.dark .vd-guide .vg-sec{background:#221b13;border-color:#3a2e1e;box-shadow:none}
body.dark .vd-guide .vg-sec>summary{background:#2a2015;color:#e6a94a}
body.dark .vd-guide .vg-sec>summary:hover{background:#332818}
body.dark .vd-guide .vg-body b{color:#e6b25a}
body.dark .vd-guide .vg-tip{background:#2a2114;border-left-color:#b57e2a;color:#d8c9ac}
body.dark .vd-guide .vg-table th{background:#332818;color:#e6b25a}
body.dark .vd-guide .vg-table th,body.dark .vd-guide .vg-table td{border-color:#3a2e1e}
body.dark .vd-guide .vg-table tr:nth-child(even) td{background:#241c12}
body.dark .vd-guide a{color:#e6b25a}
body.dark .vd-guide .vg-foot{color:#a89474}

/* 攻略作為「單字圖鑑旁」的頁面時：收成圓角面板，不用站底那條全幅上邊框 */
.vd-guide.vd-guide-page{border-top:none;border-radius:16px;margin-top:14px;
  padding:22px 14px 40px;box-shadow:0 2px 12px rgba(120,90,40,.1)}
.vd-guide.vd-guide-page .vg-head h2{font-size:1.3em}
body.dark .vd-guide.vd-guide-page{box-shadow:none}

/* 對戰作答後：選項揭示對應字（中文選項→英文字、英文選項→中文義），紅色小字靠右 */
.btn.opt .opt-reveal{margin-left:auto;font-size:.82em;font-weight:700;color:var(--red);
  white-space:nowrap;padding-left:10px;letter-spacing:.3px}
.btn.opt.right .opt-reveal{color:#0b3320;margin-right:6px}   /* 綠底：深色 */
.btn.opt.wrong .opt-reveal{color:#fff;opacity:.95;margin-right:6px}  /* 紅底：白色 */
body.dark .btn.opt .opt-reveal{color:#ff9b8a}  /* 深色中性底：亮紅 */
body.dark .btn.opt.right .opt-reveal{color:#0b3320}
.tw-board-head{display:flex;justify-content:space-between;gap:12px;margin:10px 4px 6px;color:var(--muted);font-size:.82rem;font-weight:800}
.tw-board-scroll{max-height:520px;overflow:auto;overscroll-behavior:contain;padding-right:4px;margin-bottom:10px}
.tw-board-scroll .pb-brow{grid-template-columns:48px minmax(0,1fr) minmax(48px,auto)}