/* field.css — the side-on field strip and the direction diagram. */

/* ── Field strip ────────────────────────────────────────────────────── */
.fs {
  display: block; width: 100%; height: auto; border-radius: var(--r-md);
  cursor: ew-resize; touch-action: none; user-select: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-sm);
}
.fs-stripe.a { fill: #3c8f50; }
.fs-stripe.b { fill: #43995a; }
:root[data-theme="dark"] .fs-stripe.a { fill: #1f5a31; }
:root[data-theme="dark"] .fs-stripe.b { fill: #236237; }
.fs-line { stroke: rgba(255,255,255,0.35); stroke-width: 2; }
.fs-line.major { stroke: rgba(255,255,255,0.7); stroke-width: 3; }
.fs-num { fill: rgba(255,255,255,0.8); font-size: 30px; font-weight: 700; text-anchor: middle; }
.fs-ez { opacity: .92; }
.fs-ez--us { fill: #e03a3e; }
.fs-ez-text { fill: #fff; font-size: 24px; font-weight: 800; letter-spacing: .1em; text-anchor: middle; dominant-baseline: middle; opacity: .92; }
.fs-los { fill: #3d9bff; }
.fs-ltg { fill: #ffd60a; }
.fs-ball-body { fill: #8a4b22; stroke: #fff; stroke-width: 2.5; }
.fs-ball-lace { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.fs-dir { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.fs:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ── Direction diagram ──────────────────────────────────────────────── */
.dd { display: block; width: 100%; height: auto; overflow: visible; }
.dd-head { fill: var(--label-3); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-anchor: middle; }
.dd-fill { transition: opacity .5s var(--ease-out); }
.dd-fill--run  { fill: var(--run); }
.dd-fill--pass { fill: var(--pass); }
.dd-pct { fill: var(--label); font-size: 24px; font-weight: 700; text-anchor: middle; dominant-baseline: central; letter-spacing: -0.02em; }
.dd-pct.on-fill { fill: #fff; }
.dd-zone { outline: none; }
.dd-zone:focus-visible rect { stroke: var(--label); stroke-width: 2; }
.dd-zone.is-top rect { filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18)); }
.dd-los { stroke: var(--label-3); stroke-width: 2; stroke-linecap: round; }