:root{color-scheme:light;--ink:#350740;--pink:#ffa8de;--lavender:#c8a4f3;font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;color:var(--ink);font-weight:700}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:#c6c7fc}body{height:100vh;height:100dvh;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 100%,#ffe4f4,#a8bafb)}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:4px solid #6c287d;outline-offset:4px}button:disabled{cursor:default}button,input{user-select:none}button svg{display:block}button{border:0} [hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.stage{position:relative;width:min(100vw,100vh);width:min(100vw,100dvh);aspect-ratio:1;overflow:hidden;isolation:isolate;container-type:inline-size;background:#c4c8fc}.screen{position:absolute;inset:0;background-repeat:no-repeat;background-size:100% 100%}.menu{background-image:url("assets/menu-art.png")}.game{background-image:url("assets/game-art.png")}.art-button{position:absolute;background:transparent;border-radius:999px;transition:box-shadow .12s,background-color .12s}.art-button:hover{background:rgba(255,255,255,.13);box-shadow:0 0 18px #fff7}.art-button:active{background:rgba(145,62,157,.09)}.play{left:23.85%;top:58%;width:52.5%;height:13.55%}.menu-settings{left:26.95%;top:74.3%;width:46.2%;height:11.6%}
.hud{position:absolute;left:14.1%;top:12.35%;width:71.8%;height:7.25%;display:flex;gap:1.4%;align-items:stretch;background:#e6dfff;border-radius:999px;padding:.25%;box-shadow:0 0 0 .3cqw #e6dfff}.counter{display:flex;align-items:center;justify-content:space-between;gap:3%;min-width:0;border:.25cqw solid #fff9;border-radius:999px;padding:0 3%;box-shadow:inset 0 0 0 .3cqw #ffd8f5,0 .3cqw 0 #cbb8ef}.score-counter{flex:1.1;background:linear-gradient(#fff0fa,#ffceec)}.popped-counter{flex:1;background:linear-gradient(#f8eeff,#deccff);box-shadow:inset 0 0 0 .3cqw #e7ddff,0 .3cqw 0 #cbb8ef}.counter-label{font-size:2.15cqw;font-weight:1000;text-transform:uppercase;letter-spacing:-.07cqw}.counter strong{font-size:4.15cqw;font-weight:1000;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.14cqw}.counter strong.compact{font-size:3.2cqw}.gear{width:9%;flex-shrink:0;display:grid;place-items:center;border:.3cqw solid #fff9;border-radius:50%;background:linear-gradient(#fff0fc,#d7b9f5);box-shadow:0 .25cqw 0 #bea1e3;padding:1.5%}.gear svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.gear:hover{filter:brightness(1.06)}
.board-frame{position:absolute;left:14.15%;top:19.45%;width:71.7%;height:69.65%;padding:.95%;border:.45cqw solid #fef8ff;border-radius:4.1cqw;background:#ece2ff;box-shadow:0 0 0 .4cqw #d5c2f6,inset 0 0 0 .5cqw #d5c2f6;overflow:hidden}.board{position:relative;width:100%;height:100%;border-radius:2cqw;overflow:hidden;background-color:#e5d7f9;background-image:linear-gradient(90deg,transparent calc(100% - 1px),#f6ecff 0),linear-gradient(transparent calc(100% - 1px),#f6ecff 0);background-size:calc(100% / 7) calc(100% / 7)}.bubble{position:absolute;left:0;top:0;width:calc(100% / 7);height:calc(100% / 7);padding:0;display:grid;place-items:center;background:transparent;transition:transform 210ms cubic-bezier(.2,.7,.35,1);border-radius:20%;outline-offset:-3px!important}.orb{display:block;width:94%;aspect-ratio:1;max-height:96%;border-radius:50%;background-image:url("assets/game-art.png");background-size:1119.642857% 1119.642857%;background-repeat:no-repeat;background-position-y:22.504378%;box-shadow:0 .3cqw .3cqw #8763bd20;transition:opacity 120ms,scale 130ms}.color-0 .orb{background-position-x:18.301226%}.color-1 .orb{background-position-x:28.809107%}.color-2 .orb{background-position-x:39.492119%}.color-3 .orb{background-position-x:50%}.bubble:hover .orb{filter:brightness(1.06)}.bubble:active .orb{scale:.94}.bubble.popping .orb{scale:.25;opacity:0}.bubble.alone .orb{animation:nudge 180ms ease-in-out}.bubble:focus-visible{z-index:2}.points-toast{position:absolute;top:44%;left:50%;transform:translateX(-50%);pointer-events:none;opacity:0;font-size:5.5cqw;font-weight:1000;color:#d91b94;text-shadow:0 .2cqw #fff,-.25cqw 0 #fff,.25cqw 0 #fff,0 -.25cqw #fff;z-index:3}.points-toast.show{animation:score-toast 700ms ease-out forwards}@keyframes score-toast{0%{opacity:0;translate:0 1cqw}15%,65%{opacity:1}100%{opacity:0;translate:0 -4cqw}}@keyframes nudge{25%{translate:-3% 0}75%{translate:3% 0}}
.modal{position:fixed;inset:0;margin:auto;padding:0;width:min(84vw,480px);max-height:90vh;max-height:90dvh;border:0;overflow:auto;background:transparent;color:var(--ink);border-radius:36px}.modal::backdrop{background:#4b28785c}.modal-card{position:relative;background:linear-gradient(155deg,#fff7fc,#f7eaff 55%,#e4d2ff);padding:35px 30px 28px;border:5px solid #fff9;border-radius:36px;box-shadow:inset 0 0 0 3px #dabcf8;text-align:center}.modal h2{font-size:clamp(26px,4vw,38px);line-height:1.12;margin:8px 18px 24px;letter-spacing:-1px}.close-modal{position:absolute;right:13px;top:9px;background:transparent;font-size:32px;line-height:1;width:38px;height:38px;border-radius:50%}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;padding:18px 0;border-bottom:1px solid #dcc5ed}.setting-row label{font-size:23px;cursor:pointer}.setting-row label span{display:block;font-size:14px;line-height:1.5;font-weight:500;color:#795582;margin-top:4px}.toggle{flex:0 0 68px;width:68px;height:38px;background:#b5a3c1;border-radius:99px;padding:4px;box-shadow:inset 0 2px 4px #48205922}.toggle span{display:block;background:#fff8fc;width:30px;height:30px;border-radius:50%;box-shadow:0 2px 4px #48205933;transition:transform .14s}.toggle[aria-checked=true]{background:#ee80c0}.toggle[aria-checked=true] span{transform:translateX(30px)}.candy-button{display:block;width:100%;border:3px solid #fff8;border-radius:999px;padding:13px 20px;font-size:23px;font-weight:900;background:linear-gradient(#ffe4f7,#ff9cda);box-shadow:inset 0 0 0 3px #ffcbed,0 4px 0 #d29cd1;margin-top:24px;transition:filter .12s}.candy-button:hover{filter:brightness(1.045)}.candy-button:active{translate:0 2px}.candy-button.secondary{background:linear-gradient(#f6eaff,#d1adfa);box-shadow:inset 0 0 0 3px #e6ceff,0 4px 0 #bba0dd;margin-top:13px}.text-button{display:block;margin:22px auto 0;background:none;text-decoration:underline;text-underline-offset:4px;padding:6px;font-size:16px}.music-note{font-size:14px;line-height:1.4;font-weight:500;color:#795582}.result-star{color:#f6c447;font-size:42px;line-height:1;text-shadow:0 2px white}.results h2{margin:10px 0 12px}.results>p{color:#795582;font-weight:500;margin:0 0 22px}.result-stat{display:flex;flex-direction:column;gap:3px;padding:12px 0}.result-stat+.result-stat{border-top:2px dashed #d4b8e9}.result-stat span{font-size:17px}.result-stat strong{font-size:42px;line-height:1.1;font-variant-numeric:tabular-nums}.noscript{position:absolute;inset:45% 10% auto;background:white;padding:20px;border-radius:20px;text-align:center}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.points-toast.show{opacity:1}}@media(max-height:540px){.modal-card{padding:20px}.modal h2{margin-bottom:14px}.setting-row{padding:10px 0}.result-stat{padding:7px 0}.result-stat strong{font-size:32px}.candy-button{margin-top:14px;padding:10px 16px}.result-star{display:none}}
/* Live controls sit directly over the clean sky artwork. */
.game{background-image:url("assets/game-backdrop.png")}
.hud{top:12.75%;height:6.7%;background:transparent;box-shadow:none;padding:0}
.board-frame{top:21.15%;height:67.9%}
.game-instructions{position:absolute;top:90.3%;left:8%;width:84%;margin:0;text-align:center;font-size:2.65cqw;font-weight:900;line-height:1.35;text-shadow:0 1px 2px #fff}
.game-instructions span{display:block;font-size:2cqw;color:#7950a7}