/* =========================================================================
   數字麻糬 — styles.css
   視覺沿用 Tably 的 Cozy Neubrutalism：token 整組抄自 bill-splitter/app/styles.css。
   小孩看得到的畫面一律零文字（阿拉伯數字除外），所以所有「按鈕」都是圖示或角色。
   ========================================================================= */

/* ---- 圓體（拉丁字母與數字）：Baloo 2 latin 子集，本地檔，不向 Google Fonts 連線 ----
   全案數字都是 font-weight:800，Baloo 2 的字重上限剛好接得住；筆畫圓胖，跟粗框同調。
   unicode-range 只掛 latin，中文（家長區）不受影響，照舊落回系統黑體。 */
@font-face{
  font-family:'Baloo 2';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/baloo2-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* ---- Cozy Neubrutalism design tokens（抄自 Tably 定稿，WCAG 全驗過）---- */
  --bg:#FFF4DC;            /* 奶油底（漸層淺端）*/
  --bg-deep:#FFE3A9;       /* 漸層深端 */
  --card:#FFFFFF;          /* 卡片：純白＋粗邊框＋硬陰影 */
  --card-2:#FFEFCB;        /* 深一階奶油：巢狀／選中態底色 */
  --ink:#4A2B14;           /* 深棕：主文字 */
  --ink-soft:#6E4E2E;      /* 次要文字 */
  --line:#5C3A1E;          /* 邊框與硬陰影 */
  --primary:#FF9838;       /* 主橘：主按鈕、徽章底 */
  --primary-tx:#3A2008;    /* 主橘上的文字。主橘底一律配這個深棕，絕不配白字 */
  --success:#2E7D46;
  --danger:#C63D2F;
  --blush:#E8607C;         /* 裝飾用，不載文字 */
  --lav:#9C9FCB;
  --soft:rgba(255,152,56,.16);
  --warn:#FFD84D;

  --radius:18px;
  --border:3px solid var(--line);
  --hard:0 4px 0 var(--line);
  --hard-sm:0 3px 0 var(--line);
  --shadow-lg:0 6px 0 var(--line);
  --ease:cubic-bezier(.22,1,.36,1);   /* UI 轉場一律 ease-out，彈跳只給吉祥物 */

  --font-num:'Baloo 2', system-ui, sans-serif;
  --font-sys:system-ui, -apple-system, 'Segoe UI', 'Microsoft JhengHei', sans-serif;

  /* ---- 數字麻糬的六種柔和底色：一律從 token 派生（color-mix），不寫死色值 ---- */
  --mochi-1:color-mix(in srgb, var(--primary) 38%, #fff);
  --mochi-2:color-mix(in srgb, var(--warn)    45%, #fff);
  --mochi-3:color-mix(in srgb, var(--blush)   32%, #fff);
  --mochi-4:color-mix(in srgb, var(--lav)     34%, #fff);
  --mochi-5:color-mix(in srgb, var(--success) 26%, #fff);
  --mochi-6:color-mix(in srgb, var(--bg-deep) 78%, #fff);
  /* 雙擊款（要點兩次才消）的底色：跟上面六種一般色明顯不同 */
  --mochi-double:color-mix(in srgb, var(--blush) 55%, #fff);

  --mochi-size:140px;      /* 數字麻糬直徑，iPad 上約 2cm；直向會縮小（見 media query）*/
  --ground:96px;           /* 地面線離畫面底部的高度 */
}

/* =========================================================================
   1. 版面骨架
   ========================================================================= */

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  width:100%;height:100%;overflow:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sys);
  /* 幼兒會用整隻手掌拍畫面：關掉選字、長按選單、點兩下縮放、iOS 反白 */
  -webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  overscroll-behavior:none;
}

#app{
  position:fixed;inset:0;
  /* viewport-fit=cover 之後靠安全區內縮，瀏海與手勢列都不會蓋到控制項 */
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}

/* 七個場景疊在同一層，只有 .on 的那個顯示 */
.scene{position:absolute;inset:0;display:none}
.scene.on{display:block}

/* 遊戲區（有數字麻糬的那兩塊）不能被瀏覽器攔走手勢 */
#s-seq,#s-fall{touch-action:none}

/* =========================================================================
   2. 共用元件
   ========================================================================= */

/* ---- 大圓鈕（開始畫面的三顆模式鈕）：粗獷風三件套 ---- */
.big-btn{
  display:grid;place-items:center;
  width:180px;height:180px;border-radius:50%;
  background:var(--primary);
  color:var(--primary-tx);              /* 主橘底一律深棕字／深棕圖示 */
  border:5px solid var(--line);
  box-shadow:0 8px 0 var(--line);
  cursor:pointer;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease);
}
.big-btn:active{transform:translateY(6px);box-shadow:0 2px 0 var(--line)}

/* 三顆並排。padding 只留 18px：圖示要撐得夠大，2 歲的小孩才看得出畫的是什麼 */
#mode-row{display:flex;align-items:center;justify-content:center;gap:34px}
.mode-btn{width:186px;height:186px;padding:18px}
.mode-btn svg{display:block;width:100%;height:100%;overflow:visible}

/* ---- 角落小控制項 ---- */
.corner{position:absolute;background:none;border:none;padding:0;cursor:pointer}

/* 左上齒輪：刻意做小而淡（幼兒不易誤觸）；v2 點一下就開閘門浮層，不再需要長按 */
#gate-btn{top:14px;left:14px;width:52px;height:52px;opacity:.55;z-index:30}

/* 喊數字開啟時的小麥克風：齒輪右邊，同樣小而淡 */
#mic-ind{position:absolute;top:16px;left:74px;width:34px;height:44px;opacity:.55;z-index:30;pointer-events:none}
#mic-ind[hidden]{display:none}
#mic-ind svg{display:block;width:100%;height:100%}
#mic-ind.live{opacity:1;filter:drop-shadow(0 0 8px var(--primary))}

/* 右下貼紙簿：做大（這是小孩自己會想按的） */
#book-btn{right:22px;bottom:22px;width:112px;height:112px}
#book-btn:active{transform:scale(.94)}

/* ---- 分數：右上角大數字＋星星。只在真的在玩的兩個畫面出現 ---- */
#score{
  position:absolute;top:16px;right:20px;z-index:20;
  /* 分數只是給大人／小孩看的回饋，不是控制項：讓點擊穿過去，
     免得數字麻糬飄到它後面時小孩點了沒反應 */
  pointer-events:none;
  display:none;align-items:center;gap:8px;
  padding:6px 18px 8px;
  background:var(--card);border:var(--border);border-radius:999px;
  box-shadow:var(--hard);
}
body[data-scene="seq"] #score,
body[data-scene="fall"] #score,
body[data-scene="repeat"] #score{display:flex}
/* 齒輪閘門在 start／seq／fall／rest 都要在（休息畫面只有大人能把小孩帶回遊戲） */
body[data-scene="sticker"] #gate-btn,
body[data-scene="parent"] #gate-btn{display:none}
#score .score-val{font-family:var(--font-num);font-weight:800;font-size:44px;line-height:1;color:var(--ink)}
#score.pop{animation:score-pop .45s var(--ease)}
@keyframes score-pop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}

/* =========================================================================
   3. 主持人麻糬球（造型 DNA 見 tably-design/references/mascot.md）
   沒有四肢、輪廓 4.5 粗 #5C3A1E、眼睛是弧線、腮紅一定在。
   表情靠兩組 opacity 互換（.mo-* 類別），不做 path morph。
   ========================================================================= */

.mascot{display:block;overflow:visible;transform-box:fill-box;transform-origin:center bottom}

/* 表情組：預設只顯示「一般」那一組 */
.mascot .f-happy,.mascot .f-listen,.mascot .f-sleep,.mascot .f-laugh{opacity:0}
.mascot .f-idle{opacity:1}
.mascot[data-face="happy"]  .f-idle{opacity:0} .mascot[data-face="happy"]  .f-happy{opacity:1}
.mascot[data-face="listen"] .f-idle{opacity:0} .mascot[data-face="listen"] .f-listen{opacity:1}
.mascot[data-face="sleep"]  .f-idle{opacity:0} .mascot[data-face="sleep"]  .f-sleep{opacity:1}
.mascot[data-face="laugh"]  .f-idle{opacity:0} .mascot[data-face="laugh"]  .f-laugh{opacity:1}

/* 待機呼吸：3.4s 循環的極輕擠壓 */
.mascot .m-body{transform-box:fill-box;transform-origin:center bottom;animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,.97)}}

