.field-diagram-stage {
  --board-surround: #e2eadc;
  --board-grass-light: #619d68;
  --board-grass-dark: #347953;
  --board-clay-light: #d9ad7e;
  --board-clay-dark: #bd865b;
  --board-track: #bb9974;
  background: var(--board-surround);
}

:root[data-theme="dark"] .field-diagram-stage {
  --board-surround: #142e25;
  --board-grass-light: #47855b;
  --board-grass-dark: #266647;
  --board-clay-light: #c29b6f;
  --board-clay-dark: #a77850;
  --board-track: #987b59;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field-diagram-stage {
    --board-surround: #142e25;
    --board-grass-light: #47855b;
    --board-grass-dark: #266647;
    --board-clay-light: #c29b6f;
    --board-clay-dark: #a77850;
    --board-track: #987b59;
  }
}

.field-diagram {
  --route-defender: #f7e7ab;
  --route-runner: #ff8a7b;
  --route-ball: #fffdf1;
  display: block;
  isolation: isolate;
  shape-rendering: geometricPrecision;
}

.field-landscape,
.field-arrow-layer,
.field-player-token,
.field-ball-figure {
  pointer-events: none;
}

.field-diagram .field-surface { fill: var(--board-surround); }
.field-grass-stop-light { stop-color: var(--board-grass-light); }
.field-grass-stop-dark { stop-color: var(--board-grass-dark); }
.field-clay-stop-light { stop-color: var(--board-clay-light); }
.field-clay-stop-dark { stop-color: var(--board-clay-dark); }

.field-diagram .field-outfield-fill,
.field-diagram .field-infield-grass {
  fill: var(--field-grass-paint);
}

.field-mowing-band { fill: rgb(233 247 186 / 9%); }
.field-mowing-edge { stroke: rgb(16 69 41 / 8%); stroke-width: 0.12; }
.field-warning-track { fill: none; stroke: var(--board-track); stroke-width: 4.5; }
.field-track-rake { fill: none; stroke: rgb(67 53 36 / 15%); stroke-width: 3.8; stroke-dasharray: 0.12 0.65; }

.field-diagram .field-infield {
  fill: var(--field-clay-paint);
  stroke: rgb(31 69 42 / 48%);
  stroke-width: 0.36;
  stroke-linejoin: round;
}

.field-diagram .field-infield-grass {
  stroke: rgb(41 85 41 / 30%);
  stroke-width: 0.28;
  stroke-linejoin: round;
}

.field-grain-light { fill: rgb(255 241 207 / 44%); }
.field-grain-dark { fill: rgb(98 64 36 / 24%); }
.field-grain-rake { stroke: rgb(255 240 199 / 20%); stroke-width: 0.08; }
.field-diagram .field-plate-dirt { fill: var(--field-clay-paint); }

.field-diagram .field-mound {
  fill: var(--field-clay-paint);
  stroke: rgb(243 212 163 / 45%);
  stroke-width: 0.25;
}

.field-mound-contour { fill: none; stroke: rgb(111 72 41 / 24%); stroke-width: 0.25; }

.field-diagram .field-outfield-wall {
  stroke: #153f34;
  stroke-width: 1.15;
  stroke-linecap: round;
}

