/* 注音小學堂：粉彩平面風、粗圓角、無漸層；字體只用系統字體，不載入第三方資源 */
:root {
  --ink: #4a3b32;
  --sky: #cfeefc;
  --cloud: #ffffff;
  --grass1: #b9e6a3;
  --grass2: #9bd88b;
  --grass3: #82cc7b;
  --pink: #ffc4d6;
  --blue: #b7defa;
  --mint: #bff0d4;
  --lemon: #fff1a8;
  --line: #5a4638;
  --zy-font: "BiauKai", "DFKai-SB", "標楷體", "Kaiti TC", "KaiTi", "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
  --ui-font: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sky); color: var(--ink); font-family: var(--ui-font); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
[hidden] { display: none !important; }
button { font-family: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 5px solid #ff8fb1; outline-offset: 3px; }

.app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; background: var(--sky); overflow: hidden; }
/* 重要內容限制在中央安全區（4:3 基準）；底部預留 ≥12% 純留白防手掌誤觸 */
.safe { position: relative; z-index: 2; height: 100%; width: min(100%, calc(100vh * 4 / 3)); margin: 0 auto; padding: 3vh 4vw 14vh; display: flex; flex-direction: column; align-items: center; }

/* ---------- 場景（純 CSS 平面圖形） ---------- */
.scenery { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cloud { position: absolute; width: 18vmin; height: 7vmin; background: var(--cloud); border-radius: 7vmin; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: var(--cloud); border-radius: 50%; }
.cloud::before { width: 9vmin; height: 9vmin; left: 2.5vmin; top: -4.5vmin; }
.cloud::after { width: 7vmin; height: 7vmin; left: 9vmin; top: -3vmin; }
.c1 { left: 6%; top: 8%; } .c2 { right: 8%; top: 16%; transform: scale(.8); } .c3 { right: 22%; top: 5%; transform: scale(.7); }
.sun { position: absolute; right: 7%; top: 5%; width: 11vmin; height: 11vmin; border-radius: 50%; background: #ffe58a; border: 1vmin solid #ffd24d; }
.hill { position: absolute; border-radius: 50%; }
.h1 { width: 90vmax; height: 60vmax; left: -30vmax; bottom: -48vmax; background: var(--grass1); }
.h2 { width: 80vmax; height: 55vmax; right: -25vmax; bottom: -44vmax; background: var(--grass2); }
.h3 { width: 70vmax; height: 40vmax; left: 10vmax; bottom: -34vmax; background: var(--grass3); }
.arena { background: #fdf8e4; }
.arena .tree { position: absolute; bottom: 12%; width: 9vmin; height: 20vmin; }
.arena .tree::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 2vmin; height: 7vmin; margin-left: -1vmin; background: #d6a679; border-radius: 1vmin; }
.arena .tree::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 15vmin; background: var(--grass2); border-radius: 50%; border: .7vmin solid #6fb56a; }
.t1 { left: 1%; } .t2 { left: 9%; transform: scale(.75); transform-origin: bottom; } .t3 { right: 1%; } .t4 { right: 9%; transform: scale(.75); transform-origin: bottom; }
.arena .flower { position: absolute; bottom: 4%; width: 3.2vmin; height: 3.2vmin; border-radius: 50%; border: .8vmin solid #fff; }
.f1 { left: 4%; background: var(--pink); } .f2 { left: 14%; background: var(--lemon); bottom: 7%; } .f3 { right: 4%; background: var(--blue); } .f4 { right: 14%; background: var(--pink); bottom: 7%; }

/* ---------- 首頁 ---------- */
.home-head { display: flex; align-items: center; gap: 2vmin; margin-top: 1vh; }
.bear { width: clamp(70px, 16vmin, 130px); height: auto; flex: none; }
h1 { margin: 0; font-size: clamp(30px, 7vmin, 60px); letter-spacing: .08em; line-height: 1.15; }
.sub { margin: .3em 0 0; font-size: clamp(16px, 3vmin, 26px); font-weight: 700; }
.stage-list { list-style: none; margin: auto 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5vmin; }
@media (min-aspect-ratio: 5/3) { .stage-list { grid-template-columns: repeat(4, 1fr); } }
.stage-btn { width: 100%; min-height: 80px; padding: 2vmin 1vmin; border: 5px solid var(--line); border-radius: 32px; font-size: clamp(18px, 3.4vmin, 30px); font-weight: 900; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; box-shadow: 0 6px 0 var(--line); transition: transform .08s; }
.stage-btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 var(--line); }
.stage-btn .emo { font-size: clamp(32px, 7vmin, 60px); line-height: 1; }
.stage-btn .zy { font-family: var(--zy-font); font-size: clamp(18px, 3.2vmin, 28px); letter-spacing: .1em; }
.stage-btn .st { font-size: clamp(18px, 3.4vmin, 28px); letter-spacing: .1em; }
.stage-btn:disabled { background: #e6e6e6 !important; color: #8a8a8a; border-color: #a9a9a9; box-shadow: 0 6px 0 #a9a9a9; cursor: not-allowed; }
.s1 { background: var(--pink); } .s2 { background: var(--blue); } .s3 { background: var(--mint); } .s4 { background: var(--lemon); }
.home-tools { position: absolute; bottom: 3vh; left: 0; right: 0; display: flex; justify-content: center; gap: 2vmin; }
.chip { min-height: 56px; padding: 0 22px; display: inline-flex; align-items: center; border: 4px solid var(--line); border-radius: 999px; background: #fff; font-size: clamp(16px, 2.6vmin, 22px); font-weight: 800; text-decoration: none; color: var(--ink); }

/* ---------- 練習畫面 ---------- */
.play-safe { gap: 2vh; }
.topbar { width: 100%; display: flex; align-items: center; gap: 2vmin; }
.round-btn { width: 72px; height: 72px; flex: none; border: 5px solid var(--line); border-radius: 50%; background: #fff; font-size: 30px; box-shadow: 0 5px 0 var(--line); position: relative; }
.round-btn::after { content: ""; position: absolute; inset: -6px; } /* 觸控熱區擴展至 ≥84px */
.progress { flex: 1; text-align: center; font-weight: 900; font-size: clamp(18px, 3vmin, 26px); }
.bar { height: 18px; margin-top: 6px; background: #fff; border: 4px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: #ffb347; border-radius: 999px; transition: width .3s; }
.stars-now { font-size: clamp(20px, 3.4vmin, 30px); font-weight: 900; background: var(--lemon); border: 4px solid var(--line); border-radius: 999px; padding: 6px 16px; white-space: nowrap; }

.board { width: 100%; flex: 1 1 auto; min-height: 0; background: #fffdf5; border: 6px solid var(--line); border-radius: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1vh; padding: 2vh 2vw; }
.prompt { margin: 0; font-size: clamp(20px, 3.8vmin, 34px); font-weight: 900; text-align: center; }
.stimulus { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.stimulus .big-zy { font-family: var(--zy-font); font-size: clamp(90px, 24vmin, 220px); font-weight: 700; color: #3b2a20; }
.stimulus .big-emoji { font-size: clamp(80px, 22vmin, 190px); }
.stimulus .answer-word { margin-top: .4em; font-size: clamp(22px, 4vmin, 36px); font-weight: 900; min-height: 1.3em; }
.speak-btn { min-height: 64px; padding: 0 28px; border: 5px solid var(--line); border-radius: 999px; background: var(--blue); font-size: clamp(20px, 3.4vmin, 30px); font-weight: 900; box-shadow: 0 5px 0 var(--line); }
.speak-btn.big { font-size: clamp(34px, 8vmin, 70px); min-height: 110px; padding: 0 44px; }

.options { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2vmin; }
@media (max-aspect-ratio: 1/1) { .options { grid-template-columns: repeat(2, 1fr); } }
.opt { min-height: clamp(84px, 17vh, 150px); border: 6px solid var(--line); border-radius: 30px; background: var(--c, var(--pink)); display: flex; align-items: center; justify-content: center; box-shadow: 0 7px 0 var(--line); transition: transform .08s; position: relative; }
.opt:nth-child(4n+1) { --c: var(--pink); } .opt:nth-child(4n+2) { --c: var(--blue); } .opt:nth-child(4n+3) { --c: var(--mint); } .opt:nth-child(4n+4) { --c: var(--lemon); }
.opt:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 1px 0 var(--line); }
.opt .zy { font-family: var(--zy-font); font-size: clamp(48px, 12vmin, 110px); font-weight: 700; color: #3b2a20; line-height: 1; }
.opt .emo { font-size: clamp(48px, 12vmin, 100px); line-height: 1; }
.opt.wrong { background: #e8e8e8 !important; opacity: .55; animation: shake .35s; }
.opt.right { background: #ffe066 !important; animation: pop .45s; }
.opt:disabled { cursor: default; }
@keyframes shake { 25% { transform: translateX(-9px); } 75% { transform: translateX(9px); } }
@keyframes pop { 40% { transform: scale(1.12); } }
.feedback { margin: 0; min-height: 1.5em; font-size: clamp(20px, 3.6vmin, 32px); font-weight: 900; text-align: center; }

/* ---------- 結算 ---------- */
.result-safe { justify-content: center; gap: 2.5vh; text-align: center; padding-bottom: 14vh; }
.result-safe h2 { margin: 0; font-size: clamp(36px, 8vmin, 70px); }
.result-safe p { margin: 0; font-size: clamp(20px, 3.6vmin, 32px); font-weight: 800; }
.result-stars { display: flex; gap: 2vmin; }
.result-stars svg { width: clamp(70px, 17vmin, 150px); height: auto; }
.result-stars svg.off { filter: grayscale(1); opacity: .35; }
.result-stars svg.in { animation: pop .6s both; }
.result-actions { display: flex; flex-wrap: wrap; gap: 2vmin; justify-content: center; }
.big-btn { min-height: 80px; min-width: 150px; padding: 0 30px; border: 6px solid var(--line); border-radius: 999px; background: var(--mint); font-size: clamp(22px, 3.8vmin, 34px); font-weight: 900; box-shadow: 0 7px 0 var(--line); }
.big-btn.alt { background: var(--lemon); }
.big-btn:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--line); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-height: 520px) { .safe { padding-bottom: 12vh; } .board { padding: 1vh; } .home-head .sub { display: none; } }

/* ---------- v2：分頁、描寫、翻牌 ---------- */
.tabs { display: flex; gap: 1.5vmin; margin-top: 2vh; justify-content: center; flex-wrap: wrap; }
.tab { min-height: 64px; padding: 0 26px; border: 5px solid var(--line); border-radius: 999px; background: #fff; font-size: clamp(18px, 3.2vmin, 28px); font-weight: 900; box-shadow: 0 5px 0 var(--line); }
.tab[aria-selected="true"] { background: #ffd93b; transform: translateY(3px); box-shadow: 0 2px 0 var(--line); }
.stage-list { margin: 2vh 0 auto; }
.stage-btn.s5 { background: #e3d2ff; } .stage-btn.t { background: var(--mint); } .stage-btn.m { background: var(--pink); }

.trace-board { flex: 1 1 auto; }
.canvas-wrap { position: relative; width: min(100%, 52vh); aspect-ratio: 1; background: #fff; border: 5px dashed #c9b8a8; border-radius: 28px; overflow: hidden; }
.canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#trace-ink { touch-action: none; cursor: crosshair; }
.canvas-wrap.ok { border-color: #5cc46a; background: #f3ffe9; }
.trace-actions { display: flex; gap: 1.5vmin; justify-content: center; flex-wrap: wrap; width: 100%; }
.trace-actions .big-btn { min-width: 0; min-height: 72px; padding: 0 22px; font-size: clamp(18px, 3vmin, 28px); }
.big-btn.skip { background: #fff; font-size: clamp(16px, 2.6vmin, 22px) !important; }

.mem-grid { width: 100%; flex: 1 1 auto; min-height: 0; display: grid; gap: 2vmin; grid-template-columns: repeat(var(--cols, 4), 1fr); align-content: center; }
.card { aspect-ratio: 1 / 1.05; max-height: 24vh; min-height: 84px; width: 100%; justify-self: center; border: 6px solid var(--line); border-radius: 28px; background: var(--c, var(--pink)); font-size: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 0 var(--line); position: relative; }
.card:nth-child(4n+1) { --c: var(--pink); } .card:nth-child(4n+2) { --c: var(--blue); } .card:nth-child(4n+3) { --c: var(--mint); } .card:nth-child(4n+4) { --c: var(--lemon); }
.card .back { font-size: clamp(30px, 8vmin, 64px); color: #fff; text-shadow: 0 3px 0 rgba(90,70,56,.35); }
.card .face { display: none; font-size: clamp(40px, 11vmin, 96px); line-height: 1; }
.card .face.zy { font-family: var(--zy-font); font-weight: 700; color: #3b2a20; }
.card.open, .card.done { background: #fffdf5; }
.card.open .back, .card.done .back { display: none; }
.card.open .face, .card.done .face { display: block; }
.card.done { border-color: #5cc46a; opacity: .75; animation: pop .45s; }
@media (max-width: 700px) { .tabs .tab { padding: 0 16px; } }.stimulus .big-zy.blend { font-size: clamp(60px, 15vmin, 140px); letter-spacing: .05em; }
.stimulus .big-emoji.small { font-size: clamp(50px, 12vmin, 110px); }
.opt .zy.two { font-size: clamp(36px, 9vmin, 80px); letter-spacing: .08em; }
#screen-home .safe { overflow-y: auto; }/* v2 版面修正：選單卡片更緊湊，工具列改為文件流內 */
.stage-list { grid-template-columns: repeat(3, 1fr); gap: 2vmin; margin: 2vh 0 0; }
@media (max-aspect-ratio: 1/1) { .stage-list { grid-template-columns: repeat(2, 1fr); } }
.stage-btn { min-height: 0; padding: 1.2vmin .8vmin; gap: .1em; border-radius: 26px; font-size: clamp(16px, 2.8vmin, 24px); }
.stage-btn .emo { font-size: clamp(28px, 5.5vmin, 48px); }
.stage-btn .zy { font-size: clamp(15px, 2.6vmin, 22px); }
.stage-btn .st { font-size: clamp(15px, 2.6vmin, 22px); }
.home-tools { position: static; margin-top: 2.5vh; padding-bottom: 2vh; }
#screen-home .safe { padding-bottom: 6vh; }