/**
 * WCAG 2.2 Accessibility Styles
 *
 * This stylesheet provides:
 * - Focus-visible indicators (WCAG 2.4.7, 2.4.11, 2.4.12)
 * - Reduced motion support (WCAG 2.3.3)
 * - High contrast mode support
 * - Skip links for keyboard navigation (WCAG 2.4.1)
 * - Minimum target size (WCAG 2.5.8)
 * - Focus not obscured (WCAG 2.4.11)
 */

/* ==========================================================================
   Skip Link for Keyboard Navigation (WCAG 2.4.1)
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  z-index: 10000;
  transition: top 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #4a9eff;
  outline-offset: 2px;
}

/* ==========================================================================
   Focus-Visible Indicators (WCAG 2.4.7, 2.4.11, 2.4.12)
   All interactive elements must have visible focus indicators
   ========================================================================== */

/* Global focus-visible reset */
*:focus {
  outline: none;
}

/* High-visibility focus indicator for all interactive elements */
*:focus-visible {
  outline: 3px solid #4a9eff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(74, 158, 255, 0.25);
}

/* Buttons - enhanced focus state */
button:focus-visible,
.control-btn:focus-visible,
.special-move:focus-visible,
.tile:focus-visible,
.overlay-button:focus-visible,
.roll-dice-btn:focus-visible,
.special-action-btn:focus-visible,
.timer-btn:focus-visible,
.duration-btn:focus-visible,
.soft-reset-btn:focus-visible,
.soft-reset-button:focus-visible,
.player-action-btn:focus-visible,
.add-player-button:focus-visible,
#record-btn:focus-visible,
#questai-send-btn:focus-visible,
#music-play:focus-visible,
#music-scene-btn:focus-visible,
.stop-sharing-btn:focus-visible {
  outline: 3px solid #4a9eff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(74, 158, 255, 0.3);
  position: relative;
  z-index: 1;
}

/* Dark button variants - use light focus ring */
.control-btn.leave-btn:focus-visible,
.control-btn.active:focus-visible,
.btn-roll.reset-mode:focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.3);
}

/* Links - focus state */
a:focus-visible {
  outline: 3px solid #4a9eff;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Form inputs - focus state */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.overlay-input:focus-visible,
#countdownDenominatorInput:focus-visible {
  outline: 3px solid #4a9eff;
  outline-offset: 1px;
  border-color: #4a9eff;
  box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.2);
}

/* Participant tiles - focus state */
.participant:focus-visible {
  outline: 3px solid #4a9eff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(74, 158, 255, 0.3);
}

/* Modal focus trap indicator */
.modal-content:focus-visible {
  outline: 3px solid #4a9eff;
  outline-offset: 4px;
}

/* ==========================================================================
   Reduced Motion (WCAG 2.3.3)
   Respect user's motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations and transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Specifically disable pulsing/rotating animations */
  .timer-with-ring.timer-warning,
  .timer-with-ring.timer-danger,
  .timer-with-ring.timer-critical,
  .timer-with-ring.timer-warning .timer-ring,
  .timer-with-ring.timer-danger .timer-ring,
  .timer-with-ring.timer-critical .timer-ring,
  .timer-compact.timer-critical .timer-compact-value,
  .dice-slot.rolling,
  .roll-dice-btn.rolling,
  .roll-dice-btn.ai-suggested,
  #avatar-container.tts-pulse,
  #avatar-container.tts-pulse-dynamic,
  .questai-column #questai-send-btn.thinking,
  .questai-column #questai-send-btn.thinking::before,
  .participant.loading::before,
  .die-face.animating {
    animation: none !important;
  }

  /* Replace animations with static states for critical indicators */
  .timer-with-ring.timer-warning,
  .timer-with-ring.timer-danger,
  .timer-with-ring.timer-critical {
    border: 3px solid currentColor;
  }

  .timer-with-ring.timer-warning {
    border-color: #ffc107;
  }

  .timer-with-ring.timer-danger,
  .timer-with-ring.timer-critical {
    border-color: #dc3545;
  }

  /* Static loading indicator */
  .participant.loading::before {
    border: 3px solid #007bff;
    animation: none;
  }

  /* Disable backdrop transitions */
  .backdrop-image {
    transition: none !important;
  }

  /* Disable hover transform effects */
  .control-btn:hover,
  .tile:hover,
  .special-move:hover,
  .participant:hover,
  .player-item:hover,
  .dice-slot:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   Color Contrast Improvements (WCAG 1.4.3, 1.4.6)
   Ensure minimum 4.5:1 contrast for normal text, 3:1 for large text
   ========================================================================== */

