/* 遊戲引擎畫面。手機優先；主內容最闊 560px；掣最少高 56px；小一題目字最少 20px。 */
.game-root { max-width: 560px; margin: 0 auto; padding: 8px 16px calc(28px + env(safe-area-inset-bottom)); min-height: 100vh; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.back-btn { flex: 0 1 auto; min-width: 0; }
.toggles { display: flex; gap: 6px; flex: 0 0 auto; }
.toggle { padding: 4px 12px; font-size: 22px; background: var(--surface); }
.toggle:not(.is-on) { opacity: 0.6; }

/* ---------- 封面、結局 ---------- */
.cover, .finale { text-align: center; padding-top: 24px; }
.cover-hero { font-size: 112px; line-height: 1.1; animation: float 3s ease-in-out infinite; }
.cover-title { font-size: 30px; margin: 8px 0; overflow-wrap: anywhere; }
.cover-sub { opacity: 0.8; margin-bottom: 24px; }
.finale-text { font-size: 22px; font-weight: 700; }
.confetti-row { display: flex; justify-content: center; gap: 12px; font-size: 36px; }
.confetti { display: inline-block; animation: float 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.18s); }
.sticker-preview { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 12px auto; padding: 16px 24px; max-width: 100%; background: var(--surface); color: var(--on-surface); border: 4px dashed var(--accent); border-radius: 22px; transform: rotate(-2deg); }
.sticker-hero { font-size: 64px; line-height: 1.1; }
.sticker-title { font-weight: 800; overflow-wrap: anywhere; }
.sticker-meta { font-size: 16px; opacity: 0.8; }

