.pitch {
  min-height: 590px;
  background: linear-gradient(90deg, #176b42 0 33.333%, #197448 33.333% 66.666%, #176b42 66.666%);
  border: 3px solid #dfffe3;
  border-radius: 6px;
  box-shadow: inset 0 0 38px #001b12aa, 0 10px 28px #0005;
}

.pitch::before {
  inset: 3.5% 2.5%;
  border: 2px solid #e9ffeab8;
  border-radius: 0;
}

.pitch::after {
  width: 112px;
  height: 112px;
  border-color: #e9ffeaa0;
  top: 49%;
}

.position-grid {
  position: absolute;
  z-index: 1;
  inset: 4% 2.5% 3.5%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr) .66fr .66fr;
  pointer-events: auto;
}

.position-zone {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5px;
  border-right: 1px solid #eaffdf52;
  border-bottom: 1px solid #eaffdf52;
  color: #d9ffe4a8;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 1px 3px #002b16;
  cursor: crosshair;
  transition: background .15s, box-shadow .15s;
}

.position-zone:nth-child(3n) { border-right: 0; }
.position-zone:nth-child(n+19) { border-bottom: 0; }
.position-zone.active-zone { background: #7dff9b0a; color: #f2fff5; }
.position-zone.active-zone span { background: #06351fb0; border: 1px solid #bfffc65e; border-radius: 5px; padding: 2px 8px; }
.position-zone:hover, .position-zone.zone-compatible { background: #55ff8c24; box-shadow: inset 0 0 0 2px #b5ffc1a8; }
.position-zone.zone-incompatible { background: #7e22303d; }
.position-zone.blank-zone { background: #0d522f38; pointer-events: none; cursor: default; }
.position-zone span { pointer-events: none; }

.pitch-slot {
  width: 86px;
  min-height: 58px;
  border-radius: 8px;
  background: #07301fd6;
  border: 1px dashed #d9ffeda8;
  cursor: grab;
}

.pitch-slot:active { cursor: grabbing; }
.pitch-slot.filled { background: #052718b8; border: 1px solid #bafec75e; }
.pitch-slot .player-token { width: 82px; }
.pitch-slot .player-token .shirt { width: 31px; height: 34px; }
.pitch-slot .player-token .token-name { font-size: 9px; }
.pitch-slot .empty-hint { color: #d2ffe1; }

@media (max-width: 760px) {
  .pitch { min-height: 540px; }
  .pitch-slot { width: 76px; min-height: 54px; }
  .pitch-slot .player-token { width: 72px; }
  .position-zone { font-size: 11px; }
}