/* Lonida match centre.
   Single visual world: gold on near-black, taken from the Lonida crest. This screen is
   watched, not read, so type is large and spacing is generous — it has to hold up on a
   phone in someone's hand and on a TV across a room. */

:root {
  --ink: #0b0b0c;
  --ink-2: #121215;
  --line: #24242a;
  --fog: #8b8b93;
  --paper: #f2f1ec;
  --gold: #c9a227;
  --gold-lit: #f2dd8c;
  --gold-dim: #6b5a1c;
  --live: #35c06a;
  --card-y: #f2c744;
  --card-r: #d8443a;

  --shell: min(1180px, 100vw - 2.5rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--ink);
  color: var(--paper);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  /* A faint pitch-light glow from above, so the black isn't flat. */
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(201,162,39,.13), transparent 60%),
    var(--ink);
  min-height: 100dvh;
}

/* ── Screens ─────────────────────────────────────────────────────────────── */

.screen { display: none; min-height: 100dvh; }
.screen.is-active { display: block; }

.stage {
  width: var(--shell);
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4.5rem) 0 3.5rem;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vh, 3rem);
}

.stage-head { text-align: center; display: flex; flex-direction: column; gap: .9rem; align-items: center; }

.eyebrow {
  margin: 0;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
}

.headline {
  margin: 0;
  font-size: clamp(1.5rem, 4.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.lede { margin: 0; color: var(--fog); max-width: 44ch; }

.kickoff-at { margin: 0; color: var(--fog); font-size: .85rem; }

.recording-prep {
  margin: .8rem auto 0;
  width: fit-content;
  max-width: min(92vw, 44rem);
  padding: .55rem .9rem;
  border: 1px solid rgba(217, 169, 35, .28);
  border-radius: 999px;
  background: rgba(217, 169, 35, .08);
  color: var(--gold-lit);
  font-size: clamp(.68rem, 1.8vw, .8rem);
  font-weight: 700;
  letter-spacing: .03em;
  text-align: center;
}

.stage-foot { display: flex; justify-content: center; }

.code-chip {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fog);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .5rem 1rem;
}
.code-chip b { color: var(--gold); letter-spacing: .2em; }

/* ── Countdown ───────────────────────────────────────────────────────────── */

.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(.4rem, 1.6vw, 1rem);
  font-variant-numeric: tabular-nums;
}

.countdown[hidden] { display: none !important; }

.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  min-width: clamp(3.6rem, 11vw, 6rem);
}

.cd-num {
  font-size: clamp(2.4rem, 9vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(180deg, var(--gold-lit), var(--gold) 55%, var(--gold-dim));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cd-lbl {
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fog);
}

.cd-sep {
  font-size: clamp(1.6rem, 6vw, 3rem);
  line-height: 1.15;
  color: var(--gold-dim);
  padding-top: .1em;
}

/* ── Versus block ────────────────────────────────────────────────────────── */

.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(.75rem, 3vw, 2.5rem);
}

.vs-club { display: flex; flex-direction: column; align-items: center; gap: .85rem; text-align: center; }
.vs-club--home { align-items: center; }

/* Every crest sits on this. Clubs upload their own, so they arrive as transparent PNGs,
   square badges, and logos with a white background baked in — and on a dark page that
   last kind looks like a bug rather than a badge. One shared disc makes all of them read
   as a set. Sizes are set by the modifier classes below; this owns everything else. */
.crest-disc {
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  /* Inner rim so a pale or white-backed logo still has a visible edge against the disc. */
  box-shadow: 0 6px 18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.12);
  /* Never let a flex parent squash the circle into an oval. */
  flex: none;
}

/* Inset rather than filling the disc, so a square logo's corners clear the curve instead
   of being clipped by it. */
.crest-disc > img {
  display: block;
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.crest-initials { font-weight: 800; letter-spacing: .02em; line-height: 1; }

.crest { width: clamp(64px, 16vw, 120px); height: clamp(64px, 16vw, 120px); }
.crest .crest-initials { font-size: clamp(1.4rem, 4.5vw, 2.4rem); }

.vs-name {
  font-size: clamp(.95rem, 2.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
}
/* Wherever a club is named — the countdown and the full-time report — the name opens
   that club's profile. Underlined on hover only, so these screens still read as
   broadcast graphics rather than pages of links. */
.club-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.club-link:hover,
.club-link:focus-visible { color: var(--gold-lit); border-bottom-color: var(--gold-dim); }

.vs-meta { margin: 0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); }

.vs-mark {
  font-size: clamp(.75rem, 2.4vw, 1rem);
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  padding: .5rem .85rem;
}

/* ── Lineups (upcoming screen) ───────────────────────────────────────────── */

.lineups { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .lineups { grid-template-columns: 1fr 1fr; } }

.lineup {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: linear-gradient(180deg, var(--ink-2), transparent 60%);
  padding: 1.1rem 1.1rem 1.25rem;
}

.lineup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .8rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid var(--line);
}
.lineup-club { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .95rem; }
/* At this size the disc's drop shadow would only muddy the row, so it is dropped and the
   rim alone separates the crest from the panel behind it. */
