:root{--font-display: "Lilita One", "Baloo 2", system-ui, sans-serif;--font-body: "Baloo 2", system-ui, sans-serif;--c-sky-top: #4fd4e8;--c-sky-mid: #8ee9e2;--c-sea: #1ba8c9;--c-sand: #ffe6a7;--c-leaf: #3fae4c;--c-leaf-dark: #2c8a3e;--c-sunny: #ffcf3f;--c-sunny-deep: #f5a623;--c-coral: #ff7e5f;--c-berry: #ff5e9c;--c-cream: #fff8e7;--c-cocoa: #5c3a1e;--c-cocoa-soft: #8a5a30;--shadow-pop: 0 6px 0 rgba(0,0,0,.18), 0 14px 30px rgba(20, 60, 80, .25);--radius-card: 26px;--board-shadow: 0 10px 0 #2e6b28, 0 24px 40px rgba(5, 40, 55, .45)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:var(--font-body);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}body{background:#062a3a}#app{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.stage{position:relative;width:100%;height:100%;overflow:hidden;background:linear-gradient(180deg,var(--c-sky-top),var(--c-sky-mid) 55%,var(--c-sea))}.game-col{position:relative;z-index:2;display:flex;flex-direction:column;width:100%;max-width:580px;height:100%;margin:0 auto}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;overflow:hidden}.wipe{position:fixed;top:-20%;right:-20%;bottom:-20%;left:-20%;background:radial-gradient(circle at center,#7ee081,#3fae4c 55%,#2c8a3e);z-index:999;pointer-events:none;clip-path:circle(0% at 50% 50%)}.wipe.in{animation:wipeIn .42s cubic-bezier(.65,0,.35,1) forwards}.wipe.out{animation:wipeOut .42s cubic-bezier(.65,0,.35,1) forwards}@keyframes wipeIn{0%{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}@keyframes wipeOut{0%{clip-path:circle(75% at 50% 50%)}to{clip-path:circle(0% at 50% 50%)}}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;cursor:pointer;font-family:var(--font-display);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25);border-radius:999px;padding:16px 44px;font-size:28px;letter-spacing:1px;background:linear-gradient(180deg,#ffd44d,#ffb62e 48%,#f59a13 52%,#ef8b00);box-shadow:inset 0 3px #ffffff8c,inset 0 -4px #0000001f,0 7px #b56a00,0 16px 24px #1e3c1459;transition:transform .08s ease,box-shadow .08s ease,filter .15s ease}.btn:after{content:"";position:absolute;left:12%;right:12%;top:7%;height:34%;border-radius:999px;background:linear-gradient(180deg,#ffffff8c,#fff0);pointer-events:none}.btn:hover{filter:brightness(1.06)}.btn:active{transform:translateY(5px);box-shadow:inset 0 3px #fff6,inset 0 -2px #0000001f,0 2px #b56a00,0 6px 10px #1e3c144d}.btn.btn-green{background:linear-gradient(180deg,#8fe06a,#5cc93e 48%,#43b32a 52%,#319c1d);box-shadow:inset 0 3px #ffffff8c,inset 0 -4px #0000001f,0 7px #1d7a12,0 16px 24px #14461459}.btn.btn-green:active{box-shadow:inset 0 3px #fff6,0 2px #1d7a12,0 6px 10px #1446144d}.btn.btn-blue{background:linear-gradient(180deg,#6fd7ff,#38b2ef 48%,#1e9de2 52%,#0f8bd2);box-shadow:inset 0 3px #ffffff8c,inset 0 -4px #0000001f,0 7px #0a659c,0 16px 24px #0a325a59}.btn.btn-blue:active{box-shadow:inset 0 3px #fff6,0 2px #0a659c,0 6px 10px #0a325a4d}.btn.btn-pink{background:linear-gradient(180deg,#ff9ec8,#ff639f 48%,#f74e90 52%,#e83a7f);box-shadow:inset 0 3px #ffffff8c,inset 0 -4px #0000001f,0 7px #b02561,0 16px 24px #78143c59}.btn.btn-pink:active{box-shadow:inset 0 3px #fff6,0 2px #b02561,0 6px 10px #78143c4d}.btn.btn-small{padding:10px 26px;font-size:20px}.btn-round{width:58px;height:58px;padding:0;border-radius:50%;font-size:26px}.btn-round:after{left:18%;right:18%}.btn.pulse{animation:btnPulse 1.6s ease-in-out infinite}@keyframes btnPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.card{background:linear-gradient(180deg,#fffdf4,#fdf3d7);border-radius:var(--radius-card);box-shadow:inset 0 3px #fff,inset 0 -6px #c4954a40,0 10px #96692859,0 26px 40px #0a283c59;border:4px solid #f7c66b;position:relative}.card-title{font-family:var(--font-display);color:var(--c-cocoa);text-align:center}.banner{position:relative;font-family:var(--font-display);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3);background:linear-gradient(180deg,#67c94f,#3fae4c 55%,#2c8a3e);border-radius:18px;padding:10px 34px;font-size:26px;box-shadow:inset 0 3px #fff6,0 5px #1d6b2e,0 10px 18px #00000040}.scene{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.sun{position:absolute;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff6c9,#ffdf6b 55%,#ffc93f);box-shadow:0 0 60px 24px #ffe2788c;animation:sunFloat 7s ease-in-out infinite}@keyframes sunFloat{0%,to{transform:translateY(0)}50%{transform:translateY(10px)}}.sun:before{content:"";position:absolute;top:-26px;right:-26px;bottom:-26px;left:-26px;border-radius:50%;background:conic-gradient(rgba(255,240,170,.35) 0 12deg,transparent 12deg 30deg,rgba(255,240,170,.35) 30deg 42deg,transparent 42deg 60deg,rgba(255,240,170,.35) 60deg 72deg,transparent 72deg 90deg,rgba(255,240,170,.35) 90deg 102deg,transparent 102deg 120deg,rgba(255,240,170,.35) 120deg 132deg,transparent 132deg 150deg,rgba(255,240,170,.35) 150deg 162deg,transparent 162deg 180deg,rgba(255,240,170,.35) 180deg 192deg,transparent 192deg 210deg,rgba(255,240,170,.35) 210deg 222deg,transparent 222deg 240deg,rgba(255,240,170,.35) 240deg 252deg,transparent 252deg 270deg,rgba(255,240,170,.35) 270deg 282deg,transparent 282deg 300deg,rgba(255,240,170,.35) 300deg 312deg,transparent 312deg 330deg,rgba(255,240,170,.35) 330deg 342deg,transparent 342deg 360deg);animation:sunSpin 24s linear infinite}@keyframes sunSpin{to{transform:rotate(360deg)}}.cloud{position:absolute;height:30px;width:90px;background:#ffffffeb;border-radius:999px;filter:drop-shadow(0 6px 10px rgba(30,90,110,.12));animation:cloudDrift linear infinite}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:42px;height:42px;left:12px;top:-20px}.cloud:after{width:30px;height:30px;right:16px;top:-13px}@keyframes cloudDrift{0%{transform:translate(-160px)}to{transform:translate(calc(100vw + 160px))}}.sea{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,#2fc0dd,#148bb4 70%,#0d6f96)}.sea:before{content:"";position:absolute;left:-50%;right:-50%;top:-14px;height:30px;background:radial-gradient(circle 18px at 18px 22px,#2fc0dd 17px,transparent 18px);background-size:36px 30px;animation:waveSlide 6s linear infinite}@keyframes waveSlide{0%{transform:translate(0)}to{transform:translate(36px)}}.sparkle-layer{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.sea-sparkle{position:absolute;width:26px;height:4px;border-radius:4px;background:#ffffff8c;animation:seaSparkle ease-in-out infinite}@keyframes seaSparkle{0%,to{opacity:0;transform:scaleX(.4)}50%{opacity:1;transform:scaleX(1)}}.island{position:absolute;border-radius:50% 50% 46% 46%/100% 100% 26% 26%;background:linear-gradient(180deg,#ffe9ae,#f4cf7c 70%,#e2b45f);box-shadow:inset 0 -10px #be8c4659}.palm{position:absolute;transform-origin:bottom center;animation:palmSway 5s ease-in-out infinite}@keyframes palmSway{0%,to{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}.floaty{animation:floaty 3.4s ease-in-out infinite}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.leaf-fall{position:absolute;animation:leafFall linear infinite;opacity:.9}@keyframes leafFall{0%{transform:translateY(-60px) translate(0) rotate(0)}25%{transform:translateY(25vh) translate(30px) rotate(90deg)}50%{transform:translateY(50vh) translate(-20px) rotate(200deg)}75%{transform:translateY(75vh) translate(25px) rotate(300deg)}to{transform:translateY(105vh) translate(-10px) rotate(420deg)}}.logo{position:relative;text-align:center;font-family:var(--font-display);line-height:.95;filter:drop-shadow(0 10px 16px rgba(20,60,30,.4))}.logo .logo-main{font-size:74px;letter-spacing:2px;background:linear-gradient(180deg,#fff8d0 5%,#ffe14d 35%,#ffab1f 70%,#ff8d00);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:3px #7c4a12;paint-order:stroke fill;display:block;transform:rotate(-3deg)}.logo .logo-sub{display:inline-block;margin-top:12px;font-size:25px;color:#fff;background:linear-gradient(180deg,#4fc7ff,#1e9de2);padding:6px 26px;border-radius:999px;box-shadow:inset 0 2px #ffffff80,0 4px #0a659c,0 8px 14px #00000040;text-shadow:0 2px 0 rgba(0,0,0,.25);transform:rotate(-2deg);letter-spacing:1px}.logo .logo-main span{display:inline-block;animation:logoBounce 2.6s ease-in-out infinite}@keyframes logoBounce{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(2deg)}}.map-screen{background:#0a3550;overflow:hidden}.map-sky{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:linear-gradient(180deg,#63d6ec,#8fe9dd 52%,#d9f6c9)}.map-light{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}.map-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;overflow:hidden;pointer-events:none}.map-layer{position:absolute;top:0;left:0;width:100%;height:100%}.mb-item{position:absolute;pointer-events:none}.mb-anim{transform-origin:bottom center}.mb-item svg{display:block}.map-scroll{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.map-scroll::-webkit-scrollbar{display:none}.map-scroll.h{overflow-x:auto;overflow-y:hidden}.map-scroll.v{overflow-y:auto;overflow-x:hidden}.map-content{position:relative}.mb-ground{position:absolute;pointer-events:none;z-index:1}.map-path{position:absolute;top:0;left:0;z-index:2;pointer-events:none}.mp-fill,.mp-dash{transition:stroke .6s ease}.map-decor.near{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none}.map-node{position:absolute;width:64px;height:64px;transform:translate(-50%,-50%);border:none;padding:0;cursor:pointer;z-index:6;background:none;transition:filter .15s ease}.map-node .mn-face{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;font-family:var(--font-display);font-size:25px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.32);background:radial-gradient(circle at 38% 30%,var(--nc1),var(--nc2) 62%,var(--nc3));box-shadow:inset 0 3px #ffffff8c,inset 0 -5px #0000002e,0 6px 0 var(--nc3),0 12px 16px #00141e66;border:3px solid rgba(255,255,255,.85);transition:transform .12s ease,box-shadow .12s ease}.map-node .mn-stars{position:absolute;left:50%;bottom:-13px;transform:translate(-50%);display:flex;gap:2px;font-size:13px;line-height:1;color:#ffffff59;text-shadow:0 1px 1px rgba(0,0,0,.4);white-space:nowrap}.map-node .mn-stars .on{color:#ffd44d;filter:drop-shadow(0 0 3px rgba(255,200,80,.9))}.map-node:active .mn-face{transform:translateY(3px);box-shadow:inset 0 2px #fff6,0 2px 0 var(--nc3),0 5px 8px #00141e66}.map-node.locked .mn-face{background:radial-gradient(circle at 38% 30%,#cdd8dd,#90a2aa 60%,#6d7f86);border-color:#ffffff80;box-shadow:inset 0 3px #ffffff4d,inset 0 -5px #0000002e,0 6px #6d7f86,0 12px 16px #00141e66;font-size:22px}.map-node.locked{cursor:default}.map-node.current{z-index:8}.map-node.current .mn-face{animation:mnPulse 1.4s ease-in-out infinite;box-shadow:inset 0 3px #fff9,inset 0 -5px #00000026,0 6px 0 var(--nc3),0 0 22px 6px #fff0b4bf,0 12px 16px #00141e66}.map-node.current:after{content:"PLAY";position:absolute;left:50%;top:-22px;transform:translate(-50%);font-family:var(--font-display);font-size:12px;letter-spacing:1px;color:#fff;background:#ef7d00;padding:2px 10px;border-radius:999px;box-shadow:0 3px #b55f00;white-space:nowrap;animation:mnBob 1.4s ease-in-out infinite}@keyframes mnPulse{0%,to{transform:scale(1)}50%{transform:scale(1.09)}}@keyframes mnBob{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,-4px)}}.map-frog{position:absolute;z-index:5;transform:translate(-50%,-100%);text-align:center;filter:drop-shadow(0 8px 8px rgba(0,30,40,.35));pointer-events:none}.map-frog svg{width:92px}.map-frog-sign{font-family:var(--font-display);font-size:13px;color:#fff;background:var(--sign);display:inline-block;padding:4px 14px;border-radius:999px;margin-bottom:6px;box-shadow:inset 0 2px #fff6,0 4px #00000040;text-shadow:0 1px 2px rgba(0,0,0,.4);white-space:nowrap}.map-frog-name{font-family:var(--font-display);font-size:12px;color:#fff;text-shadow:0 2px 3px rgba(0,40,30,.7);margin-top:-4px;white-space:nowrap}.mb-fog{position:absolute;width:320px;height:150px;pointer-events:none;z-index:4}.mb-fog .mb-fogdrift{border-radius:50%;background:radial-gradient(ellipse at center,var(--fog),transparent 70%)}.map-particles{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none}.map-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top));z-index:20}.map-worldbar{position:relative;flex:1;display:flex;justify-content:center}.map-worldpick{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:20px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3);background:linear-gradient(180deg,#67c94f,#3fae4c 55%,#2c8a3e);border:none;border-radius:16px;padding:8px 20px;cursor:pointer;box-shadow:inset 0 3px #fff6,0 5px #1d6b2e,0 8px 16px #0000004d;white-space:nowrap;max-width:78vw;overflow:hidden;text-overflow:ellipsis}.map-worldpick .wp-caret{font-size:13px;transition:transform .2s}.map-worldpick.open .wp-caret{transform:rotate(180deg)}.map-worldmenu{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%) scale(.96);min-width:240px;background:linear-gradient(180deg,#fffdf4,#fdf3d7);border:3px solid #f7c66b;border-radius:18px;box-shadow:0 8px #96692859,0 20px 34px #0a283c73;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;z-index:31}.map-worldmenu.open{opacity:1;transform:translate(-50%) scale(1);pointer-events:auto}.wm-opt{display:flex;align-items:center;gap:12px;width:100%;padding:11px 18px;border:none;background:none;cursor:pointer;font-family:var(--font-display);text-align:left;color:var(--c-cocoa);transition:background .12s}.wm-opt+.wm-opt{border-top:1px solid rgba(196,149,74,.18)}.wm-opt:hover{background:#3fae4c24}.wm-opt.active{background:#3fae4c33}.wm-opt.locked{color:#a99;cursor:default}.wm-opt.locked:hover{background:none}.wm-icon{font-size:22px}.wm-txt{display:flex;flex-direction:column;font-size:17px;line-height:1.1}.wm-txt small{font-size:11px;color:var(--c-cocoa-soft);font-family:var(--font-body);font-weight:700}.map-stars{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-display);font-size:20px;color:var(--c-cocoa);background:linear-gradient(180deg,#fffdf4f5,#fdf0cff5);border:3px solid #f7c66b;border-radius:16px;padding:6px 14px;box-shadow:inset 0 2px #fff,0 5px #96692859,0 8px 14px #0a283c40}.map-stars small{font-size:13px;color:var(--c-cocoa-soft)}.map-stars .ms-star{font-size:17px}.mb-cloud{width:120px;height:40px;border-radius:999px;background:#ffffffe6;box-shadow:34px 8px 0 -6px #ffffffd9,-30px 10px 0 -8px #fffc;filter:blur(.4px)}.mb-sun{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 42% 38%,#fff6c9,#ffdf6b 32%,#ffc93f 44%,#ffd66e59 60%,#ffd66e00 78%)}.mb-smoke{width:130px;height:230px;border-radius:50%;background:radial-gradient(ellipse at 50% 100%,rgba(90,70,60,.55),rgba(90,70,60,.2) 45%,transparent 72%)}.mb-aurora{width:520px;height:240px;border-radius:50%;background:linear-gradient(120deg,transparent,rgba(140,255,200,.28),rgba(140,200,255,.24),rgba(200,150,255,.28),transparent);filter:blur(10px)}.mb-nebula{background:radial-gradient(ellipse at 40% 40%,rgba(180,120,255,.4),transparent 62%),radial-gradient(ellipse at 65% 60%,rgba(120,160,255,.32),transparent 62%);border-radius:50%}.mb-anim.mb-drift{animation:mbDrift 60s linear infinite}@keyframes mbDrift{0%{transform:translate(-40px)}to{transform:translate(60px)}}.mb-anim.mb-sway{animation:mbSway 5s ease-in-out infinite}@keyframes mbSway{0%,to{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}.mb-anim.mb-bob{animation:mbBob 3.6s ease-in-out infinite}@keyframes mbBob{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.mb-anim.mb-float{animation:mbFloat 6s ease-in-out infinite}@keyframes mbFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-18px)}}.mb-anim.mb-glow{animation:mbGlow 3.2s ease-in-out infinite}@keyframes mbGlow{0%,to{opacity:.72}50%{opacity:1}}.mb-anim.mb-spin-slow{animation:mbSpin 60s linear infinite}@keyframes mbSpin{to{transform:rotate(360deg)}}.mb-anim.mb-smoke{animation:mbSmoke 6s ease-in-out infinite}@keyframes mbSmoke{0%,to{opacity:.5;transform:translateY(0) scaleY(1)}50%{opacity:.85;transform:translateY(-6px) scaleY(1.12)}}.mb-anim.mb-aurora{animation:mbAurora 12s ease-in-out infinite}@keyframes mbAurora{0%,to{opacity:.6;transform:skew(-6deg)}50%{opacity:1;transform:skew(8deg)}}.map-frog.mb-bob{animation:mbBobFrog 3.6s ease-in-out infinite}@keyframes mbBobFrog{0%,to{transform:translate(-50%,-100%) translateY(0)}50%{transform:translate(-50%,-100%) translateY(-8px)}}.mb-fogdrift{position:absolute;top:0;right:0;bottom:0;left:0;animation:mbFogDrift 26s ease-in-out infinite}@keyframes mbFogDrift{0%,to{transform:translate(-24px)}50%{transform:translate(30px)}}@media(hover:hover)and (pointer:fine){.map-node:hover .mn-face{transform:scale(1.12)}.map-node.locked:hover .mn-face{transform:none}}@media(max-width:819px),(orientation:portrait){.map-node{width:72px;height:72px}.map-node .mn-face{font-size:27px}.map-worldpick{font-size:18px}}@media(prefers-reduced-motion:reduce){.mb-drift,.mb-sway,.mb-bob,.mb-float,.mb-glow,.mb-spin-slow,.mb-smoke,.mb-aurora,.map-frog.mb-bob,.map-node.current .mn-face,.map-node.current:after{animation:none}}.hud-top{position:relative;width:100%;display:flex;align-items:stretch;gap:8px;padding:12px 12px 4px;z-index:10}.hud-pill{flex:1;background:linear-gradient(180deg,#fffdf4f5,#fdf0cff5);border:3px solid #f7c66b;border-radius:20px;box-shadow:inset 0 2px #fff,0 5px #96692859,0 10px 16px #0a283c40;padding:5px 10px 7px;text-align:center;min-width:0}.hud-label{font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--c-cocoa-soft);text-transform:uppercase}.hud-value{font-family:var(--font-display);font-size:26px;color:var(--c-cocoa);line-height:1}.hud-value.warn{color:#e23c3c;animation:warnBlink .8s ease-in-out infinite}@keyframes warnBlink{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.objective-row{display:flex;justify-content:center;gap:10px;align-items:center;min-height:40px}.objective-chip{display:flex;align-items:center;gap:3px;font-family:var(--font-display);font-size:17px;color:var(--c-cocoa)}.objective-chip img,.objective-chip canvas{width:30px;height:30px}.objective-chip.done{color:#2c9a3e}.objective-chip .obj-check{font-size:18px}.score-bar-wrap{position:relative;width:100%;height:18px;border-radius:999px;background:#5c3a1e40;box-shadow:inset 0 2px 4px #00000040;overflow:visible;margin-top:4px}.score-bar{height:100%;width:0%;border-radius:999px;background:linear-gradient(180deg,#ffe14d,#ffab1f);box-shadow:inset 0 2px #ffffff80;transition:width .5s cubic-bezier(.22,1.4,.36,1)}.score-star{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:20px;filter:grayscale(1) opacity(.55) drop-shadow(0 1px 1px rgba(0,0,0,.4));transition:transform .3s cubic-bezier(.34,2.2,.6,1),filter .3s}.score-star.earned{filter:grayscale(0) drop-shadow(0 0 6px rgba(255,220,90,.9));transform:translate(-50%,-50%) scale(1.35)}.board-wrap{position:relative;flex:1;width:100%;display:flex;align-items:center;justify-content:center;min-height:0;padding:4px 8px}.board-frame{position:relative;border-radius:24px;padding:8px;background:linear-gradient(180deg,#72bf54,#4a8f3c,#3a7528);box-shadow:inset 0 4px #ffffff4d,inset 0 -6px #0003,var(--board-shadow)}.board-frame:before{content:"";position:absolute;top:2px;right:2px;bottom:2px;left:2px;border-radius:20px;border:2px solid rgba(255,255,255,.12);pointer-events:none}.board-frame[data-size="9"],.board-frame[data-size="10"]{--board-shadow: 0 10px 0 #2e6b28, 0 24px 40px rgba(5, 40, 55, .45)}.board-frame canvas{display:block;border-radius:16px;touch-action:none;width:min(92vw,62vh,540px)!important;height:min(92vw,62vh,540px)!important}.combo-banner{position:absolute;top:16%;left:50%;transform:translate(-50%,-50%) scale(0);font-family:var(--font-display);font-size:44px;color:#fff;-webkit-text-stroke:2.5px #b02561;paint-order:stroke fill;text-shadow:0 4px 0 rgba(0,0,0,.2);pointer-events:none;z-index:30;white-space:nowrap}.combo-banner.show{animation:comboPop .9s cubic-bezier(.34,1.9,.5,1) forwards}@keyframes comboPop{0%{transform:translate(-50%,-50%) scale(0) rotate(-12deg);opacity:1}35%{transform:translate(-50%,-50%) scale(1.15) rotate(3deg);opacity:1}55%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}to{transform:translate(-50%,-56%) scale(1.05);opacity:0}}.hud-bottom{position:relative;width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:8px 12px 14px;z-index:10}.frog-perch{position:relative;width:118px;height:110px}.frog-perch svg{position:absolute;bottom:0;left:0;width:118px}.frog-perch .frog-body-anim{animation:frogIdle 2.8s ease-in-out infinite;transform-origin:50% 90%}@keyframes frogIdle{0%,to{transform:scaleY(1)}50%{transform:scaleY(.96) translateY(2px)}}.frog-perch.cheer .frog-body-anim{animation:frogCheer .55s cubic-bezier(.34,1.8,.5,1) 2}@keyframes frogCheer{0%,to{transform:translateY(0) scaleY(1)}30%{transform:translateY(-26px) scaleY(1.06)}60%{transform:translateY(0) scaleY(.9)}}.speech-bubble{position:absolute;bottom:100px;left:40px;background:#fff;color:var(--c-cocoa);font-weight:800;font-size:15px;padding:7px 14px;border-radius:16px 16px 16px 4px;box-shadow:0 4px 10px #0003;opacity:0;transform:scale(.5);transform-origin:bottom left;transition:all .25s cubic-bezier(.34,1.8,.5,1);pointer-events:none;white-space:nowrap;z-index:20}.speech-bubble.show{opacity:1;transform:scale(1)}.frog-power{position:relative;width:78px;height:78px;border-radius:50%;border:none;cursor:pointer;background:conic-gradient(#3fae4c var(--fill, 0%),rgba(0,0,0,.28) 0);box-shadow:0 6px #00000040,0 12px 20px #05283759;transition:transform .1s;padding:5px}.frog-power .fp-inner{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffdf4,#fdeec4);display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:inset 0 -4px #c4954a4d}.frog-power .fp-label{position:absolute;bottom:-8px;left:50%;transform:translate(-50%);font-family:var(--font-display);font-size:11px;letter-spacing:1px;color:#fff;background:#3fae4c;border-radius:999px;padding:2px 10px;box-shadow:0 3px #1d6b2e;white-space:nowrap}.frog-power.locked{filter:grayscale(.9);cursor:default;opacity:.6}.frog-power.locked .fp-inner{background:radial-gradient(circle at 35% 30%,#e8e0d0,#d0c8b8)}.frog-power.locked:active{transform:none}.frog-power.ready{animation:fpReady 1s ease-in-out infinite;cursor:pointer}.frog-power.ready .fp-inner{background:radial-gradient(circle at 35% 30%,#fff9d4,#ffe07a)}@keyframes fpReady{0%,to{transform:scale(1);box-shadow:0 6px #00000040,0 0 18px 4px #78e678b3,0 12px 20px #05283759}50%{transform:scale(1.08);box-shadow:0 6px #00000040,0 0 30px 10px #78e678e6,0 12px 20px #05283759}}.frog-power:active{transform:scale(.94)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#08283899;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;transition:opacity .25s ease}.overlay.show{opacity:1}.overlay-card{width:330px;padding:26px 24px 30px;display:flex;flex-direction:column;align-items:center;gap:14px;transform:scale(.6) translateY(40px);transition:transform .38s cubic-bezier(.34,1.7,.5,1)}.overlay.show .overlay-card{transform:scale(1) translateY(0)}.stars-row{display:flex;gap:6px;height:74px;align-items:center}.big-star{font-size:58px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));transform:scale(0)}.big-star.mid{font-size:74px}.big-star.dim{filter:grayscale(1) opacity(.4);transform:scale(1)}.big-star.slam{animation:starSlam .5s cubic-bezier(.34,1.9,.5,1) forwards}@keyframes starSlam{0%{transform:scale(3) rotate(-30deg);opacity:0}60%{transform:scale(.9) rotate(5deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.result-title{font-family:var(--font-display);font-size:44px;letter-spacing:1px;background:linear-gradient(180deg,#ffe14d 20%,#ff8d00);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2.5px #7c4a12;paint-order:stroke fill;filter:drop-shadow(0 3px 0 rgba(0,0,0,.15))}.result-sub{font-weight:700;color:var(--c-cocoa-soft);font-size:17px;text-align:center}.result-score{font-family:var(--font-display);font-size:30px;color:var(--c-cocoa)}.frog-chorus{display:flex;align-items:flex-end;justify-content:center;gap:-10px;height:90px}.frog-chorus svg{width:84px}.frog-chorus .fc-a{animation:chorusHop .7s ease-in-out infinite}.frog-chorus .fc-b{animation:chorusHop .7s ease-in-out .18s infinite}.frog-chorus .fc-c{animation:chorusHop .7s ease-in-out .36s infinite}@keyframes chorusHop{0%,to{transform:translateY(0) scaleY(1)}35%{transform:translateY(-18px) scaleY(1.05)}70%{transform:translateY(0) scaleY(.92)}}.settings-row{display:flex;gap:12px;align-items:center}.fx-canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:150}.row{display:flex;align-items:center;gap:10px}.hidden{display:none!important}.power-buttons{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex:1;min-width:0}.frog-power#powerBtn{width:72px;height:72px}.frog-power#powerBtn .fp-inner{font-size:32px}.power-buttons .frog-power:not(#powerBtn){width:56px;height:56px}.power-buttons .frog-power:not(#powerBtn) .fp-inner{font-size:18px}.power-buttons .frog-power .fp-label{font-size:8px;padding:1px 6px;bottom:-6px;white-space:nowrap}@media(max-width:520px){.frog-power#powerBtn{width:56px;height:56px}.frog-power#powerBtn .fp-inner{font-size:24px}.power-buttons .frog-power:not(#powerBtn){width:44px;height:44px}.power-buttons .frog-power:not(#powerBtn) .fp-inner{font-size:14px}.power-buttons .frog-power .fp-label{font-size:6px;padding:1px 4px;bottom:-5px}.frog-perch{width:70px!important;height:70px!important}.frog-perch svg{width:70px!important}}@media(max-width:400px){.power-buttons .frog-power:not(#powerBtn){width:38px;height:38px}.power-buttons .frog-power:not(#powerBtn) .fp-inner{font-size:12px}.frog-power#powerBtn{width:48px;height:48px}.frog-power#powerBtn .fp-inner{font-size:20px}}