:root{
  --bg:#060403; --ink:#f2efe9; --soft:#b9b3a8; --muted:#6b6358;
  --slime:#8dff2b; --slime2:#b6ff5a; --venom:#2a7a00; --blood:#ff1f2e; --blood2:#ff5a45; --alien:#9b3cff; --alien2:#c47bff;
  --disp:'Pirata One',cursive; --ui:'Oswald',sans-serif; --mono:'Courier New',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--ui);font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased;cursor:none}
@media(hover:none){body{cursor:auto}}
img{display:block;width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--slime);color:#08120a}

.bgwrap{position:fixed;inset:0;z-index:-3;overflow:hidden;background:
  radial-gradient(45% 50% at 18% 16%,rgba(141,255,43,.18),transparent 60%),
  radial-gradient(48% 55% at 84% 12%,rgba(155,60,255,.16),transparent 60%),
  radial-gradient(55% 60% at 82% 88%,rgba(141,255,43,.14),transparent 60%),
  radial-gradient(50% 55% at 10% 90%,rgba(255,31,46,.14),transparent 60%),
  #060403}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;mix-blend-mode:screen;animation:float 18s ease-in-out infinite}
.blob.b1{width:48vw;height:48vw;left:-10vw;top:-8vw;background:radial-gradient(circle,var(--slime),transparent 70%)}
.blob.b2{width:52vw;height:52vw;right:-12vw;top:8vh;background:radial-gradient(circle,var(--alien),transparent 70%);animation-delay:-5s}
.blob.b3{width:46vw;height:46vw;left:22vw;bottom:-14vw;background:radial-gradient(circle,var(--blood),transparent 70%);animation-delay:-9s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4vw,-3vh) scale(1.08)}66%{transform:translate(-3vw,4vh) scale(.94)}}

/* interactive snake lives here, behind content but above bg */
#snake{position:fixed;inset:0;z-index:-1;pointer-events:none}