.crest-xs { width: 26px; height: 26px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.crest-xs .crest-initials { font-size: .6rem; }
.formation-chip {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  color: var(--gold); border: 1px solid var(--gold-dim);
  border-radius: 999px; padding: .3rem .6rem;
}

.player-row {
  display: grid;
  grid-template-columns: 1.9rem 1fr auto;
  align-items: center;
  gap: .7rem;
  padding: .38rem 0;
  font-size: .87rem;
}
.player-num {
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  font-weight: 800;
  text-align: right;
  font-size: .78rem;
}
.player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-pos {
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fog); border: 1px solid var(--line); border-radius: 4px; padding: .16rem .34rem;
}
.lineup-bench-title {
  margin: .85rem 0 .25rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
  color: var(--gold);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.player-row--bench { opacity: .82; padding-block: .28rem; }

/* ── Build-up ────────────────────────────────────────────────────────────── */

.buildup-stage {
  height: 100dvh;
  display: grid;
  place-items: center;
  position: relative;
  padding: clamp(1rem, 2.5vh, 1.75rem) clamp(.85rem, 2vw, 1.5rem) clamp(1.25rem, 3vh, 2rem);
  overflow: hidden;
}

.buildup-phase { display: none; width: var(--shell); min-height: 0; }
.buildup-phase.is-on { display: block; animation: rise .7s var(--ease) both; }

/* The club intro stays a centred card; the team sheet takes the whole stage. Scoped to
   the line-up phase so widening one does not stretch the other. */
[data-buildup-lineups] { width: 100%; }
[data-buildup-lineups].is-on { align-self: stretch; justify-self: stretch; min-height: 0; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.intro-clubs { display: flex; flex-direction: column; gap: 1rem; }

.intro-club {
  position: relative;
  border-radius: 1.1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: clamp(120px, 20vh, 190px);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.2rem clamp(1.1rem, 4vw, 2.2rem);
  animation: rise .8s var(--ease) both;
}
.intro-club:nth-child(2) { animation-delay: .18s; }

/* Banners are treated as texture, not content: a club banner often already carries the
   club's name, and at full strength it fights the overlaid title and reads as a
   double-exposure. Low opacity plus a heavy scrim keeps it atmospheric. */
.intro-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .28;
  filter: saturate(.85) blur(1px);
}
.intro-scrim { position: absolute; inset: 0; }
.intro-body { position: relative; display: flex; align-items: center; gap: 1.1rem; }
.intro-crest { width: clamp(52px, 11vw, 88px); height: clamp(52px, 11vw, 88px); }
.intro-crest .crest-initials { font-size: clamp(1.1rem, 3.4vw, 1.8rem); }
.intro-name { margin: 0; font-size: clamp(1.15rem, 4vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; }
.intro-sub { margin: .2rem 0 0; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.intro-tag { text-align: center; margin: 1.4rem 0 0; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--fog); }

/* ── Team sheet ──────────────────────────────────────────────────────────────
   One club at a time, filling the screen. Both elevens on a single pitch diagram meant
   twenty-two names at a size nobody could read on a phone; here each side gets the
   whole stage, laid out in its formation with the detail a supporter actually wants —
   who is playing, where, and how good they are. */

.teamsheet { position: relative; width: 100%; height: 100%; min-height: 0; }

.ts-panel { display: none; }
.ts-panel.is-on {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.6rem, 1.8vh, 1.1rem);
  /* Fills the stage rather than sitting in it. A team sheet is the only thing on screen
     for its twenty-odd seconds, so anything it leaves empty is wasted. */
  height: 100%;
  min-height: 0;
}

.ts-bench {
  width: min(100%, 760px);
  display: flex;
  align-items: center;
  gap: .7rem;
  flex: none;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: rgba(11, 11, 12, .88);
}
.ts-bench-label {
  color: var(--gold);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  flex: none;
}
.ts-bench-list { display: flex; gap: .38rem; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.ts-bench-player {
  flex: none;
  padding: .28rem .48rem;
  border-radius: 999px;
  background: var(--ink-2);
  color: var(--paper);
  font-size: .62rem;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .ts-bench { align-items: flex-start; flex-direction: column; gap: .35rem; }
}

.ts-head {
  display: flex;
  align-items: center;
  flex: none;
  /* Sits over the pitch rather than over the page, so the crest, the club and the board
     below read as one graphic. Roughly the width the pitch comes out at on a desktop. */
  width: min(100%, 560px);
  gap: clamp(.75rem, 2vw, 1.25rem);
  padding-bottom: clamp(.5rem, 1.4vh, .9rem);
  /* The club's own colour, so each sheet is unmistakably theirs without repainting
     the whole screen and losing the Lonida ground. */
  border-bottom: 2px solid var(--club, var(--gold));
  animation: rise .55s var(--ease) both;
}

.crest-md { width: clamp(46px, 8vw, 68px); height: clamp(46px, 8vw, 68px); }
.crest-md .crest-initials { font-size: clamp(.9rem, 2.4vw, 1.35rem); }

.ts-identity { flex: 1; min-width: 0; }
.ts-club {
  margin: 0;
  font-size: clamp(1.15rem, 3.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-sub {
  margin: .2rem 0 0;
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* The squad rating, given the weight of a scoreline — it is the number two sets of
   supporters will compare first. */
.ts-overall { text-align: center; flex: none; line-height: 1; }
.ts-overall-value {
  display: block;
  font-size: clamp(1.9rem, 6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--gold-lit), var(--gold) 60%, var(--gold-dim));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ts-overall-label {
  display: block;
  margin-top: .3rem;
  font-size: .55rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fog);
}

/* The pitch.

   Fills the height the header leaves and keeps a real pitch's proportions, drawn keeper
   at the foot and attacking up the screen — the way a line-up is put up on television.

   Deep green rather than the bright green of a printed team sheet — this screen lives in
   a gold-on-near-black world, and a saturated pitch here would light up the room and make
   everything around it look grey. */
.ts-pitch {
  position: relative;
  /* Fills the height it is given and takes its width from that, so the pitch keeps its
     real proportions and is centred with the ground either side — the way a line-up
     graphic is put up on television. Filling the width instead stretched a portrait pitch
     across a monitor and the shape stopped reading as a pitch at all. */
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: 740 / 1020;
  width: auto;
  max-width: 100%;
  border-radius: clamp(.6rem, 2vw, 1rem);
  overflow: hidden;
  background:
    /* Floodlight from above, so the turf has a direction to it. */
    radial-gradient(120% 65% at 50% 0%, rgba(255,255,255,.12), transparent 62%),
    /* Mown stripes: the groundsman's bands, the cheapest possible cue that this is a
       real pitch rather than a green rectangle. */
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.035) 0 8.333%,
      rgba(0,0,0,.045) 8.333% 16.666%
    ),
    linear-gradient(180deg, #17512a 0%, #103d20 55%, #0b2d18 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 90px rgba(0,0,0,.5),
    0 24px 60px rgba(0,0,0,.55);
  animation: rise .6s var(--ease) both;
  animation-delay: .1s;
}


.ts-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Real pitch paint is never pure white under floodlight, and a hard white here fights
     the player discs for attention. */
  opacity: .9;
}

.ts-board { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }

.ts-token {
  position: absolute;
  /* left/top are the slot; the translate re-centres the token on it, so a disc sits ON
     its position rather than hanging below and to the right of it. */
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .22rem;
  width: max-content;
  animation: token-in .5s var(--ease) both;
  animation-delay: var(--delay, 0ms);
}

/* Rises into its slot rather than fading in place, so the eleven walks out from the back
   instead of materialising. The end state has to repeat the centring translate, or the
   token would snap half a disc-width when the animation finishes. */
@keyframes token-in {
  from { opacity: 0; transform: translate(-50%, -28%) scale(.82); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Built from the same parts as a row on the countdown screen: a gold squad number on the
   Lonida ground, the name plain beside it, the position in a bordered chip. The club's
   colour is a ring rather than a fill — a fill made every disc a different brightness and
   half of them unreadable, and the ring identifies the side just as well. */
.ts-disc {
  position: relative;
  /* Held by whichever of the two runs out first. The board is tall on a phone and short
     on a laptop, and sizing off one axis alone gives absurd discs on the other. */
  width: clamp(32px, min(8.5vw, 5.2vh), 52px);
  height: clamp(32px, min(8.5vw, 5.2vh), 52px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--ink-2), rgba(11,11,12,.94));
  color: var(--gold);
  font-weight: 800;
  font-size: clamp(.75rem, min(2.2vw, 1.4vh), 1.05rem);
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 0 2px var(--club, var(--gold-dim)),
    0 6px 16px rgba(0,0,0,.6);
}

/* Gold rather than the club's colour: a rating is a number to be read, and half the
   clubs on the platform play in something too dark to show up against this ground. */
.ts-rating {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .18rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  font-size: .56rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}

/* Both labels sit on their own scrim. A name in plain white over a mown stripe is
   legible on the dark bands and gone on the light ones. */
.ts-token-name {
  max-width: 11ch;
  padding: .12rem .42rem;
  border-radius: 5px;
  background: rgba(11, 11, 12, .82);
  color: var(--paper);
  font-size: clamp(.58rem, 1.7vw, .72rem);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* The same chip the countdown screen puts a position in, given a ground of its own so it
   survives the grass behind it. */
.ts-token-pos {
  font-size: clamp(.46rem, 1.2vw, .58rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fog);
  background: rgba(11, 11, 12, .78);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .1rem .3rem;
}

@media (max-width: 560px) {
  /* Four defenders across a phone-width pitch leaves about nine characters a man — which
     covers most surnames outright rather than clipping them to "Char…". */
  .ts-token-name { max-width: 9ch; }
  .ts-token-pos { display: none; }
}

.buildup-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.07);
}
.buildup-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-dim), var(--gold-lit)); }

