/* ============================================================
   統一主題 · 紫色玻璃風
   配合「課堂小測驗工作坊」的設計語言：漸變底、半透明玻璃卡、
   900 字重標題、14/20px 圓角、漸變按鈕。
   本檔為附加覆蓋層，不改動原有 bundle，移除即回復原樣。
   ============================================================ */

:root {
  /* 底色漸變（紫） */
  --bg1:#fbf9ff; --bg2:#f1ebfd; --bg3:#e2d7f8; --bg4:#d8cbf6;

  /* 文字 */
  --ink:#2a1c4a;
  --muted:#5b4494;
  --faint:#8574b0;

  /* 卡片 */
  --card:rgba(255,255,255,.80);
  --cardline:rgba(110,70,200,.18);
  --shadow:rgba(80,50,150,.10);

  /* 主色 */
  --accent:#7a45e0;
  --accent-deep:#5a2fb0;
  --accent-soft:#a982f5;

  /* 原有語意色改為紫系家族，三款遊戲仍然分得清 */
  --paper:#ffffff;
  --cream:#f5efff;
  --coral:#7a45e0;   /* 配對 · 紫 */
  --mint:#4f5bd5;    /* 分類 · 靛藍 */
  --blue:#9d5bc7;    /* 排序 · 梅紫 */
  --violet:#7a45e0;
  --yellow:#c9a8f5;
  --red:#c0392b;
  --green:#2e7d5b;
}

/* ---------- 底：漸變取代波點 ---------- */
body {
  background: linear-gradient(160deg,var(--bg1) 0%,var(--bg2) 38%,var(--bg3) 72%,var(--bg4) 100%) fixed !important;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 標題：900 字重、收緊字距 ---------- */
h1 {
  color: var(--ink) !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;
}
h2, h3 {
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -.02em;
}

/* ---------- 玻璃卡：柔化所有粗邊容器 ---------- */
.comparison-table,
.concept-strip,
.data-card,
.guide-grid article,
.planner-card,
.planner-table,
.playground,
.preflight,
.prompt-card,
.prompt-formula,
.publish-note,
.publish-ready,
.publish-section,
.rescue-grid article,
.teacher-tip,
.test-grid article,
.visual-edit-tip,
.workshop-section,
.workshop-steps article {
  background: var(--card) !important;
  backdrop-filter: blur(8px);
  border: 1px solid var(--cardline) !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 20px var(--shadow) !important;
}

/* 巢狀小塊：稍微實色，維持層次 */
.preflight li,
.publish-steps li,
.animal-card,
.habitat,
.train-slot,
.play-card {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--cardline) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px var(--shadow) !important;
}

/* 可點擊的遊戲卡：hover 給回饋 */
.play-card:hover, .animal-card:hover, .train-slot:hover {
  border-color: var(--accent) !important;
  background: #fff !important;
}

/* ---------- 按鈕：漸變、14px 圓角 ---------- */
.module-tab,
.sound-button,
.sequence-tools button,
.step-bank button,
.planner-head button,
.rescue-grid button,
.complete-banner button {
  border: 1px solid var(--cardline) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px var(--shadow) !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--ink) !important;
  transition: all .25s;
}
.module-tab:hover,
.sound-button:hover,
.sequence-tools button:hover,
.step-bank button:hover,
.planner-head button:hover,
.rescue-grid button:hover,
.complete-banner button:hover {
  border-color: var(--accent) !important;
  transform: translateY(-1px);
}

