@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap";.sparkle-cabinet{--sss-teal:#2ec4b6;--sss-teal-dark:#1b9e92;--sss-pink:#ff6fa5;--sss-pink-dark:#e8548c;--sss-purple:#9b5de5;--sss-purple-dark:#7c3fcb;--sss-lblue:#6ec6ff;--sss-lblue-dark:#4ba3e3;--sss-cream:#fff9f0;--sss-bg1:#b48cf2;--sss-bg2:#8ad8ff;--sss-shelf:#fff;--sss-ink:#4a3b6b;--sss-wood:#f5dfbe;--sss-wood-mid:#e7c594;--sss-wood-dark:#cf9a54;--sss-wood-edge:#ae7c3c;--sss-cubby:#fcf4e4;--sss-cubby-shade:#ead3ac;font-family:"Baloo 2",Segoe UI,Trebuchet MS,system-ui,sans-serif}.sparkle-cabinet .game-marquee h1{color:var(--sss-teal)}.sparkle-cabinet .game-marquee .sub{color:var(--sss-pink)}.sparkle-cabinet .sparkle-game{background:linear-gradient(160deg, var(--sss-bg1) 0%, var(--sss-bg2) 100%);width:100%;color:var(--sss-ink);border-radius:26px;padding:18px 10px 22px;position:relative;overflow:hidden;box-shadow:0 16px 40px #2b27404d}.sparkle-cabinet .sparkle-game:before{content:"";z-index:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff17 0 2px,#0000 2px 54px),repeating-linear-gradient(90deg,#ffffff17 0 2px,#0000 2px 54px);position:absolute;inset:0;mask-image:linear-gradient(#0000 0%,#000 45%)}.sparkle-cabinet .hud{z-index:2;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 6px;padding:0 8px;display:flex;position:relative}.sparkle-cabinet .pill{background:#ffffffe6;border-radius:999px;align-items:center;gap:5px;padding:5px 12px;font-size:12px;font-weight:800;display:flex;box-shadow:0 3px 8px #4a3b6b29}.sparkle-cabinet .pill span{color:var(--sss-purple)}.sparkle-cabinet .sss-btn{background:var(--sss-pink);box-shadow:0 3px 0 var(--sss-pink-dark), 0 6px 12px #e8548c59;color:#fff;cursor:pointer;border:none;border-radius:999px;padding:6px 14px;font-family:inherit;font-size:12px;font-weight:800;transition:transform .1s,box-shadow .1s}.sparkle-cabinet .sss-btn:active{box-shadow:0 1px 0 var(--sss-pink-dark);transform:translateY(2px)}.sparkle-cabinet .sss-btn.teal{background:var(--sss-teal);box-shadow:0 3px 0 var(--sss-teal-dark), 0 6px 12px #2ec4b659}.sparkle-cabinet .sss-btn.teal:active{box-shadow:0 1px 0 var(--sss-teal-dark)}.sparkle-cabinet .sss-btn:focus-visible{outline-offset:2px;outline:3px solid #fff}.sparkle-cabinet .card .sss-btn{padding:10px 22px;font-size:15px}.sparkle-cabinet .hint{z-index:2;color:#fffffff2;text-align:center;max-width:420px;margin:0 auto 8px;padding:0 16px;font-size:12px;font-weight:600;transition:opacity .8s;position:relative}.sparkle-cabinet .hint.fade{opacity:0}.sparkle-cabinet #board{z-index:2;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:680px;margin:0 auto;padding:0 8px;display:grid;position:relative}@media (width>=720px){.sparkle-cabinet #board{grid-template-columns:1fr 1fr 1fr;gap:12px;max-width:1080px}}.sparkle-cabinet .shelf{background:linear-gradient(180deg, var(--sss-wood) 0%, var(--sss-wood-mid) 78%, var(--sss-wood-dark) 100%);box-shadow:0 5px 0 var(--sss-wood-edge), 0 12px 20px #4a3b6b47, inset 0 2px 3px #ffffff8c, inset 0 -3px 6px #8c602c59;border-radius:12px 12px 10px 10px;grid-template-columns:repeat(3,1fr);gap:6px;padding:7px 8px 14px;transition:transform .15s,box-shadow .15s;display:grid;position:relative}.sparkle-cabinet .shelf:before{content:"";pointer-events:none;opacity:.7;background:repeating-linear-gradient(90deg,#9669370d 0 3px,#0000 3px 9px);border-radius:8px;position:absolute;inset:6px 8px 12px}.sparkle-cabinet .shelf.droppable{cursor:pointer}.sparkle-cabinet .shelf.drop-glow{box-shadow:0 5px 0 var(--sss-teal-dark), 0 14px 24px #2ec4b666, inset 0 0 0 3px #2ec4b699;transform:translateY(-3px)}.sparkle-cabinet .slot{aspect-ratio:4/5;background:linear-gradient(180deg, var(--sss-cubby-shade) 0%, var(--sss-cubby) 30%);border-radius:9px;justify-content:center;align-items:flex-end;min-width:0;display:flex;position:relative;box-shadow:inset 0 3px 5px #78522866,inset 0 -2px #fff9}.sparkle-cabinet .slot.filled{background:linear-gradient(180deg, var(--sss-cubby-shade) 0%, var(--sss-cubby) 45%)}.sparkle-cabinet .slot.dirty{box-shadow:inset 0 3px 6px #78522880,inset 0 0 0 2px #96693740}.sparkle-cabinet .item{aspect-ratio:40/48;cursor:grab;filter:drop-shadow(0 3px 3px #4a3b6b40);touch-action:none;user-select:none;background:0 0;border:none;justify-content:center;align-items:flex-end;width:92%;max-width:64px;height:auto;padding:0;transition:transform .15s;display:flex}.sparkle-cabinet .item.dragging-src{opacity:.25;transform:none!important}.sparkle-cabinet .item:hover{transform:translateY(-4px)scale(1.05)}.sparkle-cabinet .item:focus-visible{outline:3px solid var(--sss-teal);outline-offset:2px;border-radius:10px}.sparkle-cabinet .item.selected{filter:drop-shadow(0 0 10px #ffe66df2)drop-shadow(0 6px 6px #4a3b6b4d);animation:.5s infinite alternate sssBounceSel}@keyframes sssBounceSel{0%{transform:translateY(-8px)scale(1.12)}to{transform:translateY(-14px)scale(1.12)}}.sparkle-cabinet .item svg{width:100%;height:100%}.sparkle-cabinet .item.popping{animation:.45s forwards sssPopOut}@keyframes sssPopOut{0%{transform:scale(1)}40%{opacity:1;transform:scale(1.3)rotate(6deg)}to{opacity:0;transform:scale(0)rotate(-15deg)}}.sparkle-cabinet .item.landing{animation:.3s sssLandIn}@keyframes sssLandIn{0%{transform:translateY(-16px)scale(1.1)}60%{transform:translateY(2px)scale(.96)}to{transform:translateY(0)scale(1)}}.sparkle-cabinet .dirt{aspect-ratio:40/48;pointer-events:none;filter:drop-shadow(0 2px 2px #4a3b6b4d);user-select:none;justify-content:center;align-items:flex-end;width:88%;max-width:60px;height:auto;animation:2.6s ease-in-out infinite sssDirtIdle;display:flex}.sparkle-cabinet .dirt svg{width:100%;height:100%}@keyframes sssDirtIdle{0%,to{transform:translateY(0)rotate(-1.5deg)}50%{transform:translateY(-1.5px)rotate(1.5deg)}}.sparkle-cabinet .dirt.sweeping{animation:.5s forwards sssSweepAway}@keyframes sssSweepAway{0%{opacity:1;transform:scale(1)rotate(0)}45%{opacity:1;transform:scale(1.2)rotate(10deg)}to{opacity:0;transform:translateY(-10px)scale(0)rotate(-40deg)}}.sparkle-cabinet .sss-overlay{z-index:100;backdrop-filter:blur(4px);background:#4a3b6b8c;border-radius:26px;justify-content:center;align-items:center;padding:20px;display:none;position:absolute;inset:0}.sparkle-cabinet .sss-overlay.show{display:flex}.sparkle-cabinet .card{text-align:center;background:#fff;border-radius:22px;width:100%;max-width:320px;padding:26px 24px;animation:.35s cubic-bezier(.34,1.56,.64,1) sssCardPop;box-shadow:0 20px 50px #0000004d}@keyframes sssCardPop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.sparkle-cabinet .card h2{color:var(--sss-purple);margin:0 0 6px;font-size:28px}.sparkle-cabinet .card p{color:var(--sss-ink);margin:0 0 20px;font-weight:600}.sparkle-cabinet .card .big{margin-bottom:8px;font-size:48px}@media (prefers-reduced-motion:reduce){.sparkle-cabinet *,.sss-ghost,.sss-sparkle,.sss-poof,.sss-bubblePop,.sss-bubble{transition:none!important;animation:none!important}}.sss-bubble{z-index:0;pointer-events:none;background:#ffffff2e;border-radius:50%;animation:linear infinite sssFloatUp;position:fixed}@keyframes sssFloatUp{0%{transform:translateY(110vh)scale(1)}to{transform:translateY(-15vh)scale(1.15)}}.sss-ghost{z-index:60;filter:drop-shadow(0 12px 14px #4a3b6b66);pointer-events:none;position:fixed;transform:scale(1.15)rotate(-5deg)}.sss-ghost svg{width:100%;height:100%}.sss-sparkle{z-index:50;pointer-events:none;font-size:20px;animation:.8s ease-out forwards sssSpark;position:fixed}@keyframes sssSpark{0%{opacity:1;transform:translate(0)scale(.4)rotate(0)}to{opacity:0;transform:translate(var(--dx), var(--dy)) scale(1.4) rotate(180deg)}}.sss-poof{z-index:49;pointer-events:none;background:radial-gradient(circle,#fff 0%,#fff0 70%);border-radius:50%;width:26px;height:26px;animation:.6s ease-out forwards sssPoofAnim;position:fixed}@keyframes sssPoofAnim{0%{opacity:.95;transform:translate(0)scale(.5)}to{opacity:0;transform:translate(var(--dx), var(--dy)) scale(2.2)}}.sss-bubblePop{z-index:51;pointer-events:none;animation:sssBubbleRise var(--dur) ease-out forwards;background:radial-gradient(circle at 32% 28%,#fffffff2 0%,#ffffff40 22%,#a0dcff2e 60%,#ffffff0d 100%);border:2px solid #ffffffbf;border-radius:50%;position:fixed;box-shadow:inset -3px -3px 6px #6ec6ff73,0 0 8px #fff6}.sss-bubblePop:after{content:"";background:#fffffff2;border-radius:50%;width:26%;height:18%;position:absolute;top:16%;left:22%;transform:rotate(-25deg)}@keyframes sssBubbleRise{0%{opacity:0;transform:translate(0)scale(.3)}12%{opacity:1;transform:translate(calc(var(--dx) * .15), calc(var(--dy) * .15)) scale(.9)}75%{opacity:1}to{opacity:0;transform:translate(var(--dx), var(--dy)) scale(1.15)}}