:root{
  --bg:#07040d; --pink:#ff2bd6; --magenta:#e100ff; --purple:#8a2bff;
  --text:#f3e9ff; --muted:#b9a6d6; --card:rgba(24,10,40,.55); --line:rgba(255,43,214,.35);
  --boost:1;
}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--bg);color:var(--text);font:400 16px/1.7 Poppins,system-ui,sans-serif;overflow-x:hidden;min-height:100vh}
body.is-live{--boost:1.6}
a{color:var(--pink);text-decoration:none}
a:hover{text-shadow:0 0 12px var(--pink)}
code{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:6px;font-size:.9em;color:#ffb3f3}
::selection{background:var(--pink);color:#fff}
#bg{position:fixed;inset:0;z-index:-3;width:100%;height:100%}
.blobs{position:fixed;inset:0;z-index:-2;overflow:hidden;filter:blur(90px);opacity:calc(.5 * var(--boost));pointer-events:none;transition:opacity 1.5s}
.blobs i{position:absolute;border-radius:50%;width:46vmax;height:46vmax;animation:float 22s ease-in-out infinite alternate;will-change:transform}
.blobs i:nth-child(1){background:radial-gradient(circle,var(--pink),transparent 65%);top:-15%;left:-10%}
.blobs i:nth-child(2){background:radial-gradient(circle,var(--purple),transparent 65%);bottom:-20%;right:-10%;animation-duration:28s}
.blobs i:nth-child(3){background:radial-gradient(circle,var(--magenta),transparent 65%);top:35%;left:40%;width:30vmax;height:30vmax;animation-duration:34s;opacity:.6}
@keyframes float{to{transform:translate(12vw,10vh) scale(1.25) rotate(40deg)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px),
  radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.65))}
.cursor-glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle,rgba(255,43,214,.22),rgba(138,43,255,.1) 40%,transparent 68%);will-change:transform}
.cursor-glow.on{opacity:1}
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:100;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--pink),var(--magenta),var(--purple));box-shadow:0 0 12px var(--pink),0 0 24px var(--magenta)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,4vw,48px);transition:.3s}
.nav.scrolled{background:rgba(7,4,13,.75);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line),0 8px 30px rgba(255,43,214,.12)}
.logo{font:800 1.3rem Orbitron,sans-serif;letter-spacing:.12em;color:#fff;text-shadow:0 0 14px var(--pink),0 0 30px var(--magenta)}
.nav nav{display:flex;gap:clamp(12px,2.2vw,26px);align-items:center}
.nav nav a{color:var(--text);font-size:.92rem;font-weight:500;position:relative}
.nav nav a[data-nav]::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--pink);box-shadow:0 0 10px var(--pink);transform:scaleX(0);transition:transform .3s}
.nav nav a[data-nav].active{color:var(--pink)}
.nav nav a[data-nav].active::after,.nav nav a[data-nav]:hover::after{transform:scaleX(1)}
@media(max-width:640px){.nav nav a[data-nav]{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;font-weight:600;color:#fff!important;
  background:linear-gradient(120deg,var(--pink),var(--magenta),var(--purple),var(--pink));background-size:300% 100%;
  box-shadow:0 0 18px rgba(255,43,214,.6),0 0 50px rgba(138,43,255,.35),inset 0 0 12px rgba(255,255,255,.25);
  animation:shift 6s linear infinite;transition:transform .2s,box-shadow .2s;text-shadow:none!important}
.btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 0 28px rgba(255,43,214,.9),0 0 80px rgba(138,43,255,.55),inset 0 0 12px rgba(255,255,255,.3)}
.btn-sm{padding:8px 18px;font-size:.88rem}
.btn-ghost{background:transparent;border:1.5px solid var(--pink);box-shadow:0 0 14px rgba(255,43,214,.35),inset 0 0 14px rgba(255,43,214,.15);animation:none}
body.is-live #watchBtn{animation:pulseBtn 1.4s ease-in-out infinite}
@keyframes pulseBtn{50%{box-shadow:0 0 34px var(--pink),0 0 80px rgba(255,43,214,.7),inset 0 0 20px rgba(255,43,214,.4)}}
@keyframes shift{to{background-position:300% 0}}

/* hero */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:110px 20px 80px;position:relative}
.eyebrow{letter-spacing:.5em;text-transform:uppercase;color:var(--muted);font-size:.85rem;margin-top:22px}
.hero h1{font:900 clamp(3rem,13vw,9rem)/1 Orbitron,sans-serif;letter-spacing:.06em;margin:10px 0;color:#fff;position:relative;
  text-shadow:0 0 10px var(--pink),0 0 calc(30px*var(--boost)) var(--pink),0 0 calc(60px*var(--boost)) var(--magenta),0 0 calc(110px*var(--boost)) var(--purple);animation:flicker 5s infinite}