/* 眨眼：眼睛弧線週期性壓扁（用 scaleY，不換 path） */
.mascot .m-eye{transform-box:fill-box;transform-origin:center;animation:blink 5.2s ease-in-out infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.15)}}

/* 慶祝：開心擠壓兩拍（0.9s 播一次） */
.mascot.cheer{animation:cheer .9s var(--ease)}
@keyframes cheer{
  0%{transform:translateY(0) scale(1,1)}
  22%{transform:translateY(-16px) scale(.92,1.1)}
  46%{transform:translateY(0) scale(1.12,.9)}
  70%{transform:translateY(-8px) scale(.97,1.04)}
  100%{transform:translateY(0) scale(1,1)}
}
/* 咯咯笑（點主持人的彩蛋）：左右快速晃 */
.mascot.giggle{animation:giggle .7s ease-in-out}
@keyframes giggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}45%{transform:rotate(6deg)}70%{transform:rotate(-4deg)}}
/* 聽：身體向前傾 */
.mascot.lean{animation:lean .6s var(--ease) forwards}
@keyframes lean{to{transform:rotate(-8deg) translateX(-6px)}}
/* 睡：慢慢的大起伏 */
.mascot.snooze .m-body{animation:snooze 4s ease-in-out infinite}
@keyframes snooze{0%,100%{transform:scale(1,1)}50%{transform:scale(1.07,.93)}}

