*{box-sizing:border-box}html,body,#root{height:100%}body{color:#f5f5f5;background:#121212;margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}button,input{font-family:inherit}a{color:inherit}.app-shell{justify-content:center;align-items:center;min-height:100svh;padding:24px;display:flex}.screen{text-align:center;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:420px;display:flex}.start-screen,.result-screen{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0a;border:1px solid #ffffff14;border-radius:24px;padding:36px 28px;box-shadow:0 20px 60px #00000073}h1{margin:0;font-size:32px}.subtitle{color:#b3b3b3;margin:0;font-size:15px;line-height:1.5}.loading-note{margin-top:-8px;font-size:13px}.error{color:#f15e6c;font-size:14px}.divider{background:#2a2a2a;width:100%;height:1px;margin:4px 0}.auth-block{flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}.logo-badge{background:linear-gradient(135deg,#1db954,#14833b);border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;display:flex;box-shadow:0 8px 24px #1db95459}.logo-badge .eq span{background:#05140a}.primary-button,.secondary-button{cursor:pointer;border:none;border-radius:999px;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 20px;font-size:15px;font-weight:700;text-decoration:none;transition:transform .1s,background .15s;display:inline-flex}.btn-spinner{opacity:.9;border:2px solid;border-top-color:#0000;border-radius:50%;flex-shrink:0;width:15px;height:15px;animation:.7s linear infinite spin}.primary-button{color:#05140a;background:#1db954}.primary-button:hover:not(:disabled){background:#1ed760;transform:scale(1.02)}.secondary-button{color:#f5f5f5;background:0 0;border:1px solid #535353}.secondary-button:hover:not(:disabled){border-color:#f5f5f5;transform:scale(1.02)}.primary-button:disabled,.secondary-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.link-button{color:#b3b3b3;cursor:pointer;background:0 0;border:none;font-size:13px;text-decoration:underline}.daily-card{background:linear-gradient(135deg,#1db95424,#1db9540a);border:1px solid #1db95459;border-radius:16px;flex-direction:column;align-items:center;gap:10px;width:100%;padding:18px 16px;display:flex}.daily-card-heading{color:#b3b3b3;text-align:center;align-items:center;gap:8px;font-size:13px;display:flex}.daily-badge{color:#05140a;letter-spacing:.04em;background:#1db954;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:800}.daily-done{color:#1ed760;margin:0;font-size:16px;font-weight:700}.daily-theme{color:#f5f5f5;margin:-2px 0 0;font-size:15px;font-weight:700}.streak-badge{color:#e0b23c;margin:-4px 0 0;font-size:15px;font-weight:700}.duration-badge{color:#b3b3b3;margin:-8px 0 0;font-size:13px}.challenge-card{background:linear-gradient(135deg,#e0b23c29,#e0b23c0d);border:1px solid #e0b23c66;border-radius:16px;flex-direction:column;align-items:center;gap:8px;width:100%;padding:18px 16px;display:flex}.challenge-badge{color:#05140a;letter-spacing:.04em;background:#e0b23c;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:800}.challenge-score{color:#f5f5f5;margin:0;font-size:16px;font-weight:600}.challenge-context{color:#b3b3b3;text-align:center;margin:-4px 0 4px;font-size:13px}.challenge-result{background:#e0b23c14;border:1px solid #e0b23c4d;border-radius:14px;flex-direction:column;align-items:center;gap:4px;width:100%;padding:14px 16px;display:flex}.challenge-result-line{color:#f5f5f5;margin:0;font-size:14px}.challenge-result-verdict{color:#e0b23c;margin:0;font-size:15px;font-weight:700}.share-block{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.share-grid{flex-wrap:wrap;justify-content:center;gap:6px;max-width:260px;display:flex}.share-cell{border-radius:5px;width:22px;height:22px}.share-cell.correct{background:#1db954}.share-cell.incorrect{background:#f15e6c}.share-actions{gap:10px;width:100%;display:flex}.share-actions .secondary-button{flex:1}.field-group{text-align:left;flex-direction:column;gap:6px;width:100%;display:flex}.field-label{color:#b3b3b3;text-transform:uppercase;letter-spacing:.03em;font-size:12px;font-weight:700}.language-select{color:#f5f5f5;cursor:pointer;appearance:none;background:#181818 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23b3b3b3'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") right 12px center/16px no-repeat;border:1px solid #2a2a2a;border-radius:10px;width:100%;padding:12px 14px;font-size:15px;font-weight:600;transition:border-color .15s}.language-select:hover:not(:disabled){border-color:#535353}.language-select:focus{border-color:#1db954;outline:none}.language-select:disabled{cursor:not-allowed;opacity:.6}.customize-toggle{color:#f5f5f5;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:10px;justify-content:space-between;align-items:center;gap:8px;width:100%;margin:0 -10px;padding:10px;font-size:14px;font-weight:700;animation:2.2s ease-in-out customizeAttention;display:flex}.customize-toggle:disabled{cursor:not-allowed;opacity:.6}@keyframes customizeAttention{0%,to{background:0 0}20%,55%{background:#1db95424}}@media (prefers-reduced-motion:reduce){.customize-toggle{animation:none}}.customize-summary{text-overflow:ellipsis;white-space:nowrap;color:#b3b3b3;text-align:right;flex:1;min-width:0;font-size:13px;font-weight:500;overflow:hidden}.customize-chevron{color:#b3b3b3;flex-shrink:0;transition:transform .15s}.customize-chevron.open{transform:rotate(180deg)}.customize-panel{flex-direction:column;gap:16px;width:100%;margin-top:-6px;animation:.15s both customizeIn;display:flex}@keyframes customizeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.mode-toggle{background:#ffffff0a;border:1px solid #ffffff14;border-radius:14px;gap:8px;width:100%;padding:4px;display:flex}.mode-option{color:#b3b3b3;cursor:pointer;background:0 0;border:none;border-radius:10px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:10px 8px;font-size:14px;font-weight:700;transition:background .15s,color .15s;display:flex}.mode-option:hover:not(:disabled):not(.active){background:#ffffff0d}.mode-option.active{color:#05140a;background:#1db954}.mode-option-sub{color:inherit;opacity:.75;font-size:11px;font-weight:500}.mode-option:disabled{cursor:not-allowed;opacity:.6}.mode-tag{color:#05140a;text-transform:uppercase;background:#e0b23c;border-radius:999px;margin-right:6px;padding:2px 6px;font-size:11px;font-weight:800}.quiz-screen{width:100%;position:relative}.quiz-backdrop{z-index:0;filter:blur(50px)brightness(.35)saturate(1.3);background-position:50%;background-size:cover;animation:.8s both backdropIn;position:fixed;inset:0;transform:scale(1.2)}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}.quiz-content{z-index:1;flex-direction:column;align-items:center;gap:16px;width:100%;display:flex;position:relative}.progress-track{background:#ffffff1a;border-radius:999px;width:100%;height:6px;overflow:hidden}.progress-fill{background:#1db954;border-radius:999px;height:100%;transition:width .4s}.progress{color:#b3b3b3;justify-content:space-between;align-items:center;width:100%;font-size:14px;display:flex}.score-pill{color:#f5f5f5;background:#2a2a2a;border-radius:999px;padding:4px 12px;font-weight:600}.question-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;border:1px solid #ffffff14;border-radius:20px;flex-direction:column;align-items:center;gap:16px;width:100%;padding:24px 20px;animation:.35s both cardIn;display:flex;box-shadow:0 16px 48px #0006}@keyframes cardIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.audio-clip{flex-direction:column;align-items:center;gap:12px;display:flex}.album-frame{background:#282828;border-radius:16px;justify-content:center;align-items:center;width:110px;height:110px;display:flex;overflow:hidden;box-shadow:0 8px 24px #00000080}.album-frame img{object-fit:cover;filter:blur(18px)saturate(.8);width:100%;height:100%;transition:filter .6s;transform:scale(1.15)}.album-frame.revealed img{filter:blur()saturate()}.album-placeholder{color:#535353;font-size:32px}.play-wrap{justify-content:center;align-items:center;width:96px;height:96px;display:flex;position:relative}.ring{pointer-events:none;width:96px;height:96px;position:absolute;inset:0;transform:rotate(-90deg)}.ring-track{fill:none;stroke:#ffffff1a;stroke-width:4px}.ring-fill{fill:none;stroke:#1db954;stroke-width:4px;stroke-linecap:round}.play-button{color:#05140a;cursor:pointer;background:#1db954;border:none;border-radius:50%;justify-content:center;align-items:center;width:76px;height:76px;transition:transform .15s;display:flex}.play-button:hover{transform:scale(1.05)}.play-button.playing{box-shadow:0 0 #1db95480}.spinner{border:3px solid #05140a4d;border-top-color:#05140a;border-radius:50%;width:22px;height:22px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.audio-hint{color:#b3b3b3;align-items:center;gap:8px;font-size:13px;display:inline-flex}.eq{align-items:flex-end;gap:2px;height:14px;display:inline-flex}.eq span{background:#1db954;border-radius:1px;width:3px;animation:.9s ease-in-out infinite eqBounce}.eq span:first-child{animation-delay:0s}.eq span:nth-child(2){animation-delay:.2s}.eq span:nth-child(3){animation-delay:.4s}@keyframes eqBounce{0%,to{height:4px}50%{height:14px}}.options{flex-direction:column;gap:10px;width:100%;display:flex}.option{color:#f5f5f5;cursor:pointer;text-align:left;background:#181818;border:1px solid #2a2a2a;border-radius:10px;flex-direction:row;justify-content:space-between;align-items:center;width:100%;padding:12px 16px;transition:border-color .15s,background .15s,transform .25s cubic-bezier(.34,1.56,.64,1);display:flex}.option:active:not(:disabled){transition:transform 80ms;transform:scale(.96)}.option:hover:not(:disabled){background:#202020;border-color:#535353;transform:scale(1.01)}.option-text{flex-direction:column;align-items:flex-start;display:flex}.option-title{font-size:15px;font-weight:600}.option-artist{color:#b3b3b3;font-size:13px}.option-icon{flex-shrink:0;animation:.25s both popIn}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.option.correct{color:#1ed760;background:#1db95426;border-color:#1db954}.option.correct .option-artist{color:#8fe0ac}.option.incorrect{color:#f15e6c;background:#f15e6c26;border-color:#f15e6c}.option.incorrect .option-artist{color:#f5a3ab}.option.disabled{opacity:.6}.confetti-layer{pointer-events:none;z-index:50;position:fixed;inset:0;overflow:hidden}.confetti-piece{opacity:.9;border-radius:2px;width:8px;height:14px;animation-name:confettiFall;animation-timing-function:ease-in;animation-fill-mode:forwards;position:absolute;top:-12px}@keyframes confettiFall{0%{opacity:1;transform:translate(0)rotate(0)}to{transform:translate(var(--drift), 100vh) rotate(var(--rotate));opacity:0}}@media (prefers-reduced-motion:reduce){.confetti-layer{display:none}}.score-ring-wrap{justify-content:center;align-items:center;width:140px;height:140px;display:flex;position:relative}.score-ring{pointer-events:none;width:140px;height:140px;position:absolute;inset:0;transform:rotate(-90deg)}.score-ring-track{fill:none;stroke:#ffffff1a;stroke-width:8px}.score-ring-fill{fill:none;stroke-width:8px;stroke-linecap:round;transition:stroke-dashoffset 1s}.score-ring-fill.tier-perfect,.score-ring-fill.tier-great{stroke:#1db954}.score-ring-fill.tier-ok{stroke:#e0b23c}.score-ring-fill.tier-low{stroke:#f15e6c}.score-ring-label{flex-direction:column;align-items:center;display:flex}.score-display{font-size:40px;font-weight:800;line-height:1}.score-total{color:#b3b3b3;font-size:15px}.tab-switcher{background:#ffffff0a;border:1px solid #ffffff14;border-radius:14px;gap:4px;width:100%;padding:4px;display:flex;position:relative}.tab-indicator{background:linear-gradient(135deg,#1db954,#14833b);border-radius:10px;width:calc(50% - 6px);height:calc(100% - 8px);transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .35s,box-shadow .35s;position:absolute;top:4px;left:4px;box-shadow:0 4px 14px #1db95459}.tab-indicator.live{background:linear-gradient(135deg,#5865f2,#4752c4);transform:translate(calc(100% + 4px));box-shadow:0 4px 14px #5865f259}.tab-button{z-index:1;color:#b3b3b3;cursor:pointer;background:0 0;border:none;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 8px;font-size:14px;font-weight:700;transition:color .25s;display:flex;position:relative}.tab-button.active{color:#05140a}@media (prefers-reduced-motion:reduce){.tab-indicator{transition:none}}.tab-panel{flex-direction:column;align-items:center;gap:16px;width:100%;animation:.3s cubic-bezier(.16,1,.3,1) both tabPanelIn;display:flex}@keyframes tabPanelIn{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@media (prefers-reduced-motion:reduce){.tab-panel{animation:none}}.live-hero{flex-direction:column;align-items:center;gap:14px;width:100%;padding:4px 0 8px;display:flex}.live-hero-icon{background:linear-gradient(135deg,#5865f2,#4752c4);border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;font-size:30px;display:flex;position:relative;box-shadow:0 8px 24px #5865f259}.live-hero-ring{border:2px solid #5865f28c;border-radius:50%;animation:2.4s ease-out infinite liveRingPulse;position:absolute;inset:0}.live-hero-ring.delay{animation-delay:1.2s}@keyframes liveRingPulse{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}@media (prefers-reduced-motion:reduce){.live-hero-ring{animation:none;display:none}}.live-hero-title{margin:0;font-size:20px}.live-feature-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.live-feature-chip{color:#cfd2ff;background:#5865f224;border:1px solid #5865f24d;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:600}.live-cta{color:#fff;background:#5865f2;margin-top:4px}.live-cta:hover:not(:disabled){background:#6875f5}.live-badge{color:#fff;letter-spacing:.04em;background:#5865f2;border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:11px;font-weight:800;display:inline-flex}.live-dot{background:#fff;border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.room-screen,.live-quiz-screen{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0a;border:1px solid #ffffff14;border-radius:24px;padding:36px 28px;box-shadow:0 20px 60px #00000073}.live-quiz-screen.quiz-screen{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:none;padding:0}.text-input{color:#f5f5f5;background:#181818;border:1px solid #2a2a2a;border-radius:10px;width:100%;padding:12px 14px;font-size:15px}.text-input:focus{border-color:#1db954;outline:none}.room-code-input{text-transform:uppercase;letter-spacing:.1em;text-align:center;font-weight:700}.room-code-display{background:#ffffff0a;border:1px dashed #ffffff2e;border-radius:16px;flex-direction:column;align-items:center;gap:10px;width:100%;padding:18px 16px;display:flex}.room-code-value{letter-spacing:.2em;font-family:monospace;font-size:32px;font-weight:800}.player-list{flex-direction:column;gap:8px;width:100%;margin:0;padding:0;list-style:none;display:flex}.player-row{background:#ffffff0a;border-radius:12px;align-items:center;gap:10px;padding:10px 14px;display:flex}.player-row.disconnected{opacity:.55}.player-avatar{color:#fff;background:#5865f2;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:13px;font-weight:700;display:flex}.player-name{text-align:left;flex:1;align-items:center;gap:6px;font-size:14px;display:flex}.host-tag{color:#05140a;background:#e0b23c;border-radius:999px;padding:2px 6px;font-size:10px;font-weight:800}.player-status{color:#b3b3b3;font-size:12px}.player-strip{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;display:flex}.player-chip{opacity:1;flex-direction:column;align-items:center;gap:4px;display:flex}.player-chip.disconnected{opacity:.4}.player-chip-avatar{color:#f5f5f5;background:#2a2a2a;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:13px;font-weight:700;display:flex;position:relative}.player-chip.self .player-chip-avatar{color:#fff;background:#5865f2}.player-chip-answered{background:#1db954;border:2px solid #121212;border-radius:50%;width:10px;height:10px;position:absolute;bottom:-2px;right:-2px}.player-chip-score{color:#b3b3b3;font-size:11px;font-weight:600}.countdown-number{color:#5865f2;font-size:64px;font-weight:800}.option.selected{background:#5865f226;border-color:#5865f2}.leaderboard{flex-direction:column;gap:8px;width:100%;margin:0;padding:0;list-style:none;display:flex}.leaderboard-row{background:#ffffff0a;border-radius:12px;align-items:center;gap:12px;padding:12px 16px;display:flex}.leaderboard-row.self{background:#5865f21a;border:1px solid #5865f2}.leaderboard-rank{text-align:center;flex-shrink:0;width:32px;font-size:18px;font-weight:800}.leaderboard-name{text-align:left;flex:1;font-size:15px;font-weight:600}.leaderboard-score{font-size:18px;font-weight:800}.leaderboard-total{color:#b3b3b3;font-size:13px;font-weight:500}.theme-badge{color:#e0b23c;background:#e0b23c24;border:1px solid #e0b23c59;border-radius:999px;align-self:center;padding:5px 14px;font-size:13px;font-weight:700}.admin-screen{max-width:640px}.admin-secret-form{flex-direction:column;gap:12px;width:100%;display:flex}.admin-puzzle-list{flex-direction:column;gap:14px;width:100%;display:flex}.admin-puzzle-card{text-align:left;background:#ffffff0a;border:1px solid #ffffff14;border-radius:16px;flex-direction:column;gap:10px;width:100%;padding:16px 18px;display:flex}.admin-puzzle-head{justify-content:space-between;align-items:center;display:flex}.admin-puzzle-lang{text-transform:uppercase;color:#b3b3b3;margin-left:8px;font-size:12px;font-weight:700}.admin-puzzle-theme{color:#f5f5f5;margin:0;font-size:15px;font-weight:600}.pill{text-transform:uppercase;letter-spacing:.03em;border-radius:999px;flex-shrink:0;padding:3px 10px;font-size:11px;font-weight:800}.admin-status-pending{color:#e0b23c;background:#e0b23c29}.admin-status-approved{color:#1ed760;background:#1db95429}.admin-status-rejected{color:#f15e6c;background:#f15e6c29}.admin-track-list{flex-direction:column;gap:10px;display:flex}.admin-track-row{background:#ffffff08;border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;display:flex}.admin-track-info{flex-direction:column;gap:2px;display:flex}.admin-track-name{font-size:14px;font-weight:600}.admin-track-artist{color:#b3b3b3;font-size:12.5px}.admin-track-difficulty{color:gray;font-size:11px}.admin-track-no-audio{color:#f15e6c;font-size:12px;font-style:italic}.admin-puzzle-actions{gap:10px;display:flex}.admin-puzzle-actions .primary-button,.admin-puzzle-actions .secondary-button{flex:1;width:auto}