/* Rainbow color palette for children */
:root {
  --rainbow-1: #FF6B6B; /* Red */
  --rainbow-2: #FF9E4F; /* Orange */
  --rainbow-3: #FFD166; /* Yellow */
  --rainbow-4: #06D6A0; /* Green */
  --rainbow-5: #118AB2; /* Blue */
  --rainbow-6: #7B2CBF; /* Purple */
  --light-bg: #F8F9FA;
  --light-card: #FFFFFF;
  --dark-bg: #121212;
  --dark-card: #1E1E1E;
  --text-light: #2B2D42;
  --text-dark: #F8F9FA;
}

/* Base styles with fun font */
/*body {
  font-family: 'Comic Neue', cursive, sans-serif;
}*/

/* Base styles with Impact font */
/*body {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}*/

/* For elements that might inherit differently, you can add: */
/*h1, h2, h3, h4, h5, h6,
button, .option-btn,
#timer, #title, #questionText {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}*/

#questionText {
    color: white !important;
}

/* Timer with rainbow border */
.pulse {
  animation: pulse 1.5s infinite alternate, rainbowBorder 8s infinite linear;
  border: 4px solid;
  border-radius: 50%;
  padding: 1rem;
}

@keyframes pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

@keyframes rainbowBorder {
  0% { border-color: var(--rainbow-1); }
  16% { border-color: var(--rainbow-2); }
  33% { border-color: var(--rainbow-3); }
  50% { border-color: var(--rainbow-4); }
  66% { border-color: var(--rainbow-5); }
  83% { border-color: var(--rainbow-6); }
  100% { border-color: var(--rainbow-1); }
}

/* Option buttons - bubble design */
.option-btn {
  padding: 0.5rem;
  border-radius: 2rem;
  font-weight: 700;
  font-size: 1.2rem;
  background-color: var(--light-card);
  color: var(--text-light);
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /*min-height: 110px;*/
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.1),
    0 0 0 3px transparent;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.option-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255,255,255,0.8) 0%, 
    rgba(255,255,255,0) 60%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.option-btn:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 
    0 8px 16px rgba(0,0,0,0.15),
    0 0 0 3px var(--rainbow-4);
}

.option-btn:hover::before {
  opacity: 1;
}

/* Correct/Wrong states with animations */
.option-btn.correct {
  animation: correctBounce 0.6s ease, correctGlow 2s infinite alternate;
  background-color: var(--rainbow-4);
  color: white;
}

@keyframes correctBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-15px); }
  60% { transform: translateY(0); }
}

@keyframes correctGlow {
  0% { box-shadow: 0 0 15px var(--rainbow-4); }
  100% { box-shadow: 0 0 30px var(--rainbow-4); }
}

.option-btn.wrong {
  animation: wrongShake 0.5s ease, wrongGlow 2s infinite alternate;
  background-color: var(--rainbow-1);
  color: white;
}

@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

@keyframes wrongGlow {
  0% { box-shadow: 0 0 15px var(--rainbow-1); }
  100% { box-shadow: 0 0 30px var(--rainbow-1); }
}

/* Dark theme overrides */
.dark .option-btn {
  background-color: var(--dark-card);
  color: var(--text-dark);
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.3),
    0 0 0 3px transparent;
}

.dark .option-btn::before {
  background: linear-gradient(135deg, 
    rgba(255,255,255,0.2) 0%, 
    rgba(255,255,255,0) 60%);
}

.dark .option-btn:hover {
  box-shadow: 
    0 8px 16px rgba(0,0,0,0.4),
    0 0 0 3px var(--rainbow-5);
}

/* Countdown with floating effect */
.countdown-number {
  animation: 
    float 3s ease-in-out infinite,
    rainbowText 5s linear infinite;
  font-size: 2.5rem;
  font-weight: 800;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes rainbowText {
  0% { color: var(--rainbow-1); }
  16% { color: var(--rainbow-2); }
  33% { color: var(--rainbow-3); }
  50% { color: var(--rainbow-4); }
  66% { color: var(--rainbow-5); }
  83% { color: var(--rainbow-6); }
  100% { color: var(--rainbow-1); }
}

/* Category selection with pop effect */
.selected-category {
  animation: popIn 0.3s ease, categoryPulse 2s infinite alternate;
  transform: scale(1.05);
}

@keyframes popIn {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1.05); }
}

@keyframes categoryPulse {
  0% { 
    box-shadow: 0 0 10px var(--rainbow-5);
    border-color: var(--rainbow-5);
  }
  100% { 
    box-shadow: 0 0 25px var(--rainbow-6);
    border-color: var(--rainbow-6);
  }
}

/* Backgrounds with proper dark theme contrast */
.light-theme {
  background-color: var(--light-bg);
  color: var(--text-light);
}

.dark-theme {
  background-color: var(--dark-bg);
  color: var(--text-dark);
}

/* Card styling with depth */
.card {
  background-color: var(--light-card);
  border-radius: 1.5rem;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.dark .card {
  background-color: var(--dark-card);
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

/* Fun progress indicators */
.progress-bar {
  height: 1rem;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, 
    var(--rainbow-1), 
    var(--rainbow-2), 
    var(--rainbow-3), 
    var(--rainbow-4), 
    var(--rainbow-5), 
    var(--rainbow-6));
  background-size: 600% 100%;
  animation: rainbowSlide 4s linear infinite;
}

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

/* Install modal with playful design */
#installModal {
  border-radius: 1.5rem;
  border: 4px dashed var(--rainbow-4);
  background-color: var(--light-card);
  animation: borderColorChange 8s infinite linear;
}

.dark #installModal {
  background-color: var(--dark-card);
  border-color: var(--rainbow-5);
}

@keyframes borderColorChange {
  0% { border-color: var(--rainbow-1); }
  16% { border-color: var(--rainbow-2); }
  33% { border-color: var(--rainbow-3); }
  50% { border-color: var(--rainbow-4); }
  66% { border-color: var(--rainbow-5); }
  83% { border-color: var(--rainbow-6); }
  100% { border-color: var(--rainbow-1); }
}

/* Orientation classes */
.rotated {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
}

.rotate-90 {
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
}

.rotate-180 {
    transform: rotate(180deg);
    transform-origin: center;
}

.rotate-270 {
    transform: rotate(270deg) translateX(-100%);
    transform-origin: top left;
}

main {
    background-image: url('https://i.postimg.cc/VvbBrGBH/mcq-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Adjust the main container to handle rotations */
body.rotated main {
    width: 100vh;
    height: 100vw;
}

/* Fix header positioning during rotation */
body.rotated header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vh;
    z-index: 1000;
}

/* Adjust modal positioning during rotation */
body.rotated #categoryModal,
body.rotated #countdownModal,
body.rotated #resultModal,
body.rotated #installModal {
    transform: none;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px 2px rgba(239, 68, 68, 0.7);
  }
  50% {
    box-shadow: 0 0 15px 5px rgba(239, 68, 68, 0.9);
  }
}

@keyframes pulse-grow {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

.timer-dot-animate {
  animation: 
    glow 2s ease-in-out infinite,
    pulse-grow 1.5s ease-in-out infinite;
}

#timerDot {
    transition: left 0.1s linear, top 0.1s linear;
}

#startBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#installUninstallBtn {
    transition: background-color 0.3s ease;
}
#installUninstallBtn:hover {
    opacity: 0.9;
}