:root{
  --cb: rgba(0,179,255,.95);
  --nv: rgba(124,77,255,.95);

  --glass: rgba(12, 14, 22, .55);
  --glass2: rgba(12, 14, 22, .40);
  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(255,255,255,.08);

  --shadow: 0 18px 55px rgba(0,0,0,.55);
  --shadowSoft: 0 14px 40px rgba(0,0,0,.40);
}

/* ===== BACKDROP AURORA ===== */
body{
  background:
    radial-gradient(1200px 520px at 10% 6%, rgba(0,179,255,.18), transparent 60%),
    radial-gradient(980px 480px at 90% 4%, rgba(124,77,255,.20), transparent 62%),
    radial-gradient(1100px 560px at 55% 20%, rgba(255,255,255,.06), transparent 65%),
    linear-gradient(180deg, rgba(8,10,16,1) 0%, rgba(7,8,14,1) 55%, rgba(6,7,12,1) 100%);
}

.site-main{
  position: relative;
  overflow: hidden;
}

.site-main::before{
  content:"";
  position:absolute;
  inset:-200px -200px auto -200px;
  height: 520px;
  background:
    radial-gradient(closest-side at 20% 40%, rgba(0,179,255,.35), transparent 70%),
    radial-gradient(closest-side at 70% 30%, rgba(124,77,255,.35), transparent 70%),
    radial-gradient(closest-side at 50% 65%, rgba(255,255,255,.10), transparent 75%);
  filter: blur(24px);
  opacity: .55;
  pointer-events:none;
  animation: auroraFloat 10.5s ease-in-out infinite;
}

@keyframes auroraFloat{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(40px,18px,0) scale(1.04); }
}

/* ===== HERO ===== */
.hero .wrap{
  padding: 44px 20px 26px;
  text-align: center;
  position: relative;
}

.hero h1{
  font-family: "Orbitron", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .6px;
  margin: 0 0 10px;
  text-shadow:
    0 0 22px rgba(0,179,255,.18),
    0 0 34px rgba(124,77,255,.15);
}

.hero .sub{
  margin: 0 auto 18px;
  max-width: 880px;
  opacity: .86;
  font-size: 1.05rem;
}

/* subtle “opalescent underline” */
.title-accent{
  width: min(520px, 86%);
  height: 2px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(0,179,255,0),
    rgba(0,179,255,.65),
    rgba(124,77,255,.65),
    rgba(255,255,255,.25),
    rgba(124,77,255,.65),
    rgba(0,179,255,.65),
    rgba(0,179,255,0)
  );
  box-shadow: 0 0 22px rgba(0,179,255,.20);
  opacity: .9;
}

/* ===== GLASS PANELS / “OPALESCENCE” ===== */
.opal{
  position: relative;
  border-radius: 22px;
  background:
    radial-gradient(1200px 420px at 18% 0%, rgba(0,179,255,.18), transparent 60%),
    radial-gradient(900px 360px at 90% 0%, rgba(124,77,255,.20), transparent 55%),
    radial-gradient(900px 400px at 50% 90%, rgba(255,255,255,.08), transparent 65%),
    var(--glass);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* faint moving shimmer */
.opal::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 18%,
    rgba(0,179,255,.10) 34%,
    rgba(124,77,255,.12) 50%,
    rgba(255,255,255,.08) 66%,
    rgba(255,255,255,0) 82%
  );
  opacity: .55;
  transform: translateX(-55%);
  filter: blur(14px);
  animation: shimmer 9.5s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: screen;
}

@keyframes shimmer{
  0%,100%{ transform: translateX(-55%); opacity: .45; }
  50%{ transform: translateX(55%); opacity: .65; }
}

/* ===== SPONSOR BAR (PREMIUM) ===== */
.dtn-sponsor-bar{
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 120px at 20% 50%, rgba(0,179,255,.12), transparent 65%),
    radial-gradient(900px 140px at 80% 50%, rgba(124,77,255,.14), transparent 65%),
    rgba(10,12,18,.66);
  backdrop-filter: blur(10px);
}

.dtn-sponsor-bar .wrap{ padding: 10px 16px; }

.dtn-sponsor-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  opacity: .98;
  transition: transform .15s ease, filter .15s ease;
}

.dtn-sponsor-link:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.dtn-sponsor-logo{
  height: 62px;
  width: auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

/* ===== WHERE TO WATCH ===== */
.watch-panel{
  margin: 20px auto 0;
  max-width: 980px;
  padding: 18px 18px 16px;
}

.watch-panel h2{
  margin: 0 0 6px;
  font-size: 1.22rem;
  letter-spacing: .25px;
}

.watch-panel p{
  margin: 0 0 14px;
  opacity: .78;
  font-size: .98rem;
}

.platform-row{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.btn.platform{
  position: relative;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  user-select:none;
  isolation: isolate;
  overflow: hidden;
}

.btn.platform::before{
  content:"";
  position:absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.08), transparent 52%);
  opacity: .55;
  filter: blur(12px);
  transform: rotate(18deg);
  pointer-events:none;
  z-index: 0;
}

