:root{
  --bg:#20a06d;
  --text:#effaf7;
  --c-blue:#2feeae;
  --c-pink:#ff5362;
  --c-violet:#fff07f;
  --glow-blue-soft:0 0 6px rgba(21, 226, 158, 0.28);

  --line-soft:rgba(255, 255, 255, 0);
  --shadow:0 8px 22px rgba(0,0,0,.25);
  --card-radius:0px;
  --grid-cols:7;
  --title-shift:4s;
  --title-flicker:7s;
  --blink-duration:.16s;
  --blink-episode-count:2;
  --epbtn-blink-duration:.65s;

  --snow-opacity:0.9;
  --snow-size-1:2.2px;
  --snow-size-2:3.2px;
  --snow-size-3:4.2px;
}

body.no-snow::before,
body.no-snow::after,
body.no-snow main::after{display:none!important}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:'Quicksand',sans-serif;
  color:var(--text);
  overflow-x:hidden;
  background:
    radial-gradient(1200px 600px at 18% -8%, rgba(255,255,255,.15), transparent 55%),
    radial-gradient(900px 500px at 88% 0%, rgba(255,255,255,.10), transparent 62%),
    var(--bg);
  position:relative;
  min-height:100vh;
}

body::before,
body::after{
  content:"";
  position:fixed;
  left:0; top:-12%;
  width:100%; height:124%;
  pointer-events:none;
  z-index:0;
  opacity:var(--snow-opacity);
}

body::before{
  background-image:
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 5% 10%,  rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 12% 24%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 18% 0%,  rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 25% 18%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-3) var(--snow-size-3) at 32% 8%,  rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 38% 22%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 46% 5%,  rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-3) var(--snow-size-3) at 52% 16%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 60% 2%,  rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 67% 20%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 74% 6%,  rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-3) var(--snow-size-3) at 81% 15%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 88% 3%,  rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 94% 18%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 8% 32%,  rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 20% 40%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-3) var(--snow-size-3) at 35% 28%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 58% 34%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 72% 24%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 90% 30%, rgba(255,255,255,.95) 50%, transparent 51%);
  animation:snowFall1 28s linear infinite;
  filter:blur(.5px);
}

body::after{
  background-image:
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 10% -8%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-3) var(--snow-size-3) at 24% -12%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 36% -6%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 48% -14%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-3) var(--snow-size-3) at 62% -10%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 74% -16%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 86% -9%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 14% -22%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 42% -18%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-3) var(--snow-size-3) at 68% -20%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 92% -15%, rgba(255,255,255,.95) 50%, transparent 51%);
  animation:snowFall2 36s linear infinite;
  opacity:calc(var(--snow-opacity) * .85);
  filter:blur(.9px);
}

main::after{
  content:"";
  position:fixed;
  left:-10%; top:-15%;
  width:120%; height:130%;
  pointer-events:none;
  z-index:0;
  opacity:calc(var(--snow-opacity) * .55);
  background-image:
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 8% -6%,   rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 18% -12%,  rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 28% -4%,   rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 38% -14%,  rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 48% -7%,   rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 58% -11%,  rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 68% -8%,   rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 78% -15%,  rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 88% -5%,   rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 96% -12%,  rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(var(--snow-size-2) var(--snow-size-2) at 32% -20%,  rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(var(--snow-size-1) var(--snow-size-1) at 66% -18%,  rgba(255,255,255,.9) 50%, transparent 51%);
  animation:snowFall3 48s linear infinite;
  filter:blur(1.3px);
}

@keyframes snowFall1{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-1%,110%,0)}
}
@keyframes snowFall2{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(1.2%,115%,0)}
}
@keyframes snowFall3{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(0,120%,0)}
}

main::before{
  content:"";
  position:fixed;
  inset:-20% -20% -20% -20%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(600px 400px at 25% 25%, rgba(255,244,163,.08) 0%, transparent 70%),
    radial-gradient(700px 450px at 75% 45%, rgba(50,213,160,.10) 0%, transparent 72%),
    radial-gradient(500px 350px at 55% 80%, rgba(255,94,107,.08) 0%, transparent 75%);
  mix-blend-mode:screen;
  animation:glowDrift 70s ease-in-out infinite;
}
@keyframes glowDrift{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.35}
  50%{transform:translate3d(1.5%,-1.5%,0) scale(1.06);opacity:.42}
  100%{transform:translate3d(0,0,0) scale(1);opacity:.35}
}

a{text-decoration:none;color:inherit}

