@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;600;700&display=swap');

:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; overflow: hidden;
  color: #f5f7ff; font-family: 'Rajdhani', sans-serif;
  background: radial-gradient(ellipse at 50% 45%, #20245c 0%, #10132f 42%, #060813 100%);
}
.stars, .stars::before, .stars::after {
  position: fixed; inset: 0; content: ""; pointer-events: none;
  background-image: radial-gradient(2px 2px at 20% 30%, #fff 98%, transparent),
    radial-gradient(1px 1px at 70% 20%, #8ffcff 98%, transparent),
    radial-gradient(2px 2px at 80% 75%, #fff 98%, transparent),
    radial-gradient(1px 1px at 35% 80%, #f5a7ff 98%, transparent);
  background-size: 260px 240px; animation: drift 18s linear infinite;
}
.stars::before { opacity: .45; transform: scale(1.4); animation-duration: 28s; }
.stars::after { opacity: .3; transform: scale(1.8); animation-duration: 38s; }
.card {
  position: relative; width: min(90vw, 620px); padding: 48px 28px 30px; text-align: center;
  border: 1px solid #6cfaff88; border-radius: 28px;
  background: linear-gradient(145deg, #171b3beF, #0b0e20f2);
  box-shadow: 0 0 30px #23eaff33, 0 0 90px #a52cff22, inset 0 0 35px #6cfaff0b;
  animation: float 4s ease-in-out infinite;
}
.badge { color: #75faff; font: 700 11px 'Orbitron', sans-serif; letter-spacing: 2px; }
.orb {
  width: 112px; height: 112px; margin: 28px auto 24px; display: grid; place-items: center;
  border-radius: 50%; font: 900 56px 'Orbitron', sans-serif; color: white;
  background: radial-gradient(circle at 35% 25%, #ff9bff, #7b39ff 48%, #151c66 78%);
  border: 2px solid #b5fbff; box-shadow: 0 0 18px #ff5cf7, 0 0 45px #713cff;
  animation: pulse 2s ease-in-out infinite;
}
.eyebrow { color: #aab3db; letter-spacing: 5px; font-size: 13px; margin-bottom: 0; }
h1 { font: 900 clamp(48px, 12vw, 82px) 'Orbitron', sans-serif; margin: 8px 0; letter-spacing: 7px; text-shadow: 0 0 18px #5ef8ff; }
h2 { font: 700 clamp(20px, 5vw, 30px) 'Orbitron', sans-serif; margin: 10px 0; }
h2 span { color: #ff83f5; text-shadow: 0 0 16px #ff36e7; }
.message { color: #c6cbed; font-size: 20px; margin: 18px 0 26px; }
button {
  border: 0; border-radius: 999px; padding: 15px 24px; cursor: pointer;
  color: #080b1c; background: linear-gradient(90deg, #69faff, #e18cff);
  font: 900 13px 'Orbitron', sans-serif; letter-spacing: 1px;
  box-shadow: 0 0 22px #6cfaff66; transition: transform .2s, box-shadow .2s;
}
button:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 35px #e18cffaa; }
.score { color: #75faff; font: 700 12px 'Orbitron', sans-serif; letter-spacing: 2px; margin-top: 24px; }
.footer { color: #69739f; font-size: 10px; letter-spacing: 2px; margin-top: 28px; }
@keyframes pulse { 50% { transform: scale(1.08); filter: hue-rotate(35deg); } }
@keyframes float { 50% { translate: 0 -9px; } }
@keyframes drift { to { background-position: 260px 240px; } }
.boost .card { animation: boost .55s ease; }
@keyframes boost { 50% { transform: scale(1.035); filter: brightness(1.5); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }