/*
  The stadium behind the Block motion studies: a floodlit night match from
  the main camera, drawn rather than photographed so no real ground, club or
  sponsor appears on the site. Laid out in 1920x1080 stage pixels.

  To use a photograph instead, give `.stadium` a `background-image` and hide
  its children; nothing else depends on them.
*/
.stadium { position: absolute; inset: 0; overflow: hidden; background: #070A11; }
.stadium > * { position: absolute; left: 0; right: 0; }

/* Roof and the dark sky under it. */
.st-roof {
  top: 0; height: 70px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 3px, transparent 3px 172px),
    linear-gradient(180deg, #05070C 0%, #0D121D 70%, #161C2A 100%);
}

/* The crowd: colour noise, which never repeats the way a dot pattern does,
   so it stays a crowd at every size instead of turning into a weave. */
.st-stand {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27256%27%20height%3D%27256%27%3E%3Cfilter%20id%3D%27c%27%3E%3CfeTurbulence%20type%3D%27turbulence%27%20baseFrequency%3D%27.62%20.9%27%20numOctaves%3D%272%27%20seed%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%271.5%20.25%20.1%200%20-.32%20%20.2%201.25%20.25%200%20-.3%20%20.15%20.3%201.6%200%20-.34%20%200%200%200%200%201%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27256%27%20height%3D%27256%27%20filter%3D%27url(%23c)%27%2F%3E%3C%2Fsvg%3E") 0 0 / 256px 256px, #1A1F2D;
  filter: blur(.8px) brightness(.62) saturate(.9);
}
/* Clumps of light and dark, so the crowd reads as people and not a weave. */
.st-stand::before {
  content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27400%27 height=%27200%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.035 .09%27 numOctaves=%273%27 seed=%277%27/%3E%3CfeColorMatrix values=%270 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3%27/%3E%3C/filter%3E%3Crect width=%27400%27 height=%27200%27 filter=%27url(%23n)%27/%3E%3C/svg%3E") 0 0 / 400px 200px;
}
.st-stand::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,12,.70) 0%, rgba(5,7,12,.15) 55%, rgba(5,7,12,.35) 100%);
}
.st-upper { top: 70px; height: 132px; }
/* The lower tier is nearer the camera, so its people are larger. */
.st-lower {
  top: 224px; height: 108px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27256%27%20height%3D%27256%27%3E%3Cfilter%20id%3D%27c%27%3E%3CfeTurbulence%20type%3D%27turbulence%27%20baseFrequency%3D%27.42%20.62%27%20numOctaves%3D%272%27%20seed%3D%2711%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%271.5%20.25%20.1%200%20-.32%20%20.2%201.25%20.25%200%20-.3%20%20.15%20.3%201.6%200%20-.34%20%200%200%200%200%201%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27256%27%20height%3D%27256%27%20filter%3D%27url(%23c)%27%2F%3E%3C%2Fsvg%3E") 0 0 / 300px 300px, #1A1F2D;
  filter: blur(.9px) brightness(.7) saturate(.9);
}

/* The executive boxes between the tiers, lit from inside. */
.st-boxes {
  top: 202px; height: 22px;
  background:
    linear-gradient(180deg, transparent 6px, rgba(255,214,150,.55) 6px 15px, transparent 15px) 0 0 / 46px 100% repeat-x,
    #0B0F17;
  box-shadow: 0 0 40px rgba(255,200,120,.12);
  filter: blur(.6px);
}
.st-boxes::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 30px, #0B0F17 30px 46px);
}

/* LED boards on the far touchline: abstract colour, never a brand. */
.st-boards {
  top: 332px; height: 40px; display: flex;
  border-top: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 0 46px rgba(90,150,255,.22);
  filter: blur(.5px);
}
.st-boards i { flex: 1; }
.st-boards i:nth-child(4n+1) { background: linear-gradient(90deg, #0E2D57, #1E5FB8 60%, #0E2D57); }
.st-boards i:nth-child(4n+2) { background: repeating-linear-gradient(90deg, #111521 0 22px, #2A3044 22px 26px); }
.st-boards i:nth-child(4n+3) { background: linear-gradient(90deg, #0A3F35, #13806A 55%, #0A3F35); }
.st-boards i:nth-child(4n)   { background: linear-gradient(90deg, #3A1250, #6E2A8F 50%, #3A1250); }

/* The pitch from the main camera: a gantry high on the halfway line looking
   across, projected from real dimensions by pitch.mjs into pitch.svg. Its
   boards line is fixed at 372 px, the foot of .st-boards above. */
.st-pitch { inset: 0; background: url(pitch.svg) 0 0 / 100% 100% no-repeat; }

/* Floodlights, haze over the far side, and the lens's vignette. */
.st-lights {
  inset: 0;
  background:
    radial-gradient(ellipse 30% 22% at 12% 0%, rgba(255,248,230,.30), transparent 70%),
    radial-gradient(ellipse 30% 22% at 88% 0%, rgba(255,248,230,.30), transparent 70%),
    radial-gradient(ellipse 75% 34% at 50% 42%, rgba(220,235,255,.10), transparent 70%);
  mix-blend-mode: screen;
}
.st-grade {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,12,20,.10) 0%, transparent 45%, transparent 75%, rgba(0,0,0,.22) 100%),
    radial-gradient(ellipse 80% 75% at 50% 50%, transparent 60%, rgba(0,0,0,.50) 100%);
}