/* ── Live ────────────────────────────────────────────────────────────────── */

.game-shell {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: #000;
  overflow: hidden;
  touch-action: manipulation;
}
#unity-canvas { width: 100%; height: 100%; display: block; }
.mobile-landscape { display: none; }

/* Authoritative recorded playback is isolated from the local Unity canvas. */
.recording-player {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  place-items: center;
  color: var(--paper);
  background:
    radial-gradient(circle at 50% 35%, rgba(43, 37, 17, .34), transparent 45%),
    #050506;
}
.game-shell.is-recording .recording-player { display: grid; }
.game-shell.is-recording #unity-canvas,
.game-shell.is-recording .match-sound,
.game-shell.is-recording .mobile-landscape,
.game-shell.is-recording .game-loading,
.game-shell.is-recording .subboard {
  display: none !important;
}
.recording-is-active .match-sound { display: none !important; }
.recording-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.recording-player.has-playable-media .recording-video { opacity: 1; }
.recording-state {
  position: relative;
  z-index: 12;
  width: min(92vw, 32rem);
  padding: clamp(1rem, 3vw, 1.6rem);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 1rem;
  background: rgba(8,8,10,.9);
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.58);
  text-align: center;
  backdrop-filter: blur(10px);
  transition: opacity .2s ease, visibility .2s ease;
}
.recording-state h2 {
  margin: .25rem 0 .45rem;
  color: var(--paper);
  font-size: clamp(1.2rem, 4vw, 2rem);
}
.recording-state p:last-child {
  margin: 0;
  color: var(--fog);
  font-size: clamp(.78rem, 2.5vw, .95rem);
  line-height: 1.5;
}
.recording-state.is-error { border-color: rgba(239,68,68,.55); }
.recording-state.is-error .eyebrow { color: #fca5a5; }
.recording-state.is-finalizing { border-color: rgba(201,162,39,.55); }
.recording-state.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.recording-entry {
  position: absolute;
  z-index: 14;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  column-gap: .65rem;
  min-width: min(18rem, calc(100% - 2rem));
  padding: .72rem 1.15rem;
  border: 1px solid rgba(242,221,140,.5);
  border-radius: 999px;
  background: rgba(8,8,10,.84);
  box-shadow: 0 .8rem 2.5rem rgba(0,0,0,.5);
  backdrop-filter: blur(9px);
  color: var(--paper);
  font: inherit;
  cursor: pointer;
  transform: translateX(-50%);
}
.recording-entry[hidden] { display: none; }
.recording-entry:hover { background: rgba(18,17,12,.92); }
.recording-entry:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 2px;
}
.recording-entry-icon {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  color: #171206;
  background: linear-gradient(180deg, var(--gold-lit), var(--gold));
  font-size: .82rem;
}
.recording-entry strong { font-size: .86rem; line-height: 1.05; text-align: left; }
.recording-entry small { color: var(--fog); font-size: .63rem; line-height: 1; text-align: left; }

.match-sound {
  position: fixed;
  z-index: 31;
  top: max(.7rem, env(safe-area-inset-top));
  right: max(.7rem, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  min-height: 2.35rem;
  padding: .48rem .68rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: var(--paper);
  background: rgba(8,8,10,.78);
  box-shadow: 0 7px 20px rgba(0,0,0,.36);
  backdrop-filter: blur(7px);
  font: 700 .7rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
}
.match-sound:hover { border-color: rgba(242,221,140,.56); }
.match-sound:focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 3px; }
.match-sound [data-sound-icon] {
  display: grid;
  place-items: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 .28rem;
  border-radius: 999px;
  background: rgba(201,162,39,.2);
  color: var(--gold-lit);
  font-size: .56rem;
}
.match-sound.is-muted [data-sound-icon] {
  background: rgba(255,255,255,.08);
  color: var(--fog);
}
.match-sound.is-locked { border-style: dashed; }

.asset-credit {
  position: fixed;
  z-index: 80;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(7px, env(safe-area-inset-bottom));
  max-width: min(92vw, 620px);
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 5px;
  background: rgba(4, 12, 20, .72);
  color: rgba(255, 255, 255, .68);
  font-size: 10px;
  line-height: 1.25;
  text-align: right;
  backdrop-filter: blur(4px);
}

.asset-credit a {
  color: rgba(255, 255, 255, .86);
  text-decoration-color: rgba(255, 255, 255, .38);
}

.asset-credit a:hover,
.asset-credit a:focus-visible {
  color: #fff;
  text-decoration-color: currentColor;
}

@media (orientation: portrait) and (max-width: 700px) {
  .mobile-landscape {
    position: absolute; inset: 0; z-index: 40000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .45rem; border: 0; color: #fff; background: rgba(5, 7, 12, .94);
    font: inherit; text-align: center; cursor: pointer;
  }
  .mobile-landscape-icon { font-size: 3.3rem; line-height: 1; color: var(--gold-lit); }
  .mobile-landscape strong { font-size: 1.15rem; letter-spacing: .04em; }
  .mobile-landscape small { color: var(--fog); }
  .mobile-landscape.is-gone { display: none; }
  .match-sound { visibility: hidden; }
  .mobile-landscape.is-gone ~ .match-sound { visibility: visible; }
}

