:root{
  --bg:#000000;
  --red:#ff1a1a;
  --red-soft:#ff3d3d;
  --text:#e9e9e9;
  --muted:#9e9e9e;
  --card:rgba(0,0,0,.45);
  --radius:22px;
  --glow:0 0 18px rgba(255,30,30,.6), 0 0 44px rgba(255,30,30,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Unica One", sans-serif;
  overflow-x:hidden;
}

.intro-overlay{
  position:fixed;
  inset:0;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  transition: opacity .4s ease, visibility .4s ease;
}
.intro-overlay.hidden{
  opacity:0;
  visibility:hidden;
}
.intro-button{
  padding:14px 26px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  background: radial-gradient(
    100% 100% at 50% 0%,
    var(--red) 0%,
    color-mix(in srgb, var(--red) 45%, #000 55%) 55%,
    #000 100%
  );
  color:#fff;
  font-size:16px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow: var(--glow);
  text-shadow:0 0 14px rgba(0,0,0,.9);
  transition: transform .15s ease, box-shadow .15s ease;
}
.intro-button:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 26px color-mix(in srgb, var(--red) 80%, transparent),
    0 0 60px color-mix(in srgb, var(--red) 45%, transparent);
}
.intro-button:active{
  transform:translateY(0) scale(.97);
}

.bg-video{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter: blur(10px) brightness(.35) saturate(1.1);
  transform: scale(1.08);
  z-index:-2;
}
.backdrop{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(60% 60% at 50% 30%, color-mix(in srgb, var(--red) 20%, transparent) 0%, transparent 60%),
    radial-gradient(40% 40% at 50% 80%, color-mix(in srgb, var(--red) 14%, transparent) 0%, transparent 60%);
  z-index:-1;
}

.audio-panel{
  position:fixed;
  top:18px;
  left:22px;
  display:flex;
  align-items:center;
  gap:14px;
  z-index:10;
  padding:6px 14px;
  border-radius:999px;
  background: radial-gradient(
    140% 200% at 0% 0%,
    color-mix(in srgb, var(--red) 40%, transparent) 0%,
    rgba(0,0,0,.9) 60%
  );
  box-shadow: 0 16px 40px rgba(0,0,0,.7), var(--glow);
  backdrop-filter: blur(14px);
}
.btn-glow{
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background: radial-gradient(
    120% 140% at 30% 0%,
    color-mix(in srgb, var(--red) 90%, #fff 10%) 0%,
    color-mix(in srgb, var(--red) 75%, #000 25%) 45%,
    color-mix(in srgb, var(--red) 45%, #000 55%) 100%
  );
  color:#fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), var(--glow);
  display:grid;
  place-items:center;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-glow:hover{
  transform:translateY(-1px);
  box-shadow:
    0 0 26px color-mix(in srgb, var(--red) 80%, transparent),
    0 0 70px color-mix(in srgb, var(--red) 55%, transparent);
}
.btn-glow:active{ transform:translateY(0) scale(.98) }
.btn-glow .icon{ width:22px;height:22px; fill:currentColor }
.eq-icon .eq-bar{
  fill:#ffffff;
  opacity:.85;
  transform-origin:center bottom;
  animation:eqPulse 1.2s ease-in-out infinite;
  animation-play-state:paused;
}
#audioToggle[data-state="playing"] .eq-icon .eq-bar{
  animation-play-state:running;
}
.eq-icon .eq-bar:nth-child(1){ animation-delay:0s }
.eq-icon .eq-bar:nth-child(2){ animation-delay:.15s }
.eq-icon .eq-bar:nth-child(3){ animation-delay:.3s }
@keyframes eqPulse{
  0%,100%{ transform:scaleY(.6); }
  30%{ transform:scaleY(1.1); }
  60%{ transform:scaleY(.8); }
}

#volumeRange{
  appearance:none;
  width:150px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    color-mix(in srgb, var(--red) 90%, #fff 10%),
    color-mix(in srgb, var(--red) 55%, #000 45%)
  );
  outline:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), var(--glow);
  opacity:.0;
  transform: translateX(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.audio-panel:hover #volumeRange{ opacity:1 }
#volumeRange::-webkit-slider-thumb{
  appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--red);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 40%, transparent);
}
#volumeRange::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--red);
}

.theme-switcher{
  position:fixed;
  top:18px;
  right:18px;
  display:flex;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.7);
  box-shadow:0 10px 30px rgba(0,0,0,.7);
  backdrop-filter: blur(12px);
  z-index:10;
}
.theme-dot{
  width:16px;
  height:16px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  cursor:pointer;
  box-shadow:0 0 10px rgba(0,0,0,.8);
  padding:0;
  background:transparent;
}
.theme-dot[data-theme="red"]{ background: radial-gradient(circle at 30% 0%, #ff6767 0, #ff1a1a 45%, #4a0000 100%); }
.theme-dot[data-theme="purple"]{ background: radial-gradient(circle at 30% 0%, #f3a3ff 0, #c35bff 45%, #3c0055 100%); }
.theme-dot[data-theme="green"]{ background: radial-gradient(circle at 30% 0%, #a8ffb0 0, #4dff8c 45%, #004827 100%); }
.theme-dot[data-theme="white"]{ background: radial-gradient(circle at 30% 0%, #ffffff 0, #e4e4e4 45%, #666666 100%); }
.theme-dot[data-theme="blue"]{ background: radial-gradient(circle at 30% 0%, #a4e9ff 0, #4dd5ff 45%, #003c5c 100%); }
.theme-dot.active{
  box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 16px rgba(255,255,255,.9);
}

@media (hover:none) and (pointer:coarse){
  .audio-panel{
    top:10px;
    left:12px;
    padding:6px 10px;
    gap:6px;
  }
  .audio-panel .btn-glow{
    width:32px;
    height:32px;
    box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 14px color-mix(in srgb, var(--red) 65%, transparent);
  }
  .audio-panel .btn-glow .icon{
    width:18px;
    height:18px;
  }
  #volumeRange{
    width:90px;
    height:5px;
    opacity:1;
    transform: translateX(0);
  }
  .theme-switcher{
    top:10px;
    right:10px;
    padding:5px 8px;
    gap:6px;
  }
  .theme-dot{
    width:14px;
    height:14px;
  }
}

.hero{
  margin-top:80px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.hero-avatar{
  width:140px;height:140px;border-radius:50%;
  object-fit:cover;
  box-shadow: var(--glow);
}
.hero-title{
  position:relative;
  margin:0;
  line-height:1;
}
.title-text{
  font:800 72px "Unica One", "Poppins", sans-serif;
  letter-spacing:.02em;
  color:var(--red);
  text-shadow:
      0 0 8px color-mix(in srgb, var(--red) 65%, transparent),
      0 0 22px color-mix(in srgb, var(--red) 50%, transparent),
      0 0 48px color-mix(in srgb, var(--red) 28%, transparent);
}
.butterflies{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.butterfly{
  position:absolute;
  width:18px;height:18px;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--red) 80%, transparent));
  animation: flutter var(--t,6s) linear infinite, float 6s ease-in-out infinite;
  opacity:.85;
}
@keyframes flutter{
  0%,100%{ transform: translate(0,0) rotate(0) }
  25%{ transform: translate(10px,-8px) rotate(10deg) }
  50%{ transform: translate(0,-14px) rotate(-6deg) }
  75%{ transform: translate(-8px,-6px) rotate(8deg) }
}
@keyframes float{
  0%,100%{ filter: drop-shadow(0 0 8px color-mix(in srgb, var(--red) 80%, transparent)) }
  50%{ filter: drop-shadow(0 0 14px color-mix(in srgb, var(--red) 100%, transparent)) }
}

.center{ display:grid; place-items:center; padding:40px 16px }
.discord-card{
  width:min(640px, 94vw);
  background: var(--card);
  border-radius: var(--radius);
  padding:26px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55), var(--glow);
  backdrop-filter: blur(10px);
}
.card-top{ display:flex; align-items:center; gap:20px }
.card-avatar-wrap{
  position:relative;
  display:inline-block;
}
.card-avatar{
  width:86px;
  height:86px;
  border-radius:50%;
  object-fit:cover;
  box-shadow: var(--glow);
}
.status-badge{
  position:absolute;
  bottom:4px;
  right:4px;
  width:14px;
  height:14px;
  border-radius:50%;
  box-shadow:0 0 10px rgba(0,0,0,.8), var(--glow);
}
.card-info{ display:flex; flex-direction:column; }
.card-name{ font-weight:700; font-size:22px; color:#fff }
.name-badges{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:6px;
}
.name-badges img{
  width:20px;
  height:20px;
  border-radius:6px;
  box-shadow: var(--glow);
}
.dev-badge-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.dev-badge-wrap .tooltip{
  position:absolute;
  left:50%;
  bottom:26px;
  font-size:12px;
  background:#101010;
  color:#fff;
  padding:6px 8px;
  border-radius:8px;
  opacity:0;
  transform: translate(-50%,4px);
  transition: all .2s ease;
  box-shadow: 0 10px 20px rgba(0,0,0,.5);
  pointer-events:none;
}
.dev-badge-wrap:hover .tooltip{
  opacity:1;
  transform: translate(-50%,0);
}
.card-sub{
  font-weight:600;
  letter-spacing:.08em;
  color:var(--red);
  text-shadow: 0 0 12px color-mix(in srgb, var(--red) 80%, transparent);
}
.card-bottom{
  margin-top:16px;
  display:flex; align-items:center; justify-content:flex-start;
}
.views{
  position:relative;
  display:flex; align-items:center; gap:8px; color:var(--muted);
}
.views .eye{
  width:24px;
  height:24px;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--red) 90%, transparent));
}
.views .eye-outline{
  fill:none;
  stroke:var(--red);
  stroke-width:1.8;
}
.views .eye-iris{ fill:var(--red-soft); }
.views .eye-pupil{
  fill:#000;
}
.views .tooltip{
  position:absolute; left:28px; bottom:26px;
  font-size:12px; background:#101010; color:#fff; padding:6px 8px; border-radius:8px;
  opacity:0; transform: translateY(4px); transition: all .2s ease;
  box-shadow: 0 10px 20px rgba(0,0,0,.5);
}
.views .eye:hover ~ .tooltip{ opacity:1; transform: translateY(0) }
.view-count{
  font-size:18px; font-weight:700; color:#fff;
  text-shadow: 0 0 10px color-mix(in srgb, var(--red) 65%, transparent);
}

.footer{
  position:fixed;
  inset-inline:0;
  bottom:28px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:26px;
}
.social-link{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  text-decoration:none;
}
.social-icon{
  width:42px;
  height:42px;
  fill:var(--red);
  filter:
    drop-shadow(0 0 12px color-mix(in srgb, var(--red) 80%, transparent))
    drop-shadow(0 0 28px color-mix(in srgb, var(--red) 35%, transparent));
  transition: transform .12s ease, filter .12s ease;
}
.footer a:hover .social-icon{
  transform: translateY(-2px) scale(1.04);
  filter:
    drop-shadow(0 0 18px color-mix(in srgb, var(--red) 100%, transparent))
    drop-shadow(0 0 34px color-mix(in srgb, var(--red) 55%, transparent));
}

@media (max-width:420px){
  .title-text{ font-size:54px }
  .hero-avatar{ width:110px;height:110px }
}