:root{color-scheme:dark;--bg-0: #0b0714;--bg-1: #150f24;--bg-2: #1e1533;--panel: rgba(255, 255, 255, .06);--panel-border: rgba(255, 255, 255, .12);--text-0: #f5f3ff;--text-1: #b9b3d4;--accent-pink: #ff2d95;--accent-orange: #ff8c00;--accent-yellow: #ffd60a;--accent-green: #39ff14;--accent-cyan: #00e5ff;--accent-violet: #7c4dff;--gradient-main: linear-gradient(135deg, var(--accent-violet), var(--accent-pink) 60%, var(--accent-orange));--radius-lg: 20px;--radius-md: 14px;--radius-sm: 10px;--shadow-glow: 0 0 28px rgba(124, 77, 255, .28);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--ease-out: cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:radial-gradient(circle at 20% 0%,var(--bg-2),var(--bg-0) 60%);color:var(--text-0);-webkit-tap-highlight-color:transparent;position:relative;overflow-x:hidden}body:before,body:after{content:"";position:fixed;width:min(60vw,700px);height:min(60vw,700px);border-radius:50%;filter:blur(90px);opacity:.3;z-index:-1;pointer-events:none;will-change:transform}body:before{top:-15%;left:-15%;background:var(--accent-violet);animation:bg-drift-1 20s ease-in-out infinite}body:after{bottom:-20%;right:-15%;background:var(--accent-pink);animation:bg-drift-2 24s ease-in-out infinite}@keyframes bg-drift-1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.15)}}@keyframes bg-drift-2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-6vw,-8vh) scale(1.1)}}@media(prefers-reduced-motion:reduce){body:before,body:after{animation:none}}h1,h2,h3{margin:0 0 .4em;letter-spacing:.01em}button{font-family:inherit}.page{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:clamp(12px,3vw,32px);gap:var(--space-4)}.card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:clamp(14px,3vw,24px);box-shadow:var(--shadow-glow)}.btn{border:none;border-radius:var(--radius-md);padding:12px 22px;min-height:44px;font-size:1rem;font-weight:700;cursor:pointer;color:var(--text-0);background:var(--gradient-main);transition:transform .15s var(--ease-out),box-shadow .15s var(--ease-out),opacity .15s ease}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px #ff2d9559}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{background:var(--panel);border:1px solid var(--panel-border)}.input{background:#ffffff14;border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:10px 14px;min-height:44px;color:var(--text-0);font-size:1rem;width:100%;transition:border-color .15s ease}.input:focus{outline:2px solid var(--accent-violet)}.text-muted{color:var(--text-1)}.stack{display:flex;flex-direction:column;gap:var(--space-3)}.row{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.center-text{text-align:center}.title-gradient{background:var(--gradient-main);-webkit-background-clip:text;background-clip:text;color:transparent}.room-code{font-size:clamp(2rem,6vw,3.5rem);font-weight:800;letter-spacing:.15em}.player-chip{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--panel-border);border-radius:999px;padding:8px 16px 8px 8px}.player-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#1a1130;flex-shrink:0;overflow:hidden}.player-avatar img{width:100%;height:100%;object-fit:cover}.player-chip.disconnected{opacity:.45}.glow-pulse{animation:glow-pulse 1.6s ease-in-out infinite}@keyframes glow-pulse{0%,to{box-shadow:0 0 12px #7c4dff59}50%{box-shadow:0 0 32px #ff2d958c}}.fade-scale-in{animation:fade-scale-in .35s ease-out both}@keyframes fade-scale-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.fade-in-only{animation:fade-in-only .3s ease-out both}@keyframes fade-in-only{0%{opacity:0}to{opacity:1}}.slide-up-in{animation:slide-up-in .3s var(--ease-out) both}@keyframes slide-up-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.pop-in{animation:pop-in .4s var(--ease-out) both}@keyframes pop-in{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.06)}to{opacity:1;transform:scale(1)}}.tap-shrink{transition:transform .1s var(--ease-out)}.tap-shrink:active{transform:scale(.94)}.floaty{animation:floaty 5s ease-in-out infinite}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.card-hero{transition:box-shadow .3s ease,transform .3s ease}.card-hero:hover{box-shadow:0 0 56px #ff2d9573;transform:translateY(-4px)}.emoji-bounce{display:inline-block;animation:emoji-bounce 2.4s ease-in-out infinite}@keyframes emoji-bounce{0%,to{transform:rotate(0) scale(1)}25%{transform:rotate(-8deg) scale(1.08)}75%{transform:rotate(8deg) scale(1.08)}}.btn-hero{animation:btn-hero-pulse 2.2s ease-in-out infinite}@keyframes btn-hero-pulse{0%,to{box-shadow:0 0 16px #ff2d9566}50%{box-shadow:0 0 36px #ff8c00a6}}.dancefloor-bg{position:absolute;top:-40px;right:-40px;bottom:-40px;left:-40px;border-radius:32px;background:radial-gradient(circle,var(--accent-violet),transparent 70%);opacity:.5;filter:blur(30px);z-index:-1;animation:dancefloor-pulse 1.1s ease-in-out infinite}@keyframes dancefloor-pulse{0%,to{opacity:.35;transform:scale(1)}50%{opacity:.6;transform:scale(1.08)}}.reveal-glow{animation:reveal-glow 1s ease-out}@keyframes reveal-glow{0%{box-shadow:0 0 #ffd60a00}30%{box-shadow:0 0 70px #ffd60abf}to{box-shadow:var(--shadow-glow)}}.reveal-zoom-in{animation:reveal-zoom-in .5s var(--ease-out) both}@keyframes reveal-zoom-in{0%{opacity:0;transform:scale(1.25)}to{opacity:1;transform:scale(1)}}.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:18px;justify-items:center}.module-icon-btn{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:4px;color:var(--text-0);width:100%}.module-icon-ring{padding:3px;border-radius:50%;background:transparent;transition:background .2s ease}.module-icon-ring.active{background:var(--gradient-main)}.module-icon-circle{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;box-shadow:0 4px 16px #00000059;transition:transform .2s var(--ease-out),box-shadow .2s ease}.module-icon-btn:hover .module-icon-circle{transform:scale(1.08);box-shadow:0 0 24px var(--module-glow, rgba(124, 77, 255, .6))}.module-icon-label{font-size:.8rem;text-align:center;line-height:1.2;color:var(--text-1)}.module-category-label{color:var(--text-1);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin:18px 0 10px}