/* 哭比創客島 精緻版：B 卡通動畫風共用樣式。舞台固定 1200×800，引擎等比縮放置中。 */
:root{
  --ink:#1B2C8B; --sky1:#62C9FF; --sky2:#D4F4FF;
  --red:#FF5A5F; --orange:#FF9F1C; --yellow:#FFD23F; --green:#3BCEAC; --blue:#4D96FF; --purple:#9B5DE5; --pink:#FF6FA8;
  --pop:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#5EC5FF;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}
img,svg{-webkit-user-drag:none;user-select:none}
button{font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;color:var(--ink)}

#stage{position:fixed;left:0;top:0;width:1200px;height:800px;transform-origin:0 0;overflow:hidden;touch-action:none;color:var(--ink)}
#bg{position:absolute;inset:0}
#bg svg,.shot-bg svg{width:100%;height:100%;display:block}
.cloud{animation:drift 40s ease-in-out infinite alternate}
.cloud.c2{animation-duration:55s;animation-delay:-12s}
.cloud.c3{animation-duration:47s;animation-delay:-30s}
@keyframes drift{from{transform:translateX(-50px)}to{transform:translateX(50px)}}
#screen{position:absolute;inset:0}
.scene{position:absolute;inset:0}
.abs{position:absolute}
.abs > svg{width:100%;height:100%;display:block}

/* 果凍按鈕 */
.jelly{position:absolute;border:5px solid var(--ink);border-radius:30px;background:var(--c,var(--yellow));color:var(--ink);
  font-weight:900;display:flex;align-items:center;justify-content:center;gap:12px;
  box-shadow:0 10px 0 var(--ink),inset 0 -9px 0 rgba(0,0,0,.14),inset 0 7px 0 rgba(255,255,255,.5);
  transition:transform .12s ease-out,box-shadow .12s ease-out,background .2s}
.jelly:active,.jelly.press{transform:translateY(8px) scale(1.07,.88);box-shadow:0 2px 0 var(--ink),inset 0 -6px 0 rgba(0,0,0,.14),inset 0 5px 0 rgba(255,255,255,.5)}
.jelly.boing{animation:boing .5s var(--pop)}
@keyframes boing{0%{transform:translateY(6px) scale(1.08,.88)}45%{transform:translateY(-6px) scale(.95,1.07)}100%{transform:none}}
.jelly svg{flex:none}
.jelly[disabled]{--c:#cfd6e8;cursor:default}
.popin{animation:popin .55s var(--pop) both}
@keyframes popin{from{transform:scale(0)}to{transform:scale(1)}}
.shake{animation:shake .5s ease-in-out}
@keyframes shake{0%,100%{translate:0 0}20%{translate:-16px 0;rotate:-3deg}40%{translate:14px 0;rotate:3deg}60%{translate:-10px 0;rotate:0deg}80%{translate:6px 0}}
.glowRing{box-shadow:0 10px 0 var(--ink),0 0 0 8px #fff,0 0 34px 14px #FFF3B0}

/* 頂列 */
#backBtn{left:16px;top:16px;width:80px;height:80px;border-radius:24px;--c:#fff;z-index:60;display:none}
#backBtn.show{display:flex}
#tools{position:absolute;right:16px;top:16px;display:flex;gap:12px;z-index:60}
#tools .jelly{position:relative;width:80px;height:80px;border-radius:24px;--c:#fff}
#tools .jelly.off{--c:#cfd6e8}
#progress{position:absolute;left:120px;top:38px;width:760px;height:30px;border:5px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden;z-index:58;display:none;box-shadow:0 5px 0 var(--ink)}
#progress.show{display:block}
#progress i{position:absolute;left:0;top:0;bottom:0;background:var(--green);border-right:4px solid var(--ink);transition:width .5s var(--pop)}
#qdots{position:absolute;left:510px;top:30px;transform:translateX(-50%);display:none;gap:22px;z-index:58}
#qdots.show{display:flex}
#qdots b{width:40px;height:40px;border-radius:50%;background:#fff;border:5px solid var(--ink);box-shadow:0 4px 0 var(--ink);transition:transform .3s var(--pop),background .3s}
#qdots b.cur{background:var(--yellow);transform:scale(1.25)}
#qdots b.done{background:var(--green)}

/* 下一步 */
#nextBtn{right:36px;bottom:34px;width:220px;height:90px;font-size:40px;--c:var(--green);z-index:55;display:none}
#nextBtn.show{display:flex}

/* 老師：哭比熊（禁水平翻轉，動作只用上下、縮放、旋轉） */
#teacher{position:absolute;left:0;bottom:0;width:420px;height:560px;z-index:40;pointer-events:none}
#teacher.hide{display:none}
#bear{position:absolute;left:22px;bottom:-8px;width:230px;transform-origin:50% 100%;pointer-events:auto;
  filter:drop-shadow(0 6px 0 rgba(27,44,139,.25));animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,.985)}}
