/* The atlas is fetched only when a Bubble Pop sprite is actually rendered. */
.bpSprite{display:block;background-image:url('assets/bubble-atlas-v1.webp');background-repeat:no-repeat;background-size:400% 400%;background-position:calc(var(--bp-col)*100%/3) calc(var(--bp-row)*100%/3);aspect-ratio:1;pointer-events:none}
.bpGame{background:radial-gradient(ellipse at top left,#ffebf4,transparent 50%),linear-gradient(135deg,#e4f7ff,#f4eeff 65%,#e9fff5);font-family:'Trebuchet MS','Segoe UI',system-ui,sans-serif}
.bpGame .stage{min-height:calc(100svh - 98px);padding:14px 22px 16px;border:3px solid #fff;border-radius:32px;background:#fffafef0;box-shadow:0 12px 28px #9a83b21a;justify-content:flex-start;gap:8px}
.bpGame .gameMeta strong{color:#7255a8}.bpGame .progress i.on{background:linear-gradient(90deg,#ffc3d5,#c3a3f5)}
.bpIntro{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;min-height:calc(100svh - 160px);width:100%;gap:12px;color:#69508d}
.bpWelcomeWhale{width:clamp(150px,25vh,240px);filter:drop-shadow(0 10px 10px #94ccda30);animation:bpFloat 3s ease-in-out infinite}
.bpIntro h1{font-size:clamp(40px,7vw,68px);line-height:1;margin:0;color:#6f53a4;letter-spacing:-2px;text-shadow:0 3px #fff}
.bpIntro>p{margin:0;font-weight:800;font-size:17px;line-height:1.5}.bpIntro .bpEyebrow{font-size:11px;letter-spacing:2px;color:#a284ac}
.bpStart{position:relative;border:3px solid white;border-radius:22px;background:linear-gradient(#c7b0fa,#a087e3);box-shadow:0 5px 0 #8971c3,0 8px 18px #9d8ab633;color:#fff;font-weight:900;font-size:23px;min-height:58px;padding:12px 36px;cursor:pointer;margin:12px 0}
.bpStartStars{position:absolute;right:-23px;top:-20px;width:58px}
.bpHud{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(100%,640px);flex:none}
.bpRound{min-width:72px;display:flex;align-items:center;gap:9px;color:#9d7eb6}.bpRound>span{font-size:10px;letter-spacing:1px;font-weight:900}.bpRound>b{font-size:24px;color:#7255a8}.bpRound small{font-size:13px;color:#b29ac0}
.bpListen,.bpPause{border:0;display:flex;align-items:center;gap:7px;background:transparent;cursor:pointer;padding:0;color:#7e62a2;font-size:12px;font-weight:900;min-height:44px}
.bpListen>.bpSprite,.bpPause>.bpSprite{width:46px}.bpPause:disabled{opacity:.6}
.bpPrompt{margin:0;min-height:23px;font-size:15px;font-weight:800;line-height:1.4;color:#88749b;text-align:center}
.bpArena{isolation:isolate;width:min(100%,calc((100svh - 260px)*600/440),640px);max-width:none;aspect-ratio:600/440;border:4px solid #fff;border-radius:30px;background:linear-gradient(#c6edff,#fce9f7);box-shadow:0 5px 0 #dad0ed,0 9px 22px #b3a1c530;overflow:hidden;flex:none;touch-action:none;cursor:crosshair}
.bpBackdrop{position:absolute;inset:0;z-index:-2;opacity:.8;pointer-events:none}.bpBackdrop>.bpSprite{width:100%;height:100%;aspect-ratio:auto}
.bpGuide{z-index:1;pointer-events:none}.bpGuide path{stroke:#fff;stroke-width:5;stroke-dasharray:2 13;stroke-linecap:round;fill:none;filter:drop-shadow(0 1px 2px #9377a7);opacity:.8}
.bpHolding .bpGuide path{stroke:#fffaad;stroke-width:7;opacity:1}.bpHolding{box-shadow:0 0 0 4px #e3d2ff,0 5px 0 #dad0ed}
.bpBubble{width:24%;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible;z-index:3}
.bpBubbleFrame{position:absolute;inset:-7%;width:114%;height:114%;z-index:1;filter:drop-shadow(0 3px 3px #927ab333)}
.bpWordPicture{position:relative;display:grid;place-items:center;width:68%;aspect-ratio:1;overflow:hidden;border-radius:50%;z-index:2;background:#fffdf7;box-shadow:0 1px 5px #ffffffa8}
.bpBubble .vocabArt.small{width:100%;height:100%;max-width:none;padding:0;border-radius:50%;background-color:#fffdf7;filter:none;object-fit:contain}
.bpBubble.aimed{box-shadow:none}.bpBubble.aimed .bpBubbleFrame{filter:drop-shadow(0 0 5px white) drop-shadow(0 0 3px #b996ef);transform:scale(1.06)}
.bpBubble.popped{transform:translate(-50%,-50%) scale(1.3);opacity:0}.bpWrong{animation:bpWiggle .35s}
.bpLauncher{position:absolute;left:50%;top:86.36%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:2}
.bpWhale{width:100%;height:100%;filter:drop-shadow(0 5px 4px #619dba30)}
.bpNozzle{position:absolute;left:50%;top:48%;width:12%;height:38%;border:2px solid white;border-radius:99px;background:linear-gradient(90deg,#dfcfff,#f2eaff,#bea1f1);transform-origin:50% 100%;transform:translate(-50%,-100%);z-index:-1}
.bpProjectile{background:radial-gradient(circle at 30% 25%,#fff,#ffdeee 55%,#cab6ff);border:2px solid #fff;box-shadow:0 0 7px #fff9bd;width:5.5%;z-index:4}.bpProjectile.flying{transition:none}
.bpEffect{position:absolute;left:50%;top:28%;transform:translate(-50%,-50%);width:25%;aspect-ratio:1;z-index:5;pointer-events:none}.bpEffect>.bpSprite{width:100%;height:100%}.bpEffectGood{animation:bpPop .6s ease-out}.bpSuccessStars{position:absolute;inset:0;transform:scale(1.3)}
.bpControls{width:min(100%,640px);text-align:center;flex:none}.bpKeys{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;font-size:12px;color:#8c749d;line-height:1.5}.bpKeys>span{white-space:nowrap}.bpKeys kbd{display:inline-grid;place-items:center;min-width:29px;min-height:27px;padding:3px 7px;margin-right:2px;border:1px solid #ded1ec;border-bottom-width:3px;border-radius:9px;background:#fff;color:#8261a2;font:900 13px 'Segoe UI',sans-serif}
.bpTouchHint{display:none;margin:0;font-size:14px;font-weight:900;line-height:1.5;color:#8b6bab}
.bpAimControls{grid-template-columns:40px minmax(80px,1fr) 40px auto;gap:8px;margin-top:8px;max-width:none}.bpAimControls .aimButton{width:40px;height:40px;border:2px solid white;box-shadow:0 2px 0 #d7c8e6;border-radius:13px;background:#f4ebff;color:#9c7cb7;font-size:20px}.bpAngle{width:100%;accent-color:#bea0e5}.bpFire{border:2px solid white;border-radius:15px;background:#c6ecdf;color:#638f83;box-shadow:0 3px 0 #9dc9b9;font-size:14px;font-weight:900;min-height:43px;padding:8px 16px;cursor:pointer}
.bpPauseLayer{position:absolute;inset:0;display:grid;place-items:center;z-index:10;background:#f4ebf5b0;backdrop-filter:blur(4px)}.bpPauseLayer>div{padding:20px;border:3px solid white;border-radius:25px;background:#fff8fd;box-shadow:0 5px 20px #aa91bb30;display:flex;flex-direction:column;align-items:center}.bpPauseLayer .bpSprite{width:60px}.bpPauseLayer h2{font-size:25px;color:#8d6ba8;margin:10px 0 0}
.bpFinishWhale{width:clamp(160px,32vh,260px);margin:auto;filter:drop-shadow(0 10px 10px #9ab9d329)}.bpGame .finishMascot{width:auto;max-width:100%;animation:none}.bpGame .finishPanel{margin:auto}.bpGame .rating{font-size:clamp(44px,8vw,65px);color:#f2ca71;text-shadow:0 3px #e8b955}
.bpThreeStarFinish .rating{visibility:hidden;height:0;font-size:0;margin:0}
@media(pointer:coarse),(max-width:600px){.bpKeys{display:none}.bpTouchHint{display:block}.bpAimControls{display:none}}
@media(max-width:520px){.bpGame .stage{padding:11px 11px 13px;min-height:calc(100svh - 72px);gap:9px;border-radius:26px}.bpArena{width:100%;border-radius:24px}.bpHud{gap:10px}.bpRound{gap:5px;min-width:63px}.bpRound>b{font-size:22px}.bpListen>.bpSprite,.bpPause>.bpSprite{width:40px}.bpPrompt{font-size:13px}.bpKeys{gap:11px;font-size:10px}.bpKeys kbd{min-width:26px;font-size:12px}.bpAimControls{gap:7px;grid-template-columns:38px minmax(45px,1fr) 38px auto}.bpAimControls .aimButton{width:38px;height:38px}.bpFire{padding:7px 10px;font-size:12px;min-height:40px;grid-column:auto}.bpIntro>p{font-size:15px}.bpIntro h1{font-size:44px}.bpStart{font-size:22px}.bpIntro{gap:13px;min-height:calc(100svh - 130px)}}
@keyframes bpFloat{50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes bpWiggle{25%{translate:-5px 0}75%{translate:5px 0}}
@keyframes bpPop{from{opacity:0;scale:.5}40%{opacity:1;scale:1.2}to{opacity:1;scale:1}}
@media(prefers-reduced-motion:reduce){.bpWelcomeWhale,.bpEffectGood,.bpWrong{animation:none}}