.scan{position:fixed;inset:0;z-index:9994;pointer-events:none;opacity:.45;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.grain{position:fixed;inset:0;z-index:9993;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vig{position:fixed;inset:0;z-index:9992;pointer-events:none;box-shadow:inset 0 0 200px rgba(0,0,0,.8),inset 0 0 80px rgba(141,255,43,.05)}

/* CURSOR + EMBERS */
/* z-index sits ABOVE the modal/popup (11200) + loader so the custom ring stays visible while
   the native pointer is hidden — otherwise the cursor "disappears" the moment you hover a popup. */
.cursor{position:fixed;top:0;left:0;width:26px;height:26px;border:2px solid var(--slime);border-radius:50%;pointer-events:none;z-index:12001;transform:translate(-50%,-50%);box-shadow:0 0 12px var(--slime),inset 0 0 8px rgba(141,255,43,.4);transition:width .15s,height .15s,border-color .15s}
.cursor::after{content:"";position:absolute;inset:0;margin:auto;width:3px;height:3px;border-radius:50%;background:var(--blood);box-shadow:0 0 8px var(--blood)}
.cursor.big{width:54px;height:54px;border-color:var(--slime2);box-shadow:0 0 22px var(--slime)}
#trail{position:fixed;inset:0;z-index:9996;pointer-events:none}
@media(hover:none){.cursor,#trail{display:none}}

/* LOADER */
#loader{position:fixed;inset:0;z-index:11000;background:#050302;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .7s,visibility .7s}
#loader.gone{opacity:0;visibility:hidden}
#loader .lt{font-family:var(--disp);font-size:46px;color:var(--ink);letter-spacing:1px;animation:flick 2.4s infinite}
@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.3}95%{opacity:1}96%{opacity:.4}}
#loader .ls{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:5px;color:var(--slime);text-transform:uppercase}
#loader .bar{width:200px;height:6px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(141,255,43,.3)}
#loader .bar i{display:block;height:100%;width:0;background:var(--slime);box-shadow:0 0 12px var(--slime);animation:load .9s ease forwards}
@keyframes load{to{width:100%}}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;transition:.35s}
nav.scrolled{background:rgba(8,5,4,.8);backdrop-filter:blur(12px);border-bottom:1px solid rgba(141,255,43,.25);padding:10px 22px}
.logo{display:flex;align-items:center;gap:11px}
.logo .mk{width:34px;height:34px;filter:drop-shadow(0 0 8px var(--slime))}
.logo .mk path{stroke:var(--slime);stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.logo .wm{font-family:var(--disp);font-size:24px;letter-spacing:.5px;color:var(--ink);text-shadow:1px 0 var(--blood),-1px 0 var(--slime)}
.navmenu{display:flex;align-items:center;gap:20px}
.navlinks{display:flex;gap:22px;font-weight:600;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.navlinks a{position:relative;color:#fff;opacity:.82;transition:.2s}
.navlinks a:hover{opacity:1;color:var(--slime);text-shadow:0 0 10px var(--slime)}
.btnX{font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border:1px solid var(--slime);background:transparent;color:var(--slime);padding:9px 16px;transition:.18s}
.btnX:hover{background:var(--slime);color:#08120a;box-shadow:0 0 22px rgba(141,255,43,.5)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:4px}
.burger span{width:24px;height:2px;background:#fff}

.bigbtn{font-family:var(--ui);font-weight:700;font-size:14px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border:1px solid;padding:14px 26px;transition:.16s;display:inline-flex;align-items:center;gap:9px;background:rgba(10,7,5,.5);backdrop-filter:blur(4px)}
.bSlime{border-color:var(--slime);color:var(--slime)}
.bSlime:hover{background:var(--slime);color:#08120a;box-shadow:0 0 26px rgba(141,255,43,.5);transform:translateY(-2px)}
.bBlood{border-color:var(--blood);color:var(--blood)}
.bBlood:hover{background:var(--blood);color:#fff;box-shadow:0 0 26px rgba(255,31,46,.55);transform:translateY(-2px)}
.bAlien{border-color:var(--alien);color:var(--alien2)}
.bAlien:hover{background:var(--alien);color:#fff;box-shadow:0 0 26px rgba(155,60,255,.55);transform:translateY(-2px)}

/* HERO */
.hero{min-height:100svh;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 18px 40px;overflow:hidden}
.herobg{position:absolute;inset:0;z-index:0;background-image:url('sb-portrait.jpg');background-size:cover;background-position:center 25%}
.herobg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,4,3,.7),rgba(6,4,3,.55) 40%,rgba(6,4,3,.92)),radial-gradient(60% 60% at 50% 45%,transparent,rgba(6,4,3,.6))}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;opacity:.85}
.heroinner{position:relative;z-index:3;transform:translate(var(--px,0),var(--py,0))}
.sbmono{width:clamp(64px,9vw,96px);margin:0 auto 6px;cursor:pointer;filter:drop-shadow(0 0 20px var(--slime));-webkit-user-select:none;user-select:none;animation:pulse 3s ease-in-out infinite}
.sbmono path{stroke:var(--slime);stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes pulse{0%,100%{filter:drop-shadow(0 0 14px var(--slime))}50%{filter:drop-shadow(0 0 30px var(--slime))}}
.hero h1{font-family:var(--disp);font-size:clamp(64px,17vw,230px);line-height:.82;letter-spacing:1px;color:var(--ink);position:relative;text-shadow:0 0 40px rgba(141,255,43,.25)}
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;height:100%}
.glitch::before{color:var(--blood);z-index:-1;animation:gl1 2.6s infinite linear alternate-reverse}
.glitch::after{color:var(--slime);z-index:-2;animation:gl2 2s infinite linear alternate-reverse}
@keyframes gl1{0%{clip-path:inset(0 0 85% 0);transform:translate(-3px,-2px)}25%{clip-path:inset(60% 0 10% 0);transform:translate(3px,2px)}50%{clip-path:inset(20% 0 55% 0);transform:translate(-2px,1px)}75%{clip-path:inset(80% 0 2% 0);transform:translate(2px,-1px)}100%{clip-path:inset(40% 0 40% 0);transform:translate(-3px,0)}}
@keyframes gl2{0%{clip-path:inset(10% 0 70% 0);transform:translate(3px,1px)}50%{clip-path:inset(50% 0 30% 0);transform:translate(-3px,-2px)}100%{clip-path:inset(75% 0 5% 0);transform:translate(2px,2px)}}
.hero .sub{font-weight:600;font-size:clamp(11px,1.8vw,15px);letter-spacing:4px;text-transform:uppercase;margin-top:18px;color:var(--soft)}
.hero .sub b{color:var(--slime)}.hero .sub i{font-style:normal;color:var(--blood)}
.cta-row{display:flex;gap:13px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.counter{margin-top:28px;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--soft);border:1px solid rgba(255,255,255,.15);padding:8px 16px;background:rgba(0,0,0,.35)}
.counter b{color:var(--slime)}
.sticker{position:absolute;z-index:4;font-family:var(--disp);font-size:clamp(16px,2vw,24px);padding:8px 14px;animation:bob 4s ease-in-out infinite;border:2px solid}
.sticker.s1{top:15%;left:7%;color:var(--blood);border-color:var(--blood);transform:rotate(-9deg);background:rgba(255,31,46,.08)}
.sticker.s2{top:21%;right:6%;color:var(--slime);border-color:var(--slime);transform:rotate(8deg);animation-delay:-1.5s;background:rgba(141,255,43,.07)}
.sticker.s3{bottom:19%;left:10%;color:var(--alien2);border-color:var(--alien);transform:rotate(6deg);animation-delay:-2.5s;background:rgba(155,60,255,.08)}
.sticker.s4{bottom:23%;right:9%;color:var(--ink);border-color:#fff;transform:rotate(-11deg);animation-delay:-1s;background:rgba(255,255,255,.05)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0))}50%{transform:translateY(-12px) rotate(var(--r,0))}}
.scrollcue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;font-weight:600;font-size:11px;letter-spacing:3px;color:var(--soft);text-transform:uppercase;animation:bob 2s ease-in-out infinite}

/* MARQUEE + DRIP */
.marquee{position:relative;z-index:4;overflow:hidden;background:var(--slime);border-top:2px solid #000}
.marquee .track{display:flex;white-space:nowrap;animation:scroll 22s linear infinite}
.marquee span{font-family:var(--disp);font-size:28px;color:#08120a;padding:9px 22px;text-shadow:1px 1px 0 rgba(255,255,255,.25)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.drip{height:30px;position:relative;z-index:4;margin-top:-1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='30' viewBox='0 0 140 30'%3E%3Cpath fill='%238dff2b' d='M0 0 H140 V7 Q132 7 130 16 Q128 27 126 16 Q124 7 104 7 Q86 7 84 18 Q82 30 80 18 Q78 7 56 7 Q40 7 38 13 Q36 23 34 13 Q32 7 14 7 Q6 7 0 8 Z'/%3E%3C/svg%3E") repeat-x;background-size:140px 30px;filter:drop-shadow(0 4px 6px rgba(141,255,43,.3))}

/* SECTIONS */
section{padding:clamp(60px,9vw,116px) clamp(18px,5vw,56px);position:relative;z-index:1}
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:4px;color:var(--slime);text-transform:uppercase;margin-bottom:14px}
.kicker::before{content:"";width:26px;height:2px;background:var(--blood)}
.shead{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px;flex-wrap:wrap;gap:14px}
.shead h2{font-family:var(--disp);font-size:clamp(40px,8vw,100px);line-height:.84;letter-spacing:.5px;color:var(--ink);text-shadow:2px 0 var(--blood),-2px 0 rgba(141,255,43,.7)}
.shead h2 em{font-style:normal;color:var(--slime)}
.shead .link{font-weight:600;font-size:12px;letter-spacing:2px;color:var(--slime2);text-transform:uppercase;transition:.2s}
.shead .link:hover{color:#fff;text-shadow:0 0 10px var(--slime)}
.panel{background:rgba(12,9,7,.55);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px)}

/* FEATURED DROP / SPOTLIGHT */
.dropgrid{display:grid;grid-template-columns:1.25fr .85fr;gap:20px}
@media(max-width:880px){.dropgrid{grid-template-columns:1fr}}
.dropfeat{display:flex;gap:20px;padding:20px;align-items:center}
@media(max-width:520px){.dropfeat{flex-direction:column;text-align:center}}
.dropfeat .cover{width:170px;aspect-ratio:1;flex:none;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.15);box-shadow:0 0 30px rgba(141,255,43,.25)}
.dropfeat .dmeta{flex:1;min-width:0}
.dtag{font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:3px;color:var(--slime);text-transform:uppercase}
.dropfeat h3{font-family:var(--disp);font-size:clamp(26px,4vw,42px);line-height:.95;margin:6px 0 4px}
.dropfeat .dsub{color:var(--soft);font-size:13px;margin-bottom:14px}
.smartlinks{display:flex;flex-wrap:wrap;gap:8px;justify-content:inherit}
.smartlinks a,.smartlinks button{font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:9px 13px;border:1px solid rgba(255,255,255,.2);color:var(--ink);background:rgba(255,255,255,.03);cursor:pointer;transition:.15s;text-decoration:none}
.smartlinks a:hover,.smartlinks button:hover{border-color:var(--slime);color:var(--slime);box-shadow:0 0 16px rgba(141,255,43,.3)}
.dropcard{padding:20px;display:flex;flex-direction:column;justify-content:center;gap:12px;border:1px solid rgba(155,60,255,.3)}
.dctag{font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--alien2)}
.dropcard h4{font-family:var(--disp);font-size:24px;line-height:1}
.cd{display:flex;gap:10px}
.cdu{flex:1;text-align:center;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.3);padding:8px 4px}
.cdu b{display:block;font-family:var(--disp);font-size:26px;color:#fff;line-height:1}
.cdu span{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.cdlive{font-family:var(--disp);font-size:24px;color:var(--slime)}

/* VIDEOS */
.vidgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.vid{position:relative;cursor:pointer;border:1px solid rgba(255,255,255,.1);overflow:hidden;aspect-ratio:16/9;background:#0b0806}
.vid img{width:100%;height:100%;object-fit:cover;transition:transform .4s,filter .3s;filter:brightness(.7)}
.vid:hover img{transform:scale(1.06);filter:brightness(.95)}
.vid .pp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px;color:#fff;text-shadow:0 0 16px rgba(141,255,43,.8);pointer-events:none}
.vid .vmeta{position:absolute;left:0;right:0;bottom:0;padding:12px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}
.vid .vmt{font-family:var(--disp);font-size:17px;color:#fff;line-height:1}
.vid .vms{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--slime);text-transform:uppercase}
.vembed{position:relative;width:100%;aspect-ratio:16/9;margin-top:6px}
.vembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:4px}

/* THE LAB / SLOWED + REVERB STUDIO */
.srwrap{max-width:680px;margin:0 auto;padding:24px}
.srtop{display:flex;gap:20px;align-items:center}
@media(max-width:560px){.srtop{flex-direction:column;text-align:center}}
.srart{width:112px;height:112px;flex:none;background-size:cover;background-position:center;border:1px solid rgba(141,255,43,.3);box-shadow:0 0 26px rgba(141,255,43,.22)}
.srart.spin{animation:spin 6s linear infinite}
.srwrap.is-preview .srart{border-color:rgba(155,60,255,.5);box-shadow:0 0 28px rgba(155,60,255,.3)}
.srmeta{flex:1;min-width:0;width:100%}
.srnow{font-weight:700;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--slime2)}
.srtitle{font-family:var(--disp);font-size:26px;margin-top:3px;line-height:1.05;word-break:break-word}
.srmode{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--alien2);margin-top:5px}
.srwave{width:100%;height:34px;display:block;margin-top:12px}
.srprog{height:8px;background:rgba(255,255,255,.12);margin-top:8px;cursor:pointer;overflow:hidden;border-radius:4px}
.srprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--slime),var(--alien))}
.srtimes{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--soft);letter-spacing:1px;margin-top:6px}
/* transport: a prominent play CTA + the labelled vibe presets, set off by a top divider */
.srtransport{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.srplay{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-size:18px;letter-spacing:.5px;cursor:pointer;border:1px solid var(--slime);color:#08120a;background:var(--slime);padding:12px 28px;transition:.16s;box-shadow:0 0 22px rgba(141,255,43,.32)}
.srplay:hover{box-shadow:0 0 32px rgba(141,255,43,.6);transform:translateY(-1px)}
.srpresetwrap{display:flex;flex-direction:column;gap:8px;flex:1;min-width:210px}
.srlabel{font-family:var(--ui);font-weight:700;font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted)}
.srpresets{display:flex;flex-wrap:wrap;gap:8px}
.srpresets button{font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;padding:9px 13px;border:1px solid rgba(255,255,255,.2);background:transparent;color:var(--soft);cursor:pointer;transition:.15s}
.srpresets button:hover{border-color:var(--slime);color:var(--slime)}
.srpresets button.on{background:rgba(141,255,43,.14);color:var(--slime);border-color:var(--slime);box-shadow:0 0 14px rgba(141,255,43,.22)}
/* fine controls: each knob in its own card so the grid reads cleanly */
.srknobs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
@media(max-width:560px){.srknobs{grid-template-columns:1fr}}
.srknob{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.02)}
.srk-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.srk-top label{font-family:var(--disp);font-size:17px;letter-spacing:.5px;color:var(--ink)}
.srk-top span{font-family:var(--mono);font-size:12px;color:var(--slime);letter-spacing:1px}
.srknob input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:rgba(255,255,255,.14);outline:none;cursor:pointer;border-radius:4px}
.srknob input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--slime);box-shadow:0 0 12px var(--slime);cursor:pointer;border:2px solid #08120a}
.srknob input[type=range]::-moz-range-thumb{width:20px;height:20px;border:2px solid #08120a;border-radius:50%;background:var(--slime);box-shadow:0 0 12px var(--slime);cursor:pointer}
.srhint{font-size:12px;color:var(--muted);margin-top:18px;line-height:1.6}
.srhint b{color:var(--slime2);font-weight:600}
/* "load a track" picker — pick any catalog song to drop into the bender */
.srpick{max-width:680px;margin:22px auto 0;padding:18px 20px}
.srpickhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.srpickhead h3{font-family:var(--disp);font-weight:400;font-size:22px;margin:0;line-height:1}
.srpickhead h3 em{color:var(--slime);font-style:normal}
.srpicksub{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--muted)}
.srtracks{list-style:none;margin:0;padding:0;border:1px solid rgba(255,255,255,.12);background:rgba(12,9,7,.45);max-height:336px;overflow-y:auto}