.field-wall-cap { fill: none; stroke: #a6b595; stroke-width: 0.25; }
.field-wall-panels { fill: none; stroke: rgb(222 235 180 / 23%); stroke-width: 0.65; stroke-dasharray: 0.15 3.4; }
.field-foul-pole { fill: #f6d77e; stroke: #665b2c; stroke-width: 0.15; }

.field-diagram .field-base,
.field-diagram .field-home,
.field-diagram .field-rubber {
  fill: var(--field-base-paint);
  stroke: #78785d;
  stroke-width: 0.16;
  stroke-linejoin: round;
  filter: drop-shadow(0 0.22px 0.14px rgb(35 48 33 / 35%));
}

.field-batters-box {
  fill: none;
  stroke: rgb(255 249 223 / 68%);
  stroke-width: 0.17;
  stroke-linecap: square;
}

.field-diagram .field-actor-hit-area {
  fill: transparent;
  pointer-events: all;
}

.field-actor-shadow { fill: rgb(7 29 24 / 28%); }
.field-actor-anchor { fill: #fffae6; stroke: #1d4837; stroke-width: 0.2; }
.field-actor-badge { pointer-events: all; }

.field-actor-leader {
  stroke: #fff2cb;
  stroke-width: 0.3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 0.2px #173f32);
  pointer-events: none;
  opacity: 0;
}

.field-actor.is-displaced .field-actor-leader { opacity: 1; }

.field-diagram .field-actor-marker {
  vector-effect: none;
  transition: fill 160ms ease, stroke 160ms ease;
}

.field-diagram .field-actor--defender .field-actor-marker {
  fill: #193b47;
  stroke: #d2e6d4;
  stroke-width: 0.3;
}

.field-diagram .field-actor-label {
  fill: #fffced;
  font-family: "Nunito Sans", "Trebuchet MS", sans-serif;
  font-size: 2.7px;
  font-weight: 900;
  letter-spacing: -0.07px;
  text-anchor: middle;
  pointer-events: none;
}

.field-token-rim {
  fill: none;
  stroke: rgb(255 255 255 / 26%);
  stroke-width: 0.18;
  stroke-linecap: round;
}

.field-actor-selection {
  fill: rgb(255 215 119 / 12%);
  stroke: #ffdc82;
  stroke-width: 0.3;
  opacity: 0;
  transition: opacity 160ms ease;
}

.field-actor-active-dot {
  fill: #ffe09a;
  stroke: #284b3e;
  stroke-width: 0.23;
  opacity: 0;
}

.field-diagram .field-actor--defender.is-active .field-actor-marker {
  fill: #e5edd2;
  stroke: #1c4539;
  transform: none;
}

.field-diagram .field-actor--defender.is-active .field-actor-label { fill: #173c30; }
.field-actor.is-active .field-actor-active-dot { opacity: 1; }

.field-diagram .field-actor--defender.is-selected .field-actor-marker {
  fill: #ffd579;
  stroke: #284d38;
}

.field-diagram .field-actor--defender.is-selected .field-actor-label { fill: #193b2e; }
.field-actor.is-selected .field-actor-selection,
.field-actor:hover .field-actor-selection,
.field-actor:focus-visible .field-actor-selection { opacity: 1; }
.field-actor:focus-visible .field-actor-selection { stroke: #ffffff; stroke-width: 0.5; }

.field-diagram .field-actor--runner .field-actor-marker {
  fill: #c54c45;
  stroke: #ffdbba;
  stroke-width: 0.3;
}

.field-diagram .field-actor--runner .field-actor-selection { stroke: #ffb396; }
.field-diagram .field-actor--runner .field-actor-active-dot { opacity: 0; }
.field-diagram .field-actor--runner .field-token-rim { stroke: rgb(255 223 188 / 32%); }

.field-ball-halo {
  fill: rgb(255 238 164 / 18%);
  stroke: rgb(255 239 186 / 64%);
  stroke-width: 0.16;
}

.field-diagram .field-actor--ball .field-actor-marker {
  fill: var(--field-ball-paint);
  stroke: #7a6048;
  stroke-width: 0.18;
}

.field-diagram .field-ball-seam,
.field-ball-stitches {
  fill: none;
  stroke: #b65043;
  stroke-width: 0.1;
  stroke-linecap: round;
}

.field-ball-stitches { stroke-width: 0.085; }
.field-ball-glint { fill: #ffffff; }
.field-actor--ball:focus-visible .field-ball-halo { stroke: #ffffff; stroke-width: 0.45; }

.field-diagram .field-actor-tooltip-box {
  fill: #122e29;
  stroke: rgb(255 244 210 / 30%);
  stroke-width: 0.16;
}

.field-actor-tooltip-tip { fill: #122e29; }
.field-diagram .field-actor-tooltip-text { fill: #fffae7; font-size: 1.85px; font-weight: 800; }
.field-diagram .field-actor.is-selected .field-actor-tooltip { opacity: 0; }
.field-diagram .field-actor:hover .field-actor-tooltip,
.field-diagram .field-actor:focus .field-actor-tooltip { opacity: 1; }

.field-diagram .field-movement {
  --route-color: var(--route-defender);
  opacity: 0.65;
}

.field-diagram .field-movement[data-movement-type="runner"] { --route-color: var(--route-runner); }
.field-diagram .field-movement.is-ball-path { --route-color: var(--route-ball); opacity: 0.96; }
.field-diagram .field-movement.is-highlighted { opacity: 1; }

.field-diagram .field-arrow-underlay {
  stroke: #173f32;
  stroke-width: 1.1;
  stroke-linecap: round;
  opacity: 0.65;
}

.field-diagram .field-arrow {
  stroke: var(--route-color);
  stroke-width: 0.47;
  stroke-linecap: round;
  opacity: 1;
}

.field-diagram .field-movement[data-movement-type="runner"] .field-arrow { stroke-dasharray: 1.15 0.8; }
.field-diagram .field-movement.is-ball-path .field-arrow { stroke-width: 0.4; }
.field-arrowhead--defender { fill: var(--route-defender); }
.field-arrowhead--runner { fill: var(--route-runner); }
.field-arrowhead--ball { fill: var(--route-ball); }

.field-diagram .field-movement.is-highlighted .field-arrow {
  stroke: var(--route-color);
  stroke-width: 0.65;
}

.field-diagram .field-movement.is-highlighted .field-arrow-underlay { stroke-width: 1.25; opacity: 0.9; }

.field-diagram .field-target {
  fill: none;
  stroke: var(--route-color);
  stroke-width: 0.22;
  opacity: 0.55;
}

.field-diagram .field-movement.is-highlighted .field-target {
  fill: rgb(255 230 169 / 10%);
  stroke: var(--route-color);
  stroke-width: 0.3;
  opacity: 1;
  r: 1.65;
}

.field-diagram .field-target-label {
  fill: #fff8dc;
  stroke: #153d2f;
  stroke-width: 0.75;
  stroke-linejoin: round;
  font-size: 2.35px;
  font-weight: 800;
}

.field-diagram .field-movement.is-highlighted .field-target-label { opacity: 0; }
.field-diagram .field-movement.is-inspected .field-target-label { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .field-diagram *,
  .field-diagram *::before,
  .field-diagram *::after {
    animation: none !important;
    transition: none !important;
  }
}