:root{--ink:#082943;--deep:#092b4a;--blue:#2d6ea4;--sky:#a8cce5;--paper:#eef5f6;--acid:#f0ff70;--line:rgba(8,41,67,.22)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:"Noto Serif SC","Songti SC",serif;min-height:100vh}
button{font:inherit;color:inherit}
.skip-link{position:fixed;left:18px;top:max(12px,env(safe-area-inset-top));z-index:100;transform:translateY(calc(-100% - 32px));opacity:0;pointer-events:none;background:var(--acid);color:var(--ink);padding:10px 14px;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);font-size:13px;font-weight:700;text-decoration:none;transition:transform .16s ease,opacity .16s ease}.skip-link:focus-visible{transform:translateY(0);opacity:1;pointer-events:auto;outline:3px solid white;outline-offset:3px}
.grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.masthead{height:86px;padding:0 clamp(20px,5vw,74px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:12px;line-height:1.25;letter-spacing:.08em}.brand b{font-size:14px}.brand-mark{width:42px;height:42px;display:grid;place-items:center;background:var(--deep);color:white;font:600 24px Oswald;transform:rotate(-3deg)}
.reset-button,.again-button{border:0;border-bottom:1px solid;background:none;padding:8px 0;cursor:pointer;font-size:13px}.reset-button:hover,.again-button:hover{border-bottom-color:transparent;opacity:.65}.reset-button:focus-visible,.again-button:focus-visible,.undo-button:focus-visible,.modal-head button:focus-visible{outline:3px solid var(--acid);outline-offset:4px}
main{overflow:hidden}.hero{min-height:calc(100svh - 86px);display:grid;grid-template-columns:minmax(280px,.72fr) minmax(600px,1.45fr);padding:clamp(42px,7vw,100px) clamp(20px,5vw,74px);gap:clamp(40px,6vw,110px);align-items:center;background:linear-gradient(115deg,transparent 0 58%,rgba(168,204,229,.2) 58%);scroll-margin-top:20px}.hero[hidden]{display:none}
.eyebrow{font:600 12px Oswald,sans-serif;letter-spacing:.2em;margin:0 0 22px}.intro h1,.result h2{font-size:clamp(52px,6.6vw,104px);line-height:.98;letter-spacing:-.07em;margin:0;text-wrap:balance}.lead{max-width:390px;font-size:15px;line-height:2;margin:34px 0 0;text-wrap:pretty}
.battle-panel{align-self:stretch;display:flex;min-height:570px;flex-direction:column}.round-info{display:flex;justify-content:space-between;font:600 13px Oswald,sans-serif;letter-spacing:.12em}.progress-track{height:4px;background:rgba(8,41,67,.12);margin:14px 0 26px}.progress-track span{display:block;height:100%;width:0;background:var(--ink);transition:width .4s ease}
.journey-info{display:flex;justify-content:space-between;margin:-16px 0 22px;color:rgba(8,41,67,.62);font:600 10px Oswald,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.choice-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1}.song-card{position:relative;border:1px solid rgba(255,255,255,.28);padding:32px;display:flex;flex-direction:column;text-align:left;cursor:pointer;overflow:hidden;transition:transform .25s,filter .25s}.song-card:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.22),transparent 42%);pointer-events:none}.song-card:hover,.song-card:focus-visible{transform:translateY(-7px);filter:brightness(1.06);outline:3px solid var(--acid);outline-offset:-3px}.card-a{background:var(--sky)}.card-b{background:var(--blue);color:#fff}.side-label{font:600 11px Oswald;letter-spacing:.2em}.song-index{position:absolute;right:28px;top:25px;font:400 44px Oswald;opacity:.2}.song-card strong{margin:auto 0;font-size:clamp(25px,2.6vw,46px);line-height:1.25;letter-spacing:-.05em;word-break:break-word}.choose-hint{border-top:1px solid currentColor;padding-top:18px;font-size:12px;display:flex;justify-content:space-between;opacity:.75}.choose-hint i{font-style:normal;font-size:20px}.or-badge{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--acid);color:var(--ink);font:600 15px Oswald;box-shadow:0 8px 25px rgba(8,41,67,.25)}
.song-card.picked{outline:5px solid var(--acid);outline-offset:-5px;filter:brightness(1.08)}
.battle-footer{min-height:38px;margin-top:16px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.undo-button{justify-self:start;border:1px solid var(--line);background:rgba(255,255,255,.42);padding:8px 11px;cursor:pointer;font-size:11px;transition:background-color .16s ease,border-color .16s ease}.undo-button:hover:not(:disabled){background:var(--acid);border-color:var(--ink)}.undo-button:disabled{opacity:.38;cursor:not-allowed}.keyboard-tip{grid-column:2;text-align:center;font-size:11px;opacity:.55;margin:0}.keyboard-tip kbd{background:white;border:1px solid var(--line);padding:2px 7px;border-radius:2px;font-family:Oswald}.touch-tip{display:none}.choice-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.song-list{padding:110px clamp(20px,5vw,74px);background:var(--deep);color:#edf7fa}.list-heading{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:end;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:24px}.list-heading .eyebrow{margin:0}.list-heading h2{margin:0;font-size:clamp(30px,4vw,58px);letter-spacing:-.06em}.list-heading span{text-align:right;font-size:12px;opacity:.6}.song-list ol{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:50px;counter-reset:songs}.song-list li{counter-increment:songs;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.13);font-size:14px;display:flex;gap:18px}.song-list li:before{content:counter(songs,decimal-leading-zero);font:12px Oswald;opacity:.45}
.result{min-height:calc(100svh - 86px);padding:clamp(50px,8vw,110px) clamp(20px,7vw,110px);background:var(--sky);display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:40px}.result[hidden]{display:none}.result h2{font-size:clamp(45px,6vw,88px)}.winner-name{font-size:clamp(34px,5vw,72px);font-weight:900;margin:45px 0 20px;padding:24px 0;border-block:2px solid}.result-copy>p:last-of-type{font-size:14px}.final-four{margin-top:28px;max-width:650px}.final-four>span{font:600 11px Oswald,sans-serif;letter-spacing:.16em}.final-four ol{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;margin:10px 0 0;border-block:1px solid rgba(8,41,67,.25)}.final-four li{padding:12px 10px;font-size:12px;border-right:1px solid rgba(8,41,67,.25);min-width:0;overflow-wrap:anywhere}.final-four li:last-child{border:0}.result-actions{display:flex;gap:20px;margin-top:32px;align-items:center}.share-button{border:0;background:var(--deep);color:white;padding:18px 25px;cursor:pointer;display:flex;justify-content:space-between;gap:40px;transition:transform .2s}.share-button:hover{transform:translateY(-3px)}.share-button:focus-visible,.danger-button:focus-visible{outline:3px solid var(--acid);outline-offset:4px}
.vinyl{aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#0c2940 0 3px,#163952 4px 7px);display:grid;place-items:center;box-shadow:20px 30px 60px rgba(8,41,67,.25);animation:spin 16s linear infinite}.vinyl>div{width:38%;aspect-ratio:1;background:var(--acid);border-radius:50%;display:grid;place-items:center;text-align:center}.vinyl span{font:600 clamp(12px,2vw,22px) Oswald;letter-spacing:.12em}@keyframes spin{to{transform:rotate(360deg)}}
footer{text-align:center;padding:30px;background:#061e31;color:white;font:12px Oswald;letter-spacing:.1em}
.share-modal,.confirm-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}.share-modal[hidden],.confirm-modal[hidden]{display:none}.modal-backdrop{position:absolute;inset:0;border:0;background:rgba(3,19,31,.78);backdrop-filter:blur(8px)}.modal-card{position:relative;width:min(430px,100%);max-height:92svh;overflow:auto;overscroll-behavior:contain;background:var(--paper);padding:18px;box-shadow:0 30px 80px #0008}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{font-size:18px}.modal-head button{font-size:30px;border:0;background:none;cursor:pointer}.modal-card canvas{display:block;width:100%;height:auto;background:var(--deep)}.modal-card p{text-align:center;font-size:12px;opacity:.65}.modal-card .share-button{width:100%;justify-content:center}.modal-card .share-status{min-height:1.2em;margin-bottom:0}.confirm-card{position:relative;width:min(520px,100%);background:var(--sky);padding:clamp(28px,6vw,56px);box-shadow:0 30px 80px #0008}.confirm-card h2{font-size:clamp(28px,5vw,46px);line-height:1.12;letter-spacing:-.05em;margin:0;text-wrap:balance}.confirm-card>p:not(.eyebrow){font-size:13px;line-height:1.8;margin:22px 0 34px}.confirm-actions{display:flex;justify-content:flex-end;align-items:center;gap:24px}.danger-button{border:0;background:var(--deep);color:white;padding:15px 20px;cursor:pointer}
.song-card.exit{animation:cardExit .22s ease forwards}@keyframes cardExit{to{opacity:0;transform:scale(.96)}}
@media(max-width:850px){.masthead{height:70px}.hero{display:block;min-height:auto;padding-top:48px}.intro h1{font-size:58px}.lead{margin-top:24px}.battle-panel{min-height:560px;margin-top:48px}.song-list{padding-top:75px}.song-list ol{grid-template-columns:repeat(2,1fr)}.list-heading{grid-template-columns:1fr 1fr}.list-heading .eyebrow{grid-column:1/-1;margin-bottom:16px}.result{grid-template-columns:1fr}.vinyl{width:min(70vw,420px);justify-self:center;grid-row:1}.result-copy{text-align:center}.result-actions{justify-content:center}}
@media(max-width:560px){.hero{padding-inline:14px}.intro{padding-inline:8px}.intro h1{font-size:49px}.lead{font-size:13px}.battle-panel{min-height:535px}.choice-grid{gap:7px}.song-card{padding:22px 15px;min-width:0;touch-action:manipulation}.song-card strong{font-size:clamp(20px,6vw,29px)}.song-index{font-size:30px;right:14px}.or-badge{width:42px;height:42px}.battle-footer{grid-template-columns:1fr 1fr}.keyboard-tip{grid-column:2;text-align:right}.key-tip{display:none}.touch-tip{display:inline}.song-list{padding-inline:22px}.song-list ol{grid-template-columns:1fr}.list-heading{display:block}.list-heading h2{margin-bottom:12px}.list-heading span{display:block;text-align:left}.final-four ol{grid-template-columns:1fr 1fr}.final-four li:nth-child(2){border-right:0}.final-four li:nth-child(-n+2){border-bottom:1px solid rgba(8,41,67,.25)}.result-actions{flex-direction:column}.share-button{width:100%;justify-content:space-between}.vinyl{width:80vw}.confirm-actions{align-items:stretch;flex-direction:column-reverse}.danger-button,.confirm-actions .again-button{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.vinyl,.song-card.exit{animation:none}.skip-link,.song-card,.progress-track span,.share-button,.undo-button{transition:none}}