@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-vietnamese-standard-normal-rJmnGBSt.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-latin-ext-standard-normal-7khWdh9v.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-latin-standard-normal-DY7AcnAa.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--ink:#1a1430;--groove:#241d40;--groove-deep:#120d24;--line:#40366a;--paper:#f6f2ff;--muted:#aaa1cc;--me:#ffc83d;--them:#52d3ff;--hit:#45e39a;--miss:#ff5d73;--radius:14px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Archivo Variable,system-ui,sans-serif;font-size:106.25%}*{box-sizing:border-box}body{background:repeating-radial-gradient(circle at 110% -10%, transparent 0 7px, #ffffff05 7px 8px), var(--ink);min-height:100vh;color:var(--paper);margin:0;line-height:1.5}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}button:disabled{cursor:default}:focus-visible{outline:2px solid var(--me);outline-offset:3px}a{color:var(--them)}h1,h2,p{margin:0}.display{letter-spacing:-.01em;text-wrap:balance;font-size:clamp(2.1rem,8.5vw,3.3rem);font-weight:800;font-stretch:125%;line-height:1.02}h2{font-size:1.1rem;font-weight:700;font-stretch:112%}.lead{color:var(--muted);max-width:34em;font-size:1.05rem}.error{color:var(--miss)}.primary,.secondary{border-radius:var(--radius);font-weight:700;font-stretch:112%;transition:transform .12s,background-color .12s,border-color .12s}.primary{background:var(--me);color:var(--ink);padding:16px 24px;font-size:1.05rem}.primary:hover:not(:disabled){transform:translateY(-2px)}.primary:active:not(:disabled){transform:translateY(1px)}.primary:disabled,.secondary:disabled{opacity:.35}.secondary{border:1.5px solid var(--line);padding:12px 20px}.secondary:hover:not(:disabled){border-color:var(--paper)}.text-button{color:var(--muted);text-underline-offset:3px;text-decoration:underline}.text-button:hover{color:var(--paper)}.field{color:var(--muted);flex-direction:column;gap:6px;font-size:.95rem;display:flex}.field input{font:inherit;color:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);background:var(--groove-deep);padding:12px 14px;font-size:1.05rem}.field input:focus{border-color:var(--me);outline:none}.stack{flex-direction:column;gap:14px;display:flex}.topbar{align-items:center;gap:16px;max-width:1100px;margin:0 auto;padding:16px;display:flex}.wordmark{align-items:center;gap:10px;font-size:1.15rem;font-weight:800;font-stretch:125%;display:flex}.mark{background:radial-gradient(circle, var(--ink) 0 2px, transparent 2.5px), linear-gradient(90deg, var(--me) 50%, var(--them) 50%);width:22px;height:22px;box-shadow:0 0 0 3px var(--groove-deep);border-radius:50%}.lives{color:var(--miss);letter-spacing:3px;margin-left:auto}.lives .lost{opacity:.2}.volume{color:var(--muted);align-items:center;gap:8px;margin-left:auto;display:flex}.lives+.volume{margin-left:0}.volume svg{fill:currentColor;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;width:20px;height:20px}.volume input{width:90px;accent-color:var(--me)}.home,.duel{flex-direction:column;gap:28px;max-width:34rem;margin:0 auto;padding:3vh 16px 64px;display:flex}.intro{flex-direction:column;gap:14px;display:flex}.name-form{align-items:flex-end;gap:10px;display:flex}.name-form .field{flex:1}.name-form .secondary{padding-block:13px}.greeting{color:var(--muted)}.greeting strong{color:var(--paper)}.greeting .text-button{margin-left:6px}.new-duel{background:var(--groove);border-radius:22px;flex-direction:column;gap:16px;padding:20px;display:flex}.mottos{scroll-snap-type:x mandatory;scrollbar-width:none;grid-auto-columns:158px;grid-auto-flow:column;gap:10px;margin-inline:-20px;padding:4px 20px 10px;scroll-padding-inline:20px;display:grid;overflow-x:auto}.sleeve{aspect-ratio:1;background:radial-gradient(circle 44px at calc(100% + 18px) 50%, var(--groove-deep) 97%, transparent), hsl(var(--hue) 52% 30%);color:hsl(var(--hue) 80% 92%);cursor:pointer;scroll-snap-align:start;border-radius:6px;flex-direction:column;gap:4px;padding:12px;transition:transform .12s;display:flex;position:relative}.sleeve:hover{transform:translateY(-2px)}.sleeve.active{outline:3px solid var(--me);outline-offset:2px}.sleeve input{opacity:0;pointer-events:none;position:absolute}.sleeve:has(input:focus-visible){outline:3px solid var(--paper);outline-offset:2px}.sleeve-name{overflow-wrap:break-word;font-size:1.02rem;font-weight:800;font-stretch:100%;line-height:1.05}.sleeve-text{opacity:.85;padding-right:24px;font-size:.78rem;line-height:1.3}.sleeve-count{opacity:.7;margin-top:auto;font-size:.75rem}@media (width>=600px){.mottos{grid-template-columns:repeat(3,1fr);grid-auto-flow:row;margin-inline:0;padding:4px 0 0;overflow:visible}}.hint{color:var(--muted);font-size:.9rem}.duel-group{flex-direction:column;gap:4px;display:flex}.duel-list{margin:0;padding:0;list-style:none}.duel-list button{border-bottom:1px solid var(--line);text-align:left;grid-template-columns:1fr auto;grid-template-areas:"opponent score""state score";column-gap:16px;width:100%;padding:14px 4px;display:grid}.duel-list button:hover .opponent{text-underline-offset:3px;text-decoration:underline}.opponent{grid-area:opponent;font-size:1.05rem;font-weight:700;font-stretch:112%}.state{color:var(--muted);grid-area:state;font-size:.9rem}.mini-score{font-variant-numeric:tabular-nums;grid-area:score;align-self:center;gap:10px;font-size:1.6rem;font-weight:800;font-stretch:125%;display:flex}.me{color:var(--me)}.them{color:var(--them)}.empty{color:var(--muted)}.solo{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;padding-top:24px;display:flex}.solo p{color:var(--muted);font-size:.95rem}.over{padding-top:10vh}.over .display{color:var(--me)}.actions{flex-wrap:wrap;gap:12px;display:flex}.era{color:var(--muted)}.duel .primary{width:100%}.duel>.text-button{align-self:center}.status{text-align:center;margin-inline:auto}.push-prompt{border-radius:var(--radius);background:var(--groove);color:var(--muted);justify-content:space-between;align-items:center;gap:16px;padding:16px;font-size:.95rem;display:flex}.push-prompt .secondary{flex:none}@media (width<=560px){.push-prompt{flex-direction:column;align-items:stretch}}.live:before{content:"";background:var(--them);vertical-align:.1em;border-radius:50%;width:8px;height:8px;margin-right:8px;animation:1.4s ease-in-out infinite pulse;display:inline-block}@keyframes pulse{50%{opacity:.25}}.scoreboard{flex-direction:column;align-items:center;gap:14px;display:flex}.disc,.record{background:conic-gradient(from 40deg, transparent 0 8%, #ffffff14 13%, transparent 18% 58%, #ffffff0f 63%, transparent 68%), repeating-radial-gradient(circle, var(--groove-deep) 0 2px, #1d1736 2px 4px);border-radius:50%;position:relative;box-shadow:0 0 0 1px #ffffff10,0 24px 48px #05020f99}.disc{aspect-ratio:1;place-items:center;width:min(70vw,260px);animation:.9s cubic-bezier(.2,.8,.2,1) land;display:grid}@keyframes land{0%{opacity:0;transform:rotate(-120deg)scale(.85)}}.label{aspect-ratio:1;width:50%;color:var(--ink);font-variant-numeric:tabular-nums;border-radius:50%;grid-template-columns:1fr 1fr;font-size:clamp(2rem,9vw,2.9rem);font-weight:900;font-stretch:125%;line-height:1;display:grid;position:relative;overflow:hidden}.label span{color:var(--ink);place-items:center;display:grid}.label .me{background:var(--me);padding-right:6px}.label .them{background:var(--them);padding-left:6px}.label:after{content:"";background:var(--groove-deep);border-radius:50%;width:8px;height:8px;margin:-4px 0 0 -4px;position:absolute;inset:50% auto auto 50%}.names{text-align:center;overflow-wrap:anywhere;grid-template-columns:1fr 1fr;gap:12px;width:min(70vw,260px);font-weight:700;font-stretch:112%;display:grid}.rounds{margin:0;padding:0;list-style:none}.rounds li{border-bottom:1px solid var(--line);grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px 8px;display:grid}.rounds li.current{border-radius:var(--radius);background:var(--groove);border-bottom-color:#0000}.round-name{color:var(--muted);font-size:.9rem}.current .round-name{color:var(--paper);font-weight:700}.dots{gap:7px;display:flex}.dots.them{justify-content:flex-end}.dots span{border:2px solid var(--line);border-radius:50%;width:15px;height:15px}.dots.me .hit{background:var(--me);border-color:var(--me)}.dots.them .hit{background:var(--them);border-color:var(--them)}.dots .miss{border-color:var(--miss);background:radial-gradient(circle, var(--miss) 0 2.5px, transparent 3px)}.dots .skip{border-style:dashed;border-color:var(--muted)}.dots .hidden{background:var(--line)}.note{color:var(--hit);text-align:center}.link{background:var(--groove-deep);color:var(--muted);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;border-radius:10px;padding:10px 12px;font-size:.8rem}.game{flex-direction:column;max-width:34rem;min-height:calc(100dvh - 70px);margin:0 auto;padding:0 16px;display:flex}.game-head{color:var(--muted);justify-content:space-between;gap:16px;padding:4px 0 14px;font-size:.95rem;display:flex}.game-head p:first-child{color:var(--paper);font-weight:700;font-stretch:112%}.timeline{flex-direction:column;gap:6px;margin:0;padding:0 0 20px;list-style:none;display:flex}.card{border-radius:var(--radius);background:hsl(var(--hue) 42% 22%);border:1px solid hsl(var(--hue) 48% 34%);grid-template-columns:5.4rem 1fr;align-items:center;gap:12px;padding:10px 14px;display:grid}.card .year{font-variant-numeric:tabular-nums;color:hsl(var(--hue) 90% 82%);font-size:1.55rem;font-weight:800;font-stretch:125%;line-height:1}.song{flex-direction:column;min-width:0;display:flex}.card .title{overflow-wrap:break-word;font-weight:650;line-height:1.25}.card .artist{opacity:.75;font-size:.85rem}.card.fresh{box-shadow:0 0 0 2px var(--hit);animation:.45s ease-out drop}@keyframes drop{0%{opacity:0;transform:translateY(-14px)scale(1.03)}}.card.ghost{border:1.5px dashed var(--miss);background:0 0}.card.ghost .year,.card.ghost .artist{color:var(--miss);opacity:1}.gap button{width:100%;height:30px;color:var(--muted);border-radius:var(--radius);align-items:center;gap:10px;font-weight:700;transition:height .15s,background-color .15s;display:flex}.gap button:before,.gap button:after{content:"";border-top:2px dashed var(--line);flex:1}.gap button:hover{color:var(--me)}.gap button:hover:before,.gap button:hover:after{border-color:var(--me)}.gap.selected button{background:var(--me);height:46px;color:var(--ink);justify-content:center}.gap.selected button:before,.gap.selected button:after{content:none}.dock{padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:var(--groove);box-shadow:0 -16px 32px var(--ink);border-radius:22px 22px 0 0;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin:auto -16px 0;display:grid;position:sticky;bottom:0}.record{flex:none;place-items:center;width:68px;height:68px;display:grid}.record-label{aspect-ratio:1;background:var(--me);border-radius:50%;place-items:center;width:46%;display:grid}.record-label svg{width:44%;fill:var(--ink)}.record.spinning{animation:2.4s linear infinite spin}.record.spinning svg{animation:2.4s linear infinite reverse spin}@keyframes spin{to{transform:rotate(360deg)}}.dock-text{min-width:0;color:var(--muted);flex-direction:column;font-size:.9rem;display:flex}.dock-text strong{color:var(--paper);font-size:1.05rem;font-stretch:112%;line-height:1.25}.dock-text .year{color:var(--me);font-variant-numeric:tabular-nums;margin-right:4px;font-stretch:125%}.dock-text a{white-space:nowrap;margin-left:6px}.verdict{color:var(--hit);font-weight:700}.verdict.wrong{color:var(--miss)}.dock .primary{padding:14px 20px}@media (width<=560px){.volume input{width:64px}.home .primary,.over .primary{width:100%}.dock{grid-template-columns:auto 1fr}.dock .primary{grid-column:1/-1}}@media (prefers-reduced-motion:reduce){.disc,.record.spinning,.record.spinning svg,.card.fresh,.live:before{animation:none}.primary,.gap button,.sleeve,.bar span{transition:none}}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.solo-actions{flex-direction:column;align-items:center;gap:8px;display:flex}.stepper{color:var(--muted);align-items:center;gap:12px;display:flex}.stepper span{margin-right:auto}.stepper .secondary{width:48px;height:48px;padding:0;font-size:1.4rem;line-height:1}.stepper output{text-align:center;min-width:2ch;color:var(--paper);font-variant-numeric:tabular-nums;font-size:1.6rem;font-weight:800;font-stretch:125%}.player-fields{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:10px;margin:0;padding:0;list-style:none;display:grid}.targets{border:0;flex-wrap:wrap;gap:10px;margin:0;padding:0;display:flex}.targets legend{color:var(--muted);margin-bottom:8px;padding:0;font-size:.95rem}.targets label{border:1.5px solid var(--line);border-radius:var(--radius);text-align:center;cursor:pointer;min-width:64px;padding:10px 16px;font-weight:700;font-stretch:112%}.targets label.active{border-color:var(--me);background:var(--me);color:var(--ink)}.targets input{opacity:0;pointer-events:none;position:absolute}.targets label:has(input:focus-visible){outline:2px solid var(--paper);outline-offset:3px}.standings{margin:0;padding:0;list-style:none}.standings li{border-bottom:1px solid var(--line);grid-template-columns:1fr auto;gap:6px 16px;padding:12px 10px;display:grid}.standings li.current,.standings li.winner{border-radius:var(--radius);background:var(--groove);border-bottom-color:#0000}.player-name{overflow-wrap:anywhere;font-weight:700;font-stretch:112%}.player-score{color:var(--muted);font-variant-numeric:tabular-nums}.current .player-score,.winner .player-score{color:var(--me);font-weight:700}.bar{background:var(--groove-deep);border-radius:3px;grid-column:1/-1;height:6px;overflow:hidden}.bar span{border-radius:inherit;background:var(--them);height:100%;transition:width .4s ease-out;display:block}.current .bar span,.winner .bar span{background:var(--me)}
