/* 全站基礎樣式與設計 token。
   其他組（自學區、遊戲庫編輯）沿用這裡的變數與元件 class，請勿寫死顏色。 */

:root {
  /* 色彩：潑墨酒精畫色票（松煙黑／普魯士藍／宣紙米／舊金／火漆紅），見 docs/ART-BIBLE.md */
  --c-bg: #f4ede0;            /* 宣紙米 */
  --c-surface: #fbf7ee;
  --c-surface-2: #e9dfcb;
  --c-border: #d2c5ab;
  --c-text: #1a1a1e;          /* 松煙黑 */
  --c-text-dim: #4a5768;
  --c-primary: #2e4057;       /* 普魯士藍 */
  --c-primary-ink: #f4ede0;
  --c-primary-soft: #dde3ea;
  --c-success: #3e5f45;       /* 墨綠（正確） */
  --c-success-soft: #dfe7dc;
  --c-danger: #9e2b25;        /* 火漆紅 */
  --c-danger-soft: #f2ded9;
  --c-warn: #8f6f12;          /* 舊金（文字用的暗階） */
  --c-warn-soft: #f0e6c9;
  --c-gold: #c9a227;          /* 舊金原色，只作金屬脈絡般的細線點綴 */

  /* 間距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(26, 26, 30, .10), 0 8px 24px rgba(46, 64, 87, .10);

  /* 字級（行動優先，用 clamp 讓大螢幕自動放大） */
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 19px;
  --fs-xl: clamp(22px, 3.4vw, 30px);
  --fs-2xl: clamp(28px, 5vw, 44px);
  --fs-3xl: clamp(36px, 8vw, 76px);

  --tap: 52px;              /* 最小可點擊高度 */
  --font: system-ui, -apple-system, "Noto Sans TC", "PingFang TC",
          "Microsoft JhengHei", sans-serif;
}

/* 深色模式＝倫敦夜霧：底色壓成墨與普魯士藍，字色改用宣紙米 */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #14161b;
    --c-surface: #1e222b;
    --c-surface-2: #262c38;
    --c-border: #3a4353;
    --c-text: #f4ede0;
    --c-text-dim: #a9b0be;
    --c-primary: #8fa8c4;     /* 普魯士藍提亮，深底上才讀得到 */
    --c-primary-ink: #14161b;
    --c-primary-soft: #24303f;
    --c-success: #6fbf8e;
    --c-success-soft: #1b2e23;
    --c-danger: #e0665e;      /* 火漆紅提亮 */
    --c-danger-soft: #33191a;
    --c-warn: #d9b23f;
    --c-warn-soft: #33290f;
    --c-gold: #d9b23f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;         /* 行動裝置不可水平捲動 */
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-text);
  /* 紙張質地：兩層極淡的墨暈（純 CSS 漸層，不引用任何外部圖檔） */
  background-color: var(--c-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%);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--sp-3); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-3); }
a { color: var(--c-primary); }

.wrap {
  width: min(100%, 960px);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
}
.wrap--wide { width: min(100%, 1440px); }

.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.row--between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--c-text-dim); }
.small { font-size: var(--fs-sm); }
.center { text-align: center; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 卡片 */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--sp-5);
}
.card + .card { margin-top: var(--sp-4); }

/* 按鈕 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-5);
  font: inherit;
  font-weight: 600;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  transition: transform .08s ease, background-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled='true'] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
.btn--primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-primary-ink);
}
.btn--danger {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: #fff;
}
.btn--ghost { background: transparent; }
.btn--block { display: flex; width: 100%; }
.btn--lg { min-height: 64px; font-size: var(--fs-lg); }

/* 表單 */
.field { display: block; }
.field > .label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.input, .select, .textarea {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  font-size: 16px;                 /* iOS 聚焦不自動放大 */
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.input:focus, .select:focus, .textarea:focus {
  outline: 3px solid var(--c-primary);
  outline-offset: 1px;
}
.hint { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-dim); }
.hint--error { color: var(--c-danger); font-weight: 600; }

/* 提示條 */
.note {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
}
.note--info { background: var(--c-primary-soft); border-color: transparent; }
.note--warn { background: var(--c-warn-soft); border-color: transparent; }
.note--error { background: var(--c-danger-soft); border-color: transparent; }
.note--ok { background: var(--c-success-soft); border-color: transparent; }

/* 首頁入口 */
.tiles {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
}
.tile {
  display: block;
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
}
.tile h2 { margin: var(--sp-3) 0 var(--sp-2); }

/* ---------- 配圖 ---------- */

/* 連結配圖（3:2）：撐滿卡片寬度，高度由比例決定，不會造成版面位移 */
.link-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--c-surface-2);
}
/* 夾在表單／區塊裡的小配圖，不必撐滿一整行 */
.link-img--inline { width: min(100%, 240px); }
/* 首頁主視覺（16:9） */
.hero {
  display: block;
  width: min(100%, 720px);
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  border-bottom: 2px solid var(--c-gold);
  background: var(--c-surface-2);
}
/* 角色立繪（1:1）：一個畫面最多一位，留白是這套美術的重點 */
.char {
  display: block;
  width: 96px;
  height: auto;
  flex: 0 0 auto;
}
.char--lg { width: 148px; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}