/* Teamazo · Avant-match sur ordinateur (≥ 1100 px), navigation du téléphone, « Quoi de neuf ». */

/* --- Avant-match sur ordinateur (≥ 1100 px, 8 octobre 2026) : TOUTES les règles de cette disposition sont ici. ---
   Titre, modes et actions sur une ligne ; 3 colonnes alignées en haut et à la hauteur de l’écran
   (--ws-top, haut de la grille, posé par fitWorkspace) : vestiaire | barre (compos, tactique, Grand écran),
   terrain et banc | Équilibrer et rapport. Le bandeau d’équipes au-dessus du terrain et les cartes duel sont
   masqués : l’en-tête du rapport (maillot, nom, moyenne) les remplace. Pas en Grand écran (body.field-expanded),
   qui garde sa disposition. En dessous de 1100 px (tablette, téléphone), rien ne change. */
@media (min-width: 1100px) {
  .app {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
    padding-top: 12px;
  }
  .app > * {
    grid-column: 1 / -1;
  }
  .app > .intro {
    display: contents;
  }
  .app > .intro > h1 {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
    font-size: 38px;
    line-height: 1;
  }
  .app > .intro > .intro-actions {
    grid-row: 1;
    grid-column: 3;
  }
  .app > #mode-menu {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
    width: min(100%, 700px);
    margin: 0;
  }
  #mode-menu button {
    padding-block: 8px;
  }
  .app > .install-banner,
  .app > .live-welcome {
    margin-top: 12px;
    margin-bottom: 0;
  }
  .app > .live-welcome {
    padding: 8px 10px 8px 16px;
  }
  #prematch-view {
    margin-top: 10px;
  }
  body:not(.field-expanded) #prematch-view .workspace {
    --ws-h: max(460px, calc(100vh - var(--ws-top, 220px) - 12px));
    /* Colonnes de 230 à 250 px, qui ne collent pas aux bords : la page garde ses marges. */
    grid-template-columns: clamp(230px, 13vw, 250px) minmax(0, 1fr) clamp(230px, 13vw, 250px);
    align-items: start;
    gap: 16px;
    margin-top: 0;
  }

  /* Colonne gauche : le vestiaire prend la hauteur de l’écran, la liste défile dedans. */
  body:not(.field-expanded) .locker-panel {
    display: flex;
    flex-direction: column;
    height: var(--ws-h);
    min-height: 0;
  }
  body:not(.field-expanded) .locker-panel #players-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
  body:not(.field-expanded) .list-heading {
    font-size: 13px;
  }
  body:not(.field-expanded) .squad-main strong {
    font-size: 17px;
  }
  body:not(.field-expanded) .squad-role {
    font-size: 13px;
  }
  /* Ligne allégée : présence, prénom, poste, note. Le liseré dit l’équipe (plus de nom d’équipe), toucher la
     ligne ouvre la carte (plus de menu ⋮) et toute la ligne se glisse à la souris (plus de poignée ⋮⋮). */
  body:not(.field-expanded) .squad-row {
    grid-template-columns: 22px minmax(0, 1fr) 40px;
    gap: 8px;
    padding-left: 9px;
    cursor: grab;
    user-select: none;
  }
  body:not(.field-expanded) .squad-row .locker-grip,
  body:not(.field-expanded) .squad-row .player-menu,
  body:not(.field-expanded) .squad-spot {
    display: none;
  }
  body:not(.field-expanded) .squad-rating {
    width: 40px;
    height: 34px;
    font-size: 17px;
  }
  body:not(.field-expanded) .squad-head span {
    font-size: 16px;
  }

  /* Colonne du milieu : une barre d’une ligne, puis le terrain et le banc. */
  body:not(.field-expanded) .field-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      'compos tactic tools'
      'pending pending pending'
      'capture capture capture';
    align-items: stretch;
    gap: 8px;
    min-width: 0;
  }
  body:not(.field-expanded) .field-panel > * {
    grid-column: 1 / -1;
    margin: 0;
  }
  body:not(.field-expanded) .field-panel > .coach-bar {
    grid-area: compos;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 44px;
    padding: 0 6px 0 8px;
  }
  body:not(.field-expanded) .coach-bar-head {
    display: contents;
  }
  body:not(.field-expanded) .coach-title {
    display: none;
  }
  body:not(.field-expanded) .compo-slots {
    order: 1;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body:not(.field-expanded) .compo-slot-list {
    display: flex;
    flex: none;
    gap: 6px;
  }
  body:not(.field-expanded) .coach-tools {
    order: 2;
    flex: none;
    margin: 0;
  }
  body:not(.field-expanded) .compo-slot {
    flex: none;
    width: auto;
    height: 32px;
    min-height: 0;
  }
  body:not(.field-expanded) .compo-slot-main {
    height: 100%;
    min-height: 0;
    padding: 0 8px 0 12px;
  }
  body:not(.field-expanded) .compo-thumb,
  body:not(.field-expanded) .compo-slot-text small {
    display: none;
  }
  body:not(.field-expanded) .compo-slot-text strong {
    font-size: 16px;
    white-space: nowrap;
  }
  /* Compo active : le nom, puis son ⋯ séparé par un filet fin. */
  body:not(.field-expanded) .compo-slot.active .compo-slot-main {
    padding-right: 6px;
  }
  body:not(.field-expanded) .compo-more {
    width: 26px;
    height: 24px;
    margin: 0 3px 0 0;
    border-left: 1px solid var(--line);
    border-radius: 0 6px 6px 0;
  }
  body:not(.field-expanded) .compo-more .icon {
    width: 16px;
    height: 16px;
  }
  body:not(.field-expanded) .compo-slot-new {
    flex: none;
    flex-direction: row;
    gap: 6px;
    width: auto;
    width: 32px;
    min-width: 0;
    height: 32px;
    min-height: 0;
    padding: 0;
    white-space: nowrap;
  }
  /* Barre étroite : « Nouvelle compo » réduit à son « + » (le texte reste en infobulle). */
  body:not(.field-expanded) .compo-slot-new span {
    display: none;
  }
  body:not(.field-expanded) .field-panel {
    position: relative;
  }
  body:not(.field-expanded) .field-panel > .tactic-panel {
    grid-area: tactic;
    position: static;
    overflow: visible;
  }
  body:not(.field-expanded) .tactic-panel > summary {
    gap: 10px;
    height: 44px;
    min-height: 0;
    padding: 0 12px 0 8px;
  }
  body:not(.field-expanded) .tactic-thumb {
    width: 52px;
    height: 34px;
  }
  body:not(.field-expanded) .tactic-thumb svg {
    width: 100%;
    height: 100%;
  }
  body:not(.field-expanded) .tactic-summary small,
  body:not(.field-expanded) .tactic-change {
    display: none;
  }
  body:not(.field-expanded) .tactic-summary strong {
    font-size: 17px;
    white-space: nowrap;
  }
  /* Détails de la tactique : un panneau qui s’ouvre par-dessus le terrain (fermé en cliquant à côté). */
  body:not(.field-expanded) .tactic-panel[open] > .tactic-body {
    position: absolute;
    top: 52px;
    right: 0;
    left: 0;
    z-index: 30;
    max-height: calc(var(--ws-h) - 64px);
    margin: 0;
    padding: 14px 16px 16px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: 0 22px 48px #000000a6;
  }
  body:not(.field-expanded) .field-panel > .field-toolbar {
    grid-area: tools;
    align-items: center;
    padding: 0;
    border: 0;
  }
  body:not(.field-expanded) .field-toolbar .section-label,
  body:not(.field-expanded) .field-toolbar #balance {
    display: none;
  }
  body:not(.field-expanded) .field-toolbar-actions {
    height: 44px;
  }
  body:not(.field-expanded) .field-toolbar-actions > button {
    height: 100%;
  }
  body:not(.field-expanded) .field-panel > .pending-note {
    grid-area: pending;
  }
  body:not(.field-expanded) .field-panel > .match-capture {
    grid-area: capture;
  }
  body:not(.field-expanded) .field-panel .match-header {
    display: none;
  }
  /* Le terrain est la priorité (9 octobre 2026, soir) : toujours toute la largeur de la colonne, cadre fin. Sa
     hauteur suit celle de l’écran (le terrain entier reste visible ; le banc peut passer juste dessous) : rapport
     largeur / hauteur de 1,7 s’il y a la place, jusqu’à 2,1 sinon (les tracés suivent le cadre, les cercles
     restent ronds). Seulement si même 2,1 ne tient pas (écran très bas), le terrain rétrécit.
     --fit-x : barre, espace, cadre et marge sous le terrain. 100cqw = largeur de .match-capture. */
  body:not(.field-expanded) .field-panel {
    --fit-x: 80px;
    --pitch-room: calc(100vh - var(--ws-top, 180px) - var(--fit-x));
  }
  body:not(.field-expanded) .field-panel > .match-capture {
    container-type: inline-size;
    width: min(100%, calc(var(--pitch-room) * 2.1 + 14px));
    justify-self: center;
  }
  body:not(.field-expanded) .field-panel .board-wrap {
    padding: 6px;
  }
  body:not(.field-expanded) .field-panel .pitch {
    width: 100%;
    height: clamp(calc((100cqw - 14px) / 2.1), var(--pitch-room), calc((100cqw - 14px) / 1.7));
    aspect-ratio: auto;
  }
  body:not(.field-expanded) .player-token {
    width: 96px;
    height: 104px;
  }
  body:not(.field-expanded) .player-token .jersey {
    width: 60px;
    height: 56px;
  }
  body:not(.field-expanded) .player-token .jersey-number {
    font-size: 26px;
  }
  body:not(.field-expanded) .player-token .token-rating {
    padding: 2px 5px;
    font-size: 14px;
  }
  body:not(.field-expanded) .player-token .token-name {
    max-width: 112px;
    font-size: 15px;
  }
  body:not(.field-expanded) .player-token .token-position {
    font-size: 12px;
  }

  /* Colonne droite : un seul « Équilibrer », le rapport et le duel, en plus grand. */
  body:not(.field-expanded) .teams-panel {
    display: flex;
    flex-direction: column;
    max-height: var(--ws-h);
    overflow-y: auto;
  }
  body:not(.field-expanded) .teams-panel .team-details > summary {
    display: none;
  }
  body:not(.field-expanded) .report-title {
    font-size: 15px;
  }
  body:not(.field-expanded) .balance-mode button {
    font-size: 13px;
  }
  body:not(.field-expanded) .tug-avg {
    font-size: 32px;
  }
  body:not(.field-expanded) .report-verdict strong {
    font-size: 25px;
  }
  body:not(.field-expanded) .report-verdict span {
    font-size: 14px;
  }
  body:not(.field-expanded) .role-duel b {
    font-size: 18px;
  }
  body:not(.field-expanded) .role-duel em {
    font-size: 13px;
  }
  body:not(.field-expanded) .report-analysis p,
  body:not(.field-expanded) .report-detail {
    font-size: 14px;
  }
  /* Maillot et nom des équipes dans l’en-tête du rapport, au-dessus de leur moyenne : plus de cartes duel
     ni de « Force totale » (doublons). On y dépose aussi un joueur glissé depuis le vestiaire. */
  body:not(.field-expanded) .teams-panel .versus-teams,
  body:not(.field-expanded) .report-power {
    display: none;
  }
  body:not(.field-expanded) .report-teams {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 -4px 6px;
  }
  /* Maillot au-dessus du nom : dans 230 px, « CHASUBLES » tient alors sur la moitié de la largeur. */
  .report-teams .rt-team {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 4px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--white);
    font: 800 italic 14px/1.05 var(--display);
    text-align: left;
    text-transform: uppercase;
  }
  .report-teams .rt-b {
    align-items: flex-end;
    text-align: right;
  }
  .report-teams .rt-team:hover {
    background: var(--soft);
  }
  .report-teams .rt-team.drag-over {
    outline: 2px dashed var(--team);
    outline-offset: 1px;
  }
  .report-teams strong {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .report-teams .rt-shirt {
    flex: none;
    order: -1;
  }
  .report-teams .rt-shirt svg {
    display: block;
    width: 34px;
    height: 32px;
  }
}
.report-teams {
  display: none;
}
@media (min-width: 1100px) and (max-height: 760px) {
  .app-header {
    height: 52px;
  }
  .app {
    padding-top: 8px;
  }
  .app > .intro > h1 {
    font-size: 30px;
  }
  #mode-menu button {
    padding-block: 4px;
  }
  #prematch-view {
    margin-top: 6px;
  }
  body:not(.field-expanded) .field-panel {
    --fit-x: 74px;
    row-gap: 6px;
  }
  body:not(.field-expanded) .field-panel > .coach-bar,
  body:not(.field-expanded) .tactic-panel > summary,
  body:not(.field-expanded) .field-toolbar-actions {
    height: 40px;
  }
  body:not(.field-expanded) .compo-slot,
  body:not(.field-expanded) .compo-slot-new {
    height: 30px;
  }
  body:not(.field-expanded) .tactic-panel[open] > .tactic-body {
    top: 46px;
  }
  body:not(.field-expanded) .field-panel .board-wrap {
    padding: 5px;
  }
  body:not(.field-expanded) .field-panel .bench {
    padding-block: 3px;
  }
  body:not(.field-expanded) .field-panel .bench-content {
    padding-bottom: 5px;
  }
  body:not(.field-expanded) .field-panel .bench-token,
  body:not(.field-expanded) .field-panel .bench-seat {
    min-height: 32px;
  }
}
/* Entre 1100 et 1500 px, la barre du terrain est serrée : résumé de tactique un peu plus petit. */
@media (min-width: 1100px) and (max-width: 1500px) {
  body:not(.field-expanded) .tactic-summary strong {
    font-size: 15px;
  }
  body:not(.field-expanded) .tactic-thumb {
    width: 40px;
    height: 26px;
  }
}