.btn.platform > span{ position: relative; z-index: 1; }

.btn.platform:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
}

/* Brand glows */
.btn.platform.twitch{
  border-color: rgba(145,70,255,.38);
  background: linear-gradient(180deg, rgba(145,70,255,.22), rgba(255,255,255,.05));
  box-shadow: 0 0 0 1px rgba(145,70,255,.10), 0 14px 34px rgba(145,70,255,.14);
}
.btn.platform.youtube{
  border-color: rgba(255,0,0,.30);
  background: linear-gradient(180deg, rgba(255,0,0,.16), rgba(255,255,255,.05));
  box-shadow: 0 0 0 1px rgba(255,0,0,.10), 0 14px 34px rgba(255,0,0,.12);
}
.btn.platform.tiktok{
  border-color: rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(0,242,234,.14), rgba(255,0,80,.10)),
    rgba(255,255,255,.05);
  box-shadow: 0 0 0 1px rgba(0,242,234,.08), 0 0 0 1px rgba(255,0,80,.07) inset, 0 14px 34px rgba(0,0,0,.34);
}
.btn.platform.instagram{
  border-color: rgba(193,53,132,.30);
  background:
    linear-gradient(135deg,
      rgba(252,175,69,.16),
      rgba(245,96,64,.12),
      rgba(193,53,132,.14),
      rgba(131,58,180,.12)
    ),
    rgba(255,255,255,.05);
  box-shadow: 0 0 0 1px rgba(193,53,132,.10), 0 14px 34px rgba(193,53,132,.12);
}

/* ===== QUICK LINKS (FANCIER CARDS) ===== */
.quick-links{ padding: 18px 0 26px; }
.quick-links .wrap.grid-3{ gap: 16px; }

.quick-links .card{
  position: relative;
  border-radius: 22px;
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(0,179,255,.13), transparent 62%),
    radial-gradient(900px 220px at 90% 0%, rgba(124,77,255,.16), transparent 60%),
    rgba(12, 14, 22, .45);
  border: 1px solid var(--stroke2);
  box-shadow: var(--shadowSoft);
  transform: translateZ(0);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;
}

.quick-links .card::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.08) 30%,
    rgba(0,179,255,.08) 45%,
    rgba(124,77,255,.10) 60%,
    rgba(255,255,255,0) 78%
  );
  opacity: .35;
  transform: translateX(-60%);
  filter: blur(14px);
  transition: opacity .18s ease;
  pointer-events:none;
  mix-blend-mode: screen;
}

.quick-links .card:hover{
  transform: translateY(-5px);
  filter: brightness(1.05);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 22px 55px rgba(0,0,0,.55);
}

.quick-links .card:hover::after{
  opacity: .55;
  animation: cardSweep 1.2s ease forwards;
}

@keyframes cardSweep{
  0%{ transform: translateX(-60%); }
  100%{ transform: translateX(60%); }
}

.quick-links .card h3{
  font-family: "Orbitron", system-ui, sans-serif;
  letter-spacing: .35px;
}

/* ===== SUPPORT ===== */
.support{ padding: 22px 0 56px; }

.support .panel{
  margin: 0 auto;
  max-width: 760px;
  padding: 22px 18px;
}

.support h2{ margin: 0 0 10px; }

.support-row{
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.support .btn.pill{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}

.support .btn.pill:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}

.support .btn.pill.kofi{
  border-color: rgba(255,94,94,.35);
  background: linear-gradient(
    135deg,
    rgba(255,94,94,.20),
    rgba(255,255,255,.06)
  );
  box-shadow:
    0 0 0 1px rgba(255,94,94,.12),
    0 14px 32px rgba(255,94,94,.14);
}

/* mobile */
@media (max-width: 899.98px){
  .hero h1{ font-size: 2.25rem; }
  .watch-panel{ padding: 16px; }
  .dtn-sponsor-link{ flex-direction: column; gap: 8px; text-align: center; }
  .dtn-sponsor-logo{ height: 56px; }
}

/* reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  .site-main::before, .opal::after{ animation: none !important; }
  .quick-links .card:hover::after{ animation: none !important; transform: translateX(0) !important; }
  .btn.platform, .quick-links .card, .support .btn.pill{ transition: none !important; }
}