* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: radial-gradient(circle at top, #0b0014, #020006);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: white;
  font-family: 'Orbitron', sans-serif;
}

/* ===== Futuristic Background ===== */
.background {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

/* Subtle moving grid */
.grid {
  position: absolute;
  width: 200%;
  height: 200%;
  background-image:
    linear-gradient(rgba(140,0,255,0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,0,255,0.15) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: gridMove 20s linear infinite;
  opacity: 0.2;
}

@keyframes gridMove {
  from { transform: translateY(0); }
  to   { transform: translateY(-80px); }
}

/* Glow energy orbs */
.background span {
  position: absolute;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(120,0,255,0.35), transparent 70%);
  filter: blur(140px);
  animation: drift 20s infinite alternate ease-in-out;
}

.background span:nth-child(2) {
  top: -300px;
  left: -300px;
}

.background span:nth-child(3) {
  bottom: -300px;
  right: -200px;
  animation-duration: 26s;
}

.background span:nth-child(4) {
  top: 40%;
  left: 65%;
  animation-duration: 22s;
}

@keyframes drift {
  from { transform: translate(-120px, -100px); }
  to   { transform: translate(120px, 100px); }
}

/* ===== Back Button ===== */
.back-btn {
  position: absolute;
  top: 25px;
  left: 25px;
  padding: 10px 18px;
  font-size: 14px;
  letter-spacing: 2px;
  background: transparent;
  color: #cfa3ff;
  border: 2px solid #7a00ff;
  border-radius: 6px;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 0 10px #7a00ff;
  transition: 0.3s ease;
}

.back-btn:hover {
  background: #7a00ff;
  color: white;
  box-shadow: 0 0 20px #b300ff;
}

/* ===== Countdown ===== */
.container {
  text-align: center;
  z-index: 2;
}

.countdown {
  font-size: 90px;
  font-weight: 700;
  letter-spacing: 6px;
  color: #ead9ff;
  text-shadow:
    0 0 10px #8a00ff,
    0 0 25px #6a00ff,
    0 0 50px #3a007a;
  margin-bottom: 40px;
}

.countdown span {
  font-size: 28px;
  letter-spacing: 3px;
  margin-left: 8px;
  opacity: 0.8;
}

/* ===== Remind Button ===== */
.remind-btn {
  padding: 14px 42px;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #d8b3ff;
  background: transparent;
  border: 2px solid #8a00ff;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 
    0 0 12px #8a00ff,
    inset 0 0 10px #4a007d;
  transition: 0.3s ease;
}

.remind-btn:hover {
  background: #8a00ff;
  color: white;
  box-shadow:
    0 0 25px #b300ff,
    0 0 45px #6a00ff;
  transform: scale(1.05);
}