/**
 * Responsive Design Utilities
 * Mobile-first approach with breakpoints
 */

/* Breakpoints */
:root {
  --mobile: 480px;
  --tablet: 768px;
  --desktop: 1024px;
  --wide: 1280px;
}

/* Modal Responsive Adjustments */
@media (max-width: 768px) {
  .draggable-modal {
    max-width: 95vw !important;
    max-height: 85vh !important;
    width: 95vw !important;
  }

  .draggable-modal-header {
    padding: 10px 12px;
  }

  .draggable-modal-title {
    font-size: 1em !important;
  }

  .draggable-modal-content {
    padding: 15px;
    max-height: calc(85vh - 50px) !important;
  }

  /* Genre cards stack on mobile */
  .genres-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .genre-card {
    min-height: auto !important;
  }

  /* Smaller buttons on mobile */
  .modal-header-button {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .draggable-modal {
    left: 2.5vw !important;
    top: 10vh !important;
    width: 95vw !important;
  }

  .draggable-modal-content {
    padding: 10px;
  }

  .genre-card {
    padding: 12px;
  }

  .skill-item {
    padding: 6px 8px;
    font-size: 0.8em;
  }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
  .draggable-modal {
    max-height: 90vh !important;
  }

  .draggable-modal-content {
    max-height: calc(90vh - 50px) !important;
  }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
  .genres-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .draggable-modal-header {
    cursor: move !important;
    touch-action: none;
  }

  .genre-card,
  .skill-item,
  button {
    min-height: 44px;
    /* iOS touch target size */
  }

  .unlock-btn,
  .start-learning-btn {
    padding: 8px 12px;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

  .draggable-modal,
  .genre-card,
  .skill-item,
  button,
  .modal-backdrop {
    animation: none !important;
    transition: none !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .draggable-modal {
    border-width: 3px;
  }

  .genre-card {
    border-width: 2px;
  }

  .draggable-modal-header {
    background: #e67e22 !important;
  }
}

/* Dark theme is now default - no media query needed */
/* All modals use dark blue theme (#0f3460) to match game */