.hero h1::before,.hero h1::after{content:attr(data-text);position:absolute;inset:0;opacity:.7;mix-blend-mode:screen;pointer-events:none}
.hero h1::before{color:#00e5ff;clip-path:inset(0 0 60% 0);animation:gl1 4s infinite steps(1)}
.hero h1::after{color:var(--pink);clip-path:inset(60% 0 0 0);animation:gl2 3.3s infinite steps(1)}
@keyframes gl1{0%,92%,100%{transform:translate(0);opacity:0}93%{transform:translate(-5px,2px);opacity:.7}96%{transform:translate(4px,-2px);opacity:.7}}
@keyframes gl2{0%,88%,100%{transform:translate(0);opacity:0}89%{transform:translate(5px,-2px);opacity:.7}93%{transform:translate(-4px,2px);opacity:.7}}
@keyframes flicker{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.82}}
.handle{font:600 clamp(1.1rem,3vw,1.6rem) Orbitron,sans-serif;color:var(--pink);text-shadow:0 0 14px var(--pink)}
.tagline{max-width:600px;color:var(--muted);margin:18px auto 30px;font-weight:300;font-size:1.1rem;min-height:1.7em}
.caret{color:var(--pink);animation:blink 1s steps(1) infinite;margin-left:2px}
.cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.scroll-hint{position:absolute;bottom:26px;width:26px;height:44px;border:2px solid var(--line);border-radius:14px}
.scroll-hint span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--pink);box-shadow:0 0 8px var(--pink);animation:wheel 1.6s infinite}
@keyframes wheel{to{transform:translateY(18px);opacity:0}}

/* live pill */
.live-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;font:700 .85rem Orbitron,sans-serif;letter-spacing:.18em;
  background:rgba(20,8,34,.7);border:1.5px solid rgba(185,166,214,.4);color:var(--muted);transition:.4s}
