@import url("../../cosmos/lessons/style.css");

/* ───────────────────────────────────────────────────────────────
   足球的逻辑 / soccer track  (The Logic of Football — Space & Time)
   Part of the 运动 · 球类的逻辑 group (sibling of basketball & baseball).
   Reuses the cosmos component sheet verbatim (which itself @imports the
   shared RL base sheet and defines kicker / source-note / takeaway /
   position-grid / lesson-flow / mini-flow / trade-table / toc-grid /
   widget / kpi-grid / dist-canvas).  All interactive widgets use the
   standard .widget shell + .primary buttons + range inputs and draw the
   pitch / players procedurally onto a .dist-canvas — no images, no video.
   Only a couple of sport-specific helpers are added below.
   ─────────────────────────────────────────────────────────────── */

/* A green pitch canvas — same sizing contract as .dist-canvas but tinted
   like grass so soccer widgets read at a glance. Optional; widgets may
   also just use .dist-canvas. */
.pitch-canvas {
  width: 100%;
  display: block;
  border-radius: 10px;
  margin-top: 12px;
  background: #0a1f12;            /* deep grass at night */
  border: 1px solid rgba(120, 200, 150, 0.18);
}

/* Small inline colour key used under several pitch widgets. */
.key-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-mute); }
.key-row .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }