/* Front-facing booth, with the child in the foreground and targets on the recessed shelf. */
.counting-field{background-image:url('counting-art/booth-v2.webp');background-size:100% 100%;background-color:#95d3e5}
.counting-back-shelf{display:none}
.counting-field:after{inset:10% 17% auto;height:12%;opacity:.45}
.counting-field .counting-can,.counting-field[data-stack="large"] .counting-can{width:calc(var(--can-height)*.638);height:var(--can-height);filter:drop-shadow(1px 3px 2px #321e2399);transform:translate(-50%,0);transition:filter .15s}
.counting-field .counting-can.aimed{filter:drop-shadow(0 0 2px white) drop-shadow(0 0 5px #ffe474)}
.counting-worker{position:absolute;left:16%;top:18%;width:19%;height:33%;z-index:1;overflow:hidden;pointer-events:none}
.counting-worker-animal{position:absolute;inset:0}.counting-worker-animal svg{width:100%;height:100%;filter:drop-shadow(0 3px 3px #44273d55)}
.counting-worker-hat{position:absolute;left:21%;top:0;width:58%;height:24%;filter:drop-shadow(0 2px 1px #6d423c55);transform:rotate(-9deg)}
.counting-worker[data-animal="bunny"] .counting-worker-hat{top:13%;left:27%;transform:rotate(12deg);width:48%}
.counting-worker[data-animal="frog"] .counting-worker-hat{top:-2%}.counting-worker[data-animal="turtle"] .counting-worker-hat{top:3%}
.counting-worker.happy .counting-worker-animal{animation:counting-worker-cheer .65s ease-out}
.counting-wheel{position:absolute;left:-3%;top:15%;width:14%;height:32%;pointer-events:none;z-index:1;filter:drop-shadow(1px 2px 2px #3c818344)}.counting-wheel svg{width:100%;height:100%;overflow:visible}
.counting-wheel-spin{animation:counting-wheel-turn 35s linear infinite}.counting-gondola{animation:counting-wheel-turn 35s linear reverse infinite;transform-origin:0 0}
.counting-field .counting-ball{border:0;background:none;box-shadow:0 8px 9px #47392e66;overflow:visible}.counting-ball-surface{width:100%;height:100%;overflow:visible;pointer-events:none}
.counting-ball.flying .counting-ball-surface{animation:counting-ball-flight .45s ease-out both}.counting-ball.pulling .counting-ball-surface{filter:drop-shadow(0 0 5px #fff1ac)}
.counting-field .counting-can.fallen{animation:counting-can-fall .85s cubic-bezier(.4,0,.75,.8) forwards}.counting-field .counting-can.fallen.settled{animation:none;opacity:0}
.counting-modes{gap:8px}.counting-modes button{flex:1;min-width:0;max-width:145px;padding:8px 10px;font-size:16px}
.counting-ambient i{left:4%;top:35%;width:24px;height:31px}.counting-ambient i:nth-child(2){left:94%;top:35%}.counting-ambient i:nth-child(3){left:96%;top:25%}
.counting-screen[hidden] *{animation-play-state:paused!important}
/* Floating toy-like numerals leave the target shelf visible; no popup card. */
.counting-field .counting-number{top:53%;left:50%;width:auto;min-width:1.65em;height:1.12em;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#ffe36b;font-size:clamp(80px,11vw,128px);line-height:1;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.055em;-webkit-text-stroke:5px #fffbee;paint-order:stroke fill;text-shadow:0 4px 0 #e5a347,0 7px 0 #b87544,0 10px 2px #71496855;transform:translateX(-50%);transform-origin:50% 80%;overflow:visible}
.counting-field .counting-number.show{animation:counting-number-bounce .7s cubic-bezier(.2,.8,.25,1) both}
.counting-number:before,.counting-number:after{content:'';position:absolute;width:.22em;height:.29em;top:24%;left:-.05em;background:linear-gradient(135deg,#fffad5,#ffd04f);clip-path:polygon(50% 0,62% 35%,100% 50%,62% 64%,50% 100%,37% 64%,0 50%,37% 35%);filter:drop-shadow(0 2px 1px #975d6366);animation:counting-number-spark .7s ease-out both}
.counting-number:after{left:auto;right:-.09em;top:52%;width:.16em;height:.22em;background:linear-gradient(135deg,#fff,#a6edf2);animation-delay:.07s}
@keyframes counting-number-bounce{0%{opacity:0;transform:translate(-50%,18px) scale(.5) rotate(-8deg)}42%{opacity:1;transform:translate(-50%,-8px) scale(1.13) rotate(3deg)}68%{transform:translate(-50%,2px) scale(.97) rotate(-1deg)}100%{opacity:1;transform:translate(-50%,0) scale(1) rotate(0)}}
@keyframes counting-number-spark{0%{opacity:0;scale:.1;rotate:-35deg}45%{opacity:1;scale:1.25}100%{opacity:.85;scale:1;rotate:10deg}}
@keyframes counting-can-fall{0%{opacity:1;transform:translate(-50%,0) rotate(0)}25%{opacity:1;transform:translate(calc(-50% + 5px),4px) rotate(calc(var(--tumble)*.3))}60%{opacity:1;transform:translate(calc(-50% + 19px),30px) rotate(var(--tumble))}78%{opacity:.9;transform:translate(calc(-50% + 24px),21px) rotate(calc(var(--tumble)*1.2))}100%{opacity:0;transform:translate(calc(-50% + 30px),50px) rotate(calc(var(--tumble)*1.4))}}
@keyframes counting-ball-flight{0%{transform:translateY(0) rotate(0)}45%{transform:translateY(-30px) rotate(140deg)}100%{transform:translateY(0) rotate(280deg)}}
@keyframes counting-wheel-turn{to{transform:rotate(360deg)}}
@keyframes counting-worker-cheer{40%{transform:translateY(-5px) rotate(-3deg)}75%{transform:translateY(-2px) rotate(2deg)}}
@media(max-width:430px){.counting-modes button{font-size:14px;padding:7px 4px}.counting-worker{left:13%;width:23%}.counting-wheel{width:16%}}
@media(prefers-reduced-motion:reduce){.counting-screen *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.counting-worker{clip-path:inset(0 0 21% 0)}

.counting-worker[data-animal=bird] .counting-worker-hat{top:1%;left:27%;width:51%;transform:rotate(-7deg)}
.counting-field.paused .character-bird image{animation-play-state:paused}