/*
 * accessibility.css
 * Accessibility and reduced-motion safeguards.
 *
 * The game remains visual and animated by default.
 * If the device/user requests reduced motion, we keep the UI usable
 * while reducing heavy movement, blur and particle effects.
 */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .animated-gradient-bg,
  .intro-gradient,
  .end-gradient {
    animation: none !important;
    background-position: center center !important;
  }

  .gradient-orb,
  .intro-orb,
  .end-light,
  .loading-sigil,
  .guard-icon,
  .cursor-sparkle,
  .touch-sparkle,
  .touch-ring {
    animation: none !important;
  }

  .cursor-magic-layer,
  .cursor-glow {
    display: none !important;
  }

  .room-background.is-room-blurred .room-background-image {
    filter: brightness(0.72) saturate(0.9);
    transform: none;
  }

  .ghost-sprite {
    transition: none !important;
  }

  .game-screen,
  .modal-box,
  .text-box,
  .game-button,
  .choice-card,
  .drag-item,
  .drag-slot,
  .carousel-item {
    transform: none !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-text: #fffaf0;
    --color-text-soft: rgba(255, 250, 240, 0.9);
    --border-soft: 1px solid rgba(255, 230, 180, 0.72);
    --border-strong: 1px solid rgba(255, 230, 180, 0.92);
  }

  .text-box,
  .modal-box,
  .guard-card,
  .loading-card,
  .stat-card,
  .choice-card,
  .answer-option,
  .carousel-stage,
  .drag-game-area,
  .ghost-zone {
    background-color: rgba(0, 0, 0, 0.82);
  }

  .game-button {
    border-color: rgba(255, 255, 255, 0.48);
  }
}

@media (hover: none) and (pointer: coarse) {
  .game-button:hover,
  .answer-option:hover,
  .choice-card:hover,
  .drag-item:hover,
  .carousel-arrow:hover,
  .restart-button:hover {
    transform: none;
  }
}

@media (max-width: 340px) {
  .screen-inner {
    padding-left: calc(10px + var(--safe-left));
    padding-right: calc(10px + var(--safe-right));
  }

  .game-button {
    min-height: 42px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .text-box,
  .modal-box,
  .guard-card,
  .loading-card {
    border-radius: var(--radius-md);
  }
}