:root {
  color-scheme: light;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --ink: #17375e;
  --blue: #159ff0;
  --blue-dark: #0878d4;
  --yellow: #ffd83d;
  --yellow-dark: #f5a900;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body { background: #50cef1; user-select: none; -webkit-user-select: none; }

button { font: inherit; -webkit-tap-highlight-color: transparent; }

button:focus-visible { outline: 7px solid #fff; outline-offset: 5px; }

.game {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1050px;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(#42c8ef 0 57%, #91d943 57% 100%);
}

.sky { position: absolute; inset: 0; overflow: hidden; z-index: -2; }

.cloud { position: absolute; width: 190px; height: 66px; border-radius: 50px; background: #fff; opacity: .96; filter: drop-shadow(0 6px 0 rgba(44, 157, 189, .12)); }
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 94px; height: 94px; left: 28px; bottom: 12px; }
.cloud::after { width: 73px; height: 73px; right: 24px; bottom: 13px; }
.cloud-one { left: 7%; top: 9%; transform: scale(1.08); }
.cloud-two { right: 8%; top: 11%; transform: scale(.8); }

.hill { position: absolute; top: 48%; width: 42%; height: 28%; border-radius: 50% 50% 0 0; background: #59bd45; }
.hill-one { left: -7%; }
.hill-two { left: 27%; top: 51%; background: #68c94b; }
.hill-three { right: -9%; top: 47%; }

.mute {
  position: absolute;
  z-index: 30;
  top: 26px;
  right: 30px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 4px solid rgba(255,255,255,.8);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,255,255,.9);
  box-shadow: 0 7px 0 rgba(23,55,94,.14);
  cursor: pointer;
}
.mute svg { width: 32px; fill: currentColor; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mute .sound-off { display: none; }
.mute[aria-pressed="true"] .sound-on { display: none; }
.mute[aria-pressed="true"] .sound-off { display: block; }

.prompt-bubble {
  position: absolute;
  z-index: 12;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 178px;
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 60px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 9px 0 rgba(23,55,94,.15), inset 0 -4px 0 #dff7ff;
  cursor: pointer;
  animation: float 2.6s ease-in-out infinite;
}
.prompt-bubble::after { content: ""; position: absolute; bottom: -18px; width: 34px; height: 34px; transform: rotate(45deg); border-radius: 7px; background: #fff; }
.prompt-icon, .prompt-question { position: relative; z-index: 1; font-size: 70px; line-height: 1; font-weight: 1000; }
.prompt-icon { color: #ff9d1f; text-shadow: 0 4px 0 #e66f15; }
.prompt-question { font-size: 47px; color: var(--ink); }
.sound-waves { position: absolute; right: 17px; top: 18px; display: flex; gap: 4px; align-items: center; }
.sound-waves i { display: block; width: 5px; height: 14px; border-radius: 4px; background: #62c9ed; animation: wave .9s ease-in-out infinite alternate; }
.sound-waves i + i { height: 23px; animation-delay: .18s; }

.stage { position: absolute; inset: 144px 3.4% 42px; display: grid; grid-template-columns: minmax(400px, 1fr) 122px minmax(400px, 1fr); align-items: end; gap: 15px; }

.platform {
  position: relative;
  height: 57%;
  min-height: 330px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  overflow: visible;
}
.platform-top, .platform-side { position: absolute; left: 0; width: 100%; border-radius: 50%; pointer-events: none; }
.platform-top { z-index: 2; bottom: 78px; height: 205px; background: var(--blue); border: 8px solid rgba(255,255,255,.19); box-shadow: inset 0 -10px 0 rgba(0,0,0,.06); }
.platform-side { z-index: 1; bottom: 0; height: 182px; border-radius: 0 0 49% 49% / 0 0 42% 42%; background: var(--blue-dark); box-shadow: 0 18px 0 rgba(55,123,33,.2); }
.platform-right .platform-top { background: var(--yellow); }
.platform-right .platform-side { background: var(--yellow-dark); }
.platform:hover .platform-top, .platform:focus-visible .platform-top { filter: brightness(1.05); }
.platform.is-pressed { animation: platformTap .32s ease-out; }
.platform.is-gentle-no { animation: gentleNo .48s ease-out; }
.platform.is-picked .platform-top { animation: pickedGlow .65s ease-out 2; }
.platform.is-picked .animal { animation: animalCheer .55s ease-out alternate 3; }
.platform.is-pointed .choice-glow { opacity: 1; animation: pulseRing .75s ease-out 2; }

.choice-glow { position: absolute; z-index: 0; inset: 8% -2% 7%; border: 12px solid #fff; border-radius: 50%; opacity: 0; pointer-events: none; }

.animals { position: absolute; z-index: 5; left: 6%; right: 6%; bottom: 164px; height: 300px; display: flex; align-items: flex-end; justify-content: center; gap: 14px; pointer-events: none; }
.animals.spread { justify-content: space-around; gap: 30px; }
.animals.tight { gap: 3px; }

.animal {
  --fur: #ff9f20;
  --fur-dark: #dc6f12;
  position: relative;
  width: var(--animal-size, 70px);
  height: calc(var(--animal-size, 70px) * 1.32);
  flex: 0 0 var(--animal-size, 70px);
  filter: drop-shadow(0 9px 0 rgba(76,70,24,.13));
  transform-origin: 50% 100%;
}
.animals.paired { justify-content: center; gap: 14px; }
.animal:nth-child(even) { --fur: #ffb42c; }
.animal-body { position: absolute; left: 18%; bottom: 0; width: 64%; height: 58%; border-radius: 48% 48% 28% 28%; background: var(--fur); border: 5px solid var(--fur-dark); }
.animal-head { position: absolute; z-index: 2; left: 7%; top: 4%; width: 86%; aspect-ratio: 1.05; border-radius: 48% 48% 44% 44%; background: var(--fur); border: 5px solid var(--fur-dark); }
.animal-head::before, .animal-head::after { content: ""; position: absolute; z-index: -1; top: -16%; width: 37%; height: 40%; border-radius: 50%; background: var(--fur); border: 5px solid var(--fur-dark); }
.animal-head::before { left: -7%; }
.animal-head::after { right: -7%; }
.animal-face::before, .animal-face::after { content: ""; position: absolute; top: 35%; width: 12%; aspect-ratio: .7; border-radius: 50%; background: #13223c; box-shadow: inset 2px 2px 0 #fff; }
.animal-face::before { left: 25%; }
.animal-face::after { right: 25%; }
.animal-nose { position: absolute; z-index: 2; left: 50%; top: 53%; width: 18%; height: 13%; transform: translateX(-50%); border-radius: 50%; background: #7d3b25; }
.animal-smile { position: absolute; z-index: 2; left: 50%; top: 65%; width: 34%; height: 19%; transform: translateX(-50%); border: 4px solid #7d3b25; border-top: 0; border-radius: 0 0 30px 30px; }
.animal-paw { position: absolute; z-index: 3; bottom: -2%; width: 31%; height: 18%; border-radius: 50%; background: #ffe4a9; border: 4px solid var(--fur-dark); }
.animal-paw.left { left: 12%; } .animal-paw.right { right: 12%; }
.animal.is-counting { z-index: 9; animation: countPop .45s ease-out !important; filter: drop-shadow(0 0 18px #fff) drop-shadow(0 10px 0 rgba(76,70,24,.12)); }

.middle-mark { align-self: center; justify-self: center; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.9); box-shadow: 0 9px 0 rgba(23,55,94,.14); font-size: 68px; font-weight: 1000; }

.equal-button { position: absolute; z-index: 14; left: 50%; top: 51%; width: 116px; height: 116px; transform: translate(-50%,-50%); border: 7px solid #fff; border-radius: 50%; color: #fff; background: #744fe7; box-shadow: 0 11px 0 #4932a5; font-size: 74px; line-height: .8; cursor: pointer; animation: equalPulse 1.2s ease-in-out infinite alternate; }

.demo-hand { position: absolute; z-index: 20; left: 23%; top: 34%; font-family: system-ui, sans-serif; font-size: 86px; filter: drop-shadow(0 8px 0 rgba(31,67,81,.2)); opacity: 0; pointer-events: none; }
.demo-hand.is-showing { animation: demoTap 2.3s ease-in-out forwards; }

.count-bubble { position: absolute; z-index: 25; top: 37%; width: 132px; height: 132px; display: grid; place-items: center; border: 8px solid #fff; border-radius: 50%; color: #fff; background: #17375e; box-shadow: 0 10px 0 rgba(23,55,94,.2); font-size: 84px; font-weight: 1000; opacity: 0; transform: scale(.5); transition: opacity .14s, transform .2s cubic-bezier(.2,1.6,.4,1); }
.count-bubble.is-visible { opacity: 1; transform: scale(1); }
.count-left { left: 25%; } .count-right { right: 25%; }

.celebration { position: absolute; z-index: 40; inset: 0; display: grid; place-items: center; background: rgba(37,137,160,.23); backdrop-filter: blur(3px); }
.celebration[hidden] { display: none; }
.sunburst { position: absolute; width: 540px; height: 540px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #fff 0 9deg, transparent 9deg 18deg); opacity: .46; animation: spin 14s linear infinite; }
.happy-star { position: relative; z-index: 2; width: 270px; height: 270px; display: grid; place-items: center; border-radius: 50%; background: #ffe34f; border: 12px solid #fff; box-shadow: 0 18px 0 rgba(53,89,67,.22); }
.happy-star span { color: #ff9e1d; font-size: 175px; line-height: 1; filter: drop-shadow(0 7px 0 #ef7712); }
.happy-star::before, .happy-star::after { content: ""; position: absolute; top: 46%; width: 22px; height: 29px; border-radius: 50%; background: var(--ink); }
.happy-star::before { left: 84px; } .happy-star::after { right: 84px; }
.happy-star i { position: absolute; top: 57%; width: 72px; height: 40px; border: 8px solid var(--ink); border-top: 0; border-radius: 0 0 50px 50px; }
.answer-mark { position: absolute; z-index: 3; top: 67%; min-width: 250px; padding: 13px 30px; border: 6px solid #fff; border-radius: 38px; color: var(--ink); background: #fff; box-shadow: 0 8px 0 rgba(23,55,94,.15); font-size: 49px; font-weight: 1000; text-align: center; }
.next-button { position: absolute; z-index: 5; right: 7%; bottom: 8%; width: 132px; height: 112px; border: 7px solid #fff; border-radius: 45px; color: #fff; background: #42b93d; box-shadow: 0 11px 0 #278d2d; font-size: 69px; line-height: 1; cursor: pointer; animation: nextNudge 1.2s ease-in-out infinite; }

.sparkles { position: absolute; z-index: 35; inset: 0; pointer-events: none; }
.sparkles i { position: absolute; width: 22px; height: 22px; border-radius: 7px; background: var(--spark); animation: sparkleFly .95s ease-out forwards; }

.flowers { position: absolute; z-index: -1; inset: auto 0 18px; display: flex; justify-content: space-around; pointer-events: none; }
.flowers i { width: 28px; height: 28px; border: 9px dotted #ff77ad; border-radius: 50%; background: #ffe03c; }
.flowers i:nth-child(2) { border-color: #995ee9; transform: translateY(15px); }.flowers i:nth-child(3) { border-color: #ff9b26; }.flowers i:nth-child(4) { border-color: #fff; transform: translateY(20px); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes float { 50% { transform: translate(-50%, 5px); } }
@keyframes wave { to { transform: scaleY(.55); } }
@keyframes platformTap { 50% { transform: translateY(9px) scale(.99); } }
@keyframes gentleNo { 20% { transform: rotate(-1.5deg); } 45% { transform: rotate(1.5deg) translateY(-4px); } 70% { transform: rotate(-.7deg); } }
@keyframes pickedGlow { 50% { filter: brightness(1.18) drop-shadow(0 0 22px #fff); } }
@keyframes animalCheer { to { transform: translateY(-22px) rotate(3deg); } }
@keyframes countPop { 50% { transform: translateY(-30px) scale(1.18) rotate(-4deg); } }
@keyframes pulseRing { from { transform: scale(.86); opacity: .9; } to { transform: scale(1.05); opacity: 0; } }
@keyframes equalPulse { to { box-shadow: 0 11px 0 #4932a5, 0 0 0 13px rgba(255,255,255,.42); filter: brightness(1.08); } }
@keyframes demoTap { 0% { opacity: 0; transform: translate(10px,-40px) scale(.9); } 18% { opacity: 1; } 42% { transform: translate(10px,30px) scale(.84); } 55% { transform: translate(10px,0) scale(1); } 72% { left: 73%; transform: translate(0,-20px); } 88% { opacity: 1; transform: translate(0,18px) scale(.86); } 100% { left: 73%; opacity: 0; transform: translate(0,-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes nextNudge { 50% { transform: translateX(8px); } }
@keyframes sparkleFly { from { opacity: 1; transform: translate(0,0) rotate(0); } to { opacity: 0; transform: translate(var(--x),var(--y)) rotate(190deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}