/* Dragons FC Manager 3.5.7 — revisão MOBILE apenas.
 * Desktop/notebooks não recebem mudanças de layout.
 * Ajustes por causa: dimensões intrínsecas, margens, toque e áreas roláveis.
 */
@media (max-width: 700px) {
  /* A página não deve deslizar na horizontal. Componentes específicos,
     como o chaveamento e classificações extensas, continuam roláveis. */
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  #root, .shell, .workspace, .content { width: 100%; min-width: 0; max-width: 100%; }
  #root, .shell { overflow-x: clip; }
  .workspace, .content, .card, .card-pad, .cols2, .cols3, .cols4,
  .section-head, .v33-comp-details, .v33-comp-heading,
  .v42-excel-panel, .v43-knockout-wrap, .v43-knockout,
  .v43-knockout-content, .v43-rounds-panel, .v38-tactics-page,
  .v38-tactics-layout, .v38-tactical-right, .v38-bench { min-width: 0; max-width: 100%; }
  .content { overflow-x: clip; }
  /* Não bloquear gestos de acessibilidade: o pinch-to-zoom continua possível. */
  button, a, input, select, textarea, [role="button"], .btn, .icon-btn { touch-action: manipulation; }
  /* Safari iOS dá zoom automático em inputs com fonte inferior a 16px. */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font-size: 16px !important;
  }
  .field, .form-grid, .form-grid > *, .field input, .field select, .field textarea,
  .modal-body > *, .modal-body .cols2 > *, .modal-body .form-grid > * {
    box-sizing: border-box; min-width: 0; max-width: 100%;
  }
  .field input, .field select, .field textarea { display: block; width: 100%; }
  input[type="date"], input[type="datetime-local"], input[type="time"] {
    min-width: 0; max-width: 100%; width: 100%;
  }
  .modal-overlay { padding: 0; align-items: end; overflow: hidden; }
  #modal-root .modal { width: 100%; max-width: 100%; min-width: 0; max-height: 100dvh; margin: 0; }
  #modal-root .modal-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; overflow-x: clip;
    overscroll-behavior-y: contain; padding: 18px 17px 28px !important; }
  #modal-root .modal-body .form-grid { grid-template-columns: minmax(0, 1fr); }
  #modal-root .modal-head { min-width: 0; flex-shrink: 0; }
  #modal-root .modal-head h2 { min-width: 0; overflow-wrap: anywhere; }
  #modal-root .modal-foot { min-width: 0; flex-shrink: 0;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  /* Editar/Nova partida: salvar em linha completa; ações secundárias abaixo.
     O formulário continua rolável independentemente dos botões. */
  #modal-root .v357-match-modal .modal-foot { display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  #modal-root .v357-match-modal .modal-foot > .btn { width: 100%; min-width: 0; margin: 0;
    white-space: normal; text-wrap: balance; }
  #modal-root .v357-match-modal .modal-foot > .btn.primary { grid-column: 1 / -1; grid-row: 1; }
  #modal-root .v357-match-modal .modal-foot > .btn:not(.primary):first-child { grid-column: 1; grid-row: 2; }
  #modal-root .v357-match-modal .modal-foot > .btn.warn { grid-column: 2; grid-row: 2; }
  #modal-root .v357-match-modal .modal-foot > .btn:first-child:nth-last-child(2) { grid-column: 1 / -1; }
  /* Evita que linhas com textos extensos alarguem contêineres flex. */
  .actions, .display-flex, .section-head > *, .v33-comp-heading > *,
  .v44-heading-identity, .v44-heading-copy { min-width: 0; }
  .section-head h2, .section-head p, .v44-heading-copy h2 { overflow-wrap: break-word; }
  /* Reservas: 3 colunas proporcionais, sem o grande vazio à direita. */
  .v38-bench { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch; justify-items: stretch; gap: 10px; padding: 12px; }
  .v38-bench-player { width: 100%; max-width: none; min-width: 0;
    min-height: 124px; justify-self: stretch; }
  .v38-bench-player b, .v38-bench-player small { max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  /* O chaveamento deve continuar com rolagem horizontal LOCAL, nunca na página. */
  .v43-bracket-viewport, .v37-category-list, .table-wrap {
    max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .v43-bracket-viewport { overflow-x: auto; touch-action: pan-x pan-y pinch-zoom; }
  /* Exibição mobile exclusiva dos resultados, sem tabela larga ou escudos empilhados. */
  .v357-original-match-table { display: none !important; }
  .v357-mobile-matches { display: grid; gap: 10px; width: 100%; min-width: 0; }
  .v357-match-card { min-width: 0; border: 1px solid #344458; background: #111d2a;
    border-radius: 13px; padding: 12px; display: grid; gap: 10px; }
  .v357-match-meta, .v357-match-footer { display: flex; align-items: center;
    justify-content: space-between; gap: 9px; min-width: 0; }
  .v357-match-meta { font-size: 11px; color: #aebed2; }
  .v357-match-meta .v357-stage { overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; min-width: 0; text-align: right; }
  .v357-fixture { display: flex; align-items: center; justify-content: center;
    gap: clamp(6px, 2.2vw, 14px); min-width: 0; }
  .v357-team { display: flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 0; font-size: 13px; font-weight: 850; letter-spacing: .03em; }
  .v357-team .crest-box { width: 34px; height: 34px; flex: 0 0 34px; }
  .v357-vs { flex: 0 0 auto; color: #aab8cb; font-weight: 800; }
  .v357-match-footer { border-top: 1px solid #304152; padding-top: 9px; }
  .v357-match-footer .v357-result { color: #e3ebf7; font-size: 12px; font-weight: 750; }
  .v357-match-footer .btn { min-height: 36px; font-size: 12px; }
  .v357-empty { padding: 18px; border: 1px dashed #3b5167; border-radius: 12px;
    color: #bac9d9; font-size: 13px; }
}
@media (min-width: 701px) {
  .v357-mobile-matches { display: none !important; }
}
@media (max-width: 640px) {
  /* Cabeçalho com largura real; temporada legível em duas linhas. */
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px; align-items: center; padding: 13px 14px; min-width: 0; }
  .topbar > .display-flex { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .topbar-left { min-width: 0; flex: 1 1 auto; }
  .topbar .eyebrow { max-width: none; white-space: normal; text-overflow: clip;
    overflow: visible; line-height: 1.3; font-size: 9px; letter-spacing: .055em;
    overflow-wrap: anywhere; }
  .topbar h1 { font-size: clamp(19px, 5vw, 23px); line-height: 1.12;
    overflow-wrap: break-word; }
  .topbar-right { min-width: 0; flex-shrink: 0; }
  .topbar-right .btn.primary { width: 92px; min-width: 0; max-width: 92px;
    min-height: 48px; padding: 8px 7px; font-size: 11px; line-height: 1.15;
    white-space: normal; }
  .topbar-right .btn.primary svg { width: 16px; height: 16px; flex: none; }
  .hero { max-width: 100%; }
  .hero-content { padding: 23px 21px; }
  .hero-title { min-width: 0; max-width: 100%; }
  .hero-title h2 { font-size: clamp(32px, 9.8vw, 48px);
    overflow-wrap: break-word; }
  .hero-actions { gap: 9px; }
  .hero-actions .btn { min-width: 0; word-break: normal; white-space: normal; }
  .hero-meta { gap: 9px; }
  .hero-meta span { min-width: 0; }
  .v43-rounds-panel .v43-fixture-line { min-width: 0;
    grid-template-columns: 60px minmax(0,1fr) 41px minmax(0,1fr); gap: 5px; }
  .v43-fixture-team { min-width: 0; }
}
@media (max-width: 360px) {
  .topbar { padding-inline: 10px; column-gap: 6px; }
  .topbar > .display-flex { gap: 7px; }
  .topbar h1 { font-size: 18px; }
  .topbar-right .btn.primary { width: 80px; font-size: 10px; }
  .v38-bench { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v357-team .crest-box { width: 29px; height: 29px; flex-basis: 29px; }
  .v357-team { gap: 4px; font-size: 11px; }
}