/* AI CONTEXT: Shared stats styles
   PURPOSE: Read-only structure-stats markup (grouped-tuple table + per-position
            distribution) and the space-attack pitch/wings visual, shared by the
            station-4/station-3 taggers and the display page, so all surfaces
            render identical stats with one stylesheet.
   DEPENDENCIES: common.css
   PATTERNS: Component-scoped CSS */

/* ── Atak przestrzeni — pitch with two wing channels ─────────────────
   Interactive on the tagger (.wing is a <button>); the display renders the
   same classes on plain <div>s (read-only) and adds .ds-wing--lead to
   spotlight whichever side attacked more. */
.pitch {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 0.8fr 1fr;
    gap: 6px;
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
    padding: 10px;
    border: 3px solid #fff;
    border-radius: 6px;
    background:
        radial-gradient(circle at 50% 8%, transparent 30px, rgba(255,255,255,0.55) 31px, transparent 33px),
        repeating-linear-gradient(0deg, #2f8f46 0 40px, #2b8341 40px 80px);
}
/* halfway line */
.pitch::before {
    content: "";
    position: absolute;
    left: 6px; right: 6px; top: 50%;
    height: 2px;
    background: rgba(255, 255, 255, 0.55);
}
.wing {
    position: relative;
    z-index: 1;
    border: 2px dashed rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-size: 1.05em;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wing:hover  { background: rgba(255, 255, 255, 0.28); }
.wing:active { background: rgba(255, 255, 255, 0.42); }
.wing-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.wing-count {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 1.9em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1.15em;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
}
.pitch-centre {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.4em;
    pointer-events: none;
}

/* Display-only: spotlight the wing with more attacks (gold, not red/green —
   avoids clashing with the pitch's green turf / the app's win-loss colors). */
.ds-wing--lead {
    background: rgba(255, 214, 0, 0.22);
    border-color: #ffd600;
    box-shadow: 0 0 0 2px rgba(255, 214, 0, 0.35) inset;
}
.ds-wing--lead .wing-count { background: rgba(0, 0, 0, 0.6); }

/* ── Wejścia — boisko: strefy (PK/B3/B2) × sektory (SL..SP) ──────────
   The attacking half drawn as an actual pitch: opponent's goal at the top,
   penalty + goal area, arc, and the halfway line with half the centre
   circle along the bottom edge. The 5 sectors (entries.js SECTORS) are
   dashed lanes, the tagged zones dashed bands; counts float on the turf at
   each lane x band centre. Column 1 is the zone gutter (label + zone
   total), the row underneath the lane names. Band tops are set inline by
   entries_stats.js — .ds-epitch-box's height must equal its PENALTY_DEPTH. */
.ds-epitch-wrap {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 4px 8px;
    max-width: 440px;
    margin: 10px auto 0;
}
.ds-epitch-gutter { position: relative; }
.ds-epitch-zone {
    position: absolute;
    left: 0; right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.15;
}
.ds-epitch-zone-name {
    font-size: 0.9em;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #1f6b34;
}
.ds-epitch-zone-count {
    min-width: 1.9em;
    padding: 2px 8px;
    border-radius: 999px;
    background: #12241a;
    color: #fff;
    font-size: 1.15em;
    font-weight: 900;
    text-align: center;
}
/* Attack direction — under the last band, pointing at the goal. */
.ds-epitch-arrow {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    text-align: center;
    color: #2b8341;
    font-size: 1.1em;
}
.ds-epitch {
    position: relative;
    overflow: hidden;                /* clips the centre circle to a half */
    aspect-ratio: 68 / 58;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    background: repeating-linear-gradient(0deg, #2f8f46 0 34px, #2b8341 34px 68px);
}
/* Pitch markings — every one is positioned in % so the drawing scales. */
.ds-epitch-goal,
.ds-epitch-box,
.ds-epitch-goalarea,
.ds-epitch-arc,
.ds-epitch-circle,
.ds-epitch-lane,
.ds-epitch-split { position: absolute; }

.ds-epitch-goal {
    top: 0; left: 41%;
    width: 18%; height: 5px;
    background: #fff;
    border-radius: 0 0 3px 3px;
}
.ds-epitch-box {
    top: 0; left: 21%;
    width: 58%; height: 24%;        /* = PENALTY_DEPTH in entries_stats.js */
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-top: none;
    border-radius: 0 0 3px 3px;
}
.ds-epitch-goalarea {
    top: 0; left: 36.5%;
    width: 27%; height: 9%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-top: none;
}
/* The D — a half-ellipse hanging off the bottom edge of the penalty area. */
.ds-epitch-arc {
    top: 24%; left: 50%;
    width: 26%; height: 12%;
    transform: translateX(-50%);
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-top: none;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
/* Centre circle: the pitch's bottom border is the halfway line, so only the
   top half of this shows. */
.ds-epitch-circle {
    bottom: -15%; left: 50%;
    width: 32%; height: 30%;
    transform: translateX(-50%);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}
.ds-epitch-lane {
    top: 0; bottom: 0;
    border-left: 2px dashed rgba(255, 255, 255, 0.3);
}
.ds-epitch-split {
    left: 0; right: 0;
    border-top: 2px dashed rgba(255, 255, 255, 0.4);
}
/* Counts must read from across the room, on turf — hence a near-black pill
   (not translucent black, which just tints green) and a big, heavy digit. */
.ds-epitch-count {
    position: absolute;
    transform: translate(-50%, -50%);
    min-width: 2em;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: #12241a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 1.5em;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
}
/* Empty cells stay legible but recede — the eye should land on the traffic. */
.ds-epitch-count--zero {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(10, 22, 14, 0.62);
    box-shadow: none;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}
/* Better/worse than the other side (see _markCompare). Bright tints, because
   plain green/red on a dark pill over green turf is unreadable. Declared last
   so they also win over .ds-epitch-count--zero. */
.ds-epitch-up { color: #5ce68a; }
.ds-epitch-down { color: #ff7b72; }

.ds-epitch-lanes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    text-align: center;
    font-size: 0.95em;
    font-weight: 800;
    color: #1f6b34;
}

.pen-stats { margin-top: 16px; }
.pen-empty { color: #888; font-style: italic; margin: 6px 0; }

.pen-groups-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}
.pen-groups-table th,
.pen-groups-table td {
    padding: 7px 10px;
    text-align: center;
    border-bottom: 1px solid #e6e8f2;
}
.pen-groups-table thead th {
    color: #3f51b5;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid #c5cae9;
}
.pen-groups-table tbody tr:hover { background: #f3f5ff; }
.pen-num-cell { font-weight: 700; color: #1a237e; font-size: 1.1em; }
.pen-cnt { font-weight: 700; }
.pen-pct { color: #3f51b5; font-weight: 700; }
.pen-total { margin: 10px 0 0; text-align: right; color: #555; font-size: 0.9em; }

.pen-expand-col { width: 32px; padding: 0 !important; }
.pen-expand-toggle {
    border: none;
    background: none;
    cursor: pointer;
    color: #3f51b5;
    font-size: 0.95em;
    padding: 4px 8px;
}
.pen-expand-toggle:hover { color: #1a237e; }
.pen-expand-row td { padding: 8px 10px 12px; background: #fafbff; }
.pen-time-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.pen-singles {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pen-single {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.pen-single-label {
    flex: 0 0 auto;
    min-width: 100px;
    font-weight: 600;
    color: #555;
}
.pen-single-vals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pen-chip {
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef1ff;
    color: #333;
    font-size: 0.9em;
    white-space: nowrap;
}
.pen-chip b { color: #1a237e; }