:root {
  color-scheme: light;
  font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --cream: #fff5b8;
  --ink: #543a22;
  --red: #f43b2f;
  --red-dark: #c91f25;
  --leaf: #56ac29;
  --basket: #ed9627;
  --basket-dark: #b96217;
  --blue: #30a7e8;
  --blue-dark: #1479b7;
  --yellow: #ffc62d;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--cream); color: var(--ink); }
button, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: none; }
button:focus-visible, [role="button"]:focus-visible { outline: 6px solid rgba(48,167,232,.42); outline-offset: 6px; }
[hidden] { display: none !important; }

.game {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  min-height: 650px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,.72), transparent 35%),
    linear-gradient(#fff8c9, #fff1a7);
  user-select: none;
}
.game::after { position: absolute; inset: auto 0 0; height: 22%; content: ""; background: #b8dc58; border-radius: 50% 50% 0 0 / 22% 22% 0 0; transform: scaleX(1.08); }

.mute { position: absolute; z-index: 80; top: 22px; right: 24px; width: 58px; height: 58px; display: grid; place-items: center; padding: 0; border: 4px solid #fff; border-radius: 50%; color: #fff; background: var(--blue); box-shadow: 0 7px 0 var(--blue-dark), 0 11px 22px rgba(84,58,34,.2); }
.mute:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--blue-dark); }
.mute svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 2.3; 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; }