/* 掉落畫面的主持人固定在左下角地面上 */
#fall-host{position:absolute;left:26px;bottom:calc(var(--ground) - 18px);width:170px;cursor:pointer}
/* 順序畫面沒有地面線，主持人縮小蹲在左下角，讓開 3×3 格（格子從左邊 74px 開始） */
#seq-host{position:absolute;left:8px;bottom:10px;width:118px;cursor:pointer}
#seq-field{position:absolute;inset:0}

/* ---- 主持人手上的目標數字牌（hint=show / flash 時出現）---- */
#hint-card{
  position:absolute;left:210px;bottom:calc(var(--ground) + 26px);
  width:104px;height:120px;
  display:grid;place-items:center;
  background:var(--card);border:var(--border);border-radius:16px;
  box-shadow:var(--hard);
  transform:rotate(-6deg);
  font-family:var(--font-num);font-weight:800;font-size:74px;line-height:1;color:var(--ink);
  animation:card-in .4s var(--ease) backwards;
}
#hint-card[hidden]{display:none}
@keyframes card-in{from{transform:rotate(-6deg) scale(.5);opacity:0}to{transform:rotate(-6deg) scale(1);opacity:1}}

/* =========================================================================
   4. 數字麻糬（無臉，跟主持人區隔）
   ========================================================================= */

#sky{position:absolute;inset:0}

/* 地面：一條深棕線＋底下淡一階的奶油 */
#ground{
  position:absolute;left:0;right:0;bottom:0;height:var(--ground);
  background:color-mix(in srgb, var(--bg-deep) 70%, var(--primary) 12%);
  border-top:5px solid var(--line);
}

.mochi{
  position:absolute;top:0;left:0;
  width:var(--mochi-size);height:calc(var(--mochi-size) * 0.87);
  cursor:pointer;
  will-change:transform;
  /* 命中區用元素本身；幼兒指頭大，四周再留一點免費的邊 */
  padding:6px;
}
.mochi svg{width:100%;height:100%;overflow:visible;display:block}
.mochi .num{
  position:absolute;inset:0;z-index:2;      /* 數字要壓在糖殼上面，裂紋不能蓋掉它 */
  display:grid;place-items:center;
  font-family:var(--font-num);font-weight:800;
  font-size:calc(var(--mochi-size) * 0.52);line-height:1;
  color:var(--ink);
  pointer-events:none;
  padding-bottom:calc(var(--mochi-size) * 0.03);
}

/* 落地後在地上輕輕晃（不算失敗，等人點）。順序模式的 .still 是靜止的，用同一款輕晃。 */
.mochi.landed .body,
.mochi.still .body{transform-box:fill-box;transform-origin:center bottom;animation:jiggle 2.4s ease-in-out infinite}
@keyframes jiggle{0%,100%{transform:scale(1,1)}50%{transform:scale(1.04,.96)}}

/* 點錯：左右搖晃一下，不消失、無負面音 */
.mochi.shake{animation:shake .5s ease-in-out}
@keyframes shake{0%,100%{margin-left:0}15%{margin-left:-14px}40%{margin-left:12px}65%{margin-left:-8px}85%{margin-left:5px}}