/* JOIN — email + sms */
.joinwrap{max-width:560px;margin:22px auto 0}
.jointitle{font-family:var(--disp);font-size:20px}
.jointitle span{display:block;font-family:var(--ui);font-size:12px;letter-spacing:1px;color:var(--soft);font-weight:600;margin-top:3px}
.joinrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.joinrow input{flex:1;min-width:170px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);color:var(--ink);padding:12px 14px;font-family:var(--ui);font-size:14px}
.joinrow input:focus{outline:none;border-color:var(--slime)}
.joinrow button{font-family:var(--disp);font-size:16px;padding:0 22px;border:1px solid var(--slime);background:var(--slime);color:#08120a;cursor:pointer}
/* stacked variant — used by the first-visit popup so email + phone sit full-width over the CTA */
.joinrow-col{flex-direction:column}
.joinrow-col input,.joinrow-col button{width:100%;flex:none;min-width:0}
.joinrow-col button{padding:13px 22px}
.joinnote{font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--muted);margin-top:8px;text-align:center}
.joinnote.bad{color:var(--blood)}

/* PLAYER */
.playerwin{max-width:640px;margin:0 auto 30px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 40px rgba(141,255,43,.12);background:linear-gradient(180deg,#120d0a,#0a0706)}
.pwbar{display:flex;align-items:center;gap:10px;padding:9px 12px;background:linear-gradient(180deg,#241a14,#160f0b);color:var(--ink);border-bottom:1px solid rgba(141,255,43,.3)}
.pwbar .dots{display:flex;gap:6px}.pwbar .dots i{width:11px;height:11px;border-radius:50%;display:block}
.pwbar .dots .r{background:var(--blood)}.pwbar .dots .y{background:var(--slime)}.pwbar .dots .g{background:var(--alien)}
.pwbar .pwt{font-family:var(--disp);font-size:16px;letter-spacing:.5px}.pwbar .pwz{margin-left:auto;font-family:var(--mono);font-size:10px;opacity:.6}
.pwbody{display:flex;gap:18px;padding:20px;align-items:center}
.pwart{position:relative;width:96px;height:96px;flex-shrink:0;background-size:cover;background-position:center;border:1px solid rgba(141,255,43,.3);box-shadow:0 0 20px rgba(141,255,43,.2);transition:box-shadow .3s}
/* while a track is live the cover breathes + its halo cycles through the slime palette */
.playerwin.live .pwart{animation:pwpulse 1.7s ease-in-out infinite,pwglow 6s linear infinite}
.playerwin.live.is-preview .pwart{animation:pwpulse 1.7s ease-in-out infinite,pwglowp 3s ease-in-out infinite}
@keyframes pwpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes pwglow{0%{box-shadow:0 0 30px rgba(141,255,43,.5)}33%{box-shadow:0 0 32px rgba(155,60,255,.5)}66%{box-shadow:0 0 32px rgba(255,31,46,.45)}100%{box-shadow:0 0 30px rgba(141,255,43,.5)}}
@keyframes pwglowp{0%,100%{box-shadow:0 0 26px rgba(155,60,255,.45)}50%{box-shadow:0 0 40px rgba(155,60,255,.72)}}
.pwinfo{flex:1;min-width:0}
.pwnow{font-weight:700;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--slime2)}
.pwtitle{font-family:var(--disp);font-size:23px;margin-top:2px;color:var(--ink);line-height:1.05}
.pwbadge{display:inline-block;margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#08120a;background:var(--alien);padding:3px 9px;border-radius:3px;box-shadow:0 0 16px rgba(155,60,255,.5)}
.pwbadge[hidden]{display:none}
.pweq{width:100%;height:124px;margin-top:10px;display:block;border-radius:4px;background:radial-gradient(120% 90% at 50% 60%,rgba(141,255,43,.04),transparent 70%)}
.pwprog{height:8px;background:rgba(255,255,255,.12);margin-top:10px;cursor:pointer;overflow:hidden;border-radius:4px}
.pwprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--slime),var(--blood))}
.pwbtns{display:flex;align-items:center;gap:10px;margin-top:12px}
.pwplay{width:46px;height:46px;border-radius:50%;border:1px solid var(--slime);cursor:pointer;color:var(--slime);font-size:15px;background:rgba(141,255,43,.08);transition:.14s}
.pwplay:hover{background:var(--slime);color:#08120a}.pwplay:active{transform:scale(.95)}
.pwnav{width:36px;height:36px;flex-shrink:0;border-radius:50%;border:1px solid rgba(141,255,43,.4);cursor:pointer;color:var(--slime);font-size:12px;background:rgba(141,255,43,.05);transition:.14s;display:flex;align-items:center;justify-content:center}
.pwnav:hover{background:var(--slime);color:#08120a;border-color:var(--slime)}.pwnav:active{transform:scale(.94)}
.pwtime{font-family:var(--mono);font-size:12px;color:var(--soft);letter-spacing:1px}
.pwlinks{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:14px}
.pwlinks[hidden]{display:none}
.pwlbl{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.pwlink{font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:.5px;text-decoration:none;padding:7px 13px;border-radius:4px;border:1px solid rgba(255,255,255,.18);color:var(--ink);background:rgba(255,255,255,.04);transition:.16s;display:inline-flex;align-items:center;gap:7px}
.pwlink::before{content:"";width:13px;height:13px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor}
.pwlink[hidden]{display:none}
.pwsp{color:#1ed760}.pwsp:hover{background:rgba(30,215,96,.14);border-color:#1ed760}
.pwap{color:#fc5c7d}.pwap:hover{background:rgba(252,92,125,.14);border-color:#fc5c7d}
/* phones: keep the transport from overflowing — let it wrap, drop the volume to its own row */
@media(max-width:560px){
  .pwbody{gap:14px;padding:16px}
  .pwart{width:74px;height:74px}
  .pwtitle{font-size:20px}
  .pweq{height:96px}
  .pwbtns{flex-wrap:wrap;gap:8px}
  .pwvol{margin-left:0;flex:1 1 100%;width:100%}
  .trk{padding:12px 12px}
}

/* TRACKLIST */
.tracklist-wrap{max-width:640px;margin:0 auto 30px}
.tlhead{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tlhead h3{font-family:var(--disp);font-size:24px}.tlhead h3 em{color:var(--slime);font-style:normal}
.tlsub{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;color:var(--muted);text-transform:uppercase}.tlsub b{color:var(--alien)}
.tracklist{list-style:none;margin:0;padding:0;border:1px solid rgba(255,255,255,.12);background:rgba(12,9,7,.45)}
.trk{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.06);transition:background .16s,box-shadow .16s;position:relative}
.trk:last-child{border-bottom:0}
.trk:hover{background:rgba(141,255,43,.07)}
.trk:focus-visible{outline:none;box-shadow:inset 3px 0 0 var(--slime);background:rgba(141,255,43,.07)}
.tnum{font-family:var(--mono);font-size:12px;color:var(--muted);width:22px;flex:none;text-align:center}
.tname{font-family:var(--ui);font-weight:600;font-size:15px;color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tdur{font-family:var(--mono);font-size:11px;color:var(--muted);flex:none}
.tgo{font-size:11px;color:var(--slime);flex:none;opacity:0;transition:opacity .16s;width:14px;text-align:center}
.trk:hover .tgo{opacity:1}
.tbadge{font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#08120a;background:var(--alien);padding:2px 7px;border-radius:3px;flex:none;box-shadow:0 0 12px rgba(155,60,255,.45)}
/* the little animated EQ that lights the row that's actually playing */
.teq{display:none;align-items:flex-end;gap:2px;width:16px;height:16px;flex:none}
.teq i{width:3px;background:var(--slime);border-radius:1px;height:30%}
.trk.active .teq{display:flex}
.trk.active .tnum{display:none}
.trk.active{background:rgba(141,255,43,.1)}
.trk.active .tname{color:var(--slime)}
.trk.active .tgo{opacity:1}
.trk.playing .teq i{animation:teqb .9s ease-in-out infinite}
.trk.playing .teq i:nth-child(2){animation-delay:.18s}
.trk.playing .teq i:nth-child(3){animation-delay:.36s}
.trk.playing .teq i:nth-child(4){animation-delay:.12s}
@keyframes teqb{0%,100%{height:20%}50%{height:100%}}
.trk.preview{background:rgba(155,60,255,.06)}
.trk.preview .tname{color:#c9a3ff}
.trk.preview.active{background:rgba(155,60,255,.12)}
.trk.preview.active .tname{color:var(--alien)}
.trk.preview .teq i{background:var(--alien)}
.trk.preview:hover{background:rgba(155,60,255,.12)}

/* MUSIC GRID */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.rel{display:block;position:relative;overflow:hidden;background:rgba(12,9,7,.5);border:1px solid rgba(255,255,255,.12);transition:.25s}
.rel:hover{transform:translateY(-5px);border-color:var(--slime);box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 26px rgba(141,255,43,.18)}
.rel .art{aspect-ratio:1;overflow:hidden;position:relative;background:#120d0a}
.rel .art img{height:100%;object-fit:cover;transition:.5s}
.rel:hover .art img{transform:scale(1.08);filter:saturate(1.2)}
.rel .art .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,4,3,.5);opacity:0;transition:.3s}
.rel:hover .art .play{opacity:1}
.rel .art .play i{width:52px;height:52px;border-radius:50%;border:1px solid var(--slime);color:var(--slime);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:17px;box-shadow:0 0 22px var(--slime);background:rgba(141,255,43,.1)}
.rel .meta{padding:13px 14px 15px}
.rel .meta .t{font-family:var(--disp);font-size:18px;letter-spacing:.3px}
.rel .meta .s{font-weight:500;font-size:11px;color:var(--muted);letter-spacing:1px;margin-top:3px;text-transform:uppercase}
.embedwrap{margin-top:34px;overflow:hidden;padding:6px}

/* VISUALIZER */
.viz{padding:0;position:relative;height:78svh;min-height:520px;overflow:hidden;border-top:2px solid rgba(141,255,43,.25);border-bottom:2px solid rgba(141,255,43,.25);background:radial-gradient(125% 110% at 50% 42%,#0c140a 0%,#080b07 52%,#050302 100%)}
#vizCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.viz .vtext{position:absolute;z-index:3;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;pointer-events:none;padding:0 16px}
.viz .vtext h2{font-family:var(--disp);font-size:clamp(44px,12vw,150px);letter-spacing:2px;color:var(--ink);text-shadow:3px 0 var(--blood),-3px 0 rgba(141,255,43,.8)}
.viz .vtext p{font-weight:600;font-size:13px;letter-spacing:4px;text-transform:uppercase;margin-top:10px;color:var(--slime)}
.viz .vbtn{position:absolute;z-index:4;bottom:30px;left:50%;transform:translateX(-50%)}

/* ABOUT */
.about{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,5vw,60px);align-items:center}
.about .pic{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid rgba(141,255,43,.35);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.about .pic img{height:100%;object-fit:cover;object-position:center 30%;filter:contrast(1.06) saturate(1.04)}
.about .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,4,3,.7)),linear-gradient(120deg,rgba(141,255,43,.1),transparent 45%)}
.about .pic .badge{position:absolute;bottom:14px;left:14px;font-family:var(--disp);font-size:16px;color:var(--slime);z-index:2;text-shadow:0 0 12px rgba(141,255,43,.6)}
.about .lead{font-family:var(--disp);font-size:clamp(32px,4.6vw,60px);line-height:1;color:var(--ink);text-shadow:2px 0 var(--blood)}
.about .lead em{font-style:normal;color:var(--slime)}
.about p{font-size:15px;line-height:1.8;margin-top:20px;color:var(--soft);max-width:54ch;font-weight:300}
.stats{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.stat{padding:14px 22px;border:1px solid rgba(255,255,255,.12);text-align:center}
.stat .n{font-family:var(--disp);font-size:34px;color:var(--slime)}
.stat .l{font-weight:600;font-size:10px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-top:3px}

/* ===== LANDING INFO BANDS (home page) ===== */
.lkicker{justify-content:flex-start}
.lintro{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,60px);align-items:center}
.lintro .lpic{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid rgba(141,255,43,.35);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.lintro .lpic img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:contrast(1.06) saturate(1.04)}
.lintro .lpic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,4,3,.7)),linear-gradient(120deg,rgba(141,255,43,.12),transparent 45%)}
.lhead{font-family:var(--disp);font-size:clamp(32px,4.6vw,58px);line-height:.95;color:var(--ink);text-shadow:2px 0 var(--blood)}
.lhead em{font-style:normal;color:var(--slime)}
.lbody{font-size:15px;line-height:1.8;margin-top:18px;color:var(--soft);max-width:54ch;font-weight:300}
.lbtn{margin-top:26px}
.lstatgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lstat{padding:26px 16px;border:1px solid rgba(255,255,255,.12);text-align:center;background:rgba(12,9,7,.45)}
.lstat .ln{font-family:var(--disp);font-size:clamp(34px,5vw,52px);color:var(--slime);text-shadow:0 0 18px rgba(141,255,43,.3)}
.lstat .ll{font-weight:600;font-size:11px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-top:6px}
.lctabox{text-align:center;padding:clamp(34px,6vw,64px) clamp(20px,5vw,48px);border:1px solid rgba(255,31,46,.28)}
.lctahead{font-family:var(--disp);font-size:clamp(36px,7vw,80px);line-height:.9;color:var(--ink);text-shadow:2px 0 var(--blood),-2px 0 rgba(141,255,43,.7)}
.lctahead em{font-style:normal;color:var(--slime)}
.lctatext{font-size:15px;line-height:1.7;color:var(--soft);max-width:48ch;margin:16px auto 0;font-weight:300}
.lctabtn{margin-top:28px}
@media(max-width:820px){
  .lintro{grid-template-columns:1fr;gap:26px}
  .lintro .lpic{max-width:340px}
  .lstatgrid{grid-template-columns:repeat(2,1fr)}
}

/* SB UNIVERSE */
.upanels{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.upanel{position:relative;padding:24px 20px 28px;min-height:210px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;transition:.3s;background:rgba(12,9,7,.55);border:1px solid rgba(255,255,255,.1)}
.upanel:hover{transform:translateY(-6px);border-color:var(--slime);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.upanel .orb{position:absolute;width:120px;height:120px;border-radius:50%;top:-30px;right:-30px;filter:blur(10px);opacity:.5;transition:.4s}
.upanel:nth-child(1) .orb{background:radial-gradient(circle,var(--blood),transparent 70%)}
.upanel:nth-child(2) .orb{background:radial-gradient(circle,var(--slime),transparent 70%)}
.upanel:nth-child(3) .orb{background:radial-gradient(circle,var(--alien),transparent 70%)}
.upanel:nth-child(4) .orb{background:radial-gradient(circle,var(--blood),transparent 70%)}
.upanel:nth-child(5) .orb{background:radial-gradient(circle,var(--slime),transparent 70%)}
.upanel:hover .orb{opacity:1;transform:scale(1.4)}
.upanel{cursor:pointer}
.upanel:focus-visible{outline:2px solid var(--slime);outline-offset:3px}
.uenter{position:absolute;top:14px;right:16px;font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;opacity:0;transition:.3s}
.upanel:hover .uenter,.upanel:focus-visible .uenter{opacity:1;color:var(--slime)}
.uhint{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin:-4px 0 14px}
/* power card (modal) */
.pcard .ptag{font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--c,#8dff2b)}
.pcard h3{font-family:var(--disp);font-size:34px;line-height:.95;margin:4px 0 10px}
.pcard p{color:var(--soft);line-height:1.6}
.pmeters{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.pmeter{display:grid;grid-template-columns:84px 1fr 34px;gap:10px;align-items:center}
.pmeter .pml{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.pbar{height:8px;background:rgba(255,255,255,.1);overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:var(--c,#8dff2b);box-shadow:0 0 12px var(--c,#8dff2b);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.pmeter .pmv{font-family:var(--mono);font-size:11px;color:var(--ink);text-align:right}
.upanel .idx{position:absolute;top:14px;left:18px;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.4)}
.upanel .ut{font-family:var(--disp);font-size:28px;color:var(--ink)}
.upanel .ud{font-size:13px;line-height:1.6;color:var(--soft);margin-top:8px;max-width:30ch;font-weight:300}

/* VAULT */
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.vcard{position:relative;aspect-ratio:16/10;overflow:hidden;display:block;border:1px solid rgba(255,255,255,.14)}
.vcard img{height:100%;object-fit:cover;transition:.6s;filter:brightness(.7) contrast(1.1) saturate(1.1)}
.vcard:hover img{transform:scale(1.08);filter:brightness(.95)}
.vcard::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 40%,rgba(6,4,3,.88))}
.vcard .vinfo{position:absolute;z-index:2;left:15px;bottom:13px;right:15px}
.vcard .vinfo .vt{font-family:var(--disp);font-size:22px}
.vcard .vinfo .vs{font-weight:600;font-size:10px;letter-spacing:1px;color:var(--slime2);text-transform:uppercase;margin-top:3px}
.vcard .pico{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);width:58px;height:58px;border-radius:50%;border:1px solid var(--slime);color:var(--slime);background:rgba(6,4,3,.5);display:flex;align-items:center;justify-content:center;font-size:18px;opacity:0;transition:.3s;box-shadow:0 0 26px var(--slime)}
.vcard:hover .pico{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* MERCH */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.prod{position:relative;overflow:hidden;background:rgba(12,9,7,.5);border:1px solid rgba(255,255,255,.1);transition:.25s}
.prod:hover{transform:translateY(-5px);border-color:var(--slime)}
.prod .part{aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(circle at 50% 35%,#1a120d,#0a0706)}
.prod .part svg{width:58%;height:58%;filter:drop-shadow(0 0 16px rgba(141,255,43,.4))}
.prod .part .soon{position:absolute;top:10px;left:10px;font-family:var(--disp);font-size:13px;color:var(--blood);border:1px solid var(--blood);padding:3px 8px}
.prod .pmeta{padding:14px;display:flex;justify-content:space-between;align-items:center}
.prod .pmeta .pt{font-family:var(--disp);font-size:17px}
.prod .pmeta .pty{font-weight:500;font-size:10px;color:var(--muted);margin-top:3px;text-transform:uppercase}
.prod .pmeta .pp{font-family:var(--disp);font-size:16px;color:var(--slime)}

/* MERCH — coming soon */
.comingsoon{text-align:center;padding:48px 26px 54px;display:flex;flex-direction:column;align-items:center;gap:15px;max-width:640px;margin:0 auto;border:1px solid rgba(141,255,43,.25)}
.comingsoon .cs-snake{width:96px;filter:drop-shadow(0 0 18px var(--slime));animation:pulse 3s ease-in-out infinite}
.comingsoon .cs-snake path{stroke:var(--slime);stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.comingsoon .cs-big{font-family:var(--disp);font-size:clamp(40px,8vw,78px);line-height:.9;letter-spacing:2px;color:var(--ink);text-shadow:2px 0 var(--blood),-2px 0 rgba(141,255,43,.7)}
.comingsoon p{font-size:14px;line-height:1.7;color:var(--soft);max-width:46ch;font-weight:300}
.comingsoon .cs-snake-i{font-style:normal}

/* SHOWS */
.shows{padding:54px 28px;text-align:center}
.shows .big{font-family:var(--disp);font-size:clamp(30px,5vw,56px);line-height:1;color:var(--ink);text-shadow:2px 0 var(--blood)}
.shows .big em{font-style:normal;color:var(--slime)}
.shows p{font-weight:600;font-size:12px;letter-spacing:2px;color:var(--soft);text-transform:uppercase;margin-top:14px}

/* CONTACT */
.contact{position:relative;text-align:center;overflow:hidden}
#contactCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:.5}
.contact .inner{position:relative;z-index:2}
.contact .sbmono{width:90px;margin:0 auto 18px}
.contact h2{font-family:var(--disp);font-size:clamp(44px,9vw,120px);letter-spacing:1px;color:var(--ink);text-shadow:3px 0 var(--blood),-3px 0 rgba(141,255,43,.8)}
.contact .clinks{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.joinrow input::placeholder{color:var(--muted)}
.booking{margin-top:22px;font-weight:500;font-size:13px;letter-spacing:1px;color:var(--soft)}
.booking a{color:var(--slime)}

footer{padding:48px 22px 40px;text-align:center;position:relative;z-index:1}
.fmark{font-family:var(--disp);font-size:clamp(60px,20vw,240px);line-height:.8;color:var(--ink);opacity:.92;text-shadow:3px 0 var(--blood),-3px 0 rgba(141,255,43,.6)}
.fbadges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.fbadge{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.5px;padding:5px 10px;border:1px solid rgba(255,255,255,.2);color:var(--soft)}
.fcopy{font-weight:500;font-size:11px;color:var(--muted);letter-spacing:1px;margin-top:18px}
.flinks{font-size:11px;letter-spacing:.5px;margin-top:10px;color:var(--muted)}
.flinks a{color:var(--muted);text-decoration:underline;opacity:.85}
.flinks a:hover{color:var(--soft);opacity:1}

.musicbar{position:fixed;left:16px;bottom:16px;z-index:2000;display:flex;align-items:center;padding:7px;background:rgba(12,9,7,.85);backdrop-filter:blur(12px);border:1px solid rgba(141,255,43,.3);box-shadow:0 8px 30px rgba(0,0,0,.55)}
.disc{width:44px;height:44px;border-radius:50%;flex-shrink:0;cursor:pointer;position:relative;background-size:cover;background-position:center;border:2px solid var(--slime);box-shadow:0 0 16px rgba(141,255,43,.4)}
.disc::after{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;border-radius:50%;background:#060403;border:1px solid var(--slime)}
.disc.spin{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.minfo{padding:0 14px 0 11px;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .4s ease}
.musicbar.open .minfo{max-width:200px}
.minfo .now{font-weight:700;font-size:8px;letter-spacing:2px;color:var(--slime2);text-transform:uppercase}
.minfo .stitle{font-family:var(--disp);font-size:15px;margin-top:1px}
.pbtn{width:40px;height:40px;flex-shrink:0;border-radius:50%;border:1px solid var(--slime);cursor:pointer;color:var(--slime);font-size:13px;background:rgba(141,255,43,.1);transition:.14s}
.pbtn:active{transform:scale(.94)}
.mbtn{width:30px;height:30px;flex-shrink:0;margin:0 3px;border-radius:50%;border:1px solid rgba(141,255,43,.4);cursor:pointer;color:var(--slime);font-size:11px;background:rgba(141,255,43,.06);transition:.14s;display:flex;align-items:center;justify-content:center}
.mbtn:hover{background:rgba(141,255,43,.16)}
.mbtn:active{transform:scale(.9)}
#ytbg{position:fixed;left:-9999px;bottom:0;width:200px;height:120px;opacity:.001;pointer-events:none;z-index:-1}

#rageOverlay{position:fixed;inset:0;z-index:9995;pointer-events:none;opacity:0;transition:opacity .4s;mix-blend-mode:screen;background:repeating-linear-gradient(0deg,rgba(255,31,46,.05) 0 1px,transparent 1px 3px),radial-gradient(60% 50% at 50% 50%,rgba(255,31,46,.1),transparent 70%)}
body.rage.rfx-overlay #rageOverlay{opacity:1;background:repeating-linear-gradient(0deg,rgba(255,31,46,.08) 0 1px,transparent 1px 3px),radial-gradient(70% 60% at 50% 50%,rgba(255,31,46,.18),transparent 72%)}
body.rage.rfx-shake{animation:rageshake .09s steps(2) infinite}
@keyframes rageshake{0%{transform:translate(0,0)}25%{transform:translate(-2px,2px)}50%{transform:translate(2px,-2px)}75%{transform:translate(-2px,-1px)}100%{transform:translate(2px,1px)}}
body.rage .blob{filter:blur(80px) hue-rotate(-95deg) saturate(1.4)}
.rmtag{position:fixed;top:58px;left:50%;transform:translateX(-50%);z-index:2001;font-family:var(--disp);font-size:16px;color:#fff;background:var(--blood);padding:6px 16px;opacity:0;transition:.4s;box-shadow:0 0 24px var(--blood);pointer-events:none;letter-spacing:1px}
body.rage .rmtag{opacity:1}
#flash{position:fixed;inset:0;z-index:9990;background:var(--slime);opacity:0;pointer-events:none}

/* ===== RAGE MODE EFFECT STACK (toggled per-effect via admin → Rage Mode) ===== */
#rfx{position:fixed;inset:0;z-index:9994;pointer-events:none}
#rfx>div{position:absolute;inset:0;opacity:0;transition:opacity .3s}
/* heartbeat — a red vignette pulsing like a racing heart */
body.rfx-heart .fx-heart{opacity:1;mix-blend-mode:screen;background:radial-gradient(125% 95% at 50% 50%,transparent 48%,rgba(255,12,12,.5) 100%);animation:rfxheart 1.05s ease-in-out infinite}
@keyframes rfxheart{0%,100%{opacity:.22}28%{opacity:.85}42%{opacity:.38}}
/* fire — flames licking up from the bottom edge */
body.rage.rfx-fire .fx-fire{opacity:1;top:auto;bottom:0;height:44vh;mix-blend-mode:screen;background:radial-gradient(60% 100% at 18% 100%,rgba(255,86,12,.6),transparent 72%),radial-gradient(55% 95% at 50% 100%,rgba(255,176,24,.55),transparent 70%),radial-gradient(60% 100% at 82% 100%,rgba(255,44,12,.6),transparent 72%);animation:rfxfire .5s ease-in-out infinite alternate}
@keyframes rfxfire{from{transform:translateY(7px) scaleY(.95)}to{transform:translateY(-7px) scaleY(1.06)}}
/* TV static — noisy flicker over everything */
body.rage.rfx-static .fx-static{opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:rfxstatic .1s steps(2) infinite}
@keyframes rfxstatic{0%{transform:translate(0,0)}50%{transform:translate(-2%,1%)}100%{transform:translate(1%,-2%)}}
/* blood drip — a smear at the top that bleeds downward */
body.rage.rfx-drip .fx-drip{opacity:1;background:linear-gradient(180deg,rgba(120,0,0,.85),rgba(120,0,0,.4) 6%,transparent 14%),radial-gradient(8px 38px at 12% 0,rgba(150,0,0,.9),transparent 70%),radial-gradient(7px 60px at 28% 0,rgba(130,0,0,.85),transparent 72%),radial-gradient(9px 30px at 47% 0,rgba(150,0,0,.9),transparent 70%),radial-gradient(6px 72px at 63% 0,rgba(120,0,0,.85),transparent 74%),radial-gradient(8px 44px at 79% 0,rgba(150,0,0,.9),transparent 70%),radial-gradient(7px 54px at 92% 0,rgba(130,0,0,.85),transparent 72%);background-repeat:no-repeat;animation:rfxdrip 6s ease-in forwards}
@keyframes rfxdrip{from{transform:translateY(-10px)}to{transform:translateY(0)}}
/* glitch / RGB split — occasional datamosh bursts on the page content */
body.rage.rfx-glitch #main{animation:rfxglitch 2.8s steps(1) infinite}
@keyframes rfxglitch{0%,90%,100%{transform:none;filter:none}92%{transform:translate(-3px,0);filter:drop-shadow(2px 0 rgba(255,0,40,.8)) drop-shadow(-2px 0 rgba(0,230,255,.8))}94%{transform:translate(3px,0);filter:drop-shadow(-3px 0 rgba(255,0,40,.8)) drop-shadow(3px 0 rgba(0,230,255,.8))}96%{transform:translate(-2px,1px)}98%{transform:translate(2px,-1px);filter:drop-shadow(2px 0 rgba(255,0,40,.7)) drop-shadow(-2px 0 rgba(0,230,255,.7))}}

.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

@media(max-width:820px){
  .navmenu{display:none}
  .burger{display:flex}
  nav.open .navmenu{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;gap:16px;background:rgba(8,5,4,.97);padding:20px 22px;border-bottom:1px solid rgba(141,255,43,.3);box-shadow:0 18px 40px rgba(0,0,0,.5)}
  nav.open .navmenu .navlinks{flex-direction:column;gap:16px;font-size:15px}
  nav.open .navmenu .btnX{align-self:flex-start;margin-top:4px}
  .about{grid-template-columns:1fr}
  .sticker{display:none}
}

/* ACTIVE NAV LINK (scroll-spy) */
.navlinks a.active{opacity:1;color:var(--slime);text-shadow:0 0 10px var(--slime)}
.navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--slime);box-shadow:0 0 8px var(--slime)}

/* VOLUME SLIDER */
.pwvol{-webkit-appearance:none;appearance:none;width:84px;height:4px;background:rgba(255,255,255,.18);outline:none;cursor:pointer;margin-left:auto}
.pwvol::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--slime);box-shadow:0 0 8px var(--slime);cursor:pointer}
.pwvol::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--slime);box-shadow:0 0 8px var(--slime);cursor:pointer}

/* BACK TO TOP */
.totop{position:fixed;right:16px;bottom:16px;z-index:2000;width:46px;height:46px;border-radius:50%;border:1px solid var(--slime);background:rgba(12,9,7,.85);backdrop-filter:blur(12px);color:var(--slime);font-size:18px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,background .14s,box-shadow .14s,transform .14s;box-shadow:0 8px 30px rgba(0,0,0,.55)}
.totop.show{opacity:1;visibility:visible}
.totop:hover{background:var(--slime);color:#08120a;box-shadow:0 0 22px rgba(141,255,43,.5)}
.totop:active{transform:scale(.92)}

/* SKIP LINK (a11y) */
.skip{position:fixed;top:-60px;left:12px;z-index:12000;background:var(--slime);color:#08120a;font-weight:700;font-size:13px;letter-spacing:1px;padding:10px 16px;text-transform:uppercase;transition:top .2s}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--slime);outline-offset:2px}

/* REDUCED MOTION (a11y) — tame heavy animation for users who ask for it */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  body.rage.rfx-shake{animation:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ===== FLESH-OUT: toasts, modal, filters, shows, shortcuts ===== */
/* TOASTS */
#toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:11500;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:1px;color:#08120a;background:var(--slime);padding:12px 20px;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 22px rgba(141,255,43,.4);transform:translateY(20px);opacity:0;transition:.3s;max-width:90vw;text-align:center}
.toast.show{transform:none;opacity:1}
.toast.blood{background:var(--blood);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 22px rgba(255,31,46,.45)}
.toast.alien{background:var(--alien);color:#fff}

/* MODAL */
.modal{position:fixed;inset:0;z-index:11200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(4,3,2,.82);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.3s}
.modal.open{opacity:1;visibility:visible}
.modal .box{position:relative;max-width:520px;width:100%;max-height:88vh;overflow:auto;background:linear-gradient(180deg,#140e0a,#0a0706);border:1px solid rgba(141,255,43,.3);box-shadow:0 30px 80px rgba(0,0,0,.7);transform:translateY(18px) scale(.98);transition:.3s}
.modal.open .box{transform:none}
.modal .x{position:absolute;top:10px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.4);color:#fff;font-size:16px;cursor:pointer;line-height:1}
.modal .x:hover{border-color:var(--slime);color:var(--slime)}
.mhead{aspect-ratio:1;max-height:300px;background-size:cover;background-position:center;position:relative;display:flex;border-bottom:1px solid rgba(141,255,43,.25)}
.mhead.wide{aspect-ratio:16/9;max-height:240px}
.mhead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,7,6,.92))}
.mhead svg{position:relative;z-index:1;margin:auto;width:42%;filter:drop-shadow(0 0 18px rgba(141,255,43,.4))}
.mbody{padding:22px}
.mbody h3{font-family:var(--disp);font-size:30px;color:var(--ink);line-height:1}
.mbody p{font-size:14px;line-height:1.7;color:var(--soft);margin-top:12px;font-weight:300}
.mlabel{font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:18px}
.sizes{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sizes button{font-family:var(--ui);font-weight:600;font-size:13px;min-width:42px;padding:9px 12px;border:1px solid rgba(255,255,255,.22);background:transparent;color:var(--ink);cursor:pointer;transition:.15s}
.sizes button:hover{border-color:var(--slime);color:var(--slime)}
.sizes button.sel{background:var(--slime);color:#08120a;border-color:var(--slime)}
.mcta{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}

/* FIRST-VISIT JOIN POPUP (reuses the modal shell + .joinrow / .joinnote) */
.joinpop .kicker{justify-content:flex-start}
.joinpop h3 em{color:var(--slime2);font-style:normal}
.joinpop .joinrow input{font-size:16px}
.jpskip{display:block;margin:16px auto 0;background:none;border:none;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:1px;text-decoration:underline;cursor:pointer}
.jpskip:hover{color:var(--slime)}

/* MUSIC FILTER TABS */
.mfilter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.mfilter button{font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--soft);cursor:pointer;transition:.16s}
.mfilter button:hover{color:var(--slime);border-color:var(--slime)}
.mfilter button.on{background:var(--slime);color:#08120a;border-color:var(--slime)}
.rel.hide{display:none}

/* MERCH interactive */
.prod{cursor:pointer}
.prod .watching{position:absolute;top:10px;right:10px;z-index:2;font-family:var(--mono);font-size:10px;color:var(--slime);border:1px solid var(--slime);padding:3px 7px;background:rgba(6,4,3,.7);opacity:0;transition:.2s}
.prod.watched .watching{opacity:1}

/* SHOWS data-driven */
.showlist{display:flex;flex-direction:column;gap:10px;max-width:680px;margin:0 auto 22px;text-align:left}
.showrow{display:flex;align-items:center;gap:16px;padding:15px 18px;border:1px solid rgba(255,255,255,.12);background:rgba(12,9,7,.5);transition:.2s}
.showrow:hover{border-color:var(--slime)}
.showrow .date{font-family:var(--disp);font-size:20px;color:var(--slime);min-width:84px}
.showrow .venue{flex:1;min-width:0}
.showrow .venue .v1{font-family:var(--disp);font-size:18px;color:var(--ink)}
.showrow .venue .v2{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:2px}
.showrow .tix{font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--slime);color:var(--slime);padding:8px 14px;white-space:nowrap;cursor:pointer;background:transparent}
.showrow .tix:hover{background:var(--slime);color:#08120a}

/* SHORTCUTS help */
.helpbtn{position:fixed;right:16px;bottom:72px;z-index:2000;width:38px;height:38px;border-radius:50%;border:1px solid rgba(141,255,43,.5);background:rgba(12,9,7,.85);backdrop-filter:blur(12px);color:var(--slime);font-family:var(--disp);font-size:18px;cursor:pointer;transition:.16s}
.helpbtn:hover{background:var(--slime);color:#08120a;box-shadow:0 0 18px rgba(141,255,43,.5)}
.klist{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
@media(max-width:520px){.klist{grid-template-columns:1fr}}
.krow{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--soft)}
.krow kbd{font-family:var(--mono);font-size:11px;color:var(--ink);border:1px solid rgba(255,255,255,.25);border-bottom-width:2px;padding:3px 8px;background:rgba(255,255,255,.05);min-width:18px;text-align:center}

/* ===================== MULTI-PAGE LAYOUT ===================== */
main{display:block;position:relative;z-index:1}
/* skip the loader on every page after the first of a session (set in <head>) */
html.seen #loader{display:none!important}

/* inner-page header (every page except home) */
.pagehead{position:relative;z-index:1;text-align:center;padding:clamp(116px,18vh,200px) clamp(18px,5vw,56px) clamp(8px,3vw,28px)}
.pagehead .kicker{justify-content:center}
.pagehead h1{font-family:var(--disp);font-size:clamp(50px,12vw,150px);line-height:.82;letter-spacing:1px;color:var(--ink);text-shadow:0 0 40px rgba(141,255,43,.22);position:relative}
.pagehead .psub{font-weight:600;font-size:clamp(11px,1.7vw,15px);letter-spacing:4px;text-transform:uppercase;margin-top:16px;color:var(--soft)}
.pagehead .psub b{color:var(--slime)}.pagehead .psub i{font-style:normal;color:var(--blood)}
/* the section right after a page header doesn't need its full top pad */
.pagehead + section{padding-top:clamp(18px,4vw,46px)}

/* connect page reads as its own landing */
body.page-connect #connect{padding-top:clamp(112px,15vh,160px);min-height:100svh;display:flex;align-items:center}
body.page-connect #connect .inner{width:100%}

/* no-JS / crawler fallback navigation */
.nojs{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(8,5,4,.96);border-bottom:1px solid var(--slime);padding:11px 16px;text-align:center;font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:1px;color:var(--soft)}
.nojs a{color:var(--slime);margin:0 7px;text-decoration:underline}

/* ===================== INTERACTION LAYER ===================== */
/* scroll-progress bar */
#progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--blood),var(--alien),var(--slime));box-shadow:0 0 10px rgba(141,255,43,.55);z-index:1001;pointer-events:none;transition:transform .1s linear}

/* slime page-wipe between pages */
/* EXIT panel (the page you're leaving): slides up to cover, then we navigate */
.wipe{position:fixed;inset:0;z-index:10800;pointer-events:none;transform:translateY(100%);display:flex;align-items:center;justify-content:center;overflow:visible;background:linear-gradient(180deg,var(--slime2),var(--slime) 45%,var(--venom))}
.wipe.in{transform:translateY(0);transition:transform .45s cubic-bezier(.76,0,.24,1)}
/* ENTER cover (the page you arrive on): present at first paint via the head script,
   then slides up and away — no flash. */
html.wipe-armed::before{content:"";position:fixed;inset:0;z-index:10850;pointer-events:none;background:linear-gradient(180deg,var(--slime2),var(--slime) 45%,var(--venom));animation:wipeAway .55s cubic-bezier(.76,0,.24,1) forwards}
@keyframes wipeAway{from{transform:translateY(0)}to{transform:translateY(-100%)}}
.wipe .wmk{width:clamp(70px,12vw,112px);filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));animation:pulse 1.1s ease-in-out infinite}
.wipe .wmk path{stroke:#08120a;stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.wipe::after{content:"";position:absolute;left:0;right:0;bottom:-27px;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='30' viewBox='0 0 140 30'%3E%3Cpath fill='%238dff2b' d='M0 0 H140 V7 Q132 7 130 16 Q128 27 126 16 Q124 7 104 7 Q86 7 84 18 Q82 30 80 18 Q78 7 56 7 Q40 7 38 13 Q36 23 34 13 Q32 7 14 7 Q6 7 0 8 Z'/%3E%3C/svg%3E") repeat-x;background-size:140px 30px}

/* 3D tilt — kill the base transition while actively tilting so it tracks the pointer */
.tilting{transition:none!important;will-change:transform;z-index:2}

/* merch — interactive product grid (uses the .prod / .sizes styles above) */
#merch .msub{text-align:center;max-width:52ch;margin:-18px auto 28px;color:var(--soft);font-weight:300;line-height:1.7;font-size:14px}
#merch .pgrid{max-width:1000px;margin:0 auto}
#merch .merch-cta{text-align:center;margin-top:32px}
.prod{cursor:pointer}
.prod:focus-visible{outline:2px solid var(--slime);outline-offset:3px}
.prod .part svg{width:58%;height:58%;animation:pulse 3s ease-in-out infinite}
.prod .part svg path{stroke:var(--slime);stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ===================== MOBILE / TOUCH POLISH ===================== */
/* kill the grey tap-flash on touch */
*{-webkit-tap-highlight-color:transparent}

@media(hover:none){
  /* tactile press feedback — the touch stand-in for desktop hover/tilt */
  .rel,.vcard,.vid,.upanel,.prod,.dropfeat,.dropcard{transition:transform .18s ease,box-shadow .25s,border-color .25s}
  .rel:active,.vcard:active,.vid:active,.upanel:active,.prod:active,.dropfeat:active,.dropcard:active{transform:scale(.97)}
  .bigbtn:active,.btnX:active,.srplay:active,.srpresets button:active,.smartlinks a:active,.smartlinks button:active,.mfilter button:active,.sizes button:active,.showrow .tix:active,.shead .link:active,.clinks a:active{transform:scale(.95)}
  /* there's no hover on touch, so keep the play/enter affordances visible */
  .rel .art .play,.vcard .pico,.upanel .uenter{opacity:1}
}

@media(max-width:640px){
  /* 16px inputs so iOS doesn't auto-zoom the page on focus */
  .joinrow input{font-size:16px}
  /* a touch less top space under the compact mobile nav */
  .pagehead{padding-top:96px}
  /* float toasts above the bottom player + buttons */
  #toasts{bottom:88px}
  /* lighten the heavy backdrop blur for smoother scrolling on phones */
  .blob{filter:blur(46px);opacity:.4}
  .blob.b3{display:none}
}

/* ===== CMS CONTENT BLOCKS (page add-ons + custom pages) =====
   Freeform blocks added from the admin. They reuse the site's section
   padding, kicker, and button styles so they match every built-in page. */
.sbblock{position:relative}
.sbblock-in{max-width:1100px;margin:0 auto}
.sbblock-h{font-family:var(--disp);font-size:clamp(32px,6vw,72px);line-height:.9;letter-spacing:.5px;color:var(--ink);text-shadow:2px 0 var(--blood),-2px 0 rgba(141,255,43,.7);margin-bottom:18px}
.sbblock-text{color:var(--soft);font-size:clamp(15px,1.9vw,18px);line-height:1.7;max-width:64ch}
.sbblock-img{width:100%;height:clamp(220px,42vw,520px);background:#000 center/cover no-repeat;border:1px solid rgba(255,255,255,.1);border-radius:10px;margin:6px 0 22px}
.sbblock-cta{margin-top:26px}
.sbblock-video{position:relative;width:100%;max-width:900px;margin:8px auto 0;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;background:#000}
.sbblock-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* centered (default) */
.sb-centered .sbblock-in{max-width:760px;text-align:center}
.sb-centered .kicker{justify-content:center}
.sb-centered .sbblock-text{margin-left:auto;margin-right:auto}
/* left-aligned */
.sb-left .sbblock-in{max-width:860px}
/* boxed card */
.sb-card .sbblock-in{max-width:880px;background:rgba(12,9,7,.55);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);padding:clamp(26px,4vw,54px);border-radius:14px}
/* full-bleed banner: the block image becomes the background */
.sb-full{background-size:cover;background-position:center}
.sb-full::before{content:"";position:absolute;inset:0;background:rgba(6,4,3,.62)}
.sb-full .sbblock-in{position:relative;z-index:1;max-width:820px;text-align:center}
.sb-full .kicker{justify-content:center}
.sb-full .sbblock-text{margin-left:auto;margin-right:auto}

/* ===================== SMART LINKS (link-in-bio) =====================
   Single smart-link landing (link.html / 404 routing) + the /links portal hub.
   Reuses the .bigbtn theme palette; namespaced sl-/pt- to avoid the drop-section
   .smartlinks class. */
.sl-zone{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(96px,16vh,160px) clamp(18px,5vw,56px) clamp(48px,8vh,90px);position:relative;z-index:1}
.sl-host{width:100%;display:flex;justify-content:center}
.sl-card{width:100%;max-width:460px;background:rgba(12,9,7,.62);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);border-radius:18px;padding:clamp(22px,4vw,34px);text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.sl-art{width:clamp(180px,52vw,300px);aspect-ratio:1;margin:0 auto 22px;border-radius:14px;background:#000 center/cover no-repeat;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 50px rgba(141,255,43,.16)}
.sl-art-blank{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,rgba(141,255,43,.14),transparent 70%)}
.sl-art-blank svg{width:46%}
.sl-art-blank path{stroke:var(--slime);stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 16px var(--slime))}
.sl-meta .kicker{justify-content:center}
.sl-title{font-family:var(--disp);font-size:clamp(34px,8vw,60px);line-height:.88;letter-spacing:.5px;color:var(--ink);text-shadow:2px 0 var(--blood),-2px 0 rgba(141,255,43,.7)}
.sl-sub{margin-top:12px;font-weight:600;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--soft)}
.sl-btns{display:flex;flex-direction:column;gap:11px;margin-top:26px}
.sl-btn{justify-content:space-between;width:100%;font-size:14px}
.sl-btn-go{opacity:.6;font-weight:400}
.sl-empty{color:var(--soft);font-weight:600;letter-spacing:1px}
.sl-share{margin-top:22px}
.sl-foot{margin-top:30px;text-align:center}
.sl-foot a{font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--slime2);transition:.2s}
.sl-foot a:hover{color:#fff;text-shadow:0 0 10px var(--slime)}

/* portal hub */
.pt-zone{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(110px,16vh,170px) clamp(18px,5vw,56px) clamp(48px,8vh,90px);position:relative;z-index:1}
.pt-wrap{width:100%;max-width:520px;text-align:center}
.pt-wrap .sbmono{width:clamp(58px,12vw,82px)}
.pt-wrap .kicker{justify-content:center}
.pt-name{font-family:var(--disp);font-size:clamp(46px,12vw,96px);line-height:.82;letter-spacing:1px;color:var(--ink);text-shadow:0 0 40px rgba(141,255,43,.22);position:relative}
.pt-sub{margin-top:14px;font-weight:600;font-size:clamp(11px,1.7vw,14px);letter-spacing:3px;text-transform:uppercase;color:var(--soft)}
.pt-list{display:flex;flex-direction:column;gap:12px;margin-top:30px}
.pt-item{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(12,9,7,.5);backdrop-filter:blur(6px);text-align:left;transition:.16s}
.pt-item:hover{border-color:var(--slime);box-shadow:0 0 26px rgba(141,255,43,.22);transform:translateY(-2px)}
.pt-art{flex:none;width:54px;height:54px;border-radius:10px;background:#000 center/cover no-repeat;border:1px solid rgba(255,255,255,.12)}
.pt-art-blank{display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--slime);background:radial-gradient(circle,rgba(141,255,43,.16),transparent 70%)}
.pt-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pt-t{font-family:var(--ui);font-weight:700;font-size:15px;letter-spacing:1px;color:var(--ink);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-s{font-size:12px;letter-spacing:1px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-go{flex:none;color:var(--slime);font-size:18px;opacity:.7}
.pt-item:hover .pt-go{opacity:1}
.pt-social{margin-top:34px}
.pt-label{display:block;font-weight:700;font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.pt-social .sl-btns{flex-direction:row;flex-wrap:wrap;justify-content:center}
.pt-social .sl-btn{width:auto;flex:1 1 140px;justify-content:center}
.pt-social .sl-btn-go{display:none}
.pt-join{margin-top:30px}
@media(max-width:600px){.pt-social .sl-btn{flex-basis:120px}}

/* ===== SLIME THE GAME — mobile chrome =====
   On phones the quest page hands its bottom thumb-zone to the fixed control deck
   (defined in quest.html). So here we give the NOW-PLAYING bar its own zone, docked
   just above that deck, and tuck away the floating help / back-to-top buttons so they
   can never collide with the DASH / RAGE / JUMP cluster. The footer is padded clear of
   both. Scoped to body.page-quest, so desktop and every other page are untouched. */
@media(max-width:760px){
  /* The quest engine publishes --q-deckh (the live control-deck height, safe-area included)
     on :root, so the NOW-PLAYING bar docks as a slim strip RIGHT above the deck — flush, no
     floating in a void — and the footer/toasts clear both. Falls back to 250px pre-mount. */
  body.page-quest .musicbar{
    left:50%; right:auto; top:auto;
    bottom:calc(var(--q-deckh,250px) + 6px);
    transform:translateX(-50%);
    max-width:calc(100vw - 24px); z-index:1950;
    padding:6px 8px; background:rgba(8,12,8,.85);
  }
  body.page-quest .musicbar.open .minfo{ max-width:150px; } /* keep the title, lose the clutter */
  body.page-quest .musicbar #prevbtn,
  body.page-quest .musicbar #nextbtn{ display:none; }
  body.page-quest .totop,
  body.page-quest .helpbtn{ display:none; }
  /* keep the footer + toasts above the fixed console deck and the docked player */
  body.page-quest footer{ padding-bottom:calc(var(--q-deckh,250px) + 70px); }
  body.page-quest #toasts{ bottom:calc(var(--q-deckh,250px) + 60px); }
}