#bubbleBlastPage {
    --bubble-accent: #087f83;
    --bubble-deep: #174a5b;
    --bubble-ink: #203548;
    --bubble-muted: #627785;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: clamp(10px, 1.25vw, 18px);
    overflow: hidden;
    border-radius: var(--ct-radius-panel);
    background: rgba(0, 116, 119, 0.55);
    box-shadow: 0 12px 30px rgba(0, 61, 69, 0.18);
    color: var(--bubble-ink);
    font-family: "Albert Sans", Arial, Helvetica, sans-serif;
}

#allaround.bubble-blast-modern-mode .centre-column { height: 95%; }
#allaround.bubble-blast-modern-mode .centre-column > .page_title {
    display: flex !important;
    box-sizing: border-box;
    height: 10%;
    padding-inline-start: 0;
}
#allaround.bubble-blast-modern-mode .shared_body { height: 90%; padding-bottom: 0; }
#bubbleBlastPage *, #bubbleBlastPage *::before, #bubbleBlastPage *::after { box-sizing: border-box; }
#bubbleBlastPage button { font: inherit; }

.bubble-blast-main { display: flex; height: 100%; min-height: 0; flex-direction: column; gap: 1.1vh; }
.bubble-blast-summary {
    display: flex; align-items: center; gap: 22px; padding: clamp(9px, 1.35vh, 14px) 20px;
    border: 1px solid rgba(0,128,125,.16); border-radius: var(--ct-radius-card);
    background: linear-gradient(145deg,var(--ct-surface) 0%,var(--ct-surface-soft) 100%);
    box-shadow: var(--ct-shadow-card);
}
.bubble-blast-heading { min-width: 0; flex: 1; }
.bubble-blast-eyebrow { margin: 0 0 3px; color: var(--bubble-accent); font-size: clamp(.62em,1.7vh,.75em); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.bubble-blast-title-row { display: flex; align-items: center; gap: 12px; }
.bubble-blast-title-row h1 { margin: 0; font-size: clamp(1.35em,4.2vh,1.78em); line-height: 1; }
.bubble-blast-heading > p:last-child { margin: .55vh 0 0; color: var(--bubble-muted); font-size: clamp(.67em,1.95vh,.83em); }
.bubble-boost-badge { padding: 5px 10px; border: 1px solid #d0a22f; border-radius: 999px; background: #fff7da; color: #765414; font-size: clamp(.56em,1.55vh,.68em); font-weight: 850; letter-spacing: .025em; }
.bubble-boost-badge[hidden] { display: none; }

.bubble-blast-progress { min-width: 240px; padding: 10px 13px; border-radius: 14px; background: #eaf8f7; transition: transform 180ms ease; }
.bubble-blast-progress > div { display: flex; justify-content: space-between; gap: 18px; color: #486472; font-size: .67em; }
.bubble-blast-progress strong { color: var(--bubble-accent); }
.bubble-blast-progress-track { display: block; height: 8px; margin-top: 7px; overflow: hidden; border: 1px solid #a8d6d4; border-radius: 999px; background: var(--ct-surface); }
.bubble-blast-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#16a6a5,#087f83); transition: width 400ms ease; }
.bubble-blast-progress.is-pulsing { animation: bubble-progress-pulse 420ms ease; }

.bubble-blast-board {
    position: relative; min-height: 0; flex: 1; overflow: hidden; border: 1px solid rgba(0,128,125,.2); border-radius: var(--ct-radius-card);
    background:
        radial-gradient(circle at 50% 40%, rgba(227,255,253,.95), transparent 48%),
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.75) 0 2.5%, transparent 3%),
        radial-gradient(circle at 85% 75%, rgba(255,255,255,.25) 0 8%, transparent 8.5%),
        linear-gradient(145deg,#4dbbbd 0%,#16989d 45%,#087782 100%);
    box-shadow: inset 0 0 75px rgba(16,71,87,.16), 0 9px 26px rgba(37,72,83,.09);
}
.bubble-blast-board::before, .bubble-blast-board::after {
    position: absolute; border: 2px solid rgba(255,255,255,.13); border-radius: 50%; content: ""; pointer-events: none;
}
.bubble-blast-board::before { width: 320px; height: 320px; left: -120px; bottom: -160px; }
.bubble-blast-board::after { width: 230px; height: 230px; right: -80px; top: 12%; }
.bubble-blast-board::before { animation: bubble-background-drift 13s ease-in-out infinite alternate; }
.bubble-blast-board::after { animation: bubble-background-drift 17s ease-in-out -5s infinite alternate-reverse; }
#bubbleBlastPage[data-mode="boost"] .bubble-blast-board { background: radial-gradient(circle at 50% 40%,rgba(229,255,254,.92),transparent 42%),linear-gradient(145deg,#54c2c3,#118e9b 48%,#156b82); }
#bubbleBlastPage[data-mode="boost"] .bubble-blast-board.is-surging { animation: bubble-board-surge 1s ease-in-out 5; }

.bubble-blast-instruction {
    display: flex; position: absolute; z-index: 20; top: 10px; left: 50%; min-height: 48px; align-items: center; gap: 10px;
    padding: 4px 18px 4px 5px; border: 1px solid rgba(0,128,125,.16); border-radius: 999px;
    background: rgba(248,246,240,.96); color: #355769; box-shadow: 0 5px 18px rgba(25,74,86,.16);
    font-size: clamp(.7em,2.05vh,.88em); font-weight: 780; transform: translateX(-50%); white-space: nowrap;
}
.bubble-blast-instruction button { display: grid; width: var(--ct-audio-prompt-size); min-width: var(--ct-audio-prompt-size); height: var(--ct-audio-prompt-size); padding: 0; place-items: center; border: 1px solid rgba(231,51,82,.28); border-radius: 50%; background: #fff3f4; cursor: pointer; }
.bubble-blast-instruction button img { width: var(--ct-audio-inline-size); height: var(--ct-audio-inline-size); pointer-events: none; }
.bubble-blast-instruction button:hover, .bubble-blast-instruction button:focus-visible { outline: 3px solid var(--ct-focus); outline-offset: 2px; transform: scale(1.04); }
.bubble-blast-instruction button:disabled { cursor: wait; opacity: .7; }
.bubble-blast-instruction button.needs-attention { animation: bubble-instruction-attention 1.2s ease-in-out 2; }
.bubble-blast-instruction.needs-guidance { animation: bubble-guidance-pulse 700ms ease-in-out 2; }

.bubble-container { position: absolute; inset: 0; overflow: hidden; }
.bubble-blast-boost-meter { display: flex; position: absolute; z-index: 20; top: 12px; right: 14px; min-width: 132px; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.58); border-radius: 12px; background: rgba(31,75,87,.78); color: #fff; box-shadow: 0 5px 15px rgba(17,61,73,.16); font-size: .62em; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.bubble-blast-boost-meter[hidden] { display: none; }
.bubble-blast-boost-segments { display: grid; flex: 1; grid-template-columns: repeat(4,1fr); gap: 3px; }
.bubble-blast-boost-segments i { width: 17px; height: 8px; border: 1px solid rgba(255,255,255,.42); border-radius: 3px; background: rgba(255,255,255,.12); transition: background 180ms ease,box-shadow 180ms ease,transform 180ms ease; }
.bubble-blast-boost-segments i.is-active { border-color: #ffe08a; background: linear-gradient(90deg,#ffd35c,#ffed9f); box-shadow: 0 0 7px rgba(255,219,101,.55); }
.bubble-blast-boost-meter.is-rising { animation: bubble-meter-rise 440ms ease; }
.bubble-blast-boost-meter.is-dropping { animation: bubble-meter-drop 360ms ease; }
.bubble-blast-surge { position: absolute; z-index: 21; top: 62px; right: 16px; padding: 6px 10px; border: 1px solid rgba(255,231,151,.7); border-radius: 999px; background: rgba(35,77,87,.82); color: #ffecad; font-size: .58em; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; animation: bubble-surge-label 900ms ease-in-out infinite alternate; }
.bubble-blast-surge[hidden] { display: none; }
.gameplay-bubble {
    position: absolute; z-index: 3; left: var(--bubble-x); bottom: calc(var(--bubble-size) * -1.2); width: var(--bubble-size); height: var(--bubble-size);
    min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent;
    cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    backface-visibility: hidden; will-change: transform;
}
.gameplay-bubble-body {
    position: absolute; inset: 0; border: 0; border-radius: 52% 48% 50% 50% / 48% 52% 48% 52%;
    background:
        radial-gradient(circle at 27% 19%,rgba(255,255,255,.9) 0 4%,rgba(255,255,255,.34) 5% 12%,transparent 24%),
        radial-gradient(circle at 76% 24%,rgba(93,170,255,.34),transparent 34%),
        radial-gradient(circle at 20% 79%,rgba(255,177,220,.23),transparent 31%),
        radial-gradient(circle at 78% 82%,rgba(255,230,137,.16),transparent 27%),
        radial-gradient(circle at 48% 46%,rgba(223,255,255,.09) 0 48%,rgba(16,107,133,.22) 76%,rgba(19,70,113,.3) 100%);
    box-shadow:
        inset -8px -11px 19px rgba(22,72,132,.22),
        inset 7px 7px 15px rgba(255,255,255,.31),
        inset 2px -2px 0 rgba(236,158,255,.2),
        0 0 0 1px rgba(105,224,238,.2),
        0 9px 19px rgba(8,64,78,.2);
    animation: bubble-jelly var(--bubble-float-duration) ease-in-out infinite; transform: translateZ(0); transform-origin: 50% 58%;
    backface-visibility: hidden; will-change: transform; pointer-events: none;
}
.gameplay-bubble-body::before { position: absolute; z-index: 2; inset: 0; border: 2px solid transparent; border-top-color: rgba(176,244,255,.82); border-right-color: rgba(137,132,255,.4); border-bottom-color: rgba(255,194,225,.46); border-left-color: rgba(226,255,239,.56); border-radius: inherit; content: ""; filter: blur(.25px); pointer-events: none; }
.gameplay-bubble-body::after { position: absolute; right: 13%; bottom: 10%; width: 34%; height: 15%; border-radius: 50%; background: linear-gradient(90deg,rgba(255,181,227,.17),rgba(149,222,255,.2)); content: ""; filter: blur(4px); transform: rotate(-20deg); pointer-events: none; }
.gameplay-bubble-shine { position: absolute; z-index: 3; top: 12%; left: 17%; width: 31%; height: 15%; border-radius: 50%; background: rgba(255,255,255,.67); filter: blur(1px); transform: rotate(-28deg); animation: bubble-shine-glide var(--bubble-shine-duration) ease-in-out infinite alternate; }
.gameplay-bubble-glint { position: absolute; z-index: 3; right: 13%; bottom: 18%; width: 13%; height: 8%; border-radius: 50%; background: rgba(197,241,255,.38); filter: blur(1px); transform: rotate(-34deg); }
.gameplay-bubble img { display: block; position: absolute; z-index: 1; top: 50%; left: 50%; width: 68%; height: 68%; border-radius: 0; object-fit: contain; object-position: 50% 50%; transform: translate(calc(-50% + var(--art-shift-x,0%)),calc(-50% + var(--art-shift-y,0%))); pointer-events: none; filter: drop-shadow(0 3px 3px rgba(15,53,61,.16)); }
.gameplay-bubble-star { display: grid; position: absolute; z-index: 4; top: 5%; right: 2%; width: 27px; height: 27px; place-items: center; border: 2px solid #fff4bd; border-radius: 50%; background: #e1a62c; color: #fff; box-shadow: 0 3px 8px rgba(104,76,9,.24); font-size: 15px; }
.gameplay-bubble:hover { outline: none; }
.gameplay-bubble:focus-visible { outline: 2px solid rgba(224,255,255,.72); outline-offset: 2px; }
.gameplay-bubble:hover .gameplay-bubble-body { filter: brightness(1.045); }
.gameplay-bubble:focus-visible .gameplay-bubble-body { filter: brightness(1.06); }
.gameplay-bubble.is-wrong .gameplay-bubble-body { animation: bubble-soft-wrong 700ms cubic-bezier(.2,.75,.25,1); }
.gameplay-bubble.is-wrong .gameplay-bubble-shine,
.gameplay-bubble.is-wrong .gameplay-bubble-glint { opacity: .3; transition: opacity 120ms ease; }
.gameplay-bubble.is-leaving-soon:not(.is-resolving) .gameplay-bubble-body::before { animation: bubble-leaving-shimmer 620ms ease-in-out infinite alternate; }
.gameplay-bubble.is-popping { z-index: 12; animation: bubble-correct-pop 560ms ease forwards; }
.gameplay-bubble.is-popping .gameplay-bubble-body { animation: none; }
.gameplay-bubble-ripple { position: absolute; inset: 3%; border: 2px solid rgba(232,255,255,.8); border-radius: 50%; animation: bubble-ripple 560ms ease-out forwards; }
.gameplay-bubble-droplet { position: absolute; top: 48%; left: 48%; width: 7px; height: 7px; border-radius: 50%; background: rgba(222,255,255,.72); transform: rotate(var(--drop-angle)) translateX(0); animation: bubble-droplet 520ms ease-out forwards; }
.bubble-target-sparkle { position: absolute; z-index: 45; width: 0; height: 0; overflow: visible; pointer-events: none; }
.bubble-target-sparkle::before { position: absolute; width: 34px; height: 34px; margin: -17px; border: 3px solid rgba(255,218,85,.9); border-radius: 50%; box-shadow: 0 0 18px rgba(255,229,111,.72); content: ""; animation: bubble-target-gold-ring 610ms ease-out forwards; }
.bubble-target-sparkle i { position: absolute; top: 0; left: 0; color: #ffd75a; font-size: clamp(13px,1.65vw,20px); line-height: 1; opacity: 0; text-shadow: 0 1px 2px rgba(105,70,0,.3),0 0 7px rgba(255,244,174,.88); transform: translate(-50%,-50%) rotate(var(--sparkle-angle)) translateX(9px) scale(.4); animation: bubble-target-sparkle-burst 620ms cubic-bezier(.18,.72,.25,1) var(--sparkle-delay) forwards; }
.gameplay-bubble.is-drifting-out { pointer-events: none; animation-duration: 850ms; animation-name: bubble-drift-out; }
.bubble-blast-board.is-paused .gameplay-bubble-body,
.bubble-blast-board.is-paused .gameplay-bubble-shine { animation-play-state: paused; }

.bubble-blast-streak { position: absolute; z-index: 18; top: 17px; right: 18px; padding: 7px 12px; border: 1px solid rgba(255,237,159,.8); border-radius: 999px; background: rgba(41,83,91,.78); color: #fff6c9; font-weight: 850; }
#bubbleBlastPage[data-mode="boost"] .bubble-blast-streak { top: 100px; }
.bubble-blast-streak[hidden] { display: none; }
.bubble-progress-flyer { position: fixed; z-index: 9999; border-radius: 50%; object-fit: contain; pointer-events: none; animation: bubble-fly-progress 650ms cubic-bezier(.2,.75,.2,1) forwards; }

.bubble-blast-completion { display: grid; position: absolute; z-index: 80; inset: 0; padding: 20px; place-items: center; background: rgba(26,57,68,.48); opacity: 0; transition: opacity 220ms ease; }
.bubble-blast-completion[hidden] { display: none; }
.bubble-blast-completion.is-visible { opacity: 1; }
.bubble-blast-completion-card { width: min(460px,90%); padding: 28px; border: 1px solid #d6e7e8; border-radius: var(--ct-radius-panel); background: linear-gradient(145deg,var(--ct-surface) 0%,var(--ct-surface-soft) 100%); box-shadow: 0 22px 60px rgba(19,53,64,.25); text-align: center; transform: translateY(12px); transition: transform 260ms ease; }
.bubble-blast-completion.is-visible .bubble-blast-completion-card { transform: translateY(0); }
.bubble-blast-completion-symbol { display: grid; width: 62px; height: 62px; margin: 0 auto 12px; place-items: center; border-radius: 50%; background: #e8f8f5; color: var(--bubble-accent); font-size: 1.5em; font-weight: 900; }
.bubble-blast-completion-card > p { margin: 5px 0; color: var(--bubble-muted); }
.bubble-blast-completion-card > p:first-of-type { color: var(--bubble-accent); font-size: .65em; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.bubble-blast-completion-card .bubble-blast-boost-result { width: fit-content; margin: 14px auto 0; padding: 7px 12px; border: 1px solid #e5bd4d; border-radius: 999px; background: #fff7d8; color: #735314; font-size: .72em; font-weight: 850; }
.bubble-blast-completion-card .bubble-blast-boost-result[hidden] { display: none; }
.bubble-blast-completion-card h2 { margin: 5px 0; font-size: 1.65em; }
.bubble-blast-completion-card > div { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.bubble-blast-completion-card button { min-height: 46px; padding: 10px 18px; border-radius: 12px; cursor: pointer; font-weight: 800; }
.bubble-blast-primary { border: 1px solid var(--bubble-accent); background: var(--bubble-accent); color: #fff; }
.bubble-blast-secondary { border: 1px solid #bad1d5; background: var(--ct-surface); color: #355769; }

@keyframes bubble-jelly { 0%,100% { transform: translate3d(0,1px,0) scale3d(1,.985,1) rotate(-.55deg); } 25% { transform: translate3d(1px,-2px,0) scale3d(.976,1.028,1) rotate(.45deg); } 50% { transform: translate3d(-1px,-1px,0) scale3d(1.028,.976,1) rotate(-.35deg); } 75% { transform: translate3d(2px,-2px,0) scale3d(.985,1.02,1) rotate(.5deg); } }
@keyframes bubble-shine-glide { 0% { opacity: .42; transform: translate3d(-2px,1px,0) rotate(-28deg) scale(.9); } 100% { opacity: .75; transform: translate3d(5px,-3px,0) rotate(-22deg) scale(1.08); } }
@keyframes bubble-background-drift { from { transform: translate3d(-8px,6px,0) scale(.97); } to { transform: translate3d(12px,-10px,0) scale(1.04); } }
@keyframes bubble-soft-wrong {
    0%,100% { filter: brightness(1) saturate(1); transform: translateX(0) scale3d(1,1,1); }
    14% { filter: brightness(.84) saturate(.5); transform: translateX(0) scale3d(1.08,.82,1); }
    33% { filter: brightness(.88) saturate(.58); transform: translateX(-10px) scale3d(.91,1.07,1); }
    55% { filter: brightness(.91) saturate(.68); transform: translateX(9px) scale3d(1.04,.94,1); }
    75% { filter: brightness(.96) saturate(.82); transform: translateX(-4px) scale3d(.98,1.025,1); }
}
@keyframes bubble-correct-pop { 0% { opacity: 1; transform: scale(1); } 28% { opacity: 1; transform: scale(1.06); } 62% { opacity: .55; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes bubble-ripple { to { opacity: 0; transform: scale(1.55); } }
@keyframes bubble-droplet { to { opacity: 0; transform: rotate(var(--drop-angle)) translateX(65px) scale(.55); } }
@keyframes bubble-target-sparkle-burst { 12% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--sparkle-angle)) translateX(var(--sparkle-distance)) scale(.22); } }
@keyframes bubble-target-gold-ring { from { opacity: 1; transform: scale(.45); } to { opacity: 0; transform: scale(3.2); } }
@keyframes bubble-target-gold-ring-reduced { 0%,100% { opacity: 0; } 20%,70% { opacity: 1; } }
@keyframes bubble-target-sparkle-reduced { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.7); } 35%,70% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1); } }
@keyframes bubble-drift-out { to { opacity: 0; transform: translate3d(0,-35vh,0) scale(.9); } }
@keyframes bubble-fly-progress { to { opacity: .18; transform: translate(var(--fly-x),var(--fly-y)) scale(.28); } }
@keyframes bubble-progress-pulse { 50% { transform: scale(1.035); } }
@keyframes bubble-instruction-attention { 50% { box-shadow: 0 0 0 7px rgba(255,255,255,.3); transform: scale(1.05); } }
@keyframes bubble-guidance-pulse {
    50% { border-color: rgba(255,255,255,1); box-shadow: 0 0 0 8px rgba(255,255,255,.28),0 7px 22px rgba(25,74,86,.22); transform: translateX(-50%) scale(1.045); }
}
@keyframes bubble-meter-rise { 50% { box-shadow: 0 0 0 7px rgba(255,224,119,.2),0 7px 20px rgba(17,61,73,.2); transform: scale(1.06); } }
@keyframes bubble-meter-drop { 38% { transform: translateX(-4px); } 70% { transform: translateX(3px); } }
@keyframes bubble-leaving-shimmer { from { border-color: rgba(176,244,255,.7) rgba(137,132,255,.34) rgba(255,194,225,.4) rgba(226,255,239,.5); box-shadow: inset 0 0 0 rgba(255,255,255,0); } to { border-color: rgba(255,255,255,.98) rgba(210,235,255,.82) rgba(255,228,241,.85) rgba(238,255,247,.9); box-shadow: inset 0 0 12px rgba(255,255,255,.36); } }
@keyframes bubble-board-surge { 50% { box-shadow: inset 0 0 95px rgba(192,255,251,.3),0 0 0 4px rgba(255,224,117,.15),0 9px 26px rgba(37,72,83,.09); } }
@keyframes bubble-surge-label { to { box-shadow: 0 0 12px rgba(255,225,119,.42); transform: scale(1.035); } }

@media (max-width: 760px) {
    .bubble-blast-summary { gap: 10px; padding-inline: 12px; }
    .bubble-blast-heading > p:last-child { display: none; }
    .bubble-blast-progress { min-width: 190px; }
    .bubble-blast-instruction { top: 8px; max-width: calc(100% - 24px); white-space: normal; }
}
@media (max-height: 650px) { .bubble-blast-summary { padding-block: 7px; } .bubble-blast-board { border-radius: 17px; } }
@media (prefers-reduced-motion: reduce) {
    .gameplay-bubble-body, .gameplay-bubble-shine, .bubble-blast-board::before, .bubble-blast-board::after { animation: none; }
    .gameplay-bubble.is-wrong .gameplay-bubble-body { animation: none; filter: brightness(.84) saturate(.55); }
    .bubble-blast-instruction.needs-guidance { animation: none; box-shadow: 0 0 0 5px rgba(255,255,255,.28); }
    .gameplay-bubble.is-leaving-soon .gameplay-bubble-body::before,
    #bubbleBlastPage[data-mode="boost"] .bubble-blast-board.is-surging,
    .bubble-blast-surge { animation: none; }
    .bubble-progress-flyer, .gameplay-bubble-droplet { display: none; }
    .bubble-target-sparkle::before { animation: bubble-target-gold-ring-reduced 500ms ease-out forwards; }
    .bubble-target-sparkle i { animation: bubble-target-sparkle-reduced 500ms ease-out var(--sparkle-delay) forwards; }
    .bubble-blast-progress, .bubble-blast-completion, .bubble-blast-completion-card { transition: none; }
}