:root{--gb-bg-dim: #f3eac7;--gb-bg0: #f9f5d7;--gb-bg1: #f5edca;--gb-bg2: #f3eac7;--gb-bg3: #f2e5bc;--gb-bg4: #eee0b7;--gb-bg5: #ebdbb2;--gb-fg0: #654735;--gb-fg1: #4f3829;--gb-red: #c14a4a;--gb-orange: #c35e0a;--gb-yellow: #b47109;--gb-green: #6c782e;--gb-aqua: #4c7a5d;--gb-blue: #45707a;--gb-purple: #945e80;--gb-grey0: #a89984;--gb-grey1: #928374;--gb-grey2: #7c6f64;--gb-visual-yellow: #f9eabf;--gb-visual-red: #f0ddc3;--gb-visual-blue: #d9e1cc;--md-primary: var(--gb-orange);--md-on-primary: var(--gb-bg0);--md-primary-container: #f5d2a6;--md-on-primary-container: #5a2a00;--md-secondary: var(--gb-yellow);--md-secondary-container: #e9c77c;--md-on-secondary-container: #4a2e00;--md-tertiary: var(--gb-purple);--md-tertiary-container: #efd6e4;--md-on-tertiary-container: #4a2a3e;--md-error: var(--gb-red);--md-error-container: var(--gb-visual-red);--md-on-error-container: #6a1e1e;--md-surface: var(--gb-bg0);--md-surface-dim: var(--gb-bg-dim);--md-surface-container-lowest: #fdfae6;--md-surface-container-low: var(--gb-bg1);--md-surface-container: var(--gb-bg2);--md-surface-container-high: var(--gb-bg3);--md-surface-container-highest: var(--gb-bg4);--md-on-surface: var(--gb-fg1);--md-on-surface-variant: var(--gb-grey2);--md-outline: var(--gb-grey1);--md-outline-variant: var(--gb-bg5);--md-elev-1: 0 1px 2px rgba(79, 56, 41, .18), 0 1px 3px 1px rgba(79, 56, 41, .1);--md-elev-2: 0 1px 2px rgba(79, 56, 41, .2), 0 2px 6px 2px rgba(79, 56, 41, .12);color-scheme:light}:root[data-theme=dark]{--gb-bg-dim: #141617;--gb-bg0: #1d2021;--gb-bg1: #282828;--gb-bg2: #282828;--gb-bg3: #3c3836;--gb-bg4: #3c3836;--gb-bg5: #504945;--gb-fg0: #d4be98;--gb-fg1: #ddc7a1;--gb-red: #ea6962;--gb-orange: #e78a4e;--gb-yellow: #d8a657;--gb-green: #a9b665;--gb-aqua: #89b482;--gb-blue: #7daea3;--gb-purple: #d3869b;--gb-grey0: #7c6f64;--gb-grey1: #928374;--gb-grey2: #a89984;--gb-visual-yellow: #473c29;--gb-visual-red: #442e2d;--gb-visual-blue: #2e3b3b;--md-primary: var(--gb-orange);--md-on-primary: #2a1200;--md-primary-container: #5c3a1e;--md-on-primary-container: #f5d2a6;--md-secondary: var(--gb-yellow);--md-secondary-container: var(--gb-visual-yellow);--md-on-secondary-container: #ecd39a;--md-tertiary: var(--gb-purple);--md-tertiary-container: #4a3340;--md-on-tertiary-container: #efc5d7;--md-error: var(--gb-red);--md-error-container: var(--gb-visual-red);--md-on-error-container: #f4b8b3;--md-surface: var(--gb-bg0);--md-surface-dim: var(--gb-bg-dim);--md-surface-container-lowest: #161819;--md-surface-container-low: var(--gb-bg1);--md-surface-container: #32302f;--md-surface-container-high: var(--gb-bg3);--md-surface-container-highest: #45403d;--md-on-surface: var(--gb-fg0);--md-on-surface-variant: var(--gb-grey2);--md-outline: var(--gb-grey1);--md-outline-variant: var(--gb-bg5);--md-elev-1: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px 1px rgba(0, 0, 0, .2);--md-elev-2: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 6px 2px rgba(0, 0, 0, .25);color-scheme:dark}:root{--bg: var(--md-surface);--text: var(--md-on-surface);--muted: var(--md-on-surface-variant);--accent: var(--md-primary);--danger: var(--md-error);--shape-xs: 4px;--shape-sm: 8px;--shape-md: 12px;--shape-lg: 16px;--shape-xl: 28px;--shape-full: 999px}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:Roboto,Roboto Flex,system-ui,-apple-system,Segoe UI,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}#app{min-height:100dvh;display:flex;flex-direction:column}main{flex:1;width:100%;max-width:560px;margin:0 auto;padding:16px 16px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}h1,h2,h3{margin:0;font-weight:400}h1{font-size:2.25rem;line-height:2.75rem}h2{font-size:1.375rem;line-height:1.75rem}h3{font-size:.875rem;line-height:1.25rem;font-weight:500;letter-spacing:.1px;color:var(--muted)}p{margin:0}a{color:var(--md-primary);text-decoration:none}strong{font-weight:600}.muted{color:var(--muted)}.small{font-size:.875rem;line-height:1.25rem;letter-spacing:.25px}.center{text-align:center}.row{display:flex;gap:8px;align-items:center}.row.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.stack{display:flex;flex-direction:column;gap:10px}.card{background:var(--md-surface-container-low);border:1px solid transparent;border-radius:var(--shape-md);padding:16px;display:flex;flex-direction:column;gap:12px}.card.accent{background:var(--md-surface-container-lowest);border-color:var(--md-outline-variant);box-shadow:var(--md-elev-1)}.card.gold{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}.card.gold .muted{color:color-mix(in srgb,var(--md-on-tertiary-container) 80%,transparent)}.card.revealed{background:var(--md-primary-container);color:var(--md-on-primary-container)}.card.revealed .muted{color:color-mix(in srgb,var(--md-on-primary-container) 80%,transparent)}button,.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:var(--md-secondary-container);color:var(--md-on-secondary-container);font:inherit;font-size:.875rem;font-weight:500;letter-spacing:.1px;padding:0 24px;height:40px;min-height:40px;border-radius:var(--shape-full);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;transition:box-shadow .15s ease,opacity .15s;-webkit-tap-highlight-color:transparent}button:after,.btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:currentColor;opacity:0;transition:opacity .15s;pointer-events:none}button:hover:after,.btn:hover:after{opacity:.08}button:active:after,.btn:active:after{opacity:.12}button:disabled,.btn[aria-disabled=true]{opacity:.38;cursor:not-allowed}button:disabled:after{opacity:0!important}.btn-primary{background:var(--md-primary);color:var(--md-on-primary)}.btn-primary:hover{box-shadow:var(--md-elev-1)}.btn-gold{background:var(--md-tertiary);color:var(--md-surface)}.btn-danger{background:transparent;color:var(--md-error);border:1px solid var(--md-outline)}.btn-ghost{background:transparent;color:var(--md-primary);padding:0 12px}.btn-block{width:100%}.btn-lg{height:56px;min-height:56px;font-size:1rem;border-radius:var(--shape-lg)}.btn-sm{height:32px;min-height:32px;padding:0 14px;font-size:.8125rem}input[type=text],input[type=url]{width:100%;font:inherit;padding:14px 16px;height:56px;border-radius:var(--shape-sm);border:none;background:var(--md-surface-container-highest);color:var(--text);transition:box-shadow .15s}input::placeholder{color:var(--md-on-surface-variant)}input:hover{box-shadow:inset 0 0 0 1px var(--md-outline-variant)}input:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--md-primary) 22%,transparent)}input.code{text-transform:uppercase;letter-spacing:.3em;font-weight:500;font-size:1.5rem;text-align:center}.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--shape-sm);font-size:.8125rem;font-weight:500;letter-spacing:.1px;background:transparent;color:var(--md-on-surface-variant);border:1px solid var(--md-outline-variant);white-space:nowrap}.pill.ok{color:var(--md-on-secondary-container);background:var(--md-secondary-container);border-color:transparent}.pill.warn{color:var(--md-on-error-container);background:var(--md-error-container);border-color:transparent}.pill.host{color:var(--md-on-tertiary-container);background:var(--md-tertiary-container);border-color:transparent}.pill.gold{color:var(--md-on-tertiary-container);background:var(--md-tertiary-container);border-color:transparent;font-variant-numeric:tabular-nums}.topbar{position:sticky;top:0;z-index:5;background:var(--md-surface);padding:0 8px 0 16px;padding-top:env(safe-area-inset-top)}.topbar .inner{max-width:560px;margin:0 auto;height:64px;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.topbar .inner>.row{min-width:0;flex:none}.brand{font-size:1.375rem;display:flex;gap:10px;align-items:center;min-width:0}.brand .label{overflow:hidden;text-overflow:ellipsis}.brand svg{width:24px;height:24px;color:var(--md-primary)}.brand{white-space:nowrap}.code-pill{font-weight:500;letter-spacing:.18em;padding-left:14px;color:var(--md-on-surface);background:var(--md-surface-container-high);border-color:transparent}.topbar .btn-ghost{width:40px;padding:0;color:var(--md-on-surface-variant);font-size:1.1rem}.hostbar{position:sticky;bottom:0;z-index:5;margin:auto -16px calc(-24px - env(safe-area-inset-bottom));padding-top:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--md-surface-container);display:flex;flex-direction:column;gap:10px}.player-list{display:flex;flex-direction:column;gap:2px}.player{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:var(--shape-md);background:var(--md-surface-container)}.player.me{background:var(--md-surface-container-high)}.player .name{font-weight:500}.player .dot{width:10px;height:10px;border-radius:50%;background:var(--md-outline-variant);flex:none}.player .dot.on{background:var(--gb-blue)}.track{display:flex;gap:14px;align-items:center}.track img,.track .art{width:72px;height:72px;border-radius:var(--shape-md);object-fit:cover;background:var(--md-surface-container-highest);flex:none}.track.big img,.track.big .art{width:108px;height:108px;border-radius:var(--shape-lg)}.track .title{font-weight:500;font-size:1.125rem;line-height:1.5rem}.track.big .title{font-size:1.375rem;line-height:1.75rem}.track .sub{color:var(--muted)}.vote-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.vote-grid button{height:auto;min-height:60px;padding:10px 12px;border-radius:var(--shape-md);font-size:1.0625rem;line-height:1.25;white-space:normal;overflow-wrap:anywhere}.vote-grid button.selected{background:var(--md-primary);color:var(--md-on-primary);box-shadow:var(--md-elev-1)}.card.hero{flex:1 1 auto;min-height:0;justify-content:center}@media(min-height:800px){.card.hero .track.big{flex-direction:column;align-items:stretch;text-align:center;gap:12px;flex:1 1 auto;min-height:0}.card.hero .track.big .artwrap{flex:1 1 auto;min-height:108px;width:auto;height:auto}.card.hero .track.big>.grow{flex:none}.card.hero .track.big .artwrap img,.card.hero .track.big .artwrap .art{top:0;right:0;bottom:0;left:0;margin:auto;width:var(--s, 108px);height:var(--s, 108px);border-radius:var(--shape-lg)}}.result{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 12px;border-radius:var(--shape-sm);background:var(--md-surface-container)}.result .mark{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:700;flex:none}.result.correct .mark{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}.result.wrong .mark{background:var(--md-error-container);color:var(--md-on-error-container)}.scoreboard{display:flex;flex-direction:column;gap:4px}.score-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 16px;border-radius:var(--shape-md);background:var(--md-surface-container)}.score-row .rank{width:24px;color:var(--muted);font-variant-numeric:tabular-nums}.score-row.first{background:var(--md-primary-container);color:var(--md-on-primary-container)}.score-row.first .rank{color:inherit}.score-row .pts{font-weight:500;font-size:1.375rem;font-variant-numeric:tabular-nums}.qr{display:block;width:176px;height:176px;border-radius:var(--shape-md);background:#fff;padding:10px;margin:0 auto}.toast-wrap{position:fixed;left:0;right:0;bottom:calc(100px + env(safe-area-inset-bottom));z-index:50;display:flex;justify-content:center;padding:0 16px;pointer-events:none}.toast{pointer-events:auto;max-width:520px;min-height:56px;padding:14px 20px;border-radius:var(--shape-md);background:var(--md-on-surface);color:var(--md-surface);box-shadow:var(--md-elev-2);font-size:1.0625rem;line-height:1.4;font-weight:500;text-align:center;animation:toast-in .28s cubic-bezier(.2,.8,.2,1) both}@keyframes toast-in{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.toast{animation:none}}.toast:not(.info){color:var(--md-error-container)}:root[data-theme=dark] .toast:not(.info){color:var(--gb-red)}.list{display:flex;flex-direction:column;gap:2px;max-height:50vh;overflow:auto}.list button{justify-content:flex-start;text-align:left;font-weight:400;height:auto;min-height:48px;padding:8px 12px;border-radius:var(--shape-sm);background:var(--md-surface-container);color:var(--md-on-surface)}details.card:not([open]){gap:0}details summary{cursor:pointer;font-weight:500;font-size:.875rem;letter-spacing:.1px;color:var(--md-primary);list-style:none;display:flex;align-items:center;gap:8px;min-height:40px}details summary:before{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;margin:0 6px 0 4px}details[open] summary:before{transform:rotate(45deg)}ol.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}kbd{font:inherit;font-weight:500;padding:0 6px;border-radius:var(--shape-xs);background:var(--md-surface-container-highest)}.step{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--md-primary-container);color:var(--md-on-primary-container);font-weight:500;font-size:.875rem;flex:none}.hero{padding:40px 0 12px;display:flex;flex-direction:column;align-items:center;gap:12px}.hero .mark{width:72px;height:72px;border-radius:var(--shape-xl);background:var(--md-primary-container);color:var(--md-on-primary-container);display:grid;place-items:center}.hero .mark svg{width:36px;height:36px}.fade{animation:fade .2s ease}@keyframes fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.segmented{display:flex;border:1px solid var(--md-outline);border-radius:var(--shape-full);overflow:hidden}.segmented button{flex:1;height:40px;min-height:40px;padding:0 8px;border-radius:0;background:transparent;color:var(--md-on-surface);font-size:.8125rem;border-left:1px solid var(--md-outline)}.segmented button:first-child{border-left:none}.segmented button.selected{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}.list .thumb{width:40px;height:40px;border-radius:var(--shape-xs);object-fit:cover;flex:none;background:var(--md-surface-container-highest)}.listen{display:flex;flex-direction:column;gap:10px}.listen .play{width:48px;height:48px;min-height:48px;padding:0;border-radius:50%;font-size:.9rem;flex:none}.listen .ring{position:relative;display:grid;place-items:center;flex:none;padding:5px;border-radius:50%}.listen .ring:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:conic-gradient(var(--md-primary) var(--p, 0%),color-mix(in srgb,currentColor 16%,transparent) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));opacity:0;transition:opacity .2s}.listen .ring.active:before{opacity:1}.listen .ring .play{position:relative}.standings{display:flex;flex-direction:column;gap:6px}.standing{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 14px;border-radius:var(--shape-md);background:var(--md-surface-container);transition:background .4s ease}.standing.me{box-shadow:inset 0 0 0 1px var(--md-outline-variant)}.standing.first{background:var(--md-primary-container);color:var(--md-on-primary-container)}.standing .rank{width:24px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--muted)}.standing.first .rank{color:inherit}.standing .who{display:flex;flex-direction:column;gap:4px;min-width:0}.standing .nm{font-weight:500}.standing .move{font-size:.8rem;font-weight:600}.standing .move.up{color:var(--gb-green)}.standing .move.down{color:var(--gb-red)}.standing .pts{font-weight:500;font-size:1.375rem;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}.standing .gain{font-size:.8rem;font-weight:600;color:var(--md-primary)}.standing.first .gain{color:inherit}.pill.streak{color:var(--gb-orange);background:color-mix(in srgb,var(--gb-orange) 14%,transparent);border-color:transparent}.pill.streak.hot{color:var(--gb-red);background:color-mix(in srgb,var(--gb-red) 14%,transparent)}.pill.streak.blazing{color:var(--md-on-primary);background:var(--gb-red)}.podium-wrap{position:relative;overflow:hidden;padding-bottom:8px}.podium{display:flex;gap:10px;align-items:flex-end;margin-top:20px;min-height:220px}.podium .pstep{flex:1;min-width:0}.podium .pstep.tied{flex:2}.podium.single{justify-content:center}.podium.single .pstep{flex:0 1 70%}.podium .names{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%}.podium .tie{opacity:.8}.podium .pstep{display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateY(40px);opacity:0;animation:rise .7s cubic-bezier(.2,.8,.2,1) forwards}.podium .nm{font-weight:500;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.podium .block{width:100%;border-radius:var(--shape-md) var(--shape-md) 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding-top:12px;background:var(--md-surface-container-high)}.podium .p1 .block{height:150px;background:var(--md-primary);color:var(--md-on-primary)}.podium .p2 .block{height:110px;background:var(--md-secondary-container);color:var(--md-on-secondary-container)}.podium .p3 .block{height:80px;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}.podium .medal{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:color-mix(in srgb,currentColor 18%,transparent)}.podium .score{font-size:1.5rem;font-weight:500;font-variant-numeric:tabular-nums}.invite .pill.code{letter-spacing:.2em;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.qr-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;overscroll-behavior:contain;touch-action:none;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--md-surface) 96%,transparent);cursor:pointer;animation:fadein .15s ease}.qr-sheet{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;max-width:100%}.qr-sheet .qr{width:min(80vw,60vh,420px);height:min(80vw,60vh,420px);padding:16px;border-radius:var(--shape-lg);background:#fff;box-shadow:0 12px 40px #0000002e}.qr-sheet .qr-code{font-size:2rem;font-weight:600;letter-spacing:.3em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:6px}.qr-sheet .qr-url{word-break:break-all;color:var(--muted)}.qr-sheet .qr-hint{color:var(--muted);margin-top:8px}@keyframes fadein{0%{opacity:0}to{opacity:1}}.linkcopy{display:flex;flex-direction:column;align-items:flex-start;gap:2px;height:auto;min-height:44px;padding:6px 10px;border-radius:var(--shape-sm);background:transparent;color:var(--md-on-surface);text-align:left;white-space:normal;line-height:1.3}.linkcopy strong{word-break:break-all}.linkcopy .hint{color:var(--md-primary);font-weight:500}.linkcopy:hover{background:var(--md-surface-container)}.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}.seg button{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;padding:12px 14px;height:auto;min-height:64px;white-space:normal;line-height:1.3;border-radius:var(--shape-md);border:1px solid var(--md-outline-variant);background:var(--md-surface-container);color:var(--md-on-surface);text-align:left}.seg button .t{font-weight:500;font-size:1rem}.seg button .small{color:var(--muted)}.seg button.on{background:var(--md-primary-container);color:var(--md-on-primary-container);border-color:transparent}.seg button.on .small{color:inherit;opacity:.85}.pill.scoreline{font-variant-numeric:tabular-nums}.duet-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(140px,1fr);gap:10px;flex:1 1 auto;min-height:0}.duet-grid .song{container-type:size;display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:10px;border-radius:var(--shape-lg);background:var(--md-surface-container);border:2px solid transparent;min-width:0}.duet-grid .song.pickable{cursor:pointer}.duet-grid .song.selected{border-color:var(--md-primary);background:var(--md-primary-container);color:var(--md-on-primary-container)}.duet-grid .song.selected .muted{color:inherit;opacity:.8}.duet-grid .song.correct{border-color:var(--md-primary);background:var(--md-primary-container);color:var(--md-on-primary-container)}.duet-grid .song.wrong{border-color:var(--md-error);background:var(--md-error-container);color:var(--md-on-error-container)}.duet-grid .song .head{display:flex;gap:10px;align-items:center;min-width:0;min-height:0;flex:1 1 auto}.duet-grid .song .art{--s: clamp(48px, min( calc(100cqh - 52px) , 38cqw), 96px);position:relative;flex:none;width:var(--s);height:var(--s);border-radius:var(--shape-sm, 8px);background:var(--md-surface-container-highest);overflow:hidden}.duet-grid .song .art img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.duet-grid .song .mark{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-weight:700;font-size:1.1rem;background:color-mix(in srgb,var(--md-primary) 85%,transparent);color:var(--md-on-primary)}.duet-grid .song .mark.bad{background:color-mix(in srgb,var(--md-error) 85%,transparent);color:var(--md-on-error)}@media(min-height:760px){.duet-grid .song .head{flex-direction:column;align-items:stretch;gap:8px}.duet-grid .song .art{--s: clamp(48px, calc(100cqh - 126px) , 100cqw);align-self:center}.duet-grid .song .title{font-size:1rem}}.duet-grid .song .title{font-weight:500;font-size:.9375rem;line-height:1.2;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.duet-grid .song .sub{overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2}.listen.compact{flex-direction:row;align-items:center;gap:8px}.listen.compact .play{width:36px;height:36px;min-height:36px;font-size:.75rem;box-sizing:border-box;border:1.5px solid var(--md-outline);background:var(--md-surface-container-low);color:var(--md-on-surface)}.listen.compact .ring{padding:4px}.listen.compact .spotify-pill{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 12px;border-radius:var(--shape-full);background:var(--md-primary);color:var(--md-on-primary);font-weight:500;font-size:.8125rem;white-space:nowrap;text-decoration:none}.listen.compact .spotify-pill svg{width:18px;height:18px;margin:0;color:inherit;flex:none}.listen.compact .spotify-pill .short{display:none}@container (max-width: 176px){.listen.compact .spotify-pill .long{display:none}.listen.compact .spotify-pill .short{display:inline}}.listen.compact .spotify-pill:hover{filter:brightness(1.06)}.duet-grid .song.selected .listen.compact .play,.duet-grid .song.correct .listen.compact .play,.duet-grid .song.wrong .listen.compact .play{border-color:currentColor;color:inherit;background:transparent}.duet-grid .song.selected .listen.compact .ring:before,.duet-grid .song.correct .listen.compact .ring:before{background:conic-gradient(currentColor var(--p, 0%),color-mix(in srgb,currentColor 16%,transparent) 0)}.duet-scores{display:grid;grid-template-columns:1fr 1fr;gap:12px}.duet-scores .tile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:20px 12px;border-radius:var(--shape-lg);background:var(--md-surface-container)}.duet-scores .tile.winner{background:var(--md-primary);color:var(--md-on-primary)}.duet-scores .tile.winner .muted{color:inherit;opacity:.85}.duet-scores .tile .nm{font-weight:500}.duet-scores .tile .big{font-size:3rem;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}.overlap .stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.egg{display:flex;flex-direction:column}.egg-body{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:24px 8px}.egg-body h1{font-size:2.25rem;line-height:1.15}.egg-wave{width:min(100%,320px);height:80px;overflow:hidden;fill:none;stroke-width:4;stroke-linecap:round;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}.egg-wave path{animation:wave 2.4s linear infinite}.egg-wave .w1{stroke:var(--md-primary)}.egg-wave .w2{stroke:var(--md-tertiary);animation-delay:-.8s;opacity:.85}@keyframes wave{0%{transform:translate(0)}to{transform:translate(-120px)}}@media(prefers-reduced-motion:reduce){.egg-wave path{animation:none}.egg-wave .w2{transform:translate(-40px)}}.overlap .stat{display:flex;flex-direction:column;gap:2px;min-width:0}.overlap .pct{font-size:2.25rem;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}a.pill.follow{color:var(--md-on-secondary-container);background:var(--md-secondary-container);border-color:transparent;text-decoration:none}a.pill.follow svg{flex:none}@keyframes rise{to{transform:none;opacity:1}}.confetti{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;opacity:0;animation-name:fall;animation-timing-function:linear;animation-iteration-count:2}.confetti.c0{background:var(--gb-orange)}.confetti.c1{background:var(--gb-yellow)}.confetti.c2{background:var(--gb-purple)}.confetti.c3{background:var(--gb-blue)}.confetti.c4{background:var(--gb-red)}.confetti.c5{background:var(--gb-aqua)}@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}to{transform:translateY(320px) rotate(540deg);opacity:0}}@media(prefers-reduced-motion:reduce){.podium .pstep{animation:none;transform:none;opacity:1}.confetti{display:none}}.vote-grid button:disabled{opacity:.55}.vote-grid button.correct:disabled{opacity:1;background:var(--md-primary);color:var(--md-on-primary);box-shadow:none}.vote-grid button.wrong:disabled{opacity:1;background:var(--md-error-container);color:var(--md-on-error-container);box-shadow:inset 0 0 0 2px var(--md-error)}.verdict{font-size:1.125rem;font-weight:500}.verdict.ok{color:var(--md-primary)}.verdict.bad{color:var(--md-error)}.stepper{display:inline-flex;align-items:center;border:1px solid var(--md-outline);border-radius:var(--shape-full);overflow:hidden}.stepper button{width:44px;height:40px;min-height:40px;padding:0;border-radius:0;background:transparent;color:var(--md-on-surface);font-size:1.2rem}.stepper .val{min-width:32px;text-align:center;font-weight:500;font-variant-numeric:tabular-nums}.slot{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--shape-md);background:var(--md-surface-container)}.slot.choosing{background:var(--md-surface-container-high)}.shimmer{background:linear-gradient(90deg,var(--md-surface-container-high) 25%,var(--md-surface-container-highest) 50%,var(--md-surface-container-high) 75%);background-size:200% 100%;animation:shimmer 1.1s linear infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.track .artwrap{position:relative;width:72px;height:72px;flex:none}.track.big .artwrap{width:108px;height:108px}.track .artwrap .art,.track .artwrap img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.track img.hidden{opacity:0}.track img{transition:opacity .2s ease}.track .bar{height:14px;border-radius:7px;margin:6px 0}.track .bar.small{height:11px}.track.big .bar{height:18px}@media(prefers-reduced-motion:reduce){.shimmer{animation:none}}.spin{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;flex:none}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spin{animation-duration:2s}}.idle{max-width:540px;margin:12px auto 0;padding:10px 14px;border-radius:var(--shape-md);background:var(--md-error-container);color:var(--md-on-error-container);display:flex;align-items:center;gap:10px;font-size:.875rem}.idle button{background:var(--md-error);color:var(--md-error-container)}.icon-btn{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;background:transparent;color:var(--md-on-surface-variant)}.icon-btn svg{width:22px;height:22px}.icon-btn.tonal{background:var(--md-surface-container-highest);color:var(--md-on-surface)}.cardhead{display:flex;align-items:center;gap:8px}.cardhead .spacer{width:40px;flex:none}.code-boxes{display:flex;gap:8px;justify-content:center}.code-boxes input{width:52px;height:60px;padding:0;text-align:center;font-size:1.6rem;font-weight:500;text-transform:uppercase;border-radius:var(--shape-sm);letter-spacing:0}.pill.multiline{white-space:normal;height:auto;padding:6px 12px;text-align:center;max-width:100%}.foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;align-items:center;padding-top:8px}.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tile{height:auto;min-height:148px;padding:18px 14px;border-radius:var(--shape-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--md-surface-container-low);color:var(--md-on-surface);border:1px solid var(--md-outline-variant)}.tile svg{width:32px;height:32px;margin-bottom:4px;color:var(--md-primary)}.tile-label{font-size:1.125rem;font-weight:500}.tile.primary{background:var(--md-primary);color:var(--md-on-primary);border-color:transparent}.tile.primary svg{color:inherit}.tile.primary .small{opacity:.85}.card.accent .code-boxes input{width:56px;height:66px;font-size:1.75rem}