.sky-shapes { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.sky-shapes i { position: absolute; width: 42px; height: 42px; background: var(--yellow); clip-path: polygon(50% 0,61% 34%,98% 36%,68% 57%,78% 94%,50% 72%,20% 94%,31% 57%,2% 36%,39% 34%); }
.sky-shapes i:nth-child(1) { left: 5%; top: 9%; rotate: -17deg; background: #f16a8c; clip-path: path("M21 38C4 27 0 15 6 7c6-8 15-5 19 1 4-6 14-9 20-1 7 10 1 22-24 31Z"); }
.sky-shapes i:nth-child(2) { left: 18%; top: 18%; rotate: 14deg; }
.sky-shapes i:nth-child(3) { right: 11%; top: 13%; background: #f16a8c; clip-path: path("M21 38C4 27 0 15 6 7c6-8 15-5 19 1 4-6 14-9 20-1 7 10 1 22-24 31Z"); }
.sky-shapes i:nth-child(4) { right: 5%; bottom: 23%; background: var(--blue); rotate: 20deg; }
.sky-shapes i:nth-child(5) { left: 5%; bottom: 21%; background: var(--blue); rotate: -18deg; }

.play-stage { position: absolute; z-index: 5; inset: 6% 4% 10%; }
.group-card { position: absolute; z-index: 15; top: 23%; width: 330px; height: 390px; cursor: grab; transition: transform .18s ease-out, filter .18s ease-out; }
.group-card:active, .group-card.is-dragging { cursor: grabbing; filter: drop-shadow(0 16px 16px rgba(101,60,11,.18)); transition: none; }
.group-card.is-bouncing { animation: friendly-bounce .55s ease-out; }
.group-left { left: 5%; }.group-right { right: 5%; }
.count-bubble { position: absolute; z-index: 8; top: -40px; left: 50%; width: 94px; height: 94px; display: grid; place-items: center; border: 7px solid #fff; border-radius: 50%; color: #fff; background: var(--blue); box-shadow: 0 7px 0 var(--blue-dark); font-size: 55px; font-weight: 1000; line-height: 1; transform: translateX(-50%); }

.basket { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); }
.small-basket { width: 286px; height: 205px; }.big-basket { width: 440px; height: 310px; }
.handle { position: absolute; z-index: 0; left: 12%; right: 12%; bottom: 34%; height: 95%; border: 21px solid var(--basket); border-bottom: 0; border-radius: 50% 50% 0 0; box-shadow: inset 0 0 0 5px rgba(178,83,12,.5), 0 0 0 3px var(--basket-dark); }
.basket::after { position: absolute; z-index: 6; left: 5%; right: 5%; bottom: 0; height: 54%; content: ""; border: 5px solid var(--basket-dark); border-top-width: 12px; border-radius: 18% 18% 42% 42%; background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(178,83,12,.35) 23px 29px), repeating-linear-gradient(90deg, var(--basket) 0 42px, #da7d20 42px 48px); box-shadow: inset 0 8px 0 rgba(255,185,64,.55), 0 13px 0 rgba(122,162,34,.28); }
.rim { position: absolute; z-index: 8; left: 0; right: 0; bottom: 48%; height: 42px; border: 5px solid var(--basket-dark); border-radius: 50%; background: repeating-linear-gradient(105deg, #f7ae38 0 16px, #db7e1f 17px 25px); box-shadow: inset 0 -7px rgba(160,75,13,.22); }
.items { position: absolute; z-index: 4; left: 7%; right: 7%; bottom: 44%; height: 135px; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.big-basket .items { left: 9%; right: 9%; bottom: 45%; height: 206px; display: grid; grid-template-columns: repeat(5, 1fr); align-content: end; justify-items: center; gap: 0; }
.apple { position: relative; width: 92px; height: 86px; flex: 0 0 auto; border: 4px solid var(--red-dark); border-radius: 48% 52% 48% 52% / 45% 45% 57% 57%; background: radial-gradient(circle at 31% 25%, #ffaca0 0 7%, var(--red) 9% 58%, #e92829 82%); box-shadow: inset -7px -6px rgba(188,22,31,.12); transform-origin: 50% 100%; }
.apple::before { position: absolute; left: 46%; top: -24px; width: 11px; height: 30px; content: ""; border-radius: 8px; background: #82501e; rotate: -12deg; }
.apple::after { position: absolute; left: 56%; top: -19px; width: 31px; height: 18px; content: ""; border: 3px solid #388817; border-radius: 100% 10% 100% 10%; background: var(--leaf); rotate: -22deg; }
.apple:nth-child(even) { transform: rotate(4deg) scale(.96); }.apple:nth-child(3n) { transform: rotate(-5deg) scale(.92); }
.apple.is-counting { animation: apple-count .34s cubic-bezier(.2,.9,.3,1.35); filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 16px var(--yellow)); }
.final-items .apple { width: 78px; height: 73px; border-width: 3px; opacity: 0; transform: translateY(-210px) rotate(var(--fall-rotate)); }
.final-items .apple::before { top: -20px; height: 25px; }.final-items .apple::after { top: -15px; width: 26px; height: 15px; }
.game.is-combined .final-items .apple { opacity: 1; transform: translateY(0) rotate(var(--settle-rotate)); transition: transform .46s cubic-bezier(.18,.82,.25,1.24) var(--fall-delay), opacity .1s linear var(--fall-delay); }

.combine-cue { position: absolute; z-index: 8; left: 50%; top: 41%; display: flex; align-items: center; gap: 22px; color: var(--blue); transform: translate(-50%,-50%); filter: drop-shadow(0 5px 0 #fff); }
.plus { font-size: 90px; font-weight: 1000; }.blue-arrow { font-size: 112px; line-height: 1; animation: arrow-nudge 1.05s ease-in-out infinite; }
.merge-zone { position: absolute; z-index: 10; left: 50%; bottom: -1%; width: 480px; height: 335px; opacity: 0; transform: translateX(-50%) scale(.78); pointer-events: none; transition: opacity .22s ease, transform .35s cubic-bezier(.2,.9,.3,1.2); }
.game.is-combined .group-card, .game.is-combined .combine-cue, .game.is-combined .pointing-hand { opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.game.is-combined .merge-zone { opacity: 1; transform: translateX(-50%) scale(1); }

.pointing-hand { position: absolute; z-index: 30; left: 26%; top: 54%; font-family: "Apple Color Emoji", sans-serif; font-size: 74px; transform: rotate(90deg); animation: hand-guide 1.35s ease-in-out infinite; filter: drop-shadow(0 4px 0 #fff); pointer-events: none; }
.game.has-tried .pointing-hand { opacity: 0; transition: opacity .2s; }

.number-question { position: absolute; z-index: 50; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 4vh; background: rgba(255,245,184,.94); }
.question-groups { display: flex; align-items: center; gap: 25px; margin-bottom: 52px; }
.mini-count, .mystery { width: 122px; height: 122px; display: grid; place-items: center; border: 8px solid #fff; border-radius: 50%; color: #fff; background: var(--blue); box-shadow: 0 9px 0 var(--blue-dark); font-size: 72px; font-weight: 1000; }
.mystery { background: var(--yellow); color: var(--ink); box-shadow-color: #d69218; }.tiny-plus, .tiny-equals { font-size: 75px; font-weight: 1000; color: var(--ink); }
.number-choices { display: flex; gap: 38px; }
.number-choice { width: 154px; height: 138px; border: 8px solid #fff; border-radius: 36px; color: #fff; background: var(--blue); box-shadow: 0 11px 0 var(--blue-dark), 0 18px 30px rgba(64,91,91,.14); font: 1000 80px/1 ui-rounded, "Arial Rounded MT Bold", sans-serif; cursor: pointer; }
.number-choice:hover { transform: translateY(-4px); }.number-choice:active { transform: translateY(7px); box-shadow: 0 4px 0 var(--blue-dark); }
.number-choice.is-chosen { animation: choice-pop .5s ease-out; background: #65bb36; box-shadow-color: #3d871f; }

.count-pop { position: absolute; z-index: 65; left: 50%; top: 24%; width: 130px; height: 130px; display: grid; place-items: center; border: 9px solid #fff; border-radius: 50%; color: #fff; background: var(--blue); box-shadow: 0 9px 0 var(--blue-dark), 0 14px 28px rgba(35,91,117,.2); font-size: 80px; font-weight: 1000; opacity: 0; transform: translate(-50%,-50%) scale(.6); pointer-events: none; }
.count-pop.is-showing { opacity: 1; transform: translate(-50%,-50%) scale(1); transition: .18s cubic-bezier(.2,.9,.25,1.35); }

.result { position: absolute; z-index: 70; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,245,184,.24); pointer-events: none; }
.result-equation { position: absolute; top: 5%; display: flex; align-items: center; gap: 17px; color: var(--ink); font-size: 59px; font-weight: 1000; filter: drop-shadow(0 4px 0 #fff); }
.result-equation span { color: var(--blue); }.result-equation strong { display: grid; width: 125px; height: 125px; place-items: center; border: 8px solid #fff; border-radius: 50%; color: #fff; background: #65bb36; box-shadow: 0 8px 0 #3d871f; font-size: 78px; }
.next-button { position: absolute; right: 6%; bottom: 8%; width: 128px; height: 106px; border: 7px solid #fff; border-radius: 34px; color: #fff; background: var(--blue); box-shadow: 0 10px 0 var(--blue-dark); font-size: 70px; line-height: 1; pointer-events: auto; cursor: pointer; }
.next-button:hover { transform: translateY(-3px); }.next-button:active { transform: translateY(6px); box-shadow: 0 4px 0 var(--blue-dark); }

.sparkles { position: absolute; z-index: 60; inset: 0; pointer-events: none; overflow: hidden; }
.sparkles i { position: absolute; left: 50%; top: 48%; width: 30px; height: 30px; background: var(--spark-color); clip-path: polygon(50% 0,61% 34%,98% 36%,68% 57%,78% 94%,50% 72%,20% 94%,31% 57%,2% 36%,39% 34%); animation: sparkle-burst .9s ease-out forwards; }

.duck-pond { position: absolute; left: 50%; bottom: 5px; width: 292px; height: 140px; border: 7px solid #198eca; border-radius: 50%; background: #56c9f0; transform: translateX(-50%); box-shadow: inset 0 12px rgba(255,255,255,.35), 0 12px 0 rgba(94,154,43,.28); }
.duck-items { position: absolute; z-index: 4; left: 15px; right: 15px; bottom: 64px; height: 110px; display: flex; align-items: flex-end; justify-content: space-around; }
.duck { position: relative; width: 92px; height: 60px; border: 4px solid #d88c10; border-radius: 52% 55% 44% 48%; background: #ffd53d; }
.duck::before { position: absolute; left: 48px; top: -48px; width: 54px; height: 54px; content: ""; border: 4px solid #d88c10; border-radius: 50%; background: #ffd53d; }
.duck::after { position: absolute; left: 92px; top: -23px; width: 29px; height: 17px; content: ""; border-radius: 70% 20% 70% 20%; background: #f08b22; }
.duck i { position: absolute; z-index: 2; left: 81px; top: -31px; width: 7px; height: 7px; border-radius: 50%; background: #3d3628; }
.duck b { position: absolute; left: 26px; top: 12px; width: 43px; height: 29px; border-radius: 60% 40% 60% 40%; background: #f4b91e; rotate: -9deg; }
.duck.is-counting { animation: apple-count .34s cubic-bezier(.2,.9,.3,1.35); filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 16px var(--yellow)); }
.game.duck-level .basket { display: none; }.game.duck-level .duck-pond { display: block; }.game.duck-level .duck-items { display: flex; }.duck-pond, .duck-items { display: none; }
.game.duck-level .merge-zone .duck-pond { width: 445px; height: 185px; }.game.duck-level .merge-zone .duck-items { display: grid; grid-template-columns: repeat(4,1fr); left: 28px; right: 28px; bottom: 70px; }

.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 arrow-nudge { 50% { transform: translateX(14px); } }
@keyframes hand-guide { 0%,100% { transform: translateX(0) rotate(90deg); } 55% { transform: translateX(95px) rotate(90deg); } }
@keyframes friendly-bounce { 35% { transform: translateX(var(--bounce, 25px)) scale(1.04); } 70% { transform: translateX(calc(var(--bounce, 25px) * -.28)); } }
@keyframes apple-count { 50% { transform: translateY(-25px) scale(1.15); } }
@keyframes choice-pop { 45% { transform: scale(1.15) rotate(4deg); } }
@keyframes sparkle-burst { to { transform: translate(var(--spark-x), var(--spark-y)) rotate(240deg) scale(.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }