/* Live football pitch — js/livepitch.js. Prefix lp-.
   Colours: the --pitch-* tokens in style.css :root; team colours arrive as
   --lp-home / --lp-away (inline, from the feed's kits). Sizes scale with the
   pitch's own width (cqw), so phone and desktop rail read the same. */

.lp {
    --lp-tilt: 64deg;
    --lp-cam-x: 0%;
    --lp-cam-y: 0%;
    --lp-cam-s: 1;
    --lp-home: var(--pitch-post);
    --lp-away: var(--accent-red);
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    background: var(--pitch-stadium);
    color: var(--text-primary);
    font-family: var(--font-body);
    user-select: none;
    -webkit-user-select: none;
}

/* Per-side colour, picked by a -home / -away class on any element. */
.lp [class*="-home"] { --lp-team: var(--lp-home); }
.lp [class*="-away"] { --lp-team: var(--lp-away); }

.lp-stage {
    position: relative;
    aspect-ratio: 450 / 222;
    overflow: hidden;
}

/* ---- stands ------------------------------------------------------------ */
.lp-stands {
    position: absolute;
    inset: 0 0 30% 0;
    overflow: hidden;
}
.lp-crowd {
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    background-size: auto 46%;
    /* the bowl: the crowd fades into the dark at the pitch end */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 70%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 70%, transparent 100%);
}
/* Each end of the ground in its team's colour. Multiply keeps a white kit's
   crowd grey and a red one's red. */
.lp-stands::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 55% at 50% 100%, var(--pitch-light-in), transparent 70%),
        linear-gradient(to bottom, var(--pitch-roof) 0, transparent 38%);
    pointer-events: none;
}
.lp-crowd-tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--lp-home) 0, var(--lp-home) 42%, transparent 50%, var(--lp-away) 58%, var(--lp-away) 100%);
    mix-blend-mode: multiply;
    opacity: 0.85;
}
/* The roof: a dark band with a lit curved edge. */
.lp-roof {
    position: absolute;
    left: -15%;
    right: -15%;
    top: -78%;
    height: 100%;
    border-radius: 50%;
    background: var(--pitch-roof);
    border-bottom: 1px solid var(--pitch-roof-edge);
    box-shadow: 0 0.8cqw 3cqw var(--pitch-shadow);
}

/* ---- camera + plane -------------------------------------------------- */
.lp-cam {
    position: absolute;
    inset: 0;
    perspective: 64cqw;
    perspective-origin: 50% 22%;
}
.lp-plane {
    position: absolute;
    left: 50%;
    top: 71%;
    width: 96%;
    aspect-ratio: 1130 / 760;
    transform-style: preserve-3d;
    /* The camera moves in the pitch's own plane (the last translate), so the
       point it follows slides toward the middle of the picture with the
       perspective intact, then scales in. */
    transform:
        translate(-50%, -50%)
        scale(var(--lp-cam-s))
        rotateX(var(--lp-tilt))
        translate(var(--lp-cam-x), var(--lp-cam-y));
    transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lp-field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.lp-grass        { fill: var(--pitch-grass); }
.lp-grass-stripe { fill: var(--pitch-grass-stripe); }
.lp-light-in     { stop-color: var(--pitch-light-in); }
.lp-light-out    { stop-color: var(--pitch-light-out); }
.lp-line         { fill: none; stroke: var(--pitch-line); stroke-width: 5; }
.lp-spot         { fill: var(--pitch-line); }

/* Possession wash */
.lp-stop-home { stop-color: var(--lp-home); }
.lp-stop-away { stop-color: var(--lp-away); }
.lp-poss {
    transition: d 0.45s ease-out, opacity 0.3s;
    mix-blend-mode: hard-light;
}
.lp-poss-l0 { opacity: 0.30; }
.lp-poss-l1 { opacity: 0.46; }
.lp-poss-l2 { opacity: 0.62; }

/* Set-piece cone: three wedges, the outer ones fainter, breathing outward */
.lp-cone-w  { fill: var(--lp-team); transform-box: view-box; }
.lp-cone-w1 { opacity: 0.85; }
.lp-cone-w2 { opacity: 0.55; }
.lp-cone-w3 { opacity: 0.32; animation: lp-cone-breathe 1.6s ease-in-out infinite; }
@keyframes lp-cone-breathe {
    0%, 100% { opacity: 0.32; }
    50%      { opacity: 0.12; }
}

.lp-shot-line {
    stroke: var(--lp-team);
    stroke-width: 5;
    stroke-dasharray: 14 10;
    stroke-linecap: round;
    animation: lp-shot-draw 0.7s ease-out both;
}
@keyframes lp-shot-draw {
    from { stroke-dashoffset: 300; opacity: 0; }
    to   { stroke-dashoffset: 0;   opacity: 1; }
}

/* ---- things standing on the plane --------------------------------------
   An element laid in the plane is stood up with rotateX(-90deg) about its
   bottom edge; rotateZ first turns the end boards / goals to run along the
   goal line. Field box: x 40..1090 of 1130, y 40..720 of 760. */
.lp-board,
.lp-goal { position: absolute; transform-style: preserve-3d; }

.lp-board {
    --lp-board-h: 4.2%;          /* of the plane's height */
    height: var(--lp-board-h);
    overflow: hidden;
    background: var(--pitch-board-bg);
    color: var(--pitch-board-ink);
    font-weight: 800;
    font-size: 1.8cqw;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.lp-board-far {
    left: 2%;
    width: 96%;
    top: calc(2.6% - var(--lp-board-h));
    transform-origin: 50% 100%;
    transform: rotateX(-90deg);
}
/* End boards: 680 field units long = 60.18% of the plane's width. */
.lp-board-end {
    width: 64%;
    transform-origin: 0 100%;
}
.lp-board-l {
    left: 1.2%;
    top: calc(97.4% - var(--lp-board-h));
    transform: rotateZ(-90deg) rotateX(-90deg);
}
.lp-board-r {
    left: 98.8%;
    top: calc(2.6% - var(--lp-board-h));
    transform: rotateZ(90deg) rotateX(-90deg);
}
.lp-board-track {
    display: flex;
    width: max-content;
    animation: lp-board-scroll 28s linear infinite;
}
.lp-board-run {
    display: flex;
    align-items: center;
    gap: 3cqw;
    padding-right: 3cqw;
}
.lp-board-run span { color: var(--pitch-board-copy); letter-spacing: 0.02em; }
.lp-board-logo { height: 2.2cqw; width: auto; display: block; }
@keyframes lp-board-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.lp-board-flash { display: none; }
.lp-flash .lp-board-track { visibility: hidden; }
.lp-flash .lp-board-flash {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--pitch-flash-bg);
    color: var(--pitch-flash-ink);
    font-style: italic;
    text-transform: uppercase;
    animation: lp-board-blink 0.5s steps(1, end) 6;
}
.lp-flash-away .lp-board-flash { background: var(--lp-away); color: var(--pitch-flash-bg); }
.lp-flash-home .lp-board-flash { background: var(--lp-home); color: var(--pitch-flash-ink); }
.lp-flash-home[data-home-ink="light"] .lp-board-flash { color: var(--pitch-flash-bg); }
.lp-flash-away[data-away-ink="dark"] .lp-board-flash { color: var(--pitch-flash-ink); }
@keyframes lp-board-blink {
    50% { filter: brightness(0.55); }
}

/* Goals: mouth 73.2 units = 6.48% of the plane's width, 2 m deep = 1.77%;
   drawn taller than life so they read at this size. The goal lines sit at
   x 3.54% / 96.46%, the posts at y 45.18% / 54.82%. */
.lp-goal {
    --lp-goal-h: 4.6%;
    width: 6.5%;
    height: var(--lp-goal-h);
    transform-origin: 0 100%;
}
.lp-goal svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lp-goal-l.lp-goal-front { left: 3.54%;  top: calc(54.82% - var(--lp-goal-h)); transform: rotateZ(-90deg) rotateX(-90deg); }
.lp-goal-l.lp-goal-back  { left: 1.77%;  top: calc(54.82% - var(--lp-goal-h)); transform: rotateZ(-90deg) rotateX(-90deg); --lp-goal-h: 3.8%; }
.lp-goal-r.lp-goal-front { left: 96.46%; top: calc(45.18% - var(--lp-goal-h)); transform: rotateZ(90deg) rotateX(-90deg); }
.lp-goal-r.lp-goal-back  { left: 98.23%; top: calc(45.18% - var(--lp-goal-h)); transform: rotateZ(90deg) rotateX(-90deg); --lp-goal-h: 3.8%; }
/* Side nets run along the pitch, from the goal line back. */
.lp-goal-side { width: 1.77%; transform-origin: 50% 100%; transform: rotateX(-90deg); --lp-goal-h: 4.2%; }
.lp-goal-l.lp-goal-side { left: 1.77%; }
.lp-goal-r.lp-goal-side { left: 96.46%; }
.lp-goal-side-a { top: calc(45.18% - var(--lp-goal-h)); }
.lp-goal-side-b { top: calc(54.82% - var(--lp-goal-h)); }
.lp-net  { fill: none; stroke: var(--pitch-net); stroke-width: 0.6px; vector-effect: non-scaling-stroke; }
.lp-net-edge { fill: none; stroke: var(--pitch-net); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.lp-post { fill: none; stroke: var(--pitch-post); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }

/* Ball: sits on the plane, its sprite turned back up to face the camera. */
.lp-ball {
    position: absolute;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transition-property: left, top;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 3;
}
.lp-ball-up {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    transform: rotateX(calc(-1 * var(--lp-tilt)));
}
.lp-ball-sprite {
    position: absolute;
    left: -1.1cqw;
    top: -2.2cqw;
    width: 2.2cqw;
    height: 2.2cqw;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--pitch-ball) 0 45%, var(--text-muted) 100%);
    box-shadow: 0 0.3cqw 0.6cqw var(--pitch-shadow);
}
.lp-tag {
    position: absolute;
    left: 0;
    bottom: 3.4cqw;
    transform: translateX(-50%);
    padding: 0.5cqw 1.8cqw;
    background: var(--lp-team, var(--pitch-flash-bg));
    color: var(--pitch-flash-ink);
    font-size: 2.6cqw;
    font-weight: 800;
    font-style: italic;
    white-space: nowrap;
    border-radius: 0.6cqw;
    box-shadow: 0 0.4cqw 1cqw var(--pitch-shadow);
}
.lp-tag::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -0.9cqw;
    border: 0.9cqw solid transparent;
    border-top-color: var(--lp-team, var(--pitch-flash-bg));
    border-bottom: 0;
}
.lp[data-home-ink="light"] .lp-tag.lp-tag-home,
.lp[data-away-ink="light"] .lp-tag.lp-tag-away { color: var(--pitch-flash-bg); }

