/* =======================================
   RESPONSIVE STYLES
======================================= */

@media (max-width: 720px) {

  .grid-header { font-size: 0.75rem; }
  .quiz-card  { min-height: 64px; }
  .board-legend { flex-direction: column; }
  .header h1 { font-size: 1.3rem; }
}

@media (max-width: 900px) {

  .header h1 { font-size: 1.4rem; }

  .status-bar {
    font-size: 0.95rem;
    gap: 16px;
  }

  .grid-wrapper {
    padding: 8px;
  }

  .quiz-grid {
    grid-template-columns: 60px repeat(4, 1fr);
    gap: 6px;
  }

  .difficulty-cell {
    font-size: 0.9rem;
    padding: 6px 0;
  }

  .quiz-card {
    min-height: 64px;
    font-size: 0.8rem;
  }

  .overlay-content {
    max-width: 90%;
    padding: 18px;
  }

  .overlay-content h2 { font-size: 1.2rem; }
  .question-meta      { font-size: 0.75rem; }

  .choice-btn { padding: 9px 12px; font-size: 0.9rem; }
  .text-answer input { padding: 10px; font-size: 1rem; }

  .image-wrapper img { max-height: 220px; }

  #bonus-info-overlay .overlay-content {
    max-width: 88%;
    padding: 16px;
  }

  button.primary, button.secondary {
    padding: 10px 16px;
    font-size: 1rem;
  }
}

@media (max-width: 600px) {

  .grid-header { font-size: 0.7rem; }

  .quiz-grid {
    grid-template-columns: 55px repeat(4, 1fr);
    gap: 5px;
  }

  .quiz-card { min-height: 58px; }

  .overlay-content { padding: 16px 12px; }
  .choice-btn      { font-size: 0.85rem; }
  .text-answer input { font-size: 0.95rem; }

  .image-wrapper img { max-height: 190px; }
}