/* 自學區樣式：行動優先，任何寬度都不得出現水平捲動 */
/* 色票與 base.css 同一套（潑墨酒精畫），本頁未載入 base.css 故另立一份同值 token */
:root {
  --bg: #f4ede0;
  --card: #fbf7ee;
  --ink: #1a1a1e;
  --muted: #4a5768;
  --line: #d2c5ab;
  --brand: #2e4057;
  --ok: #3e5f45;
  --bad: #9e2b25;
  --gold: #c9a227;
  --brand-ink: #f4ede0;       /* 壓在 --brand 上的字色 */
  --radius: 14px;
  --tap: 48px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161d; --card: #1e222b; --ink: #f4ede0; --muted: #a9b0be;
    --line: #3a4353; --brand: #8fa8c4; --ok: #6fbf8e; --bad: #e0665e;
    --gold: #d9b23f; --brand-ink: #14161b;
  }
}

* { box-sizing: border-box; }
/* 本檔多處用 display:grid/flex，會蓋掉 hidden 屬性預設的 display:none（例如測驗設定表單藏不起來） */
[hidden] { display: none !important; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  /* 紙張質地：兩層極淡的墨暈（純 CSS 漸層） */
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 12% 6%, rgba(46, 64, 87, .07), transparent 55%),
    radial-gradient(ellipse at 88% 94%, rgba(26, 26, 30, .06), transparent 60%);
  color: var(--ink);
  font: 16px/1.6 "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-top));
  background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.topbar h1 { font-size: 1.05rem; margin: 0; overflow-wrap: anywhere; }

.app {
  max-width: 720px; margin: 0 auto;
  padding: 16px 16px calc(32px + env(safe-area-inset-bottom));
}
.section-title { font-size: 1rem; color: var(--muted); margin: 4px 0 12px; }
.loading, .empty, .error { color: var(--muted); text-align: center; padding: 32px 0; }

button, input, select { font: inherit; color: inherit; }
button { min-height: var(--tap); border-radius: var(--radius); cursor: pointer; }
.primary {
  background: var(--brand); color: var(--brand-ink); border: 0;
  padding: 12px 20px; font-weight: 600; width: 100%;
}
.ghost {
  background: var(--card); border: 1px solid var(--line);
  padding: 10px 14px; color: var(--ink);
}
.ghost.is-on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.chk { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); }

/* 清單 */
.deck-list, .mode-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.deck-item, .mode-item {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; min-height: var(--tap); text-decoration: none; color: inherit;
}
.deck-name, .mode-name { font-weight: 600; overflow-wrap: anywhere; }
.deck-meta, .mode-desc { color: var(--muted); font-size: 0.88rem; }

/* 模式配圖（3:2）與角色立繪（1:1） */
.mode-item { flex-direction: row; align-items: center; gap: 14px; }
.mode-item .link-img { flex: 0 0 96px; }
.mode-text { display: grid; gap: 4px; min-width: 0; }
.link-img {
  display: block; width: 96px; height: auto;
  border-radius: 10px; background: var(--line);
}
.char { display: block; width: 96px; height: auto; flex: 0 0 auto; }
.char--lg { width: 148px; margin: 0 auto 8px; }

/* 共用題目區塊 */
.stage, .q-block, .result, .done {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.q-type { color: var(--muted); font-size: 0.85rem; margin: 0 0 8px; }
.q-prompt { font-size: 1.15rem; font-weight: 600; margin: 0 0 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.choices { display: grid; gap: 10px; }
.choice {
  background: var(--bg); border: 1px solid var(--line); text-align: left;
  padding: 12px 14px; overflow-wrap: anywhere;
}
.choice.is-correct { border-color: var(--ok); color: var(--ok); }
.choice.is-wrong { border-color: var(--bad); color: var(--bad); }
.opt { display: flex; gap: 8px; align-items: flex-start; padding: 10px 0; min-height: var(--tap); overflow-wrap: anywhere; }
.write-form { display: flex; gap: 8px; flex-wrap: wrap; }
.write-form input, .q-block input[type="text"] {
  flex: 1 1 180px; min-width: 0; min-height: var(--tap);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg);
}
.write-form .primary { width: auto; flex: 0 0 auto; }
.feedback { min-height: 1.6em; margin: 12px 0 0; }
.feedback.ok { color: var(--ok); }
.feedback.bad { color: var(--bad); }

/* 學習進度 */
.progress-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--brand); transition: width 0.3s; }
.progress-text { color: var(--muted); font-size: 0.88rem; margin: 8px 0 12px; }

/* 閃卡 */
.fc-card { perspective: 1200px; margin-bottom: 12px; }
/* 兩面用 grid 疊在同一格（不用 absolute），長題目才能把卡片撐高而不是溢出遮住下方計數 */
.fc-inner {
  display: grid; transform-style: preserve-3d; transition: transform 0.45s;
  min-height: 220px;
}
.fc-inner.is-flipped { transform: rotateY(180deg); }
.fc-face {
  grid-area: 1 / 1; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 18px; font-size: 1.25rem; overflow-wrap: anywhere; white-space: pre-wrap;
}
.fc-back { transform: rotateY(180deg); }
.fc-count { text-align: center; color: var(--muted); font-size: 0.9rem; }
.fc-nav { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 8px; margin-bottom: 12px; }
.mark { border: 1px solid var(--line); background: var(--card); }
.mark.ok { color: var(--ok); }
.mark.bad { color: var(--bad); }
.fc-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fc-secs { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.9rem; }
.fc-secs input { width: 68px; min-height: var(--tap); padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }

/* 測驗 */
.test-setup { display: grid; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.test-setup h2 { margin: 0; font-size: 1.05rem; }
.test-setup select { min-height: var(--tap); padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); width: 100%; }
.test-setup fieldset { border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-wrap: wrap; gap: 12px; }
.setup-error { color: var(--bad); margin: 0; min-height: 1.2em; font-size: 0.9rem; }
.review { padding-left: 1.2em; display: grid; gap: 12px; }
.review li.ok { color: var(--ok); }
.review li.bad { color: var(--bad); }
.review p { margin: 2px 0; color: var(--ink); }
.review li.bad > p:last-child { color: var(--ok); }

/* 配對 */
.match-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1rem; }
.best { color: var(--muted); font-size: 0.9rem; }
.match-head .ghost { margin-left: auto; }
.match-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .match-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  min-height: 84px; padding: 8px; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 0.86rem; line-height: 1.3; height: 100%;
}
/* 對聯之類的長題面一律完整顯示：截字就配不出來（格子會隨內容變高，同列一起長高） */
.tile span { overflow-wrap: anywhere; }
.tile.is-picked { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.tile.is-wrong { border-color: var(--bad); color: var(--bad); }
.tile.is-matched { visibility: hidden; }
.match-done { text-align: center; margin-top: 16px; }
.match-done h2, .done h2 { margin: 0 0 8px; }