diff --git a/custom_components/beatify/www/css/styles.css b/custom_components/beatify/www/css/styles.css index e25923ee..b940c175 100644 --- a/custom_components/beatify/www/css/styles.css +++ b/custom_components/beatify/www/css/styles.css @@ -10689,6 +10689,9 @@ body.home-mode .home-view { /* Sticky CTA bar at the bottom of the home card */ .home-cta-bar { display: flex; + /* #2365: lets the guard on `.beatify-banner` actually take effect, and on + a narrow phone lets the buttons themselves wrap rather than squeeze. */ + flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); background: rgba(0, 0, 0, 0.3); @@ -16685,6 +16688,14 @@ body.theme-dark .your-result-stats .stat-value { /* --- Inline Panel-Banner (Variant C): docked above the primary action --- */ .beatify-banner { display: flex; + /* #2365: a guard, not a layout. The banner is a block that fills the width + of whatever it sits above; it is never meant to share a line. Should a + future call site anchor it inside a flex row again, this makes it claim + its own line there instead of being shrunk to one character per line. + Outside a flex parent `flex-basis` has no effect, so this costs nothing + in the normal case. Paired with `flex-wrap` on `.home-cta-bar` — a basis + of 100% only wins a line of its own if the row is allowed to wrap. */ + flex-basis: 100%; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-md); diff --git a/custom_components/beatify/www/css/styles.min.css b/custom_components/beatify/www/css/styles.min.css index 54cdde6d..0a66390c 100644 --- a/custom_components/beatify/www/css/styles.min.css +++ b/custom_components/beatify/www/css/styles.min.css @@ -1,2 +1,2 @@ -:root{--color-bg-primary: #0a0a12;--color-bg-surface: rgba(255, 255, 255, .05);--color-bg-light: #f5f5f5;--color-bg-white: #ffffff;--color-bg-card: #f9fafb;--color-bg-card-alt: #f3f4f6;--color-accent-primary: #ff2d6a;--color-accent-secondary: #00f5ff;--color-accent-brand: #6366f1;--color-accent-brand-hover: #4f46e5;--color-accent-blue: #3b82f6;--color-accent-blue-hover: #2563eb;--color-success: #10b981;--color-success-hover: #059669;--color-success-light: #d1fae5;--color-success-alt: #22c55e;--color-success-neon: #39ff14;--color-warning: #f59e0b;--color-warning-dark: #d97706;--color-warning-light: #fef3c7;--color-warning-alt: #ff6600;--color-error: #ef4444;--color-error-dark: #dc2626;--color-error-light: #fee2e2;--color-error-neon: #ff0040;--color-purple-primary: #8b5cf6;--color-purple-secondary: #7c3aed;--color-neon-purple: #9d4edd;--color-success-bg: rgba(16, 185, 129, .15);--color-accent-brand-bg: rgba(99, 102, 241, .15);--color-error-bg: rgba(239, 68, 68, .15);--color-text-primary: #1f2937;--color-text-secondary: #374151;--color-text-muted: #6b7280;--color-text-light: #9ca3af;--color-text-white: #ffffff;--color-text-dark: #1a1a1a;--color-text-heading: #444444;--color-text-neon-muted: #b3b3c2;--color-border-light: #e5e7eb;--color-border-medium: #d1d5db;--color-border-dark: #333333;--color-border-neon: rgba(255, 255, 255, .1);--color-dark-surface: rgba(255, 255, 255, .05);--color-dark-surface-hover: rgba(255, 255, 255, .08);--color-dark-card: rgba(255, 255, 255, .03);--color-surface-dark: #1a1a2e;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--font-display: "Outfit", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-mono: monospace;--font-size-xs: 10px;--font-size-sm: 12px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px;--font-size-4xl: 32px;--font-size-year: 56px;--font-size-timer: 64px;--font-size-hero: 72px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--glow-primary: 0 0 20px var(--color-accent-primary);--glow-secondary: 0 0 20px var(--color-accent-secondary);--glow-success: 0 0 20px var(--color-success-neon);--glow-warning: 0 0 20px var(--color-warning);--glow-error: 0 0 20px var(--color-error);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 2px 8px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .1);--shadow-xl: 0 8px 32px rgba(0, 0, 0, .15);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--z-control-bar: 100;--z-reaction-bar: 101;--z-modal: 1000;--z-overlay: 1100;--z-toast: 1200}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-system);background:var(--color-bg-light);color:var(--color-text-secondary);line-height:1.5;padding:var(--space-sm);min-height:100vh;overscroll-behavior:none}.wordmark{font-family:"Outfit",var(--font-system);font-weight:900;font-size:var(--font-size-hero);letter-spacing:-.02em;line-height:1}.wordmark-beat{color:var(--color-text-white)}body:not(.theme-dark) .wordmark-beat{color:var(--color-text-primary)}.wordmark-gradient{background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.wordmark-hero{text-shadow:0 0 40px rgba(255,45,106,.5)}.logo-loading{animation:logo-pulse 2s ease-in-out infinite}@keyframes logo-pulse{0%,to{opacity:1}50%{opacity:.7}}@media(prefers-reduced-motion:reduce){.logo-loading{animation:none}}.vinyl-starting{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:24px;box-sizing:border-box}.vinyl-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(20px,5vw,56px);max-width:100%}.vinyl-loader{flex:0 0 auto;width:clamp(130px,28vw,260px);height:clamp(130px,28vw,260px);display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at center,rgba(255,45,106,.18) 0%,rgba(99,102,241,.1) 45%,transparent 70%)}.vinyl-disc{position:relative;width:78%;height:78%;border-radius:50%;background:conic-gradient(from 0deg,var(--color-accent-primary),var(--color-accent-brand),var(--color-accent-secondary),var(--color-accent-brand),var(--color-accent-primary));box-shadow:0 0 40px #ff2d6a59,0 0 80px #00f5ff2e,inset 0 0 30px #00000073;animation:vinyl-spin 3s linear infinite}.vinyl-ring{position:absolute;top:18%;left:18%;width:64%;height:64%;border-radius:50%;border:1.5px dashed rgba(255,255,255,.25)}.vinyl-hole{position:absolute;top:50%;left:50%;width:14%;height:14%;border-radius:50%;background:var(--color-bg-primary);transform:translate(-50%,-50%);box-shadow:0 0 0 4px #0006}.vinyl-copy{flex:1 1 280px;min-width:0;width:min(100%,460px);max-width:460px;text-align:left}.vinyl-copy .vinyl-headline,.vinyl-copy .vinyl-sub,.vinyl-copy .wordmark-hero{overflow-wrap:break-word}.vinyl-copy .wordmark-hero{font-size:clamp(2rem,5vw,3.25rem);margin:0 0 .5em}.vinyl-headline{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:800;color:var(--color-text-white);margin:0 0 .4em}.vinyl-sub{font-size:clamp(.95rem,2.2vw,1.2rem);line-height:1.5;color:var(--color-text-muted);margin:0 0 1.2em}.vinyl-dots{display:flex;gap:12px}.vinyl-dots span{width:12px;height:12px;border-radius:50%;background:var(--color-accent-primary);opacity:.3;animation:vinyl-dot-pulse 1.4s ease-in-out infinite}.vinyl-dots span:nth-child(2){animation-delay:.2s}.vinyl-dots span:nth-child(3){animation-delay:.4s}@keyframes vinyl-spin{to{transform:rotate(360deg)}}@keyframes vinyl-dot-pulse{0%,to{opacity:.3;transform:scale(1)}40%{opacity:1;transform:scale(1.25)}}@media(max-width:640px){.vinyl-copy{text-align:center}.vinyl-dots{justify-content:center}}@media(prefers-reduced-motion:reduce){.vinyl-disc{animation:none}.vinyl-dots span{animation:none;opacity:.7}}header{margin-bottom:var(--space-lg)}header h1{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:var(--color-text-dark)}.admin-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md, 16px)}.admin-header h1{margin:0}.player-header{display:flex;align-items:center;justify-content:center;padding:var(--space-md) var(--space-md) 0}.player-header h1{margin:0}body.theme-dark main.admin-content{max-width:800px;margin:0 auto;padding:var(--space-md, 16px)}.analytics-icon-link{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;text-decoration:none;font-size:1.5rem;transition:background-color .2s ease,transform .2s ease}body.theme-dark .analytics-icon-link{background:#00f5ff1a}body.theme-dark .analytics-icon-link:hover,body.theme-dark .analytics-icon-link:focus{background:#00f5ff33;transform:scale(1.1);outline:none}.admin-header-actions{display:flex;align-items:center;gap:var(--space-xs, 8px)}.pwa-install-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:none;background:#00f5ff1a;font-size:1.5rem;cursor:pointer;transition:background-color .2s ease,transform .2s ease;padding:0}.pwa-install-btn:hover,.pwa-install-btn:focus{background:#00f5ff33;transform:scale(1.1);outline:none}.reset-icon-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:none;background:#ff2d6a1a;color:var(--color-text-white);font-size:1.5rem;cursor:pointer;padding:0;transition:background-color .2s ease,transform .2s ease}.reset-icon-btn:hover,.reset-icon-btn:focus{background:#ff2d6a40;transform:scale(1.1);outline:none}.pwa-ios-hint{position:fixed;bottom:0;left:0;right:0;z-index:1000;display:flex;justify-content:center;padding:var(--space-md, 16px);animation:slideUp .3s ease}.pwa-ios-hint.hidden{display:none}.pwa-ios-hint-content{position:relative;background:var(--color-bg-elevated, #2a2a3e);border-radius:var(--radius-lg, 12px);padding:var(--space-md, 16px) var(--space-lg, 24px);color:var(--color-text, #fff);text-align:center;max-width:340px;box-shadow:0 -2px 20px #0000004d}.pwa-ios-hint-close{position:absolute;top:8px;right:12px;background:none;border:none;color:var(--color-text, #fff);font-size:1.4rem;cursor:pointer;opacity:.6}.pwa-ios-hint-close:hover{opacity:1}.pwa-ios-share-icon{font-size:1.2rem}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.status-section,.card-section{background:var(--color-bg-white);border-radius:var(--radius-lg);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-md);box-shadow:var(--shadow-sm);border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.card-section:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.card-section .section-header{display:flex;align-items:center;gap:var(--space-sm, 8px);margin-bottom:var(--space-sm);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text-heading)}.card-section .section-icon{font-size:1.25rem}.status-section h2,.card-section h2:not(.section-header){font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-sm);color:var(--color-text-heading)}.status-connected{color:var(--color-success-alt);font-weight:var(--font-weight-medium)}.status-error{color:var(--color-error);font-weight:var(--font-weight-medium)}.status-warning{color:var(--color-warning);font-weight:var(--font-weight-medium)}.list-item{padding:var(--space-sm);border-bottom:1px solid var(--color-border-light);display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);transition:background-color .2s ease}.list-item:last-child{border-bottom:none}body.theme-dark .list-item{border-bottom-color:var(--surface-border, #333)}body.theme-dark .list-item:hover{background:#9d4edd1a}.list-item .name{font-weight:var(--font-weight-medium);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-item .meta{color:var(--color-text-muted);font-size:var(--font-size-base);flex-shrink:0}.list-item.is-invalid{background:var(--color-error-light);border-left:3px solid var(--color-error)}.playlist-item.is-disabled{opacity:.5;cursor:not-allowed}.playlist-item.is-disabled .checkbox-label,.playlist-item.is-disabled .playlist-checkbox{cursor:not-allowed}.playlist-item.is-selectable{cursor:pointer}.playlist-item.is-selected,.media-player-item.is-selected{background:#eff6ff;border-left:3px solid var(--color-accent-blue)}body.theme-dark .playlist-item.is-selected,body.theme-dark .media-player-item.is-selected{background:#00f5ff1a;border-left:3px solid var(--color-accent-secondary)}.seasonal-suggestion{position:relative;margin-bottom:12px;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,#ff2d6a24,#6366f124),#12121c;border:1px solid rgba(255,45,106,.45);box-shadow:0 0 0 1px #00f5ff14,0 6px 18px #00000059}.seasonal-suggestion__badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent-secondary, #00f5ff);background:#00f5ff1a;border:1px solid rgba(0,245,255,.3);border-radius:999px;padding:3px 10px;margin-bottom:10px}.seasonal-suggestion__title{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px}.seasonal-suggestion__reason{font-size:13px;line-height:1.4;color:#ffffffb8;margin-bottom:12px}.seasonal-suggestion__add{display:inline-block}.seasonal-suggestion__dismiss{position:absolute;top:8px;right:10px;width:28px;height:28px;line-height:1;font-size:20px;color:#fff9;background:transparent;border:none;border-radius:8px;cursor:pointer}.seasonal-suggestion__dismiss:after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}.seasonal-suggestion__dismiss:hover{color:#fff;background:#ffffff14}body:not(.theme-dark) .seasonal-suggestion{background:linear-gradient(135deg,#ff2d6a14,#6366f114),#fff;border:1px solid rgba(255,45,106,.35);box-shadow:0 4px 14px #00000014}body:not(.theme-dark) .seasonal-suggestion__title{color:#111}body:not(.theme-dark) .seasonal-suggestion__reason{color:#555}body:not(.theme-dark) .seasonal-suggestion__dismiss{color:#888}.playlist-checkbox{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.checkbox-label{display:flex;align-items:center;flex:1;min-width:0;cursor:pointer;padding-left:var(--space-xs)}.playlist-name{font-weight:var(--font-weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selection-summary{padding:var(--space-sm) var(--space-md);background:#f0fdf4;border-radius:var(--radius-md);margin-top:var(--space-sm);font-weight:var(--font-weight-medium);color:#166534}.selection-summary #selected-count,.selection-summary #total-songs{font-family:Outfit,sans-serif;font-weight:700}body.theme-dark .selection-summary{background:#00f5ff1a;border:1px solid var(--color-accent-secondary);color:var(--color-text-white)}body.theme-dark .selection-summary #selected-count,body.theme-dark .selection-summary #total-songs{color:var(--color-accent-secondary);font-size:1.1em}.media-player-item.is-selectable{cursor:pointer}.media-player-radio{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.radio-label{display:flex;align-items:center;flex:1;min-width:0;cursor:pointer;padding-left:var(--space-xs)}.player-name{font-weight:var(--font-weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.state-dot{display:inline-block;width:var(--space-sm);height:var(--space-sm);border-radius:50%;margin-right:6px}.state-dot.state-playing{background:var(--color-success-alt)}.state-dot.state-idle,.state-dot.state-paused,.state-dot.state-off{background:var(--color-text-light)}button,.btn{min-width:44px;min-height:44px;padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast),opacity var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);touch-action:manipulation}.form-input{width:100%;padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--color-bg-secondary);color:var(--color-text-primary);margin-bottom:var(--space-sm);box-sizing:border-box}body.theme-dark .form-input{color:#e2e8f0;background:#ffffff1a;border-color:#ffffff26}.btn-primary{background:var(--color-accent-primary);color:#fff}.btn-primary:hover{background:#e0245c}.btn-primary:disabled{background:var(--color-text-light);cursor:not-allowed;opacity:.55}body.theme-dark .btn-primary{color:#fff}.btn-secondary{background:var(--color-border-light);color:var(--color-text-secondary)}.btn-secondary:hover{background:var(--color-border-medium)}.btn-ghost{background:transparent;color:var(--color-accent-primary);border:1.5px solid var(--color-accent-primary)}.btn-ghost:hover{background:#ff2d6a14}.btn-ghost:disabled{opacity:.45;cursor:not-allowed}.btn-outline{background:transparent;color:var(--color-text-secondary);border:1.5px solid var(--color-border-medium)}.btn-outline:hover{background:var(--color-border-light);border-color:var(--color-text-secondary)}.btn-outline:disabled{opacity:.45;cursor:not-allowed}.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}a{color:var(--color-accent-blue);text-decoration:none}a:hover{text-decoration:underline}.empty-state{text-align:center;padding:var(--space-lg);color:var(--color-text-muted)}.empty-state p{margin-bottom:var(--space-sm)}footer{margin-top:var(--space-lg);text-align:center;color:var(--color-text-light);font-size:var(--font-size-sm)}.hidden{display:none!important}body.theme-dark{background:var(--color-bg-primary);color:var(--color-text-white)}body.theme-dark .player-container{background:var(--color-bg-primary)}body.theme-dark .card-section{background:var(--color-surface-dark);border:1px solid var(--color-border-neon);color:var(--color-text-white)}.admin-content .card-section{margin-bottom:var(--space-md)}body.theme-dark .card-section:hover{box-shadow:0 4px 20px #9d4edd4d}body.theme-dark .card-section h2,body.theme-dark .card-section .section-header,body.theme-dark .card-section p,body.theme-dark .card-section .name,body.theme-dark .card-section .player-name,body.theme-dark .card-section .playlist-name,body.theme-dark .card-section .list-item,body.theme-dark .card-section .radio-label,body.theme-dark .card-section .checkbox-label,body.theme-dark .card-section strong,body.theme-dark .card-section span{color:var(--color-text-white)}body.theme-dark .card-section .meta{color:var(--color-text-neon-muted)}body.theme-dark .game-info{background:#ffffff0d;border:1px solid var(--color-neon-purple);border-radius:var(--radius-md);color:var(--color-text-white)}body.theme-dark .game-info p,body.theme-dark .game-info strong,body.theme-dark .game-info span{color:var(--color-text-white)}body.theme-dark .btn-primary span,body.theme-dark .btn-secondary span{color:inherit}body.theme-dark .lang-btn:not(.lang-btn--active),body.theme-dark .timer-btn:not(.timer-btn--active),body.theme-dark .difficulty-btn:not(.difficulty-btn--active){color:var(--color-text-primary, #1a1a2e)}body.theme-dark .lang-btn:not(.lang-btn--active) span,body.theme-dark .timer-btn:not(.timer-btn--active) span,body.theme-dark .difficulty-btn:not(.difficulty-btn--active) span{color:var(--color-text-primary, #1a1a2e)}.language-selector{display:flex;justify-content:center;gap:var(--space-sm)}.lang-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);border:2px solid var(--color-border-medium);border-radius:var(--radius-md);background:var(--color-bg-white);color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:500;cursor:pointer;transition:all .15s ease}.lang-btn:hover{border-color:var(--color-accent-brand);background:var(--color-bg-card-alt)}.lang-btn--active{border-color:var(--color-accent-brand);background:var(--color-accent-brand);color:var(--color-text-white)}.lang-btn--active:hover{background:var(--color-accent-brand-hover)}.lang-flag{font-size:1.25em}.lang-name{font-weight:600}.timer-selector{display:flex;justify-content:center;gap:var(--space-sm)}.timer-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2xs);padding:var(--space-sm) var(--space-md);min-width:90px;border:2px solid var(--color-border-neon);border-radius:var(--radius-md);background:var(--color-bg-card);color:var(--color-text-secondary);font-family:inherit;cursor:pointer;transition:all .15s ease}.timer-btn:hover{border-color:var(--color-accent-brand);background:var(--color-bg-card-alt)}.timer-btn:focus{outline:none;border-color:var(--color-accent-brand);box-shadow:0 0 0 3px #1ed7604d}.timer-btn:focus-visible{outline:2px solid var(--color-accent-brand);outline-offset:2px}.timer-btn:disabled{opacity:.5;cursor:not-allowed;border-color:var(--color-border-neon);background:var(--color-bg-card)}.timer-btn:disabled:hover{border-color:var(--color-border-neon);background:var(--color-bg-card)}.timer-btn--active{border-color:var(--color-accent-brand);background:var(--color-accent-brand);color:var(--color-text-white)}.timer-btn--active:hover{background:var(--color-accent-brand-hover)}.timer-icon{font-size:1.5em}.timer-label{font-weight:600;font-size:.875rem}.timer-value{font-size:.75rem;opacity:.8}.timer-btn--active .timer-value{opacity:1}.difficulty-selector{display:flex;justify-content:center;gap:var(--space-sm)}.difficulty-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2xs);padding:var(--space-sm) var(--space-md);min-width:90px;border:2px solid var(--color-border-light);border-radius:var(--radius-md);background:var(--color-bg-card);color:var(--color-text-secondary);font-family:inherit;cursor:pointer;transition:all .15s ease}.difficulty-btn:hover{border-color:var(--color-accent-brand);background:var(--color-bg-card-alt)}.difficulty-btn:focus{outline:none;border-color:var(--color-accent-brand);box-shadow:0 0 0 3px #6366f14d}.difficulty-btn:focus-visible{outline:2px solid var(--color-accent-brand);outline-offset:2px}.difficulty-btn--active{border-color:var(--color-accent-brand);background:var(--color-accent-brand);color:var(--color-text-white)}.difficulty-btn--active:hover{background:var(--color-accent-brand-hover)}.difficulty-icon{font-size:1.5em}.difficulty-label{font-weight:600;font-size:.875rem}.difficulty-description{text-align:center;font-size:.8125rem;color:var(--color-text-muted);margin-top:var(--space-sm);line-height:1.5;max-width:400px;margin-left:auto;margin-right:auto}.toggle-option{display:flex;align-items:center;gap:var(--space-md);cursor:pointer;padding:var(--space-sm) 0}.toggle-option input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.toggle-switch{position:relative;width:48px;height:26px;background:var(--color-border);border-radius:13px;transition:background .2s ease;flex-shrink:0}.toggle-switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s ease}.toggle-option input:checked+.toggle-switch{background:var(--color-success)}.toggle-option input:checked+.toggle-switch:after{transform:translate(22px)}.toggle-option input:focus-visible+.toggle-switch{outline:2px solid var(--color-accent-primary);outline-offset:2px}.toggle-label{font-size:var(--font-size-md);font-weight:500;color:var(--color-text)}.option-description{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:var(--space-xs) 0 0 0;padding-left:calc(48px + var(--space-md))}body.theme-dark .toggle-switch{background:var(--color-dark-border, #333)}.provider-selector{display:flex;justify-content:center;gap:var(--space-sm)}.provider-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2xs);padding:var(--space-sm) var(--space-md);min-width:100px;border:2px solid var(--color-border-light);border-radius:var(--radius-md);background:var(--color-bg-card);color:var(--color-text-secondary);font-family:inherit;cursor:pointer;transition:all .15s ease}.provider-btn:hover:not(.provider-btn--disabled){border-color:var(--color-accent-brand);background:var(--color-bg-card-alt)}.provider-btn:focus{outline:none;border-color:var(--color-accent-brand);box-shadow:0 0 0 3px #6366f14d}.provider-btn:focus-visible{outline:2px solid var(--color-accent-brand);outline-offset:2px}.provider-btn--active{border-color:var(--color-accent-brand);background:var(--color-accent-brand);color:var(--color-text-white)}.provider-btn--active:hover{background:var(--color-accent-brand-hover)}.provider-icon{font-size:1.5em}.provider-label{font-weight:600;font-size:.875rem}.playlist-coverage{font-size:.75rem;color:var(--color-text-muted)}.playlist-coverage--warning{color:var(--color-warning)}.playlist-coverage--none{color:var(--color-error)}.playlist-filter-bar{display:flex;flex-direction:column;gap:.75rem;padding:.75rem 0;margin-bottom:.5rem;border-bottom:1px solid var(--color-border)}.filter-dropdowns{display:flex;flex-wrap:wrap;gap:.5rem}.filter-dropdown{padding:.5rem 2rem .5rem .75rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md, 6px);font-size:.875rem;font-weight:500;color:var(--color-text-primary, #333);cursor:pointer;transition:all .15s ease;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;min-width:120px}.filter-dropdown:hover{border-color:var(--color-primary, #6c5ce7)}.filter-dropdown:focus{outline:none;border-color:var(--color-primary, #6c5ce7);box-shadow:0 0 0 2px #6c5ce733}.filter-dropdown:not([value=""]):has(option:checked:not([value=""])){border-color:var(--color-primary, #6c5ce7);background-color:#6c5ce714}.filter-summary{display:flex;align-items:center;gap:.75rem;font-size:.8125rem}.filter-summary-text{color:var(--color-text-secondary, #666)}.filter-clear{padding:.25rem .5rem;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm, 4px);font-size:.75rem;color:var(--color-text-secondary, #666);cursor:pointer;transition:all .15s ease}.filter-clear:hover{background:var(--color-error, #e74c3c);border-color:var(--color-error, #e74c3c);color:#fff}body.theme-dark .filter-dropdown{background-color:#ffffff14;border-color:#ffffff26;color:#ffffffd9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M2 4l4 4 4-4'/%3E%3C/svg%3E")}body.theme-dark .filter-dropdown:hover,body.theme-dark .filter-dropdown:focus{border-color:#6c5ce799}body.theme-dark .filter-summary-text{color:#fff9}body.theme-dark .filter-clear{border-color:#fff3;color:#fff9}.filter-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.4375rem .875rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:.8125rem;font-weight:600;color:var(--color-text-primary, #333);cursor:pointer;transition:all .15s ease;white-space:nowrap}.filter-tag .filter-count{font-size:.6875rem;opacity:.8}.playlist-tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.375rem}.playlist-tag{display:inline-block;padding:.1875rem .5rem;background:var(--color-primary-light, #e8e4f8);border:1px solid var(--color-primary-border, #c9bff2);border-radius:var(--radius-full);font-size:.6875rem;font-weight:500;color:var(--color-primary-dark, #5b4cad);max-width:6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-tag--more{background:transparent;border-color:var(--color-primary-border, #c9bff2);color:var(--color-text-secondary, #666);font-style:italic}body.theme-dark .playlist-tag{background:#6c5ce733;border-color:#6c5ce766;color:#b8acf6}body.theme-dark .playlist-tag--more{background:transparent;color:#ffffff80}.difficulty-badge{display:inline-block;padding:.125rem .5rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;margin-left:var(--space-xs)}.difficulty-badge--easy{background:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success)}.difficulty-badge--normal{background:var(--color-accent-brand-bg);color:var(--color-accent-brand);border:1px solid var(--color-accent-brand)}.difficulty-badge--hard{background:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error)}.supported-players-hint{font-size:.75rem;color:var(--color-text-muted);margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--color-border-light)}.supported-players-hint a{color:var(--color-accent-primary);text-decoration:none}.supported-players-hint a:hover{text-decoration:underline}body.theme-dark .supported-players-hint{color:var(--color-text-neon-muted);border-top-color:var(--color-border-neon)}.player-info{display:flex;flex-direction:column;gap:2px}.platform-badge{display:inline-flex;align-items:center;gap:4px;font-size:.625rem;font-weight:600;padding:2px 6px;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.025em;background:#80808026;color:var(--color-text-muted)}.platform-badge--music_assistant{background:#4caf5026;color:#4caf50}.platform-badge--sonos{background:#ff980026;color:#ff9800}.platform-badge--alexa_media,.platform-badge--alexa{background:#00a8e126;color:#00a8e1}body.theme-dark .platform-badge{background:#ffffff14}body.theme-dark .platform-badge--music_assistant{background:#4caf5033;color:#81c784}body.theme-dark .platform-badge--sonos{background:#ff980033;color:#ffb74d}body.theme-dark .platform-badge--alexa_media,body.theme-dark .platform-badge--alexa{background:#00a8e133;color:#4fc3f7}.no-players-message{text-align:center;padding:var(--space-lg)}.no-players-message h3{font-size:1.125rem;margin-bottom:var(--space-sm)}.no-players-message p{font-size:.875rem;color:var(--color-text-muted);margin-bottom:var(--space-sm)}.no-players-message .button-group{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-md)}.provider-chips{justify-content:flex-start}.provider-chips .chip{display:inline-flex;align-items:center;gap:6px}.provider-icon{font-size:1rem}.warning-box{background:var(--color-warning-bg);border:1px solid var(--color-warning);border-radius:var(--radius-sm);padding:var(--space-sm);margin-top:var(--space-sm);font-size:.875rem}.warning-box p{margin:0 0 var(--space-xs) 0}.warning-box p:last-child{margin-bottom:0}.warning-caveat{font-size:.8125rem;opacity:.85}#provider-hint{font-size:.8125rem;color:var(--color-text-muted);margin-top:var(--space-sm)}body.theme-dark #provider-hint{color:var(--color-text-neon-muted)}.chip--disabled,.provider-btn--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.hint-text{font-size:.75rem;color:var(--color-text-muted);margin:var(--space-xs) 0 0 calc(var(--space-md) + 24px);font-style:italic}body.theme-dark .hint-text{color:var(--color-text-neon-muted)}body.theme-dark .modal-content,body.theme-dark .modal-content h2,body.theme-dark .modal-content p{color:var(--color-text-primary)}body.theme-dark .modal-content .name-input{background:var(--color-bg-white);border-color:var(--color-border-medium);color:var(--color-text-primary)}body.theme-dark .modal-content .name-input::placeholder{color:var(--color-text-muted)}body.theme-dark .modal-content .name-input:focus{border-color:var(--color-accent-blue);box-shadow:0 0 0 3px #3b82f61a}.card{background:var(--color-dark-surface);border-radius:var(--radius-lg);padding:var(--space-md);border:1px solid var(--color-border-neon)}.card-glass{background:var(--color-dark-surface);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--color-border-neon);border-radius:var(--radius-lg)}.btn-neon{background:var(--color-accent-primary);color:var(--color-text-white);border:none;border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast)}.btn-neon:hover{background:#ff4080}.btn-neon:active{transform:scale(.98)}.btn-glow{transition:box-shadow var(--transition-fast),transform var(--transition-fast)}.btn-glow:hover{box-shadow:var(--glow-primary)}.btn-glow:active{transform:scale(.98);box-shadow:var(--glow-primary)}.btn-glow-secondary:hover{box-shadow:var(--glow-secondary)}.btn-glow-success:hover{box-shadow:var(--glow-success)}.text-glow{text-shadow:0 0 10px var(--color-accent-primary),0 0 20px var(--color-accent-primary),0 0 30px var(--color-accent-primary)}.text-glow-cyan{text-shadow:0 0 10px var(--color-accent-secondary),0 0 20px var(--color-accent-secondary),0 0 30px var(--color-accent-secondary)}.text-glow-success{text-shadow:0 0 10px var(--color-success-neon),0 0 20px var(--color-success-neon),0 0 30px var(--color-success-neon)}.text-neon-white{color:var(--color-text-white)}.text-neon-muted{color:var(--color-text-neon-muted)}.text-neon-primary{color:var(--color-accent-primary)}.text-neon-secondary{color:var(--color-accent-secondary)}body.theme-dark .player-container h1,body.theme-dark .lobby-header h1,body.theme-dark .game-container h1,body.theme-dark .reveal-container h1,body.theme-dark .end-container h1{color:var(--color-text-white)}body.theme-dark .player-container p,body.theme-dark .hint,body.theme-dark .player-count{color:var(--color-text-neon-muted)}body.theme-dark .join-form>p{color:var(--color-text-neon-muted)}body.theme-dark .player-card{background:var(--color-dark-surface);border-color:var(--color-border-neon)}body.theme-dark .player-card--you{background:#ff2d6a1a;border-color:var(--color-accent-primary)}body.theme-dark .player-name{color:var(--color-text-white)}body.theme-dark .you-badge{color:var(--color-accent-primary)}body.theme-dark .name-input{background:var(--color-dark-surface);border-color:var(--color-border-neon);color:var(--color-text-white)}body.theme-dark .name-input:focus{border-color:var(--color-accent-primary);box-shadow:0 0 0 3px #ff2d6a33}body.theme-dark .name-input::placeholder{color:var(--color-text-neon-muted)}body.theme-dark .join-btn{background:var(--color-accent-primary);color:var(--color-text-white)}body.theme-dark .join-btn:hover{box-shadow:var(--glow-primary)}body.theme-dark .qr-share-area{background:var(--color-dark-surface);border:1px solid var(--color-border-neon)}body.theme-dark .qr-hint{color:var(--color-text-neon-muted)}body.theme-dark .qr-share-header{color:var(--color-text-white)}body.theme-dark .qr-share-chevron,body.theme-dark .lobby-status{color:var(--color-text-neon-muted)}body.theme-dark .game-container{background:var(--color-bg-primary)}body.theme-dark .round-indicator-text,body.theme-dark .timer{color:var(--color-text-white)}body.theme-dark .timer--warning{color:var(--color-warning);text-shadow:0 0 10px var(--color-warning);animation:timer-pulse-subtle 1s ease-in-out infinite}body.theme-dark .timer--critical{color:var(--color-error-neon);text-shadow:0 0 15px var(--color-error-neon);animation:timer-pulse-intense .5s ease-in-out infinite}body.theme-dark .player-avatar{background:var(--color-dark-surface-hover);color:var(--color-text-neon-muted)}body.theme-dark .player-indicator.is-submitted .player-avatar{background:var(--color-success-neon);color:var(--color-bg-primary);box-shadow:var(--glow-success)}body.theme-dark #selected-year{color:var(--color-text-white)}body.theme-dark .slider-label{color:var(--color-text-neon-muted)}body.theme-dark .year-slider{background:var(--color-dark-surface)}body.theme-dark .year-slider::-webkit-slider-thumb{background:var(--color-accent-primary);box-shadow:var(--glow-primary)}body.theme-dark .year-slider::-moz-range-thumb{background:var(--color-accent-primary);box-shadow:var(--glow-primary)}body.theme-dark .submit-btn{background:var(--color-accent-primary)}body.theme-dark .submit-btn:hover{box-shadow:var(--glow-primary)}body.theme-dark .submitted-confirmation{background:var(--color-success-neon);color:var(--color-bg-primary);box-shadow:var(--glow-success)}body.theme-dark .reveal-container{background:var(--color-bg-primary)}body.theme-dark .reveal-round-info,body.theme-dark .correct-year-label{color:var(--color-text-neon-muted)}body.theme-dark .correct-year{color:var(--color-success-neon);text-shadow:0 0 10px var(--color-success-neon),0 0 20px var(--color-success-neon)}body.theme-dark .song-title{color:var(--color-text-white)}body.theme-dark .song-artist{color:var(--color-text-neon-muted)}body.theme-dark .fun-fact-container{background:#ff660026;border:1px solid rgba(255,102,0,.3)}body.theme-dark .fun-fact-text{color:var(--color-warning)}body.theme-dark .reveal-emotion--exact{color:var(--color-success-neon);text-shadow:0 0 20px var(--color-success-neon),0 0 40px var(--color-success-neon)}body.theme-dark .reveal-emotion--close{color:var(--color-warning);text-shadow:0 0 15px var(--color-warning)}body.theme-dark .reveal-emotion--wrong{color:var(--color-text-neon-muted)}body.theme-dark .reveal-emotion--missed{color:var(--color-text-neon-muted);opacity:.6}body.theme-dark .personal-result{background:var(--color-dark-surface);border:1px solid var(--color-border-neon)}body.theme-dark .result-header,body.theme-dark .result-label{color:var(--color-text-neon-muted)}body.theme-dark .result-value{color:var(--color-text-white)}body.theme-dark .result-score{color:var(--color-accent-secondary);text-shadow:0 0 10px var(--color-accent-secondary)}body.theme-dark .leaderboard{background:var(--color-dark-surface);border:1px solid var(--color-border-neon);box-shadow:none}body.theme-dark .leaderboard-header{background:var(--color-dark-card);border-color:var(--color-border-neon)}body.theme-dark .leaderboard-title{color:var(--color-text-white)}body.theme-dark .leaderboard-entry{border-color:var(--color-border-neon)}body.theme-dark .leaderboard-entry.is-current{background:#ff2d6a1a;border-left-color:var(--color-accent-primary)}body.theme-dark .entry-rank{color:var(--color-text-neon-muted)}body.theme-dark .entry-name{color:var(--color-text-white)}body.theme-dark .entry-score{color:var(--color-accent-secondary)}body.theme-dark .leaderboard-entry--climbing{animation:leaderboard-climb-dark .4s ease-out}body.theme-dark .leaderboard-entry--falling{animation:leaderboard-fall-dark .4s ease-out}@keyframes leaderboard-climb-dark{0%{transform:translateY(10px);opacity:.7;background:#00ff8826}to{transform:translateY(0);opacity:1;background:transparent}}@keyframes leaderboard-fall-dark{0%{transform:translateY(-10px);opacity:.7;background:#ff2d6a26}to{transform:translateY(0);opacity:1;background:transparent}}body.theme-dark .rank-up{color:var(--color-success-neon);text-shadow:0 0 5px var(--color-success-neon)}body.theme-dark .rank-down{color:var(--color-error-neon);text-shadow:0 0 5px var(--color-error-neon)}body.theme-dark .streak-indicator{color:var(--color-warning)}body.theme-dark .streak-indicator--hot{text-shadow:0 0 10px var(--color-warning),0 0 20px var(--color-warning)}body.theme-dark .leaderboard-separator{color:var(--color-text-neon-muted);border-color:var(--color-border-neon)}body.theme-dark .leaderboard-entry.is-top-1{background:linear-gradient(90deg,#ffd70026,#ffd7000d)}body.theme-dark .leaderboard-entry.is-top-1 .entry-rank{color:gold;text-shadow:0 0 10px rgba(255,215,0,.5)}body.theme-dark .leaderboard-entry.is-top-2{background:linear-gradient(90deg,#c0c0c026,#c0c0c00d)}body.theme-dark .leaderboard-entry.is-top-2 .entry-rank{color:silver;text-shadow:0 0 10px rgba(192,192,192,.5)}body.theme-dark .leaderboard-entry.is-top-3{background:linear-gradient(90deg,#cd7f3226,#cd7f320d)}body.theme-dark .leaderboard-entry.is-top-3 .entry-rank{color:#cd7f32;text-shadow:0 0 10px rgba(205,127,50,.5)}body.theme-dark .end-container{background:var(--color-bg-primary)}body.theme-dark .end-title{color:var(--color-text-white)}body.theme-dark .end-subtitle{color:var(--color-text-neon-muted)}body.theme-dark .your-result{background:var(--color-dark-surface);border:1px solid var(--color-border-neon)}body.theme-dark .your-result-header{color:var(--color-accent-primary)}body.theme-dark .your-result-rank{color:var(--color-text-white)}body.theme-dark .your-result-score{color:var(--color-text-neon-muted)}body.theme-dark .stat-value{color:var(--color-accent-secondary)}body.theme-dark .stat-label{color:var(--color-text-neon-muted)}body.theme-dark .podium-name{color:var(--color-text-white)}body.theme-dark .podium-score{color:var(--color-text-neon-muted)}body.theme-dark .final-leaderboard{background:var(--color-dark-surface);border:1px solid var(--color-border-neon);box-shadow:none}body.theme-dark .final-leaderboard-header{background:var(--color-dark-card);color:var(--color-text-white)}body.theme-dark .final-entry{border-color:var(--color-border-neon)}body.theme-dark .final-entry.is-current{background:#ff2d6a1a}body.theme-dark .final-rank{color:var(--color-text-neon-muted)}body.theme-dark .final-name{color:var(--color-text-white)}body.theme-dark .final-score{color:var(--color-accent-secondary)}body.theme-dark .new-game-btn{background:var(--color-success-neon);color:var(--color-bg-primary);box-shadow:var(--glow-success)}body.theme-dark .new-game-btn:hover{background:#4dff1f}body.theme-dark .end-player-message,body.theme-dark .rejoin-hint{color:var(--color-text-neon-muted)}body.theme-dark .paused-container{background:var(--color-bg-primary)}body.theme-dark .paused-container h1{color:var(--color-text-white)}body.theme-dark .paused-container>p{color:var(--color-text-neon-muted)}body.theme-dark .paused-hint{color:var(--color-text-neon-muted)}body.theme-dark .connection-lost-container h1{color:var(--color-text-white)}body.theme-dark .connection-lost-container>p{color:var(--color-text-neon-muted)}body.theme-dark .connection-lost-hint{color:var(--color-text-neon-muted)}body.theme-dark .qr-modal-content{background:var(--color-bg-primary);border:1px solid var(--color-border-neon)}body.theme-dark .qr-modal-label{color:var(--color-text-white)}.qr-print-area{text-align:center;padding:var(--space-lg) 0}.qr-container{display:inline-block;padding:var(--space-md);background:var(--color-bg-white);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}#qr-code{display:inline-block}#qr-code img{display:block}.qr-instruction{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-top:var(--space-md)}.join-url{font-family:var(--font-mono);font-size:var(--font-size-base);color:var(--color-text-muted);margin-top:var(--space-sm);word-break:break-all;user-select:all;cursor:text}.lobby-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm);margin:var(--space-md) 0}.btn-dashboard{display:flex;align-items:center;gap:var(--space-xs)}.player-list{margin-top:var(--space-md);border-top:1px solid var(--color-border-light);padding-top:var(--space-md)}.game-controls-bar{display:flex;gap:var(--space-sm);justify-content:center;margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-border-light)}.game-info{background:var(--color-bg-card);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-md)}.game-info p{margin-bottom:var(--space-sm)}.game-info p:last-child{margin-bottom:0}@media print{body *{visibility:hidden}.qr-print-area,.qr-print-area *{visibility:visible}.qr-print-area{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}#qr-code{width:400px!important;height:400px!important}#qr-code img,#qr-code canvas{width:400px!important;height:400px!important}.qr-instruction{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin-top:var(--space-xl)}.join-url{font-size:var(--font-size-base);font-family:var(--font-mono);margin-top:var(--space-sm)}.no-print{display:none!important}}.player-container{max-width:500px;margin:0 auto;padding-top:max(var(--space-md),env(safe-area-inset-top));padding-bottom:max(var(--space-md),env(safe-area-inset-bottom));padding-left:max(var(--space-sm),env(safe-area-inset-left));padding-right:max(var(--space-sm),env(safe-area-inset-right));text-align:center;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start}@media(min-width:768px){.player-container{max-width:480px;margin-left:auto;margin-right:auto;padding-left:var(--space-lg);padding-right:var(--space-lg)}}.view{display:block;overflow-x:hidden}.view.hidden{display:none}.error-icon{font-size:var(--font-size-timer);margin-bottom:var(--space-md)}.player-container h1{margin-bottom:var(--space-sm);color:var(--color-text-primary)}.player-container p{color:var(--color-text-muted);margin-bottom:var(--space-sm)}.hint{font-size:var(--font-size-base);color:var(--color-text-light)}.coming-soon{font-style:italic;color:var(--color-text-muted)}.spinner{width:40px;height:40px;margin:0 auto var(--space-md);border:4px solid var(--color-bg-card-alt);border-top:4px solid var(--color-accent-blue);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#qr-code{max-width:100%}#qr-code img,#qr-code canvas{max-width:100%;height:auto}@media(min-width:481px)and (max-width:768px){.qr-container{padding:var(--space-xl)}}@media(min-width:769px){.qr-container{padding:var(--space-lg)}}.join-form{max-width:400px;margin:0 auto;padding:var(--space-lg);text-align:center}.join-form h1{margin-bottom:var(--space-sm);font-size:var(--font-size-2xl)}.join-form>p{margin-bottom:var(--space-lg);color:var(--color-text-muted)}.form-group{margin-bottom:var(--space-md)}.name-input{width:100%;padding:14px var(--space-md);font-size:var(--font-size-lg);border:2px solid var(--color-border-medium);border-radius:var(--radius-md);min-height:48px;box-sizing:border-box}.name-input:focus{border-color:var(--color-accent-blue);outline:none;box-shadow:0 0 0 3px #3b82f61a}.join-btn{width:100%;min-height:48px;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.validation-msg{margin-top:var(--space-sm);font-size:var(--font-size-base);color:var(--color-error);text-align:left}.lobby-container{max-width:500px;margin:0 auto;padding:var(--space-lg) var(--space-md)}.lobby-header{text-align:center;margin-bottom:var(--space-lg)}.lobby-header h1{font-size:var(--font-size-2xl);margin-bottom:var(--space-sm);color:var(--color-text-primary)}.player-count{font-size:var(--font-size-md);color:var(--color-text-muted)}.player-list{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-lg)}.player-card{display:flex;align-items:center;padding:var(--space-sm) var(--space-md);min-height:48px;background:var(--color-bg-card);border-radius:var(--radius-md);border:1px solid var(--color-border-light);transition:all var(--transition-normal)}.player-card--you{background:#eff6ff;border-color:var(--color-accent-blue)}.player-card--disconnected{opacity:.5;filter:grayscale(.3);transition:opacity .3s ease,filter .3s ease}.away-badge{font-size:var(--font-size-sm);color:var(--color-text-muted);font-style:italic;margin-left:var(--space-xs)}.player-name{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-md);color:var(--color-text-primary)}.you-badge{font-size:var(--font-size-sm);color:var(--color-accent-blue);font-weight:var(--font-weight-medium)}.player-card.is-new{animation:playerJoin var(--transition-slow) ease-out;background:#ecfdf5;border-color:var(--color-success)}@keyframes playerJoin{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.player-list--virtual{position:relative;overflow-y:auto;max-height:320px;-webkit-overflow-scrolling:touch;contain:layout style paint}.player-list--virtual .virtual-spacer-top,.player-list--virtual .virtual-spacer-bottom{flex-shrink:0;pointer-events:none}.player-list--virtual .virtual-content-wrapper{display:flex;flex-direction:column;gap:var(--space-sm)}.player-list--virtual .player-card{flex-shrink:0;height:52px;box-sizing:border-box}.qr-share-area{text-align:center;padding:var(--space-lg) var(--space-md);background:var(--color-bg-card);border-radius:var(--radius-lg);margin-bottom:var(--space-md)}.qr-icon{font-size:var(--font-size-xl)}.qr-container{display:inline-block;padding:var(--space-sm);background:var(--color-bg-white);border-radius:var(--radius-md);box-shadow:var(--shadow-md);cursor:pointer;min-width:150px;min-height:150px;transition:transform var(--transition-fast)}.qr-container:hover,.qr-container:focus{transform:scale(1.02);outline:2px solid var(--color-accent-blue);outline-offset:2px}.qr-container img{display:block;width:100%;height:auto}.qr-hint{margin-top:var(--space-sm);font-size:13px;color:var(--color-text-muted)}.qr-collapsible{padding:0}.qr-share-header{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);cursor:pointer;user-select:none;list-style:none;font-size:var(--font-size-md);font-weight:600;color:var(--color-text-primary);min-height:44px}.qr-share-header::-webkit-details-marker{display:none}.qr-share-chevron{margin-left:var(--space-sm);transition:transform var(--transition-normal);font-size:.8rem;color:var(--color-text-muted)}.qr-collapsible[open] .qr-share-chevron{transform:rotate(180deg)}.qr-share-content{padding:0 var(--space-md) var(--space-lg);animation:qrSlideDown var(--transition-normal) ease-out}@keyframes qrSlideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.qr-collapsible:not([open]){padding-bottom:0}.qr-collapsible:not([open]) .qr-share-header{padding-bottom:var(--space-md)}@media(prefers-reduced-motion:reduce){.qr-share-chevron{transition:none}.qr-share-content{animation:none}}.dashboard-hint-container{margin-top:var(--space-md);text-align:center}.dashboard-hint-text{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-xs);font-size:var(--font-size-sm);color:#fff;background:var(--color-surface-dark);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);margin:0}.dashboard-hint-label{display:flex;align-items:center;gap:var(--space-xs);color:#fff}.dashboard-hint-icon{font-size:var(--font-size-base)}.dashboard-hint-url{font-family:monospace;color:var(--color-accent-secondary);font-size:var(--font-size-sm)}.qr-modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center}.qr-modal.hidden{display:none}.qr-modal-backdrop{position:absolute;inset:0;background:#000000bf}.qr-modal-content{position:relative;background:var(--color-bg-white);padding:var(--space-xl) var(--space-lg);border-radius:var(--radius-xl);text-align:center;max-width:90vw;max-height:90vh;animation:modalFadeIn var(--transition-fast)}.qr-modal-code{display:inline-block;padding:var(--space-md);background:var(--color-bg-white);border-radius:var(--radius-md);min-width:250px}.qr-modal-code img{display:block;width:100%;max-width:80vw;height:auto}.qr-modal-label{margin:var(--space-md) 0;font-size:var(--font-size-lg);color:var(--color-text-primary)}.qr-modal-close{min-width:120px;min-height:48px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.lobby-status{text-align:center;padding:var(--space-md);color:var(--color-text-muted)}.how-to-play{margin:var(--space-md) 0;background:var(--color-bg-card);border-radius:var(--radius-md);border:1px solid var(--color-border-light)}.how-to-play-header{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);cursor:pointer;user-select:none;list-style:none;font-weight:600;color:var(--color-text-primary);min-height:44px}.how-to-play-header::-webkit-details-marker{display:none}.how-to-play-icon{font-size:1.2rem}.how-to-play-chevron{margin-left:auto;transition:transform var(--transition-normal);font-size:.8rem;color:var(--color-text-secondary)}.how-to-play[open] .how-to-play-chevron{transform:rotate(180deg)}.how-to-play-content{padding:0 var(--space-md) var(--space-md);animation:howToPlaySlideDown var(--transition-normal) ease-out}.how-to-play-steps{margin:0;padding:0;list-style:none;color:var(--color-text-secondary);font-size:.9rem;line-height:1.6;counter-reset:step-counter}.how-to-play-steps li{margin-bottom:var(--space-sm);padding-left:var(--space-lg);position:relative;counter-increment:step-counter}.how-to-play-steps li:before{content:counter(step-counter) ".";position:absolute;left:0;width:var(--space-md);text-align:right;font-weight:600;color:var(--color-text-primary)}.how-to-play-steps li:last-child{margin-bottom:0}@keyframes howToPlaySlideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.leave-game-container{text-align:center;padding:var(--space-md);position:sticky;bottom:0;background:linear-gradient(to top,var(--color-bg-card),transparent);z-index:var(--z-controls, 10)}.leave-game-container.hidden{display:none}body.theme-dark .leave-game-container{background:transparent}.btn-leave{opacity:.7;transition:opacity .2s ease}.btn-leave:hover{opacity:1}.admin-controls{padding:var(--space-lg) var(--space-md);text-align:center;background:linear-gradient(to top,var(--color-bg-card),transparent);position:sticky;bottom:0}.admin-controls.hidden{display:none}body.theme-dark .admin-controls{background:transparent}.btn-large{min-height:56px;font-size:var(--font-size-xl);padding:var(--space-md) var(--space-xl)}.btn-full-width{width:100%}.admin-hint{margin-top:var(--space-sm);font-size:var(--font-size-base);color:var(--color-text-muted)}.admin-lobby-actions{text-align:center;margin-top:var(--space-lg)}.admin-badge{font-size:var(--font-size-sm);color:var(--color-warning);margin-left:var(--space-xs)}.lobby-player-count-container{text-align:center;margin-bottom:var(--space-md)}.lobby-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}.stat-card--clickable{display:block;text-decoration:none;cursor:pointer;margin-bottom:var(--space-lg)}.stat-card--clickable:hover{border-color:var(--color-accent-secondary)}.dashboard-hint-card{background:#00f5ff0d;border-color:var(--color-accent-secondary)}.qr-section{text-align:center;padding:var(--space-xl) var(--space-lg);background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);margin-bottom:var(--space-lg)}.qr-section .qr-container{display:inline-block;padding:var(--space-md);background:#fff;border-radius:var(--radius-md);margin-bottom:var(--space-md)}.qr-hint{font-size:1rem;color:var(--color-text-neon-muted);margin-bottom:var(--space-sm)}.qr-url-display{font-family:Outfit,sans-serif;font-size:1.125rem;font-weight:600;color:var(--color-accent-secondary);word-break:break-all}.player-list-section{background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-lg)}.section-subheader{display:flex;align-items:center;gap:var(--space-sm);font-size:1rem;font-weight:600;color:var(--color-text-white);margin-bottom:var(--space-md)}.section-subheader .section-icon{font-size:1.25rem}.player-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-sm)}.player-cards-grid .player-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-md);min-height:80px;background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);text-align:center;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.player-cards-grid .player-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #9d4edd33}.player-cards-grid .player-card.is-new{background:#39ff141a;border-color:var(--color-success-neon);animation:playerCardJoin .5s ease-out}@keyframes playerCardJoin{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.player-cards-grid .player-card--disconnected{opacity:.5;filter:grayscale(.3)}.player-cards-grid .player-name{font-size:var(--font-size-md);font-weight:600;color:var(--color-text-white);margin-bottom:var(--space-xs);display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap;justify-content:center}.player-cards-grid .admin-badge{font-size:1rem}.player-cards-grid .away-badge{font-size:var(--font-size-xs);color:var(--color-text-neon-muted);display:block;width:100%}.kick-player-btn{position:relative;background:none;border:1px solid var(--color-border-dark);color:var(--color-text-muted);width:24px;height:24px;border-radius:50%;font-size:1rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin-top:var(--space-xs);padding:0;transition:all .15s ease}.kick-player-btn:after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}.kick-player-btn:hover{background:var(--color-error);color:#fff;border-color:var(--color-error)}.lobby-actions{margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--color-border-dark)}.lobby-header-compact{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-bottom:var(--space-md);text-align:left}.section-header--inline{margin-bottom:0;flex:1;min-width:120px;text-align:left}.stat-badge-bar{display:flex;align-items:center;gap:var(--space-md)}.stat-badge{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:#ffffff0d;border:1px solid var(--color-border-neon);border-radius:var(--radius-md);font-size:.875rem}.stat-badge-icon{font-size:1rem}.stat-badge-value{font-weight:600;color:var(--color-accent-secondary)}.stat-badge--status .stat-badge-value{color:var(--color-text-white)}.qr-section--compact{padding:var(--space-md);margin-bottom:var(--space-md)}.qr-section--compact .qr-container{padding:var(--space-sm);margin-bottom:var(--space-sm)}.qr-section--compact #qr-code{width:180px!important;height:180px!important}.qr-section--compact #qr-code img,.qr-section--compact #qr-code canvas{width:180px!important;height:180px!important}.qr-section--compact .qr-hint{font-size:.875rem;margin-bottom:var(--space-xs)}.qr-url-display--compact{font-size:.75rem;margin-bottom:var(--space-sm)}.dashboard-link{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:#00f5ff1a;border:1px solid var(--color-accent-secondary);border-radius:var(--radius-md);color:var(--color-accent-secondary);text-decoration:none;font-size:.875rem;transition:all .2s ease}.dashboard-link:hover{background:#00f5ff33}.dashboard-link-arrow{opacity:.7}.player-list-section--compact{padding:var(--space-sm);margin-bottom:var(--space-sm)}.section-subheader--compact{font-size:.875rem;margin-bottom:var(--space-sm)}.empty-state-inline{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);color:var(--color-text-neon-muted);font-size:.875rem;text-align:center}.lobby-actions--sticky{position:sticky;bottom:0;margin:0 calc(-1 * var(--space-md));padding:var(--space-sm) var(--space-md);background:var(--color-bg-primary);border-top:1px solid var(--color-border-dark);z-index:10;display:flex;flex-direction:column;gap:var(--space-sm, 8px)}@media(min-width:481px){.qr-section--compact #qr-code,.qr-section--compact #qr-code img,.qr-section--compact #qr-code canvas{width:240px!important;height:240px!important}.qr-section--compact{padding:var(--space-lg)}.lobby-actions--sticky{position:relative;margin:var(--space-lg) 0 0 0;padding:var(--space-md) 0 0 0;background:transparent}}.lobby-wordmark-header{display:flex;justify-content:center;align-items:center;padding:var(--space-md) var(--space-md) var(--space-sm);padding-top:env(safe-area-inset-top,16px)}.lobby-wordmark-header .wordmark{font-size:2rem}.lobby-container--compact{flex:1;padding:0 var(--space-sm) var(--space-2xl);max-width:500px;margin:0 auto;width:100%}.lobby-container--compact .section-collapsible{background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);margin-bottom:var(--space-md);overflow:hidden}.lobby-container--compact .section-header-collapsible{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-sm) var(--space-md);background:transparent;border:none;color:var(--color-text-white);font-size:.875rem;font-weight:600;cursor:pointer;text-align:left}.lobby-container--compact .section-header-collapsible .section-icon{font-size:1rem}.lobby-container--compact .section-summary{margin-left:auto;font-size:.75rem;font-weight:400;color:var(--color-text-neon-muted);padding:2px 8px;background:#ffffff0d;border-radius:var(--radius-sm)}.lobby-container--compact .section-toggle{font-size:.625rem;color:var(--color-text-neon-muted);transition:transform .2s ease;margin-left:var(--space-sm)}.lobby-container--compact .section-header-collapsible>.section-toggle:nth-child(3){margin-left:auto}.lobby-container--compact .section-collapsible:not(.collapsed) .section-toggle{transform:rotate(180deg)}.lobby-container--compact .section-content{padding:0 var(--space-md) var(--space-md)}.lobby-container--compact .section-collapsible.collapsed .section-content{display:none}.lobby-status-compact{text-align:center;padding:var(--space-md);color:var(--color-text-neon-muted);font-size:.875rem}.how-to-play-steps-compact{list-style:decimal;padding-left:var(--space-lg);margin:0;font-size:.875rem;color:var(--color-text-neon-muted)}.how-to-play-steps-compact li{padding:var(--space-xs) 0}.stat-badge--difficulty{font-size:.75rem;text-transform:uppercase;letter-spacing:.03em}.stat-badge--difficulty:empty{display:none}.admin-content .section-collapsible{background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);margin-bottom:var(--space-md);overflow:hidden}.admin-content .section-header-collapsible{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-sm) var(--space-md);background:transparent;border:none;color:var(--color-text-white);font-size:.875rem;font-weight:600;cursor:pointer;text-align:left}.admin-content .section-header-collapsible .section-icon{font-size:1rem}.admin-content .section-header-collapsible .section-summary{margin-left:auto;font-size:.75rem;font-weight:400;color:var(--color-accent-secondary);background:#00f5ff1a;padding:2px 8px;border-radius:var(--radius-sm)}.admin-content .section-header-collapsible .section-toggle{margin-left:var(--space-sm);font-size:.625rem;color:var(--color-text-neon-muted);transition:transform .2s ease}.admin-content .section-collapsible:not(.collapsed) .section-toggle{transform:rotate(180deg)}.admin-content .section-collapsible .section-content{padding:0 var(--space-md) var(--space-md)}.admin-content .section-collapsible.collapsed .section-content{display:none}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xs) 0;border-bottom:1px solid rgba(255,255,255,.05)}.setting-row:last-child{border-bottom:none}.setting-group{border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:var(--space-sm);margin-bottom:var(--space-sm)}.setting-group:last-child{border-bottom:none}.setting-group .setting-row{border-bottom:none}.tts-group-title{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin:0 0 var(--space-xs) 0;opacity:.8}.setting-hint{font-size:.7rem;color:var(--color-text-muted);margin:0 0 var(--space-xs) calc(var(--space-xs) + 24px);line-height:1.3;opacity:.75}body.theme-dark .setting-hint{color:var(--color-text-neon-muted)}.setting-label{display:flex;align-items:center;gap:var(--space-xs);font-size:.875rem;color:var(--color-text-white)}.setting-icon{font-size:.875rem}.chip-group{display:flex;gap:4px}.chip{padding:4px 10px;font-size:.75rem;font-weight:500;background:#ffffff0d;border:1px solid var(--color-border-neon);border-radius:var(--radius-sm);color:var(--color-text-neon-muted);cursor:pointer;transition:all .15s ease}.chip:hover{background:#ffffff1a;color:var(--color-text-white)}.chip.chip--active{background:#00f5ff33;border-color:var(--color-accent-secondary);color:var(--color-accent-secondary)}.toggle-compact{display:flex;align-items:center;cursor:pointer}.toggle-compact input{position:absolute;opacity:0;width:0;height:0}.toggle-switch-compact{width:36px;height:20px;background:#ffffff1a;border-radius:10px;position:relative;transition:background .2s ease}.toggle-switch-compact:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--color-text-neon-muted);border-radius:50%;transition:all .2s ease}.toggle-compact input:checked+.toggle-switch-compact{background:#00f5ff4d}.toggle-compact input:checked+.toggle-switch-compact:after{left:18px;background:var(--color-accent-secondary)}.admin-actions{position:sticky;bottom:0;background:var(--color-bg-primary);padding:var(--space-sm) 0;margin-top:var(--space-sm)}.admin-actions .status-error{margin-bottom:var(--space-xs);font-size:.875rem}.modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center}.modal.hidden{display:none}.modal-backdrop{position:absolute;inset:0;background:#00000080}.modal-content{position:relative;background:var(--color-bg-white);padding:var(--space-lg);border-radius:var(--radius-lg);max-width:400px;width:90%;animation:modalFadeIn var(--transition-fast)}.modal-content h2{margin-bottom:var(--space-sm);font-size:var(--font-size-xl)}.modal-content p{margin-bottom:var(--space-md);color:var(--color-text-muted)}.modal-actions{display:flex;gap:var(--space-sm);margin-top:var(--space-lg)}.modal-actions .btn{flex:1}.game-placeholder{text-align:center;padding:var(--space-2xl) var(--space-lg)}.game-placeholder h1{font-size:var(--font-size-3xl);margin-bottom:var(--space-md);color:var(--color-text-primary)}.game-placeholder p{font-size:var(--font-size-md);color:var(--color-text-muted)}.reveal-placeholder{text-align:center;padding:var(--space-2xl) var(--space-lg)}.reveal-placeholder h1{font-size:var(--font-size-4xl);margin-bottom:var(--space-md);color:var(--color-text-primary)}.reveal-placeholder p{font-size:var(--font-size-md);color:var(--color-text-muted)}.end-container{text-align:center;padding:var(--space-2xl) var(--space-lg)}.end-icon{font-size:var(--font-size-timer);margin-bottom:var(--space-md)}.end-container h1{font-size:var(--font-size-3xl);margin-bottom:var(--space-sm);color:var(--color-text-primary)}.end-message{font-size:var(--font-size-lg);color:#4b5563;margin-bottom:var(--space-sm)}.game-container{display:flex;flex-direction:column;align-items:center;padding:var(--space-sm);padding-bottom:max(var(--space-md),env(safe-area-inset-bottom));max-width:400px;margin:0 auto}.game-sticky-bar{position:sticky;top:0;z-index:50;width:100%;padding:var(--space-xs) var(--space-sm);background:var(--color-bg-light);border-bottom:1px solid var(--color-border-light)}body.theme-dark .game-sticky-bar{background:var(--color-bg-primary);border-bottom-color:var(--color-border-dark)}.game-sticky-bar .timer-container{margin-bottom:0}.game-sticky-bar .timer{font-size:2rem}.game-header-compact{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:var(--space-sm);padding:0 var(--space-xs)}.game-header-left{display:flex;align-items:center;gap:var(--space-xs)}.game-header-left .section-icon{font-size:1rem}.round-indicator-text{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-white)}.stat-badge--steal{background:linear-gradient(135deg,var(--color-purple-primary),var(--color-purple-secondary, #9333ea));animation:steal-badge-pulse 2s ease-in-out infinite}@keyframes steal-badge-pulse{0%,to{box-shadow:0 0 8px #9333ea80}50%{box-shadow:0 0 12px #9333eacc}}.last-round-banner{background:linear-gradient(135deg,var(--color-warning),var(--color-warning-dark));color:var(--color-text-white);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-sm);text-align:center;width:100%;animation:pulse 2s infinite}.intro-badge{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background:linear-gradient(135deg,gold,#ff6b00);color:#000;border-radius:var(--radius-pill);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:1px;animation:intro-pulse 1.5s ease-in-out infinite;margin-bottom:var(--space-md);box-shadow:0 0 20px #ffd70080,0 0 40px #ff6b004d}.intro-splash{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#000000d9;animation:intro-splash-in .3s ease-out,intro-splash-out .5s ease-in 1.5s forwards;pointer-events:none}.intro-splash-content{display:flex;flex-direction:column;align-items:center;gap:12px;animation:intro-splash-scale .4s cubic-bezier(.34,1.56,.64,1)}.intro-splash-icon{font-size:80px;filter:drop-shadow(0 0 30px rgba(255,215,0,.8))}.intro-splash-text{font-size:36px;font-weight:900;text-transform:uppercase;letter-spacing:4px;background:linear-gradient(135deg,gold,#ff6b00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none}.intro-splash-hint{font-size:18px;color:#ffffffb3;letter-spacing:1px}@keyframes intro-splash-in{0%{opacity:0}to{opacity:1}}@keyframes intro-splash-out{0%{opacity:1}to{opacity:0;visibility:hidden}}@keyframes intro-splash-scale{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.intro-badge-icon{font-size:var(--font-size-md)}.intro-badge--large{font-size:var(--font-size-lg);padding:var(--space-sm) var(--space-lg);margin-left:var(--space-md)}.intro-badge--large .intro-badge-icon{font-size:var(--font-size-xl)}.intro-badge--stopped{background:linear-gradient(135deg,#666,#444);color:var(--color-text-white);animation:none}@keyframes intro-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@media(prefers-reduced-motion:reduce){.intro-badge{animation:none}}.closest-wins-badge{background:linear-gradient(135deg,#00c6ff,#0072ff);box-shadow:0 0 20px #00c6ff80,0 0 40px #0072ff4d}.result-card.is-closest-winner{border:2px solid #00c6ff;box-shadow:0 0 12px #00c6ff66}.closest-winner-badge{margin-left:var(--space-sm);font-size:var(--font-size-sm)}.album-cover-container{position:relative;width:150px;height:150px;margin-bottom:var(--space-md)}.album-cover{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);filter:blur(20px)}@media(max-width:360px){.album-cover-container{width:120px;height:120px}}@media(min-width:768px){.album-cover-container{width:180px;height:180px}}.album-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--color-bg-card-alt);border-radius:var(--radius-xl)}.loading-spinner{width:40px;height:40px;border:4px solid var(--color-border-light);border-top-color:var(--color-accent-brand);border-radius:50%;animation:spin 1s linear infinite}.timer-container{margin-bottom:var(--space-lg)}.timer{font-size:var(--font-size-timer);font-weight:var(--font-weight-bold);color:var(--color-text-primary);font-variant-numeric:tabular-nums;transition:color var(--transition-normal)}.timer--warning{color:var(--color-warning);animation:timer-pulse-subtle 1s ease-in-out infinite}.timer--critical{color:var(--color-error);animation:timer-pulse-intense .5s ease-in-out infinite}@keyframes timer-pulse-subtle{0%,to{opacity:1}50%{opacity:.8}}@keyframes timer-pulse-intense{0%,to{opacity:1;transform:scale(1)}50%{opacity:.9;transform:scale(1.05)}}@media(prefers-reduced-motion:reduce){.timer--warning,.timer--critical{animation:none}}.submission-tracker{width:100%;margin-bottom:var(--space-md);padding:var(--space-sm);background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md)}.submitted-players{display:flex;gap:var(--space-sm);overflow-x:auto;padding:var(--space-xs) 0;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:center;flex-wrap:wrap}.submitted-players::-webkit-scrollbar{display:none}.player-indicator{display:flex;flex-direction:column;align-items:center;min-width:48px;flex-shrink:0;position:relative}.player-badge{position:absolute;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;z-index:1}.player-badge--bet{top:-2px;right:2px;background:var(--color-warning)}.player-badge--steal{top:-2px;left:2px;background:linear-gradient(135deg,var(--color-purple-primary),var(--color-purple-secondary, #9333ea))}.player-avatar{width:36px;height:36px;border-radius:50%;background:var(--color-border-light);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);border:2px solid transparent;transition:all var(--transition-normal)}.player-indicator.is-submitted .player-avatar{background:var(--color-success);color:var(--color-text-white);border-color:var(--color-success-hover);animation:submitted-pulse var(--transition-slow) ease-out}.player-indicator.is-submitted .player-initials{display:none}.player-indicator.is-submitted .player-avatar:after{content:"\2713";font-size:var(--font-size-md)}@keyframes submitted-pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.player-indicator .player-name{font-size:var(--font-size-xs);color:var(--color-text-muted);max-width:48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;margin-top:var(--space-xs)}.player-indicator.is-current-player .player-avatar{border-color:var(--color-accent-brand)}.player-indicator.is-current-player .player-name{font-weight:var(--font-weight-semibold);color:var(--color-accent-brand)}.player-indicator--disconnected{opacity:.4}.submission-tracker.all-submitted{border-color:var(--color-success);background:#10b9811a}.artist-challenge{width:100%}.artist-challenge .section-header{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.stat-badge--bonus{background:#22c55e26;color:var(--color-success);font-weight:700;margin-left:auto}.artist-options-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:var(--space-sm)}@media(max-width:320px){.artist-options-grid{grid-template-columns:1fr}}.artist-option-btn{display:flex;align-items:center;justify-content:center;min-height:72px;padding:var(--space-sm) var(--space-md);border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-md);font-weight:500;cursor:pointer;transition:all .2s ease;position:relative}.artist-option-btn:active{transform:scale(.98)}.artist-option-btn.is-loading{animation:artistPulse 1s infinite}@keyframes artistPulse{0%,to{opacity:1}50%{opacity:.6}}.artist-option-btn.is-correct,.artist-option-btn.is-winner{background:var(--color-success);border-color:var(--color-success);color:#fff}.artist-option-btn.is-winner{box-shadow:var(--glow-primary)}.artist-option-btn.is-wrong{animation:artistWrongFlash .5s ease}.artist-option-btn.is-wrong.is-selected{background:var(--color-error);border-color:var(--color-error);color:#fff;animation:none;opacity:.8}@keyframes artistWrongFlash{0%,to{background:var(--color-surface)}50%{background:#ef44444d}}.artist-option-btn.is-disabled{opacity:.5;pointer-events:none}.artist-points-badge{position:absolute;right:var(--space-sm);font-size:var(--font-size-sm);font-weight:700;color:#fff;background:#0003;padding:2px 6px;border-radius:var(--radius-sm)}.artist-result{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);text-align:center;font-weight:500}.artist-result.is-winner{background:#22c55e26;color:var(--color-success)}.artist-result.is-late{background:var(--color-surface-alt, rgba(255, 255, 255, .05));color:var(--color-text-muted)}body.theme-dark .artist-option-btn{background:#ffffff0d;border-color:var(--color-border-neon);color:var(--color-text-white)}body.theme-dark .artist-option-btn:hover{background:#ffffff1a}@media(prefers-reduced-motion:reduce){.artist-option-btn.is-loading{animation:none;opacity:.7}.artist-option-btn.is-wrong{animation:none;opacity:.5}}.artist-reveal-section{padding:var(--space-md);margin-bottom:var(--space-md);background:var(--color-surface-alt, rgba(255, 255, 255, .05));border-radius:var(--radius-lg)}.artist-reveal-section .section-content-padded{text-align:center}.artist-reveal-label{font-size:var(--font-size-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-xs)}.artist-reveal-name{font-size:var(--font-size-xl);font-weight:700;color:var(--color-text);margin-bottom:var(--space-sm)}.artist-reveal-winner{font-size:var(--font-size-md);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);display:inline-block}.artist-reveal-winner.is-you{background:#22c55e26;color:var(--color-success);font-weight:600}.artist-reveal-winner.is-other{color:var(--color-text-muted)}.artist-reveal-no-winner{color:var(--color-text-muted);font-style:italic}body.theme-dark .artist-reveal-section{background:var(--color-dark-surface-alt, #16213e)}.artist-bonus-row .result-value{color:var(--color-success);font-weight:600}.player-card-artist-badge{font-size:var(--font-size-xs);color:var(--color-success);background:#22c55e1a;padding:2px 6px;border-radius:var(--radius-sm);margin-left:var(--space-xs)}.movie-challenge{width:100%}.movie-challenge .section-header{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.movie-options-grid{display:grid;grid-template-columns:1fr;gap:var(--space-sm)}@media(min-width:480px){.movie-options-grid{grid-template-columns:1fr 1fr}}.movie-option-btn{display:flex;align-items:center;justify-content:center;min-height:44px;padding:var(--space-sm) var(--space-md);border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-md);font-weight:500;cursor:pointer;transition:all .2s ease;position:relative;text-align:center}.movie-option-btn:active{transform:scale(.98)}.movie-option-btn.is-loading{animation:moviePulse 1s infinite}@keyframes moviePulse{0%,to{opacity:1}50%{opacity:.6}}.movie-option-btn.is-correct,.movie-option-btn.is-winner{background:var(--color-success);border-color:var(--color-success);color:#fff}.movie-option-btn.is-winner{box-shadow:var(--glow-primary)}.movie-option-btn.is-wrong{animation:movieWrongFlash .5s ease}.movie-option-btn.is-wrong.is-selected{background:var(--color-error);border-color:var(--color-error);color:#fff;animation:none;opacity:.8}@keyframes movieWrongFlash{0%,to{background:var(--color-surface)}50%{background:#ef44444d}}.movie-option-btn.is-disabled{opacity:.5;pointer-events:none}.movie-rank-badge{position:absolute;right:var(--space-sm);font-size:var(--font-size-sm);font-weight:700;color:#fff;background:#0003;padding:2px 6px;border-radius:var(--radius-sm)}.movie-result{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);text-align:center;font-weight:500}.movie-result.is-winner{background:#22c55e26;color:var(--color-success)}.movie-result.is-late{background:var(--color-surface-alt, rgba(255, 255, 255, .05));color:var(--color-text-muted)}body.theme-dark .movie-option-btn{background:#ffffff0d;border-color:var(--color-border-neon);color:var(--color-text-white)}body.theme-dark .movie-option-btn:hover{background:#ffffff1a}@media(prefers-reduced-motion:reduce){.movie-option-btn.is-loading{animation:none;opacity:.7}.movie-option-btn.is-wrong{animation:none;opacity:.5}}.movie-reveal-section{padding:var(--space-md);margin-bottom:var(--space-md);background:var(--color-surface-alt, rgba(255, 255, 255, .05));border-radius:var(--radius-lg)}.movie-reveal-section .section-content-padded{text-align:center}.movie-reveal-name{font-size:var(--font-size-xl);font-weight:700;color:var(--color-text);margin-bottom:var(--space-sm)}.movie-reveal-winners{margin-top:var(--space-sm)}.movie-reveal-winners-title{font-size:var(--font-size-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-xs)}.movie-reveal-winner-entry{font-size:var(--font-size-md);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);display:inline-block;margin:2px 4px}.movie-reveal-winner-entry.is-you{background:#22c55e26;color:var(--color-success);font-weight:600}.movie-reveal-winner-entry.is-other{color:var(--color-text-muted)}.movie-reveal-no-winner{color:var(--color-text-muted);font-style:italic;font-size:var(--font-size-md);padding:var(--space-xs) var(--space-md)}body.theme-dark .movie-reveal-section{background:var(--color-dark-surface-alt, #16213e)}.year-selector-section{width:100%;padding-bottom:max(var(--space-md),env(safe-area-inset-bottom))}.year-selector{width:100%}.year-display{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-md)}.year-adjust-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--color-border-dark);background:transparent;color:var(--color-text-white);font-size:1.5rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;flex-shrink:0}.year-adjust-btn:active{background:var(--color-accent-primary);border-color:var(--color-accent-primary);transform:scale(.95)}.year-adjust-btn:disabled{opacity:.3;pointer-events:none}#selected-year{font-size:var(--font-size-year);font-weight:var(--font-weight-bold);color:var(--color-text-primary);font-variant-numeric:tabular-nums}.slider-container{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg)}.slider-label{font-size:var(--font-size-sm);color:var(--color-text-muted);min-width:40px}.slider-label--min{text-align:right}.slider-label--max{text-align:left}.year-slider{-webkit-appearance:none;appearance:none;flex:1;height:var(--space-sm);background:var(--color-border-light);border-radius:var(--radius-sm);outline:none}.year-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:44px;background:var(--color-accent-brand);border-radius:50%;cursor:pointer;border:4px solid var(--color-bg-white);box-shadow:var(--shadow-md);transition:transform .1s ease}.year-slider::-webkit-slider-thumb:active{transform:scale(1.1)}.year-slider::-moz-range-thumb{width:44px;height:44px;background:var(--color-accent-brand);border-radius:50%;cursor:pointer;border:4px solid var(--color-bg-white);box-shadow:var(--shadow-md)}.submit-btn{width:100%;padding:var(--space-lg) var(--space-lg);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-white);background:var(--color-accent-brand);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);min-height:56px}.submit-btn:hover{background:var(--color-accent-brand-hover)}.submit-btn:active{transform:scale(.98)}.submit-btn:disabled{background:var(--color-text-light);cursor:not-allowed;transform:none}.submit-btn.is-loading{color:transparent;position:relative}.submit-btn.is-loading:after{content:"";position:absolute;width:24px;height:24px;border:3px solid var(--color-bg-white);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;left:50%;top:50%;margin-left:-12px;margin-top:-12px}.submit-btn.is-error{background:var(--color-error)}.submitted-confirmation{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);background:var(--color-success);color:var(--color-text-white);border-radius:var(--radius-lg);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.submitted-confirmation .checkmark{font-size:var(--font-size-2xl)}.year-selector.is-submitted .year-slider{pointer-events:none;opacity:.5}.year-selector.is-submitted #selected-year{color:var(--color-text-muted)}@media(max-width:360px){.album-cover-container{max-width:250px}.timer{font-size:var(--font-size-2xl)}}@media(min-width:768px){.album-cover-container{max-width:350px}.timer{font-size:var(--font-size-hero)}}@media(min-width:768px){body{max-width:800px;margin:0 auto;padding:var(--space-lg)}header h1{font-size:var(--font-size-4xl)}.status-section h2,.card-section h2{font-size:var(--font-size-lg)}.card-section{padding:var(--space-md) var(--space-lg)}}.reveal-container{display:flex;flex-direction:column;align-items:center;padding:var(--space-lg);width:100%;margin:0 auto;text-align:center}.reveal-container--compact{padding:var(--space-md);gap:var(--space-sm);align-items:stretch}.reveal-container--duel{padding:var(--space-md);gap:var(--space-sm);align-items:stretch;text-align:left}.reveal-header-compact{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xs) 0;margin-bottom:var(--space-xs)}.reveal-header-left{display:flex;align-items:center;gap:var(--space-xs)}.reveal-header-compact .section-icon{font-size:1rem}.reveal-header-compact .round-indicator-text{font-size:.875rem;color:var(--color-text-neon-muted)}.reveal-song-hero{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm);background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);margin-bottom:var(--space-sm)}.reveal-album-cover-compact{width:80px;height:80px;object-fit:cover;border-radius:var(--radius-md);flex-shrink:0}.reveal-song-info{flex:1;min-width:0;text-align:left}.reveal-song-info .song-title{font-size:1rem;font-weight:600;color:var(--color-text-white);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reveal-song-info .song-artist{font-size:.875rem;color:var(--color-text-neon-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reveal-year-section{text-align:center;padding:var(--space-sm) 0}.reveal-emotion-inline{font-size:1.25rem;font-weight:700;margin-bottom:var(--space-xs);animation:reveal-emotion-entrance .5s ease-out}.reveal-year-section .correct-year-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-neon-muted);margin-bottom:var(--space-xs)}.reveal-year-section .correct-year{font-size:3rem}.personal-result-compact{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:#00f5ff1a;border:1px solid var(--color-border-neon);border-radius:var(--radius-md);margin-bottom:var(--space-sm)}.result-content-inline{font-size:.875rem;color:var(--color-text-white)}.artist-reveal-compact{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);margin-bottom:var(--space-sm)}.artist-reveal-icon{font-size:1rem}.artist-reveal-name-inline{font-weight:600;color:var(--color-accent-secondary)}.artist-reveal-winner-inline{font-size:.75rem;color:var(--color-text-neon-muted)}.artist-reveal-winner-inline:before{content:"\2022";margin-right:var(--space-xs)}.fun-fact-section{text-align:left}.fun-fact-section .fun-fact-text{font-size:.875rem;color:var(--color-text-white);line-height:1.5;margin-bottom:var(--space-sm)}.fun-fact-section .song-rich-info{font-size:.75rem;color:var(--color-text-neon-muted)}.section-content-padded{padding:0 var(--space-md) var(--space-md)}.card-section .section-content-padded{padding:0 0 var(--space-sm)}.guesses-section{text-align:left}.reveal-results-grid{width:100%}.personal-result-section{text-align:left}.personal-result-section .result-row{display:flex;justify-content:space-between;padding:var(--space-xs) 0;border-bottom:1px solid rgba(255,255,255,.05)}.personal-result-section .result-row:last-child{border-bottom:none}.artist-reveal-section{text-align:left}.artist-reveal-section .artist-reveal-name{font-size:1.25rem;font-weight:700;color:var(--color-accent-secondary);margin-bottom:var(--space-xs)}.artist-reveal-section .artist-reveal-winner{font-size:.875rem;color:var(--color-text-neon-muted)}.round-analytics-section{width:100%;background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);overflow:hidden;text-align:left}.round-analytics-section .section-header-collapsible{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-sm) var(--space-md);background:transparent;border:none;color:var(--color-text-white);font-size:.875rem;font-weight:600;cursor:pointer;text-align:left}.round-analytics-section .section-header-collapsible .section-icon{font-size:1rem}.round-analytics-section .section-header-collapsible .section-summary{margin-left:auto;font-size:.75rem;font-weight:400;color:var(--color-accent-secondary);background:#00f5ff1a;padding:2px 8px;border-radius:var(--radius-sm)}.round-analytics-section .section-header-collapsible .section-toggle{margin-left:var(--space-sm);font-size:.625rem;color:var(--color-text-neon-muted);transition:transform .2s ease}.round-analytics-section .section-content{padding:0 var(--space-md) var(--space-sm)}.round-analytics-section.collapsed .section-content{display:none}.round-analytics-section:not(.collapsed) .section-toggle{transform:rotate(180deg)}.reveal-round-info{font-size:var(--font-size-base);color:var(--color-text-muted);margin-bottom:var(--space-md)}.reveal-album{margin-bottom:var(--space-lg)}.reveal-album-cover{width:150px;height:150px;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.correct-year-container{margin-bottom:var(--space-md)}.correct-year-label{font-size:var(--font-size-md);color:var(--color-text-muted);margin-bottom:var(--space-sm)}.correct-year{font-size:var(--font-size-hero);font-weight:var(--font-weight-extrabold);color:var(--color-success);font-variant-numeric:tabular-nums;animation:reveal-pop var(--transition-slow) ease-out}@keyframes reveal-pop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.song-info{margin-bottom:var(--space-md)}.song-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-xs)}.song-artist{font-size:var(--font-size-md);color:var(--color-text-muted)}.fun-fact-container{display:flex;flex-direction:column;gap:var(--space-sm);background:var(--color-warning-light);padding:var(--space-md);border-radius:var(--radius-lg);margin-bottom:var(--space-lg);text-align:left;max-width:100%}.fun-fact-header{display:flex;align-items:flex-start;gap:var(--space-sm)}.fun-fact-icon{font-size:var(--font-size-xl);flex-shrink:0}.fun-fact-text{font-size:var(--font-size-base);color:#92400e;line-height:1.4}.fun-fact-header:empty,.fun-fact-text:empty{display:none}.song-rich-info{text-align:left}.song-rich-info:empty{display:none}.song-badges-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm);margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid rgba(120,53,15,.15)}.song-badges-row:first-child{border-top:none;padding-top:0}.song-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:20px;border:1px solid;box-shadow:0 1px 3px #0000001a;white-space:nowrap}.song-badge-icon{font-size:14px;line-height:1}.song-badge--chart{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af;border-color:#93c5fd}.song-badge--chart .chart-weeks{font-weight:400;opacity:.8;font-size:11px}.song-badge--platinum{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);color:#475569;border-color:#cbd5e1}.song-badge--gold{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;border-color:#fcd34d}.song-badge--diamond{background:linear-gradient(135deg,#e0f2fe,#bae6fd);color:#0369a1;border-color:#7dd3fc}.song-badge--award{background:linear-gradient(135deg,#ffedd5,#fed7aa);color:#9a3412;border-color:#fdba74}.song-badge--grammy{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#78350f;border-color:#f59e0b}.song-badge--eurovision{background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#5b21b6;border-color:#a78bfa}.song-badge--oscar,.song-badge--academy{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#78350f;border-color:#f59e0b}.song-badge--halloffame{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af;border-color:#60a5fa}.song-badges-more{font-size:var(--font-size-xs);color:#78350f;font-style:italic;opacity:.8}.song-difficulty{display:flex;align-items:center;gap:var(--space-sm);justify-content:center;margin-top:var(--space-sm);opacity:0;animation:fadeIn .5s ease-out forwards;animation-delay:.3s}.difficulty-stars{font-size:1.2rem;letter-spacing:.1em}.difficulty-1{color:var(--color-success-neon);text-shadow:0 0 10px var(--color-success-neon)}.difficulty-2{color:var(--color-warning);text-shadow:0 0 10px var(--color-warning)}.difficulty-3{color:var(--color-warning-alt);text-shadow:0 0 10px var(--color-warning-alt)}.difficulty-4{color:var(--color-accent-primary);text-shadow:0 0 10px var(--color-accent-primary)}.difficulty-label{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:var(--font-size-sm)}.difficulty-accuracy{font-size:.85em;opacity:.7}.superlatives-container{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-md);margin:var(--space-lg) 0;padding:0 var(--space-md)}.superlative-card{display:flex;flex-direction:column;align-items:center;padding:var(--space-md);min-width:120px;max-width:160px;background:var(--color-dark-surface);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.1);opacity:0;animation:superlativeSlideIn .5s ease-out forwards}@keyframes superlativeSlideIn{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.superlative-emoji{font-size:2rem;margin-bottom:var(--space-xs)}.superlative-title{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:var(--font-size-xs);color:var(--color-accent-secondary);text-align:center;margin-bottom:var(--space-xs)}.superlative-player{font-weight:700;font-size:var(--font-size-base);color:var(--color-dark-text-primary);text-align:center;margin-bottom:var(--space-xs)}.superlative-value{font-size:var(--font-size-sm);color:var(--color-dark-text-secondary);text-align:center}.superlative-card--speed_demon{border-color:var(--color-warning);box-shadow:0 0 15px #f59e0b33}.superlative-card--lucky_streak{border-color:var(--color-error);box-shadow:0 0 15px #ef444433}.superlative-card--risk_taker{border-color:var(--color-purple-primary);box-shadow:0 0 15px #8b5cf633}.superlative-card--clutch_player{border-color:var(--color-success-neon);box-shadow:0 0 15px #39ff1433}.superlative-card--close_calls{border-color:var(--color-accent-secondary);box-shadow:0 0 15px #00f5ff33}.highlights-container{width:100%;margin-top:var(--space-lg);margin-bottom:var(--space-lg)}.highlights-header{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-white);text-align:center;margin-bottom:var(--space-md)}.highlights-list{display:flex;flex-direction:column;gap:var(--space-sm)}.highlight-card{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--color-dark-surface);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.1);opacity:0;animation:highlightFadeIn .5s ease-out forwards}@keyframes highlightFadeIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.highlight-emoji{font-size:1.8rem;flex-shrink:0;width:48px;text-align:center}.highlight-content{flex:1;min-width:0}.highlight-text{font-size:var(--font-size-base);color:var(--color-dark-text-primary);line-height:1.4}.highlight-round{font-size:var(--font-size-xs);color:var(--color-dark-text-secondary);margin-top:var(--space-xs)}@media(max-width:480px){.highlight-card{padding:var(--space-sm);gap:var(--space-sm)}.highlight-emoji{font-size:1.4rem;width:36px}.highlight-text{font-size:var(--font-size-sm)}}.round-analytics{width:100%;margin-top:var(--space-lg);margin-bottom:var(--space-lg);padding:var(--space-md);background:var(--color-dark-surface);border-radius:var(--radius-lg);text-align:center}.analytics-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-white);margin-bottom:var(--space-md)}.analytics-stats-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-lg);margin-bottom:var(--space-xs)}.stat-primary{text-align:left}.stat-primary .stat-label{font-size:var(--font-size-sm);color:var(--color-text-neon-muted);display:block;margin-bottom:var(--space-xs)}.stat-primary .stat-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-accent-secondary)}.stat-secondary{text-align:right}.stat-secondary .stat-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-success)}.stat-secondary .stat-label{font-size:var(--font-size-sm);color:var(--color-text-neon-muted);display:block}.stat-comparison-line{font-size:var(--font-size-sm);color:var(--color-text-neon-muted);margin-bottom:var(--space-md)}.analytics-histogram{margin-bottom:var(--space-lg)}.histogram-title{font-size:var(--font-size-base);color:var(--color-text-neon-muted);margin-bottom:var(--space-sm)}.dotaxis-wrap{margin:14px 0 16px}.dotaxis-axis{position:relative;height:88px;margin:0 14px}.dotaxis-line{position:absolute;left:0;right:0;top:52px;height:2px;background:#ffffff1f;border-radius:2px}.dotaxis-tick{position:absolute;top:48px;width:1px;height:10px;background:#ffffff2e}.dotaxis-tick-label{position:absolute;top:64px;font-size:9px;color:#ffffff80;transform:translate(-50%);letter-spacing:.3px;font-weight:500}.dotaxis-marker{position:absolute;top:4px;bottom:18px;width:2px;background:linear-gradient(180deg,transparent,var(--color-cyan, #00d4ff) 30%,var(--color-cyan, #00d4ff) 80%,transparent);box-shadow:0 0 8px var(--color-cyan, #00d4ff),0 0 16px #00d4ff99}.dotaxis-marker-label{position:absolute;top:-4px;left:50%;transform:translate(-50%);background:var(--color-cyan, #00d4ff);color:#0a0a0e;font-family:var(--font-family-display, "Outfit", sans-serif);font-weight:900;font-size:12px;padding:3px 8px;border-radius:6px;box-shadow:0 0 14px #00d4ff99;white-space:nowrap}.dotaxis-dot{position:absolute;top:39px;width:26px;height:26px;border-radius:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center;font-family:var(--font-family-display, "Outfit", sans-serif);font-weight:900;font-size:12px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 0 0 3px var(--color-bg-primary, #0d0d12),0 4px 10px #0006;cursor:default}.dotaxis-dot--c1{background:linear-gradient(135deg,#ff6ec7,#d846a7)}.dotaxis-dot--c2{background:linear-gradient(135deg,#6e3bff,#4a25c8)}.dotaxis-dot--c3{background:linear-gradient(135deg,#ffd60a,#e6b800);color:#1a1a22;text-shadow:none}.dotaxis-dot--c4{background:linear-gradient(135deg,#00d4ff,#008abf)}.dotaxis-dot--correct{box-shadow:0 0 0 3px var(--color-bg-primary, #0d0d12),0 0 18px currentColor,0 4px 10px #0006}.dotaxis-dot--me{box-shadow:0 0 0 3px var(--color-bg-primary, #0d0d12),0 0 0 5px #ff9f4399,0 4px 10px #0006}.dotaxis-dot--correct.dotaxis-dot--me{box-shadow:0 0 0 3px var(--color-bg-primary, #0d0d12),0 0 0 5px #ff9f4399,0 0 22px currentColor,0 4px 10px #0006}.dotaxis-score{position:absolute;top:12px;transform:translate(-50%);font-family:var(--font-family-display, "Outfit", sans-serif);font-weight:800;font-size:11px;padding:2px 6px;border-radius:6px;background:#ffffff14;white-space:nowrap}.dotaxis-score--pos{background:#00d4ff2e;color:var(--color-cyan, #00d4ff)}.dotaxis-score--zero{color:#ffffff59}.dotaxis-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;font-size:11px;color:#ffffffbf;margin-top:4px}.dotaxis-legend-entry{display:inline-flex;align-items:center;gap:5px}.dotaxis-legend-dot{display:inline-block;width:11px;height:11px;border-radius:50%;flex-shrink:0}.dotaxis-legend-medal{font-size:13px;line-height:1}.dotaxis-legend-me{color:#ff9f43;font-weight:700;font-size:10px;margin-left:2px;letter-spacing:.3px}.histogram-bars{display:flex;justify-content:space-between;align-items:flex-end;height:120px;gap:var(--space-xs);padding:0 var(--space-xs)}.histogram-bar-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;animation:histogram-fade-in .3s ease forwards;opacity:0}.histogram-bar{width:100%;max-width:40px;background:linear-gradient(180deg,var(--color-accent-primary),var(--color-accent-brand));border-radius:var(--radius-sm) var(--radius-sm) 0 0;display:flex;align-items:flex-start;justify-content:center;transition:height .5s ease;min-height:0}.histogram-bar.is-correct{background:linear-gradient(180deg,var(--color-success-neon),var(--color-success));box-shadow:var(--glow-success)}.bar-count{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--color-text-white);padding-top:var(--space-xs)}.histogram-label{font-size:var(--font-size-xs);color:var(--color-text-neon-muted);margin-top:var(--space-xs)}@keyframes histogram-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.analytics-achievements{display:flex;flex-direction:column;gap:var(--space-sm);text-align:left}.achievement-item{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-sm);color:var(--color-text-white)}.achievement-emoji{font-size:var(--font-size-lg)}.achievement-label{color:var(--color-text-neon-muted)}.achievement-names{font-weight:var(--font-weight-semibold)}.achievement-value{color:var(--color-text-neon-muted)}.analytics-empty{text-align:center;color:var(--color-text-neon-muted);padding:var(--space-lg);font-style:italic}@media(prefers-reduced-motion:reduce){.histogram-bar-wrapper{animation:none;opacity:1}.histogram-bar{transition:none}}.reveal-emotion{text-align:center;font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-md);animation:reveal-emotion-entrance .5s ease-out}.reveal-emotion--exact{color:var(--color-success);text-shadow:0 0 20px var(--color-success)}.reveal-emotion--close{color:var(--color-warning);animation:reveal-emotion-entrance .5s ease-out,reveal-shake .5s ease-in-out .5s}.reveal-emotion--wrong{color:var(--color-text-muted)}.reveal-emotion--missed{color:var(--color-text-muted);opacity:.7}.reveal-emotion-subtitle{font-size:var(--font-size-base);font-weight:var(--font-weight-normal);margin-top:var(--space-xs);opacity:.8}@keyframes reveal-emotion-entrance{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes reveal-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}.confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--z-modal)}body>canvas[style*="position: fixed"]{pointer-events:none!important}.personal-result.is-delayed{opacity:0;animation:fade-in-delay .5s ease-out 1s forwards}@keyframes fade-in-delay{to{opacity:1}}@media(prefers-reduced-motion:reduce){.reveal-emotion,.reveal-emotion--close{animation:none}.personal-result.is-delayed{opacity:1;animation:none}}.personal-result{width:100%;background:var(--color-bg-card-alt);padding:var(--space-md);border-radius:var(--radius-lg);margin-bottom:var(--space-lg)}.result-header{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);margin-bottom:var(--space-sm)}.result-content{display:flex;flex-direction:column;gap:var(--space-sm)}.result-row{display:flex;justify-content:space-between;align-items:center}.result-label{font-size:var(--font-size-base);color:var(--color-text-muted)}.result-value{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.result-value.is-exact{color:var(--color-success)}.result-value.is-close{color:var(--color-warning)}.result-value.is-far{color:var(--color-error)}.result-value.is-bonus{color:var(--color-warning);font-weight:var(--font-weight-bold)}.result-score{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);color:var(--color-accent-brand);margin-top:var(--space-sm)}.result-missed{font-size:var(--font-size-md);color:var(--color-error);font-weight:var(--font-weight-semibold)}.result-value.is-streak{color:var(--color-error);font-weight:var(--font-weight-bold)}.streak-bonus-row{background:linear-gradient(90deg,var(--color-warning-light),#fde68a);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);margin:var(--space-sm) 0;color:#1a1a1a}.result-total{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-success);margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:2px dashed var(--color-border-light)}.streak-indicator{display:inline-flex;align-items:center;gap:2px;font-size:var(--font-size-sm);color:var(--color-warning);font-weight:var(--font-weight-semibold)}.streak-indicator:before{content:"\1f525"}.bet-container{margin-bottom:var(--space-md);position:relative;z-index:1}.bet-toggle{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-xl);background:var(--color-bg-card-alt);border:2px solid var(--color-border-medium);border-radius:var(--radius-lg);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);width:100%;justify-content:center;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}.bet-toggle:hover{border-color:var(--color-text-light)}.bet-toggle.is-active{background:var(--color-warning-light);border-color:var(--color-warning);color:#92400e}.bet-toggle.is-active .bet-icon{animation:dice-shake var(--transition-slow) ease}@keyframes dice-shake{0%,to{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}body.theme-dark .bet-toggle{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:var(--color-text-white)}body.theme-dark .bet-toggle.is-active{background:var(--color-warning);border-color:var(--color-warning);color:var(--color-text-primary)}.bet-won-row{background:linear-gradient(90deg,var(--color-success-light),#a7f3d0);padding:var(--space-sm) var(--space-sm);border-radius:var(--radius-md);margin:var(--space-sm) 0}.bet-won-row .result-label,body.theme-dark .bet-won-row .result-label{color:#166534}.result-value.is-bet-won,body.theme-dark .result-value.is-bet-won{color:#166534;font-weight:var(--font-weight-bold)}.bet-lost-row{background:linear-gradient(90deg,var(--color-error-light),#fecaca);padding:var(--space-sm) var(--space-sm);border-radius:var(--radius-md);margin:var(--space-sm) 0}.bet-lost-row .result-label,body.theme-dark .bet-lost-row .result-label{color:#991b1b}.result-value.is-bet-lost,body.theme-dark .result-value.is-bet-lost{color:#991b1b;font-weight:var(--font-weight-bold)}.result-missed-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-md)}.result-missed-icon{font-size:var(--font-size-2xl)}.result-missed-text{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-muted)}.streak-broken{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-error-light);border-radius:var(--radius-md)}.streak-broken-icon{font-size:var(--font-size-xl)}.streak-broken-text{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-error-dark)}.streak-shield-used{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-success-light);border-radius:var(--radius-md)}.streak-shield-icon{font-size:var(--font-size-xl)}.streak-shield-text{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-success-hover)}.result-score.is-zero{color:var(--color-text-light);font-size:var(--font-size-2xl)}.leaderboard-section{width:100%;background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);overflow:hidden}.leaderboard-section .section-header-collapsible{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-sm) var(--space-md);background:transparent;border:none;color:var(--color-text-white);font-size:.875rem;font-weight:600;cursor:pointer;text-align:left}.leaderboard-section .section-header-collapsible .section-icon{font-size:1rem}.leaderboard-section .section-header-collapsible .section-summary{margin-left:auto;font-size:.75rem;font-weight:400;color:var(--color-accent-secondary);background:#00f5ff1a;padding:2px 8px;border-radius:var(--radius-sm)}.leaderboard-section .section-header-collapsible .section-toggle{margin-left:var(--space-sm);font-size:.625rem;color:var(--color-text-neon-muted);transition:transform .2s ease}.leaderboard-section .section-content{padding:0}.leaderboard-section .leaderboard-list{max-height:200px;overflow-y:auto}.leaderboard-section.collapsed .section-content{display:none}.leaderboard-section:not(.collapsed) .section-toggle{transform:rotate(180deg)}.leaderboard{background:var(--color-bg-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;width:100%;margin-bottom:var(--space-md)}.leaderboard.is-compact .leaderboard-list{max-height:120px}.leaderboard.is-expanded .leaderboard-list{max-height:400px}.leaderboard.is-prominent{margin-top:var(--space-md)}.leaderboard.is-prominent .leaderboard-list{max-height:280px}.leaderboard-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) var(--space-md);background:var(--color-bg-card-alt);border-bottom:1px solid var(--color-border-light)}.leaderboard-title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary)}.leaderboard-toggle{background:none;border:none;cursor:pointer;padding:var(--space-xs);min-width:auto;min-height:auto;color:var(--color-text-muted)}.leaderboard-list{max-height:200px;overflow-y:auto;contain:layout style paint;will-change:transform}.leaderboard-spacer-top,.leaderboard-spacer-bottom{flex-shrink:0;pointer-events:none}.leaderboard-sentinel{flex-shrink:0;pointer-events:none;visibility:hidden}.leaderboard-entry{display:flex;align-items:center;gap:var(--space-sm);padding:10px var(--space-md);border-bottom:1px solid var(--color-bg-card-alt);transition:background var(--transition-fast);contain:content;height:48px;box-sizing:border-box}.leaderboard-entry:last-child{border-bottom:none}.leaderboard-entry.is-current{background:#eff6ff;border-left:3px solid var(--color-accent-blue)}.leaderboard-entry.is-top-1{background:linear-gradient(90deg,var(--color-warning-light),#fde68a)}.leaderboard-entry.is-top-1 .entry-rank{color:#b45309;font-weight:var(--font-weight-bold)}.leaderboard-entry.is-top-2{background:linear-gradient(90deg,var(--color-bg-card-alt),var(--color-border-light))}.leaderboard-entry.is-top-2 .entry-rank{color:var(--color-text-muted);font-weight:var(--font-weight-bold)}.leaderboard-entry.is-top-3{background:linear-gradient(90deg,#fed7aa,#fdba74)}.leaderboard-entry.is-top-3 .entry-rank{color:#c2410c;font-weight:var(--font-weight-bold)}.entry-rank{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);min-width:28px}.entry-name{flex:1;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text-primary);display:flex;align-items:center;gap:var(--space-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.entry-meta{display:flex;align-items:center;gap:var(--space-xs)}.entry-score{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--color-accent-brand);min-width:40px;text-align:right}.rank-up{font-size:var(--font-size-xs);color:var(--color-success);font-weight:var(--font-weight-semibold)}.rank-down{font-size:var(--font-size-xs);color:var(--color-error);font-weight:var(--font-weight-semibold)}.leaderboard-entry--climbing{animation:leaderboard-climb .4s ease-out}.leaderboard-entry--falling{animation:leaderboard-fall .4s ease-out}.leaderboard-entry--disconnected{opacity:.5;transition:opacity .3s ease}@keyframes leaderboard-climb{0%{transform:translateY(10px);opacity:.7;background:#0f83}to{transform:translateY(0);opacity:1;background:transparent}}@keyframes leaderboard-fall{0%{transform:translateY(-10px);opacity:.7;background:#ff004033}to{transform:translateY(0);opacity:1;background:transparent}}.streak-indicator{font-size:var(--font-size-xs);color:var(--color-warning)}.streak-indicator--hot{text-shadow:0 0 8px var(--color-warning);animation:streak-pulse 1s ease-in-out infinite}@keyframes streak-pulse{0%,to{opacity:1}50%{opacity:.7}}.leaderboard-separator{text-align:center;padding:var(--space-xs) var(--space-md);color:var(--color-text-muted);font-size:var(--font-size-sm);border-bottom:1px solid var(--color-bg-card-alt)}@media(prefers-reduced-motion:reduce){.leaderboard-entry--climbing,.leaderboard-entry--falling,.streak-indicator--hot{animation:none}}.leaderboard-you{position:sticky;bottom:0;padding:var(--space-sm) var(--space-md);background:var(--color-accent-blue);color:var(--color-text-white);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);text-align:center}.end-container{padding:var(--space-lg);max-width:480px;margin:0 auto;text-align:center}.end-header{margin-bottom:var(--space-lg)}.end-title{font-size:var(--font-size-4xl);font-weight:var(--font-weight-extrabold);color:var(--color-text-primary);margin-bottom:var(--space-sm)}.end-subtitle{font-size:var(--font-size-md);color:var(--color-text-muted);margin:0}.podium{display:flex;justify-content:center;align-items:flex-end;gap:var(--space-sm);margin-bottom:var(--space-xl)}.podium-place{display:flex;flex-direction:column;align-items:center;width:100px}.podium-medal{font-size:var(--font-size-4xl);margin-bottom:var(--space-sm)}.podium-name{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-xs);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.podium-score{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-sm)}.podium-stand{width:100%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-2xl);font-weight:var(--font-weight-extrabold);color:var(--color-text-white);border-radius:var(--radius-md) var(--radius-md) 0 0}.podium-1 .podium-stand{height:80px;background:linear-gradient(180deg,#fbbf24,var(--color-warning-dark))}.podium-2 .podium-stand{height:60px;background:linear-gradient(180deg,var(--color-text-light),var(--color-text-muted))}.podium-3 .podium-stand{height:40px;background:linear-gradient(180deg,#fb923c,#c2410c)}.your-result{background:#eff6ff;border-radius:var(--radius-xl);padding:var(--space-lg);margin-bottom:var(--space-lg)}.your-result-header{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-accent-blue);margin-bottom:var(--space-sm)}.your-result-rank{font-size:var(--font-size-2xl);font-weight:var(--font-weight-extrabold);color:var(--color-text-primary)}.your-result-score{font-size:var(--font-size-lg);color:var(--color-text-muted);margin-bottom:var(--space-md)}.your-result-stats{display:flex;justify-content:center;gap:var(--space-lg)}.stat{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-accent-brand)}.stat-label{font-size:var(--font-size-sm);color:var(--color-text-muted)}.final-leaderboard{background:var(--color-bg-white);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-lg);box-shadow:var(--shadow-md)}.final-leaderboard-header{padding:var(--space-sm) var(--space-md);background:var(--color-bg-card-alt);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-align:left}.final-leaderboard-list{max-height:200px;overflow-y:auto}.final-entry{display:flex;align-items:center;padding:10px var(--space-md);border-bottom:1px solid var(--color-bg-card-alt)}.final-entry:last-child{border-bottom:none}.final-entry.is-current{background:#eff6ff}.final-entry--disconnected{opacity:.5}.final-rank{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);width:32px}.final-name{flex:1;font-size:var(--font-size-base);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.final-score{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-accent-brand)}.end-admin-controls{display:flex;flex-direction:column;gap:var(--space-md);margin-bottom:var(--space-md)}.new-game-btn{width:100%;padding:var(--space-md) var(--space-xl);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-white);background:var(--color-success);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:background var(--transition-fast);min-width:auto;min-height:auto}.new-game-btn:hover{background:var(--color-success-hover)}.new-game-btn:disabled{background:var(--color-text-light);cursor:not-allowed}.end-player-message{color:var(--color-text-muted)}.end-player-message p{margin:0 0 var(--space-sm) 0}.end-hint{font-size:var(--font-size-base)}.rejoin-hint{font-size:var(--font-size-base);color:var(--color-text-muted);margin-top:var(--space-sm)}.reveal-report-row{display:flex;justify-content:center;margin-top:var(--space-md)}.reveal-report-btn{background:none;border:none;padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-sm);color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:color .15s ease,opacity .15s ease;opacity:.7}.reveal-report-btn:hover{color:var(--color-text-neon-muted);opacity:1}.reveal-report-btn:disabled{cursor:default;opacity:.5}.reveal-admin-controls{margin-top:var(--space-md)}.next-round-btn{padding:var(--space-md) var(--space-xl);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-white);background:var(--color-accent-brand);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast)}.next-round-btn:hover{background:var(--color-accent-brand-hover)}.next-round-btn:disabled{background:var(--color-text-light);cursor:not-allowed}.next-round-btn.is-final{background:var(--color-success)}.next-round-btn.is-final:hover{background:var(--color-success-hover)}.reveal-admin-buttons{display:flex;flex-direction:column;gap:var(--space-md);align-items:center}@media(min-width:480px){.reveal-admin-buttons{flex-direction:row;justify-content:center}}.invite-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--color-text-white);background:var(--color-bg-tertiary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);min-height:44px;min-width:44px}.invite-btn:hover{background:var(--color-bg-secondary);border-color:var(--color-border-neon)}.invite-btn:active{transform:scale(.98)}.invite-btn-icon{font-size:var(--font-size-lg)}.invite-btn-label{white-space:nowrap}.invite-modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center}.invite-modal.hidden{display:none}.invite-modal-backdrop{position:absolute;inset:0;background:#000c}.invite-modal-content{position:relative;background:var(--color-bg-primary);border:1px solid var(--color-border-neon);padding:var(--space-lg);border-radius:var(--radius-xl);text-align:center;max-width:90vw;max-height:90vh;overflow-y:auto;animation:modalFadeIn var(--transition-normal) ease-out}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.invite-modal-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-white);margin:0 0 var(--space-xs)}.invite-modal-hint{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:0 0 var(--space-md)}.invite-modal-code{display:inline-block;padding:var(--space-md);background:var(--color-bg-white);border-radius:var(--radius-md);margin-bottom:var(--space-md)}.invite-modal-code img{display:block;width:200px;height:200px}@media(min-width:480px){.invite-modal-code img{width:256px;height:256px}}.invite-modal-url-container{display:flex;gap:var(--space-xs);margin-bottom:var(--space-sm);max-width:100%}.invite-modal-url{flex:1;padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);font-family:var(--font-family-mono);color:var(--color-text-primary);background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);min-width:0;text-overflow:ellipsis}body.theme-dark .invite-modal-url{color:#e2e8f0;background:#ffffff1a;border-color:#ffffff26}.invite-copy-btn{display:flex;align-items:center;justify-content:center;padding:var(--space-sm);min-width:44px;min-height:44px;background:var(--color-accent-brand);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.invite-copy-btn:hover{background:var(--color-accent-brand-hover)}.invite-copy-btn:active{transform:scale(.95)}.invite-copy-icon{font-size:var(--font-size-lg)}.invite-copy-feedback{font-size:var(--font-size-sm);color:var(--color-success);margin:0 0 var(--space-md);animation:fadeInOut 2s ease-in-out}.invite-copy-feedback.hidden{display:none}@keyframes fadeInOut{0%,to{opacity:0}10%,80%{opacity:1}}.invite-modal-close{min-width:120px;min-height:48px}.reveal-results-cards{margin-top:var(--space-lg);width:100%;overflow:visible}.results-cards-header{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);margin-bottom:var(--space-sm);text-align:center}.results-cards-scroll{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--space-sm);width:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:var(--space-xs);-webkit-overflow-scrolling:touch}.results-cards-scroll::-webkit-scrollbar{height:3px}.results-cards-scroll::-webkit-scrollbar-thumb{background:var(--color-border-light);border-radius:2px}.result-card{background:var(--color-bg-card);border-radius:var(--radius-md);padding:var(--space-sm);text-align:center;border:2px solid var(--color-border-light);transition:all var(--transition-fast);flex:1 1 140px;min-width:140px;max-width:220px;box-sizing:border-box}.result-card.is-current{border-color:var(--color-accent-brand);background:#6366f11a}.result-card.is-score-high{border-color:var(--color-success);background:#10b9811a}.result-card.is-score-medium{border-color:var(--color-warning);background:#f59e0b1a}.result-card.is-score-zero{opacity:.6}.card-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.card-guess{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.card-accuracy{font-size:var(--font-size-xs);color:var(--color-text-muted)}.result-card.is-score-high .card-accuracy{color:var(--color-success);font-weight:var(--font-weight-semibold)}.card-score{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-success);margin-top:2px}.card-bet{margin-left:4px}body.theme-dark .result-card{background:#ffffff0d;border-color:#ffffff1a}body.theme-dark .result-card.is-current{border-color:var(--color-accent-neon);background:#00f5ff1a}body.theme-dark .result-card.is-score-high{border-color:var(--color-success-neon);background:#00ff881a}body.theme-dark .result-card.is-score-medium{border-color:var(--color-warning);background:#f59e0b26}body.theme-dark .card-name,body.theme-dark .card-guess{color:var(--color-text-white)}body.theme-dark .card-accuracy{color:var(--color-text-neon-muted)}body.theme-dark .result-card.is-score-high .card-accuracy,body.theme-dark .card-score{color:var(--color-success-neon)}.admin-control-bar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;padding:var(--space-sm) var(--space-sm);padding-bottom:calc(var(--space-sm) + env(safe-area-inset-bottom));background:#000000e6;border-top:1px solid var(--color-border-dark);z-index:var(--z-control-bar)}.admin-control-bar.hidden{display:none}.control-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:var(--space-sm) var(--space-sm);background:#2a2a2a;border:none;border-radius:var(--radius-md);color:var(--color-text-white);cursor:pointer;transition:background var(--transition-fast),opacity var(--transition-fast)}.control-btn:hover:not(.is-disabled){background:#3a3a3a}.control-btn:active:not(.is-disabled){background:#4a4a4a}.control-btn.is-disabled{opacity:.4;cursor:not-allowed}.control-btn--danger{background:#7f1d1d}.control-btn--danger:hover:not(.is-disabled){background:#991b1b}.control-btn.is-stopped{background:var(--color-text-secondary);opacity:.7}.control-btn.is-stopped .control-icon{color:var(--color-success)}.volume-indicator{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#000000e6;color:var(--color-text-white);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-sm);opacity:0;transition:opacity var(--transition-normal);pointer-events:none;white-space:nowrap}.volume-indicator.is-visible{opacity:1}.control-btn.is-at-limit{opacity:.5}.control-btn.is-at-limit:active{transform:none}.control-icon{font-size:var(--font-size-xl);line-height:1}.control-icon.is-countdown{font-variant-numeric:tabular-nums;font-weight:700;min-width:1.5em;text-align:center}.control-label{font-size:var(--font-size-xs);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}.has-control-bar .game-container,.has-control-bar .reveal-container,.has-control-bar .end-container{padding-bottom:140px}.reaction-bar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;padding:var(--space-sm);padding-bottom:calc(var(--space-sm) + env(safe-area-inset-bottom));z-index:var(--z-reaction-bar);pointer-events:none}main:has(.admin-control-bar:not(.hidden)) .reaction-bar{bottom:70px}.reaction-bar.hidden{display:none}.reaction-bar-container{display:flex;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:#0009;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:auto}.reaction-btn{font-size:1.5rem;padding:var(--space-sm);min-width:44px;min-height:44px;background:#1e1e2880;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);cursor:pointer;transition:transform var(--transition-fast),background var(--transition-fast)}.reaction-btn:hover{background:#32323cb3}.reaction-btn:active{transform:scale(.9)}.reaction-btn:disabled{cursor:default;opacity:.45}.reaction-btn.is-used{opacity:1;border-color:var(--color-accent-primary);box-shadow:0 0 12px var(--color-accent-primary)}@media(hover:none){.reaction-btn:active{box-shadow:0 0 15px var(--color-accent-primary)}}@media(prefers-reduced-motion:reduce){.reaction-btn{transition:none}.reaction-btn:active{transform:none}}.reaction-container{position:fixed;bottom:120px;left:0;right:0;pointer-events:none;z-index:99}main:has(.admin-control-bar:not(.hidden)) .reaction-container{bottom:180px}.reaction-bubble{position:absolute;font-size:1rem;font-weight:600;color:var(--color-text-white);text-shadow:0 0 8px var(--color-accent-primary);animation:reaction-float 3s ease-out forwards;white-space:nowrap}@keyframes reaction-float{0%{opacity:1;transform:translateY(0)}70%{opacity:1}to{opacity:0;transform:translateY(calc(-50vh + 60px))}}@media(prefers-reduced-motion:reduce){.reaction-bubble{animation:none;opacity:1}}.paused-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-2xl) var(--space-lg);min-height:60vh;text-align:center}.paused-icon{font-size:var(--font-size-hero);margin-bottom:var(--space-lg);animation:pause-pulse 2s infinite}@keyframes pause-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.95)}}.paused-container h1{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-md)}.paused-container>p{font-size:var(--font-size-md);color:var(--color-text-muted);margin-bottom:var(--space-sm)}.paused-spinner{margin:var(--space-xl) 0}.paused-hint{font-size:var(--font-size-base);color:var(--color-text-light)}.reconnecting-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:var(--z-overlay)}.reconnecting-overlay.hidden{display:none}.reconnecting-content{text-align:center;color:var(--color-text-white)}.reconnecting-spinner .spinner{border-top-color:var(--color-text-white);width:48px;height:48px;margin:0 auto var(--space-md)}.reconnect-status{font-size:var(--font-size-md);color:var(--color-border-light)}.connection-lost-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-2xl) var(--space-lg);min-height:60vh;text-align:center}.connection-lost-icon{font-size:var(--font-size-hero);margin-bottom:var(--space-lg)}.connection-lost-container h1{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-md)}.connection-lost-container>p{font-size:var(--font-size-md);color:var(--color-text-muted);margin-bottom:var(--space-lg)}.connection-lost-hint{font-size:var(--font-size-base);color:var(--color-text-light);margin-top:var(--space-md)}@media(max-width:360px){.correct-year{font-size:var(--font-size-year)}.reveal-album-cover{width:120px;height:120px}}@media(min-width:768px){.reveal-album-cover{width:180px;height:180px}.correct-year{font-size:84px}}:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px}body.theme-dark :focus-visible{outline-color:var(--color-accent-primary);box-shadow:0 0 0 4px #ff2d6a4d}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media(prefers-color-scheme:light){body:not(.theme-dark){--color-bg-primary: #ffffff;--color-bg-surface: #f5f5f7;--color-bg-card: #ffffff;--color-bg-card-alt: #f8fafc;--color-text-primary: #1a1a1a;--color-text-muted: #666666;--color-text-light: #999999;--color-border-light: #e5e7eb}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-40px;left:0;background:var(--color-accent-primary);color:var(--color-text-white);padding:var(--space-sm) var(--space-md);z-index:var(--z-modal);transition:top var(--transition-fast)}.skip-link:focus{top:0}body.energy-calm .btn-glow:hover{box-shadow:none}body.energy-calm .wordmark-hero{text-shadow:none}body.energy-warmup .player-card{animation:energy-slide-in .3s ease-out}body.energy-warmup .qr-container{animation:energy-pulse-subtle 3s ease-in-out infinite}@keyframes energy-slide-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes energy-pulse-subtle{0%,to{opacity:1}50%{opacity:.85}}body.energy-party .album-cover{box-shadow:0 0 60px #ffffff1a}body.energy-party .submit-btn:not(:disabled){box-shadow:var(--glow-primary)}body.energy-party .year-display{text-shadow:0 0 20px rgba(255,45,106,.3)}.view{animation:screen-fade-in .3s ease-out}@keyframes screen-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){body.energy-warmup .player-card,body.energy-warmup .qr-container,.view{animation:none}}.steal-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);width:100%;padding:var(--space-sm) var(--space-md);margin-top:var(--space-sm);background:linear-gradient(135deg,var(--color-purple-primary, #8b5cf6),var(--color-purple-secondary, #7c3aed));border:none;border-radius:var(--radius-lg);color:var(--color-text-white);font-size:var(--font-size-base);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;box-shadow:0 0 20px #8b5cf666;transition:all var(--transition-fast)}.steal-btn:hover:not(:disabled){transform:scale(1.03);box-shadow:0 0 30px #8b5cf699}.steal-btn:disabled{opacity:.5;cursor:not-allowed}.steal-btn-icon{font-size:var(--font-size-lg)}.steal-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal)}.steal-modal-backdrop{position:absolute;inset:0;background:#000c;backdrop-filter:blur(4px)}.steal-modal-content{position:relative;background:var(--color-bg-card);border:2px solid var(--color-purple-primary, #8b5cf6);border-radius:var(--radius-xl);padding:var(--space-lg);max-width:320px;width:90%;text-align:center;box-shadow:0 0 40px #8b5cf64d}.steal-modal-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-xs)}.steal-modal-subtitle{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-md)}.steal-target-list{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-md)}.steal-target-btn{display:block;width:100%;padding:var(--space-sm) var(--space-md);background:var(--color-bg-surface);border:1px solid var(--color-accent-secondary);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast)}.steal-target-btn:hover{background:var(--color-accent-secondary);color:var(--color-bg-primary);transform:scale(1.02)}.steal-no-targets{color:var(--color-text-muted);font-size:var(--font-size-sm);padding:var(--space-md)}.steal-modal-cancel{width:100%}.steal-confirmation{position:fixed;bottom:calc(var(--space-xl) + 60px);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-sm);background:linear-gradient(135deg,var(--color-purple-primary, #8b5cf6),var(--color-purple-secondary, #7c3aed));color:var(--color-text-white);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);font-weight:var(--font-weight-semibold);box-shadow:0 4px 20px #8b5cf680;animation:steal-toast-in .3s ease-out;z-index:var(--z-tooltip)}@keyframes steal-toast-in{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.steal-confirmation-icon{font-size:var(--font-size-lg)}.steal-badge{display:inline-flex;align-items:center;gap:var(--space-xs);background:#8b5cf633;border:1px solid var(--color-purple-primary, #8b5cf6);border-radius:var(--radius-full);padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs);color:var(--color-purple-primary, #8b5cf6);margin-top:var(--space-xs)}.steal-badge-icon{font-size:.9em}.steal-badge-victim{background:#ef444433;border-color:var(--color-error);color:var(--color-error)}body.theme-dark .steal-modal-content{background:var(--color-bg-card)}body.theme-dark .steal-target-btn{background:#ffffff0d;border-color:var(--color-accent-secondary)}body.theme-dark .steal-target-btn:hover{background:var(--color-accent-secondary);color:var(--color-bg-primary)}@media(prefers-reduced-motion:reduce){.stat-badge--steal,.steal-confirmation{animation:none}}.intro-splash-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal)}.intro-splash-modal-backdrop{position:absolute;inset:0;background:#000c;backdrop-filter:blur(4px)}.intro-splash-modal-content{position:relative;background:var(--color-bg-card);border:2px solid var(--color-accent-primary, #1db954);border-radius:var(--radius-xl);padding:var(--space-lg);max-width:400px;width:90%;text-align:center;box-shadow:0 0 40px #1db9544d}.intro-splash-modal-emoji{font-size:3rem;margin-bottom:var(--space-sm)}.intro-splash-modal-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-xs)}.intro-splash-modal-desc{font-size:var(--font-size-base);color:var(--color-text-secondary);margin-bottom:var(--space-md)}.intro-splash-modal-waiting{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-sm)}.intro-splash-confirm-btn{width:100%;margin-top:var(--space-sm)}.score-animating{font-variant-numeric:tabular-nums}@keyframes score-pop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.score-pop{animation:score-pop .7s ease-out;display:inline-block}@keyframes score-shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.score-shake{animation:score-shake .4s ease-out;display:inline-block}@keyframes score-flash-red{0%,to{color:inherit}50%{color:var(--color-error)}}.score-flash-red{animation:score-flash-red .4s ease-out}@keyframes score-glow-gold{0%,to{text-shadow:0 0 0 transparent;color:inherit}50%{text-shadow:0 0 20px #ffd700,0 0 40px #ffd700;color:gold}}.score-glow-gold{animation:score-glow-gold .8s ease-out;display:inline-block}@keyframes score-burst{0%{transform:scale(1);text-shadow:0 0 0 transparent}30%{transform:scale(1.4);text-shadow:0 0 30px #ff6600}to{transform:scale(1);text-shadow:0 0 0 transparent}}.score-burst{animation:score-burst .7s ease-out;display:inline-block}@keyframes popup-float{0%{opacity:0;transform:translate(-50%)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-30px)}}.points-popup{position:fixed;z-index:var(--z-toast);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-success);pointer-events:none;animation:popup-float 1s ease-out forwards;transform:translate(-50%)}.points-popup--gold{color:gold;text-shadow:0 0 10px #ffd700}.points-popup--streak{color:#f60;text-shadow:0 0 10px #ff6600;font-size:var(--font-size-xl)}.leaderboard-entry--slide-up{animation:leaderboard-slide-up .5s ease-out}@keyframes leaderboard-slide-up{0%{transform:translateY(10px);background:#00ff884d}to{transform:translateY(0);background:transparent}}.leaderboard-entry--slide-down{animation:leaderboard-slide-down .5s ease-out}@keyframes leaderboard-slide-down{0%{transform:translateY(-10px);opacity:.6}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.score-pop,.score-shake,.score-glow-gold,.score-burst,.score-flash-red{animation:none!important}.points-popup{animation:none!important;display:none!important}.leaderboard-entry--slide-up,.leaderboard-entry--slide-down{animation:none!important}}body.device-tier-low .leaderboard-entry--climbing,body.device-tier-low .leaderboard-entry--falling,body.device-tier-low .leaderboard-entry--slide-up,body.device-tier-low .leaderboard-entry--slide-down{animation:none!important}body.device-tier-low .neon-glow,body.device-tier-low .btn-glow:hover{box-shadow:none!important}body.device-tier-low .score-pop,body.device-tier-low .score-shake,body.device-tier-low .score-glow-gold,body.device-tier-low .score-burst{animation:none!important}body.device-tier-low .points-popup{display:none!important}body.device-tier-medium .leaderboard-entry--climbing,body.device-tier-medium .leaderboard-entry--falling{animation-duration:.2s!important}body.device-tier-medium .neon-glow{animation:none!important}body.device-tier-medium .score-pop,body.device-tier-medium .score-shake,body.device-tier-medium .score-glow-gold,body.device-tier-medium .score-burst{animation-duration:.2s!important}.reveal-skip-hint{position:absolute;bottom:var(--space-md);left:50%;transform:translate(-50%);font-size:var(--font-size-sm);color:var(--color-text-muted);opacity:0;animation:fadeInDelayed .3s ease-out 1s forwards}@keyframes fadeInDelayed{to{opacity:.6}}@media(prefers-reduced-motion:reduce){.reveal-skip-hint{animation:none;opacity:.6}}body.device-tier-low .reveal-skip-hint{animation:none;opacity:.6}.request-btn{margin-top:var(--space-md);gap:var(--space-xs)}.requests-list{display:flex;flex-direction:column;gap:var(--space-sm)}.request-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--color-surface-raised);border-radius:var(--radius-md);border:1px solid var(--color-border)}.request-item-thumbnail{width:40px;height:40px;min-width:40px;min-height:40px;max-width:40px;max-height:40px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}.request-item-thumbnail-placeholder{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:var(--radius-sm);background:var(--color-surface);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}.request-item-info{flex:1;min-width:0}.request-item-name{font-weight:600;font-size:var(--font-size-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.request-item-meta{font-size:var(--font-size-sm);color:var(--color-text-muted)}.request-status{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;white-space:nowrap}.request-status--pending{background:#ffc10726;color:#ffc107}.request-status--ready{background:#4caf5026;color:#4caf50}.request-status--installed{background:transparent;color:#4caf50;border:1px solid #4caf50}.request-status--declined{background:#f4433626;color:#f44336}.request-update-btn{font-size:var(--font-size-xs);padding:6px 12px;white-space:nowrap}.text-input{width:100%;padding:var(--space-sm) var(--space-md);font-size:var(--font-size-base);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);transition:border-color .15s ease}.text-input:focus{outline:none;border-color:var(--color-primary)}.text-input.input-error{border-color:var(--color-error)}.info-box{background:var(--color-surface-raised);border-radius:var(--radius-md);padding:var(--space-md);margin-top:var(--space-md)}.info-box-title{font-weight:600;margin-bottom:var(--space-xs);color:var(--color-text-muted)}.info-box-list{margin:0;padding-left:0;list-style-position:inside;font-size:var(--font-size-sm);color:var(--color-text-muted)}.info-box-list li{margin-bottom:var(--space-xs)}.info-box-list li:last-child{margin-bottom:0}.info-box-note{margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-text-muted)}.modal-content--success{text-align:center}.success-icon{font-size:3rem;margin-bottom:var(--space-sm)}.success-playlist-name{font-weight:600;font-size:var(--font-size-lg);margin-bottom:var(--space-xs)}.success-estimate{color:var(--color-text-muted);font-size:var(--font-size-sm)}.btn--loading{position:relative;color:transparent!important;pointer-events:none}.btn--loading:after{content:"";position:absolute;width:16px;height:16px;top:50%;left:50%;margin-left:-8px;margin-top:-8px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.share-container{margin:1.5rem 0;text-align:center}.share-header{font-size:1.2rem;font-weight:700;margin-bottom:1rem;color:var(--text-primary, #fff)}.share-card-preview{margin:12px auto;max-width:360px;width:100%;border-radius:16px;overflow:hidden;box-shadow:0 12px 36px #00000080,0 0 0 1px #ff2d6a40;background:#0a0a12}.share-card-image{display:block;width:100%;height:auto;aspect-ratio:1 / 1}.share-buttons{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.share-btn{padding:.6rem 1.2rem;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;background:var(--accent-color, #e94560);color:#fff;transition:opacity .2s,transform .1s}.share-btn:hover{opacity:.9}.share-btn:active{transform:scale(.97)}.share-toast{margin-top:.75rem;padding:.4rem 1rem;background:var(--success-color, #4caf50);color:#fff;border-radius:20px;display:inline-block;font-size:.85rem;font-weight:600;animation:shareToastIn .3s ease}@keyframes shareToastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.admin-share-player-tabs{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-bottom:.75rem}.admin-share-tab{padding:.3rem .85rem;border-radius:20px;border:1px solid var(--color-border-light);background:transparent;color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer;transition:all .15s ease}.admin-share-tab:hover{border-color:var(--color-accent-brand);color:var(--color-accent-brand)}.admin-share-tab.active{background:var(--color-accent-brand);border-color:var(--color-accent-brand);color:#fff;font-weight:var(--font-weight-semibold)}@media(max-width:480px){.share-buttons{flex-direction:column;align-items:center}.share-btn{width:100%;max-width:280px}.share-card-preview{max-width:320px}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton{background:linear-gradient(90deg,var(--color-bg-card) 25%,#3a3a4e 50%,var(--color-bg-card) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}.skeleton-list{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-sm) 0}.skeleton-row{height:48px;width:100%}.skeleton-card{height:64px;width:100%}.player-header{position:relative}.connection-indicator{position:absolute;top:50%;right:var(--space-md);transform:translateY(-50%);display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .3s ease}.connection-indicator--disconnected{opacity:1}.connection-dot{width:8px;height:8px;border-radius:50%;background:var(--color-error, #e94560);animation:pulse-dot 1.2s infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.party-lights-picker{margin-top:12px}.party-lights-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.85rem;color:var(--text-secondary, #aaa)}.party-lights-count{font-weight:500}.btn-link{background:none;border:none;color:var(--accent, #ff00ff);cursor:pointer;font-size:.85rem;padding:4px 8px}.btn-link:hover{text-decoration:underline}.party-lights-list{max-height:240px;overflow-y:auto;border-radius:8px;background:var(--card-bg, rgba(255,255,255,.05));margin-bottom:12px}.party-light-item{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border, rgba(255,255,255,.08));min-height:44px}.party-light-item:last-child{border-bottom:none}.party-light-item:hover{background:#ffffff08}.party-light-item input[type=checkbox]{width:18px;height:18px;flex-shrink:0;accent-color:var(--accent, #ff00ff)}.light-status{font-size:.75rem;flex-shrink:0}.light-name{flex:1;font-size:.9rem;color:var(--text-primary, #fff);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.light-cap-badge{font-size:.7rem;padding:2px 6px;border-radius:4px;background:#ffffff1a;color:var(--text-secondary, #aaa);flex-shrink:0;font-weight:500}.setting-row--vertical{flex-direction:column;align-items:flex-start;gap:var(--space-sm, 8px)}.wled-presets-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-xs, 4px) var(--space-sm, 8px);width:100%}.wled-preset-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs, 4px);font-size:.8rem;color:var(--text-secondary, #aaa)}.wled-preset-item .input-sm{width:48px;padding:2px 4px;border:1px solid rgba(255,255,255,.15);border-radius:4px;background:#ffffff0d;color:var(--text-primary, #fff);font-size:.8rem;text-align:center}.admin-game-wrapper{max-width:480px;margin:0 auto}.admin-phase-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.round-badge{font-weight:600;font-size:1rem}.timer-badge{font-size:1.2rem;font-weight:700;font-variant-numeric:tabular-nums;min-width:3em;text-align:center}.timer-badge.timer-warning{color:var(--color-warning, #f59e0b)}.timer-badge.timer-critical{color:var(--color-danger, #ef4444);animation:pulse-critical .5s ease-in-out infinite alternate}@keyframes pulse-critical{0%{opacity:1}to{opacity:.5}}.admin-song-card{display:flex;align-items:center;gap:var(--space-md);background:var(--color-bg-card);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-md)}.admin-album-art{width:64px;height:64px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}.admin-song-meta{min-width:0}.admin-song-title{font-weight:600;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-song-artist{color:var(--text-secondary, #aaa);font-size:.9rem}.admin-song-details{text-align:center;margin-bottom:var(--space-sm, 8px)}.admin-song-year{font-size:.95rem;color:var(--color-primary, #1db954);font-weight:600}.admin-song-funfact{font-size:.85rem;color:var(--text-secondary, #aaa);font-style:italic;margin-top:4px;line-height:1.3}.admin-playing-banner{display:flex;align-items:center;gap:var(--space-sm, 8px);padding:var(--space-sm, 8px) var(--space-md, 16px);background:var(--bg-card, rgba(255, 255, 255, .05));border-bottom:2px solid var(--color-primary, #1db954);font-size:.9rem}.admin-playing-banner-icon{font-size:1.1rem;flex-shrink:0}.admin-playing-banner-text{flex:1;min-width:0}.admin-playing-banner-btn{flex-shrink:0;font-size:.8rem;padding:4px 10px;border-radius:var(--radius-sm, 8px)}.idle-halt-banner{display:flex;align-items:center;gap:var(--space-sm, 8px);margin:var(--space-md, 16px) auto;padding:var(--space-sm, 8px) var(--space-md, 16px);background:var(--bg-card, rgba(255, 255, 255, .06));border:1px solid var(--color-warning, #f5a623);border-radius:var(--radius-md, 12px);color:var(--color-warning, #f5a623);font-size:.9rem;line-height:1.35;max-width:540px}.idle-halt-icon{font-size:1.2rem;flex-shrink:0}.admin-pause-recovery{margin:var(--space-md, 16px);padding:var(--space-md, 16px) var(--space-lg, 20px);background:var(--bg-card, rgba(255, 255, 255, .06));border:2px solid var(--color-warning, #f5a623);border-radius:var(--radius-md, 12px)}.admin-pause-recovery-header{display:flex;align-items:center;gap:var(--space-sm, 8px);margin-bottom:var(--space-sm, 8px)}.admin-pause-recovery-icon{font-size:1.3rem;flex-shrink:0}.admin-pause-recovery-title{font-size:1rem;color:var(--color-warning, #f5a623)}.admin-pause-recovery-message{font-size:.95rem;line-height:1.4;margin:0 0 var(--space-sm, 8px) 0;color:var(--text-primary, #ffffff)}.admin-pause-recovery-detail{font-size:.8rem;line-height:1.3;margin:0 0 var(--space-md, 16px) 0;color:var(--text-secondary, rgba(255, 255, 255, .6));font-family:var(--font-monospace, monospace);word-break:break-word}.admin-pause-recovery-detail.hidden{display:none}.admin-pause-recovery-actions{display:flex;gap:var(--space-sm, 8px);flex-wrap:wrap}.admin-pause-recovery-actions .btn{flex:1;min-width:120px}.admin-personal-result-card{display:flex;flex-direction:column;gap:var(--space-xs, 4px)}.admin-personal-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xs, 4px) 0}.admin-personal-label{color:var(--text-secondary, #aaa);font-size:.9rem}.admin-personal-value{font-weight:600;font-size:1rem}.admin-personal-score{color:var(--color-primary, #1db954);font-size:1.1rem}.artist-option--readonly{padding:10px 14px;background:var(--bg-card, rgba(255, 255, 255, .05));border:1px solid var(--color-border-dark, rgba(255, 255, 255, .1));border-radius:var(--radius-md, 12px);text-align:center;font-size:.9rem;opacity:.8}.admin-intro-splash{text-align:center;padding:var(--space-md);margin-bottom:var(--space-md);background:var(--bg-card, rgba(255, 255, 255, .05));border-radius:var(--radius-md, 12px);border:1px solid var(--color-primary, #1db954)}.intro-splash-info{font-size:1.1rem;font-weight:600;margin-bottom:var(--space-sm)}.intro-splash-icon{margin-right:6px}.btn-compact{padding:8px 12px;font-size:.85rem}.admin-player-panel{background:var(--color-bg-card);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-md)}.admin-year-selector{text-align:center;margin-bottom:var(--space-md)}.admin-year-selector .year-display{display:block;font-size:2.5rem;font-weight:700;margin-bottom:var(--space-sm);font-variant-numeric:tabular-nums}.admin-year-selector .year-slider{width:100%;margin-bottom:var(--space-xs)}.year-range-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-secondary, #aaa)}.last-round-banner{text-align:center;padding:var(--space-sm);background:var(--color-warning, #f59e0b);color:#000;border-radius:var(--radius-sm);font-weight:600;margin-bottom:var(--space-md)}.submission-status{text-align:center;color:var(--text-secondary, #aaa);font-size:.9rem;margin-top:var(--space-sm)}.submission-count{margin-bottom:6px}.submission-players{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.submission-player{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:12px;font-size:.8rem;background:var(--bg-card, rgba(255, 255, 255, .05))}.submission-player.is-submitted{color:var(--color-primary, #1db954)}.submission-player.is-waiting{opacity:.6}.reveal-year-display{font-size:2.5rem;font-weight:700;text-align:center;margin:var(--space-md) 0;color:var(--color-primary, #1db954)}.admin-personal-result{display:flex;justify-content:space-between;align-items:center;background:var(--color-bg-card);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-md)}.score-badge{font-weight:700;color:var(--color-primary, #1db954)}.admin-leaderboard-container{margin-bottom:var(--space-md)}.admin-leaderboard{width:100%;border-collapse:collapse}.admin-leaderboard th{text-align:left;font-weight:600;padding:var(--space-xs) var(--space-sm);border-bottom:1px solid var(--color-border-light);font-size:.85rem;color:var(--text-secondary, #aaa)}.admin-leaderboard td{padding:var(--space-xs) var(--space-sm)}.admin-leaderboard tr.admin-highlight td{font-weight:600;color:var(--color-primary, #1db954)}.admin-winner-display{text-align:center;font-size:1.3rem;font-weight:600;padding:var(--space-lg) 0}.winner-trophy{font-size:2rem}.admin-end-actions{display:flex;gap:var(--space-sm);justify-content:center;margin-top:var(--space-md)}body.wizard-active>.admin-header,body.wizard-active>main.admin-content,body.wizard-active>.pwa-ios-hint{display:none}.wizard-takeover{position:fixed;inset:0;z-index:var(--z-overlay, 1100);background:var(--color-bg-primary);display:flex;flex-direction:column;overflow:hidden}.wizard-takeover.hidden{display:none}.wiz-bg{position:absolute;inset:0;background:radial-gradient(ellipse at top,rgba(255,45,106,.18),transparent 55%),radial-gradient(ellipse at bottom right,rgba(0,245,255,.12),transparent 40%);pointer-events:none}.wiz-top{padding:var(--space-md) var(--space-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);border-bottom:1px solid var(--color-border-neon);position:relative;z-index:1}.wiz-step-count{font-family:var(--font-display);font-weight:600;font-size:var(--font-size-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-dim, #6b6b7a);flex:1;text-align:center}.wiz-skip{font-family:var(--font-display);font-size:var(--font-size-sm);color:var(--color-text-neon-muted);background:none;border:none;font-weight:500;cursor:pointer;padding:var(--space-xs) var(--space-sm)}.wiz-skip:hover{color:var(--color-text-white)}.wiz-progress{display:flex;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);position:relative;z-index:1}.wiz-seg{flex:1;height:3px;background:var(--color-dark-surface);border-radius:var(--radius-full);overflow:hidden}.wiz-seg.filled{background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));box-shadow:0 0 12px #ff2d6a80}.wiz-seg.active .wiz-seg-inner{height:100%;width:60%;background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));box-shadow:0 0 12px #ff2d6a80;border-radius:var(--radius-full)}.wiz-frame{flex:1;overflow-y:auto;position:relative;z-index:1}.wiz-frame[hidden]{display:none}.wiz-body{padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md);max-width:720px;margin:0 auto}.wiz-eyebrow{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-secondary)}.wiz-title{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-3xl);line-height:1.15;letter-spacing:-.01em;color:var(--color-text-white)}.wiz-sub{color:var(--color-text-neon-muted);font-size:var(--font-size-base);line-height:1.5}.wiz-hint{font-size:var(--font-size-sm);margin-top:var(--space-xs)}.wiz-hint a{color:var(--color-accent-secondary);text-decoration:underline}.wiz-list{display:flex;flex-direction:column;gap:var(--space-sm)}.wiz-row{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition-fast);color:var(--color-text-white);text-align:left;width:100%;font-family:var(--font-body)}.wiz-row:hover{background:var(--color-dark-surface-hover)}.wiz-row.selected{background:linear-gradient(90deg,#ff2d6a26,#00f5ff0d);border-color:var(--color-accent-primary);box-shadow:0 0 14px #ff2d6a40}.wiz-row-avatar{width:36px;height:36px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-brand));flex-shrink:0;display:grid;place-items:center;color:var(--color-bg-primary)}.wiz-row-avatar-icon{width:20px;height:20px}.wiz-row-text{flex:1;min-width:0}.wiz-row-name{font-family:var(--font-display);font-weight:600;font-size:var(--font-size-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wiz-row-sub{font-size:var(--font-size-xs);color:var(--color-text-neon-muted);margin-top:2px}.wiz-row-check{color:var(--color-success-neon);text-shadow:var(--glow-success)}.wiz-provider-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.wiz-provider-chip{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);font-family:var(--font-display);font-weight:600;font-size:var(--font-size-base);cursor:pointer;color:var(--color-text-white);transition:var(--transition-fast)}.wiz-provider-chip:hover{background:var(--color-dark-surface-hover)}.wiz-provider-chip.active{border-color:var(--color-accent-primary);box-shadow:0 0 14px #ff2d6a40}.wiz-provider-chip.connected{border-color:var(--color-success-neon);background:#39ff141a}.wiz-provider-chip{justify-content:space-between}.wiz-provider-chip.disabled{opacity:.4;cursor:help;background:#ffffff05}.wiz-provider-chip.disabled:hover{opacity:.55;background:#ffffff0a}.wiz-provider-chip .chip-lock{width:14px;height:14px;opacity:.7;flex-shrink:0}.wiz-row-sub .cap-dot{width:4px;height:4px;border-radius:50%;background:var(--color-text-dim);display:inline-block;margin:0 6px;vertical-align:middle}.wiz-row-sub .cap-badge{font-family:var(--font-display);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:1px 6px;border-radius:var(--radius-sm);border:1px solid;vertical-align:middle;white-space:nowrap}.wiz-row-sub .cap-badge.full{color:var(--color-success-neon);background:#39ff1414;border-color:#39ff1466}.wiz-row-sub .cap-badge.partial{color:var(--color-warning-alt);background:#ff660014;border-color:#f606}.wiz-row-sub .cap-badge.none{color:var(--color-error-neon);background:#ff004014;border-color:#ff004066}.wiz-row-sub .cap-badge.summary{color:var(--color-text-dim);background:none;border:none;padding:0;text-transform:none;letter-spacing:0;font-weight:500}.wiz-explainer{margin-top:var(--space-md);padding:var(--space-lg);border-radius:var(--radius-lg);background:linear-gradient(135deg,#ff66000f,#00f5ff0a);border:1px solid rgba(255,102,0,.35)}.wiz-explainer[hidden]{display:none}.wiz-explainer-title{display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-display);font-weight:700;font-size:var(--font-size-md);margin:0 0 var(--space-sm)}.wiz-explainer-title .icon{font-size:18px}.wiz-explainer-body{font-size:var(--font-size-base);line-height:1.55;color:var(--color-text-neon-muted);margin:0 0 var(--space-md)}.wiz-explainer-steps{margin:0 0 var(--space-md);padding-left:var(--space-lg);font-size:var(--font-size-base);line-height:1.75;color:var(--color-text-neon-muted)}.wiz-explainer-steps li strong{color:var(--color-text-white)}.wiz-explainer-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap}.wiz-explainer-footer{margin:var(--space-md) 0 0;padding-top:var(--space-sm);border-top:1px solid rgba(255,255,255,.06);font-size:var(--font-size-sm);color:var(--color-text-dim);font-style:italic}.wiz-lvl-card{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition-fast)}.wiz-lvl-card.on{background:#00f5ff14;border-color:var(--color-accent-secondary)}.wiz-lvl-card.unavailable{opacity:.45;cursor:not-allowed}.wiz-lvl-text{flex:1}.wiz-lvl-title{font-family:var(--font-display);font-weight:600;font-size:var(--font-size-base);color:var(--color-text-white)}.wiz-lvl-desc{font-size:var(--font-size-xs);color:var(--color-text-neon-muted);margin-top:2px;line-height:1.4}.wiz-lvl-toggle{width:38px;height:22px;background:var(--color-dark-surface-hover);border-radius:var(--radius-full);border:1px solid var(--color-border-neon);position:relative;flex-shrink:0;margin-top:2px}.wiz-lvl-toggle:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--color-text-neon-muted);border-radius:var(--radius-full);transition:var(--transition-fast)}.wiz-lvl-card.on .wiz-lvl-toggle{background:var(--color-accent-primary);border-color:var(--color-accent-primary)}.wiz-lvl-card.on .wiz-lvl-toggle:after{left:18px;background:var(--color-bg-primary)}.wiz-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-lg);text-align:center;padding:var(--space-xl);position:relative;z-index:1}.wiz-done-badge{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-sm);letter-spacing:.14em;color:var(--color-success-neon);text-shadow:var(--glow-success)}.wiz-done-tag{font-family:var(--font-display);font-weight:600;font-size:var(--font-size-xl);color:var(--color-text-white)}.wiz-done-summary{display:flex;flex-direction:column;gap:var(--space-xs);width:100%;max-width:380px;padding:var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-lg)}.wiz-done-line{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-lg);font-family:var(--font-display);font-size:var(--font-size-sm);color:var(--color-text-neon-muted)}.wiz-done-line>span{letter-spacing:.08em;text-transform:uppercase;font-size:var(--font-size-xs);font-weight:600;flex-shrink:0}.wiz-done-line strong{color:var(--color-text-white);font-weight:600;text-align:right;word-break:break-word}.wiz-done-demo{width:100%;max-width:400px;aspect-ratio:16/9;border:1px solid var(--color-accent-primary);border-radius:var(--radius-xl);background:var(--color-bg-primary);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 0 30px #ff2d6a4d}.wiz-done-demo-label{font-family:var(--font-display);font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-neon-muted);letter-spacing:.14em;text-transform:uppercase}.wiz-done-demo-year{font-family:var(--font-display);font-weight:900;font-size:64px;line-height:.9;color:var(--color-accent-primary);text-shadow:0 0 24px rgba(255,45,106,.6);letter-spacing:-.03em}.wiz-done-demo-song{font-family:var(--font-display);font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-neon-muted)}.wiz-cta{padding:var(--space-md) var(--space-lg);display:flex;gap:var(--space-sm);border-top:1px solid var(--color-border-neon);background:#0000004d;position:relative;z-index:1}.wiz-cta .btn{flex:1}.wiz-cta .wiz-back{flex:0 0 auto;min-width:80px}.wiz-frame-playlist:not([hidden])~.wiz-cta{display:none}.finish-setup-pill{font-family:var(--font-display);font-weight:600;font-size:var(--font-size-sm);color:var(--color-accent-primary);background:#ff2d6a1a;border:1px solid rgba(255,45,106,.4);border-radius:var(--radius-full);padding:var(--space-xs) var(--space-md);cursor:pointer;transition:var(--transition-fast)}.finish-setup-pill:hover{background:#ff2d6a33;box-shadow:var(--glow-primary)}.finish-setup-pill.hidden{display:none}@media(prefers-reduced-motion:reduce){.wizard-takeover,.wizard-takeover *{animation:none!important;transition:none!important}}.wiz-field{display:flex;flex-direction:column;gap:var(--space-xs)}.wiz-field-label{font-family:var(--font-display);font-weight:600;font-size:var(--font-size-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-neon-muted)}.wiz-chip-group{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.wiz-chip{padding:var(--space-sm) var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-full);font-family:var(--font-display);font-weight:600;font-size:var(--font-size-sm);color:var(--color-text-white);cursor:pointer;transition:var(--transition-fast)}.wiz-chip:hover{background:var(--color-dark-surface-hover)}.wiz-chip.active{background:var(--color-accent-primary);border-color:var(--color-accent-primary);color:var(--color-bg-primary);box-shadow:var(--glow-primary)}.wiz-request-playlist{margin-top:var(--space-md);align-self:flex-start}body.wizard-active .modal{z-index:calc(var(--z-overlay) + 10)}.wiz-difficulty-hint{margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);background:#00f5ff0f;border-left:2px solid var(--color-accent-secondary);border-radius:var(--radius-sm);color:var(--color-text-neon-muted);font-size:var(--font-size-sm);line-height:1.5;min-height:1.5em}.wiz-rounds-custom{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm)}.wiz-rounds-custom input{width:6em;padding:var(--space-sm) var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-sm);color:var(--color-text-white);font-family:var(--font-body);font-size:var(--font-size-base)}.wiz-rounds-custom input:focus{outline:none;border-color:var(--color-accent-primary)}.wiz-rounds-custom span{color:var(--color-text-neon-muted);font-size:var(--font-size-sm)}.wiz-lvl-card{flex-direction:column;align-items:stretch;padding:0}.wiz-lvl-head{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);cursor:pointer;user-select:none}.wiz-lvl-card.unavailable .wiz-lvl-head{cursor:not-allowed}.wiz-lvl-head:hover{background:#ffffff05}.wiz-lvl-card.on .wiz-lvl-head{border-bottom:1px solid var(--color-border-neon)}.wiz-detail{padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-md);background:#00000026}.wiz-detail-checks{display:flex;flex-direction:column;gap:var(--space-xs)}.wiz-detail-check{display:flex;align-items:center;gap:var(--space-sm);padding:6px 8px;border-radius:var(--radius-md);cursor:pointer}.wiz-detail-check:hover{background:#ffffff08}.wiz-detail-check input[type=checkbox]{accent-color:var(--color-accent-primary);width:16px;height:16px;flex-shrink:0}.wiz-detail-check-name{font-family:var(--font-display);font-weight:500;font-size:var(--font-size-sm);color:var(--color-text-white)}.wiz-detail-empty{font-size:var(--font-size-sm);color:var(--color-text-neon-muted);padding:var(--space-sm);background:var(--color-dark-surface);border:1px dashed var(--color-border-neon);border-radius:var(--radius-md);text-align:center}.wiz-detail-input{padding:var(--space-sm) var(--space-md);background:var(--color-bg-primary);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);color:var(--color-text-white);font-family:ui-monospace,monospace;font-size:var(--font-size-sm)}.wiz-detail-input:focus{outline:none;border-color:var(--color-accent-secondary);box-shadow:0 0 0 3px #00f5ff26}.wiz-field-hint{font-size:var(--font-size-xs);color:var(--color-text-dim);line-height:1.4}body.home-mode #media-players,body.home-mode #music-service,body.home-mode #playlists,body.home-mode #game-settings,body.home-mode #party-lights,body.home-mode #tts-settings,body.home-mode .admin-content>.admin-actions{display:none!important}.home-view{display:none}.home-view.hidden{display:none!important}body.home-mode #home-view,body.home-mode .home-view{display:flex;flex-direction:column;min-height:calc(100vh - 120px);background:var(--color-bg-primary);border:1px solid var(--color-border-neon);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:var(--space-md)}.home-stage{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-xl) var(--space-lg);text-align:center}.home-stage-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,45,106,.15),transparent 55%),radial-gradient(ellipse at bottom,rgba(0,245,255,.08),transparent 50%)}.home-eyebrow{position:relative;z-index:1;font-family:var(--font-display);font-weight:700;font-size:var(--font-size-sm);letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-secondary)}.home-headline{position:relative;z-index:1;font-family:var(--font-display);font-weight:900;font-size:var(--font-size-4xl);line-height:.95;letter-spacing:-.02em;margin:0;text-shadow:0 0 40px rgba(255,45,106,.35)}.home-headline-sub{display:block;font-weight:600;font-size:var(--font-size-xl);letter-spacing:.02em;text-shadow:none;color:var(--color-text-white);margin-top:4px}.home-hero-card{position:relative;z-index:1;padding:var(--space-lg);background:var(--color-dark-surface);border:1px solid var(--color-accent-primary);border-radius:var(--radius-2xl);box-shadow:0 0 32px #ff2d6a38;display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);max-width:280px;width:100%}.home-qr-loading{font-family:var(--font-display);font-weight:600;font-size:var(--font-size-sm);color:var(--color-text-neon-muted);padding:var(--space-xl) 0;letter-spacing:.08em;text-transform:uppercase}.home-qr-loading.hidden{display:none}.home-qr-container{padding:8px;background:var(--color-bg-white);border-radius:var(--radius-md);display:grid;place-items:center;min-width:180px;min-height:180px}.home-qr-container:empty{display:none}.home-qr-container img,.home-qr-container canvas{display:block;max-width:180px;height:auto}.home-hero-title{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-lg);color:var(--color-text-white);letter-spacing:-.01em}.home-hero-sub{font-size:var(--font-size-sm);color:var(--color-accent-secondary);font-family:ui-monospace,monospace;word-break:break-all;max-width:260px}.home-players{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:var(--space-sm);justify-items:center;width:100%;max-width:380px;margin-top:var(--space-lg)}.home-players:empty{display:none}.home-player-tile{position:relative;width:100%;aspect-ratio:1;padding:var(--space-sm);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,var(--tile-from),var(--tile-to));border:1.5px solid var(--tile-border);box-shadow:0 0 14px var(--tile-glow);--tile-from: rgba(0, 245, 255, .32);--tile-to: rgba(0, 245, 255, .08);--tile-border: rgba(0, 245, 255, .7);--tile-glow: rgba(0, 245, 255, .35)}.home-player-tile-initial{font-family:var(--font-display);font-weight:900;font-size:28px;line-height:1;color:var(--color-text-white);text-shadow:0 2px 8px rgba(0,0,0,.4)}.home-player-tile-name{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-xs);color:var(--color-text-white);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}.home-player-tile--c2{--tile-from: rgba(57, 255, 20, .32);--tile-to: rgba(57, 255, 20, .08);--tile-border: rgba(57, 255, 20, .65);--tile-glow: rgba(57, 255, 20, .32)}.home-player-tile--c3{--tile-from: rgba(255, 102, 0, .32);--tile-to: rgba(255, 102, 0, .08);--tile-border: rgba(255, 102, 0, .65);--tile-glow: rgba(255, 102, 0, .32)}.home-player-tile--c4{--tile-from: rgba(0, 245, 255, .22);--tile-to: rgba(0, 245, 255, .04);--tile-border: rgba(0, 245, 255, .5);--tile-glow: rgba(0, 245, 255, .22)}.home-player-tile--host{--tile-from: rgba(255, 45, 106, .35);--tile-to: rgba(255, 45, 106, .08);--tile-border: rgba(255, 45, 106, .85);--tile-glow: rgba(255, 45, 106, .5);box-shadow:var(--glow-primary),0 0 22px #ff2d6a59}.home-player-tile-crown{position:absolute;top:-10px;right:-10px;font-size:20px;line-height:1;filter:drop-shadow(0 0 6px rgba(255,45,106,.8));pointer-events:none}.home-players-waiting{grid-column:1 / -1;padding:var(--space-md);border-radius:var(--radius-full);border:1px dashed var(--color-border-neon);background:transparent;color:var(--color-text-dim);font-family:var(--font-display);font-weight:500;font-size:var(--font-size-sm);text-align:center}.home-meta{position:relative;z-index:1;font-family:var(--font-display);font-weight:500;font-size:var(--font-size-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-dim);max-width:320px;line-height:1.6}.home-cta-bar{display:flex;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:#0000004d;border-top:1px solid var(--color-border-neon)}.home-cta-edit{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm)}.home-cta-start{flex:1;padding:var(--space-md);font-size:var(--font-size-base);box-shadow:var(--glow-primary),0 0 40px #ff2d6a40}.home-cta-start.btn-ghost{box-shadow:none;flex:0 0 auto}.home-cta-join{width:100%;margin-top:var(--space-md);padding:var(--space-lg) var(--space-md);font-size:var(--font-size-xl);font-weight:700;letter-spacing:.02em;border-radius:var(--radius-xl);box-shadow:var(--glow-primary),0 0 48px #ff2d6a4d;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm)}.home-cta-join svg{width:26px;height:26px;stroke-width:2.25}.home-cta-join.hidden{display:none}.wiz-mode-cards{display:flex;flex-direction:column;gap:var(--space-xs)}.wiz-mode-card{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition-fast)}.wiz-mode-card:hover{background:var(--color-dark-surface-hover)}.wiz-mode-card.disabled{cursor:not-allowed;pointer-events:none}.wiz-mode-card.disabled .wiz-mode-icon,.wiz-mode-card.disabled .wiz-mode-title,.wiz-mode-card.disabled .wiz-lvl-toggle{opacity:.45}.wiz-mode-hint.gated{color:var(--color-warning);font-weight:600}.wiz-mode-card.on{background:#ff2d6a14;border-color:var(--color-accent-primary)}.wiz-mode-icon{font-size:22px;line-height:1;flex-shrink:0;margin-top:2px}.wiz-mode-body{flex:1;min-width:0}.wiz-mode-title{font-family:var(--font-display);font-weight:600;font-size:var(--font-size-base);color:var(--color-text-white)}.wiz-mode-hint{font-size:var(--font-size-xs);color:var(--color-text-neon-muted);margin-top:2px;line-height:1.45}.wiz-mode-card.on .wiz-lvl-toggle{background:var(--color-accent-primary);border-color:var(--color-accent-primary)}.wiz-mode-card.on .wiz-lvl-toggle:after{left:18px;background:var(--color-bg-primary)}.wiz-coremode-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}.wiz-coremode-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:var(--space-md) var(--space-sm);background:var(--color-dark-surface);border:1.5px solid var(--color-border-neon);border-radius:var(--radius-xl);cursor:pointer;overflow:hidden;transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),opacity var(--transition-fast)}.wiz-coremode-card:hover{background:var(--color-dark-surface-hover)}.wiz-coremode-card .wiz-mode-icon{font-size:32px;margin-top:0}.wiz-coremode-card .wiz-mode-body{flex:none}.wiz-coremode-card .wiz-mode-title{font-weight:900;letter-spacing:.02em;text-transform:uppercase}.wiz-coremode-card .wiz-mode-hint{color:var(--color-text-dim)}.wiz-coremode-card.selected{transform:translateY(-2px)}.wiz-coremode-card--pink.selected{border-color:var(--color-accent-primary);background:radial-gradient(120% 100% at 50% 0%,#ff2d6a38,#ff2d6a0a);box-shadow:0 0 24px #ff2d6a4d}.wiz-coremode-card--cyan.selected{border-color:var(--color-accent-secondary);background:radial-gradient(120% 100% at 50% 0%,#00f5ff33,#00f5ff08);box-shadow:0 0 24px #00f5ff47}.wiz-coremode-card.dim{opacity:.5}.wiz-coremode-card.dim:hover{opacity:.8}.wiz-coremode-badge{position:absolute;top:8px;right:8px;font-family:var(--font-display);font-weight:800;font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:var(--radius-full)}.wiz-coremode-card--pink .wiz-coremode-badge{background:var(--color-accent-primary);color:var(--color-text-white)}.wiz-coremode-card--cyan .wiz-coremode-badge{background:var(--color-accent-secondary);color:#04222a}@media(prefers-reduced-motion:reduce){.wiz-coremode-card{transition:none}.wiz-coremode-card.selected{transform:none}}.home-cast-link{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-accent-secondary);border-radius:var(--radius-full);font-family:var(--font-display);font-weight:600;font-size:var(--font-size-sm);color:var(--color-accent-secondary);text-decoration:none;position:relative;z-index:1;transition:var(--transition-fast)}.home-cast-link:hover{background:#00f5ff14;box-shadow:var(--glow-secondary)}.home-cast-link.hidden{display:none}.wiz-detail-test{align-self:flex-start;margin-top:var(--space-xs);padding:var(--space-xs) var(--space-md);font-size:var(--font-size-xs)}.wiz-detail-test[disabled]{opacity:.5;cursor:not-allowed}.wiz-wled-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-xs)}.wiz-wled-row{display:flex;align-items:center;gap:var(--space-xs)}.wiz-wled-phase{font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:.1em;color:var(--color-text-dim);min-width:72px}.wiz-wled-input{width:60px;padding:4px 8px;text-align:center;font-family:ui-monospace,monospace;font-size:var(--font-size-sm)}.home-utility-row{display:flex;gap:var(--space-sm);flex-wrap:wrap;justify-content:center;position:relative;z-index:1}.home-utility-btn{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-full);font-family:var(--font-display);font-weight:600;font-size:var(--font-size-sm);color:var(--color-text-neon-muted);cursor:pointer;transition:var(--transition-fast)}.home-utility-btn:hover{color:var(--color-text-white);border-color:var(--color-accent-secondary)}.home-utility-btn.hidden{display:none}.home-cta-end{border-color:#ff004066;color:var(--color-error-neon)}.home-cta-end:hover{background:#ff00401a;box-shadow:0 0 12px #ff00404d}.home-cta-end.hidden{display:none}.home-hero-card--setup{border-color:var(--color-border-neon);box-shadow:none;gap:var(--space-md)}.home-setup-glyph{width:56px;height:56px;display:grid;place-items:center;color:var(--color-accent-secondary);text-shadow:0 0 12px rgba(0,245,255,.4)}.home-setup-glyph svg{width:100%;height:100%}.home-hero-sub--plain{color:var(--color-text-neon-muted);font-family:var(--font-body);text-align:center;font-size:var(--font-size-sm);line-height:1.5;max-width:280px}.home-cta-setup{flex:1;padding:var(--space-md);font-size:var(--font-size-base);box-shadow:var(--glow-primary),0 0 40px #ff2d6a40}.home-cta-setup.hidden,body.is-learning-screen .player-header,body.is-ingame .player-header{display:none}#tour-view.view:not(.hidden){display:flex;flex-direction:column}.tour-container{min-height:100vh;padding:var(--space-xl) var(--space-md) var(--space-md);background:radial-gradient(circle at 50% 10%,rgba(255,45,106,.1),transparent 55%),radial-gradient(circle at 85% 90%,rgba(0,245,255,.08),transparent 55%),var(--color-bg-primary);display:flex;flex-direction:column}.tour-header-wiz{margin-bottom:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm)}.tour-step-count{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-body);font-size:var(--font-size-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-neon-muted)}.tour-step-count .of{color:var(--color-text-dim);font-weight:500}.tour-skip-link{font-family:var(--font-body);font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-dim);background:transparent;border:0;cursor:pointer;padding:var(--space-xs) var(--space-sm);transition:color var(--transition-fast)}.tour-skip-link:hover,.tour-skip-link:focus-visible{color:var(--color-text-neon-muted);outline:none}.tour-wiz-progress{display:flex;gap:4px;width:100%}.tour-wiz-seg{flex:1;height:3px;background:#ffffff14;border-radius:var(--radius-full);overflow:hidden;position:relative}.tour-wiz-seg.filled{background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));box-shadow:0 0 12px #ff2d6a80}.tour-wiz-seg.active .tour-wiz-seg-inner{height:100%;width:60%;background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));box-shadow:0 0 12px #ff2d6a80;border-radius:var(--radius-full)}.tour-card{flex:1;display:flex;flex-direction:column;align-items:center;padding:var(--space-md) 0;animation:tour-card-enter var(--transition-slow) ease-out}@keyframes tour-card-enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.tour-card.hidden{display:none}@media(prefers-reduced-motion:reduce){.tour-card{animation:none}}.tour-title{font-family:var(--font-display);font-weight:900;font-size:2.5rem;line-height:1;text-align:center;color:var(--color-text-white);letter-spacing:-.02em;margin-bottom:var(--space-sm)}.tour-caption{font-family:var(--font-body);font-weight:500;font-size:var(--font-size-lg);text-align:center;color:var(--color-text-neon-muted);margin-bottom:var(--space-xl);max-width:320px}.tour-preview{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-md)}.tour-preview-album{width:88px;height:88px;border-radius:var(--radius-lg);background:linear-gradient(135deg,#2a1b4a,#1a1a24);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.tour-preview-album:after{content:"";position:absolute;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,#0a0a12 28%,#2a2a3a 29% 62%,#0a0a12 63%);border:1px solid rgba(255,255,255,.08)}.tour-preview-album:before{content:"\266a";position:absolute;font-size:26px;color:var(--color-accent-secondary);opacity:.75;z-index:1}.tour-year-display{display:flex;align-items:center;justify-content:center;gap:var(--space-md)}.tour-year-adjust{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);background:transparent;color:#fff9;font-size:var(--font-size-xl);font-weight:400;display:flex;align-items:center;justify-content:center}.tour-year-big{font-family:var(--font-display);font-weight:900;font-size:4.25rem;color:var(--color-accent-secondary);text-shadow:0 0 24px rgba(0,245,255,.6);line-height:1;letter-spacing:-.03em}.tour-preview-slider{width:100%;max-width:320px;display:flex;align-items:center;gap:var(--space-sm)}.tour-slider-label{font-family:var(--font-body);font-size:var(--font-size-sm);color:#ffffff80;min-width:34px;text-align:center}.tour-slider-track{flex:1;height:4px;background:#ffffff26;border-radius:2px;position:relative}.tour-slider-thumb{position:absolute;top:50%;left:45.3%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:var(--color-accent-secondary);box-shadow:0 0 16px #00f5ffcc;border:2px solid var(--color-bg-primary)}.tour-bet-button{background:linear-gradient(135deg,#ff2d6a1f,#ff2d6a0f);border:2px solid var(--color-accent-primary);border-radius:var(--radius-xl);padding:var(--space-md) var(--space-lg);display:flex;align-items:center;gap:var(--space-sm);box-shadow:0 0 24px #ff2d6a59}.tour-bet-button .tour-bet-dice{font-size:30px;filter:drop-shadow(0 0 6px rgba(255,45,106,.6))}.tour-bet-button .tour-bet-label{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-lg);color:var(--color-text-white)}.tour-bet-score{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg-surface);border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.06)}.tour-bet-score-base{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-2xl);color:var(--color-text-neon-muted)}.tour-bet-score-op{color:var(--color-text-dim);font-size:var(--font-size-lg)}.tour-bet-score-multi{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-2xl);color:var(--color-accent-primary)}.tour-bet-score-final{font-family:var(--font-display);font-weight:900;font-size:var(--font-size-4xl);color:var(--color-success-neon);text-shadow:0 0 12px rgba(57,255,20,.5)}.tour-steal-button{background:linear-gradient(135deg,#00f5ff1f,#00f5ff0a);border:2px solid var(--color-accent-secondary);border-radius:var(--radius-xl);padding:var(--space-md) var(--space-lg);display:flex;align-items:center;gap:var(--space-sm);box-shadow:0 0 24px #00f5ff66}.tour-steal-button .tour-steal-ninja{font-size:30px}.tour-steal-button .tour-steal-label{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-lg);color:var(--color-text-white)}.tour-steal-targets{display:flex;gap:var(--space-sm);align-items:center}.tour-steal-target{background:var(--color-bg-surface);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);font-family:var(--font-body);font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-neon-muted);border:1px solid rgba(255,255,255,.06)}.tour-steal-target.highlighted{color:var(--color-text-white);border-color:var(--color-accent-secondary);box-shadow:0 0 12px #00f5ff59}.tour-hint{font-family:var(--font-body);font-size:var(--font-size-sm);color:#fff6;text-align:center;font-style:italic;margin-top:var(--space-xs)}.tour-ta-fields{display:flex;flex-direction:column;gap:var(--space-sm);width:100%}.tour-ta-field{display:flex;flex-direction:column;gap:4px;padding:10px 14px;background:linear-gradient(180deg,#ff2d6a0f,#ffffff05);border:1px solid rgba(255,45,106,.22);border-radius:var(--radius-lg);text-align:left}.tour-ta-field-label{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-neon-muted)}.tour-ta-field-val{font-family:var(--font-body);font-weight:600;font-size:var(--font-size-md);color:var(--color-text-white)}.tour-artist-prompt{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg-surface);border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.06);width:100%;max-width:320px}.tour-artist-prompt .tour-artist-mic{font-size:var(--font-size-xl)}.tour-artist-prompt .tour-artist-who{font-family:var(--font-body);font-size:var(--font-size-base);font-weight:500;color:var(--color-text-white)}.tour-artist-prompt .tour-artist-bonus{margin-left:auto;background:#22c55e26;color:var(--color-success);font-weight:700;font-size:var(--font-size-sm);padding:2px var(--space-sm);border-radius:var(--radius-full)}.tour-artist-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);width:100%;max-width:320px}.tour-artist-option{min-height:48px;padding:var(--space-sm) var(--space-md);border:2px solid rgba(255,255,255,.12);border-radius:var(--radius-md);background:var(--color-bg-surface);color:var(--color-text-white);font-family:var(--font-body);font-size:var(--font-size-base);font-weight:500;display:flex;align-items:center;justify-content:center;cursor:default}.tour-artist-option.is-winner{background:var(--color-success);border-color:var(--color-success);color:var(--color-text-white);box-shadow:var(--glow-primary)}.tour-footer{margin-top:auto;padding-top:var(--space-md);display:flex;gap:var(--space-sm);align-items:stretch}.btn-tour-skip{flex:1;background:transparent;color:var(--color-text-neon-muted);border:1.5px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-md);font-family:var(--font-body);font-weight:600;font-size:var(--font-size-md);cursor:pointer}.btn-tour-skip:hover,.btn-tour-skip:focus-visible{border-color:#ffffff4d;color:var(--color-text-white);outline:none}.btn-tour-next{flex:2;background:var(--color-accent-primary);color:var(--color-text-white);border:none;border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg);font-family:var(--font-display);font-weight:700;font-size:var(--font-size-lg);box-shadow:var(--glow-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.btn-tour-next .chev{opacity:.85}#ready-view.view:not(.hidden){display:flex;flex-direction:column}.ready-container{min-height:100vh;padding:var(--space-xl);background:radial-gradient(circle at 50% 30%,rgba(255,45,106,.1),transparent 55%),radial-gradient(circle at 85% 80%,rgba(0,245,255,.08),transparent 55%),var(--color-bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--space-sm)}.ready-wordmark{font-family:var(--font-display);font-weight:900;font-size:5rem;letter-spacing:-.02em;margin-bottom:var(--space-sm);text-shadow:0 0 48px rgba(255,45,106,.55);animation:ready-wordmark-in .5s ease-out}.ready-wordmark .beat{color:var(--color-text-white)}.ready-wordmark .ify{background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}@keyframes ready-wordmark-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.ready-name{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-3xl);color:var(--color-text-white);margin-bottom:var(--space-xs);animation:ready-fade-in .5s ease-out .1s both}.ready-subtitle{font-family:var(--font-body);font-size:var(--font-size-md);color:var(--color-text-neon-muted);margin-bottom:var(--space-2xl);animation:ready-fade-in .5s ease-out .2s both}@keyframes ready-fade-in{0%{opacity:0}to{opacity:1}}.ready-waiting{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);animation:ready-fade-in .5s ease-out .3s both}.ready-pulse{position:relative;width:16px;height:16px;border-radius:50%;background:var(--color-accent-secondary);box-shadow:0 0 12px #00f5ffb3}.ready-pulse:before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--color-accent-secondary);opacity:.6;animation:ready-pulse-ring 1.8s ease-out infinite}@keyframes ready-pulse-ring{0%{transform:scale(.6);opacity:.8}to{transform:scale(2.4);opacity:0}}@media(prefers-reduced-motion:reduce){.ready-wordmark,.ready-name,.ready-subtitle,.ready-waiting{animation:none}.ready-pulse:before{animation:none;opacity:0}}.ready-label{font-family:var(--font-body);font-size:var(--font-size-md);font-weight:500;color:var(--color-text-white)}.ready-count{font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--color-text-dim)}.replay-tour-link{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:transparent;border:1px dashed rgba(255,45,106,.4);border-radius:var(--radius-md);color:var(--color-accent-primary);font-family:var(--font-body);font-size:var(--font-size-sm);font-weight:600;text-decoration:none;margin-bottom:var(--space-sm);cursor:pointer;width:100%;transition:all var(--transition-fast)}.replay-tour-link:hover,.replay-tour-link:focus-visible{border-color:var(--color-accent-primary);background:#ff2d6a0d;outline:none}.replay-tour-link .arrow{margin-left:auto}.home-player-tile--learning{border-style:dashed!important;opacity:.72}.home-player-tile-tour{position:absolute;top:-6px;right:-6px;background:#00f5ff1a;color:var(--color-accent-secondary);font-family:var(--font-body);font-size:9px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:var(--radius-full);border:1px solid rgba(0,245,255,.4);box-shadow:0 0 8px #00f5ff40}.home-learning-warning{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-sm);background:#ff660014;border:1px solid rgba(255,102,0,.25);border-radius:var(--radius-md);color:var(--color-warning-alt);font-family:var(--font-body);font-size:var(--font-size-sm);font-weight:500;text-align:center}.home-learning-warning.hidden{display:none}.player-tiles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:var(--space-sm);justify-items:center;width:100%}.player-tiles-grid:empty{display:none}.player-tile{position:relative;width:100%;aspect-ratio:1;padding:var(--space-sm);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,var(--tile-from),var(--tile-to));border:1.5px solid var(--tile-border);box-shadow:0 0 14px var(--tile-glow);--tile-from: rgba(0, 245, 255, .32);--tile-to: rgba(0, 245, 255, .08);--tile-border: rgba(0, 245, 255, .7);--tile-glow: rgba(0, 245, 255, .35);transition:box-shadow var(--transition-fast),border-color var(--transition-fast)}.player-tile-initial{font-family:var(--font-display);font-weight:900;font-size:var(--font-size-3xl);line-height:1;color:var(--color-text-white);text-shadow:0 2px 8px rgba(0,0,0,.4)}.player-tile-name{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-xs);color:var(--color-text-white);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}.player-tile--c2{--tile-from: rgba(57, 255, 20, .32);--tile-to: rgba(57, 255, 20, .08);--tile-border: rgba(57, 255, 20, .65);--tile-glow: rgba(57, 255, 20, .32)}.player-tile--c3{--tile-from: rgba(255, 102, 0, .32);--tile-to: rgba(255, 102, 0, .08);--tile-border: rgba(255, 102, 0, .65);--tile-glow: rgba(255, 102, 0, .32)}.player-tile--c4{--tile-from: rgba(0, 245, 255, .22);--tile-to: rgba(0, 245, 255, .04);--tile-border: rgba(0, 245, 255, .5);--tile-glow: rgba(0, 245, 255, .22)}.player-tile--host{--tile-from: rgba(255, 45, 106, .35);--tile-to: rgba(255, 45, 106, .08);--tile-border: rgba(255, 45, 106, .85);--tile-glow: rgba(255, 45, 106, .5);box-shadow:var(--glow-primary),0 0 22px #ff2d6a59}.player-tile-crown{position:absolute;top:-10px;right:-10px;font-size:20px;line-height:1;filter:drop-shadow(0 0 6px rgba(255,45,106,.8));pointer-events:none}.player-tile-you-chip{position:absolute;top:-10px;right:-10px;background:var(--color-accent-secondary);color:var(--color-bg-primary);font-family:var(--font-display);font-weight:900;font-size:9px;letter-spacing:.1em;padding:3px 7px;border-radius:var(--radius-full);box-shadow:0 0 12px #00f5ff99;pointer-events:none}.player-tile-away{position:absolute;bottom:-8px;left:50%;transform:translate(-50%);font-family:var(--font-body);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-dim);background:var(--color-bg-primary);padding:2px 6px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.12);pointer-events:none}.player-tile--disconnected{opacity:.5;filter:grayscale(.4)}.player-tile.is-new{animation:player-tile-pop var(--transition-slow) ease-out}@keyframes player-tile-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}to{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.player-tile.is-new{animation:none}}.reveal-header-v2{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md);gap:var(--space-sm)}.reveal-header-v2 .round-count{font-family:var(--font-body);font-size:var(--font-size-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-neon-muted);display:flex;align-items:center;gap:4px}.reveal-header-v2 .header-right{display:flex;align-items:center;gap:var(--space-sm)}.reveal-advance-pill{position:relative;width:32px;height:32px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.reveal-advance-pill.hidden{display:none}.reveal-advance-svg{width:100%;height:100%;transform:rotate(-90deg)}.reveal-advance-bg{fill:none;stroke:#ffffff1f;stroke-width:5}.reveal-advance-fg{fill:none;stroke:var(--color-accent-secondary);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .5s linear;filter:drop-shadow(var(--glow-secondary))}.reveal-advance-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:13px;color:var(--color-accent-secondary)}.info-btn{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:var(--color-bg-surface);color:var(--color-text-neon-muted);font-size:var(--font-size-base);font-weight:700;font-family:var(--font-display);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color var(--transition-fast),border-color var(--transition-fast);padding:0}.info-btn:hover,.info-btn:focus-visible{color:var(--color-text-white);border-color:#ffffff4d;outline:none}.song-strip{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-sm) var(--space-sm) var(--space-sm);background:#ffffff0a;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.08);margin-bottom:var(--space-md)}.song-strip-cover{width:56px;height:56px;border-radius:var(--radius-md);object-fit:cover;flex-shrink:0;background:linear-gradient(135deg,#ff6b9a,#6366f1)}.song-strip-info{flex:1;min-width:0}.song-strip-title{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-md);color:var(--color-text-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-strip-artist{font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--color-text-neon-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip-row{display:flex;gap:var(--space-xs);margin-bottom:var(--space-sm);flex-wrap:wrap}.chip-row.hidden{display:none}.chip-row .chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-xs);font-weight:700;letter-spacing:.04em}.chip-row .chip--bet-won{background:#ff2d6a1f;border:1px solid rgba(255,45,106,.5);color:var(--color-accent-primary);box-shadow:0 0 12px #ff2d6a33}.chip-row .chip--bet-lost{background:#ff004014;border:1px solid rgba(255,0,64,.4);color:var(--color-error-neon)}.chip-row .chip--streak{background:#ff66001f;border:1px solid rgba(255,102,0,.5);color:var(--color-warning-alt)}.duel{padding:var(--space-lg) var(--space-xs) var(--space-md);margin-bottom:var(--space-sm)}.duel-emotion{text-align:center;font-family:var(--font-display);font-weight:900;font-size:var(--font-size-2xl);letter-spacing:.06em;margin-bottom:var(--space-md);min-height:1.2em;transition:color var(--transition-normal)}.duel-emotion.hidden{visibility:hidden}.duel-emotion--exact{color:var(--color-success-neon);text-shadow:0 0 16px rgba(57,255,20,.55)}.duel-emotion--close{color:var(--color-success-neon);text-shadow:0 0 14px rgba(57,255,20,.45)}.duel-emotion--wrong{color:var(--color-error-neon);text-shadow:0 0 14px rgba(255,0,64,.45)}.duel-emotion--missed{color:var(--color-text-dim);text-shadow:none}.duel-row{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-sm);align-items:center}.duel-side{text-align:center;min-width:0}.duel-label{font-family:var(--font-body);font-size:var(--font-size-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-dim);font-weight:600;margin-bottom:var(--space-sm)}.duel-year{font-family:var(--font-display);font-weight:900;font-size:clamp(40px,12vw,64px);line-height:1;letter-spacing:-.03em}.duel-year.mine{color:var(--color-text-neon-muted)}.duel-year.correct{color:var(--color-accent-secondary);text-shadow:0 0 24px rgba(0,245,255,.6)}.duel-gap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:48px}.duel-gap-x{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-xl);color:var(--color-text-dim);opacity:.6;line-height:1}.duel-gap-n{font-family:var(--font-display);font-weight:900;font-size:var(--font-size-2xl);color:var(--color-error-neon);text-shadow:0 0 10px rgba(255,0,64,.35);line-height:1}.duel-gap--exact .duel-gap-n{color:var(--color-success-neon);text-shadow:0 0 10px rgba(57,255,20,.5)}.duel-gap--close .duel-gap-n{color:var(--color-success-neon);text-shadow:0 0 8px rgba(57,255,20,.35)}.duel-gap-unit{font-family:var(--font-body);font-size:9px;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.1em;margin-top:3px}.score-row{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--color-bg-surface);border-radius:var(--radius-lg);border:1px solid rgba(0,245,255,.25);box-shadow:0 0 14px #00f5ff1f;margin-bottom:var(--space-md);gap:var(--space-sm)}.score-row-left{font-family:var(--font-body);font-size:var(--font-size-xs);color:var(--color-text-neon-muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em;display:flex;flex-direction:column;gap:3px;min-width:0}.score-row-subtitle{color:var(--color-text-white);font-size:var(--font-size-sm);font-weight:700;letter-spacing:0;text-transform:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-row-right{display:flex;align-items:center;gap:var(--space-sm);flex-shrink:0}.score-row-pts{font-family:var(--font-display);font-weight:900;font-size:38px;color:var(--color-accent-secondary);text-shadow:0 0 18px rgba(0,245,255,.5);line-height:1}.standings-section .leaderboard-list{display:flex;flex-direction:column;gap:6px}.sheet-backdrop{position:fixed;inset:0;z-index:400;display:flex;align-items:flex-end;justify-content:center}.sheet-backdrop.hidden{display:none}.sheet-dim{position:absolute;inset:0;background:#0a0a1299;backdrop-filter:blur(2px);animation:sheet-dim-in .2s ease-out}@keyframes sheet-dim-in{0%{opacity:0}to{opacity:1}}.sheet{position:relative;z-index:1;width:100%;max-width:520px;background:linear-gradient(180deg,#14141e,#0a0a12);border-top:1px solid rgba(0,245,255,.25);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;box-shadow:0 -12px 40px #00000080,0 -4px 16px #00f5ff1a;padding:14px 20px calc(28px + env(safe-area-inset-bottom,0));max-height:80vh;overflow-y:auto;animation:sheet-slide-up .32s cubic-bezier(.22,.8,.32,1)}@keyframes sheet-slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.sheet-dim,.sheet{animation:none}}.sheet-handle{width:40px;height:4px;border-radius:2px;background:#fff3;margin:0 auto 16px}.sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.sheet-title{font-family:var(--font-display);font-weight:800;font-size:var(--font-size-lg);display:flex;align-items:center;gap:8px;color:var(--color-text-white)}.sheet-close{width:32px;height:32px;border-radius:50%;background:#ffffff14;border:0;color:var(--color-text-neon-muted);font-size:var(--font-size-base);font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer}.sheet-close:hover,.sheet-close:focus-visible{color:var(--color-text-white);background:#ffffff24;outline:none}.breakdown-list{display:flex;flex-direction:column;margin-bottom:var(--space-md)}.breakdown-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-family:var(--font-body);font-size:var(--font-size-base)}.breakdown-row+.breakdown-row{border-top:1px solid rgba(255,255,255,.05)}.breakdown-row .label{color:var(--color-text-neon-muted);display:flex;align-items:center;gap:8px}.breakdown-row .label .emoji{font-size:var(--font-size-md)}.breakdown-row .value{font-family:var(--font-display);font-weight:800;font-size:var(--font-size-md)}.breakdown-row .value--positive{color:var(--color-success-neon)}.breakdown-row .value--multiplier{color:var(--color-accent-primary)}.breakdown-row .value--neutral{color:var(--color-text-white)}.breakdown-total{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);border-radius:var(--radius-lg);background:linear-gradient(90deg,#00f5ff14,#ff2d6a0d);border:1px solid rgba(0,245,255,.3)}.breakdown-total .label{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-md);color:var(--color-text-white)}.breakdown-total .value{font-family:var(--font-display);font-weight:900;font-size:var(--font-size-3xl);color:var(--color-accent-secondary);text-shadow:0 0 16px rgba(0,245,255,.5)}.breakdown-total--zero .value{color:var(--color-text-dim);text-shadow:none}.breakdown-empty{text-align:center;padding:var(--space-md) 0}.breakdown-empty-icon{font-size:42px;margin-bottom:var(--space-sm)}.breakdown-empty-text{color:var(--color-text-neon-muted);font-family:var(--font-body);font-size:var(--font-size-base);margin-bottom:var(--space-md)}.difficulty-visual{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);background:#ff004014;border:1px solid rgba(255,0,64,.3);border-radius:var(--radius-md);margin-bottom:var(--space-sm);gap:var(--space-sm)}.difficulty-visual .left{font-family:var(--font-display);font-weight:800;font-size:var(--font-size-sm);color:var(--color-error-neon);min-width:0}.difficulty-visual .left .sub{font-family:var(--font-body);font-size:var(--font-size-xs);font-weight:500;color:var(--color-text-neon-muted);margin-top:3px}.difficulty-visual .stars{font-size:var(--font-size-md);letter-spacing:2px;white-space:nowrap}.difficulty-visual .star-filled{color:var(--color-warning-alt)}.difficulty-visual .star-empty{color:#ffffff26}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-bottom:var(--space-sm)}.stats-card{padding:12px 14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md)}.stats-card .lbl{font-family:var(--font-body);font-size:10px;color:var(--color-text-dim);font-weight:700;letter-spacing:.08em;text-transform:uppercase}.stats-card .val{font-family:var(--font-display);font-weight:800;font-size:var(--font-size-2xl);margin-top:4px;color:var(--color-text-white)}.stats-card .val.cyan{color:var(--color-accent-secondary)}.stats-card .val.success{color:var(--color-success-neon)}.stats-card .val.warn{color:var(--color-error-neon)}.stats-card .sub{font-family:var(--font-body);font-size:10px;color:var(--color-text-neon-muted);margin-top:2px}.furthest-list{display:flex;flex-direction:column;gap:6px}.furthest-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#ffffff08;border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--font-size-sm)}.furthest-row .name{font-weight:600;color:var(--color-text-white)}.furthest-row .off{color:var(--color-error-neon);font-family:var(--font-display);font-weight:700}.stats-empty{text-align:center;color:var(--color-text-dim);font-family:var(--font-body);font-size:var(--font-size-sm);padding:var(--space-md)}.game-container--arcade{padding:0;display:flex;flex-direction:column;gap:0}.arc-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);position:sticky;top:0;z-index:5;background:linear-gradient(180deg,rgba(10,10,18,.95),rgba(10,10,18,.82) 72%,transparent);backdrop-filter:blur(8px);margin-bottom:var(--space-md)}.timer-float{position:fixed;top:max(env(safe-area-inset-top,0px) + 8px,8px);right:12px;z-index:100;width:52px;height:52px;border-radius:50%;background:#0a0a12c7;border:2px solid var(--color-accent-primary);box-shadow:0 0 14px #ff2d6a73,inset 0 0 8px #ff2d6a40;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:22px;line-height:1;color:var(--color-accent-primary);text-shadow:0 0 8px rgba(255,45,106,.6);backdrop-filter:blur(8px);transition:opacity .2s ease-out,transform .2s ease-out;pointer-events:none}.timer-float.hidden{opacity:0;transform:scale(.7);pointer-events:none}.timer-float.timer-float--visible{opacity:1;transform:scale(1)}.timer-float.timer-float--warn{border-color:var(--color-error-neon, #ff0040);color:var(--color-error-neon, #ff0040);box-shadow:0 0 16px #ff004099,inset 0 0 8px #ff00404d;animation:arc-urgency .8s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.timer-float{transition:none}.timer-float.timer-float--warn{animation:none}}.arc-pulse-orb{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(135deg,#ff6b9a,#6366f1);box-shadow:0 0 24px #ff2d6a80;flex-shrink:0}.arc-pulse-orb:before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(255,45,106,.5);animation:arc-orb-pulse 1.4s ease-out infinite;pointer-events:none}.arc-pulse-orb--steady:before{animation:none;opacity:0}@keyframes arc-orb-pulse{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.25)}}@media(prefers-reduced-motion:reduce){.arc-pulse-orb:before{animation:none;opacity:0}}.arc-pulse-orb-img{width:100%;height:100%;object-fit:cover;border-radius:50%;z-index:1;filter:blur(12px);transform:scale(1.15);transition:filter .4s ease,transform .4s ease}.arc-round-center{text-align:center;font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-neon-muted);line-height:1.3;overflow:hidden}.arc-round-label{display:block}.arc-round-big{display:block;font-size:20px;color:var(--color-text-white);letter-spacing:0;text-transform:none;margin-top:2px}.arc-round-sep{color:var(--color-text-dim);margin:0 2px;font-weight:500}.timer-neon{width:72px;height:72px;border-radius:50%;background:var(--color-bg-primary);border:3px solid var(--color-accent-primary);box-shadow:var(--glow-primary),inset 0 0 12px #ff2d6a4d;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:30px;color:var(--color-accent-primary);text-shadow:0 0 10px rgba(255,45,106,.6);flex-shrink:0;line-height:1}.timer-neon .timer{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit}.timer-neon.timer-neon--warn{border-color:var(--color-error-neon);color:var(--color-error-neon);box-shadow:0 0 20px #ff004099,inset 0 0 12px #ff00404d;animation:arc-urgency .8s ease-in-out infinite}@keyframes arc-urgency{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.timer-neon.timer-neon--catchup{animation:timer-catchup-glow .4s ease-out}@keyframes timer-catchup-glow{0%{box-shadow:var(--glow-primary),inset 0 0 12px #ff2d6a4d}45%{box-shadow:0 0 26px #00f5ffb3,inset 0 0 16px #00f5ff59}to{box-shadow:var(--glow-primary),inset 0 0 12px #ff2d6a4d}}@media(prefers-reduced-motion:reduce){.timer-neon.timer-neon--warn,.timer-neon.timer-neon--catchup{animation:none}}.arc-chip-row{display:flex;gap:6px;flex-wrap:wrap;padding:0 var(--space-md);margin-bottom:var(--space-md)}.arc-chip-row.hidden{display:none}.arc-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--radius-full);font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.04em}.arc-chip--steal{color:var(--color-accent-secondary);background:#00f5ff14;border:1px solid rgba(0,245,255,.4)}.arc-chip--closest-wins{color:var(--color-success-neon);background:#39ff1414;border:1px solid rgba(57,255,20,.4)}.arc-chip--intro{color:var(--color-warning-alt);background:#ff66001f;border:1px solid rgba(255,102,0,.5)}.arc-chip--final{color:var(--color-accent-primary);background:#ff2d6a1f;border:1px solid rgba(255,45,106,.5);text-transform:uppercase}.year-xxl{text-align:center;font-family:var(--font-display);font-weight:900;font-size:clamp(96px,34vw,128px);line-height:1;letter-spacing:-.04em;background:linear-gradient(180deg,var(--color-text-white) 0%,rgba(0,245,255,.85) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 32px rgba(0,245,255,.35);margin:4px 0 var(--space-md);padding:0 var(--space-md);max-width:100%}.year-xxl--locked{background:linear-gradient(180deg,var(--color-success-neon) 0%,rgba(57,255,20,.7) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 28px rgba(57,255,20,.45)}.submitted-banner{margin:0 var(--space-md) var(--space-sm);padding:8px 14px;background:#39ff1414;border:1px solid rgba(57,255,20,.4);border-radius:var(--radius-md);font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--color-success-neon);letter-spacing:.04em;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center}.submitted-banner.hidden{display:none}.submitted-banner .check{width:18px;height:18px;border-radius:50%;background:var(--color-success-neon);color:var(--color-bg-primary);font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}.slider-arcade-wrap{padding:0 var(--space-md);margin-bottom:var(--space-md);position:relative}.slider-arcade{padding:10px;background:#ffffff0a;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:12px}.slider-btn-year{width:44px;height:44px;border-radius:50%;background:var(--color-bg-primary);border:2px solid rgba(255,255,255,.15);color:var(--color-text-white);font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);touch-action:manipulation}.slider-btn-year:hover,.slider-btn-year:focus-visible{border-color:var(--color-accent-secondary);color:var(--color-accent-secondary);outline:none}.slider-btn-year:disabled{opacity:.4;cursor:not-allowed}.slider-btn-year--coarse{position:relative;width:36px;height:36px;font-size:13px;font-weight:800;letter-spacing:-.02em}.slider-btn-year--coarse:after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}.slider-arcade{gap:8px}.slider-arcade-track{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:4px}.year-scale{position:relative;height:13px;margin:0 2px;pointer-events:none}.year-scale span{position:absolute;top:0;transform:translate(-50%);font-size:10px;font-weight:600;letter-spacing:.02em;color:var(--color-text-muted, rgba(255, 255, 255, .42));font-variant-numeric:tabular-nums;white-space:nowrap;user-select:none}.slider-arcade.slider-arcade--locked .year-scale{opacity:.5}.year-slider-arcade{-webkit-appearance:none;appearance:none;width:100%;height:10px;background:linear-gradient(90deg,#00f5ff26,#ff2d6a40,#39ff1426);border-radius:var(--radius-full);outline:none;cursor:pointer}.year-slider-arcade::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:32px;height:32px;border-radius:50%;background:var(--color-accent-primary);border:3px solid var(--color-bg-primary);box-shadow:var(--glow-primary);cursor:grab;transition:transform var(--transition-fast)}.year-slider-arcade::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.05)}.year-slider-arcade::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:var(--color-accent-primary);border:3px solid var(--color-bg-primary);box-shadow:var(--glow-primary);cursor:grab}.slider-arcade.slider-arcade--locked{opacity:.55;pointer-events:none}.slider-arcade.slider-arcade--locked .year-slider-arcade::-webkit-slider-thumb{background:var(--color-success-neon);box-shadow:0 0 16px #39ff1499}.slider-arcade.slider-arcade--locked .year-slider-arcade::-moz-range-thumb{background:var(--color-success-neon);box-shadow:0 0 16px #39ff1499}.guess-lock-stamp{position:absolute;right:calc(var(--space-md) + 8px);top:-10px;padding:3px 10px;font-family:var(--font-display);font-weight:900;font-size:10px;color:var(--color-success-neon);background:var(--color-bg-primary);border:1px solid rgba(57,255,20,.4);border-radius:var(--radius-full);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 0 8px #39ff1440}.guess-lock-stamp.hidden{display:none}.arc-tiles{padding:12px 14px;margin:0 var(--space-md) var(--space-md);background:linear-gradient(180deg,#00f5ff0a,#ffffff05);border:1px solid rgba(0,245,255,.18);border-radius:var(--radius-lg);box-shadow:inset 0 0 12px #00f5ff0a}.arc-tiles.hidden{display:none}.arc-tiles-header{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-neon-muted);margin-bottom:10px;gap:var(--space-sm)}.arc-tiles-header>span:first-child{display:flex;align-items:center;gap:6px;min-width:0}.arc-tiles-bonus{background:#39ff1426;color:var(--color-success-neon);font-weight:900;font-size:11px;padding:2px 8px;border-radius:var(--radius-full);letter-spacing:.04em;flex-shrink:0}.arc-tiles-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.arc-tiles-grid .artist-option-btn,.arc-tiles-grid .movie-option-btn{padding:14px 10px;background:#ffffff0d;border:2px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);font-family:var(--font-display);font-weight:700;font-size:15px;text-align:center;color:var(--color-text-white);box-shadow:0 4px #0000004d;transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast);cursor:pointer;min-height:56px}.arc-tiles-grid .artist-option-btn:hover,.arc-tiles-grid .movie-option-btn:hover,.arc-tiles-grid .artist-option-btn:focus-visible,.arc-tiles-grid .movie-option-btn:focus-visible{border-color:#00f5ff8c;outline:none}.arc-tiles-grid .artist-option-btn:active,.arc-tiles-grid .movie-option-btn:active{transform:translateY(1px);box-shadow:0 2px #0000004d}.arc-tiles-grid .artist-option-btn.is-loading{background:linear-gradient(135deg,#00f5ff33,#00f5ff0d);border-color:var(--color-accent-secondary);color:var(--color-accent-secondary);animation:arc-tile-pulse 1s ease-in-out infinite}@keyframes arc-tile-pulse{0%,to{opacity:1}50%{opacity:.7}}.arc-tiles-grid .artist-option-btn.is-winner,.arc-tiles-grid .artist-option-btn.is-correct,.arc-tiles-grid .movie-option-btn.is-winner,.arc-tiles-grid .movie-option-btn.is-correct{background:linear-gradient(135deg,#39ff1440,#39ff1414);border-color:var(--color-success-neon);color:var(--color-success-neon);box-shadow:0 0 20px #39ff1480,0 4px #0000004d}.arc-tiles-grid .artist-option-btn.is-wrong,.arc-tiles-grid .artist-option-btn.is-wrong.is-selected,.arc-tiles-grid .movie-option-btn.is-wrong{opacity:.5;border-style:dashed}.arc-tiles-grid .artist-option-btn.is-disabled,.arc-tiles-grid .movie-option-btn.is-disabled{opacity:.6;cursor:not-allowed;box-shadow:none}@media(prefers-reduced-motion:reduce){.arc-tiles-grid .artist-option-btn.is-loading{animation:none}}.bonus-filler{padding:var(--space-md);margin:0 var(--space-md) var(--space-md);background:#ffffff05;border:1px dashed rgba(255,255,255,.1);border-radius:var(--radius-lg);text-align:center;font-family:var(--font-body);font-size:12px;color:var(--color-text-dim);font-style:italic;display:flex;align-items:center;justify-content:center;gap:6px}.bonus-filler.hidden{display:none}.arc-actions{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:0 var(--space-md);margin-bottom:var(--space-md)}.bet-arc{width:72px;height:60px;background:transparent;border:2px solid rgba(255,45,106,.5);color:var(--color-accent-primary);border-radius:var(--radius-lg);font-family:var(--font-display);font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 4px #0000004d;cursor:pointer;transition:all var(--transition-fast)}.bet-arc .bet-icon{font-size:22px;line-height:1}.bet-arc .bet-label{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.bet-arc.is-active{background:#ff2d6a26;box-shadow:var(--glow-primary),0 4px #0000004d}.bet-arc:active{transform:translateY(2px);box-shadow:0 2px #0000004d}.bet-arc:disabled{opacity:.55;cursor:not-allowed}.submit-arc{background:linear-gradient(180deg,#ff4d82,var(--color-accent-primary));border:0;color:var(--color-text-white);border-radius:var(--radius-lg);padding:16px 20px;font-family:var(--font-display);font-weight:900;font-size:17px;letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--glow-primary),0 6px #b4143c99;cursor:pointer;transition:transform var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:8px}.submit-arc:active{transform:translateY(2px);box-shadow:var(--glow-primary),0 4px #b4143c99}.submit-arc:disabled{background:#ffffff0f;color:var(--color-text-neon-muted);box-shadow:0 4px #0000004d;cursor:not-allowed;text-shadow:none}.submit-arc.submit-arc--waiting{background:#ffffff0d;color:var(--color-text-neon-muted);box-shadow:0 4px #0000004d;text-shadow:none}.submit-arc .waiting-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-accent-secondary);box-shadow:0 0 8px #00f5ff80;animation:arc-wait-pulse 1.2s ease-in-out infinite}@keyframes arc-wait-pulse{0%,to{opacity:.4}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.submit-arc .waiting-dot{animation:none}}.steal-btn-full{margin:0 var(--space-md) var(--space-md);background:#00f5ff14;border:2px solid var(--color-accent-secondary);color:var(--color-accent-secondary);border-radius:var(--radius-lg);padding:14px;font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 16px #00f5ff4d,0 4px #0000004d;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform var(--transition-fast)}.steal-btn-full.hidden{display:none}.steal-btn-full:active{transform:translateY(2px);box-shadow:0 0 16px #00f5ff4d,0 2px #0000004d}.steal-btn-full .steal-btn-icon{font-size:18px}.powerup-btn-row{display:flex;gap:var(--space-md);margin:0 var(--space-md) var(--space-md)}.powerup-btn-row .steal-btn-full,.powerup-btn-row .sabotage-btn-full{flex:1;margin:0}.sabotage-btn-full{background:#ff2d5514;border:2px solid var(--color-danger, #ff2d55);color:var(--color-danger, #ff2d55);border-radius:var(--radius-lg);padding:14px;font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 16px #ff2d554d,0 4px #0000004d;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform var(--transition-fast)}.sabotage-btn-full.hidden{display:none}.sabotage-btn-full:active{transform:translateY(2px);box-shadow:0 0 16px #ff2d554d,0 2px #0000004d}.sabotage-btn-full .sabotage-btn-icon{font-size:18px}.arc-chip--sabotage{color:var(--color-danger, #ff2d55);background:#ff2d5514;border:1px solid rgba(255,45,85,.4)}.player-badge--sabotage{top:-2px;left:2px;background:linear-gradient(135deg,#ff2d55,#c1121f)}.sabotage-confirmation{background:linear-gradient(135deg,#ff2d55,#c1121f);box-shadow:0 4px 20px #ff2d5580}.sabotaged-banner{background:linear-gradient(135deg,#ff2d55,#7c1020);box-shadow:0 4px 20px #ff2d5599}.bet-arc--forced{opacity:.85;cursor:not-allowed}.submit-arc--frozen{opacity:.6;filter:grayscale(.4)}.arc-submission-strip{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px var(--space-md) 12px;font-family:var(--font-body);font-size:11px;color:var(--color-text-dim);font-weight:600}.arc-submission-dots{display:flex;align-items:center;gap:6px}.arc-submission-dots .player-indicator{width:12px;height:12px;min-width:12px;padding:0;background:#ffffff2e;border:0;border-radius:50%;font-size:0;color:transparent;transition:all var(--transition-normal);flex:0 0 auto;overflow:hidden;display:block}.arc-submission-dots .player-indicator>*{display:none!important}.arc-submission-dots .player-indicator.is-submitted{background:var(--color-success-neon);box-shadow:0 0 6px #39ff1480}.arc-submission-dots .player-indicator.is-current-player,.arc-submission-dots .player-indicator.is-current{background:var(--color-accent-secondary);box-shadow:0 0 6px #00f5ff80}.arc-submission-dots .player-indicator.is-current-player.is-submitted{background:var(--color-success-neon);box-shadow:0 0 8px #39ff14b3}.arc-submission-count{color:var(--color-text-dim);font-weight:600}.submitted-confirmation.hidden{display:none}.closest-wins-splash{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#0a0a12b3;backdrop-filter:blur(4px);font-family:var(--font-display);font-weight:900;font-size:40px;color:var(--color-success-neon);letter-spacing:.08em;gap:12px;pointer-events:none;text-shadow:0 0 32px rgba(57,255,20,.55);animation:closest-wins-splash-in 1.6s ease-out both}.closest-wins-splash.hidden{display:none}@keyframes closest-wins-splash-in{0%{opacity:0;transform:scale(.8)}20%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.05)}}#round-indicator.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body:has(#game-view:not(.hidden)) .player-header{display:none}body:has(#game-view:not(.hidden)) .player-container{padding-top:max(var(--space-xs),env(safe-area-inset-top))}body:has(#game-view:not(.hidden)) .arc-header{margin-bottom:var(--space-sm)}body:has(#game-view:not(.hidden)) .year-xxl{font-size:clamp(72px,26vw,104px);margin:2px 0 var(--space-sm)}body:has(#game-view:not(.hidden)) .slider-arcade-wrap{margin-bottom:var(--space-sm)}body:has(#game-view:not(.hidden)) .arc-tiles{padding:10px 12px;margin:0 var(--space-md) var(--space-sm)}body:has(#game-view:not(.hidden)) .arc-tiles-header{margin-bottom:6px}body:has(#game-view:not(.hidden)) .arc-tiles-grid{gap:8px}body:has(#game-view:not(.hidden)) .arc-tiles-grid .artist-option-btn,body:has(#game-view:not(.hidden)) .arc-tiles-grid .movie-option-btn{min-height:52px;padding:12px 10px}body:has(#game-view:not(.hidden)) .arc-actions{margin-bottom:var(--space-sm)}body:has(#game-view:not(.hidden)) .bonus-filler{padding:var(--space-sm) var(--space-md);margin:0 var(--space-md) var(--space-sm)}body.theme-dark .podium{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"hero hero" "second third";gap:var(--space-md);align-items:stretch;justify-content:stretch;margin-bottom:var(--space-xl);padding:0 var(--space-xs)}body.theme-dark .podium-place.podium-1{grid-area:hero;width:100%;padding:var(--space-lg) var(--space-md) var(--space-md);background:linear-gradient(135deg,#ff2d6a24,#00f5ff0f);border:1px solid rgba(255,45,106,.35);border-radius:var(--radius-xl);box-shadow:0 0 40px #ff2d6a2e;text-align:center;justify-content:center}body.theme-dark .podium-place.podium-1 .podium-medal{font-size:38px;margin-bottom:var(--space-xs);filter:drop-shadow(0 0 16px rgba(255,45,106,.6))}body.theme-dark .podium-place.podium-1 .podium-name{font-family:Outfit,sans-serif;font-weight:900;line-height:.92;letter-spacing:-.04em;margin:0 0 var(--space-sm);max-width:100%;white-space:normal;word-break:break-word;overflow:visible;text-overflow:clip;background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(255,45,106,.3));font-size:clamp(40px,14vw,64px)}body.theme-dark .podium-place.podium-1 .podium-score{font-family:Inter,sans-serif;font-weight:700;font-size:var(--font-size-3xl);color:var(--color-accent-secondary);font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(0,245,255,.5);margin-bottom:0}body.theme-dark .podium-place.podium-1 .podium-stand{display:none}body.theme-dark .podium-place.podium-2,body.theme-dark .podium-place.podium-3{width:100%;min-width:0;padding:var(--space-md) var(--space-sm);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-lg);display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;gap:var(--space-sm);text-align:left}body.theme-dark .podium-place.podium-2{grid-area:second;border-color:#00f5ff47;box-shadow:0 0 18px #00f5ff1a}body.theme-dark .podium-place.podium-3{grid-area:third}body.theme-dark .podium-place.podium-2 .podium-medal,body.theme-dark .podium-place.podium-3 .podium-medal{font-size:22px;margin:0;line-height:1}body.theme-dark .podium-place.podium-2 .podium-name,body.theme-dark .podium-place.podium-3 .podium-name{font-family:Outfit,sans-serif;font-weight:800;font-size:var(--font-size-lg);color:var(--color-text-white);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body.theme-dark .podium-place.podium-2 .podium-score,body.theme-dark .podium-place.podium-3 .podium-score{font-family:Outfit,sans-serif;font-weight:900;font-size:var(--font-size-lg);color:var(--color-accent-secondary);font-variant-numeric:tabular-nums;text-shadow:0 0 8px rgba(0,245,255,.3);margin:0;white-space:nowrap}body.theme-dark .podium-place.podium-2 .podium-stand,body.theme-dark .podium-place.podium-3 .podium-stand{display:none}body.theme-dark .podium-place.podium-2.hidden~.podium-place.podium-3:not(.hidden){grid-area:second}body.theme-dark .your-result{background:linear-gradient(135deg,#ff2d6a1a,#00f5ff0a);border:1px solid rgba(255,45,106,.28);box-shadow:0 0 28px #ff2d6a1f}body.theme-dark .your-result-rank{font-family:Outfit,sans-serif;font-weight:900;font-size:var(--font-size-4xl);letter-spacing:-.03em}body.theme-dark .your-result-stats .stat-value{font-family:Outfit,sans-serif;font-weight:800}.plh-root{display:flex;flex-direction:column;min-height:100%;height:100%;background:var(--color-bg-primary);color:var(--color-text-white);font-family:var(--font-body);font-variant-numeric:tabular-nums;position:relative;isolation:isolate;overflow:hidden}.plh-root:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 25% at 50% 0%,rgba(255,45,106,.12),transparent 60%),radial-gradient(ellipse 60% 30% at 30% 60%,rgba(0,245,255,.06),transparent 60%)}.plh-header{position:sticky;top:0;z-index:5;background:#0a0a12d1;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:8px 14px 6px;border-bottom:1px solid rgba(255,255,255,.04)}.plh-titlebar{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.plh-wordmark{font-family:var(--font-display);font-weight:900;font-size:20px;letter-spacing:-.02em;line-height:1;background:linear-gradient(90deg,var(--color-accent-primary) 0%,var(--color-accent-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.plh-search{position:relative;margin-bottom:10px}.plh-search input{width:100%;height:40px;padding:0 38px 0 40px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);border-radius:10px;color:var(--color-text-white);font-family:var(--font-body);font-weight:500;font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s}.plh-search input:focus{border-color:var(--color-accent-secondary);box-shadow:0 0 0 3px #00f5ff26}.plh-search input::placeholder{color:var(--color-text-neon-muted);opacity:.6}.plh-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-accent-secondary);opacity:.75}.plh-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--color-dark-surface-hover);border:none;color:var(--color-text-neon-muted);font-family:var(--font-display);font-weight:900;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center}.plh-segmented{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:4px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);border-radius:10px;margin-bottom:10px}.plh-seg{background:transparent;border:none;padding:8px 4px;cursor:pointer;border-radius:7px;display:flex;flex-direction:column;gap:1px;align-items:center;line-height:1.1;font-family:var(--font-body);font-weight:700;font-size:12px;color:var(--color-text-neon-muted);letter-spacing:.04em;transition:background .15s,color .15s}.plh-seg .plh-seg-num{font-family:var(--font-display);font-weight:900;font-size:15px;color:var(--color-text-neon-muted)}.plh-seg .plh-seg-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase}.plh-seg.active{background:linear-gradient(135deg,#ff2d6a38,#00f5ff24);color:var(--color-text-white);box-shadow:inset 0 0 0 1px #ff2d6a59,0 0 18px #ff2d6a2e}.plh-seg.active .plh-seg-num{color:var(--color-accent-primary)}.plh-seg-community.active{background:linear-gradient(135deg,#9d4edd40,#ff2d6a26);box-shadow:inset 0 0 0 1px #9d4edd73,0 0 18px #9d4edd38}.plh-seg-community.active .plh-seg-num{color:#c89af5}.plh-seg-mine.active{background:linear-gradient(135deg,#00f5ff2e,#ff2d6a1a);box-shadow:inset 0 0 0 1px #00f5ff66,0 0 18px #00f5ff2e}.plh-seg-mine.active .plh-seg-num{color:var(--color-accent-secondary)}.plh-chips{display:flex;gap:7px;overflow-x:auto;padding:0 0 6px;scrollbar-width:none}.plh-chips::-webkit-scrollbar{display:none}.plh-chip{flex-shrink:0;padding:7px 13px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);border-radius:999px;font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--color-text-neon-muted);white-space:nowrap;cursor:pointer;letter-spacing:.01em;transition:background .15s,color .15s,border-color .15s}.plh-chip.active{background:var(--color-accent-primary);color:var(--color-text-white);border-color:transparent;font-weight:700;box-shadow:0 0 16px #ff2d6a73}.plh-list-view,.plh-mix-view{flex:1 1 0;min-height:0;display:flex;flex-direction:column}.plh-body{position:relative;z-index:1;flex:1;overflow-y:auto;padding:14px 0 110px}.plh-loading{padding:40px 20px;text-align:center;font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--color-text-neon-muted)}.plh-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 18px 12px;margin:4px 0 8px;border-bottom:1px solid rgba(0,245,255,.12)}.plh-section-head-title{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:900;font-size:22px;letter-spacing:-.02em;color:var(--color-text-white);line-height:1}.plh-section-head-emoji{font-size:22px;filter:drop-shadow(0 0 12px rgba(0,245,255,.3))}.plh-section-head-meta{font-family:var(--font-body);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-neon-muted);flex-shrink:0}.plh-shelf{margin-bottom:22px}.plh-shelf-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 18px 10px}.plh-shelf-title{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--color-text-white);display:flex;align-items:center;gap:6px}.plh-shelf-see{font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--color-accent-secondary);letter-spacing:.02em;cursor:pointer;background:transparent;border:none;padding:0}.plh-local-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--color-success-neon);box-shadow:0 0 8px var(--color-success-neon);margin-right:8px;vertical-align:middle}.plh-local-badge{font-family:var(--font-body);font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-success-neon);padding:2px 7px;background:#39ff141f;border:1px solid rgba(57,255,20,.4);border-radius:999px;margin-left:8px;vertical-align:middle}.plh-cards{display:flex;gap:12px;overflow-x:auto;padding:0 18px 4px;scrollbar-width:none}.plh-cards::-webkit-scrollbar{display:none}.plh-card{flex-shrink:0;width:160px;cursor:pointer;position:relative;background:transparent;border:none;padding:0;text-align:left;color:inherit;font:inherit}.plh-card .plh-cover{width:160px;height:160px;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 10px 24px #00000080;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:10px}.plh-card .plh-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45) 100%);pointer-events:none;z-index:1}.plh-cover-inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;height:100%}.plh-cover-glyph{font-family:var(--font-display);font-weight:900;font-size:42px;line-height:.9;letter-spacing:-.04em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.plh-cover-glyph-long{font-size:26px;letter-spacing:-.02em}.plh-cover-sub{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#ffffffeb;margin-top:4px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;word-break:break-word;max-width:100%}.plh-cover-badge{position:absolute;top:8px;right:8px;padding:3px 8px;background:#00000080;backdrop-filter:blur(6px);border-radius:999px;font-family:var(--font-body);font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-white);z-index:3}.plh-cover-badge-purple{background:#9d4edd80}.plh-card-meta{padding:8px 2px 0}.plh-card-name{font-family:var(--font-body);font-weight:700;font-size:13px;line-height:1.25;color:var(--color-text-white);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.plh-card-sub{font-family:var(--font-body);font-weight:500;font-size:11px;color:var(--color-text-neon-muted);margin-top:2px;letter-spacing:.02em}.plh-card-sub b{color:var(--color-accent-secondary);font-weight:700}.plh-card-local{font-family:var(--font-body);font-weight:500;font-size:11px;color:var(--color-success-neon);margin-top:2px;letter-spacing:.02em}.plh-card-local b{color:var(--color-success-neon);font-weight:800}.plh-card-local-when{color:var(--color-text-neon-muted)}.plh-card-local-when b{color:var(--color-accent-secondary)}.plh-pill{position:absolute;top:8px;left:8px;z-index:4;display:inline-flex;align-items:center;gap:4px;padding:5px 10px 5px 8px;border-radius:999px;background:#ff2d6aeb;color:var(--color-text-white);font-family:var(--font-display);font-weight:800;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:1px solid rgba(255,255,255,.12);box-shadow:0 4px 12px #0006,0 0 14px #ff2d6a59;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .15s,color .15s,box-shadow .15s,filter .15s}.plh-pill:hover{filter:brightness(1.1)}.plh-pill-label{line-height:1}.plh-card-selected .plh-pill{background:var(--color-success-neon);color:var(--color-bg-primary);border-color:transparent;box-shadow:0 4px 12px #0006,0 0 18px #39ff148c}.plh-card-selected .plh-cover{box-shadow:0 0 0 3px var(--color-success-neon),0 10px 24px #00000080}.plh-check{display:none}.plh-featured .plh-card,.plh-featured .plh-card .plh-cover{width:160px}.plh-featured .plh-card .plh-cover{height:200px;padding:2px;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));box-shadow:0 12px 30px #0009,0 0 24px #ff2d6a40}.plh-featured .plh-card .plh-cover:after{border-radius:10px;margin:2px;inset:2px}.plh-featured .plh-cover-inner{padding:10px}.plh-featured .plh-cover-glyph{font-size:48px}.plh-card-community .plh-cover{background:linear-gradient(135deg,#240046,#7209b7,#ff2d6a);box-shadow:0 12px 30px #0009,0 0 28px #9d4edd66}.plh-tint-pop{background:linear-gradient(135deg,#ff2d6a,#ff6b9d 60%,#ff8c42)}.plh-tint-rock{background:linear-gradient(135deg,#c1121f,#ff4d1c 60%,#ff8c42)}.plh-tint-hiphop{background:linear-gradient(135deg,#7209b7,#b5179e 60%,#ff2d6a)}.plh-tint-jazz{background:linear-gradient(135deg,#b08968,#e6a855 60%,#ffc94a)}.plh-tint-metal{background:linear-gradient(135deg,#1a0000,#6a040f 60%,#c1121f)}.plh-tint-eu{background:linear-gradient(135deg,#00b4d8,#0077b6 60%,#03045e)}.plh-tint-latin{background:linear-gradient(135deg,#f60,#ffb703 60%,#fdd85d)}.plh-tint-schlager{background:linear-gradient(135deg,#ff8fab,#ffc2d1 60%,#fae0e4)}.plh-tint-schlager .plh-cover-glyph,.plh-tint-schlager .plh-cover-sub{color:#2a0a1a;text-shadow:none}.plh-tint-soul{background:linear-gradient(135deg,#6a0572,#ab4287 60%,#fcbf49)}.plh-tint-purple{background:linear-gradient(135deg,#240046,#7209b7,#ff2d6a)}.plh-banner{margin:0 18px 18px;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,#9d4edd2e,#ff2d6a1a);border:1px solid rgba(157,78,221,.35);display:flex;align-items:center;gap:12px;cursor:pointer}.plh-banner-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#7209b7,var(--color-accent-primary));display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:0 0 14px #9d4edd80}.plh-banner-body{flex:1;min-width:0}.plh-banner-title{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--color-text-white);line-height:1.2}.plh-banner-sub{font-family:var(--font-body);font-weight:500;font-size:11px;color:var(--color-text-neon-muted);margin-top:2px;line-height:1.35}.plh-banner-arrow{font-family:var(--font-display);font-weight:900;font-size:22px;color:#c89af5}.plh-mine-empty{padding:30px 24px;text-align:center}.plh-empty-emoji{font-size:64px;margin-bottom:12px;filter:drop-shadow(0 0 24px rgba(0,245,255,.3))}.plh-mine-title{font-family:var(--font-display);font-weight:900;font-size:26px;color:var(--color-text-white);margin:0 0 8px;letter-spacing:-.01em;line-height:1.1}.plh-mine-body{font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--color-text-neon-muted);margin:0 0 20px;line-height:1.5}.plh-mine-body b{color:var(--color-text-white);font-weight:700}.plh-request-cta{margin:0 0 16px;padding:20px;background:linear-gradient(135deg,#00f5ff1a,#ff2d6a0f);border:1px solid rgba(0,245,255,.35);border-radius:16px;text-align:left}.plh-request-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.plh-request-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--color-accent-secondary),#0077b6);display:flex;align-items:center;justify-content:center;color:var(--color-bg-primary);font-family:var(--font-display);font-weight:900;font-size:22px;box-shadow:0 0 16px #00f5ff80}.plh-request-titles{flex:1;min-width:0}.plh-request-t1{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--color-text-white);line-height:1.2}.plh-request-t2{font-family:var(--font-body);font-weight:500;font-size:12px;color:var(--color-text-neon-muted);margin-top:2px;line-height:1.35}.plh-meanwhile{margin:12px 0 0;padding:14px 16px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);border-radius:12px;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left}.plh-meanwhile-icon{color:var(--color-accent-secondary);font-family:var(--font-display);font-weight:900;font-size:18px;flex-shrink:0}.plh-meanwhile-body{flex:1;min-width:0}.plh-meanwhile-t1{font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--color-text-white);line-height:1.2}.plh-meanwhile-t2{font-family:var(--font-body);font-weight:500;font-size:11px;color:var(--color-text-neon-muted);margin-top:2px;line-height:1.35}.plh-meanwhile-arrow{color:var(--color-text-neon-muted);font-family:var(--font-display);font-weight:900;font-size:20px}.plh-mine-head{padding:14px 18px 6px;display:flex;align-items:baseline;justify-content:space-between}.plh-mine-count{font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-neon-muted)}.plh-mine-count b{color:var(--color-text-white);font-weight:900}.plh-new-request{margin:10px 18px 18px;display:flex;align-items:center;gap:12px;padding:14px;background:linear-gradient(90deg,#00f5ff1a,#ff2d6a14);border:1px dashed rgba(0,245,255,.4);border-radius:12px;cursor:pointer}.plh-new-plus{width:36px;height:36px;border-radius:10px;background:var(--color-accent-secondary);color:var(--color-bg-primary);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:20px;box-shadow:0 0 16px var(--color-accent-secondary);flex-shrink:0}.plh-new-t1{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--color-text-white);line-height:1.2}.plh-new-t2{font-family:var(--font-body);font-weight:500;font-size:11px;color:var(--color-text-neon-muted);margin-top:2px}.plh-req-list{padding:0 18px;display:flex;flex-direction:column;gap:10px}.plh-req-card{padding:14px 14px 14px 16px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);border-radius:14px;display:flex;flex-direction:column;gap:10px}.plh-req-card.plh-req-done{border-color:#39ff1459;background:linear-gradient(90deg,rgba(57,255,20,.06),transparent 75%)}.plh-req-card.plh-req-building{border-color:#00f5ff66;background:linear-gradient(90deg,rgba(0,245,255,.06),transparent 75%)}.plh-req-card.plh-req-declined{border-color:#ff2d6a59}.plh-req-row1{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.plh-req-body{min-width:0;flex:1}.plh-req-name{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--color-text-white);line-height:1.2;letter-spacing:-.01em}.plh-req-desc{font-family:var(--font-body);font-weight:500;font-size:11.5px;color:var(--color-text-neon-muted);margin-top:3px;line-height:1.45;word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.plh-req-meta{font-family:var(--font-body);font-weight:600;font-size:10px;color:var(--color-text-light);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}.plh-req-meta b{color:var(--color-text-neon-muted);font-weight:700}.plh-req-link{color:var(--color-accent-secondary);font-weight:700;text-transform:none;letter-spacing:.02em;text-decoration:none}.plh-status-badge{flex-shrink:0;padding:4px 10px;border-radius:999px;font-family:var(--font-display);font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:5px}.plh-sb-dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}.plh-status-badge.pending{background:#f59e0b1f;border:1px solid rgba(245,158,11,.45);color:var(--color-warning)}.plh-status-badge.building{background:#00f5ff1f;border:1px solid rgba(0,245,255,.45);color:var(--color-accent-secondary)}.plh-status-badge.done{background:#39ff141f;border:1px solid rgba(57,255,20,.4);color:var(--color-success-neon)}.plh-status-badge.declined{background:#ff2d6a1f;border:1px solid rgba(255,45,106,.4);color:#ff7ca7}.plh-progress{display:flex;gap:3px;align-items:center}.plh-seg-pill{flex:1;height:3px;border-radius:2px;background:var(--color-border-neon)}.plh-seg-pill.filled-pending{background:var(--color-warning);box-shadow:0 0 6px var(--color-warning)}.plh-seg-pill.filled-building{background:var(--color-accent-secondary);box-shadow:0 0 6px var(--color-accent-secondary)}.plh-seg-pill.filled-done{background:var(--color-success-neon);box-shadow:0 0 6px var(--color-success-neon)}.plh-seg-pill.filled-declined{background:var(--color-accent-primary);box-shadow:0 0 6px var(--color-accent-primary)}.plh-steps-row{display:flex;justify-content:space-between;font-family:var(--font-body);font-weight:600;font-size:9px;color:var(--color-text-light);letter-spacing:.1em;text-transform:uppercase;margin-top:-4px}.plh-steps-row span.active{color:var(--color-text-white);font-weight:800}.plh-empty{padding:30px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.plh-empty-icon{width:96px;height:96px;border-radius:26px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);font-size:42px;position:relative}.plh-empty-icon-search{background:radial-gradient(circle,rgba(0,245,255,.12),var(--color-bg-surface) 60%)}.plh-empty-title{font-family:var(--font-display);font-weight:900;font-size:24px;color:var(--color-text-white);margin:0;letter-spacing:-.01em;line-height:1.15}.plh-empty-body{font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--color-text-neon-muted);margin:0;line-height:1.55;max-width:280px}.plh-cyan{color:var(--color-accent-secondary)}.plh-action-stack{display:flex;flex-direction:column;gap:8px;width:100%;max-width:280px;margin-top:12px}.plh-btn{padding:13px 16px;border-radius:12px;font-weight:800;font-size:13px;letter-spacing:.04em;border:1px solid var(--color-border-neon);background:var(--color-bg-surface);color:var(--color-text-white);cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;text-transform:uppercase;transition:all .15s;font-family:var(--font-display)}.plh-btn:hover{border-color:var(--color-accent-secondary)}.plh-btn-primary{background:linear-gradient(90deg,var(--color-accent-primary),#ff5fa4);border-color:transparent;color:var(--color-text-white);box-shadow:0 0 24px #ff2d6a73}.plh-btn-primary:hover{border-color:transparent;filter:brightness(1.1)}.plh-btn-cyan{background:linear-gradient(90deg,var(--color-accent-secondary),#0077b6);color:var(--color-bg-primary);border-color:transparent;box-shadow:0 0 22px #00f5ff73}.plh-btn-cyan:hover{border-color:transparent;filter:brightness(1.1)}.plh-btn-neon{background:linear-gradient(90deg,var(--color-success-neon),#7bf1ff);color:var(--color-bg-primary);border-color:transparent;box-shadow:0 0 24px #39ff1480}.plh-btn-ghost{background:transparent;color:var(--color-text-neon-muted)}.plh-sheet-host{position:fixed;inset:0;z-index:50;pointer-events:none;display:none}.plh-sheet-host.open{display:block;pointer-events:auto}.plh-scrim{position:absolute;inset:0;background:#05050ab8;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.plh-sheet{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#14141e 0%,var(--color-bg-primary) 100%);border-top-left-radius:28px;border-top-right-radius:28px;box-shadow:0 -12px 40px #0009;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;border-top:1px solid rgba(255,45,106,.25);animation:plh-sheet-in .25s ease-out}.plh-sheet-community{border-top-color:#9d4edd66}.plh-sheet:before{content:"";position:absolute;top:10px;left:50%;transform:translate(-50%);width:48px;height:4px;border-radius:999px;background:#fff3}@keyframes plh-sheet-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}.plh-sheet-close{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);color:var(--color-text-neon-muted);cursor:pointer;font-family:var(--font-display);font-weight:900;font-size:16px;line-height:1;z-index:5;display:flex;align-items:center;justify-content:center}.plh-sheet-head{padding:28px 20px 0;display:flex;gap:14px;align-items:flex-start;flex-shrink:0}.plh-sheet-cover{width:100px;height:100px;border-radius:14px;position:relative;overflow:hidden;flex-shrink:0;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;box-shadow:0 12px 30px #00000080}.plh-sheet-cover-glyph{font-family:var(--font-display);font-weight:900;font-size:36px;line-height:.9;letter-spacing:-.04em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4)}.plh-sheet-cover-sub{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#ffffffe6;margin-top:2px}.plh-sheet-info{flex:1;min-width:0}.plh-sheet-title{font-family:var(--font-display);font-weight:900;font-size:22px;line-height:1.1;letter-spacing:-.02em;color:var(--color-text-white);margin:0}.plh-sheet-author{font-family:var(--font-body);font-weight:500;font-size:12px;color:var(--color-text-neon-muted);margin-top:4px}.plh-sheet-author b{color:var(--color-accent-secondary);font-weight:700}.plh-sheet-stats{display:flex;gap:0;padding:18px 20px 16px;border-bottom:1px solid rgba(255,255,255,.06);margin-top:18px;flex-shrink:0}.plh-stat{flex:1;text-align:center;position:relative}.plh-stat+.plh-stat:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--color-border-neon)}.plh-stat-val{font-family:var(--font-display);font-weight:900;font-size:22px;color:var(--color-text-white);letter-spacing:-.02em;line-height:1}.plh-stat-val-cyan{color:var(--color-accent-secondary)}.plh-stat-val-pink{color:var(--color-accent-primary)}.plh-stat-lbl{font-family:var(--font-body);font-weight:700;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-light);margin-top:4px}.plh-sheet-scroll{flex:1;overflow-y:auto;padding:16px 20px 20px}.plh-sheet-sec-title{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-neon-muted);margin:0 0 10px}.plh-sheet-desc{font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--color-text-neon-muted);line-height:1.55;margin-bottom:16px;padding:14px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);border-radius:12px}.plh-sheet-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.plh-sheet-tag{padding:5px 10px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);border-radius:6px;font-family:var(--font-body);font-weight:600;font-size:11px;color:var(--color-text-white);letter-spacing:.02em}.plh-sheet-providers{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.plh-sheet-provider{padding:6px 10px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);border-radius:8px;font-family:var(--font-body);font-weight:600;font-size:11px;color:var(--color-text-neon-muted)}.plh-sheet-provider b{color:var(--color-accent-secondary);font-weight:800}.plh-sheet-foot{padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px)) 20px;background:#0a0a12f2;border-top:1px solid var(--color-border-neon);display:flex;gap:10px;align-items:center;flex-shrink:0}.plh-sheet-foot .plh-btn{flex:1}.plh-mix-cta:empty{display:none}.plh-cta-bar{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px;padding:10px;background:#0a0a12e0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-border-neon);border-radius:16px;box-shadow:0 12px 40px #0009;align-items:center;z-index:10}.plh-cta-fab{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--color-accent-secondary) 0%,#0ea5c4 100%);border:none;color:var(--color-bg-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 18px #00f5ff73,inset 0 1px #ffffff40;flex-shrink:0;transition:filter .15s}.plh-cta-fab:hover{filter:brightness(1.1)}.plh-cta-fab svg{stroke:#fff;fill:none}.plh-cta-back{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;padding:0 12px;height:44px;border-radius:12px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);color:var(--color-text-white);font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:border-color .15s,background .15s}.plh-cta-back:hover{border-color:var(--color-accent-secondary)}.plh-cta-back svg{opacity:.85}.plh-cta-count{font-family:var(--font-display);font-weight:900;font-size:14px;color:var(--color-success-neon);padding:0 8px;letter-spacing:.04em;text-shadow:0 0 10px rgba(57,255,20,.5)}.plh-cta-start{flex:1;background:linear-gradient(90deg,var(--color-accent-primary),#ff5fa4);border:none;border-radius:12px;padding:12px;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--color-text-white);cursor:pointer;letter-spacing:.02em;box-shadow:0 0 24px #ff2d6a80;display:flex;align-items:center;justify-content:center;gap:8px}.plh-cta-start-count{display:none}.plh-cta-start-label{font-family:var(--font-display);font-weight:700}.plh-cta-start-arrow{opacity:.9;flex-shrink:0}.plh-cta-count-empty{opacity:.5}.plh-cta-count-btn{background:transparent;border:1px solid rgba(57,255,20,.35);border-radius:999px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .1s ease}.plh-cta-count-btn:hover,.plh-cta-count-btn:focus-visible{background:#39ff141f;border-color:#39ff1499;outline:none}.plh-cta-count-btn:active{transform:scale(.96)}.plh-cta-start-disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.plh-sheet-selected{border-top-color:#39ff1459}.plh-selected-head{padding:28px 20px 12px;flex-shrink:0}.plh-selected-title{font-family:var(--font-display);font-weight:900;font-size:20px;color:var(--color-text-white);margin:0 0 4px;letter-spacing:.01em}.plh-selected-subtitle{font-size:13px;color:var(--color-text-neon-muted);letter-spacing:.01em}.plh-selected-scroll{overflow-y:auto;padding:4px 16px 24px;flex:1;min-height:0}.plh-selected-row{display:flex;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.06)}.plh-selected-row:last-child{border-bottom:none}.plh-selected-thumb{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#ffffff0f}.plh-selected-glyph{font-size:20px}.plh-selected-meta{flex:1;min-width:0}.plh-selected-name{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--color-text-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.plh-selected-sub{font-size:12px;color:var(--color-text-neon-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}.plh-selected-sub b{color:var(--color-text-white);font-weight:700}.plh-selected-remove{height:32px;padding:0 12px;border-radius:16px;background:var(--color-bg-surface);border:1px solid rgba(255,45,106,.35);color:#ff5fa4;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .1s ease}.plh-selected-remove:hover,.plh-selected-remove:focus-visible{background:#ff2d6a2e;border-color:#ff2d6aa6;color:#ff7ab3;outline:none}.plh-selected-remove:active{transform:scale(.94)}.plh-selected-remove-label{line-height:1}.plh-selected-empty{text-align:center;padding:36px 20px;color:var(--color-text-neon-muted)}.plh-selected-empty-icon{font-size:36px;margin-bottom:8px}.plh-selected-empty-title{font-family:var(--font-display);font-weight:700;font-size:14px}@media(min-width:720px){.plh-cards{padding:0 24px 4px}.plh-header{padding:16px 24px 12px}.plh-shelf-head{padding:0 24px 10px}.plh-banner,.plh-new-request{margin-left:24px;margin-right:24px}.plh-req-list{padding:0 24px}.plh-mine-head{padding:14px 24px 6px}}.plg-host{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}.plg-scrim{position:absolute;inset:0;background:#000000b8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.plg-modal{position:relative;z-index:1;margin:32px 16px;max-width:880px;width:100%;background:#0f1116;color:#f1f3f7;border-radius:16px;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px #0009;padding:24px 24px 20px;max-height:calc(100vh - 64px);overflow-y:auto;font-family:var(--font-body, system-ui)}.plg-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:#ffffff0f;color:#f1f3f7;border:0;font-size:16px;cursor:pointer}.plg-close:hover{background:#ffffff1f}.plg-title{margin:0 0 4px;font-size:20px;font-family:var(--font-display, system-ui);font-weight:700;letter-spacing:.02em}.plg-sub{margin:0 0 18px;color:#d8dce5;font-size:15px;line-height:1.55}.plg-guide{margin:0 0 18px;background:#14171f;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden}.plg-guide-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;padding:12px 14px;background:transparent;border:0;color:#f1f3f7;font:inherit;font-size:14px;font-weight:700;letter-spacing:.01em;cursor:pointer;text-align:left}.plg-guide-toggle:hover{background:#ffffff08}.plg-guide-chevron{color:#8a92a3;font-size:13px;margin-left:12px}.plg-guide-body{padding:4px 14px 14px;border-top:1px solid rgba(255,255,255,.06)}.plg-guide-steps{list-style:none;margin:12px 0 14px;padding:0;display:flex;flex-direction:column;gap:12px}.plg-guide-step{display:flex;align-items:flex-start;gap:12px}.plg-guide-num{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,#ff3a8c,#cf2e72);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}.plg-guide-text{color:#d8dce5;font-size:13.5px;line-height:1.5}.plg-guide-text b{color:#f1f3f7}.plg-guide-warn{display:flex;align-items:flex-start;gap:10px;background:#ffb80014;border:1px solid rgba(255,184,0,.35);border-radius:10px;padding:10px 12px}.plg-guide-warn-icon{flex:0 0 auto;font-size:14px;line-height:1.5}.plg-guide-warn-text{color:#f0d9a8;font-size:12.5px;line-height:1.55}.plg-guide-warn-text b{color:#ffd66b}.plg-label{display:block;margin:14px 0 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a92a3}.plg-input,.plg-textarea{width:100%;box-sizing:border-box;background:#181b24;color:#f1f3f7;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;outline:none}.plg-input:focus,.plg-textarea:focus{border-color:#5cc8ff}.plg-textarea{min-height:200px;font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:12.5px;line-height:1.45;resize:vertical}.plg-row{display:flex;gap:10px;align-items:center;margin:8px 0 0;flex-wrap:wrap}.plg-hint{color:#8a92a3;font-size:12px}.plg-btn{appearance:none;-webkit-appearance:none;cursor:pointer;border-radius:999px;padding:9px 16px;font:inherit;font-size:13px;font-weight:600;border:0;background:#ffffff14;color:#f1f3f7}.plg-btn:disabled{cursor:not-allowed;opacity:.45}.plg-btn-primary{background:linear-gradient(180deg,#ff3a8c,#cf2e72);color:#fff}.plg-btn-secondary{background:#ffffff1a}.plg-btn-ghost{background:transparent;color:#aab0bd}.plg-btn-success{background:linear-gradient(180deg,#2dd66f,#20b659);color:#04140a}.plg-btn-disabled{background:#ffffff0a;color:#5a606e}.plg-actions{display:flex;gap:10px;margin:16px 0 0;flex-wrap:wrap}.plg-results{margin-top:16px}.plg-verdict{padding:10px 12px;border-radius:10px;margin:6px 0 12px;font-weight:700;font-size:13px}.plg-verdict-ok{background:#2dd66f29;color:#2dd66f;border:1px solid rgba(45,214,111,.4)}.plg-verdict-bad{background:#ff505024;color:#ff8a8a;border:1px solid rgba(255,80,80,.4)}.plg-block{background:#14171f;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px 12px;margin:8px 0}.plg-block h4{margin:0 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#aab0bd}.plg-block ul{margin:0;padding-left:18px;font-size:13px;line-height:1.5}.plg-block-err{border-color:#ff505066}.plg-table-wrap{overflow-x:auto}.plg-table{width:100%;border-collapse:collapse;font-size:11px}.plg-table th,.plg-table td{padding:4px 6px;text-align:center}.plg-table th{color:#8a92a3;font-weight:600;letter-spacing:.04em;border-bottom:1px solid rgba(255,255,255,.08)}.plg-row-idx{color:#aab0bd;text-align:left;font-weight:700}.plg-cell-ok{color:#2dd66f}.plg-cell-bad{color:#ff8a8a;background:#ff50500f}.plg-row-bad{background:#ff50500a}.plg-row-details td{text-align:left;padding-left:24px}.plg-err-list{color:#ff8a8a}.plg-warn-list{color:#ffd66b}.plg-song-issue{padding:8px 0;border-top:1px solid rgba(255,255,255,.05)}.plg-song-issue:first-of-type{border-top:0;padding-top:4px}.plg-song-issue-head{font-weight:700;font-size:12px;margin:0 0 4px;color:#f1f3f7;letter-spacing:.02em}.plg-song-issue ul{margin:0;padding-left:18px;font-size:13px;line-height:1.5}.plg-err-item{color:#ff8a8a}.plg-warn-item{color:#ffd66b}.plg-results-actions{margin-top:0!important;margin-bottom:6px}.plg-hint-inline{font-style:italic}.plg-error{background:#ff50501f;border:1px solid rgba(255,80,80,.4);color:#ff8a8a;border-radius:10px;padding:12px;font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:12px}.plg-footer{margin-top:16px;border-top:1px solid rgba(255,255,255,.06);padding-top:10px;color:#8a92a3;font-size:12px;line-height:1.5}.plg-followup:empty{display:none}.plg-banner{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.5}.plg-banner p{margin:0 0 8px}.plg-banner .plg-row{margin-top:4px;flex-wrap:wrap}.plg-banner-ok{background:#2dd66f24;border:1px solid rgba(45,214,111,.4);color:#c8f3d8}.plg-banner-info{background:#6366f124;border:1px solid rgba(99,102,241,.4);color:#d6d8ff}.ta-reveal-truth{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px;font-family:var(--font-display, inherit);font-size:var(--font-size-md, 1rem);margin-bottom:var(--space-sm, 8px)}.ta-truth-title{font-weight:800}.ta-truth-sep{opacity:.4}.ta-truth-artist{color:var(--color-text-neon-muted, #b3b3c2);font-family:var(--font-body, inherit);font-weight:600}.ta-reveal-own{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:#ffffff08;border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-lg, 12px)}.ta-verdict{text-align:center;font-family:var(--font-display, inherit);font-weight:900;font-size:var(--font-size-lg, 1.125rem);letter-spacing:.01em;padding:8px 12px;margin-bottom:4px;border-radius:var(--radius-md, 8px)}.ta-verdict--win{color:var(--color-success-neon, #39ff14);background:#39ff1424;box-shadow:inset 0 0 18px #39ff141f;text-shadow:0 0 12px rgba(57,255,20,.5)}.ta-verdict--partial{color:var(--color-accent-secondary, #00f5ff);background:#00f5ff1a}.ta-verdict--pending{color:var(--color-accent-secondary, #00f5ff);background:#00f5ff12;font-weight:700;font-style:italic}.ta-verdict--miss{color:var(--color-text-neon-muted, #b3b3c2);background:#ffffff0d}.ta-own-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.ta-own-label{color:var(--color-text-dim, #6b6b7a);font-size:var(--font-size-sm, .875rem);min-width:6em}.ta-own-guess{font-weight:600;flex:1 1 auto;word-break:break-word}.ta-own-row--none{color:var(--color-text-neon-muted, #b3b3c2);font-style:italic}.ta-pill{font-size:.72rem;font-weight:700;padding:2px 10px;border-radius:var(--radius-full, 999px);white-space:nowrap;letter-spacing:.02em}.ta-pill--exact,.ta-pill--fuzzy,.ta-pill--near-miss-accepted{background:#2ee59d29;color:#2ee59d}.ta-pill--near-miss{background:#ffb40029;color:#ffb400}.ta-pill--wrong{background:#ff004024;color:var(--color-error-neon, #ff0040)}.ta-pill--skipped{background:#ffffff14;color:var(--color-text-secondary, #b9b9c6)}.ta-voting{margin-top:var(--space-lg, 24px)}.ta-voting.hidden{display:none}.ta-voting-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:var(--space-md, 16px)}.ta-voting-header>span:not(.ta-voting-countdown){font-family:var(--font-display, inherit);font-weight:900;font-size:var(--font-size-sm, .875rem);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-white, #fff)}.ta-voting-countdown{flex-shrink:0;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;color:var(--color-accent-secondary, #00f5ff);background:radial-gradient(circle at center,var(--color-bg-primary, #0a0a12) 56%,transparent 57%),conic-gradient(var(--color-accent-secondary, #00f5ff) var(--ta-vote-progress, 360deg),rgba(255,255,255,.1) 0);box-shadow:var(--glow-secondary, 0 0 20px rgba(0, 245, 255, .5))}.ta-voting-countdown--closed{width:auto;height:auto;border-radius:var(--radius-full, 999px);padding:4px 12px;font-size:var(--font-size-sm, .875rem);font-weight:700;color:var(--color-text-neon-muted, #b3b3c2);background:#ffffff14;box-shadow:none}.ta-voting-cards{display:flex;flex-direction:column;gap:12px}.ta-vote-card{background:var(--color-bg-surface, rgba(255, 255, 255, .05));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg, 12px);padding:14px}.ta-vote-card--mine{border-color:#ff2d6a73;box-shadow:inset 0 0 16px #ff2d6a12}.ta-vote-card-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.ta-vote-avatar{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display, inherit);font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--color-accent-primary, #ff2d6a),var(--color-neon-purple, #9d4edd))}.ta-vote-who{flex:1;font-weight:700;font-size:var(--font-size-md, 1rem);word-break:break-word}.ta-vote-field{flex-shrink:0;font-size:var(--font-size-xs, .625rem);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-dim, #6b6b7a);background:#ffffff0f;padding:3px 8px;border-radius:var(--radius-full, 999px)}.ta-vote-guess{font-family:var(--font-display, inherit);font-weight:800;font-size:var(--font-size-lg, 1.125rem);margin:2px 0 12px;word-break:break-word}.ta-vote-tally{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}.ta-tally-row{display:flex;align-items:center;gap:8px;font-size:var(--font-size-sm, .875rem);font-weight:700;font-variant-numeric:tabular-nums}.ta-tally-yes{color:var(--color-success-neon, #39ff14);min-width:48px}.ta-tally-no{color:var(--color-error-neon, #ff0040);min-width:48px}.ta-tally-track{flex:1;height:8px;border-radius:var(--radius-full, 999px);background:#ffffff12;overflow:hidden}.ta-tally-fill{display:block;height:100%;border-radius:var(--radius-full, 999px);transition:width var(--transition-normal, .3s) ease-out}.ta-tally-fill--yes{background:var(--color-success-neon, #39ff14);box-shadow:0 0 10px #39ff1480}.ta-tally-fill--no{background:var(--color-error-neon, #ff0040);box-shadow:0 0 10px #ff004073}.ta-vote-actions{display:flex;gap:10px}.ta-vote-btn{position:relative;flex:1;height:48px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg, 12px);background:#ffffff0d;font-size:20px;cursor:pointer;transition:transform var(--transition-fast, .15s),box-shadow var(--transition-fast, .15s),opacity var(--transition-fast, .15s),background var(--transition-fast, .15s)}.ta-vote-btn--yes{background:#39ff141f;border-color:#39ff1466;color:var(--color-success-neon, #39ff14)}.ta-vote-btn--no{background:#ff00401a;border-color:#ff004061;color:var(--color-error-neon, #ff0040)}.ta-vote-btn.is-chosen{transform:translateY(-1px)}.ta-vote-btn--yes.is-chosen{background:#39ff1438;border-color:#39ff1499;box-shadow:var(--glow-success, 0 0 20px rgba(57, 255, 20, .5))}.ta-vote-btn--no.is-chosen{background:#ff004033;border-color:#ff00408c;box-shadow:var(--glow-error, 0 0 20px rgba(255, 0, 64, .5))}.ta-vote-actions--voted .ta-vote-btn{opacity:.34}.ta-vote-actions--voted .ta-vote-btn.is-chosen{opacity:1}.ta-vote-actions--voted .ta-vote-btn.is-chosen:after{content:"\2713";position:absolute;top:3px;right:8px;font-size:12px;font-weight:800}.ta-vote-btn--yes.is-chosen:after{color:var(--color-success-neon, #39ff14)}.ta-vote-btn--no.is-chosen:after{color:var(--color-error-neon, #ff0040)}.ta-voted-caption{margin-top:8px;text-align:center;font-size:var(--font-size-sm, .875rem);color:var(--color-text-neon-muted, #b3b3c2)}.ta-vote-own-note{text-align:center;font-size:var(--font-size-sm, .875rem);font-style:italic;color:var(--color-accent-primary, #ff2d6a);opacity:.85}.ta-override-actions{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}.ta-override-label{margin-right:auto;font-size:var(--font-size-xs, .625rem);color:var(--color-text-dim, #6b6b7a)}.ta-override-btn{padding:6px 14px;border-radius:var(--radius-md, 8px);border:1px solid rgba(255,255,255,.14);background:#ffffff0d;color:var(--color-text-white, #fff);font-weight:700;font-size:var(--font-size-sm, .875rem);cursor:pointer}.ta-override-btn--accept.is-chosen{border-color:var(--color-success-neon, #39ff14);color:var(--color-success-neon, #39ff14)}.ta-override-btn--reject.is-chosen{border-color:var(--color-error-neon, #ff0040);color:var(--color-error-neon, #ff0040)}@media(prefers-reduced-motion:reduce){.ta-tally-fill,.ta-vote-btn{transition:none}}.ta-outcome-card{display:flex;align-items:center;gap:10px;background:var(--color-bg-surface, rgba(255, 255, 255, .05));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg, 12px);padding:11px 13px}.ta-outcome-card--accepted{border-color:#39ff144d}.ta-outcome-card--rejected{opacity:.72}.ta-outcome-avatar{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display, inherit);font-weight:800;font-size:12px;color:#fff;background:linear-gradient(135deg,var(--color-accent-primary, #ff2d6a),var(--color-neon-purple, #9d4edd))}.ta-outcome-main{flex:1;min-width:0}.ta-outcome-who{font-weight:700;font-size:var(--font-size-base, .875rem)}.ta-outcome-field{color:var(--color-text-dim, #6b6b7a);font-weight:600}.ta-outcome-guess{font-size:var(--font-size-sm, .875rem);color:var(--color-text-neon-muted, #b3b3c2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ta-outcome-tally{font-size:var(--font-size-xs, .625rem);color:var(--color-text-dim, #6b6b7a);font-variant-numeric:tabular-nums}.ta-outcome-verdict{flex-shrink:0;display:inline-flex;align-items:center;font-family:var(--font-display, inherit);font-weight:800;font-size:var(--font-size-base, .875rem);padding:5px 11px;border-radius:var(--radius-full, 999px);font-variant-numeric:tabular-nums}.ta-outcome-verdict--accepted{background:#39ff1429;color:var(--color-success-neon, #39ff14)}.ta-outcome-verdict--rejected{background:#ff00401f;color:var(--color-error-neon, #ff0040)}.ta-input-section{display:flex;flex-direction:column;gap:12px;padding:12px 14px;margin:0 var(--space-md) var(--space-md);background:linear-gradient(180deg,#ff2d6a0f,#ffffff05);border:1px solid rgba(255,45,106,.22);border-radius:var(--radius-lg);box-shadow:inset 0 0 12px #ff2d6a0d}.ta-input-section.hidden{display:none}.ta-input-field{display:flex;flex-direction:column;gap:6px}.ta-input-label{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-neon-muted)}.ta-input-points{margin-left:auto;flex-shrink:0;background:#39ff1426;color:var(--color-success-neon);font-weight:900;font-size:11px;letter-spacing:.04em;padding:2px 8px;border-radius:var(--radius-full)}.ta-text-input{width:100%;box-sizing:border-box;padding:12px 14px;background:#ffffff0d;border:2px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);color:var(--color-text-white);font-family:var(--font-body);font-size:16px;line-height:1.3;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.ta-text-input::placeholder{color:var(--color-text-neon-muted);opacity:.55}.ta-text-input:focus{outline:none;border-color:var(--color-accent-primary);box-shadow:0 0 0 3px #ff2d6a33}.ta-input-ack{margin-top:2px;text-align:center;font-family:var(--font-body);font-size:12px;color:var(--color-success-neon)}.ta-input-ack.hidden{display:none}#reveal-view .reveal-container--duel{position:relative;overflow:hidden;isolation:isolate}#reveal-view .reveal-backdrop{position:absolute;top:0;left:0;right:0;height:340px;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(46px) saturate(1.15);transform:scale(1.15);transform-origin:top center;opacity:.5;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 28%,transparent 70%);mask-image:linear-gradient(to bottom,#000 0%,#000 28%,transparent 70%)}#reveal-view .reveal-backdrop--synthetic{background-image:radial-gradient(circle at 28% 22%,#a82054f2,#a8205400 42%),radial-gradient(circle at 78% 14%,#601c96e6,#601c9600 46%),radial-gradient(circle at 18% 82%,#222878e6,#22287800 50%),conic-gradient(from 210deg at 52% 48%,#1a1038,#4a1240 70deg,#7a1e3c 130deg,#2a1454 200deg,#131642,#1a1038 360deg);filter:blur(54px) saturate(1.25)}#reveal-view .reveal-scrim{position:absolute;top:0;left:0;right:0;height:380px;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,18,.78) 0%,rgba(10,10,18,.88) 55%,var(--color-bg-primary) 100%)}#reveal-view .reveal-scrim:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 320px 360px at 50% 24%,#00f5ff21,#00f5ff00 62%)}#reveal-view .reveal-container--duel>*:not(.reveal-backdrop):not(.reveal-scrim):not(.confetti-canvas){position:relative;z-index:1}@media(prefers-reduced-motion:no-preference){#reveal-view .reveal-backdrop{transition:background-image .4s ease}}#reveal-view .song-strip,#reveal-view .score-row,#reveal-view .card-section,#reveal-view .duel-ticket{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 10px 30px #00000059;border-radius:var(--radius-lg)}#reveal-view .card-section:hover{background:#ffffff14;border-color:#ffffff29}#reveal-view .reveal-header-v2{margin-bottom:var(--space-sm)}#reveal-view .song-strip{padding:var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm)}#reveal-view .song-strip-cover{box-shadow:0 2px 10px #00000080;border:1px solid rgba(255,255,255,.15)}#reveal-view .duel-emotion{font-size:30px;letter-spacing:.04em;margin-bottom:var(--space-sm);text-shadow:0 4px 18px rgba(0,0,0,.6)}#reveal-view .duel{padding:var(--space-md) var(--space-xs) var(--space-lg)}#reveal-view .duel-tickets{position:relative;display:flex;justify-content:center;align-items:stretch;gap:var(--space-md);padding-bottom:20px}#reveal-view .duel-ticket{flex:1 1 0;max-width:170px;padding:var(--space-md) var(--space-sm) var(--space-lg);text-align:center}#reveal-view .duel-ticket--you{transform:rotate(-3deg) translateY(4px);border-color:#ff2d6a59;box-shadow:0 14px 34px #00000073,0 0 24px #ff2d6a1f}#reveal-view .duel-ticket--truth{transform:rotate(3deg) translateY(4px);border-color:#00f5ff66;box-shadow:0 14px 34px #00000073,0 0 34px #00f5ff2e}#reveal-view .duel-ticket .duel-label{padding-bottom:var(--space-sm);margin:0 6px var(--space-sm);border-bottom:1.5px dashed rgba(255,255,255,.18)}#reveal-view .duel-ticket .duel-year{font-size:clamp(40px,13vw,54px)}#reveal-view .duel-ticket--you .duel-year.mine{color:var(--color-accent-primary);text-shadow:0 0 18px rgba(255,45,106,.45)}#reveal-view .duel-ticket--truth .duel-year.correct{color:var(--color-accent-secondary);text-shadow:0 0 14px rgba(0,245,255,.9),0 0 38px rgba(0,245,255,.45)}#reveal-view .duel-gap{position:absolute;left:50%;bottom:0;transform:translate(-50%);flex-direction:row;align-items:baseline;gap:5px;min-width:0;padding:6px 16px;border-radius:var(--radius-full);background:#ff660029;border:1px solid rgba(255,102,0,.55);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 6px 18px #00000080,0 0 16px #f603;white-space:nowrap;z-index:3}#reveal-view .duel-gap-x{font-size:var(--font-size-md);color:var(--color-warning-alt);opacity:.9}#reveal-view .duel-gap-n{font-size:var(--font-size-lg);color:var(--color-warning-alt);text-shadow:none}#reveal-view .duel-gap-unit{margin-top:0;font-size:10px;color:var(--color-warning-alt)}#reveal-view .duel-gap--exact{background:#39ff1429;border-color:#39ff148c;box-shadow:0 6px 18px #00000080,0 0 16px #39ff1438}#reveal-view .duel-gap--exact .duel-gap-x,#reveal-view .duel-gap--exact .duel-gap-n,#reveal-view .duel-gap--exact .duel-gap-unit{color:var(--color-success-neon)}#reveal-view .duel-gap--wrong{background:#ff004024;border-color:#ff004080;box-shadow:0 6px 18px #00000080,0 0 16px #ff004033}#reveal-view .duel-gap--wrong .duel-gap-x,#reveal-view .duel-gap--wrong .duel-gap-n,#reveal-view .duel-gap--wrong .duel-gap-unit{color:var(--color-error-neon)}#reveal-view .score-row{border-color:#ffffff1f;box-shadow:0 10px 30px #00000059}#reveal-view .score-row-pts{color:var(--color-success-neon);text-shadow:0 0 16px rgba(57,255,20,.5);font-size:32px}#reveal-view .ta-vote-card,#reveal-view .ta-outcome-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}#reveal-view .next-round-btn{background:linear-gradient(135deg,#ff2d6a,#ff4f86);border-radius:var(--radius-full);box-shadow:0 8px 24px #ff2d6a73,0 0 18px #ff2d6a4d}#reveal-view .next-round-btn:hover{background:linear-gradient(135deg,#ff4f86,#ff2d6a)}#reveal-view .next-round-btn.is-final{background:linear-gradient(135deg,#39ff14,#00f5ff);color:var(--color-bg-primary)}#reveal-view .invite-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-full)}#reveal-view .reveal-admin-buttons{align-items:stretch}#reveal-view .reveal-admin-buttons .invite-btn,#reveal-view .reveal-admin-buttons .next-round-btn{flex:1 1 0;min-width:0;max-width:260px;min-height:56px;padding:12px 20px;font-size:var(--font-size-md);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);text-align:center}#reveal-view #reveal-leaderboard-list{display:flex;flex-direction:column;gap:8px;max-height:none;overflow:visible}#reveal-view .rstand-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#ffffff08;border:1px solid rgba(255,255,255,.06)}#reveal-view .rstand-row--you{border:1px solid var(--color-accent-primary);background:#ff2d6a0f;box-shadow:0 0 16px #ff2d6a38}#reveal-view .rstand-row--taper1{opacity:.85}#reveal-view .rstand-row--taper2{opacity:.68}#reveal-view .rstand-rankcell{display:flex;flex-direction:column;align-items:center;width:26px;flex-shrink:0}#reveal-view .rstand-rank{font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1;color:var(--color-text-white)}#reveal-view .rstand-row--taper1 .rstand-rank,#reveal-view .rstand-row--taper2 .rstand-rank{font-size:18px}#reveal-view .rstand-move{font-size:10px;font-weight:700;line-height:1;margin-top:3px}#reveal-view .rstand-move--up{color:var(--color-success-neon)}#reveal-view .rstand-move--down{color:var(--color-error-neon)}#reveal-view .rstand-move--flat{color:var(--color-text-neon-muted)}#reveal-view .rstand-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--color-text-white);text-shadow:0 1px 2px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15)}#reveal-view .rstand-ident{flex:1;min-width:0}#reveal-view .rstand-name{font-family:var(--font-body);font-weight:700;font-size:15px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;color:var(--color-text-white)}#reveal-view .rstand-you{font-family:var(--font-display);font-weight:800;font-size:9px;letter-spacing:.06em;color:var(--color-accent-primary);background:#ff2d6a26;border:1px solid rgba(255,45,106,.4);border-radius:6px;padding:2px 5px;line-height:1;flex-shrink:0}#reveal-view .rstand-guess{font-size:11px;font-weight:500;color:var(--color-text-neon-muted);line-height:1.2;margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#reveal-view .rstand-guess .rstand-exact{color:var(--color-success-neon);font-weight:600}#reveal-view .rstand-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}#reveal-view .rstand-chip{font-size:10px;font-weight:600;color:var(--color-text-neon-muted);background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:2px 7px;line-height:1.4;white-space:nowrap}#reveal-view .rstand-chip--fire{color:var(--color-warning-alt);border-color:#ff66004d;background:#ff660014}#reveal-view .rstand-chip--steal{color:var(--color-success-neon);border-color:#39ff1447;background:#39ff1412}#reveal-view .rstand-score{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;margin-left:4px}#reveal-view .rstand-total{font-family:var(--font-display);font-weight:900;font-size:22px;line-height:1;color:var(--color-text-white);letter-spacing:-.01em}#reveal-view .rstand-row--taper1 .rstand-total{font-size:20px}#reveal-view .rstand-row--taper2 .rstand-total{font-size:19px}#reveal-view .rstand-delta{font-family:var(--font-body);font-weight:700;font-size:12px;line-height:1;margin-top:4px;color:var(--color-success-neon)}#reveal-view .rstand-delta--zero{color:var(--color-text-neon-muted)}#reveal-view .song-strip{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}#reveal-view .song-strip-main{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm)}#reveal-view .artist-guess-row{display:flex;align-items:center;gap:8px;padding:9px var(--space-md) 9px var(--space-sm);border-top:1px solid rgba(255,255,255,.08)}#reveal-view .artist-guess-row.hidden{display:none}#reveal-view .artist-guess-ic{font-size:14px;flex-shrink:0}#reveal-view .artist-guess-name{font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--color-text-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}#reveal-view .artist-reveal-winner{margin-left:auto;flex-shrink:0;font-family:var(--font-body);font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--radius-full);white-space:nowrap}#reveal-view .artist-reveal-winner.hidden{display:none}#reveal-view .artist-reveal-winner.is-you,#reveal-view .artist-reveal-winner.is-other{color:var(--color-success-neon);background:#39ff141f;border:1px solid rgba(57,255,20,.4)}#reveal-view .artist-reveal-winner.is-you{box-shadow:0 0 12px #39ff1433}#reveal-view .artist-reveal-winner.artist-reveal-no-winner{color:var(--color-text-neon-muted);background:#ffffff0f;border:1px solid rgba(255,255,255,.12)}#reveal-view #fun-fact-container .section-content-padded{display:flex;flex-direction:column;gap:11px}#reveal-view .song-rich-info .song-badges-row{display:flex;gap:8px}#reveal-view .song-rich-info .song-badge{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:11px 6px;border-radius:12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);font-family:var(--font-body);font-size:11px;font-weight:700;line-height:1.2;text-align:center;white-space:normal}#reveal-view .song-rich-info .song-badge .song-badge-icon{font-size:20px}#reveal-view .song-rich-info .song-badges-more{flex:0 0 auto;align-self:center;font-size:11px;color:var(--color-text-neon-muted)}#reveal-view #fun-fact .fun-fact-text,#reveal-view .fun-fact-text{font-size:12px;line-height:1.4;color:var(--color-text-neon-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.playlist-tabs{display:flex;gap:var(--space-lg);border-bottom:1px solid var(--color-border-neon);margin-bottom:var(--space-md)}.playlist-tab{appearance:none;background:none;border:none;padding:10px 2px;margin-bottom:-1px;font:inherit;font-weight:700;font-size:.95rem;color:var(--color-text-neon-muted);cursor:pointer;border-bottom:2px solid transparent;transition:color var(--transition-fast),border-color var(--transition-fast)}.playlist-tab:hover{color:var(--color-text-white)}.playlist-tab.active{color:var(--color-accent-secondary);border-bottom-color:var(--color-accent-secondary)}.playlist-panel.hidden{display:none}.mix-card{background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-lg);padding:var(--space-lg)}.mix-card-head{display:flex;align-items:center;gap:var(--space-sm)}.mix-card-icon{font-size:1.25rem}.mix-card-title{margin:0;font-size:1.25rem;font-weight:800;color:var(--color-text-white)}.mix-card-sub{margin:6px 0 var(--space-lg);color:var(--color-text-neon-muted);font-size:.9rem}.mix-chip-cloud{display:flex;flex-direction:column;gap:var(--space-md)}.mix-chip-row{display:flex;flex-direction:column;gap:8px}.mix-chip-rowlabel{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-neon-muted)}.mix-chip-group{display:flex;flex-wrap:wrap;gap:8px}.mix-chip{appearance:none;padding:6px 14px;border-radius:var(--radius-full);border:1px solid var(--color-border-neon);background:#ffffff0a;color:var(--color-text-neon-muted);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.mix-chip:hover{border-color:#ffffff4d;color:var(--color-text-white)}.mix-chip-group[data-accent=cyan] .mix-chip.active{background:#00f5ff26;border-color:var(--color-accent-secondary);color:var(--color-accent-secondary)}.mix-chip-group[data-accent=pink] .mix-chip.active{background:#ff2d6a26;border-color:var(--color-accent-primary);color:var(--color-accent-primary)}.mix-chip-group[data-accent=indigo] .mix-chip.active{background:#6366f12e;border-color:var(--color-accent-brand);color:#a5b4fc}.mix-empty{color:var(--color-text-neon-muted);font-size:.9rem;margin:0}.mix-divider{height:1px;background:var(--color-border-neon);margin:var(--space-lg) 0}.mix-count-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}.mix-count-label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-neon-muted)}.mix-segmented{display:inline-flex;padding:4px;gap:4px;background:#ffffff0d;border:1px solid var(--color-border-neon);border-radius:10px}.mix-seg{appearance:none;min-width:56px;padding:8px 14px;border:none;border-radius:7px;background:transparent;color:var(--color-text-neon-muted);font:inherit;font-weight:700;cursor:pointer;transition:all var(--transition-fast)}.mix-seg:hover{color:var(--color-text-white)}.mix-seg.active{background:var(--color-accent-brand);color:var(--color-text-white);box-shadow:0 0 14px #6366f180}.mix-preview{display:flex;align-items:center;gap:10px;margin:var(--space-md) 0 var(--space-lg);padding:12px 16px;border-radius:var(--radius-md);background:#00f5ff0f;border:1px solid rgba(0,245,255,.15);color:var(--color-text-white);font-size:.9rem}.mix-preview-dot{width:8px;height:8px;border-radius:50%;background:#1ed760;box-shadow:0 0 8px #1ed760cc;flex-shrink:0}.mix-actions{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap}.mix-actions .btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.mix-save-label{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--color-text-neon-muted);cursor:pointer}#mix-error{margin-top:var(--space-md)}.mix-error-detail{display:block;margin-top:var(--space-xs);font-size:var(--font-size-sm);line-height:1.35;color:var(--color-text-light);word-break:break-word}.mix-tracklist-row{margin:var(--space-sm) 0}.mix-tracklist-row .btn-sm{font-size:.85rem;padding:6px 12px}.mix-tracklist{margin:var(--space-sm) 0 var(--space-md);max-height:280px;overflow-y:auto;border-radius:var(--radius-md);border:1px solid rgba(0,245,255,.15);background:#00f5ff0a}.mix-tracklist.hidden{display:none}.mix-tracklist-head{margin:0;padding:10px 14px;font-size:.8rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--color-text-neon-muted);border-bottom:1px solid rgba(0,245,255,.12);position:sticky;top:0;background:#0a0c18eb}.mix-tracklist-empty{margin:0;padding:14px;font-size:.9rem;color:var(--color-text-neon-muted)}.mix-track-list{list-style:none;margin:0;padding:4px 0;counter-reset:mix-track}.mix-track{display:flex;align-items:baseline;gap:8px;padding:6px 14px;font-size:.88rem;color:var(--color-text-white)}.mix-track:before{counter-increment:mix-track;content:counter(mix-track);flex-shrink:0;min-width:1.8em;text-align:right;font-variant-numeric:tabular-nums;color:var(--color-text-neon-muted);opacity:.7}.mix-track-title{font-weight:500}.mix-track-artist{color:var(--color-text-neon-muted)}.mix-track-artist:before{content:"\2014 "}.mix-track-year{margin-left:auto;flex-shrink:0;color:var(--color-text-neon-muted);font-variant-numeric:tabular-nums;opacity:.7}.beatify-toast-container{position:fixed;top:var(--space-md);left:50%;transform:translate(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);width:min(92vw,440px);pointer-events:none}.beatify-toast{pointer-events:auto;width:100%;display:flex;align-items:flex-start;gap:var(--space-sm);position:relative;overflow:hidden;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-lg);background:#141422f5;border:1px solid var(--color-error-neon);box-shadow:0 0 20px #ff004073,0 8px 32px #00000073;color:var(--color-text-white);font-family:var(--font-body);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);opacity:0;transform:translateY(-12px);transition:opacity var(--transition-normal),transform var(--transition-normal)}.beatify-toast--in{opacity:1;transform:translateY(0)}.beatify-toast--leaving{opacity:0;transform:translateY(-12px)}.beatify-toast--info{border-color:var(--color-accent-secondary);box-shadow:0 0 20px #00f5ff66,0 8px 32px #00000073}.beatify-toast--success{border-color:var(--color-success-neon);box-shadow:0 0 20px #39ff1466,0 8px 32px #00000073}.beatify-toast-body{display:flex;align-items:flex-start;gap:var(--space-sm);flex:1 1 auto;min-width:0}.beatify-toast-icon{font-size:var(--font-size-lg);line-height:1.3;flex-shrink:0}.beatify-toast-text{line-height:1.35;word-break:break-word}.beatify-toast-close{flex-shrink:0;background:none;border:none;color:var(--color-text-neon-muted);font-size:var(--font-size-xl);line-height:1;cursor:pointer;padding:0 var(--space-xs);transition:color var(--transition-fast)}.beatify-toast-close:hover{color:var(--color-text-white)}.beatify-toast-progress{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left center;background:var(--color-error-neon);box-shadow:0 0 8px var(--color-error-neon);animation:beatify-toast-drain linear forwards}.beatify-toast--info .beatify-toast-progress{background:var(--color-accent-secondary);box-shadow:0 0 8px var(--color-accent-secondary)}.beatify-toast--success .beatify-toast-progress{background:var(--color-success-neon);box-shadow:0 0 8px var(--color-success-neon)}@keyframes beatify-toast-drain{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.beatify-banner{display:flex;align-items:flex-start;gap:var(--space-sm);margin-bottom:var(--space-md);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-lg);background:#ff004014;border:1px solid var(--color-error-neon);box-shadow:inset 0 0 16px #ff00401f;color:var(--color-text-white);font-family:var(--font-body);font-size:var(--font-size-base);text-align:left}.beatify-banner--warning{background:#f59e0b1a;border-color:var(--color-warning);box-shadow:inset 0 0 16px #f59e0b1f}.beatify-banner--info{background:#00f5ff14;border-color:var(--color-accent-secondary);box-shadow:inset 0 0 16px #00f5ff1f}.beatify-banner-icon{font-size:var(--font-size-lg);line-height:1.2;flex-shrink:0}.beatify-banner-content{flex:1 1 auto;min-width:0}.beatify-banner-title{font-family:var(--font-display);font-weight:var(--font-weight-bold);margin-bottom:2px;color:var(--color-error-neon)}.beatify-banner--warning .beatify-banner-title{color:var(--color-warning)}.beatify-banner--info .beatify-banner-title{color:var(--color-accent-secondary)}.beatify-banner-text{line-height:1.4;color:var(--color-text-neon-muted);word-break:break-word}.beatify-banner-detail{margin-top:var(--space-xs);font-size:var(--font-size-sm);line-height:1.35;color:var(--color-text-light);word-break:break-word}.beatify-banner-action{margin-top:var(--space-xs);background:none;border:1px solid currentColor;border-radius:var(--radius-sm);color:var(--color-error-neon);font-family:var(--font-body);font-size:var(--font-size-sm);line-height:1.2;padding:6px var(--space-sm);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.beatify-banner-action:hover{background:var(--color-error-neon);color:var(--color-bg-primary)}.beatify-banner--warning .beatify-banner-action{color:var(--color-warning)}.beatify-banner--warning .beatify-banner-action:hover{background:var(--color-warning)}.beatify-banner--info .beatify-banner-action{color:var(--color-accent-secondary)}.beatify-banner--info .beatify-banner-action:hover{background:var(--color-accent-secondary)}.beatify-banner-close{flex-shrink:0;background:none;border:none;color:var(--color-text-neon-muted);font-size:var(--font-size-xl);line-height:1;cursor:pointer;padding:0 var(--space-xs);transition:color var(--transition-fast)}.beatify-banner-close:hover{color:var(--color-text-white)}@media(prefers-reduced-motion:reduce){.beatify-toast{transition:none;opacity:1;transform:none}.beatify-toast-progress{animation:none}}.steal-target-row{display:flex;align-items:center;gap:var(--space-sm);text-align:left}.steal-target-rank{flex-shrink:0;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);font-family:var(--font-display);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);color:var(--color-text-neon-muted)}.steal-target-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--font-weight-semibold)}.steal-target-score{flex-shrink:0;font-family:var(--font-display);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums;color:var(--color-accent-secondary);text-shadow:0 0 8px rgba(0,245,255,.5)}.steal-target-crown{flex-shrink:0;font-size:var(--font-size-md);line-height:1}.steal-target-row--leader{border-color:var(--color-warning);box-shadow:0 0 14px #f59e0b59,inset 0 0 10px #f59e0b1f}.steal-target-row--leader .steal-target-rank{border-color:var(--color-warning);color:var(--color-warning);box-shadow:0 0 8px #f59e0b66}.steal-target-row--leader .steal-target-score{color:var(--color-warning);text-shadow:0 0 8px rgba(245,158,11,.5)}.dotaxis-legend-acc{display:inline-flex;align-items:center;gap:3px;margin-left:4px;padding:1px 6px;border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border:1px solid currentColor;white-space:nowrap}.dotaxis-legend-acc-glyph{font-size:.95em;line-height:1}.dotaxis-legend-acc--exact{color:var(--color-accent-secondary)}.dotaxis-legend-acc--near{color:var(--color-warning)}.dotaxis-legend-acc--off{color:var(--color-text-neon-muted)}.player-tile-away{display:inline-flex;align-items:center;gap:3px}.player-tile-away-glyph{font-size:.9em;line-height:1}.timer-neon{position:relative}.timer-neon-ring{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);transform:rotate(-90deg);pointer-events:none}.timer-neon-ring-bg{fill:none;stroke:#ffffff1f;stroke-width:4}.timer-neon-ring-fg{fill:none;stroke:var(--color-accent-secondary);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(0,245,255,.6));transition:stroke-dashoffset 1s linear,stroke var(--transition-normal)}.timer-neon--warn .timer-neon-ring-fg,.timer-neon-ring--warn .timer-neon-ring-fg{stroke:var(--color-warning);filter:drop-shadow(0 0 6px rgba(245,158,11,.7))}.timer-neon-ring--critical .timer-neon-ring-fg{stroke:var(--color-error-neon);filter:drop-shadow(0 0 7px rgba(255,0,64,.8))}@media(prefers-reduced-motion:reduce){.timer-neon-ring-fg{transition:none}.arc-chip--elim{color:var(--color-error-neon);background:#ff00401f;border:1px solid rgba(255,0,64,.5);text-transform:uppercase}.sd-live-toggle{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:var(--radius-md);background:var(--color-bg-surface);border:1px solid rgba(255,255,255,.12);font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--color-text-white);cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.sd-live-toggle:disabled{opacity:.4;cursor:not-allowed}.sd-live-toggle.is-on{border-color:var(--color-accent-primary);background:#ff2d6a14;box-shadow:var(--glow-primary)}.sd-live-toggle__switch{position:relative;width:30px;height:17px;border-radius:var(--radius-full);background:#ffffff26;flex:none}.sd-live-toggle.is-on .sd-live-toggle__switch{background:var(--color-accent-primary)}.sd-live-toggle__switch:after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left var(--transition-fast)}.sd-live-toggle.is-on .sd-live-toggle__switch:after{left:15px}.eliminated-view{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--space-sm);min-height:60vh;padding:var(--space-xl) var(--space-md)}.eliminated-orb{width:120px;height:120px;border-radius:var(--radius-full);overflow:hidden;filter:grayscale(1) brightness(.5);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2a2540,#16131f);margin-bottom:var(--space-md);position:relative}.eliminated-orb img{width:100%;height:100%;object-fit:cover}.eliminated-skull{font-size:46px;position:absolute}.eliminated-title{font-family:var(--font-display);font-weight:900;font-size:var(--font-size-4xl);color:var(--color-text-white);letter-spacing:-.02em}.eliminated-sub{color:var(--color-text-neon-muted);font-size:var(--font-size-base)}.eliminated-hint{color:var(--color-text-dim);font-size:var(--font-size-sm);margin-top:var(--space-md)}.cut-line{position:relative;height:0;border-top:2px solid var(--color-accent-primary);box-shadow:0 0 12px #ff2d6ab3;margin:var(--space-md) 0}.cut-line__label{position:absolute;top:-9px;left:50%;transform:translate(-50%);background:var(--color-bg-primary);padding:0 10px;font-family:var(--font-body);font-size:9px;font-weight:700;letter-spacing:.15em;color:var(--color-accent-primary)}.player-indicator.is-eliminated,.leaderboard-entry.is-eliminated{opacity:.45}.player-out-badge{font-size:10px;font-weight:700;color:var(--color-text-dim);letter-spacing:.04em}.sd-out-overlay{position:fixed;inset:0;z-index:900;display:none;flex-direction:column;align-items:center;justify-content:center;background:#06060cf5}.sd-out-overlay.show{display:flex;animation:sd-out-in var(--transition-slow) ease-out}.sd-out__word{font-family:var(--font-display);font-weight:900;font-size:clamp(120px,26vw,360px);line-height:.85;color:var(--color-error-neon);text-shadow:0 0 40px rgba(255,0,64,.7)}.sd-out__name{display:flex;align-items:center;gap:14px;margin-top:var(--space-md);font-family:var(--font-display);font-weight:900;font-size:var(--font-size-4xl);color:var(--color-text-white)}.sd-out__skull{font-size:40px}@keyframes sd-out-in{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.sd-final-banner{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:var(--radius-full);font-family:var(--font-display);font-weight:900;letter-spacing:.06em;color:var(--color-accent-primary);background:#ff2d6a1f;border:1px solid rgba(255,45,106,.5);box-shadow:0 0 16px #ff2d6a4d}.superlative-card--last_one_standing{box-shadow:0 0 18px #ff2d6a4d;border-color:#ff2d6a66}.sd-last-standing{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);text-align:center;margin-bottom:var(--space-lg)}.sd-last-standing__trophy{font-size:40px}.sd-last-standing__headline{font-family:var(--font-display);font-weight:900;font-size:var(--font-size-hero);letter-spacing:-.02em;background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 40px rgba(255,45,106,.5)}.sd-last-standing__winner{font-family:var(--font-body);font-weight:700;font-size:var(--font-size-xl);color:var(--color-text-white)}.sd-last-standing__sub{font-family:var(--font-body);font-weight:500;font-size:var(--font-size-sm);color:var(--color-text-neon-muted)}.sd-out-overlay.show{animation:none}} +:root{--color-bg-primary: #0a0a12;--color-bg-surface: rgba(255, 255, 255, .05);--color-bg-light: #f5f5f5;--color-bg-white: #ffffff;--color-bg-card: #f9fafb;--color-bg-card-alt: #f3f4f6;--color-accent-primary: #ff2d6a;--color-accent-secondary: #00f5ff;--color-accent-brand: #6366f1;--color-accent-brand-hover: #4f46e5;--color-accent-blue: #3b82f6;--color-accent-blue-hover: #2563eb;--color-success: #10b981;--color-success-hover: #059669;--color-success-light: #d1fae5;--color-success-alt: #22c55e;--color-success-neon: #39ff14;--color-warning: #f59e0b;--color-warning-dark: #d97706;--color-warning-light: #fef3c7;--color-warning-alt: #ff6600;--color-error: #ef4444;--color-error-dark: #dc2626;--color-error-light: #fee2e2;--color-error-neon: #ff0040;--color-purple-primary: #8b5cf6;--color-purple-secondary: #7c3aed;--color-neon-purple: #9d4edd;--color-success-bg: rgba(16, 185, 129, .15);--color-accent-brand-bg: rgba(99, 102, 241, .15);--color-error-bg: rgba(239, 68, 68, .15);--color-text-primary: #1f2937;--color-text-secondary: #374151;--color-text-muted: #6b7280;--color-text-light: #9ca3af;--color-text-white: #ffffff;--color-text-dark: #1a1a1a;--color-text-heading: #444444;--color-text-neon-muted: #b3b3c2;--color-border-light: #e5e7eb;--color-border-medium: #d1d5db;--color-border-dark: #333333;--color-border-neon: rgba(255, 255, 255, .1);--color-dark-surface: rgba(255, 255, 255, .05);--color-dark-surface-hover: rgba(255, 255, 255, .08);--color-dark-card: rgba(255, 255, 255, .03);--color-surface-dark: #1a1a2e;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--font-display: "Outfit", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-mono: monospace;--font-size-xs: 10px;--font-size-sm: 12px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px;--font-size-4xl: 32px;--font-size-year: 56px;--font-size-timer: 64px;--font-size-hero: 72px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--glow-primary: 0 0 20px var(--color-accent-primary);--glow-secondary: 0 0 20px var(--color-accent-secondary);--glow-success: 0 0 20px var(--color-success-neon);--glow-warning: 0 0 20px var(--color-warning);--glow-error: 0 0 20px var(--color-error);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 2px 8px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .1);--shadow-xl: 0 8px 32px rgba(0, 0, 0, .15);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--z-control-bar: 100;--z-reaction-bar: 101;--z-modal: 1000;--z-overlay: 1100;--z-toast: 1200}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-system);background:var(--color-bg-light);color:var(--color-text-secondary);line-height:1.5;padding:var(--space-sm);min-height:100vh;overscroll-behavior:none}.wordmark{font-family:"Outfit",var(--font-system);font-weight:900;font-size:var(--font-size-hero);letter-spacing:-.02em;line-height:1}.wordmark-beat{color:var(--color-text-white)}body:not(.theme-dark) .wordmark-beat{color:var(--color-text-primary)}.wordmark-gradient{background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.wordmark-hero{text-shadow:0 0 40px rgba(255,45,106,.5)}.logo-loading{animation:logo-pulse 2s ease-in-out infinite}@keyframes logo-pulse{0%,to{opacity:1}50%{opacity:.7}}@media(prefers-reduced-motion:reduce){.logo-loading{animation:none}}.vinyl-starting{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:24px;box-sizing:border-box}.vinyl-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(20px,5vw,56px);max-width:100%}.vinyl-loader{flex:0 0 auto;width:clamp(130px,28vw,260px);height:clamp(130px,28vw,260px);display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at center,rgba(255,45,106,.18) 0%,rgba(99,102,241,.1) 45%,transparent 70%)}.vinyl-disc{position:relative;width:78%;height:78%;border-radius:50%;background:conic-gradient(from 0deg,var(--color-accent-primary),var(--color-accent-brand),var(--color-accent-secondary),var(--color-accent-brand),var(--color-accent-primary));box-shadow:0 0 40px #ff2d6a59,0 0 80px #00f5ff2e,inset 0 0 30px #00000073;animation:vinyl-spin 3s linear infinite}.vinyl-ring{position:absolute;top:18%;left:18%;width:64%;height:64%;border-radius:50%;border:1.5px dashed rgba(255,255,255,.25)}.vinyl-hole{position:absolute;top:50%;left:50%;width:14%;height:14%;border-radius:50%;background:var(--color-bg-primary);transform:translate(-50%,-50%);box-shadow:0 0 0 4px #0006}.vinyl-copy{flex:1 1 280px;min-width:0;width:min(100%,460px);max-width:460px;text-align:left}.vinyl-copy .vinyl-headline,.vinyl-copy .vinyl-sub,.vinyl-copy .wordmark-hero{overflow-wrap:break-word}.vinyl-copy .wordmark-hero{font-size:clamp(2rem,5vw,3.25rem);margin:0 0 .5em}.vinyl-headline{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:800;color:var(--color-text-white);margin:0 0 .4em}.vinyl-sub{font-size:clamp(.95rem,2.2vw,1.2rem);line-height:1.5;color:var(--color-text-muted);margin:0 0 1.2em}.vinyl-dots{display:flex;gap:12px}.vinyl-dots span{width:12px;height:12px;border-radius:50%;background:var(--color-accent-primary);opacity:.3;animation:vinyl-dot-pulse 1.4s ease-in-out infinite}.vinyl-dots span:nth-child(2){animation-delay:.2s}.vinyl-dots span:nth-child(3){animation-delay:.4s}@keyframes vinyl-spin{to{transform:rotate(360deg)}}@keyframes vinyl-dot-pulse{0%,to{opacity:.3;transform:scale(1)}40%{opacity:1;transform:scale(1.25)}}@media(max-width:640px){.vinyl-copy{text-align:center}.vinyl-dots{justify-content:center}}@media(prefers-reduced-motion:reduce){.vinyl-disc{animation:none}.vinyl-dots span{animation:none;opacity:.7}}header{margin-bottom:var(--space-lg)}header h1{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:var(--color-text-dark)}.admin-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md, 16px)}.admin-header h1{margin:0}.player-header{display:flex;align-items:center;justify-content:center;padding:var(--space-md) var(--space-md) 0}.player-header h1{margin:0}body.theme-dark main.admin-content{max-width:800px;margin:0 auto;padding:var(--space-md, 16px)}.analytics-icon-link{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;text-decoration:none;font-size:1.5rem;transition:background-color .2s ease,transform .2s ease}body.theme-dark .analytics-icon-link{background:#00f5ff1a}body.theme-dark .analytics-icon-link:hover,body.theme-dark .analytics-icon-link:focus{background:#00f5ff33;transform:scale(1.1);outline:none}.admin-header-actions{display:flex;align-items:center;gap:var(--space-xs, 8px)}.pwa-install-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:none;background:#00f5ff1a;font-size:1.5rem;cursor:pointer;transition:background-color .2s ease,transform .2s ease;padding:0}.pwa-install-btn:hover,.pwa-install-btn:focus{background:#00f5ff33;transform:scale(1.1);outline:none}.reset-icon-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:none;background:#ff2d6a1a;color:var(--color-text-white);font-size:1.5rem;cursor:pointer;padding:0;transition:background-color .2s ease,transform .2s ease}.reset-icon-btn:hover,.reset-icon-btn:focus{background:#ff2d6a40;transform:scale(1.1);outline:none}.pwa-ios-hint{position:fixed;bottom:0;left:0;right:0;z-index:1000;display:flex;justify-content:center;padding:var(--space-md, 16px);animation:slideUp .3s ease}.pwa-ios-hint.hidden{display:none}.pwa-ios-hint-content{position:relative;background:var(--color-bg-elevated, #2a2a3e);border-radius:var(--radius-lg, 12px);padding:var(--space-md, 16px) var(--space-lg, 24px);color:var(--color-text, #fff);text-align:center;max-width:340px;box-shadow:0 -2px 20px #0000004d}.pwa-ios-hint-close{position:absolute;top:8px;right:12px;background:none;border:none;color:var(--color-text, #fff);font-size:1.4rem;cursor:pointer;opacity:.6}.pwa-ios-hint-close:hover{opacity:1}.pwa-ios-share-icon{font-size:1.2rem}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.status-section,.card-section{background:var(--color-bg-white);border-radius:var(--radius-lg);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-md);box-shadow:var(--shadow-sm);border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.card-section:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.card-section .section-header{display:flex;align-items:center;gap:var(--space-sm, 8px);margin-bottom:var(--space-sm);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text-heading)}.card-section .section-icon{font-size:1.25rem}.status-section h2,.card-section h2:not(.section-header){font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-sm);color:var(--color-text-heading)}.status-connected{color:var(--color-success-alt);font-weight:var(--font-weight-medium)}.status-error{color:var(--color-error);font-weight:var(--font-weight-medium)}.status-warning{color:var(--color-warning);font-weight:var(--font-weight-medium)}.list-item{padding:var(--space-sm);border-bottom:1px solid var(--color-border-light);display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);transition:background-color .2s ease}.list-item:last-child{border-bottom:none}body.theme-dark .list-item{border-bottom-color:var(--surface-border, #333)}body.theme-dark .list-item:hover{background:#9d4edd1a}.list-item .name{font-weight:var(--font-weight-medium);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-item .meta{color:var(--color-text-muted);font-size:var(--font-size-base);flex-shrink:0}.list-item.is-invalid{background:var(--color-error-light);border-left:3px solid var(--color-error)}.playlist-item.is-disabled{opacity:.5;cursor:not-allowed}.playlist-item.is-disabled .checkbox-label,.playlist-item.is-disabled .playlist-checkbox{cursor:not-allowed}.playlist-item.is-selectable{cursor:pointer}.playlist-item.is-selected,.media-player-item.is-selected{background:#eff6ff;border-left:3px solid var(--color-accent-blue)}body.theme-dark .playlist-item.is-selected,body.theme-dark .media-player-item.is-selected{background:#00f5ff1a;border-left:3px solid var(--color-accent-secondary)}.seasonal-suggestion{position:relative;margin-bottom:12px;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,#ff2d6a24,#6366f124),#12121c;border:1px solid rgba(255,45,106,.45);box-shadow:0 0 0 1px #00f5ff14,0 6px 18px #00000059}.seasonal-suggestion__badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent-secondary, #00f5ff);background:#00f5ff1a;border:1px solid rgba(0,245,255,.3);border-radius:999px;padding:3px 10px;margin-bottom:10px}.seasonal-suggestion__title{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px}.seasonal-suggestion__reason{font-size:13px;line-height:1.4;color:#ffffffb8;margin-bottom:12px}.seasonal-suggestion__add{display:inline-block}.seasonal-suggestion__dismiss{position:absolute;top:8px;right:10px;width:28px;height:28px;line-height:1;font-size:20px;color:#fff9;background:transparent;border:none;border-radius:8px;cursor:pointer}.seasonal-suggestion__dismiss:after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}.seasonal-suggestion__dismiss:hover{color:#fff;background:#ffffff14}body:not(.theme-dark) .seasonal-suggestion{background:linear-gradient(135deg,#ff2d6a14,#6366f114),#fff;border:1px solid rgba(255,45,106,.35);box-shadow:0 4px 14px #00000014}body:not(.theme-dark) .seasonal-suggestion__title{color:#111}body:not(.theme-dark) .seasonal-suggestion__reason{color:#555}body:not(.theme-dark) .seasonal-suggestion__dismiss{color:#888}.playlist-checkbox{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.checkbox-label{display:flex;align-items:center;flex:1;min-width:0;cursor:pointer;padding-left:var(--space-xs)}.playlist-name{font-weight:var(--font-weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selection-summary{padding:var(--space-sm) var(--space-md);background:#f0fdf4;border-radius:var(--radius-md);margin-top:var(--space-sm);font-weight:var(--font-weight-medium);color:#166534}.selection-summary #selected-count,.selection-summary #total-songs{font-family:Outfit,sans-serif;font-weight:700}body.theme-dark .selection-summary{background:#00f5ff1a;border:1px solid var(--color-accent-secondary);color:var(--color-text-white)}body.theme-dark .selection-summary #selected-count,body.theme-dark .selection-summary #total-songs{color:var(--color-accent-secondary);font-size:1.1em}.media-player-item.is-selectable{cursor:pointer}.media-player-radio{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.radio-label{display:flex;align-items:center;flex:1;min-width:0;cursor:pointer;padding-left:var(--space-xs)}.player-name{font-weight:var(--font-weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.state-dot{display:inline-block;width:var(--space-sm);height:var(--space-sm);border-radius:50%;margin-right:6px}.state-dot.state-playing{background:var(--color-success-alt)}.state-dot.state-idle,.state-dot.state-paused,.state-dot.state-off{background:var(--color-text-light)}button,.btn{min-width:44px;min-height:44px;padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast),opacity var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);touch-action:manipulation}.form-input{width:100%;padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--color-bg-secondary);color:var(--color-text-primary);margin-bottom:var(--space-sm);box-sizing:border-box}body.theme-dark .form-input{color:#e2e8f0;background:#ffffff1a;border-color:#ffffff26}.btn-primary{background:var(--color-accent-primary);color:#fff}.btn-primary:hover{background:#e0245c}.btn-primary:disabled{background:var(--color-text-light);cursor:not-allowed;opacity:.55}body.theme-dark .btn-primary{color:#fff}.btn-secondary{background:var(--color-border-light);color:var(--color-text-secondary)}.btn-secondary:hover{background:var(--color-border-medium)}.btn-ghost{background:transparent;color:var(--color-accent-primary);border:1.5px solid var(--color-accent-primary)}.btn-ghost:hover{background:#ff2d6a14}.btn-ghost:disabled{opacity:.45;cursor:not-allowed}.btn-outline{background:transparent;color:var(--color-text-secondary);border:1.5px solid var(--color-border-medium)}.btn-outline:hover{background:var(--color-border-light);border-color:var(--color-text-secondary)}.btn-outline:disabled{opacity:.45;cursor:not-allowed}.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}a{color:var(--color-accent-blue);text-decoration:none}a:hover{text-decoration:underline}.empty-state{text-align:center;padding:var(--space-lg);color:var(--color-text-muted)}.empty-state p{margin-bottom:var(--space-sm)}footer{margin-top:var(--space-lg);text-align:center;color:var(--color-text-light);font-size:var(--font-size-sm)}.hidden{display:none!important}body.theme-dark{background:var(--color-bg-primary);color:var(--color-text-white)}body.theme-dark .player-container{background:var(--color-bg-primary)}body.theme-dark .card-section{background:var(--color-surface-dark);border:1px solid var(--color-border-neon);color:var(--color-text-white)}.admin-content .card-section{margin-bottom:var(--space-md)}body.theme-dark .card-section:hover{box-shadow:0 4px 20px #9d4edd4d}body.theme-dark .card-section h2,body.theme-dark .card-section .section-header,body.theme-dark .card-section p,body.theme-dark .card-section .name,body.theme-dark .card-section .player-name,body.theme-dark .card-section .playlist-name,body.theme-dark .card-section .list-item,body.theme-dark .card-section .radio-label,body.theme-dark .card-section .checkbox-label,body.theme-dark .card-section strong,body.theme-dark .card-section span{color:var(--color-text-white)}body.theme-dark .card-section .meta{color:var(--color-text-neon-muted)}body.theme-dark .game-info{background:#ffffff0d;border:1px solid var(--color-neon-purple);border-radius:var(--radius-md);color:var(--color-text-white)}body.theme-dark .game-info p,body.theme-dark .game-info strong,body.theme-dark .game-info span{color:var(--color-text-white)}body.theme-dark .btn-primary span,body.theme-dark .btn-secondary span{color:inherit}body.theme-dark .lang-btn:not(.lang-btn--active),body.theme-dark .timer-btn:not(.timer-btn--active),body.theme-dark .difficulty-btn:not(.difficulty-btn--active){color:var(--color-text-primary, #1a1a2e)}body.theme-dark .lang-btn:not(.lang-btn--active) span,body.theme-dark .timer-btn:not(.timer-btn--active) span,body.theme-dark .difficulty-btn:not(.difficulty-btn--active) span{color:var(--color-text-primary, #1a1a2e)}.language-selector{display:flex;justify-content:center;gap:var(--space-sm)}.lang-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);border:2px solid var(--color-border-medium);border-radius:var(--radius-md);background:var(--color-bg-white);color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:500;cursor:pointer;transition:all .15s ease}.lang-btn:hover{border-color:var(--color-accent-brand);background:var(--color-bg-card-alt)}.lang-btn--active{border-color:var(--color-accent-brand);background:var(--color-accent-brand);color:var(--color-text-white)}.lang-btn--active:hover{background:var(--color-accent-brand-hover)}.lang-flag{font-size:1.25em}.lang-name{font-weight:600}.timer-selector{display:flex;justify-content:center;gap:var(--space-sm)}.timer-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2xs);padding:var(--space-sm) var(--space-md);min-width:90px;border:2px solid var(--color-border-neon);border-radius:var(--radius-md);background:var(--color-bg-card);color:var(--color-text-secondary);font-family:inherit;cursor:pointer;transition:all .15s ease}.timer-btn:hover{border-color:var(--color-accent-brand);background:var(--color-bg-card-alt)}.timer-btn:focus{outline:none;border-color:var(--color-accent-brand);box-shadow:0 0 0 3px #1ed7604d}.timer-btn:focus-visible{outline:2px solid var(--color-accent-brand);outline-offset:2px}.timer-btn:disabled{opacity:.5;cursor:not-allowed;border-color:var(--color-border-neon);background:var(--color-bg-card)}.timer-btn:disabled:hover{border-color:var(--color-border-neon);background:var(--color-bg-card)}.timer-btn--active{border-color:var(--color-accent-brand);background:var(--color-accent-brand);color:var(--color-text-white)}.timer-btn--active:hover{background:var(--color-accent-brand-hover)}.timer-icon{font-size:1.5em}.timer-label{font-weight:600;font-size:.875rem}.timer-value{font-size:.75rem;opacity:.8}.timer-btn--active .timer-value{opacity:1}.difficulty-selector{display:flex;justify-content:center;gap:var(--space-sm)}.difficulty-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2xs);padding:var(--space-sm) var(--space-md);min-width:90px;border:2px solid var(--color-border-light);border-radius:var(--radius-md);background:var(--color-bg-card);color:var(--color-text-secondary);font-family:inherit;cursor:pointer;transition:all .15s ease}.difficulty-btn:hover{border-color:var(--color-accent-brand);background:var(--color-bg-card-alt)}.difficulty-btn:focus{outline:none;border-color:var(--color-accent-brand);box-shadow:0 0 0 3px #6366f14d}.difficulty-btn:focus-visible{outline:2px solid var(--color-accent-brand);outline-offset:2px}.difficulty-btn--active{border-color:var(--color-accent-brand);background:var(--color-accent-brand);color:var(--color-text-white)}.difficulty-btn--active:hover{background:var(--color-accent-brand-hover)}.difficulty-icon{font-size:1.5em}.difficulty-label{font-weight:600;font-size:.875rem}.difficulty-description{text-align:center;font-size:.8125rem;color:var(--color-text-muted);margin-top:var(--space-sm);line-height:1.5;max-width:400px;margin-left:auto;margin-right:auto}.toggle-option{display:flex;align-items:center;gap:var(--space-md);cursor:pointer;padding:var(--space-sm) 0}.toggle-option input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.toggle-switch{position:relative;width:48px;height:26px;background:var(--color-border);border-radius:13px;transition:background .2s ease;flex-shrink:0}.toggle-switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s ease}.toggle-option input:checked+.toggle-switch{background:var(--color-success)}.toggle-option input:checked+.toggle-switch:after{transform:translate(22px)}.toggle-option input:focus-visible+.toggle-switch{outline:2px solid var(--color-accent-primary);outline-offset:2px}.toggle-label{font-size:var(--font-size-md);font-weight:500;color:var(--color-text)}.option-description{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:var(--space-xs) 0 0 0;padding-left:calc(48px + var(--space-md))}body.theme-dark .toggle-switch{background:var(--color-dark-border, #333)}.provider-selector{display:flex;justify-content:center;gap:var(--space-sm)}.provider-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2xs);padding:var(--space-sm) var(--space-md);min-width:100px;border:2px solid var(--color-border-light);border-radius:var(--radius-md);background:var(--color-bg-card);color:var(--color-text-secondary);font-family:inherit;cursor:pointer;transition:all .15s ease}.provider-btn:hover:not(.provider-btn--disabled){border-color:var(--color-accent-brand);background:var(--color-bg-card-alt)}.provider-btn:focus{outline:none;border-color:var(--color-accent-brand);box-shadow:0 0 0 3px #6366f14d}.provider-btn:focus-visible{outline:2px solid var(--color-accent-brand);outline-offset:2px}.provider-btn--active{border-color:var(--color-accent-brand);background:var(--color-accent-brand);color:var(--color-text-white)}.provider-btn--active:hover{background:var(--color-accent-brand-hover)}.provider-icon{font-size:1.5em}.provider-label{font-weight:600;font-size:.875rem}.playlist-coverage{font-size:.75rem;color:var(--color-text-muted)}.playlist-coverage--warning{color:var(--color-warning)}.playlist-coverage--none{color:var(--color-error)}.playlist-filter-bar{display:flex;flex-direction:column;gap:.75rem;padding:.75rem 0;margin-bottom:.5rem;border-bottom:1px solid var(--color-border)}.filter-dropdowns{display:flex;flex-wrap:wrap;gap:.5rem}.filter-dropdown{padding:.5rem 2rem .5rem .75rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md, 6px);font-size:.875rem;font-weight:500;color:var(--color-text-primary, #333);cursor:pointer;transition:all .15s ease;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;min-width:120px}.filter-dropdown:hover{border-color:var(--color-primary, #6c5ce7)}.filter-dropdown:focus{outline:none;border-color:var(--color-primary, #6c5ce7);box-shadow:0 0 0 2px #6c5ce733}.filter-dropdown:not([value=""]):has(option:checked:not([value=""])){border-color:var(--color-primary, #6c5ce7);background-color:#6c5ce714}.filter-summary{display:flex;align-items:center;gap:.75rem;font-size:.8125rem}.filter-summary-text{color:var(--color-text-secondary, #666)}.filter-clear{padding:.25rem .5rem;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm, 4px);font-size:.75rem;color:var(--color-text-secondary, #666);cursor:pointer;transition:all .15s ease}.filter-clear:hover{background:var(--color-error, #e74c3c);border-color:var(--color-error, #e74c3c);color:#fff}body.theme-dark .filter-dropdown{background-color:#ffffff14;border-color:#ffffff26;color:#ffffffd9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M2 4l4 4 4-4'/%3E%3C/svg%3E")}body.theme-dark .filter-dropdown:hover,body.theme-dark .filter-dropdown:focus{border-color:#6c5ce799}body.theme-dark .filter-summary-text{color:#fff9}body.theme-dark .filter-clear{border-color:#fff3;color:#fff9}.filter-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.4375rem .875rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:.8125rem;font-weight:600;color:var(--color-text-primary, #333);cursor:pointer;transition:all .15s ease;white-space:nowrap}.filter-tag .filter-count{font-size:.6875rem;opacity:.8}.playlist-tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.375rem}.playlist-tag{display:inline-block;padding:.1875rem .5rem;background:var(--color-primary-light, #e8e4f8);border:1px solid var(--color-primary-border, #c9bff2);border-radius:var(--radius-full);font-size:.6875rem;font-weight:500;color:var(--color-primary-dark, #5b4cad);max-width:6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-tag--more{background:transparent;border-color:var(--color-primary-border, #c9bff2);color:var(--color-text-secondary, #666);font-style:italic}body.theme-dark .playlist-tag{background:#6c5ce733;border-color:#6c5ce766;color:#b8acf6}body.theme-dark .playlist-tag--more{background:transparent;color:#ffffff80}.difficulty-badge{display:inline-block;padding:.125rem .5rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;margin-left:var(--space-xs)}.difficulty-badge--easy{background:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success)}.difficulty-badge--normal{background:var(--color-accent-brand-bg);color:var(--color-accent-brand);border:1px solid var(--color-accent-brand)}.difficulty-badge--hard{background:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error)}.supported-players-hint{font-size:.75rem;color:var(--color-text-muted);margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--color-border-light)}.supported-players-hint a{color:var(--color-accent-primary);text-decoration:none}.supported-players-hint a:hover{text-decoration:underline}body.theme-dark .supported-players-hint{color:var(--color-text-neon-muted);border-top-color:var(--color-border-neon)}.player-info{display:flex;flex-direction:column;gap:2px}.platform-badge{display:inline-flex;align-items:center;gap:4px;font-size:.625rem;font-weight:600;padding:2px 6px;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.025em;background:#80808026;color:var(--color-text-muted)}.platform-badge--music_assistant{background:#4caf5026;color:#4caf50}.platform-badge--sonos{background:#ff980026;color:#ff9800}.platform-badge--alexa_media,.platform-badge--alexa{background:#00a8e126;color:#00a8e1}body.theme-dark .platform-badge{background:#ffffff14}body.theme-dark .platform-badge--music_assistant{background:#4caf5033;color:#81c784}body.theme-dark .platform-badge--sonos{background:#ff980033;color:#ffb74d}body.theme-dark .platform-badge--alexa_media,body.theme-dark .platform-badge--alexa{background:#00a8e133;color:#4fc3f7}.no-players-message{text-align:center;padding:var(--space-lg)}.no-players-message h3{font-size:1.125rem;margin-bottom:var(--space-sm)}.no-players-message p{font-size:.875rem;color:var(--color-text-muted);margin-bottom:var(--space-sm)}.no-players-message .button-group{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-md)}.provider-chips{justify-content:flex-start}.provider-chips .chip{display:inline-flex;align-items:center;gap:6px}.provider-icon{font-size:1rem}.warning-box{background:var(--color-warning-bg);border:1px solid var(--color-warning);border-radius:var(--radius-sm);padding:var(--space-sm);margin-top:var(--space-sm);font-size:.875rem}.warning-box p{margin:0 0 var(--space-xs) 0}.warning-box p:last-child{margin-bottom:0}.warning-caveat{font-size:.8125rem;opacity:.85}#provider-hint{font-size:.8125rem;color:var(--color-text-muted);margin-top:var(--space-sm)}body.theme-dark #provider-hint{color:var(--color-text-neon-muted)}.chip--disabled,.provider-btn--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.hint-text{font-size:.75rem;color:var(--color-text-muted);margin:var(--space-xs) 0 0 calc(var(--space-md) + 24px);font-style:italic}body.theme-dark .hint-text{color:var(--color-text-neon-muted)}body.theme-dark .modal-content,body.theme-dark .modal-content h2,body.theme-dark .modal-content p{color:var(--color-text-primary)}body.theme-dark .modal-content .name-input{background:var(--color-bg-white);border-color:var(--color-border-medium);color:var(--color-text-primary)}body.theme-dark .modal-content .name-input::placeholder{color:var(--color-text-muted)}body.theme-dark .modal-content .name-input:focus{border-color:var(--color-accent-blue);box-shadow:0 0 0 3px #3b82f61a}.card{background:var(--color-dark-surface);border-radius:var(--radius-lg);padding:var(--space-md);border:1px solid var(--color-border-neon)}.card-glass{background:var(--color-dark-surface);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--color-border-neon);border-radius:var(--radius-lg)}.btn-neon{background:var(--color-accent-primary);color:var(--color-text-white);border:none;border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast)}.btn-neon:hover{background:#ff4080}.btn-neon:active{transform:scale(.98)}.btn-glow{transition:box-shadow var(--transition-fast),transform var(--transition-fast)}.btn-glow:hover{box-shadow:var(--glow-primary)}.btn-glow:active{transform:scale(.98);box-shadow:var(--glow-primary)}.btn-glow-secondary:hover{box-shadow:var(--glow-secondary)}.btn-glow-success:hover{box-shadow:var(--glow-success)}.text-glow{text-shadow:0 0 10px var(--color-accent-primary),0 0 20px var(--color-accent-primary),0 0 30px var(--color-accent-primary)}.text-glow-cyan{text-shadow:0 0 10px var(--color-accent-secondary),0 0 20px var(--color-accent-secondary),0 0 30px var(--color-accent-secondary)}.text-glow-success{text-shadow:0 0 10px var(--color-success-neon),0 0 20px var(--color-success-neon),0 0 30px var(--color-success-neon)}.text-neon-white{color:var(--color-text-white)}.text-neon-muted{color:var(--color-text-neon-muted)}.text-neon-primary{color:var(--color-accent-primary)}.text-neon-secondary{color:var(--color-accent-secondary)}body.theme-dark .player-container h1,body.theme-dark .lobby-header h1,body.theme-dark .game-container h1,body.theme-dark .reveal-container h1,body.theme-dark .end-container h1{color:var(--color-text-white)}body.theme-dark .player-container p,body.theme-dark .hint,body.theme-dark .player-count{color:var(--color-text-neon-muted)}body.theme-dark .join-form>p{color:var(--color-text-neon-muted)}body.theme-dark .player-card{background:var(--color-dark-surface);border-color:var(--color-border-neon)}body.theme-dark .player-card--you{background:#ff2d6a1a;border-color:var(--color-accent-primary)}body.theme-dark .player-name{color:var(--color-text-white)}body.theme-dark .you-badge{color:var(--color-accent-primary)}body.theme-dark .name-input{background:var(--color-dark-surface);border-color:var(--color-border-neon);color:var(--color-text-white)}body.theme-dark .name-input:focus{border-color:var(--color-accent-primary);box-shadow:0 0 0 3px #ff2d6a33}body.theme-dark .name-input::placeholder{color:var(--color-text-neon-muted)}body.theme-dark .join-btn{background:var(--color-accent-primary);color:var(--color-text-white)}body.theme-dark .join-btn:hover{box-shadow:var(--glow-primary)}body.theme-dark .qr-share-area{background:var(--color-dark-surface);border:1px solid var(--color-border-neon)}body.theme-dark .qr-hint{color:var(--color-text-neon-muted)}body.theme-dark .qr-share-header{color:var(--color-text-white)}body.theme-dark .qr-share-chevron,body.theme-dark .lobby-status{color:var(--color-text-neon-muted)}body.theme-dark .game-container{background:var(--color-bg-primary)}body.theme-dark .round-indicator-text,body.theme-dark .timer{color:var(--color-text-white)}body.theme-dark .timer--warning{color:var(--color-warning);text-shadow:0 0 10px var(--color-warning);animation:timer-pulse-subtle 1s ease-in-out infinite}body.theme-dark .timer--critical{color:var(--color-error-neon);text-shadow:0 0 15px var(--color-error-neon);animation:timer-pulse-intense .5s ease-in-out infinite}body.theme-dark .player-avatar{background:var(--color-dark-surface-hover);color:var(--color-text-neon-muted)}body.theme-dark .player-indicator.is-submitted .player-avatar{background:var(--color-success-neon);color:var(--color-bg-primary);box-shadow:var(--glow-success)}body.theme-dark #selected-year{color:var(--color-text-white)}body.theme-dark .slider-label{color:var(--color-text-neon-muted)}body.theme-dark .year-slider{background:var(--color-dark-surface)}body.theme-dark .year-slider::-webkit-slider-thumb{background:var(--color-accent-primary);box-shadow:var(--glow-primary)}body.theme-dark .year-slider::-moz-range-thumb{background:var(--color-accent-primary);box-shadow:var(--glow-primary)}body.theme-dark .submit-btn{background:var(--color-accent-primary)}body.theme-dark .submit-btn:hover{box-shadow:var(--glow-primary)}body.theme-dark .submitted-confirmation{background:var(--color-success-neon);color:var(--color-bg-primary);box-shadow:var(--glow-success)}body.theme-dark .reveal-container{background:var(--color-bg-primary)}body.theme-dark .reveal-round-info,body.theme-dark .correct-year-label{color:var(--color-text-neon-muted)}body.theme-dark .correct-year{color:var(--color-success-neon);text-shadow:0 0 10px var(--color-success-neon),0 0 20px var(--color-success-neon)}body.theme-dark .song-title{color:var(--color-text-white)}body.theme-dark .song-artist{color:var(--color-text-neon-muted)}body.theme-dark .fun-fact-container{background:#ff660026;border:1px solid rgba(255,102,0,.3)}body.theme-dark .fun-fact-text{color:var(--color-warning)}body.theme-dark .reveal-emotion--exact{color:var(--color-success-neon);text-shadow:0 0 20px var(--color-success-neon),0 0 40px var(--color-success-neon)}body.theme-dark .reveal-emotion--close{color:var(--color-warning);text-shadow:0 0 15px var(--color-warning)}body.theme-dark .reveal-emotion--wrong{color:var(--color-text-neon-muted)}body.theme-dark .reveal-emotion--missed{color:var(--color-text-neon-muted);opacity:.6}body.theme-dark .personal-result{background:var(--color-dark-surface);border:1px solid var(--color-border-neon)}body.theme-dark .result-header,body.theme-dark .result-label{color:var(--color-text-neon-muted)}body.theme-dark .result-value{color:var(--color-text-white)}body.theme-dark .result-score{color:var(--color-accent-secondary);text-shadow:0 0 10px var(--color-accent-secondary)}body.theme-dark .leaderboard{background:var(--color-dark-surface);border:1px solid var(--color-border-neon);box-shadow:none}body.theme-dark .leaderboard-header{background:var(--color-dark-card);border-color:var(--color-border-neon)}body.theme-dark .leaderboard-title{color:var(--color-text-white)}body.theme-dark .leaderboard-entry{border-color:var(--color-border-neon)}body.theme-dark .leaderboard-entry.is-current{background:#ff2d6a1a;border-left-color:var(--color-accent-primary)}body.theme-dark .entry-rank{color:var(--color-text-neon-muted)}body.theme-dark .entry-name{color:var(--color-text-white)}body.theme-dark .entry-score{color:var(--color-accent-secondary)}body.theme-dark .leaderboard-entry--climbing{animation:leaderboard-climb-dark .4s ease-out}body.theme-dark .leaderboard-entry--falling{animation:leaderboard-fall-dark .4s ease-out}@keyframes leaderboard-climb-dark{0%{transform:translateY(10px);opacity:.7;background:#00ff8826}to{transform:translateY(0);opacity:1;background:transparent}}@keyframes leaderboard-fall-dark{0%{transform:translateY(-10px);opacity:.7;background:#ff2d6a26}to{transform:translateY(0);opacity:1;background:transparent}}body.theme-dark .rank-up{color:var(--color-success-neon);text-shadow:0 0 5px var(--color-success-neon)}body.theme-dark .rank-down{color:var(--color-error-neon);text-shadow:0 0 5px var(--color-error-neon)}body.theme-dark .streak-indicator{color:var(--color-warning)}body.theme-dark .streak-indicator--hot{text-shadow:0 0 10px var(--color-warning),0 0 20px var(--color-warning)}body.theme-dark .leaderboard-separator{color:var(--color-text-neon-muted);border-color:var(--color-border-neon)}body.theme-dark .leaderboard-entry.is-top-1{background:linear-gradient(90deg,#ffd70026,#ffd7000d)}body.theme-dark .leaderboard-entry.is-top-1 .entry-rank{color:gold;text-shadow:0 0 10px rgba(255,215,0,.5)}body.theme-dark .leaderboard-entry.is-top-2{background:linear-gradient(90deg,#c0c0c026,#c0c0c00d)}body.theme-dark .leaderboard-entry.is-top-2 .entry-rank{color:silver;text-shadow:0 0 10px rgba(192,192,192,.5)}body.theme-dark .leaderboard-entry.is-top-3{background:linear-gradient(90deg,#cd7f3226,#cd7f320d)}body.theme-dark .leaderboard-entry.is-top-3 .entry-rank{color:#cd7f32;text-shadow:0 0 10px rgba(205,127,50,.5)}body.theme-dark .end-container{background:var(--color-bg-primary)}body.theme-dark .end-title{color:var(--color-text-white)}body.theme-dark .end-subtitle{color:var(--color-text-neon-muted)}body.theme-dark .your-result{background:var(--color-dark-surface);border:1px solid var(--color-border-neon)}body.theme-dark .your-result-header{color:var(--color-accent-primary)}body.theme-dark .your-result-rank{color:var(--color-text-white)}body.theme-dark .your-result-score{color:var(--color-text-neon-muted)}body.theme-dark .stat-value{color:var(--color-accent-secondary)}body.theme-dark .stat-label{color:var(--color-text-neon-muted)}body.theme-dark .podium-name{color:var(--color-text-white)}body.theme-dark .podium-score{color:var(--color-text-neon-muted)}body.theme-dark .final-leaderboard{background:var(--color-dark-surface);border:1px solid var(--color-border-neon);box-shadow:none}body.theme-dark .final-leaderboard-header{background:var(--color-dark-card);color:var(--color-text-white)}body.theme-dark .final-entry{border-color:var(--color-border-neon)}body.theme-dark .final-entry.is-current{background:#ff2d6a1a}body.theme-dark .final-rank{color:var(--color-text-neon-muted)}body.theme-dark .final-name{color:var(--color-text-white)}body.theme-dark .final-score{color:var(--color-accent-secondary)}body.theme-dark .new-game-btn{background:var(--color-success-neon);color:var(--color-bg-primary);box-shadow:var(--glow-success)}body.theme-dark .new-game-btn:hover{background:#4dff1f}body.theme-dark .end-player-message,body.theme-dark .rejoin-hint{color:var(--color-text-neon-muted)}body.theme-dark .paused-container{background:var(--color-bg-primary)}body.theme-dark .paused-container h1{color:var(--color-text-white)}body.theme-dark .paused-container>p{color:var(--color-text-neon-muted)}body.theme-dark .paused-hint{color:var(--color-text-neon-muted)}body.theme-dark .connection-lost-container h1{color:var(--color-text-white)}body.theme-dark .connection-lost-container>p{color:var(--color-text-neon-muted)}body.theme-dark .connection-lost-hint{color:var(--color-text-neon-muted)}body.theme-dark .qr-modal-content{background:var(--color-bg-primary);border:1px solid var(--color-border-neon)}body.theme-dark .qr-modal-label{color:var(--color-text-white)}.qr-print-area{text-align:center;padding:var(--space-lg) 0}.qr-container{display:inline-block;padding:var(--space-md);background:var(--color-bg-white);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}#qr-code{display:inline-block}#qr-code img{display:block}.qr-instruction{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-top:var(--space-md)}.join-url{font-family:var(--font-mono);font-size:var(--font-size-base);color:var(--color-text-muted);margin-top:var(--space-sm);word-break:break-all;user-select:all;cursor:text}.lobby-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm);margin:var(--space-md) 0}.btn-dashboard{display:flex;align-items:center;gap:var(--space-xs)}.player-list{margin-top:var(--space-md);border-top:1px solid var(--color-border-light);padding-top:var(--space-md)}.game-controls-bar{display:flex;gap:var(--space-sm);justify-content:center;margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-border-light)}.game-info{background:var(--color-bg-card);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-md)}.game-info p{margin-bottom:var(--space-sm)}.game-info p:last-child{margin-bottom:0}@media print{body *{visibility:hidden}.qr-print-area,.qr-print-area *{visibility:visible}.qr-print-area{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}#qr-code{width:400px!important;height:400px!important}#qr-code img,#qr-code canvas{width:400px!important;height:400px!important}.qr-instruction{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin-top:var(--space-xl)}.join-url{font-size:var(--font-size-base);font-family:var(--font-mono);margin-top:var(--space-sm)}.no-print{display:none!important}}.player-container{max-width:500px;margin:0 auto;padding-top:max(var(--space-md),env(safe-area-inset-top));padding-bottom:max(var(--space-md),env(safe-area-inset-bottom));padding-left:max(var(--space-sm),env(safe-area-inset-left));padding-right:max(var(--space-sm),env(safe-area-inset-right));text-align:center;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start}@media(min-width:768px){.player-container{max-width:480px;margin-left:auto;margin-right:auto;padding-left:var(--space-lg);padding-right:var(--space-lg)}}.view{display:block;overflow-x:hidden}.view.hidden{display:none}.error-icon{font-size:var(--font-size-timer);margin-bottom:var(--space-md)}.player-container h1{margin-bottom:var(--space-sm);color:var(--color-text-primary)}.player-container p{color:var(--color-text-muted);margin-bottom:var(--space-sm)}.hint{font-size:var(--font-size-base);color:var(--color-text-light)}.coming-soon{font-style:italic;color:var(--color-text-muted)}.spinner{width:40px;height:40px;margin:0 auto var(--space-md);border:4px solid var(--color-bg-card-alt);border-top:4px solid var(--color-accent-blue);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#qr-code{max-width:100%}#qr-code img,#qr-code canvas{max-width:100%;height:auto}@media(min-width:481px)and (max-width:768px){.qr-container{padding:var(--space-xl)}}@media(min-width:769px){.qr-container{padding:var(--space-lg)}}.join-form{max-width:400px;margin:0 auto;padding:var(--space-lg);text-align:center}.join-form h1{margin-bottom:var(--space-sm);font-size:var(--font-size-2xl)}.join-form>p{margin-bottom:var(--space-lg);color:var(--color-text-muted)}.form-group{margin-bottom:var(--space-md)}.name-input{width:100%;padding:14px var(--space-md);font-size:var(--font-size-lg);border:2px solid var(--color-border-medium);border-radius:var(--radius-md);min-height:48px;box-sizing:border-box}.name-input:focus{border-color:var(--color-accent-blue);outline:none;box-shadow:0 0 0 3px #3b82f61a}.join-btn{width:100%;min-height:48px;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.validation-msg{margin-top:var(--space-sm);font-size:var(--font-size-base);color:var(--color-error);text-align:left}.lobby-container{max-width:500px;margin:0 auto;padding:var(--space-lg) var(--space-md)}.lobby-header{text-align:center;margin-bottom:var(--space-lg)}.lobby-header h1{font-size:var(--font-size-2xl);margin-bottom:var(--space-sm);color:var(--color-text-primary)}.player-count{font-size:var(--font-size-md);color:var(--color-text-muted)}.player-list{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-lg)}.player-card{display:flex;align-items:center;padding:var(--space-sm) var(--space-md);min-height:48px;background:var(--color-bg-card);border-radius:var(--radius-md);border:1px solid var(--color-border-light);transition:all var(--transition-normal)}.player-card--you{background:#eff6ff;border-color:var(--color-accent-blue)}.player-card--disconnected{opacity:.5;filter:grayscale(.3);transition:opacity .3s ease,filter .3s ease}.away-badge{font-size:var(--font-size-sm);color:var(--color-text-muted);font-style:italic;margin-left:var(--space-xs)}.player-name{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-md);color:var(--color-text-primary)}.you-badge{font-size:var(--font-size-sm);color:var(--color-accent-blue);font-weight:var(--font-weight-medium)}.player-card.is-new{animation:playerJoin var(--transition-slow) ease-out;background:#ecfdf5;border-color:var(--color-success)}@keyframes playerJoin{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.player-list--virtual{position:relative;overflow-y:auto;max-height:320px;-webkit-overflow-scrolling:touch;contain:layout style paint}.player-list--virtual .virtual-spacer-top,.player-list--virtual .virtual-spacer-bottom{flex-shrink:0;pointer-events:none}.player-list--virtual .virtual-content-wrapper{display:flex;flex-direction:column;gap:var(--space-sm)}.player-list--virtual .player-card{flex-shrink:0;height:52px;box-sizing:border-box}.qr-share-area{text-align:center;padding:var(--space-lg) var(--space-md);background:var(--color-bg-card);border-radius:var(--radius-lg);margin-bottom:var(--space-md)}.qr-icon{font-size:var(--font-size-xl)}.qr-container{display:inline-block;padding:var(--space-sm);background:var(--color-bg-white);border-radius:var(--radius-md);box-shadow:var(--shadow-md);cursor:pointer;min-width:150px;min-height:150px;transition:transform var(--transition-fast)}.qr-container:hover,.qr-container:focus{transform:scale(1.02);outline:2px solid var(--color-accent-blue);outline-offset:2px}.qr-container img{display:block;width:100%;height:auto}.qr-hint{margin-top:var(--space-sm);font-size:13px;color:var(--color-text-muted)}.qr-collapsible{padding:0}.qr-share-header{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);cursor:pointer;user-select:none;list-style:none;font-size:var(--font-size-md);font-weight:600;color:var(--color-text-primary);min-height:44px}.qr-share-header::-webkit-details-marker{display:none}.qr-share-chevron{margin-left:var(--space-sm);transition:transform var(--transition-normal);font-size:.8rem;color:var(--color-text-muted)}.qr-collapsible[open] .qr-share-chevron{transform:rotate(180deg)}.qr-share-content{padding:0 var(--space-md) var(--space-lg);animation:qrSlideDown var(--transition-normal) ease-out}@keyframes qrSlideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.qr-collapsible:not([open]){padding-bottom:0}.qr-collapsible:not([open]) .qr-share-header{padding-bottom:var(--space-md)}@media(prefers-reduced-motion:reduce){.qr-share-chevron{transition:none}.qr-share-content{animation:none}}.dashboard-hint-container{margin-top:var(--space-md);text-align:center}.dashboard-hint-text{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-xs);font-size:var(--font-size-sm);color:#fff;background:var(--color-surface-dark);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);margin:0}.dashboard-hint-label{display:flex;align-items:center;gap:var(--space-xs);color:#fff}.dashboard-hint-icon{font-size:var(--font-size-base)}.dashboard-hint-url{font-family:monospace;color:var(--color-accent-secondary);font-size:var(--font-size-sm)}.qr-modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center}.qr-modal.hidden{display:none}.qr-modal-backdrop{position:absolute;inset:0;background:#000000bf}.qr-modal-content{position:relative;background:var(--color-bg-white);padding:var(--space-xl) var(--space-lg);border-radius:var(--radius-xl);text-align:center;max-width:90vw;max-height:90vh;animation:modalFadeIn var(--transition-fast)}.qr-modal-code{display:inline-block;padding:var(--space-md);background:var(--color-bg-white);border-radius:var(--radius-md);min-width:250px}.qr-modal-code img{display:block;width:100%;max-width:80vw;height:auto}.qr-modal-label{margin:var(--space-md) 0;font-size:var(--font-size-lg);color:var(--color-text-primary)}.qr-modal-close{min-width:120px;min-height:48px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.lobby-status{text-align:center;padding:var(--space-md);color:var(--color-text-muted)}.how-to-play{margin:var(--space-md) 0;background:var(--color-bg-card);border-radius:var(--radius-md);border:1px solid var(--color-border-light)}.how-to-play-header{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);cursor:pointer;user-select:none;list-style:none;font-weight:600;color:var(--color-text-primary);min-height:44px}.how-to-play-header::-webkit-details-marker{display:none}.how-to-play-icon{font-size:1.2rem}.how-to-play-chevron{margin-left:auto;transition:transform var(--transition-normal);font-size:.8rem;color:var(--color-text-secondary)}.how-to-play[open] .how-to-play-chevron{transform:rotate(180deg)}.how-to-play-content{padding:0 var(--space-md) var(--space-md);animation:howToPlaySlideDown var(--transition-normal) ease-out}.how-to-play-steps{margin:0;padding:0;list-style:none;color:var(--color-text-secondary);font-size:.9rem;line-height:1.6;counter-reset:step-counter}.how-to-play-steps li{margin-bottom:var(--space-sm);padding-left:var(--space-lg);position:relative;counter-increment:step-counter}.how-to-play-steps li:before{content:counter(step-counter) ".";position:absolute;left:0;width:var(--space-md);text-align:right;font-weight:600;color:var(--color-text-primary)}.how-to-play-steps li:last-child{margin-bottom:0}@keyframes howToPlaySlideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.leave-game-container{text-align:center;padding:var(--space-md);position:sticky;bottom:0;background:linear-gradient(to top,var(--color-bg-card),transparent);z-index:var(--z-controls, 10)}.leave-game-container.hidden{display:none}body.theme-dark .leave-game-container{background:transparent}.btn-leave{opacity:.7;transition:opacity .2s ease}.btn-leave:hover{opacity:1}.admin-controls{padding:var(--space-lg) var(--space-md);text-align:center;background:linear-gradient(to top,var(--color-bg-card),transparent);position:sticky;bottom:0}.admin-controls.hidden{display:none}body.theme-dark .admin-controls{background:transparent}.btn-large{min-height:56px;font-size:var(--font-size-xl);padding:var(--space-md) var(--space-xl)}.btn-full-width{width:100%}.admin-hint{margin-top:var(--space-sm);font-size:var(--font-size-base);color:var(--color-text-muted)}.admin-lobby-actions{text-align:center;margin-top:var(--space-lg)}.admin-badge{font-size:var(--font-size-sm);color:var(--color-warning);margin-left:var(--space-xs)}.lobby-player-count-container{text-align:center;margin-bottom:var(--space-md)}.lobby-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}.stat-card--clickable{display:block;text-decoration:none;cursor:pointer;margin-bottom:var(--space-lg)}.stat-card--clickable:hover{border-color:var(--color-accent-secondary)}.dashboard-hint-card{background:#00f5ff0d;border-color:var(--color-accent-secondary)}.qr-section{text-align:center;padding:var(--space-xl) var(--space-lg);background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);margin-bottom:var(--space-lg)}.qr-section .qr-container{display:inline-block;padding:var(--space-md);background:#fff;border-radius:var(--radius-md);margin-bottom:var(--space-md)}.qr-hint{font-size:1rem;color:var(--color-text-neon-muted);margin-bottom:var(--space-sm)}.qr-url-display{font-family:Outfit,sans-serif;font-size:1.125rem;font-weight:600;color:var(--color-accent-secondary);word-break:break-all}.player-list-section{background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-lg)}.section-subheader{display:flex;align-items:center;gap:var(--space-sm);font-size:1rem;font-weight:600;color:var(--color-text-white);margin-bottom:var(--space-md)}.section-subheader .section-icon{font-size:1.25rem}.player-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-sm)}.player-cards-grid .player-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-md);min-height:80px;background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);text-align:center;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.player-cards-grid .player-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #9d4edd33}.player-cards-grid .player-card.is-new{background:#39ff141a;border-color:var(--color-success-neon);animation:playerCardJoin .5s ease-out}@keyframes playerCardJoin{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.player-cards-grid .player-card--disconnected{opacity:.5;filter:grayscale(.3)}.player-cards-grid .player-name{font-size:var(--font-size-md);font-weight:600;color:var(--color-text-white);margin-bottom:var(--space-xs);display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap;justify-content:center}.player-cards-grid .admin-badge{font-size:1rem}.player-cards-grid .away-badge{font-size:var(--font-size-xs);color:var(--color-text-neon-muted);display:block;width:100%}.kick-player-btn{position:relative;background:none;border:1px solid var(--color-border-dark);color:var(--color-text-muted);width:24px;height:24px;border-radius:50%;font-size:1rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin-top:var(--space-xs);padding:0;transition:all .15s ease}.kick-player-btn:after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}.kick-player-btn:hover{background:var(--color-error);color:#fff;border-color:var(--color-error)}.lobby-actions{margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--color-border-dark)}.lobby-header-compact{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-bottom:var(--space-md);text-align:left}.section-header--inline{margin-bottom:0;flex:1;min-width:120px;text-align:left}.stat-badge-bar{display:flex;align-items:center;gap:var(--space-md)}.stat-badge{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:#ffffff0d;border:1px solid var(--color-border-neon);border-radius:var(--radius-md);font-size:.875rem}.stat-badge-icon{font-size:1rem}.stat-badge-value{font-weight:600;color:var(--color-accent-secondary)}.stat-badge--status .stat-badge-value{color:var(--color-text-white)}.qr-section--compact{padding:var(--space-md);margin-bottom:var(--space-md)}.qr-section--compact .qr-container{padding:var(--space-sm);margin-bottom:var(--space-sm)}.qr-section--compact #qr-code{width:180px!important;height:180px!important}.qr-section--compact #qr-code img,.qr-section--compact #qr-code canvas{width:180px!important;height:180px!important}.qr-section--compact .qr-hint{font-size:.875rem;margin-bottom:var(--space-xs)}.qr-url-display--compact{font-size:.75rem;margin-bottom:var(--space-sm)}.dashboard-link{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:#00f5ff1a;border:1px solid var(--color-accent-secondary);border-radius:var(--radius-md);color:var(--color-accent-secondary);text-decoration:none;font-size:.875rem;transition:all .2s ease}.dashboard-link:hover{background:#00f5ff33}.dashboard-link-arrow{opacity:.7}.player-list-section--compact{padding:var(--space-sm);margin-bottom:var(--space-sm)}.section-subheader--compact{font-size:.875rem;margin-bottom:var(--space-sm)}.empty-state-inline{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);color:var(--color-text-neon-muted);font-size:.875rem;text-align:center}.lobby-actions--sticky{position:sticky;bottom:0;margin:0 calc(-1 * var(--space-md));padding:var(--space-sm) var(--space-md);background:var(--color-bg-primary);border-top:1px solid var(--color-border-dark);z-index:10;display:flex;flex-direction:column;gap:var(--space-sm, 8px)}@media(min-width:481px){.qr-section--compact #qr-code,.qr-section--compact #qr-code img,.qr-section--compact #qr-code canvas{width:240px!important;height:240px!important}.qr-section--compact{padding:var(--space-lg)}.lobby-actions--sticky{position:relative;margin:var(--space-lg) 0 0 0;padding:var(--space-md) 0 0 0;background:transparent}}.lobby-wordmark-header{display:flex;justify-content:center;align-items:center;padding:var(--space-md) var(--space-md) var(--space-sm);padding-top:env(safe-area-inset-top,16px)}.lobby-wordmark-header .wordmark{font-size:2rem}.lobby-container--compact{flex:1;padding:0 var(--space-sm) var(--space-2xl);max-width:500px;margin:0 auto;width:100%}.lobby-container--compact .section-collapsible{background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);margin-bottom:var(--space-md);overflow:hidden}.lobby-container--compact .section-header-collapsible{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-sm) var(--space-md);background:transparent;border:none;color:var(--color-text-white);font-size:.875rem;font-weight:600;cursor:pointer;text-align:left}.lobby-container--compact .section-header-collapsible .section-icon{font-size:1rem}.lobby-container--compact .section-summary{margin-left:auto;font-size:.75rem;font-weight:400;color:var(--color-text-neon-muted);padding:2px 8px;background:#ffffff0d;border-radius:var(--radius-sm)}.lobby-container--compact .section-toggle{font-size:.625rem;color:var(--color-text-neon-muted);transition:transform .2s ease;margin-left:var(--space-sm)}.lobby-container--compact .section-header-collapsible>.section-toggle:nth-child(3){margin-left:auto}.lobby-container--compact .section-collapsible:not(.collapsed) .section-toggle{transform:rotate(180deg)}.lobby-container--compact .section-content{padding:0 var(--space-md) var(--space-md)}.lobby-container--compact .section-collapsible.collapsed .section-content{display:none}.lobby-status-compact{text-align:center;padding:var(--space-md);color:var(--color-text-neon-muted);font-size:.875rem}.how-to-play-steps-compact{list-style:decimal;padding-left:var(--space-lg);margin:0;font-size:.875rem;color:var(--color-text-neon-muted)}.how-to-play-steps-compact li{padding:var(--space-xs) 0}.stat-badge--difficulty{font-size:.75rem;text-transform:uppercase;letter-spacing:.03em}.stat-badge--difficulty:empty{display:none}.admin-content .section-collapsible{background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);margin-bottom:var(--space-md);overflow:hidden}.admin-content .section-header-collapsible{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-sm) var(--space-md);background:transparent;border:none;color:var(--color-text-white);font-size:.875rem;font-weight:600;cursor:pointer;text-align:left}.admin-content .section-header-collapsible .section-icon{font-size:1rem}.admin-content .section-header-collapsible .section-summary{margin-left:auto;font-size:.75rem;font-weight:400;color:var(--color-accent-secondary);background:#00f5ff1a;padding:2px 8px;border-radius:var(--radius-sm)}.admin-content .section-header-collapsible .section-toggle{margin-left:var(--space-sm);font-size:.625rem;color:var(--color-text-neon-muted);transition:transform .2s ease}.admin-content .section-collapsible:not(.collapsed) .section-toggle{transform:rotate(180deg)}.admin-content .section-collapsible .section-content{padding:0 var(--space-md) var(--space-md)}.admin-content .section-collapsible.collapsed .section-content{display:none}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xs) 0;border-bottom:1px solid rgba(255,255,255,.05)}.setting-row:last-child{border-bottom:none}.setting-group{border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:var(--space-sm);margin-bottom:var(--space-sm)}.setting-group:last-child{border-bottom:none}.setting-group .setting-row{border-bottom:none}.tts-group-title{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin:0 0 var(--space-xs) 0;opacity:.8}.setting-hint{font-size:.7rem;color:var(--color-text-muted);margin:0 0 var(--space-xs) calc(var(--space-xs) + 24px);line-height:1.3;opacity:.75}body.theme-dark .setting-hint{color:var(--color-text-neon-muted)}.setting-label{display:flex;align-items:center;gap:var(--space-xs);font-size:.875rem;color:var(--color-text-white)}.setting-icon{font-size:.875rem}.chip-group{display:flex;gap:4px}.chip{padding:4px 10px;font-size:.75rem;font-weight:500;background:#ffffff0d;border:1px solid var(--color-border-neon);border-radius:var(--radius-sm);color:var(--color-text-neon-muted);cursor:pointer;transition:all .15s ease}.chip:hover{background:#ffffff1a;color:var(--color-text-white)}.chip.chip--active{background:#00f5ff33;border-color:var(--color-accent-secondary);color:var(--color-accent-secondary)}.toggle-compact{display:flex;align-items:center;cursor:pointer}.toggle-compact input{position:absolute;opacity:0;width:0;height:0}.toggle-switch-compact{width:36px;height:20px;background:#ffffff1a;border-radius:10px;position:relative;transition:background .2s ease}.toggle-switch-compact:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--color-text-neon-muted);border-radius:50%;transition:all .2s ease}.toggle-compact input:checked+.toggle-switch-compact{background:#00f5ff4d}.toggle-compact input:checked+.toggle-switch-compact:after{left:18px;background:var(--color-accent-secondary)}.admin-actions{position:sticky;bottom:0;background:var(--color-bg-primary);padding:var(--space-sm) 0;margin-top:var(--space-sm)}.admin-actions .status-error{margin-bottom:var(--space-xs);font-size:.875rem}.modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center}.modal.hidden{display:none}.modal-backdrop{position:absolute;inset:0;background:#00000080}.modal-content{position:relative;background:var(--color-bg-white);padding:var(--space-lg);border-radius:var(--radius-lg);max-width:400px;width:90%;animation:modalFadeIn var(--transition-fast)}.modal-content h2{margin-bottom:var(--space-sm);font-size:var(--font-size-xl)}.modal-content p{margin-bottom:var(--space-md);color:var(--color-text-muted)}.modal-actions{display:flex;gap:var(--space-sm);margin-top:var(--space-lg)}.modal-actions .btn{flex:1}.game-placeholder{text-align:center;padding:var(--space-2xl) var(--space-lg)}.game-placeholder h1{font-size:var(--font-size-3xl);margin-bottom:var(--space-md);color:var(--color-text-primary)}.game-placeholder p{font-size:var(--font-size-md);color:var(--color-text-muted)}.reveal-placeholder{text-align:center;padding:var(--space-2xl) var(--space-lg)}.reveal-placeholder h1{font-size:var(--font-size-4xl);margin-bottom:var(--space-md);color:var(--color-text-primary)}.reveal-placeholder p{font-size:var(--font-size-md);color:var(--color-text-muted)}.end-container{text-align:center;padding:var(--space-2xl) var(--space-lg)}.end-icon{font-size:var(--font-size-timer);margin-bottom:var(--space-md)}.end-container h1{font-size:var(--font-size-3xl);margin-bottom:var(--space-sm);color:var(--color-text-primary)}.end-message{font-size:var(--font-size-lg);color:#4b5563;margin-bottom:var(--space-sm)}.game-container{display:flex;flex-direction:column;align-items:center;padding:var(--space-sm);padding-bottom:max(var(--space-md),env(safe-area-inset-bottom));max-width:400px;margin:0 auto}.game-sticky-bar{position:sticky;top:0;z-index:50;width:100%;padding:var(--space-xs) var(--space-sm);background:var(--color-bg-light);border-bottom:1px solid var(--color-border-light)}body.theme-dark .game-sticky-bar{background:var(--color-bg-primary);border-bottom-color:var(--color-border-dark)}.game-sticky-bar .timer-container{margin-bottom:0}.game-sticky-bar .timer{font-size:2rem}.game-header-compact{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:var(--space-sm);padding:0 var(--space-xs)}.game-header-left{display:flex;align-items:center;gap:var(--space-xs)}.game-header-left .section-icon{font-size:1rem}.round-indicator-text{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-white)}.stat-badge--steal{background:linear-gradient(135deg,var(--color-purple-primary),var(--color-purple-secondary, #9333ea));animation:steal-badge-pulse 2s ease-in-out infinite}@keyframes steal-badge-pulse{0%,to{box-shadow:0 0 8px #9333ea80}50%{box-shadow:0 0 12px #9333eacc}}.last-round-banner{background:linear-gradient(135deg,var(--color-warning),var(--color-warning-dark));color:var(--color-text-white);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-sm);text-align:center;width:100%;animation:pulse 2s infinite}.intro-badge{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background:linear-gradient(135deg,gold,#ff6b00);color:#000;border-radius:var(--radius-pill);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:1px;animation:intro-pulse 1.5s ease-in-out infinite;margin-bottom:var(--space-md);box-shadow:0 0 20px #ffd70080,0 0 40px #ff6b004d}.intro-splash{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#000000d9;animation:intro-splash-in .3s ease-out,intro-splash-out .5s ease-in 1.5s forwards;pointer-events:none}.intro-splash-content{display:flex;flex-direction:column;align-items:center;gap:12px;animation:intro-splash-scale .4s cubic-bezier(.34,1.56,.64,1)}.intro-splash-icon{font-size:80px;filter:drop-shadow(0 0 30px rgba(255,215,0,.8))}.intro-splash-text{font-size:36px;font-weight:900;text-transform:uppercase;letter-spacing:4px;background:linear-gradient(135deg,gold,#ff6b00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none}.intro-splash-hint{font-size:18px;color:#ffffffb3;letter-spacing:1px}@keyframes intro-splash-in{0%{opacity:0}to{opacity:1}}@keyframes intro-splash-out{0%{opacity:1}to{opacity:0;visibility:hidden}}@keyframes intro-splash-scale{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.intro-badge-icon{font-size:var(--font-size-md)}.intro-badge--large{font-size:var(--font-size-lg);padding:var(--space-sm) var(--space-lg);margin-left:var(--space-md)}.intro-badge--large .intro-badge-icon{font-size:var(--font-size-xl)}.intro-badge--stopped{background:linear-gradient(135deg,#666,#444);color:var(--color-text-white);animation:none}@keyframes intro-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@media(prefers-reduced-motion:reduce){.intro-badge{animation:none}}.closest-wins-badge{background:linear-gradient(135deg,#00c6ff,#0072ff);box-shadow:0 0 20px #00c6ff80,0 0 40px #0072ff4d}.result-card.is-closest-winner{border:2px solid #00c6ff;box-shadow:0 0 12px #00c6ff66}.closest-winner-badge{margin-left:var(--space-sm);font-size:var(--font-size-sm)}.album-cover-container{position:relative;width:150px;height:150px;margin-bottom:var(--space-md)}.album-cover{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);filter:blur(20px)}@media(max-width:360px){.album-cover-container{width:120px;height:120px}}@media(min-width:768px){.album-cover-container{width:180px;height:180px}}.album-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--color-bg-card-alt);border-radius:var(--radius-xl)}.loading-spinner{width:40px;height:40px;border:4px solid var(--color-border-light);border-top-color:var(--color-accent-brand);border-radius:50%;animation:spin 1s linear infinite}.timer-container{margin-bottom:var(--space-lg)}.timer{font-size:var(--font-size-timer);font-weight:var(--font-weight-bold);color:var(--color-text-primary);font-variant-numeric:tabular-nums;transition:color var(--transition-normal)}.timer--warning{color:var(--color-warning);animation:timer-pulse-subtle 1s ease-in-out infinite}.timer--critical{color:var(--color-error);animation:timer-pulse-intense .5s ease-in-out infinite}@keyframes timer-pulse-subtle{0%,to{opacity:1}50%{opacity:.8}}@keyframes timer-pulse-intense{0%,to{opacity:1;transform:scale(1)}50%{opacity:.9;transform:scale(1.05)}}@media(prefers-reduced-motion:reduce){.timer--warning,.timer--critical{animation:none}}.submission-tracker{width:100%;margin-bottom:var(--space-md);padding:var(--space-sm);background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md)}.submitted-players{display:flex;gap:var(--space-sm);overflow-x:auto;padding:var(--space-xs) 0;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:center;flex-wrap:wrap}.submitted-players::-webkit-scrollbar{display:none}.player-indicator{display:flex;flex-direction:column;align-items:center;min-width:48px;flex-shrink:0;position:relative}.player-badge{position:absolute;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;z-index:1}.player-badge--bet{top:-2px;right:2px;background:var(--color-warning)}.player-badge--steal{top:-2px;left:2px;background:linear-gradient(135deg,var(--color-purple-primary),var(--color-purple-secondary, #9333ea))}.player-avatar{width:36px;height:36px;border-radius:50%;background:var(--color-border-light);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);border:2px solid transparent;transition:all var(--transition-normal)}.player-indicator.is-submitted .player-avatar{background:var(--color-success);color:var(--color-text-white);border-color:var(--color-success-hover);animation:submitted-pulse var(--transition-slow) ease-out}.player-indicator.is-submitted .player-initials{display:none}.player-indicator.is-submitted .player-avatar:after{content:"\2713";font-size:var(--font-size-md)}@keyframes submitted-pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.player-indicator .player-name{font-size:var(--font-size-xs);color:var(--color-text-muted);max-width:48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;margin-top:var(--space-xs)}.player-indicator.is-current-player .player-avatar{border-color:var(--color-accent-brand)}.player-indicator.is-current-player .player-name{font-weight:var(--font-weight-semibold);color:var(--color-accent-brand)}.player-indicator--disconnected{opacity:.4}.submission-tracker.all-submitted{border-color:var(--color-success);background:#10b9811a}.artist-challenge{width:100%}.artist-challenge .section-header{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.stat-badge--bonus{background:#22c55e26;color:var(--color-success);font-weight:700;margin-left:auto}.artist-options-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:var(--space-sm)}@media(max-width:320px){.artist-options-grid{grid-template-columns:1fr}}.artist-option-btn{display:flex;align-items:center;justify-content:center;min-height:72px;padding:var(--space-sm) var(--space-md);border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-md);font-weight:500;cursor:pointer;transition:all .2s ease;position:relative}.artist-option-btn:active{transform:scale(.98)}.artist-option-btn.is-loading{animation:artistPulse 1s infinite}@keyframes artistPulse{0%,to{opacity:1}50%{opacity:.6}}.artist-option-btn.is-correct,.artist-option-btn.is-winner{background:var(--color-success);border-color:var(--color-success);color:#fff}.artist-option-btn.is-winner{box-shadow:var(--glow-primary)}.artist-option-btn.is-wrong{animation:artistWrongFlash .5s ease}.artist-option-btn.is-wrong.is-selected{background:var(--color-error);border-color:var(--color-error);color:#fff;animation:none;opacity:.8}@keyframes artistWrongFlash{0%,to{background:var(--color-surface)}50%{background:#ef44444d}}.artist-option-btn.is-disabled{opacity:.5;pointer-events:none}.artist-points-badge{position:absolute;right:var(--space-sm);font-size:var(--font-size-sm);font-weight:700;color:#fff;background:#0003;padding:2px 6px;border-radius:var(--radius-sm)}.artist-result{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);text-align:center;font-weight:500}.artist-result.is-winner{background:#22c55e26;color:var(--color-success)}.artist-result.is-late{background:var(--color-surface-alt, rgba(255, 255, 255, .05));color:var(--color-text-muted)}body.theme-dark .artist-option-btn{background:#ffffff0d;border-color:var(--color-border-neon);color:var(--color-text-white)}body.theme-dark .artist-option-btn:hover{background:#ffffff1a}@media(prefers-reduced-motion:reduce){.artist-option-btn.is-loading{animation:none;opacity:.7}.artist-option-btn.is-wrong{animation:none;opacity:.5}}.artist-reveal-section{padding:var(--space-md);margin-bottom:var(--space-md);background:var(--color-surface-alt, rgba(255, 255, 255, .05));border-radius:var(--radius-lg)}.artist-reveal-section .section-content-padded{text-align:center}.artist-reveal-label{font-size:var(--font-size-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-xs)}.artist-reveal-name{font-size:var(--font-size-xl);font-weight:700;color:var(--color-text);margin-bottom:var(--space-sm)}.artist-reveal-winner{font-size:var(--font-size-md);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);display:inline-block}.artist-reveal-winner.is-you{background:#22c55e26;color:var(--color-success);font-weight:600}.artist-reveal-winner.is-other{color:var(--color-text-muted)}.artist-reveal-no-winner{color:var(--color-text-muted);font-style:italic}body.theme-dark .artist-reveal-section{background:var(--color-dark-surface-alt, #16213e)}.artist-bonus-row .result-value{color:var(--color-success);font-weight:600}.player-card-artist-badge{font-size:var(--font-size-xs);color:var(--color-success);background:#22c55e1a;padding:2px 6px;border-radius:var(--radius-sm);margin-left:var(--space-xs)}.movie-challenge{width:100%}.movie-challenge .section-header{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.movie-options-grid{display:grid;grid-template-columns:1fr;gap:var(--space-sm)}@media(min-width:480px){.movie-options-grid{grid-template-columns:1fr 1fr}}.movie-option-btn{display:flex;align-items:center;justify-content:center;min-height:44px;padding:var(--space-sm) var(--space-md);border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-md);font-weight:500;cursor:pointer;transition:all .2s ease;position:relative;text-align:center}.movie-option-btn:active{transform:scale(.98)}.movie-option-btn.is-loading{animation:moviePulse 1s infinite}@keyframes moviePulse{0%,to{opacity:1}50%{opacity:.6}}.movie-option-btn.is-correct,.movie-option-btn.is-winner{background:var(--color-success);border-color:var(--color-success);color:#fff}.movie-option-btn.is-winner{box-shadow:var(--glow-primary)}.movie-option-btn.is-wrong{animation:movieWrongFlash .5s ease}.movie-option-btn.is-wrong.is-selected{background:var(--color-error);border-color:var(--color-error);color:#fff;animation:none;opacity:.8}@keyframes movieWrongFlash{0%,to{background:var(--color-surface)}50%{background:#ef44444d}}.movie-option-btn.is-disabled{opacity:.5;pointer-events:none}.movie-rank-badge{position:absolute;right:var(--space-sm);font-size:var(--font-size-sm);font-weight:700;color:#fff;background:#0003;padding:2px 6px;border-radius:var(--radius-sm)}.movie-result{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);text-align:center;font-weight:500}.movie-result.is-winner{background:#22c55e26;color:var(--color-success)}.movie-result.is-late{background:var(--color-surface-alt, rgba(255, 255, 255, .05));color:var(--color-text-muted)}body.theme-dark .movie-option-btn{background:#ffffff0d;border-color:var(--color-border-neon);color:var(--color-text-white)}body.theme-dark .movie-option-btn:hover{background:#ffffff1a}@media(prefers-reduced-motion:reduce){.movie-option-btn.is-loading{animation:none;opacity:.7}.movie-option-btn.is-wrong{animation:none;opacity:.5}}.movie-reveal-section{padding:var(--space-md);margin-bottom:var(--space-md);background:var(--color-surface-alt, rgba(255, 255, 255, .05));border-radius:var(--radius-lg)}.movie-reveal-section .section-content-padded{text-align:center}.movie-reveal-name{font-size:var(--font-size-xl);font-weight:700;color:var(--color-text);margin-bottom:var(--space-sm)}.movie-reveal-winners{margin-top:var(--space-sm)}.movie-reveal-winners-title{font-size:var(--font-size-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-xs)}.movie-reveal-winner-entry{font-size:var(--font-size-md);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);display:inline-block;margin:2px 4px}.movie-reveal-winner-entry.is-you{background:#22c55e26;color:var(--color-success);font-weight:600}.movie-reveal-winner-entry.is-other{color:var(--color-text-muted)}.movie-reveal-no-winner{color:var(--color-text-muted);font-style:italic;font-size:var(--font-size-md);padding:var(--space-xs) var(--space-md)}body.theme-dark .movie-reveal-section{background:var(--color-dark-surface-alt, #16213e)}.year-selector-section{width:100%;padding-bottom:max(var(--space-md),env(safe-area-inset-bottom))}.year-selector{width:100%}.year-display{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-md)}.year-adjust-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--color-border-dark);background:transparent;color:var(--color-text-white);font-size:1.5rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;flex-shrink:0}.year-adjust-btn:active{background:var(--color-accent-primary);border-color:var(--color-accent-primary);transform:scale(.95)}.year-adjust-btn:disabled{opacity:.3;pointer-events:none}#selected-year{font-size:var(--font-size-year);font-weight:var(--font-weight-bold);color:var(--color-text-primary);font-variant-numeric:tabular-nums}.slider-container{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg)}.slider-label{font-size:var(--font-size-sm);color:var(--color-text-muted);min-width:40px}.slider-label--min{text-align:right}.slider-label--max{text-align:left}.year-slider{-webkit-appearance:none;appearance:none;flex:1;height:var(--space-sm);background:var(--color-border-light);border-radius:var(--radius-sm);outline:none}.year-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:44px;background:var(--color-accent-brand);border-radius:50%;cursor:pointer;border:4px solid var(--color-bg-white);box-shadow:var(--shadow-md);transition:transform .1s ease}.year-slider::-webkit-slider-thumb:active{transform:scale(1.1)}.year-slider::-moz-range-thumb{width:44px;height:44px;background:var(--color-accent-brand);border-radius:50%;cursor:pointer;border:4px solid var(--color-bg-white);box-shadow:var(--shadow-md)}.submit-btn{width:100%;padding:var(--space-lg) var(--space-lg);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-white);background:var(--color-accent-brand);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);min-height:56px}.submit-btn:hover{background:var(--color-accent-brand-hover)}.submit-btn:active{transform:scale(.98)}.submit-btn:disabled{background:var(--color-text-light);cursor:not-allowed;transform:none}.submit-btn.is-loading{color:transparent;position:relative}.submit-btn.is-loading:after{content:"";position:absolute;width:24px;height:24px;border:3px solid var(--color-bg-white);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;left:50%;top:50%;margin-left:-12px;margin-top:-12px}.submit-btn.is-error{background:var(--color-error)}.submitted-confirmation{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);background:var(--color-success);color:var(--color-text-white);border-radius:var(--radius-lg);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.submitted-confirmation .checkmark{font-size:var(--font-size-2xl)}.year-selector.is-submitted .year-slider{pointer-events:none;opacity:.5}.year-selector.is-submitted #selected-year{color:var(--color-text-muted)}@media(max-width:360px){.album-cover-container{max-width:250px}.timer{font-size:var(--font-size-2xl)}}@media(min-width:768px){.album-cover-container{max-width:350px}.timer{font-size:var(--font-size-hero)}}@media(min-width:768px){body{max-width:800px;margin:0 auto;padding:var(--space-lg)}header h1{font-size:var(--font-size-4xl)}.status-section h2,.card-section h2{font-size:var(--font-size-lg)}.card-section{padding:var(--space-md) var(--space-lg)}}.reveal-container{display:flex;flex-direction:column;align-items:center;padding:var(--space-lg);width:100%;margin:0 auto;text-align:center}.reveal-container--compact{padding:var(--space-md);gap:var(--space-sm);align-items:stretch}.reveal-container--duel{padding:var(--space-md);gap:var(--space-sm);align-items:stretch;text-align:left}.reveal-header-compact{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xs) 0;margin-bottom:var(--space-xs)}.reveal-header-left{display:flex;align-items:center;gap:var(--space-xs)}.reveal-header-compact .section-icon{font-size:1rem}.reveal-header-compact .round-indicator-text{font-size:.875rem;color:var(--color-text-neon-muted)}.reveal-song-hero{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm);background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);margin-bottom:var(--space-sm)}.reveal-album-cover-compact{width:80px;height:80px;object-fit:cover;border-radius:var(--radius-md);flex-shrink:0}.reveal-song-info{flex:1;min-width:0;text-align:left}.reveal-song-info .song-title{font-size:1rem;font-weight:600;color:var(--color-text-white);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reveal-song-info .song-artist{font-size:.875rem;color:var(--color-text-neon-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reveal-year-section{text-align:center;padding:var(--space-sm) 0}.reveal-emotion-inline{font-size:1.25rem;font-weight:700;margin-bottom:var(--space-xs);animation:reveal-emotion-entrance .5s ease-out}.reveal-year-section .correct-year-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-neon-muted);margin-bottom:var(--space-xs)}.reveal-year-section .correct-year{font-size:3rem}.personal-result-compact{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:#00f5ff1a;border:1px solid var(--color-border-neon);border-radius:var(--radius-md);margin-bottom:var(--space-sm)}.result-content-inline{font-size:.875rem;color:var(--color-text-white)}.artist-reveal-compact{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);margin-bottom:var(--space-sm)}.artist-reveal-icon{font-size:1rem}.artist-reveal-name-inline{font-weight:600;color:var(--color-accent-secondary)}.artist-reveal-winner-inline{font-size:.75rem;color:var(--color-text-neon-muted)}.artist-reveal-winner-inline:before{content:"\2022";margin-right:var(--space-xs)}.fun-fact-section{text-align:left}.fun-fact-section .fun-fact-text{font-size:.875rem;color:var(--color-text-white);line-height:1.5;margin-bottom:var(--space-sm)}.fun-fact-section .song-rich-info{font-size:.75rem;color:var(--color-text-neon-muted)}.section-content-padded{padding:0 var(--space-md) var(--space-md)}.card-section .section-content-padded{padding:0 0 var(--space-sm)}.guesses-section{text-align:left}.reveal-results-grid{width:100%}.personal-result-section{text-align:left}.personal-result-section .result-row{display:flex;justify-content:space-between;padding:var(--space-xs) 0;border-bottom:1px solid rgba(255,255,255,.05)}.personal-result-section .result-row:last-child{border-bottom:none}.artist-reveal-section{text-align:left}.artist-reveal-section .artist-reveal-name{font-size:1.25rem;font-weight:700;color:var(--color-accent-secondary);margin-bottom:var(--space-xs)}.artist-reveal-section .artist-reveal-winner{font-size:.875rem;color:var(--color-text-neon-muted)}.round-analytics-section{width:100%;background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);overflow:hidden;text-align:left}.round-analytics-section .section-header-collapsible{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-sm) var(--space-md);background:transparent;border:none;color:var(--color-text-white);font-size:.875rem;font-weight:600;cursor:pointer;text-align:left}.round-analytics-section .section-header-collapsible .section-icon{font-size:1rem}.round-analytics-section .section-header-collapsible .section-summary{margin-left:auto;font-size:.75rem;font-weight:400;color:var(--color-accent-secondary);background:#00f5ff1a;padding:2px 8px;border-radius:var(--radius-sm)}.round-analytics-section .section-header-collapsible .section-toggle{margin-left:var(--space-sm);font-size:.625rem;color:var(--color-text-neon-muted);transition:transform .2s ease}.round-analytics-section .section-content{padding:0 var(--space-md) var(--space-sm)}.round-analytics-section.collapsed .section-content{display:none}.round-analytics-section:not(.collapsed) .section-toggle{transform:rotate(180deg)}.reveal-round-info{font-size:var(--font-size-base);color:var(--color-text-muted);margin-bottom:var(--space-md)}.reveal-album{margin-bottom:var(--space-lg)}.reveal-album-cover{width:150px;height:150px;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.correct-year-container{margin-bottom:var(--space-md)}.correct-year-label{font-size:var(--font-size-md);color:var(--color-text-muted);margin-bottom:var(--space-sm)}.correct-year{font-size:var(--font-size-hero);font-weight:var(--font-weight-extrabold);color:var(--color-success);font-variant-numeric:tabular-nums;animation:reveal-pop var(--transition-slow) ease-out}@keyframes reveal-pop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.song-info{margin-bottom:var(--space-md)}.song-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-xs)}.song-artist{font-size:var(--font-size-md);color:var(--color-text-muted)}.fun-fact-container{display:flex;flex-direction:column;gap:var(--space-sm);background:var(--color-warning-light);padding:var(--space-md);border-radius:var(--radius-lg);margin-bottom:var(--space-lg);text-align:left;max-width:100%}.fun-fact-header{display:flex;align-items:flex-start;gap:var(--space-sm)}.fun-fact-icon{font-size:var(--font-size-xl);flex-shrink:0}.fun-fact-text{font-size:var(--font-size-base);color:#92400e;line-height:1.4}.fun-fact-header:empty,.fun-fact-text:empty{display:none}.song-rich-info{text-align:left}.song-rich-info:empty{display:none}.song-badges-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm);margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid rgba(120,53,15,.15)}.song-badges-row:first-child{border-top:none;padding-top:0}.song-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:20px;border:1px solid;box-shadow:0 1px 3px #0000001a;white-space:nowrap}.song-badge-icon{font-size:14px;line-height:1}.song-badge--chart{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af;border-color:#93c5fd}.song-badge--chart .chart-weeks{font-weight:400;opacity:.8;font-size:11px}.song-badge--platinum{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);color:#475569;border-color:#cbd5e1}.song-badge--gold{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;border-color:#fcd34d}.song-badge--diamond{background:linear-gradient(135deg,#e0f2fe,#bae6fd);color:#0369a1;border-color:#7dd3fc}.song-badge--award{background:linear-gradient(135deg,#ffedd5,#fed7aa);color:#9a3412;border-color:#fdba74}.song-badge--grammy{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#78350f;border-color:#f59e0b}.song-badge--eurovision{background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#5b21b6;border-color:#a78bfa}.song-badge--oscar,.song-badge--academy{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#78350f;border-color:#f59e0b}.song-badge--halloffame{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af;border-color:#60a5fa}.song-badges-more{font-size:var(--font-size-xs);color:#78350f;font-style:italic;opacity:.8}.song-difficulty{display:flex;align-items:center;gap:var(--space-sm);justify-content:center;margin-top:var(--space-sm);opacity:0;animation:fadeIn .5s ease-out forwards;animation-delay:.3s}.difficulty-stars{font-size:1.2rem;letter-spacing:.1em}.difficulty-1{color:var(--color-success-neon);text-shadow:0 0 10px var(--color-success-neon)}.difficulty-2{color:var(--color-warning);text-shadow:0 0 10px var(--color-warning)}.difficulty-3{color:var(--color-warning-alt);text-shadow:0 0 10px var(--color-warning-alt)}.difficulty-4{color:var(--color-accent-primary);text-shadow:0 0 10px var(--color-accent-primary)}.difficulty-label{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:var(--font-size-sm)}.difficulty-accuracy{font-size:.85em;opacity:.7}.superlatives-container{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-md);margin:var(--space-lg) 0;padding:0 var(--space-md)}.superlative-card{display:flex;flex-direction:column;align-items:center;padding:var(--space-md);min-width:120px;max-width:160px;background:var(--color-dark-surface);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.1);opacity:0;animation:superlativeSlideIn .5s ease-out forwards}@keyframes superlativeSlideIn{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.superlative-emoji{font-size:2rem;margin-bottom:var(--space-xs)}.superlative-title{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:var(--font-size-xs);color:var(--color-accent-secondary);text-align:center;margin-bottom:var(--space-xs)}.superlative-player{font-weight:700;font-size:var(--font-size-base);color:var(--color-dark-text-primary);text-align:center;margin-bottom:var(--space-xs)}.superlative-value{font-size:var(--font-size-sm);color:var(--color-dark-text-secondary);text-align:center}.superlative-card--speed_demon{border-color:var(--color-warning);box-shadow:0 0 15px #f59e0b33}.superlative-card--lucky_streak{border-color:var(--color-error);box-shadow:0 0 15px #ef444433}.superlative-card--risk_taker{border-color:var(--color-purple-primary);box-shadow:0 0 15px #8b5cf633}.superlative-card--clutch_player{border-color:var(--color-success-neon);box-shadow:0 0 15px #39ff1433}.superlative-card--close_calls{border-color:var(--color-accent-secondary);box-shadow:0 0 15px #00f5ff33}.highlights-container{width:100%;margin-top:var(--space-lg);margin-bottom:var(--space-lg)}.highlights-header{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-white);text-align:center;margin-bottom:var(--space-md)}.highlights-list{display:flex;flex-direction:column;gap:var(--space-sm)}.highlight-card{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--color-dark-surface);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.1);opacity:0;animation:highlightFadeIn .5s ease-out forwards}@keyframes highlightFadeIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.highlight-emoji{font-size:1.8rem;flex-shrink:0;width:48px;text-align:center}.highlight-content{flex:1;min-width:0}.highlight-text{font-size:var(--font-size-base);color:var(--color-dark-text-primary);line-height:1.4}.highlight-round{font-size:var(--font-size-xs);color:var(--color-dark-text-secondary);margin-top:var(--space-xs)}@media(max-width:480px){.highlight-card{padding:var(--space-sm);gap:var(--space-sm)}.highlight-emoji{font-size:1.4rem;width:36px}.highlight-text{font-size:var(--font-size-sm)}}.round-analytics{width:100%;margin-top:var(--space-lg);margin-bottom:var(--space-lg);padding:var(--space-md);background:var(--color-dark-surface);border-radius:var(--radius-lg);text-align:center}.analytics-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-white);margin-bottom:var(--space-md)}.analytics-stats-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-lg);margin-bottom:var(--space-xs)}.stat-primary{text-align:left}.stat-primary .stat-label{font-size:var(--font-size-sm);color:var(--color-text-neon-muted);display:block;margin-bottom:var(--space-xs)}.stat-primary .stat-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-accent-secondary)}.stat-secondary{text-align:right}.stat-secondary .stat-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-success)}.stat-secondary .stat-label{font-size:var(--font-size-sm);color:var(--color-text-neon-muted);display:block}.stat-comparison-line{font-size:var(--font-size-sm);color:var(--color-text-neon-muted);margin-bottom:var(--space-md)}.analytics-histogram{margin-bottom:var(--space-lg)}.histogram-title{font-size:var(--font-size-base);color:var(--color-text-neon-muted);margin-bottom:var(--space-sm)}.dotaxis-wrap{margin:14px 0 16px}.dotaxis-axis{position:relative;height:88px;margin:0 14px}.dotaxis-line{position:absolute;left:0;right:0;top:52px;height:2px;background:#ffffff1f;border-radius:2px}.dotaxis-tick{position:absolute;top:48px;width:1px;height:10px;background:#ffffff2e}.dotaxis-tick-label{position:absolute;top:64px;font-size:9px;color:#ffffff80;transform:translate(-50%);letter-spacing:.3px;font-weight:500}.dotaxis-marker{position:absolute;top:4px;bottom:18px;width:2px;background:linear-gradient(180deg,transparent,var(--color-cyan, #00d4ff) 30%,var(--color-cyan, #00d4ff) 80%,transparent);box-shadow:0 0 8px var(--color-cyan, #00d4ff),0 0 16px #00d4ff99}.dotaxis-marker-label{position:absolute;top:-4px;left:50%;transform:translate(-50%);background:var(--color-cyan, #00d4ff);color:#0a0a0e;font-family:var(--font-family-display, "Outfit", sans-serif);font-weight:900;font-size:12px;padding:3px 8px;border-radius:6px;box-shadow:0 0 14px #00d4ff99;white-space:nowrap}.dotaxis-dot{position:absolute;top:39px;width:26px;height:26px;border-radius:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center;font-family:var(--font-family-display, "Outfit", sans-serif);font-weight:900;font-size:12px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 0 0 3px var(--color-bg-primary, #0d0d12),0 4px 10px #0006;cursor:default}.dotaxis-dot--c1{background:linear-gradient(135deg,#ff6ec7,#d846a7)}.dotaxis-dot--c2{background:linear-gradient(135deg,#6e3bff,#4a25c8)}.dotaxis-dot--c3{background:linear-gradient(135deg,#ffd60a,#e6b800);color:#1a1a22;text-shadow:none}.dotaxis-dot--c4{background:linear-gradient(135deg,#00d4ff,#008abf)}.dotaxis-dot--correct{box-shadow:0 0 0 3px var(--color-bg-primary, #0d0d12),0 0 18px currentColor,0 4px 10px #0006}.dotaxis-dot--me{box-shadow:0 0 0 3px var(--color-bg-primary, #0d0d12),0 0 0 5px #ff9f4399,0 4px 10px #0006}.dotaxis-dot--correct.dotaxis-dot--me{box-shadow:0 0 0 3px var(--color-bg-primary, #0d0d12),0 0 0 5px #ff9f4399,0 0 22px currentColor,0 4px 10px #0006}.dotaxis-score{position:absolute;top:12px;transform:translate(-50%);font-family:var(--font-family-display, "Outfit", sans-serif);font-weight:800;font-size:11px;padding:2px 6px;border-radius:6px;background:#ffffff14;white-space:nowrap}.dotaxis-score--pos{background:#00d4ff2e;color:var(--color-cyan, #00d4ff)}.dotaxis-score--zero{color:#ffffff59}.dotaxis-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;font-size:11px;color:#ffffffbf;margin-top:4px}.dotaxis-legend-entry{display:inline-flex;align-items:center;gap:5px}.dotaxis-legend-dot{display:inline-block;width:11px;height:11px;border-radius:50%;flex-shrink:0}.dotaxis-legend-medal{font-size:13px;line-height:1}.dotaxis-legend-me{color:#ff9f43;font-weight:700;font-size:10px;margin-left:2px;letter-spacing:.3px}.histogram-bars{display:flex;justify-content:space-between;align-items:flex-end;height:120px;gap:var(--space-xs);padding:0 var(--space-xs)}.histogram-bar-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;animation:histogram-fade-in .3s ease forwards;opacity:0}.histogram-bar{width:100%;max-width:40px;background:linear-gradient(180deg,var(--color-accent-primary),var(--color-accent-brand));border-radius:var(--radius-sm) var(--radius-sm) 0 0;display:flex;align-items:flex-start;justify-content:center;transition:height .5s ease;min-height:0}.histogram-bar.is-correct{background:linear-gradient(180deg,var(--color-success-neon),var(--color-success));box-shadow:var(--glow-success)}.bar-count{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--color-text-white);padding-top:var(--space-xs)}.histogram-label{font-size:var(--font-size-xs);color:var(--color-text-neon-muted);margin-top:var(--space-xs)}@keyframes histogram-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.analytics-achievements{display:flex;flex-direction:column;gap:var(--space-sm);text-align:left}.achievement-item{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-sm);color:var(--color-text-white)}.achievement-emoji{font-size:var(--font-size-lg)}.achievement-label{color:var(--color-text-neon-muted)}.achievement-names{font-weight:var(--font-weight-semibold)}.achievement-value{color:var(--color-text-neon-muted)}.analytics-empty{text-align:center;color:var(--color-text-neon-muted);padding:var(--space-lg);font-style:italic}@media(prefers-reduced-motion:reduce){.histogram-bar-wrapper{animation:none;opacity:1}.histogram-bar{transition:none}}.reveal-emotion{text-align:center;font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-md);animation:reveal-emotion-entrance .5s ease-out}.reveal-emotion--exact{color:var(--color-success);text-shadow:0 0 20px var(--color-success)}.reveal-emotion--close{color:var(--color-warning);animation:reveal-emotion-entrance .5s ease-out,reveal-shake .5s ease-in-out .5s}.reveal-emotion--wrong{color:var(--color-text-muted)}.reveal-emotion--missed{color:var(--color-text-muted);opacity:.7}.reveal-emotion-subtitle{font-size:var(--font-size-base);font-weight:var(--font-weight-normal);margin-top:var(--space-xs);opacity:.8}@keyframes reveal-emotion-entrance{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes reveal-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}.confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--z-modal)}body>canvas[style*="position: fixed"]{pointer-events:none!important}.personal-result.is-delayed{opacity:0;animation:fade-in-delay .5s ease-out 1s forwards}@keyframes fade-in-delay{to{opacity:1}}@media(prefers-reduced-motion:reduce){.reveal-emotion,.reveal-emotion--close{animation:none}.personal-result.is-delayed{opacity:1;animation:none}}.personal-result{width:100%;background:var(--color-bg-card-alt);padding:var(--space-md);border-radius:var(--radius-lg);margin-bottom:var(--space-lg)}.result-header{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);margin-bottom:var(--space-sm)}.result-content{display:flex;flex-direction:column;gap:var(--space-sm)}.result-row{display:flex;justify-content:space-between;align-items:center}.result-label{font-size:var(--font-size-base);color:var(--color-text-muted)}.result-value{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.result-value.is-exact{color:var(--color-success)}.result-value.is-close{color:var(--color-warning)}.result-value.is-far{color:var(--color-error)}.result-value.is-bonus{color:var(--color-warning);font-weight:var(--font-weight-bold)}.result-score{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);color:var(--color-accent-brand);margin-top:var(--space-sm)}.result-missed{font-size:var(--font-size-md);color:var(--color-error);font-weight:var(--font-weight-semibold)}.result-value.is-streak{color:var(--color-error);font-weight:var(--font-weight-bold)}.streak-bonus-row{background:linear-gradient(90deg,var(--color-warning-light),#fde68a);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);margin:var(--space-sm) 0;color:#1a1a1a}.result-total{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-success);margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:2px dashed var(--color-border-light)}.streak-indicator{display:inline-flex;align-items:center;gap:2px;font-size:var(--font-size-sm);color:var(--color-warning);font-weight:var(--font-weight-semibold)}.streak-indicator:before{content:"\1f525"}.bet-container{margin-bottom:var(--space-md);position:relative;z-index:1}.bet-toggle{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-xl);background:var(--color-bg-card-alt);border:2px solid var(--color-border-medium);border-radius:var(--radius-lg);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);width:100%;justify-content:center;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}.bet-toggle:hover{border-color:var(--color-text-light)}.bet-toggle.is-active{background:var(--color-warning-light);border-color:var(--color-warning);color:#92400e}.bet-toggle.is-active .bet-icon{animation:dice-shake var(--transition-slow) ease}@keyframes dice-shake{0%,to{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}body.theme-dark .bet-toggle{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:var(--color-text-white)}body.theme-dark .bet-toggle.is-active{background:var(--color-warning);border-color:var(--color-warning);color:var(--color-text-primary)}.bet-won-row{background:linear-gradient(90deg,var(--color-success-light),#a7f3d0);padding:var(--space-sm) var(--space-sm);border-radius:var(--radius-md);margin:var(--space-sm) 0}.bet-won-row .result-label,body.theme-dark .bet-won-row .result-label{color:#166534}.result-value.is-bet-won,body.theme-dark .result-value.is-bet-won{color:#166534;font-weight:var(--font-weight-bold)}.bet-lost-row{background:linear-gradient(90deg,var(--color-error-light),#fecaca);padding:var(--space-sm) var(--space-sm);border-radius:var(--radius-md);margin:var(--space-sm) 0}.bet-lost-row .result-label,body.theme-dark .bet-lost-row .result-label{color:#991b1b}.result-value.is-bet-lost,body.theme-dark .result-value.is-bet-lost{color:#991b1b;font-weight:var(--font-weight-bold)}.result-missed-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-md)}.result-missed-icon{font-size:var(--font-size-2xl)}.result-missed-text{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-muted)}.streak-broken{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-error-light);border-radius:var(--radius-md)}.streak-broken-icon{font-size:var(--font-size-xl)}.streak-broken-text{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-error-dark)}.streak-shield-used{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-success-light);border-radius:var(--radius-md)}.streak-shield-icon{font-size:var(--font-size-xl)}.streak-shield-text{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-success-hover)}.result-score.is-zero{color:var(--color-text-light);font-size:var(--font-size-2xl)}.leaderboard-section{width:100%;background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);overflow:hidden}.leaderboard-section .section-header-collapsible{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-sm) var(--space-md);background:transparent;border:none;color:var(--color-text-white);font-size:.875rem;font-weight:600;cursor:pointer;text-align:left}.leaderboard-section .section-header-collapsible .section-icon{font-size:1rem}.leaderboard-section .section-header-collapsible .section-summary{margin-left:auto;font-size:.75rem;font-weight:400;color:var(--color-accent-secondary);background:#00f5ff1a;padding:2px 8px;border-radius:var(--radius-sm)}.leaderboard-section .section-header-collapsible .section-toggle{margin-left:var(--space-sm);font-size:.625rem;color:var(--color-text-neon-muted);transition:transform .2s ease}.leaderboard-section .section-content{padding:0}.leaderboard-section .leaderboard-list{max-height:200px;overflow-y:auto}.leaderboard-section.collapsed .section-content{display:none}.leaderboard-section:not(.collapsed) .section-toggle{transform:rotate(180deg)}.leaderboard{background:var(--color-bg-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;width:100%;margin-bottom:var(--space-md)}.leaderboard.is-compact .leaderboard-list{max-height:120px}.leaderboard.is-expanded .leaderboard-list{max-height:400px}.leaderboard.is-prominent{margin-top:var(--space-md)}.leaderboard.is-prominent .leaderboard-list{max-height:280px}.leaderboard-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) var(--space-md);background:var(--color-bg-card-alt);border-bottom:1px solid var(--color-border-light)}.leaderboard-title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary)}.leaderboard-toggle{background:none;border:none;cursor:pointer;padding:var(--space-xs);min-width:auto;min-height:auto;color:var(--color-text-muted)}.leaderboard-list{max-height:200px;overflow-y:auto;contain:layout style paint;will-change:transform}.leaderboard-spacer-top,.leaderboard-spacer-bottom{flex-shrink:0;pointer-events:none}.leaderboard-sentinel{flex-shrink:0;pointer-events:none;visibility:hidden}.leaderboard-entry{display:flex;align-items:center;gap:var(--space-sm);padding:10px var(--space-md);border-bottom:1px solid var(--color-bg-card-alt);transition:background var(--transition-fast);contain:content;height:48px;box-sizing:border-box}.leaderboard-entry:last-child{border-bottom:none}.leaderboard-entry.is-current{background:#eff6ff;border-left:3px solid var(--color-accent-blue)}.leaderboard-entry.is-top-1{background:linear-gradient(90deg,var(--color-warning-light),#fde68a)}.leaderboard-entry.is-top-1 .entry-rank{color:#b45309;font-weight:var(--font-weight-bold)}.leaderboard-entry.is-top-2{background:linear-gradient(90deg,var(--color-bg-card-alt),var(--color-border-light))}.leaderboard-entry.is-top-2 .entry-rank{color:var(--color-text-muted);font-weight:var(--font-weight-bold)}.leaderboard-entry.is-top-3{background:linear-gradient(90deg,#fed7aa,#fdba74)}.leaderboard-entry.is-top-3 .entry-rank{color:#c2410c;font-weight:var(--font-weight-bold)}.entry-rank{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);min-width:28px}.entry-name{flex:1;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text-primary);display:flex;align-items:center;gap:var(--space-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.entry-meta{display:flex;align-items:center;gap:var(--space-xs)}.entry-score{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--color-accent-brand);min-width:40px;text-align:right}.rank-up{font-size:var(--font-size-xs);color:var(--color-success);font-weight:var(--font-weight-semibold)}.rank-down{font-size:var(--font-size-xs);color:var(--color-error);font-weight:var(--font-weight-semibold)}.leaderboard-entry--climbing{animation:leaderboard-climb .4s ease-out}.leaderboard-entry--falling{animation:leaderboard-fall .4s ease-out}.leaderboard-entry--disconnected{opacity:.5;transition:opacity .3s ease}@keyframes leaderboard-climb{0%{transform:translateY(10px);opacity:.7;background:#0f83}to{transform:translateY(0);opacity:1;background:transparent}}@keyframes leaderboard-fall{0%{transform:translateY(-10px);opacity:.7;background:#ff004033}to{transform:translateY(0);opacity:1;background:transparent}}.streak-indicator{font-size:var(--font-size-xs);color:var(--color-warning)}.streak-indicator--hot{text-shadow:0 0 8px var(--color-warning);animation:streak-pulse 1s ease-in-out infinite}@keyframes streak-pulse{0%,to{opacity:1}50%{opacity:.7}}.leaderboard-separator{text-align:center;padding:var(--space-xs) var(--space-md);color:var(--color-text-muted);font-size:var(--font-size-sm);border-bottom:1px solid var(--color-bg-card-alt)}@media(prefers-reduced-motion:reduce){.leaderboard-entry--climbing,.leaderboard-entry--falling,.streak-indicator--hot{animation:none}}.leaderboard-you{position:sticky;bottom:0;padding:var(--space-sm) var(--space-md);background:var(--color-accent-blue);color:var(--color-text-white);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);text-align:center}.end-container{padding:var(--space-lg);max-width:480px;margin:0 auto;text-align:center}.end-header{margin-bottom:var(--space-lg)}.end-title{font-size:var(--font-size-4xl);font-weight:var(--font-weight-extrabold);color:var(--color-text-primary);margin-bottom:var(--space-sm)}.end-subtitle{font-size:var(--font-size-md);color:var(--color-text-muted);margin:0}.podium{display:flex;justify-content:center;align-items:flex-end;gap:var(--space-sm);margin-bottom:var(--space-xl)}.podium-place{display:flex;flex-direction:column;align-items:center;width:100px}.podium-medal{font-size:var(--font-size-4xl);margin-bottom:var(--space-sm)}.podium-name{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-xs);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.podium-score{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-sm)}.podium-stand{width:100%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-2xl);font-weight:var(--font-weight-extrabold);color:var(--color-text-white);border-radius:var(--radius-md) var(--radius-md) 0 0}.podium-1 .podium-stand{height:80px;background:linear-gradient(180deg,#fbbf24,var(--color-warning-dark))}.podium-2 .podium-stand{height:60px;background:linear-gradient(180deg,var(--color-text-light),var(--color-text-muted))}.podium-3 .podium-stand{height:40px;background:linear-gradient(180deg,#fb923c,#c2410c)}.your-result{background:#eff6ff;border-radius:var(--radius-xl);padding:var(--space-lg);margin-bottom:var(--space-lg)}.your-result-header{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-accent-blue);margin-bottom:var(--space-sm)}.your-result-rank{font-size:var(--font-size-2xl);font-weight:var(--font-weight-extrabold);color:var(--color-text-primary)}.your-result-score{font-size:var(--font-size-lg);color:var(--color-text-muted);margin-bottom:var(--space-md)}.your-result-stats{display:flex;justify-content:center;gap:var(--space-lg)}.stat{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-accent-brand)}.stat-label{font-size:var(--font-size-sm);color:var(--color-text-muted)}.final-leaderboard{background:var(--color-bg-white);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-lg);box-shadow:var(--shadow-md)}.final-leaderboard-header{padding:var(--space-sm) var(--space-md);background:var(--color-bg-card-alt);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-align:left}.final-leaderboard-list{max-height:200px;overflow-y:auto}.final-entry{display:flex;align-items:center;padding:10px var(--space-md);border-bottom:1px solid var(--color-bg-card-alt)}.final-entry:last-child{border-bottom:none}.final-entry.is-current{background:#eff6ff}.final-entry--disconnected{opacity:.5}.final-rank{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);width:32px}.final-name{flex:1;font-size:var(--font-size-base);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.final-score{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-accent-brand)}.end-admin-controls{display:flex;flex-direction:column;gap:var(--space-md);margin-bottom:var(--space-md)}.new-game-btn{width:100%;padding:var(--space-md) var(--space-xl);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-white);background:var(--color-success);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:background var(--transition-fast);min-width:auto;min-height:auto}.new-game-btn:hover{background:var(--color-success-hover)}.new-game-btn:disabled{background:var(--color-text-light);cursor:not-allowed}.end-player-message{color:var(--color-text-muted)}.end-player-message p{margin:0 0 var(--space-sm) 0}.end-hint{font-size:var(--font-size-base)}.rejoin-hint{font-size:var(--font-size-base);color:var(--color-text-muted);margin-top:var(--space-sm)}.reveal-report-row{display:flex;justify-content:center;margin-top:var(--space-md)}.reveal-report-btn{background:none;border:none;padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-sm);color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:color .15s ease,opacity .15s ease;opacity:.7}.reveal-report-btn:hover{color:var(--color-text-neon-muted);opacity:1}.reveal-report-btn:disabled{cursor:default;opacity:.5}.reveal-admin-controls{margin-top:var(--space-md)}.next-round-btn{padding:var(--space-md) var(--space-xl);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-white);background:var(--color-accent-brand);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast)}.next-round-btn:hover{background:var(--color-accent-brand-hover)}.next-round-btn:disabled{background:var(--color-text-light);cursor:not-allowed}.next-round-btn.is-final{background:var(--color-success)}.next-round-btn.is-final:hover{background:var(--color-success-hover)}.reveal-admin-buttons{display:flex;flex-direction:column;gap:var(--space-md);align-items:center}@media(min-width:480px){.reveal-admin-buttons{flex-direction:row;justify-content:center}}.invite-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--color-text-white);background:var(--color-bg-tertiary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);min-height:44px;min-width:44px}.invite-btn:hover{background:var(--color-bg-secondary);border-color:var(--color-border-neon)}.invite-btn:active{transform:scale(.98)}.invite-btn-icon{font-size:var(--font-size-lg)}.invite-btn-label{white-space:nowrap}.invite-modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center}.invite-modal.hidden{display:none}.invite-modal-backdrop{position:absolute;inset:0;background:#000c}.invite-modal-content{position:relative;background:var(--color-bg-primary);border:1px solid var(--color-border-neon);padding:var(--space-lg);border-radius:var(--radius-xl);text-align:center;max-width:90vw;max-height:90vh;overflow-y:auto;animation:modalFadeIn var(--transition-normal) ease-out}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.invite-modal-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-white);margin:0 0 var(--space-xs)}.invite-modal-hint{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:0 0 var(--space-md)}.invite-modal-code{display:inline-block;padding:var(--space-md);background:var(--color-bg-white);border-radius:var(--radius-md);margin-bottom:var(--space-md)}.invite-modal-code img{display:block;width:200px;height:200px}@media(min-width:480px){.invite-modal-code img{width:256px;height:256px}}.invite-modal-url-container{display:flex;gap:var(--space-xs);margin-bottom:var(--space-sm);max-width:100%}.invite-modal-url{flex:1;padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);font-family:var(--font-family-mono);color:var(--color-text-primary);background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);min-width:0;text-overflow:ellipsis}body.theme-dark .invite-modal-url{color:#e2e8f0;background:#ffffff1a;border-color:#ffffff26}.invite-copy-btn{display:flex;align-items:center;justify-content:center;padding:var(--space-sm);min-width:44px;min-height:44px;background:var(--color-accent-brand);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.invite-copy-btn:hover{background:var(--color-accent-brand-hover)}.invite-copy-btn:active{transform:scale(.95)}.invite-copy-icon{font-size:var(--font-size-lg)}.invite-copy-feedback{font-size:var(--font-size-sm);color:var(--color-success);margin:0 0 var(--space-md);animation:fadeInOut 2s ease-in-out}.invite-copy-feedback.hidden{display:none}@keyframes fadeInOut{0%,to{opacity:0}10%,80%{opacity:1}}.invite-modal-close{min-width:120px;min-height:48px}.reveal-results-cards{margin-top:var(--space-lg);width:100%;overflow:visible}.results-cards-header{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);margin-bottom:var(--space-sm);text-align:center}.results-cards-scroll{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--space-sm);width:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:var(--space-xs);-webkit-overflow-scrolling:touch}.results-cards-scroll::-webkit-scrollbar{height:3px}.results-cards-scroll::-webkit-scrollbar-thumb{background:var(--color-border-light);border-radius:2px}.result-card{background:var(--color-bg-card);border-radius:var(--radius-md);padding:var(--space-sm);text-align:center;border:2px solid var(--color-border-light);transition:all var(--transition-fast);flex:1 1 140px;min-width:140px;max-width:220px;box-sizing:border-box}.result-card.is-current{border-color:var(--color-accent-brand);background:#6366f11a}.result-card.is-score-high{border-color:var(--color-success);background:#10b9811a}.result-card.is-score-medium{border-color:var(--color-warning);background:#f59e0b1a}.result-card.is-score-zero{opacity:.6}.card-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.card-guess{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.card-accuracy{font-size:var(--font-size-xs);color:var(--color-text-muted)}.result-card.is-score-high .card-accuracy{color:var(--color-success);font-weight:var(--font-weight-semibold)}.card-score{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-success);margin-top:2px}.card-bet{margin-left:4px}body.theme-dark .result-card{background:#ffffff0d;border-color:#ffffff1a}body.theme-dark .result-card.is-current{border-color:var(--color-accent-neon);background:#00f5ff1a}body.theme-dark .result-card.is-score-high{border-color:var(--color-success-neon);background:#00ff881a}body.theme-dark .result-card.is-score-medium{border-color:var(--color-warning);background:#f59e0b26}body.theme-dark .card-name,body.theme-dark .card-guess{color:var(--color-text-white)}body.theme-dark .card-accuracy{color:var(--color-text-neon-muted)}body.theme-dark .result-card.is-score-high .card-accuracy,body.theme-dark .card-score{color:var(--color-success-neon)}.admin-control-bar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;padding:var(--space-sm) var(--space-sm);padding-bottom:calc(var(--space-sm) + env(safe-area-inset-bottom));background:#000000e6;border-top:1px solid var(--color-border-dark);z-index:var(--z-control-bar)}.admin-control-bar.hidden{display:none}.control-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:var(--space-sm) var(--space-sm);background:#2a2a2a;border:none;border-radius:var(--radius-md);color:var(--color-text-white);cursor:pointer;transition:background var(--transition-fast),opacity var(--transition-fast)}.control-btn:hover:not(.is-disabled){background:#3a3a3a}.control-btn:active:not(.is-disabled){background:#4a4a4a}.control-btn.is-disabled{opacity:.4;cursor:not-allowed}.control-btn--danger{background:#7f1d1d}.control-btn--danger:hover:not(.is-disabled){background:#991b1b}.control-btn.is-stopped{background:var(--color-text-secondary);opacity:.7}.control-btn.is-stopped .control-icon{color:var(--color-success)}.volume-indicator{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#000000e6;color:var(--color-text-white);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-sm);opacity:0;transition:opacity var(--transition-normal);pointer-events:none;white-space:nowrap}.volume-indicator.is-visible{opacity:1}.control-btn.is-at-limit{opacity:.5}.control-btn.is-at-limit:active{transform:none}.control-icon{font-size:var(--font-size-xl);line-height:1}.control-icon.is-countdown{font-variant-numeric:tabular-nums;font-weight:700;min-width:1.5em;text-align:center}.control-label{font-size:var(--font-size-xs);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}.has-control-bar .game-container,.has-control-bar .reveal-container,.has-control-bar .end-container{padding-bottom:140px}.reaction-bar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;padding:var(--space-sm);padding-bottom:calc(var(--space-sm) + env(safe-area-inset-bottom));z-index:var(--z-reaction-bar);pointer-events:none}main:has(.admin-control-bar:not(.hidden)) .reaction-bar{bottom:70px}.reaction-bar.hidden{display:none}.reaction-bar-container{display:flex;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:#0009;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:auto}.reaction-btn{font-size:1.5rem;padding:var(--space-sm);min-width:44px;min-height:44px;background:#1e1e2880;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);cursor:pointer;transition:transform var(--transition-fast),background var(--transition-fast)}.reaction-btn:hover{background:#32323cb3}.reaction-btn:active{transform:scale(.9)}.reaction-btn:disabled{cursor:default;opacity:.45}.reaction-btn.is-used{opacity:1;border-color:var(--color-accent-primary);box-shadow:0 0 12px var(--color-accent-primary)}@media(hover:none){.reaction-btn:active{box-shadow:0 0 15px var(--color-accent-primary)}}@media(prefers-reduced-motion:reduce){.reaction-btn{transition:none}.reaction-btn:active{transform:none}}.reaction-container{position:fixed;bottom:120px;left:0;right:0;pointer-events:none;z-index:99}main:has(.admin-control-bar:not(.hidden)) .reaction-container{bottom:180px}.reaction-bubble{position:absolute;font-size:1rem;font-weight:600;color:var(--color-text-white);text-shadow:0 0 8px var(--color-accent-primary);animation:reaction-float 3s ease-out forwards;white-space:nowrap}@keyframes reaction-float{0%{opacity:1;transform:translateY(0)}70%{opacity:1}to{opacity:0;transform:translateY(calc(-50vh + 60px))}}@media(prefers-reduced-motion:reduce){.reaction-bubble{animation:none;opacity:1}}.paused-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-2xl) var(--space-lg);min-height:60vh;text-align:center}.paused-icon{font-size:var(--font-size-hero);margin-bottom:var(--space-lg);animation:pause-pulse 2s infinite}@keyframes pause-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.95)}}.paused-container h1{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-md)}.paused-container>p{font-size:var(--font-size-md);color:var(--color-text-muted);margin-bottom:var(--space-sm)}.paused-spinner{margin:var(--space-xl) 0}.paused-hint{font-size:var(--font-size-base);color:var(--color-text-light)}.reconnecting-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:var(--z-overlay)}.reconnecting-overlay.hidden{display:none}.reconnecting-content{text-align:center;color:var(--color-text-white)}.reconnecting-spinner .spinner{border-top-color:var(--color-text-white);width:48px;height:48px;margin:0 auto var(--space-md)}.reconnect-status{font-size:var(--font-size-md);color:var(--color-border-light)}.connection-lost-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-2xl) var(--space-lg);min-height:60vh;text-align:center}.connection-lost-icon{font-size:var(--font-size-hero);margin-bottom:var(--space-lg)}.connection-lost-container h1{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-md)}.connection-lost-container>p{font-size:var(--font-size-md);color:var(--color-text-muted);margin-bottom:var(--space-lg)}.connection-lost-hint{font-size:var(--font-size-base);color:var(--color-text-light);margin-top:var(--space-md)}@media(max-width:360px){.correct-year{font-size:var(--font-size-year)}.reveal-album-cover{width:120px;height:120px}}@media(min-width:768px){.reveal-album-cover{width:180px;height:180px}.correct-year{font-size:84px}}:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px}body.theme-dark :focus-visible{outline-color:var(--color-accent-primary);box-shadow:0 0 0 4px #ff2d6a4d}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media(prefers-color-scheme:light){body:not(.theme-dark){--color-bg-primary: #ffffff;--color-bg-surface: #f5f5f7;--color-bg-card: #ffffff;--color-bg-card-alt: #f8fafc;--color-text-primary: #1a1a1a;--color-text-muted: #666666;--color-text-light: #999999;--color-border-light: #e5e7eb}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-40px;left:0;background:var(--color-accent-primary);color:var(--color-text-white);padding:var(--space-sm) var(--space-md);z-index:var(--z-modal);transition:top var(--transition-fast)}.skip-link:focus{top:0}body.energy-calm .btn-glow:hover{box-shadow:none}body.energy-calm .wordmark-hero{text-shadow:none}body.energy-warmup .player-card{animation:energy-slide-in .3s ease-out}body.energy-warmup .qr-container{animation:energy-pulse-subtle 3s ease-in-out infinite}@keyframes energy-slide-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes energy-pulse-subtle{0%,to{opacity:1}50%{opacity:.85}}body.energy-party .album-cover{box-shadow:0 0 60px #ffffff1a}body.energy-party .submit-btn:not(:disabled){box-shadow:var(--glow-primary)}body.energy-party .year-display{text-shadow:0 0 20px rgba(255,45,106,.3)}.view{animation:screen-fade-in .3s ease-out}@keyframes screen-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){body.energy-warmup .player-card,body.energy-warmup .qr-container,.view{animation:none}}.steal-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);width:100%;padding:var(--space-sm) var(--space-md);margin-top:var(--space-sm);background:linear-gradient(135deg,var(--color-purple-primary, #8b5cf6),var(--color-purple-secondary, #7c3aed));border:none;border-radius:var(--radius-lg);color:var(--color-text-white);font-size:var(--font-size-base);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;box-shadow:0 0 20px #8b5cf666;transition:all var(--transition-fast)}.steal-btn:hover:not(:disabled){transform:scale(1.03);box-shadow:0 0 30px #8b5cf699}.steal-btn:disabled{opacity:.5;cursor:not-allowed}.steal-btn-icon{font-size:var(--font-size-lg)}.steal-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal)}.steal-modal-backdrop{position:absolute;inset:0;background:#000c;backdrop-filter:blur(4px)}.steal-modal-content{position:relative;background:var(--color-bg-card);border:2px solid var(--color-purple-primary, #8b5cf6);border-radius:var(--radius-xl);padding:var(--space-lg);max-width:320px;width:90%;text-align:center;box-shadow:0 0 40px #8b5cf64d}.steal-modal-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-xs)}.steal-modal-subtitle{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-md)}.steal-target-list{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-md)}.steal-target-btn{display:block;width:100%;padding:var(--space-sm) var(--space-md);background:var(--color-bg-surface);border:1px solid var(--color-accent-secondary);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast)}.steal-target-btn:hover{background:var(--color-accent-secondary);color:var(--color-bg-primary);transform:scale(1.02)}.steal-no-targets{color:var(--color-text-muted);font-size:var(--font-size-sm);padding:var(--space-md)}.steal-modal-cancel{width:100%}.steal-confirmation{position:fixed;bottom:calc(var(--space-xl) + 60px);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-sm);background:linear-gradient(135deg,var(--color-purple-primary, #8b5cf6),var(--color-purple-secondary, #7c3aed));color:var(--color-text-white);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);font-weight:var(--font-weight-semibold);box-shadow:0 4px 20px #8b5cf680;animation:steal-toast-in .3s ease-out;z-index:var(--z-tooltip)}@keyframes steal-toast-in{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.steal-confirmation-icon{font-size:var(--font-size-lg)}.steal-badge{display:inline-flex;align-items:center;gap:var(--space-xs);background:#8b5cf633;border:1px solid var(--color-purple-primary, #8b5cf6);border-radius:var(--radius-full);padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs);color:var(--color-purple-primary, #8b5cf6);margin-top:var(--space-xs)}.steal-badge-icon{font-size:.9em}.steal-badge-victim{background:#ef444433;border-color:var(--color-error);color:var(--color-error)}body.theme-dark .steal-modal-content{background:var(--color-bg-card)}body.theme-dark .steal-target-btn{background:#ffffff0d;border-color:var(--color-accent-secondary)}body.theme-dark .steal-target-btn:hover{background:var(--color-accent-secondary);color:var(--color-bg-primary)}@media(prefers-reduced-motion:reduce){.stat-badge--steal,.steal-confirmation{animation:none}}.intro-splash-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal)}.intro-splash-modal-backdrop{position:absolute;inset:0;background:#000c;backdrop-filter:blur(4px)}.intro-splash-modal-content{position:relative;background:var(--color-bg-card);border:2px solid var(--color-accent-primary, #1db954);border-radius:var(--radius-xl);padding:var(--space-lg);max-width:400px;width:90%;text-align:center;box-shadow:0 0 40px #1db9544d}.intro-splash-modal-emoji{font-size:3rem;margin-bottom:var(--space-sm)}.intro-splash-modal-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-xs)}.intro-splash-modal-desc{font-size:var(--font-size-base);color:var(--color-text-secondary);margin-bottom:var(--space-md)}.intro-splash-modal-waiting{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-sm)}.intro-splash-confirm-btn{width:100%;margin-top:var(--space-sm)}.score-animating{font-variant-numeric:tabular-nums}@keyframes score-pop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.score-pop{animation:score-pop .7s ease-out;display:inline-block}@keyframes score-shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.score-shake{animation:score-shake .4s ease-out;display:inline-block}@keyframes score-flash-red{0%,to{color:inherit}50%{color:var(--color-error)}}.score-flash-red{animation:score-flash-red .4s ease-out}@keyframes score-glow-gold{0%,to{text-shadow:0 0 0 transparent;color:inherit}50%{text-shadow:0 0 20px #ffd700,0 0 40px #ffd700;color:gold}}.score-glow-gold{animation:score-glow-gold .8s ease-out;display:inline-block}@keyframes score-burst{0%{transform:scale(1);text-shadow:0 0 0 transparent}30%{transform:scale(1.4);text-shadow:0 0 30px #ff6600}to{transform:scale(1);text-shadow:0 0 0 transparent}}.score-burst{animation:score-burst .7s ease-out;display:inline-block}@keyframes popup-float{0%{opacity:0;transform:translate(-50%)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-30px)}}.points-popup{position:fixed;z-index:var(--z-toast);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-success);pointer-events:none;animation:popup-float 1s ease-out forwards;transform:translate(-50%)}.points-popup--gold{color:gold;text-shadow:0 0 10px #ffd700}.points-popup--streak{color:#f60;text-shadow:0 0 10px #ff6600;font-size:var(--font-size-xl)}.leaderboard-entry--slide-up{animation:leaderboard-slide-up .5s ease-out}@keyframes leaderboard-slide-up{0%{transform:translateY(10px);background:#00ff884d}to{transform:translateY(0);background:transparent}}.leaderboard-entry--slide-down{animation:leaderboard-slide-down .5s ease-out}@keyframes leaderboard-slide-down{0%{transform:translateY(-10px);opacity:.6}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.score-pop,.score-shake,.score-glow-gold,.score-burst,.score-flash-red{animation:none!important}.points-popup{animation:none!important;display:none!important}.leaderboard-entry--slide-up,.leaderboard-entry--slide-down{animation:none!important}}body.device-tier-low .leaderboard-entry--climbing,body.device-tier-low .leaderboard-entry--falling,body.device-tier-low .leaderboard-entry--slide-up,body.device-tier-low .leaderboard-entry--slide-down{animation:none!important}body.device-tier-low .neon-glow,body.device-tier-low .btn-glow:hover{box-shadow:none!important}body.device-tier-low .score-pop,body.device-tier-low .score-shake,body.device-tier-low .score-glow-gold,body.device-tier-low .score-burst{animation:none!important}body.device-tier-low .points-popup{display:none!important}body.device-tier-medium .leaderboard-entry--climbing,body.device-tier-medium .leaderboard-entry--falling{animation-duration:.2s!important}body.device-tier-medium .neon-glow{animation:none!important}body.device-tier-medium .score-pop,body.device-tier-medium .score-shake,body.device-tier-medium .score-glow-gold,body.device-tier-medium .score-burst{animation-duration:.2s!important}.reveal-skip-hint{position:absolute;bottom:var(--space-md);left:50%;transform:translate(-50%);font-size:var(--font-size-sm);color:var(--color-text-muted);opacity:0;animation:fadeInDelayed .3s ease-out 1s forwards}@keyframes fadeInDelayed{to{opacity:.6}}@media(prefers-reduced-motion:reduce){.reveal-skip-hint{animation:none;opacity:.6}}body.device-tier-low .reveal-skip-hint{animation:none;opacity:.6}.request-btn{margin-top:var(--space-md);gap:var(--space-xs)}.requests-list{display:flex;flex-direction:column;gap:var(--space-sm)}.request-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--color-surface-raised);border-radius:var(--radius-md);border:1px solid var(--color-border)}.request-item-thumbnail{width:40px;height:40px;min-width:40px;min-height:40px;max-width:40px;max-height:40px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}.request-item-thumbnail-placeholder{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:var(--radius-sm);background:var(--color-surface);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}.request-item-info{flex:1;min-width:0}.request-item-name{font-weight:600;font-size:var(--font-size-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.request-item-meta{font-size:var(--font-size-sm);color:var(--color-text-muted)}.request-status{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;white-space:nowrap}.request-status--pending{background:#ffc10726;color:#ffc107}.request-status--ready{background:#4caf5026;color:#4caf50}.request-status--installed{background:transparent;color:#4caf50;border:1px solid #4caf50}.request-status--declined{background:#f4433626;color:#f44336}.request-update-btn{font-size:var(--font-size-xs);padding:6px 12px;white-space:nowrap}.text-input{width:100%;padding:var(--space-sm) var(--space-md);font-size:var(--font-size-base);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);transition:border-color .15s ease}.text-input:focus{outline:none;border-color:var(--color-primary)}.text-input.input-error{border-color:var(--color-error)}.info-box{background:var(--color-surface-raised);border-radius:var(--radius-md);padding:var(--space-md);margin-top:var(--space-md)}.info-box-title{font-weight:600;margin-bottom:var(--space-xs);color:var(--color-text-muted)}.info-box-list{margin:0;padding-left:0;list-style-position:inside;font-size:var(--font-size-sm);color:var(--color-text-muted)}.info-box-list li{margin-bottom:var(--space-xs)}.info-box-list li:last-child{margin-bottom:0}.info-box-note{margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-text-muted)}.modal-content--success{text-align:center}.success-icon{font-size:3rem;margin-bottom:var(--space-sm)}.success-playlist-name{font-weight:600;font-size:var(--font-size-lg);margin-bottom:var(--space-xs)}.success-estimate{color:var(--color-text-muted);font-size:var(--font-size-sm)}.btn--loading{position:relative;color:transparent!important;pointer-events:none}.btn--loading:after{content:"";position:absolute;width:16px;height:16px;top:50%;left:50%;margin-left:-8px;margin-top:-8px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.share-container{margin:1.5rem 0;text-align:center}.share-header{font-size:1.2rem;font-weight:700;margin-bottom:1rem;color:var(--text-primary, #fff)}.share-card-preview{margin:12px auto;max-width:360px;width:100%;border-radius:16px;overflow:hidden;box-shadow:0 12px 36px #00000080,0 0 0 1px #ff2d6a40;background:#0a0a12}.share-card-image{display:block;width:100%;height:auto;aspect-ratio:1 / 1}.share-buttons{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.share-btn{padding:.6rem 1.2rem;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;background:var(--accent-color, #e94560);color:#fff;transition:opacity .2s,transform .1s}.share-btn:hover{opacity:.9}.share-btn:active{transform:scale(.97)}.share-toast{margin-top:.75rem;padding:.4rem 1rem;background:var(--success-color, #4caf50);color:#fff;border-radius:20px;display:inline-block;font-size:.85rem;font-weight:600;animation:shareToastIn .3s ease}@keyframes shareToastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.admin-share-player-tabs{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-bottom:.75rem}.admin-share-tab{padding:.3rem .85rem;border-radius:20px;border:1px solid var(--color-border-light);background:transparent;color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer;transition:all .15s ease}.admin-share-tab:hover{border-color:var(--color-accent-brand);color:var(--color-accent-brand)}.admin-share-tab.active{background:var(--color-accent-brand);border-color:var(--color-accent-brand);color:#fff;font-weight:var(--font-weight-semibold)}@media(max-width:480px){.share-buttons{flex-direction:column;align-items:center}.share-btn{width:100%;max-width:280px}.share-card-preview{max-width:320px}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton{background:linear-gradient(90deg,var(--color-bg-card) 25%,#3a3a4e 50%,var(--color-bg-card) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}.skeleton-list{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-sm) 0}.skeleton-row{height:48px;width:100%}.skeleton-card{height:64px;width:100%}.player-header{position:relative}.connection-indicator{position:absolute;top:50%;right:var(--space-md);transform:translateY(-50%);display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .3s ease}.connection-indicator--disconnected{opacity:1}.connection-dot{width:8px;height:8px;border-radius:50%;background:var(--color-error, #e94560);animation:pulse-dot 1.2s infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.party-lights-picker{margin-top:12px}.party-lights-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.85rem;color:var(--text-secondary, #aaa)}.party-lights-count{font-weight:500}.btn-link{background:none;border:none;color:var(--accent, #ff00ff);cursor:pointer;font-size:.85rem;padding:4px 8px}.btn-link:hover{text-decoration:underline}.party-lights-list{max-height:240px;overflow-y:auto;border-radius:8px;background:var(--card-bg, rgba(255,255,255,.05));margin-bottom:12px}.party-light-item{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border, rgba(255,255,255,.08));min-height:44px}.party-light-item:last-child{border-bottom:none}.party-light-item:hover{background:#ffffff08}.party-light-item input[type=checkbox]{width:18px;height:18px;flex-shrink:0;accent-color:var(--accent, #ff00ff)}.light-status{font-size:.75rem;flex-shrink:0}.light-name{flex:1;font-size:.9rem;color:var(--text-primary, #fff);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.light-cap-badge{font-size:.7rem;padding:2px 6px;border-radius:4px;background:#ffffff1a;color:var(--text-secondary, #aaa);flex-shrink:0;font-weight:500}.setting-row--vertical{flex-direction:column;align-items:flex-start;gap:var(--space-sm, 8px)}.wled-presets-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-xs, 4px) var(--space-sm, 8px);width:100%}.wled-preset-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs, 4px);font-size:.8rem;color:var(--text-secondary, #aaa)}.wled-preset-item .input-sm{width:48px;padding:2px 4px;border:1px solid rgba(255,255,255,.15);border-radius:4px;background:#ffffff0d;color:var(--text-primary, #fff);font-size:.8rem;text-align:center}.admin-game-wrapper{max-width:480px;margin:0 auto}.admin-phase-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.round-badge{font-weight:600;font-size:1rem}.timer-badge{font-size:1.2rem;font-weight:700;font-variant-numeric:tabular-nums;min-width:3em;text-align:center}.timer-badge.timer-warning{color:var(--color-warning, #f59e0b)}.timer-badge.timer-critical{color:var(--color-danger, #ef4444);animation:pulse-critical .5s ease-in-out infinite alternate}@keyframes pulse-critical{0%{opacity:1}to{opacity:.5}}.admin-song-card{display:flex;align-items:center;gap:var(--space-md);background:var(--color-bg-card);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-md)}.admin-album-art{width:64px;height:64px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}.admin-song-meta{min-width:0}.admin-song-title{font-weight:600;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-song-artist{color:var(--text-secondary, #aaa);font-size:.9rem}.admin-song-details{text-align:center;margin-bottom:var(--space-sm, 8px)}.admin-song-year{font-size:.95rem;color:var(--color-primary, #1db954);font-weight:600}.admin-song-funfact{font-size:.85rem;color:var(--text-secondary, #aaa);font-style:italic;margin-top:4px;line-height:1.3}.admin-playing-banner{display:flex;align-items:center;gap:var(--space-sm, 8px);padding:var(--space-sm, 8px) var(--space-md, 16px);background:var(--bg-card, rgba(255, 255, 255, .05));border-bottom:2px solid var(--color-primary, #1db954);font-size:.9rem}.admin-playing-banner-icon{font-size:1.1rem;flex-shrink:0}.admin-playing-banner-text{flex:1;min-width:0}.admin-playing-banner-btn{flex-shrink:0;font-size:.8rem;padding:4px 10px;border-radius:var(--radius-sm, 8px)}.idle-halt-banner{display:flex;align-items:center;gap:var(--space-sm, 8px);margin:var(--space-md, 16px) auto;padding:var(--space-sm, 8px) var(--space-md, 16px);background:var(--bg-card, rgba(255, 255, 255, .06));border:1px solid var(--color-warning, #f5a623);border-radius:var(--radius-md, 12px);color:var(--color-warning, #f5a623);font-size:.9rem;line-height:1.35;max-width:540px}.idle-halt-icon{font-size:1.2rem;flex-shrink:0}.admin-pause-recovery{margin:var(--space-md, 16px);padding:var(--space-md, 16px) var(--space-lg, 20px);background:var(--bg-card, rgba(255, 255, 255, .06));border:2px solid var(--color-warning, #f5a623);border-radius:var(--radius-md, 12px)}.admin-pause-recovery-header{display:flex;align-items:center;gap:var(--space-sm, 8px);margin-bottom:var(--space-sm, 8px)}.admin-pause-recovery-icon{font-size:1.3rem;flex-shrink:0}.admin-pause-recovery-title{font-size:1rem;color:var(--color-warning, #f5a623)}.admin-pause-recovery-message{font-size:.95rem;line-height:1.4;margin:0 0 var(--space-sm, 8px) 0;color:var(--text-primary, #ffffff)}.admin-pause-recovery-detail{font-size:.8rem;line-height:1.3;margin:0 0 var(--space-md, 16px) 0;color:var(--text-secondary, rgba(255, 255, 255, .6));font-family:var(--font-monospace, monospace);word-break:break-word}.admin-pause-recovery-detail.hidden{display:none}.admin-pause-recovery-actions{display:flex;gap:var(--space-sm, 8px);flex-wrap:wrap}.admin-pause-recovery-actions .btn{flex:1;min-width:120px}.admin-personal-result-card{display:flex;flex-direction:column;gap:var(--space-xs, 4px)}.admin-personal-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xs, 4px) 0}.admin-personal-label{color:var(--text-secondary, #aaa);font-size:.9rem}.admin-personal-value{font-weight:600;font-size:1rem}.admin-personal-score{color:var(--color-primary, #1db954);font-size:1.1rem}.artist-option--readonly{padding:10px 14px;background:var(--bg-card, rgba(255, 255, 255, .05));border:1px solid var(--color-border-dark, rgba(255, 255, 255, .1));border-radius:var(--radius-md, 12px);text-align:center;font-size:.9rem;opacity:.8}.admin-intro-splash{text-align:center;padding:var(--space-md);margin-bottom:var(--space-md);background:var(--bg-card, rgba(255, 255, 255, .05));border-radius:var(--radius-md, 12px);border:1px solid var(--color-primary, #1db954)}.intro-splash-info{font-size:1.1rem;font-weight:600;margin-bottom:var(--space-sm)}.intro-splash-icon{margin-right:6px}.btn-compact{padding:8px 12px;font-size:.85rem}.admin-player-panel{background:var(--color-bg-card);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-md)}.admin-year-selector{text-align:center;margin-bottom:var(--space-md)}.admin-year-selector .year-display{display:block;font-size:2.5rem;font-weight:700;margin-bottom:var(--space-sm);font-variant-numeric:tabular-nums}.admin-year-selector .year-slider{width:100%;margin-bottom:var(--space-xs)}.year-range-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-secondary, #aaa)}.last-round-banner{text-align:center;padding:var(--space-sm);background:var(--color-warning, #f59e0b);color:#000;border-radius:var(--radius-sm);font-weight:600;margin-bottom:var(--space-md)}.submission-status{text-align:center;color:var(--text-secondary, #aaa);font-size:.9rem;margin-top:var(--space-sm)}.submission-count{margin-bottom:6px}.submission-players{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.submission-player{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:12px;font-size:.8rem;background:var(--bg-card, rgba(255, 255, 255, .05))}.submission-player.is-submitted{color:var(--color-primary, #1db954)}.submission-player.is-waiting{opacity:.6}.reveal-year-display{font-size:2.5rem;font-weight:700;text-align:center;margin:var(--space-md) 0;color:var(--color-primary, #1db954)}.admin-personal-result{display:flex;justify-content:space-between;align-items:center;background:var(--color-bg-card);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-md)}.score-badge{font-weight:700;color:var(--color-primary, #1db954)}.admin-leaderboard-container{margin-bottom:var(--space-md)}.admin-leaderboard{width:100%;border-collapse:collapse}.admin-leaderboard th{text-align:left;font-weight:600;padding:var(--space-xs) var(--space-sm);border-bottom:1px solid var(--color-border-light);font-size:.85rem;color:var(--text-secondary, #aaa)}.admin-leaderboard td{padding:var(--space-xs) var(--space-sm)}.admin-leaderboard tr.admin-highlight td{font-weight:600;color:var(--color-primary, #1db954)}.admin-winner-display{text-align:center;font-size:1.3rem;font-weight:600;padding:var(--space-lg) 0}.winner-trophy{font-size:2rem}.admin-end-actions{display:flex;gap:var(--space-sm);justify-content:center;margin-top:var(--space-md)}body.wizard-active>.admin-header,body.wizard-active>main.admin-content,body.wizard-active>.pwa-ios-hint{display:none}.wizard-takeover{position:fixed;inset:0;z-index:var(--z-overlay, 1100);background:var(--color-bg-primary);display:flex;flex-direction:column;overflow:hidden}.wizard-takeover.hidden{display:none}.wiz-bg{position:absolute;inset:0;background:radial-gradient(ellipse at top,rgba(255,45,106,.18),transparent 55%),radial-gradient(ellipse at bottom right,rgba(0,245,255,.12),transparent 40%);pointer-events:none}.wiz-top{padding:var(--space-md) var(--space-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);border-bottom:1px solid var(--color-border-neon);position:relative;z-index:1}.wiz-step-count{font-family:var(--font-display);font-weight:600;font-size:var(--font-size-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-dim, #6b6b7a);flex:1;text-align:center}.wiz-skip{font-family:var(--font-display);font-size:var(--font-size-sm);color:var(--color-text-neon-muted);background:none;border:none;font-weight:500;cursor:pointer;padding:var(--space-xs) var(--space-sm)}.wiz-skip:hover{color:var(--color-text-white)}.wiz-progress{display:flex;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);position:relative;z-index:1}.wiz-seg{flex:1;height:3px;background:var(--color-dark-surface);border-radius:var(--radius-full);overflow:hidden}.wiz-seg.filled{background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));box-shadow:0 0 12px #ff2d6a80}.wiz-seg.active .wiz-seg-inner{height:100%;width:60%;background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));box-shadow:0 0 12px #ff2d6a80;border-radius:var(--radius-full)}.wiz-frame{flex:1;overflow-y:auto;position:relative;z-index:1}.wiz-frame[hidden]{display:none}.wiz-body{padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md);max-width:720px;margin:0 auto}.wiz-eyebrow{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-secondary)}.wiz-title{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-3xl);line-height:1.15;letter-spacing:-.01em;color:var(--color-text-white)}.wiz-sub{color:var(--color-text-neon-muted);font-size:var(--font-size-base);line-height:1.5}.wiz-hint{font-size:var(--font-size-sm);margin-top:var(--space-xs)}.wiz-hint a{color:var(--color-accent-secondary);text-decoration:underline}.wiz-list{display:flex;flex-direction:column;gap:var(--space-sm)}.wiz-row{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition-fast);color:var(--color-text-white);text-align:left;width:100%;font-family:var(--font-body)}.wiz-row:hover{background:var(--color-dark-surface-hover)}.wiz-row.selected{background:linear-gradient(90deg,#ff2d6a26,#00f5ff0d);border-color:var(--color-accent-primary);box-shadow:0 0 14px #ff2d6a40}.wiz-row-avatar{width:36px;height:36px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-brand));flex-shrink:0;display:grid;place-items:center;color:var(--color-bg-primary)}.wiz-row-avatar-icon{width:20px;height:20px}.wiz-row-text{flex:1;min-width:0}.wiz-row-name{font-family:var(--font-display);font-weight:600;font-size:var(--font-size-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wiz-row-sub{font-size:var(--font-size-xs);color:var(--color-text-neon-muted);margin-top:2px}.wiz-row-check{color:var(--color-success-neon);text-shadow:var(--glow-success)}.wiz-provider-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.wiz-provider-chip{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);font-family:var(--font-display);font-weight:600;font-size:var(--font-size-base);cursor:pointer;color:var(--color-text-white);transition:var(--transition-fast)}.wiz-provider-chip:hover{background:var(--color-dark-surface-hover)}.wiz-provider-chip.active{border-color:var(--color-accent-primary);box-shadow:0 0 14px #ff2d6a40}.wiz-provider-chip.connected{border-color:var(--color-success-neon);background:#39ff141a}.wiz-provider-chip{justify-content:space-between}.wiz-provider-chip.disabled{opacity:.4;cursor:help;background:#ffffff05}.wiz-provider-chip.disabled:hover{opacity:.55;background:#ffffff0a}.wiz-provider-chip .chip-lock{width:14px;height:14px;opacity:.7;flex-shrink:0}.wiz-row-sub .cap-dot{width:4px;height:4px;border-radius:50%;background:var(--color-text-dim);display:inline-block;margin:0 6px;vertical-align:middle}.wiz-row-sub .cap-badge{font-family:var(--font-display);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:1px 6px;border-radius:var(--radius-sm);border:1px solid;vertical-align:middle;white-space:nowrap}.wiz-row-sub .cap-badge.full{color:var(--color-success-neon);background:#39ff1414;border-color:#39ff1466}.wiz-row-sub .cap-badge.partial{color:var(--color-warning-alt);background:#ff660014;border-color:#f606}.wiz-row-sub .cap-badge.none{color:var(--color-error-neon);background:#ff004014;border-color:#ff004066}.wiz-row-sub .cap-badge.summary{color:var(--color-text-dim);background:none;border:none;padding:0;text-transform:none;letter-spacing:0;font-weight:500}.wiz-explainer{margin-top:var(--space-md);padding:var(--space-lg);border-radius:var(--radius-lg);background:linear-gradient(135deg,#ff66000f,#00f5ff0a);border:1px solid rgba(255,102,0,.35)}.wiz-explainer[hidden]{display:none}.wiz-explainer-title{display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-display);font-weight:700;font-size:var(--font-size-md);margin:0 0 var(--space-sm)}.wiz-explainer-title .icon{font-size:18px}.wiz-explainer-body{font-size:var(--font-size-base);line-height:1.55;color:var(--color-text-neon-muted);margin:0 0 var(--space-md)}.wiz-explainer-steps{margin:0 0 var(--space-md);padding-left:var(--space-lg);font-size:var(--font-size-base);line-height:1.75;color:var(--color-text-neon-muted)}.wiz-explainer-steps li strong{color:var(--color-text-white)}.wiz-explainer-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap}.wiz-explainer-footer{margin:var(--space-md) 0 0;padding-top:var(--space-sm);border-top:1px solid rgba(255,255,255,.06);font-size:var(--font-size-sm);color:var(--color-text-dim);font-style:italic}.wiz-lvl-card{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition-fast)}.wiz-lvl-card.on{background:#00f5ff14;border-color:var(--color-accent-secondary)}.wiz-lvl-card.unavailable{opacity:.45;cursor:not-allowed}.wiz-lvl-text{flex:1}.wiz-lvl-title{font-family:var(--font-display);font-weight:600;font-size:var(--font-size-base);color:var(--color-text-white)}.wiz-lvl-desc{font-size:var(--font-size-xs);color:var(--color-text-neon-muted);margin-top:2px;line-height:1.4}.wiz-lvl-toggle{width:38px;height:22px;background:var(--color-dark-surface-hover);border-radius:var(--radius-full);border:1px solid var(--color-border-neon);position:relative;flex-shrink:0;margin-top:2px}.wiz-lvl-toggle:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--color-text-neon-muted);border-radius:var(--radius-full);transition:var(--transition-fast)}.wiz-lvl-card.on .wiz-lvl-toggle{background:var(--color-accent-primary);border-color:var(--color-accent-primary)}.wiz-lvl-card.on .wiz-lvl-toggle:after{left:18px;background:var(--color-bg-primary)}.wiz-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-lg);text-align:center;padding:var(--space-xl);position:relative;z-index:1}.wiz-done-badge{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-sm);letter-spacing:.14em;color:var(--color-success-neon);text-shadow:var(--glow-success)}.wiz-done-tag{font-family:var(--font-display);font-weight:600;font-size:var(--font-size-xl);color:var(--color-text-white)}.wiz-done-summary{display:flex;flex-direction:column;gap:var(--space-xs);width:100%;max-width:380px;padding:var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-lg)}.wiz-done-line{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-lg);font-family:var(--font-display);font-size:var(--font-size-sm);color:var(--color-text-neon-muted)}.wiz-done-line>span{letter-spacing:.08em;text-transform:uppercase;font-size:var(--font-size-xs);font-weight:600;flex-shrink:0}.wiz-done-line strong{color:var(--color-text-white);font-weight:600;text-align:right;word-break:break-word}.wiz-done-demo{width:100%;max-width:400px;aspect-ratio:16/9;border:1px solid var(--color-accent-primary);border-radius:var(--radius-xl);background:var(--color-bg-primary);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 0 30px #ff2d6a4d}.wiz-done-demo-label{font-family:var(--font-display);font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-neon-muted);letter-spacing:.14em;text-transform:uppercase}.wiz-done-demo-year{font-family:var(--font-display);font-weight:900;font-size:64px;line-height:.9;color:var(--color-accent-primary);text-shadow:0 0 24px rgba(255,45,106,.6);letter-spacing:-.03em}.wiz-done-demo-song{font-family:var(--font-display);font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-neon-muted)}.wiz-cta{padding:var(--space-md) var(--space-lg);display:flex;gap:var(--space-sm);border-top:1px solid var(--color-border-neon);background:#0000004d;position:relative;z-index:1}.wiz-cta .btn{flex:1}.wiz-cta .wiz-back{flex:0 0 auto;min-width:80px}.wiz-frame-playlist:not([hidden])~.wiz-cta{display:none}.finish-setup-pill{font-family:var(--font-display);font-weight:600;font-size:var(--font-size-sm);color:var(--color-accent-primary);background:#ff2d6a1a;border:1px solid rgba(255,45,106,.4);border-radius:var(--radius-full);padding:var(--space-xs) var(--space-md);cursor:pointer;transition:var(--transition-fast)}.finish-setup-pill:hover{background:#ff2d6a33;box-shadow:var(--glow-primary)}.finish-setup-pill.hidden{display:none}@media(prefers-reduced-motion:reduce){.wizard-takeover,.wizard-takeover *{animation:none!important;transition:none!important}}.wiz-field{display:flex;flex-direction:column;gap:var(--space-xs)}.wiz-field-label{font-family:var(--font-display);font-weight:600;font-size:var(--font-size-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-neon-muted)}.wiz-chip-group{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.wiz-chip{padding:var(--space-sm) var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-full);font-family:var(--font-display);font-weight:600;font-size:var(--font-size-sm);color:var(--color-text-white);cursor:pointer;transition:var(--transition-fast)}.wiz-chip:hover{background:var(--color-dark-surface-hover)}.wiz-chip.active{background:var(--color-accent-primary);border-color:var(--color-accent-primary);color:var(--color-bg-primary);box-shadow:var(--glow-primary)}.wiz-request-playlist{margin-top:var(--space-md);align-self:flex-start}body.wizard-active .modal{z-index:calc(var(--z-overlay) + 10)}.wiz-difficulty-hint{margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);background:#00f5ff0f;border-left:2px solid var(--color-accent-secondary);border-radius:var(--radius-sm);color:var(--color-text-neon-muted);font-size:var(--font-size-sm);line-height:1.5;min-height:1.5em}.wiz-rounds-custom{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm)}.wiz-rounds-custom input{width:6em;padding:var(--space-sm) var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-sm);color:var(--color-text-white);font-family:var(--font-body);font-size:var(--font-size-base)}.wiz-rounds-custom input:focus{outline:none;border-color:var(--color-accent-primary)}.wiz-rounds-custom span{color:var(--color-text-neon-muted);font-size:var(--font-size-sm)}.wiz-lvl-card{flex-direction:column;align-items:stretch;padding:0}.wiz-lvl-head{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);cursor:pointer;user-select:none}.wiz-lvl-card.unavailable .wiz-lvl-head{cursor:not-allowed}.wiz-lvl-head:hover{background:#ffffff05}.wiz-lvl-card.on .wiz-lvl-head{border-bottom:1px solid var(--color-border-neon)}.wiz-detail{padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-md);background:#00000026}.wiz-detail-checks{display:flex;flex-direction:column;gap:var(--space-xs)}.wiz-detail-check{display:flex;align-items:center;gap:var(--space-sm);padding:6px 8px;border-radius:var(--radius-md);cursor:pointer}.wiz-detail-check:hover{background:#ffffff08}.wiz-detail-check input[type=checkbox]{accent-color:var(--color-accent-primary);width:16px;height:16px;flex-shrink:0}.wiz-detail-check-name{font-family:var(--font-display);font-weight:500;font-size:var(--font-size-sm);color:var(--color-text-white)}.wiz-detail-empty{font-size:var(--font-size-sm);color:var(--color-text-neon-muted);padding:var(--space-sm);background:var(--color-dark-surface);border:1px dashed var(--color-border-neon);border-radius:var(--radius-md);text-align:center}.wiz-detail-input{padding:var(--space-sm) var(--space-md);background:var(--color-bg-primary);border:1px solid var(--color-border-neon);border-radius:var(--radius-md);color:var(--color-text-white);font-family:ui-monospace,monospace;font-size:var(--font-size-sm)}.wiz-detail-input:focus{outline:none;border-color:var(--color-accent-secondary);box-shadow:0 0 0 3px #00f5ff26}.wiz-field-hint{font-size:var(--font-size-xs);color:var(--color-text-dim);line-height:1.4}body.home-mode #media-players,body.home-mode #music-service,body.home-mode #playlists,body.home-mode #game-settings,body.home-mode #party-lights,body.home-mode #tts-settings,body.home-mode .admin-content>.admin-actions{display:none!important}.home-view{display:none}.home-view.hidden{display:none!important}body.home-mode #home-view,body.home-mode .home-view{display:flex;flex-direction:column;min-height:calc(100vh - 120px);background:var(--color-bg-primary);border:1px solid var(--color-border-neon);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:var(--space-md)}.home-stage{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-xl) var(--space-lg);text-align:center}.home-stage-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,45,106,.15),transparent 55%),radial-gradient(ellipse at bottom,rgba(0,245,255,.08),transparent 50%)}.home-eyebrow{position:relative;z-index:1;font-family:var(--font-display);font-weight:700;font-size:var(--font-size-sm);letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-secondary)}.home-headline{position:relative;z-index:1;font-family:var(--font-display);font-weight:900;font-size:var(--font-size-4xl);line-height:.95;letter-spacing:-.02em;margin:0;text-shadow:0 0 40px rgba(255,45,106,.35)}.home-headline-sub{display:block;font-weight:600;font-size:var(--font-size-xl);letter-spacing:.02em;text-shadow:none;color:var(--color-text-white);margin-top:4px}.home-hero-card{position:relative;z-index:1;padding:var(--space-lg);background:var(--color-dark-surface);border:1px solid var(--color-accent-primary);border-radius:var(--radius-2xl);box-shadow:0 0 32px #ff2d6a38;display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);max-width:280px;width:100%}.home-qr-loading{font-family:var(--font-display);font-weight:600;font-size:var(--font-size-sm);color:var(--color-text-neon-muted);padding:var(--space-xl) 0;letter-spacing:.08em;text-transform:uppercase}.home-qr-loading.hidden{display:none}.home-qr-container{padding:8px;background:var(--color-bg-white);border-radius:var(--radius-md);display:grid;place-items:center;min-width:180px;min-height:180px}.home-qr-container:empty{display:none}.home-qr-container img,.home-qr-container canvas{display:block;max-width:180px;height:auto}.home-hero-title{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-lg);color:var(--color-text-white);letter-spacing:-.01em}.home-hero-sub{font-size:var(--font-size-sm);color:var(--color-accent-secondary);font-family:ui-monospace,monospace;word-break:break-all;max-width:260px}.home-players{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:var(--space-sm);justify-items:center;width:100%;max-width:380px;margin-top:var(--space-lg)}.home-players:empty{display:none}.home-player-tile{position:relative;width:100%;aspect-ratio:1;padding:var(--space-sm);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,var(--tile-from),var(--tile-to));border:1.5px solid var(--tile-border);box-shadow:0 0 14px var(--tile-glow);--tile-from: rgba(0, 245, 255, .32);--tile-to: rgba(0, 245, 255, .08);--tile-border: rgba(0, 245, 255, .7);--tile-glow: rgba(0, 245, 255, .35)}.home-player-tile-initial{font-family:var(--font-display);font-weight:900;font-size:28px;line-height:1;color:var(--color-text-white);text-shadow:0 2px 8px rgba(0,0,0,.4)}.home-player-tile-name{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-xs);color:var(--color-text-white);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}.home-player-tile--c2{--tile-from: rgba(57, 255, 20, .32);--tile-to: rgba(57, 255, 20, .08);--tile-border: rgba(57, 255, 20, .65);--tile-glow: rgba(57, 255, 20, .32)}.home-player-tile--c3{--tile-from: rgba(255, 102, 0, .32);--tile-to: rgba(255, 102, 0, .08);--tile-border: rgba(255, 102, 0, .65);--tile-glow: rgba(255, 102, 0, .32)}.home-player-tile--c4{--tile-from: rgba(0, 245, 255, .22);--tile-to: rgba(0, 245, 255, .04);--tile-border: rgba(0, 245, 255, .5);--tile-glow: rgba(0, 245, 255, .22)}.home-player-tile--host{--tile-from: rgba(255, 45, 106, .35);--tile-to: rgba(255, 45, 106, .08);--tile-border: rgba(255, 45, 106, .85);--tile-glow: rgba(255, 45, 106, .5);box-shadow:var(--glow-primary),0 0 22px #ff2d6a59}.home-player-tile-crown{position:absolute;top:-10px;right:-10px;font-size:20px;line-height:1;filter:drop-shadow(0 0 6px rgba(255,45,106,.8));pointer-events:none}.home-players-waiting{grid-column:1 / -1;padding:var(--space-md);border-radius:var(--radius-full);border:1px dashed var(--color-border-neon);background:transparent;color:var(--color-text-dim);font-family:var(--font-display);font-weight:500;font-size:var(--font-size-sm);text-align:center}.home-meta{position:relative;z-index:1;font-family:var(--font-display);font-weight:500;font-size:var(--font-size-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-dim);max-width:320px;line-height:1.6}.home-cta-bar{display:flex;flex-wrap:wrap;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:#0000004d;border-top:1px solid var(--color-border-neon)}.home-cta-edit{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm)}.home-cta-start{flex:1;padding:var(--space-md);font-size:var(--font-size-base);box-shadow:var(--glow-primary),0 0 40px #ff2d6a40}.home-cta-start.btn-ghost{box-shadow:none;flex:0 0 auto}.home-cta-join{width:100%;margin-top:var(--space-md);padding:var(--space-lg) var(--space-md);font-size:var(--font-size-xl);font-weight:700;letter-spacing:.02em;border-radius:var(--radius-xl);box-shadow:var(--glow-primary),0 0 48px #ff2d6a4d;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm)}.home-cta-join svg{width:26px;height:26px;stroke-width:2.25}.home-cta-join.hidden{display:none}.wiz-mode-cards{display:flex;flex-direction:column;gap:var(--space-xs)}.wiz-mode-card{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition-fast)}.wiz-mode-card:hover{background:var(--color-dark-surface-hover)}.wiz-mode-card.disabled{cursor:not-allowed;pointer-events:none}.wiz-mode-card.disabled .wiz-mode-icon,.wiz-mode-card.disabled .wiz-mode-title,.wiz-mode-card.disabled .wiz-lvl-toggle{opacity:.45}.wiz-mode-hint.gated{color:var(--color-warning);font-weight:600}.wiz-mode-card.on{background:#ff2d6a14;border-color:var(--color-accent-primary)}.wiz-mode-icon{font-size:22px;line-height:1;flex-shrink:0;margin-top:2px}.wiz-mode-body{flex:1;min-width:0}.wiz-mode-title{font-family:var(--font-display);font-weight:600;font-size:var(--font-size-base);color:var(--color-text-white)}.wiz-mode-hint{font-size:var(--font-size-xs);color:var(--color-text-neon-muted);margin-top:2px;line-height:1.45}.wiz-mode-card.on .wiz-lvl-toggle{background:var(--color-accent-primary);border-color:var(--color-accent-primary)}.wiz-mode-card.on .wiz-lvl-toggle:after{left:18px;background:var(--color-bg-primary)}.wiz-coremode-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}.wiz-coremode-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:var(--space-md) var(--space-sm);background:var(--color-dark-surface);border:1.5px solid var(--color-border-neon);border-radius:var(--radius-xl);cursor:pointer;overflow:hidden;transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),opacity var(--transition-fast)}.wiz-coremode-card:hover{background:var(--color-dark-surface-hover)}.wiz-coremode-card .wiz-mode-icon{font-size:32px;margin-top:0}.wiz-coremode-card .wiz-mode-body{flex:none}.wiz-coremode-card .wiz-mode-title{font-weight:900;letter-spacing:.02em;text-transform:uppercase}.wiz-coremode-card .wiz-mode-hint{color:var(--color-text-dim)}.wiz-coremode-card.selected{transform:translateY(-2px)}.wiz-coremode-card--pink.selected{border-color:var(--color-accent-primary);background:radial-gradient(120% 100% at 50% 0%,#ff2d6a38,#ff2d6a0a);box-shadow:0 0 24px #ff2d6a4d}.wiz-coremode-card--cyan.selected{border-color:var(--color-accent-secondary);background:radial-gradient(120% 100% at 50% 0%,#00f5ff33,#00f5ff08);box-shadow:0 0 24px #00f5ff47}.wiz-coremode-card.dim{opacity:.5}.wiz-coremode-card.dim:hover{opacity:.8}.wiz-coremode-badge{position:absolute;top:8px;right:8px;font-family:var(--font-display);font-weight:800;font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:var(--radius-full)}.wiz-coremode-card--pink .wiz-coremode-badge{background:var(--color-accent-primary);color:var(--color-text-white)}.wiz-coremode-card--cyan .wiz-coremode-badge{background:var(--color-accent-secondary);color:#04222a}@media(prefers-reduced-motion:reduce){.wiz-coremode-card{transition:none}.wiz-coremode-card.selected{transform:none}}.home-cast-link{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-accent-secondary);border-radius:var(--radius-full);font-family:var(--font-display);font-weight:600;font-size:var(--font-size-sm);color:var(--color-accent-secondary);text-decoration:none;position:relative;z-index:1;transition:var(--transition-fast)}.home-cast-link:hover{background:#00f5ff14;box-shadow:var(--glow-secondary)}.home-cast-link.hidden{display:none}.wiz-detail-test{align-self:flex-start;margin-top:var(--space-xs);padding:var(--space-xs) var(--space-md);font-size:var(--font-size-xs)}.wiz-detail-test[disabled]{opacity:.5;cursor:not-allowed}.wiz-wled-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-xs)}.wiz-wled-row{display:flex;align-items:center;gap:var(--space-xs)}.wiz-wled-phase{font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:.1em;color:var(--color-text-dim);min-width:72px}.wiz-wled-input{width:60px;padding:4px 8px;text-align:center;font-family:ui-monospace,monospace;font-size:var(--font-size-sm)}.home-utility-row{display:flex;gap:var(--space-sm);flex-wrap:wrap;justify-content:center;position:relative;z-index:1}.home-utility-btn{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-full);font-family:var(--font-display);font-weight:600;font-size:var(--font-size-sm);color:var(--color-text-neon-muted);cursor:pointer;transition:var(--transition-fast)}.home-utility-btn:hover{color:var(--color-text-white);border-color:var(--color-accent-secondary)}.home-utility-btn.hidden{display:none}.home-cta-end{border-color:#ff004066;color:var(--color-error-neon)}.home-cta-end:hover{background:#ff00401a;box-shadow:0 0 12px #ff00404d}.home-cta-end.hidden{display:none}.home-hero-card--setup{border-color:var(--color-border-neon);box-shadow:none;gap:var(--space-md)}.home-setup-glyph{width:56px;height:56px;display:grid;place-items:center;color:var(--color-accent-secondary);text-shadow:0 0 12px rgba(0,245,255,.4)}.home-setup-glyph svg{width:100%;height:100%}.home-hero-sub--plain{color:var(--color-text-neon-muted);font-family:var(--font-body);text-align:center;font-size:var(--font-size-sm);line-height:1.5;max-width:280px}.home-cta-setup{flex:1;padding:var(--space-md);font-size:var(--font-size-base);box-shadow:var(--glow-primary),0 0 40px #ff2d6a40}.home-cta-setup.hidden,body.is-learning-screen .player-header,body.is-ingame .player-header{display:none}#tour-view.view:not(.hidden){display:flex;flex-direction:column}.tour-container{min-height:100vh;padding:var(--space-xl) var(--space-md) var(--space-md);background:radial-gradient(circle at 50% 10%,rgba(255,45,106,.1),transparent 55%),radial-gradient(circle at 85% 90%,rgba(0,245,255,.08),transparent 55%),var(--color-bg-primary);display:flex;flex-direction:column}.tour-header-wiz{margin-bottom:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm)}.tour-step-count{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-body);font-size:var(--font-size-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-neon-muted)}.tour-step-count .of{color:var(--color-text-dim);font-weight:500}.tour-skip-link{font-family:var(--font-body);font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-dim);background:transparent;border:0;cursor:pointer;padding:var(--space-xs) var(--space-sm);transition:color var(--transition-fast)}.tour-skip-link:hover,.tour-skip-link:focus-visible{color:var(--color-text-neon-muted);outline:none}.tour-wiz-progress{display:flex;gap:4px;width:100%}.tour-wiz-seg{flex:1;height:3px;background:#ffffff14;border-radius:var(--radius-full);overflow:hidden;position:relative}.tour-wiz-seg.filled{background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));box-shadow:0 0 12px #ff2d6a80}.tour-wiz-seg.active .tour-wiz-seg-inner{height:100%;width:60%;background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));box-shadow:0 0 12px #ff2d6a80;border-radius:var(--radius-full)}.tour-card{flex:1;display:flex;flex-direction:column;align-items:center;padding:var(--space-md) 0;animation:tour-card-enter var(--transition-slow) ease-out}@keyframes tour-card-enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.tour-card.hidden{display:none}@media(prefers-reduced-motion:reduce){.tour-card{animation:none}}.tour-title{font-family:var(--font-display);font-weight:900;font-size:2.5rem;line-height:1;text-align:center;color:var(--color-text-white);letter-spacing:-.02em;margin-bottom:var(--space-sm)}.tour-caption{font-family:var(--font-body);font-weight:500;font-size:var(--font-size-lg);text-align:center;color:var(--color-text-neon-muted);margin-bottom:var(--space-xl);max-width:320px}.tour-preview{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-md)}.tour-preview-album{width:88px;height:88px;border-radius:var(--radius-lg);background:linear-gradient(135deg,#2a1b4a,#1a1a24);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.tour-preview-album:after{content:"";position:absolute;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,#0a0a12 28%,#2a2a3a 29% 62%,#0a0a12 63%);border:1px solid rgba(255,255,255,.08)}.tour-preview-album:before{content:"\266a";position:absolute;font-size:26px;color:var(--color-accent-secondary);opacity:.75;z-index:1}.tour-year-display{display:flex;align-items:center;justify-content:center;gap:var(--space-md)}.tour-year-adjust{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);background:transparent;color:#fff9;font-size:var(--font-size-xl);font-weight:400;display:flex;align-items:center;justify-content:center}.tour-year-big{font-family:var(--font-display);font-weight:900;font-size:4.25rem;color:var(--color-accent-secondary);text-shadow:0 0 24px rgba(0,245,255,.6);line-height:1;letter-spacing:-.03em}.tour-preview-slider{width:100%;max-width:320px;display:flex;align-items:center;gap:var(--space-sm)}.tour-slider-label{font-family:var(--font-body);font-size:var(--font-size-sm);color:#ffffff80;min-width:34px;text-align:center}.tour-slider-track{flex:1;height:4px;background:#ffffff26;border-radius:2px;position:relative}.tour-slider-thumb{position:absolute;top:50%;left:45.3%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:var(--color-accent-secondary);box-shadow:0 0 16px #00f5ffcc;border:2px solid var(--color-bg-primary)}.tour-bet-button{background:linear-gradient(135deg,#ff2d6a1f,#ff2d6a0f);border:2px solid var(--color-accent-primary);border-radius:var(--radius-xl);padding:var(--space-md) var(--space-lg);display:flex;align-items:center;gap:var(--space-sm);box-shadow:0 0 24px #ff2d6a59}.tour-bet-button .tour-bet-dice{font-size:30px;filter:drop-shadow(0 0 6px rgba(255,45,106,.6))}.tour-bet-button .tour-bet-label{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-lg);color:var(--color-text-white)}.tour-bet-score{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg-surface);border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.06)}.tour-bet-score-base{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-2xl);color:var(--color-text-neon-muted)}.tour-bet-score-op{color:var(--color-text-dim);font-size:var(--font-size-lg)}.tour-bet-score-multi{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-2xl);color:var(--color-accent-primary)}.tour-bet-score-final{font-family:var(--font-display);font-weight:900;font-size:var(--font-size-4xl);color:var(--color-success-neon);text-shadow:0 0 12px rgba(57,255,20,.5)}.tour-steal-button{background:linear-gradient(135deg,#00f5ff1f,#00f5ff0a);border:2px solid var(--color-accent-secondary);border-radius:var(--radius-xl);padding:var(--space-md) var(--space-lg);display:flex;align-items:center;gap:var(--space-sm);box-shadow:0 0 24px #00f5ff66}.tour-steal-button .tour-steal-ninja{font-size:30px}.tour-steal-button .tour-steal-label{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-lg);color:var(--color-text-white)}.tour-steal-targets{display:flex;gap:var(--space-sm);align-items:center}.tour-steal-target{background:var(--color-bg-surface);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);font-family:var(--font-body);font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-neon-muted);border:1px solid rgba(255,255,255,.06)}.tour-steal-target.highlighted{color:var(--color-text-white);border-color:var(--color-accent-secondary);box-shadow:0 0 12px #00f5ff59}.tour-hint{font-family:var(--font-body);font-size:var(--font-size-sm);color:#fff6;text-align:center;font-style:italic;margin-top:var(--space-xs)}.tour-ta-fields{display:flex;flex-direction:column;gap:var(--space-sm);width:100%}.tour-ta-field{display:flex;flex-direction:column;gap:4px;padding:10px 14px;background:linear-gradient(180deg,#ff2d6a0f,#ffffff05);border:1px solid rgba(255,45,106,.22);border-radius:var(--radius-lg);text-align:left}.tour-ta-field-label{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-neon-muted)}.tour-ta-field-val{font-family:var(--font-body);font-weight:600;font-size:var(--font-size-md);color:var(--color-text-white)}.tour-artist-prompt{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg-surface);border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.06);width:100%;max-width:320px}.tour-artist-prompt .tour-artist-mic{font-size:var(--font-size-xl)}.tour-artist-prompt .tour-artist-who{font-family:var(--font-body);font-size:var(--font-size-base);font-weight:500;color:var(--color-text-white)}.tour-artist-prompt .tour-artist-bonus{margin-left:auto;background:#22c55e26;color:var(--color-success);font-weight:700;font-size:var(--font-size-sm);padding:2px var(--space-sm);border-radius:var(--radius-full)}.tour-artist-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);width:100%;max-width:320px}.tour-artist-option{min-height:48px;padding:var(--space-sm) var(--space-md);border:2px solid rgba(255,255,255,.12);border-radius:var(--radius-md);background:var(--color-bg-surface);color:var(--color-text-white);font-family:var(--font-body);font-size:var(--font-size-base);font-weight:500;display:flex;align-items:center;justify-content:center;cursor:default}.tour-artist-option.is-winner{background:var(--color-success);border-color:var(--color-success);color:var(--color-text-white);box-shadow:var(--glow-primary)}.tour-footer{margin-top:auto;padding-top:var(--space-md);display:flex;gap:var(--space-sm);align-items:stretch}.btn-tour-skip{flex:1;background:transparent;color:var(--color-text-neon-muted);border:1.5px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-md);font-family:var(--font-body);font-weight:600;font-size:var(--font-size-md);cursor:pointer}.btn-tour-skip:hover,.btn-tour-skip:focus-visible{border-color:#ffffff4d;color:var(--color-text-white);outline:none}.btn-tour-next{flex:2;background:var(--color-accent-primary);color:var(--color-text-white);border:none;border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg);font-family:var(--font-display);font-weight:700;font-size:var(--font-size-lg);box-shadow:var(--glow-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.btn-tour-next .chev{opacity:.85}#ready-view.view:not(.hidden){display:flex;flex-direction:column}.ready-container{min-height:100vh;padding:var(--space-xl);background:radial-gradient(circle at 50% 30%,rgba(255,45,106,.1),transparent 55%),radial-gradient(circle at 85% 80%,rgba(0,245,255,.08),transparent 55%),var(--color-bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--space-sm)}.ready-wordmark{font-family:var(--font-display);font-weight:900;font-size:5rem;letter-spacing:-.02em;margin-bottom:var(--space-sm);text-shadow:0 0 48px rgba(255,45,106,.55);animation:ready-wordmark-in .5s ease-out}.ready-wordmark .beat{color:var(--color-text-white)}.ready-wordmark .ify{background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}@keyframes ready-wordmark-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.ready-name{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-3xl);color:var(--color-text-white);margin-bottom:var(--space-xs);animation:ready-fade-in .5s ease-out .1s both}.ready-subtitle{font-family:var(--font-body);font-size:var(--font-size-md);color:var(--color-text-neon-muted);margin-bottom:var(--space-2xl);animation:ready-fade-in .5s ease-out .2s both}@keyframes ready-fade-in{0%{opacity:0}to{opacity:1}}.ready-waiting{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);animation:ready-fade-in .5s ease-out .3s both}.ready-pulse{position:relative;width:16px;height:16px;border-radius:50%;background:var(--color-accent-secondary);box-shadow:0 0 12px #00f5ffb3}.ready-pulse:before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--color-accent-secondary);opacity:.6;animation:ready-pulse-ring 1.8s ease-out infinite}@keyframes ready-pulse-ring{0%{transform:scale(.6);opacity:.8}to{transform:scale(2.4);opacity:0}}@media(prefers-reduced-motion:reduce){.ready-wordmark,.ready-name,.ready-subtitle,.ready-waiting{animation:none}.ready-pulse:before{animation:none;opacity:0}}.ready-label{font-family:var(--font-body);font-size:var(--font-size-md);font-weight:500;color:var(--color-text-white)}.ready-count{font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--color-text-dim)}.replay-tour-link{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:transparent;border:1px dashed rgba(255,45,106,.4);border-radius:var(--radius-md);color:var(--color-accent-primary);font-family:var(--font-body);font-size:var(--font-size-sm);font-weight:600;text-decoration:none;margin-bottom:var(--space-sm);cursor:pointer;width:100%;transition:all var(--transition-fast)}.replay-tour-link:hover,.replay-tour-link:focus-visible{border-color:var(--color-accent-primary);background:#ff2d6a0d;outline:none}.replay-tour-link .arrow{margin-left:auto}.home-player-tile--learning{border-style:dashed!important;opacity:.72}.home-player-tile-tour{position:absolute;top:-6px;right:-6px;background:#00f5ff1a;color:var(--color-accent-secondary);font-family:var(--font-body);font-size:9px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:var(--radius-full);border:1px solid rgba(0,245,255,.4);box-shadow:0 0 8px #00f5ff40}.home-learning-warning{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-sm);background:#ff660014;border:1px solid rgba(255,102,0,.25);border-radius:var(--radius-md);color:var(--color-warning-alt);font-family:var(--font-body);font-size:var(--font-size-sm);font-weight:500;text-align:center}.home-learning-warning.hidden{display:none}.player-tiles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:var(--space-sm);justify-items:center;width:100%}.player-tiles-grid:empty{display:none}.player-tile{position:relative;width:100%;aspect-ratio:1;padding:var(--space-sm);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,var(--tile-from),var(--tile-to));border:1.5px solid var(--tile-border);box-shadow:0 0 14px var(--tile-glow);--tile-from: rgba(0, 245, 255, .32);--tile-to: rgba(0, 245, 255, .08);--tile-border: rgba(0, 245, 255, .7);--tile-glow: rgba(0, 245, 255, .35);transition:box-shadow var(--transition-fast),border-color var(--transition-fast)}.player-tile-initial{font-family:var(--font-display);font-weight:900;font-size:var(--font-size-3xl);line-height:1;color:var(--color-text-white);text-shadow:0 2px 8px rgba(0,0,0,.4)}.player-tile-name{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-xs);color:var(--color-text-white);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}.player-tile--c2{--tile-from: rgba(57, 255, 20, .32);--tile-to: rgba(57, 255, 20, .08);--tile-border: rgba(57, 255, 20, .65);--tile-glow: rgba(57, 255, 20, .32)}.player-tile--c3{--tile-from: rgba(255, 102, 0, .32);--tile-to: rgba(255, 102, 0, .08);--tile-border: rgba(255, 102, 0, .65);--tile-glow: rgba(255, 102, 0, .32)}.player-tile--c4{--tile-from: rgba(0, 245, 255, .22);--tile-to: rgba(0, 245, 255, .04);--tile-border: rgba(0, 245, 255, .5);--tile-glow: rgba(0, 245, 255, .22)}.player-tile--host{--tile-from: rgba(255, 45, 106, .35);--tile-to: rgba(255, 45, 106, .08);--tile-border: rgba(255, 45, 106, .85);--tile-glow: rgba(255, 45, 106, .5);box-shadow:var(--glow-primary),0 0 22px #ff2d6a59}.player-tile-crown{position:absolute;top:-10px;right:-10px;font-size:20px;line-height:1;filter:drop-shadow(0 0 6px rgba(255,45,106,.8));pointer-events:none}.player-tile-you-chip{position:absolute;top:-10px;right:-10px;background:var(--color-accent-secondary);color:var(--color-bg-primary);font-family:var(--font-display);font-weight:900;font-size:9px;letter-spacing:.1em;padding:3px 7px;border-radius:var(--radius-full);box-shadow:0 0 12px #00f5ff99;pointer-events:none}.player-tile-away{position:absolute;bottom:-8px;left:50%;transform:translate(-50%);font-family:var(--font-body);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-dim);background:var(--color-bg-primary);padding:2px 6px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.12);pointer-events:none}.player-tile--disconnected{opacity:.5;filter:grayscale(.4)}.player-tile.is-new{animation:player-tile-pop var(--transition-slow) ease-out}@keyframes player-tile-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}to{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.player-tile.is-new{animation:none}}.reveal-header-v2{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md);gap:var(--space-sm)}.reveal-header-v2 .round-count{font-family:var(--font-body);font-size:var(--font-size-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-neon-muted);display:flex;align-items:center;gap:4px}.reveal-header-v2 .header-right{display:flex;align-items:center;gap:var(--space-sm)}.reveal-advance-pill{position:relative;width:32px;height:32px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.reveal-advance-pill.hidden{display:none}.reveal-advance-svg{width:100%;height:100%;transform:rotate(-90deg)}.reveal-advance-bg{fill:none;stroke:#ffffff1f;stroke-width:5}.reveal-advance-fg{fill:none;stroke:var(--color-accent-secondary);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .5s linear;filter:drop-shadow(var(--glow-secondary))}.reveal-advance-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:13px;color:var(--color-accent-secondary)}.info-btn{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:var(--color-bg-surface);color:var(--color-text-neon-muted);font-size:var(--font-size-base);font-weight:700;font-family:var(--font-display);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color var(--transition-fast),border-color var(--transition-fast);padding:0}.info-btn:hover,.info-btn:focus-visible{color:var(--color-text-white);border-color:#ffffff4d;outline:none}.song-strip{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-sm) var(--space-sm) var(--space-sm);background:#ffffff0a;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.08);margin-bottom:var(--space-md)}.song-strip-cover{width:56px;height:56px;border-radius:var(--radius-md);object-fit:cover;flex-shrink:0;background:linear-gradient(135deg,#ff6b9a,#6366f1)}.song-strip-info{flex:1;min-width:0}.song-strip-title{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-md);color:var(--color-text-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-strip-artist{font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--color-text-neon-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip-row{display:flex;gap:var(--space-xs);margin-bottom:var(--space-sm);flex-wrap:wrap}.chip-row.hidden{display:none}.chip-row .chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-xs);font-weight:700;letter-spacing:.04em}.chip-row .chip--bet-won{background:#ff2d6a1f;border:1px solid rgba(255,45,106,.5);color:var(--color-accent-primary);box-shadow:0 0 12px #ff2d6a33}.chip-row .chip--bet-lost{background:#ff004014;border:1px solid rgba(255,0,64,.4);color:var(--color-error-neon)}.chip-row .chip--streak{background:#ff66001f;border:1px solid rgba(255,102,0,.5);color:var(--color-warning-alt)}.duel{padding:var(--space-lg) var(--space-xs) var(--space-md);margin-bottom:var(--space-sm)}.duel-emotion{text-align:center;font-family:var(--font-display);font-weight:900;font-size:var(--font-size-2xl);letter-spacing:.06em;margin-bottom:var(--space-md);min-height:1.2em;transition:color var(--transition-normal)}.duel-emotion.hidden{visibility:hidden}.duel-emotion--exact{color:var(--color-success-neon);text-shadow:0 0 16px rgba(57,255,20,.55)}.duel-emotion--close{color:var(--color-success-neon);text-shadow:0 0 14px rgba(57,255,20,.45)}.duel-emotion--wrong{color:var(--color-error-neon);text-shadow:0 0 14px rgba(255,0,64,.45)}.duel-emotion--missed{color:var(--color-text-dim);text-shadow:none}.duel-row{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-sm);align-items:center}.duel-side{text-align:center;min-width:0}.duel-label{font-family:var(--font-body);font-size:var(--font-size-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-dim);font-weight:600;margin-bottom:var(--space-sm)}.duel-year{font-family:var(--font-display);font-weight:900;font-size:clamp(40px,12vw,64px);line-height:1;letter-spacing:-.03em}.duel-year.mine{color:var(--color-text-neon-muted)}.duel-year.correct{color:var(--color-accent-secondary);text-shadow:0 0 24px rgba(0,245,255,.6)}.duel-gap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:48px}.duel-gap-x{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-xl);color:var(--color-text-dim);opacity:.6;line-height:1}.duel-gap-n{font-family:var(--font-display);font-weight:900;font-size:var(--font-size-2xl);color:var(--color-error-neon);text-shadow:0 0 10px rgba(255,0,64,.35);line-height:1}.duel-gap--exact .duel-gap-n{color:var(--color-success-neon);text-shadow:0 0 10px rgba(57,255,20,.5)}.duel-gap--close .duel-gap-n{color:var(--color-success-neon);text-shadow:0 0 8px rgba(57,255,20,.35)}.duel-gap-unit{font-family:var(--font-body);font-size:9px;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.1em;margin-top:3px}.score-row{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--color-bg-surface);border-radius:var(--radius-lg);border:1px solid rgba(0,245,255,.25);box-shadow:0 0 14px #00f5ff1f;margin-bottom:var(--space-md);gap:var(--space-sm)}.score-row-left{font-family:var(--font-body);font-size:var(--font-size-xs);color:var(--color-text-neon-muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em;display:flex;flex-direction:column;gap:3px;min-width:0}.score-row-subtitle{color:var(--color-text-white);font-size:var(--font-size-sm);font-weight:700;letter-spacing:0;text-transform:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-row-right{display:flex;align-items:center;gap:var(--space-sm);flex-shrink:0}.score-row-pts{font-family:var(--font-display);font-weight:900;font-size:38px;color:var(--color-accent-secondary);text-shadow:0 0 18px rgba(0,245,255,.5);line-height:1}.standings-section .leaderboard-list{display:flex;flex-direction:column;gap:6px}.sheet-backdrop{position:fixed;inset:0;z-index:400;display:flex;align-items:flex-end;justify-content:center}.sheet-backdrop.hidden{display:none}.sheet-dim{position:absolute;inset:0;background:#0a0a1299;backdrop-filter:blur(2px);animation:sheet-dim-in .2s ease-out}@keyframes sheet-dim-in{0%{opacity:0}to{opacity:1}}.sheet{position:relative;z-index:1;width:100%;max-width:520px;background:linear-gradient(180deg,#14141e,#0a0a12);border-top:1px solid rgba(0,245,255,.25);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;box-shadow:0 -12px 40px #00000080,0 -4px 16px #00f5ff1a;padding:14px 20px calc(28px + env(safe-area-inset-bottom,0));max-height:80vh;overflow-y:auto;animation:sheet-slide-up .32s cubic-bezier(.22,.8,.32,1)}@keyframes sheet-slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.sheet-dim,.sheet{animation:none}}.sheet-handle{width:40px;height:4px;border-radius:2px;background:#fff3;margin:0 auto 16px}.sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.sheet-title{font-family:var(--font-display);font-weight:800;font-size:var(--font-size-lg);display:flex;align-items:center;gap:8px;color:var(--color-text-white)}.sheet-close{width:32px;height:32px;border-radius:50%;background:#ffffff14;border:0;color:var(--color-text-neon-muted);font-size:var(--font-size-base);font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer}.sheet-close:hover,.sheet-close:focus-visible{color:var(--color-text-white);background:#ffffff24;outline:none}.breakdown-list{display:flex;flex-direction:column;margin-bottom:var(--space-md)}.breakdown-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-family:var(--font-body);font-size:var(--font-size-base)}.breakdown-row+.breakdown-row{border-top:1px solid rgba(255,255,255,.05)}.breakdown-row .label{color:var(--color-text-neon-muted);display:flex;align-items:center;gap:8px}.breakdown-row .label .emoji{font-size:var(--font-size-md)}.breakdown-row .value{font-family:var(--font-display);font-weight:800;font-size:var(--font-size-md)}.breakdown-row .value--positive{color:var(--color-success-neon)}.breakdown-row .value--multiplier{color:var(--color-accent-primary)}.breakdown-row .value--neutral{color:var(--color-text-white)}.breakdown-total{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);border-radius:var(--radius-lg);background:linear-gradient(90deg,#00f5ff14,#ff2d6a0d);border:1px solid rgba(0,245,255,.3)}.breakdown-total .label{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-md);color:var(--color-text-white)}.breakdown-total .value{font-family:var(--font-display);font-weight:900;font-size:var(--font-size-3xl);color:var(--color-accent-secondary);text-shadow:0 0 16px rgba(0,245,255,.5)}.breakdown-total--zero .value{color:var(--color-text-dim);text-shadow:none}.breakdown-empty{text-align:center;padding:var(--space-md) 0}.breakdown-empty-icon{font-size:42px;margin-bottom:var(--space-sm)}.breakdown-empty-text{color:var(--color-text-neon-muted);font-family:var(--font-body);font-size:var(--font-size-base);margin-bottom:var(--space-md)}.difficulty-visual{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);background:#ff004014;border:1px solid rgba(255,0,64,.3);border-radius:var(--radius-md);margin-bottom:var(--space-sm);gap:var(--space-sm)}.difficulty-visual .left{font-family:var(--font-display);font-weight:800;font-size:var(--font-size-sm);color:var(--color-error-neon);min-width:0}.difficulty-visual .left .sub{font-family:var(--font-body);font-size:var(--font-size-xs);font-weight:500;color:var(--color-text-neon-muted);margin-top:3px}.difficulty-visual .stars{font-size:var(--font-size-md);letter-spacing:2px;white-space:nowrap}.difficulty-visual .star-filled{color:var(--color-warning-alt)}.difficulty-visual .star-empty{color:#ffffff26}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-bottom:var(--space-sm)}.stats-card{padding:12px 14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md)}.stats-card .lbl{font-family:var(--font-body);font-size:10px;color:var(--color-text-dim);font-weight:700;letter-spacing:.08em;text-transform:uppercase}.stats-card .val{font-family:var(--font-display);font-weight:800;font-size:var(--font-size-2xl);margin-top:4px;color:var(--color-text-white)}.stats-card .val.cyan{color:var(--color-accent-secondary)}.stats-card .val.success{color:var(--color-success-neon)}.stats-card .val.warn{color:var(--color-error-neon)}.stats-card .sub{font-family:var(--font-body);font-size:10px;color:var(--color-text-neon-muted);margin-top:2px}.furthest-list{display:flex;flex-direction:column;gap:6px}.furthest-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#ffffff08;border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--font-size-sm)}.furthest-row .name{font-weight:600;color:var(--color-text-white)}.furthest-row .off{color:var(--color-error-neon);font-family:var(--font-display);font-weight:700}.stats-empty{text-align:center;color:var(--color-text-dim);font-family:var(--font-body);font-size:var(--font-size-sm);padding:var(--space-md)}.game-container--arcade{padding:0;display:flex;flex-direction:column;gap:0}.arc-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);position:sticky;top:0;z-index:5;background:linear-gradient(180deg,rgba(10,10,18,.95),rgba(10,10,18,.82) 72%,transparent);backdrop-filter:blur(8px);margin-bottom:var(--space-md)}.timer-float{position:fixed;top:max(env(safe-area-inset-top,0px) + 8px,8px);right:12px;z-index:100;width:52px;height:52px;border-radius:50%;background:#0a0a12c7;border:2px solid var(--color-accent-primary);box-shadow:0 0 14px #ff2d6a73,inset 0 0 8px #ff2d6a40;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:22px;line-height:1;color:var(--color-accent-primary);text-shadow:0 0 8px rgba(255,45,106,.6);backdrop-filter:blur(8px);transition:opacity .2s ease-out,transform .2s ease-out;pointer-events:none}.timer-float.hidden{opacity:0;transform:scale(.7);pointer-events:none}.timer-float.timer-float--visible{opacity:1;transform:scale(1)}.timer-float.timer-float--warn{border-color:var(--color-error-neon, #ff0040);color:var(--color-error-neon, #ff0040);box-shadow:0 0 16px #ff004099,inset 0 0 8px #ff00404d;animation:arc-urgency .8s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.timer-float{transition:none}.timer-float.timer-float--warn{animation:none}}.arc-pulse-orb{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(135deg,#ff6b9a,#6366f1);box-shadow:0 0 24px #ff2d6a80;flex-shrink:0}.arc-pulse-orb:before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(255,45,106,.5);animation:arc-orb-pulse 1.4s ease-out infinite;pointer-events:none}.arc-pulse-orb--steady:before{animation:none;opacity:0}@keyframes arc-orb-pulse{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.25)}}@media(prefers-reduced-motion:reduce){.arc-pulse-orb:before{animation:none;opacity:0}}.arc-pulse-orb-img{width:100%;height:100%;object-fit:cover;border-radius:50%;z-index:1;filter:blur(12px);transform:scale(1.15);transition:filter .4s ease,transform .4s ease}.arc-round-center{text-align:center;font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-neon-muted);line-height:1.3;overflow:hidden}.arc-round-label{display:block}.arc-round-big{display:block;font-size:20px;color:var(--color-text-white);letter-spacing:0;text-transform:none;margin-top:2px}.arc-round-sep{color:var(--color-text-dim);margin:0 2px;font-weight:500}.timer-neon{width:72px;height:72px;border-radius:50%;background:var(--color-bg-primary);border:3px solid var(--color-accent-primary);box-shadow:var(--glow-primary),inset 0 0 12px #ff2d6a4d;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:30px;color:var(--color-accent-primary);text-shadow:0 0 10px rgba(255,45,106,.6);flex-shrink:0;line-height:1}.timer-neon .timer{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit}.timer-neon.timer-neon--warn{border-color:var(--color-error-neon);color:var(--color-error-neon);box-shadow:0 0 20px #ff004099,inset 0 0 12px #ff00404d;animation:arc-urgency .8s ease-in-out infinite}@keyframes arc-urgency{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.timer-neon.timer-neon--catchup{animation:timer-catchup-glow .4s ease-out}@keyframes timer-catchup-glow{0%{box-shadow:var(--glow-primary),inset 0 0 12px #ff2d6a4d}45%{box-shadow:0 0 26px #00f5ffb3,inset 0 0 16px #00f5ff59}to{box-shadow:var(--glow-primary),inset 0 0 12px #ff2d6a4d}}@media(prefers-reduced-motion:reduce){.timer-neon.timer-neon--warn,.timer-neon.timer-neon--catchup{animation:none}}.arc-chip-row{display:flex;gap:6px;flex-wrap:wrap;padding:0 var(--space-md);margin-bottom:var(--space-md)}.arc-chip-row.hidden{display:none}.arc-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--radius-full);font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.04em}.arc-chip--steal{color:var(--color-accent-secondary);background:#00f5ff14;border:1px solid rgba(0,245,255,.4)}.arc-chip--closest-wins{color:var(--color-success-neon);background:#39ff1414;border:1px solid rgba(57,255,20,.4)}.arc-chip--intro{color:var(--color-warning-alt);background:#ff66001f;border:1px solid rgba(255,102,0,.5)}.arc-chip--final{color:var(--color-accent-primary);background:#ff2d6a1f;border:1px solid rgba(255,45,106,.5);text-transform:uppercase}.year-xxl{text-align:center;font-family:var(--font-display);font-weight:900;font-size:clamp(96px,34vw,128px);line-height:1;letter-spacing:-.04em;background:linear-gradient(180deg,var(--color-text-white) 0%,rgba(0,245,255,.85) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 32px rgba(0,245,255,.35);margin:4px 0 var(--space-md);padding:0 var(--space-md);max-width:100%}.year-xxl--locked{background:linear-gradient(180deg,var(--color-success-neon) 0%,rgba(57,255,20,.7) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 28px rgba(57,255,20,.45)}.submitted-banner{margin:0 var(--space-md) var(--space-sm);padding:8px 14px;background:#39ff1414;border:1px solid rgba(57,255,20,.4);border-radius:var(--radius-md);font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--color-success-neon);letter-spacing:.04em;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center}.submitted-banner.hidden{display:none}.submitted-banner .check{width:18px;height:18px;border-radius:50%;background:var(--color-success-neon);color:var(--color-bg-primary);font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}.slider-arcade-wrap{padding:0 var(--space-md);margin-bottom:var(--space-md);position:relative}.slider-arcade{padding:10px;background:#ffffff0a;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:12px}.slider-btn-year{width:44px;height:44px;border-radius:50%;background:var(--color-bg-primary);border:2px solid rgba(255,255,255,.15);color:var(--color-text-white);font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);touch-action:manipulation}.slider-btn-year:hover,.slider-btn-year:focus-visible{border-color:var(--color-accent-secondary);color:var(--color-accent-secondary);outline:none}.slider-btn-year:disabled{opacity:.4;cursor:not-allowed}.slider-btn-year--coarse{position:relative;width:36px;height:36px;font-size:13px;font-weight:800;letter-spacing:-.02em}.slider-btn-year--coarse:after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}.slider-arcade{gap:8px}.slider-arcade-track{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:4px}.year-scale{position:relative;height:13px;margin:0 2px;pointer-events:none}.year-scale span{position:absolute;top:0;transform:translate(-50%);font-size:10px;font-weight:600;letter-spacing:.02em;color:var(--color-text-muted, rgba(255, 255, 255, .42));font-variant-numeric:tabular-nums;white-space:nowrap;user-select:none}.slider-arcade.slider-arcade--locked .year-scale{opacity:.5}.year-slider-arcade{-webkit-appearance:none;appearance:none;width:100%;height:10px;background:linear-gradient(90deg,#00f5ff26,#ff2d6a40,#39ff1426);border-radius:var(--radius-full);outline:none;cursor:pointer}.year-slider-arcade::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:32px;height:32px;border-radius:50%;background:var(--color-accent-primary);border:3px solid var(--color-bg-primary);box-shadow:var(--glow-primary);cursor:grab;transition:transform var(--transition-fast)}.year-slider-arcade::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.05)}.year-slider-arcade::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:var(--color-accent-primary);border:3px solid var(--color-bg-primary);box-shadow:var(--glow-primary);cursor:grab}.slider-arcade.slider-arcade--locked{opacity:.55;pointer-events:none}.slider-arcade.slider-arcade--locked .year-slider-arcade::-webkit-slider-thumb{background:var(--color-success-neon);box-shadow:0 0 16px #39ff1499}.slider-arcade.slider-arcade--locked .year-slider-arcade::-moz-range-thumb{background:var(--color-success-neon);box-shadow:0 0 16px #39ff1499}.guess-lock-stamp{position:absolute;right:calc(var(--space-md) + 8px);top:-10px;padding:3px 10px;font-family:var(--font-display);font-weight:900;font-size:10px;color:var(--color-success-neon);background:var(--color-bg-primary);border:1px solid rgba(57,255,20,.4);border-radius:var(--radius-full);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 0 8px #39ff1440}.guess-lock-stamp.hidden{display:none}.arc-tiles{padding:12px 14px;margin:0 var(--space-md) var(--space-md);background:linear-gradient(180deg,#00f5ff0a,#ffffff05);border:1px solid rgba(0,245,255,.18);border-radius:var(--radius-lg);box-shadow:inset 0 0 12px #00f5ff0a}.arc-tiles.hidden{display:none}.arc-tiles-header{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-neon-muted);margin-bottom:10px;gap:var(--space-sm)}.arc-tiles-header>span:first-child{display:flex;align-items:center;gap:6px;min-width:0}.arc-tiles-bonus{background:#39ff1426;color:var(--color-success-neon);font-weight:900;font-size:11px;padding:2px 8px;border-radius:var(--radius-full);letter-spacing:.04em;flex-shrink:0}.arc-tiles-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.arc-tiles-grid .artist-option-btn,.arc-tiles-grid .movie-option-btn{padding:14px 10px;background:#ffffff0d;border:2px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);font-family:var(--font-display);font-weight:700;font-size:15px;text-align:center;color:var(--color-text-white);box-shadow:0 4px #0000004d;transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast);cursor:pointer;min-height:56px}.arc-tiles-grid .artist-option-btn:hover,.arc-tiles-grid .movie-option-btn:hover,.arc-tiles-grid .artist-option-btn:focus-visible,.arc-tiles-grid .movie-option-btn:focus-visible{border-color:#00f5ff8c;outline:none}.arc-tiles-grid .artist-option-btn:active,.arc-tiles-grid .movie-option-btn:active{transform:translateY(1px);box-shadow:0 2px #0000004d}.arc-tiles-grid .artist-option-btn.is-loading{background:linear-gradient(135deg,#00f5ff33,#00f5ff0d);border-color:var(--color-accent-secondary);color:var(--color-accent-secondary);animation:arc-tile-pulse 1s ease-in-out infinite}@keyframes arc-tile-pulse{0%,to{opacity:1}50%{opacity:.7}}.arc-tiles-grid .artist-option-btn.is-winner,.arc-tiles-grid .artist-option-btn.is-correct,.arc-tiles-grid .movie-option-btn.is-winner,.arc-tiles-grid .movie-option-btn.is-correct{background:linear-gradient(135deg,#39ff1440,#39ff1414);border-color:var(--color-success-neon);color:var(--color-success-neon);box-shadow:0 0 20px #39ff1480,0 4px #0000004d}.arc-tiles-grid .artist-option-btn.is-wrong,.arc-tiles-grid .artist-option-btn.is-wrong.is-selected,.arc-tiles-grid .movie-option-btn.is-wrong{opacity:.5;border-style:dashed}.arc-tiles-grid .artist-option-btn.is-disabled,.arc-tiles-grid .movie-option-btn.is-disabled{opacity:.6;cursor:not-allowed;box-shadow:none}@media(prefers-reduced-motion:reduce){.arc-tiles-grid .artist-option-btn.is-loading{animation:none}}.bonus-filler{padding:var(--space-md);margin:0 var(--space-md) var(--space-md);background:#ffffff05;border:1px dashed rgba(255,255,255,.1);border-radius:var(--radius-lg);text-align:center;font-family:var(--font-body);font-size:12px;color:var(--color-text-dim);font-style:italic;display:flex;align-items:center;justify-content:center;gap:6px}.bonus-filler.hidden{display:none}.arc-actions{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:0 var(--space-md);margin-bottom:var(--space-md)}.bet-arc{width:72px;height:60px;background:transparent;border:2px solid rgba(255,45,106,.5);color:var(--color-accent-primary);border-radius:var(--radius-lg);font-family:var(--font-display);font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 4px #0000004d;cursor:pointer;transition:all var(--transition-fast)}.bet-arc .bet-icon{font-size:22px;line-height:1}.bet-arc .bet-label{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.bet-arc.is-active{background:#ff2d6a26;box-shadow:var(--glow-primary),0 4px #0000004d}.bet-arc:active{transform:translateY(2px);box-shadow:0 2px #0000004d}.bet-arc:disabled{opacity:.55;cursor:not-allowed}.submit-arc{background:linear-gradient(180deg,#ff4d82,var(--color-accent-primary));border:0;color:var(--color-text-white);border-radius:var(--radius-lg);padding:16px 20px;font-family:var(--font-display);font-weight:900;font-size:17px;letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--glow-primary),0 6px #b4143c99;cursor:pointer;transition:transform var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:8px}.submit-arc:active{transform:translateY(2px);box-shadow:var(--glow-primary),0 4px #b4143c99}.submit-arc:disabled{background:#ffffff0f;color:var(--color-text-neon-muted);box-shadow:0 4px #0000004d;cursor:not-allowed;text-shadow:none}.submit-arc.submit-arc--waiting{background:#ffffff0d;color:var(--color-text-neon-muted);box-shadow:0 4px #0000004d;text-shadow:none}.submit-arc .waiting-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-accent-secondary);box-shadow:0 0 8px #00f5ff80;animation:arc-wait-pulse 1.2s ease-in-out infinite}@keyframes arc-wait-pulse{0%,to{opacity:.4}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.submit-arc .waiting-dot{animation:none}}.steal-btn-full{margin:0 var(--space-md) var(--space-md);background:#00f5ff14;border:2px solid var(--color-accent-secondary);color:var(--color-accent-secondary);border-radius:var(--radius-lg);padding:14px;font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 16px #00f5ff4d,0 4px #0000004d;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform var(--transition-fast)}.steal-btn-full.hidden{display:none}.steal-btn-full:active{transform:translateY(2px);box-shadow:0 0 16px #00f5ff4d,0 2px #0000004d}.steal-btn-full .steal-btn-icon{font-size:18px}.powerup-btn-row{display:flex;gap:var(--space-md);margin:0 var(--space-md) var(--space-md)}.powerup-btn-row .steal-btn-full,.powerup-btn-row .sabotage-btn-full{flex:1;margin:0}.sabotage-btn-full{background:#ff2d5514;border:2px solid var(--color-danger, #ff2d55);color:var(--color-danger, #ff2d55);border-radius:var(--radius-lg);padding:14px;font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 16px #ff2d554d,0 4px #0000004d;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform var(--transition-fast)}.sabotage-btn-full.hidden{display:none}.sabotage-btn-full:active{transform:translateY(2px);box-shadow:0 0 16px #ff2d554d,0 2px #0000004d}.sabotage-btn-full .sabotage-btn-icon{font-size:18px}.arc-chip--sabotage{color:var(--color-danger, #ff2d55);background:#ff2d5514;border:1px solid rgba(255,45,85,.4)}.player-badge--sabotage{top:-2px;left:2px;background:linear-gradient(135deg,#ff2d55,#c1121f)}.sabotage-confirmation{background:linear-gradient(135deg,#ff2d55,#c1121f);box-shadow:0 4px 20px #ff2d5580}.sabotaged-banner{background:linear-gradient(135deg,#ff2d55,#7c1020);box-shadow:0 4px 20px #ff2d5599}.bet-arc--forced{opacity:.85;cursor:not-allowed}.submit-arc--frozen{opacity:.6;filter:grayscale(.4)}.arc-submission-strip{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px var(--space-md) 12px;font-family:var(--font-body);font-size:11px;color:var(--color-text-dim);font-weight:600}.arc-submission-dots{display:flex;align-items:center;gap:6px}.arc-submission-dots .player-indicator{width:12px;height:12px;min-width:12px;padding:0;background:#ffffff2e;border:0;border-radius:50%;font-size:0;color:transparent;transition:all var(--transition-normal);flex:0 0 auto;overflow:hidden;display:block}.arc-submission-dots .player-indicator>*{display:none!important}.arc-submission-dots .player-indicator.is-submitted{background:var(--color-success-neon);box-shadow:0 0 6px #39ff1480}.arc-submission-dots .player-indicator.is-current-player,.arc-submission-dots .player-indicator.is-current{background:var(--color-accent-secondary);box-shadow:0 0 6px #00f5ff80}.arc-submission-dots .player-indicator.is-current-player.is-submitted{background:var(--color-success-neon);box-shadow:0 0 8px #39ff14b3}.arc-submission-count{color:var(--color-text-dim);font-weight:600}.submitted-confirmation.hidden{display:none}.closest-wins-splash{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#0a0a12b3;backdrop-filter:blur(4px);font-family:var(--font-display);font-weight:900;font-size:40px;color:var(--color-success-neon);letter-spacing:.08em;gap:12px;pointer-events:none;text-shadow:0 0 32px rgba(57,255,20,.55);animation:closest-wins-splash-in 1.6s ease-out both}.closest-wins-splash.hidden{display:none}@keyframes closest-wins-splash-in{0%{opacity:0;transform:scale(.8)}20%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.05)}}#round-indicator.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body:has(#game-view:not(.hidden)) .player-header{display:none}body:has(#game-view:not(.hidden)) .player-container{padding-top:max(var(--space-xs),env(safe-area-inset-top))}body:has(#game-view:not(.hidden)) .arc-header{margin-bottom:var(--space-sm)}body:has(#game-view:not(.hidden)) .year-xxl{font-size:clamp(72px,26vw,104px);margin:2px 0 var(--space-sm)}body:has(#game-view:not(.hidden)) .slider-arcade-wrap{margin-bottom:var(--space-sm)}body:has(#game-view:not(.hidden)) .arc-tiles{padding:10px 12px;margin:0 var(--space-md) var(--space-sm)}body:has(#game-view:not(.hidden)) .arc-tiles-header{margin-bottom:6px}body:has(#game-view:not(.hidden)) .arc-tiles-grid{gap:8px}body:has(#game-view:not(.hidden)) .arc-tiles-grid .artist-option-btn,body:has(#game-view:not(.hidden)) .arc-tiles-grid .movie-option-btn{min-height:52px;padding:12px 10px}body:has(#game-view:not(.hidden)) .arc-actions{margin-bottom:var(--space-sm)}body:has(#game-view:not(.hidden)) .bonus-filler{padding:var(--space-sm) var(--space-md);margin:0 var(--space-md) var(--space-sm)}body.theme-dark .podium{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"hero hero" "second third";gap:var(--space-md);align-items:stretch;justify-content:stretch;margin-bottom:var(--space-xl);padding:0 var(--space-xs)}body.theme-dark .podium-place.podium-1{grid-area:hero;width:100%;padding:var(--space-lg) var(--space-md) var(--space-md);background:linear-gradient(135deg,#ff2d6a24,#00f5ff0f);border:1px solid rgba(255,45,106,.35);border-radius:var(--radius-xl);box-shadow:0 0 40px #ff2d6a2e;text-align:center;justify-content:center}body.theme-dark .podium-place.podium-1 .podium-medal{font-size:38px;margin-bottom:var(--space-xs);filter:drop-shadow(0 0 16px rgba(255,45,106,.6))}body.theme-dark .podium-place.podium-1 .podium-name{font-family:Outfit,sans-serif;font-weight:900;line-height:.92;letter-spacing:-.04em;margin:0 0 var(--space-sm);max-width:100%;white-space:normal;word-break:break-word;overflow:visible;text-overflow:clip;background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(255,45,106,.3));font-size:clamp(40px,14vw,64px)}body.theme-dark .podium-place.podium-1 .podium-score{font-family:Inter,sans-serif;font-weight:700;font-size:var(--font-size-3xl);color:var(--color-accent-secondary);font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(0,245,255,.5);margin-bottom:0}body.theme-dark .podium-place.podium-1 .podium-stand{display:none}body.theme-dark .podium-place.podium-2,body.theme-dark .podium-place.podium-3{width:100%;min-width:0;padding:var(--space-md) var(--space-sm);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);border-radius:var(--radius-lg);display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;gap:var(--space-sm);text-align:left}body.theme-dark .podium-place.podium-2{grid-area:second;border-color:#00f5ff47;box-shadow:0 0 18px #00f5ff1a}body.theme-dark .podium-place.podium-3{grid-area:third}body.theme-dark .podium-place.podium-2 .podium-medal,body.theme-dark .podium-place.podium-3 .podium-medal{font-size:22px;margin:0;line-height:1}body.theme-dark .podium-place.podium-2 .podium-name,body.theme-dark .podium-place.podium-3 .podium-name{font-family:Outfit,sans-serif;font-weight:800;font-size:var(--font-size-lg);color:var(--color-text-white);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body.theme-dark .podium-place.podium-2 .podium-score,body.theme-dark .podium-place.podium-3 .podium-score{font-family:Outfit,sans-serif;font-weight:900;font-size:var(--font-size-lg);color:var(--color-accent-secondary);font-variant-numeric:tabular-nums;text-shadow:0 0 8px rgba(0,245,255,.3);margin:0;white-space:nowrap}body.theme-dark .podium-place.podium-2 .podium-stand,body.theme-dark .podium-place.podium-3 .podium-stand{display:none}body.theme-dark .podium-place.podium-2.hidden~.podium-place.podium-3:not(.hidden){grid-area:second}body.theme-dark .your-result{background:linear-gradient(135deg,#ff2d6a1a,#00f5ff0a);border:1px solid rgba(255,45,106,.28);box-shadow:0 0 28px #ff2d6a1f}body.theme-dark .your-result-rank{font-family:Outfit,sans-serif;font-weight:900;font-size:var(--font-size-4xl);letter-spacing:-.03em}body.theme-dark .your-result-stats .stat-value{font-family:Outfit,sans-serif;font-weight:800}.plh-root{display:flex;flex-direction:column;min-height:100%;height:100%;background:var(--color-bg-primary);color:var(--color-text-white);font-family:var(--font-body);font-variant-numeric:tabular-nums;position:relative;isolation:isolate;overflow:hidden}.plh-root:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 25% at 50% 0%,rgba(255,45,106,.12),transparent 60%),radial-gradient(ellipse 60% 30% at 30% 60%,rgba(0,245,255,.06),transparent 60%)}.plh-header{position:sticky;top:0;z-index:5;background:#0a0a12d1;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:8px 14px 6px;border-bottom:1px solid rgba(255,255,255,.04)}.plh-titlebar{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.plh-wordmark{font-family:var(--font-display);font-weight:900;font-size:20px;letter-spacing:-.02em;line-height:1;background:linear-gradient(90deg,var(--color-accent-primary) 0%,var(--color-accent-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.plh-search{position:relative;margin-bottom:10px}.plh-search input{width:100%;height:40px;padding:0 38px 0 40px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);border-radius:10px;color:var(--color-text-white);font-family:var(--font-body);font-weight:500;font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s}.plh-search input:focus{border-color:var(--color-accent-secondary);box-shadow:0 0 0 3px #00f5ff26}.plh-search input::placeholder{color:var(--color-text-neon-muted);opacity:.6}.plh-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-accent-secondary);opacity:.75}.plh-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--color-dark-surface-hover);border:none;color:var(--color-text-neon-muted);font-family:var(--font-display);font-weight:900;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center}.plh-segmented{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:4px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);border-radius:10px;margin-bottom:10px}.plh-seg{background:transparent;border:none;padding:8px 4px;cursor:pointer;border-radius:7px;display:flex;flex-direction:column;gap:1px;align-items:center;line-height:1.1;font-family:var(--font-body);font-weight:700;font-size:12px;color:var(--color-text-neon-muted);letter-spacing:.04em;transition:background .15s,color .15s}.plh-seg .plh-seg-num{font-family:var(--font-display);font-weight:900;font-size:15px;color:var(--color-text-neon-muted)}.plh-seg .plh-seg-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase}.plh-seg.active{background:linear-gradient(135deg,#ff2d6a38,#00f5ff24);color:var(--color-text-white);box-shadow:inset 0 0 0 1px #ff2d6a59,0 0 18px #ff2d6a2e}.plh-seg.active .plh-seg-num{color:var(--color-accent-primary)}.plh-seg-community.active{background:linear-gradient(135deg,#9d4edd40,#ff2d6a26);box-shadow:inset 0 0 0 1px #9d4edd73,0 0 18px #9d4edd38}.plh-seg-community.active .plh-seg-num{color:#c89af5}.plh-seg-mine.active{background:linear-gradient(135deg,#00f5ff2e,#ff2d6a1a);box-shadow:inset 0 0 0 1px #00f5ff66,0 0 18px #00f5ff2e}.plh-seg-mine.active .plh-seg-num{color:var(--color-accent-secondary)}.plh-chips{display:flex;gap:7px;overflow-x:auto;padding:0 0 6px;scrollbar-width:none}.plh-chips::-webkit-scrollbar{display:none}.plh-chip{flex-shrink:0;padding:7px 13px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);border-radius:999px;font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--color-text-neon-muted);white-space:nowrap;cursor:pointer;letter-spacing:.01em;transition:background .15s,color .15s,border-color .15s}.plh-chip.active{background:var(--color-accent-primary);color:var(--color-text-white);border-color:transparent;font-weight:700;box-shadow:0 0 16px #ff2d6a73}.plh-list-view,.plh-mix-view{flex:1 1 0;min-height:0;display:flex;flex-direction:column}.plh-body{position:relative;z-index:1;flex:1;overflow-y:auto;padding:14px 0 110px}.plh-loading{padding:40px 20px;text-align:center;font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--color-text-neon-muted)}.plh-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 18px 12px;margin:4px 0 8px;border-bottom:1px solid rgba(0,245,255,.12)}.plh-section-head-title{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:900;font-size:22px;letter-spacing:-.02em;color:var(--color-text-white);line-height:1}.plh-section-head-emoji{font-size:22px;filter:drop-shadow(0 0 12px rgba(0,245,255,.3))}.plh-section-head-meta{font-family:var(--font-body);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-neon-muted);flex-shrink:0}.plh-shelf{margin-bottom:22px}.plh-shelf-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 18px 10px}.plh-shelf-title{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--color-text-white);display:flex;align-items:center;gap:6px}.plh-shelf-see{font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--color-accent-secondary);letter-spacing:.02em;cursor:pointer;background:transparent;border:none;padding:0}.plh-local-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--color-success-neon);box-shadow:0 0 8px var(--color-success-neon);margin-right:8px;vertical-align:middle}.plh-local-badge{font-family:var(--font-body);font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-success-neon);padding:2px 7px;background:#39ff141f;border:1px solid rgba(57,255,20,.4);border-radius:999px;margin-left:8px;vertical-align:middle}.plh-cards{display:flex;gap:12px;overflow-x:auto;padding:0 18px 4px;scrollbar-width:none}.plh-cards::-webkit-scrollbar{display:none}.plh-card{flex-shrink:0;width:160px;cursor:pointer;position:relative;background:transparent;border:none;padding:0;text-align:left;color:inherit;font:inherit}.plh-card .plh-cover{width:160px;height:160px;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 10px 24px #00000080;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:10px}.plh-card .plh-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45) 100%);pointer-events:none;z-index:1}.plh-cover-inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;height:100%}.plh-cover-glyph{font-family:var(--font-display);font-weight:900;font-size:42px;line-height:.9;letter-spacing:-.04em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.plh-cover-glyph-long{font-size:26px;letter-spacing:-.02em}.plh-cover-sub{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#ffffffeb;margin-top:4px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;word-break:break-word;max-width:100%}.plh-cover-badge{position:absolute;top:8px;right:8px;padding:3px 8px;background:#00000080;backdrop-filter:blur(6px);border-radius:999px;font-family:var(--font-body);font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-white);z-index:3}.plh-cover-badge-purple{background:#9d4edd80}.plh-card-meta{padding:8px 2px 0}.plh-card-name{font-family:var(--font-body);font-weight:700;font-size:13px;line-height:1.25;color:var(--color-text-white);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.plh-card-sub{font-family:var(--font-body);font-weight:500;font-size:11px;color:var(--color-text-neon-muted);margin-top:2px;letter-spacing:.02em}.plh-card-sub b{color:var(--color-accent-secondary);font-weight:700}.plh-card-local{font-family:var(--font-body);font-weight:500;font-size:11px;color:var(--color-success-neon);margin-top:2px;letter-spacing:.02em}.plh-card-local b{color:var(--color-success-neon);font-weight:800}.plh-card-local-when{color:var(--color-text-neon-muted)}.plh-card-local-when b{color:var(--color-accent-secondary)}.plh-pill{position:absolute;top:8px;left:8px;z-index:4;display:inline-flex;align-items:center;gap:4px;padding:5px 10px 5px 8px;border-radius:999px;background:#ff2d6aeb;color:var(--color-text-white);font-family:var(--font-display);font-weight:800;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:1px solid rgba(255,255,255,.12);box-shadow:0 4px 12px #0006,0 0 14px #ff2d6a59;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .15s,color .15s,box-shadow .15s,filter .15s}.plh-pill:hover{filter:brightness(1.1)}.plh-pill-label{line-height:1}.plh-card-selected .plh-pill{background:var(--color-success-neon);color:var(--color-bg-primary);border-color:transparent;box-shadow:0 4px 12px #0006,0 0 18px #39ff148c}.plh-card-selected .plh-cover{box-shadow:0 0 0 3px var(--color-success-neon),0 10px 24px #00000080}.plh-check{display:none}.plh-featured .plh-card,.plh-featured .plh-card .plh-cover{width:160px}.plh-featured .plh-card .plh-cover{height:200px;padding:2px;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));box-shadow:0 12px 30px #0009,0 0 24px #ff2d6a40}.plh-featured .plh-card .plh-cover:after{border-radius:10px;margin:2px;inset:2px}.plh-featured .plh-cover-inner{padding:10px}.plh-featured .plh-cover-glyph{font-size:48px}.plh-card-community .plh-cover{background:linear-gradient(135deg,#240046,#7209b7,#ff2d6a);box-shadow:0 12px 30px #0009,0 0 28px #9d4edd66}.plh-tint-pop{background:linear-gradient(135deg,#ff2d6a,#ff6b9d 60%,#ff8c42)}.plh-tint-rock{background:linear-gradient(135deg,#c1121f,#ff4d1c 60%,#ff8c42)}.plh-tint-hiphop{background:linear-gradient(135deg,#7209b7,#b5179e 60%,#ff2d6a)}.plh-tint-jazz{background:linear-gradient(135deg,#b08968,#e6a855 60%,#ffc94a)}.plh-tint-metal{background:linear-gradient(135deg,#1a0000,#6a040f 60%,#c1121f)}.plh-tint-eu{background:linear-gradient(135deg,#00b4d8,#0077b6 60%,#03045e)}.plh-tint-latin{background:linear-gradient(135deg,#f60,#ffb703 60%,#fdd85d)}.plh-tint-schlager{background:linear-gradient(135deg,#ff8fab,#ffc2d1 60%,#fae0e4)}.plh-tint-schlager .plh-cover-glyph,.plh-tint-schlager .plh-cover-sub{color:#2a0a1a;text-shadow:none}.plh-tint-soul{background:linear-gradient(135deg,#6a0572,#ab4287 60%,#fcbf49)}.plh-tint-purple{background:linear-gradient(135deg,#240046,#7209b7,#ff2d6a)}.plh-banner{margin:0 18px 18px;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,#9d4edd2e,#ff2d6a1a);border:1px solid rgba(157,78,221,.35);display:flex;align-items:center;gap:12px;cursor:pointer}.plh-banner-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#7209b7,var(--color-accent-primary));display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:0 0 14px #9d4edd80}.plh-banner-body{flex:1;min-width:0}.plh-banner-title{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--color-text-white);line-height:1.2}.plh-banner-sub{font-family:var(--font-body);font-weight:500;font-size:11px;color:var(--color-text-neon-muted);margin-top:2px;line-height:1.35}.plh-banner-arrow{font-family:var(--font-display);font-weight:900;font-size:22px;color:#c89af5}.plh-mine-empty{padding:30px 24px;text-align:center}.plh-empty-emoji{font-size:64px;margin-bottom:12px;filter:drop-shadow(0 0 24px rgba(0,245,255,.3))}.plh-mine-title{font-family:var(--font-display);font-weight:900;font-size:26px;color:var(--color-text-white);margin:0 0 8px;letter-spacing:-.01em;line-height:1.1}.plh-mine-body{font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--color-text-neon-muted);margin:0 0 20px;line-height:1.5}.plh-mine-body b{color:var(--color-text-white);font-weight:700}.plh-request-cta{margin:0 0 16px;padding:20px;background:linear-gradient(135deg,#00f5ff1a,#ff2d6a0f);border:1px solid rgba(0,245,255,.35);border-radius:16px;text-align:left}.plh-request-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.plh-request-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--color-accent-secondary),#0077b6);display:flex;align-items:center;justify-content:center;color:var(--color-bg-primary);font-family:var(--font-display);font-weight:900;font-size:22px;box-shadow:0 0 16px #00f5ff80}.plh-request-titles{flex:1;min-width:0}.plh-request-t1{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--color-text-white);line-height:1.2}.plh-request-t2{font-family:var(--font-body);font-weight:500;font-size:12px;color:var(--color-text-neon-muted);margin-top:2px;line-height:1.35}.plh-meanwhile{margin:12px 0 0;padding:14px 16px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);border-radius:12px;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left}.plh-meanwhile-icon{color:var(--color-accent-secondary);font-family:var(--font-display);font-weight:900;font-size:18px;flex-shrink:0}.plh-meanwhile-body{flex:1;min-width:0}.plh-meanwhile-t1{font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--color-text-white);line-height:1.2}.plh-meanwhile-t2{font-family:var(--font-body);font-weight:500;font-size:11px;color:var(--color-text-neon-muted);margin-top:2px;line-height:1.35}.plh-meanwhile-arrow{color:var(--color-text-neon-muted);font-family:var(--font-display);font-weight:900;font-size:20px}.plh-mine-head{padding:14px 18px 6px;display:flex;align-items:baseline;justify-content:space-between}.plh-mine-count{font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-neon-muted)}.plh-mine-count b{color:var(--color-text-white);font-weight:900}.plh-new-request{margin:10px 18px 18px;display:flex;align-items:center;gap:12px;padding:14px;background:linear-gradient(90deg,#00f5ff1a,#ff2d6a14);border:1px dashed rgba(0,245,255,.4);border-radius:12px;cursor:pointer}.plh-new-plus{width:36px;height:36px;border-radius:10px;background:var(--color-accent-secondary);color:var(--color-bg-primary);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:20px;box-shadow:0 0 16px var(--color-accent-secondary);flex-shrink:0}.plh-new-t1{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--color-text-white);line-height:1.2}.plh-new-t2{font-family:var(--font-body);font-weight:500;font-size:11px;color:var(--color-text-neon-muted);margin-top:2px}.plh-req-list{padding:0 18px;display:flex;flex-direction:column;gap:10px}.plh-req-card{padding:14px 14px 14px 16px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);border-radius:14px;display:flex;flex-direction:column;gap:10px}.plh-req-card.plh-req-done{border-color:#39ff1459;background:linear-gradient(90deg,rgba(57,255,20,.06),transparent 75%)}.plh-req-card.plh-req-building{border-color:#00f5ff66;background:linear-gradient(90deg,rgba(0,245,255,.06),transparent 75%)}.plh-req-card.plh-req-declined{border-color:#ff2d6a59}.plh-req-row1{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.plh-req-body{min-width:0;flex:1}.plh-req-name{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--color-text-white);line-height:1.2;letter-spacing:-.01em}.plh-req-desc{font-family:var(--font-body);font-weight:500;font-size:11.5px;color:var(--color-text-neon-muted);margin-top:3px;line-height:1.45;word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.plh-req-meta{font-family:var(--font-body);font-weight:600;font-size:10px;color:var(--color-text-light);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}.plh-req-meta b{color:var(--color-text-neon-muted);font-weight:700}.plh-req-link{color:var(--color-accent-secondary);font-weight:700;text-transform:none;letter-spacing:.02em;text-decoration:none}.plh-status-badge{flex-shrink:0;padding:4px 10px;border-radius:999px;font-family:var(--font-display);font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:5px}.plh-sb-dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}.plh-status-badge.pending{background:#f59e0b1f;border:1px solid rgba(245,158,11,.45);color:var(--color-warning)}.plh-status-badge.building{background:#00f5ff1f;border:1px solid rgba(0,245,255,.45);color:var(--color-accent-secondary)}.plh-status-badge.done{background:#39ff141f;border:1px solid rgba(57,255,20,.4);color:var(--color-success-neon)}.plh-status-badge.declined{background:#ff2d6a1f;border:1px solid rgba(255,45,106,.4);color:#ff7ca7}.plh-progress{display:flex;gap:3px;align-items:center}.plh-seg-pill{flex:1;height:3px;border-radius:2px;background:var(--color-border-neon)}.plh-seg-pill.filled-pending{background:var(--color-warning);box-shadow:0 0 6px var(--color-warning)}.plh-seg-pill.filled-building{background:var(--color-accent-secondary);box-shadow:0 0 6px var(--color-accent-secondary)}.plh-seg-pill.filled-done{background:var(--color-success-neon);box-shadow:0 0 6px var(--color-success-neon)}.plh-seg-pill.filled-declined{background:var(--color-accent-primary);box-shadow:0 0 6px var(--color-accent-primary)}.plh-steps-row{display:flex;justify-content:space-between;font-family:var(--font-body);font-weight:600;font-size:9px;color:var(--color-text-light);letter-spacing:.1em;text-transform:uppercase;margin-top:-4px}.plh-steps-row span.active{color:var(--color-text-white);font-weight:800}.plh-empty{padding:30px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.plh-empty-icon{width:96px;height:96px;border-radius:26px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);font-size:42px;position:relative}.plh-empty-icon-search{background:radial-gradient(circle,rgba(0,245,255,.12),var(--color-bg-surface) 60%)}.plh-empty-title{font-family:var(--font-display);font-weight:900;font-size:24px;color:var(--color-text-white);margin:0;letter-spacing:-.01em;line-height:1.15}.plh-empty-body{font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--color-text-neon-muted);margin:0;line-height:1.55;max-width:280px}.plh-cyan{color:var(--color-accent-secondary)}.plh-action-stack{display:flex;flex-direction:column;gap:8px;width:100%;max-width:280px;margin-top:12px}.plh-btn{padding:13px 16px;border-radius:12px;font-weight:800;font-size:13px;letter-spacing:.04em;border:1px solid var(--color-border-neon);background:var(--color-bg-surface);color:var(--color-text-white);cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;text-transform:uppercase;transition:all .15s;font-family:var(--font-display)}.plh-btn:hover{border-color:var(--color-accent-secondary)}.plh-btn-primary{background:linear-gradient(90deg,var(--color-accent-primary),#ff5fa4);border-color:transparent;color:var(--color-text-white);box-shadow:0 0 24px #ff2d6a73}.plh-btn-primary:hover{border-color:transparent;filter:brightness(1.1)}.plh-btn-cyan{background:linear-gradient(90deg,var(--color-accent-secondary),#0077b6);color:var(--color-bg-primary);border-color:transparent;box-shadow:0 0 22px #00f5ff73}.plh-btn-cyan:hover{border-color:transparent;filter:brightness(1.1)}.plh-btn-neon{background:linear-gradient(90deg,var(--color-success-neon),#7bf1ff);color:var(--color-bg-primary);border-color:transparent;box-shadow:0 0 24px #39ff1480}.plh-btn-ghost{background:transparent;color:var(--color-text-neon-muted)}.plh-sheet-host{position:fixed;inset:0;z-index:50;pointer-events:none;display:none}.plh-sheet-host.open{display:block;pointer-events:auto}.plh-scrim{position:absolute;inset:0;background:#05050ab8;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.plh-sheet{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#14141e 0%,var(--color-bg-primary) 100%);border-top-left-radius:28px;border-top-right-radius:28px;box-shadow:0 -12px 40px #0009;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;border-top:1px solid rgba(255,45,106,.25);animation:plh-sheet-in .25s ease-out}.plh-sheet-community{border-top-color:#9d4edd66}.plh-sheet:before{content:"";position:absolute;top:10px;left:50%;transform:translate(-50%);width:48px;height:4px;border-radius:999px;background:#fff3}@keyframes plh-sheet-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}.plh-sheet-close{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);color:var(--color-text-neon-muted);cursor:pointer;font-family:var(--font-display);font-weight:900;font-size:16px;line-height:1;z-index:5;display:flex;align-items:center;justify-content:center}.plh-sheet-head{padding:28px 20px 0;display:flex;gap:14px;align-items:flex-start;flex-shrink:0}.plh-sheet-cover{width:100px;height:100px;border-radius:14px;position:relative;overflow:hidden;flex-shrink:0;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;box-shadow:0 12px 30px #00000080}.plh-sheet-cover-glyph{font-family:var(--font-display);font-weight:900;font-size:36px;line-height:.9;letter-spacing:-.04em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4)}.plh-sheet-cover-sub{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#ffffffe6;margin-top:2px}.plh-sheet-info{flex:1;min-width:0}.plh-sheet-title{font-family:var(--font-display);font-weight:900;font-size:22px;line-height:1.1;letter-spacing:-.02em;color:var(--color-text-white);margin:0}.plh-sheet-author{font-family:var(--font-body);font-weight:500;font-size:12px;color:var(--color-text-neon-muted);margin-top:4px}.plh-sheet-author b{color:var(--color-accent-secondary);font-weight:700}.plh-sheet-stats{display:flex;gap:0;padding:18px 20px 16px;border-bottom:1px solid rgba(255,255,255,.06);margin-top:18px;flex-shrink:0}.plh-stat{flex:1;text-align:center;position:relative}.plh-stat+.plh-stat:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--color-border-neon)}.plh-stat-val{font-family:var(--font-display);font-weight:900;font-size:22px;color:var(--color-text-white);letter-spacing:-.02em;line-height:1}.plh-stat-val-cyan{color:var(--color-accent-secondary)}.plh-stat-val-pink{color:var(--color-accent-primary)}.plh-stat-lbl{font-family:var(--font-body);font-weight:700;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-light);margin-top:4px}.plh-sheet-scroll{flex:1;overflow-y:auto;padding:16px 20px 20px}.plh-sheet-sec-title{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-neon-muted);margin:0 0 10px}.plh-sheet-desc{font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--color-text-neon-muted);line-height:1.55;margin-bottom:16px;padding:14px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);border-radius:12px}.plh-sheet-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.plh-sheet-tag{padding:5px 10px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);border-radius:6px;font-family:var(--font-body);font-weight:600;font-size:11px;color:var(--color-text-white);letter-spacing:.02em}.plh-sheet-providers{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.plh-sheet-provider{padding:6px 10px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);border-radius:8px;font-family:var(--font-body);font-weight:600;font-size:11px;color:var(--color-text-neon-muted)}.plh-sheet-provider b{color:var(--color-accent-secondary);font-weight:800}.plh-sheet-foot{padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px)) 20px;background:#0a0a12f2;border-top:1px solid var(--color-border-neon);display:flex;gap:10px;align-items:center;flex-shrink:0}.plh-sheet-foot .plh-btn{flex:1}.plh-mix-cta:empty{display:none}.plh-cta-bar{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px;padding:10px;background:#0a0a12e0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-border-neon);border-radius:16px;box-shadow:0 12px 40px #0009;align-items:center;z-index:10}.plh-cta-fab{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--color-accent-secondary) 0%,#0ea5c4 100%);border:none;color:var(--color-bg-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 18px #00f5ff73,inset 0 1px #ffffff40;flex-shrink:0;transition:filter .15s}.plh-cta-fab:hover{filter:brightness(1.1)}.plh-cta-fab svg{stroke:#fff;fill:none}.plh-cta-back{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;padding:0 12px;height:44px;border-radius:12px;background:var(--color-bg-surface);border:1px solid var(--color-border-neon);color:var(--color-text-white);font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:border-color .15s,background .15s}.plh-cta-back:hover{border-color:var(--color-accent-secondary)}.plh-cta-back svg{opacity:.85}.plh-cta-count{font-family:var(--font-display);font-weight:900;font-size:14px;color:var(--color-success-neon);padding:0 8px;letter-spacing:.04em;text-shadow:0 0 10px rgba(57,255,20,.5)}.plh-cta-start{flex:1;background:linear-gradient(90deg,var(--color-accent-primary),#ff5fa4);border:none;border-radius:12px;padding:12px;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--color-text-white);cursor:pointer;letter-spacing:.02em;box-shadow:0 0 24px #ff2d6a80;display:flex;align-items:center;justify-content:center;gap:8px}.plh-cta-start-count{display:none}.plh-cta-start-label{font-family:var(--font-display);font-weight:700}.plh-cta-start-arrow{opacity:.9;flex-shrink:0}.plh-cta-count-empty{opacity:.5}.plh-cta-count-btn{background:transparent;border:1px solid rgba(57,255,20,.35);border-radius:999px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .1s ease}.plh-cta-count-btn:hover,.plh-cta-count-btn:focus-visible{background:#39ff141f;border-color:#39ff1499;outline:none}.plh-cta-count-btn:active{transform:scale(.96)}.plh-cta-start-disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.plh-sheet-selected{border-top-color:#39ff1459}.plh-selected-head{padding:28px 20px 12px;flex-shrink:0}.plh-selected-title{font-family:var(--font-display);font-weight:900;font-size:20px;color:var(--color-text-white);margin:0 0 4px;letter-spacing:.01em}.plh-selected-subtitle{font-size:13px;color:var(--color-text-neon-muted);letter-spacing:.01em}.plh-selected-scroll{overflow-y:auto;padding:4px 16px 24px;flex:1;min-height:0}.plh-selected-row{display:flex;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.06)}.plh-selected-row:last-child{border-bottom:none}.plh-selected-thumb{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#ffffff0f}.plh-selected-glyph{font-size:20px}.plh-selected-meta{flex:1;min-width:0}.plh-selected-name{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--color-text-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.plh-selected-sub{font-size:12px;color:var(--color-text-neon-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}.plh-selected-sub b{color:var(--color-text-white);font-weight:700}.plh-selected-remove{height:32px;padding:0 12px;border-radius:16px;background:var(--color-bg-surface);border:1px solid rgba(255,45,106,.35);color:#ff5fa4;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .1s ease}.plh-selected-remove:hover,.plh-selected-remove:focus-visible{background:#ff2d6a2e;border-color:#ff2d6aa6;color:#ff7ab3;outline:none}.plh-selected-remove:active{transform:scale(.94)}.plh-selected-remove-label{line-height:1}.plh-selected-empty{text-align:center;padding:36px 20px;color:var(--color-text-neon-muted)}.plh-selected-empty-icon{font-size:36px;margin-bottom:8px}.plh-selected-empty-title{font-family:var(--font-display);font-weight:700;font-size:14px}@media(min-width:720px){.plh-cards{padding:0 24px 4px}.plh-header{padding:16px 24px 12px}.plh-shelf-head{padding:0 24px 10px}.plh-banner,.plh-new-request{margin-left:24px;margin-right:24px}.plh-req-list{padding:0 24px}.plh-mine-head{padding:14px 24px 6px}}.plg-host{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}.plg-scrim{position:absolute;inset:0;background:#000000b8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.plg-modal{position:relative;z-index:1;margin:32px 16px;max-width:880px;width:100%;background:#0f1116;color:#f1f3f7;border-radius:16px;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px #0009;padding:24px 24px 20px;max-height:calc(100vh - 64px);overflow-y:auto;font-family:var(--font-body, system-ui)}.plg-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:#ffffff0f;color:#f1f3f7;border:0;font-size:16px;cursor:pointer}.plg-close:hover{background:#ffffff1f}.plg-title{margin:0 0 4px;font-size:20px;font-family:var(--font-display, system-ui);font-weight:700;letter-spacing:.02em}.plg-sub{margin:0 0 18px;color:#d8dce5;font-size:15px;line-height:1.55}.plg-guide{margin:0 0 18px;background:#14171f;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden}.plg-guide-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;padding:12px 14px;background:transparent;border:0;color:#f1f3f7;font:inherit;font-size:14px;font-weight:700;letter-spacing:.01em;cursor:pointer;text-align:left}.plg-guide-toggle:hover{background:#ffffff08}.plg-guide-chevron{color:#8a92a3;font-size:13px;margin-left:12px}.plg-guide-body{padding:4px 14px 14px;border-top:1px solid rgba(255,255,255,.06)}.plg-guide-steps{list-style:none;margin:12px 0 14px;padding:0;display:flex;flex-direction:column;gap:12px}.plg-guide-step{display:flex;align-items:flex-start;gap:12px}.plg-guide-num{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,#ff3a8c,#cf2e72);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}.plg-guide-text{color:#d8dce5;font-size:13.5px;line-height:1.5}.plg-guide-text b{color:#f1f3f7}.plg-guide-warn{display:flex;align-items:flex-start;gap:10px;background:#ffb80014;border:1px solid rgba(255,184,0,.35);border-radius:10px;padding:10px 12px}.plg-guide-warn-icon{flex:0 0 auto;font-size:14px;line-height:1.5}.plg-guide-warn-text{color:#f0d9a8;font-size:12.5px;line-height:1.55}.plg-guide-warn-text b{color:#ffd66b}.plg-label{display:block;margin:14px 0 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a92a3}.plg-input,.plg-textarea{width:100%;box-sizing:border-box;background:#181b24;color:#f1f3f7;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;outline:none}.plg-input:focus,.plg-textarea:focus{border-color:#5cc8ff}.plg-textarea{min-height:200px;font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:12.5px;line-height:1.45;resize:vertical}.plg-row{display:flex;gap:10px;align-items:center;margin:8px 0 0;flex-wrap:wrap}.plg-hint{color:#8a92a3;font-size:12px}.plg-btn{appearance:none;-webkit-appearance:none;cursor:pointer;border-radius:999px;padding:9px 16px;font:inherit;font-size:13px;font-weight:600;border:0;background:#ffffff14;color:#f1f3f7}.plg-btn:disabled{cursor:not-allowed;opacity:.45}.plg-btn-primary{background:linear-gradient(180deg,#ff3a8c,#cf2e72);color:#fff}.plg-btn-secondary{background:#ffffff1a}.plg-btn-ghost{background:transparent;color:#aab0bd}.plg-btn-success{background:linear-gradient(180deg,#2dd66f,#20b659);color:#04140a}.plg-btn-disabled{background:#ffffff0a;color:#5a606e}.plg-actions{display:flex;gap:10px;margin:16px 0 0;flex-wrap:wrap}.plg-results{margin-top:16px}.plg-verdict{padding:10px 12px;border-radius:10px;margin:6px 0 12px;font-weight:700;font-size:13px}.plg-verdict-ok{background:#2dd66f29;color:#2dd66f;border:1px solid rgba(45,214,111,.4)}.plg-verdict-bad{background:#ff505024;color:#ff8a8a;border:1px solid rgba(255,80,80,.4)}.plg-block{background:#14171f;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px 12px;margin:8px 0}.plg-block h4{margin:0 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#aab0bd}.plg-block ul{margin:0;padding-left:18px;font-size:13px;line-height:1.5}.plg-block-err{border-color:#ff505066}.plg-table-wrap{overflow-x:auto}.plg-table{width:100%;border-collapse:collapse;font-size:11px}.plg-table th,.plg-table td{padding:4px 6px;text-align:center}.plg-table th{color:#8a92a3;font-weight:600;letter-spacing:.04em;border-bottom:1px solid rgba(255,255,255,.08)}.plg-row-idx{color:#aab0bd;text-align:left;font-weight:700}.plg-cell-ok{color:#2dd66f}.plg-cell-bad{color:#ff8a8a;background:#ff50500f}.plg-row-bad{background:#ff50500a}.plg-row-details td{text-align:left;padding-left:24px}.plg-err-list{color:#ff8a8a}.plg-warn-list{color:#ffd66b}.plg-song-issue{padding:8px 0;border-top:1px solid rgba(255,255,255,.05)}.plg-song-issue:first-of-type{border-top:0;padding-top:4px}.plg-song-issue-head{font-weight:700;font-size:12px;margin:0 0 4px;color:#f1f3f7;letter-spacing:.02em}.plg-song-issue ul{margin:0;padding-left:18px;font-size:13px;line-height:1.5}.plg-err-item{color:#ff8a8a}.plg-warn-item{color:#ffd66b}.plg-results-actions{margin-top:0!important;margin-bottom:6px}.plg-hint-inline{font-style:italic}.plg-error{background:#ff50501f;border:1px solid rgba(255,80,80,.4);color:#ff8a8a;border-radius:10px;padding:12px;font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:12px}.plg-footer{margin-top:16px;border-top:1px solid rgba(255,255,255,.06);padding-top:10px;color:#8a92a3;font-size:12px;line-height:1.5}.plg-followup:empty{display:none}.plg-banner{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.5}.plg-banner p{margin:0 0 8px}.plg-banner .plg-row{margin-top:4px;flex-wrap:wrap}.plg-banner-ok{background:#2dd66f24;border:1px solid rgba(45,214,111,.4);color:#c8f3d8}.plg-banner-info{background:#6366f124;border:1px solid rgba(99,102,241,.4);color:#d6d8ff}.ta-reveal-truth{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px;font-family:var(--font-display, inherit);font-size:var(--font-size-md, 1rem);margin-bottom:var(--space-sm, 8px)}.ta-truth-title{font-weight:800}.ta-truth-sep{opacity:.4}.ta-truth-artist{color:var(--color-text-neon-muted, #b3b3c2);font-family:var(--font-body, inherit);font-weight:600}.ta-reveal-own{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:#ffffff08;border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-lg, 12px)}.ta-verdict{text-align:center;font-family:var(--font-display, inherit);font-weight:900;font-size:var(--font-size-lg, 1.125rem);letter-spacing:.01em;padding:8px 12px;margin-bottom:4px;border-radius:var(--radius-md, 8px)}.ta-verdict--win{color:var(--color-success-neon, #39ff14);background:#39ff1424;box-shadow:inset 0 0 18px #39ff141f;text-shadow:0 0 12px rgba(57,255,20,.5)}.ta-verdict--partial{color:var(--color-accent-secondary, #00f5ff);background:#00f5ff1a}.ta-verdict--pending{color:var(--color-accent-secondary, #00f5ff);background:#00f5ff12;font-weight:700;font-style:italic}.ta-verdict--miss{color:var(--color-text-neon-muted, #b3b3c2);background:#ffffff0d}.ta-own-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.ta-own-label{color:var(--color-text-dim, #6b6b7a);font-size:var(--font-size-sm, .875rem);min-width:6em}.ta-own-guess{font-weight:600;flex:1 1 auto;word-break:break-word}.ta-own-row--none{color:var(--color-text-neon-muted, #b3b3c2);font-style:italic}.ta-pill{font-size:.72rem;font-weight:700;padding:2px 10px;border-radius:var(--radius-full, 999px);white-space:nowrap;letter-spacing:.02em}.ta-pill--exact,.ta-pill--fuzzy,.ta-pill--near-miss-accepted{background:#2ee59d29;color:#2ee59d}.ta-pill--near-miss{background:#ffb40029;color:#ffb400}.ta-pill--wrong{background:#ff004024;color:var(--color-error-neon, #ff0040)}.ta-pill--skipped{background:#ffffff14;color:var(--color-text-secondary, #b9b9c6)}.ta-voting{margin-top:var(--space-lg, 24px)}.ta-voting.hidden{display:none}.ta-voting-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:var(--space-md, 16px)}.ta-voting-header>span:not(.ta-voting-countdown){font-family:var(--font-display, inherit);font-weight:900;font-size:var(--font-size-sm, .875rem);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-white, #fff)}.ta-voting-countdown{flex-shrink:0;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;color:var(--color-accent-secondary, #00f5ff);background:radial-gradient(circle at center,var(--color-bg-primary, #0a0a12) 56%,transparent 57%),conic-gradient(var(--color-accent-secondary, #00f5ff) var(--ta-vote-progress, 360deg),rgba(255,255,255,.1) 0);box-shadow:var(--glow-secondary, 0 0 20px rgba(0, 245, 255, .5))}.ta-voting-countdown--closed{width:auto;height:auto;border-radius:var(--radius-full, 999px);padding:4px 12px;font-size:var(--font-size-sm, .875rem);font-weight:700;color:var(--color-text-neon-muted, #b3b3c2);background:#ffffff14;box-shadow:none}.ta-voting-cards{display:flex;flex-direction:column;gap:12px}.ta-vote-card{background:var(--color-bg-surface, rgba(255, 255, 255, .05));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg, 12px);padding:14px}.ta-vote-card--mine{border-color:#ff2d6a73;box-shadow:inset 0 0 16px #ff2d6a12}.ta-vote-card-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.ta-vote-avatar{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display, inherit);font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--color-accent-primary, #ff2d6a),var(--color-neon-purple, #9d4edd))}.ta-vote-who{flex:1;font-weight:700;font-size:var(--font-size-md, 1rem);word-break:break-word}.ta-vote-field{flex-shrink:0;font-size:var(--font-size-xs, .625rem);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-dim, #6b6b7a);background:#ffffff0f;padding:3px 8px;border-radius:var(--radius-full, 999px)}.ta-vote-guess{font-family:var(--font-display, inherit);font-weight:800;font-size:var(--font-size-lg, 1.125rem);margin:2px 0 12px;word-break:break-word}.ta-vote-tally{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}.ta-tally-row{display:flex;align-items:center;gap:8px;font-size:var(--font-size-sm, .875rem);font-weight:700;font-variant-numeric:tabular-nums}.ta-tally-yes{color:var(--color-success-neon, #39ff14);min-width:48px}.ta-tally-no{color:var(--color-error-neon, #ff0040);min-width:48px}.ta-tally-track{flex:1;height:8px;border-radius:var(--radius-full, 999px);background:#ffffff12;overflow:hidden}.ta-tally-fill{display:block;height:100%;border-radius:var(--radius-full, 999px);transition:width var(--transition-normal, .3s) ease-out}.ta-tally-fill--yes{background:var(--color-success-neon, #39ff14);box-shadow:0 0 10px #39ff1480}.ta-tally-fill--no{background:var(--color-error-neon, #ff0040);box-shadow:0 0 10px #ff004073}.ta-vote-actions{display:flex;gap:10px}.ta-vote-btn{position:relative;flex:1;height:48px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg, 12px);background:#ffffff0d;font-size:20px;cursor:pointer;transition:transform var(--transition-fast, .15s),box-shadow var(--transition-fast, .15s),opacity var(--transition-fast, .15s),background var(--transition-fast, .15s)}.ta-vote-btn--yes{background:#39ff141f;border-color:#39ff1466;color:var(--color-success-neon, #39ff14)}.ta-vote-btn--no{background:#ff00401a;border-color:#ff004061;color:var(--color-error-neon, #ff0040)}.ta-vote-btn.is-chosen{transform:translateY(-1px)}.ta-vote-btn--yes.is-chosen{background:#39ff1438;border-color:#39ff1499;box-shadow:var(--glow-success, 0 0 20px rgba(57, 255, 20, .5))}.ta-vote-btn--no.is-chosen{background:#ff004033;border-color:#ff00408c;box-shadow:var(--glow-error, 0 0 20px rgba(255, 0, 64, .5))}.ta-vote-actions--voted .ta-vote-btn{opacity:.34}.ta-vote-actions--voted .ta-vote-btn.is-chosen{opacity:1}.ta-vote-actions--voted .ta-vote-btn.is-chosen:after{content:"\2713";position:absolute;top:3px;right:8px;font-size:12px;font-weight:800}.ta-vote-btn--yes.is-chosen:after{color:var(--color-success-neon, #39ff14)}.ta-vote-btn--no.is-chosen:after{color:var(--color-error-neon, #ff0040)}.ta-voted-caption{margin-top:8px;text-align:center;font-size:var(--font-size-sm, .875rem);color:var(--color-text-neon-muted, #b3b3c2)}.ta-vote-own-note{text-align:center;font-size:var(--font-size-sm, .875rem);font-style:italic;color:var(--color-accent-primary, #ff2d6a);opacity:.85}.ta-override-actions{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}.ta-override-label{margin-right:auto;font-size:var(--font-size-xs, .625rem);color:var(--color-text-dim, #6b6b7a)}.ta-override-btn{padding:6px 14px;border-radius:var(--radius-md, 8px);border:1px solid rgba(255,255,255,.14);background:#ffffff0d;color:var(--color-text-white, #fff);font-weight:700;font-size:var(--font-size-sm, .875rem);cursor:pointer}.ta-override-btn--accept.is-chosen{border-color:var(--color-success-neon, #39ff14);color:var(--color-success-neon, #39ff14)}.ta-override-btn--reject.is-chosen{border-color:var(--color-error-neon, #ff0040);color:var(--color-error-neon, #ff0040)}@media(prefers-reduced-motion:reduce){.ta-tally-fill,.ta-vote-btn{transition:none}}.ta-outcome-card{display:flex;align-items:center;gap:10px;background:var(--color-bg-surface, rgba(255, 255, 255, .05));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg, 12px);padding:11px 13px}.ta-outcome-card--accepted{border-color:#39ff144d}.ta-outcome-card--rejected{opacity:.72}.ta-outcome-avatar{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display, inherit);font-weight:800;font-size:12px;color:#fff;background:linear-gradient(135deg,var(--color-accent-primary, #ff2d6a),var(--color-neon-purple, #9d4edd))}.ta-outcome-main{flex:1;min-width:0}.ta-outcome-who{font-weight:700;font-size:var(--font-size-base, .875rem)}.ta-outcome-field{color:var(--color-text-dim, #6b6b7a);font-weight:600}.ta-outcome-guess{font-size:var(--font-size-sm, .875rem);color:var(--color-text-neon-muted, #b3b3c2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ta-outcome-tally{font-size:var(--font-size-xs, .625rem);color:var(--color-text-dim, #6b6b7a);font-variant-numeric:tabular-nums}.ta-outcome-verdict{flex-shrink:0;display:inline-flex;align-items:center;font-family:var(--font-display, inherit);font-weight:800;font-size:var(--font-size-base, .875rem);padding:5px 11px;border-radius:var(--radius-full, 999px);font-variant-numeric:tabular-nums}.ta-outcome-verdict--accepted{background:#39ff1429;color:var(--color-success-neon, #39ff14)}.ta-outcome-verdict--rejected{background:#ff00401f;color:var(--color-error-neon, #ff0040)}.ta-input-section{display:flex;flex-direction:column;gap:12px;padding:12px 14px;margin:0 var(--space-md) var(--space-md);background:linear-gradient(180deg,#ff2d6a0f,#ffffff05);border:1px solid rgba(255,45,106,.22);border-radius:var(--radius-lg);box-shadow:inset 0 0 12px #ff2d6a0d}.ta-input-section.hidden{display:none}.ta-input-field{display:flex;flex-direction:column;gap:6px}.ta-input-label{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-neon-muted)}.ta-input-points{margin-left:auto;flex-shrink:0;background:#39ff1426;color:var(--color-success-neon);font-weight:900;font-size:11px;letter-spacing:.04em;padding:2px 8px;border-radius:var(--radius-full)}.ta-text-input{width:100%;box-sizing:border-box;padding:12px 14px;background:#ffffff0d;border:2px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);color:var(--color-text-white);font-family:var(--font-body);font-size:16px;line-height:1.3;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.ta-text-input::placeholder{color:var(--color-text-neon-muted);opacity:.55}.ta-text-input:focus{outline:none;border-color:var(--color-accent-primary);box-shadow:0 0 0 3px #ff2d6a33}.ta-input-ack{margin-top:2px;text-align:center;font-family:var(--font-body);font-size:12px;color:var(--color-success-neon)}.ta-input-ack.hidden{display:none}#reveal-view .reveal-container--duel{position:relative;overflow:hidden;isolation:isolate}#reveal-view .reveal-backdrop{position:absolute;top:0;left:0;right:0;height:340px;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(46px) saturate(1.15);transform:scale(1.15);transform-origin:top center;opacity:.5;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 28%,transparent 70%);mask-image:linear-gradient(to bottom,#000 0%,#000 28%,transparent 70%)}#reveal-view .reveal-backdrop--synthetic{background-image:radial-gradient(circle at 28% 22%,#a82054f2,#a8205400 42%),radial-gradient(circle at 78% 14%,#601c96e6,#601c9600 46%),radial-gradient(circle at 18% 82%,#222878e6,#22287800 50%),conic-gradient(from 210deg at 52% 48%,#1a1038,#4a1240 70deg,#7a1e3c 130deg,#2a1454 200deg,#131642,#1a1038 360deg);filter:blur(54px) saturate(1.25)}#reveal-view .reveal-scrim{position:absolute;top:0;left:0;right:0;height:380px;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,18,.78) 0%,rgba(10,10,18,.88) 55%,var(--color-bg-primary) 100%)}#reveal-view .reveal-scrim:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 320px 360px at 50% 24%,#00f5ff21,#00f5ff00 62%)}#reveal-view .reveal-container--duel>*:not(.reveal-backdrop):not(.reveal-scrim):not(.confetti-canvas){position:relative;z-index:1}@media(prefers-reduced-motion:no-preference){#reveal-view .reveal-backdrop{transition:background-image .4s ease}}#reveal-view .song-strip,#reveal-view .score-row,#reveal-view .card-section,#reveal-view .duel-ticket{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 10px 30px #00000059;border-radius:var(--radius-lg)}#reveal-view .card-section:hover{background:#ffffff14;border-color:#ffffff29}#reveal-view .reveal-header-v2{margin-bottom:var(--space-sm)}#reveal-view .song-strip{padding:var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm)}#reveal-view .song-strip-cover{box-shadow:0 2px 10px #00000080;border:1px solid rgba(255,255,255,.15)}#reveal-view .duel-emotion{font-size:30px;letter-spacing:.04em;margin-bottom:var(--space-sm);text-shadow:0 4px 18px rgba(0,0,0,.6)}#reveal-view .duel{padding:var(--space-md) var(--space-xs) var(--space-lg)}#reveal-view .duel-tickets{position:relative;display:flex;justify-content:center;align-items:stretch;gap:var(--space-md);padding-bottom:20px}#reveal-view .duel-ticket{flex:1 1 0;max-width:170px;padding:var(--space-md) var(--space-sm) var(--space-lg);text-align:center}#reveal-view .duel-ticket--you{transform:rotate(-3deg) translateY(4px);border-color:#ff2d6a59;box-shadow:0 14px 34px #00000073,0 0 24px #ff2d6a1f}#reveal-view .duel-ticket--truth{transform:rotate(3deg) translateY(4px);border-color:#00f5ff66;box-shadow:0 14px 34px #00000073,0 0 34px #00f5ff2e}#reveal-view .duel-ticket .duel-label{padding-bottom:var(--space-sm);margin:0 6px var(--space-sm);border-bottom:1.5px dashed rgba(255,255,255,.18)}#reveal-view .duel-ticket .duel-year{font-size:clamp(40px,13vw,54px)}#reveal-view .duel-ticket--you .duel-year.mine{color:var(--color-accent-primary);text-shadow:0 0 18px rgba(255,45,106,.45)}#reveal-view .duel-ticket--truth .duel-year.correct{color:var(--color-accent-secondary);text-shadow:0 0 14px rgba(0,245,255,.9),0 0 38px rgba(0,245,255,.45)}#reveal-view .duel-gap{position:absolute;left:50%;bottom:0;transform:translate(-50%);flex-direction:row;align-items:baseline;gap:5px;min-width:0;padding:6px 16px;border-radius:var(--radius-full);background:#ff660029;border:1px solid rgba(255,102,0,.55);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 6px 18px #00000080,0 0 16px #f603;white-space:nowrap;z-index:3}#reveal-view .duel-gap-x{font-size:var(--font-size-md);color:var(--color-warning-alt);opacity:.9}#reveal-view .duel-gap-n{font-size:var(--font-size-lg);color:var(--color-warning-alt);text-shadow:none}#reveal-view .duel-gap-unit{margin-top:0;font-size:10px;color:var(--color-warning-alt)}#reveal-view .duel-gap--exact{background:#39ff1429;border-color:#39ff148c;box-shadow:0 6px 18px #00000080,0 0 16px #39ff1438}#reveal-view .duel-gap--exact .duel-gap-x,#reveal-view .duel-gap--exact .duel-gap-n,#reveal-view .duel-gap--exact .duel-gap-unit{color:var(--color-success-neon)}#reveal-view .duel-gap--wrong{background:#ff004024;border-color:#ff004080;box-shadow:0 6px 18px #00000080,0 0 16px #ff004033}#reveal-view .duel-gap--wrong .duel-gap-x,#reveal-view .duel-gap--wrong .duel-gap-n,#reveal-view .duel-gap--wrong .duel-gap-unit{color:var(--color-error-neon)}#reveal-view .score-row{border-color:#ffffff1f;box-shadow:0 10px 30px #00000059}#reveal-view .score-row-pts{color:var(--color-success-neon);text-shadow:0 0 16px rgba(57,255,20,.5);font-size:32px}#reveal-view .ta-vote-card,#reveal-view .ta-outcome-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}#reveal-view .next-round-btn{background:linear-gradient(135deg,#ff2d6a,#ff4f86);border-radius:var(--radius-full);box-shadow:0 8px 24px #ff2d6a73,0 0 18px #ff2d6a4d}#reveal-view .next-round-btn:hover{background:linear-gradient(135deg,#ff4f86,#ff2d6a)}#reveal-view .next-round-btn.is-final{background:linear-gradient(135deg,#39ff14,#00f5ff);color:var(--color-bg-primary)}#reveal-view .invite-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-full)}#reveal-view .reveal-admin-buttons{align-items:stretch}#reveal-view .reveal-admin-buttons .invite-btn,#reveal-view .reveal-admin-buttons .next-round-btn{flex:1 1 0;min-width:0;max-width:260px;min-height:56px;padding:12px 20px;font-size:var(--font-size-md);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);text-align:center}#reveal-view #reveal-leaderboard-list{display:flex;flex-direction:column;gap:8px;max-height:none;overflow:visible}#reveal-view .rstand-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#ffffff08;border:1px solid rgba(255,255,255,.06)}#reveal-view .rstand-row--you{border:1px solid var(--color-accent-primary);background:#ff2d6a0f;box-shadow:0 0 16px #ff2d6a38}#reveal-view .rstand-row--taper1{opacity:.85}#reveal-view .rstand-row--taper2{opacity:.68}#reveal-view .rstand-rankcell{display:flex;flex-direction:column;align-items:center;width:26px;flex-shrink:0}#reveal-view .rstand-rank{font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1;color:var(--color-text-white)}#reveal-view .rstand-row--taper1 .rstand-rank,#reveal-view .rstand-row--taper2 .rstand-rank{font-size:18px}#reveal-view .rstand-move{font-size:10px;font-weight:700;line-height:1;margin-top:3px}#reveal-view .rstand-move--up{color:var(--color-success-neon)}#reveal-view .rstand-move--down{color:var(--color-error-neon)}#reveal-view .rstand-move--flat{color:var(--color-text-neon-muted)}#reveal-view .rstand-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--color-text-white);text-shadow:0 1px 2px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15)}#reveal-view .rstand-ident{flex:1;min-width:0}#reveal-view .rstand-name{font-family:var(--font-body);font-weight:700;font-size:15px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;color:var(--color-text-white)}#reveal-view .rstand-you{font-family:var(--font-display);font-weight:800;font-size:9px;letter-spacing:.06em;color:var(--color-accent-primary);background:#ff2d6a26;border:1px solid rgba(255,45,106,.4);border-radius:6px;padding:2px 5px;line-height:1;flex-shrink:0}#reveal-view .rstand-guess{font-size:11px;font-weight:500;color:var(--color-text-neon-muted);line-height:1.2;margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#reveal-view .rstand-guess .rstand-exact{color:var(--color-success-neon);font-weight:600}#reveal-view .rstand-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}#reveal-view .rstand-chip{font-size:10px;font-weight:600;color:var(--color-text-neon-muted);background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:2px 7px;line-height:1.4;white-space:nowrap}#reveal-view .rstand-chip--fire{color:var(--color-warning-alt);border-color:#ff66004d;background:#ff660014}#reveal-view .rstand-chip--steal{color:var(--color-success-neon);border-color:#39ff1447;background:#39ff1412}#reveal-view .rstand-score{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;margin-left:4px}#reveal-view .rstand-total{font-family:var(--font-display);font-weight:900;font-size:22px;line-height:1;color:var(--color-text-white);letter-spacing:-.01em}#reveal-view .rstand-row--taper1 .rstand-total{font-size:20px}#reveal-view .rstand-row--taper2 .rstand-total{font-size:19px}#reveal-view .rstand-delta{font-family:var(--font-body);font-weight:700;font-size:12px;line-height:1;margin-top:4px;color:var(--color-success-neon)}#reveal-view .rstand-delta--zero{color:var(--color-text-neon-muted)}#reveal-view .song-strip{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}#reveal-view .song-strip-main{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm)}#reveal-view .artist-guess-row{display:flex;align-items:center;gap:8px;padding:9px var(--space-md) 9px var(--space-sm);border-top:1px solid rgba(255,255,255,.08)}#reveal-view .artist-guess-row.hidden{display:none}#reveal-view .artist-guess-ic{font-size:14px;flex-shrink:0}#reveal-view .artist-guess-name{font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--color-text-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}#reveal-view .artist-reveal-winner{margin-left:auto;flex-shrink:0;font-family:var(--font-body);font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--radius-full);white-space:nowrap}#reveal-view .artist-reveal-winner.hidden{display:none}#reveal-view .artist-reveal-winner.is-you,#reveal-view .artist-reveal-winner.is-other{color:var(--color-success-neon);background:#39ff141f;border:1px solid rgba(57,255,20,.4)}#reveal-view .artist-reveal-winner.is-you{box-shadow:0 0 12px #39ff1433}#reveal-view .artist-reveal-winner.artist-reveal-no-winner{color:var(--color-text-neon-muted);background:#ffffff0f;border:1px solid rgba(255,255,255,.12)}#reveal-view #fun-fact-container .section-content-padded{display:flex;flex-direction:column;gap:11px}#reveal-view .song-rich-info .song-badges-row{display:flex;gap:8px}#reveal-view .song-rich-info .song-badge{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:11px 6px;border-radius:12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);font-family:var(--font-body);font-size:11px;font-weight:700;line-height:1.2;text-align:center;white-space:normal}#reveal-view .song-rich-info .song-badge .song-badge-icon{font-size:20px}#reveal-view .song-rich-info .song-badges-more{flex:0 0 auto;align-self:center;font-size:11px;color:var(--color-text-neon-muted)}#reveal-view #fun-fact .fun-fact-text,#reveal-view .fun-fact-text{font-size:12px;line-height:1.4;color:var(--color-text-neon-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.playlist-tabs{display:flex;gap:var(--space-lg);border-bottom:1px solid var(--color-border-neon);margin-bottom:var(--space-md)}.playlist-tab{appearance:none;background:none;border:none;padding:10px 2px;margin-bottom:-1px;font:inherit;font-weight:700;font-size:.95rem;color:var(--color-text-neon-muted);cursor:pointer;border-bottom:2px solid transparent;transition:color var(--transition-fast),border-color var(--transition-fast)}.playlist-tab:hover{color:var(--color-text-white)}.playlist-tab.active{color:var(--color-accent-secondary);border-bottom-color:var(--color-accent-secondary)}.playlist-panel.hidden{display:none}.mix-card{background:var(--color-surface-dark);border:1px solid var(--color-border-neon);border-radius:var(--radius-lg);padding:var(--space-lg)}.mix-card-head{display:flex;align-items:center;gap:var(--space-sm)}.mix-card-icon{font-size:1.25rem}.mix-card-title{margin:0;font-size:1.25rem;font-weight:800;color:var(--color-text-white)}.mix-card-sub{margin:6px 0 var(--space-lg);color:var(--color-text-neon-muted);font-size:.9rem}.mix-chip-cloud{display:flex;flex-direction:column;gap:var(--space-md)}.mix-chip-row{display:flex;flex-direction:column;gap:8px}.mix-chip-rowlabel{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-neon-muted)}.mix-chip-group{display:flex;flex-wrap:wrap;gap:8px}.mix-chip{appearance:none;padding:6px 14px;border-radius:var(--radius-full);border:1px solid var(--color-border-neon);background:#ffffff0a;color:var(--color-text-neon-muted);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.mix-chip:hover{border-color:#ffffff4d;color:var(--color-text-white)}.mix-chip-group[data-accent=cyan] .mix-chip.active{background:#00f5ff26;border-color:var(--color-accent-secondary);color:var(--color-accent-secondary)}.mix-chip-group[data-accent=pink] .mix-chip.active{background:#ff2d6a26;border-color:var(--color-accent-primary);color:var(--color-accent-primary)}.mix-chip-group[data-accent=indigo] .mix-chip.active{background:#6366f12e;border-color:var(--color-accent-brand);color:#a5b4fc}.mix-empty{color:var(--color-text-neon-muted);font-size:.9rem;margin:0}.mix-divider{height:1px;background:var(--color-border-neon);margin:var(--space-lg) 0}.mix-count-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}.mix-count-label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-neon-muted)}.mix-segmented{display:inline-flex;padding:4px;gap:4px;background:#ffffff0d;border:1px solid var(--color-border-neon);border-radius:10px}.mix-seg{appearance:none;min-width:56px;padding:8px 14px;border:none;border-radius:7px;background:transparent;color:var(--color-text-neon-muted);font:inherit;font-weight:700;cursor:pointer;transition:all var(--transition-fast)}.mix-seg:hover{color:var(--color-text-white)}.mix-seg.active{background:var(--color-accent-brand);color:var(--color-text-white);box-shadow:0 0 14px #6366f180}.mix-preview{display:flex;align-items:center;gap:10px;margin:var(--space-md) 0 var(--space-lg);padding:12px 16px;border-radius:var(--radius-md);background:#00f5ff0f;border:1px solid rgba(0,245,255,.15);color:var(--color-text-white);font-size:.9rem}.mix-preview-dot{width:8px;height:8px;border-radius:50%;background:#1ed760;box-shadow:0 0 8px #1ed760cc;flex-shrink:0}.mix-actions{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap}.mix-actions .btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.mix-save-label{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--color-text-neon-muted);cursor:pointer}#mix-error{margin-top:var(--space-md)}.mix-error-detail{display:block;margin-top:var(--space-xs);font-size:var(--font-size-sm);line-height:1.35;color:var(--color-text-light);word-break:break-word}.mix-tracklist-row{margin:var(--space-sm) 0}.mix-tracklist-row .btn-sm{font-size:.85rem;padding:6px 12px}.mix-tracklist{margin:var(--space-sm) 0 var(--space-md);max-height:280px;overflow-y:auto;border-radius:var(--radius-md);border:1px solid rgba(0,245,255,.15);background:#00f5ff0a}.mix-tracklist.hidden{display:none}.mix-tracklist-head{margin:0;padding:10px 14px;font-size:.8rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--color-text-neon-muted);border-bottom:1px solid rgba(0,245,255,.12);position:sticky;top:0;background:#0a0c18eb}.mix-tracklist-empty{margin:0;padding:14px;font-size:.9rem;color:var(--color-text-neon-muted)}.mix-track-list{list-style:none;margin:0;padding:4px 0;counter-reset:mix-track}.mix-track{display:flex;align-items:baseline;gap:8px;padding:6px 14px;font-size:.88rem;color:var(--color-text-white)}.mix-track:before{counter-increment:mix-track;content:counter(mix-track);flex-shrink:0;min-width:1.8em;text-align:right;font-variant-numeric:tabular-nums;color:var(--color-text-neon-muted);opacity:.7}.mix-track-title{font-weight:500}.mix-track-artist{color:var(--color-text-neon-muted)}.mix-track-artist:before{content:"\2014 "}.mix-track-year{margin-left:auto;flex-shrink:0;color:var(--color-text-neon-muted);font-variant-numeric:tabular-nums;opacity:.7}.beatify-toast-container{position:fixed;top:var(--space-md);left:50%;transform:translate(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);width:min(92vw,440px);pointer-events:none}.beatify-toast{pointer-events:auto;width:100%;display:flex;align-items:flex-start;gap:var(--space-sm);position:relative;overflow:hidden;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-lg);background:#141422f5;border:1px solid var(--color-error-neon);box-shadow:0 0 20px #ff004073,0 8px 32px #00000073;color:var(--color-text-white);font-family:var(--font-body);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);opacity:0;transform:translateY(-12px);transition:opacity var(--transition-normal),transform var(--transition-normal)}.beatify-toast--in{opacity:1;transform:translateY(0)}.beatify-toast--leaving{opacity:0;transform:translateY(-12px)}.beatify-toast--info{border-color:var(--color-accent-secondary);box-shadow:0 0 20px #00f5ff66,0 8px 32px #00000073}.beatify-toast--success{border-color:var(--color-success-neon);box-shadow:0 0 20px #39ff1466,0 8px 32px #00000073}.beatify-toast-body{display:flex;align-items:flex-start;gap:var(--space-sm);flex:1 1 auto;min-width:0}.beatify-toast-icon{font-size:var(--font-size-lg);line-height:1.3;flex-shrink:0}.beatify-toast-text{line-height:1.35;word-break:break-word}.beatify-toast-close{flex-shrink:0;background:none;border:none;color:var(--color-text-neon-muted);font-size:var(--font-size-xl);line-height:1;cursor:pointer;padding:0 var(--space-xs);transition:color var(--transition-fast)}.beatify-toast-close:hover{color:var(--color-text-white)}.beatify-toast-progress{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left center;background:var(--color-error-neon);box-shadow:0 0 8px var(--color-error-neon);animation:beatify-toast-drain linear forwards}.beatify-toast--info .beatify-toast-progress{background:var(--color-accent-secondary);box-shadow:0 0 8px var(--color-accent-secondary)}.beatify-toast--success .beatify-toast-progress{background:var(--color-success-neon);box-shadow:0 0 8px var(--color-success-neon)}@keyframes beatify-toast-drain{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.beatify-banner{display:flex;flex-basis:100%;align-items:flex-start;gap:var(--space-sm);margin-bottom:var(--space-md);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-lg);background:#ff004014;border:1px solid var(--color-error-neon);box-shadow:inset 0 0 16px #ff00401f;color:var(--color-text-white);font-family:var(--font-body);font-size:var(--font-size-base);text-align:left}.beatify-banner--warning{background:#f59e0b1a;border-color:var(--color-warning);box-shadow:inset 0 0 16px #f59e0b1f}.beatify-banner--info{background:#00f5ff14;border-color:var(--color-accent-secondary);box-shadow:inset 0 0 16px #00f5ff1f}.beatify-banner-icon{font-size:var(--font-size-lg);line-height:1.2;flex-shrink:0}.beatify-banner-content{flex:1 1 auto;min-width:0}.beatify-banner-title{font-family:var(--font-display);font-weight:var(--font-weight-bold);margin-bottom:2px;color:var(--color-error-neon)}.beatify-banner--warning .beatify-banner-title{color:var(--color-warning)}.beatify-banner--info .beatify-banner-title{color:var(--color-accent-secondary)}.beatify-banner-text{line-height:1.4;color:var(--color-text-neon-muted);word-break:break-word}.beatify-banner-detail{margin-top:var(--space-xs);font-size:var(--font-size-sm);line-height:1.35;color:var(--color-text-light);word-break:break-word}.beatify-banner-action{margin-top:var(--space-xs);background:none;border:1px solid currentColor;border-radius:var(--radius-sm);color:var(--color-error-neon);font-family:var(--font-body);font-size:var(--font-size-sm);line-height:1.2;padding:6px var(--space-sm);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.beatify-banner-action:hover{background:var(--color-error-neon);color:var(--color-bg-primary)}.beatify-banner--warning .beatify-banner-action{color:var(--color-warning)}.beatify-banner--warning .beatify-banner-action:hover{background:var(--color-warning)}.beatify-banner--info .beatify-banner-action{color:var(--color-accent-secondary)}.beatify-banner--info .beatify-banner-action:hover{background:var(--color-accent-secondary)}.beatify-banner-close{flex-shrink:0;background:none;border:none;color:var(--color-text-neon-muted);font-size:var(--font-size-xl);line-height:1;cursor:pointer;padding:0 var(--space-xs);transition:color var(--transition-fast)}.beatify-banner-close:hover{color:var(--color-text-white)}@media(prefers-reduced-motion:reduce){.beatify-toast{transition:none;opacity:1;transform:none}.beatify-toast-progress{animation:none}}.steal-target-row{display:flex;align-items:center;gap:var(--space-sm);text-align:left}.steal-target-rank{flex-shrink:0;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-dark-surface);border:1px solid var(--color-border-neon);font-family:var(--font-display);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);color:var(--color-text-neon-muted)}.steal-target-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--font-weight-semibold)}.steal-target-score{flex-shrink:0;font-family:var(--font-display);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums;color:var(--color-accent-secondary);text-shadow:0 0 8px rgba(0,245,255,.5)}.steal-target-crown{flex-shrink:0;font-size:var(--font-size-md);line-height:1}.steal-target-row--leader{border-color:var(--color-warning);box-shadow:0 0 14px #f59e0b59,inset 0 0 10px #f59e0b1f}.steal-target-row--leader .steal-target-rank{border-color:var(--color-warning);color:var(--color-warning);box-shadow:0 0 8px #f59e0b66}.steal-target-row--leader .steal-target-score{color:var(--color-warning);text-shadow:0 0 8px rgba(245,158,11,.5)}.dotaxis-legend-acc{display:inline-flex;align-items:center;gap:3px;margin-left:4px;padding:1px 6px;border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border:1px solid currentColor;white-space:nowrap}.dotaxis-legend-acc-glyph{font-size:.95em;line-height:1}.dotaxis-legend-acc--exact{color:var(--color-accent-secondary)}.dotaxis-legend-acc--near{color:var(--color-warning)}.dotaxis-legend-acc--off{color:var(--color-text-neon-muted)}.player-tile-away{display:inline-flex;align-items:center;gap:3px}.player-tile-away-glyph{font-size:.9em;line-height:1}.timer-neon{position:relative}.timer-neon-ring{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);transform:rotate(-90deg);pointer-events:none}.timer-neon-ring-bg{fill:none;stroke:#ffffff1f;stroke-width:4}.timer-neon-ring-fg{fill:none;stroke:var(--color-accent-secondary);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(0,245,255,.6));transition:stroke-dashoffset 1s linear,stroke var(--transition-normal)}.timer-neon--warn .timer-neon-ring-fg,.timer-neon-ring--warn .timer-neon-ring-fg{stroke:var(--color-warning);filter:drop-shadow(0 0 6px rgba(245,158,11,.7))}.timer-neon-ring--critical .timer-neon-ring-fg{stroke:var(--color-error-neon);filter:drop-shadow(0 0 7px rgba(255,0,64,.8))}@media(prefers-reduced-motion:reduce){.timer-neon-ring-fg{transition:none}.arc-chip--elim{color:var(--color-error-neon);background:#ff00401f;border:1px solid rgba(255,0,64,.5);text-transform:uppercase}.sd-live-toggle{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:var(--radius-md);background:var(--color-bg-surface);border:1px solid rgba(255,255,255,.12);font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--color-text-white);cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.sd-live-toggle:disabled{opacity:.4;cursor:not-allowed}.sd-live-toggle.is-on{border-color:var(--color-accent-primary);background:#ff2d6a14;box-shadow:var(--glow-primary)}.sd-live-toggle__switch{position:relative;width:30px;height:17px;border-radius:var(--radius-full);background:#ffffff26;flex:none}.sd-live-toggle.is-on .sd-live-toggle__switch{background:var(--color-accent-primary)}.sd-live-toggle__switch:after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left var(--transition-fast)}.sd-live-toggle.is-on .sd-live-toggle__switch:after{left:15px}.eliminated-view{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--space-sm);min-height:60vh;padding:var(--space-xl) var(--space-md)}.eliminated-orb{width:120px;height:120px;border-radius:var(--radius-full);overflow:hidden;filter:grayscale(1) brightness(.5);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2a2540,#16131f);margin-bottom:var(--space-md);position:relative}.eliminated-orb img{width:100%;height:100%;object-fit:cover}.eliminated-skull{font-size:46px;position:absolute}.eliminated-title{font-family:var(--font-display);font-weight:900;font-size:var(--font-size-4xl);color:var(--color-text-white);letter-spacing:-.02em}.eliminated-sub{color:var(--color-text-neon-muted);font-size:var(--font-size-base)}.eliminated-hint{color:var(--color-text-dim);font-size:var(--font-size-sm);margin-top:var(--space-md)}.cut-line{position:relative;height:0;border-top:2px solid var(--color-accent-primary);box-shadow:0 0 12px #ff2d6ab3;margin:var(--space-md) 0}.cut-line__label{position:absolute;top:-9px;left:50%;transform:translate(-50%);background:var(--color-bg-primary);padding:0 10px;font-family:var(--font-body);font-size:9px;font-weight:700;letter-spacing:.15em;color:var(--color-accent-primary)}.player-indicator.is-eliminated,.leaderboard-entry.is-eliminated{opacity:.45}.player-out-badge{font-size:10px;font-weight:700;color:var(--color-text-dim);letter-spacing:.04em}.sd-out-overlay{position:fixed;inset:0;z-index:900;display:none;flex-direction:column;align-items:center;justify-content:center;background:#06060cf5}.sd-out-overlay.show{display:flex;animation:sd-out-in var(--transition-slow) ease-out}.sd-out__word{font-family:var(--font-display);font-weight:900;font-size:clamp(120px,26vw,360px);line-height:.85;color:var(--color-error-neon);text-shadow:0 0 40px rgba(255,0,64,.7)}.sd-out__name{display:flex;align-items:center;gap:14px;margin-top:var(--space-md);font-family:var(--font-display);font-weight:900;font-size:var(--font-size-4xl);color:var(--color-text-white)}.sd-out__skull{font-size:40px}@keyframes sd-out-in{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.sd-final-banner{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:var(--radius-full);font-family:var(--font-display);font-weight:900;letter-spacing:.06em;color:var(--color-accent-primary);background:#ff2d6a1f;border:1px solid rgba(255,45,106,.5);box-shadow:0 0 16px #ff2d6a4d}.superlative-card--last_one_standing{box-shadow:0 0 18px #ff2d6a4d;border-color:#ff2d6a66}.sd-last-standing{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);text-align:center;margin-bottom:var(--space-lg)}.sd-last-standing__trophy{font-size:40px}.sd-last-standing__headline{font-family:var(--font-display);font-weight:900;font-size:var(--font-size-hero);letter-spacing:-.02em;background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 40px rgba(255,45,106,.5)}.sd-last-standing__winner{font-family:var(--font-body);font-weight:700;font-size:var(--font-size-xl);color:var(--color-text-white)}.sd-last-standing__sub{font-family:var(--font-body);font-weight:500;font-size:var(--font-size-sm);color:var(--color-text-neon-muted)}.sd-out-overlay.show{animation:none}} /*# sourceMappingURL=styles.min.css.map */ diff --git a/custom_components/beatify/www/css/styles.min.css.map b/custom_components/beatify/www/css/styles.min.css.map index 0b4a0d97..c85199f0 100644 --- a/custom_components/beatify/www/css/styles.min.css.map +++ b/custom_components/beatify/www/css/styles.min.css.map @@ -1,7 +1,7 @@ { "version": 3, "sources": ["styles.css"], - "sourcesContent": ["/* Beatify - Mobile-first styles */\n\n/* ==========================================\n Design System Tokens (Story 9.1)\n ========================================== */\n\n:root {\n /* Color Tokens - Background */\n --color-bg-primary: #0a0a12;\n --color-bg-surface: rgba(255, 255, 255, 0.05);\n --color-bg-light: #f5f5f5;\n --color-bg-white: #ffffff;\n --color-bg-card: #f9fafb;\n --color-bg-card-alt: #f3f4f6;\n\n /* Color Tokens - Accent */\n --color-accent-primary: #ff2d6a;\n --color-accent-secondary: #00f5ff;\n --color-accent-brand: #6366f1;\n --color-accent-brand-hover: #4f46e5;\n --color-accent-blue: #3b82f6;\n --color-accent-blue-hover: #2563eb;\n\n /* Color Tokens - Semantic */\n --color-success: #10b981;\n --color-success-hover: #059669;\n --color-success-light: #d1fae5;\n --color-success-alt: #22c55e;\n --color-success-neon: #39ff14;\n --color-warning: #f59e0b;\n --color-warning-dark: #d97706;\n --color-warning-light: #fef3c7;\n --color-warning-alt: #ff6600;\n --color-error: #ef4444;\n --color-error-dark: #dc2626;\n --color-error-light: #fee2e2;\n --color-error-neon: #ff0040;\n\n /* Purple colors for steal power-up (Story 15.3) */\n --color-purple-primary: #8b5cf6;\n --color-purple-secondary: #7c3aed;\n --color-neon-purple: #9d4edd; /* Analytics accent color */\n\n /* Color Tokens - Badge Backgrounds (Story 14.1) */\n --color-success-bg: rgba(16, 185, 129, 0.15);\n --color-accent-brand-bg: rgba(99, 102, 241, 0.15);\n --color-error-bg: rgba(239, 68, 68, 0.15);\n\n /* Color Tokens - Text */\n --color-text-primary: #1f2937;\n --color-text-secondary: #374151;\n --color-text-muted: #6b7280;\n --color-text-light: #9ca3af;\n --color-text-white: #ffffff;\n --color-text-dark: #1a1a1a;\n --color-text-heading: #444444;\n --color-text-neon-muted: #b3b3c2;\n\n /* Color Tokens - Border */\n --color-border-light: #e5e7eb;\n --color-border-medium: #d1d5db;\n --color-border-dark: #333333;\n --color-border-neon: rgba(255, 255, 255, 0.1);\n\n /* Dark Theme Surface Colors */\n --color-dark-surface: rgba(255, 255, 255, 0.05);\n --color-dark-surface-hover: rgba(255, 255, 255, 0.08);\n --color-dark-card: rgba(255, 255, 255, 0.03);\n --color-surface-dark: #1a1a2e; /* Card background in dark mode */\n\n /* Spacing Tokens */\n --space-xs: 4px;\n --space-sm: 8px;\n --space-md: 16px;\n --space-lg: 24px;\n --space-xl: 32px;\n --space-2xl: 48px;\n\n /* Typography Tokens */\n --font-display: 'Outfit', system-ui, sans-serif;\n --font-body: 'Inter', system-ui, sans-serif;\n --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n --font-mono: monospace;\n\n --font-size-xs: 10px;\n --font-size-sm: 12px;\n --font-size-base: 14px;\n --font-size-md: 16px;\n --font-size-lg: 18px;\n --font-size-xl: 20px;\n --font-size-2xl: 24px;\n --font-size-3xl: 28px;\n --font-size-4xl: 32px;\n --font-size-year: 56px;\n --font-size-timer: 64px;\n --font-size-hero: 72px;\n\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-extrabold: 800;\n\n /* Effect Tokens - Glow */\n --glow-primary: 0 0 20px var(--color-accent-primary);\n --glow-secondary: 0 0 20px var(--color-accent-secondary);\n --glow-success: 0 0 20px var(--color-success-neon);\n --glow-warning: 0 0 20px var(--color-warning);\n --glow-error: 0 0 20px var(--color-error);\n\n /* Effect Tokens - Shadow */\n --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);\n --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);\n --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);\n --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.15);\n\n /* Border Radius Tokens */\n --radius-sm: 4px;\n --radius-md: 8px;\n --radius-lg: 12px;\n --radius-xl: 16px;\n --radius-2xl: 20px;\n --radius-full: 9999px;\n\n /* Transition Tokens */\n --transition-fast: 150ms ease;\n --transition-normal: 300ms ease;\n --transition-slow: 500ms ease;\n\n /* Z-Index Tokens */\n --z-control-bar: 100;\n --z-reaction-bar: 101; /* Story 18.9: Above control bar */\n --z-modal: 1000;\n --z-overlay: 1100;\n --z-toast: 1200; /* #1663 item 1: neon top-toast \u2014 above overlays/modals */\n}\n\n/* ==========================================\n Base Styles\n ========================================== */\n\n/* Base reset */\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n font-family: var(--font-system);\n background: var(--color-bg-light);\n color: var(--color-text-secondary);\n line-height: 1.5;\n padding: var(--space-sm);\n min-height: 100vh;\n /* #865: lock iOS overscroll-bounce so the admin lobby (and any other\n short view) doesn't drag freely in all directions when the user\n touches the background. */\n overscroll-behavior: none;\n}\n\n/* ==========================================\n Brand Identity (Story 9.8)\n ========================================== */\n\n/* Wordmark styles */\n.wordmark {\n font-family: 'Outfit', var(--font-system);\n font-weight: 900;\n font-size: var(--font-size-hero);\n letter-spacing: -0.02em;\n line-height: 1;\n}\n\n.wordmark-beat {\n color: var(--color-text-white);\n}\n\n/* Light theme wordmark (admin page) */\nbody:not(.theme-dark) .wordmark-beat {\n color: var(--color-text-primary);\n}\n\n.wordmark-gradient {\n background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n color: transparent;\n}\n\n.wordmark-hero {\n text-shadow: 0 0 40px rgba(255, 45, 106, 0.5);\n}\n\n/* Logo pulse animation for loading state */\n.logo-loading {\n animation: logo-pulse 2s ease-in-out infinite;\n}\n\n@keyframes logo-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n}\n\n/* Reduced motion support for logo */\n@media (prefers-reduced-motion: reduce) {\n .logo-loading {\n animation: none;\n }\n}\n\n/* ============================================================\n Cold-start vinyl loader (#1287)\n Animated vinyl disc + hype copy bridging the ~10-15s\n Music-Assistant speaker-connect before round 1. Shared by\n player.html (#starting-view) and dashboard.html\n (#dashboard-starting).\n ============================================================ */\n/* Outer: full-height column box that centers its single inner row both axes.\n Mirrors the proven .dashboard-centered pattern (no explicit width \u2192 stretches\n via the parent's align-items:stretch) so the group is always viewport-centered\n on the TV/dashboard and the phone. */\n.vinyl-starting {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 24px;\n box-sizing: border-box;\n}\n\n/* Inner: the disc-beside-copy row. Caps its own width and centers itself; wraps\n to stacked (disc over copy) on narrow phones. */\n.vinyl-row {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: clamp(20px, 5vw, 56px);\n max-width: 100%;\n}\n\n.vinyl-loader {\n flex: 0 0 auto;\n width: clamp(130px, 28vw, 260px);\n height: clamp(130px, 28vw, 260px);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n /* Soft pink/cyan glow halo behind the disc */\n background: radial-gradient(circle at center,\n rgba(255, 45, 106, 0.18) 0%,\n rgba(99, 102, 241, 0.10) 45%,\n transparent 70%);\n}\n\n.vinyl-disc {\n position: relative;\n width: 78%;\n height: 78%;\n border-radius: 50%;\n /* Conic gradient = the spinning record */\n background: conic-gradient(from 0deg,\n var(--color-accent-primary),\n var(--color-accent-brand),\n var(--color-accent-secondary),\n var(--color-accent-brand),\n var(--color-accent-primary));\n box-shadow:\n 0 0 40px rgba(255, 45, 106, 0.35),\n 0 0 80px rgba(0, 245, 255, 0.18),\n inset 0 0 30px rgba(0, 0, 0, 0.45);\n animation: vinyl-spin 3s linear infinite;\n}\n\n.vinyl-ring {\n position: absolute;\n top: 18%;\n left: 18%;\n width: 64%;\n height: 64%;\n border-radius: 50%;\n border: 1.5px dashed rgba(255, 255, 255, 0.25);\n}\n\n.vinyl-hole {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 14%;\n height: 14%;\n border-radius: 50%;\n background: var(--color-bg-primary);\n transform: translate(-50%, -50%);\n box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.4);\n}\n\n.vinyl-copy {\n /* min-width:0 + width:min(100%,460px) keeps the copy inside its flex line\n on every surface: beside the disc on landscape (TV/dashboard) and on its\n own line when wrapped on a narrow phone \u2014 the text re-wraps, it never\n overflows the viewport. */\n flex: 1 1 280px;\n min-width: 0;\n width: min(100%, 460px);\n max-width: 460px;\n text-align: left;\n}\n\n.vinyl-copy .vinyl-headline,\n.vinyl-copy .vinyl-sub,\n.vinyl-copy .wordmark-hero {\n overflow-wrap: break-word;\n}\n\n.vinyl-copy .wordmark-hero {\n font-size: clamp(2rem, 5vw, 3.25rem);\n margin: 0 0 0.5em;\n}\n\n.vinyl-headline {\n font-size: clamp(1.5rem, 4vw, 2.5rem);\n font-weight: 800;\n color: var(--color-text-white);\n margin: 0 0 0.4em;\n}\n\n.vinyl-sub {\n font-size: clamp(0.95rem, 2.2vw, 1.2rem);\n line-height: 1.5;\n color: var(--color-text-muted);\n margin: 0 0 1.2em;\n}\n\n.vinyl-dots {\n display: flex;\n gap: 12px;\n}\n\n.vinyl-dots span {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--color-accent-primary);\n opacity: 0.3;\n animation: vinyl-dot-pulse 1.4s ease-in-out infinite;\n}\n\n.vinyl-dots span:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.vinyl-dots span:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n@keyframes vinyl-spin {\n to { transform: rotate(360deg); }\n}\n\n@keyframes vinyl-dot-pulse {\n 0%, 100% { opacity: 0.3; transform: scale(1); }\n 40% { opacity: 1; transform: scale(1.25); }\n}\n\n/* Narrow / portrait (phone player): the row wraps to stacked, so center the\n copy under the disc and center the pulse dots \u2014 left-alignment only reads well\n in the landscape side-by-side layout. */\n@media (max-width: 640px) {\n .vinyl-copy { text-align: center; }\n .vinyl-dots { justify-content: center; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .vinyl-disc { animation: none; }\n .vinyl-dots span { animation: none; opacity: 0.7; }\n}\n\n/* Header */\nheader {\n margin-bottom: var(--space-lg);\n}\n\nheader h1 {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-dark);\n}\n\n/* Admin Header with Analytics Icon (Story 19.13) */\n.admin-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-md, 16px);\n}\n\n.admin-header h1 {\n margin: 0;\n}\n\n/* Player Header (centered, no analytics icon) */\n.player-header {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-md) var(--space-md) 0;\n}\n\n.player-header h1 {\n margin: 0;\n}\n\n/* Admin Main Content - Centered Layout (Story 19.13) */\n/* Scoped to admin-content to avoid affecting dashboard */\nbody.theme-dark main.admin-content {\n max-width: 800px;\n margin: 0 auto;\n padding: var(--space-md, 16px);\n}\n\n/* Analytics Icon Link (Story 19.13) */\n.analytics-icon-link {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n text-decoration: none;\n font-size: 1.5rem;\n transition: background-color 0.2s ease, transform 0.2s ease;\n}\n\nbody.theme-dark .analytics-icon-link {\n background: rgba(0, 245, 255, 0.1);\n}\n\nbody.theme-dark .analytics-icon-link:hover,\nbody.theme-dark .analytics-icon-link:focus {\n background: rgba(0, 245, 255, 0.2);\n transform: scale(1.1);\n outline: none;\n}\n\n/* Admin Header Actions wrapper (#226) */\n.admin-header-actions {\n display: flex;\n align-items: center;\n gap: var(--space-xs, 8px);\n}\n\n/* PWA Install Button (#226) */\n.pwa-install-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n border: none;\n background: rgba(0, 245, 255, 0.1);\n font-size: 1.5rem;\n cursor: pointer;\n transition: background-color 0.2s ease, transform 0.2s ease;\n padding: 0;\n}\n\n.pwa-install-btn:hover,\n.pwa-install-btn:focus {\n background: rgba(0, 245, 255, 0.2);\n transform: scale(1.1);\n outline: none;\n}\n\n/* Reset button (#777 follow-up \u2014 emergency escape hatch).\n Same 44px icon-button shape as the analytics + PWA install buttons,\n but neon-pink to signal \"destructive, last resort\". Stays subtle at\n rest so it doesn't read as a primary action. */\n.reset-icon-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n border: none;\n background: rgba(255, 45, 106, 0.1);\n color: var(--color-text-white);\n font-size: 1.5rem;\n cursor: pointer;\n padding: 0;\n transition: background-color 0.2s ease, transform 0.2s ease;\n}\n.reset-icon-btn:hover,\n.reset-icon-btn:focus {\n background: rgba(255, 45, 106, 0.25);\n transform: scale(1.1);\n outline: none;\n}\n\n/* PWA iOS Hint Modal (#226) */\n.pwa-ios-hint {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n display: flex;\n justify-content: center;\n padding: var(--space-md, 16px);\n animation: slideUp 0.3s ease;\n}\n\n.pwa-ios-hint.hidden {\n display: none;\n}\n\n.pwa-ios-hint-content {\n position: relative;\n background: var(--color-bg-elevated, #2a2a3e);\n border-radius: var(--radius-lg, 12px);\n padding: var(--space-md, 16px) var(--space-lg, 24px);\n color: var(--color-text, #fff);\n text-align: center;\n max-width: 340px;\n box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.3);\n}\n\n.pwa-ios-hint-close {\n position: absolute;\n top: 8px;\n right: 12px;\n background: none;\n border: none;\n color: var(--color-text, #fff);\n font-size: 1.4rem;\n cursor: pointer;\n opacity: 0.6;\n}\n\n.pwa-ios-hint-close:hover {\n opacity: 1;\n}\n\n.pwa-ios-share-icon {\n font-size: 1.2rem;\n}\n\n@keyframes slideUp {\n from { transform: translateY(100%); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}\n\n/* Sections */\n.status-section,\n.card-section {\n background: var(--color-bg-white);\n border-radius: var(--radius-lg);\n padding: var(--space-sm) var(--space-md);\n margin-bottom: var(--space-md);\n box-shadow: var(--shadow-sm);\n border: 1px solid transparent;\n transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;\n}\n\n.card-section:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n/* Section Headers with Icons (Story 19.13) */\n.card-section .section-header {\n display: flex;\n align-items: center;\n gap: var(--space-sm, 8px);\n margin-bottom: var(--space-sm);\n font-size: var(--font-size-md);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-heading);\n}\n\n.card-section .section-icon {\n font-size: 1.25rem;\n}\n\n.status-section h2,\n.card-section h2:not(.section-header) {\n font-size: var(--font-size-md);\n font-weight: var(--font-weight-semibold);\n margin-bottom: var(--space-sm);\n color: var(--color-text-heading);\n}\n\n/* Status indicators */\n.status-connected {\n color: var(--color-success-alt);\n font-weight: var(--font-weight-medium);\n}\n\n.status-error {\n color: var(--color-error);\n font-weight: var(--font-weight-medium);\n}\n\n.status-warning {\n color: var(--color-warning);\n font-weight: var(--font-weight-medium);\n}\n\n/* List items */\n.list-item {\n padding: var(--space-sm);\n border-bottom: 1px solid var(--color-border-light);\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-sm);\n transition: background-color 0.2s ease;\n}\n\n.list-item:last-child {\n border-bottom: none;\n}\n\n/* Dark mode list items (Story 19.13) */\nbody.theme-dark .list-item {\n border-bottom-color: var(--surface-border, #333);\n}\n\nbody.theme-dark .list-item:hover {\n background: rgba(157, 78, 221, 0.1);\n}\n\n.list-item .name {\n font-weight: var(--font-weight-medium);\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.list-item .meta {\n color: var(--color-text-muted);\n font-size: var(--font-size-base);\n flex-shrink: 0;\n}\n\n.list-item.is-invalid {\n background: var(--color-error-light);\n border-left: 3px solid var(--color-error);\n}\n\n/* Disabled playlist (no songs for selected provider) */\n.playlist-item.is-disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.playlist-item.is-disabled .checkbox-label {\n cursor: not-allowed;\n}\n\n.playlist-item.is-disabled .playlist-checkbox {\n cursor: not-allowed;\n}\n\n/* Playlist selection (Story 2.1) */\n.playlist-item.is-selectable {\n cursor: pointer;\n}\n\n/* Selected state for both playlists and media players */\n.playlist-item.is-selected,\n.media-player-item.is-selected {\n background: #eff6ff;\n border-left: 3px solid var(--color-accent-blue);\n}\n\n/* Dark mode selected state - neon styling (Story 19.13) */\nbody.theme-dark .playlist-item.is-selected,\nbody.theme-dark .media-player-item.is-selected {\n background: rgba(0, 245, 255, 0.1);\n border-left: 3px solid var(--color-accent-secondary);\n}\n\n/* Seasonal playlist suggestion chip (#1539, design option 2) \u2014\n highlighted first tile inside the playlist list. */\n.seasonal-suggestion {\n position: relative;\n margin-bottom: 12px;\n padding: 14px 16px;\n border-radius: 14px;\n background:\n linear-gradient(135deg, rgba(255, 45, 106, 0.14) 0%, rgba(99, 102, 241, 0.14) 100%),\n #12121c;\n border: 1px solid rgba(255, 45, 106, 0.45);\n box-shadow: 0 0 0 1px rgba(0, 245, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.35);\n}\n\n.seasonal-suggestion__badge {\n display: inline-block;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--color-accent-secondary, #00f5ff);\n background: rgba(0, 245, 255, 0.1);\n border: 1px solid rgba(0, 245, 255, 0.3);\n border-radius: 999px;\n padding: 3px 10px;\n margin-bottom: 10px;\n}\n\n.seasonal-suggestion__title {\n font-size: 16px;\n font-weight: 700;\n color: #fff;\n margin-bottom: 4px;\n}\n\n.seasonal-suggestion__reason {\n font-size: 13px;\n line-height: 1.4;\n color: rgba(255, 255, 255, 0.72);\n margin-bottom: 12px;\n}\n\n.seasonal-suggestion__add {\n /* inherits .btn .btn-primary; just ensure it sits inline-block at the bottom */\n display: inline-block;\n}\n\n.seasonal-suggestion__dismiss {\n position: absolute;\n top: 8px;\n right: 10px;\n width: 28px;\n height: 28px;\n line-height: 1;\n font-size: 20px;\n color: rgba(255, 255, 255, 0.6);\n background: transparent;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n}\n\n/* #1759: 44px tap target (visual stays 28px) so dismissing the banner doesn't\n risk hitting the banner CTA underneath. */\n.seasonal-suggestion__dismiss::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 44px;\n height: 44px;\n transform: translate(-50%, -50%);\n}\n\n.seasonal-suggestion__dismiss:hover {\n color: #fff;\n background: rgba(255, 255, 255, 0.08);\n}\n\n/* Light theme fallback (admin defaults to dark, but keep it legible if not). */\nbody:not(.theme-dark) .seasonal-suggestion {\n background:\n linear-gradient(135deg, rgba(255, 45, 106, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%),\n #fff;\n border: 1px solid rgba(255, 45, 106, 0.35);\n box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);\n}\n\nbody:not(.theme-dark) .seasonal-suggestion__title {\n color: #111;\n}\n\nbody:not(.theme-dark) .seasonal-suggestion__reason {\n color: #555;\n}\n\nbody:not(.theme-dark) .seasonal-suggestion__dismiss {\n color: #888;\n}\n\n/* Hide native checkbox, use row selection state */\n.playlist-checkbox {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n pointer-events: none;\n}\n\n.checkbox-label {\n display: flex;\n align-items: center;\n flex: 1;\n min-width: 0;\n cursor: pointer;\n padding-left: var(--space-xs);\n}\n\n.playlist-name {\n font-weight: var(--font-weight-medium);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.selection-summary {\n padding: var(--space-sm) var(--space-md);\n background: #f0fdf4;\n border-radius: var(--radius-md);\n margin-top: var(--space-sm);\n font-weight: var(--font-weight-medium);\n color: #166534;\n}\n\n/* Selection summary counts - neon styling (Story 19.13) */\n.selection-summary #selected-count,\n.selection-summary #total-songs {\n font-family: 'Outfit', sans-serif;\n font-weight: 700;\n}\n\n/* Dark mode selection summary */\nbody.theme-dark .selection-summary {\n background: rgba(0, 245, 255, 0.1);\n border: 1px solid var(--color-accent-secondary);\n color: var(--color-text-white);\n}\n\nbody.theme-dark .selection-summary #selected-count,\nbody.theme-dark .selection-summary #total-songs {\n color: var(--color-accent-secondary);\n font-size: 1.1em;\n}\n\n/* Media player selection (Story 2.2) */\n.media-player-item.is-selectable {\n cursor: pointer;\n}\n\n/* Hide native radio, use row selection state */\n.media-player-radio {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n pointer-events: none;\n}\n\n.radio-label {\n display: flex;\n align-items: center;\n flex: 1;\n min-width: 0;\n cursor: pointer;\n padding-left: var(--space-xs);\n}\n\n.player-name {\n font-weight: var(--font-weight-medium);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* State indicators */\n.state-dot {\n display: inline-block;\n width: var(--space-sm);\n height: var(--space-sm);\n border-radius: 50%;\n margin-right: 6px;\n}\n\n.state-dot.state-playing {\n background: var(--color-success-alt);\n}\n\n.state-dot.state-idle,\n.state-dot.state-paused,\n.state-dot.state-off {\n background: var(--color-text-light);\n}\n\n/* Buttons - Touch-friendly minimum 44x44px */\nbutton,\n.btn {\n min-width: 44px;\n min-height: 44px;\n padding: var(--space-sm) var(--space-lg);\n font-size: var(--font-size-md);\n font-weight: var(--font-weight-medium);\n border: none;\n border-radius: var(--radius-md);\n cursor: pointer;\n transition: background-color var(--transition-fast), opacity var(--transition-fast);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-sm);\n touch-action: manipulation;\n}\n\n.form-input {\n width: 100%;\n padding: var(--space-sm) var(--space-md);\n font-size: var(--font-size-sm);\n border: 1px solid var(--color-border-subtle);\n border-radius: var(--radius-md);\n background: var(--color-bg-secondary);\n color: var(--color-text-primary);\n margin-bottom: var(--space-sm);\n box-sizing: border-box;\n}\n\nbody.theme-dark .form-input {\n color: #e2e8f0;\n background: rgba(255, 255, 255, 0.1);\n border-color: rgba(255, 255, 255, 0.15);\n}\n\n.btn-primary {\n background: var(--color-accent-primary);\n color: #fff;\n}\n\n.btn-primary:hover {\n background: #e0245c;\n}\n\n.btn-primary:disabled {\n background: var(--color-text-light);\n cursor: not-allowed;\n opacity: 0.55;\n}\n\nbody.theme-dark .btn-primary {\n color: #fff;\n}\n\n.btn-secondary {\n background: var(--color-border-light);\n color: var(--color-text-secondary);\n}\n\n.btn-secondary:hover {\n background: var(--color-border-medium);\n}\n\n.btn-ghost {\n background: transparent;\n color: var(--color-accent-primary);\n border: 1.5px solid var(--color-accent-primary);\n}\n\n.btn-ghost:hover {\n background: rgba(255, 45, 106, 0.08);\n}\n\n.btn-ghost:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n}\n\n.btn-outline {\n background: transparent;\n color: var(--color-text-secondary);\n border: 1.5px solid var(--color-border-medium);\n}\n\n.btn-outline:hover {\n background: var(--color-border-light);\n border-color: var(--color-text-secondary);\n}\n\n.btn-outline:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n}\n\n.btn-danger {\n background: #dc2626;\n color: #fff;\n}\n\n.btn-danger:hover {\n background: #b91c1c;\n}\n\n/* Links */\na {\n color: var(--color-accent-blue);\n text-decoration: none;\n}\n\na:hover {\n text-decoration: underline;\n}\n\n/* Empty state */\n.empty-state {\n text-align: center;\n padding: var(--space-lg);\n color: var(--color-text-muted);\n}\n\n.empty-state p {\n margin-bottom: var(--space-sm);\n}\n\n/* Footer */\nfooter {\n margin-top: var(--space-lg);\n text-align: center;\n color: var(--color-text-light);\n font-size: var(--font-size-sm);\n}\n\n/* Utility classes */\n.hidden {\n display: none !important;\n}\n\n/* ==========================================\n Neon Party Mode Theme (Story 9.2)\n ========================================== */\n\n/* Dark theme body - applied to player page */\nbody.theme-dark {\n background: var(--color-bg-primary);\n color: var(--color-text-white);\n}\n\nbody.theme-dark .player-container {\n background: var(--color-bg-primary);\n}\n\n/* Admin page cards in dark mode - neon styling (Story 19.13) */\nbody.theme-dark .card-section {\n background: var(--color-surface-dark);\n border: 1px solid var(--color-border-neon);\n color: var(--color-text-white);\n}\n\n/* Consistent spacing for admin content sections */\n.admin-content .card-section {\n margin-bottom: var(--space-md);\n}\n\nbody.theme-dark .card-section:hover {\n box-shadow: 0 4px 20px rgba(157, 78, 221, 0.3);\n}\n\nbody.theme-dark .card-section h2,\nbody.theme-dark .card-section .section-header {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .card-section p,\nbody.theme-dark .card-section .name,\nbody.theme-dark .card-section .player-name,\nbody.theme-dark .card-section .playlist-name,\nbody.theme-dark .card-section .list-item,\nbody.theme-dark .card-section .radio-label,\nbody.theme-dark .card-section .checkbox-label,\nbody.theme-dark .card-section strong,\nbody.theme-dark .card-section span {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .card-section .meta {\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .game-info {\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid var(--color-neon-purple);\n border-radius: var(--radius-md);\n color: var(--color-text-white);\n}\n\nbody.theme-dark .game-info p,\nbody.theme-dark .game-info strong,\nbody.theme-dark .game-info span {\n color: var(--color-text-white);\n}\n\n/* Ensure button text stays white in dark mode (override card-section span rule) */\nbody.theme-dark .btn-primary span,\nbody.theme-dark .btn-secondary span {\n color: inherit;\n}\n\n/* Badge colors are explicitly set per badge type - no dark mode override needed */\n\n/* Inactive selector buttons need dark text on light backgrounds (Story 19.13) */\nbody.theme-dark .lang-btn:not(.lang-btn--active),\nbody.theme-dark .timer-btn:not(.timer-btn--active),\nbody.theme-dark .difficulty-btn:not(.difficulty-btn--active) {\n color: var(--color-text-primary, #1a1a2e);\n}\n\nbody.theme-dark .lang-btn:not(.lang-btn--active) span,\nbody.theme-dark .timer-btn:not(.timer-btn--active) span,\nbody.theme-dark .difficulty-btn:not(.difficulty-btn--active) span {\n color: var(--color-text-primary, #1a1a2e);\n}\n\n/* Language Selector (Story 12.4) */\n.language-selector {\n display: flex;\n justify-content: center;\n gap: var(--space-sm);\n}\n\n.lang-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-xs);\n padding: var(--space-sm) var(--space-lg);\n border: 2px solid var(--color-border-medium);\n border-radius: var(--radius-md);\n background: var(--color-bg-white);\n color: var(--color-text-primary);\n font-size: var(--font-size-base);\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.lang-btn:hover {\n border-color: var(--color-accent-brand);\n background: var(--color-bg-card-alt);\n}\n\n.lang-btn--active {\n border-color: var(--color-accent-brand);\n background: var(--color-accent-brand);\n color: var(--color-text-white);\n}\n\n.lang-btn--active:hover {\n background: var(--color-accent-brand-hover);\n}\n\n.lang-flag {\n font-size: 1.25em;\n}\n\n.lang-name {\n font-weight: 600;\n}\n\n/* Timer Selector (Story 13.1) */\n.timer-selector {\n display: flex;\n justify-content: center;\n gap: var(--space-sm);\n}\n\n.timer-btn {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-2xs);\n padding: var(--space-sm) var(--space-md);\n min-width: 90px;\n border: 2px solid var(--color-border-neon);\n border-radius: var(--radius-md);\n background: var(--color-bg-card);\n color: var(--color-text-secondary);\n font-family: inherit;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.timer-btn:hover {\n border-color: var(--color-accent-brand);\n background: var(--color-bg-card-alt);\n}\n\n.timer-btn:focus {\n outline: none;\n border-color: var(--color-accent-brand);\n box-shadow: 0 0 0 3px rgba(30, 215, 96, 0.3);\n}\n\n.timer-btn:focus-visible {\n outline: 2px solid var(--color-accent-brand);\n outline-offset: 2px;\n}\n\n.timer-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n border-color: var(--color-border-neon);\n background: var(--color-bg-card);\n}\n\n.timer-btn:disabled:hover {\n border-color: var(--color-border-neon);\n background: var(--color-bg-card);\n}\n\n.timer-btn--active {\n border-color: var(--color-accent-brand);\n background: var(--color-accent-brand);\n color: var(--color-text-white);\n}\n\n.timer-btn--active:hover {\n background: var(--color-accent-brand-hover);\n}\n\n.timer-icon {\n font-size: 1.5em;\n}\n\n.timer-label {\n font-weight: 600;\n font-size: 0.875rem;\n}\n\n.timer-value {\n font-size: 0.75rem;\n opacity: 0.8;\n}\n\n.timer-btn--active .timer-value {\n opacity: 1;\n}\n\n/* Difficulty Selector (Story 14.1) */\n.difficulty-selector {\n display: flex;\n justify-content: center;\n gap: var(--space-sm);\n}\n\n.difficulty-btn {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-2xs);\n padding: var(--space-sm) var(--space-md);\n min-width: 90px;\n border: 2px solid var(--color-border-light);\n border-radius: var(--radius-md);\n background: var(--color-bg-card);\n color: var(--color-text-secondary);\n font-family: inherit;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.difficulty-btn:hover {\n border-color: var(--color-accent-brand);\n background: var(--color-bg-card-alt);\n}\n\n.difficulty-btn:focus {\n outline: none;\n border-color: var(--color-accent-brand);\n box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);\n}\n\n.difficulty-btn:focus-visible {\n outline: 2px solid var(--color-accent-brand);\n outline-offset: 2px;\n}\n\n.difficulty-btn--active {\n border-color: var(--color-accent-brand);\n background: var(--color-accent-brand);\n color: var(--color-text-white);\n}\n\n.difficulty-btn--active:hover {\n background: var(--color-accent-brand-hover);\n}\n\n.difficulty-icon {\n font-size: 1.5em;\n}\n\n.difficulty-label {\n font-weight: 600;\n font-size: 0.875rem;\n}\n\n.difficulty-description {\n text-align: center;\n font-size: 0.8125rem;\n color: var(--color-text-muted);\n margin-top: var(--space-sm);\n line-height: 1.5;\n max-width: 400px;\n margin-left: auto;\n margin-right: auto;\n}\n\n/* Artist Challenge Toggle (Story 20.7) */\n.toggle-option {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n cursor: pointer;\n padding: var(--space-sm) 0;\n}\n\n.toggle-option input[type=\"checkbox\"] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.toggle-switch {\n position: relative;\n width: 48px;\n height: 26px;\n background: var(--color-border);\n border-radius: 13px;\n transition: background 0.2s ease;\n flex-shrink: 0;\n}\n\n.toggle-switch::after {\n content: '';\n position: absolute;\n top: 3px;\n left: 3px;\n width: 20px;\n height: 20px;\n background: white;\n border-radius: 50%;\n transition: transform 0.2s ease;\n}\n\n.toggle-option input:checked + .toggle-switch {\n background: var(--color-success);\n}\n\n.toggle-option input:checked + .toggle-switch::after {\n transform: translateX(22px);\n}\n\n.toggle-option input:focus-visible + .toggle-switch {\n outline: 2px solid var(--color-accent-primary);\n outline-offset: 2px;\n}\n\n.toggle-label {\n font-size: var(--font-size-md);\n font-weight: 500;\n color: var(--color-text);\n}\n\n.option-description {\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n margin: var(--space-xs) 0 0 0;\n padding-left: calc(48px + var(--space-md));\n}\n\n/* Dark mode toggle */\nbody.theme-dark .toggle-switch {\n background: var(--color-dark-border, #333);\n}\n\n/* Provider Selector (Story 17.2) */\n.provider-selector {\n display: flex;\n justify-content: center;\n gap: var(--space-sm);\n}\n\n.provider-btn {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-2xs);\n padding: var(--space-sm) var(--space-md);\n min-width: 100px;\n border: 2px solid var(--color-border-light);\n border-radius: var(--radius-md);\n background: var(--color-bg-card);\n color: var(--color-text-secondary);\n font-family: inherit;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.provider-btn:hover:not(.provider-btn--disabled) {\n border-color: var(--color-accent-brand);\n background: var(--color-bg-card-alt);\n}\n\n.provider-btn:focus {\n outline: none;\n border-color: var(--color-accent-brand);\n box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);\n}\n\n.provider-btn:focus-visible {\n outline: 2px solid var(--color-accent-brand);\n outline-offset: 2px;\n}\n\n.provider-btn--active {\n border-color: var(--color-accent-brand);\n background: var(--color-accent-brand);\n color: var(--color-text-white);\n}\n\n.provider-btn--active:hover {\n background: var(--color-accent-brand-hover);\n}\n\n.provider-icon {\n font-size: 1.5em;\n}\n\n.provider-label {\n font-weight: 600;\n font-size: 0.875rem;\n}\n\n/* Playlist coverage warning (Story 17.2) */\n.playlist-coverage {\n font-size: 0.75rem;\n color: var(--color-text-muted);\n}\n\n.playlist-coverage--warning {\n color: var(--color-warning);\n}\n\n.playlist-coverage--none {\n color: var(--color-error);\n}\n\n/* Playlist Filter Bar (Issue #70) */\n.playlist-filter-bar {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: 0.75rem 0;\n margin-bottom: 0.5rem;\n border-bottom: 1px solid var(--color-border);\n}\n\n/* Dropdown filters container */\n.filter-dropdowns {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.filter-dropdown {\n padding: 0.5rem 2rem 0.5rem 0.75rem;\n background: var(--color-surface);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-md, 6px);\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-text-primary, #333);\n cursor: pointer;\n transition: all 0.15s ease;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 0.75rem center;\n min-width: 120px;\n}\n\n.filter-dropdown:hover {\n border-color: var(--color-primary, #6c5ce7);\n}\n\n.filter-dropdown:focus {\n outline: none;\n border-color: var(--color-primary, #6c5ce7);\n box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2);\n}\n\n/* Dropdown with active selection */\n.filter-dropdown:not([value=\"\"]):has(option:checked:not([value=\"\"])) {\n border-color: var(--color-primary, #6c5ce7);\n background-color: rgba(108, 92, 231, 0.08);\n}\n\n/* Filter summary */\n.filter-summary {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 0.8125rem;\n}\n\n.filter-summary-text {\n color: var(--color-text-secondary, #666);\n}\n\n.filter-clear {\n padding: 0.25rem 0.5rem;\n background: transparent;\n border: 1px solid var(--color-border);\n border-radius: var(--radius-sm, 4px);\n font-size: 0.75rem;\n color: var(--color-text-secondary, #666);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.filter-clear:hover {\n background: var(--color-error, #e74c3c);\n border-color: var(--color-error, #e74c3c);\n color: white;\n}\n\n/* Dark theme */\nbody.theme-dark .filter-dropdown {\n background-color: rgba(255, 255, 255, 0.08);\n border-color: rgba(255, 255, 255, 0.15);\n color: rgba(255, 255, 255, 0.85);\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M2 4l4 4 4-4'/%3E%3C/svg%3E\");\n}\n\nbody.theme-dark .filter-dropdown:hover,\nbody.theme-dark .filter-dropdown:focus {\n border-color: rgba(108, 92, 231, 0.6);\n}\n\nbody.theme-dark .filter-summary-text {\n color: rgba(255, 255, 255, 0.6);\n}\n\nbody.theme-dark .filter-clear {\n border-color: rgba(255, 255, 255, 0.2);\n color: rgba(255, 255, 255, 0.6);\n}\n\n/* Legacy filter-tag styles (kept for backwards compatibility) */\n.filter-tag {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.4375rem 0.875rem;\n background: var(--color-surface);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-full);\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--color-text-primary, #333);\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.filter-tag .filter-count {\n font-size: 0.6875rem;\n opacity: 0.8;\n}\n\n/* Playlist Tags Display */\n.playlist-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n margin-top: 0.375rem;\n}\n\n.playlist-tag {\n display: inline-block;\n padding: 0.1875rem 0.5rem;\n background: var(--color-primary-light, #e8e4f8);\n border: 1px solid var(--color-primary-border, #c9bff2);\n border-radius: var(--radius-full);\n font-size: 0.6875rem;\n font-weight: 500;\n color: var(--color-primary-dark, #5b4cad);\n max-width: 6rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.playlist-tag--more {\n background: transparent;\n border-color: var(--color-primary-border, #c9bff2);\n color: var(--color-text-secondary, #666);\n font-style: italic;\n}\n\nbody.theme-dark .playlist-tag {\n background: rgba(108, 92, 231, 0.2);\n border-color: rgba(108, 92, 231, 0.4);\n color: #b8acf6;\n}\n\nbody.theme-dark .playlist-tag--more {\n background: transparent;\n color: rgba(255, 255, 255, 0.5);\n}\n\n/* Difficulty Badge (Story 14.1) */\n.difficulty-badge {\n display: inline-block;\n padding: 0.125rem 0.5rem;\n border-radius: var(--radius-full);\n font-size: 0.75rem;\n font-weight: 600;\n margin-left: var(--space-xs);\n}\n\n.difficulty-badge--easy {\n background: var(--color-success-bg);\n color: var(--color-success);\n border: 1px solid var(--color-success);\n}\n\n.difficulty-badge--normal {\n background: var(--color-accent-brand-bg);\n color: var(--color-accent-brand);\n border: 1px solid var(--color-accent-brand);\n}\n\n.difficulty-badge--hard {\n background: var(--color-error-bg);\n color: var(--color-error);\n border: 1px solid var(--color-error);\n}\n\n/* Supported players hint below media player list */\n.supported-players-hint {\n font-size: 0.75rem;\n color: var(--color-text-muted);\n margin-top: var(--space-sm);\n padding-top: var(--space-sm);\n border-top: 1px solid var(--color-border-light);\n}\n\n.supported-players-hint a {\n color: var(--color-accent-primary);\n text-decoration: none;\n}\n\n.supported-players-hint a:hover {\n text-decoration: underline;\n}\n\nbody.theme-dark .supported-players-hint {\n color: var(--color-text-neon-muted);\n border-top-color: var(--color-border-neon);\n}\n\n/* Player info container - holds name and platform badge */\n.player-info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n/* Platform badge on each player item */\n.platform-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 0.625rem;\n font-weight: 600;\n padding: 2px 6px;\n border-radius: var(--radius-sm);\n text-transform: uppercase;\n letter-spacing: 0.025em;\n background: rgba(128, 128, 128, 0.15);\n color: var(--color-text-muted);\n}\n\n.platform-badge--music_assistant {\n background: rgba(76, 175, 80, 0.15);\n color: #4caf50;\n}\n\n.platform-badge--sonos {\n background: rgba(255, 152, 0, 0.15);\n color: #ff9800;\n}\n\n.platform-badge--alexa_media,\n.platform-badge--alexa {\n background: rgba(0, 168, 225, 0.15);\n color: #00a8e1;\n}\n\nbody.theme-dark .platform-badge {\n background: rgba(255, 255, 255, 0.08);\n}\n\nbody.theme-dark .platform-badge--music_assistant {\n background: rgba(76, 175, 80, 0.2);\n color: #81c784;\n}\n\nbody.theme-dark .platform-badge--sonos {\n background: rgba(255, 152, 0, 0.2);\n color: #ffb74d;\n}\n\nbody.theme-dark .platform-badge--alexa_media,\nbody.theme-dark .platform-badge--alexa {\n background: rgba(0, 168, 225, 0.2);\n color: #4fc3f7;\n}\n\n/* No compatible players message */\n.no-players-message {\n text-align: center;\n padding: var(--space-lg);\n}\n\n.no-players-message h3 {\n font-size: 1.125rem;\n margin-bottom: var(--space-sm);\n}\n\n.no-players-message p {\n font-size: 0.875rem;\n color: var(--color-text-muted);\n margin-bottom: var(--space-sm);\n}\n\n.no-players-message .button-group {\n display: flex;\n flex-direction: column;\n gap: var(--space-sm);\n margin-top: var(--space-md);\n}\n\n/* Provider chips section */\n.provider-chips {\n justify-content: flex-start;\n}\n\n.provider-chips .chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.provider-icon {\n font-size: 1rem;\n}\n\n/* Warning box styling */\n.warning-box {\n background: var(--color-warning-bg);\n border: 1px solid var(--color-warning);\n border-radius: var(--radius-sm);\n padding: var(--space-sm);\n margin-top: var(--space-sm);\n font-size: 0.875rem;\n}\n\n.warning-box p {\n margin: 0 0 var(--space-xs) 0;\n}\n\n.warning-box p:last-child {\n margin-bottom: 0;\n}\n\n.warning-caveat {\n font-size: 0.8125rem;\n opacity: 0.85;\n}\n\n/* Provider hint text */\n#provider-hint {\n font-size: 0.8125rem;\n color: var(--color-text-muted);\n margin-top: var(--space-sm);\n}\n\nbody.theme-dark #provider-hint {\n color: var(--color-text-neon-muted);\n}\n\n/* Disabled chip state (for provider/feature chips) */\n.chip--disabled,\n.provider-btn--disabled {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* Hint text styling */\n.hint-text {\n font-size: 0.75rem;\n color: var(--color-text-muted);\n margin: var(--space-xs) 0 0 calc(var(--space-md) + 24px);\n font-style: italic;\n}\n\nbody.theme-dark .hint-text {\n color: var(--color-text-neon-muted);\n}\n\n/* Modal content in dark mode needs dark text on light backgrounds */\nbody.theme-dark .modal-content {\n color: var(--color-text-primary);\n}\n\nbody.theme-dark .modal-content h2,\nbody.theme-dark .modal-content p {\n color: var(--color-text-primary);\n}\n\n/* Input fields inside modals need dark text on light background */\nbody.theme-dark .modal-content .name-input {\n background: var(--color-bg-white);\n border-color: var(--color-border-medium);\n color: var(--color-text-primary);\n}\n\nbody.theme-dark .modal-content .name-input::placeholder {\n color: var(--color-text-muted);\n}\n\nbody.theme-dark .modal-content .name-input:focus {\n border-color: var(--color-accent-blue);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Card component classes */\n.card {\n background: var(--color-dark-surface);\n border-radius: var(--radius-lg);\n padding: var(--space-md);\n border: 1px solid var(--color-border-neon);\n}\n\n.card-glass {\n background: var(--color-dark-surface);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-lg);\n}\n\n/* Neon Primary Button */\n.btn-neon {\n background: var(--color-accent-primary);\n color: var(--color-text-white);\n border: none;\n border-radius: var(--radius-md);\n padding: var(--space-md) var(--space-lg);\n font-weight: var(--font-weight-semibold);\n cursor: pointer;\n transition: all var(--transition-fast);\n}\n\n.btn-neon:hover {\n background: #ff4080;\n}\n\n.btn-neon:active {\n transform: scale(0.98);\n}\n\n/* Glow effect for buttons */\n.btn-glow {\n transition: box-shadow var(--transition-fast), transform var(--transition-fast);\n}\n\n.btn-glow:hover {\n box-shadow: var(--glow-primary);\n}\n\n.btn-glow:active {\n transform: scale(0.98);\n box-shadow: var(--glow-primary);\n}\n\n/* Secondary glow (cyan) */\n.btn-glow-secondary:hover {\n box-shadow: var(--glow-secondary);\n}\n\n/* Success glow */\n.btn-glow-success:hover {\n box-shadow: var(--glow-success);\n}\n\n/* Text glow utilities */\n.text-glow {\n text-shadow: 0 0 10px var(--color-accent-primary),\n 0 0 20px var(--color-accent-primary),\n 0 0 30px var(--color-accent-primary);\n}\n\n.text-glow-cyan {\n text-shadow: 0 0 10px var(--color-accent-secondary),\n 0 0 20px var(--color-accent-secondary),\n 0 0 30px var(--color-accent-secondary);\n}\n\n.text-glow-success {\n text-shadow: 0 0 10px var(--color-success-neon),\n 0 0 20px var(--color-success-neon),\n 0 0 30px var(--color-success-neon);\n}\n\n/* Dark theme text utilities */\n.text-neon-white {\n color: var(--color-text-white);\n}\n\n.text-neon-muted {\n color: var(--color-text-neon-muted);\n}\n\n.text-neon-primary {\n color: var(--color-accent-primary);\n}\n\n.text-neon-secondary {\n color: var(--color-accent-secondary);\n}\n\n/* Dark theme overrides for player views */\nbody.theme-dark .player-container h1,\nbody.theme-dark .lobby-header h1,\nbody.theme-dark .game-container h1,\nbody.theme-dark .reveal-container h1,\nbody.theme-dark .end-container h1 {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .player-container p,\nbody.theme-dark .hint,\nbody.theme-dark .player-count {\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .join-form > p {\n color: var(--color-text-neon-muted);\n}\n\n/* Dark theme player cards */\nbody.theme-dark .player-card {\n background: var(--color-dark-surface);\n border-color: var(--color-border-neon);\n}\n\nbody.theme-dark .player-card--you {\n background: rgba(255, 45, 106, 0.1);\n border-color: var(--color-accent-primary);\n}\n\nbody.theme-dark .player-name {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .you-badge {\n color: var(--color-accent-primary);\n}\n\n/* Dark theme form inputs */\nbody.theme-dark .name-input {\n background: var(--color-dark-surface);\n border-color: var(--color-border-neon);\n color: var(--color-text-white);\n}\n\nbody.theme-dark .name-input:focus {\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 0 3px rgba(255, 45, 106, 0.2);\n}\n\nbody.theme-dark .name-input::placeholder {\n color: var(--color-text-neon-muted);\n}\n\n/* Dark theme join button */\nbody.theme-dark .join-btn {\n background: var(--color-accent-primary);\n color: var(--color-text-white);\n}\n\nbody.theme-dark .join-btn:hover {\n box-shadow: var(--glow-primary);\n}\n\n/* Dark theme QR area */\nbody.theme-dark .qr-share-area {\n background: var(--color-dark-surface);\n border: 1px solid var(--color-border-neon);\n}\n\nbody.theme-dark .qr-hint {\n color: var(--color-text-neon-muted);\n}\n\n/* Dark theme - QR collapsible (Story 18.8) */\nbody.theme-dark .qr-share-header {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .qr-share-chevron {\n color: var(--color-text-neon-muted);\n}\n\n/* Dark theme lobby status */\nbody.theme-dark .lobby-status {\n color: var(--color-text-neon-muted);\n}\n\n/* Dark theme game container */\nbody.theme-dark .game-container {\n background: var(--color-bg-primary);\n}\n\nbody.theme-dark .round-indicator-text {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .timer {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .timer--warning {\n color: var(--color-warning);\n text-shadow: 0 0 10px var(--color-warning);\n animation: timer-pulse-subtle 1s ease-in-out infinite;\n}\n\nbody.theme-dark .timer--critical {\n color: var(--color-error-neon);\n text-shadow: 0 0 15px var(--color-error-neon);\n animation: timer-pulse-intense 0.5s ease-in-out infinite;\n}\n\n/* Dark theme submission tracker - inherits from base styles */\n\nbody.theme-dark .player-avatar {\n background: var(--color-dark-surface-hover);\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .player-indicator.is-submitted .player-avatar {\n background: var(--color-success-neon);\n color: var(--color-bg-primary);\n box-shadow: var(--glow-success);\n}\n\n/* Dark theme year selector */\nbody.theme-dark #selected-year {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .slider-label {\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .year-slider {\n background: var(--color-dark-surface);\n}\n\nbody.theme-dark .year-slider::-webkit-slider-thumb {\n background: var(--color-accent-primary);\n box-shadow: var(--glow-primary);\n}\n\nbody.theme-dark .year-slider::-moz-range-thumb {\n background: var(--color-accent-primary);\n box-shadow: var(--glow-primary);\n}\n\n/* Dark theme submit button */\nbody.theme-dark .submit-btn {\n background: var(--color-accent-primary);\n}\n\nbody.theme-dark .submit-btn:hover {\n box-shadow: var(--glow-primary);\n}\n\n/* Dark theme submitted confirmation */\nbody.theme-dark .submitted-confirmation {\n background: var(--color-success-neon);\n color: var(--color-bg-primary);\n box-shadow: var(--glow-success);\n}\n\n/* Dark theme reveal container */\nbody.theme-dark .reveal-container {\n background: var(--color-bg-primary);\n}\n\nbody.theme-dark .reveal-round-info {\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .correct-year-label {\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .correct-year {\n color: var(--color-success-neon);\n text-shadow: 0 0 10px var(--color-success-neon),\n 0 0 20px var(--color-success-neon);\n}\n\nbody.theme-dark .song-title {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .song-artist {\n color: var(--color-text-neon-muted);\n}\n\n/* Dark theme fun fact */\nbody.theme-dark .fun-fact-container {\n background: rgba(255, 102, 0, 0.15);\n border: 1px solid rgba(255, 102, 0, 0.3);\n}\n\nbody.theme-dark .fun-fact-text {\n color: var(--color-warning);\n}\n\n/* Dark theme reveal emotion (Story 9.4) */\nbody.theme-dark .reveal-emotion--exact {\n color: var(--color-success-neon);\n text-shadow: 0 0 20px var(--color-success-neon), 0 0 40px var(--color-success-neon);\n}\n\nbody.theme-dark .reveal-emotion--close {\n color: var(--color-warning);\n text-shadow: 0 0 15px var(--color-warning);\n}\n\nbody.theme-dark .reveal-emotion--wrong {\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .reveal-emotion--missed {\n color: var(--color-text-neon-muted);\n opacity: 0.6;\n}\n\n/* Dark theme personal result */\nbody.theme-dark .personal-result {\n background: var(--color-dark-surface);\n border: 1px solid var(--color-border-neon);\n}\n\nbody.theme-dark .result-header {\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .result-label {\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .result-value {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .result-score {\n color: var(--color-accent-secondary);\n text-shadow: 0 0 10px var(--color-accent-secondary);\n}\n\n/* Dark theme leaderboard */\nbody.theme-dark .leaderboard {\n background: var(--color-dark-surface);\n border: 1px solid var(--color-border-neon);\n box-shadow: none;\n}\n\nbody.theme-dark .leaderboard-header {\n background: var(--color-dark-card);\n border-color: var(--color-border-neon);\n}\n\nbody.theme-dark .leaderboard-title {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .leaderboard-entry {\n border-color: var(--color-border-neon);\n}\n\nbody.theme-dark .leaderboard-entry.is-current {\n background: rgba(255, 45, 106, 0.1);\n border-left-color: var(--color-accent-primary);\n}\n\nbody.theme-dark .entry-rank {\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .entry-name {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .entry-score {\n color: var(--color-accent-secondary);\n}\n\n/* Dark theme leaderboard animations (Story 9.5) */\nbody.theme-dark .leaderboard-entry--climbing {\n animation: leaderboard-climb-dark 400ms ease-out;\n}\n\nbody.theme-dark .leaderboard-entry--falling {\n animation: leaderboard-fall-dark 400ms ease-out;\n}\n\n@keyframes leaderboard-climb-dark {\n 0% { transform: translateY(10px); opacity: 0.7; background: rgba(0, 255, 136, 0.15); }\n 100% { transform: translateY(0); opacity: 1; background: transparent; }\n}\n\n@keyframes leaderboard-fall-dark {\n 0% { transform: translateY(-10px); opacity: 0.7; background: rgba(255, 45, 106, 0.15); }\n 100% { transform: translateY(0); opacity: 1; background: transparent; }\n}\n\nbody.theme-dark .rank-up {\n color: var(--color-success-neon);\n text-shadow: 0 0 5px var(--color-success-neon);\n}\n\nbody.theme-dark .rank-down {\n color: var(--color-error-neon);\n text-shadow: 0 0 5px var(--color-error-neon);\n}\n\nbody.theme-dark .streak-indicator {\n color: var(--color-warning);\n}\n\nbody.theme-dark .streak-indicator--hot {\n text-shadow: 0 0 10px var(--color-warning), 0 0 20px var(--color-warning);\n}\n\nbody.theme-dark .leaderboard-separator {\n color: var(--color-text-neon-muted);\n border-color: var(--color-border-neon);\n}\n\n/* Dark theme top 3 styling (Story 9.5) */\nbody.theme-dark .leaderboard-entry.is-top-1 {\n background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));\n}\n\nbody.theme-dark .leaderboard-entry.is-top-1 .entry-rank {\n color: #ffd700;\n text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);\n}\n\nbody.theme-dark .leaderboard-entry.is-top-2 {\n background: linear-gradient(90deg, rgba(192, 192, 192, 0.15), rgba(192, 192, 192, 0.05));\n}\n\nbody.theme-dark .leaderboard-entry.is-top-2 .entry-rank {\n color: #c0c0c0;\n text-shadow: 0 0 10px rgba(192, 192, 192, 0.5);\n}\n\nbody.theme-dark .leaderboard-entry.is-top-3 {\n background: linear-gradient(90deg, rgba(205, 127, 50, 0.15), rgba(205, 127, 50, 0.05));\n}\n\nbody.theme-dark .leaderboard-entry.is-top-3 .entry-rank {\n color: #cd7f32;\n text-shadow: 0 0 10px rgba(205, 127, 50, 0.5);\n}\n\n/* Dark theme end container */\nbody.theme-dark .end-container {\n background: var(--color-bg-primary);\n}\n\nbody.theme-dark .end-title {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .end-subtitle {\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .your-result {\n background: var(--color-dark-surface);\n border: 1px solid var(--color-border-neon);\n}\n\nbody.theme-dark .your-result-header {\n color: var(--color-accent-primary);\n}\n\nbody.theme-dark .your-result-rank {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .your-result-score {\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .stat-value {\n color: var(--color-accent-secondary);\n}\n\nbody.theme-dark .stat-label {\n color: var(--color-text-neon-muted);\n}\n\n/* Dark theme podium */\nbody.theme-dark .podium-name {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .podium-score {\n color: var(--color-text-neon-muted);\n}\n\n/* Dark theme final leaderboard */\nbody.theme-dark .final-leaderboard {\n background: var(--color-dark-surface);\n border: 1px solid var(--color-border-neon);\n box-shadow: none;\n}\n\nbody.theme-dark .final-leaderboard-header {\n background: var(--color-dark-card);\n color: var(--color-text-white);\n}\n\nbody.theme-dark .final-entry {\n border-color: var(--color-border-neon);\n}\n\nbody.theme-dark .final-entry.is-current {\n background: rgba(255, 45, 106, 0.1);\n}\n\nbody.theme-dark .final-rank {\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .final-name {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .final-score {\n color: var(--color-accent-secondary);\n}\n\n/* Dark theme new game button */\nbody.theme-dark .new-game-btn {\n background: var(--color-success-neon);\n color: var(--color-bg-primary);\n box-shadow: var(--glow-success);\n}\n\nbody.theme-dark .new-game-btn:hover {\n background: #4dff1f;\n}\n\n/* Dark theme end player message */\nbody.theme-dark .end-player-message {\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .rejoin-hint {\n color: var(--color-text-neon-muted);\n}\n\n/* Dark theme paused view */\nbody.theme-dark .paused-container {\n background: var(--color-bg-primary);\n}\n\nbody.theme-dark .paused-container h1 {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .paused-container > p {\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .paused-hint {\n color: var(--color-text-neon-muted);\n}\n\n/* Dark theme connection lost view */\nbody.theme-dark .connection-lost-container h1 {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .connection-lost-container > p {\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .connection-lost-hint {\n color: var(--color-text-neon-muted);\n}\n\n/* Dark theme modal */\nbody.theme-dark .qr-modal-content {\n background: var(--color-bg-primary);\n border: 1px solid var(--color-border-neon);\n}\n\nbody.theme-dark .qr-modal-label {\n color: var(--color-text-white);\n}\n\n/* ==========================================\n Lobby Section (Story 2.3)\n ========================================== */\n\n.qr-print-area {\n text-align: center;\n padding: var(--space-lg) 0;\n}\n\n.qr-container {\n display: inline-block;\n padding: var(--space-md);\n background: var(--color-bg-white);\n border-radius: var(--radius-md);\n box-shadow: var(--shadow-md);\n}\n\n#qr-code {\n display: inline-block;\n}\n\n#qr-code img {\n display: block;\n}\n\n.qr-instruction {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-primary);\n margin-top: var(--space-md);\n}\n\n.join-url {\n font-family: var(--font-mono);\n font-size: var(--font-size-base);\n color: var(--color-text-muted);\n margin-top: var(--space-sm);\n word-break: break-all;\n user-select: all;\n cursor: text;\n}\n\n.lobby-controls {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-sm);\n margin: var(--space-md) 0;\n}\n\n/* Dashboard button styling (Story 16.4) */\n.btn-dashboard {\n display: flex;\n align-items: center;\n gap: var(--space-xs);\n}\n\n.player-list {\n margin-top: var(--space-md);\n border-top: 1px solid var(--color-border-light);\n padding-top: var(--space-md);\n}\n\n.game-controls-bar {\n display: flex;\n gap: var(--space-sm);\n justify-content: center;\n margin-top: var(--space-md);\n padding-top: var(--space-md);\n border-top: 1px solid var(--color-border-light);\n}\n\n/* Game Info Card (Story 2.3) */\n.game-info {\n background: var(--color-bg-card);\n border-radius: var(--radius-md);\n padding: var(--space-md);\n margin-bottom: var(--space-md);\n}\n\n.game-info p {\n margin-bottom: var(--space-sm);\n}\n\n.game-info p:last-child {\n margin-bottom: 0;\n}\n\n/* Print Styles (Story 2.3) */\n@media print {\n body * {\n visibility: hidden;\n }\n\n .qr-print-area,\n .qr-print-area * {\n visibility: visible;\n }\n\n .qr-print-area {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n }\n\n #qr-code {\n width: 400px !important;\n height: 400px !important;\n }\n\n #qr-code img,\n #qr-code canvas {\n width: 400px !important;\n height: 400px !important;\n }\n\n .qr-instruction {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-bold);\n margin-top: var(--space-xl);\n }\n\n .join-url {\n font-size: var(--font-size-base);\n font-family: var(--font-mono);\n margin-top: var(--space-sm);\n }\n\n .no-print {\n display: none !important;\n }\n}\n\n/* ==========================================\n Player Page Styles (Story 2.4)\n ========================================== */\n\n.player-container {\n max-width: 500px;\n margin: 0 auto;\n /* Edge-to-edge layout with safe area support (Story 9.6) */\n padding-top: max(var(--space-md), env(safe-area-inset-top));\n padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));\n padding-left: max(var(--space-sm), env(safe-area-inset-left));\n padding-right: max(var(--space-sm), env(safe-area-inset-right));\n text-align: center;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n}\n\n/* Tablet breakpoint - center content (Story 9.6) */\n@media (min-width: 768px) {\n .player-container {\n max-width: 480px;\n margin-left: auto;\n margin-right: auto;\n padding-left: var(--space-lg);\n padding-right: var(--space-lg);\n }\n}\n\n.view {\n display: block;\n overflow-x: hidden;\n}\n\n.view.hidden {\n display: none;\n}\n\n.error-icon {\n font-size: var(--font-size-timer);\n margin-bottom: var(--space-md);\n}\n\n.player-container h1 {\n margin-bottom: var(--space-sm);\n color: var(--color-text-primary);\n}\n\n.player-container p {\n color: var(--color-text-muted);\n margin-bottom: var(--space-sm);\n}\n\n.hint {\n font-size: var(--font-size-base);\n color: var(--color-text-light);\n}\n\n.coming-soon {\n font-style: italic;\n color: var(--color-text-muted);\n}\n\n.spinner {\n width: 40px;\n height: 40px;\n margin: 0 auto var(--space-md);\n border: 4px solid var(--color-bg-card-alt);\n border-top: 4px solid var(--color-accent-blue);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n/* ==========================================\n Responsive QR Sizing (Story 2.4)\n ========================================== */\n\n/* Mobile default - minimum 250px */\n#qr-code {\n max-width: 100%;\n}\n\n#qr-code img,\n#qr-code canvas {\n max-width: 100%;\n height: auto;\n}\n\n/* Tablet (481-768px): 280px QR code */\n@media (min-width: 481px) and (max-width: 768px) {\n .qr-container {\n padding: var(--space-xl);\n }\n}\n\n/* Desktop (>768px): 350px QR code */\n@media (min-width: 769px) {\n .qr-container {\n padding: var(--space-lg);\n }\n}\n\n/* ==========================================\n Join Form Styles (Story 3.1)\n ========================================== */\n\n.join-form {\n max-width: 400px;\n margin: 0 auto;\n padding: var(--space-lg);\n text-align: center;\n}\n\n.join-form h1 {\n margin-bottom: var(--space-sm);\n font-size: var(--font-size-2xl);\n}\n\n.join-form > p {\n margin-bottom: var(--space-lg);\n color: var(--color-text-muted);\n}\n\n.form-group {\n margin-bottom: var(--space-md);\n}\n\n.name-input {\n width: 100%;\n padding: 14px var(--space-md);\n font-size: var(--font-size-lg);\n border: 2px solid var(--color-border-medium);\n border-radius: var(--radius-md);\n min-height: 48px;\n box-sizing: border-box;\n}\n\n.name-input:focus {\n border-color: var(--color-accent-blue);\n outline: none;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.join-btn {\n width: 100%;\n min-height: 48px;\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n}\n\n.validation-msg {\n margin-top: var(--space-sm);\n font-size: var(--font-size-base);\n color: var(--color-error);\n text-align: left;\n}\n\n/* ==========================================\n Lobby Styles (Story 3.3)\n ========================================== */\n\n.lobby-container {\n max-width: 500px;\n margin: 0 auto;\n padding: var(--space-lg) var(--space-md);\n}\n\n.lobby-header {\n text-align: center;\n margin-bottom: var(--space-lg);\n}\n\n.lobby-header h1 {\n font-size: var(--font-size-2xl);\n margin-bottom: var(--space-sm);\n color: var(--color-text-primary);\n}\n\n.player-count {\n font-size: var(--font-size-md);\n color: var(--color-text-muted);\n}\n\n/* Player List */\n.player-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-sm);\n margin-bottom: var(--space-lg);\n}\n\n.player-card {\n display: flex;\n align-items: center;\n padding: var(--space-sm) var(--space-md);\n min-height: 48px;\n background: var(--color-bg-card);\n border-radius: var(--radius-md);\n border: 1px solid var(--color-border-light);\n transition: all var(--transition-normal);\n}\n\n.player-card--you {\n background: #eff6ff;\n border-color: var(--color-accent-blue);\n}\n\n.player-card--disconnected {\n opacity: 0.5;\n filter: grayscale(0.3);\n transition: opacity 0.3s ease, filter 0.3s ease;\n}\n\n.away-badge {\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n font-style: italic;\n margin-left: var(--space-xs);\n}\n\n.player-name {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n font-size: var(--font-size-md);\n color: var(--color-text-primary);\n}\n\n.you-badge {\n font-size: var(--font-size-sm);\n color: var(--color-accent-blue);\n font-weight: var(--font-weight-medium);\n}\n\n/* New player animation */\n.player-card.is-new {\n animation: playerJoin var(--transition-slow) ease-out;\n background: #ecfdf5;\n border-color: var(--color-success);\n}\n\n@keyframes playerJoin {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Story 18.2: Virtual scrolling for player lists */\n.player-list--virtual {\n position: relative;\n overflow-y: auto;\n max-height: 320px;\n -webkit-overflow-scrolling: touch;\n contain: layout style paint;\n}\n\n.player-list--virtual .virtual-spacer-top,\n.player-list--virtual .virtual-spacer-bottom {\n flex-shrink: 0;\n pointer-events: none;\n}\n\n.player-list--virtual .virtual-content-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--space-sm);\n}\n\n.player-list--virtual .player-card {\n flex-shrink: 0;\n height: 52px;\n box-sizing: border-box;\n}\n\n/* QR Share Area (Story 3.4) */\n.qr-share-area {\n text-align: center;\n padding: var(--space-lg) var(--space-md);\n background: var(--color-bg-card);\n border-radius: var(--radius-lg);\n margin-bottom: var(--space-md);\n}\n\n.qr-icon {\n font-size: var(--font-size-xl);\n}\n\n.qr-container {\n display: inline-block;\n padding: var(--space-sm);\n background: var(--color-bg-white);\n border-radius: var(--radius-md);\n box-shadow: var(--shadow-md);\n cursor: pointer;\n min-width: 150px;\n min-height: 150px;\n transition: transform var(--transition-fast);\n}\n\n.qr-container:hover,\n.qr-container:focus {\n transform: scale(1.02);\n outline: 2px solid var(--color-accent-blue);\n outline-offset: 2px;\n}\n\n.qr-container img {\n display: block;\n width: 100%;\n height: auto;\n}\n\n.qr-hint {\n margin-top: var(--space-sm);\n font-size: 13px;\n color: var(--color-text-muted);\n}\n\n/* QR Share Section - Collapsible (Story 18.8) */\n.qr-collapsible {\n /* Override base qr-share-area padding for collapsible */\n padding: 0;\n}\n\n.qr-share-header {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-sm);\n padding: var(--space-md);\n cursor: pointer;\n user-select: none;\n list-style: none; /* Remove default marker */\n font-size: var(--font-size-md);\n font-weight: 600;\n color: var(--color-text-primary);\n min-height: 44px; /* Touch target */\n}\n\n.qr-share-header::-webkit-details-marker {\n display: none; /* Hide Safari default marker */\n}\n\n.qr-share-chevron {\n margin-left: var(--space-sm);\n transition: transform var(--transition-normal);\n font-size: 0.8rem;\n color: var(--color-text-muted);\n}\n\n.qr-collapsible[open] .qr-share-chevron {\n transform: rotate(180deg);\n}\n\n.qr-share-content {\n padding: 0 var(--space-md) var(--space-lg);\n animation: qrSlideDown var(--transition-normal) ease-out;\n}\n\n@keyframes qrSlideDown {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Collapsed state - just show header */\n.qr-collapsible:not([open]) {\n padding-bottom: 0;\n}\n\n.qr-collapsible:not([open]) .qr-share-header {\n padding-bottom: var(--space-md);\n}\n\n/* Reduced motion preference */\n@media (prefers-reduced-motion: reduce) {\n .qr-share-chevron {\n transition: none;\n }\n .qr-share-content {\n animation: none;\n }\n}\n\n/* Dashboard Hint (Story 16.4) */\n.dashboard-hint-container {\n margin-top: var(--space-md);\n text-align: center;\n}\n\n.dashboard-hint-text {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-xs);\n font-size: var(--font-size-sm);\n color: #ffffff;\n background: var(--color-surface-dark);\n padding: var(--space-sm) var(--space-md);\n border-radius: var(--radius-md);\n margin: 0;\n}\n\n.dashboard-hint-label {\n display: flex;\n align-items: center;\n gap: var(--space-xs);\n color: white;\n}\n\n.dashboard-hint-icon {\n font-size: var(--font-size-base);\n}\n\n.dashboard-hint-url {\n font-family: monospace;\n color: var(--color-accent-secondary);\n font-size: var(--font-size-sm);\n}\n\n/* QR Modal (Story 3.4) */\n.qr-modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: var(--z-modal);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.qr-modal.hidden {\n display: none;\n}\n\n.qr-modal-backdrop {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.75);\n}\n\n.qr-modal-content {\n position: relative;\n background: var(--color-bg-white);\n padding: var(--space-xl) var(--space-lg);\n border-radius: var(--radius-xl);\n text-align: center;\n max-width: 90vw;\n max-height: 90vh;\n animation: modalFadeIn var(--transition-fast);\n}\n\n@keyframes modalFadeIn {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n.qr-modal-code {\n display: inline-block;\n padding: var(--space-md);\n background: var(--color-bg-white);\n border-radius: var(--radius-md);\n min-width: 250px;\n}\n\n.qr-modal-code img {\n display: block;\n width: 100%;\n max-width: 80vw;\n height: auto;\n}\n\n.qr-modal-label {\n margin: var(--space-md) 0;\n font-size: var(--font-size-lg);\n color: var(--color-text-primary);\n}\n\n.qr-modal-close {\n min-width: 120px;\n min-height: 48px;\n}\n\n/* Screen reader only */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n/* Lobby Status */\n.lobby-status {\n text-align: center;\n padding: var(--space-md);\n color: var(--color-text-muted);\n}\n\n/* How to Play Section (Story 18.7) */\n.how-to-play {\n margin: var(--space-md) 0;\n background: var(--color-bg-card);\n border-radius: var(--radius-md);\n border: 1px solid var(--color-border-light);\n}\n\n.how-to-play-header {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n padding: var(--space-md);\n cursor: pointer;\n user-select: none;\n list-style: none;\n font-weight: 600;\n color: var(--color-text-primary);\n min-height: 44px;\n}\n\n.how-to-play-header::-webkit-details-marker {\n display: none;\n}\n\n.how-to-play-icon {\n font-size: 1.2rem;\n}\n\n.how-to-play-chevron {\n margin-left: auto;\n transition: transform var(--transition-normal);\n font-size: 0.8rem;\n color: var(--color-text-secondary);\n}\n\n.how-to-play[open] .how-to-play-chevron {\n transform: rotate(180deg);\n}\n\n.how-to-play-content {\n padding: 0 var(--space-md) var(--space-md);\n animation: howToPlaySlideDown var(--transition-normal) ease-out;\n}\n\n.how-to-play-steps {\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-secondary);\n font-size: 0.9rem;\n line-height: 1.6;\n counter-reset: step-counter;\n}\n\n.how-to-play-steps li {\n margin-bottom: var(--space-sm);\n padding-left: var(--space-lg);\n position: relative;\n counter-increment: step-counter;\n}\n\n.how-to-play-steps li::before {\n content: counter(step-counter) \".\";\n position: absolute;\n left: 0;\n width: var(--space-md);\n text-align: right;\n font-weight: 600;\n color: var(--color-text-primary);\n}\n\n.how-to-play-steps li:last-child {\n margin-bottom: 0;\n}\n\n@keyframes howToPlaySlideDown {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Leave Game Container (Story 11.5, Story 18.6) */\n.leave-game-container {\n text-align: center;\n padding: var(--space-md);\n /* Story 18.6: Sticky positioning for mobile */\n position: sticky;\n bottom: 0;\n background: linear-gradient(to top, var(--color-bg-card), transparent);\n z-index: var(--z-controls, 10);\n}\n\n.leave-game-container.hidden {\n display: none;\n}\n\n/* Story 18.6: Remove gradient background in dark theme (matching admin-controls) */\nbody.theme-dark .leave-game-container {\n background: transparent;\n}\n\n.btn-leave {\n opacity: 0.7;\n transition: opacity 0.2s ease;\n}\n\n.btn-leave:hover {\n opacity: 1;\n}\n\n/* Admin Controls (Story 3.5) */\n.admin-controls {\n padding: var(--space-lg) var(--space-md);\n text-align: center;\n background: linear-gradient(to top, var(--color-bg-card), transparent);\n position: sticky;\n bottom: 0;\n}\n\n.admin-controls.hidden {\n display: none;\n}\n\n/* Story 9.10: Remove gradient background in dark theme */\nbody.theme-dark .admin-controls {\n background: transparent;\n}\n\n.btn-large {\n min-height: 56px;\n font-size: var(--font-size-xl);\n padding: var(--space-md) var(--space-xl);\n}\n\n.btn-full-width {\n width: 100%;\n}\n\n/* .btn-icon margin removed - .btn already uses flexbox gap for spacing */\n\n.admin-hint {\n margin-top: var(--space-sm);\n font-size: var(--font-size-base);\n color: var(--color-text-muted);\n}\n\n/* Admin page modal and actions */\n.admin-lobby-actions {\n text-align: center;\n margin-top: var(--space-lg);\n}\n\n/* Admin badge styling (Story 16.8) */\n.admin-badge {\n font-size: var(--font-size-sm);\n color: var(--color-warning);\n margin-left: var(--space-xs);\n}\n\n/* Player count styling for admin lobby (legacy - kept for backwards compat) */\n.lobby-player-count-container {\n text-align: center;\n margin-bottom: var(--space-md);\n}\n\n/* =====================================================\n Admin Lobby - Analytics Layout (Story 2.3 restructure)\n ===================================================== */\n\n/* Lobby Stats Grid - 2 column layout like analytics */\n.lobby-stats-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-md);\n margin-bottom: var(--space-lg);\n}\n\n/* Clickable stat card (dashboard link) */\n.stat-card--clickable {\n display: block;\n text-decoration: none;\n cursor: pointer;\n margin-bottom: var(--space-lg);\n}\n\n.stat-card--clickable:hover {\n border-color: var(--color-accent-secondary);\n}\n\n.dashboard-hint-card {\n background: rgba(0, 245, 255, 0.05);\n border-color: var(--color-accent-secondary);\n}\n\n/* QR Section - centered card with consistent styling */\n.qr-section {\n text-align: center;\n padding: var(--space-xl) var(--space-lg);\n background: var(--color-surface-dark);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-md);\n margin-bottom: var(--space-lg);\n}\n\n.qr-section .qr-container {\n display: inline-block;\n padding: var(--space-md);\n background: #ffffff;\n border-radius: var(--radius-md);\n margin-bottom: var(--space-md);\n}\n\n.qr-hint {\n font-size: 1rem;\n color: var(--color-text-neon-muted);\n margin-bottom: var(--space-sm);\n}\n\n.qr-url-display {\n font-family: 'Outfit', sans-serif;\n font-size: 1.125rem;\n font-weight: 600;\n color: var(--color-accent-secondary);\n word-break: break-all;\n}\n\n/* Player List Section - consistent with analytics sections */\n.player-list-section {\n background: var(--color-surface-dark);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-md);\n padding: var(--space-md);\n margin-bottom: var(--space-lg);\n}\n\n.section-subheader {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n font-size: 1rem;\n font-weight: 600;\n color: var(--color-text-white);\n margin-bottom: var(--space-md);\n}\n\n.section-subheader .section-icon {\n font-size: 1.25rem;\n}\n\n/* Player Cards Grid - responsive grid layout */\n.player-cards-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n gap: var(--space-sm);\n}\n\n/* Player card in grid layout */\n.player-cards-grid .player-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: var(--space-md);\n min-height: 80px;\n background: var(--color-dark-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-md);\n text-align: center;\n transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;\n}\n\n.player-cards-grid .player-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(157, 78, 221, 0.2);\n}\n\n.player-cards-grid .player-card.is-new {\n background: rgba(57, 255, 20, 0.1);\n border-color: var(--color-success-neon);\n animation: playerCardJoin 0.5s ease-out;\n}\n\n@keyframes playerCardJoin {\n from {\n opacity: 0;\n transform: scale(0.9);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n.player-cards-grid .player-card--disconnected {\n opacity: 0.5;\n filter: grayscale(0.3);\n}\n\n.player-cards-grid .player-name {\n font-size: var(--font-size-md);\n font-weight: 600;\n color: var(--color-text-white);\n margin-bottom: var(--space-xs);\n display: flex;\n align-items: center;\n gap: var(--space-xs);\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.player-cards-grid .admin-badge {\n font-size: 1rem;\n}\n\n.player-cards-grid .away-badge {\n font-size: var(--font-size-xs);\n color: var(--color-text-neon-muted);\n display: block;\n width: 100%;\n}\n\n/* Kick player button for disconnected players (#659) */\n.kick-player-btn {\n position: relative;\n background: none;\n border: 1px solid var(--color-border-dark);\n color: var(--color-text-muted);\n width: 24px;\n height: 24px;\n border-radius: 50%;\n font-size: 1rem;\n line-height: 1;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-top: var(--space-xs);\n padding: 0;\n transition: all 0.15s ease;\n}\n\n/* #1759: expand the tap target to the 44px iOS/Android guideline without\n growing the 24px visual, so it's reliably hittable inside the tappable row. */\n.kick-player-btn::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 44px;\n height: 44px;\n transform: translate(-50%, -50%);\n}\n\n.kick-player-btn:hover {\n background: var(--color-error);\n color: white;\n border-color: var(--color-error);\n}\n\n/* Lobby Actions */\n.lobby-actions {\n margin-top: var(--space-lg);\n padding-top: var(--space-md);\n border-top: 1px solid var(--color-border-dark);\n}\n\n/* =====================================================\n Mobile-Optimized Compact Lobby Layout\n ===================================================== */\n\n/* Compact header with inline badges */\n.lobby-header-compact {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-sm);\n margin-bottom: var(--space-md);\n text-align: left;\n}\n\n.section-header--inline {\n margin-bottom: 0;\n flex: 1;\n min-width: 120px;\n text-align: left;\n}\n\n/* Stat Badge Bar */\n.stat-badge-bar {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n}\n\n.stat-badge {\n display: flex;\n align-items: center;\n gap: var(--space-xs);\n padding: var(--space-xs) var(--space-sm);\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-md);\n font-size: 0.875rem;\n}\n\n.stat-badge-icon {\n font-size: 1rem;\n}\n\n.stat-badge-value {\n font-weight: 600;\n color: var(--color-accent-secondary);\n}\n\n.stat-badge--status .stat-badge-value {\n color: var(--color-text-white);\n}\n\n/* Compact QR Section */\n.qr-section--compact {\n padding: var(--space-md);\n margin-bottom: var(--space-md);\n}\n\n.qr-section--compact .qr-container {\n padding: var(--space-sm);\n margin-bottom: var(--space-sm);\n}\n\n.qr-section--compact #qr-code {\n width: 180px !important;\n height: 180px !important;\n}\n\n.qr-section--compact #qr-code img,\n.qr-section--compact #qr-code canvas {\n width: 180px !important;\n height: 180px !important;\n}\n\n.qr-section--compact .qr-hint {\n font-size: 0.875rem;\n margin-bottom: var(--space-xs);\n}\n\n.qr-url-display--compact {\n font-size: 0.75rem;\n margin-bottom: var(--space-sm);\n}\n\n/* Inline Dashboard Link */\n.dashboard-link {\n display: inline-flex;\n align-items: center;\n gap: var(--space-xs);\n padding: var(--space-xs) var(--space-sm);\n background: rgba(0, 245, 255, 0.1);\n border: 1px solid var(--color-accent-secondary);\n border-radius: var(--radius-md);\n color: var(--color-accent-secondary);\n text-decoration: none;\n font-size: 0.875rem;\n transition: all 0.2s ease;\n}\n\n.dashboard-link:hover {\n background: rgba(0, 245, 255, 0.2);\n}\n\n.dashboard-link-arrow {\n opacity: 0.7;\n}\n\n/* Compact Player List */\n.player-list-section--compact {\n padding: var(--space-sm);\n margin-bottom: var(--space-sm);\n}\n\n.section-subheader--compact {\n font-size: 0.875rem;\n margin-bottom: var(--space-sm);\n}\n\n/* Inline Empty State */\n.empty-state-inline {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-sm);\n padding: var(--space-md);\n color: var(--color-text-neon-muted);\n font-size: 0.875rem;\n text-align: center;\n}\n\n/* Sticky Lobby Actions */\n.lobby-actions--sticky {\n position: sticky;\n bottom: 0;\n margin: 0 calc(-1 * var(--space-md));\n padding: var(--space-sm) var(--space-md);\n background: var(--color-bg-primary);\n border-top: 1px solid var(--color-border-dark);\n z-index: 10;\n display: flex;\n flex-direction: column;\n gap: var(--space-sm, 8px);\n}\n\n/* Desktop: Keep larger layout */\n@media (min-width: 481px) {\n .qr-section--compact #qr-code,\n .qr-section--compact #qr-code img,\n .qr-section--compact #qr-code canvas {\n width: 240px !important;\n height: 240px !important;\n }\n\n .qr-section--compact {\n padding: var(--space-lg);\n }\n\n .lobby-actions--sticky {\n position: relative;\n margin: var(--space-lg) 0 0 0;\n padding: var(--space-md) 0 0 0;\n background: transparent;\n }\n}\n\n/* =====================================================\n Lobby View - Shared Styles (Admin & Player)\n ===================================================== */\n\n/* Lobby Wordmark Header (without analytics icon) */\n.lobby-wordmark-header {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: var(--space-md) var(--space-md) var(--space-sm);\n padding-top: env(safe-area-inset-top, 16px);\n}\n\n.lobby-wordmark-header .wordmark {\n font-size: 2rem;\n}\n\n/* Compact Lobby Container */\n.lobby-container--compact {\n flex: 1;\n padding: 0 var(--space-sm) var(--space-2xl);\n max-width: 500px;\n margin: 0 auto;\n width: 100%;\n}\n\n/* Lobby sections use the same collapsible pattern */\n.lobby-container--compact .section-collapsible {\n background: var(--color-surface-dark);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-md);\n margin-bottom: var(--space-md);\n overflow: hidden;\n}\n\n.lobby-container--compact .section-header-collapsible {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n width: 100%;\n padding: var(--space-sm) var(--space-md);\n background: transparent;\n border: none;\n color: var(--color-text-white);\n font-size: 0.875rem;\n font-weight: 600;\n cursor: pointer;\n text-align: left;\n}\n\n.lobby-container--compact .section-header-collapsible .section-icon {\n font-size: 1rem;\n}\n\n.lobby-container--compact .section-summary {\n margin-left: auto;\n font-size: 0.75rem;\n font-weight: 400;\n color: var(--color-text-neon-muted);\n padding: 2px 8px;\n background: rgba(255, 255, 255, 0.05);\n border-radius: var(--radius-sm);\n}\n\n.lobby-container--compact .section-toggle {\n font-size: 0.625rem;\n color: var(--color-text-neon-muted);\n transition: transform 0.2s ease;\n margin-left: var(--space-sm);\n}\n\n/* Push toggle to right when no summary present (toggle is 3rd child) */\n.lobby-container--compact .section-header-collapsible > .section-toggle:nth-child(3) {\n margin-left: auto;\n}\n\n.lobby-container--compact .section-collapsible:not(.collapsed) .section-toggle {\n transform: rotate(180deg);\n}\n\n.lobby-container--compact .section-content {\n padding: 0 var(--space-md) var(--space-md);\n}\n\n.lobby-container--compact .section-collapsible.collapsed .section-content {\n display: none;\n}\n\n/* Compact Status (for non-admin players) */\n.lobby-status-compact {\n text-align: center;\n padding: var(--space-md);\n color: var(--color-text-neon-muted);\n font-size: 0.875rem;\n}\n\n/* Compact How to Play Steps */\n.how-to-play-steps-compact {\n list-style: decimal;\n padding-left: var(--space-lg);\n margin: 0;\n font-size: 0.875rem;\n color: var(--color-text-neon-muted);\n}\n\n.how-to-play-steps-compact li {\n padding: var(--space-xs) 0;\n}\n\n/* Stat Badge for Difficulty */\n.stat-badge--difficulty {\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.stat-badge--difficulty:empty {\n display: none;\n}\n\n/* =====================================================\n Admin Page - Collapsible Sections & Compact Controls\n ===================================================== */\n\n/* Collapsible sections for admin (reuse analytics pattern) */\n.admin-content .section-collapsible {\n background: var(--color-surface-dark);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-md);\n margin-bottom: var(--space-md);\n overflow: hidden;\n}\n\n.admin-content .section-header-collapsible {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n width: 100%;\n padding: var(--space-sm) var(--space-md);\n background: transparent;\n border: none;\n color: var(--color-text-white);\n font-size: 0.875rem;\n font-weight: 600;\n cursor: pointer;\n text-align: left;\n}\n\n.admin-content .section-header-collapsible .section-icon {\n font-size: 1rem;\n}\n\n.admin-content .section-header-collapsible .section-summary {\n margin-left: auto;\n font-size: 0.75rem;\n font-weight: 400;\n color: var(--color-accent-secondary);\n background: rgba(0, 245, 255, 0.1);\n padding: 2px 8px;\n border-radius: var(--radius-sm);\n}\n\n.admin-content .section-header-collapsible .section-toggle {\n margin-left: var(--space-sm);\n font-size: 0.625rem;\n color: var(--color-text-neon-muted);\n transition: transform 0.2s ease;\n}\n\n.admin-content .section-collapsible:not(.collapsed) .section-toggle {\n transform: rotate(180deg);\n}\n\n.admin-content .section-collapsible .section-content {\n padding: 0 var(--space-md) var(--space-md);\n}\n\n.admin-content .section-collapsible.collapsed .section-content {\n display: none;\n}\n\n/* Setting rows - compact horizontal layout */\n.setting-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-xs) 0;\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n}\n\n.setting-row:last-child {\n border-bottom: none;\n}\n\n.setting-group {\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n padding-bottom: var(--space-sm);\n margin-bottom: var(--space-sm);\n}\n\n.setting-group:last-child {\n border-bottom: none;\n}\n\n.setting-group .setting-row {\n border-bottom: none;\n}\n\n.tts-group-title {\n font-size: 0.7rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--color-text-muted);\n margin: 0 0 var(--space-xs) 0;\n opacity: 0.8;\n}\n\n.setting-hint {\n font-size: 0.7rem;\n color: var(--color-text-muted);\n margin: 0 0 var(--space-xs) calc(var(--space-xs) + 24px);\n line-height: 1.3;\n opacity: 0.75;\n}\n\nbody.theme-dark .setting-hint {\n color: var(--color-text-neon-muted);\n}\n\n/* #1138 cleanup: .ha-entity-list rules removed with the legacy flat\n #ha-entities info section (deleted from admin.html). */\n\n.setting-label {\n display: flex;\n align-items: center;\n gap: var(--space-xs);\n font-size: 0.875rem;\n color: var(--color-text-white);\n}\n\n.setting-icon {\n font-size: 0.875rem;\n}\n\n/* Chip group - compact inline buttons */\n.chip-group {\n display: flex;\n gap: 4px;\n}\n\n.chip {\n padding: 4px 10px;\n font-size: 0.75rem;\n font-weight: 500;\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-sm);\n color: var(--color-text-neon-muted);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.chip:hover {\n background: rgba(255, 255, 255, 0.1);\n color: var(--color-text-white);\n}\n\n.chip.chip--active {\n background: rgba(0, 245, 255, 0.2);\n border-color: var(--color-accent-secondary);\n color: var(--color-accent-secondary);\n}\n\n/* Compact toggle switch */\n.toggle-compact {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.toggle-compact input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.toggle-switch-compact {\n width: 36px;\n height: 20px;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 10px;\n position: relative;\n transition: background 0.2s ease;\n}\n\n.toggle-switch-compact::after {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n width: 16px;\n height: 16px;\n background: var(--color-text-neon-muted);\n border-radius: 50%;\n transition: all 0.2s ease;\n}\n\n.toggle-compact input:checked + .toggle-switch-compact {\n background: rgba(0, 245, 255, 0.3);\n}\n\n.toggle-compact input:checked + .toggle-switch-compact::after {\n left: 18px;\n background: var(--color-accent-secondary);\n}\n\n/* Admin actions - sticky footer */\n.admin-actions {\n position: sticky;\n bottom: 0;\n background: var(--color-bg-primary);\n padding: var(--space-sm) 0;\n margin-top: var(--space-sm);\n}\n\n.admin-actions .status-error {\n margin-bottom: var(--space-xs);\n font-size: 0.875rem;\n}\n\n/* Modal styles */\n.modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: var(--z-modal);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.modal.hidden {\n display: none;\n}\n\n.modal-backdrop {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n}\n\n.modal-content {\n position: relative;\n background: var(--color-bg-white);\n padding: var(--space-lg);\n border-radius: var(--radius-lg);\n max-width: 400px;\n width: 90%;\n animation: modalFadeIn var(--transition-fast);\n}\n\n.modal-content h2 {\n margin-bottom: var(--space-sm);\n font-size: var(--font-size-xl);\n}\n\n.modal-content p {\n margin-bottom: var(--space-md);\n color: var(--color-text-muted);\n}\n\n.modal-actions {\n display: flex;\n gap: var(--space-sm);\n margin-top: var(--space-lg);\n}\n\n.modal-actions .btn {\n flex: 1;\n}\n\n/* Game placeholder (Epic 4 prep) */\n.game-placeholder {\n text-align: center;\n padding: var(--space-2xl) var(--space-lg);\n}\n\n.game-placeholder h1 {\n font-size: var(--font-size-3xl);\n margin-bottom: var(--space-md);\n color: var(--color-text-primary);\n}\n\n.game-placeholder p {\n font-size: var(--font-size-md);\n color: var(--color-text-muted);\n}\n\n/* Reveal placeholder (Story 3.6 / Epic 4 prep) */\n.reveal-placeholder {\n text-align: center;\n padding: var(--space-2xl) var(--space-lg);\n}\n\n.reveal-placeholder h1 {\n font-size: var(--font-size-4xl);\n margin-bottom: var(--space-md);\n color: var(--color-text-primary);\n}\n\n.reveal-placeholder p {\n font-size: var(--font-size-md);\n color: var(--color-text-muted);\n}\n\n/* End View (Story 3.6) */\n.end-container {\n text-align: center;\n padding: var(--space-2xl) var(--space-lg);\n}\n\n.end-icon {\n font-size: var(--font-size-timer);\n margin-bottom: var(--space-md);\n}\n\n.end-container h1 {\n font-size: var(--font-size-3xl);\n margin-bottom: var(--space-sm);\n color: var(--color-text-primary);\n}\n\n.end-message {\n font-size: var(--font-size-lg);\n color: #4b5563;\n margin-bottom: var(--space-sm);\n}\n\n/* ==========================================\n Game View Styles (Story 4.2)\n ========================================== */\n\n/* Game View Container */\n.game-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n /* Edge-to-edge with minimal padding (Story 9.6) */\n padding: var(--space-sm);\n padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));\n max-width: 400px;\n margin: 0 auto;\n}\n\n/* Sticky bar: Round info + Timer always visible (Issue #654) */\n.game-sticky-bar {\n position: sticky;\n top: 0;\n z-index: 50;\n width: 100%;\n padding: var(--space-xs) var(--space-sm);\n background: var(--color-bg-light);\n border-bottom: 1px solid var(--color-border-light);\n}\n\nbody.theme-dark .game-sticky-bar {\n background: var(--color-bg-primary);\n border-bottom-color: var(--color-border-dark);\n}\n\n.game-sticky-bar .timer-container {\n margin-bottom: 0;\n}\n\n.game-sticky-bar .timer {\n font-size: 2rem;\n}\n\n/* Game Header - Compact (matches lobby header pattern) */\n.game-header-compact {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n margin-bottom: var(--space-sm);\n padding: 0 var(--space-xs);\n}\n\n.game-header-left {\n display: flex;\n align-items: center;\n gap: var(--space-xs);\n}\n\n.game-header-left .section-icon {\n font-size: 1rem;\n}\n\n.round-indicator-text {\n font-size: var(--font-size-sm);\n font-weight: 600;\n color: var(--color-text-white);\n}\n\n/* Steal badge styling */\n.stat-badge--steal {\n background: linear-gradient(135deg, var(--color-purple-primary), var(--color-purple-secondary, #9333ea));\n animation: steal-badge-pulse 2s ease-in-out infinite;\n}\n\n@keyframes steal-badge-pulse {\n 0%, 100% {\n box-shadow: 0 0 8px rgba(147, 51, 234, 0.5);\n }\n 50% {\n box-shadow: 0 0 12px rgba(147, 51, 234, 0.8);\n }\n}\n\n/* Last Round Banner - Inline */\n.last-round-banner {\n background: linear-gradient(135deg, var(--color-warning), var(--color-warning-dark));\n color: var(--color-text-white);\n padding: var(--space-xs) var(--space-md);\n border-radius: var(--radius-md);\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n margin-bottom: var(--space-sm);\n text-align: center;\n width: 100%;\n animation: pulse 2s infinite;\n}\n\n/* Intro Round Badge (Issue #23) */\n.intro-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-sm);\n padding: var(--space-sm) var(--space-lg);\n background: linear-gradient(135deg, #ffd700, #ff6b00);\n color: #000;\n border-radius: var(--radius-pill);\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-bold);\n text-transform: uppercase;\n letter-spacing: 1px;\n animation: intro-pulse 1.5s ease-in-out infinite;\n margin-bottom: var(--space-md);\n box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 0 40px rgba(255, 107, 0, 0.3);\n}\n\n/* Intro Splash Overlay */\n.intro-splash {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 9999;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.85);\n animation: intro-splash-in 0.3s ease-out, intro-splash-out 0.5s ease-in 1.5s forwards;\n pointer-events: none;\n}\n\n.intro-splash-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n animation: intro-splash-scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n.intro-splash-icon {\n font-size: 80px;\n filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8));\n}\n\n.intro-splash-text {\n font-size: 36px;\n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 4px;\n background: linear-gradient(135deg, #ffd700, #ff6b00);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n text-shadow: none;\n}\n\n.intro-splash-hint {\n font-size: 18px;\n color: rgba(255, 255, 255, 0.7);\n letter-spacing: 1px;\n}\n\n@keyframes intro-splash-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes intro-splash-out {\n from { opacity: 1; }\n to { opacity: 0; visibility: hidden; }\n}\n\n@keyframes intro-splash-scale {\n from { transform: scale(0.5); opacity: 0; }\n to { transform: scale(1); opacity: 1; }\n}\n\n.intro-badge-icon {\n font-size: var(--font-size-md);\n}\n\n.intro-badge--large {\n font-size: var(--font-size-lg);\n padding: var(--space-sm) var(--space-lg);\n margin-left: var(--space-md);\n}\n\n.intro-badge--large .intro-badge-icon {\n font-size: var(--font-size-xl);\n}\n\n.intro-badge--stopped {\n background: linear-gradient(135deg, #666, #444);\n color: var(--color-text-white);\n animation: none;\n}\n\n@keyframes intro-pulse {\n 0%, 100% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(1.05); opacity: 0.9; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .intro-badge {\n animation: none;\n }\n}\n\n/* Issue #442: Closest Wins badge */\n.closest-wins-badge {\n background: linear-gradient(135deg, #00c6ff, #0072ff);\n box-shadow: 0 0 20px rgba(0, 198, 255, 0.5), 0 0 40px rgba(0, 114, 255, 0.3);\n}\n\n/* Issue #442: Highlight closest winner in result cards */\n.result-card.is-closest-winner {\n border: 2px solid #00c6ff;\n box-shadow: 0 0 12px rgba(0, 198, 255, 0.4);\n}\n\n.closest-winner-badge {\n margin-left: var(--space-sm);\n font-size: var(--font-size-sm);\n}\n\n/* Album Cover (compact, matches reveal size) */\n.album-cover-container {\n position: relative;\n width: 150px;\n height: 150px;\n margin-bottom: var(--space-md);\n}\n\n.album-cover {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-lg);\n filter: blur(20px);\n}\n\n/* Responsive album cover */\n@media (max-width: 360px) {\n .album-cover-container {\n width: 120px;\n height: 120px;\n }\n}\n\n@media (min-width: 768px) {\n .album-cover-container {\n width: 180px;\n height: 180px;\n }\n}\n\n.album-loading {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--color-bg-card-alt);\n border-radius: var(--radius-xl);\n}\n\n.loading-spinner {\n width: 40px;\n height: 40px;\n border: 4px solid var(--color-border-light);\n border-top-color: var(--color-accent-brand);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n/* Timer */\n.timer-container {\n margin-bottom: var(--space-lg);\n}\n\n.timer {\n font-size: var(--font-size-timer);\n font-weight: var(--font-weight-bold);\n color: var(--color-text-primary);\n font-variant-numeric: tabular-nums;\n transition: color var(--transition-normal);\n}\n\n.timer--warning {\n color: var(--color-warning);\n animation: timer-pulse-subtle 1s ease-in-out infinite;\n}\n\n.timer--critical {\n color: var(--color-error);\n animation: timer-pulse-intense 0.5s ease-in-out infinite;\n}\n\n/* Timer animations */\n@keyframes timer-pulse-subtle {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.8; }\n}\n\n@keyframes timer-pulse-intense {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.9; transform: scale(1.05); }\n}\n\n/* Reduced motion support for timer */\n@media (prefers-reduced-motion: reduce) {\n .timer--warning,\n .timer--critical {\n animation: none;\n }\n}\n\n/* Submission Tracker (Story 4.4) - Aligned with analytics style */\n.submission-tracker {\n width: 100%;\n margin-bottom: var(--space-md);\n padding: var(--space-sm);\n background: var(--color-surface-dark);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-md);\n}\n\n/* Player Indicators Row */\n.submitted-players {\n display: flex;\n gap: var(--space-sm);\n overflow-x: auto;\n padding: var(--space-xs) 0;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none; /* Firefox */\n justify-content: center;\n flex-wrap: wrap;\n}\n\n.submitted-players::-webkit-scrollbar {\n display: none; /* Chrome, Safari */\n}\n\n/* Player Indicator */\n.player-indicator {\n display: flex;\n flex-direction: column;\n align-items: center;\n min-width: 48px;\n flex-shrink: 0;\n position: relative;\n}\n\n/* Player badges for bet and steal */\n.player-badge {\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n z-index: 1;\n}\n\n/* Bet badge - upper right */\n.player-badge--bet {\n top: -2px;\n right: 2px;\n background: var(--color-warning);\n}\n\n/* Steal badge - upper left */\n.player-badge--steal {\n top: -2px;\n left: 2px;\n background: linear-gradient(135deg, var(--color-purple-primary), var(--color-purple-secondary, #9333ea));\n}\n\n.player-avatar {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background: var(--color-border-light);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-muted);\n border: 2px solid transparent;\n transition: all var(--transition-normal);\n}\n\n.player-indicator.is-submitted .player-avatar {\n background: var(--color-success);\n color: var(--color-text-white);\n border-color: var(--color-success-hover);\n animation: submitted-pulse var(--transition-slow) ease-out;\n}\n\n.player-indicator.is-submitted .player-initials {\n display: none;\n}\n\n.player-indicator.is-submitted .player-avatar::after {\n content: '\u2713';\n font-size: var(--font-size-md);\n}\n\n@keyframes submitted-pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n 100% { transform: scale(1); }\n}\n\n.player-indicator .player-name {\n font-size: var(--font-size-xs);\n color: var(--color-text-muted);\n max-width: 48px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: center;\n margin-top: var(--space-xs);\n}\n\n/* Current Player Highlight */\n.player-indicator.is-current-player .player-avatar {\n border-color: var(--color-accent-brand);\n}\n\n.player-indicator.is-current-player .player-name {\n font-weight: var(--font-weight-semibold);\n color: var(--color-accent-brand);\n}\n\n/* Disconnected player indicator (Story 11.4) */\n.player-indicator--disconnected {\n opacity: 0.4;\n}\n\n/* All Submitted State */\n.submission-tracker.all-submitted {\n border-color: var(--color-success);\n background: rgba(16, 185, 129, 0.1);\n}\n\n/* Artist Challenge (Story 20.5) - Uses card-section base */\n.artist-challenge {\n width: 100%;\n}\n\n.artist-challenge .section-header {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n flex-wrap: wrap;\n}\n\n/* Bonus badge in header */\n.stat-badge--bonus {\n background: rgba(34, 197, 94, 0.15);\n color: var(--color-success);\n font-weight: 700;\n margin-left: auto;\n}\n\n/* Artist options grid */\n.artist-options-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-auto-rows: 1fr;\n gap: var(--space-sm);\n}\n\n@media (max-width: 320px) {\n .artist-options-grid {\n grid-template-columns: 1fr;\n }\n}\n\n.artist-option-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 72px;\n padding: var(--space-sm) var(--space-md);\n border: 2px solid var(--color-border);\n border-radius: var(--radius-md);\n background: var(--color-surface);\n color: var(--color-text);\n font-size: var(--font-size-md);\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n position: relative;\n}\n\n.artist-option-btn:active {\n transform: scale(0.98);\n}\n\n.artist-option-btn.is-loading {\n animation: artistPulse 1s infinite;\n}\n\n@keyframes artistPulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.6; }\n}\n\n.artist-option-btn.is-correct,\n.artist-option-btn.is-winner {\n background: var(--color-success);\n border-color: var(--color-success);\n color: white;\n}\n\n.artist-option-btn.is-winner {\n box-shadow: var(--glow-primary);\n}\n\n.artist-option-btn.is-wrong {\n animation: artistWrongFlash 0.5s ease;\n}\n\n.artist-option-btn.is-wrong.is-selected {\n background: var(--color-error);\n border-color: var(--color-error);\n color: white;\n animation: none;\n opacity: 0.8;\n}\n\n@keyframes artistWrongFlash {\n 0%, 100% { background: var(--color-surface); }\n 50% { background: rgba(239, 68, 68, 0.3); }\n}\n\n.artist-option-btn.is-disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.artist-points-badge {\n position: absolute;\n right: var(--space-sm);\n font-size: var(--font-size-sm);\n font-weight: 700;\n color: white;\n background: rgba(0, 0, 0, 0.2);\n padding: 2px 6px;\n border-radius: var(--radius-sm);\n}\n\n.artist-result {\n margin-top: var(--space-md);\n padding: var(--space-sm) var(--space-md);\n border-radius: var(--radius-md);\n text-align: center;\n font-weight: 500;\n}\n\n.artist-result.is-winner {\n background: rgba(34, 197, 94, 0.15);\n color: var(--color-success);\n}\n\n.artist-result.is-late {\n background: var(--color-surface-alt, rgba(255, 255, 255, 0.05));\n color: var(--color-text-muted);\n}\n\n/* Dark mode - artist-challenge inherits from card-section */\nbody.theme-dark .artist-option-btn {\n background: rgba(255, 255, 255, 0.05);\n border-color: var(--color-border-neon);\n color: var(--color-text-white);\n}\n\nbody.theme-dark .artist-option-btn:hover {\n background: rgba(255, 255, 255, 0.1);\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .artist-option-btn.is-loading {\n animation: none;\n opacity: 0.7;\n }\n\n .artist-option-btn.is-wrong {\n animation: none;\n opacity: 0.5;\n }\n}\n\n/* Artist Reveal Section (Story 20.6) */\n.artist-reveal-section {\n padding: var(--space-md);\n margin-bottom: var(--space-md);\n background: var(--color-surface-alt, rgba(255, 255, 255, 0.05));\n border-radius: var(--radius-lg);\n}\n\n/* Center the artist name and winner content, not the header */\n.artist-reveal-section .section-content-padded {\n text-align: center;\n}\n\n.artist-reveal-label {\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: var(--space-xs);\n}\n\n.artist-reveal-name {\n font-size: var(--font-size-xl);\n font-weight: 700;\n color: var(--color-text);\n margin-bottom: var(--space-sm);\n}\n\n.artist-reveal-winner {\n font-size: var(--font-size-md);\n padding: var(--space-xs) var(--space-md);\n border-radius: var(--radius-md);\n display: inline-block;\n}\n\n.artist-reveal-winner.is-you {\n background: rgba(34, 197, 94, 0.15);\n color: var(--color-success);\n font-weight: 600;\n}\n\n.artist-reveal-winner.is-other {\n color: var(--color-text-muted);\n}\n\n.artist-reveal-no-winner {\n color: var(--color-text-muted);\n font-style: italic;\n}\n\n/* Dark mode */\nbody.theme-dark .artist-reveal-section {\n background: var(--color-dark-surface-alt, #16213e);\n}\n\n/* Artist Bonus Row in Score Breakdown (Story 20.6) */\n.artist-bonus-row .result-value {\n color: var(--color-success);\n font-weight: 600;\n}\n\n/* Artist Badge on Player Cards (Story 20.6) */\n.player-card-artist-badge {\n font-size: var(--font-size-xs);\n color: var(--color-success);\n background: rgba(34, 197, 94, 0.1);\n padding: 2px 6px;\n border-radius: var(--radius-sm);\n margin-left: var(--space-xs);\n}\n\n/* ============================================\n Movie Challenge (Issue #28) - Uses card-section base\n ============================================ */\n.movie-challenge {\n width: 100%;\n}\n\n.movie-challenge .section-header {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n flex-wrap: wrap;\n}\n\n/* Movie options grid - 1 column default (titles are longer) */\n.movie-options-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: var(--space-sm);\n}\n\n@media (min-width: 480px) {\n .movie-options-grid {\n grid-template-columns: 1fr 1fr;\n }\n}\n\n.movie-option-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 44px;\n padding: var(--space-sm) var(--space-md);\n border: 2px solid var(--color-border);\n border-radius: var(--radius-md);\n background: var(--color-surface);\n color: var(--color-text);\n font-size: var(--font-size-md);\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n position: relative;\n text-align: center;\n}\n\n.movie-option-btn:active {\n transform: scale(0.98);\n}\n\n.movie-option-btn.is-loading {\n animation: moviePulse 1s infinite;\n}\n\n@keyframes moviePulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.6; }\n}\n\n.movie-option-btn.is-correct,\n.movie-option-btn.is-winner {\n background: var(--color-success);\n border-color: var(--color-success);\n color: white;\n}\n\n.movie-option-btn.is-winner {\n box-shadow: var(--glow-primary);\n}\n\n.movie-option-btn.is-wrong {\n animation: movieWrongFlash 0.5s ease;\n}\n\n.movie-option-btn.is-wrong.is-selected {\n background: var(--color-error);\n border-color: var(--color-error);\n color: white;\n animation: none;\n opacity: 0.8;\n}\n\n@keyframes movieWrongFlash {\n 0%, 100% { background: var(--color-surface); }\n 50% { background: rgba(239, 68, 68, 0.3); }\n}\n\n.movie-option-btn.is-disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.movie-rank-badge {\n position: absolute;\n right: var(--space-sm);\n font-size: var(--font-size-sm);\n font-weight: 700;\n color: white;\n background: rgba(0, 0, 0, 0.2);\n padding: 2px 6px;\n border-radius: var(--radius-sm);\n}\n\n.movie-result {\n margin-top: var(--space-md);\n padding: var(--space-sm) var(--space-md);\n border-radius: var(--radius-md);\n text-align: center;\n font-weight: 500;\n}\n\n.movie-result.is-winner {\n background: rgba(34, 197, 94, 0.15);\n color: var(--color-success);\n}\n\n.movie-result.is-late {\n background: var(--color-surface-alt, rgba(255, 255, 255, 0.05));\n color: var(--color-text-muted);\n}\n\n/* Dark mode - movie-challenge inherits from card-section */\nbody.theme-dark .movie-option-btn {\n background: rgba(255, 255, 255, 0.05);\n border-color: var(--color-border-neon);\n color: var(--color-text-white);\n}\n\nbody.theme-dark .movie-option-btn:hover {\n background: rgba(255, 255, 255, 0.1);\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .movie-option-btn.is-loading {\n animation: none;\n opacity: 0.7;\n }\n\n .movie-option-btn.is-wrong {\n animation: none;\n opacity: 0.5;\n }\n}\n\n/* Movie Reveal Section (Issue #28) */\n.movie-reveal-section {\n padding: var(--space-md);\n margin-bottom: var(--space-md);\n background: var(--color-surface-alt, rgba(255, 255, 255, 0.05));\n border-radius: var(--radius-lg);\n}\n\n.movie-reveal-section .section-content-padded {\n text-align: center;\n}\n\n.movie-reveal-name {\n font-size: var(--font-size-xl);\n font-weight: 700;\n color: var(--color-text);\n margin-bottom: var(--space-sm);\n}\n\n.movie-reveal-winners {\n margin-top: var(--space-sm);\n}\n\n.movie-reveal-winners-title {\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: var(--space-xs);\n}\n\n.movie-reveal-winner-entry {\n font-size: var(--font-size-md);\n padding: var(--space-xs) var(--space-md);\n border-radius: var(--radius-md);\n display: inline-block;\n margin: 2px 4px;\n}\n\n.movie-reveal-winner-entry.is-you {\n background: rgba(34, 197, 94, 0.15);\n color: var(--color-success);\n font-weight: 600;\n}\n\n.movie-reveal-winner-entry.is-other {\n color: var(--color-text-muted);\n}\n\n.movie-reveal-no-winner {\n color: var(--color-text-muted);\n font-style: italic;\n font-size: var(--font-size-md);\n padding: var(--space-xs) var(--space-md);\n}\n\n/* Dark mode */\nbody.theme-dark .movie-reveal-section {\n background: var(--color-dark-surface-alt, #16213e);\n}\n\n/* Year Selector (Story 4.3) - Uses card-section base */\n.year-selector-section {\n width: 100%;\n /* Safe area for submit button (Story 9.6) */\n padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));\n}\n\n.year-selector {\n width: 100%;\n}\n\n.year-display {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-sm);\n margin-bottom: var(--space-md);\n}\n\n/* +/- buttons for precise year adjustment (Issue #662) */\n.year-adjust-btn {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n border: 2px solid var(--color-border-dark);\n background: transparent;\n color: var(--color-text-white);\n font-size: 1.5rem;\n font-weight: bold;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: all 0.15s ease;\n -webkit-tap-highlight-color: transparent;\n touch-action: manipulation;\n user-select: none;\n flex-shrink: 0;\n}\n\n.year-adjust-btn:active {\n background: var(--color-accent-primary);\n border-color: var(--color-accent-primary);\n transform: scale(0.95);\n}\n\n.year-adjust-btn:disabled {\n opacity: 0.3;\n pointer-events: none;\n}\n\n#selected-year {\n font-size: var(--font-size-year);\n font-weight: var(--font-weight-bold);\n color: var(--color-text-primary);\n font-variant-numeric: tabular-nums;\n}\n\n/* Slider Container */\n.slider-container {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n margin-bottom: var(--space-lg);\n}\n\n.slider-label {\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n min-width: 40px;\n}\n\n.slider-label--min {\n text-align: right;\n}\n\n.slider-label--max {\n text-align: left;\n}\n\n/* Custom Range Slider */\n.year-slider {\n -webkit-appearance: none;\n appearance: none;\n flex: 1;\n height: var(--space-sm);\n background: var(--color-border-light);\n border-radius: var(--radius-sm);\n outline: none;\n}\n\n.year-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 44px;\n height: 44px;\n background: var(--color-accent-brand);\n border-radius: 50%;\n cursor: pointer;\n border: 4px solid var(--color-bg-white);\n box-shadow: var(--shadow-md);\n transition: transform 0.1s ease;\n}\n\n.year-slider::-webkit-slider-thumb:active {\n transform: scale(1.1);\n}\n\n.year-slider::-moz-range-thumb {\n width: 44px;\n height: 44px;\n background: var(--color-accent-brand);\n border-radius: 50%;\n cursor: pointer;\n border: 4px solid var(--color-bg-white);\n box-shadow: var(--shadow-md);\n}\n\n/* Submit Button */\n.submit-btn {\n width: 100%;\n padding: var(--space-lg) var(--space-lg);\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-white);\n background: var(--color-accent-brand);\n border: none;\n border-radius: var(--radius-lg);\n cursor: pointer;\n transition: all var(--transition-fast);\n min-height: 56px;\n}\n\n.submit-btn:hover {\n background: var(--color-accent-brand-hover);\n}\n\n.submit-btn:active {\n transform: scale(0.98);\n}\n\n.submit-btn:disabled {\n background: var(--color-text-light);\n cursor: not-allowed;\n transform: none;\n}\n\n.submit-btn.is-loading {\n color: transparent;\n position: relative;\n}\n\n.submit-btn.is-loading::after {\n content: '';\n position: absolute;\n width: 24px;\n height: 24px;\n border: 3px solid var(--color-bg-white);\n border-top-color: transparent;\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n left: 50%;\n top: 50%;\n margin-left: -12px;\n margin-top: -12px;\n}\n\n.submit-btn.is-error {\n background: var(--color-error);\n}\n\n/* Submitted Confirmation */\n.submitted-confirmation {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-sm);\n padding: var(--space-md);\n background: var(--color-success);\n color: var(--color-text-white);\n border-radius: var(--radius-lg);\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n}\n\n.submitted-confirmation .checkmark {\n font-size: var(--font-size-2xl);\n}\n\n/* Submitted state for slider */\n.year-selector.is-submitted .year-slider {\n pointer-events: none;\n opacity: 0.5;\n}\n\n.year-selector.is-submitted #selected-year {\n color: var(--color-text-muted);\n}\n\n/* Responsive adjustments for Game View */\n@media (max-width: 360px) {\n .album-cover-container {\n max-width: 250px;\n }\n\n .timer {\n font-size: var(--font-size-2xl);\n }\n}\n\n@media (min-width: 768px) {\n .album-cover-container {\n max-width: 350px;\n }\n\n .timer {\n font-size: var(--font-size-hero);\n }\n}\n\n/* Tablet+ breakpoint (min-width for mobile-first) */\n@media (min-width: 768px) {\n body {\n max-width: 800px;\n margin: 0 auto;\n padding: var(--space-lg);\n }\n\n header h1 {\n font-size: var(--font-size-4xl);\n }\n\n .status-section h2,\n .card-section h2 {\n font-size: var(--font-size-lg);\n }\n\n .card-section {\n padding: var(--space-md) var(--space-lg);\n }\n}\n\n/* ============================================\n Reveal View (Story 4.6)\n ============================================ */\n\n.reveal-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-lg);\n width: 100%;\n margin: 0 auto;\n text-align: center;\n}\n\n/* Compact Reveal Container */\n.reveal-container--compact {\n padding: var(--space-md);\n gap: var(--space-sm);\n align-items: stretch;\n}\n\n/* Duel Reveal Container (round-reveal v2) \u2014 same stretch/padding behavior as\n --compact so every card-section has the same width. Default .reveal-container\n uses align-items:center which makes cards size to their content. */\n.reveal-container--duel {\n padding: var(--space-md);\n gap: var(--space-sm);\n align-items: stretch;\n text-align: left;\n}\n\n/* Compact Header Bar */\n.reveal-header-compact {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-xs) 0;\n margin-bottom: var(--space-xs);\n}\n\n.reveal-header-left {\n display: flex;\n align-items: center;\n gap: var(--space-xs);\n}\n\n.reveal-header-compact .section-icon {\n font-size: 1rem;\n}\n\n.reveal-header-compact .round-indicator-text {\n font-size: 0.875rem;\n color: var(--color-text-neon-muted);\n}\n\n/* Song Hero - Album + Info side by side */\n.reveal-song-hero {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n padding: var(--space-sm);\n background: var(--color-surface-dark);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-md);\n margin-bottom: var(--space-sm);\n}\n\n.reveal-album-cover-compact {\n width: 80px;\n height: 80px;\n object-fit: cover;\n border-radius: var(--radius-md);\n flex-shrink: 0;\n}\n\n.reveal-song-info {\n flex: 1;\n min-width: 0;\n text-align: left;\n}\n\n.reveal-song-info .song-title {\n font-size: 1rem;\n font-weight: 600;\n color: var(--color-text-white);\n margin-bottom: 2px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.reveal-song-info .song-artist {\n font-size: 0.875rem;\n color: var(--color-text-neon-muted);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Year Section with Emotion */\n.reveal-year-section {\n text-align: center;\n padding: var(--space-sm) 0;\n}\n\n.reveal-emotion-inline {\n font-size: 1.25rem;\n font-weight: 700;\n margin-bottom: var(--space-xs);\n animation: reveal-emotion-entrance 0.5s ease-out;\n}\n\n.reveal-year-section .correct-year-label {\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--color-text-neon-muted);\n margin-bottom: var(--space-xs);\n}\n\n.reveal-year-section .correct-year {\n font-size: 3rem;\n}\n\n/* Personal Result - Compact */\n.personal-result-compact {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-sm);\n padding: var(--space-sm) var(--space-md);\n background: rgba(0, 245, 255, 0.1);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-md);\n margin-bottom: var(--space-sm);\n}\n\n.result-content-inline {\n font-size: 0.875rem;\n color: var(--color-text-white);\n}\n\n/* Artist Reveal - Compact */\n.artist-reveal-compact {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-sm);\n padding: var(--space-sm) var(--space-md);\n background: var(--color-surface-dark);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-md);\n margin-bottom: var(--space-sm);\n}\n\n.artist-reveal-icon {\n font-size: 1rem;\n}\n\n.artist-reveal-name-inline {\n font-weight: 600;\n color: var(--color-accent-secondary);\n}\n\n.artist-reveal-winner-inline {\n font-size: 0.75rem;\n color: var(--color-text-neon-muted);\n}\n\n.artist-reveal-winner-inline::before {\n content: \"\u2022\";\n margin-right: var(--space-xs);\n}\n\n/* Fun Fact Card Section */\n.fun-fact-section {\n text-align: left;\n}\n\n.fun-fact-section .fun-fact-text {\n font-size: 0.875rem;\n color: var(--color-text-white);\n line-height: 1.5;\n margin-bottom: var(--space-sm);\n}\n\n.fun-fact-section .song-rich-info {\n font-size: 0.75rem;\n color: var(--color-text-neon-muted);\n}\n\n/* Consistent section content padding */\n.section-content-padded {\n padding: 0 var(--space-md) var(--space-md);\n}\n\n/* Remove side padding when inside card-section (card already has padding) */\n.card-section .section-content-padded {\n padding: 0 0 var(--space-sm);\n}\n\n/* All Guesses Card Section */\n.guesses-section {\n text-align: left;\n}\n\n.reveal-results-grid {\n width: 100%;\n}\n\n/* Personal Result Card Section */\n.personal-result-section {\n text-align: left;\n}\n\n.personal-result-section .result-row {\n display: flex;\n justify-content: space-between;\n padding: var(--space-xs) 0;\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n}\n\n.personal-result-section .result-row:last-child {\n border-bottom: none;\n}\n\n/* Artist Reveal Card Section */\n.artist-reveal-section {\n text-align: left;\n}\n\n.artist-reveal-section .artist-reveal-name {\n font-size: 1.25rem;\n font-weight: 700;\n color: var(--color-accent-secondary);\n margin-bottom: var(--space-xs);\n}\n\n.artist-reveal-section .artist-reveal-winner {\n font-size: 0.875rem;\n color: var(--color-text-neon-muted);\n}\n\n/* Round Analytics Card Section */\n.round-analytics-section {\n width: 100%;\n background: var(--color-surface-dark);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-md);\n overflow: hidden;\n text-align: left;\n}\n\n.round-analytics-section .section-header-collapsible {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n width: 100%;\n padding: var(--space-sm) var(--space-md);\n background: transparent;\n border: none;\n color: var(--color-text-white);\n font-size: 0.875rem;\n font-weight: 600;\n cursor: pointer;\n text-align: left;\n}\n\n.round-analytics-section .section-header-collapsible .section-icon {\n font-size: 1rem;\n}\n\n.round-analytics-section .section-header-collapsible .section-summary {\n margin-left: auto;\n font-size: 0.75rem;\n font-weight: 400;\n color: var(--color-accent-secondary);\n background: rgba(0, 245, 255, 0.1);\n padding: 2px 8px;\n border-radius: var(--radius-sm);\n}\n\n.round-analytics-section .section-header-collapsible .section-toggle {\n margin-left: var(--space-sm);\n font-size: 0.625rem;\n color: var(--color-text-neon-muted);\n transition: transform 0.2s ease;\n}\n\n.round-analytics-section .section-content {\n padding: 0 var(--space-md) var(--space-sm);\n}\n\n.round-analytics-section.collapsed .section-content {\n display: none;\n}\n\n.round-analytics-section:not(.collapsed) .section-toggle {\n transform: rotate(180deg);\n}\n\n/* Legacy styles preserved */\n.reveal-round-info {\n font-size: var(--font-size-base);\n color: var(--color-text-muted);\n margin-bottom: var(--space-md);\n}\n\n/* Album Cover (smaller for reveal) - legacy */\n.reveal-album {\n margin-bottom: var(--space-lg);\n}\n\n.reveal-album-cover {\n width: 150px;\n height: 150px;\n object-fit: cover;\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-lg);\n}\n\n/* Correct Year */\n.correct-year-container {\n margin-bottom: var(--space-md);\n}\n\n.correct-year-label {\n font-size: var(--font-size-md);\n color: var(--color-text-muted);\n margin-bottom: var(--space-sm);\n}\n\n.correct-year {\n font-size: var(--font-size-hero);\n font-weight: var(--font-weight-extrabold);\n color: var(--color-success);\n font-variant-numeric: tabular-nums;\n animation: reveal-pop var(--transition-slow) ease-out;\n}\n\n@keyframes reveal-pop {\n 0% {\n transform: scale(0.5);\n opacity: 0;\n }\n 70% {\n transform: scale(1.1);\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n/* Song Info */\n.song-info {\n margin-bottom: var(--space-md);\n}\n\n.song-title {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-primary);\n margin-bottom: var(--space-xs);\n}\n\n.song-artist {\n font-size: var(--font-size-md);\n color: var(--color-text-muted);\n}\n\n/* Fun Fact + Rich Song Info Container */\n.fun-fact-container {\n display: flex;\n flex-direction: column;\n gap: var(--space-sm);\n background: var(--color-warning-light);\n padding: var(--space-md);\n border-radius: var(--radius-lg);\n margin-bottom: var(--space-lg);\n text-align: left;\n max-width: 100%;\n}\n\n.fun-fact-header {\n display: flex;\n align-items: flex-start;\n gap: var(--space-sm);\n}\n\n.fun-fact-icon {\n font-size: var(--font-size-xl);\n flex-shrink: 0;\n}\n\n.fun-fact-text {\n font-size: var(--font-size-base);\n color: #92400e;\n line-height: 1.4;\n}\n\n/* Hide fun fact header when no fun fact text */\n.fun-fact-header:empty,\n.fun-fact-text:empty {\n display: none;\n}\n\n/* ============================================\n Rich Song Info (Story 14.3) - inside fun fact box\n ============================================ */\n\n.song-rich-info {\n text-align: left;\n}\n\n.song-rich-info:empty {\n display: none;\n}\n\n/* ============================================\n Song Info Badges - Unified Design\n All badges centered with consistent styling\n ============================================ */\n\n/* Shared badge container - centers all badge rows */\n.song-badges-row {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-sm);\n margin-top: var(--space-sm);\n padding-top: var(--space-sm);\n border-top: 1px solid rgba(120, 53, 15, 0.15);\n}\n\n.song-badges-row:first-child {\n border-top: none;\n padding-top: 0;\n}\n\n/* Base badge style - shared by all badge types */\n.song-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-semibold);\n border-radius: 20px;\n border: 1px solid;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n white-space: nowrap;\n}\n\n.song-badge-icon {\n font-size: 14px;\n line-height: 1;\n}\n\n/* Chart position badge - blue theme */\n.song-badge--chart {\n background: linear-gradient(135deg, #dbeafe, #bfdbfe);\n color: #1e40af;\n border-color: #93c5fd;\n}\n\n.song-badge--chart .chart-weeks {\n font-weight: normal;\n opacity: 0.8;\n font-size: 11px;\n}\n\n/* Certification badges */\n.song-badge--platinum {\n background: linear-gradient(135deg, #f1f5f9, #e2e8f0);\n color: #475569;\n border-color: #cbd5e1;\n}\n\n.song-badge--gold {\n background: linear-gradient(135deg, #fef3c7, #fde68a);\n color: #92400e;\n border-color: #fcd34d;\n}\n\n.song-badge--diamond {\n background: linear-gradient(135deg, #e0f2fe, #bae6fd);\n color: #0369a1;\n border-color: #7dd3fc;\n}\n\n/* Award badges - warm orange/amber theme */\n.song-badge--award {\n background: linear-gradient(135deg, #ffedd5, #fed7aa);\n color: #9a3412;\n border-color: #fdba74;\n}\n\n/* Special award variants */\n.song-badge--grammy {\n background: linear-gradient(135deg, #fef3c7, #fde68a);\n color: #78350f;\n border-color: #f59e0b;\n}\n\n.song-badge--eurovision {\n background: linear-gradient(135deg, #ede9fe, #ddd6fe);\n color: #5b21b6;\n border-color: #a78bfa;\n}\n\n.song-badge--oscar,\n.song-badge--academy {\n background: linear-gradient(135deg, #fef3c7, #fde68a);\n color: #78350f;\n border-color: #f59e0b;\n}\n\n.song-badge--halloffame {\n background: linear-gradient(135deg, #dbeafe, #bfdbfe);\n color: #1e40af;\n border-color: #60a5fa;\n}\n\n/* More awards indicator */\n.song-badges-more {\n font-size: var(--font-size-xs);\n color: #78350f;\n font-style: italic;\n opacity: 0.8;\n}\n\n/* ============================================\n Song Difficulty Rating (Story 15.1)\n ============================================ */\n\n.song-difficulty {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n justify-content: center;\n margin-top: var(--space-sm);\n opacity: 0;\n animation: fadeIn 0.5s ease-out forwards;\n animation-delay: 0.3s;\n}\n\n.difficulty-stars {\n font-size: 1.2rem;\n letter-spacing: 0.1em;\n}\n\n/* Easy (1-star): green glow */\n.difficulty-1 {\n color: var(--color-success-neon);\n text-shadow: 0 0 10px var(--color-success-neon);\n}\n\n/* Medium (2-star): yellow */\n.difficulty-2 {\n color: var(--color-warning);\n text-shadow: 0 0 10px var(--color-warning);\n}\n\n/* Hard (3-star): orange */\n.difficulty-3 {\n color: var(--color-warning-alt);\n text-shadow: 0 0 10px var(--color-warning-alt);\n}\n\n/* Extreme (4-star): red/pink neon */\n.difficulty-4 {\n color: var(--color-accent-primary);\n text-shadow: 0 0 10px var(--color-accent-primary);\n}\n\n.difficulty-label {\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n font-size: var(--font-size-sm);\n}\n\n.difficulty-accuracy {\n font-size: 0.85em;\n opacity: 0.7;\n}\n\n/* ============================================\n Superlatives / Fun Awards (Story 15.2)\n ============================================ */\n\n.superlatives-container {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-md);\n margin: var(--space-lg) 0;\n padding: 0 var(--space-md);\n}\n\n.superlative-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-md);\n min-width: 120px;\n max-width: 160px;\n background: var(--color-dark-surface);\n border-radius: var(--radius-lg);\n border: 1px solid rgba(255, 255, 255, 0.1);\n opacity: 0;\n animation: superlativeSlideIn 0.5s ease-out forwards;\n}\n\n@keyframes superlativeSlideIn {\n from {\n opacity: 0;\n transform: translateY(20px) scale(0.9);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n.superlative-emoji {\n font-size: 2rem;\n margin-bottom: var(--space-xs);\n}\n\n.superlative-title {\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n font-size: var(--font-size-xs);\n color: var(--color-accent-secondary);\n text-align: center;\n margin-bottom: var(--space-xs);\n}\n\n.superlative-player {\n font-weight: bold;\n font-size: var(--font-size-base);\n color: var(--color-dark-text-primary);\n text-align: center;\n margin-bottom: var(--space-xs);\n}\n\n.superlative-value {\n font-size: var(--font-size-sm);\n color: var(--color-dark-text-secondary);\n text-align: center;\n}\n\n/* Card-specific accent colors */\n.superlative-card--speed_demon {\n border-color: var(--color-warning);\n box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);\n}\n\n.superlative-card--lucky_streak {\n border-color: var(--color-error);\n box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);\n}\n\n.superlative-card--risk_taker {\n border-color: var(--color-purple-primary);\n box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);\n}\n\n.superlative-card--clutch_player {\n border-color: var(--color-success-neon);\n box-shadow: 0 0 15px rgba(57, 255, 20, 0.2);\n}\n\n.superlative-card--close_calls {\n border-color: var(--color-accent-secondary);\n box-shadow: 0 0 15px rgba(0, 245, 255, 0.2);\n}\n\n/* ============================================\n Game Highlights Reel (Issue #75)\n ============================================ */\n\n.highlights-container {\n width: 100%;\n margin-top: var(--space-lg);\n margin-bottom: var(--space-lg);\n}\n\n.highlights-header {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-white);\n text-align: center;\n margin-bottom: var(--space-md);\n}\n\n.highlights-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-sm);\n}\n\n.highlight-card {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n padding: var(--space-md);\n background: var(--color-dark-surface);\n border-radius: var(--radius-lg);\n border: 1px solid rgba(255, 255, 255, 0.1);\n opacity: 0;\n animation: highlightFadeIn 0.5s ease-out forwards;\n}\n\n@keyframes highlightFadeIn {\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n.highlight-emoji {\n font-size: 1.8rem;\n flex-shrink: 0;\n width: 48px;\n text-align: center;\n}\n\n.highlight-content {\n flex: 1;\n min-width: 0;\n}\n\n.highlight-text {\n font-size: var(--font-size-base);\n color: var(--color-dark-text-primary);\n line-height: 1.4;\n}\n\n.highlight-round {\n font-size: var(--font-size-xs);\n color: var(--color-dark-text-secondary);\n margin-top: var(--space-xs);\n}\n\n/* Mobile responsive */\n@media (max-width: 480px) {\n .highlight-card {\n padding: var(--space-sm);\n gap: var(--space-sm);\n }\n\n .highlight-emoji {\n font-size: 1.4rem;\n width: 36px;\n }\n\n .highlight-text {\n font-size: var(--font-size-sm);\n }\n}\n\n/* ============================================\n Round Analytics (Story 13.3)\n ============================================ */\n\n.round-analytics {\n width: 100%;\n margin-top: var(--space-lg);\n margin-bottom: var(--space-lg);\n padding: var(--space-md);\n background: var(--color-dark-surface);\n border-radius: var(--radius-lg);\n text-align: center;\n}\n\n.analytics-title {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-white);\n margin-bottom: var(--space-md);\n}\n\n/* Analytics stats - single row layout */\n.analytics-stats-row {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: var(--space-lg);\n margin-bottom: var(--space-xs);\n}\n\n.stat-primary {\n text-align: left;\n}\n\n.stat-primary .stat-label {\n font-size: var(--font-size-sm);\n color: var(--color-text-neon-muted);\n display: block;\n margin-bottom: var(--space-xs);\n}\n\n.stat-primary .stat-value {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-bold);\n color: var(--color-accent-secondary);\n}\n\n.stat-secondary {\n text-align: right;\n}\n\n.stat-secondary .stat-value {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-bold);\n color: var(--color-success);\n}\n\n.stat-secondary .stat-label {\n font-size: var(--font-size-sm);\n color: var(--color-text-neon-muted);\n display: block;\n}\n\n.stat-comparison-line {\n font-size: var(--font-size-sm);\n color: var(--color-text-neon-muted);\n margin-bottom: var(--space-md);\n}\n\n/* Histogram */\n.analytics-histogram {\n margin-bottom: var(--space-lg);\n}\n\n.histogram-title {\n font-size: var(--font-size-base);\n color: var(--color-text-neon-muted);\n margin-bottom: var(--space-sm);\n}\n\n/* #1178: per-player dot-axis (replaces aggregated histogram on phone reveal).\n Each player's guess is a colored dot at the exact year on a horizontal axis;\n the correct year is marked by a vertical cyan line. */\n.dotaxis-wrap {\n margin: 14px 0 16px;\n}\n.dotaxis-axis {\n position: relative;\n height: 88px;\n margin: 0 14px;\n}\n.dotaxis-line {\n position: absolute;\n left: 0; right: 0;\n top: 52px;\n height: 2px;\n background: rgba(255, 255, 255, 0.12);\n border-radius: 2px;\n}\n.dotaxis-tick {\n position: absolute;\n top: 48px;\n width: 1px;\n height: 10px;\n background: rgba(255, 255, 255, 0.18);\n}\n.dotaxis-tick-label {\n position: absolute;\n top: 64px;\n font-size: 9px;\n color: rgba(255, 255, 255, 0.5);\n transform: translateX(-50%);\n letter-spacing: 0.3px;\n font-weight: 500;\n}\n.dotaxis-marker {\n position: absolute;\n top: 4px;\n bottom: 18px;\n width: 2px;\n background: linear-gradient(180deg, transparent, var(--color-cyan, #00d4ff) 30%, var(--color-cyan, #00d4ff) 80%, transparent);\n box-shadow: 0 0 8px var(--color-cyan, #00d4ff), 0 0 16px rgba(0, 212, 255, 0.6);\n}\n.dotaxis-marker-label {\n position: absolute;\n top: -4px;\n left: 50%;\n transform: translateX(-50%);\n background: var(--color-cyan, #00d4ff);\n color: #0a0a0e;\n font-family: var(--font-family-display, 'Outfit', sans-serif);\n font-weight: 900;\n font-size: 12px;\n padding: 3px 8px;\n border-radius: 6px;\n box-shadow: 0 0 14px rgba(0, 212, 255, 0.6);\n white-space: nowrap;\n}\n.dotaxis-dot {\n position: absolute;\n top: 39px;\n width: 26px;\n height: 26px;\n border-radius: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-display, 'Outfit', sans-serif);\n font-weight: 900;\n font-size: 12px;\n color: #fff;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n box-shadow: 0 0 0 3px var(--color-bg-primary, #0d0d12), 0 4px 10px rgba(0, 0, 0, 0.4);\n cursor: default;\n}\n.dotaxis-dot--c1 { background: linear-gradient(135deg, #ff6ec7, #d846a7); }\n.dotaxis-dot--c2 { background: linear-gradient(135deg, #6e3bff, #4a25c8); }\n.dotaxis-dot--c3 { background: linear-gradient(135deg, #ffd60a, #e6b800); color: #1a1a22; text-shadow: none; }\n.dotaxis-dot--c4 { background: linear-gradient(135deg, #00d4ff, #008abf); }\n.dotaxis-dot--correct {\n box-shadow: 0 0 0 3px var(--color-bg-primary, #0d0d12), 0 0 18px currentColor, 0 4px 10px rgba(0, 0, 0, 0.4);\n}\n.dotaxis-dot--me {\n box-shadow: 0 0 0 3px var(--color-bg-primary, #0d0d12), 0 0 0 5px rgba(255, 159, 67, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4);\n}\n.dotaxis-dot--correct.dotaxis-dot--me {\n box-shadow: 0 0 0 3px var(--color-bg-primary, #0d0d12), 0 0 0 5px rgba(255, 159, 67, 0.6), 0 0 22px currentColor, 0 4px 10px rgba(0, 0, 0, 0.4);\n}\n.dotaxis-score {\n position: absolute;\n top: 12px;\n transform: translateX(-50%);\n font-family: var(--font-family-display, 'Outfit', sans-serif);\n font-weight: 800;\n font-size: 11px;\n padding: 2px 6px;\n border-radius: 6px;\n background: rgba(255, 255, 255, 0.08);\n white-space: nowrap;\n}\n.dotaxis-score--pos {\n background: rgba(0, 212, 255, 0.18);\n color: var(--color-cyan, #00d4ff);\n}\n.dotaxis-score--zero {\n color: rgba(255, 255, 255, 0.35);\n}\n.dotaxis-legend {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 8px 14px;\n font-size: 11px;\n color: rgba(255, 255, 255, 0.75);\n margin-top: 4px;\n}\n.dotaxis-legend-entry {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n}\n.dotaxis-legend-dot {\n display: inline-block;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n flex-shrink: 0;\n}\n.dotaxis-legend-medal {\n font-size: 13px;\n line-height: 1;\n}\n.dotaxis-legend-me {\n color: rgba(255, 159, 67, 1);\n font-weight: 700;\n font-size: 10px;\n margin-left: 2px;\n letter-spacing: 0.3px;\n}\n\n.histogram-bars {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n height: 120px;\n gap: var(--space-xs);\n padding: 0 var(--space-xs);\n}\n\n.histogram-bar-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 100%;\n animation: histogram-fade-in 0.3s ease forwards;\n opacity: 0;\n}\n\n.histogram-bar {\n width: 100%;\n max-width: 40px;\n background: linear-gradient(180deg, var(--color-accent-primary), var(--color-accent-brand));\n border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n transition: height 0.5s ease;\n min-height: 0;\n}\n\n.histogram-bar.is-correct {\n background: linear-gradient(180deg, var(--color-success-neon), var(--color-success));\n box-shadow: var(--glow-success);\n}\n\n.bar-count {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-bold);\n color: var(--color-text-white);\n padding-top: var(--space-xs);\n}\n\n.histogram-label {\n font-size: var(--font-size-xs);\n color: var(--color-text-neon-muted);\n margin-top: var(--space-xs);\n}\n\n@keyframes histogram-fade-in {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Achievements */\n.analytics-achievements {\n display: flex;\n flex-direction: column;\n gap: var(--space-sm);\n text-align: left;\n}\n\n.achievement-item {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n font-size: var(--font-size-sm);\n color: var(--color-text-white);\n}\n\n.achievement-emoji {\n font-size: var(--font-size-lg);\n}\n\n.achievement-label {\n color: var(--color-text-neon-muted);\n}\n\n.achievement-names {\n font-weight: var(--font-weight-semibold);\n}\n\n.achievement-value {\n color: var(--color-text-neon-muted);\n}\n\n/* Empty state */\n.analytics-empty {\n text-align: center;\n color: var(--color-text-neon-muted);\n padding: var(--space-lg);\n font-style: italic;\n}\n\n/* Reduced motion support (AC6) */\n@media (prefers-reduced-motion: reduce) {\n .histogram-bar-wrapper {\n animation: none;\n opacity: 1;\n }\n\n .histogram-bar {\n transition: none;\n }\n}\n\n/* Reveal Emotion (Story 9.4) */\n.reveal-emotion {\n text-align: center;\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-bold);\n margin-bottom: var(--space-md);\n animation: reveal-emotion-entrance 0.5s ease-out;\n}\n\n.reveal-emotion--exact {\n color: var(--color-success);\n text-shadow: 0 0 20px var(--color-success);\n}\n\n.reveal-emotion--close {\n color: var(--color-warning);\n animation: reveal-emotion-entrance 0.5s ease-out, reveal-shake 0.5s ease-in-out 0.5s;\n}\n\n.reveal-emotion--wrong {\n color: var(--color-text-muted);\n}\n\n.reveal-emotion--missed {\n color: var(--color-text-muted);\n opacity: 0.7;\n}\n\n.reveal-emotion-subtitle {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n margin-top: var(--space-xs);\n opacity: 0.8;\n}\n\n@keyframes reveal-emotion-entrance {\n 0% { opacity: 0; transform: scale(0.8); }\n 50% { transform: scale(1.1); }\n 100% { opacity: 1; transform: scale(1); }\n}\n\n@keyframes reveal-shake {\n 0%, 100% { transform: translateX(0); }\n 20%, 60% { transform: translateX(-5px); }\n 40%, 80% { transform: translateX(5px); }\n}\n\n/* Confetti Canvas (Story 9.4, Story 14.5) */\n.confetti-canvas {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: var(--z-modal);\n}\n\n/* canvas-confetti library creates canvas dynamically at body level - ensure non-blocking (AC6) */\n/* M2 fix: Scoped to body > canvas to avoid affecting other fixed canvases */\nbody > canvas[style*=\"position: fixed\"] {\n pointer-events: none !important;\n}\n\n/* Score breakdown fade-in delay (Story 9.4) */\n.personal-result.is-delayed {\n opacity: 0;\n animation: fade-in-delay 0.5s ease-out 1s forwards;\n}\n\n@keyframes fade-in-delay {\n to { opacity: 1; }\n}\n\n/* Reduced motion support for reveal */\n@media (prefers-reduced-motion: reduce) {\n .reveal-emotion,\n .reveal-emotion--close {\n animation: none;\n }\n .personal-result.is-delayed {\n opacity: 1;\n animation: none;\n }\n}\n\n/* Personal Result */\n.personal-result {\n width: 100%;\n background: var(--color-bg-card-alt);\n padding: var(--space-md);\n border-radius: var(--radius-lg);\n margin-bottom: var(--space-lg);\n}\n\n.result-header {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-muted);\n margin-bottom: var(--space-sm);\n}\n\n.result-content {\n display: flex;\n flex-direction: column;\n gap: var(--space-sm);\n}\n\n.result-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.result-label {\n font-size: var(--font-size-base);\n color: var(--color-text-muted);\n}\n\n.result-value {\n font-size: var(--font-size-md);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-primary);\n}\n\n.result-value.is-exact {\n color: var(--color-success);\n}\n\n.result-value.is-close {\n color: var(--color-warning);\n}\n\n.result-value.is-far {\n color: var(--color-error);\n}\n\n/* Speed bonus indicator (Story 5.1) */\n.result-value.is-bonus {\n color: var(--color-warning);\n font-weight: var(--font-weight-bold);\n}\n\n.result-score {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n color: var(--color-accent-brand);\n margin-top: var(--space-sm);\n}\n\n.result-missed {\n font-size: var(--font-size-md);\n color: var(--color-error);\n font-weight: var(--font-weight-semibold);\n}\n\n/* Streak bonus styling (Story 5.2) */\n.result-value.is-streak {\n color: var(--color-error);\n font-weight: var(--font-weight-bold);\n}\n\n.streak-bonus-row {\n background: linear-gradient(90deg, var(--color-warning-light), #fde68a);\n padding: var(--space-sm) var(--space-md);\n border-radius: var(--radius-md);\n margin: var(--space-sm) 0;\n color: #1a1a1a;\n}\n\n.result-total {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-bold);\n color: var(--color-success);\n margin-top: var(--space-sm);\n padding-top: var(--space-sm);\n border-top: 2px dashed var(--color-border-light);\n}\n\n/* Leaderboard streak indicator (Story 5.2) */\n.streak-indicator {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n font-size: var(--font-size-sm);\n color: var(--color-warning);\n font-weight: var(--font-weight-semibold);\n}\n\n.streak-indicator::before {\n content: \"\\01F525\";\n}\n\n/* Bet toggle (Story 5.3) */\n.bet-container {\n margin-bottom: var(--space-md);\n /* Fix Safari desktop click issue - establish stacking context */\n position: relative;\n z-index: 1;\n}\n\n.bet-toggle {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n padding: var(--space-sm) var(--space-xl);\n background: var(--color-bg-card-alt);\n border: 2px solid var(--color-border-medium);\n border-radius: var(--radius-lg);\n cursor: pointer;\n /* Fix Safari: use specific properties instead of 'all' */\n transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-muted);\n width: 100%;\n justify-content: center;\n /* Fix Safari desktop click handling */\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n user-select: none;\n touch-action: manipulation;\n}\n\n.bet-toggle:hover {\n border-color: var(--color-text-light);\n}\n\n.bet-toggle.is-active {\n background: var(--color-warning-light);\n border-color: var(--color-warning);\n color: #92400e;\n}\n\n.bet-toggle.is-active .bet-icon {\n animation: dice-shake var(--transition-slow) ease;\n}\n\n@keyframes dice-shake {\n 0%, 100% { transform: rotate(0deg); }\n 25% { transform: rotate(-10deg); }\n 75% { transform: rotate(10deg); }\n}\n\n/* Dark theme bet toggle (Story 9.10) */\nbody.theme-dark .bet-toggle {\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.2);\n color: var(--color-text-white);\n}\n\nbody.theme-dark .bet-toggle.is-active {\n background: var(--color-warning);\n border-color: var(--color-warning);\n color: var(--color-text-primary);\n}\n\n/* Bet outcomes */\n.bet-won-row {\n background: linear-gradient(90deg, var(--color-success-light), #a7f3d0);\n padding: var(--space-sm) var(--space-sm);\n border-radius: var(--radius-md);\n margin: var(--space-sm) 0;\n}\n\n/* Bet rows have light backgrounds - need dark text even in dark mode */\n.bet-won-row .result-label,\nbody.theme-dark .bet-won-row .result-label {\n color: #166534;\n}\n\n.result-value.is-bet-won,\nbody.theme-dark .result-value.is-bet-won {\n color: #166534;\n font-weight: var(--font-weight-bold);\n}\n\n.bet-lost-row {\n background: linear-gradient(90deg, var(--color-error-light), #fecaca);\n padding: var(--space-sm) var(--space-sm);\n border-radius: var(--radius-md);\n margin: var(--space-sm) 0;\n}\n\n/* Bet rows have light backgrounds - need dark text even in dark mode */\n.bet-lost-row .result-label,\nbody.theme-dark .bet-lost-row .result-label {\n color: #991b1b;\n}\n\n.result-value.is-bet-lost,\nbody.theme-dark .result-value.is-bet-lost {\n color: #991b1b;\n font-weight: var(--font-weight-bold);\n}\n\n/* Missed round styling (Story 5.4) */\n.result-missed-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-sm);\n padding: var(--space-md);\n}\n\n.result-missed-icon {\n font-size: var(--font-size-2xl);\n}\n\n.result-missed-text {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-muted);\n}\n\n.streak-broken {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n margin-top: var(--space-sm);\n padding: var(--space-sm) var(--space-md);\n background: var(--color-error-light);\n border-radius: var(--radius-md);\n}\n\n.streak-broken-icon {\n font-size: var(--font-size-xl);\n}\n\n.streak-broken-text {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-semibold);\n color: var(--color-error-dark);\n}\n\n/* Streak-Shield (#1666) \u2014 the counterpart to .streak-broken above. Same\n shape on purpose: both explain what just happened to a streak, so they\n should read as one pair rather than two unrelated notices. Success colours\n because the run survived. */\n.streak-shield-used {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n margin-top: var(--space-sm);\n padding: var(--space-sm) var(--space-md);\n background: var(--color-success-light);\n border-radius: var(--radius-md);\n}\n\n.streak-shield-icon {\n font-size: var(--font-size-xl);\n}\n\n.streak-shield-text {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-semibold);\n color: var(--color-success-hover);\n}\n\n.result-score.is-zero {\n color: var(--color-text-light);\n font-size: var(--font-size-2xl);\n}\n\n/* ============================================\n Leaderboard (Story 5.5)\n ============================================ */\n\n/* Game view leaderboard - uses collapsible section pattern */\n.leaderboard-section {\n width: 100%;\n background: var(--color-surface-dark);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-md);\n overflow: hidden;\n}\n\n.leaderboard-section .section-header-collapsible {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n width: 100%;\n padding: var(--space-sm) var(--space-md);\n background: transparent;\n border: none;\n color: var(--color-text-white);\n font-size: 0.875rem;\n font-weight: 600;\n cursor: pointer;\n text-align: left;\n}\n\n.leaderboard-section .section-header-collapsible .section-icon {\n font-size: 1rem;\n}\n\n.leaderboard-section .section-header-collapsible .section-summary {\n margin-left: auto;\n font-size: 0.75rem;\n font-weight: 400;\n color: var(--color-accent-secondary);\n background: rgba(0, 245, 255, 0.1);\n padding: 2px 8px;\n border-radius: var(--radius-sm);\n}\n\n.leaderboard-section .section-header-collapsible .section-toggle {\n margin-left: var(--space-sm);\n font-size: 0.625rem;\n color: var(--color-text-neon-muted);\n transition: transform 0.2s ease;\n}\n\n.leaderboard-section .section-content {\n padding: 0;\n}\n\n.leaderboard-section .leaderboard-list {\n max-height: 200px;\n overflow-y: auto;\n}\n\n.leaderboard-section.collapsed .section-content {\n display: none;\n}\n\n.leaderboard-section:not(.collapsed) .section-toggle {\n transform: rotate(180deg);\n}\n\n/* Leaderboard container (legacy) */\n.leaderboard {\n background: var(--color-bg-white);\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-md);\n overflow: hidden;\n width: 100%;\n margin-bottom: var(--space-md);\n}\n\n.leaderboard.is-compact .leaderboard-list {\n max-height: 120px;\n}\n\n.leaderboard.is-expanded .leaderboard-list {\n max-height: 400px;\n}\n\n.leaderboard.is-prominent {\n margin-top: var(--space-md);\n}\n\n.leaderboard.is-prominent .leaderboard-list {\n max-height: 280px;\n}\n\n.leaderboard-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--space-sm) var(--space-md);\n background: var(--color-bg-card-alt);\n border-bottom: 1px solid var(--color-border-light);\n}\n\n.leaderboard-title {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-secondary);\n}\n\n.leaderboard-toggle {\n background: none;\n border: none;\n cursor: pointer;\n padding: var(--space-xs);\n min-width: auto;\n min-height: auto;\n color: var(--color-text-muted);\n}\n\n.leaderboard-list {\n max-height: 200px;\n overflow-y: auto;\n /* Story 18.1: CSS containment for scroll performance (layout style paint, not strict/size) */\n contain: layout style paint;\n will-change: transform;\n}\n\n/* Story 18.1: Spacer elements for lazy loading virtual scroll */\n.leaderboard-spacer-top,\n.leaderboard-spacer-bottom {\n flex-shrink: 0;\n pointer-events: none;\n}\n\n/* Story 18.1: Sentinel elements for IntersectionObserver */\n.leaderboard-sentinel {\n flex-shrink: 0;\n pointer-events: none;\n visibility: hidden;\n}\n\n/* Leaderboard entries */\n.leaderboard-entry {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n padding: 10px var(--space-md);\n border-bottom: 1px solid var(--color-bg-card-alt);\n transition: background var(--transition-fast);\n /* Story 18.1: CSS containment for layout isolation */\n contain: content;\n height: 48px;\n box-sizing: border-box;\n}\n\n.leaderboard-entry:last-child {\n border-bottom: none;\n}\n\n.leaderboard-entry.is-current {\n background: #eff6ff;\n border-left: 3px solid var(--color-accent-blue);\n}\n\n/* Top 3 styling */\n.leaderboard-entry.is-top-1 {\n background: linear-gradient(90deg, var(--color-warning-light), #fde68a);\n}\n\n.leaderboard-entry.is-top-1 .entry-rank {\n color: #b45309;\n font-weight: var(--font-weight-bold);\n}\n\n.leaderboard-entry.is-top-2 {\n background: linear-gradient(90deg, var(--color-bg-card-alt), var(--color-border-light));\n}\n\n.leaderboard-entry.is-top-2 .entry-rank {\n color: var(--color-text-muted);\n font-weight: var(--font-weight-bold);\n}\n\n.leaderboard-entry.is-top-3 {\n background: linear-gradient(90deg, #fed7aa, #fdba74);\n}\n\n.leaderboard-entry.is-top-3 .entry-rank {\n color: #c2410c;\n font-weight: var(--font-weight-bold);\n}\n\n.entry-rank {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-muted);\n min-width: 28px;\n}\n\n.entry-name {\n flex: 1;\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-medium);\n color: var(--color-text-primary);\n display: flex;\n align-items: center;\n gap: var(--space-xs);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.entry-meta {\n display: flex;\n align-items: center;\n gap: var(--space-xs);\n}\n\n.entry-score {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-bold);\n color: var(--color-accent-brand);\n min-width: 40px;\n text-align: right;\n}\n\n/* Rank change indicators */\n.rank-up {\n font-size: var(--font-size-xs);\n color: var(--color-success);\n font-weight: var(--font-weight-semibold);\n}\n\n.rank-down {\n font-size: var(--font-size-xs);\n color: var(--color-error);\n font-weight: var(--font-weight-semibold);\n}\n\n/* Rank change animations (Story 9.5) */\n.leaderboard-entry--climbing {\n animation: leaderboard-climb 400ms ease-out;\n}\n\n.leaderboard-entry--falling {\n animation: leaderboard-fall 400ms ease-out;\n}\n\n/* Disconnected player in leaderboard (Story 11.4) */\n.leaderboard-entry--disconnected {\n opacity: 0.5;\n transition: opacity 0.3s ease;\n}\n\n@keyframes leaderboard-climb {\n 0% { transform: translateY(10px); opacity: 0.7; background: rgba(0, 255, 136, 0.2); }\n 100% { transform: translateY(0); opacity: 1; background: transparent; }\n}\n\n@keyframes leaderboard-fall {\n 0% { transform: translateY(-10px); opacity: 0.7; background: rgba(255, 0, 64, 0.2); }\n 100% { transform: translateY(0); opacity: 1; background: transparent; }\n}\n\n/* Streak indicators (Story 9.5) */\n.streak-indicator {\n font-size: var(--font-size-xs);\n color: var(--color-warning);\n}\n\n.streak-indicator--hot {\n text-shadow: 0 0 8px var(--color-warning);\n animation: streak-pulse 1s ease-in-out infinite;\n}\n\n@keyframes streak-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n}\n\n/* Leaderboard separator (Story 9.5) */\n.leaderboard-separator {\n text-align: center;\n padding: var(--space-xs) var(--space-md);\n color: var(--color-text-muted);\n font-size: var(--font-size-sm);\n border-bottom: 1px solid var(--color-bg-card-alt);\n}\n\n/* Reduced motion support for leaderboard */\n@media (prefers-reduced-motion: reduce) {\n .leaderboard-entry--climbing,\n .leaderboard-entry--falling {\n animation: none;\n }\n .streak-indicator--hot {\n animation: none;\n }\n}\n\n/* Quick you indicator */\n.leaderboard-you {\n position: sticky;\n bottom: 0;\n padding: var(--space-sm) var(--space-md);\n background: var(--color-accent-blue);\n color: var(--color-text-white);\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n text-align: center;\n}\n\n/* ============================================\n Final Leaderboard / End View (Story 5.6)\n ============================================ */\n\n/* End view container */\n.end-container {\n padding: var(--space-lg);\n max-width: 480px;\n margin: 0 auto;\n text-align: center;\n}\n\n.end-header {\n margin-bottom: var(--space-lg);\n}\n\n.end-title {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-extrabold);\n color: var(--color-text-primary);\n margin-bottom: var(--space-sm);\n}\n\n.end-subtitle {\n font-size: var(--font-size-md);\n color: var(--color-text-muted);\n margin: 0;\n}\n\n/* Podium */\n.podium {\n display: flex;\n justify-content: center;\n align-items: flex-end;\n gap: var(--space-sm);\n margin-bottom: var(--space-xl);\n}\n\n.podium-place {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100px;\n}\n\n.podium-medal {\n font-size: var(--font-size-4xl);\n margin-bottom: var(--space-sm);\n}\n\n.podium-name {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-primary);\n margin-bottom: var(--space-xs);\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.podium-score {\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n margin-bottom: var(--space-sm);\n}\n\n.podium-stand {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-extrabold);\n color: var(--color-text-white);\n border-radius: var(--radius-md) var(--radius-md) 0 0;\n}\n\n.podium-1 .podium-stand {\n height: 80px;\n background: linear-gradient(180deg, #fbbf24, var(--color-warning-dark));\n}\n\n.podium-2 .podium-stand {\n height: 60px;\n background: linear-gradient(180deg, var(--color-text-light), var(--color-text-muted));\n}\n\n.podium-3 .podium-stand {\n height: 40px;\n background: linear-gradient(180deg, #fb923c, #c2410c);\n}\n\n/* Your result */\n.your-result {\n background: #eff6ff;\n border-radius: var(--radius-xl);\n padding: var(--space-lg);\n margin-bottom: var(--space-lg);\n}\n\n.your-result-header {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-semibold);\n color: var(--color-accent-blue);\n margin-bottom: var(--space-sm);\n}\n\n.your-result-rank {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-extrabold);\n color: var(--color-text-primary);\n}\n\n.your-result-score {\n font-size: var(--font-size-lg);\n color: var(--color-text-muted);\n margin-bottom: var(--space-md);\n}\n\n.your-result-stats {\n display: flex;\n justify-content: center;\n gap: var(--space-lg);\n}\n\n.stat {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.stat-value {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-bold);\n color: var(--color-accent-brand);\n}\n\n.stat-label {\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n}\n\n/* Final leaderboard */\n.final-leaderboard {\n background: var(--color-bg-white);\n border-radius: var(--radius-lg);\n overflow: hidden;\n margin-bottom: var(--space-lg);\n box-shadow: var(--shadow-md);\n}\n\n.final-leaderboard-header {\n padding: var(--space-sm) var(--space-md);\n background: var(--color-bg-card-alt);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-secondary);\n text-align: left;\n}\n\n.final-leaderboard-list {\n max-height: 200px;\n overflow-y: auto;\n}\n\n.final-entry {\n display: flex;\n align-items: center;\n padding: 10px var(--space-md);\n border-bottom: 1px solid var(--color-bg-card-alt);\n}\n\n.final-entry:last-child {\n border-bottom: none;\n}\n\n.final-entry.is-current {\n background: #eff6ff;\n}\n\n/* Disconnected player in final leaderboard (Story 11.4) */\n.final-entry--disconnected {\n opacity: 0.5;\n}\n\n.final-rank {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-muted);\n width: 32px;\n}\n\n.final-name {\n flex: 1;\n font-size: var(--font-size-base);\n color: var(--color-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.final-score {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-semibold);\n color: var(--color-accent-brand);\n}\n\n/* Admin controls for end */\n.end-admin-controls {\n display: flex;\n flex-direction: column;\n gap: var(--space-md);\n margin-bottom: var(--space-md);\n}\n\n.new-game-btn {\n width: 100%;\n padding: var(--space-md) var(--space-xl);\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-white);\n background: var(--color-success);\n border: none;\n border-radius: var(--radius-lg);\n cursor: pointer;\n transition: background var(--transition-fast);\n min-width: auto;\n min-height: auto;\n}\n\n.new-game-btn:hover {\n background: var(--color-success-hover);\n}\n\n.new-game-btn:disabled {\n background: var(--color-text-light);\n cursor: not-allowed;\n}\n\n/* Player message */\n.end-player-message {\n color: var(--color-text-muted);\n}\n\n.end-player-message p {\n margin: 0 0 var(--space-sm) 0;\n}\n\n.end-hint {\n font-size: var(--font-size-base);\n}\n\n.rejoin-hint {\n font-size: var(--font-size-base);\n color: var(--color-text-muted);\n margin-top: var(--space-sm);\n}\n\n/* Admin Controls */\n.reveal-report-row {\n display: flex;\n justify-content: center;\n margin-top: var(--space-md);\n}\n\n.reveal-report-btn {\n background: none;\n border: none;\n padding: var(--space-xs) var(--space-sm);\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n cursor: pointer;\n border-radius: var(--radius-sm);\n transition: color 0.15s ease, opacity 0.15s ease;\n opacity: 0.7;\n}\n\n.reveal-report-btn:hover {\n color: var(--color-text-neon-muted);\n opacity: 1;\n}\n\n.reveal-report-btn:disabled {\n cursor: default;\n opacity: 0.5;\n}\n\n.reveal-admin-controls {\n margin-top: var(--space-md);\n}\n\n.next-round-btn {\n padding: var(--space-md) var(--space-xl);\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-white);\n background: var(--color-accent-brand);\n border: none;\n border-radius: var(--radius-lg);\n cursor: pointer;\n transition: all var(--transition-fast);\n}\n\n.next-round-btn:hover {\n background: var(--color-accent-brand-hover);\n}\n\n.next-round-btn:disabled {\n background: var(--color-text-light);\n cursor: not-allowed;\n}\n\n.next-round-btn.is-final {\n background: var(--color-success);\n}\n\n.next-round-btn.is-final:hover {\n background: var(--color-success-hover);\n}\n\n/* Reveal Admin Buttons Layout (Story 16.5) */\n.reveal-admin-buttons {\n display: flex;\n flex-direction: column;\n gap: var(--space-md);\n align-items: center;\n}\n\n@media (min-width: 480px) {\n .reveal-admin-buttons {\n flex-direction: row;\n justify-content: center;\n }\n}\n\n/* Invite Button (Story 16.5) */\n.invite-btn {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n padding: var(--space-sm) var(--space-lg);\n font-size: var(--font-size-md);\n font-weight: var(--font-weight-medium);\n color: var(--color-text-white);\n background: var(--color-bg-tertiary);\n border: 1px solid var(--color-border-subtle);\n border-radius: var(--radius-lg);\n cursor: pointer;\n transition: all var(--transition-fast);\n min-height: 44px;\n min-width: 44px;\n}\n\n.invite-btn:hover {\n background: var(--color-bg-secondary);\n border-color: var(--color-border-neon);\n}\n\n.invite-btn:active {\n transform: scale(0.98);\n}\n\n.invite-btn-icon {\n font-size: var(--font-size-lg);\n}\n\n.invite-btn-label {\n white-space: nowrap;\n}\n\n/* Invite Modal (Story 16.5) */\n.invite-modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: var(--z-modal);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.invite-modal.hidden {\n display: none;\n}\n\n.invite-modal-backdrop {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.8);\n}\n\n.invite-modal-content {\n position: relative;\n background: var(--color-bg-primary);\n border: 1px solid var(--color-border-neon);\n padding: var(--space-lg);\n border-radius: var(--radius-xl);\n text-align: center;\n max-width: 90vw;\n max-height: 90vh;\n overflow-y: auto;\n animation: modalFadeIn var(--transition-normal) ease-out;\n}\n\n@keyframes modalFadeIn {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n.invite-modal-title {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-bold);\n color: var(--color-text-white);\n margin: 0 0 var(--space-xs);\n}\n\n.invite-modal-hint {\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n margin: 0 0 var(--space-md);\n}\n\n.invite-modal-code {\n display: inline-block;\n padding: var(--space-md);\n background: var(--color-bg-white);\n border-radius: var(--radius-md);\n margin-bottom: var(--space-md);\n}\n\n.invite-modal-code img {\n display: block;\n width: 200px;\n height: 200px;\n}\n\n@media (min-width: 480px) {\n .invite-modal-code img {\n width: 256px;\n height: 256px;\n }\n}\n\n.invite-modal-url-container {\n display: flex;\n gap: var(--space-xs);\n margin-bottom: var(--space-sm);\n max-width: 100%;\n}\n\n.invite-modal-url {\n flex: 1;\n padding: var(--space-sm) var(--space-md);\n font-size: var(--font-size-sm);\n font-family: var(--font-family-mono);\n color: var(--color-text-primary);\n background: var(--color-bg-secondary);\n border: 1px solid var(--color-border-subtle);\n border-radius: var(--radius-md);\n min-width: 0;\n text-overflow: ellipsis;\n}\n\nbody.theme-dark .invite-modal-url {\n color: #e2e8f0;\n background: rgba(255, 255, 255, 0.1);\n border-color: rgba(255, 255, 255, 0.15);\n}\n\n.invite-copy-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-sm);\n min-width: 44px;\n min-height: 44px;\n background: var(--color-accent-brand);\n border: none;\n border-radius: var(--radius-md);\n cursor: pointer;\n transition: all var(--transition-fast);\n}\n\n.invite-copy-btn:hover {\n background: var(--color-accent-brand-hover);\n}\n\n.invite-copy-btn:active {\n transform: scale(0.95);\n}\n\n.invite-copy-icon {\n font-size: var(--font-size-lg);\n}\n\n.invite-copy-feedback {\n font-size: var(--font-size-sm);\n color: var(--color-success);\n margin: 0 0 var(--space-md);\n animation: fadeInOut 2s ease-in-out;\n}\n\n.invite-copy-feedback.hidden {\n display: none;\n}\n\n@keyframes fadeInOut {\n 0%, 100% { opacity: 0; }\n 10%, 80% { opacity: 1; }\n}\n\n.invite-modal-close {\n min-width: 120px;\n min-height: 48px;\n}\n\n/* ============================================\n Player Result Cards (Story 9.10)\n ============================================ */\n\n.reveal-results-cards {\n margin-top: var(--space-lg);\n width: 100%;\n overflow: visible;\n}\n\n.results-cards-header {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-secondary);\n margin-bottom: var(--space-sm);\n text-align: center;\n}\n\n/* Horizontal row with overflow scroll (#355) */\n.results-cards-scroll {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n gap: var(--space-sm);\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n padding-bottom: var(--space-xs);\n -webkit-overflow-scrolling: touch;\n}\n\n.results-cards-scroll::-webkit-scrollbar {\n height: 3px;\n}\n\n.results-cards-scroll::-webkit-scrollbar-thumb {\n background: var(--color-border-light);\n border-radius: 2px;\n}\n\n.result-card {\n background: var(--color-bg-card);\n border-radius: var(--radius-md);\n padding: var(--space-sm);\n text-align: center;\n border: 2px solid var(--color-border-light);\n transition: all var(--transition-fast);\n flex: 1 1 140px;\n min-width: 140px;\n max-width: 220px;\n box-sizing: border-box;\n}\n\n.result-card.is-current {\n border-color: var(--color-accent-brand);\n background: rgba(99, 102, 241, 0.1);\n}\n\n/* Score-based classes per AC #13 (Code Review fix) */\n.result-card.is-score-high {\n border-color: var(--color-success);\n background: rgba(16, 185, 129, 0.1);\n}\n\n.result-card.is-score-medium {\n border-color: var(--color-warning);\n background: rgba(245, 158, 11, 0.1);\n}\n\n.result-card.is-score-zero {\n opacity: 0.6;\n}\n\n.card-name {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 2px;\n}\n\n.card-guess {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-bold);\n color: var(--color-text-primary);\n}\n\n.card-accuracy {\n font-size: var(--font-size-xs);\n color: var(--color-text-muted);\n}\n\n.result-card.is-score-high .card-accuracy {\n color: var(--color-success);\n font-weight: var(--font-weight-semibold);\n}\n\n.card-score {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n color: var(--color-success);\n margin-top: 2px;\n}\n\n.card-bet {\n margin-left: 4px;\n}\n\n/* Dark theme result cards */\nbody.theme-dark .result-card {\n background: rgba(255, 255, 255, 0.05);\n border-color: rgba(255, 255, 255, 0.1);\n}\n\nbody.theme-dark .result-card.is-current {\n border-color: var(--color-accent-neon);\n background: rgba(0, 245, 255, 0.1);\n}\n\n/* Dark theme score-based classes (Code Review fix) */\nbody.theme-dark .result-card.is-score-high {\n border-color: var(--color-success-neon);\n background: rgba(0, 255, 136, 0.1);\n}\n\nbody.theme-dark .result-card.is-score-medium {\n border-color: var(--color-warning);\n background: rgba(245, 158, 11, 0.15);\n}\n\nbody.theme-dark .card-name,\nbody.theme-dark .card-guess {\n color: var(--color-text-white);\n}\n\nbody.theme-dark .card-accuracy {\n color: var(--color-text-neon-muted);\n}\n\nbody.theme-dark .result-card.is-score-high .card-accuracy {\n color: var(--color-success-neon);\n}\n\nbody.theme-dark .card-score {\n color: var(--color-success-neon);\n}\n\n/* ============================================\n Admin Control Bar (Story 6.1)\n ============================================ */\n\n.admin-control-bar {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n justify-content: space-around;\n align-items: center;\n padding: var(--space-sm) var(--space-sm);\n padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));\n background: rgba(0, 0, 0, 0.9);\n border-top: 1px solid var(--color-border-dark);\n z-index: var(--z-control-bar);\n}\n\n.admin-control-bar.hidden {\n display: none;\n}\n\n.control-btn {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-width: 44px;\n min-height: 44px;\n padding: var(--space-sm) var(--space-sm);\n background: #2a2a2a;\n border: none;\n border-radius: var(--radius-md);\n color: var(--color-text-white);\n cursor: pointer;\n transition: background var(--transition-fast), opacity var(--transition-fast);\n}\n\n.control-btn:hover:not(.is-disabled) {\n background: #3a3a3a;\n}\n\n.control-btn:active:not(.is-disabled) {\n background: #4a4a4a;\n}\n\n.control-btn.is-disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.control-btn--danger {\n background: #7f1d1d;\n}\n\n.control-btn--danger:hover:not(.is-disabled) {\n background: #991b1b;\n}\n\n.control-btn.is-stopped {\n background: var(--color-text-secondary);\n opacity: 0.7;\n}\n\n.control-btn.is-stopped .control-icon {\n color: var(--color-success);\n}\n\n/* Volume indicator popup (Story 6.4) */\n.volume-indicator {\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n background: rgba(0, 0, 0, 0.9);\n color: var(--color-text-white);\n padding: var(--space-sm) var(--space-md);\n border-radius: var(--radius-md);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-semibold);\n margin-bottom: var(--space-sm);\n opacity: 0;\n transition: opacity var(--transition-normal);\n pointer-events: none;\n white-space: nowrap;\n}\n\n.volume-indicator.is-visible {\n opacity: 1;\n}\n\n/* Volume button at limit (Story 6.4) */\n.control-btn.is-at-limit {\n opacity: 0.5;\n}\n\n.control-btn.is-at-limit:active {\n transform: none;\n}\n\n.control-icon {\n font-size: var(--font-size-xl);\n line-height: 1;\n}\n\n/* #1048: REVEAL auto-advance countdown \u2014 replaces the icon in the Next\n button with the remaining seconds while the auto-advance timer runs.\n Tabular numerals so 30 \u2192 29 \u2192 28 doesn't shift the layout. */\n.control-icon.is-countdown {\n font-variant-numeric: tabular-nums;\n font-weight: 700;\n min-width: 1.5em;\n text-align: center;\n}\n\n.control-label {\n font-size: var(--font-size-xs);\n margin-top: 2px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n/* Ensure game-view content doesn't get covered by control bar (M3 fix: conditional) */\n/* 80px admin bar + 60px reaction bar = 140px total clearance */\n.has-control-bar .game-container {\n padding-bottom: 140px;\n}\n\n.has-control-bar .reveal-container {\n padding-bottom: 140px;\n}\n\n.has-control-bar .end-container {\n padding-bottom: 140px;\n}\n\n/* ============================================\n Live Reactions Bar (Story 18.9)\n ============================================ */\n\n.reaction-bar {\n position: fixed;\n bottom: 0; /* Default: at bottom for regular players */\n left: 0;\n right: 0;\n display: flex;\n justify-content: center;\n padding: var(--space-sm);\n padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));\n z-index: var(--z-reaction-bar);\n pointer-events: none; /* Allow clicks through the bar */\n}\n\n/* When admin control bar is visible, position reaction bar above it */\nmain:has(.admin-control-bar:not(.hidden)) .reaction-bar {\n bottom: 70px;\n}\n\n.reaction-bar.hidden {\n display: none;\n}\n\n.reaction-bar-container {\n display: flex;\n gap: var(--space-sm);\n padding: var(--space-sm) var(--space-md);\n background: rgba(0, 0, 0, 0.6);\n border-radius: var(--radius-lg);\n border: 1px solid rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n pointer-events: auto; /* Restore clicks on container */\n}\n\n.reaction-btn {\n font-size: 1.5rem;\n padding: var(--space-sm);\n min-width: 44px;\n min-height: 44px;\n background: rgba(30, 30, 40, 0.5);\n border: 1px solid rgba(255, 255, 255, 0.15);\n border-radius: var(--radius-md);\n cursor: pointer;\n transition: transform var(--transition-fast), background var(--transition-fast);\n}\n\n.reaction-btn:hover {\n background: rgba(50, 50, 60, 0.7);\n}\n\n.reaction-btn:active {\n transform: scale(0.9);\n}\n\n/* #1757: used-state feedback. Once a reaction is spent this phase the whole bar\n is disabled; the chosen emoji stays lit so the player sees what they sent. */\n.reaction-btn:disabled {\n cursor: default;\n opacity: 0.45;\n}\n\n.reaction-btn.is-used {\n opacity: 1;\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 12px var(--color-accent-primary);\n}\n\n/* Neon glow effect on tap */\n@media (hover: none) {\n .reaction-btn:active {\n box-shadow: 0 0 15px var(--color-accent-primary);\n }\n}\n\n/* Accessibility: Respect reduced motion preference */\n@media (prefers-reduced-motion: reduce) {\n .reaction-btn {\n transition: none;\n }\n\n .reaction-btn:active {\n transform: none;\n }\n}\n\n/* Floating Reactions Display (Story 18.9) */\n.reaction-container {\n position: fixed;\n bottom: 120px; /* Above reaction bar */\n left: 0;\n right: 0;\n pointer-events: none;\n z-index: 99; /* Below reaction bar */\n}\n\n/* When admin control bar visible, adjust position */\nmain:has(.admin-control-bar:not(.hidden)) .reaction-container {\n bottom: 180px;\n}\n\n.reaction-bubble {\n position: absolute;\n font-size: 1rem;\n font-weight: 600;\n color: var(--color-text-white);\n text-shadow: 0 0 8px var(--color-accent-primary);\n animation: reaction-float 3s ease-out forwards;\n white-space: nowrap;\n}\n\n@keyframes reaction-float {\n 0% {\n opacity: 1;\n transform: translateY(0);\n }\n 70% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n transform: translateY(calc(-50vh + 60px));\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .reaction-bubble {\n animation: none;\n opacity: 1;\n }\n}\n\n/* ============================================\n Paused View (Story 7-1)\n ============================================ */\n\n.paused-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: var(--space-2xl) var(--space-lg);\n min-height: 60vh;\n text-align: center;\n}\n\n.paused-icon {\n font-size: var(--font-size-hero);\n margin-bottom: var(--space-lg);\n animation: pause-pulse 2s infinite;\n}\n\n@keyframes pause-pulse {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.6; transform: scale(0.95); }\n}\n\n.paused-container h1 {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-bold);\n color: var(--color-text-primary);\n margin-bottom: var(--space-md);\n}\n\n.paused-container > p {\n font-size: var(--font-size-md);\n color: var(--color-text-muted);\n margin-bottom: var(--space-sm);\n}\n\n.paused-spinner {\n margin: var(--space-xl) 0;\n}\n\n.paused-hint {\n font-size: var(--font-size-base);\n color: var(--color-text-light);\n}\n\n/* ============================================\n Reconnecting Overlay (Story 7-3)\n ============================================ */\n\n.reconnecting-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: var(--z-overlay);\n}\n\n.reconnecting-overlay.hidden {\n display: none;\n}\n\n.reconnecting-content {\n text-align: center;\n color: var(--color-text-white);\n}\n\n.reconnecting-spinner .spinner {\n border-top-color: var(--color-text-white);\n width: 48px;\n height: 48px;\n margin: 0 auto var(--space-md);\n}\n\n.reconnect-status {\n font-size: var(--font-size-md);\n color: var(--color-border-light);\n}\n\n/* ============================================\n Connection Lost View (Story 7-4)\n ============================================ */\n\n.connection-lost-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: var(--space-2xl) var(--space-lg);\n min-height: 60vh;\n text-align: center;\n}\n\n.connection-lost-icon {\n font-size: var(--font-size-hero);\n margin-bottom: var(--space-lg);\n}\n\n.connection-lost-container h1 {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-bold);\n color: var(--color-text-primary);\n margin-bottom: var(--space-md);\n}\n\n.connection-lost-container > p {\n font-size: var(--font-size-md);\n color: var(--color-text-muted);\n margin-bottom: var(--space-lg);\n}\n\n.connection-lost-hint {\n font-size: var(--font-size-base);\n color: var(--color-text-light);\n margin-top: var(--space-md);\n}\n\n/* Responsive adjustments for Reveal View */\n@media (max-width: 360px) {\n .correct-year {\n font-size: var(--font-size-year);\n }\n\n .reveal-album-cover {\n width: 120px;\n height: 120px;\n }\n}\n\n@media (min-width: 768px) {\n .reveal-album-cover {\n width: 180px;\n height: 180px;\n }\n\n .correct-year {\n font-size: 84px;\n }\n}\n\n/* ============================================\n Accessibility & Reduced Motion (Story 9.7)\n ============================================ */\n\n/* Focus indicators for keyboard navigation */\n:focus-visible {\n outline: 2px solid var(--color-accent-primary);\n outline-offset: 2px;\n}\n\nbody.theme-dark :focus-visible {\n outline-color: var(--color-accent-primary);\n box-shadow: 0 0 0 4px rgba(255, 45, 106, 0.3);\n}\n\n/* Remove default outline for mouse users */\n:focus:not(:focus-visible) {\n outline: none;\n}\n\n/* Global reduced motion - disables all animations */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n/* Day Mode fallback for prefers-color-scheme: light */\n@media (prefers-color-scheme: light) {\n body:not(.theme-dark) {\n --color-bg-primary: #ffffff;\n --color-bg-surface: #f5f5f7;\n --color-bg-card: #ffffff;\n --color-bg-card-alt: #f8fafc;\n --color-text-primary: #1a1a1a;\n --color-text-muted: #666666;\n --color-text-light: #999999;\n --color-border-light: #e5e7eb;\n /* Accents remain vibrant */\n }\n}\n\n/* Screen reader only utility */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n/* Skip link for keyboard users */\n.skip-link {\n position: absolute;\n top: -40px;\n left: 0;\n background: var(--color-accent-primary);\n color: var(--color-text-white);\n padding: var(--space-sm) var(--space-md);\n z-index: var(--z-modal);\n transition: top var(--transition-fast);\n}\n\n.skip-link:focus {\n top: 0;\n}\n\n/* ============================================\n Energy Escalation Pattern (Story 9.9)\n ============================================ */\n\n/* Energy Level Classes - Applied to body */\n\n/* Calm - Join screen (minimal, focused) */\nbody.energy-calm .btn-glow:hover {\n box-shadow: none; /* No glow on calm screens */\n}\n\nbody.energy-calm .wordmark-hero {\n text-shadow: none; /* No hero glow on calm screens */\n}\n\n/* Warmup - Lobby (building excitement) */\nbody.energy-warmup .player-card {\n animation: energy-slide-in 0.3s ease-out;\n}\n\nbody.energy-warmup .qr-container {\n animation: energy-pulse-subtle 3s ease-in-out infinite;\n}\n\n@keyframes energy-slide-in {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes energy-pulse-subtle {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.85; }\n}\n\n/* Party - Active gameplay (full effects) */\nbody.energy-party .album-cover {\n box-shadow: 0 0 60px rgba(255, 255, 255, 0.1);\n}\n\nbody.energy-party .submit-btn:not(:disabled) {\n box-shadow: var(--glow-primary);\n}\n\nbody.energy-party .year-display {\n text-shadow: 0 0 20px rgba(255, 45, 106, 0.3);\n}\n\n/* Screen Transitions */\n.view {\n animation: screen-fade-in 0.3s ease-out;\n}\n\n@keyframes screen-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* Reduced motion - disable energy animations */\n@media (prefers-reduced-motion: reduce) {\n body.energy-warmup .player-card,\n body.energy-warmup .qr-container {\n animation: none;\n }\n .view {\n animation: none;\n }\n}\n\n/* ============================================\n Steal Power-up Styles (Story 15.3)\n ============================================ */\n\n/* Steal indicator now uses .stat-badge--steal in game header */\n\n/* Steal Button */\n.steal-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-xs);\n width: 100%;\n padding: var(--space-sm) var(--space-md);\n margin-top: var(--space-sm);\n background: linear-gradient(135deg, var(--color-purple-primary, #8b5cf6), var(--color-purple-secondary, #7c3aed));\n border: none;\n border-radius: var(--radius-lg);\n color: var(--color-text-white);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-bold);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n cursor: pointer;\n box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);\n transition: all var(--transition-fast);\n}\n\n.steal-btn:hover:not(:disabled) {\n transform: scale(1.03);\n box-shadow: 0 0 30px rgba(139, 92, 246, 0.6);\n}\n\n.steal-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.steal-btn-icon {\n font-size: var(--font-size-lg);\n}\n\n/* Steal Modal */\n.steal-modal {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: var(--z-modal);\n}\n\n.steal-modal-backdrop {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(4px);\n}\n\n.steal-modal-content {\n position: relative;\n background: var(--color-bg-card);\n border: 2px solid var(--color-purple-primary, #8b5cf6);\n border-radius: var(--radius-xl);\n padding: var(--space-lg);\n max-width: 320px;\n width: 90%;\n text-align: center;\n box-shadow: 0 0 40px rgba(139, 92, 246, 0.3);\n}\n\n.steal-modal-title {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-bold);\n color: var(--color-text-primary);\n margin-bottom: var(--space-xs);\n}\n\n.steal-modal-subtitle {\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n margin-bottom: var(--space-md);\n}\n\n.steal-target-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-sm);\n margin-bottom: var(--space-md);\n}\n\n.steal-target-btn {\n display: block;\n width: 100%;\n padding: var(--space-sm) var(--space-md);\n background: var(--color-bg-surface);\n border: 1px solid var(--color-accent-secondary);\n border-radius: var(--radius-md);\n color: var(--color-text-primary);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-semibold);\n cursor: pointer;\n transition: all var(--transition-fast);\n}\n\n.steal-target-btn:hover {\n background: var(--color-accent-secondary);\n color: var(--color-bg-primary);\n transform: scale(1.02);\n}\n\n.steal-no-targets {\n color: var(--color-text-muted);\n font-size: var(--font-size-sm);\n padding: var(--space-md);\n}\n\n.steal-modal-cancel {\n width: 100%;\n}\n\n/* Steal Confirmation Toast */\n.steal-confirmation {\n position: fixed;\n bottom: calc(var(--space-xl) + 60px);\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n background: linear-gradient(135deg, var(--color-purple-primary, #8b5cf6), var(--color-purple-secondary, #7c3aed));\n color: var(--color-text-white);\n padding: var(--space-sm) var(--space-lg);\n border-radius: var(--radius-full);\n font-weight: var(--font-weight-semibold);\n box-shadow: 0 4px 20px rgba(139, 92, 246, 0.5);\n animation: steal-toast-in 0.3s ease-out;\n z-index: var(--z-tooltip);\n}\n\n@keyframes steal-toast-in {\n from {\n opacity: 0;\n transform: translateX(-50%) translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n }\n}\n\n.steal-confirmation-icon {\n font-size: var(--font-size-lg);\n}\n\n/* Steal badge in reveal view */\n.steal-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-xs);\n background: rgba(139, 92, 246, 0.2);\n border: 1px solid var(--color-purple-primary, #8b5cf6);\n border-radius: var(--radius-full);\n padding: var(--space-xs) var(--space-sm);\n font-size: var(--font-size-xs);\n color: var(--color-purple-primary, #8b5cf6);\n margin-top: var(--space-xs);\n}\n\n.steal-badge-icon {\n font-size: 0.9em;\n}\n\n/* Victim variant - shows who was stolen from */\n.steal-badge-victim {\n background: rgba(239, 68, 68, 0.2);\n border-color: var(--color-error);\n color: var(--color-error);\n}\n\n/* Dark mode adjustments */\nbody.theme-dark .steal-modal-content {\n background: var(--color-bg-card);\n}\n\nbody.theme-dark .steal-target-btn {\n background: rgba(255, 255, 255, 0.05);\n border-color: var(--color-accent-secondary);\n}\n\nbody.theme-dark .steal-target-btn:hover {\n background: var(--color-accent-secondary);\n color: var(--color-bg-primary);\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .stat-badge--steal {\n animation: none;\n }\n .steal-confirmation {\n animation: none;\n }\n}\n\n/* ============================================\n Intro Splash Modal (Issue #292)\n ============================================ */\n\n.intro-splash-modal {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: var(--z-modal);\n}\n\n.intro-splash-modal-backdrop {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(4px);\n}\n\n.intro-splash-modal-content {\n position: relative;\n background: var(--color-bg-card);\n border: 2px solid var(--color-accent-primary, #1db954);\n border-radius: var(--radius-xl);\n padding: var(--space-lg);\n max-width: 400px;\n width: 90%;\n text-align: center;\n box-shadow: 0 0 40px rgba(29, 185, 84, 0.3);\n}\n\n.intro-splash-modal-emoji {\n font-size: 3rem;\n margin-bottom: var(--space-sm);\n}\n\n.intro-splash-modal-title {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-bold);\n color: var(--color-text-primary);\n margin-bottom: var(--space-xs);\n}\n\n.intro-splash-modal-desc {\n font-size: var(--font-size-base);\n color: var(--color-text-secondary);\n margin-bottom: var(--space-md);\n}\n\n.intro-splash-modal-waiting {\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n margin-bottom: var(--space-sm);\n}\n\n.intro-splash-confirm-btn {\n width: 100%;\n margin-top: var(--space-sm);\n}\n\n/* ============================================\n Score Animations (Story 13.2)\n ============================================ */\n\n/* Tabular figures for score stability during animation */\n.score-animating {\n font-variant-numeric: tabular-nums;\n}\n\n/* Pop effect for big scores (20+ points) */\n@keyframes score-pop {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.3); }\n 100% { transform: scale(1); }\n}\n\n.score-pop {\n animation: score-pop 700ms ease-out;\n display: inline-block; /* Required for transform */\n}\n\n/* Shake effect for bet loss */\n@keyframes score-shake {\n 0%, 100% { transform: translateX(0); }\n 20% { transform: translateX(-5px); }\n 40% { transform: translateX(5px); }\n 60% { transform: translateX(-3px); }\n 80% { transform: translateX(3px); }\n}\n\n.score-shake {\n animation: score-shake 400ms ease-out;\n display: inline-block;\n}\n\n/* Red flash for bet loss */\n@keyframes score-flash-red {\n 0%, 100% { color: inherit; }\n 50% { color: var(--color-error); }\n}\n\n.score-flash-red {\n animation: score-flash-red 400ms ease-out;\n}\n\n/* Golden glow for bet wins */\n@keyframes score-glow-gold {\n 0%, 100% {\n text-shadow: 0 0 0 transparent;\n color: inherit;\n }\n 50% {\n text-shadow: 0 0 20px #ffd700, 0 0 40px #ffd700;\n color: #ffd700;\n }\n}\n\n.score-glow-gold {\n animation: score-glow-gold 800ms ease-out;\n display: inline-block;\n}\n\n/* Burst effect for streak milestones */\n@keyframes score-burst {\n 0% {\n transform: scale(1);\n text-shadow: 0 0 0 transparent;\n }\n 30% {\n transform: scale(1.4);\n text-shadow: 0 0 30px #ff6600;\n }\n 100% {\n transform: scale(1);\n text-shadow: 0 0 0 transparent;\n }\n}\n\n.score-burst {\n animation: score-burst 700ms ease-out;\n display: inline-block;\n}\n\n/* ============================================\n Floating Points Popup (Story 13.2)\n ============================================ */\n\n@keyframes popup-float {\n 0% {\n opacity: 0;\n transform: translate(-50%, 0);\n }\n 20% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n transform: translate(-50%, -30px);\n }\n}\n\n.points-popup {\n position: fixed;\n z-index: var(--z-toast);\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-bold);\n color: var(--color-success);\n pointer-events: none;\n animation: popup-float 1000ms ease-out forwards;\n transform: translateX(-50%);\n}\n\n.points-popup--gold {\n color: #ffd700;\n text-shadow: 0 0 10px #ffd700;\n}\n\n.points-popup--streak {\n color: #ff6600;\n text-shadow: 0 0 10px #ff6600;\n font-size: var(--font-size-xl);\n}\n\n/* ============================================\n Leaderboard Slide Animations (Story 13.2)\n ============================================ */\n\n/* Enhanced climbing animation with green highlight */\n.leaderboard-entry--slide-up {\n animation: leaderboard-slide-up 500ms ease-out;\n}\n\n@keyframes leaderboard-slide-up {\n 0% {\n transform: translateY(10px);\n background: rgba(0, 255, 136, 0.3);\n }\n 100% {\n transform: translateY(0);\n background: transparent;\n }\n}\n\n/* Enhanced falling animation with opacity */\n.leaderboard-entry--slide-down {\n animation: leaderboard-slide-down 500ms ease-out;\n}\n\n@keyframes leaderboard-slide-down {\n 0% {\n transform: translateY(-10px);\n opacity: 0.6;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n/* ============================================\n Reduced Motion Support (Story 13.2)\n ============================================ */\n\n@media (prefers-reduced-motion: reduce) {\n .score-pop,\n .score-shake,\n .score-glow-gold,\n .score-burst,\n .score-flash-red {\n animation: none !important;\n }\n\n .points-popup {\n animation: none !important;\n display: none !important;\n }\n\n .leaderboard-entry--slide-up,\n .leaderboard-entry--slide-down {\n animation: none !important;\n }\n}\n\n/* ============================================\n Device Tier Performance Optimizations (Story 18.3)\n ============================================ */\n\n/* Low-end device optimizations - disable complex animations */\nbody.device-tier-low .leaderboard-entry--climbing,\nbody.device-tier-low .leaderboard-entry--falling,\nbody.device-tier-low .leaderboard-entry--slide-up,\nbody.device-tier-low .leaderboard-entry--slide-down {\n animation: none !important;\n}\n\nbody.device-tier-low .neon-glow,\nbody.device-tier-low .btn-glow:hover {\n box-shadow: none !important;\n}\n\nbody.device-tier-low .score-pop,\nbody.device-tier-low .score-shake,\nbody.device-tier-low .score-glow-gold,\nbody.device-tier-low .score-burst {\n animation: none !important;\n}\n\nbody.device-tier-low .points-popup {\n display: none !important;\n}\n\n/* Medium-tier device optimizations - simplify animations */\nbody.device-tier-medium .leaderboard-entry--climbing,\nbody.device-tier-medium .leaderboard-entry--falling {\n animation-duration: 0.2s !important;\n}\n\nbody.device-tier-medium .neon-glow {\n animation: none !important;\n}\n\nbody.device-tier-medium .score-pop,\nbody.device-tier-medium .score-shake,\nbody.device-tier-medium .score-glow-gold,\nbody.device-tier-medium .score-burst {\n animation-duration: 0.2s !important;\n}\n\n/* Tap-to-skip hint for reveal view (Story 18.3) */\n.reveal-skip-hint {\n position: absolute;\n bottom: var(--space-md);\n left: 50%;\n transform: translateX(-50%);\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n opacity: 0;\n animation: fadeInDelayed 0.3s ease-out 1s forwards;\n}\n\n@keyframes fadeInDelayed {\n to {\n opacity: 0.6;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .reveal-skip-hint {\n animation: none;\n opacity: 0.6;\n }\n}\n\nbody.device-tier-low .reveal-skip-hint {\n animation: none;\n opacity: 0.6;\n}\n\n/* ========================================\n Playlist Request Feature (Story 44)\n ======================================== */\n\n/* Request button in playlists section */\n.request-btn {\n margin-top: var(--space-md);\n gap: var(--space-xs);\n}\n\n/* Requests list */\n.requests-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-sm);\n}\n\n/* Individual request item */\n.request-item {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n padding: var(--space-md);\n background: var(--color-surface-raised);\n border-radius: var(--radius-md);\n border: 1px solid var(--color-border);\n}\n\n.request-item-thumbnail {\n width: 40px;\n height: 40px;\n min-width: 40px;\n min-height: 40px;\n max-width: 40px;\n max-height: 40px;\n border-radius: var(--radius-sm);\n object-fit: cover;\n flex-shrink: 0;\n}\n\n.request-item-thumbnail-placeholder {\n width: 40px;\n height: 40px;\n min-width: 40px;\n min-height: 40px;\n border-radius: var(--radius-sm);\n background: var(--color-surface);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n.request-item-info {\n flex: 1;\n min-width: 0;\n}\n\n.request-item-name {\n font-weight: 600;\n font-size: var(--font-size-base);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.request-item-meta {\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n}\n\n/* Status badges */\n.request-status {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n border-radius: var(--radius-full);\n font-size: var(--font-size-xs);\n font-weight: 600;\n white-space: nowrap;\n}\n\n.request-status--pending {\n background: rgba(255, 193, 7, 0.15);\n color: #ffc107;\n}\n\n.request-status--ready {\n background: rgba(76, 175, 80, 0.15);\n color: #4caf50;\n}\n\n.request-status--installed {\n background: transparent;\n color: #4caf50;\n border: 1px solid #4caf50;\n}\n\n.request-status--declined {\n background: rgba(244, 67, 54, 0.15);\n color: #f44336;\n}\n\n/* Update button for ready status */\n.request-update-btn {\n font-size: var(--font-size-xs);\n padding: 6px 12px;\n white-space: nowrap;\n}\n\n/* Modal text input */\n.text-input {\n width: 100%;\n padding: var(--space-sm) var(--space-md);\n font-size: var(--font-size-base);\n background: var(--color-surface);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-md);\n color: var(--color-text);\n transition: border-color 0.15s ease;\n}\n\n.text-input:focus {\n outline: none;\n border-color: var(--color-primary);\n}\n\n.text-input.input-error {\n border-color: var(--color-error);\n}\n\n/* Info box */\n.info-box {\n background: var(--color-surface-raised);\n border-radius: var(--radius-md);\n padding: var(--space-md);\n margin-top: var(--space-md);\n}\n\n.info-box-title {\n font-weight: 600;\n margin-bottom: var(--space-xs);\n color: var(--color-text-muted);\n}\n\n.info-box-list {\n margin: 0;\n padding-left: 0;\n list-style-position: inside;\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n}\n\n.info-box-list li {\n margin-bottom: var(--space-xs);\n}\n\n.info-box-list li:last-child {\n margin-bottom: 0;\n}\n\n.info-box-note {\n margin-top: var(--space-sm);\n padding-top: var(--space-sm);\n border-top: 1px solid var(--color-border);\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n}\n\n/* Success modal */\n.modal-content--success {\n text-align: center;\n}\n\n.success-icon {\n font-size: 3rem;\n margin-bottom: var(--space-sm);\n}\n\n.success-playlist-name {\n font-weight: 600;\n font-size: var(--font-size-lg);\n margin-bottom: var(--space-xs);\n}\n\n.success-estimate {\n color: var(--color-text-muted);\n font-size: var(--font-size-sm);\n}\n\n/* Loading state for submit button */\n.btn--loading {\n position: relative;\n color: transparent !important;\n pointer-events: none;\n}\n\n.btn--loading::after {\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n top: 50%;\n left: 50%;\n margin-left: -8px;\n margin-top: -8px;\n border: 2px solid transparent;\n border-top-color: currentColor;\n border-radius: 50%;\n animation: spin 0.6s linear infinite;\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\n/* ============================================\n Shareable Result Cards (Issue #120)\n ============================================ */\n\n.share-container {\n margin: 1.5rem 0;\n text-align: center;\n}\n\n.share-header {\n font-size: 1.2rem;\n font-weight: 700;\n margin-bottom: 1rem;\n color: var(--text-primary, #fff);\n}\n\n.share-card-preview {\n margin: 12px auto;\n max-width: 360px;\n width: 100%;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 45, 106, 0.25);\n background: #0a0a12;\n}\n\n.share-card-image {\n display: block;\n width: 100%;\n height: auto;\n aspect-ratio: 1 / 1;\n}\n\n.share-buttons {\n display: flex;\n gap: 0.75rem;\n justify-content: center;\n flex-wrap: wrap;\n}\n\n.share-btn {\n padding: 0.6rem 1.2rem;\n border: none;\n border-radius: 8px;\n font-size: 0.95rem;\n font-weight: 600;\n cursor: pointer;\n background: var(--accent-color, #e94560);\n color: #fff;\n transition: opacity 0.2s, transform 0.1s;\n}\n\n.share-btn:hover {\n opacity: 0.9;\n}\n\n.share-btn:active {\n transform: scale(0.97);\n}\n\n.share-toast {\n margin-top: 0.75rem;\n padding: 0.4rem 1rem;\n background: var(--success-color, #4caf50);\n color: #fff;\n border-radius: 20px;\n display: inline-block;\n font-size: 0.85rem;\n font-weight: 600;\n animation: shareToastIn 0.3s ease;\n}\n\n@keyframes shareToastIn {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n/* Admin share player tabs (Issue #208) */\n.admin-share-player-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: 0.4rem;\n justify-content: center;\n margin-bottom: 0.75rem;\n}\n\n.admin-share-tab {\n padding: 0.3rem 0.85rem;\n border-radius: 20px;\n border: 1px solid var(--color-border-light);\n background: transparent;\n color: var(--color-text-secondary);\n font-size: var(--font-size-sm);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.admin-share-tab:hover {\n border-color: var(--color-accent-brand);\n color: var(--color-accent-brand);\n}\n\n.admin-share-tab.active {\n background: var(--color-accent-brand);\n border-color: var(--color-accent-brand);\n color: #fff;\n font-weight: var(--font-weight-semibold);\n}\n\n@media (max-width: 480px) {\n .share-buttons {\n flex-direction: column;\n align-items: center;\n }\n .share-btn {\n width: 100%;\n max-width: 280px;\n }\n .share-card-preview {\n max-width: 320px;\n }\n}\n\n/* ============================================\n Skeleton Loading States (#240)\n ============================================ */\n@keyframes shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n.skeleton {\n background: linear-gradient(90deg, var(--color-bg-card) 25%, #3a3a4e 50%, var(--color-bg-card) 75%);\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite;\n border-radius: var(--radius-md);\n}\n\n.skeleton-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-sm);\n padding: var(--space-sm) 0;\n}\n\n/* Media player rows \u2014 match the height of a radio option */\n.skeleton-row {\n height: 48px;\n width: 100%;\n}\n\n/* Playlist cards \u2014 taller to match playlist card height */\n.skeleton-card {\n height: 64px;\n width: 100%;\n}\n\n/* ============================================\n Connection Status Indicator (#238)\n ============================================ */\n.player-header {\n position: relative;\n}\n\n.connection-indicator {\n position: absolute;\n top: 50%;\n right: var(--space-md);\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n/* Only visible when disconnected/reconnecting */\n.connection-indicator--disconnected {\n opacity: 1;\n}\n\n.connection-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--color-error, #e94560);\n animation: pulse-dot 1.2s infinite;\n}\n\n@keyframes pulse-dot {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.4; transform: scale(0.7); }\n}\n\n/* ============================================\n Party Lights (#331)\n ============================================ */\n\n.party-lights-picker {\n margin-top: 12px;\n}\n\n.party-lights-picker-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n font-size: 0.85rem;\n color: var(--text-secondary, #aaa);\n}\n\n.party-lights-count {\n font-weight: 500;\n}\n\n.btn-link {\n background: none;\n border: none;\n color: var(--accent, #ff00ff);\n cursor: pointer;\n font-size: 0.85rem;\n padding: 4px 8px;\n}\n\n.btn-link:hover {\n text-decoration: underline;\n}\n\n.party-lights-list {\n max-height: 240px;\n overflow-y: auto;\n border-radius: 8px;\n background: var(--card-bg, rgba(255,255,255,0.05));\n margin-bottom: 12px;\n}\n\n.party-light-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n cursor: pointer;\n border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));\n min-height: 44px;\n}\n\n.party-light-item:last-child {\n border-bottom: none;\n}\n\n.party-light-item:hover {\n background: rgba(255,255,255,0.03);\n}\n\n.party-light-item input[type=\"checkbox\"] {\n width: 18px;\n height: 18px;\n flex-shrink: 0;\n accent-color: var(--accent, #ff00ff);\n}\n\n.light-status {\n font-size: 0.75rem;\n flex-shrink: 0;\n}\n\n.light-name {\n flex: 1;\n font-size: 0.9rem;\n color: var(--text-primary, #fff);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.light-cap-badge {\n font-size: 0.7rem;\n padding: 2px 6px;\n border-radius: 4px;\n background: rgba(255,255,255,0.1);\n color: var(--text-secondary, #aaa);\n flex-shrink: 0;\n font-weight: 500;\n}\n\n/* ============================================\n Issue #550: WLED Presets & Light Mode UI\n ============================================ */\n\n.setting-row--vertical {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-sm, 8px);\n}\n\n.wled-presets-grid {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: var(--space-xs, 4px) var(--space-sm, 8px);\n width: 100%;\n}\n\n.wled-preset-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-xs, 4px);\n font-size: 0.8rem;\n color: var(--text-secondary, #aaa);\n}\n\n.wled-preset-item .input-sm {\n width: 48px;\n padding: 2px 4px;\n border: 1px solid rgba(255,255,255,0.15);\n border-radius: 4px;\n background: rgba(255,255,255,0.05);\n color: var(--text-primary, #fff);\n font-size: 0.8rem;\n text-align: center;\n}\n\n/* ============================================\n Issue #477: Admin Game Phase Views\n ============================================ */\n\n.admin-game-wrapper {\n max-width: 480px;\n margin: 0 auto;\n}\n\n.admin-phase-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: var(--space-md);\n}\n\n.round-badge {\n font-weight: 600;\n font-size: 1rem;\n}\n\n.timer-badge {\n font-size: 1.2rem;\n font-weight: 700;\n font-variant-numeric: tabular-nums;\n min-width: 3em;\n text-align: center;\n}\n\n.timer-badge.timer-warning {\n color: var(--color-warning, #f59e0b);\n}\n\n.timer-badge.timer-critical {\n color: var(--color-danger, #ef4444);\n animation: pulse-critical 0.5s ease-in-out infinite alternate;\n}\n\n@keyframes pulse-critical {\n from { opacity: 1; }\n to { opacity: 0.5; }\n}\n\n.admin-song-card {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n background: var(--color-bg-card);\n border-radius: var(--radius-md);\n padding: var(--space-md);\n margin-bottom: var(--space-md);\n}\n\n.admin-album-art {\n width: 64px;\n height: 64px;\n border-radius: var(--radius-sm);\n object-fit: cover;\n flex-shrink: 0;\n}\n\n.admin-song-meta {\n min-width: 0;\n}\n\n.admin-song-title {\n font-weight: 600;\n font-size: 1rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.admin-song-artist {\n color: var(--text-secondary, #aaa);\n font-size: 0.9rem;\n}\n\n/* #653: Admin-only song details (below large album cover) */\n.admin-song-details {\n text-align: center;\n margin-bottom: var(--space-sm, 8px);\n}\n\n.admin-song-year {\n font-size: 0.95rem;\n color: var(--color-primary, #1db954);\n font-weight: 600;\n}\n\n.admin-song-funfact {\n font-size: 0.85rem;\n color: var(--text-secondary, #aaa);\n font-style: italic;\n margin-top: 4px;\n line-height: 1.3;\n}\n\n/* #660: Admin playing-mode banner */\n.admin-playing-banner {\n display: flex;\n align-items: center;\n gap: var(--space-sm, 8px);\n padding: var(--space-sm, 8px) var(--space-md, 16px);\n background: var(--bg-card, rgba(255, 255, 255, 0.05));\n border-bottom: 2px solid var(--color-primary, #1db954);\n font-size: 0.9rem;\n}\n\n.admin-playing-banner-icon {\n font-size: 1.1rem;\n flex-shrink: 0;\n}\n\n.admin-playing-banner-text {\n flex: 1;\n min-width: 0;\n}\n\n.admin-playing-banner-btn {\n flex-shrink: 0;\n font-size: 0.8rem;\n padding: 4px 10px;\n border-radius: var(--radius-sm, 8px);\n}\n\n/* #1012 follow-up: Idle-halt banner \u2014 shown on REVEAL when a round\n ended with zero guesses, so the screen doesn't look generically stuck. */\n.idle-halt-banner {\n display: flex;\n align-items: center;\n gap: var(--space-sm, 8px);\n margin: var(--space-md, 16px) auto;\n padding: var(--space-sm, 8px) var(--space-md, 16px);\n background: var(--bg-card, rgba(255, 255, 255, 0.06));\n border: 1px solid var(--color-warning, #f5a623);\n border-radius: var(--radius-md, 12px);\n color: var(--color-warning, #f5a623);\n font-size: 0.9rem;\n line-height: 1.35;\n max-width: 540px;\n}\n\n.idle-halt-icon {\n font-size: 1.2rem;\n flex-shrink: 0;\n}\n\n/* #805: Recovery banner shown when game pauses due to playback error. */\n.admin-pause-recovery {\n margin: var(--space-md, 16px);\n padding: var(--space-md, 16px) var(--space-lg, 20px);\n background: var(--bg-card, rgba(255, 255, 255, 0.06));\n border: 2px solid var(--color-warning, #f5a623);\n border-radius: var(--radius-md, 12px);\n}\n\n.admin-pause-recovery-header {\n display: flex;\n align-items: center;\n gap: var(--space-sm, 8px);\n margin-bottom: var(--space-sm, 8px);\n}\n\n.admin-pause-recovery-icon {\n font-size: 1.3rem;\n flex-shrink: 0;\n}\n\n.admin-pause-recovery-title {\n font-size: 1rem;\n color: var(--color-warning, #f5a623);\n}\n\n.admin-pause-recovery-message {\n font-size: 0.95rem;\n line-height: 1.4;\n margin: 0 0 var(--space-sm, 8px) 0;\n color: var(--text-primary, #ffffff);\n}\n\n.admin-pause-recovery-detail {\n font-size: 0.8rem;\n line-height: 1.3;\n margin: 0 0 var(--space-md, 16px) 0;\n color: var(--text-secondary, rgba(255, 255, 255, 0.6));\n font-family: var(--font-monospace, monospace);\n word-break: break-word;\n}\n\n.admin-pause-recovery-detail.hidden {\n display: none;\n}\n\n.admin-pause-recovery-actions {\n display: flex;\n gap: var(--space-sm, 8px);\n flex-wrap: wrap;\n}\n\n.admin-pause-recovery-actions .btn {\n flex: 1;\n min-width: 120px;\n}\n\n/* #660: Admin personal result card (reveal phase) */\n.admin-personal-result-card {\n display: flex;\n flex-direction: column;\n gap: var(--space-xs, 4px);\n}\n\n.admin-personal-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--space-xs, 4px) 0;\n}\n\n.admin-personal-label {\n color: var(--text-secondary, #aaa);\n font-size: 0.9rem;\n}\n\n.admin-personal-value {\n font-weight: 600;\n font-size: 1rem;\n}\n\n.admin-personal-score {\n color: var(--color-primary, #1db954);\n font-size: 1.1rem;\n}\n\n/* Admin read-only challenge options */\n.artist-option--readonly {\n padding: 10px 14px;\n background: var(--bg-card, rgba(255, 255, 255, 0.05));\n border: 1px solid var(--color-border-dark, rgba(255, 255, 255, 0.1));\n border-radius: var(--radius-md, 12px);\n text-align: center;\n font-size: 0.9rem;\n opacity: 0.8;\n}\n\n/* Admin intro splash confirm */\n.admin-intro-splash {\n text-align: center;\n padding: var(--space-md);\n margin-bottom: var(--space-md);\n background: var(--bg-card, rgba(255, 255, 255, 0.05));\n border-radius: var(--radius-md, 12px);\n border: 1px solid var(--color-primary, #1db954);\n}\n\n.intro-splash-info {\n font-size: 1.1rem;\n font-weight: 600;\n margin-bottom: var(--space-sm);\n}\n\n.intro-splash-icon {\n margin-right: 6px;\n}\n\n.btn-compact {\n padding: 8px 12px;\n font-size: 0.85rem;\n}\n\n.admin-player-panel {\n background: var(--color-bg-card);\n border-radius: var(--radius-md);\n padding: var(--space-md);\n margin-bottom: var(--space-md);\n}\n\n.admin-year-selector {\n text-align: center;\n margin-bottom: var(--space-md);\n}\n\n.admin-year-selector .year-display {\n display: block;\n font-size: 2.5rem;\n font-weight: 700;\n margin-bottom: var(--space-sm);\n font-variant-numeric: tabular-nums;\n}\n\n.admin-year-selector .year-slider {\n width: 100%;\n margin-bottom: var(--space-xs);\n}\n\n.year-range-labels {\n display: flex;\n justify-content: space-between;\n font-size: 0.75rem;\n color: var(--text-secondary, #aaa);\n}\n\n.last-round-banner {\n text-align: center;\n padding: var(--space-sm);\n background: var(--color-warning, #f59e0b);\n color: #000;\n border-radius: var(--radius-sm);\n font-weight: 600;\n margin-bottom: var(--space-md);\n}\n\n.submission-status {\n text-align: center;\n color: var(--text-secondary, #aaa);\n font-size: 0.9rem;\n margin-top: var(--space-sm);\n}\n\n.submission-count {\n margin-bottom: 6px;\n}\n\n.submission-players {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n justify-content: center;\n}\n\n.submission-player {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 0.8rem;\n background: var(--bg-card, rgba(255, 255, 255, 0.05));\n}\n\n.submission-player.is-submitted {\n color: var(--color-primary, #1db954);\n}\n\n.submission-player.is-waiting {\n opacity: 0.6;\n}\n\n/* Reveal */\n.reveal-year-display {\n font-size: 2.5rem;\n font-weight: 700;\n text-align: center;\n margin: var(--space-md) 0;\n color: var(--color-primary, #1db954);\n}\n\n.admin-personal-result {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--color-bg-card);\n border-radius: var(--radius-md);\n padding: var(--space-md);\n margin-bottom: var(--space-md);\n}\n\n.score-badge {\n font-weight: 700;\n color: var(--color-primary, #1db954);\n}\n\n/* Leaderboard */\n.admin-leaderboard-container {\n margin-bottom: var(--space-md);\n}\n\n.admin-leaderboard {\n width: 100%;\n border-collapse: collapse;\n}\n\n.admin-leaderboard th {\n text-align: left;\n font-weight: 600;\n padding: var(--space-xs) var(--space-sm);\n border-bottom: 1px solid var(--color-border-light);\n font-size: 0.85rem;\n color: var(--text-secondary, #aaa);\n}\n\n.admin-leaderboard td {\n padding: var(--space-xs) var(--space-sm);\n}\n\n.admin-leaderboard tr.admin-highlight td {\n font-weight: 600;\n color: var(--color-primary, #1db954);\n}\n\n/* End */\n.admin-winner-display {\n text-align: center;\n font-size: 1.3rem;\n font-weight: 600;\n padding: var(--space-lg) 0;\n}\n\n.winner-trophy {\n font-size: 2rem;\n}\n\n.admin-end-actions {\n display: flex;\n gap: var(--space-sm);\n justify-content: center;\n margin-top: var(--space-md);\n}\n\n/* ==========================================\n First-run wizard (DESIGN.md ## Patterns)\n ========================================== */\n\n/* Takeover: when active, hide the rest of the admin chrome */\nbody.wizard-active > .admin-header,\nbody.wizard-active > main.admin-content,\nbody.wizard-active > .pwa-ios-hint {\n display: none;\n}\n\n.wizard-takeover {\n position: fixed;\n inset: 0;\n z-index: var(--z-overlay, 1100);\n background: var(--color-bg-primary);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.wizard-takeover.hidden { display: none; }\n\n.wiz-bg {\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse at top, rgba(255, 45, 106, 0.18), transparent 55%),\n radial-gradient(ellipse at bottom right, rgba(0, 245, 255, 0.12), transparent 40%);\n pointer-events: none;\n}\n\n.wiz-top {\n padding: var(--space-md) var(--space-lg);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-md);\n border-bottom: 1px solid var(--color-border-neon);\n position: relative;\n z-index: 1;\n}\n.wiz-step-count {\n font-family: var(--font-display);\n font-weight: 600;\n font-size: var(--font-size-xs);\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--color-text-dim, #6b6b7a);\n flex: 1;\n text-align: center;\n}\n.wiz-skip {\n font-family: var(--font-display);\n font-size: var(--font-size-sm);\n color: var(--color-text-neon-muted);\n background: none;\n border: none;\n font-weight: 500;\n cursor: pointer;\n padding: var(--space-xs) var(--space-sm);\n}\n.wiz-skip:hover { color: var(--color-text-white); }\n\n.wiz-progress {\n display: flex;\n gap: var(--space-xs);\n padding: var(--space-sm) var(--space-lg);\n position: relative;\n z-index: 1;\n}\n.wiz-seg {\n flex: 1;\n height: 3px;\n background: var(--color-dark-surface);\n border-radius: var(--radius-full);\n overflow: hidden;\n}\n.wiz-seg.filled {\n background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary));\n box-shadow: 0 0 12px rgba(255, 45, 106, 0.5);\n}\n.wiz-seg.active .wiz-seg-inner {\n height: 100%;\n width: 60%;\n background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary));\n box-shadow: 0 0 12px rgba(255, 45, 106, 0.5);\n border-radius: var(--radius-full);\n}\n\n.wiz-frame {\n flex: 1;\n overflow-y: auto;\n position: relative;\n z-index: 1;\n}\n.wiz-frame[hidden] { display: none; }\n\n.wiz-body {\n padding: var(--space-lg);\n display: flex;\n flex-direction: column;\n gap: var(--space-md);\n max-width: 720px;\n margin: 0 auto;\n}\n\n.wiz-eyebrow {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-xs);\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--color-accent-secondary);\n}\n.wiz-title {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-3xl);\n line-height: 1.15;\n letter-spacing: -0.01em;\n color: var(--color-text-white);\n}\n.wiz-sub {\n color: var(--color-text-neon-muted);\n font-size: var(--font-size-base);\n line-height: 1.5;\n}\n.wiz-hint { font-size: var(--font-size-sm); margin-top: var(--space-xs); }\n.wiz-hint a { color: var(--color-accent-secondary); text-decoration: underline; }\n\n.wiz-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-sm);\n}\n\n/* Speaker / playlist rows */\n.wiz-row {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n padding: var(--space-sm) var(--space-md);\n background: var(--color-dark-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-lg);\n cursor: pointer;\n transition: var(--transition-fast);\n color: var(--color-text-white);\n text-align: left;\n width: 100%;\n font-family: var(--font-body);\n}\n.wiz-row:hover { background: var(--color-dark-surface-hover); }\n.wiz-row.selected {\n background: linear-gradient(90deg, rgba(255, 45, 106, 0.15), rgba(0, 245, 255, 0.05));\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 14px rgba(255, 45, 106, 0.25);\n}\n.wiz-row-avatar {\n width: 36px;\n height: 36px;\n border-radius: var(--radius-md);\n background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-brand));\n flex-shrink: 0;\n display: grid;\n place-items: center;\n color: var(--color-bg-primary);\n}\n.wiz-row-avatar-icon {\n width: 20px;\n height: 20px;\n}\n.wiz-row-text { flex: 1; min-width: 0; }\n.wiz-row-name {\n font-family: var(--font-display);\n font-weight: 600;\n font-size: var(--font-size-base);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.wiz-row-sub {\n font-size: var(--font-size-xs);\n color: var(--color-text-neon-muted);\n margin-top: 2px;\n}\n.wiz-row-check {\n color: var(--color-success-neon);\n text-shadow: var(--glow-success);\n}\n\n/* Provider grid (Step 2) */\n.wiz-provider-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-sm);\n}\n.wiz-provider-chip {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n padding: var(--space-md);\n background: var(--color-dark-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-md);\n font-family: var(--font-display);\n font-weight: 600;\n font-size: var(--font-size-base);\n cursor: pointer;\n color: var(--color-text-white);\n transition: var(--transition-fast);\n}\n.wiz-provider-chip:hover { background: var(--color-dark-surface-hover); }\n.wiz-provider-chip.active {\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 14px rgba(255, 45, 106, 0.25);\n}\n.wiz-provider-chip.connected {\n border-color: var(--color-success-neon);\n background: rgba(57, 255, 20, 0.1);\n}\n\n/* Dimmed chip: provider not supported on the selected speaker (#772).\n Visible but obviously unavailable \u2014 clicking opens the explainer card. */\n.wiz-provider-chip {\n justify-content: space-between;\n}\n.wiz-provider-chip.disabled {\n opacity: 0.4;\n cursor: help;\n background: rgba(255, 255, 255, 0.02);\n}\n.wiz-provider-chip.disabled:hover {\n opacity: 0.55;\n background: rgba(255, 255, 255, 0.04);\n}\n.wiz-provider-chip .chip-lock {\n width: 14px;\n height: 14px;\n opacity: 0.7;\n flex-shrink: 0;\n}\n\n/* Capability badge under the speaker platform label (Step 1, #772). */\n.wiz-row-sub .cap-dot {\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: var(--color-text-dim);\n display: inline-block;\n margin: 0 6px;\n vertical-align: middle;\n}\n.wiz-row-sub .cap-badge {\n font-family: var(--font-display);\n font-weight: 600;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n padding: 1px 6px;\n border-radius: var(--radius-sm);\n border: 1px solid;\n vertical-align: middle;\n /* #1319: the badge text itself never wraps \u2014 summaries keep it short, the\n accent cases (\"Spotify only\") are short by construction. */\n white-space: nowrap;\n}\n.wiz-row-sub .cap-badge.full {\n color: var(--color-success-neon);\n background: rgba(57, 255, 20, 0.08);\n border-color: rgba(57, 255, 20, 0.4);\n}\n.wiz-row-sub .cap-badge.partial {\n color: var(--color-warning-alt);\n background: rgba(255, 102, 0, 0.08);\n border-color: rgba(255, 102, 0, 0.4);\n}\n.wiz-row-sub .cap-badge.none {\n color: var(--color-error-neon);\n background: rgba(255, 0, 64, 0.08);\n border-color: rgba(255, 0, 64, 0.4);\n}\n/* #1319: multi-service capability is static info, not actionable \u2014 drop the\n orange/uppercase/pill chrome so the speaker name stays the hero. Muted,\n borderless, plain-case secondary text. The full list lives on the tooltip. */\n.wiz-row-sub .cap-badge.summary {\n color: var(--color-text-dim);\n background: none;\n border: none;\n padding: 0;\n text-transform: none;\n letter-spacing: 0;\n font-weight: 500;\n}\n\n/* Explainer card shown when user clicks a dimmed provider chip (#772). */\n.wiz-explainer {\n margin-top: var(--space-md);\n padding: var(--space-lg);\n border-radius: var(--radius-lg);\n background: linear-gradient(135deg, rgba(255, 102, 0, 0.06), rgba(0, 245, 255, 0.04));\n border: 1px solid rgba(255, 102, 0, 0.35);\n}\n.wiz-explainer[hidden] { display: none; }\n.wiz-explainer-title {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-md);\n margin: 0 0 var(--space-sm);\n}\n.wiz-explainer-title .icon { font-size: 18px; }\n.wiz-explainer-body {\n font-size: var(--font-size-base);\n line-height: 1.55;\n color: var(--color-text-neon-muted);\n margin: 0 0 var(--space-md);\n}\n.wiz-explainer-steps {\n margin: 0 0 var(--space-md);\n padding-left: var(--space-lg);\n font-size: var(--font-size-base);\n line-height: 1.75;\n color: var(--color-text-neon-muted);\n}\n.wiz-explainer-steps li strong { color: var(--color-text-white); }\n.wiz-explainer-actions {\n display: flex;\n gap: var(--space-sm);\n flex-wrap: wrap;\n}\n.wiz-explainer-footer {\n margin: var(--space-md) 0 0;\n padding-top: var(--space-sm);\n border-top: 1px solid rgba(255, 255, 255, 0.06);\n font-size: var(--font-size-sm);\n color: var(--color-text-dim);\n font-style: italic;\n}\n\n/* Level-up cards (Step 4) */\n.wiz-lvl-card {\n display: flex;\n align-items: flex-start;\n gap: var(--space-sm);\n padding: var(--space-sm) var(--space-md);\n background: var(--color-dark-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-lg);\n cursor: pointer;\n transition: var(--transition-fast);\n}\n.wiz-lvl-card.on {\n background: rgba(0, 245, 255, 0.08);\n border-color: var(--color-accent-secondary);\n}\n.wiz-lvl-card.unavailable {\n opacity: 0.45;\n cursor: not-allowed;\n}\n.wiz-lvl-text { flex: 1; }\n.wiz-lvl-title {\n font-family: var(--font-display);\n font-weight: 600;\n font-size: var(--font-size-base);\n color: var(--color-text-white);\n}\n.wiz-lvl-desc {\n font-size: var(--font-size-xs);\n color: var(--color-text-neon-muted);\n margin-top: 2px;\n line-height: 1.4;\n}\n.wiz-lvl-toggle {\n width: 38px;\n height: 22px;\n background: var(--color-dark-surface-hover);\n border-radius: var(--radius-full);\n border: 1px solid var(--color-border-neon);\n position: relative;\n flex-shrink: 0;\n margin-top: 2px;\n}\n.wiz-lvl-toggle::after {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n width: 16px;\n height: 16px;\n background: var(--color-text-neon-muted);\n border-radius: var(--radius-full);\n transition: var(--transition-fast);\n}\n.wiz-lvl-card.on .wiz-lvl-toggle {\n background: var(--color-accent-primary);\n border-color: var(--color-accent-primary);\n}\n.wiz-lvl-card.on .wiz-lvl-toggle::after {\n left: 18px;\n background: var(--color-bg-primary);\n}\n\n/* Done screen */\n.wiz-done {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-lg);\n text-align: center;\n padding: var(--space-xl);\n position: relative;\n z-index: 1;\n}\n.wiz-done-badge {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-sm);\n letter-spacing: 0.14em;\n color: var(--color-success-neon);\n text-shadow: var(--glow-success);\n}\n.wiz-done-tag {\n font-family: var(--font-display);\n font-weight: 600;\n font-size: var(--font-size-xl);\n color: var(--color-text-white);\n}\n.wiz-done-summary {\n display: flex;\n flex-direction: column;\n gap: var(--space-xs);\n width: 100%;\n max-width: 380px;\n padding: var(--space-md);\n background: var(--color-dark-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-lg);\n}\n.wiz-done-line {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-lg);\n font-family: var(--font-display);\n font-size: var(--font-size-sm);\n color: var(--color-text-neon-muted);\n}\n.wiz-done-line > span {\n letter-spacing: 0.08em;\n text-transform: uppercase;\n font-size: var(--font-size-xs);\n font-weight: 600;\n flex-shrink: 0;\n}\n.wiz-done-line strong {\n color: var(--color-text-white);\n font-weight: 600;\n text-align: right;\n word-break: break-word;\n}\n.wiz-done-demo {\n width: 100%;\n max-width: 400px;\n aspect-ratio: 16/9;\n border: 1px solid var(--color-accent-primary);\n border-radius: var(--radius-xl);\n background: var(--color-bg-primary);\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 6px;\n box-shadow: 0 0 30px rgba(255, 45, 106, 0.3);\n}\n.wiz-done-demo-label {\n font-family: var(--font-display);\n font-size: var(--font-size-xs);\n font-weight: 600;\n color: var(--color-text-neon-muted);\n letter-spacing: 0.14em;\n text-transform: uppercase;\n}\n.wiz-done-demo-year {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 64px;\n line-height: 0.9;\n color: var(--color-accent-primary);\n text-shadow: 0 0 24px rgba(255, 45, 106, 0.6);\n letter-spacing: -0.03em;\n}\n.wiz-done-demo-song {\n font-family: var(--font-display);\n font-size: var(--font-size-sm);\n font-weight: 600;\n color: var(--color-text-neon-muted);\n}\n\n/* CTA bar */\n.wiz-cta {\n padding: var(--space-md) var(--space-lg);\n display: flex;\n gap: var(--space-sm);\n border-top: 1px solid var(--color-border-neon);\n background: rgba(0, 0, 0, 0.3);\n position: relative;\n z-index: 1;\n}\n.wiz-cta .btn { flex: 1; }\n.wiz-cta .wiz-back { flex: 0 0 auto; min-width: 80px; }\n\n/* On step 3 the Playlist Hub renders its own CTA + detail sheet flush\n to the viewport bottom. wizard.js hides the legacy wiz-next/wiz-back\n buttons individually, but the wrapper itself stays visible \u2014 a ~33px\n tall empty band with padding + border + semi-opaque background pinned\n to the viewport bottom. Because `.wiz-cta` (z-1) is later in the DOM\n than `.wiz-frame` (z-1) at the same z-index inside `.wizard-takeover`,\n it paints on top of the wiz-frame subtree, including the playlist\n hub's `.plh-sheet-host`. (The host's z-50 only counts inside\n `.plh-root`'s `isolation: isolate` stacking context, not against\n wiz-cta.) The detail sheet's footer button at viewport bottom\n appeared clipped by the band. Drop the band on step 3 \u2014 the hub\n owns the chrome there. */\n.wiz-frame-playlist:not([hidden]) ~ .wiz-cta {\n display: none;\n}\n\n/* Finish-setup pill in admin header */\n.finish-setup-pill {\n font-family: var(--font-display);\n font-weight: 600;\n font-size: var(--font-size-sm);\n color: var(--color-accent-primary);\n background: rgba(255, 45, 106, 0.1);\n border: 1px solid rgba(255, 45, 106, 0.4);\n border-radius: var(--radius-full);\n padding: var(--space-xs) var(--space-md);\n cursor: pointer;\n transition: var(--transition-fast);\n}\n.finish-setup-pill:hover {\n background: rgba(255, 45, 106, 0.2);\n box-shadow: var(--glow-primary);\n}\n.finish-setup-pill.hidden { display: none; }\n\n/* Reduced-motion: collapse glow pulses to a single static state */\n@media (prefers-reduced-motion: reduce) {\n .wizard-takeover,\n .wizard-takeover * {\n animation: none !important;\n transition: none !important;\n }\n}\n\n/* Wizard Step 3 \u2014 game-mode form fields */\n.wiz-field {\n display: flex;\n flex-direction: column;\n gap: var(--space-xs);\n}\n.wiz-field-label {\n font-family: var(--font-display);\n font-weight: 600;\n font-size: var(--font-size-xs);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--color-text-neon-muted);\n}\n.wiz-chip-group {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-xs);\n}\n.wiz-chip {\n padding: var(--space-sm) var(--space-md);\n background: var(--color-dark-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-full);\n font-family: var(--font-display);\n font-weight: 600;\n font-size: var(--font-size-sm);\n color: var(--color-text-white);\n cursor: pointer;\n transition: var(--transition-fast);\n}\n.wiz-chip:hover { background: var(--color-dark-surface-hover); }\n.wiz-chip.active {\n background: var(--color-accent-primary);\n border-color: var(--color-accent-primary);\n color: var(--color-bg-primary);\n box-shadow: var(--glow-primary);\n}\n\n/* Step 3 \u2014 \"Request new playlist\" CTA below the playlist list */\n.wiz-request-playlist {\n margin-top: var(--space-md);\n align-self: flex-start;\n}\n\n/* When wizard is active, lift modals above the takeover overlay */\nbody.wizard-active .modal { z-index: calc(var(--z-overlay) + 10); }\n\n.wiz-difficulty-hint {\n margin-top: var(--space-sm);\n padding: var(--space-sm) var(--space-md);\n background: rgba(0, 245, 255, 0.06);\n border-left: 2px solid var(--color-accent-secondary);\n border-radius: var(--radius-sm);\n color: var(--color-text-neon-muted);\n font-size: var(--font-size-sm);\n line-height: 1.5;\n min-height: 1.5em;\n}\n\n/* #1475 \u2014 number field revealed by the \"Custom\" round-count chip */\n.wiz-rounds-custom {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n margin-top: var(--space-sm);\n}\n\n.wiz-rounds-custom input {\n width: 6em;\n padding: var(--space-sm) var(--space-md);\n background: var(--color-dark-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-sm);\n color: var(--color-text-white);\n font-family: var(--font-body);\n font-size: var(--font-size-base);\n}\n\n.wiz-rounds-custom input:focus {\n outline: none;\n border-color: var(--color-accent-primary);\n}\n\n.wiz-rounds-custom span {\n color: var(--color-text-neon-muted);\n font-size: var(--font-size-sm);\n}\n\n/* Wizard Step 5 \u2014 expandable detail panels under level-up toggles */\n.wiz-lvl-card {\n flex-direction: column;\n align-items: stretch;\n padding: 0;\n}\n.wiz-lvl-head {\n display: flex;\n align-items: flex-start;\n gap: var(--space-sm);\n padding: var(--space-sm) var(--space-md);\n cursor: pointer;\n user-select: none;\n}\n.wiz-lvl-card.unavailable .wiz-lvl-head { cursor: not-allowed; }\n.wiz-lvl-head:hover { background: rgba(255,255,255,0.02); }\n.wiz-lvl-card.on .wiz-lvl-head { border-bottom: 1px solid var(--color-border-neon); }\n\n.wiz-detail {\n padding: var(--space-md);\n display: flex;\n flex-direction: column;\n gap: var(--space-md);\n background: rgba(0,0,0,0.15);\n}\n.wiz-detail-checks {\n display: flex;\n flex-direction: column;\n gap: var(--space-xs);\n}\n.wiz-detail-check {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n padding: 6px 8px;\n border-radius: var(--radius-md);\n cursor: pointer;\n}\n.wiz-detail-check:hover { background: rgba(255,255,255,0.03); }\n.wiz-detail-check input[type=\"checkbox\"] {\n accent-color: var(--color-accent-primary);\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n}\n.wiz-detail-check-name {\n font-family: var(--font-display);\n font-weight: 500;\n font-size: var(--font-size-sm);\n color: var(--color-text-white);\n}\n.wiz-detail-empty {\n font-size: var(--font-size-sm);\n color: var(--color-text-neon-muted);\n padding: var(--space-sm);\n background: var(--color-dark-surface);\n border: 1px dashed var(--color-border-neon);\n border-radius: var(--radius-md);\n text-align: center;\n}\n.wiz-detail-input {\n padding: var(--space-sm) var(--space-md);\n background: var(--color-bg-primary);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-md);\n color: var(--color-text-white);\n font-family: ui-monospace, monospace;\n font-size: var(--font-size-sm);\n}\n.wiz-detail-input:focus {\n outline: none;\n border-color: var(--color-accent-secondary);\n box-shadow: 0 0 0 3px rgba(0,245,255,0.15);\n}\n.wiz-field-hint {\n font-size: var(--font-size-xs);\n color: var(--color-text-dim);\n line-height: 1.4;\n}\n\n/* ==========================================\n Home view (post-wizard lobby landing)\n ========================================== */\n\n/* When body is in home-mode: show the home-view card, hide only the setup/config sections.\n Runtime views (#admin-playing-*, #admin-reveal-*, #admin-end-*) stay untouched \u2014\n home-mode is exited before any of those show anyway. */\n/* #1138 cleanup: #my-requests + #ha-entities selectors removed \u2014 those legacy\n flat sections were deleted from admin.html. */\nbody.home-mode #media-players,\nbody.home-mode #music-service,\nbody.home-mode #playlists,\nbody.home-mode #game-settings,\nbody.home-mode #party-lights,\nbody.home-mode #tts-settings,\nbody.home-mode .admin-content > .admin-actions {\n display: none !important;\n}\n/* Variant A \u2014 QR Hero aesthetic for the home-view.\n Centered stage, glowing hero card, dual CTA bar. QR + player chips render\n inline via BeatifyHome.renderSession once Start game creates the session. */\n.home-view { display: none; }\n.home-view.hidden { display: none !important; }\nbody.home-mode #home-view,\nbody.home-mode .home-view {\n display: flex;\n flex-direction: column;\n min-height: calc(100vh - 120px);\n background: var(--color-bg-primary);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-xl);\n overflow: hidden;\n margin-bottom: var(--space-md);\n}\n\n.home-stage {\n flex: 1;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-md);\n padding: var(--space-xl) var(--space-lg);\n text-align: center;\n}\n.home-stage-bg {\n position: absolute;\n inset: 0;\n pointer-events: none;\n background:\n radial-gradient(ellipse at center, rgba(255, 45, 106, 0.15), transparent 55%),\n radial-gradient(ellipse at bottom, rgba(0, 245, 255, 0.08), transparent 50%);\n}\n\n.home-eyebrow {\n position: relative;\n z-index: 1;\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-sm);\n letter-spacing: 0.16em;\n text-transform: uppercase;\n color: var(--color-accent-secondary);\n}\n\n.home-headline {\n position: relative;\n z-index: 1;\n font-family: var(--font-display);\n font-weight: 900;\n font-size: var(--font-size-4xl);\n line-height: 0.95;\n letter-spacing: -0.02em;\n margin: 0;\n text-shadow: 0 0 40px rgba(255, 45, 106, 0.35);\n}\n.home-headline-sub {\n display: block;\n font-weight: 600;\n font-size: var(--font-size-xl);\n letter-spacing: 0.02em;\n text-shadow: none;\n color: var(--color-text-white);\n margin-top: 4px;\n}\n\n/* Hero card \u2014 visual placeholder for the QR that appears after Start */\n.home-hero-card {\n position: relative;\n z-index: 1;\n padding: var(--space-lg);\n background: var(--color-dark-surface);\n border: 1px solid var(--color-accent-primary);\n border-radius: var(--radius-2xl);\n box-shadow: 0 0 32px rgba(255, 45, 106, 0.22);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-sm);\n max-width: 280px;\n width: 100%;\n}\n.home-qr-loading {\n font-family: var(--font-display);\n font-weight: 600;\n font-size: var(--font-size-sm);\n color: var(--color-text-neon-muted);\n padding: var(--space-xl) 0;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n.home-qr-loading.hidden { display: none; }\n.home-qr-container {\n padding: 8px;\n background: var(--color-bg-white);\n border-radius: var(--radius-md);\n display: grid;\n place-items: center;\n min-width: 180px;\n min-height: 180px;\n}\n.home-qr-container:empty { display: none; }\n.home-qr-container img, .home-qr-container canvas {\n display: block;\n max-width: 180px;\n height: auto;\n}\n.home-hero-title {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-lg);\n color: var(--color-text-white);\n letter-spacing: -0.01em;\n}\n.home-hero-sub {\n font-size: var(--font-size-sm);\n color: var(--color-accent-secondary);\n font-family: ui-monospace, monospace;\n word-break: break-all;\n max-width: 260px;\n}\n\n/* Live player tiles \u2014 Jackbox-style grid. Host wears the pink-primary\n \"leader\" treatment (DESIGN.md); guests cycle through the brand neon\n palette (cyan \u2192 green \u2192 orange) so each player reads distinctly. */\n.home-players {\n position: relative;\n z-index: 1;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));\n gap: var(--space-sm);\n justify-items: center;\n width: 100%;\n max-width: 380px;\n margin-top: var(--space-lg);\n}\n.home-players:empty { display: none; }\n\n.home-player-tile {\n position: relative;\n width: 100%;\n aspect-ratio: 1;\n padding: var(--space-sm);\n border-radius: var(--radius-lg);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 6px;\n background: linear-gradient(135deg, var(--tile-from), var(--tile-to));\n border: 1.5px solid var(--tile-border);\n box-shadow: 0 0 14px var(--tile-glow);\n /* Guest default = cyan (c1). Variants override via custom props. */\n --tile-from: rgba(0, 245, 255, 0.32);\n --tile-to: rgba(0, 245, 255, 0.08);\n --tile-border: rgba(0, 245, 255, 0.7);\n --tile-glow: rgba(0, 245, 255, 0.35);\n}\n.home-player-tile-initial {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 28px;\n line-height: 1;\n color: var(--color-text-white);\n text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n}\n.home-player-tile-name {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-xs);\n color: var(--color-text-white);\n max-width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 0 2px;\n}\n/* Guest color variants cycle through brand neon palette (no purple \u2014\n reserved for analytics/steal per DESIGN.md). */\n.home-player-tile--c2 {\n --tile-from: rgba(57, 255, 20, 0.32);\n --tile-to: rgba(57, 255, 20, 0.08);\n --tile-border: rgba(57, 255, 20, 0.65);\n --tile-glow: rgba(57, 255, 20, 0.32);\n}\n.home-player-tile--c3 {\n --tile-from: rgba(255, 102, 0, 0.32);\n --tile-to: rgba(255, 102, 0, 0.08);\n --tile-border: rgba(255, 102, 0, 0.65);\n --tile-glow: rgba(255, 102, 0, 0.32);\n}\n.home-player-tile--c4 {\n --tile-from: rgba(0, 245, 255, 0.22);\n --tile-to: rgba(0, 245, 255, 0.04);\n --tile-border: rgba(0, 245, 255, 0.5);\n --tile-glow: rgba(0, 245, 255, 0.22);\n}\n/* Host tile \u2014 pink primary + glow-primary (DESIGN.md \"leader highlights\"). */\n.home-player-tile--host {\n --tile-from: rgba(255, 45, 106, 0.35);\n --tile-to: rgba(255, 45, 106, 0.08);\n --tile-border: rgba(255, 45, 106, 0.85);\n --tile-glow: rgba(255, 45, 106, 0.5);\n box-shadow: var(--glow-primary), 0 0 22px rgba(255, 45, 106, 0.35);\n}\n.home-player-tile-crown {\n position: absolute;\n top: -10px;\n right: -10px;\n font-size: 20px;\n line-height: 1;\n filter: drop-shadow(0 0 6px rgba(255, 45, 106, 0.8));\n pointer-events: none;\n}\n/* Empty-state: single full-width dashed pill (not a tile, to keep the\n \"no one here yet\" vibe distinct from \"someone is here\"). */\n.home-players-waiting {\n grid-column: 1 / -1;\n padding: var(--space-md);\n border-radius: var(--radius-full);\n border: 1px dashed var(--color-border-neon);\n background: transparent;\n color: var(--color-text-dim);\n font-family: var(--font-display);\n font-weight: 500;\n font-size: var(--font-size-sm);\n text-align: center;\n}\n\n.home-meta {\n position: relative;\n z-index: 1;\n font-family: var(--font-display);\n font-weight: 500;\n font-size: var(--font-size-xs);\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--color-text-dim);\n max-width: 320px;\n line-height: 1.6;\n}\n\n/* Sticky CTA bar at the bottom of the home card */\n.home-cta-bar {\n display: flex;\n gap: var(--space-sm);\n padding: var(--space-md) var(--space-lg);\n background: rgba(0, 0, 0, 0.3);\n border-top: 1px solid var(--color-border-neon);\n}\n.home-cta-edit {\n padding: var(--space-sm) var(--space-md);\n font-size: var(--font-size-sm);\n}\n.home-cta-start {\n flex: 1;\n padding: var(--space-md);\n font-size: var(--font-size-base);\n box-shadow: var(--glow-primary), 0 0 40px rgba(255, 45, 106, 0.25);\n}\n/* When Start game is demoted (admin hasn't joined yet), drop its glow so the eye\n lands on the prominent \"Join as player\" CTA instead. */\n.home-cta-start.btn-ghost { box-shadow: none; flex: 0 0 auto; }\n\n/* Prominent Join-as-player CTA \u2014 lives above the Back/Start row inside the\n home-stage column. Full-width + oversized so the admin's next step is\n unmissable (it's the single most important action on the home-view). */\n.home-cta-join {\n width: 100%;\n margin-top: var(--space-md);\n padding: var(--space-lg) var(--space-md);\n font-size: var(--font-size-xl);\n font-weight: 700;\n letter-spacing: 0.02em;\n border-radius: var(--radius-xl);\n box-shadow: var(--glow-primary), 0 0 48px rgba(255, 45, 106, 0.3);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-sm);\n}\n.home-cta-join svg {\n width: 26px;\n height: 26px;\n stroke-width: 2.25;\n}\n.home-cta-join.hidden { display: none; }\n\n/* Wizard Step 4 \u2014 game mode cards (Artist Challenge / Intro Mode / Closest Wins) */\n.wiz-mode-cards {\n display: flex;\n flex-direction: column;\n gap: var(--space-xs);\n}\n.wiz-mode-card {\n display: flex;\n align-items: flex-start;\n gap: var(--space-sm);\n padding: var(--space-sm) var(--space-md);\n background: var(--color-dark-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-lg);\n cursor: pointer;\n transition: var(--transition-fast);\n}\n.wiz-mode-card:hover { background: var(--color-dark-surface-hover); }\n/* Issue #827: a mode card disabled by an unmet requirement (e.g. Sudden Death\n below the 3-player floor) is dimmed and non-interactive.\n Issue #1799: the dimming used to sit on the card itself, which also dimmed\n the line explaining WHY it is blocked \u2014 the one line that has to stay\n readable. Dim the card's own content instead and leave .wiz-mode-hint.gated\n at full contrast. */\n.wiz-mode-card.disabled {\n cursor: not-allowed;\n pointer-events: none;\n}\n.wiz-mode-card.disabled .wiz-mode-icon,\n.wiz-mode-card.disabled .wiz-mode-title,\n.wiz-mode-card.disabled .wiz-lvl-toggle {\n opacity: 0.45;\n}\n/* Issue #1799: the gating requirement, shown in place of the mode hint. It is\n the only visible explanation on touch (no hover \u2192 no title tooltip). */\n.wiz-mode-hint.gated {\n color: var(--color-warning);\n font-weight: 600;\n}\n.wiz-mode-card.on {\n background: rgba(255, 45, 106, 0.08);\n border-color: var(--color-accent-primary);\n}\n.wiz-mode-icon {\n font-size: 22px;\n line-height: 1;\n flex-shrink: 0;\n margin-top: 2px;\n}\n.wiz-mode-body { flex: 1; min-width: 0; }\n.wiz-mode-title {\n font-family: var(--font-display);\n font-weight: 600;\n font-size: var(--font-size-base);\n color: var(--color-text-white);\n}\n.wiz-mode-hint {\n font-size: var(--font-size-xs);\n color: var(--color-text-neon-muted);\n margin-top: 2px;\n line-height: 1.45;\n}\n.wiz-mode-card.on .wiz-lvl-toggle {\n background: var(--color-accent-primary);\n border-color: var(--color-accent-primary);\n}\n.wiz-mode-card.on .wiz-lvl-toggle::after {\n left: 18px;\n background: var(--color-bg-primary);\n}\n\n/* Wizard Step 4 \u2014 core game-mode selector (#1180).\n \"Pick your game\" split: two poster panels, each with its own accent\n (year = pink, title&artist = cyan). The chosen one lifts + glows and shows a\n \"Playing\" badge; the other dims. Shared .wiz-mode-* type rules are overridden\n only inside .wiz-coremode-card so the bonus-mode cards are unaffected. */\n.wiz-coremode-cards {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-sm);\n}\n.wiz-coremode-card {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n gap: 6px;\n padding: var(--space-md) var(--space-sm);\n background: var(--color-dark-surface);\n border: 1.5px solid var(--color-border-neon);\n border-radius: var(--radius-xl);\n cursor: pointer;\n overflow: hidden;\n transition: transform var(--transition-fast), box-shadow var(--transition-fast),\n background var(--transition-fast), border-color var(--transition-fast),\n opacity var(--transition-fast);\n}\n.wiz-coremode-card:hover { background: var(--color-dark-surface-hover); }\n.wiz-coremode-card .wiz-mode-icon {\n font-size: 32px;\n margin-top: 0;\n}\n.wiz-coremode-card .wiz-mode-body { flex: none; }\n.wiz-coremode-card .wiz-mode-title {\n font-weight: 900;\n letter-spacing: 0.02em;\n text-transform: uppercase;\n}\n.wiz-coremode-card .wiz-mode-hint { color: var(--color-text-dim); }\n\n/* Selected \u2014 accent fill + lift + glow, per mode. */\n.wiz-coremode-card.selected { transform: translateY(-2px); }\n.wiz-coremode-card--pink.selected {\n border-color: var(--color-accent-primary);\n background: radial-gradient(120% 100% at 50% 0%, rgba(255, 45, 106, 0.22), rgba(255, 45, 106, 0.04));\n box-shadow: 0 0 24px rgba(255, 45, 106, 0.30);\n}\n.wiz-coremode-card--cyan.selected {\n border-color: var(--color-accent-secondary);\n background: radial-gradient(120% 100% at 50% 0%, rgba(0, 245, 255, 0.20), rgba(0, 245, 255, 0.03));\n box-shadow: 0 0 24px rgba(0, 245, 255, 0.28);\n}\n\n/* Unselected \u2014 dimmed, but lifts toward full on hover so it still feels pickable. */\n.wiz-coremode-card.dim { opacity: 0.5; }\n.wiz-coremode-card.dim:hover { opacity: 0.8; }\n\n/* \"Playing\" badge, top-right, tinted to the panel's accent. */\n.wiz-coremode-badge {\n position: absolute;\n top: 8px;\n right: 8px;\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 9px;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n padding: 2px 7px;\n border-radius: var(--radius-full);\n}\n.wiz-coremode-card--pink .wiz-coremode-badge {\n background: var(--color-accent-primary);\n color: var(--color-text-white);\n}\n.wiz-coremode-card--cyan .wiz-coremode-badge {\n background: var(--color-accent-secondary);\n color: #04222a;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .wiz-coremode-card { transition: none; }\n .wiz-coremode-card.selected { transform: none; }\n}\n\n/* Home-view: Cast to TV link */\n.home-cast-link {\n display: inline-flex;\n align-items: center;\n gap: var(--space-xs);\n padding: var(--space-xs) var(--space-md);\n background: var(--color-dark-surface);\n border: 1px solid var(--color-accent-secondary);\n border-radius: var(--radius-full);\n font-family: var(--font-display);\n font-weight: 600;\n font-size: var(--font-size-sm);\n color: var(--color-accent-secondary);\n text-decoration: none;\n position: relative;\n z-index: 1;\n transition: var(--transition-fast);\n}\n.home-cast-link:hover {\n background: rgba(0, 245, 255, 0.08);\n box-shadow: var(--glow-secondary);\n}\n.home-cast-link.hidden { display: none; }\n\n/* Wizard Step 5: TTS test button */\n.wiz-detail-test {\n align-self: flex-start;\n margin-top: var(--space-xs);\n padding: var(--space-xs) var(--space-md);\n font-size: var(--font-size-xs);\n}\n.wiz-detail-test[disabled] { opacity: 0.5; cursor: not-allowed; }\n\n/* Wizard Step 5: WLED phase preset grid */\n.wiz-wled-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-xs);\n}\n.wiz-wled-row {\n display: flex;\n align-items: center;\n gap: var(--space-xs);\n}\n.wiz-wled-phase {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: 10px;\n letter-spacing: 0.1em;\n color: var(--color-text-dim);\n min-width: 72px;\n}\n.wiz-wled-input {\n width: 60px;\n padding: 4px 8px;\n text-align: center;\n font-family: ui-monospace, monospace;\n font-size: var(--font-size-sm);\n}\n\n\n/* Home-view utility row \u2014 Cast to TV + Print QR sit side-by-side */\n.home-utility-row {\n display: flex;\n gap: var(--space-sm);\n flex-wrap: wrap;\n justify-content: center;\n position: relative;\n z-index: 1;\n}\n.home-utility-btn {\n display: inline-flex;\n align-items: center;\n gap: var(--space-xs);\n padding: var(--space-xs) var(--space-md);\n background: var(--color-dark-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-full);\n font-family: var(--font-display);\n font-weight: 600;\n font-size: var(--font-size-sm);\n color: var(--color-text-neon-muted);\n cursor: pointer;\n transition: var(--transition-fast);\n}\n.home-utility-btn:hover {\n color: var(--color-text-white);\n border-color: var(--color-accent-secondary);\n}\n.home-utility-btn.hidden { display: none; }\n\n/* End game button \u2014 only visible when a LOBBY session exists. Red-neon tint. */\n.home-cta-end {\n border-color: rgba(255, 0, 64, 0.4);\n color: var(--color-error-neon);\n}\n.home-cta-end:hover {\n background: rgba(255, 0, 64, 0.1);\n box-shadow: 0 0 12px rgba(255, 0, 64, 0.3);\n}\n.home-cta-end.hidden { display: none; }\n\n/* Home-view unconfigured state \u2014 setup prompt hero */\n.home-hero-card--setup {\n border-color: var(--color-border-neon);\n box-shadow: none;\n gap: var(--space-md);\n}\n.home-setup-glyph {\n width: 56px;\n height: 56px;\n display: grid;\n place-items: center;\n color: var(--color-accent-secondary);\n text-shadow: 0 0 12px rgba(0, 245, 255, 0.4);\n}\n.home-setup-glyph svg { width: 100%; height: 100%; }\n.home-hero-sub--plain {\n color: var(--color-text-neon-muted);\n font-family: var(--font-body);\n text-align: center;\n font-size: var(--font-size-sm);\n line-height: 1.5;\n max-width: 280px;\n}\n\n/* Setup-mode CTA takes the full width of the bar */\n.home-cta-setup {\n flex: 1;\n padding: var(--space-md);\n font-size: var(--font-size-base);\n box-shadow: var(--glow-primary), 0 0 40px rgba(255, 45, 106, 0.25);\n}\n.home-cta-setup.hidden { display: none; }\n\n/* ==========================================================================\n Player Onboarding v2 (DESIGN.md \u00A7 Player onboarding \u2014 post-QR education)\n ========================================================================== */\n\n/* Hide the outer .player-header (wordmark + connection indicator) on the\n tour/ready screens so they run full-screen \u2014 the ready view has its own\n wordmark hero and the tour has its own step-progress header. */\nbody.is-learning-screen .player-header { display: none; }\n/* During active play (the guessing round + the reveal) the big wordmark is\n redundant chrome and just eats vertical space, so hide the outer header \u2014\n the game/reveal cards carry their own context. Branding stays on the\n join / lobby / end screens. */\nbody.is-ingame .player-header { display: none; }\n\n/* Tour view \u2014 full-screen takeover, dark stage + dual-radial glow */\n#tour-view.view:not(.hidden) {\n display: flex;\n flex-direction: column;\n}\n.tour-container {\n min-height: 100vh;\n padding: var(--space-xl) var(--space-md) var(--space-md);\n background:\n radial-gradient(circle at 50% 10%, rgba(255, 45, 106, 0.10), transparent 55%),\n radial-gradient(circle at 85% 90%, rgba(0, 245, 255, 0.08), transparent 55%),\n var(--color-bg-primary);\n display: flex;\n flex-direction: column;\n}\n\n/* Wizard-style progress header (matches admin first-run wizard pattern) */\n.tour-header-wiz {\n margin-bottom: var(--space-lg);\n display: flex;\n flex-direction: column;\n gap: var(--space-sm);\n}\n.tour-step-count {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-family: var(--font-body);\n font-size: var(--font-size-xs);\n font-weight: 600;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--color-text-neon-muted);\n}\n.tour-step-count .of { color: var(--color-text-dim); font-weight: 500; }\n.tour-skip-link {\n font-family: var(--font-body);\n font-size: var(--font-size-sm);\n font-weight: 500;\n color: var(--color-text-dim);\n background: transparent;\n border: 0;\n cursor: pointer;\n padding: var(--space-xs) var(--space-sm);\n transition: color var(--transition-fast);\n}\n.tour-skip-link:hover,\n.tour-skip-link:focus-visible {\n color: var(--color-text-neon-muted);\n outline: none;\n}\n.tour-wiz-progress {\n display: flex;\n gap: 4px;\n width: 100%;\n}\n.tour-wiz-seg {\n flex: 1;\n height: 3px;\n background: rgba(255, 255, 255, 0.08);\n border-radius: var(--radius-full);\n overflow: hidden;\n position: relative;\n}\n.tour-wiz-seg.filled {\n background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary));\n box-shadow: 0 0 12px rgba(255, 45, 106, 0.5);\n}\n.tour-wiz-seg.active .tour-wiz-seg-inner {\n height: 100%;\n width: 60%;\n background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary));\n box-shadow: 0 0 12px rgba(255, 45, 106, 0.5);\n border-radius: var(--radius-full);\n}\n\n/* Tour card \u2014 one per step */\n.tour-card {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-md) 0;\n animation: tour-card-enter var(--transition-slow) ease-out;\n}\n@keyframes tour-card-enter {\n from { opacity: 0; transform: translateY(12px); }\n to { opacity: 1; transform: translateY(0); }\n}\n.tour-card.hidden { display: none; }\n@media (prefers-reduced-motion: reduce) {\n .tour-card { animation: none; }\n}\n\n.tour-title {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 2.5rem; /* ~40px \u2014 scales between 4xl and display */\n line-height: 1.0;\n text-align: center;\n color: var(--color-text-white);\n letter-spacing: -0.02em;\n margin-bottom: var(--space-sm);\n}\n.tour-caption {\n font-family: var(--font-body);\n font-weight: 500;\n font-size: var(--font-size-lg);\n text-align: center;\n color: var(--color-text-neon-muted);\n margin-bottom: var(--space-xl);\n max-width: 320px;\n}\n\n.tour-preview {\n flex: 1;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-md);\n margin-bottom: var(--space-md);\n}\n\n/* Preview: year slider (card 1) */\n.tour-preview-album {\n width: 88px; height: 88px;\n border-radius: var(--radius-lg);\n background: linear-gradient(135deg, #2a1b4a 0%, #1a1a24 100%);\n border: 1px solid rgba(255, 255, 255, 0.08);\n display: flex; align-items: center; justify-content: center;\n position: relative;\n overflow: hidden;\n}\n.tour-preview-album::after {\n content: '';\n position: absolute;\n width: 32px; height: 32px;\n border-radius: 50%;\n background: radial-gradient(circle, #0a0a12 28%, #2a2a3a 29%, #2a2a3a 62%, #0a0a12 63%);\n border: 1px solid rgba(255, 255, 255, 0.08);\n}\n.tour-preview-album::before {\n content: '\u266A';\n position: absolute;\n font-size: 26px;\n color: var(--color-accent-secondary);\n opacity: 0.75;\n z-index: 1;\n}\n.tour-year-display {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-md);\n}\n.tour-year-adjust {\n width: 38px; height: 38px;\n border-radius: 50%;\n border: 1.5px solid rgba(255, 255, 255, 0.25);\n background: transparent;\n color: rgba(255, 255, 255, 0.6);\n font-size: var(--font-size-xl);\n font-weight: 400;\n display: flex; align-items: center; justify-content: center;\n}\n.tour-year-big {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 4.25rem; /* ~68px \u2014 below year reveal's 56px per DESIGN.md rationale */\n color: var(--color-accent-secondary);\n text-shadow: 0 0 24px rgba(0, 245, 255, 0.6);\n line-height: 1;\n letter-spacing: -0.03em;\n}\n.tour-preview-slider {\n width: 100%;\n max-width: 320px;\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n}\n.tour-slider-label {\n font-family: var(--font-body);\n font-size: var(--font-size-sm);\n color: rgba(255, 255, 255, 0.5);\n min-width: 34px;\n text-align: center;\n}\n.tour-slider-track {\n flex: 1;\n height: 4px;\n background: rgba(255, 255, 255, 0.15);\n border-radius: 2px;\n position: relative;\n}\n.tour-slider-thumb {\n position: absolute;\n top: 50%;\n left: 45.3%;\n transform: translate(-50%, -50%);\n width: 20px; height: 20px;\n border-radius: 50%;\n background: var(--color-accent-secondary);\n box-shadow: 0 0 16px rgba(0, 245, 255, 0.8);\n border: 2px solid var(--color-bg-primary);\n}\n\n/* Preview: bet (card 2) */\n.tour-bet-button {\n background: linear-gradient(135deg, rgba(255, 45, 106, 0.12), rgba(255, 45, 106, 0.06));\n border: 2px solid var(--color-accent-primary);\n border-radius: var(--radius-xl);\n padding: var(--space-md) var(--space-lg);\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n box-shadow: 0 0 24px rgba(255, 45, 106, 0.35);\n}\n.tour-bet-button .tour-bet-dice {\n font-size: 30px;\n filter: drop-shadow(0 0 6px rgba(255, 45, 106, 0.6));\n}\n.tour-bet-button .tour-bet-label {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-lg);\n color: var(--color-text-white);\n}\n.tour-bet-score {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n padding: var(--space-sm) var(--space-md);\n background: var(--color-bg-surface);\n border-radius: var(--radius-md);\n border: 1px solid rgba(255, 255, 255, 0.06);\n}\n.tour-bet-score-base {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-2xl);\n color: var(--color-text-neon-muted);\n}\n.tour-bet-score-op { color: var(--color-text-dim); font-size: var(--font-size-lg); }\n.tour-bet-score-multi {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-2xl);\n color: var(--color-accent-primary);\n}\n.tour-bet-score-final {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: var(--font-size-4xl);\n color: var(--color-success-neon);\n text-shadow: 0 0 12px rgba(57, 255, 20, 0.5);\n}\n\n/* Preview: steal (card 3) */\n.tour-steal-button {\n background: linear-gradient(135deg, rgba(0, 245, 255, 0.12), rgba(0, 245, 255, 0.04));\n border: 2px solid var(--color-accent-secondary);\n border-radius: var(--radius-xl);\n padding: var(--space-md) var(--space-lg);\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n box-shadow: 0 0 24px rgba(0, 245, 255, 0.4);\n}\n.tour-steal-button .tour-steal-ninja { font-size: 30px; }\n.tour-steal-button .tour-steal-label {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-lg);\n color: var(--color-text-white);\n}\n.tour-steal-targets {\n display: flex;\n gap: var(--space-sm);\n align-items: center;\n}\n.tour-steal-target {\n background: var(--color-bg-surface);\n border-radius: var(--radius-md);\n padding: var(--space-sm) var(--space-md);\n font-family: var(--font-body);\n font-size: var(--font-size-sm);\n font-weight: 500;\n color: var(--color-text-neon-muted);\n border: 1px solid rgba(255, 255, 255, 0.06);\n}\n.tour-steal-target.highlighted {\n color: var(--color-text-white);\n border-color: var(--color-accent-secondary);\n box-shadow: 0 0 12px rgba(0, 245, 255, 0.35);\n}\n.tour-hint {\n font-family: var(--font-body);\n font-size: var(--font-size-sm);\n color: rgba(255, 255, 255, 0.4);\n text-align: center;\n font-style: italic;\n margin-top: var(--space-xs);\n}\n\n/* Preview: Title & Artist mode (card 5, #1180) */\n.tour-ta-fields {\n display: flex;\n flex-direction: column;\n gap: var(--space-sm);\n width: 100%;\n}\n.tour-ta-field {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 10px 14px;\n background: linear-gradient(180deg, rgba(255, 45, 106, 0.06), rgba(255, 255, 255, 0.02));\n border: 1px solid rgba(255, 45, 106, 0.22);\n border-radius: var(--radius-lg);\n text-align: left;\n}\n.tour-ta-field-label {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-xs);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--color-text-neon-muted);\n}\n.tour-ta-field-val {\n font-family: var(--font-body);\n font-weight: 600;\n font-size: var(--font-size-md);\n color: var(--color-text-white);\n}\n\n/* Preview: artist (card 4) */\n.tour-artist-prompt {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n padding: var(--space-sm) var(--space-md);\n background: var(--color-bg-surface);\n border-radius: var(--radius-md);\n border: 1px solid rgba(255, 255, 255, 0.06);\n width: 100%;\n max-width: 320px;\n}\n.tour-artist-prompt .tour-artist-mic { font-size: var(--font-size-xl); }\n.tour-artist-prompt .tour-artist-who {\n font-family: var(--font-body);\n font-size: var(--font-size-base);\n font-weight: 500;\n color: var(--color-text-white);\n}\n.tour-artist-prompt .tour-artist-bonus {\n margin-left: auto;\n background: rgba(34, 197, 94, 0.15);\n color: var(--color-success);\n font-weight: 700;\n font-size: var(--font-size-sm);\n padding: 2px var(--space-sm);\n border-radius: var(--radius-full);\n}\n.tour-artist-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-sm);\n width: 100%;\n max-width: 320px;\n}\n.tour-artist-option {\n min-height: 48px;\n padding: var(--space-sm) var(--space-md);\n border: 2px solid rgba(255, 255, 255, 0.12);\n border-radius: var(--radius-md);\n background: var(--color-bg-surface);\n color: var(--color-text-white);\n font-family: var(--font-body);\n font-size: var(--font-size-base);\n font-weight: 500;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: default;\n}\n.tour-artist-option.is-winner {\n background: var(--color-success);\n border-color: var(--color-success);\n color: var(--color-text-white);\n box-shadow: var(--glow-primary);\n}\n\n/* Tour footer: Skip + Next buttons */\n.tour-footer {\n margin-top: auto;\n padding-top: var(--space-md);\n display: flex;\n gap: var(--space-sm);\n align-items: stretch;\n}\n.btn-tour-skip {\n flex: 1;\n background: transparent;\n color: var(--color-text-neon-muted);\n border: 1.5px solid rgba(255, 255, 255, 0.15);\n border-radius: var(--radius-lg);\n padding: var(--space-md) var(--space-md);\n font-family: var(--font-body);\n font-weight: 600;\n font-size: var(--font-size-md);\n cursor: pointer;\n}\n.btn-tour-skip:hover,\n.btn-tour-skip:focus-visible {\n border-color: rgba(255, 255, 255, 0.3);\n color: var(--color-text-white);\n outline: none;\n}\n.btn-tour-next {\n flex: 2;\n background: var(--color-accent-primary);\n color: var(--color-text-white);\n border: none;\n border-radius: var(--radius-lg);\n padding: var(--space-md) var(--space-lg);\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-lg);\n box-shadow: var(--glow-primary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-sm);\n}\n.btn-tour-next .chev { opacity: 0.85; }\n\n/* Ready view \u2014 showtime transition between tour and lobby */\n#ready-view.view:not(.hidden) {\n display: flex;\n flex-direction: column;\n}\n.ready-container {\n min-height: 100vh;\n padding: var(--space-xl);\n background:\n radial-gradient(circle at 50% 30%, rgba(255, 45, 106, 0.10), transparent 55%),\n radial-gradient(circle at 85% 80%, rgba(0, 245, 255, 0.08), transparent 55%),\n var(--color-bg-primary);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: var(--space-sm);\n}\n.ready-wordmark {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 5rem; /* ~80px \u2014 at hero scale */\n letter-spacing: -0.02em;\n margin-bottom: var(--space-sm);\n text-shadow: 0 0 48px rgba(255, 45, 106, 0.55);\n animation: ready-wordmark-in 0.5s ease-out;\n}\n.ready-wordmark .beat { color: var(--color-text-white); }\n.ready-wordmark .ify {\n background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary));\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent;\n}\n@keyframes ready-wordmark-in {\n from { opacity: 0; transform: translateY(16px); }\n to { opacity: 1; transform: translateY(0); }\n}\n.ready-name {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-3xl);\n color: var(--color-text-white);\n margin-bottom: var(--space-xs);\n animation: ready-fade-in 0.5s ease-out 0.1s both;\n}\n.ready-subtitle {\n font-family: var(--font-body);\n font-size: var(--font-size-md);\n color: var(--color-text-neon-muted);\n margin-bottom: var(--space-2xl);\n animation: ready-fade-in 0.5s ease-out 0.2s both;\n}\n@keyframes ready-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n.ready-waiting {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-md);\n animation: ready-fade-in 0.5s ease-out 0.3s both;\n}\n.ready-pulse {\n position: relative;\n width: 16px; height: 16px;\n border-radius: 50%;\n background: var(--color-accent-secondary);\n box-shadow: 0 0 12px rgba(0, 245, 255, 0.7);\n}\n.ready-pulse::before {\n content: '';\n position: absolute;\n inset: -8px;\n border-radius: 50%;\n border: 2px solid var(--color-accent-secondary);\n opacity: 0.6;\n animation: ready-pulse-ring 1.8s ease-out infinite;\n}\n@keyframes ready-pulse-ring {\n 0% { transform: scale(0.6); opacity: 0.8; }\n 100% { transform: scale(2.4); opacity: 0; }\n}\n@media (prefers-reduced-motion: reduce) {\n .ready-wordmark, .ready-name, .ready-subtitle, .ready-waiting { animation: none; }\n .ready-pulse::before { animation: none; opacity: 0; }\n}\n.ready-label {\n font-family: var(--font-body);\n font-size: var(--font-size-md);\n font-weight: 500;\n color: var(--color-text-white);\n}\n.ready-count {\n font-family: var(--font-body);\n font-size: var(--font-size-sm);\n color: var(--color-text-dim);\n}\n\n/* Lobby: Replay-tour link */\n.replay-tour-link {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n padding: var(--space-sm) var(--space-md);\n background: transparent;\n border: 1px dashed rgba(255, 45, 106, 0.4);\n border-radius: var(--radius-md);\n color: var(--color-accent-primary);\n font-family: var(--font-body);\n font-size: var(--font-size-sm);\n font-weight: 600;\n text-decoration: none;\n margin-bottom: var(--space-sm);\n cursor: pointer;\n width: 100%;\n transition: all var(--transition-fast);\n}\n.replay-tour-link:hover,\n.replay-tour-link:focus-visible {\n border-color: var(--color-accent-primary);\n background: rgba(255, 45, 106, 0.05);\n outline: none;\n}\n.replay-tour-link .arrow { margin-left: auto; }\n\n/* Admin home-view: LEARNING player state */\n.home-player-tile--learning {\n border-style: dashed !important;\n opacity: 0.72;\n}\n.home-player-tile-tour {\n position: absolute;\n top: -6px;\n right: -6px;\n background: rgba(0, 245, 255, 0.1);\n color: var(--color-accent-secondary);\n font-family: var(--font-body);\n font-size: 9px;\n font-weight: 700;\n letter-spacing: 0.06em;\n padding: 2px 6px;\n border-radius: var(--radius-full);\n border: 1px solid rgba(0, 245, 255, 0.4);\n box-shadow: 0 0 8px rgba(0, 245, 255, 0.25);\n}\n.home-learning-warning {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-xs);\n padding: var(--space-sm) var(--space-md);\n margin-bottom: var(--space-sm);\n background: rgba(255, 102, 0, 0.08);\n border: 1px solid rgba(255, 102, 0, 0.25);\n border-radius: var(--radius-md);\n color: var(--color-warning-alt);\n font-family: var(--font-body);\n font-size: var(--font-size-sm);\n font-weight: 500;\n text-align: center;\n}\n.home-learning-warning.hidden { display: none; }\n\n/* ==========================================================================\n Player lobby \u2014 tile grid (mirrors admin .home-player-tile)\n Jackbox-style tiles replace the legacy flat .player-card chips. Host wears\n pink + crown; guests cycle cyan \u2192 green \u2192 orange \u2192 dim-cyan in join order;\n current player gets a cyan \"YOU\" chip in the same top-right slot as the\n crown (they never collide \u2014 is_admin resolves to crown first).\n ========================================================================== */\n.player-tiles-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));\n gap: var(--space-sm);\n justify-items: center;\n width: 100%;\n}\n.player-tiles-grid:empty { display: none; }\n\n.player-tile {\n position: relative;\n width: 100%;\n aspect-ratio: 1;\n padding: var(--space-sm);\n border-radius: var(--radius-lg);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 6px;\n background: linear-gradient(135deg, var(--tile-from), var(--tile-to));\n border: 1.5px solid var(--tile-border);\n box-shadow: 0 0 14px var(--tile-glow);\n /* Guest default (c1) = cyan. Variants override via custom props. */\n --tile-from: rgba(0, 245, 255, 0.32);\n --tile-to: rgba(0, 245, 255, 0.08);\n --tile-border: rgba(0, 245, 255, 0.7);\n --tile-glow: rgba(0, 245, 255, 0.35);\n transition: box-shadow var(--transition-fast), border-color var(--transition-fast);\n}\n.player-tile-initial {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: var(--font-size-3xl);\n line-height: 1;\n color: var(--color-text-white);\n text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n}\n.player-tile-name {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-xs);\n color: var(--color-text-white);\n max-width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 0 2px;\n}\n.player-tile--c2 {\n --tile-from: rgba(57, 255, 20, 0.32);\n --tile-to: rgba(57, 255, 20, 0.08);\n --tile-border: rgba(57, 255, 20, 0.65);\n --tile-glow: rgba(57, 255, 20, 0.32);\n}\n.player-tile--c3 {\n --tile-from: rgba(255, 102, 0, 0.32);\n --tile-to: rgba(255, 102, 0, 0.08);\n --tile-border: rgba(255, 102, 0, 0.65);\n --tile-glow: rgba(255, 102, 0, 0.32);\n}\n.player-tile--c4 {\n --tile-from: rgba(0, 245, 255, 0.22);\n --tile-to: rgba(0, 245, 255, 0.04);\n --tile-border: rgba(0, 245, 255, 0.5);\n --tile-glow: rgba(0, 245, 255, 0.22);\n}\n.player-tile--host {\n --tile-from: rgba(255, 45, 106, 0.35);\n --tile-to: rgba(255, 45, 106, 0.08);\n --tile-border: rgba(255, 45, 106, 0.85);\n --tile-glow: rgba(255, 45, 106, 0.5);\n box-shadow: var(--glow-primary), 0 0 22px rgba(255, 45, 106, 0.35);\n}\n\n/* Host marker \u2014 crown, top-right */\n.player-tile-crown {\n position: absolute;\n top: -10px;\n right: -10px;\n font-size: 20px;\n line-height: 1;\n filter: drop-shadow(0 0 6px rgba(255, 45, 106, 0.8));\n pointer-events: none;\n}\n\n/* Current-player marker \u2014 cyan YOU chip, top-right (only shows when NOT host) */\n.player-tile-you-chip {\n position: absolute;\n top: -10px;\n right: -10px;\n background: var(--color-accent-secondary);\n color: var(--color-bg-primary);\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 9px;\n letter-spacing: 0.1em;\n padding: 3px 7px;\n border-radius: var(--radius-full);\n box-shadow: 0 0 12px rgba(0, 245, 255, 0.6);\n pointer-events: none;\n}\n\n/* Away badge \u2014 for disconnected players */\n.player-tile-away {\n position: absolute;\n bottom: -8px;\n left: 50%;\n transform: translateX(-50%);\n font-family: var(--font-body);\n font-size: 9px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--color-text-dim);\n background: var(--color-bg-primary);\n padding: 2px 6px;\n border-radius: var(--radius-full);\n border: 1px solid rgba(255, 255, 255, 0.12);\n pointer-events: none;\n}\n.player-tile--disconnected {\n opacity: 0.5;\n filter: grayscale(0.4);\n}\n\n/* New-join animation (carried over from .player-card.is-new) */\n.player-tile.is-new {\n animation: player-tile-pop var(--transition-slow) ease-out;\n}\n@keyframes player-tile-pop {\n 0% { transform: scale(0.6); opacity: 0; }\n 60% { transform: scale(1.08); opacity: 1; }\n 100% { transform: scale(1); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) {\n .player-tile.is-new { animation: none; }\n}\n\n/* ==========================================================================\n Round-reveal v2 \u2014 Duel layout + breakdown + stats sheets (DESIGN.md)\n ========================================================================== */\n\n/* Header v2: round count + difficulty badge + \u24D8 */\n.reveal-header-v2 {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--space-md);\n gap: var(--space-sm);\n}\n.reveal-header-v2 .round-count {\n font-family: var(--font-body);\n font-size: var(--font-size-xs);\n font-weight: 600;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--color-text-neon-muted);\n display: flex; align-items: center; gap: 4px;\n}\n.reveal-header-v2 .header-right {\n display: flex; align-items: center; gap: var(--space-sm);\n}\n/* Auto-advance countdown ring on the player reveal (mirrors admin #1048 /\n dashboard #1185). Cyan per DESIGN.md \u2014 timer = --color-accent-secondary. */\n.reveal-advance-pill {\n position: relative;\n width: 32px; height: 32px;\n flex-shrink: 0;\n display: inline-flex; align-items: center; justify-content: center;\n}\n.reveal-advance-pill.hidden { display: none; }\n.reveal-advance-svg {\n width: 100%; height: 100%;\n transform: rotate(-90deg);\n}\n.reveal-advance-bg {\n fill: none;\n stroke: rgba(255, 255, 255, 0.12);\n stroke-width: 5;\n}\n.reveal-advance-fg {\n fill: none;\n stroke: var(--color-accent-secondary);\n stroke-width: 5;\n stroke-linecap: round;\n transition: stroke-dashoffset 0.5s linear;\n filter: drop-shadow(var(--glow-secondary));\n}\n.reveal-advance-num {\n position: absolute; inset: 0;\n display: flex; align-items: center; justify-content: center;\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 13px;\n color: var(--color-accent-secondary);\n}\n.info-btn {\n width: 28px; height: 28px;\n border-radius: 50%;\n border: 1px solid rgba(255, 255, 255, 0.14);\n background: var(--color-bg-surface);\n color: var(--color-text-neon-muted);\n font-size: var(--font-size-base);\n font-weight: 700;\n font-family: var(--font-display);\n display: flex; align-items: center; justify-content: center;\n cursor: pointer;\n transition: color var(--transition-fast), border-color var(--transition-fast);\n padding: 0;\n}\n.info-btn:hover,\n.info-btn:focus-visible {\n color: var(--color-text-white);\n border-color: rgba(255, 255, 255, 0.3);\n outline: none;\n}\n\n/* Song strip */\n.song-strip {\n display: flex; align-items: center; gap: var(--space-sm);\n padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-sm);\n background: rgba(255, 255, 255, 0.04);\n border-radius: var(--radius-lg);\n border: 1px solid rgba(255, 255, 255, 0.08);\n margin-bottom: var(--space-md);\n}\n.song-strip-cover {\n width: 56px; height: 56px;\n border-radius: var(--radius-md);\n object-fit: cover;\n flex-shrink: 0;\n background: linear-gradient(135deg, #ff6b9a, #6366f1);\n}\n.song-strip-info { flex: 1; min-width: 0; }\n.song-strip-title {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-md);\n color: var(--color-text-white);\n overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.song-strip-artist {\n font-family: var(--font-body);\n font-size: var(--font-size-sm);\n color: var(--color-text-neon-muted);\n margin-top: 2px;\n overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n\n/* Chip row (bet / streak) */\n.chip-row {\n display: flex; gap: var(--space-xs);\n margin-bottom: var(--space-sm);\n flex-wrap: wrap;\n}\n.chip-row.hidden { display: none; }\n.chip-row .chip {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 5px 10px;\n border-radius: var(--radius-full);\n font-family: var(--font-body);\n font-size: var(--font-size-xs);\n font-weight: 700;\n letter-spacing: 0.04em;\n}\n.chip-row .chip--bet-won {\n background: rgba(255, 45, 106, 0.12);\n border: 1px solid rgba(255, 45, 106, 0.5);\n color: var(--color-accent-primary);\n box-shadow: 0 0 12px rgba(255, 45, 106, 0.2);\n}\n.chip-row .chip--bet-lost {\n background: rgba(255, 0, 64, 0.08);\n border: 1px solid rgba(255, 0, 64, 0.4);\n color: var(--color-error-neon);\n}\n.chip-row .chip--streak {\n background: rgba(255, 102, 0, 0.12);\n border: 1px solid rgba(255, 102, 0, 0.5);\n color: var(--color-warning-alt);\n}\n\n/* Duel */\n.duel {\n padding: var(--space-lg) var(--space-xs) var(--space-md);\n margin-bottom: var(--space-sm);\n}\n.duel-emotion {\n text-align: center;\n font-family: var(--font-display);\n font-weight: 900;\n font-size: var(--font-size-2xl);\n letter-spacing: 0.06em;\n margin-bottom: var(--space-md);\n min-height: 1.2em;\n transition: color var(--transition-normal);\n}\n.duel-emotion.hidden { visibility: hidden; }\n.duel-emotion--exact {\n color: var(--color-success-neon);\n text-shadow: 0 0 16px rgba(57, 255, 20, 0.55);\n}\n.duel-emotion--close {\n color: var(--color-success-neon);\n text-shadow: 0 0 14px rgba(57, 255, 20, 0.45);\n}\n.duel-emotion--wrong {\n color: var(--color-error-neon);\n text-shadow: 0 0 14px rgba(255, 0, 64, 0.45);\n}\n.duel-emotion--missed {\n color: var(--color-text-dim);\n text-shadow: none;\n}\n.duel-row {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n gap: var(--space-sm);\n align-items: center;\n}\n.duel-side { text-align: center; min-width: 0; }\n.duel-label {\n font-family: var(--font-body);\n font-size: var(--font-size-xs);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--color-text-dim);\n font-weight: 600;\n margin-bottom: var(--space-sm);\n}\n.duel-year {\n font-family: var(--font-display);\n font-weight: 900;\n /* Issue #1072: scale down on narrow viewports so a 4-digit year never overflows\n its 1fr track and pushes the duel-row past the screen edge. */\n font-size: clamp(40px, 12vw, 64px);\n line-height: 1;\n letter-spacing: -0.03em;\n}\n.duel-year.mine { color: var(--color-text-neon-muted); }\n.duel-year.correct {\n color: var(--color-accent-secondary);\n text-shadow: 0 0 24px rgba(0, 245, 255, 0.6);\n}\n.duel-gap {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 2px;\n min-width: 48px;\n}\n.duel-gap-x {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-xl);\n color: var(--color-text-dim);\n opacity: 0.6;\n line-height: 1;\n}\n.duel-gap-n {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: var(--font-size-2xl);\n color: var(--color-error-neon);\n text-shadow: 0 0 10px rgba(255, 0, 64, 0.35);\n line-height: 1;\n}\n.duel-gap--exact .duel-gap-n {\n color: var(--color-success-neon);\n text-shadow: 0 0 10px rgba(57, 255, 20, 0.5);\n}\n.duel-gap--close .duel-gap-n {\n color: var(--color-success-neon);\n text-shadow: 0 0 8px rgba(57, 255, 20, 0.35);\n}\n.duel-gap-unit {\n font-family: var(--font-body);\n font-size: 9px;\n color: var(--color-text-dim);\n text-transform: uppercase;\n letter-spacing: 0.1em;\n margin-top: 3px;\n}\n\n/* Score row */\n.score-row {\n display: flex; align-items: center; justify-content: space-between;\n padding: 14px 18px;\n background: var(--color-bg-surface);\n border-radius: var(--radius-lg);\n border: 1px solid rgba(0, 245, 255, 0.25);\n box-shadow: 0 0 14px rgba(0, 245, 255, 0.12);\n margin-bottom: var(--space-md);\n gap: var(--space-sm);\n}\n.score-row-left {\n font-family: var(--font-body);\n font-size: var(--font-size-xs);\n color: var(--color-text-neon-muted);\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n display: flex; flex-direction: column; gap: 3px;\n min-width: 0;\n}\n.score-row-subtitle {\n color: var(--color-text-white);\n font-size: var(--font-size-sm);\n font-weight: 700;\n letter-spacing: 0;\n text-transform: none;\n overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.score-row-right {\n display: flex; align-items: center; gap: var(--space-sm);\n flex-shrink: 0;\n}\n.score-row-pts {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 38px;\n color: var(--color-accent-secondary);\n text-shadow: 0 0 18px rgba(0, 245, 255, 0.5);\n line-height: 1;\n}\n\n/* Standings (compact list inside a card-section) */\n.standings-section .leaderboard-list {\n display: flex; flex-direction: column; gap: 6px;\n}\n\n/* ==========================================================================\n Bottom-sheet modal (used for points breakdown + round stats)\n ========================================================================== */\n.sheet-backdrop {\n position: fixed;\n inset: 0;\n z-index: 400;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n}\n.sheet-backdrop.hidden { display: none; }\n.sheet-dim {\n position: absolute; inset: 0;\n background: rgba(10, 10, 18, 0.6);\n backdrop-filter: blur(2px);\n animation: sheet-dim-in 200ms ease-out;\n}\n@keyframes sheet-dim-in { from { opacity: 0; } to { opacity: 1; } }\n.sheet {\n position: relative;\n z-index: 1;\n width: 100%;\n max-width: 520px;\n background: linear-gradient(180deg, #14141e, #0a0a12);\n border-top: 1px solid rgba(0, 245, 255, 0.25);\n border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;\n box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5), 0 -4px 16px rgba(0, 245, 255, 0.1);\n padding: 14px 20px calc(28px + env(safe-area-inset-bottom, 0));\n max-height: 80vh;\n overflow-y: auto;\n animation: sheet-slide-up 320ms cubic-bezier(0.22, 0.8, 0.32, 1);\n}\n@keyframes sheet-slide-up {\n from { transform: translateY(100%); }\n to { transform: translateY(0); }\n}\n@media (prefers-reduced-motion: reduce) {\n .sheet-dim { animation: none; }\n .sheet { animation: none; }\n}\n.sheet-handle {\n width: 40px; height: 4px; border-radius: 2px;\n background: rgba(255, 255, 255, 0.2);\n margin: 0 auto 16px;\n}\n.sheet-header {\n display: flex; align-items: center; justify-content: space-between;\n margin-bottom: var(--space-md);\n}\n.sheet-title {\n font-family: var(--font-display);\n font-weight: 800;\n font-size: var(--font-size-lg);\n display: flex; align-items: center; gap: 8px;\n color: var(--color-text-white);\n}\n.sheet-close {\n width: 32px; height: 32px; border-radius: 50%;\n background: rgba(255, 255, 255, 0.08);\n border: 0;\n color: var(--color-text-neon-muted);\n font-size: var(--font-size-base);\n font-weight: 700;\n display: flex; align-items: center; justify-content: center;\n cursor: pointer;\n}\n.sheet-close:hover,\n.sheet-close:focus-visible {\n color: var(--color-text-white);\n background: rgba(255, 255, 255, 0.14);\n outline: none;\n}\n\n/* Points breakdown content */\n.breakdown-list {\n display: flex; flex-direction: column;\n margin-bottom: var(--space-md);\n}\n.breakdown-row {\n display: flex; align-items: center; justify-content: space-between;\n padding: 10px 0;\n font-family: var(--font-body);\n font-size: var(--font-size-base);\n}\n.breakdown-row + .breakdown-row { border-top: 1px solid rgba(255, 255, 255, 0.05); }\n.breakdown-row .label {\n color: var(--color-text-neon-muted);\n display: flex; align-items: center; gap: 8px;\n}\n.breakdown-row .label .emoji { font-size: var(--font-size-md); }\n.breakdown-row .value {\n font-family: var(--font-display);\n font-weight: 800;\n font-size: var(--font-size-md);\n}\n.breakdown-row .value--positive { color: var(--color-success-neon); }\n.breakdown-row .value--multiplier { color: var(--color-accent-primary); }\n.breakdown-row .value--neutral { color: var(--color-text-white); }\n.breakdown-total {\n display: flex; align-items: center; justify-content: space-between;\n padding: var(--space-md);\n border-radius: var(--radius-lg);\n background: linear-gradient(90deg, rgba(0, 245, 255, 0.08), rgba(255, 45, 106, 0.05));\n border: 1px solid rgba(0, 245, 255, 0.3);\n}\n.breakdown-total .label {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: var(--font-size-md);\n color: var(--color-text-white);\n}\n.breakdown-total .value {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: var(--font-size-3xl);\n color: var(--color-accent-secondary);\n text-shadow: 0 0 16px rgba(0, 245, 255, 0.5);\n}\n.breakdown-total--zero .value { color: var(--color-text-dim); text-shadow: none; }\n.breakdown-empty {\n text-align: center;\n padding: var(--space-md) 0;\n}\n.breakdown-empty-icon { font-size: 42px; margin-bottom: var(--space-sm); }\n.breakdown-empty-text {\n color: var(--color-text-neon-muted);\n font-family: var(--font-body);\n font-size: var(--font-size-base);\n margin-bottom: var(--space-md);\n}\n\n/* Round stats content */\n.difficulty-visual {\n display: flex; align-items: center; justify-content: space-between;\n padding: var(--space-md);\n background: rgba(255, 0, 64, 0.08);\n border: 1px solid rgba(255, 0, 64, 0.3);\n border-radius: var(--radius-md);\n margin-bottom: var(--space-sm);\n gap: var(--space-sm);\n}\n.difficulty-visual .left {\n font-family: var(--font-display);\n font-weight: 800;\n font-size: var(--font-size-sm);\n color: var(--color-error-neon);\n min-width: 0;\n}\n.difficulty-visual .left .sub {\n font-family: var(--font-body);\n font-size: var(--font-size-xs);\n font-weight: 500;\n color: var(--color-text-neon-muted);\n margin-top: 3px;\n}\n.difficulty-visual .stars { font-size: var(--font-size-md); letter-spacing: 2px; white-space: nowrap; }\n.difficulty-visual .star-filled { color: var(--color-warning-alt); }\n.difficulty-visual .star-empty { color: rgba(255, 255, 255, 0.15); }\n\n.stats-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-sm);\n margin-bottom: var(--space-sm);\n}\n.stats-card {\n padding: 12px 14px;\n background: rgba(255, 255, 255, 0.04);\n border: 1px solid rgba(255, 255, 255, 0.08);\n border-radius: var(--radius-md);\n}\n.stats-card .lbl {\n font-family: var(--font-body);\n font-size: 10px;\n color: var(--color-text-dim);\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n.stats-card .val {\n font-family: var(--font-display);\n font-weight: 800;\n font-size: var(--font-size-2xl);\n margin-top: 4px;\n color: var(--color-text-white);\n}\n.stats-card .val.cyan { color: var(--color-accent-secondary); }\n.stats-card .val.success { color: var(--color-success-neon); }\n.stats-card .val.warn { color: var(--color-error-neon); }\n.stats-card .sub {\n font-family: var(--font-body);\n font-size: 10px;\n color: var(--color-text-neon-muted);\n margin-top: 2px;\n}\n\n.furthest-list { display: flex; flex-direction: column; gap: 6px; }\n.furthest-row {\n display: flex; align-items: center; justify-content: space-between;\n padding: 10px 12px;\n background: rgba(255, 255, 255, 0.03);\n border-radius: var(--radius-md);\n font-family: var(--font-body);\n font-size: var(--font-size-sm);\n}\n.furthest-row .name { font-weight: 600; color: var(--color-text-white); }\n.furthest-row .off {\n color: var(--color-error-neon);\n font-family: var(--font-display);\n font-weight: 700;\n}\n\n.stats-empty {\n text-align: center;\n color: var(--color-text-dim);\n font-family: var(--font-body);\n font-size: var(--font-size-sm);\n padding: var(--space-md);\n}\n\n/* ==========================================================================\n Gameplay v3 \u2014 Arcade layout (DESIGN.md Variant D)\n Massive year \u00B7 tappable tiles \u00B7 neon timer \u00B7 3D buttons.\n Supersedes legacy .album-cover-container, .year-display, .slider-container,\n .bet-container, .submit-btn, .steal-btn, .submitted-confirmation, and the\n .game-sticky-bar + .game-header-compact header.\n ========================================================================== */\n\n.game-container--arcade {\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n/* Arcade header: pulse-orb album + \"Round N of M\" + neon timer */\n.arc-header {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n gap: var(--space-sm);\n padding: var(--space-sm) var(--space-md);\n position: sticky;\n top: 0;\n z-index: 5;\n background: linear-gradient(180deg, rgba(10, 10, 18, 0.95), rgba(10, 10, 18, 0.82) 72%, transparent);\n backdrop-filter: blur(8px);\n margin-bottom: var(--space-md);\n}\n\n/* #817: floating mini-timer \u2014 always visible during PLAYING when the main\n neon timer scrolls out of view. Position-fixed so it works regardless of\n any sticky-positioning quirks on iOS Safari. Smaller and quieter than\n the main timer so it doesn't overwhelm the lower content (slider,\n challenges, submit button) once it's revealed. Syncing with the main\n timer + show/hide via IntersectionObserver lives in player-game.js. */\n.timer-float {\n position: fixed;\n top: max(env(safe-area-inset-top, 0px) + 8px, 8px);\n right: 12px;\n z-index: 100;\n width: 52px;\n height: 52px;\n border-radius: 50%;\n background: rgba(10, 10, 18, 0.78);\n border: 2px solid var(--color-accent-primary);\n box-shadow: 0 0 14px rgba(255, 45, 106, 0.45),\n inset 0 0 8px rgba(255, 45, 106, 0.25);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 22px;\n line-height: 1;\n color: var(--color-accent-primary);\n text-shadow: 0 0 8px rgba(255, 45, 106, 0.6);\n backdrop-filter: blur(8px);\n transition: opacity 0.2s ease-out, transform 0.2s ease-out;\n pointer-events: none;\n /* Default: hidden via .hidden override below. Becomes visible when\n JS adds .timer-float--visible (gated on the main timer being\n offscreen + game-view being active). */\n}\n.timer-float.hidden {\n opacity: 0;\n transform: scale(0.7);\n pointer-events: none;\n}\n.timer-float.timer-float--visible {\n opacity: 1;\n transform: scale(1);\n}\n.timer-float.timer-float--warn {\n border-color: var(--color-error-neon, #ff0040);\n color: var(--color-error-neon, #ff0040);\n box-shadow: 0 0 16px rgba(255, 0, 64, 0.6),\n inset 0 0 8px rgba(255, 0, 64, 0.3);\n animation: arc-urgency 0.8s ease-in-out infinite;\n}\n@media (prefers-reduced-motion: reduce) {\n .timer-float { transition: none; }\n .timer-float.timer-float--warn { animation: none; }\n}\n\n.arc-pulse-orb {\n width: 56px; height: 56px; border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n position: relative;\n overflow: hidden;\n background: linear-gradient(135deg, #ff6b9a, #6366f1);\n box-shadow: 0 0 24px rgba(255, 45, 106, 0.5);\n flex-shrink: 0;\n}\n.arc-pulse-orb::before {\n content: '';\n position: absolute; inset: -4px;\n border-radius: 50%;\n border: 2px solid rgba(255, 45, 106, 0.5);\n animation: arc-orb-pulse 1.4s ease-out infinite;\n pointer-events: none;\n}\n.arc-pulse-orb--steady::before { animation: none; opacity: 0; }\n@keyframes arc-orb-pulse {\n 0% { opacity: 0.8; transform: scale(1); }\n 100% { opacity: 0; transform: scale(1.25); }\n}\n@media (prefers-reduced-motion: reduce) {\n .arc-pulse-orb::before { animation: none; opacity: 0; }\n}\n.arc-pulse-orb-img {\n width: 100%; height: 100%;\n object-fit: cover;\n border-radius: 50%;\n z-index: 1;\n /* #850: blur cover during PLAYING so readable text on artwork (album titles,\n years, artist names) can't leak the year-guess answer. Colour/vibe is\n preserved. At REVEAL, the larger #reveal-album-cover (player.html:481) is\n rendered crisp \u2014 that element is unaffected by this rule. */\n filter: blur(12px);\n transform: scale(1.15);\n transition: filter 0.4s ease, transform 0.4s ease;\n}\n\n.arc-round-center {\n text-align: center;\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 11px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--color-text-neon-muted);\n line-height: 1.3;\n overflow: hidden;\n}\n.arc-round-label { display: block; }\n.arc-round-big {\n display: block;\n font-size: 20px;\n color: var(--color-text-white);\n letter-spacing: 0;\n text-transform: none;\n margin-top: 2px;\n}\n.arc-round-sep {\n color: var(--color-text-dim);\n margin: 0 2px;\n font-weight: 500;\n}\n\n.timer-neon {\n width: 72px; height: 72px;\n border-radius: 50%;\n background: var(--color-bg-primary);\n border: 3px solid var(--color-accent-primary);\n box-shadow: var(--glow-primary), inset 0 0 12px rgba(255, 45, 106, 0.3);\n display: flex; align-items: center; justify-content: center;\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 30px;\n color: var(--color-accent-primary);\n text-shadow: 0 0 10px rgba(255, 45, 106, 0.6);\n flex-shrink: 0;\n line-height: 1;\n}\n.timer-neon .timer { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; }\n.timer-neon.timer-neon--warn {\n border-color: var(--color-error-neon);\n color: var(--color-error-neon);\n box-shadow: 0 0 20px rgba(255, 0, 64, 0.6), inset 0 0 12px rgba(255, 0, 64, 0.3);\n animation: arc-urgency 0.8s ease-in-out infinite;\n}\n@keyframes arc-urgency {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.06); }\n}\n/* #1273 AC#3 \u2014 ghost-ring catch-up glow. Briefly applied while the countdown\n eases to the server's authoritative remaining-time (V1 Smooth Correct), so a\n drift correction reads as a deliberate glow pulse in the existing ring\n language rather than a jarring number jump. */\n.timer-neon.timer-neon--catchup {\n animation: timer-catchup-glow 0.4s ease-out;\n}\n@keyframes timer-catchup-glow {\n 0% { box-shadow: var(--glow-primary), inset 0 0 12px rgba(255, 45, 106, 0.3); }\n 45% { box-shadow: 0 0 26px rgba(0, 245, 255, 0.7), inset 0 0 16px rgba(0, 245, 255, 0.35); }\n 100% { box-shadow: var(--glow-primary), inset 0 0 12px rgba(255, 45, 106, 0.3); }\n}\n@media (prefers-reduced-motion: reduce) {\n .timer-neon.timer-neon--warn { animation: none; }\n .timer-neon.timer-neon--catchup { animation: none; }\n}\n\n/* Chip row \u2014 steal / closest-wins / intro / final (conditional) */\n.arc-chip-row {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n padding: 0 var(--space-md);\n margin-bottom: var(--space-md);\n}\n.arc-chip-row.hidden { display: none; }\n.arc-chip {\n display: inline-flex; align-items: center; gap: 5px;\n padding: 4px 10px;\n border-radius: var(--radius-full);\n font-family: var(--font-body);\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.04em;\n}\n.arc-chip--steal {\n color: var(--color-accent-secondary);\n background: rgba(0, 245, 255, 0.08);\n border: 1px solid rgba(0, 245, 255, 0.4);\n}\n.arc-chip--closest-wins {\n color: var(--color-success-neon);\n background: rgba(57, 255, 20, 0.08);\n border: 1px solid rgba(57, 255, 20, 0.4);\n}\n.arc-chip--intro {\n color: var(--color-warning-alt);\n background: rgba(255, 102, 0, 0.12);\n border: 1px solid rgba(255, 102, 0, 0.5);\n}\n.arc-chip--final {\n color: var(--color-accent-primary);\n background: rgba(255, 45, 106, 0.12);\n border: 1px solid rgba(255, 45, 106, 0.5);\n text-transform: uppercase;\n}\n\n/* Year XXL */\n.year-xxl {\n text-align: center;\n font-family: var(--font-display);\n font-weight: 900;\n font-size: clamp(96px, 34vw, 128px);\n line-height: 1;\n letter-spacing: -0.04em;\n background: linear-gradient(180deg, var(--color-text-white) 0%, rgba(0, 245, 255, 0.85) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n text-shadow: 0 0 32px rgba(0, 245, 255, 0.35);\n margin: 4px 0 var(--space-md);\n padding: 0 var(--space-md);\n max-width: 100%;\n}\n.year-xxl--locked {\n background: linear-gradient(180deg, var(--color-success-neon) 0%, rgba(57, 255, 20, 0.7) 100%);\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n text-shadow: 0 0 28px rgba(57, 255, 20, 0.45);\n}\n\n/* Submitted banner */\n.submitted-banner {\n margin: 0 var(--space-md) var(--space-sm);\n padding: 8px 14px;\n background: rgba(57, 255, 20, 0.08);\n border: 1px solid rgba(57, 255, 20, 0.4);\n border-radius: var(--radius-md);\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 14px;\n color: var(--color-success-neon);\n letter-spacing: 0.04em;\n display: flex; align-items: center; justify-content: center; gap: 6px;\n text-align: center;\n}\n.submitted-banner.hidden { display: none; }\n.submitted-banner .check {\n width: 18px; height: 18px; border-radius: 50%;\n background: var(--color-success-neon);\n color: var(--color-bg-primary);\n font-size: 11px; font-weight: 900;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n}\n\n/* Arcade slider */\n.slider-arcade-wrap {\n padding: 0 var(--space-md);\n margin-bottom: var(--space-md);\n position: relative;\n}\n.slider-arcade {\n padding: 10px;\n background: rgba(255, 255, 255, 0.04);\n border-radius: var(--radius-lg);\n border: 1px solid rgba(255, 255, 255, 0.08);\n display: flex; align-items: center; gap: 12px;\n}\n.slider-btn-year {\n width: 44px; height: 44px; border-radius: 50%;\n background: var(--color-bg-primary);\n border: 2px solid rgba(255, 255, 255, 0.15);\n color: var(--color-text-white);\n font-family: var(--font-display);\n font-weight: 700;\n font-size: 22px;\n line-height: 1;\n flex-shrink: 0;\n display: flex; align-items: center; justify-content: center;\n cursor: pointer;\n transition: all var(--transition-fast);\n touch-action: manipulation;\n}\n.slider-btn-year:hover,\n.slider-btn-year:focus-visible {\n border-color: var(--color-accent-secondary);\n color: var(--color-accent-secondary);\n outline: none;\n}\n.slider-btn-year:disabled {\n opacity: 0.4; cursor: not-allowed;\n}\n/* #851 coarse-step variant: smaller +5/-5 buttons next to the main +/-. */\n.slider-btn-year--coarse {\n position: relative;\n width: 36px; height: 36px;\n font-size: 13px;\n font-weight: 800;\n letter-spacing: -0.02em;\n}\n/* #1759: mid-round +/-5 buttons sit next to 44px fine-step siblings under time\n pressure; expand the hit target to 44px (visual stays 36px) so a mis-tap\n doesn't land on the fine button and cost points. */\n.slider-btn-year--coarse::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 44px;\n height: 44px;\n transform: translate(-50%, -50%);\n}\n.slider-arcade { gap: 8px; } /* tighten gap so 5 children fit on narrow screens */\n/* #2344: the track holds the input and the decade scale stacked, so the\n marks line up with the thumb's travel rather than with the box. */\n.slider-arcade-track { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }\n.year-scale {\n position: relative;\n height: 13px;\n /* Reserve the thumb's half-width on both sides: a range thumb's centre\n never reaches the very edge, so a mark at 100% would sit past the\n furthest year the slider can actually select. */\n margin: 0 2px;\n pointer-events: none;\n}\n.year-scale span {\n position: absolute;\n top: 0;\n transform: translateX(-50%);\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.02em;\n color: var(--color-text-muted, rgba(255, 255, 255, 0.42));\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n user-select: none;\n}\n.slider-arcade.slider-arcade--locked .year-scale { opacity: 0.5; }\n.year-slider-arcade {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 10px;\n background: linear-gradient(90deg,\n rgba(0, 245, 255, 0.15),\n rgba(255, 45, 106, 0.25),\n rgba(57, 255, 20, 0.15));\n border-radius: var(--radius-full);\n outline: none;\n cursor: pointer;\n}\n.year-slider-arcade::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 32px; height: 32px;\n border-radius: 50%;\n background: var(--color-accent-primary);\n border: 3px solid var(--color-bg-primary);\n box-shadow: var(--glow-primary);\n cursor: grab;\n transition: transform var(--transition-fast);\n}\n.year-slider-arcade::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }\n.year-slider-arcade::-moz-range-thumb {\n width: 32px; height: 32px;\n border-radius: 50%;\n background: var(--color-accent-primary);\n border: 3px solid var(--color-bg-primary);\n box-shadow: var(--glow-primary);\n cursor: grab;\n}\n\n/* Locked state for the slider (after submit) */\n.slider-arcade.slider-arcade--locked {\n opacity: 0.55;\n pointer-events: none;\n}\n.slider-arcade.slider-arcade--locked .year-slider-arcade::-webkit-slider-thumb {\n background: var(--color-success-neon);\n box-shadow: 0 0 16px rgba(57, 255, 20, 0.6);\n}\n.slider-arcade.slider-arcade--locked .year-slider-arcade::-moz-range-thumb {\n background: var(--color-success-neon);\n box-shadow: 0 0 16px rgba(57, 255, 20, 0.6);\n}\n.guess-lock-stamp {\n position: absolute;\n right: calc(var(--space-md) + 8px);\n top: -10px;\n padding: 3px 10px;\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 10px;\n color: var(--color-success-neon);\n background: var(--color-bg-primary);\n border: 1px solid rgba(57, 255, 20, 0.4);\n border-radius: var(--radius-full);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n box-shadow: 0 0 8px rgba(57, 255, 20, 0.25);\n}\n.guess-lock-stamp.hidden { display: none; }\n\n/* Arcade tiles (artist + movie challenge).\n Wrapped in a subtle card container so the challenge reads as a distinct\n \"quiz card\" element. Outer wrapper has a thin border + soft bg; tiles\n themselves keep their 3D shadow treatment so they still pop. */\n.arc-tiles {\n padding: 12px 14px;\n margin: 0 var(--space-md) var(--space-md);\n background: linear-gradient(180deg, rgba(0, 245, 255, 0.04), rgba(255, 255, 255, 0.02));\n border: 1px solid rgba(0, 245, 255, 0.18);\n border-radius: var(--radius-lg);\n box-shadow: inset 0 0 12px rgba(0, 245, 255, 0.04);\n}\n.arc-tiles.hidden { display: none; }\n.arc-tiles-header {\n display: flex; align-items: center; justify-content: space-between;\n font-family: var(--font-display);\n font-weight: 700;\n font-size: 12px;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--color-text-neon-muted);\n margin-bottom: 10px;\n gap: var(--space-sm);\n}\n.arc-tiles-header > span:first-child {\n display: flex; align-items: center; gap: 6px;\n min-width: 0;\n}\n.arc-tiles-bonus {\n background: rgba(57, 255, 20, 0.15);\n color: var(--color-success-neon);\n font-weight: 900;\n font-size: 11px;\n padding: 2px 8px;\n border-radius: var(--radius-full);\n letter-spacing: 0.04em;\n flex-shrink: 0;\n}\n.arc-tiles-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n}\n/* Re-style the existing .artist-option-btn / .movie-option-btn with arcade feel.\n These classes are generated by player-game.js \u2014 don't change the JS, just\n restyle the DOM they emit. */\n.arc-tiles-grid .artist-option-btn,\n.arc-tiles-grid .movie-option-btn {\n padding: 14px 10px;\n background: rgba(255, 255, 255, 0.05);\n border: 2px solid rgba(255, 255, 255, 0.12);\n border-radius: var(--radius-lg);\n font-family: var(--font-display);\n font-weight: 700;\n font-size: 15px;\n text-align: center;\n color: var(--color-text-white);\n box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);\n transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);\n cursor: pointer;\n min-height: 56px;\n}\n.arc-tiles-grid .artist-option-btn:hover,\n.arc-tiles-grid .movie-option-btn:hover,\n.arc-tiles-grid .artist-option-btn:focus-visible,\n.arc-tiles-grid .movie-option-btn:focus-visible {\n border-color: rgba(0, 245, 255, 0.55);\n outline: none;\n}\n.arc-tiles-grid .artist-option-btn:active,\n.arc-tiles-grid .movie-option-btn:active {\n transform: translateY(1px);\n box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);\n}\n.arc-tiles-grid .artist-option-btn.is-loading {\n background: linear-gradient(135deg, rgba(0, 245, 255, 0.2), rgba(0, 245, 255, 0.05));\n border-color: var(--color-accent-secondary);\n color: var(--color-accent-secondary);\n animation: arc-tile-pulse 1s ease-in-out infinite;\n}\n@keyframes arc-tile-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }\n.arc-tiles-grid .artist-option-btn.is-winner,\n.arc-tiles-grid .artist-option-btn.is-correct,\n.arc-tiles-grid .movie-option-btn.is-winner,\n.arc-tiles-grid .movie-option-btn.is-correct {\n background: linear-gradient(135deg, rgba(57, 255, 20, 0.25), rgba(57, 255, 20, 0.08));\n border-color: var(--color-success-neon);\n color: var(--color-success-neon);\n box-shadow: 0 0 20px rgba(57, 255, 20, 0.5), 0 4px 0 rgba(0, 0, 0, 0.3);\n}\n.arc-tiles-grid .artist-option-btn.is-wrong,\n.arc-tiles-grid .artist-option-btn.is-wrong.is-selected,\n.arc-tiles-grid .movie-option-btn.is-wrong {\n opacity: 0.5;\n border-style: dashed;\n}\n.arc-tiles-grid .artist-option-btn.is-disabled,\n.arc-tiles-grid .movie-option-btn.is-disabled {\n opacity: 0.6;\n cursor: not-allowed;\n box-shadow: none;\n}\n@media (prefers-reduced-motion: reduce) {\n .arc-tiles-grid .artist-option-btn.is-loading { animation: none; }\n}\n\n/* No-bonus filler */\n.bonus-filler {\n padding: var(--space-md);\n margin: 0 var(--space-md) var(--space-md);\n background: rgba(255, 255, 255, 0.02);\n border: 1px dashed rgba(255, 255, 255, 0.1);\n border-radius: var(--radius-lg);\n text-align: center;\n font-family: var(--font-body);\n font-size: 12px;\n color: var(--color-text-dim);\n font-style: italic;\n display: flex; align-items: center; justify-content: center; gap: 6px;\n}\n.bonus-filler.hidden { display: none; }\n\n/* Actions row (bet + submit) */\n.arc-actions {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: 10px;\n padding: 0 var(--space-md);\n margin-bottom: var(--space-md);\n}\n.bet-arc {\n width: 72px; height: 60px;\n background: transparent;\n border: 2px solid rgba(255, 45, 106, 0.5);\n color: var(--color-accent-primary);\n border-radius: var(--radius-lg);\n font-family: var(--font-display);\n font-weight: 700;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 2px;\n box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);\n cursor: pointer;\n transition: all var(--transition-fast);\n}\n.bet-arc .bet-icon { font-size: 22px; line-height: 1; }\n.bet-arc .bet-label { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }\n.bet-arc.is-active {\n background: rgba(255, 45, 106, 0.15);\n box-shadow: var(--glow-primary), 0 4px 0 rgba(0, 0, 0, 0.3);\n}\n.bet-arc:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }\n.bet-arc:disabled { opacity: 0.55; cursor: not-allowed; }\n\n.submit-arc {\n background: linear-gradient(180deg, #ff4d82, var(--color-accent-primary));\n border: 0;\n color: var(--color-text-white);\n border-radius: var(--radius-lg);\n padding: 16px 20px;\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 17px;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n box-shadow: var(--glow-primary), 0 6px 0 rgba(180, 20, 60, 0.6);\n cursor: pointer;\n transition: transform var(--transition-fast);\n display: flex; align-items: center; justify-content: center; gap: 8px;\n}\n.submit-arc:active { transform: translateY(2px); box-shadow: var(--glow-primary), 0 4px 0 rgba(180, 20, 60, 0.6); }\n.submit-arc:disabled {\n background: rgba(255, 255, 255, 0.06);\n color: var(--color-text-neon-muted);\n box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);\n cursor: not-allowed;\n text-shadow: none;\n}\n.submit-arc.submit-arc--waiting {\n background: rgba(255, 255, 255, 0.05);\n color: var(--color-text-neon-muted);\n box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);\n text-shadow: none;\n}\n.submit-arc .waiting-dot {\n display: inline-block;\n width: 8px; height: 8px; border-radius: 50%;\n background: var(--color-accent-secondary);\n box-shadow: 0 0 8px rgba(0, 245, 255, 0.5);\n animation: arc-wait-pulse 1.2s ease-in-out infinite;\n}\n@keyframes arc-wait-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }\n@media (prefers-reduced-motion: reduce) {\n .submit-arc .waiting-dot { animation: none; }\n}\n\n/* Steal full-width button */\n.steal-btn-full {\n margin: 0 var(--space-md) var(--space-md);\n background: rgba(0, 245, 255, 0.08);\n border: 2px solid var(--color-accent-secondary);\n color: var(--color-accent-secondary);\n border-radius: var(--radius-lg);\n padding: 14px;\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 15px;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n box-shadow: 0 0 16px rgba(0, 245, 255, 0.3), 0 4px 0 rgba(0, 0, 0, 0.3);\n display: flex; align-items: center; justify-content: center; gap: 8px;\n cursor: pointer;\n transition: transform var(--transition-fast);\n}\n.steal-btn-full.hidden { display: none; }\n.steal-btn-full:active { transform: translateY(2px); box-shadow: 0 0 16px rgba(0, 245, 255, 0.3), 0 2px 0 rgba(0, 0, 0, 0.3); }\n.steal-btn-full .steal-btn-icon { font-size: 18px; }\n\n/* #1665: Sabotage power-up \u2014 twin of the steal button, red-tinted. The flex row\n keeps a lone button full-width and puts them side-by-side when both are up. */\n.powerup-btn-row {\n display: flex;\n gap: var(--space-md);\n margin: 0 var(--space-md) var(--space-md);\n}\n.powerup-btn-row .steal-btn-full,\n.powerup-btn-row .sabotage-btn-full {\n flex: 1;\n margin: 0;\n}\n.sabotage-btn-full {\n background: rgba(255, 45, 85, 0.08);\n border: 2px solid var(--color-danger, #ff2d55);\n color: var(--color-danger, #ff2d55);\n border-radius: var(--radius-lg);\n padding: 14px;\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 15px;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n box-shadow: 0 0 16px rgba(255, 45, 85, 0.3), 0 4px 0 rgba(0, 0, 0, 0.3);\n display: flex; align-items: center; justify-content: center; gap: 8px;\n cursor: pointer;\n transition: transform var(--transition-fast);\n}\n.sabotage-btn-full.hidden { display: none; }\n.sabotage-btn-full:active { transform: translateY(2px); box-shadow: 0 0 16px rgba(255, 45, 85, 0.3), 0 2px 0 rgba(0, 0, 0, 0.3); }\n.sabotage-btn-full .sabotage-btn-icon { font-size: 18px; }\n/* #1665: sabotage arc-chip + leaderboard badge + toasts + effect locks */\n.arc-chip--sabotage {\n color: var(--color-danger, #ff2d55);\n background: rgba(255, 45, 85, 0.08);\n border: 1px solid rgba(255, 45, 85, 0.4);\n}\n.player-badge--sabotage {\n top: -2px;\n left: 2px;\n background: linear-gradient(135deg, #ff2d55, #c1121f);\n}\n.sabotage-confirmation {\n background: linear-gradient(135deg, #ff2d55, #c1121f);\n box-shadow: 0 4px 20px rgba(255, 45, 85, 0.5);\n}\n.sabotaged-banner {\n background: linear-gradient(135deg, #ff2d55, #7c1020);\n box-shadow: 0 4px 20px rgba(255, 45, 85, 0.6);\n}\n.bet-arc--forced { opacity: 0.85; cursor: not-allowed; }\n.submit-arc--frozen { opacity: 0.6; filter: grayscale(0.4); }\n\n/* Submission strip (dots + count) */\n.arc-submission-strip {\n display: flex; align-items: center; justify-content: center; gap: 8px;\n padding: 8px var(--space-md) 12px;\n font-family: var(--font-body);\n font-size: 11px;\n color: var(--color-text-dim);\n font-weight: 600;\n}\n.arc-submission-dots {\n display: flex; align-items: center; gap: 6px;\n}\n.arc-submission-dots .player-indicator {\n /* existing class from renderSubmissionTracker \u2014 override to a small dot.\n The renderer emits a nested .player-avatar + .player-initials + .player-name\n + badges; we collapse ALL children to make the parent itself the dot. */\n width: 12px; height: 12px;\n min-width: 12px;\n padding: 0;\n background: rgba(255, 255, 255, 0.18);\n border: 0;\n border-radius: 50%;\n font-size: 0;\n color: transparent;\n transition: all var(--transition-normal);\n flex: 0 0 auto;\n overflow: hidden;\n display: block;\n}\n/* Collapse every child element \u2014 avatars, initials, names, badges \u2014 so the\n parent behaves as a solid dot. Without this the legacy .player-avatar\n width/height (~40px) leaks through. */\n.arc-submission-dots .player-indicator > * { display: none !important; }\n.arc-submission-dots .player-indicator.is-submitted {\n background: var(--color-success-neon);\n box-shadow: 0 0 6px rgba(57, 255, 20, 0.5);\n}\n.arc-submission-dots .player-indicator.is-current-player,\n.arc-submission-dots .player-indicator.is-current {\n background: var(--color-accent-secondary);\n box-shadow: 0 0 6px rgba(0, 245, 255, 0.5);\n}\n.arc-submission-dots .player-indicator.is-current-player.is-submitted {\n background: var(--color-success-neon);\n box-shadow: 0 0 8px rgba(57, 255, 20, 0.7);\n}\n.arc-submission-count { color: var(--color-text-dim); font-weight: 600; }\n\n/* Legacy \"Submitted!\" stamp \u2014 hidden in arcade but kept for any residual path */\n.submitted-confirmation.hidden { display: none; }\n\n/* Closest-wins ephemeral splash (rc30 parity) */\n.closest-wins-splash {\n position: fixed; inset: 0;\n z-index: 50;\n display: flex; align-items: center; justify-content: center;\n background: rgba(10, 10, 18, 0.7);\n backdrop-filter: blur(4px);\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 40px;\n color: var(--color-success-neon);\n letter-spacing: 0.08em;\n gap: 12px;\n pointer-events: none;\n text-shadow: 0 0 32px rgba(57, 255, 20, 0.55);\n animation: closest-wins-splash-in 1.6s ease-out both;\n}\n.closest-wins-splash.hidden { display: none; }\n@keyframes closest-wins-splash-in {\n 0% { opacity: 0; transform: scale(0.8); }\n 20% { opacity: 1; transform: scale(1); }\n 80% { opacity: 1; transform: scale(1); }\n 100% { opacity: 0; transform: scale(1.05); }\n}\n\n/* sr-only helper (if not already in the stylesheet) */\n#round-indicator.sr-only {\n position: absolute;\n width: 1px; height: 1px; padding: 0; margin: -1px;\n overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;\n}\n\n/* ============================================\n #1076: Compact game-view layout for mobile.\n On 360-411 CSS-px phones the artist/movie challenge tiles\n and Submit button were rendering below the fold, so every\n round players had to scroll before they could vote. Scoped\n to body:has(#game-view:not(.hidden)) so it only fires while\n game-view is the active screen \u2014 lobby/reveal/end keep the\n original spacing. :has() degrades gracefully: browsers that\n don't support it fall back to the looser pre-fix layout.\n ============================================ */\nbody:has(#game-view:not(.hidden)) .player-header { display: none; }\nbody:has(#game-view:not(.hidden)) .player-container {\n padding-top: max(var(--space-xs), env(safe-area-inset-top));\n}\nbody:has(#game-view:not(.hidden)) .arc-header {\n margin-bottom: var(--space-sm);\n}\nbody:has(#game-view:not(.hidden)) .year-xxl {\n font-size: clamp(72px, 26vw, 104px);\n margin: 2px 0 var(--space-sm);\n}\nbody:has(#game-view:not(.hidden)) .slider-arcade-wrap {\n margin-bottom: var(--space-sm);\n}\nbody:has(#game-view:not(.hidden)) .arc-tiles {\n padding: 10px 12px;\n margin: 0 var(--space-md) var(--space-sm);\n}\nbody:has(#game-view:not(.hidden)) .arc-tiles-header {\n margin-bottom: 6px;\n}\nbody:has(#game-view:not(.hidden)) .arc-tiles-grid { gap: 8px; }\nbody:has(#game-view:not(.hidden)) .arc-tiles-grid .artist-option-btn,\nbody:has(#game-view:not(.hidden)) .arc-tiles-grid .movie-option-btn {\n min-height: 52px;\n padding: 12px 10px;\n}\nbody:has(#game-view:not(.hidden)) .arc-actions {\n margin-bottom: var(--space-sm);\n}\nbody:has(#game-view:not(.hidden)) .bonus-filler {\n padding: var(--space-sm) var(--space-md);\n margin: 0 var(--space-md) var(--space-sm);\n}\n\n/* ============================================\n End-of-Game Podium v2 \u2014 Hero Winner (rc31)\n Scoped under body.theme-dark so player.html end-view\n is restyled from a 3-column stands layout into a\n poster-style hero for #1 + compact chips for #2/#3.\n DOM (player.html #494-522) is unchanged \u2014 existing\n IDs (podium-{N}-name / -score) keep their JS bindings.\n ============================================ */\n\nbody.theme-dark .podium {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-areas:\n \"hero hero\"\n \"second third\";\n gap: var(--space-md);\n align-items: stretch;\n justify-content: stretch;\n margin-bottom: var(--space-xl);\n padding: 0 var(--space-xs);\n}\n\n/* Winner hero \u2014 full-width poster, gradient wordmark name */\nbody.theme-dark .podium-place.podium-1 {\n grid-area: hero;\n width: 100%;\n padding: var(--space-lg) var(--space-md) var(--space-md);\n background: linear-gradient(135deg, rgba(255, 45, 106, 0.14), rgba(0, 245, 255, 0.06));\n border: 1px solid rgba(255, 45, 106, 0.35);\n border-radius: var(--radius-xl);\n box-shadow: 0 0 40px rgba(255, 45, 106, 0.18);\n text-align: center;\n justify-content: center;\n}\n\nbody.theme-dark .podium-place.podium-1 .podium-medal {\n font-size: 38px;\n margin-bottom: var(--space-xs);\n filter: drop-shadow(0 0 16px rgba(255, 45, 106, 0.6));\n}\n\nbody.theme-dark .podium-place.podium-1 .podium-name {\n font-family: 'Outfit', sans-serif;\n font-weight: 900;\n line-height: 0.92;\n letter-spacing: -0.04em;\n margin: 0 0 var(--space-sm);\n max-width: 100%;\n white-space: normal;\n word-break: break-word;\n overflow: visible;\n text-overflow: clip;\n background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n filter: drop-shadow(0 0 24px rgba(255, 45, 106, 0.3));\n font-size: clamp(40px, 14vw, 64px);\n}\n\nbody.theme-dark .podium-place.podium-1 .podium-score {\n font-family: 'Inter', sans-serif;\n font-weight: 700;\n font-size: var(--font-size-3xl);\n color: var(--color-accent-secondary);\n font-variant-numeric: tabular-nums;\n text-shadow: 0 0 14px rgba(0, 245, 255, 0.5);\n margin-bottom: 0;\n}\n\nbody.theme-dark .podium-place.podium-1 .podium-stand {\n display: none;\n}\n\n/* Runners-up chips \u2014 2nd + 3rd share the bottom row */\nbody.theme-dark .podium-place.podium-2,\nbody.theme-dark .podium-place.podium-3 {\n width: 100%;\n min-width: 0;\n padding: var(--space-md) var(--space-sm);\n background: var(--color-dark-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-lg);\n display: grid;\n /* minmax(0, 1fr) lets the name column shrink below its intrinsic width\n so short chip columns can ellipsis gracefully without forcing \"No\u2026\". */\n grid-template-columns: auto minmax(0, 1fr) auto;\n grid-template-rows: auto;\n align-items: center;\n gap: var(--space-sm);\n text-align: left;\n}\n\nbody.theme-dark .podium-place.podium-2 {\n grid-area: second;\n border-color: rgba(0, 245, 255, 0.28);\n box-shadow: 0 0 18px rgba(0, 245, 255, 0.1);\n}\n\nbody.theme-dark .podium-place.podium-3 {\n grid-area: third;\n}\n\nbody.theme-dark .podium-place.podium-2 .podium-medal,\nbody.theme-dark .podium-place.podium-3 .podium-medal {\n font-size: 22px;\n margin: 0;\n line-height: 1;\n}\n\nbody.theme-dark .podium-place.podium-2 .podium-name,\nbody.theme-dark .podium-place.podium-3 .podium-name {\n font-family: 'Outfit', sans-serif;\n font-weight: 800;\n font-size: var(--font-size-lg);\n color: var(--color-text-white);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nbody.theme-dark .podium-place.podium-2 .podium-score,\nbody.theme-dark .podium-place.podium-3 .podium-score {\n font-family: 'Outfit', sans-serif;\n font-weight: 900;\n font-size: var(--font-size-lg);\n color: var(--color-accent-secondary);\n font-variant-numeric: tabular-nums;\n text-shadow: 0 0 8px rgba(0, 245, 255, 0.3);\n margin: 0;\n white-space: nowrap;\n}\n\nbody.theme-dark .podium-place.podium-2 .podium-stand,\nbody.theme-dark .podium-place.podium-3 .podium-stand {\n display: none;\n}\n\n/* Graceful collapse for 1/2-player games (JS toggles .hidden on empty slots).\n If #2 is hidden but #3 isn't, promote #3 to the 'second' slot so it\n doesn't look orphaned on the right. */\nbody.theme-dark .podium-place.podium-2.hidden ~ .podium-place.podium-3:not(.hidden) {\n grid-area: second;\n}\n\n/* \"Your Result\" card \u2014 celebratory pink-leaning treatment, larger rank. */\nbody.theme-dark .your-result {\n background: linear-gradient(135deg, rgba(255, 45, 106, 0.10), rgba(0, 245, 255, 0.04));\n border: 1px solid rgba(255, 45, 106, 0.28);\n box-shadow: 0 0 28px rgba(255, 45, 106, 0.12);\n}\n\nbody.theme-dark .your-result-rank {\n font-family: 'Outfit', sans-serif;\n font-weight: 900;\n font-size: var(--font-size-4xl);\n letter-spacing: -0.03em;\n}\n\nbody.theme-dark .your-result-stats .stat-value {\n font-family: 'Outfit', sans-serif;\n font-weight: 800;\n}\n\n/* =====================================================================\n Playlist Hub (v3.3) \u2014 .plh-* namespace\n Replaces wizard step 3 playlist picker. Mobile-first 390px target.\n All tokens inherited from :root design system.\n ===================================================================== */\n\n.plh-root {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n height: 100%;\n background: var(--color-bg-primary);\n color: var(--color-text-white);\n font-family: var(--font-body);\n font-variant-numeric: tabular-nums;\n position: relative;\n isolation: isolate;\n overflow: hidden;\n}\n\n.plh-root::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: 0;\n pointer-events: none;\n background:\n radial-gradient(ellipse 70% 25% at 50% 0%, rgba(255, 45, 106, 0.12), transparent 60%),\n radial-gradient(ellipse 60% 30% at 30% 60%, rgba(0, 245, 255, 0.06), transparent 60%);\n}\n\n.plh-header {\n position: sticky;\n top: 0;\n z-index: 5;\n background: rgba(10, 10, 18, 0.82);\n backdrop-filter: blur(14px);\n -webkit-backdrop-filter: blur(14px);\n /* #821: tightened from 12px 18px 10px \u2192 8px 14px 6px so the playlist\n cards below get more vertical room above the fold. The header still\n has its blurred backdrop + bottom border for visual separation. */\n padding: 8px 14px 6px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.04);\n}\n\n.plh-titlebar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n /* #821: was 10px \u2014 tightened so chrome compresses and cards get more\n breathing room. */\n margin-bottom: 6px;\n}\n\n.plh-wordmark {\n font-family: var(--font-display);\n font-weight: 900;\n /* #821: was 24px \u2014 small reduction shifts visual focus to the cards\n below without losing branding presence. */\n font-size: 20px;\n letter-spacing: -0.02em;\n line-height: 1;\n background: linear-gradient(90deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.plh-search {\n position: relative;\n margin-bottom: 10px;\n}\n\n.plh-search input {\n width: 100%;\n height: 40px;\n padding: 0 38px 0 40px;\n background: var(--color-bg-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: 10px;\n color: var(--color-text-white);\n font-family: var(--font-body);\n font-weight: 500;\n font-size: 13px;\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.plh-search input:focus {\n border-color: var(--color-accent-secondary);\n box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.15);\n}\n\n.plh-search input::placeholder {\n color: var(--color-text-neon-muted);\n opacity: 0.6;\n}\n\n.plh-search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--color-accent-secondary);\n opacity: 0.75;\n}\n\n.plh-search-clear {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: var(--color-dark-surface-hover);\n border: none;\n color: var(--color-text-neon-muted);\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 13px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.plh-segmented {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 4px;\n padding: 4px;\n background: var(--color-bg-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: 10px;\n margin-bottom: 10px;\n}\n\n.plh-seg {\n background: transparent;\n border: none;\n padding: 8px 4px;\n cursor: pointer;\n border-radius: 7px;\n display: flex;\n flex-direction: column;\n gap: 1px;\n align-items: center;\n line-height: 1.1;\n font-family: var(--font-body);\n font-weight: 700;\n font-size: 12px;\n color: var(--color-text-neon-muted);\n letter-spacing: 0.04em;\n transition: background 0.15s, color 0.15s;\n}\n\n.plh-seg .plh-seg-num {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 15px;\n color: var(--color-text-neon-muted);\n}\n\n.plh-seg .plh-seg-label {\n font-size: 11px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n}\n\n.plh-seg.active {\n background: linear-gradient(135deg, rgba(255, 45, 106, 0.22), rgba(0, 245, 255, 0.14));\n color: var(--color-text-white);\n box-shadow: inset 0 0 0 1px rgba(255, 45, 106, 0.35), 0 0 18px rgba(255, 45, 106, 0.18);\n}\n\n.plh-seg.active .plh-seg-num { color: var(--color-accent-primary); }\n\n.plh-seg-community.active {\n background: linear-gradient(135deg, rgba(157, 78, 221, 0.25), rgba(255, 45, 106, 0.15));\n box-shadow: inset 0 0 0 1px rgba(157, 78, 221, 0.45), 0 0 18px rgba(157, 78, 221, 0.22);\n}\n\n.plh-seg-community.active .plh-seg-num { color: #c89af5; }\n\n.plh-seg-mine.active {\n background: linear-gradient(135deg, rgba(0, 245, 255, 0.18), rgba(255, 45, 106, 0.1));\n box-shadow: inset 0 0 0 1px rgba(0, 245, 255, 0.4), 0 0 18px rgba(0, 245, 255, 0.18);\n}\n\n.plh-seg-mine.active .plh-seg-num { color: var(--color-accent-secondary); }\n\n.plh-chips {\n display: flex;\n gap: 7px;\n overflow-x: auto;\n padding: 0 0 6px;\n scrollbar-width: none;\n}\n\n.plh-chips::-webkit-scrollbar { display: none; }\n\n.plh-chip {\n flex-shrink: 0;\n padding: 7px 13px;\n background: var(--color-bg-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: 999px;\n font-family: var(--font-body);\n font-weight: 600;\n font-size: 12px;\n color: var(--color-text-neon-muted);\n white-space: nowrap;\n cursor: pointer;\n letter-spacing: 0.01em;\n transition: background 0.15s, color 0.15s, border-color 0.15s;\n}\n\n.plh-chip.active {\n background: var(--color-accent-primary);\n color: var(--color-text-white);\n border-color: transparent;\n font-weight: 700;\n box-shadow: 0 0 16px rgba(255, 45, 106, 0.45);\n}\n\n/* #1569 follow-up: the Playlists/Mix tab-panel wrappers must fill the hub's\n remaining height (under the sticky tab strip) so their inner .plh-body can\n scroll. Without this they size to content and overflow .plh-root\n (height:100%; overflow:hidden), clipping everything below the fold. */\n.plh-list-view,\n.plh-mix-view {\n flex: 1 1 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n\n.plh-body {\n position: relative;\n z-index: 1;\n flex: 1;\n overflow-y: auto;\n padding: 14px 0 110px;\n}\n\n.plh-loading {\n padding: 40px 20px;\n text-align: center;\n font-family: var(--font-body);\n font-weight: 500;\n font-size: 13px;\n color: var(--color-text-neon-muted);\n}\n\n/* Section dividers \u2014 group related shelves under a prominent header.\n Currently used by the \"\uD83C\uDF0D By Country\" block in the Community tab so\n the per-language shelves read as one organized section instead of\n a scattered list. */\n.plh-section-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 12px;\n padding: 8px 18px 12px;\n margin: 4px 0 8px;\n border-bottom: 1px solid rgba(0, 245, 255, 0.12);\n}\n\n.plh-section-head-title {\n display: flex;\n align-items: center;\n gap: 10px;\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 22px;\n letter-spacing: -0.02em;\n color: var(--color-text-white);\n line-height: 1;\n}\n\n.plh-section-head-emoji {\n font-size: 22px;\n filter: drop-shadow(0 0 12px rgba(0, 245, 255, 0.3));\n}\n\n.plh-section-head-meta {\n font-family: var(--font-body);\n font-weight: 600;\n font-size: 10px;\n letter-spacing: 0.16em;\n text-transform: uppercase;\n color: var(--color-text-neon-muted);\n flex-shrink: 0;\n}\n\n/* Shelves */\n\n.plh-shelf {\n margin-bottom: 22px;\n}\n\n.plh-shelf-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n padding: 0 18px 10px;\n}\n\n.plh-shelf-title {\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 18px;\n letter-spacing: -0.01em;\n color: var(--color-text-white);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.plh-shelf-see {\n font-family: var(--font-body);\n font-weight: 600;\n font-size: 12px;\n color: var(--color-accent-secondary);\n letter-spacing: 0.02em;\n cursor: pointer;\n background: transparent;\n border: none;\n padding: 0;\n}\n\n.plh-local-dot {\n display: inline-block;\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: var(--color-success-neon);\n box-shadow: 0 0 8px var(--color-success-neon);\n margin-right: 8px;\n vertical-align: middle;\n}\n\n.plh-local-badge {\n font-family: var(--font-body);\n font-weight: 700;\n font-size: 9px;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--color-success-neon);\n padding: 2px 7px;\n background: rgba(57, 255, 20, 0.12);\n border: 1px solid rgba(57, 255, 20, 0.4);\n border-radius: 999px;\n margin-left: 8px;\n vertical-align: middle;\n}\n\n/* Cards (horizontal scroll shelf) */\n\n.plh-cards {\n display: flex;\n gap: 12px;\n overflow-x: auto;\n padding: 0 18px 4px;\n scrollbar-width: none;\n}\n\n.plh-cards::-webkit-scrollbar { display: none; }\n\n.plh-card {\n flex-shrink: 0;\n /* #821: bumped from 136px \u2192 160px (~17% bigger area). Makes the\n playlist cards the visual centerpiece of the hub instead of feeling\n small relative to the surrounding chrome (header, search, stats,\n chips, action bar). Stays under 50% viewport width on the smallest\n phones (e.g. 375px) so two cards still fit side-by-side. */\n width: 160px;\n cursor: pointer;\n position: relative;\n background: transparent;\n border: none;\n padding: 0;\n text-align: left;\n color: inherit;\n font: inherit;\n}\n\n.plh-card .plh-cover {\n /* #821: matched to .plh-card width; keeps the 1:1 aspect ratio. */\n width: 160px;\n height: 160px;\n border-radius: 12px;\n position: relative;\n overflow: hidden;\n box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);\n isolation: isolate;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 10px;\n}\n\n.plh-card .plh-cover::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45) 100%);\n pointer-events: none;\n z-index: 1;\n}\n\n.plh-cover-inner {\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n height: 100%;\n}\n\n.plh-cover-glyph {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 42px;\n line-height: 0.9;\n letter-spacing: -0.04em;\n color: #fff;\n text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* When the glyph falls back to word-initials (e.g. \"GMS\") or a longer\n abbreviation, scale it down so it doesn't crowd the sub-title. */\n.plh-cover-glyph-long { font-size: 26px; letter-spacing: -0.02em; }\n\n.plh-cover-sub {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: 12px;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n color: rgba(255, 255, 255, 0.92);\n margin-top: 4px;\n line-height: 1.15;\n /* Two-line clamp so \"Top 100 Dutch Classics\" fits cleanly instead of\n showing \"Top 100 Dutch Classi\u2026\". */\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n overflow-wrap: break-word;\n word-break: break-word;\n max-width: 100%;\n}\n\n.plh-cover-badge {\n position: absolute;\n top: 8px;\n right: 8px;\n padding: 3px 8px;\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(6px);\n border-radius: 999px;\n font-family: var(--font-body);\n font-weight: 700;\n font-size: 9px;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--color-text-white);\n z-index: 3;\n}\n\n.plh-cover-badge-purple {\n background: rgba(157, 78, 221, 0.5);\n}\n\n.plh-card-meta { padding: 8px 2px 0; }\n\n.plh-card-name {\n font-family: var(--font-body);\n font-weight: 700;\n font-size: 13px;\n line-height: 1.25;\n color: var(--color-text-white);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.plh-card-sub {\n font-family: var(--font-body);\n font-weight: 500;\n font-size: 11px;\n color: var(--color-text-neon-muted);\n margin-top: 2px;\n letter-spacing: 0.02em;\n}\n\n.plh-card-sub b { color: var(--color-accent-secondary); font-weight: 700; }\n\n.plh-card-local {\n font-family: var(--font-body);\n font-weight: 500;\n font-size: 11px;\n color: var(--color-success-neon);\n margin-top: 2px;\n letter-spacing: 0.02em;\n}\n\n.plh-card-local b { color: var(--color-success-neon); font-weight: 800; }\n\n.plh-card-local-when { color: var(--color-text-neon-muted); }\n.plh-card-local-when b { color: var(--color-accent-secondary); }\n\n/* rc3: replaces the faint corner circle (.plh-check) with a labeled pill.\n Unselected = pink \"+ Add\", selected = neon-green \"\u2713 Added\". Sits on the\n top-LEFT so it doesn't collide with cover-badge (which lives top-right on\n featured / community / recently-added cards). */\n.plh-pill {\n position: absolute;\n top: 8px;\n left: 8px;\n z-index: 4;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 5px 10px 5px 8px;\n border-radius: 999px;\n background: rgba(255, 45, 106, 0.92);\n color: var(--color-text-white);\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 10px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n cursor: pointer;\n border: 1px solid rgba(255, 255, 255, 0.12);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 14px rgba(255, 45, 106, 0.35);\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n transition: background 0.15s, color 0.15s, box-shadow 0.15s, filter 0.15s;\n}\n\n.plh-pill:hover { filter: brightness(1.1); }\n\n.plh-pill-label { line-height: 1; }\n\n.plh-card-selected .plh-pill {\n background: var(--color-success-neon);\n color: var(--color-bg-primary);\n border-color: transparent;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 18px rgba(57, 255, 20, 0.55);\n}\n\n.plh-card-selected .plh-cover {\n box-shadow: 0 0 0 3px var(--color-success-neon), 0 10px 24px rgba(0, 0, 0, 0.5);\n}\n\n/* Legacy rc1/rc2 corner circle \u2014 kept as a no-op guard in case any stale\n cached markup survives the CACHE_VERSION bump. New markup uses .plh-pill. */\n.plh-check { display: none; }\n\n/* Featured shelf \u2014 bigger cards + gradient frame */\n\n.plh-featured .plh-card,\n.plh-featured .plh-card .plh-cover { width: 160px; }\n\n.plh-featured .plh-card .plh-cover {\n height: 200px;\n padding: 2px;\n background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 45, 106, 0.25);\n}\n\n.plh-featured .plh-card .plh-cover::after {\n border-radius: 10px;\n margin: 2px;\n inset: 2px;\n}\n\n.plh-featured .plh-cover-inner { padding: 10px; }\n.plh-featured .plh-cover-glyph { font-size: 48px; }\n\n.plh-card-community .plh-cover {\n background: linear-gradient(135deg, #240046 0%, #7209b7 50%, #ff2d6a 100%);\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 28px rgba(157, 78, 221, 0.4);\n}\n\n/* Cover gradient tints */\n.plh-tint-pop { background: linear-gradient(135deg, #ff2d6a 0%, #ff6b9d 60%, #ff8c42 100%); }\n.plh-tint-rock { background: linear-gradient(135deg, #c1121f 0%, #ff4d1c 60%, #ff8c42 100%); }\n.plh-tint-hiphop { background: linear-gradient(135deg, #7209b7 0%, #b5179e 60%, #ff2d6a 100%); }\n.plh-tint-jazz { background: linear-gradient(135deg, #b08968 0%, #e6a855 60%, #ffc94a 100%); }\n.plh-tint-metal { background: linear-gradient(135deg, #1a0000 0%, #6a040f 60%, #c1121f 100%); }\n.plh-tint-eu { background: linear-gradient(135deg, #00b4d8 0%, #0077b6 60%, #03045e 100%); }\n.plh-tint-latin { background: linear-gradient(135deg, #ff6600 0%, #ffb703 60%, #fdd85d 100%); }\n.plh-tint-schlager { background: linear-gradient(135deg, #ff8fab 0%, #ffc2d1 60%, #fae0e4 100%); }\n.plh-tint-schlager .plh-cover-glyph,\n.plh-tint-schlager .plh-cover-sub { color: #2a0a1a; text-shadow: none; }\n.plh-tint-soul { background: linear-gradient(135deg, #6a0572 0%, #ab4287 60%, #fcbf49 100%); }\n.plh-tint-purple { background: linear-gradient(135deg, #240046 0%, #7209b7 50%, #ff2d6a 100%); }\n\n/* Community request banner */\n\n.plh-banner {\n margin: 0 18px 18px;\n padding: 14px 16px;\n border-radius: 14px;\n background: linear-gradient(135deg, rgba(157, 78, 221, 0.18), rgba(255, 45, 106, 0.1));\n border: 1px solid rgba(157, 78, 221, 0.35);\n display: flex;\n align-items: center;\n gap: 12px;\n cursor: pointer;\n}\n\n.plh-banner-icon {\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: linear-gradient(135deg, #7209b7, var(--color-accent-primary));\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n flex-shrink: 0;\n box-shadow: 0 0 14px rgba(157, 78, 221, 0.5);\n}\n\n.plh-banner-body { flex: 1; min-width: 0; }\n\n.plh-banner-title {\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 14px;\n color: var(--color-text-white);\n line-height: 1.2;\n}\n\n.plh-banner-sub {\n font-family: var(--font-body);\n font-weight: 500;\n font-size: 11px;\n color: var(--color-text-neon-muted);\n margin-top: 2px;\n line-height: 1.35;\n}\n\n.plh-banner-arrow {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 22px;\n color: #c89af5;\n}\n\n/* Mine empty + populated */\n\n.plh-mine-empty { padding: 30px 24px; text-align: center; }\n\n.plh-empty-emoji { font-size: 64px; margin-bottom: 12px; filter: drop-shadow(0 0 24px rgba(0, 245, 255, 0.3)); }\n\n.plh-mine-title {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 26px;\n color: var(--color-text-white);\n margin: 0 0 8px;\n letter-spacing: -0.01em;\n line-height: 1.1;\n}\n\n.plh-mine-body {\n font-family: var(--font-body);\n font-weight: 500;\n font-size: 14px;\n color: var(--color-text-neon-muted);\n margin: 0 0 20px;\n line-height: 1.5;\n}\n\n.plh-mine-body b { color: var(--color-text-white); font-weight: 700; }\n\n.plh-request-cta {\n margin: 0 0 16px;\n padding: 20px;\n background: linear-gradient(135deg, rgba(0, 245, 255, 0.1), rgba(255, 45, 106, 0.06));\n border: 1px solid rgba(0, 245, 255, 0.35);\n border-radius: 16px;\n text-align: left;\n}\n\n.plh-request-head {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 14px;\n}\n\n.plh-request-icon {\n width: 44px;\n height: 44px;\n border-radius: 12px;\n background: linear-gradient(135deg, var(--color-accent-secondary), #0077b6);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color-bg-primary);\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 22px;\n box-shadow: 0 0 16px rgba(0, 245, 255, 0.5);\n}\n\n.plh-request-titles { flex: 1; min-width: 0; }\n\n.plh-request-t1 {\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 16px;\n color: var(--color-text-white);\n line-height: 1.2;\n}\n\n.plh-request-t2 {\n font-family: var(--font-body);\n font-weight: 500;\n font-size: 12px;\n color: var(--color-text-neon-muted);\n margin-top: 2px;\n line-height: 1.35;\n}\n\n.plh-meanwhile {\n margin: 12px 0 0;\n padding: 14px 16px;\n background: var(--color-bg-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: 12px;\n display: flex;\n align-items: center;\n gap: 12px;\n cursor: pointer;\n text-align: left;\n}\n\n.plh-meanwhile-icon {\n color: var(--color-accent-secondary);\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.plh-meanwhile-body { flex: 1; min-width: 0; }\n\n.plh-meanwhile-t1 {\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 13px;\n color: var(--color-text-white);\n line-height: 1.2;\n}\n\n.plh-meanwhile-t2 {\n font-family: var(--font-body);\n font-weight: 500;\n font-size: 11px;\n color: var(--color-text-neon-muted);\n margin-top: 2px;\n line-height: 1.35;\n}\n\n.plh-meanwhile-arrow {\n color: var(--color-text-neon-muted);\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 20px;\n}\n\n.plh-mine-head { padding: 14px 18px 6px; display: flex; align-items: baseline; justify-content: space-between; }\n\n.plh-mine-count {\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 13px;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--color-text-neon-muted);\n}\n\n.plh-mine-count b { color: var(--color-text-white); font-weight: 900; }\n\n.plh-new-request {\n margin: 10px 18px 18px;\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px;\n background: linear-gradient(90deg, rgba(0, 245, 255, 0.1), rgba(255, 45, 106, 0.08));\n border: 1px dashed rgba(0, 245, 255, 0.4);\n border-radius: 12px;\n cursor: pointer;\n}\n\n.plh-new-plus {\n width: 36px;\n height: 36px;\n border-radius: 10px;\n background: var(--color-accent-secondary);\n color: var(--color-bg-primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 20px;\n box-shadow: 0 0 16px var(--color-accent-secondary);\n flex-shrink: 0;\n}\n\n.plh-new-t1 {\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 14px;\n color: var(--color-text-white);\n line-height: 1.2;\n}\n\n.plh-new-t2 {\n font-family: var(--font-body);\n font-weight: 500;\n font-size: 11px;\n color: var(--color-text-neon-muted);\n margin-top: 2px;\n}\n\n.plh-req-list {\n padding: 0 18px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.plh-req-card {\n padding: 14px 14px 14px 16px;\n background: var(--color-bg-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: 14px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.plh-req-card.plh-req-done { border-color: rgba(57, 255, 20, 0.35); background: linear-gradient(90deg, rgba(57, 255, 20, 0.06), transparent 75%); }\n.plh-req-card.plh-req-building { border-color: rgba(0, 245, 255, 0.4); background: linear-gradient(90deg, rgba(0, 245, 255, 0.06), transparent 75%); }\n.plh-req-card.plh-req-declined { border-color: rgba(255, 45, 106, 0.35); }\n\n.plh-req-row1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }\n\n.plh-req-body { min-width: 0; flex: 1; }\n\n.plh-req-name {\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 15px;\n color: var(--color-text-white);\n line-height: 1.2;\n letter-spacing: -0.01em;\n}\n\n.plh-req-desc {\n font-family: var(--font-body);\n font-weight: 500;\n font-size: 11.5px;\n color: var(--color-text-neon-muted);\n margin-top: 3px;\n line-height: 1.45;\n word-break: break-all;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.plh-req-meta {\n font-family: var(--font-body);\n font-weight: 600;\n font-size: 10px;\n color: var(--color-text-light);\n letter-spacing: 0.06em;\n text-transform: uppercase;\n margin-top: 4px;\n}\n\n.plh-req-meta b { color: var(--color-text-neon-muted); font-weight: 700; }\n\n.plh-req-link {\n color: var(--color-accent-secondary);\n font-weight: 700;\n text-transform: none;\n letter-spacing: 0.02em;\n text-decoration: none;\n}\n\n.plh-status-badge {\n flex-shrink: 0;\n padding: 4px 10px;\n border-radius: 999px;\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 10px;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n gap: 5px;\n}\n\n.plh-sb-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }\n\n.plh-status-badge.pending { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.45); color: var(--color-warning); }\n.plh-status-badge.building { background: rgba(0, 245, 255, 0.12); border: 1px solid rgba(0, 245, 255, 0.45); color: var(--color-accent-secondary); }\n.plh-status-badge.done { background: rgba(57, 255, 20, 0.12); border: 1px solid rgba(57, 255, 20, 0.4); color: var(--color-success-neon); }\n.plh-status-badge.declined { background: rgba(255, 45, 106, 0.12); border: 1px solid rgba(255, 45, 106, 0.4); color: #ff7ca7; }\n\n.plh-progress { display: flex; gap: 3px; align-items: center; }\n\n.plh-seg-pill {\n flex: 1;\n height: 3px;\n border-radius: 2px;\n background: var(--color-border-neon);\n}\n\n.plh-seg-pill.filled-pending { background: var(--color-warning); box-shadow: 0 0 6px var(--color-warning); }\n.plh-seg-pill.filled-building { background: var(--color-accent-secondary); box-shadow: 0 0 6px var(--color-accent-secondary); }\n.plh-seg-pill.filled-done { background: var(--color-success-neon); box-shadow: 0 0 6px var(--color-success-neon); }\n.plh-seg-pill.filled-declined { background: var(--color-accent-primary); box-shadow: 0 0 6px var(--color-accent-primary); }\n\n.plh-steps-row {\n display: flex;\n justify-content: space-between;\n font-family: var(--font-body);\n font-weight: 600;\n font-size: 9px;\n color: var(--color-text-light);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n margin-top: -4px;\n}\n\n.plh-steps-row span.active { color: var(--color-text-white); font-weight: 800; }\n\n/* Empty state layout */\n\n.plh-empty {\n padding: 30px 28px;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n}\n\n.plh-empty-icon {\n width: 96px;\n height: 96px;\n border-radius: 26px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--color-bg-surface);\n border: 1px solid var(--color-border-neon);\n font-size: 42px;\n position: relative;\n}\n\n.plh-empty-icon-search { background: radial-gradient(circle, rgba(0, 245, 255, 0.12), var(--color-bg-surface) 60%); }\n\n.plh-empty-title {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 24px;\n color: var(--color-text-white);\n margin: 0;\n letter-spacing: -0.01em;\n line-height: 1.15;\n}\n\n.plh-empty-body {\n font-family: var(--font-body);\n font-weight: 500;\n font-size: 13px;\n color: var(--color-text-neon-muted);\n margin: 0;\n line-height: 1.55;\n max-width: 280px;\n}\n\n.plh-cyan { color: var(--color-accent-secondary); }\n\n.plh-action-stack {\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 100%;\n max-width: 280px;\n margin-top: 12px;\n}\n\n/* Buttons */\n\n.plh-btn {\n padding: 13px 16px;\n border-radius: 12px;\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 13px;\n letter-spacing: 0.04em;\n border: 1px solid var(--color-border-neon);\n background: var(--color-bg-surface);\n color: var(--color-text-white);\n cursor: pointer;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n text-transform: uppercase;\n transition: all 0.15s;\n font-family: var(--font-display);\n}\n\n.plh-btn:hover { border-color: var(--color-accent-secondary); }\n\n.plh-btn-primary {\n background: linear-gradient(90deg, var(--color-accent-primary), #ff5fa4);\n border-color: transparent;\n color: var(--color-text-white);\n box-shadow: 0 0 24px rgba(255, 45, 106, 0.45);\n}\n\n.plh-btn-primary:hover { border-color: transparent; filter: brightness(1.1); }\n\n.plh-btn-cyan {\n background: linear-gradient(90deg, var(--color-accent-secondary), #0077b6);\n color: var(--color-bg-primary);\n border-color: transparent;\n box-shadow: 0 0 22px rgba(0, 245, 255, 0.45);\n}\n\n.plh-btn-cyan:hover { border-color: transparent; filter: brightness(1.1); }\n\n.plh-btn-neon {\n background: linear-gradient(90deg, var(--color-success-neon), #7bf1ff);\n color: var(--color-bg-primary);\n border-color: transparent;\n box-shadow: 0 0 24px rgba(57, 255, 20, 0.5);\n}\n\n.plh-btn-ghost {\n background: transparent;\n color: var(--color-text-neon-muted);\n}\n\n/* Detail sheet (bottom-sheet modal) */\n\n.plh-sheet-host {\n position: fixed;\n inset: 0;\n z-index: 50;\n pointer-events: none;\n display: none;\n}\n\n.plh-sheet-host.open {\n display: block;\n pointer-events: auto;\n}\n\n.plh-scrim {\n position: absolute;\n inset: 0;\n background: rgba(5, 5, 10, 0.72);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n}\n\n.plh-sheet {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(180deg, #14141e 0%, var(--color-bg-primary) 100%);\n border-top-left-radius: 28px;\n border-top-right-radius: 28px;\n box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6);\n max-height: 80vh;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border-top: 1px solid rgba(255, 45, 106, 0.25);\n animation: plh-sheet-in 0.25s ease-out;\n}\n\n.plh-sheet-community { border-top-color: rgba(157, 78, 221, 0.4); }\n\n.plh-sheet::before {\n content: '';\n position: absolute;\n top: 10px;\n left: 50%;\n transform: translateX(-50%);\n width: 48px;\n height: 4px;\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.2);\n}\n\n@keyframes plh-sheet-in {\n from { transform: translateY(100%); }\n to { transform: translateY(0); }\n}\n\n.plh-sheet-close {\n position: absolute;\n top: 18px;\n right: 18px;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--color-bg-surface);\n border: 1px solid var(--color-border-neon);\n color: var(--color-text-neon-muted);\n cursor: pointer;\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 16px;\n line-height: 1;\n z-index: 5;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.plh-sheet-head { padding: 28px 20px 0; display: flex; gap: 14px; align-items: flex-start; flex-shrink: 0; }\n\n.plh-sheet-cover {\n width: 100px;\n height: 100px;\n border-radius: 14px;\n position: relative;\n overflow: hidden;\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 10px;\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);\n}\n\n.plh-sheet-cover-glyph {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 36px;\n line-height: 0.9;\n letter-spacing: -0.04em;\n color: #fff;\n text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n}\n\n.plh-sheet-cover-sub {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: 11px;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: rgba(255, 255, 255, 0.9);\n margin-top: 2px;\n}\n\n.plh-sheet-info { flex: 1; min-width: 0; }\n\n.plh-sheet-title {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 22px;\n line-height: 1.1;\n letter-spacing: -0.02em;\n color: var(--color-text-white);\n margin: 0;\n}\n\n.plh-sheet-author {\n font-family: var(--font-body);\n font-weight: 500;\n font-size: 12px;\n color: var(--color-text-neon-muted);\n margin-top: 4px;\n}\n\n.plh-sheet-author b { color: var(--color-accent-secondary); font-weight: 700; }\n\n.plh-sheet-stats {\n display: flex;\n gap: 0;\n padding: 18px 20px 16px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n margin-top: 18px;\n flex-shrink: 0;\n}\n\n.plh-stat { flex: 1; text-align: center; position: relative; }\n\n.plh-stat + .plh-stat::before {\n content: '';\n position: absolute;\n left: 0;\n top: 6px;\n bottom: 6px;\n width: 1px;\n background: var(--color-border-neon);\n}\n\n.plh-stat-val {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 22px;\n color: var(--color-text-white);\n letter-spacing: -0.02em;\n line-height: 1;\n}\n\n.plh-stat-val-cyan { color: var(--color-accent-secondary); }\n.plh-stat-val-pink { color: var(--color-accent-primary); }\n\n.plh-stat-lbl {\n font-family: var(--font-body);\n font-weight: 700;\n font-size: 9px;\n letter-spacing: 0.16em;\n text-transform: uppercase;\n color: var(--color-text-light);\n margin-top: 4px;\n}\n\n.plh-sheet-scroll {\n flex: 1;\n overflow-y: auto;\n padding: 16px 20px 20px;\n}\n\n.plh-sheet-sec-title {\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 12px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--color-text-neon-muted);\n margin: 0 0 10px;\n}\n\n.plh-sheet-desc {\n font-family: var(--font-body);\n font-weight: 500;\n font-size: 13px;\n color: var(--color-text-neon-muted);\n line-height: 1.55;\n margin-bottom: 16px;\n padding: 14px;\n background: var(--color-bg-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: 12px;\n}\n\n.plh-sheet-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }\n\n.plh-sheet-tag {\n padding: 5px 10px;\n background: var(--color-bg-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: 6px;\n font-family: var(--font-body);\n font-weight: 600;\n font-size: 11px;\n color: var(--color-text-white);\n letter-spacing: 0.02em;\n}\n\n.plh-sheet-providers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }\n\n.plh-sheet-provider {\n padding: 6px 10px;\n background: var(--color-bg-surface);\n border: 1px solid var(--color-border-neon);\n border-radius: 8px;\n font-family: var(--font-body);\n font-weight: 600;\n font-size: 11px;\n color: var(--color-text-neon-muted);\n}\n\n.plh-sheet-provider b { color: var(--color-accent-secondary); font-weight: 800; }\n\n.plh-sheet-foot {\n padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)) 20px;\n background: rgba(10, 10, 18, 0.95);\n border-top: 1px solid var(--color-border-neon);\n display: flex;\n gap: 10px;\n align-items: center;\n flex-shrink: 0;\n}\n\n.plh-sheet-foot .plh-btn { flex: 1; }\n\n/* Bottom CTA bar */\n\n/* #1625: the Mix tab reuses the sticky CTA bar (Back + \"Weiter \u2192\") so the setup\n wizard can advance from a built mix. It renders empty outside the wizard\n (no onContinue) \u2014 collapse it so no bare floating bar shows. */\n.plh-mix-cta:empty {\n display: none;\n}\n\n.plh-cta-bar {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 12px;\n display: flex;\n gap: 8px;\n padding: 10px;\n background: rgba(10, 10, 18, 0.88);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border: 1px solid var(--color-border-neon);\n border-radius: 16px;\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);\n align-items: center;\n z-index: 10;\n}\n\n/* Request-a-playlist FAB inside the CTA bar. rc1/rc2 used a\n near-transparent fill which made the envelope icon invisible against\n the dark sticky bar. rc3: solid cyan button with a dark icon so the\n affordance reads at a glance. */\n.plh-cta-fab {\n width: 44px;\n height: 44px;\n border-radius: 12px;\n background: linear-gradient(135deg, var(--color-accent-secondary) 0%, #0ea5c4 100%);\n border: none;\n color: var(--color-bg-primary);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow: 0 0 18px rgba(0, 245, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);\n flex-shrink: 0;\n transition: filter 0.15s;\n}\n\n.plh-cta-fab:hover { filter: brightness(1.1); }\n\n/* #1054: pin the FAB SVG stroke to a literal hex white. The earlier\n rc3 fix used var(--color-bg-primary), but some Safari/Webkit versions\n also fail to resolve CSS variables into the SVG `stroke` property,\n not just into inherited `currentColor`. A literal hex value bypasses\n the variable resolver entirely; white on cyan gives max contrast. */\n.plh-cta-fab svg {\n stroke: #ffffff;\n fill: none;\n}\n\n.plh-cta-back {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 0 12px;\n height: 44px;\n border-radius: 12px;\n background: var(--color-bg-surface);\n border: 1px solid var(--color-border-neon);\n color: var(--color-text-white);\n font-family: var(--font-display);\n font-weight: 700;\n font-size: 13px;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n cursor: pointer;\n transition: border-color 0.15s, background 0.15s;\n}\n\n.plh-cta-back:hover { border-color: var(--color-accent-secondary); }\n.plh-cta-back svg { opacity: 0.85; }\n\n.plh-cta-count {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 14px;\n color: var(--color-success-neon);\n padding: 0 8px;\n letter-spacing: 0.04em;\n text-shadow: 0 0 10px rgba(57, 255, 20, 0.5);\n}\n\n.plh-cta-start {\n flex: 1;\n background: linear-gradient(90deg, var(--color-accent-primary), #ff5fa4);\n border: none;\n border-radius: 12px;\n padding: 12px;\n font-family: var(--font-display);\n font-weight: 700;\n font-size: 14px;\n color: var(--color-text-white);\n cursor: pointer;\n letter-spacing: 0.02em;\n box-shadow: 0 0 24px rgba(255, 45, 106, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n/* Legacy count pill \u2014 v3.3.0-rc1 rendered it next to the Continue label.\n rc2 drops it (count already shown in the green pill on the left).\n Kept as a no-op class guard in case any stale cached markup shows up. */\n.plh-cta-start-count { display: none; }\n\n.plh-cta-start-label { font-family: var(--font-display); font-weight: 700; }\n.plh-cta-start-arrow { opacity: 0.9; flex-shrink: 0; }\n.plh-cta-count-empty { opacity: 0.5; }\n\n.plh-cta-count-btn {\n background: transparent;\n border: 1px solid rgba(57, 255, 20, 0.35);\n border-radius: 999px;\n cursor: pointer;\n transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;\n}\n.plh-cta-count-btn:hover,\n.plh-cta-count-btn:focus-visible {\n background: rgba(57, 255, 20, 0.12);\n border-color: rgba(57, 255, 20, 0.6);\n outline: none;\n}\n.plh-cta-count-btn:active { transform: scale(0.96); }\n\n.plh-cta-start-disabled {\n opacity: 0.5;\n cursor: not-allowed;\n box-shadow: none;\n}\n\n/* Selected-playlists sheet (issue #1074) */\n.plh-sheet-selected { border-top-color: rgba(57, 255, 20, 0.35); }\n.plh-selected-head {\n padding: 28px 20px 12px;\n flex-shrink: 0;\n}\n.plh-selected-title {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 20px;\n color: var(--color-text-white);\n margin: 0 0 4px;\n letter-spacing: 0.01em;\n}\n.plh-selected-subtitle {\n font-size: 13px;\n color: var(--color-text-neon-muted);\n letter-spacing: 0.01em;\n}\n.plh-selected-scroll {\n overflow-y: auto;\n padding: 4px 16px 24px;\n flex: 1;\n min-height: 0;\n}\n.plh-selected-row {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 8px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n}\n.plh-selected-row:last-child { border-bottom: none; }\n.plh-selected-thumb {\n width: 44px;\n height: 44px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: rgba(255, 255, 255, 0.06);\n}\n.plh-selected-glyph { font-size: 20px; }\n.plh-selected-meta {\n flex: 1;\n min-width: 0;\n}\n.plh-selected-name {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: 14px;\n color: var(--color-text-white);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.plh-selected-sub {\n font-size: 12px;\n color: var(--color-text-neon-muted);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n margin-top: 2px;\n}\n.plh-selected-sub b { color: var(--color-text-white); font-weight: 700; }\n.plh-selected-remove {\n height: 32px;\n padding: 0 12px;\n border-radius: 16px;\n background: var(--color-bg-surface);\n border: 1px solid rgba(255, 45, 106, 0.35);\n color: #ff5fa4;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n flex-shrink: 0;\n font-family: var(--font-display);\n font-weight: 700;\n font-size: 12px;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;\n}\n.plh-selected-remove:hover,\n.plh-selected-remove:focus-visible {\n background: rgba(255, 45, 106, 0.18);\n border-color: rgba(255, 45, 106, 0.65);\n color: #ff7ab3;\n outline: none;\n}\n.plh-selected-remove:active { transform: scale(0.94); }\n.plh-selected-remove-label { line-height: 1; }\n.plh-selected-empty {\n text-align: center;\n padding: 36px 20px;\n color: var(--color-text-neon-muted);\n}\n.plh-selected-empty-icon { font-size: 36px; margin-bottom: 8px; }\n.plh-selected-empty-title {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: 14px;\n}\n\n/* Wider viewport: widen cards a touch, keep layout stable */\n\n@media (min-width: 720px) {\n .plh-cards { padding: 0 24px 4px; }\n .plh-header { padding: 16px 24px 12px; }\n .plh-shelf-head { padding: 0 24px 10px; }\n .plh-banner, .plh-new-request { margin-left: 24px; margin-right: 24px; }\n .plh-req-list { padding: 0 24px; }\n .plh-mine-head { padding: 14px 24px 6px; }\n}\n\n/* ------------------------------------------------------------------\n * Playlist Generator (#1052) \u2014 modal that bridges Spotify URL \u2192 LLM\n * prompt \u2192 validated bundled-format JSON. Lives under .plg-* namespace.\n * Built to match the dark playlist-hub look + admin tokens.\n * ------------------------------------------------------------------ */\n.plg-host {\n position: fixed;\n inset: 0;\n z-index: 9000;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n overflow: hidden;\n}\n.plg-scrim {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.72);\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n}\n.plg-modal {\n position: relative;\n z-index: 1;\n margin: 32px 16px;\n max-width: 880px;\n width: 100%;\n background: #0f1116;\n color: #f1f3f7;\n border-radius: 16px;\n border: 1px solid rgba(255, 255, 255, 0.08);\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);\n padding: 24px 24px 20px;\n max-height: calc(100vh - 64px);\n overflow-y: auto;\n font-family: var(--font-body, system-ui);\n}\n.plg-close {\n position: absolute;\n top: 12px;\n right: 12px;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.06);\n color: #f1f3f7;\n border: 0;\n font-size: 16px;\n cursor: pointer;\n}\n.plg-close:hover { background: rgba(255, 255, 255, 0.12); }\n.plg-title {\n margin: 0 0 4px;\n font-size: 20px;\n font-family: var(--font-display, system-ui);\n font-weight: 700;\n letter-spacing: 0.02em;\n}\n.plg-sub {\n margin: 0 0 18px;\n color: #d8dce5;\n font-size: 15px;\n line-height: 1.55;\n}\n/* Inline step-by-step guide accordion (#1286) */\n.plg-guide {\n margin: 0 0 18px;\n background: #14171f;\n border: 1px solid rgba(255, 255, 255, 0.08);\n border-radius: 12px;\n overflow: hidden;\n}\n.plg-guide-toggle {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n box-sizing: border-box;\n padding: 12px 14px;\n background: transparent;\n border: 0;\n color: #f1f3f7;\n font: inherit;\n font-size: 14px;\n font-weight: 700;\n letter-spacing: 0.01em;\n cursor: pointer;\n text-align: left;\n}\n.plg-guide-toggle:hover { background: rgba(255, 255, 255, 0.03); }\n.plg-guide-chevron { color: #8a92a3; font-size: 13px; margin-left: 12px; }\n.plg-guide-body {\n padding: 4px 14px 14px;\n border-top: 1px solid rgba(255, 255, 255, 0.06);\n}\n.plg-guide-steps {\n list-style: none;\n margin: 12px 0 14px;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.plg-guide-step {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n}\n.plg-guide-num {\n flex: 0 0 auto;\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: linear-gradient(180deg, #ff3a8c, #cf2e72);\n color: #fff;\n font-size: 12px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 1px;\n}\n.plg-guide-text {\n color: #d8dce5;\n font-size: 13.5px;\n line-height: 1.5;\n}\n.plg-guide-text b { color: #f1f3f7; }\n.plg-guide-warn {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n background: rgba(255, 184, 0, 0.08);\n border: 1px solid rgba(255, 184, 0, 0.35);\n border-radius: 10px;\n padding: 10px 12px;\n}\n.plg-guide-warn-icon { flex: 0 0 auto; font-size: 14px; line-height: 1.5; }\n.plg-guide-warn-text {\n color: #f0d9a8;\n font-size: 12.5px;\n line-height: 1.55;\n}\n.plg-guide-warn-text b { color: #ffd66b; }\n.plg-label {\n display: block;\n margin: 14px 0 6px;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: #8a92a3;\n}\n.plg-input,\n.plg-textarea {\n width: 100%;\n box-sizing: border-box;\n background: #181b24;\n color: #f1f3f7;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 10px;\n padding: 10px 12px;\n font: inherit;\n font-size: 14px;\n outline: none;\n}\n.plg-input:focus,\n.plg-textarea:focus { border-color: #5cc8ff; }\n.plg-textarea {\n min-height: 200px;\n font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);\n font-size: 12.5px;\n line-height: 1.45;\n resize: vertical;\n}\n.plg-row {\n display: flex;\n gap: 10px;\n align-items: center;\n margin: 8px 0 0;\n flex-wrap: wrap;\n}\n.plg-hint {\n color: #8a92a3;\n font-size: 12px;\n}\n.plg-btn {\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n border-radius: 999px;\n padding: 9px 16px;\n font: inherit;\n font-size: 13px;\n font-weight: 600;\n border: 0;\n background: rgba(255, 255, 255, 0.08);\n color: #f1f3f7;\n}\n.plg-btn:disabled { cursor: not-allowed; opacity: 0.45; }\n.plg-btn-primary { background: linear-gradient(180deg, #ff3a8c, #cf2e72); color: #fff; }\n.plg-btn-secondary { background: rgba(255, 255, 255, 0.1); }\n.plg-btn-ghost { background: transparent; color: #aab0bd; }\n.plg-btn-success { background: linear-gradient(180deg, #2dd66f, #20b659); color: #04140a; }\n.plg-btn-disabled { background: rgba(255, 255, 255, 0.04); color: #5a606e; }\n.plg-actions {\n display: flex;\n gap: 10px;\n margin: 16px 0 0;\n flex-wrap: wrap;\n}\n.plg-results {\n margin-top: 16px;\n}\n.plg-verdict {\n padding: 10px 12px;\n border-radius: 10px;\n margin: 6px 0 12px;\n font-weight: 700;\n font-size: 13px;\n}\n.plg-verdict-ok { background: rgba(45, 214, 111, 0.16); color: #2dd66f; border: 1px solid rgba(45, 214, 111, 0.4); }\n.plg-verdict-bad { background: rgba(255, 80, 80, 0.14); color: #ff8a8a; border: 1px solid rgba(255, 80, 80, 0.4); }\n.plg-block {\n background: #14171f;\n border: 1px solid rgba(255, 255, 255, 0.06);\n border-radius: 10px;\n padding: 10px 12px;\n margin: 8px 0;\n}\n.plg-block h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #aab0bd; }\n.plg-block ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }\n.plg-block-err { border-color: rgba(255, 80, 80, 0.4); }\n.plg-table-wrap { overflow-x: auto; }\n.plg-table { width: 100%; border-collapse: collapse; font-size: 11px; }\n.plg-table th, .plg-table td { padding: 4px 6px; text-align: center; }\n.plg-table th { color: #8a92a3; font-weight: 600; letter-spacing: 0.04em; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }\n.plg-row-idx { color: #aab0bd; text-align: left; font-weight: 700; }\n.plg-cell-ok { color: #2dd66f; }\n.plg-cell-bad { color: #ff8a8a; background: rgba(255, 80, 80, 0.06); }\n.plg-row-bad { background: rgba(255, 80, 80, 0.04); }\n.plg-row-details td { text-align: left; padding-left: 24px; }\n.plg-err-list { color: #ff8a8a; }\n.plg-warn-list { color: #ffd66b; }\n.plg-song-issue { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); }\n.plg-song-issue:first-of-type { border-top: 0; padding-top: 4px; }\n.plg-song-issue-head { font-weight: 700; font-size: 12px; margin: 0 0 4px; color: #f1f3f7; letter-spacing: 0.02em; }\n.plg-song-issue ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }\n.plg-err-item { color: #ff8a8a; }\n.plg-warn-item { color: #ffd66b; }\n.plg-results-actions { margin-top: 0 !important; margin-bottom: 6px; }\n.plg-hint-inline { font-style: italic; }\n.plg-error {\n background: rgba(255, 80, 80, 0.12);\n border: 1px solid rgba(255, 80, 80, 0.4);\n color: #ff8a8a;\n border-radius: 10px;\n padding: 12px;\n font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);\n font-size: 12px;\n}\n.plg-footer {\n margin-top: 16px;\n border-top: 1px solid rgba(255, 255, 255, 0.06);\n padding-top: 10px;\n color: #8a92a3;\n font-size: 12px;\n line-height: 1.5;\n}\n.plg-followup:empty { display: none; }\n.plg-banner {\n margin-top: 12px;\n padding: 10px 12px;\n border-radius: 10px;\n font-size: 13px;\n line-height: 1.5;\n}\n.plg-banner p { margin: 0 0 8px; }\n.plg-banner .plg-row { margin-top: 4px; flex-wrap: wrap; }\n.plg-banner-ok {\n background: rgba(45, 214, 111, 0.14);\n border: 1px solid rgba(45, 214, 111, 0.4);\n color: #c8f3d8;\n}\n.plg-banner-info {\n background: rgba(99, 102, 241, 0.14);\n border: 1px solid rgba(99, 102, 241, 0.4);\n color: #d6d8ff;\n}\n\n/* ============================================\n Title & Artist reveal (#1180)\n ============================================ */\n/* Crowd Court layout (#1180): truth + own result collapse into a compact\n header so the community voting below becomes the hero of the screen. */\n.ta-reveal-truth {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n justify-content: center;\n gap: 8px;\n font-family: var(--font-display, inherit);\n font-size: var(--font-size-md, 1rem);\n margin-bottom: var(--space-sm, 8px);\n}\n.ta-truth-title { font-weight: 800; }\n.ta-truth-sep { opacity: 0.4; }\n.ta-truth-artist {\n color: var(--color-text-neon-muted, #b3b3c2);\n font-family: var(--font-body, inherit);\n font-weight: 600;\n}\n\n.ta-reveal-own {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 10px 12px;\n background: rgba(255, 255, 255, 0.03);\n border: 1px solid rgba(255, 255, 255, 0.07);\n border-radius: var(--radius-lg, 12px);\n}\n/* Emotional verdict banner above the own-result (#1180). */\n.ta-verdict {\n text-align: center;\n font-family: var(--font-display, inherit);\n font-weight: 900;\n font-size: var(--font-size-lg, 1.125rem);\n letter-spacing: 0.01em;\n padding: 8px 12px;\n margin-bottom: 4px;\n border-radius: var(--radius-md, 8px);\n}\n.ta-verdict--win {\n color: var(--color-success-neon, #39ff14);\n background: rgba(57, 255, 20, 0.14);\n box-shadow: inset 0 0 18px rgba(57, 255, 20, 0.12);\n text-shadow: 0 0 12px rgba(57, 255, 20, 0.5);\n}\n.ta-verdict--partial {\n color: var(--color-accent-secondary, #00f5ff);\n background: rgba(0, 245, 255, 0.1);\n}\n.ta-verdict--pending {\n color: var(--color-accent-secondary, #00f5ff);\n background: rgba(0, 245, 255, 0.07);\n font-weight: 700;\n font-style: italic;\n}\n.ta-verdict--miss {\n color: var(--color-text-neon-muted, #b3b3c2);\n background: rgba(255, 255, 255, 0.05);\n}\n.ta-own-row {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n}\n.ta-own-label {\n color: var(--color-text-dim, #6b6b7a);\n font-size: var(--font-size-sm, 0.875rem);\n min-width: 6em;\n}\n.ta-own-guess {\n font-weight: 600;\n flex: 1 1 auto;\n word-break: break-word;\n}\n.ta-own-row--none {\n color: var(--color-text-neon-muted, #b3b3c2);\n font-style: italic;\n}\n.ta-pill {\n font-size: 0.72rem;\n font-weight: 700;\n padding: 2px 10px;\n border-radius: var(--radius-full, 999px);\n white-space: nowrap;\n letter-spacing: 0.02em;\n}\n.ta-pill--exact,\n.ta-pill--fuzzy,\n.ta-pill--near-miss-accepted {\n background: rgba(46, 229, 157, 0.16);\n color: #2ee59d;\n}\n.ta-pill--near-miss {\n background: rgba(255, 180, 0, 0.16);\n color: #ffb400;\n}\n.ta-pill--wrong {\n background: rgba(255, 0, 64, 0.14);\n color: var(--color-error-neon, #ff0040);\n}\n.ta-pill--skipped {\n background: rgba(255, 255, 255, 0.08);\n color: var(--color-text-secondary, #b9b9c6);\n}\n\n/* ---- Crowd Court community voting (#1180) ---- */\n.ta-voting {\n margin-top: var(--space-lg, 24px);\n}\n.ta-voting.hidden { display: none; }\n.ta-voting-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: var(--space-md, 16px);\n}\n.ta-voting-header > span:not(.ta-voting-countdown) {\n font-family: var(--font-display, inherit);\n font-weight: 900;\n font-size: var(--font-size-sm, 0.875rem);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--color-text-white, #fff);\n}\n/* Countdown ring: hollow centre via a radial mask over a draining conic arc. */\n.ta-voting-countdown {\n flex-shrink: 0;\n width: 52px;\n height: 52px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n font-weight: 800;\n font-size: 18px;\n font-variant-numeric: tabular-nums;\n color: var(--color-accent-secondary, #00f5ff);\n background:\n radial-gradient(circle at center, var(--color-bg-primary, #0a0a12) 56%, transparent 57%),\n conic-gradient(var(--color-accent-secondary, #00f5ff) var(--ta-vote-progress, 360deg), rgba(255, 255, 255, 0.1) 0);\n box-shadow: var(--glow-secondary, 0 0 20px rgba(0, 245, 255, 0.5));\n}\n.ta-voting-countdown--closed {\n width: auto;\n height: auto;\n border-radius: var(--radius-full, 999px);\n padding: 4px 12px;\n font-size: var(--font-size-sm, 0.875rem);\n font-weight: 700;\n color: var(--color-text-neon-muted, #b3b3c2);\n background: rgba(255, 255, 255, 0.08);\n box-shadow: none;\n}\n\n.ta-voting-cards {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.ta-vote-card {\n background: var(--color-bg-surface, rgba(255, 255, 255, 0.05));\n border: 1px solid rgba(255, 255, 255, 0.08);\n border-radius: var(--radius-lg, 12px);\n padding: 14px;\n}\n.ta-vote-card--mine {\n border-color: rgba(255, 45, 106, 0.45);\n box-shadow: inset 0 0 16px rgba(255, 45, 106, 0.07);\n}\n.ta-vote-card-head {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 10px;\n}\n.ta-vote-avatar {\n flex-shrink: 0;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n font-family: var(--font-display, inherit);\n font-weight: 800;\n font-size: 13px;\n color: #fff;\n background: linear-gradient(135deg, var(--color-accent-primary, #ff2d6a), var(--color-neon-purple, #9d4edd));\n}\n.ta-vote-who {\n flex: 1;\n font-weight: 700;\n font-size: var(--font-size-md, 1rem);\n word-break: break-word;\n}\n.ta-vote-field {\n flex-shrink: 0;\n font-size: var(--font-size-xs, 0.625rem);\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--color-text-dim, #6b6b7a);\n background: rgba(255, 255, 255, 0.06);\n padding: 3px 8px;\n border-radius: var(--radius-full, 999px);\n}\n.ta-vote-guess {\n font-family: var(--font-display, inherit);\n font-weight: 800;\n font-size: var(--font-size-lg, 1.125rem);\n margin: 2px 0 12px;\n word-break: break-word;\n}\n.ta-vote-tally {\n display: flex;\n flex-direction: column;\n gap: 7px;\n margin-bottom: 12px;\n}\n.ta-tally-row {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: var(--font-size-sm, 0.875rem);\n font-weight: 700;\n font-variant-numeric: tabular-nums;\n}\n.ta-tally-yes { color: var(--color-success-neon, #39ff14); min-width: 48px; }\n.ta-tally-no { color: var(--color-error-neon, #ff0040); min-width: 48px; }\n.ta-tally-track {\n flex: 1;\n height: 8px;\n border-radius: var(--radius-full, 999px);\n background: rgba(255, 255, 255, 0.07);\n overflow: hidden;\n}\n.ta-tally-fill {\n display: block;\n height: 100%;\n border-radius: var(--radius-full, 999px);\n transition: width var(--transition-normal, 300ms) ease-out;\n}\n.ta-tally-fill--yes {\n background: var(--color-success-neon, #39ff14);\n box-shadow: 0 0 10px rgba(57, 255, 20, 0.5);\n}\n.ta-tally-fill--no {\n background: var(--color-error-neon, #ff0040);\n box-shadow: 0 0 10px rgba(255, 0, 64, 0.45);\n}\n.ta-vote-actions {\n display: flex;\n gap: 10px;\n}\n.ta-vote-btn {\n position: relative;\n flex: 1;\n height: 48px;\n border: 1px solid rgba(255, 255, 255, 0.12);\n border-radius: var(--radius-lg, 12px);\n background: rgba(255, 255, 255, 0.05);\n font-size: 20px;\n cursor: pointer;\n transition: transform var(--transition-fast, 150ms),\n box-shadow var(--transition-fast, 150ms),\n opacity var(--transition-fast, 150ms),\n background var(--transition-fast, 150ms);\n}\n.ta-vote-btn--yes {\n background: rgba(57, 255, 20, 0.12);\n border-color: rgba(57, 255, 20, 0.4);\n color: var(--color-success-neon, #39ff14);\n}\n.ta-vote-btn--no {\n background: rgba(255, 0, 64, 0.1);\n border-color: rgba(255, 0, 64, 0.38);\n color: var(--color-error-neon, #ff0040);\n}\n/* Voted state: chosen button lights up + \u2713, the other dims but stays\n tappable (the server lets a player change their vote). */\n.ta-vote-btn.is-chosen { transform: translateY(-1px); }\n.ta-vote-btn--yes.is-chosen {\n background: rgba(57, 255, 20, 0.22);\n border-color: rgba(57, 255, 20, 0.6);\n box-shadow: var(--glow-success, 0 0 20px rgba(57, 255, 20, 0.5));\n}\n.ta-vote-btn--no.is-chosen {\n background: rgba(255, 0, 64, 0.2);\n border-color: rgba(255, 0, 64, 0.55);\n box-shadow: var(--glow-error, 0 0 20px rgba(255, 0, 64, 0.5));\n}\n.ta-vote-actions--voted .ta-vote-btn { opacity: 0.34; }\n.ta-vote-actions--voted .ta-vote-btn.is-chosen { opacity: 1; }\n.ta-vote-actions--voted .ta-vote-btn.is-chosen::after {\n content: \"\u2713\";\n position: absolute;\n top: 3px;\n right: 8px;\n font-size: 12px;\n font-weight: 800;\n}\n.ta-vote-btn--yes.is-chosen::after { color: var(--color-success-neon, #39ff14); }\n.ta-vote-btn--no.is-chosen::after { color: var(--color-error-neon, #ff0040); }\n.ta-voted-caption {\n margin-top: 8px;\n text-align: center;\n font-size: var(--font-size-sm, 0.875rem);\n color: var(--color-text-neon-muted, #b3b3c2);\n}\n.ta-vote-own-note {\n text-align: center;\n font-size: var(--font-size-sm, 0.875rem);\n font-style: italic;\n color: var(--color-accent-primary, #ff2d6a);\n opacity: 0.85;\n}\n.ta-override-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 10px;\n padding-top: 10px;\n border-top: 1px solid rgba(255, 255, 255, 0.07);\n}\n.ta-override-label {\n margin-right: auto;\n font-size: var(--font-size-xs, 0.625rem);\n color: var(--color-text-dim, #6b6b7a);\n}\n.ta-override-btn {\n padding: 6px 14px;\n border-radius: var(--radius-md, 8px);\n border: 1px solid rgba(255, 255, 255, 0.14);\n background: rgba(255, 255, 255, 0.05);\n color: var(--color-text-white, #fff);\n font-weight: 700;\n font-size: var(--font-size-sm, 0.875rem);\n cursor: pointer;\n}\n.ta-override-btn--accept.is-chosen {\n border-color: var(--color-success-neon, #39ff14);\n color: var(--color-success-neon, #39ff14);\n}\n.ta-override-btn--reject.is-chosen {\n border-color: var(--color-error-neon, #ff0040);\n color: var(--color-error-neon, #ff0040);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ta-tally-fill,\n .ta-vote-btn { transition: none; }\n}\n\n/* ---- Resolution moment: \"Close calls \u2014 decided\" (#1180, #1243) ----\n Outcome cards render inside #ta-voting-cards, which already lays out a\n gapped column, so no extra wrapper is needed. */\n.ta-outcome-card {\n display: flex;\n align-items: center;\n gap: 10px;\n background: var(--color-bg-surface, rgba(255, 255, 255, 0.05));\n border: 1px solid rgba(255, 255, 255, 0.08);\n border-radius: var(--radius-lg, 12px);\n padding: 11px 13px;\n}\n.ta-outcome-card--accepted { border-color: rgba(57, 255, 20, 0.3); }\n.ta-outcome-card--rejected { opacity: 0.72; }\n.ta-outcome-avatar {\n flex-shrink: 0;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n font-family: var(--font-display, inherit);\n font-weight: 800;\n font-size: 12px;\n color: #fff;\n background: linear-gradient(135deg, var(--color-accent-primary, #ff2d6a), var(--color-neon-purple, #9d4edd));\n}\n.ta-outcome-main { flex: 1; min-width: 0; }\n.ta-outcome-who {\n font-weight: 700;\n font-size: var(--font-size-base, 0.875rem);\n}\n.ta-outcome-field { color: var(--color-text-dim, #6b6b7a); font-weight: 600; }\n.ta-outcome-guess {\n font-size: var(--font-size-sm, 0.875rem);\n color: var(--color-text-neon-muted, #b3b3c2);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ta-outcome-tally {\n font-size: var(--font-size-xs, 0.625rem);\n color: var(--color-text-dim, #6b6b7a);\n font-variant-numeric: tabular-nums;\n}\n.ta-outcome-verdict {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n font-family: var(--font-display, inherit);\n font-weight: 800;\n font-size: var(--font-size-base, 0.875rem);\n padding: 5px 11px;\n border-radius: var(--radius-full, 999px);\n font-variant-numeric: tabular-nums;\n}\n.ta-outcome-verdict--accepted {\n background: rgba(57, 255, 20, 0.16);\n color: var(--color-success-neon, #39ff14);\n}\n.ta-outcome-verdict--rejected {\n background: rgba(255, 0, 64, 0.12);\n color: var(--color-error-neon, #ff0040);\n}\n\n/* Title & Artist guessing inputs (#1180) \u2014 primary-round input card.\n Echoes the .arc-tiles bonus card but with the pink (primary) accent, and\n stacks each label above a full-width input so the two fields align cleanly. */\n.ta-input-section {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 12px 14px;\n margin: 0 var(--space-md) var(--space-md);\n background: linear-gradient(180deg, rgba(255, 45, 106, 0.06), rgba(255, 255, 255, 0.02));\n border: 1px solid rgba(255, 45, 106, 0.22);\n border-radius: var(--radius-lg);\n box-shadow: inset 0 0 12px rgba(255, 45, 106, 0.05);\n}\n.ta-input-section.hidden { display: none; }\n.ta-input-field {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.ta-input-label {\n display: flex;\n align-items: center;\n gap: 6px;\n font-family: var(--font-display);\n font-weight: 700;\n font-size: 12px;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--color-text-neon-muted);\n}\n.ta-input-points {\n margin-left: auto;\n flex-shrink: 0;\n background: rgba(57, 255, 20, 0.15);\n color: var(--color-success-neon);\n font-weight: 900;\n font-size: 11px;\n letter-spacing: 0.04em;\n padding: 2px 8px;\n border-radius: var(--radius-full);\n}\n.ta-text-input {\n width: 100%;\n box-sizing: border-box;\n padding: 12px 14px;\n background: rgba(255, 255, 255, 0.05);\n border: 2px solid rgba(255, 255, 255, 0.12);\n border-radius: var(--radius-lg);\n color: var(--color-text-white);\n font-family: var(--font-body);\n font-size: 16px;\n line-height: 1.3;\n transition: border-color var(--transition-fast), box-shadow var(--transition-fast);\n}\n.ta-text-input::placeholder { color: var(--color-text-neon-muted); opacity: 0.55; }\n.ta-text-input:focus {\n outline: none;\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 0 3px rgba(255, 45, 106, 0.20);\n}\n.ta-input-ack {\n margin-top: 2px;\n text-align: center;\n font-family: var(--font-body);\n font-size: 12px;\n color: var(--color-success-neon);\n}\n.ta-input-ack.hidden { display: none; }\n\n/* ==========================================================================\n Spotlight Stage \u2014 player reveal skin\n --------------------------------------------------------------------------\n A frosted-glass reskin of the reveal view: the song's album art, blurred,\n acts as a \"stage\" behind the top of the screen; every panel floats on\n frosted glass; the duel is two facing tickets bridged by a delta pill.\n\n EVERYTHING here is scoped under #reveal-view on purpose. Several classes\n used on this screen (.card-section, .section-header, .info-btn, .chip,\n .leaderboard-list) are shared with the launcher, lobby, end and admin\n surfaces \u2014 scoping keeps those untouched. Source order + the #id give\n these rules the specificity to win over the base reveal styles above.\n ========================================================================== */\n\n/* Stage: own stacking context + clip the backdrop's blur bleed. */\n#reveal-view .reveal-container--duel {\n position: relative;\n overflow: hidden;\n isolation: isolate;\n}\n\n/* --- Album-art backdrop + scrim (scrolls with the content) --- */\n#reveal-view .reveal-backdrop {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 340px;\n z-index: 0;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n filter: blur(46px) saturate(1.15);\n transform: scale(1.15);\n transform-origin: top center;\n opacity: 0.5;\n pointer-events: none;\n /* Fade the art to nothing well before its box ends, so the blurred/scaled\n tail never reads as a hard bright band below the duel cards (the rc1\n #1462 regression mholzi flagged). The glow dissolves into the stage. */\n -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 70%);\n mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 70%);\n}\n/* Synthetic fallback when album art is missing or its proxy URL has expired. */\n#reveal-view .reveal-backdrop--synthetic {\n background-image:\n radial-gradient(circle at 28% 22%, rgba(168, 32, 84, 0.95) 0%, rgba(168, 32, 84, 0) 42%),\n radial-gradient(circle at 78% 14%, rgba(96, 28, 150, 0.9) 0%, rgba(96, 28, 150, 0) 46%),\n radial-gradient(circle at 18% 82%, rgba(34, 40, 120, 0.9) 0%, rgba(34, 40, 120, 0) 50%),\n conic-gradient(from 210deg at 52% 48%,\n #1a1038 0deg, #4a1240 70deg, #7a1e3c 130deg,\n #2a1454 200deg, #131642 280deg, #1a1038 360deg);\n filter: blur(54px) saturate(1.25);\n}\n#reveal-view .reveal-scrim {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 380px;\n z-index: 0;\n pointer-events: none;\n background: linear-gradient(180deg,\n rgba(10, 10, 18, 0.78) 0%,\n rgba(10, 10, 18, 0.88) 55%,\n var(--color-bg-primary) 100%);\n}\n/* One cyan spotlight from the upper centre. */\n#reveal-view .reveal-scrim::after {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse 320px 360px at 50% 24%,\n rgba(0, 245, 255, 0.13) 0%, rgba(0, 245, 255, 0) 62%);\n}\n/* Lift every real child above the backdrop/scrim \u2014 but NOT the confetti\n canvas, which must keep its own `position: fixed` (full-screen overlay).\n Without this exclusion the canvas drops into normal flow and adds a tall\n empty gap between the duel and the score row. */\n#reveal-view .reveal-container--duel > *:not(.reveal-backdrop):not(.reveal-scrim):not(.confetti-canvas) {\n position: relative;\n z-index: 1;\n}\n@media (prefers-reduced-motion: no-preference) {\n #reveal-view .reveal-backdrop {\n transition: background-image 0.4s ease;\n }\n}\n\n/* --- Frosted-glass recipe for the floating panels --- */\n#reveal-view .song-strip,\n#reveal-view .score-row,\n#reveal-view .card-section,\n#reveal-view .duel-ticket {\n background: rgba(255, 255, 255, 0.06);\n border: 1px solid rgba(255, 255, 255, 0.12);\n -webkit-backdrop-filter: blur(20px);\n backdrop-filter: blur(20px);\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);\n border-radius: var(--radius-lg);\n}\n/* Keep the glass on hover (base .card-section:hover changes the background). */\n#reveal-view .card-section:hover {\n background: rgba(255, 255, 255, 0.08);\n border-color: rgba(255, 255, 255, 0.16);\n}\n\n/* --- Top chrome floats, no panel (already borderless; just sits on top) --- */\n#reveal-view .reveal-header-v2 {\n margin-bottom: var(--space-sm);\n}\n\n/* --- Song identity strip --- */\n#reveal-view .song-strip {\n padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);\n}\n#reveal-view .song-strip-cover {\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);\n border: 1px solid rgba(255, 255, 255, 0.15);\n}\n\n/* --- Center stage: emotion headline + duel tickets --- */\n#reveal-view .duel-emotion {\n font-size: 30px;\n letter-spacing: 0.04em;\n margin-bottom: var(--space-sm);\n text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);\n}\n#reveal-view .duel {\n padding: var(--space-md) var(--space-xs) var(--space-lg);\n}\n#reveal-view .duel-tickets {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: stretch;\n gap: var(--space-md);\n padding-bottom: 20px;\n}\n#reveal-view .duel-ticket {\n flex: 1 1 0;\n max-width: 170px;\n padding: var(--space-md) var(--space-sm) var(--space-lg);\n text-align: center;\n}\n#reveal-view .duel-ticket--you {\n transform: rotate(-3deg) translateY(4px);\n border-color: rgba(255, 45, 106, 0.35);\n box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 45, 106, 0.12);\n}\n#reveal-view .duel-ticket--truth {\n transform: rotate(3deg) translateY(4px);\n border-color: rgba(0, 245, 255, 0.4);\n box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 34px rgba(0, 245, 255, 0.18);\n}\n#reveal-view .duel-ticket .duel-label {\n padding-bottom: var(--space-sm);\n margin: 0 6px var(--space-sm);\n border-bottom: 1.5px dashed rgba(255, 255, 255, 0.18);\n}\n#reveal-view .duel-ticket .duel-year {\n font-size: clamp(40px, 13vw, 54px);\n}\n#reveal-view .duel-ticket--you .duel-year.mine {\n color: var(--color-accent-primary);\n text-shadow: 0 0 18px rgba(255, 45, 106, 0.45);\n}\n#reveal-view .duel-ticket--truth .duel-year.correct {\n color: var(--color-accent-secondary);\n text-shadow: 0 0 14px rgba(0, 245, 255, 0.9), 0 0 38px rgba(0, 245, 255, 0.45);\n}\n/* The gap becomes a delta pill overlapping the tickets' base. */\n#reveal-view .duel-gap {\n position: absolute;\n left: 50%;\n bottom: 0;\n transform: translateX(-50%);\n flex-direction: row;\n align-items: baseline;\n gap: 5px;\n min-width: 0;\n padding: 6px 16px;\n border-radius: var(--radius-full);\n background: rgba(255, 102, 0, 0.16);\n border: 1px solid rgba(255, 102, 0, 0.55);\n -webkit-backdrop-filter: blur(20px);\n backdrop-filter: blur(20px);\n box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 102, 0, 0.2);\n white-space: nowrap;\n z-index: 3;\n}\n#reveal-view .duel-gap-x {\n font-size: var(--font-size-md);\n color: var(--color-warning-alt);\n opacity: 0.9;\n}\n#reveal-view .duel-gap-n {\n font-size: var(--font-size-lg);\n color: var(--color-warning-alt);\n text-shadow: none;\n}\n#reveal-view .duel-gap-unit {\n margin-top: 0;\n font-size: 10px;\n color: var(--color-warning-alt);\n}\n#reveal-view .duel-gap--exact {\n background: rgba(57, 255, 20, 0.16);\n border-color: rgba(57, 255, 20, 0.55);\n box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 16px rgba(57, 255, 20, 0.22);\n}\n#reveal-view .duel-gap--exact .duel-gap-x,\n#reveal-view .duel-gap--exact .duel-gap-n,\n#reveal-view .duel-gap--exact .duel-gap-unit {\n color: var(--color-success-neon);\n}\n#reveal-view .duel-gap--wrong {\n background: rgba(255, 0, 64, 0.14);\n border-color: rgba(255, 0, 64, 0.5);\n box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 0, 64, 0.2);\n}\n#reveal-view .duel-gap--wrong .duel-gap-x,\n#reveal-view .duel-gap--wrong .duel-gap-n,\n#reveal-view .duel-gap--wrong .duel-gap-unit {\n color: var(--color-error-neon);\n}\n\n/* --- Score / points bar: green gain per DESIGN.md, glass surface --- */\n#reveal-view .score-row {\n border-color: rgba(255, 255, 255, 0.12);\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);\n}\n#reveal-view .score-row-pts {\n color: var(--color-success-neon);\n text-shadow: 0 0 16px rgba(57, 255, 20, 0.5);\n font-size: 32px;\n}\n\n/* --- Title & Artist vote cards float as glass chips --- */\n#reveal-view .ta-vote-card,\n#reveal-view .ta-outcome-card {\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(255, 255, 255, 0.1);\n -webkit-backdrop-filter: blur(12px);\n backdrop-filter: blur(12px);\n}\n\n/* --- Footer: pink primary CTA, ghost-glass invite --- */\n#reveal-view .next-round-btn {\n background: linear-gradient(135deg, #ff2d6a 0%, #ff4f86 100%);\n border-radius: var(--radius-full);\n box-shadow: 0 8px 24px rgba(255, 45, 106, 0.45), 0 0 18px rgba(255, 45, 106, 0.3);\n}\n#reveal-view .next-round-btn:hover {\n background: linear-gradient(135deg, #ff4f86 0%, #ff2d6a 100%);\n}\n#reveal-view .next-round-btn.is-final {\n background: linear-gradient(135deg, #39ff14 0%, #00f5ff 100%);\n color: var(--color-bg-primary);\n}\n#reveal-view .invite-btn {\n background: rgba(255, 255, 255, 0.06);\n border: 1px solid rgba(255, 255, 255, 0.18);\n -webkit-backdrop-filter: blur(20px);\n backdrop-filter: blur(20px);\n border-radius: var(--radius-full);\n}\n/* Equalise the two footer buttons \u2014 same box metrics + equal width, so\n \"Spieler einladen\" and \"N\u00E4chste Runde\" match (only their colour differs). */\n#reveal-view .reveal-admin-buttons { align-items: stretch; }\n#reveal-view .reveal-admin-buttons .invite-btn,\n#reveal-view .reveal-admin-buttons .next-round-btn {\n flex: 1 1 0;\n min-width: 0;\n max-width: 260px;\n min-height: 56px;\n padding: 12px 20px;\n font-size: var(--font-size-md);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-sm);\n text-align: center;\n}\n\n/* ==========================================================================\n Reveal standings \u2014 \"Round-Delta Ledger\" (design-shotgun A)\n --------------------------------------------------------------------------\n Replaces the plain leaderboard list inside the reveal's Standings card with\n rows that fuse the overall standing (rank + movement + big total) with this\n round's outcome (guessed year, streak/steal/bet chips, +round delta). Own\n `rstand-` prefix + `#reveal-view` scope so the shared `.leaderboard-entry`\n styling (used by the in-game leaderboard + dashboard) is untouched.\n Rendered by renderRevealStandings() in player-reveal.js.\n ========================================================================== */\n#reveal-view #reveal-leaderboard-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n /* The reveal standings show every player (taper-dim lower ranks), so undo\n the shared .leaderboard-list scroll box (max-height:200px; overflow:auto)\n the in-game lazy leaderboard uses \u2014 otherwise rows 4+ get clipped. */\n max-height: none;\n overflow: visible;\n}\n#reveal-view .rstand-row {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n border-radius: 12px;\n background: rgba(255, 255, 255, 0.03);\n border: 1px solid rgba(255, 255, 255, 0.06);\n}\n#reveal-view .rstand-row--you {\n border: 1px solid var(--color-accent-primary);\n background: rgba(255, 45, 106, 0.06);\n box-shadow: 0 0 16px rgba(255, 45, 106, 0.22);\n}\n/* Taper-dim lower ranks (matches the Arcade taper grammar). */\n#reveal-view .rstand-row--taper1 { opacity: 0.85; }\n#reveal-view .rstand-row--taper2 { opacity: 0.68; }\n\n#reveal-view .rstand-rankcell {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 26px;\n flex-shrink: 0;\n}\n#reveal-view .rstand-rank {\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 20px;\n line-height: 1;\n color: var(--color-text-white);\n}\n#reveal-view .rstand-row--taper1 .rstand-rank,\n#reveal-view .rstand-row--taper2 .rstand-rank { font-size: 18px; }\n#reveal-view .rstand-move {\n font-size: 10px;\n font-weight: 700;\n line-height: 1;\n margin-top: 3px;\n}\n#reveal-view .rstand-move--up { color: var(--color-success-neon); }\n#reveal-view .rstand-move--down { color: var(--color-error-neon); }\n#reveal-view .rstand-move--flat { color: var(--color-text-neon-muted); }\n\n#reveal-view .rstand-avatar {\n width: 34px;\n height: 34px;\n border-radius: 50%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 15px;\n color: var(--color-text-white);\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);\n border: 1px solid rgba(255, 255, 255, 0.15);\n}\n\n#reveal-view .rstand-ident { flex: 1; min-width: 0; }\n#reveal-view .rstand-name {\n font-family: var(--font-body);\n font-weight: 700;\n font-size: 15px;\n line-height: 1.1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--color-text-white);\n}\n#reveal-view .rstand-you {\n font-family: var(--font-display);\n font-weight: 800;\n font-size: 9px;\n letter-spacing: 0.06em;\n color: var(--color-accent-primary);\n background: rgba(255, 45, 106, 0.15);\n border: 1px solid rgba(255, 45, 106, 0.4);\n border-radius: 6px;\n padding: 2px 5px;\n line-height: 1;\n flex-shrink: 0;\n}\n#reveal-view .rstand-guess {\n font-size: 11px;\n font-weight: 500;\n color: var(--color-text-neon-muted);\n line-height: 1.2;\n margin-top: 3px;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n#reveal-view .rstand-guess .rstand-exact { color: var(--color-success-neon); font-weight: 600; }\n#reveal-view .rstand-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n margin-top: 5px;\n}\n#reveal-view .rstand-chip {\n font-size: 10px;\n font-weight: 600;\n color: var(--color-text-neon-muted);\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(255, 255, 255, 0.08);\n border-radius: 999px;\n padding: 2px 7px;\n line-height: 1.4;\n white-space: nowrap;\n}\n#reveal-view .rstand-chip--fire { color: var(--color-warning-alt); border-color: rgba(255, 102, 0, 0.3); background: rgba(255, 102, 0, 0.08); }\n#reveal-view .rstand-chip--steal { color: var(--color-success-neon); border-color: rgba(57, 255, 20, 0.28); background: rgba(57, 255, 20, 0.07); }\n\n#reveal-view .rstand-score {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n flex-shrink: 0;\n margin-left: 4px;\n}\n#reveal-view .rstand-total {\n font-family: var(--font-display);\n font-weight: 900;\n font-size: 22px;\n line-height: 1;\n color: var(--color-text-white);\n letter-spacing: -0.01em;\n}\n#reveal-view .rstand-row--taper1 .rstand-total { font-size: 20px; }\n#reveal-view .rstand-row--taper2 .rstand-total { font-size: 19px; }\n#reveal-view .rstand-delta {\n font-family: var(--font-body);\n font-weight: 700;\n font-size: 12px;\n line-height: 1;\n margin-top: 4px;\n color: var(--color-success-neon);\n}\n#reveal-view .rstand-delta--zero { color: var(--color-text-neon-muted); }\n\n/* ==========================================================================\n Reveal artist-result + fun-fact (design-shotgun B: inline artist chip +\n badges-first fun fact)\n --------------------------------------------------------------------------\n The artist-challenge result folds into the song-strip card as a slim inline\n row (no standalone card). The fun-fact card leads with the chart/cert/award\n badges as prominent tiles, then a trimmed (2-line) prose hook. Scoped under\n #reveal-view. renderArtistReveal still drives #artist-reveal-* element ids.\n ========================================================================== */\n/* Song strip becomes a column: main identity row + optional artist row. */\n#reveal-view .song-strip {\n flex-direction: column;\n align-items: stretch;\n gap: 0;\n padding: 0;\n overflow: hidden;\n}\n#reveal-view .song-strip-main {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);\n}\n/* Inline artist-challenge result row (relocated #artist-reveal-section). */\n#reveal-view .artist-guess-row {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 9px var(--space-md) 9px var(--space-sm);\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n}\n#reveal-view .artist-guess-row.hidden { display: none; }\n#reveal-view .artist-guess-ic { font-size: 14px; flex-shrink: 0; }\n#reveal-view .artist-guess-name {\n font-family: var(--font-body);\n font-weight: 700;\n font-size: 14px;\n color: var(--color-text-white);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n#reveal-view .artist-reveal-winner {\n margin-left: auto;\n flex-shrink: 0;\n font-family: var(--font-body);\n font-size: 11px;\n font-weight: 700;\n padding: 3px 10px;\n border-radius: var(--radius-full);\n white-space: nowrap;\n}\n#reveal-view .artist-reveal-winner.hidden { display: none; }\n#reveal-view .artist-reveal-winner.is-you,\n#reveal-view .artist-reveal-winner.is-other {\n color: var(--color-success-neon);\n background: rgba(57, 255, 20, 0.12);\n border: 1px solid rgba(57, 255, 20, 0.4);\n}\n#reveal-view .artist-reveal-winner.is-you {\n box-shadow: 0 0 12px rgba(57, 255, 20, 0.2);\n}\n#reveal-view .artist-reveal-winner.artist-reveal-no-winner {\n color: var(--color-text-neon-muted);\n background: rgba(255, 255, 255, 0.06);\n border: 1px solid rgba(255, 255, 255, 0.12);\n}\n\n/* Fun fact: badges as prominent tiles first, prose trimmed below. */\n#reveal-view #fun-fact-container .section-content-padded {\n display: flex;\n flex-direction: column;\n gap: 11px;\n}\n#reveal-view .song-rich-info .song-badges-row {\n display: flex;\n gap: 8px;\n}\n#reveal-view .song-rich-info .song-badge {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: 11px 6px;\n border-radius: 12px;\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(255, 255, 255, 0.1);\n font-family: var(--font-body);\n font-size: 11px;\n font-weight: 700;\n line-height: 1.2;\n text-align: center;\n white-space: normal;\n}\n#reveal-view .song-rich-info .song-badge .song-badge-icon { font-size: 20px; }\n#reveal-view .song-rich-info .song-badges-more {\n flex: 0 0 auto;\n align-self: center;\n font-size: 11px;\n color: var(--color-text-neon-muted);\n}\n#reveal-view #fun-fact .fun-fact-text,\n#reveal-view .fun-fact-text {\n font-size: 12px;\n line-height: 1.4;\n color: var(--color-text-neon-muted);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* ==========================================================================\n Smart Playlist Mixer \u2014 \"Mix\" tab (#1538, design option 1 \"chip-cloud\")\n Reuses the Beatify dark look (bg #0a0a12, pink #ff2d6a, cyan #00f5ff,\n indigo #6366f1). Tokens: --color-accent-primary/secondary/brand,\n --color-surface-dark, --color-border-neon, --color-text-neon-muted.\n ========================================================================== */\n\n/* Playlist / Mix tab strip (sits above the playlist panels). */\n.playlist-tabs {\n display: flex;\n gap: var(--space-lg);\n border-bottom: 1px solid var(--color-border-neon);\n margin-bottom: var(--space-md);\n}\n\n.playlist-tab {\n appearance: none;\n background: none;\n border: none;\n padding: 10px 2px;\n margin-bottom: -1px;\n font: inherit;\n font-weight: 700;\n font-size: 0.95rem;\n color: var(--color-text-neon-muted);\n cursor: pointer;\n border-bottom: 2px solid transparent;\n transition: color var(--transition-fast), border-color var(--transition-fast);\n}\n\n.playlist-tab:hover {\n color: var(--color-text-white);\n}\n\n.playlist-tab.active {\n color: var(--color-accent-secondary);\n border-bottom-color: var(--color-accent-secondary);\n}\n\n.playlist-panel.hidden {\n display: none;\n}\n\n/* Mix card */\n.mix-card {\n background: var(--color-surface-dark);\n border: 1px solid var(--color-border-neon);\n border-radius: var(--radius-lg);\n padding: var(--space-lg);\n}\n\n.mix-card-head {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n}\n\n.mix-card-icon {\n font-size: 1.25rem;\n}\n\n.mix-card-title {\n margin: 0;\n font-size: 1.25rem;\n font-weight: 800;\n color: var(--color-text-white);\n}\n\n.mix-card-sub {\n margin: 6px 0 var(--space-lg);\n color: var(--color-text-neon-muted);\n font-size: 0.9rem;\n}\n\n/* Chip-cloud rows (Decade / Style / Region / Special) */\n.mix-chip-cloud {\n display: flex;\n flex-direction: column;\n gap: var(--space-md);\n}\n\n.mix-chip-row {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.mix-chip-rowlabel {\n font-size: 0.7rem;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--color-text-neon-muted);\n}\n\n.mix-chip-group {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.mix-chip {\n appearance: none;\n padding: 6px 14px;\n border-radius: var(--radius-full);\n border: 1px solid var(--color-border-neon);\n background: rgba(255, 255, 255, 0.04);\n color: var(--color-text-neon-muted);\n font: inherit;\n font-size: 0.85rem;\n font-weight: 600;\n cursor: pointer;\n transition: all var(--transition-fast);\n}\n\n.mix-chip:hover {\n border-color: rgba(255, 255, 255, 0.3);\n color: var(--color-text-white);\n}\n\n/* Active accents per category, matching the option-1 mockup. */\n.mix-chip-group[data-accent=\"cyan\"] .mix-chip.active {\n background: rgba(0, 245, 255, 0.15);\n border-color: var(--color-accent-secondary);\n color: var(--color-accent-secondary);\n}\n\n.mix-chip-group[data-accent=\"pink\"] .mix-chip.active {\n background: rgba(255, 45, 106, 0.15);\n border-color: var(--color-accent-primary);\n color: var(--color-accent-primary);\n}\n\n.mix-chip-group[data-accent=\"indigo\"] .mix-chip.active {\n background: rgba(99, 102, 241, 0.18);\n border-color: var(--color-accent-brand);\n color: #a5b4fc;\n}\n\n.mix-empty {\n color: var(--color-text-neon-muted);\n font-size: 0.9rem;\n margin: 0;\n}\n\n.mix-divider {\n height: 1px;\n background: var(--color-border-neon);\n margin: var(--space-lg) 0;\n}\n\n/* Target-count segmented control (30 / 50 / 100) */\n.mix-count-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-md);\n flex-wrap: wrap;\n}\n\n.mix-count-label {\n font-size: 0.7rem;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--color-text-neon-muted);\n}\n\n.mix-segmented {\n display: inline-flex;\n padding: 4px;\n gap: 4px;\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid var(--color-border-neon);\n border-radius: 10px;\n}\n\n.mix-seg {\n appearance: none;\n min-width: 56px;\n padding: 8px 14px;\n border: none;\n border-radius: 7px;\n background: transparent;\n color: var(--color-text-neon-muted);\n font: inherit;\n font-weight: 700;\n cursor: pointer;\n transition: all var(--transition-fast);\n}\n\n.mix-seg:hover {\n color: var(--color-text-white);\n}\n\n.mix-seg.active {\n background: var(--color-accent-brand);\n color: var(--color-text-white);\n box-shadow: 0 0 14px rgba(99, 102, 241, 0.5);\n}\n\n/* Live preview line */\n.mix-preview {\n display: flex;\n align-items: center;\n gap: 10px;\n margin: var(--space-md) 0 var(--space-lg);\n padding: 12px 16px;\n border-radius: var(--radius-md);\n background: rgba(0, 245, 255, 0.06);\n border: 1px solid rgba(0, 245, 255, 0.15);\n color: var(--color-text-white);\n font-size: 0.9rem;\n}\n\n.mix-preview-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #1ed760;\n box-shadow: 0 0 8px rgba(30, 215, 96, 0.8);\n flex-shrink: 0;\n}\n\n/* Actions row */\n.mix-actions {\n display: flex;\n align-items: center;\n gap: var(--space-lg);\n flex-wrap: wrap;\n}\n\n.mix-actions .btn-primary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n box-shadow: none;\n}\n\n.mix-save-label {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.9rem;\n color: var(--color-text-neon-muted);\n cursor: pointer;\n}\n\n#mix-error {\n margin-top: var(--space-md);\n}\n/* #2294: the server's own reason under the translated headline. Inline-block\n with display:block because #mix-error is a
and cannot hold a
and cannot hold a
${F("admin.libraryAi.parseFail","Couldn't read any songs from that answer \u2014 expected JSON like")} {"songs":[{"artist":"\u2026","title":"\u2026"}]}
`,a.classList.remove("hidden");return}let s=(t("name").value||"").trim()||F("admin.libraryAi.defaultName","AI Mix");try{let o=await ot("/beatify/api/library-playlists/resolve",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:s,picks:i})}),l=await o.json().catch(()=>({}));if(!o.ok){a.innerHTML=`${l.message||"Resolve failed"}
`,a.classList.remove("hidden");return}let d=l.unmatched||[],c=l.matched||0,u=`${F("admin.libraryAi.matched","Matched in your library: ")}${c}
`;if(d.length){u+=`${F("admin.libraryAi.unmatched","Not found (skipped): ")}${d.length}
${F("admin.libraryAi.resolveFailed","Could not check the songs \u2014 is Home Assistant reachable?")}
`,a.classList.remove("hidden")}}),t("save").addEventListener("click",async()=>{if(!Te)return;let a=t("result"),n=t("save");n.disabled=!0;try{let i=await ot("/beatify/api/playlists/save",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({playlist:Te})}),s=await i.json().catch(()=>({}));if(i.ok){if(a.innerHTML=`${F("admin.libraryAi.saved","Saved! Find it under Playlists \u2192 Mine.")}
`,typeof window.loadPlaylists=="function")try{window.loadPlaylists()}catch{}}else a.innerHTML=`${s.message||"Save failed"}
`,n.disabled=!1}catch{a.innerHTML='Save failed
',n.disabled=!1}}),be=e,e}function Ot(e){return String(e||"").replace(/[&<>"']/g,t=>({"&":"&","<":"<",">":">",'"':""","'":"'"})[t])}function jt(){be&&be.classList.add("hidden")}function Ft(){let e=en();e.classList.remove("hidden"),e.querySelector('[data-ai="name"]')?.focus()}var tn=2e3;function R(e,t){return(window.BeatifyAuth&&window.BeatifyAuth.fetch||fetch)(e,t)}function g(e,t){let a=window.BeatifyI18n;if(a&&typeof a.t=="function"){let n=a.t(e);if(n&&n!==e)return n}return t}function Me(){return{popularity_percent:r.libraryPopPercent,size:r.librarySize,year_gate:r.libraryYearGate,genres:r.libraryGenres||[]}}var se=[];function an(e){return` +${j("admin.libraryAi.parseFail","Couldn't read any songs from that answer \u2014 expected JSON like")} {"songs":[{"artist":"\u2026","title":"\u2026"}]}
`,a.classList.remove("hidden");return}let s=(t("name").value||"").trim()||j("admin.libraryAi.defaultName","AI Mix");try{let o=await ot("/beatify/api/library-playlists/resolve",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:s,picks:i})}),l=await o.json().catch(()=>({}));if(!o.ok){a.innerHTML=`${l.message||"Resolve failed"}
`,a.classList.remove("hidden");return}let d=l.unmatched||[],c=l.matched||0,u=`${j("admin.libraryAi.matched","Matched in your library: ")}${c}
`;if(d.length){u+=`${j("admin.libraryAi.unmatched","Not found (skipped): ")}${d.length}
${j("admin.libraryAi.resolveFailed","Could not check the songs \u2014 is Home Assistant reachable?")}
`,a.classList.remove("hidden")}}),t("save").addEventListener("click",async()=>{if(!Te)return;let a=t("result"),n=t("save");n.disabled=!0;try{let i=await ot("/beatify/api/playlists/save",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({playlist:Te})}),s=await i.json().catch(()=>({}));if(i.ok){if(a.innerHTML=`${j("admin.libraryAi.saved","Saved! Find it under Playlists \u2192 Mine.")}
`,typeof window.loadPlaylists=="function")try{window.loadPlaylists()}catch{}}else a.innerHTML=`${s.message||"Save failed"}
`,n.disabled=!1}catch{a.innerHTML='Save failed
',n.disabled=!1}}),be=e,e}function Ot(e){return String(e||"").replace(/[&<>"']/g,t=>({"&":"&","<":"<",">":">",'"':""","'":"'"})[t])}function Ft(){be&&be.classList.add("hidden")}function jt(){let e=tn();e.classList.remove("hidden"),e.querySelector('[data-ai="name"]')?.focus()}var an=2e3;function R(e,t){return(window.BeatifyAuth&&window.BeatifyAuth.fetch||fetch)(e,t)}function g(e,t){let a=window.BeatifyI18n;if(a&&typeof a.t=="function"){let n=a.t(e);if(n&&n!==e)return n}return t}function Me(){return{popularity_percent:r.libraryPopPercent,size:r.librarySize,year_gate:r.libraryYearGate,genres:r.libraryGenres||[]}}var se=[];function nn(e){return`${g("admin.library.recentEmpty","No games played yet.")}
`;return}n.innerHTML=s.map((o,l)=>` +${g("admin.library.recentEmpty","No games played yet.")}
`;return}n.innerHTML=s.map((o,l)=>` `).join(""),n.querySelectorAll("[data-recent]").forEach(o=>{o.addEventListener("click",()=>{let l=s[Number(o.dataset.recent)];l&&window.BeatifyCrateDiggerFix&&window.BeatifyCrateDiggerFix.open(l)})})};a.addEventListener("click",async()=>{if(!n.classList.contains("hidden")){n.classList.add("hidden");return}n.classList.remove("hidden"),n.innerHTML=`${g("admin.library.recentLoading","Loading\u2026")}
`;try{let l=await(await R("/beatify/api/library-pool/recent")).json().catch(()=>({}));i(l&&l.songs||[])}catch{n.innerHTML=`${g("admin.library.recentFailed","Could not load recent songs.")}
`}})}function sn(e){let t=e.root,a=t.querySelector('[data-lib="backup-btn"]'),n=t.querySelector('[data-lib="restore-btn"]'),i=t.querySelector('[data-lib="restore-file"]'),s=t.querySelector('[data-lib="backup-status"]'),o=(l,d)=>{s&&(s.textContent=l||"",s.classList.toggle("library-backup-status--error",!!d))};a&&a.addEventListener("click",async()=>{a.disabled=!0,o(g("admin.library.backupWorking","Preparing backup\u2026"));try{let l=await R("/beatify/api/library-pool/backup");if(!l.ok){let b="";try{b=(await l.json()).error||""}catch{}o(b||g("admin.library.backupFailed","Backup failed."),!0);return}let d=await l.blob(),u=(l.headers.get("Content-Disposition")||"").match(/filename="?([^"]+)"?/),m=u&&u[1]||"beatify-library-backup.json.gz",f=URL.createObjectURL(d),p=document.createElement("a");p.href=f,p.download=m,document.body.appendChild(p),p.click(),p.remove(),setTimeout(()=>URL.revokeObjectURL(f),3e4);let y=l.headers.get("X-Beatify-Songs");o(g("admin.library.backupDone","Backup downloaded ({n} songs).").replace("{n}",Number(y||0).toLocaleString()))}catch{o(g("admin.library.backupFailed","Backup failed."),!0)}finally{a.disabled=!1}}),n&&i&&(n.addEventListener("click",()=>i.click()),i.addEventListener("change",async()=>{let l=i.files&&i.files[0];if(i.value="",!l)return;let d=window.confirm(g("admin.library.restoreMergeAsk","Merge this backup into your current library?"));if(!(!d&&!window.confirm(g("admin.library.restoreReplaceConfirm","Replace your current scanned library with this backup? Your current pool is saved aside first.")))){n.disabled=!0,o(g("admin.library.restoreWorking","Restoring\u2026"));try{let c=await R("/beatify/api/library-pool/restore?mode="+(d?"merge":"replace"),{method:"POST",body:l}),u={};try{u=await c.json()}catch{}if(!c.ok){o(u.error||g("admin.library.restoreFailed","Restore failed."),!0);return}let m=u.stats||{},f=g("admin.library.restoreDone","Restored: {total} songs ({added} new, {improved} improved).").replace("{total}",Number(m.total||0).toLocaleString()).replace("{added}",Number(m.added||0).toLocaleString()).replace("{improved}",Number(m.improved||0).toLocaleString());u.foreign_source&&(f+=" "+g("admin.library.restoreForeign","Note: this backup came from a different Music Assistant server, so some songs may need a rescan to play.")),o(f),Pe(e)}catch{o(g("admin.library.restoreFailed","Restore failed."),!0)}finally{n.disabled=!1}}}))}function ft(){dt&&clearTimeout(dt),dt=setTimeout(async()=>{try{let e=new URLSearchParams({pop:String(r.libraryPopPercent),genres:(r.libraryGenres||[]).join(","),gate:r.libraryYearGate}),t=await R("/beatify/api/library-pool/preview?"+e.toString());if(!t.ok)return;let a=await t.json(),n=Number(a.eligible??0),i=n<(r.librarySize||30);se.forEach(s=>{let o=s.root.querySelector('[data-lib="match-count"]');if(!o)return;let l=g("admin.library.matchCount","{n} songs match these settings").replace("{n}",n.toLocaleString());i&&(l+=" \u2014 "+g("admin.library.matchLow","not enough for a full game; the rest will come from related genres and the most popular matches")),o.textContent=l,o.classList.toggle("library-match-count--low",i)})}catch{}},350)}function on(){ft(),lt&&clearTimeout(lt),lt=setTimeout(async()=>{try{await R("/beatify/api/library-settings",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({popularity_percent:r.libraryPopPercent,size:r.librarySize,year_gate:r.libraryYearGate,scan_size:r.libraryScanSize,genres:r.libraryGenres||[]})})}catch{}},400)}async function ln(e){try{let t=await R("/beatify/api/library-settings");if(!t.ok)return;let a=await t.json();Number.isFinite(a.popularity_percent)&&(r.libraryPopPercent=a.popularity_percent),Number.isFinite(a.size)&&(r.librarySize=a.size),typeof a.year_gate=="string"&&a.year_gate&&(r.libraryYearGate=a.year_gate),Number.isFinite(a.scan_size)&&(r.libraryScanSize=a.scan_size),Array.isArray(a.genres)&&(r.libraryGenres=a.genres),se.forEach(n=>{try{n.syncControls()}catch{}}),ft()}catch{}}function he(e){on();for(let t of se)t!==e&&t.syncControls&&t.syncControls()}async function Pe(e){try{let t=await R("/beatify/api/library-pool");if(!t.ok)return;let a=await t.json();pn(e,a.provider_version),dn(e,a),un(e,a.refresh),a.building||a.refresh&&a.refresh.running?ut(e):Gt(e)}catch{}}function ut(e){e.pollTimer||(e.pollTimer=setInterval(()=>Pe(e),tn))}function Gt(e){e.pollTimer&&(clearInterval(e.pollTimer),e.pollTimer=null)}function V(e,t){let a=e.root.querySelector('[data-lib="status-text"]');a&&(a.textContent=t)}function ct(e,t){let a=e.root.querySelector('[data-lib="toast"]');a&&(a.textContent=t,a.classList.remove("hidden"),setTimeout(()=>a.classList.add("hidden"),6e3))}function dn(e,t){let a=e.root;t.stats&&(mn(e,t),fn(e,t.stats&&t.stats.genres||[]));let n=a.querySelector('[data-lib="spinner"]'),i=a.querySelector('[data-lib="progress"]'),s=a.querySelector('[data-lib="bar"]'),o=a.querySelector('[data-lib="progress-label"]'),l=a.querySelector('[data-lib="scan-btn"]'),d=a.querySelector('[data-lib="scan-btn-label"]');if(t.building){n?.classList.remove("hidden"),i?.classList.remove("hidden"),l&&(l.disabled=!0);let p=t.progress&&t.progress.done||0,y=t.progress&&t.progress.total||0,b=t.progress&&t.progress.phase||"";if(b==="enumerate"||y===0&&p>0){n?.classList.remove("hidden"),i?.classList.remove("hidden"),l&&(l.disabled=!0),s&&(s.style.width="2%"),o&&(o.textContent=g("admin.library.reading","Reading your library\u2026")+` ${p.toLocaleString()} `+g("admin.library.songsFound","songs found")),V(e,g("admin.library.statusScanning","Scanning your library in the background \u2014 you can continue."));return}let h=y>0?Math.round(p/y*100):0;s&&(s.style.width=h+"%");let k=Date.now(),Y=`${b}|${y}`;(e._etaPhase!==Y||p<(e._etaDone||0))&&(e._etaPhase=Y,e._etaT0=k,e._etaD0=p),e._etaDone=p;let xe="",ie=(k-e._etaT0)/1e3,pe=p-e._etaD0;if(y>p&&ie>=20&&pe>=10){let ge=pe/ie,re=Math.round((y-p)/ge),X=Math.floor(re/3600),J=Math.round(re%3600/60);xe=" \xB7 ~"+(X>0?`${X}h ${J}m`:`${J} min`)+" "+g("admin.library.left","left")}o&&(o.textContent=y>0?g("admin.library.scanning","Scanning\u2026")+` ${p}/${y} (${h}%)${xe}`:g("admin.library.scanningStart","Starting scan\u2026")),V(e,g("admin.library.statusScanning","Scanning your library in the background \u2014 you can continue."));return}if(n?.classList.add("hidden"),i?.classList.add("hidden"),l&&(l.disabled=!1),t.error){V(e,g("admin.library.statusError","Last scan failed: ")+t.error),d&&(d.textContent=g("admin.library.scanBtn","Scan library"));return}if(!t.built){V(e,g("admin.library.statusEmpty","Your library hasn\u2019t been scanned yet \u2014 start a scan to play from your own music.")),d&&(d.textContent=g("admin.library.scanBtn","Scan library"));return}let c=t.stats||{},u=c.usable||0,m=c.total||0,f=g("admin.library.statusReady","Library ready: {usable} of {total} songs game-ready (verified years).");V(e,f.replace("{usable}",String(u)).replace("{total}",String(m))),d&&(d.textContent=g("admin.library.rescanBtn","Rescan"))}function cn(e){return typeof e=="number"?e.toLocaleString():"\u2014"}function un(e,t){let a=e.root.querySelector('[data-lib="refresh-row"]'),n=e.root.querySelector('[data-lib="refresh-status"]'),i=e.root.querySelector('[data-lib="refresh-btn"]');if(!a||!t)return;let s=t.backlog||0;if(t.running){a.classList.remove("hidden"),i&&(i.disabled=!0);let o=t.progress||{},l=o.done||0,d=o.total||0,c=d>0?Math.round(l/d*100):0;n&&(n.textContent=d>0?g("admin.library.refreshing","Improving songs\u2026")+` ${l.toLocaleString()}/${d.toLocaleString()} (${c}%)`:g("admin.library.refreshing","Improving songs\u2026"));return}s>0?(a.classList.remove("hidden"),i&&(i.disabled=!1),n&&(n.textContent=g("admin.library.refreshBacklog","{n} songs can be improved").replace("{n}",s.toLocaleString()))):a.classList.add("hidden")}function mn(e,t){let a=e.root.querySelector('[data-lib="stats"]');if(!a)return;let n=t.stats||{},i=[["admin.library.stLibraryTotal","Songs in your library",t.library_total],["admin.library.stPrepared","Prepared (scanned)",n.total],["admin.library.stStrict","Verified years (strict)",n.verified_strict],["admin.library.stBalanced",'Usable at "Balanced"',n.verified_balanced],["admin.library.stTags",'Usable at "Relaxed"',n.verified_tags],["admin.library.stScored","With popularity data",n.scored],["admin.library.stGenres","With genre tags",n.genre_coverage]],s="";for(let[l,d,c]of i)s+=`${g("admin.library.recentLoading","Loading\u2026")}
`;try{let l=await(await R("/beatify/api/library-pool/recent")).json().catch(()=>({}));i(l&&l.songs||[])}catch{n.innerHTML=`${g("admin.library.recentFailed","Could not load recent songs.")}
`}})}function on(e){let t=e.root,a=t.querySelector('[data-lib="backup-btn"]'),n=t.querySelector('[data-lib="restore-btn"]'),i=t.querySelector('[data-lib="restore-file"]'),s=t.querySelector('[data-lib="backup-status"]'),o=(l,d)=>{s&&(s.textContent=l||"",s.classList.toggle("library-backup-status--error",!!d))};a&&a.addEventListener("click",async()=>{a.disabled=!0,o(g("admin.library.backupWorking","Preparing backup\u2026"));try{let l=await R("/beatify/api/library-pool/backup");if(!l.ok){let b="";try{b=(await l.json()).error||""}catch{}o(b||g("admin.library.backupFailed","Backup failed."),!0);return}let d=await l.blob(),u=(l.headers.get("Content-Disposition")||"").match(/filename="?([^"]+)"?/),m=u&&u[1]||"beatify-library-backup.json.gz",f=URL.createObjectURL(d),p=document.createElement("a");p.href=f,p.download=m,document.body.appendChild(p),p.click(),p.remove(),setTimeout(()=>URL.revokeObjectURL(f),3e4);let y=l.headers.get("X-Beatify-Songs");o(g("admin.library.backupDone","Backup downloaded ({n} songs).").replace("{n}",Number(y||0).toLocaleString()))}catch{o(g("admin.library.backupFailed","Backup failed."),!0)}finally{a.disabled=!1}}),n&&i&&(n.addEventListener("click",()=>i.click()),i.addEventListener("change",async()=>{let l=i.files&&i.files[0];if(i.value="",!l)return;let d=window.confirm(g("admin.library.restoreMergeAsk","Merge this backup into your current library?"));if(!(!d&&!window.confirm(g("admin.library.restoreReplaceConfirm","Replace your current scanned library with this backup? Your current pool is saved aside first.")))){n.disabled=!0,o(g("admin.library.restoreWorking","Restoring\u2026"));try{let c=await R("/beatify/api/library-pool/restore?mode="+(d?"merge":"replace"),{method:"POST",body:l}),u={};try{u=await c.json()}catch{}if(!c.ok){o(u.error||g("admin.library.restoreFailed","Restore failed."),!0);return}let m=u.stats||{},f=g("admin.library.restoreDone","Restored: {total} songs ({added} new, {improved} improved).").replace("{total}",Number(m.total||0).toLocaleString()).replace("{added}",Number(m.added||0).toLocaleString()).replace("{improved}",Number(m.improved||0).toLocaleString());u.foreign_source&&(f+=" "+g("admin.library.restoreForeign","Note: this backup came from a different Music Assistant server, so some songs may need a rescan to play.")),o(f),Pe(e)}catch{o(g("admin.library.restoreFailed","Restore failed."),!0)}finally{n.disabled=!1}}}))}function ft(){dt&&clearTimeout(dt),dt=setTimeout(async()=>{try{let e=new URLSearchParams({pop:String(r.libraryPopPercent),genres:(r.libraryGenres||[]).join(","),gate:r.libraryYearGate}),t=await R("/beatify/api/library-pool/preview?"+e.toString());if(!t.ok)return;let a=await t.json(),n=Number(a.eligible??0),i=n<(r.librarySize||30);se.forEach(s=>{let o=s.root.querySelector('[data-lib="match-count"]');if(!o)return;let l=g("admin.library.matchCount","{n} songs match these settings").replace("{n}",n.toLocaleString());i&&(l+=" \u2014 "+g("admin.library.matchLow","not enough for a full game; the rest will come from related genres and the most popular matches")),o.textContent=l,o.classList.toggle("library-match-count--low",i)})}catch{}},350)}function ln(){ft(),lt&&clearTimeout(lt),lt=setTimeout(async()=>{try{await R("/beatify/api/library-settings",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({popularity_percent:r.libraryPopPercent,size:r.librarySize,year_gate:r.libraryYearGate,scan_size:r.libraryScanSize,genres:r.libraryGenres||[]})})}catch{}},400)}async function dn(e){try{let t=await R("/beatify/api/library-settings");if(!t.ok)return;let a=await t.json();Number.isFinite(a.popularity_percent)&&(r.libraryPopPercent=a.popularity_percent),Number.isFinite(a.size)&&(r.librarySize=a.size),typeof a.year_gate=="string"&&a.year_gate&&(r.libraryYearGate=a.year_gate),Number.isFinite(a.scan_size)&&(r.libraryScanSize=a.scan_size),Array.isArray(a.genres)&&(r.libraryGenres=a.genres),se.forEach(n=>{try{n.syncControls()}catch{}}),ft()}catch{}}function he(e){ln();for(let t of se)t!==e&&t.syncControls&&t.syncControls()}async function Pe(e){try{let t=await R("/beatify/api/library-pool");if(!t.ok)return;let a=await t.json();gn(e,a.provider_version),cn(e,a),mn(e,a.refresh),a.building||a.refresh&&a.refresh.running?ut(e):Gt(e)}catch{}}function ut(e){e.pollTimer||(e.pollTimer=setInterval(()=>Pe(e),an))}function Gt(e){e.pollTimer&&(clearInterval(e.pollTimer),e.pollTimer=null)}function V(e,t){let a=e.root.querySelector('[data-lib="status-text"]');a&&(a.textContent=t)}function ct(e,t){let a=e.root.querySelector('[data-lib="toast"]');a&&(a.textContent=t,a.classList.remove("hidden"),setTimeout(()=>a.classList.add("hidden"),6e3))}function cn(e,t){let a=e.root;t.stats&&(fn(e,t),yn(e,t.stats&&t.stats.genres||[]));let n=a.querySelector('[data-lib="spinner"]'),i=a.querySelector('[data-lib="progress"]'),s=a.querySelector('[data-lib="bar"]'),o=a.querySelector('[data-lib="progress-label"]'),l=a.querySelector('[data-lib="scan-btn"]'),d=a.querySelector('[data-lib="scan-btn-label"]');if(t.building){n?.classList.remove("hidden"),i?.classList.remove("hidden"),l&&(l.disabled=!0);let p=t.progress&&t.progress.done||0,y=t.progress&&t.progress.total||0,b=t.progress&&t.progress.phase||"";if(b==="enumerate"||y===0&&p>0){n?.classList.remove("hidden"),i?.classList.remove("hidden"),l&&(l.disabled=!0),s&&(s.style.width="2%"),o&&(o.textContent=g("admin.library.reading","Reading your library\u2026")+` ${p.toLocaleString()} `+g("admin.library.songsFound","songs found")),V(e,g("admin.library.statusScanning","Scanning your library in the background \u2014 you can continue."));return}let h=y>0?Math.round(p/y*100):0;s&&(s.style.width=h+"%");let k=Date.now(),Y=`${b}|${y}`;(e._etaPhase!==Y||p<(e._etaDone||0))&&(e._etaPhase=Y,e._etaT0=k,e._etaD0=p),e._etaDone=p;let xe="",ie=(k-e._etaT0)/1e3,pe=p-e._etaD0;if(y>p&&ie>=20&&pe>=10){let ge=pe/ie,re=Math.round((y-p)/ge),X=Math.floor(re/3600),J=Math.round(re%3600/60);xe=" \xB7 ~"+(X>0?`${X}h ${J}m`:`${J} min`)+" "+g("admin.library.left","left")}o&&(o.textContent=y>0?g("admin.library.scanning","Scanning\u2026")+` ${p}/${y} (${h}%)${xe}`:g("admin.library.scanningStart","Starting scan\u2026")),V(e,g("admin.library.statusScanning","Scanning your library in the background \u2014 you can continue."));return}if(n?.classList.add("hidden"),i?.classList.add("hidden"),l&&(l.disabled=!1),t.error){V(e,g("admin.library.statusError","Last scan failed: ")+t.error),d&&(d.textContent=g("admin.library.scanBtn","Scan library"));return}if(!t.built){V(e,g("admin.library.statusEmpty","Your library hasn\u2019t been scanned yet \u2014 start a scan to play from your own music.")),d&&(d.textContent=g("admin.library.scanBtn","Scan library"));return}let c=t.stats||{},u=c.usable||0,m=c.total||0,f=g("admin.library.statusReady","Library ready: {usable} of {total} songs game-ready (verified years).");V(e,f.replace("{usable}",String(u)).replace("{total}",String(m))),d&&(d.textContent=g("admin.library.rescanBtn","Rescan"))}function un(e){return typeof e=="number"?e.toLocaleString():"\u2014"}function mn(e,t){let a=e.root.querySelector('[data-lib="refresh-row"]'),n=e.root.querySelector('[data-lib="refresh-status"]'),i=e.root.querySelector('[data-lib="refresh-btn"]');if(!a||!t)return;let s=t.backlog||0;if(t.running){a.classList.remove("hidden"),i&&(i.disabled=!0);let o=t.progress||{},l=o.done||0,d=o.total||0,c=d>0?Math.round(l/d*100):0;n&&(n.textContent=d>0?g("admin.library.refreshing","Improving songs\u2026")+` ${l.toLocaleString()}/${d.toLocaleString()} (${c}%)`:g("admin.library.refreshing","Improving songs\u2026"));return}s>0?(a.classList.remove("hidden"),i&&(i.disabled=!1),n&&(n.textContent=g("admin.library.refreshBacklog","{n} songs can be improved").replace("{n}",s.toLocaleString()))):a.classList.add("hidden")}function fn(e,t){let a=e.root.querySelector('[data-lib="stats"]');if(!a)return;let n=t.stats||{},i=[["admin.library.stLibraryTotal","Songs in your library",t.library_total],["admin.library.stPrepared","Prepared (scanned)",n.total],["admin.library.stStrict","Verified years (strict)",n.verified_strict],["admin.library.stBalanced",'Usable at "Balanced"',n.verified_balanced],["admin.library.stTags",'Usable at "Relaxed"',n.verified_tags],["admin.library.stScored","With popularity data",n.scored],["admin.library.stGenres","With genre tags",n.genre_coverage]],s="";for(let[l,d,c]of i)s+=`${E(B("admin.library.fixNoMatches","No matches found. Try correcting the artist or title, or set the year yourself."))}
`;return}e.innerHTML=S.candidates.map((t,a)=>` + `,document.body.appendChild(w),w.addEventListener("click",e=>{(e.target===w||e.target.closest('[data-cd="close"]'))&&pt()}),w.querySelector('[data-cd="search"]').addEventListener("click",()=>Vt()),w.querySelector('[data-cd="save"]').addEventListener("click",()=>Qt({})),document.addEventListener("keydown",e=>{e.key==="Escape"&&w&&!w.classList.contains("hidden")&&pt()}),w)}function H(e,t){let a=w&&w.querySelector('[data-cd="status"]');a&&(a.textContent=e||"",a.classList.toggle("cd-fix-status--error",!!t))}function pt(){w&&w.classList.add("hidden"),S={uri:null,songTitle:"",songArtist:"",current:null,candidates:[],busy:!1}}function Jt(){let e=w.querySelector('[data-cd="current"]'),t=S.current||{},a=t.year_source?B("admin.library.fixSourceLabel","source: {s}").replace("{s}",t.year_source):"",n=`${E(t.artist)} \u2014 ${E(t.title)}`;if(t.album&&(n+=`${E(B("admin.library.fixNoMatches","No matches found. Try correcting the artist or title, or set the year yourself."))}
`;return}e.innerHTML=S.candidates.map((t,a)=>` `).join(""),e.querySelectorAll("[data-cd-pick]").forEach(t=>{t.addEventListener("click",()=>{let a=S.candidates[Number(t.dataset.cdPick)];a&&Qt({year:a.year,title:a.title,artist:a.artist})})})}async function Vt(){if(!S.busy){S.busy=!0,H(B("admin.library.fixSearching","Searching MusicBrainz\u2026"));try{let e=await Yt("/beatify/api/library-pool/lookup",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({uri:S.uri,song_title:S.songTitle,song_artist:S.songArtist,artist:w.querySelector('[data-cd="artist"]').value,title:w.querySelector('[data-cd="title"]').value})}),t=await e.json().catch(()=>({}));if(!e.ok){H(t.error||B("admin.library.fixFailed","Lookup failed."),!0);return}S.current=t.current||S.current,S.candidates=t.candidates||[],Jt(),bn(),H("")}catch{H(B("admin.library.fixFailed","Lookup failed."),!0)}finally{S.busy=!1}}}async function Qt({year:e,title:t,artist:a}){if(S.busy)return;let n=w.querySelector('[data-cd="year"]').value,i={uri:S.uri,song_title:S.songTitle,song_artist:S.songArtist};if(e!=null?i.year=e:n!==""&&(i.year=Number(n)),t&&(i.title=t),a&&(i.artist=a),i.year==null&&!i.title&&!i.artist){H(B("admin.library.fixNothing","Pick a match or enter a year first."),!0);return}S.busy=!0,H(B("admin.library.fixSaving","Saving\u2026"));try{let s=await Yt("/beatify/api/library-pool/correct",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(i)}),o=await s.json().catch(()=>({}));if(!s.ok){H(o.error||B("admin.library.fixFailed","Could not save."),!0);return}H(B("admin.library.fixSaved","Saved \u2014 future games will use your correction.")),setTimeout(pt,1200)}catch{H(B("admin.library.fixFailed","Could not save."),!0)}finally{S.busy=!1}}function hn(e){if(!e||!e.uri&&!e.title)return;let t=gn();S={uri:e.uri||null,songTitle:e.title||"",songArtist:e.artist||"",current:e,candidates:[],busy:!1},t.querySelector('[data-cd="artist"]').value=e.artist||"",t.querySelector('[data-cd="title"]').value=e.title||"",t.querySelector('[data-cd="year"]').value="",t.querySelector('[data-cd="results"]').innerHTML="",Jt(),H(""),t.classList.remove("hidden"),Vt()}typeof window<"u"&&(window.BeatifyCrateDiggerFix={open:hn});var M="beatify_last_player",x="beatify_game_settings",Kt={music_assistant:{icon:"\u{1F3B5}",label:"Music Assistant",recommended:!0},sonos:{icon:"\u{1F50A}",label:"Sonos"},alexa_media:{icon:"\u{1F4E2}",label:"Alexa"},alexa:{icon:"\u{1F4E2}",label:"Alexa"}},$e={decade:{label:"Decade",tags:["1960s","1970s","1980s","1990s","2000s"]},style:{label:"Style",tags:["rock","pop","ballads","electronic","eurodance","yacht-rock","soft-rock","pop-punk","schlager","party","britpop","british-invasion","classic-rock","dance","disco","funk","hip-hop","latin","merengue","motown","r&b","salsa","soul"]},region:{label:"Region",tags:["international","german","dutch","spanish"]},special:{label:"Special",tags:["movies","soundtrack","eurovision","carnival","classics","contest","mixed","one-hit","top-hits"]}};function gt(e,t){let a={playerAdopted:null,settingsSeeded:!1};if(!e||typeof e!="object"||!t)return a;try{let n=e.last_player||null;n&&t.getItem(M)!==n&&(t.setItem(M,n),a.playerAdopted=n),e.game_settings&&!t.getItem(x)&&(t.setItem(x,JSON.stringify(e.game_settings)),a.settingsSeeded=!0)}catch{}return a}function bt(e,t){if(!e)return"\u{1F50A} no speaker";let a=(t||[]).find(n=>n&&n.entity_id===e);return`\u{1F50A} ${a&&a.friendly_name||e}`}var ht=[];function q(e,t){ht.push({modalId:e,close:t})}function vn(e=document){for(let t=ht.length-1;t>=0;t--){let a=ht[t],n=e.getElementById(a.modalId);if(n&&!n.classList.contains("hidden"))return a.close(),!0}return!1}function Xt(e=document){e.addEventListener("keydown",function(t){t.key==="Escape"&&vn(e)})}function Zt(e){e=e||{};let t=e.doc||document,a=e.setTimeout||setTimeout,n=e.clearTimeout||clearTimeout,i=Object.create(null);function s(c,u){c.forEach(function(m){let f=t.getElementById(m);f&&(f.disabled=u)})}function o(c){let u=i[c];u&&(n(u.timer),s(u.buttonIds,!1),delete i[c])}function l(){Object.keys(i).forEach(o)}function d(c,u,m,f){return i[c]||!m()?!1:(s(u,!0),i[c]={buttonIds:u,timer:a(function(){o(c)},f)},!0)}return{run:d,release:o,releaseAll:l,_activeKeys:function(){return Object.keys(i)}}}var ea="beatify-toast-container",wn=4e3;function ta(e,t){try{if(window.BeatifyI18n&&typeof window.BeatifyI18n.t=="function"){var a=window.BeatifyI18n.t(e);if(a&&a!==e)return a}}catch{}return t}function En(){var e=document.getElementById(ea);return e||(e=document.createElement("div"),e.id=ea,e.className="beatify-toast-container",e.setAttribute("aria-live","polite"),e.setAttribute("aria-atomic","false"),document.body.appendChild(e)),e}function le(e,t){if(t=t||{},!e)return null;var a=En(),n=typeof t.duration=="number"?t.duration:wn,i=t.type||"error",s=document.createElement("div");s.className="beatify-toast beatify-toast--"+i,s.setAttribute("role","status");var o=document.createElement("div");if(o.className="beatify-toast-body",t.icon!==null){var l=document.createElement("span");l.className="beatify-toast-icon",l.setAttribute("aria-hidden","true"),l.textContent=t.icon||(i==="success"?"\u2705":i==="info"?"\u2139\uFE0F":"\u26A0\uFE0F"),o.appendChild(l)}var d=document.createElement("span");d.className="beatify-toast-text",d.textContent=String(e),o.appendChild(d),s.appendChild(o);var c=document.createElement("button");if(c.type="button",c.className="beatify-toast-close",c.setAttribute("aria-label",ta("common.close","Dismiss")),c.textContent="\xD7",s.appendChild(c),n>0){var u=document.createElement("div");u.className="beatify-toast-progress",u.style.animationDuration=n+"ms",s.appendChild(u)}a.appendChild(s),typeof requestAnimationFrame=="function"?requestAnimationFrame(function(){s.classList.add("beatify-toast--in")}):s.classList.add("beatify-toast--in");var m=!1,f=null;function p(){m||(m=!0,f&&clearTimeout(f),s.classList.remove("beatify-toast--in"),s.classList.add("beatify-toast--leaving"),setTimeout(function(){s.parentNode&&s.parentNode.removeChild(s)},280))}return c.addEventListener("click",p),n>0&&(f=setTimeout(p,n)),s}function vt(e,t){if(t=t||{},!e)return null;var a=t.anchor;typeof a=="string"&&(a=document.getElementById(a));var n=t.parent;if(typeof n=="string"&&(n=document.getElementById(n)),n||(n=a?a.parentNode:null),!n)return null;var i=t.id||"beatify-banner",s=document.getElementById(i);s&&s.parentNode&&s.parentNode.removeChild(s);var o=document.createElement("div");o.id=i,o.className="beatify-banner beatify-banner--"+(t.type||"error"),o.setAttribute("role","alert");var l=document.createElement("span");l.className="beatify-banner-icon",l.setAttribute("aria-hidden","true"),l.textContent=t.icon||"\u26D4",o.appendChild(l);var d=document.createElement("div");if(d.className="beatify-banner-content",t.title){var c=document.createElement("div");c.className="beatify-banner-title",c.textContent=String(t.title),d.appendChild(c)}var u=document.createElement("div");if(u.className="beatify-banner-text",u.textContent=String(e),d.appendChild(u),t.detail&&String(t.detail)!==String(e)){var m=document.createElement("div");m.className="beatify-banner-detail",m.textContent=String(t.detail),d.appendChild(m)}if(t.action&&t.action.label&&typeof t.action.onClick=="function"){var f=document.createElement("button");f.type="button",f.className="beatify-banner-action",f.textContent=String(t.action.label),f.addEventListener("click",function(){o.parentNode&&o.parentNode.removeChild(o),t.action.onClick()}),d.appendChild(f)}if(o.appendChild(d),t.dismissible!==!1){var p=document.createElement("button");p.type="button",p.className="beatify-banner-close",p.setAttribute("aria-label",ta("common.close","Dismiss")),p.textContent="\xD7",p.addEventListener("click",function(){o.parentNode&&o.parentNode.removeChild(o)}),o.appendChild(p)}return a&&a.parentNode===n?n.insertBefore(o,a):n.appendChild(o),o}function wt(e){var t=document.getElementById(e||"beatify-banner");t&&t.parentNode&&t.parentNode.removeChild(t)}try{window.BeatifyNotify={showToast:le,showBanner:vt,clearBanner:wt}}catch{}var ia=()=>null;function ra(e){ia=typeof e=="function"?e:()=>null}function Re(){try{var e=ia()?.game_id;if(e){var t=localStorage.getItem("beatify_admin_token_"+e);if(t)return t}return localStorage.getItem("beatify_admin_token")}catch{return null}}function de(e,t){try{t&&localStorage.setItem("beatify_admin_token_"+t,e),localStorage.setItem("beatify_admin_token",e),sessionStorage.removeItem("beatify_admin_token")}catch{}}function Et(){var e=Re(),t={"Content-Type":"application/json"};return e&&(t.Authorization="Bearer "+e),t}function sa(e){let t={};return e.forEach(a=>{let n=a.platform||"unknown";t[n]||(t[n]=[]),t[n].push(a)}),t}function I(e,t){let a=typeof window<"u"&&window.BeatifyI18n;if(a&&typeof a.t=="function"){let n=a.t(e);if(typeof n=="string"&&n&&n!==e)return n}return t}var aa={pending:"\u23F3 Pending",ready:"\u2705 Ready",installed:"\u2713 Installed",declined:"\u274C Declined"},_n={pending:"admin.requestStatusPending",ready:"admin.requestStatusReady",installed:"admin.requestStatusInstalled",declined:"admin.requestStatusDeclined"};function oa(e){let t=_n[e.status],a=t?I(t,aa[e.status]):aa[e.status]||e.status,n=z(e.playlist_name||e.name||"Untitled request"),i=e.relative_time||"",s=e.status==="ready"&&e.update_available?`Update to v${z(e.release_version||"")}`:"";return` + `).join(""),e.querySelectorAll("[data-cd-pick]").forEach(t=>{t.addEventListener("click",()=>{let a=S.candidates[Number(t.dataset.cdPick)];a&&Qt({year:a.year,title:a.title,artist:a.artist})})})}async function Vt(){if(!S.busy){S.busy=!0,H(B("admin.library.fixSearching","Searching MusicBrainz\u2026"));try{let e=await Yt("/beatify/api/library-pool/lookup",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({uri:S.uri,song_title:S.songTitle,song_artist:S.songArtist,artist:w.querySelector('[data-cd="artist"]').value,title:w.querySelector('[data-cd="title"]').value})}),t=await e.json().catch(()=>({}));if(!e.ok){H(t.error||B("admin.library.fixFailed","Lookup failed."),!0);return}S.current=t.current||S.current,S.candidates=t.candidates||[],Jt(),hn(),H("")}catch{H(B("admin.library.fixFailed","Lookup failed."),!0)}finally{S.busy=!1}}}async function Qt({year:e,title:t,artist:a}){if(S.busy)return;let n=w.querySelector('[data-cd="year"]').value,i={uri:S.uri,song_title:S.songTitle,song_artist:S.songArtist};if(e!=null?i.year=e:n!==""&&(i.year=Number(n)),t&&(i.title=t),a&&(i.artist=a),i.year==null&&!i.title&&!i.artist){H(B("admin.library.fixNothing","Pick a match or enter a year first."),!0);return}S.busy=!0,H(B("admin.library.fixSaving","Saving\u2026"));try{let s=await Yt("/beatify/api/library-pool/correct",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(i)}),o=await s.json().catch(()=>({}));if(!s.ok){H(o.error||B("admin.library.fixFailed","Could not save."),!0);return}H(B("admin.library.fixSaved","Saved \u2014 future games will use your correction.")),setTimeout(pt,1200)}catch{H(B("admin.library.fixFailed","Could not save."),!0)}finally{S.busy=!1}}function vn(e){if(!e||!e.uri&&!e.title)return;let t=bn();S={uri:e.uri||null,songTitle:e.title||"",songArtist:e.artist||"",current:e,candidates:[],busy:!1},t.querySelector('[data-cd="artist"]').value=e.artist||"",t.querySelector('[data-cd="title"]').value=e.title||"",t.querySelector('[data-cd="year"]').value="",t.querySelector('[data-cd="results"]').innerHTML="",Jt(),H(""),t.classList.remove("hidden"),Vt()}typeof window<"u"&&(window.BeatifyCrateDiggerFix={open:vn});var M="beatify_last_player",x="beatify_game_settings",Kt={music_assistant:{icon:"\u{1F3B5}",label:"Music Assistant",recommended:!0},sonos:{icon:"\u{1F50A}",label:"Sonos"},alexa_media:{icon:"\u{1F4E2}",label:"Alexa"},alexa:{icon:"\u{1F4E2}",label:"Alexa"}},$e={decade:{label:"Decade",tags:["1960s","1970s","1980s","1990s","2000s"]},style:{label:"Style",tags:["rock","pop","ballads","electronic","eurodance","yacht-rock","soft-rock","pop-punk","schlager","party","britpop","british-invasion","classic-rock","dance","disco","funk","hip-hop","latin","merengue","motown","r&b","salsa","soul"]},region:{label:"Region",tags:["international","german","dutch","spanish"]},special:{label:"Special",tags:["movies","soundtrack","eurovision","carnival","classics","contest","mixed","one-hit","top-hits"]}};function gt(e,t){let a={playerAdopted:null,settingsSeeded:!1};if(!e||typeof e!="object"||!t)return a;try{let n=e.last_player||null;n&&t.getItem(M)!==n&&(t.setItem(M,n),a.playerAdopted=n),e.game_settings&&!t.getItem(x)&&(t.setItem(x,JSON.stringify(e.game_settings)),a.settingsSeeded=!0)}catch{}return a}function bt(e,t){if(!e)return"\u{1F50A} no speaker";let a=(t||[]).find(n=>n&&n.entity_id===e);return`\u{1F50A} ${a&&a.friendly_name||e}`}var ht=[];function q(e,t){ht.push({modalId:e,close:t})}function wn(e=document){for(let t=ht.length-1;t>=0;t--){let a=ht[t],n=e.getElementById(a.modalId);if(n&&!n.classList.contains("hidden"))return a.close(),!0}return!1}function Xt(e=document){e.addEventListener("keydown",function(t){t.key==="Escape"&&wn(e)})}function Zt(e){e=e||{};let t=e.doc||document,a=e.setTimeout||setTimeout,n=e.clearTimeout||clearTimeout,i=Object.create(null);function s(c,u){c.forEach(function(m){let f=t.getElementById(m);f&&(f.disabled=u)})}function o(c){let u=i[c];u&&(n(u.timer),s(u.buttonIds,!1),delete i[c])}function l(){Object.keys(i).forEach(o)}function d(c,u,m,f){return i[c]||!m()?!1:(s(u,!0),i[c]={buttonIds:u,timer:a(function(){o(c)},f)},!0)}return{run:d,release:o,releaseAll:l,_activeKeys:function(){return Object.keys(i)}}}var ea="beatify-toast-container",En=4e3;function ta(e,t){try{if(window.BeatifyI18n&&typeof window.BeatifyI18n.t=="function"){var a=window.BeatifyI18n.t(e);if(a&&a!==e)return a}}catch{}return t}function _n(){var e=document.getElementById(ea);return e||(e=document.createElement("div"),e.id=ea,e.className="beatify-toast-container",e.setAttribute("aria-live","polite"),e.setAttribute("aria-atomic","false"),document.body.appendChild(e)),e}function le(e,t){if(t=t||{},!e)return null;var a=_n(),n=typeof t.duration=="number"?t.duration:En,i=t.type||"error",s=document.createElement("div");s.className="beatify-toast beatify-toast--"+i,s.setAttribute("role","status");var o=document.createElement("div");if(o.className="beatify-toast-body",t.icon!==null){var l=document.createElement("span");l.className="beatify-toast-icon",l.setAttribute("aria-hidden","true"),l.textContent=t.icon||(i==="success"?"\u2705":i==="info"?"\u2139\uFE0F":"\u26A0\uFE0F"),o.appendChild(l)}var d=document.createElement("span");d.className="beatify-toast-text",d.textContent=String(e),o.appendChild(d),s.appendChild(o);var c=document.createElement("button");if(c.type="button",c.className="beatify-toast-close",c.setAttribute("aria-label",ta("common.close","Dismiss")),c.textContent="\xD7",s.appendChild(c),n>0){var u=document.createElement("div");u.className="beatify-toast-progress",u.style.animationDuration=n+"ms",s.appendChild(u)}a.appendChild(s),typeof requestAnimationFrame=="function"?requestAnimationFrame(function(){s.classList.add("beatify-toast--in")}):s.classList.add("beatify-toast--in");var m=!1,f=null;function p(){m||(m=!0,f&&clearTimeout(f),s.classList.remove("beatify-toast--in"),s.classList.add("beatify-toast--leaving"),setTimeout(function(){s.parentNode&&s.parentNode.removeChild(s)},280))}return c.addEventListener("click",p),n>0&&(f=setTimeout(p,n)),s}function vt(e,t){if(t=t||{},!e)return null;var a=t.anchor;typeof a=="string"&&(a=document.getElementById(a));var n=t.parent;if(typeof n=="string"&&(n=document.getElementById(n)),n||(n=a?a.parentNode:null),!n)return null;var i=t.id||"beatify-banner",s=document.getElementById(i);s&&s.parentNode&&s.parentNode.removeChild(s);var o=document.createElement("div");o.id=i,o.className="beatify-banner beatify-banner--"+(t.type||"error"),o.setAttribute("role","alert");var l=document.createElement("span");l.className="beatify-banner-icon",l.setAttribute("aria-hidden","true"),l.textContent=t.icon||"\u26D4",o.appendChild(l);var d=document.createElement("div");if(d.className="beatify-banner-content",t.title){var c=document.createElement("div");c.className="beatify-banner-title",c.textContent=String(t.title),d.appendChild(c)}var u=document.createElement("div");if(u.className="beatify-banner-text",u.textContent=String(e),d.appendChild(u),t.detail&&String(t.detail)!==String(e)){var m=document.createElement("div");m.className="beatify-banner-detail",m.textContent=String(t.detail),d.appendChild(m)}if(t.action&&t.action.label&&typeof t.action.onClick=="function"){var f=document.createElement("button");f.type="button",f.className="beatify-banner-action",f.textContent=String(t.action.label),f.addEventListener("click",function(){o.parentNode&&o.parentNode.removeChild(o),t.action.onClick()}),d.appendChild(f)}if(o.appendChild(d),t.dismissible!==!1){var p=document.createElement("button");p.type="button",p.className="beatify-banner-close",p.setAttribute("aria-label",ta("common.close","Dismiss")),p.textContent="\xD7",p.addEventListener("click",function(){o.parentNode&&o.parentNode.removeChild(o)}),o.appendChild(p)}return a&&a.parentNode===n?n.insertBefore(o,a):n.appendChild(o),o}function wt(e){var t=document.getElementById(e||"beatify-banner");t&&t.parentNode&&t.parentNode.removeChild(t)}try{window.BeatifyNotify={showToast:le,showBanner:vt,clearBanner:wt}}catch{}var ia=()=>null;function ra(e){ia=typeof e=="function"?e:()=>null}function Re(){try{var e=ia()?.game_id;if(e){var t=localStorage.getItem("beatify_admin_token_"+e);if(t)return t}return localStorage.getItem("beatify_admin_token")}catch{return null}}function de(e,t){try{t&&localStorage.setItem("beatify_admin_token_"+t,e),localStorage.setItem("beatify_admin_token",e),sessionStorage.removeItem("beatify_admin_token")}catch{}}function Et(){var e=Re(),t={"Content-Type":"application/json"};return e&&(t.Authorization="Bearer "+e),t}function sa(e){let t={};return e.forEach(a=>{let n=a.platform||"unknown";t[n]||(t[n]=[]),t[n].push(a)}),t}function I(e,t){let a=typeof window<"u"&&window.BeatifyI18n;if(a&&typeof a.t=="function"){let n=a.t(e);if(typeof n=="string"&&n&&n!==e)return n}return t}var aa={pending:"\u23F3 Pending",ready:"\u2705 Ready",installed:"\u2713 Installed",declined:"\u274C Declined"},Sn={pending:"admin.requestStatusPending",ready:"admin.requestStatusReady",installed:"admin.requestStatusInstalled",declined:"admin.requestStatusDeclined"};function oa(e){let t=Sn[e.status],a=t?I(t,aa[e.status]):aa[e.status]||e.status,n=z(e.playlist_name||e.name||"Untitled request"),i=e.relative_time||"",s=e.status==="ready"&&e.update_available?`Update to v${z(e.release_version||"")}`:"";return`${I("admin.noPlaylistsFoundHint","No playlists found. Add playlist JSON files to:")}
${D.escapeHtml(t)}
${I("admin.noPlaylistsMatchFilter","No playlists match the selected filter.")}
${te.escapeHtml(A("admin.mixNoTags","No tagged playlists found to mix from."))}
`),e.innerHTML=n,e.querySelectorAll(".mix-chip").forEach(i=>{i.addEventListener("click",()=>jn(i))}),Ct()}function jn(e){let t=e.dataset.mixTag;L.selectedTags.has(t)?(L.selectedTags.delete(t),e.classList.remove("active"),e.setAttribute("aria-pressed","false")):(L.selectedTags.add(t),e.classList.add("active"),e.setAttribute("aria-pressed","true")),zn()}function Fn(e){L.targetCount=e,document.querySelectorAll(".mix-seg").forEach(t=>{let a=parseInt(t.dataset.mixCount,10)===e;t.classList.toggle("active",a),t.setAttribute("aria-checked",a?"true":"false")}),Ct()}function Ct(){let e=document.getElementById("mix-preview-text"),t=document.getElementById("mix-start"),a=document.getElementById("mix-preview-btn");if(!e)return;Un();let n=c=>{t&&(t.disabled=!c),a&&(a.disabled=!c)},i=L.selectedTags;if(i.size===0){e.textContent=A("admin.mixPreviewEmpty","Select tags to preview your mix."),n(!1);return}let s=0,o=0;if((r.playlistData||[]).forEach(c=>{!c.is_valid||!(c.tags||[]).some(m=>i.has(m))||(s+=1,o+=Jn(c))}),s===0){e.textContent=A("admin.mixPreviewNone","No playlists match these tags."),n(!1);return}let l=Math.min(o,L.targetCount),d=A("admin.mixPreview","\u2248 {songs} songs from {playlists} playlists \xB7 duplicates removed");e.textContent=d.replace("{songs}",String(l)).replace("{playlists}",String(s)),n(!0)}function zn(){clearTimeout(L._previewTimer),L._previewTimer=setTimeout(Ct,60)}function Gn(e){let t=Array.isArray(e)?e:[];if(t.length===0)return`${_e(A("admin.mixTracklistEmpty","No tracks to preview."))}
`;let a=A("admin.mixTracklistHeading","{count} tracks in this mix").replace("{count}",String(t.length)),n=t.map(i=>{let s=_e(i.title||""),o=_e(i.artist||""),l=i.year?` ${_e(String(i.year))}`:"";return`${_e(a)}
${te.escapeHtml(A("admin.mixNoTags","No tagged playlists found to mix from."))}
`),e.innerHTML=n,e.querySelectorAll(".mix-chip").forEach(i=>{i.addEventListener("click",()=>jn(i))}),Ct()}function jn(e){let t=e.dataset.mixTag;L.selectedTags.has(t)?(L.selectedTags.delete(t),e.classList.remove("active"),e.setAttribute("aria-pressed","false")):(L.selectedTags.add(t),e.classList.add("active"),e.setAttribute("aria-pressed","true")),Gn()}function zn(e){L.targetCount=e,document.querySelectorAll(".mix-seg").forEach(t=>{let a=parseInt(t.dataset.mixCount,10)===e;t.classList.toggle("active",a),t.setAttribute("aria-checked",a?"true":"false")}),Ct()}function Ct(){let e=document.getElementById("mix-preview-text"),t=document.getElementById("mix-start"),a=document.getElementById("mix-preview-btn");if(!e)return;Yn();let n=c=>{t&&(t.disabled=!c),a&&(a.disabled=!c)},i=L.selectedTags;if(i.size===0){e.textContent=A("admin.mixPreviewEmpty","Select tags to preview your mix."),n(!1);return}let s=0,o=0;if((r.playlistData||[]).forEach(c=>{!c.is_valid||!(c.tags||[]).some(m=>i.has(m))||(s+=1,o+=Vn(c))}),s===0){e.textContent=A("admin.mixPreviewNone","No playlists match these tags."),n(!1);return}let l=Math.min(o,L.targetCount),d=A("admin.mixPreview","\u2248 {songs} songs from {playlists} playlists \xB7 duplicates removed");e.textContent=d.replace("{songs}",String(l)).replace("{playlists}",String(s)),n(!0)}function Gn(){clearTimeout(L._previewTimer),L._previewTimer=setTimeout(Ct,60)}function Wn(e){let t=Array.isArray(e)?e:[];if(t.length===0)return`${_e(A("admin.mixTracklistEmpty","No tracks to preview."))}
`;let a=A("admin.mixTracklistHeading","{count} tracks in this mix").replace("{count}",String(t.length)),n=t.map(i=>{let s=_e(i.title||""),o=_e(i.artist||""),l=i.year?` ${_e(String(i.year))}`:"";return`${_e(a)}
\u26A0\uFE0F ${$.escapeHtml(n.warning)}
`;n.caveat&&(i+=`\u2139\uFE0F ${$.escapeHtml(n.caveat)}
`),t.innerHTML=i,t.classList.remove("hidden")}else t.classList.add("hidden")}function O(e,t){document.querySelectorAll(e).forEach(a=>{let n=t(a);a.classList.toggle("chip--active",n),a.setAttribute("aria-pressed",n?"true":"false")})}function Ca(){document.querySelectorAll(".chip[data-lang]").forEach(e=>{e.addEventListener("click",async function(){let t=this.dataset.lang;O(".chip[data-lang]",a=>a===this),r.selectedLanguage=t,window.BeatifyI18n&&(await BeatifyI18n.setLanguage(t),BeatifyI18n.initPageTranslations()),T(),C()})}),document.querySelectorAll(".chip[data-duration]").forEach(e=>{e.addEventListener("click",function(){let t=parseInt(this.dataset.duration,10);O(".chip[data-duration]",a=>a===this),r.selectedDuration=t,T(),C()})}),document.querySelectorAll(".chip[data-reveal-advance]").forEach(e=>{e.addEventListener("click",function(){r.revealAutoAdvance=parseInt(this.dataset.revealAdvance,10)||0,O(".chip[data-reveal-advance]",t=>t===this),C()})}),document.querySelectorAll(".chip[data-difficulty]").forEach(e=>{e.addEventListener("click",function(){let t=this.dataset.difficulty;O(".chip[data-difficulty]",a=>a===this),r.selectedDifficulty=t,T(),C()})}),document.getElementById("artist-challenge-toggle")?.addEventListener("change",function(){r.artistChallengeEnabled=this.checked,T(),C()}),document.getElementById("movie-quiz-toggle")?.addEventListener("change",function(){r.movieQuizEnabled=this.checked,T(),C()}),document.getElementById("intro-mode-toggle")?.addEventListener("change",function(){r.introModeEnabled=this.checked,T(),C()}),document.getElementById("closest-wins-toggle")?.addEventListener("change",function(){r.closestWinsModeEnabled=this.checked,T(),C()}),document.getElementById("rampup-order-toggle")?.addEventListener("change",function(){r.rampupOrderEnabled=this.checked,T(),C()}),document.getElementById("finale-double-toggle")?.addEventListener("change",function(){r.finaleDoubleEnabled=this.checked,T(),C()}),document.getElementById("finale-tiebreaker-toggle")?.addEventListener("change",function(){r.finaleTiebreakerEnabled=this.checked,T(),C()}),document.getElementById("comeback-token-toggle")?.addEventListener("change",function(){r.comebackTokenEnabled=this.checked,T(),C()}),document.getElementById("difficulty-bet-scaling-toggle")?.addEventListener("change",function(){r.difficultyBetScalingEnabled=this.checked,T(),C()}),document.getElementById("sabotage-toggle")?.addEventListener("change",function(){r.sabotageEnabled=this.checked,T(),C()}),document.getElementById("title-artist-mode-toggle")?.addEventListener("change",function(){r.titleArtistModeEnabled=this.checked,Ta(),T(),C()}),document.querySelectorAll(".chip[data-provider]").forEach(e=>{e.addEventListener("click",function(){if(this.disabled||this.classList.contains("chip--disabled"))return;let t=this.dataset.provider;O(".chip[data-provider]",a=>a===this),r.selectedProvider=t,yt(),T(),C(),r.playlistData.length>0&&ue(r.playlistData,"",!0)})}),Wt(C)}async function Pt(){try{let e=localStorage.getItem(x);if(e){let t=JSON.parse(e);try{typeof t.libraryYearGate=="string"&&(r.libraryYearGate=t.libraryYearGate),Number.isFinite(t.libraryScanSize)&&(r.libraryScanSize=t.libraryScanSize),Number.isFinite(t.libraryPopPercent)&&(r.libraryPopPercent=t.libraryPopPercent),Array.isArray(t.libraryGenres)&&(r.libraryGenres=t.libraryGenres),Ut()}catch{}t.language&&(r.selectedLanguage=t.language,O(".chip[data-lang]",n=>n.dataset.lang===t.language),window.BeatifyI18n&&(await BeatifyI18n.setLanguage(t.language),BeatifyI18n.initPageTranslations()));let a=St(t.duration);if(a!==null&&(r.selectedDuration=a,O(".chip[data-duration]",n=>parseInt(n.dataset.duration,10)===a)),typeof t.revealAutoAdvance=="number"&&(r.revealAutoAdvance=t.revealAutoAdvance,O(".chip[data-reveal-advance]",n=>parseInt(n.dataset.revealAdvance,10)===t.revealAutoAdvance)),t.difficulty&&(r.selectedDifficulty=t.difficulty,O(".chip[data-difficulty]",n=>n.dataset.difficulty===t.difficulty)),typeof t.artistChallenge=="boolean"){r.artistChallengeEnabled=t.artistChallenge;let n=document.getElementById("artist-challenge-toggle");n&&(n.checked=t.artistChallenge)}if(typeof t.movieQuiz=="boolean"){r.movieQuizEnabled=t.movieQuiz;let n=document.getElementById("movie-quiz-toggle");n&&(n.checked=t.movieQuiz)}if(typeof t.introMode=="boolean"){r.introModeEnabled=t.introMode;let n=document.getElementById("intro-mode-toggle");n&&(n.checked=t.introMode)}if(typeof t.closestWinsMode=="boolean"){r.closestWinsModeEnabled=t.closestWinsMode;let n=document.getElementById("closest-wins-toggle");n&&(n.checked=t.closestWinsMode)}if(typeof t.rampupOrder=="boolean"){r.rampupOrderEnabled=t.rampupOrder;let n=document.getElementById("rampup-order-toggle");n&&(n.checked=t.rampupOrder)}if(typeof t.finaleDouble=="boolean"){r.finaleDoubleEnabled=t.finaleDouble;let n=document.getElementById("finale-double-toggle");n&&(n.checked=t.finaleDouble)}if(typeof t.finaleTiebreaker=="boolean"){r.finaleTiebreakerEnabled=t.finaleTiebreaker;let n=document.getElementById("finale-tiebreaker-toggle");n&&(n.checked=t.finaleTiebreaker)}if(typeof t.comebackToken=="boolean"){r.comebackTokenEnabled=t.comebackToken;let n=document.getElementById("comeback-token-toggle");n&&(n.checked=t.comebackToken)}if(typeof t.difficultyBetScaling=="boolean"){r.difficultyBetScalingEnabled=t.difficultyBetScaling;let n=document.getElementById("difficulty-bet-scaling-toggle");n&&(n.checked=t.difficultyBetScaling)}if(typeof t.sabotage=="boolean"){r.sabotageEnabled=t.sabotage;let n=document.getElementById("sabotage-toggle");n&&(n.checked=t.sabotage)}if(typeof t.titleArtistMode=="boolean"){r.titleArtistModeEnabled=t.titleArtistMode;let n=document.getElementById("title-artist-mode-toggle");n&&(n.checked=t.titleArtistMode)}Ta(),t.provider&&(r.selectedProvider=t.provider,O(".chip[data-provider]",n=>n.dataset.provider===t.provider))}}catch(e){console.warn("Failed to load saved settings:",e)}T()}function C(){try{window.BeatifyAuth?.fetch("/beatify/api/game/update-lobby",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({media_player:(r.selectedMediaPlayer||{}).entityId||null,tts:window._ttsConfig?window._ttsConfig():null,party_lights:window._partyLightsConfig?window._partyLightsConfig():null})})}catch{}try{let e={language:r.selectedLanguage,duration:r.selectedDuration,revealAutoAdvance:r.revealAutoAdvance,difficulty:r.selectedDifficulty,artistChallenge:r.artistChallengeEnabled,movieQuiz:r.movieQuizEnabled,introMode:r.introModeEnabled,closestWinsMode:r.closestWinsModeEnabled,titleArtistMode:r.titleArtistModeEnabled,rampupOrder:r.rampupOrderEnabled,finaleDouble:r.finaleDoubleEnabled,finaleTiebreaker:r.finaleTiebreakerEnabled,comebackToken:r.comebackTokenEnabled,difficultyBetScaling:r.difficultyBetScalingEnabled,sabotage:r.sabotageEnabled,provider:r.selectedProvider};localStorage.setItem(x,JSON.stringify(e))}catch(e){console.warn("Failed to save settings:",e)}}function T(){let e=document.getElementById("game-settings-summary");if(!e)return;let t={easy:"Easy",normal:"Normal",hard:"Hard"},a={en:"EN",de:"DE",es:"ES"},n=!r.titleArtistModeEnabled,i=n&&r.artistChallengeEnabled?" \u2022 \u{1F3A4}":"",s=n&&r.movieQuizEnabled?" \u2022 \u{1F3AC}":"",o=n&&r.introModeEnabled?" \u2022 \u26A1":"",l=n&&r.closestWinsModeEnabled?" \u2022 \u{1F3AF}":"",d=r.titleArtistModeEnabled?" \u2022 \u{1F3B5}":"",c=r.rampupOrderEnabled?" \u2022 \u{1F4C8}":"",u=r.finaleDoubleEnabled?" \u2022 \u2728":"",m=r.finaleTiebreakerEnabled?" \u2022 \u2694\uFE0F":"",f=r.comebackTokenEnabled?" \u2022 \u{1F381}":"",p=n&&r.difficultyBetScalingEnabled?" \u2022 \u{1F3B2}":"",y=r.sabotageEnabled?" \u2022 \u{1F4A3}":"";e.textContent=`${t[r.selectedDifficulty]||"Normal"} \u2022 ${r.selectedDuration}s \u2022 ${a[r.selectedLanguage]||"EN"}${d}${i}${s}${o}${l}${c}${u}${m}${f}${p}${y}`}function Ta(){var e=["artist-challenge-toggle","closest-wins-toggle"];e.forEach(function(i){var s=document.getElementById(i);if(s){var o=s.closest(".setting-group");o&&o.classList.toggle("hidden",r.titleArtistModeEnabled),s.disabled=r.titleArtistModeEnabled}});var t=document.getElementById("admin-difficulty-row");t&&t.classList.toggle("hidden",r.titleArtistModeEnabled);var a=document.getElementById("admin-difficulty-hint");a&&a.classList.toggle("hidden",r.titleArtistModeEnabled);var n=document.getElementById("admin-difficulty-ta-summary");n&&n.classList.toggle("hidden",!r.titleArtistModeEnabled)}function Be(){if(r.cachedQRUrl){var e=document.getElementById("qr-modal"),t=document.getElementById("qr-modal-code");if(!(!e||!t)){t.innerHTML="",typeof QRCode<"u"&&new QRCode(t,{text:r.cachedQRUrl,width:280,height:280,colorDark:"#000000",colorLight:"#ffffff",correctLevel:QRCode.CorrectLevel.M}),e.classList.remove("hidden"),document.body.style.overflow="hidden";var a=document.getElementById("qr-modal-close");a&&a.focus()}}}function Mt(){var e=document.getElementById("qr-modal");e&&(e.classList.add("hidden"),document.body.style.overflow="")}function Pa(){var e=document.getElementById("qr-modal"),t=e?e.querySelector(".qr-modal-backdrop"):null,a=document.getElementById("qr-modal-close");t&&t.addEventListener("click",Mt),a&&a.addEventListener("click",Mt),q("qr-modal",Mt)}var ii=["beatify_wizard_state","beatify_last_player","beatify_game_settings","beatify_party_lights","beatify_tts","beatify_admin_token","beatify_admin_token_game_id"];function ri(){document.getElementById("reset-modal")?.classList.remove("hidden")}function Ge(){document.getElementById("reset-modal")?.classList.add("hidden")}var si=4e3;function Ma(e,t,a,n=setTimeout){return Promise.race([Promise.resolve(e).catch(i=>{console.warn(`[Reset] ${a} failed (continuing):`,i)}),new Promise(i=>{n(()=>{console.warn(`[Reset] ${a} did not settle in ${t}ms (continuing)`),i()},t)})])}async function oi({authFetch:e,storage:t,serviceWorker:a,navigate:n,timeoutMs:i=si,timer:s=setTimeout}){try{await Ma(e("/beatify/api/force-reset",{method:"POST"}),i,"force-reset POST",s);try{ii.forEach(o=>t.removeItem(o))}catch(o){console.warn("[Reset] localStorage clear failed:",o)}a&&await Ma(a.getRegistrations().then(o=>Promise.all(o.map(l=>l.unregister()))),i,"SW unregister",s)}finally{n()}}function li(){return Ge(),oi({authFetch:(e,t)=>BeatifyAuth.fetch(e,t),storage:localStorage,serviceWorker:"serviceWorker"in navigator?navigator.serviceWorker:null,navigate:()=>window.location.replace("/beatify/admin")})}function $a(){document.getElementById("reset-btn")?.addEventListener("click",ri),document.getElementById("reset-confirm-btn")?.addEventListener("click",li),document.getElementById("reset-cancel-btn")?.addEventListener("click",Ge),document.querySelector("#reset-modal .modal-backdrop")?.addEventListener("click",Ge),q("reset-modal",Ge)}ra(()=>r.currentGame);window.escapeHtml=z;window.groupPlayersByPlatform=sa;window.buildRequestRowHtml=oa;window._getAdminToken=Re;window._setAdminToken=de;window._adminHeaders=Et;window.clearPlaylistFilters=Ba;var fe=null,me=null,Le=!1;function di(){if(me)return me;if(typeof window<"u"&&typeof window.NoSleep=="function")try{me=new window.NoSleep}catch(e){console.debug("[BeatifyWakeLock] NoSleep instantiation failed:",e)}return me}async function ne(){if("wakeLock"in navigator)try{fe=await navigator.wakeLock.request("screen"),fe.addEventListener("release",function(){console.debug("[BeatifyWakeLock] Layer 1 released by browser"),fe=null}),console.debug("[BeatifyWakeLock] Layer 1 (native wakeLock) acquired");return}catch(a){console.debug("[BeatifyWakeLock] Layer 1 request failed:",a,"\u2014 trying Layer 2")}else console.debug("[BeatifyWakeLock] Layer 1 unavailable \u2014 using Layer 2");var e=di();if(!e){console.debug("[BeatifyWakeLock] Layer 2 unavailable (NoSleep vendor not loaded)");return}if(!Le)try{var t=e.enable();Le=!0,t&&typeof t.catch=="function"&&t.catch(function(a){console.debug("[BeatifyWakeLock] Layer 2 enable promise rejected:",a)}),console.debug("[BeatifyWakeLock] Layer 2 (NoSleep video) enabled")}catch(a){console.debug("[BeatifyWakeLock] Layer 2 enable failed:",a),Le=!1}}function ja(){if(fe){try{fe.release()}catch{}fe=null}if(Le&&me){try{me.disable()}catch{}Le=!1,console.debug("[BeatifyWakeLock] Layer 2 (NoSleep) disabled")}}document.addEventListener("visibilitychange",function(){document.visibilityState==="visible"&&r.currentGame&&r.currentGame.phase!=="END"&&(ne(),P()||(ya(),G()))});var Ve=null,Nt=0,$t=null,N=null;ma({debug:(...e)=>Rt(...e),getCurrentGame:()=>r.currentGame,getCurrentView:()=>r.currentView,getAdminPlayerName:()=>r.adminPlayerName,setIsPlaying:e=>{r.isPlaying=e},setAdminPlayerName:e=>{r.adminPlayerName=e},setAdminSessionId:e=>{r.adminSessionId=e},handleAdminStateUpdate:e=>Ua(e),startLobbyPolling:()=>Ga(),stopLobbyPolling:()=>tt(),showError:e=>U(e),showSpeakerSetupError:e=>Ei(e),resetHomeStartButton:()=>fi()});var W=null,Xe=null,ci=["media-players","music-service","playlists","game-settings","admin-actions","party-lights","tts-settings"],at=window.BeatifyUtils||{},Rt=at.debug||function(){};document.addEventListener("DOMContentLoaded",async()=>{await BeatifyAuth.init({requireAuth:!0}),await at.waitForI18n()?(await BeatifyI18n.init(),BeatifyI18n.initPageTranslations(),r.selectedLanguage=BeatifyI18n.getLanguage()):console.error("[Beatify] BeatifyI18n module failed to load - UI will use fallback text"),document.querySelectorAll(".chip[data-lang]").forEach(t=>{t.classList.toggle("chip--active",t.dataset.lang===r.selectedLanguage)});try{let t=await fetch("/beatify/api/status");if(t.ok){let a=await t.json();r.setupComplete=a.setup_complete===!0,gt(a.saved_setup,globalThis.localStorage)}}catch(t){console.warn("[Beatify] setup seed before wizard failed:",t)}if(window.BeatifyWizard&&typeof window.BeatifyWizard.init=="function")try{await window.BeatifyWizard.init()}catch(t){console.warn("[Beatify] wizard init failed:",t)}window.loadStatus=ye,window.loadSavedSettings=Pt,window.BeatifyHome={enter(){document.body.classList.add("home-mode");let t=document.getElementById("home-view");t&&t.classList.remove("hidden"),this.refresh(),this.isConfigured()?(this.setMode("configured"),this.hydrateFromStorage(),r.currentGame&&r.currentGame.phase==="LOBBY"&&r.currentGame.join_url?this.renderSession(r.currentGame):this.startSession()):this.setMode("setup")},hydrateFromStorage(){try{let t=localStorage.getItem(M);if(t&&(!r.selectedMediaPlayer||!r.selectedMediaPlayer.entityId)){let n=document.querySelector(`.media-player-radio[data-entity-id="${CSS.escape(t)}"]`);n?(n.checked=!0,Se(n,!0)):r.selectedMediaPlayer={entityId:t,state:"unknown",platform:"unknown"}}let a=localStorage.getItem(x);if(a){let n=JSON.parse(a);da(r,n);let i=Array.isArray(n.selectedPlaylists)?n.selectedPlaylists.map(s=>typeof s=="string"?s:s.path).filter(Boolean):[];i.length&&r.selectedPlaylists.length===0&&(r.selectedPlaylists=i.map(s=>{let o=(r.playlistData||[]).find(l=>l.path===s);return{path:s,songCount:o&&(o.song_count||o.songCount)||0}}))}}catch(t){console.warn("[Beatify] hydrateFromStorage failed:",t)}},setMode(t){let a=t==="configured";if(document.getElementById("home-hero-configured")?.classList.toggle("hidden",!a),document.getElementById("home-hero-setup")?.classList.toggle("hidden",a),document.getElementById("home-edit-setup")?.classList.toggle("hidden",!a),document.getElementById("home-start-game")?.classList.toggle("hidden",!a),document.getElementById("home-start-setup")?.classList.toggle("hidden",a),!a){document.getElementById("home-dashboard-url")?.classList.add("hidden"),document.getElementById("home-join-player")?.classList.add("hidden"),document.getElementById("home-end-game")?.classList.add("hidden");let n=document.getElementById("home-meta");n&&(n.textContent="");let i=document.getElementById("home-players");i&&(i.innerHTML="")}},async startSession(){let t=document.getElementById("home-qr-loading");t&&t.classList.remove("hidden");try{await We()}catch(a){console.warn("[Beatify] Home auto-start failed:",a)}},renderSession(t){let a=document.getElementById("home-qr-loading");a&&a.classList.add("hidden");let n=document.getElementById("home-qr-code");n&&t.join_url&&typeof QRCode<"u"&&(n.dataset.url!==t.join_url&&(n.innerHTML="",new QRCode(n,{text:t.join_url,width:180,height:180,colorDark:"#0a0a12",colorLight:"#ffffff",correctLevel:QRCode.CorrectLevel.M}),n.dataset.url=t.join_url,n.setAttribute("role","button"),n.setAttribute("tabindex","0"),n.style.cursor="pointer"),r.cachedQRUrl=t.join_url);let i=document.getElementById("home-join-url");i&&t.join_url&&(i.textContent=t.join_url);let s=document.getElementById("home-dashboard-url");if(s){let m=t.dashboard_url;!m&&t.join_url&&(m=t.join_url.split("/beatify/play")[0]+"/beatify/dashboard"),m?(s.href=m,s.classList.remove("hidden")):s.classList.add("hidden")}let o=t.phase==="LOBBY"&&!!t.join_url,l=t.phase&&t.phase!=="LOBBY"&&t.phase!=="END";document.getElementById("home-end-game")?.classList.toggle("hidden",!l);let d=(t.players||[]).some(m=>m.is_admin),c=o&&!d&&!r.isPlaying;document.getElementById("home-join-player")?.classList.toggle("hidden",!c);let u=document.getElementById("home-start-game");u&&(u.classList.toggle("btn-primary",!c),u.classList.toggle("btn-ghost",c)),this.renderPlayers(t.players||[])},renderPlayers(t){let a=document.getElementById("home-players");if(!a)return;if(!t.length){let d=window.BeatifyI18n&&BeatifyI18n.t("admin.home.waitingForGuests")||"Waiting for guests\u2026";a.innerHTML='\u26A0\uFE0F ${$.escapeHtml(n.warning)}
`;n.caveat&&(i+=`\u2139\uFE0F ${$.escapeHtml(n.caveat)}
`),t.innerHTML=i,t.classList.remove("hidden")}else t.classList.add("hidden")}function O(e,t){document.querySelectorAll(e).forEach(a=>{let n=t(a);a.classList.toggle("chip--active",n),a.setAttribute("aria-pressed",n?"true":"false")})}function Ta(){document.querySelectorAll(".chip[data-lang]").forEach(e=>{e.addEventListener("click",async function(){let t=this.dataset.lang;O(".chip[data-lang]",a=>a===this),r.selectedLanguage=t,window.BeatifyI18n&&(await BeatifyI18n.setLanguage(t),BeatifyI18n.initPageTranslations()),T(),C()})}),document.querySelectorAll(".chip[data-duration]").forEach(e=>{e.addEventListener("click",function(){let t=parseInt(this.dataset.duration,10);O(".chip[data-duration]",a=>a===this),r.selectedDuration=t,T(),C()})}),document.querySelectorAll(".chip[data-reveal-advance]").forEach(e=>{e.addEventListener("click",function(){r.revealAutoAdvance=parseInt(this.dataset.revealAdvance,10)||0,O(".chip[data-reveal-advance]",t=>t===this),C()})}),document.querySelectorAll(".chip[data-difficulty]").forEach(e=>{e.addEventListener("click",function(){let t=this.dataset.difficulty;O(".chip[data-difficulty]",a=>a===this),r.selectedDifficulty=t,T(),C()})}),document.getElementById("artist-challenge-toggle")?.addEventListener("change",function(){r.artistChallengeEnabled=this.checked,T(),C()}),document.getElementById("movie-quiz-toggle")?.addEventListener("change",function(){r.movieQuizEnabled=this.checked,T(),C()}),document.getElementById("intro-mode-toggle")?.addEventListener("change",function(){r.introModeEnabled=this.checked,T(),C()}),document.getElementById("closest-wins-toggle")?.addEventListener("change",function(){r.closestWinsModeEnabled=this.checked,T(),C()}),document.getElementById("rampup-order-toggle")?.addEventListener("change",function(){r.rampupOrderEnabled=this.checked,T(),C()}),document.getElementById("finale-double-toggle")?.addEventListener("change",function(){r.finaleDoubleEnabled=this.checked,T(),C()}),document.getElementById("finale-tiebreaker-toggle")?.addEventListener("change",function(){r.finaleTiebreakerEnabled=this.checked,T(),C()}),document.getElementById("comeback-token-toggle")?.addEventListener("change",function(){r.comebackTokenEnabled=this.checked,T(),C()}),document.getElementById("difficulty-bet-scaling-toggle")?.addEventListener("change",function(){r.difficultyBetScalingEnabled=this.checked,T(),C()}),document.getElementById("sabotage-toggle")?.addEventListener("change",function(){r.sabotageEnabled=this.checked,T(),C()}),document.getElementById("title-artist-mode-toggle")?.addEventListener("change",function(){r.titleArtistModeEnabled=this.checked,Pa(),T(),C()}),document.querySelectorAll(".chip[data-provider]").forEach(e=>{e.addEventListener("click",function(){if(this.disabled||this.classList.contains("chip--disabled"))return;let t=this.dataset.provider;O(".chip[data-provider]",a=>a===this),r.selectedProvider=t,yt(),T(),C(),r.playlistData.length>0&&ue(r.playlistData,"",!0)})}),Wt(C)}async function Pt(){try{let e=localStorage.getItem(x);if(e){let t=JSON.parse(e);try{typeof t.libraryYearGate=="string"&&(r.libraryYearGate=t.libraryYearGate),Number.isFinite(t.libraryScanSize)&&(r.libraryScanSize=t.libraryScanSize),Number.isFinite(t.libraryPopPercent)&&(r.libraryPopPercent=t.libraryPopPercent),Array.isArray(t.libraryGenres)&&(r.libraryGenres=t.libraryGenres),Ut()}catch{}t.language&&(r.selectedLanguage=t.language,O(".chip[data-lang]",n=>n.dataset.lang===t.language),window.BeatifyI18n&&(await BeatifyI18n.setLanguage(t.language),BeatifyI18n.initPageTranslations()));let a=St(t.duration);if(a!==null&&(r.selectedDuration=a,O(".chip[data-duration]",n=>parseInt(n.dataset.duration,10)===a)),typeof t.revealAutoAdvance=="number"&&(r.revealAutoAdvance=t.revealAutoAdvance,O(".chip[data-reveal-advance]",n=>parseInt(n.dataset.revealAdvance,10)===t.revealAutoAdvance)),t.difficulty&&(r.selectedDifficulty=t.difficulty,O(".chip[data-difficulty]",n=>n.dataset.difficulty===t.difficulty)),typeof t.artistChallenge=="boolean"){r.artistChallengeEnabled=t.artistChallenge;let n=document.getElementById("artist-challenge-toggle");n&&(n.checked=t.artistChallenge)}if(typeof t.movieQuiz=="boolean"){r.movieQuizEnabled=t.movieQuiz;let n=document.getElementById("movie-quiz-toggle");n&&(n.checked=t.movieQuiz)}if(typeof t.introMode=="boolean"){r.introModeEnabled=t.introMode;let n=document.getElementById("intro-mode-toggle");n&&(n.checked=t.introMode)}if(typeof t.closestWinsMode=="boolean"){r.closestWinsModeEnabled=t.closestWinsMode;let n=document.getElementById("closest-wins-toggle");n&&(n.checked=t.closestWinsMode)}if(typeof t.rampupOrder=="boolean"){r.rampupOrderEnabled=t.rampupOrder;let n=document.getElementById("rampup-order-toggle");n&&(n.checked=t.rampupOrder)}if(typeof t.finaleDouble=="boolean"){r.finaleDoubleEnabled=t.finaleDouble;let n=document.getElementById("finale-double-toggle");n&&(n.checked=t.finaleDouble)}if(typeof t.finaleTiebreaker=="boolean"){r.finaleTiebreakerEnabled=t.finaleTiebreaker;let n=document.getElementById("finale-tiebreaker-toggle");n&&(n.checked=t.finaleTiebreaker)}if(typeof t.comebackToken=="boolean"){r.comebackTokenEnabled=t.comebackToken;let n=document.getElementById("comeback-token-toggle");n&&(n.checked=t.comebackToken)}if(typeof t.difficultyBetScaling=="boolean"){r.difficultyBetScalingEnabled=t.difficultyBetScaling;let n=document.getElementById("difficulty-bet-scaling-toggle");n&&(n.checked=t.difficultyBetScaling)}if(typeof t.sabotage=="boolean"){r.sabotageEnabled=t.sabotage;let n=document.getElementById("sabotage-toggle");n&&(n.checked=t.sabotage)}if(typeof t.titleArtistMode=="boolean"){r.titleArtistModeEnabled=t.titleArtistMode;let n=document.getElementById("title-artist-mode-toggle");n&&(n.checked=t.titleArtistMode)}Pa(),t.provider&&(r.selectedProvider=t.provider,O(".chip[data-provider]",n=>n.dataset.provider===t.provider))}}catch(e){console.warn("Failed to load saved settings:",e)}T()}function C(){try{window.BeatifyAuth?.fetch("/beatify/api/game/update-lobby",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({media_player:(r.selectedMediaPlayer||{}).entityId||null,tts:window._ttsConfig?window._ttsConfig():null,party_lights:window._partyLightsConfig?window._partyLightsConfig():null})})}catch{}try{let e={language:r.selectedLanguage,duration:r.selectedDuration,revealAutoAdvance:r.revealAutoAdvance,difficulty:r.selectedDifficulty,artistChallenge:r.artistChallengeEnabled,movieQuiz:r.movieQuizEnabled,introMode:r.introModeEnabled,closestWinsMode:r.closestWinsModeEnabled,titleArtistMode:r.titleArtistModeEnabled,rampupOrder:r.rampupOrderEnabled,finaleDouble:r.finaleDoubleEnabled,finaleTiebreaker:r.finaleTiebreakerEnabled,comebackToken:r.comebackTokenEnabled,difficultyBetScaling:r.difficultyBetScalingEnabled,sabotage:r.sabotageEnabled,provider:r.selectedProvider};localStorage.setItem(x,JSON.stringify(e))}catch(e){console.warn("Failed to save settings:",e)}}function T(){let e=document.getElementById("game-settings-summary");if(!e)return;let t={easy:"Easy",normal:"Normal",hard:"Hard"},a={en:"EN",de:"DE",es:"ES"},n=!r.titleArtistModeEnabled,i=n&&r.artistChallengeEnabled?" \u2022 \u{1F3A4}":"",s=n&&r.movieQuizEnabled?" \u2022 \u{1F3AC}":"",o=n&&r.introModeEnabled?" \u2022 \u26A1":"",l=n&&r.closestWinsModeEnabled?" \u2022 \u{1F3AF}":"",d=r.titleArtistModeEnabled?" \u2022 \u{1F3B5}":"",c=r.rampupOrderEnabled?" \u2022 \u{1F4C8}":"",u=r.finaleDoubleEnabled?" \u2022 \u2728":"",m=r.finaleTiebreakerEnabled?" \u2022 \u2694\uFE0F":"",f=r.comebackTokenEnabled?" \u2022 \u{1F381}":"",p=n&&r.difficultyBetScalingEnabled?" \u2022 \u{1F3B2}":"",y=r.sabotageEnabled?" \u2022 \u{1F4A3}":"";e.textContent=`${t[r.selectedDifficulty]||"Normal"} \u2022 ${r.selectedDuration}s \u2022 ${a[r.selectedLanguage]||"EN"}${d}${i}${s}${o}${l}${c}${u}${m}${f}${p}${y}`}function Pa(){var e=["artist-challenge-toggle","closest-wins-toggle"];e.forEach(function(i){var s=document.getElementById(i);if(s){var o=s.closest(".setting-group");o&&o.classList.toggle("hidden",r.titleArtistModeEnabled),s.disabled=r.titleArtistModeEnabled}});var t=document.getElementById("admin-difficulty-row");t&&t.classList.toggle("hidden",r.titleArtistModeEnabled);var a=document.getElementById("admin-difficulty-hint");a&&a.classList.toggle("hidden",r.titleArtistModeEnabled);var n=document.getElementById("admin-difficulty-ta-summary");n&&n.classList.toggle("hidden",!r.titleArtistModeEnabled)}function Be(){if(r.cachedQRUrl){var e=document.getElementById("qr-modal"),t=document.getElementById("qr-modal-code");if(!(!e||!t)){t.innerHTML="",typeof QRCode<"u"&&new QRCode(t,{text:r.cachedQRUrl,width:280,height:280,colorDark:"#000000",colorLight:"#ffffff",correctLevel:QRCode.CorrectLevel.M}),e.classList.remove("hidden"),document.body.style.overflow="hidden";var a=document.getElementById("qr-modal-close");a&&a.focus()}}}function Mt(){var e=document.getElementById("qr-modal");e&&(e.classList.add("hidden"),document.body.style.overflow="")}function Ma(){var e=document.getElementById("qr-modal"),t=e?e.querySelector(".qr-modal-backdrop"):null,a=document.getElementById("qr-modal-close");t&&t.addEventListener("click",Mt),a&&a.addEventListener("click",Mt),q("qr-modal",Mt)}var ri=["beatify_wizard_state","beatify_last_player","beatify_game_settings","beatify_party_lights","beatify_tts","beatify_admin_token","beatify_admin_token_game_id"];function si(){document.getElementById("reset-modal")?.classList.remove("hidden")}function Ge(){document.getElementById("reset-modal")?.classList.add("hidden")}var oi=4e3;function $a(e,t,a,n=setTimeout){return Promise.race([Promise.resolve(e).catch(i=>{console.warn(`[Reset] ${a} failed (continuing):`,i)}),new Promise(i=>{n(()=>{console.warn(`[Reset] ${a} did not settle in ${t}ms (continuing)`),i()},t)})])}async function li({authFetch:e,storage:t,serviceWorker:a,navigate:n,timeoutMs:i=oi,timer:s=setTimeout}){try{await $a(e("/beatify/api/force-reset",{method:"POST"}),i,"force-reset POST",s);try{ri.forEach(o=>t.removeItem(o))}catch(o){console.warn("[Reset] localStorage clear failed:",o)}a&&await $a(a.getRegistrations().then(o=>Promise.all(o.map(l=>l.unregister()))),i,"SW unregister",s)}finally{n()}}function di(){return Ge(),li({authFetch:(e,t)=>BeatifyAuth.fetch(e,t),storage:localStorage,serviceWorker:"serviceWorker"in navigator?navigator.serviceWorker:null,navigate:()=>window.location.replace("/beatify/admin")})}function Na(){document.getElementById("reset-btn")?.addEventListener("click",si),document.getElementById("reset-confirm-btn")?.addEventListener("click",di),document.getElementById("reset-cancel-btn")?.addEventListener("click",Ge),document.querySelector("#reset-modal .modal-backdrop")?.addEventListener("click",Ge),q("reset-modal",Ge)}ra(()=>r.currentGame);window.escapeHtml=z;window.groupPlayersByPlatform=sa;window.buildRequestRowHtml=oa;window._getAdminToken=Re;window._setAdminToken=de;window._adminHeaders=Et;window.clearPlaylistFilters=La;var fe=null,me=null,Le=!1;function ci(){if(me)return me;if(typeof window<"u"&&typeof window.NoSleep=="function")try{me=new window.NoSleep}catch(e){console.debug("[BeatifyWakeLock] NoSleep instantiation failed:",e)}return me}async function ne(){if("wakeLock"in navigator)try{fe=await navigator.wakeLock.request("screen"),fe.addEventListener("release",function(){console.debug("[BeatifyWakeLock] Layer 1 released by browser"),fe=null}),console.debug("[BeatifyWakeLock] Layer 1 (native wakeLock) acquired");return}catch(a){console.debug("[BeatifyWakeLock] Layer 1 request failed:",a,"\u2014 trying Layer 2")}else console.debug("[BeatifyWakeLock] Layer 1 unavailable \u2014 using Layer 2");var e=ci();if(!e){console.debug("[BeatifyWakeLock] Layer 2 unavailable (NoSleep vendor not loaded)");return}if(!Le)try{var t=e.enable();Le=!0,t&&typeof t.catch=="function"&&t.catch(function(a){console.debug("[BeatifyWakeLock] Layer 2 enable promise rejected:",a)}),console.debug("[BeatifyWakeLock] Layer 2 (NoSleep video) enabled")}catch(a){console.debug("[BeatifyWakeLock] Layer 2 enable failed:",a),Le=!1}}function ja(){if(fe){try{fe.release()}catch{}fe=null}if(Le&&me){try{me.disable()}catch{}Le=!1,console.debug("[BeatifyWakeLock] Layer 2 (NoSleep) disabled")}}document.addEventListener("visibilitychange",function(){document.visibilityState==="visible"&&r.currentGame&&r.currentGame.phase!=="END"&&(ne(),P()||(pa(),G()))});var Ve=null,Nt=0,$t=null,N=null;fa({debug:(...e)=>Rt(...e),getCurrentGame:()=>r.currentGame,getCurrentView:()=>r.currentView,getAdminPlayerName:()=>r.adminPlayerName,setIsPlaying:e=>{r.isPlaying=e},setAdminPlayerName:e=>{r.adminPlayerName=e},setAdminSessionId:e=>{r.adminSessionId=e},handleAdminStateUpdate:e=>Ya(e),startLobbyPolling:()=>Wa(),stopLobbyPolling:()=>tt(),showError:e=>U(e),showSpeakerSetupError:e=>_i(e),resetHomeStartButton:()=>yi()});var W=null,Xe=null,ui=["media-players","music-service","playlists","game-settings","admin-actions","party-lights","tts-settings"],at=window.BeatifyUtils||{},Rt=at.debug||function(){};document.addEventListener("DOMContentLoaded",async()=>{await BeatifyAuth.init({requireAuth:!0}),await at.waitForI18n()?(await BeatifyI18n.init(),BeatifyI18n.initPageTranslations(),r.selectedLanguage=BeatifyI18n.getLanguage()):console.error("[Beatify] BeatifyI18n module failed to load - UI will use fallback text"),document.querySelectorAll(".chip[data-lang]").forEach(t=>{t.classList.toggle("chip--active",t.dataset.lang===r.selectedLanguage)});try{let t=await fetch("/beatify/api/status");if(t.ok){let a=await t.json();r.setupComplete=a.setup_complete===!0,gt(a.saved_setup,globalThis.localStorage)}}catch(t){console.warn("[Beatify] setup seed before wizard failed:",t)}if(window.BeatifyWizard&&typeof window.BeatifyWizard.init=="function")try{await window.BeatifyWizard.init()}catch(t){console.warn("[Beatify] wizard init failed:",t)}window.loadStatus=ye,window.loadSavedSettings=Pt,window.BeatifyHome={enter(){document.body.classList.add("home-mode");let t=document.getElementById("home-view");t&&t.classList.remove("hidden"),this.refresh(),this.isConfigured()?(this.setMode("configured"),this.hydrateFromStorage(),r.currentGame&&r.currentGame.phase==="LOBBY"&&r.currentGame.join_url?this.renderSession(r.currentGame):this.startSession()):this.setMode("setup")},hydrateFromStorage(){try{let t=localStorage.getItem(M);if(t&&(!r.selectedMediaPlayer||!r.selectedMediaPlayer.entityId)){let n=document.querySelector(`.media-player-radio[data-entity-id="${CSS.escape(t)}"]`);n?(n.checked=!0,Se(n,!0)):r.selectedMediaPlayer={entityId:t,state:"unknown",platform:"unknown"}}let a=localStorage.getItem(x);if(a){let n=JSON.parse(a);da(r,n);let i=Array.isArray(n.selectedPlaylists)?n.selectedPlaylists.map(s=>typeof s=="string"?s:s.path).filter(Boolean):[];i.length&&r.selectedPlaylists.length===0&&(r.selectedPlaylists=i.map(s=>{let o=(r.playlistData||[]).find(l=>l.path===s);return{path:s,songCount:o&&(o.song_count||o.songCount)||0}}))}}catch(t){console.warn("[Beatify] hydrateFromStorage failed:",t)}},setMode(t){let a=t==="configured";if(document.getElementById("home-hero-configured")?.classList.toggle("hidden",!a),document.getElementById("home-hero-setup")?.classList.toggle("hidden",a),document.getElementById("home-edit-setup")?.classList.toggle("hidden",!a),document.getElementById("home-start-game")?.classList.toggle("hidden",!a),document.getElementById("home-start-setup")?.classList.toggle("hidden",a),!a){document.getElementById("home-dashboard-url")?.classList.add("hidden"),document.getElementById("home-join-player")?.classList.add("hidden"),document.getElementById("home-end-game")?.classList.add("hidden");let n=document.getElementById("home-meta");n&&(n.textContent="");let i=document.getElementById("home-players");i&&(i.innerHTML="")}},async startSession(){let t=document.getElementById("home-qr-loading");t&&t.classList.remove("hidden");try{await We()}catch(a){console.warn("[Beatify] Home auto-start failed:",a)}},renderSession(t){let a=document.getElementById("home-qr-loading");a&&a.classList.add("hidden");let n=document.getElementById("home-qr-code");n&&t.join_url&&typeof QRCode<"u"&&(n.dataset.url!==t.join_url&&(n.innerHTML="",new QRCode(n,{text:t.join_url,width:180,height:180,colorDark:"#0a0a12",colorLight:"#ffffff",correctLevel:QRCode.CorrectLevel.M}),n.dataset.url=t.join_url,n.setAttribute("role","button"),n.setAttribute("tabindex","0"),n.style.cursor="pointer"),r.cachedQRUrl=t.join_url);let i=document.getElementById("home-join-url");i&&t.join_url&&(i.textContent=t.join_url);let s=document.getElementById("home-dashboard-url");if(s){let m=t.dashboard_url;!m&&t.join_url&&(m=t.join_url.split("/beatify/play")[0]+"/beatify/dashboard"),m?(s.href=m,s.classList.remove("hidden")):s.classList.add("hidden")}let o=t.phase==="LOBBY"&&!!t.join_url,l=t.phase&&t.phase!=="LOBBY"&&t.phase!=="END";document.getElementById("home-end-game")?.classList.toggle("hidden",!l);let d=(t.players||[]).some(m=>m.is_admin),c=o&&!d&&!r.isPlaying;document.getElementById("home-join-player")?.classList.toggle("hidden",!c);let u=document.getElementById("home-start-game");u&&(u.classList.toggle("btn-primary",!c),u.classList.toggle("btn-ghost",c)),this.renderPlayers(t.players||[])},renderPlayers(t){let a=document.getElementById("home-players");if(!a)return;if(!t.length){let d=window.BeatifyI18n&&BeatifyI18n.t("admin.home.waitingForGuests")||"Waiting for guests\u2026";a.innerHTML='