/* 關卡遊戲（js/arena.js）：18 款遊戲的畫面 */
.ar { position: relative; height: clamp(310px, 50vh, 460px); border-radius: 28px; overflow: hidden; box-shadow: 0 10px 24px rgba(40, 20, 80, .18), inset 0 -6px 0 rgba(0, 0, 0, .08); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ar button { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ar .spr { display: block; width: 100%; height: auto; pointer-events: none; }

/* 頂部：遊戲名稱 + 收集進度 */
.ar-tag { flex-wrap: wrap; max-width: 100%; }
.ar-name { white-space: nowrap; }
.quest { display: flex; gap: 3px; }
.quest i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.quest i .spr { width: 20px; height: 20px; object-fit: contain; filter: grayscale(1) opacity(.45); }
.quest i.on .spr { filter: none; }
.quest i.half .spr { filter: grayscale(.6) opacity(.8); }
.quest i.cur { background: rgba(255, 255, 255, .6); animation: pulse 1.2s ease-in-out infinite; }
.game-chip .gc-img { width: 30px; height: 30px; object-fit: contain; }
.game-chip { display: inline-flex; align-items: center; gap: 6px; margin: 6px auto 2px; padding: 4px 14px 4px 6px; border-radius: 99px; background: #fff4d6; color: #8a5a00; font-weight: 900; box-shadow: 0 3px 0 #f0d79a; }

/* 答案牌（所有遊戲共用） */
.sg { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; min-width: 2.2em; max-width: 100%; padding: .2em .45em; border-radius: 14px; background: rgba(255, 255, 255, .96); box-shadow: 0 3px 0 rgba(0, 0, 0, .14); color: #2b2d42; font-size: clamp(15px, 4.4vw, 22px); font-weight: 900; line-height: 1.1; text-align: center; overflow-wrap: anywhere; pointer-events: none; }
.sg .emo { font-size: 1.45em; }
.sg .things, .sg .group { font-size: .8em; }
.ar .hint .sg, .ar .hint.sg { box-shadow: 0 0 0 4px #fde047, 0 0 18px 6px rgba(253, 224, 71, .8); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.07); } }
@keyframes nope { 20%, 60% { transform: translateX(-8px) rotate(-4deg); } 40%, 80% { transform: translateX(8px) rotate(4deg); } }
@keyframes bobY { 50% { transform: translateY(-8px); } }
@keyframes popBig { 40% { transform: scale(1.35); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

/* 射氣球 */
.ar-balloon { background: linear-gradient(#8fd3ff, #d7f0ff 70%, #fff4e0); }
.ar-clouds { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60px 26px at 18% 20%, #fff 60%, transparent 62%), radial-gradient(80px 30px at 78% 34%, #fff 60%, transparent 62%), radial-gradient(70px 24px at 40% 70%, rgba(255, 255, 255, .8) 60%, transparent 62%); z-index: 0; }
.bl { position: absolute; left: var(--x); bottom: 0; width: clamp(96px, 26vw, 132px); transform: translate(-50%, 110%); animation: rise var(--dur) var(--delay) linear infinite; z-index: 1; }
.bl .bl-img { filter: hue-rotate(var(--hue)) drop-shadow(0 6px 6px rgba(0, 0, 0, .15)); }
.bl .sg { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); max-width: 92%; }
.bl.nope { animation-play-state: paused; }
.bl.nope .bl-img, .bl.nope .sg { animation: nope .5s; }
.bl.pop { animation-play-state: paused; pointer-events: none; }
.bl.pop > * { animation: popBig .35s forwards; }
@keyframes rise { 0% { transform: translate(-50%, 110%); } 25% { transform: translate(-42%, 0); } 50% { transform: translate(-58%, -110%); } 75% { transform: translate(-44%, -220%); } 100% { transform: translate(-50%, -330%); } }

/* 打地鼠 */
.ar-mole { background: linear-gradient(#bdf0a0, #7ccb57); padding: 8px; }
.ar-mole .mole-field { height: 100%; background: none; box-shadow: none; padding: 14px 10px 6px; align-content: space-evenly; }
.ar-mole .m-sign { position: absolute; left: 50%; top: 2%; transform: translateX(-50%); z-index: 3; }
.ar-mole .m-sign:empty { display: none; }
.ar-mole .hint .m-sign { box-shadow: 0 0 0 4px #fde047, 0 0 18px 6px rgba(253, 224, 71, .8); }

/* 青蛙過河 */
.ar-frog { background: #4fb7e8; --rows: 3; }
.river { position: absolute; left: 0; right: 0; top: 13%; bottom: 17%; display: grid; grid-template-rows: repeat(var(--rows), 1fr); background: repeating-linear-gradient(100deg, #45aee2 0 30px, #5cc0ee 30px 60px); animation: waves 3s linear infinite; }
.lane { position: relative; }
.lily { position: absolute; top: 50%; left: 0; width: clamp(86px, 24vw, 124px); transform: translate(-50%, -50%); animation: drift var(--dur) var(--delay) ease-in-out infinite alternate; }
.lane:nth-child(even) .lily { animation-direction: alternate-reverse; }
.lily .lily-img { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .12)); }
.lily .sg { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); max-width: 96%; }
.lily.ok .lily-img { filter: drop-shadow(0 0 10px #fde047); }
.lily.sink { animation-play-state: paused; }
.lily.sink > * { transition: transform .4s, opacity .4s; transform: translate(-50%, -30%) scale(.6); opacity: .2; }
.lily.sink .lily-img { transform: scale(.6); }
@keyframes drift { from { left: 12%; } to { left: 88%; } }
.bank { position: absolute; left: 0; right: 0; bottom: 0; height: 17%; background: linear-gradient(#8fd16a, #6bb64a); border-top: 6px solid #a8e283; }
.bank.top { top: 0; bottom: auto; height: 13%; border-top: 0; border-bottom: 6px solid #a8e283; background: linear-gradient(#6bb64a, #8fd16a); }
.frog { position: absolute; left: 50%; bottom: 3%; width: clamp(70px, 18vw, 96px); margin-left: calc(clamp(70px, 18vw, 96px) / -2); z-index: 4; transition: transform .45s cubic-bezier(.3, .2, .3, 1); pointer-events: none; }
.frog.jump .spr { animation: frogJump .45s; }
.frog.splash .spr { animation: splash .6s forwards; }
@keyframes frogJump { 50% { transform: translateY(-40px) scale(1.15); } }
@keyframes splash { to { transform: translateY(20px) scale(.4); opacity: 0; } }

/* 開寶箱 */
.ar-chest { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), 1fr); align-content: center; gap: 10px 8px; padding: 18px 12px; background: radial-gradient(circle at 50% 30%, #ffe9a8, #f3b75a 70%, #c98436); }
.chb { position: relative; display: flex; flex-direction: column; align-items: center; animation: wiggle 2.6s var(--d) ease-in-out infinite; }
.chb .spr { width: min(100%, 130px); }
.chb .ch-open { display: none; }
.chb.open .ch-img { display: none; }
.chb.open .ch-open { display: block; animation: popIn .4s; }
.chb .sg { margin-top: -10px; }
.chb.open { animation: none; }
.chb.open .sg { background: #dcfce7; }
.chb.locked { animation: nope .5s; }
.chb.locked .sg { background: #fee2e2; }
@keyframes wiggle { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-4deg); } 90% { transform: rotate(4deg); } 95% { transform: rotate(-2deg); } }
@keyframes popIn { from { transform: scale(.6); } }

/* 射龍門 */
.ar-goal { --n: 3; background: linear-gradient(#9ee0ff 0 30%, #6cc24a 30%); }
.goal-frame { position: absolute; left: 4%; right: 4%; top: 6%; height: 52%; }
.goal-frame .goal-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.targets { position: absolute; left: 8%; right: 8%; top: 16%; bottom: 8%; display: grid; grid-template-columns: repeat(var(--n), 1fr); align-items: center; justify-items: center; z-index: 2; }
.tg { width: 92%; aspect-ratio: 1.2; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .55) 0 40%, rgba(255, 80, 80, .35) 41% 50%, rgba(255, 255, 255, .4) 51% 60%, transparent 61%); }
.tg.in .sg { background: #dcfce7; box-shadow: 0 0 0 4px #22c55e; }
.keeper { position: absolute; bottom: 0; left: 50%; width: 24%; transform: translateX(-50%); z-index: 3; animation: keeper 3.2s ease-in-out infinite alternate; transition: left .3s; pointer-events: none; }
.keeper.save .spr { animation: dive .4s forwards; }
@keyframes keeper { from { left: 18%; } to { left: 82%; } }
@keyframes dive { to { transform: translateY(-14px) scale(1.12); } }
.pitch { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 40px, transparent 40px 80px); pointer-events: none; }
.ball { position: absolute; left: 50%; bottom: 6%; width: clamp(54px, 14vw, 72px); margin-left: calc(clamp(54px, 14vw, 72px) / -2); z-index: 4; pointer-events: none; }
.ar-goal.net .goal-img { animation: net .5s; }
@keyframes net { 30% { transform: scale(1.04, .96); } 60% { transform: scale(.98, 1.02); } }

/* 戳泡泡 */
.ar-bubble { background: linear-gradient(#3bb3e6, #1a6fb8 80%); }
.ar-sand { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: linear-gradient(#f6dfa0, #e4c478); border-radius: 50% 50% 0 0 / 40% 40% 0 0; }
.bb { position: absolute; left: var(--x); bottom: 0; width: calc(clamp(78px, 21vw, 108px) * var(--s)); aspect-ratio: 1; display: grid; place-items: center; transform: translate(-50%, 110%); border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 8%, rgba(255, 255, 255, .25) 9% 30%, rgba(180, 230, 255, .18) 60%, rgba(255, 255, 255, .6) 72%, rgba(200, 160, 255, .55) 100%);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, .7), 0 6px 14px rgba(0, 30, 80, .2); animation: rise var(--dur) var(--delay) linear infinite; z-index: 1; }
.bb .sg { background: rgba(255, 255, 255, .8); max-width: 86%; }
.bb.nope { animation-play-state: paused; }
.bb.nope .sg { animation: nope .5s; background: #fee2e2; }
.bb.pop { animation-play-state: paused; pointer-events: none; animation: none; opacity: 0; transition: opacity .3s .1s; }

/* 小火車 */
.ar-train { background: linear-gradient(#ffe3f1, #fff6d8 60%, #c9eaa3 60%); }
.rail { position: absolute; left: 0; right: 0; bottom: 14%; height: 10px; background: repeating-linear-gradient(90deg, #8b5a2b 0 8px, transparent 8px 22px), linear-gradient(transparent 3px, #6b7280 3px 6px, transparent 6px); }
.rail.top { bottom: auto; top: 44%; }
.cars { position: absolute; left: 0; right: 0; top: 10%; height: 36%; }
.wagon { position: absolute; bottom: 0; left: 0; width: clamp(96px, 26vw, 130px); animation: convey var(--dur) var(--delay) linear infinite; }
.wagon .wagon-img, .hooked .wagon-img { filter: hue-rotate(var(--hue)); }
.wagon .sg, .hooked .sg { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); max-width: 90%; }
.wagon.nope { opacity: .45; }
.wagon.nope .sg { animation: nope .5s; background: #fee2e2; }
.wagon.gone { visibility: hidden; pointer-events: none; }
@keyframes convey { from { left: 102%; } to { left: -32%; } }
.mytrain { position: absolute; left: 3%; bottom: calc(14% + 8px); display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: flex-end; gap: 2px; max-width: 94%; }
.mytrain .engine { width: clamp(90px, 24vw, 120px); flex: none; }
.hooked { position: relative; width: clamp(70px, 18vw, 96px); flex: none; }
.hooked .sg { font-size: clamp(12px, 3.4vw, 17px); }
.mytrain.toot .engine { animation: squash .4s; }

/* 釣魚 */
.ar-fish { background: linear-gradient(#b9ecff 0 12%, #5cc6f2 12%, #2e8fd0); }
.ar-fish .fishy .f-img .spr { filter: hue-rotate(var(--hue)); }
.ar-fish .fishy .f-sign { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 80%; }

/* 魔法藥水 */
.ar-potion { background: radial-gradient(circle at 50% 100%, #6d3bb8, #2b1655 75%); }
.pshelf { position: absolute; left: 4%; right: 4%; top: 6%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; padding-bottom: 14px; border-bottom: 12px solid #8b5a2b; border-radius: 0 0 6px 6px; }
.pt { position: relative; width: clamp(66px, 18vw, 92px); display: flex; flex-direction: column; align-items: center; animation: bobY 2.4s ease-in-out infinite; }
.pt:nth-child(even) { animation-delay: -1.2s; }
.pt .pt-img { filter: hue-rotate(var(--hue)) drop-shadow(0 0 8px rgba(255, 255, 255, .4)); }
.pt .sg { margin-top: -8px; font-size: clamp(13px, 3.8vw, 19px); }
.pt.used { visibility: hidden; }
.pt.busy { animation: none; z-index: 5; }
.cauldron { position: absolute; left: 50%; bottom: 3%; width: clamp(130px, 36vw, 180px); transform: translateX(-50%); --brew: 0deg; }
.cauldron .brew { position: absolute; left: 18%; right: 18%; top: 14%; height: 26%; border-radius: 50%; background: radial-gradient(#b4ff9a, #3fbf5a); filter: hue-rotate(var(--brew)); opacity: .0; transition: opacity .3s; pointer-events: none; }
.cauldron.glow .brew { opacity: .9; animation: brew 1s; }
.cauldron.glow { filter: drop-shadow(0 0 22px #fde047); }
.cauldron.smoke { animation: nope .5s; filter: grayscale(.7); }
@keyframes brew { 30% { transform: scale(1.3); } }

/* 投籃 */
.ar-hoop { --n: 3; background: linear-gradient(#ffd9a8, #ffb870 55%, #d8894a 55%); }
.hoops { position: absolute; left: 3%; right: 3%; top: 6%; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; }
.hp { display: flex; flex-direction: column; align-items: center; animation: bobY 2s var(--d) ease-in-out infinite; }
.hp .hp-img { width: min(100%, 120px); }
.hp.in .sg { background: #dcfce7; box-shadow: 0 0 0 4px #22c55e; }
.hp.rim { animation: nope .45s; }
.court { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 3px, transparent 3px 50px); pointer-events: none; }
.ball.bk { bottom: 5%; }

/* 摘星星 */
.ar-star { background: radial-gradient(ellipse at 50% 110%, #4c3a8f, #1c1640 60%, #0c0a24); }
.ar-star::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 70%, #fff, transparent), radial-gradient(2px 2px at 60% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 80% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 50% 85%, #fff, transparent), radial-gradient(2px 2px at 90% 15%, #fff, transparent); pointer-events: none; }
.st { position: absolute; width: clamp(74px, 20vw, 100px); display: grid; place-items: center; opacity: 0; transform: scale(.3); transition: opacity .4s, transform .4s cubic-bezier(.3, 1.6, .6, 1); pointer-events: none; }
.st.show { opacity: 1; transform: none; pointer-events: auto; }
.st .st-img { filter: drop-shadow(0 0 12px rgba(255, 220, 90, .9)); animation: twinkle 1.6s ease-in-out infinite; }
.st .sg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%); font-size: clamp(13px, 3.8vw, 19px); }
.st.got { pointer-events: none; }
.st.gone { display: none; }
.st.nope .sg { animation: nope .5s; background: #fee2e2; }
@keyframes twinkle { 50% { transform: scale(1.08) rotate(6deg); } }
.jar { position: absolute; left: 50%; bottom: 2%; width: clamp(70px, 18vw, 96px); transform: translateX(-50%); }
.jar.bounce, .honey.bounce, .ar .basket.bounce { animation: squash .35s; }

/* 疊高塔 */
.ar-crane { background: linear-gradient(#bfe6ff, #eaf7ff 70%); }
.crane-arm { position: absolute; left: 0; right: 0; top: 4%; height: 12px; background: repeating-linear-gradient(45deg, #f59e0b 0 10px, #1f2937 10px 20px); border-radius: 6px; }
.hookline { position: absolute; top: calc(4% + 10px); left: 50%; width: 0; display: flex; flex-direction: column; align-items: center; z-index: 3; cursor: pointer; }
.hookline.swing { animation: craneMove 3.2s ease-in-out infinite alternate; }
.cable { width: 3px; height: 36px; background: #374151; }
.hold { display: block; min-height: 10px; }
.blk3 { --hue: 0deg; display: grid; place-items: center; min-width: clamp(78px, 22vw, 110px); height: clamp(52px, 13vw, 66px); padding: 4px 8px; border-radius: 10px; background: linear-gradient(hsl(calc(var(--hue) + 10deg) 85% 66%), hsl(var(--hue) 80% 52%)); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .18), inset 0 4px 0 rgba(255, 255, 255, .35), 0 6px 10px rgba(0, 0, 0, .15); }
.blk3 .sg { font-size: clamp(14px, 4vw, 20px); }
.tower { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; }
.tower .blk3.done { min-width: clamp(70px, 19vw, 96px); height: clamp(18px, 4.4vw, 24px); margin-top: -1px; }
.tower .blk3.land { animation: squash .35s; }
.ar-crane .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 10%; background: linear-gradient(#8fd16a, #6bb64a); }
.drop-btn { position: absolute; left: 10px; bottom: 12px; z-index: 4; font-size: 20px; padding: 10px 20px; }
@keyframes craneMove { from { left: 18%; } to { left: 82%; } }

/* 小蜜蜂採蜜 */
.ar-bee { --cols: 3; background: linear-gradient(#c9f0ff, #e9fbd4 55%, #9fdc72 55%); }
.meadow { position: absolute; left: 3%; right: 3%; top: 24%; bottom: 4%; display: grid; grid-template-columns: repeat(var(--cols), 1fr); align-items: end; justify-items: center; gap: 4px; }
.fl { display: flex; flex-direction: column-reverse; align-items: center; transform-origin: 50% 100%; animation: sway 3s var(--d) ease-in-out infinite; }
.fl .fl-img { width: clamp(70px, 19vw, 100px); filter: hue-rotate(var(--hue)); }
.fl .sg { margin-bottom: -6px; position: relative; z-index: 1; }
.fl.got .fl-img { filter: hue-rotate(var(--hue)) drop-shadow(0 0 12px #fde047); transform: scale(1.12); }
.fl.got .sg { background: #fef9c3; }
.fl.shut .fl-img { filter: grayscale(1); transform: scale(.8); transition: .3s; }
@keyframes sway { 50% { transform: rotate(4deg); } }
.bee { position: absolute; left: 44%; top: 4%; width: clamp(56px, 15vw, 76px); z-index: 4; animation: hover 1.6s ease-in-out infinite; pointer-events: none; }
.bee.busy { animation: none; }
@keyframes hover { 25% { transform: translate(12px, -6px); } 50% { transform: translate(0, 4px); } 75% { transform: translate(-12px, -6px); } }
.honey { position: absolute; right: 3%; top: 3%; width: clamp(50px, 13vw, 66px); }

/* 火箭升空 */
.ar-rocket { background: radial-gradient(ellipse at 50% 120%, #3b2f8f, #120f3a 70%); }
.ar-rocket::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 30%, #fff, transparent), radial-gradient(2px 2px at 40% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 66% 70%, #fff, transparent), radial-gradient(2px 2px at 88% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 80%, #fff, transparent); pointer-events: none; }
.pl { position: absolute; width: clamp(80px, 22vw, 110px); display: grid; place-items: center; animation: bobY 3s var(--d) ease-in-out infinite; }
.pl .pl-img { filter: hue-rotate(var(--hue)) drop-shadow(0 0 10px rgba(160, 200, 255, .6)); }
.pl .sg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pl.got .sg { background: #dcfce7; box-shadow: 0 0 0 4px #22c55e; }
.pl.nope .sg { animation: nope .5s; background: #fee2e2; }
.pad-base { position: absolute; left: 50%; bottom: 0; width: 120px; height: 14px; transform: translateX(-50%); border-radius: 8px 8px 0 0; background: #94a3b8; }
.rk { position: absolute; left: 50%; bottom: 14px; width: clamp(54px, 14vw, 72px); margin-left: calc(clamp(54px, 14vw, 72px) / -2); z-index: 4; pointer-events: none; }
.rk .flame { position: absolute; left: 50%; bottom: -14px; width: 18px; height: 26px; transform: translateX(-50%); border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: radial-gradient(#fff7a8, #ff9f1c 60%, transparent 70%); opacity: 0; }
.rk.go .flame { opacity: 1; animation: flame .15s infinite alternate; }
@keyframes flame { to { transform: translateX(-50%) scaleY(1.3); } }

/* 餵怪獸、接住佢 */
.ar-feed { display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 8px; padding: 10px; background: linear-gradient(#e3f9d9, #fff4e0); overflow: visible; }
.ar-feed .food { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ar-catch { background: linear-gradient(#d8f1ff, #fff3d6); touch-action: none; cursor: grab; }

/* 捕蝴蝶 */
.ar-butterfly { background: linear-gradient(#d8f3ff, #f4ffe8 70%); }
.ar-grass { position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: linear-gradient(#9fdc72, #6bb64a); border-radius: 40% 40% 0 0 / 30% 30% 0 0; pointer-events: none; }
.bf { position: absolute; left: 50%; top: 40%; width: clamp(76px, 20vw, 104px); display: grid; place-items: center; transition: left var(--t) ease-in-out, top var(--t) ease-in-out; z-index: 1; }
.bf .bf-img { filter: hue-rotate(var(--hue)); animation: flap .35s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.bf.flip .bf-img { transform: scaleX(-1); }
.bf .sg { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(13px, 3.8vw, 19px); }
.bf.got { transition: transform .5s, opacity .5s; transform: scale(.3) translateY(200px); opacity: 0; pointer-events: none; }
.bf.nope .sg { animation: nope .5s; background: #fee2e2; }
@keyframes flap { to { scale: .8 1; } }
.net { position: absolute; width: clamp(80px, 22vw, 110px); margin-left: calc(clamp(80px, 22vw, 110px) / -2); opacity: 0; z-index: 5; pointer-events: none; }
.net.swoop { animation: swoop .5s; }
@keyframes swoop { 0% { opacity: 1; transform: translate(40px, -40px) rotate(30deg); } 60% { opacity: 1; transform: rotate(-10deg); } 100% { opacity: 0; transform: rotate(-20deg); } }

/* 摘果子 */
.ar-apple { background: linear-gradient(#c9f0ff, #eafbe0 70%, #a6dd7e 70%); }
.ar-apple .tree-img { position: absolute; left: 50%; top: 0; width: auto; height: 92%; transform: translateX(-50%); max-width: none; }
.ap { position: absolute; width: clamp(60px, 16vw, 82px); display: grid; place-items: center; transform: translate(-50%, 0); animation: bobY 2.6s var(--d) ease-in-out infinite; z-index: 2; }
.ap .sg { position: absolute; top: 56%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(12px, 3.6vw, 18px); }
.ap.got { animation: none; z-index: 5; }
.ap.gone { display: none; }
.ap.nope { animation: nope .5s; }
.ap.nope .sg { background: #fee2e2; }
.ar-apple .basket { bottom: 2px; }


/* 楚橋學習夥伴（js/buddy.js）：右下角，點一下再讀題目 */
.buddy { position: fixed; right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); z-index: 45; width: clamp(64px, 17vw, 88px); padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 6px 10px rgba(60, 30, 90, .3)); animation: bdFloat 3s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.buddy .owl, .buddy img { width: 100%; height: auto; display: block; pointer-events: none; }
.buddy::before { content: ""; position: absolute; inset: 12% 6% 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 230, 250, .5) 60%, transparent 72%); z-index: -1; }
.buddy::after { content: ""; position: absolute; left: -2px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6M18.5 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: 0 2px 6px rgba(60, 30, 90, .25); }
.buddy.reading::after { animation: pulse .6s ease-in-out infinite; }
.buddy.reading { animation: bdTalk .6s ease-in-out infinite; }
.bd-say { position: absolute; right: 88%; bottom: 62%; width: max-content; max-width: min(62vw, 300px); padding: 8px 12px; border-radius: 18px 18px 4px 18px; background: #fff; color: #3b2a63; font-size: clamp(14px, 3.8vw, 17px); font-weight: 800; line-height: 1.3; text-align: left; box-shadow: 0 6px 16px rgba(60, 30, 90, .2); opacity: 0; transform: scale(.6) translateY(10px); transform-origin: 100% 100%; transition: opacity .25s, transform .25s; pointer-events: none; }
.buddy.talk .bd-say { opacity: 1; transform: none; }
.buddy.talk { animation: bdTalk .5s ease-in-out 2; }
@keyframes bdFloat { 50% { transform: translateY(-6px); } }
@keyframes bdTalk { 30% { transform: translateY(-8px) rotate(-5deg); } 70% { transform: translateY(-3px) rotate(4deg); } }

/* 楚橋在右下角：遊戲區下面留位，不會遮住答案 */
.game:has(.buddy) .play { padding-bottom: clamp(58px, 15vw, 80px); }
/* 題目圖片輕輕郁動，好像有生命 */
.play .stim .pic img { animation: alive 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.play .stim .pic:nth-child(3n + 1) img { animation-delay: -1.1s; }
.play .stim .pic:nth-child(3n + 2) img { animation-delay: -2.2s; }
@keyframes alive { 0%, 100% { transform: none; } 25% { transform: translateY(-4px) rotate(-3deg); } 50% { transform: scale(1.04, .97); } 75% { transform: translateY(-3px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .play .stim .pic img { animation: none; } }

/* 每日驚喜關卡（js/daily.js） */
.lb-gos { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lb-gos .lb-go { flex: 1 1 0; min-width: 0; padding: 8px 14px; font-size: clamp(18px, 5.4vw, 28px); letter-spacing: .04em; }
.lb-gos .lb-goimg { width: 44px; height: 44px; }
.lb-go.lb-daily { background: linear-gradient(#ffe39a, #ffb347 55%, #ff7aa8); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .15), inset 0 4px 0 rgba(255, 255, 255, .45), 0 10px 0 #d9467a, 0 18px 30px rgba(217, 70, 122, .4); }
.lb-go .lb-dot { position: absolute; right: 12px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px #fff; }
.daily-screen { padding-bottom: 30px; }
.dl-lead { text-align: center; margin: 6px 16px 14px; font-weight: 800; color: #5b4a86; }
.dl-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 640px; margin: 0 auto; padding: 0 12px; }
.dl-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 14px; border: 4px solid #fff; border-radius: 26px; background: linear-gradient(#fff, color-mix(in srgb, var(--c) 18%, #fff)); box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 55%, #fff), 0 14px 24px rgba(60, 30, 90, .15); cursor: pointer; animation: bdFloat 3s var(--d) ease-in-out infinite; }
.dl-gift { width: 100%; max-width: 130px; }
.dl-gift .spr { width: 100%; height: auto; }
.dl-box:not(.open) .dl-gift { animation: wiggle 2.2s var(--d) ease-in-out infinite; }
.dl-box.opening .dl-gift { animation: popBig .4s forwards; }
.dl-n { font-size: 18px; color: #3b2a63; }
.dl-what { font-weight: 800; font-size: 14px; color: #6b5b95; text-align: center; }
.dl-bonus { display: flex; align-items: center; gap: 10px; max-width: 616px; margin: 22px auto 0; padding: 10px 16px; border-radius: 22px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 16px rgba(60, 30, 90, .12); }
.dl-bonus .dl-bic { width: 56px; flex: none; }
.dl-bonus .dl-bic .spr { width: 100%; height: auto; }
.dl-bonus.got .dl-bic { filter: grayscale(.4); }
.dl-btxt { flex: 1; display: flex; flex-direction: column; }
.dl-btxt small { color: #7a6aa6; font-weight: 700; }
.dl-bn { font-weight: 900; font-size: 20px; color: #d9467a; }

/* 遊樂園（新版）：分區 + 大卡 */
.park2 { position: relative; padding-bottom: 40px; }
.park2-bg { position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; filter: blur(3px) saturate(1.1); opacity: .55; }
.park2::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 250, 255, .55), rgba(250, 240, 255, .75)); }
.pz { max-width: 760px; margin: 14px auto 0; padding: 0 12px; }
.pz-h { display: flex; align-items: center; gap: 8px; width: max-content; margin: 0 0 10px; padding: 6px 16px 6px 10px; border-radius: 99px; background: var(--zc); color: #fff; font-size: 20px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15), 0 6px 14px color-mix(in srgb, var(--zc) 40%, transparent); }
.pz-h .ic { width: 24px; height: 24px; }
.pz-h small { padding: 0 8px; border-radius: 99px; background: rgba(255, 255, 255, .3); font-size: 14px; }
.pz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 620px) { .pz-grid { grid-template-columns: repeat(3, 1fr); } }
.rcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 10px 12px; border: 3px solid #fff; border-radius: 26px; background: linear-gradient(160deg, #fff 30%, color-mix(in srgb, var(--c) 16%, #fff)); box-shadow: inset 0 -6px 0 color-mix(in srgb, var(--c) 22%, transparent), 0 8px 0 color-mix(in srgb, var(--c) 45%, #fff), 0 14px 26px rgba(60, 30, 90, .16); text-align: center; cursor: pointer; transition: transform .15s; }
.rcard:active { transform: translateY(4px); }
.rc-img { width: 100%; aspect-ratio: 1.15; display: grid; place-items: center; border-radius: 20px; background: radial-gradient(circle at 50% 40%, #fff, color-mix(in srgb, var(--c) 20%, #fff) 75%); overflow: hidden; }
.rc-img .spr { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(40, 20, 70, .22)); animation: bdFloat 3.4s var(--d) ease-in-out infinite; }
.rc-ic { color: var(--c); }
.rc-ic .ic { width: 64px; height: 64px; }
.rc-name { font-size: clamp(17px, 4.6vw, 21px); font-weight: 900; color: #2b2d42; line-height: 1.15; }
.rc-desc { font-size: 13px; font-weight: 700; color: #6b5b95; line-height: 1.25; min-height: 2.5em; }
.rc-foot { display: flex; align-items: center; gap: 6px; width: 100%; }
.rc-bar { flex: 1; height: 8px; border-radius: 99px; background: #efe6fb; overflow: hidden; }
.rc-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffd34d, #ff9f1c); }
.rc-st { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 900; color: #b7791f; }
.rc-st .ic { width: 14px; height: 14px; color: #f5b301; }

/* 新機動遊戲（js/rides.js） */
.why-pic .pic img { width: 2.4em; height: 2.4em; }
.why-o { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; }
.why-kid { flex: none; font-size: 40px; line-height: 0; }
.why-say { flex: 1; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: #f3edff; font-size: clamp(15px, 4.2vw, 19px); font-weight: 800; line-height: 1.3; }
.why-say b { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: 4px; border-radius: 50%; background: #8b5cf6; color: #fff; font-size: .85em; }
.say-card { display: block; padding: 4px 6px; font-size: clamp(15px, 4.2vw, 19px); font-weight: 800; line-height: 1.3; }
.solve-sc { display: flex; align-items: center; gap: 12px; max-width: 560px; padding: 10px 14px; border-radius: 20px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 14px rgba(60, 30, 90, .12); text-align: left; }
.solve-sc .pic { font-size: 64px; flex: none; }
.solve-sc p { margin: 0; font-size: clamp(16px, 4.4vw, 20px); font-weight: 800; color: #3b2a63; }
.shop2 { padding: 8px 12px 10px; border-radius: 20px; background: linear-gradient(#fff7e6, #ffe6c2); box-shadow: 0 6px 14px rgba(120, 70, 20, .15); }
.shop2 b { display: block; margin-bottom: 4px; color: #9a5b13; }
.shelf2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; padding-bottom: 6px; border-bottom: 8px solid #c98436; font-size: 40px; }
.cmp { display: flex; align-items: center; justify-content: center; gap: 14px; }
.cmp-g { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 150px; gap: 2px; padding: 8px; border-radius: 18px; background: rgba(255, 255, 255, .9); font-size: 30px; }
.cmp-n { padding: 6px 16px; border-radius: 18px; background: rgba(255, 255, 255, .92); font-size: clamp(30px, 9vw, 46px); color: #2b2d42; }
.cmp-q { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fde047; font-size: 30px; font-weight: 900; box-shadow: 0 4px 0 #ca8a04; }
.sign { font-size: 1.6em; font-weight: 900; }
.opt .cmp-g { font-size: 34px; background: none; max-width: none; }
/* 線線迷宮 */
.tangle { position: relative; width: min(100%, 440px); aspect-ratio: 320 / 380; margin: 0 auto; border-radius: 26px; background: linear-gradient(#bfe6ff, #e6f6ff 55%, #c9eaa3 85%); box-shadow: 0 10px 24px rgba(40, 20, 80, .18); overflow: hidden; }
.tangle svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tl-out { fill: none; stroke: #5b8fb9; stroke-width: 14; stroke-linecap: round; }
.tl-in { fill: none; stroke-width: 9; stroke-linecap: round; }
.tl-run { fill: none; stroke: #fde047; stroke-width: 9; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
.tl-run.on { opacity: 1; }
.tl-dot { fill: #fff; stroke: #f59e0b; stroke-width: 4; }
.tl-top, .tl-bot { position: absolute; left: 0; right: 0; height: 17%; }
.tl-top { top: 0; }
.tl-bot { bottom: 0; }
.tl-thing, .tl-who { position: absolute; top: 50%; width: 19%; transform: translate(-50%, -50%); display: grid; place-items: center; font-size: clamp(34px, 10vw, 52px); }
.tl-thing .pic img { filter: hue-rotate(var(--hue)); }
.tl-thing.ask { animation: pulse 1s ease-in-out infinite; filter: drop-shadow(0 0 10px #fde047) drop-shadow(0 0 4px #fde047); }
.tl-who { padding: 4px; border: 3px solid #fff; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 4px 10px rgba(0, 0, 0, .15); cursor: pointer; }
.tl-who.ok { border-color: #22c55e; box-shadow: 0 0 0 4px #86efac; }
.tl-who.shake { animation: nope .45s; }
.ar-mole .m-sign { white-space: normal; max-width: 98%; width: max-content; font-size: clamp(12px, 3.4vw, 17px); line-height: 1.1; text-align: center; }
.ar-mole .m-sign .emo { font-size: 1.7em; }
.ar-train .wagon { width: clamp(84px, 22vw, 116px); }
.ar-train .wagon .sg { font-size: clamp(12px, 3.4vw, 17px); }

/* 完成關卡：煙花、星星鑽石雨（js/fun.js celebrate），結果頁用寶箱代替楚橋 */
.celebrate.fx { background: radial-gradient(circle at 50% 45%, rgba(255, 245, 255, .55), rgba(70, 30, 120, .35)); overflow: hidden; }
.cb-fw { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cb-drop { position: absolute; top: -60px; width: calc(34px * var(--s)); height: calc(34px * var(--s)); color: #ffd34d; filter: drop-shadow(0 3px 4px rgba(120, 60, 0, .35)); animation: cbFall var(--t) var(--d) cubic-bezier(.35, .1, .6, 1) forwards; pointer-events: none; }
.cb-drop .ic, .cb-drop svg { width: 100%; height: 100%; fill: currentColor; }
.cb-drop.gem { width: calc(30px * var(--s)); height: calc(30px * var(--s)); }
@keyframes cbFall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(calc(100vh + 120px)) rotate(var(--r)); opacity: .9; } }
.celebrate.fx .cb-say { font-size: clamp(26px, 7.5vw, 40px); padding: 16px 28px; background: linear-gradient(#fff, #fff3fb); color: #7c3aed; box-shadow: 0 10px 0 #e9d5ff, 0 18px 40px rgba(124, 58, 237, .35); animation: cbIn .6s cubic-bezier(.3, 1.6, .5, 1); }
.res-prize { position: relative; width: min(56vw, 240px); margin: 4px auto; animation: cbIn .7s cubic-bezier(.3, 1.6, .5, 1); }
.res-prize .spr { width: 100%; height: auto; filter: drop-shadow(0 14px 16px rgba(120, 60, 0, .3)); }
.res-prize::before { content: ""; position: absolute; inset: -18%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 230, 120, .9), rgba(255, 200, 80, .3) 50%, transparent 70%); animation: pulse 1.6s ease-in-out infinite; }
.res-prize.s1 .spr { filter: grayscale(.3) drop-shadow(0 14px 16px rgba(120, 60, 0, .3)); }

/* 找不同：轉了方向的東西 */
.si.flip { transform: translate(-50%, -50%) scaleX(-1); }
.si .pic img { width: 1.35em; height: 1.35em; filter: drop-shadow(0 .04em .05em rgba(40, 20, 60, .35)); }

/* 定期六維評估提示 */
.lb-check { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 8px; padding: 8px 14px 8px 8px; border: 3px solid #fff; border-radius: 22px; background: linear-gradient(90deg, #fff1b8, #ffd6ec); color: #6b2fb3; text-align: left; box-shadow: 0 6px 0 #f0b7d6, 0 10px 20px rgba(150, 60, 140, .2); animation: pulse 2s ease-in-out infinite; cursor: pointer; }
.lbc-img { width: 48px; height: 48px; flex: none; }
.lbc-txt { flex: 1; display: flex; flex-direction: column; }
.lbc-txt small { color: #8b5a9e; font-weight: 700; }
.check-next { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 8px auto; font-weight: 800; color: #6b5b95; }

/* 閱讀小偵探（js/reading.js） */
.rd-card { width: min(100%, 560px); padding: 12px 16px 14px; border-radius: 22px; background: linear-gradient(#fffdf5, #fff6dc); box-shadow: 0 8px 0 #f2dfa6, 0 14px 24px rgba(120, 80, 20, .15); text-align: left; }
.rd-title { display: block; margin-bottom: 6px; color: #b45309; font-size: clamp(18px, 5vw, 22px); }
.rd-text { margin: 0; font-size: clamp(17px, 4.6vw, 21px); line-height: 1.5; color: #2b2d42; font-weight: 700; }
.rd-clues { margin: 0; padding-left: 1.4em; font-size: clamp(17px, 4.6vw, 21px); line-height: 1.5; font-weight: 800; color: #3b2a63; }
.rd-card.riddle { background: linear-gradient(#f6f0ff, #ebe0ff); box-shadow: 0 8px 0 #d6c4fb, 0 14px 24px rgba(90, 50, 160, .15); }
.rd-card.riddle .rd-title { color: #7c3aed; }
.rd-card.invite { background: linear-gradient(#fff0f6, #ffe1ee); box-shadow: 0 8px 0 #f9c2da, 0 14px 24px rgba(160, 40, 90, .15); }
.rd-card.invite .rd-title { color: #db2777; }
.rd-list { margin: 8px 0 0; padding: 0; list-style: none; font-size: clamp(16px, 4.4vw, 20px); line-height: 1.6; font-weight: 700; }
.rd-table { width: 100%; border-collapse: collapse; font-size: clamp(15px, 4.2vw, 19px); font-weight: 800; }
.rd-table td { padding: 4px 6px; border-bottom: 2px dashed #f2dfa6; vertical-align: middle; }
.rd-table td small { display: block; color: #a16207; font-size: .75em; font-weight: 700; }
.rd-table .pic { font-size: 30px; }
.tf { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; color: #fff; }
.tf .ic { width: 70%; height: 70%; }
.tf.yes { background: #22c55e; }
.tf.no { background: #ef4444; }

/* 答案牌：不要把一個字拆開；牌的闊度跟內容（最闊不超過容器） */
.ar .sg { width: max-content; overflow-wrap: normal; word-break: normal; hyphens: none; }
.ar .wagon .sg, .ar .pl .sg, .ar .st .sg, .ar .bf .sg, .ar .ap .sg, .ar .bl .sg, .ar .lily .sg, .ar .bb .sg { max-width: 150%; }

/* 主頁兩邊的按鈕：大一點、立體一點 */
.lb-side { gap: 8px; }
.lb-ic { width: clamp(66px, 18vw, 84px); height: clamp(66px, 18vw, 84px); padding: 4px; border-radius: 30px;
  background: radial-gradient(circle at 35% 25%, #fff 0 18%, rgba(255, 255, 255, .92) 40%, #f1e6ff 100%);
  box-shadow: inset 0 -8px 0 rgba(124, 58, 237, .14), inset 0 5px 0 rgba(255, 255, 255, .9), 0 7px 0 #d8c4fb, 0 14px 24px rgba(124, 58, 237, .28); }
.lb-ic .spr { width: 112%; height: 112%; max-width: none; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(60, 30, 90, .3)); transition: transform .2s; }
.lb-btn:hover .lb-ic .spr, .lb-btn:active .lb-ic .spr { transform: scale(1.08) rotate(-4deg); }
.lb-name { font-size: clamp(13px, 3.6vw, 16px); }

/* ───── 放大：遊戲裏的東西跟遊戲框的闊度（cqw）一齊變大（客人：太細睇唔到） ───── */
.opts.field { max-width: 760px; }
.ar { container-type: inline-size; height: clamp(360px, 62vh, 640px); }
.ar .sg { font-size: clamp(18px, 5cqw, 34px); padding: .25em .5em; border-radius: .6em; }
.ar .sg .emo, .ar .sg .pic { font-size: 2em; }
.ar .sg .cap { font-size: .8em; }
.ar .sg .things, .ar .sg .group { font-size: 1em; }
.bl { width: clamp(100px, 26cqw, 190px); }
.ar-mole .m-sign { font-size: clamp(16px, 4.6cqw, 30px); }
.ar-mole .m-sign .emo, .ar-mole .m-sign .pic { font-size: 2em; }
.lily { width: clamp(100px, 27cqw, 200px); }
.frog { width: clamp(80px, 20cqw, 150px); margin-left: calc(clamp(80px, 20cqw, 150px) / -2); }
.chb .spr { width: min(100%, 32cqw); }
.bb { width: calc(clamp(96px, 24cqw, 180px) * var(--s)); }
.ar-train .wagon, .wagon { width: clamp(110px, 27cqw, 200px); }
.mytrain .engine { width: clamp(110px, 26cqw, 190px); }
.hooked { width: clamp(84px, 20cqw, 150px); }
.fishy { width: clamp(150px, 38cqw, 280px); height: clamp(120px, 30cqw, 230px); }
.pt { width: clamp(84px, 20cqw, 150px); }
.cauldron { width: clamp(150px, 36cqw, 260px); }
.hp .hp-img { width: min(100%, 30cqw); }
.st { width: clamp(96px, 24cqw, 180px); }
.jar { width: clamp(80px, 18cqw, 140px); }
.fl .fl-img { width: clamp(90px, 23cqw, 170px); }
.bee { width: clamp(70px, 16cqw, 120px); }
.honey { width: clamp(60px, 14cqw, 100px); }
.pl { width: clamp(100px, 25cqw, 190px); }
.rk { width: clamp(64px, 15cqw, 110px); margin-left: calc(clamp(64px, 15cqw, 110px) / -2); }
.ball { width: clamp(60px, 15cqw, 110px); margin-left: calc(clamp(60px, 15cqw, 110px) / -2); }
.bf { width: clamp(96px, 24cqw, 180px); }
.net { width: clamp(96px, 24cqw, 170px); margin-left: calc(clamp(96px, 24cqw, 170px) / -2); }
.ap { width: clamp(76px, 19cqw, 140px); }
.ar .basket { width: clamp(120px, 30cqw, 220px); height: auto; }
.drop { font-size: clamp(22px, 6cqw, 40px); }
.drop .emo, .drop .pic { font-size: 1.8em; }
.food-i { min-width: clamp(80px, 18cqw, 140px); height: clamp(80px, 18cqw, 140px); font-size: clamp(20px, 5cqw, 34px); }
.food-i .emo, .food-i .pic { font-size: 2em; }
.monster { width: clamp(160px, 38cqw, 280px); }
.blk3 { min-width: clamp(90px, 24cqw, 170px); height: clamp(60px, 15cqw, 100px); }
.ar .game-tag, .ar-tag { font-size: clamp(16px, 2.2vw, 20px); }
.quest i { width: 28px; height: 28px; }
.quest i .spr { width: 24px; height: 24px; }
/* 題目圖片也放大 */
.cmp-g { font-size: clamp(32px, 4.4vw, 54px); max-width: 220px; }
.cmp-n { font-size: clamp(34px, 6vw, 60px); }
/* 魚在池塘裏來回游，不會游出畫面 */
.ar-fish .fishy { animation-name: swimIn; }
@keyframes swimIn { 0% { left: 1%; } 50% { left: calc(99% - clamp(150px, 38cqw, 280px)); } 100% { left: 1%; } }
/* 答案牌再大一點 */
.ar .sg { font-size: clamp(20px, 6.2cqw, 38px); }
/* 橫向大畫面：遊戲佔多一點位置 */
@media (min-aspect-ratio: 5/4) and (min-width: 700px) {
  .play:has(.ar) .stim { flex: 0 1 36%; }
  .play:has(.ar) .opts { flex: 1 1 64%; max-width: 820px; }
  .play:has(.ar) .stim:empty { flex: 0 0 0; }
}
/* 平衡：圖片做主角，文字細一點；魚身上的牌跟魚的大小 */
.ar .sg { font-size: clamp(18px, 5cqw, 32px); }
.ar .sg .emo, .ar .sg .pic { font-size: 2.3em; }
.ar .sg .cap { font-size: .68em; }
.ar-fish .fishy { width: clamp(150px, 34cqw, 250px); height: clamp(110px, 24cqw, 180px); }
.ar-fish .f-sign { font-size: clamp(15px, 3.8cqw, 26px); }
@keyframes swimIn { 0% { left: 1%; } 50% { left: calc(99% - clamp(150px, 34cqw, 250px)); } 100% { left: 1%; } }
/* 大畫面：遊戲關卡把題目圖片放上面，遊戲用全闊 */
@media (min-aspect-ratio: 5/4) and (min-width: 700px) {
  .play:has(.ar) { flex-direction: column; align-items: center; }
  .play:has(.ar) .stim { flex: 0 0 auto; max-width: 100%; }
  .play:has(.ar) .opts { flex: 0 0 auto; width: min(100%, 860px); max-width: 860px; }
  .ar { height: clamp(340px, 58vh, 620px); }
}
.ar .sg .cap { font-size: .8em; }
/* 打地鼠：地洞填滿遊戲框，地鼠和牌都大一點 */
.ar-mole .mole-field { display: grid; grid-auto-rows: 1fr; height: 100%; padding: 6px; gap: 6px 10px; }
.ar-mole .hole { aspect-ratio: auto; height: 100%; }
.ar-mole .mole { left: 2%; right: 2%; }
.ar-mole .m-body { object-fit: contain; object-position: 50% 100%; }
.ar-mole .m-sign { font-size: clamp(18px, 6cqw, 34px); top: 0; }
/* 每日驚喜：放在楚橋旁邊（客人要求） */
.lb-mid { position: relative; }
.lb-gift { position: absolute; left: 50%; bottom: 3%; z-index: 3; width: clamp(80px, 21vw, 108px); margin-left: calc(-1 * clamp(104px, 25vw, 124px)); padding: 0; border: 0; background: none; cursor: pointer; animation: giftHop 2.4s ease-in-out infinite; }
.lbg-img { width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(217, 70, 122, .35)); }
.lbg-name { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); white-space: nowrap; padding: 2px 10px; border-radius: 99px; background: linear-gradient(#ffd34d, #ff7aa8); color: #fff; font-weight: 900; font-size: clamp(13px, 3.4vw, 16px); text-shadow: 0 1px 0 rgba(0, 0, 0, .2); box-shadow: 0 3px 0 #d9467a; }
.lb-gift .lb-dot { position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px #fff; }
.lb-gift:active { transform: scale(.94); }
@keyframes giftHop { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 78% { transform: translateY(-12px) rotate(-6deg); } 86% { transform: translateY(0) rotate(5deg); } 92% { transform: translateY(-5px) rotate(-2deg); } }
.lb-gos .lb-go { flex: 0 1 auto; min-width: min(80vw, 360px); }
/* 升級：大大的等級徽章（不用楚橋） */
.lvup-badge { position: relative; width: 150px; height: 150px; margin: 10px auto 4px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c2, #ffd34d 45%, #f59e0b 80%); box-shadow: inset 0 -10px 0 rgba(180, 90, 0, .25), inset 0 8px 0 rgba(255, 255, 255, .6), 0 10px 0 #c2700a, 0 18px 40px rgba(245, 158, 11, .5); animation: cbIn .7s cubic-bezier(.3, 1.6, .5, 1); }
.lvup-badge b { font-size: 72px; font-weight: 900; color: #fff; text-shadow: 0 4px 0 #b45309, 0 0 18px rgba(255, 255, 255, .6); }
.lvup-badge .lvup-crown { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 56px; height: 56px; color: #f5b301; }
.lvup-badge .lvup-crown .ic { width: 100%; height: 100%; fill: #ffd34d; }
.lvup-star { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; color: #ffd34d; transform: rotate(calc(var(--k) * 72deg)) translateY(-96px); animation: lvStar 1.6s calc(var(--k) * .12s) ease-in-out infinite; }
.lvup-star .ic { width: 100%; height: 100%; fill: currentColor; }
@keyframes lvStar { 50% { scale: 1.4; filter: drop-shadow(0 0 8px #fff3a0); } }
/* 每題答完的讚美：沒有楚橋，只有一條有星星的字句，在畫面上方中間 */
.cheer.slim { left: 0; right: 0; top: calc(max(10px, env(safe-area-inset-top)) + 150px); bottom: auto; justify-content: center; align-items: center; animation: slimIn .45s cubic-bezier(.3, 1.6, .5, 1); }
.cheer.slim.out { animation: slimOut .4s forwards; }
@keyframes slimIn { from { transform: translateY(-24px) scale(.6); opacity: 0; } }
@keyframes slimOut { to { transform: translateY(-20px) scale(.8); opacity: 0; } }
.cheer.slim .cheer-bubble { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 99px; font-size: clamp(20px, 5.4vw, 28px); white-space: nowrap; }
.cheer.slim .cheer-bubble::before { display: none; }
.cheer.slim .cb-st { display: inline-grid; width: 1.1em; height: 1.1em; color: #f5b301; animation: lvStar 1s ease-in-out infinite; }
.cheer.slim .cb-st .ic { width: 100%; height: 100%; fill: currentColor; }
.opt .cmp-g { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: none; gap: 4px; background: none; }
.opt .cmp-g .pic, .opt .cmp-g .emo { font-size: clamp(30px, 8vw, 44px); }

/* ───── 所有關卡：答案卡大一點（客人：太細，全部關卡都要留意） ───── */
.opts { max-width: calc(var(--cols, 3) * 210px); }
.opts.pairs { max-width: calc(var(--cols) * 170px); }
.opts.words, .opts.rows { max-width: 760px; }
.opts.rows .opt, .opts.words .opt { font-size: clamp(17px, 2.2vw, 24px); min-height: 72px; }
.opts.cards .opt .cap, .opt .cap { font-size: clamp(16px, 2vw, 24px); }
@media (min-aspect-ratio: 5/4) and (min-width: 700px) {
  .play { flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; }
  .play .stim, .play .opts { flex: 0 0 auto; }
  .play .stim { width: 100%; }
  .play .stim .big .pic, .play .stim .big .emo { font-size: clamp(90px, 14vh, 150px); }
}
.opts.rows { grid-template-columns: 1fr !important; }
@media (min-aspect-ratio: 5/4) and (min-width: 700px) {
  .play:has(.ar):has(.stim:not(:empty)) .ar { height: clamp(300px, calc(100vh - 430px), 560px); }
  .play .stim .big .pic, .play .stim .big .emo { font-size: clamp(80px, 12vh, 130px); }
  .play:has(.ar) .stim .big .pic, .play:has(.ar) .stim .big .emo { font-size: clamp(70px, 10vh, 110px); }
}
.why-o .why-kid { width: clamp(52px, 7vw, 72px); font-size: 0; }
.why-o .why-kid .pic, .why-o .why-kid .emo { font-size: clamp(40px, 5.6vw, 58px) !important; }
.why-o .why-kid img { width: 1.25em !important; height: 1.25em !important; }
.opts.rows .opt { min-height: 76px; }
.why-say { font-size: clamp(17px, 2.3vw, 24px); }
/* 隨機玩：轉盤 */
.spin-box { width: clamp(160px, 40vw, 220px); aspect-ratio: 1; margin: 20px auto 10px; overflow: hidden; border: 6px solid #fff; border-radius: 36px; background: radial-gradient(circle at 50% 40%, #fff, #f3e8ff 70%); box-shadow: inset 0 -8px 0 rgba(124, 58, 237, .12), 0 10px 0 #d8c4fb, 0 18px 36px rgba(124, 58, 237, .3); }
.spin-reel { height: 100%; }
.spin-it { display: grid; place-items: center; height: 100%; }
.spin-it .spr { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(60, 30, 90, .25)); }
.spin-res { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; transform: scale(.7); transition: opacity .35s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.spin-res.on { opacity: 1; transform: none; }
.spin-screen { display: flex; flex-direction: column; align-items: center; }
.spin-screen .topbar, .spin-screen > header { align-self: stretch; }
/* 開寶箱：寶箱大小要同時放得入闊度和高度（6 個寶箱時不會遮住答案） */
.ar-chest { grid-auto-rows: minmax(0, 1fr); align-content: stretch; padding: 12px; }
.chb { min-height: 0; height: 100%; justify-content: center; }
.chb .spr { width: auto; height: auto; max-width: min(100%, 30cqw); max-height: calc(100% - 2.6em); object-fit: contain; }
.chb .sg { margin-top: -6px; flex: none; }

/* ───── 全部遊戲檢查後的修正 ───── */
/* 有圖的答案牌：圖在上、字在下，窄一點，不會遮住遊戲裏的東西 */
.ar .sg:has(.pic), .ar .sg:has(.emo) { flex-direction: column; gap: 0; padding: .15em .35em .2em; line-height: 1; }
.ar .sg:has(.pic) .cap, .ar .sg:has(.emo) .cap { font-size: .62em; margin-top: .1em; white-space: nowrap; }
/* 貼在東西上面的牌細一點 */
.bl .sg, .bb .sg, .lily .sg, .fishy .sg, .pl .sg, .st .sg, .bf .sg, .ap .sg, .wagon .sg, .hooked .sg { font-size: clamp(13px, 3.4cqw, 24px); }
.ar-balloon.many .bl { width: clamp(76px, 17cqw, 140px); }
/* 射龍門：目標在守門員前面 */
.targets { z-index: 4; }
.keeper { z-index: 3; width: 18%; }
/* 餵怪獸：食物多時細一點，不會跌出框外 */
.ar-feed .food { max-width: 100%; }
.ar-feed .food-i { min-width: clamp(62px, 14cqw, 120px); height: clamp(62px, 14cqw, 120px); font-size: clamp(18px, 4.4cqw, 30px); }
.ar-feed .monster { width: clamp(130px, 30cqw, 230px); }
/* 小蜜蜂：花朵跟高度，兩行都看得到 */
.meadow { grid-auto-rows: minmax(0, 1fr); }
.fl { min-height: 0; height: 100%; justify-content: flex-start; }
.fl .fl-img { width: auto; max-width: clamp(70px, 20cqw, 150px); max-height: calc(100% - 2.6em); object-fit: contain; }
.ar .sg:has(.pic) .cap, .ar .sg:has(.emo) .cap { font-size: .74em; }

/* ───── 遊戲框跟剩下的高度：有題目圖片時不會跌出畫面 ───── */
.game:has(.ar) { height: 100vh; height: 100dvh; min-height: 0; }
.game:has(.ar) .play { flex: 1 1 auto; min-height: 0; }
.play:has(.ar) .opts.field { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.play .opts.field .ar { flex: 1 1 auto; height: auto !important; min-height: 240px; max-height: 660px; }
.play:has(.ar) .stim:not(:empty) { flex: 0 0 auto; }
/* 大畫面：非遊戲的題目（開小店、積木、排句子等）放大 */
@media (min-width: 1000px) and (min-height: 700px) {
  .game .play:not(:has(.ar)):not(:has(.spot)):not(:has(.maze)):not(:has(.tangle)):not(:has(.rc)):not(:has(.gd)) { zoom: 1.25; }
}
@media (min-width: 1400px) and (min-height: 860px) {
  .game .play:not(:has(.ar)):not(:has(.spot)):not(:has(.maze)):not(:has(.tangle)):not(:has(.rc)):not(:has(.gd)) { zoom: 1.4; }
}

/* 楚楚（js/buddy.js）：左下角，小朋友需要幫忙時才出來 */
.chuchu { position: fixed; left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); z-index: 46; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; transform: translateX(-130%); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.chuchu.in { transform: none; }
.chuchu .cc-img { width: clamp(80px, 21vw, 120px); height: auto; filter: drop-shadow(0 8px 12px rgba(180, 140, 0, .35)); }
.chuchu.in .cc-img { animation: bdTalk .6s ease-in-out 3; }
.cc-say { max-width: min(64vw, 340px); margin-bottom: 40%; padding: 10px 14px; border-radius: 18px 18px 18px 4px; background: linear-gradient(#fffbea, #fff3c4); color: #6b4c00; font-size: clamp(15px, 3.9vw, 19px); font-weight: 800; line-height: 1.35; box-shadow: 0 5px 0 #f5d76e, 0 10px 22px rgba(180, 140, 0, .25); }
/* 隨機玩：拉霸機 */
.slotm { position: relative; width: min(94vw, 560px); margin: 16px auto 8px; padding: 22px 18px 20px; border-radius: 36px; background: linear-gradient(160deg, #ff8fc7, #b06bff 55%, #6d5bff); box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .18), inset 0 8px 0 rgba(255, 255, 255, .35), 0 12px 0 #5b3cc4, 0 22px 44px rgba(91, 60, 196, .45); }
.slot-lights { position: absolute; inset: 8px; pointer-events: none; }
.slot-lights i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fff6a8; box-shadow: 0 0 10px #ffe14d; animation: bulb .8s calc(var(--k) * .1s) ease-in-out infinite alternate; }
.slot-lights i:nth-child(-n+7) { top: -2px; left: calc(var(--k) * 15% + 4%); }
.slot-lights i:nth-child(n+8) { bottom: -2px; left: calc((var(--k) - 7) * 15% + 4%); }
@keyframes bulb { from { opacity: .35; transform: scale(.8); } to { opacity: 1; transform: scale(1.15); } }
.slotm.won .slot-lights i { animation-duration: .25s; }
.slot-title { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; color: #fff; font-size: clamp(22px, 6vw, 32px); font-weight: 900; text-shadow: 0 3px 0 rgba(80, 30, 140, .5); }
.slot-title .ic { width: 1em; height: 1em; color: #ffe14d; }
.slot-reels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.slot-win { height: clamp(170px, 42vw, 250px); overflow: hidden; border-radius: 24px; background: linear-gradient(#fff, #f6f0ff 50%, #fff); box-shadow: inset 0 10px 14px rgba(60, 30, 120, .25), inset 0 -10px 14px rgba(60, 30, 120, .25), 0 0 0 5px #ffe14d; transition: box-shadow .3s; }
.slot-win.stop { box-shadow: inset 0 6px 10px rgba(60, 30, 120, .15), inset 0 -6px 10px rgba(60, 30, 120, .15), 0 0 0 5px #ffe14d, 0 0 24px 6px #fff3a0; animation: popIn .35s; }
.slot-reel { height: 100%; }
.slot-it { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; }
.slot-it .spr { width: 62%; height: 62%; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(60, 30, 90, .25)); }
.slot-it b { font-size: clamp(15px, 4vw, 20px); color: #4c1d95; }
.slot-it.dimc .dim-ic.big { width: clamp(80px, 20vw, 120px); height: clamp(80px, 20vw, 120px); font-size: clamp(34px, 9vw, 52px); background: var(--c); }
.spin-res h2 { font-size: clamp(22px, 5.6vw, 30px); }
.fb-e.ph i, .pic.noimg .fb-e.ph i { display: inline-block; width: 1em; height: 1em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e9d5ff); box-shadow: 0 0 12px rgba(196, 140, 255, .6); vertical-align: middle; }

/* ───── 遊戲裏的東西跟遊戲框的闊度和高度一齊調整（上面有題目文章時也不會被切走） ───── */
.play .opts.field .ar { container-type: size; }
.ar .sg { font-size: clamp(14px, min(5cqw, 6cqh), 32px); }
.bl .sg, .bb .sg, .lily .sg, .fishy .sg, .pl .sg, .st .sg, .bf .sg, .ap .sg, .wagon .sg, .hooked .sg { font-size: clamp(12px, min(3.4cqw, 4.2cqh), 24px); }
.bl { width: min(26cqw, 30cqh); }
.ar-balloon.many .bl { width: min(17cqw, 24cqh); }
.lily { width: min(27cqw, calc(120cqh / var(--rows, 3))); }
.frog { width: min(20cqw, 20cqh); margin-left: calc(min(20cqw, 20cqh) / -2); }
.chb .spr { max-width: min(30cqw, 30cqh); }
.bb { width: calc(min(24cqw, 28cqh) * var(--s)); }
.ar-train .wagon, .wagon { width: min(27cqw, 34cqh); }
.mytrain .engine { width: min(26cqw, 30cqh); }
.hooked { width: min(20cqw, 24cqh); }
.ar-fish .fishy { width: min(34cqw, 40cqh); height: min(24cqw, calc(70cqh / var(--n, 4))); }
@keyframes swimIn { 0% { left: 1%; } 50% { left: calc(99% - min(34cqw, 40cqh)); } 100% { left: 1%; } }
.pt { width: min(20cqw, 22cqh); }
.cauldron { width: min(36cqw, 34cqh); }
.hp .hp-img { width: min(30cqw, 40cqh); }
.hp .sg { margin-top: -2px; }
.st { width: min(24cqw, 22cqh); }
.jar { width: min(18cqw, 18cqh); }
.fl .fl-img { max-width: min(20cqw, 24cqh); }
.bee { width: min(16cqw, 16cqh); }
.pl { width: min(25cqw, 22cqh); }
.rk { width: min(15cqw, 16cqh); margin-left: calc(min(15cqw, 16cqh) / -2); }
.ball { width: min(15cqw, 14cqh); margin-left: calc(min(15cqw, 14cqh) / -2); }
.bf { width: min(24cqw, 22cqh); }
.ap { width: min(19cqw, 15cqh); }
.ar .basket { width: min(30cqw, 26cqh); }
.ar-feed .monster { width: min(30cqw, 38cqh); }
.ar-feed .food-i { min-width: min(14cqw, 20cqh); height: min(14cqw, 20cqh); }
.blk3 { min-width: min(24cqw, 30cqh); height: min(15cqw, 18cqh); }
.ar-mole .mole-field { padding-top: max(10px, 9cqh); }

/* 聽指令（js/follow.js） */
.follow { position: relative; width: min(100%, 860px); aspect-ratio: 4 / 3; max-height: calc(100dvh - 230px); margin: 0 auto; container-type: inline-size; border-radius: 26px; overflow: hidden; background: #f6efe4; box-shadow: 0 10px 24px rgba(40, 20, 80, .18); }
.fo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fo-steps { position: absolute; left: 50%; top: 8px; z-index: 3; display: flex; gap: 6px; transform: translateX(-50%); padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .85); }
.fo-steps i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #efe6fb; color: #8b7bb0; font-style: normal; font-weight: 900; }
.fo-steps i.on { background: #22c55e; color: #fff; animation: popIn .3s; }
.fo { position: absolute; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1; z-index: 1; }
.fo .pic img { width: 1em; height: 1em; filter: drop-shadow(0 .05em .06em rgba(40, 20, 60, .35)); transition: transform .2s; }
.fo:hover .pic img { transform: scale(1.06); }
.fo-cap { margin-top: 2px; padding: 1px 8px; border-radius: 99px; background: rgba(255, 255, 255, .92); color: #3b2a63; font-size: clamp(11px, 2.2cqw, 17px); font-weight: 900; white-space: nowrap; box-shadow: 0 2px 0 rgba(0, 0, 0, .1); }
.fo-n { position: absolute; top: -6px; right: -6px; width: clamp(20px, 3.6cqw, 30px); height: clamp(20px, 3.6cqw, 30px); display: grid; place-items: center; border-radius: 50%; background: #22c55e; color: #fff; font-size: clamp(12px, 2.2cqw, 18px); font-weight: 900; box-shadow: 0 0 0 3px #fff; }
.fo.done .pic img { filter: drop-shadow(0 0 .08em #4ade80) drop-shadow(0 .05em .06em rgba(40, 20, 60, .35)); }
.fo.shake { animation: nope .45s; }
.fo.hint .pic img { animation: pulse 1s ease-in-out infinite; filter: drop-shadow(0 0 .12em #fde047) drop-shadow(0 0 .05em #fde047); }
.follow { width: min(100%, 860px, calc((100dvh - 250px) * 4 / 3)); max-height: none; }

/* 楚楚老師：問「需要幫忙嗎？」的按鈕；拿走的錯誤答案 */
.chuchu.asking { pointer-events: auto; }
.chuchu.asking .cc-say { pointer-events: auto; }
.cc-text { display: block; }
.cc-btns { display: flex; gap: 8px; margin-top: 8px; }
.cc-b { flex: 1; padding: 10px 14px; border: 0; border-radius: 99px; background: linear-gradient(#ffd34d, #f59e0b); color: #fff; font: inherit; font-weight: 900; font-size: clamp(16px, 4.2vw, 20px); text-shadow: 0 1px 0 rgba(0, 0, 0, .2); box-shadow: 0 4px 0 #c2700a; cursor: pointer; }
.cc-b.no { background: #fff; color: #8a6400; text-shadow: none; box-shadow: 0 4px 0 #f0d79a; }
.cc-b:active { transform: translateY(3px); box-shadow: 0 1px 0 #c2700a; }
.cc-out { opacity: .18 !important; filter: grayscale(1); pointer-events: none !important; transition: opacity .4s; }
/* 隨機玩：主頁底部，和「開始冒險」一樣大、一樣顯眼 */
.lb-gos { flex-wrap: nowrap; }
.lb-gos .lb-go { flex: 1 1 0; min-width: 0; }
.lb-go.lb-random { background: linear-gradient(#7ee8fa, #3fa8ff 55%, #3a6dff); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .15), inset 0 4px 0 rgba(255, 255, 255, .45), 0 10px 0 #2747c4, 0 18px 30px rgba(39, 71, 196, .4); animation: giftHop 3s ease-in-out infinite; }
.lb-go .lb-goimg { width: clamp(44px, 12vw, 60px); height: clamp(44px, 12vw, 60px); object-fit: contain; }
.lb-gos .lb-go { padding: 6px 10px; gap: 6px; font-size: clamp(17px, 4.6vw, 24px); letter-spacing: 0; white-space: nowrap; }
.lb-gos .lb-goimg { width: clamp(38px, 10vw, 52px) !important; height: clamp(38px, 10vw, 52px) !important; }
.lobby { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.lb-mission { padding-top: 6px; padding-bottom: 6px; }
.big-word { font-size: clamp(24px, 3.4vw, 36px); font-weight: 900; color: #3b2a63; padding: 10px 4px; }

/* ───── 主頁：電影感（鏡頭慢慢推近、光線、飄浮的光點、暗角），楚橋會轉動作 ───── */
.lobby.cine { background: #2a1d4f; isolation: isolate; }
.lb-cam { position: absolute; inset: -6%; z-index: -3; background-size: cover; background-position: center; animation: camDrift 28s ease-in-out infinite alternate; }
@keyframes camDrift { 0% { transform: scale(1.02) translate(0, 0); } 50% { transform: scale(1.1) translate(-2%, 1.5%); } 100% { transform: scale(1.06) translate(2%, -1%); } }
.lb-rays { position: absolute; left: 50%; top: 8%; z-index: -2; width: 160%; aspect-ratio: 1; transform: translateX(-50%); pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(255, 250, 220, .16) 0 6deg, transparent 6deg 18deg); mask: radial-gradient(circle, #000 10%, transparent 62%); -webkit-mask: radial-gradient(circle, #000 10%, transparent 62%); animation: raySpin 60s linear infinite; mix-blend-mode: screen; }
@keyframes raySpin { to { transform: translateX(-50%) rotate(360deg); } }
.lb-motes { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.lb-motes i { position: absolute; left: var(--x); bottom: -20px; width: calc(10px * var(--s)); height: calc(10px * var(--s)); border-radius: 50%; background: radial-gradient(circle, #fff, rgba(255, 236, 170, .8) 40%, transparent 70%); box-shadow: 0 0 12px rgba(255, 240, 190, .9); animation: mote var(--t) var(--d) linear infinite; }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(30px, -110vh); opacity: 0; } }
.lb-vig { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(40, 20, 80, .35)); }
.lobby.cine .lb-logo { animation: logoIn 1.2s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes logoIn { from { transform: translateY(-40px) scale(.8); opacity: 0; } }
.lobby.cine .lb-side .lb-btn { animation: sideIn .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.lobby.cine .lb-side .lb-btn:nth-child(2) { animation-delay: .1s; } .lobby.cine .lb-side .lb-btn:nth-child(3) { animation-delay: .2s; } .lobby.cine .lb-side .lb-btn:nth-child(4) { animation-delay: .3s; }
@keyframes sideIn { from { transform: scale(.4); opacity: 0; } }
/* 楚橋：出場 + 呼吸 + 每個動作有自己的動畫 */
.lobby.cine .lb-owl { animation: owlEnter 1s cubic-bezier(.2, 1.5, .4, 1) both, owlBreathe 2.6s 1s ease-in-out infinite; transform-origin: 50% 95%; filter: drop-shadow(0 18px 16px rgba(76, 29, 149, .35)) drop-shadow(0 0 22px rgba(255, 230, 180, .45)); }
@keyframes owlEnter { from { transform: translateY(60px) scale(.5); opacity: 0; } }
@keyframes owlBreathe { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-10px) scale(1.03, .97); } }
.lobby.cine .lb-owl.lb-wave { animation: owlWave 1.4s ease-in-out, owlBreathe 2.6s 1.4s ease-in-out infinite; }
.lobby.cine .lb-owl.lb-jump { animation: owlJump .9s cubic-bezier(.3, .6, .4, 1) 2, owlBreathe 2.6s 1.8s ease-in-out infinite; }
.lobby.cine .lb-owl.lb-tilt { animation: owlTilt 2s ease-in-out, owlBreathe 2.6s 2s ease-in-out infinite; }
.lobby.cine .lb-owl.lb-pump { animation: owlPump .5s ease-in-out 3, owlBreathe 2.6s 1.5s ease-in-out infinite; }
@keyframes owlWave { 25% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-4deg); } }
@keyframes owlJump { 0% { transform: scale(1.1, .9); } 40% { transform: translateY(-50px) scale(.94, 1.08) rotate(-4deg); } 70% { transform: translateY(0) scale(1.12, .88); } 100% { transform: none; } }
@keyframes owlTilt { 30%, 70% { transform: rotate(-9deg) translateX(-6px); } }
@keyframes owlPump { 50% { transform: translateY(-14px) scale(1.05); } }
.lobby.cine .lb-hero::after { animation: shadowPulse 2.6s 1s ease-in-out infinite; }
@keyframes shadowPulse { 50% { transform: scale(.85); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .lb-cam, .lb-rays, .lb-motes i, .lobby.cine .lb-owl { animation: none !important; } }
.lib-levels { flex-wrap: wrap; justify-content: center; overflow: visible; }
/* 先聽完故事：楚橋聽的樣子 */
.listen-wait { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px auto; padding: 8px 18px 8px 8px; width: max-content; max-width: 100%; border-radius: 99px; background: rgba(255, 255, 255, .92); color: #6b2fb3; font-weight: 900; font-size: clamp(16px, 4.2vw, 20px); box-shadow: 0 6px 16px rgba(60, 30, 90, .15); animation: pulse 1.6s ease-in-out infinite; }
.listen-wait .owl, .listen-wait img { width: 56px; height: auto; }
.bl .sg .pic, .bb .sg .pic, .wagon .sg .pic, .hooked .sg .pic, .lily .sg .pic, .pl .sg .pic, .st .sg .pic, .bf .sg .pic, .ap .sg .pic, .fishy .sg .pic { font-size: 3.4em; }

/* ───── 大一點、吸引一點：答案牌、題目、答案卡 ───── */
.ar .sg { font-size: clamp(16px, min(5.6cqw, 6.6cqh), 36px); padding: .28em .55em .32em; border-radius: .75em; background: linear-gradient(#ffffff, #fff6fc); border: 3px solid #fff; color: #3b2a63; font-weight: 900;
  box-shadow: 0 0 0 3px #f2c9ff, 0 6px 0 rgba(140, 70, 190, .22), 0 12px 20px rgba(60, 30, 90, .2); }
.ar .sg:has(.pic) .pic, .ar .sg:has(.emo) .emo { font-size: 2.9em; }
.ar .sg:has(.pic) .cap, .ar .sg:has(.emo) .cap { font-size: .78em; color: #4c1d95; }
.bl .sg .pic, .bb .sg .pic, .wagon .sg .pic, .hooked .sg .pic, .lily .sg .pic, .pl .sg .pic, .st .sg .pic, .bf .sg .pic, .ap .sg .pic, .fishy .sg .pic { font-size: 3.8em; }
.ar .sg .num, .ar .sg .letter, .ar .sg .word { font-size: 1.25em; }
.ar .sg .pic img { filter: drop-shadow(0 .05em .05em rgba(40, 20, 60, .25)); }
.chb .sg, .hp .sg, .tg .sg, .fl .sg { box-shadow: 0 0 0 3px #ffd166, 0 6px 0 rgba(200, 130, 0, .3), 0 12px 20px rgba(60, 30, 90, .2); }
/* 題目文字 */
.game .prompt .bubble { font-size: clamp(20px, 2.8vw, 30px); font-weight: 800; line-height: 1.35; padding: 12px 18px; }
/* 一般答案卡：圖片和字都大一點 */
.game .opts.cards .opt .pic, .game .opts.cards .opt .emo { font-size: min(52cqw, 120px); }
.game .opt .cap { font-size: clamp(18px, 2.4vw, 26px); font-weight: 900; color: #3b2a63; }
.game .opt .word { font-size: clamp(22px, 3vw, 34px); font-weight: 900; }
.game .opts { gap: 14px; }
/* 平衡：貼在東西上的牌不要遮住東西；火車卡卡的圖大一點 */
.bl .sg, .bb .sg, .lily .sg, .pl .sg, .st .sg, .bf .sg, .ap .sg, .fishy .sg { font-size: clamp(11px, min(2.7cqw, 3.3cqh), 19px); }
.bl .sg .pic, .bb .sg .pic, .lily .sg .pic, .pl .sg .pic, .st .sg .pic, .bf .sg .pic, .ap .sg .pic, .fishy .sg .pic { font-size: 3.6em; }
.wagon .sg, .hooked .sg { font-size: clamp(12px, min(3.4cqw, 4cqh), 21px); top: 4%; }
.wagon .sg .pic, .hooked .sg .pic { font-size: 3.4em; }
.bl { width: min(30cqw, 34cqh); }
.ar-balloon.many .bl { width: min(19cqw, 26cqh); }
.bl .sg { top: 14%; }
.bl .sg, .bb .sg, .lily .sg, .pl .sg, .st .sg, .bf .sg, .ap .sg, .fishy .sg { font-size: clamp(13px, min(3.6cqw, 4.2cqh), 22px); }
.bl .sg .pic, .bb .sg .pic, .lily .sg .pic, .pl .sg .pic, .st .sg .pic, .bf .sg .pic, .ap .sg .pic, .fishy .sg .pic { font-size: 3.2em; }
.wagon .sg, .hooked .sg { font-size: clamp(13px, min(3.8cqw, 4.4cqh), 22px); }
.bl .sg .cap, .bb .sg .cap, .lily .sg .cap, .pl .sg .cap, .st .sg .cap, .bf .sg .cap, .ap .sg .cap, .fishy .sg .cap, .wagon .sg .cap, .hooked .sg .cap { font-size: 1em; }
/* 安全：按高度計的大小不會變成 0 */
.ap { width: clamp(52px, min(19cqw, 15cqh), 140px); }
.bl { width: clamp(64px, min(30cqw, 34cqh), 200px); }
.ar-balloon.many .bl { width: clamp(54px, min(19cqw, 26cqh), 150px); }
.lily { width: clamp(70px, min(27cqw, calc(120cqh / var(--rows, 3))), 200px); }
.frog { width: clamp(56px, min(20cqw, 20cqh), 150px); }
.chb .spr { max-width: clamp(60px, min(30cqw, 30cqh), 220px); }
.bb { width: calc(clamp(64px, min(24cqw, 28cqh), 180px) * var(--s)); }
.ar-train .wagon, .wagon { width: clamp(80px, min(27cqw, 34cqh), 200px); }
.mytrain .engine { width: clamp(80px, min(26cqw, 30cqh), 190px); }
.hooked { width: clamp(60px, min(20cqw, 24cqh), 150px); }
.pt { width: clamp(56px, min(20cqw, 22cqh), 150px); }
.cauldron { width: clamp(100px, min(36cqw, 34cqh), 260px); }
.hp .hp-img { width: clamp(70px, min(30cqw, 40cqh), 220px); }
.st { width: clamp(60px, min(24cqw, 22cqh), 180px); }
.jar { width: clamp(50px, min(18cqw, 18cqh), 140px); }
.fl .fl-img { max-width: clamp(56px, min(20cqw, 24cqh), 170px); }
.bee { width: clamp(44px, min(16cqw, 16cqh), 120px); }
.pl { width: clamp(64px, min(25cqw, 22cqh), 190px); }
.rk { width: clamp(44px, min(15cqw, 16cqh), 110px); }
.ball { width: clamp(40px, min(15cqw, 14cqh), 110px); }
.bf { width: clamp(60px, min(24cqw, 22cqh), 180px); }
.ar .basket { width: clamp(80px, min(30cqw, 26cqh), 220px); }
.ar-feed .monster { width: clamp(100px, min(30cqw, 38cqh), 280px); }
.ar-feed .food-i { min-width: clamp(56px, min(14cqw, 20cqh), 140px); height: clamp(56px, min(14cqw, 20cqh), 140px); }
.blk3 { min-width: clamp(70px, min(24cqw, 30cqh), 170px); height: clamp(46px, min(15cqw, 18cqh), 100px); }
/* 投籃：籃框不會超出遊戲框 */
.hoops { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.hp { min-width: 0; }
.hp .hp-img { width: min(100%, clamp(60px, min(30cqw, 40cqh), 200px)); }
/* 魔法藥水：藥水樽排成一行，不會被大鍋遮住 */
.pshelf { flex-wrap: nowrap; gap: 4px; }
.pt { width: clamp(44px, min(14.5cqw, 22cqh), 140px); flex: 0 1 auto; min-width: 0; }
.cauldron { width: clamp(90px, min(30cqw, 30cqh), 230px); }
.hp .sg .word, .tg .sg .word, .chb .sg .word { font-size: 1em; line-height: 1.05; }
.tr-box { position: relative; } .tr-ghost { position: absolute; inset: 0; display: grid; place-items: center; font-size: min(230px, 62vw); font-family: "KaiTi", "BiauKai", "DFKai-SB", serif; color: #e8dcc6; pointer-events: none; line-height: 1; }

/* 積木世界（重新設計，js/blocks.js） */
.bw { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(100%, 720px); margin: 0 auto; }
.bw-model { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 20px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 16px rgba(60, 30, 90, .15); transition: opacity .4s; }
.bw-model b { color: #7c3aed; font-size: 18px; display: flex; align-items: center; gap: 4px; }
.bw-model.hidden { background: rgba(255, 255, 255, .7); }
.bw-mini { display: grid; grid-template-columns: repeat(var(--w), 22px); grid-auto-rows: 22px; gap: 2px; }
.bw-mini .bw-cube { width: 22px; height: 22px; border-radius: 5px; }
.bw-stage { width: 100%; display: grid; place-items: center; padding: 18px 10px; border-radius: 28px; background: radial-gradient(circle at 50% 30%, #fff8e6, #ffe0b3 70%, #f5c27a); box-shadow: inset 0 -10px 0 rgba(160, 90, 20, .15), 0 10px 24px rgba(120, 60, 0, .2); overflow: hidden; }
.bw-grid { --s: min(64px, calc((min(100vw, 700px) - 80px) / var(--w)), calc(38vh / var(--h))); display: grid; grid-template-columns: repeat(var(--w), var(--s)); grid-auto-rows: var(--s); gap: 4px; }
.bw-gap { display: block; }
.bw-slot { position: relative; padding: 0; border: 3px dashed rgba(120, 70, 20, .35); border-radius: 12px; background: color-mix(in srgb, var(--gc, #ffffff) 22%, rgba(255, 255, 255, .55)); cursor: pointer; animation: slotGlow 1.6s ease-in-out infinite; }
.bw-slot.full { border: 0; background: none; animation: none; }
.bw-slot.nope { animation: nope .45s; border-color: #ef4444; }
@keyframes slotGlow { 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .8), 0 0 14px rgba(255, 210, 120, .9); } }
.bw-cube { position: relative; display: block; width: 100%; height: 100%; border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--bc) 70%, #fff), var(--bc) 55%, color-mix(in srgb, var(--bc) 75%, #000)); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .18), inset 0 4px 0 rgba(255, 255, 255, .4), 0 4px 6px rgba(0, 0, 0, .2); }
.bw-cube::after { content: ""; position: absolute; left: 30%; top: 22%; width: 40%; height: 26%; border-radius: 50%; background: color-mix(in srgb, var(--bc) 60%, #fff); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.bw-cube.drop { animation: cubeDrop .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cubeDrop { from { transform: translateY(-120px) scale(.8); opacity: 0; } }
.bw-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 10px 14px; border-radius: 24px; background: rgba(255, 255, 255, .9); box-shadow: 0 6px 16px rgba(60, 30, 90, .15); }
.bw-pick { width: clamp(56px, 15vw, 76px); height: clamp(56px, 15vw, 76px); padding: 6px; border: 3px solid transparent; border-radius: 18px; background: #fff; cursor: grab; touch-action: none; transition: transform .15s; }
.bw-pick.on { border-color: #7c3aed; transform: translateY(-6px) scale(1.08); box-shadow: 0 10px 18px rgba(124, 58, 237, .3); }
.bw-drag { position: fixed; z-index: 90; width: 60px; height: 60px; margin: -30px 0 0 -30px; pointer-events: none; opacity: .9; }
/* 砌好了：動起來 */
.bw-grid.done { animation: popIn .4s; }
.bw-grid.go-bounce { animation: goBounce .7s ease-in-out 2; }
.bw-grid.go-dance { animation: goDance .5s ease-in-out 3; }
.bw-grid.go-drive { animation: goDrive 1.4s .2s ease-in forwards; }
.bw-grid.go-swim { animation: goSwim 1.4s .2s ease-in-out forwards; }
.bw-grid.go-blast { animation: goBlast 1.4s .3s ease-in forwards; }
@keyframes goBounce { 40% { transform: translateY(-30px) scale(1.06); } }
@keyframes goDance { 25% { transform: rotate(-10deg) translateY(-10px); } 75% { transform: rotate(10deg) translateY(-10px); } }
@keyframes goDrive { 20% { transform: translateX(-20px); } 100% { transform: translateX(140%); } }
@keyframes goSwim { 30% { transform: translateY(-14px) rotate(-6deg); } 100% { transform: translateX(-140%) translateY(-20px); } }
@keyframes goBlast { 15% { transform: translateY(8px); } 100% { transform: translateY(-160%); } }
.bw-mini.count { grid-template-columns: repeat(var(--w), 46px); grid-auto-rows: 46px; gap: 3px; } .bw-mini.count .bw-cube { width: 46px; height: 46px; border-radius: 9px; }

/* 射氣球（重新設計）：大氣球在原位飄，答案寫在氣球上 */
.bl2-grid { position: absolute; inset: 4% 3% 6%; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); gap: 2% 3%; z-index: 1; }
.bl2 { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 0; border: 0; background: none; cursor: pointer; animation: bl2Float 3.2s var(--d) ease-in-out infinite; }
.bl2-body { position: relative; height: 100%; max-width: 100%; aspect-ratio: 3 / 4; display: block; }
.bl2-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; filter: hue-rotate(var(--hue)) saturate(1.15) drop-shadow(0 10px 10px rgba(40, 60, 120, .25)); }
.bl2-sign { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); width: 78%; max-height: 52%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6% 4%; border-radius: 30%; background: rgba(255, 255, 255, .92); color: #3b2a63; font-weight: 900; font-size: clamp(14px, min(4.6cqw, 7cqh), 34px); line-height: 1.05; text-align: center; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); overflow-wrap: anywhere; }
.bl2-sign .pic, .bl2-sign .emo { font-size: 2.2em; }
.bl2-sign .cap { font-size: .7em; }
.bl2.nope { animation: nope .5s; }
.bl2.nope .bl2-sign { background: #fee2e2; }
.bl2.pop { animation: bl2Pop .35s forwards; pointer-events: none; }
.bl2.hint .bl2-sign { box-shadow: 0 0 0 4px #fde047, 0 0 18px 6px rgba(253, 224, 71, .8); }
@keyframes bl2Float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5%) rotate(2deg); } }
@keyframes bl2Pop { 40% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
/* 氣球大小跟格子（闊和高都放得入）；答案是氣球中間的圓形牌 */
.bl2 { container-type: size; }
.bl2-body { height: auto; width: min(100cqw, 75cqh); aspect-ratio: 3 / 4; }
.bl2-sign { top: 33%; width: 56%; aspect-ratio: 1; max-height: none; padding: 4%; border-radius: 50%; background: rgba(255, 255, 255, .82); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08), 0 3px 8px rgba(0, 0, 0, .15); font-size: clamp(12px, 13cqw, 30px); overflow: hidden; }
.bl2-sign .pic, .bl2-sign .emo { font-size: 1.9em; line-height: 1; }
.bl2-sign .cap { font-size: .62em; margin-top: 1px; white-space: nowrap; }
.bl2-sign .word { font-size: .78em; line-height: 1.05; }
/* 氣球用 CSS 畫（光滑立體），答案直接寫在氣球上 */
.bl2-body { width: min(84cqw, 64cqh); height: auto; aspect-ratio: 5 / 6; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .85) 0 7%, rgba(255, 255, 255, .25) 14%, transparent 30%), radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--bc) 82%, #fff), var(--bc) 60%, color-mix(in srgb, var(--bc) 70%, #000) 100%);
  box-shadow: inset -8px -10px 18px rgba(0, 0, 0, .18), 0 10px 18px rgba(40, 40, 90, .22); }
.bl2-body::before { content: ""; position: absolute; left: 50%; bottom: -5%; width: 12%; height: 7%; transform: translateX(-50%); background: color-mix(in srgb, var(--bc) 75%, #000); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bl2-body::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 22cqh; background: rgba(90, 90, 110, .55); transform: translateX(-50%); }
.bl2-sign { top: 47%; width: 74%; aspect-ratio: auto; background: none; box-shadow: none; padding: 0; color: #fff; font-size: clamp(16px, 18cqw, 46px); text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 6px rgba(0, 0, 0, .25); overflow: visible; border-radius: 0; }
.bl2-sign:has(.pic), .bl2-sign:has(.emo) { width: 66%; aspect-ratio: 1; padding: 6%; border-radius: 50%; background: rgba(255, 255, 255, .88); color: #3b2a63; text-shadow: none; font-size: clamp(12px, 11cqw, 28px); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08); }
.bl2-sign .word { font-size: .85em; }
.bl2-grid { inset: 3% 3% 14%; }
.bl2-sign:has(.pic) .pic, .bl2-sign:has(.emo) .emo { font-size: 2.5em; } .bl2-sign:has(.pic) .cap { font-size: .75em; }

/* 文字答案的「聽」按鈕 */
.opt, .sg, .bl2-sign, .food-i, .m-sign { position: relative; }
.opt-say { position: absolute; top: -10px; right: -10px; z-index: 3; width: clamp(30px, 4.4vw, 40px); height: clamp(30px, 4.4vw, 40px); display: grid; place-items: center; border-radius: 50%; background: linear-gradient(#a78bfa, #7c3aed); color: #fff; box-shadow: 0 3px 0 #5b21b6, 0 4px 10px rgba(91, 33, 182, .35); cursor: pointer; pointer-events: auto !important; }
.opt-say .ic { width: 58%; height: 58%; }
.opt-say.on { animation: pulse .5s 2; }
.opts.rows .opt .opt-say { position: static; flex: none; margin-left: auto; order: 9; }
.ar .opt-say { width: clamp(24px, 3.4vw, 32px); height: clamp(24px, 3.4vw, 32px); top: -12px; right: -12px; }
.bl2-sign .opt-say { top: -6px; right: -14px; }
/* 戳泡泡（重新設計）：透明光滑的泡泡 */
.bub-body { width: min(84cqw, 80cqh); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .95) 0 6%, rgba(255, 255, 255, .3) 12%, transparent 26%), radial-gradient(circle at 50% 50%, rgba(190, 235, 255, .25) 55%, rgba(255, 255, 255, .55) 70%, rgba(200, 160, 255, .65) 88%, rgba(140, 220, 255, .7) 100%); box-shadow: inset 0 0 18px rgba(255, 255, 255, .7), 0 8px 16px rgba(0, 40, 90, .2); }
.bub-body::before, .bub-body::after { display: none; }
.bub .bl2-sign { top: 50%; color: #1e3a5f; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.bub .bl2-sign:has(.pic) { background: rgba(255, 255, 255, .75); }
.bub.pop { animation: bl2Pop .3s forwards; }

/* ───── 所有圖片答案再大一點（客人要求） ───── */
.opts { max-width: calc(var(--cols, 3) * 250px); }
.game .opt .pic, .game .opt .emo, .game .opts.cards .opt .pic, .game .opts.cards .opt .emo { font-size: min(64cqw, 160px); }
.game .opts.cards .opt { padding: 10px 6px 12px; }
.game .opt .group .pic, .game .opt .things .pic, .game .opt .cmp-g .pic { font-size: inherit; }
.ar .sg:has(.pic) .pic, .ar .sg:has(.emo) .emo { font-size: 3.3em; }
.bl .sg .pic, .bb .sg .pic, .wagon .sg .pic, .hooked .sg .pic, .lily .sg .pic, .pl .sg .pic, .st .sg .pic, .bf .sg .pic, .ap .sg .pic, .fishy .sg .pic { font-size: 3.6em; }
.bl2-sign:has(.pic) .pic, .bl2-sign:has(.emo) .emo { font-size: 2.8em; }
.food-i .pic, .food-i .emo { font-size: 2.6em; }
.sort-it .pic { font-size: 64px; }
/* 餵怪獸：食物卡大一點，名字在卡裏面 */
.ar-feed .food { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 560px; }
.ar-feed .food-i { min-width: 0; width: auto; height: auto; aspect-ratio: 1; padding: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: clamp(15px, min(4cqw, 5cqh), 24px); }
.ar-feed .food-i .pic, .ar-feed .food-i .emo { font-size: min(16cqw, 15cqh); }
.ar-feed .food-i .cap { font-size: .9em; margin-top: 2px; }
.ar-feed .monster { width: clamp(90px, min(26cqw, 28cqh), 220px); }
/* 小火車：卡卡和圖都大一點 */
.ar-train .wagon, .wagon { width: clamp(96px, min(34cqw, 40cqh), 230px); }
.wagon .sg .pic, .hooked .sg .pic { font-size: 4.2em; }
.wagon .sg { top: -6%; }
/* 釣魚：魚和圖都大一點 */
.ar-fish .fishy { width: min(42cqw, 46cqh); height: min(30cqw, calc(80cqh / var(--n, 4))); }
.ar-fish .f-sign { font-size: clamp(13px, min(3.8cqw, 4.6cqh), 24px); }
.ar-fish .f-sign .pic { font-size: 3.8em; }
@keyframes swimIn { 0% { left: 1%; } 50% { left: calc(99% - min(42cqw, 46cqh)); } 100% { left: 1%; } }
.ar-feed .food { grid-template-columns: repeat(var(--fc, 3), minmax(0, 1fr)); }
.ar-feed.wide { flex-direction: row; }
.ar-feed.wide .food { flex: 1; max-width: none; }
.ar-feed.wide .food-i .pic, .ar-feed.wide .food-i .emo { font-size: min(9cqw, 34cqh); }

/* ───────────── 楚橋衣櫃：造型、同伴、魔法（js/magic.js）───────────── */
.shop-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 4px 0 12px; }
.shop-tabs .pill { font-size: 1.05rem; padding: 10px 18px; }
.shop-tabs .pill.on { background: var(--c, #8B5CF6); color: #fff; border-color: transparent; }
.shop-duo { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.shop-duo .shop-pet { width: min(26vw, 110px); margin-left: -18px; animation: petHop 2.2s ease-in-out infinite; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .15)); }
.swatch.big { padding: 8px 4px 10px; }
.swatch .sw-img { width: 84px; height: 84px; object-fit: contain; }
.swatch.big b { font-size: .92rem; text-align: center; line-height: 1.2; }
.swatches:has(.swatch.big) { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.owl-fit { object-fit: contain; }
.pet { pointer-events: none; }
.lb-hero { position: relative; }
.lb-pet { position: absolute; bottom: 0; left: calc(50% + min(9vw, 48px)); width: min(19vw, 92px); animation: petHop 2.2s ease-in-out infinite; filter: drop-shadow(0 10px 8px rgba(76, 29, 149, .25)); z-index: 2; }
.avatar .map-pet { position: absolute; width: 58%; right: -46%; bottom: -4%; animation: petHop 2s ease-in-out infinite; }
@keyframes petHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14%) rotate(-4deg); } 60% { transform: translateY(0) rotate(3deg); } }

.magic-btn { position: relative; overflow: visible; }
.magic-btn .mg-ic { width: 34px; height: 34px; object-fit: contain; animation: mgGlow 2.4s ease-in-out infinite; }
.magic-btn.mg-x2::after { content: "x2"; position: absolute; right: -6px; top: -6px; background: #FFD23F; color: #4c1d95; font-weight: 900; font-size: .72rem; border-radius: 10px; padding: 1px 5px; }
@keyframes mgGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 210, 63, 0)); } 50% { filter: drop-shadow(0 0 8px rgba(255, 210, 63, .95)); } }
.mg-tray { position: absolute; top: 64px; right: 10px; z-index: 60; display: grid; gap: 8px; width: min(92vw, 360px); padding: 12px; border-radius: 22px; background: rgba(255, 255, 255, .97);
  box-shadow: 0 14px 40px rgba(76, 29, 149, .3); animation: mgIn .25s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes mgIn { from { transform: scale(.7) translateY(-20px); opacity: 0; } }
.mg-sp, .mg-card { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 18px; border: 3px solid #e9d5ff; background: #faf5ff; text-align: left; font: inherit; color: inherit; }
.mg-sp { cursor: pointer; }
.mg-sp:active { transform: scale(.97); }
.mg-sp.off, .mg-card.off { opacity: .5; filter: grayscale(.6); }
.mg-sp.shake { animation: shake .4s; }
.mg-img { width: 58px; height: 58px; object-fit: contain; flex: none; }
.mg-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mg-txt b { font-size: 1.1rem; }
.mg-txt small { color: #6b5b8a; line-height: 1.25; }
.mg-n { font-weight: 900; color: #7C3AED; white-space: nowrap; }
.mg-list { display: grid; gap: 10px; margin: 8px 0; }
.mg-gone { opacity: 0 !important; transform: scale(.4) rotate(-12deg) !important; pointer-events: none !important; transition: opacity .6s, transform .6s; }
.game.mg-shielded .opts, .game.mg-shielded #arena { box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), 0 0 0 9px rgba(124, 58, 237, .35), 0 0 30px 8px rgba(56, 189, 248, .45); border-radius: 24px; }
.toast-ic { width: 36px; height: 36px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .lb-pet, .map-pet, .shop-pet, .magic-btn .mg-ic { animation: none !important; } }

/* ───────────── 魔法藥水（新版）：大藥水瓶 + 大鍋 ───────────── */
.ar-potion { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 1cqh; padding: 2cqh 2cqw;
  background: radial-gradient(ellipse at 50% 110%, #8b5cf6 0%, #4c1d95 45%, #1e0b3d 100%); overflow: hidden; }
.ar-potion::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(2px 2px at 12% 20%, #fff8, transparent), radial-gradient(2px 2px at 78% 14%, #fff8, transparent), radial-gradient(3px 3px at 40% 8%, #fde68a, transparent), radial-gradient(2px 2px at 90% 60%, #fff6, transparent), radial-gradient(2px 2px at 6% 70%, #fff6, transparent); }
.ar-potion.pt-wide { flex-direction: row; }
.plab { position: relative; display: grid; grid-template-columns: repeat(var(--pc), auto); justify-content: center; align-content: center; gap: 1.5cqh 2.5cqw; }
.pt2 { --bw: min(calc(90cqw / var(--pc) - 3cqw), calc(64cqh / var(--pr) * .9)); position: relative; width: var(--bw); aspect-ratio: .9; padding: 0; border: 0; background: none;
  container-type: inline-size; cursor: pointer; animation: bobY 2.6s var(--d) ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.pt-wide .pt2 { --bw: min(calc(68cqw / var(--pc) - 3cqw), calc(90cqh / var(--pr) * .9)); }
.pt2 .pt2-img { position: absolute; inset: -6% -4% 0; width: 108%; height: 106%; object-fit: contain; pointer-events: none;
  filter: hue-rotate(var(--hue)) drop-shadow(0 0 12px rgba(255, 255, 255, .35)) drop-shadow(0 10px 10px rgba(0, 0, 0, .35)); }
.pt2 .pt2-lab { position: absolute; left: 13%; right: 13%; top: 33%; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff, #fff7fd 70%, #f3e8ff); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(30, 11, 61, .35), inset 0 -4px 0 rgba(124, 58, 237, .12);
  color: #3b2a63; font-weight: 900; font-size: 13cqi; line-height: 1.05; text-align: center; overflow: visible; }
.pt2 .pt2-lab .pic, .pt2 .pt2-lab .emo { font-size: 50cqi !important; width: 1em; height: 1em; line-height: 1; }
.pt2 .pt2-lab .pic img { width: 1em !important; height: 1em !important; object-fit: contain; }
.pt2 .pt2-lab .cap { position: absolute; bottom: -10%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11cqi; padding: .1em .5em; border-radius: 1em; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.pt2 .pt2-lab .word, .pt2 .pt2-lab .num { font-size: 1.4em; }
.pt2 .opt-say { position: absolute; top: -8%; right: -14%; }
.pt2:active { transform: scale(.94); }
.pt2.busy { z-index: 30; animation: none; }
.pt2 > .pt2-img, .pt2 > .pt2-lab { transition: transform .3s ease-in; }
.pt2.pour > .pt2-img, .pt2.pour > .pt2-lab { transform: rotate(-110deg); }
.pt2.used { visibility: hidden; }
.pt2.hint .pt2-lab { box-shadow: 0 0 0 5px #fde047, 0 0 26px 8px #fde047; }
.cauldron2 { position: relative; flex: none; width: min(34cqw, 30cqh); aspect-ratio: 1; --brew: 0deg; }
.pt-wide .cauldron2 { width: min(26cqw, 56cqh); }
.cauldron2 .cd-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45)); }
.cauldron2 .brew { position: absolute; left: 20%; right: 20%; top: 20%; height: 22%; border-radius: 50%; background: radial-gradient(#d9ff9a, #3fbf5a); filter: hue-rotate(var(--brew)); opacity: 0; transition: opacity .3s; }
.cauldron2.glow .brew { opacity: .95; animation: brew 1s; }
.cauldron2.glow { animation: cdHop .6s; filter: drop-shadow(0 0 26px #fde047); }
.cauldron2.smoke { animation: nope .5s; filter: grayscale(.8); }
.cd-steam { position: absolute; left: 25%; right: 25%; top: -22%; height: 40%; pointer-events: none; }
.cd-steam i { position: absolute; bottom: 0; width: 26%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .5); filter: blur(3px); animation: steam 2.6s ease-out infinite; }
.cd-steam i:nth-child(1) { left: 5%; } .cd-steam i:nth-child(2) { left: 38%; animation-delay: .9s; } .cd-steam i:nth-child(3) { left: 70%; animation-delay: 1.7s; }
.cauldron2.glow .cd-steam i { background: rgba(253, 224, 71, .8); }
.cauldron2.smoke .cd-steam i { background: rgba(100, 100, 110, .8); }
@keyframes steam { 0% { transform: translateY(0) scale(.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-120%) scale(1.4); opacity: 0; } }
@keyframes cdHop { 30% { transform: scale(1.12, .9); } 60% { transform: scale(.95, 1.08) translateY(-6%); } }
@media (prefers-reduced-motion: reduce) { .pt2, .cd-steam i { animation: none !important; } }

/* 射龍門：直向畫面 4 個答案分兩行 */
.ar-goal.g2 .goal-frame { height: 64%; }
.ar-goal.g2 .targets { top: 12%; bottom: 4%; row-gap: 2%; }
.ar-goal.g2 .tg { width: 96%; aspect-ratio: auto; }
.ar-goal .tg .sg { max-width: 100%; }

/* 接住佢（新版）：點飄下來的答案 */
.ar-catch { cursor: default; touch-action: manipulation; }
.drop2 { position: absolute; top: 0; z-index: 3; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.drop2 .sg { font-size: clamp(18px, min(6cqw, 7cqh), 40px); }
.drop2 .sg .pic, .drop2 .sg .emo { font-size: 2.6em !important; }
.drop2.bad .sg { animation: nope .45s; background: #fee2e2; }
.drop2.miss { opacity: .25; transition: opacity .35s; pointer-events: none; }
.drop2.busy { z-index: 6; }
.basket2 { position: absolute; left: 50%; bottom: 1%; width: min(34cqw, 30cqh); transform: translateX(-50%); z-index: 2; pointer-events: none; }
.basket2 img { width: 100%; height: auto; display: block; }
.basket2.bounce { animation: squash .35s; }
/* 疊高塔：大「放」按鈕 */
.ar-crane .drop-btn { left: 50%; bottom: 3%; background: linear-gradient(#a78bfa, #7c3aed) !important; color: #fff !important; border: 3px solid #fff !important; font-weight: 900; transform: translateX(-50%); font-size: clamp(20px, min(5cqw, 6cqh), 32px); padding: .45em 1.4em; border-radius: 999px; box-shadow: 0 6px 0 #6d28d9, 0 10px 22px rgba(76, 29, 149, .35); animation: dropPulse 1.6s ease-in-out infinite; }
@keyframes dropPulse { 50% { transform: translateX(-50%) scale(1.08); } }

/* 「聽」按鈕：大一點、在答案外面，四周多一圈也算按到喇叭（不會誤選答案） */
.opt-say { width: clamp(42px, 5.4vw, 52px) !important; height: clamp(42px, 5.4vw, 52px) !important; top: -18px; right: -18px; border: 3px solid #fff; }
.ar .opt-say { top: -18px; right: -18px; }
.opt-say::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.opt-say .ic { width: 56%; height: 56%; }
.opts.rows .opt .opt-say { position: relative; top: auto; right: auto; margin-left: 12px; }
/* 閱讀理解第一級：聽句子 */
.read-say { display: inline-flex; align-items: center; gap: 6px; margin: 10px auto 0; font-size: clamp(18px, 2.4vw, 24px); padding: 10px 22px; }
.stim:has(.read-say) { display: flex; flex-direction: column; align-items: center; }
/* 火箭升空：答案圖片大一點 */
.ar-rocket .pl { width: min(22cqw, 20cqh); margin-left: calc(min(22cqw, 20cqh) / -2); margin-top: calc(min(22cqw, 20cqh) / -2); }
.ar-rocket .pl .sg { font-size: clamp(16px, min(6cqw, 7.5cqh), 40px); }
.ar-rocket .pl .sg:has(.pic) .pic { font-size: 2.9em; }

/* 火箭升空噴火：火焰（平時小火閃動，點火時大火）、震動、煙、火花 */
.rk .flame { position: absolute; left: 50%; top: 84%; bottom: auto; width: 42%; height: 62%; z-index: -1; transform: translateX(-50%) scaleY(.32); transform-origin: 50% 0;
  border-radius: 45% 45% 50% 50% / 25% 25% 75% 75%; background: radial-gradient(ellipse at 50% 18%, #fffbe6 0 14%, #fde047 30%, #fb923c 52%, #ef4444 68%, rgba(239, 68, 68, 0) 72%);
  opacity: .95; filter: drop-shadow(0 0 8px #fb923c); animation: rkFlick .12s infinite alternate; transition: transform .2s; }
.rk .flame .core { position: absolute; left: 28%; right: 28%; top: 0; height: 55%; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: radial-gradient(ellipse at 50% 20%, #fff, #bae6fd 60%, rgba(186, 230, 253, 0) 72%); }
.rk.ignite .flame { transform: translateX(-50%) scaleY(1.25); animation: rkBig .08s infinite alternate; }
.rk.go .flame { transform: translateX(-50%) scaleY(1.7); animation: rkBig .07s infinite alternate; }
.rk.ignite { animation: rkRumble .06s infinite alternate; }
@keyframes rkFlick { from { transform: translateX(-50%) scaleY(.28) scaleX(.92); } to { transform: translateX(-50%) scaleY(.4) scaleX(1.05); } }
@keyframes rkBig { from { transform: translateX(-50%) scaleY(1.3) scaleX(.9); } to { transform: translateX(-50%) scaleY(1.85) scaleX(1.12); } }
@keyframes rkRumble { from { translate: -2px 1px; } to { translate: 2px -1px; } }
.rk-smoke { position: absolute; z-index: 3; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(226, 232, 240, .7) 55%, rgba(226, 232, 240, 0) 72%); animation: rkSmoke 1.2s var(--dl) ease-out forwards; opacity: 0; }
@keyframes rkSmoke { 0% { transform: translate(0, 0) scale(.4); opacity: .95; } 100% { transform: translate(var(--dx), -14px) scale(2.6); opacity: 0; } }
.rk-spark { position: absolute; z-index: 3; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff, hsl(calc(20deg + var(--h) * 1deg) 100% 60%) 55%, transparent 72%); animation: rkSpark .55s ease-out forwards; }
@keyframes rkSpark { to { transform: translateY(26px) scale(.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rk .flame, .rk.ignite { animation: none !important; } .rk-spark, .rk-smoke { display: none; } }
.ar-rocket .rk { width: clamp(64px, min(17cqw, 19cqh), 130px); margin-left: calc(clamp(64px, min(17cqw, 19cqh), 130px) / -2); bottom: 6%; }
.ar-rocket .pad-base { width: clamp(90px, min(24cqw, 26cqh), 180px); }
/* 文字答案（沒有圖片）：字大一點；「聽」按鈕放在字的旁邊，不會遮住答案 */
.ar .sg:not(:has(.pic)):not(:has(.emo)) { font-size: clamp(18px, min(4.6cqw, 6cqh), 32px); flex-wrap: nowrap; gap: .3em; padding: .3em .35em .3em .6em; }
.ar .sg:not(:has(.pic)):not(:has(.emo)) .opt-say { position: relative; top: auto; right: auto; flex: none; width: 1.5em !important; height: 1.5em !important; min-width: 34px; min-height: 34px; margin: 0; border-width: 2px; box-shadow: 0 2px 0 #5b21b6; }
.ar .sg:not(:has(.pic)):not(:has(.emo)) .opt-say::before { inset: -6px; }
.opts .opt:not(:has(.pic)):not(:has(.emo)):not(:has(img)) .opt-say { position: relative; top: auto; right: auto; flex: none; margin-left: .4em; }
.ar .sg:not(:has(.pic)):not(:has(.emo)) { max-width: none !important; white-space: nowrap; }
.ar .sg:not(:has(.pic)):not(:has(.emo)) .word { white-space: nowrap; word-break: keep-all; }

/* ───────────── 關卡遊戲場景背景 ───────────── */
.ar.has-bg { background-color: #cfe8ff; background-image: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)), var(--arbg) !important; background-size: cover !important; background-position: center !important; }
.ar.has-bg .ar-clouds, .ar.has-bg .ar-sand { display: none; }
.ar.has-bg::before { opacity: .5; }
.ar-potion.has-bg { background-image: linear-gradient(rgba(30, 11, 61, .25), rgba(30, 11, 61, .25)), var(--arbg) !important; }

/* ───────────── 貼紙任務（js/sticker.js）───────────── */
.prompt { position: relative; }
.stk-quest { position: relative; flex: none; width: clamp(62px, 8vw, 86px); aspect-ratio: 1; margin-left: 10px; border-radius: 18px; background: #fff; border: 3px dashed #c4b5fd;
  box-shadow: 0 4px 12px rgba(76, 29, 149, .18); overflow: hidden; align-self: center; }
.stk-quest .stk-q { position: absolute; inset: 8%; display: grid; place-items: center; }
.stk-quest .stk-q .pic { font-size: clamp(44px, 6vw, 66px); }
.stk-cover { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--c), 1fr); }
.stk-cover i { background: linear-gradient(135deg, #a78bfa, #7c3aed); border: 1px solid rgba(255, 255, 255, .5); display: grid; place-items: center; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), opacity .45s; }
.stk-cover i::after { content: "?"; color: rgba(255, 255, 255, .7); font-weight: 900; font-size: clamp(12px, 1.6vw, 18px); }
.stk-cover i.open { transform: scale(0) rotate(90deg); opacity: 0; }
.stk-quest.bump { animation: stkBump .5s; }
@keyframes stkBump { 40% { transform: scale(1.18) rotate(-4deg); } }
.stk-fly { position: fixed; z-index: 120; width: 34px; height: 34px; color: #FFD23F; pointer-events: none; filter: drop-shadow(0 0 6px #fde047); }
.stk-fly .ic { width: 100%; height: 100%; }
.stk .pic img, .stk img { filter: 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 5px 6px rgba(0, 0, 0, .25)); }
.stk.stk-shadow .pic img, .stk.stk-shadow img { filter: brightness(0) opacity(.14); }
.stk-pop { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; background: rgba(30, 11, 61, .45); animation: fadeIn .3s; }
.stk-pop-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 30px; border-radius: 28px; background: #fff; overflow: hidden; animation: stkIn .6s cubic-bezier(.2, 1.5, .4, 1); }
.stk-pop-card .cb-rays { opacity: .35; }
.stk-pop-t { position: relative; font-size: clamp(24px, 5vw, 36px); color: #7c3aed; }
.stk-big { position: relative; animation: stkSpin 1s cubic-bezier(.2, 1.4, .4, 1); }
.stk-big .pic { font-size: clamp(120px, 30vw, 200px); }
@keyframes stkIn { from { transform: scale(.3) rotate(-12deg); opacity: 0; } }
@keyframes stkSpin { from { transform: rotate(-200deg) scale(.2); } }
@keyframes fadeIn { from { opacity: 0; } }
.stk-book { display: grid; gap: 14px; }
.stk-page h2 small { color: #7c3aed; font-size: .7em; margin-left: 6px; }
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.stk-slot { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 20px; background: #f5f3ff; border: 3px dashed #ddd6fe; }
.stk-slot.on { background: radial-gradient(circle, #fff, #faf5ff); border-style: solid; border-color: #c4b5fd; }
.stk-slot .pic { font-size: 70px; }
.stk-n { position: absolute; right: 6px; bottom: 4px; font-size: .85rem; color: #fff; background: #7c3aed; border-radius: 10px; padding: 0 6px; }
@media (min-width: 900px) { .stk-book { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .stk-big, .stk-pop-card, .stk-quest.bump { animation: none !important; } }

/* ───────────── 場景動畫層 ───────────── */
.amb { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.amb i { position: absolute; left: var(--x); top: var(--y); }
.amb-clouds i { top: calc(var(--y) * .3); left: -30%; width: calc(120px * var(--s)); height: calc(46px * var(--s)); border-radius: 50px; background: rgba(255, 255, 255, .85); filter: blur(1px);
  box-shadow: calc(30px * var(--s)) calc(-16px * var(--s)) 0 calc(6px * var(--s)) rgba(255, 255, 255, .85), calc(-26px * var(--s)) calc(-8px * var(--s)) 0 calc(2px * var(--s)) rgba(255, 255, 255, .8);
  animation: ambCloud var(--t) linear infinite; animation-delay: calc(var(--d) * -6); opacity: .8; }
@keyframes ambCloud { from { transform: translateX(0); } to { transform: translateX(calc(100cqw + 60%)); } }
.amb-bubbles i { top: 100%; width: calc(12px * var(--s)); height: calc(12px * var(--s)); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9) 0 18%, rgba(255, 255, 255, .15) 30%); animation: ambBubble var(--t) ease-in var(--d) infinite; }
@keyframes ambBubble { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(12px, -55cqh); } 100% { transform: translate(-8px, -115cqh); opacity: 0; } }
.amb-stars i { width: calc(6px * var(--s)); height: calc(6px * var(--s)); border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(255, 255, 255, .8); animation: ambTwinkle calc(var(--t) / 2) ease-in-out var(--d) infinite; }
@keyframes ambTwinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }
.amb-shoot { position: absolute; top: 12%; left: -20%; width: 120px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff); transform: rotate(18deg); animation: ambShoot 7s ease-in 2s infinite; opacity: 0; }
@keyframes ambShoot { 0% { opacity: 0; transform: translate(0, 0) rotate(18deg); } 3% { opacity: 1; } 12% { opacity: 0; transform: translate(70cqw, 24cqh) rotate(18deg); } 100% { opacity: 0; } }
.amb-sparkle i { width: calc(14px * var(--s)); height: calc(14px * var(--s)); background: #fde68a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 4px #fde047); animation: ambSpark calc(var(--t) / 1.6) ease-in-out var(--d) infinite; }
@keyframes ambSpark { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(90deg) translateY(-8px); } }
.amb-petals i { top: -8%; width: calc(14px * var(--s)); height: calc(10px * var(--s)); border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #fbcfe8, #f472b6); opacity: .85;
  animation: ambPetal calc(var(--t) * 1.6) linear var(--d) infinite; }
@keyframes ambPetal { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(30px, 55cqh) rotate(200deg); } 100% { transform: translate(-20px, 112cqh) rotate(400deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .amb { display: none; } }

/* ───────────── 答案新造型（遊戲道具感）─────────────
   圖片答案：不用白卡，3D 圖片加白色貼紙邊，名稱放在彩色絲帶上（聽按鈕在絲帶裏）
   文字答案：彩色糖果按鈕，白色大字 */
.ar .sg.sg:has(.pic), .ar .sg.sg:has(.emo) { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible; gap: 0; }
.ar .sg.sg:has(.pic) .pic img { filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 8px 8px rgba(30, 20, 60, .35)); }
.ar .sg.sg .cap { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .3em; margin-top: -.2em; padding: .16em .7em; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(hsl(calc(var(--tint, var(--hue, 0deg)) + 265deg) 88% 66%), hsl(calc(var(--tint, var(--hue, 0deg)) + 265deg) 70% 47%)); color: #fff !important; border: 2.5px solid #fff;
  box-shadow: 0 3px 0 hsl(calc(var(--tint, var(--hue, 0deg)) + 265deg) 60% 34%), 0 6px 12px rgba(30, 20, 60, .28); text-shadow: 0 1px 0 rgba(0, 0, 0, .25); font-weight: 900; }
.ar .sg.sg .cap:has(.opt-say) { padding-right: .2em; }
.ar .sg.sg .cap .opt-say { position: relative !important; top: auto !important; right: auto !important; flex: none; width: 1.55em !important; height: 1.55em !important; min-width: 30px; min-height: 30px; margin: 0;
  background: rgba(255, 255, 255, .3) !important; border: 2px solid rgba(255, 255, 255, .85) !important; box-shadow: none !important; }
.ar .sg.sg .cap .opt-say::before { inset: -8px; }
.ar .sg.sg:not(:has(.pic)):not(:has(.emo)) { position: relative; color: #fff !important; border: 3px solid #fff !important; border-radius: 999px !important; text-shadow: 0 2px 0 rgba(0, 0, 0, .22);
  background: linear-gradient(hsl(calc(var(--tint, var(--hue, 0deg)) + 265deg) 92% 68%), hsl(calc(var(--tint, var(--hue, 0deg)) + 265deg) 72% 49%)) !important;
  box-shadow: 0 5px 0 hsl(calc(var(--tint, var(--hue, 0deg)) + 265deg) 60% 34%), 0 10px 18px rgba(30, 20, 60, .3) !important; padding: .32em .4em .32em .8em !important; }
.ar .sg.sg:not(:has(.pic)):not(:has(.emo)):not(:has(.opt-say)) { padding: .32em .8em !important; }
.ar .sg.sg:not(:has(.pic)):not(:has(.emo))::after { content: ""; position: absolute; left: 14%; right: 14%; top: 7%; height: 34%; border-radius: 999px; background: linear-gradient(rgba(255, 255, 255, .65), rgba(255, 255, 255, 0)); pointer-events: none; }
.ar .sg.sg .word, .ar .sg.sg .num, .ar .sg.sg b { color: #fff !important; }
.ar .sg.sg:not(:has(.pic)):not(:has(.emo)) .opt-say { background: rgba(255, 255, 255, .3) !important; border: 2px solid rgba(255, 255, 255, .85) !important; box-shadow: none !important; }

/* 開寶箱：寶物放在寶箱上面（像剛從寶箱冒出來），寶箱在下面 */
.ar-chest .chb { justify-content: flex-end; }
.ar-chest .chb .sg { order: -1; margin: 0 0 -.5em !important; z-index: 2; flex: none; }
.ar-chest .chb .spr { max-height: 46%; max-width: min(100%, 26cqw); }

/* ───────────── 楚橋釣魚（新版）───────────── */
.ar-fish .fz-sky { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(rgba(210, 240, 255, .75), rgba(210, 240, 255, .35)); }
.ar-fish .fz-surface { position: absolute; left: 0; right: 0; top: calc(22% - 6px); height: 12px; background: radial-gradient(ellipse 18px 7px at 50% 0, rgba(255, 255, 255, .9) 60%, transparent 62%) 0 0 / 36px 12px repeat-x; opacity: .85; animation: fzWave 3s linear infinite; }
@keyframes fzWave { to { background-position: 36px 0; } }
.fz-boat { position: absolute; z-index: 5; left: 50%; top: calc(22% - min(17cqw, 22cqh) * .62); width: min(26cqw, 34cqh); transform: translateX(-50%); transition: left .55s cubic-bezier(.4, .1, .3, 1); pointer-events: none; animation: fzBob 2.6s ease-in-out infinite; }
.fz-boat .fz-boat-img { position: relative; z-index: 2; width: 100%; height: auto; display: block; }
.fz-boat .fz-cq { position: absolute; z-index: 1; left: 22%; bottom: 46%; width: 42%; }
.fz-boat .fz-cq .owl { width: 100%; height: auto; }
.fz-boat .fz-rod { position: absolute; z-index: 3; left: 52%; bottom: 62%; width: 46%; height: 4px; background: linear-gradient(90deg, #92400e, #d97706); border-radius: 4px; transform-origin: 0 50%; transform: rotate(-24deg); }
.fz-boat .fz-line { position: absolute; z-index: 1; left: 89%; top: 4%; width: 2px; height: 30%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 2px rgba(0, 0, 0, .3); transition: height .42s ease-in-out; }
.fz-boat .fz-hook { position: absolute; left: -7px; bottom: -14px; width: 14px; height: 16px; border: 3px solid #475569; border-top: 0; border-radius: 0 0 10px 10px; background: radial-gradient(circle at 50% 0, #ef4444 0 4px, transparent 5px); }
.fz-boat.row { animation: fzRow .55s ease-in-out; }
.fz-boat.yay .fz-cq { animation: fzYay .6s; }
.fz-catch { position: absolute; z-index: 3; left: 58%; bottom: 44%; width: 28%; height: 20%; }
.fz-catch i { position: absolute; bottom: 0; width: 50%; filter: hue-rotate(var(--hue)); }
.fz-catch i:nth-child(2) { left: 30%; } .fz-catch i:nth-child(3) { left: 55%; } .fz-catch i:nth-child(n+4) { left: 15%; bottom: 20%; }
.fz-catch i img { width: 100%; }
@keyframes fzBob { 50% { margin-top: 4px; rotate: 2deg; } }
@keyframes fzRow { 30% { rotate: -5deg; } 70% { rotate: 4deg; } }
@keyframes fzYay { 40% { transform: translateY(-30%) rotate(-8deg); } }
.ar-fish .fz-fish { top: var(--y); z-index: 2; }
.ar-fish .fz-fish.fz-hooked { z-index: 6; }
.ar-fish .fz-fish.fz-got { visibility: hidden; }
.ar-fish .fz-fish.fz-shake .f-img { animation: nope .4s; }
.ar-fish .fz-fish.fz-away { animation-duration: 3s !important; opacity: .45; pointer-events: none; }
.fz-drop { position: absolute; z-index: 7; width: 10px; height: 14px; margin: -7px 0 0 -5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #fff, #7dd3fc 60%); pointer-events: none; animation: fzDrop .75s ease-out forwards; }
@keyframes fzDrop { 0% { transform: rotate(var(--a)) translateX(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: rotate(var(--a)) translateX(var(--r)) translateY(30px); opacity: 0; } }
.fz-ring { position: absolute; z-index: 6; width: 30px; height: 10px; margin: -5px 0 0 -15px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .9); pointer-events: none; animation: fzRing .85s ease-out forwards; }
@keyframes fzRing { to { transform: scale(5); opacity: 0; } }
.fz-bub { position: absolute; z-index: 4; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); pointer-events: none; animation: fzBub 1.1s var(--dl) ease-out forwards; }
@keyframes fzBub { to { transform: translateY(-70px); opacity: 0; } }

/* ───────────── 小蜜蜂採蜜（新版）───────────── */
.bee2 { position: absolute; z-index: 6; left: 30%; top: 14%; width: clamp(52px, min(14cqw, 17cqh), 110px); transform: translate(-50%, -50%); pointer-events: none; animation: beeRoam 9s ease-in-out infinite; --face: 1; }
.bee2.busy { animation: none; }
.bee2 .bee-buzz { display: block; transform: scaleX(var(--face)); }
.bee2 .bee-img { width: 100%; height: auto; display: block; animation: beeBuzz .14s ease-in-out infinite alternate; transform-origin: 50% 70%; }
.bee2.sip .bee-img { animation: beeSip .22s ease-in-out infinite alternate; }
.bee2.no .bee-buzz { animation: beeNo .5s; }
@keyframes beeRoam { 0% { left: 18%; top: 14%; } 20% { left: 46%; top: 8%; } 40% { left: 72%; top: 18%; } 60% { left: 56%; top: 10%; } 80% { left: 28%; top: 20%; } 100% { left: 18%; top: 14%; } }
@keyframes beeBuzz { from { transform: translateY(-2px) rotate(-4deg); } to { transform: translateY(2px) rotate(4deg); } }
@keyframes beeSip { from { transform: rotate(-10deg) translateY(2px); } to { transform: rotate(10deg) translateY(-2px); } }
@keyframes beeNo { 20%, 60% { transform: scaleX(var(--face)) rotate(-14deg); } 40%, 80% { transform: scaleX(var(--face)) rotate(14deg); } }
.bee-pollen { position: absolute; z-index: 5; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: radial-gradient(circle, #fff7a8, #facc15 60%); box-shadow: 0 0 6px #fde047; pointer-events: none; animation: beePollen .85s ease-out forwards; }
@keyframes beePollen { to { transform: rotate(var(--a)) translateX(var(--r)); opacity: 0; } }
.ar-bee .fl.got .fl-img { transform: scale(1.25); filter: hue-rotate(var(--hue)) drop-shadow(0 0 16px #fde047) !important; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.ar-bee .fl.shut .fl-img { transform: scale(.75) rotate(-8deg); filter: grayscale(.9) !important; transition: .3s; }
.honey2 { position: absolute; z-index: 4; right: 3%; top: 4%; width: clamp(56px, min(14cqw, 18cqh), 110px); display: flex; align-items: flex-end; gap: 4px; pointer-events: none; }
.honey2 .hn-img { width: 100%; height: auto; display: block; }
.honey2 .hn-meter { position: absolute; left: -16px; bottom: 6%; width: 12px; height: 80%; border-radius: 8px; background: rgba(255, 255, 255, .7); border: 2px solid #fff; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.honey2 .hn-meter i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(#fde047, #f59e0b); transition: height .6s cubic-bezier(.3, 1.4, .5, 1); }
.honey2.bounce { animation: squash .4s; }
.honey2.full .hn-img { filter: drop-shadow(0 0 14px #fde047); animation: hnFull 1s ease-in-out infinite; }
@keyframes hnFull { 50% { transform: scale(1.1) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .bee2, .bee2 .bee-img, .fz-boat, .fz-surface { animation: none !important; } }
/* 小蜜蜂採蜜：花大一點，答案放在花頭上 */
.ar-bee .meadow { top: 22%; bottom: 0; }
.ar-bee .fl { justify-content: flex-end; }
.ar-bee .fl .fl-img { max-width: min(24cqw, 44cqh) !important; max-height: 78% !important; width: auto; }
.ar-bee .fl .sg { margin-bottom: calc(-1 * min(15cqw, 27cqh)) !important; z-index: 2; }
.ar-fish .fz-fish { height: min(20cqw, calc(62cqh / var(--n, 4))) !important; }

/* ───────────── 分數、連擊、勝利卡（js/reward.js）───────────── */
.score-chip { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px 12px 4px 8px; border-radius: 999px; background: linear-gradient(#fde68a, #f59e0b); color: #7c2d12; font-weight: 900; font-size: clamp(15px, 2vw, 20px); border: 2px solid #fff; box-shadow: 0 3px 0 #b45309; }
.score-chip .ic { width: 1.1em; height: 1.1em; color: #fff; filter: drop-shadow(0 1px 0 #b45309); }
.score-chip.bump { animation: stkBump .45s; }
.pts-pop { position: fixed; z-index: 130; transform: translate(-50%, -50%); pointer-events: none; font-weight: 900; font-size: clamp(30px, 5vw, 48px); color: #fde047;
  -webkit-text-stroke: 2px #b45309; text-shadow: 0 4px 0 #b45309, 0 8px 16px rgba(0, 0, 0, .3); animation: ptsUp 1.05s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.pts-pop.small { font-size: clamp(22px, 3.6vw, 34px); color: #bae6fd; -webkit-text-stroke-color: #0369a1; text-shadow: 0 3px 0 #0369a1; }
@keyframes ptsUp { 0% { transform: translate(-50%, -30%) scale(.4); opacity: 0; } 25% { transform: translate(-50%, -80%) scale(1.25); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -190%) scale(1); opacity: 0; } }
.combo-pop { position: absolute; z-index: 60; left: 50%; top: 150px; display: flex; align-items: baseline; gap: 8px; transform: translateX(-50%) rotate(-6deg); pointer-events: none; font-weight: 900; font-style: italic;
  color: #fff; -webkit-text-stroke: 2px #7c3aed; text-shadow: 0 4px 0 #6d28d9, 0 0 24px rgba(168, 85, 247, .8); animation: comboIn 1.25s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.combo-pop b { font-size: clamp(26px, 4.4vw, 44px); letter-spacing: .04em; }
.combo-pop span { font-size: clamp(40px, 7vw, 70px); color: #fde047; -webkit-text-stroke-color: #c2410c; text-shadow: 0 5px 0 #c2410c, 0 0 24px rgba(251, 146, 60, .9); }
.combo-pop .ic { width: clamp(34px, 5vw, 52px); height: auto; color: #f97316; filter: drop-shadow(0 0 10px #fb923c); align-self: center; }
.combo-pop.hot { animation: comboIn 1.25s cubic-bezier(.2, 1.6, .4, 1) forwards, comboShake .1s 6 alternate; }
@keyframes comboIn { 0% { transform: translateX(-50%) rotate(-6deg) scale(.2); opacity: 0; } 20% { transform: translateX(-50%) rotate(-6deg) scale(1.2); opacity: 1; } 35% { transform: translateX(-50%) rotate(-6deg) scale(1); } 80% { opacity: 1; } 100% { transform: translateX(-50%) translateY(-30px) rotate(-6deg) scale(.9); opacity: 0; } }
@keyframes comboShake { to { margin-left: 6px; } }
.vic { position: fixed; inset: 0; z-index: 105; display: grid; place-items: center; padding: 16px; background: rgba(30, 11, 61, .55); animation: fadeIn .3s; }
.vic-card { position: relative; width: min(92vw, 440px); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 20px 22px; border-radius: 32px; overflow: hidden;
  background: radial-gradient(circle at 50% 0, #fff7ed, #fff 60%); border: 4px solid #fde68a; box-shadow: 0 0 0 6px rgba(255, 255, 255, .5), 0 24px 60px rgba(30, 11, 61, .5); animation: stkIn .6s cubic-bezier(.2, 1.5, .4, 1); }
.vic-card .cb-rays { opacity: .25; }
.vic-title { position: relative; font-size: clamp(32px, 7vw, 46px); font-weight: 900; color: #fff; -webkit-text-stroke: 2px #7c3aed; text-shadow: 0 5px 0 #6d28d9, 0 10px 18px rgba(109, 40, 217, .35); }
.vic-stars { position: relative; display: flex; gap: 4px; align-items: flex-end; }
.vic-star { width: clamp(64px, 16vw, 90px); color: #e5e7eb; filter: drop-shadow(0 4px 0 #cbd5e1); }
.vic-star:nth-child(2) { width: clamp(80px, 20vw, 112px); margin-bottom: 14px; }
.vic-star .ic { width: 100%; height: auto; }
.vic-star.on { color: #facc15; filter: drop-shadow(0 4px 0 #ca8a04) drop-shadow(0 0 14px rgba(250, 204, 21, .7)); animation: vicStar .55s calc(.5s + var(--k) * .38s) cubic-bezier(.2, 1.7, .4, 1) both; }
@keyframes vicStar { from { transform: translateY(-160px) scale(2.2) rotate(-40deg); opacity: 0; } }
.vic-score { position: relative; display: flex; align-items: baseline; gap: 10px; }
.vic-score small { font-weight: 900; color: #7c3aed; font-size: 1.1rem; }
.vic-score b { font-size: clamp(40px, 9vw, 56px); font-weight: 900; color: #f59e0b; -webkit-text-stroke: 1.5px #b45309; text-shadow: 0 4px 0 #b45309; font-variant-numeric: tabular-nums; }
.vic-rec { position: absolute; right: -86px; top: -6px; padding: 4px 10px; border-radius: 12px; background: #ef4444; color: #fff; font-weight: 900; transform: rotate(12deg); box-shadow: 0 3px 0 #991b1b; animation: vicRec .5s 1.8s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes vicRec { from { transform: rotate(12deg) scale(0); } }
.vic-best { position: relative; color: #64748b; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.vic-best .ic { width: 1.1em; height: 1.1em; color: #f59e0b; }
.vic-stk { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 4px; font-weight: 900; color: #7c3aed; animation: popIn .5s 2.2s both; }
.vic-stk .stk-big .pic { font-size: clamp(90px, 22vw, 130px); }
.vic-btns { position: relative; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .pts-pop, .combo-pop, .vic-star.on, .vic-card { animation: none !important; } }
.ar .st .sg.sg:not(:has(.pic)):not(:has(.emo)) { font-size: clamp(14px, min(3.3cqw, 4.6cqh), 24px); }
.ar-rocket .pl { aspect-ratio: 1; }
/* 找規律的彩色圓點：固定大小（以前會撐到整個畫面咁大） */
.emo > .shape { display: inline-block; width: 1.25em !important; height: 1.25em; vertical-align: middle; }
.pat { gap: 8px; }
.pat .emo { font-size: 1em; line-height: 1; }
.pat .emo.q { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; font-size: 1em; }
.ar .sg.sg .emo:has(> .shape) { font-size: 2.2em; }

/* ───────────── 童話任務（js/story.js）───────────── */
.game { position: relative; }
.st-intro { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 16px;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 255, 255, .25), rgba(76, 29, 149, .55)), var(--wbg, linear-gradient(#fde2e4, #e9d5ff)) center / cover; animation: fadeIn .4s; }
.st-intro.out { animation: stOut .38s forwards; }
@keyframes stOut { to { opacity: 0; transform: scale(1.06); } }
.st-stage { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 10px; width: min(96vw, 820px); }
.st-npc { width: clamp(130px, 26vw, 250px); animation: stIn .7s cubic-bezier(.2, 1.4, .4, 1) both, stBob 2.4s .7s ease-in-out infinite; }
.st-npc img, .st-npc .spr, .st-npc .owl { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 14px rgba(30, 11, 61, .35)); }
.st-cq { width: clamp(90px, 15vw, 150px); animation: stIn .7s .25s cubic-bezier(.2, 1.4, .4, 1) both, stBob 2.6s 1s ease-in-out infinite; }
.st-cq .owl { width: 100%; height: auto; }
@keyframes stIn { from { transform: translateY(60px) scale(.6); } }
@keyframes stBob { 50% { transform: translateY(-8px); } }
.st-bubble { position: relative; align-self: center; margin-bottom: 30%; padding: 16px 20px; border-radius: 26px; background: #fff; box-shadow: 0 10px 30px rgba(30, 11, 61, .3); animation: popIn .5s .5s both;
  font-size: clamp(17px, 2.3vw, 24px); line-height: 1.45; color: #3b2a63; }
.st-bubble::before { content: ""; position: absolute; left: -14px; bottom: 26px; border: 14px solid transparent; border-right-color: #fff; border-left: 0; }
.st-bubble b { display: block; color: #7c3aed; margin-bottom: 4px; }
.st-bubble p { margin: 0; }
.st-go { animation: popIn .5s 1s both, stPulse 1.6s 1.6s ease-in-out infinite; font-size: clamp(20px, 3vw, 28px) !important; }
@keyframes stPulse { 50% { transform: scale(1.06); } }
@media (max-width: 640px) { .st-stage { grid-template-columns: 1fr auto; } .st-bubble { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; } .st-bubble::before { display: none; } }
.npc-pal { position: fixed; left: 8px; bottom: 6px; z-index: 40; width: clamp(70px, 10vw, 120px); pointer-events: none; }
.npc-pal .np-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 10px rgba(30, 11, 61, .3)); animation: stBob 2.4s ease-in-out infinite; }
.npc-pal.happy .np-img { animation: npJump .7s cubic-bezier(.3, 1.6, .5, 1); }
.npc-pal.think .np-img { animation: npTilt .9s ease-in-out; }
@keyframes npJump { 40% { transform: translateY(-40%) scale(1.08); } }
@keyframes npTilt { 30%, 70% { transform: rotate(-12deg); } }
.np-say { position: absolute; left: 70%; bottom: 80%; white-space: nowrap; padding: 6px 12px; border-radius: 16px; background: #fff; color: #7c3aed; font-weight: 900; font-size: clamp(14px, 1.8vw, 18px);
  box-shadow: 0 4px 12px rgba(30, 11, 61, .25); opacity: 0; transform: scale(.5); transform-origin: 0 100%; }
.np-say.show { animation: npSay 2.2s forwards; }
@keyframes npSay { 0% { opacity: 0; transform: scale(.5); } 12% { opacity: 1; transform: scale(1.05); } 20% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
.np-heart { position: fixed; z-index: 120; width: 26px; height: 26px; color: #f43f5e; pointer-events: none; animation: npHeart 1.3s var(--dl) ease-out forwards; opacity: 0; }
.np-heart .ic { width: 100%; height: 100%; }
@keyframes npHeart { 0% { opacity: 0; transform: translateY(0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-90px) scale(1.2); } }
.vic-npc { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 2px; }
.vic-npc .vic-npc-img { width: clamp(70px, 18vw, 100px); height: auto; flex: none; animation: npJump 1s .3s cubic-bezier(.3, 1.6, .5, 1) 2; }
.vic-npc-say { flex: 1; padding: 10px 12px; border-radius: 18px; background: #f5f3ff; color: #3b2a63; font-size: .95rem; line-height: 1.35; text-align: left; }
.vic-npc-say b { display: block; color: #7c3aed; }
@media (prefers-reduced-motion: reduce) { .st-npc, .st-cq, .npc-pal .np-img, .st-go { animation: none !important; } }
.st-intro .st-go { padding: .55em 1.6em; border-radius: 999px; }
.st-intro .st-go .ic { width: 1.1em; height: 1.1em; }

/* ───────────── 交通賽車（js/themegames.js）───────────── */
.rc-field { display: block !important; }
.rc { position: relative; height: clamp(380px, 62vh, 640px); border-radius: 28px; overflow: hidden; touch-action: manipulation; user-select: none; container-type: size; box-shadow: 0 10px 24px rgba(40, 20, 80, .18); background: #7cc36b; }
.rc-road { position: absolute; inset: 0; background: #8b8fa3; background-size: 280% auto; background-position: 50% 0; background-repeat: repeat-y; }
.rc-road:not(.img) { background: linear-gradient(90deg, #6dbb5c 0 16%, #9ca3af 16% 84%, #6dbb5c 84%); }
.rc-road.img { animation: rcRoad 6s linear infinite; }
@keyframes rcRoad { from { background-position: 50% 0; } to { background-position: 50% var(--tile, 1200px); } }
.rc-hud { position: absolute; z-index: 6; left: 10px; right: 10px; top: 10px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.rc-hearts { display: flex; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); }
.rc-hearts i { width: 26px; height: 26px; color: #f43f5e; transition: .3s; }
.rc-hearts i .ic { width: 100%; height: 100%; fill: currentColor; }
.rc-hearts i.off { color: #cbd5e1; transform: scale(.7); }
.rc-got { padding: 4px 14px; border-radius: 999px; background: linear-gradient(#fde68a, #f59e0b); color: #7c2d12; font-weight: 900; font-size: 1.2rem; border: 2px solid #fff; }
.rc-car { position: absolute; z-index: 4; bottom: 6%; left: calc(18% + (64% / 2) * (var(--lane) + .5)); width: min(20cqw, 25cqh); transform: translateX(-50%); transition: left .22s cubic-bezier(.3, 1.3, .5, 1); }
.rc-car .rc-car-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .35)); }
.rc-car.tilt-l .rc-car-img { animation: rcTiltL .3s; }
.rc-car.tilt-r .rc-car-img { animation: rcTiltR .3s; }
@keyframes rcTiltL { 40% { transform: rotate(-12deg); } }
@keyframes rcTiltR { 40% { transform: rotate(12deg); } }
.rc-car.crash .rc-car-img { animation: rcCrash .5s; }
@keyframes rcCrash { 20%, 60% { transform: rotate(-16deg) translateX(-6px); filter: brightness(1.6) drop-shadow(0 0 10px #f43f5e); } 40%, 80% { transform: rotate(16deg) translateX(6px); } }
.rc-car.zoom { transition: bottom 1.1s ease-in, left .2s; bottom: 120%; }
.rc-boost { position: absolute; left: 30%; right: 30%; top: 96%; height: 22%; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: radial-gradient(ellipse at 50% 10%, #fff, #fde047 40%, rgba(251, 146, 60, 0) 72%); animation: rkFlick .1s infinite alternate; transform-origin: 50% 0; }
.rc-item { position: absolute; z-index: 3; top: -15%; left: calc(18% + (64% / 2) * (var(--lane) + .5)); width: min(15cqw, 19cqh); aspect-ratio: 1; transform: translateX(-50%); display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 55%, rgba(255, 255, 255, .6)); box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }
.rc-item .pic { font-size: min(11cqw, 14cqh); }
.rc-item .pic img { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); }
.rc-item.got { animation: rcGot .45s forwards; }
@keyframes rcGot { to { transform: translateX(-50%) scale(1.6); opacity: 0; } }
.rc-item.hit { animation: rcHit .45s forwards; background: #fecaca; }
@keyframes rcHit { to { transform: translateX(-50%) rotate(40deg) scale(.6); opacity: 0; } }
.rc-word { position: absolute; bottom: -18%; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 10px; border-radius: 999px; background: #22c55e; color: #fff; font-weight: 900; font-size: 1rem; border: 2px solid #fff; }
.rc.shake { animation: shake .35s; }
.rc-btn { position: absolute; z-index: 6; bottom: 4%; width: min(15cqw, 76px); aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; background: linear-gradient(#a78bfa, #7c3aed); color: #fff; box-shadow: 0 5px 0 #5b21b6, 0 10px 18px rgba(0, 0, 0, .3); display: grid; place-items: center; }
.rc-btn .ic { width: 55%; height: 55%; }
.rc-btn.left { left: 3%; }
.rc-btn.right { right: 3%; }
.rc-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #5b21b6; }
.rc-flag { position: absolute; z-index: 7; left: 50%; top: 20%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; animation: popIn .5s cubic-bezier(.2, 1.6, .4, 1); }
.rc-flag .rc-flag-img { width: min(26cqw, 30cqh); }
.rc-flag b { font-size: clamp(30px, 8cqw, 60px); color: #fff; -webkit-text-stroke: 2px #111827; text-shadow: 0 5px 0 #111827; font-weight: 900; font-style: italic; }
.rc.rc-out .rc-road { animation-play-state: paused; filter: grayscale(.6); }

/* ───────────── 開心菜園 ───────────── */
.gd-field { display: block !important; }
.gd { position: relative; height: clamp(380px, 62vh, 640px); border-radius: 28px; overflow: hidden; container-type: size; background: linear-gradient(#bfe9ff, #e8f8d8 45%, #b9875a 45%); background-size: cover; background-position: center bottom; box-shadow: 0 10px 24px rgba(40, 20, 80, .18); }
.gd-plot { position: absolute; left: 4%; right: 4%; bottom: 17%; top: 46%; display: grid; grid-template-columns: repeat(var(--c), 1fr); grid-auto-rows: 1fr; gap: 2% 3%; }
.gd-hole { position: relative; display: grid; place-items: end center; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gd-hole .gd-soil { position: absolute; left: -6%; right: -6%; bottom: -4%; width: 112%; height: 78%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(60, 30, 10, .35)); }
.gd-veg { position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); display: grid; place-items: center; }
.gd-veg .pic { font-size: min(13cqw, 20cqh); }
.gd-veg .pic img { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); }
.gd-hole.grow .gd-veg { animation: gdGrow .55s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes gdGrow { from { transform: translateX(-50%) scale(0) translateY(40%); } }
.gd-hole.jump .gd-veg { animation: gdJump .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes gdJump { 40% { transform: translateX(-50%) translateY(-30%) scale(1.15); } }
.gd-seed { display: block; width: min(3cqw, 5cqh); aspect-ratio: .7; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fde68a, #a16207); box-shadow: 0 2px 3px rgba(0, 0, 0, .3); animation: gdSeed .4s cubic-bezier(.3, 1.6, .5, 1); margin-bottom: -20%; }
@keyframes gdSeed { from { transform: translateY(-120%); } }
.gd-hole.eaten .gd-veg { animation: popIn .4s; }
.gd-bunny .pic { font-size: min(9cqw, 14cqh); }
.gd-can { position: absolute; z-index: 4; right: 4%; top: 6%; width: min(18cqw, 24cqh); transform-origin: 30% 70%; transition: transform .5s; }
.gd-can .gd-can-img { width: 100%; height: auto; display: block; }
.gd-can.pour { transform: translate(-60%, 40%) rotate(-35deg); }
.gd-can.pour::after { content: ""; position: absolute; left: -10%; top: 60%; width: 30%; height: 120%; background: repeating-linear-gradient(180deg, rgba(125, 211, 252, .9) 0 8px, transparent 8px 16px); animation: gdRain .3s linear infinite; border-radius: 6px; }
@keyframes gdRain { to { background-position: 0 16px; } }
.gd-basket { position: absolute; z-index: 4; left: 4%; top: 8%; width: min(16cqw, 22cqh); }
.gd-basket .gd-basket-img { width: 100%; height: auto; display: block; }
.gd-basket b { position: absolute; right: -8%; top: -8%; min-width: 1.6em; padding: 0 .3em; border-radius: 999px; background: #f59e0b; color: #fff; font-weight: 900; text-align: center; border: 2px solid #fff; }
.gd-fly { position: fixed; z-index: 120; pointer-events: none; }
.gd-fly .pic { font-size: 70px; }
.gd-bar { position: absolute; z-index: 5; left: 0; right: 0; bottom: 3%; display: flex; justify-content: center; align-items: center; gap: 14px; }
.gd-num, .gd-tick { min-width: min(18cqw, 110px); padding: .2em .6em; border-radius: 999px; border: 4px solid #fff; font-size: clamp(30px, min(8cqw, 10cqh), 56px); font-weight: 900; color: #fff;
  background: linear-gradient(#fb923c, #ea580c); box-shadow: 0 6px 0 #9a3412, 0 10px 18px rgba(0, 0, 0, .25); text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.gd-num:nth-child(2) { background: linear-gradient(#60a5fa, #2563eb); box-shadow: 0 6px 0 #1e40af, 0 10px 18px rgba(0, 0, 0, .25); }
.gd-num:nth-child(3) { background: linear-gradient(#c084fc, #9333ea); box-shadow: 0 6px 0 #6b21a8, 0 10px 18px rgba(0, 0, 0, .25); }
.gd-num.ok { background: linear-gradient(#4ade80, #16a34a) !important; transform: scale(1.12); }
.gd-num.no { opacity: .35; animation: nope .4s; }
.gd-tick { background: linear-gradient(#4ade80, #16a34a); box-shadow: 0 6px 0 #166534, 0 10px 18px rgba(0, 0, 0, .25); display: grid; place-items: center; }
.gd-tick .ic { width: 1em; height: 1em; }
.gd-tick.no { animation: nope .4s; }
.gd-count, .gd-hint { display: inline-flex; align-items: center; gap: 6px; padding: .2em .8em; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: clamp(24px, min(6cqw, 8cqh), 40px); font-weight: 900; color: #166534; }
.gd-count .ic, .gd-hint .ic { width: .9em; height: .9em; color: #f59e0b; }
@media (prefers-reduced-motion: reduce) { .rc-road, .rc-boost { animation: none !important; } }

/* 電影感光影：柔和光束、四邊暗角、輕微暖色 */
.cine-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgba(40, 16, 70, .38) 100%), linear-gradient(115deg, rgba(255, 244, 214, .0) 30%, rgba(255, 244, 214, .22) 42%, rgba(255, 244, 214, 0) 54%, rgba(255, 244, 214, .16) 66%, rgba(255, 244, 214, 0) 76%);
  mix-blend-mode: normal; animation: cineBeam 9s ease-in-out infinite alternate; }
@keyframes cineBeam { from { background-position: 0 0, -40px 0; } to { background-position: 0 0, 60px 0; } }
.rc .amb, .gd .amb { z-index: 5; }
@media (prefers-reduced-motion: reduce) { .cine-fx, .rc-road.img { animation: none !important; } }

/* ───────────── 數學、邏輯主題遊戲（js/mathlogic.js）───────────── */
.ml-field { display: block !important; }
.game .play:has(.ml) { zoom: 1 !important; }
.ml { position: relative; height: clamp(380px, 62vh, 640px); border-radius: 28px; overflow: hidden; container-type: size; background-color: #dbeafe; background-size: cover; background-position: center; box-shadow: 0 10px 24px rgba(40, 20, 80, .18); user-select: none; }
.ml .amb { z-index: 5; }
.ml-bar { position: absolute; z-index: 6; left: 0; right: 0; bottom: 4%; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 10px; }
.ml-num, .ml-go { min-width: min(18cqw, 110px); padding: .15em .6em; border-radius: 999px; border: 4px solid #fff; font-size: clamp(28px, min(8cqw, 10cqh), 54px); font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  background: linear-gradient(hsl(calc(var(--tint, 0deg) + 25deg) 90% 62%), hsl(calc(var(--tint, 0deg) + 25deg) 80% 46%)); box-shadow: 0 6px 0 hsl(calc(var(--tint, 0deg) + 25deg) 70% 30%), 0 10px 18px rgba(0, 0, 0, .25); }
.ml-go { background: linear-gradient(#f472b6, #db2777); box-shadow: 0 6px 0 #9d174d, 0 10px 18px rgba(0, 0, 0, .25); display: inline-flex; align-items: center; gap: .3em; font-size: clamp(24px, min(6cqw, 8cqh), 40px); animation: stPulse 1.6s ease-in-out infinite; }
.ml-go .ic { width: 1em; height: 1em; fill: currentColor; }
.ml-num.ok { background: linear-gradient(#4ade80, #16a34a) !important; transform: scale(1.12); }
.ml-no { animation: nope .45s !important; filter: saturate(.4); }

/* 單雙數派對 */
.oe-crowd { position: absolute; left: 4%; right: 4%; top: 6%; bottom: 26%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2% 3%; }
.oe-a { display: grid; place-items: center; animation: oeDance 1.2s var(--d) ease-in-out infinite; }
.oe-a .pic, .oe-pair .pic { font-size: min(13cqw, 17cqh); }
.oe-a .pic img, .oe-pair .pic img { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); }
@keyframes oeDance { 50% { transform: translateY(-10%) rotate(-6deg); } }
.oe-crowd.paired { gap: 3% 5%; }
.oe-pair { position: relative; display: flex; align-items: flex-end; gap: 2px; padding: 4px 10px 2px; border-radius: 24px; background: rgba(255, 255, 255, .55); border: 3px solid rgba(255, 255, 255, .9); animation: popIn .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.oe-pair .oe-heart { position: absolute; left: 50%; top: -14px; width: 28px; height: 28px; transform: translateX(-50%); color: #f43f5e; animation: stBob 1.4s ease-in-out infinite; }
.oe-pair .oe-heart .ic { width: 100%; height: 100%; fill: currentColor; }
.oe-pair.lone { background: rgba(254, 226, 226, .7); border-color: #fca5a5; }
.oe-pair .oe-q { position: absolute; right: -10px; top: -12px; width: 30px; height: 30px; border-radius: 50%; background: #f59e0b; color: #fff; font-weight: 900; font-style: normal; display: grid; place-items: center; border: 2px solid #fff; }
.oe-big { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); width: min(40cqw, 46cqh); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #fde68a 60%, #f59e0b); border: 6px solid #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .3); font-size: min(22cqw, 26cqh); font-weight: 900; color: #7c2d12; animation: stBob 2.4s ease-in-out infinite; }
.oe-btns { display: flex; gap: 18px; }
.oe-b { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: min(28cqw, 170px); padding: .3em .8em .25em; border-radius: 26px; border: 4px solid #fff; font-size: clamp(26px, min(6.5cqw, 8cqh), 44px); font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.oe-b[data-v="odd"] { background: linear-gradient(#fb923c, #ea580c); box-shadow: 0 6px 0 #9a3412, 0 10px 18px rgba(0, 0, 0, .25); }
.oe-b[data-v="even"] { background: linear-gradient(#60a5fa, #2563eb); box-shadow: 0 6px 0 #1e40af, 0 10px 18px rgba(0, 0, 0, .25); }
.oe-b.ok { transform: scale(1.1); filter: drop-shadow(0 0 14px #fde047); }
.oe-dots { display: grid; grid-template-columns: repeat(2, .42em); gap: .12em; font-size: .7em; }
.oe-dots b { width: .42em; height: .42em; border-radius: 50%; background: #fff; }
.oe-dots b.lone { grid-column: 1; background: #fde047; }
.oe-pop { position: absolute; inset: 6% 5% 8%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); place-items: center; }
.oe-bub { width: min(19cqw, 34cqh); aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .95); font-size: min(9cqw, 15cqh); font-weight: 900; color: #1e3a8a;
  background: radial-gradient(circle at 30% 25%, #fff 0 12%, rgba(255, 255, 255, .55) 30%, rgba(186, 230, 253, .55) 70%, rgba(125, 211, 252, .7)); box-shadow: inset 0 -6px 14px rgba(56, 189, 248, .4), 0 8px 16px rgba(0, 0, 0, .15); animation: stBob 2.6s var(--d) ease-in-out infinite; }
.oe-bub.pop { animation: rcGot .45s forwards; pointer-events: none; }
.oe-line { position: absolute; left: 4%; right: 4%; top: 22%; display: flex; justify-content: center; gap: 2.5%; }
.oe-n { width: min(15cqw, 24cqh); aspect-ratio: 1; display: grid; place-items: center; border-radius: 20px; background: rgba(255, 255, 255, .92); font-size: min(8cqw, 12cqh); font-weight: 900; color: #64748b; box-shadow: 0 6px 12px rgba(0, 0, 0, .15); }
.oe-n.hl { color: #fff; background: linear-gradient(#a78bfa, #7c3aed); }
.oe-n.q { background: #fde047; color: #92400e; border: 3px dashed #92400e; }

/* 火箭倒數 */
.ml-cd .cd-screen { position: absolute; z-index: 6; left: 50%; top: 4%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; padding: 6px 26px 8px; border-radius: 18px; background: #0f172a; border: 4px solid #94a3b8; box-shadow: 0 0 24px rgba(56, 189, 248, .5), inset 0 0 18px rgba(56, 189, 248, .3); }
.ml-cd .cd-screen small { color: #7dd3fc; font-weight: 800; letter-spacing: .2em; font-size: .75rem; }
.ml-cd .cd-screen b { font-family: ui-monospace, monospace; font-size: clamp(34px, min(9cqw, 12cqh), 64px); color: #fde047; text-shadow: 0 0 12px #fde047; line-height: 1.05; }
.ml-cd .cd-nums { position: absolute; z-index: 6; left: 3%; right: 3%; top: 26%; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2cqh 2cqw; max-width: 94%; margin: 0 auto; }
.cd-b { width: min(14cqw, 15cqh); aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; font-size: min(6.5cqw, 7.5cqh); font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
  background: radial-gradient(circle at 35% 30%, #c4b5fd, #7c3aed 70%); box-shadow: 0 5px 0 #4c1d95, 0 0 16px rgba(167, 139, 250, .6); }
.cd-b.done { background: radial-gradient(circle at 35% 30%, #fef08a, #f59e0b 70%); box-shadow: 0 2px 0 #b45309, 0 0 20px #fde047; transform: scale(.88); opacity: .7; }
.ml-cd .rk.cd-rk { width: min(18cqw, 22cqh); margin-left: calc(min(18cqw, 22cqh) / -2); bottom: 5%; z-index: 4; }
.ml-cd .rk.cd-rk .spr { width: 100%; height: auto; }
.ml-cd .rk.cd-launch { transition: bottom 1.4s cubic-bezier(.5, 0, .9, .4); bottom: 130%; }
.ml-cd .pad-base { width: min(30cqw, 36cqh); height: 4%; }
.cd-blast { position: absolute; z-index: 8; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-6deg); font-size: clamp(36px, 10cqw, 76px); font-weight: 900; font-style: italic; color: #fff; -webkit-text-stroke: 2px #c2410c; text-shadow: 0 6px 0 #c2410c, 0 0 30px #fb923c; animation: comboIn 1.8s cubic-bezier(.2, 1.6, .4, 1) forwards; white-space: nowrap; }

/* 小兔跳跳 */
.hp-path { position: absolute; left: 3%; right: 3%; top: 46%; display: flex; justify-content: space-between; align-items: flex-end; }
.hp-stone { position: relative; width: min(12.5cqw, 20cqh); aspect-ratio: 1.6; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #e5e7eb, #9ca3af 70%, #6b7280); box-shadow: 0 8px 0 #4b5563, 0 12px 16px rgba(0, 0, 0, .3); }
.hp-stone b { font-size: min(6.5cqw, 9cqh); font-weight: 900; color: #475569; }
.hp-stone.on { background: radial-gradient(ellipse at 50% 35%, #fef9c3, #facc15 70%, #ca8a04); box-shadow: 0 8px 0 #a16207, 0 0 18px #fde047; }
.hp-stone.on b { color: #7c2d12; }
.hp-bunny { position: absolute; z-index: 5; width: min(13cqw, 20cqh); transform: translate(-50%, -72%); transition: left .5s cubic-bezier(.4, 0, .4, 1), top .5s; pointer-events: none; }
.hp-bunny .spr, .hp-bunny img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .3)); }
.hp-bunny.jump .spr, .hp-bunny.jump img { animation: hpJump .5s cubic-bezier(.3, 0, .5, 1); }
@keyframes hpJump { 50% { transform: translateY(-70%) rotate(-10deg); } }
.hp-carrot { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; animation: stBob 2s var(--d) ease-in-out infinite; }
.hp-carrot .pic { font-size: min(13cqw, 18cqh); transform: rotate(20deg); }
.hp-carrot b { margin-top: -.4em; padding: .05em .55em; border-radius: 999px; background: linear-gradient(#fb923c, #ea580c); color: #fff; border: 3px solid #fff; font-size: clamp(24px, min(6.5cqw, 8cqh), 44px); font-weight: 900; box-shadow: 0 5px 0 #9a3412; }

/* 圖畫數獨 */
.sd-grid { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); width: min(78cqw, 64cqh); aspect-ratio: 1; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; padding: 8px; border-radius: 22px; background: rgba(255, 255, 255, .75); box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
.sd-cell { display: grid; place-items: center; border-radius: 14px; background: #fff; border: 3px solid #e9d5ff; padding: 0; }
.sd-cell .pic { font-size: min(calc(48cqh / var(--n)), calc(60cqw / var(--n))); }
.sd-cell.empty { background: #fef9c3; border: 3px dashed #f59e0b; cursor: pointer; }
.sd-cell.empty i { font-style: normal; font-weight: 900; font-size: min(7cqw, 8cqh); color: #f59e0b; }
.sd-cell.sel { box-shadow: 0 0 0 4px #7c3aed; animation: stPulse 1s ease-in-out infinite; }
.sd-cell.filled { background: #dcfce7; border-color: #86efac; animation: popIn .4s; }
.sd-pal { bottom: 2%; gap: 10px; }
.sd-pick { width: min(15cqw, 16cqh); aspect-ratio: 1; border-radius: 20px; border: 4px solid #fff; background: radial-gradient(circle, #fff, #f5f3ff); box-shadow: 0 5px 0 #c4b5fd, 0 10px 16px rgba(0, 0, 0, .2); display: grid; place-items: center; padding: 0; }
.sd-pick .pic { font-size: min(10cqw, 11cqh); }
.sd-pick.on { box-shadow: 0 0 0 5px #7c3aed, 0 10px 16px rgba(0, 0, 0, .2); transform: scale(1.08); }

/* 楚橋編程 */
.cg-wrap { position: absolute; inset: 3%; display: flex; align-items: center; justify-content: center; gap: 3%; }
.cg-grid { position: relative; width: min(58cqw, 86cqh); aspect-ratio: 1; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; padding: 5px; border-radius: 18px; background: rgba(120, 80, 40, .5); flex: none; }
.cg-cell { position: relative; border-radius: 10px; overflow: hidden; background: #86c76a; display: grid; place-items: center; }
.cg-cell .cd-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cg-rock { position: relative; z-index: 1; } .cg-rock .pic { font-size: min(calc(40cqh / var(--n)), calc(28cqw / var(--n))); }
.cg-goal { position: relative; z-index: 1; width: 78%; } .cg-goal .cg-chest { width: 100%; height: auto; }
.cg-goal.open { animation: popIn .5s; filter: drop-shadow(0 0 16px #fde047); }
.cg-bot { position: absolute; z-index: 3; left: calc(5px + (100% - 10px) / var(--n) * var(--c)); top: calc(5px + (100% - 10px) / var(--n) * var(--r)); width: calc((100% - 10px) / var(--n)); aspect-ratio: 1; display: grid; place-items: center; transition: left .38s ease-in-out, top .38s ease-in-out; pointer-events: none; }
.cg-bot .cg-owl { width: 84%; height: auto; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.cg-bot.bump { animation: nope .45s; }
.cg-side { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; max-width: 40%; }
.cg-prog { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 54px; width: 100%; padding: 6px; border-radius: 16px; background: rgba(255, 255, 255, .85); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .12); }
.cg-step { width: 40px; height: 40px; border-radius: 10px; background: #ede9fe; display: grid; place-items: center; }
.cg-step.now { background: #fde047; transform: scale(1.15); }
.cg-empty { font-weight: 900; color: #a78bfa; font-size: 1.6rem; line-height: 40px; }
.cg-arr { display: grid; place-items: center; color: #6d28d9; }
.cg-arr .ic { width: 28px; height: 28px; }
.cg-arr.up { transform: rotate(-90deg); } .cg-arr.down { transform: rotate(90deg); } .cg-arr.left { transform: rotate(180deg); }
.cg-pad { display: grid; grid-template-columns: repeat(3, min(12cqw, 70px)); grid-template-rows: repeat(3, min(12cqw, 70px)); gap: 6px; }
.cg-key { border-radius: 18px; border: 4px solid #fff; background: linear-gradient(#a78bfa, #7c3aed); box-shadow: 0 5px 0 #5b21b6; display: grid; place-items: center; padding: 0; }
.cg-key .cg-arr { color: #fff; } .cg-key .cg-arr .ic { width: 60%; height: 60%; min-width: 26px; min-height: 26px; }
.cg-key.up { grid-column: 2; grid-row: 1; } .cg-key.left { grid-column: 1; grid-row: 2; } .cg-key.right { grid-column: 3; grid-row: 2; } .cg-key.down { grid-column: 2; grid-row: 3; }
.cg-key:active { transform: translateY(3px); box-shadow: 0 2px 0 #5b21b6; }
.cg-acts { display: flex; gap: 10px; }
.cg-del, .cg-go { padding: .2em .8em; border-radius: 999px; border: 4px solid #fff; font-size: clamp(20px, 3.2cqw, 30px); font-weight: 900; color: #fff; display: inline-flex; align-items: center; gap: .3em; }
.cg-del { background: linear-gradient(#94a3b8, #64748b); box-shadow: 0 5px 0 #334155; }
.cg-go { background: linear-gradient(#4ade80, #16a34a); box-shadow: 0 5px 0 #166534; animation: stPulse 1.6s ease-in-out infinite; }
.cg-del .ic, .cg-go .ic { width: 1em; height: 1em; }
@container (max-aspect-ratio: 1/1) { .cg-wrap { flex-direction: column; } .cg-grid { width: min(80cqw, 50cqh); } .cg-side { max-width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; } .cg-pad { grid-template-columns: repeat(3, min(11cqw, 54px)); grid-template-rows: repeat(3, min(11cqw, 54px)); } }
@media (prefers-reduced-motion: reduce) { .oe-a, .oe-bub, .oe-big, .hp-carrot, .ml-go, .cg-go { animation: none !important; } }

/* 勝利卡：閃閃星星 */
.vic-sky, .vic-burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vic-tw { position: absolute; width: var(--s); height: var(--s); background: var(--c); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 6px var(--c)); animation: vicTw var(--t) var(--d) ease-in-out infinite; opacity: 0; }
@keyframes vicTw { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } }
.vic-burst { display: grid; place-items: center; }
.vic-ray-st { position: absolute; left: 50%; top: 45%; width: 26px; height: 26px; margin: -13px; background: var(--c); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 8px var(--c)); opacity: 0; animation: vicRay 1.4s var(--dl) cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes vicRay { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) scale(1.2) rotate(180deg); } }
.vic-card { z-index: 1; }
.vic-star { position: relative; }
.vic-glint { position: absolute; left: 50%; top: 50%; width: 6px; height: 34%; margin-left: -3px; border-radius: 3px; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); transform-origin: 50% 0;
  transform: rotate(var(--a)) translateY(55%); opacity: 0; animation: vicGlint 1.6s calc(1.2s + var(--k, 0) * .38s) ease-in-out infinite; }
@keyframes vicGlint { 0%, 100% { opacity: 0; } 40% { opacity: .95; } }
.vic-star.on .ic { animation: vicShine 1.8s 1.6s ease-in-out infinite; }
@keyframes vicShine { 50% { filter: brightness(1.25) drop-shadow(0 0 16px #fde047); transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .vic-tw, .vic-ray-st, .vic-glint, .vic-star.on .ic { animation: none !important; opacity: .8; } }

/* ───────────── 遊戲畫面更大（客人要求）：頁面闊啲、遊戲框填滿、答案大啲 ───────────── */
.screen.game { max-width: 1400px; }
.game .opts.field, .play:has(.ar) .opts { width: 100% !important; max-width: 1240px !important; }
.game .play:has(.ar), .game .play:has(.rc), .game .play:has(.gd), .game .play:has(.ml) { width: 100%; }
.rc, .gd, .ml { width: 100%; }
.ar .sg { font-size: clamp(20px, min(6.4cqw, 7.8cqh), 46px); }
.ar .sg.sg:has(.pic) .pic, .ar .sg.sg:has(.emo) .emo { font-size: 3.15em; }
.ar .sg.sg:not(:has(.pic)):not(:has(.emo)) { font-size: clamp(22px, min(5.6cqw, 7.4cqh), 46px); }
.ar .sg.sg .cap { font-size: .62em; }
.game .opts:not(.field) .opt { font-size: clamp(20px, 2.6vw, 34px); }
.game .opts:not(.field) .opt .pic { font-size: clamp(72px, 10vw, 150px); }
.gd-veg .pic { font-size: min(11cqw, 15cqh) !important; }
.ar-apple .sg.sg:not(:has(.pic)):not(:has(.emo)) { font-size: clamp(18px, min(4cqw, 6cqh), 34px); }

/* ═════════════ iPad 版、手機打橫（客人要求）═════════════
   闊畫面：主頁左邊城堡和楚橋、右邊任務和開始；手機打橫：遊戲畫面分兩欄（左邊題目、右邊遊戲填滿高度） */

/* ── 主頁：橫向畫面 ── */
@media (orientation: landscape) and (min-aspect-ratio: 5/4) {
  .lobby { max-width: 1400px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); grid-template-rows: auto auto auto auto auto auto 1fr; column-gap: 18px; row-gap: 10px; align-content: start; }
  .lobby > .lb-top { grid-column: 1 / -1; grid-row: 1; }
  .lobby > .trial-bar { grid-column: 1 / -1; grid-row: 2; }
  .lobby > .lb-mid { grid-column: 1; grid-row: 3 / 8; align-self: stretch; }
  .lobby > .lb-logo { grid-column: 2; grid-row: 3; align-self: end; margin-top: 2vh; }
  .lobby > .lb-check { grid-column: 2; grid-row: 4; }
  .lobby > .lb-mission { grid-column: 2; grid-row: 5; }
  .lobby > .lb-gos { grid-column: 2; grid-row: 6; flex-direction: column; flex-wrap: nowrap; }
  .lobby > .lb-gos .lb-go { min-width: 0; width: 100%; }
  .lobby .lb-owl { width: min(30vw, 42vh, 300px) !important; }
}
/* 手機打橫：高度好矮，全部縮細 */
@media (orientation: landscape) and (max-height: 520px) {
  .lobby { row-gap: 6px; padding-top: 6px; padding-bottom: 6px; }
  .lobby .logo-top { font-size: clamp(30px, 9vh, 48px) !important; }
  .lobby .logo-sub { font-size: 12px; padding: 2px 12px; }
  .lobby > .lb-logo { margin-top: 0; }
  .lobby > .trial-bar { padding-top: 4px; padding-bottom: 4px; font-size: 14px; }
  .lobby .lb-mid { min-height: 0; }
  .lobby .lb-btn .lb-ic { width: clamp(40px, 13vh, 64px); height: clamp(40px, 13vh, 64px); }
  .lobby .lb-btn .lb-name { font-size: 11px; }
  .lobby .lb-side { gap: 2px; }
  .lobby .lb-owl { width: min(24vw, 46vh) !important; }
  .lobby .lb-say { font-size: 13px; padding: 6px 10px; }
  .lobby .lb-mrow { padding-top: 2px; padding-bottom: 2px; font-size: 13px; }
  .lobby .lb-mhead small { display: none; }
  .lobby .lb-gos .lb-go { padding: 4px 10px; font-size: 18px; }
  .lobby .lb-gos .lb-goimg { width: 34px !important; height: 34px !important; }
  .lobby .lb-pet { width: min(12vw, 22vh); }
}

/* ── 遊戲畫面：手機打橫 ── */
@media (orientation: landscape) and (max-height: 520px) {
  .screen.game { display: grid; grid-template-columns: minmax(210px, 32%) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 10px; row-gap: 6px; max-width: none;
    height: 100dvh; min-height: 0; padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); overflow: hidden; }
  .screen.game > .bar { grid-column: 1 / -1; grid-row: 1; padding-top: 4px; padding-bottom: 4px; }
  .screen.game > .bar .icon { width: 38px; height: 38px; }
  .screen.game > .prompt { grid-column: 1; grid-row: 2; align-items: flex-start; }
  .screen.game > .prompt .ava { width: 52px; flex: none; }
  .screen.game > .prompt .ava .owl3d { width: 52px; }
  .screen.game > .prompt .bubble { font-size: clamp(15px, 4.2vh, 21px) !important; padding: 8px 12px; line-height: 1.3; }
  .screen.game > .prompt .stk-quest { display: none; }
  .screen.game > .play { display: contents; zoom: 1 !important; }
  .screen.game > .play > .stim { grid-column: 1; grid-row: 3; min-height: 0; overflow: auto; align-self: start; zoom: .78; max-width: 100%; }
  .screen.game > .play > .opts { grid-column: 2; grid-row: 2 / 4; min-height: 0; max-width: none !important; width: 100% !important; align-self: stretch; margin: 0; }
  .screen.game > .play > .opts:not(.field) { display: grid; align-content: center; }
  .game .ar-tag { margin-bottom: 4px; transform: scale(.85); transform-origin: 50% 0; }
  .ar { min-height: 0 !important; }
  .npc-pal { width: clamp(46px, 13vh, 70px); left: 4px; bottom: 2px; }
  #buddy { transform: scale(.7); transform-origin: 100% 100%; }
  .rc, .gd, .ml { min-height: 0; }
  .cheer { top: 56px !important; }
}

/* ── 童話開場、勝利卡、升級：手機打橫 ── */
@media (orientation: landscape) and (max-height: 520px) {
  .st-intro { gap: 8px; padding: 8px; }
  .st-stage { grid-template-columns: auto 1fr auto; width: min(96vw, 900px); }
  .st-npc { width: min(22vw, 44vh); }
  .st-cq { width: min(14vw, 30vh); }
  .st-bubble { margin-bottom: 8%; font-size: clamp(14px, 4vh, 20px); padding: 10px 14px; grid-column: auto; grid-row: auto; }
  .st-bubble::before { display: block; }
  .st-go { font-size: 20px !important; padding: .35em 1.2em !important; }
  .vic { padding: 6px; }
  .vic-card { width: min(94vw, 780px); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; column-gap: 16px; row-gap: 4px; padding: 12px 16px; align-items: center; justify-items: center; }
  .vic-card > .vic-npc { grid-column: 1; grid-row: 1; }
  .vic-card > .vic-title { grid-column: 1; grid-row: 2; font-size: 30px; }
  .vic-card > .vic-stars { grid-column: 1; grid-row: 3 / 5; }
  .vic-card > .vic-score { grid-column: 2; grid-row: 1; }
  .vic-card > .vic-best { grid-column: 2; grid-row: 2; }
  .vic-card > .vic-stk { grid-column: 2; grid-row: 3; }
  .vic-card > .vic-btns { grid-column: 2; grid-row: 4; margin-top: 0; }
  .vic-star { width: min(12vw, 18vh); }
  .vic-star:nth-child(2) { width: min(15vw, 22vh); }
  .vic-stk .stk-big .pic { font-size: min(14vw, 22vh) !important; }
  .vic-npc .vic-npc-img { width: min(10vw, 16vh); }
  .vic-npc-say { font-size: 13px; padding: 6px 10px; }
  .lvup-card, .stk-pop-card { transform: scale(.78); }
  .modal { max-height: 94vh; overflow: auto; }
}

/* ── iPad 直向：遊戲框填滿高度（JS 量度剩餘高度）；題目字大少少 ── */
@media (min-width: 740px) and (orientation: portrait) {
  .screen.game > .prompt .bubble { font-size: clamp(22px, 2.8vw, 30px); }
}
.play .opts.field .ar { max-height: none !important; }
@media (orientation: landscape) and (max-height: 520px) {
  .lobby > .lb-gos { flex-direction: row !important; }
  .lobby > .lb-gos .lb-go { width: auto; flex: 1 1 0; font-size: 16px; }
  .lobby .lb-mission { padding-top: 4px; padding-bottom: 4px; }
  .lobby .lb-mhead { font-size: 14px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .lobby .lb-side { display: grid; grid-template-columns: repeat(2, auto); gap: 2px 4px; align-content: center; }
  .lobby .lb-btn .lb-ic { width: clamp(38px, 12vh, 56px); height: clamp(38px, 12vh, 56px); }
  .lobby .lb-btn .lb-name { font-size: 10px; max-width: 64px; white-space: normal; line-height: 1.1; text-align: center; }
  .lobby .lb-say { max-width: 200px; font-size: 12px; }
}
.cg-pad { grid-template-columns: repeat(3, min(12cqw, 17cqh, 70px)) !important; grid-template-rows: repeat(3, min(12cqw, 17cqh, 70px)) !important; }
.cg-prog { min-height: min(54px, 12cqh); }
.cg-step { width: min(40px, 9cqh); height: min(40px, 9cqh); }
.cg-del, .cg-go { font-size: clamp(16px, min(3.2cqw, 6cqh), 30px); }
.cg-side { gap: min(10px, 2cqh); }
/* 小火車：卡卡至少有一定闊度，圖片照比例（闊畫面以前會變得好細） */
.ar-train .wagon { width: clamp(120px, min(24cqw, 52cqh), 260px) !important; }
.ar-train .wagon .wagon-img { width: 100%; height: auto; display: block; }
.ar-train .cars { height: 40%; top: 6%; }
@media (orientation: landscape) and (max-height: 520px) {
  .vic-card { max-height: 96vh; overflow: hidden; grid-template-rows: auto auto auto; }
  .vic-card > .vic-stars { grid-row: 3; }
  .vic-card > .vic-score { grid-row: 1; }
  .vic-card > .vic-best { display: none; }
  .vic-card > .vic-stk { grid-row: 2; }
  .vic-card > .vic-btns { grid-row: 3; flex-wrap: nowrap; }
  .vic-btns .btn { padding: .3em .9em; font-size: 16px; }
  .vic-score b { font-size: 34px; }
  .vic-stk .stk-big .pic { font-size: min(12vw, 18vh) !important; }
  .vic-title { font-size: 26px !important; }
}
.ar-train .cars { top: 22% !important; height: 30% !important; }
.ar-train .rail.top { top: 52%; }
.ar-train .wagon { width: clamp(110px, min(22cqw, 40cqh), 240px) !important; }
@media (orientation: landscape) and (max-height: 520px) {
  .game .ar-tag { display: none !important; }
  .ar-fish .fz-fish { height: min(20cqw, calc(88cqh / var(--n, 4))) !important; }
}

/* ═════════════ 版面 B：電影童話（js/layout.js）═════════════ */
.screen.game.cine-b::before { background: radial-gradient(ellipse 95% 85% at 50% 55%, transparent 58%, rgba(30, 10, 60, .42)), linear-gradient(rgba(30, 10, 60, .18), transparent 18%), var(--scene, var(--wbg, none)) center / cover, var(--bg); }
.cine-b > .bar { background: none !important; box-shadow: none !important; backdrop-filter: none !important; padding: 2px 0; }
.cine-b > .bar .icon, .cine-b > .bar .pill.gems { background: rgba(255, 255, 255, .88); border: 0; box-shadow: 0 4px 10px rgba(30, 10, 60, .22); }
.cine-b > .bar .prog { display: none; }
.pstars { flex: 1; display: flex; justify-content: center; align-items: center; gap: clamp(4px, 1vw, 10px); min-width: 0; }
.pstars i { width: clamp(24px, 3vw, 36px); aspect-ratio: 1; background: rgba(255, 255, 255, .6); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2)); transition: transform .3s; }
.pstars.many i { width: clamp(16px, 2vw, 26px); }
.pstars i.on { background: linear-gradient(#fef08a, #facc15); filter: drop-shadow(0 0 6px #fde047); animation: popIn .45s cubic-bezier(.2, 1.6, .4, 1); }
.pstars i.half { background: linear-gradient(#e9d5ff, #c4b5fd); }
.pstars i.cur { background: #fff; transform: scale(1.15); animation: stPulse 1.4s ease-in-out infinite; }
/* 楚橋的對白框 */
.cine-b > .prompt { align-items: flex-start; gap: 4px; }
.cine-b > .prompt .ava { width: clamp(70px, 9vw, 130px); filter: drop-shadow(0 10px 10px rgba(30, 10, 60, .3)); }
.cine-b > .prompt .ava .owl3d, .cine-b > .prompt .ava .owl { width: 100%; height: auto; }
.cine-b > .prompt .bubble { position: relative; flex: 0 1 auto; max-width: min(820px, 76%); margin-top: clamp(6px, 1.4vw, 18px); padding: 12px 22px 14px; border-radius: 26px 26px 26px 6px; background: #fff; color: #3b2a63; font-weight: 900; box-shadow: 0 10px 24px rgba(30, 10, 60, .25) !important; border: 0; }
.cine-b > .prompt .bubble::before { content: "CHUQIAO"; display: block; font-size: 12px; letter-spacing: .14em; color: #7c3aed; font-weight: 900; margin-bottom: 2px; }
.cine-b > .prompt .say-ring { flex: none; align-self: flex-end; width: 48px !important; height: 48px !important; margin: 0 0 -10px -26px; z-index: 2; border-radius: 50%; background: #7c3aed !important; color: #fff; border: 3px solid #fff !important; box-shadow: 0 4px 10px rgba(30, 10, 60, .3); }
.cine-b > .prompt .say-ring .ic { width: 55%; height: 55%; }
.cine-b > .prompt .stk-quest { margin-left: auto; }
/* 遊戲框透明：場景接住整個畫面 */
.cine-b .ar.has-bg, .cine-b .ml.lifted, .cine-b .gd.lifted { background: none !important; box-shadow: none !important; border-radius: 0 !important; }
.cine-b .ar.has-bg .cine-fx, .cine-b .ml.lifted .cine-fx, .cine-b .gd.lifted .cine-fx { display: none; }
.cine-b .ar-fish .fz-sky { background: none; }

/* ═════════════ 版面 D：繪本兩頁（有故事、文章的題目，闊畫面）═════════════ */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 521px) {
  .screen.game.book { display: grid; grid-template-columns: minmax(320px, 34%) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 22px; row-gap: 0; max-width: none; height: 100dvh; overflow: hidden; }
  .screen.game.book > .bar { grid-column: 1 / -1; grid-row: 1; margin-bottom: 8px; }
  .screen.game.book > .prompt { grid-column: 1; grid-row: 2; flex-direction: column; align-items: stretch; padding: 22px 24px 6px; border-radius: 22px 22px 0 0; background: linear-gradient(90deg, #fffaf0 90%, #f3e8d2); box-shadow: -10px 0 0 #8b5a2b inset; }
  .screen.game.book > .prompt .ava { display: none; }
  .screen.game.book > .prompt .bubble { max-width: none; margin: 0; padding: 0; background: none; box-shadow: none !important; border-radius: 0; font-family: Georgia, "Microsoft JhengHei", serif; font-size: clamp(24px, 2.4vw, 34px) !important; line-height: 1.25; }
  .screen.game.book > .prompt .bubble::before { content: "📖 STORY TIME"; color: #a16207; }
  .screen.game.book > .prompt .say-ring { position: absolute; right: 18px; top: 14px; margin: 0; }
  .screen.game.book > .prompt .stk-quest { display: none; }
  .screen.game.book > .play { display: contents; zoom: 1 !important; }
  .screen.game.book > .play > .stim { grid-column: 1; grid-row: 3; min-height: 0; overflow: auto; padding: 4px 24px 24px; border-radius: 0 0 22px 22px; background: linear-gradient(90deg, #fffaf0 90%, #f3e8d2); box-shadow: -10px 0 0 #8b5a2b inset, 0 18px 30px rgba(76, 29, 149, .3); max-width: none; margin-bottom: 10px; }
  .screen.game.book > .play > .stim .rd-card, .screen.game.book > .play > .stim .passage-card, .screen.game.book > .play > .stim .tale { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; max-width: none !important; width: 100%; text-align: left; }
  .screen.game.book > .play > .stim .rd-text, .screen.game.book > .play > .stim .passage-card p, .screen.game.book > .play > .stim .tale span { font-family: Georgia, "Microsoft JhengHei", serif; font-size: clamp(18px, 1.7vw, 24px) !important; line-height: 1.7; color: #44403c; }
  .screen.game.book > .play > .stim .rd-title { font-size: clamp(18px, 1.7vw, 24px); color: #a16207; }
  .screen.game.book > .play > .stim .tale img, .screen.game.book > .play > .stim .tale .scene { border-radius: 14px; width: 100%; }
  .screen.game.book > .play > .opts { contain: size; grid-column: 2; grid-row: 2 / 4; min-height: 0; max-width: none !important; width: 100% !important; align-self: stretch; margin: 0; }
  .screen.game.book > .play > .opts:not(.field) { display: grid; align-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pstars i { animation: none !important; } }
.amb-clouds i { filter: blur(6px); opacity: .55; border-radius: 999px; }
@media (orientation: landscape) and (min-width: 900px) and (min-height: 521px) {
  .screen.game.book > .play > .stim { display: block !important; text-align: left; }
  .screen.game.book > .play > .stim > * { margin-left: 0; margin-right: 0; }
}
/* 大遊戲框：文字答案不要太大（長的詞語會重疊） */
.ar .sg.sg:not(:has(.pic)):not(:has(.emo)) { font-size: clamp(18px, min(4.4cqw, 6.4cqh), 38px); }
.ar-rocket .sg.sg:not(:has(.pic)):not(:has(.emo)) { font-size: clamp(16px, min(3.2cqw, 5cqh), 30px); white-space: normal; max-width: 150%; text-align: center; }
.ar-rocket .pl .sg { max-width: 160%; }
.ar-butterfly .bf { width: clamp(60px, min(20cqw, 26cqh), 170px) !important; }

/* ═════════════ 開始冒險：iPad 和手機打橫 ═════════════ */
/* 世界地圖：橫向，左右掃動 */
.wmap-screen.land { max-width: none; height: 100dvh; min-height: 0; overflow: hidden; padding-left: 0; padding-right: 0; padding-bottom: 0; gap: 4px; }
.wmap-screen.land > .bar { padding: 0 max(16px, env(safe-area-inset-left)); }
.wmap-scroll { position: relative; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; border-radius: 26px 26px 0 0; box-shadow: inset 0 0 60px rgba(30, 10, 60, .25); scrollbar-width: thin; }
.wmap.land { border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.wmap.land .node { transform: translate(-50%, -50%); }
.wmap.land .avatar { transform: translateX(-50%); }
@media (max-height: 520px) {
  .wmap-screen.land .node { width: 52px; height: 52px; }
  .wmap-screen.land .node.boss { width: 68px; height: 68px; }
  .wmap-screen.land .node .nn { font-size: 18px; }
  .wmap-screen.land .avatar { width: 56px; }
  .wmap-screen.land .mdeco { font-size: 34px; }
  .wmap-screen.land .banner { transform: translateX(-50%) scale(.8); }
}
/* 選擇世界：闊畫面兩至三欄 */
@media (orientation: landscape) and (min-width: 760px) {
  .screen:has(> .wlist) { max-width: 1400px; }
  .wlist { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 14px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .wlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wtile { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
  .wtile .wt-boss { width: 64px; }
  .wtile small { display: none; }
  .screen:has(> .wlist) > .sub { display: none; }
}
@media (orientation: portrait) and (min-width: 740px) { .wmap-screen { max-width: 980px; } .wmap .node { transform: translate(-50%, -50%) scale(1.15); } }
/* 故事書問答（版面 B + D） */
.bkq .stim .rd-card { max-height: 34vh; overflow: auto; text-align: left; }
.bkq .opts.rows .opt { font-size: clamp(20px, 2.4vw, 30px); }
@media (orientation: landscape) and (min-width: 900px) and (min-height: 521px) { .bkq .stim .rd-card { max-height: none; } }
/* 打地鼠：地洞保持圓圓的比例（闊而矮的遊戲框也不會變扁），答案牌一定看得到 */
.ar-mole .mole-field { justify-items: center; align-items: center; }
.ar-mole .hole { height: auto !important; aspect-ratio: 1 / .95; width: min(100%, calc((92cqh / var(--rows, 2) - 10px) * 1.05)); }
.ar-mole .m-sign { position: absolute !important; top: 0; z-index: 3; }
/* 不會比視窗闊（瀏覽器放大時兩邊不會被切走） */
html, body { overflow-x: hidden; }
.screen.game { width: 100%; max-width: min(1400px, 100vw); }
.screen.game.book { max-width: 100vw; }
.ar-mole .mole { height: 86%; }
.ar-mole .mole .m-body { height: 70%; }
.ar-mole .m-sign { top: 2%; max-width: 104%; }
.ar-mole .hole::after { left: 16%; right: 16%; height: 24%; }
.ar-mole .mole { left: 12%; right: 12%; }
.ar-mole .mole .m-body { height: 76%; object-fit: contain; }
/* 答案牌貼住地鼠頭頂；地洞只切走下面（牌可以伸出洞外）；地鼠躲起來時牌也收起 */
.ar-mole .hole { overflow: visible; clip-path: inset(-300% -40% 0 -40%); }
.ar-mole .m-sign { top: auto !important; bottom: 70%; transition: opacity .15s; }
.ar-mole .mole:not(.up) .m-sign { opacity: 0; }
.ar-mole .mole-field { padding-top: max(16px, 12cqh) !important; }
/* 打地鼠：答案牌最高只佔一行地洞的一半（矮畫面不會被切走） */
.ar-mole .m-sign { font-size: clamp(11px, min(4.4cqw, calc(13cqh / var(--rows, 2))), 30px) !important; }
.ar-mole .m-sign .pic, .ar-mole .m-sign .emo { font-size: 2.1em !important; }
.ar-mole .mole-field { padding-top: max(16px, calc(30cqh / var(--rows, 2))) !important; }

/* ───────────── 聽指令（新版）：楚楚聽指令走過去做動作 ───────────── */
.fo-cc { position: absolute; z-index: 4; width: clamp(56px, 13cqw, 120px); transform: translate(-50%, -88%); transition: left .6s cubic-bezier(.4, .1, .4, 1), top .6s cubic-bezier(.4, .1, .4, 1); pointer-events: none; }
.fo-cc .fo-body { display: block; }
.fo-cc .fo-cc-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 8px rgba(40, 20, 60, .35)); }
.fo-cc.face-l .fo-body { transform: scaleX(-1); }
.fo-cc.walking .fo-cc-img { animation: foWalk .3s ease-in-out infinite alternate; }
@keyframes foWalk { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-10%) rotate(6deg); } }
.fo-cc.nope .fo-body { animation: beeNo .5s; }
.fo-cc.cheer .fo-cc-img { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 3; }
.fo-cc[class*="do-"] .fo-cc-img { animation: npJump .5s cubic-bezier(.3, 1.6, .5, 1); }
.fo-cc.do-sit .fo-cc-img { animation: foSit .7s ease-in-out; }
@keyframes foSit { 40%, 70% { transform: scaleY(.8) translateY(12%); } }
.fo-cc.do-look .fo-cc-img { animation: npTilt .8s ease-in-out; }
.fo-carry { position: absolute; left: 50%; top: -6%; transform: translate(-50%, -60%); z-index: 2; }
.fo-carry .pic { font-size: clamp(22px, 5cqw, 48px) !important; animation: popIn .35s cubic-bezier(.2, 1.6, .4, 1); }
.fo-cc.lift .fo-cc-img { transform: translateY(-3%); }
.fo-say { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -30%) scale(.6); white-space: nowrap; padding: 4px 10px; border-radius: 14px; background: #fff; color: #7c3aed; font-weight: 900; font-size: clamp(12px, 2.2cqw, 18px); box-shadow: 0 4px 10px rgba(40, 20, 60, .25); opacity: 0; }
.fo-say.show { animation: foSay 1.6s forwards; }
@keyframes foSay { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -40%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
.fo.taken .pic { opacity: .25; filter: grayscale(.8); }
.fo-in { position: absolute; right: -10%; bottom: 8%; z-index: 2; }
.fo-in .pic { font-size: .42em !important; }
.fo.put .pic img, .fo.closed .pic img, .fo.opened .pic img, .fo.lit .pic img, .fo.cleaned .pic img, .fo.played .pic img, .fo.eaten .pic img, .fo.looked .pic img, .fo.sat .pic img, .fo.went .pic img, .fo.touched .pic img { animation: foDo .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes foDo { 40% { transform: scale(1.15) rotate(-4deg); } }
.fo.closed .pic img { animation: foClose .6s ease-in-out forwards; }
@keyframes foClose { 50% { transform: scaleX(.6); } 100% { transform: scaleX(1); filter: brightness(.85) drop-shadow(0 0 .08em #4ade80); } }
.fo.opened .pic img, .fo.lit .pic img { filter: drop-shadow(0 0 .15em #fde047) brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .fo-cc, .fo-cc .fo-cc-img { animation: none !important; transition: none; } }

/* ───────────── 平面迷宮（js/flatgames.js）───────────── */
.flatmaze { background-color: #c8e6a0; background-size: cover; background-position: center; border: 6px solid #fff !important; border-radius: 22px; box-shadow: 0 10px 24px rgba(40, 20, 80, .25); overflow: hidden; }
.flatmaze .mc { border-color: #3f7d2a; }
.flatmaze .mc.wn { border-top-width: 6px; } .flatmaze .mc.ws { border-bottom-width: 6px; } .flatmaze .mc.ww { border-left-width: 6px; } .flatmaze .mc.we { border-right-width: 6px; }
.flatmaze.mz-beach .mc, .flatmaze.mz-snow .mc { border-color: #8b5a2b; }
.flatmaze.mz-space .mc { border-color: #c4b5fd; }
.flatmaze .mc.trail { background: rgba(255, 236, 160, .7); }
.flatmaze .mw.fz { background: #fff; border: 3px solid #fde68a; border-radius: 14px; box-shadow: 0 3px 0 rgba(0, 0, 0, .12); font-weight: 900; color: #3b2a63; padding: 1px 6px; }
.flatmaze .mw.mp.fz { padding: 2px; border-radius: 50%; }
.flat-ic { width: calc(min(92vw, 460px, 62vh) / var(--w) * .62); height: auto; display: block; }
.fz-goal .flat-ic { width: calc(min(92vw, 460px, 62vh) / var(--w) * .8); }
.flatmaze .mc.got .mw.fz { border-color: #22c55e; background: #dcfce7; }
.flatmaze .mc.bad .mw.fz { border-color: #ef4444; background: #fee2e2; }

/* ───────────── 平面找不同 ───────────── */
.fspot .fpic { position: relative; overflow: hidden; background: #fff; }
.fspot .fpic .spot-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.sd-patch { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 71%); mask-image: radial-gradient(circle, #000 58%, transparent 71%); }
.sd-patch.k-color { filter: hue-rotate(150deg) saturate(1.4); }
.sd-patch.k-flip { transform: scaleX(-1); }
.sd-patch.k-big { transform: scale(1.35); }
.sd-patch.k-small { transform: scale(.72); }
.sd-patch.k-turn { transform: rotate(35deg); }
.fspot .ring { z-index: 3; }

/* 迷宮小圖：按格子大小 */
.flatmaze .mc .mw.mp.fz { width: 74%; aspect-ratio: 1; display: grid; place-items: center; padding: 6%; }
.flatmaze .mc .mw.mp.fz .flat-ic { width: 100%; }
.flatmaze .mc .fz-goal { width: 86%; } .flatmaze .mc .fz-goal .flat-ic { width: 100%; }
.flatmaze .mc .mw.fz:not(.mp) { font-size: clamp(11px, calc(min(92vw, 460px, 62vh) / var(--w) * .2), 18px); }
.flatmaze::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .22); pointer-events: none; }
.follow { max-width: 100%; }
.flatmaze .mc .mw.mp.fz { overflow: hidden; padding: 0; }
.flatmaze .mc .mw.mp.fz .flat-ic { transform: scale(1.55); }
.flatmaze .mc .fz-goal .flat-ic { transform: scale(1.25); }
.game .play:has(.follow) { zoom: 1 !important; }
.rd-say { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: clamp(16px, 2vw, 22px); padding: 8px 18px; }
.rd-say .ic { width: 1.1em; height: 1.1em; }
.fspot .ring { width: 9%; aspect-ratio: 1; height: auto; }

/* ───────────── 數學新遊戲（js/mathgames2.js）───────────── */
.mg-field { display: block !important; }
.game .play:has(.mg) { zoom: 1 !important; }
.mg .mg-bar { position: absolute; z-index: 6; left: 0; right: 0; bottom: 3%; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 10px; }
.mg-ask { padding: .2em .8em; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #3b2a63; font-weight: 900; font-size: clamp(18px, min(4.6cqw, 6cqh), 34px); box-shadow: 0 4px 10px rgba(0, 0, 0, .15); display: inline-flex; align-items: center; gap: .3em; }
.mg-ask .pic { font-size: 1.6em; }
.mg-ask .ic { width: 1em; height: 1em; }
/* 超級市場 */
.mk-list { position: absolute; z-index: 5; left: 2%; top: 3%; display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 16px; background: #fffbea; border: 3px dashed #f59e0b; box-shadow: 0 6px 14px rgba(0, 0, 0, .18); transform: rotate(-2deg); }
.mk-list b { display: flex; align-items: center; gap: 6px; color: #92400e; font-size: clamp(13px, 2cqw, 18px); }
.mk-list b .ic { width: 1.1em; height: 1.1em; }
.mk-li { display: flex; align-items: center; gap: 6px; font-weight: 900; color: #3b2a63; font-size: clamp(16px, min(3cqw, 4.4cqh), 26px); }
.mk-li .pic { font-size: clamp(28px, min(6cqw, 8cqh), 56px); }
.mk-li i { font-style: normal; }
.mk-li.done { text-decoration: line-through; opacity: .5; }
.mk-li.done::after { content: "✔"; color: #16a34a; }
.mk-shelf { position: absolute; left: 24%; right: 3%; top: 6%; bottom: 30%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2% 2%; padding: 1.5%; border-radius: 18px; background: rgba(255, 255, 255, .35); }
.mk-item { position: relative; display: grid; place-items: center; padding: 0; border: 0; border-bottom: 8px solid #b45309; border-radius: 10px 10px 4px 4px; background: linear-gradient(rgba(255, 255, 255, .85), rgba(255, 247, 237, .95)); box-shadow: 0 4px 8px rgba(0, 0, 0, .12); cursor: pointer; }
.mk-item .pic { font-size: min(10cqw, 15cqh); }
.mk-price { position: absolute; right: 6%; top: 6%; padding: .05em .45em; border-radius: 10px; background: #fde047; color: #7c2d12; font-weight: 900; font-size: clamp(14px, min(2.8cqw, 4.4cqh), 26px); border: 2px solid #fff; box-shadow: 0 2px 0 #ca8a04; }
.mk-cart { position: absolute; z-index: 5; left: 3%; bottom: 6%; width: min(20cqw, 28cqh); }
.mk-cart .mk-cart-img { width: 100%; height: auto; display: block; }
.mk-in { position: absolute; left: 14%; right: 18%; top: 4%; display: flex; flex-wrap: wrap; justify-content: center; }
.mk-in .pic { font-size: min(4cqw, 6cqh); margin: -6% -4%; }
.mk-cart.bump { animation: squash .35s; }
.mk-fly { position: fixed; z-index: 120; font-size: 60px; pointer-events: none; }
.mg-market .mg-bar { left: 24%; }
.mk-paid { padding: .2em .7em; border-radius: 999px; background: #dcfce7; color: #166534; font-weight: 900; font-size: clamp(16px, min(3.6cqw, 5cqh), 28px); }
.mk-coin { width: min(12cqw, 15cqh); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .3)); }
.mk-coin .mk-coin-img { width: 100%; height: 100%; object-fit: contain; }
.mk-coin b { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fef08a, #f59e0b); font-size: 1.6em; color: #7c2d12; border: 3px solid #fff; }
.mk-coin:active { transform: scale(.9); }
.mk-undo { width: min(9cqw, 12cqh); aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff; background: #94a3b8; color: #fff; display: grid; place-items: center; }
.mk-undo .ic { width: 55%; height: 55%; }
/* 動物分餐 */
.sn-row { position: absolute; left: 3%; right: 3%; top: 10%; bottom: 26%; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2%; align-items: end; }
.sn-seat { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.sn-ani .pic { font-size: min(calc(60cqw / var(--n)), 26cqh); }
.sn-ani .pic img { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); }
.sn-plate { position: relative; width: min(calc(80cqw / var(--n)), 30cqh); margin-top: -8%; }
.sn-plate .sn-plate-img { width: 100%; height: auto; display: block; }
.sn-food { position: absolute; inset: 8% 10% 22%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; }
.sn-food i { animation: snDrop .4s calc(var(--j) * .08s) cubic-bezier(.3, 1.5, .5, 1) both; }
.sn-food .pic { font-size: min(calc(14cqw / var(--n)), 6cqh); margin: -6% -2%; }
@keyframes snDrop { from { transform: translateY(-120%) scale(.4); opacity: 0; } }
.sn-seat:not(.fed) .sn-plate::after { content: "?"; position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; background: #f97316; color: #fff; font-weight: 900; font-size: clamp(16px, 3cqh, 26px); animation: stPulse 1.4s ease-in-out infinite; }
.sn-sum { position: absolute; top: -4%; left: 50%; transform: translateX(-50%); padding: .05em .55em; border-radius: 999px; background: #7c3aed; color: #fff; font-weight: 900; font-size: clamp(16px, min(4cqw, 5cqh), 30px); border: 3px solid #fff; opacity: 0; }
.sn-seat.fed .sn-sum { opacity: 1; animation: popIn .4s; }
.sn-count { position: absolute; z-index: 5; left: 50%; top: 2%; transform: translateX(-50%); display: flex; gap: 6px; }
.sn-count span { padding: .1em .5em; border-radius: 999px; background: #fde047; color: #7c2d12; font-weight: 900; font-size: clamp(16px, min(3.6cqw, 5cqh), 28px); border: 2px solid #fff; animation: popIn .35s; }
/* 數數小精靈 */
.ct-it { position: absolute; z-index: 3; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; animation: stBob 2.8s var(--d) ease-in-out infinite; cursor: pointer; }
.ct-it .pic { font-size: min(9cqw, 13cqh); }
.ct-it .pic img { filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .3)); }
.ct-it.on .pic img { filter: drop-shadow(0 0 10px #fde047) drop-shadow(0 0 4px #fff); }
.ct-n { position: absolute; right: -8%; top: -8%; min-width: 1.5em; padding: 0 .3em; border-radius: 999px; background: #7c3aed; color: #fff; font-weight: 900; font-size: clamp(14px, min(3cqw, 4.4cqh), 24px); border: 2px solid #fff; display: none; }
.ct-it.on .ct-n { display: block; animation: popIn .35s; }
@media (prefers-reduced-motion: reduce) { .ct-it, .sn-food i { animation: none !important; } }
.sn-ani .sn-pet { width: min(calc(60cqw / var(--n)), 26cqh); height: auto; display: block; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); }
.mk-list { max-height: 70%; overflow: hidden; }
.mk-li .pic { font-size: clamp(24px, min(5cqw, 6cqh), 48px); }
@container (max-aspect-ratio: 1/1) {
  .mk-list { position: absolute; left: 3%; right: 3%; top: 2%; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; padding: 6px 10px; transform: none; }
  .mk-shelf { left: 3%; top: 18%; bottom: 30%; }
  .mg-market .mg-bar { left: 0; }
  .mk-cart { width: min(22cqw, 16cqh); bottom: 18%; }
}

/* ───────────── 聽指令：真實場景、熱點、成功慶祝、大楚楚 ───────────── */
.follow.real { aspect-ratio: 1264 / 848; }
.fo.fixed { padding: 0; border-radius: 14px; transform: translate(-50%, -50%); display: flex; align-items: flex-end; justify-content: center; }
.fo.fixed .fo-hot { position: absolute; inset: 0; border-radius: 14px; }
.fo.fixed:hover .fo-hot, .fo.fixed:active .fo-hot { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .12); }
.fo.fixed .fo-cap { position: relative; margin-bottom: -1.4em; }
.fo.fixed.hint .fo-hot { box-shadow: 0 0 0 4px #fde047, 0 0 24px 8px rgba(253, 224, 71, .7); animation: pulse 1s ease-in-out infinite; }
.fo.fixed.shake .fo-hot { box-shadow: inset 0 0 0 4px #ef4444; }
.fo.fixed.done .fo-hot { box-shadow: inset 0 0 0 4px rgba(74, 222, 128, .9); }
.follow .fo-cc { width: clamp(80px, 17cqw, 210px) !important; }
/* 做對一步：放大、發光、打勾 */
.fo.yay { z-index: 5; animation: foYay .9s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes foYay { 30% { transform: translate(-50%, -50%) scale(1.45); filter: drop-shadow(0 0 18px #fde047) brightness(1.15); } 100% { transform: translate(-50%, -50%) scale(1); } }
.fo.fixed.yay .fo-hot { animation: foHot .9s ease-out; }
@keyframes foHot { 30% { box-shadow: 0 0 0 6px #fde047, 0 0 40px 14px rgba(253, 224, 71, .85); background: rgba(255, 244, 180, .35); } }
.fo-n { width: clamp(26px, 4.4cqw, 42px) !important; height: clamp(26px, 4.4cqw, 42px) !important; font-size: clamp(14px, 2.4cqw, 22px); }
/* 全部完成：大卡片 */
.fo-win { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(30, 10, 60, .35); animation: fadeIn .3s; }
.fo-win-card { width: min(90%, 720px); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 22px; border-radius: 28px; background: #fff; border: 5px solid #fde68a; box-shadow: 0 20px 50px rgba(30, 10, 60, .45); animation: stkIn .6s cubic-bezier(.2, 1.5, .4, 1); }
.fo-win-stars { display: flex; gap: 6px; }
.fo-win-stars i { width: clamp(40px, 8cqw, 70px); color: #facc15; filter: drop-shadow(0 3px 0 #ca8a04) drop-shadow(0 0 10px rgba(250, 204, 21, .7)); animation: vicStar .5s calc(.2s + var(--k) * .2s) cubic-bezier(.2, 1.7, .4, 1) both; }
.fo-win-stars i .ic { width: 100%; height: auto; fill: currentColor; }
.fo-win-t { font-size: clamp(26px, 5.4cqw, 50px); font-weight: 900; color: #fff; -webkit-text-stroke: 2px #7c3aed; text-shadow: 0 4px 0 #6d28d9; }
.fo-win-q { margin: 0; font-size: clamp(18px, 3.4cqw, 32px); font-weight: 800; color: #3b2a63; text-align: center; line-height: 1.3; }
.fo-win-items { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.fo-win-items span { position: relative; padding: 4px; border-radius: 16px; background: #f5f3ff; animation: popIn .4s both; }
.fo-win-items .pic { font-size: clamp(40px, 8cqw, 80px); }
.fo-win-items i { position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; border-radius: 50%; background: #22c55e; color: #fff; font-style: normal; font-weight: 900; display: grid; place-items: center; border: 2px solid #fff; }
.fo-win-t { color: #7c3aed !important; -webkit-text-stroke: 0 !important; text-shadow: 0 3px 0 #ddd6fe !important; }
.follow.real .fo-cap { font-size: clamp(10px, 1.9cqw, 16px); }

/* 超級市場：12 樣、剛好用完 */
.mk-shelf { grid-template-columns: repeat(6, 1fr) !important; }
.mk-item .pic { font-size: min(7.5cqw, 13cqh) !important; }
.mk-item.picked { box-shadow: 0 0 0 4px #7c3aed, 0 0 18px rgba(124, 58, 237, .5); transform: translateY(-4px); }
.mk-purse { font-size: clamp(26px, 5cqw, 48px) !important; color: #b45309 !important; }
.mk-eq { font-weight: 900; font-size: clamp(16px, 2.8cqw, 26px); color: #3b2a63; padding: 2px 8px; border-radius: 10px; background: #fff; }
.mk-eq.ok { background: #dcfce7; color: #166534; }
@container (max-aspect-ratio: 1/1) { .mk-shelf { grid-template-columns: repeat(4, 1fr) !important; grid-template-rows: repeat(3, 1fr) !important; } }
/* 湊數巴士 */
.bs-wrap { position: absolute; left: 3%; right: 3%; top: 6%; bottom: 34%; display: flex; flex-direction: column; justify-content: center; gap: 4%; }
.bs-bus { position: relative; margin: 0 auto; width: min(92%, 140cqh); padding: 3% 4% 4%; border-radius: 26px 26px 14px 14px; background: linear-gradient(#fde047, #f59e0b); border: 5px solid #fff; box-shadow: 0 10px 0 #b45309, 0 16px 26px rgba(0, 0, 0, .25); }
.bs-frame { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3%; }
.bs-seat { aspect-ratio: 1; border-radius: 14px; border: 3px dashed #fff; background: rgba(255, 255, 255, .45); padding: 0; display: grid; place-items: center; cursor: pointer; }
.bs-seat.full { border-style: solid; background: #fff; cursor: default; }
.bs-seat .bs-rid { width: 86%; height: auto; }
.bs-seat.new .bs-rid { animation: popIn .45s cubic-bezier(.2, 1.6, .4, 1); }
.bs-w { position: absolute; bottom: -14%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #94a3b8 0 30%, #1f2937 32%); }
.bs-w.l { left: 12%; } .bs-w.r { right: 12%; }
.bs-eq { position: absolute; z-index: 6; left: 50%; bottom: 17%; transform: translateX(-50%); padding: .1em .8em; border-radius: 999px; background: #fff; font-size: clamp(28px, min(7cqw, 9cqh), 60px); font-weight: 900; color: #3b2a63; box-shadow: 0 6px 0 #ddd6fe; white-space: nowrap; }
.bs-eq b { color: #ea580c; }
.bs-eq.ok { background: #dcfce7; }
/* 配對氣球 */
.pb-target { position: absolute; z-index: 5; left: 50%; top: 3%; transform: translateX(-50%); padding: .1em .9em; border-radius: 999px; background: #fff; font-weight: 900; font-size: clamp(22px, min(5cqw, 7cqh), 44px); color: #3b2a63; box-shadow: 0 5px 0 #f9a8d4; }
.pb-target b { color: #db2777; font-size: 1.3em; }
.pb-grid { position: absolute; left: 4%; right: 4%; top: 16%; bottom: 26%; display: grid; grid-template-columns: repeat(var(--c), 1fr); place-items: center; }
.pb-b { width: min(15cqw, 19cqh); aspect-ratio: .82; border: 0; padding: 0; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%; cursor: pointer;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .85) 0 10%, transparent 24%), hsl(calc(var(--h) + 330deg) 80% 62%); box-shadow: inset -6px -10px 0 rgba(0, 0, 0, .12), 0 8px 14px rgba(0, 0, 0, .2); animation: stBob 2.6s var(--d) ease-in-out infinite; position: relative; }
.pb-b::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 30%; background: rgba(80, 60, 100, .5); }
.pb-b span { font-size: min(7cqw, 9cqh); font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.pb-b.sel { box-shadow: 0 0 0 5px #fff, 0 0 0 9px #7c3aed, 0 8px 14px rgba(0, 0, 0, .2); transform: scale(1.1); animation: none; }
.pb-b.pop { animation: rcGot .45s forwards; pointer-events: none; }
.pb-found { position: absolute; z-index: 5; left: 2%; right: 2%; bottom: 3%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pb-found i { font-style: normal; padding: .15em .7em; border-radius: 14px; background: rgba(255, 255, 255, .8); color: #94a3b8; font-weight: 900; font-size: clamp(16px, min(3.4cqw, 5cqh), 28px); border: 2px dashed #cbd5e1; }
.pb-found i.ok { background: #fff; color: #db2777; border: 2px solid #f9a8d4; animation: popIn .4s; }

/* 數數小精靈（新版） */
.ct-tray { position: absolute; left: 4%; right: 20%; top: 6%; bottom: 36%; display: grid; grid-template-columns: repeat(var(--c), 1fr); align-content: center; justify-items: center; gap: 3% 1.5%; padding: 2.5% 2%; border-radius: 26px; background: rgba(255, 255, 255, .9); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.ct-it2 { padding: 0; border: 0; background: none; cursor: pointer; animation: stBob 2.6s var(--d) ease-in-out infinite; }
.ct-it2 .pic { font-size: min(calc(56cqw / var(--c)), 11cqh); }
.ct-it2 .pic img { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25)); }
.ct-it2.on { opacity: .18; animation: none; pointer-events: none; }
.ct-basket { position: absolute; z-index: 5; right: 2%; top: 18%; width: min(17cqw, 26cqh); }
.ct-basket .ct-bk-img { width: 100%; height: auto; display: block; }
.ct-basket b { position: absolute; left: 50%; top: -18%; transform: translateX(-50%); min-width: 1.6em; padding: 0 .4em; border-radius: 999px; background: #7c3aed; color: #fff; font-weight: 900; text-align: center; font-size: clamp(24px, min(5cqw, 7cqh), 48px); border: 3px solid #fff; }
.ct-basket.bump { animation: squash .35s; }
.ct-track { position: absolute; left: 3%; right: 3%; bottom: 20%; display: grid; grid-template-columns: repeat(var(--m), 1fr); gap: 4px; }
.ct-track i { font-style: normal; display: grid; place-items: center; aspect-ratio: 1; max-height: 9cqh; border-radius: 10px; background: rgba(255, 255, 255, .75); color: #94a3b8; font-weight: 900; font-size: clamp(12px, min(2.6cqw, 4cqh), 24px); }
.ct-track i.on { background: linear-gradient(#fde047, #f59e0b); color: #7c2d12; transform: scale(1.12); animation: popIn .35s; }
.ct-bar { bottom: 3% !important; }
@container (max-aspect-ratio: 1/1) { .ct-tray { right: 4%; top: 22%; bottom: 36%; } .ct-basket { right: auto; left: 50%; top: 2%; transform: translateX(-50%); width: min(26cqw, 14cqh); } }
.mg .ct-tray { background: #fffdf7 !important; border: 4px solid #fde68a; grid-template-rows: repeat(var(--r), 1fr); align-items: center; overflow: hidden; }
.ct-it2 { min-width: 0; }
.ct-it2 .pic { font-size: min(calc(48cqw / var(--c)), calc(36cqh / var(--r))) !important; }
@container (max-aspect-ratio: 1/1) {
  .mg .ct-tray { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(var(--r5), 1fr); top: 20%; bottom: 34%; }
  .ct-it2 .pic { font-size: min(13cqw, calc(30cqh / var(--r5))) !important; }
  .ct-track { grid-template-columns: repeat(10, 1fr); bottom: 17%; }
  .ct-track i { font-size: clamp(12px, 3.6cqw, 20px); max-height: none; }
}
.ct-it2 .pic { font-size: min(calc(64cqw / var(--c)), calc(44cqh / var(--r))) !important; }
@container (max-aspect-ratio: 1/1) { .ct-it2 .pic { font-size: min(13cqw, calc(30cqh / var(--r5))) !important; } }
/* 聽指令：版面 B，場景鋪滿指令以下的整個畫面 */
.game .play:has(.follow.real) { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
.game .opts.field:has(.follow.real) { max-width: none !important; width: 100% !important; margin: 0; }
.follow.real { width: 100% !important; aspect-ratio: auto !important; max-height: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; container-type: normal; background: #e8e2d6; }
.follow.real .fo-blur { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover; filter: blur(16px) brightness(1.05) saturate(.9); }
.follow.real .fo-stage { position: absolute; container-type: inline-size; box-shadow: 0 0 40px rgba(0, 0, 0, .12); }
.follow.real .fo-stage .fo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.follow.real .fo-steps { z-index: 6; top: 10px; }
.follow.real .fo-win { z-index: 9; }
.follow:not(.real) .fo-stage { position: absolute; inset: 0; container-type: inline-size; }
.game.fo-full .follow.real { position: fixed !important; inset: 0; z-index: 0; height: 100dvh !important; }
.game.fo-full > .bar, .game.fo-full > .prompt { position: relative; z-index: 3; }
.game.fo-full > .prompt .bubble { max-width: min(560px, 56%) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .3) !important; }
.game.fo-full .follow.real .fo-steps { top: auto; bottom: 12px; }
.game.fo-full > .bar .icon, .game.fo-full > .bar .pill { box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.game:not(.fo-full) .follow.real { position: relative; }

/* ───────────── 只用橫向：直向時請小朋友把裝置打橫 ───────────── */
.rotate-ask { display: none; }
@media (orientation: portrait) {
  html.touch .rotate-ask { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 30%, #fde2e4, #e9d5ff 60%, #c4b5fd); }
  html.touch body > :not(.rotate-ask) { visibility: hidden; }
  .ra-card { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: #3b2a63; }
  .ra-cq { width: min(40vw, 200px); filter: drop-shadow(0 12px 14px rgba(76, 29, 149, .3)); animation: stBob 2.4s ease-in-out infinite; }
  .ra-dev { position: relative; width: 70px; height: 116px; border-radius: 14px; border: 6px solid #7c3aed; background: #fff; animation: raTurn 2.2s ease-in-out infinite; }
  .ra-dev i { position: absolute; left: 50%; bottom: 6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #c4b5fd; }
  .ra-card b { font-size: clamp(22px, 6vw, 32px); font-weight: 900; }
  .ra-card span { font-size: clamp(18px, 5vw, 26px); font-weight: 800; color: #6d28d9; }
}
@keyframes raTurn { 0%, 25% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }

/* ───────────── 找相同（新版）───────────── */
.sg-game { display: grid; grid-template-columns: 1fr 1fr; gap: 4%; padding: 2% 3% 3%; }
.sg-side { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.sg-who { display: flex; align-items: center; gap: 8px; height: 22%; }
.sg-who .sg-who-img, .sg-who .owl { height: 100%; width: auto; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .25)); }
.sg-who b { padding: .15em .8em; border-radius: 999px; background: #fff; color: #7c3aed; font-weight: 900; font-size: clamp(16px, min(3cqw, 4.4cqh), 28px); box-shadow: 0 4px 0 #ddd6fe; }
.sg-box { flex: 1; width: 100%; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); align-content: center; justify-items: center; gap: 4%; padding: 5% 4%; border-radius: 30px;
  background: linear-gradient(#fffaf0, #fef3c7); border: 6px solid #d97706; box-shadow: inset 0 -10px 0 rgba(217, 119, 6, .15), 0 12px 24px rgba(0, 0, 0, .22); }
.sg-box { --cols: 3; }
.sg-box[style*="--n:4"] { --cols: 2; }
.sg-box.sg-fruit { background: repeating-linear-gradient(45deg, #fde68a 0 14px, #fcd34d 14px 28px); border-color: #b45309; }
.sg-box.sg-lunch { background: linear-gradient(#e0f2fe, #bae6fd); border-color: #0284c7; }
.sg-it { padding: 6%; border: 0; border-radius: 22px; background: rgba(255, 255, 255, .85); box-shadow: 0 4px 10px rgba(0, 0, 0, .12); cursor: pointer; transition: transform .2s; }
.sg-it .pic { font-size: min(9cqw, 13cqh); }
.sg-it .pic img { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25)); }
.sg-it:active { transform: scale(.94); }
.sg-it.got { background: #fff; box-shadow: 0 0 0 5px #fde047, 0 0 26px 6px rgba(253, 224, 71, .8); transform: scale(1.08); animation: popIn .4s; }
.sg-lines { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sg-lines path { fill: none; stroke: #ec4899; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 14; filter: drop-shadow(0 0 4px #fff); animation: sgDash 1s linear infinite; }
@keyframes sgDash { to { stroke-dashoffset: -32; } }
.sg-count { position: absolute; z-index: 4; left: 50%; top: 3%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: .15em .9em; border-radius: 999px; background: #fff; font-weight: 900; color: #3b2a63; font-size: clamp(18px, min(3.4cqw, 5cqh), 30px); box-shadow: 0 4px 0 #f9a8d4; }
.sg-count .ic { width: 1em; height: 1em; color: #db2777; }
.game .play:has(.sg-game) { zoom: 1 !important; }

/* ───────────── 閱讀室（js/readroom.js）───────────── */
.game .play:has(.rr) { zoom: 1 !important; }
.rr { display: grid; grid-template-columns: 1fr; place-items: center; padding: 2% 3%; }
.rr-book { position: relative; z-index: 2; width: min(92%, 960px); max-height: 94%; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 26px 34px 22px; border-radius: 26px;
  background: linear-gradient(90deg, #fffaf0 94%, #f3e8d2); border: 4px solid #fde68a; box-shadow: -10px 0 0 #8b5a2b inset, 0 20px 40px rgba(76, 29, 149, .3); transition: all .5s cubic-bezier(.3, 1, .4, 1); }
.rr-title { color: #a16207; font-size: clamp(22px, 2.6vw, 34px); font-family: Georgia, "Microsoft JhengHei", serif; }
.rr-text { margin: 0; font-size: clamp(24px, 2.8vw, 40px); line-height: 1.7; color: #44403c; font-family: Georgia, "Microsoft JhengHei", serif; }
.rr-book.zh .rr-text { font-family: "Microsoft JhengHei", "PingFang TC", sans-serif; letter-spacing: .04em; }
.rr-s { border-radius: 8px; padding: 0 2px; transition: background .25s, color .25s; }
.rr-s.now { background: #fde047; color: #1f2937; box-shadow: 0 0 0 4px #fde047; }
.rr-s.read { color: #44403c; }
.rr-ctrl { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.rr-listen, .rr-ready { display: inline-flex; align-items: center; gap: 8px; padding: .4em 1.2em; border-radius: 999px; border: 4px solid #fff; font-weight: 900; font-size: clamp(18px, 2.2vw, 28px); color: #fff; cursor: pointer; }
.rr-listen { background: linear-gradient(#a78bfa, #7c3aed); box-shadow: 0 5px 0 #5b21b6; }
.rr-ready { background: linear-gradient(#4ade80, #16a34a); box-shadow: 0 5px 0 #166534; }
.rr-ready:disabled { background: #cbd5e1; box-shadow: 0 5px 0 #94a3b8; cursor: default; }
.rr-ready.go { animation: stPulse 1.4s ease-in-out infinite; }
.rr-listen .ic, .rr-ready .ic { width: 1.1em; height: 1.1em; }
.rr-qa { display: none; }
/* 答題：文章縮到左邊 */
.rr.qa-on { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 3%; align-items: stretch; }
.rr.qa-on .rr-book { width: 100%; max-height: 100%; padding: 18px 22px; }
.rr.qa-on .rr-text { font-size: clamp(16px, 1.8vw, 26px); }
.rr.qa-on .rr-listen { font-size: clamp(14px, 1.6vw, 20px); }
.rr.qa-on .rr-ready { display: none; }
.rr.qa-on .rr-qa { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 16px; animation: popIn .45s; }
.rr-qn { align-self: flex-start; padding: .15em .8em; border-radius: 999px; background: #7c3aed; color: #fff; font-weight: 900; font-size: clamp(14px, 1.6vw, 20px); }
.rr-q { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 22px; background: #fff; box-shadow: 0 8px 20px rgba(30, 10, 60, .2); font-weight: 900; color: #3b2a63; font-size: clamp(22px, 2.6vw, 36px); }
.rr-qsay { flex: none; width: 50px; height: 50px; border-radius: 50%; border: 3px solid #fff; background: #7c3aed; color: #fff; display: grid; place-items: center; }
.rr-qsay .ic { width: 55%; height: 55%; }
.rr-opts { display: grid; gap: 12px; }
.rr-o { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: .5em .6em .5em 1em; border-radius: 22px; border: 4px solid #fff; cursor: pointer; text-align: left; font-weight: 900; color: #fff; font-size: clamp(20px, 2.3vw, 32px);
  background: linear-gradient(hsl(calc(var(--tint) + 265deg) 85% 64%), hsl(calc(var(--tint) + 265deg) 70% 48%)); box-shadow: 0 6px 0 hsl(calc(var(--tint) + 265deg) 60% 32%), 0 10px 18px rgba(0, 0, 0, .2); text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.rr-osay { flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .3); border: 2px solid rgba(255, 255, 255, .85); display: grid; place-items: center; }
.rr-osay .ic { width: 55%; height: 55%; }
.rr-o.ok { background: linear-gradient(#4ade80, #16a34a) !important; transform: scale(1.04); }
.rr-o.no { opacity: .4; animation: nope .4s; }
/* 圖片答案卡：圖在上、字在下，長的英文字不會切走 */
.game .opts.cards .opt { flex-direction: column; justify-content: center; gap: 4px; overflow: visible; }
.game .opts.cards .opt .cap { white-space: normal; text-align: center; overflow-wrap: anywhere; line-height: 1.1; font-size: clamp(18px, 2.2vw, 30px); }
.game .opts.cards .opt .pic { font-size: clamp(64px, 9vw, 130px) !important; }
.game .opts .opt:has(> .pic + .cap) { flex-direction: column; justify-content: center; gap: 4px; }
.game .opts .opt:has(> .pic + .cap) > .cap { white-space: normal; text-align: center; line-height: 1.1; font-size: clamp(18px, 2.2vw, 30px); }
.game .opts .opt:has(> .pic + .cap) > .pic { font-size: clamp(64px, 8vw, 120px) !important; }
.sg-it.sel { background: #fff; box-shadow: 0 0 0 5px #7c3aed, 0 0 20px rgba(124, 58, 237, .5); transform: scale(1.06); }
.sg-tags { position: absolute; z-index: 4; left: 50%; bottom: 2%; transform: translateX(-50%); display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sg-tags span { padding: .15em .8em; border-radius: 999px; background: #fff; color: #db2777; font-weight: 900; font-size: clamp(15px, min(2.6cqw, 4cqh), 24px); border: 2px solid #f9a8d4; animation: popIn .4s; }
/* 寫字：寫完顯示詞語和造句 */
.trace { display: flex; align-items: center; justify-content: center; gap: 4%; flex-wrap: wrap; }
.trace.has-word .row-btns { display: none; }
.tr-word { display: flex; flex-direction: column; gap: 14px; min-width: min(46%, 520px); padding: 22px 26px; border-radius: 26px; background: #fffaf0; border: 4px solid #fde68a; box-shadow: 0 14px 30px rgba(76, 29, 149, .25); animation: stkIn .6s cubic-bezier(.2, 1.5, .4, 1); }
.trw-row { display: flex; align-items: center; gap: 14px; }
.trw-tag { flex: none; padding: .2em .7em; border-radius: 999px; background: #7c3aed; color: #fff; font-weight: 900; font-size: clamp(16px, 1.8vw, 22px); }
.trw-w { font-size: clamp(40px, 5.4vw, 72px); color: #3b2a63; letter-spacing: .08em; border-radius: 14px; padding: 0 8px; transition: background .25s; }
.trw-s { margin: 0; font-size: clamp(24px, 3vw, 40px); font-weight: 800; color: #44403c; line-height: 1.4; border-radius: 12px; padding: 2px 8px; transition: background .25s; }
.trw-w em, .trw-s em { font-style: normal; color: #E8603F; }
.trw-w.on, .trw-s.on { background: #fde047; }
.trw-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.trw-btns .ic { width: 1.1em; height: 1.1em; }

/* ───────────── 字母島（英文大冒險，js/letters.js）───────────── */
.lt { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 2% 3%; }
.lt-tile { position: relative; display: inline-grid; place-items: center; width: var(--s, min(11cqw, 13cqh)); aspect-ratio: 1; border-radius: 18%; font-weight: 900; font-size: calc(var(--s, min(11cqw, 13cqh)) * .55); color: #fff;
  background: linear-gradient(hsl(var(--h) 80% 62%), hsl(var(--h) 70% 46%)); border: 4px solid #fff; box-shadow: 0 6px 0 hsl(var(--h) 60% 32%), 0 10px 18px rgba(0, 0, 0, .25); text-shadow: 0 3px 0 rgba(0, 0, 0, .2); font-family: "Nunito", "Segoe UI", sans-serif; }
.lt-tile small { position: absolute; right: 8%; bottom: 4%; font-size: .38em; opacity: .9; }
.lt-card { display: grid; place-items: center; padding: 1.5%; border-radius: 30px; background: #fff; border: 5px solid #fde68a; box-shadow: 0 14px 30px rgba(0, 0, 0, .2); }
.lt-card .pic { font-size: min(22cqw, 30cqh) !important; }
.lt-word { display: flex; gap: min(1.6cqw, 14px); --s: min(10cqw, 13cqh); }
.lt-word .lt-tile.fixed { animation: none; }
.lt-word .lt-tile.got { animation: stkBump .5s; box-shadow: 0 6px 0 hsl(var(--h) 60% 32%), 0 0 24px 6px #fde047; }
.lt-slot { display: grid; place-items: center; width: var(--s); aspect-ratio: 1; border-radius: 18%; border: 5px dashed #f59e0b; background: rgba(255, 251, 235, .92); color: #f59e0b; font-weight: 900; font-size: calc(var(--s) * .5); animation: stPulse 1.4s ease-in-out infinite; }
.lt-word.done .lt-tile { animation: npJump .6s calc(var(--d) * 2) cubic-bezier(.3, 1.6, .5, 1); }
.lt-opts { display: flex; gap: min(3cqw, 26px); --s: min(13cqw, 16cqh); }
.lt-opt { padding: 0; border: 0; background: none; cursor: pointer; animation: stBob 2.4s ease-in-out infinite; }
.lt-opt:nth-child(2) { animation-delay: .3s; } .lt-opt:nth-child(3) { animation-delay: .6s; } .lt-opt:nth-child(4) { animation-delay: .9s; } .lt-opt:nth-child(5) { animation-delay: 1.2s; }
.lt-opt.used { visibility: hidden; }
.lt-fly { position: fixed; z-index: 120; --s: 90px; pointer-events: none; }
.lt-big { --s: min(18cqw, 26cqh); }
.lt-big .lt-tile { animation: stBob 2.2s ease-in-out infinite; }
.lt-pics { display: flex; gap: min(3cqw, 28px); }
.lt-pic { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 18px 10px; border: 4px solid #fff; border-radius: 26px; background: rgba(255, 255, 255, .92); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); cursor: pointer; }
.lt-pic .pic { font-size: min(15cqw, 24cqh) !important; }
.lt-pic span { font-weight: 900; font-size: clamp(20px, min(3.6cqw, 5cqh), 36px); color: #3b2a63; letter-spacing: .05em; }
.lt-pic span b { color: #E8603F; }
.lt-pic.ok { box-shadow: 0 0 0 6px #22c55e, 0 0 26px rgba(34, 197, 94, .6); }
.game .play:has(.lt) { zoom: 1 !important; }
.trace.has-word { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; }
.trace.has-word .tr-box { flex: none; transform: scale(.78); transform-origin: right center; }
.trace.has-word .tr-word { flex: 1 1 auto; max-width: 560px; }
.game .play:has(.trace) { zoom: 1 !important; }
.game .opts.field:has(.trace) { max-width: none !important; width: 100% !important; }
.trace.has-word .tr-word { min-width: min(52%, 520px); }
@media (max-height: 520px) { .trace.has-word .tr-box { transform: scale(.62); } .trw-w { font-size: 40px; } .trw-s { font-size: 22px; } .tr-word { padding: 14px 18px; gap: 8px; } }
.trace.has-word { gap: 2%; padding: 0 3%; box-sizing: border-box; }
.trace.has-word .tr-word { max-width: 60%; box-sizing: border-box; }
@media (max-height: 520px) { .trace.has-word .tr-word { max-width: 52%; min-width: 0; } }
/* 寫字詞語卡：細一點，一定放得進畫面，不用向下拉 */
.trace.has-word { min-height: 0; }
.trace.has-word .tr-box { transform: scale(.8) !important; transform-origin: center; flex: none; }
@media (max-height: 760px) { .trace.has-word .tr-box { transform: scale(.68) !important; margin: -48px; } }
@media (max-height: 520px) { .trace.has-word .tr-box { transform: scale(.55) !important; margin: -68px -60px; } }
.tr-word { padding: 16px 20px !important; gap: 10px !important; max-height: 60vh; }
.trw-w { font-size: clamp(30px, min(4vw, 7vh), 56px) !important; }
.trw-s { font-size: clamp(18px, min(2.3vw, 4vh), 30px) !important; }
.trw-tag { font-size: clamp(13px, min(1.5vw, 2.6vh), 18px) !important; }
.trw-btns .btn, .trw-btns .pill { font-size: clamp(14px, min(1.6vw, 2.8vh), 20px); padding: .35em 1em; }
.lt-card { position: relative; }
.lt-hear, .lt-picsay { position: absolute; right: -14px; top: -14px; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff; background: #7c3aed; color: #fff; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); cursor: pointer; }
.lt-hear .ic, .lt-picsay .ic { width: 55%; height: 55%; }
.lt-pic { position: relative; }
.lt-pic span { display: none; }

/* ───────────── 遊樂園選級頁（新版，js/arcpage.js）───────────── */
.ap-screen { max-width: none; min-height: 100dvh; background-size: cover; background-position: center; position: relative; }
.ap-screen::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, .25), rgba(255, 240, 250, .45)); }
.ap-head { display: flex; align-items: center; gap: 18px; max-width: 1100px; margin: 0 auto; width: 100%; }
.ap-hero { flex: none; width: clamp(90px, 12vw, 150px); filter: drop-shadow(0 12px 14px rgba(76, 29, 149, .3)); animation: stBob 2.6s ease-in-out infinite; }
.ap-hero-img { width: 100%; height: auto; }
.ap-hero-ic { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 30%; background: var(--c); color: #fff; }
.ap-hero-ic .ic { width: 55%; height: 55%; }
.ap-intro { padding: 14px 22px; border-radius: 24px; background: rgba(255, 255, 255, .9); box-shadow: 0 8px 20px rgba(76, 29, 149, .18); }
.ap-intro b { display: block; font-size: clamp(24px, 3vw, 36px); color: var(--c); }
.ap-intro p { margin: 4px 0 0; font-size: clamp(15px, 1.8vw, 20px); color: #4b3b6b; font-weight: 700; }
.ap-map { position: relative; flex: 1; display: grid; grid-template-columns: repeat(var(--n), 1fr); align-items: center; gap: 1.5%; max-width: 1300px; width: 100%; margin: 0 auto; padding: 2% 0 3%; }
.ap-path { position: absolute; left: 3%; right: 3%; top: 18%; height: 60%; width: 94%; z-index: 0; pointer-events: none; }
.ap-path path { fill: none; stroke: rgba(255, 255, 255, .95); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1 24; vector-effect: non-scaling-stroke; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .12)); }
.ap-stop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 12px; border: 0; border-radius: 26px; background: rgba(255, 255, 255, .92); box-shadow: 0 10px 0 rgba(124, 58, 237, .12), 0 16px 28px rgba(76, 29, 149, .22); cursor: pointer;
  transform: translateY(calc(sin(var(--k) * 1.4rad) * 26px)); animation: popIn .5s calc(var(--k) * .08s) both; transition: transform .2s; }
.ap-stop:hover { transform: translateY(calc(sin(var(--k) * 1.4rad) * 26px - 6px)); }
.ap-medal { flex: none; container-type: inline-size; position: relative; display: grid; place-items: center; width: clamp(70px, 9vw, 120px); aspect-ratio: 1; border-radius: 50%; border: 5px solid #fff;
  background: radial-gradient(circle at 35% 30%, hsl(calc(var(--h) + 250deg) 90% 75%), hsl(calc(var(--h) + 250deg) 75% 50%)); box-shadow: 0 6px 0 hsl(calc(var(--h) + 250deg) 60% 34%), 0 0 0 6px rgba(255, 255, 255, .6); }
.ap-medal b { color: #fff; font-size: 26cqi; font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); white-space: nowrap; }
.ap-medal b .ic { width: 1.2em; height: 1.2em; }
.ap-num { position: absolute; left: -8px; top: -8px; width: 30px; height: 30px; border-radius: 50%; background: #fde047; color: #7c2d12; font-style: normal; font-weight: 900; display: grid; place-items: center; border: 3px solid #fff; font-size: 16px; }
.ap-name { font-weight: 900; color: #3b2a63; font-size: clamp(15px, 1.7vw, 22px); text-align: center; line-height: 1.15; }
.ap-tip { color: #7c6a99; font-weight: 700; font-size: clamp(11px, 1.15vw, 15px); text-align: center; line-height: 1.2; padding: 0 4px; }
.ap-stars .ic { width: 20px; height: 20px; }
.ap-stop.locked { filter: grayscale(.85); opacity: .7; cursor: default; }
.ap-stop.cur { box-shadow: 0 0 0 5px #fde047, 0 16px 28px rgba(76, 29, 149, .3); }
.ap-stop.cur .ap-medal { animation: stPulse 1.4s ease-in-out infinite; }
.ap-go { position: absolute; right: -8px; top: -8px; width: 40px; height: 40px; border-radius: 50%; background: #22c55e; color: #fff; display: grid; place-items: center; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.ap-go .ic { width: 50%; height: 50%; fill: currentColor; }
@media (max-height: 520px) { .ap-head { gap: 10px; } .ap-hero { width: 64px; } .ap-intro { padding: 6px 14px; } .ap-intro b { font-size: 20px; } .ap-intro p { font-size: 13px; } .ap-medal { width: 62px; border-width: 3px; } .ap-num { width: 24px; height: 24px; font-size: 13px; left: -6px; top: -6px; } .ap-name { font-size: 14px; } .ap-tip { display: none; } .ap-stop { padding: 8px 4px; gap: 4px; transform: translateY(calc(sin(var(--k) * 1.4rad) * 12px)); } }
/* 拼音、ABC */
.ph-top { display: flex; align-items: center; gap: 4%; }
.ph-ear { display: grid; place-items: center; width: min(18cqw, 26cqh); aspect-ratio: 1; color: #7c3aed; } .ph-ear .ic { width: 70%; height: 70%; }
.ph-sounds { display: flex; gap: 10px; }
.ph-dot { width: min(8cqw, 11cqh); aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; background: linear-gradient(#a78bfa, #7c3aed); color: #fff; display: grid; place-items: center; box-shadow: 0 5px 0 #5b21b6; cursor: pointer; }
.ph-dot .ic { width: 50%; height: 50%; } .ph-dot.on { background: linear-gradient(#fde047, #f59e0b); transform: scale(1.15); }
.ph .lt-slot { font-size: calc(var(--s) * .35); }
.ph-w { font-size: 1.4em !important; letter-spacing: .06em; }
.ab-row { display: flex; gap: 18px; justify-content: center; }
.ab-row .letter { font-size: 80px; } .ab-q { color: #f59e0b; }

/* ───────────── 拼字火車（新版，js/spelltrain.js）：平面風格，配合平面背景 ───────────── */
.game .play:has(.tt) { zoom: 1 !important; }
.tt { display: grid; grid-template-rows: 1fr auto auto; align-items: center; justify-items: center; padding: 1.5cqh 3cqw 3cqh; background-color: #cdeffd; }
.tt-sign { position: relative; align-self: center; }
.tt-pic { display: grid; place-items: center; width: min(30cqh, 24cqw); aspect-ratio: 1; padding: 6%; border-radius: 22px; background: #fffdf6; border: 4px solid #f6c453; box-shadow: 0 4px 0 rgba(120, 80, 20, .15); }
.tt-pic img, .tt-pic .pic, .tt-pic svg { width: 100%; height: 100%; object-fit: contain; }
.tt-hear { position: absolute; right: -16px; top: -12px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; background: #8b5cf6; color: #fff; display: grid; place-items: center; cursor: pointer; }
.tt-hear .ic { width: 55%; height: 55%; fill: currentColor; }
.tt-track { position: relative; width: 100%; display: flex; justify-content: center; padding-bottom: .5cqh; }
.tt-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 1.6cqh; min-height: 8px; background: repeating-linear-gradient(90deg, #a16207 0 10px, transparent 10px 26px); border-top: 4px solid #78716c; border-bottom: 3px solid #78716c; opacity: .85; }
.tt-train { --w: min(12cqw, 20cqh, calc(88cqw / (var(--n) + 1.7))); display: flex; align-items: flex-end; gap: .4cqw; }
.tt-wagon { position: relative; width: var(--w); aspect-ratio: .95; display: grid; place-items: start center; }
.tt-wimg { position: absolute; inset: auto 0 0 0; width: 100%; height: 62%; object-fit: contain; object-position: bottom; }
.tt-wbox { position: absolute; left: 4%; right: 4%; bottom: 14%; height: 52%; border-radius: 12px; background: #93c5fd; border: 3px solid #fff; }
.tt-slot { position: relative; z-index: 1; margin-top: -2%; width: 68%; aspect-ratio: 1; border-radius: 16px; border: 3px dashed #94a3b8; background: rgba(255, 255, 255, .7); color: #64748b; font-weight: 900; font-size: calc(var(--w) * .3); display: grid; place-items: center; }
.tt-wagon .tt-l { position: relative; z-index: 1; margin-top: -2%; width: 68%; font-size: calc(var(--w) * .5); animation: stkBump .45s; }
.tt-engine { position: relative; width: calc(var(--w) * 1.45); aspect-ratio: 1.25; }
.tt-engine img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.tt-engine-box { position: absolute; inset: 20% 0 8% 0; border-radius: 14px 30px 10px 10px; background: #ef4444; border: 3px solid #fff; }
.tt-smoke { position: absolute; left: 22%; top: -14%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .9); animation: ttSmoke 1.6s ease-out infinite; }
@keyframes ttSmoke { from { transform: translateY(0) scale(.5); opacity: .9; } to { transform: translate(-40%, -160%) scale(1.6); opacity: 0; } }
.tt-l { display: grid; place-items: center; aspect-ratio: 1; border-radius: 18px; background: hsl(var(--h) 75% 62%); border: 3px solid #fff; color: #fff; font-weight: 900; line-height: 1; box-shadow: 0 3px 0 hsl(var(--h) 45% 45%); }
.tt-opts { display: flex; flex-wrap: nowrap; justify-content: center; gap: min(1.6cqw, 16px); width: 100%; padding-top: 2.5cqh; --s: min(9.5cqw, 15cqh, calc(86cqw / (var(--k) + .4))); }
.tt-opt { padding: 0; border: 0; background: none; cursor: pointer; transition: transform .15s; }
.tt-opt .tt-l { width: var(--s); font-size: calc(var(--s) * .6); }
.tt-opt:active { transform: scale(.92); }
.tt-opt.used { visibility: hidden; }
.tt-fly { position: fixed; z-index: 90; pointer-events: none; font-size: 7vmin; }
/* 手機打橫（矮闊）：圖片放左邊，火車和字母放右邊，全部大一點 */
@media (max-height: 560px) and (min-aspect-ratio: 3/2) {
  .tt { grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: 3cqw; padding: 2cqh 2cqw 3cqh; }
  .tt-sign { grid-row: 1 / 3; align-self: center; }
  .tt.tt-wide { grid-template-columns: max-content 1fr; }
  .tt.tt-wide .tt-opts { padding-right: 64px; --s: min(21cqh, calc((64cqw - 64px) / (var(--k) + .5))); }
  .tt.tt-wide .tt-sign { align-self: end; margin-bottom: 2cqh; }
  .tt-pic { width: min(46cqh, 26cqw); }
  .tt-track { align-self: end; }
  .tt-train { --w: min(30cqh, calc(64cqw / (var(--n) + 1.7))); }
  .tt-opts { --s: min(21cqh, calc(64cqw / (var(--k) + .5))); padding-top: 3cqh; }
}

/* ───────────── 英文大冒險：平面風格（js/flaten.js 加 .flat-en）───────────── */
.game.flat-en .opts .opt { background: #fffdf6 !important; border: 4px solid hsl(var(--fh, 42) 85% 70%) !important; border-radius: 24px !important; box-shadow: 0 4px 0 rgba(90, 70, 40, .14) !important; }
.game.flat-en .opts .opt:nth-child(4n+2) { --fh: 200; } .game.flat-en .opts .opt:nth-child(4n+3) { --fh: 145; } .game.flat-en .opts .opt:nth-child(4n+4) { --fh: 330; }
.game.flat-en .opts .opt::before, .game.flat-en .opts .opt::after { display: none !important; }
.game.flat-en .opts:not(.field) { max-width: min(860px, 78vw); margin-inline: auto; }
.game.flat-en .opts:not(.field):not(.rows) .opt { max-height: 36vh; }
.game.flat-en .opts .opt .letter { color: hsl(var(--fh, 42) 70% 42%); }
.game.flat-en .opts .opt .word { color: #3b2a63; }
.game.flat-en .opt.flip .back { background: hsl(var(--fh, 42) 85% 88%) !important; color: hsl(var(--fh, 42) 60% 50%) !important; border-radius: 18px; text-shadow: none !important; }
.game.flat-en .opt-say { background: #8b5cf6 !important; box-shadow: none !important; }
.game.flat-en .stim .big { display: inline-grid; place-items: center; padding: 1.2vmin 2vmin; border-radius: 24px; background: #fffdf6; border: 4px solid #f6c453; box-shadow: 0 4px 0 rgba(90, 70, 40, .14); }
.game.flat-en .stim .sentence { background: rgba(255, 253, 246, .92); border-radius: 18px; padding: .2em .7em; display: inline-block; }
.game.flat-en .tale, .game.flat-en .rd-card, .game.flat-en .passage-card { background: #fffdf6 !important; border: 4px solid #f6c453 !important; box-shadow: 0 4px 0 rgba(90, 70, 40, .14) !important; }
/* 字母積木、圖片卡：平面 */
.game.flat-en .lt-tile { background: hsl(var(--h) 75% 62%); border: 3px solid #fff; box-shadow: 0 3px 0 hsl(var(--h) 45% 45%); text-shadow: none; }
.game.flat-en .lt-word .lt-tile.got { box-shadow: 0 3px 0 hsl(var(--h) 45% 45%), 0 0 0 5px #fde047; }
.game.flat-en .lt-card, .game.flat-en .lt-pic { background: #fffdf6; border: 4px solid #f6c453; box-shadow: 0 4px 0 rgba(90, 70, 40, .14); }
.game.flat-en .lt-slot { border-width: 3px; border-color: #94a3b8; color: #64748b; background: rgba(255, 255, 255, .75); }
.game.flat-en .lt-opt { animation: none; }
.game.flat-en .ph-dot { background: #8b5cf6; box-shadow: 0 3px 0 #6d28d9; }
.game.flat-en .ph-dot.on { background: #f59e0b; }
/* 字母、圖片答案卡：大小有上限，排在中間，不會被切走 */
.game.flat-en .opts:not(.field):not(.rows):has(.opt .letter, .opt .emo) { display: flex !important; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2.2vmin; }
.game.flat-en .opts:not(.field):not(.rows) .opt:has(.letter, .emo) { width: min(24vh, 15vw, 200px) !important; height: auto !important; aspect-ratio: 1; max-height: none; flex: none; }
.game.flat-en .opts:not(.field):not(.rows) .opt:has(.letter) .letter { font-size: min(13vh, 8vw, 110px); }
.game.flat-en .opt.flip .back { background: none !important; }
/* 拼字（.balloon）：畫面有 1.25 倍放大，卡要再細一點，5–6 個字母都排一行 */
.game.flat-en .opts.balloon:not(.field) { max-width: none; flex-wrap: nowrap !important; }
.game.flat-en .opts.balloon:not(.field) .opt:has(.letter) { width: min(17vh, 10vw, 140px) !important; }
.game.flat-en .opts.balloon:not(.field) .opt:has(.letter) .letter { font-size: min(10vh, 6.5vw, 90px); }

/* ───────────── 貼紙簿（新版）───────────── */
.sb-screen { max-width: none; min-height: 100dvh; background: radial-gradient(circle at 20% 10%, #fff7fb, #fde7f3 45%, #e9e4ff); }
.sb-book { display: grid; grid-template-columns: minmax(170px, 22%) 1fr; gap: 18px; max-width: 1240px; width: 100%; margin: 0 auto; flex: 1; min-height: 0; }
.sb-tabs { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 4px; max-height: calc(100dvh - 110px); }
.sb-tab { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 3px solid transparent; border-radius: 18px; background: hsl(var(--h) 90% 96%); cursor: pointer; text-align: left; }
.sb-tab b { font-size: 15px; color: hsl(var(--h) 45% 32%); }
.sb-tab small { font-weight: 800; color: hsl(var(--h) 40% 45%); }
.sb-tab.on { background: #fff; border-color: hsl(var(--h) 75% 70%); box-shadow: 0 4px 0 hsl(var(--h) 60% 85%); }
.sb-ti .pic { font-size: 40px; }
.sb-page { position: relative; padding: 18px 22px 14px; border-radius: 30px; background: #fffdf8; border: 5px solid hsl(var(--h) 80% 82%);
  background-image: radial-gradient(hsl(var(--h) 70% 90%) 1.6px, transparent 1.6px); background-size: 22px 22px; box-shadow: 0 10px 0 hsl(var(--h) 55% 88%), 0 18px 30px rgba(120, 60, 140, .15); overflow-y: auto; max-height: calc(100dvh - 110px); }
.sb-page h2 { margin: 0 0 10px; color: hsl(var(--h) 50% 35%); font-size: clamp(22px, 2.6vw, 32px); display: flex; align-items: baseline; gap: 10px; }
.sb-page h2 small { font-size: .6em; color: hsl(var(--h) 45% 50%); }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.sb-slot { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 3px dashed hsl(var(--h) 50% 82%); background: rgba(255, 255, 255, .7); padding: 0; }
.sb-slot.on { border: 0; background: none; transform: rotate(var(--r)); cursor: pointer; transition: transform .2s; }
.sb-slot.on:active { transform: rotate(0deg) scale(1.12); }
.sb-slot .pic { font-size: clamp(76px, 8.5vw, 110px); }
.sb-q { position: absolute; font-size: 30px; font-weight: 900; color: hsl(var(--h) 40% 75%); }
.sb-hint { margin: 14px 0 0; text-align: center; font-weight: 800; color: hsl(var(--h) 40% 50%); }
.stk.cartoon img { filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 4px 6px rgba(80, 40, 100, .25)); }
@media (max-height: 520px) {
  .sb-book { grid-template-columns: 200px 1fr; gap: 10px; }
  .sb-tab { grid-template-columns: 34px 1fr auto; padding: 3px 8px 3px 4px; }
  .sb-tab b { font-size: 13px; }
  .sb-ti .pic { font-size: 30px; }
  .sb-tabs, .sb-page { max-height: calc(100dvh - 70px); }
  .sb-page { padding: 10px 14px; }
  .sb-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
  .sb-slot .pic { font-size: 64px; }
}

/* ───────────── 家長天地（js/parent2.js）───────────── */
.pc-screen { max-width: none; min-height: 100dvh; background: #fff8ee url(../img/scenes/parent-bg.webp) center / cover fixed; position: relative; }
.pc-screen::before { content: ""; position: fixed; inset: 0; z-index: 0; background: rgba(255, 250, 242, .62); pointer-events: none; }
.pc-screen > * { position: relative; z-index: 1; }
.pc-body { width: 100%; max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding-bottom: 20px; }
.pc-screen > .card, .pc-screen > .plist, .pc-screen > h2, .pc-screen > .tabs, .pc-screen > .opts, .pc-screen > .row-btns, .pc-screen > .sub, .pc-screen > .btn { max-width: 1000px; width: 100%; margin-left: auto; margin-right: auto; }
.pc-hero { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: stretch; }
.pc-hello, .pc-card, .pc-focus, .pc-stat, .pc-step, .pc-act, .pc-tipc, .pc-dl, .pc-dr { background: rgba(255, 253, 248, .95); border: 3px solid #f3e3c8; border-radius: 24px; box-shadow: 0 4px 0 rgba(140, 100, 50, .12); }
.pc-hello { padding: 16px 22px; }
.pc-hello b { font-size: clamp(20px, 2.4vw, 28px); color: #4a3466; }
.pc-hello p { margin: 4px 0 10px; color: #7a6a5a; font-weight: 700; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: #fff3dc; color: #8a5a14; font-weight: 800; font-size: 14px; }
.pc-chips .ic { width: 16px; height: 16px; }
.pc-focus { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 14px 54px 14px 22px; position: relative; cursor: pointer; text-align: left; border-color: var(--c); min-width: 220px; }
.pc-focus small { font-weight: 800; color: #8a7a6a; }
.pc-focus b { font-size: 28px; color: var(--c); }
.pc-focus > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; }
.pc-focus > span .ic { width: 55%; height: 55%; }
.pc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pc-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 10px; border-radius: 26px; background: rgba(255, 253, 248, .96); border: 3px solid color-mix(in srgb, var(--c) 35%, #fff); box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 25%, #fff); cursor: pointer; transition: transform .15s; }
.pc-tile:hover { transform: translateY(-3px); }
.pc-tile:active { transform: scale(.97); }
.pc-ti { display: grid; place-items: center; width: clamp(64px, 8vw, 96px); aspect-ratio: 1; border-radius: 24px; background: color-mix(in srgb, var(--c) 12%, #fff); }
.pc-ti-img { width: 82%; height: 82%; object-fit: contain; }
.pc-tile b { font-size: clamp(16px, 1.7vw, 20px); color: #3b2a50; }
.pc-tile small { color: #8a7a6a; font-weight: 700; font-size: 13px; line-height: 1.25; }
.pc-privacy { margin: 0; text-align: center; color: #8a7a6a; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pc-privacy .ic { width: 14px; height: 14px; }
.pc-lead { margin: 0; font-weight: 800; color: #5a4a6a; font-size: clamp(15px, 1.6vw, 18px); background: rgba(255, 253, 248, .85); padding: 8px 14px; border-radius: 16px; }
.pc-card { padding: 14px 18px; }
.pc-card h2 { margin: 0 0 10px; font-size: 20px; color: #4a3466; display: flex; align-items: center; gap: 8px; }
.pc-card h2 .ic { width: 22px; height: 22px; }
.pc-note { margin: 8px 0 0; color: #9a8a7a; font-size: 13px; font-weight: 700; }
.pc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pc-stat { padding: 12px; text-align: center; }
.pc-stat b { display: block; font-size: 30px; color: #E8603F; }
.pc-stat span { font-weight: 800; color: #7a6a5a; font-size: 14px; }
.pc-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
.pc-bars { display: grid; gap: 10px; }
.pc-bar { display: grid; grid-template-columns: 7.5em 1fr 3em 7em; align-items: center; gap: 10px; font-weight: 800; color: #4a3466; }
.pc-bt { height: 14px; border-radius: 99px; background: #f3ead8; overflow: hidden; }
.pc-bt i { display: block; height: 100%; border-radius: 99px; }
.pc-bt.big { height: 20px; margin-top: 10px; }
.pc-bv { text-align: right; }
.pc-lv { font-size: 12px; text-align: center; padding: 3px 6px; border-radius: 99px; background: #eee; color: #777; }
.pc-lv.good { background: #dcfce7; color: #15803d; }
.pc-lv.mid { background: #fef3c7; color: #b45309; }
.pc-lv.low { background: #fee2e2; color: #b91c1c; }
.pc-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 150px; align-items: end; }
.pc-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.pc-day i { width: 70%; min-height: 4px; border-radius: 10px 10px 4px 4px; background: #fcd9a8; }
.pc-day.now i { background: #F59E0B; }
.pc-day b { font-size: 13px; color: #6a5a4a; }
.pc-day small { font-weight: 800; color: #9a8a7a; }
.pc-advice p { margin: 6px 0; font-weight: 700; color: #4a3a5a; display: flex; gap: 8px; align-items: flex-start; }
.pc-advice p .ic { flex: none; width: 20px; height: 20px; color: #E8603F; margin-top: 2px; }
.pc-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.pc-steps { display: grid; gap: 12px; }
.pc-step { display: grid; grid-template-columns: 56px 76px 1fr; align-items: center; gap: 14px; padding: 12px 16px; }
.pc-step.done { background: #f0fdf4; border-color: #86efac; }
.pc-tick { width: 52px; height: 52px; border-radius: 50%; border: 4px solid #d6c8b0; background: #fff; color: transparent; display: grid; place-items: center; cursor: pointer; }
.pc-tick .ic { width: 60%; height: 60%; }
.pc-step.done .pc-tick { background: #22c55e; border-color: #22c55e; color: #fff; }
.pc-sic { display: grid; place-items: center; }
.pc-sic-img { width: 72px; height: 72px; object-fit: contain; }
.pc-sb small { font-weight: 800; color: #b08a5a; }
.pc-sb b { display: block; font-size: 19px; color: #3b2a50; }
.pc-sb p { margin: 2px 0 6px; color: #6a5a5a; font-weight: 700; }
.pc-step.done .pc-sb b { text-decoration: line-through; text-decoration-color: #22c55e; }
.pc-dots { display: flex; justify-content: space-between; gap: 6px; }
.pc-dot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pc-dot i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; background: #f3ead8; color: #a08a6a; }
.pc-dot i .ic { width: 60%; height: 60%; }
.pc-dot.n1 i { background: #fde68a; }
.pc-dot.n2 i { background: #fcd34d; }
.pc-dot.n3 i { background: #22c55e; color: #fff; }
.pc-dot.now i { box-shadow: 0 0 0 3px #F59E0B; }
.pc-dot small { font-weight: 800; color: #8a7a6a; }
.pc-tabs .tab:not(.on) { background: rgba(255, 253, 248, .9); }
.pc-acts, .pc-tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.pc-act, .pc-tipc { position: relative; display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; text-align: left; cursor: pointer; }
.pc-act { border-left: 8px solid var(--c); }
.pc-ap { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 18px; background: #fff6e8; }
.pc-ap-img { width: 86%; height: 86%; object-fit: contain; }
.pc-ab { display: flex; flex-direction: column; gap: 3px; }
.pc-ab b, .pc-tipc b { font-size: 17px; color: #3b2a50; }
.pc-ab small, .pc-tipc small { color: #8a7a6a; font-weight: 700; font-size: 13px; }
.pc-tipc .pc-ap { grid-row: 1 / 3; }
.pc-tipc small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-area { align-self: flex-start; padding: 2px 10px; border-radius: 99px; background: color-mix(in srgb, var(--c) 15%, #fff); color: var(--c); font-weight: 900; font-size: 12px; }
.pc-done, .pc-fav { position: absolute; top: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.pc-done { right: 8px; background: #22c55e; }
.pc-fav { right: 38px; background: #ec4899; }
.pc-done .ic, .pc-fav .ic { width: 60%; height: 60%; }
.pc-detail { display: grid; grid-template-columns: minmax(260px, 34%) 1fr; gap: 16px; align-items: start; }
.pc-dl { padding: 16px; display: flex; flex-direction: column; gap: 8px; border-top: 8px solid var(--c); }
.pc-dl h1 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); color: #3b2a50; }
.pc-dpic { display: grid; place-items: center; height: 150px; border-radius: 20px; background: #fff6e8; }
.pc-dpic-img { height: 88%; width: auto; max-width: 80%; object-fit: contain; }
.pc-meta { margin: 0; font-weight: 800; color: #8a7a6a; display: flex; gap: 6px; align-items: center; }
.pc-meta .ic { width: 16px; height: 16px; }
.pc-box { background: #fff6e8; border-radius: 14px; padding: 8px 12px; }
.pc-box b { color: #b0702a; font-size: 13px; }
.pc-box p { margin: 2px 0 0; font-weight: 700; color: #4a3a5a; }
.pc-dr { padding: 16px 20px; }
.pc-dr h2 { margin: 4px 0 8px; font-size: 19px; color: #4a3466; }
.pc-ol { margin: 0 0 10px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; }
.pc-ol li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; font-weight: 700; color: #3b2a50; font-size: 16px; line-height: 1.45; }
.pc-ol li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-weight: 900; }
.pc-say { margin: 6px 0; padding: 8px 12px; border-radius: 14px; background: #f5f0ff; color: #5b3e99; font-weight: 800; display: flex; gap: 8px; align-items: flex-start; }
.pc-say .ic { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.pc-heart.on { color: #ec4899; }
.pc-ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pc-ul li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-weight: 700; color: #3b2a50; font-size: 17px; line-height: 1.5; }
.pc-ul li .ic { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: #dcfce7; color: #16a34a; }
.pc-ring-row { display: flex; align-items: center; gap: 16px; }
.pc-ring { flex: none; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#22c55e calc(var(--p) * 1%), #f3ead8 0); }
.pc-ring b { width: 74px; height: 74px; border-radius: 50%; background: #fffdf8; display: grid; place-items: center; font-size: 22px; color: #15803d; }
.pc-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pc-cg-img { width: 38px; height: 38px; object-fit: contain; }
.pc-ci { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: 0; border-bottom: 1px dashed #eadcc4; background: none; text-align: left; font-weight: 700; color: #3b2a50; font-size: 15px; cursor: pointer; }
.pc-box2 { flex: none; width: 28px; height: 28px; border-radius: 9px; border: 3px solid #d6c8b0; display: grid; place-items: center; color: transparent; background: #fff; }
.pc-box2 .ic { width: 80%; height: 80%; }
.pc-ci.on .pc-box2 { background: #22c55e; border-color: #22c55e; color: #fff; }
.pc-ci.on span:last-child { color: #15803d; }
.pc-segs { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-big { font-size: 54px; font-weight: 900; color: #F59E0B; }
.pc-big small { font-size: 18px; margin-left: 6px; color: #8a7a6a; }
.pc-rest { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; max-width: 420px; }
.pc-rest-owl { width: 130px; }
.pc-rest p { font-weight: 700; color: #5a4a6a; }
@media (max-height: 520px) {
  .pc-body { gap: 10px; }
  .pc-hello { padding: 8px 14px; }
  .pc-hello b { font-size: 18px; }
  .pc-hello p { display: none; }
  .pc-chips span { font-size: 12px; padding: 3px 8px; }
  .pc-focus { min-width: 170px; padding: 8px 44px 8px 14px; }
  .pc-focus b { font-size: 20px; }
  .pc-ti { width: 56px; border-radius: 16px; }
  .pc-tile { padding: 8px 6px; }
  .pc-tile b { font-size: 15px; }
  .pc-tile small { font-size: 11px; }
  .pc-week { height: 100px; }
  .pc-stat b { font-size: 22px; }
  .pc-dpic { height: 100px; }
  .pc-step { grid-template-columns: 46px 56px 1fr; padding: 8px 12px; }
  .pc-sic-img { width: 54px; height: 54px; }
  .pc-tick { width: 44px; height: 44px; }
}
.pc-dpic-img { width: min(130px, 80%); height: 130px; max-width: none; }
.stk.cartoon.stk-shadow img { filter: grayscale(1) brightness(1.15) opacity(.32); }
.sb-q { right: 6%; bottom: 6%; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px dashed hsl(var(--h) 50% 80%); display: grid; place-items: center; font-size: 17px; }
@media (max-height: 520px) {
  .pc-hero { gap: 10px; }
  .pc-grid { grid-template-columns: repeat(7, 1fr); gap: 8px; }
  .pc-tile { padding: 8px 4px; gap: 2px; border-radius: 18px; }
  .pc-ti { width: min(64px, 100%); }
  .pc-tile b { font-size: 13px; line-height: 1.15; }
  .pc-tile small { display: none; }
  .pc-home .pc-privacy { margin-top: 2px; }
  .sb-q { width: 22px; height: 22px; font-size: 13px; }
}

/* 拼字火車：主題選擇、只聽不看、提示 */
.tt-themes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1240px; margin: 4px auto 0; position: relative; z-index: 2; }
.tt-theme { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px; border: 3px solid #fff; background: rgba(255, 255, 255, .88); box-shadow: 0 4px 0 rgba(14, 165, 233, .18); cursor: pointer; }
.tt-theme span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #e0f2fe; }
.tt-theme img { width: 80%; height: 80%; object-fit: contain; }
.tt-theme b { font-size: 16px; color: #0c4a6e; }
.tt-theme small { font-weight: 900; color: #0ea5e9; font-size: 12px; background: #e0f2fe; border-radius: 99px; padding: 1px 7px; }
.tt-theme.on { background: #0ea5e9; border-color: #fde047; box-shadow: 0 0 0 3px #fde047, 0 4px 0 #0369a1; }
.tt-theme.on b { color: #fff; }
.tt-theme.on small { background: #fff; }
.tt-pic.listen { cursor: pointer; background: #f5f3ff; border-color: #a78bfa; }
.tt-ear { display: grid; place-items: center; width: 70%; height: 70%; color: #7c3aed; animation: stPulse 1.6s ease-in-out infinite; }
.tt-ear .ic { width: 100%; height: 100%; fill: currentColor; }
.tt-opt.hint .tt-l { animation: ttHint 1s ease-in-out infinite; box-shadow: 0 0 0 4px #fde047, 0 3px 0 hsl(var(--h) 45% 45%); }
@keyframes ttHint { 50% { transform: translateY(-8px) scale(1.08); } }
@media (max-height: 520px) {
  .tt-themes { gap: 6px; margin-top: 0; }
  .tt-theme { padding: 3px 10px 3px 3px; gap: 5px; }
  .tt-theme span { width: 30px; height: 30px; }
  .tt-theme b { font-size: 13px; }
  .tt-theme small { display: none; }
}
@media (max-height: 520px) {
  .ap-screen:has(.tt-themes) .ap-head { display: none; }
  .tt-themes { flex-wrap: nowrap; gap: 5px; }
  .tt-theme { padding: 2px 8px 2px 2px; }
  .tt-theme span { width: 26px; height: 26px; }
  .tt-theme b { font-size: 12px; white-space: nowrap; }
}

/* ───────────── 英文句子橋（新版，js/bridge.js）───────────── */
.game .play:has(.bd) { zoom: 1 !important; }
.bd { display: grid; grid-template-rows: 1fr auto; padding: 0 0 3cqh; background-color: #cdeffd; --f: 28px; }
.bd-river { position: relative; display: grid; grid-template-columns: 15% 1fr 21%; align-items: end; padding: 0 1.5cqw 0; min-height: 0; }
.bd-water { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background:
  repeating-radial-gradient(ellipse 40px 8px at 50% 50%, rgba(255, 255, 255, .55) 0 2px, transparent 3px 22px) 0 0 / 120px 40px,
  linear-gradient(#7dd3fc, #38bdf8 60%, #0ea5e9); border-top: 6px solid #bae6fd; animation: bdWave 6s linear infinite; }
@keyframes bdWave { to { background-position: 120px 0, 0 0; } }
.bd-bank { position: relative; z-index: 1; align-self: end; height: 52%; display: flex; align-items: flex-end; justify-content: center; }
.bd-bank::before { content: ""; position: absolute; inset: 22% 0 0; background: linear-gradient(#86efac, #4ade80 30%, #a16207 31%, #854d0e); border-radius: 30px 30px 0 0; box-shadow: inset 0 6px 0 rgba(255, 255, 255, .35); }
.bd-bank.l::before { border-radius: 0 40px 0 0; }
.bd-bank.r::before { border-radius: 40px 0 0 0; }
.bd-walker { position: relative; z-index: 3; width: min(13cqw, 26cqh); margin-bottom: 40%; }
.bd-owl { width: 100%; height: auto; display: block; }
.bd-bank.r { align-items: flex-end; }
.bd-pic { position: relative; z-index: 2; display: grid; place-items: center; width: min(19cqw, 34cqh); aspect-ratio: 1; margin-bottom: 30%; padding: 8%; border-radius: 22px; background: #fffdf6; border: 4px solid #f6c453; box-shadow: 0 4px 0 rgba(120, 80, 20, .15); cursor: pointer; }
.bd-pic img { width: 100%; height: 100%; object-fit: contain; }
.bd-star { width: 70%; color: #f59e0b; } .bd-star .ic { width: 100%; height: 100%; fill: currentColor; }
.bd-pic.win { animation: stkBump .6s; box-shadow: 0 0 0 6px #fde047, 0 0 30px #fde047; }
.bd-hear { position: absolute; right: -14px; top: -14px; width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; background: #8b5cf6; color: #fff; display: grid; place-items: center; cursor: pointer; }
.bd-hear .ic { width: 55%; height: 55%; fill: currentColor; }
.bd-bridge { position: relative; z-index: 2; align-self: end; margin-bottom: calc(52% * 0 + 11cqh); display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding: 0 4px 10px;
  border-bottom: 8px solid #92400e; }
.bd-bridge::before, .bd-bridge::after { content: ""; position: absolute; left: -6px; right: -6px; height: 4px; border-radius: 4px; background: #a16207; }
.bd-bridge::before { bottom: calc(var(--f) * 2.6); }
.bd-bridge::after { bottom: -26px; height: 26px; left: 10%; right: 10%; background: repeating-linear-gradient(90deg, #92400e 0 8px, transparent 8px 33%); }
.bd-plank { display: inline-grid; place-items: center; min-width: calc(var(--f) * 1.6); height: calc(var(--f) * 1.9); padding: 0 calc(var(--f) * .45); border-radius: 10px; font-size: var(--f); font-weight: 900; color: #3f2a14;
  background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(120, 70, 20, .12) 9px 11px), linear-gradient(#fcd9a0, #f2b766); border: 3px solid #b7791f; box-shadow: 0 4px 0 #92400e; white-space: nowrap; font-family: "Nunito", "Segoe UI", sans-serif; }
.bd-plank.fixed { opacity: .96; }
.bd-plank.in { animation: stkBump .45s; }
.bd-slot { display: inline-block; min-width: calc(var(--f) * 2.4); height: calc(var(--f) * 1.9); border-radius: 10px; border: 3px dashed rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .35); }
.bd-end { font-size: calc(var(--f) * 1.2); font-weight: 900; color: #3f2a14; padding: 0 2px 4px; }
.bd-bridge.done .bd-plank { animation: npJump .5s cubic-bezier(.3, 1.6, .5, 1); }
.bd-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; padding: 2.5cqh 2cqw 0; }
.bd-opt { padding: 0; border: 0; background: none; cursor: pointer; transition: transform .15s; }
.bd-opt .bd-plank { font-size: var(--fo, calc(var(--f) * 1.05)); }
.bd-opt:active { transform: scale(.94); }
.bd-opt.used { visibility: hidden; }
.bd-opt.hint .bd-plank { animation: ttHint 1s ease-in-out infinite; box-shadow: 0 0 0 4px #fde047, 0 4px 0 #92400e; }
.bd-fly { position: fixed; z-index: 90; pointer-events: none; font-size: var(--f, 28px); }
.bd.bd-wide .bd-opts { padding-right: 64px; }
.bd-end { font-size: calc(var(--f) * 1.9); line-height: 1; color: #3f2a14; }
.bd-water { background: repeating-radial-gradient(ellipse 40px 8px at 50% 50%, rgba(255, 255, 255, .28) 0 2px, transparent 3px 22px) 0 0 / 120px 40px, linear-gradient(#7dd3fc, #38bdf8 60%, #0ea5e9); }
.bd.bd-wide .bd-river { grid-template-columns: 11% 1fr 17%; }
.bd.bd-wide .bd-walker { width: min(10cqw, 24cqh); }

/* ───────────── 中文認字（新版，js/zhwords.js）：平面、楷書 ───────────── */
.game .play:has(.zw) { zoom: 1 !important; }
.zw { --kai: "Kaiti TC", "BiauKai", "DFKai-SB", "標楷體", "KaiTi", "STKaiti", "Noto Serif TC", "PMingLiU", serif; display: grid; place-items: center; padding: 2cqh 3cqw; background-color: #fdf6e3; }
.zw-c { font-family: var(--kai); font-weight: 700; line-height: 1; color: #3b2a1e; }
.zw-say { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #fff; background: #8b5cf6; color: #fff; cursor: pointer; box-shadow: 0 3px 0 #6d28d9; flex: none; }
.zw-say .ic { width: 55%; height: 55%; fill: currentColor; }
.zw-say.mini { position: absolute; right: -14px; top: -14px; width: 44px; height: 44px; }
.zw-many { display: flex; gap: 4%; width: 100%; height: 100%; align-items: center; justify-content: center; }
.zw-many img { width: 30%; height: auto; }
.zw-many.n1 img { width: 70%; }
.zw-many.n2 img { width: 45%; }
/* 學字卡 */
.zl { display: grid; grid-template-rows: 1fr auto; gap: 2cqh; width: min(100%, 1000px); height: 100%; }
.zl-card { display: grid; grid-template-columns: auto 1fr; gap: 4cqw; align-items: center; padding: 3cqh 4cqw; border-radius: 30px; background: rgba(255, 253, 246, .96); border: 5px solid #f6c453; box-shadow: 0 5px 0 rgba(120, 80, 20, .15); }
.zl-card.in { animation: popIn .4s both; }
.zl-pic { position: relative; display: grid; place-items: center; width: min(42cqh, 34cqw); aspect-ratio: 1; border-radius: 26px; background: #fff7e6; }
.zl-pic > img, .zl-pic > .zw-many { width: 84%; height: 84%; object-fit: contain; animation: zlFade 4s 1s forwards; }
.zl-ghost { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--kai); font-weight: 700; font-size: min(34cqh, 28cqw); color: #e8603f; opacity: 0; animation: zlGhost 4s 1s forwards; }
@keyframes zlFade { 30%, 100% { opacity: .35; } }
@keyframes zlGhost { 30%, 100% { opacity: .85; } }
.zl-info { display: flex; flex-direction: column; gap: 2cqh; min-width: 0; }
.zl-row { display: flex; align-items: center; gap: 3cqw; }
.zl-char { font-size: min(30cqh, 20cqw); color: #c2410c; }
.zl-tip { margin: 0; font-size: clamp(18px, min(4cqh, 2.8cqw), 30px); font-weight: 700; color: #4a3a2a; line-height: 1.45; }
.zl-word { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 99px; border: 3px solid #fbbf24; background: #fff7e6; font-family: var(--kai); font-size: clamp(24px, min(6cqh, 4cqw), 44px); color: #3b2a1e; cursor: pointer; }
.zl-word b { color: #e8603f; }
.zl-word .ic { width: 24px; height: 24px; color: #8b5cf6; }
.zl-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zl-dots { display: flex; gap: 10px; }
.zl-dots i { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .8); border: 3px solid #f6c453; }
.zl-dots i.on { background: #f59e0b; }
/* 練習題 */
.zq { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqh; width: 100%; height: 100%; }
.zq-stim { display: flex; justify-content: center; }
.zq-card { position: relative; display: grid; place-items: center; border-radius: 26px; background: rgba(255, 253, 246, .97); border: 5px solid #f6c453; box-shadow: 0 5px 0 rgba(120, 80, 20, .15); }
.zq-card.pic { width: min(38cqh, 30cqw); aspect-ratio: 1; padding: 3%; }
.zq-card.pic > img { width: 90%; height: 90%; object-fit: contain; }
.zq-card.ear { width: min(32cqh, 26cqw); aspect-ratio: 1; color: #7c3aed; cursor: pointer; border-color: #c4b5fd; animation: stPulse 1.8s ease-in-out infinite; }
.zq-card.ear .ic { width: 60%; height: 60%; fill: currentColor; }
.zq-card.big { width: min(38cqh, 30cqw); aspect-ratio: 1; }
.zq-card.big .zw-c { font-size: min(30cqh, 24cqw); color: #c2410c; }
.zq-card.line { grid-auto-flow: column; gap: 3cqw; padding: 2cqh 4cqw; }
.zq-pic { display: grid; place-items: center; width: min(22cqh, 16cqw); aspect-ratio: 1; }
.zq-pic > img { width: 100%; height: 100%; object-fit: contain; }
.zq-text { font-family: var(--kai); font-weight: 700; font-size: clamp(26px, min(7cqh, 4.4cqw), 56px); color: #3b2a1e; letter-spacing: .08em; }
.zq-card.word .zq-text { font-size: clamp(40px, min(13cqh, 8cqw), 96px); }
.zq-gap { display: inline-grid; place-items: center; min-width: 1.1em; text-decoration: none; border-bottom: 5px solid #f59e0b; color: #f59e0b; }
.zq-gap.filled { color: #16a34a; border-color: #16a34a; animation: stkBump .5s; }
.zq-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 3cqw; }
.zq-o { display: grid; place-items: center; width: min(26cqh, 18cqw); aspect-ratio: 1; padding: 0; border-radius: 26px; background: #fffdf6; border: 5px solid hsl(var(--h) 85% 70%); box-shadow: 0 5px 0 hsl(var(--h) 60% 80%); cursor: pointer; transition: transform .15s; }
.zq-o .zw-c { font-size: min(18cqh, 12.5cqw); }
.zq-o.p > img, .zq-o.p > .zw-many { width: 80%; height: 80%; object-fit: contain; }
.zq-o:active { transform: scale(.95); }
.zq-o.ok { border-color: #22c55e; box-shadow: 0 0 0 6px #bbf7d0, 0 5px 0 #86efac; }
.zq-o.no { opacity: .45; filter: grayscale(.6); }
/* 字字泡泡 */
.zp { display: flex; flex-direction: column; align-items: center; gap: 3cqh; width: 100%; }
.zp-top { display: flex; align-items: center; gap: 2cqw; padding: 1cqh 3cqw; border-radius: 99px; background: rgba(255, 253, 246, .95); border: 4px solid #f6c453; }
.zp-target { font-size: min(14cqh, 9cqw); color: #c2410c; }
.zp-count { font-weight: 900; font-size: 22px; color: #16a34a; }
.zp-grid { display: grid; grid-template-columns: repeat(5, auto); gap: 2.4cqh 3cqw; justify-content: center; }
.zp-b { display: grid; place-items: center; width: min(20cqh, 13cqw); aspect-ratio: 1; padding: 0; border-radius: 50%; border: 4px solid #fff; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, hsl(var(--h) 90% 88%) 13%, hsl(var(--h) 75% 78%)); box-shadow: 0 4px 0 hsl(var(--h) 50% 70%); animation: stBob 2.6s var(--d) ease-in-out infinite; }
.zp-b .zw-c { font-size: min(11cqh, 7.5cqw); }
.zp-b.got { background: #22c55e; animation: stkBump .4s; }
.zp-b.got .zw-c { color: #fff; }
.zp-b.no { animation: none; }
@media (max-height: 520px) {
  .zl-card { padding: 2cqh 3cqw; gap: 3cqw; }
  .zl-tip { font-size: 16px; }
  .zw-say { width: 42px; height: 42px; }
  .zq { flex-direction: row; gap: 4cqw; }
  .zq-o { width: min(30cqh, 16cqw); }
  .zq-card.line { grid-auto-flow: row; padding: 2cqh 2cqw; gap: 1cqh; }
  .zp { flex-direction: row; }
  .zp-top { flex-direction: column; border-radius: 26px; padding: 2cqh 2cqw; }
  .zp-b { width: min(26cqh, 12cqw); }
}
.zl-nav { justify-content: center; gap: 30px; padding-right: 90px; }
.zl-next { min-width: 200px; font-size: 22px; }
@keyframes zlFade { 30%, 100% { opacity: .6; } }
@keyframes zlGhost { 30%, 100% { opacity: .7; } }
.zl-ghost { font-size: min(26cqh, 21cqw); }
@media (max-height: 520px) { .zl-next { min-width: 150px; font-size: 17px; padding: 8px 14px; } .zl-nav { padding-right: 70px; } }
@media (max-height: 520px) {
  .zw.zw-wide { padding: 1cqh 2cqw 2cqh; align-items: end; }
  .zw-wide .zl { grid-template-columns: 1fr auto; grid-template-rows: 1fr; align-items: end; height: auto; width: 100%; padding-top: 22cqh; }
  .zw-wide .zl-card { padding: 2cqh 3cqw; }
  .zw-wide .zl-pic { width: min(50cqh, 24cqw); }
  .zw-wide .zl-nav { flex-direction: column; padding: 0 70px 0 0; gap: 10px; }
  .zw-wide .zq { padding-top: 20cqh; }
  .zw-wide .zq-o { width: min(42cqh, 16cqw); }
  .zw-wide .zq-o .zw-c { font-size: min(28cqh, 11cqw); }
  .zw-wide .zq-card.pic, .zw-wide .zq-card.big, .zw-wide .zq-card.ear { width: min(52cqh, 22cqw); }
  .zw-wide .zp { padding-top: 20cqh; }
  .zw-wide .zp-b { width: min(30cqh, 11cqw); }
  .zw-wide .zp-b .zw-c { font-size: min(17cqh, 6.5cqw); }
}
@media (max-height: 520px) {
  .zw-wide .zl { grid-template-columns: auto 1fr; padding-top: 14cqh; gap: 2cqw; }
  .zw-wide .zl-nav { order: -1; padding: 0; align-self: center; }
  .zw-wide .zl-card { width: 100%; box-sizing: border-box; grid-template-columns: auto 1fr; }
  .zw-wide .zl-pic { width: min(62cqh, 24cqw); }
  .zw-wide .zl-char { font-size: min(34cqh, 13cqw); }
  .zw-wide .zl-tip { font-size: 17px; }
  .zw-wide .zl-word { font-size: 26px; padding: 4px 14px; }
  .zw-wide .zq-opts { flex-wrap: nowrap; gap: 2cqw; }
  .zw-wide .zq-card.line { max-width: 44%; }
  .zw-wide .zq-card.line ~ * .zq-o, .zw-wide .zq:has(.zq-card.line) .zq-o { width: min(36cqh, 13cqw); }
  .zw-wide .zq:has(.zq-card.line) .zq-o .zw-c { font-size: min(24cqh, 9cqw); }
  .zw-wide .zq-text { font-size: 24px; }
}
@media (max-height: 520px) {
  .zw-wide .zl, .zw-wide .zq, .zw-wide .zp { justify-self: stretch; }
  .zw-wide .zq-stim:has(.line) { flex: 0 0 46%; }
  .zw-wide .zq-card.line { grid-auto-flow: column; width: 100%; max-width: none; box-sizing: border-box; padding: 2cqh 2cqw; }
  .zw-wide .zq-card.line .zq-pic { width: min(30cqh, 9cqw); }
}

/* ───────────── 閱讀小偵探（新版，js/detective.js）：左邊案件檔案，右邊答案 ───────────── */
.game .play:has(.dt) { zoom: 1 !important; }
.dt { display: grid; grid-template-columns: minmax(0, 46%) 1fr; gap: 3cqw; align-items: center; padding: 3cqh 3cqw; background-color: #f6efe2; }
.dt-file { position: relative; display: flex; flex-direction: column; gap: 1.6cqh; max-height: 100%; min-height: 0; padding: 2.4cqh 2.4cqw; border-radius: 8px 26px 26px 26px; background: #fffaf0;
  border: 4px solid #e9c98f; box-shadow: 0 6px 0 rgba(120, 80, 30, .18); overflow: hidden; }
.dt-file::before { content: ""; position: absolute; left: -4px; top: -22px; width: 38%; height: 26px; border-radius: 12px 12px 0 0; background: #e9c98f; }
.dt-file.invite { background: #fff4f8; border-color: #f9a8d4; } .dt-file.invite::before { background: #f9a8d4; }
.dt-file.table { background: #f3faff; border-color: #93c5fd; } .dt-file.table::before { background: #93c5fd; }
.dt-head { display: flex; align-items: center; gap: 10px; color: #92400e; }
.dt-head .ic { width: 30px; height: 30px; flex: none; }
.dt-head b { font-size: clamp(20px, min(4.4cqh, 2.6cqw), 32px); color: #7c2d12; }
.dt-clues { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.2cqh; }
.dt-clues li { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 1cqh 12px; border-radius: 14px; background: #f3e8d3; color: #a8946f; font-weight: 800; font-size: clamp(16px, min(3.6cqh, 2.1cqw), 26px); line-height: 1.25; }
.dt-clues li.on { background: #fff; color: #3b2a1e; box-shadow: 0 2px 0 #eadcc0; }
.dt-clues li.new { animation: popIn .45s both; }
.dt-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #d6b98a; color: #fff; font-weight: 900; }
.dt-clues li.on .dt-n { background: #f59e0b; }
.dt-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.dt-btns button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px; border: 3px solid #fff; font-weight: 900; font-size: clamp(15px, min(3cqh, 1.8cqw), 20px); cursor: pointer; }
.dt-btns .ic { width: 22px; height: 22px; }
.dt-more { background: #f59e0b; color: #fff; box-shadow: 0 4px 0 #b45309; animation: stPulse 1.8s ease-in-out infinite; }
.dt-more:disabled { background: #d6c8b0; box-shadow: none; animation: none; }
.dt-listen { background: #8b5cf6; color: #fff; box-shadow: 0 4px 0 #6d28d9; }
.dt-ready { background: #22c55e; color: #fff; box-shadow: 0 4px 0 #15803d; animation: stPulse 1.8s ease-in-out infinite; }
.dt-body { min-height: 0; overflow: auto; }
.dt-text { margin: 0; font-size: clamp(17px, min(3.8cqh, 2.2cqw), 28px); font-weight: 700; color: #3b2a1e; line-height: 1.5; }
.dt-list { margin: 1cqh 0 0; padding: 0; list-style: none; display: grid; gap: .8cqh; }
.dt-list li { font-size: clamp(16px, min(3.6cqh, 2.1cqw), 26px); font-weight: 700; color: #3b2a1e; }
.dt-list b { display: inline-block; min-width: 4.2em; color: #be185d; }
.dt-table { width: 100%; border-collapse: collapse; font-size: clamp(14px, min(3cqh, 1.8cqw), 22px); font-weight: 700; color: #1e3a5f; }
.dt-table td { padding: .5cqh 6px; border-bottom: 2px dashed #bfdbfe; vertical-align: middle; }
.dt-table td:first-child { white-space: nowrap; }
.dt-table td b { display: block; font-size: 1.15em; color: #1d4ed8; }
.dt-table td small { color: #64748b; font-size: .75em; }
.dt-tp { width: min(7cqh, 4cqw); } .dt-tp img, .dt-tp .pic { width: min(7cqh, 4cqw); height: min(7cqh, 4cqw); object-fit: contain; font-size: min(6cqh, 3.5cqw); }
.dt-file.closed .dt-body { display: grid; place-items: center; min-height: 30cqh; }
.dt-shut { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #a8946f; font-weight: 900; font-size: 22px; }
.dt-shut .ic { width: 64px; height: 64px; }
.dt-stamp { position: absolute; right: 4%; bottom: 6%; display: none; flex-direction: column; align-items: center; padding: 10px 16px; border: 4px solid #dc2626; border-radius: 14px; color: #dc2626; background: rgba(255, 255, 255, .9); transform: rotate(-10deg); }
.dt-stamp.on { display: flex; animation: dtStamp .5s cubic-bezier(.3, 1.6, .5, 1); }
.dt-stamp .ic { width: 28px; height: 28px; color: #f59e0b; } .dt-stamp b { font-size: 20px; } .dt-stamp small { font-weight: 800; }
@keyframes dtStamp { from { transform: rotate(-10deg) scale(2.2); opacity: 0; } }
.dt-right { display: flex; flex-direction: column; gap: 2cqh; height: 100%; justify-content: center; min-width: 0; }
.dt-right.wait { opacity: .35; pointer-events: none; }
.dt-ask { align-self: stretch; padding: 1.2cqh 18px; border-radius: 18px; background: rgba(255, 255, 255, .92); border: 3px solid #fde68a; font-weight: 900; color: #3b2a50; font-size: clamp(17px, min(3.8cqh, 2.2cqw), 28px); line-height: 1.3; }
.dt-opts { display: grid; gap: 2cqh 2cqw; }
.dt-opts.pics.n3 { grid-template-columns: repeat(3, 1fr); }
.dt-opts.pics.n4 { grid-template-columns: repeat(2, 1fr); }
.dt-opts.words { grid-template-columns: 1fr; }
.dt-opts.tfs { grid-template-columns: 1fr 1fr; }
.dt-o { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqh; padding: 1.4cqh 10px; border-radius: 22px; background: #fffdf6;
  border: 4px solid hsl(var(--h) 85% 72%); box-shadow: 0 4px 0 hsl(var(--h) 60% 82%); cursor: pointer; min-width: 0; transition: transform .15s; }
.dt-o:active { transform: scale(.96); }
.dt-op { display: grid; place-items: center; width: 100%; aspect-ratio: 1.25; }
.dt-opts.n4 .dt-op { aspect-ratio: 1.7; }
.dt-op img, .dt-op .pic { width: 100%; height: 100%; object-fit: contain; font-size: min(14cqh, 9cqw); }
.dt-ol { font-weight: 900; color: #3b2a50; font-size: clamp(16px, min(3.6cqh, 2.2cqw), 28px); line-height: 1.15; text-align: center; overflow-wrap: normal; }
.dt-opts.words .dt-o { flex-direction: row; justify-content: flex-start; padding: 1.6cqh 64px 1.6cqh 22px; }
.dt-opts.words .dt-ol { text-align: left; }
.dt-say { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #8b5cf6; color: #fff; }
.dt-opts.words .dt-say { top: 50%; transform: translateY(-50%); }
.dt-say .ic { width: 55%; height: 55%; fill: currentColor; }
.dt-opts.tfs .dt-o { padding: 3cqh 10px; }
.dt-tfi { display: grid; place-items: center; width: min(12cqh, 8cqw); aspect-ratio: 1; border-radius: 50%; color: #fff; }
.dt-o.tf-yes .dt-tfi { background: #22c55e; } .dt-o.tf-no .dt-tfi { background: #ef4444; }
.dt-tfi .ic { width: 60%; height: 60%; }
.dt-o.ok { border-color: #22c55e; box-shadow: 0 0 0 6px #bbf7d0, 0 4px 0 #86efac; }
.dt-o.no { opacity: .45; filter: grayscale(.6); }
@media (max-height: 520px) {
  .dt { padding: 1.5cqh 2cqw; gap: 2cqw; grid-template-columns: minmax(0, 48%) 1fr; }
  .dt-file { gap: 1cqh; padding: 1.6cqh 1.6cqw; }
  .dt-file::before { display: none; }
  .dt-head .ic { width: 22px; height: 22px; }
  .dt-head b { font-size: 18px; }
  .dt-clues li { grid-template-columns: 26px 1fr; padding: .6cqh 8px; font-size: 14px; gap: 6px; }
  .dt-n { width: 24px; height: 24px; font-size: 13px; }
  .dt-btns button { padding: 5px 12px; font-size: 13px; }
  .dt-text, .dt-list li { font-size: 15px; line-height: 1.35; }
  .dt-table { font-size: 12px; }
  .dt-ask { font-size: 15px; padding: 6px 12px; }
  .dt-ol { font-size: 15px; }
  .dt-say { width: 28px; height: 28px; right: 6px; top: 6px; }
  .dt-opts.words .dt-o { padding: 1cqh 40px 1cqh 12px; }
  .dt-opts.pics.n4 { grid-template-columns: repeat(4, 1fr); }
  .dt-opts.n4 .dt-op { aspect-ratio: 1; }
  .dt-wide { padding-top: 22cqh; }
  .dt-wide .dt-file { max-height: 100%; }
}
.dt-opts.tfs .dt-o { flex-direction: column; padding: 3cqh 10px; }
.dt-opts.tfs .dt-say { top: 10px; transform: none; }
.dt-opts.tfs .dt-ol { font-size: clamp(22px, min(5cqh, 3cqw), 40px); }
@media (max-height: 520px) {
  .dt-wide { padding-top: 25cqh; grid-template-columns: minmax(0, 50%) 1fr; }
  .dt-ol { font-size: 13px; }
  .dt-opts.pics .dt-o { padding: 1cqh 4px; }
  .dt-tp, .dt-tp img { width: 22px; height: 22px; }
  .dt-table td { padding: 1px 4px; }
  .dt-table td b { font-size: 1em; display: inline; margin-right: 4px; }
  .dt-table td small { display: none; }
}
.dt-o.dt-tf { width: auto; height: auto; min-height: 0; background: #fffdf6 !important; }
@media (max-height: 520px) {
  .dt-file.table .dt-body { overflow: visible; }
  .dt-table { font-size: 11.5px; }
  .dt-table td { padding: 0 4px; line-height: 1.25; }
  .dt-tp, .dt-tp img { width: 18px; height: 18px; }
  .dt-file.table { gap: .6cqh; }
}

/* ───────────── 英文大冒險（第三版，js/english3.js）：平面 ───────────── */
.game .play:has(.e3) { zoom: 1 !important; }
.e3 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqh; padding: 3cqh 3cqw; background: transparent; box-shadow: none; }
.e3-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.5cqh; }
.e3-stage.row { flex-direction: row; gap: 2cqw; padding: 1.4cqh 3cqw; border-radius: 99px; background: rgba(255, 253, 246, .95); border: 4px solid #f6c453; }
.e3-l { display: inline-grid; place-items: center; width: var(--s, min(11cqh, 8cqw)); aspect-ratio: 1; border-radius: 22%; background: hsl(var(--h) 75% 62%); border: 3px solid #fff; color: #fff;
  font: 900 calc(var(--s, min(11cqh, 8cqw)) * .62) / 1 "Nunito", "Segoe UI", sans-serif; box-shadow: 0 3px 0 hsl(var(--h) 45% 45%); }
.e3-l.big { --s: min(19cqh, 13cqw); }
.e3-l.huge { --s: min(30cqh, 20cqw); border-width: 5px; }
.e3-l.mid { --s: min(13cqh, 8cqw); }
.e3-l.got { animation: stkBump .5s; box-shadow: 0 3px 0 hsl(var(--h) 45% 45%), 0 0 0 5px #fde047; }
.e3-hear { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #fff; background: #8b5cf6; color: #fff; cursor: pointer; box-shadow: 0 3px 0 #6d28d9; }
.e3-hear .ic { width: 55%; height: 55%; fill: currentColor; }
.e3-hear.mini { position: absolute; right: -16px; top: -16px; }
.e3-hear.e3-ear { width: min(30cqh, 22cqw); height: auto; aspect-ratio: 1; border-radius: 30px; border: 5px solid #c4b5fd; background: rgba(255, 253, 246, .96); color: #7c3aed; box-shadow: 0 5px 0 rgba(124, 58, 237, .2); animation: stPulse 1.8s ease-in-out infinite; }
.e3-pc { display: grid; place-items: center; width: min(32cqh, 24cqw); aspect-ratio: 1; padding: 4%; border-radius: 26px; background: rgba(255, 253, 246, .97); border: 5px solid #f6c453; box-shadow: 0 5px 0 rgba(120, 80, 20, .15); }
.e3-pc img { width: 92%; height: 92%; object-fit: contain; }
.e3-tag { padding: 4px 18px; border-radius: 99px; background: rgba(255, 253, 246, .95); border: 3px solid #f6c453; font-weight: 900; color: #3b2a50; font-size: clamp(18px, min(4cqh, 2.6cqw), 30px); }
.e3-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 3cqw; }
.e3-o { position: relative; display: grid; place-items: center; padding: 1.4cqh; border-radius: 26px; background: rgba(255, 253, 246, .97); border: 5px solid hsl(var(--h) 85% 70%); box-shadow: 0 5px 0 hsl(var(--h) 60% 80%); cursor: pointer; transition: transform .15s; }
.e3-o:active { transform: scale(.95); }
.e3-o.p { width: min(28cqh, 20cqw); aspect-ratio: 1; }
.e3-o.p img { width: 88%; height: 88%; object-fit: contain; }
.e3-o.w { min-width: min(30cqh, 22cqw); padding: 2.4cqh 56px 2.4cqh 26px; }
.e3-word { font: 900 clamp(24px, min(6cqh, 4cqw), 46px) / 1.1 "Nunito", "Segoe UI", sans-serif; color: #3b2a50; letter-spacing: .02em; }
.e3-say { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #8b5cf6; color: #fff; }
.e3-o.w .e3-say { top: 50%; transform: translateY(-50%); }
.e3-say .ic { width: 55%; height: 55%; fill: currentColor; }
.e3-o.ok { border-color: #22c55e; box-shadow: 0 0 0 6px #bbf7d0, 0 5px 0 #86efac; }
.e3-o.no { opacity: .45; filter: grayscale(.6); }
.e3-wordrow { display: flex; gap: 8px; --s: min(10cqh, 7cqw); }
.e3-slot { display: grid; place-items: center; width: var(--s); aspect-ratio: 1; border-radius: 22%; border: 4px dashed #94a3b8; background: rgba(255, 255, 255, .8); color: #64748b; font-weight: 900; font-size: calc(var(--s) * .55); animation: stPulse 1.4s ease-in-out infinite; }
/* 毛毛蟲 */
.e3-cat { display: flex; align-items: center; gap: 0; padding: 1cqh 0; }
.e3-cat.go { animation: e3Wiggle .9s ease-in-out 2; }
@keyframes e3Wiggle { 50% { transform: translateX(16px); } }
.e3-seg { display: grid; place-items: center; width: min(17cqh, 12cqw); aspect-ratio: 1; margin-right: -1.2cqw; border-radius: 50%; background: #86efac; border: 4px solid #22c55e; color: #14532d; font: 900 min(10cqh, 7cqw) / 1 "Nunito", sans-serif; position: relative; }
.e3-seg:nth-child(even) { background: #bbf7d0; transform: translateY(-8%); }
.e3-seg.q { background: #fff; border-style: dashed; color: #94a3b8; animation: stPulse 1.4s ease-in-out infinite; }
.e3-seg.got { background: #fde047; border-color: #eab308; color: #713f12; animation: stkBump .5s; }
.e3-head { position: relative; display: flex; justify-content: center; gap: 18%; align-items: center; width: min(21cqh, 15cqw); aspect-ratio: 1; border-radius: 50%; background: #4ade80; border: 4px solid #16a34a; }
.e3-head::before, .e3-head::after { content: ""; position: absolute; top: -26%; width: 6%; height: 30%; background: #16a34a; border-radius: 4px; }
.e3-head::before { left: 32%; transform: rotate(-15deg); } .e3-head::after { right: 32%; transform: rotate(15deg); }
.e3-head i { width: 18%; aspect-ratio: 1; border-radius: 50%; background: #1f2937; box-shadow: inset 3px -3px 0 #fff; margin-top: -14%; }
/* 字母泡泡 */
.e3-count { font-weight: 900; font-size: 24px; color: #16a34a; }
.e3-bub { display: grid; grid-template-columns: repeat(5, auto); gap: 2.4cqh 3cqw; justify-content: center; }
.e3-b { display: grid; place-items: center; width: min(19cqh, 12cqw); aspect-ratio: 1; padding: 0; border-radius: 50%; border: 4px solid #fff; cursor: pointer; font: 900 min(10cqh, 6.5cqw) / 1 "Nunito", sans-serif; color: #3b2a50;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, hsl(var(--h) 90% 88%) 13%, hsl(var(--h) 75% 78%)); box-shadow: 0 4px 0 hsl(var(--h) 50% 70%); animation: stBob 2.6s var(--d) ease-in-out infinite; }
.e3-b.got { background: #22c55e; color: #fff; animation: stkBump .4s; transform: scale(.85); }
.e3-b.no { animation: none; }
/* 連連看 */
.e3-match { display: grid; grid-template-columns: auto auto; gap: 8cqw; align-items: center; }
.e3-col { display: flex; flex-direction: column; gap: 2.4cqh; }
.e3-col.p { flex-direction: row; gap: 2.4cqw; }
.e3-mw { padding: 1.8cqh 26px; border-radius: 20px; background: rgba(255, 253, 246, .97); border: 4px solid #c4b5fd; box-shadow: 0 4px 0 #ddd6fe; cursor: pointer; }
.e3-mw.sel { border-color: #f59e0b; box-shadow: 0 0 0 5px #fde68a; transform: scale(1.05); }
.e3-mp { display: grid; place-items: center; width: min(26cqh, 17cqw); aspect-ratio: 1; border-radius: 24px; background: rgba(255, 253, 246, .97); border: 4px solid #fbcfe8; box-shadow: 0 4px 0 #fce7f3; cursor: pointer; }
.e3-mp img { width: 86%; height: 86%; object-fit: contain; }
.e3-mw.got, .e3-mp.got { border-color: hsl(var(--gh) 70% 50%); background: hsl(var(--gh) 90% 92%); box-shadow: 0 0 0 4px hsl(var(--gh) 80% 80%); pointer-events: none; }
.e3-mp.no { animation: none; opacity: .6; }
@media (max-height: 520px) {
  .e3 { gap: 3cqh; }
  .e3.e3-wide { flex-direction: row; justify-content: center; gap: 4cqw; padding: 20cqh 2cqw 2cqh; }
  .e3-wide.m-pop { flex-direction: row; }
  .e3-wide .e3-stage.row { flex-direction: column; border-radius: 26px; }
  .e3-wide .e3-o.p { width: min(44cqh, 17cqw); }
  .e3-wide .e3-l.big { --s: min(32cqh, 13cqw); }
  .e3-wide .e3-pc { width: min(52cqh, 22cqw); }
  .e3-wide .e3-b { width: min(28cqh, 10cqw); font-size: min(15cqh, 5.5cqw); }
  .e3-wide .e3-seg { width: min(26cqh, 10cqw); }
  .e3-wide .e3-head { width: min(30cqh, 12cqw); }
  .e3-wide.m-next, .e3-wide.m-match { flex-direction: column; padding-top: 22cqh; }
  .e3-wide .e3-mp { width: min(34cqh, 14cqw); }
  .e3-word { font-size: 22px; }
  .e3-o.w { padding: 1.6cqh 48px 1.6cqh 18px; }
  .e3-wide .e3-opts { flex-wrap: nowrap; gap: 2cqw; }
  .e3-wide.m-readword .e3-opts, .e3-wide.m-minimal .e3-opts { flex-direction: column; }
}
.e3.ml, .e3.ml.lifted { background: none !important; box-shadow: none !important; border: 0 !important; backdrop-filter: none !important; }
.e3.ml::before, .e3.ml::after { display: none !important; }
.e3-pw { position: relative; display: inline-block; }
.e3-o:has(.e3-l) { padding: 0; background: none; border: 0; box-shadow: none; }
.e3-o:has(.e3-l).ok .e3-l { box-shadow: 0 3px 0 hsl(var(--h) 45% 45%), 0 0 0 7px #86efac; }
@media (max-height: 520px) {
  .e3-wide .e3-wordrow { --s: min(17cqh, 6.5cqw); }
  .e3-wide.m-gap .e3-stage { flex-direction: row; gap: 2cqw; }
  .e3-wide .e3-match { gap: 5cqw; }
  .e3-wide .e3-mp { width: min(44cqh, 15cqw); }
  .e3-wide .e3-mw { padding: 1.4cqh 22px; }
  .e3-wide .e3-l.mid { --s: min(22cqh, 8cqw); }
}

/* ───────────── 量詞市集（js/measure.js）：平面 ───────────── */
.game .play:has(.mw) { zoom: 1 !important; }
.mw { --kai: "Kaiti TC", "BiauKai", "DFKai-SB", "標楷體", "KaiTi", "STKaiti", "Noto Serif TC", serif; display: grid; place-items: center; padding: 2.5cqh 3cqw; background-color: #fdf3e3; }
.mw-card { display: flex; flex-direction: column; align-items: center; gap: .6cqh; padding: 1.2cqh 1.2cqw 1cqh; border-radius: 22px; background: rgba(255, 253, 246, .97); border: 4px solid #f6c453; box-shadow: 0 4px 0 rgba(120, 80, 20, .15); }
.mw-p { display: grid; place-items: center; width: min(18cqh, 12cqw); aspect-ratio: 1; }
.mw-p img { width: 100%; height: 100%; object-fit: contain; }
.mw-card b { font-family: var(--kai); font-size: clamp(18px, min(4.4cqh, 2.8cqw), 32px); color: #3b2a1e; }
.mw-card.big .mw-p { width: min(28cqh, 18cqw); }
.mw-hear { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; border: 3px solid #fff; background: #8b5cf6; color: #fff; cursor: pointer; box-shadow: 0 3px 0 #6d28d9; }
.mw-hear .ic { width: 55%; height: 55%; fill: currentColor; }
.mw-big { font-family: var(--kai); font-weight: 700; font-size: min(22cqh, 14cqw); line-height: 1; color: #c2410c; }
.mw-tag { padding: 6px 18px; border-radius: 99px; background: rgba(255, 253, 246, .96); border: 3px solid #f6c453; font-weight: 900; color: #3b2a50; font-size: clamp(16px, min(3.6cqh, 2.4cqw), 26px); }
/* 學量詞 */
.mw-learn { display: grid; grid-template-rows: 1fr auto; gap: 2cqh; width: min(100%, 1040px); height: 100%; }
.mw-lc { display: grid; grid-template-columns: auto 1fr; gap: 3cqw; align-items: center; padding: 2.5cqh 3cqw; border-radius: 30px; background: rgba(255, 253, 246, .96); border: 5px solid #f6c453; box-shadow: 0 5px 0 rgba(120, 80, 20, .15); }
.mw-lc.in { animation: popIn .4s both; }
.mw-lh { display: flex; flex-direction: column; align-items: center; gap: 1.4cqh; max-width: 30cqw; text-align: center; }
.mw-lh p { margin: 0; font-weight: 800; color: #4a3a2a; font-size: clamp(16px, min(3.6cqh, 2.3cqw), 26px); line-height: 1.4; }
.mw-ex { display: flex; justify-content: center; gap: 2cqw; }
.mw-exb { padding: 0; border: 0; background: none; cursor: pointer; }
.mw-nav { display: flex; align-items: center; justify-content: center; gap: 30px; padding-right: 90px; }
.mw-dots { display: flex; gap: 10px; } .mw-dots i { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .85); border: 3px solid #f6c453; } .mw-dots i.on { background: #f59e0b; }
.mw-next { min-width: 200px; font-size: 22px; }
/* 選擇題 */
.mw-q { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.5cqh; width: 100%; height: 100%; }
.mw-stage { display: flex; flex-direction: column; align-items: center; gap: 1.6cqh; padding: 2cqh 3cqw; border-radius: 28px; background: rgba(255, 253, 246, .9); border: 4px solid #f6c453; }
.mw-many { display: flex; gap: 1.5cqw; }
.mw-many img { width: min(20cqh, 13cqw); height: min(20cqh, 13cqw); object-fit: contain; }
.mw-many.n3 img { width: min(16cqh, 11cqw); height: min(16cqh, 11cqw); }
.mw-line { display: flex; align-items: center; gap: .3em; font-family: var(--kai); font-weight: 700; font-size: clamp(34px, min(10cqh, 6.5cqw), 72px); color: #3b2a1e; }
.mw-line .mw-hear { margin-left: .4em; }
.mw-gap { display: inline-grid; place-items: center; min-width: 1.2em; text-decoration: none; border-bottom: 5px solid #f59e0b; color: #f59e0b; }
.mw-gap.filled { color: #16a34a; border-color: #16a34a; animation: stkBump .5s; }
.mw-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.6cqw; }
.mw-o { display: grid; place-items: center; width: min(20cqh, 14cqw); aspect-ratio: 1; padding: 0; border-radius: 24px; background: #fffdf6; border: 5px solid hsl(var(--h) 85% 70%); box-shadow: 0 5px 0 hsl(var(--h) 60% 80%);
  font-family: var(--kai); font-weight: 700; font-size: min(13cqh, 9cqw); color: #3b2a1e; cursor: pointer; transition: transform .15s; }
.mw-o:active, .mw-oc:active, .mw-item:active, .mw-bk:active { transform: scale(.95); }
.mw-o.ok, .mw-oc.ok .mw-card { border-color: #22c55e; box-shadow: 0 0 0 6px #bbf7d0, 0 5px 0 #86efac; }
.mw-o.no, .mw-oc.no { opacity: .45; filter: grayscale(.6); }
.mw-oc { padding: 0; border: 0; background: none; cursor: pointer; }
.mw-oc .mw-card { border-color: hsl(var(--h) 85% 72%); }
/* 分類籃子 */
.mw-sort { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqh; width: 100%; height: 100%; }
.mw-timer { width: min(70%, 640px); height: 16px; border-radius: 99px; background: rgba(255, 255, 255, .8); border: 3px solid #fff; overflow: hidden; }
.mw-timer i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #22c55e, #facc15, #f97316); }
.mw-cur { min-height: min(36cqh, 30cqw); display: grid; place-items: center; }
.mw-cur.in { animation: popIn .35s both; }
.mw-baskets { display: flex; gap: 3cqw; }
.mw-bk { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 0 1cqh; border: 0; background: none; cursor: pointer; }
.mw-bkimg { display: grid; place-items: center; width: min(26cqh, 18cqw); aspect-ratio: 1.1; }
.mw-bkimg img { width: 100%; height: 100%; object-fit: contain; }
.mw-bk b { position: absolute; top: 34%; display: grid; place-items: center; width: min(11cqh, 7.5cqw); aspect-ratio: 1; border-radius: 50%; background: hsl(var(--h) 80% 60%); border: 4px solid #fff; color: #fff;
  font-family: var(--kai); font-size: min(7cqh, 5cqw); box-shadow: 0 3px 0 hsl(var(--h) 50% 45%); }
.mw-bk small { position: absolute; right: 6%; top: 8%; min-width: 30px; height: 30px; border-radius: 99px; background: #fff; color: #16a34a; font-weight: 900; font-size: 16px; display: grid; place-items: center; }
.mw-bk.pop { animation: stkBump .45s; }
.mw-fly { position: fixed; z-index: 90; pointer-events: none; width: 120px; height: 120px; }
.mw-fly img { width: 100%; height: 100%; object-fit: contain; }
/* 小商店 */
.mw-shop { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 2.5cqh 3cqw; width: 100%; height: 100%; align-items: center; }
.mw-order { grid-column: 1 / 3; display: flex; align-items: center; gap: 1.6cqw; justify-self: center; }
.mw-owl { width: min(14cqh, 10cqw); height: auto; }
.mw-bubble { position: relative; display: flex; align-items: center; gap: 12px; padding: 1.4cqh 22px; border-radius: 24px; background: #fff; border: 4px solid #fde68a; font-family: var(--kai); font-weight: 700; font-size: clamp(24px, min(6.4cqh, 4cqw), 46px); color: #3b2a1e; }
.mw-bubble::before { content: ""; position: absolute; left: -16px; top: 50%; border: 10px solid transparent; border-right: 14px solid #fde68a; transform: translateY(-50%); }
.mw-shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; padding: 2cqh 2cqw; border-radius: 26px; background: rgba(180, 120, 60, .25); border-bottom: 10px solid #a16207; }
.mw-item { padding: 0; border: 0; background: none; cursor: pointer; }
.mw-item .mw-p { width: min(16cqh, 11cqw); }
.mw-cart { position: relative; display: grid; place-items: center; width: min(32cqh, 20cqw); }
.mw-cart > img { width: 100%; height: auto; }
.mw-in { position: absolute; left: 14%; right: 14%; top: 18%; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.mw-got { width: 32%; animation: popIn .35s both; } .mw-got img { width: 100%; height: auto; }
@media (max-height: 520px) {
  .mw.mw-wide { padding: 18cqh 2cqw 2cqh; }
  .mw-lc { padding: 2cqh 2cqw; gap: 2cqw; }
  .mw-lh p { font-size: 15px; }
  .mw-learn { grid-template-columns: auto 1fr; grid-template-rows: 1fr; gap: 2cqw; align-items: center; }
  .mw-nav { order: -1; flex-direction: column; padding: 0; gap: 10px; }
  .mw-next { min-width: 140px; font-size: 17px; padding: 8px 12px; }
  .mw-p { width: min(26cqh, 11cqw); }
  .mw-card b { font-size: 18px; }
  .mw-q, .mw-sort { flex-direction: row; gap: 3cqw; }
  .mw-wide .mw-q { padding-top: 6cqh; }
  .mw-stage { padding: 1.4cqh 2cqw; }
  .mw-many img, .mw-many.n3 img { width: min(24cqh, 9cqw); height: min(24cqh, 9cqw); }
  .mw-line { font-size: 36px; }
  .mw-o { width: min(30cqh, 11cqw); font-size: min(20cqh, 7.5cqw); }
  .mw-opts { flex-wrap: nowrap; gap: 1.6cqw; }
  .mw-sort { flex-wrap: wrap; }
  .mw-timer { position: absolute; top: 2cqh; right: 3cqw; width: 40%; }
  .mw-bkimg { width: min(40cqh, 15cqw); }
  .mw-cur { min-height: 0; }
  .mw-card.big .mw-p { width: min(38cqh, 15cqw); }
  .mw-shop { grid-template-rows: auto 1fr; gap: 1.6cqh 2cqw; }
  .mw-bubble { font-size: 26px; padding: 6px 14px; }
  .mw-owl { width: 54px; }
  .mw-item .mw-p { width: min(24cqh, 9cqw); }
  .mw-cart { width: min(44cqh, 15cqw); }
}
.mw.ml, .mw.ml.lifted { border: 0 !important; box-shadow: none !important; outline: 0 !important; }
.mw-lc { min-height: 56cqh; }
.mw-lc .mw-big { font-size: min(30cqh, 18cqw); }
.mw-lh p { font-size: clamp(18px, min(4.4cqh, 2.8cqw), 30px); }
.mw-ex .mw-p { width: min(24cqh, 14cqw); }
.mw-ex .mw-card b { font-size: clamp(20px, min(5cqh, 3cqw), 34px); }
.mw-cur .mw-card.big .mw-p { width: min(32cqh, 22cqw); }
.mw-cur .mw-card.big b { font-size: clamp(24px, min(6cqh, 4cqw), 42px); }
.mw-many.n1 img { width: min(28cqh, 18cqw); height: min(28cqh, 18cqw); }
.mw-many.n2 img { width: min(22cqh, 15cqw); height: min(22cqh, 15cqw); }
.mw-oc .mw-p { width: min(20cqh, 14cqw); }
@media (max-height: 520px) {
  .mw-lc { min-height: 0; }
  .mw-lc .mw-big { font-size: min(34cqh, 12cqw); }
  .mw-lh p { font-size: 15px; }
  .mw-ex .mw-p { width: min(34cqh, 11cqw); }
  .mw-ex .mw-card b { font-size: 18px; }
  .mw-cur .mw-card.big .mw-p { width: min(40cqh, 15cqw); }
  .mw-cur .mw-card.big b { font-size: 20px; }
  .mw-many.n1 img, .mw-many.n2 img { width: min(30cqh, 11cqw); height: min(30cqh, 11cqw); }
  .mw-oc .mw-p { width: min(30cqh, 10cqw); }
}
@media (max-height: 520px) {
  .mw-wide .mw-bkimg { width: min(56cqh, 16cqw); }
  .mw-wide .mw-bk b { width: min(18cqh, 6cqw); font-size: min(11cqh, 4cqw); }
  .mw-wide .mw-baskets { gap: 2cqw; }
  .mw-wide .mw-shop { grid-template-columns: 1fr auto; padding-right: 60px; }
  .mw-wide .mw-shelf { gap: 1.2cqw; padding: 1.6cqh 1.2cqw; }
  .mw-wide .mw-item .mw-p { width: min(30cqh, 8cqw); }
  .mw-wide .mw-card { padding: .8cqh .8cqw; }
  .mw-wide .mw-card b { font-size: 15px; }
}

/* ───────────── 量詞小劇場（js/mwfilm.js）───────────── */
.ff { --kai: "Kaiti TC", "BiauKai", "DFKai-SB", "標楷體", "KaiTi", "STKaiti", "Noto Serif TC", serif; position: fixed; inset: 0; max-width: none; padding: 0; overflow: hidden; background: #fdf3e3 center / cover no-repeat; }
.ff-curtain { position: absolute; top: 0; bottom: 0; width: 51%; z-index: 20; background: repeating-linear-gradient(90deg, #b91c1c 0 40px, #dc2626 40px 80px); box-shadow: inset 0 -30px 40px rgba(0, 0, 0, .25); transition: transform 1.3s cubic-bezier(.6, 0, .3, 1); }
.ff-curtain.l { left: 0; border-right: 6px solid #fbbf24; } .ff-curtain.r { right: 0; border-left: 6px solid #fbbf24; }
.ff.open .ff-curtain.l { transform: translateX(-100%); } .ff.open .ff-curtain.r { transform: translateX(100%); }
.ff-title { position: absolute; z-index: 21; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 50px; border-radius: 30px; background: #fffaf0; border: 6px solid #fbbf24; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); transition: opacity .5s, transform .8s; }
.ff-title small { font-weight: 900; color: #b45309; font-size: clamp(18px, 3vh, 28px); letter-spacing: .2em; }
.ff-title b { font-family: var(--kai); font-size: clamp(90px, 22vh, 200px); line-height: 1; color: #c2410c; }
.ff-title span { font-family: var(--kai); font-weight: 700; font-size: clamp(20px, 4vh, 36px); color: #3b2a1e; }
.ff.open .ff-title { opacity: 0; transform: translate(-50%, -80%) scale(.6); pointer-events: none; }
.ff-shelf { position: absolute; z-index: 5; top: 3vh; left: 50%; transform: translateX(-50%); display: flex; gap: 1.6vw; padding: 1.2vh 1.6vw 1.8vh; border-radius: 22px; background: rgba(255, 250, 240, .9); border-bottom: 8px solid #a16207; box-shadow: 0 4px 10px rgba(0, 0, 0, .12); }
.ff-slot { position: relative; display: grid; place-items: center; width: min(15vh, 10vw); aspect-ratio: 1; border-radius: 18px; border: 3px dashed #e7c590; background: rgba(255, 255, 255, .6); transition: transform .3s; }
.ff-slot.got { border-style: solid; border-color: #fbbf24; background: #fff; }
.ff-slot.stretch { transform: scaleX(1.35); border-color: #22c55e; box-shadow: 0 0 0 4px #bbf7d0; }
.ff-slot.hop { animation: npJump .5s cubic-bezier(.3, 1.6, .5, 1); }
.ff-actor { position: absolute; z-index: 6; left: 50%; top: 44%; width: min(42vh, 30vw); aspect-ratio: 1; margin: calc(min(42vh, 30vw) / -2) 0 0 calc(min(42vh, 30vw) / -2); display: grid; place-items: center; }
.ff-actor img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .15)); }
.ff-actor.e-grow { width: min(70vh, 50vw); margin: calc(min(42vh, 30vw) / -2) 0 0 calc(min(70vh, 50vw) / -2); }
.ff-actor.in-slot { position: static; width: 100%; height: 100%; margin: 0; }
.ff-owl { position: absolute; z-index: 8; left: 2vw; bottom: 3vh; width: min(26vh, 16vw); transition: transform .4s; }
.ff-owlsvg { width: 100%; height: auto; display: block; }
.ff-owl.talk { animation: stBob .6s ease-in-out infinite; }
.ff-owl.point { transform: rotate(-8deg) scale(1.08); }
.ff-big { position: absolute; z-index: 9; left: 50%; top: 73%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2vh; }
.ff-big.in { animation: popIn .45s both; }
.ff-ph { display: flex; gap: .1em; padding: .1em .5em; border-radius: 26px; background: #fffdf6; border: 5px solid #f6c453; box-shadow: 0 6px 0 rgba(120, 80, 20, .15); font-family: var(--kai); font-weight: 700; font-size: clamp(44px, 12vh, 110px); line-height: 1.15; color: #3b2a1e; }
.ff-ph .mw { color: #e8603f; animation: stkBump .6s .2s; }
.ff-ph .gap { color: #f59e0b; border-bottom: 6px solid #f59e0b; min-width: 1em; text-align: center; }
.ff-rule { padding: .2em .7em; border-radius: 26px; background: #f0fdf4; border: 5px solid #22c55e; font-family: var(--kai); font-weight: 700; font-size: clamp(32px, 8vh, 72px); color: #14532d; }
.ff-rule b { color: #e8603f; }
.ff-qbtns { display: flex; gap: 3vw; }
.ff-qb { width: min(18vh, 13vw); aspect-ratio: 1; border-radius: 24px; border: 5px solid #93c5fd; background: #fffdf6; box-shadow: 0 6px 0 #bfdbfe; font-family: var(--kai); font-weight: 700; font-size: min(12vh, 9vw); color: #3b2a1e; cursor: pointer; animation: stPulse 1.6s ease-in-out infinite; }
.ff-qb.no { animation: nope .45s; border-color: #fca5a5; }
.ff-qb.ok { border-color: #22c55e; box-shadow: 0 0 0 7px #bbf7d0; animation: none; }
.ff-cap { position: absolute; z-index: 10; left: 50%; bottom: 2.5vh; transform: translateX(-50%); max-width: 70vw; padding: 1vh 2.4vw; border-radius: 99px; background: rgba(30, 20, 50, .72); color: #fff; font-family: var(--kai); font-weight: 700; font-size: clamp(18px, 3.8vh, 34px); text-align: center; }
.ff-cap:empty, .ff-cap span:empty { display: none; }
.ff-cap i { font-style: normal; opacity: .4; transition: opacity .15s, color .15s; }
.ff-cap i.on { opacity: 1; color: #fde68a; }
.ff-bub { position: absolute; z-index: 5; bottom: 30%; width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .9); background: rgba(186, 230, 253, .5); animation: ffBub 2.6s ease-out forwards; }
@keyframes ffBub { from { transform: translateY(0) scale(.5); opacity: 1; } to { transform: translateY(-40vh) scale(1.4); opacity: 0; } }
.ff-gust { position: absolute; z-index: 5; left: -20%; width: 30%; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .85); animation: ffGust 1.6s ease-in forwards; }
@keyframes ffGust { to { transform: translateX(140vw); opacity: 0; } }
.ff-ctl { position: absolute; z-index: 30; right: 2vw; top: 2vh; display: flex; gap: 10px; }
.ff-b { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff; background: rgba(255, 255, 255, .9); color: #6d28d9; cursor: pointer; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }
.ff-b .ic { width: 50%; height: 50%; }
.ff.paused .ff-actor, .ff.paused .ff-owl { animation-play-state: paused; }
.ff-end { display: flex; flex-direction: column; align-items: center; gap: 2vh; padding: 3vh 4vw; border-radius: 30px; background: #fffdf6; border: 6px solid #fbbf24; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.ff-end b { font-family: var(--kai); font-size: clamp(32px, 8vh, 64px); color: #c2410c; }
.ff-end div { display: flex; gap: 14px; align-items: center; }
.ff-open { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 12px 24px; border-radius: 99px; border: 4px solid #fff; background: linear-gradient(#fb923c, #ea580c); color: #fff; font-weight: 900; font-size: clamp(16px, 2vw, 22px); box-shadow: 0 5px 0 #c2410c; cursor: pointer; animation: stPulse 1.8s ease-in-out infinite; }
.ff-open .ic { width: 26px; height: 26px; fill: currentColor; }
@media (max-height: 520px) {
  .ff-slot { width: min(17vh, 9vw); }
  .ff-actor { top: 47%; width: min(40vh, 22vw); margin: calc(min(40vh, 22vw) / -2) 0 0 calc(min(40vh, 22vw) / -2); }
  .ff-big { top: 74%; }
  .ff-ph { font-size: 44px; }
  .ff-rule { font-size: 30px; }
  .ff-cap { font-size: 16px; bottom: 1.5vh; }
  .ff-owl { width: min(30vh, 13vw); }
  .ff-b { width: 38px; height: 38px; }
  .ff-open { padding: 6px 14px; font-size: 14px; }
}
.ff-big { left: 0; right: 0; top: auto; bottom: 13vh; transform: none; }
.ff-end b { white-space: nowrap; }
.ff-ph .mw { background: none; }
@media (max-height: 520px) { .ff-big { bottom: 11vh; } }

/* ───────────── 量詞小劇場（遊戲內動畫，js/mwfilm.js）───────────── */
.mwf-host { position: absolute; inset: 0; }
.mwf { --kai: "Kaiti TC", "BiauKai", "DFKai-SB", "標楷體", "KaiTi", "STKaiti", "Noto Serif TC", serif; position: absolute; inset: 0; overflow: hidden; container-type: size; }
.mwf-shelf { position: absolute; z-index: 5; top: 2cqh; left: 50%; transform: translateX(-50%); display: flex; gap: 1.6cqw; padding: 1.2cqh 1.6cqw 1.6cqh; border-radius: 22px; background: rgba(255, 250, 240, .92); border-bottom: 8px solid #a16207; box-shadow: 0 4px 10px rgba(0, 0, 0, .12); }
.mwf-shelf:empty { display: none; }
.mwf-slot { display: grid; place-items: center; width: min(19cqh, 11cqw); aspect-ratio: 1; border-radius: 18px; border: 3px dashed #e7c590; background: rgba(255, 255, 255, .6); transition: transform .3s, box-shadow .3s; }
.mwf-slot.got { border-style: solid; border-color: #fbbf24; background: #fff; }
.mwf-slot.glow { transform: scale(1.12); border-color: #22c55e; box-shadow: 0 0 0 5px #bbf7d0; animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1); }
.mwf-actor { position: absolute; z-index: 6; left: 50%; top: 44%; width: min(44cqh, 30cqw); aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; }
.mwf-actor img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .15)); }
.mwf-actor.e-grow { width: min(60cqh, 44cqw); }
.mwf-actor.in-slot { position: static; translate: none; width: 100%; height: 100%; }
.mwf-big { position: absolute; z-index: 9; left: 0; right: 0; bottom: 14cqh; display: flex; flex-direction: column; align-items: center; gap: 2cqh; pointer-events: none; }
.mwf-big > * { pointer-events: auto; }
.mwf-big.in { animation: popIn .45s both; }
.mwf-title { display: flex; flex-direction: column; align-items: center; padding: 1cqh 4cqw 2cqh; border-radius: 30px; background: #fffaf0; border: 6px solid #fbbf24; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); margin-bottom: 14cqh; }
.mwf-title small { font-weight: 900; color: #b45309; font-size: clamp(16px, 3.6cqh, 26px); }
.mwf-title b { font-family: var(--kai); font-size: min(34cqh, 24cqw); line-height: 1; color: #c2410c; }
.mwf-ph { display: flex; gap: .1em; padding: .1em .5em; border-radius: 26px; background: #fffdf6; border: 5px solid #f6c453; box-shadow: 0 6px 0 rgba(120, 80, 20, .15); font-family: var(--kai); font-weight: 700; font-size: clamp(38px, 12cqh, 104px); line-height: 1.15; color: #3b2a1e; }
.mwf-ph i { font-style: normal; }
.mwf-ph .mw { color: #e8603f; animation: stkBump .6s .2s; }
.mwf-ph .gap { color: #f59e0b; border-bottom: 6px solid #f59e0b; min-width: 1em; text-align: center; }
.mwf-rule { max-width: 82cqw; padding: .25em .8em; border-radius: 26px; background: #f0fdf4; border: 5px solid #22c55e; font-family: var(--kai); font-weight: 700; font-size: clamp(26px, 7.5cqh, 64px); color: #14532d; text-align: center; }
.mwf-rule b { color: #e8603f; }
.mwf-qbtns { display: flex; gap: 3cqw; }
.mwf-qb { width: min(19cqh, 13cqw); aspect-ratio: 1; border-radius: 24px; border: 5px solid #93c5fd; background: #fffdf6; box-shadow: 0 6px 0 #bfdbfe; font-family: var(--kai); font-weight: 700; font-size: min(12cqh, 9cqw); color: #3b2a1e; cursor: pointer; animation: stPulse 1.6s ease-in-out infinite; }
.mwf-qb.no { animation: nope .45s; border-color: #fca5a5; }
.mwf-qb.ok { border-color: #22c55e; box-shadow: 0 0 0 7px #bbf7d0; animation: none; }
.mwf-cap { position: absolute; z-index: 10; left: 50%; bottom: 2cqh; transform: translateX(-50%); max-width: 74cqw; padding: 1cqh 2.4cqw; border-radius: 99px; background: rgba(30, 20, 50, .72); color: #fff; font-family: var(--kai); font-weight: 700; font-size: clamp(17px, 4.6cqh, 34px); text-align: center; white-space: nowrap; }
.mwf-cap:has(span:empty) { display: none; }
.mwf-cap i { font-style: normal; opacity: .4; transition: opacity .15s, color .15s; }
.mwf-cap i.on { opacity: 1; color: #fde68a; }
.mwf-skip { position: absolute; z-index: 11; right: 1.6cqw; bottom: 2cqh; padding: 8px 18px; border-radius: 99px; border: 3px solid #fff; background: rgba(255, 255, 255, .85); color: #6d28d9; font-weight: 900; font-size: 16px; cursor: pointer; margin-right: 70px; }
.mwf-bub { position: absolute; z-index: 5; bottom: 30%; width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .9); background: rgba(186, 230, 253, .5); animation: ffBub 2.6s ease-out forwards; }
.mwf-gust { position: absolute; z-index: 5; left: -20%; width: 30%; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .9); animation: ffGust 1.6s ease-in forwards; }
.mwf-end { display: flex; flex-direction: column; align-items: center; gap: 1.4cqh; padding: 3cqh 5cqw; border-radius: 30px; background: #fffdf6; border: 6px solid #fbbf24; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); margin-bottom: 10cqh; }
.mwf-end b { font-family: var(--kai); font-size: clamp(40px, 14cqh, 110px); line-height: 1; color: #c2410c; letter-spacing: .1em; }
.mwf-end span { font-family: var(--kai); font-weight: 700; font-size: clamp(22px, 6cqh, 44px); color: #3b2a1e; }
.mwf-end .btn { font-size: 22px; min-width: 200px; }
/* 單獨播放 */
.ff-host { position: absolute; inset: 0; }
.ff-x { position: absolute; z-index: 30; right: 2vw; top: 2vh; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff; background: rgba(255, 255, 255, .9); color: #6d28d9; cursor: pointer; }
.ff-x .ic { width: 50%; height: 50%; }
@media (max-height: 520px) {
  .mwf-slot { width: min(24cqh, 9cqw); }
  .mwf-actor { top: 48%; width: min(48cqh, 22cqw); }
  .mwf-ph { font-size: 40px; }
  .mwf-rule { font-size: 24px; }
  .mwf-cap { font-size: 15px; }
  .mwf-skip { font-size: 13px; padding: 4px 12px; margin-right: 56px; }
  .mwf-title b { font-size: min(40cqh, 16cqw); }
  .mwf-end .btn { font-size: 17px; min-width: 150px; }
}
.mwf-actor.q { top: 36%; width: min(32cqh, 22cqw); }
@media (max-height: 520px) {
  .mwf-actor.q { top: 40%; width: min(34cqh, 16cqw); }
  .mwf-big { bottom: 13cqh; gap: 2cqh; }
  .mwf-ph { font-size: min(15cqh, 6cqw); }
  .mwf-qb { width: min(26cqh, 10cqw); font-size: min(17cqh, 6.5cqw); }
  .mwf-qbtns { gap: 4cqw; }
  .mwf-big:has(.mwf-qbtns) { flex-direction: row; gap: 4cqw; bottom: 16cqh; }
  .mwf-actor.q { left: 76%; top: 58%; width: min(36cqh, 14cqw); }
  .mwf-big:has(.mwf-qbtns) { padding-right: 22cqw; }
}

/* ───────────── 詞彙怪獸（js/grammar.js）───────────── */
.game .play:has(.gm) { zoom: 1 !important; }
.gm { position: relative; display: grid; place-items: center; padding: 2.5cqh 3cqw; background-color: #f5f0ff; --grow: 0; }
.gm-feed { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; gap: 3cqh 4cqw; width: 100%; height: 100%; align-items: center; }
.gm-card { position: relative; justify-self: end; display: flex; flex-direction: column; align-items: center; gap: 1.6cqh; padding: 2.4cqh 3cqw; border-radius: 28px; background: rgba(255, 253, 246, .97); border: 5px solid #c4b5fd; box-shadow: 0 5px 0 rgba(109, 40, 217, .15); min-width: 40cqw; }
.gm-one img { width: min(30cqh, 20cqw); height: min(30cqh, 20cqw); object-fit: contain; }
.gm-many { display: flex; gap: 1cqw; }
.gm-many img { width: min(20cqh, 12cqw); height: min(20cqh, 12cqw); object-fit: contain; }
.gm-many.n4 img { width: min(15cqh, 9cqw); height: min(15cqh, 9cqw); }
.gm-word { font: 900 clamp(30px, min(9cqh, 6cqw), 64px) / 1 "Nunito", "Segoe UI", sans-serif; color: #7c3aed; }
.gm-sent { font: 900 clamp(26px, min(7.5cqh, 4.6cqw), 54px) / 1.2 "Nunito", "Segoe UI", sans-serif; color: #3b2a50; text-align: center; }
.gm-gap { display: inline-block; min-width: 2.2em; text-decoration: none; border-bottom: 5px solid #f59e0b; color: #f59e0b; text-align: center; }
.gm-gap.filled { color: #16a34a; border-color: #16a34a; animation: stkBump .5s; min-width: 0; padding: 0 .1em; }
.gm-hear { position: absolute; right: -16px; top: -16px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff; background: #8b5cf6; color: #fff; cursor: pointer; box-shadow: 0 3px 0 #6d28d9; }
.gm-hear .ic { width: 55%; height: 55%; fill: currentColor; }
/* 怪獸 */
.gm-mon { position: relative; display: flex; flex-direction: column; align-items: center; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); transform: scale(calc(1 + var(--grow) * .045)); transform-origin: bottom center; filter: hue-rotate(var(--hue)); }
.gm-body { position: relative; display: block; width: min(40cqh, 26cqw); aspect-ratio: 1; }
.gm-body img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(60, 20, 100, .2)); }
.gm-body .yum { opacity: 0; }
.gm-mon.eater { animation: stBob 2.4s ease-in-out infinite; }
.gm-mon.chomp .open { animation: gmOpen .7s steps(1); } .gm-mon.chomp .yum { animation: gmYum .7s steps(1); }
@keyframes gmOpen { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes gmYum { 0% { opacity: 1; } 100% { opacity: 0; } }
.gm-mon.chomp .gm-body { animation: gmChew .7s ease-in-out; }
@keyframes gmChew { 25% { transform: scale(1.12, .9); } 50% { transform: scale(.94, 1.06); } 75% { transform: scale(1.06, .95); } }
.gm-mon.happy .gm-body { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 2; }
.gm-mon.happy .open { opacity: 0; } .gm-mon.happy .yum { opacity: 1; }
.gm-mon.yuck .gm-body { animation: nope .5s; }
.gm-yuck { position: absolute; top: -6%; right: -10%; padding: 4px 14px; border-radius: 16px; background: #fff; border: 3px solid #f87171; color: #dc2626; font: 900 22px "Nunito", sans-serif; white-space: nowrap; animation: popIn .3s both; filter: hue-rotate(calc(var(--hue) * -1)); }
.gm-opts { grid-column: 1 / 3; display: flex; justify-content: center; gap: 2.4cqw; }
.gm-o { min-width: min(22cqh, 15cqw); padding: 1.8cqh 2.6cqw; border-radius: 22px; background: #fffdf6; border: 5px solid hsl(var(--h) 85% 70%); box-shadow: 0 5px 0 hsl(var(--h) 60% 80%); font: 900 clamp(24px, min(7cqh, 4.4cqw), 50px) / 1 "Nunito", "Segoe UI", sans-serif; color: #3b2a50; cursor: pointer; transition: transform .15s; }
.gm-o:active { transform: scale(.94); }
.gm-o.used { visibility: hidden; }
.gm-o.no { opacity: .4; filter: grayscale(.7); }
.gm-o.fly { display: inline-block; font-size: 32px; }
.gm-fly { position: fixed; z-index: 90; pointer-events: none; }
.gm-fly img { width: 110px; height: 110px; object-fit: contain; }
.gm-combo { position: absolute; z-index: 3; left: 3cqw; top: 2cqh; display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 99px; background: linear-gradient(#fb923c, #ef4444); color: #fff; font: 900 20px "Nunito", sans-serif; box-shadow: 0 4px 0 #b91c1c; animation: stPulse 1.2s ease-in-out infinite; }
.gm-combo .ic { width: 20px; height: 20px; }
.gm-timer { position: absolute; top: 1.5cqh; left: 50%; transform: translateX(-50%); width: min(60%, 560px); height: 14px; border-radius: 99px; background: rgba(255, 255, 255, .85); border: 3px solid #fff; overflow: hidden; z-index: 3; }
.gm-timer i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #22c55e, #facc15, #f97316); }
/* 介詞場景 */
.gm-scene { position: relative; display: block; width: min(38cqh, 26cqw); aspect-ratio: 1.2; }
.gm-hd { position: absolute; left: 20%; bottom: 0; width: 60%; aspect-ratio: 1; }
.gm-hd img, .gm-pet img { width: 100%; height: 100%; object-fit: contain; }
.gm-pet { position: absolute; width: 30%; aspect-ratio: 1; }
.p-in .gm-pet { left: 35%; bottom: 14%; width: 30%; clip-path: inset(0 0 22% 0); }
.p-on .gm-pet { left: 35%; bottom: 52%; }
.p-under .gm-pet { left: 38%; bottom: -2%; width: 24%; z-index: -1; }
.p-under .gm-hd { bottom: 12%; }
.p-next-to .gm-pet { left: 80%; bottom: 0; }
/* 分類 */
.gm-sort { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqh; width: 100%; height: 100%; }
.gm-cur { min-height: min(32cqh, 26cqw); display: grid; place-items: center; }
.gm-cur.in { animation: popIn .35s both; }
.gm-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 1.4cqh 2cqw; border-radius: 22px; background: rgba(255, 253, 246, .97); border: 4px solid #fde68a; box-shadow: 0 4px 0 rgba(120, 80, 20, .15); }
.gm-item img { width: min(22cqh, 15cqw); height: min(22cqh, 15cqw); object-fit: contain; }
.gm-item b { font: 900 clamp(22px, 5cqh, 36px) "Nunito", sans-serif; color: #3b2a50; }
.gm-mons { display: flex; gap: 4cqw; align-items: flex-end; }
.gm-mon.sorter { cursor: pointer; }
.gm-mon.sorter .gm-body { width: min(30cqh, 19cqw); }
.gm-sign { display: flex; align-items: center; gap: 6px; margin-top: -4px; padding: 4px 14px 4px 4px; border-radius: 99px; background: #fff; border: 3px solid #c4b5fd; filter: hue-rotate(calc(var(--hue) * -1)); }
.gm-sign img { width: 34px; height: 34px; object-fit: contain; }
.gm-sign span { font: 900 clamp(15px, 3.4cqh, 22px) "Nunito", sans-serif; color: #3b2a50; }
.gm-fed { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 6px 18px 6px 6px; border-radius: 99px; background: rgba(255, 255, 255, .92); border: 3px solid #c4b5fd; }
.gm-fed img { width: 54px; height: 54px; object-fit: contain; }
.gm-fed b { font: 900 26px "Nunito", sans-serif; color: #7c3aed; }
.gm-fed small { font-weight: 800; color: #6b5a8a; }
@media (max-height: 520px) {
  .gm.gm-wide { padding: 18cqh 2cqw 2cqh; }
  .gm-feed { grid-template-columns: auto 1fr auto; grid-template-rows: 1fr; gap: 2cqw; }
  .gm-card { grid-column: 1; justify-self: start; min-width: 0; padding: 1.6cqh 2cqw; gap: 1cqh; }
  .gm-opts { grid-column: 2; flex-direction: column; align-items: center; gap: 2cqh; }
  .gm-mon.eater { grid-column: 3; }
  .gm-one img { width: min(34cqh, 13cqw); height: min(34cqh, 13cqw); }
  .gm-many img { width: min(24cqh, 8cqw); height: min(24cqh, 8cqw); }
  .gm-sent { font-size: 24px; }
  .gm-word { font-size: 28px; }
  .gm-o { font-size: 24px; padding: 1.2cqh 2cqw; min-width: 120px; }
  .gm-body { width: min(54cqh, 18cqw); }
  .gm-scene { width: min(44cqh, 16cqw); }
  .gm-sort { flex-direction: row; gap: 3cqw; }
  .gm-mon.sorter .gm-body { width: min(46cqh, 14cqw); }
  .gm-item img { width: min(34cqh, 12cqw); height: min(34cqh, 12cqw); }
  .gm-combo { font-size: 15px; padding: 3px 10px; }
  .gm-fed img { width: 36px; height: 36px; } .gm-fed b { font-size: 18px; }
}
.gm-scene { width: min(46cqh, 32cqw); }
.gm-pet { width: 38%; z-index: 1; }
.p-in .gm-pet { left: 31%; bottom: 34%; width: 38%; clip-path: none; z-index: 0; }
.p-in .gm-hd { z-index: 2; left: 15%; width: 70%; }
.p-on .gm-pet { left: 31%; bottom: 50%; }
.p-under .gm-pet { left: 33%; bottom: 0; width: 34%; z-index: 0; }
.p-under .gm-hd { bottom: 6%; z-index: 1; }
.p-next-to .gm-hd { left: 0; }
.p-next-to .gm-pet { left: 62%; bottom: 0; }
@media (max-height: 520px) {
  .gm.gm-wide { padding-right: 70px; }
  .gm-scene { width: min(54cqh, 18cqw); }
  .gm-wide .gm-mons { padding-right: 40px; }
}
.p-in .gm-pet { z-index: 3; left: 30%; bottom: 26%; width: 40%; clip-path: inset(0 0 36% 0); }
.p-in .gm-hd { z-index: 1; }
.h-bed.p-on .gm-pet { bottom: 30%; }
.h-chair.p-on .gm-pet { bottom: 40%; }
.h-table.p-on .gm-pet { bottom: 46%; }
/* 選級頁：級數多（8–9 級）時收窄，全部放得下 */
.ap-map { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); width: min(1300px, calc(100vw - 24px)); }
.ap-stop { min-width: 0; }
.ap-medal { width: min(clamp(70px, 9vw, 120px), calc((100vw - 60px) / var(--n) * .72)); }
.ap-name { overflow-wrap: anywhere; }
@media (max-height: 520px) { .ap-medal { width: min(58px, calc((100vw - 40px) / var(--n) * .66)); } .ap-name { font-size: min(14px, calc((100vw - 40px) / var(--n) * .16)); } }
@media (max-height: 520px) {
  .gm-wide .gm-feed { align-items: end; padding-top: 8cqh; }
  .gm-wide .gm-card { align-self: end; }
}
@media (max-height: 520px) {
  .gm.gm-wide.m-feed { padding-top: 25cqh; padding-bottom: 3cqh; }
  .gm-wide .gm-feed { padding-top: 0; height: 100%; }
  .gm-wide .gm-opts { gap: 1.4cqh; align-self: center; }
  .gm-wide .gm-o { padding: .9cqh 2cqw; font-size: 22px; }
  .gm-wide .gm-card { max-height: 100%; }
}
@media (max-height: 520px) {
  .gm-wide .gm-feed { grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; gap: 1.6cqh 3cqw; }
  .gm-wide .gm-card { grid-column: 1; grid-row: 1; justify-self: end; flex-direction: row; gap: 2cqw; align-self: center; }
  .gm-wide .gm-mon.eater { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .gm-wide .gm-body { width: min(60cqh, 17cqw); }
  .gm-wide .gm-opts { grid-column: 1; grid-row: 2; flex-direction: row; justify-content: flex-end; gap: 1.6cqw; }
  .gm-wide .gm-o { min-width: 0; padding: 1cqh 2.2cqw; }
  .gm-wide .gm-one img { width: min(30cqh, 11cqw); height: min(30cqh, 11cqw); }
  .gm-wide .gm-many img { width: min(20cqh, 7cqw); height: min(20cqh, 7cqw); }
  .gm-wide .gm-scene { width: min(44cqh, 15cqw); }
}
@media (max-height: 520px) {
  .gm-wide .gm-one img { width: min(44cqh, 13cqw); height: min(44cqh, 13cqw); }
  .gm-wide .gm-many img { width: min(30cqh, 8cqw); height: min(30cqh, 8cqw); }
  .gm-wide .gm-scene { width: min(56cqh, 17cqw); }
  .gm-wide .gm-card { padding-right: 34px; }
}

/* 詞彙怪獸：時態 */
.gm-time { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px; border-radius: 99px; background: hsl(var(--c) 80% 92%); border: 3px solid hsl(var(--c) 70% 55%); color: hsl(var(--c) 70% 30%); font: 900 clamp(18px, 4.4cqh, 30px) "Nunito", sans-serif; }
.gm-time .ic { width: 1em; height: 1em; }
.gm-learn { display: grid; grid-template-rows: auto 1fr auto; gap: 2.4cqh; width: min(100%, 1040px); height: 100%; }
.gl-line { display: flex; align-items: center; justify-content: center; gap: 1cqw; }
.gl-st { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 99px; background: rgba(255, 255, 255, .85); border: 3px solid hsl(var(--c) 50% 80%); color: hsl(var(--c) 40% 45%); font: 900 clamp(16px, 3.8cqh, 26px) "Nunito", sans-serif; transition: transform .3s; opacity: .6; }
.gl-st .ic { width: 1.1em; height: 1.1em; }
.gl-st.on { opacity: 1; transform: scale(1.18); background: hsl(var(--c) 80% 92%); border-color: hsl(var(--c) 70% 50%); color: hsl(var(--c) 70% 28%); box-shadow: 0 4px 0 hsl(var(--c) 50% 75%); }
.gl-ar { width: 6cqw; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .9); position: relative; }
.gl-ar::after { content: ""; position: absolute; right: -2px; top: 50%; border: 8px solid transparent; border-left: 12px solid rgba(255, 255, 255, .9); transform: translateY(-50%); }
.gl-stage { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: 4cqw; align-items: center; padding: 3cqh 4cqw; border-radius: 30px; background: rgba(255, 253, 246, .97); border: 5px solid #c4b5fd; box-shadow: 0 5px 0 rgba(109, 40, 217, .15); }
.gl-pic { grid-row: 1 / 3; display: grid; place-items: center; width: min(40cqh, 26cqw); aspect-ratio: 1; }
.gl-pic img { width: 100%; height: 100%; object-fit: contain; }
.gl-pic.in { animation: popIn .45s both; }
.gl-sent { font: 900 clamp(28px, min(8.5cqh, 5cqw), 60px) / 1.25 "Nunito", "Segoe UI", sans-serif; color: #3b2a50; }
.gl-sent.in { animation: popIn .4s both; }
.gl-verb { white-space: nowrap; }
.gl-end { color: #e8603f; display: inline-block; animation: stkBump .7s .3s; text-decoration: underline wavy #fdba74; text-underline-offset: 6px; }
.gl-note { margin: 0; align-self: start; padding: 6px 16px; justify-self: start; border-radius: 14px; background: #fef3c7; color: #92400e; font: 800 clamp(16px, 3.6cqh, 26px) "Nunito", sans-serif; }
.gl-note:empty { display: none; }
.gl-nav { display: flex; justify-content: center; padding-right: 90px; }
.gl-nav .btn { font-size: 22px; animation: stPulse 1.6s ease-in-out infinite; }
/* 選級頁：兩行 */
.ap-map.two { row-gap: 3vh; }
.ap-map.two .ap-stop { transform: none; }
@media (max-height: 520px) {
  .gm-learn { gap: 1.4cqh; }
  .gm-wide .gm-learn { padding-top: 8cqh; }
  .gl-st { padding: 4px 12px; font-size: 14px; }
  .gl-stage { padding: 1.6cqh 2.4cqw; }
  .gl-pic { width: min(46cqh, 16cqw); }
  .gl-sent { font-size: 28px; }
  .gl-note { font-size: 15px; }
  .gl-nav { padding-right: 70px; }
  .gl-nav .btn { font-size: 16px; padding: 6px 14px; }
  .gm-time { font-size: 14px; padding: 3px 10px; }
  .ap-map.two { row-gap: 1.4vh; }
  .ap-map.two .ap-tip { display: none; }
}
.gl-sent { font-size: clamp(30px, min(5vw, 7vh), 62px); }
.gl-obj { color: #6b5a8a; }
.gl-pic { width: min(34vh, 24vw); }
@media (max-height: 520px) {
  .gm-wide.m-learn { padding-top: 24cqh; }
  .gl-sent { font-size: clamp(20px, 3.4vw, 30px); }
  .gl-pic { width: min(36vh, 14vw); }
  .ap-map.two { row-gap: 1vh; padding: 0; }
  .ap-map.two .ap-medal { width: min(40px, 6vw); border-width: 3px; }
  .ap-map.two .ap-stop { padding: 5px 3px; gap: 2px; }
  .ap-map.two .ap-name { font-size: 11px; }
  .ap-map.two .ap-stars .ic, .ap-map.two .stars i { font-size: 11px; }
  .ap-map.two .ap-num { width: 20px; height: 20px; font-size: 11px; }
  .ap-screen:has(.ap-map.two) .ap-head { display: none; }
}

/* ───────────── 看圖說故事（js/picstory.js）───────────── */
.game .play:has(.ps) { zoom: 1 !important; }
.ps { --kai: "Kaiti TC", "BiauKai", "DFKai-SB", "標楷體", "KaiTi", "STKaiti", "Noto Serif TC", serif; display: grid; place-items: center; padding: 2.5cqh 3cqw; background-color: #fdf0f4; }
.ps-pn { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #fff; border: 5px solid #fff; box-shadow: 0 5px 14px rgba(80, 30, 60, .2); }
.ps-pn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-ph { display: grid; place-items: center; width: 100%; height: 100%; color: #f9a8d4; } .ps-ph .ic { width: 40%; height: 40%; }
.ps-lab { position: absolute; left: 8px; top: 8px; padding: 3px 14px; border-radius: 99px; background: #db2777; color: #fff; font-family: var(--kai); font-weight: 700; font-size: clamp(16px, 3.4cqh, 26px); box-shadow: 0 2px 0 #9d174d; }
/* 排次序 */
.ps-order { display: flex; flex-direction: column; gap: 4cqh; width: 100%; align-items: center; }
.ps-slots, .ps-deck { display: flex; gap: 2cqw; justify-content: center; }
.ps-slot { position: relative; width: min(22cqw, 32cqh); aspect-ratio: 4 / 3; border-radius: 18px; border: 4px dashed #f9a8d4; background: rgba(255, 255, 255, .7); }
.ps-slot .ps-pn { position: absolute; inset: -4px; border-radius: 18px; }
.ps-slot .ps-lab { z-index: 2; }
.ps-slot.got { border-style: solid; border-color: #22c55e; animation: stkBump .45s; }
.ps-card { padding: 0; border: 0; background: none; cursor: pointer; width: min(22cqw, 32cqh); transition: transform .15s; }
.ps-card:hover { transform: translateY(-4px) rotate(-1deg); }
.ps-card .ps-pn { width: 100%; }
.ps-card.used { visibility: hidden; }
.ps-fly { position: fixed; z-index: 90; pointer-events: none; }
/* 砌句子、感受 */
.ps-build { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3cqw; align-items: center; width: 100%; height: 100%; }
.ps-pn.big { width: 100%; }
.ps-right { display: flex; flex-direction: column; gap: 2.4cqh; align-items: stretch; }
.ps-sent { padding: 2cqh 2cqw; border-radius: 22px; background: rgba(255, 253, 246, .97); border: 4px solid #f9a8d4; font-family: var(--kai); font-weight: 700; font-size: clamp(24px, min(6.4cqh, 3.6cqw), 46px); line-height: 1.5; color: #3b2a1e; }
.ps-sent .c { color: #db2777; }
.ps-sent .w { padding: 0 .1em; border-radius: 8px; animation: stkBump .45s; }
.ps-sent .w.who, .ps-chip.who, .ps-q.who { --k: 210; } .ps-sent .w.where, .ps-chip.where, .ps-q.where { --k: 140; } .ps-sent .w.what, .ps-chip.what, .ps-q.what { --k: 30; }
.ps-sent .w { background: hsl(var(--k) 90% 90%); color: hsl(var(--k) 70% 30%); }
.ps-sent .gap { display: inline-block; min-width: 1.6em; margin: 0 .1em; text-decoration: none; text-align: center; border-bottom: 5px solid hsl(var(--k, 40) 80% 55%); color: hsl(var(--k, 40) 80% 55%); }
.ps-sent .gap.who { --k: 210; } .ps-sent .gap.where { --k: 140; } .ps-sent .gap.what { --k: 30; }
.ps-sent.done { border-color: #22c55e; box-shadow: 0 0 0 6px #bbf7d0; }
.ps-ask { font-family: var(--kai); font-weight: 700; font-size: clamp(22px, min(5.4cqh, 3.2cqw), 40px); color: #3b2a50; }
.ps-q { display: inline-block; padding: 4px 18px; border-radius: 99px; background: hsl(var(--k) 90% 92%); color: hsl(var(--k) 70% 32%); border: 3px solid hsl(var(--k) 70% 65%); }
.ps-chips { display: flex; flex-direction: column; gap: 1.8cqh; }
.ps-chip { padding: 1.6cqh 2cqw; border-radius: 20px; background: #fffdf6; border: 4px solid hsl(var(--k, 330) 75% 70%); box-shadow: 0 4px 0 hsl(var(--k, 330) 60% 82%); font-family: var(--kai); font-weight: 700; font-size: clamp(22px, min(5.6cqh, 3.2cqw), 40px); color: #3b2a1e; cursor: pointer; text-align: left; }
.ps-chip:disabled { opacity: .4; filter: grayscale(.7); }
.ps-chip.ok { border-color: #22c55e; box-shadow: 0 0 0 5px #bbf7d0; }
.ps-chip.why { --k: 330; margin-top: 1.4cqh; }
.ps-faces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; }
.ps-face { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 1cqh .6cqw; border-radius: 20px; background: #fffdf6; border: 4px solid #fde68a; cursor: pointer; }
.ps-face img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.ps-face b { font-family: var(--kai); font-size: clamp(18px, 4cqh, 30px); color: #3b2a1e; }
.ps-face:disabled { opacity: .4; filter: grayscale(.7); }
.ps-face.ok { border-color: #22c55e; box-shadow: 0 0 0 5px #bbf7d0; }
/* 講故事 */
.ps-tell { display: flex; flex-direction: column; align-items: center; gap: 2.4cqh; width: 100%; }
.ps-strip { display: flex; gap: 1.6cqw; justify-content: center; }
.ps-strip .ps-pn { width: min(22cqw, 34cqh); transition: transform .3s, box-shadow .3s; opacity: .75; }
.ps-strip.n3 .ps-pn { width: min(28cqw, 40cqh); }
.ps-strip .ps-pn.now { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 6px #fbbf24, 0 10px 24px rgba(0, 0, 0, .25); }
.ps-line { min-height: 8cqh; max-width: 92%; padding: 1.4cqh 2.4cqw; border-radius: 22px; background: rgba(30, 20, 50, .75); color: #fff; font-family: var(--kai); font-weight: 700; font-size: clamp(22px, min(5.6cqh, 3.4cqw), 42px); text-align: center; }
.ps-line:empty { visibility: hidden; }
.ps-line i { font-style: normal; opacity: .4; } .ps-line i.on { opacity: 1; color: #fde68a; }
.ps-hints { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
.ps-hints span { color: #fde68a; } .ps-hints .h2 { color: #fff; }
.ps-you { display: flex; flex-direction: column; align-items: center; gap: 1.4cqh; }
.ps-turn { font-family: var(--kai); font-size: clamp(20px, 4.4cqh, 32px); color: #9d174d; background: rgba(255, 255, 255, .9); padding: 4px 18px; border-radius: 16px; }
.ps-btns { display: flex; gap: 16px; align-items: center; }
.ps-rec { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 99px; border: 3px solid #fff; background: #ef4444; color: #fff; font-weight: 900; font-size: 20px; cursor: pointer; box-shadow: 0 4px 0 #b91c1c; }
.ps-rec .ic { width: 24px; height: 24px; } .ps-rec.on { animation: stPulse 1s ease-in-out infinite; }
.ps-done { font-size: 22px; }
@media (max-height: 520px) {
  .ps.ps-wide { padding: 18cqh 2cqw 2cqh; }
  .ps-order { gap: 2.4cqh; }
  .ps-slot, .ps-card { width: min(19cqw, 34cqh); }
  .ps-lab { font-size: 13px; padding: 1px 8px; left: 4px; top: 4px; }
  .ps-build { gap: 2cqw; }
  .ps-pn.big { max-height: 100%; width: auto; height: 100%; justify-self: center; }
  .ps-sent { font-size: 20px; padding: 1.2cqh 1.6cqw; }
  .ps-ask { font-size: 18px; }
  .ps-chip { font-size: 18px; padding: 1cqh 1.4cqw; }
  .ps-chips { gap: 1cqh; flex-direction: row; flex-wrap: wrap; }
  .ps-right { gap: 1.4cqh; }
  .ps-face b { font-size: 14px; }
  .ps-strip .ps-pn { width: min(19cqw, 36cqh); }
  .ps-strip.n3 .ps-pn { width: min(24cqw, 40cqh); }
  .ps-line { font-size: 17px; min-height: 0; }
  .ps-turn { font-size: 15px; }
  .ps-rec { font-size: 15px; padding: 6px 14px; } .ps-done { font-size: 15px; }
}
.ps-build { grid-template-rows: 100%; }
.ps-pn.big { max-height: 100%; }
@media (max-height: 520px) {
  .ps-wide .ps-build { height: 100%; }
  .ps-wide .ps-pn.big { height: 100%; width: auto; max-width: 100%; }
  .ps-wide .ps-slot, .ps-wide .ps-card { width: min(21cqw, 40cqh); }
  .ps-wide .ps-strip .ps-pn { width: min(20cqw, 40cqh); }
  .ps-wide .ps-strip.n3 .ps-pn { width: min(25cqw, 46cqh); }
}
@media (max-height: 520px) {
  .ps-wide .ps-pn.big { height: 74cqh; width: auto; aspect-ratio: 4 / 3; }
  .ps-wide .ps-build { grid-template-columns: auto 1fr; padding-right: 64px; align-items: center; }
  .ps-wide .ps-face img { width: min(20cqh, 7cqw); }
  .ps-wide .ps-face { padding: .6cqh .4cqw; }
  .ps-wide .ps-faces { gap: .8cqw; }
}
/* 排次序：圖畫按數量放大，填滿畫面 */
.ps-order { gap: 3cqh; height: 100%; justify-content: center; }
.ps-order .ps-slot, .ps-order .ps-card { width: min(calc((94cqw - (var(--n) - 1) * 2cqw) / var(--n)), 40cqh * 4 / 3); }
.ps-order .ps-lab { font-size: clamp(18px, 4cqh, 30px); }
@media (max-height: 520px) {
  .ps-wide .ps-order .ps-slot, .ps-wide .ps-order .ps-card { width: min(calc((90cqw - (var(--n) - 1) * 2cqw) / var(--n)), 36cqh * 4 / 3); }
  .ps-wide .ps-order { gap: 2cqh; }
}

/* 看圖說故事：答案的「聽」按鈕、詳細描述 */
.ps-chip { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ps-say { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #8b5cf6; color: #fff; cursor: pointer; }
.ps-say .ic { width: 55%; height: 55%; fill: currentColor; }
.ps-face { position: relative; }
.ps-face .ps-say { position: absolute; right: -8px; top: -8px; width: 32px; height: 32px; border: 2px solid #fff; }
.m-build .ps-sent { line-height: 1.6; }
@media (max-height: 520px) { .ps-say { width: 28px; height: 28px; } .ps-face .ps-say { width: 22px; height: 22px; right: -5px; top: -5px; } }

/* 英文看圖說故事：英文字體 */
.ps.en .ps-sent, .ps.en .ps-chip, .ps.en .ps-ask, .ps.en .ps-q, .ps.en .ps-lab, .ps.en .ps-face b, .ps.en .ps-line, .ps.en .ps-turn { font-family: "Nunito", "Segoe UI", sans-serif; font-weight: 800; }
.ps.en .ps-sent { font-size: clamp(22px, min(5.4cqh, 3.1cqw), 40px); line-height: 1.45; }
.ps.en .ps-chip { font-size: clamp(19px, min(4.6cqh, 2.7cqw), 34px); }
.ps.en .ps-line { font-size: clamp(19px, min(4.8cqh, 2.9cqw), 36px); }
.ps.en .ps-sent .gap { min-width: 2.4em; }
@media (max-height: 520px) { .ps.en .ps-sent { font-size: 17px; } .ps.en .ps-chip { font-size: 15px; } .ps.en .ps-line { font-size: 15px; } }

/* ───────────── 開小店（新版，js/shop2.js）───────────── */
.game .play:has(.m2) { zoom: 1 !important; }
.m2 { display: flex; flex-direction: column; justify-content: center; gap: 2.4cqh; padding: 2cqh 3cqw; background-color: #fff6e6; font-family: "Nunito", "Segoe UI", sans-serif; }
.m2-top { display: flex; align-items: center; justify-content: center; gap: 2cqw; }
.m2-item { position: relative; display: grid; place-items: center; width: min(22cqh, 15cqw); aspect-ratio: 1; padding: 6%; border-radius: 24px; background: rgba(255, 253, 246, .97); border: 4px solid #f6c453; box-shadow: 0 4px 0 rgba(120, 80, 20, .15); }
.m2-item.big { width: min(26cqh, 18cqw); }
.m2-item img { width: 100%; height: 100%; object-fit: contain; }
.m2-price { position: absolute; right: -14px; bottom: -12px; padding: 4px 12px; border-radius: 14px; background: #ef4444; color: #fff; font-size: clamp(20px, 4.6cqh, 34px); font-weight: 900; border: 3px solid #fff; box-shadow: 0 3px 0 #b91c1c; transform: rotate(-6deg); }
.m2-op { font-weight: 900; font-size: clamp(18px, 4cqh, 30px); color: #6b4f2a; }
.m2-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 99px; background: #fef3c7; color: #92400e; font-weight: 900; font-size: clamp(16px, 3.4cqh, 24px); border: 3px solid #fcd34d; }
.m2-badge .ic { width: 1em; height: 1em; }
.m2-way { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px dashed #f59e0b; font-style: normal; }
.m2-way.got { background: #22c55e; border: 3px solid #22c55e; color: #fff; } .m2-way .ic { width: 70%; height: 70%; }
/* 錢 */
.m2-btn, .m2-in { padding: 0; border: 0; background: none; cursor: pointer; transition: transform .12s; }
.m2-btn:active, .m2-in:active { transform: scale(.9); }
.m2 .m2c, .m2 .m2n { display: inline-grid; place-items: center; font-weight: 900; color: #3b2a1e; }
.m2 .m2c { width: var(--cs, min(12cqh, 8cqw)); aspect-ratio: 1; border-radius: 50%; border: 4px solid rgba(0, 0, 0, .12); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .1), 0 3px 0 rgba(0, 0, 0, .15); font-size: calc(var(--cs, min(12cqh, 8cqw)) * .42); }
.m2 .m2c.k1 { --cs: min(10cqh, 6.6cqw); background: #e5e7eb; }
.m2 .m2c.k2 { --cs: min(11cqh, 7.2cqw); background: #bae6fd; }
.m2 .m2c.k5 { --cs: min(12.5cqh, 8.2cqw); background: #c7d2fe; }
.m2 .m2c.k10 { --cs: min(13.5cqh, 9cqw); background: #fcd34d; color: #78350f; }
.m2 .m2n { width: min(22cqh, 15cqw); aspect-ratio: 2; border-radius: 10px; background: repeating-linear-gradient(45deg, #86efac 0 8px, #bbf7d0 8px 16px); border: 4px solid #16a34a; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); color: #14532d; font-size: min(6cqh, 4cqw); }
.m2 .m2n b { background: rgba(255, 255, 255, .85); padding: 0 8px; border-radius: 8px; }
.m2 .sm { --cs: min(7cqh, 4.6cqw) !important; border-width: 2px; }
.m2 .m2n.sm { width: min(12cqh, 8cqw); font-size: 14px; border-width: 2px; }
.m2 .m2n.big { width: min(20cqh, 14cqw); }
/* 付錢區 */
.m2-mid { display: grid; grid-template-columns: 1fr auto; gap: 2cqw; align-items: center; padding: 1.6cqh 2cqw; border-radius: 26px; background: rgba(255, 253, 246, .93); border: 4px solid #fde68a; }
.m2-tray { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: min(14cqh, 10cqw); }
.m2-hint { color: #a8946f; font-weight: 800; font-size: clamp(16px, 3.4cqh, 24px); }
.m2-sum { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.m2-total { font-size: clamp(30px, 8cqh, 60px); font-weight: 900; color: #3b2a50; line-height: 1; }
.m2-total.hit { color: #16a34a; } .m2-total.over { color: #dc2626; }
.m2-bar { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 12px; background: #7c5a35; }
.m2-row { display: flex; gap: 3px; }
.m2-bar i { width: min(3.4cqh, 2.3cqw); aspect-ratio: 1; border-radius: 50%; background: #e7d3b3; transition: background .15s, transform .15s; }
.m2-bar i.gap5 { margin-right: 6px; }
.m2-bar i.on { background: #ef4444; transform: scale(1.08); }
.m2-row:nth-child(1) i:nth-child(n+6).on, .m2-row:nth-child(2) i:nth-child(n+6).on { background: #3b82f6; }
.m2-bar i.paid { background: #9ca3af; }
.m2-bar i.over { background: #111827; }
.m2-bot { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.m2-coins { display: flex; align-items: center; gap: 1.6cqw; padding: 1cqh 1.6cqw; border-radius: 22px; background: rgba(255, 255, 255, .75); }
.m2-acts { display: flex; align-items: center; gap: 12px; padding-right: 70px; }
.m2-ok { font-size: 22px; }
/* 錢包 */
.m2-purses { display: flex; justify-content: center; gap: 3cqw; }
.m2-purse { display: flex; flex-direction: column; align-items: center; gap: 1cqh; width: min(30cqw, 40cqh); padding: 1.4cqh 1cqw; border-radius: 26px; background: rgba(255, 253, 246, .97); border: 4px solid #f9a8d4; box-shadow: 0 4px 0 #fbcfe8; cursor: pointer; }
.m2-pimg { width: min(14cqh, 9cqw); } .m2-pimg img { width: 100%; height: auto; }
.m2-pc { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: min(16cqh, 10cqw); align-items: center; }
.m2-purse.ok { border-color: #22c55e; box-shadow: 0 0 0 6px #bbf7d0; }
.m2-purse.no { opacity: .45; filter: grayscale(.6); }
/* 剛好用完 */
.m2-budget { display: inline-flex; align-items: center; gap: 8px; padding: 8px 22px; border-radius: 99px; background: #dcfce7; border: 4px solid #22c55e; color: #14532d; font-weight: 900; font-size: clamp(20px, 5cqh, 36px); }
.m2-budget .ic { width: 1em; height: 1em; } .m2-budget b { color: #15803d; }
.m2-pick { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: clamp(22px, 5.4cqh, 40px); color: #3b2a50; background: rgba(255, 255, 255, .9); padding: 6px 18px; border-radius: 18px; }
.m2-pick i { display: inline-grid; place-items: center; min-width: 2.4em; height: 1.4em; border-radius: 10px; border: 3px dashed #f59e0b; font-style: normal; color: #b45309; }
.m2-shelf { display: flex; justify-content: center; gap: 2.6cqw; padding: 2cqh 2cqw 3cqh; border-bottom: 10px solid #a16207; }
.m2-sh { padding: 0; border: 0; background: none; cursor: pointer; transition: transform .15s; }
.m2-sh.sel { transform: translateY(-10px); } .m2-sh.sel .m2-item { border-color: #22c55e; box-shadow: 0 0 0 6px #bbf7d0; }
@media (max-height: 520px) {
  .m2.m2-wide { padding: 18cqh 2cqw 2cqh; gap: 1.6cqh; }
  .m2-wide.m-pay { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 1.6cqh 2cqw; }
  .m2-wide.m-pay .m2-top { grid-row: 1 / 3; flex-direction: column; }
  .m2-item.big, .m2-item { width: min(30cqh, 13cqw); }
  .m2-price { font-size: 18px; padding: 2px 8px; right: -8px; bottom: -8px; }
  .m2-badge { font-size: 13px; padding: 3px 10px; }
  .m2-mid { padding: 1cqh 1.4cqw; }
  .m2-total { font-size: 30px; }
  .m2-bar i { width: min(4.6cqh, 1.8cqw); }
  .m2-acts { padding-right: 60px; } .m2-ok { font-size: 16px; padding: 6px 14px; }
  .m2-purse { width: min(28cqw, 56cqh); }
  .m2-budget { font-size: 18px; } .m2-pick { font-size: 20px; }
}
.m2-bar i { transition: none; }
.m2-item { display: flex; align-items: center; justify-content: center; }
.m2-item img { width: 100%; height: 100%; min-width: 0; flex: 1; }
@media (max-height: 520px) {
  .m2-wide.m-pay .m2-top { padding-top: 6cqh; }
  .m2-wide .m2-item, .m2-wide .m2-item.big { width: min(34cqh, 13cqw); }
  .m2-wide .m2c.k1 { --cs: min(14cqh, 5cqw); } .m2-wide .m2c.k2 { --cs: min(15cqh, 5.4cqw); } .m2-wide .m2c.k5 { --cs: min(16cqh, 5.8cqw); } .m2-wide .m2c.k10 { --cs: min(17cqh, 6.2cqw); }
  .m2-wide .m2-tray { min-height: min(18cqh, 7cqw); }
}
.m2-item.m2-lg { width: min(26cqh, 18cqw); }
.m2 .m2n.m2-lg { width: min(20cqh, 14cqw); }
.m2 .m2c { height: var(--cs, min(12cqh, 8cqw)); flex: none; }
@media (max-height: 520px) { .m2-wide .m2-item.m2-lg { width: min(34cqh, 13cqw); } }
.m2-pic { position: absolute; inset: 8%; background: center / contain no-repeat; }
@media (max-height: 520px) {
  .m2.m2-wide.m-pay { padding-top: 24cqh; }
  .m2-wide.m-pay .m2-top { padding-top: 0; gap: .6cqh; justify-content: flex-start; }
  .m2-wide.m-pay .m2-item, .m2-wide.m-pay .m2-item.m2-lg { width: min(26cqh, 10cqw); }
  .m2-wide .m2-op { font-size: 13px; }
  .m2-wide .m2-top .m2n.m2-lg { width: min(18cqh, 9cqw); }
  .m2-wide .m2c.k1 { --cs: min(17cqh, 6.4cqw); } .m2-wide .m2c.k2 { --cs: min(18cqh, 6.8cqw); } .m2-wide .m2c.k5 { --cs: min(19.5cqh, 7.3cqw); } .m2-wide .m2c.k10 { --cs: min(21cqh, 7.8cqw); }
  .m2-wide .m2-mid { padding: .6cqh 1.4cqw; }
}
@media (max-height: 520px) {
  .m2-wide .m2c.k1 { --cs: 44px; } .m2-wide .m2c.k2 { --cs: 48px; } .m2-wide .m2c.k5 { --cs: 52px; } .m2-wide .m2c.k10 { --cs: 56px; }
  .m2-wide .m2n { width: 84px; font-size: 20px; }
  .m2-wide .m2-pc .m2c { --cs: 30px !important; } .m2-wide .m2-pc .m2n { width: 56px; font-size: 13px; }
  .m2-wide.m-pay .m2-item, .m2-wide.m-pay .m2-item.m2-lg { width: 76px; }
  .m2-wide .m2-mid { min-height: 0; }
}

/* 開小店：$1–$10 硬幣（顏色和大小跟面值）、自選購物 */
.m2 .m2c { --cs: calc(var(--cb, min(10.5cqh, 6.8cqw)) * (.86 + var(--v, 1) * .03)); width: var(--cs); height: var(--cs); background: hsl(calc(var(--v, 1) * 36 + 10) 75% 80%); font-size: calc(var(--cs) * .44); }
.m2 .m2c[style*="--v:10"] { background: #fcd34d; color: #78350f; }
.m2-coins { flex-wrap: wrap; gap: 1cqw; }
.m2-shopbar { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.m2-shopbar .m2-budget img { width: 1.5em; height: 1.5em; object-fit: contain; }
.m2-tabs { display: flex; gap: 1.2cqw; }
.m2-tab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border-radius: 99px; border: 3px solid #fff; background: rgba(255, 255, 255, .85); cursor: pointer; font: 900 clamp(15px, 3.2cqh, 22px) "Nunito", sans-serif; color: #7c4a1e; }
.m2-tab img { width: 38px; height: 38px; object-fit: contain; }
.m2-tab.on { background: #f59e0b; color: #fff; box-shadow: 0 0 0 3px #fde047; }
.m2-browse { display: grid; grid-template-columns: 1fr minmax(0, 34%); gap: 2cqw; flex: 1; min-height: 0; }
.m2-shelf2 { display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 2cqh 1.6cqw; padding: 2cqh 1.6cqw; border-radius: 24px; background: rgba(255, 250, 240, .85); border-bottom: 10px solid #a16207; overflow-y: auto; }
.m2-shelf2 .m2-sh { position: relative; justify-self: center; }
.m2-shelf2 .m2-item { width: min(18cqh, 11cqw); }
.m2-say { position: absolute; left: -8px; top: -8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #8b5cf6; color: #fff; border: 2px solid #fff; }
.m2-say .ic { width: 55%; height: 55%; fill: currentColor; }
.m2-basket { display: flex; flex-direction: column; gap: 1.4cqh; padding: 1.6cqh 1.4cqw; border-radius: 24px; background: rgba(255, 253, 246, .96); border: 4px solid #fde68a; }
.m2-bh { display: flex; align-items: center; gap: 8px; font: 900 clamp(17px, 3.6cqh, 26px) "Nunito", sans-serif; color: #7c4a1e; }
.m2-bh img { width: 40px; height: 40px; object-fit: contain; }
.m2-bitems { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; min-height: 0; }
.m2-bi { position: relative; width: min(11cqh, 7cqw); aspect-ratio: 1; border-radius: 16px; border: 3px solid #fde68a; background: #fff; padding: 0; cursor: pointer; }
.m2-bi .m2-pic { inset: 10%; }
.m2-bi b { position: absolute; right: -6px; bottom: -6px; padding: 0 6px; border-radius: 8px; background: #ef4444; color: #fff; font-size: 14px; }
.m2-bsum { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.m2-bsum .m2-bar i { width: min(2.4cqh, 1.4cqw); }
.m2-go { font-size: 20px; }
.m2-go:disabled { opacity: .5; }
.m-trip .m2-top, .m-pay .m2-top { flex-wrap: wrap; }
.m-pay .m2-top .m2-item { width: min(18cqh, 11cqw); }
@media (max-height: 520px) {
  .m2-wide .m2c { --cb: 40px; }
  .m2-wide.m-trip { padding-top: 22cqh; }
  .m2-tab { padding: 3px 10px 3px 3px; font-size: 13px; } .m2-tab img { width: 26px; height: 26px; }
  .m2-shopbar .m2-budget { font-size: 15px; padding: 4px 12px; }
  .m2-shelf2 .m2-item { width: min(26cqh, 9cqw); }
  .m2-shelf2 { grid-template-columns: repeat(4, 1fr); padding: 1.4cqh 1cqw; }
  .m2-say { width: 24px; height: 24px; }
  .m2-bi { width: min(18cqh, 6cqw); }
  .m2-go { font-size: 15px; padding: 6px 12px; }
  .m2-basket { padding-right: 60px; }
  .m-pay .m2-top .m2-item { width: min(24cqh, 8cqw); }
}
.m2-op { padding: 2px 12px; border-radius: 12px; background: rgba(255, 253, 246, .92); }
@media (max-height: 520px) {
  .m2-wide .m2c { --cb: 34px; }
  .m2-wide .m2-coins { flex-wrap: nowrap; gap: 4px; padding: 6px 8px; }
  .m2-wide .m2n { width: 64px; font-size: 16px; }
  .m2-wide .m2-acts { gap: 6px; }
  .m2-wide .m2-browse { grid-template-columns: 1fr minmax(0, 30%); gap: 1.4cqw; }
  .m2-wide .m2-shelf2 { gap: 1cqh 1cqw; }
  .m2-wide .m2-shelf2 .m2-item { width: min(30cqh, 9.5cqw); }
  .m2-wide .m2-price { font-size: 14px; padding: 1px 6px; right: -6px; bottom: -6px; }
  .m2-wide .m2-basket { padding: 1cqh 1cqw; gap: .8cqh; padding-right: 1cqw; }
  .m2-wide .m2-bh { font-size: 14px; } .m2-wide .m2-bh img { width: 26px; height: 26px; }
  .m2-wide .m2-bsum .m2-total { font-size: 22px; }
  .m2-wide .m2-go { font-size: 14px; padding: 5px 10px; }
  .m2-wide.m-trip { padding-top: 20cqh; padding-right: 64px; }
  .m2-wide .m2-op { font-size: 12px; padding: 1px 6px; }
}

/* 開小店：走入小店 */
.m2.m-trip { padding: 0; gap: 0; }
.sw-street, .sw-in { position: absolute; inset: 0; }
.sw-street { background: #dff3ff center / cover no-repeat; transition: transform .7s ease-in, opacity .7s; transform-origin: 70% 60%; }
.sw-street.enter { transform: scale(2.4); opacity: 0; }
.sw-door { position: absolute; left: 62%; top: 42%; width: 18%; height: 46%; border: 0; background: none; cursor: pointer; display: grid; place-items: end center; padding-bottom: 6%; }
.sw-door span { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 99px; background: #22c55e; color: #fff; font: 900 clamp(18px, 4cqh, 28px) "Nunito", sans-serif; border: 4px solid #fff; box-shadow: 0 5px 0 #15803d; animation: stPulse 1.4s ease-in-out infinite; }
.sw-door .ic { width: 1em; height: 1em; }
.sw-kid { position: absolute; bottom: 6%; width: min(30cqh, 18cqw); z-index: 4; transition: left .9s ease-in-out; }
.sw-kid img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); }
.sw-kid.out { left: -20%; transition: left 2.2s ease-in-out; }
.sw-kid.out.arrive { left: 44%; animation: swBob .45s ease-in-out 5; }
.sw-kid.in { left: var(--x); bottom: 4%; width: min(26cqh, 15cqw); }
.sw-kid.walk img { animation: swBob .3s ease-in-out infinite; }
.sw-kid.left img { transform: scaleX(-1); }
@keyframes swBob { 50% { transform: translateY(-8px) rotate(2deg); } }
.sw-kid.left.walk img { animation: swBobL .3s ease-in-out infinite; }
@keyframes swBobL { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(-8px) rotate(-2deg); } }
.sw-bag { position: absolute; right: -6%; top: 40%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f59e0b; color: #fff; font: 900 20px "Nunito", sans-serif; border: 3px solid #fff; }
.sw-bag.pop { animation: stkBump .45s; }
.sw-hud { position: absolute; left: 3cqw; right: 3cqw; top: 2cqh; display: flex; justify-content: space-between; align-items: center; z-index: 5; padding-right: 0; }
.sw-hud .m2-budget img { width: 1.4em; height: 1.4em; object-fit: contain; }
.sw-tot { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 18px; background: rgba(255, 253, 246, .94); border: 3px solid #fde68a; }
.sw-tot .m2-total { font-size: clamp(24px, 6cqh, 44px); }
.sw-tot .m2-bar i { width: min(2.6cqh, 1.5cqw); }
.sw-floor { position: absolute; inset: 0; }
.sw-stall { position: absolute; left: var(--x); bottom: 26%; width: 16%; height: 44%; padding: 0; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: transform .15s; }
.sw-stall:active { transform: scale(.96); }
.sw-awn { width: 108%; height: 18%; border-radius: 14px 14px 30px 30px; background: repeating-linear-gradient(90deg, hsl(var(--h) 80% 65%) 0 18px, #fff 18px 36px); box-shadow: 0 4px 0 rgba(0, 0, 0, .1); }
.sw-sign { display: flex; align-items: center; gap: 4px; margin: -6% 0 0; padding: 3px 10px; border-radius: 12px; background: #fff; border: 3px solid hsl(var(--h) 70% 60%); z-index: 1; }
.sw-sign img { width: 28px; height: 28px; object-fit: contain; }
.sw-sign b { font: 900 clamp(13px, 3cqh, 20px) "Nunito", sans-serif; color: hsl(var(--h) 60% 35%); }
.sw-box { flex: 1; width: 92%; margin-top: 6%; display: flex; align-items: flex-end; justify-content: center; gap: 4%; padding: 0 4% 10%; border-radius: 10px; background: linear-gradient(transparent 55%, hsl(var(--h) 60% 85%) 55%); border-bottom: 10px solid #a16207; }
.sw-box img { width: 30%; height: auto; object-fit: contain; }
.sw-till { position: absolute; left: var(--x); bottom: 14%; width: 13%; height: 58%; padding: 0; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.sw-keeper { width: 100%; } .sw-keeper img { width: 100%; height: auto; }
.sw-counter { width: 120%; padding: 10px 4px; border-radius: 12px 12px 0 0; background: #b45309; border-top: 8px solid #f59e0b; margin-top: -18%; }
.sw-counter b { display: inline-flex; align-items: center; gap: 4px; color: #fff; font: 900 clamp(12px, 2.8cqh, 18px) "Nunito", sans-serif; }
.sw-counter .ic { width: 1em; height: 1em; }
.sw-till.ready .sw-counter { box-shadow: 0 0 0 5px #fde047; animation: stPulse 1.4s ease-in-out infinite; }
.sw-pop { position: absolute; z-index: 6; left: 6cqw; right: 20cqw; top: 13cqh; padding: 1.4cqh 1.6cqw 2cqh; border-radius: 24px; background: rgba(255, 253, 246, .98); border: 4px solid #fde68a; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.sw-pop.in { animation: popIn .35s both; }
.sw-pophead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1cqh; }
.sw-pophead b { display: flex; align-items: center; gap: 8px; font: 900 clamp(18px, 4cqh, 28px) "Nunito", sans-serif; color: #7c4a1e; }
.sw-pophead b img { width: 36px; height: 36px; object-fit: contain; }
.sw-close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #f3e8d3; color: #7c4a1e; cursor: pointer; display: grid; place-items: center; } .sw-close .ic { width: 55%; height: 55%; }
.sw-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqh 1.6cqw; justify-items: center; }
.sw-items .m2-item { width: min(17cqh, 10cqw); }
.sw-items .m2-sh { position: relative; }
@media (max-height: 520px) {
  .m2-wide.m-trip { padding: 0; }
  .sw-hud { top: 22cqh; left: 2cqw; right: 70px; }
  .sw-tot .m2-total { font-size: 20px; }
  .sw-stall { bottom: 20%; height: 40%; }
  .sw-sign img { width: 18px; height: 18px; } .sw-sign b { font-size: 11px; }
  .sw-kid.in { width: min(30cqh, 11cqw); }
  .sw-bag { width: 26px; height: 26px; font-size: 14px; }
  .sw-pop { top: 20cqh; left: 3cqw; right: 16cqw; padding: 1cqh 1.2cqw; }
  .sw-items { grid-template-columns: repeat(7, 1fr); gap: 1cqh 1cqw; }
  .sw-items .m2-item { width: min(26cqh, 8cqw); }
  .sw-pophead b { font-size: 15px; } .sw-close { width: 28px; height: 28px; }
  .sw-door span { font-size: 15px; padding: 6px 14px; }
}
.m2.m-trip.lifted, .m2.m-trip { background-image: none !important; }
.sw-street { border-radius: 28px; overflow: hidden; }
.sw-in::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 248, 235, .35), rgba(255, 240, 220, .55)); border-radius: 28px; }
.sw-stall .sw-box { background: linear-gradient(rgba(255, 255, 255, .9) 55%, hsl(var(--h) 60% 82%) 55%); box-shadow: 0 6px 14px rgba(0, 0, 0, .12); }
.sw-pop { left: 8cqw; right: 18cqw; top: 14cqh; padding: 2cqh 2cqw 3cqh; }
.sw-items .m2-item { width: min(22cqh, 12cqw); }
.sw-items { gap: 2.6cqh 2cqw; }
.sw-pophead b { font-size: clamp(22px, 4.6cqh, 32px); }
.sw-pophead b img { width: 46px; height: 46px; }
@media (max-height: 520px) { .sw-items .m2-item { width: min(28cqh, 9cqw); } .sw-pop { top: 18cqh; padding: 1cqh 1.4cqw; } .sw-pophead b { font-size: 15px; } .sw-pophead b img { width: 26px; height: 26px; } }
@media (max-height: 520px) {
  .sw-items { grid-template-columns: repeat(4, 1fr); gap: 1cqh 1.4cqw; }
  .sw-items .m2-item { width: min(20cqh, 8cqw); }
  .sw-pop { top: 14cqh; bottom: 4cqh; overflow-y: auto; left: 18cqw; right: 16cqw; }
}
@media (max-height: 520px) {
  .sw-pop { top: 12cqh; bottom: 3cqh; left: 14cqw; right: 14cqw; display: flex; flex-direction: column; }
  .sw-items { flex: 1; align-content: space-evenly; }
  .sw-items .m2-item { width: min(32cqh, 10cqw); }
  .sw-items .m2-price { font-size: 15px; padding: 1px 6px; }
}

/* 開小店：攤檔數量跟級數 */
.sw-floor .sw-stall { width: calc(68% / var(--n, 4)); }
.sw-floor[style*="--n:2"] .sw-stall { width: 22%; }
.sw-floor[style*="--n:3"] .sw-stall { width: 19%; }
.sw-floor[style*="--n:5"] .sw-sign b { font-size: clamp(11px, 2.4cqh, 17px); }
.sw-items { max-height: 62cqh; overflow-y: auto; }

/* 開小店：歡呼 */
.sw-kid.yay img { animation: swJump .6s cubic-bezier(.3, 1.6, .5, 1); }
.sw-kid.left.yay img { animation: swJumpL .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes swJump { 40% { transform: translateY(-34px) rotate(-6deg); } }
@keyframes swJumpL { 0%, 100% { transform: scaleX(-1); } 40% { transform: scaleX(-1) translateY(-34px) rotate(6deg); } }
.sw-yay { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; animation: swUp 1.5s ease-out forwards; }
.sw-yay img { width: 56px !important; height: 56px; object-fit: contain; }
.sw-yay b { padding: 2px 12px; border-radius: 99px; background: #fde047; color: #92400e; font: 900 20px "Nunito", sans-serif; border: 3px solid #fff; white-space: nowrap; }
@keyframes swUp { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -40px) scale(1); } }
.sw-got { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqh; background: rgba(255, 250, 235, .82); animation: fadeIn .3s both; }
.sw-got > b { font: 900 clamp(28px, 7cqh, 56px) "Nunito", sans-serif; color: #c2410c; text-shadow: 0 3px 0 #fff; animation: popIn .5s both; }
.sw-got span { display: flex; gap: 2cqw; }
.sw-got .m2-item { animation: npJump .7s cubic-bezier(.3, 1.6, .5, 1) infinite alternate; }
.sw-got .m2-item:nth-child(2) { animation-delay: .15s; } .sw-got .m2-item:nth-child(3) { animation-delay: .3s; } .sw-got .m2-item:nth-child(4) { animation-delay: .45s; }
.sw-kid.yay { z-index: 8; }
.sw-got { background: radial-gradient(circle, rgba(255, 251, 235, .95) 0 40%, rgba(255, 237, 213, .85)); }
.sw-got > b { padding: 10px 30px; border-radius: 26px; background: #fff; border: 5px solid #fbbf24; box-shadow: 0 6px 0 rgba(180, 83, 9, .25); }
.sw-got span .m2-item { width: min(22cqh, 15cqw); }

/* ───────────── 近義詞反義詞（js/wordpair.js）───────────── */
.game .play:has(.wp) { zoom: 1 !important; }
.wp { --kai: "Kaiti TC", "BiauKai", "DFKai-SB", "標楷體", "KaiTi", "STKaiti", "Noto Serif TC", serif; --wf: var(--kai); display: grid; place-items: center; padding: 2.5cqh 3cqw; background-color: #fdf2f8; }
.wp.en { --wf: "Nunito", "Segoe UI", sans-serif; }
.wp-fly { position: fixed; z-index: 90; pointer-events: none; display: flex; gap: 6px; --wf: "Kaiti TC", "KaiTi", serif; }
.wp-fly.en { --wf: "Nunito", sans-serif; }
.wp-w { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 1.2cqh 1.6cqw; border-radius: 22px; background: #fffdf6; border: 4px solid #f9a8d4; box-shadow: 0 4px 0 #fbcfe8; }
.wp-w b { font: 700 clamp(26px, min(7cqh, 4.6cqw), 54px) / 1.1 var(--wf); color: #3b2a1e; white-space: nowrap; }
.wp.en .wp-w b { font-weight: 900; }
.wp-w.big b { font-size: clamp(32px, min(9cqh, 6cqw), 70px); }
.wp-w.got { border-color: #22c55e; box-shadow: 0 0 0 5px #bbf7d0; animation: stkBump .5s; }
.wp-pic { display: block; width: min(18cqh, 12cqw); aspect-ratio: 1; background: center / contain no-repeat; }
.wp-say { position: absolute; right: -10px; top: -10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #8b5cf6; color: #fff; border: 2px solid #fff; cursor: pointer; }
.wp-say .ic { width: 55%; height: 55%; fill: currentColor; }
.wp-q { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqh; width: 100%; height: 100%; }
.wp-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4cqw; }
.wp-o { position: relative; min-width: min(22cqh, 15cqw); padding: 2cqh 2.6cqw; border-radius: 22px; background: #fffdf6; border: 5px solid hsl(var(--h) 85% 70%); box-shadow: 0 5px 0 hsl(var(--h) 60% 82%); cursor: pointer; transition: transform .15s; }
.wp-o b { font: 700 clamp(26px, min(7cqh, 4.4cqw), 52px) / 1 var(--wf); color: #3b2a1e; }
.wp.en .wp-o b { font-weight: 900; }
.wp-o:active { transform: scale(.95); }
.wp-o.ok { border-color: #22c55e; box-shadow: 0 0 0 6px #bbf7d0; }
.wp-o.no { opacity: .4; filter: grayscale(.7); }
.wp-slot { display: grid; place-items: center; min-width: min(20cqh, 14cqw); min-height: min(14cqh, 10cqw); border-radius: 22px; border: 4px dashed #f9a8d4; background: rgba(255, 255, 255, .8); color: #f472b6; font: 900 clamp(30px, 7cqh, 54px) "Nunito", sans-serif; animation: stPulse 1.4s ease-in-out infinite; }
/* 蹺蹺板 */
.wp-saw { position: relative; width: min(84%, 900px); height: min(40cqh, 30cqw); }
.wp-plank { position: absolute; left: 0; right: 0; bottom: 30%; height: 12px; border-radius: 8px; background: #b45309; box-shadow: 0 4px 0 #78350f; transition: transform .9s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 50% 50%; }
.wp-saw.tilt .wp-plank { transform: rotate(-8deg); }
.wp-saw.even .wp-plank { transform: rotate(0); }
.wp-end { position: absolute; bottom: 10px; display: flex; justify-content: center; }
.wp-end.l { left: 2%; } .wp-end.r { right: 2%; }
.wp-saw.even .wp-end .wp-w { animation: npJump .6s .5s cubic-bezier(.3, 1.6, .5, 1) 2; }
.wp-pivot { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 0; height: 0; border-left: 36px solid transparent; border-right: 36px solid transparent; border-bottom: calc(30% + 2px) solid #f59e0b; }
.wp-saw .wp-pivot { border-bottom-width: min(12cqh, 9cqw); }
.wp-saw .wp-plank { bottom: min(12cqh, 9cqw); }
/* 好朋友 */
.wp-pair { display: flex; align-items: center; gap: 4cqw; }
.wp-buddy { position: relative; display: flex; flex-direction: column; align-items: center; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.wp-face { font-style: normal; font-weight: 900; color: #db2777; font-size: 22px; }
.wp-heart { width: min(10cqh, 7cqw); color: #f43f5e; opacity: .25; transition: opacity .3s, transform .3s; }
.wp-heart .ic { width: 100%; height: 100%; fill: currentColor; }
.wp-pair.hug .wp-buddy.l { transform: translateX(2cqw) rotate(6deg); }
.wp-pair.hug .wp-buddy.r { transform: translateX(-2cqw) rotate(-6deg); }
.wp-pair.hug .wp-heart { opacity: 1; transform: scale(1.4); animation: stPulse .8s ease-in-out infinite; }
/* 句子 */
.wp-sentc { position: relative; display: flex; align-items: center; gap: 2cqw; padding: 2.4cqh 3cqw; border-radius: 26px; background: rgba(255, 253, 246, .97); border: 4px solid #f9a8d4; max-width: 92%; }
.wp-sent { margin: 0; font: 700 clamp(26px, min(7cqh, 4.2cqw), 52px) / 1.4 var(--wf); color: #3b2a1e; }
.wp.en .wp-sent { font-weight: 800; }
.wp-sentc .wp-say { position: absolute; }
.wp-gap { display: inline-block; min-width: 1.6em; padding: 0 .15em; text-decoration: none; text-align: center; border-bottom: 5px solid #f59e0b; color: #f59e0b; }
.wp-gap.swap { color: #db2777; border-bottom-color: #db2777; background: #fce7f3; border-radius: 8px; }
.wp-gap.filled { color: #16a34a; border-color: #16a34a; background: #dcfce7; animation: stkBump .5s; }
/* 連一連 */
.wp-match { display: grid; grid-template-columns: auto auto auto; gap: 4cqw; align-items: center; }
.wp-col { display: flex; flex-direction: column; gap: 2cqh; }
.wp-mid { font: 900 clamp(30px, 8cqh, 60px) "Nunito", sans-serif; color: #db2777; font-style: normal; }
.wp-m { position: relative; min-width: min(26cqh, 18cqw); padding: 1.6cqh 2cqw; border-radius: 20px; background: #fffdf6; border: 4px solid #c4b5fd; box-shadow: 0 4px 0 #ddd6fe; cursor: pointer; }
.wp-m b { font: 700 clamp(24px, min(6cqh, 4cqw), 46px) / 1 var(--wf); color: #3b2a1e; }
.wp-m.sel { border-color: #f59e0b; box-shadow: 0 0 0 5px #fde68a; transform: scale(1.05); }
.wp-m.got { border-color: hsl(var(--gh) 70% 50%); background: hsl(var(--gh) 90% 92%); box-shadow: 0 0 0 4px hsl(var(--gh) 80% 80%); pointer-events: none; }
.wp-m.no { animation: nope .45s; }
/* 門 */
.wp-doors { display: flex; flex-direction: column; align-items: center; gap: 3cqh; width: 100%; }
.wp-cur { position: relative; display: flex; align-items: center; gap: 2cqw; min-height: min(20cqh, 14cqw); }
.wp-cur.in { animation: popIn .35s both; }
.wp-and { font-style: normal; font-weight: 900; font-size: 30px; color: #a78bfa; }
.wp-cur .wp-say { right: -36px; top: 50%; transform: translateY(-50%); }
.wp-two { display: flex; gap: 6cqw; }
.wp-door { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqh; width: min(36cqh, 24cqw); aspect-ratio: .78; border-radius: 120px 120px 18px 18px; border: 6px solid #fff; cursor: pointer; box-shadow: 0 8px 0 rgba(0, 0, 0, .12); }
.wp-door.syn { background: linear-gradient(#86efac, #22c55e); } .wp-door.opp { background: linear-gradient(#fda4af, #f43f5e); }
.wp-dpic { font: 900 clamp(48px, 14cqh, 110px) / 1 "Nunito", sans-serif; color: #fff; font-style: normal; }
.wp-door b { font: 700 clamp(20px, 5cqh, 36px) var(--wf); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.wp-door.open { animation: stkBump .5s; }
.wp-door.no { animation: nope .45s; }
.wp-count { font: 900 22px "Nunito", sans-serif; color: #db2777; }
/* 學一學 */
.wp-learn { display: grid; grid-template-rows: 1fr auto; gap: 3cqh; width: min(100%, 1000px); height: 100%; }
.wp-lc { display: flex; align-items: center; justify-content: center; gap: 4cqw; padding: 3cqh 3cqw; border-radius: 30px; background: rgba(255, 253, 246, .95); border: 5px solid #f9a8d4; }
.wp-lc.in { animation: popIn .45s both; }
.wp-lc .wp-pic { width: min(26cqh, 18cqw); }
.wp-arrow { font: 900 clamp(50px, 14cqh, 110px) / 1 "Nunito", sans-serif; font-style: normal; }
.wp-arrow.opp { color: #f43f5e; } .wp-arrow.syn { color: #22c55e; }
.wp-nav { display: flex; justify-content: center; align-items: center; gap: 30px; padding-right: 90px; }
.wp-dots { display: flex; gap: 10px; } .wp-dots i { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .85); border: 3px solid #f9a8d4; } .wp-dots i.on { background: #f43f5e; }
.wp-next { min-width: 200px; font-size: 22px; }
.wp-timer { position: absolute; top: 1.5cqh; left: 50%; transform: translateX(-50%); width: min(60%, 560px); height: 14px; border-radius: 99px; background: rgba(255, 255, 255, .85); border: 3px solid #fff; overflow: hidden; z-index: 3; }
.wp-timer i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #22c55e, #facc15, #f97316); }
@media (max-height: 520px) {
  .wp.wp-wide { padding: 20cqh 2cqw 2cqh; }
  .wp-q { gap: 2.4cqh; }
  .wp-w b { font-size: 26px; } .wp-w.big b { font-size: 32px; }
  .wp-pic { width: min(24cqh, 9cqw); }
  .wp-o { padding: 1.2cqh 2cqw; } .wp-o b { font-size: 26px; }
  .wp-say { width: 26px; height: 26px; right: -7px; top: -7px; }
  .wp-saw { height: min(46cqh, 22cqw); }
  .wp-sent { font-size: 24px; }
  .wp-m b { font-size: 22px; } .wp-m { padding: 1cqh 1.6cqw; } .wp-col { gap: 1.2cqh; }
  .wp-door { width: min(44cqh, 16cqw); } .wp-door b { font-size: 16px; }
  .wp-doors { flex-direction: row; justify-content: center; gap: 4cqw; }
  .wp-learn { grid-template-columns: 1fr auto; grid-template-rows: 1fr; gap: 2cqw; }
  .wp-nav { flex-direction: column; padding: 0 70px 0 0; gap: 10px; }
  .wp-next { min-width: 140px; font-size: 16px; padding: 6px 12px; }
}
.wp-saw .wp-pivot { border: 0; width: min(16cqh, 11cqw); height: min(13cqh, 9cqw); background: linear-gradient(#fbbf24, #d97706); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.wp-saw .wp-plank { height: 16px; bottom: calc(min(13cqh, 9cqw) - 6px); background: repeating-linear-gradient(90deg, #b45309 0 40px, #c2410c 40px 80px); }
.wp-end { bottom: 14px; }

/* 近義詞反義詞：動畫教學 */
.wp.m-learn { padding: 0; }
.wl { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.wl-sky { position: absolute; inset: 0; background: rgba(15, 23, 72, 0); transition: background 1.2s; pointer-events: none; }
.wl.night .wl-sky { background: rgba(15, 23, 72, .55); }
.wl-stage { position: absolute; inset: 0; }
.wl-act { position: absolute; bottom: 30cqh; width: min(34cqh, 24cqw); display: flex; flex-direction: column; align-items: center; transform-origin: bottom center; }
.wl-act.l { left: 14cqw; } .wl-act.r { right: 14cqw; }
.wl-act .wp-pic { width: 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .18)); }
.wl-lab { margin-top: 6px; padding: 4px 18px; border-radius: 16px; background: #fffdf6; border: 4px solid #f9a8d4; font: 700 clamp(26px, 7cqh, 52px) / 1.1 var(--wf); color: #3b2a1e; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.wl-act.show .wl-lab { opacity: 1; transform: scale(1); }
.wl-heat { position: absolute; bottom: 44cqh; width: 10px; height: 60px; border-radius: 10px; background: linear-gradient(transparent, rgba(255, 120, 40, .7)); animation: wlHeat 1.2s ease-out infinite; }
@keyframes wlHeat { from { transform: translateY(0) scaleY(.5); opacity: .9; } to { transform: translateY(-90px) scaleY(1.2); opacity: 0; } }
.wl-flake { position: absolute; top: -5%; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #bae6fd; animation: wlFlake 2.6s linear forwards; }
@keyframes wlFlake { to { transform: translate(-30px, 80cqh) rotate(360deg); } }
.wl-speed { position: absolute; left: 0; width: 45%; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .9); animation: wlSpeed .7s ease-out forwards; }
@keyframes wlSpeed { from { transform: translateX(-100%); opacity: 1; } to { transform: translateX(60%); opacity: 0; } }
.wl-tear { position: absolute; top: 40%; width: 14px; height: 20px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #60a5fa; animation: wlTear 1.2s ease-in forwards; }
@keyframes wlTear { from { transform: translateY(0); opacity: 1; } to { transform: translateY(120px); opacity: 0; } }
.wl-spark { position: absolute; width: 18px; height: 18px; background: #fde047; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: wlSpark .9s ease-out forwards; }
@keyframes wlSpark { 0% { transform: scale(0) rotate(0); } 50% { transform: scale(1.8) rotate(90deg); } 100% { transform: scale(0) rotate(180deg) translateY(-40px); } }
.wl-bud { position: absolute; bottom: 30cqh; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wl-bud.l { left: 24cqw; } .wl-bud.r { right: 24cqw; }
.wl-blob { position: relative; display: block; width: min(22cqh, 15cqw); aspect-ratio: 1; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, hsl(var(--h) 90% 85%), hsl(var(--h) 75% 65%)); border: 5px solid #fff; box-shadow: 0 6px 0 hsl(var(--h) 50% 55%); animation: stBob 1.4s ease-in-out infinite; }
.wl-blob .e { position: absolute; top: 36%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: #1f2937; box-shadow: inset 3px -3px 0 #fff; } .wl-blob .e.l { left: 28%; } .wl-blob .e.r { right: 28%; }
.wl-blob .m { position: absolute; left: 38%; top: 58%; width: 24%; height: 12%; border-radius: 0 0 40px 40px; background: #be123c; }
.wl-bud b { padding: 4px 18px; border-radius: 16px; background: #fffdf6; border: 4px solid hsl(var(--h) 70% 70%); font: 700 clamp(26px, 7cqh, 52px) / 1.1 var(--wf); color: #3b2a1e; }
.hi5 .wl-blob { animation: npJump .5s cubic-bezier(.3, 1.6, .5, 1) 2; }
.wl-big { position: absolute; left: 0; right: 0; bottom: 13cqh; display: flex; justify-content: center; pointer-events: none; }
.wl-big > * { pointer-events: auto; }
.wl-big.in > * { animation: popIn .45s both; }
.wl-pair { display: inline-flex; align-items: center; gap: 2cqw; padding: .6cqh 3cqw; border-radius: 26px; background: #fffdf6; border: 5px solid #f9a8d4; box-shadow: 0 6px 0 rgba(219, 39, 119, .15); }
.wl-pair b { font: 700 clamp(34px, 10cqh, 80px) / 1.1 var(--wf); color: #3b2a1e; }
.wl-pair i { font: 900 clamp(34px, 10cqh, 80px) / 1 "Nunito", sans-serif; font-style: normal; }
.wl-pair.opp i { color: #f43f5e; } .wl-pair.syn i { color: #22c55e; }
.wl-pair .gap { color: #f59e0b; border-bottom: 5px solid #f59e0b; min-width: 1.4em; text-align: center; }
.wl-cap { position: absolute; z-index: 5; left: 50%; bottom: 2cqh; transform: translateX(-50%); max-width: 74cqw; padding: 1cqh 2.4cqw; border-radius: 99px; background: rgba(30, 20, 50, .72); color: #fff; font: 700 clamp(17px, 4.6cqh, 34px) var(--wf); text-align: center; white-space: nowrap; }
.wl-cap:has(span:empty) { display: none; }
.wl-cap i { font-style: normal; opacity: .4; } .wl-cap i.on { opacity: 1; color: #fde68a; }
.wl-skip { position: absolute; z-index: 6; right: 90px; bottom: 2cqh; padding: 8px 18px; border-radius: 99px; border: 3px solid #fff; background: rgba(255, 255, 255, .85); color: #be185d; font-weight: 900; font-size: 16px; cursor: pointer; }
.wl-sent { display: flex; align-items: center; gap: 2cqw; padding: 2cqh 3cqw; border-radius: 26px; background: #fffdf6; border: 5px solid #86efac; font: 700 clamp(28px, 8cqh, 60px) / 1.3 var(--wf); color: #3b2a1e; margin-bottom: 14cqh; }
.wl-sw { display: inline-block; text-decoration: none; padding: 0 .15em; border-radius: 10px; background: #dcfce7; color: #15803d; }
.wl-smile .wp-pic { width: min(14cqh, 9cqw); animation: stPulse 1.2s ease-in-out infinite; }
.wl-quiz { display: flex; flex-direction: column; align-items: center; gap: 3cqh; margin-bottom: 8cqh; }
.wl-qb { display: flex; gap: 3cqw; }
.wl-end { display: flex; flex-direction: column; align-items: center; gap: 2cqh; padding: 3cqh 4cqw; border-radius: 30px; background: #fffdf6; border: 6px solid #fbbf24; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); margin-bottom: 8cqh; }
.wl-end > b { font: 700 clamp(30px, 8cqh, 56px) var(--wf); color: #be185d; }
.wl-list { display: flex; gap: 2cqw; flex-wrap: wrap; justify-content: center; }
.wl-list .wl-pair { padding: .3cqh 1.6cqw; } .wl-list .wl-pair b, .wl-list .wl-pair i { font-size: clamp(22px, 5cqh, 38px); }
.wl-end .btn { font-size: 22px; min-width: 200px; }
@media (max-height: 520px) {
  .wl-act { bottom: 26cqh; width: min(40cqh, 15cqw); } .wl-act.l { left: 18cqw; } .wl-act.r { right: 16cqw; }
  .wl-lab, .wl-bud b { font-size: 24px; } .wl-pair b, .wl-pair i { font-size: 36px; }
  .wl-cap { font-size: 15px; } .wl-skip { font-size: 13px; padding: 4px 12px; right: 70px; }
  .wl-blob { width: min(28cqh, 11cqw); } .wl-bud { bottom: 26cqh; }
  .wl-sent { font-size: 24px; } .wl-end .btn { font-size: 16px; min-width: 140px; } .wl-end { padding: 2cqh 3cqw; gap: 1.4cqh; }
}

/* ───────────── 奧數小島（js/olympiad.js）───────────── */
.game .play:has(.ol) { zoom: 1 !important; }
.ol { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqh; padding: 2.5cqh 3cqw; background-color: #e9f7ee; font-family: "Nunito", "Segoe UI", sans-serif; }
.ol-p { display: inline-block; width: min(13cqh, 9cqw); aspect-ratio: 1; background: center / contain no-repeat; flex: none; }
.ol-p.mini { width: min(5cqh, 3.4cqw); }
.ol-p.kid { width: min(16cqh, 10cqw); }
.ol-card { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.6cqw; padding: 2.4cqh 3cqw; border-radius: 28px; background: rgba(255, 253, 246, .96); border: 5px solid #fcd34d; box-shadow: 0 5px 0 rgba(180, 120, 20, .15); max-width: 96%; }
.ol-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4cqw; }
.ol-n { min-width: min(18cqh, 12cqw); aspect-ratio: 1.15; border-radius: 24px; background: #fffdf6; border: 5px solid hsl(var(--h) 85% 70%); box-shadow: 0 5px 0 hsl(var(--h) 60% 82%); font: 900 clamp(30px, min(9cqh, 6cqw), 64px) / 1 "Nunito", sans-serif; color: #3b2a50; cursor: pointer; transition: transform .15s; display: grid; place-items: center; }
.ol-n.pic .ol-p { width: 80%; }
.ol-n:active { transform: scale(.95); }
.ol-n.ok { border-color: #22c55e; box-shadow: 0 0 0 6px #bbf7d0; }
.ol-n.no { opacity: .4; filter: grayscale(.7); }
/* 數腳 */
.ol-an { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.ol-lg { position: absolute; right: -4px; top: -4px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #f59e0b; color: #fff; font-size: 18px; border: 3px solid #fff; transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.ol-an.on .ol-lg { transform: scale(1); }
.ol-an.on .ol-p { animation: stkBump .4s; }
.ol-plus { font-style: normal; font: 900 40px "Nunito", sans-serif; color: #b45309; }
.ol-run { padding: 4px 22px; border-radius: 18px; background: rgba(255, 255, 255, .9); border: 3px solid #fcd34d; }
.ol-sum { font: 900 clamp(26px, 6cqh, 44px) "Nunito", sans-serif; color: #b45309; }
/* 規律 */
.ol-cell { display: grid; place-items: center; width: min(14cqh, 9.5cqw); aspect-ratio: 1; border-radius: 18px; background: #fff; border: 3px solid #fde68a; }
.ol-cell .ol-p { width: 82%; }
.ol-cell.num { font: 900 clamp(28px, 8cqh, 56px) "Nunito", sans-serif; color: #3b2a50; }
.ol-cell.q { border: 4px dashed #f59e0b; color: #f59e0b; font: 900 clamp(28px, 8cqh, 56px) "Nunito", sans-serif; animation: stPulse 1.4s ease-in-out infinite; }
.ol-cell.got { border-color: #22c55e; box-shadow: 0 0 0 5px #bbf7d0; animation: stkBump .5s; }
/* 分糖果 */
.ol-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 80%; padding: 1.4cqh 2cqw; border-radius: 22px; background: rgba(255, 253, 246, .94); border: 4px dashed #f9a8d4; min-height: min(10cqh, 7cqw); }
.ol-sw .ol-p { width: min(7cqh, 4.8cqw); }
.ol-sw.gone { visibility: hidden; }
.ol-plates { display: flex; gap: 3cqw; }
.ol-fr { position: relative; display: flex; flex-direction: column; align-items: center; padding: 1cqh 1cqw; border: 0; border-radius: 24px; background: rgba(255, 253, 246, .9); cursor: pointer; transition: transform .15s; }
.ol-fr:active { transform: scale(.96); }
.ol-plate { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; width: min(22cqh, 15cqw); min-height: min(11cqh, 7cqw); padding: 6px; border-radius: 50%; background: radial-gradient(#fff 55%, #e5e7eb 56%); border: 3px solid #d1d5db; }
.ol-cnt { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ec4899; color: #fff; font-weight: 900; font-size: 18px; border: 3px solid #fff; }
.ol-reset { font-size: 16px; }
/* 水果算式 */
.ol-eqs { flex-direction: column; gap: 1.6cqh; }
.ol-eq { display: flex; align-items: center; gap: 1.4cqw; font: 900 clamp(30px, 8cqh, 60px) "Nunito", sans-serif; color: #3b2a50; }
.ol-eq i { font-style: normal; color: #b45309; }
.ol-eq.ask { padding-top: 1.4cqh; border-top: 3px dashed #fde68a; }
.ol-gap { min-width: 1.4em; text-align: center; color: #f59e0b; border-bottom: 5px solid #f59e0b; }
.ol-gap.filled { color: #16a34a; border-color: #16a34a; animation: stkBump .5s; }
/* 天秤 */
.ol-scales { display: flex; align-items: flex-end; justify-content: center; gap: 6cqw; width: 100%; }
.ol-sc { position: relative; display: flex; flex-direction: column; align-items: center; }
.ol-beam { position: relative; display: flex; justify-content: space-between; width: min(56cqh, 38cqw); height: 10px; border-radius: 6px; background: #92400e; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.ol-sc.small .ol-beam { width: min(34cqh, 24cqw); }
.ol-pan { position: absolute; bottom: 10px; display: flex; flex-wrap: wrap-reverse; justify-content: center; align-content: flex-start; width: 42%; min-height: 20px; padding: 0 4px 6px; border-bottom: 6px solid #d97706; border-radius: 0 0 40px 40px; }
.ol-pan.l { left: 0; } .ol-pan.r { right: 0; }
.ol-pan .ol-p { width: min(8cqh, 5.4cqw); margin: -4px -2px; }
.ol-sc.small .ol-pan .ol-p { width: min(6cqh, 4cqw); }
.ol-post { width: 14px; height: min(18cqh, 13cqw); background: #b45309; border-radius: 0 0 6px 6px; position: relative; }
.ol-post::after { content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: min(16cqh, 11cqw); height: 14px; border-radius: 10px; background: #92400e; }
.ol-sc.small { opacity: .9; transform: scale(.85); }
.ol-sc.small::before { content: "="; position: absolute; top: -40px; font: 900 30px "Nunito", sans-serif; color: #16a34a; }
.ol-sc.tilt-l .ol-beam { transform: rotate(-9deg); } .ol-sc.tilt-r .ol-beam { transform: rotate(9deg); } .ol-sc.even .ol-beam { transform: rotate(0); }
.ol-sc.even .ol-post::after { box-shadow: 0 0 0 5px #bbf7d0; }
.ol-bin { display: flex; align-items: center; gap: 2cqw; }
.ol-add { display: flex; align-items: center; gap: 6px; padding: 8px 20px 8px 10px; border-radius: 99px; border: 4px solid #fff; background: #22c55e; color: #fff; font: 900 26px "Nunito", sans-serif; cursor: pointer; box-shadow: 0 4px 0 #15803d; }
.ol-add .ol-p { width: 46px; }
.ol-sub { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 99px; border: 3px solid #fff; background: #fff7ed; color: #9a3412; font-weight: 900; font-size: 18px; cursor: pointer; }
.ol-sub .ic { width: 18px; height: 18px; }
.ol-bc { font: 900 34px "Nunito", sans-serif; color: #15803d; background: #fff; padding: 2px 18px; border-radius: 16px; }
/* 排隊 */
.ol-q { flex-direction: column; gap: 1.4cqh; min-width: 70%; }
.ol-signs { display: flex; justify-content: space-between; width: 100%; font-weight: 900; color: #b45309; font-size: 18px; }
.ol-signs span { display: inline-flex; align-items: center; gap: 4px; } .ol-signs .ic { width: 18px; height: 18px; }
.ol-line { display: flex; align-items: flex-end; justify-content: center; gap: .4cqw; min-height: min(20cqh, 14cqw); flex-wrap: nowrap; }
.ol-line .ol-p.kid { width: min(13cqh, 7.5cqw); animation: popIn .3s both; }
.ol-ming { display: flex; flex-direction: column; align-items: center; } .ol-ming .ol-p { width: min(16cqh, 9cqw); }
.ol-ming b { padding: 2px 10px; border-radius: 10px; background: #2563eb; color: #fff; font-size: 15px; }
.ol-qinfo { display: flex; gap: 3cqw; font-weight: 800; color: #4b3b6b; font-size: clamp(16px, 3.6cqh, 24px); }
.ol-qinfo span { padding: 4px 14px; border-radius: 14px; background: #fef3c7; }
.ol-qinfo span.ok { background: #dcfce7; color: #15803d; }
.ol-qbtn { display: flex; align-items: center; gap: 2cqw; }
.ol-tot { font: 900 clamp(20px, 5cqh, 34px) "Nunito", sans-serif; color: #3b2a50; background: rgba(255, 255, 255, .9); padding: 4px 16px; border-radius: 16px; }
/* 金字塔 */
.ol-pyr { display: flex; flex-direction: column; align-items: center; gap: 1cqh; }
.ol-pr { display: flex; gap: 1cqw; }
.ol-blk { width: min(17cqh, 11cqw); aspect-ratio: 1.3; border-radius: 16px; border: 4px solid #fff; background: linear-gradient(#93c5fd, #3b82f6); color: #fff; font: 900 clamp(28px, 8cqh, 56px) "Nunito", sans-serif; box-shadow: 0 5px 0 #1d4ed8; cursor: default; }
.ol-blk.ol-hole { background: #fffdf6; color: #f59e0b; border: 4px dashed #f59e0b; box-shadow: none; cursor: pointer; animation: stPulse 1.4s ease-in-out infinite; }
.ol-blk.sel { box-shadow: 0 0 0 6px #fde68a; }
.ol-blk.got { background: linear-gradient(#86efac, #22c55e); box-shadow: 0 5px 0 #15803d; animation: stkBump .5s; }
/* 搭配衣服 */
.ol-wear { display: grid; grid-template-columns: 1fr minmax(0, 38%); gap: 3cqw; width: 100%; height: 100%; align-items: center; }
.ol-pick { display: flex; align-items: center; justify-content: center; gap: 2cqw; }
.ol-col { display: flex; flex-direction: column; gap: 1.4cqh; }
.ol-t, .ol-b { padding: 6px; border-radius: 18px; border: 4px solid #fde68a; background: #fffdf6; cursor: pointer; }
.ol-t .ol-p, .ol-b .ol-p { width: min(12cqh, 8cqw); }
.ol-t.sel, .ol-b.sel { border-color: #22c55e; box-shadow: 0 0 0 4px #bbf7d0; }
.ol-doll { position: relative; display: flex; flex-direction: column; align-items: center; padding: 2cqh 2cqw; border-radius: 30px; background: rgba(255, 253, 246, .9); }
.ol-doll .ol-p.kid { width: min(28cqh, 18cqw); }
.ol-on { position: absolute; left: 50%; transform: translateX(-50%); }
.ol-on.t { top: 34%; } .ol-on.b { top: 60%; }
.ol-on .ol-p { width: min(14cqh, 9cqw); }
.ol-ward { display: flex; flex-direction: column; gap: 1.4cqh; padding: 2cqh 1.6cqw; border-radius: 24px; background: rgba(255, 253, 246, .95); border: 4px solid #fcd34d; height: 80%; }
.ol-wc { font: 900 clamp(20px, 5cqh, 32px) "Nunito", sans-serif; color: #b45309; }
.ol-wl { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; }
.ol-fit { display: flex; flex-direction: column; align-items: center; padding: 4px; border-radius: 14px; background: #fff; border: 2px solid #fde68a; animation: popIn .35s both; }
.ol-fit .ol-p { width: min(7cqh, 4.6cqw); }
.ol-done { font-size: 18px; }
/* 每日挑戰（選級頁） */
.ol-daily { margin-left: auto; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 24px; background: rgba(255, 255, 255, .94); border: 4px solid #fbbf24; box-shadow: 0 6px 16px rgba(180, 83, 9, .2); }
.ol-dt { display: flex; flex-direction: column; align-items: center; } .ol-dt b { display: inline-flex; align-items: center; gap: 4px; font: 900 28px "Nunito", sans-serif; color: #ea580c; } .ol-dt b .ic { width: 26px; height: 26px; } .ol-dt small { font-weight: 800; color: #9a3412; }
.ol-shelf { display: flex; gap: 4px; padding: 6px 8px; border-radius: 12px; background: #fef3c7; border-bottom: 5px solid #b45309; }
.ol-medal { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e5e7eb; border: 2px dashed #cbd5e1; }
.ol-medal.g { background: radial-gradient(circle at 35% 30%, #fef08a, #f59e0b); border: 2px solid #fff; color: #fff; box-shadow: 0 2px 0 #b45309; } .ol-medal .ic { width: 60%; height: 60%; }
.ol-dgo { font-size: 18px; animation: stPulse 1.6s ease-in-out infinite; } .ol-dgo:disabled { animation: none; opacity: .75; }
@media (max-height: 520px) {
  .ol.ol-wide { padding: 20cqh 2cqw 2cqh; gap: 2cqh; }
  .ol-n { min-width: min(24cqh, 10cqw); font-size: 30px; border-radius: 18px; }
  .ol-p { width: min(18cqh, 7cqw); } .ol-p.kid { width: min(22cqh, 8cqw); }
  .ol-card { padding: 1.4cqh 2cqw; }
  .ol-cell { width: min(20cqh, 7.5cqw); }
  .ol-eq { font-size: 28px; }
  .ol-wide .ol-scales { gap: 4cqw; } .ol-beam { width: min(60cqh, 30cqw); } .ol-post { height: min(20cqh, 9cqw); }
  .ol-add { font-size: 18px; padding: 4px 14px 4px 6px; } .ol-add .ol-p { width: 32px; } .ol-bc { font-size: 24px; }
  .ol-blk { width: min(22cqh, 9cqw); font-size: 28px; }
  .ol-wide.m-pyramid { flex-direction: row; gap: 5cqw; }
  .ol-wide.m-pyramid .ol-keys { flex-direction: column; } .ol-wide.m-pyramid .ol-n { min-width: min(18cqh, 9cqw); font-size: 24px; }
  .ol-qinfo { font-size: 14px; } .ol-qbtn .btn { font-size: 14px; padding: 6px 12px; } .ol-tot { font-size: 18px; }
  .ol-daily { gap: 8px; padding: 4px 8px; } .ol-dt b { font-size: 20px; } .ol-medal { width: 20px; height: 20px; } .ol-dgo { font-size: 14px; padding: 6px 12px; }
  .ol-ward { height: 100%; } .ol-doll .ol-p.kid { width: min(40cqh, 12cqw); }
}
.ol-scales { padding: 3cqh 3cqw 2cqh; border-radius: 28px; background: rgba(255, 253, 246, .9); border: 4px solid #fcd34d; width: auto; }
.ol-beam { width: clamp(260px, 60cqh, 520px); height: 12px; }
.ol-sc.small .ol-beam { width: clamp(180px, 36cqh, 320px); }
.ol-pan { min-height: 50px; }
.ol-pan .ol-p { width: clamp(38px, 9cqh, 70px); margin: -6px -3px; }
.ol-sc.small .ol-pan .ol-p { width: clamp(30px, 7cqh, 54px); }
.ol-sc.small { transform: none; }
.ol-sc.small::before { content: ""; }
.ol-scales::after { content: ""; }
.ol-line .ol-p.kid { width: clamp(50px, 14cqh, 100px); }
.ol-ming .ol-p, .ol-ming .ol-p.kid { width: clamp(64px, 18cqh, 120px); }
@media (max-height: 520px) { .ol-beam { width: clamp(200px, 56cqh, 300px); } .ol-sc.small .ol-beam { width: clamp(140px, 36cqh, 200px); } .ol-pan .ol-p { width: 34px; } .ol-sc.small .ol-pan .ol-p { width: 28px; } .ol-line .ol-p.kid { width: 44px; } .ol-ming .ol-p { width: 56px; } .ol-scales { padding: 1.4cqh 2cqw; } }
/* 天秤：吊盤 */
.ol-scales { align-items: stretch; gap: 5cqw; padding: 2cqh 3cqw; }
.ol-sc { position: relative; display: block; width: clamp(280px, 62cqh, 540px); height: clamp(190px, 44cqh, 340px); }
.ol-sc.small { width: clamp(200px, 40cqh, 340px); }
.ol-sc .ol-beam { position: absolute; left: 0; right: 0; top: 18%; width: auto; height: 12px; transform-origin: 50% 50%; }
.ol-sc .ol-pan { position: absolute; bottom: auto; top: 12px; width: 44%; min-height: 0; height: clamp(70px, 18cqh, 140px); padding: 0; border: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.ol-sc .ol-pan::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 14px; width: 3px; background: #a16207; transform: translateX(-50%); z-index: -1; }
.ol-sc .ol-pan::after { content: ""; width: 100%; height: 16px; border-radius: 0 0 60px 60px; background: #f59e0b; border-top: 4px solid #b45309; flex: none; }
.ol-sc .ol-pan.l { left: -6%; } .ol-sc .ol-pan.r { right: -6%; }
.ol-pan .ol-fr2 { display: flex; flex-wrap: wrap-reverse; justify-content: center; }
.ol-sc .ol-pan .ol-p { width: clamp(30px, 8cqh, 58px); margin: 0 -3px -4px; position: relative; z-index: 1; }
.ol-sc.small .ol-pan .ol-p { width: clamp(26px, 6.5cqh, 48px); }
.ol-sc .ol-post { position: absolute; left: 50%; top: 18%; bottom: 10px; height: auto; transform: translateX(-50%); }
.ol-sc .ol-post::after { bottom: -10px; }
.ol-sc.small::after { content: "="; position: absolute; right: -4.5cqw; top: 35%; font: 900 40px "Nunito", sans-serif; color: #16a34a; }
.ol-sc.small::before { content: "1 " ; display: none; }
@media (max-height: 520px) { .ol-sc { width: clamp(220px, 58cqh, 320px); height: clamp(150px, 48cqh, 200px); } .ol-sc.small { width: clamp(160px, 40cqh, 220px); } .ol-sc .ol-pan { height: clamp(50px, 20cqh, 80px); } .ol-sc .ol-pan .ol-p { width: 30px; } .ol-sc.small .ol-pan .ol-p { width: 24px; } }
.ol-sc .ol-pan .ol-fr2 { width: 92%; display: flex; flex-wrap: wrap-reverse; justify-content: center; align-items: flex-end; }
/* 奧數小島：遊戲放大，佔滿畫面 */
.ol { gap: 4cqh; padding: 2cqh 2cqw; }
.ol-p { width: min(20cqh, 13cqw); }
.ol-p.kid { width: min(24cqh, 14cqw); }
.ol-card { padding: 3cqh 4cqw; gap: 2.4cqw; border-radius: 34px; }
.ol-n { min-width: min(22cqh, 15cqw); font-size: clamp(36px, min(11cqh, 7cqw), 80px); border-radius: 28px; }
.ol-lg { width: 46px; height: 46px; font-size: 24px; }
.ol-plus { font-size: 56px; }
.ol-run { padding: 6px 30px; } .ol-sum { font-size: clamp(32px, 8cqh, 60px); }
.ol-cell { width: min(19cqh, 12cqw); border-radius: 24px; }
.ol-cell.num, .ol-cell.q { font-size: clamp(36px, 11cqh, 76px); }
.ol-sw .ol-p { width: min(10cqh, 6.4cqw); }
.ol-tray { max-width: 92%; padding: 2cqh 2.4cqw; }
.ol-plates { gap: 4cqw; }
.ol-plate { width: min(30cqh, 20cqw); min-height: min(16cqh, 10cqw); }
.ol-p.mini { width: min(7cqh, 4.6cqw); }
.ol-cnt { width: 46px; height: 46px; font-size: 24px; }
.ol-eq { font-size: clamp(40px, 11cqh, 84px); gap: 2cqw; }
.ol-eqs .ol-p { width: min(17cqh, 11cqw); }
.ol-sc { width: clamp(320px, 78cqh, 720px); height: clamp(220px, 54cqh, 440px); }
.ol-sc.small { width: clamp(220px, 50cqh, 440px); }
.ol-sc .ol-pan { height: clamp(90px, 24cqh, 180px); }
.ol-sc .ol-pan .ol-p { width: clamp(40px, 11cqh, 80px); }
.ol-sc.small .ol-pan .ol-p { width: clamp(32px, 8.5cqh, 64px); }
.ol-scales { padding: 2cqh 2cqw; width: 96%; justify-content: space-evenly; }
.ol-add { font-size: 32px; padding: 10px 26px 10px 12px; } .ol-add .ol-p { width: 60px; } .ol-sub { font-size: 22px; } .ol-bc { font-size: 42px; }
.ol-q { min-width: 88%; }
.ol-line .ol-p.kid { width: clamp(60px, 18cqh, 130px); } .ol-ming .ol-p, .ol-ming .ol-p.kid { width: clamp(76px, 23cqh, 160px); }
.ol-line { min-height: min(28cqh, 18cqw); }
.ol-qinfo { font-size: clamp(18px, 4.4cqh, 30px); } .ol-signs { font-size: 22px; }
.ol-qbtn .btn { font-size: 22px; } .ol-tot { font-size: clamp(24px, 6cqh, 42px); }
.ol-blk { width: min(24cqh, 15cqw); font-size: clamp(36px, 11cqh, 76px); border-radius: 20px; }
.ol-pyr { gap: 1.4cqh; } .ol-pr { gap: 1.4cqw; }
.ol-t .ol-p, .ol-b .ol-p { width: min(16cqh, 10cqw); }
.ol-doll .ol-p.kid { width: min(44cqh, 26cqw); }
.ol-on .ol-p { width: min(20cqh, 12cqw); }
.ol-ward { height: 90%; } .ol-fit .ol-p { width: min(9cqh, 6cqw); }
.ol-wear { gap: 2cqw; }
@media (max-height: 520px) {
  .ol.ol-wide { padding-top: 20cqh; gap: 2.4cqh; }
  .ol-p { width: min(26cqh, 9cqw); } .ol-n { min-width: min(28cqh, 11cqw); font-size: 34px; }
  .ol-cell { width: min(26cqh, 9cqw); } .ol-cell.num, .ol-cell.q { font-size: 34px; }
  .ol-eq { font-size: 34px; } .ol-eqs .ol-p { width: min(22cqh, 8cqw); }
  .ol-blk { width: min(26cqh, 10cqw); font-size: 32px; }
  .ol-sc { width: clamp(240px, 70cqh, 340px); height: clamp(160px, 54cqh, 220px); } .ol-sc.small { width: clamp(170px, 48cqh, 240px); }
  .ol-sc .ol-pan .ol-p { width: 34px; } .ol-sc.small .ol-pan .ol-p { width: 28px; }
  .ol-plate { width: min(36cqh, 14cqw); } .ol-sw .ol-p { width: min(12cqh, 4.4cqw); }
  .ol-line .ol-p.kid { width: 50px; } .ol-ming .ol-p { width: 64px; }
  .ol-qbtn .btn { font-size: 15px; } .ol-add { font-size: 20px; } .ol-add .ol-p { width: 36px; } .ol-bc { font-size: 26px; }
  .ol-doll .ol-p.kid { width: min(54cqh, 16cqw); } .ol-t .ol-p, .ol-b .ol-p { width: min(20cqh, 7cqw); }
}
.ol-sc.small .ol-beam, .ol-sc .ol-beam { width: auto; }
.ol-sc .ol-pan { width: 46%; }
.ol-sc.small .ol-pan .ol-p { width: clamp(26px, 7cqh, 52px); margin: 0 -4px -4px; }
@media (max-height: 520px) {
  .ol-wide.m-share .ol-p.kid { width: min(30cqh, 10cqw); }
  .ol-wide.m-share .ol-plate { width: min(44cqh, 16cqw); min-height: min(20cqh, 7cqw); }
  .ol-wide.m-share .ol-sw .ol-p { width: min(14cqh, 5cqw); }
  .ol-wide.m-share .ol-cnt { width: 32px; height: 32px; font-size: 16px; }
  .ol-wide.m-share { flex-direction: row; flex-wrap: wrap; align-content: center; }
  .ol-wide.m-share .ol-tray { max-width: 30%; }
}

/* 奧數小島：數字天秤 */
.ol-scales.one { width: auto; }
.ol-sc.nb { width: clamp(340px, 86cqh, 760px); height: clamp(200px, 46cqh, 380px); }
.ol-wt { display: inline-grid; place-items: center; width: clamp(44px, 10cqh, 84px); aspect-ratio: 1; margin: 0 3px; border-radius: 14px 14px 10px 10px; background: linear-gradient(#94a3b8, #475569); color: #fff; font: 900 clamp(22px, 6cqh, 46px) "Nunito", sans-serif; border: 3px solid #fff; box-shadow: 0 4px 0 #334155; position: relative; }
.ol-wt::before { content: ""; position: absolute; top: -12px; left: 30%; right: 30%; height: 12px; border: 4px solid #475569; border-bottom: 0; border-radius: 10px 10px 0 0; }
.ol-wt.slot { background: rgba(255, 255, 255, .8); color: #f59e0b; border: 3px dashed #f59e0b; box-shadow: none; animation: stPulse 1.4s ease-in-out infinite; }
.ol-wt.slot::before { border-color: #f59e0b; }
.ol-wt.in { background: linear-gradient(#fbbf24, #d97706); box-shadow: 0 4px 0 #92400e; animation: stkBump .4s; }
.ol-eqline { display: flex; align-items: center; gap: 2cqw; padding: 6px 26px; border-radius: 20px; background: rgba(255, 253, 246, .95); border: 4px solid #fcd34d; font: 900 clamp(28px, 7cqh, 54px) "Nunito", sans-serif; color: #3b2a50; }
.ol-eqline i { font-style: normal; color: #16a34a; }
.ol-wtray { display: flex; gap: 2cqw; padding: 1.4cqh 2cqw; border-radius: 22px; background: rgba(255, 255, 255, .85); }
.ol-wb { padding: 0; border: 0; background: none; cursor: pointer; transition: transform .15s; } .ol-wb:active { transform: scale(.92); }
.ol-wb .ol-wt { background: linear-gradient(#fdba74, #ea580c); box-shadow: 0 4px 0 #9a3412; }
.ol-wb .ol-wt::before { border-color: #9a3412; }
/* 雪糕店 */
.ol-ice { position: relative; display: inline-flex; flex-direction: column; align-items: center; width: var(--iw, min(26cqh, 16cqw)); }
.ol-scoop { display: block; width: 82%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .7) 0 12%, transparent 13%), var(--c); border: 4px solid rgba(255, 255, 255, .9); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .08); position: relative; z-index: 1; margin-bottom: -18%; }
.ol-base { display: block; width: 74%; aspect-ratio: .9; }
.ol-base.cone { clip-path: polygon(0 0, 100% 0, 50% 100%); background: repeating-linear-gradient(45deg, #f59e0b 0 8px, #fbbf24 8px 16px); }
.ol-base.cup { width: 80%; aspect-ratio: 1.4; clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); background: repeating-linear-gradient(90deg, #f472b6 0 12px, #fbcfe8 12px 24px); }
.ol-base.bowl { width: 92%; aspect-ratio: 2; border-radius: 0 0 999px 999px; background: repeating-linear-gradient(45deg, #d97706 0 7px, #f59e0b 7px 14px); }
.ol-base.none { visibility: hidden; }
.ol-ice.empty .ol-scoop, .ol-ice.part .ol-scoop[style*="transparent"] { background: none; border: 4px dashed #cbd5e1; box-shadow: none; }
.ol-ice.full { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1); }
.ol-doll.ice { --iw: min(40cqh, 24cqw); min-width: min(44cqh, 26cqw); min-height: min(60cqh, 36cqw); display: grid; place-items: center; }
.ol-t.ice, .ol-b.ice { display: flex; flex-direction: column; align-items: center; gap: 2px; width: min(17cqh, 11cqw); padding: 6px; }
.ol-t.ice .ol-scoop { width: 70%; margin: 0; }
.ol-b.ice .ol-base { width: 56%; } .ol-b.ice .ol-base.cup { width: 64%; } .ol-b.ice .ol-base.bowl { width: 74%; }
.ol-t.ice small, .ol-b.ice small { font-weight: 800; color: #7c4a1e; font-size: clamp(11px, 2.4cqh, 16px); }
.ol-lbl { font: 900 clamp(14px, 3cqh, 20px) "Nunito", sans-serif; color: #b45309; text-align: center; }
.ol-wl .ol-ice.mini { --iw: min(9cqh, 6cqw); animation: popIn .35s both; }
@media (max-height: 520px) {
  .ol-sc.nb { width: clamp(260px, 80cqh, 400px); height: clamp(130px, 40cqh, 180px); }
  .ol-wt { width: 34px; font-size: 18px; } .ol-wt::before { top: -9px; height: 9px; border-width: 3px; }
  .ol-eqline { font-size: 22px; padding: 2px 16px; } .ol-wtray { gap: 1.4cqw; padding: 6px 10px; }
  .ol-wide.m-nbalance { gap: 1.4cqh; }
  .ol-doll.ice { --iw: min(46cqh, 15cqw); min-height: min(64cqh, 22cqw); } .ol-t.ice, .ol-b.ice { width: min(22cqh, 8cqw); padding: 3px; }
}
/* 天秤：重的一邊向下 */
.ol-sc.tilt-l .ol-beam { transform: rotate(-9deg); }
.ol-sc.tilt-r .ol-beam { transform: rotate(9deg); }
/* 雪糕店：預覽 */
.ol-doll.ice { min-height: 0; padding: 3cqh 3cqw; align-self: center; }
.ol-doll.ice .ol-build { display: grid; place-items: center; min-height: min(40cqh, 24cqw); }
.ol-doll.ice .ol-ice.empty::after { content: "?"; position: absolute; top: 20%; font: 900 40px "Nunito", sans-serif; color: #cbd5e1; }
.ol-pick { gap: 3cqw; }
@media (max-height: 520px) { .ol-doll.ice .ol-build { min-height: min(50cqh, 16cqw); } .ol-doll.ice { padding: 1.4cqh 2cqw; } }
.ol-doll.ice { --iw: min(30cqh, 19cqw); }
.ol-wl .ol-ice.mini { --iw: min(14cqh, 9cqw); }
.ol-wl { gap: 14px; }
@media (max-height: 520px) { .ol-doll.ice { --iw: min(40cqh, 12cqw); } .ol-wl .ol-ice.mini { --iw: min(20cqh, 6cqw); } }

/* 奧數小島：雪糕塔 */
.ol-tw { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 3cqw; width: 100%; height: 100%; }
.ol-order { display: flex; align-items: flex-end; gap: 1cqw; justify-self: end; }
.ol-order .ol-p.kid { width: min(26cqh, 15cqw); }
.ol-bub { position: relative; display: flex; flex-direction: column; gap: 1cqh; padding: 2cqh 2cqw; border-radius: 24px; background: #fffdf6; border: 4px solid #fcd34d; box-shadow: 0 5px 0 rgba(180, 120, 20, .15); margin-bottom: 14cqh; }
.ol-bub::before { content: ""; position: absolute; left: -18px; bottom: 26px; border: 10px solid transparent; border-right: 16px solid #fcd34d; }
.ol-tot2 { font: 900 clamp(24px, 6cqh, 44px) "Nunito", sans-serif; color: #b45309; }
.ol-row2 { display: flex; align-items: center; gap: 10px; font: 900 clamp(24px, 6cqh, 44px) "Nunito", sans-serif; color: #3b2a50; }
.ol-row2 small { font-size: .5em; color: #7c4a1e; }
.ol-scoop.sm { width: min(7cqh, 4.6cqw); margin: 0; border-width: 3px; }
.ol-qm { color: #f59e0b; border-bottom: 4px solid #f59e0b; min-width: 1em; text-align: center; }
.ol-qm.filled { color: #16a34a; border-color: #16a34a; animation: stkBump .5s; }
.ol-cone { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; padding-bottom: 2cqh; }
.ol-count { margin-bottom: auto; padding: 4px 18px; border-radius: 16px; background: rgba(255, 255, 255, .92); font: 900 clamp(22px, 5cqh, 36px) "Nunito", sans-serif; color: #3b2a50; }
.ol-stack { display: flex; flex-direction: column-reverse; align-items: center; width: min(16cqh, 11cqw); }
.ol-stack .ol-scoop { width: 100%; margin: 0 0 -26%; animation: popIn .3s both; }
.ol-stack .ol-scoop:first-child { margin-bottom: -18%; }
.ol-cone > .ol-base.cone { width: min(13cqh, 9cqw); }
.ol-flv { display: flex; flex-direction: column; gap: 1.6cqh; align-items: flex-start; }
.ol-fb { display: flex; align-items: center; gap: 12px; padding: 8px 20px 8px 10px; border-radius: 99px; border: 4px solid #fde68a; background: #fffdf6; cursor: pointer; box-shadow: 0 4px 0 #fef3c7; transition: transform .12s; }
.ol-fb:active { transform: scale(.94); }
.ol-fb .ol-scoop { width: min(10cqh, 6.5cqw); margin: 0; }
.ol-fb small { font: 900 clamp(18px, 4cqh, 28px) "Nunito", sans-serif; color: #7c4a1e; }
.ol-off { font-size: 18px; }
@media (max-height: 520px) {
  .ol-wide.m-tower { padding-top: 18cqh; }
  .ol-order .ol-p.kid { width: min(34cqh, 10cqw); }
  .ol-bub { padding: 1cqh 1.4cqw; margin-bottom: 6cqh; } .ol-tot2, .ol-row2 { font-size: 20px; }
  .ol-stack { width: min(18cqh, 7cqw); } .ol-cone > .ol-base.cone { width: min(15cqh, 6cqw); } .ol-count { font-size: 18px; }
  .ol-fb { padding: 4px 12px 4px 6px; } .ol-fb small { font-size: 15px; } .ol-fb .ol-scoop { width: min(14cqh, 5cqw); } .ol-flv { gap: 1cqh; } .ol-off { font-size: 14px; }
}
.ol-stack { width: min(16cqh, 11cqw, calc(66cqh / (var(--n) * .74 + .3))); }
.ol-cone > .ol-base.cone { width: min(13cqh, 9cqw, calc(54cqh / (var(--n) * .74 + .3))); }
@media (max-height: 520px) {
  .ol-stack { width: min(20cqh, 8cqw, calc(60cqh / (var(--n) * .74 + .3))); }
  .ol-cone > .ol-base.cone { width: min(16cqh, 6.5cqw, calc(50cqh / (var(--n) * .74 + .3))); }
}
@media (max-height: 520px) {
  .ol-wide.m-tower { padding-top: 6cqh; }
  .ol-wide .ol-cone { position: relative; padding-bottom: 0; }
  .ol-wide .ol-count { position: absolute; left: 100%; top: 30%; margin: 0 0 0 10px; white-space: nowrap; }
  .ol-wide .ol-stack { width: min(26cqh, 9cqw, calc(84cqh / (var(--n) * .55 + .6))); }
  .ol-wide .ol-stack .ol-scoop { margin-bottom: -45%; } .ol-wide .ol-stack .ol-scoop:first-child { margin-bottom: -30%; }
  .ol-wide .ol-cone > .ol-base.cone { width: min(20cqh, 7cqw, calc(66cqh / (var(--n) * .55 + .6))); }
  .ol-wide .ol-tw { grid-template-columns: 1fr auto 1fr; padding-top: 14cqh; }
}
@media (max-height: 520px) { .ol-wide .ol-count { left: 50%; top: auto; bottom: 4px; transform: translateX(-50%); margin: 0; font-size: 14px; padding: 0 8px; z-index: 2; } }

/* 雪糕塔：雪糕機、會動的客人 */
.ol-cone { position: relative; }
.ol-mach { position: relative; display: block; width: min(30cqh, 19cqw); margin-bottom: 1cqh; transform-origin: 50% 100%; }
.ol-mach .ol-p { width: 100%; }
.ol-noz { position: absolute; left: 50%; top: 70%; width: 2px; height: 2px; }
.ol-mach.go { animation: olMach .5s ease-in-out; }
@keyframes olMach { 25% { transform: scale(1.06, .94); } 50% { transform: scale(.96, 1.05) rotate(-2deg); } 75% { transform: scale(1.03, .97) rotate(2deg); } }
.ol-drop { position: fixed; z-index: 90; pointer-events: none; margin: 0 !important; aspect-ratio: 1; }
.ol-count { margin-bottom: 0; order: 3; margin-top: 1cqh; }
.ol-cone { justify-content: flex-start; }
.ol-cone .ol-stack { margin-top: auto; }
.ol-stack { width: min(14cqh, 10cqw, calc(40cqh / (var(--n) * .74 + .3))); }
.ol-cone > .ol-base.cone { width: min(11cqh, 8cqw, calc(32cqh / (var(--n) * .74 + .3))); }
.ol-cust { position: relative; display: block; animation: olSway 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes olSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-6px); } }
.ol-cust.hop { animation: olHop .45s cubic-bezier(.3, 1.6, .5, 1), olSway 2.4s .45s ease-in-out infinite; }
@keyframes olHop { 50% { transform: translateY(-28px) scale(1.05); } }
.ol-cust.no { animation: nope .5s, olSway 2.4s .5s ease-in-out infinite; }
.ol-cust.happy { animation: olJoy .6s ease-in-out infinite; }
@keyframes olJoy { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-34px) rotate(3deg); } }
.ol-heart { position: absolute; width: 30px; height: 30px; color: #f43f5e; opacity: 0; pointer-events: none; }
.ol-heart .ic { width: 100%; height: 100%; fill: currentColor; }
.ol-heart.h1 { left: 10%; top: 0; } .ol-heart.h2 { left: 50%; top: -10%; } .ol-heart.h3 { left: 80%; top: 6%; }
.ol-cust.happy .ol-heart { animation: olHeart 1.4s ease-out infinite; }
.ol-cust.happy .ol-heart.h2 { animation-delay: .4s; } .ol-cust.happy .ol-heart.h3 { animation-delay: .8s; }
@keyframes olHeart { 0% { opacity: 0; transform: translateY(0) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-80px) scale(1.3); } }
@media (max-height: 520px) {
  .ol-mach { width: min(30cqh, 10cqw); margin-bottom: 0; }
  .ol-wide .ol-cone { padding-top: 0; }
  .ol-wide .ol-stack { width: min(20cqh, 7cqw, calc(52cqh / (var(--n) * .55 + .6))); }
  .ol-wide .ol-cone > .ol-base.cone { width: min(16cqh, 5.6cqw, calc(42cqh / (var(--n) * .55 + .6))); }
  .ol-wide .ol-tw { padding-top: 6cqh; }
  .ol-heart { width: 20px; height: 20px; }
}
.ol-cone .ol-stack { width: min(15cqh, 10cqw, calc(50cqh / (var(--n) * .55 + .45))); margin-top: auto; }
.ol-stack .ol-scoop, .ol-stack .ol-scoop:first-child { width: 100% !important; margin: 0 0 -42% !important; }
.ol-stack .ol-scoop:first-child { margin-bottom: -30% !important; }
.ol-cone > .ol-base.cone { width: min(12cqh, 8cqw, calc(40cqh / (var(--n) * .55 + .45))); }
.ol-cone { height: 92%; }
@media (max-height: 520px) {
  .ol-wide .ol-cone .ol-stack { width: min(18cqh, 7cqw, calc(46cqh / (var(--n) * .5 + .5))); }
  .ol-wide .ol-cone > .ol-base.cone { width: min(15cqh, 5.6cqw, calc(38cqh / (var(--n) * .5 + .5))); }
}
.ol-cone::before { content: ""; position: absolute; left: 50%; top: min(30cqh, 19cqw); bottom: 18%; width: 0; border-left: 4px dotted rgba(255, 255, 255, .85); transform: translateX(-50%); z-index: -1; }
@media (max-height: 520px) { .ol-cone::before { top: min(30cqh, 10cqw); } }
/* 雪糕塔：放大 */
.ol-tw { gap: 2cqw; grid-template-columns: 1.15fr auto 1fr; }
.ol-order { gap: 0; }
.ol-order .ol-p.kid, .ol-cust .ol-p.kid { width: min(42cqh, 22cqw); }
.ol-bub { padding: 2.4cqh 2.4cqw; margin-bottom: 22cqh; margin-left: -2cqw; }
.ol-tot2 { font-size: clamp(28px, 7cqh, 54px); }
.ol-row2 { font-size: clamp(28px, 7.4cqh, 56px); }
.ol-scoop.sm { width: min(9cqh, 6cqw); }
.ol-mach { width: min(40cqh, 25cqw); }
.ol-cone::before { top: min(40cqh, 25cqw); }
.ol-cone .ol-stack { width: min(19cqh, 13cqw, calc(52cqh / (var(--n) * .55 + .45))); }
.ol-cone > .ol-base.cone { width: min(15cqh, 10cqw, calc(42cqh / (var(--n) * .55 + .45))); }
.ol-count { font-size: clamp(26px, 6cqh, 44px); }
.ol-fb { padding: 12px 28px 12px 12px; gap: 16px; }
.ol-fb .ol-scoop { width: min(13cqh, 8.5cqw); }
.ol-fb small { font-size: clamp(22px, 5cqh, 36px); }
.ol-off { font-size: 22px; }
.ol-flv { gap: 2.4cqh; }
.ol-heart { width: 44px; height: 44px; }
@media (max-height: 520px) {
  .ol-wide .ol-tw { padding-top: 2cqh; }
  .ol-order .ol-p.kid, .ol-cust .ol-p.kid { width: min(56cqh, 15cqw); }
  .ol-bub { margin-bottom: 12cqh; padding: 1.4cqh 1.6cqw; } .ol-tot2, .ol-row2 { font-size: 22px; }
  .ol-mach { width: min(40cqh, 13cqw); } .ol-cone::before { top: min(40cqh, 13cqw); }
  .ol-wide .ol-cone .ol-stack { width: min(22cqh, 8cqw, calc(50cqh / (var(--n) * .5 + .5))); }
  .ol-wide .ol-cone > .ol-base.cone { width: min(18cqh, 6.4cqw, calc(40cqh / (var(--n) * .5 + .5))); }
  .ol-fb { padding: 6px 16px 6px 6px; } .ol-fb .ol-scoop { width: min(18cqh, 6cqw); } .ol-fb small { font-size: 17px; } .ol-off { font-size: 15px; }
  .ol-heart { width: 26px; height: 26px; }
}
.ol-cone { height: 100%; padding-bottom: 0; }
.ol-cone .ol-stack { width: min(18cqh, 12cqw, calc(44cqh / (var(--n) * .55 + .45))); }
.ol-cone > .ol-base.cone { width: min(13cqh, 9cqw, calc(36cqh / (var(--n) * .55 + .45))); }
@media (max-height: 520px) { .ol-wide .ol-cone .ol-stack { width: min(20cqh, 7.4cqw, calc(46cqh / (var(--n) * .5 + .5))); } }
.ol-cone .ol-count { position: absolute; left: calc(50% + min(10cqh, 7cqw)); bottom: 3cqh; margin: 0; white-space: nowrap; }
.ol-cone .ol-stack { width: min(19cqh, 13cqw, calc(56cqh / (var(--n) * .55 + .45))); }
.ol-cone > .ol-base.cone { width: min(15cqh, 10cqw, calc(44cqh / (var(--n) * .55 + .45))); margin-bottom: 2cqh; }

/* 數字金字塔：提示 */
.ol.m-pyramid { flex-direction: row; gap: 5cqw; }
.ol-side { display: flex; flex-direction: column; align-items: center; gap: 3cqh; }
.ol-hint { min-height: 1.3em; padding: 8px 28px; border-radius: 22px; background: rgba(255, 253, 246, .97); border: 4px solid #fcd34d; font: 900 clamp(34px, 9cqh, 70px) / 1.1 "Nunito", sans-serif; color: #3b2a50; white-space: nowrap; }
.ol-hint:empty { visibility: hidden; }
.ol-hint.in { animation: popIn .35s both; }
.ol-hint u { text-decoration: none; display: inline-block; min-width: 1em; text-align: center; color: #f59e0b; border-bottom: 5px solid #f59e0b; }
.ol-hint u.ok { color: #16a34a; border-color: #16a34a; animation: stkBump .5s; }
.ol-how { color: #ea580c; }
.ol-blk.src { background: linear-gradient(#fde68a, #f59e0b); box-shadow: 0 5px 0 #b45309, 0 0 0 6px #fef3c7; animation: stkBump .45s; }
.ol-blk.flash { box-shadow: 0 5px 0 #15803d, 0 0 0 8px #bbf7d0; animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1); }
.ol-ghost { position: fixed; z-index: 90; pointer-events: none; font: 900 52px "Nunito", sans-serif; color: #f59e0b; text-shadow: 0 2px 0 #fff; }
.ol-side .ol-keys { flex-wrap: wrap; max-width: 46cqw; }
@media (max-height: 520px) {
  .ol-hint { font-size: 28px; padding: 4px 16px; }
  .ol-wide.m-pyramid .ol-keys { flex-direction: row; }
  .ol-side { gap: 1.6cqh; }
}
.ol-blk.ol-hole { animation: none; }
.ol-blk.ol-hole.sel { border-color: #ea580c; box-shadow: 0 0 0 7px #fed7aa; animation: stPulse 1.2s ease-in-out infinite; }

/* ───────────── 比大小（新版，js/compare2.js）───────────── */
.game .play:has(.cp) { zoom: 1 !important; }
.cp { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqh; padding: 2cqh 2cqw; background-color: #e0f7fa; font-family: "Nunito", "Segoe UI", sans-serif; }
.cp-p { display: inline-block; width: min(11cqh, 7cqw); aspect-ratio: 1; background: center / contain no-repeat; transition: transform .3s, filter .3s; }
.cp-two { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqw; width: 100%; }
.cp-side { display: grid; place-items: center; min-height: min(46cqh, 30cqw); padding: 2cqh 2cqw; border-radius: 30px; background: rgba(255, 253, 246, .95); border: 5px solid #93c5fd; box-shadow: 0 6px 0 rgba(37, 99, 235, .15); cursor: pointer; transition: transform .15s; }
div.cp-side { cursor: default; }
.cp-side:active { transform: scale(.97); }
.cp-side.num b { font: 900 clamp(60px, 22cqh, 170px) / 1 "Nunito", sans-serif; color: #1e3a8a; }
.cpm-sign .cp-side.num b { font-size: clamp(44px, 15cqh, 120px); white-space: nowrap; }
.cp-side.eaten { border-color: #22c55e; box-shadow: 0 0 0 8px #bbf7d0; animation: stkBump .5s .45s; }
.cp-grp { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 26cqw; }
.cp-p.paired { filter: saturate(.5) opacity(.7); }
.cp-p.extra { transform: scale(1.18); filter: drop-shadow(0 0 8px #fde047) drop-shadow(0 0 4px #f59e0b); animation: stPulse 1.2s ease-in-out infinite; }
.cp-mid { display: flex; flex-direction: column; align-items: center; gap: 2cqh; }
.cp-croc { position: relative; display: block; width: min(34cqh, 22cqw); aspect-ratio: 1.2; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.cp-croc .cp-p { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-croc .shut { opacity: 0; }
.cp-croc.l { transform: scaleX(-1); }
.cp-croc.idle { animation: cpBob 1.6s ease-in-out infinite; }
@keyframes cpBob { 50% { transform: translateY(-8px) rotate(-3deg); } }
.cp-croc.eat .open { animation: cpOpen .9s steps(1) 2; } .cp-croc.eat .shut { animation: cpShut .9s steps(1) 2; }
@keyframes cpOpen { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes cpShut { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.cp-turn { display: flex; gap: 2cqw; }
.cp-tb { display: grid; place-items: center; width: min(13cqh, 9cqw); aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; background: #22c55e; color: #fff; cursor: pointer; box-shadow: 0 4px 0 #15803d; }
.cp-tb .ic { width: 55%; height: 55%; }
.cp-slot { display: grid; place-items: center; width: min(30cqh, 20cqw); aspect-ratio: 1.2; border-radius: 26px; border: 5px dashed #f59e0b; background: rgba(255, 255, 255, .8); font: 900 clamp(50px, 16cqh, 120px) "Nunito", sans-serif; color: #f59e0b; }
.cp-slot.got { border: 0; background: none; }
.cp-slot .cp-croc { width: 100%; }
.cp-eq { font: 900 clamp(70px, 22cqh, 170px) "Nunito", sans-serif; color: #16a34a; }
.cp-signs { display: flex; gap: 3cqw; }
.cp-sb { display: flex; flex-direction: column; align-items: center; min-width: min(22cqh, 15cqw); padding: 1.4cqh 2cqw; border-radius: 26px; background: #fffdf6; border: 5px solid #fcd34d; box-shadow: 0 5px 0 #fde68a; cursor: pointer; }
.cp-sb b { font: 900 clamp(46px, 13cqh, 100px) / 1 "Nunito", sans-serif; color: #b45309; }
.cp-sb small { font-weight: 800; color: #7c4a1e; font-size: clamp(14px, 3cqh, 22px); }
/* 踏石 */
.cp-river { display: flex; flex-direction: column; align-items: center; gap: 6cqh; width: 100%; }
.cp-path { display: flex; gap: 2cqw; padding: 3cqh 3cqw; border-radius: 40px; background: linear-gradient(#7dd3fc, #38bdf8); border: 5px solid #e0f2fe; }
.cp-stone { display: grid; place-items: center; width: min(20cqh, 13cqw); aspect-ratio: 1.3; border-radius: 50%; border: 5px solid #fff; background: radial-gradient(circle at 35% 30%, #e5e7eb, #9ca3af); box-shadow: 0 6px 0 #6b7280; cursor: pointer; }
.cp-stone b { font: 900 clamp(34px, 10cqh, 76px) "Nunito", sans-serif; color: #1f2937; }
.cp-stone.slot { background: rgba(255, 255, 255, .35); border-style: dashed; box-shadow: none; cursor: default; }
.cp-stone.in { animation: stkBump .45s; background: radial-gradient(circle at 35% 30%, #fde68a, #f59e0b); box-shadow: 0 6px 0 #b45309; }
.cp-bank { display: flex; gap: 2.4cqw; }
.cp-bank .cp-stone.used { visibility: hidden; }
/* 多幾多 */
.cp-rows { display: flex; flex-direction: column; gap: 2cqh; padding: 3cqh 3cqw; border-radius: 30px; background: rgba(255, 253, 246, .95); border: 5px solid #93c5fd; }
.cp-row { display: flex; gap: 1cqw; }
.cp-rows .cp-p { width: min(12cqh, 7.5cqw); }
.cp-opts { display: flex; gap: 3cqw; }
.cp-n { min-width: min(22cqh, 15cqw); aspect-ratio: 1.15; border-radius: 26px; background: #fffdf6; border: 5px solid hsl(var(--h) 85% 70%); box-shadow: 0 5px 0 hsl(var(--h) 60% 82%); font: 900 clamp(40px, 11cqh, 80px) / 1 "Nunito", sans-serif; color: #3b2a50; cursor: pointer; }
.cp-n.ok { border-color: #22c55e; box-shadow: 0 0 0 6px #bbf7d0; } .cp-n.no { opacity: .4; filter: grayscale(.7); }
@media (max-height: 520px) {
  .cp.cp-wide { padding: 18cqh 2cqw 2cqh; gap: 2cqh; }
  .cp-side { min-height: min(56cqh, 22cqw); padding: 1cqh 1cqw; }
  .cp-side.num b { font-size: 72px; } .cpm-sign .cp-side.num b { font-size: 46px; }
  .cp-p { width: min(15cqh, 5cqw); } .cp-croc { width: min(44cqh, 16cqw); }
  .cp-sb b { font-size: 40px; } .cp-sb { padding: .6cqh 1.6cqw; }
  .cp-stone { width: min(28cqh, 10cqw); } .cp-stone b { font-size: 34px; } .cp-river { gap: 3cqh; } .cp-path { padding: 1.6cqh 2cqw; }
  .cp-rows .cp-p { width: min(18cqh, 5.5cqw); } .cp-rows { padding: 1.4cqh 2cqw; }
  .cp-wide.cpm-howmany { flex-direction: row; gap: 4cqw; } .cp-wide.cpm-howmany .cp-opts { flex-direction: column; } .cp-n { font-size: 36px; min-width: min(26cqh, 10cqw); }
  .cp-wide.cpm-sign { flex-direction: row; } .cp-wide.cpm-sign .cp-signs { flex-direction: column; gap: 1.4cqh; }
}
.cp-grp .cp-p { width: min(15cqh, 9.5cqw); }
.cp-croc { width: min(42cqh, 26cqw); }
.cp-mid .cp-croc { margin: 0 -2cqw; }
@media (max-height: 520px) { .cp-grp .cp-p { width: min(20cqh, 6.4cqw); } .cp-croc { width: min(50cqh, 17cqw); } }
.cp-slot.got { flex-direction: column; display: flex; align-items: center; justify-content: center; width: min(40cqh, 26cqw); }
.cp-slot.got .cp-croc { width: 100%; }
.cp-sg { font: 900 clamp(40px, 11cqh, 84px) / 1 "Nunito", sans-serif; color: #16a34a; margin-top: -2cqh; }
.cp-grp .cp-p { width: min(18cqh, 11cqw); }
@media (max-height: 520px) {
  .cp-wide.cpm-sign { flex-direction: column; gap: 2cqh; }
  .cp-wide.cpm-sign .cp-signs { flex-direction: row; gap: 3cqw; }
  .cp-wide.cpm-sign .cp-side { min-height: min(40cqh, 18cqw); }
  .cp-wide.cpm-sign .cp-slot { width: min(30cqh, 12cqw); }
  .cp-wide .cp-sb { flex-direction: row; gap: 8px; padding: .4cqh 1.6cqw; } .cp-wide .cp-sb b { font-size: 34px; } .cp-wide .cp-sb small { font-size: 13px; }
}

/* ───────────── 開心菜園（新版，js/garden2.js）───────────── */
.game .play:has(.g2) { zoom: 1 !important; }
.g2 { position: relative; display: block; padding: 0; background-color: #e9f7ee; font-family: "Nunito", "Segoe UI", sans-serif; overflow: hidden; }
.g2-field { position: absolute; inset: 0 26% 0 0; }
.g2-plot { position: absolute; width: 12%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; }
.g2-hole { position: absolute; left: 8%; right: 8%; bottom: 0; height: 30%; border-radius: 50%; background: radial-gradient(#7c4a1e 0 45%, #a16207 46%); box-shadow: inset 0 4px 0 rgba(0, 0, 0, .2); }
.g2-plant { position: absolute; inset: 0 0 10%; background: center bottom / contain no-repeat; transform-origin: 50% 100%; }
.g2-plot.seed .g2-plant { inset: 25% 15% 10%; animation: popIn .4s both; }
.g2-plot.grown .g2-plant { animation: g2Sway 2.6s ease-in-out infinite; }
.g2-plot.pop .g2-plant { animation: g2Grow .6s cubic-bezier(.3, 1.6, .5, 1), g2Sway 2.6s .6s ease-in-out infinite; }
@keyframes g2Grow { from { transform: scale(.2); } }
@keyframes g2Sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.g2-plot:hover .g2-hole { box-shadow: inset 0 4px 0 rgba(0, 0, 0, .2), 0 0 0 4px rgba(253, 224, 71, .8); }
.g2-cc { position: absolute; z-index: 5; width: 17%; aspect-ratio: 1; transition: left .7s ease-in-out, bottom .7s ease-in-out; pointer-events: none; }
.g2-ccimg { position: absolute; inset: 0; background: center bottom / contain no-repeat; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); }
.g2-cc.left .g2-ccimg { transform: scaleX(-1); }
.g2-cc.walk .g2-ccimg { animation: g2Walk .3s ease-in-out infinite; }
.g2-cc.left.walk .g2-ccimg { animation: g2WalkL .3s ease-in-out infinite; }
@keyframes g2Walk { 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes g2WalkL { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(-8px) rotate(-3deg); } }
.g2-cc.act .g2-ccimg { animation: stkBump .5s; }
.g2-cc.yay .g2-ccimg { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.g2-rab { position: absolute; z-index: 6; width: 13%; aspect-ratio: 1; transition: left .9s ease-in-out, bottom .9s ease-in-out; }
.g2-rab i { position: absolute; inset: 0; background: center bottom / contain no-repeat; }
.g2-rab.hop i { animation: g2Hop .3s ease-in-out 3; } .g2-rab.left i { transform: scaleX(-1); }
@keyframes g2Hop { 50% { transform: translateY(-20px); } }
.g2-chomp { position: absolute; z-index: 7; padding: 2px 10px; border-radius: 12px; background: #fff; border: 3px solid #f87171; color: #dc2626; font-weight: 900; font-size: 18px; animation: popIn .3s both; }
.g2-drop { position: absolute; z-index: 6; width: 10px; height: 14px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #60a5fa; animation: g2Drop .7s ease-in forwards; }
@keyframes g2Drop { to { transform: translateY(60px); opacity: 0; } }
.g2-side { position: absolute; top: 4%; right: 2%; bottom: 4%; width: 23%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqh; }
.g2-count { display: grid; place-items: center; width: min(26cqh, 16cqw); aspect-ratio: 1; border-radius: 50%; background: #fffdf6; border: 6px solid #86efac; font: 900 clamp(50px, 16cqh, 120px) "Nunito", sans-serif; color: #15803d; }
.g2-count.pop { animation: stkBump .4s; }
.g2-done { font-size: 24px; }
.g2-basket { position: relative; width: min(30cqh, 19cqw); }
.g2-bi { display: block; width: 100%; aspect-ratio: 1.1; background: center / contain no-repeat; }
.g2-in { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #f59e0b; color: #fff; font-size: 26px; border: 4px solid #fff; }
.g2-opts { display: flex; flex-direction: column; gap: 2cqh; }
.g2-opts.in { animation: popIn .4s both; }
.g2-n { width: min(20cqh, 13cqw); aspect-ratio: 1.3; border-radius: 24px; background: #fffdf6; border: 5px solid hsl(var(--h) 85% 70%); box-shadow: 0 5px 0 hsl(var(--h) 60% 82%); font: 900 clamp(36px, 10cqh, 72px) / 1 "Nunito", sans-serif; color: #3b2a50; cursor: pointer; }
.g2-n.ok { border-color: #22c55e; box-shadow: 0 0 0 6px #bbf7d0; } .g2-n.no { opacity: .4; filter: grayscale(.7); }
.g2-fly { position: fixed; z-index: 90; width: 90px; height: 90px; background: center / contain no-repeat; pointer-events: none; }
.g2-bins { display: flex; flex-direction: column; gap: 3cqh; }
.g2-bin { position: relative; display: flex; flex-direction: column; align-items: center; width: min(30cqh, 19cqw); padding: 1cqh; border-radius: 24px; border: 5px solid #fff; cursor: pointer; }
.g2-bin.veg { background: #bbf7d0; } .g2-bin.fruit { background: #fecaca; }
.g2-bin .g2-bi { width: 80%; }
.g2-bin b { font-size: clamp(16px, 4cqh, 28px); color: #3b2a1e; }
.g2-bin small { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; font-weight: 900; font-size: 20px; color: #15803d; }
.g2-bin.pop { animation: stkBump .45s; }
.g2-cur { position: absolute; left: 34%; bottom: 22%; width: 26%; aspect-ratio: 1; background: center / contain no-repeat; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .2)); }
.g2-cur.in { animation: popIn .4s both; }
.g2.m-sort .g2-plot { visibility: hidden; }
@media (max-height: 520px) {
  .g2-field { top: 18%; }
  .g2-count { width: min(30cqh, 12cqw); font-size: 50px; } .g2-done { font-size: 16px; padding: 6px 14px; }
  .g2-n { width: min(24cqh, 10cqw); font-size: 32px; } .g2-opts { gap: 1.4cqh; }
  .g2-in { width: 36px; height: 36px; font-size: 18px; }
  .g2-bin b { font-size: 14px; } .g2-bin small { width: 26px; height: 26px; font-size: 14px; }
}
.g2-plot { width: 14%; }
.g2-plot.seed .g2-plant { inset: 6% 6% 8%; }
.g2-n { width: min(26cqh, 17cqw); font-size: clamp(44px, 13cqh, 90px); }
.g2-cc { width: 19%; }
@media (max-height: 520px) { .g2-field { top: 12%; } .g2-n { width: min(30cqh, 12cqw); font-size: 38px; } .g2-cc { width: 17%; } }
@media (max-height: 520px) {
  .g2-side { top: 14%; gap: 2cqh; justify-content: flex-start; padding-top: 14cqh; }
  .g2-opts { flex-direction: row; gap: 6px; }
  .g2-n { width: 58px; font-size: 30px; border-width: 4px; border-radius: 16px; }
  .g2-basket { width: min(30cqh, 14cqw); }
}

/* ───────────── 單雙數派對（鑽石主題，js/oddeven2.js）───────────── */
.game .play:has(.dm) { zoom: 1 !important; }
.dm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqh; padding: 2cqh 2cqw; background-color: #2e1065; font-family: "Nunito", "Segoe UI", sans-serif; }
.dm-gem { display: inline-block; width: min(17cqh, 10cqw); aspect-ratio: 1; filter: hue-rotate(var(--g, 0deg)) drop-shadow(0 0 6px rgba(255, 255, 255, .7)) drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); }
.dm-gem svg { width: 100%; height: 100%; }
.dm-gem.sm { width: min(5cqh, 3.4cqw); filter: hue-rotate(var(--g, 0deg)); }
.dm-gem.lone, .dm-gem.sm.lone { filter: hue-rotate(var(--g)) grayscale(.2) drop-shadow(0 0 6px #fde047); }
.dm-pile { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6cqh 2cqw; max-width: 80%; min-height: min(18cqh, 12cqw); }
.dm-g { padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(var(--r)); animation: dmTwinkle 2.4s ease-in-out infinite; }
.dm-g:nth-child(odd) { animation-delay: .6s; }
@keyframes dmTwinkle { 50% { transform: rotate(var(--r)) scale(1.08); filter: brightness(1.2); } }
.dm-g.sel .dm-gem { filter: hue-rotate(var(--g)) drop-shadow(0 0 0 #fff) drop-shadow(0 0 12px #fde047) drop-shadow(0 0 4px #fde047); transform: scale(1.2); }
.dm-g.used { visibility: hidden; }
.dm-g.lone { visibility: visible; animation: dmLone 1s ease-in-out infinite; }
@keyframes dmLone { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-6px); } }
.dm-boxes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4cqw; min-height: min(14cqh, 9cqw); }
.dm-box { display: flex; gap: 4px; padding: 6px 8px; border-radius: 16px; background: linear-gradient(#f9a8d4, #db2777); border: 4px solid #fde047; box-shadow: 0 5px 0 #9d174d; animation: popIn .3s both; }
.dm-box.full { animation: stkBump .45s; }
.dm-slot { display: grid; place-items: center; width: min(12cqh, 7.5cqw); aspect-ratio: 1; border-radius: 10px; background: rgba(255, 255, 255, .55); }
.dm-slot .dm-gem { width: 88%; }
.dm-fly { position: fixed; z-index: 90; pointer-events: none; }
.dm-ans { display: flex; gap: 4cqw; }
.dm-a { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: min(38cqh, 24cqw); padding: 2cqh 2.4cqw; border-radius: 28px; border: 5px solid #fde047; background: rgba(255, 253, 246, .96); cursor: pointer; box-shadow: 0 5px 0 #ca8a04; }
.dm-a b { font: 900 clamp(36px, 11cqh, 80px) / 1 "Nunito", sans-serif; color: #6d28d9; }
.dm-a small { font-weight: 800; color: #7c3aed; font-size: clamp(13px, 3cqh, 20px); }
.dm-ai { display: flex; gap: 2px; }
.dm-a.ok { border-color: #22c55e; box-shadow: 0 0 0 7px #bbf7d0; }
.dm-q[hidden] { display: none; }
.dm-q { display: flex; flex-direction: column; align-items: center; animation: popIn .4s both; }
.dm-sign { display: grid; place-items: center; min-width: min(30cqh, 20cqw); padding: 1cqh 3cqw; border-radius: 30px; background: linear-gradient(#fef9c3, #fde047); border: 6px solid #fff; box-shadow: 0 0 30px rgba(253, 224, 71, .7), 0 6px 0 #ca8a04; }
.dm-sign b { font: 900 clamp(80px, 26cqh, 190px) / 1 "Nunito", sans-serif; color: #7c2d12; }
.dm-sign.sm b { font-size: clamp(56px, 16cqh, 120px); }
.dm-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 1cqw; min-height: min(6cqh, 4cqw); }
.dm-dp { display: inline-flex; gap: 2px; padding: 3px 6px; border-radius: 10px; background: rgba(255, 255, 255, .85); animation: popIn .3s both; }
.dm-chests { display: flex; gap: 6cqw; }
.dm-ch { position: relative; display: flex; flex-direction: column; align-items: center; width: min(42cqh, 26cqw); padding: 5cqh 1cqw 2cqh; border-radius: 18px 18px 24px 24px; border: 5px solid #fbbf24; background: linear-gradient(#b45309, #78350f); cursor: pointer; box-shadow: 0 6px 0 #451a03; }
.dm-lid { position: absolute; left: -5px; right: -5px; top: -5px; height: 32%; border-radius: 40px 40px 6px 6px; background: linear-gradient(#d97706, #92400e); border: 5px solid #fbbf24; transform-origin: 50% 0; transition: transform .3s; }
.dm-ch.open .dm-lid { animation: dmLid .7s ease-in-out; }
@keyframes dmLid { 40% { transform: rotateX(70deg) translateY(-14px); } }
.dm-ch b { position: relative; font: 900 clamp(30px, 9cqh, 66px) "Nunito", sans-serif; color: #fde047; text-shadow: 0 2px 0 #451a03; margin-top: 3cqh; }
.dm-ch small { position: relative; color: #fef3c7; font-weight: 800; font-size: clamp(13px, 3cqh, 20px); letter-spacing: .1em; }
.dm-ch em { position: absolute; right: -10px; top: -14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #22c55e; color: #fff; font-style: normal; font-weight: 900; border: 3px solid #fff; z-index: 2; }
.dm-cur { min-height: min(26cqh, 18cqw); display: grid; place-items: center; }
.dm-cur.in { animation: popIn .4s both; }
.dm-rocks { display: grid; grid-template-columns: repeat(5, auto); gap: 2cqh 2cqw; justify-content: center; }
.dm-rocks .dm-rock:nth-child(n+6) { grid-column: span 1; }
.dm-rock { display: grid; place-items: center; width: min(22cqh, 14cqw); aspect-ratio: 1.15; padding: 0; border: 0; border-radius: 42% 50% 38% 46%; background: radial-gradient(circle at 35% 30%, #a8a29e, #57534e); box-shadow: 0 6px 0 #292524; transform: rotate(var(--r)); cursor: pointer; }
.dm-rock b { font: 900 clamp(32px, 10cqh, 72px) "Nunito", sans-serif; color: #fff; transform: rotate(calc(var(--r) * -1)); }
.dm-rock.dug { background: radial-gradient(circle, rgba(253, 224, 71, .5), transparent 70%); box-shadow: none; animation: stkBump .45s; }
.dm-rock.dug .dm-gem { width: 70%; }
.dm-cnt { display: inline-flex; align-items: center; gap: 8px; padding: 6px 20px; border-radius: 99px; background: rgba(255, 255, 255, .92); font: 900 clamp(20px, 5cqh, 34px) "Nunito", sans-serif; color: #6d28d9; }
.dm-path { display: flex; align-items: center; gap: .6cqw; }
.dm-stone { display: grid; place-items: center; width: min(22cqh, 13cqw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c4b5fd, #7c3aed); border: 5px solid #fff; box-shadow: 0 6px 0 #4c1d95, 0 0 20px rgba(196, 181, 253, .6); font: 900 clamp(32px, 9cqh, 66px) "Nunito", sans-serif; color: #fff; }
.dm-stone.dm-hole { background: rgba(76, 29, 149, .78); border-style: dashed; color: #fde047; }
.dm-stone.sel { box-shadow: 0 0 0 7px #fde047; animation: stPulse 1.3s ease-in-out infinite; }
.dm-stone.got { background: radial-gradient(circle at 35% 30%, #fde68a, #f59e0b); animation: stkBump .45s; }
.dm-arc { font-style: normal; font-weight: 900; color: #fde047; font-size: clamp(14px, 3.4cqh, 24px); }
.dm-keys { display: flex; gap: 3cqw; }
.dm-k { width: min(22cqh, 14cqw); aspect-ratio: 1.15; border-radius: 22px; border: 5px solid #fde047; background: #fffdf6; font: 900 clamp(32px, 9cqh, 64px) / 1 "Nunito", sans-serif; color: #6d28d9; cursor: pointer; box-shadow: 0 5px 0 #ca8a04; }
@media (max-height: 520px) {
  .dm.dm-wide { padding: 20cqh 2cqw 2cqh; gap: 2cqh; }
  .dm-gem { width: min(18cqh, 6.4cqw); } .dm-slot { width: min(14cqh, 5cqw); }
  .dm-a { min-width: min(36cqh, 15cqw); padding: .6cqh 1.4cqw; } .dm-a b { font-size: 34px; } .dm-a small { font-size: 12px; }
  .dm-sign b { font-size: 70px; } .dm-sign.sm b { font-size: 54px; }
  .dm-ch { width: min(52cqh, 19cqw); padding-top: 3cqh; } .dm-ch b { font-size: 30px; margin-top: 2cqh; } .dm-ch small { font-size: 12px; letter-spacing: 0; }
  .dm-wide.dmm-num, .dm-wide.dmm-sort { flex-direction: row; gap: 5cqw; }
  .dm-rock { width: min(24cqh, 9cqw); } .dm-rock b { font-size: 28px; }
  .dm-stone { width: min(26cqh, 9cqw); font-size: 30px; } .dm-k { width: min(24cqh, 9cqw); font-size: 30px; }
  .dm-wide.dmm-pair, .dm-wide.dmm-look { gap: 1.4cqh; }
}

/* 單雙數：楚楚掘鑽石再分寶箱 */
.dm.dmm-sort { gap: 2cqh; }
.dm-mine { position: relative; width: min(100%, 900px); flex: 1 1 auto; min-height: 0; align-self: center; }
.dm.dmm-sort .dm-chests { flex: none; }
.dm-cc { position: absolute; left: 10%; bottom: 0; height: 92%; width: auto; aspect-ratio: 1; transform-origin: 40% 95%; z-index: 2; }
.dm-cc i { position: absolute; inset: 0; background: center bottom / contain no-repeat; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .25)); }
.dm-cc.swing { animation: dmSwing .42s ease-in; }
@keyframes dmSwing { 0% { transform: rotate(0); } 45% { transform: rotate(-12deg); } 70% { transform: rotate(16deg) translateX(10px); } 100% { transform: rotate(0); } }
.dm-cc.yay i { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 2; }
.dm-spot { position: absolute; left: 50%; bottom: 0; height: 80%; width: auto; aspect-ratio: 1; display: grid; place-items: end center; }
.dm-big { position: relative; width: 100%; aspect-ratio: 1.2; padding: 0; border: 0; border-radius: 44% 52% 36% 46% / 52% 48% 40% 42%; background: radial-gradient(circle at 34% 28%, #c7c2bd, #78716c 60%, #57534e); box-shadow: inset -8px -10px 0 rgba(0, 0, 0, .18), 0 8px 0 #292524; cursor: pointer; animation: popIn .4s both; }
.dm-big:hover { filter: brightness(1.08); }
.dm-big.hit { animation: dmShake .3s; }
@keyframes dmShake { 25% { transform: translateX(-6px) rotate(-3deg); } 75% { transform: translateX(6px) rotate(3deg); } }
.dm-peek { position: absolute; left: 50%; top: -10%; width: 44%; transform: translateX(-50%); display: flex; justify-content: center; gap: 2px; }
.dm-peek .dm-gem.sm { width: 48%; filter: hue-rotate(var(--g)) drop-shadow(0 0 6px #fff); animation: dmTwinkle 1.4s ease-in-out infinite; }
.dm-crk { position: absolute; inset: 8%; width: 84%; height: 84%; pointer-events: none; }
.dm-crk path { fill: none; stroke: #1c1917; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.dm-big.c1 .k1, .dm-big.c2 .k1, .dm-big.c2 .k2, .dm-big.c3 path { opacity: 1; }
.dm-big.c1 .dm-crk, .dm-big.c2 .dm-crk { filter: drop-shadow(0 0 4px #fde047); }
.dm-chip { position: fixed; z-index: 80; width: 14px; height: 12px; border-radius: 40%; background: #78716c; pointer-events: none; animation: dmChip .65s ease-out forwards; }
@keyframes dmChip { to { transform: translate(var(--x), var(--y)) rotate(200deg); opacity: 0; } }
.dm-bit { position: absolute; left: 40%; bottom: 20%; width: 22%; aspect-ratio: 1.2; border-radius: 40% 55% 30% 50%; background: #78716c; animation: dmBit .7s ease-out forwards; }
@keyframes dmBit { to { transform: translate(var(--x), var(--y)) rotate(var(--a)) scale(.6); opacity: 0; } }
.dm-ngem { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; animation: dmRise .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.dm-ngem .dm-gem { position: absolute; inset: 0; width: 100%; filter: hue-rotate(var(--g)) drop-shadow(0 0 18px #fff) drop-shadow(0 0 6px #fde047); animation: dmTwinkle 1.6s ease-in-out infinite; }
.dm-ngem b { position: relative; top: -6%; font: 900 clamp(36px, 11vh, 110px) / 1 "Nunito", sans-serif; color: #fff; -webkit-text-stroke: 3px #1e1b4b; paint-order: stroke fill; text-shadow: 0 3px 0 #1e1b4b; }
@keyframes dmRise { from { transform: translateY(40%) scale(.3); opacity: 0; } }
.dm-left { position: absolute; right: 2%; top: 4%; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, .7); }
.dm-left i { width: 22px; height: 18px; border-radius: 40% 55% 30% 50%; background: #78716c; }
.dm-left i.done { background: #fde047; box-shadow: 0 0 8px #fde047; }
@media (max-height: 520px) {
  .dm-wide.dmm-sort { flex-direction: row; align-items: flex-end; }
  .dm-wide .dm-mine { width: 56%; flex: none; align-self: stretch; }
  .dm-wide .dm-cc { left: 0; height: 88%; } .dm-wide .dm-spot { left: 46%; height: 82%; }
  .dm-wide .dm-ngem b { font-size: 42px; } .dm-wide.dmm-sort .dm-chests { gap: 2cqw; margin-bottom: 4cqh; }
  .dm-left i { width: 16px; height: 13px; } .dm-left { gap: 4px; padding: 5px; right: 0; }
}

/* 完成關卡：楚楚跳出來歡呼（js/fun.js celebrate），結果頁留在寶箱旁跳舞 */
.cb-cc { position: relative; width: min(46vh, 42vw, 360px); aspect-ratio: 1; margin-bottom: -4vh; animation: cbCcIn .8s cubic-bezier(.3, 1.5, .5, 1) both; pointer-events: none; }
.cb-cci { position: absolute; inset: 0; background: center bottom / contain no-repeat; filter: drop-shadow(0 12px 18px rgba(124, 58, 237, .35)); transform-origin: 50% 100%; animation: cbCcJump .62s .8s ease-in-out infinite; }
@keyframes cbCcIn { 0% { transform: translateY(70vh) scale(.4) rotate(-20deg); opacity: 0; } 60% { transform: translateY(-6vh) scale(1.08) rotate(6deg); opacity: 1; } 100% { transform: none; } }
@keyframes cbCcJump { 0%, 100% { transform: translateY(0) scale(1.04, .96); } 45% { transform: translateY(-9%) scale(.97, 1.04) rotate(-4deg); } 70% { transform: translateY(-4%) rotate(4deg); } }
.cb-hrt { position: absolute; left: calc(50% + var(--x)); bottom: 30%; font-style: normal; font-size: clamp(22px, 5vh, 40px); line-height: 1; color: #ff5ca8; opacity: 0; animation: cbHrt 1.9s var(--d) ease-out infinite; }
.cb-hrt.st { width: clamp(22px, 5vh, 38px); height: clamp(22px, 5vh, 38px); color: #ffc83d; }
.cb-hrt.st .ic, .cb-hrt.st svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes cbHrt { 0% { transform: translateY(0) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-34vh) scale(1.1) rotate(25deg); opacity: 0; } }
.res-cc { position: absolute; left: -80%; bottom: -6%; width: 82%; aspect-ratio: 1; background: center bottom / contain no-repeat; transform-origin: 50% 100%; filter: drop-shadow(0 8px 10px rgba(120, 60, 0, .25)); animation: cbCcIn .8s cubic-bezier(.3, 1.5, .5, 1) both, cbCcJump .7s .8s ease-in-out infinite; }
@media (max-height: 520px) { .celebrate.fx { grid-auto-flow: column; gap: 3vw; } .cb-cc { width: min(74vh, 36vw); margin: 0; } .celebrate.fx .cb-say { max-width: 52vw; font-size: clamp(22px, 7vh, 34px); } }
@media (prefers-reduced-motion: reduce) { .cb-cci, .res-cc, .cb-hrt { animation: none !important; } .cb-hrt { display: none; } }

/* ───────────── 火箭數字站（js/rocket2.js）───────────── */
.game .play:has(.rx) { zoom: 1 !important; }
.rx { position: relative; display: block; padding: 0; overflow: hidden; background: #241b5a left bottom / cover no-repeat; font-family: "Nunito", "Segoe UI", sans-serif; }
.screen.game.cine-b:has(.rx)::before { background-position: center, center, center bottom, center; }
.rx-ship { position: fixed; z-index: 3; --p: 0; transition: transform 1.9s cubic-bezier(.55, 0, .85, .35); }
.rx-body { position: absolute; inset: 0; background: center bottom / contain no-repeat; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.rx-flame { position: absolute; left: 50%; top: 80%; width: 26%; height: calc(14% + 46% * var(--p)); transform: translateX(-50%); transform-origin: 50% 0; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: radial-gradient(ellipse at 50% 25%, #fff 0 18%, #fde047 30%, #fb923c 55%, rgba(239, 68, 68, .2) 75%, transparent 78%); opacity: calc(var(--p) * 1.6); animation: rxFlick .12s ease-in-out infinite alternate; }
@keyframes rxFlick { to { transform: translateX(-50%) scaleY(1.12) scaleX(.92); } }
.rx-ship.shake .rx-body { animation: rxShake .3s; }
.rx-ship.lit .rx-body { animation: rxShake .1s linear infinite; }
.rx-ship.lit .rx-flame { width: 34%; height: 70%; }
@keyframes rxShake { 25% { transform: translate(-3px, 1px) rotate(-1.5deg); } 75% { transform: translate(3px, -1px) rotate(1.5deg); } }
.rx-ship.go { transform: translateY(-170vh); }
.rx-ship.go .rx-flame { width: 38%; height: 110%; }
.rx-cc { position: fixed; z-index: 4; background: center bottom / contain no-repeat; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); animation: rxWave 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes rxWave { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-4px); } }
.rx-cc.yay { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.rx-main { position: absolute; z-index: 5; top: 3%; right: 2%; bottom: 4%; left: 44%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; }
.rx-blast { position: absolute; z-index: 9; left: 44%; right: 0; top: 34%; text-align: center; font: 900 clamp(44px, 12vh, 110px) / 1 "Nunito", sans-serif; color: #fde047; -webkit-text-stroke: 4px #7c2d12; paint-order: stroke fill; text-shadow: 0 6px 0 #7c2d12, 0 0 30px rgba(253, 224, 71, .8); animation: cbIn .6s cubic-bezier(.3, 1.6, .5, 1); }
.rx-count { position: absolute; z-index: 9; left: 44%; right: 0; top: 18%; text-align: center; font: 900 clamp(90px, 34vh, 260px) / 1 "Nunito", sans-serif; color: #fff; text-shadow: 0 0 40px #60a5fa, 0 8px 0 #1e3a8a; pointer-events: none; }
.rx-count.in { animation: rxCount .9s ease-out both; }
@keyframes rxCount { 0% { transform: scale(1.8); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(.8); opacity: .2; } }
.rx-main:has(~ .rx-count) { opacity: .25; }
/* 加燃料 */
.rx-gauge { display: flex; gap: 6px; padding: 8px 10px; border-radius: 20px; background: rgba(15, 23, 42, .75); border: 4px solid #94a3b8; }
.rx-slot { display: grid; place-items: center; width: min(8.6vh, 5vw, 70px); aspect-ratio: .8; border-radius: 10px; border: 3px dashed #60a5fa; font-style: normal; }
.rx-slot b { font: 900 clamp(16px, 3.6vh, 30px) "Nunito", sans-serif; color: rgba(147, 197, 253, .5); }
.rx-slot.on { border: 3px solid #fff; background: linear-gradient(#67e8f9, #3b82f6); box-shadow: 0 0 14px #38bdf8; animation: stkBump .4s; }
.rx-slot.on b { color: #fff; }
.rx-cells { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6vh 1.4vw; max-width: 100%; }
.rx-cell { position: relative; width: min(19vh, 11vw); aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; animation: rxBob 2.2s var(--d) ease-in-out infinite; }
.rx-cell i { position: absolute; inset: 0; background: center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(56, 189, 248, .6)); }
.rx-cell b { position: absolute; left: 0; right: 0; bottom: 4%; font: 900 clamp(26px, 6.5vh, 52px) / 1 "Nunito", sans-serif; color: #fff; -webkit-text-stroke: 3px #1e3a8a; paint-order: stroke fill; }
.rx-cell.done { animation: rxGone .35s forwards; pointer-events: none; }
@keyframes rxBob { 50% { transform: translateY(-8px); } }
@keyframes rxGone { to { transform: scale(0) rotate(90deg); opacity: 0; } }
/* 正數／倒數 */
.rx-screen { display: flex; flex-direction: column; align-items: center; min-width: min(40vh, 26vw); padding: 1vh 3vw 1.4vh; border-radius: 26px; background: #0f172a; border: 6px solid #94a3b8; box-shadow: 0 0 0 4px #334155, 0 10px 24px rgba(0, 0, 0, .4); }
.rx-screen small { font-weight: 900; letter-spacing: .2em; color: #fbbf24; font-size: clamp(12px, 2.6vh, 20px); }
.rx-screen b { font: 900 clamp(60px, 18vh, 150px) / 1 "Nunito", sans-serif; color: #4ade80; text-shadow: 0 0 18px rgba(74, 222, 128, .8); }
.rx-screen.pop b { animation: stkBump .35s; }
.rx-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6vh 1.4vw; max-width: 100%; }
.rx-key { width: min(15vh, 9vw); aspect-ratio: 1; border-radius: 50%; border: 5px solid #fff; background: radial-gradient(circle at 35% 30%, #fef3c7, #fbbf24 60%, #f59e0b); box-shadow: 0 5px 0 #b45309, 0 0 14px rgba(251, 191, 36, .5); font: 900 clamp(26px, 6.4vh, 52px) / 1 "Nunito", sans-serif; color: #7c2d12; cursor: pointer; }
.rx-key.done { background: #4ade80; box-shadow: 0 5px 0 #15803d; color: #fff; opacity: .55; }
/* 數星星：十格框 */
.rx-frames { display: flex; flex-direction: column; gap: 1.6vh; }
.rx-frame { display: grid; grid-template-columns: repeat(5, auto); gap: 6px; padding: 10px; border-radius: 22px; background: linear-gradient(#f8fafc, #cbd5e1); border: 5px solid #fff; box-shadow: 0 6px 0 #64748b; }
.rx-win { display: grid; place-items: center; width: min(11vh, 6.6vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #1e3a8a, #0b1437); border: 4px solid #60a5fa; font-style: normal; }
.rx-frames.two .rx-win { width: min(8.6vh, 5.4vw); }
.rx-star { width: 78%; height: 78%; color: #fde047; filter: drop-shadow(0 0 6px #fde047); animation: popIn .35s var(--d) both; }
.rx-star .ic, .rx-star svg { width: 100%; height: 100%; fill: currentColor; }
.rx-star.fly { transition: transform .6s ease-in, opacity .6s; transform: translate(-40vw, 20vh) scale(.3); opacity: 0; }
.rx-opts { display: flex; gap: 2.4vw; }
.rx-opt { width: min(17vh, 11vw); aspect-ratio: 1.2; border-radius: 24px; border: 5px solid #fde047; background: #fffdf6; box-shadow: 0 5px 0 #ca8a04; font: 900 clamp(32px, 9vh, 70px) / 1 "Nunito", sans-serif; color: #4c1d95; cursor: pointer; }
.rx-opt.ok { border-color: #22c55e; box-shadow: 0 0 0 7px #bbf7d0; }
/* 缺了哪個數：一排星球 */
.rx-row { display: flex; align-items: center; gap: .4vw; }
.rx-planet { display: grid; place-items: center; width: min(15vh, 6.4vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, hsl(calc(200 + var(--h)) 90% 85%), hsl(calc(200 + var(--h)) 70% 60%)); border: 4px solid #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, .3); }
.rx-planet b { font: 900 clamp(22px, 5.4vh, 44px) / 1 "Nunito", sans-serif; color: #1e1b4b; }
.rx-planet.rx-hole { background: rgba(30, 27, 75, .7); border: 4px dashed #fde047; }
.rx-planet.rx-hole b { color: #fde047; }
.rx-planet.sel { animation: stPulse 1.3s ease-in-out infinite; box-shadow: 0 0 0 6px #fde047; }
.rx-planet.got { animation: stkBump .45s; }
.rx-arr { font-style: normal; font-weight: 900; color: #fde047; font-size: clamp(12px, 2.6vh, 20px); }
/* 飛上飛落：數線梯 */
.rx.rxm-move .rx-main { flex-direction: row; gap: 5vw; }
.rx-ladder { position: relative; display: flex; flex-direction: column; gap: 4px; height: 94%; width: min(22vh, 14vw); padding: 8px; border-radius: 20px; background: rgba(15, 23, 42, .6); border: 4px solid #a5b4fc; }
.rx-rung { flex: 1; min-height: 0; border-radius: 12px; border: 3px solid #c4b5fd; background: rgba(255, 255, 255, .92); font: 900 clamp(20px, 5vh, 40px) / 1 "Nunito", sans-serif; color: #4c1d95; cursor: pointer; }
.rx-rung.at { background: #fde047; border-color: #fff; box-shadow: 0 0 14px #fde047; }
.rx-mini { position: absolute; left: calc(100% + 6px); top: 50%; width: min(12vh, 7vw); aspect-ratio: 1; background: center / contain no-repeat; transform: translateY(-50%); transition: top .6s cubic-bezier(.4, 1.4, .6, 1); filter: drop-shadow(0 0 8px rgba(255, 255, 255, .6)); }
.rx-cmd { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: min(40vh, 24vw); padding: 2vh 2vw; border-radius: 26px; background: #fffdf6; border: 5px solid #c4b5fd; box-shadow: 0 6px 0 #7c3aed; }
.rx-cmd.in { animation: popIn .4s both; }
.rx-cmd b { font-size: clamp(40px, 11vh, 90px); line-height: 1; }
.rx-cmd b.up { color: #16a34a; } .rx-cmd b.dn { color: #e11d48; }
.rx-cmd span { font: 900 clamp(24px, 6vh, 48px) / 1.1 "Nunito", sans-serif; color: #4c1d95; }
.rx-cmd small { font: 800 clamp(18px, 4vh, 32px) "Nunito", sans-serif; color: #7c3aed; }
@media (max-height: 520px) {
  .rx-main { gap: 2vh; top: 4%; }
  .rx-slot { width: min(9vh, 4vw); } .rx-gauge { padding: 5px 6px; gap: 4px; }
  .rx-cell { width: min(20vh, 9vw); } .rx-cell b { font-size: 26px; }
  .rx-key { width: min(17vh, 7.4vw); font-size: 26px; border-width: 4px; }
  .rx-screen b { font-size: 60px; }
  .rx-win { width: min(11vh, 5vw); border-width: 3px; } .rx-frame { padding: 6px; gap: 4px; }
  .rx-opt { width: min(22vh, 10vw); font-size: 34px; }
  .rx-planet { width: min(16vh, 6.4vw); border-width: 3px; } .rx-planet b { font-size: 24px; } .rx-arr { font-size: 10px; } .rx-row { gap: 2px; }
  .rx-rung { font-size: 18px; border-width: 2px; } .rx-ladder { gap: 2px; padding: 5px; }
  .rx-cmd span { font-size: 24px; } .rx-cmd b { font-size: 40px; } .rx-cmd small { font-size: 18px; }
}

/* ───────────── 英文大冒險第四版（js/english4.js）───────────── */
.game .play:has(.e4) { zoom: 1 !important; }
.e4 { position: relative; display: block; padding: 0; background: transparent; box-shadow: none; font-family: "Nunito", "Segoe UI", sans-serif; }
.e4 button { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; }
.e4 img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.e4-play { position: absolute; top: 1%; right: 1%; bottom: 2%; left: 17%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; }
.e4-village .e4-play { left: 1%; }
.e4-cc { position: absolute; z-index: 3; left: 0; bottom: 0; width: min(28vh, 17vw); aspect-ratio: 1; background: center bottom / contain no-repeat; transform-origin: 50% 100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); animation: e4Idle 2.8s ease-in-out infinite; pointer-events: none; }
.e4-cc.yay { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 3; }
.e4-cc.oops { animation: e4No .5s; }
@keyframes e4Idle { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-4px); } }
@keyframes e4No { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.e4-ear { display: grid; place-items: center; width: min(11vh, 7vw); aspect-ratio: 1; border-radius: 50%; background: #8b5cf6 !important; color: #fff; border: 4px solid #fff !important; box-shadow: 0 5px 0 #6d28d9; flex: none; }
.e4-ear .ic, .e4-ear svg { width: 55%; height: 55%; fill: currentColor; }
.e4-ear.mini { width: min(8vh, 5vw); border-width: 3px !important; }
.e4-ear.big { width: min(22vh, 13vw); border-width: 6px !important; animation: stPulse 1.6s ease-in-out infinite; }
.e4-ear.top { position: absolute; z-index: 6; right: 1%; top: 1%; }
.e4-flyc { position: fixed; z-index: 90; pointer-events: none; margin: 0; }
/* ABC 花園 */
.e4-flowers { display: flex; gap: 1.6vw; align-items: flex-end; justify-content: center; width: 100%; }
.e4-fl { position: relative; width: min(24vh, 14vw); aspect-ratio: 1; transform: translateY(var(--y, 0)); }
.e4-fl i { position: absolute; inset: 0; background: center / contain no-repeat; filter: hue-rotate(calc(var(--h) * 1deg)) drop-shadow(0 6px 6px rgba(0, 0, 0, .15)); transform-origin: 50% 36%; }
.e4-fl b { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); font: 900 clamp(28px, 8vh, 64px) / 1 "Nunito", sans-serif; color: #3b0764; }
.e4-fl.bloom i { animation: e4Bloom .9s cubic-bezier(.3, 1.6, .5, 1); }
.e4-fl.no { opacity: .45; filter: grayscale(.6); }
.e4-fl.got i { filter: hue-rotate(calc(var(--h) * 1deg)) drop-shadow(0 0 12px #fde047); }
@keyframes e4Bloom { 0% { transform: scale(1) rotate(0); } 50% { transform: scale(1.3) rotate(25deg); } 100% { transform: scale(1.1) rotate(0); } }
.e4-bee { position: absolute; z-index: 5; left: 6%; top: 6%; width: min(17vh, 10vw); aspect-ratio: 1; background: center / contain no-repeat; transition: left .6s ease-in-out, top .6s ease-in-out; animation: e4Buzz .45s ease-in-out infinite alternate; pointer-events: none; }
.e4-bee.happy { animation: npJump .5s cubic-bezier(.3, 1.6, .5, 1) 3; }
@keyframes e4Buzz { to { translate: 0 -8px; rotate: 4deg; } }
.e4m-bee .e4-play { justify-content: flex-end; padding-bottom: 4vh; }
.e4-bfs { display: flex; gap: 5vw; }
.e4-bf { position: relative; width: min(19vh, 12vw); aspect-ratio: 1; transition: transform .8s ease-in-out; }
.e4-bf i { position: absolute; inset: 0 0 14%; background: center / contain no-repeat; filter: hue-rotate(calc(var(--h) * 1deg)); animation: e4Flut 1.3s ease-in-out infinite; }
.e4-bf b { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); min-width: 1.4em; padding: 0 10px; border-radius: 14px; background: #fff; border: 4px solid hsl(var(--h) 70% 70%); font: 900 clamp(24px, 6vh, 48px) / 1.15 "Nunito", sans-serif; color: hsl(var(--h) 60% 30%); }
.e4-bf.sel i { filter: hue-rotate(calc(var(--h) * 1deg)) drop-shadow(0 0 0 #fff) drop-shadow(0 0 12px #fde047); }
.e4-bf.sel b { box-shadow: 0 0 0 5px #fde047; }
.e4-bf.got { z-index: 5; pointer-events: none; }
@keyframes e4Flut { 50% { transform: scaleX(.82) translateY(-6px); } }
.e4-leaves { display: flex; gap: 4vw; }
.e4-lf { position: relative; width: min(18vh, 11vw); aspect-ratio: 1; animation: e4Sway 2.2s ease-in-out infinite; }
.e4-lf:nth-child(2) { animation-delay: .5s; } .e4-lf:nth-child(3) { animation-delay: 1s; }
.e4-lf i { position: absolute; inset: 0; background: center / contain no-repeat; }
.e4-lf b { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); font: 900 clamp(30px, 8vh, 64px) / 1 "Nunito", sans-serif; color: #fff; -webkit-text-stroke: 3px #166534; paint-order: stroke fill; }
.e4-lf.gone { visibility: hidden; }
@keyframes e4Sway { 50% { transform: rotate(8deg) translateY(-6px); } }
.e4-cat { display: flex; align-items: center; transition: transform 1.4s ease-in-out; }
.e4-seg { display: grid; place-items: center; width: min(17vh, 10.5vw); aspect-ratio: 1; margin-left: -1.2vw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9f99d, #65a30d); border: 4px solid #fff; font: 900 clamp(30px, 8vh, 64px) / 1 "Nunito", sans-serif; color: #fff; text-shadow: 0 3px 0 #3f6212; animation: e4Wig 1.2s calc(var(--k) * .15s) ease-in-out infinite; }
.e4-seg:first-child { margin-left: 0; }
.e4-seg.hole { background: rgba(255, 255, 255, .6); border: 4px dashed #65a30d; color: #4d7c0f; text-shadow: none; }
.e4-seg.got { background: radial-gradient(circle at 35% 30%, #fef08a, #eab308); animation: stkBump .45s; }
.e4-head { width: min(22vh, 13.5vw); aspect-ratio: 1; margin-left: -2vw; background: center / contain no-repeat; z-index: 2; }
.e4-cat.munch { transform: translateX(5vw); }
.e4-cat.munch .e4-head { animation: e4Munch .3s 5; }
@keyframes e4Wig { 50% { transform: translateY(-8px); } }
@keyframes e4Munch { 50% { transform: scale(1.12, .9); } }
/* 首尾字母河 */
.e4m-gap .e4-play, .e4m-boats .e4-play { justify-content: flex-start; gap: 2vh; padding-top: 1vh; }
.e4-wordbar { display: flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 22px; background: rgba(255, 255, 255, .94); border: 4px solid #7dd3fc; box-shadow: 0 6px 0 #0284c7; }
.e4-lt { display: grid; place-items: center; width: min(11vh, 7vw); aspect-ratio: 1; border-radius: 16px; background: #0ea5e9; color: #fff; font: 900 clamp(28px, 7.4vh, 58px) / 1 "Nunito", sans-serif; }
.e4-lt.slot { background: #fff; border: 4px dashed #0ea5e9; color: #0ea5e9; }
.e4-lt.got { background: #22c55e; animation: stkBump .45s; }
.e4-boat { position: relative; isolation: isolate; width: min(46vh, 28vw); aspect-ratio: 1.9; margin-top: 4vh; transition: transform 2.2s ease-in; animation: e4Bob 2.4s ease-in-out infinite; }
.e4-boat i { position: absolute; inset: 0; background: center 55% / 100% auto no-repeat; }
.e4-cargo { position: absolute; z-index: -1; left: 25%; bottom: 52%; width: 50%; aspect-ratio: 1; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .2)); }
.e4-boat.sail { transform: translateX(90vw); }
@keyframes e4Bob { 50% { translate: 0 -7px; rotate: -1.5deg; } }
.e4-pads { display: flex; gap: 4vw; margin-top: auto; margin-bottom: 16vh; }
.e4-pad { position: relative; width: min(21vh, 13vw); aspect-ratio: 1.15; transition: transform .4s, opacity .4s; animation: e4Bob 3s ease-in-out infinite; }
.e4-pad:nth-child(2) { animation-delay: .7s; } .e4-pad:nth-child(3) { animation-delay: 1.4s; }
.e4-pad i { position: absolute; inset: 0; background: center / contain no-repeat; }
.e4-pad b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 900 clamp(30px, 8vh, 64px) / 1 "Nunito", sans-serif; color: #fff; -webkit-text-stroke: 3px #14532d; paint-order: stroke fill; }
.e4-pad.sink { transform: translateY(18px) scale(.8); opacity: .3; }
.e4-pad.ok i { filter: drop-shadow(0 0 14px #fde047); }
.e4-frog { position: absolute; z-index: 5; left: -3%; bottom: 14vh; width: min(17vh, 10vw); aspect-ratio: 1; background: center / contain no-repeat; pointer-events: none; }
.e4-flag { align-self: flex-start; display: flex; flex-direction: column-reverse; align-items: center; padding: 1vh 2.4vw; border-radius: 22px; background: #fffdf6; border: 5px solid #fb923c; box-shadow: 0 6px 0 #c2410c; }
.e4-flag b { font: 900 clamp(40px, 12vh, 96px) / 1 "Nunito", sans-serif; color: #c2410c; }
.e4-flag small { font: 900 clamp(14px, 3.2vh, 24px) "Nunito", sans-serif; color: #9a3412; }
.e4-fleet { display: flex; gap: 2vw; align-items: flex-end; margin-top: auto; margin-bottom: 14vh; }
.e4-boat.bo { width: min(40vh, 24vw); animation-delay: var(--d); }
.e4-boat.bo.no { opacity: .45; filter: grayscale(.5); }
.e4-boat.bo.ok { transform: translateY(-3vh) scale(1.08); transition: transform .5s; }
.e4-boat.bo.ok .e4-cargo { filter: drop-shadow(0 0 12px #fde047); }
/* 生字村莊 */
.e4-houses { position: absolute; left: 14%; right: 1%; bottom: 14%; display: flex; justify-content: space-around; align-items: flex-end; }
.e4-house { position: relative; width: min(40vh, 24vw); aspect-ratio: 1; display: block; }
.e4-house i { position: absolute; inset: 0; background: center / contain no-repeat; filter: hue-rotate(calc(var(--h, 0) * 1deg)) drop-shadow(0 8px 8px rgba(0, 0, 0, .15)); }
.e4-win { position: absolute; left: 50%; top: 42.5%; width: 23%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #fff; }
.e4-win img { width: 88%; height: 88%; }
.e4-house.ok { animation: stkBump .5s; }
.e4-house.ok i { filter: hue-rotate(calc(var(--h, 0) * 1deg)) drop-shadow(0 0 16px #fde047); }
.e4-house.no { opacity: .55; filter: grayscale(.6); }
.e4-postie { position: absolute; z-index: 5; left: 0; bottom: 0; width: min(28vh, 16vw); aspect-ratio: 1; transition: left .8s ease-in-out; pointer-events: none; }
.e4-postie i { position: absolute; inset: 0; background: center bottom / contain no-repeat; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); }
.e4-postie.walk i { animation: g2Walk .3s ease-in-out infinite; }
.e4-parcel { position: absolute; left: 72%; bottom: 0; width: 82%; aspect-ratio: 1; background: center / contain no-repeat; }
.e4-parcel b { position: absolute; left: 22%; right: 22%; top: 58%; transform: translateY(-50%); text-align: center; font: 900 clamp(14px, 3.4vh, 28px) / 1 "Nunito", sans-serif; color: #1e293b; }
.e4-parcel .ic-b svg, .e4-parcel .ic-b .ic { width: 1.4em; height: 1.4em; fill: #7c3aed; }
.e4-one { position: absolute; left: 0; right: 0; top: 0; bottom: 28%; display: grid; place-items: center; }
.e4-house.big { width: min(56vh, 32vw); }
.e4-hook { position: absolute; left: 50%; bottom: -6%; width: 62%; aspect-ratio: 1.5; transform: translateX(-50%); }
.e4-hook.on { animation: e4Swing 1.6s ease-in-out; transform-origin: 50% 0; }
.e4-hook i { position: absolute; inset: 0; background: center / contain no-repeat; }
.e4-hook b, .e4-sg b { position: absolute; left: 0; right: 0; top: 62%; transform: translateY(-50%); text-align: center; font: 900 clamp(18px, 4.6vh, 38px) / 1 "Nunito", sans-serif; color: #78350f; }
@keyframes e4Swing { 0% { transform: translateX(-50%) rotate(-10deg); } 40% { transform: translateX(-50%) rotate(7deg); } 70% { transform: translateX(-50%) rotate(-3deg); } 100% { transform: translateX(-50%); } }
.e4-signs { position: absolute; left: 14%; right: 1%; bottom: 1%; display: flex; justify-content: center; gap: 3vw; }
.e4-sg { position: relative; width: min(34vh, 20vw); aspect-ratio: 1.5; }
.e4-sg i { position: absolute; inset: 0; background: center / contain no-repeat; }
.e4-sg.no { opacity: .45; }
/* 拼音海灘 */
.e4-shells { display: flex; gap: 2vw; transition: gap .6s; }
.e4-shells.join { gap: 0; }
.e4-sh { position: relative; width: min(20vh, 12.5vw); aspect-ratio: 1; transition: transform .25s; }
.e4-sh i { position: absolute; inset: 0; background: center / contain no-repeat; }
.e4-sh b { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); font: 900 clamp(32px, 9vh, 72px) / 1 "Nunito", sans-serif; color: #9d174d; }
.e4-sh.on { transform: scale(1.18) translateY(-10px); }
.e4-sh.on i { filter: drop-shadow(0 0 14px #fde047); }
.e4-castles, .e4-buckets { display: flex; gap: 4vw; align-items: flex-end; }
.e4-cs, .e4-bk { position: relative; display: flex; flex-direction: column; align-items: center; width: min(24vh, 15vw); }
.e4-card { width: 74%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 18px; background: #fff; border: 4px solid #fde68a; box-shadow: 0 4px 0 #f59e0b; }
.e4-card img { width: 86%; height: 86%; }
.e4-cs i { width: 100%; aspect-ratio: 1.15; margin-top: -8%; background: center bottom / contain no-repeat; }
.e4-bk i { width: 72%; aspect-ratio: 1; margin-top: -4%; background: center / contain no-repeat; }
.e4-cs.ok .e4-card, .e4-bk.ok .e4-card { border-color: #22c55e; box-shadow: 0 0 0 7px #bbf7d0; }
.e4-cs.ok, .e4-bk.ok { animation: stkBump .5s; }
.e4-cs.no, .e4-bk.no { opacity: .45; }
.e4m-rhyme .e4-play { flex-direction: row; align-items: flex-end; justify-content: space-around; padding-bottom: 3vh; }
.e4-crab { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; width: min(26vh, 16vw); transition: transform .8s ease-in-out; }
.e4-crab .e4-card { width: 70%; }
.e4-crab i { width: 100%; aspect-ratio: 1.2; background: center / contain no-repeat; }
.e4-crab b { padding: 0 14px; border-radius: 14px; background: #fff; font: 900 clamp(20px, 4.6vh, 36px) "Nunito", sans-serif; color: #b91c1c; }
.e4-crab.walk i { animation: e4Scuttle .18s linear infinite; }
@keyframes e4Scuttle { 50% { transform: translateY(-5px) rotate(3deg); } }
.e4m-surf .e4-play { justify-content: center; gap: 5vh; }
.e4-boards { display: flex; gap: 2.4vw; }
.e4-sf { position: relative; width: min(38vh, 22vw); aspect-ratio: 2.8; animation: e4Bob 2s var(--d) ease-in-out infinite; transition: transform 1.4s ease-in; }
.e4-sf i { position: absolute; inset: 0; background: center / 100% auto no-repeat; }
.e4-sf b { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font: 900 clamp(28px, 7.4vh, 58px) / 1 "Nunito", sans-serif; color: #9a3412; }
.e4-sf.ok { transform: translateX(80vw) rotate(-8deg); }
.e4-sf.no { opacity: .45; }
/* 閱讀小屋 */
.e4-book { display: flex; align-items: center; gap: 14px; max-width: 94%; padding: 1.6vh 2.6vw; border-radius: 22px; background: #fffdf6; border: 5px solid #fbbf24; box-shadow: 0 8px 0 #d97706; }
.e4-book p { margin: 0; font: 800 clamp(24px, 6.4vh, 50px) / 1.2 "Nunito", sans-serif; color: #3b2a50; }
.e4-scenes { display: flex; gap: 2.2vw; }
.e4-sc { position: relative; display: block; width: min(36vh, 21vw); aspect-ratio: 1; border-radius: 24px; background: #fff !important; border: 5px solid #c4b5fd !important; box-shadow: 0 6px 0 #8b5cf6; overflow: hidden; }
.e4-sy, .e4-sx { position: absolute; }
.e4-sy { left: 10%; right: 10%; bottom: 3%; height: 64%; }
.e4-sx { left: 31%; width: 38%; height: 38%; }
.e4-sx.s-on { bottom: 50%; }
.e4-sx.s-under { left: 35%; width: 30%; height: 30%; bottom: 3%; z-index: 2; }
.e4-sy.s-next { left: 1%; right: 37%; }
.e4-sx.s-next { left: auto; right: 2%; bottom: 3%; width: 36%; height: 36%; }
.e4-cn { position: absolute; inset: 6%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 4%; }
.e4-cn:not(.two) > span { width: 42%; aspect-ratio: 1; }
.e4-cn.n1 > span { width: 62%; }
.e4-cn.n5 > span { width: 30%; }
.e4-sc.ok { border-color: #22c55e !important; box-shadow: 0 0 0 7px #bbf7d0; animation: stkBump .5s; }
.e4-sc.no { opacity: .45; }
.e4-ynrow { display: flex; align-items: center; gap: 4vw; }
.e4-sc.big { width: min(48vh, 28vw); }
.e4-yn { display: flex; flex-direction: column; gap: 3vh; }
.e4-yn button { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: min(36vh, 20vw); padding: 1.6vh 2vw; border-radius: 24px; color: #fff; }
.e4-yn b { font: 900 clamp(28px, 7.4vh, 58px) / 1 "Nunito", sans-serif; }
.e4-yn .ic, .e4-yn svg { width: clamp(28px, 7vh, 56px); height: clamp(28px, 7vh, 56px); fill: currentColor; }
.e4 .e4-y { background: #22c55e; box-shadow: 0 6px 0 #15803d; }
.e4 .e4-n { background: #f43f5e; box-shadow: 0 6px 0 #be123c; }
.e4-yn button.ok { box-shadow: 0 0 0 7px #bbf7d0; }
@media (max-height: 520px) {
  .e4-play { left: 18%; }
  .e4-wide .e4-play { top: 3%; }
  .e4-cc { width: min(36vh, 15vw); }
  .e4-fl { width: min(30vh, 12vw); } .e4-fl b { font-size: 30px; }
  .e4-bf { width: min(26vh, 10vw); } .e4-bf b { font-size: 24px; }
  .e4-lf { width: min(24vh, 10vw); } .e4-seg { width: min(22vh, 9vw); font-size: 30px; border-width: 3px; } .e4-head { width: min(28vh, 11vw); }
  .e4-lt { width: min(15vh, 6vw); font-size: 28px; } .e4-wordbar { padding: 4px 8px; gap: 5px; }
  .e4-boat { width: min(52vh, 22vw); margin-top: 0; } .e4-pads { margin-bottom: 8vh; } .e4-fleet { margin-bottom: 6vh; } .e4-frog { bottom: 6vh; } .e4-pad { width: min(26vh, 11vw); } .e4-pad b { font-size: 30px; }
  .e4-flag b { font-size: 40px; } .e4-boat.bo { width: min(50vh, 21vw); }
  .e4-house { width: min(50vh, 21vw); } .e4-house.big { width: min(66vh, 26vw); } .e4-postie { width: min(38vh, 14vw); }
  .e4-sg { width: min(42vh, 18vw); } .e4-hook b, .e4-sg b { font-size: 18px; }
  .e4-sh { width: min(26vh, 10vw); } .e4-sh b { font-size: 32px; } .e4-cs, .e4-bk { width: min(30vh, 12vw); } .e4-crab { width: min(32vh, 13vw); }
  .e4-sf { width: min(48vh, 20vw); } .e4-sf b { font-size: 26px; } .e4-ear.big { width: min(26vh, 11vw); }
  .e4-book p { font-size: 22px; } .e4-book { padding: 1vh 2vw; } .e4-sc { width: min(44vh, 18vw); } .e4-sc.big { width: min(56vh, 24vw); }
  .e4-yn b { font-size: 26px; } .e4-yn button { min-width: min(40vh, 16vw); }
}

/* ───────────── 超級市場動畫版（js/market2.js）───────────── */
.game .play:has(.mk2) { zoom: 1 !important; }
.mk2 { position: relative; display: block; padding: 0; background: transparent; box-shadow: none; overflow: hidden; font-family: "Nunito", "Segoe UI", sans-serif; }
.mk2 button { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; }
.mk2 img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.mk2-stage { position: absolute; inset: 0; }
.mk2-fly { position: fixed; z-index: 90; width: min(14vh, 9vw); aspect-ratio: 1; pointer-events: none; }
.mk2-fly .mk2-note2 { width: 100%; }
/* ① 屋企 */
.mk2-mum { position: absolute; left: 12%; bottom: 0; height: 92%; aspect-ratio: .75; background: center bottom / contain no-repeat; transform-origin: 50% 100%; animation: mk2Sway 2.6s ease-in-out infinite; transition: opacity .6s; }
@keyframes mk2Sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
.mk2-note { --w: min(54vh, 34vw); position: absolute; left: 42%; top: 2%; width: var(--w); aspect-ratio: .78; padding: calc(var(--w) * .2) calc(var(--w) * .12) calc(var(--w) * .08) calc(var(--w) * .16); background: center / 100% 100% no-repeat; display: flex; flex-direction: column; gap: 4%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .2)); transition: transform .6s, opacity .6s; }
.mk2-note.drop { animation: mk2Drop 1s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes mk2Drop { from { transform: translate(-28vw, 18vh) rotate(-30deg) scale(.2); opacity: 0; } }
.mk2-nt { font: 900 clamp(16px, 3.8vh, 30px) / 1 "Nunito", sans-serif; color: #b91c1c; }
.mk2-li { position: relative; display: flex; align-items: center; gap: 6%; }
.mk2-lp { flex: none; width: 30%; aspect-ratio: 1; display: grid; place-items: center; font-style: normal; }
.mk2-lp .ic, .mk2-lp svg { width: 70%; height: 70%; fill: #f59e0b; }
.mk2-lt { font: 900 clamp(18px, 4.6vh, 38px) / 1.1 "Nunito", sans-serif; color: #1e3a8a; }
.mk2-tick { position: absolute; right: -4%; display: none; width: clamp(20px, 5vh, 36px); height: clamp(20px, 5vh, 36px); border-radius: 50%; background: #22c55e; color: #fff; place-items: center; }
.mk2-tick .ic, .mk2-tick svg { width: 70%; height: 70%; fill: currentColor; }
.mk2-note.words .mk2-lt { font-size: clamp(14px, 3.4vh, 28px); }
.mk2-note.mini.words .mk2-lt { font-size: clamp(10px, 2.2vh, 17px); }
.mk2-li.done .mk2-tick { display: grid; animation: popIn .3s both; }
.mk2-li.done .mk2-lt { color: #16a34a; }
.mk2-go { position: absolute; right: 4%; bottom: 6%; display: flex; align-items: center; gap: 10px; padding: 2vh 3vw !important; border-radius: 99px; background: #ef4444 !important; color: #fff; box-shadow: 0 7px 0 #b91c1c; animation: stPulse 1.6s ease-in-out infinite; }
.mk2-go b { font: 900 clamp(24px, 6vh, 48px) / 1 "Nunito", sans-serif; }
.mk2-go .ic, .mk2-go svg { width: clamp(24px, 6vh, 46px); height: clamp(24px, 6vh, 46px); fill: currentColor; }
.s-home.leave .mk2-note { transform: translate(-30vw, 30vh) scale(.2); opacity: 0; }
.s-home.leave .mk2-mum, .s-home.leave .mk2-go { opacity: 0; }
/* ② 貨架 */
.mk2-strip { position: absolute; left: 0; top: 1%; height: 62%; width: calc(var(--n) * 50%); display: flex; transition: transform .6s ease-in-out; }
.mk2-sec { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 2.4%; }
.mk2-sign { padding: .6vh 2.4vw; margin-bottom: 1vh; border-radius: 16px; background: hsl(var(--h) 80% 58%); color: #fff; border: 4px solid #fff; box-shadow: 0 4px 0 hsl(var(--h) 60% 40%); font: 900 clamp(16px, 4vh, 32px) / 1.1 "Nunito", sans-serif; white-space: nowrap; }
.mk2-unit { flex: 1; width: 100%; display: flex; flex-direction: column; padding: 1.2vh 2% 0; border-radius: 18px 18px 6px 6px; background: linear-gradient(hsl(var(--h) 60% 94%), hsl(var(--h) 50% 86%)); border: 5px solid hsl(var(--h) 45% 62%); }
.mk2-row { flex: 1; display: flex; align-items: flex-end; justify-content: space-around; border-bottom: 1.6vh solid #c58a52; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); margin-bottom: 1vh; }
.mk2-it { position: relative; width: min(13vh, 8vw); aspect-ratio: 1; margin-bottom: 2px; transition: transform .2s; }
.mk2-it:hover, .mk2-it:active { transform: translateY(-6px) scale(1.06); }
.mk2-tag { position: absolute; right: -14%; top: -6%; padding: 1px 6px; border-radius: 8px; background: #fde047; border: 2px solid #ca8a04; color: #713f12; font: 900 clamp(12px, 2.8vh, 22px) / 1.1 "Nunito", sans-serif; }
.mk2-note.mini { --w: min(32vh, 20vw); left: auto; right: 1%; top: auto; bottom: 1%; gap: 2%; z-index: 4; }
.mk2-note.mini .mk2-nt { font-size: clamp(11px, 2.4vh, 18px); }
.mk2-note.mini .mk2-lt { font-size: clamp(12px, 2.8vh, 22px); }
.mk2-note.mini .mk2-lp { width: 26%; }
.mk2-note.mini .mk2-tick { width: clamp(14px, 3vh, 22px); height: clamp(14px, 3vh, 22px); right: -6%; }
.mk2-kid { position: absolute; z-index: 5; left: 1%; bottom: 0; height: 37%; aspect-ratio: 1; transition: transform .9s ease-in; pointer-events: none; }
.mk2-kid > i { position: absolute; inset: 0; background: center bottom / contain no-repeat; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); }
.mk2-kid.walk > i { animation: g2Walk .3s ease-in-out infinite; }
.mk2-kid.bump > i { animation: stkBump .4s; }
.mk2-kid.off { transform: translateX(110vw); }
.mk2-cart { position: absolute; left: 52%; right: 4%; top: 26%; height: 30%; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; justify-content: center; }
.mk2-cart i { width: 46%; aspect-ratio: 1; margin: -10% -8%; animation: popIn .3s both; }
.mk2-arr { position: absolute; z-index: 6; top: 24%; display: grid; place-items: center; width: min(11vh, 7vw); aspect-ratio: 1; border-radius: 50%; background: #fff !important; border: 4px solid #ef4444 !important; color: #ef4444; box-shadow: 0 5px 0 #b91c1c; }
.mk2-arr .ic, .mk2-arr svg { width: 60%; height: 60%; fill: currentColor; }
.mk2-arr.l { left: .5%; } .mk2-arr.r { right: .5%; }
.mk2-arr[hidden] { display: none; }
.mk2-pay { position: absolute; z-index: 6; left: 50%; bottom: 6%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 1.6vh 2.6vw !important; border-radius: 99px; background: #16a34a !important; color: #fff; box-shadow: 0 7px 0 #166534; animation: popIn .4s both, stPulse 1.6s .4s ease-in-out infinite; }
.mk2-pay[hidden] { display: none; }
.mk2-pay b { font: 900 clamp(22px, 5.4vh, 44px) / 1 "Nunito", sans-serif; }
.mk2-pay .ic, .mk2-pay svg { width: clamp(22px, 5vh, 40px); height: clamp(22px, 5vh, 40px); fill: currentColor; }
/* ③ 收銀台 */
.mk2-cashier { position: absolute; right: 1%; top: 2%; height: 46%; aspect-ratio: 1; background: center bottom / contain no-repeat; animation: mk2Sway 2.6s ease-in-out infinite; }
.mk2-belt { position: absolute; left: 2%; right: 22%; top: 47%; height: 15%; border-radius: 18px; background: #334155; border: 6px solid #94a3b8; overflow: hidden; }
.mk2-run { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(255, 255, 255, .08) 30px 34px); animation: mk2Belt .8s linear infinite; }
@keyframes mk2Belt { to { background-position: 34px 0; } }
.mk2-scan { position: absolute; right: 0; top: 0; bottom: 0; width: 10px; background: #ef4444; opacity: .4; }
.mk2-scan.on { animation: mk2Scan .4s; }
@keyframes mk2Scan { 50% { opacity: 1; box-shadow: 0 0 24px 8px #ef4444; } }
.mk2-on { position: absolute; inset: 6% 4%; display: flex; flex-direction: row-reverse; align-items: center; gap: 1%; }
.mk2-onit { height: 100%; aspect-ratio: 1; animation: mk2Slide .5s ease-out both; }
.mk2-onit.done { filter: drop-shadow(0 0 6px #4ade80); }
@keyframes mk2Slide { from { transform: translateX(-60vw); } }
.mk2-rcpt { position: absolute; left: 2%; top: 1%; width: min(46vh, 30vw); max-height: 44%; padding: 1vh 1.4vw; border-radius: 6px 6px 16px 16px; background: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .15); display: flex; flex-direction: column; gap: .6vh; }
.mk2-rcpt > b { display: flex; align-items: center; gap: 6px; font: 900 clamp(14px, 3vh, 24px) "Nunito", sans-serif; color: #475569; }
.mk2-rcpt > b .ic, .mk2-rcpt > b svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.mk2-lines { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.mk2-ln { display: flex; align-items: center; gap: 2px; animation: popIn .3s both; }
.mk2-ln i { width: min(6vh, 3.6vw); aspect-ratio: 1; }
.mk2-ln b { font: 900 clamp(14px, 3.2vh, 26px) "Nunito", sans-serif; color: #1e293b; }
.mk2-sum { font: 900 clamp(18px, 4.6vh, 38px) "Nunito", sans-serif; color: #b91c1c; border-top: 3px dashed #cbd5e1; }
.mk2-sum:empty { display: none; }
.mk2-ask { position: absolute; left: 2%; right: 2%; bottom: 3%; display: flex; align-items: center; justify-content: center; gap: 2.4vw; }
.mk2-q { padding: 1vh 2vw; border-radius: 18px; background: rgba(255, 255, 255, .94); font: 900 clamp(22px, 5.6vh, 46px) / 1 "Nunito", sans-serif; color: #1e293b; }
.mk2-n { width: min(17vh, 11vw); aspect-ratio: 1.25; border-radius: 22px; background: #fffdf6 !important; border: 5px solid #fca5a5 !important; box-shadow: 0 5px 0 #ef4444; font: 900 clamp(30px, 8vh, 64px) / 1 "Nunito", sans-serif; color: #7f1d1d; animation: popIn .35s both; }
.mk2-n.ok { border-color: #22c55e !important; box-shadow: 0 0 0 7px #bbf7d0; }
.mk2-purse, .mk2-tray { display: flex; align-items: center; gap: 1vw; }
.mk2-tray { min-width: min(46vh, 28vw); min-height: min(15vh, 9vw); padding: .6vh 1vw; border-radius: 20px; background: rgba(255, 255, 255, .85); border: 4px dashed #f59e0b; flex-wrap: wrap; }
.mk2-tv { margin-left: auto; font: 900 clamp(22px, 5.6vh, 46px) "Nunito", sans-serif; color: #92400e; }
.mk2-coin { display: grid; place-items: center; width: min(13vh, 8vw); aspect-ratio: 1; border-radius: 50%; border: 4px solid rgba(0, 0, 0, .15) !important; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12), 0 4px 0 rgba(0, 0, 0, .18); font: 900 clamp(18px, 4.4vh, 34px) / 1 "Nunito", sans-serif; color: #334155; }
.mk2-coin.c1 { background: radial-gradient(circle at 35% 30%, #f8fafc, #cbd5e1) !important; }
.mk2-coin.c2 { background: radial-gradient(circle at 35% 30%, #f1f5f9, #94a3b8) !important; width: min(14vh, 8.6vw); }
.mk2-coin.c5 { background: radial-gradient(circle at 35% 30%, #fef9c3, #eab308) !important; color: #713f12; width: min(15vh, 9.2vw); }
.mk2-coin.in { width: min(9vh, 5.6vw); font-size: clamp(13px, 3vh, 22px); animation: popIn .25s both; }
.mk2-note2 { display: grid; place-items: center; width: min(30vh, 19vw); aspect-ratio: 2; border-radius: 12px; background: linear-gradient(135deg, #86efac, #22c55e) !important; border: 5px solid #fff !important; box-shadow: 0 6px 0 #15803d; animation: stPulse 1.6s ease-in-out infinite; }
.mk2-note2 b { font: 900 clamp(28px, 8vh, 64px) / 1 "Nunito", sans-serif; color: #fff; text-shadow: 0 3px 0 #15803d; }
/* ④ 回家 */
.mk2-mum.hug { left: 26%; animation: mk2Hug 1s cubic-bezier(.3, 1.5, .5, 1) both, mk2Sway 2.6s 1s ease-in-out infinite; }
@keyframes mk2Hug { from { transform: translateX(-30vw) scale(.6); opacity: 0; } }
.mk2-bag { position: absolute; left: 56%; bottom: 6%; width: min(36vh, 22vw); aspect-ratio: 1; background: center bottom / contain no-repeat; display: flex; justify-content: center; align-items: flex-start; padding-top: 6%; animation: mk2Drop .9s .3s cubic-bezier(.3, 1.4, .5, 1) both; }
.mk2-bag i { width: 32%; aspect-ratio: 1; margin: 0 -4%; }
.mk2-heart { position: absolute; left: calc(40% + var(--x)); bottom: 50%; font-style: normal; font-size: clamp(26px, 7vh, 56px); color: #f43f5e; opacity: 0; animation: cbHrt 2s var(--d) ease-out infinite; }
@media (max-height: 520px) {
  .s-aisle .mk2-strip { top: 35%; height: 47%; } .mk2-mum { height: 76%; }
  .mk2-rcpt { left: 35%; } .mk2-belt { top: 45%; } .mk2-arr { top: 42%; }
  .mk2-note { --w: min(62vh, 25vw); } .mk2-nt { font-size: 15px; } .mk2-lt { font-size: 18px; }
  .mk2-go { padding: 1.4vh 2.4vw !important; } .mk2-go b { font-size: 24px; }
  .mk2-it { width: min(15vh, 6.4vw); } .mk2-tag { font-size: 11px; } .mk2-sign { font-size: 14px; border-width: 3px; padding: 2px 12px; }
  .mk2-row { border-bottom-width: 7px; }
  .mk2-kid { height: 44%; } .mk2-note.mini { --w: min(40vh, 15vw); }
  .mk2-note.mini .mk2-lt { font-size: 12px; } .mk2-note.mini .mk2-nt { font-size: 10px; }
  .mk2-arr { width: min(14vh, 6vw); border-width: 3px !important; }
  .mk2-pay b { font-size: 20px; }
  .mk2-rcpt { width: min(56vh, 26vw); } .mk2-rcpt > b { font-size: 12px; } .mk2-ln b { font-size: 13px; } .mk2-sum { font-size: 16px; }
  .mk2-q { font-size: 20px; } .mk2-n { width: min(22vh, 9vw); font-size: 28px; border-width: 4px !important; }
  .mk2-coin { width: min(17vh, 7vw); font-size: 16px; } .mk2-coin.c2 { width: min(18vh, 7.4vw); } .mk2-coin.c5 { width: min(19vh, 7.8vw); } .mk2-coin.in { width: min(12vh, 5vw); font-size: 12px; }
  .mk2-tray { min-height: min(19vh, 8vw); } .mk2-tv { font-size: 20px; } .mk2-note2 { width: min(36vh, 16vw); } .mk2-note2 b { font-size: 28px; }
}
/* 英文大冒險加深：多格填字、兩樣東西一起數、四個衝浪板 */
.e4-seg.now, .e4-lt.slot.now { box-shadow: 0 0 0 5px #fde047; animation: stPulse 1.3s ease-in-out infinite; }
.e4-cn.two { flex-direction: column; flex-wrap: nowrap; gap: 4%; }
.e4-cn.two > .e4-g { width: 100%; flex: 1; display: flex; justify-content: center; align-items: center; gap: 3%; min-height: 0; }
.e4-g + .e4-g { border-top: 3px dashed #e9d5ff; padding-top: 3%; }
.e4-cn.two .e4-g span { width: 31%; height: auto; max-height: 100%; aspect-ratio: 1; }
.e4-boards.n4 { display: grid; grid-template-columns: repeat(2, auto); gap: 2vh 3vw; }
.e4-rocks, .e4-buckets:has(.e4-bk:nth-child(4)) { gap: 2.4vw; }
.e4-buckets:has(.e4-bk:nth-child(4)) .e4-bk { width: min(21vh, 13vw); }

/* ───────────── 拼字火車第三版（js/spelltrain.js）───────────── */
.game .play:has(.st2) { zoom: 1 !important; }
.st2 { position: relative; display: block; padding: 0; overflow: hidden; background-color: #cdeffd; font-family: "Nunito", "Segoe UI", sans-serif; }
.st2 button { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; }
.st2 img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.st2-cc { position: absolute; z-index: 4; left: 0; bottom: 1%; width: min(28vh, 16vw); aspect-ratio: 1; background: center bottom / contain no-repeat; transform-origin: 50% 100%; animation: e4Idle 2.8s ease-in-out infinite; pointer-events: none; }
.st2-cc.yay { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 3; }
.st2-cc.oops { animation: e4No .5s; }
.st2-top { position: absolute; left: 0; right: 0; top: 2%; height: 36%; display: grid; place-items: center; }
.st2-pic { position: relative; display: grid; place-items: center; width: min(29vh, 22vw); height: min(29vh, 22vw); padding: 3%; border-radius: 24px; background: #fffdf6; border: 5px solid #f6c453; box-shadow: 0 6px 0 rgba(180, 120, 20, .25); }
.st2-pic.listen { background: #f5f3ff !important; border: 5px solid #a78bfa !important; color: #7c3aed; animation: stPulse 1.6s ease-in-out infinite; }
.st2-pic.listen .ic, .st2-pic.listen svg { width: 60%; height: 60%; fill: currentColor; }
.st2-hear { position: absolute; right: -16px; top: -14px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #8b5cf6 !important; border: 3px solid #fff !important; color: #fff; }
.st2-hear .ic, .st2-hear svg { width: 55%; height: 55%; fill: currentColor; }
.st2-track { position: absolute; left: 16%; right: 1%; top: 40%; height: 30%; display: flex; align-items: flex-end; justify-content: center; }
.st2-track .tt-rail { position: absolute; left: -20%; right: -2%; bottom: 0; }
.st2-train { --w: min(15vh, calc(70vw / (var(--n) + 1.8)), 12vw); position: relative; z-index: 2; display: flex; align-items: flex-end; gap: .3vw; margin-bottom: calc(var(--w) * -.15); }
.st2-wg { position: relative; width: var(--w); aspect-ratio: .9; display: grid; place-items: start center; }
.st2-wimg { position: absolute; inset: auto 0 0 0; height: 62%; object-position: bottom; }
.st2-slot { position: relative; z-index: 1; width: 72%; aspect-ratio: 1; margin-top: 4%; display: grid; place-items: center; border-radius: 12px; border: 3px dashed #94a3b8; background: rgba(255, 255, 255, .6); font: 900 calc(var(--w) * .46) / 1 "Nunito", sans-serif; color: #64748b; }
.st2-slot.tgt { border: 4px solid #f59e0b; background: #fff7d6; color: #f59e0b; box-shadow: 0 0 0 4px rgba(253, 224, 71, .6); animation: stPulse 1.3s ease-in-out infinite; }
.st2-slot.got { border: 3px solid #fff; background: linear-gradient(#fcd9a8, #e9b06b); color: #7c2d12; box-shadow: 0 3px 0 #b7793a; animation: stkBump .4s; }
.st2-slot.got.fixed { animation: none; }
.st2-wg.cargo { width: calc(var(--w) * 1.6); }
.st2-load { position: relative; z-index: 1; width: 78%; aspect-ratio: 1; margin-top: -10%; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .2)); }
.st2-eng { position: relative; width: calc(var(--w) * 1.5); aspect-ratio: 1.2; }
.st2-eng img { object-position: bottom; }
.st2-crates { position: absolute; left: 16%; right: 1%; bottom: 2%; height: 24%; display: flex; justify-content: center; align-items: flex-end; gap: 1.2vw; }
.st2-cr { position: relative; height: 100%; max-height: calc(76vw / var(--k, 4) - 1vw); aspect-ratio: 1; background: url(../img/flat/st-crate.webp) center / contain no-repeat !important; transition: transform .15s; animation: popIn .35s both; }
.st2-cr:nth-child(2) { animation-delay: .05s; } .st2-cr:nth-child(3) { animation-delay: .1s; } .st2-cr:nth-child(4) { animation-delay: .15s; } .st2-cr:nth-child(5) { animation-delay: .2s; }
.st2-cr b { position: absolute; inset: 22% 24% 22%; display: grid; place-items: center; font: 900 clamp(26px, 9vh, 72px) / 1 "Nunito", sans-serif; color: #7c2d12; }
.st2-cr:active { transform: scale(.92); }
.st2-cr.used { visibility: hidden; }
.st2-cr.no { opacity: .4; filter: grayscale(.6); }
.st2-cr.hint b { color: #ea580c; animation: stPulse 1s ease-in-out infinite; }
.st2-cr.hint { filter: drop-shadow(0 0 10px #fde047); }
.st2-fly { position: fixed; z-index: 90; pointer-events: none; margin: 0; animation: none; }
/* 隧道 */
.st2m-tunnel .st2-track { top: auto; bottom: 3%; height: 34%; justify-content: flex-start; padding-left: 4%; }
.st2-tunnels { position: absolute; left: 18%; right: 1%; top: 2%; height: 50%; display: flex; justify-content: space-around; align-items: flex-end; }
.st2-tn { position: relative; height: 100%; aspect-ratio: 1; background: url(../img/flat/st-tunnel.webp) center bottom / contain no-repeat !important; transition: transform .2s, filter .2s; }
.st2-tn b { position: absolute; left: 30%; right: 30%; top: 19%; text-align: center; font: 900 clamp(30px, 10vh, 84px) / 1 "Nunito", sans-serif; color: #7c2d12; }
.st2-tn:hover { transform: translateY(-4px); }
.st2-tn.no { opacity: .45; filter: grayscale(.6); }
.st2-tn.ok, .st2-tn.in { filter: drop-shadow(0 0 16px #fde047); transform: scale(1.06); }
@media (max-height: 520px) {
  .st2-wide .st2-top { left: 30%; top: 4%; height: 32%; } .st2-pic { width: min(34vh, 18vw); height: min(34vh, 18vw); }
  .st2-cr { max-height: calc(66vw / var(--k, 4) - 1vw); }
  .st2-cc { width: min(36vh, 14vw); }
  .st2-hear { width: 36px; height: 36px; right: -12px; top: -10px; }
  .st2-train { --w: min(19vh, calc(60vw / (var(--n) + 1.8)), 10vw); }
  .st2-crates { height: 26%; gap: .8vw; } .st2-cr b { font-size: 30px; }
  .st2-tunnels { top: 22%; height: 40%; } .st2-tn b { font-size: 30px; }
  .st2m-tunnel .st2-track { height: 32%; }
}

/* ───────────── 動物野餐（js/picnic.js）───────────── */
.game .play:has(.pc2) { zoom: 1 !important; }
.pc2 { position: relative; display: block; padding: 0; overflow: hidden; background-color: #e8f7e0; font-family: "Nunito", "Segoe UI", sans-serif; }
.pc2 button { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; }
.pc2 img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.pc2-row { position: absolute; left: 22%; right: 17%; top: 2%; bottom: 27%; display: flex; justify-content: space-around; align-items: flex-end; gap: 1vw; }
.pc2-an { position: relative; flex: 0 1 calc(100% / var(--n)); max-width: min(30vh, 19vw); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.pc2-ani { width: 86%; aspect-ratio: 1; transform-origin: 50% 100%; animation: e4Idle 2.6s calc(var(--h) * .01s) ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .18)); }
.pc2-an.jump .pc2-ani { animation: stkBump .4s; }
.pc2-an.happy .pc2-ani { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 2; }
.pc2-an.full .pc2-ani, .pc2-an.sad .pc2-ani { animation: e4No .5s 2; filter: grayscale(.35) drop-shadow(0 6px 6px rgba(0, 0, 0, .18)); }
.pc2-an.sad::after { content: "☹"; position: absolute; top: 4%; right: 6%; font-size: clamp(22px, 6vh, 46px); color: #2563eb; }
.pc2-an.happy::after { content: "♥"; position: absolute; top: 2%; right: 8%; font-size: clamp(22px, 6vh, 46px); color: #f43f5e; animation: popIn .4s both; }
.pc2-num { position: relative; z-index: 2; margin-bottom: -4%; min-width: 1.6em; padding: 2px 10px; border-radius: 99px; background: #fff; border: 4px solid hsl(var(--h) 75% 62%); font: 900 clamp(18px, 5vh, 40px) / 1.1 "Nunito", sans-serif; color: hsl(var(--h) 60% 32%); box-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.pc2-an.counted .pc2-num { background: #fde047; border-color: #f59e0b; color: #7c2d12; animation: stkBump .4s; }
.pc2-plate { position: relative; width: 100%; aspect-ratio: 1.5; margin-top: -10%; background: url(../img/flat/pc-plate.webp) center / 100% 100% no-repeat; }
.pc2-on { position: absolute; inset: 14% 12%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2%; }
.pc2-food { width: 30%; aspect-ratio: 1; animation: popIn .3s both; pointer-events: none; }
.pc2-back { position: absolute; z-index: 3; right: -6%; top: -14%; display: none; place-items: center; width: clamp(34px, 7vh, 52px); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 3px solid #f97316; color: #ea580c; font: 900 clamp(18px, 4vh, 28px) / 1 "Nunito", sans-serif; box-shadow: 0 3px 0 #c2410c; cursor: pointer; }
.pc2-back:active { transform: scale(.9); }
.pc2m-share .has > .pc2-back, .pc2m-howmany .has > .pc2-back { display: grid; }
.pc2-cc > .pc2-back { right: 0; top: auto; bottom: 30%; }
.pc2-on.many .pc2-food { width: 24%; }
.pc2-on.lots .pc2-food { width: 18%; }
.pc2-bask { position: absolute; left: 1%; bottom: 2%; width: 20%; height: 48%; }
.pc2-bimg { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: center bottom / contain no-repeat; }
.pc2-pile { position: absolute; z-index: 2; left: 10%; right: 10%; bottom: 40%; height: 56%; display: flex; flex-wrap: wrap-reverse; justify-content: center; align-content: flex-start; }
.pc2-pile i { width: 26%; aspect-ratio: 1; margin: -4% -3%; transform: rotate(calc(var(--i) * 37deg)); }
.pc2-left { position: absolute; z-index: 3; right: 0; bottom: 4%; min-width: 1.6em; padding: 2px 10px; border-radius: 99px; background: #ef4444; color: #fff; border: 3px solid #fff; font: 900 clamp(18px, 4.6vh, 36px) / 1.1 "Nunito", sans-serif; text-align: center; }
.pc2-left.zero { background: #94a3b8; }
.pc2-cc { position: absolute; right: 1%; bottom: 2%; width: 16%; height: 42%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.pc2-cc > i { width: 100%; flex: 1; background: center bottom / contain no-repeat; transform-origin: 50% 100%; animation: e4Idle 2.8s ease-in-out infinite; }
.pc2-cc.yay > i { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 2; }
.pc2-cc .pc2-on { position: relative; inset: auto; width: 100%; min-height: 0; }
.pc2-cc .pc2-food { width: 34%; }
button.pc2-cc::before { content: "Chuchu"; position: absolute; top: -2%; padding: 1px 10px; border-radius: 99px; background: #fde047; font: 900 clamp(12px, 2.6vh, 20px) "Nunito", sans-serif; color: #713f12; }
.pc2-bar { position: absolute; left: 22%; right: 17%; bottom: 2%; height: 22%; display: flex; align-items: center; justify-content: center; gap: 1.6vw; }
.pc2-bar:empty { display: none; }
.pc2-q { padding: 1vh 2vw; border-radius: 18px; background: rgba(255, 255, 255, .95); font: 900 clamp(20px, 5vh, 40px) / 1 "Nunito", sans-serif; color: #1e3a8a; }
.pc2-seq { display: flex; align-items: center; gap: .6vw; padding: 1vh 1.4vw; border-radius: 18px; background: rgba(255, 255, 255, .95); }
.pc2-s { display: grid; place-items: center; min-width: min(10vh, 6vw); aspect-ratio: 1; border-radius: 14px; border: 3px dashed #93c5fd; font: 900 clamp(22px, 6vh, 48px) / 1 "Nunito", sans-serif; font-style: normal; color: #93c5fd; }
.pc2-s.on { border: 3px solid #f59e0b; background: #fde047; color: #7c2d12; animation: stkBump .4s; }
.pc2-seq em { font-style: normal; font-weight: 900; color: #64748b; }
.pc2-o { width: min(16vh, 10vw); aspect-ratio: 1.2; border-radius: 22px; background: #fffdf6 !important; border: 5px solid #fdba74 !important; box-shadow: 0 5px 0 #ea580c; font: 900 clamp(30px, 8vh, 64px) / 1 "Nunito", sans-serif; color: #7c2d12; animation: popIn .35s both; }
.pc2-o.ok { border-color: #22c55e !important; box-shadow: 0 0 0 7px #bbf7d0; }
.pc2-fly { position: fixed; z-index: 90; width: min(9vh, 6vw); aspect-ratio: 1; pointer-events: none; }
.pc2m-feed .pc2-bar, .pc2m-howmany .pc2-bar { bottom: 1%; }
@media (max-height: 520px) {
  .pc2-row { top: 22%; bottom: 22%; left: 20%; right: 15%; }
  .pc2-bask { height: 52%; width: 18%; } .pc2-cc { width: 14%; height: 46%; }
  .pc2-bar { height: 21%; left: 20%; right: 15%; } .pc2-q { font-size: 18px; } .pc2-s { font-size: 20px; min-width: 34px; }
  .pc2-num { font-size: 16px; border-width: 3px; padding: 0 7px; }
  .pc2-o { width: min(20vh, 8vw); font-size: 28px; border-width: 4px !important; }
}

/* ───────────── 湊數巴士動畫版（js/bus2.js）───────────── */
.game .play:has(.nb) { zoom: 1 !important; }
.nb { position: relative; display: block; padding: 0; overflow: hidden; background-color: #dff3fb; font-family: "Nunito", "Segoe UI", sans-serif; }
.nb button { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; }
.nb-road { position: absolute; left: 1%; right: 21%; top: 4%; bottom: 30%; display: flex; align-items: flex-end; justify-content: center; gap: 2vw; }
.nb-bus { --bw: min(62vw, 108vh); position: relative; width: var(--bw); aspect-ratio: 2.3; padding: 4% 16% 9% 4%; border-radius: 6% 18% 8% 8% / 12% 30% 12% 12%; background: linear-gradient(#fde047 0 62%, #facc15 62% 70%, #fde047 70%); border: 5px solid #ca8a04; box-shadow: 0 8px 0 rgba(0, 0, 0, .15); }
.nb.two .nb-road { right: 19%; gap: .6vw; }
.nb.two .nb-bus { --bw: min(35vw, 58vh); aspect-ratio: 1.55; padding: 4% 3% 9% 3%; }
.nb.two .nb-bus.second { width: calc(var(--bw) * 1.15); aspect-ratio: 1.78; padding: 3.5% 15% 7.8% 2.6%; }
.nb.two .nb-bus:not(.second) .nb-drv { display: none; }
.nb.two .nb-wins { gap: 3%; }
.nb.two .nb-p { inset: -3% -2% 0; }
.nb-bus.rev { animation: nbRev .12s linear infinite; }
@keyframes nbRev { 50% { transform: translateY(-2px); } }
.nb-bus.c5 { --bw: min(46vw, 80vh); aspect-ratio: 2.9; }
.nb-wins { position: relative; height: 100%; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: 4%; }
.nb-bus.c5 .nb-wins { grid-template-rows: 1fr; }
.nb-win { position: relative; border-radius: 14%; background: #e0f2fe; border: 3px solid #fff; box-shadow: inset 0 -6px 0 rgba(14, 116, 144, .12); }
.nb-wins .nb-win:nth-child(5) { margin-right: 0; }
.nb-wins .nb-win:nth-child(n+6) { background: #dbeafe; }
.nb-win.gap { animation: stPulse 1s ease-in-out infinite; border-color: #f43f5e; background: #ffe4e6; }
.nb-p { position: absolute; inset: 6%; background: center bottom / contain no-repeat; }
.nb-win.new .nb-p { animation: popIn .3s both; }
.nb-fly { position: fixed; z-index: 90; inset: auto; width: min(9vh, 5.4vw); aspect-ratio: 1; pointer-events: none; }
.nb-drv { position: absolute; right: 1.5%; top: 6%; width: 13%; aspect-ratio: .9; border-radius: 12px 30px 8px 8px; background: #e0f2fe center bottom / 92% no-repeat; border: 3px solid #fff; }
.nb-sign { position: absolute; left: 50%; top: -26%; transform: translateX(-50%); padding: 2px 14px; border-radius: 12px; background: #1e293b; color: #fde047; border: 3px solid #fff; font: 900 clamp(16px, 4.6vh, 34px) / 1.1 "Nunito", sans-serif; white-space: nowrap; }
.nb-sign::after { content: " seats"; font-size: .6em; color: #fef9c3; }
.nb-sign.big::after { content: ""; }
.nb-sign.big { background: #7c3aed; color: #fff; font-size: clamp(20px, 6vh, 46px); }
.nb-cur { position: absolute; left: 3.6%; right: 15.6%; top: 3.6%; bottom: 8.6%; border-radius: 10px; background: repeating-linear-gradient(90deg, #f472b6 0 14px, #ec4899 14px 28px); transform-origin: 50% 0; transform: scaleY(0); transition: transform .45s ease-in-out; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .12); }
.nb-bus.cur-on .nb-cur { transform: scaleY(1); }
.nb-tag { position: absolute; left: -2%; bottom: -18%; }
.nb-out { display: flex; gap: 2px; }
.nb-out .nb-p { position: relative; inset: auto; display: block; width: min(8vh, 5vw); aspect-ratio: 1; animation: e4No .5s 3; }
.nb-wh { position: absolute; bottom: -12%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #cbd5e1 0 28%, #1e293b 30%); border: 3px solid #0f172a; }
.nb-wh.a { left: 12%; } .nb-wh.b { right: 18%; }
.nb.two .nb-bus.second { opacity: .98; }
.nb-stop { position: absolute; right: 1%; top: 4%; bottom: 4%; width: 18%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nb-pole { position: absolute; top: 4%; bottom: 0; left: 50%; width: 10px; transform: translateX(-50%); border-radius: 5px; background: #64748b; }
.nb-opts { position: relative; display: flex; flex-direction: column; gap: 2.4vh; }
.nb-o { display: grid; place-items: center; width: min(17vh, 11vw); aspect-ratio: 1; border-radius: 50%; background: #fff !important; border: 8px solid #ef4444 !important; box-shadow: 0 5px 0 rgba(0, 0, 0, .2); font: 900 clamp(32px, 9vh, 70px) / 1 "Nunito", sans-serif; color: #1e3a8a; animation: popIn .35s both; }
.nb-o:nth-child(2) { animation-delay: .08s; } .nb-o:nth-child(3) { animation-delay: .16s; }
.nb-o.ok { border-color: #22c55e !important; box-shadow: 0 0 0 7px #bbf7d0; }
.nb-bar { position: absolute; left: 3%; right: 21%; bottom: 2%; height: 24%; display: flex; align-items: center; justify-content: center; gap: 3vw; }
.nb-eq { padding: 1.2vh 2.6vw; border-radius: 22px; background: rgba(255, 255, 255, .95); font: 900 clamp(26px, 7vh, 58px) / 1 "Nunito", sans-serif; color: #1e293b; white-space: nowrap; }
.nb-eq b { color: #ea580c; }
.nb-bond { position: relative; width: min(24vh, 15vw); aspect-ratio: 1.35; flex: none; }
.nb-bond::before, .nb-bond::after { content: ""; position: absolute; top: 34%; height: 4px; width: 32%; background: #64748b; transform-origin: 0 0; }
.nb-bond::before { left: 50%; transform: rotate(125deg); } .nb-bond::after { left: 50%; transform: rotate(55deg); }
.nb-bond b { position: absolute; z-index: 1; display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: 50%; background: #fff; border: 4px solid #8b5cf6; font: 900 clamp(18px, 5vh, 40px) / 1 "Nunito", sans-serif; color: #4c1d95; }
.nb-bond .w { left: 29%; top: 0; background: #ede9fe; }
.nb-bond .a { left: 0; bottom: 0; } .nb-bond .b { right: 0; bottom: 0; }
.nb-bond b:empty::before { content: "?"; color: #a78bfa; }
@media (max-height: 520px) {
  .nb-road { top: 26%; bottom: 28%; left: 20%; right: 17%; }
  .nb-bus { --bw: min(44vw, 92vh); border-width: 4px; } .nb.two .nb-bus { --bw: min(29vw, 58vh); } .nb.two .nb-road { left: 13%; right: 16%; } .nb-bus.c5 { --bw: min(40vw, 84vh); }
  .nb-win { border-width: 2px; } .nb-sign { font-size: 15px; top: -30%; padding: 0 8px; } .nb-sign.big { font-size: 20px; }
  .nb-stop { width: 15%; } .nb-o { width: min(23vh, 9vw); border-width: 6px !important; font-size: 30px; } .nb-opts { gap: 1.6vh; }
  .nb-bar { height: 25%; right: 17%; } .nb-eq { font-size: 24px; padding: 6px 14px; } .nb-bond { width: min(30vh, 11vw); } .nb-bond b { font-size: 16px; border-width: 3px; }
}

/* ───────────── 數數小精靈計時版（js/fairy.js）───────────── */
.game .play:has(.fy) { zoom: 1 !important; }
.fy { position: relative; display: block; padding: 0; overflow: hidden; background-color: #2e1065; font-family: "Nunito", "Segoe UI", sans-serif; }
.fy button { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; }
.fy-sky { position: absolute; left: 3%; right: 20%; top: 3%; bottom: 22%; }
.fy-f { position: absolute; left: var(--x); top: var(--y); width: min(15vh, 9vw); aspect-ratio: 1; transform: translate(-50%, -50%); animation: fyFloat var(--t) var(--d) ease-in-out infinite alternate; }
.sp0 .fy-f { animation-duration: calc(var(--t) * 1.4); }
@keyframes fyFloat { 0% { translate: 0 0; } 50% { translate: var(--dx) calc(var(--dy) * -1); } 100% { translate: calc(var(--dx) * -.6) var(--dy); } }
.fy-glow { position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(circle, hsl(var(--h) 100% 75% / .95) 0 30%, hsl(var(--h) 100% 65% / .45) 50%, transparent 70%); animation: fyGlow 1.4s ease-in-out infinite alternate; }
@keyframes fyGlow { to { transform: scale(1.12); opacity: .8; } }
.fy-img { position: absolute; inset: 8%; background: center / contain no-repeat; filter: drop-shadow(0 0 6px hsl(var(--h, 48) 100% 80%)); }
.fy-f b { position: absolute; z-index: 2; left: 50%; bottom: -8%; transform: translateX(-50%); min-width: 1.5em; padding: 0 8px; border-radius: 99px; background: #fff; border: 3px solid hsl(var(--h) 80% 60%); font: 900 clamp(18px, 5vh, 40px) / 1.1 "Nunito", sans-serif; color: #3b0764; }
.fy-f.got { visibility: hidden; pointer-events: none; }
.fy-f.no .fy-img { filter: grayscale(.6); }
.fy-fly { position: fixed; z-index: 90; animation: none; translate: none; pointer-events: none; }
.fy-timer { position: absolute; z-index: 4; right: 2%; top: 3%; width: min(14vh, 9vw); aspect-ratio: .62; display: flex; flex-direction: column; align-items: center; }
.fy-sand { position: relative; width: 70%; flex: 1; border-radius: 40% 40% 40% 40% / 18%; background: rgba(255, 255, 255, .25); border: 4px solid #fde68a; overflow: hidden; display: flex; align-items: flex-end; box-shadow: 0 0 16px rgba(253, 224, 71, .4); }
.fy-sand > i { width: 100%; height: 100%; background: linear-gradient(#fde047, #f59e0b); transform-origin: 50% 100%; transition: transform 1s linear; }
.fy-timer b { margin-top: 4px; padding: 0 12px; border-radius: 99px; background: #fff; font: 900 clamp(20px, 5vh, 40px) / 1.1 "Nunito", sans-serif; color: #7c2d12; }
.fy-timer.hurry .fy-sand { border-color: #f43f5e; box-shadow: 0 0 20px #f43f5e; animation: e4No .5s infinite; }
.fy-timer.hurry b { background: #f43f5e; color: #fff; }
.fy-timer.over { opacity: .55; filter: grayscale(.7); }
.fy-jar { position: absolute; z-index: 3; right: 2%; bottom: 3%; width: min(24vh, 15vw); aspect-ratio: .8; }
.fy-jar > i { position: absolute; inset: 0; background: center bottom / contain no-repeat; }
.fy-jar.bump > i { animation: stkBump .35s; }
.fy-in { position: absolute; left: 18%; right: 18%; top: 34%; bottom: 10%; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; justify-content: center; gap: 4%; }
.fy-mini { width: 18%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, hsl(var(--h) 100% 70%) 45%, transparent 70%); animation: popIn .3s both, fyGlow 1.2s ease-in-out infinite alternate; }
.fy-cnt { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); min-width: 1.6em; padding: 0 10px; border-radius: 99px; background: #7c3aed; color: #fff; border: 3px solid #fff; text-align: center; font: 900 clamp(20px, 5vh, 40px) / 1.15 "Nunito", sans-serif; }
.fy-cnt.hide { visibility: hidden; }
.fy-cc { position: absolute; z-index: 3; left: 0; bottom: 1%; width: min(22vh, 13vw); aspect-ratio: 1; background: center bottom / contain no-repeat; transform-origin: 50% 100%; animation: e4Idle 2.6s ease-in-out infinite; pointer-events: none; }
.fy-cc.yay { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 3; }
.fy-cc.zz { filter: saturate(.6); }
.fy-bar { position: absolute; z-index: 4; left: 14%; right: 20%; bottom: 3%; height: 17%; display: flex; align-items: center; justify-content: center; gap: 1.6vw; }
.fy-q { padding: 1vh 2vw; border-radius: 18px; background: rgba(255, 255, 255, .95); font: 900 clamp(20px, 5vh, 40px) / 1 "Nunito", sans-serif; color: #4c1d95; }
.fy-o { width: min(15vh, 10vw); aspect-ratio: 1.15; border-radius: 22px; background: #fffdf6 !important; border: 5px solid #c4b5fd !important; box-shadow: 0 5px 0 #7c3aed; font: 900 clamp(30px, 8vh, 64px) / 1 "Nunito", sans-serif; color: #4c1d95; animation: popIn .35s both; }
.fy-o.ok { border-color: #22c55e !important; box-shadow: 0 0 0 7px #bbf7d0; }
.fy-path { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%; padding: .8vh 1.2vw; border-radius: 18px; background: rgba(255, 255, 255, .9); }
.fy-path i { display: grid; place-items: center; min-width: min(7vh, 4.2vw); aspect-ratio: 1; border-radius: 10px; border: 2px dashed #c4b5fd; font: 900 clamp(14px, 3.6vh, 28px) / 1 "Nunito", sans-serif; font-style: normal; color: #a78bfa; }
.fy-path i.on { border: 2px solid #f59e0b; background: #fde047; color: #7c2d12; animation: stkBump .35s; }
.fy-peek { display: flex; align-items: center; gap: 6px; padding: 1vh 1.4vw !important; border-radius: 99px; background: #fff !important; border: 3px solid #a78bfa !important; color: #6d28d9; font: 900 clamp(14px, 3.4vh, 24px) "Nunito", sans-serif; }
.fy-peek .ic, .fy-peek svg { width: 1.3em; height: 1.3em; fill: currentColor; }
.fy-medal { position: absolute; z-index: 8; left: 50%; top: 30%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; animation: cbIn .6s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.fy-medal .ic, .fy-medal svg { width: min(26vh, 16vw); height: min(26vh, 16vw); fill: currentColor; filter: drop-shadow(0 0 22px currentColor); }
.fy-medal b { padding: 4px 18px; border-radius: 99px; background: #fff; font: 900 clamp(22px, 6vh, 46px) "Nunito", sans-serif; color: #4c1d95; }
.fy-medal.gold { color: #fde047; } .fy-medal.silver { color: #e2e8f0; } .fy-medal.bronze { color: #fdba74; }
/* 閃一下 */
.fym-flash .fy-sky { display: grid; place-items: center; }
.fy-tf { position: relative; display: flex; flex-direction: column; gap: 2vh; opacity: 0; }
.fy-sky.show .fy-tf { opacity: 1; }
.fy-frame { display: grid; grid-template-columns: repeat(5, auto); gap: 6px; padding: 10px; border-radius: 20px; background: rgba(30, 27, 75, .7); border: 4px solid #c4b5fd; }
.fy-cell { position: relative; width: min(13vh, 8vw); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.fy-cell .fy-img { inset: 4%; --h: 48; }
.fy-cloud { position: absolute; inset: -6%; border-radius: 40px; background: radial-gradient(circle at 30% 40%, #fff 0 20%, transparent 21%), radial-gradient(circle at 60% 35%, #fff 0 24%, transparent 25%), radial-gradient(circle at 45% 65%, #f5f3ff 0 30%, transparent 31%), #ede9fe; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.fy-sky.hide .fy-cloud { opacity: 1; transform: none; transition: none; }
@media (max-height: 520px) {
  .fy-sky { top: 22%; bottom: 24%; left: 14%; right: 16%; }
  .fy-f { width: min(20vh, 7vw); } .fy-f b { font-size: 17px; border-width: 2px; }
  .fy-timer { width: min(20vh, 7vw); top: 20%; } .fy-timer b { font-size: 18px; }
  .fy-jar { width: min(30vh, 11vw); } .fy-cnt { font-size: 17px; }
  .fy-cc { width: min(30vh, 11vw); }
  .fy-bar { height: 21%; left: 13%; right: 16%; } .fy-q { font-size: 18px; } .fy-o { width: min(20vh, 8vw); font-size: 28px; border-width: 4px !important; }
  .fy-path i { min-width: 26px; font-size: 14px; } .fy-cell { width: min(15vh, 6vw); }
}
.fy-sky.hide .fy-frame { visibility: hidden; }

/* ───────────── 迷宮大冒險（js/maze2.js）───────────── */
.game .play:has(.mz2) { zoom: 1 !important; }
.mz2 { --s: 60px; position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px; background: transparent; box-shadow: none; font-family: "Nunito", "Segoe UI", sans-serif; }
.mz2 button { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; }
.mz2-board { position: relative; flex: none; width: calc(var(--s) * var(--W)); height: calc(var(--s) * var(--H)); border-radius: 18px; box-shadow: 0 0 0 6px var(--edge), 0 12px 28px rgba(0, 0, 0, .25); touch-action: none; }
.mz2-floor { position: absolute; inset: 0; border-radius: 16px; background: #e8f5e0 center / calc(var(--s) * 4) repeat; overflow: hidden; }
.mz2-walls { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mz2-walls line { stroke: var(--wall); stroke-width: .16; stroke-linecap: round; filter: drop-shadow(0 .05px 0 var(--edge)); }
.mz2-cell, .mz2-tok, .mz2-steps i, .mz2-foot { position: absolute; left: calc(var(--cx) * var(--s)); top: calc(var(--cy) * var(--s)); width: var(--s); height: var(--s); }
.mz2-cell { display: grid; place-items: center; pointer-events: none; }
.mz2-it { width: 74%; aspect-ratio: 1; background: center / contain no-repeat; animation: stPulse 1.8s ease-in-out infinite; }
.mz2-it.num { display: grid; place-items: center; width: 66%; border-radius: 50%; background: #fff; border: 4px solid #f59e0b; box-shadow: 0 3px 0 #b45309; }
.mz2-it.num b { font: 900 calc(var(--s) * .4) / 1 "Nunito", sans-serif; color: #9a3412; }
.mz2-it.got { animation: mzGot .5s forwards; }
@keyframes mzGot { to { transform: scale(1.8) translateY(-30%); opacity: 0; } }
.mz2-gate { width: 92%; aspect-ratio: 1; background: center / contain no-repeat; transition: transform .5s, opacity .5s; }
.mz2-gate.open { transform: scaleX(.1); opacity: 0; }
.mz2-chest { width: 92%; aspect-ratio: 1; background: center / contain no-repeat; filter: drop-shadow(0 0 8px #fde047); }
.mz2-chest.open { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 3; filter: drop-shadow(0 0 22px #fde047); }
.mz2-tok { z-index: 3; display: grid; place-items: center; transition: left .16s linear, top .16s linear; pointer-events: none; }
.mz2-tok > i { width: 96%; aspect-ratio: 1; background: center bottom / contain no-repeat; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); animation: g2Walk .34s ease-in-out infinite; }
.mz2-tok.flip > i { transform: scaleX(-1); animation: g2WalkL .34s ease-in-out infinite; }
.mz2-tok.bump > i { animation: e4No .3s; }
.mz2-tok.yay > i { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 3; }
.mz2-steps i { display: grid; place-items: center; pointer-events: none; }
.mz2-steps i::after { content: ""; width: 14%; aspect-ratio: 1; border-radius: 50%; background: rgba(234, 88, 12, .55); }
.mz2-foot { z-index: 2; display: grid; place-items: center; pointer-events: none; opacity: 0; animation: mzFoot 2.4s var(--d) ease-in-out forwards; }
.mz2-foot::after { content: ""; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #fde047; box-shadow: 0 0 12px 4px rgba(253, 224, 71, .8); }
@keyframes mzFoot { 15%, 75% { opacity: 1; } 100% { opacity: 0; } }
.mz2-dark { position: absolute; inset: -8px; z-index: 4; border-radius: 22px; pointer-events: none; background: rgba(15, 10, 40, .94);
  -webkit-mask-image: radial-gradient(circle calc(var(--s) * 1.9) at var(--lx, 5%) var(--ly, 5%), transparent 55%, #000 100%); mask-image: radial-gradient(circle calc(var(--s) * 1.9) at var(--lx, 5%) var(--ly, 5%), transparent 55%, #000 100%); }
.mz2-hit { position: absolute; inset: 0; z-index: 5; cursor: pointer; }
.mz2-side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mz2-goals { display: flex; flex-direction: column; gap: 6px; }
.mz2-goals span { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 99px; background: rgba(255, 255, 255, .95); border: 3px solid #fde68a; }
.mz2-goals i { width: 36px; height: 36px; background: center / contain no-repeat; display: grid; place-items: center; font-style: normal; }
.mz2-goals i.nb { border-radius: 50%; background: #fff; border: 3px solid #f59e0b; font-weight: 900; color: #9a3412; width: 30px; height: 30px; }
.mz2-goals b { font: 900 20px "Nunito", sans-serif; color: #1e293b; }
.mz2-goals .done { border-color: #22c55e; background: #dcfce7; }
.mz2-goals .wait { opacity: .5; filter: grayscale(.6); } .mz2-goals .go { border-color: #f59e0b; animation: stPulse 1.4s ease-in-out infinite; }
.mz2-pad { display: grid; grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(3, 58px); gap: 4px; }
.mz2-b { border-radius: 16px; background: #16a34a !important; color: #fff; font-size: 26px; box-shadow: 0 4px 0 #166534; }
.mz2-b:active { transform: translateY(3px); box-shadow: 0 1px 0 #166534; }
.mz2-b.U { grid-column: 2; grid-row: 1; } .mz2-b.L { grid-column: 1; grid-row: 2; } .mz2-b.R { grid-column: 3; grid-row: 2; } .mz2-b.D { grid-column: 2; grid-row: 3; }
.mz2-hint { display: flex; align-items: center; gap: 6px; padding: 6px 14px !important; border-radius: 99px; background: #fff !important; border: 3px solid #fbbf24 !important; color: #b45309; font: 900 18px "Nunito", sans-serif; }
.mz2-hint .ic, .mz2-hint svg { width: 22px; height: 22px; fill: currentColor; }
@media (max-height: 520px) {
  .mz2 { padding: 4px; gap: 8px; } .mz2.mz2-wide { padding-left: 34%; justify-content: flex-start; }
  .mz2-pad { grid-template-columns: repeat(3, 38px); grid-template-rows: repeat(3, 38px); gap: 2px; } .mz2-b { font-size: 18px; border-radius: 12px; }
  .mz2-side { gap: 4px; } .mz2-goals { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 140px; } .mz2-goals i { width: 24px; height: 24px; } .mz2-goals b { font-size: 14px; } .mz2-goals span { padding: 2px 8px 2px 2px; border-width: 2px; }
  .mz2-hint { font-size: 13px; padding: 3px 10px !important; }
}
/* 迷宮大冒險：詞語格 */
.mz2-it.wd { width: 94%; aspect-ratio: auto; min-height: 46%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3px 2px; border-radius: 12px; background: #fffdf6; border: 3px solid #fbbf24; box-shadow: 0 3px 0 rgba(180, 83, 9, .35); animation: none; }
.mz2-it.wd b { font: 900 calc(var(--s) * .27) / 1.05 "Nunito", "Noto Sans TC", sans-serif; color: #3b2a50; text-align: center; word-break: keep-all; }
.mz2-it.wd.long b { font-size: calc(var(--s) * .19); }
.mz2-it.wd.pic { height: 94%; padding: 2px; gap: 1px; }
.mz2-it.wd.pic .wi { width: 100%; flex: 1; min-height: 0; background: center / contain no-repeat; }
.mz2-it.wd.pic b { font-size: calc(var(--s) * .2); }
.mz2-it.wd.no { border-color: #f43f5e; background: #ffe4e6; }
.mz2-goals .cat { flex-direction: column; gap: 0; padding: 4px 12px; border-radius: 16px; }
.mz2-goals .cat b:first-child { font-size: 15px; color: #7c2d12; }

/* ───────────── 積木世界加強版（js/blocks2.js）───────────── */
.game .play:has(.bk3) { zoom: 1 !important; }
.bk3 { --s: 60px; position: relative; display: block; padding: 0; overflow: hidden; background-color: #fdf3c4; font-family: "Nunito", "Segoe UI", sans-serif; }
.bk3 button { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; }
.bk3-cc { position: absolute; z-index: 3; left: 0; bottom: 1%; width: min(26vh, 15vw); aspect-ratio: 1; background: center bottom / contain no-repeat; transform-origin: 50% 100%; animation: e4Idle 2.6s ease-in-out infinite; pointer-events: none; }
.bk3-cc.yay { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 3; } .bk3-cc.oops { animation: e4No .5s; }
.bk3-main { position: absolute; left: 15%; right: 13%; top: 2%; bottom: 3%; display: flex; align-items: center; justify-content: center; gap: 16px; }
.bk3-tray { position: absolute; z-index: 4; right: 1%; top: 3%; bottom: 3%; width: 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2vh; }
.bk3-pick { width: min(11vh, 8vw); aspect-ratio: 1; padding: 5px !important; border-radius: 18px; background: rgba(255, 255, 255, .9) !important; border: 4px solid transparent !important; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.bk3-pick.on { border-color: #7c3aed !important; transform: scale(1.1); box-shadow: 0 0 0 4px #ede9fe, 0 4px 0 rgba(0, 0, 0, .12); }
.bk3-tool, .bk3-done { display: grid; place-items: center; width: min(11vh, 8vw); aspect-ratio: 1; border-radius: 18px; background: #fff !important; border: 4px solid #cbd5e1 !important; color: #475569; }
.bk3-tool .ic, .bk3-tool svg, .bk3-done .ic, .bk3-done svg { width: 50%; height: 50%; fill: currentColor; }
.bk3-tool.on { border-color: #f43f5e !important; color: #f43f5e; }
.bk3-done { aspect-ratio: auto; padding: 8px 4px !important; background: #22c55e !important; border-color: #fff !important; color: #fff; box-shadow: 0 5px 0 #15803d; animation: stPulse 1.5s ease-in-out infinite; }
.bk3-done b { font: 900 clamp(14px, 3vh, 22px) "Nunito", sans-serif; }
.bk3-done:disabled { background: #cbd5e1 !important; box-shadow: none; animation: none; opacity: .7; }
.bk3-ask { text-align: center; font: 900 clamp(14px, 3.2vh, 24px) "Nunito", sans-serif; color: #7c2d12; background: #fff; border-radius: 14px; padding: 6px; }
.bk3-mv { width: 100%; padding: 1.2vh 4px !important; border-radius: 16px; background: #f97316 !important; color: #fff; font: 900 clamp(14px, 3.4vh, 26px) "Nunito", sans-serif; box-shadow: 0 4px 0 #c2410c; }
.bk3-model { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 20px; background: rgba(255, 255, 255, .95); border: 4px solid #fbbf24; box-shadow: 0 6px 0 rgba(180, 83, 9, .2); }
.bk3-model > b { font: 900 clamp(16px, 3.4vh, 26px) "Nunito", sans-serif; color: #7c3aed; }
.bk3-model .bw-mini { grid-template-columns: repeat(var(--w), calc(var(--s) * .45)); grid-auto-rows: calc(var(--s) * .45); }
.bk3-model .bw-mini .bw-cube { width: 100%; height: 100%; }
.bk3-model.hidden .bw-mini { display: none; }
.bk3-plate { position: relative; padding: calc(var(--s) * .3); border-radius: 22px; background: #4ade80; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .12), 0 10px 0 #16a34a, 0 18px 24px rgba(0, 0, 0, .15);
  background-image: radial-gradient(circle, rgba(255, 255, 255, .35) 0 18%, transparent 20%); background-size: calc(var(--s) / 2) calc(var(--s) / 2); }
.bk3-grid { display: grid; grid-template-columns: repeat(var(--w), var(--s)); grid-auto-rows: var(--s); gap: 3px; }
.bk3-gap { display: block; }
.bk3-gap.clear { visibility: hidden; }
.bk3-cell { display: block; }
.bk3-slot { display: block; border-radius: 12px; border: 3px dashed rgba(255, 255, 255, .85) !important; background: color-mix(in srgb, var(--gc, #fff) 35%, transparent) !important; }
.bk3-slot.sh { background: rgba(30, 41, 59, .35) !important; border-style: solid !important; border-color: rgba(30, 41, 59, .25) !important; }
.bkm-free .bk3-slot { border-style: dotted !important; background: rgba(255, 255, 255, .25) !important; }
.bkm-free .bk3-slot.clear:not(.full) { visibility: hidden; }
.bk3-slot.full { border: 0 !important; background: none !important; }
.bk3-slot.nope { animation: e4No .4s; border-color: #f43f5e !important; }
.bk3-axis { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 0; border-left: 4px dashed #fde047; transform: translateX(-50%); pointer-events: none; }
.bk3-grid.go-bounce { animation: goBounce .7s ease-in-out 2; } .bk3-grid.go-dance { animation: goDance .5s ease-in-out 3; } .bk3-grid.go-drive { animation: goDrive 1.4s .2s ease-in forwards; }
.bk3-grid.go-swim { animation: goSwim 1.4s .2s ease-in-out forwards; } .bk3-grid.go-blast { animation: goBlast 1.4s .3s ease-in forwards; }
/* 疊高塔 */
.bk3-pat { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border-radius: 18px; background: rgba(255, 255, 255, .95); border: 4px solid #a78bfa; }
.bk3-pat > b { font: 900 clamp(14px, 3vh, 22px) "Nunito", sans-serif; color: #6d28d9; }
.bk3-pat .bw-cube { width: calc(var(--s) * .55); height: calc(var(--s) * .55); }
.bk3-pat i { font-style: normal; font-weight: 900; color: #6d28d9; }
.bk3-pat { flex-direction: column-reverse; }
.bk3-tower { position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 0 30px; }
.bk3-floor { display: block; width: calc(var(--s) * 1.6); height: calc(var(--s) * .9); margin-top: 2px; border-radius: 10px; border: 3px dashed rgba(124, 58, 237, .35); }
.bk3-floor.full { border: 0; }
.bk3-floor .bw-cube { border-radius: 10px; }
.bk3-floor.next { border: 4px solid #fde047; background: rgba(253, 224, 71, .25); animation: stPulse 1.2s ease-in-out infinite; }
.bk3-floor:not(.full):not(.next) { opacity: .4; }
.bk3-base { display: block; width: calc(var(--s) * 2.6); height: 14px; margin-top: 3px; border-radius: 8px; background: #a16207; }
.bk3-tower.wob { animation: e4No .5s; }
.bk3-tower.go-bounce { animation: goBounce .7s ease-in-out 2; }
/* 砌橋 */
.bkm-bridge .bk3-main { flex-direction: column; gap: 3vh; }
.bk3-river { display: flex; align-items: flex-end; }
.bk3-bank { position: relative; width: calc(var(--s) * 1.6); height: calc(var(--s) * 2.2); background: linear-gradient(#4ade80 0 22%, #a16207 22%); border-radius: 14px 14px 0 0; }
.bk3-bank.l { border-radius: 14px 0 0 0; } .bk3-bank.r { border-radius: 0 14px 0 0; }
.bk3-ani { position: absolute; z-index: 3; left: 10%; bottom: 76%; width: calc(var(--s) * 1.3); aspect-ratio: 1; background: center bottom / contain no-repeat; transition: transform 1.5s ease-in-out; }
.bk3-ani.cross { transform: translateX(calc(var(--s) * (var(--g) + 1.6))); animation: g2Walk .3s ease-in-out 5; }
.bk3-water { position: relative; width: calc(var(--s) * var(--g)); height: calc(var(--s) * 1.7); background: repeating-linear-gradient(-30deg, #60a5fa 0 14px, #3b82f6 14px 28px); border-radius: 0 0 12px 12px; }
.bk3-span { position: absolute; left: 0; right: 0; top: 0; display: flex; }
.bk3-tick { flex: 1; height: calc(var(--s) * .6); border-left: 2px dashed rgba(255, 255, 255, .8); color: rgba(255, 255, 255, .9); font-style: normal; font-weight: 900; font-size: calc(var(--s) * .25); text-align: center; padding-top: calc(var(--s) * .7); }
.bk3-deck { position: absolute; left: 0; top: 0; display: flex; height: calc(var(--s) * .62); }
.bk3-bar { position: relative; display: flex; gap: 2px; padding: 3px !important; height: calc(var(--s) * .62); width: calc(var(--s) * var(--v)); border-radius: 10px; background: var(--bc) !important; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18); }
.bk3-bar i { flex: 1; border-radius: 6px; background: rgba(255, 255, 255, .25); }
.bk3-bar b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 calc(var(--s) * .34) "Nunito", sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.bk3-bar.on { animation: cubeDrop .4s cubic-bezier(.3, 1.6, .5, 1); border-radius: 4px; }
.bkm-bridge .bk3-tray { flex-wrap: wrap; flex-direction: row; align-content: center; left: 15%; right: 13%; top: auto; bottom: 2%; width: auto; height: 22%; gap: 10px; }
.bkm-bridge .bk3-tray .bk3-bar { --s: min(9vh, 6vw); }
.bk3-tray .bk3-bar.used { visibility: hidden; }
.bk3-tray .bk3-bar.nope { animation: e4No .4s; }
.bkm-bridge .bk3-main { bottom: 26%; }
.bk3-len { padding: 4px 18px; border-radius: 99px; background: #fff; font: 900 clamp(20px, 5vh, 38px) "Nunito", sans-serif; color: #1e3a8a; }
@media (max-height: 520px) {
  .bk3-main { left: 15%; right: 12%; top: 20%; }
  .bk3-cc { width: min(34vh, 13vw); }
  .bk3-tray { top: 20%; } .bk3-pick, .bk3-tool { width: min(13vh, 7vw); border-radius: 12px; padding: 3px !important; } .bk3-tray { gap: 4px; }
  .bkm-bridge .bk3-tray { top: auto; height: 20%; } .bkm-bridge .bk3-main { bottom: 24%; }
}

.bkm-shadow .bk3-tray, .bkm-free .bk3-tray { display: grid; grid-template-columns: repeat(2, auto); align-content: center; justify-content: center; width: 15%; gap: 1vh .6vw; }
.bkm-shadow .bk3-main, .bkm-free .bk3-main { right: 16%; }
.bkm-free .bk3-done, .bkm-free .bk3-ask, .bkm-free .bk3-mv { grid-column: span 2; }
.bkm-shadow .bk3-pick, .bkm-free .bk3-pick, .bkm-free .bk3-tool { width: min(10vh, 6.4vw); }

/* ───────────── 小小工程師（js/engineer.js）───────────── */
.game .play:has(.eg) { zoom: 1 !important; }
.eg { --u: 60px; position: relative; display: block; padding: 0; overflow: hidden; background-color: #dff2fb; font-family: "Nunito", "Segoe UI", sans-serif; }
.eg button { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; }
.eg-cc { position: absolute; z-index: 3; left: 0; bottom: 1%; width: min(26vh, 15vw); aspect-ratio: 1; background: center bottom / contain no-repeat; transform-origin: 50% 100%; animation: e4Idle 2.6s ease-in-out infinite; pointer-events: none; }
.eg-cc.yay { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 3; } .eg-cc.oops { animation: e4No .5s; }
.eg-site { position: absolute; left: 16%; right: 15%; top: 2%; bottom: 3%; display: flex; align-items: flex-end; justify-content: center; gap: 4vw; }
.eg-tray { position: absolute; z-index: 4; right: 1%; top: 6%; bottom: 6%; width: 13%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4vh; }
.eg-pick { width: min(12vh, 9vw); aspect-ratio: 1; padding: 6px !important; border-radius: 18px; background: rgba(255, 255, 255, .92) !important; box-shadow: 0 5px 0 rgba(0, 0, 0, .15); }
.eg-pick.nope { animation: e4No .4s; }
.eg-pick.num { display: grid; place-items: center; }
.eg-n { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 12px; background: linear-gradient(#fde68a, #f59e0b); color: #7c2d12; font: 900 calc(var(--u) * .55) / 1 "Nunito", sans-serif; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .15); }
.eg-pick .eg-n { font-size: clamp(22px, 6vh, 46px); }
/* 高塔 */
.eg-tower { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--u) * .9); }
.eg-fl { display: block; width: calc(var(--u) * 1.9); height: var(--u); margin-top: 2px; border-radius: 10px; border: 3px dashed rgba(245, 158, 11, .6); }
.eg-fl.full { border: 0; } .eg-fl .bw-cube { border-radius: 10px; }
.eg-fl.next { border: 4px solid #f59e0b; background: rgba(253, 224, 71, .35); animation: stPulse 1.2s ease-in-out infinite; }
.egm-pat .eg-fl:not(.full):not(.next), .egm-num .eg-fl:not(.full):not(.next) { opacity: .35; }
.egm-fix .eg-fl:not(.full):not(.next) { background: rgba(255, 255, 255, .45); }
.eg-ground { display: block; width: calc(var(--u) * 3.2); height: 16px; margin-top: 3px; border-radius: 8px; background: #78716c; box-shadow: 0 4px 0 #44403c; }
.eg-flag { position: absolute; top: 0; left: 50%; width: 6px; height: calc(var(--u) * .9); background: #64748b; transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.eg-flag::after { content: ""; position: absolute; left: 6px; top: 0; width: calc(var(--u) * .7); height: calc(var(--u) * .45); background: #ef4444; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.eg-tower.done .eg-flag { transform: translateX(-50%) scaleY(1); }
.eg-tower.done { animation: goBounce .7s ease-in-out 2; }
.eg-tower.wob { animation: egWob .6s; transform-origin: 50% 100%; }
@keyframes egWob { 20% { transform: rotate(-4deg); } 45% { transform: rotate(3deg); } 70% { transform: rotate(-2deg); } }
.eg-plan { display: flex; flex-direction: column; align-items: center; gap: 4px; align-self: center; padding: 10px; border-radius: 18px; background: rgba(255, 255, 255, .95); border: 4px solid #fbbf24; }
.eg-plan > b { font: 900 clamp(14px, 3vh, 22px) "Nunito", sans-serif; color: #b45309; }
.eg-plan span { display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; }
.eg-plan .bw-cube { width: calc(var(--u) * .6); height: calc(var(--u) * .5); }
.eg-plan i { font-style: normal; font-weight: 900; color: #b45309; }
.eg-fall { position: fixed; z-index: 90; pointer-events: none; }
.eg-fall > .bw-cube, .eg-fall > .eg-n { border-radius: 10px; }
.eg-cable { position: absolute; left: 50%; bottom: 100%; width: 3px; height: 100vh; background: #475569; transform: translateX(-50%); }
.eg-cable::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 18px; height: 12px; border: 3px solid #475569; border-top: 0; border-radius: 0 0 10px 10px; transform: translateX(-50%); }
.eg-fall.bounce { animation: egOff .6s ease-in forwards; }
@keyframes egOff { to { transform: translate(60px, -40px) rotate(40deg); opacity: 0; } }
/* 橋 */
.egm-bridge .eg-site { flex-direction: column; align-items: center; justify-content: center; gap: 3vh; bottom: 24%; left: 14%; right: 2%; }
.egm-bridge .eg-tray { flex-direction: row; flex-wrap: wrap; align-content: center; left: 16%; right: 2%; top: auto; bottom: 2%; width: auto; height: 21%; gap: 10px; }
.eg-river { display: flex; align-items: flex-start; }
.eg-cliff { position: relative; width: calc(var(--u) * 1.6); height: calc(var(--u) * 2.4); border-radius: 14px 14px 0 0; background: linear-gradient(#4ade80 0 20%, #a16207 20%); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .1); }
.eg-cliff.l { border-radius: 14px 0 0 0; } .eg-cliff.r { border-radius: 0 14px 0 0; }
.eg-pier { width: calc(var(--u) * 1.2); height: calc(var(--u) * 2.4); background: linear-gradient(90deg, #a8a29e, #78716c); border-radius: 6px 6px 0 0; margin-top: calc(var(--u) * .6); }
.eg-gap { position: relative; width: calc(var(--u) * var(--g)); height: calc(var(--u) * 2.4); }
.eg-gap.on { box-shadow: inset 0 0 0 4px #fde047; border-radius: 8px; }
.eg-water { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; border-radius: 0 0 12px 12px; background: repeating-linear-gradient(-30deg, #60a5fa 0 14px, #3b82f6 14px 28px); animation: egWave 2s linear infinite; }
@keyframes egWave { to { background-position: 56px 0; } }
.eg-len { position: absolute; z-index: 2; left: 50%; top: calc(var(--u) * 1.05); transform: translateX(-50%); padding: 2px 12px; border-radius: 99px; background: #fff; border: 3px solid #f59e0b; font: 900 calc(var(--u) * .36) "Nunito", sans-serif; color: #7c2d12; white-space: nowrap; }
.eg-ticks { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * .62); display: flex; }
.eg-ticks i { flex: 1; border-left: 2px dashed rgba(30, 64, 175, .5); border-bottom: 2px dashed rgba(30, 64, 175, .5); font-style: normal; font-weight: 900; font-size: calc(var(--u) * .22); color: rgba(30, 64, 175, .55); text-align: center; line-height: calc(var(--u) * .62); }
.eg-deck { position: absolute; left: 0; top: 0; display: flex; height: calc(var(--u) * .62); }
.eg-slot { display: block; width: calc(var(--u) * var(--v)); height: 100%; }
.eg-bar { position: relative; display: flex; gap: 2px; padding: 3px !important; height: calc(var(--u) * .62); width: calc(var(--u) * var(--v)); border-radius: 10px; background: var(--bc) !important; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18); flex: none; }
.eg-bar i { flex: 1; border-radius: 6px; background: rgba(255, 255, 255, .25); }
.eg-bar b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 calc(var(--u) * .34) "Nunito", sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.eg-deck .eg-bar { border-radius: 3px; }
.eg-tray .eg-bar { --u: min(9vh, 6vw); }
.eg-tray .eg-bar.used { visibility: hidden; }
.eg-tray .eg-bar.nope { animation: e4No .4s; }
.eg-undo { display: grid; place-items: center; width: min(9vh, 6vw); aspect-ratio: 1; border-radius: 16px; background: #fff !important; border: 4px solid #cbd5e1 !important; color: #475569; }
.eg-undo .ic, .eg-undo svg { width: 55%; height: 55%; fill: currentColor; }
.eg-veh { position: absolute; z-index: 3; left: 4%; bottom: 80%; width: calc(var(--u) * 1.5); aspect-ratio: 1.2; background: center bottom / contain no-repeat; transform: scaleX(-1); }
.eg-veh.go { transition: left 2.2s ease-in-out; left: calc(100% + var(--u) * 30); animation: egRumble .15s linear infinite; }
@keyframes egRumble { 50% { translate: 0 -2px; } }
.egm-bridge .eg-cliff.l { overflow: visible; }
.eg-river { position: relative; }
.eg-info { display: flex; gap: 12px; }
.eg-info span { padding: 4px 16px; border-radius: 99px; background: #fff; border: 3px solid #e2e8f0; font: 900 clamp(16px, 4vh, 30px) "Nunito", sans-serif; color: #1e3a8a; }
.eg-info span.on { border-color: #f59e0b; } .eg-info span.ok { border-color: #22c55e; background: #dcfce7; }
@media (max-height: 520px) {
  .eg-site { top: 20%; left: 15%; } .eg-tray { top: 20%; } .eg-cc { width: min(34vh, 13vw); }
  .egm-bridge .eg-site { top: 22%; bottom: 23%; } .egm-bridge .eg-tray { top: auto; height: 21%; }
  .eg-pick { width: min(15vh, 7vw); border-radius: 12px; padding: 3px !important; } .eg-tray { gap: 6px; }
}
@media (max-height: 520px) { .eg:not(.egm-bridge) .eg-site { top: 4%; left: 30%; } .eg-fl { width: calc(var(--u) * 2.4); } }
/* 積木世界：方塊拼圖（俄羅斯方塊） */
.tb-wrap { display: flex; align-items: center; gap: 16px; }
.tb-board { position: relative; display: grid; grid-template-columns: repeat(var(--w), var(--s)); grid-auto-rows: var(--s); gap: 2px; padding: 8px; border-radius: 18px; background: #1e293b; box-shadow: 0 0 0 6px #475569, 0 12px 24px rgba(0, 0, 0, .3); }
.tb-c { position: relative; display: block; border-radius: 8px; background: rgba(255, 255, 255, .05); cursor: pointer; }
.tb-c .bw-cube { border-radius: 8px; }
.tb-c.gh { background: rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
.tb-c .live { animation: none; filter: brightness(1.12) drop-shadow(0 0 6px rgba(255, 255, 255, .6)); }
.tb-c.hint { box-shadow: inset 0 0 0 4px #fde047; animation: stPulse 1s ease-in-out infinite; }
.tb-c.clr .bw-cube { animation: tbClr .6s forwards; }
@keyframes tbClr { 40% { filter: brightness(2.2); transform: scale(1.1); } 100% { transform: scale(0); opacity: 0; } }
.tb-board.thud { animation: tbThud .25s; }
@keyframes tbThud { 50% { transform: translateY(5px); } }
.tb-next { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .92); border: 4px solid #a78bfa; }
.tb-next > b { font: 900 clamp(14px, 3vh, 22px) "Nunito", sans-serif; color: #6d28d9; }
.tb-q { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.tb-mini { display: grid; grid-template-columns: repeat(var(--w), calc(var(--s) * .45)); grid-auto-rows: calc(var(--s) * .45); gap: 2px; }
.tb-mini .bw-cube { border-radius: 5px; }
.tb-none { font-style: normal; color: #a78bfa; font-weight: 900; }
.bkm-tet .bk3-tray, .bkm-lego .bk3-tray { width: 14%; }
.tb-b { display: grid; place-items: center; width: min(12vh, 7vw); aspect-ratio: 1; border-radius: 18px; background: #7c3aed !important; color: #fff; font-size: clamp(24px, 6vh, 44px); box-shadow: 0 5px 0 #5b21b6; }
.tb-b:active { transform: translateY(3px); box-shadow: 0 2px 0 #5b21b6; }
.tb-b.tbk-dn { background: #16a34a !important; box-shadow: 0 5px 0 #166534; }
.tb-lr { display: flex; gap: 6px; }
/* 積木世界：顆粒積木 */
.lg-base { padding: calc(var(--s) * .3); border-radius: 18px; background: #4ade80; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .1), 0 8px 0 #16a34a; }
.lg-board { position: relative; width: calc(var(--s) * var(--W)); height: calc(var(--s) * .9 * var(--H)); }
.lg-board.mini { --s: calc(var(--ps, 22px)); }
.lg-brick, .lg-ghost, .lg-hit { position: absolute; left: calc(var(--s) * var(--x)); bottom: calc(var(--s) * .9 * var(--y)); width: calc(var(--s) * var(--len, 1)); height: calc(var(--s) * .9); }
.lg-brick { display: flex; justify-content: space-around; border-radius: 5px; background: linear-gradient(160deg, color-mix(in srgb, var(--bc) 75%, #fff), var(--bc) 60%); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18), inset 0 0 0 2px rgba(0, 0, 0, .12); pointer-events: none; }
.lg-stud { width: 46%; max-width: calc(var(--s) * .5); height: 26%; margin-top: -14%; border-radius: 40% 40% 10% 10%; background: color-mix(in srgb, var(--bc) 80%, #fff); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.lg-brick.lgin { animation: cubeDrop .4s cubic-bezier(.3, 1.6, .5, 1); }
.lg-ghost { display: grid; place-items: center; border-radius: 6px; border: 3px dashed rgba(255, 255, 255, .9); background: color-mix(in srgb, var(--bc) 30%, transparent); pointer-events: none; }
.lg-ghost b { font: 900 calc(var(--s) * .4) "Nunito", sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.lg-ghost.gone { display: none; }
.lg-hit { --len: 1; z-index: 2; border-radius: 4px; background: transparent !important; pointer-events: none; }
.lg-hit.on { pointer-events: auto; background: rgba(255, 255, 255, .12) !important; }
.lg-hit.nope { animation: e4No .4s; background: rgba(244, 63, 94, .35) !important; }
.lg-plan { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 18px; background: rgba(255, 255, 255, .95); border: 4px solid #fbbf24; --ps: calc(var(--s) * .45); }
.lg-plan > b { font: 900 clamp(14px, 3vh, 22px) "Nunito", sans-serif; color: #b45309; }
.lg-plan.hidden .lg-board { visibility: hidden; }
.lg-plan.hidden::after { content: "?"; position: absolute; font: 900 40px "Nunito", sans-serif; color: #b45309; }
.lg-plan { position: relative; }
.lg-board.done { animation: goBounce .7s ease-in-out 2; }
.lg-board.go-drive { animation: goDrive 1.4s .2s ease-in forwards; } .lg-board.go-blast { animation: goBlast 1.4s .3s ease-in forwards; } .lg-board.go-dance { animation: goDance .5s ease-in-out 3; } .lg-board.go-swim { animation: goSwim 1.4s .2s ease-in-out forwards; }
.bkm-lego .bk3-tray { display: grid; grid-template-columns: 1fr; align-content: center; gap: 8px; width: 15%; }
.lg-pick { --s: min(4.6vh, 2.8vw); position: relative; height: calc(var(--s) * 1.5); padding: 0 6px !important; border-radius: 12px; background: rgba(255, 255, 255, .92) !important; border: 3px solid transparent !important; display: flex !important; align-items: flex-end; justify-content: flex-start; }
.lg-pick .lg-brick { position: relative; left: 0; bottom: 4px; }
.lg-pick.on { border-color: #7c3aed !important; box-shadow: 0 0 0 3px #ede9fe; }
.bkm-lego .bk3-main, .bkm-tet .bk3-main { right: 16%; }
@media (max-height: 520px) { .tb-b { width: min(15vh, 6vw); border-radius: 12px; font-size: 22px; } .lg-pick { --s: min(5vh, 2.2vw); height: calc(var(--s) * 1.6); } .bkm-lego .bk3-tray { gap: 3px; } }

/* 方塊拼圖：缺口、步驟提示、示範手指 */
.tb-c.tgt { box-shadow: inset 0 0 0 3px #fde047; background: rgba(253, 224, 71, .22); animation: stPulse 1.4s ease-in-out infinite; }
.tb-b.tb-go { box-shadow: 0 0 0 5px #fde047, 0 5px 0 #5b21b6; animation: stPulse 1.1s ease-in-out infinite; }
.tb-b.tbk-dn.tb-go { box-shadow: 0 0 0 5px #fde047, 0 5px 0 #166534; }
.tb-b.tb-press { transform: translateY(3px) scale(.92); }
.tb-steps { display: flex; flex-direction: column; gap: 8px; }
.tb-step { display: flex; flex-direction: column; align-items: center; padding: 6px 8px; border-radius: 14px; background: rgba(255, 255, 255, .85); border: 3px solid #e2e8f0; opacity: .55; }
.tb-step i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #94a3b8; color: #fff; font-style: normal; font-weight: 900; font-size: 14px; }
.tb-step b { font-size: clamp(18px, 4vh, 30px); color: #6d28d9; line-height: 1.1; }
.tb-step small { font: 900 clamp(11px, 2.4vh, 16px) "Nunito", sans-serif; color: #475569; }
.tb-step.on { opacity: 1; border-color: #fde047; background: #fffbe6; transform: scale(1.08); }
.tb-step.on i { background: #f59e0b; }
.tb-demo .bk3-tray, .tb-demo .tb-board { pointer-events: none; }
.tb-hand { position: fixed; z-index: 95; width: 56px; height: 56px; margin: -6px 0 0 -10px; color: #fff; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); pointer-events: none; transition: left .5s ease-in-out, top .5s ease-in-out; }
.tb-hand .ic, .tb-hand svg { width: 100%; height: 100%; fill: #fde68a; stroke: #92400e; stroke-width: .6; }
.tb-hand.tap { animation: tbTap .3s; }
@keyframes tbTap { 50% { transform: scale(.8) translateY(6px); } }
@media (max-height: 520px) { .tb-step { padding: 2px 5px; } .tb-step b { font-size: 16px; } .tb-steps { gap: 3px; } .tb-wrap { gap: 8px; } }

.tb-c.gh.no { background: rgba(244, 63, 94, .6); box-shadow: inset 0 0 0 3px #f43f5e; animation: e4No .4s; }
/* 手機橫放：右邊選項欄避開右下角的楚橋 */
@media (max-height: 520px) {
  .eg:not(.egm-bridge) .eg-tray { top: 18%; bottom: 24%; gap: 4px; } .eg:not(.egm-bridge) .eg-pick { width: min(13vh, 6vw); }
  .bk3-tray { bottom: 22%; } .bkm-bridge .bk3-tray, .bkm-lego .bk3-tray { bottom: 22%; }
  .egm-bridge .eg-tray { right: 12%; }
}
/* 楚橋的說話泡泡不可以擋住下面的遊戲掣（點楚橋本身仍然可以再聽一次） */
.bd-say { pointer-events: none !important; }
@media (max-height: 520px) { .eg:not(.egm-bridge) .eg-tray { right: calc(10vw + 6px); bottom: 6%; } .eg:not(.egm-bridge) .eg-site { right: 24%; } }
/* ───────────── 解難小勇士加強版（js/solve2.js）───────────── */
.sv-card { display: flex; align-items: center; gap: 18px; max-width: 94%; margin: 0 auto; padding: 10px 18px 10px 10px; border-radius: 22px; background: #fff; box-shadow: 0 6px 18px rgba(80, 50, 140, .12); }
.sv-card p { margin: 0; font: 800 clamp(18px, 4vh, 28px) / 1.3 "Nunito", sans-serif; color: #3b2a63; }
.sv-scene { width: min(46vh, 40vw); aspect-ratio: 1.5; object-fit: cover; border-radius: 16px; flex: none; }
.sv-card.think { padding-left: 16px; } .sv-cc { width: min(16vh, 12vw); flex: none; }
.game .play:has(.sv2) { zoom: 1 !important; }
.sv2 { position: relative; display: block; padding: 0; overflow: hidden; background-color: #eaf5ff; font-family: "Nunito", "Segoe UI", sans-serif; }
.sv2 button { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; }
.sv2-cc { position: absolute; z-index: 3; left: 0; bottom: 1%; width: min(24vh, 14vw); aspect-ratio: 1; background: center bottom / contain no-repeat; transform-origin: 50% 100%; animation: e4Idle 2.6s ease-in-out infinite; pointer-events: none; }
.sv2-cc.yay { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 3; } .sv2-cc.oops { animation: e4No .5s; }
.sv2-map { position: absolute; left: 15%; right: 2%; top: 4%; height: 52%; display: grid; grid-template-columns: repeat(min(var(--n), 3), 1fr); grid-auto-rows: 1fr; gap: 1.4vh 1.4vw; align-content: stretch; }
.svm-build .sv2-map { right: 30%; }
.sv2-plot { display: grid; place-items: center; min-height: 0; border-radius: 18px; border: 3px dashed rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .35); }
.svm-visit .sv2-plot, .svm-fix .sv2-plot { border-style: solid; background: rgba(255, 255, 255, .55); }
.sv-fac { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; padding: 4px; border-radius: 16px; }
.sv-fac i { width: 100%; flex: 1; min-height: 0; background: center / contain no-repeat; }
.sv-fac b { font: 900 clamp(12px, 2.6vh, 20px) / 1.1 "Nunito", sans-serif; color: #1e3a8a; text-align: center; background: #fff; border-radius: 99px; padding: 1px 10px; }
.svm-visit .sv-fac, .svm-fix .sv-fac { cursor: pointer; }
.sv-fac.pop { animation: popIn .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.sv-fac.nope { animation: e4No .4s; }
.sv-fac.gone { animation: mzGot .6s forwards; pointer-events: none; }
.sv-fac.keep { box-shadow: 0 0 0 4px #22c55e inset; }
.sv-fac.hit { animation: stkBump .5s; box-shadow: 0 0 0 4px #fde047 inset; }
.sv2-pool { position: absolute; right: 1%; top: 3%; bottom: 3%; width: 28%; display: grid; grid-template-columns: 1fr 1fr; gap: 1vh .8vw; align-content: center; }
.sv2-pick { height: min(19vh, 12vw); border-radius: 16px; background: rgba(255, 255, 255, .95) !important; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.sv2-pick.used { visibility: hidden; }
.sv2-pick.no { opacity: .4; filter: grayscale(.8); }
.sv2-pick.nope { animation: e4No .4s; }
.svm-build .sv2-map { height: 70%; top: 8%; }
.sv2-vis { position: absolute; left: 16%; right: 2%; bottom: 3%; height: 38%; display: flex; align-items: flex-end; gap: 16px; }
.sv2-vis.in .sv2-person { animation: svWalk .8s ease-out both; }
@keyframes svWalk { from { transform: translateX(-40vw); } }
.sv2-person { width: min(34vh, 18vw); aspect-ratio: 1; flex: none; background: center bottom / contain no-repeat; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); }
.sv2-bub { align-self: center; max-width: 60%; padding: 12px 20px; border-radius: 22px 22px 22px 6px; background: #fff; border: 4px solid #a78bfa; font: 900 clamp(18px, 4.4vh, 32px) / 1.25 "Nunito", sans-serif; color: #3b2a63; animation: popIn .4s .3s both; }
.sv2-dots { align-self: flex-end; display: flex; gap: 6px; margin-left: auto; padding: 6px 10px; border-radius: 99px; background: rgba(255, 255, 255, .8); }
.sv2-dots i { width: 14px; height: 14px; border-radius: 50%; background: #cbd5e1; }
.sv2-dots i.on { background: #f59e0b; } .sv2-dots i.ok { background: #22c55e; }
@media (max-height: 520px) {
  .sv2-map { top: 22%; height: 40%; left: 14%; } .svm-build .sv2-map { top: 22%; height: 72%; }
  .sv2-pool { top: 20%; right: calc(10vw + 4px); width: 26%; } .sv2-pick { height: min(22vh, 10vw); }
  .sv2-vis { height: 36%; } .sv2-bub { font-size: 16px; padding: 6px 12px; } .sv-fac b { font-size: 11px; padding: 0 6px; }
  .sv-scene { width: min(40vh, 30vw); } .sv-card p { font-size: 16px; }
}
.sv2-pool .sv-fac { height: 100%; } @media (max-height: 520px) { .svm-build .sv2-map { right: 38%; } .sv2-pool { width: 24%; } .sv2-map { top: 21%; height: 42%; } }
@media (max-height: 520px) { .sv2-pool { grid-template-columns: repeat(3, 1fr); width: 33%; top: 19%; bottom: 3%; align-content: start; gap: 4px; } .sv2-pick { height: auto; aspect-ratio: 1; } .svm-build .sv2-map { right: 45%; } .sv2-pick .sv-fac b { font-size: 9px; padding: 0 4px; } }
@media (max-height: 520px) { .sv2-pool { width: 30%; grid-template-rows: repeat(3, 1fr); grid-auto-rows: 1fr; align-content: stretch; top: 19%; bottom: 4%; } .sv2-pick { height: 100%; aspect-ratio: auto; min-height: 0; overflow: hidden; } .sv2-pick .sv-fac { padding: 2px; } }
@media (max-height: 520px) { .svm-visit .sv2-map, .svm-fix .sv2-map { left: 33%; right: calc(10vw + 6px); top: 4%; height: 56%; } .svm-build .sv2-map { left: 4%; top: 46%; height: 52%; right: 47%; } .svm-build .sv2-cc { display: none; } }

/* ───────────── 認識世界（js/world.js）───────────── */
.game .play:has(.wd) { zoom: 1 !important; }
.wd { position: relative; display: block; padding: 0; overflow: hidden; background-color: #e0f2fe; font-family: "Nunito", "Segoe UI", sans-serif; }
.wd button { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; }
.wd-cc { position: absolute; z-index: 3; left: 0; bottom: 1%; width: min(22vh, 13vw); aspect-ratio: 1; background: center bottom / contain no-repeat; transform-origin: 50% 100%; animation: e4Idle 2.6s ease-in-out infinite; pointer-events: none; }
.wd-cc.yay { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 3; } .wd-cc.oops { animation: e4No .5s; }
.wd-main { position: absolute; left: 14%; right: 2%; top: 2%; bottom: 3%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; }
.wd .nope { animation: e4No .4s; } .wd .no { opacity: .45; filter: grayscale(.6); }
.wd-p { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; }
.wd-p i { width: 100%; flex: 1; min-height: 0; background: center bottom / contain no-repeat; }
.wd-p b, .wd-t b, .wd-f b, .wd-room b, .wd-fac b, .wd-item b { padding: 2px 12px; border-radius: 99px; background: #fff; font: 900 clamp(13px, 3vh, 22px) / 1.15 "Nunito", sans-serif; color: #1e3a8a; text-transform: capitalize; text-align: center; }
.wd-p.big { width: min(34vh, 22vw); height: min(46vh, 36vw); flex: none; }
.wd-need { max-width: 80%; padding: 1.4vh 2.4vw; border-radius: 24px 24px 24px 6px; background: #fff; border: 4px solid #f59e0b; font: 900 clamp(20px, 5vh, 38px) / 1.25 "Nunito", sans-serif; color: #7c2d12; text-align: center; animation: popIn .4s both; }
.wd-row { display: flex; gap: 2.4vw; height: 50%; }
.wd-o { width: min(30vh, 19vw); height: 100%; padding: 8px !important; border-radius: 24px; background: rgba(255, 255, 255, .88) !important; box-shadow: 0 5px 0 rgba(0, 0, 0, .12); }
.wd-o.ok { box-shadow: 0 0 0 6px #22c55e; animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 2; }
.wd-split { display: flex; align-items: center; gap: 2.4vw; width: 100%; justify-content: center; }
.wd-col { display: flex; flex-direction: column; gap: 1.6vh; flex: 1; max-width: 60%; }
.wd-s { padding: 1.6vh 2vw !important; border-radius: 20px; background: rgba(255, 255, 255, .95) !important; border: 4px solid #c4b5fd !important; text-align: left; font: 800 clamp(16px, 3.8vh, 28px) / 1.25 "Nunito", sans-serif; color: #3b2a63; box-shadow: 0 4px 0 #8b5cf6; }
.wd-s.ok { border-color: #22c55e !important; box-shadow: 0 0 0 5px #bbf7d0; }
.wd-bag { position: relative; display: flex; flex-direction: column; align-items: center; width: min(20vh, 13vw); aspect-ratio: .9; flex: none; padding-top: 2vh; border-radius: 20px 20px 26px 26px; background: linear-gradient(#b45309, #78350f); border: 4px solid #fbbf24; }
.wd-bag::before { content: ""; position: absolute; top: -18%; left: 30%; right: 30%; height: 22%; border: 5px solid #78350f; border-bottom: 0; border-radius: 14px 14px 0 0; }
.wd-bag-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; font-style: normal; }
.wd-bag-in i { width: min(7vh, 4.4vw); aspect-ratio: 1; background: center / contain no-repeat; animation: popIn .3s both; }
.wd-bag b { position: absolute; bottom: 6%; color: #fde68a; font: 900 clamp(14px, 3vh, 22px) "Nunito", sans-serif; }
.wd-bag.bump { animation: stkBump .4s; }
.wd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4vh 1.2vw; flex: 1; max-width: 52%; }
.wd-grid.n4 { grid-template-columns: repeat(2, 1fr); }
.wd-t { display: flex; flex-direction: column; align-items: center; gap: 2px; height: min(22vh, 14vw); padding: 6px !important; border-radius: 18px; background: rgba(255, 255, 255, .95) !important; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.wd-t i { width: 100%; flex: 1; min-height: 0; background: center / contain no-repeat; }
.wd-t.used { visibility: hidden; } .wd-t.gone { animation: mzGot .6s forwards; }
.wd-fly { position: fixed; z-index: 90; width: min(14vh, 9vw); aspect-ratio: 1; background: center / contain no-repeat; pointer-events: none; }
.wd-cur { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 30%; }
.wd-cur.in .wd-item { animation: popIn .4s both; }
.wd-item { display: flex; flex-direction: column; align-items: center; width: min(22vh, 14vw); padding: 6px; border-radius: 20px; background: #fff; border: 4px solid #fbbf24; box-shadow: 0 5px 0 rgba(180, 83, 9, .3); }
.wd-item i { width: 100%; aspect-ratio: 1; background: center / contain no-repeat; }
.wd-cur small { font-weight: 900; color: #475569; background: rgba(255, 255, 255, .8); border-radius: 99px; padding: 0 10px; }
.wd-rooms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4vh 1.4vw; width: 90%; flex: 1; }
.wd-rooms.n4 { grid-template-columns: repeat(4, 1fr); }
.wd-room { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff !important; border: 5px solid #fff !important; box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.wd-room > i { flex: 1; min-height: 0; background: center / cover no-repeat; }
.wd-room > b { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.wd-in { position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
.wd-in i { width: min(7vh, 4vw); aspect-ratio: 1; border-radius: 8px; background: #fff center / 86% no-repeat; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); animation: popIn .3s both; }
.wd-room.bump { animation: stkBump .4s; } .wd-room.nope { border-color: #f43f5e !important; animation: e4No .4s; }
.wd-room.big { width: min(56vh, 38vw); aspect-ratio: 1.4; flex: none; }
.wd-park { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4vh 2vw; width: 80%; height: 62%; }
.wd-f { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px !important; border-radius: 18px; background: rgba(255, 255, 255, .7) !important; border: 3px solid rgba(255, 255, 255, .95) !important; min-height: 0; }
.wd-f i { width: 100%; flex: 1; min-height: 0; background: center / contain no-repeat; }
.wd-f.hit { animation: stkBump .5s; box-shadow: 0 0 0 5px #22c55e; }
.wd-ask { display: flex; align-items: center; gap: 14px; padding: 1.2vh 2.4vw; border-radius: 22px; background: #fff; border: 4px solid #a78bfa; }
.wd-ask.in { animation: popIn .4s both; }
.wd-ask b { font: 900 clamp(18px, 4.4vh, 32px) / 1.2 "Nunito", sans-serif; color: #3b2a63; }
.wd-dots { display: flex; gap: 5px; } .wd-dots i { width: 12px; height: 12px; border-radius: 50%; background: #cbd5e1; } .wd-dots i.on { background: #f59e0b; } .wd-dots i.ok { background: #22c55e; }
.wd-fac.big { display: flex; flex-direction: column; align-items: center; width: min(36vh, 24vw); padding: 10px; border-radius: 22px; background: rgba(255, 255, 255, .92); flex: none; }
.wd-fac.big i { width: 100%; aspect-ratio: 1; background: center / contain no-repeat; }
@media (max-height: 520px) {
  .wd-main { left: 31%; right: calc(10vw + 6px); top: 3%; gap: 1.6vh; }
  .wd-cc { width: min(30vh, 11vw); }
  .wd-need { font-size: 16px; max-width: 100%; } .wd-row { height: 56%; } .wd-o { width: min(36vh, 14vw); }
  .wd-p b, .wd-t b, .wd-f b, .wd-room b, .wd-fac b, .wd-item b { font-size: 11px; padding: 0 6px; }
  .wd-s { font-size: 13px; padding: 1vh 1.4vw !important; border-width: 3px !important; } .wd-col { max-width: 64%; gap: 1vh; }
  .wd-t { height: min(26vh, 11vw); } .wd-p.big { width: min(40vh, 15vw); height: min(56vh, 22vw); }
  .wd-park { width: 100%; height: 62%; } .wd-ask b { font-size: 15px; } .wd-rooms { width: 100%; }
}

/* ───────────── 圖畫數獨（js/puzzle2.js）───────────── */
.game .play:has(.sk), .game .play:has(.cd2) { zoom: 1 !important; }
.sk { --s: 90px; position: relative; display: flex; align-items: center; justify-content: center; gap: 3vw; padding: 0; overflow: hidden; background: #fffbeb center / cover; font-family: "Nunito", "Segoe UI", sans-serif; }
.sk button { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; }
.sk-cc { position: absolute; z-index: 3; left: 0; bottom: 1%; width: min(22vh, 13vw); aspect-ratio: 1; background: center bottom / contain no-repeat; transform-origin: 50% 100%; animation: e4Idle 2.6s ease-in-out infinite; pointer-events: none; }
.sk-cc.yay { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 3; } .sk-cc.oops { animation: e4No .5s; }
.sk-board { display: grid; grid-template-columns: repeat(var(--n), var(--s)); grid-auto-rows: var(--s); gap: 6px; padding: 12px; border-radius: 26px; background: rgba(255, 255, 255, .82); box-shadow: 0 0 0 6px var(--edge), 0 16px 30px rgba(0, 0, 0, .2); }
.sk-board.done { animation: goBounce .7s ease-in-out 2; }
.sk-c { position: relative; display: grid !important; place-items: center; border-radius: 16px; background: var(--tint) !important; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .08); transition: transform .15s, box-shadow .2s; }
.boxed .sk-c.b1 { background: color-mix(in srgb, var(--tint) 60%, var(--edge) 22%) !important; }
.boxed .sk-c.vr { margin-right: 6px; } .boxed .sk-c.hr { margin-bottom: 6px; }
.sk-img { width: 84%; height: 84%; background: center / contain no-repeat; }
.sk-c.empty { border: 4px dashed var(--edge) !important; background: rgba(255, 255, 255, .7) !important; }
.sk-q { font: 900 calc(var(--s) * .45) / 1 "Nunito", sans-serif; font-style: normal; color: var(--edge); opacity: .7; }
.sk-c.row { box-shadow: inset 0 0 0 4px rgba(250, 204, 21, .8); }
.sk-c.sel { transform: scale(1.06); box-shadow: 0 0 0 5px #fde047, 0 0 18px #fde047; z-index: 2; }
.sk-c.pop .sk-img { animation: popIn .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.sk-c.glow { box-shadow: 0 0 0 4px #22c55e, 0 0 18px #86efac; }
.sk-c.nope { animation: e4No .4s; }
.sk-c.clash { box-shadow: 0 0 0 5px #f43f5e, 0 0 18px #fda4af; animation: stPulse .6s ease-in-out 2; }
.sk-c.hint { box-shadow: 0 0 0 5px #a78bfa, 0 0 20px #c4b5fd; }
.sk-c.fixed { box-shadow: 0 0 0 4px #22c55e; }
.skm-oops .sk-c { cursor: pointer; }
.sk-pal { display: flex; flex-direction: column; gap: 1.6vh; align-items: center; }
.sk-p { width: min(calc(var(--s) * 1.1), 16vh); aspect-ratio: 1; border-radius: 22px; background: #fff !important; box-shadow: 0 6px 0 rgba(0, 0, 0, .15); transition: transform .15s; }
.sk-p i { display: block; width: 82%; height: 82%; margin: 9%; background: center / contain no-repeat; }
.sk-p.on { transform: scale(1.1); box-shadow: 0 0 0 5px var(--edge), 0 6px 0 rgba(0, 0, 0, .15); }
.sk-hint { display: grid; place-items: center; width: min(9vh, 6vw); aspect-ratio: 1; border-radius: 50%; background: #fff !important; border: 3px solid #fbbf24 !important; color: #b45309; }
.sk-hint .ic, .sk-hint svg { width: 55%; height: 55%; fill: currentColor; }
.sk-left { display: grid; place-items: center; width: min(14vh, 9vw); aspect-ratio: 1; border-radius: 50%; background: #f43f5e; color: #fff; border: 5px solid #fff; font: 900 clamp(26px, 7vh, 52px) "Nunito", sans-serif; box-shadow: 0 6px 0 rgba(0, 0, 0, .15); }
@media (max-height: 520px) { .sk { padding-left: 26%; gap: 2vw; } .sk-board { gap: 3px; padding: 6px; border-radius: 16px; } .sk-c { border-radius: 10px; } .sk-pal { gap: 4px; } .sk-p { border-radius: 14px; width: min(calc(var(--s) * 1), 14vh); } .sk-cc { width: min(30vh, 11vw); } }
/* ───────────── 楚橋編程（js/puzzle2.js）───────────── */
.cd2 { --s: 70px; position: relative; display: flex; align-items: center; justify-content: center; gap: 2.4vw; padding: 0; overflow: hidden; background: #dff3fb center / cover; font-family: "Nunito", "Segoe UI", sans-serif; }
.cd2 button { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; }
.cd2-board { position: relative; flex: none; width: calc(var(--s) * var(--W)); height: calc(var(--s) * var(--H)); border-radius: 20px; box-shadow: 0 0 0 6px #a16207, 0 0 0 10px #fde68a, 0 16px 30px rgba(0, 0, 0, .25); overflow: hidden; }
.cd2-t, .cd2-star, .cd2-goal, .cd2-bot { position: absolute; left: calc(var(--s) * var(--x)); top: calc(var(--s) * var(--y)); width: var(--s); height: var(--s); }
.cd2-t { background: #86d76a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); display: grid; place-items: center; }
.cd2-t.alt { background: #7ccd60; }
.cd2-t.wat { background: repeating-linear-gradient(-30deg, #60a5fa 0 10px, #3b82f6 10px 20px); animation: egWave 2s linear infinite; }
.cd2-ob { width: 88%; height: 88%; background: center bottom / contain no-repeat; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .25)); }
.cd2-star { background: center / 70% no-repeat; animation: stPulse 1.6s ease-in-out infinite; filter: drop-shadow(0 0 8px #fde047); }
.cd2-star.got { animation: mzGot .5s forwards; }
.cd2-goal { background: center / 86% no-repeat; filter: drop-shadow(0 0 10px #fde047); }
.cd2-goal.open { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 3; }
.cd2-bot { z-index: 3; background: center bottom / 92% no-repeat; transition: left .3s ease-in-out, top .3s ease-in-out; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); }
.cd2-bot.flip { transform: scaleX(-1); } .cd2-bot.bump { animation: e4No .4s 2; } .cd2-bot.yay { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 3; }
.cd2-side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1.6vh; width: min(30vh, 22vw); }
.cd2-prog { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; width: 100%; min-height: 54px; padding: 8px; border-radius: 18px; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.cd2-prog.full { box-shadow: 0 0 0 3px #f59e0b; } .cd2-prog.nope { animation: e4No .4s; }
.cd2-b { position: relative; display: grid; place-items: center; width: min(7vh, 4.6vw); aspect-ratio: 1; border-radius: 10px; background: #7c3aed; color: #fff; font-size: clamp(14px, 3.4vh, 24px); }
.cd2-b small { position: absolute; right: -6px; top: -8px; padding: 0 5px; border-radius: 99px; background: #f59e0b; border: 2px solid #fff; font: 900 clamp(10px, 2.2vh, 15px) "Nunito", sans-serif; }
.cd2-b.empty { background: rgba(124, 58, 237, .12); border: 2px dashed #a78bfa; }
.cd2-b.now { background: #f59e0b; transform: scale(1.15); }
.cd2-hint { font: 900 24px "Nunito", sans-serif; color: #a78bfa; }
.cd2-pad { display: grid; grid-template-columns: repeat(3, min(9vh, 6vw)); grid-template-rows: repeat(3, min(9vh, 6vw)); gap: 4px; }
.cd2-k { border-radius: 16px; background: #7c3aed !important; color: #fff; font-size: clamp(18px, 4.4vh, 32px); box-shadow: 0 5px 0 #5b21b6; }
.cd2-k:active { transform: translateY(3px); box-shadow: 0 2px 0 #5b21b6; }
.kU { grid-column: 2; grid-row: 1; } .kL { grid-column: 1; grid-row: 2; } .kR { grid-column: 3; grid-row: 2; } .kD { grid-column: 2; grid-row: 3; }
.cd2-acts { display: flex; gap: 8px; }
.cd2-del { display: grid; place-items: center; width: min(9vh, 6vw); aspect-ratio: 1; border-radius: 16px; background: #64748b !important; color: #fff; box-shadow: 0 5px 0 #334155; }
.cd2-go { display: flex; align-items: center; gap: 6px; padding: 0 3vw !important; border-radius: 99px; background: #16a34a !important; color: #fff; box-shadow: 0 5px 0 #166534; animation: stPulse 1.8s ease-in-out infinite; }
.cd2-del .ic, .cd2-del svg, .cd2-go .ic, .cd2-go svg { width: clamp(18px, 4vh, 28px); height: clamp(18px, 4vh, 28px); fill: currentColor; }
.cd2-go b { font: 900 clamp(18px, 4.6vh, 34px) "Nunito", sans-serif; }
@media (max-height: 520px) { .cd2 { padding-left: 27%; gap: 1.6vw; justify-content: flex-start; } .cd2-side { gap: 4px; width: 20vw; margin-right: calc(10vw + 4px); } .cd2-prog { min-height: 34px; padding: 4px; } .cd2-pad { grid-template-columns: repeat(3, 12vh); grid-template-rows: repeat(3, 12vh); } .cd2-k, .cd2-del { border-radius: 10px; } .cd2-del { width: 12vh; } }

.sk-pal { display: grid; grid-template-columns: 1fr; justify-items: center; }
.sk.n4 .sk-pal { grid-template-columns: 1fr 1fr; gap: 1.4vh 1vw; }
.sk.n4 .sk-p { width: min(calc(var(--s) * .95), 14vh); }
.sk-hint, .sk-left { grid-column: 1 / -1; }
@media (max-height: 520px) { .cd2 { padding-left: 36%; } .cd2-side { margin-right: calc(11vw + 8px); width: 19vw; } .cd2-go { padding: 0 2vw !important; } }

/* 認識世界：加深 */
.wd-row.n4 .wd-o { width: min(25vh, 16vw); }
.wd-clues { display: flex; flex-direction: column; gap: 1vh; align-items: center; }
.wd-clue { display: flex; align-items: center; gap: 10px; padding: .8vh 2vw .8vh .8vh; border-radius: 99px; background: rgba(255, 255, 255, .5); font: 900 clamp(16px, 3.8vh, 28px) / 1.2 "Nunito", sans-serif; color: transparent; text-shadow: 0 0 12px rgba(59, 42, 99, .5); }
.wd-clue i { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: #cbd5e1; color: #fff; font-style: normal; text-shadow: none; }
.wd-clue.on { background: #fff; color: #3b2a63; text-shadow: none; border: 3px solid #f59e0b; animation: popIn .4s both; }
.wd-clue.on i { background: #f59e0b; }
.wd-two { display: flex; align-items: center; justify-content: center; gap: 2vw; width: 100%; height: 80%; }
.wd-ow { position: relative; width: min(30vh, 18vw); height: 100%; flex: none; }
.wd-ow .wd-bag.sm { position: absolute; right: -6%; bottom: 12%; width: 46%; padding-top: 1vh; }
.wd-ow .wd-bag.sm .wd-bag-in i { width: min(4.4vh, 2.8vw); }
.wd-ow.nope { animation: e4No .4s; }
.wd-grid.n6 { grid-template-columns: repeat(3, 1fr); max-width: 46%; }
.wd-t.sel { box-shadow: 0 0 0 5px #fde047, 0 4px 0 rgba(0, 0, 0, .12); transform: scale(1.05); }
.wdm-roomq .wd-rooms { flex: 0 1 62%; }
.wd-f.gone { opacity: .35; filter: grayscale(1); box-shadow: 0 0 0 4px #f43f5e; }
.wd-f.gone::after { content: "✕"; position: absolute; font: 900 calc(min(14vh, 9vw)) / 1 sans-serif; color: #f43f5e; }
.wd-f { position: relative; }
@media (max-height: 520px) { .wd-clue { font-size: 14px; padding: 3px 12px 3px 3px; } .wd-row.n4 .wd-o { width: min(30vh, 11vw); } .wd-two { height: 92%; } .wd-ow { width: min(40vh, 13vw); } .wd-grid.n6 { max-width: 44%; } }
@media (max-height: 520px) { .wdm-bags .wd-main { right: calc(12vw + 10px); top: 12%; } .wdm-bags .wd-two { height: 78%; gap: 1.4vw; } .wdm-bags .wd-ow { width: min(34vh, 12vw); } .wdm-bags .wd-grid.n6 { max-width: 42%; grid-auto-rows: 1fr; } .wdm-bags .wd-t { height: min(30vh, 11vw); } }
.wdm-bags .wd-grid.n6 { height: 100%; grid-template-rows: 1fr 1fr; align-self: stretch; } .wdm-bags .wd-t { height: auto !important; min-height: 0; } .wdm-bags .wd-two { align-items: stretch; } .wdm-bags .wd-ow { height: auto; }
.wd-grid.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; } .wd-grid.n6 .wd-t { min-width: 0; overflow: hidden; } .wd-grid.n6 .wd-t b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wdm-bags .wd-ow { flex: none; }
.wd-grid.n6 .wd-t b { white-space: normal; text-overflow: clip; line-height: 1.05; } @media (max-height: 520px) { .wd-grid.n6 .wd-t b { font-size: 9px; padding: 0 3px; } }

/* ───────────── 找不同精緻版（js/spot2.js）───────────── */
.game .play:has(.s2) { zoom: 1 !important; }
.s2 { --pw: 500px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0; background: transparent; box-shadow: none; font-family: "Nunito", "Segoe UI", sans-serif; }
.s2 button { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; }
.s2-pics { display: flex; gap: 14px; }
.s2-pic { position: relative; width: var(--pw); aspect-ratio: 1.5; border-radius: 20px; overflow: hidden; background: #fff center / cover no-repeat; box-shadow: 0 0 0 5px #fff, 0 10px 24px rgba(0, 0, 0, .2); touch-action: manipulation; }
.s2-pic.bot { box-shadow: 0 0 0 5px #38bdf8, 0 10px 24px rgba(0, 0, 0, .2); }
.s2-it { position: absolute; width: calc(var(--pw) * var(--s) / 100); aspect-ratio: 1; background: center / contain no-repeat; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .18)); pointer-events: none; }
.s2-mk { position: absolute; z-index: 3; width: calc(var(--pw) * var(--s) / 100 * 1.15); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: transparent !important; }
.s2-mk.ok { box-shadow: 0 0 0 4px #22c55e, 0 0 0 7px rgba(255, 255, 255, .9), 0 0 16px 6px rgba(34, 197, 94, .55); animation: popIn .4s cubic-bezier(.3, 1.6, .5, 1) both; pointer-events: none; }
.s2-x { position: absolute; z-index: 4; width: 34px; height: 34px; transform: translate(-50%, -50%); color: #ef4444; animation: popIn .25s both; pointer-events: none; }
.s2-x .ic, .s2-x svg { width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 0 2px #fff); }
.s2-lens { position: absolute; z-index: 4; width: calc(var(--pw) * .26); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 5px solid #fde047; box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), 0 0 22px #fde047; animation: stPulse .8s ease-in-out 3; pointer-events: none; }
.s2-bar { display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 18px; border-radius: 99px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.s2-n { font: 900 clamp(18px, 4vh, 28px) "Nunito", sans-serif; color: #0369a1; }
.s2-dots { display: flex; gap: 6px; } .s2-dots i { width: 16px; height: 16px; border-radius: 50%; background: #e2e8f0; border: 2px solid #cbd5e1; } .s2-dots i.on { background: #22c55e; border-color: #16a34a; animation: popIn .3s both; }
.s2-hint { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fde047 !important; color: #92400e; }
.s2-hint .ic, .s2-hint svg { width: 60%; height: 60%; fill: currentColor; }
@media (max-height: 520px) { .s2 { justify-content: flex-end; padding-bottom: 6px; gap: 4px; } .s2-pics { gap: 8px; } .s2-pic { border-radius: 12px; box-shadow: 0 0 0 3px #fff; } .s2-pic.bot { box-shadow: 0 0 0 3px #38bdf8; }
  .s2-wide .s2-bar { position: absolute; top: 2px; right: 4px; } .s2-bar { padding: 3px 6px 3px 12px; } .s2-n { font-size: 15px; } .s2-dots i { width: 11px; height: 11px; } .s2-hint { width: 30px; height: 30px; } }

/* ───────────── 節奏拍拍加強版（js/rhythm2.js）───────────── */
.game .play:has(.rb) { zoom: 1 !important; }
.rb { position: relative; display: block; padding: 0; overflow: hidden; background: #2e1065 center / cover no-repeat; font-family: "Nunito", "Segoe UI", sans-serif; user-select: none; }
.rb button { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; }
.rb-flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, .35), transparent 60%); opacity: 0; }
.rb-flash.on { animation: rbFlash .35s ease-out; }
@keyframes rbFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
.rb-rule { position: absolute; z-index: 3; left: 50%; top: 3%; transform: translateX(-50%); padding: 1vh 3vw; border-radius: 99px; background: #fff; border: 5px solid #f59e0b; box-shadow: 0 6px 0 #b45309; font: 900 clamp(20px, 5vh, 40px) / 1.1 "Nunito", sans-serif; color: #7c2d12; white-space: nowrap; }
.rb-score { position: absolute; z-index: 3; right: 2%; top: 3%; display: flex; align-items: baseline; gap: 4px; padding: 6px 16px; border-radius: 99px; background: rgba(255, 255, 255, .92); font: 900 clamp(18px, 4vh, 30px) "Nunito", sans-serif; color: #6d28d9; }
.rb-ok { font-size: 1.3em; }
.rb-combo { position: absolute; right: 0; top: 110%; font-style: normal; color: #f59e0b; white-space: nowrap; font-size: .8em; text-shadow: 0 2px 0 #fff; }
.rb-combo.pop { animation: popIn .35s cubic-bezier(.3, 1.6, .5, 1); }
.rb-lane { position: absolute; z-index: 2; left: 2%; right: 2%; top: 30%; height: 30%; border-radius: 99px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .9), 0 8px 24px rgba(76, 29, 149, .25); }
.rb-ring { position: absolute; left: 16%; top: 50%; height: 116%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 8px solid #f59e0b; background: rgba(253, 224, 71, .25); box-shadow: 0 0 0 6px rgba(255, 255, 255, .8), 0 0 30px #fde047; }
.rb-note { position: absolute; top: 50%; height: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, .15); }
.rb-note i { width: 82%; height: 82%; background: center / contain no-repeat; }
.rb-note.num { background: radial-gradient(circle at 35% 30%, #fff, #e9d5ff); border: 5px solid #8b5cf6; }
.rb-note.num b { font: 900 clamp(28px, 9vh, 70px) / 1 "Nunito", sans-serif; color: #4c1d95; }
.rb-note.hitn { animation: rbHit .45s forwards; }
.rb-note.oops { animation: rbOops .6s forwards; }
.rb-note.missn { opacity: .35 !important; filter: grayscale(1); }
.rb-note.skip { opacity: .4 !important; }
@keyframes rbHit { to { transform: translate(-50%, -120%) scale(1.5); opacity: 0; } }
@keyframes rbOops { 30% { box-shadow: 0 0 0 6px #f43f5e; transform: translate(-50%, -50%) rotate(-15deg); } 100% { transform: translate(-50%, 80%) rotate(25deg); opacity: 0; } }
.rb-cc { position: absolute; z-index: 3; left: 1%; bottom: 1%; width: min(30vh, 18vw); aspect-ratio: 1; background: center bottom / contain no-repeat; transform-origin: 50% 100%; pointer-events: none; }
.rb-cc.beat { animation: rbBeat .25s; } .rb-cc.yay { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 3; }
@keyframes rbBeat { 50% { transform: scale(1.08, .92); } }
.rb-judge { position: absolute; z-index: 3; left: 16%; top: 64%; transform: translateX(-50%); font: 900 clamp(24px, 6vh, 46px) "Nunito", sans-serif; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; }
.rb-judge.pop { animation: rbJudge .7s ease-out; } .rb-judge.perfect { color: #fde047; } .rb-judge.good { color: #86efac; } .rb-judge.miss { color: #fda4af; }
@keyframes rbJudge { 0% { opacity: 0; transform: translateX(-50%) scale(.6); } 25% { opacity: 1; transform: translateX(-50%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -30px); } }
.rb-drum { position: absolute; z-index: 4; left: 50%; bottom: 3%; transform: translateX(-50%); display: grid; place-items: center; width: min(32vh, 22vw); aspect-ratio: 1.3; border-radius: 50% / 40%; background: radial-gradient(ellipse at 50% 30%, #fef3c7, #fde68a 55%, #f59e0b) !important; border: 8px solid #dc2626 !important; box-shadow: 0 12px 0 #991b1b, 0 16px 24px rgba(0, 0, 0, .3); touch-action: manipulation; }
.rb-drum b { font: 900 clamp(24px, 7vh, 54px) "Nunito", sans-serif; color: #991b1b; letter-spacing: 2px; }
.rb-drum.hit { animation: rbDrum .18s; }
@keyframes rbDrum { 50% { transform: translateX(-50%) translateY(8px) scale(.95); box-shadow: 0 4px 0 #991b1b; } }
.rb-count { position: absolute; z-index: 5; left: 50%; top: 45%; transform: translate(-50%, -50%); font: 900 clamp(70px, 22vh, 180px) "Nunito", sans-serif; color: #fff; text-shadow: 0 6px 0 #7c3aed, 0 0 30px #c4b5fd; pointer-events: none; }
.rb-count.in { animation: rxCount .8s ease-out both; }
@media (max-height: 520px) {
  .rb-rule { top: 20%; font-size: 18px; padding: 4px 16px; border-width: 3px; box-shadow: 0 3px 0 #b45309; } .rb-score { top: 20%; font-size: 15px; padding: 3px 10px; }
  .rb-lane { top: 37%; height: 28%; } .rb-drum { width: min(38vh, 18vw); bottom: 2%; border-width: 5px !important; box-shadow: 0 6px 0 #991b1b; } .rb-drum b { font-size: 22px; }
  .rb-cc { width: min(34vh, 13vw); } .rb-judge { top: 67%; font-size: 22px; } .rb-note.num b { font-size: 28px; }
}
/* 找不同：手機橫放時，兩幅圖用晒對白框右邊的位置 */
@media (max-height: 520px) {
  .game #stim:has(.fspot) { position: fixed; z-index: 6; left: 38vw; right: 74px; top: 52px; bottom: 6px; width: auto; max-width: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
  .game #stim:has(.fspot) .spot-count { font-size: 13px; padding: 1px 10px; }
  .game #stim .fspot { flex-wrap: nowrap; gap: 8px; width: 100%; }
  .game #stim .fspot .spot-pic { width: calc(50% - 4px); border-width: 3px; border-radius: 12px; }
}

/* 找不同：提示、大圖 */
.spot-top { display: flex; align-items: center; justify-content: center; gap: 10px; }
.spot-hint { display: flex; align-items: center; gap: 6px; padding: 4px 14px 4px 8px; border-radius: 99px; border: 3px solid #fbbf24; background: #fffbeb; color: #b45309; font: 900 16px "Nunito", sans-serif; cursor: pointer; }
.spot-hint .ic, .spot-hint svg { width: 22px; height: 22px; fill: currentColor; }
.spot-lens { position: absolute; z-index: 4; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 5px solid #fde047; box-shadow: 0 0 0 4px rgba(255, 255, 255, .75), 0 0 26px #fde047, inset 0 0 30px rgba(253, 224, 71, .35); animation: stPulse .8s ease-in-out 3; pointer-events: none; }
@media (min-height: 521px) {
  .game #stim:has(.fspot) { width: 100%; max-width: none; }
  .game #stim .fspot { flex-wrap: nowrap; gap: 10px; width: 100%; }
  .game #stim .fspot .spot-pic { width: min(calc(50% - 5px), calc((100vh - 250px) * 1.49)); max-width: none; }
}
@media (max-height: 520px) {
  .game #stim:has(.fspot) { left: 14px; right: 74px; top: 128px; justify-content: flex-start; }
  .game #stim .fspot .spot-pic { width: min(calc(50% - 4px), calc((100vh - 168px) * 1.49)); }
  .spot-top { position: fixed; z-index: 7; right: 12px; top: 54px; flex-direction: column; gap: 4px; }
  .spot-hint { font-size: 13px; padding: 2px 10px 2px 6px; } .spot-hint .ic, .spot-hint svg { width: 17px; height: 17px; }
}
@media (max-height: 520px) { .screen.game > .play > #stim:has(.fspot) { zoom: 1; overflow: visible; } }
@media (max-height: 520px) { .game #stim:has(.fspot) { top: 150px; bottom: 4px; left: 10px; right: 70px; } .game #stim .fspot .spot-pic { width: min(calc(50% - 4px), calc((100vh - 156px) * 1.49)); } .game:has(.fspot) .bd-say { bottom: auto; top: -120%; right: 10%; max-width: 46vw; } }
@media (max-height: 520px) { .game #stim:has(.fspot) { top: 160px; } .game #stim .fspot .spot-pic { width: min(calc(50% - 4px), calc((100vh - 166px) * 1.49)); } }

/* 圓圈不動，只在拍中時發光 */
.rb-ring { animation: none !important; transition: box-shadow .12s; }
.rb[data-hot] .rb-ring { box-shadow: 0 0 0 6px rgba(255, 255, 255, .9), 0 0 40px 8px #fde047; }

/* ───────────── 線線迷宮加強版（js/tangle2.js）───────────── */
.game .play:has(.tl2) { zoom: 1 !important; }
.tl2 { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0 1% 1%; background: transparent; box-shadow: none; font-family: "Nunito", "Segoe UI", sans-serif; user-select: none; }
.tl2 button { padding: 0; border: 0; background: none; cursor: pointer; }
.tl2-stage { position: relative; flex: 1; min-height: 0; touch-action: none; }
.tl2-stage.off { animation: e4No .35s; }
.tl2-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.tl2-out { fill: none; stroke: #334155; stroke-width: 30; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .55; }
.tl2-in { fill: none; stroke-width: 20; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tl2-done { fill: none; stroke: #fde047; stroke-width: 14; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px #fbbf24); }
.tl2-done.ok { stroke: #22c55e; filter: drop-shadow(0 0 6px #86efac); }
.tl2-glow { fill: none; stroke: #fde047; stroke-width: 34; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .35; animation: stPulse 1.6s ease-in-out infinite; pointer-events: none; }
.tl2-it, .tl2-who { position: absolute; z-index: 2; width: min(17vh, 11vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #fff !important; box-shadow: 0 0 0 5px #fff, 0 6px 14px rgba(0, 0, 0, .25); }
.tl2-it { left: 6%; } .tl2-who { left: 94%; }
.tl2-it i, .tl2-who i { position: absolute; inset: 10%; background: center / contain no-repeat; }
.tl2-it.ask { box-shadow: 0 0 0 6px #fde047, 0 0 26px 8px rgba(253, 224, 71, .8); animation: stPulse 1.4s ease-in-out infinite; }
.tl2-it.got { opacity: .45; }
.tl2-who.got { box-shadow: 0 0 0 6px #22c55e, 0 0 24px 6px rgba(34, 197, 94, .6); }
.tl2-who.yay { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 2; }
.tl2-who.no { animation: e4No .4s; box-shadow: 0 0 0 6px #f43f5e; }
.tl2-head, .tl2-fly { position: absolute; z-index: 3; width: min(10vh, 6.4vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #fff center / 78% no-repeat; box-shadow: 0 0 0 4px #fde047, 0 4px 10px rgba(0, 0, 0, .3); pointer-events: none; }
.tl2-bar { display: flex; align-items: center; justify-content: center; gap: 12px; height: 44px; }
.tl2-n { padding: 4px 16px; border-radius: 99px; background: #fff; font: 900 22px "Nunito", sans-serif; color: #0369a1; }
.tl2-tip { display: flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 99px; background: rgba(255, 255, 255, .9); color: #7c3aed; font: 900 18px "Nunito", sans-serif; }
.tl2-tip .ic, .tl2-tip svg { width: 22px; height: 22px; fill: currentColor; }
@media (max-height: 520px) { .tl2.tl2-wide { padding-top: 21vh; } .tl2-it, .tl2-who { width: min(20vh, 8vw); box-shadow: 0 0 0 3px #fff, 0 4px 8px rgba(0, 0, 0, .25); } .tl2-it { left: 5%; } .tl2-who { left: 91%; } .tl2-bar { height: 28px; } .tl2-tip, .tl2-n { font-size: 14px; padding: 2px 10px; } .tl2-out { stroke-width: 22; } .tl2-in { stroke-width: 14; } .tl2-done { stroke-width: 10; } }

.tl2-it, .tl2-who { width: var(--cs, min(17vh, 11vw)) !important; }
.tl2-head, .tl2-fly { width: calc(var(--cs, 80px) * .62); }
@media (max-height: 520px) { .tl2 { padding-top: 20vh; } }

/* ───────────── 找相同重新設計（js/same3.js）───────────── */
.game .play:has(.sm3) { zoom: 1 !important; }
.sm3 { --is: 90px; position: relative; display: flex; align-items: stretch; gap: 1.6vw; padding: 1vh 1%; background: transparent; box-shadow: none; font-family: "Nunito", "Segoe UI", sans-serif; }
.sm3 button { padding: 0; border: 0; background: none; cursor: pointer; }
.sm3-card { flex: none; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(30vh, 20vw); padding: 12px; border-radius: 26px; background: #fff; border: 6px solid #f59e0b; box-shadow: 0 8px 0 #b45309, 0 14px 24px rgba(0, 0, 0, .2); position: relative; }
.sm3-card > b { font: 900 clamp(16px, 3.6vh, 26px) "Nunito", sans-serif; color: #b45309; }
.sm3-tgt { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 18px; background: #fffbeb; position: relative; }
.sm3-tgt .sm3-im { width: 80%; height: 80%; }
.sm3-tgt.q { font: 900 clamp(40px, 12vh, 90px) "Nunito", sans-serif; color: #fcd34d; }
.sm3-cover { display: none; position: absolute; left: 12px; right: 12px; top: calc(12px + 3.6vh + 8px); aspect-ratio: 1; border-radius: 18px; background: repeating-linear-gradient(45deg, #a78bfa 0 14px, #8b5cf6 14px 28px); color: #fff; font: 900 clamp(40px, 12vh, 90px) / 1 "Nunito", sans-serif; font-style: normal; place-items: center; }
.sm3.hid .sm3-cover { display: grid; animation: popIn .4s both; }
.sm3.peek .sm3-field { opacity: 0; } .sm3.hid .sm3-field { animation: fadein .4s; }
.sm3.peek .sm3-tgt { animation: stPulse 1s ease-in-out infinite; }
.sm3-n { padding: 2px 14px; border-radius: 99px; background: #fde68a; font: 900 clamp(16px, 3.4vh, 24px) "Nunito", sans-serif; color: #7c2d12; }
.sm3-card.done { animation: npJump .6s cubic-bezier(.3, 1.6, .5, 1) 2; }
.sm3-field { position: relative; flex: 1; min-width: 0; border-radius: 28px; background: rgba(255, 255, 255, .35); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7); }
.sm3-it { position: absolute; width: var(--is); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--r)); border-radius: 50%; transition: transform .15s; }
.sm3-it:active { transform: translate(-50%, -50%) rotate(var(--r)) scale(.92); }
.sm3-im { display: block; width: 100%; height: 100%; background: center / contain no-repeat; }
.sm3-it.got { box-shadow: 0 0 0 5px #22c55e, 0 0 20px 6px rgba(34, 197, 94, .55); background: rgba(255, 255, 255, .75) !important; animation: popIn .4s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.sm3-it.no { animation: e4No .4s; box-shadow: 0 0 0 4px #f43f5e; border-radius: 50%; }
.sm3-it.hint { box-shadow: 0 0 0 6px #fde047, 0 0 28px 8px rgba(253, 224, 71, .8); animation: stPulse .7s ease-in-out 3; }
.sm3-hint { position: absolute; right: 2%; top: 1vh; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fde047 !important; color: #92400e; box-shadow: 0 4px 0 #ca8a04; }
.sm3-hint .ic, .sm3-hint svg { width: 58%; height: 58%; fill: currentColor; }
@media (max-height: 520px) { .sm3 { padding-top: 19vh; gap: 1vw; } .sm3-card { width: min(46vh, 15vw); padding: 6px; border-width: 4px; gap: 4px; border-radius: 16px; } .sm3-card > b { font-size: 12px; } .sm3-n { font-size: 13px; padding: 0 8px; }
  .sm3-cover { left: 6px; right: 6px; top: 26px; } .sm3-hint { top: auto; bottom: 1vh; right: calc(11vw + 6px); width: 36px; height: 36px; } .sm3-field { margin-right: calc(10vw + 4px); } }
@media (max-height: 520px) { .sm3 { padding-top: 36vh; } .sm3-card { align-self: flex-start; margin-top: -6vh; } }
.sm3.hid .sm3-field { animation: none; }
@media (max-height: 520px) { .sm3 { padding: 1vh 1% 1vh calc(30vw + 8px); } .sm3-card { position: absolute; left: 1%; top: auto; bottom: 1vh; margin: 0; width: 27vw; flex-direction: row; flex-wrap: wrap; justify-content: center; align-self: auto; } .sm3-card > b { width: 100%; text-align: center; } .sm3-tgt { width: 44%; } .sm3-cover { top: 24px; left: 28%; right: 28%; } .sm3-field { margin-right: calc(10vw + 4px); } }
@media (max-height: 520px) { .sm3-hint { left: 2%; right: auto; top: 44%; bottom: auto; } }

/* 聽指令（新版）：平面房間，楚楚真的做動作 */
.game .play:has(.fo3) { zoom: 1 !important; }
.follow.real.fo3 { --u: 8px; background: #fef3c7; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.fo3 .f3-bg { position: absolute; inset: 0; background-size: cover; background-position: center bottom; }
.fo3 .f3o { position: absolute; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: left var(--mt, 0s) ease-in-out, top var(--mt, 0s) ease-in-out, opacity .3s; }
.fo3 .f3o.deco { pointer-events: none; }
.fo3 .f3o > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; pointer-events: none; filter: drop-shadow(0 calc(var(--u) * .3) calc(var(--u) * .3) rgba(0, 0, 0, .18)); }
.fo3 .f3o i { position: absolute; display: block; font-style: normal; }
.fo3 .f3o.fl::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: calc(var(--u) * -.7); height: calc(var(--u) * 1.6); border-radius: 50%; background: rgba(60, 40, 20, .14); }
.fo3 .f3o.held, .fo3 .f3o.inside, .fo3 .f3o.gone { opacity: 0; pointer-events: none; }
.fo3 .f3o.gone { visibility: hidden; }
.fo3 .f3-cap { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 18%); padding: .05em .55em; border-radius: 99px; background: rgba(255, 255, 255, .94); color: #3b0764; font: 800 max(11px, calc(var(--u) * 1.8)) "Nunito", sans-serif; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 5px rgba(0, 0, 0, .15); }
.fo3 .f3o[data-id="pencil"] .f3-cap, .fo3 .f3o[data-id="crayon"] .f3-cap, .fo3 .f3o[data-id="bread"] .f3-cap, .fo3 .f3o[data-id="plate"] .f3-cap, .fo3 .f3o[data-id="cup"] .f3-cap,
.fo3 .f3o[data-id="storybook"] .f3-cap, .fo3 .f3o[data-id="water-bottle"] .f3-cap { top: auto; bottom: 100%; transform: translate(-50%, -12%); }
/* 窗 */
.fo3 .f3-k-window { background: #fffaf0; border-radius: calc(var(--u) * .8); box-shadow: 0 0 0 calc(var(--u) * .6) #d4a373, 0 calc(var(--u) * .5) 0 calc(var(--u) * .6) #b5835a; }
.fo3 .w-sky { inset: 7% 7% 9% 7%; overflow: hidden; border-radius: calc(var(--u) * .3); background: linear-gradient(#60a5fa, #bae6fd 78%, #86efac 78%); }
.fo3 .w-sun { right: 12%; top: 12%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: #fde047; box-shadow: 0 0 calc(var(--u) * 2) #fde047; }
.fo3 .w-cloud { left: 12%; top: 24%; width: 30%; height: 13%; border-radius: 99px; background: #fff; box-shadow: calc(var(--u) * 1.6) calc(var(--u) * -.8) 0 calc(var(--u) * .1) #fff; }
.fo3 .w-bird { left: -20%; top: 44%; width: 12%; height: 8%; }
.fo3 .w-bird::before, .fo3 .w-bird::after { content: ''; position: absolute; top: 0; width: 55%; height: 100%; border-top: calc(var(--u) * .45) solid #334155; border-radius: 60% 60% 0 0; }
.fo3 .w-bird::before { left: 0; } .fo3 .w-bird::after { right: 0; }
.fo3 .f3-k-window.lookout .w-bird { animation: f3Bird 1.8s linear; }
.fo3 .w-pane { top: 7%; bottom: 9%; width: 43%; box-sizing: border-box; border: calc(var(--u) * .6) solid #fffaf0; background: linear-gradient(135deg, rgba(255, 255, 255, .6) 0 16%, rgba(255, 255, 255, .14) 16% 34%, rgba(255, 255, 255, .38) 34% 40%, rgba(255, 255, 255, .1) 40%); transition: transform .8s cubic-bezier(.5, 0, .3, 1.2); }
.fo3 .w-pane.l { left: 7%; transform-origin: 0 50%; } .fo3 .w-pane.r { right: 7%; transform-origin: 100% 50%; }
.fo3 .f3-k-window[data-s="open"] .w-pane.l { transform: perspective(calc(var(--u) * 30)) rotateY(76deg); }
.fo3 .f3-k-window[data-s="open"] .w-pane.r { transform: perspective(calc(var(--u) * 30)) rotateY(-76deg); }
.fo3 .w-sill { left: -7%; right: -7%; bottom: -8%; height: 9%; border-radius: calc(var(--u) * .5); background: #c08552; }
/* 門 */
.fo3 .f3-k-door { background: #a16207; border-radius: calc(var(--u) * 1) calc(var(--u) * 1) 0 0; }
.fo3 .d-gap { inset: 5% 7% 0 7%; background: linear-gradient(#fef9c3, #fcd34d); }
.fo3 .d-leaf { inset: 5% 7% 0 7%; background: #f4a261; transform-origin: 0 50%; transition: transform .9s cubic-bezier(.5, 0, .3, 1.1); box-shadow: inset 0 0 0 calc(var(--u) * .5) #e07a4b; }
.fo3 .d-leaf::before, .fo3 .d-leaf::after { content: ''; position: absolute; left: 16%; right: 16%; border-radius: calc(var(--u) * .6); box-shadow: inset 0 0 0 calc(var(--u) * .45) #e07a4b; }
.fo3 .d-leaf::before { top: 8%; height: 34%; } .fo3 .d-leaf::after { top: 50%; height: 40%; }
.fo3 .d-knob { right: 9%; top: 50%; width: 11%; aspect-ratio: 1; border-radius: 50%; background: #fde047; box-shadow: 0 0 0 calc(var(--u) * .3) #ca8a04; }
.fo3 .f3-k-door[data-s="open"] .d-leaf { transform: perspective(calc(var(--u) * 60)) rotateY(-80deg); }
/* 時鐘 */
.fo3 .f3-k-clock { border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(var(--u) * .8) #fb923c, 0 calc(var(--u) * .5) calc(var(--u) * .8) rgba(0, 0, 0, .2); }
.fo3 .c-face { inset: 8%; border-radius: 50%; background: repeating-conic-gradient(from -2deg, #475569 0 4deg, transparent 4deg 30deg); -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%); mask: radial-gradient(circle, transparent 64%, #000 65%); }
.fo3 .c-h, .fo3 .c-m { left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 99px; background: #1e293b; transition: transform 1.2s ease-in-out; }
.fo3 .c-h { width: 8%; height: 25%; margin-left: -4%; transform: rotate(var(--hr, 0deg)); }
.fo3 .c-m { width: 5%; height: 35%; margin-left: -2.5%; transform: rotate(var(--mn, 0deg)); background: #ef4444; }
.fo3 .c-dot { left: 44%; top: 44%; width: 12%; height: 12%; border-radius: 50%; background: #1e293b; }
/* 白板 */
.fo3 .f3-k-board { background: #cbd5e1; border-radius: calc(var(--u) * .8); box-shadow: 0 calc(var(--u) * .4) 0 #94a3b8; }
.fo3 .b-white { inset: 4.5%; overflow: hidden; border-radius: calc(var(--u) * .4); background: #fff; }
.fo3 .b-ink { position: absolute; inset: 4%; width: 92%; height: 92%; clip-path: inset(0 0 0 0); transition: clip-path 1.2s linear; }
.fo3 .f3-k-board.wiped .b-ink { clip-path: inset(0 0 0 100%); }
.fo3 .b-tray { left: 12%; right: 12%; bottom: -5%; height: 6%; border-radius: 99px; background: #94a3b8; }
/* 書桌、椅子 */
.fo3 .k-top { left: -2%; right: -2%; top: 0; height: 14%; border-radius: calc(var(--u) * .5); background: #e9a35b; box-shadow: inset 0 calc(var(--u) * -.5) 0 #c47f3a; }
.fo3 .k-leg { top: 12%; bottom: 0; width: 6%; background: #b7793a; } .fo3 .k-leg.l { left: 5%; } .fo3 .k-leg.r { right: 5%; }
.fo3 .k-drawer { top: 14%; left: 52%; width: 38%; height: 28%; border-radius: 0 0 calc(var(--u) * .4) calc(var(--u) * .4); background: #dc9550; }
.fo3 .k-drawer::after { content: ''; position: absolute; left: 40%; width: 20%; top: 40%; height: 18%; border-radius: 99px; background: #8b5a2b; }
.fo3 .ch-back { left: 16%; right: 16%; top: 0; height: 32%; border-radius: calc(var(--u) * 1); background: #60a5fa; box-shadow: inset 0 calc(var(--u) * -.4) 0 #3b82f6; }
.fo3 .ch-bar { left: 44%; width: 12%; top: 30%; height: 14%; background: #64748b; }
.fo3 .ch-seat { left: 6%; right: 6%; top: 42%; height: 12%; border-radius: calc(var(--u) * .6); background: #3b82f6; }
.fo3 .ch-leg { top: 52%; bottom: 0; width: 8%; background: #64748b; } .fo3 .ch-leg.l { left: 14%; } .fo3 .ch-leg.r { right: 14%; }
/* 櫃子 */
.fo3 .f3-k-cupboard { border-radius: calc(var(--u) * .8) calc(var(--u) * .8) calc(var(--u) * .3) calc(var(--u) * .3); background: #c98a4b; }
.fo3 .cb-in { inset: 7% 6% 9% 6%; background: #6b3f1d; }
.fo3 .cb-in::before, .fo3 .cb-in::after { content: ''; position: absolute; left: 0; right: 0; height: 4%; background: #a0652f; }
.fo3 .cb-in::before { top: 33%; } .fo3 .cb-in::after { top: 66%; }
.fo3 .cb-books { left: 8%; bottom: 0; width: 46%; height: 26%; background: linear-gradient(90deg, #ef4444 0 20%, transparent 20% 25%, #22c55e 25% 45%, transparent 45% 50%, #3b82f6 50% 70%, transparent 70% 75%, #eab308 75%); }
.fo3 .cb-door { top: 7%; bottom: 9%; width: 44%; background: #e9b872; box-shadow: inset 0 0 0 calc(var(--u) * .4) #d39a55; transition: transform .8s cubic-bezier(.5, 0, .3, 1.1); }
.fo3 .cb-door.l { left: 6%; transform-origin: 0 50%; } .fo3 .cb-door.r { right: 6%; transform-origin: 100% 50%; }
.fo3 .cb-door::after { content: ''; position: absolute; top: 45%; width: 8%; height: 12%; border-radius: 99px; background: #8b5a2b; }
.fo3 .cb-door.l::after { right: 10%; } .fo3 .cb-door.r::after { left: 10%; }
.fo3 .f3-k-cupboard[data-s="open"] .cb-door.l { transform: perspective(calc(var(--u) * 50)) rotateY(-100deg); }
.fo3 .f3-k-cupboard[data-s="open"] .cb-door.r { transform: perspective(calc(var(--u) * 50)) rotateY(100deg); }
.fo3 .cb-top { left: -3%; right: -3%; top: -3%; height: 6%; border-radius: calc(var(--u) * .4); background: #a8692f; }
/* 玩具箱 */
.fo3 .tb-body { left: 0; right: 0; top: 20%; bottom: 0; border-radius: calc(var(--u) * .8); background: radial-gradient(circle at 25% 45%, #fde047 0 7%, transparent 8%), radial-gradient(circle at 60% 65%, #a7f3d0 0 8%, transparent 9%), radial-gradient(circle at 82% 38%, #fff 0 6%, transparent 7%), #f472b6; box-shadow: inset 0 calc(var(--u) * -.7) 0 #db2777; }
.fo3 .tb-lid { left: -3%; right: -3%; top: 4%; height: 18%; border-radius: calc(var(--u) * .8); background: #ec4899; transform-origin: 3% 100%; transition: transform .6s cubic-bezier(.5, 0, .3, 1.3); }
.fo3 .f3-k-toybox[data-s="open"] .tb-lid { transform: translateY(-70%) rotate(-16deg); }
/* 冰箱 */
.fo3 .f3-k-fridge { border-radius: calc(var(--u) * 1.4); background: #93c5fd; }
.fo3 .fr-in { inset: 4% 6%; border-radius: calc(var(--u) * .8); background: #f8fafc; box-shadow: inset 0 0 calc(var(--u) * 2) #bfdbfe; }
.fo3 .fr-in::before, .fo3 .fr-in::after { content: ''; position: absolute; left: 0; right: 0; height: 2.5%; background: #bfdbfe; }
.fo3 .fr-in::before { top: 34%; } .fo3 .fr-in::after { top: 62%; }
.fo3 .fr-door { inset: 0; border-radius: calc(var(--u) * 1.4); background: linear-gradient(#bfdbfe 0 37%, #93c5fd 37% 38.5%, #bfdbfe 38.5%); box-shadow: inset 0 0 0 calc(var(--u) * .5) #93c5fd; transform-origin: 0 50%; transition: transform .8s cubic-bezier(.5, 0, .3, 1.1); }
.fo3 .fr-door::before, .fo3 .fr-door::after { content: ''; position: absolute; right: 9%; width: 6%; border-radius: 99px; background: #64748b; }
.fo3 .fr-door::before { top: 14%; height: 14%; } .fo3 .fr-door::after { top: 46%; height: 20%; }
.fo3 .f3-k-fridge[data-s="open"] .fr-door { transform: perspective(calc(var(--u) * 70)) rotateY(-100deg); }
/* 廚房枱、洗碗盆 */
.fo3 .ct-top { left: -1%; right: -1%; top: 0; height: 10%; border-radius: calc(var(--u) * .4); background: #f5f5f4; box-shadow: inset 0 calc(var(--u) * -.5) 0 #d6d3d1; }
.fo3 .ct-front { left: 0; right: 0; top: 10%; bottom: 0; background: repeating-linear-gradient(90deg, #f1c27d 0 calc(25% - var(--u) * .4), #d39a55 calc(25% - var(--u) * .4) 25%); }
.fo3 .sk-basin { left: 4%; right: 4%; bottom: 0; height: 44%; border-radius: 0 0 40% 40% / 0 0 80% 80%; background: #94a3b8; box-shadow: inset 0 calc(var(--u) * .6) 0 #64748b; }
.fo3 .sk-tap { left: 46%; bottom: 40%; width: 7%; height: 48%; border-radius: 99px 99px 0 0; background: #94a3b8; }
.fo3 .sk-spout { left: 46%; top: 10%; width: 26%; height: 10%; border-radius: 99px; background: #94a3b8; }
.fo3 .sk-water { left: 66%; top: 18%; width: 4.5%; height: 55%; border-radius: 99px; background: linear-gradient(#7dd3fc, #38bdf8); opacity: 0; transform: scaleY(0); transform-origin: top; transition: .25s; }
.fo3 .f3-k-sink.run .sk-water { opacity: .95; transform: scaleY(1); }
.fo3 .sk-bub { left: 25%; bottom: 30%; width: 50%; height: 40%; opacity: 0; background: radial-gradient(circle at 20% 60%, #fff 0 12%, transparent 13%), radial-gradient(circle at 50% 30%, #fff 0 15%, transparent 16%), radial-gradient(circle at 80% 60%, #fff 0 11%, transparent 12%); }
.fo3 .f3-k-sink.run .sk-bub { animation: f3Bub .55s ease-in-out 3; }
/* 垃圾桶 */
.fo3 .bn-body { left: 8%; right: 8%; top: 16%; bottom: 0; border-radius: calc(var(--u) * .5) calc(var(--u) * .5) calc(var(--u) * 1.2) calc(var(--u) * 1.2); background: repeating-linear-gradient(90deg, transparent 0 14%, rgba(255, 255, 255, .18) 14% 20%), var(--bc, #3b82f6); }
.fo3 .bn-lid { left: 0; right: 0; top: 4%; height: 14%; border-radius: calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * .3) calc(var(--u) * .3); background: var(--lc, #2563eb); transform-origin: 2% 100%; transition: transform .5s cubic-bezier(.5, 0, .3, 1.4); }
.fo3 .f3-k-bin[data-s="open"] .bn-lid { transform: translate(-6%, -90%) rotate(-30deg); }
.fo3.green { --bc: #22c55e; --lc: #16a34a; }
/* 床、床頭櫃、燈 */
.fo3 .bd-head { left: 0; width: 8%; top: 0; bottom: 10%; border-radius: calc(var(--u) * 1.2) calc(var(--u) * 1.2) 0 0; background: #c08552; }
.fo3 .bd-foot { right: 0; width: 6%; top: 28%; bottom: 10%; border-radius: calc(var(--u) * 1) calc(var(--u) * 1) 0 0; background: #c08552; }
.fo3 .bd-base { left: 4%; right: 3%; top: 58%; height: 26%; background: #d9a066; }
.fo3 .bd-mat { left: 6%; right: 5%; top: 40%; height: 20%; border-radius: calc(var(--u) * .6); background: #fff; }
.fo3 .bd-blank { left: 34%; right: 5%; top: 36%; height: 34%; border-radius: calc(var(--u) * .8) calc(var(--u) * .8) calc(var(--u) * .4) calc(var(--u) * .4); background: repeating-linear-gradient(45deg, #f9a8d4 0 12%, #fbcfe8 12% 24%); }
.fo3 .bd-pil { left: 10%; width: 20%; top: 25%; height: 18%; border-radius: 45%; background: #fff; box-shadow: inset 0 calc(var(--u) * -.4) 0 #e2e8f0; }
.fo3 .bd-leg { bottom: 0; width: 5%; height: 12%; background: #a16207; } .fo3 .bd-leg.l { left: 6%; } .fo3 .bd-leg.r { right: 5%; }
.fo3 .sd-top { left: -4%; right: -4%; top: 0; height: 12%; border-radius: calc(var(--u) * .4); background: #e9a35b; }
.fo3 .sd-body { left: 6%; right: 6%; top: 12%; bottom: 12%; background: #f1c27d; box-shadow: inset 0 0 0 calc(var(--u) * .4) #d39a55; }
.fo3 .sd-body::after { content: ''; position: absolute; left: 44%; top: 40%; width: 12%; height: 12%; border-radius: 50%; background: #8b5a2b; }
.fo3 .sd-leg { bottom: 0; width: 10%; height: 12%; background: #c08552; } .fo3 .sd-leg.l { left: 10%; } .fo3 .sd-leg.r { right: 10%; }
.fo3 .lp-base { left: 22%; right: 22%; bottom: 0; height: 9%; border-radius: 99px 99px calc(var(--u) * .3) calc(var(--u) * .3); background: #64748b; }
.fo3 .lp-stem { left: 46%; width: 8%; bottom: 8%; height: 50%; background: #94a3b8; }
.fo3 .lp-shade { left: 0; right: 0; top: 0; height: 44%; background: #e2e8f0; clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%); transition: background .3s; }
.fo3 .lp-bulb { left: 36%; right: 36%; top: 42%; height: 11%; border-radius: 0 0 99px 99px; background: #cbd5e1; transition: .3s; }
.fo3 .f3-k-lamp[data-s="on"] .lp-shade { background: #fde047; }
.fo3 .f3-k-lamp[data-s="on"] .lp-bulb { background: #fffbe6; box-shadow: 0 0 calc(var(--u) * 2.4) calc(var(--u) * .6) #fde047; }
.fo3 .f3-glow { position: absolute; z-index: 8001; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 140, .6), rgba(255, 220, 100, .22) 40%, transparent 68%); opacity: 0; transition: opacity .5s; mix-blend-mode: screen; }
.fo3[data-lamp="on"] .f3-glow { opacity: 1; }
.fo3 .f3-dim { position: absolute; inset: 0; z-index: 8000; pointer-events: none; background: rgba(20, 24, 70, .42); opacity: 0; transition: opacity .6s; }
.fo3[data-dark] .f3-dim { opacity: 1; }
/* 杯裏有牛奶 */
.fo3 .f3o.full::after { content: ''; position: absolute; left: 20%; right: 32%; top: 22%; height: 18%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #e5e7eb; }
/* 東西的反應 */
.fo3 .f3o.hint { animation: f3Hint 1s ease-in-out 3; }
.fo3 .f3o.shake { animation: f3Shake .45s; }
.fo3 .f3o.hop > img { animation: f3Hop .45s ease-out 2; }
.fo3 .f3o.wag > img { animation: f3Wag .25s ease-in-out 4; transform-origin: 50% 100%; }
.fo3 .f3o.sway > img { animation: f3Wag .4s ease-in-out 3; transform-origin: 50% 100%; }
.fo3 .f3o.look { animation: f3Look .9s ease-in-out; }
.fo3 .f3o.squash { animation: f3Squash .4s; transform-origin: 50% 100%; }
.fo3 .f3o.roll > img { animation: f3Roll .35s linear infinite; object-position: 50% 50%; }
.fo3 .f3o.ride > img { animation: f3Ride .3s ease-in-out 3; }
.fo3 .f3o.glow { filter: drop-shadow(0 0 calc(var(--u) * 2) #fde047); }
.fo3 .shine::after { content: ''; position: absolute; inset: -12%; pointer-events: none; background: radial-gradient(circle at 20% 30%, #fff 0 4%, transparent 5%), radial-gradient(circle at 72% 22%, #fff 0 3%, transparent 4%), radial-gradient(circle at 55% 72%, #fff 0 5%, transparent 6%), radial-gradient(circle at 85% 60%, #fff 0 3%, transparent 4%); filter: drop-shadow(0 0 4px #fde047); animation: f3Shine 1s ease-out forwards; }
/* 楚楚 */
.fo3 .f3-cc { position: absolute; width: calc(var(--u) * 18); height: calc(var(--u) * 18); pointer-events: none; --fx: 1; transition: left var(--mt, 0s) ease-in-out, top var(--mt, 0s) ease-in-out, transform .45s, opacity .45s; }
.fo3 .f3-body { position: absolute; inset: 0; }
.fo3 .f3-pose { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform: scaleX(var(--fx)); filter: drop-shadow(0 calc(var(--u) * .4) calc(var(--u) * .4) rgba(0, 0, 0, .25)); }
.fo3 .f3-cc.walking .f3-body { animation: f3Walk .32s ease-in-out infinite; }
.fo3 .f3-cc.flying .f3-body { animation: f3Fly .4s ease-in-out infinite; }
.fo3 .f3-cc.rub .f3-body { animation: f3Rub .18s ease-in-out infinite; }
.fo3 .f3-cc.nope .f3-body { animation: f3No .5s; }
.fo3 .f3-cc.cheer .f3-body { animation: f3Cheer .6s ease-in-out 3; }
.fo3 .f3-cc.enter { transform: scale(.2); opacity: 0; }
.fo3 .f3-head { position: absolute; left: 28%; right: 28%; top: 0; height: 26%; } .fo3 .f3-head img, .fo3 .f3-feet img { width: 100%; height: 100%; object-fit: contain; }
.fo3 .f3-feet { position: absolute; left: 24%; right: 24%; bottom: -3%; height: 17%; }
.fo3 .f3-hold { position: absolute; left: 50%; bottom: 84%; transform: translateX(-50%); display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--u) * .2); min-height: calc(var(--u) * 2); min-width: calc(var(--u) * 6); }
.fo3 .f3-hold img { width: calc(var(--u) * 7); height: calc(var(--u) * 7); object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2)); transition: clip-path .3s, transform .5s; clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%); }
.fo3 .f3-hold img.b1 { clip-path: polygon(0 0, 50% 0, 85% 10%, 62% 50%, 85% 90%, 50% 100%, 0 100%, 0 50%); }
.fo3 .f3-hold img.b2 { clip-path: polygon(15% 10%, 50% 0, 85% 10%, 62% 50%, 85% 90%, 50% 100%, 15% 90%, 38% 50%); }
.fo3 .f3-hold img.core, .fo3 .f3-fly img.core { clip-path: polygon(38% 5%, 50% 0, 62% 5%, 56% 50%, 62% 95%, 50% 100%, 38% 95%, 44% 50%); }
.fo3 .f3-hold img.up { width: calc(var(--u) * 9); height: calc(var(--u) * 12); animation: f3Float 1.6s ease-in-out infinite; }
.fo3 .f3-hold img.drink { transform: rotate(-110deg) translate(-20%, -30%); }
.fo3 .f3-hold .hide { display: none; }
.fo3 .f3-tis { display: block; width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 30% 50% 35% 45%; background: #fff; box-shadow: 0 0 0 calc(var(--u) * .25) #e2e8f0; }
.fo3 .f3-say { position: absolute; left: 78%; bottom: 72%; z-index: 2; padding: .3em .8em; border-radius: 99px 99px 99px 4px; background: #fff; color: #4c1d95; font: 900 max(12px, calc(var(--u) * 2.3)) "Nunito", sans-serif; white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, .22); transform: scale(0); transform-origin: 0 100%; transition: transform .25s; }
.fo3 .f3-say.show { transform: scale(1); }
.fo3 .f3-fly { position: absolute; z-index: 9500; display: grid; place-items: center; transform: translate(-50%, -50%); transition-property: left, top, width, height, opacity, transform; transition-timing-function: ease-in-out; pointer-events: none; }
.fo3 .f3-fly img { width: 100%; height: 100%; object-fit: contain; }
.fo3 .f3-fly.tilt { transform: translate(-50%, -50%) rotate(-115deg); }
.fo3 .f3-stream { position: absolute; z-index: 9400; width: calc(var(--u) * .8); border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px #e2e8f0; }
/* 步驟、完成 */
.fo3 .f3-steps { position: absolute; left: 50%; bottom: max(8px, calc(var(--u) * 1.2)); transform: translateX(-50%); z-index: 9000; display: flex; gap: 6px; padding: 5px 8px; border-radius: 99px; background: rgba(255, 255, 255, .88); box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.fo3 .f3-steps i { display: grid; place-items: center; width: max(22px, calc(var(--u) * 3.4)); aspect-ratio: 1; border-radius: 50%; background: #ede9fe; color: #7c3aed; font: 900 max(12px, calc(var(--u) * 1.9)) "Nunito", sans-serif; font-style: normal; transition: .3s; }
.fo3 .f3-steps i.on { background: #22c55e; color: #fff; transform: scale(1.12); }
.fo3 .f3-win { position: absolute; inset: 0; z-index: 9800; display: grid; place-items: center; background: rgba(30, 10, 60, .25); animation: f3In .4s; }
.fo3 .f3-win-card { max-width: min(560px, 86vw); padding: 18px 26px; border-radius: 26px; background: #fff; text-align: center; font-family: "Nunito", sans-serif; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
.fo3 .f3-win-stars { display: flex; justify-content: center; gap: 6px; }
.fo3 .f3-win-stars i { width: 44px; height: 44px; color: #fbbf24; animation: f3Pop .5s calc(var(--k) * .15s) both; } .fo3 .f3-win-stars svg { width: 100%; height: 100%; fill: currentColor; }
.fo3 .f3-win-card b { display: block; margin: 6px 0; color: #6d28d9; font-size: 26px; }
.fo3 .f3-win-card p { margin: 0 0 10px; color: #475569; font-size: 17px; font-weight: 700; }
.fo3 .f3-win-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fo3 .f3-win-steps span { padding: 3px 10px 3px 4px; border-radius: 99px; background: #f3e8ff; color: #6d28d9; font-size: 14px; font-weight: 800; }
.fo3 .f3-win-steps span i { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 5px; border-radius: 50%; background: #7c3aed; color: #fff; font-size: 12px; font-style: normal; }
@media (max-height: 520px) {
  .fo3 .f3-win-card { padding: 10px 16px; } .fo3 .f3-win-card b { font-size: 19px; } .fo3 .f3-win-card p { font-size: 13px; } .fo3 .f3-win-stars i { width: 30px; height: 30px; }
}
@keyframes f3Walk { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(calc(var(--u) * -1.2)) rotate(3deg); } }
@keyframes f3Fly { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -1.5)); } }
@keyframes f3Rub { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(calc(var(--u) * 1)) rotate(4deg); } }
@keyframes f3No { 20%, 60% { transform: rotate(-8deg); } 40%, 80% { transform: rotate(8deg); } }
@keyframes f3Cheer { 50% { transform: translateY(calc(var(--u) * -3)) scale(1.06); } }
@keyframes f3Shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes f3Hop { 50% { transform: translateY(-30%); } }
@keyframes f3Wag { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes f3Look { 50% { transform: scale(1.1); filter: drop-shadow(0 0 calc(var(--u) * 1.5) #fde047); } }
@keyframes f3Squash { 40% { transform: scale(1.1, .9); } }
@keyframes f3Roll { to { transform: rotate(360deg); } }
@keyframes f3Ride { 50% { transform: translateY(calc(var(--u) * -.6)); } }
@keyframes f3Float { 0%, 100% { transform: translateY(calc(var(--u) * -5)) rotate(-8deg); } 50% { transform: translateY(calc(var(--u) * -7)) rotate(6deg); } }
@keyframes f3Bub { 0% { opacity: 0; transform: translateY(0); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-60%); } }
@keyframes f3Shine { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.3); } }
@keyframes f3Bird { to { left: 110%; top: 24%; } }
@keyframes f3Hint { 50% { filter: drop-shadow(0 0 calc(var(--u) * 1.5) #fde047) brightness(1.15); } }
@keyframes f3In { from { opacity: 0; } }
@keyframes f3Pop { from { transform: scale(0); } 70% { transform: scale(1.25); } }

.fo3 .f3-hold [data-h].tap { pointer-events: auto; cursor: pointer; }

/* fo3 全畫面：工具列、指令框的空位可以點到下面的東西；手機打橫時指令框闊一點、矮一點 */
.game.fo-full:has(.fo3) > .bar, .game.fo-full:has(.fo3) > .prompt { pointer-events: none; }
.game.fo-full:has(.fo3) > .bar > *, .game.fo-full:has(.fo3) > .prompt > * { pointer-events: auto; }
@media (orientation: landscape) and (max-height: 520px) {
  .screen.game.fo-full:has(.fo3) > .prompt { grid-column: 1 / -1; }
  .game.fo-full:has(.fo3) > .prompt .bubble { max-width: min(520px, 58vw) !important; font-size: clamp(14px, 3.9vh, 19px) !important; padding-right: 34px !important; }
}

.fo3 .f3o * { pointer-events: none; }

/* 常識小百科（新版）：全畫面 */
.game .play:has(.kn2) { zoom: 1 !important; }
.game.fo-full:has(.kn2) > .bar, .game.fo-full:has(.kn2) > .prompt { pointer-events: none; }
.game.fo-full:has(.kn2) > .bar > *, .game.fo-full:has(.kn2) > .prompt > * { pointer-events: auto; }
@media (orientation: landscape) and (max-height: 520px) {
  .screen.game.fo-full:has(.kn2) > .prompt { grid-column: 1 / -1; }
  .game.fo-full:has(.kn2) > .prompt .bubble { max-width: min(560px, 62vw) !important; font-size: clamp(14px, 3.9vh, 19px) !important; padding-right: 34px !important; }
}
.follow.real.kn2 { background: #e0f2fe; user-select: none; -webkit-user-select: none; touch-action: manipulation; font-family: "Nunito", sans-serif; }
.kn2 .kn-bg { position: absolute; inset: 0; background-size: cover; background-position: center bottom; }
.kn2 .kn-stage { position: absolute; display: flex; flex-direction: column; gap: 10px; }
.kn2 button { font-family: inherit; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.kn2 button * { pointer-events: none; }
/* 楚楚 */
.kn2 .kn-cc { position: absolute; left: 8px; bottom: 10px; z-index: 30; pointer-events: none; --fx: 1; }
.kn2 .kn-pose { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform: scaleX(var(--fx)); filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .25)); }
.kn2 .kn-cc.no .kn-pose { animation: knNo .5s; }
.kn2 .kn-cc.cheer .kn-pose { animation: knCheer .55s ease-in-out 3; }
.kn2 .kn-cc.walking .kn-pose { animation: knWalk .34s ease-in-out infinite; }
.kn2 .kn-say { position: absolute; left: 70%; bottom: 82%; width: max-content; max-width: min(360px, 46vw); padding: .4em .8em; border-radius: 16px 16px 16px 4px; background: #fff; color: #4c1d95; font: 800 clamp(12px, 2.1vh, 17px) "Nunito", sans-serif; line-height: 1.25; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); transform: scale(0); transform-origin: 0 100%; transition: transform .25s; }
.kn2 .kn-say.show { transform: scale(1); }
.kn2 .shake { animation: knShake .45s; }
.kn2 .kn-count { align-self: center; padding: 4px 16px; border-radius: 99px; background: rgba(255, 255, 255, .92); color: #7c3aed; font-weight: 900; font-size: clamp(14px, 2.4vh, 20px); box-shadow: 0 3px 10px rgba(0, 0, 0, .15); }
/* 垃圾分類 */
.kn2 .kn-belt { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 4%; }
.kn2 .kn-belt::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: 4%; height: 12%; max-height: 26px; border-radius: 99px; background: repeating-linear-gradient(90deg, #475569 0 14px, #64748b 14px 28px); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); }
.kn2 .kn-now { position: relative; z-index: 1; height: 86%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 22px; background: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); padding: 4%; }
.kn2 .kn-now img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.kn2 .kn-now span { font-weight: 900; color: #334155; font-size: clamp(12px, 2.3vh, 19px); text-align: center; }
.kn2 .kn-now.in { animation: knIn .4s ease-out; }
.kn2 .kn-queue { position: relative; z-index: 1; display: flex; gap: 6px; align-items: flex-end; height: 40%; opacity: .85; }
.kn2 .kn-queue img { height: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .2)); }
.kn2 .kn-bins { flex: 1.25 1 0; min-height: 0; display: flex; gap: 3%; justify-content: center; align-items: flex-end; }
.kn2 .kn-bin { position: relative; flex: 0 1 22%; height: 100%; max-width: 220px; padding: 0; border: 0; background: none; }
.kn2 .kn-bin-body { position: absolute; left: 6%; right: 6%; top: 16%; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; border-radius: 10px 10px 22px 22px; background: linear-gradient(90deg, rgba(255, 255, 255, .14) 0 12%, transparent 12% 88%, rgba(0, 0, 0, .08) 88%), var(--bc); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .15), 0 6px 14px rgba(0, 0, 0, .2); }
.kn2 .kn-bin-body img { width: 50%; height: 44%; object-fit: contain; background: rgba(255, 255, 255, .9); border-radius: 14px; padding: 4%; }
.kn2 .kn-bin-body b { color: #fff; font-weight: 900; font-size: clamp(13px, 2.6vh, 22px); text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.kn2 .kn-lid { position: absolute; left: 0; right: 0; top: 2%; height: 16%; border-radius: 14px 14px 6px 6px; background: var(--bc); filter: brightness(.85); transform-origin: 4% 100%; transition: transform .25s; }
.kn2 .kn-bin.open .kn-lid { transform: translateY(-40%) rotate(-28deg); }
.kn2 .kn-rec { width: 46%; height: 42%; border-radius: 50%; background: #fff; -webkit-mask: conic-gradient(#000 0 100deg, transparent 100deg 120deg, #000 120deg 220deg, transparent 220deg 240deg, #000 240deg 340deg, transparent 340deg) , radial-gradient(circle, transparent 38%, #000 40%); -webkit-mask-composite: source-in; mask: conic-gradient(#000 0 100deg, transparent 100deg 120deg, #000 120deg 220deg, transparent 220deg 240deg, #000 240deg 340deg, transparent 340deg) intersect, radial-gradient(circle, transparent 38%, #000 40%); }
.kn2 .kn-fly { position: fixed; z-index: 60; transform: translate(-50%, -50%); object-fit: contain; transition: left .5s ease-in, top .5s cubic-bezier(.5, -0.6, .7, 1), transform .5s, opacity .5s; pointer-events: none; }
/* 找回收、執書包 */
.kn2 .kn-field { position: relative; flex: 1; min-height: 0; }
.kn2 .kn-it { position: absolute; padding: 0; border: 0; background: none; transition: transform .2s, opacity .4s; }
.kn2 .kn-field .kn-it { left: calc((var(--c) + .5) / var(--cols) * 100% - min(14vh, 100% / var(--cols) * .8) / 2); top: calc(var(--r) * 50% + 8%); width: min(14vh, 100% / var(--cols) * .8); aspect-ratio: 1; }
.kn2 .kn-m-pack .kn-field .kn-it, .kn2.kn-pack .kn-field .kn-it { left: calc((var(--c) + .5) / var(--cols) * 74% + 26% - min(13vh, 74% / var(--cols) * .8) / 2); width: min(13vh, 74% / var(--cols) * .8); }
.kn2 .kn-it img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .22)); }
.kn2 .kn-field .kn-it::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -4%; height: 10%; border-radius: 50%; background: rgba(0, 0, 0, .12); z-index: -1; }
.kn2 .kn-it.got { pointer-events: none; }
.kn2 .kn-pick .kn-it.got img, .kn2.kn-pick .kn-it.got img { filter: drop-shadow(0 0 10px #22c55e) drop-shadow(0 0 4px #22c55e); }
.kn2.kn-pick .kn-it.got::before { content: ''; position: absolute; right: -6%; top: -6%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 70% no-repeat; z-index: 2; }
.kn2 .kn-it.into { transform: translate(var(--tx), var(--ty)) scale(.2); opacity: 0; transition: transform .6s ease-in, opacity .6s ease-in; }
.kn2 .kn-bag { position: absolute; left: 0; top: 10%; width: 24%; height: 80%; }
.kn2 .kn-bag img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); }
/* 危險物品 */
.kn2 .kn-room { position: absolute; inset: 0; pointer-events: none; }
.kn2 .kn-room > i { position: absolute; display: block; }
.kn2 .kn-table::before { content: ''; position: absolute; left: -2%; right: -2%; top: 0; height: 14%; min-height: 10px; border-radius: 8px; background: #e9a35b; box-shadow: inset 0 -5px 0 #c47f3a; }
.kn2 .kn-table > i, .kn2 .kn-table::after { content: ''; position: absolute; top: 10%; bottom: 0; width: 5%; background: #b7793a; }
.kn2 .kn-table > i { left: 6%; display: block; } .kn2 .kn-table::after { right: 6%; }
.kn2 .kn-cab { border-radius: 8px 8px 4px 4px; background: #f1c27d; box-shadow: inset 0 0 0 4px #d39a55; }
.kn2 .kn-cab::before { content: ''; position: absolute; left: -3%; right: -3%; top: -5px; height: 10px; border-radius: 5px; background: #c98a4b; }
.kn2 .kn-cab > i { position: absolute; left: 50%; top: 10%; bottom: 10%; width: 4px; margin-left: -2px; background: #d39a55; display: block; }
.kn2 .kn-cab > i::before, .kn2 .kn-cab > i::after { content: ''; position: absolute; top: 40%; width: 8px; height: 18%; border-radius: 99px; background: #8b5a2b; }
.kn2 .kn-cab > i::before { right: 10px; } .kn2 .kn-cab > i::after { left: 10px; }
.kn2 .kn-room .kn-d { pointer-events: auto; z-index: 5; }
.kn2 .kn-room .kn-d img { object-position: 50% 100%; }
.kn2 .kn-d.got img { filter: drop-shadow(0 0 0 #ef4444) drop-shadow(0 0 8px #ef4444); }
.kn2 .kn-d.got::before { content: ''; position: absolute; inset: -14%; border: 4px solid #ef4444; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); animation: knIn .35s; }
.kn2 .kn-d.got::after { content: ''; position: absolute; left: 50%; top: 50%; width: 128%; height: 4px; margin-left: -64%; background: #ef4444; transform: rotate(-45deg); border-radius: 4px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
.kn2 .kn-tag { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -14%); padding: .1em .55em; border-radius: 99px; background: #ef4444; color: #fff; font-weight: 900; font-size: clamp(11px, 1.9vh, 16px); white-space: nowrap; display: none; }
.kn2 .kn-d.got .kn-tag { display: block; }
.kn2 .kn-d.safe img { filter: drop-shadow(0 0 8px #22c55e); }
.kn2 .kn-count-d { position: absolute; z-index: 40; left: 50%; bottom: 10px; transform: translateX(-50%); }
/* 過馬路 */
.kn2 .kn-street { position: absolute; inset: 0; pointer-events: none; }
.kn2 .kn-car { position: absolute; z-index: 6; height: auto; object-fit: contain; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .25)); }
.kn2 .kn-car.l1 { z-index: 8; }
.kn2 .kn-light { position: absolute; z-index: 5; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .3)); }
.kn2 .kn-light g { fill: #374151; transition: fill .2s; }
.kn2 .kn-light:not(.go) .lr { fill: #ef4444; filter: drop-shadow(0 0 2px #ef4444); }
.kn2 .kn-light.go .lg { fill: #22c55e; filter: drop-shadow(0 0 2px #22c55e); }
.kn2 .kn-walkers { position: absolute; z-index: 9; width: calc(var(--ch) * .8); height: var(--ch); transform: translateY(-100%); }
.kn2 .kn-mum { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25)); }
.kn2 .kn-walkers.walking .kn-mum { animation: knWalk .4s ease-in-out infinite; }
.kn2.kn-road .kn-cc { z-index: 10; }
.kn2 .kn-ctrl { position: absolute; z-index: 40; right: var(--cr, 100px); bottom: 10px; display: flex; gap: 10px; pointer-events: auto; }
.kn2 .kn-btn { display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border: 0; border-radius: 99px; background: #fff; color: #4c1d95; font-weight: 900; font-size: clamp(13px, 2.4vh, 20px); box-shadow: 0 4px 0 #c4b5fd, 0 6px 14px rgba(0, 0, 0, .2); }
.kn2 .kn-btn[data-k="walk"] { background: #22c55e; color: #fff; box-shadow: 0 4px 0 #15803d, 0 6px 14px rgba(0, 0, 0, .2); }
.kn2 .kn-btn.done:not([data-k="walk"]) { background: #ede9fe; }
.kn2 .kn-btn.done:not([data-k="walk"])::after { content: '✓'; color: #16a34a; font-weight: 900; }
.kn2 .kn-btn.tap { animation: knPop .3s; }
.kn2 .kn-btn i { display: block; width: 1.5em; height: 1.5em; border-radius: 50%; background: currentColor; -webkit-mask: var(--m) center / 80% no-repeat; mask: var(--m) center / 80% no-repeat; }
.kn2 .kn-btn i.l { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.kn2 .kn-btn i.r { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
.kn2 .kn-btn i.hh { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 6-8 11-8 11z'/%3E%3C/svg%3E"); }
.kn2 .kn-btn i.wk { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Ccircle cx='10' cy='4' r='3.6'/%3E%3Cpath d='M6 9h8l2 10h-3l-1 10h-4l-1-10H4z'/%3E%3C/svg%3E"); }
/* 自理步驟 */
.kn2 .kn-slots { flex: 1 1 0; min-height: 0; display: flex; gap: 2%; justify-content: center; align-items: center; }
.kn2 .kn-slot { position: relative; height: 92%; max-width: 18%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 18px; border: 3px dashed rgba(124, 58, 237, .5); background: rgba(255, 255, 255, .55); }
.kn2 .kn-slot b { position: absolute; left: 6%; top: 4%; width: 26%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #ede9fe; color: #7c3aed; font-weight: 900; font-size: clamp(11px, 2vh, 17px); font-style: normal; }
.kn2 .kn-slot.on { border: 3px solid #22c55e; background: #fff; animation: knIn .35s; }
.kn2 .kn-slot.on b { background: #22c55e; color: #fff; }
.kn2 .kn-slot img { width: 82%; height: 82%; object-fit: contain; }
.kn2 .kn-cards { flex: 1.6 1 0; min-height: 0; display: flex; gap: 2%; justify-content: center; align-items: stretch; }
.kn2 .kn-card { flex: 0 1 19%; max-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 3% 2%; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 5px 0 #ddd6fe, 0 8px 16px rgba(0, 0, 0, .15); transition: transform .4s ease-in, opacity .4s; }
.kn2 .kn-card img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.kn2 .kn-card span { color: #334155; font-weight: 900; font-size: clamp(11px, 2.1vh, 17px); line-height: 1.15; text-align: center; }
.kn2 .kn-card.used { transform: translate(var(--tx), var(--ty)) scale(.4); opacity: 0; pointer-events: none; }
/* 生活小故事 */
.kn2 .kn-deed { flex: 1; min-height: 0; display: flex; gap: 2.5%; align-items: center; }
.kn2 .kn-scene { flex: 0 1 auto; height: 100%; max-width: 60%; aspect-ratio: 1264 / 848; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 5px #fff, 0 10px 24px rgba(0, 0, 0, .22); background: #fff; }
.kn2 .kn-scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kn2 .kn-scene.happy { box-shadow: 0 0 0 5px #22c55e, 0 0 30px #86efac; }
.kn2 .kn-opts { flex: 1; display: flex; flex-direction: column; gap: 4%; justify-content: center; height: 100%; }
.kn2 .kn-opt { padding: .7em 1em; border: 0; border-radius: 18px; background: #fff; color: #3b0764; font-weight: 900; font-size: clamp(13px, 2.6vh, 22px); line-height: 1.2; text-align: left; box-shadow: 0 5px 0 #ddd6fe, 0 8px 16px rgba(0, 0, 0, .14); }
.kn2 .kn-opt.ok, .kn2 .kn-qc.ok { background: #dcfce7; box-shadow: 0 5px 0 #22c55e, 0 0 20px #86efac; }
.kn2 .kn-opt.bad, .kn2 .kn-qc.bad { opacity: .45; }
/* 常識題 */
.kn2 .kn-quiz { flex: 1; min-height: 0; display: flex; gap: 3%; justify-content: center; align-items: center; }
.kn2 .kn-qc { flex: 0 1 28%; height: min(88%, 380px); max-width: 280px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 3%; border: 0; border-radius: 24px; background: #fff; box-shadow: 0 6px 0 #ddd6fe, 0 10px 20px rgba(0, 0, 0, .15); }
.kn2 .kn-qc img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.kn2 .kn-qc span { color: #334155; font-weight: 900; font-size: clamp(13px, 2.6vh, 22px); }
@keyframes knNo { 20%, 60% { transform: scaleX(var(--fx)) rotate(-8deg); } 40%, 80% { transform: scaleX(var(--fx)) rotate(8deg); } }
@keyframes knCheer { 50% { transform: scaleX(var(--fx)) translateY(-14%); } }
@keyframes knWalk { 0%, 100% { transform: scaleX(var(--fx)) translateY(0) rotate(-3deg); } 50% { transform: scaleX(var(--fx)) translateY(-6%) rotate(3deg); } }
@keyframes knShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes knIn { from { transform: scale(.6); opacity: 0; } }
@keyframes knPop { 50% { transform: scale(.92); } }

.kn2 .kn-btn .kn-ico { width: 1.5em; height: 1.5em; flex: none; }

/* 常識小百科：每個答案的「聽一聽」按鈕 */
.kn2 button .kn-ear, .kn2 .kn-now .kn-ear { pointer-events: auto; }
.kn2 .kn-ear { position: absolute; z-index: 3; right: 6px; top: 6px; width: clamp(26px, 4.6vh, 40px); height: clamp(26px, 4.6vh, 40px); display: grid; place-items: center; border-radius: 50%; background: #7c3aed; color: #fff; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(0, 0, 0, .25); cursor: pointer; }
.kn2 .kn-ear svg { width: 58%; height: 58%; pointer-events: none; }
.kn2 .kn-ear.tap { animation: knPop .3s; }
.kn2 .kn-it .kn-ear, .kn2 .kn-d .kn-ear { right: -8%; top: -8%; width: clamp(22px, 3.8vh, 32px); height: clamp(22px, 3.8vh, 32px); }
.kn2 .kn-bin .kn-ear { top: 20%; right: 10%; }
.kn2 .kn-opt { position: relative; display: flex; align-items: center; gap: 10px; padding-right: 3.2em; }
.kn2 .kn-opt .kn-ear { top: 50%; right: 10px; transform: translateY(-50%); }
.kn2 .kn-opt .kn-ear.tap { animation: none; }
.kn2 .kn-qc, .kn2 .kn-card { position: relative; }
.kn2 .kn-it.into .kn-ear, .kn2 .kn-card.used .kn-ear { display: none; }

/* 主題世界（新版）：沿用常識小百科的版面，再加學一學、分類區、種花、植物部分、沉與浮 */
.kn2.tw .tw-learn { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.kn2 .tw-card { flex: 1; min-height: 0; display: flex; gap: 3%; align-items: stretch; padding: 2.5%; border-radius: 26px; background: rgba(255, 255, 255, .94); box-shadow: 0 10px 26px rgba(0, 0, 0, .16); animation: knIn .35s; }
.kn2 .tw-pic { flex: 0 1 42%; min-width: 0; padding: 2%; border: 0; border-radius: 20px; background: #f0f9ff; }
.kn2 .tw-pic img { width: 100%; height: 100%; object-fit: contain; }
.kn2 .tw-pic.sc { padding: 0; overflow: hidden; } .kn2 .tw-pic.sc img { object-fit: cover; }
.kn2 .tw-pic.tap { animation: knPop .3s; }
.kn2 .tw-text { position: relative; flex: 1; display: flex; align-items: center; padding-right: 48px; }
.kn2 .tw-text p { margin: 0; color: #3b0764; font-weight: 900; font-size: clamp(16px, 4vh, 34px); line-height: 1.3; }
.kn2 .tw-text .kn-ear { top: 0; right: 0; width: clamp(34px, 6vh, 50px); height: clamp(34px, 6vh, 50px); }
.kn2 .tw-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kn2 .tw-dots { display: flex; gap: 8px; padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .85); }
.kn2 .tw-dots i { width: 12px; height: 12px; border-radius: 50%; background: #ddd6fe; display: block; }
.kn2 .tw-dots i.on { background: #7c3aed; transform: scale(1.25); } .kn2 .tw-dots i.done { background: #22c55e; }
.kn2 .tw-next { display: flex; align-items: center; gap: 8px; padding: 10px 22px; border: 0; border-radius: 99px; background: #22c55e; color: #fff; font-weight: 900; font-size: clamp(15px, 3vh, 24px); box-shadow: 0 5px 0 #15803d, 0 8px 16px rgba(0, 0, 0, .2); }
.kn2 .tw-next b { font-size: 1.4em; line-height: .8; }
/* 分類區 */
.kn2 .tw-belt { flex: 1 1 0; }
.kn2 .tw-zones { flex: 1.3 1 0; min-height: 0; display: flex; gap: 2.5%; justify-content: center; align-items: stretch; }
.kn2 .tw-zone { position: relative; flex: 0 1 24%; max-width: 280px; overflow: hidden; padding: 0; border: 4px solid #fff; border-radius: 22px; background: #f8fafc; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); transition: transform .2s; }
.kn2 .tw-zbg { position: absolute; inset: 0; background-size: cover; background-position: center; display: block; }
.kn2 .tw-zic { position: absolute; left: 15%; right: 15%; top: 8%; height: 62%; width: 70%; object-fit: contain; }
.kn2 .tw-zone b { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 4px; background: rgba(255, 255, 255, .92); color: #3b0764; font-weight: 900; font-size: clamp(13px, 2.6vh, 21px); }
.kn2 .tw-zone .kn-ear { top: 6px; right: 6px; }
.kn2 .tw-zone.got { transform: scale(1.05); box-shadow: 0 0 0 4px #22c55e, 0 8px 18px rgba(0, 0, 0, .18); }
/* 題目圖、場景答案 */
.kn2 .kn-quiz.tw-hasstim { gap: 2.5%; }
.kn2 .tw-stim { flex: 0 1 28%; height: min(88%, 380px); display: grid; place-items: center; padding: 2%; border-radius: 24px; background: #fff; box-shadow: 0 0 0 5px #fde68a, 0 10px 20px rgba(0, 0, 0, .15); }
.kn2 .tw-stim img { width: 100%; height: 100%; object-fit: contain; }
.kn2 .tw-stim.sc { flex-basis: 34%; padding: 0; overflow: hidden; aspect-ratio: 1264 / 848; height: auto; max-height: 88%; }
.kn2 .tw-stim.sc img { object-fit: cover; }
.kn2 .kn-qc.sc { flex-basis: 24%; height: auto; max-height: 88%; padding: 0 0 8px; overflow: hidden; }
.kn2 .kn-qc.sc img { flex: none; width: 100%; aspect-ratio: 1264 / 848; height: auto; object-fit: cover; }
.kn2 .kn-qc.sc span { padding: 0 6px; font-size: clamp(11px, 2.2vh, 18px); line-height: 1.2; text-align: center; }
/* 生命週期的箭頭 */
.kn2 .tw-arrow { flex: none; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 14px solid rgba(124, 58, 237, .6); display: block; }
/* 種花 */
.kn2 .tw-garden { flex: 1; min-height: 0; display: flex; gap: 3%; align-items: stretch; }
.kn2 .tw-pot { flex: none; height: 100%; aspect-ratio: 220 / 320; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .18)); }
.kn2 .tw-plant { width: 100%; height: 100%; overflow: visible; }
.kn2 .tw-tools { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3%; align-content: center; }
.kn2 .tw-tools .kn-card { max-width: none; aspect-ratio: .9; }
.kn2 .tw-plant .tw-hole, .kn2 .tw-plant .tw-seed, .kn2 .tw-plant .tw-mound, .kn2 .tw-plant .tw-rain, .kn2 .tw-plant .tw-sunny, .kn2 .tw-plant .tw-roots, .kn2 .tw-plant .tw-stem, .kn2 .tw-plant .tw-leaves, .kn2 .tw-plant .tw-flower { opacity: 0; transition: opacity .5s, transform 1s cubic-bezier(.3, 1.3, .5, 1); transform-box: fill-box; transform-origin: 50% 100%; }
.kn2 .tw-plant .tw-stem { transform: scaleY(0); }
.kn2 .tw-plant .tw-leaves { transform: scale(0); transform-origin: 50% 80%; }
.kn2 .tw-plant .tw-flower { transform: scale(0); transform-origin: 50% 50%; }
.kn2 .tw-plant.s-dig .tw-hole { opacity: 1; }
.kn2 .tw-plant.s-seed .tw-seed { opacity: 1; animation: twDrop .6s ease-in; }
.kn2 .tw-plant.s-soil .tw-mound { opacity: 1; }
.kn2 .tw-plant.s-soil .tw-hole, .kn2 .tw-plant.s-soil .tw-seed { opacity: 0; }
.kn2 .tw-plant.s-water .tw-rain { animation: twRain 1.1s ease-in 1; }
.kn2 .tw-plant.s-sun .tw-sunny { opacity: 1; transform-origin: 50% 50%; animation: twSpin 6s linear infinite; }
.kn2 .tw-plant.s-grow1 .tw-mound { opacity: 0; }
.kn2 .tw-plant.s-grow1 .tw-roots, .kn2 .tw-plant.s-grow1 .tw-stem { opacity: 1; }
.kn2 .tw-plant.s-grow1 .tw-stem { transform: scaleY(.3); }
.kn2 .tw-plant.s-grow2 .tw-stem { transform: scaleY(1); }
.kn2 .tw-plant.s-grow2 .tw-leaves { opacity: 1; transform: none; }
.kn2 .tw-plant.s-grow3 .tw-flower { opacity: 1; transform: none; }
.kn2 .tw-partsbox .tw-pot.big { flex: 0 1 auto; }
.kn2 .tw-partsbox .tw-part { cursor: pointer; }
.kn2 .tw-part.found { filter: drop-shadow(0 0 4px #fde047) drop-shadow(0 0 8px #facc15); }
.kn2 .tw-part.shake { animation: knShake .45s; }
.kn2 .tw-ask { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.kn2 .tw-askt { position: relative; padding: 18px 64px 18px 22px; border-radius: 22px; background: #fff; color: #3b0764; font-weight: 900; font-size: clamp(18px, 4.4vh, 36px); box-shadow: 0 8px 18px rgba(0, 0, 0, .15); }
.kn2 .tw-askt .kn-ear { top: 50%; right: 14px; transform: translateY(-50%); width: clamp(34px, 6vh, 48px); height: clamp(34px, 6vh, 48px); }
.kn2 .tw-askn { align-self: flex-start; padding: 4px 14px; border-radius: 99px; background: rgba(255, 255, 255, .9); color: #7c3aed; font-weight: 900; }
/* 沉與浮 */
.kn2 .tw-float { flex: 1; min-height: 0; display: flex; gap: 3%; align-items: stretch; }
.kn2 .tw-hold { flex: 0 1 30%; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; }
.kn2 .tw-hold .kn-now { height: auto; width: 100%; max-width: 230px; aspect-ratio: 1; }
.kn2 .tw-guess { display: flex; gap: 10px; width: 100%; max-width: 300px; }
.kn2 .tw-g { position: relative; flex: 1; padding: 12px 36px 12px 12px; border: 0; border-radius: 18px; color: #fff; font-weight: 900; font-size: clamp(15px, 3vh, 24px); box-shadow: 0 5px 0 rgba(0, 0, 0, .2), 0 8px 14px rgba(0, 0, 0, .15); }
.kn2 .tw-g[data-g="1"] { background: #0ea5e9; } .kn2 .tw-g[data-g="0"] { background: #7c3aed; }
.kn2 .tw-g .kn-ear { top: 50%; right: 6px; transform: translateY(-50%); background: rgba(255, 255, 255, .25); }
.kn2 .tw-g.tap { animation: knPop .3s; }
.kn2 .tw-tank { position: relative; flex: 1; overflow: hidden; border: 6px solid rgba(255, 255, 255, .95); border-top-width: 0; border-radius: 0 0 26px 26px; background: rgba(255, 255, 255, .35); box-shadow: inset 0 0 0 2px rgba(14, 165, 233, .3), 0 10px 22px rgba(0, 0, 0, .15); }
.kn2 .tw-water { position: absolute; left: 0; right: 0; bottom: 0; top: 40%; background: linear-gradient(rgba(125, 211, 252, .75), rgba(14, 165, 233, .85)); display: block; }
.kn2 .tw-water::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 12px; background: radial-gradient(circle at 10px 12px, transparent 9px, rgba(125, 211, 252, .75) 10px) 0 0 / 20px 12px repeat-x; }
.kn2 .tw-tank.splash .tw-water { animation: twSplash .5s; }
.kn2 .tw-inwater { position: absolute; inset: 0; }
.kn2 .tw-obj { position: absolute; top: -20%; width: 15%; aspect-ratio: 1; object-fit: contain; transition: top 1.1s cubic-bezier(.4, 0, .6, 1.2); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .2)); }
.kn2 .tw-obj.fl { top: calc(40% - 11%); animation: twBob 2s ease-in-out 1.2s infinite; }
.kn2 .tw-obj.sk { top: 82%; transition-timing-function: cubic-bezier(.5, 0, .7, .6); }
@keyframes twDrop { from { transform: translateY(-60px); } }
@keyframes twRain { 0% { opacity: 0; transform: translateY(-20px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(60px); } }
@keyframes twSpin { to { transform: rotate(360deg); } }
@keyframes twSplash { 30% { transform: translateY(-6px); } 60% { transform: translateY(3px); } }
@keyframes twBob { 50% { transform: translateY(-6%) rotate(-4deg); } }
@media (orientation: landscape) and (max-height: 520px) {
  .kn2 .tw-text p { font-size: clamp(14px, 4.4vh, 22px); }
  .kn2 .tw-next { padding: 6px 16px; }
  .kn2 .tw-tools { grid-template-columns: repeat(4, 1fr); gap: 2%; }
  .kn2 .tw-tools .kn-card span { font-size: 11px; }
  .kn2 .tw-askt { padding: 10px 52px 10px 14px; }
}
/* 主題世界：種花工具卡大一點；沉浮按鈕 */
.kn2 .tw-garden .tw-pot { max-width: 34%; }
.kn2 .tw-tools { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-auto-rows: minmax(0, 1fr); align-content: stretch; gap: 12px !important; }
.kn2 .tw-tools .kn-card { aspect-ratio: auto; max-width: none; width: 100%; min-height: 0; padding: 8% 4% 6%; }
.kn2 .tw-tools .kn-card span { font-size: clamp(11px, 2.2vh, 18px) !important; }
.kn2 .tw-tools .kn-ear, .kn2 .kn-cards .kn-ear { width: clamp(22px, 3.6vh, 32px); height: clamp(22px, 3.6vh, 32px); top: 4px; right: 4px; }
.kn2 .tw-g { padding-right: 46px; }
.kn2 .tw-g .kn-ear { width: 30px; height: 30px; }
.kn2 .tw-stim { position: relative; display: flex; flex-direction: column; gap: 6px; }
.kn2 .tw-stim img { flex: 1; min-height: 0; }
.kn2 .tw-stim b { color: #334155; font-weight: 900; font-size: clamp(13px, 2.6vh, 22px); text-align: center; }
.kn2.tw .kn-field .kn-it { width: min(20vh, 100% / var(--cols) * .8); left: calc((var(--c) + .5) / var(--cols) * 100% - min(20vh, 100% / var(--cols) * .8) / 2); }

/* 形狀王國 */
.kn2 .sh-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .18)); }
.kn2 .sh-ic { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; padding: 8%; box-sizing: border-box; }
.kn2 .sh-ic .sh-svg { max-width: 100%; max-height: 100%; }
.kn2 .sh-ic.out .sh-svg g { fill: rgba(255, 255, 255, .7); stroke: #7c3aed; stroke-dasharray: 8 6; }
/* 餵鱷魚 */
.kn2 .sh-field { position: absolute; left: 0; top: 0; bottom: 0; right: 27%; }
.kn2 .sh-it { position: absolute; width: calc(var(--s, 90px) * var(--w)); height: calc(var(--s, 90px) * var(--h)); transform: translate(-50%, -50%); padding: 0; border: 0; background: none; animation: shBob 3s ease-in-out var(--d) infinite; transition: transform .5s ease-in, opacity .5s; }
.kn2 .sh-it > i { display: block; width: 100%; height: 100%; }
.kn2 .sh-it .kn-ear { right: -14%; top: -14%; width: 26px; height: 26px; }
.kn2 .sh-it.eat { animation: none; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.15); opacity: 0; pointer-events: none; }
.kn2 .sh-croc { position: absolute; right: 0; bottom: 0; width: 26%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.kn2 .sh-croc img { width: 100%; max-height: 60%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); transform-origin: 50% 100%; }
.kn2 .sh-croc img.chomp { animation: shChomp .38s; }
.kn2 .sh-croc img.yuck { animation: knShake .45s; }
.kn2 .sh-want { position: relative; order: -1; display: flex; flex-direction: column; align-items: center; width: 80%; max-width: 170px; aspect-ratio: .9; padding: 6px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 4px #fde68a, 0 8px 18px rgba(0, 0, 0, .18); }
.kn2 .sh-want::after { content: ''; position: absolute; left: 50%; bottom: -12px; margin-left: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.kn2 .sh-want b { color: #3b0764; font-weight: 900; font-size: clamp(13px, 2.6vh, 20px); }
.kn2.sh-hunt .kn-count { position: absolute; left: 36%; bottom: 0; transform: translateX(-50%); z-index: 3; }
/* 砌圖畫 */
.kn2 .sh-build { flex: 1; min-height: 0; display: flex; gap: 3%; align-items: stretch; }
.kn2 .sh-board { flex: none; height: 100%; aspect-ratio: 1; max-width: 55%; padding: 2%; box-sizing: border-box; border-radius: 26px; background: rgba(255, 255, 255, .78); box-shadow: 0 10px 24px rgba(0, 0, 0, .14); overflow: hidden; }
.kn2 .sh-pic { width: 100%; height: 100%; overflow: visible; }
.kn2 .sh-part .sh-full { opacity: 0; transition: opacity .3s; }
.kn2 .sh-part.done .sh-full { opacity: 1; animation: shPop .45s; transform-box: fill-box; transform-origin: center; }
.kn2 .sh-part.done .sh-empty { opacity: 0; }
.kn2 .sh-part.now .sh-empty g, .kn2 .sh-part.now .sh-empty > * { fill: rgba(253, 224, 71, .55); stroke: #f59e0b; animation: shGlow 1s ease-in-out infinite; }
.kn2 .sh-pic.go.go-fly { animation: shFly 1.4s ease-in forwards; }
.kn2 .sh-pic.go.go-drive { animation: shDrive 1.4s ease-in-out; }
.kn2 .sh-pic.go.go-swim { animation: shSwim 1.4s ease-in-out; }
.kn2 .sh-pic.go.go-hop { animation: shHop .45s ease-in-out 3; }
.kn2 .sh-tray { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: center; }
.kn2 .sh-tool { aspect-ratio: .92; }
.kn2 .sh-tool { max-width: none; width: 100%; padding: 6% 4%; }
.kn2 .sh-tool span:not(.kn-ear):not(.sh-ic) { font-size: clamp(11px, 2.3vh, 19px); }
.kn2 .sh-tool .kn-ear, .kn2 .sh-home .kn-ear { width: clamp(22px, 3.6vh, 32px); height: clamp(22px, 3.6vh, 32px); top: 4px; right: 4px; }
.kn2 .sh-tool.tap { animation: knPop .3s; }
/* 數角 */
.kn2 .sh-corner { flex: 1; min-height: 0; display: flex; gap: 6%; align-items: center; justify-content: center; }
.kn2 .sh-bigbox { position: relative; flex: none; }
.kn2 .sh-bigbox > .sh-svg { position: absolute; inset: 0; }
.kn2 .sh-dot { position: absolute; width: clamp(34px, 7vh, 54px); height: clamp(34px, 7vh, 54px); transform: translate(-50%, -50%); padding: 0; border: 4px solid #fff; border-radius: 50%; background: #fde047; box-shadow: 0 0 0 3px #f59e0b, 0 4px 10px rgba(0, 0, 0, .25); animation: shGlow 1.2s ease-in-out infinite; }
.kn2 .sh-dot b { color: #7c2d12; font-weight: 900; font-size: clamp(15px, 3vh, 24px); }
.kn2 .sh-dot.on { background: #22c55e; box-shadow: 0 0 0 3px #15803d; animation: shPop .35s; } .kn2 .sh-dot.on b { color: #fff; }
.kn2 .sh-side { display: flex; flex-direction: column; gap: 14px; align-items: stretch; min-width: 180px; }
.kn2 .sh-tally { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 20px; background: #fff; color: #7c3aed; font-weight: 900; box-shadow: 0 6px 14px rgba(0, 0, 0, .14); }
.kn2 .sh-num { font-size: clamp(36px, 9vh, 70px); line-height: 1; }
.kn2 .sh-tally span { font-size: clamp(14px, 2.8vh, 22px); }
.kn2 .sh-nums { display: flex; flex-direction: column; gap: 10px; opacity: .35; pointer-events: none; transition: opacity .3s; }
.kn2 .sh-nums.on { opacity: 1; pointer-events: auto; }
.kn2 .sh-n .kn-opt-t { font-size: clamp(22px, 5vh, 40px); }
/* 生活中的形狀 */
.kn2.sh2 .tw-stim .sh-ic { padding: 12%; }
.kn2.sh2 .kn-qc .sh-ic { padding: 14%; }
/* 形狀回家 */
.kn2 .sh-now { display: grid; place-items: center; padding: 6%; }
.kn2 .sh-rot { display: block; width: 78%; height: 78%; }
.kn2 .sh-queue { align-items: center; }
.kn2 .sh-q { display: block; height: 70%; aspect-ratio: 1; }
.kn2 .sh-home { display: flex; flex-direction: column; align-items: center; padding: 0 0 40px; background: #fff7ed; border-radius: 10px 10px 22px 22px; overflow: visible; }
.kn2 .sh-roof { display: block; width: 112%; height: 22%; margin: -2px -6% 0; background: #f87171; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.kn2 .sh-home .sh-ic { padding: 10% 16%; }
.kn2 .sh-flyer { display: block; }
.kn2 .sh-flyer svg { width: 100%; height: 100%; }
@keyframes shBob { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }
@keyframes shChomp { 40% { transform: scale(1.08, .9); } }
@keyframes shPop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } }
@keyframes shGlow { 50% { opacity: .55; } }
@keyframes shFly { 20% { transform: translateY(4%); } 100% { transform: translateY(-160%); } }
@keyframes shDrive { 0% { transform: none; } 45% { transform: translateX(70%); opacity: 1; } 46% { transform: translateX(70%); opacity: 0; } 54% { transform: translateX(-70%); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; } }
@keyframes shSwim { 25% { transform: translate(-6%, -4%) rotate(-6deg); } 75% { transform: translate(6%, 4%) rotate(6deg); } }
@keyframes shHop { 50% { transform: translateY(-8%); } }
@media (orientation: landscape) and (max-height: 520px) {
  .kn2 .sh-tray { gap: 6px; }
  .kn2 .sh-side { min-width: 130px; gap: 8px; }
  .kn2 .sh-home { padding-bottom: 30px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .kn2 .sh-nums { flex-direction: row; }
  .kn2 .sh-n { padding: .4em .5em; padding-right: 2.4em; }
}
/* 數角的數字按鈕：喇叭放角落，不會遮住數字 */
.kn2 .sh-n { justify-content: center; padding: .5em 1em !important; min-width: 96px; }
.kn2 .sh-n .kn-ear { top: 4px !important; right: 4px !important; transform: none !important; width: 24px !important; height: 24px !important; }
@media (orientation: landscape) and (max-height: 520px) {
  .kn2 .sh-nums { gap: 8px; }
  .kn2 .sh-n { min-width: 0; flex: 1; padding: .3em .6em !important; }
  .kn2 .sh-n .kn-opt-t { font-size: clamp(24px, 7vh, 34px); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .kn2 .sh-nums { flex-direction: column; gap: 6px; }
  .kn2 .sh-side { min-width: 150px; }
  .kn2 .sh-n { flex: none; width: 100%; padding: .1em .6em !important; }
  .kn2 .sh-n .kn-opt-t { font-size: clamp(20px, 6vh, 30px); }
  .kn2 .sh-tally { padding: 4px 12px; } .kn2 .sh-num { font-size: clamp(28px, 8vh, 44px); }
}

/* 形狀王國：配合背景，佔滿整個畫面 */
.kn2 .sh-tag { display: inline-block; padding: .15em .7em; border-radius: 99px; background: rgba(255, 255, 255, .95); color: #3b0764; font-weight: 900; font-size: clamp(13px, 2.6vh, 22px); box-shadow: 0 3px 8px rgba(0, 0, 0, .18); white-space: nowrap; }
/* 角色選項 */
.kn2 .sh-scene { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 3%; padding-bottom: 1%; }
.kn2 .sh-chars { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: space-around; gap: 2%; }
.kn2 .sh-char { position: relative; flex: 0 1 30%; height: 92%; max-width: 300px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 0; border: 0; background: none; }
.kn2 .sh-body { position: relative; z-index: 1; flex: 1; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; animation: shBob 3s ease-in-out var(--d) infinite; }
.kn2 .sh-body .sh-svg { width: 88%; height: auto; max-height: 100%; }
.kn2 .sh-body img { width: 88%; max-height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .22)); }
.kn2 .sh-shadow { display: block; width: 64%; height: 14px; margin-top: -10px; border-radius: 50%; background: rgba(40, 60, 20, .22); }
.kn2.sh-kingdom .sh-shadow, .kn2 .sh-char .sh-shadow { box-shadow: 0 0 0 10px rgba(134, 239, 172, .35); }
.kn2 .sh-char .kn-ear { top: 0; right: 4%; }
.kn2 .sh-char.ok .sh-body { animation: shJump .5s ease-out 2; }
.kn2 .sh-char.ok .sh-tag { background: #22c55e; color: #fff; }
.kn2 .sh-char.bad { opacity: .45; }
/* 路牌 */
.kn2 .sh-sign { flex: 0 0 26%; height: 96%; display: flex; flex-direction: column; align-items: center; }
.kn2 .sh-plank { position: relative; width: 100%; flex: 0 1 auto; aspect-ratio: 1; max-height: 74%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8%; box-sizing: border-box; border-radius: 14px; background: repeating-linear-gradient(0deg, #e9b872 0 22%, #d9a05b 22% 24%); box-shadow: inset 0 0 0 5px #b7793a, 0 8px 16px rgba(0, 0, 0, .2); }
.kn2 .sh-plank img, .kn2 .sh-signsh { flex: 1; min-height: 0; width: 100%; object-fit: contain; display: grid; place-items: center; }
.kn2 .sh-signsh .sh-svg { max-height: 100%; }
.kn2 .sh-plank .kn-ear { top: 6px; right: 6px; }
.kn2 .sh-plank b { padding: .1em .6em; border-radius: 8px; background: rgba(255, 255, 255, .9); color: #3b0764; font-weight: 900; font-size: clamp(12px, 2.4vh, 20px); }
.kn2 .sh-post { flex: 1; width: 9%; min-height: 20px; background: #a16207; border-radius: 0 0 4px 4px; display: block; }
/* 砌圖畫：工作枱上的藍圖紙和木箱 */
.kn2 .sh-build { align-items: flex-end; }
.kn2 .sh-board { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px 10%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px 10%), #93c5fd; border-radius: 6px; box-shadow: 0 10px 20px rgba(0, 0, 0, .22), inset 0 0 0 6px #bfdbfe; transform: rotate(-1.5deg); height: 96%; }
.kn2 .sh-board .sh-empty g, .kn2 .sh-board .sh-empty > * { stroke: #fff; fill: rgba(255, 255, 255, .22); }
.kn2 .sh-crate { flex: 1; min-width: 0; align-self: flex-end; max-height: 86%; display: flex; padding: 3%; box-sizing: border-box; border-radius: 10px; background: repeating-linear-gradient(0deg, #c98a4b 0 30%, #a8692f 30% 32%); box-shadow: inset 0 0 0 7px #8b5a2b, 0 10px 18px rgba(0, 0, 0, .25); }
.kn2 .sh-crate .sh-tray { width: 100%; }
.kn2 .sh-tool { position: relative; aspect-ratio: auto !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8% 2% !important; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .18); }
.kn2 .sh-tool .sh-ic { padding: 4% 10%; }
.kn2 .sh-tool .sh-tag { font-size: clamp(11px, 2.2vh, 18px); }
/* 形狀回家：小路和村屋 */
.kn2 .sh-path { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: flex-end; justify-content: flex-start; gap: 3%; padding: 0 4% 1%; }
.kn2 .sh-path::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; border-radius: 99px; background: #e8d4a8; box-shadow: inset 0 -5px 0 #d6bd88; }
.kn2 .sh-now { position: relative; z-index: 1; height: 92%; aspect-ratio: 1; display: grid; place-items: center; }
.kn2 .sh-now.in { animation: shWalk .5s ease-out; }
.kn2 .sh-queue { position: relative; z-index: 1; display: flex; gap: 8px; align-items: flex-end; height: 50%; opacity: .9; }
.kn2 .sh-q { display: block; height: 80%; aspect-ratio: 1; }
.kn2 .sh-homes { flex: 1.25 1 0; min-height: 0; display: flex; gap: 2.5%; justify-content: center; align-items: flex-end; }
.kn2 .sh-home { position: relative; flex: 0 1 22%; max-width: 230px; height: 100%; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; }
.kn2 .sh-home .sh-roof { width: 118%; height: 26%; margin: 0; background: #ef4444; clip-path: polygon(50% 0, 100% 100%, 0 100%); flex: none; }
.kn2 .sh-home:nth-child(2) .sh-roof { background: #3b82f6; } .kn2 .sh-home:nth-child(3) .sh-roof { background: #22c55e; } .kn2 .sh-home:nth-child(4) .sh-roof { background: #a855f7; } .kn2 .sh-home:nth-child(5) .sh-roof { background: #f59e0b; } .kn2 .sh-home:nth-child(6) .sh-roof { background: #ec4899; }
.kn2 .sh-wall { position: relative; flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; border-radius: 0 0 8px 8px; background: #fef3c7; box-shadow: inset 0 -6px 0 #fde68a, 0 8px 14px rgba(0, 0, 0, .15); }
.kn2 .sh-wall .sh-ic { padding: 8% 18% 0; }
.kn2 .sh-door { display: block; width: 26%; height: 24%; margin-top: auto; border-radius: 40px 40px 0 0; background: #b45309; }
.kn2 .sh-home .sh-tag { position: absolute; bottom: 6px; transform: translateY(40%); }
.kn2 .sh-home .kn-ear { top: 22%; right: 6px; }
.kn2 .sh-home.got .sh-wall { box-shadow: 0 0 0 4px #22c55e, 0 0 20px #86efac; }
@keyframes shJump { 40% { transform: translateY(-18%); } }
@keyframes shWalk { from { transform: translateX(-60%); opacity: 0; } }
@media (orientation: landscape) and (max-height: 520px) {
  .kn2 .sh-tag { font-size: 12px; }
  .kn2 .sh-crate { padding: 2%; }
}
.kn2 .sh-board { aspect-ratio: auto; max-width: none; flex: none; }
.kn2 .sh-rule { display: block; margin-top: 2px; padding: .1em .5em; border-radius: 6px; background: #ede9fe; color: #6d28d9; font-weight: 900; font-size: clamp(10px, 1.9vh, 15px); }
.kn2 .sh-char .kn-ear { top: auto !important; bottom: 0; right: 0; }
.kn2 .sh-char .sh-tag { margin-right: 30px; }

/* 主題世界：動畫教學 */
.kn2 .tl { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.kn2 .tl-scene { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.kn2 .tl-it { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.kn2 .tl-it img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .22)); }
.kn2 .tl-it.sc { border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 5px #fff, 0 10px 22px rgba(0, 0, 0, .22); }
.kn2 .tl-it.sc img { object-fit: cover; filter: none; }
.kn2 .tl-it.boing { animation: tlBoing .5s; }
.kn2 .tl-it.pop { animation: tlPop .6s cubic-bezier(.3, 1.6, .5, 1) var(--dl) both; }
.kn2 .tl-it.pop img { animation: tlBob 2.6s ease-in-out calc(var(--dl) + .6s) infinite; }
/* 逐個出現 */
.kn2 .tl-row { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-evenly; }
.kn2 .tl-row .tl-it { flex: 0 1 22%; height: 70%; }
/* 慢慢長大 */
.kn2 .tl-grow { position: relative; flex: 1; height: 100%; display: grid; place-items: center; }
.kn2 .tl-scene:has(.tl-strip) { flex-direction: column; }
.kn2 .tl-grow .gw { position: absolute; width: 46%; height: 88%; opacity: 0; transform: scale(.3) translateY(30%); transition: opacity .5s, transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.kn2 .tl-grow .gw.on { opacity: 1; transform: none; }
.kn2 .tl-strip { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .75); }
.kn2 .tl-th { width: clamp(30px, 7vh, 56px); height: clamp(30px, 7vh, 56px); animation: tlPop .5s var(--dl) both; display: block; }
.kn2 .tl-th img { width: 100%; height: 100%; object-fit: contain; }
.kn2 .tl-ar { color: #7c3aed; font-size: clamp(18px, 4vh, 30px); animation: tlPop .4s var(--dl) both; }
/* A → B */
.kn2 .tl-pair { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 2%; }
.kn2 .tl-pair .tl-it { flex: 0 1 30%; height: 72%; }
.kn2 .tl-pair.cause .tl-it { flex: 0 1 42%; height: auto; aspect-ratio: 1264 / 848; max-height: 92%; }
.kn2 .tl-so { position: relative; flex: none; width: 9%; min-width: 46px; height: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: tlGrowX .6s ease-out var(--dl) both; transform-origin: left; }
.kn2 .tl-so i { display: block; width: 100%; height: 10px; border-radius: 99px; background: #f59e0b; position: relative; }
.kn2 .tl-so i::after { content: ''; position: absolute; right: -10px; top: -9px; border: 14px solid transparent; border-left-color: #f59e0b; border-right: 0; }
.kn2 .tl-so span { position: absolute; top: -30px; padding: 2px 10px; border-radius: 99px; background: #fff; color: #b45309; font-weight: 900; font-size: clamp(13px, 2.6vh, 20px); white-space: nowrap; box-shadow: 0 3px 8px rgba(0, 0, 0, .15); }
/* 是／不是 */
.kn2 .tl-vs { width: 100%; height: 100%; display: flex; gap: 3%; }
.kn2 .tl-side { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 2%; border-radius: 22px; }
.kn2 .tl-side.ok { background: rgba(220, 252, 231, .82); box-shadow: inset 0 0 0 4px #22c55e; }
.kn2 .tl-side.no { background: rgba(254, 226, 226, .82); box-shadow: inset 0 0 0 4px #f87171; }
.kn2 .tl-side > b { align-self: center; color: #14532d; font-weight: 900; font-size: clamp(14px, 3vh, 24px); }
.kn2 .tl-side.no > b { color: #991b1b; }
.kn2 .tl-side > div { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: space-evenly; }
.kn2 .tl-side .tl-it { flex: 0 1 30%; height: 80%; }
/* 移動 */
.kn2 .tl-move { position: absolute; inset: 0; overflow: hidden; }
.kn2 .tl-move .mv { position: absolute; width: 26%; height: 40%; left: -30%; }
.kn2 .tl-move.drive .mv { bottom: 28%; } .kn2 .tl-move.drive .mv:nth-child(2) { bottom: 22%; width: 32%; }
.kn2 .tl-move.sail .mv { bottom: 2%; } .kn2 .tl-move.fly .mv { top: 4%; } .kn2 .tl-move.fly .mv:nth-child(2) { top: 40%; width: 22%; }
.kn2 .tl-move.walk .mv { bottom: 6%; height: 50%; }
.kn2 .tl-move.go .mv { animation: tlDrive 4.2s linear calc(var(--i) * 1.4s) infinite; }
.kn2 .tl-move.sail.go .mv { animation: tlDrive 6s linear infinite, tlRock 1.4s ease-in-out infinite; }
.kn2 .tl-move.fly.go .mv { animation: tlFly 3.6s linear calc(var(--i) * 1.2s) infinite; }
.kn2 .tl-move.walk.go .mv { animation: tlDrive 5s linear infinite, tlHop .4s ease-in-out infinite; }
.kn2 .tl-move.rocket .mv { left: 37%; bottom: 0; height: 64%; }
.kn2 .tl-move.rocket.go .mv { animation: tlShake .12s linear infinite; }
.kn2 .tl-move.rocket.blast .mv { animation: tlBlast 1.8s ease-in forwards; }
.kn2 .tl-count { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); color: #fff; font-style: normal; font-weight: 900; font-size: clamp(40px, 12vh, 110px); text-shadow: 0 4px 0 #7c3aed, 0 0 20px rgba(124, 58, 237, .7); }
.kn2 .tl-count.tk { animation: tlPop .5s; }
/* 沉與浮 */
.kn2 .tl-tankwrap { width: 56%; height: 100%; display: flex; }
.kn2 .tl-tankwrap .tw-obj { width: 22%; }
/* 植物 */
.kn2 .tl-plantbox { height: 100%; display: flex; align-items: center; gap: 4%; }
.kn2 .tl-plantbox .tw-pot { height: 100%; }
.kn2 .tl-eat .tl-it { width: clamp(80px, 26vh, 220px); height: clamp(80px, 26vh, 220px); }
.kn2 .tw-plant[class*="hl-"] .tw-part { opacity: .35; transition: opacity .5s; }
.kn2 .tw-plant.hl-roots .tw-roots, .kn2 .tw-plant.hl-stem .tw-stem, .kn2 .tw-plant.hl-leaves .tw-leaves, .kn2 .tw-plant.hl-flower .tw-flower { opacity: 1; filter: drop-shadow(0 0 4px #fde047) drop-shadow(0 0 10px #facc15); animation: tlGlow 1s ease-in-out infinite; }
/* 一百年 */
.kn2 .tl-time { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-evenly; }
.kn2 .tl-col { position: relative; width: 28%; height: 86%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.kn2 .tl-col > .tl-it { width: 100%; height: 60%; }
.kn2 .tl-col.tl-grow { display: flex; }
.kn2 .tl-col.tl-grow .gw { position: absolute; bottom: 14%; width: 100%; height: 76%; }
.kn2 .tl-same { padding: 2px 12px; border-radius: 99px; background: #64748b; color: #fff; font-weight: 900; font-size: clamp(13px, 2.8vh, 22px); opacity: 0; transform: scale(.4); transition: .4s cubic-bezier(.3, 1.6, .5, 1); }
.kn2 .tl-same.g { background: #22c55e; }
.kn2 .tl-time.done .tl-same, .kn2 .tl-scene.done .tl-same { opacity: 1; transform: none; }
.kn2 .tl-clock { position: relative; width: clamp(70px, 20vh, 150px); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px #fb923c, 0 8px 16px rgba(0, 0, 0, .2); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kn2 .tl-hand { position: absolute; left: 50%; bottom: 50%; width: 5px; height: 40%; margin-left: -2.5px; border-radius: 99px; background: #ef4444; transform-origin: 50% 100%; animation: tlSpin .5s linear infinite; }
.kn2 .tl-yrs { position: relative; color: #7c3aed; font-weight: 900; font-size: clamp(20px, 6vh, 46px); line-height: 1; }
.kn2 .tl-clock span { position: relative; color: #475569; font-weight: 800; font-size: clamp(10px, 2vh, 15px); }
.kn2 .tl-scene.done .tl-hand { animation: none; }
/* 字幕 */
.kn2 .tl-talk { position: relative; flex: none; padding: 10px 60px 10px 18px; border-radius: 22px; background: rgba(255, 255, 255, .95); box-shadow: 0 6px 18px rgba(0, 0, 0, .16); }
.kn2 .tl-words { margin: 0; color: #c4b5fd; font-weight: 900; font-size: clamp(15px, 3.4vh, 28px); line-height: 1.3; }
.kn2 .tl-words i { font-style: normal; transition: color .2s; }
.kn2 .tl-words i.lit { color: #3b0764; }
.kn2 .tl-talk .kn-ear { top: 50%; right: 12px; transform: translateY(-50%); width: clamp(32px, 6vh, 46px); height: clamp(32px, 6vh, 46px); }
.kn2 .tw-next.ready { animation: tlNext 1s ease-in-out infinite; }
/* 原因和結果配對 */
.kn2 .tp-pairs { flex: 1; min-height: 0; display: flex; gap: 0; position: relative; }
.kn2 .tp-col { flex: 0 0 38%; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.kn2 .tp-h { align-self: center; padding: 2px 14px; border-radius: 99px; background: rgba(255, 255, 255, .9); color: #7c3aed; font-weight: 900; font-size: clamp(13px, 2.6vh, 20px); }
.kn2 .tp-lines { flex: 1; height: 100%; overflow: visible; }
.kn2 .tp-lines path { fill: none; stroke: #22c55e; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 10 8; animation: tlDash 1s linear infinite; }
.kn2 .tp-pc { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; gap: 8px; padding: 4px 40px 4px 4px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .95); box-shadow: 0 4px 10px rgba(0, 0, 0, .14); text-align: left; transition: transform .2s, box-shadow .2s; }
.kn2 .tp-pc img { height: 100%; aspect-ratio: 1264 / 848; object-fit: cover; border-radius: 12px; flex: none; }
.kn2 .tp-pc span { color: #3b0764; font-weight: 900; font-size: clamp(11px, 2.2vh, 17px); line-height: 1.15; }
.kn2 .tp-pc .kn-ear { top: 50%; right: 6px; transform: translateY(-50%); width: 28px; height: 28px; }
.kn2 .tp-pc.sel { transform: scale(1.03); box-shadow: 0 0 0 4px #f59e0b, 0 6px 14px rgba(0, 0, 0, .2); }
.kn2 .tp-pc.got { box-shadow: 0 0 0 4px #22c55e; background: #f0fdf4; }
@keyframes tlPop { from { opacity: 0; transform: scale(.2); } 70% { transform: scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes tlBob { 50% { transform: translateY(-5%); } }
@keyframes tlBoing { 30% { transform: scale(1.2, .85); } 60% { transform: scale(.9, 1.15) translateY(-10%); } }
@keyframes tlGrowX { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes tlDrive { from { left: -35%; } to { left: 110%; } }
@keyframes tlFly { from { left: -30%; transform: translateY(20%) rotate(-6deg); } 50% { transform: translateY(-10%) rotate(4deg); } to { left: 110%; transform: translateY(10%) rotate(-4deg); } }
@keyframes tlRock { 50% { transform: rotate(4deg) translateY(-4%); } }
@keyframes tlHop { 50% { transform: translateY(-8%); } }
@keyframes tlShake { 50% { transform: translateX(2px); } }
@keyframes tlBlast { to { transform: translateY(-260%); } }
@keyframes tlSpin { to { transform: rotate(360deg); } }
@keyframes tlGlow { 50% { opacity: .7; } }
@keyframes tlNext { 50% { transform: scale(1.1); box-shadow: 0 5px 0 #15803d, 0 0 0 8px rgba(34, 197, 94, .3); } }
@keyframes tlDash { to { stroke-dashoffset: -18; } }
@media (orientation: landscape) and (max-height: 520px) {
  .kn2 .tl-talk { padding: 4px 48px 4px 12px; border-radius: 16px; }
  .kn2 .tl-words { font-size: clamp(13px, 3.8vh, 18px); }
  .kn2 .tl { gap: 4px; }
  .kn2 .tp-pc { padding-right: 32px; } .kn2 .tp-pc .kn-ear { width: 22px; height: 22px; }
}
.kn2 .tl-scene:has(.tl-strip) > .tl-grow { width: 100%; align-self: stretch; min-height: 0; }
.kn2 .tp-col { min-width: 0; overflow: hidden; }
.kn2 .tp-pc { min-width: 0; width: 100%; overflow: hidden; }
.kn2 .tp-pc img { height: 100%; width: auto; max-width: 46%; min-width: 0; }
.kn2 .tp-pc span { min-width: 0; }
.kn2 .tp-lines { min-width: 0; }

/* 天氣日曆 */
.kn2.wt .kn-bg.swap { animation: wtSwap .8s ease-out; }
.kn2 .wt-fxbox { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.kn2 .wt-fx { position: absolute; inset: 0; }
.kn2 .wt-fx i { position: absolute; top: -10%; display: block; animation: wtFall var(--d) linear var(--dl) infinite; }
.kn2 .wt-rain i { width: 2px; height: 26px; background: linear-gradient(transparent, rgba(186, 230, 253, .95)); transform: rotate(12deg); }
.kn2 .wt-rain.strong i { animation-duration: calc(var(--d) * .7); }
.kn2 .wt-snow i { width: calc(10px * var(--s)); height: calc(10px * var(--s)); border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation-name: wtSnow; }
.kn2 .wt-petals i { width: calc(14px * var(--s)); height: calc(10px * var(--s)); border-radius: 80% 0 80% 0; background: #f9a8d4; animation-name: wtSnow; }
.kn2 .wt-leaves i { width: calc(18px * var(--s)); height: calc(12px * var(--s)); border-radius: 80% 0 80% 0; background: #f97316; animation-name: wtSnow; }
.kn2 .wt-leaves i:nth-child(3n) { background: #dc2626; } .kn2 .wt-leaves i:nth-child(3n+1) { background: #facc15; }
.kn2 .wt-sunrays { position: absolute; right: -14vh; top: -14vh; width: 60vh; height: 60vh; border-radius: 50%; background: repeating-conic-gradient(rgba(253, 224, 71, .35) 0 10deg, transparent 10deg 24deg); animation: wtSpin 18s linear infinite; -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); }
.kn2 .wt-sun.strong .wt-sunrays { animation-duration: 6s; }
.kn2.wt .kn-stage { z-index: 2; }
.kn2 .wt-cic { display: block; width: 100%; height: 100%; }
.kn2 .wt-cic svg { width: 100%; height: 100%; }
/* 穿衣服 */
.kn2 .wt-dress { flex: 1; min-height: 0; display: flex; gap: 2%; align-items: stretch; }
.kn2 .wt-card { position: relative; flex: 0 0 20%; align-self: center; aspect-ratio: .8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 4%; border-radius: 22px; background: #fff; box-shadow: 0 0 0 5px #fde68a, 0 10px 22px rgba(0, 0, 0, .2); animation: wtCard 2.4s ease-in-out infinite; }
.kn2 .wt-card .wt-cic { flex: 1; min-height: 0; }
.kn2 .wt-card b { color: #3b0764; font-weight: 900; font-size: clamp(13px, 2.8vh, 22px); text-align: center; line-height: 1.15; }
.kn2 .wt-c-rain { box-shadow: 0 0 0 5px #7dd3fc, 0 10px 22px rgba(0, 0, 0, .2); } .kn2 .wt-c-cold { box-shadow: 0 0 0 5px #bae6fd, 0 10px 22px rgba(0, 0, 0, .2); }
.kn2 .wt-doll { position: relative; flex: 0 0 30%; align-self: flex-end; aspect-ratio: .8; max-height: 100%; }
.kn2 .wt-owl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .25)); }
.kn2 .wt-owl.brr { animation: wtBrr .5s; }
.kn2 .wt-doll.wiggle .wt-owl { animation: wtWig .4s; }
.kn2 .wt-doll.ready { animation: wtHop .5s ease-in-out 3; }
.kn2 .wt-slot { position: absolute; z-index: 2; aspect-ratio: 1; display: block; pointer-events: none; }
.kn2 .wt-slot img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .2)); }
.kn2 .wt-slot.on img { animation: tlPop .4s; }
.kn2 .wt-slot[data-s="body"] { z-index: 1; } .kn2 .wt-slot[data-s="head"] { z-index: 3; }
.kn2 .wt-shadow { position: absolute; left: 15%; right: 15%; bottom: -3%; height: 6%; border-radius: 50%; background: rgba(0, 0, 0, .15); display: block; }
.kn2 .wt-wardrobe { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: center; padding: 2%; border-radius: 22px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .8); }
.kn2 .wt-cl { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8% 4% 6%; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 4px 0 #ddd6fe, 0 6px 12px rgba(0, 0, 0, .12); }
.kn2 .wt-cl img { flex: 1; min-height: 0; width: 80%; object-fit: contain; }
.kn2 .wt-cl b { color: #334155; font-weight: 900; font-size: clamp(10px, 2vh, 16px); }
.kn2 .wt-cl .kn-ear { top: 3px; right: 3px; width: clamp(20px, 3.4vh, 28px); height: clamp(20px, 3.4vh, 28px); }
.kn2 .wt-cl.used { opacity: .25; pointer-events: none; }
.kn2 .wt-count { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); z-index: 5; }
/* 揀答案 */
.kn2 .wt-opts { flex: 0 0 auto; display: flex; gap: 2.5%; justify-content: center; align-items: stretch; }
.kn2 .wt-opt { position: relative; flex: 0 1 30%; max-width: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 36px 12px 12px; border: 0; border-radius: 20px; background: rgba(255, 255, 255, .96); box-shadow: 0 6px 0 #ddd6fe, 0 10px 18px rgba(0, 0, 0, .16); }
.kn2 .wt-opt b { color: #3b0764; font-weight: 900; font-size: clamp(14px, 3vh, 26px); line-height: 1.15; text-align: center; }
.kn2 .wt-opt .kn-ear { top: 6px; right: 6px; }
.kn2 .wt-opt.ok { background: #dcfce7; box-shadow: 0 6px 0 #22c55e, 0 0 20px #86efac; }
.kn2 .wt-opt.bad { opacity: .45; }
.kn2 .wt-sky { flex: 1; align-items: flex-end; }
.kn2 .wt-sky .wt-opt { padding-top: 16px; }
.kn2 .wt-sky .wt-cic { width: clamp(60px, 18vh, 150px); height: clamp(60px, 18vh, 150px); }
.kn2 .wt-seasons { margin-top: auto; }
.kn2 .wt-seasons .wt-opt { flex: 0 1 23%; padding: 6px 30px 8px 6px; }
.kn2 .wt-th { display: block; width: 100%; aspect-ratio: 1264 / 848; border-radius: 14px; background-size: cover; background-position: center; }
.kn2 .wt-fest { flex: 1; flex-wrap: wrap; align-content: flex-end; }
.kn2 .wt-fest .wt-opt { flex: 0 1 44%; padding: 16px 40px 16px 16px; }
.kn2 .wt-days, .kn2 .wt-times { margin-top: auto; }
.kn2 .wt-times .wt-opt b { font-size: clamp(22px, 6vh, 48px); font-variant-numeric: tabular-nums; }
.kn2.party .kn-bg { animation: wtParty 1s ease-in-out 3; }
/* 線索 */
.kn2 .wt-clues { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 4%; }
.kn2 .wt-clue { height: 80%; max-width: 26%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 8px 18px rgba(0, 0, 0, .15); animation: tlPop .6s cubic-bezier(.3, 1.6, .5, 1) var(--dl) both; }
.kn2 .wt-clue img { width: 70%; height: 70%; object-fit: contain; animation: tlBob 2.4s ease-in-out infinite; }
/* 四季次序 */
.kn2 .wt-ring { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 1%; }
.kn2 .wt-rs { position: relative; flex: 0 1 20%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 20px; border: 4px dashed rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .35); }
.kn2 .wt-rs > b { color: #fff; font-weight: 900; font-size: clamp(20px, 5vh, 40px); text-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.kn2 .wt-rs.on { border: 4px solid #fff; background: #fff; padding: 4%; animation: tlPop .45s; }
.kn2 .wt-rs.on > b { color: #3b0764; text-shadow: none; font-size: clamp(12px, 2.6vh, 20px); }
.kn2 .wt-rar { color: #fff; font-style: normal; font-weight: 900; font-size: clamp(22px, 5vh, 40px); text-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
/* 撕紙日曆 */
.kn2 .wt-cal { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 2%; perspective: 800px; }
.kn2 .wt-pg { position: relative; flex: 0 1 17%; aspect-ratio: .78; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding-top: 10%; border-radius: 12px; background: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, .18); overflow: hidden; }
.kn2 .wt-pg::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 24%; background: #ef4444; }
.kn2 .wt-rings { position: absolute; top: 4%; left: 20%; right: 20%; height: 10%; background: radial-gradient(circle, #1f2937 0 35%, transparent 40%) 0 0 / 33% 100% repeat-x; display: block; z-index: 1; }
.kn2 .wt-pg small { position: relative; z-index: 1; margin-top: -44%; margin-bottom: 30%; color: #fff; font-weight: 900; font-size: clamp(10px, 2vh, 15px); text-align: center; line-height: 1.1; }
.kn2 .wt-pg b { color: #3b0764; font-weight: 900; font-size: clamp(12px, 2.8vh, 22px); }
.kn2 .wt-pg.today { flex-basis: 21%; box-shadow: 0 0 0 5px #fde047, 0 10px 20px rgba(0, 0, 0, .2); }
.kn2 .wt-pg.today::before { background: #22c55e; }
.kn2 .wt-pg.ask { box-shadow: 0 0 0 5px #a855f7, 0 0 22px #c084fc; animation: wtAsk 1.2s ease-in-out infinite; }
.kn2 .wt-pg.ask b { font-size: clamp(26px, 7vh, 56px); color: #a855f7; }
.kn2 .wt-pg.flip { animation: wtFlip .6s; }
.kn2 .wt-pg.flip b { font-size: clamp(12px, 2.8vh, 22px); color: #16a34a; }
/* 火車 / 月份 */
.kn2 .wt-train { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.kn2 .wt-loco { flex: 0 0 9%; aspect-ratio: 1; display: block; border-radius: 12px 30px 8px 8px; background: radial-gradient(circle at 30% 100%, #1f2937 0 14%, transparent 15%), radial-gradient(circle at 75% 100%, #1f2937 0 14%, transparent 15%), linear-gradient(#ef4444 0 70%, transparent 70%); }
.kn2 .wt-car { position: relative; flex: 1 1 0; max-width: 13%; aspect-ratio: 1.05; display: grid; place-items: center; border-radius: 10px; border: 3px dashed rgba(124, 58, 237, .6); background: rgba(255, 255, 255, .6); }
.kn2 .wt-train.week .wt-car::after { content: ''; position: absolute; bottom: -12%; left: 15%; right: 15%; height: 22%; background: radial-gradient(circle at 20% 50%, #1f2937 0 30%, transparent 32%), radial-gradient(circle at 80% 50%, #1f2937 0 30%, transparent 32%); }
.kn2 .wt-car b { color: #7c3aed; font-weight: 900; font-size: clamp(10px, 2.2vh, 17px); }
.kn2 .wt-car.on { border: 3px solid #22c55e; background: #fff; animation: tlPop .4s; }
.kn2 .wt-car.on b { color: #14532d; }
.kn2 .wt-train.go { animation: wtTrain 1s ease-in forwards; }
.kn2 .wt-train.month .wt-car { max-width: 15%; border-radius: 12px; }
.kn2 .wt-tiles { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.kn2 .wt-tile { position: relative; padding: 10px 40px 10px 16px; border: 0; border-radius: 16px; background: #fff; color: #3b0764; font-weight: 900; font-size: clamp(13px, 2.8vh, 22px); box-shadow: 0 5px 0 #ddd6fe, 0 8px 14px rgba(0, 0, 0, .14); }
.kn2 .wt-tile .kn-ear { top: 50%; right: 6px; transform: translateY(-50%); width: 26px; height: 26px; }
.kn2 .wt-tile.used { opacity: .2; pointer-events: none; }
.kn2 .wt-board { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4% 8%; padding: 4% 60px 4% 4%; border-radius: 26px; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .16); }
.kn2 .wt-board b { color: #3b0764; font-weight: 900; font-size: clamp(18px, 4.6vh, 40px); }
.kn2 .wt-board .kn-ear { top: 50%; right: 14px; transform: translateY(-50%); width: 44px; height: 44px; }
.kn2 .wt-cal-ic { flex: none; width: clamp(50px, 12vh, 100px); aspect-ratio: .85; border-radius: 10px; background: linear-gradient(#ef4444 0 28%, #fff 28%); box-shadow: 0 4px 10px rgba(0, 0, 0, .2), inset 0 0 0 3px #e5e7eb; display: block; }
/* 時鐘 */
.kn2.wt-m-clock .kn-stage, .kn2.wt-m-setclock .kn-stage { flex-direction: row; align-items: center; }
.kn2 .wt-clock { position: relative; flex: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .2)); }
.kn2 .wt-clock svg { width: 100%; height: 100%; }
.kn2 .wt-hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; transform: translateX(-50%) rotate(var(--r)); border-radius: 99px; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); display: block; }
.kn2 .wt-hand.hr { width: 4.5%; height: 25%; background: #1e293b; }
.kn2 .wt-hand.mn { width: 3%; height: 37%; background: #ef4444; }
.kn2 .wt-dot { position: absolute; left: 50%; top: 50%; width: 7%; height: 7%; transform: translate(-50%, -50%); border-radius: 50%; background: #1e293b; display: block; }
.kn2 .wt-cn { position: absolute; width: 15%; height: 15%; transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 50%; background: #ede9fe; color: #3b0764; font-weight: 900; font-size: clamp(14px, 3.4vh, 28px); box-shadow: 0 3px 0 #c4b5fd; }
.kn2 .wt-cn.ok { background: #22c55e; color: #fff; }
.kn2 .wt-clock.ring { animation: wtRing .12s linear 8; }
.kn2 .wt-times { flex-direction: column; flex: 1; max-width: 34%; margin: 0 0 0 4%; gap: 12px; }
.kn2 .wt-times .wt-opt { flex: 0 0 auto; max-width: none; }
.kn2 .wt-setwrap { flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; gap: 5%; }
.kn2 .wt-target { position: relative; display: flex; flex-direction: column; align-items: center; padding: 16px 56px 16px 24px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 5px #fde047, 0 10px 20px rgba(0, 0, 0, .18); }
.kn2 .wt-target small { color: #7c3aed; font-weight: 900; font-size: clamp(13px, 2.6vh, 20px); }
.kn2 .wt-target b { color: #3b0764; font-weight: 900; font-size: clamp(32px, 9vh, 74px); line-height: 1; }
.kn2 .wt-target .kn-ear { top: 10px; right: 10px; }
@keyframes wtFall { to { transform: translateY(125vh) rotate(12deg); } }
@keyframes wtSnow { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(30px, 60vh) rotate(180deg); } 100% { transform: translate(-10px, 125vh) rotate(360deg); } }
@keyframes wtSpin { to { transform: rotate(360deg); } }
@keyframes wtSwap { from { filter: brightness(1.6) saturate(.4); transform: scale(1.06); } }
@keyframes wtCard { 50% { transform: translateY(-4%) rotate(-2deg); } }
@keyframes wtBrr { 20%, 60% { transform: translateX(-4%); } 40%, 80% { transform: translateX(4%); } }
@keyframes wtWig { 50% { transform: scale(1.05, .95); } }
@keyframes wtHop { 50% { transform: translateY(-8%); } }
@keyframes wtParty { 50% { filter: brightness(1.15) saturate(1.3); } }
@keyframes wtAsk { 50% { transform: translateY(-4%); } }
@keyframes wtFlip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
@keyframes wtTrain { to { transform: translateX(120%); } }
@keyframes wtRing { 50% { transform: rotate(4deg); } }
@media (orientation: landscape) and (max-height: 520px) {
  .kn2 .wt-wardrobe { gap: 5px; }
  .kn2 .wt-opt { padding: 6px 30px 6px 8px; } .kn2 .wt-opt .kn-ear { width: 22px; height: 22px; }
  .kn2 .wt-tile { padding: 5px 32px 5px 10px; }
  .kn2 .wt-fest .wt-opt { padding: 8px 32px 8px 8px; }
}

.kn2 .wt-pg { justify-content: flex-start; padding-top: 0; }
.kn2 .wt-pg small { margin: 0; height: 24%; display: flex; align-items: flex-end; padding-bottom: 4%; box-sizing: border-box; }
.kn2 .wt-pg b { flex: 1; display: grid; place-items: center; }
.kn2 .wt-rings { top: 3%; height: 9%; }
.kn2 .wt-loco { position: relative; flex: 0 0 11%; aspect-ratio: 1.1; border-radius: 10px 10px 8px 8px; background: #ef4444; box-shadow: inset 0 -8px 0 #b91c1c; }
.kn2 .wt-loco::before { content: ''; position: absolute; left: 14%; top: -34%; width: 22%; height: 40%; border-radius: 4px 4px 0 0; background: #1f2937; }
.kn2 .wt-loco::after { content: ''; position: absolute; bottom: -12%; left: 10%; right: 10%; height: 24%; background: radial-gradient(circle at 20% 50%, #1f2937 0 30%, transparent 32%), radial-gradient(circle at 80% 50%, #1f2937 0 30%, transparent 32%); }

/* 主題世界：交通工具一開始已在畫面裏；新的因果玩法 */
.kn2 .tl-move.go .mv { animation-delay: calc(var(--i) * -1.4s - 1.6s); }
.kn2 .tl-move.fly.go .mv { animation-delay: calc(var(--i) * -1.2s - 1.2s); }
.kn2 .tl-move.sail.go .mv { animation-delay: -2.4s, 0s; }
.kn2 .tc-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.kn2 .tc-row { flex: 1; min-height: 0; height: auto; }
.kn2 .tc-row .tl-it { cursor: default; }
.kn2 .tc-b { transition: transform .35s; }
.kn2 .tc-b.swapped { animation: wtFlip .7s; }
.kn2 .tc-hide { background: rgba(255, 255, 255, .7); display: grid; place-items: center; }
.kn2 .tc-q { font-style: normal; color: #a855f7; font-weight: 900; font-size: clamp(40px, 12vh, 90px); }
.kn2 .tc-cap { display: flex; justify-content: space-around; gap: 10%; }
.kn2 .tc-cap span { flex: 0 1 42%; padding: 4px 10px; border-radius: 12px; background: rgba(255, 255, 255, .92); color: #3b0764; font-weight: 900; font-size: clamp(12px, 2.5vh, 20px); text-align: center; min-height: 1.4em; }
.kn2 .tc-cap span:empty { visibility: hidden; }
.kn2 .tc-btns { display: flex; gap: 4%; justify-content: center; }
.kn2 .tc-btns button { position: relative; flex: 0 1 36%; padding: 12px 44px 12px 16px; border: 0; border-radius: 20px; color: #fff; font-weight: 900; font-size: clamp(15px, 3.2vh, 26px); box-shadow: 0 6px 0 rgba(0, 0, 0, .2), 0 10px 16px rgba(0, 0, 0, .15); }
.kn2 .tc-btns .tc-b1 { background: #22c55e; } .kn2 .tc-btns .tc-b0 { background: #f97316; }
.kn2 .tc-btns .kn-ear { top: 50%; right: 8px; transform: translateY(-50%); background: rgba(255, 255, 255, .25); }
.kn2 .tc-btns button.bad { opacity: .45; } .kn2 .tc-btns button.ok { box-shadow: 0 0 0 5px #fde047, 0 6px 0 rgba(0, 0, 0, .2); }
.kn2 .tc-n { position: absolute; right: 0; top: 0; }
.kn2 .tc-slot { aspect-ratio: 1264 / 848 !important; max-width: 28% !important; }
.kn2 .tc-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.kn2 .tc-slot b { width: auto !important; aspect-ratio: auto !important; padding: 0 8px; border-radius: 99px !important; }
.kn2 .tc-card img { aspect-ratio: 1264 / 848; object-fit: cover; border-radius: 12px; flex: none; width: 100%; height: auto; }
.kn2 .tc-card { flex-basis: 28% !important; max-width: 280px !important; }
@media (orientation: landscape) and (max-height: 520px) { .kn2 .tc-btns button { padding: 6px 36px 6px 10px; } }
.kn2 .tc-card { justify-content: center; max-height: 100%; }
.kn2 .kn-cards:has(.tc-card) { align-items: center; }
.kn2.tw-first .kn-qc.sc { flex-basis: 40%; max-width: 460px; }

.kn2 .wt-items { flex: 1; align-items: flex-end; }
.kn2 .wt-oimg { width: clamp(60px, 20vh, 170px); height: clamp(60px, 20vh, 170px); object-fit: contain; }

/* 十萬個為什麼 */
.kn2.wy .kn-stage { z-index: 2; }
.kn2 .wy-dim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 55% 45%, rgba(30, 10, 70, .15), rgba(30, 10, 70, .6)); opacity: 0; transition: opacity .6s; pointer-events: none; display: block; }
.kn2.cinema .wy-dim { opacity: 1; }
/* 問題：神秘卡＋三個小朋友 */
.kn2 .wy-q { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2%; }
.kn2 .wy-myst { position: relative; flex: 1 1 46%; min-height: 0; align-self: center; aspect-ratio: 1264 / 848; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 6px #fff, 0 12px 26px rgba(0, 0, 0, .25); animation: wyFloat 3s ease-in-out infinite; }
.kn2 .wy-myst img { width: 100%; height: 100%; object-fit: cover; filter: blur(5px) saturate(.8) brightness(.9); transform: scale(1.08); }
.kn2 .wy-qm { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: clamp(60px, 18vh, 160px); text-shadow: 0 6px 0 #7c3aed, 0 0 30px rgba(124, 58, 237, .8); animation: wyQm 1.6s ease-in-out infinite; }
.kn2 .wy-kids { flex: 1 1 54%; min-height: 0; display: flex; gap: 2%; justify-content: space-around; align-items: flex-end; }
.kn2 .wy-kid { position: relative; flex: 0 1 31%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 0; border: 0; background: none; }
.kn2 .wy-kid > img { flex: 1; min-height: 0; max-height: 58%; width: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .25)); animation: tlBob 2.6s ease-in-out var(--d) infinite; }
.kn2 .wy-bub { position: relative; order: -1; width: 100%; box-sizing: border-box; padding: 10px 36px 10px 12px; border-radius: 18px; background: #fff; color: #3b0764; font-weight: 900; font-size: clamp(12px, 2.4vh, 19px); line-height: 1.2; text-align: left; box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.kn2 .wy-bub::after { content: ''; position: absolute; left: 50%; bottom: -12px; margin-left: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.kn2 .wy-bub .kn-ear { top: 50%; right: 6px; transform: translateY(-50%); width: 26px; height: 26px; }
.kn2 .wy-kid.ok .wy-bub { background: #dcfce7; box-shadow: 0 0 0 4px #22c55e, 0 6px 14px rgba(0, 0, 0, .18); }
.kn2 .wy-kid.ok .wy-bub::after { border-top-color: #dcfce7; }
.kn2 .wy-kid.ok > img { animation: shJump .5s ease-out 3; }
.kn2 .wy-kid.bad { opacity: .45; }
/* 動畫解說 */
.kn2 .wy-movie { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.kn2 .wy-reel { align-self: center; display: flex; gap: 8px; }
.kn2 .wy-reel i { width: clamp(24px, 4.4vh, 36px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .35); color: #fff; font-style: normal; font-weight: 900; font-size: clamp(12px, 2vh, 16px); }
.kn2 .wy-reel i.on { background: #fde047; color: #713f12; transform: scale(1.15); } .kn2 .wy-reel i.done { background: #22c55e; }
.kn2 .wy-frame { position: relative; flex: 1; min-height: 0; align-self: center; aspect-ratio: 1264 / 848; max-width: 100%; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 0 0 6px #fff, 0 0 40px rgba(253, 224, 71, .45), 0 16px 30px rgba(0, 0, 0, .35); cursor: pointer; }
.kn2 .wy-frame > img { width: 100%; height: 100%; object-fit: cover; animation: wyKen 9s ease-out forwards; }
.kn2 .wy-frame.flat > img { object-fit: contain; padding: 4%; box-sizing: border-box; }
.kn2 .wy-frame.enter { animation: wyIn .6s cubic-bezier(.3, 1.4, .5, 1); }
.kn2 .wy-frame.boom { animation: wyBoom .5s; } .kn2 .wy-frame.jolt { animation: wyJolt .5s; } .kn2 .wy-frame.boing { animation: tlBoing .5s; }
.kn2 .wy-frame.fx-zoom > img { animation: wyKen2 7s ease-in-out forwards; }
.kn2 .wy-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.kn2 .wy-fx i { position: absolute; display: block; }
.kn2 .wy-up i { width: calc(14px * var(--s)); height: calc(28px * var(--s)); border-radius: 50%; border-left: 3px solid rgba(255, 255, 255, .9); top: auto !important; bottom: -10%; animation: wyRise var(--d) ease-in var(--dl) infinite; }
.kn2 .wy-bub i { width: calc(18px * var(--s)); height: calc(18px * var(--s)); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .25); top: auto !important; bottom: -10%; animation: wyRise var(--d) ease-in var(--dl) infinite; }
.kn2 .wy-rain i { width: 2px; height: 22px; background: linear-gradient(transparent, #7dd3fc); top: -10% !important; animation: wtFall calc(var(--d) * .35) linear var(--dl) infinite; }
.kn2 .wy-snow i { width: calc(9px * var(--s)); height: calc(9px * var(--s)); border-radius: 50%; background: #fff; top: -10% !important; animation: wtSnow calc(var(--d) * 2) linear var(--dl) infinite; }
.kn2 .wy-leaf i { width: calc(16px * var(--s)); height: calc(11px * var(--s)); border-radius: 80% 0 80% 0; background: #f97316; top: -10% !important; animation: wtSnow calc(var(--d) * 2) linear var(--dl) infinite; }
.kn2 .wy-spark i { width: calc(16px * var(--s)); height: calc(16px * var(--s)); background: #fde047; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px #fff); animation: wyTwinkle var(--d) ease-in-out var(--dl) infinite; }
.kn2 .wy-flash { inset: 0; background: #fff; animation: wyFlash 1.6s ease-out 2; }
.kn2 .wy-spin { left: 50%; top: 50%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 6px dashed rgba(124, 58, 237, .55); animation: wySpin 3s linear infinite; }
.kn2 .wy-movie .tl-talk { flex: none; }
.kn2 .wy-nav { display: flex; justify-content: flex-end; }
/* 小知識 */
.kn2 .wy-fact { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(30, 10, 70, .35); animation: f3In .4s; }
.kn2 .wy-fcard { position: relative; max-width: min(640px, 88%); padding: 22px 64px 22px 26px; border-radius: 26px; background: linear-gradient(#fffbeb, #fff); box-shadow: 0 0 0 6px #fde047, 0 20px 40px rgba(0, 0, 0, .3); text-align: center; animation: tlPop .6s cubic-bezier(.3, 1.6, .5, 1); }
.kn2 .wy-ft { display: block; color: #d97706; font-weight: 900; font-size: clamp(20px, 4.6vh, 36px); }
.kn2 .wy-fcard p { margin: 8px 0 14px; color: #3b0764; font-weight: 800; font-size: clamp(15px, 3.2vh, 26px); line-height: 1.3; }
.kn2 .wy-fcard .kn-ear { top: 14px; right: 14px; width: 40px; height: 40px; }
@keyframes wyFloat { 50% { transform: translateY(-2%) rotate(-1deg); } }
@keyframes wyQm { 50% { transform: scale(1.15) rotate(8deg); } }
@keyframes wyKen { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes wyKen2 { from { transform: scale(1); } to { transform: scale(1.18) translate(-3%, -2%); } }
@keyframes wyIn { from { opacity: 0; transform: scale(.6) rotate(-4deg); } }
@keyframes wyBoom { 30% { transform: scale(1.08); } 60% { transform: scale(.97); } }
@keyframes wyJolt { 20%, 60% { transform: translateX(-10px) rotate(-1deg); } 40%, 80% { transform: translateX(10px) rotate(1deg); } }
@keyframes wyRise { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-120%) translateX(14px); opacity: 0; } }
@keyframes wyTwinkle { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@keyframes wyFlash { 0%, 100% { opacity: 0; } 8% { opacity: .9; } 16% { opacity: 0; } 24% { opacity: .7; } 32% { opacity: 0; } }
@keyframes wySpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (orientation: landscape) and (max-height: 520px) {
  .kn2 .wy-bub { padding: 6px 30px 6px 8px; font-size: 11px; }
  .kn2 .wy-fcard { padding: 12px 52px 12px 16px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .kn2 .wy-movie { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 6px 12px; }
  .kn2 .wy-reel { grid-column: 2; grid-row: 1; }
  .kn2 .wy-frame { grid-column: 1; grid-row: 1 / 4; width: 100%; height: auto; max-height: 100%; align-self: center; }
  .kn2 .wy-movie .tl-talk { grid-column: 2; grid-row: 2; align-self: center; }
  .kn2 .wy-nav { grid-column: 2; grid-row: 3; }
  .kn2 .wy-nav .tw-next { font-size: 14px; padding: 6px 14px; }
}
.kn2 .wy-flash { opacity: 0; }

/* 家長天地：平面背景佔滿畫面；今日任務放在最上面 */
.pc-screen { background-image: url(../img/scenes/pc-home-bg.webp), url(../img/scenes/parent-bg.webp); }
.pc-screen::before { background: rgba(255, 250, 242, .18); }
.pc-today { margin-bottom: 14px; padding: 14px 16px; border-radius: 26px; background: rgba(255, 253, 248, .96); border: 3px solid #bbf7d0; box-shadow: 0 6px 0 rgba(22, 163, 74, .18), 0 10px 24px rgba(0, 0, 0, .08); }
.pc-today.all { border-color: #22c55e; background: linear-gradient(#f0fdf4, rgba(255, 253, 248, .96)); }
.pc-thead { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pc-tt { flex: 1; } .pc-tt b { display: block; color: #14532d; font-size: clamp(18px, 2.2vw, 24px); } .pc-tt small { color: #6b7a6b; font-weight: 700; }
.pc-ring { width: 62px; height: 62px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#22c55e calc(var(--p) * 360deg), #e5e7eb 0); }
.pc-ring b { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #15803d; font-weight: 900; }
.pc-steps.mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pc-step.mini { grid-template-columns: 44px 1fr; grid-template-rows: auto auto; padding: 10px 12px; gap: 6px 10px; align-items: start; }
.pc-step.mini .pc-tick { width: 44px; height: 44px; grid-row: 1; }
.pc-step.mini .pc-sic { grid-column: 2; grid-row: 1; width: 52px; height: 52px; justify-self: end; }
.pc-step.mini .pc-sb { grid-column: 1 / -1; }
.pc-step.mini .pc-sb p { font-size: 13px; }
.pc-tfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.pc-tfoot .pc-dots { flex: 1 1 280px; }
.pc-tfoot .pc-focus { margin-left: auto; padding: 8px 14px; }
@media (orientation: landscape) and (max-height: 520px) {
  .pc-steps.mini { gap: 6px; } .pc-step.mini { padding: 6px 8px; } .pc-step.mini .pc-sb p { display: none; }
  .pc-step.mini .pc-tick { width: 34px; height: 34px; } .pc-step.mini .pc-sic { width: 38px; height: 38px; }
  .pc-ring { width: 46px; height: 46px; } .pc-ring b { width: 36px; height: 36px; font-size: 13px; }
}
.pc-tfoot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dots focus" "chips focus"; gap: 6px 14px; }
.pc-tfoot .pc-dots { grid-area: dots; } .pc-tfoot .pc-chips { grid-area: chips; } .pc-tfoot .pc-focus { grid-area: focus; align-self: center; margin: 0; }
.pc-home .pc-grid { grid-template-columns: repeat(3, 1fr); }
@media (orientation: landscape) and (max-height: 520px) {
  .pc-tfoot { grid-template-areas: "chips focus"; } .pc-tfoot .pc-dots { display: none; }
  .pc-home .pc-grid { grid-template-columns: repeat(6, 1fr); }
}
.pc-tfoot .pc-focus { padding-right: 56px; max-width: 260px; }

/* 故事書：翻頁閱讀器 */
.screen.sb { position: relative; max-width: none; height: 100dvh; padding: 0; overflow: hidden; display: flex; flex-direction: column; background: #fdf6ec; }
.sb .sb-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(18px) brightness(1.05) saturate(.9); opacity: .75; transition: background-image .4s; }
.sb > .bar { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.sb .sb-title { flex: 1; text-align: center; color: #5b21b6; font-size: clamp(18px, 3vh, 28px); text-shadow: 0 2px 0 #fff; }
.sb .sb-pn { padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .9); color: #7c3aed; font-weight: 900; }
.sb .sb-book { position: relative; z-index: 2; flex: 1; min-height: 0; margin: 0 clamp(40px, 6vw, 80px) 6px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-radius: 22px; background: #fffdf8; box-shadow: 0 0 0 8px #f3d9b1, 0 18px 40px rgba(60, 30, 10, .25); overflow: visible; touch-action: pan-y; perspective: 1600px; }
.sb .sb-book::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(53.5% - 8px); width: 16px; background: linear-gradient(90deg, transparent, rgba(120, 80, 40, .18), transparent); pointer-events: none; }
.sb .sb-page { position: relative; min-height: 0; display: flex; flex-direction: column; }
.sb .sb-l { padding: 14px; }
.sb .sb-pic { flex: 1; min-height: 0; width: 100%; object-fit: cover; border-radius: 14px; box-shadow: 0 6px 14px rgba(0, 0, 0, .12); cursor: pointer; }
.sb .sb-r { padding: clamp(14px, 3vh, 30px) clamp(16px, 2.6vw, 34px) 14px; gap: 10px; }
.sb .sb-text { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; justify-content: center; gap: .4em; font-size: clamp(20px, 4.4vh, 40px); line-height: 1.55; color: #2e2140; font-weight: 800; letter-spacing: .04em; }
.sb.en .sb-text { letter-spacing: 0; font-family: "Nunito", sans-serif; }
.sb .sb-text .ch { transition: color .15s, background .15s; border-radius: 6px; cursor: pointer; }
.sb .sb-text .ch.lit { color: #7c3aed; background: rgba(253, 224, 71, .45); }
.sb .sb-text .kw .ch, .sb .sb-text .ch.kw { color: #c026d3; border-bottom: 3px dotted rgba(192, 38, 211, .5); }
.sb .sb-text .kw .ch.lit, .sb .sb-text .ch.kw.lit { color: #7c3aed; }
.sb .sb-text .ch.tap { animation: knPop .3s; color: #f97316; }
.sb .sb-text .bk-s.on { background: none; }
.sb .sb-words { display: flex; flex-wrap: wrap; gap: 6px; }
.sb .sb-words .chip { font-size: clamp(12px, 2.2vh, 16px); }
.sb .sb-ctrl { display: flex; justify-content: center; }
.sb .sb-read { display: flex; align-items: center; gap: 8px; padding: 10px 22px; border: 0; border-radius: 99px; background: #7c3aed; color: #fff; font-weight: 900; font-size: clamp(14px, 2.6vh, 20px); box-shadow: 0 5px 0 #5b21b6, 0 8px 16px rgba(0, 0, 0, .2); }
.sb .sb-read svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.sb .sb-read.on { background: #f97316; box-shadow: 0 5px 0 #c2410c; animation: tlNext 1.2s ease-in-out infinite; }
.sb .sb-end { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: .4em; animation: tlPop .5s; }
.sb .sb-end b { color: #d97706; font-size: 1.1em; }
.sb .sb-arrow { position: absolute; top: 50%; z-index: 4; width: clamp(44px, 9vh, 64px); height: clamp(44px, 9vh, 64px); transform: translateY(-50%); border: 0; border-radius: 50%; background: #fff; color: #7c3aed; font-size: clamp(28px, 6vh, 44px); font-weight: 900; line-height: 1; box-shadow: 0 0 0 4px #ddd6fe, 0 6px 14px rgba(0, 0, 0, .2); }
.sb .sb-arrow.prev { left: calc(-1 * clamp(36px, 5vw, 60px)); } .sb .sb-arrow.next { right: calc(-1 * clamp(36px, 5vw, 60px)); animation: sbNudge 1.6s ease-in-out infinite; }
.sb .sb-arrow:disabled { opacity: .25; animation: none; }
.sb .sb-cc { position: absolute; z-index: 5; right: -2%; bottom: -4%; width: clamp(70px, 17vh, 150px); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .25)); pointer-events: none; }
.sb .sb-cc.hop { animation: shJump .55s ease-out; }
.sb .sb-dots { position: relative; z-index: 2; display: flex; justify-content: center; gap: 8px; padding: 6px 0 10px; }
.sb .sb-dots i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 2px #ddd6fe; cursor: pointer; display: block; }
.sb .sb-dots i.on { background: #7c3aed; transform: scale(1.3); } .sb .sb-dots i.done { background: #c4b5fd; }
.sb .sb-book.turn-r { animation: sbTurnR .55s ease-out; } .sb .sb-book.turn-l { animation: sbTurnL .55s ease-out; }
.sb .sb-book.turn-r .sb-r, .sb .sb-book.turn-l .sb-l { animation: sbPage .55s ease-out; transform-origin: left center; }
.sb .sb-book.turn-l .sb-l { transform-origin: right center; }
/* 問答 */
.sbq .sbq-wrap { position: relative; z-index: 2; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 0 clamp(16px, 4vw, 50px) 16px; }
.sbq .sbq-left { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.sbq .sbq-pic { flex: 1; min-height: 0; width: 100%; object-fit: cover; border-radius: 20px; box-shadow: 0 0 0 6px #fff, 0 12px 26px rgba(0, 0, 0, .22); }
.sbq .sbq-hint { margin: 0; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .92); color: #5b4a6b; font-weight: 800; font-size: clamp(12px, 2.2vh, 17px); line-height: 1.35; max-height: 0; overflow: hidden; opacity: 0; transition: .4s; }
.sbq .sbq-hint.show { max-height: 200px; opacity: 1; }
.sbq .sbq-right { display: flex; flex-direction: column; gap: 12px; justify-content: center; min-height: 0; }
.sbq .sbq-q { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 56px 12px 12px; border-radius: 20px; background: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .14); }
.sbq .sbq-q img { width: clamp(46px, 10vh, 80px); flex: none; }
.sbq .sbq-q b { color: #3b0764; font-size: clamp(16px, 3.4vh, 28px); line-height: 1.3; }
.sbq .kn-earb { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: clamp(30px, 5.4vh, 42px); height: clamp(30px, 5.4vh, 42px); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #7c3aed; color: #fff; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(0, 0, 0, .25); cursor: pointer; }
.sbq .kn-earb svg { width: 58%; height: 58%; fill: currentColor; pointer-events: none; }
.sbq .sbq-opts { display: flex; flex-direction: column; gap: 10px; }
.sbq .sbq-opt { position: relative; padding: 14px 58px 14px 18px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .96); color: #3b0764; text-align: left; font-size: clamp(15px, 3vh, 24px); box-shadow: 0 5px 0 #ddd6fe, 0 8px 14px rgba(0, 0, 0, .12); }
.sbq .sbq-opt.right { background: #dcfce7; box-shadow: 0 5px 0 #22c55e, 0 0 20px #86efac; }
.sbq .sbq-opt.wrong { opacity: .45; }
.sb-done .sb-res { position: relative; z-index: 2; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 40px; border-radius: 28px; background: rgba(255, 255, 255, .94); box-shadow: 0 16px 40px rgba(0, 0, 0, .2); }
.sb-done .sb-rcc { width: clamp(90px, 22vh, 170px); animation: shJump .6s ease-out 3; }
.sb-done h1 { margin: 0; color: #5b21b6; }
@keyframes sbNudge { 50% { transform: translateY(-50%) translateX(5px); } }
@keyframes sbTurnR { 0% { transform: rotateY(-6deg); } 100% { transform: none; } }
@keyframes sbTurnL { 0% { transform: rotateY(6deg); } 100% { transform: none; } }
@keyframes sbPage { 0% { transform: rotateY(-75deg); opacity: .3; } 100% { transform: none; opacity: 1; } }
@media (orientation: landscape) and (max-height: 520px) {
  .sb > .bar { padding: 4px 10px; }
  .sb .sb-book { margin: 0 50px 4px; }
  .sb .sb-l { padding: 8px; } .sb .sb-r { padding: 8px 14px; gap: 6px; }
  .sb .sb-text { font-size: clamp(16px, 5.2vh, 24px); line-height: 1.45; }
  .sb .sb-read { padding: 6px 14px; }
  .sb .sb-dots { padding: 2px 0 4px; } .sb .sb-dots i { width: 10px; height: 10px; }
  .sbq .sbq-opt { padding: 8px 48px 8px 12px; } .sbq .sbq-q { padding: 8px 50px 8px 8px; }
}
.screen.sb > .sb-book { width: auto !important; max-width: none !important; align-self: stretch; }
.screen.sb > .bar, .screen.sb > .sb-dots, .screen.sb > .sbq-wrap { width: auto !important; max-width: none !important; }
.sb .sb-l { justify-content: center; }
.sb .sb-pic { flex: none; height: auto; max-height: 100%; aspect-ratio: 1264 / 848; object-fit: cover; }
.sb .sb-pic[src*="/book-"] { aspect-ratio: auto; flex: 1; height: 100%; }
.sbq .sbq-pic { flex: none; height: auto; max-height: 100%; aspect-ratio: 1264 / 848; }
.sbq .sbq-left { justify-content: center; }
/* 平板（高畫面）：圖在上、字在下 */
@media (min-height: 700px) and (max-aspect-ratio: 3/2) {
  .sb .sb-book { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); }
  .sb .sb-book::after { display: none; }
  .sb .sb-l { padding: 14px 14px 0; align-items: center; } .sb .sb-pic { width: auto; max-width: 100%; height: 100%; }
  .sb .sb-r { padding: 10px 28px 14px; } .sb .sb-text { justify-content: flex-start; padding-top: 6px; }
  .sbq .sbq-wrap { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; } .sbq .sbq-pic { width: auto; max-width: 100%; height: 100%; align-self: center; }
}

/* 故事書封面（原本的圖） */
.sb .sb-cover { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 60px 20px 20px; background: rgba(253, 246, 236, .55); backdrop-filter: blur(6px); perspective: 1600px; }
.sb .sb-cv { position: relative; height: min(70vh, 640px); max-width: 92vw; aspect-ratio: 1264 / 848; border-radius: 10px 22px 22px 10px; overflow: hidden; box-shadow: -10px 0 0 #a16207, 0 0 0 6px #f3d9b1, 0 22px 44px rgba(60, 30, 10, .35); transform-origin: left center; transition: transform .6s ease-in, opacity .6s; animation: tlPop .6s cubic-bezier(.3, 1.4, .5, 1); }
.sb .sb-cv > img { width: 100%; height: 100%; object-fit: cover; }
.sb .sb-cvt { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; padding: 14px 16px; background: linear-gradient(transparent, rgba(40, 20, 70, .75)); color: #fff; }
.sb .sb-cvt b { font-size: clamp(24px, 6vh, 52px); text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.sb .sb-cvt small { font-weight: 800; opacity: .9; }
.sb .sb-cover.open .sb-cv { transform: rotateY(-100deg); opacity: 0; }
.sb .sb-cover.open { background: transparent; backdrop-filter: none; transition: background .6s; }
.sb .sb-cover.open .sb-open, .sb .sb-cover.open .sb-cvcc { opacity: 0; transition: opacity .3s; }
.sb .sb-open { animation: tlNext 1.2s ease-in-out infinite; }
.sb .sb-cvcc { position: absolute; right: 4%; bottom: 3%; width: clamp(70px, 17vh, 150px); animation: shJump .6s ease-out 2; }
@media (orientation: landscape) and (max-height: 520px) { .sb .sb-cover { padding: 50px 12px 10px; gap: 8px; } .sb .sb-cv { height: 62vh; } }
.sb .sb-cv { flex: none; }
@media (orientation: landscape) and (max-height: 520px) { .sb .sb-cv { height: calc(100dvh - 150px); } .sb .sb-cvcc { width: 70px; } }
@media (min-height: 521px) { .sb .sb-cv { height: min(calc(100dvh - 220px), 640px); } }
/* 六維評估：平面背景佔滿畫面 */
.screen.as-screen { max-width: none; min-height: 100dvh; background: #f5f0ff url(../img/scenes/assess-bg.webp) center / cover fixed; }
.screen.as-screen > * { max-width: 1000px; margin-left: auto; margin-right: auto; }
.as-screen .bubble.wide { background: rgba(255, 255, 255, .95); }
.as-dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.as-dim { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 20px; background: rgba(255, 255, 255, .94); border: 3px solid var(--c); box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 35%, transparent); }
.as-dim > b { color: #3b2a50; }
.as-rides { display: flex; gap: 4px; }
.as-rides i { width: clamp(34px, 6vh, 52px); height: clamp(34px, 6vh, 52px); display: block; }
.as-rides i img, .as-rides i .spr { width: 100%; height: 100%; object-fit: contain; }
@media (orientation: landscape) and (max-height: 520px) { .as-dims { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } .as-dim { padding: 6px 4px; } .as-dim > b { font-size: 11px; } .as-rides i { width: 26px; height: 26px; } }

.as-go { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.as-gob { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border: 2px solid #ddd6fe; border-radius: 99px; background: #fff; color: #5b21b6; font-weight: 800; font-size: 13px; cursor: pointer; }
.as-gob .spr, .as-gob img { width: 30px; height: 30px; object-fit: contain; }
@media (orientation: landscape) and (max-height: 520px) {
  .as-screen .mid-owl { display: none; }
  .as-screen .bubble.wide { font-size: 13px; padding: 8px 12px; }
  .as-screen.center { justify-content: flex-start; gap: 8px; }
}

/* ═════ 主頁新版面（lb2）：少啲掣、大冒險卡 ═════ */
.lobby.lb2 { display: flex; flex-direction: column; }
.lb2 .lb2-main { position: relative; z-index: 2; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 44%); gap: 3%; align-items: center; padding: 0 3%; }
.lb2 .lb-hero { position: relative; align-self: end; justify-self: center; }
.lb2 .lb2-right { display: flex; flex-direction: column; gap: 14px; }
.lb2 .lb2-adv { position: relative; display: grid; grid-template-columns: 38% 1fr auto; align-items: center; gap: 14px; padding: 12px; border: 0; border-radius: 30px; background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff; text-align: left; box-shadow: 0 8px 0 #5b21b6, 0 18px 30px rgba(91, 33, 182, .35); cursor: pointer; animation: lb2Float 3.2s ease-in-out infinite; }
.lb2 .lb2-advimg { aspect-ratio: 1.2; border-radius: 20px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7); }
.lb2 .lb2-advt small { display: block; opacity: .85; font-weight: 800; font-size: clamp(12px, 1.6vw, 16px); }
.lb2 .lb2-advt b { display: block; font-size: clamp(26px, 4vw, 44px); line-height: 1.05; text-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.lb2 .lb2-advt em { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 99px; background: rgba(255, 255, 255, .22); font-style: normal; font-weight: 800; font-size: clamp(12px, 1.5vw, 15px); }
.lb2 .lb2-play { width: clamp(46px, 6vw, 64px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #fde047; color: #7c2d12; box-shadow: 0 4px 0 #ca8a04; animation: tlNext 1.4s ease-in-out infinite; }
.lb2 .lb2-play svg { width: 55%; height: 55%; fill: currentColor; }
.lb2 .lb2-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; }
.lb2 .lb2-rand { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 0; border-radius: 24px; background: linear-gradient(135deg, #38bdf8, #2563eb); color: #fff; font-size: clamp(16px, 2.2vw, 24px); box-shadow: 0 6px 0 #1e40af; cursor: pointer; }
.lb2 .lb2-ri { width: clamp(40px, 5vw, 56px); }
.lb2 .lb2-mis { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 24px; background: rgba(255, 255, 255, .94); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.lb2 .lb2-mis > b { color: #5b21b6; font-size: 14px; writing-mode: horizontal-tb; white-space: nowrap; }
.lb2 .lb2-ms { display: flex; gap: 6px; flex: 1; }
.lb2 .lb2-m { position: relative; width: clamp(36px, 4.4vw, 50px); aspect-ratio: 1; display: block; border-radius: 14px; background: #f3e8ff; padding: 4px; font-style: normal; }
.lb2 .lb2-m .spr { width: 100%; height: 100%; object-fit: contain; }
.lb2 .lb2-m small { position: absolute; right: -4px; bottom: -6px; padding: 0 5px; border-radius: 99px; background: #fff; color: #7c3aed; font-weight: 900; font-size: 11px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.lb2 .lb2-m.ok { background: #dcfce7; } .lb2 .lb2-m em { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: #22c55e; color: #fff; display: grid; place-items: center; }
.lb2 .lb2-m em svg { width: 70%; height: 70%; }
.lb2 .lb2-mis .lb-chest { position: static; width: clamp(42px, 5vw, 58px); }
.lb2 .lb2-dock { position: relative; z-index: 2; display: flex; justify-content: center; gap: clamp(10px, 2vw, 22px); padding: 10px 16px max(12px, env(safe-area-inset-bottom)); }
.lb2 .lb2-dk { display: flex; flex-direction: column; align-items: center; gap: 2px; width: clamp(84px, 11vw, 128px); padding: 8px 6px 6px; border: 0; border-radius: 26px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 0 rgba(124, 58, 237, .25), 0 10px 20px rgba(0, 0, 0, .12); cursor: pointer; transition: transform .15s; }
.lb2 .lb2-dk:active { transform: scale(.94); }
.lb2 .lb2-dki { position: relative; width: 70%; aspect-ratio: 1; display: block; }
.lb2 .lb2-dki .spr { width: 100%; height: 100%; object-fit: contain; }
.lb2 .lb2-dk b { color: #4c1d95; font-size: clamp(12px, 1.5vw, 16px); white-space: nowrap; }
.lb2 .lb-top .icon[data-act="music"] { display: none; }
.lb-trial { display: flex; align-items: center; gap: 4px; padding: 5px 12px; border: 0; border-radius: 99px; background: #fdf4ff; color: #a21caf; font-weight: 800; font-size: 13px; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); cursor: pointer; }
.lb-trial.end { background: #fef3c7; color: #b45309; }
.lb-trial svg { width: 16px; height: 16px; }
@keyframes lb2Float { 50% { transform: translateY(-4px); } }
@media (orientation: landscape) and (max-height: 520px) {
  .lb2 .lb2-main { grid-template-columns: minmax(0, 1fr) minmax(300px, 52%); }
  .lb2 .lb2-adv { padding: 8px; border-radius: 22px; } .lb2 .lb2-advt b { font-size: 26px; }
  .lb2 .lb2-dock { padding: 4px 10px 6px; } .lb2 .lb2-dk { width: 82px; padding: 4px; border-radius: 18px; } .lb2 .lb2-dki { width: 56%; }
  .lb2 .lb-logo { display: none; }
}

/* ═════ 楚橋的小屋 ═════ */
.screen.hs { max-width: none; height: 100dvh; padding: 0; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(#f5ecff, #fde7f3); }
.hs-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.hs-top > b { color: #5b21b6; font-size: clamp(18px, 3vh, 26px); }
.hs-edit.on { background: #22c55e; color: #fff; }
.hs .hs-room { position: relative; flex: 1; min-height: 0; margin: 0 auto; aspect-ratio: 1264 / 848; max-width: calc(100% - 24px); border-radius: 26px; background: #ede0ff center / cover; box-shadow: 0 0 0 6px #fff, 0 14px 30px rgba(91, 33, 182, .2); overflow: hidden; }
.hs-slot { position: absolute; transform: translate(-50%, -100%); width: 11%; aspect-ratio: 1; border: 4px dashed rgba(124, 58, 237, .6); border-radius: 20px; background: rgba(255, 255, 255, .55); color: #7c3aed; font-size: clamp(22px, 4vw, 40px); font-weight: 900; cursor: pointer; animation: tlGlow 1.4s ease-in-out infinite; }
.hs-slot.wall { transform: translate(-50%, -50%); } .hs-slot.rug { transform: translate(-50%, -50%); width: 18%; aspect-ratio: 2.2; border-radius: 50%; }
.hs-item { position: absolute; width: var(--w); transform: translate(-50%, -100%); padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 100%; }
.hs-item.wall { transform: translate(-50%, -50%); transform-origin: 50% 50%; } .hs-item.rug { transform: translate(-50%, -60%); z-index: 0; }
.hs-item.floor { z-index: 2; }
.hs-item .spr { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 6px rgba(60, 20, 90, .2)); }
.hs-item.edit { outline: 3px dashed #a855f7; outline-offset: 4px; border-radius: 14px; }
.hs-item.boing { animation: hsBoing .5s; }
.hs-cabitems { position: absolute; left: 16%; right: 16%; top: 14%; bottom: 20%; display: grid; grid-template-columns: repeat(3, 1fr); align-content: space-around; gap: 2px; pointer-events: none; }
.hs-cabitems .spr { width: 100%; filter: none; }
.hs-cc { position: absolute; z-index: 4; width: 15%; transform: translate(-50%, -100%); transition: left .7s ease-in-out, top .7s ease-in-out; pointer-events: none; }
.hs-cc .hs-owl, .hs-cc img, .hs-cc svg { width: 100%; height: auto; display: block; }
.hs-cc.hop { animation: shJump .55s ease-out 2; }
.hs-say { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%) scale(0); width: max-content; max-width: 220px; padding: 6px 12px; border-radius: 16px; background: #fff; color: #4c1d95; font-weight: 900; font-size: clamp(12px, 1.8vw, 17px); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); transition: transform .25s; }
.hs-say.show { transform: translateX(-50%) scale(1); }
.hs-pet { position: absolute; z-index: 3; left: 64%; top: 88%; width: calc(9% * var(--s)); transform: translate(-50%, -100%); padding: 0; border: 0; background: none; cursor: pointer; }
.hs-pet .pet, .hs-pet img { width: 100%; height: auto; position: static !important; }
.hs-pet.boing { animation: hsBoing .5s; }
.hs-plv { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); padding: 0 6px; border-radius: 99px; background: #f59e0b; color: #fff; font-weight: 900; font-size: 11px; white-space: nowrap; }
.hs-tip { margin: 6px 0 0; text-align: center; color: #7c3aed; font-weight: 800; }
.hs-tabs { display: flex; justify-content: center; gap: clamp(6px, 1.4vw, 14px); padding: 8px 10px max(10px, env(safe-area-inset-bottom)); }
.hs-tab { position: relative; display: flex; flex-direction: column; align-items: center; width: clamp(72px, 10vw, 110px); padding: 6px 4px 4px; border: 0; border-radius: 20px; background: rgba(255, 255, 255, .85); cursor: pointer; }
.hs-tab .spr { width: 52%; aspect-ratio: 1; object-fit: contain; }
.hs-tab b { color: #4c1d95; font-size: clamp(11px, 1.4vw, 15px); }
.hs-tab.on { background: #7c3aed; box-shadow: 0 5px 0 #5b21b6; } .hs-tab.on b { color: #fff; }
.hs-bar { position: relative; display: block; height: 10px; border-radius: 99px; background: #ede9fe; overflow: hidden; }
.hs-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #a855f7, #ec4899); }
.hs-modal .hs-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 56vh; overflow: auto; padding: 4px; }
.hs-pi { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border: 2px solid #ede9fe; border-radius: 16px; background: #fff; cursor: pointer; }
.hs-pi .spr { width: 70px; height: 70px; object-fit: contain; }
.hs-pi b { color: #3b0764; font-size: 13px; } .hs-pi small { color: #7c3aed; font-weight: 800; font-size: 12px; display: flex; align-items: center; gap: 2px; }
.hs-pi small svg { width: 14px; height: 14px; }
.hs-pi.own { border-color: #86efac; } .hs-pi.used { opacity: .5; }
.hs-pnone { width: 70px; height: 70px; display: grid; place-items: center; color: #94a3b8; } .hs-pnone svg { width: 40px; }
.hs-petm { display: flex; flex-direction: column; align-items: center; gap: 6px; } .hs-petm .pet { position: static; width: 140px; height: auto; }
.hs-petm .hs-bar { width: 220px; }
.hs-heart { position: fixed; z-index: 9999; width: 28px; color: #ec4899; animation: hsHeart 1.4s ease-out forwards; pointer-events: none; }
.hs-heart svg { width: 100%; fill: currentColor; }
@keyframes hsBoing { 30% { transform: translate(-50%, -100%) scale(1.15, .88); } 60% { transform: translate(-50%, -100%) scale(.92, 1.1); } }
.hs-item.wall.boing { animation: hsBoingW .5s; }
@keyframes hsBoingW { 50% { transform: translate(-50%, -50%) scale(1.12); } }
@keyframes hsHeart { to { transform: translateY(-120px) scale(1.4); opacity: 0; } }
/* 扭蛋圖鑑 */
.hc-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 3%; padding: 0 3%; align-items: center; }
.hc-machine { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hc-machine .gacha { transform: scale(.9); }
.hc-machine .gacha.shake { animation: hcShake .15s linear 6; }
.hc-cap { position: absolute; left: 50%; bottom: 8%; width: 42px; height: 42px; margin-left: -21px; border-radius: 50%; background: linear-gradient(#f472b6 50%, #fff 50%); box-shadow: 0 0 0 3px #fff, 0 6px 10px rgba(0, 0, 0, .25); animation: hcDrop .6s ease-in; }
.hc-book { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 14px; border-radius: 26px; background: rgba(255, 255, 255, .92); box-shadow: 0 10px 24px rgba(91, 33, 182, .14); }
.hc-stabs { display: flex; gap: 6px; flex-wrap: wrap; }
.hc-st { padding: 6px 14px; border: 2px solid var(--c); border-radius: 99px; background: #fff; color: var(--c); font-weight: 900; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.hc-st svg { width: 14px; height: 14px; } .hc-st.on { background: var(--c); color: #fff; }
.hc-prog { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; } .hc-prog b { color: var(--c); font-size: 20px; } .hc-prog small { grid-column: 1 / -1; color: #6b5a80; font-weight: 700; }
.hc-prog .hs-bar i { background: var(--c); }
.hc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hc-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 0; border-radius: 18px; background: #f5f3ff; cursor: pointer; }
.hc-cell .spr { width: 80%; aspect-ratio: 1; object-fit: contain; filter: brightness(0) opacity(.18); }
.hc-cell.own .spr { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .18)); } .hc-cell.own { background: #fff; box-shadow: 0 0 0 3px #e9d5ff; }
.hc-cell b { color: #3b0764; font-size: 12px; } .hc-cell small { color: #a855f7; font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 2px; } .hc-cell small svg { width: 12px; }
.hc-x { position: absolute; top: 4px; right: 6px; padding: 0 5px; border-radius: 99px; background: #f59e0b; color: #fff; font-size: 11px; font-weight: 900; font-style: normal; }
.hc-lock { margin: 0; color: #b45309; font-weight: 800; font-size: 13px; display: flex; gap: 4px; align-items: center; } .hc-lock svg { width: 16px; }
.hc-big { width: 160px; height: 160px; object-fit: contain; }
.hc-show .spr { width: 180px; height: 180px; object-fit: contain; animation: tlPop .5s; }
.hc-open { position: relative; width: 190px; height: 190px; margin: 0 auto; display: grid; place-items: center; }
.hc-open .prize { animation: tlPop .6s .35s both; }
.hc-half { position: absolute; left: 30%; width: 40%; height: 20%; border-radius: 99px 99px 0 0; background: #f472b6; }
.hc-half.t { top: 30%; animation: hcTop .5s forwards; } .hc-half.b { top: 50%; border-radius: 0 0 99px 99px; background: #fff; box-shadow: 0 0 0 2px #fbcfe8; animation: hcBot .5s forwards; }
@keyframes hcShake { 50% { transform: scale(.9) rotate(4deg); } }
@keyframes hcDrop { from { transform: translateY(-40px); opacity: 0; } }
@keyframes hcTop { to { transform: translate(-60px, -60px) rotate(-60deg); opacity: 0; } }
@keyframes hcBot { to { transform: translate(60px, 60px) rotate(40deg); opacity: 0; } }
/* 成就牆 */
.ha-grid { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 4px 3% 8px; align-content: start; }
.ha-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px; border-radius: 24px; background: rgba(255, 255, 255, .94); box-shadow: 0 6px 16px rgba(91, 33, 182, .12); text-align: center; }
.ha-card.can { box-shadow: 0 0 0 4px #fde047, 0 6px 20px rgba(234, 179, 8, .35); animation: lb2Float 2s ease-in-out infinite; }
.ha-medals { display: flex; gap: 6px; } .ha-m { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #e5e7eb; color: #9ca3af; font-style: normal; }
.ha-m.got { background: var(--c); color: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); } .ha-m svg { width: 60%; height: 60%; fill: currentColor; }
.ha-ic .spr { width: 64px; height: 64px; object-fit: contain; }
.ha-card > b { color: #3b0764; } .ha-card small { color: #6b5a80; font-weight: 700; font-size: 12px; } .ha-card .hs-bar { width: 100%; }
.ha-claim { padding: 6px 12px; font-size: 13px; }
.ha-big { width: 120px; height: 120px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #fff; animation: tlPop .6s; box-shadow: 0 0 0 8px rgba(255, 255, 255, .8), 0 0 40px var(--c); }
.ha-big svg { width: 60%; height: 60%; }
/* 成長樹 */
.ht-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3%; padding: 0 3%; align-items: center; }
.ht-stage { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ht-svg { width: 100%; max-height: 82%; overflow: visible; }
.ht-grow { transform-origin: 200px 312px; transition: transform .8s cubic-bezier(.3, 1.4, .5, 1); }
.ht-br { cursor: pointer; } .ht-br ellipse { animation: tlBob 3s ease-in-out infinite; }
.ht-name { text-align: center; } .ht-name b { display: block; color: #15803d; font-size: clamp(18px, 3vh, 26px); } .ht-name small { color: #6b5a80; font-weight: 700; }
.ht-side { display: flex; flex-direction: column; gap: 8px; }
.ht-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .92); cursor: pointer; }
.ht-row b { color: #3b0764; } .ht-row .hs-bar i { background: var(--c); } .ht-row small { color: var(--c); font-weight: 900; }
.ht-tip { margin: 4px 0 0; color: #7c3aed; font-weight: 800; font-size: 13px; }
@media (orientation: landscape) and (max-height: 520px) {
  .hs-top { padding: 4px 10px; } .hs-tabs { padding: 4px 8px 6px; } .hs-tab { width: 70px; padding: 3px; } .hs-tab .spr { width: 40%; }
  .ha-grid { gap: 6px; } .ha-card { padding: 6px; gap: 3px; } .ha-ic .spr { width: 40px; height: 40px; } .ha-m { width: 22px; height: 22px; }
  .hc-grid { gap: 4px; } .hc-book { padding: 8px; gap: 4px; } .hc-machine .gacha { transform: scale(.6); margin: -30px 0; }
  .ht-row { padding: 4px 8px; }
}

/* 主頁修正：寶箱不重疊；手機打橫下面一排看得到 */
.lb2 .lb2-mis { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: center; }
.lb2 .lb2-mis > b { grid-column: 1 / -1; }
.lb2 .lb2-mis .lb-chest { position: static !important; transform: none !important; inset: auto !important; grid-column: 2; grid-row: 2; }
.lb2 .lb2-ms { grid-column: 1; grid-row: 2; }
.lb2 .lb-say { max-width: 260px; }
@media (orientation: landscape) and (max-height: 520px) {
  .lobby.lb2 { height: 100dvh; overflow: hidden; }
  .lb2 .lb2-main { align-items: center; padding-top: 2px; }
  .lb2 .lb-hero .lb-owl { max-height: 38vh; width: auto; }
  .lb2 .lb2-right { gap: 8px; } .lb2 .lb2-advimg { aspect-ratio: 1.35; }
  .lb2 .lb2-rand, .lb2 .lb2-mis { padding: 6px 10px; border-radius: 18px; } .lb2 .lb2-rand { font-size: 16px; }
  .lb2 .lb2-m { width: 32px; } .lb2 .lb2-mis .lb-chest { width: 38px; }
  .lb2 .lb2-dk b { font-size: 11px; }
}

.hs-item.rug { transform: translate(-50%, -100%); }
.hs-item.floor { z-index: 3; } .hs-cc { z-index: 5; }
.hs-item.rug .spr { transform: scaleY(.42); transform-origin: 50% 100%; }
.hs-item.rug { z-index: 1 !important; }

/* ═════ 楚橋的小屋：童話樂園風格，背景佔滿畫面 ═════ */
.screen.hs { position: relative; background: #f5ecff; isolation: isolate; }
.hs .hs-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(#f5ecff, #fde7f3) center / cover; }
.hs .hs-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(124, 58, 237, .18)); }
.hs .hs-motes { z-index: 0; pointer-events: none; }
.hs > * { position: relative; z-index: 1; }
.hs .hs-top { z-index: 6; }
.hs-ribbon { position: relative; padding: 6px 26px; border-radius: 10px; background: linear-gradient(#f472b6, #db2777); color: #fff !important; font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); box-shadow: 0 4px 0 #9d174d, 0 8px 16px rgba(0, 0, 0, .18); }
.hs-ribbon::before, .hs-ribbon::after { content: ''; position: absolute; top: 8px; width: 18px; height: 100%; background: #be185d; z-index: -1; }
.hs-ribbon::before { left: -12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); } .hs-ribbon::after { right: -12px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.hs .hs-top .icon, .hs .hs-top .pill, .hs .hs-top .gems { box-shadow: 0 3px 0 rgba(124, 58, 237, .3), 0 6px 14px rgba(0, 0, 0, .15); }
/* 童話糖果按鈕 */
.hs-tabs { position: relative; z-index: 6; }
.hs-tab { background: linear-gradient(#fff, #fdf2ff); border: 3px solid #fff; box-shadow: 0 0 0 3px #f9a8d4, 0 6px 0 #db2777, 0 10px 18px rgba(0, 0, 0, .15); }
.hs-tab.on { background: linear-gradient(#c084fc, #7c3aed); box-shadow: 0 0 0 3px #fde047, 0 6px 0 #5b21b6, 0 10px 18px rgba(0, 0, 0, .2); }
.hs-tab .spr { transition: transform .2s; } .hs-tab:hover .spr, .hs-tab.on .spr { transform: scale(1.12) rotate(-4deg); }
/* 小屋：房間盡量大，標題和按鈕浮在上面 */
.hs-house { display: block !important; }
.hs-house .hs-top { position: absolute; left: 0; right: 0; top: 0; }
.hs-house .hs-room { position: absolute !important; left: 50%; bottom: 0; transform: translateX(-50%); margin: 0; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: 0 0 60px rgba(124, 58, 237, .35); }
.hs-house .hs-tabs { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); padding: 0; gap: 8px; }
.hs-house .hs-tab { flex-direction: row; width: auto; gap: 4px; padding: 3px 12px 3px 4px; border-radius: 99px; }
.hs-house .hs-tab .spr { width: 34px; height: 34px; }
.hs-house .hs-tip { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 6; padding: 4px 14px; border-radius: 99px; background: rgba(255, 255, 255, .92); }
@media (orientation: landscape) and (max-height: 520px) {
  .hs-house .hs-tabs { top: 56px; left: auto; right: 8px; transform: none; flex-direction: column; }
  .hs-house .hs-tab { padding: 2px 10px 2px 2px; } .hs-house .hs-tab .spr { width: 28px; height: 28px; } .hs-house .hs-tab b { font-size: 11px; }
}
/* 其他頁：卡片加金邊和閃光 */
.hc-book, .ha-card, .ht-row, .hc-machine .btn + .pill { backdrop-filter: blur(2px); }
.hc-book { background: rgba(255, 255, 255, .88); border: 4px solid #fff; box-shadow: 0 0 0 4px #f9a8d4, 0 14px 30px rgba(124, 58, 237, .25); }
.ha-card { background: rgba(255, 255, 255, .9); border: 3px solid #fde68a; }
.ha-card::before { content: '✦'; position: absolute; top: 8px; left: 10px; color: #f59e0b; font-size: 14px; animation: tlGlow 1.6s ease-in-out infinite; }
.hc-machine { padding: 14px; border-radius: 30px; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 4px rgba(255, 255, 255, .8); }
.ht-stage { border-radius: 30px; }
.ht-name { padding: 6px 18px; border-radius: 99px; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.ht-row { background: rgba(255, 255, 255, .9); border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .08); }
.ht-tip { padding: 6px 12px; border-radius: 14px; background: rgba(255, 255, 255, .85); }

/* ═════ 主頁（童話樂園）═════ */
.lobby.lb3 { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.lb3 .lb-top .icon[data-act="music"] { display: grid; }
.lb3 .lb3-main { position: relative; z-index: 2; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 2%; align-items: center; padding: 0 3%; }
.lb3 .lb3-hero { position: relative; align-self: end; justify-self: center; display: flex; flex-direction: column; align-items: center; }
.lb3 .lb3-hero .lb-owl { position: relative; z-index: 2; max-height: min(44vh, 380px); width: auto; }
.lb3 .lb3-stage { position: absolute; bottom: -4%; left: 50%; width: 120%; height: 18%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(253, 224, 71, .35) 60%, transparent); filter: blur(2px); animation: lb3Glow 2.6s ease-in-out infinite; }
.lb3 .lb-say { max-width: 280px; }
.lb3 .lb3-right { display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 18px); width: 100%; max-width: 900px; justify-self: center; }
/* 冒險門：金框、世界圖、閃光掃過 */
.lb3 .lb3-adv { display: block; padding: 0; border: 0; background: none; cursor: pointer; animation: lb2Float 3.4s ease-in-out infinite; }
.lb3 .lb3-frame { position: relative; display: block; aspect-ratio: 2.05; max-height: calc(100dvh - 330px); min-height: 130px; border-radius: 36px; background: linear-gradient(135deg, #fef3c7, #fbbf24 30%, #fff7d6 50%, #f59e0b 72%, #fde68a); box-shadow: 0 8px 0 #b45309, 0 22px 40px rgba(91, 33, 182, .38); }
.lb3 .lb3-img { position: absolute; inset: 8px; overflow: hidden; border-radius: 29px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7); }
.lb3 .lb3-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%); transform: translateX(-120%); animation: lb3Shine 3.8s ease-in-out infinite; }
.lb3 .lb3-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(76, 29, 149, .78)); }
.lb3 .lb3-chip { position: absolute; z-index: 2; top: 18px; left: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .94); color: #6d28d9; font-weight: 900; font-size: clamp(12px, 1.5vw, 17px); box-shadow: 0 3px 0 rgba(109, 40, 217, .3); }
.lb3 .lb3-chip svg { width: 1.1em; height: 1.1em; color: #ec4899; }
.lb3 .lb3-advt { position: absolute; z-index: 2; left: 26px; bottom: 18px; }
.lb3 .lb3-advt b { display: block; color: #fff; font-size: clamp(30px, 4.8vw, 64px); font-weight: 900; line-height: 1; letter-spacing: .04em; -webkit-text-stroke: 1.5px #5b21b6; paint-order: stroke fill; text-shadow: 0 4px 0 #5b21b6, 0 8px 18px rgba(0, 0, 0, .35); }
.lb3 .lb3-play { position: absolute; z-index: 3; right: 20px; bottom: 16px; width: clamp(56px, 7vw, 92px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fef9c3, #facc15 45%, #eab308); color: #9a3412; border: 4px solid #fff; box-shadow: 0 5px 0 #a16207, 0 0 0 8px rgba(253, 224, 71, .35); animation: lb3Pulse 1.4s ease-in-out infinite; }
.lb3 .lb3-play svg { width: 50%; height: 50%; fill: currentColor; margin-left: 8%; }
.lb3 .lb3-sp { position: absolute; z-index: 3; width: 16px; height: 16px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px #fde047); animation: lb3Twinkle 2s ease-in-out infinite; animation-delay: calc(var(--k) * -.35s); }
.lb3 .lb3-sp:nth-of-type(1) { top: -6px; left: 12%; } .lb3 .lb3-sp:nth-of-type(2) { top: -8px; right: 26%; width: 22px; height: 22px; } .lb3 .lb3-sp:nth-of-type(3) { top: 40%; right: -8px; }
.lb3 .lb3-sp:nth-of-type(4) { bottom: -8px; left: 40%; width: 20px; height: 20px; } .lb3 .lb3-sp:nth-of-type(5) { top: 30%; left: -8px; } .lb3 .lb3-sp:nth-of-type(6) { bottom: 30%; right: 18%; width: 12px; height: 12px; }
/* 下面一排：隨機玩、六維評估、今日任務 */
.lb3 .lb3-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(8px, 1.2vw, 14px); }
.lb3 .lb3-at { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 6px; border: 3px solid rgba(255, 255, 255, .9); border-radius: 26px; background: linear-gradient(160deg, var(--c), var(--d)); color: #fff; text-align: left; box-shadow: 0 6px 0 var(--e), 0 12px 20px rgba(0, 0, 0, .16); cursor: pointer; transition: transform .15s; }
.lb3 .lb3-at::before { content: ''; position: absolute; top: 4px; left: 14px; right: 14px; height: 36%; border-radius: 18px; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); pointer-events: none; }
.lb3 .lb3-at:active, .lb3 .lb3-bth:active { transform: translateY(3px) scale(.97); }
.lb3 .lb3-at .spr { flex: none; width: clamp(42px, 5.4vw, 72px); height: auto; aspect-ratio: 1; object-fit: contain; margin: -14px 0 -6px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .2)); animation: lb3Bob 2.4s ease-in-out infinite; }
.lb3 .lb3-at:nth-child(2) .spr { animation-delay: -1.2s; }
.lb3 .lb3-at b { display: block; font-size: clamp(16px, 2.1vw, 26px); font-weight: 900; line-height: 1.1; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); white-space: nowrap; }
.lb3 .lb3-at small { display: block; font-size: clamp(11px, 1.2vw, 14px); font-weight: 800; opacity: .95; white-space: nowrap; }
.lb3 .lb3-at.due { animation: tlNext 1.4s ease-in-out infinite; } .lb3 .lb3-at > .lb-dot { top: -4px; right: -4px; }
.lb3 .lb3-mis { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; padding: 6px 10px; border: 3px solid #fde68a; border-radius: 26px; background: rgba(255, 255, 255, .95); box-shadow: 0 6px 0 #f59e0b, 0 12px 20px rgba(0, 0, 0, .14); }
.lb3 .lb3-mis > b { grid-column: 1 / -1; color: #b45309; font-size: clamp(12px, 1.3vw, 15px); font-weight: 900; }
.lb3 .lb3-ms { display: flex; gap: 6px; }
.lb3 .lb3-m { position: relative; width: clamp(32px, 4vw, 48px); aspect-ratio: 1; display: block; padding: 3px; border-radius: 14px; background: #fef3c7; font-style: normal; }
.lb3 .lb3-m .spr { width: 100%; height: 100%; object-fit: contain; }
.lb3 .lb3-m small { position: absolute; right: -5px; bottom: -6px; padding: 0 5px; border-radius: 99px; background: #fff; color: #b45309; font-weight: 900; font-size: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.lb3 .lb3-m.ok { background: #dcfce7; } .lb3 .lb3-m em { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: #22c55e; color: #fff; display: grid; place-items: center; } .lb3 .lb3-m em svg { width: 70%; height: 70%; }
.lb3 .lb3-mis .lb-chest { position: static !important; transform: none !important; inset: auto !important; grid-column: 2; grid-row: 2; width: clamp(40px, 5vw, 60px); }
/* 底部：嘉年華攤位按鈕（條紋帳篷頂） */
.lb3 .lb3-dock { position: relative; z-index: 2; display: flex; justify-content: center; gap: clamp(14px, 2.4vw, 30px); padding: 22px 16px max(12px, env(safe-area-inset-bottom)); }
.lb3 .lb3-bth { position: relative; display: flex; flex-direction: column; align-items: center; width: clamp(92px, 11.5vw, 150px); padding: 20px 6px 6px; border: 4px solid var(--c); border-top: 0; border-radius: 10px 10px 24px 24px; background: linear-gradient(#fff, #fff7fb); box-shadow: 0 6px 0 var(--d), 0 12px 22px rgba(0, 0, 0, .18); cursor: pointer; transition: transform .15s; }
.lb3 .lb3-awn { position: absolute; left: -10px; right: -10px; top: -16px; height: 28px; border-radius: 14px 14px 4px 4px; background: repeating-linear-gradient(90deg, var(--c) 0 16px, #fff 16px 32px); box-shadow: 0 3px 0 rgba(0, 0, 0, .1), inset 0 -3px 0 rgba(0, 0, 0, .06); }
.lb3 .lb3-awn::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 9px; background: radial-gradient(circle at 8px 0, var(--c) 7px, transparent 7.5px) 0 0 / 32px 9px repeat-x, radial-gradient(circle at 8px 0, #fde7f3 7px, transparent 7.5px) 16px 0 / 32px 9px repeat-x; }
.lb3 .lb3-awn::before { content: ''; position: absolute; left: 50%; top: -12px; width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--c)); box-shadow: 0 2px 0 var(--d); }
.lb3 .lb3-bi { position: relative; width: 74%; aspect-ratio: 1; display: block; margin-top: 2px; }
.lb3 .lb3-bi .spr { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .15)); transition: transform .2s; }
.lb3 .lb3-bth:hover .lb3-bi .spr { transform: scale(1.1) rotate(-5deg); }
.lb3 .lb3-bth b { margin-top: 2px; padding: 2px 10px; border-radius: 99px; background: var(--c); color: #fff; font-size: clamp(12px, 1.5vw, 17px); font-weight: 900; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
@keyframes lb3Shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes lb3Pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes lb3Twinkle { 0%, 100% { opacity: .2; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } }
@keyframes lb3Bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes lb3Glow { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@media (orientation: landscape) and (max-height: 520px) {
  .lb3 .lb3-main { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
  .lb3 .lb3-hero .lb-owl { max-height: 36vh; } .lb3 .lb-say { font-size: 12px; max-width: 200px; padding: 6px 10px; }
  .lb3 .lb3-frame { max-height: calc(100dvh - 226px); min-height: 110px; border-radius: 24px; } .lb3 .lb3-img { inset: 5px; border-radius: 20px; }
  .lb3 .lb3-chip { top: 8px; left: 12px; font-size: 11px; padding: 2px 10px 2px 8px; } .lb3 .lb3-advt { left: 14px; bottom: 8px; } .lb3 .lb3-advt b { font-size: 28px; }
  .lb3 .lb3-play { right: 12px; bottom: 10px; width: 50px; border-width: 3px; }
  .lb3 .lb3-right { gap: 8px; } .lb3 .lb3-at { padding: 4px 8px 4px 4px; border-radius: 18px; } .lb3 .lb3-at .spr { width: 36px; margin: -8px 0 -4px; }
  .lb3 .lb3-at b { font-size: 15px; } .lb3 .lb3-at small { font-size: 10px; }
  .lb3 .lb3-mis { padding: 3px 8px; border-radius: 18px; } .lb3 .lb3-mis > b { font-size: 11px; } .lb3 .lb3-m { width: 28px; border-radius: 10px; } .lb3 .lb3-mis .lb-chest { width: 34px; }
  .lb3 .lb3-dock { padding: 16px 10px 6px; gap: 16px; } .lb3 .lb3-bth { width: 84px; padding: 12px 4px 4px; } .lb3 .lb3-bi { width: 50%; } .lb3 .lb3-bth b { font-size: 11px; padding: 1px 8px; }
  .lb3 .lb3-awn { top: -12px; height: 20px; }
}
/* 主頁修正：背景佔滿闊屏；冒險門按可用高度縮放；英文字可換行 */
.lobby.lb3 { max-width: none; width: 100%; margin: 0; gap: 0; }
.lb3 .lb3-main { padding-top: 6px; padding-bottom: 6px; }
.lb3 .lb3-right { height: 100%; min-height: 0; justify-content: center; }
.lb3 .lb3-adv { flex: 0 1 auto; min-height: 0; display: flex; }
.lb3 .lb3-frame { width: 100%; height: 100%; max-height: none; min-height: 0; }
.lb3 .lb3-row { flex: none; }
.lb3 .lb3-at { min-width: 0; } .lb3 .lb3-at > span { min-width: 0; }
.lb3 .lb3-at b { white-space: normal; font-size: clamp(15px, 1.8vw, 24px); line-height: 1.05; }
.lb3 .lb3-at small { white-space: normal; line-height: 1.1; }
@media (orientation: landscape) and (max-height: 520px) {
  .lb3 .lb-top { padding-top: 4px; } .lb3 .lb3-main { padding-top: 2px; padding-bottom: 2px; }
  .lb3 .lb3-frame { max-height: none; min-height: 0; }
  .lb3 .lb3-dock { padding: 12px 10px 4px; } .lb3 .lb3-bth { width: 80px; padding: 9px 4px 3px; border-width: 3px; } .lb3 .lb3-bi { width: 42%; margin-top: 0; }
  .lb3 .lb3-at b { font-size: 13px; }
}
.lb3 .lb3-main { grid-template-rows: minmax(0, 1fr); }
.lb3 .lb3-hero { max-height: 100%; }
.lb3 .lb3-at small { color: #fff; opacity: .92; }
@media (orientation: landscape) and (max-height: 520px) {
  .lb3 .lb3-at small { display: none; } .lb3 .lb3-at b { white-space: nowrap; font-size: 14px; } .lb3 .lb3-at { padding: 6px 8px 6px 4px; }
  .lb3 .lb3-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .lb3 .lb3-bth { width: 88px; padding-top: 10px; } .lb3 .lb3-bi { width: 52%; }
}

.pc-miss { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 14px; border-radius: 22px; background: linear-gradient(135deg, #fef9c3, #fde68a); border: 3px solid #fff; box-shadow: 0 0 0 3px #fbbf24, 0 8px 18px rgba(0, 0, 0, .1); }
.pc-miss.warn { background: linear-gradient(135deg, #ffe4e6, #fecdd3); box-shadow: 0 0 0 3px #fb7185, 0 8px 18px rgba(0, 0, 0, .1); }
.pc-miss .pc-miss-owl { flex: none; width: 60px; height: auto; }
.pc-miss p { flex: 1; margin: 0; color: #4c1d95; font-weight: 800; font-size: clamp(14px, 1.7vw, 18px); line-height: 1.35; }
.pc-miss .btn { flex: none; }

/* ═════ 主頁楚橋：更亮、更有角色感 ═════ */
.lb3 .lb3-hero { isolation: isolate; }
.lb3 .lb3-hero .lb-owl { max-height: min(50vh, 430px); filter: brightness(1.08) saturate(1.18) contrast(1.04) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 22px rgba(255, 236, 170, .9)) drop-shadow(0 16px 14px rgba(76, 29, 149, .3)); }
.lb3 .lb3-halo { position: absolute; z-index: -2; left: 50%; bottom: 8%; width: 130%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 246, 200, .75) 35%, rgba(255, 214, 120, .35) 60%, transparent); animation: lb3Halo 3s ease-in-out infinite; pointer-events: none; }
.lb3 .lb3-beam { position: absolute; z-index: -3; left: 50%; bottom: 14%; width: 170%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .55) 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(closest-side, #000 25%, transparent); mask: radial-gradient(closest-side, #000 25%, transparent); animation: lb3Spin 24s linear infinite; pointer-events: none; }
.lb3 .lb3-stage { bottom: 3%; width: 95%; height: 13%; background: radial-gradient(closest-side, #fff, #fde68a 55%, rgba(251, 191, 36, .5) 80%, transparent); filter: none; box-shadow: 0 0 30px rgba(253, 224, 71, .6); }
.lb3 .lb3-orbit { position: absolute; z-index: 3; left: 50%; top: 52%; width: 0; height: 0; pointer-events: none; }
.lb3 .lb3-orbit i { position: absolute; width: 18px; height: 18px; margin: -9px; background: #fde047; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 6px #fff); animation: lb3Orbit 6s linear infinite; animation-delay: calc(var(--k) * -1.2s); }
.lb3 .lb3-orbit i:nth-child(even) { background: #f9a8d4; width: 13px; height: 13px; margin: -6px; }
.lb3 .lb3-name { position: relative; z-index: 4; display: inline-flex; align-items: baseline; gap: 6px; margin-top: -6px; padding: 4px 18px 5px; border-radius: 99px; background: linear-gradient(#fb7185, #db2777); border: 3px solid #fff; color: #fff; box-shadow: 0 4px 0 #9d174d, 0 0 0 3px #fbbf24, 0 10px 20px rgba(0, 0, 0, .2); white-space: nowrap; animation: lb3Name 3s ease-in-out infinite; }
.lb3 .lb3-name b { font-size: clamp(16px, 2vw, 24px); font-weight: 900; letter-spacing: .1em; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.lb3 .lb3-name small { font-size: clamp(10px, 1.1vw, 13px); font-weight: 900; letter-spacing: .18em; color: #fde68a; }
.lb3 .lb-say { position: relative; z-index: 4; padding: 14px 18px 12px; border: 3px solid #fff; background: linear-gradient(#fff, #fdf4ff); color: #4c1d95; font-weight: 800; font-size: clamp(14px, 1.6vw, 19px); box-shadow: 0 0 0 3px #c4b5fd, 0 10px 22px rgba(91, 33, 182, .25); animation: lb3Say .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.lb3 .lb3-who { position: absolute; top: -13px; left: 14px; padding: 1px 10px; border-radius: 99px; background: #7c3aed; color: #fff; font-style: normal; font-size: 12px; font-weight: 900; letter-spacing: .08em; box-shadow: 0 2px 0 #5b21b6; }
.lb3 .lb3-pop { position: absolute; z-index: 5; left: 50%; top: 45%; pointer-events: none; }
.lb3 .lb3-pop i { position: absolute; color: #fde047; font-style: normal; font-size: 22px; text-shadow: 0 0 8px #fff; animation: lb3Pop .9s ease-out forwards; transform: rotate(var(--a)) translateY(0); }
.lb3 .lb3-pop i:nth-child(3n + 1) { color: #f472b6; font-size: 26px; }
.lb3 .lb-pet { z-index: 4; filter: brightness(1.06) drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px rgba(255, 236, 170, .8)); }
@keyframes lb3Halo { 0%, 100% { opacity: .85; transform: translateX(-50%) scale(.96); } 50% { opacity: 1; transform: translateX(-50%) scale(1.04); } }
@keyframes lb3Spin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes lb3Orbit { 0% { transform: rotate(0deg) translateX(clamp(90px, 13vw, 170px)) scaleY(.5) rotate(0deg); opacity: 1; } 50% { opacity: .3; } 100% { transform: rotate(360deg) translateX(clamp(90px, 13vw, 170px)) scaleY(.5) rotate(-360deg); opacity: 1; } }
@keyframes lb3Name { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-3px) rotate(1.5deg); } }
@keyframes lb3Say { from { transform: scale(.6) translateY(10px); opacity: 0; } }
@keyframes lb3Pop { from { transform: rotate(var(--a)) translateY(0) scale(.4); opacity: 1; } to { transform: rotate(var(--a)) translateY(-120px) scale(1.2); opacity: 0; } }
@media (orientation: landscape) and (max-height: 520px) {
  .lb3 .lb3-hero .lb-owl { max-height: 40vh; } .lb3 .lb3-name { padding: 2px 12px 3px; margin-top: -4px; } .lb3 .lb3-name b { font-size: 14px; } .lb3 .lb3-name small { display: none; }
  .lb3 .lb-say { padding: 10px 10px 6px; font-size: 12px; } .lb3 .lb3-who { top: -10px; font-size: 10px; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) { .lb3 .lb3-beam, .lb3 .lb3-orbit i, .lb3 .lb3-halo, .lb3 .lb3-name { animation: none !important; } }
/* 底部攤位不要碰到上面一排 */
.lb3 .lb3-dock { margin-top: 10px; }
.lobby.lb3 .lb3-hero .lb-owl { width: min(28vw, 44vh, 400px) !important; max-height: none; }
@media (orientation: landscape) and (max-height: 520px) {
  .lobby.lb3 .lb3-hero .lb-owl { width: min(20vw, 30vh) !important; }
  .lb3 .lb-say { max-width: 190px; line-height: 1.25; }
}

/* ═════ 夢幻扭蛋機 ═════ */
.hc-machine { background: linear-gradient(rgba(255, 255, 255, .75), rgba(253, 242, 248, .65)); border: 3px solid #fff; box-shadow: 0 0 0 3px #f9a8d4, 0 14px 32px rgba(168, 85, 247, .28); }
.hd { position: relative; flex: none; width: 240px; height: 350px; }
.hd > * { position: absolute; left: 50%; transform: translateX(-50%); }
.hd > .hd-glow { top: -24px; bottom: -24px; left: -30px; right: -30px; transform: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(244, 114, 182, .3) 55%, rgba(167, 139, 250, .15) 75%, transparent); animation: hdGlow 3s ease-in-out infinite; }
.hd-top { top: 6px; z-index: 3; width: 112px; height: 34px; border-radius: 60px 60px 12px 12px; background: linear-gradient(#fbcfe8, #ec4899); border: 3px solid #fff; box-shadow: 0 0 0 2px #f9a8d4, inset 0 -5px 0 rgba(157, 23, 77, .2); }
.hd-star { position: absolute; left: 50%; top: -30px; width: 40px; height: 40px; margin-left: -20px; background: linear-gradient(#fef9c3, #facc15 60%, #f59e0b); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 0 6px #fff); animation: hdStar 2.4s ease-in-out infinite; }
.hd-dome { top: 30px; z-index: 2; width: 206px; height: 186px; overflow: hidden; border-radius: 50% 50% 44% 44%; border: 5px solid #fff; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .95), rgba(237, 233, 254, .75) 38%, rgba(221, 214, 254, .6) 70%, rgba(196, 181, 253, .7)); box-shadow: inset 0 -14px 26px rgba(167, 139, 250, .4), 0 0 0 3px #f5d0fe, 0 12px 30px rgba(168, 85, 247, .3); }
.hd-cap { position: absolute; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(var(--c) 50%, #fff 50%); box-shadow: inset -4px -6px 0 rgba(0, 0, 0, .07), 0 0 0 2px rgba(255, 255, 255, .95), 0 3px 6px rgba(124, 58, 237, .2); transform: rotate(var(--r)); animation: hdFloat 3.2s ease-in-out infinite; animation-delay: calc(var(--k) * -.4s); }
.hd-cap::after { content: ''; position: absolute; top: 7px; left: 10px; width: 12px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .85); transform: rotate(-25deg); }
.hd-shine { position: absolute; top: 14px; left: 24px; width: 36px; height: 86px; border-radius: 50%; background: linear-gradient(rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); transform: rotate(24deg); }
.hd-tw { position: absolute; color: #fff; font-size: 16px; text-shadow: 0 0 6px #f0abfc; animation: lb3Twinkle 2s ease-in-out infinite; animation-delay: calc(var(--k) * -.5s); }
.hd-tw:nth-of-type(1) { top: 20px; right: 40px; } .hd-tw:nth-of-type(2) { top: 60px; left: 14px; font-size: 12px; } .hd-tw:nth-of-type(3) { top: 34px; left: 120px; font-size: 10px; } .hd-tw:nth-of-type(4) { top: 96px; right: 14px; }
.hd-neck { top: 208px; z-index: 3; width: 172px; height: 18px; border-radius: 10px; background: linear-gradient(#fef3c7, #fbbf24 60%, #d97706); border: 2px solid #fff; box-shadow: 0 2px 0 rgba(180, 83, 9, .4); }
.hd-body { top: 222px; z-index: 2; width: 202px; height: 104px; border-radius: 16px 16px 30px 30px; border: 4px solid #fff; background: radial-gradient(rgba(255, 255, 255, .55) 2px, transparent 2.6px) 0 0 / 14px 14px, linear-gradient(160deg, #fbcfe8, #f5d0fe 50%, #c4b5fd); box-shadow: 0 0 0 3px #f0abfc, 0 8px 0 #a78bfa, 0 16px 28px rgba(124, 58, 237, .3); }
.hd-label { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 2px 12px; border-radius: 99px; background: #fff; color: #db2777; font-size: 12px; font-weight: 900; white-space: nowrap; box-shadow: 0 0 0 2px #f9a8d4; }
.hd-bulbs { position: absolute; top: 12px; left: 16px; right: 16px; display: flex; justify-content: space-between; }
.hd-bulbs i { width: 9px; height: 9px; border-radius: 50%; background: #fde047; box-shadow: 0 0 6px #fde047; animation: hdBulb 1.2s steps(1) infinite; animation-delay: calc(var(--k) * -.3s); }
.hd-bulbs i:nth-child(even) { background: #f472b6; box-shadow: 0 0 6px #f472b6; }
.hd-knob { position: absolute; left: 22px; top: 32px; width: 60px; height: 60px; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 35% 30%, #fffbeb, #fcd34d 45%, #f59e0b); box-shadow: 0 4px 0 #b45309, 0 0 14px rgba(253, 224, 71, .7); }
.hd-knob::before { content: ''; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 12px; margin-left: -6px; border-radius: 6px; background: linear-gradient(90deg, #fff, #fef3c7); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.hd-knob::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; background: #f472b6; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.hd-door { position: absolute; right: 20px; top: 30px; width: 72px; height: 62px; border-radius: 36px 36px 12px 12px; border: 4px solid #fff; background: radial-gradient(circle at 50% 85%, #fff, #fdf4ff 30%, #c084fc 95%); box-shadow: 0 0 0 3px #f472b6, 0 0 0 6px #fde68a, 0 0 0 9px #a7f3d0, inset 0 -8px 14px rgba(124, 58, 237, .45); animation: hdDoor 2s ease-in-out infinite; }
.hd-base { bottom: 0; z-index: 1; width: 236px; height: 30px; border-radius: 99px; background: #fff; box-shadow: 0 6px 0 #e9d5ff, 0 10px 20px rgba(124, 58, 237, .2); }
.hd-base::before, .hd-base::after { content: ''; position: absolute; bottom: 10px; width: 64px; height: 44px; border-radius: 50%; background: #fff; }
.hd-base::before { left: -6px; } .hd-base::after { right: -6px; }
.hd > .hc-cap { left: auto; right: 35px; bottom: 36px; margin: 0; transform: none; z-index: 4; background: linear-gradient(#f9a8d4 50%, #fff 50%); }
.hd.spin .hd-knob { animation: hdKnob 1.1s ease-in-out; }
.hd.shake { animation: hcShake .15s linear 6; }
.hd.shake .hd-cap { animation: hdJiggle .2s linear 5; }
.hd-go { animation: tlNext 1.6s ease-in-out infinite; }
.hd-wait { padding: 10px 20px; border-radius: 99px; background: linear-gradient(#ede9fe, #e0e7ff); color: #6d28d9; font-weight: 900; font-size: 15px; box-shadow: 0 0 0 3px #fff, 0 4px 0 #c4b5fd; }
.hd-wait::before { content: '☾ '; color: #f59e0b; }
@keyframes hdGlow { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes hdFloat { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(calc(var(--r) + 8deg)) translateY(-5px); } }
@keyframes hdJiggle { 0%, 100% { transform: rotate(var(--r)) translate(0, 0); } 25% { transform: rotate(calc(var(--r) + 25deg)) translate(4px, -12px); } 75% { transform: rotate(calc(var(--r) - 25deg)) translate(-4px, -6px); } }
@keyframes hdStar { 0%, 100% { transform: scale(1) rotate(-8deg); } 50% { transform: scale(1.15) rotate(8deg); } }
@keyframes hdBulb { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes hdDoor { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
@keyframes hdKnob { to { transform: rotate(720deg); } }
@media (orientation: landscape) and (max-height: 520px) {
  .hc-machine .hd { transform: scale(.58); margin: -74px -50px; } .hd-wait { font-size: 12px; padding: 6px 12px; }
}

/* ═════ 成就牆：色彩繽紛 ═════ */
.ha-card { overflow: visible; border: 4px solid #fff; background: radial-gradient(rgba(255, 255, 255, .45) 2px, transparent 2.6px) 0 0 / 14px 14px, linear-gradient(180deg, var(--a), var(--b)) 0 0 / 100% 46% no-repeat, #fff; box-shadow: 0 0 0 3px var(--b), 0 7px 0 var(--d), 0 12px 22px rgba(0, 0, 0, .18); }
.ha-card::before { color: #fff; text-shadow: 0 0 6px rgba(255, 255, 255, .9); }
.ha-card::after { content: '✦'; position: absolute; top: 10px; right: 12px; color: #fff; font-size: 11px; animation: lb3Twinkle 2s ease-in-out infinite; }
.ha-card.can { box-shadow: 0 0 0 3px var(--b), 0 0 0 7px #fde047, 0 7px 0 7px var(--d), 0 12px 26px rgba(234, 179, 8, .45); }
.ha-card.max { background: radial-gradient(rgba(255, 255, 255, .45) 2px, transparent 2.6px) 0 0 / 14px 14px, linear-gradient(180deg, #fef3c7, #f59e0b) 0 0 / 100% 46% no-repeat, #fffbeb; }
.ha-m { background: rgba(255, 255, 255, .55); color: rgba(255, 255, 255, .95); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); }
.ha-m.got { color: #fff; border: 2px solid #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .2), 0 0 10px rgba(255, 255, 255, .8); }
.ha-m.got.t0 { background: radial-gradient(circle at 35% 30%, #fde0c5, #cd7f32 60%, #8b4513); }
.ha-m.got.t1 { background: radial-gradient(circle at 35% 30%, #fff, #c0c8d2 55%, #7b8794); }
.ha-m.got.t2 { background: radial-gradient(circle at 35% 30%, #fffbe6, #fbbf24 55%, #b45309); }
.ha-ic { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #fff 60%, var(--a)); border: 4px solid #fff; box-shadow: 0 0 0 3px var(--b), 0 6px 12px rgba(0, 0, 0, .15); }
.ha-ic .spr { width: 62px; height: 62px; animation: lb3Bob 2.6s ease-in-out infinite; }
.ha-card > b { color: var(--d); font-size: clamp(15px, 1.6vw, 19px); font-weight: 900; }
.ha-card .hs-bar { height: 10px; background: color-mix(in srgb, var(--a) 60%, #fff); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); }
.ha-card .hs-bar i { background: linear-gradient(90deg, var(--a), var(--b)); }
.ha-card small { color: var(--d); opacity: .85; }
.ha-claim { background: linear-gradient(#fde047, #f59e0b); color: #7c2d12; box-shadow: 0 4px 0 #b45309; }
/* 領獎彈窗：發光獎牌 + 絲帶 + 光線 */
.ha-win { position: relative; width: 170px; height: 190px; margin: 0 auto 6px; display: grid; place-items: center; }
.ha-win .ha-rays { position: absolute; inset: -40px; border-radius: 50%; background: repeating-conic-gradient(rgba(253, 224, 71, .55) 0 10deg, transparent 10deg 24deg); -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); animation: lb3Spin2 14s linear infinite; }
.ha-win .ha-rib { position: absolute; bottom: 0; left: 50%; width: 90px; height: 80px; margin-left: -45px; background: linear-gradient(90deg, #ec4899 0 50%, #8b5cf6 50%); clip-path: polygon(0 0, 46% 0, 46% 100%, 23% 82%, 0 100%, 0 0, 54% 0, 100% 0, 100% 100%, 77% 82%, 54% 100%); }
.ha-win .ha-big { position: relative; width: 130px; height: 130px; margin-top: -20px; border: 6px solid #fff; color: #fff; animation: tlPop .6s, hdStar 2.4s .6s ease-in-out infinite; }
.ha-win.t0 .ha-big { background: radial-gradient(circle at 35% 30%, #fde0c5, #cd7f32 60%, #8b4513); box-shadow: 0 0 0 5px #cd7f32, 0 0 40px #f59e0b; }
.ha-win.t1 .ha-big { background: radial-gradient(circle at 35% 30%, #fff, #c0c8d2 55%, #7b8794); box-shadow: 0 0 0 5px #a8b3bf, 0 0 40px #e0e7ff; }
.ha-win.t2 .ha-big { background: radial-gradient(circle at 35% 30%, #fffbe6, #fbbf24 55%, #b45309); box-shadow: 0 0 0 5px #f5b301, 0 0 50px #fde047; }
.ha-win .ha-big svg { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .2)); }
.ha-sp { position: absolute; width: 18px; height: 18px; background: #fde047; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: lb3Twinkle 1.6s ease-in-out infinite; animation-delay: calc(var(--k) * -.27s); }
.ha-sp:nth-of-type(1) { top: 8px; left: 10px; } .ha-sp:nth-of-type(2) { top: 0; right: 16px; background: #f472b6; } .ha-sp:nth-of-type(3) { top: 50%; left: -10px; background: #60a5fa; }
.ha-sp:nth-of-type(4) { top: 46%; right: -12px; } .ha-sp:nth-of-type(5) { bottom: 20px; left: 6px; background: #a78bfa; } .ha-sp:nth-of-type(6) { bottom: 26px; right: 4px; background: #4ade80; }
.ha-h { background: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 900; }
@keyframes lb3Spin2 { to { transform: rotate(360deg); } }
@media (orientation: landscape) and (max-height: 520px) {
  .ha-ic { width: 52px; height: 52px; border-width: 3px; } .ha-ic .spr { width: 38px; height: 38px; } .ha-card > b { font-size: 13px; }
  .hc-machine .hd { transform: scale(.48); margin: -91px -62px; } .hc-machine .btn.big { font-size: 13px; padding: 6px 12px; } .hc-machine .pill { font-size: 11px; padding: 3px 8px; }
  .hc-machine { gap: 4px; padding: 6px; }
}

/* ═════ 成長樹：夢幻大樹 ═════ */
.screen.hs-tree { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.ht-wrap { grid-template-rows: minmax(0, 1fr); }
.ht-dream { min-height: 0; overflow: visible; }
.ht-dream .ht-halo { position: absolute; left: 50%; top: 46%; width: min(92%, 78vh); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(254, 240, 138, .55) 40%, rgba(244, 114, 182, .22) 68%, transparent); animation: hdGlow 3s ease-in-out infinite; pointer-events: none; }
.ht-tree { position: relative; flex: 0 1 auto; min-height: 0; height: min(100%, 64vh); aspect-ratio: 1; }
.ht-tree .ht-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 18px rgba(255, 255, 255, .8)) drop-shadow(0 14px 14px rgba(21, 128, 61, .25)); animation: htSway 5s ease-in-out infinite; transform-origin: 50% 92%; }
.ht-orb { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); display: grid; place-items: center; padding: 0; border: 3px solid #fff; border-radius: 50%; cursor: pointer; color: #fff; font-weight: 900; font-size: calc(var(--s) * .34); background: radial-gradient(circle at 35% 30%, #fff 0 8%, color-mix(in srgb, var(--c) 55%, #fff) 30%, var(--c) 75%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, #fff), 0 0 18px var(--c), 0 5px 10px rgba(0, 0, 0, .2); animation: htOrb 3s ease-in-out infinite; animation-delay: calc(var(--k) * -.5s); }
.ht-orb span { display: grid; place-items: center; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.ht-orb svg { width: calc(var(--s) * .44); height: calc(var(--s) * .44); }
.ht-orb small { position: absolute; right: -8px; bottom: -6px; min-width: 22px; padding: 0 6px; border-radius: 99px; background: #fff; color: var(--c); font-size: 12px; font-weight: 900; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
.ht-orb:active { transform: scale(.9); }
.ht-fly { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fef08a; box-shadow: 0 0 10px 3px rgba(253, 224, 71, .8); left: calc(12% + var(--k) * 11%); top: calc(20% + (var(--k) * 37 % 60) * 1%); animation: htFly 6s ease-in-out infinite; animation-delay: calc(var(--k) * -.8s); pointer-events: none; }
.ht-dream .ht-name { position: relative; z-index: 2; margin-top: -10px; padding: 6px 22px 8px; border: 3px solid #fff; background: linear-gradient(#fdf2f8, #fff); box-shadow: 0 0 0 3px #f9a8d4, 0 8px 18px rgba(0, 0, 0, .15); }
.ht-dream .ht-name b { color: #db2777; font-weight: 900; }
.ht-dream .ht-name em { display: block; margin-top: 2px; color: #7c3aed; font-style: normal; font-weight: 800; font-size: 12px; }
/* 右邊六個範疇：糖果色 */
.ht-row { border: 3px solid #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, #fff), #fff 70%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 45%, #fff), 0 5px 0 color-mix(in srgb, var(--c) 40%, #fff), 0 8px 14px rgba(0, 0, 0, .1); transition: transform .15s; }
.ht-row:active { transform: scale(.97); }
.ht-row b { color: color-mix(in srgb, var(--c) 70%, #000); font-weight: 900; }
.ht-row .hs-bar { height: 12px; background: color-mix(in srgb, var(--c) 15%, #fff); }
.ht-row .hs-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 50%, #fff), var(--c)); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); }
.ht-row small { min-width: 30px; padding: 1px 8px; border-radius: 99px; background: var(--c); color: #fff; text-align: center; }
.ht-tip { border: 2px solid #fff; background: linear-gradient(90deg, #fdf4ff, #fef9c3); box-shadow: 0 0 0 2px #f0abfc; }
@keyframes htSway { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
@keyframes htOrb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes htFly { 0%, 100% { transform: translate(0, 0); opacity: .3; } 30% { opacity: 1; } 50% { transform: translate(18px, -22px); opacity: .9; } 80% { transform: translate(-10px, -8px); opacity: .5; } }
@media (orientation: landscape) and (max-height: 520px) {
  .ht-tree { height: min(100%, 58vh); } .ht-orb { --s: 34px !important; font-size: 12px; } .ht-orb small { font-size: 9px; min-width: 16px; padding: 0 4px; right: -6px; }
  .ht-dream .ht-name { padding: 2px 12px 4px; margin-top: -4px; } .ht-dream .ht-name b { font-size: 14px; } .ht-dream .ht-name em, .ht-dream .ht-name small { font-size: 10px; }
  .ht-row .hs-bar { height: 8px; } .ht-side { gap: 4px; } .ht-tip { display: none; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .ht-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
  .ht-side { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .ht-row { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 2px 6px; padding: 4px 8px; border-width: 2px; }
  .ht-row .dim-ic { grid-row: 1 / 3; } .ht-row b { font-size: 12px; } .ht-row small { font-size: 10px; min-width: 22px; padding: 0 5px; } .ht-row .hs-bar { grid-column: 2 / 4; }
}

/* ═════ 楚橋衣櫃（夢幻版）═════ */
.screen.hs-shop { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.hw-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); grid-template-rows: minmax(0, 1fr); gap: 2.5%; padding: 4px 3% 6px; }
.hw-stage { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.hw-mirror { position: relative; flex: 0 1 auto; min-height: 0; width: min(100%, 52vh); aspect-ratio: .82; border-radius: 50% 50% 46% 46% / 42% 42% 40% 40%; padding: 10px; background: radial-gradient(circle at 50% 40%, #fff, #fdf2f8 45%, #f5d0fe 80%, #e9d5ff); border: 8px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 6px #fcd34d, 0 0 0 10px #fff, 0 0 0 13px #f9a8d4, 0 0 40px rgba(253, 224, 71, .6), 0 18px 34px rgba(124, 58, 237, .3); overflow: hidden; isolation: isolate; }
.hw-mirror::before { content: ''; position: absolute; top: 6%; left: 16%; width: 18%; height: 40%; border-radius: 50%; background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); transform: rotate(20deg); z-index: 3; pointer-events: none; }
.hw-glow { position: absolute; inset: 10% 5% 15%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 1), rgba(254, 240, 138, .5) 50%, transparent); z-index: -1; animation: hdGlow 3s ease-in-out infinite; }
.hw-beam { position: absolute; left: 50%; top: 46%; width: 160%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .6) 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 70%); mask: radial-gradient(closest-side, #000 25%, transparent 70%); z-index: -2; animation: hwSpin 26s linear infinite; }
.hw-duo { position: absolute; inset: 8% 6% 14%; display: flex; align-items: flex-end; justify-content: center; z-index: 2; }
.hw-owl { height: 92%; width: auto; max-width: 86%; object-fit: contain; filter: brightness(1.05) saturate(1.1) drop-shadow(0 0 2px #fff) drop-shadow(0 0 16px rgba(255, 236, 170, .9)) drop-shadow(0 10px 10px rgba(124, 58, 237, .25)); animation: hwTry .6s cubic-bezier(.2, 1.5, .4, 1) both, owlBreathe 2.6s .6s ease-in-out infinite; transform-origin: 50% 95%; }
.hw-pet { position: absolute; right: 2%; bottom: 0; width: 30%; height: auto; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); animation: tlBob 2.6s ease-in-out infinite; }
.hw-ped { position: absolute; left: 50%; bottom: 6%; width: 74%; height: 14%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, #fff, #fde68a 60%, #f9a8d4 85%, transparent); z-index: 1; box-shadow: 0 0 30px rgba(253, 224, 71, .6); }
.hw-sp { position: absolute; z-index: 3; width: 14px; height: 14px; background: #fde047; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); left: calc(10% + var(--k) * 12%); top: calc(14% + (var(--k) * 29 % 60) * 1%); animation: lb3Twinkle 2s ease-in-out infinite; animation-delay: calc(var(--k) * -.3s); }
.hw-sp:nth-child(odd) { background: #f9a8d4; width: 11px; height: 11px; }
.hw-info { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 20px 10px; border-radius: 22px; background: rgba(255, 255, 255, .92); border: 3px solid #fff; box-shadow: 0 0 0 3px #f9a8d4, 0 8px 18px rgba(0, 0, 0, .12); min-width: 60%; }
.hw-info > b { color: #6d28d9; font-size: clamp(16px, 2vw, 22px); font-weight: 900; }
.hw-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.hw-btn { padding: 8px 22px; font-size: 16px; animation: tlNext 1.6s ease-in-out infinite; }
.hw-btn.buy { background: linear-gradient(#fde047, #f59e0b); color: #7c2d12; box-shadow: 0 5px 0 #b45309; }
.hw-using { display: inline-flex; align-items: center; gap: 4px; padding: 4px 14px; border-radius: 99px; background: #dcfce7; color: #15803d; font-weight: 900; } .hw-using svg { width: 1em; height: 1em; }
.hw-lock { display: inline-flex; align-items: center; gap: 4px; padding: 4px 14px; border-radius: 99px; background: #ede9fe; color: #6d28d9; font-weight: 900; } .hw-lock svg { width: 1em; height: 1em; }
.hw-note { margin: 0; color: #7c3aed; font-size: 12px; font-weight: 800; text-align: center; }
.hw-rar { padding: 1px 12px; border-radius: 99px; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.hw-rar.r-com { background: #34d399; } .hw-rar.r-rare { background: #38bdf8; } .hw-rar.r-epic { background: linear-gradient(90deg, #a855f7, #ec4899); } .hw-rar.r-leg { background: linear-gradient(90deg, #f59e0b, #fde047, #f59e0b); color: #7c2d12; }
.hw-panel { min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 28px; background: rgba(255, 255, 255, .72); border: 3px solid #fff; box-shadow: 0 0 0 3px #f9a8d4, 0 14px 30px rgba(168, 85, 247, .25); backdrop-filter: blur(3px); }
.hw-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.hw-tab { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 8px 4px 4px; border: 3px solid #fff; border-radius: 99px; background: linear-gradient(#fff, #fdf2f8); color: #7c3aed; font-weight: 900; box-shadow: 0 0 0 2px #f9a8d4, 0 4px 0 #f472b6; cursor: pointer; }
.hw-tab.on { background: linear-gradient(#f472b6, #c026d3); color: #fff; box-shadow: 0 0 0 2px #fde047, 0 4px 0 #86198f; }
.hw-ti { width: 34px; height: 34px; object-fit: contain; flex: none; }
.hw-rb { border-radius: 50%; background: conic-gradient(#f87171, #fbbf24, #4ade80, #38bdf8, #a78bfa, #f472b6, #f87171); border: 3px solid #fff; width: 26px; height: 26px; }
.hw-tab b { white-space: nowrap; font-size: clamp(12px, 1.4vw, 16px); }
.hw-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 2px 6px; }
.hw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.hw-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 8px; border: 3px solid #fff; border-radius: 22px; cursor: pointer; background: radial-gradient(rgba(255, 255, 255, .5) 2px, transparent 2.6px) 0 0 / 12px 12px, linear-gradient(170deg, var(--a), #fff 62%); box-shadow: 0 0 0 2px var(--b), 0 5px 0 var(--b), 0 8px 14px rgba(0, 0, 0, .1); transition: transform .15s; }
.hw-card.r-com { --a: #bbf7d0; --b: #6ee7b7; } .hw-card.r-rare { --a: #bae6fd; --b: #7dd3fc; } .hw-card.r-epic { --a: #f5d0fe; --b: #d8b4fe; } .hw-card.r-leg { --a: #fef08a; --b: #fcd34d; }
.hw-card.r-leg::after { content: ''; position: absolute; inset: 0; border-radius: 19px; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%) -150% 0 / 200% 100% no-repeat; animation: hwShine 3s ease-in-out infinite; pointer-events: none; }
.hw-card:active { transform: scale(.95); }
.hw-card.picked { transform: translateY(-3px); box-shadow: 0 0 0 3px #f472b6, 0 0 0 7px #fde047, 0 8px 0 #db2777, 0 12px 22px rgba(219, 39, 119, .35); }
.hw-th { width: 100%; aspect-ratio: 1.1; display: grid; place-items: center; }
.hw-th .hw-img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .15)); }
.hw-card:hover .hw-img, .hw-card.picked .hw-img { animation: lb3Bob 1.6s ease-in-out infinite; }
.hw-card b { color: #4c1d95; font-size: 13px; font-weight: 900; line-height: 1.15; text-align: center; }
.hw-card small { display: inline-flex; align-items: center; gap: 3px; color: #7c3aed; font-weight: 800; font-size: 12px; } .hw-card small svg { width: 1em; height: 1em; }
.hw-card.own small { color: #15803d; }
.hw-on { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: #22c55e; border: 3px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
.hw-on::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 900; font-style: normal; }
.hw-h { margin: 4px 4px 8px; color: #db2777; font-size: 16px; font-weight: 900; }
.hw-sws { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-bottom: 10px; }
.hw-sw { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: 3px solid #fff; border-radius: 20px; background: #fff; box-shadow: 0 0 0 2px #f5d0fe, 0 4px 0 #f5d0fe; cursor: pointer; }
.hw-sw span { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 10%, var(--c) 45%); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--c), 0 4px 8px rgba(0, 0, 0, .15); }
.hw-sw.picked { box-shadow: 0 0 0 3px #f472b6, 0 0 0 6px #fde047; }
.hw-sw b { font-size: 12px; color: #4c1d95; } .hw-sw small { font-size: 11px; color: #7c3aed; font-weight: 800; display: inline-flex; gap: 2px; align-items: center; } .hw-sw small svg { width: 1em; height: 1em; }
.hw-magic { display: flex; flex-direction: column; gap: 10px; }
.hw-mg { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 3px solid #fff; border-radius: 22px; background: linear-gradient(90deg, #f5d0fe, #fff); box-shadow: 0 0 0 2px #d8b4fe, 0 4px 0 #d8b4fe; }
.hw-mg.off { filter: grayscale(.7); opacity: .75; }
.hw-mgimg { width: 54px; height: 54px; object-fit: contain; } .hw-mg span { flex: 1; display: flex; flex-direction: column; } .hw-mg b { color: #6d28d9; } .hw-mg small { color: #7c3aed; font-weight: 700; }
.hw-mg em { font-style: normal; font-weight: 900; color: #db2777; display: inline-flex; gap: 3px; align-items: center; } .hw-mg em svg { width: 1em; height: 1em; }
@keyframes hwSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes hwTry { 0% { transform: scale(.6) rotate(-12deg); } 60% { transform: scale(1.08) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes hwShine { 0%, 50% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
@media (orientation: landscape) and (max-height: 520px) {
  .hw-wrap { grid-template-columns: minmax(0, .7fr) minmax(0, 1.5fr); gap: 2%; padding: 0 2% 2px; }
  .hw-mirror { width: min(100%, 46vh); border-width: 4px; box-shadow: 0 0 0 4px #fcd34d, 0 0 0 7px #fff, 0 0 0 9px #f9a8d4, 0 0 24px rgba(253, 224, 71, .6); }
  .hw-info { padding: 3px 10px 5px; min-width: 0; gap: 2px; } .hw-info > b { font-size: 13px; } .hw-btn { padding: 4px 12px; font-size: 13px; } .hw-rar { font-size: 10px; }
  .hw-panel { padding: 6px; gap: 4px; border-radius: 20px; } .hw-tab { padding: 2px 6px 2px 2px; } .hw-ti { width: 24px; height: 24px; } .hw-rb { width: 18px; height: 18px; } .hw-tab b { font-size: 11px; }
  .hw-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; } .hw-card { padding: 4px; border-radius: 16px; } .hw-card b { font-size: 11px; } .hw-card small { font-size: 10px; }
}
.hw-duo .hw-owl { width: 82% !important; height: auto !important; max-height: 98%; max-width: none; }

/* ═════ 扭蛋抽中：慶祝彈窗 ═════ */
.modal.hc-win { position: relative; overflow: hidden; isolation: isolate; width: min(100%, 460px); padding: 26px 20px 22px; border: 4px solid #fff; background: radial-gradient(circle at 50% 40%, #fff 0, #fff7d6 22%, #fbcfe8 52%, #c4b5fd 82%, #a78bfa); box-shadow: 0 0 0 4px #f9a8d4, 0 0 0 8px #fde68a, 0 0 70px rgba(253, 224, 71, .7), 0 24px 50px rgba(76, 29, 149, .4); animation: hcwIn .55s cubic-bezier(.2, 1.5, .4, 1) both; }
.hc-win > * { position: relative; z-index: 2; }
.hc-win .hcw-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hcw-rays { position: absolute; left: 50%; top: 38%; width: 220%; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(255, 255, 255, .75) 0 9deg, transparent 9deg 20deg); -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 75%); mask: radial-gradient(closest-side, #000 20%, transparent 75%); animation: hwSpin 14s linear infinite; }
.hcw-fw { position: absolute; width: 0; height: 0; }
.hcw-fw i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c), 0 0 2px #fff; opacity: 0; animation: hcwFw 2.6s var(--d) ease-out infinite; }
.hcw-fw i:nth-child(odd) { background: var(--c2); box-shadow: 0 0 8px var(--c2); }
.hcw-fw::after { content: ''; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(#fff, transparent 70%); opacity: 0; animation: hcwFlash 2.6s var(--d) ease-out infinite; }
.hcw-st { position: absolute; top: -10%; color: var(--c); font-size: 18px; text-shadow: 0 0 6px #fff, 0 0 10px var(--c); animation: hcwFall var(--t) var(--d) linear infinite; }
.hcw-new { position: absolute !important; top: 14px; right: -34px; z-index: 3 !important; transform: rotate(35deg); padding: 4px 40px; background: linear-gradient(90deg, #f43f5e, #f97316); color: #fff; font-weight: 900; letter-spacing: .1em; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
.hcw-open { width: 220px; height: 220px; }
.hcw-open .hc-big { width: 190px; height: 190px; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 22px rgba(255, 240, 180, .95)) drop-shadow(0 10px 10px rgba(124, 58, 237, .3)); animation: hcwFloat 2.6s 1s ease-in-out infinite; }
.hcw-open .prize { animation: hcwPrize .8s .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.hcw-ped { position: absolute; left: 50%; bottom: 4px; width: 80%; height: 22%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, #fff, #fde68a 55%, rgba(249, 168, 212, .6) 80%, transparent); box-shadow: 0 0 30px rgba(253, 224, 71, .8); }
.hcw-title { margin-top: 4px !important; font-weight: 900; font-size: clamp(22px, 3vw, 30px) !important; background: linear-gradient(90deg, #db2777, #7c3aed, #2563eb); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 0 6px #fff); animation: hcwPop .5s .6s both; }
.hcw-sub { color: #6d28d9; font-weight: 800; padding: 2px 14px; border-radius: 99px; background: rgba(255, 255, 255, .8); }
.hcw-ok { padding: 10px 40px; font-size: 20px; animation: tlNext 1.6s 1s ease-in-out infinite; }
.modal-bg:has(.hc-win) { z-index: 150; }
@keyframes hcwIn { from { transform: scale(.4) rotate(-6deg); } }
@keyframes hcwPrize { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes hcwPop { from { transform: scale(.3); } }
@keyframes hcwFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes hcwFw { 0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 0; } 8% { opacity: 1; } 60% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-70px) scale(.3); opacity: 0; } }
@keyframes hcwFlash { 0% { opacity: 0; transform: scale(.2); } 8% { opacity: 1; transform: scale(2.4); } 30%, 100% { opacity: 0; transform: scale(3); } }
@keyframes hcwFall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(620px) rotate(360deg); opacity: .2; } }
@media (orientation: landscape) and (max-height: 520px) {
  .modal.hc-win { padding: 12px 16px; gap: 4px; } .hcw-open { width: 130px; height: 130px; } .hcw-open .hc-big { width: 110px; height: 110px; } .hcw-title { font-size: 20px !important; } .hcw-ok { padding: 6px 28px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .hcw-rays, .hcw-fw i, .hcw-st, .hcw-fw::after { animation: none !important; } }
.screen.hs-coll { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.hc-wrap { grid-template-rows: minmax(0, 1fr); }
.hc-book { max-height: 100%; min-height: 0; overflow: auto; }
.hc-machine { max-height: 100%; min-height: 0; }
@media (orientation: landscape) and (max-height: 520px) {
  .hc-machine .hd { transform: scale(.4); margin: -105px -72px; }
}

/* ═════ 楚橋的小屋：夢幻娃娃屋 ═════ */
.screen.hs-house { display: flex !important; flex-direction: column; height: 100dvh; overflow: hidden; }
.hs-house .hs-top { position: relative !important; }
.hs-house .hs-tabs, .hs-house .hs-tabs:is(*) { position: relative !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; flex-direction: row !important; padding: 6px 10px max(10px, env(safe-area-inset-bottom)) !important; gap: clamp(6px, 1.4vw, 14px) !important; }
.hs-house .hs-tab { flex-direction: column !important; width: clamp(84px, 10vw, 110px) !important; padding: 6px 4px !important; border-radius: 22px !important; gap: 2px !important; }
.hs-house .hs-tab .spr { width: 50% !important; height: auto !important; }
.hs-doll { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 6px; }
.hs-roof { position: relative; z-index: 2; width: calc(var(--rw, 600px) + 70px); height: var(--rh, 120px); margin-bottom: -2px; filter: drop-shadow(0 6px 0 #be185d) drop-shadow(0 12px 18px rgba(0, 0, 0, .18)); }
.hs-roof::before { content: ''; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: radial-gradient(circle at 50% 100%, #fbcfe8 0 42%, #f472b6 44% 50%, transparent 52%) 0 0 / 30px 18px, linear-gradient(#f9a8d4, #ec4899); }
.hs-peak { position: absolute; left: 50%; top: -26px; width: 36px; height: 36px; margin-left: -18px; background: linear-gradient(#fef9c3, #facc15 60%, #f59e0b); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 0 6px #fff); animation: hdStar 2.4s ease-in-out infinite; }
.hs-chim { position: absolute; right: 22%; top: 8%; width: 7%; height: 46%; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, #c4b5fd, #a78bfa); border: 3px solid #fff; z-index: -1; }
.hs-chim b { position: absolute; left: 50%; top: -6px; color: #fb7185; font-size: 14px; opacity: 0; animation: hsPuff 3s ease-out infinite; animation-delay: calc(var(--k) * 1s); }
.hs-attic { position: absolute; left: 50%; top: 40%; width: clamp(34px, 5.5vw, 64px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #fff7d6, #fde68a 60%, #fbbf24); border: 5px solid #fff; box-shadow: 0 0 0 3px #db2777, 0 0 22px rgba(253, 224, 71, .9); animation: hdGlow 2.4s ease-in-out infinite; }
.hs-attic i { color: #f43f5e; font-style: normal; font-size: clamp(16px, 2.4vw, 28px); animation: lb3Pulse 1.4s ease-in-out infinite; }
.hs-eave { position: absolute; left: 0; right: 0; bottom: -8px; height: 16px; display: flex; justify-content: space-between; padding: 0 6px; }
.hs-eave::before { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 12px; border-radius: 99px; background: #fff; box-shadow: 0 2px 0 #f9a8d4; }
.hs-eave i { position: relative; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #fde047; box-shadow: 0 0 8px #fde047; animation: hdBulb 1.2s steps(1) infinite; animation-delay: calc(var(--k) * -.2s); }
.hs-eave i:nth-child(3n) { background: #f472b6; box-shadow: 0 0 8px #f472b6; } .hs-eave i:nth-child(3n + 1) { background: #7dd3fc; box-shadow: 0 0 8px #7dd3fc; }
.hs-walls { position: relative; z-index: 1; padding: 14px 14px 0; border-radius: 0 0 14px 14px; background: radial-gradient(rgba(249, 168, 212, .35) 2px, transparent 2.6px) 0 0 / 14px 14px, linear-gradient(#fff, #fdf2f8); box-shadow: 0 0 0 4px #f9a8d4, 0 0 0 8px #fff, 0 18px 40px rgba(124, 58, 237, .35); }
.hs-house .hs-room { position: relative !important; left: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; border-radius: 8px 8px 0 0 !important; box-shadow: inset 0 0 0 3px rgba(219, 39, 119, .15) !important; }
.hs-lawn { position: relative; z-index: 2; width: calc(var(--rw, 600px) + 110px); height: 18px; margin-top: -4px; border-radius: 99px; background: radial-gradient(circle at 10px 0, #86efac 9px, transparent 10px) 0 0 / 22px 18px repeat-x, linear-gradient(#4ade80, #16a34a); box-shadow: 0 6px 14px rgba(0, 0, 0, .15); }
.hs-house .hs-tip { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 6; }
@keyframes hsPuff { 0% { transform: translate(-50%, 0) scale(.5); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-30%, -46px) scale(1.3); opacity: 0; } }
@media (orientation: landscape) and (max-height: 520px) {
  .hs-house .hs-tab { width: 70px !important; padding: 3px !important; } .hs-house .hs-tab .spr { width: 40% !important; } .hs-house .hs-tab b { font-size: 10px !important; }
  .hs-walls { padding: 7px 7px 0; } .hs-peak { width: 24px; height: 24px; top: -16px; margin-left: -12px; } .hs-eave i { width: 7px; height: 7px; } .hs-attic { border-width: 3px; }
}
.hs-chim { display: none; }
.hs-house .hs-say { font-size: clamp(14px, 1.6vw, 18px) !important; max-width: 240px; padding: 8px 14px; border: 3px solid #fff; box-shadow: 0 0 0 2px #f9a8d4, 0 6px 14px rgba(0, 0, 0, .15); }
.hs-house .hs-cc { width: 17%; }
@media (orientation: landscape) and (max-height: 520px) { .hs-house .hs-say { font-size: 11px !important; padding: 4px 8px; max-width: 150px; } }

/* ═════ 隨機玩：夢幻嘉年華背景 ═════ */
.screen.sp2 { position: relative; isolation: isolate; min-height: 100dvh; background: #2e1065; }
.sp2-bg { position: absolute; inset: -4%; z-index: -2; background: url(../img/game/spin-bg.webp) center / cover; animation: camDrift 30s ease-in-out infinite alternate; }
.screen.sp2::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, .25), transparent 60%), linear-gradient(rgba(46, 16, 101, .1), rgba(46, 16, 101, .25)); pointer-events: none; }
.screen.sp2 .lb-motes { z-index: 0; pointer-events: none; }
.screen.sp2 > * { position: relative; z-index: 1; }
.screen.sp2 > .sp2-bg { position: absolute; z-index: -2; }
.screen.sp2 .bar h1, .screen.sp2 .bar .title, .screen.sp2 .bar b { color: #fff; text-shadow: 0 2px 0 #9d174d, 0 0 12px rgba(236, 72, 153, .8); }
.screen.sp2 .slotm { box-shadow: 0 0 0 5px #fff, 0 0 0 9px #fbbf24, 0 0 50px rgba(253, 224, 71, .7), 0 20px 40px rgba(46, 16, 101, .5); }
.screen.sp2 .spin-res h2, .screen.sp2 .spin-res .lead { color: #fff; text-shadow: 0 2px 0 #6d28d9, 0 0 14px rgba(167, 139, 250, .9); }
.screen.sp2 .slot-win { background: radial-gradient(circle at 50% 40%, #fff, #fdf4ff); }
.screen.sp2 { max-width: none !important; width: 100%; margin: 0 !important; }
.screen.sp2 .bar, .screen.sp2 .spin-res { max-width: 980px; margin-left: auto; margin-right: auto; width: calc(100% - 24px); }
.screen.sp2 .gems { color: #0369a1; }
.screen.sp2 .slotm { width: min(700px, calc(100% - 24px)); margin-left: auto; margin-right: auto; }
@media (orientation: landscape) and (max-height: 520px) {
  .screen.sp2 .slotm { margin-top: 4px; padding: 10px 14px 12px; border-radius: 26px; width: min(560px, calc(100% - 24px)); }
  .screen.sp2 .slot-title { font-size: 18px; margin-bottom: 4px; }
  .screen.sp2 .slot-win { height: 34vh; }
  .screen.sp2 .slot-it .spr, .screen.sp2 .slot-it img { max-height: 60%; width: auto; }
  .screen.sp2 .spin-res h2 { font-size: 18px; margin: 4px 0 0; } .screen.sp2 .spin-res .lead { font-size: 13px; }
}

/* ═════ 楚橋的小屋 v3：全畫面夢幻睡房 ═════ */
.screen.hs3 { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; background: #f3d9ea; }
.hs3-blur { position: absolute; inset: -40px; z-index: -1; background: url(../img/game/room-bg3.webp) center / cover; filter: blur(18px) brightness(1.04) saturate(1.1); }
.hs3 .hs-top { position: absolute !important; left: 0; right: 0; top: 0; z-index: 130 !important; }
.hs3-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.hs3 .hs3-room { position: absolute !important; left: 50%; top: 0; transform: translateX(-50%); margin: 0 !important; max-width: none !important; aspect-ratio: auto !important; border-radius: 0 !important; box-shadow: 0 0 40px 10px rgba(243, 217, 234, .9) !important; background-size: cover !important; overflow: visible !important; }
.hs3 .hs3-room::before, .hs3 .hs3-room::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 0; pointer-events: none; }
.hs3 .hs3-room::before { left: -1px; background: linear-gradient(90deg, rgba(243, 217, 234, .9), transparent); }
.hs3 .hs3-room::after { right: -1px; background: linear-gradient(-90deg, rgba(243, 217, 234, .9), transparent); }
.hs3 .hs-item .spr { filter: drop-shadow(0 4px 6px rgba(90, 40, 80, .18)); }
.hs3 .hs-item.floor::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -3%; height: 9%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 50, 40, .38), rgba(110, 50, 40, .12) 60%, transparent); }
.hs3 .hs-item.rug .spr { transform: none !important; }
.hs3 .hs-item.rug { transform: translate(-50%, -100%) !important; }
.hs3 .hs-item.wall .spr { filter: drop-shadow(0 6px 4px rgba(90, 40, 80, .22)); }
.hs3 .hs-cc { width: 14%; }
.hs3 .hs-cc::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -2%; height: 8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 50, 40, .35), transparent); }
.hs3 .hs-say { font-size: clamp(14px, 1.6vw, 18px); max-width: 240px; padding: 8px 14px; border: 3px solid #fff; box-shadow: 0 0 0 2px #f9a8d4, 0 6px 14px rgba(0, 0, 0, .15); }
.hs3 .hs-pet { left: 60%; top: 97%; z-index: 96; }
.hs3-motes { position: absolute; inset: 0 0 30% 0; pointer-events: none; z-index: 3; }
.hs3-motes i { position: absolute; left: calc(6% + var(--k) * 8%); top: calc(10% + (var(--k) * 37 % 70) * 1%); width: 6px; height: 6px; border-radius: 50%; background: #fff7d6; box-shadow: 0 0 8px 2px rgba(255, 236, 170, .9); animation: htFly 7s ease-in-out infinite; animation-delay: calc(var(--k) * -.6s); }
.hs3 .hs-tabs { position: relative; z-index: 130; padding: 6px 10px max(10px, env(safe-area-inset-bottom)); }
.hs3 .hs-tip { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 125; padding: 4px 14px; border-radius: 99px; background: rgba(255, 255, 255, .92); }
@media (orientation: landscape) and (max-height: 520px) {
  .hs3 .hs-say { font-size: 11px; padding: 4px 8px; max-width: 150px; }
}
.hs3 .hs-item.rug .spr { transform: scaleY(.5) !important; transform-origin: 50% 70%; }
.hs3 .hs-item.rug::after { display: none; }
.hs3 .hs-cc { width: 16%; }
.hs3 .hs-tabs { background: linear-gradient(rgba(255, 255, 255, 0), rgba(253, 242, 248, .6)); }
.screen.hs3 { background: #e9c9a8; }
/* ═════ 大楚橋：鮮艷、會動 ═════ */
img.mid-owl, img.modal-owl, img.cb-owl { filter: brightness(1.08) saturate(1.22) contrast(1.04) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 22px rgba(255, 236, 170, .95)) drop-shadow(0 14px 12px rgba(76, 29, 149, .28)) !important; transform-origin: 50% 95%; animation: owlEnter .9s cubic-bezier(.2, 1.5, .4, 1) both, owlBreathe 2.6s .9s ease-in-out infinite; }
img.mid-owl.mo-wave, img.modal-owl.mo-wave, img.cb-owl.mo-wave { animation: owlWave 1.4s ease-in-out, owlBreathe 2.6s 1.4s ease-in-out infinite; }
img.mid-owl.mo-jump, img.modal-owl.mo-jump, img.cb-owl.mo-jump { animation: owlJump .9s cubic-bezier(.3, .6, .4, 1) 2, owlBreathe 2.6s 1.8s ease-in-out infinite; }
img.mid-owl.mo-tilt, img.modal-owl.mo-tilt, img.cb-owl.mo-tilt { animation: owlTilt 2s ease-in-out, owlBreathe 2.6s 2s ease-in-out infinite; }
img.mid-owl.mo-pump, img.modal-owl.mo-pump, img.cb-owl.mo-pump { animation: owlPump .5s ease-in-out 3, owlBreathe 2.6s 1.5s ease-in-out infinite; }
.as-screen .mid-owl { width: min(22vw, 30vh, 230px) !important; }
@media (prefers-reduced-motion: reduce) { img.mid-owl, img.modal-owl, img.cb-owl { animation: none !important; } }
/* ═════ 楚橋無論在哪裏都鮮艷、有光邊、會呼吸 ═════ */
img.owl3d { filter: hue-rotate(var(--hue, 0deg)) brightness(1.08) saturate(1.22) contrast(1.04) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 18px rgba(255, 236, 170, .9)) drop-shadow(0 12px 10px rgba(76, 29, 149, .25)) !important; }
:where(img.owl3d) { transform-origin: 50% 95%; animation: owlBreathe 2.6s ease-in-out infinite; }
.ava img.owl3d, .lb-ava img.owl3d, .hw-th img.owl3d { filter: hue-rotate(var(--hue, 0deg)) brightness(1.08) saturate(1.22) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 6px rgba(255, 236, 170, .8)) !important; }
:where(.lb-ava, .hw-th) img.owl3d { animation: none; }

/* 扭蛋圖鑑：冒險貼紙系列 */
.hc-stk { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 8px; }
.hc-sset h4 { margin: 0 0 6px; color: #b45309; font-size: 15px; font-weight: 900; } .hc-sset h4 small { color: #f59e0b; }
.hc-sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.hc-scell { aspect-ratio: 1; display: grid; place-items: center; border-radius: 16px; background: #f5f3ff; border: 2px dashed #ddd6fe; overflow: hidden; }
.hc-scell .stk { transform: scale(.78); }
.hc-scell:not(.own) .stk { filter: brightness(0) opacity(.18); }
.hc-scell.own { background: radial-gradient(circle, #fff, #fef3c7); border: 2px solid #fcd34d; box-shadow: 0 3px 0 #fbbf24; }
.hc-scell .stk { transform: none; width: 86%; height: 86%; display: grid; place-items: center; font-size: 0; }
.hc-scell .stk .emo, .hc-scell .stk .emo.pic { width: 100%; height: 100%; display: grid; place-items: center; }
.hc-scell .stk img, .hc-scell .stk .spr { width: 100% !important; height: 100% !important; object-fit: contain; }
.hc-sset h4 { display: flex; align-items: baseline; gap: 6px; }
.hc-sgrid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.hw-mixnote { margin: 0 2px 8px; padding: 4px 12px; border-radius: 99px; background: #fdf4ff; display: inline-flex; align-items: center; gap: 4px; } .hw-mixnote svg { width: 1em; height: 1em; color: #f59e0b; }

/* ═════ 夢幻小屋 v4：多間房、楚橋會走路 ═════ */
.hs4 .hs3-blur { background-size: cover; background-position: center; }
.hs4-spot { position: absolute; transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 30%; background: none; cursor: pointer; z-index: 20; }
.hs4-spot.glow { animation: hs4Glow .8s ease-out; }
.hs4-cc { position: absolute; z-index: 90; width: 13%; transform: translate(-50%, -100%); pointer-events: none; }
.hs4-cc .hs4-flip { transition: transform .25s; } .hs4-cc .hs4-flip.left { transform: scaleX(-1); }
.hs4-cc .hs-owl, .hs4-cc img, .hs4-cc svg { width: 100%; height: auto; display: block; }
.hs4-cc.walk img.hs-owl { animation: hs4Walk .36s ease-in-out infinite !important; }
.hs4-cc.hop img.hs-owl { animation: shJump .55s ease-out 2 !important; }
.hs4-cc.sleep img.hs-owl { animation: hs4Sleep 1.6s ease-in-out infinite !important; filter: brightness(.95) saturate(1.1) drop-shadow(0 0 3px #fff) !important; }
.hs4-cc::after { content: ''; position: absolute; left: 16%; right: 16%; bottom: -3%; height: 9%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(90, 40, 40, .35), transparent); }
.hs4-cc .hs-say { z-index: 5; }
.hs4-pet { position: absolute; z-index: 89; width: 7.5%; transform: translate(-50%, -100%); pointer-events: none; }
.hs4-pet .pet, .hs4-pet img { width: 100%; height: auto; position: static !important; transition: transform .25s; }
.hs4-pet.left img { transform: scaleX(-1); } .hs4-pet.walk img { animation: hs4Walk .3s ease-in-out infinite; }
.hs4-dark { position: absolute; inset: 0; z-index: 80; background: radial-gradient(circle at 25% 55%, rgba(255, 220, 140, .25), rgba(20, 10, 60, .55) 45%); opacity: 0; transition: opacity .8s; pointer-events: none; }
.hs4-room.night .hs4-dark { opacity: 1; }
.hs4-fx { position: absolute; z-index: 95; width: 0; height: 0; pointer-events: none; }
.hs4-fx i { position: absolute; left: var(--x); top: 0; font-style: normal; font-weight: 900; opacity: 0; animation: hs4Rise 2.6s ease-out forwards; animation-delay: calc(var(--k) * .18s); }
.hs4-fx.zzz i { color: #6d28d9; font-size: 26px; text-shadow: 0 0 6px #fff; }
.hs4-fx.hearts i { color: #f43f5e; font-size: 24px; text-shadow: 0 0 6px #fff; }
.hs4-fx.sparkle i { color: #facc15; font-size: 24px; text-shadow: 0 0 8px #fff; }
.hs4-fx.notes i { color: #8b5cf6; font-size: 26px; text-shadow: 0 0 6px #fff; }
.hs4-fx.bubbles i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, rgba(186, 230, 253, .6) 50%, rgba(244, 114, 182, .35)); border: 1.5px solid rgba(255, 255, 255, .9); }
.hs4-fx.bubbles i:nth-child(odd) { width: 12px; height: 12px; }
.hs4-fx.steam i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); filter: blur(2px); }
.hs4-rooms { position: absolute; left: 50%; top: 62px; transform: translateX(-50%); z-index: 125; display: flex; gap: 6px; padding: 5px; border-radius: 99px; background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 3px #f9a8d4, 0 8px 18px rgba(0, 0, 0, .15); backdrop-filter: blur(3px); }
.hs4-rb { padding: 6px 14px; border: 0; border-radius: 99px; background: none; color: #7c3aed; font-weight: 900; font-size: clamp(13px, 1.4vw, 16px); cursor: pointer; white-space: nowrap; }
.hs4-rb.on { background: linear-gradient(#f472b6, #c026d3); color: #fff; box-shadow: 0 3px 0 #86198f; }
.hs4-arr { position: absolute; top: 50%; z-index: 125; width: 52px; height: 52px; margin-top: -26px; display: grid; place-items: center; border: 4px solid #fff; border-radius: 50%; background: linear-gradient(#f9a8d4, #db2777); color: #fff; box-shadow: 0 5px 0 #9d174d, 0 10px 18px rgba(0, 0, 0, .2); cursor: pointer; animation: lb3Pulse 1.8s ease-in-out infinite; }
.hs4-arr.l { left: 12px; } .hs4-arr.r { right: 12px; } .hs4-arr svg { width: 55%; height: 55%; }
.hs3 .hs4-rooms ~ .hs-tip { bottom: 10px; }
@keyframes hs4Walk { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7%) rotate(4deg); } }
@keyframes hs4Sleep { 0%, 100% { transform: rotate(-6deg) scale(1, .97); } 50% { transform: rotate(-3deg) scale(1.02, 1); } }
@keyframes hs4Rise { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(calc(var(--x) * .6), -120px) scale(1.2); opacity: 0; } }
@keyframes hs4Glow { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .9), inset 0 0 0 0 rgba(255, 255, 255, .5); } 100% { box-shadow: 0 0 0 30px rgba(255, 255, 255, 0), inset 0 0 40px 10px rgba(255, 255, 255, 0); } }
@media (orientation: landscape) and (max-height: 520px) {
  .hs4-rooms { top: 50px; padding: 3px; gap: 2px; } .hs4-rb { padding: 3px 9px; font-size: 11px; }
  .hs4-arr { width: 38px; height: 38px; margin-top: -19px; border-width: 3px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .hs4 .hs-tabs { padding: 2px 8px 4px !important; gap: 6px !important; }
  .hs4 .hs-tab { flex-direction: row !important; width: auto !important; padding: 2px 10px 2px 3px !important; border-radius: 99px !important; }
  .hs4 .hs-tab .spr { width: 26px !important; height: 26px !important; } .hs4 .hs-tab b { font-size: 11px !important; white-space: nowrap; }
}

/* 小屋：楚橋做動作 */
.hs4-cc .hs4-flip { transform-origin: 50% 100%; }
.hs4-cc.pose .hs4-flip { transform: scale(var(--ps, 1)) !important; transition: transform .3s; }
.hs4-cc.hopping img.hs-owl { animation: hs4Hop .6s ease-in-out !important; }
.hs4-cc.p-sleep img.hs-owl { animation: hs4Snore 2.4s ease-in-out infinite !important; }
.hs4-cc.p-sit img.hs-owl, .hs4-cc.p-read img.hs-owl, .hs4-cc.p-drink img.hs-owl { animation: hs4Sway 2.2s ease-in-out infinite !important; }
.hs4-cc.p-bath img.hs-owl { animation: hs4Splash 1.4s ease-in-out infinite !important; }
.hs4-cc.p-eat img.hs-owl, .hs4-cc.p-brush img.hs-owl, .hs4-cc.p-cook img.hs-owl { animation: hs4Munch .5s ease-in-out infinite !important; }
.hs4-cc.p-dance img.hs-owl { animation: hs4Dance .8s ease-in-out infinite !important; }
.hs4-cc.p-hug img.hs-owl { animation: hs4Squeeze 1.2s ease-in-out infinite !important; }
.hs4-cc.pose::after, .hs4-cc.hopping::after { opacity: .4; }
.hs4-cc.p-sleep::after, .hs4-cc.p-bath::after { display: none; }
@keyframes hs4Hop { 0% { transform: scale(1.1, .85); } 25% { transform: translateY(-40%) scale(.92, 1.1); } 75% { transform: translateY(-20%) scale(.96, 1.05); } 92% { transform: scale(1.12, .86); } 100% { transform: none; } }
@keyframes hs4Snore { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .96); } }
@keyframes hs4Sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes hs4Splash { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4%) rotate(3deg); } }
@keyframes hs4Munch { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3%) scale(1.03, .97); } }
@keyframes hs4Dance { 0%, 100% { transform: rotate(-10deg) translateX(-4%); } 50% { transform: rotate(10deg) translateX(4%) translateY(-6%); } }
@keyframes hs4Squeeze { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06, .95); } }

/* ═════ 主頁今日任務：夢幻卡 + 面板 ═════ */
.lb3 .lb3-mis { cursor: pointer; overflow: hidden; isolation: isolate; border: 3px solid #fff; background: radial-gradient(rgba(255, 255, 255, .6) 2px, transparent 2.6px) 0 0 / 14px 14px, linear-gradient(135deg, #fdf2f8, #fae8ff 50%, #fef3c7); box-shadow: 0 0 0 3px #f9a8d4, 0 6px 0 #db2777, 0 12px 22px rgba(219, 39, 119, .25); transition: transform .15s; }
.lb3 .lb3-mis:active { transform: translateY(3px) scale(.98); }
.lb3 .lb3-mis::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .8) 50%, transparent 65%) -150% 0 / 200% 100% no-repeat; animation: hwShine 3.6s ease-in-out infinite; }
.lb3 .lb3-mis > b { display: flex; align-items: center; gap: 4px; color: #be185d; } .lb3 .lb3-mis > b svg { width: 1em; height: 1em; color: #f59e0b; }
.lb3 .lb3-mis > b small { margin-left: auto; padding: 0 8px; border-radius: 99px; background: #db2777; color: #fff; font-size: 11px; }
.lb3 .lb3-m { background: #fff; box-shadow: 0 0 0 2px #fbcfe8; } .lb3 .lb3-m.ok { background: #dcfce7; box-shadow: 0 0 0 2px #86efac; }
.lb3 .lb3-mis .lb-chest { filter: drop-shadow(0 0 8px rgba(253, 224, 71, .9)); }
.lb3 .lb3-mis .lb-chest.locked { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9)) saturate(.8); animation: lb3Bob 2.4s ease-in-out infinite; }
.modal.mq { position: relative; overflow: hidden; width: min(100%, 480px); border: 4px solid #fff; background: radial-gradient(rgba(255, 255, 255, .55) 2px, transparent 2.6px) 0 0 / 16px 16px, linear-gradient(160deg, #fdf2f8, #f5f3ff 55%, #fef9c3); box-shadow: 0 0 0 4px #f9a8d4, 0 0 0 8px #fde68a, 0 24px 50px rgba(76, 29, 149, .35); animation: hcwIn .5s cubic-bezier(.2, 1.5, .4, 1) both; }
.mq-head { position: relative; width: 120px; height: 100px; margin: -6px auto 0; display: grid; place-items: center; }
.mq-rays { position: absolute; inset: -40px; border-radius: 50%; background: repeating-conic-gradient(rgba(253, 224, 71, .5) 0 9deg, transparent 9deg 22deg); -webkit-mask: radial-gradient(closest-side, #000 25%, transparent); mask: radial-gradient(closest-side, #000 25%, transparent); animation: lb3Spin2 16s linear infinite; }
.mq-chest { position: relative; width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(253, 224, 71, .9)); animation: lb3Bob 2.2s ease-in-out infinite; }
.mq-chest.open { animation: tlNext 1s ease-in-out infinite; }
.mq-title { color: #db2777; font-weight: 900; }
.mq-sub { color: #6d28d9; font-weight: 800; }
.mq-list { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.mq-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 3px solid #fff; border-radius: 22px; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 2px #f5d0fe, 0 4px 0 #e9d5ff; text-align: left; }
.mq-row.ok { box-shadow: 0 0 0 2px #86efac, 0 4px 0 #bbf7d0; background: #f0fdf4; }
.mq-ic { flex: none; width: 52px; height: 52px; border-radius: 16px; background: #fdf4ff; display: grid; place-items: center; } .mq-ic .spr { width: 88%; height: 88%; object-fit: contain; }
.mq-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .mq-txt b { color: #4c1d95; } .mq-txt small { color: #7c3aed; font-weight: 800; font-size: 12px; }
.mq-bar { height: 10px; border-radius: 99px; background: #f3e8ff; overflow: hidden; } .mq-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f472b6, #a855f7); }
.mq-row.ok .mq-bar i { background: linear-gradient(90deg, #4ade80, #16a34a); }
.mq-go { flex: none; padding: 8px 14px; font-size: 15px; }
.mq-done { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #22c55e; color: #fff; box-shadow: 0 3px 0 #15803d; } .mq-done svg { width: 60%; height: 60%; }
.mq-claim { animation: tlNext 1.4s ease-in-out infinite; background: linear-gradient(#fde047, #f59e0b); color: #7c2d12; box-shadow: 0 5px 0 #b45309; }
@media (orientation: landscape) and (max-height: 520px) { .modal.mq { gap: 4px; padding: 10px 14px; } .mq-head { width: 70px; height: 60px; } .mq-chest { width: 60px; height: 60px; } .mq-list { gap: 5px; } .mq-row { padding: 4px 8px; } .mq-ic { width: 36px; height: 36px; } }
/* 今日任務卡：夢幻彩色（粉紅→紫→藍，星星閃） */
.lb3 .lb3-mis { background: radial-gradient(circle at 12% 20%, rgba(255, 255, 255, .55) 0 2px, transparent 3px) 0 0 / 22px 22px, radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .4) 0 1.5px, transparent 2.5px) 0 0 / 30px 30px, linear-gradient(120deg, #f472b6, #c084fc 45%, #818cf8 75%, #60a5fa); border: 3px solid #fff; box-shadow: 0 0 0 3px #fbcfe8, 0 6px 0 #7c3aed, 0 0 24px rgba(192, 132, 252, .6), 0 12px 22px rgba(124, 58, 237, .3); }
.lb3 .lb3-mis > b { color: #fff; text-shadow: 0 2px 0 rgba(124, 58, 237, .5), 0 0 8px rgba(255, 255, 255, .6); }
.lb3 .lb3-mis > b svg { color: #fde047; filter: drop-shadow(0 0 4px #fde047); animation: lb3Twinkle 2s ease-in-out infinite; }
.lb3 .lb3-mis > b small { background: #fff; color: #db2777; box-shadow: 0 2px 0 rgba(124, 58, 237, .4); }
.lb3 .lb3-m { background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 10px rgba(255, 255, 255, .6); }
.lb3 .lb3-m.ok { background: linear-gradient(#fef9c3, #fde68a); box-shadow: 0 0 0 2px #fff, 0 0 12px #fde047; }
.lb3 .lb3-m small { color: #db2777; }
.lb3 .lb3-mis .lb-chest { filter: drop-shadow(0 0 10px rgba(253, 224, 71, .95)) drop-shadow(0 0 2px #fff); }

/* ═════ 本週主題 ═════ */
.screen.wk { position: relative; isolation: isolate; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; max-width: none !important; width: 100%; margin: 0 !important; padding: 0 !important; background: #fdf2f8; }
.wk-bg { position: absolute; inset: -20px; z-index: -2; background: center / cover; filter: blur(6px) brightness(1.08) saturate(1.1); }
.wk::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(253, 242, 248, .55), rgba(245, 243, 255, .75)); }
.wk .lb-motes { z-index: 0; pointer-events: none; }
.wk-top { position: relative; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px 4px; }
.wk-ribbon { padding: 6px 22px; border-radius: 12px; background: linear-gradient(var(--c, #f472b6), color-mix(in srgb, var(--c, #f472b6) 70%, #831843)); color: #fff; font-weight: 900; font-size: clamp(16px, 2.2vw, 24px); text-shadow: 0 2px 0 rgba(0, 0, 0, .18); box-shadow: 0 4px 0 rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .15); }
.wk-ribbon.sm { font-size: clamp(14px, 1.8vw, 20px); }
.wk-hero { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; margin: 6px 3% 10px; padding: 10px 16px; border: 3px solid #fff; border-radius: 26px; background: radial-gradient(rgba(255, 255, 255, .55) 2px, transparent 2.6px) 0 0 / 16px 16px, linear-gradient(120deg, #fbcfe8, #e9d5ff 50%, #bfdbfe); box-shadow: 0 0 0 3px #f9a8d4, 0 8px 20px rgba(124, 58, 237, .2); }
.wk-hi { flex: none; width: 76px; height: 76px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 4px #fff, 0 0 18px rgba(255, 255, 255, .9); } .wk-hi .wk-pic { width: 82%; height: 82%; }
.wk-hero > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .wk-hero b { color: #6d28d9; font-size: clamp(18px, 2.4vw, 28px); font-weight: 900; } .wk-hero small { color: #7c3aed; font-weight: 800; font-size: 13px; }
.wk-prog { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .8); overflow: hidden; } .wk-prog i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f472b6, #a855f7, #60a5fa); }
.wk-par { flex: none; background: #fff; color: #047857; font-weight: 900; }
.wk-grid { position: relative; z-index: 2; flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; padding: 12px 3% 18px; align-content: start; }
.wk-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 22px 8px 8px; border: 3px solid #fff; border-radius: 24px; cursor: pointer; background: radial-gradient(rgba(255, 255, 255, .5) 2px, transparent 2.6px) 0 0 / 12px 12px, linear-gradient(170deg, color-mix(in srgb, var(--c) 30%, #fff), #fff 65%); box-shadow: 0 0 0 2px var(--c), 0 5px 0 color-mix(in srgb, var(--c) 75%, #000), 0 10px 16px rgba(0, 0, 0, .12); transition: transform .15s; }
.wk-card:active { transform: translateY(3px) scale(.97); }
.wk-tag { position: absolute; top: -9px; left: 10px; padding: 1px 10px; border-radius: 99px; background: var(--c); color: #fff; font-size: 11px; font-weight: 900; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.wk-ci { width: 74px; height: 74px; display: grid; place-items: center; } .wk-ci .wk-pic { width: 100%; height: 100%; animation: lb3Bob 2.6s ease-in-out infinite; }
.wk-card b { color: #3b0764; font-size: 14px; font-weight: 900; text-align: center; line-height: 1.15; }
.wk-st i { font-style: normal; color: #e5e7eb; font-size: 18px; text-shadow: 0 1px 0 rgba(0, 0, 0, .1); } .wk-st i.on { color: #facc15; text-shadow: 0 0 6px rgba(250, 204, 21, .8); }
.wk-card.done { box-shadow: 0 0 0 2px var(--c), 0 0 0 5px #fde68a, 0 5px 0 5px color-mix(in srgb, var(--c) 75%, #000), 0 10px 16px rgba(0, 0, 0, .12); }
.wk-pic { display: block; width: 100%; height: 100%; object-fit: contain; }
.wk-nopic { display: grid; place-items: center; font-weight: 900; color: #7c3aed; }
.wk-badge { font-size: 90px; animation: tlPop .6s; filter: drop-shadow(0 0 16px #fde047); }
.wk-bth .lb3-bi .wk-pic { width: 100%; height: 100%; }
.wk-dots { display: flex; gap: 5px; } .wk-dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 2px #f9a8d4; } .wk-dots i.on { background: #f472b6; } .wk-dots i.now { background: #fde047; transform: scale(1.3); }
.wkp-main { position: relative; z-index: 2; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(120px, 18%) 1fr; gap: 2%; padding: 0 3% 12px; align-items: center; }
.wkp-cc { position: relative; align-self: end; display: flex; flex-direction: column; align-items: center; }
.wkp-owl { width: 100%; height: auto; }
.wkp-ear { width: 56px; height: 56px; margin-top: 4px; display: grid; place-items: center; border: 4px solid #fff; border-radius: 50%; background: linear-gradient(#c084fc, #7c3aed); color: #fff; box-shadow: 0 4px 0 #5b21b6; cursor: pointer; } .wkp-ear svg { width: 55%; height: 55%; }
.wkp-q { min-height: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.wk-ask { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 16px; border: 3px solid #fff; border-radius: 26px; background: rgba(255, 255, 255, .88); box-shadow: 0 0 0 3px #f9a8d4, 0 8px 18px rgba(0, 0, 0, .1); }
.wk-txt { margin: 0; color: #4c1d95; font-weight: 900; font-size: clamp(18px, 2.6vw, 30px); text-align: center; line-height: 1.3; display: flex; align-items: center; gap: 6px; } .wk-txt svg { width: 1em; height: 1em; color: #7c3aed; }
.wk-stim .wk-pic.big { width: clamp(90px, 22vh, 190px); height: clamp(90px, 22vh, 190px); }
.wk-word { font-size: clamp(48px, 9vw, 96px); font-weight: 900; color: #db2777; letter-spacing: .1em; text-shadow: 0 4px 0 #fbcfe8; }
.wk-big { display: flex; flex-direction: column; align-items: center; font-size: clamp(36px, 6vw, 68px); font-weight: 900; color: #6d28d9; text-shadow: 0 4px 0 #ede9fe; text-align: center; line-height: 1.1; }
.wk-big small { font-size: .45em; color: #db2777; }
.wk-dotrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; max-width: 360px; } .wk-dotrow i { width: 24px; height: 24px; border-radius: 50%; } .wk-dotrow i.a { background: #f472b6; } .wk-dotrow i.b { background: #fff; box-shadow: inset 0 0 0 3px #c4b5fd; }
.wk-clock { width: clamp(120px, 26vh, 220px); height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .15)); }
.wk-letters { display: flex; gap: 10px; } .wk-let { width: clamp(60px, 9vw, 96px); aspect-ratio: 1; border: 4px solid #fff; border-radius: 20px; background: linear-gradient(#fef3c7, #fde68a); color: #b45309; font-size: clamp(36px, 6vw, 60px); font-weight: 900; box-shadow: 0 5px 0 #f59e0b; cursor: pointer; } .wk-let.hop { animation: shJump .5s ease-out; }
.wk-play { width: 110px; height: 110px; display: grid; place-items: center; border: 5px solid #fff; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fef9c3, #facc15 50%, #eab308); color: #9a3412; box-shadow: 0 6px 0 #a16207; cursor: pointer; animation: lb3Pulse 1.4s ease-in-out infinite; } .wk-play svg { width: 50%; height: 50%; }
.wk-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 18px); }
.wk-opts.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; width: 100%; margin: 0 auto; } .wk-opts.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wk-opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: clamp(90px, 18vh, 170px); padding: 8px; border: 4px solid #fff; border-radius: 24px; background: linear-gradient(#fff, #fdf4ff); box-shadow: 0 0 0 3px #e9d5ff, 0 6px 0 #c4b5fd, 0 10px 16px rgba(0, 0, 0, .1); cursor: pointer; transition: transform .15s; }
.wk-opt:active { transform: translateY(3px); }
.wk-opt .wk-pic { width: auto; height: clamp(60px, 13vh, 130px); max-width: 100%; }
.wk-opt b { color: #4c1d95; font-weight: 900; font-size: clamp(14px, 1.8vw, 20px); }
.wk-zhcard { font-size: clamp(32px, 5vw, 56px) !important; color: #db2777 !important; letter-spacing: .08em; } .wk-zhcard.sm { font-size: clamp(20px, 2.6vw, 30px) !important; }
.wk-num { font-size: clamp(34px, 5vw, 56px) !important; color: #6d28d9 !important; text-align: center; line-height: 1.15; } .wk-num.sm { font-size: clamp(17px, 2.2vw, 24px) !important; }
.wk-sw { font-size: clamp(30px, 4.6vw, 52px) !important; color: #2563eb !important; }
.wk-opts.pop .wk-opt { border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, #fff, hsl(calc(var(--k) * 70 + 300) 90% 82%) 60%); box-shadow: 0 0 0 3px #fff, 0 8px 14px rgba(0, 0, 0, .15); animation: wkFloat 2.4s ease-in-out infinite; animation-delay: calc(var(--k) * -.5s); }
.wk-opt.ok { box-shadow: 0 0 0 4px #22c55e, 0 6px 0 #16a34a, 0 0 22px rgba(34, 197, 94, .6) !important; background: #f0fdf4 !important; animation: tlPop .4s !important; }
.wk-opts.pop .wk-opt.ok { animation: wkPop .5s forwards !important; }
.wk-opt.no { animation: hcShake .15s linear 3; }
.wk-opts.multi .wk-opt.no { opacity: .5; }
.wk-trace { position: relative; display: grid; place-items: center; background: #fff; border-radius: 20px; box-shadow: 0 0 0 4px #fbcfe8; } .wk-trace .tr-grid { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #fbcfe8; stroke-dasharray: 3 3; fill: none; } .wk-trace .tr-ghost { font-size: 200px; color: #f3e8ff; }
.wk-res { display: flex; gap: 10px; justify-content: center; } .wk-res i { font-style: normal; font-size: 64px; color: #e5e7eb; } .wk-res i.on { color: #facc15; text-shadow: 0 0 14px rgba(250, 204, 21, .9); animation: tlPop .5s both; animation-delay: calc(var(--i) * .25s); }
.wke-card { position: relative; z-index: 2; margin: 8px auto; width: min(720px, calc(100% - 28px)); overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; border: 3px solid #fff; border-radius: 26px; background: rgba(255, 255, 255, .93); box-shadow: 0 0 0 3px #a7f3d0, 0 10px 24px rgba(0, 0, 0, .12); }
.wke-card label { display: flex; flex-direction: column; gap: 4px; color: #065f46; font-weight: 900; }
.wke-card textarea, .wke-card input, .wke-card select { font: inherit; font-weight: 700; padding: 8px 12px; border: 2px solid #a7f3d0; border-radius: 14px; background: #f0fdf4; color: #1f2937; }
.wke-tip { margin: 0; color: #047857; font-weight: 700; font-size: 14px; } .wke-warn { margin: 0; color: #dc2626; font-weight: 800; }
@keyframes wkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes wkPop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(0); opacity: 0; } }
@media (orientation: landscape) and (max-height: 520px) {
  .wk-hero { margin: 2px 2% 6px; padding: 4px 10px; } .wk-hi { width: 44px; height: 44px; } .wk-hero small { font-size: 10px; } .wk-hero b { font-size: 16px; }
  .wk-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px 8px; } .wk-card { padding: 14px 4px 4px; border-radius: 18px; } .wk-ci { width: 44px; height: 44px; } .wk-card b { font-size: 11px; } .wk-st i { font-size: 13px; }
  .wkp-main { grid-template-columns: 90px 1fr; } .wkp-ear { width: 40px; height: 40px; } .wkp-q { gap: 6px; } .wk-ask { padding: 4px 10px; gap: 2px; }
  .wk-opt { min-height: 70px; padding: 4px; } .wk-opt .wk-pic { height: 52px; } .wk-txt { font-size: 15px; } .wk-word { font-size: 40px; } .wk-big { font-size: 30px; } .wk-stim .wk-pic.big { width: 70px; height: 70px; } .wk-clock { width: 100px; }
  .wk-zhcard { font-size: 26px !important; } .wk-zhcard.sm { font-size: 17px !important; } .wk-let { width: 50px; font-size: 30px; } .wk-play { width: 70px; height: 70px; }
}
@media (orientation: landscape) and (max-height: 520px) { .wk-hero > div > small:first-of-type { display: none; } .wk-par { padding: 4px 10px; font-size: 12px; } }
.wkp .wk-big { font-size: clamp(28px, 4.2vw, 50px); } .wkp .wk-big small { font-size: .6em; }

/* ═════ 本週主題：機動遊戲卡 ═════ */
.wk-rides { position: relative; z-index: 2; flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; padding: 6px 3% 18px; align-content: start; }
.wk-ride { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 3px solid #fff; border-radius: 26px; cursor: pointer; text-align: left; background: radial-gradient(rgba(255, 255, 255, .5) 2px, transparent 2.6px) 0 0 / 12px 12px, linear-gradient(120deg, color-mix(in srgb, var(--c) 32%, #fff), #fff 70%); box-shadow: 0 0 0 2px var(--c), 0 6px 0 color-mix(in srgb, var(--c) 75%, #000), 0 12px 18px rgba(0, 0, 0, .12); transition: transform .15s; }
.wk-ride:active { transform: translateY(3px) scale(.98); }
.wk-ride.done { box-shadow: 0 0 0 2px var(--c), 0 0 0 5px #fde68a, 0 6px 0 5px color-mix(in srgb, var(--c) 75%, #000), 0 12px 18px rgba(0, 0, 0, .12); }
.wk-rimg { flex: none; width: 88px; height: 88px; border-radius: 22px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 40%, #fff); } .wk-rimg .wk-pic { width: 84%; height: 84%; animation: lb3Bob 2.6s ease-in-out infinite; }
.wk-rtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .wk-rtxt b { color: color-mix(in srgb, var(--c) 60%, #000); font-size: clamp(17px, 2vw, 22px); font-weight: 900; } .wk-rtxt small { color: #6b5a80; font-weight: 700; font-size: 12px; line-height: 1.3; }
.wk-rbar { height: 9px; border-radius: 99px; background: rgba(255, 255, 255, .9); overflow: hidden; } .wk-rbar i { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.wk-rtxt em { font-style: normal; color: color-mix(in srgb, var(--c) 70%, #000); font-weight: 900; font-size: 12px; }
.wk-rgo { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #fff; border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); } .wk-rgo svg { width: 50%; height: 50%; }
/* ═════ 機動遊戲畫面 ═════ */
.wk2 .kn-stage { align-items: stretch; }
.wk2 .wk-pic, .wk2 img { -webkit-user-drag: none; }
.wk2 .wk-flyer img, .wk2 .wk-flyer { object-fit: contain; } .wk-flyer img { width: 100%; height: 100%; object-fit: contain; }
.wk-flytag { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 14px; background: #fde68a; color: #92400e; font-size: 26px; font-weight: 900; }
.wk2 .ok { color: #16a34a !important; }
.wk-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.wk-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border: 4px solid #fff; border-radius: 26px; background: rgba(255, 255, 255, .93); box-shadow: 0 0 0 3px #f9a8d4, 0 10px 20px rgba(0, 0, 0, .12); }
.wk-now { width: clamp(90px, 22vh, 190px); aspect-ratio: 1; display: grid; place-items: center; } .wk-now img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .15)); animation: lb3Bob 2.2s ease-in-out infinite; }
.wk-now.in, .wk-askcard.in, .wk-plank.in, .wk-story.in, .wk-cmd.in, .wk-clockbox.in, .wk-sroom.in { animation: tlPop .45s; }
.wk-sent { margin: 0; color: #4c1d95; font-weight: 900; font-size: clamp(18px, 2.8vh, 28px); text-align: center; } .wk-sent u { color: #db2777; } .wk-sent b { color: #7c3aed; }
.wk-queue { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .wk-queue img { width: 38px; height: 38px; object-fit: contain; opacity: .7; }
/* 娃娃屋 */
.wk-dh { position: relative; width: 100%; max-height: 100%; display: flex; flex-direction: column; filter: drop-shadow(0 12px 18px rgba(124, 58, 237, .25)); }
.wk-roof { width: 100%; height: clamp(40px, 9vh, 90px); display: block; margin-bottom: -2px; }
.wk-rooms { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 6px; border-radius: 0 0 18px 18px; background: #fff; box-shadow: inset 0 0 0 4px #f9a8d4; }
.wk-room { position: relative; grid-column: span 3; aspect-ratio: 1.6; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #fdf2f8; cursor: pointer; box-shadow: 0 0 0 2px #fbcfe8; }
.wk-room.r-living, .wk-room.r-kitchen, .wk-room.r-dining { grid-column: span 2; aspect-ratio: 1.1; }
.wk-room > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk-room b { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); padding: 1px 10px; border-radius: 99px; background: rgba(255, 255, 255, .95); color: #6d28d9; font-weight: 900; font-size: clamp(11px, 1.8vh, 16px); white-space: nowrap; }
.wk-in { position: absolute; left: 6%; right: 6%; top: 8%; display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; } .wk-in img { width: 30%; max-width: 46px; aspect-ratio: 1; object-fit: contain; background: rgba(255, 255, 255, .85); border-radius: 10px; padding: 2px; animation: tlPop .4s; }
.wk-room.got { animation: hs4Glow .8s ease-out; box-shadow: 0 0 0 4px #22c55e; }
.wk-ground { height: 10px; margin: 0 -4%; border-radius: 99px; background: linear-gradient(#4ade80, #16a34a); }
/* 危險物品 */
.wk-roomfloor { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 12px; align-items: end; padding: 4% 2% 2%; }
.wk-thing { position: relative; height: 100%; max-height: 26vh; padding: 6px; border: 0; border-radius: 22px; background: rgba(255, 255, 255, .55); cursor: pointer; animation: wkFloat 3s ease-in-out infinite; animation-delay: var(--d); }
.wk-thing img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .15)); }
.wk-x { position: absolute; inset: 6%; border-radius: 50%; border: 6px solid #ef4444; opacity: 0; transform: scale(.4); transition: .3s cubic-bezier(.2, 1.6, .4, 1); }
.wk-thing.got .wk-x { opacity: 1; transform: scale(1); box-shadow: 0 0 16px rgba(239, 68, 68, .6); }
.wk-thing.got .wk-x::after { content: '!'; position: absolute; right: -6%; top: -6%; width: 30px; height: 30px; border-radius: 50%; background: #ef4444; color: #fff; font-weight: 900; display: grid; place-items: center; }
/* 認字貼貼 */
.wk-sign { align-self: center; display: flex; flex-direction: column; align-items: center; }
.wk-plank { position: relative; min-width: 200px; padding: 10px 50px 10px 26px; border-radius: 14px; background: linear-gradient(#fcd34d, #f59e0b); border: 4px solid #fff; box-shadow: 0 6px 0 #b45309, 0 10px 18px rgba(0, 0, 0, .2); text-align: center; }
.wk-plank b { color: #7c2d12; font-size: clamp(36px, 8vh, 70px); font-weight: 900; letter-spacing: .1em; } .wk-plank .kn-ear { top: 50%; transform: translateY(-50%); right: 10px; }
.wk-post { width: 12px; height: 24px; background: #a16207; border-radius: 0 0 6px 6px; }
.wk-gallery { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: center; }
.wk-frame { position: relative; height: 100%; max-height: 24vh; padding: 8px 8px 26px; border: 5px solid #fff; border-radius: 18px; background: #fff7ed; box-shadow: 0 0 0 3px #fbbf24, 0 8px 14px rgba(0, 0, 0, .15); cursor: pointer; animation: wkFloat 3.2s ease-in-out infinite; animation-delay: var(--d); }
.wk-frame img { width: 100%; height: 100%; object-fit: contain; }
.wk-tagged { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%) scale(0); padding: 2px 14px; border-radius: 10px; background: linear-gradient(#fcd34d, #f59e0b); color: #7c2d12; font-size: clamp(16px, 3vh, 26px); font-weight: 900; white-space: nowrap; box-shadow: 0 3px 0 #b45309; transition: transform .3s cubic-bezier(.2, 1.6, .4, 1); }
.wk-frame.got { box-shadow: 0 0 0 4px #22c55e, 0 8px 14px rgba(0, 0, 0, .15); } .wk-frame.got .wk-tagged { transform: translateX(-50%) scale(1); }
/* 家庭樹 */
.wk-tree { position: relative; height: 100%; min-height: 0; }
.wk-trunk { position: absolute; inset: 0; width: 100%; height: 100%; }
.wk-kin { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; }
.wk-kin span { width: clamp(56px, 13vh, 110px); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 5px solid #fde68a; box-shadow: 0 6px 12px rgba(0, 0, 0, .18); display: grid; place-items: center; overflow: hidden; } .wk-kin img { width: 88%; height: 88%; object-fit: contain; }
.wk-kin b { padding: 1px 10px; border-radius: 99px; background: #fff; color: #9a3412; font-weight: 900; font-size: clamp(15px, 2.6vh, 22px); box-shadow: 0 2px 4px rgba(0, 0, 0, .15); }
.wk-kin.me span { border-color: #f9a8d4; } .wk-kin.lit span { border-color: #22c55e; box-shadow: 0 0 0 6px rgba(34, 197, 94, .35), 0 0 24px #22c55e; }
.wk-askcard { position: relative; padding: 14px 52px 14px 20px; border: 4px solid #fff; border-radius: 22px; background: #fff; box-shadow: 0 0 0 3px #c4b5fd, 0 8px 16px rgba(0, 0, 0, .12); text-align: center; }
.wk-askcard b { color: #4c1d95; font-size: clamp(20px, 3.4vh, 32px); font-weight: 900; } .wk-askcard .kn-ear { top: 50%; transform: translateY(-50%); }
.wk-askcard.top { align-self: center; }
/* 句式 */
.wk-strip { align-self: center; display: flex; align-items: center; gap: 14px; padding: 10px 18px; border: 4px solid #fff; border-radius: 24px; background: #fff; box-shadow: 0 0 0 3px #fdba74, 0 8px 16px rgba(0, 0, 0, .12); }
.wk-sroom img { width: clamp(70px, 15vh, 130px); height: auto; } .wk-stext { margin: 0; color: #9a3412; font-size: clamp(26px, 5vh, 46px); font-weight: 900; letter-spacing: .06em; }
.wk-blank { display: inline-block; width: 3em; height: 1.1em; vertical-align: middle; border-bottom: 4px dashed #f97316; }
.wk-shelf { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: center; padding: 0 4%; }
.wk-item { position: relative; height: 100%; max-height: 26vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; border: 4px solid #fff; border-radius: 22px; background: linear-gradient(#fff, #fff7ed); box-shadow: 0 0 0 3px #fed7aa, 0 6px 0 #fdba74; cursor: pointer; }
.wk-item img { flex: 1; min-height: 0; width: 100%; object-fit: contain; } .wk-item b { color: #9a3412; font-size: clamp(18px, 3vh, 26px); font-weight: 900; }
/* 家人 */
.wk-people { flex: 1; display: flex; justify-content: space-around; align-items: flex-end; gap: 6px; padding: 0 2% 2%; }
.wk-person { position: relative; flex: 1; height: 62%; max-width: 180px; padding: 0; border: 0; background: none; cursor: pointer; animation: wkFloat 3s ease-in-out infinite; animation-delay: var(--d); }
.wk-person img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .18)); }
.wk-heart { position: absolute; left: 50%; top: 0; color: #f43f5e; font-size: 34px; font-style: normal; opacity: 0; transform: translate(-50%, 0); }
.wk-person.hi { animation: shJump .6s ease-out 2; } .wk-person.hi .wk-heart { animation: hs4Rise 1.6s ease-out; }
/* 拼音火車 */
.wk-rail { position: relative; height: 46%; display: flex; flex-direction: column; justify-content: flex-end; }
.wk-train { display: flex; align-items: flex-end; gap: 6px; padding-left: 4%; transition: transform 1.4s ease-in; }
.wk-train.arrive { animation: wkArrive .9s ease-out; } .wk-train.go { transform: translateX(120vw); }
.wk-engine img { width: clamp(90px, 20vh, 170px); height: auto; }
.wk-cars { display: flex; gap: 6px; align-items: flex-end; }
.wk-car { width: clamp(64px, 13vh, 110px); aspect-ratio: 1.1; border: 5px solid #fff; border-radius: 16px 16px 8px 8px; background: linear-gradient(#93c5fd, #3b82f6); color: #fff; font-size: clamp(36px, 8vh, 66px); font-weight: 900; box-shadow: 0 6px 0 #1e40af; cursor: pointer; text-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.wk-car.on { background: linear-gradient(#fde68a, #f59e0b); box-shadow: 0 6px 0 #b45309; } .wk-car.bop { animation: shJump .45s ease-out; }
.wk-seat { width: clamp(64px, 13vh, 110px); aspect-ratio: 1.1; border-radius: 16px 16px 8px 8px; border: 5px dashed #fff; background: rgba(255, 255, 255, .4); display: grid; place-items: center; } .wk-seat img { width: 86%; height: 86%; object-fit: contain; }
.wk-track { height: 10px; margin-top: 4px; background: repeating-linear-gradient(90deg, #92400e 0 14px, transparent 14px 26px), linear-gradient(#57534e, #57534e) 0 100% / 100% 3px no-repeat; }
.wk-platform { flex: 1; display: flex; justify-content: center; align-items: center; gap: clamp(10px, 3vw, 40px); }
.wk-pass { width: clamp(90px, 18vh, 160px); aspect-ratio: 1; padding: 8px; border: 5px solid #fff; border-radius: 26px; background: #fff; box-shadow: 0 0 0 3px #bfdbfe, 0 6px 0 #93c5fd; cursor: pointer; animation: wkFloat 2.6s ease-in-out infinite; } .wk-pass img { width: 100%; height: 100%; object-fit: contain; }
@keyframes wkArrive { from { transform: translateX(-100vw); } }
/* 開頭音泡泡 */
.wk-letter { position: relative; align-self: center; padding: 0 56px 0 30px; border: 5px solid #fff; border-radius: 26px; background: linear-gradient(#fde68a, #f59e0b); color: #7c2d12; font-size: clamp(48px, 11vh, 100px); font-weight: 900; line-height: 1.1; box-shadow: 0 6px 0 #b45309; } .wk-letter .kn-ear { top: 50%; transform: translateY(-50%); }
.wk-bubbles { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: center; }
.wk-bub { position: relative; justify-self: center; width: min(100%, 20vh); aspect-ratio: 1; padding: 14%; border: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff, rgba(255, 255, 255, .5) 30%, rgba(186, 230, 253, .55) 70%, rgba(244, 114, 182, .5)); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .9), 0 6px 14px rgba(0, 0, 0, .12); cursor: pointer; animation: wkFloat 2.8s ease-in-out infinite; animation-delay: var(--d); }
.wk-bub img { width: 100%; height: 100%; object-fit: contain; } .wk-bub.pop { animation: wkPop .5s forwards; pointer-events: none; }
/* 氣球 */
.wk-sky { flex: 1; min-height: 0; display: flex; justify-content: space-around; align-items: center; }
.wk-bal { position: relative; width: clamp(110px, 22vh, 190px); aspect-ratio: .85; border: 0; border-radius: 50% 50% 48% 48%; background: radial-gradient(circle at 32% 28%, #fff, hsl(var(--h) 90% 75%) 40%, hsl(var(--h) 80% 58%)); box-shadow: inset -8px -10px 0 rgba(0, 0, 0, .08), 0 10px 18px rgba(0, 0, 0, .15); cursor: pointer; animation: wkFloat 2.4s ease-in-out infinite; animation-delay: var(--d); }
.wk-bal b { color: #fff; font-size: clamp(28px, 6vh, 52px); font-weight: 900; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); } .wk-str { position: absolute; left: 50%; top: 100%; width: 2px; height: 60px; background: rgba(0, 0, 0, .25); }
.wk-bal.pop { animation: wkPop .5s forwards; }
/* 門牌 */
.wk-street { flex: 1; display: flex; justify-content: center; align-items: flex-end; gap: clamp(6px, 1.5vw, 18px); padding-bottom: 4%; }
.wk-hs { position: relative; width: clamp(70px, 14vh, 130px); aspect-ratio: .8; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 30%; border-radius: 6px 6px 0 0; background: hsl(var(--h) 80% 86%); border: 4px solid #fff; box-shadow: 0 8px 12px rgba(0, 0, 0, .15); }
.wk-hroof { position: absolute; left: -12%; right: -12%; top: -34%; height: 40%; background: hsl(var(--h) 70% 60%); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.wk-hs b { min-width: 60%; padding: 2px 8px; border-radius: 10px; background: #fff; color: #1e3a8a; font-size: clamp(22px, 5vh, 42px); font-weight: 900; text-align: center; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.wk-hs b.miss { color: #f43f5e; animation: lb3Pulse 1.2s ease-in-out infinite; } .wk-hs.bop { animation: shJump .45s ease-out; } .wk-hs.got b { color: #16a34a; }
.wk-hdoor { margin-top: auto; width: 34%; height: 34%; border-radius: 40px 40px 0 0; background: hsl(var(--h) 50% 45%); }
.wk-nums { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .wk-nums.col { flex-direction: column; align-items: stretch; }
.wk2 .wk-n { position: relative; min-width: 90px; padding: .5em 1.2em; font-size: clamp(22px, 4.4vh, 38px) !important; text-align: center !important; color: #4c1d95; }
.wk2 .wk-n small { display: block; font-size: .55em; color: #7c3aed; }
.wk2 .wk-n.shake, .wk2 .shake { animation: hcShake .15s linear 3; }
/* 分曲奇 */
.wk-bond { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.wk-total { display: flex; align-items: baseline; gap: 8px; padding: 4px 22px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 3px #fcd34d; } .wk-total b { color: #b45309; font-size: clamp(34px, 7vh, 60px); font-weight: 900; } .wk-total small { color: #92400e; font-weight: 900; }
.wk-plates { display: flex; align-items: center; gap: 16px; } .wk-plus { font-size: 46px; font-weight: 900; color: #7c3aed; }
.wk-plate { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 4px; width: clamp(170px, 34vh, 300px); aspect-ratio: 1.5; padding: 14px; border-radius: 50%; background: radial-gradient(#fff, #fff 55%, #e0e7ff 70%, #c7d2fe); box-shadow: 0 8px 14px rgba(0, 0, 0, .15); }
.wk-plate img, .wk-slot { width: clamp(30px, 6.5vh, 54px); height: clamp(30px, 6.5vh, 54px); object-fit: contain; }
.wk-slot { padding: 0; border: 3px dashed #a78bfa; border-radius: 50%; background: rgba(255, 255, 255, .6); cursor: pointer; } .wk-slot.on { border: 0; background: none; animation: tlPop .35s; } .wk-slot img { width: 100%; height: 100%; }
.wk-plate em { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); padding: 0 12px; border-radius: 99px; background: #7c3aed; color: #fff; font-style: normal; font-weight: 900; font-size: 22px; }
.wk-plate.got { animation: tlPop .5s; box-shadow: 0 0 0 4px #22c55e, 0 8px 14px rgba(0, 0, 0, .15); }
/* 時鐘 */
.wk-clockwrap { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5%; }
.wk-clockbox .wk-clock { width: clamp(180px, 46vh, 360px); height: auto; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .18)); }
/* 單數雙數 */
.wk-pairs { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.wk-socks { display: flex; flex-direction: column; align-items: center; gap: 6px; } .wk-n0 { font-size: clamp(40px, 8vh, 70px); font-weight: 900; color: #6d28d9; }
.wk-sockrow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px 4px; max-width: 640px; }
.wk-sockrow img { width: clamp(40px, 8vh, 70px); height: auto; transition: transform .5s; }
.wk-socks.paired .wk-sockrow img:nth-child(even) { transform: translateX(-30%) scaleX(-1); } .wk-socks.paired .wk-sockrow img.alone { animation: lb3Pulse 1s ease-in-out infinite; filter: drop-shadow(0 0 6px #f43f5e); }
.wk-pairbtn { font-size: clamp(18px, 3.4vh, 28px) !important; }
/* 音樂 */
.wk-concert { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.wk-playbtn { width: clamp(80px, 16vh, 130px); aspect-ratio: 1; display: grid; place-items: center; border: 6px solid #fff; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fef9c3, #facc15 50%, #eab308); color: #9a3412; box-shadow: 0 6px 0 #a16207; cursor: pointer; } .wk-playbtn svg { width: 50%; height: 50%; }
.wk-playbtn.glow { animation: lb3Pulse 1.2s ease-in-out infinite; }
.wk-animals { display: flex; gap: clamp(20px, 6vw, 80px); } .wk-animal { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border: 4px solid #fff; border-radius: 26px; background: rgba(255, 255, 255, .9); box-shadow: 0 6px 0 #c4b5fd; cursor: pointer; opacity: .65; transition: opacity .3s; }
.wk-animals.on .wk-animal { opacity: 1; } .wk-animal img { width: clamp(100px, 22vh, 190px); height: auto; } .wk-animal b { color: #4c1d95; font-size: clamp(18px, 3vh, 26px); font-weight: 900; }
.wk-animal.dance { animation: hs4Dance .5s ease-in-out 3; }
/* Simon Says */
.wk-simon { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.wk-cmd { padding: 16px 30px; border: 5px solid #fff; border-radius: 28px; background: linear-gradient(#ede9fe, #fff); box-shadow: 0 0 0 3px #a78bfa, 0 10px 18px rgba(0, 0, 0, .12); text-align: center; } .wk-cmd b { display: block; color: #6d28d9; font-size: clamp(28px, 6vh, 52px); font-weight: 900; } .wk-cmd small { color: #db2777; font-size: clamp(18px, 3.2vh, 28px); font-weight: 900; }
.wk-two { display: flex; gap: 16px; }
/* 心情 */
.wk-story { position: relative; align-self: center; max-width: 92%; padding: 16px 56px 16px 22px; border: 5px solid #fff; border-radius: 26px; background: #fff; box-shadow: 0 0 0 3px #f9a8d4, 0 10px 18px rgba(0, 0, 0, .12); } .wk-story p { margin: 0; color: #4c1d95; font-size: clamp(20px, 3.6vh, 32px); font-weight: 900; line-height: 1.4; } .wk-story .kn-ear { top: 14px; }
.wk-faces { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: center; padding: 0 3%; }
.wk-face { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border: 4px solid #fff; border-radius: 26px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 0 #fbcfe8; cursor: pointer; } .wk-face img { width: 100%; max-height: 18vh; object-fit: contain; } .wk-face b { color: #be185d; font-size: clamp(20px, 3.4vh, 30px); font-weight: 900; }
.wk-face.got { box-shadow: 0 0 0 4px #22c55e, 0 6px 0 #16a34a; animation: tlPop .4s; }
.wk2 .got { --x: 0; }
@keyframes hs4Dance { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-8px); } }
@media (orientation: landscape) and (max-height: 520px) {
  .wk-rides { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; } .wk-ride { padding: 6px 8px; } .wk-rimg { width: 56px; height: 56px; } .wk-rtxt small { display: none; }
  .wk-rooms { gap: 3px; padding: 3px; } .wk-room b { font-size: 10px; padding: 0 6px; } .wk-card { padding: 6px; gap: 4px; } .wk-sent { font-size: 15px; }
  .wk-plank b { font-size: 30px; } .wk-askcard b { font-size: 17px; } .wk-askcard { padding: 6px 40px 6px 12px; } .wk-story p { font-size: 16px; } .wk-story { padding: 8px 44px 8px 12px; }
  .wk2 .wk-n { font-size: 18px !important; min-width: 60px; padding: .35em .8em; } .wk-stext { font-size: 22px; }
}
.wk-sent b { font-size: inherit !important; }
.wk-bub img { border-radius: 30%; }
.wk-ride .wk-rtxt b { line-height: 1.1; }
.wkm-train .wk-rail { height: 66%; flex: none; } .wkm-train .wk-track { opacity: 0; } .wkm-train .wk-train { margin-bottom: -1%; } .wkm-train .wk-platform { align-items: flex-start; padding-top: 1%; }
.wk-sockrow { grid-template-columns: repeat(6, auto); gap: 8px 18px; } .wk-sockrow img { width: clamp(56px, 11vh, 96px); } .ap-hero .wk-pic { width: 100%; height: 100%; object-fit: contain; }
/* 本週主題：高度不夠時（手機打橫）一定放得下 */
.wk2 .wk-split { height: 100%; align-items: stretch; }
.wk2 .wk-dh { height: 100%; min-height: 0; } .wk2 .wk-rooms { flex: 1; min-height: 0; grid-template-rows: 1fr 1fr; } .wk2 .wk-room { aspect-ratio: auto !important; min-height: 0; }
.wk2 .wk-card { align-self: center; }
.wk2 .wk-gallery { grid-auto-rows: minmax(0, 1fr); } .wk2 .wk-frame { max-height: none; min-height: 0; }
.wk2 .wk-roomfloor { min-height: 0; grid-template-rows: repeat(2, minmax(0, 1fr)); } .wk2 .wk-thing { max-height: none; min-height: 0; }
.wk2 .wk-shelf, .wk2 .wk-faces, .wk2 .wk-bubbles { grid-auto-rows: minmax(0, 1fr); } .wk2 .wk-item { max-height: none; min-height: 0; }
@media (orientation: landscape) and (max-height: 520px) {
  .wk-plank { padding: 2px 40px 2px 14px; min-width: 120px; } .wk-plank b { font-size: 24px; } .wk-post { height: 8px; } .wk-roof { height: 26px; }
  .wk-frame { padding: 3px 3px 14px; border-width: 3px; } .wk-tagged { font-size: 13px; bottom: -8px; }
  .wk-kin span { width: 44px; border-width: 3px; } .wk-kin b { font-size: 12px; }
  .wk-strip { padding: 4px 10px; } .wk-sroom img { width: 50px; } .wk-stext { font-size: 20px; } .wk-item b { font-size: 14px; }
  .wk-car, .wk-seat { width: 50px; border-width: 3px; font-size: 28px; } .wk-engine img { width: 70px; } .wk-pass { width: 70px; }
  .wk-letter { font-size: 40px; padding: 0 44px 0 16px; } .wk-bal { width: 90px; } .wk-bal b { font-size: 22px; }
  .wk-hs { width: 56px; } .wk-hs b { font-size: 18px; } .wk-clockbox .wk-clock { width: 160px; }
  .wk-plate { width: 150px; padding: 8px; } .wk-plate img, .wk-slot { width: 26px; height: 26px; } .wk-total b { font-size: 28px; }
  .wk-animal img { width: 80px; } .wk-playbtn { width: 64px; } .wk-cmd b { font-size: 24px; } .wk-cmd { padding: 6px 16px; } .wk-face img { max-height: 12vh; } .wk-face b { font-size: 16px; }
  .wk-sockrow img { width: 40px; } .wk-n0 { font-size: 30px; }
}
.wk-person { display: flex; flex-direction: column; align-items: center; } .wk-person img { flex: 1; min-height: 0; } .wk-pname { margin-top: 4px; padding: 2px 14px; border-radius: 99px; background: #fff; color: #9a3412; font-size: clamp(18px, 3.4vh, 30px); font-weight: 900; box-shadow: 0 3px 0 #fdba74; }
.wkm-kin .wk-people { gap: 3%; } .wkm-kin .wk-person { height: 74%; }

/* ═════ 本週主題 v3：真正的小遊戲 ═════ */
.wk2 .wk-room { position: relative; overflow: visible; } .wk2 .wk-room > img { border-radius: 12px; }
.wk-doing { width: 60% !important; max-width: none !important; background: none !important; animation: shJump .6s ease-out 2 !important; }
.wk-cart.roll { animation: wkRoll .7s cubic-bezier(.2, 1.3, .4, 1); } @keyframes wkRoll { from { transform: translateX(160%) rotate(10deg); } }
.wk-flyer.hop { transition: left .55s ease-out, top .55s cubic-bezier(.4, -0.9, .6, 1), transform .55s; }
.wk-split.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.wk-mess { position: relative; height: 100%; min-height: 0; border-radius: 26px; background: rgba(255, 255, 255, .35); border: 3px dashed rgba(255, 255, 255, .9); }
.wk-junk { position: absolute; width: 26%; aspect-ratio: 1; padding: 4px; border: 0; background: none; cursor: pointer; transform: rotate(var(--r)); animation: wkWobble 2.4s ease-in-out infinite; animation-delay: var(--d); }
.wk-junk img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .2)); }
.wk-junk.sel { animation: none; transform: translateY(-12px) scale(1.18); filter: drop-shadow(0 0 10px #fde047) drop-shadow(0 0 4px #fff); z-index: 3; }
.wk-junk.gone { visibility: hidden; }
.wk-mess .kn-count { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); }
@keyframes wkWobble { 0%, 100% { transform: rotate(var(--r)); } 50% { transform: rotate(calc(var(--r) * -1)) translateY(-4px); } }
/* 電筒 */
.wk-dark { position: relative; flex: 1; min-height: 0; border-radius: 26px; overflow: hidden; --lx: 50%; --ly: 50%; touch-action: none; }
.wk-dark .wk-roomfloor { height: 100%; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); padding: 2%; }
.wk-dark .wk-thing { animation: none; background: none; }
.wk-torchlight { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at var(--lx) var(--ly), transparent 0, transparent clamp(60px, 13vh, 120px), rgba(15, 10, 40, .9) calc(clamp(60px, 13vh, 120px) + 40px)); transition: opacity .8s; }
.wk-dark.on .wk-torchlight { opacity: 0; }
.wk-dark .wk-thing.got { z-index: 3; }
.wkm-danger .kn-count { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 5; }
/* 釣魚 */
.wk-pond { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 30px; background: linear-gradient(rgba(125, 211, 252, .25), rgba(14, 165, 233, .35)); }
.wk-fish { position: absolute; top: var(--y); left: -24%; width: clamp(110px, 22%, 190px); aspect-ratio: 1.6; padding: 0; border: 0; background: none; cursor: pointer; animation: wkSwim var(--t) linear infinite; animation-delay: var(--d); }
.wk-fbody { position: absolute; inset: 6% 22% 6% 0; border-radius: 50% 60% 60% 50%; background: radial-gradient(circle at 70% 35%, #fff, hsl(calc(30deg + var(--h)) 90% 72%) 60%); box-shadow: 0 6px 10px rgba(0, 0, 0, .18); display: grid; place-items: center; border: 3px solid #fff; }
.wk-fbody img { width: 66%; height: 80%; object-fit: contain; }
.wk-ftail { position: absolute; right: 0; top: 18%; width: 26%; height: 64%; background: hsl(calc(30deg + var(--h)) 90% 62%); clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.wk-fish.hooked { animation-play-state: paused; transform: translateY(-40%) rotate(-20deg); transition: transform .5s; }
.wk-fish.shake .wk-fbody { animation: hcShake .15s linear 3; }
@keyframes wkSwim { from { left: -24%; } to { left: 104%; } }
.wk-bucket { position: absolute; right: 10px; bottom: 10px; z-index: 6; width: clamp(70px, 14vh, 120px); display: flex; flex-direction: column; align-items: center; } .wk-bucket img { width: 100%; } .wk-bucket b { margin-top: -10px; padding: 0 12px; border-radius: 99px; background: #fff; color: #b45309; font-weight: 900; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); white-space: nowrap; }
.wk-bucket.got { animation: tlPop .4s; }
.wkm-fish .kn-stage { position: absolute; }
/* 捉迷藏 */
.wk-hideroom { flex: 1; min-height: 0; display: flex; justify-content: space-around; align-items: flex-end; gap: 1%; padding: 0 1% 2%; }
.wk-spot { position: relative; flex: 1; height: 62%; max-width: 220px; padding: 0; border: 0; background: none; cursor: pointer; }
.wk-cover { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .2)); transition: transform .45s cubic-bezier(.2, 1.4, .4, 1); transform-origin: 50% 100%; animation: wkPeek 4.5s ease-in-out infinite; animation-delay: var(--d); }
.wk-spot.open .wk-cover { animation: none; transform: translateX(-62%) rotate(-12deg); }
.wk-who { position: absolute; left: 10%; right: 10%; bottom: 8%; top: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transform: translateY(18%) scale(.9); transition: transform .4s; }
.wk-spot.open .wk-who { transform: translateY(0) scale(1.05); z-index: 3; }
.wk-who img { flex: 1; min-height: 0; width: 100%; object-fit: contain; object-position: bottom; } .wk-who b { padding: 1px 12px; border-radius: 99px; background: #fff; color: #9a3412; font-weight: 900; font-size: clamp(14px, 2.8vh, 24px); white-space: nowrap; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
.wk-spot.found .wk-who b { background: #22c55e; color: #fff; }
.wk-spot.shuffle .wk-cover { animation: hcShake .15s linear 6; }
@keyframes wkPeek { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-4deg); } 90% { transform: rotate(4deg); } 95% { transform: rotate(-2deg); } }
/* 氣球（有圖） */
.wk-ibal { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .wk-ibal img { width: 58%; height: 46%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); } .wk-ibal b { font-size: clamp(16px, 3vh, 26px) !important; }
/* 火車裝貨 */
.wk-car.empty { background: rgba(255, 255, 255, .45); border-style: dashed; box-shadow: none; }
.wk-seat.full { border-style: solid; background: #fff; }
.wk-crate { width: clamp(60px, 12vh, 100px); aspect-ratio: 1; border: 4px solid #fff; border-radius: 12px; background: repeating-linear-gradient(90deg, #fbbf24 0 12px, #f59e0b 12px 24px); color: #7c2d12; font-size: clamp(32px, 7vh, 60px); font-weight: 900; box-shadow: 0 6px 0 #b45309; cursor: pointer; animation: wkFloat 2.6s ease-in-out infinite; animation-delay: var(--d); }
.wk-crate.used { visibility: hidden; }
.wk-flyc { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 12px; background: #fbbf24; color: #7c2d12; font-size: 40px; font-weight: 900; }
/* 接東西 */
.wk-rainzone { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.wk-fall { position: absolute; top: -22%; width: clamp(70px, 14vh, 120px); aspect-ratio: 1; padding: 8%; border: 4px solid #fff; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #fdf4ff 60%, #f5d0fe); box-shadow: 0 6px 12px rgba(0, 0, 0, .15); cursor: pointer; animation: wkFall var(--t) linear forwards; }
.wk-fall img { width: 100%; height: 100%; object-fit: contain; } .wk-fall.got { animation-play-state: paused; visibility: hidden; } .wk-fall.bad { animation-play-state: paused; opacity: .4; }
@keyframes wkFall { from { top: -22%; transform: rotate(-10deg); } to { top: 105%; transform: rotate(10deg); } }
/* 打地鼠 */
.wk-holes { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4% 6%; padding: 2% 6%; }
.wk-hole { position: relative; overflow: hidden; border-radius: 0 0 50% 50%; }
.wk-dirt { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; border-radius: 50%; background: radial-gradient(#6b3f1d, #92400e 70%); box-shadow: inset 0 6px 8px rgba(0, 0, 0, .4); z-index: 0; }
.wk-mole { position: absolute; left: 14%; right: 14%; bottom: 6%; height: 80%; z-index: 1; padding: 8% 4% 0; border: 0; border-radius: 50% 50% 20% 20%; background: radial-gradient(circle at 50% 30%, #d6a77a, #a16207); cursor: pointer; transform: translateY(110%); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .15); }
.wk-mole.up { transform: translateY(0); } .wk-mole.bonk { transform: translateY(30%) scaleY(.8); filter: brightness(1.2); }
.wk-mface { color: #3f2a14; font-size: clamp(14px, 2.6vh, 22px); font-weight: 900; }
.wk-mole b { padding: 2px 10px; border-radius: 10px; background: #fff; color: #2563eb; font-size: clamp(20px, 4.4vh, 38px); font-weight: 900; box-shadow: 0 3px 0 #bfdbfe; white-space: nowrap; }
.wkm-mole .kn-count { align-self: center; }
/* 郵差 */
.wk-hs.open .wk-hdoor { transform: perspective(200px) rotateY(-60deg); transform-origin: left; transition: transform .4s; }
.wk-hkid { position: absolute; bottom: 0; left: 33%; width: 34%; height: 34%; background: url(../img/flat/kid-walk.webp) center bottom / contain no-repeat; opacity: 0; transition: opacity .3s .3s; }
.wk-hs.open .wk-hkid { opacity: 1; }
.wk-bag { display: flex; justify-content: center; align-items: flex-end; gap: 14px; }
.wk-postman { height: clamp(70px, 16vh, 140px); width: auto; }
.wk-env { position: relative; width: clamp(80px, 15vh, 130px); aspect-ratio: 1.3; padding: 0; border: 0; background: none; cursor: pointer; animation: wkFloat 2.4s ease-in-out infinite; }
.wk-env img { width: 100%; height: 100%; object-fit: contain; } .wk-env b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -30%); padding: 0 10px; border-radius: 10px; background: #fff; color: #dc2626; font-size: clamp(22px, 4.6vh, 38px); font-weight: 900; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
/* 餵小熊 */
.wk-bearzone { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; gap: 4%; }
.wk-bear { position: relative; height: 80%; } .wk-bear img { height: 100%; width: auto; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .2)); }
.wk-bear.eat img { animation: hs4Squeeze .3s ease-in-out 6; }
.wk-want { position: absolute; top: 4%; right: -20%; padding: 6px 14px; border-radius: 20px 20px 20px 4px; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); } .wk-want b { color: #b45309; font-size: clamp(28px, 6vh, 50px); font-weight: 900; } .wk-want::after { content: '🍪'; font-size: 26px; }
.wk-bearzone .wk-plate { position: relative; align-self: flex-end; margin-bottom: 4%; }
.wk-plate img.new { animation: tlPop .35s; } .wk-plate img.eaten { transform: scale(0); transition: transform .3s; }
.wk-jar { position: relative; width: clamp(80px, 16vh, 140px); align-self: flex-end; padding: 0; border: 0; background: none; cursor: pointer; } .wk-jar img { width: 100%; } .wk-jc { position: absolute; left: 30%; top: 40%; width: 40% !important; }
.wkm-bear .wk-nums { margin-top: 8px; }
/* 轉時鐘 */
.wk-clockbox { position: relative; } .wk-clockbox.wk-ringing .wk-clock { animation: hcShake .1s linear 10; }
.wk-turn { position: absolute; right: -10px; bottom: -10px; width: clamp(56px, 11vh, 90px); aspect-ratio: 1; display: grid; place-items: center; border: 5px solid #fff; border-radius: 50%; background: linear-gradient(#f472b6, #db2777); color: #fff; box-shadow: 0 5px 0 #9d174d; cursor: pointer; animation: lb3Pulse 1.6s ease-in-out infinite; } .wk-turn svg { width: 55%; height: 55%; }
.wk-task { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 22px; border: 5px solid #fff; border-radius: 26px; background: #fff; box-shadow: 0 0 0 3px #f9a8d4, 0 10px 18px rgba(0, 0, 0, .12); } .wk-task img { width: clamp(90px, 20vh, 170px); height: auto; } .wk-task b { color: #db2777; font-size: clamp(26px, 5vh, 44px); font-weight: 900; } .wk-task small { color: #7c3aed; font-weight: 900; font-size: 20px; }
.wk-task.in { animation: tlPop .45s; }
/* 襪子 */
.wk-line { position: relative; height: 26%; display: flex; justify-content: center; gap: 12px; padding-top: 2%; border-top: 4px solid #a16207; border-radius: 50% 50% 0 0 / 20px 20px 0 0; }
.wk-pair { display: flex; filter: hue-rotate(var(--h)); animation: wkSway 2s ease-in-out infinite; transform-origin: 50% 0; } .wk-pair img { width: clamp(36px, 8vh, 64px); height: auto; } .wk-pair img + img { margin-left: -14px; transform: scaleX(-1); }
.wk-sockpile { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 10px 18px; }
.wk-sock { width: clamp(60px, 13vh, 110px); padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(var(--r)); filter: hue-rotate(var(--h)) drop-shadow(0 5px 4px rgba(0, 0, 0, .2)); transition: transform .2s; } .wk-sock img { width: 100%; }
.wk-sock.sel { transform: translateY(-12px) scale(1.15); filter: hue-rotate(var(--h)) drop-shadow(0 0 10px #fde047); } .wk-sock.gone { visibility: hidden; }
.wk-sock.alone { animation: lb3Pulse 1s ease-in-out infinite; filter: hue-rotate(var(--h)) drop-shadow(0 0 10px #f43f5e); }
@keyframes wkSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
/* 打鼓 */
.wk-band { flex: 1; display: flex; align-items: center; justify-content: center; }
.wk-drums { display: flex; gap: clamp(30px, 8vw, 110px); align-items: flex-end; }
.wk-drum { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 0; background: none; cursor: pointer; }
.wk-drum img { width: clamp(110px, 24vh, 210px); height: auto; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .25)); } .wk-drum.soft img, .wk-drum.slow img:first-child { width: clamp(70px, 14vh, 130px); }
.wk-drum .wk-dsm { width: clamp(50px, 10vh, 80px) !important; margin-top: -10%; }
.wk-drum b { padding: 4px 14px; border-radius: 99px; background: #fff; color: #4c1d95; font-weight: 900; font-size: clamp(14px, 2.6vh, 22px); box-shadow: 0 3px 0 #c4b5fd; }
.wk-drum.beat img { animation: shJump .3s ease-out 4; }
/* 凍結舞 */
.wk-dancers { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-end; gap: 3%; } .wk-dancers img { height: 70%; width: auto; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); }
.wk-dancers.dance img { animation: hs4Dance .45s ease-in-out infinite; animation-delay: var(--d); } .wk-dancers.still img { filter: grayscale(.1) drop-shadow(0 0 10px #7dd3fc); }
.wk-freeze { align-self: center; display: flex; align-items: center; gap: 10px; padding: 10px 34px; border: 5px solid #fff; border-radius: 99px; background: linear-gradient(#93c5fd, #2563eb); color: #fff; font-size: clamp(26px, 5vh, 44px); font-weight: 900; box-shadow: 0 6px 0 #1e3a8a; cursor: pointer; opacity: .6; transition: opacity .2s, transform .2s; }
.wk-freeze small { font-size: .6em; } .wk-freeze svg { width: 1em; height: 1em; } .wk-freeze.go { opacity: 1; transform: scale(1.12); animation: lb3Pulse .6s ease-in-out infinite; }
.wkm-freeze .kn-count { position: absolute; right: 10px; top: 0; }
/* Simon */
.wk-timer { width: min(420px, 70%); height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .7); overflow: hidden; } .wk-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #f472b6, #a855f7); }
.kn2 .kn-cc.mv-jump .kn-pose { animation: shJump .5s ease-out infinite; } .kn2 .kn-cc.mv-spin .kn-pose { animation: wkSpin 1s linear infinite; } .kn2 .kn-cc.mv-clap .kn-pose { animation: hs4Squeeze .3s ease-in-out infinite; }
.kn2 .kn-cc.mv-wave .kn-pose, .kn2 .kn-cc.mv-tilt .kn-pose { animation: hs4Dance .6s ease-in-out infinite; } .kn2 .kn-cc.mv-big .kn-pose { animation: lb3Pulse .6s ease-in-out infinite; } .kn2 .kn-cc.mv-bow .kn-pose, .kn2 .kn-cc.mv-nod .kn-pose { animation: wkBow .8s ease-in-out infinite; }
@keyframes wkSpin { to { transform: rotate(360deg); } } @keyframes wkBow { 0%, 100% { transform: none; } 50% { transform: rotate(20deg) translateY(10%); } }
/* 心情 */
.wk-kind { position: relative; grid-column: span 2; display: flex; align-items: center; justify-content: center; padding: 20px 50px 20px 20px; border: 5px solid #fff; border-radius: 26px; background: linear-gradient(#fff, #fdf2f8); box-shadow: 0 0 0 3px #f9a8d4, 0 6px 0 #f9a8d4; cursor: pointer; } .wk-kind b { color: #be185d; font-size: clamp(18px, 3.4vh, 30px); font-weight: 900; }
.wk-hearts { position: absolute; right: 10px; top: 0; display: flex; gap: 4px; } .wk-hearts i { font-style: normal; font-size: 30px; color: #e5e7eb; text-shadow: 0 1px 0 rgba(0, 0, 0, .1); } .wk-hearts i.on { color: #f43f5e; text-shadow: 0 0 8px rgba(244, 63, 94, .6); }
.wk-hearts i.got { animation: tlPop .4s; }
.wkm-feel .wk-faces { grid-template-columns: repeat(4, 1fr); }
@media (orientation: landscape) and (max-height: 520px) {
  .wk-fish { width: 90px; } .wk-mole b { font-size: 16px; } .wk-mface { display: none; } .wk-crate { width: 46px; font-size: 26px; } .wk-fall { width: 56px; }
  .wk-who b { font-size: 12px; } .wk-env { width: 70px; } .wk-env b { font-size: 18px; } .wk-postman { height: 56px; } .wk-task img { width: 70px; } .wk-task b { font-size: 20px; } .wk-task { padding: 6px 12px; }
  .wk-sock { width: 48px; } .wk-pair img { width: 30px; } .wk-drum img { width: 90px; } .wk-freeze { font-size: 22px; padding: 6px 20px; } .wk-kind { padding: 8px 40px 8px 10px; } .wk-kind b { font-size: 16px; } .wk-hearts i { font-size: 20px; }
}
.wk-spot:not(.open) .wk-who b { visibility: hidden; } .wk-spot:not(.open) .wk-who { transform: translateY(30%) scale(.85); }
.wk-hole { border-radius: 0; overflow: hidden; }
.wk-dirt { z-index: 2; height: 24%; bottom: 0; border-radius: 50% 50% 12px 12px; background: radial-gradient(ellipse at 50% 30%, #a16207, #78350f); box-shadow: 0 -4px 0 rgba(255, 255, 255, .25) inset; }
.wk-mole { bottom: 10%; height: 82%; padding-top: 4%; justify-content: flex-start; }
.wk-mole b { order: -1; margin-bottom: 4px; }
.wk-pond { background: none; }
.wk-fbody { inset: 6% 0 6% 22%; border-radius: 60% 50% 50% 60%; }
.wk-ftail { right: auto; left: 0; clip-path: polygon(100% 50%, 0 0, 0 100%); }
@media (orientation: landscape) and (max-height: 520px) { .wk-spot { height: 84%; } .wk-hideroom { padding-bottom: 0; } }
/* 本週主題：答案上的喇叭 */
.wk2 .wk-junk, .wk2 .wk-thing, .wk2 .wk-fish, .wk2 .wk-crate, .wk2 .wk-fall, .wk2 .wk-env, .wk2 .wk-drum, .wk2 .wk-freeze, .wk2 .wk-n, .wk2 .wk-bal { position: relative; }
.wk2 .wk-junk .kn-ear, .wk2 .wk-fall .kn-ear, .wk2 .wk-crate .kn-ear, .wk2 .wk-env .kn-ear { top: -6px; right: -6px; width: 30px; height: 30px; }
.wk2 .wk-fish .kn-ear { top: 0; right: 4%; }
.wk2 .wk-thing .kn-ear { top: 4px; right: 4px; z-index: 4; }
.wk2 .wk-mole .wk-mear { top: 2px; right: -4px; width: 30px; height: 30px; }
.wk2 .wk-n .kn-ear, .wk2 .wk-freeze .kn-ear { top: 50%; right: 8px; transform: translateY(-50%); width: 32px; height: 32px; }
.wk2 .wk-n { padding-right: 50px !important; } .wk2 .wk-freeze { padding-right: 56px; }
.wk2 .wk-bal .kn-ear { top: 6%; right: 4%; }
.wk2 .wk-drum .kn-ear { top: 0; right: 0; }
.wk2 .wk-dark .wk-thing:not(.got) .kn-ear { opacity: .75; }

/* 認字釣魚 v2 */
.wkm-fish .kn-stage { gap: 4px; }
.wkm-fish .wk-pond { position: relative; flex: 1; min-height: 0; overflow: hidden; background: none; }
.wkm-fish .wk-fish { position: absolute; top: calc(var(--lane) * 33.3% + 1%); left: -40%; height: 31%; aspect-ratio: 1.7; padding: 0; border: 0; background: none; cursor: pointer; animation: wkSwim2 var(--t) linear infinite, wkBob 2.4s ease-in-out infinite; animation-delay: var(--d), calc(var(--lane) * -.8s); }
.wkm-fish .wk-fish.rtl { animation-name: wkSwim2r, wkBob; }
.wkm-fish .wk-fsvg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 6px 6px rgba(30, 64, 175, .25)); }
.wkm-fish .wk-fish.rtl .wk-fsvg { transform: scaleX(-1); }
.wkm-fish .wk-fpic { position: absolute; left: 34%; top: 18%; width: 40%; height: 64%; border-radius: 50%; background: #fff; border: 4px solid rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .06); display: grid; place-items: center; overflow: hidden; }
.wkm-fish .wk-fish.rtl .wk-fpic { left: 26%; }
.wkm-fish .wk-fpic img { width: 88%; height: 88%; object-fit: contain; }
.wkm-fish .wk-fish .kn-ear { top: 4%; right: 8%; } .wkm-fish .wk-fish.rtl .kn-ear { right: auto; left: 8%; }
.wkm-fish .wk-hook { position: absolute; left: 54%; bottom: 100%; width: 3px; height: 0; background: #334155; transition: height .5s ease-out; }
.wkm-fish .wk-hook::after { content: ''; position: absolute; left: -7px; bottom: -14px; width: 12px; height: 14px; border: 3px solid #64748b; border-top: 0; border-radius: 0 0 10px 10px; }
.wkm-fish .wk-fish.hooked { animation-play-state: paused; z-index: 5; }
.wkm-fish .wk-fish.hooked .wk-hook { height: 900px; }
.wkm-fish .wk-fish.hooked .wk-fsvg, .wkm-fish .wk-fish.hooked .wk-fpic { animation: wkWiggle .25s ease-in-out 4; }
.wkm-fish .wk-fish.shake .wk-fsvg { animation: hcShake .15s linear 3; }
.wkm-fish .wk-bucket b { font-size: 14px; }
.wkm-fish .wk-plank b { font-size: clamp(32px, 7vh, 64px); }
@keyframes wkSwim2 { from { left: -40%; } to { left: 104%; } }
@keyframes wkSwim2r { from { left: 104%; } to { left: -40%; } }
@keyframes wkBob { 0%, 100% { margin-top: 0; } 50% { margin-top: 8px; } }
@keyframes wkWiggle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }
.wkm-fish .wk-fish { height: 32%; aspect-ratio: 1.9; }
.wkm-fish .wk-fpic { left: 31%; top: 12%; width: 46%; height: 76%; } .wkm-fish .wk-fish.rtl .wk-fpic { left: 23%; }
.wkm-fish .wk-fpic img { width: 96%; height: 96%; }
.wkm-fish .wk-hook { opacity: 0; } .wkm-fish .wk-fish.hooked .wk-hook { opacity: 1; }
.wkm-fish .wk-fpic { top: 18%; height: 64%; width: 40%; left: 34%; } .wkm-fish .wk-fish.rtl .wk-fpic { left: 26%; }

/* 認字翻翻樂 */
.wk-memo { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3%; padding: 1% 4%; perspective: 900px; }
.wk-mc { position: relative; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .45s; animation: tlPop .4s both; animation-delay: var(--d); }
.wk-mc.flip, .wk-mc.ok { transform: rotateY(180deg); }
.wk-mback, .wk-mfront { position: absolute; inset: 0; border: 5px solid #fff; border-radius: 22px; backface-visibility: hidden; display: grid; place-items: center; box-shadow: 0 6px 0 rgba(0, 0, 0, .12), 0 10px 16px rgba(0, 0, 0, .12); }
.wk-mback { background: radial-gradient(rgba(255, 255, 255, .35) 3px, transparent 3.6px) 0 0 / 18px 18px, linear-gradient(135deg, #f472b6, #a855f7); color: #fff; font-size: clamp(40px, 9vh, 80px); font-weight: 900; text-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.wk-mfront { transform: rotateY(180deg); background: #fff; }
.wk-mfront b { color: #db2777; font-size: clamp(30px, 7vh, 60px); font-weight: 900; letter-spacing: .06em; }
.wk-mfront img { width: 80%; height: 80%; object-fit: contain; }
.wk-mc.ok .wk-mfront { border-color: #86efac; box-shadow: 0 0 0 4px #22c55e, 0 0 20px rgba(34, 197, 94, .5); }
.wk-mc .kn-ear { opacity: 0; } .wk-mc.flip .kn-ear, .wk-mc.ok .kn-ear { opacity: 1; }
.wkm-memory .kn-count { align-self: center; }
@media (orientation: landscape) and (max-height: 520px) { .wk-mfront b { font-size: 24px; } .wk-mback { font-size: 30px; } .wk-mback, .wk-mfront { border-width: 3px; border-radius: 14px; } }

/* 打地鼠 v2 */
.wkm-mole .wk-holes { gap: 2% 6%; padding: 7% 6% 4%; }
.wkm-mole .wk-hole { position: relative; overflow: visible; border-radius: 0; }
.wk-hback { position: absolute; left: 6%; right: 6%; bottom: 8%; height: 26%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #1c1206, #3f2a14 70%); box-shadow: inset 0 8px 10px rgba(0, 0, 0, .5); z-index: 0; }
.wk-hfront { position: absolute; left: 0; right: 0; bottom: 0; height: 20%; z-index: 3; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(#86efac, #4ade80); box-shadow: 0 6px 0 #16a34a; }
.wk-hfront::before { content: ''; position: absolute; left: 4%; right: 4%; top: -6px; height: 14px; border-radius: 50%; background: #a16207; }
.wkm-mole .wk-mole { position: absolute; left: 14%; right: 14%; bottom: 14%; height: 92%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; z-index: 1; display: block; transform: translateY(70%) scale(.9); opacity: 0; transition: transform .28s cubic-bezier(.2, 1.5, .4, 1), opacity .15s; }
.wkm-mole .wk-mole.up { transform: translateY(0) scale(1); opacity: 1; }
.wkm-mole .wk-mole.bonk { transform: translateY(18%) scale(1.05, .85); }
.wk-msvg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 78%; }
.wk-mdizzy { display: none; } .wk-mole.bonk .wk-meyes { display: none; } .wk-mole.bonk .wk-mdizzy { display: inline; }
.wk-msign { position: absolute; left: 50%; top: 0; transform: translateX(-50%) rotate(-3deg); padding: 4px 14px; border-radius: 12px; background: linear-gradient(#fde68a, #fbbf24); border: 3px solid #fff; box-shadow: 0 4px 0 #b45309; white-space: nowrap; }
.wk-msign b { color: #7c2d12; font-size: clamp(22px, 4.6vh, 40px); font-weight: 900; }
.wk-stars { position: absolute; left: 50%; top: 22%; margin-left: -40px; width: 80px; text-align: center; color: #facc15; font-style: normal; font-size: 22px; letter-spacing: 6px; opacity: 0; text-shadow: 0 0 6px #fff; }
.wk-mole.bonk .wk-stars { opacity: 1; animation: wkSpin 1s linear infinite; }
.wkm-mole .wk-mole .wk-mear { top: 2%; right: -10%; z-index: 4; }
.wk-hammer { position: absolute; z-index: 20; width: 70px; height: 70px; pointer-events: none; opacity: 0; transform-origin: 80% 90%; }
.wk-hammer i { position: absolute; left: 0; top: 0; width: 56px; height: 34px; border-radius: 10px; background: linear-gradient(#f87171, #dc2626); border: 3px solid #fff; }
.wk-hammer::after { content: ''; position: absolute; left: 24px; top: 30px; width: 10px; height: 46px; border-radius: 5px; background: #a16207; }
.wk-hammer.hit { animation: wkHit .35s ease-out; }
@keyframes wkHit { 0% { opacity: 1; transform: rotate(-60deg); } 50% { opacity: 1; transform: rotate(10deg); } 100% { opacity: 0; transform: rotate(0); } }
.wkm-mole .wk-target { position: absolute; left: 50%; top: 0; right: auto; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 8px; width: max-content; height: auto; padding: 6px 18px 6px 12px; border-radius: 99px; background: linear-gradient(#a78bfa, #7c3aed); color: #fff; font-weight: 900; font-size: clamp(16px, 2.6vh, 22px); box-shadow: 0 4px 0 #5b21b6; cursor: pointer; }
.wkm-mole .wk-target svg { width: 1.3em; height: 1.3em; } .wkm-mole .wk-target.in { animation: tlPop .4s; }
.wkm-mole .kn-count { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 6; }
@media (orientation: landscape) and (max-height: 520px) { .wk-msign b { font-size: 16px; } .wk-msign { padding: 1px 8px; border-width: 2px; } .wkm-mole .wk-target { font-size: 13px; padding: 3px 12px 3px 8px; } }
.wk-seat.full { position: relative; } .wk-seat.full .kn-ear { top: -10px; right: -10px; width: 30px; height: 30px; }

/* 小蜜蜂採花蜜 */
.wk-garden { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 1%; padding: 16% 2% 0; }
.wk-flw { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0; border: 0; background: none; cursor: pointer; transform: translateY(var(--y)); animation: wkSway 3s ease-in-out infinite; animation-delay: var(--d); transform-origin: 50% 100%; }
.wk-fhead { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.wk-petal { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: hue-rotate(var(--h)) drop-shadow(0 5px 5px rgba(0, 0, 0, .15)); }
.wk-garden .wk-fpic { position: relative; width: 54%; aspect-ratio: 1; border-radius: 50%; background: #fff; border: 4px solid #fff; box-shadow: 0 0 0 3px rgba(251, 191, 36, .8); display: grid; place-items: center; overflow: hidden; }
.wk-garden .wk-fpic img { width: 86%; height: 86%; object-fit: contain; }
.wk-stem { width: 10px; flex: 1; min-height: 30px; max-height: 40%; margin-top: -6%; border-radius: 6px; background: linear-gradient(90deg, #22c55e, #16a34a); position: relative; }
.wk-stem::before, .wk-stem::after { content: ''; position: absolute; top: 30%; width: 28px; height: 14px; border-radius: 50% 0; background: #4ade80; }
.wk-stem::before { right: 8px; transform: rotate(-20deg); } .wk-stem::after { left: 8px; transform: scaleX(-1) rotate(-20deg); }
.wk-flw .kn-ear { top: 0; right: 4%; }
.wk-flw.got .wk-fpic { box-shadow: 0 0 0 4px #22c55e, 0 0 18px rgba(34, 197, 94, .7); }
.wk-flw.got { animation: tlPop .45s; }
.wk-flw.shake .wk-fhead { animation: hcShake .15s linear 3; }
.wk-bee { position: absolute; left: 50%; top: 0; z-index: 8; width: clamp(80px, 15vh, 130px); transform: translate(-50%, -40%); transition: left .7s ease-in-out, top .7s cubic-bezier(.4, -0.6, .6, 1); pointer-events: none; }
.wk-bee img { width: 100%; height: auto; animation: wkBuzz .6s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); }
.wk-bee b { position: absolute; right: -14%; top: -6%; min-width: 1.4em; padding: 0 8px; border-radius: 14px; background: linear-gradient(#fde68a, #f59e0b); border: 3px solid #fff; color: #7c2d12; font-size: clamp(24px, 5vh, 42px); font-weight: 900; text-align: center; box-shadow: 0 3px 0 #b45309; }
.wk-bee.no img { animation: hcShake .15s linear 4; } .wk-bee.happy img { animation: shJump .5s ease-out 2; }
.wk-honey { position: absolute; right: 0; top: 0; z-index: 6; width: clamp(64px, 12vh, 110px); display: flex; flex-direction: column; align-items: center; } .wk-honey img { width: 100%; }
.wk-honey b { margin-top: -8px; padding: 0 10px; border-radius: 99px; background: #fff; color: #b45309; font-weight: 900; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); white-space: nowrap; }
.wk-honey.got { animation: tlPop .4s; }
@keyframes wkBuzz { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@media (orientation: landscape) and (max-height: 520px) { .wk-garden { padding-top: 10%; } .wk-garden .wk-fpic { border-width: 2px; } .wk-stem { min-height: 14px; } }
.wk-garden { gap: 0; padding: 12% 0 0; }
.wk-fhead { width: 118%; flex: none; } .wk-garden .wk-fpic { width: 62%; }
.wk-stem { max-height: 28%; min-height: 20px; }
.wk-flw .wk-fhead .kn-ear { top: 2%; right: 4%; }

/* ═════ 本週主題：冒險地圖 ═════ */
.wkm-bg { position: absolute; inset: -10px; z-index: -2; background: center / cover; animation: camDrift 30s ease-in-out infinite alternate; }
.wkm::before { background: linear-gradient(rgba(255, 255, 255, .12), rgba(253, 242, 248, .3)); }
.wkm-prog { position: relative; width: min(260px, 26vw); height: 26px; border-radius: 99px; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0, 0, 0, .12); overflow: hidden; }
.wkm-prog i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #f472b6, #a855f7, #60a5fa); }
.wkm-prog b { position: relative; display: block; text-align: center; line-height: 26px; color: #4c1d95; font-weight: 900; font-size: 13px; }
.wkm-map { position: relative; z-index: 2; flex: 1; min-height: 0; margin: 0 3% 2%; }
.wkm-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wkm-path path { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 2.4; stroke-dasharray: .1 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-width: 14px; }
.wkm-path path.done { stroke: #fde047; filter: drop-shadow(0 0 4px #fde047); }
.wkn { position: absolute; z-index: 3; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; animation: tlPop .5s both; animation-delay: calc(var(--k) * .06s); }
.wkn-ring { position: relative; width: clamp(70px, 13vh, 118px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff, #fdf2f8 60%, #fbcfe8); border: 5px solid #fff; box-shadow: 0 0 0 4px #f472b6, 0 7px 0 4px #be185d, 0 12px 20px rgba(0, 0, 0, .2); transition: transform .2s; }
.wkn-img { width: 74% !important; height: 74% !important; object-fit: contain; }
.wkn:active .wkn-ring { transform: scale(.94); }
.wkn-no { position: absolute; top: -6px; left: -6px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(#fde68a, #f59e0b); border: 3px solid #fff; color: #7c2d12; font-size: 17px; font-weight: 900; box-shadow: 0 3px 0 #b45309; } .wkn-no svg { width: 60%; height: 60%; }
.wkn-zi { position: absolute; top: -4px; right: -4px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #ef4444; border: 3px solid #fff; color: #fff; font-style: normal; font-weight: 900; font-size: 15px; box-shadow: 0 2px 0 #991b1b; }
.wkn-name { margin-top: 8px; max-width: 150px; padding: 3px 12px; border-radius: 99px; background: rgba(255, 255, 255, .95); color: #6d28d9; font-weight: 900; font-size: clamp(12px, 1.6vh, 15px); text-align: center; line-height: 1.2; box-shadow: 0 3px 8px rgba(0, 0, 0, .15); }
.wkn-st { margin-top: 2px; } .wkn-st i { font-style: normal; color: rgba(255, 255, 255, .85); font-size: 18px; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .wkn-st i.on { color: #facc15; text-shadow: 0 0 6px rgba(250, 204, 21, .9), 0 1px 1px rgba(0, 0, 0, .3); }
.wkn.done .wkn-ring { box-shadow: 0 0 0 4px #22c55e, 0 7px 0 4px #15803d, 0 12px 20px rgba(0, 0, 0, .2); }
.wkn.locked { cursor: default; } .wkn.locked .wkn-ring { filter: grayscale(.85) brightness(.9); box-shadow: 0 0 0 4px #cbd5e1, 0 7px 0 4px #94a3b8; } .wkn.locked .wkn-img { opacity: .55; } .wkn.locked .wkn-st { display: none; }
.wkn-lock { position: absolute; inset: 0; display: grid; place-items: center; color: #475569; } .wkn-lock svg { width: 38%; height: 38%; filter: drop-shadow(0 2px 0 #fff); }
.wkn.cur .wkn-ring { animation: wkCur 1.4s ease-in-out infinite; box-shadow: 0 0 0 4px #fde047, 0 7px 0 4px #ca8a04, 0 0 30px 10px rgba(253, 224, 71, .7); }
.wkn.fresh .wkn-ring { animation: wkFresh .9s cubic-bezier(.2, 1.6, .4, 1), wkCur 1.4s 1s ease-in-out infinite; }
.wkn.boss .wkn-ring { width: clamp(100px, 19vh, 160px); background: radial-gradient(circle at 35% 30%, #f5f3ff, #c4b5fd 70%, #8b5cf6); box-shadow: 0 0 0 5px #7c3aed, 0 8px 0 5px #4c1d95, 0 0 30px rgba(124, 58, 237, .6); }
.wkn.boss .wkn-img { width: 92% !important; height: 92% !important; }
.wkn.boss .wkn-no { background: linear-gradient(#fde047, #f59e0b); color: #7c2d12; }
.wkn.boss.locked .wkn-img { opacity: .8; filter: brightness(.4); }
@keyframes wkCur { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes wkFresh { 0% { transform: scale(0) rotate(-180deg); } 100% { transform: scale(1) rotate(0); } }
.wkm-cc { position: absolute; z-index: 4; width: clamp(60px, 11vh, 96px); transform: translate(-50%, -128%); pointer-events: none; animation: shJump 1.2s ease-in-out infinite; }
.wkm-cc .wkm-owl { width: 100% !important; height: auto; }
.wkm-badge { position: absolute; left: 50%; top: 46%; z-index: 5; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; padding: 10px 26px; border: 5px solid #fff; border-radius: 26px; background: linear-gradient(#fef3c7, #fde68a); box-shadow: 0 0 0 4px #f59e0b, 0 0 40px rgba(253, 224, 71, .8); }
.wkm-badge span { font-size: 60px; animation: hdStar 2s ease-in-out infinite; } .wkm-badge b { color: #92400e; font-weight: 900; font-size: 20px; }
/* 每站結果 */
.wkr { align-items: center; justify-content: center; }
.wkr-card { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 40px; border: 5px solid #fff; border-radius: 34px; background: radial-gradient(rgba(255, 255, 255, .6) 2px, transparent 2.6px) 0 0 / 16px 16px, linear-gradient(160deg, #fdf2f8, #f5f3ff 60%, #fef9c3); box-shadow: 0 0 0 4px #f9a8d4, 0 0 0 8px #fde68a, 0 24px 50px rgba(76, 29, 149, .3); animation: hcwIn .5s cubic-bezier(.2, 1.5, .4, 1) both; text-align: center; }
.wkr-card h1 { margin: 0; color: #db2777; font-weight: 900; font-size: clamp(26px, 5vh, 42px); } .wkr-card p { margin: 0; color: #6d28d9; font-weight: 800; font-size: 18px; }
.wkr-pic { width: clamp(100px, 20vh, 160px); aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 5px #fde68a, 0 0 30px rgba(253, 224, 71, .8); animation: hdStar 2.4s ease-in-out infinite; } .wkr-pic .wk-pic { width: 76%; height: 76%; }
.wkr-boss { width: clamp(120px, 26vh, 200px); height: auto; } .wkr-boss.beaten { animation: hcShake .2s linear 4; filter: grayscale(.2); }
.wkr-stars { display: flex; gap: 10px; } .wkr-stars i { font-style: normal; font-size: clamp(50px, 10vh, 80px); color: #e5e7eb; } .wkr-stars i.on { color: #facc15; text-shadow: 0 0 16px rgba(250, 204, 21, .9); animation: wkStar .6s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--k) * .3s + .3s); }
@keyframes wkStar { from { transform: scale(0) rotate(-120deg); } }
.wkr-go { animation: tlNext 1.4s ease-in-out infinite; }
.wkr-card.lost { box-shadow: 0 0 0 4px #c4b5fd, 0 24px 50px rgba(76, 29, 149, .3); }
/* 連擊 */
.wk-combo { position: absolute; left: 50%; top: 8px; z-index: 40; display: flex; align-items: baseline; gap: 6px; padding: 4px 18px; border-radius: 99px; background: linear-gradient(#fb923c, #ef4444); border: 3px solid #fff; color: #fff; box-shadow: 0 4px 0 #b91c1c, 0 0 18px rgba(249, 115, 22, .7); transform: translateX(-50%); pointer-events: none; }
.wk-combo b { font-size: 24px; font-weight: 900; } .wk-combo small { font-weight: 900; letter-spacing: .06em; }
.wk-combo.pop { animation: wkComboPop .5s cubic-bezier(.2, 1.6, .4, 1); }
.wk-combo.big { background: linear-gradient(#facc15, #f97316); transform: translateX(-50%) scale(1.15); } .wk-combo.mega { background: linear-gradient(#c084fc, #db2777); transform: translateX(-50%) scale(1.3); }
@keyframes wkComboPop { 0% { transform: translateX(-50%) scale(.3); } 60% { transform: translateX(-50%) scale(1.3); } }
@media (orientation: landscape) and (max-height: 520px) {
  .wkn-ring { width: 54px; border-width: 3px; } .wkn.boss .wkn-ring { width: 80px; } .wkn-name { font-size: 10px; padding: 1px 6px; max-width: 96px; margin-top: 4px; } .wkn-st i { font-size: 12px; }
  .wkn-no { width: 24px; height: 24px; font-size: 12px; } .wkn-zi { width: 22px; height: 22px; font-size: 11px; } .wkm-prog { height: 20px; } .wkm-prog b { line-height: 20px; font-size: 11px; }
  .wk-par { font-size: 0; padding: 6px; } .wk-par svg { font-size: 16px; } .wkr-card { padding: 10px 24px; gap: 4px; }
}
.wkn { animation: none !important; } .wkn-ring { animation: wkIn .5s cubic-bezier(.2, 1.5, .4, 1) backwards; } .wkn.cur .wkn-ring { animation: wkIn .5s cubic-bezier(.2, 1.5, .4, 1) backwards, wkCur 1.4s .5s ease-in-out infinite; } @keyframes wkIn { from { transform: scale(.3); } }
.wkm-bg { inset: 0; animation: none; background-size: cover; background-position: center; } .wkm::before { display: none; } .wkm-map { margin: 0; }
.wkm-cc { transform: translate(-50%, -100%); margin-top: calc(clamp(70px, 13vh, 118px) / -2 - 8px); width: clamp(54px, 9vh, 84px); } @media (orientation: landscape) and (max-height: 520px) { .wkm-cc { margin-top: -34px; width: 44px; } }

/* ═════ 本週主題 v4：三個科目、只做學校教材 ═════ */
.wkm-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 99px; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0, 0, 0, .12); }
.wkm-tab { display: flex; align-items: center; gap: 6px; padding: 5px 14px; border: 0; border-radius: 99px; background: none; color: var(--c); font-weight: 900; cursor: pointer; }
.wkm-tab b { font-size: clamp(14px, 1.7vw, 18px); } .wkm-tab small { padding: 0 7px; border-radius: 99px; background: color-mix(in srgb, var(--c) 18%, #fff); font-weight: 900; font-size: 12px; }
.wkm-tab.on { background: var(--c); color: #fff; box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 70%, #000); } .wkm-tab.on small { background: rgba(255, 255, 255, .3); color: #fff; }
.wkm-badge small { color: #b45309; font-weight: 800; }
.wk-seatq { display: grid; place-items: center; width: 100%; height: 100%; font-size: 40px; font-weight: 900; color: #7c3aed; }
/* 看圖學字 */
.wk-learn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.wk-lcard { display: flex; align-items: center; gap: 4%; width: min(760px, 96%); padding: 18px 26px; border: 6px solid #fff; border-radius: 34px; background: radial-gradient(rgba(255, 255, 255, .6) 2px, transparent 2.6px) 0 0 / 16px 16px, linear-gradient(135deg, #fff7ed, #fdf2f8); box-shadow: 0 0 0 4px #fdba74, 0 12px 24px rgba(0, 0, 0, .14); }
.wk-lcard.in { animation: hcwIn .45s cubic-bezier(.2, 1.5, .4, 1); }
.wk-lpic { flex: none; width: clamp(130px, 30vh, 250px); aspect-ratio: 1; border-radius: 26px; background: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 3px #fed7aa; } .wk-lpic img { width: 88%; height: 88%; object-fit: contain; }
.wk-lword { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; }
.wk-lword b { display: grid; place-items: center; width: clamp(80px, 17vh, 140px); aspect-ratio: 1; border-radius: 18px; background: #fff; box-shadow: 0 0 0 3px #f9a8d4, 0 5px 0 #f472b6; color: #be185d; font-size: clamp(52px, 12vh, 104px); font-weight: 900; background-image: linear-gradient(#fbcfe8 1px, transparent 1px), linear-gradient(90deg, #fbcfe8 1px, transparent 1px); background-size: 50% 50%; background-position: center; }
.wk-lword svg { width: 40px; height: 40px; color: #7c3aed; margin-left: 6px; }
.wk-ldots { display: flex; gap: 6px; } .wk-ldots i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 2px #fdba74; } .wk-ldots i.on { background: #f97316; } .wk-ldots i.now { background: #fde047; transform: scale(1.3); }
.wk-lnext { animation: tlNext 1.6s ease-in-out infinite; }
/* 找字 */
.wk-fc { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.wk-fctop { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 56px 8px 22px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 4px #fdba74; color: #9a3412; font-weight: 900; font-size: clamp(20px, 3.4vh, 30px); } .wk-fctop .kn-ear { top: 50%; right: 8px; transform: translateY(-50%); }
.wk-fctop.in { animation: tlPop .4s; }
.wk-fcch { display: grid; place-items: center; width: 1.8em; aspect-ratio: 1; border-radius: 14px; background: linear-gradient(#fde68a, #f59e0b); color: #7c2d12; font-size: 1.6em; box-shadow: 0 4px 0 #b45309; }
.wk-fcsent { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 18px 60px 18px 24px; border: 5px solid #fff; border-radius: 28px; background: linear-gradient(#fff, #fff7ed); box-shadow: 0 0 0 3px #fed7aa, 0 10px 18px rgba(0, 0, 0, .1); } .wk-fcsent > .kn-ear { top: 50%; right: 10px; transform: translateY(-50%); }
.wk-fcc { width: clamp(60px, 11vh, 96px); aspect-ratio: 1; border: 0; border-radius: 16px; background: #fff7ed; box-shadow: 0 4px 0 #fed7aa; color: #3b0764; font-size: clamp(36px, 7.4vh, 64px); font-weight: 900; cursor: pointer; transition: transform .15s; }
.wk-fcc.ok { background: linear-gradient(#bbf7d0, #4ade80); color: #14532d; box-shadow: 0 0 0 3px #22c55e, 0 4px 0 #15803d; transform: scale(1.08); }
.wk-fcp { display: grid; place-items: end center; width: .7em; font-size: clamp(36px, 7.4vh, 64px); font-style: normal; font-weight: 900; color: #6b5a80; }
.wkm-findchar .kn-count, .wkm-pinyin .kn-count { position: absolute; right: 8px; top: 0; }
/* 句式 */
.wk-bd { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.wk-bdline { display: flex; align-items: flex-end; gap: 8px; padding: 14px 18px; border: 5px solid #fff; border-radius: 26px; background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 3px #fdba74, 0 10px 18px rgba(0, 0, 0, .1); }
.wk-bdline.got { animation: tlPop .45s; box-shadow: 0 0 0 4px #22c55e, 0 10px 18px rgba(0, 0, 0, .1); }
.wk-bslot { position: relative; min-width: clamp(54px, 10vh, 86px); height: clamp(64px, 12vh, 100px); border-radius: 14px; border: 3px dashed #fdba74; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 2px 6px; }
.wk-bslot.full { border: 0; background: #fff7ed; box-shadow: 0 4px 0 #fed7aa; } .wk-bslot.pic { min-width: clamp(90px, 16vh, 130px); height: clamp(96px, 18vh, 150px); }
.wk-bslot img { flex: 1; min-height: 0; width: 100%; object-fit: contain; } .wk-bslot b { color: #9a3412; font-size: clamp(26px, 5vh, 46px); font-weight: 900; line-height: 1.1; } .wk-bslot .kn-ear { display: none; }
.wk-bdend { font-style: normal; font-size: clamp(30px, 6vh, 52px); font-weight: 900; color: #9a3412; }
.wk-bdpool { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.wk-bt { position: relative; min-width: clamp(62px, 11vh, 96px); height: clamp(70px, 13vh, 110px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 10px; border: 4px solid #fff; border-radius: 18px; background: linear-gradient(#fff, #fff7ed); box-shadow: 0 0 0 3px #fdba74, 0 6px 0 #f97316; cursor: pointer; animation: wkFloat 2.6s ease-in-out infinite; }
.wk-bt.pic { min-width: clamp(100px, 18vh, 150px); height: clamp(110px, 20vh, 170px); } .wk-bt img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.wk-bt b { color: #9a3412; font-size: clamp(28px, 5.4vh, 48px); font-weight: 900; line-height: 1.1; } .wk-bt.used { visibility: hidden; } .wk-bt .kn-ear { top: -10px; right: -10px; width: 28px; height: 28px; }
/* 拼音 */
.wk-py { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.wk-pyear { display: flex; flex-direction: column; align-items: center; width: clamp(80px, 15vh, 120px); aspect-ratio: 1; justify-content: center; border: 5px solid #fff; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fef9c3, #facc15 55%, #eab308); color: #9a3412; box-shadow: 0 6px 0 #a16207; cursor: pointer; animation: lb3Pulse 1.6s ease-in-out infinite; } .wk-pyear svg { width: 42%; height: 42%; } .wk-pyear small { font-weight: 900; }
.wk-pyeq { display: flex; align-items: center; gap: 10px; } .wk-pyeq > i { font-style: normal; font-size: 38px; font-weight: 900; color: #7c3aed; }
.wk-pyb { display: grid; place-items: center; min-width: clamp(70px, 13vh, 110px); height: clamp(70px, 13vh, 110px); padding: 0 10px; border-radius: 20px; background: rgba(255, 255, 255, .9); border: 4px dashed #c4b5fd; color: #6d28d9; font-size: clamp(36px, 7vh, 60px); font-weight: 900; }
.wk-pyb.ok { border-style: solid; border-color: #22c55e; background: #f0fdf4; color: #15803d; } .wk-pyb.r { flex-direction: column; min-width: clamp(110px, 20vh, 160px); line-height: 1; } .wk-pyb small { font-size: .5em; color: #be185d; }
.wk-pyrow { display: flex; gap: 10px; } .wk-pyk { width: clamp(58px, 10.5vh, 86px); aspect-ratio: 1; border: 4px solid #fff; border-radius: 18px; background: linear-gradient(#bfdbfe, #60a5fa); color: #1e3a8a; font-size: clamp(30px, 6vh, 50px); font-weight: 900; box-shadow: 0 5px 0 #2563eb; cursor: pointer; }
.wk-pyk.f { background: linear-gradient(#fbcfe8, #f472b6); color: #831843; box-shadow: 0 5px 0 #db2777; opacity: .45; } .fin-on .wk-pyk.f, .kn-stage.fin-on .wk-pyk.f { opacity: 1; }
/* 讀本 */
.wk-rd { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.wk-rdbook { display: flex; align-items: center; gap: 4%; width: min(820px, 96%); padding: 18px 26px; border: 6px solid #fff; border-radius: 30px; background: linear-gradient(90deg, #fffbeb, #fff 50%, #fffbeb); box-shadow: 0 0 0 4px #86efac, 0 12px 24px rgba(0, 0, 0, .14); }
.wk-rdbook.in { animation: tlPop .4s; }
.wk-rdpic { flex: none; width: clamp(120px, 26vh, 220px); aspect-ratio: 1; display: grid; place-items: center; } .wk-rdpic img { width: 100%; height: 100%; object-fit: contain; }
.wk-rdtext { flex: 1; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.wk-rdw { padding: 4px 10px; border: 0; border-radius: 12px; background: #f0fdf4; color: #14532d; font-size: clamp(30px, 6.4vh, 56px); font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 #bbf7d0; } .wk-rdw.lit, .wk-rdw.bop { background: #fde047; color: #7c2d12; }
.wk-rdbar { display: flex; gap: 14px; } .wk-rdnext { animation: tlNext 1.6s ease-in-out infinite; }
.wk-rdq { display: flex; gap: 20px; } .wk-rdo { position: relative; width: clamp(110px, 22vh, 190px); aspect-ratio: 1; padding: 10px; border: 5px solid #fff; border-radius: 26px; background: #fff; box-shadow: 0 0 0 3px #bbf7d0, 0 6px 0 #86efac; cursor: pointer; } .wk-rdo img { width: 100%; height: 100%; object-fit: contain; }
/* 寫字母、數字 */
.wk-tr2 { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 4%; }
.wk-tr2box { position: relative; height: 100%; max-height: 96%; aspect-ratio: 1.15; border: 6px solid #fff; border-radius: 30px; background: #fff; box-shadow: 0 0 0 4px #c4b5fd, 0 12px 24px rgba(0, 0, 0, .14); background-image: linear-gradient(transparent 49.5%, #ede9fe 49.5%, #ede9fe 50.5%, transparent 50.5%); touch-action: none; }
.wk-tr2box canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .wk-ti { cursor: crosshair; }
.wk-tstart { position: absolute; width: 26px; height: 26px; margin: -13px; border-radius: 50%; background: #22c55e; border: 4px solid #fff; box-shadow: 0 0 0 3px #22c55e; animation: lb3Pulse 1s ease-in-out infinite; pointer-events: none; }
.wk-tr2side { display: flex; flex-direction: column; align-items: center; gap: 10px; } .wk-tr2ch { display: grid; place-items: center; width: clamp(80px, 14vh, 120px); aspect-ratio: 1; border-radius: 22px; background: linear-gradient(#ddd6fe, #a78bfa); color: #fff; font-size: clamp(44px, 9vh, 76px); font-weight: 900; box-shadow: 0 5px 0 #7c3aed; }
/* 數字小路 */
.wk-nl { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.wk-nlpath { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.wk-nlt { display: grid; place-items: center; width: clamp(64px, 11vh, 96px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, hsl(var(--h) 85% 82%)); border: 4px solid #fff; box-shadow: 0 5px 0 hsl(var(--h) 60% 60%); }
.wk-nlt:nth-child(even) { transform: translateY(16px); } .wk-nlt b { color: #1e1b4b; font-size: clamp(26px, 5vh, 42px); font-weight: 900; }
.wk-nlt.gap { background: rgba(255, 255, 255, .6); border-style: dashed; border-color: #a78bfa; } .wk-nlt.gap b { color: #a78bfa; } .wk-nlt.ok { box-shadow: 0 0 0 4px #22c55e, 0 5px 0 #15803d; } .wk-nlt.bop { animation: shJump .4s ease-out; }
/* 分類 */
.wk-sort { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.wk-snow { width: clamp(110px, 22vh, 180px); aspect-ratio: 1; display: grid; place-items: center; } .wk-snow.in { animation: tlPop .4s; }
.wk-bins { display: flex; gap: clamp(12px, 3vw, 30px); }
.wk-bin { position: relative; width: clamp(140px, 22vw, 220px); min-height: clamp(130px, 26vh, 210px); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 5px solid #fff; border-radius: 0 0 40px 40px; background: linear-gradient(#fef3c7, #fbbf24); box-shadow: 0 6px 0 #b45309, 0 12px 18px rgba(0, 0, 0, .15); cursor: pointer; }
.wk-bin b { color: #7c2d12; font-weight: 900; font-size: clamp(18px, 3vh, 26px); } .wk-bin.got { animation: tlPop .4s; }
.wk-swatch { width: 48px; height: 48px; border-radius: 50%; border: 4px solid #fff; } .wk-shp { width: 52px; height: 52px; } .wk-shp svg * { stroke: #7c2d12 !important; stroke-dasharray: 8 6; }
.wk-szl.big { font-size: 34px !important; } .wk-szl.small { font-size: 16px !important; }
.wk-binin { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; } .wk-binin i { width: 30px; height: 30px; display: grid; place-items: center; }
.wk-bin .kn-ear { top: -10px; right: -10px; }
/* 3 張圖卡排次序 */
.wk-sq { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.wk-sqslots { display: flex; gap: 16px; } .wk-sqs { display: flex; flex-direction: column; align-items: center; gap: 4px; } .wk-sqs small { padding: 2px 12px; border-radius: 99px; background: #14b8a6; color: #fff; font-weight: 900; }
.wk-sqs i { width: clamp(110px, 20vh, 170px); aspect-ratio: 1; border-radius: 22px; border: 4px dashed #5eead4; background: rgba(255, 255, 255, .7); display: grid; place-items: center; } .wk-sqs.full i { border-style: solid; background: #fff; } .wk-sqs i img { width: 88%; height: 88%; object-fit: contain; }
.wk-sqcards { display: flex; gap: 16px; } .wk-sqc { width: clamp(110px, 20vh, 170px); aspect-ratio: 1; padding: 8px; border: 5px solid #fff; border-radius: 22px; background: #fff; box-shadow: 0 0 0 3px #99f6e4, 0 6px 0 #2dd4bf; cursor: pointer; animation: wkFloat 2.6s ease-in-out infinite; } .wk-sqc img { width: 100%; height: 100%; object-fit: contain; } .wk-sqc.used { visibility: hidden; }
@media (orientation: landscape) and (max-height: 520px) {
  .wkm-tab { padding: 3px 9px; } .wkm-tab b { font-size: 12px; } .wkm-tab small { font-size: 10px; } .wkm-prog { display: none; }
  .wk-lcard { padding: 8px 14px; } .wk-lword b { font-size: 40px; width: 60px; } .wk-fc, .wk-bd, .wk-py, .wk-nl, .wk-sort, .wk-sq { gap: 8px; }
  .wk-bslot, .wk-bt { height: 56px; min-width: 46px; } .wk-bslot.pic, .wk-bt.pic { height: 74px; min-width: 70px; } .wk-bt b, .wk-bslot b { font-size: 22px; }
  .wk-pyk { width: 44px; font-size: 24px; } .wk-pyb { height: 52px; min-width: 52px; font-size: 26px; } .wk-pyear { width: 60px; }
  .wk-bin { min-height: 100px; width: 130px; } .wk-sqs i, .wk-sqc { width: 80px; } .wk-rdw { font-size: 22px; }
}
.wkm .wk-ribbon { white-space: nowrap; font-size: clamp(14px, 1.8vw, 20px); padding: 6px 16px; } @media (max-width: 1100px) { .wkm .wk-ribbon { display: none; } }
/* 翻翻樂：卡要真的翻過來（不要讓入場動畫蓋住翻轉；iPad Safari 要 -webkit-） */
.wk-mc { animation: none !important; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.wk-mback, .wk-mfront { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.wk-memo { animation: tlPop .4s; }
.wk-mc.flip .wk-mfront, .wk-mc.ok .wk-mfront { box-shadow: 0 0 0 4px #fde047, 0 10px 16px rgba(0, 0, 0, .12); }
.wk2 .wk-memo .wk-mc.flip, .wk2 .wk-memo .wk-mc.ok { transform: rotateY(180deg) !important; }

/* 字卡造句 */
.wk-lright { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wk-lsent { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 0 0 3px #fed7aa, 0 4px 0 #fdba74; color: #4c1d95; font-size: clamp(20px, 3.6vh, 32px); font-weight: 900; cursor: pointer; }
.wk-lsent em { font-style: normal; color: #db2777; text-decoration: underline 4px #fbcfe8; text-underline-offset: 6px; }
.wk-lsent svg { width: 26px; height: 26px; color: #7c3aed; flex: none; }
.wk-ltag { flex: none; padding: 2px 10px; border-radius: 99px; background: #f97316; color: #fff; font-size: .55em; }
@media (orientation: landscape) and (max-height: 520px) { .wk-lsent { font-size: 15px; padding: 4px 10px 4px 6px; } .wk-lright { gap: 6px; } }
/* 聽字開寶箱 */
.wk-chests { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.wk-ctarget { display: flex; align-items: center; gap: 10px; padding: 10px 22px 10px 14px; border: 4px solid #fff; border-radius: 99px; background: linear-gradient(#a78bfa, #7c3aed); color: #fff; font-weight: 900; font-size: clamp(18px, 3vh, 26px); box-shadow: 0 5px 0 #5b21b6; cursor: pointer; animation: lb3Pulse 1.8s ease-in-out infinite; } .wk-ctarget svg { width: 1.3em; height: 1.3em; }
.wk-crow { display: flex; gap: clamp(14px, 3vw, 36px); flex-wrap: wrap; justify-content: center; }
.wk-chest { position: relative; width: clamp(140px, 19vw, 210px); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; animation: wkFloat 2.8s ease-in-out infinite; animation-delay: var(--d); }
.wk-csvg { width: 100%; height: auto; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .2)); overflow: visible; }
.wk-clid { transform-origin: 8px 46px; transition: transform .45s cubic-bezier(.2, 1.5, .4, 1); } .wk-cglow { opacity: 0; transition: opacity .3s .2s; }
.wk-chest.open .wk-clid { transform: rotate(-38deg) translate(-6px, -10px); } .wk-chest.open .wk-cglow { opacity: 1; }
.wk-chest b { padding: 4px 16px; border-radius: 14px; background: #fff; color: #7c2d12; font-size: clamp(26px, 5vh, 44px); font-weight: 900; box-shadow: 0 0 0 3px #fcd34d, 0 4px 0 #f59e0b; white-space: nowrap; }
.wk-chest.open b { background: #dcfce7; box-shadow: 0 0 0 3px #22c55e, 0 4px 0 #15803d; }
.wk-chest .kn-ear { top: -6px; right: -6px; }
.wkm-chest .kn-count { position: absolute; right: 8px; top: 0; }
@media (orientation: landscape) and (max-height: 520px) { .wk-chest { width: 110px; } .wk-chest b { font-size: 20px; } .wk-chests { gap: 8px; } }
.wk-crow { flex-wrap: nowrap; } .wk-chest { width: clamp(110px, 17vw, 200px); }
.wk-chests { justify-content: flex-start; padding-top: 2%; } .wkm-chest .kn-cc .kn-say { display: none; }
/* 郵差送信：屋子固定大小，有屋頂和門 */
.wkm-post .kn-stage { justify-content: center; gap: 4vh; }
.wkm-post .wk-street { flex: none; align-items: flex-end; padding: 6vh 0 0; gap: clamp(10px, 2vw, 24px); }
.wkm-post .wk-hs { flex: none; width: clamp(80px, 13vh, 128px); height: clamp(84px, 14vh, 136px); aspect-ratio: auto; padding: 0; justify-content: center; border-radius: 4px 4px 6px 6px; overflow: visible; }
.wkm-post .wk-hroof { left: -14%; right: -14%; top: -52%; height: 56%; z-index: 1; }
.wkm-post .wk-hs b { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); z-index: 2; min-width: 58%; font-size: clamp(20px, 4vh, 34px); }
.wkm-post .wk-hdoor { position: absolute; bottom: 0; left: 50%; width: 36%; height: 44%; margin-left: -18%; border-radius: 30px 30px 0 0; }
.wkm-post .wk-hkid { left: 30%; width: 40%; height: 46%; bottom: 0; }
.wkm-post .wk-bag { flex: none; align-items: center; gap: clamp(10px, 2.4vw, 28px); }
.wkm-post .wk-env { width: clamp(80px, 13vh, 120px); }
.wkm-post .wk-postman { height: clamp(70px, 14vh, 120px); }
.wk2 .wk-mess .wk-junk { position: absolute; width: min(24%, 26vh); } .wk2 .wk-mess { overflow: hidden; }

/* 轉時鐘：鐘面數字可以點 */
.wk-cn { cursor: pointer; } .wk-cn circle { fill: #fdf4ff; stroke: #e9d5ff; stroke-width: 2; transition: fill .2s; } .wk-cn text { fill: #6d28d9; pointer-events: none; }
.wk-cn:hover circle { fill: #fbcfe8; } .wk-cn.on circle { fill: #db2777; stroke: #fff; } .wk-cn.on text { fill: #fff; }
.wkm-setclock .wk-clock { overflow: visible; }
.wk-cn { pointer-events: none; } .wk-cnb { position: absolute; z-index: 3; width: 17%; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .wk-cnb:active { background: rgba(219, 39, 119, .18); }
.wkm-setclock .wk-clockbox { touch-action: manipulation; cursor: pointer; }

/* ── 故事書館：夢幻雲上書館背景 ── */
.screen.library { position: relative; isolation: isolate; max-width: none; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.screen.library::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 246, 255, .18), rgba(250, 236, 255, .42)), url(../img/game/lib-bg.webp) center / cover, #f3e6ff; }
.screen.library > * { width: min(100%, 1100px); margin-left: auto; margin-right: auto; }
.screen.library > .bar { padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(155, 92, 255, .22); }
.screen.library > .bar h1 { color: #7c3aed; text-shadow: 0 2px 0 #fff, 0 0 14px rgba(255, 190, 240, .9); }
.library .lib-tabs .tab { border-radius: 99px; padding: 9px 26px; font-weight: 900; border: 0; background: rgba(255, 255, 255, .8); color: #9b5cff; box-shadow: 0 4px 0 #e4d4ff, 0 8px 18px rgba(155, 92, 255, .2); }
.library .lib-tabs .tab.on { background: linear-gradient(#ffb0e0, #d36bff 55%, #9b5cff); color: #fff; box-shadow: 0 4px 0 #7a35c9, 0 8px 20px rgba(155, 92, 255, .4); }
.library .lib-levels { justify-content: safe center; flex-wrap: nowrap; scrollbar-width: none; }
.library .lib-levels::-webkit-scrollbar { display: none; }
.library .lib-lv:not(.on) { background: rgba(255, 255, 255, .82); backdrop-filter: blur(6px); }
.library .lib-lv.on { background: linear-gradient(#ffb0e0, #d36bff 55%, #9b5cff); color: #fff; box-shadow: 0 4px 0 #7a35c9; }
.library .shelf-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; padding: 4px 2px 20px; }
.library .book-card { background: rgba(255, 255, 255, .86); backdrop-filter: blur(8px); border: 3px solid rgba(255, 255, 255, .95); box-shadow: 0 6px 0 #e9d5ff, 0 14px 30px rgba(155, 92, 255, .28), 0 0 0 4px rgba(255, 200, 240, .35); }
.library .book-card:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 8px 0 #e9d5ff, 0 18px 34px rgba(211, 107, 255, .38), 0 0 18px rgba(255, 230, 160, .7); }
.library .book-card b { color: #6b3fb8; }
.library .bk-cover { box-shadow: 0 4px 0 #f0e2ff, 0 0 0 3px #fff; }

/* ── 本週主題：分類籃子（顏色、形狀、大小） ── */
.wk-sort2 { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 1vh; min-height: 0; }
.wk-ped { position: relative; height: min(34vh, 260px); aspect-ratio: 1.7; display: flex; align-items: flex-end; justify-content: center; }
.wk-pedc { position: absolute; left: 8%; right: 8%; bottom: 0; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, #fff 55%, rgba(255, 255, 255, .7) 75%, rgba(255, 255, 255, 0)); box-shadow: 0 0 40px 10px rgba(255, 220, 250, .8); }
.wk-pedc::before, .wk-pedc::after { content: "✦"; position: absolute; top: -40%; color: #fde68a; font-size: clamp(16px, 3vh, 26px); text-shadow: 0 0 8px #fff; animation: twinkle 1.4s ease-in-out infinite alternate; }
.wk-pedc::before { left: 4%; } .wk-pedc::after { right: 4%; animation-delay: .7s; }
.wk-pedi { position: relative; z-index: 1; height: 100%; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 8%; padding-bottom: 7%; box-sizing: border-box; }
.wk-pedi > img { height: 88%; max-width: 70%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(120, 60, 160, .25)); animation: wkBob 2.4s ease-in-out infinite; }
.wk-pedi.in > * { animation: tlPop .45s, wkBob 2.4s .45s ease-in-out infinite; }
@keyframes wkBob { 50% { transform: translateY(-5%); } }
.wk-pz { height: 100%; padding: 0; border: 0; background: none; display: flex; align-items: flex-end; cursor: pointer; }
.wk-pz img { object-fit: contain; filter: drop-shadow(0 8px 10px rgba(120, 60, 160, .25)); transition: transform .15s; }
.wk-pz.big img { height: 92%; } .wk-pz.small img { height: 40%; }
.wk-pz:active img { transform: scale(.94); } .wk-pz.shake { animation: shake .4s; }
.wk-bks { display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 4vw, 48px); }
.wk-bk { position: relative; width: min(28vh, 22vw, 220px); padding: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wk-bk::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: 10%; height: 30%; border-radius: 50%; background: var(--c); opacity: .35; filter: blur(14px); }
.wk-bk > img { position: relative; width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(120, 60, 30, .25)); }
.wk-bk:active > img { transform: scale(.96); } .wk-bk.got { animation: tlPop .4s; } .wk-bk.shake { animation: shake .4s; }
.wk-sort2.size .wk-bk.big { width: min(34vh, 26vw, 260px); } .wk-sort2.size .wk-bk.small { width: min(20vh, 15vw, 150px); }
.wk-bkin { position: absolute; z-index: 2; left: 8%; right: 8%; top: 18%; height: 40%; pointer-events: none; }
.wk-bkin i { position: absolute; left: var(--x); bottom: calc(0% - var(--y)); width: 46%; aspect-ratio: 1; transform: translateX(-50%) rotate(var(--r)); animation: tlPop .35s; }
.wk-bkin img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .18)); }
.wk-sort2.size .wk-bk.small .wk-bkin i img { transform: scale(.55); transform-origin: bottom; }
.wk-bktag { position: relative; z-index: 3; margin-top: -10%; display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 99px; background: #fff; border: 3px solid var(--c); box-shadow: 0 4px 0 rgba(0, 0, 0, .1); }
.wk-bktag b { font-weight: 900; color: #5b2a86; font-size: clamp(15px, 2.6vh, 22px); }
.wk-bkdot { width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.wk-bkshp { width: 1.5em; height: 1.5em; fill: var(--c); stroke: #fff; stroke-width: 7; }
.wk-bk .kn-ear { top: 6%; right: -4%; z-index: 4; }
.wk-sdots { display: flex; gap: 8px; }
.wk-sdots i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .8); box-shadow: 0 2px 0 #e4d4ff; transition: .2s; }
.wk-sdots i.cur { transform: scale(1.3); background: #fde68a; } .wk-sdots i.on { background: linear-gradient(#f9a8d4, #a855f7); }

/* ── 選擇世界：夢幻浮島天空背景 ── */
.screen.worlds-pg { position: relative; isolation: isolate; }
.screen.worlds-pg::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 246, 255, .12), rgba(250, 236, 255, .35)), url(../img/game/worlds-bg.webp) center / cover, #f3e6ff; }
.worlds-pg > .bar { padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(155, 92, 255, .22); }
.worlds-pg > .bar h1 { color: #7c3aed; text-shadow: 0 2px 0 #fff, 0 0 14px rgba(255, 190, 240, .9); }
.worlds-pg > .sub { align-self: center; padding: 6px 18px; border-radius: 99px; background: rgba(255, 255, 255, .78); backdrop-filter: blur(6px); color: #6b3fb8; font-weight: 700; box-shadow: 0 4px 14px rgba(155, 92, 255, .18); }
.worlds-pg .wtile { box-shadow: 0 6px 0 rgba(233, 213, 255, .9), 0 14px 30px rgba(155, 92, 255, .28), 0 0 0 3px rgba(255, 255, 255, .85); }

/* ── 今日任務 2.0：分類標籤、生活任務、驚喜任務、7 天獎勵 ── */
.mq-cat { align-self: flex-start; padding: 1px 9px; border-radius: 99px; font-style: normal; font-size: 11px; font-weight: 900; color: #fff; background: #a855f7; }
.cat-learn .mq-cat { background: #8b5cf6; } .cat-play .mq-cat { background: #f97316; } .cat-care .mq-cat { background: #ec4899; } .cat-life .mq-cat { background: #16a34a; } .cat-bonus .mq-cat { background: #eab308; }
.mq-life { background: linear-gradient(#86efac, #22c55e); box-shadow: 0 4px 0 #15803d; }
.mq-bonus { width: 100%; padding: 8px 10px 10px; border-radius: 22px; background: linear-gradient(135deg, #fef9c3, #fce7f3); box-shadow: inset 0 0 0 2px #fde68a; display: flex; flex-direction: column; gap: 6px; }
.mq-bonus h3 { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: #b45309; font-size: 16px; } .mq-bonus h3 small { display: inline-flex; align-items: center; gap: 3px; color: #1565a8; }
.mq-bonus h3 svg, .mq-bonus h3 .gem { width: 18px; height: 18px; }
.mq-week { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px; border-radius: 18px; background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 2px #f5d0fe; }
.mq-week > span:first-child { color: #6d28d9; font-weight: 800; font-size: 13px; text-align: left; }
.mq-wdots { display: flex; gap: 5px; }
.mq-wdots i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 12px; color: #c4b5fd; background: #f3e8ff; }
.mq-wdots i.on { color: #fff; background: linear-gradient(#f9a8d4, #a855f7); box-shadow: 0 2px 0 #7e22ce; }
.mq-wdots i .spr { width: 22px; height: 22px; object-fit: contain; }
@media (orientation: landscape) and (max-height: 520px) { .mq-week { padding: 3px 10px; } .mq-wdots i { width: 20px; height: 20px; font-size: 10px; } .mq-cat { font-size: 9px; } .modal.mq { max-height: 96vh; overflow-y: auto; } }

/* ── 過關頁：夢幻慶祝背景（彩虹、煙花、氣球、雲朵台） ── */
.screen.win-pg { position: relative; isolation: isolate; }
.screen.win-pg::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 45% at 50% 42%, rgba(255, 252, 240, .55), rgba(255, 255, 255, 0) 70%), url(../img/game/win-bg.webp) center / cover, #fbe7ff; }
.win-pg > .tag { background: rgba(255, 255, 255, .85); box-shadow: 0 4px 14px rgba(155, 92, 255, .2); }
.win-pg > h1 { color: #7c3aed; text-shadow: 0 2px 0 #fff, 0 0 16px rgba(255, 255, 255, .95); }
.win-pg > .lead { display: inline-block; align-self: center; padding: 4px 16px; border-radius: 99px; background: rgba(255, 255, 255, .78); color: #6b3fb8; font-weight: 800; }
.win-pg .res-prize { filter: drop-shadow(0 0 24px rgba(255, 240, 200, .95)); }
@media (max-height: 520px) {
  .screen.win-pg { gap: 4px; padding-top: 6px; padding-bottom: 6px; justify-content: center; }
  .win-pg .res-prize, .win-pg .res-prize .res-chest { width: 26vh !important; height: 26vh !important; margin: 0 !important; }
  .win-pg .result-stars { transform: scale(.75); margin: -6px 0; }
  .win-pg > h1 { font-size: 20px; } .win-pg > .lead { padding: 2px 12px; font-size: 13px; }
  .win-pg .btn.big { padding: 8px 22px; font-size: 17px; }
}

/* 今日任務 3.0：分類顏色、遊樂園推介區發光 */
.cat-adv .mq-cat { background: #0ea5e9; } .cat-park .mq-cat { background: #f97316; }
.pz.pz-hi { position: relative; border-radius: 26px; box-shadow: 0 0 0 4px #fde68a, 0 0 30px 6px rgba(253, 224, 71, .75); animation: pzGlow 1.6s ease-in-out infinite alternate; }
@keyframes pzGlow { to { box-shadow: 0 0 0 4px #fbbf24, 0 0 40px 12px rgba(253, 224, 71, .9); } }
.pz-tip { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 auto 8px; width: fit-content; padding: 6px 16px; border-radius: 99px; background: linear-gradient(#fde047, #f59e0b); color: #7c2d12; font-weight: 900; box-shadow: 0 4px 0 #b45309; animation: tlNext 1.4s ease-in-out infinite; }
.pz-tip svg { width: 18px; height: 18px; }

/* ── 設定：夢幻雲朵月亮背景、半透明卡片 ── */
.screen.set-pg { position: relative; isolation: isolate; }
.screen.set-pg::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 248, 255, .1), rgba(250, 238, 255, .3)), url(../img/game/set-bg.webp) center / cover, #f3e6ff; }
.set-pg > .bar { padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(155, 92, 255, .22); }
.set-pg > .bar h1 { color: #7c3aed; text-shadow: 0 2px 0 #fff, 0 0 14px rgba(255, 190, 240, .9); }
.set-pg .card { background: rgba(255, 255, 255, .8); backdrop-filter: blur(10px); border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 6px 0 rgba(233, 213, 255, .9), 0 14px 30px rgba(155, 92, 255, .22); }
.set-pg .card h2 { color: #7c3aed; }
.set-pg .set { border-color: rgba(196, 181, 253, .45) !important; }
.set-pg .seg { background: rgba(255, 255, 255, .9); border-color: #e9d5ff; color: #6b3fb8; }
.set-pg .seg.on { background: linear-gradient(#ffb0e0, #d36bff 55%, #9b5cff); border-color: transparent; color: #fff; box-shadow: 0 3px 0 #7a35c9; }
.set-pg > .hint-line, .set-pg > p { align-self: center; padding: 6px 14px; border-radius: 16px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(6px); color: #6b3fb8; }

/* ── 訂閱：皇冠城堡夢幻卡 ── */
.modal.pw { background: linear-gradient(rgba(255, 252, 255, .25), rgba(255, 250, 255, .78) 42%, rgba(255, 250, 255, .9)), url(../img/game/sub-bg.webp) center top / cover, #fdf4ff; border: 4px solid #fde68a; box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), 0 0 40px rgba(253, 224, 71, .55), 0 20px 50px rgba(124, 58, 237, .35); }
.modal.pw h2 { color: #7c3aed; text-shadow: 0 2px 0 #fff, 0 0 14px rgba(255, 255, 255, .95); }
.modal.pw p { color: #5b2a86; font-weight: 600; }
.modal.pw .plan { background: rgba(255, 255, 255, .82); backdrop-filter: blur(8px); border: 2px solid #f5d0fe; box-shadow: 0 4px 0 rgba(233, 213, 255, .9); }
.modal.pw .plan.best { background: linear-gradient(135deg, rgba(254, 249, 195, .95), rgba(252, 231, 243, .95)); border: 3px solid #fbbf24; box-shadow: 0 4px 0 #f59e0b, 0 0 20px rgba(253, 224, 71, .6); }
.modal.pw .plan-tag { background: linear-gradient(#f472b6, #db2777); box-shadow: 0 2px 0 #9d174d; }
.modal.pw .modal-owl { filter: drop-shadow(0 0 16px rgba(255, 240, 180, .95)); }
.modal.pw .btn { background: linear-gradient(#fde047, #f59e0b); color: #7c2d12; box-shadow: 0 5px 0 #b45309, 0 10px 24px rgba(245, 158, 11, .4); }

/* ── 魔王關說話題：揀最好的回答 ── */
.spk2 { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 22px 10px; border-radius: 28px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(10px); border: 3px solid rgba(255, 255, 255, .95); box-shadow: 0 6px 0 rgba(233, 213, 255, .9), 0 14px 30px rgba(155, 92, 255, .25); }
.spk2 > .emo, .spk2 > img, .spk2 > .pic, .spk2 > span:first-child:not(.spk2-tip) { width: min(20vh, 150px) !important; height: min(20vh, 150px) !important; font-size: min(14vh, 100px); display: grid; place-items: center; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(120, 60, 160, .2)); }
.spk2 img { max-width: min(20vh, 150px); max-height: min(20vh, 150px); object-fit: contain; }
.spk2-tip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 99px; background: linear-gradient(#fef9c3, #fde68a); color: #92400e; font-weight: 900; font-size: clamp(14px, 2.4vh, 18px); }
.spk2-tip svg { width: 1.1em; height: 1.1em; }
.spk2-a { display: block; padding: 4px 6px; font-weight: 800; line-height: 1.35; font-size: clamp(17px, 3vh, 24px); color: #4c1d95; }
.opt:has(.spk2-a) { position: relative; border-radius: 26px 26px 26px 8px; background: linear-gradient(#fff, #fdf4ff); border: 3px solid #f5d0fe; box-shadow: 0 6px 0 #e9d5ff, 0 12px 24px rgba(155, 92, 255, .2); }
/* 說話題：平面圖直接放在遊戲背景上（柔和光暈，不用白色方框） */
.spk2 { background: radial-gradient(closest-side, rgba(255, 255, 255, .9) 40%, rgba(255, 255, 255, .55) 70%, rgba(255, 255, 255, 0)) !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding: 18px 46px 6px !important; }
.spk2-img { width: min(24vh, 180px); height: min(24vh, 180px); object-fit: contain; filter: drop-shadow(0 8px 12px rgba(120, 60, 160, .22)); animation: wkBob 2.6s ease-in-out infinite; }
@media (max-height: 520px) { .spk2 { padding: 4px 18px 2px !important; } .spk2-img { width: 30vh; height: 30vh; } }

/* ══ 登入／註冊（App Store 版）：夢幻 3D 雲上城堡背景、立體卡、鮮艷會動的楚橋 ══ */
.screen.au { position: relative; isolation: isolate; max-width: none; min-height: 100dvh; padding: max(10px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); gap: 8px; }
.screen.au::before { content: ""; position: fixed; inset: 0; z-index: -2; background: linear-gradient(rgba(255, 246, 255, .04), rgba(250, 236, 255, .18)), url(../img/game/auth-bg.webp) center / cover, #f3e6ff; }
.au-wel { background-image: url(../img/game/auth-bg.webp) !important; background-size: cover !important; background-position: center !important; position: relative; isolation: isolate; gap: 6px; }
.screen.au::after, .au-wel::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(3px 3px at 12% 22%, #fff, transparent), radial-gradient(2px 2px at 30% 70%, #fff, transparent), radial-gradient(3px 3px at 64% 18%, #fff8c4, transparent), radial-gradient(2px 2px at 82% 60%, #fff, transparent), radial-gradient(3px 3px at 48% 86%, #ffe4f6, transparent), radial-gradient(2px 2px at 90% 30%, #fff, transparent);
  animation: twinkle 2.4s ease-in-out infinite alternate; }
.au-top { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; }
.au-top .grow { flex: 1; }
.au-lang { display: inline-flex; padding: 4px; border-radius: 99px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(8px); box-shadow: 0 4px 0 rgba(216, 180, 254, .9), 0 8px 18px rgba(155, 92, 255, .22); }
.au-lang button { border: 0; padding: 6px 14px; border-radius: 99px; background: none; color: #7c3aed; font-weight: 800; }
.au-lang button.on { background: linear-gradient(#ffb0e0, #d36bff 55%, #9b5cff); color: #fff; box-shadow: 0 3px 0 #7a35c9; }
.au-wrap, .au-wel-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; display: grid; align-items: center; gap: clamp(16px, 4vw, 56px); }
.au-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.au-wel-main { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.au-side, .au-wel-left { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
/* 標誌：彩色字一個一個跳 */
.au-logo .logo-top { font-size: clamp(34px, 7vh, 60px); font-weight: 900; letter-spacing: .04em; } .au-logo.big .logo-top { font-size: clamp(44px, 10vh, 84px); }
.au-logo .logo-top span { display: inline-block; animation: auHop 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
.au-logo .logo-sub { margin-top: 4px; padding: 4px 16px; border-radius: 99px; background: rgba(76, 29, 149, .85); color: #fff; font-weight: 900; letter-spacing: .3em; display: inline-block; box-shadow: 0 3px 0 #2e1065; }
@keyframes auHop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-9px) rotate(-4deg); } 90% { transform: translateY(0); } }
/* 楚橋：鮮艷、發光、浮動搖擺，身邊有星星 */
.au-hero { position: relative; display: flex; flex-direction: column; align-items: center; }
.au-hero::before { content: ""; position: absolute; left: 50%; top: 62%; width: 125%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 240, 170, .9), rgba(255, 190, 240, .5) 55%, rgba(255, 255, 255, 0)); animation: auGlow 2.6s ease-in-out infinite alternate; z-index: -1; }
.au-hero::after { content: "✦  ✧  ✦"; position: absolute; top: 34%; left: -6%; right: -6%; display: flex; justify-content: space-between; color: #fde047; font-size: clamp(18px, 3.6vh, 30px); text-shadow: 0 0 10px #fff, 0 0 18px #fbbf24; letter-spacing: 9em; white-space: nowrap; text-align: center; animation: twinkle 1.2s ease-in-out infinite alternate; pointer-events: none; }
.au-owl { width: clamp(120px, 30vh, 250px) !important; height: auto; filter: saturate(1.4) brightness(1.07) contrast(1.05) drop-shadow(0 12px 16px rgba(124, 58, 237, .38)) drop-shadow(0 0 18px rgba(255, 255, 255, .95)); animation: auFloat 3s ease-in-out infinite; transform-origin: 50% 90%; }
.au-owl.big { width: clamp(150px, 40vh, 330px) !important; }
@keyframes auFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 25% { transform: translateY(-12px) rotate(3deg) scale(1.03); } 50% { transform: translateY(-4px) rotate(-1deg); } 75% { transform: translateY(-14px) rotate(4deg) scale(1.04); } }
@keyframes auGlow { from { opacity: .7; transform: translate(-50%, -50%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.07); } }
.au-bubble { position: relative; max-width: 360px; padding: 10px 18px; border-radius: 22px; background: linear-gradient(#fff, #fdf4ff); color: #6d28d9; font-weight: 900; font-size: clamp(15px, 2.6vh, 20px); line-height: 1.45; box-shadow: 0 6px 0 #f0b6ff, 0 12px 24px rgba(155, 92, 255, .3); margin-bottom: 10px; animation: auPop .6s cubic-bezier(.3, 1.6, .5, 1) both, auBob 3.4s 1s ease-in-out infinite; }
.au-bubble::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; background: #fdf4ff; transform: translateX(-50%) rotate(45deg); border-radius: 3px; box-shadow: 4px 4px 0 #f0b6ff; }
@keyframes auPop { from { transform: scale(.6); opacity: 0; } }
@keyframes auBob { 50% { transform: translateY(-4px); } }
.au-pts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; text-align: left; }
.au-pts li { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 16px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(6px); color: #5b2a86; font-weight: 800; font-size: clamp(13px, 2.2vh, 16px); box-shadow: 0 4px 0 rgba(233, 213, 255, .95); }
.au-pts svg { width: 20px; height: 20px; color: #d946ef; flex: none; }
/* 立體表單卡 */
.au-card, .au-wel-card { width: 100%; justify-self: center; display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 3vh, 28px) clamp(18px, 3vw, 32px); border-radius: 34px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .93), rgba(253, 244, 255, .86) 55%, rgba(250, 232, 255, .84)); backdrop-filter: blur(14px); border: 3px solid #fff;
  box-shadow: inset 0 3px 0 #fff, inset 0 -6px 0 rgba(233, 213, 255, .55), 0 9px 0 #e4c6ff, 0 11px 0 #c9a3f5, 0 24px 50px rgba(124, 58, 237, .32), 0 0 0 7px rgba(255, 205, 240, .35);
  animation: auPop .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.au-card { max-width: 520px; text-align: left; }
.au-card.wide { max-width: 760px; margin: auto; }
.au-wel-card { max-width: 460px; gap: 12px; text-align: center; animation-delay: .15s; }
.au-card h1, .au-wel-card h2 { margin: 0; color: #7c3aed; font-size: clamp(22px, 4vh, 32px); text-shadow: 0 2px 0 #fff, 0 3px 0 #e9d5ff; }
.au-card h1 { text-align: left; }
.au-sub { margin: -4px 0 2px; color: #6b3fb8; font-weight: 700; }
.au-wel-card p { margin: 0; color: #5b2a86; font-weight: 700; }
.au-f { display: flex; flex-direction: column; gap: 5px; }
.au-l { font-weight: 800; color: #4c1d95; font-size: 15px; }
.au-in { position: relative; display: flex; align-items: center; }
.au-in > svg { position: absolute; left: 14px; width: 20px; height: 20px; color: #a855f7; pointer-events: none; }
.au-in input { width: 100%; font: inherit; font-size: 18px; padding: 12px 46px 12px 44px; border-radius: 18px; border: 2px solid #ead7ff; background: #fff; color: #2e1065; box-shadow: inset 0 3px 6px rgba(124, 58, 237, .1), 0 2px 0 #fff; transition: .15s; }
.au-in input:focus { outline: none; border-color: #c084fc; box-shadow: inset 0 3px 6px rgba(124, 58, 237, .1), 0 0 0 4px rgba(192, 132, 252, .28); }
.au-eye { position: absolute; right: 6px; width: 38px; height: 38px; border: 0; border-radius: 12px; background: none; color: #8b5cf6; display: grid; place-items: center; }
.au-eye svg { width: 20px; height: 20px; }
.au-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: #4c1d95; font-weight: 600; }
.au-check input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: #a855f7; }
.au a, .au-wel a, .pw-fine a, .au-setlinks a { color: #c026d3; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.au-forgot { margin: -4px 0 0; text-align: right; font-size: 14px; }
.au-alt { margin: 2px 0 0; text-align: center; color: #6b3fb8; font-weight: 700; }
.au-submit { width: 100%; margin-top: 2px; background: linear-gradient(#ffb0e0, #d36bff 55%, #9b5cff); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 6px 0 #7a35c9, 0 12px 26px rgba(155, 92, 255, .4); }
.au-note { margin: 0; display: flex; align-items: center; gap: 6px; color: #7c3aed; font-size: 13px; font-weight: 700; } .au-note svg { width: 16px; height: 16px; flex: none; }
.au-apple { width: 100%; padding: 12px; border: 0; border-radius: 99px; background: #000; color: #fff; font-weight: 800; font-size: 17px; }
.au .demo-note { margin: 0; padding: 6px 12px; border-radius: 12px; background: #fef9c3; color: #92400e; font-weight: 700; font-size: 13px; }
.au-main, .au-sec { width: 100%; }
.au-legal { font-size: 13px !important; font-weight: 600 !important; }
/* 小朋友角色 */
.au-kid .kid-skins { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); max-width: none; gap: 10px; }
.au-kid .kid-skin { aspect-ratio: 1; padding: 6px; display: grid; place-items: center; border-radius: 22px; background: linear-gradient(#fff, #fdf4ff); box-shadow: 0 5px 0 #e4c6ff, 0 10px 18px rgba(155, 92, 255, .18); }
.au-kid .kid-skin > * { width: 100% !important; height: 100% !important; max-height: 110px; object-fit: contain; filter: saturate(1.35) brightness(1.05); }
.au-kid .kid-skin.on { box-shadow: 0 5px 0 #c4b5fd, 0 0 0 4px #d946ef, 0 0 24px rgba(217, 70, 239, .55); transform: translateY(-3px); }
.au-kid .kid-skin.on > * { animation: auFloat 2.4s ease-in-out infinite; }
/* 條款、私隱 */
.au-doc h3 { margin: 10px 0 0; color: #7c3aed; font-size: 17px; } .au-doc p { margin: 0; color: #3b0764; line-height: 1.7; }
/* 訂閱細字、設定連結、刪除 */
.pw-fine { margin: 0; font-size: 12px !important; color: #6b3fb8; }
.au-setlinks { gap: 14px !important; align-items: center; flex-wrap: wrap; }
.pill.link.danger { color: #dc2626; }
.btn.danger { background: linear-gradient(#f87171, #dc2626); box-shadow: 0 5px 0 #991b1b; }
/* 手機橫放：矮的畫面 */
@media (max-height: 520px) {
  .au-wrap, .au-wel-main { gap: 14px; align-items: start; }
  .au-pts, .au-side .au-logo { display: none; }
  .au-owl { width: 30vh !important; } .au-owl.big { width: 34vh !important; }
  .au-logo.big .logo-top { font-size: 8.5vh; }
  .au-card, .au-wel-card { padding: 12px 16px; gap: 7px; border-radius: 24px; }
  .au-card h1, .au-wel-card h2 { font-size: 20px; } .au-sub { font-size: 13px; } .au-wel-card p { font-size: 13px; }
  .au-in input { padding: 8px 42px; font-size: 16px; } .au-l { font-size: 13px; }
  .au-check { font-size: 12px; } .au-bubble { font-size: 13px; padding: 6px 12px; }
  .au-submit, .au-main { padding: 9px 18px; font-size: 17px; }
}
@media (max-width: 700px) and (orientation: portrait) { .au-wrap, .au-wel-main { grid-template-columns: 1fr; } .au-pts { display: none; } }
/* 歡迎頁：不用主頁的排版 */
.lobby.au-wel { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; min-height: 100dvh; padding: max(10px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)) !important; overflow-y: auto; }
.lobby.au-wel > .au-top, .lobby.au-wel > .au-wel-main { position: relative !important; inset: auto !important; transform: none !important; width: 100%; }
.au-wel .au-wel-card .lb-go { position: relative; inset: auto; transform: none; }

/* ── 揀程度：夢幻 3D 雲上城堡背景（同登入頁一致） ── */
.screen.start-pg { position: relative; isolation: isolate; }
.screen.start-pg::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 246, 255, .06), rgba(250, 236, 255, .3)), url(../img/game/auth-bg.webp) center / cover, #f3e6ff; }
.start-pg > .bar { padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .75); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(155, 92, 255, .22); }
.start-pg > .bar h1 { color: #7c3aed; text-shadow: 0 2px 0 #fff, 0 0 14px rgba(255, 190, 240, .9); }
.start-pg .onboard { position: relative; }
.start-pg .onboard::before { content: ""; position: absolute; top: -10px; left: 50%; width: 260px; height: 260px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 240, 170, .85), rgba(255, 190, 240, .45) 55%, rgba(255, 255, 255, 0)); animation: twinkle 2.6s ease-in-out infinite alternate; z-index: -1; }
.start-pg .mid-owl.au-owl { width: clamp(110px, 22vh, 190px) !important; }
.start-pg .lead { padding: 6px 18px; border-radius: 99px; background: rgba(255, 255, 255, .8); color: #6b3fb8; font-weight: 800; box-shadow: 0 4px 0 rgba(233, 213, 255, .9); }
.start-pg .pick { background: linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(253, 244, 255, .86)); backdrop-filter: blur(10px); border: 3px solid #fff; box-shadow: inset 0 -4px 0 rgba(233, 213, 255, .5), 0 7px 0 #e4c6ff, 0 14px 30px rgba(124, 58, 237, .25); transition: transform .15s; }
.start-pg .pick:hover { transform: translateY(-3px) rotate(-.5deg); }
.start-pg .pick b { color: #5b21b6; } .start-pg .pick small { color: #7c3aed; }
.start-pg .pick.alt { background: linear-gradient(135deg, rgba(254, 249, 195, .94), rgba(252, 231, 243, .92)); }

/* 訂閱方案：可以揀，揀中的卡亮起 */
.modal.pw .plan { width: 100%; font: inherit; color: inherit; cursor: pointer; text-align: left; padding-left: 50px; transition: transform .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.modal.pw .plan.best { text-align: left; }
.modal.pw .plan:active { transform: scale(.98); }
.plan-dot { position: absolute; left: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; border: 3px solid #d8b4fe; background: #fff; display: grid; place-items: center; color: transparent; }
.plan-dot svg { width: 16px; height: 16px; }
.modal.pw .plan.on { border-color: #a855f7 !important; box-shadow: 0 4px 0 #7e22ce, 0 0 0 4px rgba(168, 85, 247, .25), 0 0 22px rgba(217, 70, 239, .4) !important; }
.modal.pw .plan.best.on { border-color: #f59e0b !important; box-shadow: 0 4px 0 #b45309, 0 0 0 4px rgba(251, 191, 36, .35), 0 0 22px rgba(253, 224, 71, .6) !important; }
.plan.on .plan-dot { border-color: transparent; background: linear-gradient(#d946ef, #7c3aed); color: #fff; }
.plan.best.on .plan-dot { background: linear-gradient(#fbbf24, #f59e0b); }
.modal.pw { max-width: min(94vw, 440px); overflow-x: hidden; }
.modal.pw .plans { width: 100%; box-sizing: border-box; }
.modal.pw p, .pw-fine { overflow-wrap: anywhere; }
@media (max-height: 520px) { .modal.pw { max-height: 96vh; overflow-y: auto; } }
/* 本週主題：訂閱站的皇冠小鎖（角落，不遮住圖） */
.wkn-lock.wkn-sub { inset: auto -4px -4px auto; width: 34%; height: 34%; border-radius: 50%; background: linear-gradient(#fde047, #f59e0b); color: #7c2d12; box-shadow: 0 2px 0 #b45309, 0 0 0 2px #fff; }
.wkn-lock.wkn-sub svg { width: 62%; height: 62%; filter: none; }
/* 免費試用：之後收幾錢（大字清楚）、主頁試用最後 2 天提醒 */
.pw-after { margin: -4px 0 0 !important; padding: 4px 14px; border-radius: 99px; background: rgba(254, 243, 199, .95); color: #92400e !important; font-weight: 900 !important; font-size: 14px; }
.lb-trial.soon { background: linear-gradient(#fde047, #f59e0b) !important; color: #7c2d12 !important; animation: tlNext 1.4s ease-in-out infinite; }

/* ── 家長專區、家長題彈窗：夢幻背景 ── */
.screen.gate-pg { position: relative; isolation: isolate; }
.screen.gate-pg::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 246, 255, .06), rgba(250, 236, 255, .3)), url(../img/game/auth-bg.webp) center / cover, #f3e6ff; }
.gate-pg .big-ic, .modal.gatem .big-ic { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff, #f5d0fe 70%); color: #7c3aed; box-shadow: 0 6px 0 #e4c6ff, 0 0 26px rgba(255, 220, 250, .95); animation: auFloat 3s ease-in-out infinite; }
.gate-pg .big-ic svg, .modal.gatem .big-ic svg { width: 48%; height: 48%; }
.gate-pg h1 { color: #7c3aed; text-shadow: 0 2px 0 #fff, 0 0 14px rgba(255, 255, 255, .95); }
.gate-pg .lead { padding: 8px 22px; border-radius: 99px; background: rgba(255, 255, 255, .85); color: #5b21b6; font-weight: 900; font-size: clamp(18px, 3vh, 24px); box-shadow: 0 5px 0 rgba(233, 213, 255, .95); }
.gate-pg .gate .btn, .modal.gatem .gate .btn { min-width: 96px; font-size: 24px; background: linear-gradient(#ffb0e0, #d36bff 55%, #9b5cff); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 6px 0 #7a35c9; }
.modal.gatem { background: linear-gradient(rgba(255, 252, 255, .55), rgba(255, 250, 255, .9) 55%), url(../img/game/set-bg.webp) center / cover, #fdf4ff; border: 4px solid #f5d0fe; box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), 0 20px 50px rgba(124, 58, 237, .3); }
.modal.gatem h2 { color: #7c3aed; } .modal.gatem p { color: #4c1d95; font-weight: 800; font-size: 20px; }

/* ── 揀程度頁：最想進步 ── */
.goal-box { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 14px 12px; border-radius: 24px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(10px); border: 3px solid #fff; box-shadow: 0 6px 0 #e4c6ff, 0 12px 26px rgba(124, 58, 237, .2); }
.goal-box > b { color: #5b21b6; font-size: clamp(15px, 2.6vh, 19px); }
.goal-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.goal { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: 99px; border: 2px solid color-mix(in srgb, var(--c) 45%, #fff); background: #fff; color: var(--c); font-weight: 900; font-size: 15px; transition: .15s; }
.goal .goal-tick { width: 0; height: 16px; transition: width .15s; }
.goal.on { background: var(--c); color: #fff; border-color: var(--c); box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 70%, #000); transform: translateY(-1px); }
.goal.on .goal-tick { width: 16px; }
.goal-rep { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .goal-rep > b { display: inline-flex; align-items: center; gap: 4px; color: #5b21b6; }
.sb-goal { width: 14px; height: 14px; vertical-align: -2px; }
/* ── 推介六維評估：夢幻慶祝卡 ── */
.modal.chk { background: linear-gradient(rgba(255, 252, 255, .2), rgba(255, 250, 255, .86) 45%), url(../img/game/win-bg.webp) center top / cover, #fdf4ff; border: 4px solid #fde68a; box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), 0 0 40px rgba(253, 224, 71, .5), 0 20px 50px rgba(124, 58, 237, .35); }
.chk-hero { position: relative; display: grid; place-items: center; }
.chk-hero::before { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 240, 170, .95), rgba(255, 190, 240, .45) 60%, transparent); animation: auGlow 2.4s ease-in-out infinite alternate; }
.chk-owl { position: relative; width: 130px !important; height: auto; filter: saturate(1.35) drop-shadow(0 8px 12px rgba(124, 58, 237, .35)); animation: auFloat 3s ease-in-out infinite; }
.modal.chk h2 { color: #7c3aed; text-shadow: 0 2px 0 #fff, 0 0 14px #fff; }
.modal.chk p { color: #4c1d95; font-weight: 700; }
.chk-par { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 99px; background: rgba(254, 243, 199, .95); color: #92400e !important; font-size: 14px; }
.chk-par svg { width: 16px; height: 16px; }
.chk-go { background: linear-gradient(#fde047, #f59e0b); color: #7c2d12; box-shadow: 0 5px 0 #b45309; }
@media (max-height: 520px) { .modal.chk { max-height: 96vh; overflow-y: auto; gap: 4px; } .chk-owl { width: 80px !important; } .chk-hero::before { width: 110px; height: 110px; } .goal-box { padding: 6px 10px; } .goal { padding: 4px 10px; font-size: 13px; } }

/* ── 主頁：隨機玩、六維評估卡（夢幻粉彩、星星、雲邊、閃光） ── */
.lb3 .lb3-at { overflow: hidden; isolation: isolate; border: 3px solid #fff;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .95) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 74% 18%, rgba(255, 255, 255, .9) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 88% 62%, rgba(255, 255, 255, .85) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 42% 70%, rgba(255, 255, 255, .7) 0 1.2px, transparent 2px),
    radial-gradient(ellipse 32% 46% at 12% 112%, rgba(255, 255, 255, .92) 60%, transparent 62%),
    radial-gradient(ellipse 30% 42% at 40% 118%, rgba(255, 255, 255, .88) 60%, transparent 62%),
    radial-gradient(ellipse 34% 48% at 74% 114%, rgba(255, 255, 255, .9) 60%, transparent 62%),
    radial-gradient(ellipse 26% 40% at 100% 110%, rgba(255, 255, 255, .86) 60%, transparent 62%),
    linear-gradient(135deg, var(--p1), var(--p2) 55%, var(--p3));
  color: #4c1d95; }
.lb3 .lb3-row .lb3-at:nth-of-type(1) { --p1: #bfe3ff; --p2: #c7d2fe; --p3: #e9d5ff; box-shadow: 0 6px 0 #a5b4fc, 0 12px 24px rgba(99, 102, 241, .3), 0 0 0 3px rgba(199, 210, 254, .5); }
.lb3 .lb3-row .lb3-at:nth-of-type(2) { --p1: #ffe0b8; --p2: #ffc8dd; --p3: #f5d0fe; box-shadow: 0 6px 0 #f9a8d4, 0 12px 24px rgba(236, 72, 153, .28), 0 0 0 3px rgba(253, 205, 230, .5); color: #831843; }
.lb3 .lb3-at b { text-shadow: 0 2px 0 #fff, 0 0 10px rgba(255, 255, 255, .9); }
.lb3 .lb3-at small { opacity: 1; color: inherit; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.lb3 .lb3-at > span { position: relative; z-index: 1; }
.lb3 .lb3-at .spr { position: relative; z-index: 1; filter: saturate(1.25) drop-shadow(0 4px 5px rgba(124, 58, 237, .28)) drop-shadow(0 0 8px rgba(255, 255, 255, .9)); }
/* 閃光掃過 */
.lb3 .lb3-at::after { content: ""; position: absolute; inset: -40% auto -40% -60%; width: 40%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: lb3Shine 4.5s ease-in-out infinite; z-index: 0; pointer-events: none; }
.lb3 .lb3-row .lb3-at:nth-of-type(2)::after { animation-delay: 2.2s; }
@keyframes lb3Shine { 0%, 60% { left: -60%; } 85%, 100% { left: 130%; } }
/* 小星星裝飾 */
.lb3 .lb3-at > b, .lb3 .lb3-at > span::after { }
.lb3 .lb3-at > span::before { content: "✦"; position: absolute; right: -18px; top: -10px; font-size: 14px; color: #fde047; text-shadow: 0 0 6px #fff, 0 0 10px #fbbf24; animation: twinkle 1.3s ease-in-out infinite alternate; }
.lb3 .lb3-at.due { box-shadow: 0 6px 0 #f9a8d4, 0 0 0 4px #fde047, 0 0 24px rgba(253, 224, 71, .8) !important; }
.lb3 .lb3-row .lb3-at:nth-of-type(1) { --p1: #8ec5ff; --p2: #a5b4fc; --p3: #d8b4fe; color: #312e81; }
.lb3 .lb3-row .lb3-at:nth-of-type(2) { --p1: #ffc078; --p2: #ff9ec8; --p3: #e9a8ff; color: #831843; }
.lb3 .lb3-at::before { background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }

/* ── 關卡開始卡（冒險地圖）：夢幻背景、按鈕發光 ── */
.modal.lvpop { background: linear-gradient(rgba(255, 252, 255, .25), rgba(255, 250, 255, .86) 42%, rgba(255, 250, 255, .94)), url(../img/game/win-bg.webp) center top / cover, #fdf4ff; border: 4px solid #fff; box-shadow: 0 0 0 4px rgba(233, 213, 255, .9), 0 0 36px rgba(255, 220, 250, .9), 0 20px 50px rgba(124, 58, 237, .32); animation: auPop .45s cubic-bezier(.3, 1.5, .5, 1) both; }
.modal.lvpop.boss { border-color: #fde68a; box-shadow: 0 0 0 4px rgba(253, 230, 138, .9), 0 0 40px rgba(253, 224, 71, .6), 0 20px 50px rgba(124, 58, 237, .32); }
.modal.lvpop h2 { color: #7c3aed; text-shadow: 0 2px 0 #fff, 0 0 14px #fff; }
.modal.lvpop .tag { background: rgba(255, 255, 255, .9); }
.modal.lvpop .dim-ic.big, .modal.lvpop .modal-boss { filter: drop-shadow(0 0 16px rgba(255, 240, 180, .95)); animation: auFloat 3s ease-in-out infinite; }
.modal.lvpop .row-btns .btn { font-size: 22px; padding: 12px 34px; background: linear-gradient(#ffb0e0, #d36bff 55%, #9b5cff); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 6px 0 #7a35c9, 0 0 22px rgba(217, 70, 239, .5); animation: tlNext 1.4s ease-in-out infinite; }

/* ── 拼圖：手機打橫（矮畫面）時，拼塊排成格仔放在拼圖旁邊，全部放得入畫面 ── */
@media (orientation: landscape) and (max-height: 600px) {
  .jig { --bh: min(60vh, 260px, calc((100vw - 190px) / 2.75)); --tc: 2; padding-left: 22px; flex-direction: row; align-items: center; justify-content: center; gap: 12px; width: 100%; }
  .jig:has(.jig-board[style*="--cols:3"]) { --tc: 3; } .jig:has(.jig-board[style*="--cols:4"]) { --tc: 4; } .jig:has(.jig-board[style*="--cols:5"]) { --tc: 5; }
  .jig-board { width: auto; height: var(--bh); flex: none; }
  .jig-tray { display: grid; grid-template-columns: repeat(var(--tc), auto); width: auto; max-width: none; flex: none; align-content: center; gap: 5px; }
  .jig-tray .jig-p { width: calc(var(--bh) * 1.5 / var(--tc) * .8); }
  /* 拼圖要大：左邊只留楚橋頭像（說明由楚橋讀出，可以按喇叭再聽），讓出位置給拼圖和拼塊 */
  .screen.game:has(.jig) { grid-template-columns: 76px minmax(0, 1fr) !important; }
  .screen.game:has(.jig) .prompt .bubble { display: none; }
}
/* 楚橋對白框：右下角的喇叭掣會疊入對白框約 26px，留空位，避免遮住句子最後幾個字（手機橫放最明顯） */
.cine-b > .prompt .bubble:has(+ .say-ring) { padding-right: 40px; }
/* ── 遊樂園故事書：每個樂園一頁，揭頁動畫（js/park.js） ── */
.screen.park3 { max-width: none; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; gap: 8px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.park3 > .bar, .park3 .bk, .park3 .bk-foot { width: 100%; max-width: 1180px; margin: 0 auto; }
.bk { flex: 1; min-height: 0; display: flex; align-items: center; gap: 12px; }
.bk-arrow { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(#fff, #f3e8ff); color: #7c3aed; box-shadow: 0 5px 0 #d8c4f0, 0 10px 18px rgba(90, 50, 140, .2); cursor: pointer; transition: opacity .2s, transform .15s; }
.bk-arrow .ic { width: 28px; height: 28px; }
.bk-arrow:active { transform: translateY(3px); }
.bk-arrow.off { opacity: .25; pointer-events: none; }
/* 書本：後面有封面（夢幻粉紫），右邊和下邊看到一疊書頁 */
.bk-book { position: relative; flex: 1; height: 100%; margin: 12px 52px 16px 6px; }
.bk-book::before { content: ""; position: absolute; inset: -12px -14px -16px -16px; border-radius: 26px; background: linear-gradient(135deg, #c4a1ff, #f9a8d4 55%, #fcd5ae); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55), 0 18px 36px rgba(90, 40, 140, .3); }
.bk-book::after { content: ""; position: absolute; left: 8px; right: -6px; bottom: -8px; height: 12px; border-radius: 0 0 14px 14px; background: repeating-linear-gradient(#fffaf2 0 2px, #eadcf5 2px 3px); z-index: 0; }
.bk-stack { position: absolute; inset: 0; z-index: 1; perspective: 2600px; touch-action: pan-y; }
.bk-page { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px 24px 28px 40px; border-radius: 8px 20px 20px 8px; overflow: hidden;
  background: radial-gradient(circle at 85% 8%, color-mix(in srgb, var(--zc) 12%, #fff) 0, transparent 45%), linear-gradient(90deg, #e9d8f7 0, #fffaf3 5.5%, #fffdf8 60%, #fbf2e6 100%);
  box-shadow: inset 22px 0 24px -18px rgba(90, 50, 130, .45), 3px 0 0 #f1e6fb, 6px 0 0 #e4d3f2, 0 10px 22px rgba(70, 30, 110, .18); }
.bk-page::before { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(transparent 0 10px, rgba(150, 110, 190, .35) 10px 18px); }
.bk-h { display: flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0 0 12px; padding: 6px 18px 6px 12px; border-radius: 99px; background: var(--zc); color: #fff; font-size: clamp(18px, 2.2vw, 24px); font-weight: 900; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15), 0 6px 14px color-mix(in srgb, var(--zc) 40%, transparent); }
.bk-h .ic { width: 26px; height: 26px; }
.bk-h small, .bk-h em { padding: 0 9px; border-radius: 99px; background: rgba(255, 255, 255, .3); font-size: .62em; font-style: normal; }
.bk-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 240px)); grid-template-rows: repeat(var(--rows), minmax(0, 320px)); gap: 14px; justify-content: center; align-content: center; }
.bk-grid .rcard { min-height: 0; height: 100%; padding: 8px 8px 10px; gap: 3px; border-radius: 22px; }
.bk-grid .rc-img { flex: 1; min-height: 0; aspect-ratio: auto; border-radius: 16px; }
.bk-grid .rc-name { font-size: clamp(14px, 1.7vw, 19px); }
.bk-grid .rc-desc { min-height: 0; font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk-num { position: absolute; right: 22px; bottom: 7px; font-size: 13px; font-weight: 800; color: #b39ccb; }
.bk-page .pz-tip { position: absolute; top: 12px; right: 22px; margin: 0; z-index: 2; }
.bk-page.pz-hi { position: absolute; }
/* 絲帶書籤：每個樂園一條，目前那一頁的書籤伸出來 */
.bk-tabs { position: absolute; z-index: 0; top: 34px; right: -50px; display: flex; flex-direction: column; gap: 8px; }
.bk-tab { display: grid; place-items: center; width: 50px; height: 46px; padding-left: 8px; border: 0; border-radius: 0 16px 16px 0; background: var(--zc); color: #fff; box-shadow: inset 6px 0 8px -4px rgba(0, 0, 0, .25), 0 4px 10px rgba(60, 30, 90, .2); transform: translateX(-12px); transition: transform .25s; cursor: pointer; }
.bk-tab .ic { width: 24px; height: 24px; }
.bk-tab.on { transform: translateX(0); box-shadow: inset 6px 0 8px -4px rgba(0, 0, 0, .25), 0 0 0 3px #fff, 0 6px 14px rgba(60, 30, 90, .3); }
/* 揭頁：翻動中的那一頁沿書脊（左邊）轉 180 度，背面是空白紙；翻到一半會有陰影 */
.bk-flip { position: absolute; inset: 0; z-index: 3; transform-style: preserve-3d; transform-origin: left center; transition: transform .74s cubic-bezier(.42, .1, .26, 1); pointer-events: none; }
.bk-flip.fwd { transform: rotateY(0); }
.bk-flip.fwd.go, .bk-flip.back { transform: rotateY(-180deg); }
.bk-flip.back.go { transform: rotateY(0); }
.bk-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bk-face::after { content: ""; position: absolute; inset: 0; border-radius: 8px 20px 20px 8px; background: linear-gradient(90deg, rgba(60, 25, 100, .05), rgba(60, 25, 100, .3)); opacity: 0; transition: opacity .74s; pointer-events: none; }
.bk-flip.fwd.go .bk-face::after, .bk-flip.back .bk-face::after { opacity: 1; }
.bk-flip.back.go .bk-face::after { opacity: 0; }
.bk-rear { transform: rotateY(180deg); border-radius: 20px 8px 8px 20px; background: linear-gradient(270deg, #e9d8f7 0, #fffaf3 6%, #fbf2e6 100%); box-shadow: inset -22px 0 24px -18px rgba(90, 50, 130, .4); }
.bk-stack.turning > .bk-page { filter: brightness(.97); }
.bk-foot { display: flex; align-items: center; justify-content: center; gap: 14px; flex: none; }
.bk-dots { display: flex; gap: 7px; }
.bk-dots i { width: 10px; height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--zc) 35%, #fff); transition: width .25s; }
.bk-dots i.on { width: 28px; background: var(--zc); }
.bk-foot small { font-size: 13px; font-weight: 800; color: #7c6a99; }
/* 手機橫放：細啲嘅頁邊、書籤和箭嘴；卡片唔顯示簡介 */
@media (max-height: 560px) {
  .screen.park3 { gap: 4px; padding-top: max(8px, env(safe-area-inset-top)); }
  .bk { gap: 8px; }
  .bk-arrow { width: 40px; height: 40px; }
  .bk-arrow .ic { width: 22px; height: 22px; }
  .bk-book { margin: 8px 40px 12px 4px; }
  .bk-page { padding: 8px 16px 16px 28px; }
  .bk-page::before { left: 10px; }
  .bk-h { margin-bottom: 6px; padding: 3px 14px 3px 9px; font-size: 16px; }
  .bk-h .ic { width: 20px; height: 20px; }
  .bk-grid { gap: 8px; }
  .bk-grid .rcard { padding: 5px 5px 7px; border-radius: 16px; }
  .bk-grid .rc-desc { display: none; }
  .bk-grid .rc-name { font-size: 14px; }
  .bk-tabs { top: 16px; right: -40px; gap: 5px; }
  .bk-tab { width: 40px; height: 36px; }
  .bk-tab .ic { width: 19px; height: 19px; }
  .bk-num { bottom: 3px; font-size: 11px; }
}
.bk-page { max-width: none; margin: 0; }   /* 第一頁同時是 .pz（任務發光用），不要用 .pz 的寬度限制 */
.bk-grid.dense .rc-desc { display: none; }
.bk-book { margin-bottom: 24px; }
@media (max-height: 560px) { .bk-book { margin-bottom: 18px; } }
.bk-grid .rc-img { position: relative; }
.bk-grid .rc-img .spr { position: absolute; inset: 3%; width: 94%; height: 94%; object-fit: contain; }   /* 卡片矮的時候按高度縮細，不會切走圖頂 */
@media (max-height: 560px) { .bk-book { margin: 16px 40px 24px 4px; } .screen.park3 { gap: 2px; } }
.bk-book { height: auto; align-self: stretch; }   /* 高度 = 可用空間減去上下邊距，頁底圓點不會被書蓋住 */