/* 同一題錯第 2 次：正確那顆放大跳動並發光 */
.mochi.reveal .body{transform-box:fill-box;transform-origin:center;animation:reveal-hop .8s var(--ease) infinite}
.mochi.reveal{filter:drop-shadow(0 0 14px var(--primary)) drop-shadow(0 0 26px var(--warn))}
@keyframes reveal-hop{0%,100%{transform:scale(1) translateY(0)}45%{transform:scale(1.18) translateY(-14px)}}

/* 點對：爆開＋星星迸出 */
.mochi.burst{pointer-events:none;animation:burst .5s var(--ease) forwards}
@keyframes burst{0%{transform-origin:center;opacity:1}30%{opacity:1}100%{opacity:0}}
.mochi.burst .body{transform-box:fill-box;transform-origin:center;animation:burst-body .5s var(--ease) forwards}
@keyframes burst-body{0%{transform:scale(1)}25%{transform:scale(1.35)}100%{transform:scale(.2)}}
.mochi.burst .num{animation:burst-num .5s var(--ease) forwards}
@keyframes burst-num{0%{transform:scale(1);opacity:1}100%{transform:scale(2.1);opacity:0}}

/* ---- 順序模式：點錯就被「擋住」（壓扁再彈回），不消失、不扣分 ---- */
.mochi.blocked .body{transform-box:fill-box;transform-origin:center bottom;animation:blocked .42s var(--ease)}
@keyframes blocked{0%{transform:scale(1,1)}35%{transform:scale(1.06,.85)}70%{transform:scale(.97,1.04)}100%{transform:scale(1,1)}}

/* 點錯時在那顆上方閃 0.4s 的小盾牌（半透明深棕） */
.shield{position:absolute;pointer-events:none;z-index:3;animation:shield-flash .4s var(--ease) forwards}
.shield svg{display:block;width:100%;height:100%}
@keyframes shield-flash{
  0%{opacity:0;transform:scale(.6) translateY(6px)}
  30%{opacity:1;transform:scale(1.08) translateY(0)}
  70%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}
}

/* ---- 雙擊款（兩次才消）：外圍一層淡粉糖殼＋兩個小白點 ---- */
.mochi .shell{position:absolute;inset:0;z-index:1;pointer-events:none}
.mochi .shell .shell-ring{opacity:.4}
.mochi .shell .shell-crack{opacity:0}
/* 第一次點：殼裂開（顯示裂紋、殼淡到 15%、小白點剩一個） */
.mochi.cracked .shell .shell-ring{opacity:.15}
.mochi.cracked .shell .shell-crack{opacity:1}
.mochi.cracked .shell .dot-b{opacity:0}
.mochi.cracked .shell{animation:shell-crack .32s var(--ease)}
@keyframes shell-crack{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}

/* 回合結束時所有麻糬淡出 0.4s。
   只動 opacity：.mochi 的 transform 是 JS 用 inline style 擺位置的，
   在這裡動 transform 會把整顆彈回畫面左上角（v1 的 shake 也是為這個才改用 margin-left）。 */
.mochi.fade-out{animation:mochi-fade .4s var(--ease) forwards;pointer-events:none}
@keyframes mochi-fade{to{opacity:0}}
.mochi.fade-out .body{transform-box:fill-box;transform-origin:center bottom;animation:mochi-fade-body .4s var(--ease) forwards}
@keyframes mochi-fade-body{to{transform:scale(.86,.9)}}

/* 星星迸出：六顆從中心射向外圈 */
.sparks{position:absolute;inset:0;pointer-events:none}
.sparks .sp{
  position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  transform-box:fill-box;
  animation:spark .6s var(--ease) forwards;
}
@keyframes spark{
  0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(140deg);opacity:0}
}

/* =========================================================================
   5. 跟讀模式
   ========================================================================= */

