:root {
  color-scheme: light;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --sky: #83d8f4;
  --grass: #75c64b;
  --purple: #a84fd0;
  --purple-dark: #74309a;
  --orange: #dc8128;
  --orange-dark: #9d4d14;
  --cream: #fffdf5;
  --red: #f13b32;
  --yellow: #ffd94d;
  --ink: #3c2452;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-width: 1000px; min-height: 620px; overflow: hidden; }
body { margin: 0; background: var(--sky); color: var(--ink); }
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 69%, var(--grass) 69% 100%);
}
.game::before { position: absolute; left: -3%; right: -3%; top: 65%; height: 70px; content: ""; background: #43a94d; clip-path: polygon(0 65%,4% 26%,8% 59%,12% 12%,16% 62%,21% 31%,26% 70%,31% 20%,35% 62%,40% 31%,45% 69%,50% 18%,54% 66%,60% 27%,65% 61%,70% 20%,74% 64%,81% 32%,86% 69%,91% 19%,95% 56%,100% 27%,100% 100%,0 100%); }
.game::after { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(circle at 50% 6%, rgba(255,255,255,.25), transparent 35%); }
.cloud { position: absolute; width: 130px; height: 35px; border-radius: 30px; background: rgba(255,255,255,.72); }
.cloud::before,.cloud::after { position:absolute; content:""; border-radius:50%; background:inherit; }
.cloud::before { width:55px; height:55px; left:22px; bottom:0; }.cloud::after { width:70px; height:70px; right:14px; bottom:0; }
.cloud-a { left: 8%; top: 12%; transform: scale(.8); }.cloud-b { right: 8%; top: 9%; transform: scale(1.05); opacity:.68; }

.mute { position:absolute; z-index:50; 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:#4a9ccc; box-shadow:0 6px 0 #26729e,0 10px 18px rgba(35,86,107,.2); }
.mute:active { transform:translateY(4px); box-shadow:0 2px 0 #26729e; }
.mute svg { width:29px; fill:none; stroke:currentColor; stroke-width:3.2; 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; inset:5% 3% 9%; display:flex; align-items:center; justify-content:center; gap:30px; }
.number-card { position:relative; width:285px; height:490px; flex:0 0 auto; display:grid; place-items:center; border:14px solid var(--purple); border-radius:46px; background:var(--cream); box-shadow:inset 0 0 0 5px #d58aec,0 17px 0 rgba(73,110,54,.28),0 24px 35px rgba(52,93,73,.2); }
.number-card strong { position:relative; z-index:2; color:var(--purple); font-size:285px; line-height:.82; letter-spacing:-.1em; transform:translateX(-9px); -webkit-text-stroke:7px var(--purple-dark); paint-order:stroke fill; filter:drop-shadow(0 8px 0 #d589e9); }
.number-card.is-glowing { animation:card-glow .75s ease-out 2; }
.number-face { position:absolute; z-index:3; top:118px; left:50%; width:114px; height:70px; transform:translateX(-50%); pointer-events:none; }
.number-face i { position:absolute; top:0; width:37px; height:46px; border:7px solid #fff; border-radius:50%; background:#20152a; box-shadow:inset 8px 5px 0 -5px #fff; }
.number-face i:first-child{left:9px}.number-face i:nth-child(2){right:9px}.number-face b{position:absolute; left:42px; top:48px; width:35px; height:21px; border-radius:5px 5px 22px 22px; background:#7b183f; box-shadow:inset 0 -8px #ee5781;}
.card-stars { position:absolute; inset:0; pointer-events:none; }
.card-stars i { position:absolute; color:var(--yellow); font-size:34px; animation:star-pop .8s ease-out forwards; }

.basket-stage { position:relative; width:600px; height:650px; flex:0 0 auto; }
.basket { position:absolute; z-index:8; left:50%; top:80px; width:610px; height:390px; transform:translateX(-50%) scale(.9); transform-origin:top center; filter:drop-shadow(0 18px 0 rgba(63,101,39,.26)); }
.basket-back { position:absolute; z-index:1; left:28px; right:28px; top:58px; height:185px; border:15px solid #f19a38; border-radius:50%; background:#71340d; box-shadow:inset 0 18px 0 #a95716,0 -8px 0 #af5e1b; }
.basket-front { position:absolute; z-index:5; left:30px; right:30px; top:134px; height:245px; overflow:hidden; border-radius:18px 18px 47% 47%; background:linear-gradient(90deg,#b75d19,#dc8128 16%,#c66c20 48%,#e38a2c 78%,#a94f13); border-bottom:12px solid #8b3d10; box-shadow:inset 0 15px #ee9939; }
.basket-front::after { position:absolute; inset:44px 0 0; content:""; opacity:.18; background:repeating-linear-gradient(90deg,transparent 0 70px,#68300d 72px 76px,transparent 78px 105px); }
.basket-inside { position:absolute; z-index:4; left:58px; right:58px; top:95px; height:215px; pointer-events:none; }
.basket-inside .treat { position:absolute; transform:scale(.74); transform-origin:center bottom; }
.handle { position:absolute; z-index:0; top:12px; width:85px; height:145px; border:16px solid #c56d22; border-radius:50%; background:transparent; }.handle.left{left:8px;transform:rotate(-12deg)}.handle.right{right:8px;transform:rotate(12deg)}
.basket-dots { position:absolute; z-index:2; left:80px; right:80px; bottom:34px; display:flex; justify-content:center; flex-wrap:wrap; gap:13px; }
.basket-dots i { width:28px; height:28px; border:4px solid rgba(255,255,255,.85); border-radius:50%; background:rgba(118,55,14,.18); }
.basket.is-ready .basket-back { animation:basket-ready .9s ease-in-out infinite; }
.basket.is-bump { animation:basket-bump .38s ease-out; }

.tray { position:absolute; z-index:10; left:0; right:0; bottom:4px; height:190px; display:flex; align-items:flex-end; justify-content:center; gap:14px; }
.treat { position:relative; width:108px; height:108px; flex:0 0 auto; border:0; padding:0; border-radius:48% 52% 47% 50%; background:var(--red); box-shadow:inset 12px 10px 0 rgba(255,255,255,.18),inset -10px -9px 0 rgba(132,21,17,.18),0 10px 0 #b62822,0 16px 20px rgba(67,93,40,.24); touch-action:none; user-select:none; transition:transform .14s ease,filter .14s ease; }
.treat::before { position:absolute; left:50px; top:-27px; width:12px; height:36px; content:""; border-radius:8px; background:#7f451a; transform:rotate(18deg); }
.treat::after { position:absolute; left:59px; top:-18px; width:36px; height:18px; content:""; border-radius:100% 0 100% 0; background:#71b72f; transform:rotate(13deg); box-shadow:inset 5px 4px rgba(255,255,255,.18); }
.treat .eyes { position:absolute; left:22px; top:35px; width:64px; display:flex; justify-content:space-between; }
.treat .eyes i { width:24px; height:30px; border:5px solid #fff; border-radius:50%; background:#17131d; box-shadow:inset 6px 5px 0 -4px #fff; }
.treat .smile { position:absolute; left:40px; top:67px; width:30px; height:18px; border-bottom:5px solid #5f1923; border-radius:50%; }
.treat.is-pear { border-radius:52% 48% 45% 45%; background:#ffd343; box-shadow:inset 12px 10px rgba(255,255,255,.2),inset -10px -9px rgba(177,122,12,.15),0 12px 0 #d79c18,0 18px 22px rgba(67,93,40,.24); }
.treat.is-pear::before{left:49px}.treat.is-pear::after{left:57px}.treat:active,.treat.is-dragging{transform:scale(1.08) rotate(-4deg);filter:brightness(1.06);}
.treat.is-returning { animation:return-bounce .48s ease-out; }
.treat.is-plopping { animation:plop .42s cubic-bezier(.25,.9,.3,1.25); }
.pointing-hand { position:absolute; z-index:20; left:190px; bottom:42px; font-size:72px; filter:drop-shadow(0 5px 0 rgba(81,55,34,.16)); transform:rotate(-30deg); pointer-events:none; animation:hand-demo 2.1s ease-in-out infinite; }
.game.has-played .pointing-hand { display:none; }

.choice-stage { width:760px; min-height:590px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:48px; }
.treat-group { min-height:285px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px; padding:10px 45px; }
.treat-group .treat { width:112px; height:112px; transform:scale(.9); pointer-events:none; }
.treat-group .treat::before{left:53px}.treat-group .treat::after{left:62px}.treat-group .eyes{left:23px;top:35px;width:67px}.treat-group .eyes i{width:24px;height:30px}.treat-group .smile{left:43px;top:68px}
.choices { display:flex; gap:28px; }
.number-choice { width:170px; height:150px; border:9px solid #fff; border-radius:34px; color:#fff; background:var(--purple); box-shadow:0 12px 0 var(--purple-dark),0 18px 25px rgba(60,70,51,.25); font-size:94px; font-weight:950; line-height:1; -webkit-text-stroke:3px var(--purple-dark); paint-order:stroke fill; }
.number-choice:hover,.number-choice:focus-visible{transform:translateY(-4px)}.number-choice:active{transform:translateY(7px);box-shadow:0 5px 0 var(--purple-dark)}
.number-choice.is-gentle-no { animation:gentle-no .45s ease-out; }.number-choice.is-yes { animation:choice-yes .65s ease-out; background:#5fc95a; }

.level-dots { position:absolute; z-index:30; left:50%; bottom:24px; display:flex; gap:13px; transform:translateX(-50%); }
.level-dots i { width:18px;height:18px;border:4px solid rgba(255,255,255,.85);border-radius:50%;background:rgba(54,130,67,.38); }.level-dots i.is-active{width:44px;border-radius:20px;background:#fff}.level-dots i.is-done{background:var(--yellow)}
.sparkles { position:absolute; z-index:40; inset:0; pointer-events:none; }.sparkles i{position:absolute;color:var(--yellow);font-size:38px;animation:sparkle-fly .9s ease-out forwards;}
.celebration { position:absolute; z-index:60; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(104,209,237,.92); backdrop-filter:blur(3px); }
.celebrate-friend { width:150px;height:150px;display:grid;place-items:center;border:10px solid #fff;border-radius:50%;color:#fff;background:var(--yellow);box-shadow:0 12px 0 #d7a71e;font-size:90px;animation:celebrate-pop .6s cubic-bezier(.2,.9,.2,1.25); }
.celebrate-number { margin:28px 0 24px;color:#fff;font-size:170px;font-weight:950;line-height:.8;-webkit-text-stroke:7px var(--purple-dark);paint-order:stroke fill;filter:drop-shadow(0 9px 0 var(--purple)); }
.celebration button { width:128px;height:96px;padding:10px;border:8px solid #fff;border-radius:31px;color:#fff;background:#61c75c;box-shadow:0 10px 0 #35953b; }
.celebration button:active{transform:translateY(6px);box-shadow:0 4px 0 #35953b}.celebration svg{width:64px;fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}

@keyframes hand-demo{0%,18%{transform:translate(0,0) rotate(-30deg)}58%,80%{transform:translate(215px,-245px) rotate(-20deg)}100%{transform:translate(0,0) rotate(-30deg)}}
@keyframes basket-ready{50%{filter:brightness(1.13);transform:scale(1.015)}}
@keyframes basket-bump{45%{transform:translateY(-9px) rotate(1deg)}}
@keyframes plop{0%{transform:scale(.5) translateY(-75px)}75%{transform:scale(.82) translateY(5px)}100%{transform:scale(.74)}}
@keyframes return-bounce{35%{transform:translateY(-18px) rotate(-4deg)}70%{transform:translateY(5px)}}
@keyframes gentle-no{25%{transform:translateX(-9px) rotate(-3deg)}60%{transform:translateX(8px) rotate(3deg)}}
@keyframes choice-yes{50%{transform:scale(1.14) rotate(4deg)}}
@keyframes card-glow{50%{box-shadow:inset 0 0 0 5px #f1b6ff,0 0 0 13px rgba(255,232,74,.7),0 25px 40px rgba(75,98,41,.25);transform:scale(1.025)}}
@keyframes star-pop{0%{opacity:0;transform:scale(.2) rotate(-30deg)}55%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:translateY(-30px) rotate(45deg)}}
@keyframes sparkle-fly{from{opacity:1;transform:scale(.2)}to{opacity:0;transform:translate(var(--x),var(--y)) rotate(180deg) scale(1.4)}}
@keyframes celebrate-pop{from{opacity:0;transform:scale(.2) rotate(-25deg)}to{opacity:1;transform:scale(1) rotate(0)}}

@media (max-height:760px){.playfield{transform:scale(.88);transform-origin:center}.level-dots{bottom:14px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.pointing-hand{left:440px;bottom:235px}}