/*!
 * Spot the Anomaly (燒腦捉怪) — Global Site CSS
 * Version: v1.0.0
 * Date: 2025-10-16
 * Author: 小愛 (GPT-5 Thinking)
 * Stack: Bootstrap 5.x + jQuery 3.x (RWD / Mobile-First)
 * Notes:
 *  - 本檔為全站共用樣式，所有頁面請直接引用。
 *  - 主題以「淺色系」為主，並預留 data-theme="dark" 的變數鉤子。
 *  - 優先遵循 Bootstrap 結構；僅加強品牌化與遊戲化元件。
 *  - 命名慣例：站內客製以 .sna-* (Spot-the-ANomaly) 為前綴，避免衝突。
 */

/* ---------------------------------------------
   0) CSS 變數 (Design Tokens)
   --------------------------------------------- */
:root {
  /* Brand palette (Light / 淺色為主) */
  --brand-50:    #f5f7ff;
  --brand-100:   #e8edff;
  --brand-200:   #d4dcff;
  --brand-300:   #b7c4ff;
  --brand-400:   #8ea2ff;
  --brand-500:   #6e86ff; /* 主色: 按鈕/連結/CTA */
  --brand-600:   #5b73ff;
  --brand-700:   #4d61df;
  --brand-800:   #3e50b8;
  --brand-900:   #2f3c8a;

  /* Accent (金幣/獎勵) */
  --accent-50:   #fff8e6;
  --accent-100:  #ffeec0;
  --accent-200:  #ffe18a;
  --accent-300:  #ffd352;
  --accent-400:  #ffbf21;
  --accent-500:  #ffb300; /* 金幣主色 */
  --accent-600:  #e39f00;
  --accent-700:  #ba8300;
  --accent-800:  #916800;
  --accent-900:  #6b4d00;

  /* Semantic */
  --success-500: #28a745;
  --info-500:    #17a2b8;
  --warning-500: #ffc107;
  --danger-500:  #dc3545;

  /* Neutrals */
  --bg-0:  #ffffff;
  --bg-50: #fafbfe;
  --bg-100:#f6f7fb;
  --bg-200:#eef0f7;
  --line-200:#e7e9f2;
  --text-900:#0f172a;   /* 主文字 */
  --text-700:#1f2937;
  --text-600:#334155;
  --text-500:#475569;
  --text-400:#6b7280;
  --muted-400:#94a3b8;

  /* Shadow / Elevation */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 2px 8px rgba(16, 24, 40, .10);
  --shadow-lg: 0 10px 24px rgba(16, 24, 40, .14);

  /* Radius */
  --r-6:  .375rem;   /* 6px */
  --r-10: .625rem;   /* 10px */
  --r-16: 1rem;      /* 16px */
  --r-20: 1.25rem;   /* 20px */
  --r-pill: 9999px;

  /* Spacing (8pt base) */
  --sp-2:  .25rem;
  --sp-4:  .5rem;
  --sp-6:  .75rem;
  --sp-8:  1rem;
  --sp-12: 1.5rem;
  --sp-16: 2rem;
  --sp-20: 2.5rem;
  --sp-24: 3rem;

  /* Typography */
  --ff-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", sans-serif;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 2.5vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 3.2vw, 2rem);
  --fs-3xl: clamp(1.75rem, 4vw, 2.5rem);
  --lh-tight: 1.2;
  --lh-normal: 1.6;

  /* Focus Ring */
  --focus-ring: 0 0 0 3px rgba(110,134,255,.25);

  /* Z-index scale */
  --z-navbar: 1030;
  --z-cta: 1040;
}

/* 預留未來暗色主題（目前仍以淺色為主） */
[data-theme="dark"] {
  --bg-0: #0b1020;
  --bg-50:#0f1428;
  --bg-100:#141a33;
  --line-200:#1f2842;
  --text-900:#eef2ff;
  --text-700:#dbe4ff;
  --text-600:#cbd5ff;
  --text-500:#b7c0ff;
  --text-400:#96a2ff;
  --muted-400:#7c88c7;
}

/* ---------------------------------------------
   1) 基礎排版 / Reset 增強
   --------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  background: var(--bg-50);
  color: var(--text-700);
  font-family: var(--ff-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6 {
  color: var(--text-900);
  margin-top: 0;
  margin-bottom: .66em;
  font-weight: 700;
  line-height: var(--lh-tight);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-sm); }
p { margin-bottom: 1rem; color: var(--text-600); }

a {
  color: var(--brand-600);
  text-decoration: none;
}
a:hover { color: var(--brand-700); text-decoration: underline; }
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--brand-500);
}

/* 圖片圓角與陰影的安全預設 */
img { max-width: 100%; height: auto; border-radius: var(--r-10); box-shadow: var(--shadow-sm); }

/* ---------------------------------------------
   2) 導覽列 / Navbar + 高可見 CTA
   --------------------------------------------- */
.sna-navbar {
  position: sticky; top: 0; z-index: var(--z-navbar);
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--line-200);
}
.sna-navbar .navbar-brand { font-weight: 800; color: var(--text-900); }
.sna-navbar .nav-link { color: var(--text-600); font-weight: 600; }
.sna-navbar .nav-link:hover { color: var(--text-900); }
.sna-navbar.is-scrolled { box-shadow: var(--shadow-md); }

/* Sticky CTA（行動主導：開始捉怪） */
.sna-cta-bar {
  position: sticky; bottom: 0; z-index: var(--z-cta);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 20% 100%);
  padding: var(--sp-12) var(--sp-8);
}
.sna-cta-bar .btn-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--brand-600); color: #fff;
  padding: .75rem 1.25rem;
  border-radius: var(--r-pill);
  box-shadow: 0 6px 18px rgba(110,134,255,.35);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  font-weight: 800;
}
.sna-cta-bar .btn-cta:hover { transform: translateY(-1px); background: var(--brand-700); box-shadow: 0 10px 22px rgba(110,134,255,.42); }
.sna-cta-bar .btn-cta:active { transform: translateY(0); }

/* ---------------------------------------------
   3) 按鈕 / Buttons（延伸 Bootstrap）
   --------------------------------------------- */