#repeat-wrap{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:44px;
}
#repeat-card{
  width:300px;height:340px;
  display:grid;place-items:center;
  background:var(--card);border:5px solid var(--line);border-radius:32px;
  box-shadow:var(--shadow-lg);
  cursor:pointer;
  font-family:var(--font-num);font-weight:800;font-size:210px;line-height:1;color:var(--ink);
  animation:card-pop .5s var(--ease) backwards;
}
@keyframes card-pop{0%{transform:scale(.4);opacity:0}62%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
#repeat-card:active{transform:scale(.97)}
#repeat-side{position:relative;display:grid;place-items:center}
#repeat-host{width:200px}
/* 「換你說」的耳朵狀星星：主持人旁邊三顆漸次浮現 */
#repeat-ear{position:absolute;top:-18px;right:-26px;display:flex;gap:4px;align-items:flex-start;pointer-events:none}
#repeat-ear .sp{opacity:0;animation:ear-in .6s var(--ease) forwards}
#repeat-ear .sp:nth-child(2){animation-delay:.15s}
#repeat-ear .sp:nth-child(3){animation-delay:.3s}
@keyframes ear-in{to{opacity:1;transform:translateY(-8px)}}

/* =========================================================================
   6. 貼紙：解鎖浮出 ＋ 貼紙簿
   ========================================================================= */

#sticker-pop{
  position:absolute;inset:0;z-index:40;
  display:none;place-items:center;
  background:color-mix(in srgb, var(--line) 42%, transparent);
  cursor:pointer;
}
#sticker-pop.on{display:grid}
#sticker-pop .frame{
  width:330px;height:330px;display:grid;place-items:center;
  background:var(--card);border:6px solid var(--line);border-radius:36px;
  box-shadow:var(--shadow-lg);
  animation:pop-over .62s var(--ease) backwards;   /* 彈入過衝 */
}
@keyframes pop-over{0%{transform:scale(.2) rotate(-12deg);opacity:0}55%{transform:scale(1.16) rotate(4deg)}100%{transform:scale(1) rotate(0);opacity:1}}
#sticker-pop .frame img,#sticker-pop .frame svg{width:80%;height:80%;object-fit:contain}

/* 12 張要一次看完，不能捲：欄與列都用 1fr 撐滿可用高度。
   左邊讓開 130px 給返回鈕（它在左下角），右邊留 30px 對稱不了也沒關係——
   小孩只會看格子，讓格子夠大比左右對稱重要。 */
#book-grid{
  position:absolute;inset:0;
  padding:26px 30px 26px 130px;
  display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:16px;
}
.sticker{
  display:grid;place-items:center;overflow:hidden;
  background:var(--card-2);border:var(--border);border-radius:22px;
  box-shadow:var(--hard-sm);
}
.sticker img,.sticker svg{width:78%;height:78%;object-fit:contain}
.sticker.locked{background:color-mix(in srgb, var(--bg-deep) 60%, #fff)}
/* 未得的顯示深棕剪影。
   做法：drop-shadow 用 --line 畫出同形狀的實色影子，再把本體平移出格子外由 overflow:hidden 切掉。
   （純用 invert/sepia 那串濾鏡調不出指定色，實測會偏成灰米色。）*/
.sticker.locked img,.sticker.locked svg{
  filter:drop-shadow(400px 0 0 var(--line));
  transform:translateX(-400px);
  opacity:.82;      /* 再淡就變成米色而不是深棕了（.34 實測混成 rgb(200,170,122) 的土黃）*/
}
.sticker.got{cursor:pointer}
.sticker.wiggle{animation:wiggle .5s ease-in-out}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}60%{transform:rotate(7deg)}}

/* 返回鈕（貼紙簿／休息畫面用）：一顆大橘圓，裡面只有一個返回圖示 */
.back-btn{
  position:absolute;left:22px;bottom:22px;
  width:96px;height:96px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--primary);color:var(--primary-tx);
  border:5px solid var(--line);box-shadow:var(--hard);
  cursor:pointer;
}
.back-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}

/* =========================================================================
   7. 休息畫面
   ========================================================================= */

#rest-wrap{position:absolute;inset:0;display:grid;place-items:center}
#rest-stage{position:relative}
#rest-host{width:280px}
/* 打呼的泡泡（用星星圖形，不是文字 Z），錨在主持人頭部右上角 */
#rest-z{position:absolute;top:6px;right:-34px;width:40px;height:40px;pointer-events:none}
#rest-z .puff{position:absolute;left:0;top:0}
#rest-z .puff{opacity:0;animation:puff 3s ease-in-out infinite}
#rest-z .puff:nth-child(2){animation-delay:1s}
#rest-z .puff:nth-child(3){animation-delay:2s}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.6)}30%{opacity:.85}100%{opacity:0;transform:translate(38px,-64px) scale(1.5)}}
/* 小孩點畫面只會讓牠打呼更大聲 */
#s-rest.louder #rest-host{animation:snore-big .6s var(--ease)}
@keyframes snore-big{0%,100%{transform:scale(1)}45%{transform:scale(1.12,.9)}}

