.bubble-cannon-game{width:min(100%,660px);margin:0 auto;color:#173d42}
.bubble-cannon-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 9px}.bubble-cannon-header p{margin:0;color:#327384;font-size:12px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.bubble-cannon-header h1{margin:2px 0 0;font-size:clamp(25px,5vw,35px)}
.bubble-cannon-exit{display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid #d8ebec;border-radius:50%;background:#fff;color:#315d62;box-shadow:0 4px 0 #c9dfe1;font-size:28px;line-height:1;cursor:pointer}
.bubble-cannon-progress{position:relative;height:18px;margin-bottom:9px;border:2px solid #d8ebec;border-radius:999px;background:#fff;box-shadow:0 3px 0 #c9dfe1;overflow:hidden}.bubble-cannon-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#69c5cb,#f3c44f);transition:width .3s ease}.bubble-cannon-progress span{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:1000}
.bubble-cannon-task{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;padding:10px 12px 10px 16px;border:2px solid #d8ebec;border-radius:20px;background:#fff;box-shadow:0 4px 0 #c9dfe1}.bubble-cannon-task>div{flex:1;min-width:0}.bubble-cannon-task strong,.bubble-cannon-task small{display:block}.bubble-cannon-task strong{font-size:17px}.bubble-cannon-task small{margin-top:2px;color:#60787b;font-size:12px}.bubble-cannon-repeat{display:flex;align-items:center;gap:7px;flex:none;min-height:43px;padding:9px 13px;border:0;border-radius:15px;background:#e4f3f4;color:#17636c;font-weight:900;cursor:pointer}.bubble-cannon-repeat svg{width:20px;height:20px}
.bubble-cannon-hit-progress{display:flex;gap:8px;margin-top:7px}.bubble-cannon-hit-progress>span{display:grid;place-items:center;width:25px;height:25px;border:2px solid #78b9c1;border-radius:50%;background:#eef9fa;box-shadow:inset 0 1px 2px #3a788522}.bubble-cannon-hit-progress>span i{width:13px;height:13px;border-radius:50%;background:transparent;transition:transform .2s,background .2s}.bubble-cannon-hit-progress>span.is-filled{border-color:#eab63f;background:#fff8cf}.bubble-cannon-hit-progress>span.is-filled i{background:#f2c345;box-shadow:0 0 9px #ffe478;transform:scale(1.08)}
.bubble-cannon-hit-progress.is-complete>span.is-filled{animation:bubble-cannon-progress-complete .55s cubic-bezier(.25,.8,.3,1)}
.bubble-cannon-scene{position:relative;height:min(62svh,600px);min-height:430px;border:4px solid #fff;border-radius:29px;background:linear-gradient(#7dd3f3 0%,#d6f5f8 62%,#d5efae 63%,#77b754 100%);box-shadow:0 14px 32px rgba(42,94,102,.2);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;isolation:isolate}.bubble-cannon-background{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 61%;opacity:0;pointer-events:none;transition:opacity .16s}.bubble-cannon-background.is-loaded{opacity:1}.bubble-cannon-scene.has-bubble-cannon-background .bubble-cannon-scenery>*:not(.bubble-cannon-leaves):not(.bubble-cannon-cloud-image){opacity:0}
.bubble-cannon-scenery{position:absolute;z-index:1;inset:0;pointer-events:none}.bubble-cannon-sun{position:absolute;right:7%;top:7%;width:58px;height:58px;border-radius:50%;background:#ffe37c;box-shadow:0 0 0 13px #ffe37c44}.bubble-cannon-cloud{position:absolute;color:#fff9;font-size:68px;filter:drop-shadow(0 5px 3px #5191a733)}.bubble-cannon-cloud-one{left:5%;top:5%}.bubble-cannon-cloud-two{right:20%;top:18%;font-size:48px}.bubble-cannon-cloud-image,.bubble-cannon-leaves{position:absolute;object-fit:contain;opacity:0;transition:opacity .16s}.bubble-cannon-cloud-image.is-loaded{opacity:.42}.bubble-cannon-cloud-image-one{left:3%;top:3%;width:25%;height:84px}.bubble-cannon-cloud-image-two{right:4%;top:10%;width:20%;height:72px}.bubble-cannon-leaves.is-loaded{opacity:.74}.bubble-cannon-leaves{z-index:3;bottom:-5%;width:27%;height:auto;filter:drop-shadow(0 5px 5px #173d4230)}.bubble-cannon-leaves-left{left:-5%;object-position:left bottom}.bubble-cannon-leaves-right{right:-5%;object-position:right bottom}
.bubble-cannon-targets{position:absolute;z-index:4;inset:0 0 25%;pointer-events:none}.bubble-cannon-target{position:absolute;left:var(--bubble-x);top:var(--bubble-y);display:grid;place-items:center;width:clamp(82px,18vw,112px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);animation:bubble-cannon-calm 8s ease-in-out var(--bubble-delay) infinite alternate;will-change:transform;isolation:isolate}.bubble-cannon-game[data-motion="floating"] .bubble-cannon-target{animation-name:bubble-cannon-float;animation-duration:6.2s}.bubble-cannon-game[data-motion="playful"] .bubble-cannon-target{animation-name:bubble-cannon-playful;animation-duration:5.1s}.bubble-cannon-scene.is-slowed .bubble-cannon-target{animation-duration:9.2s!important}.bubble-cannon-target-fallback{position:absolute;z-index:1;inset:0;border:3px solid #fffce6;border-radius:50%;background:radial-gradient(circle at 32% 24%,#fff 0 5%,#ffffff77 6% 13%,transparent 14%),linear-gradient(145deg,#c9f6ffcc,#8ed9eb99 47%,#ba8ce099);box-shadow:inset -9px -12px 20px #6177c32f,0 8px 12px #3261782d,0 0 0 2px #75c7d488}.bubble-cannon-target-image{position:absolute;z-index:2;inset:-7%;width:114%;height:114%;object-fit:contain;opacity:0;filter:drop-shadow(0 8px 7px #17495f42)}.bubble-cannon-target-image.is-loaded{opacity:1}.bubble-cannon-target.has-bubble-cannon-art .bubble-cannon-target-fallback{opacity:0}.bubble-cannon-target-content{position:relative;z-index:4;display:grid;place-items:center;width:66%;height:66%;color:#234e63;font-size:clamp(36px,9vw,55px);font-weight:1000;line-height:1;text-shadow:0 2px 0 #fff}.bubble-cannon-game:not([data-round="words"]) .bubble-cannon-target.has-bubble-cannon-art .bubble-cannon-target-content{opacity:0}.bubble-cannon-game[data-round="words"] .bubble-cannon-target-image{-webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,transparent 0 70%,#000 74%);mask-image:radial-gradient(circle closest-side at 50% 50%,transparent 0 70%,#000 74%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.bubble-cannon-game[data-round="words"] .bubble-cannon-target-content{width:74%;height:74%;border-radius:50%;overflow:hidden;font-size:clamp(58px,13vw,80px);filter:drop-shadow(0 3px 2px #fff);text-shadow:none}.bubble-cannon-target.is-near::after,.bubble-cannon-target.is-hint::after{content:"";position:absolute;z-index:0;inset:-13%;border-radius:50%;border:4px solid #ffef74aa;box-shadow:0 0 20px 8px #fff17a77;animation:bubble-cannon-glow .75s ease-in-out infinite alternate}.bubble-cannon-target.is-hint-strong::after{inset:-20%;border-width:7px;box-shadow:0 0 27px 12px #fff06aaa}.bubble-cannon-hint-image{position:absolute;z-index:0;inset:-35%;width:170%;height:170%;object-fit:contain;opacity:0}.bubble-cannon-target.is-hint .bubble-cannon-hint-image.is-loaded{opacity:.62}.bubble-cannon-target.is-wrong{animation:bubble-cannon-wrong .36s ease both!important}.bubble-cannon-target.is-hit{animation:bubble-cannon-pop .48s ease both!important}
.bubble-cannon-aim-line{position:absolute;z-index:7;left:50%;top:79%;width:0;height:4px;border-radius:999px;background:repeating-linear-gradient(90deg,#fff 0 13px,transparent 13px 21px);filter:drop-shadow(0 2px 2px #245d6e88);transform:rotate(var(--aim-angle,-90deg));transform-origin:0 50%;opacity:0;pointer-events:none}.bubble-cannon-scene.is-aiming .bubble-cannon-aim-line{opacity:.88}
.bubble-cannon-projectile{position:absolute;z-index:10;left:50%;top:79%;display:none;width:31px;height:31px;transform:translate(-50%,-50%);pointer-events:none}.bubble-cannon-projectile>span{position:absolute;z-index:2;inset:0;border:3px solid #fffbd0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 9%,#ffe363 12% 42%,#ef933b 70%);box-shadow:0 0 14px #ffe06b}.bubble-cannon-projectile-image,.bubble-cannon-projectile-trail{position:absolute;opacity:0;object-fit:contain}.bubble-cannon-projectile-image{z-index:3;inset:-24%;width:148%;height:148%;filter:drop-shadow(0 0 8px #d8ffff)}.bubble-cannon-projectile-trail{z-index:1;right:42%;top:50%;width:92px;height:44px;transform:translateY(-50%) rotate(var(--shot-angle,0deg));transform-origin:100% 50%;filter:drop-shadow(0 0 5px #ffe869)}.bubble-cannon-projectile-image.is-loaded,.bubble-cannon-projectile-trail.is-loaded{opacity:1}.bubble-cannon-projectile.has-projectile-art>span{opacity:0}
.bubble-cannon-control{--cannon-size:clamp(152px,29vw,190px);position:absolute;z-index:8;left:50%;bottom:-2%;width:56%;height:38%;transform:translateX(-50%);cursor:crosshair;outline:none}.bubble-cannon-control:focus-visible{filter:drop-shadow(0 0 9px #fff06a)}.bubble-cannon-barrel{position:absolute;z-index:2;left:50%;top:44%;width:var(--cannon-size);height:var(--cannon-size);transform:translate(-39%,-83%) rotate(calc(var(--barrel-angle,0deg) - 40deg));transform-origin:39% 83%;transition:transform .08s linear}.bubble-cannon-pivot-point,.bubble-cannon-muzzle-point{position:absolute;z-index:8;width:1px;height:1px;pointer-events:none}.bubble-cannon-pivot-point{left:39%;top:83%}.bubble-cannon-muzzle-point{left:83%;top:29%}.bubble-cannon-barrel-fallback{position:absolute;z-index:1;left:29%;top:8%;width:25%;height:80%;border:4px solid #31586c;border-radius:22px 22px 12px 12px;background:linear-gradient(90deg,#5e92a8,#b6e4e8 45%,#5b8da3);box-shadow:inset -6px 0 7px #2e596955,0 6px 0 #284e5f;transform:rotate(40deg);transform-origin:50% 94%}.bubble-cannon-barrel-image{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;filter:drop-shadow(0 7px 5px #173d4245)}.bubble-cannon-barrel-image.is-loaded{opacity:1}.bubble-cannon-barrel.has-bubble-cannon-art>.bubble-cannon-barrel-fallback{opacity:0}.bubble-cannon-barrel.is-recoiling{animation:bubble-cannon-recoil .28s ease}.bubble-cannon-base{position:absolute;z-index:3;left:50%;top:44%;width:var(--cannon-size);height:var(--cannon-size);transform:translate(-50%,-26%)}.bubble-cannon-base>span{position:absolute;inset:26% 15% 9%;border:5px solid #31586c;border-radius:50% 50% 22% 22%;background:radial-gradient(circle at 50% 30%,#b9e7e7,#5791a9 62%,#396b7e);box-shadow:0 7px 0 #284e5f}.bubble-cannon-base-image{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;filter:drop-shadow(0 8px 7px #173d4240)}.bubble-cannon-base-image.is-loaded{opacity:1}.bubble-cannon-base.has-bubble-cannon-art>span{opacity:0}.bubble-cannon-muzzle-flash{position:absolute;z-index:6;left:83%;top:29%;display:block;width:70%;height:54%;opacity:0;transform:translate(-23%,-50%) rotate(-49deg);transform-origin:23% 50%;pointer-events:none}.bubble-cannon-muzzle-flash.is-active{opacity:1}.bubble-cannon-muzzle-flash>i{position:absolute;inset:18% 52% 18% 0;background:#ffec66;clip-path:polygon(50% 0,61% 32%,89% 13%,74% 42%,100% 50%,69% 61%,87% 90%,58% 73%,50% 100%,41% 70%,13% 90%,30% 59%,0 50%,32% 40%,11% 12%,40% 31%);filter:drop-shadow(0 0 10px #ffbd46)}.bubble-cannon-flash-image{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}.bubble-cannon-flash-image.is-loaded{opacity:1}.bubble-cannon-muzzle-flash.has-bubble-cannon-art>i{opacity:0}
.bubble-cannon-marius{position:absolute;z-index:6;left:2%;bottom:3%;width:clamp(78px,22%,128px);height:35%;pointer-events:none}.bubble-cannon-marius .character-stage{background:transparent}.bubble-cannon-marius .bubble-cannon-marius-stage{width:100%;height:100%}.bubble-cannon-character-fallback{display:grid;place-items:end center;width:100%;height:100%;font-size:76px}
.bubble-cannon-feedback{position:absolute;z-index:12;left:50%;bottom:5px;width:max-content;max-width:88%;min-height:26px;margin:0;padding:5px 12px;border-radius:999px;background:#ffffffe8;color:#245b63;font-size:12px;font-weight:900;text-align:center;transform:translateX(-50%);pointer-events:none}.bubble-cannon-controls{margin:8px 0 0;color:#688084;font-size:12px;font-weight:800;text-align:center}.bubble-cannon-effects{position:absolute;z-index:13;inset:0;overflow:hidden;pointer-events:none}.bubble-cannon-burst{position:absolute;left:var(--burst-x);top:var(--burst-y);width:116px;height:116px;transform:translate(-50%,-50%);animation:bubble-cannon-burst .58s ease-out forwards}.bubble-cannon-burst i{position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:31px 0 #ffe45e,-31px 0 #ff8b81,0 31px #75d69a,0 -31px #a789df,22px 22px #fff0aa,-22px -22px #67d7df}.bubble-cannon-burst.is-wrong i{background:#c8e1e4;box-shadow:22px 0 #a9cdd1,-22px 0 #dae8ea,0 22px #b8d3d6,0 -22px #dcebed}.bubble-cannon-effect-image{position:absolute;inset:-18%;width:136%;height:136%;object-fit:contain;opacity:0}.bubble-cannon-effect-image.is-loaded{opacity:1}
.bubble-cannon-game.is-complete{min-height:560px;padding:28px 20px;text-align:center;border:3px solid #fff;border-radius:30px;background:linear-gradient(#a9e7f5,#f8efba 65%,#9dcc70);box-shadow:0 14px 32px rgba(42,94,102,.2);overflow:hidden}.bubble-cannon-finish-art{position:relative;width:190px;height:245px;margin:54px auto 0}.bubble-cannon-finish-art .bubble-cannon-marius-stage{width:100%;height:100%}.bubble-cannon-reward-stars{position:absolute;z-index:4;inset:-58px -72px auto;height:100px}.bubble-cannon-reward-stars span{position:relative;display:inline-block;margin:0 3px;color:#ffd354;font-size:45px;text-shadow:0 2px #b77915,0 0 13px #fff5a8;animation:bubble-cannon-star 1.5s ease both}.bubble-cannon-reward-stars span:nth-child(2){animation-delay:.12s;font-size:52px}.bubble-cannon-reward-stars span:nth-child(3){animation-delay:.24s}.bubble-cannon-reward-stars i{position:absolute;left:50%;top:50%;width:6px;height:6px;background:#fff8bd;box-shadow:0 0 9px 3px #ffd85c;animation:bubble-cannon-spark 1.1s ease-out calc(var(--spark,0)*.12s) infinite}.bubble-cannon-reward-stars i:nth-of-type(2){--spark:1;left:22%;top:30%}.bubble-cannon-reward-stars i:nth-of-type(3){--spark:2;left:78%;top:25%}.bubble-cannon-reward-stars i:nth-of-type(4){--spark:3;left:30%;top:83%}.bubble-cannon-reward-stars i:nth-of-type(5){--spark:4;left:70%;top:78%}.bubble-cannon-reward-stars i:nth-of-type(6){--spark:5;left:52%;top:10%}.bubble-cannon-game.is-complete h1{margin:18px 0 7px}.bubble-cannon-game.is-complete p{margin:0 auto 18px;max-width:410px}.bubble-cannon-finish-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
body.bubble-cannon-active{overscroll-behavior:none}body.bubble-cannon-active .app{max-width:790px}body.bubble-cannon-active .footer{display:none}
.bubble-cannon-control{touch-action:none}
[data-bubble-cannon-asset]{pointer-events:none;-webkit-user-drag:none;user-select:none}.bubble-cannon-target-image,.bubble-cannon-barrel-image,.bubble-cannon-base-image,.bubble-cannon-flash-image,.bubble-cannon-projectile-image,.bubble-cannon-projectile-trail,.bubble-cannon-effect-image,.bubble-cannon-hint-image,.bubble-cannon-cloud-image,.bubble-cannon-leaves{transition:opacity .16s}
@keyframes bubble-cannon-calm{from{transform:translate(-50%,-50%) translate(-3px,2px)}to{transform:translate(-50%,-50%) translate(4px,-3px)}}@keyframes bubble-cannon-float{0%{transform:translate(-50%,-50%) translate(-8px,7px)}50%{transform:translate(-50%,-50%) translate(7px,-9px)}100%{transform:translate(-50%,-50%) translate(9px,5px)}}@keyframes bubble-cannon-playful{0%{transform:translate(-50%,-50%) translate(-10px,8px)}50%{transform:translate(-50%,-50%) translate(8px,-11px)}100%{transform:translate(-50%,-50%) translate(11px,6px)}}@keyframes bubble-cannon-glow{to{opacity:.7;transform:scale(1.08)}}@keyframes bubble-cannon-progress-complete{45%{transform:translateY(-6px) scale(1.12)}75%{transform:translateY(1px) scale(.96)}to{transform:translateY(0) scale(1)}}@keyframes bubble-cannon-wrong{20%{transform:translate(-50%,-50%) rotate(-12deg)}45%{transform:translate(-50%,-50%) rotate(12deg)}70%{transform:translate(-50%,-50%) rotate(-8deg)}to{transform:translate(-50%,-50%) rotate(0)}}@keyframes bubble-cannon-pop{35%{transform:translate(-50%,-50%) scale(1.24)}to{transform:translate(-50%,-50%) scale(.16);opacity:0}}@keyframes bubble-cannon-recoil{45%{transform:translate(-39%,-83%) rotate(calc(var(--barrel-angle,0deg) - 40deg)) scale(.94)}to{transform:translate(-39%,-83%) rotate(calc(var(--barrel-angle,0deg) - 40deg)) scale(1)}}@keyframes bubble-cannon-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}to{opacity:0;transform:translate(-50%,-50%) scale(1.48) rotate(13deg)}}@keyframes bubble-cannon-star{0%{opacity:0;transform:translateY(70px) scale(.3) rotate(-15deg)}60%{opacity:1;transform:translateY(0) scale(1.15) rotate(4deg)}to{opacity:1;transform:scale(1)}}@keyframes bubble-cannon-spark{0%,100%{opacity:0;transform:rotate(45deg) scale(.2)}35%{opacity:1;transform:rotate(90deg) scale(1)}}
@media(max-width:520px){body.bubble-cannon-active .topbar{min-height:54px}.bubble-cannon-game{margin-top:-4px}.bubble-cannon-header h1{font-size:24px}.bubble-cannon-header p{font-size:10px}.bubble-cannon-task{padding:8px 9px 8px 12px}.bubble-cannon-task strong{font-size:15px}.bubble-cannon-repeat span{display:none}.bubble-cannon-repeat{width:45px;padding:9px;justify-content:center}.bubble-cannon-scene{height:min(65svh,570px);min-height:410px;border-radius:24px}.bubble-cannon-background{object-position:50% 58%}.bubble-cannon-target{width:clamp(76px,24vw,92px)}.bubble-cannon-game[data-round="words"] .bubble-cannon-target-content{font-size:clamp(56px,17vw,68px)}.bubble-cannon-control{--cannon-size:152px;width:58%;height:35%}.bubble-cannon-cloud-image-one{left:-2%;width:28%}.bubble-cannon-cloud-image-two{right:-2%;width:24%}.bubble-cannon-leaves{width:31%;opacity:.68}.bubble-cannon-marius{left:0;width:clamp(68px,23%,98px);height:30%}.bubble-cannon-controls{font-size:11px}}
@media(max-height:700px){.bubble-cannon-scene{height:53svh;min-height:340px}.bubble-cannon-task small,.bubble-cannon-controls{display:none}.bubble-cannon-target{width:74px}.bubble-cannon-game[data-round="words"] .bubble-cannon-target-content{font-size:56px}.bubble-cannon-control{height:36%}.bubble-cannon-marius{height:33%}.bubble-cannon-game.is-complete{min-height:440px}.bubble-cannon-finish-art{width:145px;height:188px}}
@media(orientation:landscape) and (max-height:500px){body.bubble-cannon-active .app{max-width:1000px}.bubble-cannon-game:not(.is-complete){display:grid;grid-template-columns:minmax(235px,.72fr) minmax(390px,1fr);grid-template-rows:auto auto 1fr;gap:8px 14px}.bubble-cannon-header,.bubble-cannon-progress{grid-column:1}.bubble-cannon-task{grid-column:1;align-self:start}.bubble-cannon-task strong{font-size:15px}.bubble-cannon-repeat{width:45px;padding:9px;justify-content:center}.bubble-cannon-repeat span{display:none}.bubble-cannon-scene{grid-column:2;grid-row:1/4;height:calc(100svh - 82px);min-height:310px}.bubble-cannon-background{object-position:50% 55%}.bubble-cannon-control{--cannon-size:150px;height:39%}.bubble-cannon-marius{width:82px;height:29%}.bubble-cannon-controls{display:none}.bubble-cannon-target{width:76px}}
@media(prefers-reduced-motion:reduce){.bubble-cannon-target,.bubble-cannon-target.is-near::after,.bubble-cannon-target.is-hint::after,.bubble-cannon-hit-progress.is-complete>span.is-filled,.bubble-cannon-barrel.is-recoiling,.bubble-cannon-burst,.bubble-cannon-reward-stars span,.bubble-cannon-reward-stars i{animation:none!important}}