*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0d46a0;color:#fff;font-family:system-ui,sans-serif;user-select:none;-webkit-user-select:none;overflow:hidden}.scene{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.sky{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#072a6b,#0d46a0 45%,#1a63c4)}.layer{position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(calc(var(--mx, 0) * var(--d, 0) * -1px),calc(var(--my, 0) * var(--d, 0) * -.35px));transition:transform .1s ease-out}.layer-bottom{top:auto;height:100%}.drift{position:absolute;top:0;left:0;width:200%;height:100%;animation:drift linear infinite}@keyframes drift{to{transform:translate(-50%)}}.cloud-pos{position:absolute}.cloud{position:relative}.cloud i,.cloud b{position:absolute;background:#0b0b12;border-radius:50%}.cloud b{left:6%;bottom:0;width:84%;height:38%;border-radius:999px}.ridge{position:absolute;bottom:14vh;left:-10%;width:120%;height:24vh;fill:#0b2d63}.ground{position:absolute;bottom:-10px;left:-10%;width:120%;height:calc(18vh + 10px);background:linear-gradient(to bottom,#071f48,#030f2a);border-top:3px solid #12407f}.rain{position:absolute;top:-10%;right:0;bottom:0;left:0;background-image:repeating-linear-gradient(105deg,transparent 0 22px,rgba(170,200,255,.28) 22px 23px,transparent 23px 47px),repeating-linear-gradient(105deg,transparent 0 61px,rgba(170,200,255,.18) 61px 62px,transparent 62px 97px);background-size:140px 220px,230px 330px;animation:rain .45s linear infinite}@keyframes rain{to{background-position:-40px 220px,-70px 330px}}.lightning-flash{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;background:radial-gradient(ellipse at var(--fx, 50%) 0%,rgba(235,242,255,.95),rgba(150,180,255,.45) 55%,rgba(120,150,255,.2))}.lightning-flash.go{animation:flash .7s ease-out}@keyframes flash{0%{opacity:0}6%{opacity:1}14%{opacity:.15}24%{opacity:.85}40%{opacity:.1}to{opacity:0}}.bolt{position:absolute;top:0;height:62vh;width:14vw;min-width:90px;fill:none;stroke:#f4f8ff;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 6px #9bbcff) drop-shadow(0 0 16px #5f8bff);opacity:0}.bolt.go{animation:bolt .55s ease-out}@keyframes bolt{0%{opacity:0}8%{opacity:1}20%{opacity:.2}30%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.sky-sun,.sky-sun:before,.sky-sun:after{animation:none}.rain,.lightning-flash,.bolt{display:none}.drift{animation:none}.layer{transition:none}}#app{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;height:100%;padding:16px;gap:16px}.title{margin:0;text-shadow:0 2px 0 rgba(0,20,70,.5);font-size:clamp(1.4rem,5vw,2.4rem);letter-spacing:2px}.stage{flex:1;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:0;width:100%;max-width:1700px;min-height:0;align-items:end}.slot{min-width:0;position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;border-radius:24px;transition:background .15s}.slot:after{content:"";position:absolute;bottom:2px;left:50%;width:60%;height:14px;transform:translate(-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.35),transparent 70%);pointer-events:none}.stage.dragging .slot{background:#ffffff12}.stage.dragging .slot.hover{background:#ffffff38}.beats{display:flex;gap:10px}.beat-dot{width:14px;height:14px;border-radius:50%;background:#fff3}.beat-dot.on{background:#fff;box-shadow:0 0 10px #fff}.palette{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px 6px;justify-items:center;padding:12px;background:#0000004d;border-radius:16px;width:100%;max-width:900px}.palette-item{cursor:grab;touch-action:none}.palette-item.used{opacity:.35}.char{display:flex;flex-direction:column;align-items:center;gap:4px;touch-action:none;cursor:grab}.char-name{font-size:.75rem;opacity:.85}.char-sprite{width:72px;height:72px;object-fit:contain;pointer-events:none}.char-blob{position:relative;width:64px;height:64px;border-radius:50% 50% 42% 42%;box-shadow:inset 0 -6px #0003}.char-blob{filter:saturate(.55) brightness(.8)}.char-blob .eye{position:absolute;top:24px;width:10px;height:12px;background:#f4f0d8;border-radius:50% 50% 60% 60%;box-shadow:0 0 6px 2px #ff2828bf,inset 0 -4px #7a0000;clip-path:polygon(0 35%,100% 0,100% 100%,0 100%);animation:glow 3s ease-in-out infinite}.char-blob .eye:nth-child(2){clip-path:polygon(0 0,100% 35%,100% 100%,0 100%)}.char-blob .eye:nth-child(1){left:16px}.char-blob .eye:nth-child(2){right:16px}.char-blob .mouth{position:absolute;left:50%;bottom:14px;width:18px;height:8px;margin-left:-9px;background:#111;border-radius:0 0 12px 12px;clip-path:polygon(0 0,100% 0,100% 50%,85% 100%,70% 40%,55% 100%,40% 40%,25% 100%,12% 40%,0 70%);transform:scaleX(1.5)}.palette .char-blob{width:clamp(30px,6vw,52px);height:clamp(30px,6vw,52px)}.palette .char-blob .eye{top:38%;width:18%;height:22%}.palette .char-blob .eye:nth-child(1){left:24%}.palette .char-blob .eye:nth-child(2){right:24%}.palette .char-blob .mouth{bottom:20%;width:30%;height:14%;margin-left:-15%}.palette .char-sprite{width:clamp(30px,6vw,56px);height:clamp(30px,6vw,56px)}.palette .char-name{font-size:clamp(.5rem,1.4vw,.7rem)}.stage .char-blob{width:150px;height:150px}.stage .char-blob .eye{top:56px;width:22px;height:27px}.stage .char-blob .eye:nth-child(1){left:36px}.stage .char-blob .eye:nth-child(2){right:36px}.stage .char-blob .mouth{bottom:34px;width:40px;height:17px;margin-left:-20px}.stage .char-sprite{width:clamp(160px,calc(100vh - 360px),520px);height:clamp(160px,calc(100vh - 360px),520px)}.char-art svg{display:block;overflow:visible}.char-art{max-width:100%}.char-art.full svg{height:calc(clamp(220px,calc(100vh - 360px),620px) * var(--scale, 1));width:auto;max-width:100%}.char-art.scaled,.char-art.scaled svg{max-width:none}.char-art.full{transform:translateY(calc(var(--lift, 0px) * -1))}.char-art.icon svg{width:clamp(34px,6vw,56px);height:clamp(34px,6vw,56px)}.char-art .p{transform-box:fill-box;transform-origin:center}.a-eyes{animation:blink 4.5s infinite}.a-spikes{animation:sway 3s ease-in-out infinite}.a-feathers{animation:flutter 1.4s ease-in-out infinite;transform-origin:0% 50%}.a-arm{animation:arm-bob 2.2s ease-in-out infinite}.svg-cabeca,.svg-cima{animation:part-head 3.2s ease-in-out infinite;transform-origin:50% 100%}.svg-corpo,.svg-tronco,.svg-arvore{animation:part-breathe 2.6s ease-in-out infinite;transform-origin:50% 100%}.svg-olho,.svg-olhoesquerdo,.svg-olhodireito{animation:blink 4.5s infinite}.svg-cabelo,.svg-cabelofrente{animation:sway 2.8s ease-in-out infinite;transform-origin:50% 0%}.svg-mao{animation:part-swing 2.4s ease-in-out infinite;transform-origin:50% 0%}.svg-mao-2{animation:part-swing 2.7s ease-in-out infinite reverse;transform-origin:50% 0%}.svg-martelo{animation:part-swing 2.2s ease-in-out infinite;transform-origin:50% 90%}.svg-chapeu{animation:part-head 3.6s ease-in-out infinite;transform-origin:50% 100%}.svg-cabecapendurada{animation:part-swing 2.8s ease-in-out infinite;transform-origin:50% 0%}.svg-machado{animation:part-swing 3s ease-in-out infinite reverse;transform-origin:50% 80%}.svg-balde{animation:part-swing 2s ease-in-out infinite;transform-origin:50% 0%}.svg-mancha{animation:part-pulse 2.2s ease-in-out infinite}.char.bounce .svg-cabeca,.char.bounce .svg-cima{animation:part-nod .25s ease-out}.char.bounce .svg-corpo,.char.bounce .svg-tronco{animation:part-squash .25s ease-out}@keyframes part-head{0%,to{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg) translateY(-2px)}}@keyframes part-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.015,1.03)}}@keyframes part-swing{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}@keyframes part-pulse{0%,to{opacity:.75}50%{opacity:1}}@keyframes part-nod{0%{transform:rotate(0)}40%{transform:rotate(4deg) translateY(4px)}to{transform:rotate(0)}}@keyframes part-squash{0%{transform:scale(1)}40%{transform:scale(1.04,.96)}to{transform:scale(1)}}.sky-sun{position:absolute;right:9vw;top:6vh;transition:opacity .6s ease,transform .6s ease;animation:sun-glow 2.8s ease-in-out infinite}.sky-sun:before,.sky-sun:after{content:"";position:absolute;top:50%;left:50%;border-radius:50%;pointer-events:none;z-index:-1}.sky-sun:before{width:220%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,245,255,.95) 0%,rgba(241,197,255,.65) 22%,rgba(200,120,255,.28) 48%,transparent 70%);animation:sun-halo 2.8s ease-in-out infinite}.sky-sun:after{width:260%;aspect-ratio:1;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,rgba(255,235,255,.35) 0deg 5deg,transparent 5deg 20deg);-webkit-mask-image:radial-gradient(circle,#000 8%,transparent 62%);mask-image:radial-gradient(circle,#000 8%,transparent 62%);animation:sun-rays 40s linear infinite}.sky-sun svg{display:block;height:clamp(140px,26vh,300px);width:auto}@keyframes sun-glow{0%,to{filter:drop-shadow(0 0 14px #fff) drop-shadow(0 0 40px rgba(255,220,255,.95)) drop-shadow(0 0 90px rgba(241,150,255,.9))}50%{filter:drop-shadow(0 0 24px #fff) drop-shadow(0 0 70px rgba(255,230,255,1)) drop-shadow(0 0 150px rgba(241,150,255,1))}}@keyframes sun-halo{0%,to{opacity:.8;scale:.94}50%{opacity:1;scale:1.06}}@keyframes sun-rays{to{transform:translate(-50%,-50%) rotate(360deg)}}.sky-sun.away{opacity:0;transform:translateY(-40px) scale(.85)}.a-head{animation:zombie-tilt 3.4s ease-in-out infinite;transform-origin:50% 100%}.a-eye-dangle{animation:dangle 2.2s ease-in-out infinite;transform-origin:50% 0%}.a-reach{animation:reach 2.8s ease-in-out infinite;transform-origin:100% 50%}.a-drag{animation:dangle 3.1s ease-in-out infinite reverse;transform-origin:50% 0%}.a-lurch{animation:lurch 3.4s ease-in-out infinite;transform-origin:50% 100%}.a-jaw{transform:translateY(4px)}.char.bounce .a-jaw{animation:jaw-drop .25s ease-out}.char.bounce .a-brain{animation:horn-pulse .25s ease-out}@keyframes zombie-tilt{0%,to{transform:rotate(-4deg) translate(-2px)}40%{transform:rotate(5deg)}55%{transform:rotate(6deg) translateY(2px)}}@keyframes dangle{0%,to{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}@keyframes reach{0%,to{transform:rotate(-4deg)}50%{transform:rotate(5deg) translate(-3px)}}@keyframes lurch{0%,to{transform:skew(-1.5deg)}50%{transform:skew(1.5deg)}}@keyframes jaw-drop{0%{transform:translateY(4px)}40%{transform:translateY(18px) rotate(3deg)}to{transform:translateY(4px)}}.a-glow{animation:glow 2.6s ease-in-out infinite}.char-art.full svg{filter:drop-shadow(0 0 10px rgba(255,30,30,.35))}.char.bounce .a-mouth{animation:mouth-pop .25s ease-out;transform-origin:50% 100%}.char.bounce .a-ear-l{animation:ear-l .25s ease-out;transform-origin:80% 80%}.char.bounce .a-ear-r{animation:ear-r .25s ease-out;transform-origin:20% 80%}.char.bounce .a-horn{animation:horn-pulse .25s ease-out;transform-origin:50% 0%}.char.bounce .a-tab{animation:tab-pop .25s ease-out}@keyframes blink{0%,92%,to{transform:scaleY(1)}96%{transform:scaleY(.1)}}@keyframes glow{0%,to{opacity:.55}45%{opacity:1}50%{opacity:.2}55%{opacity:1}}@keyframes sway{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}@keyframes flutter{0%,to{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}@keyframes arm-bob{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(4px) rotate(1deg)}}@keyframes mouth-pop{0%{transform:scale(1)}40%{transform:scale(1.15,1.5)}to{transform:scale(1)}}@keyframes ear-l{0%{transform:rotate(0)}40%{transform:rotate(-14deg)}to{transform:rotate(0)}}@keyframes ear-r{0%{transform:rotate(0)}40%{transform:rotate(14deg)}to{transform:rotate(0)}}@keyframes horn-pulse{0%{transform:scale(1)}40%{transform:scale(1.12,1.18)}to{transform:scale(1)}}@keyframes tab-pop{0%{transform:translate(0)}40%{transform:translate(-6px)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.char-art .p{animation:none!important}}.char.bounce{animation:bounce .25s ease-out}@keyframes bounce{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-14px) scale(.95,1.08)}to{transform:translateY(0) scale(1)}}.ghost{position:fixed;transform:translate(-50%,-60%);pointer-events:none;z-index:100;opacity:.9}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0a0814d9;z-index:200}.start-btn{font-size:1.4rem;padding:18px 32px;border:none;border-radius:16px;background:#fff;color:#1a1433;font-weight:700;cursor:pointer}.start-btn:hover{transform:scale(1.05)}