/* Teamazo · Terrain : un seul dessin partout (avant-match, Grand écran, vignettes) : TOUTES ses règles. */

/* ---- Terrain : un seul dessin partout (8 octobre 2026). Tracés, bandes de tonte et cages en SVG
   (drawPitch, pitchPlan) ; ici le gazon (couleur GRASS, grain, lumière), le filigrane et le nom du format,
   placés par placePitchMarks. Même rendu en avant-match et en Grand écran, qui ajoute projecteurs et ombres.
   Toutes les règles du terrain sont dans ce bloc. Ni color-mix() ni clip-path. ---- */
/* Avant le premier dessin du script (classe posée par le <head>) : le terrain du HTML (five vide) ne se montre pas. */
html.booting #pitch {
  visibility: hidden;
}
.pitch {
  border-radius: 8px;
  background-color: #2f7d3d;
  background-image:
    radial-gradient(ellipse 60% 55% at 50% 50%, #ffffff12, transparent 70%),
    var(--grass-grain, linear-gradient(transparent, transparent));
  background-size:
    auto,
    96px 96px;
  box-shadow:
    inset 0 0 0 1px #00000038,
    inset 0 0 48px #00000052;
}
.pitch-ground,
.pitch-ground .field-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
}
.pitch-ground {
  overflow: hidden;
}
.pitch-ground .field-lines {
  display: block;
}
.field-brand,
.pitch-label {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.field-brand {
  color: #ffffff21;
  font: 800 italic 20px var(--display);
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
.field-brand.has-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  opacity: 0.22;
}
.pitch-label {
  color: #e8f2e29c;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
/* Five (vert vif) et futsal (sol bleu) : fin contour sombre autour des maillots, pour qu’un maillot vert ou
   bleu se détache du sol. */
.pitch[data-surface='turf'] .player-token .jersey svg,
.pitch[data-surface='court'] .player-token .jersey svg {
  filter: drop-shadow(0 0 1.2px #000000d9) drop-shadow(0 0 0.6px #000000d9);
}
/* Maillot de la couleur du sol (vert sur gazon ou synthétique, noir sur gazon, bleu sur futsal ; kitBlends) :
   contour sombre puis liseré clair tout autour, et ombre portée. Affichage seulement. */
.pitch .player-token.kit-blend .jersey svg {
  filter: drop-shadow(0 0 0.8px #000) drop-shadow(1.4px 0 0 #f4f8f0) drop-shadow(-1.4px 0 0 #f4f8f0)
    drop-shadow(0 1.4px 0 #f4f8f0) drop-shadow(0 -1.4px 0 #f4f8f0) drop-shadow(0 3px 3px #000000a6);
}
/* Five (mur noir) et futsal (bande orange) : le nom du format est écrit sur le bord, plus franc. */
.pitch[data-surface='turf'] .pitch-label,
.pitch[data-surface='court'] .pitch-label {
  color: #ffffffd9;
}
/* Maillots lisibles sur le gazon, dans les 4 ambiances : fonds sombres et ombre portée sur les textes. */
.token-name {
  background: #0f1d14eb;
  border-color: #ffffff21;
  box-shadow: 0 1px 3px #0000005c;
}
.token-rating {
  background: #142119;
  border-color: #ffffff33;
  box-shadow: 0 1px 3px #0000005c;
}
.token-position {
  color: #f0f6ec;
  text-shadow:
    0 1px 2px #000000d9,
    0 0 5px #00000099;
}
/* Équipes nombreuses (data-crowd posé par renderTokens) : maillots un peu plus petits, pour que 11 joueurs
   tiennent sans se toucher. La grande disposition du Grand écran sur ordinateur a la place : taille normale. */
.pitch[data-crowd='l'] .player-token {
  scale: 0.9;
}
.pitch[data-crowd='xl'] .player-token {
  scale: 0.8;
}
@media (min-width: 761px) {
  .field-expanded .field-panel .pitch .player-token {
    scale: none;
  }
}
@media (max-width: 760px) {
  .pitch[data-crowd='m'] .player-token {
    scale: 0.88;
  }
  .pitch[data-crowd='l'] .player-token {
    scale: 0.84;
  }
  .pitch[data-crowd='xl'] .player-token {
    scale: 0.74;
  }
  .pitch:is([data-crowd='l'], [data-crowd='xl']) .token-name {
    max-width: 78px;
  }
}
/* Terrain trop petit pour ses maillots : taille calculée par fitTokens (toujours plus petite que ci-dessus). */
#pitch[data-fit] .player-token {
  scale: var(--token-fit);
}
/* Grand écran : le même terrain, avec projecteurs dans les coins, cadre et ombres sous les maillots. */
.field-expanded .field-panel .pitch {
  background-image:
    radial-gradient(circle at 0 0, #fff6d42e, transparent 42%),
    radial-gradient(circle at 100% 0, #fff6d42e, transparent 42%),
    radial-gradient(circle at 0 100%, #fff6d417, transparent 40%),
    radial-gradient(circle at 100% 100%, #fff6d417, transparent 40%),
    radial-gradient(ellipse 60% 55% at 50% 50%, #ffffff12, transparent 70%),
    var(--grass-grain, linear-gradient(transparent, transparent));
  background-size:
    auto,
    auto,
    auto,
    auto,
    auto,
    96px 96px;
  box-shadow:
    inset 0 0 0 1px #00000038,
    inset 0 0 70px #00000059,
    0 0 0 6px #142016,
    0 30px 90px #000000dd;
}
.field-expanded .field-panel .player-token .jersey::after {
  content: '';
  position: absolute;
  right: 14%;
  bottom: -5px;
  left: 14%;
  z-index: -1;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #0000008c, transparent);
}
/* Duel de compos et vignettes : même dessin, gazon compris dans le SVG. */
.mini-pitch {
  position: relative;
  aspect-ratio: 1.7;
  overflow: hidden;
  isolation: isolate;
  border-radius: 6px;
  background: #2f7d3d;
}
.mini-pitch > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.spot-a,
.spot-b {
  stroke: #ffffff;
  stroke-width: 0.9;
}
.spot-a {
  fill: var(--team-a-ui, #e45563);
}
.spot-b {
  fill: var(--team-b-ui, #4f8ff0);
}