@font-face{font-family:Bangers;src:url(/assets/fonts/bangers.woff2) format("woff2");font-display:swap}
:root{--ink:#16081f;--paper:#fff7e6;--pink:#ff3d6e;--frost:#ff8ad8;--lime:#b8f53a;--yellow:#ffe14a;--cyan:#39d5ff;--violet:#5b21b6;--deep:#1f0a3d}
*{box-sizing:border-box}html{scroll-behavior:smooth;color-scheme:light}
body{margin:0;color:var(--ink);font:600 17px/1.5 ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;background-color:var(--paper);background-image:radial-gradient(rgba(91,33,182,.13) 24%,transparent 26%);background-size:14px 14px;overflow-x:hidden}
a{color:var(--violet)}
.wrap{max-width:1160px;margin:0 auto;padding:0 18px}
h1,h2,h3,.bang,.sfx,.btn,.cap,.num,.stepnum,.level b,.shout,.fresh span{font-family:Bangers,Impact,"Arial Black",sans-serif;font-weight:400;letter-spacing:.03em}
header.top{background:var(--ink);position:sticky;top:0;z-index:30}
.topin{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px;padding-bottom:8px}
.brand{white-space:nowrap;display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:400 24px Bangers,Impact,sans-serif;letter-spacing:.05em}
.brand img{height:38px;width:auto}
nav{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}nav a{color:#fff;text-decoration:none;font-size:15px}nav a:hover{color:var(--lime)}
.bang{font-size:clamp(38px,7vw,68px);line-height:1;margin:56px 0 18px;color:var(--pink);text-shadow:3px 3px 0 var(--ink);-webkit-text-stroke:1.5px var(--ink);transform:rotate(-1.2deg)}
.lightbang{color:var(--yellow)}
.btn{display:inline-block;padding:10px 22px 8px;font-size:24px;text-decoration:none;color:var(--ink);border:4px solid var(--ink);border-radius:10px;box-shadow:5px 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}.btn.pink{background:var(--frost)}.btn.lime{background:var(--lime)}
.row{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0}
.sfx{position:absolute;font-size:clamp(34px,6vw,64px);color:var(--yellow);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink);line-height:1;z-index:5;animation:pop 2.4s ease-in-out infinite}
.pinkfx{color:var(--frost)}
@keyframes pop{0%,100%{scale:1}50%{scale:1.1}}
.say{position:absolute;margin:0;background:#fff;border:4px solid var(--ink);border-radius:18px;padding:8px 14px;font-weight:800;line-height:1.2;z-index:6;box-shadow:3px 3px 0 var(--ink)}
.say::after{content:"";position:absolute;left:24px;bottom:-16px;border:9px solid transparent;border-top:12px solid var(--ink);border-bottom:0;width:0}
.panel{position:relative;overflow:hidden;border:5px solid var(--ink);box-shadow:7px 7px 0 var(--ink);border-radius:6px;background-color:#fff}
.p-pink{background:repeating-conic-gradient(from 0deg at 50% 55%,#ff7aa0 0 5deg,var(--pink) 5deg 11deg)}
.p-cyan{background:repeating-conic-gradient(from 0deg at 40% 55%,#8be9ff 0 5deg,var(--cyan) 5deg 11deg)}
.p-yellow{background:repeating-conic-gradient(from 0deg at 50% 50%,#fff3a0 0 5deg,var(--yellow) 5deg 11deg)}
.p-lime{background:repeating-conic-gradient(from 0deg at 50% 60%,#dcff8a 0 5deg,var(--lime) 5deg 11deg)}
.p-violet{background:radial-gradient(rgba(255,255,255,.14) 24%,transparent 26%) 0 0/12px 12px,linear-gradient(135deg,var(--violet),var(--deep))}
.p-paper{background:#fff}
.cap{position:absolute;left:0;top:0;background:var(--yellow);border-right:4px solid var(--ink);border-bottom:4px solid var(--ink);padding:5px 12px 3px;font-size:22px;z-index:6}
.burstbg{position:absolute;width:100%;height:100%}
.chevs{position:absolute;width:88px;display:flex;flex-direction:column;gap:0;z-index:3}.chevs svg{width:88px;height:44px;animation:chev 1s infinite}.chevs svg:nth-child(2){animation-delay:.15s}.chevs svg:nth-child(3){animation-delay:.3s}
@keyframes chev{0%,100%{opacity:.35}40%{opacity:1}}
/* cover */
.cover{background:radial-gradient(rgba(255,255,255,.12) 24%,transparent 26%) 0 0/14px 14px,linear-gradient(135deg,#7c1fd1 0%,var(--pink) 100%);border-bottom:6px solid var(--ink);overflow:hidden}
.coverin{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:14px;min-height:560px}
.wordmark{width:100%;height:auto;display:block;transform:rotate(-2deg)}
.kicker{color:#fff;font:400 clamp(26px,3.6vw,38px)/1.1 Bangers,Impact,sans-serif;letter-spacing:.04em;text-shadow:3px 3px 0 var(--ink);margin:16px 0 0}
.badge{display:inline-block;margin:6px 0 0;background:var(--ink);color:var(--lime);padding:5px 14px;font-weight:800;border-radius:6px;transform:rotate(-1.5deg)}
.coverart{position:relative;height:560px}
.heropanel{position:absolute;inset:26px 34px 30px 30px;rotate:1.6deg}.hero{position:absolute;left:50%;top:4px;width:122%;max-width:none;height:auto;transform:translateX(-50%)}
.s1{left:0;top:9%;rotate:-12deg}.s2{right:0;top:44%;rotate:9deg;animation-delay:.6s}
.sayhero{left:50%;top:3%;transform:translateX(-30%);font-size:20px}
.float{position:absolute;width:82px;height:82px;animation:bob 3s ease-in-out infinite;z-index:4}.d1{left:4%;bottom:12%}.d2{right:6%;top:18%;width:58px;height:58px;animation-delay:.8s}
@keyframes bob{0%,100%{translate:0 0;rotate:-6deg}50%{translate:0 -14px;rotate:6deg}}
/* strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.strip .panel{height:300px}.strip .big,.strip .slice{grid-column:span 2}.strip .wide{grid-column:span 3;height:360px}
.flying{position:absolute;right:16%;top:50%;width:190px;height:190px;translate:0 -50%;animation:bob 2s ease-in-out infinite}
.s3{left:32%;bottom:9%;rotate:-6deg}
.closeup{position:absolute;left:50%;top:-6%;width:125%;height:auto;transform:translateX(-50%)}
.saytop{right:10px;top:50px;font-size:22px}
.saber{position:absolute;left:-12%;top:58%;width:130%;height:16px;background:#fff;border:3px solid var(--ink);border-radius:9px;rotate:-24deg;box-shadow:0 0 0 7px var(--frost),0 0 0 10px var(--ink);z-index:3}
.half{position:absolute;width:150px;height:150px;top:17%;z-index:2}.half.l{left:13%;rotate:-16deg}.half.r{right:13%;rotate:164deg;top:30%}
.sp{position:absolute;width:13px;height:6px;border-radius:3px;background:var(--pink);z-index:4}.sp.a{left:44%;top:18%;rotate:30deg}.sp.b{left:55%;top:30%;background:var(--cyan);rotate:-30deg}.sp.c{left:40%;top:72%;background:var(--violet);rotate:60deg}.sp.d{left:62%;top:68%;rotate:10deg;background:#fff}.sp.e{left:50%;top:50%;background:var(--lime);rotate:80deg}
.s4{right:6%;bottom:7%;rotate:7deg}
.frap{position:absolute;left:50%;top:18%;width:150px;height:230px;translate:-50% 0;rotate:9deg;animation:bob 2.6s ease-in-out infinite}
.s5{left:8%;bottom:10%;rotate:-8deg}
.aj{position:absolute;left:3%;top:-6%;width:38%;height:auto}.luca{position:absolute;right:-1%;top:-4%;width:38%;height:auto;transform:scaleX(-1)}
.sayaj{left:39%;top:40px;font-size:30px}.sayluca{right:36%;bottom:44px;font-size:26px}
.sayluca::after{left:auto;right:-12px;bottom:12px;rotate:-90deg}
/* levels */
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.level{position:relative;border:5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);overflow:hidden;background:#fff;border-radius:6px}.level img{display:block;width:100%;height:auto}
.level b{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:clamp(24px,4vw,40px);padding:4px 0 2px;border-top:4px solid var(--ink);color:var(--ink)}
.l1 b{background:var(--lime)}.l2 b{background:var(--yellow)}.l3 b{background:var(--frost)}.l4 b{background:var(--pink);color:#fff}
.l1{rotate:-1deg}.l2{rotate:.8deg}.l3{rotate:-.6deg}.l4{rotate:1.4deg;scale:1.04}
.shout{font-size:clamp(28px,5vw,48px);text-align:center;margin:30px 0 8px;color:var(--violet);text-shadow:2px 2px 0 var(--yellow)}
.fresh{position:relative;width:min(100%,520px);height:230px;margin:6px auto 0;display:grid;place-items:center;rotate:-2deg}
.fresh span{position:relative;color:#fff;font-size:clamp(28px,5vw,42px);text-shadow:3px 3px 0 var(--ink);text-align:center;line-height:1}
.fresh small{display:block;font:800 15px/1.3 ui-rounded,system-ui,sans-serif;letter-spacing:0;text-shadow:none;margin-top:6px}
/* your songs */
.yours{background:radial-gradient(rgba(255,255,255,.1) 24%,transparent 26%) 0 0/14px 14px,var(--deep);margin-top:56px;padding:6px 0 46px;border-top:6px solid var(--ink);border-bottom:6px solid var(--ink)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tall{height:330px}.num{position:absolute;left:0;top:0;background:#fff;border-right:4px solid var(--ink);border-bottom:4px solid var(--ink);padding:5px 14px 3px;font-size:28px;z-index:6}
.notes{position:absolute;left:0;right:0;top:64px;text-align:center;font-size:92px;line-height:1;color:#fff;text-shadow:4px 4px 0 var(--ink)}
.hs{position:absolute;left:50%;top:60px;translate:-50% 0;width:220px;height:132px;animation:bob 3s ease-in-out infinite}
.mid{position:absolute;left:50%;top:52px;translate:-50% 0;width:150px;height:150px}
.s6{right:6%;top:42%;rotate:-7deg;font-size:40px}
.saymid{left:14px;right:14px;bottom:24px;text-align:center;font-size:18px}
/* how-to */
.howto{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{padding:14px 14px 16px}.step h3{font-size:28px;margin:4px 0 8px 42px;line-height:1.05;min-height:58px;display:flex;align-items:center}.step p{margin:10px 0 0;font-size:15.5px;line-height:1.4}
.stepnum{position:absolute;left:0;top:0;width:46px;height:46px;display:grid;place-items:center;background:var(--pink);color:#fff;font-size:30px;border-right:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.pic{position:relative;height:150px;border:4px solid var(--ink);border-radius:6px;overflow:hidden;display:grid;place-items:center;background:var(--deep)}
.pic-song{background:repeating-conic-gradient(from 0deg at 50% 50%,#ff7aa0 0 6deg,var(--pink) 6deg 13deg)}.file{background:#fff;border:3px solid var(--ink);border-radius:8px;padding:12px 12px;font-weight:800}
.pic-browser{background:var(--cyan)}.win{position:relative;width:76%;height:76%;background:#fff;border:4px solid var(--ink);border-radius:8px;padding:8px}.win i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--pink);margin-right:4px}.win i:nth-child(2){background:var(--yellow)}.win i:nth-child(3){background:var(--lime)}
.down{position:absolute;left:50%;top:54%;translate:-50% -50%;font:400 58px/1 Bangers,Impact,sans-serif;color:var(--violet);animation:drop 1.4s infinite}
@keyframes drop{0%{translate:-50% -74%}70%,100%{translate:-50% -36%}}
.pic-menu{grid-template-columns:1fr 1fr;gap:8px;padding:12px;background:var(--deep)}.pic-menu span{background:#3a1a70;color:#fff;border-radius:8px;padding:9px 4px;text-align:center;font-size:14px;font-weight:800}.pic-menu .on{background:var(--lime);color:var(--ink);outline:3px solid var(--yellow)}
.pic-play{background:repeating-conic-gradient(from 0deg at 50% 50%,#fff3a0 0 6deg,var(--yellow) 6deg 13deg)}.mini{width:100px;height:100px}.s7{right:10%;bottom:10%;font-size:42px;rotate:-8deg}
.alt{background:var(--lime);border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:10px 16px;margin:24px 0}
.videobox{max-width:860px;margin:26px auto 12px}.videobox video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--ink)}
.fine{font-size:14px;font-weight:600}.note{text-align:center}
.compat{margin-top:40px}.compatbox{display:flex;align-items:center;gap:22px;padding:16px 26px 22px}.compatbox .bang{margin:12px 0 4px;font-size:clamp(30px,5vw,50px)}.hsbig{flex:none;width:170px;height:102px}.models{color:#fff;margin:0;font-size:20px}.models b{color:var(--lime)}
footer{margin-top:60px;background:var(--ink);color:#fff;padding:22px 0 26px}footer a{color:var(--frost);margin-right:14px}footer p{margin:6px 0}.only{font:400 26px Bangers,Impact,sans-serif;letter-spacing:.04em;color:var(--lime)}
/* home */
.homehero{background:radial-gradient(900px 500px at 50% 0%,#3e1670,#120728 72%);padding:14px 0 18px;border-bottom:6px solid var(--ink);text-align:center}
.lockup{position:relative;width:min(68vw,380px);aspect-ratio:1;margin:0 auto -6px}.lockup img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lockup .logo{animation:hmLogo 1.4s .2s cubic-bezier(.22,.9,.3,1) both}.lockup .drop{transform-origin:51% 90%;animation:hmDrop 1.6s 1.5s cubic-bezier(.55,0,1,.45) both,hmSquash .42s 3.1s ease-out}
@keyframes hmLogo{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes hmDrop{0%{opacity:0;transform:translateY(-48%)}6%{opacity:1;transform:translateY(-48%)}100%{opacity:1;transform:translateY(0)}}
@keyframes hmSquash{50%{transform:translateY(1.1%) scale(1.05,.93)}}
.creation{color:#cdb9e6;letter-spacing:.32em;font-size:14px;margin:0}
.homecard{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;margin-top:34px;text-decoration:none;color:var(--ink);min-height:380px}
.hc-art{position:relative;height:380px;overflow:hidden}.hc-art img{position:absolute;left:50%;top:6px;width:98%;height:auto;transform:translateX(-50%)}
.hc-text{padding:22px}.hc-text>img{width:100%;height:auto;display:block}.hc-text .say{position:relative;display:inline-block;margin:18px 0;font-size:20px}
/* privacy */
.paper{margin-top:30px}.policy{background:#fff;border:5px solid var(--ink);box-shadow:7px 7px 0 var(--ink);border-radius:6px;padding:22px 26px;max-width:800px;margin:0 auto}.policy h1{font-size:44px;margin:0 0 8px;color:var(--pink)}.policy h2{font-size:28px;margin:22px 0 4px}.policy p,.policy li{font-weight:500}
@media (max-width:860px){.coverin{grid-template-columns:1fr;padding-top:18px}.coverart{height:440px}.hero{width:360px;bottom:-110px}.strip{grid-template-columns:1fr 1fr}.strip .big,.strip .wide,.strip .slice{grid-column:span 2}.howto{grid-template-columns:1fr 1fr}.trio{grid-template-columns:1fr}.homecard{grid-template-columns:1fr}}
@media (max-width:520px){nav{gap:10px}nav a{font-size:13px}.strip{grid-template-columns:1fr}.strip .big,.strip .wide,.strip .slice{grid-column:span 1}.strip .wide{height:300px}.aj,.luca{width:50%}.sayaj{left:30%;top:14px;font-size:22px}.sayluca{right:26%;bottom:14px;font-size:20px}.levels{grid-template-columns:1fr 1fr}.howto{grid-template-columns:1fr}.compatbox{flex-direction:column;text-align:center}.flying{width:150px;height:150px;right:6%}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}html{scroll-behavior:auto}}

#round,#add-songs{scroll-margin-top:84px}

/* Pick your player */
.crew{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.who{height:380px}.who img{position:absolute;left:50%;top:4px;width:128%;max-width:none;height:auto;transform:translateX(-50%)}
.who b{position:absolute;left:0;right:0;bottom:44px;text-align:center;background:var(--ink);color:var(--yellow);font:400 34px/1.1 Bangers,Impact,sans-serif;letter-spacing:.04em;padding:5px 0 2px}
.who span{position:absolute;left:0;right:0;bottom:0;height:44px;display:grid;place-items:center;background:#fff;border-top:4px solid var(--ink);font-size:13.5px;font-weight:800;text-align:center;line-height:1.1;padding:0 6px}
@media (max-width:860px){.crew{grid-template-columns:1fr 1fr}}

/* treats */
img.art{object-fit:contain;filter:drop-shadow(0 6px 8px rgba(22,8,31,.35))}
img.half.l{clip-path:inset(0 50% 0 0)}img.half.r{clip-path:inset(0 0 0 50%)}
.pack{display:flex;justify-content:center;gap:6px;margin-top:8px}.pack img{width:72px;height:72px}
.prize{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.prize .trophy{position:relative;width:340px;height:340px;z-index:2;animation:bob 2.6s ease-in-out infinite}
.s7{position:absolute;left:8%;top:14%;rotate:-8deg;z-index:3}
.sayprize{position:absolute;right:6%;bottom:12%;max-width:230px;z-index:3}
@media (max-width:520px){.prize{min-height:340px}.prize .trophy{width:240px;height:240px}.sayprize{right:4%;bottom:4%;max-width:180px}.pack img{width:54px;height:54px}}

/* crew and comics */
img[src*="/assets/comic/"]{object-fit:contain}
.comics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.comics img{width:100%;height:auto;display:block;border:4px solid var(--ink);border-radius:10px;box-shadow:6px 6px 0 var(--ink);object-fit:cover}
@media (max-width:760px){.comics{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.comics{grid-template-columns:1fr}}

/* layout */
.who .pack{position:absolute;right:8px;bottom:94px;margin:0;gap:2px;padding:3px 6px;background:#fff;border:3px solid var(--ink);border-radius:12px;z-index:3}
.who .pack img{position:static;width:42px;height:42px;transform:none;max-width:none;filter:none}
.d1{left:-2%;bottom:0}.s2{top:66%;right:-1%}
.aj{left:7%;top:14%;width:33%}.luca{right:1%;top:3%;width:33%}.sayaj{left:41%}
.prize .trophy{object-fit:contain}
@media (max-width:860px){
  .strip .big{order:1}.strip .slice{order:2}.strip .panel:not(.big):not(.slice):not(.wide){order:3}.strip .wide{order:5}
  .aj{left:4%;top:16%;width:36%}.luca{right:0;top:4%;width:36%}.sayaj{left:36%;top:52px;font-size:24px}.sayluca{right:34%;font-size:22px}
  .wide .cap{font-size:18px}
}
@media (max-width:520px){
  .aj{left:2%;top:15%;width:46%}.luca{right:-2%;top:6%;width:46%}.sayaj{left:30%;top:46px;font-size:18px}.sayluca{right:24%;bottom:18px;font-size:17px}
  .wide .cap{font-size:15px}
  .who .pack{bottom:86px}.who .pack img{width:32px;height:32px}
}
@media (max-width:520px){
  .aj{left:0;top:24%;width:48%}.luca{right:-3%;top:27%;width:52%}.sayaj{left:24%;top:44px;font-size:17px}.sayluca{right:auto;left:30%;bottom:10px;font-size:15px}
  .prize{min-height:420px;align-items:flex-start;padding-top:44px}.prize .trophy{width:210px;height:270px}
  .s7{left:12%;top:4%;font-size:26px}.sayprize{right:4%;bottom:3%;max-width:none}
}

/* shelf */
.level img{aspect-ratio:4/5;object-fit:cover!important;object-position:50% 0}
.shelfrow{display:grid;grid-template-columns:1.45fr 1fr;gap:16px}
.shelfpic{min-height:0}.shelfpic img{display:block;width:100%;height:100%;object-fit:cover}
.crewwins{display:flex;align-items:flex-end;justify-content:center;min-height:360px;padding:40px 6px 0}
.crewwins img{height:320px;width:auto;margin:0 -16px;max-width:none;object-fit:contain}
@media (max-width:860px){.shelfrow{grid-template-columns:1fr}.crewwins{min-height:340px}.crewwins img{height:300px}}
@media (max-width:520px){.crewwins{min-height:290px}.crewwins img{height:240px;margin:0 -20px}}

.lost{text-align:center;padding:40px 0 60px}.lost h1{font-size:clamp(44px,8vw,76px);color:var(--pink);margin:10px 0}