@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#111411;--panel:#1a1e19;--line:#343b30;--muted:#a3ab9d;--text:#f0f3e9;--accent:#c1f86b;--accent-ink:#17220d;font-family:'DM Sans',sans-serif;color:var(--text);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled,select:disabled{cursor:default}button:disabled{opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{color:inherit}a{color:inherit;text-decoration:none}.site-header{height:100px;max-width:1320px;margin:auto;padding:0 56px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:700;letter-spacing:-1.4px;display:flex;align-items:center}.brand>span:not(.brand-icon):not(.brand-dot){color:var(--accent)}.brand-icon{color:var(--accent);font-size:24px;letter-spacing:1px;margin-right:12px}.brand-dot{font-size:12px;align-self:flex-start;margin:5px}.help-button{border:0;background:none;display:flex;gap:10px;align-items:center;font-size:14px;color:#ccd3c5}.circle-help{border:1px solid #839079;border-radius:50%;width:21px;height:21px;font-size:13px;display:grid;place-items:center}main{max-width:1100px;margin:0 auto;padding:49px 40px 0}.heading{padding-bottom:32px}.eyebrow{font-size:12px;font-weight:650;letter-spacing:2px;display:flex;align-items:center;gap:8px;color:#bdc7b3}.live-dot{height:6px;width:6px;border-radius:50%;background:var(--accent)}h1{font-family:'Space Grotesk',sans-serif;font-size:66px;letter-spacing:-3.8px;line-height:1.04;font-weight:500;margin:18px 0 15px}h1 br{display:none}h1 em{font-style:normal;color:var(--accent)}.heading>p{font-size:16px;color:var(--muted);margin:0}.game-layout{display:grid;grid-template-columns:275px 1fr;gap:35px}.sidebar{padding-top:10px}.section-label{font-size:12px;font-weight:650;letter-spacing:1.7px;color:var(--muted)}.mode-options{display:grid;gap:10px;margin-top:15px}.mode-card{padding:20px 16px;display:flex;align-items:center;text-align:left;gap:13px;border-radius:10px;border:1px solid var(--line);background:#181c16;position:relative}.mode-card.active{border-color:#819d57;background:#25321c}.mode-card:hover{border-color:#789657}.mode-icon{font-size:26px;color:var(--muted);line-height:1}.mode-card.active .mode-icon{color:var(--accent)}.mode-card strong{font-size:15px;font-weight:600;display:block}.mode-card small{display:block;font-size:12px;color:var(--muted);margin-top:5px;line-height:1.4}.mode-check{position:absolute;top:12px;right:12px;color:var(--accent);font-size:15px;display:none}.mode-card.active .mode-check{display:block}.infinity{font-size:30px}.genre-section{margin-top:32px}.label-row{display:flex;justify-content:space-between;gap:10px;align-items:center}.label-row>span{font-size:12px;color:#858e7e}select{width:100%;border:1px solid var(--line);border-radius:8px;padding:13px 12px;background:#1a1e18;color:var(--text);margin:12px 0 0;font-size:14px}select:disabled{color:#929c89}.genre-section>p{font-size:13px;color:#929c89;line-height:1.7;margin-top:12px}.small-note{border-top:1px solid var(--line);margin-top:30px;padding:22px 0;display:flex;align-items:center;gap:13px}.small-note>span{font-size:24px;color:var(--accent)}.small-note p{font-size:13px;line-height:1.8;color:#a8b09f;margin:0}.small-note strong{font-weight:400;color:#d5dccd}.game-panel{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:24px 28px 0;box-shadow:0 20px 70px #0002}.game-topline{display:flex;justify-content:space-between;align-items:center;gap:10px}.daily-label{font-size:11px;letter-spacing:1.7px;background:#2b3821;color:var(--accent);padding:7px 10px;border-radius:5px;font-weight:600}.date-label{font-size:12px;color:var(--muted)}.player{padding-top:27px}.track-label{font-size:10px;letter-spacing:2.2px;color:#9da890;text-align:center;font-weight:600}.player h2{font-family:'Space Grotesk',sans-serif;font-size:24px;letter-spacing:-.8px;font-weight:500;text-align:center;margin:10px 0 6px}.player>p{text-align:center;color:var(--muted);font-size:13px;margin:0}.waveform{height:85px;display:flex;align-items:center;justify-content:space-between;gap:3px;margin:18px 0 0;overflow:hidden}.waveform span{background:#3b4633;width:5px;min-width:2px;border-radius:3px;transition:background .2s}.waveform span.unlocked{background:#90b753}.waveform span.heard{background:var(--accent)}.timeline{display:flex;justify-content:space-between;color:#929e86;font-size:11px;font-variant-numeric:tabular-nums}.timeline strong{color:#c9d4be;font-weight:500}.timeline-divider{margin:0 6px;color:#637255}.play-row{display:flex;align-items:center;gap:14px;padding:19px 0 25px;border-bottom:1px solid var(--line)}.play-button{width:52px;height:52px;flex-shrink:0;border:0;border-radius:50%;background:var(--accent);color:#1f3210;display:grid;place-items:center;font-size:20px}.play-button:hover{background:#d5ff9b}.play-copy strong,.play-copy span{display:block}.play-copy strong{font-size:14px;font-weight:600}.play-copy span{font-size:12px;color:var(--muted);margin-top:4px}.volume-label{display:flex;align-items:center;gap:8px;margin-left:auto;color:#a5b096}.volume-label input{width:60px;accent-color:var(--accent);height:4px}.status{color:#d1dfa9;font-size:13px;line-height:1.5;min-height:18px;margin:10px 0}.status.error{color:#ffbc9d}.guess-label{font-size:11px;font-weight:600;letter-spacing:1.7px;color:#bec8b3}.search-wrapper{position:relative;margin-top:9px;display:flex;align-items:center;border:1px solid #46503d;border-radius:8px;background:#11160f}.search-wrapper:focus-within{border-color:var(--accent)}.search-icon{font-size:28px;margin-left:15px;color:#9eaa91}#song-search{width:100%;padding:15px 10px;background:none;border:none;color:var(--text);font-size:14px;outline:none}#song-search::placeholder{color:#8b9780}kbd{margin-right:14px;font-size:14px;color:#8e9a82}.guess-actions{display:flex;align-items:center;gap:10px;margin-top:12px}.guess-actions>span{font-size:12px;color:#9ba68f;margin-right:auto}.guess-button{border:0;border-radius:7px;background:var(--accent);color:var(--accent-ink);padding:12px 16px;font-size:13px;font-weight:700}.guess-button span{margin-left:12px}.guess-button:hover{background:#d5ff9b}.skip-button{background:none;border:1px solid var(--line);border-radius:7px;padding:11px 12px;font-size:13px}.skip-button span{color:#a4ae99;margin-left:7px}.attempts-heading{display:flex;justify-content:space-between;margin-top:29px;align-items:center}.attempts-heading .section-label{font-size:10px}.attempts-heading>span:last-child{font-size:11px;color:#8f9b81}.attempts{list-style:none;display:grid;gap:6px;padding:0;margin:11px 0 22px}.attempt{height:37px;display:flex;align-items:center;gap:12px;border:1px dashed #333e2b;border-radius:5px;padding:0 12px;font-size:12px;color:#79896b}.attempt-number{font-size:10px;min-width:13px;color:#879777;font-variant-numeric:tabular-nums}.attempt.filled{border-style:solid;background:#20261d;color:#d3dbc9}.attempt.correct{border-color:#6e9742;background:#293a1e;color:var(--accent)}.attempt.wrong .attempt-mark{color:#e7a98d}.attempt-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attempt-mark{margin-left:auto}.game-bottom{border-top:1px solid var(--line);padding:15px 0;display:flex;justify-content:space-between;font-size:11px;color:#9aa88c}.game-bottom>span:last-child{font-variant-numeric:tabular-nums}.how-strip{display:flex;justify-content:center;align-items:center;gap:26px;font-size:13px;color:#a9b29f;padding:28px 0 37px}.how-strip b{color:var(--accent);font-size:11px;margin-right:8px;font-weight:500}.how-strip i{font-style:normal;color:#58634d}footer{border-top:1px solid var(--line);max-width:1208px;margin:auto;padding:22px 0;display:flex;justify-content:space-between;font-size:12px;color:#808c75}footer a{color:#b0bba4}#suggestions{position:absolute;left:-1px;right:-1px;top:100%;margin:5px 0 0;padding:5px;list-style:none;background:#252e20;border:1px solid #526044;border-radius:8px;z-index:5;box-shadow:0 12px 25px #0007;max-height:220px;overflow:auto}#suggestions li{padding:10px;border-radius:5px;cursor:pointer;font-size:14px;display:flex;flex-direction:column;gap:3px}#suggestions li small{font-size:12px;color:#aab79b}#suggestions li[aria-selected=true],#suggestions li:hover{background:#3b4a2d}#suggestions .no-results{color:#bdc8b3;cursor:default}.result{padding:17px;background:#26371c;border:1px solid #607c44;border-radius:9px;margin-bottom:20px}.result-top{display:flex;gap:14px;align-items:center}.result img{width:62px;height:62px;border-radius:6px}.result h3{font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0 0 4px;overflow-wrap:anywhere}.result p{font-size:13px;margin:4px 0;color:#b8c8a7}.result a{display:inline-block;color:var(--accent);font-size:12px;margin-top:6px}.result-actions{display:flex;gap:8px;margin-top:17px}.result-actions button{flex:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{background:#1c2418;color:var(--text);border:1px solid #526044;border-radius:16px;padding:36px;max-width:460px;width:calc(100% - 32px);line-height:1.65}dialog::backdrop{background:#070a08cc;backdrop-filter:blur(5px)}dialog h2{font-family:'Space Grotesk',sans-serif;font-size:32px;line-height:1.15;letter-spacing:-1px;margin:20px 0}dialog p,dialog li{font-size:14px;color:#bbc8ad}dialog ol{padding-left:20px}dialog li{padding-left:5px;margin-bottom:10px}dialog .muted{font-size:12px;color:#91a180}.close-dialog{position:absolute;right:15px;top:10px;background:none;border:0;font-size:26px;color:#b3c3a4}dialog .guess-button{width:100%;margin-top:10px}[hidden]{display:none!important}@media(min-width:1300px){main{padding-top:50px}.heading{padding-bottom:38px}}@media(max-width:1000px){.site-header{padding:0 30px}main{padding:35px 30px 0}.game-layout{grid-template-columns:240px 1fr;gap:24px}.game-panel{padding:22px 20px 0}h1{font-size:55px}footer{margin:0 30px}.guess-actions{flex-wrap:wrap}.guess-actions>span{flex-basis:100%;margin-bottom:2px}.guess-button{flex:1}.how-strip{gap:17px}}@media(max-width:700px){.site-header{height:77px;padding:0 22px}.brand{font-size:24px}.help-button{font-size:12px;gap:7px}main{padding:30px 20px 0}.eyebrow{font-size:10px;letter-spacing:1.5px}.heading{padding-bottom:26px}h1{font-size:48px;letter-spacing:-2.5px;margin-top:15px}h1 br{display:block}.heading>p{font-size:14px}.game-layout{display:flex;flex-direction:column;gap:22px}.sidebar{padding:0}.sidebar>.section-label,.small-note{display:none}.mode-options{grid-template-columns:1fr 1fr;margin:0;gap:9px}.mode-card{padding:16px 10px;gap:9px;align-items:flex-start}.mode-card strong{font-size:13px}.mode-card small{font-size:11px;line-height:1.5}.mode-icon{font-size:22px}.mode-check{display:none!important}.genre-section{margin-top:16px}.genre-section>p{display:none}.label-row{float:left;padding-top:14px}.label-row>span{display:none}select{width:60%;display:block;margin:0 0 0 auto;padding:11px}.game-panel{padding:20px 18px 0;border-radius:12px}.player{padding-top:24px}.player h2{font-size:23px}.waveform{gap:2px}.guess-actions>span{flex-basis:auto;margin:0}.guess-actions{gap:8px}.guess-button{flex:initial;padding:11px 12px}.guess-actions>span{font-size:11px}.skip-button{font-size:12px;padding:10px}.guess-button span{display:none}.volume-label input{width:42px}.how-strip{gap:12px;font-size:11px;align-items:flex-start;padding:24px 0}.how-strip span{flex:1;line-height:1.7}.how-strip b{display:block}.how-strip i{display:none}footer{margin:0 20px;padding:20px 0;gap:15px;font-size:10px;line-height:1.7}.game-bottom{font-size:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}@media(max-width:380px){.guess-actions>span{flex-basis:100%}.guess-button{flex:1}.game-panel{padding-left:14px;padding-right:14px}.mode-icon{display:none}}
/* Keep game controls and song names readable at every viewport. */
@media(max-width:700px){.mode-options>a{grid-column:1 / -1}}
.difficulty-section{margin-top:24px}.difficulty-section>p{font-size:14px;color:var(--muted);line-height:1.6;margin:12px 0 0}.difficulty-section .section-label{font-size:14px;letter-spacing:1px}.date-label{text-align:right}.game-topline{flex-wrap:wrap}.game-bottom{gap:12px}.game-bottom>span:last-child{flex-shrink:0}
@media(max-width:700px){.difficulty-section{margin-top:16px}.difficulty-section .label-row{float:none;padding:0}.difficulty-section select{width:100%;margin-top:9px}.difficulty-section>p{margin-top:8px}.difficulty-section .label-row>span{display:inline}}
.section-label,.track-label,.guess-label,.daily-label,.attempts-heading .section-label,.attempt-number,.attempts-heading>span:last-child,.timeline,.game-bottom,.eyebrow{font-size:12px}
.mode-card small,.label-row>span,.date-label,.play-copy span,.genre-section>p,.small-note p,.how-strip,.guess-actions>span{font-size:13px}
.play-copy strong,.guess-button,.skip-button,.attempt,#song-search,select{font-size:14px}
.mode-card strong{font-size:15px}
.player>p{font-size:14px}
@media(max-width:700px){.mode-card{padding:15px 11px}.mode-card small{font-size:12px}.mode-card strong{font-size:14px}.mode-icon{display:none}.game-bottom{flex-wrap:wrap;gap:7px}.guess-actions>span{flex-basis:100%}.guess-actions .guess-button{flex:1}.how-strip{font-size:12px}.how-strip b{font-size:12px}footer{font-size:12px}.eyebrow{font-size:10px;letter-spacing:1px}.game-panel{min-width:0}.result-top{min-width:0}.result-top>div{min-width:0}}