@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap";:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;min-width:320px;min-height:100vh}#root{width:100%}button{font-family:inherit}button:focus,button:focus-visible{outline:2px solid #a855f7;outline-offset:2px}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#ffffff0d}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#a855f7,#ec4899);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#9333ea,#db2777)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#0a0a0f;color:#fff;overflow-x:hidden}.app{min-height:100vh;position:relative}.background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden}.gradient-orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.6;animation:float 20s infinite ease-in-out}.orb-1{width:500px;height:500px;background:linear-gradient(45deg,#a855f7,#ec4899);top:-200px;left:-200px;animation-delay:0s}.orb-2{width:400px;height:400px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);bottom:-150px;right:-150px;animation-delay:7s}.orb-3{width:350px;height:350px;background:linear-gradient(225deg,#f59e0b,#ef4444);top:50%;left:50%;animation-delay:14s}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(100px,-100px) scale(1.1)}66%{transform:translate(-50px,100px) scale(.9)}}.header{position:relative;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:1.5rem 3rem;background:#0a0a0fb3;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.1)}.logo{display:flex;align-items:center;gap:.75rem}.logo-icon{color:#a855f7;filter:drop-shadow(0 0 10px rgba(168,85,247,.5))}.logo-text{font-size:1.5rem;font-weight:800;letter-spacing:-.5px}.highlight{background:linear-gradient(135deg,#a855f7,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.ticker{font-size:.875rem;padding:.25rem .75rem;background:#a855f733;border:1px solid #a855f7;border-radius:20px;color:#a855f7;font-weight:600}.nav{display:flex;gap:1rem}.nav button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#fff;font-size:.95rem;cursor:pointer;transition:all .3s ease}.nav button:hover{background:#a855f71a;border-color:#a855f7;transform:translateY(-2px)}.nav button.active{background:linear-gradient(135deg,#a855f7,#ec4899);border-color:transparent}.wallet-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,#a855f7,#ec4899);border:none;border-radius:12px;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease}.wallet-btn:hover{box-shadow:0 0 30px #a855f799}.wallet-btn.connected{background:#22c55e33;border:1px solid #22c55e;color:#22c55e}.main-content{position:relative;z-index:1;min-height:calc(100vh - 200px);padding:3rem}.view{max-width:1400px;margin:0 auto}.hero{text-align:center}.hero-content{margin-bottom:4rem}.hero-title{font-size:4rem;font-weight:900;margin-bottom:1.5rem;line-height:1.1;letter-spacing:-2px}.gradient-text{background:linear-gradient(135deg,#a855f7,#ec4899,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 20px rgba(168,85,247,.5))}.hero-subtitle{font-size:1.5rem;color:#ffffffb3;margin-bottom:3rem;max-width:700px;margin-left:auto;margin-right:auto}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:900px;margin:0 auto 3rem}.stat-card{padding:2rem;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:20px;transition:all .3s ease}.stat-card:hover{transform:translateY(-5px);border-color:#a855f7;box-shadow:0 10px 40px #a855f74d}.stat-icon{color:#a855f7;margin-bottom:1rem}.stat-value{font-size:2.5rem;font-weight:800;margin-bottom:.5rem;background:linear-gradient(135deg,#fff,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{color:#fff9;font-size:.95rem}.cta-button{display:inline-flex;align-items:center;gap:1rem;padding:1.25rem 3rem;background:linear-gradient(135deg,#a855f7,#ec4899);border:none;border-radius:16px;color:#fff;font-size:1.25rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 10px 40px #a855f766}.cta-button:hover{box-shadow:0 15px 50px #a855f799}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:4rem}.feature-card{padding:2.5rem;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:24px;text-align:center;transition:all .3s ease;cursor:pointer}.feature-card:hover{border-color:#a855f7;box-shadow:0 10px 40px #a855f74d}.feature-icon{font-size:3rem;margin-bottom:1.5rem}.feature-card h3{font-size:1.5rem;margin-bottom:1rem;background:linear-gradient(135deg,#fff,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.feature-card p{color:#ffffffb3;line-height:1.6}.view-title{font-size:2.5rem;font-weight:800;text-align:center;margin-bottom:3rem;background:linear-gradient(135deg,#fff,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sing-container,.battles-container,.leaderboard-container{max-width:1000px;margin:0 auto}.recording-studio{min-height:400px;display:flex;align-items:center;justify-content:center;background:#ffffff08;border:2px dashed rgba(168,85,247,.3);border-radius:30px;margin-bottom:3rem;padding:3rem}.mic-button-container{text-align:center}.mic-button{width:150px;height:150px;border-radius:50%;background:linear-gradient(135deg,#a855f7,#ec4899);border:none;color:#fff;cursor:pointer;box-shadow:0 20px 60px #a855f780;transition:all .3s ease;margin-bottom:1.5rem}.mic-button:hover{box-shadow:0 25px 80px #a855f7b3}.mic-hint{color:#fff9;font-size:1.1rem}.recording-active{text-align:center;width:100%}.recording-pulse{margin-bottom:2rem}.recording-icon{color:#ef4444;filter:drop-shadow(0 0 20px rgba(239,68,68,.8))}.recording-text{font-size:1.5rem;font-weight:700;color:#ef4444;margin-bottom:2rem}.progress-bar{width:100%;max-width:400px;height:8px;background:#ffffff1a;border-radius:10px;overflow:hidden;margin:0 auto}.progress-fill{height:100%;background:linear-gradient(90deg,#a855f7,#ec4899);border-radius:10px;transition:width .1s ease}.scoring-container{text-align:center}.ai-analyzing{margin-bottom:2rem}.sparkle-icon{color:#f59e0b;filter:drop-shadow(0 0 20px rgba(245,158,11,.8))}.scoring-container h3{font-size:1.5rem;color:#fffc;margin-bottom:2rem}.score-reveal{padding:2rem;background:#a855f71a;border:2px solid #a855f7;border-radius:20px;max-width:300px;margin:0 auto}.score-number{font-size:4rem;font-weight:900;background:linear-gradient(135deg,#22c55e,#10b981);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.score-label{font-size:1.2rem;color:#ffffffb3;margin-bottom:1.5rem}.tokens-earned{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:1.5rem;font-weight:700;color:#f59e0b}.star-icon{color:#f59e0b}.song-selection{text-align:center}.song-selection h3{font-size:1.5rem;margin-bottom:1.5rem}.songs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.song-card{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1.5rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:16px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.song-card:hover{background:#a855f733;border-color:#a855f7;transform:translateY(-3px)}.battles-grid{display:grid;gap:2rem;margin-bottom:3rem}.battle-card{position:relative;padding:2rem;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:20px;transition:all .3s ease}.battle-card:hover{border-color:#a855f7;box-shadow:0 10px 40px #a855f74d}.live-badge{position:absolute;top:1rem;right:1rem;padding:.5rem 1rem;background:#ef444433;border:1px solid #ef4444;border-radius:20px;color:#ef4444;font-size:.875rem;font-weight:700;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.battle-card h3{font-size:1.75rem;margin-bottom:1.5rem}.battle-info{display:flex;gap:2rem;margin-bottom:1.5rem}.battle-prize,.battle-participants{display:flex;align-items:center;gap:.5rem;color:#ffffffb3}.join-button{width:100%;padding:1rem;background:linear-gradient(135deg,#a855f7,#ec4899);border:none;border-radius:12px;color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease}.join-button:hover{box-shadow:0 10px 30px #a855f780}.create-battle-card{padding:3rem;background:#f59e0b1a;border:2px dashed #f59e0b;border-radius:20px;text-align:center}.create-battle-card h3{font-size:2rem;margin:1.5rem 0 1rem}.create-battle-card p{color:#ffffffb3;margin-bottom:2rem}.create-button{padding:1rem 2.5rem;background:linear-gradient(135deg,#f59e0b,#ef4444);border:none;border-radius:12px;color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease}.create-button:hover{box-shadow:0 10px 30px #f59e0b80;transform:translateY(-2px)}.leaderboard-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:3rem}.leaderboard-item{display:flex;align-items:center;gap:1.5rem;padding:1.5rem 2rem;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:16px;transition:all .3s ease}.leaderboard-item:hover{border-color:#a855f7;transform:translate(10px)}.leaderboard-item.top-three{background:#a855f71a;border-color:#a855f7}.rank-badge{font-size:2rem;min-width:60px;text-align:center}.user-avatar{font-size:2.5rem;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border-radius:50%}.user-info{flex:1}.user-name{font-size:1.25rem;font-weight:700;margin-bottom:.25rem}.user-score{color:#fff9}.user-tokens{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:700;color:#22c55e}.your-rank-card{padding:3rem;background:#ffffff0d;border:2px dashed rgba(255,255,255,.2);border-radius:20px;text-align:center}.your-rank-card h3{font-size:2rem;margin-bottom:1rem}.your-rank-card p{color:#ffffffb3;margin-bottom:2rem}.start-button{padding:1rem 2.5rem;background:linear-gradient(135deg,#a855f7,#ec4899);border:none;border-radius:12px;color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease}.start-button:hover{box-shadow:0 10px 30px #a855f780;transform:translateY(-2px)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{position:relative;max-width:500px;width:90%;padding:3rem;background:#14141ef2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:2px solid rgba(168,85,247,.5);border-radius:30px;text-align:center;box-shadow:0 20px 60px #00000080}.modal-close{position:absolute;top:1.5rem;right:1.5rem;background:#ffffff1a;border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:all .3s ease}.modal-close:hover{background:#ef44444d;transform:rotate(90deg)}.modal-icon{font-size:4rem;margin-bottom:1.5rem}.modal-content h2{font-size:2.5rem;margin-bottom:1rem;background:linear-gradient(135deg,#a855f7,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.modal-content p{color:#ffffffb3;line-height:1.6;margin-bottom:2rem}.modal-features{display:grid;gap:1rem;margin-bottom:2rem}.modal-feature{display:flex;align-items:center;gap:1rem;padding:1rem;background:#a855f71a;border:1px solid rgba(168,85,247,.3);border-radius:12px;color:#fff;font-weight:600}.modal-cta{margin-bottom:2rem;padding:1.5rem;background:#f59e0b1a;border:1px solid #f59e0b;border-radius:12px}.modal-domain{font-size:1.25rem;font-weight:700;color:#f59e0b;margin-bottom:.5rem}.modal-ticker{color:#ffffffb3}.modal-button{width:100%;padding:1.25rem;background:linear-gradient(135deg,#a855f7,#ec4899);border:none;border-radius:12px;color:#fff;font-size:1.25rem;font-weight:700;cursor:pointer;transition:all .3s ease}.modal-button:hover{box-shadow:0 10px 40px #a855f799}.footer{position:relative;z-index:1;text-align:center;padding:2rem;background:#0a0a0fb3;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.1)}.footer p{color:#fff9;margin-bottom:1rem}.social-links{display:flex;justify-content:center;gap:2rem}.social-links a{color:#a855f7;text-decoration:none;font-weight:600;transition:all .3s ease}.social-links a:hover{color:#ec4899;transform:translateY(-2px)}@media (max-width: 768px){.header{flex-direction:column;gap:1rem;padding:1rem}.nav{flex-wrap:wrap}.nav button{padding:.5rem 1rem;font-size:.875rem}.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1.1rem}.hero-stats{grid-template-columns:1fr;gap:1rem}.features-grid{grid-template-columns:1fr}.main-content{padding:1.5rem}.battle-info{flex-direction:column;gap:1rem}}