/* Calm garden, stable hit areas, and a separate space for each large bubble. */
.bubble-exemplar .scene-art.bubbles {position:relative;height:100%;min-height:0;border-radius:24px;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 25% 9%,#fff8dc 0,transparent 56%),linear-gradient(#bbdce0,#e2eddf 75%,#bed1b0);animation:none;container-type:size;}
.bubble-garden,.bubble-garden svg {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.bubble-field {position:absolute;inset:68px 24px 42px;display:flex;align-items:center;justify-content:space-around;gap:16px;container-type:size;}
.bubble-slot {position:relative;display:flex;align-items:center;justify-content:center;width:calc(50% - 8px);height:100%;}
.pop-bubble {position:relative;flex:none;width:max(88px,min(100cqh,44cqw,240px));height:max(88px,min(100cqh,44cqw,240px));padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;}
.pop-bubble[hidden] {display:none;}
.bubble-film {position:absolute;inset:14%;border-radius:50%;background:radial-gradient(ellipse at 32% 19%,#fffff0cc 0,transparent 32%),radial-gradient(ellipse at 76% 85%,#ffc8d185,transparent 48%),radial-gradient(ellipse at 18% 69%,#b5def399,transparent 52%),radial-gradient(circle,#f4f8e515 43%,#d6eceb9c 69%,#eefafa 72%);border:2px solid #83aaaf;box-shadow:inset 3px 3px 1px #ffffefcc,inset -4px -3px 2px #d2a3b178,0 4px 8px #427d7820;}
.bubble-film::before {content:"";position:absolute;left:17%;top:12%;width:39%;height:23%;border-top:5px solid #fffff5;border-radius:50%;transform:rotate(-33deg);}
.bubble-film::after {content:"";position:absolute;right:16%;bottom:12%;width:30%;height:13%;border-bottom:3px solid #f8d8e5;border-radius:50%;transform:rotate(-33deg);}
.pop-bubble[data-size='large'] .bubble-film {inset:0;}
.pop-bubble:focus-visible {outline:3px solid #377f86;outline-offset:-3px;}
.pop-bubble:disabled {cursor:default;}
.bubble-burst {position:absolute;pointer-events:none;font-size:clamp(60px,20cqw,140px);font-weight:400;color:#729ca0;opacity:0;line-height:1;}
.bubble-funny {position:absolute;right:8%;top:5%;color:#b88735;font-size:32px;pointer-events:none;opacity:0;}
.bubble-status {position:absolute;left:50%;bottom:9px;transform:translateX(-50%);white-space:nowrap;max-width:96%;color:#355f65;background:#fff8e9ed;border:1px solid #a7c3af;border-radius:20px;padding:4px 12px;font-size:.86rem;font-weight:650;}
.bubble-card-art {width:100%;height:100%;}
.bubble-exemplar .remix-strip .bubble-card-art {width:50px;height:50px;}
.bubble-exemplar .phrase-bubble {top:6px;animation:none;}
.bubble-exemplar .scene-art.pulse,.bubble-exemplar .scene-art.is-popping {animation:none;}
@media(max-width:760px){.bubble-exemplar .scene-art.bubbles {height:clamp(120px,calc(100svh - 430px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),360px);border-radius:20px;}.bubble-field {inset:46px 12px 34px;}}
@media(max-width:760px) and (max-height:700px){.bubble-exemplar .scene-art.bubbles {height:clamp(160px,calc(100svh - 400px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),360px);}.bubble-field {inset:44px 12px 28px;}.bubble-status {font-size:.7rem;padding:3px 10px;bottom:5px;}}
@media(min-width:540px) and (max-width:760px) and (max-height:500px){.bubble-exemplar .stage,.bubble-exemplar .scene-art.bubbles {height:100%;min-height:0;}.bubble-field {inset:38px 12px 30px;}.bubble-exemplar .phrase-bubble {top:5px;padding:5px 10px;font-size:.8rem;}}