.counting-tile{background:linear-gradient(145deg,#ffe7a0,#ffc4a5);color:#744a3d}.counting-tile-picture{border:5px solid white;border-radius:30px;background:url('counting-carnival.png') center/cover;box-shadow:0 5px 0 #d9a274;overflow:hidden}.counting-tile-picture i{position:absolute;left:20%;top:16%;width:62%;height:72%;background:url('counting-can.png') center/contain no-repeat;transform:rotate(-13deg);filter:drop-shadow(0 5px 3px #704b5c55)}.counting-tile-picture b{position:absolute;right:4%;bottom:6%;width:43%;height:61%;background:url('counting-slingshot.png') center/contain no-repeat;transform:rotate(12deg);filter:drop-shadow(0 3px 2px #704b5c44)}
.counting-screen{max-width:1100px;margin:0 auto;padding:0 24px 15px}.counting-screen[hidden]{display:none}.counting-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:2px 0 8px}.counting-heading h1{margin:2px 0;color:#85568b;font-size:clamp(26px,3.2vw,39px);line-height:1.15}.counting-count{display:flex;align-items:baseline;gap:5px;padding:7px 17px;border:4px solid white;border-radius:23px;background:#fff0b1;box-shadow:0 5px 0 #d5aa66;color:#78512c;font-weight:900;font-size:24px}.counting-count strong{font-size:35px;line-height:1}.counting-stage-track{height:14px;margin:10px 5px 15px;border:3px solid white;border-radius:20px;background:#ffe6ba;box-shadow:0 3px 0 #d8bc9c;overflow:hidden}.counting-stage-track span{display:block;width:0;height:100%;border-radius:20px;background:linear-gradient(90deg,#70ca8d,#ffd35d,#f6977e);transition:width .3s ease}
.counting-field{position:relative;isolation:isolate;overflow:hidden;height:clamp(390px,60dvh,580px);border:6px solid white;border-radius:34px;background:#9ad4eb url('counting-carnival.png') center/100% 100% no-repeat;box-shadow:0 8px 0 #b1d4db,0 15px 30px #466b7930;touch-action:none;user-select:none;-webkit-user-select:none}.counting-field:after{content:'';position:absolute;inset:2% 10% auto;height:15%;pointer-events:none;background:radial-gradient(circle,#fff8c2 0 2px,transparent 5px) 0 0/14% 70%;opacity:.3;animation:counting-lights 2.1s ease-in-out infinite alternate}.counting-cans{position:absolute;inset:0;z-index:2;pointer-events:none}.counting-can{position:absolute;width:clamp(74px,12vw,120px);height:clamp(95px,17vw,160px);object-fit:contain;transform:translate(-50%,-6%);transform-origin:50% 90%;filter:drop-shadow(0 7px 4px #5c483c77);transition:transform .58s cubic-bezier(.15,.85,.35,1.2),opacity .58s}.counting-can.fallen{transform:translate(calc(-50% + 26px),30px) rotate(var(--tumble)) scale(.86);opacity:0}.counting-slingshot{position:absolute;z-index:3;width:clamp(110px,17vw,175px);height:clamp(140px,23vw,220px);left:50%;bottom:2%;transform:translateX(-50%);background:url('counting-slingshot.png') center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 6px 4px #60494066)}.counting-ball{position:absolute;z-index:4;left:50%;top:76%;width:clamp(66px,8vw,88px);height:clamp(66px,8vw,88px);border:5px solid #fffbe7;border-radius:50%;background:radial-gradient(circle at 30% 27%,#ffef86 0 21%,#13b9c1 22% 55%,#ffdd66 56% 72%,#15a7bb 73%);box-shadow:inset -8px -9px 0 #126e7f44,0 6px 0 #826c5555,0 9px 10px #47392e66;transform:translate(-50%,-50%);touch-action:none;cursor:grab;transition:none}.counting-ball:before{content:'';position:absolute;inset:-17px;border-radius:50%}.counting-ball.pulling{cursor:grabbing;filter:brightness(1.07)}.counting-ball.flying{transition:left .45s ease-out,top .45s ease-out,transform .45s ease-out;pointer-events:none}.counting-ball[hidden],.counting-number[hidden],.counting-stage-pop[hidden]{display:none}.counting-number{position:absolute;z-index:8;left:50%;top:8%;transform:translateX(-50%);width:clamp(95px,14vw,145px);height:clamp(95px,14vw,145px);display:grid;place-items:center;border:6px solid white;border-radius:30px;background:linear-gradient(135deg,#fff4b9,#ffcf91);box-shadow:0 8px 0 #dc9b65,0 15px 25px #824d494c;color:#7552ac;font-size:clamp(66px,9vw,105px);font-weight:900;pointer-events:none}.counting-number.show{animation:counting-pop .75s ease-out both}.counting-stage-pop{position:absolute;z-index:7;left:50%;top:25%;transform:translateX(-50%);padding:15px 24px;border:4px solid white;border-radius:22px;background:#e9ffe6;color:#5a995a;box-shadow:0 5px 0 #7db67e;font-size:clamp(20px,3vw,31px);font-weight:900;white-space:nowrap;pointer-events:none;animation:counting-pop .5s both}.counting-help{display:flex;align-items:center;justify-content:center;gap:10px;margin:15px 0 0;color:#756391;font-size:18px;font-weight:900;text-align:center}.counting-help span{display:grid;place-items:center;min-width:100px;min-height:42px;border-radius:15px;background:#fff3bb;color:#d5776c;border:2px solid white;box-shadow:0 3px 0 #d0b7b0;font-size:22px}
.sticker.can-sticker{background:transparent;border:0;box-shadow:none}.sticker.can-sticker .sticker-art{background-repeat:no-repeat!important;filter:drop-shadow(0 3px 2px #38587255)}.sticker.can-sticker.rare .sticker-art{filter:sepia(.85) saturate(2.8) brightness(1.1) drop-shadow(0 2px 3px #b8832b)}.sticker.can-sticker.legendary .sticker-art{filter:hue-rotate(72deg) saturate(1.2) brightness(1.13) drop-shadow(-2px 1px 4px #60dcff) drop-shadow(2px -1px 4px #d382ed)}.sticker.can-sticker.rare:after,.sticker.can-sticker.legendary:after,.sticker.can-sticker.legendary:before{mask-image:url('counting-can.png');mask-size:contain;mask-position:center;mask-repeat:no-repeat}
.album-sticker.locked .sticker.can-sticker .sticker-art{filter:brightness(0);opacity:.18}.album-sticker.locked .sticker.can-sticker:after,.album-sticker.locked .sticker.can-sticker:before{display:none}
.counting-aim{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible;opacity:0;transition:opacity .12s ease}.counting-aim.aim-active{opacity:1}.counting-band{stroke:#d84c50;stroke-width:10;stroke-linecap:round;filter:drop-shadow(0 2px 1px #63363588)}#counting-aim-line{stroke:#fff9c7;stroke-width:5;stroke-dasharray:9 12;stroke-linecap:round;opacity:.75;filter:drop-shadow(0 1px 2px #5e599277)}.counting-ball{z-index:5}.counting-can{width:clamp(56px,9vw,88px);height:clamp(68px,12vw,110px);transform:translate(-50%,-6%) scale(var(--depth,1))}.counting-field[data-stack="large"] .counting-can{width:clamp(48px,7vw,72px);height:clamp(60px,9vw,88px)}.counting-can.fallen{animation:counting-can-tumble .85s ease-in forwards}.counting-can.fallen.settled{animation:none;opacity:0}
.counting-modes{display:flex;justify-content:center;gap:12px;margin:6px 0 10px}.counting-modes button{min-width:135px;min-height:48px;padding:7px 17px;border:3px solid white;border-radius:18px;background:#e4f5ff;box-shadow:0 4px 0 #9dbdcc;color:#68749e;font-family:inherit;font-size:18px;font-weight:900;line-height:1.1;cursor:pointer;touch-action:manipulation}.counting-modes button.selected{background:#ffdf79;box-shadow:0 4px 0 #ca9a50;color:#774e67;transform:translateY(-1px)}.counting-modes button:focus-visible{outline:4px solid #7255ae;outline-offset:3px}
@keyframes counting-can-tumble{0%{opacity:1;transform:translate(-50%,-6%) rotate(0) scale(var(--depth,1))}30%{opacity:1;transform:translate(calc(-50% + 8px),-17px) rotate(-12deg) scale(calc(var(--depth,1)*1.08))}70%{opacity:1;transform:translate(calc(-50% + 28px),22px) rotate(var(--tumble)) scale(calc(var(--depth,1)*.9))}100%{opacity:0;transform:translate(calc(-50% + 42px),49px) rotate(var(--tumble)) scale(calc(var(--depth,1)*.78))}}
@keyframes counting-pop{0%{opacity:0;scale:.55}55%{opacity:1;scale:1.12}100%{opacity:1;scale:1}}@keyframes counting-lights{to{opacity:.85}}
@media(max-width:760px){.counting-screen{padding:0 13px 8px}.counting-field{height:clamp(390px,59dvh,540px);border-width:4px;border-radius:24px}.counting-can{width:clamp(70px,20vw,100px);height:clamp(90px,27vw,135px)}.counting-slingshot{width:150px;height:185px}.counting-help{font-size:14px}.counting-tile-picture i{width:65%;left:10%}.counting-tile-picture b{width:48%}}@media(max-height:680px) and (min-width:761px){.counting-field{height:clamp(310px,49dvh,440px)}.counting-slingshot{height:150px;width:120px}.counting-ball{top:77%}}@media(max-width:430px){.counting-heading h1{font-size:24px}.counting-count{font-size:18px;padding:6px 11px}.counting-count strong{font-size:27px}.counting-field{height:395px}.counting-can{width:70px;height:96px}.counting-slingshot{width:125px;height:160px}.counting-ball{top:78%;width:64px;height:64px}}
@media(max-width:760px) and (max-height:750px){.counting-field{height:clamp(290px,calc(100dvh - 365px),390px)}.counting-ball{top:70%}.counting-slingshot{height:150px;width:125px}.counting-can{height:clamp(76px,18vw,100px)}.counting-help{margin-top:7px}}
@media(max-width:760px){.counting-can{width:clamp(55px,16vw,76px);height:clamp(68px,20vw,94px)}.counting-field[data-stack="large"] .counting-can{width:clamp(45px,13vw,64px);height:clamp(55px,17vw,78px)}}
.counting-field .counting-can,.counting-field[data-stack="large"] .counting-can{width:calc(var(--can-height,50px)*.85);height:var(--can-height,50px);transform:translate(-50%,0);filter:drop-shadow(0 3px 2px #543b4666)}
.counting-field .counting-can.aimed{filter:drop-shadow(0 0 3px white) drop-shadow(0 0 6px #ffe474)}
.counting-field .counting-slingshot{height:35%;width:30%;max-height:180px;max-width:155px}
.counting-back-shelf{position:absolute;z-index:1;left:12%;right:12%;top:var(--shelf-top,56.5%);height:3%;border-top:4px solid #ffcf8c;border-radius:5px;background:linear-gradient(#bf7a43,#8a4f31);box-shadow:0 6px 8px #6e493d44;pointer-events:none}
.counting-ambient{position:absolute;inset:0;pointer-events:none;z-index:1}.counting-ambient i{position:absolute;left:7%;top:27%;width:20px;height:26px;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 30% 25%,#fff9 0 9%,transparent 12%),#ed8dae;box-shadow:inset -3px -2px 0 #b94f6733;animation:counting-balloon-drift 4s ease-in-out infinite alternate}.counting-ambient i:after{content:'';position:absolute;top:100%;left:48%;width:1px;height:38px;background:#b7a38b}.counting-ambient i:nth-child(2){left:88%;top:33%;background-color:#e8bc55;animation-delay:-2s}.counting-ambient i:nth-child(3){left:92%;top:22%;background-color:#a98dde;animation-delay:-1s;width:17px;height:23px}@keyframes counting-balloon-drift{from{transform:translateY(5px) rotate(-7deg)}to{transform:translateY(-7px) rotate(6deg)}}
@media(prefers-reduced-motion:reduce){.counting-screen *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}