.slimepop-app{min-height:100dvh;display:flex;flex-direction:column}.slimepop-main{flex:1;display:flex;flex-direction:column;align-items:center;padding:calc(var(--space-16) + var(--space-4)) var(--space-4) var(--space-8);gap:var(--space-4);max-width:480px;margin:0 auto;width:100%;position:relative}.slimepop-lobby{width:100%;background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-2xl);padding:var(--space-8);display:flex;flex-direction:column;align-items:center;gap:var(--space-5);text-align:center}.slimepop-lobby__title{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:900;letter-spacing:-.03em}.slimepop-lobby__title span{color:var(--game-accent)}.slimepop-lobby__emoji{font-size:64px;line-height:1;animation:idleWobble 3s ease-in-out infinite}.slimepop-lobby__desc{color:var(--color-text-secondary);font-size:var(--text-base);max-width:32ch;line-height:1.6}.slimepop-status{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);padding:var(--space-3) var(--space-4)}.level-badge{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;color:var(--game-accent);background:var(--game-accent-subtle);border:1px solid var(--game-accent);border-radius:var(--radius-badge);padding:var(--space-1) var(--space-3)}.level-badge__number{font-size:var(--text-base);font-weight:900}.level-goal-info{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:2px}.level-goal-title{font-size:var(--text-xs);font-weight:700;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em}.level-goal-text{font-size:var(--text-sm);font-weight:800;color:var(--color-text-primary)}.progress-bar-container{width:100%;display:flex;flex-direction:column;gap:var(--space-1)}.progress-bar-track{width:100%;height:8px;background:var(--color-surface-sunken);border-radius:var(--radius-full);overflow:hidden;border:1px solid var(--color-border-subtle)}.progress-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--game-accent-muted),var(--game-accent));border-radius:var(--radius-full);transition:width var(--duration-normal) var(--ease-out)}.progress-bar-label{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:var(--color-text-secondary)}.preview-panel{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--color-surface-sunken);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);padding:var(--space-2-5) var(--space-4)}.preview-label{font-size:var(--text-xs);font-weight:800;color:var(--color-text-secondary);letter-spacing:.05em;text-transform:uppercase}.queue{display:flex;gap:var(--space-2);justify-content:flex-end}.mini{width:36px;height:36px;border-radius:var(--radius-lg);display:grid;place-items:center;font-size:20px;position:relative;box-shadow:inset 0 3px #ffffff4d,inset 0 -4px #00000026,0 4px 6px #0003}.mini:first-child{outline:2px solid var(--game-accent);animation:nextPulse 1.2s ease-in-out infinite}@keyframes nextPulse{50%{transform:scale(1.08);filter:brightness(1.15)}}.board-wrap{width:100%;background:linear-gradient(180deg,hsla(var(--game-accent-h),45%,12%,.96),hsla(var(--game-accent-h),50%,6%,.96));border:1px solid var(--color-border-default);border-radius:var(--radius-2xl);padding:var(--space-3);box-shadow:0 12px 32px var(--game-accent-glow),0 4px 12px #00000080;display:flex;flex-direction:column;gap:var(--space-3);position:relative}.board{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:var(--space-1-5);width:100%;aspect-ratio:1}.tile{border:0;border-radius:var(--radius-xl);color:#fff;font-size:clamp(20px,6vw,32px);text-shadow:0 2px 3px rgba(0,0,0,.25);box-shadow:inset 0 4px #ffffff59,inset 0 -5px #00000026,0 6px 10px #00000040;cursor:pointer;transition:transform var(--duration-fast) var(--ease-out),filter var(--duration-fast) ease,opacity var(--duration-fast) ease;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;animation:idleWobble 3.2s ease-in-out infinite;display:flex;align-items:center;justify-content:center;min-height:44px}.tile .face{position:relative;z-index:2;display:block;transform:scale(.92);filter:drop-shadow(0 3px 3px rgba(0,0,0,.22))}.tile:before,.mini:before{content:"";position:absolute;left:18%;top:18%;width:18%;height:18%;border-radius:var(--radius-full);background:#fffc;box-shadow:14px 2px 0 -2px #ffffffa8;pointer-events:none}.tile:after,.mini:after{content:"";position:absolute;left:35%;bottom:20%;width:30%;height:10%;border-radius:var(--radius-full);background:#460f5a3d;pointer-events:none}@keyframes idleWobble{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-1.5px) scale(1.02)}}.tile.empty{background:#ffffff0d;box-shadow:inset 0 0 0 1.5px var(--color-border-subtle);animation:none;opacity:.45;cursor:default}.tile.empty:before,.tile.empty:after{display:none}.tile.vanish{animation:vanishPop var(--duration-normal) var(--ease-in) forwards!important}.tile.reappear{animation:reappear .28s var(--ease-spring) forwards!important}@keyframes vanishPop{40%{transform:scale(1.15);filter:brightness(1.5)}to{transform:scale(.05);opacity:0}}@keyframes reappear{0%{transform:scale(.1);opacity:.1}75%{transform:scale(1.12);opacity:1}to{transform:scale(1);opacity:1}}.tile:active:not(.empty){transform:scale(.9)}.tile.connected{animation:connectedPulse .4s ease-in-out infinite alternate;outline:3.5px solid #fff;z-index:var(--z-raised)}.tile.target{animation:targetPulse .36s ease-in-out infinite alternate;outline:4px solid var(--color-status-warning);z-index:calc(var(--z-raised) + 2)}.tile.dimmed{filter:saturate(.6) brightness(.7)}.tile.bad{animation:wobble .24s var(--ease-inout)}.tile.tool-target{transform:scale(.85);outline:2px solid rgba(255,255,255,.5);animation:none!important}.tile.tool-preview{transform:scale(.85);outline:3px solid var(--game-accent);filter:brightness(1.2) saturate(1.1);z-index:calc(var(--z-raised) + 5);animation:none!important}.tile.tool-preview-center{outline-color:var(--color-status-warning);box-shadow:inset 0 4px #fff6,inset 0 -5px #00000026,0 0 0 4px #ffe85c40,0 6px 10px #00000040}@keyframes connectedPulse{0%{transform:scale(1);filter:brightness(1.1)}to{transform:scale(1.08);filter:brightness(1.3)}}@keyframes targetPulse{0%{transform:scale(1.02)}to{transform:scale(1.12)}}@keyframes wobble{25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-2px)}}.s1{background:linear-gradient(160deg,#55f4ff,#04a9e8)}.s2{background:linear-gradient(160deg,#b8ff45,#1fc442)}.s3{background:linear-gradient(160deg,#d28aff,#8133e8)}.s4{background:linear-gradient(160deg,#ff72c9,#e81d7d)}.s5{background:linear-gradient(160deg,#ffc04d,#ff6b1a)}.s6{background:linear-gradient(160deg,#fff25c,#ffbf00)}.s7{background:linear-gradient(160deg,#36e6b8,#087f7c)}.s8{background:linear-gradient(160deg,#ff7b5c,#b12cff)}.s9{background:linear-gradient(160deg,#ff96f2,#7b25d9)}.s10{background:linear-gradient(160deg,#f9ffff,#74ecff);color:#2b1764}.s11{background:linear-gradient(160deg,#fff9d7,#ffd84f,#ff58ab,#45e8ff);color:#2b1764}.s2 .face{filter:hue-rotate(18deg) saturate(1.18)}.s7 .face{filter:hue-rotate(105deg) saturate(1.45) brightness(1.08)}.s1 .face{filter:hue-rotate(0deg) saturate(1.2)}.s8 .face{filter:hue-rotate(185deg) saturate(1.55) brightness(1.08)}.fx-layer{position:absolute;inset:var(--space-3) var(--space-3) 76px var(--space-3);pointer-events:none;z-index:calc(var(--z-raised) + 10);overflow:visible}.merge-ghost{position:absolute;display:grid;place-items:center;border-radius:var(--radius-xl);color:#fff;font-size:28px;text-shadow:0 2px 3px rgba(0,0,0,.28);box-shadow:inset 0 4px #ffffff57,inset 0 -5px #00000029,0 6px 10px #0000003b;animation:flyToTarget var(--duration-reveal) cubic-bezier(.2,.85,.24,1.1) forwards}.burst{position:absolute;width:14px;height:14px;border-radius:var(--radius-full);background:#fff5a6;transform:translate(-50%,-50%);animation:burst var(--duration-reveal) var(--ease-out) forwards;box-shadow:0 0 0 10px #ffeb5a59,0 0 30px 18px #ff3f9e6b}@keyframes flyToTarget{65%{transform:translate(var(--dx),var(--dy)) scale(.76) rotate(8deg);opacity:.95}to{transform:translate(var(--dx),var(--dy)) scale(.18) rotate(22deg);opacity:0}}@keyframes burst{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}to{opacity:0;transform:translate(-50%,-50%) scale(5.4)}}.queue-drop{position:absolute;z-index:calc(var(--z-raised) + 15);border-radius:var(--radius-lg);display:grid;place-items:center;font-size:22px;color:#fff;box-shadow:inset 0 3px #ffffff59,inset 0 -4px #0000001f,0 8px 12px #0003;pointer-events:none}.queue-drop:before{content:"";position:absolute;left:18%;top:18%;width:18%;height:18%;border-radius:var(--radius-full);background:#fffc;box-shadow:14px 2px 0 -2px #ffffffa8}.queue-drop:after{content:"";position:absolute;left:35%;bottom:20%;width:30%;height:10%;border-radius:var(--radius-full);background:#460f5a3d}.tool-help{background:#ffffff0d;border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-3);font-size:var(--text-xs);line-height:1.35;font-weight:600;color:var(--color-text-secondary);text-align:center;min-height:48px;display:grid;place-items:center}.tool-name{color:var(--color-text-primary);font-weight:800;text-transform:uppercase;letter-spacing:.5px}.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}.power{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-1);color:var(--color-text-primary);background:var(--color-surface-overlay);box-shadow:inset 0 1.5px #ffffff14,0 4px 8px #0003;font-weight:800;cursor:pointer;min-height:52px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:all var(--duration-fast) var(--ease-out)}.power b{font-size:18px;line-height:1.1}.power small{font-size:9px;font-weight:700;color:var(--color-text-secondary)}.power.selected{outline:3px solid var(--game-accent);background:var(--game-accent-subtle);border-color:var(--game-accent)}.power:hover:not(:disabled){background:var(--color-surface-raised);border-color:var(--color-border-default)}.power:disabled{opacity:.3;cursor:not-allowed;filter:grayscale(1)}.hammer-fx,.bomb-fx,.rainbow-fx,.shuffle-fx,.score-float{position:absolute;pointer-events:none;z-index:calc(var(--z-raised) + 20)}.hammer-fx{font-size:44px;transform-origin:70% 80%;animation:hammerStrike var(--duration-reveal) var(--ease-out) forwards;filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))}@keyframes hammerStrike{0%{transform:translate(-30px,-60px) rotate(-48deg) scale(.6);opacity:0}25%{opacity:1}58%{transform:translate(-6px,-6px) rotate(24deg) scale(1.05)}72%{transform:translate(0) rotate(-8deg) scale(.95)}to{transform:translate(8px,-20px) rotate(18deg) scale(.2);opacity:0}}.crack{position:absolute;width:60px;height:60px;transform:translate(-50%,-50%);z-index:calc(var(--z-raised) + 18)}.crack:before,.crack:after{content:"";position:absolute;left:50%;top:50%;width:3.5px;height:50px;background:#fff7a8;border-radius:var(--radius-full);box-shadow:0 0 14px var(--color-status-error);animation:crack .45s var(--ease-out) forwards}.crack:before{transform:translate(-50%,-50%) rotate(35deg)}.crack:after{transform:translate(-50%,-50%) rotate(-48deg)}@keyframes crack{to{opacity:0;height:90px}}.bomb-fx{border-radius:var(--radius-full);border:5px solid #fff6a4;transform:translate(-50%,-50%) scale(.2);animation:bombWave var(--duration-reveal) var(--ease-out) forwards;box-shadow:0 0 0 12px #ff3f9e47,0 0 36px 18px #31d8ff61}@keyframes bombWave{to{transform:translate(-50%,-50%) scale(3.2);opacity:0}}.rainbow-fx{font-size:40px;animation:rainbowSpin var(--duration-reveal) var(--ease-out) forwards;filter:drop-shadow(0 0 12px rgba(255,255,255,.7))}@keyframes rainbowSpin{0%{transform:translate(-50%,-50%) scale(.2) rotate(0);opacity:0}20%{opacity:1}75%{transform:translate(-50%,-50%) scale(1.3) rotate(540deg);opacity:1}to{transform:translate(-50%,-50%) scale(.1) rotate(760deg);opacity:0}}.rainbow-ring{position:absolute;border-radius:var(--radius-full);border:3.5px dashed #fff;transform:translate(-50%,-50%);animation:rainbowRing var(--duration-reveal) var(--ease-out) forwards;box-shadow:0 0 20px #fff9}@keyframes rainbowRing{0%{width:16px;height:16px;opacity:1;transform:translate(-50%,-50%) rotate(0)}to{width:280px;height:280px;opacity:0;transform:translate(-50%,-50%) rotate(360deg)}}.shuffle-fx{font-size:36px;animation:shuffleWhirl .7s var(--ease-out) forwards}@keyframes shuffleWhirl{to{transform:translate(var(--dx),var(--dy)) rotate(720deg) scale(.25);opacity:0}}.score-float{font-weight:900;font-size:20px;color:#fff8a4;text-shadow:0 3px 6px rgba(0,0,0,.35);animation:scoreFloat .8s var(--ease-out) forwards}@keyframes scoreFloat{to{transform:translateY(-40px) scale(1.1);opacity:0}}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:var(--z-base)}.bit{position:absolute;width:8px;height:8px;border-radius:var(--radius-sm);animation:fall 2.2s linear forwards}@keyframes fall{to{transform:translateY(100dvh) rotate(540deg);opacity:0}}.level-intro-dialog{position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;height:fit-content;border:1px solid var(--color-border-subtle);border-radius:var(--radius-2xl);background:var(--color-surface-overlay);box-shadow:0 24px 48px #0009,inset 0 1px #ffffff1a;padding:var(--space-6);max-width:400px;width:90%;color:var(--color-text-primary);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-4);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.level-intro-dialog[open]{opacity:1;transform:scale(1)}@starting-style{.level-intro-dialog[open]{opacity:0;transform:scale(.9)}}.level-intro-dialog{opacity:0;transform:scale(.9);transition-property:opacity,transform,display,overlay;transition-duration:.3s;transition-timing-function:var(--ease-out);transition-behavior:allow-discrete}.level-intro-dialog::backdrop{background-color:#0000;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);transition:display .3s allow-discrete,overlay .3s allow-discrete,background-color .3s ease-out,backdrop-filter .3s ease-out}.level-intro-dialog[open]::backdrop{background-color:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}@starting-style{{background-color:#0000;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}.level-intro-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:900;color:var(--game-accent);margin:0}.level-intro-desc{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.5;margin:0}.intro-target-wrapper{margin:var(--space-2) 0;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);width:100%}.intro-bubble-display{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-top:var(--space-1)}.intro-bubble{width:64px;height:64px;border-radius:var(--radius-xl);display:grid;place-items:center;font-size:32px;position:relative;box-shadow:inset 0 4px #ffffff59,inset 0 -5px #00000026,0 6px 10px #00000040;animation:idleWobble 3s ease-in-out infinite}.intro-bubble:before{content:"";position:absolute;left:18%;top:18%;width:18%;height:18%;border-radius:var(--radius-full);background:#fffc;box-shadow:14px 2px 0 -2px #ffffffa8}.intro-bubble:after{content:"";position:absolute;left:35%;bottom:20%;width:30%;height:10%;border-radius:var(--radius-full);background:#460f5a3d}.intro-bubble .face{filter:drop-shadow(0 3px 3px rgba(0,0,0,.22))}.evolution-path{display:flex;align-items:center;justify-content:center;gap:var(--space-2);flex-wrap:wrap;background:#ffffff08;border:1px dashed var(--color-border-subtle);border-radius:var(--radius-xl);padding:var(--space-4);width:100%}.evolution-step{display:flex;align-items:center;gap:var(--space-2)}.evolution-arrow{font-size:var(--text-lg);color:var(--game-accent);font-weight:700}.evolution-plus{font-size:var(--text-lg);color:var(--color-text-secondary);font-weight:700}.evolution-desc{font-size:11px;color:var(--color-text-secondary);line-height:1.45;margin-top:var(--space-1);max-width:36ch}.recipe-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);background:var(--color-surface-overlay);border:1px solid var(--color-border-subtle);border-radius:var(--radius-badge);padding:var(--space-1) var(--space-2-5);font-size:var(--text-xs);font-weight:700;color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);-webkit-user-select:none;user-select:none}.recipe-btn:hover{background:var(--color-surface-raised);color:var(--color-text-primary);border-color:var(--color-border-default)}.recipes-dialog{max-width:440px;max-height:80dvh;display:flex;flex-direction:column}.recipes-body{width:100%;flex:1;overflow:hidden;display:flex;flex-direction:column;text-align:left}.recipes-body .evolution-desc{max-width:none;text-align:center}.recipes-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-2);padding-right:var(--space-1);max-height:48dvh;scrollbar-width:thin;scrollbar-color:var(--game-accent-subtle) transparent}.recipes-scroll::-webkit-scrollbar{width:6px}.recipes-scroll::-webkit-scrollbar-thumb{background:var(--game-accent-subtle);border-radius:var(--radius-full)}.recipe-row{display:flex;align-items:center;justify-content:space-between;background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-xl);padding:var(--space-2) var(--space-3);gap:var(--space-3)}.recipe-row-bubbles{display:flex;align-items:center;gap:6px}.recipe-row-text{text-align:right;display:flex;flex-direction:column;gap:1px}.recipe-row-text strong{font-size:var(--text-sm);color:var(--color-text-primary)}.recipe-row-text small{font-size:10px;color:var(--color-text-secondary)}@media (prefers-reduced-motion: reduce){.level-intro-dialog{transform:none;transition-duration:.1s}@starting-style{.level-intro-dialog[open]{transform:none}}.tile,.mini,.slimepop-lobby__emoji{animation:none!important}.merge-ghost,.queue-drop{animation-duration:.1s!important}.tile.reappear{animation:none!important}.tile.vanish{animation:none!important;opacity:0}.hammer-fx,.crack:before,.crack:after,.bomb-fx,.rainbow-fx,.rainbow-ring,.shuffle-fx{animation:none!important;display:none!important}.score-float{animation:fade-out .8s ease forwards}@keyframes fade-out{to{opacity:0}}}