/* pitch.css: the demo page stands on the same mowed pitch as the homepage.

   The homepage look chosen on 2026-09-15 (src/css/pitch.css), carried
   here with the same stripes, the same panel radius and the same chalk, so
   the site reads as one ground from page to page. The demo loads its own
   tokens, so the site's values are written out below rather than imported.

   The twist on this page is the stadium screen. The player and the
   commentary panel sit together inside one rounded screen with a dark bezel
   and a warm spill of light, standing on the grass. The streaming service's
   own bar floats above it as a rounded strip. A chalk halfway line runs
   across the pitch behind the screen at the height of the picture's centre,
   so the screen reads as standing on the halfway line. Below it, the match
   feed (summary, stats, timeline and events) are rounded panels straight on
   the grass, and a chalk line opens the feed and the foot.

   Loaded after demo.css and bar.css, and it only overrides. The player's
   picture, its 16:9 and its object fit are not touched. */

:root {
  --mow-a: var(--page-ground, #0D2111);
  --mow-b: #112818;
  --mow-h: 128px;
  --mow-chalk: color-mix(in oklab, #F2E3BB, transparent 87%);
  --mow-panel: #0B1A0E;
  --mow-raised: #122B18;
  --mow-bezel: #07130A;
  --panel-r: clamp(18px, 2vw, 30px);
  --fg: clamp(12px, 2.8vw, 48px);
}

html { background: var(--mow-a); }

body {
  background-color: var(--mow-a);
  /* The mown stripes were taken off on 2026-09-16 at the owner's word:
     the ground is one plain night green. */
  background-image: none;
}

::-webkit-scrollbar-track { background: var(--mow-a); }

/* ------------------------------------------------ the app on the grass --- */

.ott {
  --screen-gap: 8px;
  --ott-top: clamp(8px, 0.9vw, 16px);
  /* The picture and the panel fill the first screen under the two bars. The
     user asked for a player that reads as a streaming service rather than a
     demo (2026-09-16), so the screen is as tall as the view allows and the
     cap only stops it stretching on a very tall display. */
  --stage-h: clamp(440px, calc(100dvh - var(--nav-h) - 3.5rem - var(--screen-gap) - 2 * var(--ott-top) - 1.75rem), 1000px);

  position: relative;
  isolation: isolate;
  container-type: inline-size;
  max-width: none;
  margin-inline: auto;
  padding: var(--ott-top) clamp(10px, 1.1vw, 22px) 0;
  background: transparent;
}

/* The chalk halfway line, behind the screen at the centre of the picture. */
.ott::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: calc(var(--ott-top) + 3.5rem + var(--screen-gap) + var(--stage-h) / 2 - 1px);
  height: 2px;
  background: var(--mow-chalk);
  pointer-events: none;
}

/* The service's own bar, a rounded strip above the screen. */
.ottnav {
  margin-bottom: var(--screen-gap);
  border: 1px solid var(--mow-chalk);
  border-radius: var(--panel-r);
  background: var(--mow-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The screen: the picture and the panel in one rounded frame. */
.ottrow {
  overflow: clip;
  border-radius: var(--panel-r);
  background: var(--mow-panel);
  /* The spill stays tight to the bezel, so no glow sits behind the note
     under the screen. */
  box-shadow: 0 0 0 clamp(5px, 0.55vw, 8px) var(--mow-bezel), 0 0 70px -34px rgba(255, 107, 0, 0.5);
}

.panel {
  border-left: 1px solid var(--mow-chalk);
  background: var(--mow-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------------------------------------------------- the match feed --- */

.stagenote { padding: 1.125rem 0.25rem 0; }

.titlerow {
  position: relative;
  margin-top: clamp(20px, 2.4vw, 36px);
  padding: clamp(22px, 2.4vw, 32px) 0.25rem 1.25rem;
}
.titlerow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mow-chalk);
}

.insights { padding: 0.25rem 0 1.5rem; }
.events { padding: 0.5rem 0 clamp(40px, 5vw, 72px); }

.sum,
.stats,
.tl {
  border-radius: var(--panel-r);
  background: var(--mow-panel);
}
.sum { border-color: rgba(255, 107, 0, 0.28); }
.stats,
.tl { border-color: var(--mow-chalk); }

.ev {
  border-color: var(--mow-chalk);
  border-radius: 16px;
  background: var(--mow-panel);
}
.ev:hover { background: var(--mow-raised); }
.events__empty {
  border-color: var(--mow-chalk);
  border-radius: 16px;
  background: var(--mow-panel);
}
.tl__mark i { background: var(--mow-panel); }
.tl__now { border-color: var(--mow-panel); }

/* ------------------------------------------------------ short screens --- */

/* Side by side and short: the panel needs its last control row more than the
   page needs the languages strip, so the strip goes and the screen takes the
   height back. Stacked layouts scroll, so they keep the strip. */
@media (min-width: 1101px) and (max-height: 760px) {
  .ott {
    --stage-h: clamp(380px, calc(100dvh - var(--nav-h) - 3.5rem - var(--screen-gap) - 2 * var(--ott-top)), 1000px);
  }
  .langstrip { display: none; }
}

/* ---------------------------------------------------------- narrower --- */

@media (max-width: 1100px) {
  /* Stacked, the screen is as tall as its contents: a fixed height here would
     cut the panel off under the picture. */
  .ott { --stage-h: auto; }
  /* The picture stacks above the panel. The line sits at the picture's
     centre, which is half of a 16:9 box as wide as the screen. */
  .ott::before {
    top: calc(var(--ott-top) + 3.5rem + var(--screen-gap) + max(160px, 100cqw * 9 / 32) - 1px);
  }
  .panel { border-left: 0; border-top: 1px solid var(--mow-chalk); }
}

@media (max-width: 640px) {
  .ott { --stage-h: auto; }
  .ottrow { box-shadow: 0 0 0 5px var(--mow-bezel), 0 0 50px -28px rgba(255, 107, 0, 0.5); }
}

@media (max-width: 600px) {
  :root { --mow-h: 96px; --panel-r: 16px; }
}