/* Ring on the grass under the ball. */
.lp-target {
    position: absolute;
    width: 3.2%;
    aspect-ratio: 1;
    margin: -1.6% 0 0 -1.6%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lp-team) 45%, transparent);
    border: 0.35cqw solid var(--lp-team);
    transition: left 0.45s ease-out, top 0.45s ease-out;
}
.lp-target-pulse { animation: lp-target-pulse 1.1s ease-out infinite; }
@keyframes lp-target-pulse {
    0%   { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* ---- overlays on the picture (outside the camera) ---------------------- */
.lp-clock {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    min-width: 17cqw;
    padding: 0.7cqw 3.5cqw;
    background: var(--pitch-chrome);
    color: var(--pitch-clock-ink);
    font-size: 3.2cqw;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    z-index: 4;
}

.lp-card-host,
.lp-wipe-host {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}
.lp-card-host {
    display: grid;
    place-items: center;
}
.lp-card {
    display: flex;
    align-items: center;
    gap: 3.4cqw;
    min-width: 46%;
    max-width: 72%;
    padding: 4cqw 4.5cqw 4cqw 4cqw;
    background: linear-gradient(170deg, var(--pitch-card-top), var(--pitch-card-bottom));
    border-bottom: 0.5cqw solid var(--lp-team, var(--pitch-line));
    box-shadow: 0 1.2cqw 4cqw var(--pitch-shadow);
    animation: lp-card-in 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.lp-card-neutral { --lp-team: var(--pitch-clock-ink); }
.lp-card-out { animation: lp-card-out 0.3s ease-in both; }
@keyframes lp-card-in {
    from { opacity: 0; transform: translateY(3cqw) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes lp-card-out {
    to { opacity: 0; transform: translateY(-2cqw); }
}
.lp-card-ico {
    flex: none;
    width: 9cqw;
    display: grid;
    place-items: center;
}
.lp-card-ico svg { width: 100%; height: auto; display: block; }
.lp-card-title {
    font-size: 4cqw;
    line-height: 1.05;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
}
.lp-card-sub {
    margin-top: 1.2cqw;
    font-size: 3cqw;
    font-weight: 700;
    color: var(--pitch-card-sub);
}
/* card icons */
.lp-ic-card {
    display: block;
    width: 5.4cqw;
    height: 7.6cqw;
    border-radius: 0.5cqw;
    box-shadow: 0 0.3cqw 0.8cqw var(--pitch-shadow);
}
.lp-ic-yellow { background: var(--pitch-card-yellow); }
.lp-ic-red    { background: var(--pitch-card-red); }
.lp-ic-var {
    font-size: 3.4cqw;
    font-weight: 900;
    font-style: italic;
    padding: 0.8cqw 1.2cqw;
    border: 0.4cqw solid currentColor;
}
.lp-ic-net    { fill: none; stroke: var(--pitch-net); stroke-width: 0.8; }
.lp-ic-frame  { fill: none; stroke: var(--pitch-post); stroke-width: 2; }
.lp-ic-ball   { fill: var(--pitch-ball); }
.lp-ic-flag   { fill: var(--pitch-card-yellow); }
.lp-ic-in     { fill: var(--accent-teal-light); }
.lp-ic-out    { fill: var(--accent-red); }
.lp-ic-cross  { fill: var(--accent-red); }
.lp-ic-x      { stroke: var(--accent-red); stroke-width: 3; stroke-linecap: round; }
.lp-ic-whistle{ fill: var(--pitch-post); }
.lp-ic-hole   { fill: var(--pitch-card-bottom); }

/* Goal / penalty: a sweep across the whole picture in the team colour. */
.lp-wipe {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--lp-team) 22%, var(--pitch-wipe-base)),
        color-mix(in srgb, var(--lp-team) 40%, var(--pitch-wipe-base)));
    animation: lp-wipe-cover var(--lp-wipe-ms) cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.lp-wipe-away { animation-name: lp-wipe-cover-rtl; }
@keyframes lp-wipe-cover {
    0%   { clip-path: inset(0 100% 0 0); }
    14%  { clip-path: inset(0 0 0 0); }
    86%  { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 0 100%); }
}
@keyframes lp-wipe-cover-rtl {
    0%   { clip-path: inset(0 0 0 100%); }
    14%  { clip-path: inset(0 0 0 0); }
    86%  { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 100% 0 0); }
}
.lp-wipe-chevrons i {
    position: absolute;
    top: 50%;
    width: 60cqw;
    height: 60cqw;
    margin-top: -30cqw;
    border-top: 0.45cqw solid color-mix(in srgb, var(--lp-team) 70%, var(--pitch-post));
    border-right: 0.45cqw solid color-mix(in srgb, var(--lp-team) 70%, var(--pitch-post));
    transform: rotate(45deg);
    opacity: 0.55;
    animation: lp-wipe-chevron var(--lp-wipe-ms) linear both;
}
.lp-wipe-chevrons i:nth-child(1) { left: -46cqw; opacity: 0.9; }
.lp-wipe-chevrons i:nth-child(2) { left: -34cqw; opacity: 0.6; }
.lp-wipe-chevrons i:nth-child(3) { left: -22cqw; opacity: 0.4; }
.lp-wipe-chevrons i:nth-child(4) { left: -10cqw; opacity: 0.25; }
@keyframes lp-wipe-chevron {
    from { translate: 0 0; }
    to   { translate: 60cqw 0; }
}
.lp-wipe-away .lp-wipe-chevrons { transform: scaleX(-1); height: 100%; }
.lp-wipe-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: right;
    transform: translate(-60%, -50%);
    animation: lp-wipe-drift var(--lp-wipe-ms) linear both;
}
.lp-wipe-away .lp-wipe-txt { text-align: left; transform: translate(-40%, -50%); animation-name: lp-wipe-drift-rtl; }
@keyframes lp-wipe-drift     { from { translate: -14cqw 0; } to { translate: 10cqw 0; } }
@keyframes lp-wipe-drift-rtl { from { translate: 14cqw 0; }  to { translate: -10cqw 0; } }
.lp-wipe-title {
    font-size: 11cqw;
    line-height: 1;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
}
.lp-wipe-sub {
    margin-top: 1cqw;
    font-size: 4.6cqw;
    font-weight: 800;
    font-style: italic;
    white-space: nowrap;
}