.btn {
  border-radius: var(--r-10);
  font-weight: 700;
}
.btn-primary {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:focus + .btn-primary,
.btn-primary:disabled {
  background-color: var(--brand-700);
  border-color: var(--brand-700);
}
.btn-outline-primary {
  color: var(--brand-700);
  border-color: var(--brand-300);
  background: transparent;
}
.btn-outline-primary:hover {
  color: #fff;
  background: var(--brand-600);
  border-color: var(--brand-600);
}

/* 次要色與金幣強調 */
.btn-accent {
  color: #3b2b00;
  background: var(--accent-400);
  border-color: var(--accent-500);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
}
.btn-accent:hover { background: var(--accent-500); border-color: var(--accent-600); color: #2a1f00; }

/* ---------------------------------------------
   4) 卡片 / Cards（延伸 Bootstrap）
   --------------------------------------------- */
.card {
  border: 1px solid var(--line-200);
  border-radius: var(--r-16);
  box-shadow: var(--shadow-sm);
}
.card-header {
  background: var(--bg-0);
  border-bottom: 1px solid var(--line-200);
  font-weight: 700;
  color: var(--text-700);
}
.card.sna-emphasis {
  background: linear-gradient(180deg, var(--bg-0), var(--bg-100));
  border: 1px solid var(--brand-100);
  box-shadow: 0 8px 24px rgba(110,134,255,.12);
}

/* ---------------------------------------------
   5) 表單與輸入 / Forms
   --------------------------------------------- */
.form-control, .form-select {
  border-radius: var(--r-10);
  border-color: var(--line-200);
  background: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-500);
  box-shadow: var(--focus-ring);
}
.input-group-text {
  background: var(--bg-100);
  border-color: var(--line-200);
}

/* ---------------------------------------------
   6) 警示/徽章/Toast
   --------------------------------------------- */
.alert { border-radius: var(--r-10); }
.badge { border-radius: var(--r-pill); font-weight: 700; }

.badge-coin {
  background: var(--accent-100);
  color: #6b4d00;
  border: 1px solid var(--accent-200);
}
.toast {
  border-radius: var(--r-10);
  border: 1px solid var(--line-200);
  box-shadow: var(--shadow-lg);
}

/* ---------------------------------------------
   7) 表格 / Tables（閱讀性）
   --------------------------------------------- */
.table {
  --bs-table-striped-bg: var(--bg-100);
  --bs-table-hover-bg:   var(--brand-50);
  border-color: var(--line-200);
}
.table > :not(caption) > * > * {
  padding: .75rem .875rem;
  vertical-align: middle;
}
.table thead th {
  font-weight: 800; color: var(--text-600);
  border-bottom: 1px solid var(--line-200);
}

/* ---------------------------------------------
   8) 網站區塊 / Sections
   --------------------------------------------- */
.sna-section {
  padding: var(--sp-16) 0;
}
.sna-section--alt {
  background: linear-gradient(180deg, var(--bg-50), var(--bg-0));
  border-top: 1px solid var(--line-200);
  border-bottom: 1px solid var(--line-200);
}
.sna-hero {
  padding: var(--sp-20) 0 var(--sp-16);
}
.sna-hero .lead {
  font-size: var(--fs-lg);
  color: var(--text-500);
}

/* ---------------------------------------------
   9) 遊戲化元件（Story / 選項 / HUD）
   --------------------------------------------- */
/* Story 容器 */
.sna-story-box {
  background: var(--bg-0);
  border: 1px solid var(--line-200);
  border-radius: var(--r-16);
  padding: var(--sp-12);
  box-shadow: var(--shadow-sm);
}
.sna-story-box .sna-story-title {
  font-weight: 800; color: var(--text-900);
  margin-bottom: .25rem;
}
.sna-story-box .sna-story-meta {
  font-size: var(--fs-sm);
  color: var(--muted-400);
  margin-bottom: .75rem;
}

/* 選項（四選一） */
.sna-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .875rem;
  margin-bottom: .75rem;
  border: 1.5px solid var(--line-200);
  border-radius: var(--r-10);
  background: #fff;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.sna-option:hover { border-color: var(--brand-300); background: var(--brand-50); }
.sna-option input[type="radio"] { accent-color: var(--brand-600); }
.sna-option.correct {
  border-color: #22c55e; background: #ecfdf5;
  box-shadow: 0 0 0 3px rgba(34,197,94,.15) inset;
}
.sna-option.incorrect {
  border-color: #ef4444; background: #fef2f2;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12) inset;
}
.sna-hint {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .6rem;
  background: var(--brand-50);
  color: var(--brand-800);
  border: 1px dashed var(--brand-300);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* 金幣 HUD */
.sna-coin-hud {
  position: sticky; top: .5rem; z-index: var(--z-cta);
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid var(--accent-200);
  border-radius: var(--r-pill); padding: .35rem .6rem;
  box-shadow: var(--shadow-sm);
}
.sna-coin {
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff7cc 0%, var(--accent-400) 40%, var(--accent-600) 100%);
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.08);
}
.sna-coin-hud .count { font-weight: 800; color: #6b4d00; }

/* 卡牌小徽章 */
.sna-card-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .5rem;
  border-radius: var(--r-pill);
  background: var(--bg-100);
  border: 1px solid var(--line-200);
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-600);
}

/* ---------------------------------------------
   10) Footer
   --------------------------------------------- */
.sna-footer {
  background: var(--bg-0);
  border-top: 1px solid var(--line-200);
  padding: var(--sp-16) 0;
  color: var(--text-500);
}
.sna-footer a { color: var(--text-600); }
.sna-footer a:hover { color: var(--text-900); }

/* ---------------------------------------------
   11) 動畫與偏好
   --------------------------------------------- */
.sna-fade-in { animation: sna-fade-in .24s ease-out both; }
@keyframes sna-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------
   12) RWD 補強（Mobile-First）
   --------------------------------------------- */
