*{box-sizing:border-box;margin:0;padding:0}html,body{touch-action:none;-webkit-user-select:none;user-select:none;background:#150f2e;width:100%;height:100%;font-family:Nunito,Segoe UI,sans-serif;overflow:hidden}#app{position:fixed;inset:0}canvas#game-canvas{touch-action:none;width:100%;display:block;position:fixed;top:0;left:0;right:0}.hud{pointer-events:none;z-index:10;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);position:fixed;inset:0}.hud-top{top:max(16px, env(safe-area-inset-top));justify-content:space-between;align-items:flex-start;gap:12px;padding:0 20px;display:flex;position:absolute;left:0;right:0}.score-box,.moves-box{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;text-shadow:0 2px 6px #0006;background:#1a143099;border-radius:20px;min-width:130px;padding:10px 18px}.score-label,.moves-label{text-transform:uppercase;letter-spacing:1px;opacity:.7;font-size:.7rem;font-weight:800}.score-value{font-size:1.5rem;font-weight:900;line-height:1.2}.moves-box{text-align:right;min-width:80px}.moves-value{color:#fdd835;font-size:1.5rem;font-weight:900}.progress-track{background:#ffffff26;border-radius:4px;width:100%;height:6px;margin-top:4px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#e5392e,#fb8c00,#fdd835,#43a047,#1e88e5,#8e24aa);width:0%;height:100%;transition:width .4s}.combo-badge{color:#fff;opacity:0;white-space:nowrap;background:linear-gradient(135deg,#8e24aa,#1e88e5);border-radius:30px;padding:8px 22px;font-size:1.1rem;font-weight:900;transition:opacity .2s,transform .2s;position:absolute;top:92px;left:50%;transform:translate(-50%)scale(.8);box-shadow:0 8px 24px #8e24aa66}.combo-badge.show{opacity:1;transform:translate(-50%)scale(1)}.toast{bottom:max(28px, env(safe-area-inset-bottom));color:#fdd835;opacity:0;white-space:nowrap;background:#1a1430bf;border-radius:20px;padding:8px 20px;font-size:.95rem;font-weight:800;transition:opacity .25s,transform .25s;position:absolute;left:50%;transform:translate(-50%)translateY(10px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.hud.hidden,canvas#game-canvas.hidden{display:none}.back-btn{top:max(16px, env(safe-area-inset-top));z-index:11;pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;background:#1a143099;border:none;border-radius:50%;width:44px;height:44px;font-size:1.3rem;position:absolute;left:20px}.back-btn:active{transform:scale(.92)}.hud-top{padding-left:76px}.goal-bar{top:max(82px, calc(env(safe-area-inset-top) + 82px));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1a143099;border-radius:20px;align-items:center;gap:10px;padding:10px 16px;display:flex;position:absolute;left:20px;right:20px}.goal-icon{flex-shrink:0;font-size:1.5rem}.goal-text{flex:1;min-width:0}.goal-label{color:#fff;white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:.82rem;font-weight:700;overflow:hidden}.goal-count{color:#fdd835;flex-shrink:0;font-size:.95rem;font-weight:900}.progress-fill.done{background:linear-gradient(90deg,#43a047,#7bffb0)}.moves-value.low{color:#ff5c5c;animation:.6s ease-in-out infinite moves-pulse}@keyframes moves-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.btn-secondary{pointer-events:auto;color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff40;border-radius:50px;padding:14px 28px;font-size:1rem;font-weight:800}.btn-secondary:active{transform:scale(.96)}.btn-play{pointer-events:auto;color:#fff;cursor:pointer;background:linear-gradient(135deg,#8e24aa,#1e88e5);border:none;border-radius:50px;padding:16px 48px;font-size:1.2rem;font-weight:900;box-shadow:0 10px 30px #8e24aa73}.btn-play:active{transform:scale(.96)}.btn-play.hidden,.btn-secondary.hidden{display:none}.level-map{z-index:5;padding:max(28px, env(safe-area-inset-top)) 20px max(40px, env(safe-area-inset-bottom));background:radial-gradient(70% 40% at 50% 0,#8e24aa40 0%,#0000 70%),linear-gradient(#1e1440 0%,#150f2e 40%,#0f0a20 100%);position:fixed;inset:0;overflow:hidden auto}.level-map.hidden{display:none}.map-header{text-align:center;margin-bottom:24px}.map-header h1{background:linear-gradient(90deg,#e5392e,#fb8c00,#fdd835,#43a047,#1e88e5,#8e24aa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:clamp(1.5rem,6vw,2.1rem);font-weight:900}.map-header p{color:#ffffffb3;font-size:.95rem;font-weight:700}.map-track{flex-direction:column;align-items:center;gap:8px;max-width:420px;margin:0 auto;padding:20px 0;display:flex}.map-node{cursor:pointer;background:0 0;border:none;flex-direction:column;align-self:center;align-items:center;gap:6px;padding:10px;display:flex;position:relative}.map-node.offset{align-self:flex-end;margin-right:14%}.map-node:not(.offset){align-self:flex-start;margin-left:14%}.map-node-circle{color:#fff;background:linear-gradient(135deg,#8e24aa,#1e88e5);border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;font-size:1.4rem;font-weight:900;transition:transform .15s;display:flex;box-shadow:0 8px 22px #8e24aa73,0 0 0 4px #ffffff1f}.map-node:active .map-node-circle{transform:scale(.92)}.map-node.locked .map-node-circle{box-shadow:none;opacity:.6;background:#2a2440;font-size:1.5rem}.map-node.locked{cursor:default}.map-node-stars{filter:drop-shadow(0 2px 4px #0006);gap:2px;min-height:1.1rem;font-size:.9rem;display:flex}.level-complete{z-index:40;opacity:0;background:radial-gradient(#2d1b6eeb 0%,#0f0a20fa 75%);justify-content:center;align-items:center;padding:20px;transition:opacity .3s;display:flex;position:fixed;inset:0}.level-complete.hidden{display:none}.level-complete.show{opacity:1}.lc-card{text-align:center;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:28px;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:360px;padding:36px 30px 30px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);display:flex;transform:scale(.85)}.level-complete.show .lc-card{transform:scale(1)}.lc-card h1{background:linear-gradient(90deg,#e5392e,#fb8c00,#fdd835,#43a047,#1e88e5,#8e24aa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:clamp(1.4rem,5.5vw,1.9rem);font-weight:900}.lc-stars{gap:10px;font-size:2.6rem;display:flex}.lc-star{filter:grayscale()opacity(.4);transition:transform .25s}.lc-star.lit{filter:none}.lc-star.pop{animation:.4s cubic-bezier(.34,1.56,.64,1) star-pop}@keyframes star-pop{0%{transform:scale(.3)rotate(-20deg)}60%{transform:scale(1.3)rotate(8deg)}to{transform:scale(1)rotate(0)}}.lc-card p{color:#ffffffd1;font-size:1rem;line-height:1.5}.lc-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px;display:flex}.lc-actions .btn-play,.lc-actions .btn-secondary{padding:12px 24px;font-size:.98rem}.showcase{pointer-events:none;z-index:20;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.showcase.hidden{display:none}.showcase-card{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;background:#150f2e8c;border-radius:28px;flex-direction:column;align-items:center;gap:10px;padding:24px 32px 20px;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s;display:flex;transform:scale(.6)}.showcase.show .showcase-card{opacity:1;transform:scale(1)}.showcase-img{filter:drop-shadow(0 12px 28px #0006);width:min(46vw,220px)}.showcase-caption{color:#fff;text-align:center;text-shadow:0 2px 6px #00000080;font-size:1.1rem;font-weight:900}.selection-hint{bottom:max(90px, calc(env(safe-area-inset-bottom) + 90px));text-align:center;color:#ffffff8c;font-size:.82rem;font-weight:700;position:absolute;left:0;right:0}.sound-btn{pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;background:#1a143099;border:none;border-radius:50%;flex-shrink:0;align-self:flex-start;width:46px;height:46px;font-size:1.2rem}.sound-btn:active{transform:scale(.92)}.float-layer{pointer-events:none;z-index:15;position:fixed;inset:0;overflow:hidden}.float-text{color:#fdd835;text-shadow:0 2px 8px #00000080,0 0 12px #fdd83580;opacity:0;white-space:nowrap;font-size:1.3rem;font-weight:900;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .9s;position:absolute;transform:translate(-50%,-50%)}.float-text.rise{transform:translate(calc(-50% + var(--drift-x,0px)), calc(-50% - 70px));opacity:0}.float-text:not(.rise){opacity:1}.float-combo{color:#ff9dd8;font-size:1.55rem}.float-bonus{color:#7bffb0}.tutorial{z-index:30;pointer-events:auto;opacity:0;background:radial-gradient(#2d1b6eeb 0%,#150f2efa 75%);justify-content:center;align-items:center;padding:20px;transition:opacity .25s;display:flex;position:absolute;inset:0}.tutorial.hidden{display:none}.tutorial.show{opacity:1}.tut-card{text-align:center;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:28px;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:340px;padding:32px 28px 24px;display:flex}.tut-card.pop{animation:.32s cubic-bezier(.34,1.56,.64,1) tut-pop}@keyframes tut-pop{0%{opacity:.4;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.tut-img{object-fit:contain;filter:drop-shadow(0 10px 22px #0006);width:108px;height:108px;margin-bottom:6px}.tut-title{color:#fff;font-size:1.25rem;font-weight:900}.tut-text{color:#fffc;font-size:.98rem;line-height:1.55}.tut-dots{gap:6px;margin:8px 0 4px;display:flex}.tut-dot{background:#ffffff40;border-radius:50%;width:8px;height:8px}.tut-dot.active{background:linear-gradient(135deg,#8e24aa,#1e88e5);transform:scale(1.3)}.tut-actions{align-items:center;gap:18px;margin-top:8px;display:flex}.tut-skip{color:#ffffff8c;cursor:pointer;background:0 0;border:none;font-size:.9rem;font-weight:700}.tut-next{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8e24aa,#1e88e5);border:none;border-radius:40px;padding:12px 32px;font-size:1rem;font-weight:900;box-shadow:0 8px 22px #8e24aa66}.tut-next:active{transform:scale(.96)}.tut-hand{z-index:25;pointer-events:none;filter:drop-shadow(0 6px 14px #00000080);will-change:transform;font-size:2.4rem;position:fixed;top:0;left:0}.tut-hand.hidden{display:none}