/* 星圖數學 — 畫面樣式（依「星圖數學 主迴圈設計.dc.html」實作） */

/* App 外框：手機全屏；桌機置中 430px */
html, body { height: 100%; }
body { overscroll-behavior: none; }
#app {
  position: relative; margin: 0 auto;
  width: 100%; max-width: 430px; height: 100dvh; min-height: 560px;
  overflow: hidden; background-color: var(--night-800);
}
@media (min-width: 480px) {
  body { background: #0D0F14; }
  #app { height: min(100dvh, 920px); margin-top: max(0px, calc((100dvh - 920px) / 2));
    border: 1px solid rgba(143,163,188,0.22); border-radius: 28px; }
}
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }

button { font-family: var(--font-sans); }
.mono { font-family: var(--font-mono); }

/* 動畫（設計檔 xm-*） */
@keyframes xm-pulse-red { 0%,100% { box-shadow: 0 0 8px rgba(224,79,46,.3), 0 0 20px rgba(224,79,46,.1); transform: scale(1); } 50% { box-shadow: 0 0 18px rgba(224,79,46,.6), 0 0 44px rgba(224,79,46,.22); transform: scale(1.045); } }
@keyframes xm-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes xm-fly { to { transform: translateY(-620px) scale(.94); opacity: 0; } }
@keyframes xm-flow { to { stroke-dashoffset: -40; } }
@keyframes xm-ignite { 0% { filter: grayscale(1) brightness(.65); transform: scale(.62); } 55% { filter: grayscale(0); transform: scale(1.1); } 100% { filter: none; transform: scale(1); } }
@keyframes xm-slide-up { from { transform: translateY(56px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── 地圖 ── */
.map-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 6px; flex-shrink: 0; }
.grade-chip { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--surface-card); border: 1px solid var(--border-strong); color: var(--text-primary);
  font-size: 14px; font-weight: 700; cursor: pointer; }
.grade-chip .caret { color: var(--mist-500); font-size: 10px; }
.lit-count { font-size: 12px; color: var(--text-secondary); }
.lit-count b { font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--gold-400); }
.map-hint { text-align: center; font-size: 13px; color: var(--text-secondary); padding: 0 20px 4px; flex-shrink: 0; }
.map-scroll { flex: 1; overflow-y: auto; position: relative; }
.map-canvas { position: relative; width: 390px; height: 960px; margin: 0 auto; }
.zone-label { position: absolute; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.zone-label .cnt { font-family: var(--font-mono); font-weight: 600; }
.zone-label .sub { font-weight: 400; color: var(--mist-700); }

.skill-node { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column;
  align-items: center; gap: 6px; width: 86px; background: none; border: none; padding: 0; }
.skill-node .orb { position: relative; width: 64px; height: 64px; }
.skill-node .orb-core { width: 64px; height: 64px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.skill-node .check-badge { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--state-lit); color: var(--text-on-gold); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; box-shadow: var(--glow-gold); }
.skill-node .lock-badge { position: absolute; right: -3px; bottom: -3px; font-size: 14px; filter: grayscale(1); opacity: 0.85; }
.skill-node .new-badge { position: absolute; top: -7px; left: -10px; height: 18px; padding: 0 7px; border-radius: 999px;
  background: var(--state-lit); color: var(--text-on-gold); font-size: 9.5px; font-weight: 900; letter-spacing: 0.06em;
  display: flex; align-items: center; box-shadow: var(--glow-gold); }
.skill-node .node-label { font-size: 11px; line-height: 1.3; text-align: center; }
.skill-node .repair-badge { height: 16px; padding: 0 7px; border-radius: 999px; border: 1px solid rgba(224,79,46,0.5);
  background: rgba(224,79,46,0.12); color: var(--red-400); font-size: 9.5px; font-weight: 700; display: flex; align-items: center; }

/* tab bar */
.tabbar { display: flex; align-items: stretch; height: calc(64px + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
  border-top: 1px solid rgba(143,163,188,0.14); background: rgba(13,19,32,0.72); flex-shrink: 0; }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; cursor: pointer; color: var(--mist-600); }
.tabbar button.active { color: var(--gold-500); }
.tabbar span { font-size: 10px; font-weight: 700; }

/* bottom sheet */
.sheet-mask { position: absolute; inset: 0; background: rgba(13,19,32,0.62); display: flex; align-items: flex-end; z-index: 20; }
.sheet { width: 100%; background: var(--surface-card); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-sheet);
  padding: 24px 20px calc(24px + var(--safe-bottom)); animation: xm-slide-up 280ms var(--ease-out) both;
  display: flex; flex-direction: column; gap: 16px; }
