:root{font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;color:#f8fbff;background:#0c1b2b;--night: #0c1b2b;--navy: #12283f;--line: #2d566b;--muted: #a9c5d0;--aqua: #72e6dc;--coral: #ff8a67;--yellow: #ffd36d}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:var(--night)}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.bubblepop-shell{--game-shell-max-width: 100%;--game-shell-pad-inline: 0px;background:var(--night)}.game-shell.bubblepop-shell{--game-shell-pad-inline: 0px}.bubblepop-shell .game-shell__top{align-items:center}.bubblepop-shell .game-shell__identity{gap:3px}.bubblepop-shell .game-shell__eyebrow{color:var(--aqua);font-size:.73rem;letter-spacing:.16em}.bubblepop-shell .game-shell__hud{gap:7px}.bubblepop-shell .game-shell__pill{min-height:34px;color:#e7f6f8;background:#173650;border:1px solid #2d566b}.bubblepop-shell .popped-pill{color:#fff4c5;border-color:#6d5a36}.play-area{position:relative;display:flex;flex-direction:column;min-height:0;flex:1 1 0;overflow:hidden;padding:0;border:1px solid var(--line);border-radius:22px;background:var(--navy);box-shadow:0 18px 36px #00000038}.rain-zone{position:relative;min-height:220px;flex:1 1 0;overflow:hidden;isolation:isolate;border-top:1px solid rgba(114,230,220,.18);border-bottom:1px solid rgba(114,230,220,.14);background:#10253a url(/bubblepopmastery/assets/artwork/bubble-pop-background.png) center 58% / cover no-repeat}.rain-zone:before,.rain-zone:after{position:absolute;top:0;bottom:0;width:1px;content:"";background:#72e6dc1c}.rain-zone:before{left:21%}.rain-zone:after{right:21%}.ceiling-line{position:absolute;inset:10px 10px auto;display:flex;align-items:center;gap:9px;z-index:1;color:#77a8b8;font-size:.63rem;font-weight:900;letter-spacing:.18em}.ceiling-line i{height:1px;flex:1;background:repeating-linear-gradient(90deg,#3a6578 0 9px,transparent 9px 16px)}.ceiling-spark{color:var(--yellow);font-size:.95rem}.rain-guide{position:absolute;top:30px;bottom:0;width:21%;border-top:1px dashed rgba(114,230,220,.08)}.rain-guide-left{left:0}.rain-guide-right{right:0}.bubble{position:absolute;z-index:4;bottom:clamp(108px,14vw,142px);left:50%;display:grid;place-items:center;width:clamp(132px,21vw,186px);aspect-ratio:1;border:3px solid rgba(154,255,242,.8);border-radius:50%;background:radial-gradient(circle at 28% 20%,rgba(255,255,255,.95) 0 5%,rgba(255,255,255,.23) 6% 14%,transparent 15%),radial-gradient(circle at 67% 74%,rgba(26,122,152,.38),transparent 54%),#57d7d7d1;box-shadow:inset -13px -16px 26px #1b7d9e5c,inset 10px 12px 16px #fff3,0 8px 18px #0000003d;opacity:0;translate:-50% 0;scale:1;will-change:bottom,translate,scale,opacity}.bubble:after{position:absolute;right:9%;bottom:-10px;width:16px;height:16px;border:2px solid rgba(154,255,242,.8);border-top:0;border-left:0;border-radius:0 0 12px;content:"";transform:rotate(22deg)}.bubble-shine{position:absolute;inset:14% auto auto 19%;width:17%;height:11%;border-radius:50%;background:#ffffffd1;transform:rotate(-22deg)}.bubble-equation{max-width:82%;color:#f7ffff;font-size:clamp(1.35rem,3.6vw,2.35rem);font-weight:900;line-height:1.05;letter-spacing:-.045em;text-align:center;text-shadow:0 2px 0 rgba(24,101,124,.35)}.bubble-caption{position:absolute;bottom:18%;color:#dffffb;font-size:clamp(.52rem,1.4vw,.68rem);font-weight:900;letter-spacing:.16em}.bubble.rising{animation:bubble-rise var(--rise-duration, 15s) cubic-bezier(.16,.7,.28,1) forwards}.bubble.needs-correction{animation-play-state:paused}.bubble.popping{animation:bubble-pop .48s cubic-bezier(.2,.8,.3,1) forwards}.bubble.bubble-hidden{opacity:0!important;pointer-events:none}.bubble-blower{position:absolute;bottom:-18px;left:50%;z-index:3;width:clamp(148px,24vw,224px);transform:translate(-50%);filter:drop-shadow(0 10px 12px rgba(11,42,58,.28));pointer-events:none}.bubble-blower img{display:block;width:100%;height:auto}.answer-console{display:grid;gap:7px;flex:0 0 auto;padding:10px 0 14px}.answer-prompt{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:clamp(.74rem,1.6vw,.92rem);font-weight:700}.prompt-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px #ff8a6721}.answer-row{display:flex;gap:8px}.answer-row input{min-width:0;width:100%;height:clamp(46px,7vh,58px);border:2px solid #4f7b8d;border-radius:12px;color:#f7ffff;background:#0d2033;font-size:clamp(1.55rem,4vw,2.1rem);font-weight:900;text-align:center;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.answer-row input::placeholder{color:#628391}.answer-row input:focus{border-color:var(--aqua);box-shadow:0 0 0 3px #72e6dc33}.pop-button{min-width:118px;border:0;border-radius:12px;color:#17231c;background:var(--coral);box-shadow:0 4px #b24e3d;font-weight:900;letter-spacing:.08em;cursor:pointer;transition:transform .12s ease,background .12s ease}.pop-button span{margin-left:5px;font-size:1.1em}.pop-button:hover{background:#ff9d7d;transform:translateY(-1px)}.pop-button:active{transform:translateY(2px);box-shadow:0 2px #b24e3d}.pop-button:disabled{cursor:not-allowed;opacity:.48;transform:none}.bubblepop-shell .game-answer-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,680px);margin:0}.bubblepop-shell .game-answer-choices button{min-height:clamp(48px,7vh,60px);border:2px solid #4f7b8d;border-radius:12px;background:#173650;color:#f7ffff;font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;font-size:clamp(1.35rem,3.5vw,2rem);font-weight:900;box-shadow:0 4px #0b1a29}.bubblepop-shell .game-answer-choices button:hover,.bubblepop-shell .game-answer-choices button:focus-visible{border-color:var(--aqua);background:#1d465e}.bubblepop-shell .game-answer-choices button:active{background:var(--aqua);color:#0c1b2b;transform:translateY(2px);box-shadow:0 2px #0b1a29}.bubblepop-shell .game-answer-choices button:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}.floating-items{position:absolute;inset:0;z-index:10;pointer-events:none}.pop-burst{position:absolute;width:10px;height:10px;transform:translate(-50%,-50%)}.pop-flash{position:absolute;top:50%;left:50%;width:30px;height:30px;border:4px solid #fff8cb;border-radius:50%;background:#ffffff73;box-shadow:0 0 0 10px #72e6dc52;transform:translate(-50%,-50%);animation:burst-flash .5s ease-out forwards}.pop-shard{position:absolute;top:50%;left:50%;width:7px;height:21px;border-radius:50% 50% 45% 45%;background:var(--yellow);transform-origin:50% 0;animation:burst-shard .62s cubic-bezier(.16,.76,.25,1) forwards}.pop-shard-0{--angle: 0deg;--travel: -82px}.pop-shard-1{--angle: 36deg;--travel: -70px}.pop-shard-2{--angle: 72deg;--travel: -76px}.pop-shard-3{--angle: 108deg;--travel: -68px}.pop-shard-4{--angle: 144deg;--travel: -78px}.pop-shard-5{--angle: 180deg;--travel: -66px}.pop-shard-6{--angle: 216deg;--travel: -80px}.pop-shard-7{--angle: 252deg;--travel: -70px}.pop-shard-8{--angle: 288deg;--travel: -78px}.pop-shard-9{--angle: 324deg;--travel: -70px}.pop-shard:nth-child(3n){background:var(--coral)}.pop-shard:nth-child(4n){background:var(--aqua)}.hud{display:grid;gap:8px}.ghost{justify-self:start;min-height:42px;border:1px solid #3e687b;border-radius:10px;padding:8px 14px;color:#dff6f6;background:#173650;font-weight:800;cursor:pointer}.ghost:hover{border-color:var(--aqua);background:#1d465e}.skip-btn{color:#fff0b3;border-color:#7f6939;background:#3b3a31}.status,.message{font-size:1rem;font-weight:700}.status{color:#f4ffff}.message{min-height:1.4em;color:var(--aqua)}@keyframes bubble-rise{0%{bottom:clamp(108px,14vw,142px);opacity:1;translate:calc(-50% + var(--drift-start, 0px)) 0;scale:.72}18%{translate:calc(-50% + var(--drift-one, 0px)) 0;scale:.94}38%{translate:calc(-50% + var(--drift-two, 0px)) 0;scale:1}60%{translate:calc(-50% + var(--drift-near, 0px)) 0;scale:.98}80%{translate:calc(-50% + var(--drift-end, 0px)) 0;scale:.94}to{bottom:calc(100% + 38px);opacity:0;translate:calc(-50% + var(--drift-end, 0px)) 0;scale:.88}}@keyframes bubble-pop{0%{opacity:1;scale:1;filter:brightness(1)}35%{opacity:1;scale:1.28;filter:brightness(1.6)}to{opacity:0;scale:.12;filter:brightness(2)}}@keyframes burst-flash{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}to{opacity:0;transform:translate(-50%,-50%) scale(3.4)}}@keyframes burst-shard{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(0) scale(.35)}to{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(var(--travel)) scale(1)}}@media(max-width:640px){.bubblepop-shell .game-shell__top{align-items:stretch}.bubblepop-shell .game-shell__hud{justify-content:center}.bubblepop-shell .game-shell__pill{min-height:30px;padding:5px 9px;font-size:.78rem}.rain-zone{min-height:190px}.bubble-equation{font-size:clamp(1.15rem,5.5vw,1.7rem)}.pop-button{min-width:94px;padding:0 10px}.bubble-blower{transform:translate(-50%) scale(.86);transform-origin:bottom center}}@media(max-height:720px){.rain-zone{min-height:150px}.answer-console{padding-top:8px;padding-bottom:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.bubble.rising{animation:none!important;bottom:clamp(108px,14vw,142px);opacity:1;translate:calc(-50% + var(--drift-start, 0px)) 0;scale:.94}.bubble.popping{animation:none!important;opacity:0}.pop-flash{animation:none!important;opacity:1;transform:translate(-50%,-50%) scale(2.4)}.pop-shard{animation:none!important;opacity:1;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(var(--travel)) scale(1)}}