/* ── Touch devices: always show card overlays (no hover available) ── */
@media (hover: none) {
  .card-title-wrap          { opacity: 1; }
  .card-actions             { transform: translateY(0); }
  .up-next-card .done-btn   { display: flex; }
  .up-next-card .queue-remove-btn { display: flex; }
  .up-next-card .up-next-overlay { opacity: 1; }
  .movie-card               { cursor: default; }
}

/* ── Tablet / stack panels ── */
@media (max-width: 900px) {
  .panels {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1px auto 1px auto;
  }

  .panel-divider {
    height: 1px;
    width: 100%;
  }

  :root {
    --card-w: 84px;
    --card-h: 126px;
  }

  .up-next-row {
    flex-direction: column;
  }

  .last-watched {
    width: 100%;
  }

  .last-watched-poster-wrap {
    width: 84px;
  }

  .last-watched-poster-wrap img,
  .last-watched-ph {
    width: 84px;
    height: 126px;
  }
}

/* ── Mobile ── */
@media (max-width: 600px) {
  :root {
    --card-w: 76px;
    --card-h: 114px;
  }

  .header-inner   { padding: 0 1rem; }
  .site-header h1 { font-size: 1rem; }

  .up-next-section { padding: 1rem 1rem 0.75rem; }

  .panel          { padding: 1rem; }
  .panel-header   { margin-bottom: 1rem; }

  .tier-label {
    width: 56px;
    min-height: 56px;
  }

  .tier-letter  { font-size: 1.35rem; }
  .tier-desc    { font-size: 0.45rem; }

  .tier-cards   { min-height: 56px; gap: 0.4rem; }

  .modal-box    { padding: 1.25rem; }

  .card-action-btn { font-size: 0.6rem; padding: 5px 1px; }
}