@media (max-width: 639px) {
  .page-shell {
    width: 100%;
    max-width: 100%;
    padding-inline: 10px;
    overflow-x: hidden;
  }

  .page-main,
  .hero,
  .section-block,
  .quick-actions,
  .match-grid,
  .subscription-grid,
  .status-grid,
  .card,
  .info-strip,
  .spoiler {
    min-width: 0;
    max-width: 100%;
  }

  .hero {
    gap: 14px;
    padding-top: 18px;
  }

  .hero h1,
  .page-header h1 {
    max-width: 100%;
    font-size: clamp(1.75rem, 9vw, 2.1rem);
    overflow-wrap: anywhere;
  }

  .section-heading h2 {
    font-size: 1.28rem;
  }

  .quick-card,
  .subscription-card,
  .status-card,
  .match-card {
    padding: 13px;
  }

  .card-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .card-actions .button,
  .load-more .button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-inline: 10px;
    font-size: .94rem;
    white-space: normal;
  }

  .match-card__top {
    gap: 8px;
  }

  .match-card__date,
  .match-card__venue,
  .match-card__broadcast {
    font-size: .88rem;
  }

  .team-row {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    font-size: .98rem;
  }

  .team-row__flag {
    width: 26px;
    font-size: 1.18rem;
  }

  .standings-wrap {
    max-width: 100%;
  }

  .standings-table:not(.standings-table--full) {
    min-width: 0;
    table-layout: fixed;
    font-size: .86rem;
  }

  .standings-table:not(.standings-table--full) th,
  .standings-table:not(.standings-table--full) td {
    padding: 7px 6px;
  }

  .standings-table:not(.standings-table--full) th:nth-child(3),
  .standings-table:not(.standings-table--full) td:nth-child(3) {
    overflow-wrap: anywhere;
  }
}