/* ============ v2：場景、轉場、句意動畫、逐字亮起、Sunny 表情、貼紙簿 ============ */
:root{
  --sc-op:.6; --sc-sky:#CDEBFF; --sc-grass:#8BD17C; --sc-wood:#F2C27B; --sc-sea:#7CC8EE; --sc-sand:#FBE3A6;
  --hl:#EF476F; --book:#FFFDF5; --book-line:#F0E2B8;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --sc-op:.32; --book:#2C3158; --book-line:#454B7A; color-scheme:dark }
}
:root[data-theme="dark"]{ --sc-op:.32; --book:#2C3158; --book-line:#454B7A; color-scheme:dark }

/* ---- 5. 換頁轉場 ---- */
.screen{position:relative; z-index:1}
body[data-nav="fwd"] .screen.active{animation:scrFwd .38s cubic-bezier(.2,.8,.3,1)}
body[data-nav="back"] .screen.active{animation:scrBack .38s cubic-bezier(.2,.8,.3,1)}
@keyframes scrFwd{from{opacity:0; transform:translateX(36px) scale(.98)}}
@keyframes scrBack{from{opacity:0; transform:translateX(-36px) scale(.98)}}

/* ---- 4. 主題場景（固定在畫面上下緣，作答時靜止） ---- */
#scenery{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:var(--sc-op); transition:opacity .4s}
#scenery[hidden]{display:none}
#scenery > *{position:absolute}
#scenery *{animation-play-state:paused}
body.scene-live #scenery *{animation-play-state:running}
.sc-top{left:0; right:0; top:0; height:150px}
.sc-ground{left:0; right:0; bottom:0; height:70px}
/* 學校 */
[data-sc="school"] .sc-top{background:linear-gradient(var(--sc-sky),transparent)}
[data-sc="school"] .sc-ground{background:repeating-linear-gradient(90deg,var(--sc-wood) 0 58px,#E3AE62 58px 62px); border-top:6px solid #D99A4E}
.sc-clock{bottom:96px; right:16px; width:46px; height:46px; border-radius:50%; background:#fff; border:5px solid #EF476F}
.sc-clock::before,.sc-clock::after{content:""; position:absolute; left:50%; top:50%; width:3px; background:#2B2D42; border-radius:2px; transform-origin:50% 100%}
.sc-clock::before{height:13px; margin:-13px 0 0 -1.5px; animation:clockSpin 2.4s linear infinite; animation-play-state:inherit}
.sc-clock::after{height:9px; margin:-9px 0 0 -1.5px; transform:rotate(90deg)}
@keyframes clockSpin{to{transform:rotate(360deg)}}
/* 我和家人 */
[data-sc="me"] .sc-top{background:radial-gradient(circle,#FF8FB1 3px,transparent 4px) 0 0/26px 26px; -webkit-mask:linear-gradient(#000,transparent); mask:linear-gradient(#000,transparent)}
[data-sc="me"] .sc-ground{left:8%; right:8%; bottom:-24px; height:84px; border-radius:50%; background:repeating-radial-gradient(ellipse at center,#FFB38A 0 12px,#FFD166 12px 24px)}
.sc-frame{bottom:96px; left:16px; width:52px; height:44px; background:#fff; border:5px solid #B9A8FF; border-radius:6px}
.sc-frame::after{content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; background:#EF476F; transform:rotate(45deg); border-radius:4px 0}
/* 自然 / 公園 */
[data-sc="nature"] .sc-top,[data-sc="farm"] .sc-top,[data-sc="bugs"] .sc-top{background:linear-gradient(var(--sc-sky),transparent)}
[data-sc="nature"] .sc-ground{bottom:-60px; left:-10%; right:-10%; height:130px; border-radius:50% 50% 0 0; background:var(--sc-grass)}
.sc-cloud{position:absolute; bottom:150px; width:70px; height:24px; background:#fff; border-radius:20px; animation:scDrift 6s ease-in-out infinite alternate}
.sc-cloud::before{content:""; position:absolute; width:34px; height:34px; left:12px; top:-16px; background:#fff; border-radius:50%}
.sc-cloud.c-a{left:6%} .sc-cloud.c-b{right:10%; bottom:110px; transform:scale(.75)}
@keyframes scDrift{to{translate:40px 0}}
.sc-flower{bottom:26px; width:14px; height:14px; border-radius:50%; background:#FFD166;
  box-shadow:0 -11px 0 #FF8FB1,0 11px 0 #FF8FB1,11px 0 0 #FF8FB1,-11px 0 0 #FF8FB1; animation:scSway 1.2s ease-in-out infinite alternate}
.sc-flower.f-a{left:8%} .sc-flower.f-b{left:22%; bottom:18px} .sc-flower.f-c{right:12%}
@keyframes scSway{from{rotate:-12deg}to{rotate:12deg}}
/* 海洋 */
[data-sc="ocean"] .sc-top{background:linear-gradient(var(--sc-sea),transparent)}
[data-sc="ocean"] .sc-ground{height:64px; background:var(--sc-sand)}
[data-sc="ocean"] .sc-ground::before{content:""; position:absolute; left:0; right:0; top:-14px; height:16px;
  background:radial-gradient(circle at 20px 0,transparent 15px,var(--sc-sand) 16px) 0 0/40px 16px repeat-x}
.sc-bubble{bottom:70px; width:16px; height:16px; border-radius:50%; border:3px solid #fff; animation:scRise 2.4s ease-in infinite}
.sc-bubble.b-a{left:10%} .sc-bubble.b-b{left:16%; animation-delay:-.8s; width:10px; height:10px} .sc-bubble.b-c{right:12%; animation-delay:-1.4s}
@keyframes scRise{from{translate:0 0; opacity:1}to{translate:8px -60vh; opacity:0}}
.sc-weed{bottom:50px; width:12px; height:60px; border-radius:12px 12px 0 0; background:#06D6A0; transform-origin:50% 100%; animation:scSway 1.4s ease-in-out infinite alternate}
.sc-weed.w-a{left:4%} .sc-weed.w-b{right:5%; height:44px}
/* 農場 */
[data-sc="farm"] .sc-ground{height:56px; background:var(--sc-grass)}
[data-sc="farm"] .sc-ground::before{content:""; position:absolute; left:0; right:0; top:-34px; height:36px;
  background:linear-gradient(transparent 8px,#fff 8px 14px,transparent 14px 22px,#fff 22px 28px,transparent 28px),
             repeating-linear-gradient(90deg,#fff 0 10px,transparent 10px 70px)}
.sc-barn{right:14px; bottom:56px; width:64px; height:50px; background:#EF476F; border-radius:4px}
.sc-barn::before{content:""; position:absolute; left:-8px; right:-8px; top:-28px; height:30px; background:#B5304F; clip-path:polygon(50% 0,100% 100%,0 100%)}
.sc-barn::after{content:""; position:absolute; left:22px; bottom:0; width:20px; height:28px; background:#fff; border-radius:3px 3px 0 0}
/* 昆蟲 */
[data-sc="bugs"] .sc-ground{height:44px; background:var(--sc-grass)}
[data-sc="bugs"] .sc-ground::before{content:""; position:absolute; left:0; right:0; top:-22px; height:24px;
  background:linear-gradient(135deg,transparent 50%,var(--sc-grass) 50%) 0 0/16px 24px,linear-gradient(225deg,transparent 50%,var(--sc-grass) 50%) 0 0/16px 24px; background-repeat:repeat-x}
.sc-bug{bottom:54px; width:18px; height:14px; border-radius:50% 50% 40% 40%; background:radial-gradient(circle at 30% 50%,#2B2D42 2px,transparent 3px),radial-gradient(circle at 70% 60%,#2B2D42 2px,transparent 3px),#EF476F; animation:scCrawl 2.6s ease-in-out infinite alternate}
.sc-bug.g-a{left:12%} .sc-bug.g-b{right:16%; bottom:48px}
@keyframes scCrawl{to{translate:40px 0}}
/* 天氣 */
[data-sc="weather"] .sc-top{background:linear-gradient(#B8C7D9,transparent)}
[data-sc="weather"] .sc-ground{height:40px; background:var(--sc-grass)}
.sc-drop{top:42%; width:6px; height:14px; border-radius:50% 50% 50% 50% / 70% 70% 40% 40%; background:#118AB2; opacity:0; animation:scFall 1s linear infinite}
.sc-drop.d-a{left:12%} .sc-drop.d-b{left:20%; animation-delay:-.4s} .sc-drop.d-c{right:14%; animation-delay:-.7s} .sc-drop.d-d{right:24%; animation-delay:-.2s}
@keyframes scFall{0%{translate:0 0; opacity:.9}100%{translate:-6px 45vh; opacity:0}}
/* 玩一玩 */
[data-sc="play"] .sc-top{background:radial-gradient(circle,#B9A8FF 3px,transparent 4px) 0 0/30px 30px,radial-gradient(circle,#FFD166 3px,transparent 4px) 15px 15px/30px 30px; -webkit-mask:linear-gradient(#000,transparent); mask:linear-gradient(#000,transparent)}
.sc-blocks{left:0; right:0; bottom:0; height:44px; display:flex; justify-content:space-between; padding:0 10px}
.sc-blocks i{position:relative; width:40px; height:40px; border-radius:8px; animation:scHop .5s ease infinite alternate}
.sc-blocks i:nth-child(1){background:#EF476F} .sc-blocks i:nth-child(2){background:#FFD166; animation-delay:-.25s} .sc-blocks i:nth-child(3){background:#06D6A0} .sc-blocks i:nth-child(4){background:#118AB2; animation-delay:-.25s} .sc-blocks i:nth-child(5){background:#B9A8FF}
@keyframes scHop{to{translate:0 -10px}}
/* ABC */
[data-sc="abc"] .sc-top{background:linear-gradient(#FFE1D0,transparent)}
.sc-letters{left:0; right:0; bottom:0; height:48px; display:flex; justify-content:space-around}
.sc-letters b{position:relative; width:44px; height:44px; display:grid; place-items:center; border-radius:10px; background:#fff; border:3px solid #2B2D42;
  font:700 1.6rem 'Andika','Century Gothic',sans-serif; color:#EF476F; animation:scHop .5s ease infinite alternate}
.sc-letters b:nth-child(even){color:#118AB2; animation-delay:-.25s}
/* 遊戲與故事、複習、貼紙簿 */
[data-sc="games"] .sc-top,[data-sc="review"] .sc-top,[data-sc="book"] .sc-top{background:radial-gradient(circle,#FFD166 2.5px,transparent 3.5px) 0 0/34px 34px,radial-gradient(circle,#FF8FB1 2px,transparent 3px) 17px 12px/34px 34px; -webkit-mask:linear-gradient(#000,transparent); mask:linear-gradient(#000,transparent)}
[data-sc="games"] .sc-ground,[data-sc="review"] .sc-ground,[data-sc="book"] .sc-ground{height:30px; background:repeating-linear-gradient(90deg,#9ED8F7 0 30px,#B9A8FF 30px 60px,#FFD166 60px 90px)}
.sc-star{bottom:70px; width:22px; height:22px; background:#FFD166; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); animation:scTwinkle .6s ease-in-out infinite alternate}
.sc-star.s-a{left:10%} .sc-star.s-b{right:12%; bottom:110px; animation-delay:-.3s}
@keyframes scTwinkle{to{scale:1.5; rotate:30deg}}

/* ---- 1. 句意演出 ---- */
.mean{transform-origin:50% 85%}
.mean-jump{animation:mJump .55s ease 3}
.mean-run{animation:mRun .25s ease-in-out 7}
.mean-swim{animation:mSwim .8s ease-in-out 2}
.mean-fly{animation:mFly 1.8s ease-in-out}
.mean-sleep{animation:mSleep 1.2s ease-in-out 2}
.mean-eat{animation:chew .25s 7}
.mean-dance{animation:mDance .4s ease-in-out 5}
.mean-climb{animation:mClimb 1.6s steps(4,end)}
.mean-spin{animation:actSpin .9s ease 2}
.mean-wave{animation:wiggle .3s 6}
.mean-happy{animation:mJump .5s ease 3}
.mean-sad{animation:mSad 1.8s ease}
.mean-angry{animation:mAngry .12s linear 12; filter:drop-shadow(0 0 10px rgba(239,71,111,.85))}
.mean-scared{animation:mTremble .08s linear 18}
.mean-surprised{animation:mSurprise .9s ease}
.mean-hot{animation:mWobble .5s ease-in-out 3; filter:drop-shadow(0 0 12px rgba(255,140,60,.9))}
.mean-cold{animation:mTremble .07s linear 20; filter:drop-shadow(0 0 10px rgba(17,138,178,.9)) saturate(.6)}
.mean-big{animation:mBig 1.8s ease}
.mean-small{animation:mSmall 1.8s ease}
.mean-tall{animation:mTall 1.8s ease}
.mean-short{animation:mShort 1.8s ease}
.mean-long{animation:mLong 1.8s ease}
.mean-up{animation:actUp .9s ease 2}
.mean-down{animation:actDown .9s ease 2}
.mean-fast{animation:mRun .16s linear 10}
.mean-slow{animation:mSlow 2s ease-in-out}
.mean-loud{animation:mLoud .2s ease 6}
.mean-quiet{animation:mQuiet 1.8s ease}
.mean-sit{animation:mSit 1.6s ease}
.mean-stand{animation:mStand 1.6s ease}
.mean-glow{animation:mGlow 1.6s ease}
.mean-sway{animation:mSway .5s ease-in-out 4}
@keyframes mJump{0%,100%{transform:none}35%{transform:translateY(-26px) scale(.94,1.06)}80%{transform:scale(1.08,.9)}}
@keyframes mRun{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px) rotate(-4deg)}75%{transform:translateX(10px) rotate(4deg)}}
@keyframes mSwim{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-14px,-6px) rotate(-10deg)}75%{transform:translate(14px,6px) rotate(10deg)}}
@keyframes mFly{0%,100%{transform:none}30%{transform:translate(-10px,-30px) rotate(-8deg)}65%{transform:translate(12px,-22px) rotate(8deg)}}
@keyframes mSleep{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(-8deg) scale(1.04,.96)}}
@keyframes mDance{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) translateY(-6px)}75%{transform:rotate(14deg) translateY(-6px)}}
@keyframes mClimb{0%{transform:none}100%{transform:translateY(-28px)}}
@keyframes mSad{0%,100%{transform:none}30%,75%{transform:translateY(8px) scale(1,.9) rotate(-4deg)}}
@keyframes mAngry{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px) rotate(-3deg)}}
@keyframes mTremble{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes mSurprise{0%{transform:none}25%{transform:scale(1.35) translateY(-10px)}55%{transform:scale(.95)}100%{transform:none}}
@keyframes mWobble{0%,100%{transform:rotate(0)}50%{transform:rotate(6deg) scale(1.03)}}
@keyframes mBig{0%,100%{transform:none}30%,75%{transform:scale(1.45)}}
@keyframes mSmall{0%,100%{transform:none}30%,75%{transform:scale(.55)}}
@keyframes mTall{0%,100%{transform:none}30%,75%{transform:scaleY(1.4)}}
@keyframes mShort{0%,100%{transform:none}30%,75%{transform:scaleY(.65)}}
@keyframes mLong{0%,100%{transform:none}30%,75%{transform:scaleX(1.45)}}
@keyframes mSlow{0%,100%{transform:none}50%{transform:translateX(18px)}}
@keyframes mLoud{0%,100%{transform:none}50%{transform:scale(1.18)}}
@keyframes mQuiet{0%,100%{transform:none; opacity:1}30%,75%{transform:scale(.8); opacity:.6}}
@keyframes mSit{0%,100%{transform:none}30%,75%{transform:scale(1.06,.78)}}
@keyframes mStand{0%,100%{transform:none}30%,75%{transform:scale(.94,1.18) translateY(-6px)}}
@keyframes mGlow{0%,100%{filter:none}40%,70%{filter:brightness(1.25) drop-shadow(0 0 16px #FFD166)}}
@keyframes mSway{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg) translateX(-6px)}}
/* 跟著動作出現的小特效 */
.mfx{position:fixed; z-index:26; pointer-events:none; font-family:var(--en); font-weight:800; line-height:1}
.mfx-z{color:#5C7CFA; font-size:1.6rem; animation:mfxUp 1.8s ease-out forwards}
.mfx-note{color:#B9A8FF; font-size:1.7rem; animation:mfxUp 1.6s ease-out forwards}
.mfx-tear{width:12px; height:16px; border-radius:50% 50% 50% 50% / 65% 65% 40% 40%; background:#4CC9F0; animation:mfxDrop 1.2s ease-in forwards}
.mfx-steam{width:6px; height:26px; border-radius:6px; border-left:4px solid #FFB38A; animation:mfxUp 1.4s ease-out forwards}
.mfx-dot{width:9px; height:9px; border-radius:50%; background:#9ED8F7; animation:mfxDrop 1.4s ease-in forwards}
.mfx-rain{width:6px; height:14px; border-radius:50% 50% 50% 50% / 70% 70% 40% 40%; background:#118AB2; animation:mfxDrop .9s linear forwards}
.mfx-line{height:5px; width:34px; border-radius:5px; background:#5C607A; opacity:.6; animation:mfxSpeed .6s ease-out 2 forwards}
.mfx-tag{display:flex; flex-direction:column; align-items:center; gap:4px; translate:-50% 0; animation:popIn .35s backwards}
.mfx-tag span{background:var(--hl); color:#fff; font-size:1.25rem; padding:3px 14px; border-radius:99px; box-shadow:0 3px 0 rgba(43,45,66,.2)}
.mfx-tag i{width:0; height:0; border:12px solid transparent; border-top:16px solid var(--hl); border-bottom:0; animation:mfxBob .45s ease-in-out infinite alternate}
@keyframes mfxUp{from{transform:translate(0,0) scale(.6); opacity:0}20%{opacity:1}to{transform:translate(var(--dx,10px),-60px) scale(1.1); opacity:0}}
@keyframes mfxDrop{from{transform:translate(0,0); opacity:0}15%{opacity:1}to{transform:translate(var(--dx,0px),60px); opacity:0}}
@keyframes mfxSpeed{from{transform:translateX(0); opacity:.7}to{transform:translateX(-30px); opacity:0}}
@keyframes mfxBob{to{transform:translateY(6px)}}

/* ---- 2. 逐字亮起 ---- */
.kw{display:inline-block; transition:color .12s, transform .12s; border-radius:6px}
.kw.on{color:var(--hl); transform:translateY(-3px) scale(1.08)}
.kw.said{color:inherit}

/* ---- 3. Sunny 新表情 ---- */
#game .prompt-row .mascot{position:relative}
.q-bubble{position:absolute; right:-8px; top:-16px; width:34px; height:34px; border-radius:50%; background:var(--card); color:#118AB2;
  display:grid; place-items:center; font:800 1.4rem var(--en); box-shadow:0 3px 0 rgba(43,45,66,.18); opacity:0; transform:scale(.3); transition:opacity .2s, transform .25s cubic-bezier(.3,1.6,.5,1); pointer-events:none}
.q-bubble::after{content:""; position:absolute; left:4px; bottom:-4px; width:10px; height:10px; border-radius:50%; background:var(--card)}
.mascot.oops .q-bubble{opacity:1; transform:scale(1)}
.mascot.oops .bob{animation:tilt 1s ease}
.mascot.oops .wing.l{animation:scratch .22s 6 alternate}
@keyframes scratch{to{transform:rotate(-38deg)}}
.mascot.dance .bob{animation:sDance .42s ease-in-out 4}
.mascot.dance .wing.l{animation:flapL .18s 9 alternate}
.mascot.dance .wing.r{animation:flapR .18s 9 alternate}
@keyframes sDance{0%,100%{transform:none}25%{transform:rotate(-12deg) translateY(-8px)}75%{transform:rotate(12deg) translateY(-8px)}}
.mascot.feel-sad .bob{animation:mSad 1.8s ease}
.mascot.feel-angry .bob{animation:mAngry .12s linear 10}
.mascot.feel-scared .bob,.mascot.feel-cold .bob{animation:mTremble .08s linear 16}
.mascot.feel-surprised .bob{animation:mSurprise .9s ease}
.mascot.feel-sleep .bob{animation:mSleep 1.2s ease-in-out 2}
.mascot.feel-eat .bob{animation:chew .25s 6}
.streak{position:fixed; z-index:26; left:50%; top:22%; transform:translateX(-50%); pointer-events:none; background:var(--yellow); color:#2B2D42;
  font:800 1.5rem var(--en); padding:8px 20px; border-radius:99px; box-shadow:0 4px 0 rgba(43,45,66,.25); animation:streakIn 1.6s ease forwards}
@keyframes streakIn{0%{opacity:0; transform:translate(-50%,10px) scale(.6)}15%{opacity:1; transform:translate(-50%,0) scale(1.1)}25%{transform:translate(-50%,0) scale(1)}80%{opacity:1}100%{opacity:0; transform:translate(-50%,-16px)}}

/* ---- 6. 貼紙簿與慶祝強度 ---- */
.book-open{display:flex; align-items:center; gap:10px; margin:0 auto 16px; border:0; border-radius:99px; background:var(--card); padding:8px 18px 8px 10px; font-weight:800; box-shadow:0 4px 0 rgba(43,45,66,.15)}
.book-open .ic{width:38px}
.book-open .zh{font-size:.9rem}
.book-open .cnt{background:var(--red); color:#fff; border-radius:99px; padding:1px 10px; font-size:.9rem}
.stickers .more{align-self:center; font-weight:800; color:var(--soft); font-size:1rem}
#book .bar h2{margin:0; font-size:1.6rem; text-align:center}
#book .bar h2 small{display:block; font-family:var(--zh); font-size:.85rem; color:var(--soft); font-weight:500}
.book-wrap{perspective:1400px; max-width:520px; margin:6px auto 0}
.book-page{background:var(--book); border-radius:10px 26px 26px 10px; padding:18px 18px 22px 26px; position:relative; box-shadow:0 6px 0 rgba(43,45,66,.15), inset 10px 0 0 var(--book-line);
  background-image:repeating-linear-gradient(transparent 0 46px,var(--book-line) 46px 48px); transform-origin:0 50%}
.book-page.turn-next{animation:pageNext .5s ease}
.book-page.turn-prev{animation:pagePrev .5s ease}
@keyframes pageNext{0%{transform:rotateY(0)}49%{transform:rotateY(-90deg)}51%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}
@keyframes pagePrev{0%{transform:rotateY(0)}49%{transform:rotateY(90deg)}51%{transform:rotateY(-90deg)}100%{transform:rotateY(0)}}
.book-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.book-slot{aspect-ratio:1; border-radius:20px; border:3px dashed var(--book-line); display:grid; place-items:center; padding:14%}
.book-slot.has{border-style:solid; border-color:transparent; background:rgba(255,209,102,.18)}
.book-slot.has .sticker{width:100%; animation:popIn .45s backwards}
.book-slot.new{box-shadow:0 0 0 4px var(--yellow)}
.book-nav{display:flex; align-items:center; justify-content:space-between; margin-top:16px}
.book-nav .zh{font-weight:700}
.book-empty{text-align:center; padding:28px 8px; line-height:1.8}
button.book-slot{font:inherit; color:inherit; background:none; cursor:pointer}
body.no-zh .book-open .zh, body.no-zh #book .bar small, body.no-zh .book-empty{display:none}