/* --- Navigation du téléphone (8 octobre 2026) : la barre du bas choisit le mode (Avant-match,
   Après-match, Tournoi, data-main-view) ; dans l’avant-match, ce sélecteur choisit l’écran. --- */
.prematch-tabs {
  display: none;
}
/* Le titre de la barre du terrain ne sert qu’en Grand écran (« GRAND ÉCRAN ») : ailleurs, pas de sur-titre. */
body:not(.field-expanded) .field-toolbar .section-label {
  display: none;
}
@media (max-width: 760px) {
  body:not(.field-expanded) .prematch-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin: 0 0 14px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
  }
  .prematch-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font: 800 italic 15px/1 var(--display);
    text-transform: uppercase;
  }
  .prematch-tabs button.active {
    background: var(--lime);
    color: var(--accent-ink);
  }
  .prematch-tabs .tab-count {
    min-width: 20px;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--soft);
    color: var(--lime);
    font: 800 italic 12px/1 var(--display);
  }
  .prematch-tabs button.active .tab-count {
    background: var(--accent-ink);
    color: var(--lime);
  }
  .mobile-tabs button span {
    white-space: nowrap;
  }
}

/* --- Quoi de neuf (8 octobre 2026) --- */
#whatsnew-dialog .dialog-heading h2 {
  font: 800 italic 30px/1 var(--display);
  text-transform: uppercase;
}
.wn-list {
  display: grid;
  gap: 22px;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wn-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.wn-version {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 4px;
  background: var(--lime);
  color: var(--accent-ink);
  font: 800 italic 17px/1 var(--display);
  transform: skewX(-8deg);
}
.wn-date {
  color: var(--muted);
  font-size: 13px;
}
.wn-items {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wn-items li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
}
.wn-items li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--lime);
  transform: skewX(-12deg);
}
#whatsnew-dialog .form-actions {
  margin-top: 22px;
}