/* Alexo Bubbles: circular soap films, quiet ripples and floating light. */
:root{--lime:#9ff6ee;--muted:#b2c6dd}
body{background:radial-gradient(ellipse at 20% 10%,#237f8a38,transparent 55%),radial-gradient(ellipse at 80% 50%,var(--chapter-halo,#403577),transparent 65%),var(--chapter-background,#081d30)}
body::before,body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 12% 35%,transparent 24px,#b3ecff15 25px,transparent 28px),radial-gradient(circle at 88% 70%,transparent 46px,#dbb9ff12 47px,transparent 50px),radial-gradient(circle at 40% 90%,transparent 16px,#9fffe619 17px,transparent 20px);animation:none}
body::after{transform:rotate(180deg);opacity:.6;animation-delay:-11s}.app{position:relative;z-index:1}
.brand-mark{color:#c0faff;text-shadow:0 0 18px #98dcff80}.brand{gap:3px}.brand>span:last-child{color:#9ff6ee}
.board-wrap{background:linear-gradient(145deg,#c4eaff12,#8bafff07);border:1px solid #b1e9ff32;box-shadow:0 25px 70px #0006,inset 0 1px #ffffff28;backdrop-filter:blur(8px)}
.board{background:linear-gradient(150deg,#091f328c,#151936b0);border:1px solid #b6e8ff15}.cell{background:transparent;border-radius:50%}
.board .stone,.beginning .board .stone{inset:5%;border-radius:50%;transform:none;border:1px solid color-mix(in srgb,var(--light) 85%,white);background:radial-gradient(ellipse at 27% 20%,#ffffffdc 0%,#ffffff50 8%,transparent 22%),radial-gradient(ellipse at 73% 77%,color-mix(in srgb,var(--light) 70%,transparent),transparent 42%),conic-gradient(from 30deg,#fff2,var(--color),#ffd5fa68,#ffffff13,var(--light),var(--color),#fff2);box-shadow:inset 2px 3px 7px #ffffff75,inset -3px -5px 10px var(--dark),0 2px 14px color-mix(in srgb,var(--color) 35%,transparent);animation:bubble-breathe 3.4s ease-in-out var(--bubble-delay,0s) infinite;isolation:isolate}
.board .stone::before{inset:7%;border-radius:50%;border:1px solid #ffffff48;background:radial-gradient(ellipse at 35% 15%,#fff5,transparent 38%);transform:rotate(-25deg)}
.board .stone::after{content:'';position:absolute;inset:11%;border-radius:50%;border-top:3px solid #ffffffb3;border-right:1px solid #ffe6ff90;transform:rotate(-35deg);pointer-events:none}
.board .symbol{font-size:clamp(12px,2vw,21px);color:#fff8;z-index:1;text-shadow:0 1px 5px #00385d9c}
.board .cell:hover .stone{transform:translateY(-2px) scale(1.025);filter:brightness(1.08)}
.board .cell.selected .stone{outline:2px solid #fff;outline-offset:3px;transform:scale(1.08);filter:brightness(1.15);animation:none}
.board .cell.hinted .stone{animation:bubble-hint .8s ease-in-out infinite alternate}
.board .cell.swap .stone{animation:none;transform:translate(var(--sx),var(--sy))}
.board .cell.pop .stone{animation:soap-pop .44s ease-out forwards}
.board .cell.drop .stone{animation:bubble-drop .35s cubic-bezier(.2,.7,.4,1) both}
.board .cell[class*='power-'] .stone{border:2px solid #fff;box-shadow:inset 0 0 16px #fff5,0 0 17px var(--color)}
.board .cell.power-bomb .stone{background:radial-gradient(ellipse at 25% 20%,white,transparent 24%),conic-gradient(#a7ed60,#f66b9a,#9c83f7,#ffca62,#5bd7df,#a7ed60)}
.board .cell.iced{border-radius:50%;background:#a4ecff1a}.board .cell.iced::after{border-radius:50%}
.particle{border-radius:50%;width:var(--bubble-size,8px);height:var(--bubble-size,8px);background:radial-gradient(circle at 30% 25%,#fff9,transparent 35%),color-mix(in srgb,var(--color) 25%,transparent);border:1px solid color-mix(in srgb,var(--color) 65%,white);box-shadow:0 0 7px color-mix(in srgb,var(--color) 40%,transparent);animation:soap-spray .72s ease-out forwards}
.board-wrap.impact{animation:soft-impact .48s ease-out}.shockwave{border-width:1px;opacity:.6}.blast-beam{filter:blur(2px);border-radius:999px}
.play-hud .level-heading>span#level-label{color:#b9fff4;background:#adfff111;border-color:#adfff144;text-shadow:0 0 15px #b7fff455}
@keyframes ambient-float{to{translate:0 -45px}}
@keyframes bubble-breathe{50%{scale:1.035 1.015}}
@keyframes bubble-hint{to{transform:scale(1.08);filter:brightness(1.3);box-shadow:0 0 20px #ffffff65}}
@keyframes soap-pop{0%{transform:scale(1);opacity:1}40%{transform:scale(1.18);filter:brightness(1.5);opacity:.9}70%{transform:scale(1.3);opacity:.35}100%{transform:scale(1.38);opacity:0}}
@keyframes bubble-drop{from{transform:translateY(var(--dy)) scale(.9)}75%{transform:translateY(2px) scale(1.04,.97)}to{transform:none}}
@keyframes soap-spray{0%{opacity:.85;transform:scale(.5)}45%{opacity:.8}to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@keyframes soft-impact{35%{box-shadow:0 0 var(--impact-glow,40px) #99f6ed28,inset 0 0 20px #a5f7ff16}100%{box-shadow:0 25px 70px #0006,inset 0 1px #ffffff28}}
@media(prefers-reduced-motion:reduce){body::before,body::after,.board .stone,.board .cell.hinted .stone,.board-wrap.impact{animation:none!important}.board .cell.pop .stone,.board .cell.drop .stone{animation-duration:.01ms!important}}

/* Comic edition: bright colors, ink contours and wobbling silhouettes. */
:root{--lime:#b5ff34;--muted:#d1c5ef}
body{background:radial-gradient(ellipse at 5% 8%,#23bfd8aa,transparent 45%),radial-gradient(ellipse at 98% 30%,#ff48b477,transparent 42%),radial-gradient(ellipse at 20% 95%,#8744ef99,transparent 50%),linear-gradient(145deg,#18345a,#342066 55%,#471c61);background-attachment:fixed}
body::before{background:radial-gradient(circle at 8% 25%,#20e7f72b 0 35px,#29125670 36px 39px,#afffff75 40px 42px,transparent 43px),radial-gradient(circle at 89% 18%,#ff45b52b 0 62px,#29125670 63px 67px,#ffb6e955 68px 70px,transparent 71px),radial-gradient(circle at 92% 75%,#b1ff2528 0 37px,#29125670 38px 41px,#d4ff7955 42px 44px,transparent 45px),radial-gradient(circle at 14% 87%,#9c59ff35 0 75px,#29125670 76px 80px,#d8c2ff55 81px 84px,transparent 85px)}
body::after{background:radial-gradient(circle at 21% 15%,#ff5bc733 0 24px,#d8c2ff65 25px 27px,transparent 29px),radial-gradient(circle at 87% 50%,#2febff33 0 18px,#ffffff65 19px 21px,transparent 23px),radial-gradient(circle at 30% 74%,#ffd83d28 0 45px,#fff59b55 46px 48px,transparent 50px)}
.brand-mark{color:#b5ff34;text-shadow:2px 3px 0 #26104e}.brand{text-shadow:2px 3px 0 #26104e}.brand>span:last-child{color:#b5ff34}.description{color:#e2daf3}.game-guide{background:#2014428c;border-radius:24px;padding:30px 24px}
.board-wrap{background:linear-gradient(140deg,#7054c1,#4c2b86);border:3px solid #251049;box-shadow:0 7px 0 #251049,inset 0 2px #c1a0ff,0 20px 45px #170b3c55;backdrop-filter:none}
.board{background:radial-gradient(ellipse at 40% 20%,#363868,#201840 85%);border:2px solid #251049}.cell{perspective:none}
.board .stone,.beginning .board .stone{inset:4%;border-radius:48% 52% 47% 53% / 50% 45% 55% 50%;border:3px solid #29114f;background:radial-gradient(ellipse at 30% 22%,var(--light),transparent 45%),radial-gradient(ellipse at 62% 85%,var(--dark),transparent 46%),var(--color);box-shadow:inset 2px 3px 0 color-mix(in srgb,var(--light) 75%,white),inset -3px -4px 0 color-mix(in srgb,var(--dark) 70%,transparent),0 3px 0 #29114f88;animation:comic-wobble 1.9s ease-in-out var(--bubble-delay,0s) infinite}
.board .stone::before{inset:auto;left:19%;top:13%;width:35%;height:16%;border:0;border-radius:55% 45% 60% 40%;background:#fffffff0;transform:rotate(-32deg);box-shadow:none}
.board .stone::after{inset:auto;left:12%;top:34%;width:10%;height:10%;border:0;border-radius:50%;background:#ffffffc9;transform:none}
.board .symbol{font-size:clamp(10px,1.7vw,17px);color:#ffffff85;text-shadow:0 1px 2px var(--dark);margin-top:9px}
.board .cell.selected .stone{outline:3px solid white;outline-offset:2px;animation:none}.board .cell.hinted .stone{animation:comic-hint .8s ease-in-out infinite alternate}.board .cell.swap .stone{animation:none}
.board .cell.pop .stone{animation:comic-pop .44s ease-out forwards}.board .cell.drop .stone{animation:comic-drop .35s cubic-bezier(.2,.7,.4,1) both}
.board .cell[class*='power-'] .stone{border:3px solid #29114f;outline:2px solid white;outline-offset:0;box-shadow:inset 2px 3px 0 #ffffff8c,0 0 14px var(--color)}.board .cell[class*='power-'] .symbol{margin-top:0;font-size:clamp(18px,3vw,27px);text-shadow:2px 2px 0 #29114f}
.board .cell.power-bomb .stone{background:conic-gradient(#b1ff24,#ff38a7,#9654ff,#ffcf23,#1de5ff,#b1ff24)}
.particle{border-radius:45% 55% 50% 50%;background:radial-gradient(circle at 28% 23%,white 0 12%,transparent 18%),var(--color);border:1px solid #29114f;box-shadow:0 1px 0 #29114f88}.shockwave{border-width:3px}.blast-beam{filter:none}
.play-hud .level-heading>span#level-label{color:#c8ff69;background:#2b1649;border:2px solid #a5f23d;box-shadow:0 3px 0 #251049;text-shadow:1px 2px 0 #251049}
@keyframes comic-wobble{0%,100%{border-radius:45% 55% 43% 57% / 54% 42% 58% 46%;transform:translateY(1px) rotate(-5deg) scale(1.065,.94)}33%{border-radius:59% 41% 57% 43% / 40% 60% 42% 58%;transform:translateY(-3px) rotate(5deg) scale(.925,1.085)}66%{border-radius:40% 60% 43% 57% / 60% 42% 58% 40%;transform:translateY(-1px) rotate(-2deg) scale(1.085,.925)}}
@keyframes comic-hint{from{transform:scale(.97,1.02)}to{transform:scale(1.07,.98);filter:brightness(1.25);box-shadow:0 0 18px #ffffff6b}}
@keyframes comic-pop{0%{transform:scale(1);opacity:1}18%{transform:scale(.82,1.15);opacity:1}36%{transform:scale(1.26,1.19);filter:brightness(1.6);opacity:1}40%{transform:scale(1.32);opacity:0}100%{transform:scale(1.32);opacity:0}}
@keyframes comic-drop{from{transform:translateY(var(--dy)) scale(.88,1.1)}75%{transform:translateY(3px) scale(1.1,.88)}to{transform:none}}
@media(max-width:600px){.board .stone,.beginning .board .stone{border-width:2px}.game-guide{padding:24px 16px}}
@media(prefers-reduced-motion:reduce){body::before,body::after,.board .stone,.board .cell.hinted .stone,.board-wrap.impact{animation:none!important}.board .cell.pop .stone,.board .cell.drop .stone{animation-duration:.01ms!important}}

/* Rupture is timed to the instant the stretched soap film disappears. */
.bubble-rupture{position:absolute;width:var(--rupture-size);height:var(--rupture-size);border:3px solid white;border-radius:46% 54% 48% 52%;box-shadow:0 0 0 2px var(--color),0 0 12px var(--color);pointer-events:none;animation:bubble-rupture .4s ease-out .16s both}
.particle{animation:burst-splash .48s cubic-bezier(.15,.65,.35,1) .16s both}
@keyframes bubble-rupture{0%{transform:translate(-50%,-50%) scale(.9);opacity:0}1%{opacity:1}30%{transform:translate(-50%,-50%) scale(1.38);opacity:.8}100%{transform:translate(-50%,-50%) scale(1.85);opacity:0;border-width:0}}
@keyframes burst-splash{0%{transform:scale(.45);opacity:0}8%{opacity:1}30%{transform:translate(calc(var(--dx)*.65),calc(var(--dy)*.65)) scale(1.15,.75);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.15);opacity:0}}
@media(prefers-reduced-motion:reduce){.bubble-rupture,.particle{display:none}}

/* New bubbles inflate into view; surviving bubbles keep their falling motion. */
.board .cell.new-bubble .stone{animation:bubble-inflate .32s cubic-bezier(.2,.8,.3,1) both}
@keyframes bubble-inflate{0%{transform:translateY(-6px) scale(.06);opacity:.35}55%{transform:translateY(-1px) scale(.82);opacity:1}80%{transform:scale(1.08,.98);opacity:1}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.board .cell.new-bubble .stone{animation:none!important}}

/* Level and points accompany the logo; moves and combo share the lower row. */
.play-hud{display:flex;flex-direction:column;align-items:stretch;gap:0}
.play-top{display:grid;grid-template-columns:clamp(88px,20%,112px) minmax(0,1fr) clamp(58px,15%,82px);align-items:center;gap:4px}
.level-side,.level-heading{min-width:0}
.play-hud .level-heading>span#level-label{display:inline-block;font-size:clamp(14px,2.2vw,20px);padding:6px 8px;white-space:nowrap}
.hud-title-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hud-score{display:flex;flex-direction:column;gap:3px;margin-top:8px;min-width:0}
.hud-score span{font-size:10px;letter-spacing:.5px;color:#b8abce}
.hud-score #score{display:block;width:100%;min-width:0;font-size:19px;line-height:1.2;white-space:nowrap;overflow-wrap:normal;word-break:normal;color:#d4c5e5!important}
.play-brand{display:flex;justify-content:center;min-width:0;margin:0}
.play-logo{display:block;width:100%;height:auto;max-height:none;object-fit:contain;margin-bottom:-2%}
.play-hud .goal{width:100%;min-width:0}
.play-hud .goal>div{display:flex;justify-content:space-between;gap:8px}
.play-hud .goal progress{width:100%}
.stats{display:flex;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:0}
.stats>div{display:flex;flex-direction:row;align-items:baseline;gap:7px;min-width:0}
.stats span{min-height:0;font-size:10px;letter-spacing:.5px;color:#b8abce}
.stats strong{font-size:16px;line-height:1.2;color:#d4c5e5!important;white-space:nowrap}
.stats .moves-summary span{white-space:nowrap}
@media(max-width:600px){.play-top{gap:2px}.play-logo{max-height:none}.play-hud{gap:0}.play-hud .level-heading>span#level-label{font-size:14px;padding:5px 6px}.hud-score{margin-top:6px}.hud-score #score{font-size:17px}}

/* Header controls keep their position after removing the duplicate wordmark. */
.app>header{justify-content:flex-end}

/* Glossy comic HUD stays live text, so every locale keeps its own labels. */
.play-hud .level-heading>span#level-label{
 display:block;box-sizing:border-box;width:100%;padding:8px 5px;
 font:800 clamp(12px,1.5vw,17px)/1.15 Outfit,sans-serif;letter-spacing:0;
 color:#301346;border:2px solid #351363;border-radius:15px;
 background:linear-gradient(180deg,#ecffab 0%,#a8ef45 17%,#69bb1d 52%,#438c10 100%);
 box-shadow:inset 0 2px 0 #ffffffe0,inset 0 -3px 0 #27570788,0 4px 0 #241043,0 6px 8px #11072650;
 text-align:center;text-shadow:0 1px 0 #ffffff90,0 2px 0 #c4ff7960;
}
.hud-score{
 padding:8px 7px 7px;margin-top:10px;box-sizing:border-box;border:2px solid #361261;border-radius:14px;
 background:linear-gradient(180deg,#b791ef 0%,#7650b2 16%,#4b297a 56%,#331750 100%);
 box-shadow:inset 0 2px 0 #ffffff70,inset 0 -2px 0 #1c0c4380,0 3px 0 #241043,0 5px 8px #11072640;
}
.hud-score span{color:#f0e4ff;font-size:10px;line-height:1.25;letter-spacing:.3px;overflow-wrap:anywhere;text-shadow:0 1px 1px #301047}
.hud-score #score{font:800 20px/1.15 Outfit,sans-serif;color:#fff4d3!important;text-shadow:0 1px 0 #78441d,0 2px 1px #311448;font-variant-numeric:tabular-nums}
.play-hud .goal{padding:6px 0 0}
.play-hud .goal>div{align-items:baseline;gap:10px}
.play-hud #goal-text{min-width:0;line-height:1.35;color:#e7def8;text-shadow:0 1px 1px #19092e;overflow-wrap:anywhere}
.play-hud #goal-value{flex-shrink:0;white-space:nowrap;color:#e7ffa2;text-shadow:0 2px 1px #244513;font-variant-numeric:tabular-nums}
.play-hud .goal progress{
 display:block;box-sizing:border-box;height:17px;margin-top:7px;border:2px solid #361261;border-radius:999px;
 background:linear-gradient(180deg,#160a2a,#3b2058);box-shadow:inset 0 2px 4px #080312b0,0 2px 0 #ac78e845,0 4px 6px #11072640;
 appearance:none;overflow:hidden;
}
.play-hud .goal progress::-webkit-progress-bar{border-radius:999px;background:linear-gradient(180deg,#160a2a,#3b2058);box-shadow:inset 0 2px 4px #080312b0}
.play-hud .goal progress::-webkit-progress-value{
 border-radius:999px;background:linear-gradient(180deg,#f6ffcb 0%,#d5ff91 16%,#9ded44 42%,#61b324 72%,#3c8519 100%);
 box-shadow:inset 0 1px 0 #fff9,inset 0 -2px 2px #234d1460;transition:width .3s ease-out;
}
.play-hud .goal progress::-moz-progress-bar{
 border-radius:999px;background:linear-gradient(180deg,#f6ffcb 0%,#d5ff91 16%,#9ded44 42%,#61b324 72%,#3c8519 100%);
 box-shadow:inset 0 1px 0 #fff9,inset 0 -2px 2px #234d1460;
}
@media(max-width:600px){.play-hud .level-heading>span#level-label{font-size:12px;padding:7px 4px}.hud-score{padding:7px 6px 6px;margin-top:9px}.hud-score #score{font-size:18px}.play-hud .goal progress{height:15px}}
@media(prefers-reduced-motion:reduce){.play-hud .goal progress::-webkit-progress-value{transition:none}}

/* One compact, glossy field groups level and cumulative points. */
.play-top{grid-template-columns:clamp(96px,22%,120px) minmax(0,1fr) clamp(58px,15%,82px)}
.play-hud .level-side{
 box-sizing:border-box;padding:9px 7px 8px;border:2px solid #361261;border-radius:17px;
 background:linear-gradient(180deg,#a77cde 0%,#70459f 15%,#4b297a 48%,#32164f 100%);
 box-shadow:inset 0 2px 0 #ffffff80,inset 0 -3px 0 #160a3680,0 4px 0 #241043,0 6px 9px #11072645;
 text-align:center;
}
.play-hud .level-side .level-heading>span#level-label{
 padding:1px 0 6px;border:0;border-radius:0;background:none;box-shadow:none;
 font-size:clamp(12px,1.5vw,16px);color:#d8ff91;text-shadow:0 1px 0 #42651b,0 2px 1px #221035;
}
.play-hud .level-side .hud-score{
 margin:0;padding:7px 0 0;border:0;border-top:1px solid #e3c7ff55;border-radius:0;background:none;
 box-shadow:inset 0 1px 0 #190b3a70;gap:3px;
}
.play-hud .level-side .hud-score span{font-size:10px;color:#eadbff;letter-spacing:.3px}
.play-hud .level-side .hud-score #score{font-size:20px;white-space:nowrap}
@media(max-width:600px){.play-hud .level-side{padding:8px 6px 7px}.play-hud .level-side .level-heading>span#level-label{font-size:12px}.play-hud .level-side .hud-score #score{font-size:18px}}

/* Logo left, shared level/points field right; logo is 25% wider than before. */
.play-top{
 --panel-width:clamp(96px,22%,120px);
 --logo-width:calc(125% - clamp(120px,27.5%,150px) - clamp(72.5px,18.75%,102.5px) - 10px);
 display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.play-top .play-brand{flex:0 1 auto;width:var(--logo-width);max-width:calc(100% - var(--panel-width) - 8px);justify-content:flex-start}
.play-top .level-side{flex:0 0 var(--panel-width);min-width:0}
@media(max-width:600px){.play-top{--logo-width:calc(125% - clamp(120px,27.5%,150px) - clamp(72.5px,18.75%,102.5px) - 5px)}}

/* Translation/growth use an outer layer; the inner bubble keeps wobbling. */
.board .bubble-motion{position:absolute;inset:0;display:block;pointer-events:none;transform:none;transition:none}
.board .cell:is(.drop,.new-bubble,.swap):not(.pop):not(.chain-landed):not(.power-converting) .stone{animation:comic-wobble 1.9s ease-in-out var(--bubble-delay,0s) infinite;transform:none}
.board .cell.drop .bubble-motion{animation:bubble-settle .35s cubic-bezier(.2,.7,.4,1) both}
.board .cell.new-bubble .bubble-motion{animation:bubble-inflate .32s cubic-bezier(.2,.8,.3,1) both}
.board .cell.swap .bubble-motion{transform:translate(var(--sx),var(--sy));transition:transform .18s ease}
@keyframes bubble-settle{from{transform:translateY(var(--dy))}75%{transform:translateY(2px)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.board .bubble-motion{transition:none!important;animation:none!important}.board .cell:is(.drop,.new-bubble,.swap) .stone{animation:none!important}}
/* Action animations outrank residual drop/growth classes on persistent cells. */
.board .cell.chain-landed:not(.pop) .stone{animation:chain-arrival .3s ease-out both}
.board .cell.power-converting:not(.pop) .stone{animation:power-charge .28s ease-out both}
.board .cell.pop .stone{animation:comic-pop .44s ease-out forwards}
@media(prefers-reduced-motion:reduce){.board .cell.chain-landed .stone,.board .cell.power-converting .stone{animation:none!important}}
/* Intro begins at the top instead of centering beside the taller game. */
.game-layout{padding-top:12px}
.game-layout>.intro{align-self:start}
.game-layout>.intro>.eyebrow{margin-top:0}