.sheet-top { display: flex; align-items: center; gap: 16px; }
.sheet-orb { width: 64px; height: 64px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-elevated); border: 2px solid var(--state-ready); box-shadow: var(--glow-mist); color: var(--mist-300); flex-shrink: 0; }
.sheet-name { font-size: 22px; font-weight: 700; line-height: 1.25; }
.sheet-chips { display: flex; gap: 8px; margin-top: 7px; }
.pill { height: 24px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 11px; }
.pill.id { border: 1px solid var(--border-strong); color: var(--text-secondary); font-family: var(--font-mono); font-weight: 600; }
.pill.ready { border: 1px solid rgba(143,163,188,0.45); background: rgba(143,163,188,0.10); color: var(--mist-400); font-weight: 700; letter-spacing: 0.08em; }
.sheet-desc { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.sheet-meta { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px;
  border-radius: 14px; background: rgba(13,19,32,0.5); border: 1px solid var(--border-card); }
.sheet-meta .lab { font-size: 13px; color: var(--text-secondary); }
.sheet-meta .num { font-family: var(--font-mono); font-weight: 700; font-size: 18px; color: var(--gold-400); }

/* 按鈕 */
.btn { width: 100%; border-radius: var(--radius-control); font-weight: 700; cursor: pointer; border: none;
  display: flex; align-items: center; justify-content: center; }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-primary { height: var(--h-cta); background: var(--state-lit); color: var(--text-on-gold); font-size: 18px; box-shadow: var(--glow-gold); }
.btn-primary.md { height: var(--h-control); font-size: 16px; }
.btn-ghost { height: var(--h-control); background: transparent; color: var(--mist-400); font-size: 16px; }
.btn-danger { height: var(--h-cta); background: var(--state-break); color: #FFF3EE; font-size: 18px; box-shadow: var(--glow-red); }

/* ── 題目頁 ── */
.q-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px 8px; flex-shrink: 0; }
.icon-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; color: var(--text-secondary); font-size: 20px; flex-shrink: 0; }
.q-meta { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.q-task { font-size: 12px; color: var(--text-secondary); }
.q-track { height: 4px; border-radius: 999px; background: rgba(143,163,188,0.18); overflow: hidden; }
.q-bar { height: 4px; border-radius: 999px; transition: width 300ms var(--ease-out); }
.chip-row { display: flex; gap: 6px; padding: 4px 20px 10px; flex-wrap: wrap; flex-shrink: 0; }
.skill-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; background: rgba(143,163,188,0.10); border: 1px solid rgba(143,163,188,0.3); color: var(--mist-400); }
.skill-chip .tag { font-weight: 400; opacity: 0.75; }
.skill-chip.fresh { background: rgba(61,191,168,0.12); border-color: rgba(61,191,168,0.5); color: var(--teal-400); }
.q-card-wrap { padding: 0 20px; flex-shrink: 0; }
.q-card { background: var(--surface-card); border: 1px solid var(--border-card); box-shadow: var(--shadow-card);
  border-radius: var(--radius-card); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.q-card.wrong { border: 2px solid var(--state-break); box-shadow: var(--glow-red); }
.q-text { font-size: 19px; font-weight: 700; line-height: 1.65; }
.strips { display: flex; gap: 4px; height: 30px; }
.strip { flex: 1; border-radius: 6px; }
.strip.am { background: rgba(240,184,96,0.55); border: 1px solid var(--gold-500); }
.strip.pm { background: rgba(240,184,96,0.22); border: 1px dashed var(--gold-500); }
.strip.off { background: rgba(143,163,188,0.06); border: 1px solid rgba(143,163,188,0.3); }
.strip-note { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); }
.answer-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px 0; flex-shrink: 0; }
.answer-row .lab { font-size: 13px; color: var(--text-secondary); flex-shrink: 0; }
.frac-display { flex: 1; height: 54px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface-card);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 28px; }
.frac-display.empty { color: var(--mist-700); }
.keypad { flex: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 12px 20px 4px; align-content: start; }
.keypad button { height: 50px; border-radius: 14px; border: 1px solid var(--border-card); background: var(--surface-card);
  color: var(--text-primary); font-family: var(--font-mono); font-weight: 600; font-size: 20px; cursor: pointer; }