#bear.hop{animation:hop .75s var(--pop)}
#bear.happy{animation:hop .75s var(--pop) 3}
#bear.tilt{animation:tilt 1s ease-in-out}
#bear.talk{animation:talk .45s ease-in-out 2}
@keyframes hop{0%{transform:translateY(0) scale(1,1)}20%{transform:translateY(0) scale(1.1,.88)}50%{transform:translateY(-50px) scale(.93,1.09)}78%{transform:translateY(0) scale(1.1,.9)}100%{transform:translateY(0) scale(1,1)}}
@keyframes tilt{0%{transform:rotate(0)}25%{transform:rotate(-11deg)}75%{transform:rotate(-11deg)}100%{transform:rotate(0)}}
@keyframes talk{0%,100%{transform:scale(1,1)}50%{transform:scale(1.04,.96)}}

.bub{text-wrap:balance;position:absolute;background:#fff;border:5px solid var(--ink);border-radius:30px;padding:14px 24px 16px;
  font-weight:900;color:var(--ink);line-height:1.3;box-shadow:0 8px 0 var(--ink);white-space:normal}
.bub::after{content:"";position:absolute;width:30px;height:30px;background:#fff;border-right:5px solid var(--ink);border-bottom:5px solid var(--ink);
  left:56px;bottom:-19px;transform:rotate(45deg) skew(8deg,8deg)}
.bub.tail-r::after{left:auto;right:56px}
.bub.no-tail::after{display:none}
#bubble{left:16px;bottom:298px;max-width:380px;font-size:34px;transform-origin:30% 100%}
#bubble.hide{display:none}
#bubble.pop{animation:bubpop .45s var(--pop)}
@keyframes bubpop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.em{color:#E8457C}

/* 故事 */
.story{position:absolute;inset:0;overflow:hidden;cursor:pointer}
.shot{position:absolute;inset:0;overflow:hidden}
.shot-bg,.kb{position:absolute;inset:0}
.kb{animation:kb 3.2s ease-out both}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}}
.cam-push{animation:camPush .8s var(--pop) both}
.cam-slide{animation:camSlide .75s var(--pop) both}
.cam-rise{animation:camRise .8s var(--pop) both}
.cam-out{animation:camOut .6s ease-in both}
@keyframes camPush{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes camSlide{from{transform:translateX(1200px)}to{transform:none}}
@keyframes camRise{from{transform:translateY(800px)}to{transform:none}}
@keyframes camOut{from{transform:none;opacity:1}to{transform:translateX(-500px) scale(.85);opacity:0}}
.sbub{font-size:42px;animation:bubpop .5s var(--pop) .35s both;transform-origin:20% 100%}
.sdots{position:absolute;left:50%;top:756px;transform:translateX(-50%);display:flex;gap:14px;z-index:30}
.sdots i{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--ink);transition:transform .3s var(--pop),background .3s}
.sdots i.on{background:var(--yellow);transform:scale(1.35)}
.storyAgain{right:280px;bottom:34px;width:240px;height:90px;font-size:36px;--c:var(--yellow);z-index:55}
.tear{animation:tear 1s ease-in infinite}
.tear.t2{animation-delay:.5s}
@keyframes tear{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(26px);opacity:0}}
.zz{animation:zz 2.4s ease-in-out infinite;opacity:0}
.zz.z2{animation-delay:.8s}.zz.z3{animation-delay:1.6s}
@keyframes zz{0%{transform:translate(0,0) scale(.6);opacity:0}25%{opacity:1}100%{transform:translate(30px,-70px) scale(1.2);opacity:0}}

