@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap";:root{--bg: #111214;--surface: #1a1c20;--surface-2: #23262c;--border: #2e3238;--border-strong: #3d424a;--text: #f5f6f7;--text-muted: #9aa0a8;--text-faint: #6b7178;--accent: #1ed760;--accent-hover: #3ce477;--accent-contrast: #07150b;--danger: #ff765c;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--shadow-1: 0 2px 8px rgb(0 0 0 / .35);--shadow-2: 0 8px 32px rgb(0 0 0 / .45);--transition: .18s ease}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}#root{height:100dvh}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}.app-header{height:56px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 20px}.brand{font-weight:700;letter-spacing:-.02em}.app-main{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:0 20px 16px}.login-screen{display:flex;align-items:center;justify-content:center;margin-bottom:6svh}.login-screen .btn-lg{height:54px;padding:0 32px;font-size:16px;margin-top:var(--space-2)}.boot{width:32px;height:32px;color:var(--text-muted);background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-opacity='0.25' stroke-width='3'/%3E%3Cpath d='M21 12a9 9 0 0 0-9-9' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-opacity='0.25' stroke-width='3'/%3E%3Cpath d='M21 12a9 9 0 0 0-9-9' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;animation:spin .8s linear infinite}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--radius-sm);border:1px solid transparent;font:inherit;font-weight:700;cursor:pointer;transition:background var(--transition),border-color var(--transition),color var(--transition),opacity var(--transition)}.btn:disabled{opacity:.45;cursor:default}.btn-primary{background:var(--accent);color:var(--accent-contrast)}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--text-muted)}.btn-ghost:hover:not(:disabled){color:var(--text);border-color:var(--border-strong)}.btn-sm{height:34px;padding:0 12px;font-size:13px}a.btn{text-decoration:none}.spinner{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.setup{width:min(640px,100%);display:grid;gap:var(--space-4);justify-items:center}.setup-form{display:flex;gap:var(--space-2);width:100%}.setup-form input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:12px 16px;font:inherit;outline:none;transition:border-color var(--transition)}.setup-form input:focus{border-color:var(--accent)}.setup-form input::placeholder{color:var(--text-faint)}.alert{display:flex;align-items:flex-start;gap:10px;width:100%;padding:10px 14px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);text-align:left;animation:rise .2s ease}.alert-error{border-color:#ff765c66}.alert-icon{flex:none;width:18px;height:18px;margin-top:2px}.alert-icon svg{display:block;width:100%;height:100%}.alert-error .alert-icon{color:var(--danger)}.alert-success .alert-icon{color:var(--accent)}.alert-info .alert-icon{color:var(--text-muted)}.alert-body{flex:1;min-width:0}.alert-title{margin:0;font-weight:500;font-size:14px;line-height:1.35;overflow-wrap:anywhere}.alert-hint{margin:3px 0 0;color:var(--text-muted);font-size:13px;line-height:1.4;overflow-wrap:anywhere}.alert-action{flex:none;align-self:center;height:34px;padding:0 14px;display:inline-flex;align-items:center;border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-contrast);font:inherit;font-weight:700;font-size:13px;text-decoration:none;border:0;cursor:pointer;transition:background var(--transition)}.alert-action:hover{background:var(--accent-hover)}.alert-dismiss{flex:none;align-self:flex-start;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;border-radius:var(--radius-sm);color:var(--text-faint);font-size:16px;cursor:pointer;transition:color var(--transition)}.alert-dismiss:hover{color:var(--text)}.game{width:min(680px,100%);height:100%;min-height:0;display:flex;flex-direction:column;gap:var(--space-3);padding:4px 0}.game-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.game-meta{display:flex;flex-direction:column;gap:1px;min-width:0}.playlist-name{color:var(--text-faint);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-counter{color:var(--text-muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase}.stage{flex:1;min-height:0;width:100%}.stage-card{container-type:size;width:100%;height:100%;display:flex;align-items:center;justify-content:center;animation:rise .22s ease}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}.qr-card{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);min-height:0}.qr-frame{width:min(100cqw,calc(100cqh - 168px),380px);max-width:100%;aspect-ratio:1;background:#fff;border-radius:var(--radius-md);padding:10px;box-shadow:var(--shadow-2)}.qr-frame img{display:block;width:100%;height:100%;image-rendering:pixelated}.qr-placeholder{width:100%;height:100%;border-radius:var(--radius-sm);background:#e9e9e9}.qr-caption{margin:0;color:var(--text-muted);font-size:14px;text-align:center;overflow-wrap:anywhere}.answer-card{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:0}.answer-media{position:relative;width:min(58cqw,calc(100cqh - 136px),260px);aspect-ratio:1;border:0;padding:0;background:var(--surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-2);cursor:pointer;margin-bottom:var(--space-4);transition:transform var(--transition)}.answer-media:hover:not(:disabled){transform:scale(1.02)}.answer-media:disabled{cursor:default}.answer-media img{display:block;width:100%;height:100%;object-fit:cover}.answer-media .answer-cover-fallback{display:block;width:100%;height:100%}.fact{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;height:100%;padding:16px;background:linear-gradient(135deg,var(--surface-2),#262c33);text-align:left}.fact-label{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.fact-text{color:var(--text-muted);font-size:13px;line-height:1.45;overflow:hidden;overflow-wrap:anywhere}.fact-hint{position:absolute;right:10px;bottom:10px;width:24px;height:24px;border-radius:50%;background:#111214bf;border:1px solid rgb(255 255 255 / .2);color:var(--text);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}.answer-cover-fallback{background:linear-gradient(135deg,var(--surface-2),#333a42)}.answer-title{font-size:clamp(20px,5.5cqw,38px);line-height:1.1;letter-spacing:-.03em;margin:0 0 4px;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}.answer-artist{color:var(--accent);font-size:clamp(15px,4cqw,18px);margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.answer-year{color:var(--text-muted);font-size:14px;margin:6px 0 0}.game-nav{display:flex;justify-content:center;gap:var(--space-2);padding-bottom:2px}.auth-badge{display:inline-flex;align-items:center;gap:10px}.auth-loading{color:var(--text-faint);font-size:13px}.auth-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}.auth-avatar-fallback{display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--text-muted);font-size:13px;font-weight:700}.auth-name{font-size:14px;color:var(--text-muted);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-logout{color:var(--text-faint);font-size:13px;text-decoration:none;transition:color var(--transition)}.auth-logout:hover{color:var(--danger)}.header-actions{display:inline-flex;align-items:center;gap:12px}.icon-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:color var(--transition),border-color var(--transition)}.icon-btn svg{width:18px;height:18px}.icon-btn:hover{color:var(--text);border-color:var(--border-strong)}.settings-dialog{display:flex;flex-direction:column;gap:var(--space-3);max-height:min(600px,calc(100dvh - 48px))}.settings-section{display:flex;flex-direction:column;gap:var(--space-2);min-height:0}.settings-section-head{display:flex;align-items:center;justify-content:space-between}.settings-section-label{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}.settings-refresh{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);font-size:15px;cursor:pointer;transition:color var(--transition),border-color var(--transition)}.settings-refresh:hover:not(:disabled){color:var(--text);border-color:var(--border-strong)}.settings-refresh:disabled{opacity:.5;cursor:default}.device-list{display:flex;flex-direction:column;gap:4px;overflow-y:auto;min-height:0}.device-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;transition:background var(--transition),border-color var(--transition)}.device-item:hover{border-color:var(--border-strong)}.device-item-selected,.device-item:has(input:checked){border-color:var(--accent);background:#1ed76014}.device-item input{accent-color:var(--accent);width:16px;height:16px;flex:none}.device-item-body{min-width:0;display:flex;flex-direction:column;gap:1px}.device-item-name{font-weight:500;font-size:14px;display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-item-meta{color:var(--text-faint);font-size:12px}.device-active-badge{flex:none;padding:1px 7px;border-radius:999px;background:#1ed76026;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.device-state-badge{flex:none;padding:1px 7px;border-radius:999px;background:var(--surface-2);color:var(--text-faint);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.device-state-ready{background:#1ed76026;color:var(--accent)}.settings-status{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);text-align:center;padding:16px 0;margin:0;font-size:14px}.play-toggle{width:68px;height:68px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-contrast);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-1);transition:background var(--transition),transform var(--transition),opacity var(--transition)}.play-toggle:hover:not(:disabled){background:var(--accent-hover);transform:scale(1.04)}.play-toggle:disabled{opacity:.6;cursor:default}.play-toggle svg{width:30px;height:30px}.eq{display:inline-flex;align-items:flex-end;gap:3px;height:16px}.eq i{width:4px;height:100%;background:var(--accent);border-radius:2px;transform-origin:bottom;animation:eq .9s ease-in-out infinite}.eq i:nth-child(1){animation-delay:0ms}.eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}.eq i:nth-child(4){animation-delay:.45s}@keyframes eq{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:10px 2px}.switch-label{font-size:15px}.switch{flex:none;width:46px;height:27px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);position:relative;cursor:pointer;padding:0;transition:background var(--transition),border-color var(--transition)}.switch-knob{position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:var(--text-muted);transition:transform var(--transition),background var(--transition)}.switch-on{background:var(--accent);border-color:var(--accent)}.switch-on .switch-knob{transform:translate(19px);background:var(--accent-contrast)}.browser-status-row{margin-top:var(--space-2);cursor:default}.stepper{display:inline-flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}.stepper button{width:34px;height:34px;background:none;border:0;border-radius:var(--radius-sm);color:var(--text-muted);font-size:18px;cursor:pointer;transition:color var(--transition)}.stepper button:hover:not(:disabled){color:var(--text)}.stepper button:disabled{opacity:.35;cursor:default}.stepper-value{min-width:46px;text-align:center;font-weight:500;font-size:14px}.settings-done{align-self:flex-end}.toast-viewport{position:fixed;top:12px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;width:min(340px,calc(100vw - 32px));list-style:none;margin:0;padding:0;z-index:50}.toast{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 16px;box-shadow:var(--shadow-2);animation:rise .2s ease}.toast-error{border-color:#ff765c66}.toast-title{margin:0;font-weight:500}.toast-description{margin:2px 0 0;color:var(--text-muted);font-size:13px;overflow-wrap:anywhere}.setup .btn-ghost{min-width:220px}.recent{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;width:100%}.recent-label{color:var(--text-faint);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-right:2px}.recent-chip{max-width:200px}.recent-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.picker-dialog{display:flex;flex-direction:column;gap:var(--space-3);max-height:min(560px,calc(100dvh - 48px))}.picker-search{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:10px 14px;font:inherit;outline:none;transition:border-color var(--transition)}.picker-search:focus{border-color:var(--accent)}.picker-search::placeholder{color:var(--text-faint)}.picker-list{flex:1;min-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding-right:4px}.picker-status{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);text-align:center;padding:24px 0;margin:0}.picker-item{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;background:none;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background var(--transition),border-color var(--transition)}.picker-item:hover,.picker-item:focus-visible{background:var(--surface-2);border-color:var(--border)}.picker-thumb{flex:none;width:40px;height:40px;border-radius:6px;object-fit:cover}.picker-thumb-fallback{background:linear-gradient(135deg,var(--surface-2),#333a42)}.picker-item-body{min-width:0;display:flex;flex-direction:column;gap:1px}.picker-item-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picker-item-meta{color:var(--text-faint);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picker-close{align-self:flex-end}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;animation:fade .16s ease;z-index:40}.dialog-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(400px,calc(100vw - 40px));background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-2);z-index:41;animation:rise .2s ease}.dialog-title{margin:0 0 6px;font-size:18px}.dialog-description{margin:0;color:var(--text-muted);font-size:14px}.dialog-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:20px}@keyframes fade{0%{opacity:0}}@media(max-width:480px){.setup-form{flex-direction:column}.setup-form .btn{width:100%}.auth-name{display:none}.app-main{padding:0 16px 12px}.app-header{padding:0 16px}}@media(max-height:420px){.qr-frame{width:min(100cqw,calc(100cqh - 60px),380px)}.qr-caption{display:none}.answer-cover{width:min(58cqw,calc(100cqh - 100px),260px);margin-bottom:var(--space-3)}}