/* Improved disabled state contrast - minimum 3:1 */
button:disabled,
.control-btn:disabled,
.roll-dice-btn:disabled,
.special-action-btn:disabled,
.timer-btn:disabled,
.player-action-btn:disabled,
.special-action-buttons-container button:disabled {
  opacity: 0.65;
  background-color: #6c757d;
  color: #ffffff;
  border-color: #5a6268;
}

/* Ensure placeholder text has sufficient contrast */
.overlay-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: #6c757d;
  opacity: 1;
}

/* Improve low-contrast text in muted states */
.muted,
.overlay-label {
  color: #4a5568;
}

/* Error text with sufficient contrast */
.overlay-error {
  color: #f56565;
  font-weight: 600;
}

/* ==========================================================================
   Minimum Target Size (WCAG 2.5.8)
   Interactive elements should be at least 24x24px, ideally 44x44px
   ========================================================================== */

/* Ensure minimum touch target size */
button,
[role="button"],
a,
input[type="checkbox"],
input[type="radio"],
.control-btn,
.player-action-btn,
.timer-btn,
.duration-btn {
  min-width: 24px;
  min-height: 24px;
}

/* Recommended touch target size for mobile */
@media (pointer: coarse) {
  button,
  [role="button"],
  .control-btn,
  .player-action-btn,
  .timer-btn,
  .duration-btn,
  .soft-reset-btn,
  .soft-reset-button {
    min-width: 44px;
    min-height: 44px;
  }

  /* Ensure adequate spacing between touch targets */
  .timer-buttons,
  .difficulty-buttons-group,
  .player-action-icons,
  .modal-actions,
  .countdown-numerator-buttons {
    gap: 8px;
  }
}

/* ==========================================================================
   Screen Reader Utilities
   ========================================================================== */

/* Visually hidden but accessible to screen readers */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Allow element to be focusable when navigated to */
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ==========================================================================
   Live Region Announcements
   ========================================================================== */

/* Ensure live regions are hidden visually but announced */
[aria-live] {
  position: relative;
}

.aria-live-assertive {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   High Contrast Mode Support (WCAG 1.4.11)
   ========================================================================== */

@media (forced-colors: active) {
  /* Ensure focus indicators are visible in high contrast mode */
  *:focus-visible {
    outline: 3px solid CanvasText;
    outline-offset: 3px;
  }

  /* Ensure buttons have visible borders */
  button,
  .control-btn,
  .tile,
  .special-move {
    border: 2px solid ButtonText;
  }

  /* Ensure disabled states are distinguishable */
  button:disabled,
  .control-btn:disabled {
    border-style: dashed;
    opacity: 0.7;
  }

  /* Ensure links are distinguishable */
  a {
    text-decoration: underline;
  }

  /* Timer indicators */
  .timer-with-ring.timer-warning,
  .timer-with-ring.timer-danger {
    outline: 3px solid Highlight;
  }
}

/* ==========================================================================
   Focus Not Obscured (WCAG 2.4.11)
   Ensure focused elements are not hidden by sticky/fixed elements
   ========================================================================== */

/* Add scroll margin to prevent focused elements from being hidden */
*:focus-visible {
  scroll-margin: 100px;
}

/* Ensure modals don't obscure focus */
.modal {
  overflow-y: auto;
}

.modal-content {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

/* ==========================================================================
   Consistent Navigation (WCAG 3.2.3)
   ========================================================================== */

/* Ensure consistent focus order with tabindex */
[tabindex="-1"]:focus-visible {
  outline: none;
}

/* ==========================================================================
   Text Spacing (WCAG 1.4.12)
   Content should remain functional when text spacing is modified
   ========================================================================== */

/* Ensure containers can handle increased text spacing */
.overlay-card,
.modal-content,
.questai-column,
.dice-roller-column,
.participant-name {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* ==========================================================================
   Pointer Gestures (WCAG 2.5.1)
   All functionality should be operable with single pointer
   ========================================================================== */

/* Dice slots should be keyboard accessible when interactive */
.dice-slot[tabindex="0"] {
  cursor: pointer;
}

.dice-slot[tabindex="0"]:focus-visible {
  outline: 3px solid #4a9eff;
  outline-offset: 2px;
}