/* One pitch for every page: Kadro Kur, the elevens on Maç Haftası and the
   team page all draw Kadro Kur's grass, lines, club shirts (core/kits.js) and
   rating badge from here. A page decides only the pitch's size and how its
   players are laid out. Loaded by index.html and team.html.

   The grass is the same in both themes: it is a picture of a pitch, not a
   page surface, so it carries its own white ink. */
:root {
  --pitch-grass: #16a243;
  --pitch-grass-alt: #18b14a;
  --pitch-line: #ffffffa6;
  --pitch-line-width: 2px;
  --pitch-radius: 8px;
  --pitch-label: #c6dacb;
  --pitch-rating-bg: var(--accent);
  --pitch-rating-ink: #173c2f;
}

/* Eight stripes from goal to goal, so a half pitch shows four. */
.builder-pitch,
.team-pitch,
.matchweek-mini-pitch {
  --pitch-stripe: 12.5%;
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: var(--pitch-radius);
  color: white;
  text-shadow: 0 1px 2px #0007;
  background: repeating-linear-gradient(to top,
    var(--pitch-grass) 0, var(--pitch-grass) var(--pitch-stripe),
    var(--pitch-grass-alt) var(--pitch-stripe), var(--pitch-grass-alt) calc(2 * var(--pitch-stripe)));
}
.matchweek-mini-pitch { --pitch-stripe: 25%; }

/* Full pitch (Kadro Kur, team page): touchline, halfway line, centre circle
   and both penalty areas. */
.pitch-markings { position: absolute; inset: 18px; z-index: -1; border: var(--pitch-line-width) solid var(--pitch-line); pointer-events: none; }
.pitch-markings::before { content: ''; position: absolute; top: 50%; right: 0; left: 0; border-top: var(--pitch-line-width) solid var(--pitch-line); }
.pitch-circle { position: absolute; top: 50%; left: 50%; width: 110px; height: 110px; transform: translate(-50%, -50%); border: var(--pitch-line-width) solid var(--pitch-line); border-radius: 50%; }
.pitch-box { position: absolute; left: 22.5%; width: 55%; height: 16%; border: var(--pitch-line-width) solid var(--pitch-line); }
.pitch-box-top { top: -1px; }
.pitch-box-bottom { bottom: -1px; }

/* Half pitch (Maç Haftası's elevens). The side attacks upward, so the halfway
   line is the top edge and its own goal is at the bottom. */
.mini-pitch-markings { position: absolute; inset: 8px; z-index: 0; border: var(--pitch-line-width) solid var(--pitch-line); pointer-events: none; }
.mini-pitch-markings > span { position: absolute; left: 50%; box-sizing: border-box; border: var(--pitch-line-width) solid var(--pitch-line); }
.mini-pitch-centre-circle { top: -2px; width: 38%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); clip-path: inset(50% -4px -4px -4px); }
.mini-pitch-centre-spot { top: -2px; width: 7px; height: 7px; border: 0 !important; border-radius: 50%; background: var(--pitch-line); transform: translate(-50%, -50%); }
.mini-pitch-penalty-box { bottom: 0; width: 62%; height: 19%; border-bottom: 0 !important; transform: translateX(-50%); }
.mini-pitch-goal-box { bottom: 0; width: 30%; height: 7%; border-bottom: 0 !important; transform: translateX(-50%); }
.mini-pitch-penalty-arc { bottom: 19%; width: 24%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, 50%); clip-path: inset(-4px -4px 50% -4px); }
.mini-pitch-penalty-spot { bottom: 12.5%; width: 6px; height: 6px; border: 0 !important; border-radius: 50%; background: var(--pitch-line); transform: translate(-50%, 50%); }

/* A line's role label, above its players. */
.builder-line-label,
.pitch-line-label { display: block; min-height: 14px; margin-bottom: 4px; color: var(--pitch-label); font-size: 8px; letter-spacing: 1px; text-transform: uppercase; }

/* The player: club shirt, name, rating. */
.pitch-shirt { display: block; width: 64px; height: 72px; line-height: 0; }
.pitch-shirt svg { display: block; }
.builder-position-name,
.pitch-player-name { max-width: 100%; overflow-wrap: anywhere; font-size: 9px; font-weight: 600; line-height: 1.25; text-shadow: 0 1px 3px #102c23; }
.builder-position-rating,
.pitch-rating { padding: 1px 5px; border-radius: 3px; color: var(--pitch-rating-ink); background: var(--pitch-rating-bg); font-size: 9px; font-weight: 750; }