that play-bubbles.js appends to . Mirrors the aquarium's .bubbles/.bubble effect (aquarium.css) with its own class names so nothing collides; the `rise` @keyframes are reused directly from aquarium.css (keyframes are global and aquarium.css always loads before this file). Stacking: body has no stacking context, so a negative-z child of paints ABOVE the root background but BELOW all content: body::before z -2 lagoon water gradient (glass-skin.css) body::after z -1 ambient god-rays (glass-skin.css) .mc-bubbles z -1 ← this layer (tree order: just under ::after) all content z 0+ cards, header, modals — always on top Visibility is scoped per tab via the body[data-active-tab] attribute the app already maintains (times-tables.js updateUI). Shown on Practice / Play / Rewards; hidden on Progress (the real aquarium owns that tab). Compositor notes: only opacity / transform / bottom are animated (the same properties the aquarium's `rise` animates). No box-shadow is used — flat-experiment.css nukes box-shadows globally — so each bubble reads through translucent fill + hairline border alone. ══════════════════════════════════════════════════════════════════════════ */ .mc-bubbles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; display: none; } /* only where the playing cards / shop live — never on Progress */ body[data-active-tab="practice"] .mc-bubbles, body[data-active-tab="games"] .mc-bubbles, body[data-active-tab="rewards"] .mc-bubbles { display: block; } /* one bubble — the aquarium recipe (aquarium.css .bubble), minus the box-shadow inner glow; a soft radial highlight fakes it instead. Slightly stronger than the aquarium's 0.4/0.2 alphas: out here the bubbles mostly peek through the narrow gaps between opaque cards, so they need a touch more presence to read at all. */ .mc-bubble { position: absolute; bottom: 0; border-radius: 50%; /* soft, out-of-focus bubble: no hard border, the gradient feathers to fully transparent at the rim, and a small blur softens the whole bubble */ background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.34) 0%, rgba(212, 238, 247, 0.2) 42%, rgba(212, 238, 247, 0.06) 72%, rgba(212, 238, 247, 0) 100%); -webkit-filter: blur(1.4px); filter: blur(1.4px); opacity: 0; animation: rise 20s linear infinite; /* global keyframes from aquarium.css; slower + more transparent per request */ } /* varied sizes / lanes / speeds; negative delays pre-populate the water so the effect is already mid-flow when a tab appears */ .mc-bubble:nth-child(1) { width: 12px; height: 12px; left: 6%; animation-duration: 20s; animation-delay: -2s; } .mc-bubble:nth-child(2) { width: 18px; height: 18px; left: 14%; animation-duration: 25s; animation-delay: -9s; } .mc-bubble:nth-child(3) { width: 10px; height: 10px; left: 22%; animation-duration: 17s; animation-delay: -4.5s; } .mc-bubble:nth-child(4) { width: 24px; height: 24px; left: 29%; animation-duration: 29s; animation-delay: -12s; } .mc-bubble:nth-child(5) { width: 14px; height: 14px; left: 37%; animation-duration: 19s; animation-delay: -6.5s; } .mc-bubble:nth-child(6) { width: 11px; height: 11px; left: 45%; animation-duration: 23s; animation-delay: -1s; } .mc-bubble:nth-child(7) { width: 16px; height: 16px; left: 52%; animation-duration: 16s; animation-delay: -7.8s; } .mc-bubble:nth-child(8) { width: 21px; height: 21px; left: 60%; animation-duration: 27s; animation-delay: -13.5s; } .mc-bubble:nth-child(9) { width: 12px; height: 12px; left: 67%; animation-duration: 21s; animation-delay: -3.2s; } .mc-bubble:nth-child(10) { width: 15px; height: 15px; left: 74%; animation-duration: 18s; animation-delay: -8.7s; } .mc-bubble:nth-child(11) { width: 10px; height: 10px; left: 81%; animation-duration: 24s; animation-delay: -5.4s; } .mc-bubble:nth-child(12) { width: 19px; height: 19px; left: 88%; animation-duration: 26s; animation-delay: -11s; } .mc-bubble:nth-child(13) { width: 13px; height: 13px; left: 94%; animation-duration: 19s; animation-delay: -0.5s; } .mc-bubble:nth-child(14) { width: 28px; height: 28px; left: 3%; animation-duration: 30s; animation-delay: -15s; } /* accessibility: no drifting motion for users who opt out */ @media (prefers-reduced-motion: reduce) { .mc-bubbles { display: none !important; } }