/* User Message Styles for ValidationUtils */
.user-message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px 25px;
  border-radius: 8px;
  font-weight: bold;
  z-index: 10000;
  max-width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideInDown 0.3s ease-out;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
}

.user-message--info {
  background-color: #3498db;
  color: white;
}

.user-message--success {
  background-color: #2ecc71;
  color: white;
}

.user-message--warning {
  background-color: #f39c12;
  color: white;
}

.user-message--error {
  background-color: #e74c3c;
  color: white;
}

@keyframes slideInDown {
  from {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* Focus and accessibility improvements */
.btn:focus,
.play-btn:focus,
.avatar-btn:focus,
.grade-btn:focus {
  outline: 3px solid #4ecdc4;
  outline-offset: 2px;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link for keyboard navigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 10001;
  border-radius: 4px;
}

.skip-link:focus {
  top: 6px;
}

/* Improved color contrast */
.text-low-contrast {
  color: #555;
}

/* Loading state styles */
.loading {
  position: relative;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .user-message {
    border: 2px solid;
  }
  
  .user-message--info {
    border-color: #fff;
  }
  
  .user-message--success {
    border-color: #fff;
  }
  
  .user-message--warning {
    border-color: #000;
  }
  
  .user-message--error {
    border-color: #fff;
  }
}

/* Child-Friendly Touch Targets */
/* Ensure all interactive elements meet minimum 48px touch target for children */
button, 
.btn, 
.play-btn, 
.back-btn, 
.quit-btn,
.big-btn,
.magic-btn,
.lab-btn,
.nav-btn,
.setting-btn,
.avatar-btn,
.grade-btn,
.topic-btn,
.answer-btn,
.cta-button,
.universe-btn,
.magical-btn {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 20px;
  font-size: 1.1em;
  touch-action: manipulation; /* Prevents zoom on double-tap */
}

/* Extra large touch targets for primary actions */
.big-btn,
.play-btn.primary,
.cta-button,
.magic-btn.primary,
.lab-btn.primary {
  min-height: 56px;
  padding: 16px 24px;
  font-size: 1.2em;
}

/* Mobile-specific touch target improvements */
@media (max-width: 768px) {
  button, 
  .btn, 
  .play-btn, 
  .back-btn, 
  .quit-btn,
  .big-btn,
  .magic-btn,
  .lab-btn,
  .nav-btn,
  .setting-btn,
  .avatar-btn,
  .grade-btn,
  .topic-btn,
  .answer-btn,
  .cta-button,
  .universe-btn,
  .magical-btn {
    min-height: 52px;
    min-width: 52px;
    padding: 14px 22px;
    font-size: 1.15em;
  }

  /* Extra large touch targets for mobile primary actions */
  .big-btn,
  .play-btn.primary,
  .cta-button,
  .magic-btn.primary,
  .lab-btn.primary {
    min-height: 60px;
    padding: 18px 28px;
    font-size: 1.25em;
  }

  /* Increase spacing between buttons on mobile */
  .game-actions,
  .menu-buttons,
  .welcome-nav,
  .nav-buttons {
    gap: 16px;
  }
}

/* Breadcrumb Navigation for Children */
.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  font-size: 0.9em;
  border: 2px solid rgba(78, 205, 196, 0.3);
}

.breadcrumb-item {
  color: #666;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s;
}

.breadcrumb-item:hover {
  background: rgba(78, 205, 196, 0.1);
  color: #4ecdc4;
}

.breadcrumb-item.current {
  color: #4ecdc4;
  font-weight: bold;
}

.breadcrumb-separator {
  color: #999;
  margin: 0 4px;
}

/* Mobile breadcrumb adjustments */
@media (max-width: 768px) {
  .breadcrumb-nav {
    font-size: 0.8em;
    padding: 8px 12px;
    gap: 6px;
  }
  
  .breadcrumb-item {
    padding: 3px 6px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .user-message {
    animation: none;
  }
  
  .loading::after {
    animation: none;
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}