.live-pill .dot{width:10px;height:10px;border-radius:50%;background:var(--muted)}
.live-pill[data-state=checking] .dot,.live-pill[data-state=unknown] .dot{animation:blink 1.2s infinite}
.live-pill[data-state=live]{color:#fff;border-color:var(--pink);background:rgba(255,43,214,.18);box-shadow:0 0 20px var(--pink),0 0 60px rgba(255,43,214,.5),inset 0 0 14px rgba(255,43,214,.4);animation:pulse 1.6s ease-in-out infinite}
.live-pill[data-state=live] .dot{background:#ff2b5e;box-shadow:0 0 12px #ff2b5e,0 0 24px #ff2b5e;animation:blink 1s infinite}
.live-pill[data-state=offline] .dot{background:#6d5a8a}
@keyframes pulse{50%{box-shadow:0 0 34px var(--pink),0 0 90px rgba(255,43,214,.7),inset 0 0 20px rgba(255,43,214,.5)}}
@keyframes blink{50%{opacity:.25}}

/* ticker */
.ticker{overflow:hidden;white-space:nowrap;border-block:1.5px solid var(--line);background:rgba(255,43,214,.1);
  box-shadow:0 0 30px rgba(255,43,214,.3),inset 0 0 30px rgba(255,43,214,.12);padding:10px 0;font:600 .95rem Orbitron,sans-serif;letter-spacing:.08em}
.ticker[hidden]{display:none}
.ticker-track{display:inline-flex;animation:marquee 28s linear infinite;will-change:transform}
.ticker-track span{padding:0 2.2rem;color:#fff;text-shadow:0 0 10px var(--pink)}
.ticker-track span b{color:var(--pink)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* sections */
.section{max-width:1180px;margin:0 auto;padding:100px clamp(16px,4vw,40px)}
.section h2{font:800 clamp(1.8rem,5vw,3rem) Orbitron,sans-serif;text-align:center;margin-bottom:34px;letter-spacing:.04em;position:relative}
.section h2::after{content:"";display:block;height:3px;width:0;margin:12px auto 0;border-radius:3px;background:linear-gradient(90deg,var(--pink),var(--purple));box-shadow:0 0 14px var(--pink);transition:width 1s .3s cubic-bezier(.2,.7,.2,1)}
.section h2.in::after{width:90px}
.neon{color:var(--pink);text-shadow:0 0 10px var(--pink),0 0 28px var(--magenta)}
.glow-box{border:1.5px solid var(--line);border-radius:18px;background:var(--card);backdrop-filter:blur(10px);
  box-shadow:0 0 24px rgba(255,43,214,.22),0 0 70px rgba(138,43,255,.18),inset 0 0 30px rgba(138,43,255,.08)}
.status-row{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:24px}
.now-playing{color:var(--text);text-align:center;max-width:760px;font-size:1.02rem}
.now-playing b{color:var(--pink);text-shadow:0 0 10px var(--pink)}
.now-playing[hidden],.offline-card[hidden]{display:none}
.offline-card{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:center;text-align:center;padding:16px 24px;border-radius:16px;
  border:1.5px dashed var(--line);background:rgba(20,8,34,.6);box-shadow:0 0 30px rgba(138,43,255,.2)}
.offline-card strong{color:var(--pink);text-shadow:0 0 10px var(--pink);width:100%}
.offline-card span{color:var(--muted)}
.stage{display:grid;grid-template-columns:minmax(0,3fr) minmax(280px,1fr);gap:20px}
/* animated neon border */
.neon-border{position:relative;border-radius:18px;padding:2px;background:conic-gradient(from var(--a),var(--pink),var(--purple),#00e5ff,var(--magenta),var(--pink));
  animation:spin 5s linear infinite;box-shadow:0 0 calc(24px*var(--boost)) rgba(255,43,214,.45),0 0 calc(70px*var(--boost)) rgba(138,43,255,.35)}
body.is-live .neon-border{animation-duration:2.5s}
.neon-border .inner{background:#0a0514;border-radius:16px;overflow:hidden;height:100%}
@keyframes spin{to{--a:360deg}}
.player{aspect-ratio:16/9}
.player #twitch-embed,.player iframe{width:100%;height:100%;border:0;display:block}
.chat{min-height:420px}
.chat iframe{width:100%;height:100%;min-height:416px;border:0;display:block}
@media(max-width:860px){.stage{grid-template-columns:1fr}.chat{height:480px}}
.note{text-align:center;color:var(--muted);font-size:.9rem;margin-top:20px}
.card{display:block;padding:clamp(22px,4vw,44px);max-width:760px;margin:0 auto;font-size:1.08rem;text-align:center;transition:transform .15s ease-out,box-shadow .3s;transform-style:preserve-3d;color:var(--text)}
.card:hover{box-shadow:0 0 34px rgba(255,43,214,.45),0 0 90px rgba(138,43,255,.3)}
.catch{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:860px;margin:0 auto}
.catch .card{max-width:none;margin:0}
.catch b{display:block;font:700 1.2rem Orbitron,sans-serif;color:var(--pink);text-shadow:0 0 12px var(--pink);margin-bottom:8px}
.catch span{color:var(--muted);font-size:.95rem}
.socials{list-style:none;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.socials a{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:999px;border:1.5px solid var(--line);font-weight:500;background:rgba(20,8,34,.5);transition:.2s}
.socials a:hover{background:rgba(255,43,214,.15);box-shadow:0 0 20px rgba(255,43,214,.5);transform:translateY(-2px)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:16px}
.day{padding:22px 14px;text-align:center;border-radius:16px;border:1.5px solid var(--line);background:var(--card);backdrop-filter:blur(8px);transition:.25s}
.day:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 0 28px rgba(255,43,214,.45);border-color:var(--pink)}
.day b{display:block;font:700 1rem Orbitron,sans-serif;color:var(--pink);text-shadow:0 0 10px var(--pink);letter-spacing:.1em}
.day span{color:var(--muted);font-size:.92rem}
footer{position:relative;text-align:center;padding:60px 20px 50px;color:var(--muted);font-size:.92rem;overflow:hidden}
footer .socials{margin:0 0 22px}
.foot-glow{position:absolute;left:10%;right:10%;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--pink),var(--purple),transparent);box-shadow:0 0 24px var(--pink),0 0 60px var(--magenta)}
.to-top{position:fixed;right:18px;bottom:18px;z-index:60;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--pink);background:rgba(20,8,34,.8);color:#fff;font-size:1.3rem;cursor:pointer;
  box-shadow:0 0 18px rgba(255,43,214,.6);opacity:0;transform:translateY(20px);pointer-events:none;transition:.3s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{box-shadow:0 0 30px var(--pink);transform:translateY(-3px)}

/* reveal (with direction variants) */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal[data-reveal=left]{transform:translateX(-60px)}
.reveal[data-reveal=right]{transform:translateX(60px)}
.reveal[data-reveal=zoom]{transform:scale(.92)}
.reveal.in{opacity:1;transform:none}
.reveal.settled{transition:transform .2s ease-out,box-shadow .3s,border-color .3s;transition-delay:0s!important}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}.reveal{opacity:1;transform:none}.cursor-glow{display:none}
  .section h2::after{width:90px}
}
@media(hover:none){.cursor-glow{display:none}}
/* fix: keep player 16:9 */
.player{position:relative!important;width:100%;aspect-ratio:16/9;height:auto!important;min-height:0}
.player>#twitch-embed{position:absolute!important;inset:0;width:100%!important;height:100%!important}
.player #twitch-embed iframe{width:100%!important;height:100%!important}
@supports not (aspect-ratio:16/9){.player{padding-top:56.25%}}

.player>.inner{position:absolute!important;inset:3px;height:auto!important}
.player>.inner>#twitch-embed{position:absolute!important;inset:0;width:100%!important;height:100%!important}

/* compact hero */
.hero{min-height:0!important;padding:96px 20px 30px!important}
.hero .scroll-hint{display:none}
.tagline{margin:10px auto 18px}