/* ---- caption row under the picture ------------------------------------- */
.lp-info {
    position: relative;
    height: max(40px, 10.4cqw);
    background: linear-gradient(to bottom, var(--pitch-info-top), var(--pitch-info-bottom));
    border-top: 1px solid var(--border-subtle);
    overflow: hidden;
}
.lp-info-block {
    position: absolute;
    top: 50%;
    left: var(--lp-info-x, 50%);
    display: flex;
    align-items: center;
    gap: 2cqw;
    max-width: 62%;
    transition: left 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lp-info-block[hidden] { display: none; }
.lp-info-home { flex-direction: row-reverse; text-align: right; transform: translate(-100%, -50%); }
.lp-info-away { transform: translate(0, -50%); }
.lp-info-centre { transform: translate(-50%, -50%); text-align: center; }
.lp-info-centre .lp-info-bar { display: none; }
.lp-info-bar {
    flex: none;
    width: 0.6cqw;
    min-width: 2px;
    height: max(30px, 7.6cqw);
    background: var(--lp-team, var(--text-muted));
}
.lp-info-txt { min-width: 0; }
.lp-info-top {
    font-size: max(11px, 2.9cqw);
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lp-info-ev {
    font-size: max(12px, 3.3cqw);
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
    .lp-plane, .lp-ball, .lp-target, .lp-info-block, .lp-poss { transition: none; }
    .lp-board-track, .lp-cone-w3, .lp-target-pulse, .lp-shot-line,
    .lp-wipe-chevrons i, .lp-wipe-txt, .lp-flash .lp-board-flash { animation: none; }
    .lp-card, .lp-card-out { animation-duration: 0.01ms; }
}