:root{--color-primary-50: #e8f0f7;--color-primary-100: #c5daeb;--color-primary-200: #9ec2de;--color-primary-300: #77aad1;--color-primary-400: #5997c7;--color-primary-500: #2c6196;--color-primary-600: #265788;--color-primary-700: #1f4a75;--color-primary-800: #1a3a5c;--color-primary-900: #001d33;--color-secondary-50: #ededf7;--color-secondary-100: #d2d2ea;--color-secondary-200: #b4b4dc;--color-secondary-300: #9696ce;--color-secondary-400: #7f7fc3;--color-secondary-500: #3b3b9b;--color-secondary-600: #35358c;--color-secondary-700: #2d2d79;--color-secondary-800: #262666;--color-secondary-900: #1a1a4d;--color-accent-50: #fdf4e7;--color-accent-100: #fae3c3;--color-accent-200: #f6d09b;--color-accent-300: #f2bd73;--color-accent-400: #efae55;--color-accent-500: #df9449;--color-accent-600: #c4823f;--color-accent-700: #a66e35;--color-accent-800: #855100;--color-accent-900: #4a2800;--color-spotify-green: #1ed760;--color-spotify-green-dark: #1ab954;--color-text-on-green: #000000;--color-error: #e54b4b;--color-success: #1ed760;--color-warning: #df9449;--color-info: #2c6196;--color-vinny: #3b3b9b;--color-points: #df9449;--color-host: #2c6196;--surface-base: #0d0d0f;--surface-1: #1a1a22;--surface-2: #242430;--surface-3: #2e2e3a;--surface-4: #383846;--surface-vinny: #1e1e2d;--surface-interactive: #1a2028;--surface-action: #221e1a;--surface-success: #1a2420;--surface-warning: #24201a;--surface-error: #241a1a;--surface-vinny-elevated: #262638;--surface-interactive-elevated: #222a34;--surface-action-elevated: #2c2620;--border-default: #3a3a4a;--border-vinny: #3b3b6b;--border-interactive: #2c4a6a;--border-action: #5a4a3a;--border-success: #2a5a4a;--overlay-backdrop: rgba(0, 0, 0, .85);--color-text-primary: #ffffff;--color-text-secondary: #b3b3b3;--color-text-muted: #999999;--color-focus-ring: var(--color-primary-400);--font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-brand: "Circular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--type-display: 32px;--type-h1: 28px;--type-h2: 24px;--type-h3: 20px;--type-body-lg: 18px;--type-body: 16px;--type-body-sm: 14px;--type-caption: 12px;--type-overline: 11px;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--line-height-body: 1.5;--line-height-heading: 1.25;--line-height-ui: 1.2;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-8: 40px;--space-9: 48px;--space-10: 64px;--screen-margin: 16px;--touch-target-min: 44px;--touch-target-standard: 48px;--touch-target-primary: 56px;--touch-target-large: 64px;--touch-gap-minimum: 8px;--touch-gap-standard: 12px;--touch-gap-comfortable: 16px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);--safe-area-right: env(safe-area-inset-right, 0px)}*{-webkit-tap-highlight-color:transparent}html,body{height:100dvh;margin:0;background:var(--surface-base);color:var(--color-text-primary);font-family:var(--font-family-primary);font-size:var(--type-body);line-height:var(--line-height-body)}#root{height:100dvh}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important;transform:none!important}}.gameplay-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--screen-margin);background:var(--surface-1);border-bottom:1px solid var(--border-default);font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace}.album-art{display:block;object-fit:contain;aspect-ratio:1 / 1}.album-art-thumbnail{width:3rem}.album-art-large{width:12rem}.album-art-placeholder{display:grid;place-items:center;aspect-ratio:1 / 1;background:var(--surface-2);color:var(--color-text-secondary)}.playback-progress-track{height:.5rem;background:var(--surface-2)}.playback-progress-fill{height:100%;background:var(--color-accent-500)}.progress-times{display:flex;justify-content:space-between;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums}.screen{min-height:100dvh;padding:var(--space-4) var(--screen-margin);padding-top:calc(var(--space-4) + var(--safe-area-top));padding-bottom:calc(var(--space-4) + var(--safe-area-bottom));box-sizing:border-box}.guess-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--touch-gap-standard);margin-top:var(--space-4)}.guess-option{min-height:var(--touch-target-primary);background:var(--surface-interactive);border:1px solid var(--border-interactive);border-radius:var(--radius-md);color:var(--color-text-primary);font:var(--weight-medium) var(--type-body) / var(--line-height-ui) var(--font-family-primary);padding:var(--space-3)}.guess-option:active{background:var(--surface-interactive-elevated);transform:scale(.98)}.guess-option:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.guess-option[data-locked=true]{background:var(--surface-action);border-color:var(--border-action)}.guess-option:disabled{opacity:.6}.countdown{color:var(--color-points);font:var(--weight-semibold) var(--type-h3) / var(--line-height-ui) var(--font-family-primary)}.reveal-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);margin-top:var(--space-2)}.reveal-row[data-correct=true]{background:var(--surface-success);border:1px solid var(--border-success);color:var(--color-success)}.reveal-row[data-correct=false]{background:var(--surface-error);border:1px solid var(--border-default);color:var(--color-error)}.round-indicator{color:var(--color-text-primary);font:var(--weight-medium) var(--type-body) / var(--line-height-ui) var(--font-family-primary);opacity:.8}.round-prompt{color:var(--color-text-primary);font:var(--weight-semibold) var(--type-h3) / var(--line-height-ui) var(--font-family-primary);margin-bottom:var(--space-3)}.own-song-notice{background:var(--surface-vinny);border-left:3px solid var(--color-vinny);border-radius:var(--radius-md);padding:var(--space-3);margin-top:var(--space-3)}.picker-game{border:1px solid var(--border-interactive);border-radius:var(--radius-md);background:var(--surface-1);padding:var(--space-4);margin-top:var(--space-4);margin-bottom:var(--space-6)}.picker-row{margin-top:var(--space-3)}.picker-options{display:flex;flex-wrap:wrap;gap:var(--touch-gap-standard);margin-top:var(--space-2)}.picker-option{min-height:var(--touch-target-standard);background:var(--surface-interactive);border:1px solid var(--border-interactive);border-radius:var(--radius-md);color:var(--color-text-primary);padding:var(--space-2) var(--space-3)}.picker-option:active{background:var(--surface-interactive-elevated)}.picker-option[data-locked=true]{background:var(--surface-action);border-color:var(--border-action)}.picker-option:disabled{opacity:.6}.host-skip-button{margin-top:var(--space-6)}.verdict-card{background:var(--surface-vinny);border-left:3px solid var(--color-vinny);border-radius:var(--radius-md);padding:var(--space-4);margin-top:var(--space-4)}.verdict-option{min-height:var(--touch-target-standard);width:100%;background:var(--surface-interactive);border:1px solid var(--border-interactive);border-radius:var(--radius-md);color:var(--color-text-primary);padding:var(--space-3);margin-top:var(--touch-gap-minimum);text-align:left}.verdict-option:active{background:var(--surface-interactive-elevated)}.verdict-option[data-selected=true]{background:var(--surface-action);border-color:var(--border-action)}.primary-button{min-height:var(--touch-target-primary);width:100%;background:var(--color-accent-500);color:#000;border:none;border-radius:var(--radius-md);font:var(--weight-semibold) var(--type-body) / var(--line-height-ui) var(--font-family-primary);margin-top:var(--space-4)}.primary-button:active{background:var(--color-accent-600);transform:scale(.98)}.primary-button:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.primary-button:disabled{opacity:.5}.game-over-actions{margin-top:var(--space-6)}.keep-playlist{border:1px solid var(--border-interactive);border-radius:var(--radius-md);background:var(--surface-1);padding:var(--space-4)}.play-again{margin-top:var(--space-8, 3rem);border:1px solid var(--border-interactive);border-radius:var(--radius-md);padding:var(--space-4)}.last-game{border:1px solid var(--border-interactive);border-radius:var(--radius-md);background:var(--surface-1);padding:var(--space-4);margin-bottom:var(--space-6)}