@import"https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body{touch-action:manipulation;-ms-touch-action:manipulation;overflow:hidden}:root{--bg: #1a1a2e;--accent: #e94560;--yellow: #f5e642;--cyan: #00fff5;--pink: #ff6eb4;--orange: #ff9f43;--green: #2ecc71;--purple: #a55eea}body{background:var(--bg);font-family:Comic Neue,cursive;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;overflow:hidden;position:relative}.beat-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}.beat-bg.active{animation:beatPulse .909s ease-out infinite}.beat-bg.once{animation:beatFlash .3s ease-out forwards}@keyframes beatPulse{0%{opacity:0}to{opacity:1}}@keyframes beatFlash{0%{opacity:0}to{opacity:1}}.bg-emoji{position:fixed;font-size:2rem;opacity:.15;animation:floatEmoji 15s infinite linear;pointer-events:none;z-index:0;top:0;transform:translateY(110vh)}.bg-emoji.turbo{opacity:.85}.bg-emoji.turbo .emoji-inner{display:inline-block;animation:peachSpin .4545s linear infinite,peachPulse .4545s ease-in-out infinite}@keyframes peachSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes peachPulse{0%,to{scale:1}50%{scale:1.4}}@keyframes floatEmoji{0%{transform:translateY(110vh) rotate(0)}to{transform:translateY(-10vh) rotate(360deg)}}.title{font-family:Bangers,cursive;font-size:clamp(1.8rem,5.5vw,3.5rem);color:var(--yellow);text-shadow:3px 3px 0 var(--accent),6px 6px 0 rgba(0,0,0,.3);margin-bottom:.3rem;z-index:1;text-align:center;letter-spacing:2px;animation:titleBounce 2s ease-in-out infinite}@keyframes titleBounce{0%,to{transform:scale(1) rotate(-1deg)}50%{transform:scale(1.03) rotate(1deg)}}.subtitle{font-size:1rem;color:var(--cyan);margin-bottom:clamp(1rem,3vw,1.5rem);z-index:1;opacity:.8;text-align:center}.wheel-container{position:relative;z-index:1}.pointer{position:absolute;top:-18px;left:50%;transform:translate(-50%);width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:35px solid var(--yellow);z-index:10;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));transition:filter .2s}.pointer.active{filter:drop-shadow(0 4px 20px var(--yellow))}canvas{border-radius:50%;box-shadow:0 0 0 8px var(--accent),0 0 0 12px var(--yellow),0 0 60px #e9456066;transition:box-shadow .3s}canvas.spinning{box-shadow:0 0 0 8px var(--accent),0 0 0 12px var(--yellow),0 0 80px #e9456099,0 0 120px #00fff54d}.spin-btn{margin-top:2rem;font-family:Bangers,cursive;font-size:clamp(1.3rem,4vw,1.8rem);padding:15px 50px;background:linear-gradient(135deg,var(--accent),var(--pink));color:#fff;border:4px solid var(--yellow);border-radius:60px;cursor:pointer;z-index:1;letter-spacing:2px;text-shadow:2px 2px 0 rgba(0,0,0,.3);transition:all .2s;position:relative;overflow:hidden}.spin-btn:hover{transform:scale(1.08) rotate(-2deg);box-shadow:0 0 30px var(--accent)}.spin-btn:active{transform:scale(.95)}.spin-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.spin-btn:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.1),transparent);animation:btnShine 3s infinite}@keyframes btnShine{0%{transform:translate(-100%) rotate(45deg)}to{transform:translate(100%) rotate(45deg)}}.result-container{margin-top:clamp(.3rem,1vw,1rem);text-align:center;z-index:1;min-height:80px;visibility:hidden}.result-container.visible{visibility:visible}.result-text{font-family:Bangers,cursive;font-size:clamp(1.5rem,5vw,2.5rem);color:var(--yellow);text-shadow:2px 2px 0 var(--accent)}.result-container.visible .result-text{animation:resultPop .5s cubic-bezier(.68,-.55,.265,1.55)}@keyframes resultPop{0%{transform:scale(0) rotate(-20deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.result-meme{font-size:1rem;color:var(--cyan);margin-top:.3rem}.result-container.visible .result-meme{opacity:0;animation:fadeUp .4s .3s forwards}.validate-btn{font-family:Bangers,cursive;font-size:1.2rem;margin-top:.8rem;padding:10px 28px;border:3px solid var(--yellow);border-radius:50px;background:linear-gradient(135deg,var(--green),#2ecc71);color:#fff;cursor:pointer;text-shadow:1px 1px 0 rgba(0,0,0,.3);transition:all .2s}.result-container.visible .validate-btn{opacity:0;animation:fadeUp .4s .5s forwards}.validate-btn:hover{transform:scale(1.08);box-shadow:0 4px 15px #2ecc7166}.validate-btn:active{transform:scale(.95)}.validate-btn.validated{background:linear-gradient(135deg,var(--yellow),var(--pink));pointer-events:none}@keyframes fadeUp{to{opacity:1;transform:translateY(0)}0%{opacity:0;transform:translateY(10px)}}.egg-counter{position:fixed;bottom:15px;right:8px;font-size:1.4rem;color:#ffffff59;z-index:2;cursor:pointer;transition:all .3s;-webkit-user-select:none;user-select:none;padding:8px;writing-mode:vertical-rl}.egg-counter:hover{color:var(--yellow)}.egg-counter.chaos-activate{animation:chaosFlash .6s ease-out}.chaos-egg{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:10rem;z-index:5;pointer-events:none;animation:chaosGrow 3s ease-out forwards}.chaos-egg.pop{animation:chaosPop .4s ease-out forwards}@keyframes chaosGrow{0%{transform:translate(-50%,-50%) scale(0);opacity:.8}to{transform:translate(-50%,-50%) scale(4);opacity:.9}}@keyframes chaosPop{0%{transform:translate(-50%,-50%) scale(4);opacity:.9}to{transform:translate(-50%,-50%) scale(6);opacity:0}}@keyframes chaosFlash{0%{transform:scale(1)}20%{transform:scale(1.8);filter:brightness(2)}40%{transform:scale(.8)}60%{transform:scale(1.4);filter:brightness(1.5)}80%{transform:scale(.9)}to{transform:scale(1);filter:brightness(1)}}.confetti{position:fixed;width:10px;height:10px;z-index:100;pointer-events:none;animation:confettiFall 2s forwards}@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0) scale(1)}to{opacity:0;transform:translateY(100vh) rotate(720deg) scale(.5)}}.secret-active .title{animation:rainbow .5s linear infinite}@keyframes rainbow{0%{color:var(--yellow)}25%{color:var(--cyan)}50%{color:var(--pink)}75%{color:var(--orange)}to{color:var(--yellow)}}.spin-count{position:fixed;top:15px;right:15px;font-size:.8rem;color:#ffffff4d;z-index:1}.gate{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1rem;z-index:1}.gate-title{font-family:Bangers,cursive;font-size:clamp(2rem,6vw,3.5rem);color:var(--yellow);text-shadow:3px 3px 0 var(--accent),6px 6px 0 rgba(0,0,0,.3);text-align:center;letter-spacing:2px;animation:titleBounce 2s ease-in-out infinite}.gate-subtitle{font-size:1rem;color:var(--cyan);opacity:.8;text-align:center}.motus-grid{display:flex;gap:clamp(3px,1vw,6px);margin-bottom:1rem;max-width:90vw}.motus-cell{width:clamp(32px,11vw,44px);height:clamp(38px,12vw,50px);border:3px solid var(--accent);border-radius:8px;background:#ffffff0f;display:flex;align-items:center;justify-content:center;font-family:Bangers,cursive;font-size:1.6rem;color:#fff;text-transform:uppercase;transition:all .3s}.motus-cell.filled{border-color:var(--yellow);background:#ffffff1f}.motus-cell.correct{background:var(--green);border-color:var(--green)}.motus-cell.misplaced{background:var(--orange);border-color:var(--orange)}.motus-cell.wrong{background:var(--accent);border-color:var(--accent)}@keyframes motusFlip{0%{transform:scaleY(0)}50%{transform:scaleY(1.2)}to{transform:scaleY(1)}}.keyboard-wrapper{display:flex;flex-direction:column;align-items:center}.layout-toggle{position:relative;display:flex;margin-bottom:10px;border:2px solid rgba(255,255,255,.15);border-radius:20px;background:#ffffff0f;cursor:pointer;overflow:hidden}.layout-option{font-family:Bangers,cursive;font-size:.9rem;padding:4px 14px;color:#fff6;z-index:1;transition:color .25s;-webkit-user-select:none;user-select:none}.layout-option.active{color:#fff}.layout-slider{position:absolute;top:2px;left:2px;width:calc(50% - 4px);height:calc(100% - 4px);border-radius:16px;background:var(--pink);transition:transform .25s ease;pointer-events:none}.layout-slider.right{transform:translate(calc(100% + 4px))}.motus-keyboard{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.5vw,10px);max-width:min(420px,95vw);margin-bottom:1rem}.key-row{display:flex;justify-content:center;gap:clamp(3px,.8vw,5px)}.motus-keyboard.dancing~.motus-actions .gate-btn{animation:keyBounce .4545s ease-in-out infinite}.motus-keyboard.dancing .motus-key{animation:keyBounce .4545s ease-in-out infinite}@keyframes keyBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.motus-key{font-family:Bangers,cursive;font-size:clamp(.85rem,2.5vw,1.1rem);width:clamp(26px,8vw,36px);height:clamp(32px,9vw,40px);border:2px solid rgba(255,255,255,.2);border-radius:6px;background:#ffffff14;color:#fff;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}.motus-key:hover{background:#fff3;border-color:var(--yellow);transform:scale(1.1)}.motus-key:active{transform:scale(.9)}.motus-key.correct{background:var(--green);border-color:var(--green)}.motus-key.misplaced{background:var(--orange);border-color:var(--orange)}.motus-actions{display:flex;gap:10px;align-items:center}.motus-delete,.motus-playpause{font-size:1.2rem!important;padding:12px 20px!important}.motus-grid.shake{animation:shake .4s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-10px)}40%,80%{transform:translate(10px)}}.gate-btn{font-family:Bangers,cursive;font-size:clamp(1.2rem,4vw,1.6rem);padding:12px 40px;background:linear-gradient(135deg,var(--accent),var(--pink));color:#fff;border:3px solid var(--yellow);border-radius:60px;cursor:pointer;letter-spacing:2px;text-shadow:2px 2px 0 rgba(0,0,0,.3);transition:all .2s}.gate-btn:hover{transform:scale(1.08) rotate(-2deg);box-shadow:0 0 30px var(--accent)}.gate-btn:active{transform:scale(.95)}.gate-error{font-family:Bangers,cursive;font-size:1.4rem;color:var(--accent);min-height:1.5rem;letter-spacing:1px}.huh-gif{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-width:80vw;max-height:60vh;z-index:50;pointer-events:none;opacity:.85;border-radius:16px;animation:huhPop .3s cubic-bezier(.68,-.55,.265,1.55)}.huh-gif-always{animation:none;opacity:0;transition:opacity .2s ease}.huh-gif-always.visible{opacity:.9}@keyframes huhPop{0%{transform:translate(-50%,-50%) scale(0);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:.85}}.q-float{position:fixed;font-family:Bangers,cursive;font-size:1.5rem;color:var(--yellow);pointer-events:none;z-index:200;animation:qFloat 1s ease-out forwards}@keyframes qFloat{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-60px)}}.app{display:flex;flex-direction:column;align-items:center;height:100vh;height:100dvh;padding:.5rem;box-sizing:border-box;width:100%;overflow:hidden}.app-header{flex-shrink:0;text-align:center;z-index:1}.app-wheel{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;width:100%;z-index:1}.app-wheel .wheel-container{max-width:100%;max-height:100%}.app-wheel .wheel-container canvas{max-width:100%;max-height:100%;object-fit:contain}.app-footer{flex-shrink:0;display:flex;flex-direction:column;align-items:center;z-index:1;padding-bottom:.5rem}.nps-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;height:100dvh;gap:1.5rem;text-align:center;padding:1rem}.nps-choice{font-family:Bangers,cursive;font-size:clamp(1.2rem,4vw,1.8rem);color:var(--cyan)}.nps-choice strong{color:var(--yellow)}.nps-meme-container{display:flex;justify-content:center;align-items:center;min-height:120px}.nps-subtitle{font-family:Comic Neue,cursive;font-size:clamp(.9rem,3vw,1.1rem);color:var(--cyan);opacity:.8}.nps-meme-img{max-width:min(300px,70vw);max-height:200px;border-radius:12px;object-fit:contain;animation:memePop .4s cubic-bezier(.68,-.55,.265,1.55)}@keyframes memePop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.nps-labels{display:flex;justify-content:space-between;width:100%;max-width:400px;font-size:.85rem;color:#ffffff80}.nps-label-left,.nps-label-right{font-family:Bangers,cursive}.nps-scale{display:flex;gap:clamp(4px,1vw,8px);flex-wrap:wrap;justify-content:center}.nps-btn{font-family:Bangers,cursive;font-size:1.1rem;width:clamp(30px,8vw,40px);height:clamp(30px,8vw,40px);border:2px solid rgba(255,255,255,.15);border-radius:8px;background:#ffffff0f;color:#fff;cursor:pointer;transition:all .15s}.nps-detractor{border-color:#e945604d}.nps-passive{border-color:#f7b7314d}.nps-promoter{border-color:#2ecc714d}.nps-btn:hover{transform:scale(1.1)}.nps-detractor:hover{background:#e9456040;border-color:#e94560}.nps-passive:hover{background:#f7b73140;border-color:#f7b731}.nps-promoter:hover{background:#2ecc7140;border-color:#2ecc71}.nps-btn.selected{transform:scale(1.2)}.nps-detractor.selected{background:#e94560;border-color:#ff6b81}.nps-passive.selected{background:#f7b731;border-color:#ffd32a;color:#1a1a2e}.nps-promoter.selected{background:#2ecc71;border-color:#55efc4}.nps-thanks{font-family:Bangers,cursive;font-size:clamp(1.5rem,5vw,2.5rem);color:var(--yellow);animation:resultPop .5s cubic-bezier(.68,-.55,.265,1.55)}