:root{--bg: #0a0a0a;--bg-2: #0e0d0e;--panel: #131214;--panel-2: #1a181b;--bone: #e6e2c4;--bone-bright: #f7eabc;--bone-dim: #e6e2c499;--gold-muted: #d9cfa7;--line: #e6e2c426;--line-strong: #e6e2c440;--coral: #ff6568;--match: #8bbf4d;--close: #c9a64b;--font-display: "UnifrakturCook", "Geist", serif;--font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--radius: 4px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--bone);font-family:var(--font-sans);font-weight:400;-webkit-font-smoothing:antialiased}.app{max-width:540px;margin:0 auto;padding:1.25rem 1rem 1.75rem;display:flex;flex-direction:column;gap:1.1rem;min-height:100vh}.app-header{text-align:center;display:flex;flex-direction:column;gap:.4rem}.app-header h1{margin:0;padding:.12em 0;font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,14vw,4.75rem);line-height:.95;color:var(--bone);text-shadow:0 0 14px rgba(230,226,196,.35),0 0 34px rgba(230,226,196,.18)}@media(prefers-reduced-motion:no-preference){.app-header h1{animation:titleGlow 4s ease-in-out infinite}}@keyframes titleGlow{0%,to{text-shadow:0 0 14px rgba(230,226,196,.3),0 0 34px rgba(230,226,196,.15)}50%{text-shadow:0 0 20px rgba(230,226,196,.5),0 0 46px rgba(230,226,196,.26)}}.game{display:flex;flex-direction:column;gap:1rem}.game.loading{text-align:center;color:var(--bone-dim);font-family:var(--font-mono);letter-spacing:.15em;text-transform:uppercase;padding:2rem 0}.audio-player{display:flex;flex-direction:column;gap:.7rem;align-items:center}.player-bar{display:flex;align-items:center;gap:.75rem;width:100%}.time{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--bone-dim);min-width:2.4ch;flex-shrink:0}.seek{position:relative;flex:1;height:6px;border-radius:999px;background:var(--line);cursor:pointer;overflow:hidden;touch-action:none}.seek-unlocked{position:absolute;left:0;top:0;height:100%;background:var(--line-strong);border-radius:999px;pointer-events:none}.seek-fill{position:absolute;left:0;top:0;height:100%;background:var(--bone);border-radius:999px;pointer-events:none}.seek-tick{position:absolute;top:0;height:100%;width:2px;background:var(--bg);transform:translate(-1px);pointer-events:none}.play-btn{flex-shrink:0;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bone);color:var(--bg);border:none;cursor:pointer;transition:background .15s ease}.play-btn svg{width:18px;height:18px;margin-left:1px}.play-btn[aria-label=Pause] svg{margin-left:0}.play-btn:hover{background:var(--bone-bright)}.volume-ctrl{position:relative;flex-shrink:0;display:flex;align-items:center}.volume-slot{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%) translateY(4px);z-index:20;display:flex;justify-content:center;padding:.5rem .35rem;background:var(--panel);border:1px solid var(--line);border-radius:999px;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}.volume-ctrl[data-open=true] .volume-slot{opacity:1;transform:translate(-50%) translateY(0);pointer-events:auto}.vol-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--bone);cursor:pointer;padding:.2rem;line-height:0;border-radius:50%}.vol-toggle:hover{color:var(--bone-bright)}.volume-ctrl .volume{writing-mode:vertical-lr;direction:rtl;-webkit-appearance:slider-vertical;appearance:none;width:5px;height:96px;margin:0;border-radius:999px;background:var(--line-strong);accent-color:var(--bone);cursor:pointer}.volume-ctrl .volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--bone);border:none}.volume-ctrl .volume::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--bone);border:none}@media(max-width:640px){.volume-ctrl .volume{height:80px}}@media(prefers-reduced-motion:reduce){.volume-slot{transition:none}}.guess-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}.guess-row{min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .8rem;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);font-size:.9rem}.guess-row.empty{background:transparent;border:1px dashed var(--line-strong)}.guess-row.correct{background:var(--match);border-color:var(--match);color:var(--bg);font-weight:600}.guess-row.skipped{color:var(--bone-dim);font-style:italic}.guess-row.skipped .title-text{padding-right:.15em}@keyframes guessRowIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes correctPop{0%{opacity:0;transform:scale(.9)}55%{opacity:1;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}@keyframes cellReveal{0%{opacity:0;transform:rotateX(-90deg)}55%{opacity:1}to{opacity:1;transform:rotateX(0)}}.guess-row.wrong,.guess-row.skipped{animation:guessRowIn .3s ease both}.guess-row.correct{animation:correctPop .42s ease both}.guess-row.wrong .cell{animation:cellReveal .4s ease both;backface-visibility:hidden}.guess-row.wrong .cell:nth-child(1){animation-delay:.2s}.guess-row.wrong .cell:nth-child(2){animation-delay:.36s}.guess-title{display:flex;align-items:center;gap:.4rem;min-width:0;overflow:hidden}.title-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.guess-row.wrong .guess-title{color:var(--coral)}.guess-cells{display:flex;gap:.4rem;flex-shrink:0;perspective:500px}.cell{display:inline-flex;align-items:center;gap:.25rem;padding:.22rem .5rem;border-radius:var(--radius);border:1px solid var(--line);font-family:var(--font-mono);font-size:.72rem;font-weight:500;max-width:150px;color:var(--bone-dim)}.cell-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon{flex-shrink:0;display:block}.icon-cross{transform:translateY(.05em)}.cell-green{background:var(--match);border-color:var(--match);color:var(--bg)}.cell-yellow{background:var(--close);border-color:var(--close);color:var(--bg)}.cell-gray{border-color:var(--line);color:var(--bone-dim)}.song-card{display:flex;align-items:center;gap:.9rem;padding:.8rem;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)}.song-cover-wrap{position:relative;width:92px;height:92px;flex-shrink:0}.song-cover{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);display:block}.cover-lock{position:absolute;inset:0;display:grid;place-items:center;border-radius:var(--radius);background:#0a0a0a66;color:var(--bone);pointer-events:none}.cover-lock svg{opacity:.9;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}.song-meta{display:flex;flex-direction:column;gap:.55rem;min-width:0}.clue{display:flex;flex-direction:column;gap:.05rem;min-width:0}.clue-k{font-family:var(--font-mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.16em;color:var(--bone-dim)}.song-cover,.song-album,.song-year{transition:filter .45s ease,opacity .45s ease}.blurred{filter:blur(5px);opacity:.8;user-select:none}.song-cover.blurred{filter:blur(8px);opacity:1}.song-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:.7rem}.song-album{font-size:1.05rem;font-weight:500;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-year{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--bone-dim)}.guess-input-row{display:flex;gap:.5rem;align-items:stretch}.typeahead{position:relative;flex:1}.typeahead input{width:100%;padding:.8rem .9rem;border-radius:var(--radius);border:1px solid var(--line-strong);background:var(--panel-2);color:var(--bone);font-family:var(--font-sans);font-size:1rem}.typeahead input::placeholder{color:var(--bone-dim)}.typeahead input:focus{outline:none;border-color:var(--bone)}.typeahead-list{position:absolute;z-index:10;bottom:calc(100% + 4px);left:0;right:0;list-style:none;margin:0;padding:.25rem;background:var(--panel-2);border:1px solid var(--line-strong);border-radius:var(--radius);max-height:260px;overflow-y:auto;box-shadow:0 -12px 32px #0000008c}.typeahead-list li{padding:.55rem .7rem;border-radius:var(--radius);cursor:pointer}.typeahead-list li.active{background:var(--bone);color:var(--bg)}.skip-btn{background:transparent;color:var(--bone);border:1px solid var(--line-strong);border-radius:var(--radius);padding:0 1rem;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:border-color .15s ease}.skip-btn:hover:not(:disabled){border-color:var(--bone)}button:disabled{opacity:.4;cursor:not-allowed}:focus-visible{outline:2px solid var(--bone);outline-offset:2px}.result-screen{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.25rem;display:flex;flex-direction:column;gap:.6rem}.result-screen h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:2rem;line-height:1}.result-screen.lost h2{color:var(--coral)}.result-answer{margin:0}.result-score,.result-streak{margin:0;color:var(--bone-dim);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em}.share-squares{display:flex;flex-direction:column;align-items:center;gap:.35rem;margin-top:.5rem}.share-score{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;color:var(--bone-dim)}.share-grid{font-size:1.4rem;letter-spacing:.12em;line-height:1}.share-btn{align-self:center;margin-top:.25rem;background:var(--bone);color:var(--bg);border:none;border-radius:var(--radius);padding:.75rem 2.25rem;font-family:var(--font-mono);font-size:.85rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .15s ease}.share-btn:hover{background:var(--bone-bright)}.result-next{margin:.5rem 0 0;color:var(--bone-dim);font-size:.78rem}.app-footer{margin-top:auto;text-align:center;color:var(--bone-dim);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}