:root{color:#f8fafc;font-synthesis:none;text-rendering:optimizelegibility;background:#101827;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}img{-webkit-user-drag:none}body{min-width:320px;min-height:100vh;margin:0;overflow:hidden}button,input,textarea,select{font:inherit}button{touch-action:manipulation}#app,button{-webkit-tap-highlight-color:transparent}#app{min-height:100svh}.leaderboard-overlay{z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#020617c2;place-items:center;padding:18px;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}.leaderboard-dialog{color:#f8fafc;background:linear-gradient(160deg,#17243b,#0f172a);border:1px solid #7dd3fc61;border-radius:24px;width:min(460px,100%);max-height:min(680px,100svh - 36px);padding:clamp(18px,5vw,28px);overflow:auto;box-shadow:0 28px 80px #0000007a}.leaderboard-dialog h2{color:#fde68a;text-align:center;margin:0 0 18px;font-size:clamp(1.35rem,5vw,2rem)}.leaderboard-dialog__content>p{color:#cbd5e1;text-align:center;margin:12px 0;line-height:1.45}.leaderboard-dialog__list{gap:8px;margin:0;padding:0;list-style:none;display:grid}.leaderboard-dialog__row{background:#1e293bdb;border-radius:14px;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:8px 12px;display:grid}.leaderboard-dialog__rank{color:#7dd3fc}.leaderboard-dialog__name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.leaderboard-dialog__score{color:#fbbf24;font-weight:900}.leaderboard-dialog__hint{font-size:.9rem}.leaderboard-dialog__actions{justify-content:center;margin-top:18px;display:flex}.leaderboard-dialog__button{color:#082f49;cursor:pointer;background:linear-gradient(#7dd3fc,#38bdf8);border:0;border-radius:999px;min-height:44px;margin:14px auto 0;padding:10px 18px;font-weight:900;display:block}.leaderboard-dialog__button--secondary{color:#f8fafc;background:#94a3b833;margin:0}.leaderboard-dialog__button:disabled{cursor:wait;opacity:.58}.game-toast{left:50%;bottom:max(20px, env(safe-area-inset-bottom));z-index:1100;color:#f8fafc;text-align:center;background:#0f172af0;border:1px solid #fbbf2459;border-radius:14px;width:min(420px,100% - 32px);padding:12px 16px;position:fixed;transform:translate(-50%);box-shadow:0 16px 42px #00000061}.game-screen{height:100vh;background:radial-gradient(circle at 20% 10%,#48bbff38,#0000 32%),radial-gradient(circle at 80% 0,#ffb2482e,#0000 28%),linear-gradient(145deg,#111827 0%,#182339 55%,#0f172a 100%);height:100svh;min-height:0;padding:0;display:block;overflow:hidden}.hud{z-index:10;align-items:stretch;gap:10px;display:flex;position:absolute;top:clamp(8px,3cqw,20px);right:clamp(8px,3cqw,20px)}.score-counter{background:#0f172ab8;border:1px solid #fbbf2452;border-radius:18px;gap:2px;min-width:128px;padding:10px 14px;display:grid;box-shadow:0 12px 32px #00000038}.score-counter__label{color:#cbd5e1;letter-spacing:.12em;text-transform:uppercase;font-size:.68rem;font-weight:800}.score-counter__value{font-variant-numeric:tabular-nums;color:#fbbf24;font-size:clamp(1.1rem,2vw,1.6rem);font-weight:900;line-height:1}.hud-button,.shuffle-button{color:#0f172a;cursor:pointer;border:0;font-weight:900;transition:filter .14s,transform .14s}@media (hover:hover) and (pointer:fine){.hud-button:hover:not(:disabled),.shuffle-button:hover:not(:disabled){filter:brightness(1.06)}}.hud-button:active:not(:disabled),.shuffle-button:active:not(:disabled){transform:translateY(1px)scale(.98)}.hud-button:disabled,.shuffle-button:disabled{cursor:default;opacity:.62}.hud-button--leaderboard{background:radial-gradient(circle at 50% 28%,#ffffff57,#0000 34%),linear-gradient(#bae6fd,#38bdf8);border-radius:18px;place-items:center;width:54px;min-width:54px;padding:0;display:grid;position:relative;overflow:hidden;box-shadow:0 0 18px #facc1557,0 12px 28px #38bdf83d}.hud-button--leaderboard:before{content:"";opacity:.75;background:radial-gradient(circle,#facc155c,#0000 66%);border-radius:999px;position:absolute;top:8px;bottom:8px;left:8px;right:8px}.trophy-icon{z-index:1;filter:drop-shadow(0 0 7px #facc15c7);align-content:end;justify-items:center;width:30px;height:30px;display:grid;position:relative}.trophy-icon__cup{background:linear-gradient(#fef3c7 0%,#facc15 48%,#d97706 100%);border-radius:5px 5px 10px 10px;width:22px;height:16px;position:relative;box-shadow:inset 0 2px 3px #ffffff70,inset 0 -3px 4px #78350f42}.trophy-icon__cup:before,.trophy-icon__cup:after{content:"";border:3px solid #facc15;border-radius:999px;width:8px;height:9px;position:absolute;top:3px}.trophy-icon__cup:before{border-right:0;right:calc(100% - 3px)}.trophy-icon__cup:after{border-left:0;left:calc(100% - 3px)}.trophy-icon__stem{background:linear-gradient(#facc15,#d97706);width:8px;height:6px}.trophy-icon__base{background:linear-gradient(#fde68a,#b45309);border-radius:999px 999px 4px 4px;width:22px;height:6px}.board{--pillar-cell-width:clamp(42px, 10cqw, 92px);background:linear-gradient(#050e2057,#050e20b8),radial-gradient(circle at 50% 42%,#14b8a624,#0000 42%),url(../assets/magic-forest-bg.png) 50%/cover no-repeat;border:0;border-radius:0;width:100%;height:100%;min-height:0;padding:clamp(56px,12cqh,100px) clamp(8px,3cqw,32px) clamp(52px,10cqh,86px);display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 90px #0000006b;container-type:size}.board__pillars{grid-template-columns:repeat(6, var(--pillar-cell-width));grid-template-rows:repeat(2,minmax(0,1fr));place-content:stretch center;place-items:center;gap:clamp(6px,2.8cqh,28px) clamp(6px,3cqw,28px);width:100%;height:100%;display:grid}.shuffle-button{z-index:10;letter-spacing:.03em;background:linear-gradient(#fde68a,#f59e0b);border-radius:999px;justify-content:center;align-items:center;gap:8px;min-width:min(280px,100% - 112px);min-height:44px;padding:clamp(10px,1.8svh,14px) 24px;font-size:clamp(.95rem,2vw,1.15rem);display:inline-flex;position:absolute;bottom:clamp(10px,3cqh,22px);right:50%;transform:translate(50%);box-shadow:0 16px 34px #f59e0b47}.shuffle-button__ad-swap{flex:none;width:20px;height:20px;position:relative}.shuffle-button__ad-play,.shuffle-button__ad-label{place-items:center;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.shuffle-button__ad-play{animation:4s ease-in-out infinite shuffle-ad-swap-to-icon}.shuffle-button__ad-label{letter-spacing:.04em;font-size:.7em;font-weight:900;line-height:1;animation:4s ease-in-out infinite shuffle-ad-swap-to-label}.shuffle-button__ad-icon{filter:drop-shadow(0 0 4px #ffffff5c);width:100%;height:100%;display:block;overflow:visible}@keyframes shuffle-ad-swap-to-icon{0%,42%{opacity:1;transform:scale(1)}50%,92%{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}@keyframes shuffle-ad-swap-to-label{0%,42%{opacity:0;transform:scale(.72)}50%,92%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.72)}}.shuffle-button:active:not(:disabled){transform:translate(50%)translateY(1px)scale(.98)}.sound-button{z-index:10;cursor:pointer;opacity:.82;background:radial-gradient(circle at 48% 28%,#ffffff24,#0000 34%),linear-gradient(#1e293bc7,#0f172ad1);border:1px solid #94a3b83d;border-radius:999px;width:clamp(40px,9cqw,54px);min-width:44px;height:clamp(40px,9cqw,54px);min-height:44px;position:absolute;bottom:clamp(10px,3cqh,22px);right:clamp(10px,3cqw,22px);box-shadow:inset 0 1px 2px #ffffff14,0 8px 18px #0003}.sound-button:before{content:"";filter:drop-shadow(0 2px 2px #00000038);background:#cbd5e1;width:27px;height:27px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask:url(../assets/gramophone-icon.png) 50%/contain no-repeat;mask:url(../assets/gramophone-icon.png) 50%/contain no-repeat}.sound-button:after{display:none}.sound-button__mute-line{content:"";opacity:0;pointer-events:none;background:#fca5a5;border-radius:999px;width:28px;height:4px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-38deg)}.sound-button--muted .sound-button__mute-line{opacity:1}.pillar{--slot-size:clamp(20px, min(6.5cqw, 7.2cqh), 44px);--slot-gap:2px;width:var(--pillar-cell-width);cursor:pointer;touch-action:manipulation;min-height:calc(var(--slot-size) + var(--slot-gap) + var(--slot-size) + var(--slot-gap) + var(--slot-size) + var(--slot-gap) + var(--slot-size) + var(--slot-gap) + var(--slot-size) + 34px);flex-direction:column;justify-content:flex-end;align-items:center;display:flex;position:relative}.pillar:focus-visible{outline-offset:8px;outline:2px solid #38bdf8d1}.pillar--selected .pillar__base,.pillar--pressed .pillar__base{outline-offset:3px;outline:2px solid #bae6fdd9}.pillar--breaking{pointer-events:none}.pillar__slots{z-index:2;align-items:center;gap:var(--slot-gap);flex-direction:column;width:100%;margin-bottom:0;display:flex}.pillar__slot{width:var(--slot-size);height:var(--slot-size);border-radius:999px;flex:none;display:block;position:relative}.pillar__slot--filled{background:0 0}.ring{--burst-x:0px;--burst-y:-52px;--burst-rotation:0deg;--ring-break-delay:0s;--ring-thread:#ffffff47;--ring-thread-dark:#0f172a38;--ring-light:#ffffff7a;--ring-shadow:#0f172a4d;width:calc(var(--slot-size) * 1.58);height:calc(var(--slot-size) * 1.08);background:radial-gradient(ellipse at 32% 24%, var(--ring-light) 0 12%, transparent 32%), radial-gradient(ellipse at 60% 72%, #ffffff29, transparent 34%), repeating-radial-gradient(ellipse at 50% 48%, transparent 0 9px, var(--ring-thread) 10px 12px, transparent 13px 19px), repeating-linear-gradient(24deg, transparent 0 8px, var(--ring-thread-dark) 9px 11px, transparent 12px 22px), linear-gradient(155deg, var(--ring-top), var(--ring-color) 46%, var(--ring-bottom));box-shadow:inset 0 4px 7px #ffffff3d, inset 0 -8px 11px #0000003d, 0 4px 4px #ffffff14, 0 5px 8px var(--ring-shadow);border-radius:999px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ring:before,.ring:after{border:2px solid var(--ring-thread);content:"";pointer-events:none;border-bottom-color:#0000;border-right-color:#0000;border-radius:50%;position:absolute;top:12%;bottom:12%;left:10%;right:10%}.ring:before{transform:rotate(-18deg)scaleX(1.12)}.ring:after{border-color:transparent var(--ring-thread-dark) var(--ring-thread-dark) transparent;top:18%;bottom:18%;left:16%;right:16%;transform:rotate(24deg)scaleX(1.2)}.ring--selected,.ring--pressed{z-index:5;transform:translate(-50%,calc(-50% - 8px))scale(1.06)}.ring--flying{z-index:100;transform-origin:0 0;pointer-events:none;will-change:transform;position:fixed;top:0;left:0}.pillar--breaking .ring--breaking{animation:.32s cubic-bezier(.16,.9,.3,1) forwards ring-break;animation-delay:var(--ring-break-delay)}.pillar--breaking .pillar__rod,.pillar--breaking .pillar__base{animation:.32s ease-in forwards pillar-flash}.pillar--appearing{pointer-events:none}.pillar--appearing .pillar__rod,.pillar--appearing .pillar__base{animation:.16s cubic-bezier(.2,.8,.2,1) both pillar-appear}.pillar--appearing .ring{animation:.16s cubic-bezier(.2,.8,.2,1) both ring-appear;animation-delay:calc(var(--slot-index) * 20ms)}.ring-break-particles{z-index:6;width:calc(var(--slot-size) * 1.72);height:var(--slot-size);pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.break-particle{--burst-x:0px;--burst-y:-40px;--burst-delay:0s;--particle-size:clamp(5px, .9vw, 9px);width:var(--particle-size);height:var(--particle-size);background:var(--particle-color);box-shadow:0 0 4px var(--particle-color);opacity:0;animation:.32s cubic-bezier(.16,.9,.3,1) forwards particle-burst;animation-delay:var(--burst-delay);border-radius:999px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.35)}.break-particle[data-particle-color=yellow]{--particle-color:#facc15}.break-particle[data-particle-color=red]{--particle-color:#ef4444}.break-particle[data-particle-color=green]{--particle-color:#84cc16}.break-particle[data-particle-color=blue]{--particle-color:#38bdf8}.break-particle[data-particle-color=purple]{--particle-color:#9333ea}.break-particle[data-particle-color=orange]{--particle-color:#fb923c}.break-particle[data-particle-color=pink]{--particle-color:#ec4899}.break-particle[data-particle-color=teal]{--particle-color:#14b8a6}.ring__hole{z-index:2;background:radial-gradient(circle at 42% 42%, #ffffff94 0 10%, transparent 24%), conic-gradient(from 20deg, var(--ring-thread) 0 24%, transparent 25% 42%, var(--ring-thread-dark) 43% 62%, transparent 63% 100%), radial-gradient(ellipse at 50% 50%, var(--ring-top), var(--ring-color) 62%, var(--ring-bottom));border-radius:999px;width:28%;height:46%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 2px 3px #ffffff47,inset 0 -3px 4px #00000029,0 0 0 1px #ffffff1f}.ring[data-ring-color=yellow]{--ring-top:#fde68a;--ring-color:#facc15;--ring-bottom:#d97706}.ring[data-ring-color=red]{--ring-top:#fca5a5;--ring-color:#ef4444;--ring-bottom:#b91c1c}.ring[data-ring-color=green]{--ring-top:#bef264;--ring-color:#84cc16;--ring-bottom:#4d7c0f}.ring[data-ring-color=blue]{--ring-top:#bae6fd;--ring-color:#38bdf8;--ring-bottom:#0284c7}.ring[data-ring-color=purple]{--ring-top:#d8b4fe;--ring-color:#9333ea;--ring-bottom:#581c87}.ring[data-ring-color=orange]{--ring-top:#fed7aa;--ring-color:#fb923c;--ring-bottom:#c2410c}.ring[data-ring-color=pink]{--ring-top:#fbcfe8;--ring-color:#ec4899;--ring-bottom:#be185d}.ring[data-ring-color=teal]{--ring-top:#99f6e4;--ring-color:#14b8a6;--ring-bottom:#0f766e}.pillar__rod{z-index:1;background:linear-gradient(#f8fafc,#94a3b8);border-radius:999px 999px 6px 6px;width:7px;position:absolute;bottom:5px;left:50%;transform:translate(-50%);box-shadow:0 0 20px #e2e8f038}.pillar[data-capacity="3"] .pillar__rod{height:calc(var(--slot-size) + var(--slot-gap) + var(--slot-size) + var(--slot-gap) + var(--slot-size))}.pillar[data-capacity="4"] .pillar__rod{height:calc(var(--slot-size) + var(--slot-gap) + var(--slot-size) + var(--slot-gap) + var(--slot-size) + var(--slot-gap) + var(--slot-size))}.pillar[data-capacity="5"] .pillar__rod{height:calc(var(--slot-size) + var(--slot-gap) + var(--slot-size) + var(--slot-gap) + var(--slot-size) + var(--slot-gap) + var(--slot-size) + var(--slot-gap) + var(--slot-size))}.pillar__base{z-index:3;background:linear-gradient(#fbbf24,#f97316);border-radius:999px;width:min(54px,100%);height:11px;position:relative;box-shadow:0 8px 18px #f973163d}.pillar__label{display:none}.board--tutorial{--pillar-cell-width:clamp(66px, 11cqw, 104px);background:linear-gradient(#040d1f1f,#040d1fb8),radial-gradient(circle at 50% 48%,#38bdf833,#0000 34%),url(../assets/magic-forest-bg.png) 50%/cover no-repeat;padding:clamp(150px,24cqh,205px) clamp(14px,4cqw,42px) clamp(66px,10cqh,92px)}.board--tutorial:before{z-index:0;content:"";pointer-events:none;background:radial-gradient(circle at 50% 44%,#0000 0 24%,#0206173d 62%),linear-gradient(#02061738,#0000 28%);position:absolute;top:0;bottom:0;left:0;right:0}.board--tutorial .board__pillars{z-index:2;align-content:center;row-gap:18px;position:relative}.board__pillars--tutorial-intro{grid-template-columns:repeat(2, var(--pillar-cell-width));grid-template-rows:minmax(0,1fr);column-gap:clamp(64px,10cqw,124px)}.board__pillars--tutorial-practice{grid-template-columns:repeat(4, var(--pillar-cell-width));grid-template-rows:minmax(0,1fr);column-gap:clamp(12px,3.8cqw,42px)}.board--tutorial .pillar{--slot-size:clamp(30px, min(7.5cqw, 8.5cqh), 52px);--slot-gap:3px;min-height:calc(var(--slot-size) + var(--slot-gap) + var(--slot-size) + var(--slot-gap) + var(--slot-size) + 42px);transition:filter .18s,opacity .18s,transform .18s}.board--tutorial .pillar__base{width:min(62px,92%);height:12px}.board--tutorial .sound-button{opacity:.68}.tutorial-card{top:max(16px, env(safe-area-inset-top));z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;background:radial-gradient(circle at 50% 0,#38bdf830,#0000 58%),#08142ad6;border:1px solid #7dd3fc57;border-radius:clamp(20px,4cqw,28px);justify-items:center;width:min(560px,100% - 104px);min-height:116px;padding:clamp(12px,2.4cqh,20px) clamp(16px,4cqw,30px) 14px;display:grid;position:absolute;left:50%;transform:translate(-50%);box-shadow:inset 0 1px #ffffff1a,0 18px 48px #0000004d}.tutorial-card__level{color:#7dd3fc;letter-spacing:.14em;text-transform:uppercase;background:#0ea5e92e;border-radius:999px;padding:3px 10px;font-size:clamp(.6rem,1.6cqw,.72rem);font-weight:900;line-height:1.5}.tutorial-card__title{color:#fff7d6;text-shadow:0 3px 18px #fbbf242e;margin-top:5px;font-size:clamp(1.2rem,min(4.6cqw,3.4cqh),2rem);line-height:1.12}.tutorial-card__hint{color:#cbd5e1;margin-top:4px;font-size:clamp(.72rem,min(2.3cqw,2cqh),.96rem);line-height:1.25}.tutorial-progress{gap:9px;margin-top:10px;display:flex}.tutorial-progress__candy{background:#0f172ab8;border:2px solid #94a3b87a;border-radius:999px;width:25px;height:12px;position:relative;transform:rotate(-5deg)}.tutorial-progress__candy:after{border-radius:inherit;content:"";background:#ffffff2e;position:absolute;top:2px;bottom:2px;left:5px;right:5px}.tutorial-progress__candy--done{background:linear-gradient(135deg,#fde68a,#f59e0b);border-color:#fde68a;box-shadow:0 0 14px #fbbf246b}.tutorial-progress__candy--active{border-color:#7dd3fce0;animation:1.2s ease-in-out infinite tutorial-progress-pulse}.pillar--tutorial-disabled{cursor:default;filter:saturate(.5)brightness(.72);opacity:.48}.pillar--tutorial-source,.pillar--tutorial-target{z-index:5;filter:brightness(1.1)drop-shadow(0 0 18px #7dd3fc5c)}.pillar--tutorial-source:after,.pillar--tutorial-target:after{z-index:-1;content:"";pointer-events:none;border:3px solid #7dd3fcc7;border-radius:36px;animation:1.05s ease-in-out infinite tutorial-target-pulse;position:absolute;top:-12px;bottom:-10px;left:-9px;right:-9px;box-shadow:0 0 0 6px #38bdf814,0 0 30px #38bdf847}.pillar--tutorial-target:after{border-color:#fde68ae0;box-shadow:0 0 0 6px #fbbf2417,0 0 30px #fbbf2452}.tutorial-pointer{z-index:12;object-fit:contain;transform-origin:0 0;filter:drop-shadow(0 9px 12px #0000005c);pointer-events:none;width:62px;height:62px;animation:.9s cubic-bezier(.36,.7,.3,1) infinite tutorial-tap;display:block;position:absolute;top:calc(50% + 1px);left:calc(50% + 8px)}.pillar--tutorial-target .tutorial-pointer{filter:drop-shadow(0 9px 12px #0000005c)drop-shadow(0 0 9px #fde68a5c)}.tutorial-celebration{z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;background:radial-gradient(circle at 50% 48%,#0891b247,#0000 42%),#020817c7;grid-template-rows:minmax(0,1fr) auto auto auto minmax(20px,.55fr);place-items:center;padding:clamp(24px,7cqh,64px) 20px;animation:.32s ease-out both celebration-enter;display:grid;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.tutorial-celebration__glow{aspect-ratio:1;background:repeating-conic-gradient(from 0deg, #38bdf82e 0 7deg, transparent 7deg 20deg);filter:blur(2px);opacity:.78;border-radius:50%;width:min(68cqw,540px);animation:7s linear infinite celebration-glow;position:absolute;top:46%;left:50%;transform:translate(-50%,-50%)}.tutorial-celebration__cat{z-index:2;object-fit:contain;filter:drop-shadow(0 18px 32px #00000061);align-self:end;width:clamp(150px,min(31cqw,30cqh),265px);max-height:35cqh;animation:.9s cubic-bezier(.16,.9,.3,1) both cat-celebrate;-webkit-mask-image:radial-gradient(57% 54%,#000 56%,#0000 100%);mask-image:radial-gradient(57% 54%,#000 56%,#0000 100%)}.tutorial-celebration__title{z-index:2;color:#fef3c7;text-shadow:0 3px #b45309b8,0 0 34px #fbbf246b;font-size:clamp(2.1rem,min(7cqw,6cqh),4rem);line-height:1}.tutorial-celebration__hint{z-index:2;color:#e0f2fe;margin-top:9px;font-size:clamp(.9rem,2.5cqw,1.15rem)}.tutorial-celebration__reward{z-index:2;color:#fde68a;background:linear-gradient(#fbbf2442,#d9770633);border:1px solid #fde68a94;border-radius:999px;margin-top:14px;padding:8px 18px;font-size:clamp(1rem,3cqw,1.3rem);font-weight:900;box-shadow:0 10px 28px #f59e0b33}.tutorial-celebration__sparkle{--angle:calc(var(--sparkle-index) * 20deg);z-index:3;background:hsl(calc(var(--sparkle-index) * 38deg) 92% 67%);opacity:0;width:9px;height:17px;transform:translate(-50%, -50%) rotate(var(--angle)) translateY(-40px);animation:1.1s cubic-bezier(.16,.9,.3,1) both celebration-sparkle;animation-delay:calc(var(--sparkle-index) * 24ms);border-radius:999px;position:absolute;top:50%;left:50%}.main-unlocked-banner{z-index:24;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#061f23e0;border:1px solid #86efac70;border-radius:18px;align-items:center;gap:12px;max-width:min(520px,100% - 250px);padding:11px 16px 11px 11px;animation:.5s cubic-bezier(.16,.9,.3,1) both main-banner-enter;display:flex;position:absolute;top:clamp(12px,2.8cqh,22px);left:clamp(12px,2.8cqw,22px);box-shadow:0 16px 38px #00000047}.main-unlocked-banner__check{color:#052e2b;background:linear-gradient(145deg,#86efac,#14b8a6);border-radius:999px;flex:none;place-items:center;width:38px;height:38px;font-size:1.25rem;font-weight:1000;display:grid;box-shadow:0 0 20px #34d39947}.main-unlocked-banner__copy{gap:2px;line-height:1.2;display:grid}.main-unlocked-banner__copy strong{color:#dcfce7;font-size:clamp(.9rem,2cqw,1.08rem)}.main-unlocked-banner__copy span{color:#a7f3d0;font-size:clamp(.68rem,1.5cqw,.84rem)}@keyframes ring-break{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}24%{opacity:1;transform:translate(-50%,calc(-50% - 8px))scale(1.08)}to{opacity:0;transform:translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(.22) rotate(var(--burst-rotation))}}@keyframes pillar-appear{0%{opacity:0;transform:translateY(18px)scale(.82)}65%{opacity:1;transform:translateY(-4px)scale(1.04)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ring-appear{0%{opacity:0;transform:translate(-50%,calc(20px - 50%))scale(.45)}72%{opacity:1;transform:translate(-50%,calc(-50% - 3px))scale(1.08)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes pillar-flash{0%{opacity:1}45%{opacity:.65}to{opacity:0}}@keyframes particle-burst{0%{opacity:0;transform:translate(-50%,-50%)scale(.35)}18%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(1)}}@keyframes trophy-glow{0%,to{opacity:.56;transform:scale(.92)}50%{opacity:1;transform:scale(1.1)}}@keyframes tutorial-progress-pulse{0%,to{transform:rotate(-5deg)scale(1);box-shadow:0 0 #38bdf83d}50%{transform:rotate(-5deg)scale(1.08);box-shadow:0 0 0 6px #38bdf800}}@keyframes tutorial-target-pulse{0%,to{opacity:.6;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}@keyframes tutorial-tap{0%,to{transform:translateY(2px)scale(.96)rotate(-5deg)}45%{transform:translateY(-7px)scale(1.04)rotate(-5deg)}}@keyframes celebration-enter{0%{opacity:0}to{opacity:1}}@keyframes celebration-glow{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}@keyframes cat-celebrate{0%{opacity:0;transform:translateY(24px)scale(.72)}66%{opacity:1;transform:translateY(-7px)scale(1.06)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes celebration-sparkle{0%{opacity:0;transform:translate(-50%, -50%) rotate(var(--angle)) translateY(-32px) scale(.4)}20%{opacity:1}to{opacity:0;transform:translate(-50%, -50%) rotate(var(--angle)) translateY(-230px) scale(1)}}@keyframes main-banner-enter{0%{opacity:0;transform:translateY(-16px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@media (min-width:781px) and (min-height:621px) and (orientation:landscape){.board:not(.board--tutorial){--pillar-cell-width:clamp(104px, 8.5cqw, 164px)}.board:not(.board--tutorial) .board__pillars{justify-content:space-between;column-gap:0;width:76cqw;margin-inline-start:auto;margin-inline-end:auto}.board:not(.board--tutorial) .pillar{--slot-size:clamp(40px, min(3.4cqw, 7.4cqh), 64px)}.board:not(.board--tutorial) .pillar__rod{width:8px}.board:not(.board--tutorial) .pillar__base{width:min(78px,100%);height:14px}}@media (max-width:780px){.hud{flex-direction:row;align-items:stretch;gap:6px}.score-counter{border-radius:14px;min-width:78px;padding:6px 8px}.score-counter__label{font-size:.55rem}.score-counter__value{font-size:clamp(.9rem,4.2vw,1.25rem)}.hud-button--leaderboard{border-radius:14px;width:44px;min-width:44px;min-height:44px}.board{--pillar-cell-width:clamp(36px, 11.8cqw, 64px);padding:clamp(54px,10cqh,82px) clamp(8px,2.4cqw,16px) clamp(50px,9cqh,74px)}.board__pillars{grid-template-columns:repeat(6, var(--pillar-cell-width));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(4px,2cqh,14px) clamp(4px,2cqw,14px)}.pillar{--slot-size:clamp(18px, min(6.2cqw, 6cqh), 31px);--slot-gap:1px;min-height:calc(var(--slot-size) + var(--slot-gap) + var(--slot-size) + var(--slot-gap) + var(--slot-size) + var(--slot-gap) + var(--slot-size) + var(--slot-gap) + var(--slot-size) + 24px)}.pillar__rod{width:5px}.pillar__base{width:min(38px,100%);height:8px}.shuffle-button{min-width:min(220px,100% - 112px);padding-inline-start:18px;padding-inline-end:18px;font-size:.9rem}.sound-button{width:38px;height:38px}.board--tutorial{--pillar-cell-width:clamp(60px, 18cqw, 78px);padding:clamp(142px,22cqh,184px) 10px clamp(58px,9cqh,78px)}.board--tutorial .board__pillars--tutorial-intro{grid-template-columns:repeat(2, var(--pillar-cell-width));grid-template-rows:minmax(0,1fr);column-gap:clamp(58px,16cqw,88px)}.board--tutorial .board__pillars--tutorial-practice{grid-template-columns:repeat(4, var(--pillar-cell-width));grid-template-rows:minmax(0,1fr);column-gap:clamp(5px,2cqw,12px)}.board--tutorial .pillar{--slot-size:clamp(28px, min(8cqw, 6.2cqh), 38px)}.tutorial-card{width:min(520px,100% - 76px)}.tutorial-pointer{width:54px;height:54px;top:calc(50% + 1px);left:calc(50% + 6px)}.main-unlocked-banner{width:min(390px,100% - 28px);max-width:none;animation:.5s cubic-bezier(.16,.9,.3,1) both main-banner-enter-mobile;top:clamp(56px,9cqh,74px);left:50%;transform:translate(-50%)}}@keyframes main-banner-enter-mobile{0%{opacity:0;transform:translate(-50%,-16px)scale(.96)}to{opacity:1;transform:translate(-50%)scale(1)}}@media (max-width:420px){.board{--pillar-cell-width:clamp(34px, 11.4cqw, 52px);padding-inline-start:clamp(8px,2cqw,12px);padding-inline-end:clamp(8px,2cqw,12px)}.board__pillars{column-gap:clamp(4px,1.4cqw,10px)}.pillar{--slot-size:clamp(17px, min(5.8cqw, 5.8cqh), 27px)}}@media (max-width:780px) and (orientation:portrait){.board{--pillar-cell-width:clamp(50px, 18cqw, 74px);padding:clamp(58px,9cqh,82px) clamp(14px,4cqw,26px) clamp(58px,9cqh,76px)}.board__pillars{grid-template-columns:repeat(4, var(--pillar-cell-width));grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(6px,2cqh,18px) clamp(8px,4cqw,22px)}.pillar{--slot-size:clamp(18px, min(8cqw, 5.4cqh), 34px)}.board--tutorial{--pillar-cell-width:clamp(62px, 18cqw, 76px)}.board--tutorial .board__pillars--tutorial-intro{grid-template-columns:repeat(2, var(--pillar-cell-width));grid-template-rows:minmax(0,1fr)}.board--tutorial .board__pillars--tutorial-practice{grid-template-columns:repeat(4, var(--pillar-cell-width));grid-template-rows:minmax(0,1fr)}.board--tutorial .pillar{--slot-size:clamp(30px, min(8.5cqw, 5.8cqh), 39px)}}@media (max-height:620px){.hud{top:8px}.score-counter{padding-block-start:4px;padding-block-end:4px}.game-screen{padding-block-start:0;padding-block-end:0}.pillar{--slot-size:clamp(15px, min(5.4cqw, 5cqh), 25px);--slot-gap:1px;min-height:calc(5 * var(--slot-size) + 4 * var(--slot-gap) + 16px)}.board__pillars{row-gap:clamp(4px,1.8cqh,12px)}.board{padding:clamp(56px,9cqh,70px) clamp(8px,2cqw,16px) 64px}.shuffle-button{padding-block-start:8px;padding-block-end:8px}.board--tutorial{--pillar-cell-width:clamp(58px, 10cqw, 82px);padding:116px 10px 46px}.board--tutorial .pillar{--slot-size:clamp(24px, min(6.4cqw, 6.5cqh), 34px)}.tutorial-card{min-height:96px;padding-block-start:8px;padding-block-end:8px}.tutorial-progress{margin-top:6px}.tutorial-pointer{width:42px;height:42px;top:calc(50% + 1px);left:calc(50% + 5px)}.tutorial-celebration{grid-template-rows:1fr auto auto 1fr;grid-template-columns:minmax(0,.9fr) minmax(220px,1.1fr)}.tutorial-celebration__cat{grid-row:1/-1;align-self:center}.tutorial-celebration__title,.tutorial-celebration__hint,.tutorial-celebration__reward{grid-column:2}}@media (prefers-reduced-motion:reduce){.pillar--breaking .ring--breaking,.pillar--breaking .pillar__rod,.pillar--breaking .pillar__base,.pillar--appearing .ring,.pillar--appearing .pillar__rod,.pillar--appearing .pillar__base,.break-particle,.tutorial-progress__candy--active,.pillar--tutorial-source:after,.pillar--tutorial-target:after,.tutorial-pointer,.tutorial-celebration__glow,.tutorial-celebration__cat,.tutorial-celebration__sparkle,.main-unlocked-banner{animation-duration:1ms;animation-iteration-count:1;animation-delay:0s}}