/* =========================================================================
   7b. 回合結束浮層（只有家長開「落地 3 顆結束回合」才出現）
   慶祝不是輸：主持人開心表情＋三顆星＋這回合的分數大字。零文字。
   ========================================================================= */

#round-end{
  position:absolute;inset:0;z-index:45;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--line) 42%, transparent);
  cursor:pointer;
}
#round-end[hidden]{display:none}
.re-card{
  display:grid;justify-items:center;gap:6px;
  padding:22px 54px 28px;
  background:var(--card);border:6px solid var(--line);border-radius:36px;
  box-shadow:var(--shadow-lg);
  animation:pop-over .62s var(--ease) backwards;   /* 沿用貼紙浮層的彈入過衝 */
}
.re-host{width:180px}
.re-stars{display:flex;align-items:center;gap:14px;height:104px}
.re-stars .rs{display:block;animation:re-star .55s var(--ease) backwards}
.re-stars .rs:nth-child(2){animation-delay:.12s}
.re-stars .rs:nth-child(3){animation-delay:.24s}
@keyframes re-star{0%{opacity:0;transform:scale(.3) rotate(-30deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.re-score{font-family:var(--font-num);font-weight:800;font-size:104px;line-height:1;color:var(--ink)}

/* =========================================================================
   7c. 家長閘門浮層（這一層是給大人看的，可以有中文）
   點一下齒輪就開；按住大鈕滿 3 秒才進家長區，放開就歸零。
   ========================================================================= */

#gate-overlay{
  position:absolute;inset:0;z-index:60;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--line) 55%, transparent);
  font-family:var(--font-sys);
}
#gate-overlay[hidden]{display:none}
.gate-card{
  display:grid;justify-items:center;gap:6px;text-align:center;
  padding:26px 44px 44px;min-width:330px;
  background:var(--card);border:5px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.gate-card h2{font-size:23px;color:var(--ink)}
.gate-card p{font-size:15px;color:var(--ink-soft);margin-bottom:18px}
#gate-hold{
  position:relative;
  width:170px;height:170px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--primary);color:var(--primary-tx);   /* 主橘底一律深棕字 */
  border:5px solid var(--line);box-shadow:0 6px 0 var(--line);
  font-family:var(--font-sys);font-size:19px;font-weight:800;
  cursor:pointer;
  touch-action:none;              /* 按住 3 秒的手勢不能被瀏覽器攔走 */
}
#gate-hold.holding{transform:translateY(4px);box-shadow:0 2px 0 var(--line)}
/* 進度環畫在按鈕外圈（在鈕上面會變成橘底畫橘線，看不見） */
#gate-hold-ring{position:absolute;inset:-28px;width:calc(100% + 56px);height:calc(100% + 56px);pointer-events:none}
#gate-hold-ring circle{
  fill:none;stroke:var(--primary);stroke-width:3.5;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:center;
}
/* 淡底環：沒在按的時候也看得到，家長才知道「按住會有進度」 */
#gate-hold-ring circle.track{stroke:color-mix(in srgb, var(--line) 20%, transparent);stroke-dasharray:none}

/* =========================================================================
   8. 家長區（閘門後，可以有中文）
   ========================================================================= */

