/* ============================================
   CogniCare - Responsive CSS
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .levels-grid { grid-template-columns: repeat(4, 1fr); }
  .settings-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-grid { grid-template-columns: 1fr; }
  .results-stats { grid-template-columns: repeat(2, 1fr); }
  .hero { flex-direction: column; text-align: center; padding: 32px 24px; }
  .hero-text { text-align: left; }
  .hero-btns { justify-content: flex-start; }
  .orb-wrap { width: 140px; height: 140px; }
  .orb { width: 80px; height: 80px; }
  .setup-grid { grid-template-columns: 1fr; }
  .level-select-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Mobile */
@media (max-width: 768px) {
  :root { --header-h: 56px; }
  .header { padding: 0 16px; gap: 12px; }
  .header-nav { display: none; }
  .main { padding: 20px 16px; }
  .hero { padding: 24px 20px; }
  .hero-title { font-size: 1.7rem; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .feature-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .feature-card { padding: 16px; }
  .levels-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .settings-grid { grid-template-columns: 1fr; }
  .page-title-row { flex-direction: column; gap: 12px; }
  .page-title-row > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; }
  .form-row { grid-template-columns: 1fr; }
  .game-header { flex-direction: column; gap: 10px; align-items: flex-start; }
  .game-stats-bar { gap: 12px; justify-content: flex-start; }
  .results-stats { grid-template-columns: repeat(2, 1fr); }
  .results-actions { flex-direction: column; }
  .baskets-row { flex-direction: column; bottom: 0; gap: 10px; }
  .basket { min-width: auto; }
  .search-bar { flex-direction: column; }
  .filter-row { flex-direction: column; }
  .game-controls { flex-wrap: wrap; }
  .footer { flex-direction: column; gap: 4px; text-align: center; }
  .level-select-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Small mobile */
@media (max-width: 480px) {
  .feature-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .levels-grid { grid-template-columns: repeat(2, 1fr); }
  .results-stats { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: 1.4rem; }
  .hero-btns { flex-direction: column; }
  .btn-large { width: 100%; justify-content: center; }
  .charts-grid { grid-template-columns: 1fr; }
  .orb-wrap { display: none; }
}