/* ---------- 地圖 ---------- */
.map-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.hero { display: inline-block; font-size: 44px; line-height: 1; }
.hero.big { font-size: 72px; }
.gear { display: flex; flex-wrap: wrap; gap: 6px; font-size: 32px; min-height: 40px; align-items: center; }
.gear-empty { opacity: 0.4; }
.level-list { display: flex; flex-direction: column; gap: 12px; }
.level-node { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 10px 14px; text-align: left; font: inherit; color: var(--on-surface); background: var(--surface); border: 3px solid var(--primary); border-radius: 20px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); cursor: pointer; }
.level-node.is-locked { border-color: rgba(127, 127, 127, 0.45); opacity: 0.65; cursor: default; }
.level-node.is-passed { border-color: var(--accent); }
.node-icon { font-size: 40px; flex: 0 0 auto; }
.node-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.node-name { font-size: 21px; font-weight: 800; overflow-wrap: anywhere; }
.node-sub { font-size: 15px; opacity: 0.75; }
.node-stars { color: #d97706; font-size: 24px; letter-spacing: 1px; flex: 0 0 auto; }

/* ---------- 關卡 ---------- */
.hud { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.hud .hero { font-size: 40px; }
.hud-mid { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.progress-text { font-weight: 800; }
.tag-retry { display: inline-block; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 800; border-radius: 10px; padding: 0 10px; width: fit-content; }
.hud-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.streak { font-weight: 800; color: var(--accent); }
.boss { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 8px 12px; background: var(--surface); color: var(--on-surface); border-radius: 16px; }
.boss-emoji { font-size: 48px; line-height: 1; }
.boss-info { flex: 1; min-width: 0; }
.boss-name { font-weight: 800; }
.hp-bar { height: 16px; background: rgba(127, 127, 127, 0.3); border-radius: 8px; overflow: hidden; margin: 4px 0; }
.hp-fill { height: 100%; width: var(--hp, 100%); background: #dc2626; transition: width 0.4s ease; }
.hp-text { font-size: 14px; opacity: 0.8; }
.question-card { padding: 16px; }
.prompt-row { display: flex; align-items: flex-start; gap: 12px; }
.prompt-main { flex: 1 1 auto; min-width: 0; }
.prompt-text { font-size: 22px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; margin-bottom: 12px; }
.sentence .blank, .sentence .blank-static { display: inline-block; min-width: 3em; padding: 0 6px; border-bottom: 3px solid currentColor; text-align: center; }
.blank.is-correct { color: var(--good); }
.blank.is-wrong { color: var(--bad); }
.btn-replay { flex: 0 0 auto; width: 56px; padding: 0; font-size: 26px; }
.type-listen .btn-replay { width: 84px; min-height: 84px; font-size: 40px; border-radius: 50%; background: var(--primary); color: var(--on-primary); }
.hint-bubble { background: rgba(245, 158, 11, 0.2); border-left: 6px solid var(--accent); padding: 8px 12px; border-radius: 10px; }
.passage { background: rgba(127, 127, 127, 0.12); border-radius: 14px; padding: 8px 12px; margin-bottom: 12px; }
.passage summary { font-weight: 800; cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.passage-text { font-size: 20px; margin: 4px 0 8px; }
.question-body.locked .answer-area { pointer-events: none; opacity: 0.45; }
.skip-btn { margin-top: 8px; }

.options { display: grid; grid-template-columns: 1fr; gap: 12px; }
.options-tf { grid-template-columns: 1fr 1fr; }
@media (min-width: 480px) { .options { grid-template-columns: 1fr 1fr; } }
.option { width: 100%; min-height: 64px; }
.is-correct { background: var(--good) !important; color: #fff !important; border-color: transparent !important; }
.is-wrong { background: var(--bad) !important; color: #fff !important; border-color: transparent !important; animation: shake 0.4s; }
.is-nudge { outline: 4px solid var(--accent); }
.reveal { animation: pop 0.5s; }
.is-selected { outline: 4px solid var(--accent); outline-offset: 2px; background: rgba(245, 158, 11, 0.25); }
.is-done { background: var(--good) !important; color: #fff !important; opacity: 0.9; border-color: transparent !important; }

.feedback { margin-top: 4px; }
.feedback .fb-title { font-size: 24px; font-weight: 800; }
.feedback.good { background: #dcfce7; color: #14532d; border-radius: 16px; padding: 12px 16px; }
.feedback.bad { background: #fee2e2; color: #7f1d1d; border-radius: 16px; padding: 12px 16px; }
.feedback .btn-ghost { color: inherit; }
.fb-answer { font-size: 20px; font-weight: 800; }
.fb-explain, .fb-note { font-size: 18px; }

/* 輸入 */
.typing { display: flex; flex-direction: column; gap: 12px; }
.num-display { min-height: 68px; padding: 10px 14px; font-size: 34px; font-weight: 800; text-align: right; background: rgba(127, 127, 127, 0.15); border: 3px solid var(--primary); border-radius: 16px; font-variant-numeric: tabular-nums; overflow: hidden; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key { min-height: 60px; font-size: 26px; }
.key-blank { visibility: hidden; }
.text-input.is-correct, .num-display.is-correct { color: #fff; }
.text-input.is-wrong, .num-display.is-wrong { color: #fff; }

/* 砌句 */
.order-answer { min-height: 76px; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 3px dashed rgba(127, 127, 127, 0.6); border-radius: 16px; margin-bottom: 12px; align-content: flex-start; }
.order-answer.is-correct { border-color: var(--good); background: rgba(21, 128, 61, 0.15) !important; color: inherit !important; animation: none; }
.order-answer.is-wrong { border-color: var(--bad); background: rgba(185, 28, 28, 0.15) !important; color: inherit !important; }
.order-bank { display: flex; flex-wrap: wrap; gap: 8px; min-height: 64px; }
.tile, .chip { min-height: 56px; padding: 6px 16px; font: inherit; font-size: 22px; font-weight: 700; color: var(--on-primary); background: var(--primary); border: 0; border-radius: 14px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); cursor: pointer; max-width: 100%; overflow-wrap: anywhere; touch-action: manipulation; }
.tile:disabled { opacity: 0.8; cursor: default; }

/* 配對、分類 */
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.match-col { display: flex; flex-direction: column; gap: 10px; }
.pair-btn { width: 100%; font-size: 20px; }
.chip-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; min-height: 60px; }
.chip { background: var(--accent); color: var(--on-accent); }
.chip-in { display: inline-flex; align-items: center; min-height: 40px; padding: 2px 10px; font-size: 18px; border-radius: 10px; box-shadow: none; cursor: default; }
.bins { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.bin { min-height: 120px; padding: 10px; font: inherit; color: var(--on-surface); background: rgba(127, 127, 127, 0.14); border: 3px dashed var(--primary); border-radius: 18px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bin-name { font-weight: 800; font-size: 20px; }
.bin-items { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* 表達、紙上默書 */
.starter { font-size: 22px; font-weight: 700; padding: 8px 12px; border-left: 6px solid var(--primary); background: rgba(127, 127, 127, 0.12); border-radius: 10px; }
.paper-answer { font-size: 40px; font-weight: 800; text-align: center; padding: 14px; background: rgba(127, 127, 127, 0.12); border-radius: 16px; margin: 12px 0; overflow-wrap: anywhere; }
.say-text { font-size: 22px; font-weight: 700; }

/* ---------- 圖 ---------- */
.visual { width: 100%; margin: 0 auto 12px; color: var(--on-surface); }
.visual svg { display: block; width: 100%; height: 100%; }
.visual-emoji { max-width: 150px; aspect-ratio: 1 / 1; }
.visual-count, .visual-coins { max-width: 340px; aspect-ratio: 16 / 9; }
.visual-clock { max-width: 240px; aspect-ratio: 1 / 1; }
.visual-vertical { max-width: 260px; aspect-ratio: 4 / 3.2; }
.visual-fraction-bar { max-width: 340px; aspect-ratio: 320 / 110; }
.visual-fraction-circle { max-width: 200px; aspect-ratio: 1 / 1; }
.v-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.v-frame { fill: rgba(127, 127, 127, 0.14); stroke: currentColor; stroke-width: 2; stroke-dasharray: 6 4; }
.v-clock-face { fill: #ffffff; stroke: #1f2937; stroke-width: 5; }
.v-tick { stroke: #374151; stroke-width: 1.2; }
.v-tick-big { stroke: #111827; stroke-width: 3; }
.v-clock-num { fill: #111827; font-size: 17px; font-weight: 800; font-family: var(--font); }
.v-hand-hour { stroke: #111827; stroke-width: 7; stroke-linecap: round; }
.v-hand-minute { stroke: #dc2626; stroke-width: 4; stroke-linecap: round; }
.v-clock-center { fill: #111827; }
.v-digit { fill: currentColor; font-size: 34px; font-weight: 800; font-family: ui-monospace, Menlo, Consolas, monospace; }
.v-line { stroke: currentColor; stroke-width: 4; }
.v-slot { fill: rgba(127, 127, 127, 0.12); stroke: currentColor; stroke-width: 2; stroke-dasharray: 5 4; }
.v-q { opacity: 0.35; }
.v-fill { fill: #f59e0b; stroke: #92400e; stroke-width: 3; }
.v-empty { fill: #ffffff; stroke: #92400e; stroke-width: 3; }
.coin-rim { stroke: rgba(0, 0, 0, 0.45); stroke-width: 1.5; }
.coin-bronze .coin-rim { fill: #c27c3d; }
.coin-silver .coin-rim { fill: #d4d7dd; }
.coin-bi .coin-rim { fill: #e4b84a; }
.coin-bi .coin-core { fill: #d4d7dd; stroke: rgba(0, 0, 0, 0.35); }
.coin-text { fill: #1f2937; font-weight: 800; font-family: var(--font); }

/* ---------- Dashboard ---------- */
.big-stars { font-size: 56px; color: #d97706; text-align: center; letter-spacing: 4px; }
.score-line { font-size: 22px; font-weight: 800; text-align: center; margin-bottom: 4px; }
.reward { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0; padding: 12px; background: var(--accent); color: var(--on-accent); border-radius: 16px; font-weight: 800; font-size: 20px; animation: pop 0.8s; }
.reward-emoji { font-size: 48px; }
.time-box, .topic-box, .compare { background: var(--surface); color: var(--on-surface); border-radius: 16px; padding: 12px 16px; margin-bottom: 12px; }
.time-box h3, .topic-box h3, .compare h3 { font-size: 20px; margin-bottom: 6px; }
.bars { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 28px 1fr 56px; align-items: center; gap: 8px; font-size: 15px; }
.bar-track { height: 14px; background: rgba(127, 127, 127, 0.25); border-radius: 7px; overflow: hidden; }
.bar-fill { height: 100%; width: var(--w, 0%); border-radius: 7px; }
.bar-row.ok .bar-fill { background: #16a34a; }
.bar-row.no .bar-fill { background: #dc2626; }
.bar-time { text-align: right; font-variant-numeric: tabular-nums; }
.fixed-line { text-align: center; font-weight: 800; }
.wrong-card .prompt-text { font-size: 20px; }
.dash-actions { flex-direction: column; }
.dash-actions > .btn { flex: 0 0 auto; width: 100%; }
.error-screen { padding-top: 24px; }
.error-list { background: #fee2e2; color: #7f1d1d; border-radius: 14px; padding: 12px 12px 12px 32px; }

/* ---------- 動畫 ---------- */
.jump { animation: jump 0.5s; }
.shake { animation: shake 0.45s; }
.hit { animation: shake 0.45s; }
.pop { animation: pop 0.7s; }
@keyframes jump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18px) scale(1.15); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* 大螢幕：字稍大，仍然置中、最闊 560px */
@media (min-width: 800px) {
  .prompt-text { font-size: 26px; }
  .cover-hero { font-size: 140px; }
}