.q-cta { padding: 8px 20px calc(22px + var(--safe-bottom)); flex-shrink: 0; }
.wrong-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px calc(22px + var(--safe-bottom));
  background: linear-gradient(to top, var(--night-800) 70%, rgba(20,28,43,0)); }
.wrong-card { background: var(--surface-card); border: 2px solid var(--state-break); box-shadow: var(--glow-red);
  border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; animation: xm-slide-up 320ms var(--ease-out) both; }
.wrong-card h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; }
.wrong-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

/* ── 偵查 ── */
.probe-head { display: flex; align-items: center; padding: 14px 14px 2px; flex-shrink: 0; }
.probe-title { flex: 1; text-align: center; font-size: 17px; font-weight: 700; }
.probe-clues { width: 64px; text-align: right; font-size: 12px; color: var(--text-secondary); }
.probe-clues b { font-family: var(--font-mono); font-weight: 700; color: var(--gold-400); }
.dots { display: flex; justify-content: center; gap: 10px; padding: 6px 0; flex-shrink: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(143,163,188,0.25); }
.dot.passed { background: var(--state-pass); }
.dot.current { background: transparent; border: 2px solid var(--gold-500); box-shadow: var(--glow-gold); }
.probe-body { flex: 1; padding: 16px 20px 0; position: relative; z-index: 2; }
.probe-card { background: var(--surface-card); border: 1px solid var(--border-card); box-shadow: var(--shadow-card);
  border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.probe-card.pass { border: 2px solid var(--state-pass); box-shadow: var(--glow-teal); animation: xm-fly 700ms var(--ease-out) 480ms both; }
.probe-card.fail { border: 2px solid var(--state-break); box-shadow: var(--glow-red); animation: xm-shake 360ms var(--ease-out) both; }
.probe-checking { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); }
.probe-skill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px;
  border: 1px solid rgba(143,163,188,0.35); color: var(--mist-300); font-weight: 700; font-size: 11px; }
.probe-q { font-size: 19px; font-weight: 700; line-height: 1.6; }
.probe-frac { height: 48px; border-radius: 14px; border: 1px solid var(--border-strong); background: rgba(13,19,32,0.45);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 24px; }
.probe-keypad { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.probe-keypad button { height: 42px; border-radius: 12px; border: 1px solid var(--border-card); background: rgba(13,19,32,0.4);
  color: var(--text-primary); font-family: var(--font-mono); font-weight: 600; font-size: 17px; cursor: pointer; }
.answer-option { height: 56px; border-radius: var(--radius-control); border: 1px solid var(--border-strong);
  background: var(--surface-card); color: var(--text-primary); font-size: 16px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 12px; padding: 0 16px; width: 100%; }
.answer-option .idx { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); flex-shrink: 0; }
.answer-option.selected { border: 2px solid var(--gold-500); }
.probe-verdict { text-align: center; font-size: 15px; font-weight: 700; }
.probe-verdict.pass { color: var(--teal-400); }
.probe-verdict.fail { color: var(--red-400); }
.probe-sil { height: 175px; position: relative; flex-shrink: 0; opacity: 0.55; pointer-events: none; }
.probe-sil .fade { position: absolute; left: 0; right: 0; top: 0; height: 50px; background: linear-gradient(to bottom, var(--night-800), rgba(20,28,43,0)); }

/* ── X 光片 ── */
.xray-head { padding: 30px 20px 0; flex-shrink: 0; }
.xray-head h2 { margin: 0; font-size: 28px; font-weight: 900; }
.xray-head p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.xray-board { margin: 16px 20px 0; position: relative; height: 250px; border-radius: 16px; background: var(--night-900);
  border: 1px solid var(--border-card); overflow: hidden; flex-shrink: 0; }
