/* ═══════════════════════════════════════════
   RESPONSIVE — All breakpoints in one file
   Keeping these together makes it easy to see the full mobile strategy at a glance
   and avoids breakpoints being scattered across multiple files.
   ═══════════════════════════════════════════ */

/* ── Crossword: stack grid above clues on narrow screens ── */
@media (max-width: 480px) {
  .crossword-wrap {
    flex-direction: column;
  }
  .cw-clues { width: 100%; }
  .crossword-grid {
    grid-template-columns: repeat(5, calc((100vw - 80px) / 5));
    grid-template-rows: auto;
  }
  .cw-cell {
    width: calc((100vw - 80px) / 5);
    height: calc((100vw - 80px) / 5);
  }
}

/* ── Word Search: stack grid above word list on narrow screens ── */
@media (max-width: 480px) {
  .ws-wrap   { flex-direction: column; }
  .ws-grid   { width: 100%; }
  .ws-words  { flex-direction: row; flex-wrap: wrap; }
  .ws-word   { font-size: 11px; padding: 3px 6px; }
}

/* ── Medium phones (≤ 600px) ── */
@media (max-width: 600px) {
  /* App padding */
  .app { padding: 0 12px 80px; }

  /* Header */
  .header     { padding: 16px 0 8px; margin-bottom: 20px; gap: 10px; }
  .logo-svg   { height: 44px; }
  .date-label { font-size: 10px; }

  /* Streak bar */
  .streak-bar           { gap: 8px; margin-bottom: 18px; }
  .streak-chip          { padding: 10px; }
  .streak-chip .val     { font-size: 20px; }
  .streak-chip .lbl     { font-size: 10px; }

  /* Today card */
  .today-card  { padding: 20px; }
  .today-title { font-size: 24px; }

  /* Puzzle grid */
  .puzzle-grid { gap: 8px; }
  .puzzle-card { padding: 14px; }
}

/* ── Small phones (≤ 400px) ── */
@media (max-width: 400px) {
  /* App padding */
  .app { padding: 0 10px 80px; }

  /* Header */
  .header       { padding: 12px 0 8px; margin-bottom: 16px; }
  .logo-svg     { height: 36px; }
  .header-right { gap: 8px; }

  /* Streak bar: 2×2 grid */
  .streak-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .streak-chip .val { font-size: 18px; }

  /* Today card */
  .today-card  { padding: 16px; border-radius: 12px; }
  .today-title { font-size: 21px; }
  .today-desc  { font-size: 13px; margin-bottom: 16px; }
  .play-btn    { font-size: 14px; padding: 11px 18px; }

  /* Puzzle grid: single column */
  .puzzle-grid { grid-template-columns: 1fr; }

  /* Modal / panel padding */
  .puzzle-body  { padding: 16px; }
  .modal-header,
  .panel-header { padding: 16px 16px 14px; }
  .timer-row    { padding: 10px 16px; }
  .panel-body   { padding: 16px; }
}

/* ── Touch devices: disable hover lift effects ──
   Prevents the "stuck hover" state after tapping on iOS/Android. */
@media (hover: none) {
  .puzzle-card:hover { transform: none; box-shadow: none; }
  .play-btn:hover    { background: var(--accent); }
  .letter-tile:hover { transform: none; background: var(--ink); }
}