:root{--cream:#fff8e7;--wood-dark:#704322;--honey:#efbc3f;--ink:#4b3624;--coral:#e67d62;--plum:#8d6197;--safe-top:max(8px,env(safe-area-inset-top));--safe-right:max(8px,env(safe-area-inset-right));--safe-bottom:max(8px,env(safe-area-inset-bottom));--safe-left:max(8px,env(safe-area-inset-left))}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:"Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif;color:var(--ink);background:#e8c16d;touch-action:manipulation;user-select:none}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:4px solid #fff;outline-offset:3px;box-shadow:0 0 0 8px var(--plum)}.hidden{display:none!important}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.shell{position:fixed;inset:0;isolation:isolate;overflow:hidden}.scene{position:absolute;inset:0}.scene>picture,.scene>picture img{position:absolute;inset:0;width:100%;height:100%}.scene>picture img{object-fit:cover}.rune{position:fixed;z-index:100;left:var(--safe-left);bottom:var(--safe-bottom);width:clamp(48px,5.5vw,72px);pointer-events:none;filter:drop-shadow(0 4px 5px rgba(75,45,22,.3))}
.intro::after{content:"";position:absolute;inset:56% 0 0;background:linear-gradient(transparent,rgba(74,43,20,.18));pointer-events:none}.play-btn{position:absolute;z-index:3;left:50%;bottom:max(25px,calc(env(safe-area-inset-bottom) + 16px));width:clamp(88px,9vw,112px);aspect-ratio:1;transform:translateX(-50%);border:4px solid #8a552c;border-radius:50%;cursor:pointer;background:linear-gradient(#dcb47d,#a96c3a);box-shadow:inset 0 6px rgba(255,255,255,.4),inset 0 -8px #74421f,0 10px 22px rgba(58,34,17,.3)}.play-btn::before{content:"";position:absolute;left:39%;top:27%;border-top:22px solid transparent;border-bottom:22px solid transparent;border-left:34px solid var(--cream);filter:drop-shadow(0 2px 1px #74421f)}.play-btn:active{transform:translateX(-50%) translateY(4px) scale(.96)}
/* Diegetic beach scene: no worksheet panel. */
.game{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}.game-content{position:relative;z-index:2;height:100%;display:grid;grid-template-rows:70px minmax(0,1fr);gap:4px}.hud{display:grid;grid-template-columns:minmax(174px,1fr) auto minmax(202px,1fr);align-items:center;gap:10px}.progress,.level-path{display:flex;align-items:center;justify-content:center;min-height:56px;border:2px solid rgba(113,67,34,.68);background:rgba(255,248,231,.78);box-shadow:inset 0 2px rgba(255,255,255,.72),0 5px 12px rgba(74,43,20,.18);backdrop-filter:blur(7px)}.progress{justify-self:start;gap:4px;padding:4px 10px;border-radius:28px 16px 28px 18px}.progress-star{width:clamp(30px,3vw,40px);height:clamp(30px,3vw,40px);object-fit:contain}.progress-star.done{animation:star-pop .52s cubic-bezier(.2,.9,.3,1.2) both}.progress-star:not(.done){opacity:.72;filter:sepia(.2) saturate(1.2)}.level-path{gap:1px;padding:0 8px;border-radius:18px 30px 17px 30px}.level-node{position:relative;z-index:0;width:45px;height:50px}.level-node::before{content:"";position:absolute;z-index:-1;inset:0;background:url('assets/ui-level-shell.webp') center/contain no-repeat;filter:grayscale(.84) sepia(.16) opacity(.46)}.level-node.done::before{filter:sepia(.08) saturate(1.05) drop-shadow(0 2px 2px rgba(94,58,25,.18))}.level-node.current{width:56px;height:58px;transform:translateY(-2px)}.level-node.current::before{filter:saturate(1.16) brightness(1.06) drop-shadow(0 0 7px var(--honey)) drop-shadow(0 4px 3px rgba(95,55,21,.24))}.hud-controls{justify-self:end;display:flex;gap:7px}.wood-btn{position:relative;width:58px;height:58px;min-width:58px;min-height:58px;display:grid;place-items:center;padding:0;border:3px solid var(--wood-dark);border-radius:50%;color:var(--cream);cursor:pointer;background:linear-gradient(#d9aa72,#a96b3b);box-shadow:inset 0 4px rgba(255,255,255,.43),inset 0 -5px #73411f,0 5px 10px rgba(70,42,21,.23)}.wood-btn:active{transform:translateY(3px) scale(.96)}.ui-icon{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px rgba(90,48,22,.55));pointer-events:none}.wood-btn.is-muted .sound-on{opacity:.44}.wood-btn.is-muted::after{content:"×";position:absolute;color:var(--cream);font-size:29px;text-shadow:0 2px #74421f}
.play-grid{min-height:0;display:grid;grid-template-columns:minmax(145px,18vw) minmax(430px,1fr) minmax(145px,18vw);align-items:stretch;gap:4px}.guide-zone,.hero-zone{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.guide-zone{padding-bottom:clamp(82px,9vh,108px)}.hero-zone{padding-bottom:clamp(24px,3vh,42px)}.guide-button{width:clamp(145px,15vw,205px);height:clamp(145px,15vw,205px);padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}.guide{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(58,35,18,.24));animation:float 3.5s ease-in-out infinite}.speech{position:relative;z-index:2;width:min(100%,245px);min-height:94px;display:flex;align-items:center;justify-content:center;margin-bottom:-12px;padding:10px 14px;border:4px solid #b27a45;border-radius:48% 43% 47% 42%/48% 44% 46% 42%;background:rgba(255,248,231,.93);box-shadow:inset 0 2px #fff,0 7px 15px rgba(69,43,22,.2);backdrop-filter:blur(5px)}.speech::after{content:"";position:absolute;left:47%;bottom:-15px;width:25px;height:25px;background:var(--cream);border-left:4px solid #b27a45;border-bottom:4px solid #b27a45;transform:rotate(-30deg) skew(-8deg);border-bottom-left-radius:16px}.speech-visual{width:100%;min-height:66px;display:flex;align-items:center;justify-content:center;gap:7px}.speech.glow{animation:speech-glow .8s ease-in-out 2}.hero{width:min(100%,250px);max-height:315px;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(58,35,18,.25));transform-origin:50% 76%;animation:breathe 3.6s ease-in-out infinite}.hero.happy{animation:happy .75s ease}.hero.oops{animation:wobble .55s ease}
.cue-pebbles{width:63px;min-height:45px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:1px}.cue-pebbles i,.cue-mat i{display:block;width:18px;height:13px;background:url('assets/prop-beach-coral-pebble.webp') center/contain no-repeat}.cue-mats,.cue-pairs{display:flex;align-items:center;gap:2px}.cue-mat{width:49px;aspect-ratio:1;padding:11px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:0;background:url('assets/prop-beach-woven-mat.webp') center/contain no-repeat}.cue-mat i{width:11px;height:8px}.cue-arrow,.cue-equal,.cue-plus,.cue-question{color:#774823;font-size:27px;line-height:1}
.board{position:relative;min-width:0;min-height:0;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto auto;align-items:center;justify-items:center;gap:0;padding:4px 0 max(10px,1vh);overflow:visible}.board::before{content:"";position:absolute;z-index:-1;left:-32px;bottom:112px;width:116px;height:116px;background:url('assets/prop-beach-shell.webp') center/contain no-repeat;transform:rotate(-18deg);opacity:.72;filter:drop-shadow(0 5px 5px rgba(76,46,23,.18))}.board::after{content:"";position:absolute;z-index:-2;left:8%;right:8%;bottom:6px;height:154px;border-radius:50%;background:radial-gradient(ellipse,rgba(93,69,38,.2),rgba(93,69,38,.07) 45%,transparent 72%);filter:blur(3px);pointer-events:none}.math-stage{position:relative;z-index:2;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.6vw,22px);padding:4px}.group-wrap{display:flex;flex-direction:column;align-items:center;gap:3px}.group-label{min-height:26px;color:#7a4c2a;font-size:clamp(23px,3vw,38px);font-weight:900}.object-group{min-width:118px;min-height:118px;max-width:245px;padding:18px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:3px;background:url('assets/prop-beach-woven-mat.webp') center/contain no-repeat}.shell-object{width:clamp(42px,4.2vw,62px);height:clamp(42px,4.2vw,62px);object-fit:contain;filter:drop-shadow(0 4px 3px rgba(74,45,23,.22))}.math-sign{color:#784522;font-size:clamp(34px,5vw,62px);font-weight:900;text-shadow:0 2px rgba(255,248,231,.75)}.change-arrow{font-size:clamp(38px,5vw,61px);color:var(--coral);text-shadow:0 2px var(--cream)}.change-object{animation:join 1.2s ease-in-out infinite}
.mats{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(6px,1.5vw,18px);width:100%}.mat{width:clamp(136px,14.5vw,205px);aspect-ratio:1;padding:25%;border:0;border-radius:50%;background:url('assets/prop-beach-woven-mat.webp') center/contain no-repeat;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:1px;transition:transform .18s,filter .18s}.pebble{width:clamp(37px,4.1vw,57px);aspect-ratio:1.45;background:url('assets/prop-beach-coral-pebble.webp') center/contain no-repeat;filter:drop-shadow(0 3px 2px rgba(79,44,27,.22))}.pebble.added{animation:pebble-arrive .58s ease both}.selectable-mat{cursor:pointer}.selectable-mat.selected,.choice-card.selected{transform:translateY(-6px) scale(1.04);filter:drop-shadow(0 0 7px var(--honey)) drop-shadow(0 7px 6px rgba(74,43,20,.22))}.equal-options{display:grid;grid-template-columns:repeat(3,minmax(112px,1fr));gap:12px;width:min(100%,760px)}.choice-card{position:relative;min-height:160px;padding:10px 6px;border:3px solid rgba(112,67,34,.72);cursor:pointer;border-radius:31px 24px 33px 25px;background:rgba(255,248,231,.68);box-shadow:inset 0 2px rgba(255,255,255,.8),0 7px 12px rgba(74,43,20,.16);backdrop-filter:blur(5px);transition:transform .18s,filter .18s}.choice-card::before,.choice-card::after{content:"";position:absolute;width:22px;height:22px;background:url('assets/ui-level-shell.webp') center/contain no-repeat;opacity:.76}.choice-card::before{left:5px;top:5px;transform:rotate(-18deg)}.choice-card::after{right:5px;bottom:5px;transform:rotate(18deg)}.choice-card .tiny-mats{height:100%;display:flex;justify-content:center;align-items:center;gap:1px}.choice-card .mat{width:clamp(74px,7vw,100px);padding:19px}.choice-card .pebble{width:clamp(20px,2vw,28px)}.hint{animation:hint 1s ease-in-out infinite!important}
.answers{position:relative;z-index:3;width:min(100%,650px);aspect-ratio:3/1;min-height:118px;display:flex;align-items:center;justify-content:center;gap:5.5%;padding:5.5% 15.4% 6.5% 13.2%;background:url('assets/ui-beach-answer-tray.webp') center/contain no-repeat;filter:drop-shadow(0 8px 7px rgba(68,42,21,.22))}.answers:empty{display:none}.answer-card{flex:1 1 0;min-width:0;aspect-ratio:1;display:grid;place-items:center;padding:0;border:0;border-radius:50% 50% 46% 46%;background:transparent;cursor:pointer;transition:transform .16s,filter .16s}.answer-card.selected{transform:translateY(-6px) scale(1.08);filter:drop-shadow(0 0 8px var(--honey)) drop-shadow(0 5px 3px rgba(74,43,20,.25))}.pip-card{width:65%;height:65%;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);align-items:center;justify-items:center;gap:0}.pip-card i{width:clamp(19px,2vw,27px);aspect-ratio:1.45;background:url('assets/prop-beach-coral-pebble.webp') center/contain no-repeat;filter:drop-shadow(0 2px 1px rgba(80,44,25,.2))}.pips-1 i{grid-area:1/1/3/3}.pips-2 i:first-child{grid-area:1/1}.pips-2 i:last-child{grid-area:2/2}.pips-3 i:first-child{grid-area:1/1}.pips-3 i:nth-child(2){grid-area:1/1/3/3}.pips-3 i:last-child{grid-area:2/2}.pips-4 i:nth-child(1){grid-area:1/1}.pips-4 i:nth-child(2){grid-area:1/2}.pips-4 i:nth-child(3){grid-area:2/1}.pips-4 i:nth-child(4){grid-area:2/2}.submit-row{position:relative;z-index:5;min-height:70px;display:flex;align-items:center;justify-content:center;margin-top:-12px}.confirm-btn{width:72px;height:72px;border:0;border-radius:50%;background:url('../assets/ui/button-check-normal.webp') center/contain no-repeat;filter:drop-shadow(0 5px 4px rgba(58,36,18,.25));cursor:pointer}.confirm-btn:disabled{background-image:url('../assets/ui/button-check-disabled.webp');filter:grayscale(.82) saturate(.24);opacity:.48;cursor:default}.confirm-btn:not(:disabled):active{background-image:url('../assets/ui/button-check-pressed.webp');transform:translateY(3px) scale(.96)}.confirm-btn.demo-focus{animation:hint .85s ease-in-out infinite}.skip-demo{position:absolute;z-index:9;right:2px;bottom:18px;min-width:52px;min-height:52px;border:3px solid var(--wood-dark);border-radius:50%;background:#d8ad78;color:var(--cream);font-size:25px;font-weight:900;cursor:pointer}body[data-state="menu"] .confirm-btn,body[data-state="level-complete"] .confirm-btn,body[data-state="game-complete"] .confirm-btn,body[data-state="menu"] .skip-demo,body[data-state="level-complete"] .skip-demo,body[data-state="game-complete"] .skip-demo{visibility:hidden}.feedback{position:absolute;z-index:12;left:50%;top:42%;transform:translate(-50%,-50%) scale(.9);min-width:96px;min-height:90px;padding:10px;border:4px solid #d4a442;border-radius:50%;background:var(--cream);box-shadow:0 10px 24px rgba(60,37,19,.25);text-align:center;font-size:0;opacity:0;pointer-events:none}.feedback::before{content:"★";color:var(--honey);font-size:58px;line-height:1;text-shadow:0 3px #a86b2e,0 0 14px rgba(239,188,63,.7)}.feedback.retry::before{content:"↻";color:#a87449;font-size:52px;text-shadow:0 2px #fff}.feedback.show{animation:feedback .9s ease both}.demo-pointer{position:absolute;z-index:20;width:54px;height:62px;transform:translate(-16%,-18%);pointer-events:none;transition:left .55s ease,top .55s ease;filter:drop-shadow(0 5px 5px rgba(78,47,22,.3));animation:demo-tap .8s ease-in-out infinite}.demo-pointer svg{width:100%;height:100%;overflow:visible}.demo-pointer path{fill:#fff1d1;stroke:#81502e;stroke-width:3;stroke-linejoin:round}
.overlay{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:18px;background:rgba(51,39,25,.46);backdrop-filter:blur(5px)}.panel{position:relative;width:min(92vw,720px);max-height:92vh;overflow:hidden;padding:23px;border:5px solid #8a552c;border-radius:38px;background:rgba(255,248,230,.96);box-shadow:inset 0 0 0 7px rgba(201,143,90,.28),0 18px 45px rgba(45,28,14,.36);text-align:center}.panel h2{margin:0 0 8px;font-size:clamp(28px,4vw,46px)}.panel p{margin:5px 0 10px;font-size:clamp(16px,2.2vw,23px);font-weight:800}.menu-shell-title{display:flex;justify-content:center;align-items:center;gap:18px;color:#d4a22e;font-size:34px}.menu-shell-title img{width:clamp(92px,14vw,130px);filter:saturate(1.18) drop-shadow(0 5px 6px rgba(78,47,22,.22))}.level-menu{display:flex;justify-content:center;gap:3px;margin:15px 0}.menu-level{position:relative;z-index:0;width:clamp(66px,10vw,94px);height:clamp(72px,11vw,104px);border:0;background:transparent;cursor:pointer}.menu-level::before{content:"";position:absolute;z-index:-1;inset:0;background:url('assets/ui-level-shell.webp') center/contain no-repeat;filter:grayscale(.72) sepia(.15) opacity(.68) drop-shadow(0 4px 3px rgba(87,51,22,.18))}.menu-level.current{transform:translateY(-4px)}.menu-level.current::before{filter:saturate(1.22) brightness(1.06) drop-shadow(0 0 10px var(--honey)) drop-shadow(0 5px 3px rgba(87,51,22,.2))}.menu-level:disabled{opacity:.42;cursor:default}.panel-actions{display:flex;justify-content:center;gap:13px}.panel-actions .wood-btn{width:70px;height:70px}.highfive{width:min(68vw,370px);max-height:38vh;object-fit:contain;filter:drop-shadow(0 8px 7px rgba(76,44,19,.22))}.reward-stars{display:flex;justify-content:center;gap:8px}.reward-stars img{width:clamp(46px,7vw,72px);animation:star-pop .55s both}.reward-stars img:nth-child(2){animation-delay:.14s}.reward-stars img:nth-child(3){animation-delay:.28s}.finale .panel{border-color:var(--honey);background:radial-gradient(circle at 50% 32%,#fffdf0,#f9e0ad 68%,#e8bc70)}.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}.confetti i{position:absolute;top:-20px;width:10px;height:18px;border-radius:4px;background:var(--honey);animation:fall 3s linear infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}@keyframes happy{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-18px) scale(1.06)}}@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}65%{transform:rotate(4deg)}}@keyframes hint{0%,100%{filter:drop-shadow(0 0 0 rgba(239,188,63,0))}50%{filter:drop-shadow(0 0 13px var(--honey))}}@keyframes speech-glow{50%{box-shadow:0 0 0 8px rgba(239,188,63,.3),0 7px 16px rgba(69,43,22,.2)}}@keyframes feedback{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}20%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) scale(1)}}@keyframes join{0%,100%{transform:translateY(-8px)}50%{transform:translate(-10px,4px)}}@keyframes pebble-arrive{0%{opacity:0;transform:translateY(-22px) scale(.7)}70%{opacity:1;transform:translateY(3px) scale(1.08)}100%{opacity:1;transform:none}}@keyframes fall{to{transform:translateY(105vh) rotate(450deg)}}@keyframes star-pop{from{opacity:0;transform:scale(.2) rotate(-20deg)}to{opacity:1;transform:none}}@keyframes demo-tap{0%,100%{transform:translate(-16%,-18%)}55%{transform:translate(-16%,-7%) scale(.94)}}
@media(max-width:760px),(orientation:portrait){.game{padding:max(5px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}.game-content{grid-template-rows:99px minmax(0,1fr);gap:1px}.hud{grid-template-columns:1fr auto;grid-template-rows:52px 43px;gap:3px 7px}.progress{grid-column:1;grid-row:1;min-height:48px;padding:3px 7px}.progress-star{width:27px;height:27px}.hud-controls{grid-column:2;grid-row:1}.wood-btn{width:49px;height:49px;min-width:49px;min-height:49px;border-width:2px}.level-path{grid-column:1/3;grid-row:2;min-height:41px;padding:0 7px;gap:0}.level-node{width:33px;height:37px}.level-node.current{width:43px;height:45px}.play-grid{grid-template-columns:minmax(0,1fr) 78px;grid-template-rows:88px minmax(0,1fr);gap:0}.guide-zone{grid-column:1/3;grid-row:1;flex-direction:row-reverse;justify-content:center;padding:0;gap:1px}.guide-button{width:84px;height:84px;flex:0 0 84px}.speech{width:min(67vw,270px);min-height:70px;margin:0 -7px 0 0;padding:6px 9px}.speech::after{left:auto;right:-13px;bottom:18px;transform:rotate(225deg);width:23px;height:23px}.speech-visual{min-height:54px;transform:scale(.86)}.board{grid-column:1/3;grid-row:2;padding:0 4px max(4px,env(safe-area-inset-bottom))}.board::before{width:72px;height:72px;left:-10px;bottom:72px;opacity:.58}.board::after{left:4%;right:4%;bottom:-2px;height:104px}.hero-zone{position:fixed;z-index:8;right:max(4px,env(safe-area-inset-right));bottom:max(2px,env(safe-area-inset-bottom));padding:0;pointer-events:none}.hero{width:88px;height:88px}.math-stage{gap:3px;padding:0}.mats{gap:0}.mat{width:clamp(104px,33vw,138px);padding:21%}.pebble{width:clamp(30px,9vw,41px)}.object-group{min-width:96px;min-height:96px;max-width:150px;padding:16px}.shell-object{width:clamp(31px,9vw,44px);height:clamp(31px,9vw,44px)}.math-sign,.change-arrow{font-size:32px}.equal-options{gap:4px;grid-template-columns:repeat(3,1fr)}.choice-card{min-height:112px;padding:3px 1px;border-width:2px;border-radius:20px 16px 21px 17px}.choice-card .mat{width:clamp(44px,14vw,58px);padding:10px}.choice-card .pebble{width:clamp(14px,4vw,18px)}.choice-card::before,.choice-card::after{width:15px;height:15px}.answers{width:min(100%,410px);min-height:92px;padding-top:5%;padding-bottom:6%;filter:drop-shadow(0 6px 5px rgba(68,42,21,.2))}.pip-card i{width:clamp(15px,4.6vw,20px)}.submit-row{min-height:62px;padding-right:62px;margin-top:-10px}.confirm-btn{width:61px;height:61px}.skip-demo{right:3px;bottom:5px}.demo-pointer{width:46px;height:54px}.rune{width:46px}.panel{width:min(96vw,620px);padding:18px 13px}.menu-level{width:clamp(58px,18vw,72px);height:clamp(64px,20vw,80px)}.highfive{width:min(82vw,330px);max-height:34vh}}
@media(max-height:700px) and (orientation:portrait){.game-content{grid-template-rows:91px minmax(0,1fr)}.hud{grid-template-rows:48px 40px}.play-grid{grid-template-rows:70px minmax(0,1fr)}.guide-button{width:68px;height:68px;flex-basis:68px}.speech{min-height:57px}.speech-visual{min-height:45px;transform:scale(.72)}.mat{width:clamp(86px,29vw,108px)}.object-group{min-height:76px;min-width:76px}.answers{width:min(86%,340px);min-height:76px}.submit-row{min-height:53px}.confirm-btn{width:53px;height:53px}.hero{width:72px;height:72px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Sizing corrections for the generated woven prop. */
.mat{flex:0 0 clamp(136px,14.5vw,205px);width:clamp(136px,14.5vw,205px);min-width:0;padding:clamp(34px,4.3vw,58px)}
.choice-card .mat{flex-basis:clamp(74px,7vw,100px);width:clamp(74px,7vw,100px);padding:19px}
@media(max-width:760px),(orientation:portrait){.mat{flex-basis:clamp(104px,33vw,138px);width:clamp(104px,33vw,138px);padding:clamp(27px,8.5vw,38px)}.choice-card .mat{flex-basis:clamp(44px,14vw,58px);width:clamp(44px,14vw,58px);padding:10px}}
@media(max-height:700px) and (orientation:portrait){.mat{flex-basis:clamp(86px,29vw,108px);width:clamp(86px,29vw,108px);padding:clamp(22px,7.5vw,30px)}}

/* Choice rounds are three picnic spots drawn on the sand, not app cards. */
.choice-card{border:0;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,248,231,.58) 0 48%,rgba(239,216,166,.24) 58%,transparent 73%);box-shadow:none;backdrop-filter:none}
.choice-card::before,.choice-card::after{width:25px;height:25px;opacity:.9;filter:drop-shadow(0 2px 2px rgba(78,47,22,.2))}
@media(max-width:760px),(orientation:portrait){.choice-card{min-height:124px}.choice-card::before,.choice-card::after{width:17px;height:17px}}

/* v1.3 — canonical wondermaths.app game chrome (Karta UI). */
.image-button{border:0;background:transparent;padding:0;cursor:pointer}
.image-button img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.play-btn.image-button{width:clamp(88px,9vw,122px);height:clamp(88px,9vw,122px);border:0;background:transparent;box-shadow:none;filter:drop-shadow(0 8px 8px rgba(65,35,11,.34))}
.play-btn.image-button::before{display:none}
.game{padding:0}
.game-content{position:absolute;inset:0;height:auto;display:block}
.hud{position:absolute;inset:0;z-index:25;display:block;pointer-events:none}
.pause-button{position:absolute;left:max(16px,env(safe-area-inset-left));top:max(16px,env(safe-area-inset-top));width:80px;height:80px;padding:0;border:0;border-radius:50%;background:transparent url('../assets/ui/button-pause-normal.webp') center/contain no-repeat;filter:drop-shadow(0 8px 8px rgba(33,19,7,.4));cursor:pointer;pointer-events:auto}
.pause-button:active{background-image:url('../assets/ui/button-pause-pressed.webp');transform:translateY(3px) scale(.96)}
.play-grid{position:absolute;inset:0;display:block;min-height:0}
.guide-zone{position:absolute;z-index:22;right:max(14px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));width:auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;padding:0;pointer-events:none}
.guide-button{order:2;flex:0 0 clamp(90px,8vw,112px);width:clamp(90px,8vw,112px);height:clamp(90px,8vw,112px);pointer-events:auto}
.speech{order:1;width:min(25vw,300px);min-height:86px;margin:0 -8px 0 0;padding:9px 15px;border-radius:27px}
.speech::after{left:auto;right:-15px;top:50%;bottom:auto;width:28px;height:28px;border:0;border-top:4px solid #b27a45;border-right:4px solid #b27a45;border-radius:0 8px 0 0;transform:translateY(-50%) rotate(45deg)}
.speech-visual{min-height:62px}
.board{position:absolute;inset:106px clamp(165px,14vw,210px) 72px;height:auto;padding:0;display:grid;grid-template-rows:minmax(0,1fr) auto 86px}
.hero-zone{position:absolute;z-index:8;right:max(22px,env(safe-area-inset-right));bottom:max(82px,calc(env(safe-area-inset-bottom) + 72px));width:clamp(130px,14vw,215px);height:clamp(130px,18vw,260px);padding:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.hero{width:100%;height:100%;max-height:none}
.confirm-btn{width:84px;height:84px}
.submit-row{min-height:86px;margin-top:-9px}
.skip-demo{left:0;right:auto;bottom:12px;min-width:80px;min-height:80px;background:#b87a43 url('../assets/ui/button-next-normal.webp') center/contain no-repeat;border:0;color:transparent;filter:drop-shadow(0 7px 6px rgba(48,26,10,.33))}
.skip-demo:not(.hidden){display:block!important}
.skip-demo.hidden{display:none!important}
.corner-control{position:absolute;z-index:24;left:max(16px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));width:80px;height:80px;filter:drop-shadow(0 8px 8px rgba(33,19,7,.4));opacity:.72}
.corner-control:hover,.corner-control:focus-visible{opacity:1}
.star-jar{position:absolute;z-index:24;right:max(16px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:82px;height:82px;opacity:.78;pointer-events:none}
.star-jar img{width:100%;height:100%;object-fit:contain}
.star-jar span{position:absolute;inset:0;display:grid;place-items:center;padding-top:23px;color:#fff;font-size:22px;font-weight:900;text-shadow:0 2px 2px #5d321b}
.panel-actions{gap:18px;flex-wrap:wrap}
.panel-actions .panel-control{position:relative;width:80px;height:80px;filter:drop-shadow(0 7px 6px rgba(48,26,10,.33))}
.panel-control:active{transform:translateY(3px) scale(.96)}
.sound-control.is-muted{filter:grayscale(.9) drop-shadow(0 7px 6px rgba(48,26,10,.25));opacity:.58}
.sound-control.is-muted::after{content:"×";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:40px;font-weight:900;text-shadow:0 2px 3px #6d3b1f;pointer-events:none}
body:not([data-state="intro"]) .rune{opacity:.24}

@media(max-width:760px),(orientation:portrait){
  .game-content{display:block}
  .hud{display:block}
  .pause-button{left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));width:80px;height:80px}
  .play-grid{display:block}
  .guide-zone{right:max(6px,env(safe-area-inset-right));top:max(6px,env(safe-area-inset-top));display:flex;flex-direction:row;width:auto;height:auto;padding:0}
  .guide-button{order:2;flex-basis:82px;width:82px;height:82px}
  .speech{position:absolute;right:67px;top:87px;width:min(69vw,270px);min-height:70px;margin:0;padding:6px 9px}
  .speech::after{right:18px;top:-14px;transform:rotate(-45deg)}
  .speech-visual{min-height:54px;transform:scale(.86)}
  .board{inset:166px 4px 82px;height:auto;padding:0 4px;grid-template-rows:minmax(0,1fr) auto 82px}
  .board::after{display:none}
  .hero-zone{right:max(73px,calc(env(safe-area-inset-right) + 66px));bottom:max(74px,calc(env(safe-area-inset-bottom) + 67px));width:78px;height:78px}
  .hero{width:78px;height:78px}
  .corner-control{left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));width:80px;height:80px;opacity:.72}
  .star-jar{right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));width:80px;height:80px}
  .confirm-btn{width:80px;height:80px}
  .answer-card{min-width:80px;min-height:80px}
  .submit-row{min-height:82px;margin-top:-9px;padding:0}
  .skip-demo{position:fixed;left:auto;right:0;top:calc(50% - 40px);bottom:auto;min-width:80px;min-height:80px;width:80px;height:80px}
  .panel-actions .panel-control{width:80px;height:80px}
  .menu-actions{display:grid;grid-template-columns:repeat(2,80px);gap:12px;width:max-content;margin-inline:auto}
  .play-btn.image-button{width:92px;height:92px}
  .rune{opacity:.2}
}

@media(max-height:700px) and (orientation:portrait){
  .guide-button{flex-basis:80px;width:80px;height:80px}
  .speech{top:79px;right:59px;min-height:62px}
  .speech-visual{min-height:48px;transform:scale(.76)}
  .board{inset:146px 4px 78px;grid-template-rows:minmax(0,1fr) auto 80px}
  .confirm-btn{width:80px;height:80px}
  .submit-row{min-height:80px}
  .hero-zone{width:68px;height:68px;right:71px;bottom:75px}
  .hero{width:68px;height:68px}
  .skip-demo{top:calc(50% - 40px);width:80px;height:80px;min-width:80px;min-height:80px}
}

/* v1.4 — Wondermaths Juice 6/6. All effect elements are non-interactive. */
:root{--wm-cream-1:#fff8e6;--wm-cream-2:#f6e7c8;--wm-wood-1:#c98f5a;--wm-wood-2:#8a552c;--wm-gold:#f2c141;--wm-sage:#879a63;--wm-plum:#8d6197;--wm-coral:#e98978;--wm-ink:#3d3226;--world-water:#78cbd0;--world-pearl:#fff1cf}
#fx-layer{position:fixed;inset:0;z-index:60;overflow:hidden;pointer-events:none;contain:layout paint style}
#fx-layer,#fx-layer *{pointer-events:none}
.juice-ambient-root{position:absolute;inset:0;opacity:1;transition:opacity .4s ease}
#fx-layer.juice-paused .juice-ambient-root{opacity:0}
.juice-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 58%,rgba(78,47,24,.09) 100%)}
.juice-ambient{position:absolute;display:block;opacity:.18;will-change:transform,opacity}
.juice-ambient.glint{width:18px;height:7px;border-radius:50%;background:radial-gradient(ellipse,var(--world-pearl),rgba(120,203,208,.5) 45%,transparent 72%);box-shadow:0 0 16px rgba(255,241,207,.48)}
.glint-a{left:5%;top:34%;animation:juiceGlintA 14s ease-in-out infinite alternate}
.glint-b{right:6%;top:28%;animation:juiceGlintB 17s ease-in-out -6s infinite alternate}
.juice-ambient.pearl-mote{right:3%;bottom:28%;width:13px;height:13px;border:2px solid rgba(255,241,207,.72);border-radius:50%;background:rgba(120,203,208,.16);animation:juiceMote 12s ease-in-out -3s infinite}
.fx-particle{position:fixed;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--fx-color,var(--wm-gold));box-shadow:0 0 8px color-mix(in srgb,var(--fx-color,var(--wm-gold)) 65%,transparent);animation:juiceBurst .72s cubic-bezier(.18,.7,.25,1) both;will-change:transform,opacity}
.fx-particle.shape-1{width:7px;height:14px;border-radius:70% 30% 65% 35%;transform-origin:center}
.fx-particle.shape-2{width:13px;height:5px;border-radius:50%}
.reward-token{position:fixed;left:0;top:0;width:56px;height:56px;background-position:center;background-repeat:no-repeat;background-size:contain;filter:drop-shadow(0 5px 5px rgba(62,36,17,.28));opacity:0;will-change:transform,opacity}
.juice-touch{animation:juiceTouch .22s cubic-bezier(.22,.9,.3,1.2)!important}
.juice-gold-flash{filter:brightness(1.42) saturate(1.12) drop-shadow(0 0 16px rgba(242,193,65,.92))!important;transition:filter .16s ease}
.juice-target-punch{animation:juicePunch .25s cubic-bezier(.22,.9,.3,1.2)!important}
.juice-object-gag{animation:juiceObjectGag 1.1s ease-in-out!important}
.mistake-puff{position:fixed;left:0;top:0;width:15px;height:9px;border-radius:50%;background:rgba(255,241,207,.74);border:2px solid rgba(233,137,120,.48);animation:juicePuff .8s ease-out both}
.mistake-bubble{position:fixed;left:0;top:0;width:30px;height:30px;border:3px solid rgba(255,241,207,.88);border-radius:50%;background:rgba(120,203,208,.18);box-shadow:inset 5px 4px 0 rgba(255,255,255,.34);animation:juiceBubble 1.35s ease-out both}
.mistake-pebble{position:fixed;left:0;top:0;width:56px;height:40px;background:url('assets/prop-beach-coral-pebble.webp') center/contain no-repeat;filter:drop-shadow(0 6px 5px rgba(74,43,20,.28));animation:juicePebbleTumble 2s cubic-bezier(.18,.72,.25,1) both}
.juice-beat-breathe{animation:juiceBeatBreathe 1.25s ease-in-out!important}
.juice-beat-look{animation:juiceBeatLook 1.25s ease-in-out!important}
.juice-beat-bubble{animation:juiceBeatBubble 1.35s ease-in-out!important}
.juice-beat-wave{animation:juiceBeatWave 1.4s ease-in-out!important}
.juice-idle{animation:juiceIdle 2s ease-in-out infinite!important}
.juice-hint-ring{animation:juiceHintRing 1.35s ease-in-out infinite!important;position:relative;z-index:4}
body.juice-hinting [data-value]:not(.juice-hint-ring){opacity:.72;transition:opacity .28s ease}
.juice-highfive{animation:juiceHighfive 1.35s cubic-bezier(.22,.9,.3,1.2)!important}
.level-bloom,.final-bloom{position:fixed;inset:0;background:radial-gradient(circle at 50% 45%,rgba(255,245,194,.34),rgba(242,193,65,.13) 36%,transparent 68%);animation:juiceBloom 1.55s ease-in-out both}
.final-bloom{background:radial-gradient(circle at 50% 44%,rgba(255,250,211,.46),rgba(242,193,65,.2) 40%,transparent 72%);animation-duration:1.8s}
.rare-ripple{position:absolute;bottom:18%;width:90px;height:34px;border:4px solid rgba(120,203,208,.42);border-top-color:rgba(255,241,207,.66);border-radius:50%;opacity:0;animation:juiceRareRipple 3.4s ease-in-out both}
.rare-ripple.from-left{left:-18px}.rare-ripple.from-right{right:-18px}
@keyframes juiceTouch{0%,100%{transform:scale(1)}48%{transform:scale(1.18)}}
@keyframes juicePunch{0%,100%{transform:scale(1)}48%{transform:scale(1.12)}}
@keyframes juiceBurst{0%{opacity:0;transform:translate3d(calc(var(--fx-x) - 5px),calc(var(--fx-y) - 5px),0) scale(.5) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate3d(calc(var(--fx-x) + var(--dx) - 5px),calc(var(--fx-y) + var(--dy) - 5px),0) scale(.18) rotate(var(--spin))}}
@keyframes juiceObjectGag{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-6px) rotate(-2deg) scale(.97,1.04)}42%{transform:translateX(6px) rotate(2deg) scale(1.03,.97)}64%{transform:translateX(-3px) rotate(-1deg)}82%{transform:translateX(2px) rotate(1deg)}}
@keyframes juicePuff{0%{opacity:0;transform:translate3d(var(--fx-x),var(--fx-y),0) scale(.5)}25%{opacity:.85}100%{opacity:0;transform:translate3d(calc(var(--fx-x) + var(--puff-x)),calc(var(--fx-y) - 48px),0) scale(1.45)}}
@keyframes juiceBubble{0%{opacity:0;transform:translate3d(calc(var(--fx-x) - 15px),calc(var(--fx-y) - 3px),0) scale(.5)}25%{opacity:.8}82%{opacity:.72;transform:translate3d(calc(var(--fx-x) - 3px),calc(var(--fx-y) - 67px),0) scale(1.08)}100%{opacity:0;transform:translate3d(calc(var(--fx-x) + 1px),calc(var(--fx-y) - 80px),0) scale(.15)}}
@keyframes juicePebbleTumble{0%{opacity:0;transform:translate3d(calc(var(--fx-x) - 28px),calc(var(--fx-y) - 20px),0) rotate(0) scale(.55)}16%{opacity:1;transform:translate3d(calc(var(--fx-x) - 18px),calc(var(--fx-y) - 76px),0) rotate(95deg) scale(1.05)}48%{opacity:1;transform:translate3d(calc(var(--fx-x) + 24px),calc(var(--fx-y) - 36px),0) rotate(230deg) scale(.95)}78%{opacity:.85;transform:translate3d(calc(var(--fx-x) + 44px),calc(var(--fx-y) - 9px),0) rotate(325deg) scale(.82)}100%{opacity:0;transform:translate3d(calc(var(--fx-x) + 50px),calc(var(--fx-y) + 3px),0) rotate(360deg) scale(.68)}}
@keyframes juiceBeatBreathe{0%,100%{transform:scale(1)}35%{transform:scale(1.08,.96)}70%{transform:scale(.98,1.04)}}
@keyframes juiceBeatLook{0%,100%{transform:translateX(0) rotate(0)}28%{transform:translateX(-8px) rotate(-3deg)}62%{transform:translateX(8px) rotate(3deg)}}
@keyframes juiceBeatBubble{0%,100%{transform:rotate(0) translateY(0)}35%{transform:rotate(-3deg) translateY(-4px)}72%{transform:rotate(3deg) translateY(2px)}}
@keyframes juiceBeatWave{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-8px) rotate(-2deg)}68%{transform:translateY(5px) rotate(2deg)}}
@keyframes juiceIdle{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes juiceHintRing{0%,100%{transform:scale(1);filter:drop-shadow(0 0 4px rgba(242,193,65,.35))}50%{transform:scale(1.055);filter:drop-shadow(0 0 17px rgba(242,193,65,.9))}}
@keyframes juiceHighfive{0%{transform:scale(.88);opacity:.65}48%{transform:scale(1.08) rotate(1.5deg);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes juiceBloom{0%{opacity:0}46%{opacity:1}100%{opacity:0}}
@keyframes juiceGlintA{0%{transform:translate3d(0,0,0) scale(.8);opacity:.08}48%{opacity:.28}100%{transform:translate3d(34px,-12px,0) scale(1.3);opacity:.12}}
@keyframes juiceGlintB{0%{transform:translate3d(0,0,0) scale(1);opacity:.1}55%{opacity:.26}100%{transform:translate3d(-42px,14px,0) scale(.76);opacity:.08}}
@keyframes juiceMote{0%,100%{transform:translate3d(0,16px,0) scale(.72);opacity:.05}48%{opacity:.24}70%{transform:translate3d(-18px,-34px,0) scale(1.08);opacity:.16}}
@keyframes juiceRareRipple{0%{opacity:0;transform:translateY(25px) scale(.35)}25%{opacity:.5;transform:translateY(0) scale(.85)}72%{opacity:.28;transform:translateY(-25px) scale(1.2)}100%{opacity:0;transform:translateY(-38px) scale(1.45)}}
@media(prefers-reduced-motion:reduce){
  .juice-ambient-root,.fx-particle,.reward-token,.mistake-puff,.mistake-bubble,.mistake-pebble,.level-bloom,.final-bloom,.rare-ripple{display:none!important}
  .juice-touch,.juice-gold-flash,.juice-target-punch,.juice-object-gag,.juice-beat-breathe,.juice-beat-look,.juice-beat-bubble,.juice-beat-wave,.juice-idle,.juice-hint-ring,.juice-highfive{animation:none!important;transform:none!important}
}
.juice-calm .juice-ambient-root,.juice-calm .fx-particle,.juice-calm .reward-token,.juice-calm .mistake-puff,.juice-calm .mistake-bubble,.juice-calm .mistake-pebble,.juice-calm .level-bloom,.juice-calm .final-bloom,.juice-calm .rare-ripple,.juice-calm .confetti{display:none!important}
.juice-calm .juice-touch,.juice-calm .juice-gold-flash,.juice-calm .juice-target-punch,.juice-calm .juice-object-gag,.juice-calm .juice-beat-breathe,.juice-calm .juice-beat-look,.juice-calm .juice-beat-bubble,.juice-calm .juice-beat-wave,.juice-calm .juice-idle,.juice-calm .juice-hint-ring,.juice-calm .juice-highfive,.juice-calm .guide,.juice-calm .hero{animation:none!important;transform:none!important}