/**
 * 注音與字型樣式
 *
 * 對應規格「四、UI/UX 與注音排版技術規範」：
 * - ruby-position: inter-character 將注音直式排在國字右側，
 *   符合台灣國小課本排版習慣。
 * - 字體採「字嗨注音標楷」（教育部標準楷書之開源實作，Apache-2.0），
 *   避免使用黑體或圓體展示生字，以免「木」的鉤筆、「心」的點筆位置
 *   與學校教學不符。
 * - 所有可點擊元件最小感應範圍不得小於 64x64 px。
 */

@font-face {
  font-family: "Bpmf Zihi KaiStd";
  src: url("../assets/fonts/BpmfZihiKaiStd-Subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
 * 補充字型：字嗨標準楷體（SIL OFL 1.1）
 *
 * 主力字型「Bpmf Zihi KaiStd」帶有 ss01–ss10 注音變體（破音字異體、
 * 部首異形），但其字庫缺少 氵、亻 與第一聲符號 ˉ。瀏覽器依字型串列
 * 逐一 fallback，只有缺字的字符才會落到本字型，既有字形仍走主力字型。
 */
@font-face {
  font-family: "Zihi KaiStd";
  src: url("../assets/fonts/ZihiKaiStd-Subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 教材字體 */
  --font-hanzi: "Bpmf Zihi KaiStd", "Zihi KaiStd", "DFKai-SB", "KaiTi", "STKaiti", serif;
  --font-zhuyin: "Bpmf Zihi KaiStd", "Zihi KaiStd", "DFKai-SB", "KaiTi", "STKaiti", serif;
  --font-ui: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;

  /* 主題色（2D 繪本圓潤卡通風） */
  --color-sky: #bfe9f7;
  --color-grass: #a8e6a3;
  --color-sun: #ffd782;
  --color-coral: #ffab91;
  --color-lilac: #d7b8f0;
  --color-ink: #3d3226;
  --color-ink-soft: #6b5d4d;
  --color-card: #fffdf7;
  --color-accent: #ff9f68;
  --color-correct: #7cc576;
  --color-wrong: #f4a09c;

  /* 低年級觸控友善尺寸 */
  --touch-min: 64px;
  --drag-tolerance: 48px;

  /* 圓潤圓角 */
  --radius-card: 28px;
  --radius-button: 999px;
}

/* ── 基礎版面 ────────────────────────────────────────────── */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-ui);
  color: var(--color-ink);
  background: var(--color-sky);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  user-select: none;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ── 注音雙軌排版 ────────────────────────────────────────── */

/*
 * 直式注音：注音排在國字右側（台灣國小課本排版習慣）。
 *
 * 瀏覽器支援狀況
 * --------------
 * 規格指定的 `ruby-position: inter-character` 目前僅 Firefox 實作，
 * Chrome / Safari / Edge 皆不支援，CSS.supports() 會回傳 false，
 * 實際排版會退回為橫排（over）。
 *
 * 因此此處採取雙軌策略：
 * 1. 仍宣告 ruby-position: inter-character，於支援的瀏覽器上直接生效。
 * 2. 另以 @supports not (...) 提供 fallback：以 writing-mode: vertical-rl
 *    讓 <rt> 內容直向排列，並以 display: inline-block 與 flex 對齊，
 *    達成「注音直排在國字右側」的視覺效果，與課本排版一致。
 */
ruby.zhiyin-zhi {
  ruby-position: inter-character;
  ruby-align: center;
}

/* 瀏覽器不支援 inter-character 時的直式注音 fallback */
@supports not (ruby-position: inter-character) {
  ruby.zhiyin-zhi {
    display: inline-flex;
    align-items: flex-start;
    vertical-align: middle;
    line-height: 1.05;
  }

  ruby.zhiyin-zhi > rb {
    display: inline-block;
    line-height: 1.05;
  }

  ruby.zhiyin-zhi > rt {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    line-height: 1;
    font-size: 0.42em;
    margin-left: 0.08em;
    /* 不可設定 height：注音字數不定（2～5 個符號），
       固定高度會壓縮或溢出。讓高度由內容自然決定。 */
    height: auto;
  }

  /* 單一注音符號：直排時的最小方塊，確保每個符號各佔一列 */
  ruby.zhiyin-zhi > rt > .zhiyin-unit {
    display: block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-align: center;
  }
}

/* 橫式注音：注音排在國字上方（作為輔助與註解用途） */
ruby.zhiyin-heng {
  ruby-position: over;
  ruby-align: center;
}

/* 國字本體 */
ruby.zhiyin-zhi > rb,
ruby.zhiyin-heng > rb {
  font-family: var(--font-hanzi);
  font-weight: 400;
}

/* 注音本體 */
ruby.zhiyin-zhi > rt,
ruby.zhiyin-heng > rt {
  font-family: var(--font-zhuyin);
  font-weight: 400;
  font-size: 0.5em;
  letter-spacing: 0;
  line-height: 1;
  color: var(--color-ink-soft);
  -webkit-user-select: none;
  user-select: none;
}

/* 單純顯示注音的標籤 */
.zhiyin-tag {
  font-family: var(--font-zhuyin);
  color: var(--color-ink-soft);
  line-height: 1;
}

/* 教材文字區塊 */
.zhiyin-text {
  font-family: var(--font-hanzi);
  line-height: 2.1;
  letter-spacing: 0.08em;
}

/* 大字展示（生字卡、筆順區） */
.zhiyin-large {
  font-family: var(--font-hanzi);
  font-size: clamp(3rem, 12vw, 6rem);
  line-height: 1.4;
}

/* ── 觸控友善元件 ────────────────────────────────────────── */

button,
.tappable {
  font-family: var(--font-ui);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-card);
  box-shadow: 0 4px 0 rgba(61, 50, 38, 0.16);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

button:active,
.tappable:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(61, 50, 38, 0.16);
}

button:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* ── 動畫 ────────────────────────────────────────────────── */

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes pop-in {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-8px) rotate(-3deg); }
  40% { transform: translateX(8px) rotate(3deg); }
  60% { transform: translateX(-5px) rotate(-2deg); }
  80% { transform: translateX(5px) rotate(2deg); }
}

@keyframes sparkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes bounce-in {
  0% { transform: translateY(40px) scale(0.9); opacity: 0; }
  70% { transform: translateY(-6px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}