:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#FFF4C9; --ink:#2B2D42; --soft:#5C607A; --card:#FFFFFF;
  --sky:#CDEBFF; --wood:#F2C27B; --red:#EF476F; --green:#06D6A0;
  --yellow:#FFD166; --blue:#118AB2; --pink:#FF8FB1; --purple:#B9A8FF;
  --en:'Baloo 2','Arial Rounded MT Bold','Trebuchet MS',sans-serif;
  --zh:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#1F2340; --ink:#F4F6FF; --soft:#B9BEDA; --card:#2C3158; }
}
:root[data-theme="dark"]{ --bg:#1F2340; --ink:#F4F6FF; --soft:#B9BEDA; --card:#2C3158; }
*,*::before,*::after{box-sizing:inherit}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:var(--en); -webkit-tap-highlight-color:transparent; overflow-x:hidden}
button{font:inherit; color:inherit; cursor:pointer}
button:focus-visible{outline:4px solid var(--blue); outline-offset:3px}
.zh{font-family:var(--zh); font-weight:500; color:var(--soft)}
#fx{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:30}
.flyer{position:fixed; z-index:25; pointer-events:none; line-height:0}
.ic{display:block; width:100%; height:auto; overflow:visible}
.ic *{stroke:#2B2D42; stroke-width:3; stroke-linejoin:round; stroke-linecap:round}
.ic .ns,.ic text{stroke:none}
.ic .t2,.ic .s2 *{stroke-width:2.1}
.ic .s2 .ns{stroke:none}
.sticker{display:inline-block; width:44px; filter:drop-shadow(0 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 2px rgba(43,45,66,.25))}

/* 彩旗 */
.bunting{height:34px; position:relative; background:conic-gradient(from 150deg at 50% 0,var(--red) 60deg,transparent 0) 0 0/40px 34px repeat-x}
.bunting::after{content:""; position:absolute; inset:0; background:
  conic-gradient(from 150deg at 50% 0,var(--yellow) 60deg,transparent 0) 20px 0/80px 26px repeat-x,
  conic-gradient(from 150deg at 50% 0,var(--green) 60deg,transparent 0) 60px 0/80px 26px repeat-x}

.screen{display:none; max-width:760px; margin:0 auto; padding:12px 16px 32px}
.screen.active{display:block}

/* ---------- 吉祥物 Sunny ---------- */
.mascot svg{width:100%; height:auto; overflow:visible; display:block}
.mascot .bob{animation:bob 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 100%}
.mascot .eyes{animation:blink 4.5s infinite; transform-box:fill-box; transform-origin:center}
.mascot .wing{transform-box:fill-box}
.mascot .wing.l{transform-origin:100% 15%}
.mascot .wing.r{transform-origin:0 15%}
.mascot.wave .wing.r{animation:wave 1.1s ease-in-out infinite}
.mascot.cheer .bob,.mascot.party .bob{animation:jump .7s ease}
.mascot.party .bob{animation-iteration-count:infinite}
.mascot.cheer .wing.l,.mascot.party .wing.l{animation:flapL .18s 4 alternate}
.mascot.cheer .wing.r,.mascot.party .wing.r{animation:flapR .18s 4 alternate}
.mascot.party .wing{animation-iteration-count:infinite!important}
.mascot.think .bob{animation:tilt .9s ease}
.mascot .m-open{opacity:0; transform-box:fill-box; transform-origin:center}
.mascot.talking .m-open{opacity:1; animation:talk .2s infinite alternate}
.mascot.talking .m-closed{opacity:0}

/* ---------- 首頁 ---------- */
.hero{position:relative; height:170px; margin-top:6px; border-radius:28px; overflow:hidden;
  background:linear-gradient(var(--sky) 0 78%, #8BD17C 78%)}
.sun{position:absolute; right:8%; top:14px; width:70px; height:70px; border-radius:50%;
  background:radial-gradient(circle,var(--yellow) 0 48%,transparent 49%),
  repeating-conic-gradient(#FFB703 0 10deg,transparent 10deg 30deg);
  animation:spin 18s linear infinite}
.cloud{position:absolute; width:60px; height:22px; background:#fff; border-radius:20px; animation:drift linear infinite}
.cloud::before,.cloud::after{content:""; position:absolute; background:#fff; border-radius:50%}
.cloud::before{width:30px; height:30px; left:10px; top:-14px}
.cloud::after{width:22px; height:22px; left:32px; top:-9px}
.c1{top:30px; animation-duration:26s}
.c2{top:70px; animation-duration:38s; animation-delay:-16s; transform:scale(.7)}
.hero .mascot{position:absolute; left:50%; bottom:10px; width:110px; margin-left:-55px}
.bus{position:absolute; bottom:8px; width:120px; left:100%; animation:bus 14s linear infinite 2s}
.title{font-weight:800; font-size:clamp(2.4rem,9vw,4rem); line-height:1; text-align:center; margin:16px 0 4px; letter-spacing:-.5px}
.title span{display:inline-block}
.title span:nth-child(odd){transform:rotate(-3deg)}
.title span:nth-child(even){transform:rotate(3deg)}
.sub{text-align:center; margin:0 0 14px; font-size:1.05rem}
.stickers{display:flex; justify-content:center; gap:6px; flex-wrap:wrap; min-height:40px; margin-bottom:16px; font-size:1.8rem}
.rooms{display:grid; gap:12px; grid-template-columns:1fr 1fr}
@media (min-width:640px){.rooms{grid-template-columns:repeat(3,1fr)}}
.parent input{flex:1; min-width:0; font:inherit; color:var(--ink); background:var(--bg); border:2px solid var(--soft); border-radius:12px; padding:8px 10px}
.grp{display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:2px; aspect-ratio:1; width:100%}
.grp > span{display:block; width:46%}
.grp.g1 > span{width:80%}
.skycard .kid{display:block; background:#DDF0FF; border-radius:50%}
.sil .ic{filter:brightness(0) opacity(.75); transition:filter .5s}
.sit-icon.found{animation:pop .6s}
#feedAnimal.chew{animation:chew .25s 4}
.situation{position:relative}
.situation .sit-icon{position:relative}
.cat-txt{display:flex; flex-direction:column; align-items:center; gap:4px}
.cat{position:relative}
.cat.wide{grid-column:1/-1; flex-direction:row; justify-content:flex-start; gap:16px; padding:16px 20px; text-align:left}
.cat.wide .ico{margin-bottom:0; flex:none}
.cat.wide .cat-txt{align-items:flex-start}
.cat.wide b{font-size:1.5rem}
.start-tag{position:absolute; top:-10px; right:16px; background:#EF476F; color:#fff; font-weight:800; font-size:.85rem; padding:4px 12px; border-radius:99px; box-shadow:0 3px 0 rgba(43,45,66,.2)}
.start-tag .zh-word{font-family:var(--zh); font-weight:700}
.cats{margin-top:6px}
.mem{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; perspective:900px; max-width:520px; margin:0 auto}
.mcard{position:relative; aspect-ratio:3/4; border:0; background:none; padding:0; transform-style:preserve-3d; transition:transform .45s}
.mcard.open,.mcard.matched{transform:rotateY(180deg)}
.mcard .face{position:absolute; inset:0; border-radius:16px; -webkit-backface-visibility:hidden; backface-visibility:hidden; display:grid; place-items:center; box-shadow:0 4px 0 rgba(43,45,66,.18)}
.mcard .front{background:repeating-linear-gradient(45deg,#B9A8FF 0 10px,#A896F5 10px 20px); padding:24%}
.mcard .back{background:var(--card); transform:rotateY(180deg); padding:12%}
.mcard.matched .back{box-shadow:0 0 0 4px var(--green)}
.seq-slots{display:grid; gap:8px; margin-bottom:14px}
.slot{aspect-ratio:1; border:3px dashed var(--soft); border-radius:18px; display:grid; place-items:center; position:relative; background:rgba(255,255,255,.35)}
.slot .no{position:absolute; top:2px; left:8px; font-weight:800; font-size:1.2rem; color:var(--soft)}
.slot .ic{width:72%}
.slot.filled{border-style:solid; border-color:var(--green); background:var(--card); animation:pop .4s}
.seq-tray{display:grid; gap:8px}
.seq-tray .card .word{font-size:.8rem; line-height:1.15; text-align:center}
.story-scene{position:relative; aspect-ratio:16/10; border-radius:24px; overflow:hidden; background:linear-gradient(#CDEBFF 0 72%, #8BD17C 72%)}
.story-scene .actor{position:absolute; transform:translateX(-50%); animation:popIn .5s backwards}
.story-scene .actor .ic{animation:bob 2.6s ease-in-out infinite}
.story-text{display:grid; gap:8px; margin:12px 0}
.line{display:flex; align-items:center; gap:10px; border:0; background:var(--card); border-radius:18px; padding:10px 14px; text-align:left; font-weight:800; font-size:clamp(1.15rem,4.8vw,1.55rem); box-shadow:0 3px 0 rgba(43,45,66,.12)}
.line .spk{width:28px; flex:none}
.line.reading{background:#FFF1C2; box-shadow:0 0 0 3px var(--yellow)}
.q-ask{text-align:center; margin:4px 0 10px; font-weight:700; color:var(--ink)}
.story-nav{display:flex; align-items:center; justify-content:space-between; margin-top:14px}
.nav-btn{width:64px; height:64px; border-radius:50%; border:0; background:var(--yellow); padding:18px; box-shadow:0 4px 0 rgba(43,45,66,.2)}
.nav-btn[disabled]{opacity:.3}
.tool-row{display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:10px}
.fs-btn .zh-label{font-family:var(--zh)}
#zhBtn[aria-pressed="false"]{background:var(--bg); outline:2px dashed var(--soft); outline-offset:-2px}
body.no-zh .zh-word, body.no-zh .stickers .zh,
body.no-zh #promptZh, body.no-zh .room .zh, body.no-zh .cat .zh, body.no-zh .cat-title small, body.no-zh .q-ask,
body.no-zh .sub, body.no-zh .review .zh, body.no-zh .win .zh, body.no-zh .sh-card > .zh:first-child, body.no-zh .story-nav .zh{display:none}
.fs-btn{display:flex; align-items:center; gap:6px; margin:0; border:0; border-radius:99px; padding:8px 16px 8px 10px; background:var(--card); box-shadow:0 4px 0 rgba(43,45,66,.15)}
.fs-btn[hidden]{display:none}
.fs-btn .fs-ico{width:30px; display:block}
.fs-btn .fs-label{color:var(--ink); font-weight:700}
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:40; max-width:90%; background:#2B2D42; color:#fff; padding:12px 18px; border-radius:16px; font-size:.95rem; line-height:1.5; opacity:0; pointer-events:none; transition:opacity .3s}
.toast.show{opacity:1}
.ltr{font-family:'Andika','Century Gothic','Trebuchet MS',sans-serif; font-weight:700; line-height:1}
.ltr-card{display:grid !important; place-items:center; aspect-ratio:1}
.ltr-card .ltr{font-size:clamp(3.4rem,15vw,5rem); color:#118AB2}
.cols4 .ltr-card .ltr{font-size:clamp(3rem,13vw,4.4rem)}
.ltr-big .ltr{font-size:7rem; color:#EF476F}
.letter .ltr{font-size:inherit}
.letter small .ltr{color:#118AB2}
.mcard .back .ltr{font-size:clamp(2.4rem,11vw,3.6rem); color:#118AB2}
.seq-ltr{display:flex; gap:10px; align-items:center; justify-content:center}
.seq-ltr .ltr, .seq-ltr .hole{font-size:clamp(3rem,13vw,4.4rem); width:1.2em; text-align:center}
.seq-ltr .hole{font-family:var(--en); font-weight:800; color:#EF476F; border:4px dashed #EF476F; border-radius:16px; line-height:1.15}
.abc-groups{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:0 0 14px}
.abc-groups .zh{margin-right:4px}
.abc-groups button{border:2px solid var(--ink); background:var(--card); border-radius:99px; padding:6px 14px; font-weight:800}
.abc-groups button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.abc-board{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media (min-width:640px){.abc-board{grid-template-columns:repeat(4,1fr)}}
.abc-board[hidden],.flash[hidden],.chant[hidden]{display:none}
.abc-tile{border:0; background:var(--card); border-radius:22px; padding:10px 4px; display:grid; place-items:center; aspect-ratio:1; box-shadow:0 5px 0 rgba(43,45,66,.15)}
.abc-tile .ltr{font-size:clamp(3rem,13vw,4.4rem); color:#EF476F} .abc-tile .ltr small{font-size:.75em; color:#118AB2; margin-left:3px}
.abc-tile.on{background:#FFF1C2; box-shadow:0 0 0 5px var(--yellow); animation:pop .5s}
.flash{touch-action:pan-y; user-select:none; -webkit-user-select:none}
.flash-card{background:var(--card); border-radius:30px; padding:18px 14px 20px; text-align:center; box-shadow:0 6px 0 rgba(43,45,66,.15)}
.flash-ltr{display:flex; justify-content:center; align-items:baseline; gap:.12em}
.flash-ltr .ltr{font-size:clamp(7rem,34vw,12rem)}
.flash-ltr .up{color:#EF476F} .flash-ltr .low{color:#118AB2}
.flash-ltr.found{animation:pop .6s}
.flash-pic{width:clamp(110px,34vw,170px); margin:4px auto 6px}
.flash-word{font-family:'Andika','Century Gothic',sans-serif; font-size:clamp(2rem,9vw,3rem); font-weight:700}
.flash-word b{color:#EF476F}
.flash-nav{display:flex; justify-content:space-between; align-items:center; margin:16px 4px 0}
.flash-nav .play{width:76px; height:76px; background:var(--green)}
.flash-back{display:flex; align-items:center; gap:8px; margin:16px auto 0; border:0; border-radius:99px; background:var(--card); padding:8px 16px; font-weight:800; box-shadow:0 4px 0 rgba(43,45,66,.15)}
.flash-back .ic{width:34px}
.chant{display:flex; align-items:center; gap:10px; margin:0 auto 12px; border:0; border-radius:99px; background:var(--yellow); color:#2B2D42; padding:8px 18px; font-weight:800; box-shadow:0 4px 0 rgba(43,45,66,.2)}
.chant .ic{width:28px}
.diff{display:flex; justify-content:center; gap:10px; margin:0 0 16px}
.diff button{display:flex; align-items:center; gap:8px; border:3px solid var(--ink); background:var(--card); border-radius:99px; padding:8px 18px; font-family:var(--zh); font-weight:700; font-size:1rem}
.diff button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.d-stars{display:flex; gap:1px} .d-stars i{display:block; width:20px}
.review{display:flex; align-items:center; gap:14px; width:100%; margin-top:14px; border:0; border-radius:24px; padding:14px 18px; text-align:left; color:#2B2D42;
  background:linear-gradient(90deg,#FFD166,#FFB38A); box-shadow:0 6px 0 rgba(43,45,66,.25)}
.review .ico{width:64px; height:64px; background:#fff; border-radius:50%; padding:8px; flex:none}
.review b{display:block; font-size:1.3rem} .review .zh{color:#3d4058; font-size:.88rem}
.hard .card .word{display:none}
.progress.many span{width:clamp(20px,5.5vw,30px)}
.shadow{position:fixed; inset:0; z-index:18; display:none; align-items:flex-end; justify-content:center; background:rgba(31,35,64,.35); padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.shadow.show{display:flex}
.sh-card{background:var(--card); border-radius:28px; padding:18px; width:100%; max-width:520px; text-align:center; animation:popIn .4s; box-shadow:0 8px 0 rgba(43,45,66,.2)}
.sh-text{font-size:clamp(1.5rem,6vw,2.2rem); font-weight:800; margin:6px 0 12px; line-height:1.2}
.sh-row{display:flex; gap:10px; justify-content:center}
.sh-btn{display:flex; flex-direction:column; align-items:center; gap:4px; border:0; background:var(--bg); border-radius:20px; padding:10px 16px; font-family:var(--zh); font-weight:700; min-width:110px}
.sh-btn > span{width:48px; display:block}
.sh-btn.mic.rec{background:#FFE1E8; animation:pop .8s infinite}
.sh-fb{min-height:1.4em; margin:10px 0 6px}
.sh-next{border:0; border-radius:99px; padding:12px 28px; background:var(--green); color:#2B2D42; font-weight:800; font-family:var(--zh); font-size:1.1rem; box-shadow:0 4px 0 rgba(43,45,66,.2)}
.cats{display:grid; gap:14px; grid-template-columns:1fr 1fr}
.cat{display:flex; flex-direction:column; align-items:center; gap:4px; border:0; border-radius:28px 28px 28px 10px; padding:18px 10px 14px; color:#2B2D42;
  box-shadow:0 6px 0 rgba(43,45,66,.25); animation:popIn .5s backwards; transition:transform .12s}
.cat:active{transform:translateY(4px); box-shadow:0 2px 0 rgba(43,45,66,.25)}
.cat .ico{background:#fff; border-radius:50%; width:88px; height:88px; padding:12px; margin-bottom:6px}
.cat:hover .ico{animation:wiggle .5s}
.cat b{font-size:1.3rem; line-height:1.1}
.cat .zh{color:#3d4058; font-size:.95rem}
.cat .prog{margin-top:6px; font-family:var(--zh); font-size:.78rem; background:rgba(255,255,255,.7); border-radius:99px; padding:3px 10px}
.cat-title{margin:0; text-align:center; font-size:1.5rem; line-height:1.1}
.cat-title small{display:block; font-family:var(--zh); font-size:.85rem; font-weight:500; color:var(--soft)}
.room .done{position:absolute; top:8px; right:8px; width:28px}
.like-scene{display:flex; align-items:center; justify-content:center; gap:10px}
.like-scene > span{width:clamp(110px,30vw,150px); display:block}
.letter{font-size:6rem; font-weight:800; line-height:1; color:#EF476F}
.letter small{font-size:.6em; color:#118AB2; margin-left:6px}
.sea .kid{display:block; background:#E8F7FF; border-radius:50%}
.act-arrowup{animation:actUp 1s ease 2} .act-arrowdown{animation:actDown 1s ease 2} .act-clap,.act-wave{animation:wiggle .35s 6}
.act-spin{animation:actSpin 1s ease 2} .act-jump{animation:jump .6s 3} .act-shoe{animation:shake .3s 6}
@keyframes actUp{50%{transform:translateY(-14px) scale(1.05)}}
@keyframes actDown{50%{transform:translateY(10px) scale(1,.85)}}
@keyframes actSpin{to{transform:rotateY(360deg)}}
.ic .tl-r{animation:sitFlash 1.2s steps(2) infinite}
.room{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  border:0; border-radius:24px 24px 24px 8px; padding:14px 10px 12px; color:#2B2D42;
  box-shadow:0 5px 0 rgba(43,45,66,.25); transition:transform .12s; animation:popIn .5s backwards}
.room:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(43,45,66,.25)}
.room .ico{background:#fff; border-radius:50%; width:68px; height:68px; display:grid; place-items:center; padding:9px; margin-bottom:4px}
.room:hover .ico{animation:wiggle .5s}
.room b{display:block; font-size:1.12rem; line-height:1.1}
.room .zh{color:#3d4058; font-size:.78rem; line-height:1.35}
.parent{margin:24px auto 0; max-width:520px; font-size:.92rem; background:var(--card); border-radius:20px; padding:4px 16px; box-shadow:0 4px 0 rgba(43,45,66,.1)}
.parent summary{cursor:pointer; padding:10px 0; font-weight:700; color:var(--ink); text-align:center}
.parent[open] summary{border-bottom:2px dashed rgba(92,96,122,.25); margin-bottom:8px}
.set-row{display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; margin:8px 0}
.set-row > span,.set-row > label{width:44px; font-weight:700; color:var(--ink)}
.parent select{flex:1; min-width:0; font:inherit; color:var(--ink); background:var(--bg); border:2px solid var(--soft); border-radius:12px; padding:8px 10px}
.parent .preview{display:block; width:100%; margin:12px 0 4px; border:0; border-radius:99px; padding:10px; font-weight:700; background:var(--yellow); color:#2B2D42; box-shadow:0 3px 0 rgba(43,45,66,.2)}
.parent .tip{font-size:.82rem; line-height:1.6; margin:10px 0 12px}
.parent button{border:2px solid var(--soft); background:transparent; border-radius:99px; padding:6px 14px; margin:4px}
.parent button[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}

/* ---------- 遊戲頁 ---------- */
.bar{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px}
.round-btn{width:56px; height:56px; border-radius:50%; border:0; background:var(--card); padding:10px; box-shadow:0 4px 0 rgba(43,45,66,.2)}
.progress{display:flex; gap:2px}
.progress span{width:34px}
.progress span{filter:grayscale(1) opacity(.3); transition:filter .3s, transform .3s}
.progress span.on{filter:none; animation:pop .5s}
.prompt-row{display:grid; grid-template-columns:78px 1fr; align-items:center; gap:10px; margin-bottom:14px}
.prompt{position:relative; background:var(--card); border-radius:24px; padding:12px 16px; text-align:center; box-shadow:0 4px 0 rgba(43,45,66,.12)}
.prompt::before{content:""; position:absolute; left:-12px; top:50%; margin-top:-10px; border:10px solid transparent; border-right:14px solid var(--card); border-left:0}
.prompt .en{font-size:clamp(1.45rem,5.5vw,2.2rem); font-weight:800; line-height:1.15}
.prompt .zh{font-size:.88rem; margin-top:4px}
.prompt.changed .en{animation:pop .45s}
.enter{animation:popIn .45s backwards}

/* 關卡一：教室 */
.scene{position:relative; width:100%; aspect-ratio:4/3; container-type:inline-size; border-radius:24px; overflow:hidden;
  background:linear-gradient(var(--sky) 0 72%, var(--wood) 72%); box-shadow:inset 0 0 0 6px #fff}
.scene .window{position:absolute; left:6%; top:8%; width:22%; height:24%; border-radius:10px; overflow:hidden;
  background:linear-gradient(90deg,transparent 48%,#8ECAE6 48% 52%,transparent 52%),linear-gradient(transparent 48%,#8ECAE6 48% 52%,transparent 52%),#E8F7FF;
  box-shadow:inset 0 0 0 1.2cqw #8ECAE6}
.scene .window i{position:absolute; top:20%; width:6cqw; height:2cqw; background:#fff; border-radius:2cqw; animation:drift 12s linear infinite; left:0}
.scene .abc{position:absolute; right:6%; top:9%; font-size:5cqw; font-weight:800; letter-spacing:1cqw}
.scene .abc b{display:inline-block; font-weight:800; animation:bob 2s ease-in-out infinite}
.scene .abc b:nth-child(1){color:var(--red)}
.scene .abc b:nth-child(2){color:var(--blue); animation-delay:.3s}
.scene .abc b:nth-child(3){color:var(--green); animation-delay:.6s}
.f{position:absolute; border-radius:1cqw; border:.5cqw solid #2B2D42}
.scene .window{border:.5cqw solid #2B2D42}
.table-top{left:8%; width:40%; bottom:38%; height:4%; background:var(--blue)}
.table-leg{bottom:6%; height:32%; width:3%; background:#0D6E8E}
.seat{left:56%; width:18%; bottom:25%; height:3.5%; background:var(--red)}
.chair-back{left:70.5%; width:3.5%; bottom:25%; height:24%; background:var(--red)}
.chair-leg{bottom:6%; height:19%; width:2.5%; background:#C2305A}
.box{left:80%; width:16%; bottom:6%; height:15%; background:#E9A23B; z-index:3; pointer-events:none; box-shadow:inset 0 1.2cqw 0 #C9822A}
.item{position:absolute; transform:translateX(-50%); --tx:-50%; width:12cqw; line-height:0; background:none; border:0; padding:0; z-index:2; border-radius:2cqw; animation:dropIn .6s backwards}
.item.found{animation:hop .8s ease}
.item.nope{animation:shake .4s}

/* 卡片共用 */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.cards.cols2,.cards.cols4{grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.cards.cols4{grid-template-columns:repeat(4,1fr)}}
.num{font-size:clamp(3.2rem,13vw,4.6rem); font-weight:800; line-height:1}
.pair-fig{display:flex; align-items:flex-end; justify-content:center; height:clamp(110px,30vw,170px); width:clamp(110px,30vw,170px)}
.pair-fig > span{display:block}
.count-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:440px; padding:6px}
.count-grid > span{width:clamp(48px,13vw,66px); display:block}
.body-wrap{display:grid; place-items:center; background:var(--sky); border-radius:24px; padding:14px}
.body-fig{position:relative; width:min(270px,64vw); aspect-ratio:2/3}
.hot{position:absolute; transform:translate(-50%,-50%); border:0; background:transparent; border-radius:50%; padding:0}
.hot.found{background:rgba(6,214,160,.3); box-shadow:0 0 0 4px #06D6A0; animation:ringPulse .8s ease}
.hot.nope{background:rgba(239,71,111,.22); animation:shake .4s}
@keyframes ringPulse{0%{box-shadow:0 0 0 0 #06D6A0}50%{box-shadow:0 0 0 12px rgba(6,214,160,.4)}100%{box-shadow:0 0 0 4px #06D6A0}}
.ic .clock-m{transform-box:view-box; transform-origin:50px 54px; animation:spin 3s linear infinite}
.ic .clock-h{transform-box:view-box; transform-origin:50px 54px; animation:spin 36s linear infinite}
.card{border:0; background:var(--card); border-radius:24px; padding:14px 6px; box-shadow:0 5px 0 rgba(43,45,66,.18); display:grid; place-items:center; gap:4px}
.card .kid{width:clamp(80px,24vw,140px); position:relative}
.cols4 .card .kid{width:clamp(70px,30vw,120px)}
.card .act{position:absolute; right:-14%; bottom:-6%; width:56%; background:#FFF1C2; border:3px solid #2B2D42; border-radius:50%; padding:6%; animation:wiggle 1.4s ease-in-out infinite}
.card .word{font-size:1.2rem; font-weight:800}
.card.found,.answer.found,.food.found{animation:pop .6s ease; box-shadow:0 0 0 5px var(--green),0 5px 0 rgba(43,45,66,.18)}
.card.nope,.answer.nope,.food.nope{animation:shake .4s}

/* 關卡：點心時間 */
.snack{display:grid; gap:14px}
.table-area{position:relative; background:var(--sky); border-radius:24px; padding:16px 12px 0; display:grid; grid-template-columns:auto 1fr; align-items:end; gap:10px; overflow:hidden}
.friend-wrap{position:relative; text-align:center}
.friend{width:clamp(110px,30vw,170px); display:inline-block; animation:bob 2s ease-in-out infinite; transform-origin:50% 100%}
.friend.chew{animation:chew .25s 4}
.plate{width:110%; margin:0 -5% 0; height:20px; background:#fff; border-radius:50%; box-shadow:0 4px 0 rgba(43,45,66,.15); position:relative; top:-6px}
.table-edge{grid-column:1/-1; height:22px; background:var(--wood); margin:0 -12px}
.friend-bubble{align-self:center; margin-bottom:40px; background:var(--card); border-radius:24px 24px 24px 4px; padding:12px 16px; font-size:clamp(1.2rem,5vw,1.7rem); font-weight:800; box-shadow:0 4px 0 rgba(43,45,66,.12)}
.heart{position:absolute; left:50%; top:20%; width:30px; pointer-events:none; animation:heartUp 1.3s ease-out forwards}
.tray{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; background:#F6D6A8; padding:12px; border-radius:24px}
.food{border:0; background:#fff; border-radius:20px; padding:10px; line-height:0; box-shadow:0 4px 0 rgba(43,45,66,.15)}

/* 關卡：心情 */
.situation{display:grid; place-items:center; align-content:center; background:var(--card); border-radius:24px; min-height:170px; padding:12px; margin-bottom:14px; overflow:hidden; box-shadow:0 4px 0 rgba(43,45,66,.12)}
.sit-icon{width:130px}
.sit-line{font-weight:800; font-size:1.25rem; margin-top:-6px; text-align:center; padding:0 10px}
.a-shake{animation:sitShake 1.2s ease-in-out infinite}
.a-fall{animation:sitFall 1.8s ease-in infinite}
.a-float{animation:sitFloat 2.4s ease-in-out infinite}
.a-flash{animation:sitFlash 1.4s steps(2) infinite}

/* 關卡：對話 */
.talk-scene{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; margin-bottom:16px}
.speaker{width:clamp(100px,28vw,150px); animation:bob 1.8s ease-in-out infinite}
.bubble{background:var(--card); border-radius:24px 24px 24px 4px; padding:14px 18px; font-size:clamp(1.4rem,5.5vw,2rem); font-weight:800; box-shadow:0 4px 0 rgba(43,45,66,.12)}
.answers{display:grid; gap:12px}
.answer{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:14px; text-align:left; border:0; border-radius:24px; padding:14px 18px;
  background:var(--card); font-size:clamp(1.3rem,5vw,1.8rem); font-weight:800; box-shadow:0 5px 0 rgba(43,45,66,.18)}
.answer .e{width:60px}

/* 完成畫面 */
.overlay{position:fixed; inset:0; background:rgba(31,35,64,.6); display:none; place-items:center; z-index:20; padding:20px}
.overlay.show{display:grid}
.win{background:var(--yellow); color:#2B2D42; border-radius:36px; padding:24px; text-align:center; max-width:360px; width:100%; animation:popIn .5s}
.win .mascot{width:120px; margin:0 auto}
.win .big{width:90px; display:inline-block; animation:spinIn 1s ease}
.win h2{font-size:2.3rem; margin:4px 0 2px}
.win .zh{color:#3d4058}
.win .row{display:flex; gap:10px; justify-content:center; margin-top:16px}
.win button{border:0; border-radius:99px; padding:12px 20px; font-weight:800; font-size:1.2rem; background:#fff; box-shadow:0 4px 0 rgba(43,45,66,.25)}

/* ---------- 動畫 ---------- */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-40deg)}}
@keyframes flapL{to{transform:rotate(35deg)}}
@keyframes flapR{to{transform:rotate(-35deg)}}
@keyframes jump{0%,100%{transform:none}30%{transform:translateY(-22px) scale(.95,1.05)}60%{transform:translateY(0) scale(1.1,.9)}80%{transform:translateY(-5px)}}
@keyframes tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-12deg)}70%{transform:rotate(8deg)}}
@keyframes talk{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{from{left:-80px}to{left:110%}}
@keyframes bus{0%{left:100%}45%,100%{left:-30%}}
@keyframes popIn{from{transform:scale(.6); opacity:0}70%{transform:scale(1.06)}to{transform:none; opacity:1}}
@keyframes pop{0%{transform:translateX(var(--tx,0)) scale(1)}40%{transform:translateX(var(--tx,0)) scale(1.3)}100%{transform:translateX(var(--tx,0)) scale(1)}}
@keyframes hop{0%,100%{transform:translateX(-50%)}25%{transform:translateX(-50%) translateY(-6cqw) rotate(-10deg) scale(1.2)}50%{transform:translateX(-50%) translateY(0) scale(1.15,.85)}70%{transform:translateX(-50%) translateY(-3cqw) rotate(8deg)}}
@keyframes dropIn{from{translate:0 -45cqw; opacity:0}70%{translate:0 1.5cqw; opacity:1}to{translate:0 0}}
@keyframes shake{0%,100%{translate:0}25%{translate:-8px}75%{translate:8px}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
@keyframes chew{0%,100%{transform:scale(1)}50%{transform:scale(1.08,.9)}}
@keyframes heartUp{from{transform:translate(-50%,0) scale(.5); opacity:1}to{transform:translate(calc(-50% + var(--hx,0px)),-90px) scale(1.2); opacity:0}}
@keyframes sitShake{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-12deg)}80%{transform:rotate(12deg)}90%{transform:rotate(-6deg)}}
@keyframes sitFall{0%{transform:translateY(-40px) rotate(0); opacity:0}15%{opacity:1}70%{transform:translateY(30px) rotate(25deg)}80%{transform:translateY(24px) rotate(25deg) scale(1.15,.8)}100%{transform:translateY(30px) rotate(25deg); opacity:.8}}
@keyframes sitFloat{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}
@keyframes sitFlash{0%{filter:brightness(1)}50%{filter:brightness(1.8) drop-shadow(0 0 14px #FFE066)}}
@keyframes spinIn{from{transform:rotate(-200deg) scale(.2)}to{transform:none}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important; transition:none!important}}
@media (max-width:420px){.cards{gap:8px}.room .ico{width:64px;height:64px;font-size:2.6rem}.prompt-row{grid-template-columns:62px 1fr}}