:root {
  color-scheme: light;
  font-family: "Arial Rounded MT Bold", "Avenir Next", system-ui, sans-serif;
  font-synthesis: none;
  --sky: #39bdf0;
  --grass: #8fda24;
  --grass-dark: #63bd23;
  --ink: #4c2c22;
  --yellow: #ffd62f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-width: 900px; min-height: 620px; overflow: hidden; }
body { margin: 0; background: var(--sky); }
button { font: inherit; }
button:not(:disabled) { cursor: pointer; }
:focus-visible { outline: 6px solid #fff; outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.game { position: relative; width: 100%; height: 100%; min-height: 620px; overflow: hidden; isolation: isolate; background: linear-gradient(var(--sky) 0 57%, #a8e83c 57% 100%); }
.sky, .hills { position: absolute; inset: 0; pointer-events: none; }
.hills { top: 49%; background: radial-gradient(ellipse at 12% 30%, #79ca2b 0 23%, transparent 23.5%), radial-gradient(ellipse at 70% 28%, #73cc28 0 31%, transparent 31.5%), linear-gradient(transparent 35%, var(--grass) 35%); }
.hills::after { position: absolute; inset: 47% 0 0; content: ""; opacity: .18; background-image: radial-gradient(ellipse, #2e9e34 0 22%, transparent 25%); background-size: 64px 31px; }
.cloud { position: absolute; width: 135px; height: 43px; border-radius: 50px; background: #fff; box-shadow: 0 9px 0 #dff7ff; opacity: .96; }
.cloud::before, .cloud::after { position: absolute; content: ""; bottom: 0; border-radius: 50%; background: #fff; }
.cloud::before { left: 23px; width: 61px; height: 61px; }.cloud::after { right: 16px; width: 48px; height: 52px; }
.cloud-one { left: 26%; top: 8%; }.cloud-two { right: 29%; top: 12%; scale: .72; }
.sun { position: absolute; left: 5%; top: 7%; width: 126px; height: 126px; border: 6px solid #f5b928; border-radius: 50%; background: var(--yellow); box-shadow: 0 5px 0 rgba(226,151,24,.25), 0 0 0 18px rgba(255,222,49,.16); }
.sun::before { position: absolute; inset: -46px; content: ""; z-index: -1; background: repeating-conic-gradient(#ffe354 0 6deg, transparent 6deg 20deg); clip-path: polygon(46% 0,54% 0,55% 36%,100% 46%,100% 54%,55% 55%,54% 100%,46% 100%,45% 55%,0 54%,0 46%,45% 45%); }
.sun i, .sun b { position: absolute; top: 44px; width: 12px; height: 18px; border-radius: 50%; background: #443026; }.sun i { left: 30px; }.sun b { right: 30px; }
.sun span { position: absolute; left: 44px; top: 68px; width: 30px; height: 16px; border-bottom: 7px solid #443026; border-radius: 0 0 30px 30px; }
.tree { position: absolute; right: 5%; top: 10%; width: 190px; height: 300px; }
.tree::before, .tree::after, .tree i { position: absolute; content: ""; z-index: 2; border-radius: 50%; background: #5dc51d; box-shadow: inset -12px -12px 0 rgba(55,158,28,.15); }
.tree::before { left: 0; top: 20px; width: 120px; height: 120px; }.tree::after { right: 0; top: 0; width: 135px; height: 140px; }.tree i { left: 52px; top: 64px; width: 125px; height: 110px; }
.tree b { position: absolute; left: 83px; top: 110px; width: 47px; height: 190px; border-radius: 20px 20px 8px 8px; background: #9a591f; box-shadow: inset -13px 0 #7b4118; }

.mute { position: absolute; z-index: 50; top: 24px; right: 25px; width: 58px; height: 58px; display: grid; place-items: center; padding: 0; border: 5px solid #fff; border-radius: 50%; color: #fff; background: #168dcc; box-shadow: 0 6px 0 #0871aa, 0 9px 20px rgba(28,97,124,.2); }
.mute svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sound-off { display: none; }.mute[aria-pressed="true"] .sound-on { display: none; }.mute[aria-pressed="true"] .sound-off { display: block; }

.playfield { position: absolute; z-index: 10; inset: 15% 8% 17%; }
.visual-prompt { position: absolute; z-index: 18; left: 50%; top: -5%; display: flex; align-items: center; gap: 10px; min-width: 128px; justify-content: center; padding: 7px 20px 9px; border: 5px solid #fff; border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.94); box-shadow: 0 7px 0 rgba(37,137,166,.18); font-size: 27px; transform: translateX(-50%); }
.prompt-hand { transform: rotate(-15deg); }.prompt-dots { color: #42a734; letter-spacing: 5px; }
.critter-stage { position: absolute; inset: 50px 0 0; display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 2.4vw, 42px); }
.critter { position: relative; width: clamp(142px, 13vw, 196px); height: clamp(176px, 38vh, 330px); display: grid; align-items: end; padding: 0; border: 0; background: transparent; transform-origin: 50% 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.critter svg { width: 100%; max-height: 100%; overflow: visible; filter: drop-shadow(0 13px 2px rgba(47,110,22,.18)); transition: filter .18s ease, opacity .18s ease; }
.critter:hover svg, .critter:focus-visible svg { filter: drop-shadow(0 13px 2px rgba(47,110,22,.18)) drop-shadow(0 0 13px rgba(255,255,255,.8)); }
.critter.is-counted { animation: critter-bounce .48s cubic-bezier(.2,.9,.25,1.25); }
.critter.is-counted svg { filter: drop-shadow(0 13px 2px rgba(47,110,22,.18)) drop-shadow(0 0 16px #fff) drop-shadow(0 0 23px #ffea55); }
.critter.is-nudged { animation: gentle-nudge .42s ease-out; }
.critter.demo-glow svg { filter: drop-shadow(0 13px 2px rgba(47,110,22,.18)) drop-shadow(0 0 20px #fff36b); transform: translateY(-14px) scale(1.06); }
.count-bubble { position: absolute; z-index: 5; left: 50%; top: 5%; width: 72px; height: 72px; display: grid; place-items: center; border: 6px solid #fff; border-radius: 50%; color: #fff; background: #ff7c24; box-shadow: 0 7px 0 #cb4d16, 0 10px 22px rgba(92,60,17,.2); font-size: 43px; line-height: 1; transform: translate(-50%,-45%) scale(0); }
.is-counted .count-bubble { animation: bubble-pop .43s cubic-bezier(.18,.9,.25,1.35) forwards; }
.pointing-hand { position: absolute; z-index: 30; left: 50%; top: 50%; color: #fff; font-family: system-ui, sans-serif; font-size: 67px; line-height: 1; filter: drop-shadow(0 5px 0 rgba(75,59,35,.35)); transform: translate(-50%, -50%) rotate(-28deg); pointer-events: none; animation: hand-tap 1.05s ease-in-out infinite; transition: left .25s ease, top .25s ease, opacity .2s ease; }
.pointing-hand.is-hidden { opacity: 0; }
.pointing-hand.is-tool { color: #fff36b; scale: 1.15; }

.answer-dock { position: absolute; z-index: 25; left: 0; right: 0; bottom: 18px; height: 155px; display: grid; place-items: center; background: linear-gradient(transparent, rgba(76,174,22,.24)); }
.number-buttons { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.5vw, 39px); }
.number-button { width: 122px; height: 122px; padding: 0 0 6px; border: 8px solid #fff; border-radius: 50%; color: #fff; background: var(--button-color); box-shadow: 0 10px 0 var(--button-shadow), 0 16px 26px rgba(53,102,21,.25), inset 0 5px 0 rgba(255,255,255,.17); font-size: 76px; font-weight: 950; line-height: 1; text-shadow: 0 4px 0 rgba(100,56,20,.16); transition: transform .12s ease, box-shadow .12s ease; }
.number-button:hover { transform: translateY(-5px); box-shadow: 0 15px 0 var(--button-shadow), 0 20px 28px rgba(53,102,21,.26), inset 0 5px 0 rgba(255,255,255,.17); }
.number-button:active { transform: translateY(7px); box-shadow: 0 3px 0 var(--button-shadow), 0 7px 15px rgba(53,102,21,.2); }
.number-button.is-nudged { animation: gentle-nudge .42s ease-out; }

.celebration { position: absolute; z-index: 80; inset: 0; display: grid; place-content: center; justify-items: center; background: rgba(58,185,225,.22); backdrop-filter: blur(5px); }
.celebration::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at center, rgba(255,255,255,.98) 0 14%, rgba(255,244,142,.88) 28%, rgba(40,182,222,.18) 60%, transparent 75%); }
.celebration-rays { position: absolute; left: 50%; top: 48%; width: 660px; height: 660px; background: repeating-conic-gradient(rgba(255,223,49,.35) 0 8deg, transparent 8deg 19deg); border-radius: 50%; transform: translate(-50%,-50%); animation: ray-turn 14s linear infinite; }
.happy-sun { position: relative; width: 75px; height: 75px; display: grid; place-items: center; border: 6px solid #fff; border-radius: 50%; color: #fff; background: #ffae20; box-shadow: 0 7px 0 #da7419; font-size: 42px; animation: happy-pop .5s both; }
.total-number { position: relative; margin-top: 8px; color: #fff; font-size: clamp(150px, 23vh, 210px); font-weight: 950; line-height: .94; text-shadow: 0 10px 0 #ef8a1f, 0 18px 35px rgba(73,96,25,.2); }
.total-dots { position: relative; display: flex; gap: 14px; min-height: 25px; margin: 3px 0 20px; }.total-dots i { width: 24px; height: 24px; border: 4px solid #fff; border-radius: 50%; background: #77c82b; box-shadow: 0 4px 0 #4b9b1d; }
.next-button { position: relative; width: 96px; height: 76px; display: grid; place-items: center; padding: 0; border: 7px solid #fff; border-radius: 28px; color: #fff; background: #39b84a; box-shadow: 0 9px 0 #207f30, 0 15px 25px rgba(39,100,28,.24); animation: next-pulse 1.3s ease-in-out infinite; }
.next-button svg { width: 55px; height: 55px; fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.sparkles { position: absolute; z-index: 75; inset: 0; overflow: hidden; pointer-events: none; }.sparkles i { position: absolute; width: 18px; height: 18px; background: var(--spark-color); clip-path: polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%); animation: sparkle-fall 1.4s ease-out forwards; }

@keyframes critter-bounce { 0%,100% { transform: scale(1); } 42% { transform: translateY(-24px) scale(1.08,.94); } 70% { transform: translateY(3px) scale(.97,1.03); } }
@keyframes bubble-pop { from { opacity: 0; transform: translate(-50%,-45%) scale(.25) rotate(-18deg); } to { opacity: 1; transform: translate(-50%,-45%) scale(1) rotate(0); } }
@keyframes gentle-nudge { 0%,100% { transform: translateX(0) scale(1); } 30% { transform: translateX(-8px) scale(1.04); } 65% { transform: translateX(8px) scale(1.04); } }
@keyframes hand-tap { 0%,100% { translate: 26px 33px; } 48% { translate: 0 0; scale: .9; } 65% { translate: 0 0; scale: .9; } }
@keyframes happy-pop { from { opacity: 0; scale: .35; rotate: -20deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes next-pulse { 50% { box-shadow: 0 9px 0 #207f30, 0 15px 38px rgba(255,255,255,.9), 0 0 0 10px rgba(255,255,255,.22); } }
@keyframes ray-turn { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes sparkle-fall { 0% { opacity: 0; transform: translateY(-20px) scale(.3) rotate(0); } 12% { opacity: 1; } 100% { opacity: .2; transform: translate(var(--drift), 105vh) scale(1) rotate(500deg); } }

@media (max-height: 730px) {
  .playfield { inset-top: 10%; bottom: 16%; }.critter-stage { top: 35px; }.visual-prompt { top: -8%; scale: .82; }.critter { height: 270px; }.number-button { width: 102px; height: 102px; font-size: 62px; }.answer-dock { height: 130px; }.sun { scale: .8; }.tree { scale: .85; transform-origin: top right; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}