@media (orientation: landscape) and (max-height: 700px) {
  body.match-is-live, .screen[data-screen="live"], .game-shell {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .mobile-landscape { display: none; }
  .match-sound {
    top: max(.45rem, env(safe-area-inset-top));
    right: max(.45rem, env(safe-area-inset-right));
    min-height: 2rem;
    padding: .36rem .55rem;
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  .recording-video { object-fit: contain; }
  .recording-entry {
    inset: 0;
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: rgba(5,7,12,.9);
    transform: none;
    align-content: center;
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  .game-shell.is-recording .recording-player { display: grid; }
  .game-shell.is-recording .mobile-landscape { display: none !important; }
}

/* ── Substitution board ───────────────────────────────────────────────────────
   The fourth official's board, held over the match while a change is made. Bottom left
   rather than centre: it has to be readable without hiding the football, and the ball is
   almost never in that corner. */

.subboard {
  position: absolute;
  left: clamp(.75rem, 2.5vw, 2rem);
  bottom: clamp(.75rem, 2.5vh, 2rem);
  /* Never eats a click meant for the game underneath. */
  pointer-events: none;
  z-index: 5;
}

.sb-card {
  min-width: min(300px, 72vw);
  padding: .7rem .9rem .8rem;
  border-radius: .7rem;
  border: 1px solid rgba(255,255,255,.14);
  /* The club's colour down the edge, the way a board carries the team's strip. */
  border-left: 4px solid var(--club, var(--gold));
  background: linear-gradient(180deg, rgba(14,14,17,.95), rgba(8,8,10,.95));
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px rgba(0,0,0,.7);
  /* Slides up from the touchline. Transformed rather than animated on opacity alone so
     the arrival reads as a board being raised. */
  opacity: 0;
  transform: translateY(14px) scale(.97);
  transition: opacity .38s var(--ease), transform .38s var(--ease);
}
.sb-card.is-up { opacity: 1; transform: none; }

.sb-head {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding-bottom: .5rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.sb-club {
  flex: 1;
  min-width: 0;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fog);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-minute {
  font-size: .72rem;
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.sb-row { display: flex; align-items: center; gap: .5rem; padding: .16rem 0; }
.sb-arrow { font-size: .7rem; line-height: 1; }
.sb-row--on .sb-arrow { color: var(--live); }
.sb-row--off .sb-arrow { color: var(--card-r); }

/* Tabular so the two numbers line up under each other however many digits they have. */
.sb-num {
  min-width: 1.5rem;
  font-size: .78rem;
  font-weight: 800;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sb-name {
  font-size: .84rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The player leaving is stated but not dwelt on — the eye should land on who is arriving. */
.sb-row--off .sb-name, .sb-row--off .sb-num { color: var(--fog); font-weight: 500; }

/* Halftime takes over the picture while Unity is paused, using the same visual language
   as the pre-match countdown rather than introducing a separate ad-player skin. */
.halftime {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(5,5,7,.9);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.halftime.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.halftime-card {
  width: min(900px, 100%);
  display: grid;
  justify-items: center;
  gap: clamp(.7rem, 2vh, 1.1rem);
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(18,18,21,.98), rgba(8,8,10,.98));
  box-shadow: 0 24px 70px rgba(0,0,0,.72);
  margin: auto;
  max-height: 100%;
  min-height: 0;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  height: 100%;
}
.halftime-title { margin: 0; font-size: clamp(1.5rem, 4vw, 2.5rem); }
.halftime-countdown { display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.halftime-countdown .cd-num { font-size: clamp(2rem, 7vw, 3.8rem); }
.halftime-player {
  position: relative;
  width: min(760px, 100%, calc((100dvh - 12rem) * 16 / 9));
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  align-self: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: .7rem;
  background: #000;
  border: 1px solid rgba(255,255,255,.12);
}
.halftime-player:empty { display: none; }
.halftime-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.halftime-player-guard { position: absolute; inset: 0; z-index: 2; background: transparent; }
.halftime-next { margin: 0; color: var(--fog); font-size: .75rem; text-align: center; }

@media (max-height: 560px) {
  .halftime { place-items: start center; padding: .5rem; }
  .halftime-card { gap: .35rem; padding: .55rem; }
  .halftime-title { font-size: 1rem; }
  .halftime-countdown .cd-num { font-size: 1.55rem; }
  .halftime-player { width: min(680px, 100%, calc((100dvh - 7.5rem) * 16 / 9)); }
}

.match-stats { grid-column: 1 / -1; }
.stat-row {
  display: grid;
  grid-template-columns: minmax(3rem, 1fr) minmax(10rem, 2fr) minmax(3rem, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .72rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.stat-row:last-child { border-bottom: 0; }
.stat-row strong:first-child { text-align: left; }
.stat-row strong:last-child { text-align: right; }
.stat-row span { color: var(--muted); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .sb-card { transition: opacity .38s var(--ease); transform: none; }
}

.game-loading {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: 1rem;
  background: var(--ink);
  transition: opacity .6s var(--ease);
}
.game-loading.is-gone { opacity: 0; pointer-events: none; }

/* ── Full-time report ────────────────────────────────────────────────────── */

.scoreline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(.75rem, 3vw, 2rem); width: 100%; }
.sl-club { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.sl-name { margin: 0; font-size: clamp(.9rem, 2.4vw, 1.3rem); font-weight: 700; }
.sl-score {
  font-size: clamp(2.6rem, 11vw, 5rem);
  font-weight: 800;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: clamp(.5rem, 2vw, 1.2rem);
}
.sl-dash { color: var(--gold-dim); }
.sl-winner { color: var(--gold-lit); }

.match-replay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid rgba(201,162,39,.32);
  border-radius: 1rem;
  background:
    radial-gradient(120% 160% at 100% 0, rgba(201,162,39,.14), transparent 56%),
    linear-gradient(180deg, rgba(25,23,17,.94), rgba(13,13,15,.96));
  box-shadow: 0 18px 48px rgba(0,0,0,.26);
}
.match-replay[hidden], .match-replay-player[hidden], .match-replay-actions[hidden] { display: none !important; }
.match-replay-actions [hidden] { display: none !important; }
.match-replay-copy h2 { margin: .35rem 0 .35rem; font-size: clamp(1.15rem, 3vw, 1.55rem); }
.match-replay-copy > p:last-child { margin: 0; color: var(--fog); font-size: .8rem; line-height: 1.5; }
.match-replay-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.replay-action {
  min-height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .72rem 1rem;
  border: 1px solid rgba(201,162,39,.48);
  border-radius: .75rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.replay-action:hover, .replay-action:focus-visible { transform: translateY(-1px); border-color: var(--gold-lit); }
.replay-action--primary { color: #171206; background: linear-gradient(180deg, var(--gold-lit), var(--gold)); }
.replay-action--download { color: var(--gold-lit); background: rgba(201,162,39,.08); }
.match-replay-player { grid-column: 1 / -1; overflow: hidden; border: 1px solid var(--line); border-radius: .85rem; background: #000; }
.match-replay-player video { display: block; width: 100%; max-height: min(72vh, 760px); aspect-ratio: 16 / 9; background: #000; }

@media (max-width: 680px) {
  .match-replay { grid-template-columns: 1fr; }
  .match-replay-actions { display: grid; grid-template-columns: 1fr; justify-content: stretch; }
  .replay-action { width: 100%; }
}

.report { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .report { grid-template-columns: 1.2fr .8fr; } }

.card {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: linear-gradient(180deg, var(--ink-2), transparent 70%);
  padding: 1.15rem;
}
.card-title { margin: 0 0 .9rem; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }

.event-row { display: grid; grid-template-columns: 3rem 1.4rem 1fr; align-items: center; gap: .7rem; padding: .42rem 0; font-size: .9rem; }
.event-min { font-variant-numeric: tabular-nums; color: var(--fog); font-size: .78rem; }
.event-side { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fog); }

.poss-bar { height: 10px; border-radius: 999px; overflow: hidden; display: flex; border: 1px solid var(--line); }
.poss-bar i { display: block; height: 100%; }
.poss-legend { display: flex; justify-content: space-between; margin-top: .55rem; font-size: .8rem; font-variant-numeric: tabular-nums; }

.motm { display: flex; align-items: center; gap: .9rem; }
.motm-badge {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--gold-lit), var(--gold-dim));
  color: #1a1408; font-weight: 800; font-size: .95rem;
}
.motm-badge--contributions { font-size: .72rem; flex-shrink: 0; }
.motm-name { margin: 0; font-weight: 700; }
.motm-meta { margin: .15rem 0 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fog); }

.empty { color: var(--fog); font-size: .85rem; margin: 0; }

/* ── Loader ──────────────────────────────────────────────────────────────── */

.loader { min-height: 100dvh; display: grid; place-items: center; gap: 1rem; align-content: center; }
.loader-ring {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(201,162,39,.22);
  border-top-color: var(--gold);
  animation: spin 1s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text { margin: 0; text-align: center; color: var(--fog); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; }

.panel { width: var(--shell); margin: 0 auto; min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: .9rem; text-align: center; }
.panel--narrow { max-width: 34rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.commentary-panel {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 32;
  display: flex;
  gap: 8px;
  max-width: calc(100% - 36px);
}

.commentary-panel[hidden], .commentary-live[hidden] { display: none !important; }

.commentator {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 174px;
  padding: 7px 11px 7px 7px;
  border: 1px solid rgba(230, 182, 55, .35);
  border-radius: 999px;
  color: #fff;
  background: rgba(5, 10, 13, .82);
  backdrop-filter: blur(10px);
}

.commentator > span:last-child { display: grid; line-height: 1.1; }
.commentator strong { font-size: 12px; }
.commentator small { margin-top: 3px; color: #d7b95a; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }

.commentator-avatar {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border-radius: 50%;
  color: #0a0d0c;
  background: #e3b735 center/cover no-repeat;
  font-size: 10px;
  font-weight: 900;
}

.commentary-live {
  position: fixed;
  left: 50%;
  bottom: 84px;
  z-index: 33;
  width: min(620px, calc(100% - 32px));
  transform: translateX(-50%);
  padding: 10px 16px;
  border-left: 3px solid #e3b735;
  border-radius: 8px;
  color: #f8f6ef;
  background: rgba(4, 8, 10, .86);
  box-shadow: 0 10px 35px rgba(0, 0, 0, .3);
  backdrop-filter: blur(10px);
}

.commentary-live strong { display: block; margin-bottom: 3px; color: #e3b735; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.commentary-live span { font-size: 14px; line-height: 1.35; }

body:not([data-match-screen="buildup"]):not([data-match-screen="live"]) .match-sound,
body:not([data-match-screen="buildup"]):not([data-match-screen="live"]) .commentary-panel,
body:not([data-match-screen="buildup"]):not([data-match-screen="live"]) .commentary-live {
  display: none !important;
}

@media (max-width: 700px) {
  .commentary-panel { left: 8px; bottom: 8px; gap: 5px; }
  .commentator { min-width: 0; padding: 5px 8px 5px 5px; }
  .commentator-avatar { width: 26px; height: 26px; flex-basis: 26px; }
  .commentator strong { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .commentator small { display: none; }
  .commentary-live { bottom: 53px; padding: 8px 11px; }
  .commentary-live span { font-size: 12px; }
}


/*
 * Match rail: a permanent icon-and-label strip, matching the account sidebar.
 *
 * Not a drawer. It is on screen from load and the pitch is inset to make room for it, rather than
 * the menu floating over the football - a control you have to summon is one nobody uses mid-match,
 * and one that covers the pitch is worse than none.
 *
 * 80px matches the account sidebar's w-20 so the two areas of the product feel like one. Labels
 * are larger and heavier than the account rail's 7px, because this is read at a glance while
 * something is happening on the pitch rather than studied.
 */
:root { --match-rail: 80px; }
.match-menu-collapsed { --match-rail: 0px; }
.match-menu-toggle {
  position: fixed; top: 12px; left: 18px; z-index: 41;
  width: 44px; height: 44px; border: 1px solid #45525b; border-radius: 10px;
  background: #0d1419; color: #ffe19c; font-size: 24px; cursor: pointer;
}
.match-menu-toggle:focus-visible { outline: 2px solid #ffe19c; outline-offset: 2px; }
.match-rail[hidden] { display: none; }

.match-rail {
  position: fixed; inset-block: 0; left: 0; z-index: 40;
  width: var(--match-rail);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  justify-content: safe center;
  padding: 64px 0 10px;
  background: #0d1419; border-right: 1px solid #26313b;
  overflow-y: auto;
}

.match-rail-list { list-style: none; margin: 0; padding: 0 6px; }
.match-rail-list[hidden] { display: none; }
.match-rail-rule { height: 1px; margin: 8px 6px; background: #26313b; }

.match-rail button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; padding: 10px 2px 8px; border: 0; border-radius: 10px;
  background: none; color: #c9d5de; cursor: pointer;
  font: inherit; text-align: center;
}
.match-rail button:hover { background: #17212a; color: #ffe19c; }
.match-rail button:focus-visible { outline: 2px solid #ffe19c; outline-offset: -2px; }

.match-rail svg {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* The name: bold, uppercase, and allowed a second line rather than being clipped. */
.match-rail span {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.15; color: inherit;
}

/* Current setting, dimmer than the name so the two do not compete. */
.match-rail small {
  font-size: 9px; font-weight: 600; letter-spacing: .02em;
  line-height: 1.1; color: #7f8f9c;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/*
 * The pitch gives up the space. Insetting the shell rather than overlaying the rail means the
 * canvas is genuinely narrower, so nothing on it is ever hidden behind the menu.
 */
.screen[data-screen="live"] { min-height: 0; height: auto; }
html:has(.screen[data-screen="live"].is-active),
body:has(.screen[data-screen="live"].is-active) { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.screen:not([data-screen="live"]) { margin-left: var(--match-rail); width: calc(100% - var(--match-rail)); }
.game-shell { isolation: isolate; margin-left: var(--match-rail); width: calc(100% - var(--match-rail)); height: calc(100dvh - var(--local-testbar-height, 0px)); }
.local-simulation-bar { margin-left: var(--match-rail); width: calc(100% - var(--match-rail)); }
.match-menu-collapsed .local-simulation-bar { padding-left: 72px !important; }

/* Phones: the rail lies along the bottom, where a thumb is, and the pitch keeps its width. */
@media (max-width: 640px) {
  :root { --match-rail: 0px; }
  .match-rail {
    inset: auto 0 0 0; width: 100%; height: 62px;
    flex-direction: row; justify-content: space-around; gap: 0;
    padding: 0; border-right: 0; border-top: 1px solid #26313b;
  }
  .match-rail-list { display: flex; flex: 1; padding: 0; }
  .match-rail-list li { flex: 1; }
  .match-rail-list, .match-rail-list li { min-width: 0; }
  .match-rail-list { flex: 1 1 0; }
  .match-rail-list[data-menu-manager] { flex-grow: 0.67; }
  .match-rail-rule { display: none; }
  .match-rail button { padding: 8px 2px; height: 100%; justify-content: center; }
  .match-rail small { display: none; }
  .game-shell { margin-left: 0; width: 100%; height: calc(100dvh - 62px - var(--local-testbar-height, 0px)); }
  .match-menu-collapsed .local-simulation-bar { padding-left: 16px !important; }
  .match-menu-toggle { top: auto; bottom: 72px; left: 10px; }
  .match-menu-collapsed .match-menu-toggle { bottom: 10px; }
  .match-menu-collapsed .game-shell { height: calc(100dvh - var(--local-testbar-height, 0px)); }
}

/* A recording pass captures the football, not the furniture. */
.game-shell.is-recording ~ .match-rail,
.recording-is-active .match-rail,
.recording-is-active .match-menu-toggle,
.game-shell.is-recording ~ .match-menu-toggle { display: none !important; }
.recording-is-active .game-shell { margin-left: 0; width: 100%; height: 100dvh; }

/* Modal: one card, reused by every rail entry rather than one dialog each. */
.match-modal {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: #05090cc9; padding: 16px; box-sizing: border-box;
  overflow: hidden;
}
.match-modal[hidden] { display: none; }
.match-modal-open, .match-modal-open body { overflow: hidden; }
.match-modal-card {
  width: min(420px, 100%); background: #0d1419; border: 1px solid #8c753b;
  border-radius: 12px; padding: 20px; color: #f4ead2;
  font: 14px/1.5 system-ui, sans-serif;
  max-height: calc(100dvh - 32px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.match-modal-card > [data-modal-body] { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.match-modal-card > h2, .match-modal-card > .match-modal-close { flex-shrink: 0; }
.match-modal-card h2 {
  margin: 0 0 14px; font-size: 16px; font-weight: 700; letter-spacing: .03em; color: #ffe19c;
}
.match-modal-choice { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.match-modal-choice button {
  flex: 1 1 120px; padding: 11px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid #2a3540; background: #141d25; color: #f4ead2; font: inherit; font-weight: 600;
}
.match-modal-choice button[aria-pressed="true"] {
  border-color: #ffe19c; background: #1d2933; color: #ffe19c;
}
.match-modal-note { margin: 12px 0 0; color: #9fb0bd; font-size: 12.5px; }
.match-modal-close {
  margin-top: 16px; width: 100%; padding: 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid #2a3540; background: #141d25; color: #f4ead2; font: inherit;
}

/*
 * The formation editor is a screen, so its modal is one: as wide and as tall as the viewport
 * allows, with the frame taking whatever is left after the heading and the close button. A choice
 * of three buttons keeps the narrow card - the same modal, sized to what is in it.
 */
.match-modal-card.is-wide {
  width: min(1100px, 100%); height: min(88dvh, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px); min-height: 0; min-width: 0;
  box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; padding: 16px;
}
.match-modal-card.is-wide [data-modal-body] {
  flex: 1; min-height: 0; min-width: 0; display: flex; overflow: auto;
}
.match-modal-card.is-wide .saved-match-tactics { flex: 1; min-height: 0; overscroll-behavior: contain; }
.match-modal-card.is-wide > h2, .match-modal-card.is-wide > .match-modal-close { flex-shrink: 0; }
.match-formation-frame {
  flex: 1; width: 100%; border: 0; border-radius: 10px; background: #0d1419;
}
.match-formation-summary {
  padding: 14px; border-radius: 10px; border: 1px solid #2a3540; background: #141d25;
}
.match-formation-shape {
  margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .02em; color: #ffe19c;
}
.match-formation-summary .match-modal-note { margin-top: 6px; }
.match-modal-primary {
  margin-top: 14px; width: 100%; padding: 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid #ffe19c; background: #1d2933; color: #ffe19c; font: inherit; font-weight: 700;
}

/*
 * The 2D view sits over the canvas rather than replacing it: the Unity instance keeps running and
 * keeps its clock, so switching back is instant instead of a reload.
 */
.match-2d {
  position: fixed; inset: var(--local-testbar-height, 0px) 0 0 var(--match-rail); z-index: 30;
  width: calc(100% - var(--match-rail)); height: calc(100dvh - var(--local-testbar-height, 0px));
  background: #071016; display: block;
}
.match-2d[hidden] { display: none; }
@media (max-width: 640px) {
  .match-2d { inset: var(--local-testbar-height, 0px) 0 62px 0; width: 100%; height: calc(100dvh - 62px - var(--local-testbar-height, 0px)); }
  .match-menu-collapsed .match-2d { inset: var(--local-testbar-height, 0px) 0 0; height: calc(100dvh - var(--local-testbar-height, 0px)); }
}

/* Named saved tactics: scoped to the local Formation panel. */
.saved-match-tactics { width: 100%; min-width: 0; overflow-y: auto; padding: 0 6px 4px 0; box-sizing: border-box; }
.saved-substitution-select { display: block; margin: 18px 0; color: #f4ead2; }
.saved-substitution-select select { display: block; margin-top: 6px; width: 100%; max-width: 560px; min-width: 0; padding: 12px; color: #f4ead2; background: #14222d; border: 1px solid #586c7c; border-radius: 8px; font: inherit; }
.saved-match-tactics *, .saved-match-tactics *::before, .saved-match-tactics *::after { box-sizing: border-box; }
.saved-match-tactics p, .saved-match-tactics h3, .saved-match-tactics h4 { margin: 0; overflow-wrap: anywhere; }
.saved-tactics-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 12px; }
.saved-tactics-heading > div { min-width: 0; }
.saved-tactics-heading h3 { font-size: 21px; line-height: 1.2; color: #f4ead2; }
.saved-tactics-eyebrow { color: #d6b373; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px !important; }
.saved-tactics-current { color: #9cddba; font-weight: 700; padding-bottom: 6px; }
.saved-tactics-muted, .saved-tactics-status { color: #a4b6c5; font-size: 12px; line-height: 1.5; }
.saved-tactics-status:empty { display: none; }
.saved-tactics-status { margin: 8px 0 !important; }
.saved-tactics-status.is-error, .saved-tactics-unavailable { color: #ffb8b8; }
.saved-tactics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; align-items: start; }
.saved-tactics-card { min-width: 0; padding: 14px; border: 1px solid #34434f; border-radius: 10px; background: #141e26; }
.saved-tactics-card.is-selected { border-color: #d6b373; box-shadow: inset 0 0 0 1px #d6b373; }
.saved-tactics-card-head { display: flex; gap: 8px; align-items: start; justify-content: space-between; }
.saved-tactics-card-head h4 { color: #f4ead2; font-size: 15px; font-weight: 750; min-width: 0; }
.saved-tactics-badge { flex: none; font-size: 10px; line-height: 1.4; font-weight: 800; padding: 3px 7px; border-radius: 12px; }
.saved-tactics-badge[data-state="active"] { color: #bbf4cd; background: #224d3c; }
.saved-tactics-badge[data-state="queued"] { color: #ffe09a; background: #564526; }
.saved-tactics-badge[data-state="error"] { color: #ffc6c6; background: #592c32; }
.saved-tactics-shape { color: #b8cad5; font-size: 12px; padding: 6px 0 12px; }
.saved-tactics-button { border: 1px solid #576671; background: #1c2a35; color: #f4ead2; border-radius: 7px; padding: 9px 12px; font: 600 12px/1.4 system-ui, sans-serif; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
.saved-tactics-button:hover:not(:disabled) { border-color: #ffe19c; background: #263641; }
.saved-tactics-button:focus-visible, .saved-tactics-details summary:focus-visible, .saved-tactics-import input:focus-visible { outline: 2px solid #ffe19c; outline-offset: 3px; }
.saved-tactics-button:disabled { cursor: default; opacity: .55; }
.saved-tactics-card > .saved-tactics-button { width: 100%; }
.saved-tactics-button.is-primary { background: #ddbd75; color: #10191e; border-color: #ffe19c; }
.saved-tactics-button.is-primary:hover:not(:disabled) { color: #10191e; background: #ffe19c; }
.saved-tactics-unavailable { padding-left: 18px; font-size: 12px; overflow-wrap: anywhere; }
.saved-tactics-details { border-top: 1px solid #34434f; margin-top: 12px; padding-top: 10px; }
.saved-tactics-details summary { cursor: pointer; color: #dcc68f; font-size: 12px; }
.saved-tactics-detail-body { margin-top: 12px; }
.saved-tactics-section { margin-top: 16px; }
.saved-tactics-section h4 { font-size: 12px; color: #f4ead2; margin-bottom: 8px; }
.saved-tactics-players { columns: 2; margin: 0; padding-left: 22px; font-size: 11px; color: #b7c7d2; }
.saved-tactics-players li { break-inside: avoid; padding: 2px 4px 2px 0; overflow-wrap: anywhere; }
.saved-tactics-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px 10px; font-size: 11px; margin: 0; }
.saved-tactics-settings dt { color: #8fa5b5; overflow-wrap: anywhere; }
.saved-tactics-settings dd { margin: 0; color: #e2e8ec; overflow-wrap: anywhere; text-align: right; }
.saved-tactics-substitutions { padding-left: 18px; color: #b7c7d2; font-size: 11px; overflow-wrap: anywhere; }
.saved-tactics-confirm { position: sticky; bottom: 0; margin-top: 18px; padding: 12px; border: 1px solid #967d45; background: #15232bf5; box-shadow: 0 -6px 18px #0007; border-radius: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.saved-tactics-confirm p { flex: 1 1 240px; font-size: 12px; }
.saved-tactics-import { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 16px; }
.saved-tactics-import label { color: #f4ead2; font-size: 12px; }
.saved-tactics-import input { display: block; width: 100%; min-width: 0; margin-top: 6px; padding: 11px; background: #14222d; color: #f4ead2; border: 1px solid #586c7c; border-radius: 7px; font: inherit; }
.saved-tactics-notice { margin-top: 14px; padding: 12px; border: 1px solid #76643e; background: #3a32214d; border-radius: 8px; font-size: 12px; }
.saved-tactics-link { display: inline-block; color: #ffe19c; margin-top: 6px; }
@media (max-width: 640px) {
  .saved-tactics-grid { grid-template-columns: minmax(0, 1fr); }
  .saved-tactics-heading { align-items: start; flex-wrap: wrap; gap: 10px; }
  .saved-tactics-heading h3 { font-size: 18px; }
  .saved-tactics-import { grid-template-columns: minmax(0, 1fr); }
  .saved-tactics-card { padding: 12px; }
  .saved-tactics-confirm > .saved-tactics-button { flex: 1; }
}

/* Local manager panels: compact tactical cards, clear player identities and actions. */
.saved-match-tactics { scrollbar-width: thin; scrollbar-color: #52616c #0d1419; padding-right: 10px; }
.saved-tactics-heading { padding: 6px 0 16px; border-bottom: 1px solid #263641; }
.saved-tactics-current { display: inline-block; padding: 7px 11px; border-radius: 7px; background: #16382b; color: #b5efcb; font-size: 12px; margin-bottom: 8px !important; }
.saved-tactics-current:empty { display: none; }
.saved-tactics-card { padding: 18px; border-color: #30424c; background: linear-gradient(145deg,#192a33,#111c25); border-radius: 14px; box-shadow: 0 8px 22px #0002; }
.saved-tactics-card.is-selected { border-color: #dec47f; box-shadow: 0 0 0 1px #dec47f55,0 8px 22px #0002; }
.saved-tactics-card-head h4 { font-size: 17px; }
.manager-formation-preview { display: flex; align-items: center; gap: 20px; padding: 18px 0; }
.manager-formation-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.manager-formation-copy strong { font-size: 26px; line-height: 1.2; letter-spacing: .04em; color: #f4ead2; }
.manager-formation-copy span { font-size: 12px; color: #deca97; }
.manager-formation-copy small { font-size: 10px; color: #91a7b5; }
.manager-mini-pitch { position: relative; flex: 0 0 104px; height: 126px; overflow: hidden; border: 1px solid #577f715c; border-radius: 7px; background: repeating-linear-gradient(0deg,#163b31 0,#163b31 20%,#193f35 20%,#193f35 40%); }
.manager-mini-pitch::before { content: ''; position: absolute; inset: 7px; border: 1px solid #bad2b62b; background: linear-gradient(transparent 49.5%,#bad2b633 49.5%,#bad2b633 50.5%,transparent 50.5%); }
.manager-mini-pitch::after { content: ''; position: absolute; width: 26px; height: 26px; border: 1px solid #bad2b633; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.manager-pitch-player { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #e6cd85; border: 1px solid #fff1bd; transform: translate(-50%,-50%); box-shadow: 0 2px 5px #0005; z-index: 1; }
.saved-tactics-players { columns: auto; list-style: none; padding: 0; display: grid; gap: 5px; }
.saved-tactics-players li { padding: 0; }
.manager-player-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; border-radius: 6px; background: #08151c70; font-size: 12px; }
.manager-player-name { flex: 1; min-width: 0; overflow-wrap: anywhere; color: #e4edf0; }
.manager-player-rating { flex: none; color: #9ce3b6; font-weight: 750; font-variant-numeric: tabular-nums; }
.manager-player-position { flex: none; min-width: 30px; text-align: center; padding: 3px 5px; border-radius: 4px; background: #dbc28318; color: #e5ce97; font: 700 10px/1.3 system-ui,sans-serif; }
.saved-tactics-section h4 { text-transform: uppercase; letter-spacing: .08em; font-size: 10px; color: #d5c197; }
.saved-tactics-settings { row-gap: 0; }
.saved-tactics-settings dt,.saved-tactics-settings dd { padding: 7px 0; border-bottom: 1px solid #ffffff08; }
.saved-tactics-details summary { padding: 4px 0; font-weight: 650; }
.manager-loading { text-align: center; padding: 42px 20px; border: 1px solid #2d404a; border-radius: 12px; background: #14212a; margin-top: 18px; }
.manager-loading h4 { color: #e9ddbd; margin: 16px 0 8px; }
.manager-loading .saved-tactics-button { margin-top: 20px; }
.manager-loading-ring { display: inline-block; width: 27px; height: 27px; border: 2px solid #d6b37330; border-top-color: #d6b373; border-radius: 50%; animation: manager-spin 1s linear infinite; }
@keyframes manager-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .manager-loading-ring { animation: none; } }
.manager-sub-overview { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 6px 0 20px; }
.manager-sub-overview h3 { font-size: 22px; color: #f4ead2; }
.manager-sub-allowance { max-width: 210px; padding: 10px 14px; border: 1px solid #42725d; background: #183a2d; border-radius: 8px; color: #b5efcb; font-size: 12px; }
.manager-sub-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 22px 0 18px; }
.manager-sub-card { min-width: 0; padding: 18px; background: #14232c; border: 1px solid #344852; border-radius: 12px; border-top: 3px solid #8faaba; }
.manager-sub-card.is-off { border-top-color: #d69283; }
.manager-sub-card.is-on { border-top-color: #83cfa0; }
.manager-sub-direction { display: block; margin-bottom: 12px; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #a8bbca; }
.is-off .manager-sub-direction { color: #e0a99d; }
.is-on .manager-sub-direction { color: #9fe5bc; }
.manager-sub-label { font-weight: 650; color: #f0e8d5; }
.manager-sub-card .saved-substitution-select { margin: 0; }
.manager-sub-card select { margin-top: 12px; font-size: 12px; padding: 12px 8px; background: #0c1922; text-overflow: ellipsis; }
.manager-sub-preview { margin-top: 14px; min-height: 40px; }
.manager-sub-preview .saved-tactics-muted { padding: 8px 0; }
.manager-sub-action { display: flex; gap: 18px; align-items: center; padding: 16px; background: #192831; border: 1px solid #3a4e59; border-radius: 10px; }
.manager-sub-action .saved-tactics-status { flex: 1; }
.manager-sub-action.is-confirming { border-color: #d3bb78; background: #2c2c23; }
.manager-sub-action .saved-tactics-button { flex: none; padding: 12px 18px; }
.manager-sub-history { margin-top: 24px; }
.manager-sub-history h4 { color: #b9cbd4; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; margin-bottom: 10px; }
.manager-change { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; margin-top: 8px; background: #14212a; border: 1px solid #2d404a; border-radius: 8px; font-size: 12px; }
.manager-change-on { color: #a1e1b8; }
.manager-change-off { color: #d5a39a; margin-top: 6px !important; }
.manager-change-state { max-width: 220px; font-size: 11px; color: #dcc894; }
.manager-change[data-state="rejected"] .manager-change-state { color: #ffb8b8; }
@media(max-width:640px) {
  .saved-tactics-card { padding: 14px; }
  .manager-sub-overview { flex-direction: column; align-items: stretch; gap: 12px; }
  .manager-sub-allowance { max-width: none; }
  .manager-sub-choices { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .manager-sub-card { padding: 14px; }
  .manager-sub-action,.manager-change { flex-direction: column; align-items: stretch; gap: 8px; }
  .manager-change-state { max-width: none; }
  .manager-sub-overview h3 { font-size: 20px; }
}

/* Countdown sheets use the same saved coordinates as the broadcast introduction. */
.countdown-teamsheet.is-on { height: auto; padding: 16px; min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); }
.countdown-teamsheet .ts-head { width: 100%; gap: 10px; }
.countdown-teamsheet .ts-club { font-size: clamp(1rem, 3vw, 1.4rem); }
.countdown-teamsheet .ts-pitch { flex: none; width: min(100%, 410px); height: auto; aspect-ratio: 740 / 1020; }
.countdown-teamsheet .ts-bench { width: 100%; align-items: flex-start; flex-direction: column; }
.countdown-teamsheet .ts-bench-list { flex-wrap: wrap; overflow: visible; }
.countdown-teamsheet .ts-token-pos { display: block; }
.countdown-teamsheet .ts-token-name { max-width: 9ch; }

/* There are no game controls before play begins, including the initial loading screen. */
body:not([data-match-screen="live"]):not([data-match-screen="finished"]) .match-rail,
body:not([data-match-screen="live"]):not([data-match-screen="finished"]) .match-menu-toggle { display: none; }
body:not([data-match-screen="live"]):not([data-match-screen="finished"]) .screen { margin-left: 0; width: 100%; }

/* Keep every rail entry visible on a landscape phone, without scrolling to Players. */
@media (min-width: 641px) and (max-height: 500px) {
  .match-rail { padding-top: 44px; padding-bottom: 4px; gap: 0; overflow: hidden; }
  .match-rail-list { flex: 0 0 auto; }
  .match-rail button { height: 42px; gap: 2px; padding: 3px 2px; }
  .match-rail svg { width: 18px; height: 18px; }
  .match-rail span { font-size: 9px; }
  .match-rail small { display: none; }
  .match-rail-rule { margin: 3px 6px; }
  .match-menu-toggle { width: 32px; height: 32px; top: 6px; left: 24px; font-size: 20px; }
}
.match-modal {
  inset: var(--match-vv-top, 0px) auto auto var(--match-vv-left, 0px);
  width: var(--match-vv-width, 100vw); height: var(--match-vv-height, 100dvh);
  padding: 8px;
}
.match-modal-card, .match-modal-card.is-wide {
  max-height: calc(var(--match-vv-height, 100dvh) - 16px);
}
.match-modal-card.is-wide { height: min(88dvh, calc(var(--match-vv-height, 100dvh) - 16px)); }
@media (max-height: 500px) {
  .match-modal-card, .match-modal-card.is-wide { padding: 10px; }
  .match-modal-card h2 { margin-bottom: 6px; }
  .match-modal-close { margin-top: 6px; padding: 7px; }
}

/* Keep controls clear of the phone's home indicator and display cut-outs. */
@media (max-width: 640px) {
  .match-rail { height: calc(62px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .game-shell { height: calc(100dvh - 62px - env(safe-area-inset-bottom, 0px) - var(--local-testbar-height, 0px)); }
  .match-2d { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); height: calc(100dvh - 62px - env(safe-area-inset-bottom, 0px) - var(--local-testbar-height, 0px)); }
  .match-menu-toggle { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .match-menu-collapsed .match-menu-toggle { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
.match-modal {
  --modal-top-pad: max(8px, env(safe-area-inset-top, 0px));
  --modal-bottom-pad: max(8px, env(safe-area-inset-bottom, 0px));
  --modal-room: calc(var(--match-vv-height, 100dvh) - var(--modal-top-pad) - var(--modal-bottom-pad));
  padding: var(--modal-top-pad) max(8px, env(safe-area-inset-right, 0px)) var(--modal-bottom-pad) max(8px, env(safe-area-inset-left, 0px));
}
.match-modal-card, .match-modal-card.is-wide { max-height: var(--modal-room); }
.match-modal-card.is-wide { height: min(88dvh, var(--modal-room)); }