/* 選中的遊戲分頁 */
.module-tab[aria-selected="true"],
.module-tab.is-active,
.module-tab.active,
.module-tab[data-active="true"] {
  background: linear-gradient(120deg,var(--accent-deep),var(--accent)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(90,47,176,.30) !important;
}
.module-tab[aria-selected="true"] *,
.module-tab.is-active *,
.module-tab.active *,
.module-tab[data-active="true"] * { color: #fff !important; }
.module-tab.active .module-icon { background: rgba(255,255,255,.22) !important; box-shadow: none !important; }

/* ---------- 語言切換 ---------- */
.language-switch {
  background: var(--card) !important;
  backdrop-filter: blur(8px);
  border: 1px solid var(--cardline) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px var(--shadow) !important;
}
.language-switch button[aria-pressed="true"],
.language-switch button.is-active,
.language-switch button.active {
  background: linear-gradient(120deg,var(--accent-deep),var(--accent)) !important;
  color: #fff !important;
  border-radius: 10px !important;
}

/* ---------- 模組圖示：保持實色方塊，換紫系 ---------- */
.module-icon {
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(90,47,176,.28) !important;
  color: #fff !important;
}

/* ---------- 眉標 / 標籤 ---------- */
.eyebrow {
  background: linear-gradient(120deg,var(--accent-deep),var(--accent)) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(90,47,176,.28) !important;
  color: #fff !important;
  letter-spacing: .12em;
}

.section-heading > span,
.prompt-formula b,
.test-grid b,
.workshop-steps b,
.hero-flow i { color: var(--accent) !important; }

/* ---------- 完成橫幅 ---------- */
.complete-banner {
  background: linear-gradient(120deg,rgba(122,69,224,.10),rgba(169,130,245,.16)) !important;
  border: 1px solid var(--cardline) !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 20px var(--shadow) !important;
}

/* ---------- 提示詞 / 程式碼區塊 ---------- */
.prompt-card pre, .prompt-body, pre {
  background:#211640 !important;
  color:#e6ddfa !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:14px !important;
}

/* ---------- 表格 ---------- */
.comparison-table th, .planner-table th {
  color: var(--muted) !important;
  letter-spacing: .06em;
}
.comparison-table td, .planner-table td,
.comparison-table th, .planner-table th {
  border-color: var(--cardline) !important;
}

/* ---------- 連結 ---------- */
a { color: var(--accent); }
.publish-note a {
  border: 1px solid var(--cardline) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px var(--shadow) !important;
  background: rgba(255,255,255,.92) !important;
}

/* ---------- 箭嘴 / 分隔 ---------- */
.pair-arrow {
  box-shadow: none !important;
  color: var(--accent) !important;
}

/* ---------- 三個遊戲區的局部色調：改為紫系，仍可分辨 ---------- */
.playground          { --soft:#f3ecfd !important; }  /* 配對 · 淡紫 */
.playground-sort     { --soft:#ebeefb !important; }  /* 分類 · 淡靛 */
.playground-sequence { --soft:#f7ecfa !important; }  /* 排序 · 淡梅 */

.matching-board, .game-status { background: var(--soft) !important; }

/* ---------- preflight：琥珀 → 紫 ---------- */
.preflight { background: var(--card) !important; }
.preflight > span { color: var(--accent) !important; }
.preflight details { border-top-color: var(--cardline) !important; }
.preflight li { border-color: var(--cardline) !important; }

/* ---------- 遊戲選取狀態：淡黃 → 淡紫（與答對綠、答錯紅仍分得清）---------- */
.play-card.selected, .animal-card.selected {
  background:#ede4fd !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(122,69,224,.18) !important;
}

/* 答對／答錯維持語意色 */
.play-card.correct, .train-complete .train-slot { border-color:#2e7d5b !important; background:#eaf7f0 !important; }
.play-card.wrong, .animal-card.wrong, .train-slot.wrong { background:#fdeaec !important; border-color:#c0392b !important; }

/* ---------- 其餘暖色底卡 ---------- */
.objective-card, .publish-note, .workshop-section, .teacher-tip {
  background: var(--card) !important;
}
.variation-card { background: rgba(243,236,253,.85) !important; }
.variation-card > ul li { border-bottom-color: var(--cardline) !important; }
.variation-card > ul b { color: var(--accent) !important; }

/* ---------- 黃色強調底改紫（沿用 --yellow 的元件）---------- */
.concept-strip div.highlight,
.game-status b,
.train-slot > small,
.sequence-tools .check-order,
.publish-ready span,
.table-head > * {
  background: linear-gradient(120deg,var(--accent-deep),var(--accent)) !important;
  color: #fff !important;
  border-radius: 10px !important;
}
.prompt-head span { color: var(--accent-soft) !important; }
.prompt-head button, .rescue-grid button, .planner-head button {
  background: linear-gradient(120deg,var(--accent-deep),var(--accent)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(90,47,176,.28) !important;
}

/* ---------- 深色模式：保持單一淺色設計，維持可讀 ---------- */
@media (prefers-color-scheme: dark) {
  body { color: var(--ink); }
}

/* ---------- 遊戲區頂部分隔線：3px 深色 → 1px 柔線 ---------- */
.playground-head {
  border-bottom: 1px solid var(--cardline) !important;
  background: rgba(255,255,255,.55) !important;
}
.playground { overflow: hidden !important; }

/* ---------- 概念條 ---------- */
.concept-strip { background: var(--card) !important; }
.concept-strip > div { border-color: var(--cardline) !important; }

/* ---------- 最後掃尾 ---------- */
.preflight span { color: var(--accent) !important; }
footer { border-top: 1px solid var(--cardline) !important; color: var(--faint); }
footer a { color: var(--accent) !important; }