/* ============================================================
   responsive.css — Mobile & tablet breakpoints
   ============================================================ */

/* ===== Tablet (≤ 900px) ===== */
@media (max-width: 900px) {
  .home-grid      { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; padding: 16px; }
  .card-grid      { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 16px; }
  .memory-grid    { grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px 16px 40px; }

  .detail-card    { padding: 28px 20px; }
  .detail-card .big-letter { font-size: 7rem; }
  .detail-card .big-emoji  { font-size: 6rem; }
  .detail-card .word-label { font-size: 1.8rem; }

  .player-card    { padding: 24px 20px; }
  .player-title   { font-size: 1.6rem; }
  .rhyme-lines    { font-size: 1.1rem; }

  .story-page     { padding: 28px 20px; }
  .story-text     { font-size: 1.1rem; }
  .story-scene    { font-size: 5rem; }

  .quiz-question  { font-size: 1.5rem; }
}

/* ===== Phone (≤ 600px) ===== */
@media (max-width: 600px) {
  .kwl-header { padding: 10px 14px; }
  .kwl-header .logo { font-size: 1.3rem; }

  .page-banner h1 { font-size: 1.8rem; }
  .page-banner p  { font-size: 1rem; }

  .home-grid   { grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 12px; }
  .home-card   { padding: 18px 10px 14px; }
  .home-card .card-icon { font-size: 2.8rem; }
  .home-card .card-name { font-size: 1rem; }
  .home-card .card-desc { display: none; }

  .card-grid   { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px; }
  .learn-card  { padding: 18px 12px; }
  .learn-card .card-emoji { font-size: 2.8rem; }
  .learn-card .card-title { font-size: 1.2rem; }

  .memory-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 12px 40px; }
  .mem-front, .mem-back { font-size: 1.8rem; }

  .quiz-options { grid-template-columns: 1fr 1fr; gap: 10px; }
  .option-btn   { font-size: 1.2rem; padding: 14px; }

  .ctrl-btn { padding: 12px 20px; font-size: 1rem; }

  .drawing-toolbar { gap: 8px; padding: 12px 16px; }
  .color-swatch    { width: 30px; height: 30px; }

  .detail-card .big-letter { font-size: 5.5rem; }
  .detail-card .big-emoji  { font-size: 5rem; }
  .detail-card .small-letter { font-size: 3rem; }
  .detail-card .word-label { font-size: 1.5rem; }
  .detail-controls { gap: 10px; }

  .rhyme-lines { font-size: 1rem; line-height: 2; }
  .story-text  { font-size: 1rem; }
  .story-scene { font-size: 4rem; }

  .tab-btn { padding: 8px 16px; font-size: 0.9rem; }

  .btn-icon { padding: 6px 14px; font-size: 0.85rem; }

  .section-heading { font-size: 1.5rem; padding: 20px 16px 4px; }

  .mascot .mascot-img  { font-size: 5rem; }
  .mascot .speech-bubble { font-size: 1.1rem; padding: 10px 18px; }
}

/* ===== Small phone (≤ 400px) ===== */
@media (max-width: 400px) {
  .home-grid   { grid-template-columns: repeat(2, 1fr); }
  .memory-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .mem-front, .mem-back { font-size: 1.4rem; }
}

/* ===== Landscape phones ===== */
@media (max-height: 500px) and (orientation: landscape) {
  .kwl-header { padding: 6px 16px; }
  .page-banner { padding: 16px 20px 8px; }
  .detail-card .big-letter { font-size: 4rem; }
  .detail-card .big-emoji  { font-size: 3.5rem; }
}

/* ===== Touch device enhancements ===== */
@media (hover: none) and (pointer: coarse) {
  .learn-card:hover,
  .home-card:hover,
  .option-btn:hover,
  .ctrl-btn:hover { transform: none; box-shadow: none; }

  .learn-card:active { transform: scale(.96); }
  .home-card:active  { transform: scale(.96); }

  /* Larger touch targets */
  .ctrl-btn   { min-height: 48px; }
  .option-btn { min-height: 52px; }
  .tab-btn    { min-height: 44px; }
  .color-swatch { width: 40px; height: 40px; }
}