.header-inner{
  max-width:1100px; margin:0 auto; padding:12px 20px 8px;
  display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto;
  gap:6px 12px; align-items:center;
}
.brand h1{
  margin:0; font-size:clamp(22px,3.2vw,36px); font-weight:700; letter-spacing:.5px;
  background:linear-gradient(90deg,var(--c-blue),var(--c-pink),var(--c-violet),var(--c-blue));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-size:220% 100%;
  animation:titleShift var(--title-shift) ease-in-out infinite alternate,
           neonFlicker var(--title-flicker) steps(1,end) infinite;
  text-shadow:
    0 0 10px rgba(50,213,160,.35),
    0 0 18px rgba(255,244,163,.25);
}
@keyframes titleShift{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes neonFlicker{0%,96%{opacity:1}96.5%{opacity:.5}97%{opacity:1}97.5%{opacity:.3}98%{opacity:1}99%{opacity:.6}100%{opacity:1}}

nav{grid-column:2/3;grid-row:1/2;justify-self:end}
nav a{position:relative;margin-left:14px;padding:6px 2px;font-weight:600}
nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,var(--c-blue),var(--c-blue));
  opacity:.9; box-shadow:0 0 8px rgba(50,213,160,.35);
  transition:background .3s, box-shadow .3s, opacity .3s;
}
nav a:hover::after{
  background:linear-gradient(90deg,var(--c-pink),var(--c-pink));
  box-shadow:0 0 10px rgba(255,94,107,.45); opacity:1;
}

.subnote{
  grid-column:2/3; grid-row:2/3; justify-self:end;
  color:#e9f3ee; font-weight:400; opacity:.95; font-size:.95rem;
}
.subnote a{color:var(--c-blue); text-shadow:0 0 6px rgba(50,213,160,.35); transition:color .3s, text-shadow .3s}
.subnote a:hover{color:var(--c-pink); text-shadow:0 0 10px rgba(255,94,107,.45)}

main{max-width:1100px; margin:12px auto 40px; padding:0 20px; position:relative; z-index:1}

.season{
  margin:18px 0; border:1px solid rgba(50,213,160,.30);
  border-radius:10px; background:rgba(0,0,0,.22); overflow:hidden;
}
.season.open{background:rgba(0,0,0,.30); box-shadow:0 4px 18px rgba(0,0,0,.25)}

.season-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; cursor:pointer; font-weight:800; color:var(--text);
}
.season-body{
  overflow:hidden; max-height:0; opacity:0;
  transition:max-height .45s ease, opacity .35s ease, padding .25s ease;
  padding:0 10px 0;
}
.season.open .season-body{max-height:none; opacity:1; padding:10px 10px 12px}

.episode-card{
  background:rgba(0,0,0,.12);
  border:1px solid rgba(50,213,160,.30);
  border-radius:var(--card-radius);
  overflow:hidden; cursor:pointer; position:relative;
  box-shadow:var(--glow-blue-soft);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.episode-card:hover{
  transform:translateY(-3px);
  animation:borderBlink var(--blink-duration) ease-in-out var(--blink-episode-count);
  border-color:var(--c-pink);
  box-shadow:0 0 8px rgba(255,94,107,.25);
}
.episode-card.active{border-color:var(--c-pink)!important; box-shadow:0 0 10px rgba(255,94,107,.30)}

@keyframes borderBlink{0%{border-color:var(--c-blue)}50%{border-color:var(--c-pink)}100%{border-color:var(--c-blue)}}

.ep-number,
.episode-title,
.episode-card,
.season-header,
.loading,
.error-msg,
.ep-btn{font-family:'Quicksand',sans-serif}

.ep-number{
  position:absolute; top:3px; left:3px;
  font-weight:800; font-size:1.4rem; letter-spacing:.3px;
  color:#ffffff; text-shadow:0 0 10px rgb(0,0,0);
  pointer-events:none; z-index:30;
}

.episode-img{width:100%; height:132px; object-fit:cover; background:rgba(0,0,0,.15); display:block; border-radius:0}
.episode-title{padding:7px 9px; font-weight:600; font-size:.86rem; text-align:center; color:#fff; text-shadow:0 0 3px rgba(0,0,0,.25)}

#viewer{margin-top:24px; text-align:center; opacity:0; transform:translateY(10px); transition:.4s ease}
#viewer.show{opacity:1; transform:translateY(0)}
#viewer img{max-width:100%; border-radius:3px; margin-bottom:16px; opacity:0; animation:fadeIn .6s ease forwards}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.loading,.error-msg{
  font-weight:700; margin:10px 0 18px; font-size:1rem;
  background:linear-gradient(90deg,var(--c-blue),var(--c-pink),var(--c-blue));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-size:200% 100%; animation:flow 1.4s linear infinite;
}
.error-msg{animation:flow 2s linear infinite}
@keyframes flow{0%{background-position:0% 50%}100%{background-position:100% 50%}}

.ep-nav{display:flex; gap:12px; justify-content:center; align-items:center; margin:10px 0 26px}
.ep-btn{
  font-weight:700; border:2px solid var(--c-blue); background:transparent;
  color:var(--text); padding:9px 14px; border-radius:12px; cursor:pointer; transition:.2s ease;
}
.ep-btn:hover{border-color:var(--c-pink); box-shadow:0 0 10px var(--c-pink); color:var(--c-pink)}
.ep-btn[disabled]{border-color:rgba(255,255,255,.28)!important; color:rgba(255,255,255,.65); box-shadow:none!important; opacity:.7; cursor:not-allowed; pointer-events:none}

footer{
  border-top:1px solid var(--line-soft);
  background:rgba(0,0,0,.20);
  backdrop-filter:blur(3px);
  text-align:center; color:#fff; padding:22px 16px; font-size:.92rem;
}