/* ══════════════════════════════════════════════════════════
   數格拉底 · Pixel Design System v4
   "Cozy Pixel Village" — warm parchment · dark pixel outlines
   Stardew Valley / Animal Crossing aesthetic
   Rules: 3px solid #2D1F0E borders · warm fills · offset shadow
          Press Start 2P for headings · dark text on light bg
══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Noto+Sans+TC:wght@400;700&display=swap');

/* ─── BpmfZihiSans（注音 + 中文專用字型）────────────── */
@font-face {
  font-family: 'BpmfZihiSans';
  src: url('/static/font/BpmfZihiSans/BpmfZihiSans-Medium.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── 1. Design Tokens ───────────────────────────────── */
:root {
  /* Warm parchment backgrounds */
  --c-bg:           #EDE6CC;   /* warm parchment */
  --c-card:         #FDFBF0;   /* near-white warm card */
  --c-sand:         #F5EDCE;   /* cream card variant */
  --c-panel:        #FAF6E4;   /* panel background */
  --c-cream:        #FFF8E7;   /* input / very light cream */

  /* Header (warm cream) */
  --c-header:       #FDFBF0;
  --c-header-border:#2D1F0E;

  /* Yellow / gold */
  --c-gold:         #F4C542;
  --c-gold-light:   #F7D868;
  --c-gold-dark:    #C49A20;

  /* Teal (water — secondary accent) */
  --c-teal-1:       #2A9D8F;
  --c-teal-2:       #3DB5A8;
  --c-teal-3:       #4ECDC4;
  --c-teal-4:       #7DE8E0;

  /* Primary: grass green (main CTA) */
  --c-primary:      #5BAF46;
  --c-primary-dark: #3D7A2E;
  --c-primary-light:#E8F5E2;

  /* Status */
  --c-success:      #5BAF46;
  --c-success-light:#E8F5E2;
  --c-accent:       #B8EDE8;   /* light teal accent bg */
  --c-accent-dark:  #2A9D8F;
  --c-danger:       #E8622A;
  --c-danger-dark:  #B84A1A;
  --c-danger-light: #FDEEE8;
  --c-warn:         #F4C542;
  --c-warn-light:   #FFF8DC;
  --c-orange:       #FF9040;   /* 橘黃：警告 / 核心目標晶片填滿 */
  --c-error:        #D03030;   /* 紅：錯誤 / 未通過晶片 */

  /* Dark for special pages (OCR) */
  --c-dark:         #2D1F0E;
  --c-dark-card:    #1A0E04;

  /* Text */
  --c-text:         #2D1F0E;   /* dark warm brown */
  --c-text-sub:     #7A6248;   /* muted brown */
  --c-text-hint:    #9A7A58;   /* hint brown */
  --c-text-on:      #FDFBF0;   /* light text on dark bg */

  /* Borders */
  --c-border:       #2D1F0E;   /* warm dark outline */
  --c-border-s:     #2D1F0E;
  --c-shadow:       #C49A70;   /* warm brown card shadow */

  /* 🎯 真正會生效的【全站注音大字體比例尺】 */
  --fs-display: 22pt;   /* 🚀 超級大字（約原本的 200%），慶祝、大分數用 */
  --fs-xl:      18pt;   /* 🚀 放大 160% 旗艦字級（適合大標題、大面板顯示） */
  --fs-lg:      16pt;   /* 🚀 放大 140% 主力字級（適合題目文字、主按鈕文字） */
  --fs-base:    12pt;   /* 全站基礎 UI 文字基準（網頁核心預設值） */

  /* ⭕️ 正確解耦：讓中小字級依照比例縮小，再也不會被鎖死在 12pt */
  --fs-md:      16pt;   
  --fs-sm:      14pt;   
  --fs-xs:      12pt;   /* 真正的小字，專治登出、聲音小按鈕 */

  /* All radii = 0 (pixel art) */
  --r-card: 0px;
  --r-btn:  0px;
  --r-tag:  0px;
  --r-sm:   0px;

  /* Quiz font size（後台可調，display_mode.js 在 grade select 時更新） */
  --quiz-font-size: 1rem; /* 100%，由 display_mode.js 依年級動態覆寫 */
}

.question-text,
.option-text,
.explanation-text {
  font-size: var(--quiz-font-size);
}

/* ─── 2. Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  background: #5BAF46;
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 7px, rgba(42,31,14,0.10) 7px, rgba(42,31,14,0.10) 8px),
    repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(42,31,14,0.10) 7px, rgba(42,31,14,0.10) 8px);
  min-height: 100vh;
}

body {
  /* ⭕️ 修正：把容易作亂的 Noto Sans TC / 蘋果儷黑 移到最後面，甚至只留系統預設 */
  font-family: 'BpmfZihiSans', -apple-system, sans-serif !important;
  font-weight: 500;
  min-height: 100vh;
  color: var(--c-text);
  line-height: 1.6;
  display: flex;
  justify-content: center;

  /* 核心全域注音開關維持點亮 */
  font-variant-phonetic: ruby !important; 
  -webkit-font-variant-phonetic: ruby !important;
}

/* ─── 3. Page Skeleton ───────────────────────────────── */
.page {
  width: 100%; max-width: 480px;
  height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--c-bg);
  overflow: hidden; position: relative;
  margin: 0 auto;
}
.app-container {
  width: 100%; max-width: 480px;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--c-bg);
}
.page-content        { flex: 1; overflow: hidden; padding: 0 20px; }
.page-content-scroll { flex: 1; overflow-y: auto; padding: 0 20px; -webkit-overflow-scrolling: touch; }
.page-footer         { flex: 0 0 auto; padding: 0 20px 24px; }
.page-footer-safe {
  flex: 0 0 auto;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--c-card);
  border-top: 3px solid var(--c-border);
}

/* ─── 4. Header (warm cream) ─────────────────────────── */
/* 1. 唯一的大外殼 */
.global-header {
  background: var(--c-card);
  height: 52px; min-height: 52px;
  display: flex; align-items: center;
  padding: 0 12px; gap: 8px; flex-shrink: 0;
  border-bottom: 3px solid var(--c-border);
  position: relative; z-index: 10;
  width: 100%; box-sizing: border-box;
}

/* 2. 左側按鈕的像素橘黃色底  */
.global-header__back {
  width: auto;                  /* 寬度隨文字長短自動撐開 */
  padding: 0 10px;
  min-height: 24px;             /* 給它一個基礎高度 */
  background: var(--c-gold);                    /* 橘黃底色 */
  border: 2px solid var(--c-border);            /* 深色像素邊框 */
  box-shadow: 2px 2px 0 var(--c-gold-dark);     /* 底部的深色立體陰影 */
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text); text-decoration: none;
  font-size: 13px; flex-shrink: 0;
  transition: transform 80ms;
}
/* 按下去時的動態回饋（按鈕會往右下沉一下） */
.global-header__back:active { transform: translate(2px, 2px); box-shadow: none; }

/* ─── 補齊：右側【全站聲音】按鈕的像素橘黃色底 ─── */
/* 為了讓全站聲音按鈕在每個頁面都長得一模一樣，我們直接在 CSS 幫他穿衣服 */
.global-header .mute-btn {
  /* 🎨 貼上跟返回按鈕一樣的無敵像素橘黃裝潢 */
  background: var(--c-gold) !important;
  border: 2px solid var(--c-border) !important;
  box-shadow: 2px 2px 0 var(--c-gold-dark) !important;
  border-radius: 0px !important; /* 如果要純像素風，圓角要拿掉（改為0） */
  
  color: var(--c-text) !important;
  font-size: 11px;
  cursor: pointer;
  padding: 5px 8px;
  white-space: nowrap;
  transition: transform 80ms;
}
.global-header .mute-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none !important;
}

/* 3. 左側：RPG 金色小徽章（ dashboard 頁面用，與返回按鈕擇一使用 ） */
.global-header__badge {
  display: flex; align-items: center; gap: 5px;
  background: var(--c-gold);
  border: 2px solid var(--c-border);
  box-shadow: 2px 2px 0 var(--c-gold-dark);
  padding: 4px 9px;
}
.global-header__badge-text {
  font-family: 'Press Start 2P' , monospace; font-size: 7px;
  color: var(--c-text); line-height: 1; white-space: nowrap;
}

/* 4. 中間：神聖絕對置中標題 */
.global-header__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none; /* 防止擋到旁邊按鈕點擊 */
  font-size: 14px; font-weight: 700; color: var(--c-text);
}

/* 5. 右側：自動吸附磁鐵區塊（裝全站聲音或綠色圖示） */
.global-header__right {
  margin-left: auto !important; /* 👈 核心：強制把這一區推到最右邊 */
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  color: var(--c-text-muted, var(--c-text-sub)); font-size: 10px;
}