.xray-tag { position: absolute; left: 14px; top: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--mist-600); }
.xray-node { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; width: 90px; }
.xray-node .orb { position: relative; }
.xray-node .orb-core { border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.xray-node .check-badge { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--state-pass); color: var(--text-on-teal); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; }
.xray-node .nm { font-size: 10.5px; line-height: 1.3; text-align: center; font-weight: 700; }
.xray-node .note { font-size: 9.5px; line-height: 1.3; text-align: center; color: var(--mist-600); }
.break-card { margin: 14px 20px 0; background: var(--surface-card); border: 1px solid var(--border-card);
  border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.break-card .row { display: flex; align-items: center; gap: 9px; }
.break-card .ic { display: inline-flex; width: 30px; height: 30px; border-radius: 999px; border: 2px solid var(--state-break);
  color: var(--red-400); align-items: center; justify-content: center; flex-shrink: 0; }
.break-card .nm { font-size: 17px; font-weight: 700; }
.break-card p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-secondary); }
.bottom-ctas { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 20px calc(22px + var(--safe-bottom));
  background: linear-gradient(to top, var(--night-800) 55%, rgba(20,28,43,0)); display: flex; flex-direction: column; gap: 8px; }

/* ── 重建 ── */
.rb-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px 8px; flex-shrink: 0; }
.rb-title { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.rb-title .nm { font-size: 16px; font-weight: 700; }
.rb-title .sub { font-size: 11.5px; color: var(--text-secondary); }
.rb-prog { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.rb-prog .txt { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--text-secondary); }
.rb-scroll { flex: 1; overflow-y: auto; padding: 6px 20px calc(30px + var(--safe-bottom)); display: flex; flex-direction: column; }
.step-card { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 16px; padding: 18px;
  display: flex; flex-direction: column; gap: 12px; }
.step-card.active { border: 2px solid var(--gold-500); box-shadow: var(--glow-gold); }
.step-card.done { border: 2px solid var(--state-pass); }
.step-card.pending { opacity: 0.45; }
.step-head { display: flex; align-items: center; gap: 8px; }
.step-head .no { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold-500); }
.step-head .nm { font-size: 15px; font-weight: 700; }
.step-head .ok { margin-left: auto; color: var(--teal-400); font-weight: 900; }
.step-link { width: 2px; height: 22px; margin-left: 34px; flex-shrink: 0;
  background: linear-gradient(to bottom, rgba(143,163,188,0.4), rgba(143,163,188,0.1)); }
