/* Copa 2026 — V3.7 Mobile First
   Patch responsivo sobre V3.6. Não muda regra de negócio. */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* Evita inputs minúsculos e zoom estranho no iOS */
input,
select,
button,
textarea {
  font-size: 16px;
}

/* Melhor área de toque geral */
button,
.nav-btn,
.sd-btn,
.v33-btn,
.v34-btn,
.v36-action,
.v36-chip,
.v36-arrow {
  touch-action: manipulation;
}

/* Scrollbars discretas em áreas horizontais */
.v36-table-wrap,
.v36-chips,
.v33-bracket-scroll,
.sd-team-list,
.pp-bracket-scroll {
  scrollbar-width: thin;
}

/* ─────────────────────────────────────────────
   MOBILE — até 760px
───────────────────────────────────────────── */
@media (max-width: 760px) {
  body {
    min-width: 0;
  }

  .app,
  .page,
  main,
  .container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .hero {
    padding: 18px 14px 16px !important;
    border-radius: 0 0 28px 28px;
  }

  .hero h1,
  .hero-title,
  h1 {
    font-size: clamp(38px, 13vw, 58px) !important;
    line-height: .88 !important;
    letter-spacing: -.055em !important;
  }

  .hero p,
  .hero .lead,
  .lead {
    font-size: 14px !important;
    line-height: 1.55 !important;
    max-width: 100%;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }

  .hero-actions .btn,
  .hero-actions button {
    width: 100%;
    justify-content: center;
    min-height: 46px;
  }

  .topbar,
  .nav,
  .nav-bar,
  .main-nav {
    overflow-x: auto;
    justify-content: flex-start !important;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .nav-btn {
    flex: 0 0 auto;
    min-height: 42px;
    white-space: nowrap;
  }

  /* Hero real V3.6 */
  .v36-real-hero {
    margin-top: 16px;
    padding: 16px;
    border-radius: 24px;
  }

  .v36-real-top {
    gap: 10px;
    margin-bottom: 14px;
  }

  .v36-real-top h2 {
    font-size: clamp(31px, 10vw, 44px);
  }

  .v36-real-top p {
    font-size: 12px;
    line-height: 1.5;
  }

  .v36-group-nav {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
    margin-bottom: 12px;
  }

  .v36-arrow {
    min-width: 42px;
    min-height: 42px;
    border-radius: 14px;
  }

  .v36-chips {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 7px;
    padding: 2px 2px 7px;
    -webkit-overflow-scrolling: touch;
  }

  .v36-chip {
    flex: 0 0 auto;
    min-width: 42px;
    min-height: 42px;
    border-radius: 14px;
    padding: 0 12px;
  }

  .v36-group-board {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .v36-card {
    border-radius: 20px;
  }

  .v36-card-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    padding: 13px;
  }

  .v36-card-head h3 {
    font-size: 20px;
  }

  .v36-pill {
    min-height: 28px;
    font-size: 10px;
  }

  .v36-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .v36-table {
    min-width: 620px;
  }

  .v36-table th,
  .v36-table td {
    padding: 9px 8px;
    font-size: 12px;
  }

  .v36-table .team {
    min-width: 180px;
  }

  .v36-matches {
    padding: 11px;
  }

  .v36-match {
    padding: 11px;
    border-radius: 15px;
  }

  .v36-match-top {
    flex-direction: row;
    align-items: center;
  }

  .v36-scoreline {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    font-size: 12px;
  }

  .v36-scoreline span:first-child,
  .v36-scoreline span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v36-score {
    font-size: 15px;
    min-width: 44px;
    text-align: center;
  }

  .v36-real-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .v36-actions-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 9px;
  }

  .v36-action {
    width: 100%;
    min-height: 44px;
    border-radius: 14px;
  }

  /* Simular Copa */
  .v33-sim-shell {
    margin-top: 14px;
    gap: 14px;
  }

  .v33-sim-hero {
    padding: 17px;
    border-radius: 24px;
  }

  .v33-sim-hero h2 {
    font-size: clamp(34px, 11vw, 52px);
    line-height: .9;
  }

  .v33-sim-hero p {
    font-size: 13px;
    line-height: 1.55;
  }

  .v33-control-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .v33-control-row select,
  .v33-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
  }

  .v33-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .v33-panel {
    border-radius: 22px;
  }

  .v33-panel-head {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }

  .v33-panel-head h3 {
    font-size: 22px;
  }

  .v33-matches {
    padding: 11px;
  }

  .v33-match {
    padding: 12px;
    border-radius: 17px;
  }

  .v33-match-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .v33-score-line {
    grid-template-columns: minmax(0,1fr) 64px;
    gap: 8px;
  }

  .v33-score-line span {
    font-size: 13px;
  }

  .v33-score {
    width: 64px;
    height: 44px;
    font-size: 18px;
  }

  .v33-match-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .v33-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .v33-table {
    min-width: 620px;
  }

  /* Mata-mata */
  .v33-ko-intro {
    padding: 17px;
    border-radius: 24px;
  }

  .v33-ko-intro h3 {
    font-size: clamp(30px, 10vw, 45px);
  }

  .v33-ko-progress {
    display: grid;
    grid-template-columns: 1fr;
  }

  .v33-ko-progress .v33-btn {
    width: 100%;
  }

  .v33-champion {
    padding: 17px;
    border-radius: 22px;
  }

  .v33-champion strong {
    font-size: clamp(32px, 10vw, 50px);
  }

  .v33-bracket-scroll {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .v33-bracket {
    min-width: 1280px;
    gap: 12px;
  }

  .v33-round {
    gap: 10px;
  }

  .v33-ko-card {
    padding: 11px;
    border-radius: 16px;
  }

  .v33-ko-line {
    grid-template-columns: minmax(0,1fr) 54px;
  }

  .v33-ko-score {
    width: 54px;
    height: 38px;
    font-size: 16px;
  }

  /* Seleções */
  .sd-shell,
  .sd-layout {
    width: 100%;
    max-width: 100%;
  }

  .sd-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .sd-panel {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    border-radius: 22px;
  }

  .sd-controls {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .sd-controls input,
  .sd-controls select {
    min-height: 44px;
    width: 100%;
  }

  .sd-team-list {
    display: flex !important;
    overflow-x: auto;
    gap: 9px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .sd-team-button {
    flex: 0 0 250px;
    min-height: 74px;
  }

  .sd-profile-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px;
    padding: 17px !important;
    border-radius: 24px;
  }

  .sd-profile-hero h2 {
    font-size: clamp(36px, 12vw, 56px) !important;
  }

  .sd-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .sd-btn {
    width: 100%;
    min-height: 44px;
  }

  .sd-grid,
  .sq-grid,
  .sq-compare-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .sd-span-4,
  .sd-span-5,
  .sd-span-6,
  .sd-span-7,
  .sd-span-12,
  .sq-span-4,
  .sq-span-5,
  .sq-span-6,
  .sq-span-7,
  .sq-span-12 {
    grid-column: auto !important;
  }

  .sd-card,
  .sq-card,
  .sq-block {
    border-radius: 20px;
  }

  .sd-radar-wrap {
    min-height: 300px;
    overflow: hidden;
  }

  .sd-radar-wrap canvas {
    width: 100% !important;
    max-width: 100%;
  }

  .sd-facts {
    grid-template-columns: 1fr !important;
  }

  .sd-lineup-mini {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .sd-lineup-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 8px;
    align-items: center;
  }

  .sq-head {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 10px;
  }

  .sq-roster-tabs {
    display: flex;
    overflow-x: auto;
    gap: 7px;
    padding-bottom: 6px;
  }

  .sq-tab {
    flex: 0 0 auto;
    min-height: 38px;
  }

  .sq-player {
    grid-template-columns: 54px 1fr !important;
  }

  .sq-builder-controls {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .sq-btn {
    width: 100%;
    min-height: 42px;
  }

  .sq-pitch {
    padding: 12px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sq-pitch-row {
    min-width: 560px;
  }

  .sq-slot select {
    min-height: 38px;
  }

  /* Comparar Times */
  .sd-versus {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
    text-align: left;
  }

  .sd-versus-team.right {
    text-align: left !important;
  }

  .sd-vs-mark {
    justify-self: start;
    transform: none !important;
  }

  .sd-pill-row {
    gap: 7px;
  }

  .sd-pill {
    font-size: 11px;
    line-height: 1.35;
  }
}

/* ─────────────────────────────────────────────
   TABLET — 761px a 1024px
───────────────────────────────────────────── */
@media (min-width: 761px) and (max-width: 1024px) {
  .hero {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .v36-group-board,
  .v33-grid,
  .sd-layout {
    grid-template-columns: 1fr !important;
  }

  .v36-table {
    min-width: 680px;
  }

  .sd-team-list {
    max-height: 360px;
    overflow-y: auto;
  }

  .sd-grid,
  .sq-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  .sd-span-12,
  .sq-span-12 {
    grid-column: 1 / -1 !important;
  }

  .sd-span-6,
  .sq-span-6,
  .sq-span-7,
  .sq-span-5,
  .sd-span-4,
  .sq-span-4 {
    grid-column: auto !important;
  }
}