@media (max-width: 720px) {
  .club-dialog-head {
    grid-template-columns: auto 1fr;
  }
  .club-dialog-head .small-btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .admin-section-head,
  .editor-card-topline {
    flex-direction: column;
    align-items: stretch;
  }
  .club-page-head-refined {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .club-page-logo { margin: 0 auto; }
  .club-page-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .club-page-meta-line { justify-content: center; }
  .club-page-head-refined #clubPageFavBtn { justify-self: center; }
  .club-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .app-shell { padding-inline: .85rem; }
  .quick-stats,
  .home-scoreboard { grid-template-columns: 1fr; }
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .home-action-card { min-height: 132px; border-radius: 20px; }
  .home-card-copy { padding: .72rem; }
  .home-card-copy strong { font-size: .9rem; line-height: 1.15; }
  .home-card-copy small { font-size: .74rem; line-height: 1.2; }
  .menu-icon { width: 22px; height: 22px; margin-bottom: .22rem; }
  .photo-grid,
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-head { align-items: center; }
  .hero-logo {
    width: 58px;
    height: 58px;
  }
  .topbar { border-radius: 22px; }
  .bottom-nav {
    width: calc(100% - .8rem);
    border-radius: 24px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .nav-btn small {
    font-size: .62rem;
  }
  .team-line strong { font-size: .9rem; }
  .favorites-strip { grid-template-columns: 1fr; }
  .club-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }
  .club-card {
    min-height: 188px;
    padding: .82rem .75rem;
  }
  .club-card-head.centered-layout {
    gap: .65rem;
    padding-top: .55rem;
  }
  .club-logo-wrap {
    width: 72px;
    height: 72px;
  }
  .club-grid-logo {
    width: 64px;
    height: 64px;
  }
  .club-favorite-badge {
    top: .65rem;
    right: .65rem;
    font-size: 1.7rem;
  }
  .club-card h4 { font-size: .94rem; }
  .club-scale { font-size: .88rem; }
  .hero-native { min-height: 190px; }
  .hero-native-cover.hero-fit,
  .hero-native-cover.no-blur { object-fit: contain; }
}

@media (max-width: 420px) {
  .club-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }
  .club-card {
    min-height: 172px;
    padding: .72rem .68rem;
  }
  .club-logo-wrap {
    width: 62px;
    height: 62px;
  }
  .club-grid-logo {
    width: 56px;
    height: 56px;
  }
  .club-favorite-badge {
    top: .58rem;
    right: .58rem;
    font-size: 1.5rem;
  }
  .club-card h4 { font-size: .82rem; }
  .club-scale { font-size: .78rem; }
}