.task-text { font-size: 16px; line-height: 1.6; }
.wheel-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wheel-count { font-size: 12px; color: var(--text-secondary); }
.wheel-count b { font-family: var(--font-mono); font-weight: 700; color: var(--gold-400); }
.ask-block { display: flex; flex-direction: column; gap: 10px; animation: sm-fade-up 240ms var(--ease-out) both; }
.ask-q { font-size: 15px; font-weight: 700; line-height: 1.5; }
.rb-frac { height: 48px; border-radius: 14px; border: 1px solid var(--border-strong); background: rgba(13,19,32,0.45);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 24px; }
.rb-frac.flash { border: 2px solid var(--state-break); animation: xm-shake 360ms var(--ease-out) both; }
.rb-keypad { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.rb-keypad button { height: 40px; border-radius: 12px; border: 1px solid var(--border-card); background: rgba(13,19,32,0.4);
  color: var(--text-primary); font-family: var(--font-mono); font-weight: 600; font-size: 16px; cursor: pointer; }
.why-input { height: 44px; border-radius: 12px; border: 1px solid var(--border-card); background: rgba(13,19,32,0.4);
  color: var(--text-primary); font-family: var(--font-sans); font-size: 14px; padding: 0 14px; outline: none; width: 100%; }
.streak-badge { margin-left: auto; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(240,184,96,0.45);
  background: rgba(240,184,96,0.10); color: var(--gold-400); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.streak-badge b { font-family: var(--font-mono); }
.rb-flash-msg { text-align: center; font-size: 14px; font-weight: 700; }
.rb-flash-msg.pass { color: var(--teal-400); }
.rb-flash-msg.fail { color: var(--red-400); }
.step-done-note { font-size: 13px; color: var(--text-secondary); }
.step2-done-note { font-size: 13px; color: var(--teal-400); font-weight: 700; }
.revenge-mini { border: 1px solid var(--border-card); border-radius: 12px; background: rgba(13,19,32,0.45);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.revenge-mini .lab { font-size: 11px; color: var(--text-secondary); }
.revenge-mini .tx { font-size: 14px; line-height: 1.55; color: var(--text-primary); }

/* ── 點亮 ── */
.light-a { position: absolute; inset: 0; background: var(--night-900); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 30px; z-index: 30; }
.light-fx { position: relative; width: 170px; height: 170px; display: flex; align-items: center; justify-content: center; }
.light-node { position: relative; width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: rgba(240,184,96,0.14); border: 2px solid var(--state-lit);
  box-shadow: var(--glow-gold-strong); color: var(--gold-400); }
.light-node .check-badge { position: absolute; top: -2px; right: -2px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--state-lit); color: var(--text-on-gold); display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; box-shadow: var(--glow-gold); }
.light-ignite { animation: xm-ignite 1.3s var(--ease-out) both; }
.light-ring { position: absolute; inset: 24px; border-radius: 50%; border: 2px solid rgba(240,184,96,0.55); }
.light-particle { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; border-radius: 50%; }
.light-text { text-align: center; animation: sm-fade-up 400ms var(--ease-out) 0.9s both; padding: 0 20px; }
.light-text .t1 { font-size: 26px; font-weight: 900; }
.light-text .t1 em { font-style: normal; color: var(--gold-400); }
.light-text .t2 { margin-top: 8px; font-size: 14px; color: var(--text-secondary); }
.unlock-banner { margin: 18px 20px 0; background: var(--surface-card); border: 2px solid var(--state-lit);
  box-shadow: var(--glow-gold); border-radius: 16px; padding: 14px 18px; text-align: center;
  animation: sm-fade-up 300ms var(--ease-out) 0.5s both; flex-shrink: 0; z-index: 2; }
.unlock-banner .t1 { font-size: 17px; font-weight: 700; }
.unlock-banner .t1 b { font-family: var(--font-mono); color: var(--gold-400); }
.unlock-banner .t2 { margin-top: 3px; font-size: 12.5px; color: var(--text-secondary); }
.lightb-view { flex: 1; position: relative; overflow: hidden; }
.lightb-canvas { position: absolute; left: 50%; margin-left: -195px; top: -300px; width: 390px; height: 960px; }

/* ── 家長 ── */
.parent-head { height: 56px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; flex-shrink: 0; }
.parent-scroll { flex: 1; overflow-y: auto; padding: 0 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.parent-card { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 16px; padding: 18px;
  display: flex; flex-direction: column; gap: 8px; }
.parent-card.shadowed { box-shadow: var(--shadow-card); }
.parent-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--gold-500); }
.parent-summary { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.65; }
.tree-card { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 16px;
  padding: 16px 0 12px; display: flex; flex-direction: column; gap: 10px; }
.tree-card .head { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }
.tree-card .head .t { font-size: 13px; font-weight: 700; }
.tree-card .head .s { font-size: 11px; color: var(--text-secondary); }
.tree-strip { overflow-x: auto; }
.tree-strip-canvas { position: relative; width: 600px; height: 132px; }
.pnode { position: absolute; transform: translate(-50%,-50%); cursor: pointer; background: none; border: none; padding: 0; }
.pnode .orb-core { width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.tree-detail { display: flex; align-items: flex-start; gap: 10px; padding: 12px 18px 4px; border-top: 1px solid var(--border-card); }
.tree-detail .ic { display: inline-flex; width: 28px; height: 28px; border-radius: 999px; border: 1.5px solid var(--border-strong);
  color: var(--mist-300); align-items: center; justify-content: center; flex-shrink: 0; }
.tree-detail .nm { font-size: 13.5px; font-weight: 700; }
.tree-detail .nm .st { font-weight: 400; color: var(--text-secondary); }
.tree-detail .ds { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.dont-card { background: #F2E8D5; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; color: #2A2113; }
.dont-card .kick { font-size: 11px; font-weight: 900; letter-spacing: 0.12em; color: #8A6F3C; }
.dont-card .row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.6; }
.dont-card .x { font-weight: 900; color: var(--red-600); flex-shrink: 0; }
.dont-card .v { font-weight: 900; color: #1E7A66; flex-shrink: 0; }
.recent-card { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 16px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; }
.recent-card .t { font-size: 13px; font-weight: 700; }
.recent-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.recent-row .d { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); width: 30px; }
.recent-row .n { color: var(--gold-400); }
.recent-note { font-size: 11.5px; color: var(--mist-600); }

/* ───── 三年級適齡化（注音字型＋大字＋直式分數） ───── */
@font-face {
  font-family: 'BpmfZihiSans';
  src: url('../fonts/BpmfZihiSans-Regular.woff2') format('woff2');
  font-display: swap;
}
/* 孩子畫面全用注音字型；家長頁維持 Noto；數字維持等寬 */
#app { font-family: 'BpmfZihiSans', var(--font-sans); }
.screen.parent, .screen.parent * { font-family: var(--font-sans); }
.screen.parent .mono, .mono, .vfrac, .pill.id, .lit-count b, .wheel-count b,
.streak-badge b, .probe-clues b, .rb-prog .txt, .sheet-meta .num { font-family: var(--font-mono) !important; }

/* 注音需要更大字級與行高 */
.q-text { font-size: 23px; line-height: 2.05; }
.probe-q { font-size: 21px; line-height: 2.0; }
.task-text { font-size: 19px; line-height: 2.0; }
.ask-q { font-size: 18px; line-height: 1.95; }
.break-card p { font-size: 18px; line-height: 1.95; }
.sheet-desc { font-size: 19px; line-height: 1.95; }
.wrong-card h3 { font-size: 19px; }
.wrong-card p { font-size: 16px; line-height: 1.9; }
.answer-option { height: auto; min-height: 60px; padding: 10px 16px; font-size: 17px; line-height: 1.9; }
.node-label { font-size: 12px; }
.map-hint { font-size: 14px; }
.step-done-note, .step2-done-note { font-size: 15px; line-height: 1.9; }
.revenge-mini .tx { font-size: 16px; line-height: 1.9; }
.rb-title .sub { font-size: 12px; }
.q-task { font-size: 13px; }
.light-text .t2 { font-size: 15px; }
.unlock-banner .t2 { font-size: 13.5px; }

/* 直式分數（課本寫法：分子在上、分母在下） */
.vfrac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle;
  line-height: 1; margin: 0 4px; }
.vfrac b { font-weight: 700; font-size: 0.72em; padding: 1px 4px; font-family: var(--font-mono); }
.vfrac i { display: block; align-self: stretch; min-width: 20px; height: 2px;
  background: currentColor; border-radius: 2px; opacity: 0.9; }
.vfrac.dim { color: var(--mist-700); }
.vfrac.key b { font-size: 11px; padding: 0 3px; }
.vfrac.key i { min-width: 14px; height: 1.5px; }
.key-word { font-size: 15px; font-weight: 700; }
.dim { color: var(--mist-700); }
.frac-display { height: 76px; font-size: 26px; }
.probe-frac { height: 68px; font-size: 24px; }
.rb-frac { height: 68px; font-size: 24px; }

/* 題目頁捲動容器（大字後內容變高） */
.q-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.keypad { flex: none; padding-bottom: 8px; }
.q-cta { flex-shrink: 0; }
.probe-body { overflow-y: auto; }
.xray-scroll { flex: 1; overflow-y: auto; padding-bottom: 170px; }

/* ───── v3：選項作答 ───── */
.opt-wrap { padding: 12px 20px 8px; }
.opt-grid { display: flex; flex-direction: column; gap: 9px; }
.opt-grid.two { display: grid; grid-template-columns: 1fr 1fr; }
.opt-btn { min-height: 60px; border-radius: var(--radius-control); border: 1.5px solid var(--border-strong);
  background: var(--surface-card); color: var(--text-primary); cursor: pointer;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-align: left;
  font-size: 17px; line-height: 1.8; }
.opt-grid.two .opt-btn { justify-content: flex-start; }
.opt-btn .idx { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono);
  font-size: 13px; color: var(--text-secondary); flex-shrink: 0; }
.opt-btn .ol { flex: 1; }
.opt-btn.selected { border: 2px solid var(--gold-500); box-shadow: var(--glow-gold); }
.opt-btn.selected .idx { border-color: var(--gold-500); color: var(--gold-400); }
.probe-card .opt-btn { background: rgba(13,19,32,0.4); min-height: 54px; font-size: 16px; }
.step-card .opt-btn { background: rgba(13,19,32,0.4); min-height: 52px; font-size: 16px; }
.step-card.flash-wrong { animation: xm-shake 360ms var(--ease-out) both; }

/* ───── 看例子（worked example 檢視器） ───── */
.ex-mask { position: absolute; inset: 0; background: rgba(13,19,32,0.78); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.ex-card { width: 100%; max-width: 360px; background: var(--surface-card);
  border: 2px solid var(--gold-500); box-shadow: var(--glow-gold), var(--shadow-card);
  border-radius: 16px; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.ex-head { display: flex; align-items: center; gap: 10px; }
.ex-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--gold-500);
  border: 1px solid rgba(240,184,96,0.45); border-radius: 999px; padding: 2px 9px; }
.ex-title { font-size: 18px; font-weight: 700; }
.ex-body { display: flex; flex-direction: column; align-items: center; gap: 14px;
  min-height: 260px; justify-content: center; padding: 8px 0 14px; }
.ex-vis { display: flex; justify-content: center; }
.ex-text { font-size: 19px; line-height: 2.0; text-align: center; }
.ex-big { font-family: var(--font-mono); font-weight: 700; font-size: 24px; color: var(--gold-400);
  background: rgba(13,19,32,0.5); border: 1px dashed rgba(240,184,96,0.45); border-radius: 12px;
  padding: 10px 18px; }
.ex-nav { display: flex; gap: 8px; }
.ex-nav .btn { flex: 1; }
.ex-link { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(240,184,96,0.5);
  background: rgba(240,184,96,0.10); color: var(--gold-400); font-size: 13px; font-weight: 700;
  cursor: pointer; flex-shrink: 0; }

/* ───── 選項加大（三年級手指與閱讀） ───── */
.opt-grid { gap: 11px; }
.opt-btn { min-height: 76px; padding: 14px 16px; font-size: 20px; line-height: 1.9; border-radius: 16px; }
.opt-btn .idx { width: 32px; height: 32px; font-size: 15px; }
.opt-btn .ol .vfrac b { font-size: 0.78em; }
.probe-card .opt-btn { min-height: 68px; font-size: 19px; }
.step-card .opt-btn { min-height: 64px; font-size: 18px; }

/* ───── 選項再加大：與題目同字級（23px） ───── */
.opt-btn { min-height: 92px; padding: 18px 18px; font-size: 23px; line-height: 2.0; }
.opt-btn .idx { width: 36px; height: 36px; font-size: 17px; }
.probe-card .opt-btn { min-height: 84px; font-size: 21px; }
.step-card .opt-btn { min-height: 80px; font-size: 20px; }

/* ───── 紙花 confetti（移植自 games-monorepo shared） ───── */
.confetti {
  position: absolute;
  width: var(--w, 10px); height: var(--h, 14px);
  background: var(--c, #ffd34e); border-radius: 2px;
  pointer-events: none; z-index: 80;
  top: var(--y0, 30%); left: var(--x0, 50%);
  transform-origin: center;
  animation: confetti-fall var(--dur, 2.2s) cubic-bezier(0.25, 0.45, 0.45, 0.95) forwards;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
@keyframes confetti-fall {
  0%   { transform: translate(0, 0) rotate(0) scale(0.4); opacity: 0; }
  10%  { transform: translate(calc(var(--dx, 0px) * 0.15), -40px) rotate(calc(var(--spin, 360deg) * 0.1)) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx, 0px), var(--dy, 320px)) rotate(var(--spin, 360deg)) scale(1); opacity: 0; }
}

/* 畫面層與煙火層分離（煙火不被重繪清掉） */
#screen { position: absolute; inset: 0; }
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }

/* 減少動態效果（Reduce Motion）開啟時，慶祝煙火仍要看得到：
   tokens 的全域 0.01ms 降速會讓紙花隱形，這裡白名單覆寫回來 */
@media (prefers-reduced-motion: reduce) {
  .confetti { animation-duration: var(--dur, 2.2s) !important; }
  .light-ring { animation-duration: 1.5s !important; }
  .light-particle { animation-duration: 1.15s !important; }
  .light-ignite { animation-duration: 1.3s !important; }
}