body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #ffd6f6, #e3ccff, #d1f7ff);
  background-size: 400% 400%;
  animation: gradientBG 12s ease infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

@keyframes gradientBG {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

.card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px) saturate(150%);
  border-radius: 32px;
  padding: 1.5rem;
  text-align: center;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  position: relative;
  z-index: 1;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.logo {
  width: 140px;
  height: 140px;
  object-fit: contain;
}

.pfp {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid rgba(255,255,255,0.8);
  box-shadow: 0 4px 20px rgba(255, 170, 255, 0.6), 0 0 15px rgba(200, 120, 255, 0.4);
  animation: glow 4s ease-in-out infinite alternate;
}

@keyframes glow {
  from { box-shadow: 0 4px 20px rgba(255, 170, 255, 0.4), 0 0 10px rgba(200, 120, 255, 0.3); }
  to { box-shadow: 0 4px 24px rgba(255, 200, 255, 0.8), 0 0 18px rgba(200, 120, 255, 0.6); }
}

p.subtitle {
  margin: 1rem 0 1.5rem;
  font-size: 1rem;
  color: #5c4b6d;
  font-weight: 600;
}

.links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 1rem;
  border-radius: 999px; /* pill shape */
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #ffb3f6, #c89cff);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 25px rgba(255, 200, 255, 0.9),
              0 0 35px rgba(200, 120, 255, 0.6);
}

/* Sparkle container */
.sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sparkles span {
  position: absolute;
  opacity: 0;
  animation: twinkle 2s infinite ease-in-out;
}

.sparkles .tiny {
  font-size: 0.4rem;
  opacity: 0.8;
}

/* Twitch layout */
.twitch .sparkles span:nth-child(1) { top: 12%; left: 5%;  color: #fff; animation-delay: 0s; }
.twitch .sparkles span:nth-child(2) { top: 32%; left: 10%; color: #ffb3ec; animation-delay: 0.5s; }
.twitch .sparkles span:nth-child(3) { bottom: 18%; left: 8%; color: #c89cff; animation-delay: 1s; }
.twitch .sparkles span:nth-child(4) { top: 18%; right: 8%; color: #d1f7ff; animation-delay: 0.2s; }
.twitch .sparkles span:nth-child(5) { top: 38%; right: 12%; color: #ffd6f6; animation-delay: 0.7s; }
.twitch .sparkles span:nth-child(6) { bottom: 22%; right: 8%; color: #fff; animation-delay: 1.1s; }
.twitch .sparkles .tiny:nth-of-type(7) { top: 8%; left: 20%; color: #ffb3ec; animation-delay: 1.3s; }
.twitch .sparkles .tiny:nth-of-type(8) { bottom: 30%; right: 20%; color: #c89cff; animation-delay: 1.6s; }

/* YouTube layout */
.youtube .sparkles span:nth-child(1) { top: 10%; left: 15%; color: #fff; animation-delay: 0s; }
.youtube .sparkles span:nth-child(2) { bottom: 28%; left: 10%; color: #ffb3ec; animation-delay: 0.4s; }
.youtube .sparkles span:nth-child(3) { top: 22%; left: 25%; color: #c89cff; animation-delay: 0.8s; }
.youtube .sparkles span:nth-child(4) { top: 12%; right: 18%; color: #d1f7ff; animation-delay: 0.3s; }
.youtube .sparkles span:nth-child(5) { bottom: 20%; right: 15%; color: #ffd6f6; animation-delay: 0.9s; }
.youtube .sparkles span:nth-child(6) { top: 35%; right: 10%; color: #fff; animation-delay: 1.2s; }
.youtube .sparkles .tiny:nth-of-type(7) { top: 8%; left: 35%; color: #c89cff; animation-delay: 1.5s; }
.youtube .sparkles .tiny:nth-of-type(8) { bottom: 32%; right: 25%; color: #ffb3ec; animation-delay: 1.8s; }

/* TikTok layout */
.tiktok .sparkles span:nth-child(1) { top: 15%; left: 12%; color: #fff; animation-delay: 0s; }
.tiktok .sparkles span:nth-child(2) { bottom: 25%; left: 15%; color: #ffb3ec; animation-delay: 0.6s; }
.tiktok .sparkles span:nth-child(3) { top: 30%; left: 18%; color: #c89cff; animation-delay: 1s; }
.tiktok .sparkles span:nth-child(4) { top: 12%; right: 22%; color: #d1f7ff; animation-delay: 0.2s; }
.tiktok .sparkles span:nth-child(5) { bottom: 20%; right: 10%; color: #ffd6f6; animation-delay: 0.8s; }
.tiktok .sparkles span:nth-child(6) { top: 38%; right: 15%; color: #fff; animation-delay: 1.4s; }
.tiktok .sparkles .tiny:nth-of-type(7) { top: 6%; left: 28%; color: #d1f7ff; animation-delay: 1.6s; }
.tiktok .sparkles .tiny:nth-of-type(8) { bottom: 28%; right: 28%; color: #ffb3ec; animation-delay: 1.9s; }

/* Merch layout */
.merch .sparkles span:nth-child(1) { top: 14%; left: 10%; color: #fff; animation-delay: 0s; }
.merch .sparkles span:nth-child(2) { top: 32%; left: 12%; color: #ffb3ec; animation-delay: 0.5s; }
.merch .sparkles span:nth-child(3) { bottom: 24%; left: 8%; color: #c89cff; animation-delay: 1s; }
.merch .sparkles span:nth-child(4) { top: 20%; right: 20%; color: #d1f7ff; animation-delay: 0.3s; }
.merch .sparkles span:nth-child(5) { bottom: 30%; right: 10%; color: #ffd6f6; animation-delay: 0.9s; }
.merch .sparkles span:nth-child(6) { top: 40%; right: 15%; color: #fff; animation-delay: 1.3s; }
.merch .sparkles .tiny:nth-of-type(7) { top: 8%; left: 28%; color: #ffd6f6; animation-delay: 1.5s; }
.merch .sparkles .tiny:nth-of-type(8) { bottom: 35%; right: 22%; color: #c89cff; animation-delay: 1.8s; }

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.3) rotate(25deg); }
}

.twitch { background: linear-gradient(135deg, #9146ff, #b38bff); }
.youtube { background: linear-gradient(135deg, #ff4d4d, #ff8080); }
.tiktok { background: linear-gradient(135deg, #69c9d0, #ee1d52, #9b45ff); }
.merch { background: linear-gradient(135deg, #ffb3ec, #ff80d4); }