/* ==========================================================================
   CHILD PATHSHALA - HYPER SPEED SPRINT TIME ATTACK ENGINE
   Theme: Electric Cyberpunk Sprint, Adrenaline Overdrive, Frenzy Combo Meters
   ========================================================================== */

:root {
  --sp-bg: #080613;
  --sp-panel: #110d24;
  --sp-border: #261947;
  --sp-bolt: #facc15;
  --sp-frenzy: #ff0055;
  --sp-cyan: #00f0ff;
  --sp-green: #10b981;
}

.sp-wrapper {
  background: radial-gradient(circle at 50% 15%, #290e44 0%, #080613 75%);
  border-radius: 26px;
  border: 1px solid rgba(250, 204, 21, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  padding: 1.5rem;
  max-width: 820px;
  margin: 0 auto;
  font-family: system-ui, -apple-system, sans-serif;
  position: relative;
  overflow: hidden;
}

/* Sprint Dashboard */
.sp-hud-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sp-hud-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(17, 13, 36, 0.85);
  border: 1px solid var(--sp-border);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 800;
}

.sp-frenzy-banner {
  background: linear-gradient(90deg, #ff0055, #f59e0b);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 900;
  padding: 4px 14px;
  border-radius: 999px;
  animation: spPulse 0.4s ease infinite alternate;
  box-shadow: 0 0 15px rgba(255, 0, 85, 0.6);
}

@keyframes spPulse {
  0% { transform: scale(0.95); }
  100% { transform: scale(1.05); }
}

/* Time Attack Countdown Progress Bar */
.sp-time-track {
  width: 100%;
  height: 10px;
  background: rgba(0,0,0,0.5);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255,255,255,0.1);
}

.sp-time-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #10b981, #facc15, #ef4444);
  border-radius: 999px;
  transition: width 1s linear;
}

/* Rapid Fire Question Stage */
.sp-stage-box {
  background: rgba(17, 13, 36, 0.95);
  border: 1px solid var(--sp-border);
  border-radius: 20px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.sp-question-text {
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 900;
  margin: 0;
  color: #fff;
  letter-spacing: -0.01em;
}

/* Sprint Choices Grid */
.sp-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}

@media (max-width: 580px) {
  .sp-options-grid {
    grid-template-columns: 1fr;
  }
}

.sp-option-btn {
  background: linear-gradient(180deg, #1a1438 0%, #100b24 100%);
  border: 2px solid #2d1d4f;
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.1s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.sp-option-btn:hover:not(:disabled) {
  border-color: var(--sp-bolt);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(250, 204, 21, 0.3);
}

.sp-option-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.sp-option-btn.correct {
  background: linear-gradient(180deg, #059669 0%, #064e3b 100%);
  border-color: #34d399;
  box-shadow: 0 0 25px rgba(52, 211, 153, 0.6);
  transform: scale(1.02);
}

.sp-option-btn.wrong {
  background: linear-gradient(180deg, #dc2626 0%, #7f1d1d 100%);
  border-color: #f87171;
  box-shadow: 0 0 25px rgba(248, 113, 113, 0.4);
}

/* Victory Screen */
.sp-podium-wrap {
  text-align: center;
  padding: 2rem 1rem;
}