/* layout.css — responsive breakpoints */

@media (max-width: 720px) {
  .stats-bar {
    max-width: 8.5rem;
  }
  .stat {
    min-width: 4.75rem;
  }
  .how-grid {
    grid-template-columns: 1fr;
  }
  .hand-display {
    gap: var(--space-3);
  }
  .hole-cards {
    --card-w: 52px;
  }
  .board-cards {
    --card-w: 42px;
  }
}

@media (max-width: 480px) {
  .header-inner {
    padding-inline: var(--space-3);
  }
  .about-page {
    padding-inline: var(--space-3);
  }
  .tutorial-page {
    padding-inline: var(--space-3);
  }
  .tutorial-hand-cards {
    --card-w: 38px;
  }
  .profile-page {
    padding-inline: var(--space-3);
  }
  .table-context {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: var(--space-1);
  }
  .stat-tile {
    padding: var(--space-1) var(--space-2);
  }
  .hand-display {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .hand-divider {
    display: none;
  }
  /* A full five-card board plus two hole cards must fit 375px without overflow. */
  .hole-cards {
    --card-w: 50px;
  }
  .board-cards {
    --card-w: 40px;
  }
  .verdict-badge,
  .verdict-line {
    font-size: var(--text-sm);
    width: 100%;
  }
  .feedback-page {
    padding-inline: var(--space-3);
  }
  .feedback-topbar {
    align-items: flex-start;
  }
  .feedback-close {
    align-self: flex-start;
  }
  .feedback-hand-chip {
    align-items: stretch;
  }
  .feedback-hand-cards {
    flex-wrap: nowrap;
    gap: 2px;
  }
  .feedback-hand-cards .board-street-group.is-nav,
  .feedback-hand-cards .board-street-group:not(.is-nav) {
    flex: 1 1 0;
    min-width: 0;
    padding: 1px 2px 4px;
  }
  .feedback-hand-cards .feedback-mini-card {
    min-width: 18px;
    padding: 0 2px;
    font-size: 0.5625rem;
  }
  .board-street-badge {
    font-size: 0.5625rem;
    letter-spacing: 0.04em;
  }
  .street-feedback-sheet {
    width: calc(100vw - 2 * var(--space-3));
    max-height: min(80dvh, 32rem);
  }
}