@media (min-width: 720px) {
  .home-live-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .detail-grid.two {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .hero-native { min-height: 360px; }
}

@media (min-width: 900px) {
  .club-grid {
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  }
}

@media (min-width: 1200px) {
  .club-grid {
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .view { animation: fadeSlide .22s ease; }
  .home-action-card,
  .match-card,
  .club-card {
    transition: transform .16s ease, box-shadow .16s ease;
  }
  .home-action-card:active,
  .match-card:active,
  .club-card:active {
    transform: scale(.985);
  }
}

@keyframes fadeSlide {
  from { opacity: .001; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}


@media (max-width: 720px) {
  .standing-card .table-wrap,
  .final-match-card .table-wrap,
  .final-overall-card .table-wrap {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .standing-card .table,
  .final-overall-table,
  .final-match-table { min-width: 640px; }

  .standing-card-general .table-wrap { overflow-x: visible; overflow-y: visible; }
  .standing-card-general .table { min-width: 0; width: 100%; table-layout: fixed; }
  .standing-card-general .table th,
  .standing-card-general .table td {
    padding: .65rem .45rem; font-size: .82rem;
    white-space: normal; word-break: normal; overflow-wrap: anywhere;
  }
  .standing-card-general .table th:nth-child(1),
  .standing-card-general .table td:nth-child(1) { width: 14%; text-align: left; }
  .standing-card-general .table th:nth-child(2),
  .standing-card-general .table td:nth-child(2) { width: auto; }
  .standing-card-general .table th:nth-child(3),
  .standing-card-general .table td:nth-child(3) { width: 22%; text-align: right; padding-right: .55rem; }

  /* Final do Escalão de %escalão% em mobile — card vertical */
  .final-match-card .table-wrap { overflow-x: visible; overflow-y: visible; }
  .final-match-table { min-width: 0 !important; width: 100% !important; display: block; }
  .final-match-table thead { display: none; }
  .final-match-table tbody { display: block; }
  .final-match-table tr {
    display: grid; grid-template-columns: 1fr 1fr;
    grid-gap: .35rem .9rem; padding: .25rem 0 .35rem;
  }
  .final-match-table td {
    display: block; border: none !important;
    padding: .55rem .25rem .65rem !important;
    white-space: normal; font-size: .92rem; text-align: center;
  }
  .final-match-table td::before {
    content: attr(data-label); display: block;
    font-size: .66rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--muted); margin-bottom: .25rem; font-weight: 600;
  }
  .final-match-table td:nth-child(1)::before { content: "Dia"; }
  .final-match-table td:nth-child(2)::before { content: "Hora"; }
  .final-match-table td:nth-child(3)::before { content: "Campo"; }
  .final-match-table td:nth-child(4)::before { content: ""; display: none; }
  .final-match-table td:nth-child(5)::before { content: "Resultado"; }

  .final-match-table td:nth-child(1) { grid-column: 1 / 2; text-align: center; }
  .final-match-table td:nth-child(2) { grid-column: 2 / 3; text-align: center; }
  .final-match-table td:nth-child(3) {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    padding-top: .85rem !important;
  }
  .final-match-table td:nth-child(4) {
    grid-column: 1 / -1;
    padding: 1rem .25rem .9rem !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    line-height: 1.45; font-size: 1.02rem;
    display: flex !important; flex-direction: column; align-items: center;
    gap: .35rem;
  }
  .final-match-table td:nth-child(4) strong {
    display: block; width: 100%; font-size: 1.08rem;
    text-align: center; overflow-wrap: anywhere;
  }
  .final-match-table td:nth-child(4) .final-vs {
    display: block; padding: 0; color: var(--gold-2, #ffd86d);
    font-weight: 700; text-transform: uppercase;
    font-size: .9rem; letter-spacing: .08em;
  }
  .final-match-table td:nth-child(5) {
    grid-column: 1 / -1;
    padding: .85rem .25rem .35rem !important;
    font-size: 1.55rem; font-weight: 700;
  }
  .final-match-table td:nth-child(5) .final-result-stack {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
  }
  .final-match-table td:nth-child(5) strong { font-size: 1.55rem; color: var(--gold-2, #ffd86d); }
  .final-match-table td:nth-child(5) small,
  .final-match-table td:nth-child(5) .final-penalty-line {
    font-size: .95rem; color: var(--muted);
    font-weight: 500; letter-spacing: .01em;
  }

  body[data-theme="light"] .final-match-table td:nth-child(3),
  body[data-theme="light"] .final-match-table td:nth-child(4) {
    border-top-color: rgba(122, 93, 45, 0.18) !important;
    border-bottom-color: rgba(122, 93, 45, 0.18) !important;
  }
  body[data-theme="light"] .final-match-table td:nth-child(4) .final-vs,
  body[data-theme="light"] .final-match-table td:nth-child(5) strong { color: #8c5b00; }

  .match-day-header { gap: .5rem; align-items: flex-start; flex-direction: column; }
  .match-footer .match-tags { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .match-card { padding: .9rem .8rem .8rem 1rem; }
  .teams-grid { gap: .45rem; }
  .team-line {
    grid-template-columns: 38px minmax(0,1fr) auto;
    gap: .55rem;
  }
  .team-line strong { white-space: normal; line-height: 1.2; }
  .team-line .score { min-width: 2.1rem; }
  .standing-card,
  .match-day { padding: .85rem; }
}

/* Patch: keep quick-card icon scale consistent on mobile */
@media (max-width: 560px) {
  :root {
    --quick-card-icon-size: 64px;
    --quick-card-icon-gap: 7px;
  }
  .home-action-card .home-card-copy {
    padding: .7rem .72rem;
    justify-content: flex-start;
  }
  .home-action-card .quick-card-icon,
  .home-action-card.no-card-image .quick-card-icon,
  .home-action-card .menu-icon.quick-card-icon {
    width: var(--quick-card-icon-size);
    height: var(--quick-card-icon-size);
    min-width: var(--quick-card-icon-size);
    min-height: var(--quick-card-icon-size);
    max-width: var(--quick-card-icon-size);
    max-height: var(--quick-card-icon-size);
    margin-bottom: var(--quick-card-icon-gap);
  }
}