/* Mobile fixes: improve board and stats readability and keep cookie banner visible without covering the app. */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  main, .page-content, .app-main, .stats-layout { width: 100% !important; max-width: 100% !important; overflow-x: hidden; }
  .panel, .card, .training-dialog, .availability-dialog, .report-export-modal .box { width: 100% !important; max-width: 100% !important; }
  .board-canvas, canvas, svg, .tactics-board, .free-board-root svg, #free-board-root svg { max-width: 100% !important; height: auto !important; }
  .stats-table, .load-table, .attendance-list, .availability-list, table { max-width: 100% !important; }
  .stats-table, table, .load-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .table-wrap, .report-filters, .filters { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { white-space: nowrap; }
  #fn-consent-banner { width: calc(100% - 16px); left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: 12px 14px; border-radius: 12px; }
  #fn-consent-banner .fn-buttons { flex-direction: column; gap: 6px; }
  #fn-consent-banner .fn-buttons button { width: 100%; min-height: 44px; }
  #fn-consent-tip { left: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 420px) {
  .stats-table, table { font-size: 0.86em; }
  th, td { padding: 6px 8px; }
}

@media (max-width:640px){
  .training-wizard .tw-roster{grid-template-columns:1fr;gap:7px}
  .training-wizard .tw-player-status{display:grid;grid-template-columns:34px 1fr;grid-template-areas:"shirt name" "status status";gap:8px;padding:9px;border-radius:10px;align-items:start}
  .training-wizard .tw-player-status .shirt{grid-area:shirt;align-self:start}
  .training-wizard .tw-player-status strong{grid-area:name;font-size:12px;line-height:1.2}
  .training-wizard .tw-player-status small{grid-area:name;padding-top:16px;font-size:10px}
  .training-wizard .tw-player-status>div{grid-area:status;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .training-wizard .tw-player-status button{padding:5px 2px;font-size:11px;font-weight:600;border-radius:8px}
  .training-wizard .tw-roster-head{flex-direction:column;align-items:flex-start;gap:4px}
}