:root{--ink:#151c38;--blue:#1451bd;--coral:#f04e36;--yellow:#ffc51b;--cream:#f4efe3;--paper:#fffaf0;--green:#15885c;--shadow:0 18px 50px rgba(21,28,56,.15)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",sans-serif;min-height:100vh;overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;opacity:.32;z-index:20;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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E")}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,6vw,88px);border-bottom:1px solid rgba(21,28,56,.16);position:relative;z-index:10}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);font-family:"Fjalla One",sans-serif;font-size:20px;line-height:.83;letter-spacing:.04em}.brand-mark{width:38px;height:38px;border:3px solid var(--ink);border-radius:50%;display:grid;place-items:center;position:relative}.brand-mark:before,.brand-mark:after{content:"";position:absolute;border:1px solid var(--ink);border-radius:50%;inset:6px}.brand-mark:after{inset:12px}.brand-mark i{width:5px;height:5px;background:var(--coral);border-radius:50%}.top-actions{display:flex;align-items:center;gap:18px}.icon-btn{border:0;background:transparent;width:40px;height:40px;cursor:pointer;color:var(--ink);padding:8px}.icon-btn svg{fill:currentColor}.how-btn{font:700 12px "DM Sans";letter-spacing:.12em;background:transparent;border:0;cursor:pointer;color:var(--ink)}.how-btn span{display:inline-grid;place-items:center;border:1.5px solid;border-radius:50%;width:24px;height:24px;margin-left:8px}.hero{min-height:calc(100vh - 88px);display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;padding:46px clamp(24px,6vw,88px) 100px;max-width:1600px;margin:auto}.hero-copy{max-width:640px;z-index:2}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;display:flex;align-items:center;gap:10px}.eyebrow span{display:inline-block;width:34px;height:3px;background:var(--coral)}h1,h2{font-family:"Fjalla One",sans-serif;font-weight:400;letter-spacing:-.025em;margin:.14em 0;line-height:.9}h1{font-size:clamp(68px,8.4vw,132px)}h1 em,h2 em{font-style:normal;color:var(--coral)}.intro{font-size:17px;line-height:1.6;max-width:520px;color:#50566b}.setup{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:30px;max-width:560px}.setup label{grid-column:1/-1;font-size:10px;font-weight:700;letter-spacing:.16em}.select-wrap{position:relative}.select-wrap:after{content:"⌄";position:absolute;right:16px;top:13px;pointer-events:none;font-weight:bold}.select-wrap select{width:100%;height:56px;appearance:none;border:1.5px solid var(--ink);background:rgba(255,250,240,.55);padding:0 44px 0 16px;color:var(--ink);font:600 14px "DM Sans"}.primary-btn{height:56px;border:0;background:var(--blue);color:#fff;padding:0 25px;font:700 12px "DM Sans";letter-spacing:.1em;cursor:pointer;box-shadow:5px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s}.primary-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}.primary-btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}.primary-btn span{font-size:20px;margin-left:16px}.hero-art{position:relative;display:grid;place-items:center;height:min(67vw,680px)}.hero-art img{position:relative;width:min(55vw,680px);z-index:2;filter:drop-shadow(20px 25px 20px rgba(21,28,56,.2));animation:float 5s ease-in-out infinite}.sunburst{position:absolute;width:650px;height:650px;background:repeating-conic-gradient(from 5deg,transparent 0deg 13deg,rgba(255,197,27,.68) 13deg 23deg,transparent 23deg 36deg);border-radius:50%;animation:slowspin 60s linear infinite}.spark{position:absolute;color:var(--coral);font-size:50px;z-index:3}.spark-one{top:13%;right:5%}.spark-two{bottom:15%;left:6%;color:var(--blue);font-size:34px}.scribble{position:absolute;right:5%;bottom:10%;font:34px cursive;color:var(--blue);transform:rotate(-9deg);z-index:3}.how-strip{position:absolute;bottom:0;left:0;right:0;height:66px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;gap:34px}.how-strip p{font:600 11px "DM Sans";letter-spacing:.18em}.how-strip b{color:var(--yellow);margin-right:7px}.how-strip i{width:65px;height:1px;background:rgba(255,255,255,.25)}
.game{min-height:calc(100vh - 88px);padding:42px clamp(18px,5vw,72px) 60px;max-width:1600px;margin:auto}.hidden{display:none!important}.game-head{display:flex;justify-content:space-between;align-items:end}.game-head h2{font-size:clamp(44px,6vw,80px)}.stats{display:flex;border:1.5px solid var(--ink);background:rgba(255,250,240,.55)}.stats div{min-width:105px;padding:13px 18px;border-left:1px solid rgba(21,28,56,.2);display:flex;flex-direction:column}.stats div:first-child{border:0}.stats span,.final-score span{font-size:9px;font-weight:700;letter-spacing:.18em;color:#6b6f7d}.stats strong{font-family:"Fjalla One";font-size:25px}.stats .lives{color:var(--coral);font-family:"DM Sans";letter-spacing:3px;font-size:18px;padding-top:4px}.now-playing{background:var(--ink);color:#fff;min-height:118px;padding:18px 24px;display:grid;grid-template-columns:auto 1fr 2fr auto;gap:22px;align-items:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}.mini-record{width:76px;height:76px;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 3px,#282d42 4px 6px);display:grid;place-items:center}.mini-record span{width:23px;height:23px;border-radius:50%;background:var(--coral);border:5px solid var(--yellow)}.playing .mini-record{animation:slowspin 2s linear infinite}.track-copy span{font-size:9px;color:var(--yellow);font-weight:700;letter-spacing:.18em}.track-copy h3{font-family:"Fjalla One";font-size:24px;letter-spacing:.04em;margin:3px 0}.track-copy p{font-size:12px;color:#aab0c2;margin:0}.wave{height:58px;display:flex;align-items:center;justify-content:flex-end;gap:4px;opacity:.55}.wave i{display:block;width:3px;border-radius:5px;background:var(--yellow);height:var(--h);transform:scaleY(.35)}.playing .wave i{animation:wave .8s ease-in-out infinite alternate;animation-delay:var(--d)}.play-btn{width:65px;height:65px;border-radius:50%;background:var(--yellow);border:0;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 7px rgba(255,197,27,.12)}.play-btn svg{width:26px;fill:var(--ink)}.pause-icon{display:none}.playing .play-icon{display:none}.playing .pause-icon{display:block}.timeline-head{display:flex;justify-content:space-between;margin:30px 0 12px;font-size:11px;font-weight:700;letter-spacing:.14em}.timeline-head span{color:var(--coral)}.hint{font-weight:500;text-transform:none;letter-spacing:0;color:#686d7e}.timeline-shell{overflow-x:auto;overflow-y:hidden;padding:12px 5px 28px;scrollbar-color:var(--coral) transparent}.timeline{display:flex;align-items:center;min-width:max-content;min-height:245px}.timeline-card{width:156px;height:210px;background:var(--paper);border:1.5px solid var(--ink);padding:10px;box-shadow:5px 6px 0 rgba(21,28,56,.13);transform:rotate(var(--r));transition:transform .25s;position:relative}.timeline-card:hover{transform:rotate(0) translateY(-5px)}.card-art{height:112px;background:var(--card);position:relative;overflow:hidden;display:grid;place-items:center}.card-art:before{content:"";width:82px;height:82px;border-radius:50%;background:repeating-radial-gradient(circle,var(--ink) 0 3px,#28314c 4px 6px);box-shadow:0 0 0 12px rgba(255,255,255,.14)}.card-art:after{content:"";position:absolute;width:21px;height:21px;border-radius:50%;background:var(--accent);border:5px solid var(--paper)}.year{font:32px "Fjalla One";margin:9px 0 0;color:var(--coral)}.song{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.artist{font-size:9px;color:#737784;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drop-slot{width:54px;min-width:54px;height:210px;border:1.5px dashed rgba(21,28,56,.28);margin:0 10px;border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;color:var(--ink);background:rgba(255,255,255,.2)}.drop-slot span{writing-mode:vertical-rl;font-size:9px;letter-spacing:.13em;font-weight:700;opacity:.5}.drop-slot:hover,.drop-slot:focus{width:76px;min-width:76px;border-color:var(--coral);background:rgba(240,78,54,.1);outline:none}.drop-slot:hover span,.drop-slot:focus span{color:var(--coral);opacity:1}.game-message{text-align:center;font-size:13px;color:#696e7f;margin-top:8px}.game-message.good{color:var(--green);font-weight:700}.game-message.bad{color:var(--coral);font-weight:700}.timeline-card.enter{animation:cardIn .55s cubic-bezier(.2,.8,.2,1)}
dialog{width:min(560px,calc(100% - 30px));border:0;background:var(--paper);color:var(--ink);padding:45px;box-shadow:12px 12px 0 var(--ink)}dialog::backdrop{background:rgba(21,28,56,.75);backdrop-filter:blur(4px)}dialog h2{font-size:56px}.close-btn{position:absolute;right:18px;top:13px;border:0;background:transparent;font-size:32px;cursor:pointer;color:var(--ink)}dialog ol{list-style:none;padding:0;margin:30px 0}dialog li{display:grid;grid-template-columns:90px 1fr;padding:14px 0;border-top:1px solid #ddd6c9}dialog li b{text-transform:uppercase;font-family:"Fjalla One";font-size:20px;color:var(--blue)}dialog li span{font-size:13px;line-height:1.5}.dialog-note{font-size:12px;color:#6e7280}.result-overlay{position:fixed;inset:0;z-index:30;background:rgba(21,28,56,.86);display:grid;place-items:center;padding:20px}.result-card{width:min(500px,100%);background:var(--paper);padding:45px;text-align:center;box-shadow:13px 13px 0 var(--yellow);position:relative}.result-card .eyebrow{justify-content:center}.result-card h2{font-size:58px}.result-record{width:88px;height:88px;background:var(--ink);border-radius:50%;display:grid;place-items:center;margin:-88px auto 25px;box-shadow:0 0 0 9px var(--coral)}.result-record span{color:var(--yellow);font-size:26px}.final-score{display:flex;flex-direction:column;margin:25px}.final-score strong{font:54px "Fjalla One";color:var(--blue)}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,130px);background:var(--ink);color:#fff;padding:13px 22px;font-size:12px;z-index:40;transition:.35s;box-shadow:4px 4px 0 var(--yellow)}.toast.show{transform:translate(-50%,0)}
@keyframes float{50%{transform:translateY(-13px) rotate(1deg)}}@keyframes slowspin{to{transform:rotate(360deg)}}@keyframes wave{to{transform:scaleY(1)}}@keyframes cardIn{from{opacity:0;transform:translateY(-35px) rotate(-7deg)}to{opacity:1;transform:translateY(0) rotate(var(--r))}}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:30px}.hero-art{position:absolute;right:-15%;top:5%;opacity:.17;pointer-events:none}.hero-art img{width:700px}.hero-copy{max-width:650px}.game-head{align-items:start}.stats{margin-top:10px}.now-playing{grid-template-columns:auto 1fr auto}.wave{display:none}}
@media(max-width:620px){.topbar{height:70px}.how-btn{font-size:0}.hero{min-height:calc(100vh - 70px);padding-bottom:90px}.setup{grid-template-columns:1fr}.primary-btn{width:100%}h1{font-size:66px}.intro{font-size:15px}.how-strip{gap:12px}.how-strip i{width:20px}.game{padding-top:25px}.game-head{display:block}.game-head h2{font-size:48px}.stats{width:100%;justify-content:stretch}.stats div{min-width:0;flex:1;padding:10px}.now-playing{padding:14px;gap:12px}.mini-record{width:52px;height:52px}.play-btn{width:52px;height:52px}.track-copy h3{font-size:19px}.track-copy p{font-size:10px}.hint{display:none}.timeline{min-height:220px}.timeline-card{width:140px;height:195px}.drop-slot{height:195px;width:42px;min-width:42px;margin:0 7px}.card-art{height:100px}dialog{padding:34px 25px}dialog h2,.result-card h2{font-size:46px}.result-card{padding:38px 22px}.scribble,.spark{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}