/* Unified ENLTND Quiz Styles */

/* Landing Screen */
.landing-container {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: 100vh; text-align: center; padding: 2rem; box-sizing: border-box;
}
.glow-text { font-size: 2.5rem; color: #00ccff; text-shadow: 0 0 8px #00ccff;
  animation: glitchText 1s infinite; margin-bottom: 2rem;
}
.start-btn {
  padding: 1rem 2rem; font-size: 1.25rem; background: #111; border: 2px solid #00ccff;
  border-radius: 8px; color: #00ccff; cursor: pointer; transition: background 0.3s, color 0.3s, transform 0.2s;
}
.start-btn:hover { background: #00ccff; color: #000; transform: scale(1.05); }

/* Base */
body, html {
  margin: 0; padding: 0; font-family: 'Lemon Milk', sans-serif; background: #000;
  color: #C0C0C0; overflow-x: hidden;
}
.glitch-bg {
  background: radial-gradient(ellipse at center, #001d33 0%, #000 100%);
  min-height: 100vh;
}
.quiz-container {
  width: 90%; max-width: 600px; margin: 5vh auto; padding: 1.5rem;
  background: rgba(0,0,0,0.85); border: 2px solid #00ccff; border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.7);
}
.question-card {
  margin-bottom: 2rem; padding: 1rem; border: 1px solid #00ccff; border-radius: 8px;
}
.question-text {
  font-size: 1.5rem; margin-bottom: 1rem; color: #fff;
}
.answer-grid {
  display: flex; flex-direction: column; gap: 0.75rem;
}

/* Buttons */
.option-btn, .start-btn {
  display: block; width: 100%; padding: 1rem; font-size: 1rem; background: #111;
  border: 2px solid #00ccff; color: #00ccff; border-radius: 8px; cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.2s; box-sizing: border-box;
}
.option-btn:hover, .start-btn:hover {
  background: #00ccff; color: #000; transform: scale(1.03);
}

/* Progress */
.progress-bar {
  width: 100%; height: 8px; background: #333; border-radius: 4px;
  overflow: hidden; margin-bottom: 1rem;
}
.progress-bar .progress {
  height: 100%; background: #00ccff; width: 0; transition: width 0.4s ease-in-out;
  box-shadow: 0 0 8px #00ccff;
}

/* Transition */
.transition-screen {
  display: flex; justify-content: center; align-items: center; height: 300px;
}
.glitch-text {
  font-size: 2rem; color: #00ccff; animation: glitchText 1s infinite;
}

/* Animations */
@keyframes glitchText {
  0% { text-shadow:1px 0 red; } 20% { text-shadow:-1px 0 blue; }
  40% { text-shadow:1px 0 green; } 60% { text-shadow:-2px 0 magenta; }
  80% { text-shadow:2px 0 cyan; } 100% { text-shadow:0 0 white; }
}
.fade-in {
  animation: fadeIn 0.8s ease-in-out;
}
@keyframes fadeIn {
  0% { opacity:0; transform:translateY(10px); }
  100% { opacity:1; transform:translateY(0); }
}

/* Mobile */
@media(max-width:600px) {
  .question-text { font-size:1.25rem; }
  .option-btn { font-size:0.95rem; padding:0.85rem; }
}


/* Landing Page Enhancements */
.subtitle {
  font-size: 1.25rem;
  color: #ccc;
  margin-top: 0.5rem;
}
.time-hint {
  font-size: 1rem;
  color: #00ccff;
  margin: 0.5rem 0 1rem;
}
.phase-roadmap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #aaa;
}
.phase {
  opacity: 0.5;
}
.phase.active {
  opacity: 1;
  font-weight: bold;
  color: #00ccff;
}
.trust-marquee {
  font-size: 0.9rem;
  color: #888;
  margin-top: 1rem;
  animation: marquee 10s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Animated Background Pulse */
@keyframes bgPulse {
  0% { background-color: #001d33; }
  50% { background-color: #001a2e; }
  100% { background-color: #001d33; }
}
.glitch-bg {
  animation: bgPulse 5s infinite alternate;
}