/* 角色動作 */
.sq{transform-origin:50% 100%}
.sq.jump{animation:hop .75s var(--pop)}
.sq.yawn{animation:yawn 1s ease-in-out}
.sq.dance{animation:dance .9s ease-in-out infinite}
@keyframes yawn{0%,100%{transform:scale(1,1)}50%{transform:scale(.95,1.1)}}
@keyframes dance{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-26px) rotate(-8deg)}50%{transform:translateY(0) rotate(0) scale(1.06,.94)}75%{transform:translateY(-26px) rotate(8deg)}}
.glow{filter:drop-shadow(0 0 16px #7fe3ff) drop-shadow(0 0 4px #7fe3ff)}
.lay{opacity:0;transform:scaleY(.1);transform-box:fill-box;transform-origin:50% 100%}
.lay.on{opacity:1;transform:none;transition:transform .3s var(--pop),opacity .1s}
.carr{transition:transform .22s ease-out}

/* 元件：可點目標 */
.k-tap{position:absolute;border:none;background:transparent;display:flex;align-items:center;justify-content:center;touch-action:none;padding:0}
.k-tap > svg{width:100%;height:100%;display:block;pointer-events:none}
.k-frame{border:6px dashed var(--ink);border-radius:26px;background:rgba(255,255,255,.35);animation:slotPulse 2s ease-in-out infinite}
.k-frame.lit{background:rgba(255,243,176,.75);box-shadow:0 0 28px 8px #FFF3B0}
.k-frame.right{background:rgba(59,206,172,.6);border-style:solid;animation:none}
.k-tap.flash,.k-slot.flash,.k-target.flash{animation:slotFlash .8s ease-in-out 1;background:rgba(255,210,63,.8)}
.k-zone{position:absolute;background:transparent;border:none}
.k-label{position:absolute;left:0;right:0;bottom:-46px;text-align:center;font-size:30px;font-weight:900;pointer-events:none;color:var(--ink)}

/* 元件：選項卡 */
.k-card{flex-direction:column;gap:6px;padding:12px;--c:#fff}
.k-card .pic{width:100%;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.k-card .pic > svg,.k-card .pic > img{max-width:100%;max-height:100%;width:100%;height:100%}
.k-card .txt{font-size:34px;line-height:1.1;pointer-events:none;white-space:nowrap}
.k-card.right{--c:#B7F0DF}

/* 元件：拖曳物 */
.k-piece{position:absolute;touch-action:none;cursor:grab;z-index:20}
.k-piece > svg,.k-piece > .inner{width:100%;height:100%;display:block;pointer-events:none}
.k-piece.lift{z-index:70 !important;filter:drop-shadow(0 14px 0 rgba(27,44,139,.3));transform:scale(1.08)}
.k-piece.back{transition:left .5s var(--pop),top .5s var(--pop),transform .3s}
.k-piece.snap{transition:left .32s var(--pop),top .32s var(--pop),transform .3s}
.k-piece.placed{cursor:default}
.k-piece.squish{animation:squish .45s var(--pop)}
@keyframes squish{0%{transform:scale(1.12,.82)}100%{transform:none}}
.k-cardpiece{background:#fff;border:5px solid var(--ink);border-radius:24px;box-shadow:0 7px 0 var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;gap:2px}
.k-cardpiece .pic{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}
.k-cardpiece .pic > svg{width:100%;height:100%}
.k-cardpiece .txt{font-size:28px;font-weight:900;line-height:1.1;pointer-events:none;white-space:nowrap}
.k-slot{position:absolute;border:6px dashed var(--ink);border-radius:30px;background:rgba(255,255,255,.35);z-index:10;animation:slotPulse 2s ease-in-out infinite;transition:left .3s,top .3s}
@keyframes slotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes slotFlash{0%,100%{transform:scale(1)}25%,75%{transform:scale(1.12)}50%{transform:scale(1)}}
.k-slot.hide{display:none}
.k-target{position:absolute;border:6px dashed var(--ink);border-radius:26px;background:rgba(255,255,255,.4);z-index:8;display:flex;align-items:center;justify-content:center}
.k-target.filled{border-style:solid;background:rgba(183,240,223,.7)}
.k-num{position:absolute;left:50%;margin-left:-26px;top:-50px;width:52px;height:52px;border-radius:50%;background:var(--yellow);border:5px solid var(--ink);font-size:32px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--ink);z-index:2}
.k-bin{position:absolute;border:6px solid var(--ink);border-radius:30px;z-index:8;box-shadow:0 10px 0 var(--ink)}
.k-bin .head{position:absolute;left:0;right:0;top:-2px;height:84px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:36px;font-weight:900;pointer-events:none}
.k-bin .head svg{width:62px;height:62px}

/* 元件：按住 */
.k-hold{position:absolute;touch-action:none;cursor:pointer;z-index:20}
.k-hold .body{position:absolute;inset:0;transform-origin:50% 100%;transition:transform .45s var(--pop);pointer-events:none}
.k-hold .body > svg{width:100%;height:100%;display:block}
.k-hold.squeeze .body{transform:scale(1.22,.55);transition:transform .25s ease-out}
.k-hold.stiff .body{animation:stiff .3s ease-in-out}
@keyframes stiff{0%,100%{transform:none}50%{transform:scale(1.01,.99)}}
.k-hold .ring{position:absolute;pointer-events:none;overflow:visible}
.k-hold .txt{position:absolute;left:0;right:0;bottom:-48px;text-align:center;font-size:32px;font-weight:900;pointer-events:none;white-space:nowrap}

/* 元件：畫線 */
.k-draw{position:absolute;touch-action:none}
.k-draw svg.trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.k-handle{position:absolute;touch-action:none;cursor:grab;z-index:30}
.k-handle > svg,.k-handle > .inner{width:100%;height:100%;display:block;pointer-events:none}
.k-handle.lift{filter:drop-shadow(0 12px 0 rgba(27,44,139,.3))}

/* 大字卡、安全卡、名詞卡 */
.k-rule{position:absolute;left:420px;top:190px;width:740px;min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--purple);border:7px solid var(--ink);border-radius:40px;box-shadow:0 12px 0 var(--ink);padding:30px 34px;text-align:center}
.k-rule .big{font-size:64px;font-weight:900;line-height:1.25;color:#fff;-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill}
.k-rule .sub{margin-top:12px;font-size:34px;font-weight:900;color:#fff}
.k-safety{position:absolute;left:430px;top:130px;width:720px;height:480px;background:#fff;border:12px solid var(--red);border-radius:40px;box-shadow:0 12px 0 var(--ink),0 0 0 5px var(--ink) inset;
  display:flex;flex-direction:column;align-items:center;padding:26px 30px;text-align:center}
.k-safety .pic{width:170px;height:170px}
.k-safety .big{font-size:56px;font-weight:900;color:#D62F35;line-height:1.2;margin-top:6px}
.k-safety .sub{font-size:34px;font-weight:900;margin-top:6px}
.k-flip{position:absolute;perspective:1200px;cursor:pointer;touch-action:none}
.k-flip .in{position:absolute;inset:0;transition:transform .7s var(--pop);transform-style:preserve-3d}
.k-flip.flipped .in{transform:rotateY(180deg)}
.k-flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:6px solid var(--ink);border-radius:30px;box-shadow:0 10px 0 var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}
.k-flip .front{background:#FFF3B0}
.k-flip .front .pic{width:85%;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.k-flip .front .pic > svg{width:100%;height:100%}
.k-flip .front .tapme{font-size:30px;font-weight:900;margin-top:6px;opacity:.75}
.k-flip .back{background:#fff;transform:rotateY(180deg)}
.k-flip .back .nm{font-size:52px;font-weight:900;color:#E8457C;line-height:1.15}
.k-flip .back .ln{font-size:30px;font-weight:900;margin-top:16px;line-height:1.35}
.k-flip .back .mini{width:110px;height:90px;margin-bottom:6px}
.k-flip .back .mini > svg{width:100%;height:100%}

/* 地圖 */
#mapTitle{position:absolute;left:120px;top:24px;font-size:66px;font-weight:900;letter-spacing:3px;color:var(--yellow);-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;text-shadow:0 7px 0 var(--ink)}
.station{position:absolute;width:150px;height:150px;border-radius:50%;--c:#fff;flex-direction:column;gap:0;font-size:46px;line-height:1}
.station.rec{--c:var(--yellow);animation:recPulse 1.6s ease-in-out infinite}
@keyframes recPulse{0%,100%{box-shadow:0 10px 0 var(--ink),0 0 0 6px #fff,0 0 20px 8px #FFF3B0}50%{box-shadow:0 10px 0 var(--ink),0 0 0 10px #fff,0 0 46px 20px #FFF3B0}}
.station .ck{position:absolute;right:-14px;top:-14px;width:58px;height:58px}
.stLabel{position:absolute;width:260px;text-align:center;font-size:30px;font-weight:900;background:#fff;border:4px solid var(--ink);border-radius:20px;padding:2px 0 4px;box-shadow:0 5px 0 var(--ink);pointer-events:none}
.stStars{position:absolute;width:260px;display:flex;justify-content:center;gap:4px;pointer-events:none}
.stStars svg{width:34px;height:34px}
#resetBtn{right:16px;top:110px;width:170px;height:76px;border-radius:20px;font-size:26px;--c:#fff;box-shadow:0 6px 0 var(--ink);border-width:4px;z-index:60}
.mapBear{position:absolute;height:190px;pointer-events:none;animation:breathe 3s ease-in-out infinite;transform-origin:50% 100%}
.bounceX{animation:bx .9s ease-in-out infinite}
@keyframes bx{0%,100%{transform:translateX(0)}50%{transform:translateX(16px)}}
.bounceY{animation:by .9s ease-in-out infinite}
@keyframes by{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}

/* 關卡頁 */
.lvTitle{position:absolute;left:0;right:0;top:110px;text-align:center;font-size:60px;font-weight:900;color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink)}
.thumb{position:absolute;border:6px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:0 10px 0 var(--ink);background:#D4F4FF}
.thumb .tin{position:absolute;left:0;top:0;width:1200px;height:800px;transform-origin:0 0}
.wip{position:absolute;left:420px;top:560px;width:740px;text-align:center;font-size:40px;font-weight:900;background:#fff;border:5px solid var(--ink);border-radius:26px;padding:10px;box-shadow:0 7px 0 var(--ink)}

/* 摘要小卡 */
.sumCard{position:absolute;left:22px;top:106px;width:380px;background:#fff;border:5px solid var(--ink);border-radius:26px;box-shadow:0 8px 0 var(--ink);padding:10px;z-index:35}
.sumCard .thumb{position:relative;width:300px;height:200px;margin:0 auto;border-width:4px;box-shadow:none;border-radius:18px}
.sumCard .t{font-size:28px;font-weight:900;line-height:1.3;margin-top:6px;text-align:center}

/* 結算 */
.resStars{position:absolute;left:420px;top:120px;width:740px;display:flex;justify-content:center;gap:16px}
.resStars .st{width:110px;height:110px;opacity:.35;transform:scale(.8);transition:transform .4s var(--pop),opacity .3s}
.resStars .st.lit{opacity:1;transform:scale(1.1)}
.resBadge{position:absolute;left:660px;top:250px;width:260px;height:295px}
.resBadge.fall{animation:fall .9s var(--pop) both}
@keyframes fall{0%{transform:translateY(-560px) rotate(-12deg)}100%{transform:none}}
.resName{position:absolute;left:420px;top:548px;width:740px;text-align:center;font-size:44px;font-weight:900}
.resName span{display:inline-block;background:var(--ink);color:var(--yellow);border:5px solid #fff;border-radius:999px;padding:2px 32px 8px;box-shadow:0 7px 0 rgba(27,44,139,.35)}
.resName.gray span{color:#fff;background:#4A5478}

/* 第一章完成 */
.chTitle{position:absolute;left:0;right:0;top:100px;text-align:center;font-size:76px;font-weight:900;color:var(--yellow);-webkit-text-stroke:9px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 var(--ink)}

/* 確認視窗 */
.modal{position:absolute;inset:0;background:rgba(27,44,139,.45);z-index:200;display:flex;align-items:center;justify-content:center}
.modal .box{position:relative;width:620px;height:330px;background:#fff;border:7px solid var(--ink);border-radius:36px;box-shadow:0 12px 0 var(--ink);text-align:center;padding-top:44px;font-size:40px;font-weight:900}

/* 透明小手、特效 */
#hand{position:absolute;left:0;top:0;width:110px;height:132px;margin-left:-31px;margin-top:-4px;z-index:190;pointer-events:none;opacity:0;transform-origin:31px 4px}
.ripple{position:absolute;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:7px solid #fff;box-shadow:0 0 0 4px var(--ink),inset 0 0 0 3px var(--ink);pointer-events:none;z-index:189}
#ghost{position:absolute;left:0;top:0;opacity:0;pointer-events:none;z-index:188}
#ghost > svg{width:100%;height:100%}
#pathSvg{position:absolute;left:0;top:0;width:1200px;height:800px;pointer-events:none;z-index:45;opacity:0;transition:opacity .3s}
#pathSvg path.dash{animation:dashMove 1.2s linear infinite}
@keyframes dashMove{to{stroke-dashoffset:-48}}
#fx{position:absolute;inset:0;pointer-events:none;z-index:180;overflow:hidden}
#fx .p{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px}

/* 直拿提示 */
#rotate{position:fixed;inset:0;z-index:999;display:none;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:#62C9FF;color:var(--ink);font-size:44px;font-weight:900;text-align:center}
#rotate svg{animation:rot 2.4s ease-in-out infinite}
@keyframes rot{0%,20%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
@media (orientation:portrait){#rotate{display:flex}}