@import"https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap";:root{--bg-primary: #0F0A0A;--bg-secondary: #0F2021;--bg-tertiary: #0F3538;--bg-card: #0F2021;--bg-overlay: rgba(15, 10, 10, .8);--text-primary: #FAFAF0;--text-secondary: #87A19E;--text-tertiary: #496767;--text-muted: #496767;--accent-primary: #FFBE00;--accent-primary-rgb: 255, 190, 0;--accent-secondary: #FF9200;--accent-secondary-rgb: 255, 146, 0;--accent-tertiary: #FF6600;--accent-gleam: #F8E08E;--accent-success: #22c55e;--accent-success-rgb: 34, 197, 94;--accent-warning: #facc15;--accent-warning-rgb: 250, 204, 21;--accent-error: #ef4444;--accent-error-rgb: 239, 68, 68;--button-primary: var(--accent-primary);--button-primary-hover: var(--accent-secondary);--button-secondary: #0F3538;--button-secondary-hover: #496767;--input-bg: #0F0A0A;--input-border: #0F3538;--input-focus: var(--accent-gleam);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);--shadow-md: 0 4px 6px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .3);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .3);--font-primary: "Outfit", sans-serif;--font-secondary: "Inter", sans-serif;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease;--header-height: 64px;--sidebar-width: 280px;--max-content-width: 1400px}*{box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{margin:0;padding:0;font-family:var(--font-secondary);font-weight:400;line-height:1.6;color:var(--text-primary);background-color:var(--bg-primary);background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20opacity='0.05'%3e%3cfilter%20id='noise'%3e%3cfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='4'%20stitchTiles='stitch'%20/%3e%3c/filter%3e%3crect%20width='100%25'%20height='100%25'%20filter='url(%23noise)'%20/%3e%3c/svg%3e"),radial-gradient(circle at 15% 85%,rgba(var(--accent-secondary-rgb),.15) 50%,transparent 40%),radial-gradient(circle at 85% 20%,rgba(var(--accent-primary-rgb),.1) 50%,transparent 40%);background-attachment:fixed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-family:var(--font-primary);font-weight:600;line-height:1.2;margin:0 0 var(--space-md) 0;color:var(--text-primary)}h1{font-size:2.5rem;font-weight:700;letter-spacing:-.02em}h2{font-size:2rem;font-weight:600}h3{font-size:1.5rem;font-weight:500}h4{font-size:1.25rem;font-weight:500}p{margin:0 0 var(--space-md) 0;color:var(--text-secondary)}a{color:var(--accent-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-secondary)}button{font-family:var(--font-secondary);font-weight:500;font-size:.875rem;border:none;border-radius:var(--radius-md);padding:var(--space-sm) var(--space-lg);cursor:pointer;transition:all var(--transition-normal);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);height:44px;position:relative;overflow:hidden}button:disabled{opacity:.5;cursor:not-allowed;transform:none!important}button:focus{outline:2px solid var(--accent-primary);outline-offset:2px}.btn-primary{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;font-weight:600;text-shadow:1px 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 3px #0003,inset 0 1px 1px #ffffff1a}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md);background:linear-gradient(135deg,var(--button-primary-hover),var(--accent-tertiary))}.btn-primary:not(:disabled){animation:shimmer 3s infinite;background-size:200% 100%}.btn-secondary{background:var(--button-secondary);color:var(--text-primary);border:1px solid var(--input-border)}.btn-secondary:hover:not(:disabled){background:var(--button-secondary-hover);border-color:var(--accent-primary);transform:translateY(-1px)}.btn-small{padding:var(--space-xs) var(--space-md);font-size:.75rem;min-height:36px}.btn-large{padding:var(--space-md) var(--space-xl);font-size:1rem;min-height:52px}input,select,textarea{font-family:var(--font-secondary);font-size:.875rem;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);color:var(--text-primary);transition:all var(--transition-normal);width:100%;height:44px}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--input-focus);box-shadow:0 0 0 3px #e8b4a01a}input::placeholder,textarea::placeholder{color:var(--text-muted)}.card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-md);border:1px solid rgba(255,255,255,.05);transition:all var(--transition-normal)}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md);padding-bottom:var(--space-md);border-bottom:1px solid rgba(255,255,255,.1)}.card-title{font-family:var(--font-primary);font-weight:600;font-size:1.125rem;color:var(--text-primary);margin:0}ul,ol{margin:0;padding:0;list-style:none}li{margin-bottom:var(--space-sm)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.text-muted{color:var(--text-muted)}.text-accent{color:var(--accent-primary)}.text-success{color:var(--accent-success)}.text-warning{color:var(--accent-warning)}.text-error{color:var(--accent-error)}.mb-0{margin-bottom:0}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.mt-0{margin-top:0}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.p-0{padding:0}.p-sm{padding:var(--space-sm)}.p-md{padding:var(--space-md)}.p-lg{padding:var(--space-lg)}.p-xl{padding:var(--space-xl)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.w-full{width:100%}.h-full{height:100%}.rounded{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.shadow{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.transition{transition:all var(--transition-normal)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.animate-fade-in{animation:fadeIn .3s ease-out}.animate-slide-in{animation:slideIn .3s ease-out}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}@media (max-width: 768px){:root{--sidebar-width: 240px}h1{font-size:2rem}h2{font-size:1.75rem}h3{font-size:1.25rem}.card{padding:var(--space-md)}}@media (max-width: 480px){:root{--sidebar-width: 100%}h1{font-size:1.75rem}h2{font-size:1.5rem}button{padding:var(--space-sm) var(--space-md);min-height:40px}}.app-container{min-height:100vh;display:flex;flex-direction:column;background:var(--bg-primary)}.game-header{background:var(--bg-secondary);border-bottom:1px solid rgba(255,255,255,.1);padding:var(--space-md) var(--space-xl);display:flex;align-items:center;justify-content:space-between;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100}.game-header-left{display:flex;align-items:center;gap:var(--space-lg)}.game-title{font-family:var(--font-primary);font-size:1.5rem;font-weight:600;color:var(--text-primary);margin:0}.game-info{display:flex;align-items:center;gap:var(--space-md);font-size:.875rem;color:var(--text-secondary)}.game-id{background:var(--bg-tertiary);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-family:var(--font-secondary);font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);border:1px solid transparent}.game-id:hover{background-color:var(--bg-primary);color:var(--text-primary);border-color:var(--input-border)}.player-info{display:flex;align-items:center;gap:var(--space-sm)}.player-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--bg-tertiary),var(--bg-secondary));display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;color:var(--text-primary);border:1px solid var(--input-border);box-shadow:inset 0 1px 2px #0003}.game-header-actions{display:flex;align-items:center;gap:var(--space-md)}.game-content{flex:1;display:grid;grid-template-columns:var(--sidebar-width) 1fr;gap:var(--space-lg);padding:var(--space-xl);max-width:var(--max-content-width);margin:0 auto;width:100%}.game-content:has(.sidebar-panel:last-child){grid-template-columns:var(--sidebar-width) 1fr var(--sidebar-width)}.sidebar-panel{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-md),inset 0 1px 2px #0003;border:1px solid var(--input-border);height:fit-content;max-height:calc(100vh - var(--header-height) - var(--space-xl) * 2);overflow-y:auto}.game-settings-container{margin-bottom:var(--space-xl)}.sidebar-panel h3,.track-submission h3,.game-settings h3,.results-title,.voting-title,.track-player-title{font-family:var(--font-primary);font-size:1.125rem;font-weight:600;color:var(--text-primary);margin:0 0 var(--space-md) 0;padding-bottom:var(--space-sm);border-bottom:1px solid var(--input-border)}.center-panel{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-md),inset 0 1px 2px #0003;border:1px solid var(--input-border);min-height:calc(100vh - var(--header-height) - var(--space-xl) * 2);display:flex;flex-direction:column}.lobby{max-width:480px;margin:0 auto;padding:var(--space-2xl);text-align:center}.lobby h1{margin-bottom:var(--space-xl);background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.lobby-form{display:flex;flex-direction:column;gap:var(--space-lg);margin-bottom:var(--space-xl)}.lobby-input-group{display:flex;flex-direction:column;gap:var(--space-sm);text-align:left}.lobby-input-group label{font-weight:500;color:var(--text-primary);font-size:.875rem}.lobby-actions{display:flex;gap:var(--space-md)}.lobby-actions button{flex:1}.game-phase{flex:1;display:flex;flex-direction:column;gap:var(--space-xl)}.phase-header{text-align:center}.phase-title{font-family:var(--font-primary);font-size:1.75rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-sm)}.phase-description{color:var(--text-secondary);font-size:1rem}.track-player-section{text-align:center}.track-player-container{margin-bottom:var(--space-lg)}.like-section{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-sm)}.like-button{background:transparent;color:var(--text-secondary);border:1px solid var(--input-border);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-xl);font-weight:600;font-size:1rem;cursor:pointer;transition:all var(--transition-normal);min-width:120px;position:relative}.like-button:hover:not(.liked):not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg);background:var(--bg-tertiary);color:var(--text-primary)}@keyframes like-pulse{0%{transform:translateY(-2px) scale(1)}50%{transform:translateY(-2px) scale(1.05)}to{transform:translateY(-2px) scale(1)}}.like-button.liked{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:var(--bg-primary);border-color:transparent;transform:translateY(-2px);box-shadow:var(--shadow-lg);position:relative;animation:like-pulse .3s ease-out}.like-button.liked:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border-radius:var(--radius-lg);z-index:-1;opacity:.3}.like-button.liked:hover:not(:disabled){transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-xl)}.like-button:disabled{opacity:.6;cursor:not-allowed}.like-count{font-size:.875rem;color:var(--text-secondary)}.likers-list{font-size:.75rem;color:var(--text-tertiary);margin-left:var(--space-sm)}.voting-section{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-lg)}.voting-title{font-family:var(--font-primary);font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-md)}.voting-form{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}.voting-select{flex:1;min-width:200px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);color:var(--text-primary);font-size:.875rem}.vote-counter{background:var(--bg-tertiary);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);font-weight:600;color:var(--text-primary);font-size:.875rem;margin-top:var(--space-md);text-align:center}.results-section{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg)}.results-title{font-family:var(--font-primary);font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-md);text-align:center}.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-lg)}.nominations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-lg)}.nomination-card{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-lg);border:1px solid var(--input-border);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);display:flex;flex-direction:column;gap:var(--space-sm)}.nomination-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent-primary-hover)}.nomination-emoji{font-size:2rem;line-height:1}.nomination-title{font-family:var(--font-primary);font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:0}.nomination-description{color:var(--text-secondary);font-size:.875rem;margin:0;flex-grow:1}.nomination-winner{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--input-border);font-size:1rem}.winner-name{font-weight:600;color:var(--text-primary)}.winner-score{color:var(--text-secondary);margin-left:var(--space-sm);font-size:.875rem}.results-card{background:var(--bg-card);border-radius:var(--radius-md);padding:var(--space-md);border:1px solid rgba(255,255,255,.05)}.results-card h4{font-family:var(--font-primary);font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-sm)}.results-list{list-style:none;padding:0;margin:0}.results-list li{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xs) 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.875rem}.results-list li:last-child{border-bottom:none}.correct-guess{color:var(--accent-success);font-weight:600}.incorrect-guess{color:var(--accent-error)}.players-list{list-style:none;padding:0;margin:0}.player-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) 0;border-bottom:1px solid rgba(255,255,255,.05)}.player-item:last-child{border-bottom:none}.player-info-left{display:flex;align-items:center;gap:var(--space-sm);min-width:0}.player-name{font-weight:500;color:var(--text-primary);font-size:.875rem}.player-status{display:flex;align-items:center;gap:var(--space-xs);font-size:.75rem}.player-status .connected{color:var(--accent-success)}.player-status .disconnected{color:var(--accent-error)}.player-name .admin-icon{margin-left:var(--space-xs);color:var(--accent-primary)}.player-tracks{font-size:.875rem;font-weight:600;color:var(--text-secondary);transition:all var(--transition-normal)}.player-ready{color:var(--accent-success);font-weight:600}.track-submission-container{display:flex;flex-direction:column;gap:var(--space-sm)}.track-submission h3{margin-bottom:var(--space-sm)}.track-submission{margin-bottom:0}.track-submission .url-preview-container{flex:1;width:0}.track-input-wrapper{display:flex;gap:var(--space-md)}.track-submit-btn{flex-shrink:0;min-width:120px}.track-status{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);font-size:.75rem;color:var(--text-tertiary)}.track-status.success{background:#7fb0691a;color:var(--accent-success);border:1px solid rgba(127,176,105,.2)}.track-status.error{background:#e74c3c1a;color:var(--accent-error);border:1px solid rgba(231,76,60,.2)}.game-settings{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg)}.settings-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.settings-label{color:var(--text-secondary);font-size:.875rem}.settings-value{font-weight:600;font-size:1.1rem;color:var(--text-primary);padding:0 var(--space-md)}.number-input-group .number-input-btn{background:var(--bg-primary);color:var(--text-secondary);height:44px;width:44px;padding:0;transition:all .15s ease-in-out;display:flex;align-items:center;justify-content:center;font-size:1.2rem;border:none;border-radius:0;cursor:pointer}.tracks-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-sm);min-width:0}.track-item{border-radius:var(--radius-md);padding:0;background:var(--bg-secondary);border:1px solid var(--input-border);transition:all var(--transition-fast);display:flex;align-items:stretch;min-width:0;overflow:hidden}.track-item:not(.played):hover{background-color:var(--button-secondary)}.track-item.played{opacity:.6}.track-item.playing{opacity:1;animation:pulse-red 2s infinite;border-color:var(--accent-error)}.track-remove-btn{background:transparent;color:var(--text-secondary);border:none;border-left:1px solid var(--input-border);border-radius:0;width:44px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1;font-weight:400;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out}.track-remove-btn:hover{background:var(--bg-primary);color:var(--text-primary)}.track-title{font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;width:0}.track-item.played .track-title{text-decoration:line-through}.track-owner{font-size:.75rem;color:var(--text-tertiary);font-style:italic}.track-status{font-size:.75rem;color:var(--text-tertiary);margin-left:auto;padding-left:var(--space-sm);white-space:nowrap}.loading{display:flex;align-items:center;justify-content:center;min-height:200px;color:var(--text-secondary);font-size:1.125rem}.loading-spinner{width:24px;height:24px;border:2px solid var(--bg-tertiary);border-top:2px solid var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite;margin-right:var(--space-sm)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-spinner-small{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top:2px solid #fff;border-radius:50%;animation:spin .8s linear infinite}.error-message,.success-message{padding:var(--space-md);border-radius:var(--radius-md);margin-bottom:var(--space-lg);font-size:.9rem;font-weight:500;display:flex;align-items:center;gap:var(--space-md);border-width:1px;border-style:solid;border-left-width:5px;box-shadow:0 4px 15px #0003;animation:slideIn .3s ease-out forwards}.error-message{background:linear-gradient(90deg,rgba(var(--accent-error-rgb),.15),rgba(var(--accent-error-rgb),.05));color:var(--accent-error);border-color:var(--accent-error)}.success-message{background:linear-gradient(90deg,rgba(var(--accent-success-rgb),.15),rgba(var(--accent-success-rgb),.05));color:var(--accent-success);border-color:var(--accent-success)}.error-message:before,.success-message:before{font-size:1.5rem;line-height:1}.error-message:before{content:"⚠️"}.success-message:before{content:"✅"}@media (max-width: 1200px){.game-content{grid-template-columns:240px 1fr;gap:var(--space-md);padding:var(--space-lg);align-items:stretch}.game-content:has(.sidebar-panel:last-child){grid-template-columns:240px 1fr 240px}.desktop-only{display:none}.mobile-only{display:inline;font-size:1.5rem}.game-header-actions .btn-secondary{min-width:44px;padding:var(--space-sm)}.settings-row .number-input-group{width:100%;justify-content:space-between}.settings-row .number-display{flex-grow:1;text-align:center;justify-content:center}}@media (max-width: 768px){.game-content{grid-template-columns:1fr;gap:var(--space-md);padding:var(--space-md);align-items:stretch}.sidebar-panel{order:3}.center-panel{order:1;min-height:auto}.game-header{padding:var(--space-sm) var(--space-md)}.game-header-left{gap:var(--space-md)}.game-title{font-size:1.25rem}.game-info{flex-direction:column;align-items:flex-start;gap:var(--space-xs)}.lobby{padding:var(--space-lg)}.lobby-actions{flex-direction:column}.voting-form{flex-direction:column;align-items:stretch}.settings-row{flex-direction:column;align-items:stretch;gap:var(--space-sm)}.settings-row .number-input-group{width:100%;justify-content:space-between}.settings-row .number-display{flex-grow:1;text-align:center;justify-content:center}}@media (max-width: 480px){.game-content{grid-template-columns:1fr;gap:var(--space-sm);padding:var(--space-sm)}.center-panel,.sidebar-panel,.track-player-section{padding:var(--space-md)}.like-section{flex-direction:column;align-items:stretch;gap:var(--space-sm)}}.url-preview-container{width:100%;min-width:0}.url-input-wrapper{position:relative;display:flex;align-items:center;overflow:hidden}.url-input{width:100%;padding-right:120px;transition:all var(--transition-normal);min-width:0}.url-input.has-service{border-color:var(--accent-primary);box-shadow:0 0 0 3px #e8b4a01a}.url-input.valid{border-color:var(--accent-success)}.url-input.invalid{border-color:var(--accent-error)}.service-indicator{position:absolute;right:var(--space-sm);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.service-logo{width:16px;height:16px;filter:brightness(0) invert(1)}.service-name{font-size:.75rem;font-weight:600}.url-error{color:var(--accent-error);font-size:.75rem;margin-top:var(--space-xs);padding-left:var(--space-sm)}.url-preview{margin-top:var(--space-md);background:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--space-md);border:1px solid rgba(255,255,255,.1)}.preview-header{display:flex;align-items:center;gap:var(--space-md)}.preview-logo{width:24px;height:24px}.preview-info{display:flex;flex-direction:column;flex:1;min-width:0}.preview-info .service-name{font-size:.75rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-xs)}.track-url{font-size:.75rem;color:var(--text-muted);word-break:break-all}.track-info{display:flex;margin-top:-2px}.track-info .track-title{font-weight:600;color:var(--text-primary);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-info .track-artist{font-size:.875rem;color:var(--text-secondary);font-weight:400}.track-likes{font-size:.75rem;color:var(--accent-primary);margin-left:auto;padding-left:var(--space-sm);white-space:nowrap;font-weight:600}.track-item.played .track-title,.track-item.played .track-status{text-decoration:line-through}.track-service-logo{width:24px;height:24px}.track-link{text-decoration:none;color:inherit;display:flex;align-items:center;gap:var(--space-md);min-width:0;flex:1;padding:var(--space-sm) var(--space-md)}.track-link:hover{text-decoration:none}.track-artist{font-size:.875rem;color:var(--text-secondary);margin-top:var(--space-xs);font-weight:400}.number-input-group{display:flex;align-items:center;border:1px solid var(--input-border);border-radius:var(--radius-md);overflow:hidden}.number-input-group .number-input-btn{background:var(--bg-secondary);color:var(--text-secondary);height:44px;width:44px;padding:0;transition:all .15s ease-in-out;display:flex;align-items:center;justify-content:center;font-size:1.2rem;border:none;border-radius:0}.number-input-group .number-input-btn:hover:not(:disabled){background:var(--bg-tertiary);color:var(--text-primary)}.number-input-group .number-input-btn:focus{outline:none;box-shadow:none}.number-input-group .number-display{background:var(--bg-primary);height:44px;padding:0 var(--space-md);display:flex;align-items:center;color:var(--text-primary);font-weight:600;border-left:1px solid var(--input-border);border-right:1px solid var(--input-border)}.number-input-group .number-input-btn:disabled{opacity:.5;cursor:not-allowed;background:var(--bg-tertiary)}@keyframes pulse-yellow{0%,to{background-color:var(--bg-card);border-color:var(--input-border)}50%{background-color:rgba(var(--accent-warning-rgb),.05);border-color:rgba(var(--accent-warning-rgb),.5)}}.players-list.in-lobby .player-item{transition:all var(--transition-normal);border-radius:var(--radius-md);padding:var(--space-sm);margin-bottom:var(--space-xs);border:1px solid var(--input-border)}.players-list.in-lobby .player-item:not(.is-ready){animation:pulse-yellow 2.5s cubic-bezier(.4,0,.6,1) infinite}.players-list.in-lobby .player-item.is-ready{background-color:rgba(var(--accent-success-rgb),.1);border-color:var(--accent-success)}.players-list.in-lobby .player-item.is-ready .player-tracks{color:var(--accent-success);font-weight:700}.track-url-small{font-size:.75rem;color:var(--text-tertiary);opacity:.7;margin-top:2px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-info .track-artist{font-size:.75rem;color:var(--text-secondary);font-weight:400}.game-content:has(.sidebar-panel:last-child){grid-template-columns:240px 1fr 240px}.desktop-only{display:none}.mobile-only{display:inline;font-size:1.5rem}.game-header-actions .btn-secondary{min-width:44px;padding:var(--space-sm)}.settings-row .number-input-group{width:100%;justify-content:space-between}.settings-row .number-display{flex-grow:1;text-align:center;justify-content:center}.waiting-for-admin-message{display:inline-block;background:var(--bg-tertiary);color:var(--text-secondary);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);margin-top:var(--space-lg)}@keyframes pulse{0%,to{box-shadow:0 0 rgba(var(--accent-primary-rgb),.4)}50%{box-shadow:0 0 0 10px rgba(var(--accent-primary-rgb),0)}}@keyframes pulse-red{0%,to{box-shadow:0 0 rgba(var(--accent-error-rgb),.7)}70%{box-shadow:0 0 0 10px rgba(var(--accent-error-rgb),0)}}.animate-fade-in{animation:fadeIn .5s ease-out forwards}.rules-section{margin-bottom:var(--space-xl);text-align:center}.rules-toggle{background:var(--bg-tertiary);border:1px solid var(--input-border);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-lg);color:var(--text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);margin-bottom:var(--space-md)}.rules-toggle:hover{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--accent-primary)}.rules-content{background:var(--bg-card);border:1px solid var(--input-border);border-radius:var(--radius-lg);padding:var(--space-lg);margin-top:var(--space-md);text-align:left;box-shadow:var(--shadow-md);animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.rules-content h3{color:var(--text-primary);font-size:1.125rem;font-weight:600;margin-bottom:var(--space-md)}.rules-content p{color:var(--text-secondary);line-height:1.6;margin-bottom:var(--space-sm)}.rules-content p:last-child{margin-bottom:0}@media (max-width: 768px){.rules-content{padding:var(--space-md)}}@media (max-width: 480px){.rules-content{padding:var(--space-sm)}}.track-item.liked{background:rgba(var(--accent-primary-rgb, 255, 99, 132),.12);border-color:var(--accent-primary, #ff6384);position:relative}.track-liked{font-size:1.1em;color:var(--accent-primary, #ff6384);vertical-align:middle}.nomination-track-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;width:100%}.nomination-track-info{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-weight:500;max-width:260px;justify-content:flex-end;overflow:hidden}.nomination-track-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}.nomination-track-likes{color:var(--accent-primary);font-weight:600;display:flex;align-items:center;gap:2px}.nomination-track-none{color:var(--text-tertiary);flex:1;text-align:right;font-weight:400}