#s-parent{background:var(--bg);overflow-y:auto;font-family:var(--font-sys)}
.p-wrap{max-width:760px;margin:0 auto;padding:26px 24px 60px}
.p-wrap h1{font-size:26px;margin-bottom:4px;color:var(--ink)}
.p-wrap .p-sub{font-size:14px;color:var(--ink-soft);margin-bottom:20px}
.p-sec{
  background:var(--card);border:var(--border);border-radius:var(--radius);
  box-shadow:var(--hard-sm);padding:16px 18px;margin-bottom:16px;
}
.p-sec h2{font-size:17px;margin-bottom:12px;color:var(--ink)}
.p-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0}
.p-row + .p-row{border-top:1px dashed rgba(92,58,30,.28)}
.p-row .p-label{font-size:15px;color:var(--ink)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{
  font-family:var(--font-sys);font-size:14px;
  padding:8px 14px;border:2px solid var(--line);border-radius:999px;
  background:var(--card-2);color:var(--ink);cursor:pointer;
}
.seg button[aria-pressed="true"]{background:var(--primary);color:var(--primary-tx);font-weight:700}
/* 這個瀏覽器不支援的項目（例如喊數字）：灰掉但留在原位，旁邊的說明會寫原因 */
.seg button[disabled]{opacity:.45;cursor:not-allowed}
.p-row.off .p-label{opacity:.55}
.p-btn{
  font-family:var(--font-sys);font-size:15px;font-weight:700;
  padding:10px 20px;border:3px solid var(--line);border-radius:14px;
  background:var(--primary);color:var(--primary-tx);box-shadow:var(--hard-sm);cursor:pointer;
}
.p-btn.ghost{background:var(--card-2);color:var(--ink)}
.p-btn.danger{background:var(--danger);color:#fff}
.p-note{font-size:13px;color:var(--ink-soft);line-height:1.6;margin-top:10px}
.p-note.warn{background:var(--soft);border-radius:10px;padding:8px 10px;color:var(--ink)}

/* 錄音頁：22 段各一列 */
.rec-list{display:grid;gap:8px;max-height:none}
.rec-row{
  display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;
  background:var(--card-2);border:2px solid var(--line);border-radius:12px;padding:7px 10px;
}
.rec-row .rec-name{font-size:14px;color:var(--ink)}
.rec-row .rec-name.has::after{content:'●';color:var(--success);margin-left:8px;font-size:12px}
.rec-row button{
  font-family:var(--font-sys);font-size:13px;
  padding:6px 10px;border:2px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--ink);cursor:pointer;min-width:44px;
}
.rec-row button.rec-on{background:var(--danger);color:#fff}

/* 進度條 */
.bar{height:12px;border:2px solid var(--line);border-radius:999px;background:var(--card-2);overflow:hidden;flex:1;max-width:220px}
.bar i{display:block;height:100%;background:var(--primary)}
.p-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:12px}
.p-stat{background:var(--card-2);border:2px solid var(--line);border-radius:12px;padding:8px 10px}
.p-stat b{display:block;font-family:var(--font-num);font-size:24px;font-weight:800;color:var(--ink)}
.p-stat span{font-size:12px;color:var(--ink-soft)}

/* =========================================================================
   9. 開始畫面
   ========================================================================= */

#start-wrap{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
}
#start-host{width:250px}

/* =========================================================================
   10. 方向：橫向為主（數字麻糬 4~5 欄），直向不能壞（3 欄）
   ========================================================================= */

@media (orientation:portrait){
  :root{--mochi-size:118px;--ground:110px}
  #fall-host{width:130px;left:14px}
  #seq-host{width:100px;left:6px;bottom:8px}
  #hint-card{left:150px;width:84px;height:98px;font-size:58px}
  #repeat-wrap{flex-direction:column;gap:28px}
  #repeat-card{width:260px;height:300px;font-size:180px}
  #book-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);padding:26px 26px 140px}
  #start-host{width:210px}
  .big-btn{width:160px;height:160px}
  .mode-btn{width:172px;height:172px;padding:16px}
  #mode-row{gap:22px}
  .re-host{width:150px}
  .re-score{font-size:88px}
}

/* 極矮的橫向（iPhone 橫躺）：把角色再縮一階，免得撞到地面線 */
@media (orientation:landscape) and (max-height:520px){
  :root{--mochi-size:104px;--ground:74px}
  #fall-host{width:120px}
  #seq-host{width:92px}
  #start-host{width:150px}
  .big-btn{width:132px;height:132px}
  .mode-btn{width:128px;height:128px;padding:12px}
  #mode-row{gap:20px}
  #start-wrap{gap:16px}
  .re-host{width:120px}
  .re-score{font-size:64px}
  .re-stars{height:60px}
  #gate-hold{width:132px;height:132px;font-size:17px}
}

/* =========================================================================
   11. prefers-reduced-motion：所有動畫都要有分支
   ========================================================================= */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* 靜態下仍要看得出「這顆是答案」：改用純色描邊而非跳動 */
  .mochi.reveal{filter:none;outline:6px solid var(--primary);outline-offset:4px;border-radius:50%}
  /* 盾牌的動畫最後一格是 opacity:0，被上面那條壓成 .01ms 就等於整個看不到。
     這裡改成不用動畫、直接顯示（JS 400ms 後會把元素移除），關掉動畫的人一樣看得到被擋住。 */
  .shield{animation:none;opacity:1}
}