:root{--bg-primary:#0d0f14;--bg-secondary:#161923;--bg-card:#ffffff0d;--bg-card-hover:#ffffff17;--text-primary:#f0f2f8;--text-secondary:#9ba3bb;--text-muted:#5a6280;--accent-primary:#6c63ff;--accent-glow:#6c63ff66;--accent-correct:#22c55e;--accent-correct-glow:#22c55e59;--accent-wrong:#ef4444;--accent-wrong-glow:#ef444459;--accent-warning:#f59e0b;--accent-life:#ff4d6d;--timer-safe:#22c55e;--timer-mid:#f59e0b;--timer-danger:#ef4444;--border-subtle:#ffffff14;--border-active:#6c63ff80;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-full:9999px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:40px;--shadow-card:0 4px 24px #0006;--shadow-glow:0 0 20px var(--accent-glow);--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);min-height:100vh;overflow-x:hidden}button{cursor:pointer;background:0 0;border:none;font-family:inherit}button:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}img{max-width:100%;display:block}#root{flex-direction:column;min-height:100vh;display:flex}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes correctPop{0%{transform:scale(1)}40%{transform:scale(1.06)}70%{transform:scale(.97)}to{transform:scale(1)}}@keyframes wrongShake{0%,to{transform:translate(0)}15%{transform:translate(-8px)}30%{transform:translate(8px)}45%{transform:translate(-6px)}60%{transform:translate(6px)}75%{transform:translate(-3px)}90%{transform:translate(3px)}}@keyframes lifePop{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.3)}to{opacity:1;transform:scale(1)}}@keyframes lifeLose{0%{opacity:1;transform:scale(1)rotate(0)}20%{transform:scale(1.1)rotate(-10deg)}40%{transform:scale(.9)rotate(10deg)}70%{opacity:.6;transform:scale(.8)rotate(-5deg)}to{opacity:0;transform:scale(.5)}}@keyframes scoreFloat{0%{opacity:1;transform:translateY(0)}80%{opacity:1}to{opacity:0;transform:translateY(-48px)}}@keyframes streakLight{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes streakBurst{0%{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 14px #0000}to{box-shadow:0 0 #0000}}@keyframes waveBar1{0%,to{height:8px}50%{height:28px}}@keyframes waveBar2{0%,to{height:16px}30%{height:36px}70%{height:10px}}@keyframes waveBar3{0%,to{height:24px}40%{height:8px}80%{height:32px}}@keyframes waveBar4{0%,to{height:12px}25%{height:32px}75%{height:6px}}@keyframes waveBar5{0%,to{height:20px}60%{height:36px}}@keyframes timerPulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scorePulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.login-screen{min-height:100dvh;padding:calc(var(--space-lg) + env(safe-area-inset-top)) calc(var(--space-lg) + env(safe-area-inset-right)) calc(var(--space-lg) + env(safe-area-inset-bottom)) calc(var(--space-lg) + env(safe-area-inset-left));background:var(--bg-primary);flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.login-screen:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(at 20%,#6c63ff26,#0000 60%),radial-gradient(at 80% 20%,#a855f71f,#0000 50%),radial-gradient(at 60% 80%,#22c55e14,#0000 50%);animation:12s ease-in-out infinite alternate auroraShift;position:absolute;top:-50%;bottom:-50%;left:-50%;right:-50%}@keyframes auroraShift{0%{transform:translate(0)rotate(0)scale(1)}33%{transform:translate(2%,-3%)rotate(2deg)scale(1.05)}66%{transform:translate(-3%,2%)rotate(-1deg)scale(.98)}to{transform:translate(1%,1%)rotate(1deg)scale(1.02)}}.login-screen__particles{pointer-events:none;z-index:0;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.login-screen__note{opacity:0;color:#6c63ff40;font-size:1.4rem;animation:linear infinite floatNote;position:absolute}.login-screen__note:first-child{animation-duration:14s;animation-delay:0s;left:10%}.login-screen__note:nth-child(2){animation-duration:18s;animation-delay:2s;left:25%}.login-screen__note:nth-child(3){animation-duration:16s;animation-delay:5s;left:45%}.login-screen__note:nth-child(4){animation-duration:20s;animation-delay:1s;left:65%}.login-screen__note:nth-child(5){animation-duration:15s;animation-delay:4s;left:80%}.login-screen__note:nth-child(6){animation-duration:22s;animation-delay:7s;left:35%}.login-screen__note:nth-child(7){animation-duration:17s;animation-delay:3s;left:90%}.login-screen__note:nth-child(8){animation-duration:19s;animation-delay:6s;left:55%}@keyframes floatNote{0%{opacity:0;transform:translateY(100vh)rotate(0)scale(.8)}10%{opacity:.3}90%{opacity:.15}to{opacity:0;transform:translateY(-10vh)rotate(360deg)scale(1.2)}}.login-screen__card{z-index:1;-webkit-backdrop-filter:blur(24px);border-radius:var(--radius-xl);align-items:center;gap:var(--space-md);background:#161923b3;border:1px solid #ffffff14;flex-direction:column;width:100%;max-width:400px;padding:48px 32px;display:flex;position:relative;box-shadow:0 24px 64px #00000080,inset 0 0 0 1px #ffffff0a,inset 0 1px #ffffff0f}.login-screen__card>*{opacity:0;animation:.5s forwards staggerFadeIn}.login-screen__card>:first-child{animation-delay:.1s}.login-screen__card>:nth-child(2){animation-delay:.2s}.login-screen__card>:nth-child(3){animation-delay:.3s}.login-screen__card>:nth-child(4){animation-delay:.4s}.login-screen__card>:nth-child(5){animation-delay:.5s}.login-screen__card>:nth-child(6){animation-delay:.6s}.login-screen__card>:nth-child(7){animation-delay:.7s}@keyframes staggerFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.login-screen__emoji{filter:drop-shadow(0 0 12px #6c63ff66);font-size:3.2rem;line-height:1}.login-screen__title{letter-spacing:-.03em;color:var(--text-primary);margin:0;font-size:2.4rem;font-weight:800}.login-screen__title-ly{background:linear-gradient(135deg,#6c63ff,#a855f7,#6c63ff) 0 0/200% 200%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;animation:4s ease-in-out infinite gradientShift}@keyframes gradientShift{0%,to{background-position:0%}50%{background-position:100%}}.login-screen__subtitle{color:var(--text-secondary);text-align:center;margin:0;font-size:.9rem;line-height:1.6}.login-screen__buttons{gap:var(--space-sm);width:100%;margin-top:var(--space-sm);flex-direction:column;display:flex}.login-screen__btn{justify-content:center;align-items:center;gap:var(--space-sm);border-radius:var(--radius-md);cursor:pointer;width:100%;transition:opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);border:none;padding:.8rem 1rem;font-size:.95rem;font-weight:600;display:flex;position:relative}@media (hover:hover) and (pointer:fine){.login-screen__btn:hover:not(:disabled){opacity:.92;transform:translateY(-2px)}}.login-screen__btn:active:not(:disabled){transform:translateY(0)scale(.98)}.login-screen__btn:disabled{opacity:.45;cursor:not-allowed}.login-screen__btn--google{color:#1f1f1f;background:#fff;box-shadow:0 2px 8px #0003}@media (hover:hover) and (pointer:fine){.login-screen__btn--google:hover:not(:disabled){box-shadow:0 4px 20px #4285f44d}}.login-screen__btn--apple{color:#fff;background:#000;box-shadow:0 2px 8px #0000004d}@media (hover:hover) and (pointer:fine){.login-screen__btn--apple:hover:not(:disabled){box-shadow:0 4px 20px #ffffff1a}}.login-screen__btn--primary{color:#fff;margin-top:var(--space-xs);background:linear-gradient(135deg,#6c63ff,#a855f7);box-shadow:0 2px 12px #6c63ff4d}@media (hover:hover) and (pointer:fine){.login-screen__btn--primary:hover:not(:disabled){box-shadow:0 6px 24px #6c63ff80}}.login-screen__btn-icon{flex-shrink:0;width:20px;height:20px}.login-screen__invite-form{gap:var(--space-sm);width:100%;margin-top:var(--space-sm);flex-direction:column;display:flex}.login-screen__input{border:1px solid var(--border-subtle);border-radius:var(--radius-md);width:100%;color:var(--text-primary);box-sizing:border-box;transition:border-color var(--transition-fast), box-shadow var(--transition-fast);background:#0d0f1499;padding:.8rem 1rem;font-family:inherit;font-size:1rem}.login-screen__input:focus{border-color:var(--accent-primary);outline:none;box-shadow:0 0 0 3px #6c63ff40,0 0 16px #6c63ff26}.login-screen__input::placeholder{color:var(--text-muted)}.login-screen__input:disabled{opacity:.6;cursor:not-allowed}.login-screen__error{color:#ef4444;text-align:center;margin:0;font-size:.8rem;animation:.4s shakeError}@keyframes shakeError{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.login-screen__invite-note{color:var(--text-muted);text-align:center;margin:0;font-size:.75rem}.login-screen__signout-link{color:var(--text-muted);cursor:pointer;margin-top:var(--space-xs);transition:color var(--transition-fast);background:0 0;border:none;padding:0;font-size:.75rem;text-decoration:underline}@media (hover:hover) and (pointer:fine){.login-screen__signout-link:hover{color:var(--text-secondary)}}.login-screen__divider{align-items:center;gap:var(--space-sm);width:100%;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;display:flex}.login-screen__divider:before,.login-screen__divider:after{content:"";background:var(--border-subtle);flex:1;height:1px}.login-screen__legal{z-index:1;justify-content:center;align-items:center;gap:var(--space-xs);margin-top:var(--space-lg);display:flex;position:relative}.login-screen__legal-link{color:var(--text-muted);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;padding:0;font-size:.72rem}.login-screen__legal-link:hover{color:var(--text-secondary)}.login-screen__legal-dot{color:var(--text-muted);font-size:.72rem}@media (max-width:480px){.login-screen{padding:var(--space-md)}.login-screen__card{max-width:100%;padding:36px 20px}.login-screen__title{font-size:2rem}.login-screen__subtitle{font-size:.85rem}.login-screen__btn{padding:.7rem .8rem;font-size:.9rem}.login-screen__note:nth-child(n+6){display:none}}.home-screen{min-height:100vh;padding:calc(var(--space-xl) + env(safe-area-inset-top)) calc(var(--space-md) + env(safe-area-inset-right)) calc(var(--space-xl) + env(safe-area-inset-bottom)) calc(var(--space-md) + env(safe-area-inset-left));flex-direction:column;align-items:center;display:flex;position:relative}.home-screen__header{text-align:center;margin-bottom:var(--space-xl)}.home-screen__logo{width:clamp(150px,40vw,220px);height:auto;padding:var(--space-sm);margin-left:auto;margin-right:auto;margin-bottom:var(--space-lg);background:var(--bg-secondary);border:3px solid #ffffffd9;border-radius:50%;display:block}.home-screen__subtitle{color:var(--text-secondary);white-space:nowrap;margin:0 auto;font-size:1rem;line-height:1.6}.home-screen__error{justify-content:space-between;align-items:center;gap:var(--space-sm);width:100%;max-width:560px;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);border:1px solid var(--accent-wrong);color:var(--accent-wrong);margin-bottom:var(--space-lg);background:#ef444426;font-size:.875rem;font-weight:600;animation:.25s fadeIn;display:flex}.home-screen__error-close{border-radius:var(--radius-full);width:24px;height:24px;color:inherit;opacity:.8;transition:opacity var(--transition-fast);flex-shrink:0;font-size:.75rem}@media (hover:hover) and (pointer:fine){.home-screen__error-close:hover{opacity:1}}.home-screen__genres{width:100%;max-width:680px}.home-screen__genres-heading{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);text-align:center;margin-bottom:var(--space-lg);font-size:.8rem;font-weight:700}.home-screen__grid{gap:var(--space-md);grid-template-columns:repeat(4,1fr);display:grid}.home-screen__grid .genre-card--special{grid-column:1/-1}.home-screen__decades{width:100%;max-width:680px}.home-screen__decade-desc,.home-screen__genre-desc{color:var(--text-muted);text-align:center;margin-bottom:var(--space-lg);letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}.home-screen__tabs{gap:var(--space-xs);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-full);margin-bottom:var(--space-xl);padding:4px;display:flex}.home-screen__tab{padding:var(--space-xs) var(--space-lg);border-radius:var(--radius-full);color:var(--text-secondary);transition:color var(--transition-fast), background var(--transition-fast);flex:1;font-size:.875rem;font-weight:600}.home-screen__tab--active{background:var(--accent-primary);color:#fff}@media (hover:hover) and (pointer:fine){.home-screen__tab:not(.home-screen__tab--active):hover{color:var(--text-primary)}}.home-screen__tab-badge{border-radius:var(--radius-full);background:var(--accent-wrong,#ef4444);color:#fff;justify-content:center;align-items:center;min-width:16px;height:16px;margin-left:4px;padding:0 4px;font-size:.6rem;font-weight:700;line-height:1;display:inline-flex}.home-screen__tab--active .home-screen__tab-badge{color:var(--accent-primary);background:#fff}.home-screen__artist{text-align:center;width:100%;max-width:480px}.home-screen__artist-desc{color:var(--text-muted);margin-bottom:var(--space-md);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;font-size:.75rem}.home-screen__artist-form{gap:var(--space-sm);display:flex}.home-screen__artist-input-wrap{flex:1;position:relative}.home-screen__artist-input{width:100%;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-primary);transition:border-color var(--transition-fast);outline:none;font-size:1rem}.home-screen__artist-input:focus{border-color:var(--accent-primary)}.home-screen__artist-input:disabled{opacity:.5}.home-screen__suggestions{z-index:50;border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-align:left;background:#1a1a2e;max-height:280px;margin:0;padding:4px;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;box-shadow:0 8px 24px #0009}.home-screen__suggestion{align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm,6px);cursor:pointer;transition:background .15s;display:flex}@media (hover:hover) and (pointer:fine){.home-screen__suggestion:hover,.home-screen__suggestion--active{background:color-mix(in srgb, var(--accent-primary) 12%, transparent)}}.home-screen__suggestion-img{object-fit:cover;background:var(--bg-secondary);border-radius:50%;flex-shrink:0;width:36px;height:36px}.home-screen__suggestion-img--placeholder{justify-content:center;align-items:center;font-size:1.1rem;display:flex}.home-screen__suggestion-info{flex-direction:column;min-width:0;display:flex}.home-screen__suggestion-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:600;overflow:hidden}.home-screen__suggestion-genre{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.7rem}.home-screen__artist-btn{padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);background:var(--accent-primary);color:#fff;transition:opacity var(--transition-fast);white-space:nowrap;font-size:1rem;font-weight:700}.home-screen__artist-btn:disabled{opacity:.4;cursor:not-allowed}@media (hover:hover) and (pointer:fine){.home-screen__artist-btn:not(:disabled):hover{opacity:.9}}.home-screen__daily{width:100%;max-width:480px}.home-screen__daily-desc{color:var(--text-muted);text-align:center;margin-bottom:var(--space-lg);letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}.daily-tab__today{width:100%;margin-bottom:var(--space-lg)}.daily-tab__play-btn{width:100%;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);background:var(--accent-primary);color:#fff;letter-spacing:.02em;transition:transform var(--transition-fast), box-shadow var(--transition-fast);box-shadow:0 4px 16px var(--accent-glow);font-size:1rem;font-weight:700}@media (hover:hover) and (pointer:fine){.daily-tab__play-btn:hover{box-shadow:0 8px 24px var(--accent-glow);transform:translateY(-2px)}}.daily-tab__play-btn:active{transform:translateY(0)}@keyframes daily-skeleton-pulse{0%,to{opacity:.25}50%{opacity:.5}}.daily-tab__skeleton-result{align-items:center;gap:var(--space-sm);padding:var(--space-md);border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border-subtle);display:flex}.daily-tab__skeleton-art{background:var(--text-muted);border-radius:6px;flex-shrink:0;width:48px;height:48px;animation:1.4s ease-in-out infinite daily-skeleton-pulse}.daily-tab__skeleton-info{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.daily-tab__skeleton-line{background:var(--text-muted);border-radius:6px;height:12px;animation:1.4s ease-in-out infinite daily-skeleton-pulse}.daily-tab__skeleton-line--long{width:65%}.daily-tab__skeleton-line--short{width:40%;animation-delay:.15s}.daily-tab__skeleton-score{background:var(--text-muted);border-radius:50%;flex-shrink:0;width:32px;height:32px;animation:1.4s ease-in-out .3s infinite daily-skeleton-pulse}.daily-tab__skeleton-countdown{border-radius:var(--radius-md);background:var(--text-muted);height:40px;margin-top:8px;animation:1.4s ease-in-out .2s infinite daily-skeleton-pulse}.daily-tab__today-result{align-items:center;gap:var(--space-sm);padding:var(--space-md);border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border-subtle);display:flex}.daily-tab__today-art{object-fit:cover;border-radius:6px;flex-shrink:0;width:48px;height:48px}.daily-tab__today-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.daily-tab__today-song{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:700;overflow:hidden}.daily-tab__today-artist{color:var(--text-secondary);font-size:.75rem}.daily-tab__today-score{flex-direction:column;flex-shrink:0;align-items:center;gap:2px;display:flex}.daily-tab__today-icon{font-size:1.2rem;font-weight:900}.daily-tab__today-icon--correct{color:#22c55e}.daily-tab__today-icon--wrong{color:#ef4444}.daily-tab__today-icon--timeout{color:#f59e0b}.daily-tab__today-points{color:var(--text-muted);font-size:.75rem;font-weight:700}.daily-tab__countdown{justify-content:center;align-items:center;gap:var(--space-sm);padding:10px var(--space-md);border-radius:var(--radius-md);background:color-mix(in srgb, var(--accent-primary) 8%, transparent);border:1px solid color-mix(in srgb, var(--accent-primary) 15%, transparent);margin-top:8px;display:flex}.daily-tab__countdown-label{color:var(--text-secondary);letter-spacing:.02em;font-size:.75rem;font-weight:600}.daily-tab__countdown-time{font-variant-numeric:tabular-nums;color:var(--accent-primary);letter-spacing:.06em;font-size:1.1rem;font-weight:800}.daily-tab__streak{justify-content:center;align-items:center;gap:var(--space-lg);padding:var(--space-md);border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border-subtle);margin-bottom:var(--space-lg);display:flex}.daily-tab__streak-item{flex-direction:column;align-items:center;gap:2px;display:flex}.daily-tab__streak-value{color:var(--text-primary);font-size:1.8rem;font-weight:900;line-height:1}.daily-tab__streak-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:.65rem;font-weight:700}.daily-tab__streak-divider{background:var(--border-subtle);width:1px;height:36px}.daily-tab__history{width:100%}.daily-tab__history-heading{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-sm);font-size:.7rem;font-weight:700}.daily-tab__history-list{scrollbar-width:none;-ms-overflow-style:none;flex-direction:column;gap:4px;max-height:320px;display:flex;overflow-y:auto}.daily-tab__history-list::-webkit-scrollbar{display:none}.daily-tab__history-row{align-items:center;gap:var(--space-sm);border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border-subtle);padding:8px 10px;display:flex}.daily-tab__history-art{object-fit:cover;border-radius:4px;flex-shrink:0;width:36px;height:36px}.daily-tab__history-info{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.daily-tab__history-song{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;font-weight:700;overflow:hidden}.daily-tab__history-artist{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.7rem;overflow:hidden}.daily-tab__history-date{color:var(--text-muted);font-size:.6rem}.daily-tab__history-result{flex-direction:column;flex-shrink:0;align-items:center;gap:2px;min-width:32px;display:flex}.daily-tab__history-icon{font-size:1rem;font-weight:900}.daily-tab__history-icon--correct{color:#22c55e}.daily-tab__history-icon--wrong{color:#ef4444}.daily-tab__history-icon--timeout{color:#f59e0b}.daily-tab__history-points{color:var(--text-muted);font-size:.65rem;font-weight:700}.home-screen__history{width:100%;margin-top:var(--space-md);text-align:left}.home-screen__history-heading{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-sm);font-size:.7rem;font-weight:700}.home-screen__history-list{gap:var(--space-xs);flex-direction:column;display:flex}.home-screen__history-toggle{width:100%;margin-top:var(--space-sm);padding:var(--space-xs) 0;border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;background:0 0;font-size:.75rem;font-weight:600;transition:color .2s,border-color .2s;display:block}@media (hover:hover) and (pointer:fine){.home-screen__history-toggle:hover{color:var(--text-primary);border-color:var(--text-secondary)}}.home-screen__history-loading{color:var(--text-muted);text-align:center;margin-top:var(--space-lg);font-size:.8rem}.home-screen__history-skeleton{margin-top:var(--space-sm);flex-direction:column;gap:10px;display:flex}.home-screen__skeleton-card{border-radius:var(--radius-md);background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-secondary) 50%, var(--bg-card) 75%);background-size:200% 100%;height:60px;animation:1.4s ease-in-out infinite home-skeleton-shimmer}@keyframes home-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.home-screen__footer{margin-top:var(--space-xl);color:var(--text-muted);text-align:center;font-size:.75rem}@media (max-width:480px){.home-screen{padding:var(--space-lg) var(--space-sm)}.home-screen__title{font-size:clamp(2.2rem,10vw,3rem)}.home-screen__subtitle{font-size:.875rem}.home-screen__header,.home-screen__tabs{margin-bottom:var(--space-lg)}.home-screen__tab{padding:var(--space-xs) var(--space-sm);font-size:.75rem}.home-screen__grid{gap:var(--space-sm);grid-template-columns:repeat(2,1fr)}.home-screen__artist-form{flex-direction:column}.home-screen__artist-btn{width:100%}.home-screen__footer p{padding:0 var(--space-sm);font-size:.7rem}}@media (max-width:360px){.home-screen__grid{grid-template-columns:1fr}}@media (max-width:800px){.home-screen__artist-desc{white-space:normal}}.genre-card{justify-content:center;align-items:center;gap:var(--space-sm);width:100%;min-height:140px;padding:var(--space-lg) var(--space-md);border-radius:var(--radius-lg);background:var(--bg-card);-webkit-backdrop-filter:blur(12px);transition:transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);cursor:pointer;border:1px solid #ffffff1a;flex-direction:column;animation:10ms ease-out genre-card-mount;display:flex;position:relative;overflow:hidden}@keyframes genre-card-mount{0%{pointer-events:none}to{pointer-events:auto}}@media (hover:hover) and (pointer:fine){.genre-card:hover{border-color:var(--genre-color);box-shadow:0 8px 32px #0006, 0 0 24px color-mix(in srgb, var(--genre-color) 40%, transparent);transform:translateY(-6px)scale(1.02)}.genre-card:focus-visible{border-color:var(--genre-color);box-shadow:0 8px 32px #0006, 0 0 24px color-mix(in srgb, var(--genre-color) 40%, transparent);transform:translateY(-6px)scale(1.02)}}.genre-card:active{transition-duration:80ms;transform:translateY(-2px)scale(1)}.genre-card__glow{background:var(--genre-gradient);opacity:.12;transition:opacity var(--transition-base);pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}@media (hover:hover) and (pointer:fine){.genre-card:hover .genre-card__glow{opacity:.22}.genre-card:focus-visible .genre-card__glow{opacity:.22}}.genre-card__emoji{filter:drop-shadow(0 2px 4px #0006);transition:transform var(--transition-base);font-size:2.5rem;line-height:1;display:block}@media (hover:hover) and (pointer:fine){.genre-card:hover .genre-card__emoji{transform:scale(1.15)rotate(-5deg)}}.genre-card__label{letter-spacing:.04em;color:var(--text-primary);text-transform:uppercase;font-size:1rem;font-weight:700}.genre-card--completed{cursor:default;opacity:.6}@media (hover:hover) and (pointer:fine){.genre-card--completed:hover{box-shadow:none;border-color:#ffffff1a;transform:none}.genre-card--completed:focus-visible{box-shadow:none;border-color:#ffffff1a;transform:none}}.genre-card--completed .genre-card__glow{opacity:.08}@media (hover:hover) and (pointer:fine){.genre-card--completed:hover .genre-card__glow{opacity:.08}}.genre-card--completed .genre-card__emoji{transform:none}@media (hover:hover) and (pointer:fine){.genre-card--completed:hover .genre-card__emoji{transform:none}}.genre-card--special{border:1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);background:linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 12%, transparent) 0%, color-mix(in srgb, var(--accent-primary) 10%, transparent) 40%, #ff6b9d1a 70%, #f5a6231a 100%);min-height:100px}.genre-card--special .genre-card__glow{opacity:.18;animation:4s ease-in-out infinite specialGlow}@media (hover:hover) and (pointer:fine){.genre-card--special:hover .genre-card__glow{opacity:.35}.genre-card--special:focus-visible .genre-card__glow{opacity:.35}}.genre-card--special .genre-card__label{background:linear-gradient(135deg, var(--accent-primary), var(--accent-primary), #ff6b9d, #f5a623, var(--accent-primary));-webkit-text-fill-color:transparent;letter-spacing:.08em;filter:drop-shadow(0 0 6px color-mix(in srgb, var(--accent-primary) 50%, transparent));background-size:200% 200%;-webkit-background-clip:text;background-clip:text;font-size:1.1rem;transition:filter .4s;animation:4s ease-in-out infinite universalTextShift}@media (hover:hover) and (pointer:fine){.genre-card--special:hover .genre-card__label{filter:drop-shadow(0 0 12px color-mix(in srgb, var(--accent-primary) 70%, transparent)) drop-shadow(0 0 24px color-mix(in srgb, var(--accent-primary) 40%, transparent))}.genre-card--special:focus-visible .genre-card__label{filter:drop-shadow(0 0 12px color-mix(in srgb, var(--accent-primary) 70%, transparent)) drop-shadow(0 0 24px color-mix(in srgb, var(--accent-primary) 40%, transparent))}}@keyframes universalTextShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@media (hover:hover) and (pointer:fine){.genre-card--special:hover{border-color:color-mix(in srgb, var(--accent-primary) 60%, transparent);box-shadow:0 8px 32px #0006, 0 0 20px color-mix(in srgb, var(--accent-primary) 25%, transparent), 0 0 40px color-mix(in srgb, var(--accent-primary) 15%, transparent)}.genre-card--special:focus-visible{border-color:color-mix(in srgb, var(--accent-primary) 60%, transparent);box-shadow:0 8px 32px #0006, 0 0 20px color-mix(in srgb, var(--accent-primary) 25%, transparent), 0 0 40px color-mix(in srgb, var(--accent-primary) 15%, transparent)}}@keyframes specialGlow{0%,to{opacity:.18}50%{opacity:.28}}@media (max-width:480px){.genre-card{min-height:110px;padding:var(--space-md) var(--space-sm)}.genre-card__emoji{font-size:2rem}.genre-card__label{font-size:.85rem}}.artist-history-card{align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-sm) var(--space-md);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;text-align:left;transition:border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);display:flex}@media (hover:hover) and (pointer:fine){.artist-history-card:hover{border-color:var(--accent-primary);background:var(--bg-card-hover);transform:translate(4px)}}.artist-history-card:active{transition-duration:60ms;transform:translate(2px)}.artist-history-card__image-wrap{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex;overflow:hidden}.artist-history-card__image{object-fit:cover;width:100%;height:100%}.artist-history-card__image-placeholder{font-size:1.4rem}.artist-history-card__info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.artist-history-card__name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:700;overflow:hidden}.artist-history-card__score{color:var(--accent-primary);font-size:.8rem;font-weight:600}.artist-history-card__plays{color:var(--text-muted);font-size:.7rem}.artist-history-card__replay{color:var(--text-muted);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;font-size:.75rem}@media (hover:hover) and (pointer:fine){.artist-history-card:hover .artist-history-card__replay{opacity:1;color:var(--accent-primary)}}.profile-menu{top:calc(var(--space-md) + env(safe-area-inset-top));right:calc(var(--space-md) + env(safe-area-inset-right));z-index:100;position:absolute}.profile-menu__trigger{border-radius:var(--radius-full);border:2px solid var(--border-subtle);background:var(--bg-card);cursor:pointer;width:40px;height:40px;transition:border-color var(--transition-fast), box-shadow var(--transition-fast);justify-content:center;align-items:center;display:flex;overflow:hidden}@media (hover:hover) and (pointer:fine){.profile-menu__trigger:hover{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow)}}.profile-menu__avatar{object-fit:cover;width:100%;height:100%}.profile-menu__initials{color:var(--text-primary);letter-spacing:.04em;font-size:.8rem;font-weight:700}.profile-menu__dropdown{top:calc(100% + var(--space-sm));background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);min-width:260px;padding:var(--space-sm) 0;animation:.2s both profileDropIn;position:absolute;right:0;box-shadow:0 12px 32px #00000080}@keyframes profileDropIn{0%{opacity:0;transform:translateY(-6px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.profile-menu__info{padding:var(--space-sm) var(--space-md)}.profile-menu__name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:700;overflow:hidden}.profile-menu__email{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:.75rem;overflow:hidden}.profile-menu__divider{background:var(--border-subtle);height:1px;margin:var(--space-xs) 0}.profile-menu__view-profile{width:100%;padding:var(--space-sm) var(--space-md);text-align:left;color:var(--accent-primary);transition:background var(--transition-fast);cursor:pointer;font-size:.85rem;font-weight:600;display:block}@media (hover:hover) and (pointer:fine){.profile-menu__view-profile:hover{background:color-mix(in srgb, var(--accent-primary) 10%, transparent)}}.profile-menu__legal-link{width:100%;padding:var(--space-xs) var(--space-md);text-align:left;color:var(--text-secondary);transition:background var(--transition-fast);cursor:pointer;background:0 0;border:none;font-size:.8rem;display:block}@media (hover:hover) and (pointer:fine){.profile-menu__legal-link:hover{background:color-mix(in srgb, var(--accent-primary) 10%, transparent)}}.profile-menu__sign-out{width:100%;padding:var(--space-sm) var(--space-md);text-align:left;color:var(--accent-wrong);transition:background var(--transition-fast);cursor:pointer;font-size:.85rem;font-weight:600;display:block}@media (hover:hover) and (pointer:fine){.profile-menu__sign-out:hover{background:#ef44441a}}.profile-menu__rank{padding:var(--space-sm) var(--space-md);flex-wrap:wrap;align-items:center;gap:10px;display:flex}.profile-menu__rank-emoji{font-size:1.4rem;line-height:1}.profile-menu__rank-info{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.profile-menu__rank-name{color:var(--text-primary);font-size:.85rem;font-weight:800}.profile-menu__rank-points{color:var(--text-secondary);font-size:.7rem;font-weight:600}.profile-menu__rank-bar{background:#ffffff14;border-radius:3px;flex-basis:100%;width:100%;height:5px;overflow:hidden}.profile-menu__rank-bar-fill{background:var(--accent-primary,#a855f7);border-radius:3px;min-width:2px;height:100%;transition:width .6s}.profile-menu__stats{padding:var(--space-sm) var(--space-md) var(--space-xs)}.profile-menu__stats-title{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);align-items:center;gap:6px;margin-bottom:10px;font-size:.65rem;font-weight:700;display:flex}.profile-menu__stats-title:before{content:"";background:var(--accent-primary);border-radius:2px;width:3px;height:10px;display:inline-block}.profile-menu__stats-loading{color:var(--text-muted);text-align:center;padding:var(--space-sm) 0;font-size:.8rem}.profile-menu__stats-list{flex-direction:column;gap:0;display:flex}.profile-menu__stat-row{border-radius:var(--radius-sm);justify-content:space-between;align-items:center;padding:7px 10px;transition:background .15s;animation:.3s both statFadeIn;display:flex}.profile-menu__stat-row:nth-child(odd){background:color-mix(in srgb, var(--accent-primary) 5%, transparent)}@media (hover:hover) and (pointer:fine){.profile-menu__stat-row:hover{background:color-mix(in srgb, var(--accent-primary) 12%, transparent)}}.profile-menu__stat-row:first-child{animation-delay:30ms}.profile-menu__stat-row:nth-child(2){animation-delay:60ms}.profile-menu__stat-row:nth-child(3){animation-delay:90ms}.profile-menu__stat-row:nth-child(4){animation-delay:.12s}.profile-menu__stat-row:nth-child(5){animation-delay:.15s}.profile-menu__stat-row:nth-child(6){animation-delay:.18s}.profile-menu__stat-row:nth-child(7){animation-delay:.21s}.profile-menu__stat-row:nth-child(8){animation-delay:.24s}@keyframes statFadeIn{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:translate(0)}}.profile-menu__stat-label{color:var(--text-secondary);font-size:.72rem;font-weight:500}.profile-menu__stat-value{background:linear-gradient(135deg, var(--accent-glow), var(--accent-primary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:.82rem;font-weight:800}.profile-menu__favourites{flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px;margin-bottom:10px;display:flex}.profile-menu__fav-pill{color:var(--text-secondary);background:color-mix(in srgb, var(--accent-primary) 6%, transparent);border:1px solid color-mix(in srgb, var(--accent-primary) 10%, transparent);border-radius:var(--radius-full);padding:5px 12px;font-size:.68rem}.profile-menu__fav-pill strong{color:var(--accent-primary);text-transform:capitalize}.profile-menu__skeleton-row{pointer-events:none}.profile-menu__skeleton-label{background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-secondary) 50%, var(--bg-card) 75%);background-size:200% 100%;border-radius:4px;width:80px;height:10px;animation:1.4s infinite menuShimmer;display:block}.profile-menu__skeleton-value{background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-secondary) 50%, var(--bg-card) 75%);background-size:200% 100%;border-radius:4px;width:36px;height:12px;animation:1.4s .15s infinite menuShimmer;display:block}@keyframes menuShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (max-width:480px){.profile-menu{top:var(--space-sm);right:var(--space-sm)}.profile-menu__trigger{width:36px;height:36px}.profile-menu__initials{font-size:.7rem}.profile-menu__dropdown{min-width:190px}.profile-menu__stat-row{padding:6px 8px}.profile-menu__stat-label{font-size:.65rem}.profile-menu__stat-value{font-size:.75rem}.profile-menu__fav-pill{padding:4px 10px;font-size:.6rem}}.genre-picker-overlay{z-index:100;padding:var(--space-md);background:#0009;justify-content:center;align-items:center;animation:.15s fadeIn;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.genre-picker{background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);width:100%;max-width:400px;max-height:80vh;padding:var(--space-lg);gap:var(--space-md);flex-direction:column;display:flex;overflow-y:auto}.genre-picker__header{justify-content:space-between;align-items:center;display:flex}.genre-picker__title{color:var(--text-primary);font-size:1rem;font-weight:700}.genre-picker__close{border-radius:var(--radius-full);background:var(--bg-card);width:28px;height:28px;color:var(--text-muted);justify-content:center;align-items:center;font-size:.8rem;display:flex}.genre-picker__error{color:var(--accent-wrong,#ef4444);text-align:center;padding:var(--space-xs);border-radius:var(--radius-sm,6px);background:#ef44441a;font-size:.8rem}.genre-picker__section{gap:var(--space-xs);flex-direction:column;display:flex}.genre-picker__label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:.7rem;font-weight:700}.genre-picker__grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.genre-picker__item{padding:var(--space-sm) var(--space-xs);border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border-subtle);transition:background var(--transition-fast), border-color var(--transition-fast);flex-direction:column;align-items:center;gap:2px;display:flex}@media (hover:hover) and (pointer:fine){.genre-picker__item:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--accent-primary)}}.genre-picker__item:disabled{opacity:.5;cursor:not-allowed}.genre-picker__item-emoji{font-size:1.2rem}.genre-picker__item-name{color:var(--text-secondary);text-align:center;font-size:.65rem;font-weight:600}.genre-picker__loading{color:var(--text-muted);text-align:center;font-size:.8rem}.friends-tab{gap:var(--space-md);flex-direction:column;width:100%;max-width:480px;display:flex}.friends-tab__loading{padding:var(--space-xl);justify-content:center;display:flex}.friends-tab__loading-spinner{border:2.5px solid var(--border-subtle);border-top-color:var(--accent-primary);border-radius:50%;width:24px;height:24px;animation:.7s linear infinite spin}.friends-tab__skeleton{padding:var(--space-md) 0;flex-direction:column;gap:10px;display:flex}.friends-tab__skeleton-row{border-radius:var(--radius-md);background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-secondary) 50%, var(--bg-card) 75%);background-size:200% 100%;height:52px;animation:1.4s ease-in-out infinite friends-skeleton-shimmer}.friends-tab__skeleton-row--short{width:60%}@keyframes friends-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.friends-tab__code-card{align-items:center;gap:var(--space-xs);padding:var(--space-md) var(--space-lg);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);flex-direction:column;display:flex}.friends-tab__code-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-size:.7rem;font-weight:700}.friends-tab__code-row{align-items:center;gap:var(--space-sm);display:flex}.friends-tab__code-value{letter-spacing:.25em;color:var(--accent-primary);-webkit-user-select:all;user-select:all;font-family:SF Mono,Fira Code,monospace;font-size:1.6rem;font-weight:800}.friends-tab__code-copy{border-radius:var(--radius-full);background:color-mix(in srgb, var(--accent-primary) 15%, transparent);color:var(--accent-primary);transition:background var(--transition-fast), color var(--transition-fast);padding:4px 12px;font-size:.75rem;font-weight:600}@media (hover:hover) and (pointer:fine){.friends-tab__code-copy:hover{background:color-mix(in srgb, var(--accent-primary) 25%, transparent)}}.friends-tab__code-share{border-radius:var(--radius-full);background:var(--accent-primary);color:#fff;transition:background var(--transition-fast);padding:4px 12px;font-size:.75rem;font-weight:600}@media (hover:hover) and (pointer:fine){.friends-tab__code-share:hover{background:color-mix(in srgb, var(--accent-primary) 85%, #fff)}}.friends-tab__code-hint{color:var(--text-muted);font-size:.7rem}.friends-tab__add-form{gap:var(--space-sm);display:flex}.friends-tab__add-input{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-primary);letter-spacing:.15em;text-transform:uppercase;text-align:center;transition:border-color var(--transition-fast);outline:none;flex:1;font-family:SF Mono,Fira Code,monospace;font-size:1rem}.friends-tab__add-input::placeholder{letter-spacing:.02em;text-transform:none;color:var(--text-muted);font-family:inherit}.friends-tab__add-input:focus{border-color:var(--accent-primary)}.friends-tab__add-btn{padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);background:var(--accent-primary);color:#fff;transition:opacity var(--transition-fast);font-size:.875rem;font-weight:700}.friends-tab__add-btn:disabled{opacity:.5;cursor:not-allowed}.friends-tab__status{text-align:center;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm,6px);font-size:.8rem;font-weight:600;animation:.2s fadeIn}.friends-tab__status--success{color:var(--accent-correct,#22c55e);background:#22c55e26}.friends-tab__status--error{color:var(--accent-wrong,#ef4444);background:#ef444426}.friends-tab__section{gap:var(--space-xs);flex-direction:column;display:flex}.friends-tab__section-title{align-items:center;gap:var(--space-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:.75rem;font-weight:700;display:flex}.friends-tab__badge{border-radius:var(--radius-full);background:var(--accent-primary);color:#fff;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 6px;font-size:.65rem;font-weight:700;display:inline-flex}.friends-tab__count{color:var(--text-secondary);font-weight:500}.friends-tab__list{gap:var(--space-xs,6px);flex-direction:column;display:flex}.friends-tab__row{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-sm);border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border-subtle);animation:.2s fadeIn;display:flex}.friends-tab__row--request{border-color:color-mix(in srgb, var(--accent-primary) 30%, var(--border-subtle))}.friends-tab__row-avatar{background:var(--bg-secondary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex;overflow:hidden}.friends-tab__row-avatar img{object-fit:cover;width:100%;height:100%}.friends-tab__row-initial{color:var(--text-secondary);font-size:.8rem;font-weight:700}.friends-tab__row-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.friends-tab__row-name{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.875rem;font-weight:600;overflow:hidden}.friends-tab__rank-badge{margin-left:4px;font-size:.75rem}.friends-tab__row-since{color:var(--text-muted);letter-spacing:.02em;font-size:.65rem}.friends-tab__row-status{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;font-weight:600}.friends-tab__row-actions{gap:4px;display:flex}.friends-tab__action-btn{border-radius:var(--radius-full);width:28px;height:28px;transition:background var(--transition-fast), opacity var(--transition-fast);justify-content:center;align-items:center;font-size:.75rem;font-weight:700;display:flex}.friends-tab__action-btn:disabled{opacity:.4}.friends-tab__action-btn--accept{color:var(--accent-correct,#22c55e);background:#22c55e33}@media (hover:hover) and (pointer:fine){.friends-tab__action-btn--accept:hover:not(:disabled){background:#22c55e59}}.friends-tab__action-btn--decline,.friends-tab__action-btn--cancel,.friends-tab__action-btn--remove{color:var(--accent-wrong,#ef4444);background:#ef44441f}@media (hover:hover) and (pointer:fine){.friends-tab__action-btn--decline:hover:not(:disabled),.friends-tab__action-btn--cancel:hover:not(:disabled),.friends-tab__action-btn--remove:hover:not(:disabled){background:#ef444440}}.friends-tab__action-btn--challenge{background:color-mix(in srgb, var(--accent-primary) 15%, transparent);color:var(--accent-primary);font-size:.7rem}@media (hover:hover) and (pointer:fine){.friends-tab__action-btn--challenge:hover:not(:disabled){background:color-mix(in srgb, var(--accent-primary) 30%, transparent)}}.friends-tab__row--challenge{border-color:color-mix(in srgb, var(--accent-primary) 40%, var(--border-subtle));background:color-mix(in srgb, var(--accent-primary) 4%, var(--bg-card))}.friends-tab__row--win{border-color:#22c55e40}.friends-tab__row--loss{border-color:#ef444433}.friends-tab__row--tie{border-color:#fbbf2440}.friends-tab__challenge-scores{align-items:center;gap:4px;font-size:.75rem;font-weight:700;display:flex}.friends-tab__challenge-my-score{color:var(--accent-primary)}.friends-tab__challenge-vs{color:var(--text-muted);font-size:.6rem;font-weight:500}.friends-tab__challenge-their-score{color:var(--text-secondary)}.friends-tab__challenge-result{border-radius:var(--radius-full);flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:.65rem;font-weight:800;display:flex}.friends-tab__challenge-result--win{color:var(--accent-correct,#22c55e);background:#22c55e33}.friends-tab__challenge-result--loss{color:var(--accent-wrong,#ef4444);background:#ef444426}.friends-tab__challenge-result--tie{color:#fbbf24;background:#fbbf2426}.friends-tab__daily-rank{color:var(--text-muted);text-align:center;flex-shrink:0;width:1.5rem;font-size:.75rem;font-weight:700}.friends-tab__daily-score{color:var(--accent-primary);flex-shrink:0;font-size:.875rem;font-weight:700}.friends-tab__empty{align-items:center;gap:var(--space-xs);padding:var(--space-lg) var(--space-md);text-align:center;flex-direction:column;display:flex}.friends-tab__empty-icon{opacity:.6;font-size:2rem}.friends-tab__empty-text{color:var(--text-muted);font-size:.8rem;line-height:1.5}.game-screen{gap:var(--space-md);width:100%;max-width:560px;min-height:100vh;padding:calc(var(--space-md) + env(safe-area-inset-top)) calc(var(--space-md) + env(safe-area-inset-right)) calc(var(--space-md) + env(safe-area-inset-bottom)) calc(var(--space-md) + env(safe-area-inset-left));flex-direction:column;margin:0 auto;display:flex}@media (min-width:900px){.game-screen{max-width:720px;padding:var(--space-xl) var(--space-lg);gap:var(--space-lg)}.game-screen__question{font-size:1.5rem}.game-screen__options{gap:var(--space-md)}.audio-player__ring-wrap{width:110px;height:110px}.audio-player__inner{padding:var(--space-lg) var(--space-xl);gap:var(--space-lg)}.audio-player__waveform{height:40px}.audio-player__hint{font-size:.85rem}}.game-screen--loading{justify-content:center;align-items:center}.game-screen__loader{align-items:center;gap:var(--space-md);color:var(--text-secondary);flex-direction:column;font-size:.9rem;animation:.25s fadeIn;display:flex}.game-screen__loader-spinner{border:3px solid var(--border-subtle);border-top-color:var(--accent-primary);border-radius:50%;width:40px;height:40px;animation:.7s linear infinite spin}.game-screen__load-error{color:var(--accent-wrong);text-align:center;max-width:300px;font-weight:600}.game-screen__load-error-actions{align-items:center;gap:var(--space-sm);margin-top:var(--space-sm);flex-direction:column;display:flex}.game-screen__retry-btn{padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);background:var(--accent-primary);color:#fff;cursor:pointer;transition:opacity var(--transition-fast);border:none;font-size:.9rem;font-weight:700}.game-screen__home-btn--error{color:var(--text-muted);font-size:.85rem}.game-screen__topbar{padding:var(--space-sm) 0;justify-content:space-between;align-items:center;display:flex}.game-screen__topbar-right{align-items:center;gap:8px;display:flex}.game-screen__mute-btn{cursor:pointer;opacity:.6;transition:opacity var(--transition-fast), transform var(--transition-fast);background:0 0;border:none;padding:4px;font-size:1rem;line-height:1}@media (hover:hover) and (pointer:fine){.game-screen__mute-btn:hover{opacity:1;transform:scale(1.1)}}.game-screen__progress{color:var(--text-secondary);letter-spacing:.04em;font-size:.9rem;font-weight:700}.game-screen__round-indicator{text-align:center;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);opacity:.7;margin:-4px 0;font-size:.7rem;font-weight:700}.game-screen__streak{padding:var(--space-xs) 0}.game-screen__life-banner{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);border:1px solid var(--accent-life);color:var(--accent-life);text-align:center;background:#ff4d6d26;justify-content:center;align-items:center;font-size:.875rem;font-weight:700;animation:.3s fadeIn,.4s correctPop;display:flex}.game-screen__timer{padding-right:36px}.game-screen__prompt{gap:var(--space-xs);flex-direction:column;display:flex}.game-screen__mode-badge{letter-spacing:.08em;text-transform:uppercase;color:var(--genre-color,var(--accent-primary));border-radius:var(--radius-full);opacity:.85;border:1px solid;align-self:flex-start;align-items:center;gap:4px;padding:2px 10px;font-size:.7rem;font-weight:700;display:inline-flex}.game-screen__question{color:var(--text-primary);letter-spacing:-.01em;font-size:1.25rem;font-weight:800;line-height:1.3}.game-screen__options{gap:var(--space-sm);grid-template-columns:1fr 1fr;display:grid}.game-screen__round-content{gap:var(--space-md);flex-direction:column;animation:.35s both roundSlideIn;display:flex}@keyframes roundSlideIn{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.game-screen__timeout-msg{text-align:center;color:var(--text-secondary);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);background:#ef444414;border:1px solid #ef444433;font-size:.875rem;animation:.25s fadeIn}.game-screen__timeout-msg strong{color:var(--text-primary)}.game-screen__home-btn{color:var(--text-muted);padding:var(--space-xs) 0;transition:color var(--transition-fast);align-self:flex-start;font-size:.8rem;font-weight:600}@media (hover:hover) and (pointer:fine){.game-screen__home-btn:hover{color:var(--text-secondary)}}@media (max-width:480px){.game-screen{padding:var(--space-sm);gap:var(--space-sm)}.game-screen__question{font-size:1.05rem}.game-screen__timer{padding-right:28px}.game-screen__options{gap:var(--space-sm);grid-template-columns:1fr}}.audio-player{border-radius:var(--radius-xl);background:var(--bg-secondary);border:1px solid var(--border-subtle);position:relative;overflow:hidden}.audio-player__orb{pointer-events:none;opacity:.45;justify-content:center;align-items:center;transition:opacity .6s;display:flex;position:absolute;top:-40%;bottom:-40%;left:-40%;right:-40%}.audio-player--playing .audio-player__orb{opacity:.7}.audio-player__orb-inner{background:radial-gradient(circle at 40% 45%, var(--genre-color,var(--accent-primary)), transparent 60%), radial-gradient(circle at 65% 60%, var(--accent-glow,#a855f7), transparent 55%);filter:blur(40px);border-radius:50%;width:110%;height:200%;animation:4s ease-in-out infinite orbBreathe}.audio-player--playing .audio-player__orb-inner{animation:2.5s ease-in-out infinite orbPulse}.audio-player--answered .audio-player__orb{opacity:.3}@keyframes orbBreathe{0%,to{transform:scale(1)rotate(0)}50%{transform:scale(1.08)rotate(3deg)}}@keyframes orbPulse{0%,to{opacity:1;transform:scale(1)rotate(0)}30%{opacity:.85;transform:scale(1.12)rotate(2deg)}60%{opacity:1;transform:scale(.96)rotate(-2deg)}}.audio-player__inner{z-index:1;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);display:flex;position:relative}.audio-player__ring-wrap{flex-shrink:0;width:90px;height:90px;position:relative}.audio-player__ring{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.audio-player__ring-progress{transition:stroke-dashoffset 1s linear,stroke .4s}.audio-player__art{background:var(--bg-card);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:8px;bottom:8px;left:8px;right:8px;overflow:hidden;-webkit-mask-image:radial-gradient(circle,#fff 100% 100%);mask-image:radial-gradient(circle,#fff 100% 100%)}.audio-player__art img{object-fit:cover;border-radius:50%;width:100%;height:100%;transition:filter .3s,transform .3s}.audio-player__art--hidden img{filter:blur(14px)brightness(.6);transform:scale(1.15)}.audio-player__art--hidden .audio-player__art-placeholder{filter:blur(4px)}.audio-player__art-placeholder{color:var(--text-muted);font-size:1.8rem}.audio-player__btn{color:#fff;cursor:pointer;opacity:0;transition:opacity var(--transition-fast), background var(--transition-fast);z-index:2;background:#0000004d;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1.3rem;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}@media (hover:hover) and (pointer:fine){.audio-player__btn:hover:not(:disabled){opacity:1;background:#00000073}}.audio-player__btn:disabled{opacity:1;cursor:not-allowed;background:#00000059}.audio-player__btn--loading{opacity:1;background:#0006;animation:1.5s ease-in-out infinite skeletonPulse}@keyframes skeletonPulse{0%,to{background:#0006}50%{background:#00000040}}.audio-player__spinner{border:2.5px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:.7s linear infinite spin;display:block}.audio-player__play-icon{text-shadow:0 1px 4px #0006;line-height:1}.audio-player__meta{flex-direction:column;flex:1;align-items:flex-start;gap:6px;min-width:0;display:flex}.audio-player__waveform{align-items:center;gap:3px;height:32px;display:flex}.wave-bar{border-radius:var(--radius-full);background:var(--genre-color,var(--accent-primary));opacity:.7;width:4px;height:8px;transition:height .15s;display:block}.audio-player__waveform--playing .wave-bar--1{animation:.9s ease-in-out infinite waveBar1}.audio-player__waveform--playing .wave-bar--2{animation:.7s ease-in-out .1s infinite waveBar2}.audio-player__waveform--playing .wave-bar--3{animation:1.1s ease-in-out 50ms infinite waveBar3}.audio-player__waveform--playing .wave-bar--4{animation:.8s ease-in-out .15s infinite waveBar4}.audio-player__waveform--playing .wave-bar--5{animation:1s ease-in-out .2s infinite waveBar5}.audio-player__hint{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;overflow:hidden}@media (max-width:480px){.audio-player__inner{padding:var(--space-sm) var(--space-md);gap:var(--space-sm)}.audio-player__ring-wrap{width:72px;height:72px}.audio-player__art{top:6px;bottom:6px;left:6px;right:6px}.audio-player__btn{font-size:1.1rem}.audio-player__waveform{height:28px}}.option-btn{justify-content:center;align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);border:1.5px solid var(--border-subtle);background:var(--bg-card);color:var(--text-primary);text-align:center;cursor:pointer;transition:background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);font-size:.95rem;font-weight:600;animation:.2s both fadeIn;display:flex;position:relative}@media (hover:hover) and (pointer:fine){.option-btn:hover:not(:disabled):not(.option-btn--correct):not(.option-btn--wrong):not(.option-btn--disabled){background:var(--bg-card-hover);border-color:var(--accent-primary);box-shadow:0 0 0 2px var(--accent-glow);transform:translateY(-2px)}}.option-btn:active:not(:disabled):not(.option-btn--correct):not(.option-btn--wrong){transition-duration:60ms;transform:scale(.97)}.option-btn--correct{border-color:var(--accent-correct);box-shadow:0 0 16px var(--accent-correct-glow);color:var(--accent-correct);cursor:default;background:#22c55e26;animation:.35s forwards correctPop}.option-btn--wrong{border-color:var(--accent-wrong);box-shadow:0 0 16px var(--accent-wrong-glow);color:var(--accent-wrong);cursor:default;background:#ef444426;animation:.45s forwards wrongShake}.option-btn--disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.option-btn__text{flex:1}.option-btn__icon{flex-shrink:0;font-size:1.1rem;font-weight:800}.option-btn__key-hint{text-align:center;width:20px;height:20px;color:var(--text-secondary);pointer-events:none;background:#ffffff14;border:1px solid #ffffff1f;border-radius:4px;font-size:.65rem;font-weight:700;line-height:20px;display:none;position:absolute;top:6px;left:8px}@media (hover:hover) and (pointer:fine){.option-btn__key-hint{display:block}}@media (max-width:480px){.option-btn{padding:var(--space-md) var(--space-lg);font-size:.95rem}}.timer-bar-wrap{border-radius:var(--radius-full);background:#ffffff14;width:100%;height:10px;position:relative;overflow:hidden}.timer-bar__fill{border-radius:var(--radius-full);height:100%;transition:width 1s linear,background-color .6s}.timer-bar--safe{background:var(--timer-safe)}.timer-bar--mid{background:var(--timer-mid)}.timer-bar--danger{background:var(--timer-danger);box-shadow:0 0 8px #ef444499}.timer-bar--pulse{animation:.5s ease-in-out infinite timerPulse}.timer-bar--critical{animation:.25s ease-in-out infinite timerPulse;box-shadow:0 0 14px #ef4444cc}.timer-bar__label{color:var(--text-secondary);text-align:left;min-width:24px;font-size:.75rem;font-weight:700;position:absolute;top:50%;right:0;transform:translateY(-50%)translate(calc(100% + 8px))}.lives-display{align-items:center;gap:var(--space-xs);display:flex}.lives-display__heart{transition:color var(--transition-base);font-size:1.4rem;line-height:1;display:inline-block}.lives-display__heart--filled{color:var(--accent-life);filter:drop-shadow(0 0 4px #ff4d6d99)}.lives-display__heart--empty{color:var(--text-muted);opacity:.4}.lives-display__heart--lose{animation:.6s forwards lifeLose}.lives-display__heart--gain{animation:.5s forwards lifePop}.lives-display--critical .lives-display__heart--filled{animation:1.2s ease-in-out infinite criticalPulse}@keyframes criticalPulse{0%,to{filter:drop-shadow(0 0 4px #ff4d6d99);transform:scale(1)}50%{filter:drop-shadow(0 0 10px #ff4d6de6);transform:scale(1.15)}}.streak-bar{align-items:center;gap:var(--space-sm);display:flex}.streak-bar__label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;font-size:.75rem;font-weight:700}.streak-bar__milestone{color:var(--accent-warning);margin-left:2px}.streak-bar__segments{flex:1;gap:4px;display:flex}.streak-bar__seg{border-radius:var(--radius-full);height:8px;transition:background var(--transition-fast), box-shadow var(--transition-fast);background:#ffffff1a;flex:1}.streak-bar__seg--active{background:var(--accent-primary);box-shadow:0 0 6px var(--accent-glow);animation:.3s streakLight}.streak-bar__seg--burst{animation:.5s streakBurst}.streak-bar__count{color:var(--accent-primary);text-align:right;min-width:20px;font-size:.8rem;font-weight:800}.score-display{flex-direction:column;align-items:flex-end;display:flex;position:relative}.score-display__label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-size:.7rem;font-weight:700}.score-display__value{color:var(--text-primary);letter-spacing:-.01em;transition:transform var(--transition-fast);font-size:1.4rem;font-weight:800;line-height:1.1}.score-display__value--pulse{animation:.3s scorePulse}.score-display__floats{pointer-events:none;position:absolute;top:-8px;right:0}.score-display__float{color:var(--accent-correct);white-space:nowrap;font-size:.85rem;font-weight:800;animation:.9s forwards scoreFloat;display:block}.streak-combo{z-index:1000;pointer-events:none;flex-direction:column;align-items:center;gap:2px;animation:.4s forwards comboIn,.4s 1.2s forwards comboOut;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.streak-combo__emoji{font-size:2.8rem;animation:.5s comboBounce}.streak-combo__label{letter-spacing:.15em;text-transform:uppercase;text-shadow:0 0 20px,0 0 40px;font-size:1.6rem;font-weight:900}.streak-combo__count{opacity:.8;color:var(--text-secondary);font-size:.9rem;font-weight:600}.streak-combo--nice .streak-combo__label{color:#60a5fa}.streak-combo--great .streak-combo__label{color:#34d399}.streak-combo--amazing .streak-combo__label{color:#a78bfa}.streak-combo--electric .streak-combo__label{color:#facc15}.streak-combo--fire .streak-combo__label{color:#f97316}.streak-combo--diamond .streak-combo__label{color:#22d3ee}.streak-combo--legendary .streak-combo__label{background:linear-gradient(90deg,#facc15,#f97316,#ef4444,#a855f7,#3b82f6,#facc15) 0 0/200% 100%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;animation:.5s comboBounce,2s linear infinite comboRainbow}.streak-combo__particles{width:0;height:0;position:absolute;top:50%;left:50%}.streak-combo__particle{opacity:0;width:6px;height:6px;animation:.8s forwards particleBurst;animation-delay:calc(var(--i) * 50ms);background:currentColor;border-radius:50%;position:absolute}.streak-combo--nice .streak-combo__particle{background:#60a5fa}.streak-combo--great .streak-combo__particle{background:#34d399}.streak-combo--amazing .streak-combo__particle{background:#a78bfa}.streak-combo--electric .streak-combo__particle{background:#facc15}.streak-combo--fire .streak-combo__particle{background:#f97316}.streak-combo--diamond .streak-combo__particle{background:#22d3ee}.streak-combo--legendary .streak-combo__particle{background:#facc15}@keyframes comboIn{0%{opacity:0;transform:translate(-50%,-50%)scale(.4)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes comboOut{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(1.2)translateY(-20px)}}@keyframes comboBounce{0%{transform:scale(.2)}50%{transform:scale(1.3)}70%{transform:scale(.9)}to{transform:scale(1)}}@keyframes comboRainbow{0%{background-position:0%}to{background-position:200%}}@keyframes particleBurst{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(var(--tx), var(--ty)) scale(0)}}.gameover-screen{min-height:100vh;padding:calc(var(--space-lg) + env(safe-area-inset-top)) calc(var(--space-lg) + env(safe-area-inset-right)) calc(var(--space-lg) + env(safe-area-inset-bottom)) calc(var(--space-lg) + env(safe-area-inset-left));box-sizing:border-box;justify-content:center;align-items:flex-start;display:flex}.gameover-screen__card{align-items:center;gap:var(--space-lg);width:100%;max-width:400px;padding:var(--space-xl) 48px;border-radius:var(--radius-xl);background:var(--bg-secondary);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);flex-direction:column;display:flex}.gameover-screen__emoji{font-size:3.5rem;line-height:1;animation:1s .5s both scorePulse}.gameover-screen__title{letter-spacing:-.02em;color:var(--text-primary);margin:0;font-size:2rem;font-weight:900}.gameover-screen__genre{letter-spacing:.03em;font-size:.9rem;font-weight:700}.gameover-screen__mode-tag{opacity:.7;font-size:.8rem;font-weight:600}.gameover-screen__daily-subtitle{color:var(--text-muted);text-align:center;letter-spacing:.03em;font-size:.8rem}.gameover-screen__released-badge{color:var(--accent-primary);letter-spacing:.02em;margin-top:6px;font-size:.78rem;font-weight:600;display:inline-block}.gameover-screen__artist-name{color:var(--text-primary);letter-spacing:.01em;font-size:1rem;font-weight:700}.gameover-screen__win-subtitle{color:var(--text-secondary);text-align:center;font-size:.875rem}.gameover-screen__score-wrap{flex-direction:column;align-items:center;gap:2px;display:flex}.gameover-screen__score-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-size:.7rem;font-weight:700}.gameover-screen__score{letter-spacing:-.03em;background:linear-gradient(135deg, var(--accent-primary), var(--accent-glow));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:3.5rem;font-weight:900;line-height:1.1;animation:.8s 1s both scorePulse}.gameover-screen__new-best{border-radius:var(--radius-full);color:#fff;background:linear-gradient(135deg, var(--accent-primary), var(--accent-glow,var(--accent-primary)));box-shadow:0 2px 12px color-mix(in srgb, var(--accent-primary) 40%, transparent);letter-spacing:.03em;align-items:center;gap:4px;padding:4px 14px;font-size:.75rem;font-weight:700;animation:.5s 1.4s both newBestPop;display:inline-flex}@keyframes newBestPop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.gameover-screen__rank-up{margin-top:var(--space-sm);flex-direction:column;align-items:center;gap:2px;animation:.6s 1.6s both rankUpPop;display:flex}.gameover-screen__rank-up-emoji{filter:drop-shadow(0 0 12px var(--accent-glow,var(--accent-primary)));font-size:2.2rem;line-height:1}.gameover-screen__rank-up-label{text-transform:uppercase;letter-spacing:.15em;color:var(--accent-primary);font-size:.65rem;font-weight:800}.gameover-screen__rank-up-name{color:var(--text-primary);font-size:1rem;font-weight:800}@keyframes rankUpPop{0%{opacity:0;transform:scale(.4)translateY(10px)}50%{opacity:1;transform:scale(1.15)translateY(-2px)}to{opacity:1;transform:scale(1)translateY(0)}}.gameover-screen__stats{align-items:center;gap:var(--space-lg);justify-content:center;width:100%;display:flex}.gameover-screen__stat{flex-direction:column;align-items:center;gap:2px;display:flex}.gameover-screen__stat-value{color:var(--text-primary);font-size:1.4rem;font-weight:800}.gameover-screen__stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;font-weight:600}.gameover-screen__stat-divider{background:var(--border-subtle);width:1px;height:36px}.gameover-screen__tab-bar{background:#ffffff0d;border-radius:10px;gap:4px;width:100%;max-width:420px;margin:0 auto;padding:3px;display:flex}.gameover-screen__tab{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;padding:8px 12px;font-size:.82rem;font-weight:600;transition:background .2s,color .2s}@media (hover:hover) and (pointer:fine){.gameover-screen__tab:hover{color:var(--text-primary)}}.gameover-screen__tab--active{background:color-mix(in srgb, var(--accent-primary) 20%, transparent);color:var(--text-primary)}.gameover-screen__recap{width:100%;max-width:420px;margin:0 auto}.gameover-screen__recap-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0 0 var(--space-sm);font-size:.75rem;font-weight:700}.gameover-screen__recap-list{scrollbar-width:none;-ms-overflow-style:none;flex-direction:column;gap:4px;max-height:300px;margin:0;padding:0;list-style:none;display:flex;overflow:hidden auto}.gameover-screen__recap-list::-webkit-scrollbar{display:none}.gameover-screen__recap-row{border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border-subtle);flex-direction:column;gap:4px;padding:8px 10px;display:flex}.gameover-screen__recap-main{align-items:center;gap:8px;display:flex}.gameover-screen__recap-num{color:var(--text-muted);text-align:center;flex-shrink:0;min-width:16px;font-size:.7rem;font-weight:700}.gameover-screen__recap-row--correct{border-left:3px solid #22c55e}.gameover-screen__recap-row--wrong{border-left:3px solid #ef4444}.gameover-screen__recap-row--timeout{border-left:3px solid #f59e0b}.gameover-screen__recap-art{object-fit:cover;border-radius:4px;flex-shrink:0;width:34px;height:34px}.gameover-screen__recap-info{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.gameover-screen__recap-song{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;font-weight:700;overflow:hidden}.gameover-screen__recap-artist{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.7rem;overflow:hidden}.gameover-screen__recap-details{flex-direction:column;gap:2px;padding-left:66px;display:flex}.gameover-screen__recap-detail{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.65rem;overflow:hidden}.gameover-screen__recap-result{flex-direction:column;flex-shrink:0;align-items:center;gap:2px;min-width:30px;display:flex}.gameover-screen__recap-icon{font-size:1rem;font-weight:900;line-height:1}.gameover-screen__recap-row--correct .gameover-screen__recap-icon{color:#22c55e}.gameover-screen__recap-row--wrong .gameover-screen__recap-icon{color:#ef4444}.gameover-screen__recap-row--timeout .gameover-screen__recap-icon{color:#f59e0b}.gameover-screen__recap-points{color:#22c55e;font-size:.65rem;font-weight:700}.gameover-screen__recap-chevron{color:var(--text-muted);flex-shrink:0;margin-left:2px;font-size:1rem;font-weight:700;transition:transform .2s}.gameover-screen__recap-chevron--open{transform:rotate(90deg)}.gameover-screen__recap-main{cursor:pointer;-webkit-user-select:none;user-select:none}@media (hover:hover) and (pointer:fine){.gameover-screen__recap-main:hover{opacity:.85}}.gameover-screen__recap-expand{align-items:center;gap:var(--space-sm);padding:6px 0 2px 66px;animation:.2s both recapExpandIn;display:flex}@keyframes recapExpandIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.gameover-screen__recap-play-btn{border-radius:var(--radius-full);color:#fff;background:linear-gradient(135deg, var(--accent-primary), var(--accent-glow));cursor:pointer;transition:transform var(--transition-fast), box-shadow var(--transition-fast), background .3s;white-space:nowrap;border:none;flex-shrink:0;align-items:center;gap:6px;padding:3px 12px 3px 3px;font-size:.7rem;font-weight:700;display:inline-flex}.gameover-screen__recap-play-btn--playing{background:linear-gradient(135deg, var(--accent-glow), var(--accent-primary));box-shadow:0 0 12px color-mix(in srgb, var(--accent-primary) 50%, transparent)}@media (hover:hover) and (pointer:fine){.gameover-screen__recap-play-btn:hover{box-shadow:0 2px 8px color-mix(in srgb, var(--accent-primary) 40%, transparent);transform:scale(1.05)}.gameover-screen__recap-play-btn--playing:hover{box-shadow:0 0 16px color-mix(in srgb, var(--accent-primary) 60%, transparent)}}.gameover-screen__recap-play-btn:active{transform:scale(.97)}.gameover-screen__recap-play-ring{flex-shrink:0;width:26px;height:26px;position:relative}.gameover-screen__recap-play-ring svg{display:block}.gameover-screen__recap-play-icon{letter-spacing:-1px;justify-content:center;align-items:center;font-size:.5rem;line-height:1;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.gameover-screen__recap-play-label{text-align:center;min-width:32px}.gameover-screen__recap-links{flex-wrap:wrap;gap:6px;display:flex}.gameover-screen__recap-link{border-radius:var(--radius-full);color:var(--text-secondary);background:var(--bg-secondary);border:1px solid var(--border-subtle);transition:border-color var(--transition-fast), color var(--transition-fast);white-space:nowrap;padding:4px 10px;font-size:.65rem;font-weight:700;text-decoration:none}@media (hover:hover) and (pointer:fine){.gameover-screen__recap-link:hover{border-color:var(--accent-primary);color:var(--text-primary)}}.gameover-screen__challenge-comparison{justify-content:center;align-items:center;gap:var(--space-md);width:100%;padding:var(--space-md);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);display:flex}.gameover-screen__challenge-side{flex-direction:column;flex:1;align-items:center;gap:2px;display:flex}.gameover-screen__challenge-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;font-weight:600}.gameover-screen__challenge-score{color:var(--text-secondary);font-size:1.3rem;font-weight:800}.gameover-screen__challenge-score--win{color:var(--accent-correct,#22c55e)}.gameover-screen__challenge-badge{border-radius:var(--radius-full);letter-spacing:.05em;padding:4px 10px;font-size:.7rem;font-weight:800}.gameover-screen__challenge-badge--win{color:var(--accent-correct,#22c55e);background:#22c55e33}.gameover-screen__challenge-badge--loss{color:var(--accent-wrong,#ef4444);background:#ef444426}.gameover-screen__challenge-badge--tie{color:#fbbf24;background:#fbbf2426}.gameover-screen__challenge-rank{margin-left:4px;font-size:.75rem}.gameover-screen__challenge-waiting{color:var(--text-muted);text-align:center;padding:var(--space-sm) var(--space-md);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);width:100%;font-size:.85rem;font-weight:600}.gameover-screen__actions{gap:var(--space-sm);width:100%;margin:var(--space-sm) 0;flex-direction:column;display:flex}.gameover-screen__btn{width:100%;padding:var(--space-md);border-radius:var(--radius-md);letter-spacing:.02em;transition:transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);font-size:.95rem;font-weight:700}@media (hover:hover) and (pointer:fine){.gameover-screen__btn:hover{transform:translateY(-2px)}}.gameover-screen__btn:active{transform:translateY(0)}.gameover-screen__btn--primary{background:linear-gradient(135deg, var(--accent-primary), var(--accent-glow));color:#fff;box-shadow:0 4px 16px color-mix(in srgb, var(--accent-primary) 40%, transparent)}@media (hover:hover) and (pointer:fine){.gameover-screen__btn--primary:hover{box-shadow:0 8px 24px color-mix(in srgb, var(--accent-primary) 55%, transparent)}}.gameover-screen__btn--share{border:1.5px solid var(--accent-primary);color:var(--accent-primary);background:0 0}@media (hover:hover) and (pointer:fine){.gameover-screen__btn--share:hover{background:color-mix(in srgb, var(--accent-primary) 12%, transparent);color:var(--text-primary)}}.gameover-screen__btn--secondary{background:var(--bg-card);border:1.5px solid var(--border-subtle);color:var(--text-secondary)}@media (hover:hover) and (pointer:fine){.gameover-screen__btn--secondary:hover{background:var(--bg-card-hover);border-color:var(--accent-primary);color:var(--text-primary)}}@media (min-width:768px){.gameover-screen{align-items:center;height:100vh;padding:20px;overflow:hidden}.gameover-screen__card{max-width:640px;padding:var(--space-lg) var(--space-xl);gap:var(--space-sm);box-sizing:border-box;max-height:calc(100vh - 40px)}.gameover-screen__emoji{font-size:2.5rem}.gameover-screen__title{font-size:1.5rem}.gameover-screen__score{font-size:2.5rem}.gameover-screen__score-wrap{gap:0}.gameover-screen__stat-value{font-size:1.1rem}.gameover-screen__stat-divider{height:28px}.gameover-screen__recap{flex-direction:column;flex:1;min-height:0;display:flex}.gameover-screen__recap-list{flex:1;min-height:0;max-height:none}.gameover-screen__btn{padding:var(--space-sm) var(--space-md);flex:1;font-size:.85rem}.gameover-screen__actions{gap:var(--space-md);flex-direction:row}}@media (max-width:480px){.gameover-screen{padding:var(--space-md);align-items:flex-start}.gameover-screen__card{padding:var(--space-lg) var(--space-md);gap:var(--space-md)}.gameover-screen__title{font-size:1.6rem}.gameover-screen__score,.gameover-screen__emoji{font-size:2.8rem}.gameover-screen__stats{gap:var(--space-md)}.gameover-screen__stat-value{font-size:1.2rem}.gameover-screen__recap-list{max-height:220px}}.leaderboard{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);width:100%;padding:var(--space-lg)}.leaderboard__title{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-md);font-size:.75rem;font-weight:700}.leaderboard__tabs{margin-bottom:var(--space-md);background:#ffffff0d;border-radius:8px;gap:4px;padding:3px;display:flex}.leaderboard__tab{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;flex:1;padding:6px 12px;font-size:.78rem;font-weight:600;transition:background .2s,color .2s}@media (hover:hover) and (pointer:fine){.leaderboard__tab:hover{color:var(--text-primary)}}.leaderboard__tab--active{background:color-mix(in srgb, var(--accent-primary) 20%, transparent);color:var(--text-primary)}.leaderboard__list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;animation:.3s fadeIn;display:flex}.leaderboard__row{align-items:center;gap:var(--space-sm);border-radius:var(--radius-sm);padding:6px 8px;font-size:.875rem;display:flex}.leaderboard__row--you{background:color-mix(in srgb, var(--accent-primary) 12%, transparent);border:1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent)}.leaderboard__rank{text-align:center;width:28px;color:var(--text-secondary);flex-shrink:0;font-size:.8rem}.leaderboard__avatar{border-radius:50%;flex-shrink:0;width:28px;height:28px;overflow:hidden}.leaderboard__avatar img{object-fit:cover;width:100%;height:100%}.leaderboard__avatar-placeholder{background:var(--bg-card);width:100%;height:100%;color:var(--text-secondary);justify-content:center;align-items:center;font-size:.75rem;font-weight:700;display:flex}.leaderboard__name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.leaderboard__player-rank{margin-left:4px;font-size:.75rem}.leaderboard__score{color:var(--accent-primary);flex-shrink:0;font-size:.875rem;font-weight:700}.leaderboard__your-rank{color:var(--text-muted);text-align:center;margin:var(--space-sm) 0 0;font-size:.75rem}.leaderboard__empty{color:var(--text-muted);text-align:center;margin:0;font-size:.85rem}.leaderboard__loading{padding:var(--space-xs) 0;justify-content:center;display:flex}.leaderboard__loading-spinner{border:2.5px solid var(--border-subtle);border-top-color:var(--accent-primary);border-radius:50%;width:24px;height:24px;animation:.7s linear infinite spin}.leaderboard__content{transition:opacity .2s}.leaderboard__content--loading{opacity:.5;pointer-events:none}.leaderboard__skeleton{flex-direction:column;gap:8px;display:flex}.leaderboard__skeleton-row{border-radius:var(--radius-sm);background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-secondary) 50%, var(--bg-card) 75%);background-size:200% 100%;height:36px;animation:1.4s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.decade-timeline{width:100%;max-width:420px;margin:0 auto}.decade-timeline__empty{color:var(--text-muted);text-align:center;padding:var(--space-md) 0;font-size:.75rem}.decade-timeline__summary{margin-bottom:var(--space-sm);background:var(--bg-card);border-radius:var(--radius-sm);color:var(--text-secondary);justify-content:space-between;align-items:center;padding:6px 10px;font-size:.7rem;display:flex}.decade-timeline__summary-years{font-weight:600}.decade-timeline__summary-results{align-items:center;gap:4px;font-weight:600;display:flex}.decade-timeline__summary-dot{border-radius:50%;width:8px;height:8px;margin-left:6px;display:inline-block}.decade-timeline__summary-dot:first-child{margin-left:0}.decade-timeline__summary-dot--correct{background:var(--accent-correct)}.decade-timeline__summary-dot--wrong{background:var(--accent-wrong)}.decade-timeline__summary-dot--timeout{background:var(--accent-warning)}.decade-timeline__scroll{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;touch-action:pan-x;overflow:auto hidden}.decade-timeline__scroll::-webkit-scrollbar{display:none}.decade-timeline__scroll--fade-right{-webkit-mask-image:linear-gradient(90deg,#000 90%,#0000 100%);mask-image:linear-gradient(90deg,#000 90%,#0000 100%)}.decade-timeline__scroll--fade-left{-webkit-mask-image:linear-gradient(270deg,#000 90%,#0000 100%);mask-image:linear-gradient(270deg,#000 90%,#0000 100%)}.decade-timeline__scroll--fade-both{-webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 10% 90%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0%,#000 10% 90%,#0000 100%)}.decade-timeline__scroll--fade-none{-webkit-mask-image:none;mask-image:none}.decade-timeline__track{padding:0 24px;position:relative}.decade-timeline__line{background:var(--border-subtle);border-radius:1px;height:2px;position:absolute;left:24px;right:24px}.decade-timeline__years{position:absolute;left:24px;right:24px}.decade-timeline__year-label{color:var(--text-muted);-webkit-user-select:none;user-select:none;font-size:.55rem;font-weight:600;position:absolute;transform:translate(-50%)}.decade-timeline__entries{position:absolute;top:0;bottom:0;left:24px;right:24px}.decade-timeline__entry{cursor:pointer;z-index:1;outline:none;flex-direction:column;align-items:center;animation:.35s both timelineEntryIn;display:flex;position:absolute;transform:translate(-50%)}.decade-timeline__entry--expanded{z-index:10}.decade-timeline__entry--expanded .decade-timeline__art{box-shadow:0 0 0 2px #fff9}.decade-timeline__entry:hover{z-index:5}@keyframes timelineEntryIn{0%{opacity:0;transform:translate(-50%)scale(.8)}to{opacity:1;transform:translate(-50%)scale(1)}}.decade-timeline__connector{opacity:.4;border-radius:1px;width:2px;position:absolute;left:50%;transform:translate(-50%)}.decade-timeline__connector--correct{background:var(--accent-correct)}.decade-timeline__connector--wrong{background:var(--accent-wrong)}.decade-timeline__connector--timeout{background:var(--accent-warning)}.decade-timeline__dot{background:var(--text-muted);z-index:2;border-radius:50%;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 0 3px #0000004d}.decade-timeline__dot--correct{background:var(--accent-correct)}.decade-timeline__dot--wrong{background:var(--accent-wrong)}.decade-timeline__dot--timeout{background:var(--accent-warning)}.decade-timeline__art{object-fit:cover;border:2px solid #0000;border-radius:4px;flex-shrink:0;transition:transform .18s;box-shadow:0 1px 6px #00000059}.decade-timeline__entry:hover .decade-timeline__art,.decade-timeline__entry--expanded .decade-timeline__art{transform:scale(1.12)}.decade-timeline__entry--correct .decade-timeline__art{border-color:var(--accent-correct)}.decade-timeline__entry--wrong .decade-timeline__art{border-color:var(--accent-wrong);opacity:.75}.decade-timeline__entry--timeout .decade-timeline__art{border-color:var(--accent-warning);opacity:.75}.decade-timeline--dots .decade-timeline__connector{opacity:.25}.decade-timeline__tooltip{background:var(--bg-secondary);border:1px solid var(--border-subtle);margin-top:var(--space-sm);text-align:center;border-radius:10px;padding:10px 14px;animation:.2s tooltipIn;box-shadow:0 4px 16px #0006}@keyframes tooltipIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.decade-timeline__tooltip-title{color:var(--text-primary);word-break:break-word;font-size:.75rem;font-weight:700}.decade-timeline__tooltip-artist{color:var(--text-secondary);margin-top:1px;font-size:.65rem}.decade-timeline__tooltip-year{color:var(--text-muted);margin-top:4px;font-size:.6rem;font-weight:600}.decade-timeline__tooltip-result{text-align:center;border-radius:6px;margin-top:4px;padding:3px 8px;font-size:.65rem;font-weight:700}.decade-timeline__tooltip-result--correct{color:var(--accent-correct);background:#22c55e26}.decade-timeline__tooltip-result--wrong{color:var(--accent-wrong);background:#ef444426}.decade-timeline__tooltip-result--timeout{color:var(--accent-warning);background:#f59e0b26}@media (max-width:480px){.decade-timeline__tooltip{padding:8px 10px}}.confetti{pointer-events:none;z-index:999;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.confetti__piece{opacity:0;animation:confettiFall var(--duration) ease-out var(--delay) forwards;position:absolute;top:-10px}.confetti__piece--rect{width:var(--size);height:calc(var(--size) * .6);background:var(--color);border-radius:1px}.confetti__piece--circle{width:var(--size);height:var(--size);background:var(--color);border-radius:50%}@keyframes confettiFall{0%{opacity:1;transform:translateY(0)translate(0)rotate(0)scale(1)}80%{opacity:1}to{opacity:0;transform:translateY(calc(100vh + 20px)) translateX(var(--drift)) rotate(calc(360deg + var(--drift) * 3)) scale(.4)}}.profile-screen{min-height:100vh;padding:calc(var(--space-lg) + env(safe-area-inset-top)) calc(var(--space-md) + env(safe-area-inset-right)) calc(var(--space-lg) + env(safe-area-inset-bottom)) calc(var(--space-md) + env(safe-area-inset-left));flex-direction:column;align-items:center;max-width:600px;margin:0 auto;display:flex}.profile-screen__back{color:var(--text-secondary);cursor:pointer;padding:var(--space-sm) 0;margin-bottom:var(--space-md);background:0 0;border:none;align-self:flex-start;font-size:1rem;font-weight:600;transition:color .2s}@media (hover:hover) and (pointer:fine){.profile-screen__back:hover{color:var(--text-primary)}}.profile-screen__header{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-xl);flex-direction:column;display:flex}.profile-screen__avatar-wrap{border:3px solid var(--border-active,#a855f780);background:var(--bg-card);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;display:flex;overflow:hidden}.profile-screen__avatar{object-fit:cover;width:100%;height:100%}.profile-screen__avatar-initials{color:var(--text-primary);font-size:1.6rem;font-weight:700}.profile-screen__name{color:var(--text-primary);font-size:1.5rem;font-weight:800}.profile-screen__subtitle{color:var(--text-secondary);font-size:.9rem}.profile-screen__rank-card{background:var(--bg-card);border:1px solid var(--border-subtle);width:100%;padding:var(--space-md) var(--space-lg);margin-bottom:var(--space-xl);border-radius:16px}.profile-screen__rank-top{align-items:center;gap:var(--space-md);display:flex}.profile-screen__rank-emoji{font-size:2rem;line-height:1}.profile-screen__rank-info{flex-direction:column;gap:2px;display:flex}.profile-screen__rank-name{color:var(--text-primary);font-size:1.15rem;font-weight:800}.profile-screen__rank-points{color:var(--text-secondary);font-size:.85rem;font-weight:600}.profile-screen__rank-progress{margin-top:var(--space-sm)}.profile-screen__rank-bar{background:var(--bg-secondary,#ffffff14);border-radius:4px;width:100%;height:8px;overflow:hidden}.profile-screen__rank-bar-fill{background:var(--accent-primary,#a855f7);border-radius:4px;min-width:2px;height:100%;transition:width .6s}.profile-screen__rank-next{color:var(--text-secondary);margin-top:6px;font-size:.75rem;font-weight:500;display:block}.profile-screen__rank-max{margin-top:var(--space-sm);color:var(--accent-primary,#a855f7);font-size:.85rem;font-weight:700;display:block}.profile-screen__rank-badge{border-radius:var(--radius-full);background:color-mix(in srgb, var(--accent-primary) 15%, transparent);color:var(--accent-primary);white-space:nowrap;padding:4px 10px;font-size:.7rem;font-weight:700}.profile-screen__section{width:100%;margin-bottom:var(--space-xl)}.profile-screen__section-title{color:var(--text-primary);margin-bottom:var(--space-md);align-items:center;gap:var(--space-sm);font-size:1.15rem;font-weight:700;display:flex}.profile-screen__section-count{color:var(--text-secondary);background:var(--bg-card);border-radius:12px;padding:2px 10px;font-size:.8rem;font-weight:600}.profile-screen__subsection-title{color:var(--text-secondary);margin-top:var(--space-lg);margin-bottom:var(--space-sm);font-size:.95rem;font-weight:700}.profile-screen__achievements{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;display:grid}.profile-screen__achievement{text-align:center;border-radius:var(--radius-md,12px);background:var(--bg-card);opacity:.4;filter:grayscale();border:1px solid #ffffff0f;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;transition:opacity .3s,filter .3s;display:flex}.profile-screen__achievement--unlocked{opacity:1;filter:none;border-color:var(--border-active);background:color-mix(in srgb, var(--accent-primary) 8%, transparent)}.profile-screen__achievement-emoji{font-size:1.8rem;line-height:1}.profile-screen__achievement-name{color:var(--text-primary);font-size:.8rem;font-weight:700}.profile-screen__achievement-desc{color:var(--text-secondary);font-size:.7rem;line-height:1.3}.profile-screen__achievement-progress{background:#ffffff1a;border-radius:2px;width:100%;height:4px;margin-top:4px;position:relative;overflow:hidden}.profile-screen__achievement-bar{background:var(--accent-primary);border-radius:2px;height:100%;transition:width .5s}.profile-screen__achievement-count{color:var(--text-secondary);font-size:.6rem;position:absolute;top:6px;right:0}.profile-screen__stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.profile-screen__stat-card{border-radius:var(--radius-md,12px);background:var(--bg-card);border:1px solid #ffffff0f;flex-direction:column;align-items:center;padding:16px 10px;display:flex}.profile-screen__stat-value{color:var(--text-primary);background:var(--accent-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.4rem;font-weight:800}.profile-screen__stat-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;font-size:.75rem;font-weight:600}.profile-screen__breakdown{flex-direction:column;gap:6px;display:flex}.profile-screen__breakdown-row{border-radius:var(--radius-sm,8px);background:var(--bg-card);border:1px solid #ffffff0a;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.profile-screen__breakdown-label{color:var(--text-primary);font-size:.85rem;font-weight:600}.profile-screen__breakdown-value{color:var(--accent-primary);font-size:.9rem;font-weight:700}.profile-screen__favourites{justify-content:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.profile-screen__fav-pill{background:color-mix(in srgb, var(--accent-primary) 15%, transparent);border:1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);color:var(--text-primary);border-radius:20px;padding:6px 14px;font-size:.8rem}.profile-screen__loading{color:var(--text-secondary);padding:var(--space-lg);font-size:.9rem}.profile-screen__stat-card--skeleton{pointer-events:none}.profile-screen__skeleton-value{background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-secondary) 50%, var(--bg-card) 75%);background-size:200% 100%;border-radius:6px;width:48px;height:20px;animation:1.4s infinite profileShimmer;display:block}.profile-screen__skeleton-label{background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-secondary) 50%, var(--bg-card) 75%);background-size:200% 100%;border-radius:4px;width:72px;height:10px;margin-top:8px;animation:1.4s .2s infinite profileShimmer;display:block}@keyframes profileShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.profile-screen__theme-strip{grid-template-columns:repeat(6,1fr);justify-items:center;gap:10px;padding:6px 0;display:grid}.profile-screen__swatch-wrap{position:relative}.profile-screen__swatch{cursor:pointer;background:0 0;border:none;border-radius:50%;width:42px;height:42px;padding:0;transition:transform .2s,opacity .2s;position:relative}@media (hover:hover) and (pointer:fine){.profile-screen__swatch:hover:not(:disabled){transform:scale(1.15)}}.profile-screen__swatch-ring{border:2.5px solid #0000;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;transition:border-color .2s;display:flex}.profile-screen__swatch--active .profile-screen__swatch-ring{border-color:var(--swatch-color)}.profile-screen__swatch-fill{background:var(--swatch-color);border-radius:50%;width:30px;height:30px;transition:box-shadow .2s;display:block;box-shadow:0 0 10px #0000004d}.profile-screen__swatch--active .profile-screen__swatch-fill{box-shadow:0 0 14px color-mix(in srgb, var(--swatch-color) 50%, transparent)}.profile-screen__swatch--locked{opacity:.35;cursor:not-allowed}.profile-screen__swatch--locked .profile-screen__swatch-fill{filter:grayscale(.8)}.profile-screen__swatch-tooltip{background:var(--bg-secondary,#161923);border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);color:var(--text-secondary);white-space:nowrap;z-index:10;pointer-events:none;padding:8px 12px;font-size:.7rem;line-height:1.6;display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);box-shadow:0 4px 16px #00000080}.profile-screen__swatch-tooltip:after{content:"";border:5px solid #0000;border-bottom-color:var(--border-subtle);position:absolute;bottom:100%;left:50%;transform:translate(-50%)}@media (hover:hover) and (pointer:fine){.profile-screen__swatch-wrap:hover .profile-screen__swatch-tooltip{display:block}}.profile-screen__swatch-lock{pointer-events:none;font-size:.6rem;line-height:1;position:absolute;bottom:-2px;right:-2px}.profile-screen__theme-info{border-radius:var(--radius-md,14px);background:var(--bg-card);border:1px solid var(--border-subtle);align-items:center;gap:10px;margin-top:10px;padding:10px 14px;transition:background .2s;display:flex}.profile-screen__theme-info-emoji{font-size:1.5rem;line-height:1}.profile-screen__theme-info-text{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.profile-screen__theme-info-name{color:var(--text-primary);font-size:.88rem;font-weight:700}.profile-screen__theme-info-desc{color:var(--text-secondary);font-size:.72rem}.profile-screen__theme-info-unlock{color:var(--text-muted);margin-top:1px;font-size:.68rem}.profile-screen__theme-info-badge{text-transform:uppercase;letter-spacing:.08em;color:var(--accent-primary);flex-shrink:0;font-size:.6rem;font-weight:700}.profile-screen__settings{background:var(--bg-card);border-radius:var(--radius-md,12px);border:1px solid #ffffff0f;flex-direction:column;gap:2px;display:flex;overflow:hidden}.profile-screen__setting-row{background:var(--bg-card);justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.profile-screen__setting-row+.profile-screen__setting-row{border-top:1px solid #ffffff0a}.profile-screen__setting-info{flex-direction:column;gap:2px;display:flex}.profile-screen__setting-label{color:var(--text-primary);white-space:nowrap;font-size:.9rem;font-weight:600}.profile-screen__setting-desc{color:var(--text-secondary);font-size:.75rem}.profile-screen__toggle{cursor:pointer;background:#ffffff1f;border:none;border-radius:13px;flex-shrink:0;width:44px;height:26px;padding:0;transition:background .25s;position:relative}.profile-screen__toggle--on{background:var(--accent-primary)}.profile-screen__toggle-knob{background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .25s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0000004d}.profile-screen__toggle--on .profile-screen__toggle-knob{transform:translate(18px)}.profile-screen__slider-wrap{flex:1;align-items:center;gap:10px;max-width:220px;display:flex}.profile-screen__slider{-webkit-appearance:none;appearance:none;cursor:pointer;background:#ffffff1f;border-radius:3px;outline:none;flex:1;height:6px}.profile-screen__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--accent-primary);cursor:pointer;width:18px;height:18px;box-shadow:0 2px 6px var(--accent-glow);border:2px solid #fff3;border-radius:50%}.profile-screen__slider::-moz-range-thumb{background:var(--accent-primary);cursor:pointer;width:18px;height:18px;box-shadow:0 2px 6px var(--accent-glow);border:2px solid #fff3;border-radius:50%}.profile-screen__slider-value{color:var(--text-secondary);text-align:right;min-width:36px;font-size:.8rem;font-weight:700}@media (min-width:900px){.profile-screen{max-width:960px;padding:var(--space-xl) var(--space-lg)}.profile-screen__avatar-wrap{width:96px;height:96px}.profile-screen__avatar-initials{font-size:2rem}.profile-screen__name{font-size:1.75rem}.profile-screen__achievements{grid-template-columns:repeat(4,1fr);gap:14px}.profile-screen__achievement{padding:18px 12px}.profile-screen__achievement-emoji{font-size:2rem}.profile-screen__stats-grid{grid-template-columns:repeat(4,1fr);gap:14px}.profile-screen__stat-value{font-size:1.6rem}.profile-screen__breakdown-row{padding:12px 18px}}@media (max-width:480px){.profile-screen__achievements,.profile-screen__stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:370px){.profile-screen{padding:var(--space-md) var(--space-sm)}.profile-screen__header{margin-bottom:var(--space-lg)}.profile-screen__name{font-size:1.25rem}.profile-screen__achievements{grid-template-columns:repeat(2,1fr);gap:6px}.profile-screen__achievement{padding:10px 6px}.profile-screen__achievement-emoji{font-size:1.4rem}.profile-screen__achievement-name{font-size:.7rem}.profile-screen__achievement-desc{font-size:.62rem}.profile-screen__stats-grid{gap:6px}.profile-screen__stat-card{padding:12px 6px}.profile-screen__stat-value{font-size:1.15rem}.profile-screen__stat-label{font-size:.65rem}.profile-screen__breakdown-row{padding:8px 10px}.profile-screen__breakdown-label{font-size:.78rem}.profile-screen__breakdown-value{font-size:.82rem}.profile-screen__fav-pill{padding:5px 10px;font-size:.72rem}.profile-screen__setting-row{flex-wrap:wrap;gap:8px;padding:12px 10px}.profile-screen__setting-label{white-space:normal;font-size:.82rem}.profile-screen__setting-desc{font-size:.68rem}.profile-screen__slider-wrap{width:100%;max-width:none}.profile-screen__slider-value{min-width:32px;font-size:.72rem}.profile-screen__section-title{font-size:1rem}.profile-screen__subsection-title{font-size:.85rem}}@media (max-width:315px){.profile-screen__theme-strip{gap:6px}.profile-screen__swatch,.profile-screen__swatch-ring{width:36px;height:36px}.profile-screen__swatch-fill{width:24px;height:24px}}.profile-screen__friend-code-card{padding:var(--space-md);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);margin-bottom:var(--space-sm);flex-direction:column;align-items:center;gap:4px;display:flex}.profile-screen__friend-code-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-size:.65rem;font-weight:700}.profile-screen__friend-code-row{align-items:center;gap:var(--space-sm);display:flex}.profile-screen__friend-code-value{letter-spacing:.25em;color:var(--accent-primary);-webkit-user-select:all;user-select:all;font-family:SF Mono,Fira Code,monospace;font-size:1.4rem;font-weight:800}.profile-screen__friend-code-copy{border-radius:var(--radius-full);background:color-mix(in srgb, var(--accent-primary) 15%, transparent);color:var(--accent-primary);transition:background var(--transition-fast);padding:3px 10px;font-size:.7rem;font-weight:600}@media (hover:hover) and (pointer:fine){.profile-screen__friend-code-copy:hover{background:color-mix(in srgb, var(--accent-primary) 25%, transparent)}}.profile-screen__friend-add{gap:var(--space-sm);margin-bottom:var(--space-xs);width:100%;max-width:260px;margin-left:auto;margin-right:auto;display:flex}.profile-screen__friend-input{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-primary);letter-spacing:.12em;text-transform:uppercase;text-align:center;transition:border-color var(--transition-fast);outline:none;flex:1;font-family:SF Mono,Fira Code,monospace;font-size:.8rem}.profile-screen__friend-input:focus{border-color:var(--accent-primary)}.profile-screen__friend-input::placeholder{letter-spacing:.02em;text-transform:none;color:var(--text-muted);font-family:inherit}.profile-screen__friend-add-btn{padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);background:var(--accent-primary);color:#fff;transition:opacity var(--transition-fast);font-size:.8rem;font-weight:700}.profile-screen__friend-add-btn:disabled{opacity:.5;cursor:not-allowed}.profile-screen__friend-status{text-align:center;padding:var(--space-xs);border-radius:var(--radius-sm,6px);margin-bottom:var(--space-xs);font-size:.75rem;font-weight:600;animation:.2s fadeIn}.profile-screen__friend-status--success{color:var(--accent-correct,#22c55e);background:#22c55e26}.profile-screen__friend-status--error{color:var(--accent-wrong,#ef4444);background:#ef444426}.profile-screen__friend-section{margin-top:var(--space-sm)}.profile-screen__friend-subtitle{align-items:center;gap:var(--space-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:var(--space-xs);font-size:.7rem;font-weight:700;display:flex}.profile-screen__friend-badge{border-radius:var(--radius-full);background:var(--accent-primary);color:#fff;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 5px;font-size:.6rem;font-weight:700;display:inline-flex}.profile-screen__friend-row{align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border-subtle);margin-bottom:2px;display:flex}.profile-screen__friend-avatar{background:var(--bg-secondary);width:28px;height:28px;color:var(--text-secondary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.7rem;font-weight:700;display:flex;overflow:hidden}.profile-screen__friend-avatar img{object-fit:cover;width:100%;height:100%}.profile-screen__friend-name{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.8rem;font-weight:600;overflow:hidden}.profile-screen__friend-btn{border-radius:var(--radius-full);width:26px;height:26px;transition:background var(--transition-fast), opacity var(--transition-fast);justify-content:center;align-items:center;font-size:.7rem;font-weight:700;display:flex}.profile-screen__friend-btn:disabled{opacity:.4}.profile-screen__friend-btn--accept{color:var(--accent-correct,#22c55e);background:#22c55e33}@media (hover:hover) and (pointer:fine){.profile-screen__friend-btn--accept:hover:not(:disabled){background:#22c55e59}}.profile-screen__friend-btn--decline,.profile-screen__friend-btn--remove{color:var(--accent-wrong,#ef4444);background:#ef44441f}@media (hover:hover) and (pointer:fine){.profile-screen__friend-btn--decline:hover:not(:disabled),.profile-screen__friend-btn--remove:hover:not(:disabled){background:#ef444440}}.profile-screen__danger-zone{width:100%;max-width:480px;margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--border-subtle);text-align:center}.profile-screen__delete-btn{color:var(--accent-wrong,#ef4444);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast), border-color var(--transition-fast);background:0 0;border:1px solid #ef44444d;font-size:.82rem;font-weight:600}.profile-screen__delete-btn:hover:not(:disabled){background:#ef44441a;border-color:#ef444480}.profile-screen__delete-btn:disabled{opacity:.5;cursor:not-allowed}.profile-screen__delete-confirm{text-align:center}.profile-screen__delete-warning{color:var(--accent-wrong,#ef4444);margin:0 0 var(--space-md);font-size:.82rem;line-height:1.5}.profile-screen__delete-actions{gap:var(--space-sm);justify-content:center;display:flex}.profile-screen__delete-btn--confirm{border-color:var(--accent-wrong,#ef4444);background:#ef444426}.profile-screen__delete-btn--cancel{color:var(--text-secondary);border-color:var(--border-subtle)}.profile-screen__delete-btn--cancel:hover:not(:disabled){border-color:var(--text-muted);background:#ffffff0d}.legal-screen{background:var(--bg-primary);min-height:100vh;color:var(--text-primary);padding:var(--space-md) var(--space-lg);max-width:640px;margin:0 auto}.legal-screen__header{align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl);padding-top:var(--space-md);display:flex}.legal-screen__back{color:var(--accent-primary);cursor:pointer;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);transition:background var(--transition-base);white-space:nowrap;background:0 0;border:none;font-size:1rem;font-weight:600}.legal-screen__back:hover{background:#6c63ff1f}.legal-screen__title{margin:0;font-size:1.4rem;font-weight:800}.legal-screen__content{padding-bottom:var(--space-xl)}.legal-screen__section{margin-bottom:var(--space-lg)}.legal-screen__heading{margin:0 0 var(--space-xs);color:var(--text-primary);font-size:1.05rem;font-weight:700}.legal-screen__body{color:var(--text-secondary);margin:0;font-size:.92rem;line-height:1.65}.legal-screen__updated{color:var(--text-muted);margin-top:var(--space-xl);text-align:center;font-size:.8rem}.splash-screen{min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--bg-primary);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.splash-screen:before{content:"";pointer-events:none;background:radial-gradient(circle,#6c63ff33,#0000 70%);border-radius:50%;width:300px;height:300px;animation:3s ease-in-out infinite splashPulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes splashPulse{0%,to{opacity:.6;transform:translate(-50%,-50%)scale(1)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.3)}}.splash-screen__content{z-index:1;flex-direction:column;align-items:center;gap:20px;animation:.6s both splashFadeIn;display:flex}@keyframes splashFadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.splash-screen__icon{justify-content:center;align-items:center;width:80px;height:80px;display:flex;position:relative}.splash-screen__ring{border:3px solid #6c63ff;border-color:#6c63ff #a855f7 #0000 #0000;border-radius:50%;animation:1.2s linear infinite splashSpin;position:absolute;top:0;bottom:0;left:0;right:0}@keyframes splashSpin{to{transform:rotate(360deg)}}.splash-screen__emoji{filter:drop-shadow(0 0 8px #6c63ff66);font-size:2.4rem;line-height:1}.splash-screen__title{letter-spacing:-.03em;color:var(--text-primary);font-size:2.4rem;font-weight:800}.splash-screen__title-ly{background:linear-gradient(135deg,#6c63ff,#a855f7);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.splash-screen__dots{gap:6px;display:flex}.splash-screen__dot{background:var(--accent-primary);opacity:.3;border-radius:50%;width:8px;height:8px;animation:1.4s ease-in-out infinite dotBounce}.splash-screen__dot:nth-child(2){animation-delay:.2s}.splash-screen__dot:nth-child(3){animation-delay:.4s}@keyframes dotBounce{0%,80%,to{opacity:.3;transform:scale(1)}40%{opacity:1;transform:scale(1.3)}}.error-boundary{min-height:100dvh;padding:var(--space-lg);background:var(--bg-primary);color:var(--text-primary);justify-content:center;align-items:center;display:flex}.error-boundary__card{text-align:center;max-width:340px;padding:var(--space-xl) var(--space-lg);background:var(--bg-secondary);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.error-boundary__icon{margin-bottom:var(--space-md);font-size:2.5rem;display:block}.error-boundary__title{margin:0 0 var(--space-sm);font-size:1.25rem;font-weight:700}.error-boundary__message{color:var(--text-secondary);margin:0 0 var(--space-lg);font-size:.9rem;line-height:1.5}.error-boundary__btn{border-radius:var(--radius-full);background:var(--accent-primary);color:#fff;cursor:pointer;transition:opacity var(--transition-fast);border:none;padding:12px 32px;font-size:1rem;font-weight:600;display:inline-block}.error-boundary__btn:hover{opacity:.85}.error-boundary__btn:active{transform:scale(.97)}.install-banner{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--accent-primary);color:#fff;font-size:.88rem;font-weight:600;animation:.3s ease-out install-banner-slide;display:flex}@keyframes install-banner-slide{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.install-banner__text{flex:1}.install-banner__btn{color:#fff;border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-md);cursor:pointer;transition:background var(--transition-base);white-space:nowrap;background:#fff3;border:1px solid #fff6;font-size:.85rem;font-weight:700}.install-banner__btn:hover{background:#ffffff59}.install-banner__close{color:#fffc;cursor:pointer;padding:0 var(--space-xs);background:0 0;border:none;font-size:1.3rem;line-height:1}.install-banner__close:hover{color:#fff}.network-toast{top:max(env(safe-area-inset-top,0px), 12px);z-index:9999;border-radius:var(--radius-full);color:#fff;cursor:pointer;align-items:center;gap:8px;max-width:calc(100vw - 32px);padding:10px 20px;font-size:.88rem;font-weight:600;animation:.3s ease-out toast-in;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #00000080}.network-toast--error{background:var(--accent-wrong,#ef4444)}.network-toast--success{background:var(--accent-correct,#22c55e)}.network-toast--info{background:var(--accent-primary,#6c63ff)}.network-toast__icon{flex-shrink:0;font-size:1rem}.network-toast__msg{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(-16px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.achievement-toast-container{top:calc(20px + env(safe-area-inset-top));z-index:9999;pointer-events:none;flex-direction:column;gap:10px;width:90%;max-width:380px;display:flex;position:fixed;left:50%;transform:translate(-50%)}.achievement-toast{border-radius:var(--radius-lg,12px);background:linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 95%, transparent) 0%, color-mix(in srgb, var(--accent-glow) 95%, transparent) 100%);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 32px #0006, 0 0 20px color-mix(in srgb, var(--accent-primary) 30%, transparent);opacity:0;pointer-events:auto;border:1px solid #fff3;align-items:center;gap:12px;padding:14px 18px;transition:opacity .4s,transform .4s;display:flex;transform:translateY(-20px)scale(.95)}.achievement-toast--visible{opacity:1;transform:translateY(0)scale(1)}.achievement-toast--exiting{opacity:0;transition:opacity .4s ease-out,transform .4s ease-out;transform:translateY(-24px)scale(.95)}.achievement-toast__emoji{filter:drop-shadow(0 2px 4px #0000004d);font-size:2rem;line-height:1;animation:.6s .4s both achievement-bounce}@keyframes achievement-bounce{0%{transform:scale(.5)}50%{transform:scale(1.3)}to{transform:scale(1)}}.achievement-toast__text{flex-direction:column;gap:2px;min-width:0;display:flex}.achievement-toast__title{text-transform:uppercase;letter-spacing:.1em;color:#ffffffb3;font-size:.7rem;font-weight:600}.achievement-toast__name{color:#fff;font-size:1rem;font-weight:700}.achievement-toast__desc{color:#fffc;font-size:.8rem}@media (max-width:480px){.achievement-toast-container{width:94%;top:12px}.achievement-toast{padding:12px 14px}.achievement-toast__emoji{font-size:1.6rem}}.screen-transition{width:100%;min-height:100vh}.screen-transition--exiting{pointer-events:none;animation:.3s forwards screenExit}.screen-transition--entering{animation:.3s both screenEnter}@keyframes screenExit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px)}}@keyframes screenEnter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}