/* >=576px (sm) */
@media (min-width: 576px) {
  .sna-hero { padding: var(--sp-24) 0 var(--sp-16); }
  .sna-story-box { padding: var(--sp-16); }
}
/* >=768px (md) */
@media (min-width: 768px) {
  .sna-section { padding: var(--sp-20) 0; }
  .sna-cta-bar { display: none; } /* 平板以上隱藏底部 CTA，改用 Navbar 右上角 */
}
/* >=992px (lg) */
@media (min-width: 992px) {
  body { font-size: 1.0625rem; }
  .sna-hero .lead { font-size: 1.25rem; }
}
/* >=1200px (xl) */
@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}
/* >=1400px (xxl) */
@media (min-width: 1400px) {
  .container { max-width: 1240px; }
}

/* ---------------------------------------------
   13) 公用工具類（Utilities）
   --------------------------------------------- */
.sna-shadow-sm { box-shadow: var(--shadow-sm) !important; }
.sna-shadow-md { box-shadow: var(--shadow-md) !important; }
.sna-shadow-lg { box-shadow: var(--shadow-lg) !important; }
.sna-rounded-10 { border-radius: var(--r-10) !important; }
.sna-rounded-16 { border-radius: var(--r-16) !important; }
.sna-rounded-pill { border-radius: var(--r-pill) !important; }
.sna-text-muted { color: var(--muted-400) !important; }
.sna-text-strong { color: var(--text-900) !important; font-weight: 800 !important; }
.sna-bg-soft { background: var(--bg-0) !important; }
.sna-bg-alt  { background: var(--bg-100) !important; }
.sna-border { border: 1px solid var(--line-200) !important; }
.sna-link { color: var(--brand-600); text-decoration: underline; font-weight: 700; }
.sna-kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
           background: var(--bg-100); border: 1px solid var(--line-200);
           border-bottom-width: 2px; border-radius: .4rem; padding: .15rem .4rem; }

/* ---------------------------------------------
   14) 排版元件：步驟引導/標籤雲/數值展示
   --------------------------------------------- */
.sna-steps { counter-reset: step; }
.sna-step {
  position: relative; padding-left: 2.25rem; margin-bottom: .75rem;
}
.sna-step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: .1rem;
  width: 1.6rem; height: 1.6rem;
  border-radius: var(--r-pill);
  background: var(--brand-600); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 800;
  box-shadow: var(--shadow-sm);
}
.sna-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .6rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-200); background: var(--bg-0);
  font-size: var(--fs-xs); color: var(--text-600); font-weight: 700;
}
.sna-stat {
  display: grid; gap: .25rem;
}
.sna-stat .label { color: var(--muted-400); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .02em; }
.sna-stat .value { color: var(--text-900); font-size: var(--fs-2xl); font-weight: 800; line-height: var(--lh-tight); }

/* ---------------------------------------------
   15) 模組：FAQ / 手風琴 / 搜尋列
   --------------------------------------------- */
.sna-accordion .accordion-button {
  font-weight: 700;
  color: var(--text-700);
}
.sna-accordion .accordion-button:not(.collapsed) {
  color: var(--text-900);
  background: var(--brand-50);
}
.sna-searchbar {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border: 1px solid var(--line-200);
  border-radius: var(--r-10); background: #fff;
}
.sna-searchbar input {
  border: 0; outline: none; width: 100%; background: transparent;
}

/* ---------------------------------------------
   16) Modal / Tooltip 強化
   --------------------------------------------- */
.modal-content { border-radius: var(--r-16); border: 1px solid var(--line-200); box-shadow: var(--shadow-lg); }
.tooltip-inner { border-radius: .5rem; padding: .4rem .6rem; font-weight: 600; }

/* ---------------------------------------------
   17) 列印樣式
   --------------------------------------------- */
@media print {
  .sna-cta-bar, .navbar, .sna-footer { display: none !important; }
  body { background: #fff !important; }
  .card, .sna-story-box { box-shadow: none !important; border-color: #ddd; }
}