@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Righteous&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #E11D48;--secondary: #FB7185;--cta: #2563EB;--bg: #FFF1F2;--bg2: #FFE4E6;--text: #881337;--text-dark: #1F2937;--card: #FFFFFF;--border: #FECDD3;--accent: #F59E0B;--success: #10B981;--danger: #EF4444;--purple: #7C3AED;--blue: #2563EB;--shadow: 0 4px 24px rgba(225,29,72,.1);--shadow-lg: 0 8px 40px rgba(225,29,72,.18);--shadow-card: 0 2px 16px rgba(225,29,72,.08);--radius: 20px;--radius-sm: 14px;--radius-lg: 28px}body{font-family:Poppins,sans-serif;background:linear-gradient(135deg,#fff1f2,#ffe4e6,#fff1f2);color:var(--text-dark);overflow-x:hidden;min-height:100vh}.splash{background:linear-gradient(160deg,#e11d48,#881337 40%,#4c1d24);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;position:relative;overflow:hidden;opacity:0;transition:opacity .5s ease}.splash.show{opacity:1}.splash-bg{position:absolute;top:0;left:0;right:0;bottom:0}.splash-circle{position:absolute;border-radius:50%;background:#ffffff0f}.c1{top:-100px;right:-100px;width:300px;height:300px}.c2{bottom:-80px;left:-80px;width:250px;height:250px}.c3{top:40%;left:-50px;width:150px;height:150px}.splash-content{position:relative;z-index:1;text-align:center;padding:40px 32px}.splash-logo{width:100px;height:100px;background:#ffffff1f;border-radius:28px;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 12px 40px #0003}.splash-title{font-family:Righteous,cursive;font-size:40px;letter-spacing:2px;margin-bottom:6px;text-shadow:0 4px 20px rgba(0,0,0,.3)}.splash-slogan{font-size:15px;color:#ffffffb3;margin-bottom:48px}.login-btn-group{width:100%;display:flex;flex-direction:column;gap:12px}.btn-wechat{background:#07c160;color:#fff;border:none;padding:16px;border-radius:var(--radius);font-weight:700;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 8px 24px #07c1604d;transition:all .2s}.btn-wechat:active{transform:scale(.95)}.btn-phone{background:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.25);padding:16px;border-radius:var(--radius);font-weight:600;font-size:16px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .2s}.btn-phone:active{transform:scale(.95)}.splash-agreement{margin-top:24px;font-size:12px;color:#ffffff80;text-align:center;padding:0 32px}.splash-agreement a{color:#ffffffb3;text-decoration:underline}.guide-screen{background:linear-gradient(160deg,#e11d48,#881337 40%,#4c1d24);min-height:100vh;display:flex;align-items:center;justify-content:center;color:#fff;padding:40px 32px}.guide-content{text-align:center;width:100%;max-width:400px}.guide-icon{font-size:80px;margin-bottom:24px;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.guide-title{font-family:Righteous,cursive;font-size:28px;margin-bottom:12px}.guide-desc{font-size:16px;color:#fffc;line-height:1.6;margin-bottom:32px}.guide-dots{display:flex;justify-content:center;gap:8px;margin-bottom:32px}.guide-dot{width:8px;height:8px;border-radius:50%;background:#ffffff4d;transition:all .3s}.guide-dot.active{background:#fff;width:24px;border-radius:4px}.guide-buttons{display:flex;flex-direction:column;gap:12px}.btn-skip{background:transparent;color:#ffffffb3;border:none;padding:12px;font-size:14px;cursor:pointer}.btn-next{background:#fff;color:var(--primary);border:none;padding:16px;border-radius:var(--radius);font-weight:700;font-size:16px;cursor:pointer;transition:all .2s}.btn-next:active{transform:scale(.95)}.btn-start{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;border:none;padding:16px;border-radius:var(--radius);font-weight:700;font-size:18px;cursor:pointer;box-shadow:0 8px 24px #f59e0b66;transition:all .2s}.btn-start:active{transform:scale(.95)}.home-screen{min-height:100vh;background:var(--bg);padding-bottom:40px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.home-header{padding:8px 20px 16px;display:flex;justify-content:space-between;align-items:center;position:relative}.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;box-shadow:0 4px 12px #e11d4840;border:2px solid #fff;cursor:pointer}.avatar-badge{position:relative}.avatar-badge:after{content:"3";position:absolute;top:-2px;right:-2px;width:18px;height:18px;background:var(--cta);color:#fff;border-radius:50%;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff}.coin-badge{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;padding:8px 16px;border-radius:20px;font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px;box-shadow:0 2px 8px #f59e0b26;border:1.5px solid #FDE68A}.user-info{display:flex;align-items:center;gap:8px;cursor:pointer;transition:opacity .2s}.user-info:hover{opacity:.8}.user-name{color:#fff;font-size:16px;font-weight:600}.user-level{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;font-size:11px;padding:3px 8px;border-radius:10px;font-weight:700}.name-edit-popup{position:absolute;top:60px;left:0;background:#14141ef2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:16px;z-index:100;min-width:220px;box-shadow:0 8px 32px #0006;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.name-edit-input{width:100%;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:#0006;color:#fff;font-size:15px;outline:none;transition:all .2s}.name-edit-input:focus{border-color:#34d399;box-shadow:0 0 0 3px #34d3991a}.name-edit-buttons{display:flex;gap:8px;margin-top:12px}.name-edit-cancel{flex:1;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;font-size:14px;cursor:pointer;transition:all .2s}.name-edit-cancel:hover{background:#ffffff1a}.name-edit-save{flex:1;padding:10px;border-radius:10px;border:none;background:linear-gradient(135deg,#059669,#34d399);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.name-edit-save:hover{transform:scale(1.02);box-shadow:0 4px 16px #34d3994d}.coin-icon{width:20px;height:20px;background:linear-gradient(135deg,#f59e0b,#fbbf24);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:800}.hero-section{padding:0 20px 20px}.hero-title{font-family:Righteous,cursive;font-size:34px;color:var(--text);line-height:1.05;margin-bottom:4px}.hero-title .span{color:var(--primary)}.hero-subtitle{font-size:14px;color:#6b7280;margin-bottom:20px;font-weight:500}.daily-banner{background:linear-gradient(135deg,#7c3aed,#a78bfa);border-radius:var(--radius);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;cursor:pointer;transition:all .2s}.daily-banner:active{transform:scale(.98)}.daily-banner.checked{opacity:.7}.daily-left{display:flex;align-items:center;gap:10px}.daily-icon{width:36px;height:36px;background:#fff3;border-radius:10px;display:flex;align-items:center;justify-content:center}.daily-icon svg{width:20px;height:20px;color:#fff}.daily-text{color:#fff}.daily-text .t{font-weight:700;font-size:14px}.daily-text .s{font-size:11px;opacity:.85}.daily-btn{background:#ffffff40;color:#fff;padding:6px 14px;border-radius:12px;font-size:12px;font-weight:700}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mode-card{border-radius:var(--radius);padding:22px 18px;position:relative;overflow:hidden;cursor:pointer;transition:all .2s}.mode-card:active{transform:scale(.95)}.mode-card-1{background:linear-gradient(135deg,#e11d48,#fb7185)}.mode-card-2{background:linear-gradient(135deg,#2563eb,#3b82f6)}.mode-card-3{background:linear-gradient(135deg,#7c3aed,#a78bfa)}.mode-card-4{background:linear-gradient(135deg,#f59e0b,#fbbf24)}.mode-card-5{background:linear-gradient(135deg,#059669,#34d399)}.mode-card .icon{width:44px;height:44px;background:#ffffff38;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}.mode-card .icon svg{width:24px;height:24px;color:#fff}.mode-card .title{color:#fff;font-weight:700;font-size:17px;margin-bottom:2px}.mode-card .desc{color:#ffffffd9;font-size:12px}.mode-card .badge{position:absolute;top:14px;right:14px;background:#ffffff4d;color:#fff;font-size:10px;padding:3px 10px;border-radius:10px;font-weight:700}.mode-card .deco{position:absolute;bottom:-20px;right:-20px;width:80px;height:80px;border-radius:50%;background:#ffffff0f}.room-list-screen{min-height:100vh;background:#0a0a0f;padding:20px;color:#fff}.room-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-top:10px}.room-list-back{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;padding:8px 12px;border-radius:8px;transition:background .2s}.room-list-back:hover{background:#ffffff1a}.room-list-title{font-size:18px;font-weight:700}.room-list-refresh{background:none;border:none;color:#34d399;font-size:14px;cursor:pointer;padding:8px 12px;border-radius:8px;transition:background .2s}.room-list-refresh:hover{background:#34d3991a}.room-list-content{min-height:300px}.room-list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;color:#ffffff80}.empty-icon{font-size:48px;margin-bottom:16px}.empty-text{font-size:18px;font-weight:600;margin-bottom:8px}.empty-desc{font-size:14px;color:#fff6}.room-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.room-card{background:linear-gradient(135deg,#ffffff14,#ffffff08);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px;transition:all .2s}.room-card:hover{border-color:#34d3994d;transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.room-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.room-code{font-size:20px;font-weight:800;letter-spacing:2px;color:#34d399;font-family:Courier New,monospace}.room-players{display:flex;align-items:center;gap:6px;color:#ffffffb3;font-size:14px}.player-icon{font-size:14px}.room-card-body{margin-bottom:16px}.room-host{display:flex;align-items:center;gap:8px}.host-icon{font-size:16px}.host-name{font-size:15px;color:#ffffffe6;font-weight:500}.room-card-footer{display:flex;justify-content:flex-end}.join-btn{background:linear-gradient(135deg,#059669,#34d399);border:none;color:#fff;font-size:14px;font-weight:600;padding:10px 24px;border-radius:10px;cursor:pointer;transition:all .2s}.join-btn:hover{transform:scale(1.05);box-shadow:0 4px 16px #34d39966}.join-btn:active{transform:scale(.98)}.room-list-name-input{position:fixed;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(transparent,#0a0a0f 30%)}.room-list-name-input input{width:100%;padding:16px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:#0009;color:#fff;font-size:16px;outline:none}.room-list-name-input input::placeholder{color:#fff6}.room-list-name-input input:focus{border-color:#34d399;box-shadow:0 0 0 3px #34d3991a}.favorites-screen{min-height:100vh;background:#0a0a0f;padding:20px;color:#fff}.favorites-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-top:10px}.favorites-back{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;padding:8px 12px;border-radius:8px}.favorites-back:hover{background:#ffffff1a}.favorites-title{font-size:18px;font-weight:700}.favorites-count{color:#fff9;font-size:14px}.favorites-content{min-height:300px}.favorites-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;color:#ffffff80}.favorites-empty .empty-icon{font-size:48px;margin-bottom:16px}.favorites-empty .empty-text{font-size:18px;font-weight:600;margin-bottom:8px}.favorites-empty .empty-desc{font-size:14px;color:#fff6}.favorites-list{display:flex;flex-direction:column;gap:12px}.favorite-item{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#ffffff14,#ffffff08);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px 20px;transition:all .2s}.favorite-item:hover{border-color:#34d3994d}.favorite-info{flex:1;min-width:0}.favorite-title{font-size:16px;font-weight:600;color:#fff;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.favorite-artist{font-size:13px;color:#fff9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.favorite-actions{display:flex;gap:8px;margin-left:12px}.favorite-play-btn{width:40px;height:40px;border-radius:50%;border:none;background:linear-gradient(135deg,#059669,#34d399);color:#fff;font-size:16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.favorite-play-btn:hover{transform:scale(1.1);box-shadow:0 4px 16px #34d39966}.favorite-play-btn.playing{background:linear-gradient(135deg,#dc2626,#f87171)}.favorite-remove-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff9;font-size:16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.favorite-remove-btn:hover{background:#ef444433;border-color:#ef444480;color:#f87171}.feedback-favorite-btn{margin-top:12px;padding:10px 20px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:#ffffff1a;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.feedback-favorite-btn:hover{background:#fff3;transform:scale(1.02)}.feedback-favorite-btn.favorited{background:linear-gradient(135deg,#f59e0b,#fbbf24);border-color:#f59e0b;color:#000}.quick-section{padding:0 20px 20px}.quick-card{background:var(--card);border-radius:var(--radius);padding:16px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-card);margin-bottom:10px;cursor:pointer;transition:all .2s}.quick-card:active{transform:scale(.98)}.quick-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.quick-icon svg{width:24px;height:24px;color:#fff}.quick-info{flex:1}.quick-title{font-weight:700;font-size:14px;color:var(--text-dark)}.quick-desc{font-size:12px;color:#9ca3af}.quick-arrow{color:#d1d5db}.ic-green{background:linear-gradient(135deg,#10b981,#34d399)}.rank-list{padding:0 20px 20px}.section-title{font-family:Righteous,cursive;font-size:18px;color:var(--text);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}.section-title .more{font-family:Poppins,sans-serif;font-size:13px;color:var(--cta);font-weight:600;cursor:pointer}.rank-item{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:16px;padding:12px;margin-bottom:8px;box-shadow:var(--shadow-card)}.rank-num{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;font-family:Righteous,cursive}.rank-1{background:linear-gradient(135deg,#f59e0b,#fbbf24)}.rank-2{background:linear-gradient(135deg,#94a3b8,#cbd5e1)}.rank-3{background:linear-gradient(135deg,#b45309,#d97706)}.rank-other{background:#f3f4f6;color:#6b7280}.rank-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#fb7185,#e11d48);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:15px}.rank-info{flex:1}.rank-name{font-weight:600;font-size:14px;color:var(--text-dark)}.rank-score{font-size:12px;color:#6b7280}.rank-trend{font-size:12px;font-weight:700}.trend-up{color:var(--success)}.trend-down{color:var(--danger)}.checkin-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000d9;color:#fff;padding:24px 40px;border-radius:var(--radius);text-align:center;z-index:1000;animation:bounceIn .5s ease}@keyframes bounceIn{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}50%{transform:translate(-50%,-50%) scale(1.1)}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.checkin-icon{font-size:48px;margin-bottom:8px}.checkin-text{font-weight:700;font-size:16px}.create-screen{min-height:100vh;background:var(--bg);padding-bottom:40px;animation:fadeIn .3s ease}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 20px 16px}.top-bar h2{font-family:Righteous,cursive;font-size:22px;color:var(--text)}.back-btn{width:40px;height:40px;background:var(--card);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-card);cursor:pointer;transition:all .2s}.back-btn:active{transform:scale(.9)}.back-btn svg{width:20px;height:20px;color:var(--text-dark)}.top-spacer{width:40px}.room-code-card{background:var(--card);border-radius:var(--radius);padding:20px;margin:0 20px 20px;text-align:center;box-shadow:var(--shadow-card)}.room-code-label{font-size:12px;color:#6b7280;font-weight:600;margin-bottom:8px}.room-code{font-family:Righteous,cursive;font-size:40px;color:var(--text);letter-spacing:8px}.room-code-tip{font-size:11px;color:#9ca3af;margin-top:8px}.create-body{padding:0 20px 20px}.create-section{margin-bottom:24px}.create-label{font-weight:700;font-size:14px;color:var(--text-dark);margin-bottom:10px;display:flex;align-items:center;gap:6px}.create-label svg{width:16px;height:16px;color:var(--primary)}.mode-picker{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.mode-pick{border-radius:var(--radius-sm);padding:16px 8px;text-align:center;cursor:pointer;border:2px solid transparent;transition:all .2s}.mode-pick.selected{border-color:var(--primary);background:#fff}.mode-pick:not(.selected){background:#f9fafb}.mode-pick .pi{width:36px;height:36px;border-radius:10px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center}.mode-pick .pi svg{width:20px;height:20px;color:#fff}.mode-pick .pt{font-size:12px;font-weight:600}.mode-pick .pd{font-size:10px;color:#9ca3af;margin-top:2px}.player-picker{display:flex;align-items:center;justify-content:center;gap:20px}.pp-btn{width:44px;height:44px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-card);cursor:pointer;border:none;transition:all .2s}.pp-btn:active{transform:scale(.9)}.pp-btn svg{width:20px;height:20px;color:var(--primary)}.pp-num{font-family:Righteous,cursive;font-size:36px;color:var(--text)}.pp-label{font-size:12px;color:#9ca3af;text-align:center;margin-top:4px}.time-picker{display:flex;gap:8px}.time-pick{flex:1;padding:12px;border-radius:var(--radius-sm);text-align:center;font-weight:600;font-size:14px;cursor:pointer;border:2px solid transparent;transition:all .2s}.time-pick.selected{border-color:var(--primary);background:#fff;color:var(--primary)}.time-pick:not(.selected){background:#f9fafb;color:#6b7280}.category-picker{display:flex;flex-wrap:wrap;gap:8px}.cat-tag{padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;border:2px solid transparent;transition:all .2s}.cat-tag.selected{background:var(--primary);color:#fff}.cat-tag:not(.selected){background:#f9fafb;color:#6b7280}.create-summary{background:var(--card);border-radius:var(--radius);padding:16px;margin-bottom:16px;box-shadow:var(--shadow-card)}.summary-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}.summary-row .label{color:#6b7280}.summary-row .value{font-weight:600;color:var(--text-dark)}.create-btn{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border:none;padding:16px;border-radius:var(--radius);font-weight:700;font-size:16px;cursor:pointer;width:100%;box-shadow:0 8px 24px #e11d484d;transition:all .2s}.create-btn:active{transform:scale(.98)}.lobby-screen{background:linear-gradient(160deg,#e11d48,#881337 40%,#4c1d24);min-height:100vh;display:flex;align-items:center;justify-content:center;color:#fff;padding:40px 32px}.lobby-content{text-align:center;width:100%}.lobby-room-code{margin-bottom:40px}.lobby-label{font-size:14px;color:#ffffffb3;margin-bottom:8px}.lobby-code{font-family:Righteous,cursive;font-size:24px}.lobby-players{display:flex;align-items:center;justify-content:center;gap:32px;margin-bottom:40px}.lobby-player{display:flex;flex-direction:column;align-items:center;gap:8px}.lobby-player span{font-weight:600}.lobby-player.host .rank-avatar{border:2px solid #FBBF24}.host-badge{font-size:10px;background:#fbbf24;color:#000;padding:2px 6px;border-radius:8px;font-weight:700}.lobby-players-title{font-size:14px;color:#ffffffb3;margin-bottom:16px}.lobby-player-list{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}.waiting-text{font-size:14px;color:#fff9;text-align:center;padding:12px}.error-msg{background:#ff646433;color:#f99;padding:12px;border-radius:8px;font-size:14px;text-align:center;margin-bottom:16px}.room-input{width:100%;padding:12px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:#0006;color:#fff;font-size:16px;text-align:center;letter-spacing:2px}.room-input::placeholder{color:#fff6;letter-spacing:0}.room-input:focus{outline:none;border-color:#fbbf24}.lobby-vs{font-family:Righteous,cursive;font-size:32px;color:#fbbf24}.lobby-countdown{margin-bottom:40px}.lobby-countdown-num{font-family:Righteous,cursive;font-size:80px;animation:pulse 1s ease-in-out infinite}.lobby-countdown-text{font-family:Righteous,cursive;font-size:36px;color:#fbbf24}.lobby-back{background:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.25);padding:12px 32px;border-radius:var(--radius);font-weight:600;font-size:16px;cursor:pointer}.game-screen{background:linear-gradient(180deg,#e11d48,#881337);min-height:100vh;color:#fff;position:relative;animation:fadeIn .3s ease;padding-bottom:40px}.game-header{display:flex;justify-content:space-between;align-items:center;padding:8px 20px 12px}.game-exit{width:40px;height:40px;background:#ffffff26;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.game-exit:active{transform:scale(.9)}.game-exit svg{width:20px;height:20px;color:#fff}.game-timer{display:flex;align-items:center;gap:8px;background:#0003;padding:6px 18px;border-radius:20px;border:1px solid rgba(255,255,255,.15)}.timer-icon{width:16px;height:16px;color:#fbbf24}.timer-text{font-family:Righteous,cursive;font-size:20px}.timer-warning{color:#fbbf24;animation:pulse .5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.game-round{background:#ffffff26;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600}.progress-dots{display:flex;justify-content:center;gap:8px;padding:0 20px 12px}.progress-dot{width:12px;height:12px;border-radius:50%;background:#fff3;transition:all .3s}.progress-dot.current{background:#fbbf24;transform:scale(1.2)}.progress-dot.correct{background:#10b981}.progress-dot.wrong{background:#ef4444}.progress-dot.skipped{background:#6b7280}.score-bar{padding:0 20px;margin-bottom:16px}.score-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.score-you,.score-opp{display:flex;align-items:center;gap:8px}.score-progress{height:8px;background:#ffffff40;border-radius:4px;overflow:hidden}.score-fill{height:100%;background:linear-gradient(90deg,#fbbf24,#f59e0b);border-radius:4px;transition:width .3s ease}.combo-display{text-align:center;padding:8px;font-weight:700;font-size:18px;color:#fbbf24;animation:comboIn .3s ease}@keyframes comboIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.song-visual{display:flex;flex-direction:column;align-items:center;padding:20px}.album-art{width:100px;height:100px;background:#ffffff1f;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;border:1px solid rgba(255,255,255,.2)}.album-art.playing{animation:rotate 3s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.album-art svg{width:52px;height:52px;color:#fff}.song-hint{font-size:13px;color:#ffffffb3;margin-bottom:12px}.no-audio{font-size:13px;color:#ff9696cc;margin:10px 0;padding:8px 16px;background:#ff646426;border-radius:20px}.offline-badge{display:inline-block;background:#ff64644d;color:#f99;font-size:11px;padding:4px 10px;border-radius:12px;margin-bottom:12px}.lyrics-display{background:#ffffff1a;border-radius:var(--radius);padding:16px;text-align:center;font-size:15px;line-height:1.6;border:1px solid rgba(255,255,255,.15);max-width:300px}.lifelines{display:flex;justify-content:center;gap:20px;padding:10px}.lifeline-tooltip{display:flex;flex-direction:column;align-items:center;gap:4px}.lifeline-label{font-size:11px;font-weight:600;color:#fffc}.lifeline-btn{width:48px;height:48px;background:#ffffff26;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(255,255,255,.2);transition:all .2s}.lifeline-btn:active{transform:scale(.9)}.lifeline-btn.used{opacity:.3;cursor:not-allowed}.lifeline-btn svg{width:24px;height:24px;color:#fff}.answers{padding:10px 20px;display:flex;flex-direction:column;gap:10px}.answer-btn{display:flex;align-items:center;gap:12px;padding:14px 20px;background:#ffffff1f;border:1px solid rgba(255,255,255,.2);border-radius:16px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;text-align:left;position:relative}.answer-btn:active{transform:scale(.98)}.answer-btn.correct{background:#10b98159;border-color:var(--success)}.answer-btn.wrong{background:#ef444459;border-color:var(--danger)}.answer-btn.wrong.selected{background:#ef444480;border-color:var(--danger);box-shadow:0 0 20px #ef444466;transform:scale(1.02)}.answer-btn.dimmed{opacity:.4;transform:scale(.97)}.answer-btn.removed{opacity:.3;cursor:not-allowed}.answer-btn:disabled{cursor:not-allowed}.answer-mark{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:700;animation:markPop .3s ease-out}.answer-btn.correct .answer-mark{color:var(--success)}.answer-btn.wrong .answer-mark{color:var(--danger)}@keyframes markPop{0%{transform:translateY(-50%) scale(0);opacity:0}50%{transform:translateY(-50%) scale(1.3)}to{transform:translateY(-50%) scale(1);opacity:1}}.answer-letter{width:32px;height:32px;background:#fff3;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.feedback-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;animation:feedbackIn .5s cubic-bezier(.175,.885,.32,1.275),fadeOut .3s ease 1.2s forwards}@keyframes feedbackIn{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.feedback-overlay.correct{background:#10b981e6;box-shadow:inset 0 0 100px #fff3}.feedback-overlay.wrong{background:#ef4444e6;box-shadow:inset 0 0 100px #ffffff1a}.feedback-overlay.skipped{background:#6b7280e6;box-shadow:inset 0 0 100px #ffffff1a}.feedback-icon{font-size:80px;font-weight:700;margin-bottom:12px;animation:iconPop .6s cubic-bezier(.175,.885,.32,1.275)}.feedback-icon.skip{font-size:60px}@keyframes iconPop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.feedback-text{font-family:Righteous,cursive;font-size:32px;margin-bottom:8px;animation:textSlide .5s ease}@keyframes textSlide{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.feedback-combo{font-size:18px;color:#fbbf24;font-weight:700;animation:comboPop .8s ease}.feedback-answer{font-size:16px;color:#ffffffe6;margin-top:8px;animation:textSlide .5s ease}.feedback-song-info{font-size:14px;color:#fff9;margin-top:4px}.feedback-message{font-size:14px;color:#ffffffb3;margin-top:8px;font-style:italic;animation:textSlide .7s ease}@keyframes comboBounce{0%{transform:scale(0)}40%{transform:scale(1.3)}60%{transform:scale(.9)}to{transform:scale(1)}}.result-screen{background:linear-gradient(160deg,#e11d48,#881337 40%,#4c1d24);min-height:100vh;display:flex;align-items:center;justify-content:center;color:#fff;animation:fadeIn .3s ease}.result-content{text-align:center;padding:40px;width:100%;max-width:400px}.result-icon{font-size:80px;margin-bottom:16px}.result-label{font-size:16px;color:#ffffffb3}.result-score{font-family:Righteous,cursive;font-size:80px;line-height:1;margin:8px 0}.result-max{font-size:20px;color:#ffffff80;margin-bottom:16px}.result-stars{font-size:48px;margin-bottom:24px}.result-stats{display:flex;justify-content:center;gap:32px;margin-bottom:24px}.stat-item{display:flex;flex-direction:column;gap:4px}.stat-num{font-family:Righteous,cursive;font-size:28px}.stat-label{font-size:12px;color:#ffffffb3}.answer-review{background:#ffffff1a;border-radius:var(--radius);padding:16px;margin-bottom:24px}.review-title{font-weight:700;font-size:14px;margin-bottom:12px;color:#fffc}.review-list{display:flex;flex-direction:column;gap:8px}.review-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;background:#ffffff0d}.review-item.correct{border-left:3px solid #10B981}.review-item.wrong{border-left:3px solid #EF4444}.review-item.skipped{border-left:3px solid #6B7280}.review-num{width:24px;height:24px;background:#fff3;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.review-song{flex:1;font-size:14px;font-weight:500}.review-result{font-weight:700}.result-buttons{display:flex;flex-direction:column;gap:12px}.btn-restart{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border:none;padding:16px 48px;border-radius:var(--radius);font-weight:700;font-size:18px;cursor:pointer;box-shadow:0 8px 24px #e11d484d;transition:all .2s}.btn-restart:active{transform:scale(.95)}.btn-home{background:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.25);padding:14px 48px;border-radius:var(--radius);font-weight:600;font-size:16px;cursor:pointer;transition:all .2s}.btn-home:active{transform:scale(.95)}@media (max-width: 768px){.phone{width:100%;height:100vh;border:none;border-radius:0}.phone-container{padding:0}}.audio-player{width:100%;padding:0 20px;margin:10px 0}.audio-controls{display:flex;align-items:center;gap:12px}.audio-btn{width:40px;height:40px;border-radius:50%;background:#fff3;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0}.audio-btn:active{transform:scale(.9)}.audio-btn:disabled{opacity:.5;cursor:not-allowed}.audio-btn svg{width:20px;height:20px;color:#fff}.audio-btn.playing{background:#fbbf24;border-color:#fbbf24}.audio-progress{flex:1;display:flex;flex-direction:column;gap:4px}.audio-progress-bar{height:4px;background:#fff3;border-radius:2px;overflow:hidden}.audio-progress-fill{height:100%;background:#fbbf24;border-radius:2px;transition:width .1s linear}.audio-time{display:flex;justify-content:space-between;font-size:11px;color:#fff9}.audio-play-btn{width:56px;height:56px;border-radius:50%;background:#fff3;border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;font-size:24px;color:#fff}.audio-play-btn:active{transform:scale(.9)}.audio-play-btn:disabled{opacity:.5;cursor:not-allowed}.unlock-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#0009;border-radius:50%;cursor:pointer;z-index:10}.unlock-btn{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff}.unlock-icon{font-size:24px}.unlock-icon.loading{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.unlock-text{font-size:10px;white-space:nowrap}.simple-audio-player{position:relative;display:flex;justify-content:center;margin:10px 0}.play-hint{font-size:12px;color:#fff9;margin-top:8px;animation:pulse 1.5s ease-in-out infinite}.audio-play-btn.playing{background:#fbbf24;border-color:#fbbf24;animation:pulse 1s ease-in-out infinite}.audio-loading{text-align:center;font-size:12px;color:#fff9;margin-top:8px}.chat-panel{background:#ffffff0d;border-radius:12px;padding:16px;margin-top:20px}.chat-panel.disabled{opacity:.5}.chat-header{font-size:14px;font-weight:700;margin-bottom:12px;color:#fffc}.chat-disabled-msg{font-size:12px;color:#ffffff80;text-align:center;padding:20px}.chat-messages{max-height:200px;overflow-y:auto;margin-bottom:12px}.chat-empty{font-size:12px;color:#fff6;text-align:center;padding:20px}.chat-message{font-size:13px;margin-bottom:8px;padding:8px 12px;background:#ffffff0d;border-radius:8px}.chat-player{font-weight:700;color:#fbbf24;margin-right:8px}.chat-text{color:#fffc}.chat-input{display:flex;gap:8px}.chat-input input{flex:1;padding:10px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#ffffff1a;color:#fff;font-size:14px}.chat-input input:focus{outline:none;border-color:#fbbf24}.chat-input button{padding:10px 20px;border-radius:8px;border:none;background:#fbbf24;color:#000;font-weight:700;cursor:pointer}.emoji-picker-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.emoji-picker{background:#1a1a2e;border-radius:16px;padding:20px;max-width:320px;width:90%}.emoji-picker-header{font-size:16px;font-weight:700;margin-bottom:16px;text-align:center}.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.emoji-btn{font-size:24px;padding:8px;border:none;background:#ffffff1a;border-radius:8px;cursor:pointer;transition:transform .2s}.emoji-btn:hover{transform:scale(1.2);background:#fff3}.emoji-display{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999;animation:emojiPop 3s ease forwards;pointer-events:none}.emoji-player{font-size:18px;font-weight:700;color:#fbbf24;margin-right:12px}.emoji-icon{font-size:80px}@keyframes emojiPop{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}40%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-70%) scale(.8)}}