.bubble-game{min-height:calc(100vh - 92px);padding:18px clamp(16px,4vw,60px) 40px}.bubble-ocean{height:680px;position:relative;overflow:hidden;border:8px solid #ffffff24;border-radius:40px;background:radial-gradient(circle at 50% 15%,#57e8e6 0,transparent 28%),linear-gradient(180deg,#1f9fd2 0%,#1675ba 42%,#114a91 72%,#092f68 100%);box-shadow:var(--shadow);isolation:isolate}.ocean-glow{position:absolute;inset:0;background:linear-gradient(110deg,transparent 18%,#ffffff16 18% 22%,transparent 22% 31%,#ffffff0c 31% 35%,transparent 35%);pointer-events:none}.bubble-instructions{position:absolute;z-index:5;left:50%;top:24px;transform:translateX(-50%);width:min(620px,88%);text-align:center;color:white;text-shadow:0 2px 10px #06376a}.bubble-instructions .eyebrow{color:#c7fff6}.bubble-instructions h1{font-size:clamp(30px,5vw,52px)}.bubble-instructions h1 strong{display:inline-grid;place-items:center;background:var(--yellow);color:var(--navy);width:64px;height:64px;border-radius:20px;text-shadow:none;box-shadow:0 7px 0 #d79c09}.bubble-instructions p{margin:12px 0;color:#e6fbff;font-weight:700}.bubble-counter{display:inline-flex;align-items:baseline;gap:5px;background:#082a5ec7;border:2px solid #ffffff33;border-radius:18px;padding:7px 16px;backdrop-filter:blur(8px)}.bubble-counter span{font:700 30px Fredoka;color:var(--yellow)}.bubble-counter small{font-weight:900}.bubble-field{position:absolute;inset:180px 0 54px;z-index:3}.play-bubble{--size:80px;position:absolute;left:var(--left);bottom:-130px;width:var(--size);height:var(--size);border-radius:50%;border:2px solid #ffffffc9;background:radial-gradient(circle at 30% 24%,#fff 0 5%,#ffffff6b 6% 13%,transparent 14%),radial-gradient(circle at 65% 72%,transparent 0 45%,#fff5 58%,transparent 67%),linear-gradient(145deg,#aafffa55,#3ce1e42b);box-shadow:inset 0 0 18px #fff8,0 8px 20px #052c5970;cursor:pointer;animation:bubble-rise var(--duration) linear var(--delay) infinite}.play-bubble.gold{filter:hue-rotate(300deg) saturate(1.5)}.play-bubble.coral{filter:hue-rotate(140deg) saturate(1.5)}.play-bubble.violet{filter:hue-rotate(210deg) saturate(1.5)}.play-bubble span{color:white;font-size:22px;text-shadow:0 2px 8px #087}.play-bubble i{position:absolute;width:9px;height:22px;border-radius:50%;background:#fff9;left:20%;top:16%;transform:rotate(40deg)}.play-bubble:hover{filter:brightness(1.22)}.play-bubble.popped{animation:bubble-pop .38s ease-out forwards}.bubble-message{position:absolute;z-index:6;left:50%;bottom:75px;transform:translateX(-50%);background:white;color:var(--navy);padding:13px 24px;border-radius:18px;font-weight:900;box-shadow:var(--soft);white-space:nowrap}.bubble-message.success{background:var(--yellow);font-size:20px}.sea-floor{position:absolute;z-index:4;bottom:-5px;left:0;right:0;display:flex;justify-content:space-around;align-items:end;font-size:55px;filter:drop-shadow(0 -7px 15px #051f4566)}
@keyframes bubble-rise{0%{transform:translate(0,0) scale(.86)}25%{transform:translate(22px,-150px) scale(1)}50%{transform:translate(-15px,-310px) scale(.94)}75%{transform:translate(18px,-470px) scale(1.04)}100%{transform:translate(-8px,-650px) scale(.9)}}@keyframes bubble-pop{0%{transform:scale(1)}65%{transform:scale(1.45);opacity:.7}100%{transform:scale(0);opacity:0}}.bubble-finish{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:white;padding:30px}.bubble-finish img{width:220px;height:220px;object-fit:contain;filter:drop-shadow(0 20px 20px #082e66)}.bubble-finish h1{font-size:clamp(45px,7vw,76px)}.bubble-finish p{font-size:19px}.finish-bubbles{position:absolute;inset:30px;font-size:60px;word-spacing:15vw;opacity:.6;animation:float 3s ease-in-out infinite}
@media(max-width:560px){.bubble-ocean{height:650px;border-radius:28px}.bubble-instructions{top:18px}.bubble-instructions h1 strong{width:49px;height:49px;border-radius:15px}.bubble-field{inset:190px 0 50px}.bubble-message{bottom:68px}.sea-floor{font-size:39px}}
.game-pills{position:absolute;z-index:8;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;pointer-events:none}.game-pills span{background:#072a5dbd;border:1px solid #ffffff38;color:white;padding:9px 13px;border-radius:16px;font-size:13px;font-weight:900;backdrop-filter:blur(8px)}#heartPill{color:#ff8d9a;letter-spacing:3px}.bubble-instructions h1 b{color:var(--yellow);text-transform:capitalize}.play-bubble.bonus span,.play-bubble.rainbow span{display:grid;place-items:center;width:100%;height:100%;font-size:28px;color:#fff7a8}.play-bubble.rainbow{border-width:4px;filter:none;background:radial-gradient(circle at 30% 24%,#fff 0 6%,transparent 7%),conic-gradient(#ff7188aa,#ffd84aaa,#66e4a7aa,#55bff8aa,#a77affaa,#ff7188aa);box-shadow:0 0 25px #fff,0 0 48px #79eeff}.bubble-message.oops{background:#ffd9dc;color:#9b3040;animation:shake .35s}.reward-chest{font-size:105px;animation:chest-bounce 1.1s ease-in-out infinite;filter:drop-shadow(0 20px 18px #061d4670)}.reward-row{display:flex;gap:12px;margin:20px 0}.reward-row span{min-width:110px;background:#ffffff18;border:1px solid #ffffff2f;border-radius:20px;padding:14px;backdrop-filter:blur(8px)}.reward-row b,.reward-row small{display:block}.reward-row b{font:700 30px Fredoka;color:var(--yellow)}.reward-row small{text-transform:uppercase;font-size:10px;letter-spacing:.1em}@keyframes chest-bounce{50%{transform:translateY(-12px) rotate(3deg)}}
@media(max-width:560px){.game-pills{top:12px;left:10px;right:10px}.game-pills span{font-size:11px;padding:7px 9px}.reward-row{gap:6px}.reward-row span{min-width:88px;padding:10px}.reward-row b{font-size:24px}}