.frog-shell{display:flex;min-height:100svh;align-items:center;justify-content:center;padding:72px 12px 24px;color:#204f55;background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.7) 0 3px,transparent 4px),radial-gradient(circle at 88% 30%,rgba(255,244,152,.58) 0 4px,transparent 5px),linear-gradient(180deg,#c3f2ff,#ddf4d5 55%,#c8eab9);background-size:66px 66px,94px 94px,auto;font-family:var(--font-nunito),ui-rounded,"Arial Rounded MT Bold",sans-serif}.frog-shell,.frog-window{position:relative;overflow:hidden;isolation:isolate}.frog-window{width:min(1180px,100%);height:clamp(610px,calc(100svh - 150px),770px);border:6px solid rgba(255,255,255,.97);border-radius:38px;background:#61cbd0;box-shadow:0 11px 0 #3f9d86,0 25px 48px rgba(39,92,92,.3)}.frog-background{z-index:-4;object-fit:cover;object-position:center;image-rendering:auto;transform:translateZ(0) scale(1.008)}.frog-lighting{position:absolute;z-index:-3;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 57%,rgba(255,255,255,.12) 0 26%,transparent 60%),linear-gradient(180deg,rgba(32,121,139,.03),transparent 45%,rgba(25,100,106,.11))}.frog-game{position:relative;z-index:5;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;min-height:0;padding:14px 18px 12px}.frog-hud{display:grid;grid-template-columns:minmax(0,1fr) auto 58px;align-items:center;gap:clamp(12px,2vw,24px);min-height:76px;padding:10px 14px 10px 18px;border-radius:28px;color:#fff;background:linear-gradient(100deg,rgba(24,102,94,.88),rgba(48,137,121,.73));box-shadow:0 14px 32px rgba(30,90,85,.23),inset 0 1px rgba(255,255,255,.5);backdrop-filter:blur(12px) saturate(1.14)}.frog-title{display:flex;min-width:0;align-items:center;gap:12px}.frog-title>span{display:grid;width:48px;height:48px;flex:0 0 auto;place-items:center;border-radius:18px;background:linear-gradient(145deg,#c8f789,#70c75b);box-shadow:inset 0 3px 4px rgba(255,255,255,.65),0 6px 12px rgba(20,70,62,.28);font-size:27px}.frog-title h1,.frog-title p{margin:0}.frog-title p{color:#cffff3;font-size:12px;font-weight:1000;letter-spacing:.14em;text-transform:uppercase}.frog-title h1{overflow:hidden;margin-top:1px;font-size:clamp(17px,2vw,24px);font-weight:1000;line-height:1.1;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 4px rgba(15,68,63,.5)}.frog-progress{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.38)}.frog-progress span{font-size:clamp(18px,2vw,23px);line-height:1;filter:drop-shadow(0 3px 2px rgba(22,65,61,.35))}.frog-progress span.is-filled{color:#ffe05f;text-shadow:0 0 14px rgba(255,228,104,.9);animation:frog-progress-pop .4s ease-out}.frog-progress strong{min-width:46px;margin-left:4px;color:#fff;font-size:14px;font-weight:1000}.frog-sound{display:grid;width:54px;height:54px;cursor:pointer;place-items:center;border:0;border-radius:19px;color:#256252;background:linear-gradient(145deg,#ecfff2,#8be0bd);box-shadow:inset 0 3px 3px rgba(255,255,255,.85),0 6px 0 #39956f,0 10px 18px rgba(26,73,67,.24);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;touch-action:manipulation}.frog-sound:hover{filter:brightness(1.07);transform:translateY(-2px)}.frog-sound:active{transform:translateY(4px);box-shadow:inset 0 3px 3px rgba(255,255,255,.75),0 2px 0 #39956f}.frog-sound svg{width:27px;height:27px;stroke-width:3}.frog-stage{position:relative;display:grid;grid-template-rows:58px minmax(280px,1fr) 160px;min-height:0;justify-items:center}.frog-prompt{z-index:8;align-self:center;margin:0;color:#174e57;font-size:clamp(18px,2.2vw,25px);font-weight:1000;text-shadow:0 2px 0 #fff,0 4px 10px rgba(255,255,255,.9)}.frog-prompt strong{color:#e86651;font-size:1.35em}.frog-route{--frog-height:180px;position:relative;width:100%;height:100%;min-height:0}.frog-water-glow{position:absolute;inset:12% 4% 5%;border-radius:50%;background:radial-gradient(ellipse,rgba(215,255,253,.2),transparent 68%);filter:blur(7px);animation:frog-water-breathe 4s ease-in-out infinite alternate}.frog-stones{position:absolute;z-index:4;inset:0}.frog-stone{position:absolute;display:grid;width:clamp(92px,13vw,155px);aspect-ratio:1.38;isolation:isolate;place-items:center;border-radius:50% 54% 48% 52%/58% 48% 55% 45%;background:linear-gradient(145deg,#a7b4a9,#6f897b);box-shadow:inset 8px 8px 11px rgba(255,255,255,.46),inset -10px -12px 13px rgba(42,73,66,.28),0 12px 16px rgba(24,91,91,.35);transform:rotate(-2deg)}.frog-stone:first-child{top:42%;left:10%}.frog-stone:nth-child(2){top:57%;left:32%;transform:rotate(3deg)}.frog-stone:nth-child(3){top:40%;left:55%}.frog-stone:nth-child(4){top:55%;left:78%;transform:rotate(3deg)}.frog-stone:before{z-index:-1;right:4%;bottom:-16%;left:4%;height:29%;border:4px solid rgba(216,255,255,.62);border-top-color:transparent;filter:drop-shadow(0 3px 2px rgba(24,112,117,.2))}.frog-stone:after,.frog-stone:before{content:"";position:absolute;border-radius:50%}.frog-stone:after{top:13%;left:15%;width:34%;height:14%;background:rgba(255,255,255,.23);transform:rotate(-8deg)}.frog-stone span{position:relative;z-index:2;color:#fff9da;font-size:clamp(34px,5vw,56px);font-weight:1000;line-height:1;text-shadow:0 4px 0 #49675a,0 7px 9px rgba(33,72,66,.28)}.frog-stone.is-missing{outline:5px dashed rgba(255,236,107,.92);outline-offset:6px;background:linear-gradient(145deg,rgba(240,255,244,.92),rgba(170,224,194,.86));animation:frog-slot 1s ease-in-out infinite alternate}.frog-stone.is-missing span{color:#2d806d;text-shadow:0 3px 0 #fff}.frog-stone.is-filled{outline-color:#fff2a5;animation:frog-stone-pop .55s cubic-bezier(.2,1.5,.4,1)}.frog-character{position:absolute;display:block;width:195px;height:var(--frog-height);pointer-events:none;transform-origin:50% 88%}.frog-character img{object-fit:contain;filter:drop-shadow(0 10px 7px rgba(20,76,67,.32))}.frog-at-start{z-index:7;bottom:-1%;left:-4%;animation:frog-idle 3.3s ease-in-out infinite}.frog-at-start.is-crossing{opacity:0}.frog-crossing{z-index:9;top:calc(70% - var(--frog-height));left:-4%;animation:frog-cross-pond 2.8s cubic-bezier(.38,.02,.62,1) both}.frog-crossing img{animation:frog-squash .38s ease-in-out infinite alternate}.frog-finish{position:absolute;z-index:6;right:.5%;bottom:7%;font-size:48px;filter:drop-shadow(0 6px 4px rgba(33,79,65,.3))}.frog-splashes{position:absolute;z-index:8;inset:0;pointer-events:none}.frog-splashes i{position:absolute;width:36px;height:15px;border:5px solid rgba(225,255,255,.9);border-top:0;border-radius:0 0 50% 50%;opacity:0;animation:frog-splash .48s ease-out .45s both}.frog-splashes i:first-child{top:55%;left:16%}.frog-splashes i:nth-child(2){top:71%;left:38%;animation-delay:1.03s}.frog-splashes i:nth-child(3){top:53%;left:61%;animation-delay:1.58s}.frog-splashes i:nth-child(4){top:69%;left:84%;animation-delay:2.12s}.frog-choice-area{z-index:10;align-self:end;width:min(600px,68%);text-align:center}.frog-choice-area>p{margin:0 0 6px;color:#184d55;font-size:17px;font-weight:1000;text-shadow:0 2px 0 #fff,0 4px 8px rgba(255,255,255,.9)}.frog-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,34px)}.frog-choices button{position:relative;display:grid;min-height:92px;cursor:pointer;place-items:center;border:0;border-radius:50% 53% 46% 55%/58% 47% 57% 44%;color:#fff;background:linear-gradient(145deg,#80dc78,#3ba95e);box-shadow:inset 7px 7px 9px rgba(255,255,255,.58),inset -8px -9px 10px rgba(29,91,52,.25),0 8px 0 #277d4d,0 13px 18px rgba(29,70,67,.25);transition:transform .15s ease,filter .15s ease;touch-action:manipulation}.frog-choices button:before{content:"";position:absolute;top:10%;right:5%;width:40%;height:42%;background:#77cee0;clip-path:polygon(100% 0,0 0,100% 100%)}.frog-choices button:after{content:"";position:absolute;top:12%;left:14%;width:31%;height:12%;border-radius:50%;background:rgba(255,255,255,.35);transform:rotate(-8deg)}.frog-choices button strong{position:relative;z-index:2;font-size:clamp(38px,4.3vw,55px);font-weight:1000;line-height:1;text-shadow:0 4px 0 #287445,0 7px 8px rgba(27,83,54,.25)}.frog-choices button:hover:not(:disabled){transform:translateY(-5px) rotate(-2deg);filter:brightness(1.06)}.frog-choices button:active:not(:disabled){transform:translateY(4px)}.frog-choices button:disabled{cursor:default;opacity:.72}.frog-choices button.is-wrong{animation:frog-shake .45s ease-in-out}.frog-status{min-height:27px;padding-top:5px;color:#174c54;font-size:14px;font-weight:1000;text-shadow:0 2px 0 #fff,0 3px 7px rgba(255,255,255,.96)}.frog-celebration button:focus-visible,.frog-choices button:focus-visible,.frog-sound:focus-visible{outline:5px solid #fff36e;outline-offset:4px}.frog-celebration{position:fixed;z-index:60;inset:0;display:grid;place-items:center;padding:20px;background:rgba(26,78,72,.62);backdrop-filter:blur(8px)}.frog-celebration>div{position:relative;width:min(470px,100%);padding:135px 30px 32px;border:6px solid #fff;border-radius:42px;color:#285e5a;text-align:center;background:linear-gradient(155deg,#fffdeb,#e5fff0);box-shadow:0 12px 0 #45a274,0 28px 60px rgba(28,70,64,.42);animation:frog-win .55s cubic-bezier(.2,1.5,.4,1)}.frog-win-character{top:4px;left:50%;width:150px;height:140px;translate:-50%}.frog-celebration p{margin:4px 0;color:#5d7d70;font-weight:900}.frog-celebration h2{margin:3px 0 24px;color:#3a9a69;font-size:clamp(39px,8vw,56px);line-height:1;letter-spacing:-.05em}.frog-celebration button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:64px;cursor:pointer;border:0;border-radius:22px;color:#fff;background:#ee755e;box-shadow:inset 0 3px rgba(255,255,255,.35),0 7px #ae4e3d;font-size:22px;font-weight:1000}@keyframes frog-progress-pop{50%{transform:scale(1.3)}}@keyframes frog-water-breathe{to{opacity:.55;transform:scale(1.02)}}@keyframes frog-slot{to{transform:rotate(-2deg) translateY(-5px) scale(1.025)}}@keyframes frog-stone-pop{0%{opacity:.4;transform:scale(.45) rotate(-10deg)}}@keyframes frog-idle{50%{transform:translateY(-5px) scale(1.02,.98)}}@keyframes frog-squash{0%{transform:scale(1.05,.94)}to{transform:scale(.96,1.04)}}@keyframes frog-shake{20%,60%{transform:translateX(-10px) rotate(-3deg)}40%,80%{transform:translateX(10px) rotate(3deg)}}@keyframes frog-splash{0%{opacity:0;transform:scale(.2)}40%{opacity:1}to{opacity:0;transform:scale(1.55) translateY(-15px)}}@keyframes frog-win{0%{opacity:0;transform:translateY(35px) scale(.62)}}@keyframes frog-cross-pond{0%{top:calc(70% - var(--frog-height));left:-4%;rotate:-7deg}9%{top:calc(8% - var(--frog-height));left:4%;rotate:5deg}18%{top:calc(42% - var(--frog-height));left:8%;rotate:-4deg}27%{top:calc(5% - var(--frog-height));left:21%;rotate:5deg}36%{top:calc(57% - var(--frog-height));left:30%;rotate:-4deg}45%{top:calc(4% - var(--frog-height));left:43%;rotate:5deg}54%{top:calc(40% - var(--frog-height));left:53%;rotate:-4deg}63%{top:calc(5% - var(--frog-height));left:67%;rotate:5deg}72%{top:calc(55% - var(--frog-height));left:76%;rotate:-4deg}83%{top:calc(8% - var(--frog-height));left:88%;rotate:5deg}to{top:calc(70% - var(--frog-height));left:91%;rotate:-5deg}}@media(max-width:760px){.frog-shell{padding:66px 7px 12px}.frog-window{height:calc(100svh - 82px);min-height:565px;border-width:4px;border-radius:29px}.frog-game{padding:10px 9px 8px}.frog-hud{grid-template-columns:minmax(0,1fr) auto 52px;gap:7px;min-height:68px;padding:8px 9px 8px 11px;border-radius:23px}.frog-title{gap:8px}.frog-title>span{width:42px;height:42px;border-radius:15px;font-size:23px}.frog-title p{font-size:9px;letter-spacing:.08em}.frog-title h1{font-size:15px}.frog-progress{gap:3px}.frog-progress span{font-size:15px}.frog-progress strong{min-width:38px;margin-left:2px;font-size:11px}.frog-sound{width:46px;height:46px;border-radius:16px}.frog-sound svg{width:24px;height:24px}.frog-stage{grid-template-rows:52px minmax(270px,1fr) 150px}.frog-prompt{font-size:17px}.frog-route{--frog-height:131px}.frog-stone{width:clamp(72px,20vw,104px)}.frog-stone span{font-size:clamp(28px,8vw,42px)}.frog-character{width:138px;height:var(--frog-height)}.frog-at-start{left:-6%}.frog-finish{right:-1%;font-size:39px}.frog-choice-area{width:78%}.frog-choice-area>p{font-size:14px}.frog-choices{gap:10px}.frog-choices button{min-height:80px}.frog-choices button strong{font-size:36px}.frog-status{font-size:12px}.frog-splashes i{width:27px;height:12px;border-width:4px}}@media(max-width:470px){.frog-title h1{display:none}.frog-progress span{font-size:13px}.frog-progress strong{display:none}.frog-prompt{font-size:15px}.frog-route{--frog-height:108px}.frog-stone{width:clamp(66px,19vw,86px);outline-width:3px!important;outline-offset:3px!important}.frog-character{width:114px;height:var(--frog-height)}.frog-at-start{left:-8%}.frog-finish{display:none}.frog-choice-area{width:92%}.frog-choices{gap:8px}.frog-choices button{min-height:72px}.frog-choices button strong{font-size:31px}}@media(max-height:700px){.frog-shell{padding-top:62px;padding-bottom:8px}.frog-window{height:calc(100svh - 72px);min-height:0}.frog-hud{min-height:64px;padding-top:6px;padding-bottom:6px}.frog-stage{grid-template-rows:46px minmax(230px,1fr) 132px}.frog-prompt{font-size:17px}.frog-route{--frog-height:126px}.frog-choices button{min-height:70px}.frog-choice-area>p{margin-bottom:3px}.frog-status{min-height:22px;padding-top:3px}.frog-character{width:135px;height:var(--frog-height)}}@media(prefers-reduced-motion:reduce){.frog-at-start,.frog-celebration>div,.frog-choices button.is-wrong,.frog-crossing,.frog-crossing img,.frog-progress span.is-filled,.frog-splashes i,.frog-stone.is-filled,.frog-stone.is-missing,.frog-water-glow{animation-duration:.01ms!important;animation-delay:0s!important}}