/* ─── 6. Scrollable body + warm bg ──────────────────── */
.rpg-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 13px 24px;
  position: relative;
}
/* Warm pixel dots scattered in body bg */
.rpg-body::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    /* green pixel flowers */
    linear-gradient(#5BAF46,#5BAF46)  20px  40px / 4px 4px no-repeat,
    linear-gradient(#5BAF46,#5BAF46) 330px  80px / 4px 4px no-repeat,
    linear-gradient(#5BAF46,#5BAF46)  60px 215px / 3px 3px no-repeat,
    linear-gradient(#5BAF46,#5BAF46) 340px 260px / 4px 4px no-repeat,
    linear-gradient(#5BAF46,#5BAF46)  24px 375px / 3px 3px no-repeat,
    /* warm yellow dots */
    linear-gradient(#F4C542,#F4C542) 155px  30px / 3px 3px no-repeat,
    linear-gradient(#F4C542,#F4C542) 205px  98px / 2px 2px no-repeat,
    linear-gradient(#F4C542,#F4C542) 105px 295px / 3px 3px no-repeat,
    linear-gradient(#F4C542,#F4C542) 270px 345px / 2px 2px no-repeat,
    linear-gradient(#F4C542,#F4C542) 175px 465px / 3px 3px no-repeat,
    /* teal dots */
    linear-gradient(#4ECDC4,#4ECDC4) 355px 435px / 3px 3px no-repeat,
    linear-gradient(#4ECDC4,#4ECDC4)  80px 500px / 2px 2px no-repeat;
  opacity: 0.5;
}
.rpg-body > * { position: relative; z-index: 1; }

/* ─── 7. Hero banner frame (warm daytime) ────────────── */
.hero-outer {
  border: 3px solid var(--c-border);
  box-shadow: 4px 4px 0 var(--c-shadow);
  position: relative;
  margin-bottom: 14px;
}
/* Subtle inner cream highlight */
.hero-outer::after {
  content: '';
  position: absolute; inset: 3px;
  border-top:  1px solid rgba(253,251,240,0.7);
  border-left: 1px solid rgba(253,251,240,0.7);
  pointer-events: none; z-index: 3;
}
/* Warm teal sky banner — daytime RPG */
.hero-banner {
  background-image: linear-gradient(180deg,
    #2A9D8F  0%, #2A9D8F  8%,
    #3DB5A8  8%, #3DB5A8 20%,
    #4ECDC4 20%, #4ECDC4 38%,
    #7DE8E0 38%, #7DE8E0 56%,
    #C8F0EC 56%, #C8F0EC 75%,
    #FDFBF0 75%, #FDFBF0 100%
  );
  padding: 22px 18px 20px;
  position: relative; overflow: hidden;
}
/* Pixel clouds in sky area */
.hero-banner::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    /* cloud left */
    linear-gradient(#fff,#fff)  8% 20% / 10px 5px no-repeat,
    linear-gradient(#fff,#fff) 10% 23% / 18px 7px no-repeat,
    linear-gradient(#fff,#fff) 12% 20% / 10px 5px no-repeat,
    /* cloud right */
    linear-gradient(#fff,#fff) 68%  8% / 8px  4px no-repeat,
    linear-gradient(#fff,#fff) 70% 11% / 14px 6px no-repeat,
    linear-gradient(#fff,#fff) 72%  8% / 8px  4px no-repeat,
    /* small stars/flowers */
    linear-gradient(#F4C542,#F4C542) 45% 14% / 3px 3px no-repeat,
    linear-gradient(#E8622A,#E8622A) 85% 22% / 2px 2px no-repeat;
  opacity: 0.85;
}
.hero-eyebrow  { font-size: 12px; color: var(--c-text); margin-bottom: 10px; position: relative; z-index: 1; }
.hero-title    { font-family: 'Press Start 2P', 'CJKScale', monospace; font-size: 11px; line-height: 1.9; color: var(--c-text); text-shadow: 1px 1px 0 rgba(255,255,255,0.8); margin-bottom: 10px; position: relative; z-index: 1; }
.hero-subtitle { font-size: 12px; color: var(--c-text-sub); line-height: 1.6; position: relative; z-index: 1; }

/* Diamond ornaments (warm yellow) */
.hero-diamond   { position: absolute; z-index: 4; image-rendering: pixelated; shape-rendering: crispEdges; }
.hero-diamond-t { top: -9px;    left: 50%; transform: translateX(-50%); }
.hero-diamond-b { bottom: -9px; left: 50%; transform: translateX(-50%); }
.hero-diamond-l { left: -9px;   top: 50%;  transform: translateY(-50%); }
.hero-diamond-r { right: -9px;  top: 50%;  transform: translateY(-50%); }

/* ─── 8. Dither strip (teal on parchment) ────────────── */
.dither-strip {
  height: 8px; margin-bottom: 14px;
  image-rendering: pixelated;
  background-color: var(--c-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='0' y='0' width='2' height='2' fill='%234ECDC4'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%234ECDC4'/%3E%3C/svg%3E");
  background-size: 4px 4px; background-repeat: repeat;
}

/* ─── 11. RPG Cards (dashboard) ─────────────────────── */
.rpg-card {
  border: 3px solid var(--c-border);
  box-shadow: 4px 4px 0 var(--c-shadow);
  background: var(--c-card);
  margin-bottom: 10px;
  position: relative; cursor: pointer;
  transition: transform 80ms, box-shadow 80ms;
}
.rpg-card:active { transform: translate(4px, 4px); box-shadow: none; }
.rpg-card::after { display: none; }

.rpg-card-inner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 14px 14px 13px;
  text-decoration: none; color: var(--c-text);
}

/* Icon box: dark border, colored fill */
.rpg-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  border: 2px solid var(--c-border);
  display: flex;
}
.rpg-icon-in {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
}

.rpg-card-body  { flex: 1; min-width: 0; }
.rpg-card-title { font-size: 14px; font-weight: 700; color: var(--c-text); margin-bottom: 5px; line-height: 1.4; }
.rpg-card-sub   { font-size: 11px; color: var(--c-text-sub); line-height: 1.5; }

/* HP bar decoration */
.rpg-hp { display: flex; flex-direction: column; width: 6px; gap: 2px; flex-shrink: 0; align-self: stretch; padding: 4px 0; }
.rpg-hp span { flex: 1; border: 1px solid var(--c-border); }

/* ─── 12. Wide CTA bar ───────────────────────────────── */
.rpg-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px 20px;
  background: var(--c-danger);
  border: 3px solid var(--c-border);
  box-shadow: 4px 4px 0 var(--c-danger-dark);
  text-decoration: none; color: var(--c-text-on);
  font-size: 13px; font-weight: 700;
  cursor: pointer; transition: transform 80ms, box-shadow 80ms;
  position: relative; margin-top: 4px;
}
.rpg-cta:active { transform: translate(4px, 4px); box-shadow: none; }
.rpg-cta::after { display: none; }

/* ─── 13. Bottom nav ─────────────────────────────────── */
/* .rpg-nav {
  display: flex; background: var(--c-card);
  border-top: 3px solid var(--c-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  flex-shrink: 0; position: relative; z-index: 10;
}
.rpg-nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; padding: 10px 0 8px; gap: 5px;
  text-decoration: none;
  font-family: 'Press Start 2P' , monospace;
  font-size: 6px; color: var(--c-text-sub);
  position: relative;
}
.rpg-nav-item.active { color: var(--c-primary); }
.rpg-nav-item.active::after {
  content: '';
  position: absolute; bottom: 0; left: 20%; right: 20%;
  height: 3px; background: var(--c-primary);
} */

/* Also bottom-nav (alias) */
.bottom-nav {
  display: flex; background: var(--c-card);
  border-top: 3px solid var(--c-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  flex-shrink: 0;
}
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; padding: 10px 0 8px; gap: 5px;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px; color: var(--c-text-sub);
  text-decoration: none; position: relative;
}
.bottom-nav-item.active { color: var(--c-primary); font-weight: 700; }
.bottom-nav-item.active::after {
  content: '';
  position: absolute; bottom: 0; left: 20%; right: 20%;
  height: 3px; background: var(--c-primary);
}
.nav-icon { font-size: 22px; line-height: 1; }

/* ─── 14. Tags ───────────────────────────────────────── */
.tag {
  border: 2px solid var(--c-border);
  padding: 4px 10px;
  font-size: var(--fs-xs); font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  background: var(--c-card); color: var(--c-text);
}
.tag-primary { background: var(--c-primary-light); color: var(--c-primary-dark);  border-color: var(--c-primary-dark); }
.tag-success { background: var(--c-success-light); color: var(--c-primary-dark);  border-color: var(--c-primary-dark); }
.tag-accent  { background: var(--c-accent);        color: var(--c-accent-dark);   border-color: var(--c-accent-dark);  }
.tag-warn    { background: var(--c-warn-light);    color: var(--c-gold-dark);     border-color: var(--c-gold-dark);    }
.tag-danger  { background: var(--c-danger-light);  color: var(--c-danger-dark);   border-color: var(--c-danger-dark);  }

/* ─── 15. Icon boxes ─────────────────────────────────── */
.icon-circle {
  width: 48px; height: 48px;
  background: var(--c-primary-light);
  border: 3px solid var(--c-border);
  box-shadow: 2px 2px 0 var(--c-shadow);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.icon-circle-lg {
  width: 80px; height: 80px;
  background: var(--c-warn-light);
  border: 3px solid var(--c-gold-dark);
  box-shadow: 3px 3px 0 var(--c-shadow);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; flex-shrink: 0; align-self: center;
}

/* ─── 16. Inputs ──────────────────────────────────────── */
.input {
  font-family: 'BpmfZihiSans', -apple-system, 'PingFang TC', 'Noto Sans TC', sans-serif;
  font-size: var(--fs-base); padding: 0 14px; height: 48px;
  background: var(--c-cream); color: var(--c-text);
  border: 3px solid var(--c-border);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.06);
  border-radius: 0; width: 100%; outline: none;
  transition: border-color 100ms; -webkit-appearance: none;
}
.input:focus        { border-color: var(--c-primary); }
.input::placeholder { color: var(--c-text-hint); }

.textarea {
  font-family: 'BpmfZihiSans', -apple-system, 'PingFang TC', 'Noto Sans TC', sans-serif;
  font-size: var(--fs-base); padding: 12px 14px;
  background: var(--c-cream); color: var(--c-text);
  border: 3px solid var(--c-border);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.06);
  border-radius: 0; width: 100%; outline: none; resize: none;
  transition: border-color 100ms; -webkit-appearance: none;
}
.textarea:focus        { border-color: var(--c-primary); }
.textarea::placeholder { color: var(--c-text-hint); }

.label { font-size: var(--fs-sm); color: var(--c-text-sub); display: block; margin-bottom: 6px; font-weight: 700; }

/* ─── 17. Math ───────────────────────────────────────── */
.fraction {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: 'Courier New', monospace;
  font-size: var(--fs-lg); font-weight: 700;
  vertical-align: middle; gap: 2px;
}
.fraction-bar { width: 100%; min-width: 28px; height: 2px; background: currentColor; }
.math-box {
  background: var(--c-sand);
  border: 3px solid var(--c-border);
  box-shadow: 2px 2px 0 var(--c-shadow);
  padding: 8px 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Courier New', monospace; font-size: var(--fs-lg); font-weight: 700;
}

/* ─── 18. Chat bubbles ───────────────────────────────── */
.bubble-ai {
  background: var(--c-card);
  border: 2px solid var(--c-border);
  border-left: 4px solid var(--c-teal-3);   /* teal left stripe */
  box-shadow: 3px 3px 0 rgba(78,205,196,0.35);
  padding: 14px 16px; max-width: 85%;
  font-size: var(--fs-base); line-height: 1.65;
}
.bubble-user {
  background: var(--c-success-light);
  border: 2px solid var(--c-primary-dark);
  box-shadow: 3px 3px 0 rgba(61,122,46,0.25);
  padding: 14px 16px; max-width: 85%;
  font-size: var(--fs-base); line-height: 1.65;
}

/* ─── 19. Loading ────────────────────────────────────── */
.spinner {
  width: 64px; height: 64px;
  border: 4px solid var(--c-sand);
  border-top: 4px solid var(--c-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.dots { display: flex; gap: 6px; justify-content: center; align-items: center; }
.dots span {
  width: 10px; height: 10px;
  background: var(--c-primary);
  border: 2px solid var(--c-primary-dark);
  animation: dotPop 0.8s ease-in-out infinite;
}
.dots span:nth-child(2) { animation-delay: 0.15s; }
.dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotPop { 0%,80%,100%{transform:scale(0.6);opacity:0.4;} 40%{transform:scale(1);opacity:1;} }

/* ─── 20. OCR zones ──────────────────────────────────── */
.zone-guide {
  border: 3px dashed var(--c-teal-3);
  background: rgba(78,205,196,0.12);
  padding: 4px 8px; cursor: pointer;
  font-family: 'Courier New', monospace; font-weight: 700;
  animation: zoneFlash 1.2s ease-in-out infinite;
}
.zone-error {
  border: 3px dashed var(--c-danger);
  background: rgba(232,98,42,0.12);
  padding: 4px 8px; cursor: pointer;
  font-family: 'Courier New', monospace; font-weight: 700;
  animation: zoneFlash 1.2s ease-in-out infinite;
}
.zone-guide.focused, .zone-error.focused { animation: none; opacity: 1; }
.zone-guide.dimmed,  .zone-error.dimmed  { opacity: 0.25; animation: none; }
@keyframes zoneFlash { 0%,100%{opacity:1;} 50%{opacity:0.45;} }

/* ─── 21. Inline highlight ───────────────────────────── */
.hl {
  background: var(--c-warn-light);
  border: 2px solid var(--c-gold-dark);
  color: var(--c-text); padding: 0 4px; font-weight: 700;
}

/* ─── 22. Divider ────────────────────────────────────── */
.divider { height: 2px; background: var(--c-border); margin: 16px 0; }

/* ─── 23. Confetti ───────────────────────────────────── */
.confetti-piece { position: fixed; pointer-events: none; z-index: 9999; }
@keyframes confettiFall { to { transform: translateY(100vh) rotate(720deg); opacity: 0; } }

/* ─── 24. Wave (TTS) ─────────────────────────────────── */
.wave { display: flex; gap: 3px; align-items: flex-end; height: 18px; }
.wave span { width: 3px; background: var(--c-teal-3); animation: wavePulse 0.9s ease-in-out infinite; }
.wave span:nth-child(1) { height: 8px;  }
.wave span:nth-child(2) { height: 14px; animation-delay: 0.15s; }
.wave span:nth-child(3) { height: 10px; animation-delay: 0.3s; }
@keyframes wavePulse { 0%,100%{transform:scaleY(0.5);} 50%{transform:scaleY(1.2);} }

/* ─── 25. Typing indicator ───────────────────────────── */
.typing-dots { display: inline-flex; gap: 5px; align-items: center; padding: 12px 16px; }
.typing-dot  { width: 8px; height: 8px; background: var(--c-teal-3); border: 1px solid var(--c-teal-1); animation: typeBounce 0.9s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typeBounce { 0%,100%{transform:translateY(0);opacity:0.4;} 50%{transform:translateY(-6px);opacity:1;} }

/* ─── 26. Animations ─────────────────────────────────── */
.bounce { animation: bounceFly 1.5s ease-in-out infinite; display: inline-block; }
@keyframes bounceFly { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }

/* ─── 27. Modal / overlay ────────────────────────────── */
.overlay {
  position: fixed; inset: 0;
  background: rgba(45,31,14,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 500;
}
.modal {
  background: var(--c-card);
  border: 3px solid var(--c-border);
  box-shadow: 6px 6px 0 var(--c-shadow);
  padding: 28px 24px;
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
}
.modal::after { display: none; }

/* ─── 28. Fence & Grass decorations ──────────────────── */
.px-fence {
  height: 32px;
  background: repeating-linear-gradient(90deg,
    var(--c-card) 0, var(--c-card) 12px,
    #8B5E3C 12px, #8B5E3C 16px
  );
  border-top: 3px solid var(--c-border);
  border-bottom: 3px solid var(--c-border);
}
.px-grass-strip {
  height: 20px;
  background: var(--c-primary);
  border-top: 3px solid var(--c-border);
}

/* Legacy alias classes for login.html fence */
.fence-strip {
  height: 20px;
  background: repeating-linear-gradient(90deg,
    var(--c-card) 0, var(--c-card) 12px,
    #8B5E3C 12px, #8B5E3C 16px
  );
  border-top: 3px solid var(--c-border);
  border-bottom: 3px solid var(--c-border);
}
.grass-strip {
  height: 18px;
  background: var(--c-primary);
  border-top: 3px solid var(--c-border);
}

/* ─── 29. Font utilities ─────────────────────────────── */
.font-pixel { font-family: 'Press Start 2P', monospace; font-size: 9px; line-height: 1.8; }
.mono       { font-family: 'Courier New', monospace; }

/* ─── 30. Utilities ──────────────────────────────────── */
.hidden { display: none !important; }
.flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-1 { flex: 1; }
.items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.mt-8  { margin-top:  8px; } .mt-10 { margin-top:  10px; } .mt-12 { margin-top:  12px; } .mt-16 { margin-top:  16px; } .mt-20 { margin-top:  20px; }
.mb-8  { margin-bottom: 8px; } .mb-10 { margin-bottom: 10px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; }
.text-center { text-align: center; } .text-right { text-align: right; }
.bold { font-weight: 700; }
.text-sub  { color: var(--c-text-sub); }  .text-hint { color: var(--c-text-hint); }
.text-on   { color: var(--c-text-on); }   .text-primary { color: var(--c-primary); }
.text-success { color: var(--c-success); } .text-danger { color: var(--c-danger); }
.text-sm { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); }
.text-lg { font-size: var(--fs-lg); } .text-xl { font-size: var(--fs-xl); }
.w-full { width: 100%; }

/* ─── 31. Desktop frame border ───────────────────────── */
@media (min-width: 520px) {
  body { align-items: flex-start; justify-content: center; }
  .app-container, .page {
    border-left: 3px solid var(--c-border);
    border-right: 3px solid var(--c-border);
  }
}

/* ── 注音顯示模式（module_07 §2.4.3 / §2.4.4）──────────────────────────────── */

/* chinese_only：隱藏所有 <rt> 注音標記，題目文字改用思源黑體 */
body[data-zhuyin="chinese_only"] rt { display: none; }
body[data-zhuyin="chinese_only"] .question-text,
body[data-zhuyin="chinese_only"] .option-text,
body[data-zhuyin="chinese_only"] .explanation-text {
  font-family: 'Noto Sans TC', -apple-system, 'PingFang TC', sans-serif;
}

/* annotated：<rt> 正常顯示，且強制套用注音字型 */
body[data-zhuyin="annotated"] rt { display: revert; }
body[data-zhuyin="annotated"] .question-text,
body[data-zhuyin="annotated"] .option-text,
body[data-zhuyin="annotated"] .explanation-text,
body[data-zhuyin="annotated"] .mute-btn,
body[data-zhuyin="annotated"] #muteBtn,
body[data-zhuyin="annotated"] .hero-title {
  font-family: 'BpmfZihiSans', sans-serif !important;
}

/* 兩個 render 並列比較時的淡色虛線分隔（可重用） */
.render-divider {
  width: 100%;
  height: 0;
  border: none;
  border-top: 2px dashed var(--c-shadow);
  margin: 12px 0;
  opacity: 0.7;
}

/* ruby 間距微調，避免注音與文字重疊 */
body[data-zhuyin="annotated"] ruby {
  ruby-align: center;
  line-height: 2.2;
}

/* ─── 直式分數渲染 (Fraction Display & Layout Protection) ─── */
.fraction-display {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  padding: 0 0.12em;
  line-height: 1.0;
  font-size: 0.85em; /* 稍微縮小防爆版 */
  position: relative;
  top: -0.05em;
}
.fraction-display .numerator {
  border-bottom: 2px solid var(--c-text, #2D1F0E); /* 像素粗體風格橫線 */
  padding: 0 0.2em;
  display: block;
  text-align: center;
  font-weight: bold;
}
.fraction-display .denominator {
  padding: 0 0.2em;
  display: block;
  text-align: center;
  font-weight: bold;
}

/* ─── 試圖重新整理元件...2026/6/17-JosieCSS ─── */
/* 按鈕 btn.png */
/* 🦊 全站唯一指定：無敵像素橘黃按鈕（2026-06-17 簡化版） */
.pixel-btn {
  background: var(--c-gold) !important;
  border: 2px solid var(--c-border) !important;
  box-shadow: 2px 2px 0 var(--c-gold-dark) !important;
  border-radius: 0px !important; 
  
  color: var(--c-text) !important;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 5px 10px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 80ms;
}

.pixel-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none !important;
}

/* 🧱 2. 【大】尺寸晶片（拍照鈕、開始 AI 辨識、練習類題用） */
.pixel-btn--lg {
  width: 100%;
  height: 48px;
  font-size: 16px;
  padding: 0 20px;
}

/* 🧱 3. 【中】尺寸晶片（一般中型跳轉、確認按鈕用） */
.pixel-btn--md {
  width: auto;
  height: 38px;
  font-size: 13px;
  padding: 0 16px;
}

/* 🧱 4. 【小】尺寸晶片（登出鈕、聲音 mute 按鈕、右上角小工具用） */
.pixel-btn--sm {
  width: auto;
  height: 28px;
  font-size: 11px;
  padding: 0 8px;
}

/* ════════════════════════════════════════════════════════════════════════
   全站大一統：通用像素分頁切換列（`.pixel-tabs` 定稿版，2026-06-17）
   ════════════════════════════════════════════════════════════════════════ */

/* 外層容器：鎖定 Flex 並排、自動換行、呼吸間距 */
.pixel-tabs {
  display: flex; 
  gap: 6px; 
  flex-wrap: wrap; 
  margin-bottom: 18px; 
  width: 100%;
  box-sizing: border-box;
}

/* 🔸 預設狀態（未選取）：平貼、精緻米白底、像素焦糖黑框 */
.pixel-tab {
  flex: 1;
  min-width: 56px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #a07855 !important; /* 溫柔焦糖字 */
  background: #fdfbf7 !important; /* 米白底 */
  border: 2px solid #2d1f0e !important; /* 像素黑邊 */
  cursor: pointer;
  user-select: none;
  transition: all 80ms ease;
  text-decoration: none; /* 防止 <a> 標籤產生底線 */
}

/* 🔸 滑鼠懸停 */
.pixel-tab:hover {
  background: #ffffff !important;
}

/* 🧱 3. 基礎骨架按下去的手感（未選取時）：微幅下沉、產生內凹暗影 */
.pixel-tab:active {
  transform: translate(1px, 1px);
  background: #f5f2eb !important; 
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.15) !important; 
}

/* 🧱 4. 已選取狀態（Active）：直接繼承基礎骨架，但全面換裝成「立體黃金皮膚」 */
.pixel-tab.active {
  color: var(--c-text) !important; 
  background: var(--c-gold) !important; 
  /* 亮黃內高光線 + 橘黃外底座厚度陰影 */
  box-shadow: 
    inset 0 3px 0 #ffeb99, 
    2px 2px 0 var(--c-gold-dark) !important;
}

/* 🧱 5. 已選取項目按下去的手感：主色死不退讓，只有右下角立體厚度「蹦」地消失 */
.pixel-tab.active:active {
  transform: translate(2px, 2px);
  background: var(--c-gold) !important; /* 牢牢鎖住主色，不被基礎的米白 active 洗掉 */
  box-shadow: inset 0 3px 0 #ffeb99 !important; 
}

/* ════════════════════════════════════════════════════════════════════════
   顯示型面板 / 狀態標籤
   ════════════════════════════════════════════════════════════════════════ */

   .pixel-display-board {
    background: #c2f0ec !important; /* 精準還原原圖的淡粉綠底色 */
    border: 4px solid #239486 !important; /* 扎實的深綠色像素硬邊 */
    border-radius: 0px !important; /* 絕對不要圓角 */
    box-shadow: none !important; /* 平貼型態，沒有厚度 */
    
    color: #239486 !important; /* 文字顏色與邊框一致，整體感極佳 */
    font-family: 'BpmfZihiSans', -apple-system, 'PingFang TC', 'Noto Sans TC', sans-serif;
    font-weight: 700;
    font-size: 24px; /* 預設大字體 */
    letter-spacing: 0.05em;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    box-sizing: border-box;
    width: auto;
  }
  
  /* 💡 自動調校注音旁註（ruby）與文字的完美比例 */
  .pixel-display-board ruby {
    ruby-position: over;
  }
  .pixel-display-board rt {
    font-size: 0.45em; /* 讓注音大小恰到好處 */
    color: #239486;
    padding-bottom: 2px;
    letter-spacing: 0px;
  }
  
  /* 🧱 同樣支援縮小版晶片（如果要當小標籤使用） */
  .pixel-display-board--sm {
    font-size: 14px;
    border-width: 2px !important;
    padding: 4px 10px;
  }

/* ════════════════════════════════════════════════════════════════════════
   共用工具 + 頁面專屬樣式（重構：把 template <style>/inline 收斂於此，2026-06-17）
   原則：能對應既有元件就用；PNG 背景一律保留為具名元件，不刪除。
   ════════════════════════════════════════════════════════════════════════ */

/* 像素 SVG 通用：取代各頁 inline image-rendering:pixelated;shape-rendering:crispEdges;display:block; */
.svg-px { image-rendering: pixelated; shape-rendering: crispEdges; display: block; flex-shrink: 0; }

/* ── Page: dashboard（學習大廳；PNG 背景與圖片按鈕為可沿用元件）──────────────── */
.page--dashboard {
  background: url('/static/images/onboarding-bg.png') center/cover no-repeat;
  display: flex; flex-direction: column;
  height: 100dvh !important;
  min-height: unset !important;
  overflow: hidden !important;
  -webkit-text-size-adjust: none; text-size-adjust: none;
}
.page--dashboard .rpg-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 13px 24px; position: relative;
}
.page--dashboard .rpg-body::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(#5BAF46,#5BAF46)  18px  38px / 4px 4px no-repeat,
    linear-gradient(#5BAF46,#5BAF46) 330px  75px / 4px 4px no-repeat,
    linear-gradient(#5BAF46,#5BAF46)  60px 210px / 3px 3px no-repeat,
    linear-gradient(#5BAF46,#5BAF46) 340px 255px / 4px 4px no-repeat,
    linear-gradient(#5BAF46,#5BAF46)  22px 370px / 3px 3px no-repeat,
    linear-gradient(#F4C542,#F4C542) 155px  28px / 3px 3px no-repeat,
    linear-gradient(#F4C542,#F4C542) 205px  95px / 2px 2px no-repeat,
    linear-gradient(#F4C542,#F4C542) 105px 290px / 3px 3px no-repeat,
    linear-gradient(#F4C542,#F4C542) 270px 340px / 2px 2px no-repeat,
    linear-gradient(#F4C542,#F4C542) 175px 460px / 3px 3px no-repeat,
    linear-gradient(#4ECDC4,#4ECDC4) 355px 430px / 3px 3px no-repeat;
  background-repeat: no-repeat; opacity: 0.55;
}
.page--dashboard .rpg-body > * { position: relative; z-index: 1; }

.page--dashboard .hero-outer {
  border: none; box-shadow: none; position: relative;
  margin-top: -10px; margin-bottom: 10px; background: transparent;
}
.page--dashboard .hero-outer::after { display: none; }
.page--dashboard .hero-banner {
  width: 100%;
  aspect-ratio: 360 / 190;
  background: url('/static/images/hero-banner.png') center/100% 100% no-repeat;
  padding: 18% 18% 10% 18% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  position: relative; overflow: hidden;
  box-sizing: border-box;
}
.page--dashboard .hero-eyebrow {
  font-size: clamp(14px, 4.5vw, 18px) !important; color: var(--c-text); line-height: 1.2;
  margin-bottom: 4px; letter-spacing: -1px; position: relative; z-index: 1;
}
.page--dashboard .hero-title {
  font-size: clamp(12px, 3.8vw, 16px) !important; color: var(--c-text); line-height: 1.3 !important; margin-bottom: 4px;
  letter-spacing: -0.5px; position: relative; z-index: 1; text-shadow: none !important;
}
.page--dashboard .hero-subtitle {
  font-size: 16px; color: var(--c-text); line-height: 1.1;
  letter-spacing: -1px; position: relative; z-index: 1;
}
.page--dashboard .hero-diamond { display: none !important; }
.page--dashboard .dither-strip { display: none; }

/* 圖片按鈕卡（PNG 木板）：底圖一律以 modifier class 指定，HTML 不再寫 inline */
.page--dashboard .rpg-card {
  border: none !important; box-shadow: none !important;
  background-color: transparent !important; background-position: center !important;
  background-repeat: no-repeat !important; background-size: 100% 100% !important;
  width: 92% !important; max-width: 420px !important; min-height: 72px !important;
  margin: 0 auto 12px auto !important; position: relative; cursor: pointer;
  transition: transform 80ms, box-shadow 80ms;
}
.page--dashboard .rpg-card:active { transform: translate(4px,4px); box-shadow: none; }
.rpg-card--exam     { background-image: url('/static/images/official-quiz-btn.png'); }
.rpg-card--photo    { background-image: url('/static/images/photo-btn.png'); }
.rpg-card--teaching { background-image: url('/static/images/teaching-btn.png'); }
.rpg-card--arcade   { background-image: url('/static/images/gaming-btn.png'); }

.page--dashboard .rpg-card-inner {
  display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
  min-height: inherit !important; width: 100% !important; box-sizing: border-box !important;
  padding: 0 5% 0 32% !important; text-align: left; color: var(--c-text);
  border: none; background: transparent; cursor: pointer;
}
.page--dashboard .rpg-card-body { flex: 1; display: flex; align-items: center; }
.page--dashboard .rpg-card-title {
  white-space: nowrap; font-size: clamp(16px, 5vw, 22px) !important; font-weight: 700; margin: 0; line-height: 1.4;
  color: #FFFFFF;
  text-shadow:
    1.5px 0 0.5px #3F1D11, -1.5px 0 0.5px #3F1D11,
    0 1.5px 0.5px #3F1D11, 0 -1.5px 0.5px #3F1D11,
    1px 1px 0.5px #3F1D11, -1px -1px 0.5px #3F1D11,
    1px -1px 0.5px #3F1D11, -1px 1px 0.5px #3F1D11;
}


/* ── Page: login（login-bg / title / google 按鈕皆為 PNG 元件）─────────────── */
.login-page {
  width: 100%; max-width: 480px; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  position: relative; overflow: hidden;
  background-image: url('/static/images/login-bg.png');
  background-size: cover; background-position: center top;
}
.login-bottom {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  padding: 0 32px 140px; gap: 20px;
}
.login-title-img {
  width: 88%; max-width: 340px; display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.18));
  animation: titleFloat 3s ease-in-out infinite;
}
@keyframes titleFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.google-img-btn {
  display: block; width: 88%; max-width: 340px; cursor: pointer; text-decoration: none;
  transition: transform 80ms, filter 80ms; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.20));
}
.google-img-btn:active { transform: scale(0.96); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)) brightness(0.95); }
.google-img-btn img { width: 100%; display: block; }
.admin-link {
  position: fixed; bottom: 16px; right: 16px;
  font-size: var(--fs-base); color: rgba(255,255,255,0.7); text-decoration: none;
  padding: 4px 8px; background: rgba(0,0,0,0.25); border-radius: 4px;
}
.admin-link:hover { color: #fff; background: rgba(0,0,0,0.45); }

/* ── 共用小工具（取代常見 inline）──────────────────────────────────────────── */
.u-flex1    { flex: 1; min-width: 0; }
.u-noshrink { flex-shrink: 0; }

/* ── Page: profile ──────────────────────────────────────────────────────────── */
.page--profile .page-content-scroll { padding-top: 16px; padding-bottom: 20px; }
.page--profile .profile-avatar {
  width: 64px; height: 64px; flex-shrink: 0; background: var(--c-teal-3);
  border: 3px solid var(--c-border); box-shadow: 3px 3px 0 var(--c-teal-1);
  overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 32px;
}
.page--profile .profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; }
.page--profile .profile-info-row {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  background: var(--c-card); border: 3px solid var(--c-border); box-shadow: 4px 4px 0 var(--c-shadow); position: relative;
}
.page--profile .profile-info-row::after { display: none; }
.page--profile .profile-name  { font-size: var(--fs-md); font-weight: 700; margin-bottom: 3px; }
.page--profile .profile-email { font-size: var(--fs-xs); color: var(--c-text-hint); }
.page--profile .stat-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.page--profile .stat-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  background: var(--c-warn-light); border: 2px solid var(--c-gold-dark); box-shadow: 2px 2px 0 var(--c-gold-dark);
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-text);
}
.page--profile .stat-chip-teal { background: var(--c-accent); border-color: var(--c-teal-1); box-shadow: 2px 2px 0 var(--c-teal-1); }
.page--profile .grade-display { font-size: var(--fs-xl); font-weight: 700; color: var(--c-primary); font-family: 'Courier New', monospace; }
.page--profile .upgrade-hint  { font-size: var(--fs-xs); color: var(--c-text-hint); margin-top: 4px; }
.page--profile .section-row   { display: flex; align-items: center; justify-content: space-between; }
.page--profile .wrong-count   { font-size: 48px; font-weight: 700; font-family: 'Courier New', monospace; color: var(--c-primary); line-height: 1; }
.page--profile .wrong-label   { font-size: var(--fs-xs); color: var(--c-text-hint); margin-top: 4px; }
/* progress bar 已大一統 → .pixel-progress / .pixel-progress__fill（見檔末通用元件） */
.page--profile .progress-text  { font-size: var(--fs-xs); color: var(--c-text-hint); margin-top: 6px; line-height: 1.6; }
.page--profile .badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.page--profile .badge-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px;
  background: var(--c-card); border: 2px solid var(--c-border); box-shadow: 2px 2px 0 var(--c-shadow); text-align: center;
}
.page--profile .badge-item.locked   { opacity: 0.35; filter: grayscale(100%); }
.page--profile .badge-item.unlocked { background: var(--c-warn-light); border-color: var(--c-gold-dark); }
.page--profile .badge-icon { font-size: 28px; line-height: 1; }
.page--profile .badge-name { font-size: 9px; color: var(--c-text-hint); line-height: 1.4; }
@keyframes badge-pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.page--profile .badge-item.unlocked .badge-icon { animation: badge-pop 400ms ease-out both; }
.page--profile .avatar-studio-card {
  display: flex; align-items: center; gap: 14px; background: var(--c-card);
  border: 3px solid var(--c-border); box-shadow: 4px 4px 0 var(--c-shadow); padding: 14px 16px;
}
.page--profile .avatar-preview-mini {
  width: 72px; height: 120px; flex-shrink: 0; background: var(--c-teal-3); border: 3px solid var(--c-border);
  display: flex; align-items: center; justify-content: center; font-size: 28px; position: relative; overflow: hidden;
}
.page--profile .avatar-equipped-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.page--profile .avatar-tag { font-size: var(--fs-base); padding: 4px 8px; background: var(--c-accent); border: 1px solid var(--c-teal-1); color: var(--c-teal-1); }
.page--profile .grade-select-wrap { display: none; gap: 8px; align-items: center; margin-top: 10px; }
.page--profile .grade-select-wrap.visible { display: flex; }
/* 年級下拉已大一統 → .pixel-select-wrapper + .pixel-select（見檔末表單元件）；
   此處讓包裹層在 flex 列中吃滿剩餘空間，並把 .pixel-btn--lg 的 width:100% 收成內容寬，
   避免「儲存」鈕撐滿整列、把下拉擠到只剩 ▼ 看不到年級文字 */
.page--profile .grade-select-wrap .pixel-select-wrapper { flex: 1 1 auto; width: auto !important; }
.page--profile .grade-select-wrap .pixel-btn { flex: 0 0 auto; width: auto !important; }
.page--profile .section-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; margin-top: 20px; }
.page--profile .section-hd:first-child { margin-top: 0; }
.page--profile .section-title { font-size: var(--fs-md); font-weight: 700; }
/* profile 內聯收斂的小規則 */
.page--profile .avatar-mini-label { font-size: var(--fs-sm); font-weight: 700; margin-bottom: 4px; }
.page--profile .next-badge-icon { font-size: 32px; filter: grayscale(100%) opacity(0.5); }
.page--profile .next-badge-pct { font-family: 'Courier New', monospace; font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary); }
.page--profile .card-pad { padding: 16px 18px; }
.page--profile .row-end { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.page--profile .row-center { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.u-fs-xs { font-size: var(--fs-xs); }
.u-strong-sm { font-size: var(--fs-sm); font-weight: 700; }
.u-dim { opacity: 0.5; }
.page--profile .field-label { font-size: var(--fs-xs); color: var(--c-text-hint); margin-bottom: 4px; }
.page--profile #selfPracticeMsg { display: none; margin-top: 10px; font-size: var(--fs-xs); color: var(--c-text-hint); line-height: 1.7; }
.page--profile .all-badges-done { text-align: center; padding: 8px 0; font-size: var(--fs-sm); color: var(--c-success); }
.page--profile .avatar-mini-layer { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }


/* ════════ 各頁 <style> 收斂（scoped .page--*，2026-06-17 重構）════════ */

/* ── Page: onboarding ── */

    /* ── Grade-pick screen ───────────────────────────────────────────────── */
    .page--onboarding #screenGrade { position: fixed;

      /*改這 */
      /* 💡 關鍵：把 inset: 0; 改成下面這四行，讓它在電腦大螢幕上居中，呈現手機形狀 */
      top: 0; bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      /*加上面三行 */
      /*inset: 0;*/
      width: 100%;
      max-width: 430px;       /* 💡 關鍵：強行限制整個畫面的最寬度就是一般大螢幕手機的寬度 (430px) */
      box-sizing: border-box; /* 💡 確保 padding 不會把寬度撐開 */
      /*加上面三行 */

      background: url('/static/images/onboarding-bg.png') center/cover no-repeat;
      display: flex; flex-direction: column; align-items: center;
      justify-content: center;
      padding: 16px 8px 16px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      gap: 12px; }


    .page--onboarding .grade-title-img { width: 200px; max-width: 60vw;
      flex-shrink: 0; }


    /* frame01 = 960×1112；以 img 撐開容器保持比例，內容用 absolute 疊上 */
    .page--onboarding .grade-frame { width: 100%;
      position: relative;
      flex-shrink: 0; }

    .page--onboarding .grade-frame-bg,
.page--onboarding .wood-btn-wrap > img { width: 100%;
      display: block; }

    .page--onboarding .grade-frame-content { position: absolute;
      inset: 0;
      /*改這 */
      /* 依 frame01 邊框留白比例換算 padding */
      /* 💡 終極修正：把左右 padding 從 8% 加大到 14%！ */
      /* 這樣等於從左右兩側伸出隱形的大手，把卡片往內擠，卡片自然就會等比例變小，且絕對不會超出底板！ */
      padding: 12% 14% 10%;
      /*改上面一行 */
      /* 依 frame01 邊框留白比例換算 padding（邊框約佔圖寬 8%、圖高 9%）
      padding: 9% 8% 10%;*/
      display: flex;
      flex-direction: column;
      align-items: stretch; }


    .page--onboarding .grade-frame-title { text-align: center;
      font-size: clamp(17px, 5vw, 26px); font-weight: 900;
      color: #5a3a1a;
      margin-bottom: 6%;
      letter-spacing: 0.05em;
      font-family: 'Noto Sans TC', sans-serif;
      flex-shrink: 0;
      /*改這 */
      /* 把標題的佔用高度鎖死在34px（比字體還小一點） */
      /* 這樣不論字體改多大，它在網頁排版中永遠只佔用34px 的空間，絕對不會推擠到下方的按鈕！ */
      height: 34px;
      line-height: 34px;
      position: relative; /* 💡 只讓文字本身相對下移 8px，完全不影響下方任何元素的排版與位置 */
      top: 30px;
      /*加上面4行 */ }


    .page--onboarding .grade-grid { display: grid; 
      grid-template-columns: repeat(3, 1fr);
      /*改這 */
      gap: 10px 6px;        /* 💡 微調間距：左右間距 6px 剛好，上下間距調整到 10px 讓兩排卡片有點呼吸空間 */
      align-content: center; /* 💡 讓內容在上下垂直居中，確保卡片不會往上飄或往下掉 */
      flex: 1;
      width: 100%;   /* 💡 交給外層 padding 來控制最安全 */
      /*加上面四行 */
      /*gap: 6px;
      flex: 1;*/ }


    /* 每張年級卡：grade img 撐開，pick-grade 疊上 */
    .page--onboarding .grade-card { position: relative;
      cursor: pointer; user-select: none;
      transition: transform 80ms;
      
      /*改這 */
      /* 💡 確保裡面的圖片和寶石框都能在格子裡完美對齊置中 */
      display: flex;
      justify-content: center;
      align-items: center;
      /*加上面三行 */ }

    .page--onboarding .grade-card:active { transform: scale(0.94); }


    .page--onboarding .grade-img { width: 100%;
      /*改這 */
      height: 100%;          /* 💡 恢復成 100%，讓它跟著九宮格的縮小而等比例縮小 */
      object-fit: fill;   /* 💡 關鍵：改成 fill，讓底圖乖乖填滿整個格子 */
      /*改上面兩句 */
      display: block;
      border-radius: 3px; }


    /* pick-grade.png = 選取狀態外框，絕對定位疊在 grade-img 上 */
    .page--onboarding .grade-pick { position: absolute;
      /*inset: 0;*/
      /*改這 */
      /* 💡 往上移動（top 變負值），往左微調（left 變負值），讓寶石框突破格子邊界 */
      top: -8px;
      left: -5px;
      /* 💡 關鍵：寬度與高度都要比原本的 100% 再大一點，框才會變粗變大！ */
      width: calc(100% + 10px); 
      height: calc(100% + 9px);
      /*改上面四行 */
      /*width: 100%; height: 100%;*/
      object-fit: fill;   /* 強迫寶石框跟底圖用完全一樣的形狀拉伸，這樣圖跟框就絕對不會錯位！ */
      display: none;
      pointer-events: none;
      z-index: 2; }

    .page--onboarding .grade-card.selected .grade-pick,
.page--arcade .arc-unit-card.open .arc-inst-list { display: block; }


    /* wood-btn01 = 1779×592；以 img 撐開，文字 absolute 疊上 */
    .page--onboarding .wood-btn-wrap { width: 100%;
      /*改這 */
      max-width: 320px; /* 💡 關鍵！限制按鈕最寬就是 320 像素，再寬螢幕也不會變形 */
      margin: 12px auto 0;    /* 💡 關鍵！auto 會讓按鈕在畫面「水平居中」，12px 是跟上面的間距 */
      /*改上面兩句 */
      flex-shrink: 0;
      position: relative; cursor: pointer;
      user-select: none;
      transition: transform 80ms; }

    .page--onboarding .wood-btn-wrap:active { transform: translateY(3px); }

    
    .page--onboarding .wood-btn-label { position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      /*改這 */
      font-size: var(--fs-display);  /* §8.1 三層字體 */
      /*font-size: clamp(16px, 4.5vw, 22px);  */
      margin-bottom: 3px; /* 微微把文字往上提3像素，達到最完美的置中視覺！ */
      margin-left: 4px; /* 把文字從左邊往右推 4 像素！ */
      /*加上面兩行 */
      font-weight: 900;
      color: #F2E2C4;
      letter-spacing: 0.06em;
      text-shadow: 0 2px 6px rgba(0,0,0,0.45);
      pointer-events: none;
      font-family: 'Noto Sans TC', sans-serif; }

    .page--onboarding .wood-btn-wrap.disabled { opacity: 0.55; pointer-events: none; }


    /* ── Topic screen (step 2) ───────────────────────────────────────────── */
    .page--onboarding #screenTopic { position: fixed; inset: 0;
      background: url('/static/images/onboarding-bg.png') center/cover no-repeat;
      display: none; flex-direction: column;
      overflow: hidden; }

    .page--onboarding #screenTopic.active { display: flex; }


    .page--onboarding .topic-header { padding: 20px 20px 12px;
      background: rgba(237,230,204,0.92);
      border-bottom: 3px solid #c8a96e;
      display: flex; align-items: center; gap: 12px; }

    .page--onboarding .topic-back-btn { background: none; border: none; cursor: pointer;
      font-size: var(--fs-display); color: #7a5a2a; padding: 0 4px; }

    .page--onboarding .topic-header-title { font-size: var(--fs-lg); font-weight: 900; color: #5a3a1a; }


    .page--onboarding .topic-scroll { flex: 1; overflow-y: auto;
      padding: 20px 20px 120px;
      -webkit-overflow-scrolling: touch; }

    .page--onboarding .topic-list,
.page--arcade .arc-unit-list { display: flex; flex-direction: column; gap: 10px; }

    .page--onboarding .topic-card { display: flex; align-items: center; gap: 14px;
      padding: 14px 16px;
      background: rgba(255,251,240,0.92);
      border: 3px solid #c8a96e;
      box-shadow: 3px 3px 0 rgba(100,70,20,0.25);
      cursor: pointer; user-select: none; position: relative;
      border-radius: 4px;
      transition: transform 100ms, box-shadow 80ms; }

    .page--onboarding .topic-card:active,
.page--quiz .prac-option:active { transform: translate(3px,3px); box-shadow: none; }

    .page--onboarding .topic-card.selected { background: rgba(245,208,106,0.35);
      border-color: #c8860a;
      box-shadow: 3px 3px 0 #c8860a; }

    .page--onboarding .topic-card.selected::after { content: '✓'; position: absolute; top: 50%; right: 14px;
      transform: translateY(-50%);
      font-size: var(--fs-lg); font-weight: 900; color: #c8860a; }

    .page--onboarding .topic-emoji { font-size: 30px; line-height: 1; flex-shrink: 0; width: 40px; text-align: center; }

    .page--onboarding .topic-name { font-size: var(--fs-base); font-weight: 700; color: #3a2a0a; margin-bottom: 3px; }

    .page--onboarding .topic-card.selected .topic-name { color: #8b5a00; }

    .page--onboarding .topic-tag { display: inline-block; font-size: var(--fs-base); font-weight: 700;
      background: #ede6cc; color: #7a6040;
      border: 1.5px solid #c8a96e; padding: 1px 7px; border-radius: 2px; }

    .page--onboarding .topic-card.selected .topic-tag { background: #f5d06a; color: #6b3d00; border-color: #c8860a; }


    .page--onboarding .topic-footer { position: absolute; bottom: 0; left: 0; right: 0;
      padding: 0 20px 28px; }

  

/* ── Page: avatar-studio ── */

    /* ── Avatar stage ── */
    .page--avatar-studio .avatar-stage { display: flex; flex-direction: column; align-items: center;
      padding: 20px 20px 14px;
      background: var(--c-sand); border-bottom: 3px solid var(--c-border);
      flex-shrink: 0; }

    /*
      SVG viewBox = 0 0 16 24  →  비율 2:3
      Display size: 96px × 144px（6× scale）
      All 5 layers share the same absolute position → pixel-perfect stacking
    */
    .page--avatar-studio .avatar-frame { width: 96px; height: 144px;
      position: relative;
      image-rendering: pixelated; }

    .page--avatar-studio .avatar-layer { position: absolute; inset: 0;
      width: 100%; height: 100%;
      /* hide broken-image icon when src is empty */ }

    .page--avatar-studio .avatar-layer[src=""],
.page--avatar-studio .item-preview img[src=""] { display: none; }

    .page--avatar-studio .equipped-strip { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }

    /* 色彩/邊框已由 .pixel-badge(--success) 大一統；此處僅保留換裝列的尺寸 */
    .page--avatar-studio .equipped-chip { width: auto !important; padding: 4px 10px; }



    /* ── Item grid ── */
    .page--avatar-studio .item-scroll { flex: 1; overflow-y: auto; padding: 14px 16px 100px; -webkit-overflow-scrolling: touch; }

    .page--avatar-studio .item-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }


    .page--avatar-studio .item-card { display: flex; flex-direction: column; align-items: center; gap: 8px;
      padding: 12px 6px 10px;
      background: var(--c-card); border: 3px solid var(--c-border);
      box-shadow: 3px 3px 0 var(--c-shadow); cursor: pointer;
      transition: border-color .1s, box-shadow .1s, transform .1s;
      position: relative; }

    .page--avatar-studio .item-card:active,
.page--quiz .num-key:active,
.page--quiz .digit-key:active,
.page--quiz .option-tile:active,
.page--quiz .inline-option-tile:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--c-shadow); }

    .page--avatar-studio .item-card.equipped,
.page--quiz .digit-key.selected { border-color: var(--c-primary); background: var(--c-warn-light);
      box-shadow: 3px 3px 0 var(--c-primary-dark); }

    .page--avatar-studio .item-card.equipped::after { content: '✓'; position: absolute; top: 4px; right: 6px;
      font-size: 10px; font-weight: 700; color: var(--c-primary); }

    /* "不穿" 卡片 */
    .page--avatar-studio .item-card.none-card { border-style: dashed; opacity: .7; }

    .page--avatar-studio .item-card.none-card.equipped { border-style: solid; opacity: 1; }


    /*
      道具預覽：同樣用 5 層 SVG 疊合，只顯示該層的貢獻
      固定尺寸 48×72 px（3× scale）
    */
    .page--avatar-studio .item-preview { width: 48px; height: 72px;
      position: relative; image-rendering: pixelated; flex-shrink: 0; }

    .page--avatar-studio .item-preview img { position: absolute; inset: 0; width: 100%; height: 100%; }

    

    .page--avatar-studio .item-label { font-size: var(--fs-xs); font-weight: 700; color: var(--c-text); text-align: center; line-height: 1.4; }

    .page--avatar-studio .item-unlock-hint { font-size: 9px; color: var(--c-text-hint); text-align: center; }


    /* ── Toast ── */
    .page--avatar-studio .save-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
      background: var(--c-primary); color: #fff;
      border: 3px solid var(--c-primary-dark); box-shadow: 3px 3px 0 var(--c-primary-dark);
      padding: 8px 20px; font-size: var(--fs-xs); font-weight: 700;
      opacity: 0; pointer-events: none; transition: opacity .2s; white-space: nowrap; }

    .page--avatar-studio .save-toast.show { opacity: 1; }

  

/* ── Page: arcade ── */

  .page--arcade .page { background: url('/static/images/onboarding-bg.png') center/cover no-repeat;
    display: flex; flex-direction: column; min-height: 100vh; }


  /* ── Body ── */
  .page--arcade .arc-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 13px 32px; }


  /* ── Section title ── */
  .page--arcade .arc-section-title { font-size: 11px; font-weight: 700;
    color: var(--c-text-sub);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin: 0 0 10px;
    display: flex; align-items: center; gap: 6px; }

  .page--arcade .arc-section-title::after { content: ''; flex: 1;
    height: 2px; background: var(--c-border); }


  /* ── Unit card ── */
  
  .page--arcade .arc-unit-card { background: var(--c-card);
    border: 3px solid var(--c-border);
    box-shadow: 4px 4px 0 var(--c-shadow);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s; }

  .page--arcade .arc-unit-card:active { transform: translate(4px,4px); box-shadow: none; }

  .page--arcade .arc-unit-header { display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; }

  .page--arcade .arc-unit-icon { width: 44px; height: 44px; flex-shrink: 0;
    background: #E8F4F8;
    border: 2px solid var(--c-border);
    display: flex; align-items: center; justify-content: center; }

  .page--arcade .arc-unit-name { flex: 1;
    font-size: 13px; font-weight: 700; color: var(--c-text);
    margin-bottom: 3px; }

  .page--arcade .arc-unit-count { font-size: 10px; color: var(--c-text-sub); }

  .page--arcade .arc-unit-arrow { font-size: 16px; color: var(--c-text-hint);
    transition: transform 0.2s; }

  .page--arcade .arc-unit-card.open .arc-unit-arrow { transform: rotate(90deg); }


  /* ── Instance list (inside unit card) ── */
  .page--arcade .arc-inst-list { border-top: 2px solid var(--c-border);
    display: none; }

  
  .page--arcade .arc-inst-item { display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-border);
    text-decoration: none;
    cursor: pointer;
    background: var(--c-bg);
    transition: background 0.15s; }

  .page--arcade .arc-inst-item:last-child { border-bottom: none; }

  .page--arcade .arc-inst-item:active { background: var(--c-gold); }

  .page--arcade .arc-inst-name { flex: 1;
    font-size: 12px; font-weight: 700; color: var(--c-text);
    margin-bottom: 2px; }

  .page--arcade .arc-inst-diff { font-size: 9px; color: var(--c-text-hint); }

  /* 色彩/邊框/padding 已由 .pixel-badge(--success/warn/danger) 大一統；僅留緊湊尺寸 */
  .page--arcade .arc-diff-badge { font-size: 8px; flex-shrink: 0; }


  /* ── Empty state ── */
  .page--arcade .arc-empty { text-align: center; padding: 40px 20px;
    color: var(--c-text-hint); font-size: 11px; }


  /* ── Loading spinner ── */
  .page--arcade .arc-loading { text-align: center; padding: 30px;
    color: var(--c-text-sub); font-size: 11px; }

  .page--arcade .arc-loading::after { content: ''; display: block; width: 20px; height: 20px;
    border: 3px solid var(--c-border);
    border-top-color: var(--c-gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 8px auto 0; }

  @keyframes spin { to { transform: rotate(360deg); } }
  

/* ── Page: report ── */

    /* ── Stat boxes ── */
    .page--report .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
      flex-shrink: 0; }

    .page--report .stat-box { background: var(--c-card);
      border: 3px solid #2D1F0E;
      box-shadow: 4px 4px 0 #C49A70;
      padding: 14px 10px;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      text-align: center; position: relative; }

    .page--report .stat-box::after { content: ''; position: absolute; inset: 3px;
      border-top: 1px solid rgba(220,180,60,0.4); border-left: 1px solid rgba(220,180,60,0.4);
      border-right: 1px solid rgba(80,50,10,0.15); border-bottom: 1px solid rgba(80,50,10,0.15);
      pointer-events: none; }

    .page--report .stat-num { font-family: 'Courier New', monospace; font-size: var(--fs-xl); font-weight: 700; line-height: 1; }

    .page--report .stat-label { font-size: var(--fs-xs); color: var(--c-text-hint); }


    /* ── Topic mastery row ── */
    .page--report .topic-row { display: flex; align-items: center; gap: 12px;
      padding: 14px 16px;
      background: var(--c-card);
      border: 3px solid #2D1F0E;
      box-shadow: 4px 4px 0 #C49A70; }

    .page--report .topic-emoji { font-size: var(--fs-lg); flex-shrink: 0; }

    .page--report .topic-name { font-size: var(--fs-sm); font-weight: 700; margin-bottom: 6px; }

    .page--report .topic-bar-wrap { height: 8px; background: var(--c-sand); border-radius: var(--r-sm); border: 1px solid var(--c-border); overflow: hidden; }

    .page--report .topic-bar-fill { height: 100%; border-radius: var(--r-sm); background: var(--c-success); transition: width 600ms ease-out; }

    .page--report .topic-pct { font-size: var(--fs-xs); color: var(--c-text-hint); flex-shrink: 0; font-family: 'Courier New', monospace; }


    /* ── Record row ── */
    .page--report .record-row { display: flex; align-items: center; gap: 12px;
      padding: 12px 16px;
      background: var(--c-card);
      border: 3px solid #2D1F0E;
      box-shadow: 4px 4px 0 #C49A70; }

    .page--report .record-dot { width: 36px; height: 36px; border-radius: 0;
      background: var(--c-gold);
      border-top: 2px solid var(--c-gold-light); border-left: 2px solid var(--c-gold-light);
      border-right: 2px solid var(--c-gold-dark); border-bottom: 2px solid var(--c-gold-dark);
      display: flex; align-items: center; justify-content: center;
      font-size: var(--fs-lg); flex-shrink: 0; }

    .page--report .record-date { font-size: var(--fs-xs); color: var(--c-text-hint); margin-bottom: 2px; }

    .page--report .record-title { font-size: var(--fs-sm); font-weight: 700; }

    .page--report .record-score { font-family: 'Courier New', monospace; font-size: var(--fs-lg); font-weight: 700; flex-shrink: 0; }


    /* ── Section header ── */
    .page--report .section-hd { display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 10px; margin-top: 20px; }

    .page--report .section-hd:first-child { margin-top: 0; }

    .page--report .section-title { font-size: var(--fs-md); font-weight: 700; }

  

/* ── Page: socratic ── */

      /* ── 1. 全域手機版防跑版與像素背景設定 ── */
      html, .page--socratic { margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        overflow: hidden; /* 防止手機外層產生網頁橡皮筋晃動 */
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        background: #EDE6CC; /* 萬一破圖時的底色 */
        font-family: 'BpmfZihiSans', -apple-system, 'PingFang TC', 'Noto Sans TC', sans-serif; }

      
      .page--socratic input, .page--socratic button, .page--socratic select, .page--socratic textarea { font-family: 'BpmfZihiSans', -apple-system, 'PingFang TC', 'Noto Sans TC', sans-serif !important; }

      
      .page--socratic .chat-page { width: 100%; 
        max-width: 480px;     
        margin: 0 auto;       
        height: 100dvh;       
        display: flex; 
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 0 20px rgba(0,0,0,0.25);
        box-sizing: border-box;
        background: url('/static/images/function-bg.png') center / cover no-repeat; }


      /* ── 2. 重構：整合型遊戲頂部狀態欄 (釋放大量空間) ── */
      .page--socratic .game-status-bar { background: var(--c-card);
        border-bottom: 3px solid var(--c-border);
        padding: 10px 14px;
        flex-shrink: 0;
        z-index: 10;
        display: flex;
        flex-direction: column;
        gap: 8px; }


      .page--socratic .status-top-row { display: flex;
        justify-content: space-between;
        align-items: center; }


      .page--socratic .status-bottom-row,
.page--quiz .total-row { display: flex;
        align-items: center;
        gap: 10px; }


      .page--socratic .avatar-mini { width: 32px; height: 32px;
        background: var(--c-teal-3);
        border: 2px solid var(--c-border);
        box-shadow: 1px 1px 0 var(--c-teal-1);
        display: flex; align-items: center; justify-content: center;
        font-size: 16px; flex-shrink: 0;
        animation: avatar-float 3s ease-in-out infinite; }


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

      /* 點擊當前選定文字可以重選，增加點擊提示底線 */
      .page--socratic #menu-prompt { font-size: var(--fs-sm);
        font-weight: bold;
        color: var(--c-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }

      .page--socratic #menu-prompt.clickable { cursor: pointer;
        text-decoration: underline;
        color: #2e7d32; }


      .page--socratic .ai-progress { display: flex; gap: 4px; align-items: center; 
        font-size: var(--fs-xs);
        font-weight: bold;
        color: var(--c-text-sub); }

      .page--socratic .progress-dots-group { display: flex; gap: 3px; }

      .page--socratic .progress-dot { width: 8px; height: 8px;
        background: var(--c-sand);
        border: 2px solid var(--c-border); }

      .page--socratic .progress-dot.active { background: var(--c-primary);
        border-color: var(--c-primary-dark); }


      /* ── 3. 選單排版瘦身，移除原本的大磚頭外框 ── */
      .page--socratic .step-indicator { font-size: 0.75rem;
        color: #888;
        margin-top: 2px;
        text-align: center; }

      .page--socratic .step-indicator .dot.active { color: #ff5722;
        font-weight: bold;
        text-decoration: underline; }

      
      /* 標準原生的 HTML5 注音旁註樣式調校 */
      .page--socratic ruby { ruby-position: over; }

      .page--socratic rt { font-size: 0.55rem; color: inherit; letter-spacing: 0px; padding-bottom: 1px; }


      .page--socratic .dynamic-select-wrapper { width: 100%;
        margin-top: 2px; }

      .page--socratic .dynamic-select-wrapper select { width: 100%;
        padding: 8px;
        font-family: inherit;
        font-size: var(--fs-sm);
        border: 2px solid var(--c-border, #000);
        background: #fff;
        cursor: pointer;
        outline: none;
        box-shadow: 2px 2px 0px rgba(0,0,0,0.1);
        -webkit-appearance: none; }


      /* ── 4. 聊天與輸入區域 ── */
      .page--socratic .chat-area { flex: 1; 
        overflow-y: auto;
        padding: 12px 14px 4px;
        display: flex; 
        flex-direction: column; 
        gap: 4px;
        scroll-behavior: smooth;
        background: transparent; 
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain; }


      .page--socratic .chat-row { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 8px; }

      .page--socratic .chat-row-ai { justify-content: flex-start; }

      .page--socratic .chat-row-user { justify-content: flex-end; }


      .page--socratic .chat-label { font-size: var(--fs-xs); color: var(--c-text-hint);
        margin-bottom: 5px; display: block; }

      .page--socratic .chat-row-user .chat-label { text-align: right; }


      .page--socratic .session-done { background: var(--c-success-light);
        border: 3px solid var(--c-primary-dark);
        box-shadow: 4px 4px 0 var(--c-primary-dark);
        padding: 20px; margin: 8px;
        text-align: center;
        position: relative; }


      .page--socratic .guardrail { background: var(--c-warn-light);
        border: 2px dashed var(--c-gold-dark);
        padding: 10px 14px;
        font-size: var(--fs-sm); color: var(--c-text);
        display: flex; align-items: flex-start; gap: 8px;
        line-height: 1.6; align-self: stretch; margin: 4px 0; }


      .page--socratic .input-bar { display: flex; gap: 8px; align-items: flex-end;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--c-card);
        border-top: 3px solid var(--c-border);
        flex-shrink: 0; }

      /* 底層皮膚（cream 底 / 3px 焦糖框 / 方角 / appearance reset / focus 草綠）已由
         .pixel-textarea 大一統；此處僅保留聊天輸入列的「自動長高 composer」專屬行為：
         單行起跳（覆寫通用 80px 最小高）、隨內容長高到上限、可滾動 */
      .page--socratic .input-bar textarea {
        flex: 1;
        line-height: 1.5;
        padding: 10px 12px;
        min-height: 0;            /* ← 覆寫 .pixel-textarea 的 80px，維持單行緊湊起跳 */
        max-height: 100px;
        overflow-y: auto;
      }

      .page--socratic .input-bar textarea::placeholder { color: var(--c-text-hint); }


      .page--socratic #btn-send { width: 48px; height: 48px;
        background: var(--c-primary);
        border: 3px solid var(--c-border);
        box-shadow: 3px 3px 0 var(--c-primary-dark);
        border-radius: 0;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        font-size: var(--fs-lg); flex-shrink: 0;
        transition: transform 80ms, box-shadow 80ms;
        color: var(--c-text-on); }

      .page--socratic #btn-send:active { transform: translate(3px,3px); box-shadow: none; background: var(--c-primary-dark); }

      .page--socratic #btn-send:disabled { opacity: 0.4; cursor: not-allowed; }


      /* 🎯 讓裝按鈕的容器限制高度，超過就允許拉上拉下 */
      .page--socratic #main-dynamic-select { display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        max-height: 180px;      /* 🚀 限制最大高度，可依畫面精準調整 */
        overflow-y: auto;       /* 🚀 關鍵：超過高度時，自動啟用上下滑動功能 */
        padding-right: 4px;     /* 留點空隙給滾動條，避免像素邊框被切到 */
        
        /* 隱藏原生粗糙的滾動條（選用，讓畫面更像素風） */
        scrollbar-width: thin; }

      .page--socratic .pixel-select-btn { width: 100%;
        padding: 10px;
        font-family: 'BpmfZihiSans', inherit;
        font-size: var(--fs-sm);
        color: var(--c-text);
        border: 2px solid var(--c-border, #000);
        background: #fff;
        cursor: pointer;
        text-align: center;
        box-shadow: 2px 2px 0px rgba(0,0,0,0.1);
        flex-shrink: 0;         /* 🚀 防止按鈕在滾動容器裡被擠壓變扁 */
        transition: background 0.1s; }


      .page--socratic .pixel-select-btn:active { background: var(--c-cream, #f5f0e1); /* 點擊時有反饋感 */
        transform: translate(1px, 1px);
        box-shadow: 1px 1px 0px rgba(0,0,0,0.1); }

    

/* ── Page: ocr ── */

    /* OCR page: warm light theme */
    .page--ocr .page { background: url('/static/images/function-bg.png') center/cover no-repeat; 
      display: flex; 
      flex-direction: column; 
      min-height: 100vh; }


    .page--ocr .page-content-scroll { padding: 20px 20px 100px;
      color: var(--c-text); }


    .page--ocr .photobook-frame { position: relative;
      background: url('/static/images/photobook.png') center/100% 100% no-repeat;
      width: 92%;
      max-width: 390px;
      margin: 0 auto;    /* 居中 */
      /* 調整內部上方內距，讓「上傳考卷照片」的字體剛好落在方框內上方 */
      padding: 36px 25px 24px;
      display: flex;
      flex-direction: column;
      align-items: center; /* 讓內容水平居中 */
      box-sizing: border-box; }


    .page--ocr .section-label { font-size: var(--fs-sm); 
      font-weight: 700;
      color: #5c3a21; /* 配合木質調，可以用較深的焦糖色，或維持 var(--c-text-sub) */
      margin-bottom: 0; /* 💡 拿掉外距，改由上一層的 padding 或內層定位控制，防止擠壓比例 */
      text-align: center;
      width: 100%; }


    /* Upload zone — cream with dashed teal border */
    .page--ocr .upload-zone { position: relative;
      width: 85%;         /* 透明框寬度 */
      height: clamp(160px, 46vw, 238px);      /* 透明框高度 */
      text-align: center;
      cursor: pointer;
      background: transparent; /* 💡 變成透明的，秀出原本圖上的像素相片 */
      border: none;            /* 💡 拔掉原本的虛線，因為圖片上已經有了 */
      display: flex;
      flex-direction: column;
      justify-content: flex-end; /* 💡 讓提示文字靠底部排列，就不會撞到圖片中央的相片圖示 */
      padding-bottom: 20px;      /* 讓文字距離內層底線有一點留白 */
      box-sizing: border-box;
      transition: transform 0.1s ease, background 0.2s;
      margin-top: 10px; /* 「外距」來控制(下移) */
      transform: translateY(3px); /* 使用 translateY 讓透明框單獨下移 15px，且完全不影響其他物件 */ }

    .page--ocr .upload-zone:hover, .page--ocr .upload-zone.drag-over { background: rgba(255, 255, 255, 0.2); /* 20% 透明度的白色調 */
      border-radius: 4px; }

    .page--ocr .upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0;
      cursor: pointer; width: 100%; height: 100%; z-index: 10; }


    /* 💡 滑鼠點擊或手指按住時的效果 */
    .page--ocr .upload-zone:active { transform: scale(0.97); /* 讓整個區域微幅縮小 3%，營造按下去的下沉感 */
      background: rgba(0, 0, 0, 0.05); /* 淡淡的黑影，讓方框內看起來稍微變暗 */
      transition: transform 0.05s ease; /* 讓縮放反應更靈敏迅速 */ }


    /* 💡 同時讓原本的透明 input 不要阻擋了變形動畫 */
    .page--ocr .upload-zone { /* 確保妳原本的 .upload-zone 裡面有這行，動效才會順暢 */
      transition: transform 0.1s ease, background 0.2s; }


    .page--ocr .upload-zone:active div { transform: translate(1px, 1px); }


    /* Camera button row */
    .page--ocr .camera-row { display: flex; 
      gap: 16px;          /* 稍微拉開兩個圖片按鈕的間距 */
      margin-top: clamp(20px, 8vw, 45px); 
      width: 100%;
      max-width: 310px;   /* 控制按鈕列的總寬度，可以依畫面感覺微調 */ }

    .page--ocr .camera-btn { flex: 1; 
      cursor: pointer;
      display: block;
      position: relative; /* 💡 關鍵：一定要加 relative，文字絕對定位才不會飄走！ */
      user-select: none; }


    .page--ocr .camera-btn img { width: 100%;        /* 讓圖片完美填滿平分後的寬度 */
      height: auto;       /* 保持圖片原本的長寬比例 */
      display: block;
      image-rendering: pixelated; /* 確保妳的像素圖案放大時依然清晰、不變模糊 */
      transition: transform 50ms ease; /* 讓點擊彈回來的動態更靈敏 */ }


    /* 疊在圖片中央的文字樣式 */
    .page--ocr .camera-btn-text { position: absolute;
      top: 0;
      bottom: 0;
      right: 10px;          /* 字體距離按鈕最右邊的距離 */
      display: flex;
      align-items: center;  /* 垂直置中 */
    

    /* 字型設定 */
      font-family: 'BpmfZihiSans', -apple-system, 'PingFang TC', 'Noto Sans TC', sans-serif;
      font-size: 15px;      /* 稍微縮小一點點字級，確保在各種手機螢幕上都不會爆開 */
      font-weight: 700;
      color: #ffffff;       /* 改為純白字，配上綠底跟藍底會非常清晰顯眼 */
      text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4); /* 加上像素風陰影，字體更立體 */
      
      letter-spacing: -0.5px; /* 💡 核心：使用負值緊縮字間距，讓字體更緊湊、不擁擠 */

      padding-bottom: 5px;  /* 因為像素圖案下半部有厚度，稍微把字往上提一點會感覺更正中央 */
      box-sizing: border-box; }


    .page--ocr .camera-btn:active { transform: translate(2px, 2px); }

    .page--ocr .expl-step { display:flex; gap:8px; font-size:12px; color:var(--c-text); line-height:1.7; margin-bottom:6px; text-align: left; }
    .page--ocr .expl-step .n { flex-shrink:0; width:18px; height:18px; border-radius:50%; background:var(--c-gold); color:var(--c-text); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }


  

    /* Preview */
    .page--ocr .preview-wrap { position: relative; 
      width: 85%; 
      height: 235px; 
      border: none; 
      box-shadow: none; 
      margin: 0 auto 15px; 
      background: #fdfbf0; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      overflow: hidden; 
      border-radius: 6px; }

    
    .page--ocr .preview-img { width: 100%; display: block; max-height: 280px; object-fit: contain; background: var(--c-sand); }

    .page--ocr .preview-remove { position: absolute; top: 8px; right: 8px;
      width: auto !important;
      background: var(--c-danger);
      border: 2px solid var(--c-border);
      box-shadow: 2px 2px 0 var(--c-danger-dark);
      color: #fff; font-size: var(--fs-xs); font-weight: 700;
      padding: 5px 10px; cursor: pointer;
      transition: transform 80ms, box-shadow 80ms; }

    .page--ocr .preview-remove:active { transform: translate(2px,2px); box-shadow: none; }


    /* Math whiteboard — warm white like a real whiteboard */
    .page--ocr .math-board { background: #FDFBF0;
      border: 3px solid var(--c-border);
      box-shadow: 4px 4px 0 var(--c-shadow);
      padding: 28px 16px;
      text-align: center; margin-bottom: 16px;
      position: relative; min-height: 110px;
      display: flex; align-items: center; justify-content: center;
      flex-wrap: wrap; gap: 10px;
      background-image: repeating-linear-gradient(
        180deg, transparent, transparent 29px,
        rgba(78,205,196,0.15) 29px, rgba(78,205,196,0.15) 30px
      ); }

    /* 兩個比較區（試題挑錯 ↔ 答案解析）之間的淡色分隔虛線 */
    .page--ocr .compare-divider { width: 92%;
      margin: 2px auto 14px;
      border-top: 2px dashed var(--c-text-hint);
      opacity: 0.45; }


    .page--ocr .board-label { position: absolute; top: -14px; left: 14px;
      background: var(--c-teal-3);
      border: 2px solid var(--c-border);
      box-shadow: 2px 2px 0 var(--c-teal-1);
      font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-on);
      padding: 3px 10px; }


    /* Fraction display */
    .page--ocr .frac-wrap { display: inline-flex; flex-direction: column; align-items: center;
      font-family: 'Courier New', monospace; font-weight: 700; gap: 2px; }

    .page--ocr .frac-num, .page--ocr .frac-den { font-size: 40px; line-height: 1.1; color: var(--c-text); }

    .page--ocr .frac-bar { width: 100%; min-width: 32px; height: 3px; background: var(--c-text); margin: 2px 0; }

    .page--ocr .math-op { font-size: 28px; font-weight: 700; color: var(--c-text-sub); align-self: center; }


    /* Zone legend */
    .page--ocr .zone-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }

    .page--ocr .legend-item { display: flex; align-items: center; gap: 6px; }

    .page--ocr .legend-dot { width: 14px; height: 14px; border: 2px dashed; flex-shrink: 0; }


    /* Explanation slide-up panel */
    .page--ocr .explain-panel { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%);
      width: 100%; max-width: 480px;
      background: var(--c-card);
      border-top: 4px solid var(--c-primary);
      border-left: 3px solid var(--c-border);
      border-right: 3px solid var(--c-border);
      padding: 20px 20px 28px; z-index: 150;
      transition: transform 0.3s cubic-bezier(0.32,0.72,0,1); }

    .page--ocr .explain-panel.visible { transform: translateX(-50%) translateY(0); }

    .page--ocr .explain-head { display: flex; align-items: center; gap: 8px;
      font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary-dark);
      margin-bottom: 10px; }

    .page--ocr .explain-body { font-size: var(--fs-base); line-height: 1.8; color: var(--c-text);
      margin-bottom: 14px; min-height: 48px; }


    .page--ocr .math-num { font-size: 40px;
      font-weight: 700;
      font-family: 'Courier New', monospace;
      color: var(--c-text); }


    /* Footer bar */
    .page--ocr .ocr-footer { padding: 10px 0;
      margin-top: 16px; }


    @media (max-width: 480px) {
      .page--ocr .math-num { font-size: 26px !important; }
      .page--ocr .frac-num, .page--ocr .frac-den { font-size: 26px !important; }
      .page--ocr .math-op { font-size: 20px !important; }
      .page--ocr .math-board { padding: 16px 8px !important; gap: 6px !important; }
    }

  

/* ── Page: quiz ── */

    /* ── Mode tabs：§12.1 移除手動分頁，tabs 隱藏 ── */
    .page--quiz .mode-tabs { display: none !important; }


    /* ── §12.2 Module A 2×5 鍵盤 ── */
    .page--quiz .num-keyboard { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

    .page--quiz .sym-keyboard { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; }

    .page--quiz .num-key-row { display: flex; gap: 6px; justify-content: center; }

    .page--quiz .num-key { width: 56px; height: 56px;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Courier New', monospace; font-size: var(--fs-lg); font-weight: 700;
      background: var(--c-card); border: 3px solid var(--c-border);
      box-shadow: 3px 3px 0 var(--c-shadow); cursor: pointer; color: var(--c-text);
      user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
      touch-action: none;
      transition: transform .1s, box-shadow .1s; }

    
    .page--quiz .num-key.drag-active { opacity: 0.5; border-style: dashed; }


    /* ── Scrollable panel ── */
    .page--quiz .mode-panel { flex: 1; overflow-y: auto; padding: 16px 20px 120px; -webkit-overflow-scrolling: touch; }


    /* ── Batch mode ── */
    .page--quiz .section-label { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-sub); margin-bottom: 10px; }

    
    .page--quiz .total-row .input { width: 80px; text-align: center; font-size: var(--fs-lg); font-family: 'Courier New', monospace; }

    .page--quiz .q-list { display: flex; flex-direction: column; gap: 8px; }

    .page--quiz .q-row { display: grid; grid-template-columns: 28px 1fr 1fr;
      align-items: center; gap: 8px; padding: 10px 14px;
      background: var(--c-card); border: 2px solid var(--c-border); }

    .page--quiz .q-row:nth-child(even) { background: var(--c-sand); }

    .page--quiz .q-num { font-family: 'Courier New', monospace; font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary); }

    .page--quiz .q-col-label { font-size: var(--fs-xs); color: var(--c-text-hint); margin-bottom: 3px; display: block; }

    .page--quiz .q-row .input { font-size: var(--fs-base); height: 42px; box-shadow: none; }


    /* ── Sticky submit footer ── */
    .page--quiz .submit-footer { position: sticky; bottom: 0;
      background: linear-gradient(transparent 0%, var(--c-bg) 30%);
      padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); }


    /* ── Fill-in shared ── */
    .page--quiz .fill-question-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }

    .page--quiz .fill-q-counter { font-size:var(--fs-xs); color:var(--c-text-hint); font-weight:700; }

    .page--quiz .fill-question-display { font-family: 'Courier New', monospace; font-size: var(--quiz-font-size); font-weight: 700;
      color: var(--c-text); text-align: center; padding: 18px; letter-spacing: 0.08em;
      background: var(--c-cream); border: 3px solid var(--c-border); margin-bottom: 16px; }

    .page--quiz .fill-hint-bar { font-size:var(--fs-xs); color:var(--c-text-hint); text-align:center; margin-bottom:12px; }


    /* ── Fill-in A: answer slots ── */
    .page--quiz .digit-boxes { display: flex; align-items: flex-end; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }

    .page--quiz .slot-with-label { display: flex; flex-direction: column; align-items: center; gap: 3px; }

    .page--quiz .slot-label { font-size: var(--fs-base); font-weight: 700; color: var(--c-text-hint); letter-spacing: .02em; }

    .page--quiz .digit-box,
.page--quiz .answer-slot { width: 50px; height: 58px;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Courier New', monospace; font-size: var(--fs-xl); font-weight: 700;
      background: var(--c-cream); border: 3px dashed var(--c-border);
      color: var(--c-text); cursor: pointer; transition: border-color .15s, background .15s;
      user-select: none; }

    .page--quiz .digit-box.separator { width: 22px; background: transparent; border-color: transparent;
      font-size: var(--fs-md); cursor: default; color: var(--c-text-sub); height: 58px; }

    .page--quiz .digit-box.filled,
.page--quiz .answer-slot.filled { border-style: solid; border-color: var(--c-primary-dark); }

    .page--quiz .digit-box.eraser-mode { border-color: var(--c-teal-1); cursor: crosshair; }

    .page--quiz .digit-box.correct,
.page--quiz .answer-slot.correct { border-style: solid; border-color: var(--c-success); background: #E8F5E2; }

    .page--quiz .digit-box.wrong,
.page--quiz .answer-slot.wrong { border-style: solid; border-color: var(--c-error);   background: #FFECEC; }

    .page--quiz .digit-box.drag-over,
.page--quiz .answer-slot.drag-over { border-color: var(--c-primary); background: var(--c-warn-light); }


    /* ── Fill-in A: 0-9 digit key pool ── */
    .page--quiz .digit-pool-wrap { margin-bottom: 16px; }

    .page--quiz .digit-pool-label { font-size: var(--fs-xs); color: var(--c-text-hint); text-align: center; margin-bottom: 8px; font-weight: 700; }

    .page--quiz .digit-pool { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 10px 8px; background: var(--c-sand); border: 2px solid var(--c-border); }

    .page--quiz .digit-key { width: 44px; height: 50px;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Courier New', monospace; font-size: var(--fs-xl); font-weight: 700;
      background: var(--c-card); border: 3px solid var(--c-border);
      box-shadow: 3px 3px 0 var(--c-shadow); cursor: pointer; color: var(--c-text);
      user-select: none; transition: transform .1s, box-shadow .1s, border-color .15s; }

    
    

    /* ── Eraser area ── */
    .page--quiz .eraser-bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }

    .page--quiz .eraser-drop-zone { min-width: 90px; padding: 8px 14px; height: 38px;
      display: flex; align-items: center; justify-content: center; gap: 6px;
      font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-hint);
      background: var(--c-bg2); border: 3px dashed var(--c-border); cursor: default;
      transition: border-color .15s, background .15s; }

    .page--quiz .eraser-drop-zone.drag-over { border-color: var(--c-error); background: #FFECEC; color: var(--c-error); }

    .page--quiz .eraser-btn { padding: 8px 18px; min-height: 38px; font-family: inherit; font-size: var(--fs-base); font-weight: 700;
      background: var(--c-bg2); border: 2px solid var(--c-border);
      color: var(--c-text-sub); cursor: pointer; transition: background .15s; }

    .page--quiz .eraser-btn.active { background: var(--c-teal-3); border-color: var(--c-teal-1); color: var(--c-teal-1); }


    /* ── Fill-in B: answer slots ── */
    .page--quiz .answer-slots { display: flex; align-items: flex-end; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }

    
    .page--quiz .answer-slot.separator { width: 22px; background: transparent; border: none; font-size: var(--fs-md); color: var(--c-text-sub); cursor: default; height: 58px; }

    
    
    
    

    /* ── Fill-in B: per-blank option pools ── */
    .page--quiz .pool-section { margin-bottom: 14px; }

    .page--quiz .pool-section-label { font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-sub); margin-bottom: 6px; }

    .page--quiz .option-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 10px 8px; background: var(--c-sand); border: 2px solid var(--c-border); }

    .page--quiz .option-tile { min-width: 50px; height: 50px; padding: 0 8px;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Courier New', monospace; font-size: var(--fs-lg); font-weight: 700;
      background: var(--c-card); border: 3px solid var(--c-border);
      box-shadow: 3px 3px 0 var(--c-shadow); cursor: pointer; color: var(--c-text);
      transition: transform .1s, box-shadow .1s; user-select: none; }

    
    .page--quiz .option-tile.used { opacity: 0.2; pointer-events: none; cursor: default; }

    @keyframes tile-bounce { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
    .page--quiz .tile-bounce { animation: tile-bounce 300ms ease-in-out; }


    /* ── Inline result ── */
    .page--quiz .fill-result-inline { background: var(--c-card); border: 3px solid var(--c-border);
      padding: 16px; margin-top: 16px; text-align: center; }

    .page--quiz .fill-result-msg { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 6px; }

    .page--quiz .fill-result-ans { font-family:'Courier New',monospace; font-size:var(--fs-md); font-weight:700; color:var(--c-primary); margin-bottom: 8px; }

    .page--quiz .fill-result-hint { font-size: var(--fs-sm); color: var(--c-text-sub); line-height: 1.6; margin-bottom: 16px; }

    .page--quiz .fill-nav-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }



    /* ── 應用題 tap-to-check §11.3 ── */
    .page--quiz .tap-checkbox { display: inline-block; min-width: 24px; height: 24px;
      vertical-align: middle; cursor: pointer;
      text-align: center; line-height: 22px;
      border: 2px solid var(--c-border);
      background: var(--c-cream);
      font-size: var(--fs-base); font-weight: 700; user-select: none;
      border-radius: 2px; margin: 0 2px;
      transition: background .15s, border-color .15s; }

    .page--quiz .tap-checkbox.checked { background: var(--c-success); border-color: var(--c-success); color: #fff; }

    .page--quiz .tap-checkbox.disabled { cursor: default; }


    /* ── Shared result ── */
    .page--quiz .result-panel { flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 32px 24px; text-align: center; background: var(--c-bg); }

    .page--quiz .result-icon,
.page--quiz .practice-done-card .done-emoji { font-size: 72px; margin-bottom: 16px; display: block; }

    .page--quiz .result-title { font-size: var(--fs-xl); font-weight: 700; margin-bottom: 8px; }

    .page--quiz .result-correct-ans { font-family: 'Courier New', monospace; font-size: var(--fs-md); font-weight: 700;
      padding: 8px 18px; background: var(--c-cream); border: 2px solid var(--c-border);
      margin: 10px 0 16px; }

    .page--quiz .result-hint { font-size: var(--fs-sm); color: var(--c-text-sub); line-height: 1.7; margin-bottom: 24px; max-width: 280px; }


    /* ── Happy celebration ── */
    .page--quiz .happy-view { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; text-align:center; }

    .page--quiz .happy-banner { width:100%; max-width:300px; background:var(--c-warn-light); border:3px solid var(--c-gold-dark); box-shadow:4px 4px 0 var(--c-gold-dark); padding:14px; font-size:var(--fs-sm); font-weight:700; color:var(--c-text); margin-bottom:20px; font-family:'Press Start 2P',monospace; }

    .page--quiz .happy-mascot { font-size:72px; display:block; margin-bottom:14px; }

    .page--quiz .happy-title { font-size:var(--fs-xl); font-weight:700; color:var(--c-primary); margin-bottom:8px; }

    .page--quiz .happy-sub { font-size:var(--fs-base); color:var(--c-text-sub); line-height:1.7; margin-bottom:28px; }


    /* ── Practice mode（module_05 §10）── */
    .page--quiz #practiceOverlay { position: fixed; inset: 0; z-index: 100;
      background: var(--c-bg);
      display: flex; flex-direction: column; }

    .page--quiz .prac-header { height: 56px; min-height: 56px;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 16px;
      background: var(--c-card); border-bottom: 3px solid var(--c-border);
      flex-shrink: 0; }

    .page--quiz .prac-title { font-size: var(--fs-base); font-weight: 700; color: var(--c-text); white-space: nowrap; }

    /* 大一統進度條塞進 56px header：固定寬、不被壓縮；文字疊層沿用 .pixel-progress__text */
    .page--quiz .prac-progress { width: 110px; flex: 0 0 auto; }

    .page--quiz .prac-body { flex: 1; overflow-y: auto; padding: 20px 20px 100px;
      -webkit-overflow-scrolling: touch; }

    /* 答題卡 */
    .page--quiz .prac-qcard { background: var(--c-card); border: 3px solid var(--c-border);
      box-shadow: 4px 4px 0 var(--c-shadow); padding: 18px; margin-bottom: 16px; }

    .page--quiz .prac-qcard.correct-frame { border-color: var(--c-success); box-shadow: 4px 4px 0 var(--c-success); }

    /* 視覺改由 .pixel-badge--warn 提供（大一統）；此處只留版面間距 */
    .page--quiz .prac-qtag { margin-bottom: 10px; }

    .page--quiz .prac-qtext { font-size: var(--quiz-font-size); font-weight: 700; color: var(--c-text); line-height: 1.8;
      background: var(--c-cream); border: 3px solid var(--c-border); padding: 14px 16px; margin-bottom: 14px; }

    .page--quiz .prac-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

    .page--quiz .prac-option { padding: 12px 16px;
      background: var(--c-card); border: 3px solid var(--c-border);
      box-shadow: 3px 3px 0 var(--c-shadow);
      font-size: var(--fs-base); font-weight: 700; color: var(--c-text);
      cursor: pointer; transition: transform .1s, box-shadow .1s;
      text-align: left; user-select: none; }

    
    .page--quiz .prac-option.selected { border-color: var(--c-primary); background: var(--c-primary-light); }

    .page--quiz .prac-option.disabled { pointer-events: none; opacity: .55; }

    /* 答題後按鈕 */
    .page--quiz .prac-result-row { display: flex; gap: 8px; flex-direction: column;
      background: var(--c-card); border: 3px solid var(--c-border); padding: 14px; }

    .page--quiz .prac-result-msg { font-size: var(--fs-md); font-weight: 700; margin-bottom: 4px; }

    /* 完成卡 */
    .page--quiz .practice-done-card { flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 40px 24px; text-align: center; }

    
    .page--quiz .practice-done-card h2 { font-size: var(--fs-xl); font-weight: 700; color: var(--c-primary); margin-bottom: 8px; }

    .page--quiz .practice-done-card p { font-size: var(--fs-sm); color: var(--c-text-sub); line-height: 1.7; margin-bottom: 24px; }


    /* ── §12.3 Module B 嵌入型填空 ── */
    .page--quiz .inline-question-wrap { font-size: var(--quiz-font-size); font-weight: 700; color: var(--c-text);
      line-height: 2.4; background: var(--c-cream); border: 3px solid var(--c-border);
      padding: 14px 16px; margin-bottom: 14px; }

    .page--quiz .inline-slot { display: inline-block; min-width: 52px; height: 34px;
      vertical-align: middle; cursor: pointer;
      border-bottom: 3px solid var(--c-border); background: transparent;
      text-align: center; font-family: 'Courier New', monospace;
      font-size: var(--fs-lg); font-weight: 700;
      color: var(--c-primary-dark); padding: 0 4px; margin: 0 3px;
      transition: border-color .15s, background .15s; }

    .page--quiz .inline-slot.filled { border-color: var(--c-primary-dark); background: var(--c-warn-light); }

    .page--quiz .inline-slot.correct { border-color: var(--c-success); background: #E8F5E2; }

    .page--quiz .inline-slot.wrong { border-color: var(--c-error);   background: #FFECEC; }

    .page--quiz .inline-options-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
      padding: 12px 8px; background: var(--c-sand); border: 2px solid var(--c-border);
      margin-bottom: 16px; }

    .page--quiz .inline-option-tile { min-width: 60px; height: 52px; padding: 0 12px;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Courier New', monospace; font-size: var(--fs-lg); font-weight: 700;
      background: var(--c-card); border: 3px solid var(--c-border);
      box-shadow: 3px 3px 0 var(--c-shadow); cursor: pointer; color: var(--c-text);
      transition: all .15s; user-select: none;
      -webkit-user-select: none; -webkit-touch-callout: none; }

    
    .page--quiz .inline-option-tile.used { opacity: 0.32; filter: grayscale(1); cursor: default; pointer-events: none; box-shadow: none; }


    /* Fraction formatting vertical layout */
    .page--quiz .fraction { display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      padding: 0 4px;
      line-height: 1.1; }

    .page--quiz .numerator { border-bottom: 2px solid currentColor;
      padding-bottom: 2px; }

    .page--quiz .denominator { padding-top: 2px; }

  

/* ── Page: exam ── */

  .page--exam .page { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; background:var(--c-bg); }


  .page--exam .ex-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 14px 28px; }


  /* ── Setup ── */
  .page--exam .ex-section-label { font-size:11px; font-weight:700; color:var(--c-text-sub);
    text-transform:uppercase; letter-spacing:.05em; margin:0 0 10px;
    display:flex; align-items:center; gap:6px; }

  .page--exam .ex-section-label::after { content:''; flex:1; height:2px; background:var(--c-border); }

  .page--exam .unit-list,
.page--exam .choice-list { display:flex; flex-direction:column; gap:10px; }

/* ═══ 11. Unit Selector Components (單元選擇器大一統) ═══ */

  /* 💡 舊的 .unit-card 邊框陰影外皮已全數超渡！ */

  /* 🚀 狀態同化：未解鎖單元卡片變灰、不准點擊（與大一統卡片完美融合） */
  .pixel-card.is-disabled { opacity:.5; cursor:not-allowed; box-shadow:none !important; filter:grayscale(.5); }
  .pixel-card.is-disabled:active { transform:none !important; }

  /* 🚀 裝飾標籤：pending 等待中狀態（拔除小學生的圓角，改回硬派像素方角 radius: 0） */
  .page--exam .unit-pending { font-size:10px; color:#fff; background:var(--c-text-hint); padding:1px 6px; border-radius:0px !important; }

  /* 🚀 內部元件：單元標題與目標敘述文字排版 */
  .pixel-card__title { font-size:14px; font-weight:700; color:var(--c-text); margin-bottom:5px; }
  .page--exam .unit-card-goal { font-size:11px; color:var(--c-text-sub); line-height:1.5; }

  /* 🚀 空狀態：查無單元時的提示 */
  .page--exam .ex-empty { text-align:center; padding:36px 20px; color:var(--c-text-hint); font-size:11px; }

  /* ── Loading ── */
  .page--exam .ex-loading { text-align:center; padding:50px 20px; color:var(--c-text-sub); font-size:12px; }

  .page--exam .ex-loading .spin { width:28px; height:28px; margin:0 auto 14px;
    border:3px solid var(--c-border); border-top-color:var(--c-gold);
    border-radius:50%; animation:spin .8s linear infinite; }

  @keyframes spin { to { transform:rotate(360deg); } }

  /* choice */
  
  .page--exam .choice-opt { display:flex; align-items:center; gap:10px; padding:12px 14px;
    background:var(--c-bg); border:2px solid var(--c-border); cursor:pointer;
    min-height:48px; transition:background .12s, border-color .12s; }

  .page--exam .choice-opt:active { background:var(--c-warn-light); }

  .page--exam .choice-opt.selected { border-color:var(--c-primary-dark); background:var(--c-warn-light); }

  .page--exam .choice-opt.correct,
.page--exam .result-bar.ok { border-color:var(--c-success); background:#E8F5E2; }

  .page--exam .choice-opt.wrong,
.page--exam .result-bar.no { border-color:var(--c-error);   background:#FFECEC; }

  .page--exam .choice-mark { width:22px; height:22px; flex-shrink:0; border:2px solid var(--c-border);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; }

  .page--exam .choice-opt.selected .choice-mark { background:var(--c-primary-dark); color:#fff; border-color:var(--c-primary-dark); }


  /* fill slots (A & B share) */
  .page--exam .fill-slots { display:flex; align-items:flex-end; justify-content:center; gap:6px;
    flex-wrap:wrap; margin:8px 0 18px; }

  .page--exam .fill-slot { min-width:48px; height:56px; padding:0 8px; border:2px dashed var(--c-border);
    background:var(--c-bg); display:flex; align-items:center; justify-content:center;
    font-size:20px; font-weight:700; color:var(--c-text); cursor:pointer; }

  .page--exam .fill-slot.active { border-style:solid; border-color:var(--c-primary); background:var(--c-warn-light); }

  .page--exam .fill-slot.filled { border-style:solid; border-color:var(--c-primary-dark); }

  .page--exam .fill-slot.correct { border-style:solid; border-color:var(--c-success); background:#E8F5E2; }

  .page--exam .fill-slot.wrong { border-style:solid; border-color:var(--c-error);   background:#FFECEC; }

  .page--exam .fill-slot.drag-over { border-style:solid; border-color:var(--c-primary);
    background:var(--c-warn-light); transform:scale(1.06); }


  /* 拖曳：數字鍵 / 選項池 chip 為拖曳來源，禁用捲動與長按選單（§12.2.5） */
  .page--exam .key, .page--exam .pool-chip { touch-action:none; user-select:none; -webkit-user-select:none;
    -webkit-touch-callout:none; }

  .page--exam .fill-slot { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }

  .page--exam .drag-ghost { position:fixed; z-index:9999; opacity:.9; pointer-events:none;
    box-shadow:3px 3px 0 var(--c-shadow); }


  .page--exam .hint-bar { text-align:center; font-size:10px; color:var(--c-text-hint); margin-bottom:10px; }


  /* keypad (fill_in_a) */
  .page--exam .keypad { display:flex; flex-direction:column; gap:8px; align-items:center; }

  .page--exam .keypad-row,
.page--ocr .ix-ocr-30 { display:flex; gap:8px; }

  .page--exam .key { width:54px; height:46px; font-size:18px; font-weight:700; color:var(--c-text);
    background:var(--c-card); border:2px solid var(--c-border);
    box-shadow:2px 2px 0 var(--c-shadow); cursor:pointer; }

  .page--exam .key:active,
.page--exam .pool-chip:active,
.page--exam .gp-btn:active { transform:translate(2px,2px); box-shadow:none; }

  .page--exam .key.wide { width:116px; font-size:14px; }


  /* option pool (fill_in_b) */
  .page--exam .pool { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:6px; }

  .page--exam .pool-chip { padding:10px 16px; font-size:16px; font-weight:700; color:var(--c-text);
    background:var(--c-card); border:2px solid var(--c-border);
    box-shadow:2px 2px 0 var(--c-shadow); cursor:pointer; }

  
  .page--exam .pool-chip.used { opacity:.35; pointer-events:none; }

  .page--exam .pool-label { text-align:center; font-size:10px; color:var(--c-text-hint); margin-bottom:6px; }


  /* result / explanation */
  .page--exam .result-bar { margin-top:16px; padding:12px 14px; border:2px solid; }

  
  
  .page--exam .result-title { font-size:13px; font-weight:700; margin-bottom:8px; }

  .page--exam .result-bar.ok .result-title { color:var(--c-success); }

  .page--exam .result-bar.no .result-title { color:var(--c-error); }

  .page--exam .expl-step { display:flex; gap:8px; font-size:12px; color:var(--c-text); line-height:1.7;
    margin-bottom:6px; }

  .page--exam .expl-step .n { flex-shrink:0; width:18px; height:18px; border-radius:50%;
    background:var(--c-gold); color:var(--c-text); font-size:10px; font-weight:700;
    display:flex; align-items:center; justify-content:center; }


  /* §20 動態講解播放器 */
  .page--exam .gp-subtitle { font-size:13px; line-height:1.8; color:var(--c-text); background:var(--c-bg);
    border:2px solid var(--c-border); padding:8px 10px; min-height:40px; }

  .page--exam .gp-subtitle .gp-kw { color:var(--c-primary-dark); border-bottom:2px solid var(--c-gold); padding-bottom:1px; }

  /* 控制列置底固定：捲動講解時按鈕始終可見（sticky 於 .ex-body 捲動區底部） */
  .page--exam .gp-ctrl { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    position:sticky; bottom:0; z-index:6; margin-top:8px; padding:8px 4px;
    background:var(--c-card); border-top:2px solid var(--c-border); }

  .page--exam .gp-btn { font-size:11px; font-weight:700; padding:6px 10px; border:2px solid var(--c-border);
    background:var(--c-card); box-shadow:2px 2px 0 var(--c-shadow); cursor:pointer; }


  .page--exam .gp-btn:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }

  .page--exam .gp-counter,
.page--exam .score-sub { font-size:11px; color:var(--c-text-sub); }

  /* 解析標頭：標題 + 控制列同一排 */
  .page--exam .result-header-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .page--exam .result-header-row .result-title { margin-bottom:0; }
  .page--exam .gp-ctrl-host.hidden { display:none; }
  /* 控制列掛在 header-row 時：去掉 sticky 與卡片底色，吃後方背景，強制在單排顯示 */
  .page--exam .gp-ctrl-host .gp-ctrl {
    position:static !important;
    margin-top:0 !important;
    padding:0 !important;
    background:transparent !important;
    border-top:none !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:4px !important;
  }
  .page--exam .gp-ctrl-host .gp-btn {
    background:var(--c-card) !important;
    box-shadow:2px 2px 0 var(--c-shadow) !important;
    border:2px solid var(--c-border) !important;
    padding:4px 8px !important;
    margin:0 !important;
    font-size:11px !important;
    white-space:nowrap !important;
    border-radius:4px;
    cursor:pointer;
  }
  .page--exam .gp-ctrl-host .gp-btn:disabled {
    background:var(--c-card) !important;
    box-shadow:none !important;
    border:2px solid var(--c-border) !important;
    opacity:0.4 !important;
    cursor:not-allowed;
  }
  .page--exam .gp-ctrl-host .gp-counter {
    margin:0 4px !important;
    font-size:11px !important;
    white-space:nowrap !important;
  }


  .page--exam .btn-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }

  .page--exam .btn-row .btn { flex:1; min-width:120px; }


  /* result screen */
  .page--exam .score-card { text-align:center; padding:28px 20px; background:var(--c-card);
    border:3px solid var(--c-border); box-shadow:4px 4px 0 var(--c-shadow); margin-bottom:18px; }

  .page--exam .score-stars { font-size:34px; letter-spacing:6px; margin-bottom:10px; }

  .page--exam .score-big { font-size:28px; font-weight:700; color:var(--c-text); margin-bottom:4px; }

  

  .page--exam .hidden { display:none !important; }

  
  /* Confetti particle falling animation */
  @keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(105vh) rotate(720deg); }
  }
  .page--exam .confetti-piece { position: fixed;
    top: -10px;
    width: 10px;
    height: 10px;
    z-index: 9999;
    pointer-events: none;
    border-radius: 2px; }

  

/* ════ 各頁殘留 inline → page-scoped class（隔離，2026-06-17）════ */
/* avatar-studio */
.page--avatar-studio .ix-avatar-studio-1,
.page--avatar-studio .ix-avatar-studio-5 { grid-column:1/-1;text-align:center;padding:20px;font-size:var(--fs-sm);color:var(--c-text-hint); }

.page--avatar-studio .ix-avatar-studio-2 { grid-column:1/-1;text-align:center;padding:20px;color:var(--c-error); }

.page--avatar-studio .ix-avatar-studio-3 { display:flex;align-items:center;justify-content:center;opacity:.3; }

.page--avatar-studio .ix-avatar-studio-4 { position:static;width:48px;height:72px; }


/* arcade */
.page--arcade .ix-arcade-1 { margin-bottom: 16px; background: var(--c-card); border: 3px solid var(--c-border); padding: 12px; box-shadow: 4px 4px 0 var(--c-shadow); }

.page--arcade .ix-arcade-2 { font-size: 11px; font-weight: 700; color: var(--c-text); display: block; margin-bottom: 6px; }

.page--arcade .ix-arcade-3 { width: 100%; height: 40px; font-size: 12px; }

.page--arcade .ix-arcade-4 { image-rendering:pixelated;shape-rendering:crispEdges; }



/* report */
.page--report .ix-report-1 { width:36px; }

.page--report .ix-report-2 { padding-top:20px; padding-bottom:20px; }

.page--report .ix-report-4 { padding:14px 16px; display:flex; align-items:center; gap:12px; }

.page--report .ix-report-5 { font-size:28px; }

.page--report .ix-report-6 { font-size:var(--fs-sm); font-weight:700; color:var(--c-success); }

.page--report .ix-report-7 { font-size:var(--fs-xs); color:var(--c-text-sub); margin-top:2px; }

.page--report .ix-report-8 { padding:14px 16px; background: var(--c-card); border: 3px solid #2D1F0E; box-shadow: 4px 4px 0 #C49A70; display: none; }

.page--report .ix-report-9 { font-size:var(--fs-sm); font-weight:700; color:#dd6b20; display:flex; align-items:center; gap:6px; margin-bottom:8px; }

.page--report .ix-report-10 { font-size:var(--fs-xs); color:var(--c-text); line-height:1.5; }

.page--report .ix-report-12 { display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }


.page--report .ix-report-14,
.page--socratic .ix-socratic-6 { display:flex; flex-direction:column; gap:8px; }

/* socratic */
.page--socratic .ix-socratic-1 { font-weight: bold; font-size: var(--fs-base); }

.page--socratic .ix-socratic-2 { margin-right: 2px; }

.page--socratic .ix-socratic-3 { font-size:36px; margin-bottom:8px; }

.page--socratic .ix-socratic-4 { font-size:var(--fs-md); font-weight:700; color:var(--c-primary-dark); margin-bottom:8px; line-height:1.5; }

.page--socratic .ix-socratic-5 { font-size:var(--fs-sm); color:var(--c-text-sub); line-height:1.7; margin-bottom:14px; }


.page--socratic .ix-socratic-7,
.page--socratic .ix-socratic-8 { width:34px;height:34px;font-size:18px;align-self:flex-end; }


.page--socratic .ix-socratic-9 { padding:12px 16px; }

.page--socratic .ix-socratic-10 { width:100%; }



.page--socratic .ix-socratic-13 { font-size:10px; font-weight:normal; }

/* ocr */
.page--ocr .ix-ocr-1 { width: 100%; display: flex; flex-direction: column; align-items: center; }

.page--ocr .ix-ocr-2 { font-size:var(--fs-sm); font-weight:700; color:#5c3a21; line-height: 1.6; }

.page--ocr .ix-ocr-3 { font-size:var(--fs-xs); font-weight:500; color:#8a6446; }

.page--ocr .ix-ocr-4,
.page--ocr .ix-ocr-5 { display:none; }


.page--ocr .ix-ocr-6 { width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 10px; }

.page--ocr .ix-ocr-7 { width: 100%; height: 100%; object-fit: contain; background: #fdfbf0; }

.page--ocr .ix-ocr-8 { position: absolute; top: 8px; right: 8px; background: #ba3c2a; border: 2px solid #5c3a21; box-shadow: 2px 2px 0px #5c3a21; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; cursor: pointer; border-radius: 4px; z-index: 20; }

.page--ocr .ix-ocr-9 { width: 85%; margin-bottom: 25px; transform: translateY(15px); }

.page--ocr .ix-ocr-10 { width: 100%; background: none; border: none; padding: 0; display: block; }

.page--ocr .ix-ocr-11 { position: relative; width: 100%; cursor: pointer; }

.page--ocr .ix-ocr-12 { width: 100%; height: 55px; object-fit: fill; display: block; image-rendering: pixelated; }

.page--ocr .ix-ocr-13 { right: auto; left: 50%; top: 48%; transform: translate(-50%, -50%); text-align: center; font-size: 20px; color: #5c3a21; text-shadow: 1px 1px 0px #ffffff, -1px -1px 0px #ffffff, 1px -1px 0px #ffffff, -1px 1px 0px #ffffff; padding-bottom: 2px; white-space: nowrap; }

.page--ocr .ix-ocr-14 { margin-top: 10px; margin-bottom: 10px; width: 100%; display: flex; justify-content: center; }

.page--ocr .ix-ocr-15 { position: relative; padding-left: 30px; text-align: left; }

.page--ocr .ix-ocr-16 { position: absolute; left: 0; top: 2px; font-size: var(--fs-xs); }

.page--ocr .ix-ocr-17 { font-size: var(--fs-xs); color: #000000; font-weight: 700; line-height: 1.5; margin: 0; }

.page--ocr .ix-ocr-18 { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-height:420px; padding-top: 150px; gap:20px; box-sizing:border-box; }

.page--ocr .ix-ocr-19 { text-align:center; }

.page--ocr .ix-ocr-20 { font-size:var(--fs-md); font-weight:700; color:var(--c-text); margin-bottom:6px; }

.page--ocr .ix-ocr-21 { font-size:var(--fs-sm); color:var(--c-text-sub); line-height:1.7; }

.page--ocr .ix-ocr-22 { margin-bottom:14px; }

.page--ocr .ix-ocr-23 { width:100%;text-align:left;font-size:var(--fs-sm);line-height:1.8;color:var(--c-text);padding:4px 0; }

.page--ocr .ix-ocr-24 { width: 100%; display: flex; justify-content: center; align-items: center; }

.page--ocr .ix-ocr-25 { display: flex; flex-direction: column; align-items: center; gap: 2px; }

.page--ocr .ix-ocr-26 { text-align: left; font-size: var(--fs-md); font-weight: bold; color: var(--c-primary); padding: 10px 0; width: 100%; }

.page--ocr .ix-ocr-27 { font-size: var(--fs-xs); color: var(--c-text-light); text-align: left; margin-bottom: 10px; width: 100%; }

.page--ocr .ix-ocr-28 { width: 100%; }

.page--ocr .ix-ocr-29 { width: 100%; margin-top: 10px; }

/* 最上方（舊世界暫存技術債，等待被你逐頁摧毀）
  │
  ▼
【進入全站大一統疆域】
  │
  ├─ 1. 原子化工具類
  │     (原因：它的權重最低、最抽象，要先寫在前面當作地基)
  │
  ├─ 2. 通用功能按鈕（.pixel-btn 家族）
  │
  ├─ 3. 通用狀態標籤與進度條（.pixel-badge / .pixel-progress 家族）
  │
  ├─ 4. 通用輸入框與表單元件（.pixel-select / .pixel-textarea 家族）
  │     (原因：表單裡面有 focus 狀態與特殊的偽元素定位，要放後面)
  │
  ▼

檔案最底部（最高主權，絕對不會被任何人蓋掉） */
  /* ════════════════════════════════════════════════════════════════════════
   全站大一統：通用像素原子化佈局工具（Pixel Utilities & Atomic Layouts）
   情境：跨頁面通用之基礎排版、間距與彈性盒（Flex）積木，嚴禁包含特定頁面類名。
   ════════════════════════════════════════════════════════════════════════ */

   .hidden { display: none !important; }

   /* 🧱 彈性盒佈局（Flexbox）基本積木 */
   .flex { display: flex; } 
   .flex-col { display: flex; flex-direction: column; } 
   .flex-1 { flex: 1; }
   .items-center { align-items: center; } 
   .justify-center { justify-content: center; } 
   .justify-between { justify-content: space-between; }
   
   /* 🧱 像素網格呼吸間距（Gap） */
   .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
   
   /* 🧱 頂部外距推開（Margin Top） */
   .mt-8  { margin-top:  8px; } .mt-10 { margin-top:  10px; } .mt-12 { margin-top:  12px; } .mt-16 { margin-top:  16px; } .mt-20 { margin-top:  20px; }
   
   /* 🧱 底部外距推開（Margin Bottom） */
   .mb-8  { margin-bottom: 8px; } .mb-10 { margin-bottom: 10px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; }
   
   /* 🧱 文字與排版控制 */
   .text-center { text-align: center; } .text-right { text-align: right; }
   .bold { font-weight: 700; }
   
   /* 🧱 語意化文字顏色晶片 */
   .text-sub  { color: var(--c-text-sub); }  
   .text-hint { color: var(--c-text-hint); }
   .text-on   { color: var(--c-text-on); }   
   .text-primary { color: var(--c-primary); }
   .text-success { color: var(--c-success); } 
   .text-danger { color: var(--c-danger); }
   
   /* 🧱 像素階梯字體級別（Font Sizes） */
   .text-sm { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); }
   .text-lg { font-size: var(--fs-lg); } .text-xl { font-size: var(--fs-xl); }
   
   /* 🧱 寬度防線 */
   .w-full { width: 100%; }

/* ════════════════════════════════════════════════════════════════════════
   全站大一統：通用像素功能按鈕（Pixel Buttons Complete Edition）
   ════════════════════════════════════════════════════════════════════════ */

/* 🧱 1. 核心骨架（通用基礎設定） */
.pixel-btn {
  font-family: 'BpmfZihiSans', -apple-system, sans-serif;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%; /* 預設撐滿容器，方便表單排版 */
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  border-radius: 0px !important; /* 絕對像素風，誓死捍衛方角 */
  border: 3px solid #2D1F0E !important; /* 標準像素焦糖深色外框 */
  transition: transform 60ms, box-shadow 60ms;
  outline: none;
}
.flex-wrap { flex-wrap: wrap; }
.px-16 { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
.h-full { height: 100%; }
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.whitespace-nowrap { white-space: nowrap; }
.flex-shrink-0 { flex-shrink: 0; }

/* 🧱 2. 核心物理點擊手感（通用：按下去往右下沉 3px，厚度消失） */
.pixel-btn:active {
  transform: translate(3px, 3px) !important;
  box-shadow: none !important;
}

.pixel-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* 🧱 3. 尺寸晶片（Size Modifiers） */
.pixel-btn--lg { min-height: 52px; padding: 12px 24px; font-size: var(--fs-lg); }  /* 🚀 主力大按鈕（題目、交卷） */
.pixel-btn--md { min-height: 42px; padding: 8px 18px;  font-size: var(--fs-base); }/* 🚀 一般功能（返回、重測） */
.pixel-btn--sm { min-height: 32px; padding: 4px 12px;  font-size: var(--fs-xs); }  /* 🚀 工具列小按鈕（聲音、登出） */
.pixel-btn--auto {
  width: auto !important;
  flex-shrink: 0 !important;       /* 🚀 核心防線：誓死捍衛主權，絕對不准被 Flex 排版擠壓變扁！ */
  min-width: 76px !important;       /* 🚀 基礎底線：給按鈕一個合理的最小寬度（約2~3個字），確保不撞牆 */
  padding: 20px 14px !important;       /* 🚀 左右留白：讓文字左右有舒適的呼吸空間 */
}                                    /* 🚀 寬度自適應（不撐滿） */

/* 🧱 4. 戰隊顏色晶片（Theme Modifiers） */
/* 【 🟢 草綠：正向主力 】 ➡️ 我要回答！我要挑戰！(核心確認) */
.pixel-btn--green  { background: var(--c-primary) !important; box-shadow: 3px 3px 0 var(--c-primary-dark) !important; color: var(--c-text-on) !important; } 

/* 【 🔵 湖水藍：安全延續 】➡️ 繼續下一題、再試一次 (無痛引導) */
.pixel-btn--teal   { background: var(--c-teal-3) !important;  box-shadow: 3px 3px 0 var(--c-teal-1) !important;       color: var(--c-text-on) !important; } 

/* 【 🟠 橘紅：危險結算 】 ➡️ 我要交卷了！我要登出了！(踩剎車) */
.pixel-btn--orange { background: var(--c-danger) !important;  box-shadow: 3px 3px 0 var(--c-danger-dark) !important;  color: var(--c-text-on) !important; } 

/* 【 🟡 --yellow 】  修改設定、金幣獎勵、查看成就（特權改動） */
.pixel-btn--yellow { background: var(--c-gold) !important;    box-shadow: 3px 3px 0 var(--c-gold-dark) !important;    color: var(--c-text) !important; }

/* 【 ⚪ 奶油白：低調後退 】➡️ 我想取消、我想返回 (安全撤退)   */
.pixel-btn--cream  { background: var(--c-card) !important;    box-shadow: 3px 3px 0 var(--c-shadow) !important;       color: var(--c-text) !important; }

/* 【 🟤 --brown 】   回到地圖、打開背包、遊戲選單（復古工具） */
.pixel-btn--brown  { background: #8B5E3C !important;          box-shadow: 3px 3px 0 #5A3A1A !important;               color: var(--c-text-on) !important; }

/* ════════════════════════════════════════════════════════════════════════
   全站大一統：通用按鈕排版底板（Button Layout Containers）
   ════════════════════════════════════════════════════════════════════════ */

/* 🚀 1. 雙顆/多顆按鈕「橫向並排」底板 */
.pixel-btn-group-row {
  display: flex !important;
  gap: 8px !important;              /* 鎖死全站按鈕之間的像素呼吸間距 */
  width: 100% !important;
  margin-top: 16px !important;       /* 鎖死與上方題目面板的推開距離 */
  box-sizing: border-box !important;
}

/* 鎖定這個底板裡面的所有像素按鈕，自動、完美地平分寬度 */
.pixel-btn-group-row > .pixel-btn {
  flex: 1 !important;
  min-width: 0 !important;          /* 防骨折核心：允許按鈕在極窄螢幕下安全縮小 */
}

/* 🚀 2. 單顆按鈕「上下單行」專用推開底板（選用，讓單顆按鈕也標準化） */
.pixel-btn-group-single {
  width: 100% !important;
  margin-top: 16px !important;       /* 鎖死單顆按鈕與上方的距離 */
}

/* ════════════════════════════════════════════════════════════════════════
   全站大一統：通用像素卡片與面板（Pixel Cards & Panels Complete Edition）
   ════════════════════════════════════════════════════════════════════════ */

/* 🧱 1. 核心骨架（通用基礎設定）：預設近白 parchment、扎實黑邊、像素立體影 */
.pixel-card {
  background: var(--c-card) !important;
  border: 3px solid var(--c-border) !important;
  box-shadow: 4px 4px 0 var(--c-shadow) !important;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 0px !important; /* 誓死捍衛像素方角 */
  position: relative;
}

/* 🧱 2. 可點擊晶片（Tappable Modifier）：點擊時有物理下沉感，取代舊的 .card-tap / .rpg-card */
.pixel-card--tappable {
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease;
  text-decoration: none;
  color: var(--c-text);
}
.pixel-card--tappable:active {
  transform: translate(4px, 4px) !important;
  box-shadow: none !important;
}

/* 🧱 3. 戰隊底色與狀態晶片（Theme Modifiers） */
.pixel-card--sand    { background: var(--c-sand) !important; } /* 🚀 溫柔沙灘奶油底 */
.pixel-card--green   { background: var(--c-success-light) !important; border-color: var(--c-primary-dark) !important; box-shadow: 4px 4px 0 var(--c-primary-dark) !important; } /* 🚀 成功/草綠面板 */
.pixel-card--orange  { background: var(--c-danger-light) !important;  border-color: var(--c-danger-dark) !important;  box-shadow: 4px 4px 0 var(--c-danger-dark) !important;  } /* 🚀 警告/橘紅面板 */
.pixel-card--yellow  { background: var(--c-warn-light) !important;    border-color: var(--c-gold-dark) !important;    box-shadow: 4px 4px 0 var(--c-gold-dark) !important;    } /* 🚀 慶祝/金黃面板 */
.pixel-card--teal    { background: var(--c-accent) !important;        border-color: var(--c-teal-1) !important;       box-shadow: 4px 4px 0 var(--c-teal-1) !important;       } /* 🚀 提示/水藍面板 */

/* 🧱 4. 緊湊尺寸晶片（配合原本部分小卡片，降低內距） */
.pixel-card--compact { padding: 12px 14px; }

/* ════════════════════════════════════════════════════════════════════════
   全站大一統：通用像素狀態標籤（Pixel Badges & Chips）
   ════════════════════════════════════════════════════════════════════════ */

/* 基礎底板：預設為中性的灰字黑框，具備基本的文字呼吸空間 */
.pixel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  font-size: var(--fs-base, 14px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  background: var(--c-card, #FDFBF0);
  border: 2px solid var(--c-border, #1A1008);
  color: var(--c-text-sub, #7A6040);
  border-radius: 0px !important; /* 🪓 鐵血防線：全站標籤絕對不准有圓角！ */
}

/* 🧪 語意化修飾符 (Modifiers)：根據狀態一秒變色 */

/* 1. 灰色 / 準備中 / 鎖定 / 提示 (Hint) */
.pixel-badge--hint {
  background: var(--c-text-hint, #908070);
  color: #ffffff;
  border-color: var(--c-border, #1A1008);
}

/* 2. 綠色 / 成功 / 已完成 / 已裝備 (Success) */
.pixel-badge--success {
  background: #E8F5E2;
  color: var(--c-success, #408030);
  border-color: var(--c-success, #408030);
}

/* 3. 橘紅色 / 警告 / 核心目標 / 倒數 (Warning / Attention) */
.pixel-badge--warn {
  background: var(--c-orange, #FF9040);
  color: var(--c-border, #1A1008);
}

/* 4. 紅色 / 錯誤 / 未通過 (Danger) */
.pixel-badge--danger {
  background: #FFECEC;
  color: var(--c-error, #D03030);
  border-color: var(--c-error, #D03030);
}

/* ════════════════════════════════════════════════════════════════════════
   全站大一統：通用像素輸入框與表單元件（Pixel Select & Form Controls）
   ════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   群組基礎皮膚：三劍客共用底板（parchment 奶油底 + 焦糖硬框 + 方角）
   鐵血 Reset：徹底洗掉 iOS Safari / Firefox 的原生外皮、內凹陰影與圓角高光
   ────────────────────────────────────────────────────────────────────── */

.pixel-textarea,
.pixel-select {
  font-family: 'BpmfZihiSans', 'Courier New', monospace;
  font-weight: 700;
  font-size: var(--fs-base, 14px);
  background: var(--c-cream, #F5F0E1) !important;   /* parchment 奶油底 */
  color: var(--c-text, #2A1F0E) !important;          /* 深焦糖文字 */
  border: 3px solid var(--c-border, #2D1F0E) !important; /* 焦糖深色硬框 */
  border-radius: 0px !important;                     /* 🪓 誓死方角，絕不准圓角 */
  padding: 8px 12px;
  box-sizing: border-box;
  outline: none;
  /* 核心相容性防線：消除原生外皮（iOS 內凹陰影 / 預設箭頭 / 圓角） */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  transition: border-color 100ms;
}

/* B. 多行對話框：滿寬、禁止手動拉伸、合理最小高度 */
.pixel-textarea {
  width: 100%;
  resize: none;
  min-height: 80px;
}

/* C. 下拉選單本體：滿寬 48px、右側預留 36px 呼吸空間避免文字撞到 ▼ */
.pixel-select {
  width: 100% !important;
  height: 48px !important;
  padding: 8px 36px 8px 12px !important;
  cursor: pointer;
}

/* C-1. 下拉外層包裹容器：作為 ▼ 偽元素的絕對定位錨點 */
.pixel-select-wrapper {
  position: relative !important;   /* ← ::after 的定位參考；缺此則箭頭會跑位 */
  display: inline-block !important;
  width: 100% !important;
}

/* C-2. 核心魔法：用 ::after 釘上純文字 ▼ 復古箭頭，點擊穿透給底層 select */
.pixel-select-wrapper::after {
  content: "▼" !important;
  font-family: Arial, sans-serif !important; /* 標準無襯線，確保三角形各機型不變形 */
  font-size: 12px !important;
  color: var(--c-text, #2A1F0E) !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;  /* ← 點到 ▼ 直接穿透觸發底層 select */
  z-index: 2 !important;
}

/* 聚焦反饋：邊框切換主力草綠、拔除瀏覽器預設藍色外框 */
.pixel-textarea:focus,
.pixel-select:focus {
  border-color: var(--c-primary, #408030) !important;
  outline: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   全站大一統：通用像素進度條（Pixel Progress Bars）
   ════════════════════════════════════════════════════════════════════════ */

   .pixel-progress {
    height: 14px; /* 💡 微調至 14px，符合原設計比例 */
    background: var(--c-sand, #E8D8A0) !important;
    border: 2px solid var(--c-border, #1A1008) !important;
    border-radius: 0px !important; /* 拔除圓角 */
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
  }
  
  .pixel-progress__fill {
    height: 100%;
    background: var(--c-success, #408030) !important; /* 預設綠色進度 */
    border-radius: 0px !important;
    transition: width 600ms ease-out;
  }
  
  /* 顏色擴充晶片 */
  .pixel-progress__fill--orange { background: var(--c-orange, #FF9040) !important; }
  
  /* 💡 補強：進度條文字排版（方便直接在進度條上重疊顯示 "80%" 或 "4/5"） */
  .pixel-progress__text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--c-text, #2A1F0E);
    z-index: 2;
    pointer-events: none;
  }


  
/* ── 底部導覽列外觀 ── */
#nav-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px; /* 根據圖中比例微調高度 */
    background-color: #FBF7ED; /* 貼近圖中的米白底色 */
    border-top: 4px solid #4A3C31; /* 像素風的粗深色上邊框 */
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    z-index: 999;
}

/* 每一個導覽按鈕的基礎樣式 */
.rpg-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #8C7662; /* 未選中時的深咖啡/灰文字顏色 */
    font-size: 14px;
    font-weight: bold;
    width: 25%;
    height: 100%;
    transition: all 0.2s ease;
    position: relative;
}

/* 圖標大小調整 */
.rpg-nav-item img, 
.rpg-nav-item .nav-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 4px;
}

/* ── Active 選中狀態（重點！） ── */

/* 1. 選中時的文字顏色變綠色 */
.rpg-nav-item.active {
    color: #2D8A4E; /* 圖中類似這種復古綠色 */
    border-bottom: 5px solid #2D8A4E; /* 直接用粗邊框當綠色橫線，這樣絕對置中 */
    padding-bottom: 2px; /* 讓文字和綠色橫線之間有一點點呼吸空間 */
}

/* 2. 舊的 ::after 機制會導致偏移，我們直接把它清除掉 */
.rpg-nav-item.active::after {
    display: none !important;
}