/* TAKKAR! match HUD (brand book, In match): Raat Ink panels over the pitch, each a
   slab leaning forward 12 degrees (clip-path parallelograms, so the type inside stays
   upright), Marigold for you and now (your player, the clock, the score chip), Rani
   only for the ball and the goal, Barlow Condensed for every number and label, Anek
   Bangla for names and titles, Baloo Da 2 for the GOAL shout alone; card graphics keep
   real yellow and red. Nothing sits straight on the grass but the players. Built by
   src/ui/hud.js inside #hud. Every rule is scoped to .hf-hud, and the HUD never takes
   pointer input. Static styles are the final, visible state; animations only run from
   hidden to visible, so reduced motion can simply switch them off. The HUD stops dead
   (--ease-out, no overshoot); only the goal shout stamps. Motion stays in transform
   and opacity (plus a few short clip-path wipes) so phones composite it.

   Layout classes set by hud.js:
     .hf-hud--compact  phone density (slim bug, chip tag, small see-through radar)
     .hf-hud--touch    touch placement (radar top right, nothing in the bottom corners)
     .hf-hud--stack    tag and card join the top-left stack under the scorebug */

.hf-hud {
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --edge: 16px;
  --cut: 10px;               /* the slab's lean over a plate's height (tan 12 x ~46 px) */
  --bug-h: 40px;
  --bug-code: 19px;
  --bug-goals: 25px;
  --bug-time: 18px;
  --bug-label: 10px;
  --kit-w: 5px;
  --line-h: 26px;            /* ticker and scorer-line rows */
  --line-size: 12px;
  --radar-w: 220px;          /* set by hud.js from the radar size */
  --radar-h: calc(var(--radar-w) * 0.6726); /* 113 x 76 m: pitch plus run-off */
  --radar-alpha: 0.94;
  --plate: color-mix(in srgb, var(--ink) 90%, transparent);
  --plate-solid: var(--ink);
  --lift: var(--ink-2);           /* a raised ink cell */
  --hair: color-mix(in srgb, var(--paper) 14%, transparent);
  --yellow-card: var(--warn);
  --red-card: var(--danger);
  --home: var(--paper);
  --away: var(--steel);
  --home-on: var(--ink);
  --away-on: var(--ink);
  --shadow-s: 0 6px 18px rgba(0, 0, 0, 0.38);

  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  font-family: var(--font-ui);
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.22s ease;
}

.hf-hud.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.hf-hud *,
.hf-hud *::before,
.hf-hud *::after {
  box-sizing: border-box;
  pointer-events: none;
}

/* Phone density. */
.hf-hud.hf-hud--compact {
  --edge: 10px;
  --cut: 6px;
  --bug-h: 28px;
  --bug-code: 14px;
  --bug-goals: 18px;
  --bug-time: 14px;
  --bug-label: 10px;
  --kit-w: 4px;
  --line-h: 22px;
  --line-size: 11px;
  --radar-alpha: 0.8;
  /* Small screens: labels never go under 10 px, and their tracking eases to 0.1em. */
  --label-tracking: 0.1em;
}

/* ------------------------------------------------------------ full names */

/* A full name set by hud.js (setName): the shirt-name part (<b>) never shrinks; the
   given names around it take the ellipsis when a row runs out of room. */
.hf-hud .hf-nm {
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  min-width: 0;
  white-space: nowrap;
}

.hf-hud .hf-nm > span {
  flex: 0 1 auto;
  min-width: 1.6em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hf-hud .hf-nm > b {
  flex: none;
}

/* ------------------------------------------------------------ top-left stack */

.hf-hud .hf-hud__stack {
  position: absolute;
  top: calc(var(--st) + var(--edge));
  left: calc(var(--sl) + var(--edge));
  /* Clear of the centered pause button on touch screens. */
  max-width: calc(50% - 32px - var(--sl) - var(--edge));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.hf-hud.hf-hud--compact .hf-hud__stack {
  gap: 4px;
}

/* ------------------------------------------------------------ scorebug */

.hf-hud .hf-hud__sb {
  position: relative;
  transition: opacity 0.22s ease;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.42));
}

.hf-hud.hf-hud--compact .hf-hud__sb {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

/* The bug is one slab: both ends lean 12 degrees, cells stay upright inside, and a
   Marigold edge leads it (brand book, Scorebug). */
.hf-hud .hf-sb {
  position: relative;
  display: flex;
  align-items: stretch;
  height: var(--bug-h);
  padding-left: calc(var(--cut) * 0.5);
  background: var(--plate-solid);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}

.hf-hud .hf-sb::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--cut) + 4px);
  background: var(--accent);
  clip-path: polygon(var(--cut) 0, 100% 0, 4px 100%, 0 100%);
}

/* The badge: the colour T! (Marigold T, Rani ball) on Ink. */
.hf-hud .hf-sb__brand {
  flex: none;
  width: var(--bug-h);
  background: var(--logo-mark-color) center / 60% no-repeat, var(--raat-ink);
}

/* Phones: the small-size drawing, made to hold under 24 px. */
.hf-hud.hf-hud--compact .hf-sb__brand {
  background: var(--logo-mark-small) center / 72% no-repeat, var(--raat-ink);
}

.hf-hud .hf-sb__team {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--bug-h) * 0.2);
  min-width: calc(var(--bug-h) * 1.7);
  padding: 0 calc(var(--bug-h) * 0.3) 0 calc(var(--bug-h) * 0.3 + var(--kit-w));
  background: var(--plate-solid);
  overflow: hidden;
}

.hf-hud .hf-sb__team--away {
  justify-content: flex-end;
  padding: 0 calc(var(--bug-h) * 0.3 + var(--kit-w)) 0 calc(var(--bug-h) * 0.3);
}

/* Team color bars: full height on the outside of each code. */
.hf-hud .hf-sb__kit {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--kit-w);
}

.hf-hud .hf-sb__team--away .hf-sb__kit {
  left: auto;
  right: 0;
}

/* The goal flash fills the scoring side in its color. */
.hf-hud .hf-sb__team::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
}

.hf-hud .hf-sb__team--home::after { background: var(--home); }
.hf-hud .hf-sb__team--away::after { background: var(--away); }

.hf-hud .hf-sb__code {
  position: relative;
  z-index: 1;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: calc(var(--bug-code) * 1.06);
  line-height: 1;
  letter-spacing: 0.08em;
}

/* Sent-off players: small red cards beside the code. */
.hf-hud .hf-sb__reds {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 2px;
}

.hf-hud .hf-sb__reds:empty {
  display: none;
}

.hf-hud .hf-sb__reds i {
  width: calc(var(--bug-h) * 0.15);
  height: calc(var(--bug-h) * 0.24);
  background: var(--red-card);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.hf-hud .hf-sb__score {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--bug-h) * 0.16);
  min-width: calc(var(--bug-h) * 1.9);
  padding: 0 calc(var(--bug-h) * 0.26);
  /* The score is the highest-contrast thing on the bug: Ink on Marigold. */
  background: var(--accent);
  color: var(--on-accent);
  overflow: hidden;
}

.hf-hud .hf-sb__goals {
  position: relative;
  z-index: 1;
  display: inline-block;
  min-width: 0.62em;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: calc(var(--bug-goals) * 1.06);
  line-height: 1;
  text-align: center;
}

.hf-hud .hf-sb__dash {
  position: relative;
  z-index: 1;
  width: calc(var(--bug-h) * 0.18);
  height: 3px;
  background: currentColor;
}

/* Goal flash: the score cell turns Rani for a beat (a goal is a big moment). */
.hf-hud .hf-sb__score::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rani-pink);
  opacity: 0;
}

.hf-hud .hf-sb.is-flash .hf-sb__score::before {
  animation: hf-hud-flash 1.5s ease-out;
}

.hf-hud .hf-sb.is-flash .hf-sb__score {
  animation: hf-hud-flash-ink 1.5s ease-out;
}

.hf-hud .hf-sb.is-flash-home .hf-sb__team--home::after,
.hf-hud .hf-sb.is-flash-away .hf-sb__team--away::after {
  animation: hf-hud-flash-team 1.5s ease-out;
}

/* The code stays readable on its own team color (a white kit flashes ink text). */
.hf-hud .hf-sb.is-flash-home .hf-sb__team--home .hf-sb__code {
  animation: hf-hud-flash-home-on 1.5s ease-out;
}

.hf-hud .hf-sb.is-flash-away .hf-sb__team--away .hf-sb__code {
  animation: hf-hud-flash-away-on 1.5s ease-out;
}

.hf-hud .hf-sb__clock {
  display: flex;
  align-items: center;
  gap: calc(var(--bug-h) * 0.2);
  padding: 0 calc(var(--bug-h) * 0.3 + var(--cut)) 0 calc(var(--bug-h) * 0.3);
  background: var(--lift);
}

.hf-hud .hf-sb__half {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: calc(var(--bug-label) * 1.15);
  line-height: 1;
  letter-spacing: var(--label-tracking);
  color: var(--muted);
}

.hf-hud .hf-sb__half.is-break {
  color: var(--paper);
}

/* The clock: tabular Marigold (now). */
.hf-hud .hf-sb__time {
  min-width: 2.7em;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: calc(var(--bug-time) * 1.12);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--accent);
}

/* The fourth official's board: +N slides out of the clock in the accent. */
.hf-hud .hf-sb__added {
  display: none;
  align-items: center;
  margin-left: calc(var(--cut) * -1);
  padding: 0 calc(var(--bug-h) * 0.26 + var(--cut)) 0 calc(var(--bug-h) * 0.22 + var(--cut));
  background: var(--paper);
  color: var(--ink);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}

.hf-hud .hf-sb__added.is-on {
  display: flex;
  animation: hf-hud-board 0.26s var(--ease-out) backwards;
}

.hf-hud .hf-sb__addedn {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: calc(var(--bug-time) * 0.9);
  line-height: 1;
}

/* Half progress: the accent line under the bug. */
.hf-hud .hf-sb__progress {
  height: 3px;
  margin: 0 var(--cut) 0 calc(var(--cut) * 0.3);
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  overflow: hidden;
}

.hf-hud.hf-hud--compact .hf-sb__progress {
  height: 2px;
}

.hf-hud .hf-sb__progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
}

/* ------------------------------------------------------------ scorer line */

.hf-hud .hf-sb__event {
  display: none;
  align-items: center;
  gap: 9px;
  height: var(--line-h);
  padding: 0 calc(12px + var(--cut)) 0 calc(var(--cut) * 0.6);
  background: var(--plate);
  clip-path: polygon(calc(var(--cut) * 0.6) 0, 100% 0, calc(100% - var(--cut) * 0.6) 100%, 0 100%);
  white-space: nowrap;
}

.hf-hud .hf-sb__event.is-on {
  display: flex;
  animation: hf-hud-reveal 0.26s var(--ease-out) backwards;
}

.hf-hud .hf-sb__event.is-out {
  animation: hf-hud-fade-out 0.3s ease-in forwards;
}

.hf-hud .hf-ev__kit {
  flex: none;
  align-self: stretch;
  width: var(--kit-w);
  background: var(--paper);
}

/* The ball: the Rani dot (pink is the ball), on its ink plate. */
.hf-hud .hf-ev__ball {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rani-pink);
}

.hf-hud .hf-ev__min {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: calc(var(--line-size) + 2px);
  color: var(--muted);
}

.hf-hud .hf-ev__name {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: calc(var(--line-size) + 3px);
  letter-spacing: 0.08em;
}

.hf-hud .hf-ev__tag {
  padding: 2px 5px 1px;
  border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.hf-hud .hf-ev__tag[hidden] {
  display: none;
}

/* ------------------------------------------------------------ ticker */

.hf-hud .hf-hud__ticker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 100%;
  transition: opacity 0.2s ease;
}

.hf-hud .hf-tick {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  height: var(--line-h);
  padding: 0 calc(12px + var(--cut)) 0 10px;
  background: var(--plate);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  font-family: var(--font-num);
  font-weight: 600;
  font-size: calc(var(--line-size) + 2px);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  animation: hf-hud-reveal 0.24s var(--ease-out) backwards;
  transition: opacity 0.3s ease;
}

.hf-hud .hf-tick:nth-child(2) { opacity: 0.78; }
.hf-hud .hf-tick:nth-child(3) { opacity: 0.56; }

.hf-hud .hf-tick.is-out {
  opacity: 0;
}

.hf-hud .hf-tick__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.hf-hud .hf-tick__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.hf-hud.hf-hud--compact .hf-tick:nth-child(n + 3) {
  display: none;
}

/* ------------------------------------------------------------ player tag */

.hf-hud .hf-hud__tag {
  position: absolute;
  left: calc(var(--sl) + var(--edge));
  bottom: calc(var(--sb) + var(--edge));
  transition: opacity 0.22s ease, transform 0.22s var(--ease-out);
}

.hf-hud.hf-hud--stack .hf-hud__tag {
  position: relative;
  left: auto;
  bottom: auto;
}

.hf-hud .hf-hud__tag.is-empty {
  opacity: 0;
  transform: translateX(-8px);
}

.hf-hud.hf-hud--stack .hf-hud__tag.is-empty {
  display: none;
}

.hf-hud .hf-tag {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 232px;
  max-width: 380px;
  height: 60px;
  padding-right: calc(var(--cut) + 4px);
  background: var(--plate);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut) * 1.2) 100%, 0 100%);
}

/* The player's kit as a bar down the left edge. */
.hf-hud .hf-tag::before {
  content: '';
  flex: none;
  width: var(--kit-w);
  background: var(--kit, var(--paper));
}

/* Your player's number: Marigold (you and now), Ink type. */
.hf-hud .hf-tag__num {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 0 8px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  background: var(--accent);
  color: var(--on-accent);
}

.hf-hud .hf-tag__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
}

/* The full real name: given names first (they give way to an ellipsis on a long
   name), then the last name, which never does. The slim phone chip swaps both for
   the shirt name. */
.hf-hud .hf-tag__name {
  display: flex;
  align-items: center;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 19px;
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  white-space: nowrap;
  overflow: hidden;
}

.hf-hud .hf-tag__first {
  flex: 0 1 auto;
  min-width: 0;
  margin-right: 0.28em;
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
}

.hf-hud .hf-tag__first:empty {
  display: none;
}

.hf-hud .hf-tag__last {
  flex: none;
}

.hf-hud .hf-tag__shirt {
  display: none;
}

/* On the ball: the Rani ball after the name. */
.hf-hud .hf-tag__ball {
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--rani-pink);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.hf-hud .hf-hud__tag.has-ball .hf-tag__ball {
  opacity: 1;
  transform: none;
}

.hf-hud .hf-tag__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--label-tracking);
  line-height: 1;
}

.hf-hud .hf-tag__pos {
  padding: 2px 5px 1px;
  border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
}

.hf-hud .hf-tag__ovr {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.hf-hud .hf-tag__ovr::after {
  content: ' OVR';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  color: var(--muted);
}

.hf-hud .hf-tag__yc {
  display: none;
  width: 7px;
  height: 10px;
  background: var(--yellow-card);
  transform: rotate(8deg);
}

.hf-hud .hf-hud__tag.is-booked .hf-tag__yc {
  display: block;
}

/* Stamina: a slanted bar that drains from Marigold to Rani (brand book, Your player). */
.hf-hud .hf-tag__sta {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hf-hud .hf-tag__sta span {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--label-tracking);
  color: var(--muted);
}

.hf-hud .hf-tag__bar {
  flex: 1;
  height: 5px;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper) 14%, transparent);
  clip-path: polygon(1px 0, 100% 0, calc(100% - 1px) 100%, 0 100%);
}

.hf-hud .hf-tag__bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(1);
  transition: background-color 0.3s ease;
}

.hf-hud .hf-tag__bar[data-level='mid'] i { background: linear-gradient(90deg, var(--rani-pink), var(--accent)); }
.hf-hud .hf-tag__bar[data-level='lo'] i { background: var(--rani-pink); }

/* Compact: the tag becomes a slim chip under the bug. */
.hf-hud.hf-hud--compact .hf-tag {
  min-width: 0;
  max-width: 100%;
  height: var(--line-h);
}

.hf-hud.hf-hud--compact .hf-tag__num {
  min-width: calc(var(--line-h) + 4px);
  padding: 0 4px;
  font-size: 15px;
}

.hf-hud.hf-hud--compact .hf-tag__body {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 8px;
}

.hf-hud.hf-hud--compact .hf-tag__name { font-size: 13px; letter-spacing: 0.02em; }
/* The slim chip has no room for a full name: the shirt name stands in. */
.hf-hud.hf-hud--compact .hf-tag__first,
.hf-hud.hf-hud--compact .hf-tag__last,
.hf-hud.hf-hud--compact .hf-tag__ovr,
.hf-hud.hf-hud--compact .hf-tag__sta span { display: none; }
.hf-hud.hf-hud--compact .hf-tag__shirt { display: inline; }
.hf-hud.hf-hud--compact .hf-tag__ball { width: 6px; height: 6px; margin-left: 6px; }
.hf-hud.hf-hud--compact .hf-tag__meta { font-size: 10px; gap: 6px; }
.hf-hud.hf-hud--compact .hf-tag__pos { padding: 2px 4px 1px; }
.hf-hud.hf-hud--compact .hf-tag__sta { flex: none; }
.hf-hud.hf-hud--compact .hf-tag__bar { flex: none; width: 40px; height: 3px; }

/* ------------------------------------------------------------ in-world labels */

.hf-hud .hf-hud__world {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: opacity 0.18s ease;
}

/* Each label's origin is the anchor point above the player's head; hud.js moves it. */
.hf-hud .hf-wl {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  will-change: transform;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.hf-hud .hf-wl.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease;
}

.hf-hud .hf-wl.is-edge {
  opacity: 0.6;
}

.hf-hud .hf-wl__chip {
  position: absolute;
  left: 0;
  bottom: 8px;
  display: flex;
  align-items: stretch;
  height: 20px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.hf-hud .hf-wl__num {
  display: grid;
  place-items: center;
  min-width: 22px;
  padding: 0 4px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.hf-hud .hf-wl__name {
  display: flex;
  align-items: center;
  padding: 0 8px 0 7px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1;
}

/* The pointer: the Marigold chevron down to your player. */
.hf-hud .hf-wl__ptr {
  position: absolute;
  left: -6px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--accent);
}

/* The pass receiver: the number in Chalk, a lighter plate, a softer pointer. */
.hf-hud .hf-wl--rcv .hf-wl__num {
  background: var(--paper);
  color: var(--ink);
}

.hf-hud .hf-wl--rcv .hf-wl__chip {
  background: color-mix(in srgb, var(--ink) 70%, transparent);
}

.hf-hud .hf-wl--rcv .hf-wl__name {
  color: var(--muted);
}

.hf-hud .hf-wl--rcv .hf-wl__ptr {
  border-top-color: var(--paper);
}

.hf-hud .hf-wl--rcv.is-on .hf-wl__ptr {
  animation: hf-hud-nudge 0.6s ease-in-out infinite alternate;
}

.hf-hud.hf-hud--compact .hf-wl__chip { height: 18px; bottom: 7px; }
.hf-hud.hf-hud--compact .hf-wl__num { min-width: 20px; font-size: 13px; }
.hf-hud.hf-hud--compact .hf-wl__name { font-size: 12px; padding: 0 6px; }

/* The power arc beside the player while a kick charges: a 270 degree gauge. */
.hf-hud .hf-arc {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  will-change: transform;
  transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}

.hf-hud .hf-arc.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.08s ease;
}

.hf-hud .hf-arc__svg {
  position: absolute;
  left: -24px;
  top: -24px;
  width: 48px;
  height: 48px;
  overflow: visible;
  transform: rotate(135deg);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.hf-hud .hf-arc__svg circle {
  fill: none;
  stroke-linecap: butt;
}

.hf-hud .hf-arc__track {
  stroke: color-mix(in srgb, var(--ink) 72%, transparent);
  stroke-width: 7;
  stroke-dasharray: 75 100;
}

/* The over-hit zone: the last 15% of the sweep. */
.hf-hud .hf-arc__risk {
  stroke: color-mix(in srgb, var(--rani-pink) 55%, transparent);
  stroke-width: 7;
  stroke-dasharray: 0 63.75 11.25 100;
}

.hf-hud .hf-arc__fill {
  stroke: var(--paper);
  stroke-width: 4;
  stroke-dasharray: 0 100;
}

.hf-hud .hf-arc[data-kind='shoot'] .hf-arc__fill { stroke: var(--accent); }
.hf-hud .hf-arc:not([data-kind='shoot']) .hf-arc__risk { display: none; }
/* The last stretch before max power is Rani, like the last power segment. */
.hf-hud .hf-arc.is-risk .hf-arc__fill { stroke: var(--rani-pink); }

.hf-hud .hf-arc__label {
  position: absolute;
  left: 0;
  top: 20px;
  transform: translateX(-50%);
  padding: 1px 4px;
  background: color-mix(in srgb, var(--ink) 80%, transparent);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.2;
  white-space: nowrap;
}

/* ------------------------------------------------------------ info strap */

.hf-hud .hf-hud__info {
  position: absolute;
  top: calc(var(--st) + 15%);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
}

.hf-hud .hf-hud__info.is-on {
  opacity: 1;
  visibility: visible;
}

.hf-hud .hf-hud__info.is-on .hf-info {
  animation: hf-hud-strap 0.28s var(--ease-out) backwards;
}

.hf-hud .hf-hud__info.is-out {
  opacity: 0;
  transition: opacity 0.28s ease;
}

.hf-hud .hf-info {
  display: flex;
  align-items: stretch;
  padding: 0 calc(24px + var(--cut)) 0 var(--cut);
  background: var(--plate);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  white-space: nowrap;
}

.hf-hud .hf-info__bar {
  flex: none;
  width: 6px;
  margin-right: 14px;
  background: var(--accent);
}

.hf-hud .hf-info__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 11px 0 10px;
}

.hf-hud .hf-info b {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 24px;
  line-height: 1;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
}

.hf-hud .hf-info span {
  font-family: var(--font-num);
  font-weight: var(--label-weight);
  font-size: 13px;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--muted);
}

.hf-hud.has-call .hf-hud__info {
  opacity: 0;
}

/* ------------------------------------------------------------ referee calls */

.hf-hud .hf-hud__call {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--st) + 15%);
  display: flex;
  justify-content: center;
}

.hf-hud .hf-call {
  display: flex;
  align-items: stretch;
  padding: 0 calc(28px + var(--cut)) 0 var(--cut);
  background: var(--plate);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  animation: hf-hud-strap 0.26s var(--ease-out) backwards;
}

.hf-hud .hf-call__bar {
  flex: none;
  width: 8px;
  margin-right: 16px;
  background: var(--accent);
  transform-origin: top center;
  animation: hf-hud-grow-y 0.24s 0.06s var(--ease-out) backwards;
}

.hf-hud .hf-call__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 10px 0 11px;
  min-width: 0;
}

.hf-hud .hf-call__kicker {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--label-tracking);
  line-height: 1;
  color: var(--muted);
}

.hf-hud .hf-call__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 36px;
  line-height: 0.95;
  letter-spacing: var(--display-tracking);
  white-space: nowrap;
}

.hf-hud .hf-call__sub {
  max-width: min(70vw, 520px);
  font-family: var(--font-num);
  font-weight: var(--label-weight);
  font-size: 13px;
  letter-spacing: var(--label-tracking);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PENALTY: the big one, a full-width band with the title centered. */
.hf-hud .hf-call--penalty {
  position: relative;
  width: 100%;
  justify-content: center;
  padding: 0;
  clip-path: none;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  animation-name: hf-hud-band-in;
}

.hf-hud .hf-call--penalty .hf-call__body {
  align-items: center;
  padding: 14px 0 15px;
  gap: 8px;
}

.hf-hud .hf-call--penalty .hf-call__title {
  font-size: clamp(56px, 9vw, 104px);
}

.hf-hud .hf-call--penalty .hf-call__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: 4px;
  margin: 0;
  transform-origin: left center;
  animation-name: hf-hud-grow;
}

.hf-hud .hf-call--advantage .hf-call__title {
  font-size: 26px;
}

.hf-hud .hf-call.is-out {
  animation: hf-hud-fade-out 0.28s ease-in forwards;
}

/* ------------------------------------------------------------ goal graphic */

.hf-hud .hf-hud__goal {
  position: absolute;
  left: 0;
  right: 0;
  top: 46%;
  transform: translateY(-50%);
}

.hf-hud .hf-goal {
  --word: clamp(64px, min(15vw, 22vh), 168px);
  position: relative;
  padding: clamp(5px, 0.8vh, 8px) 0;
}

/* The Rani sweep: a slab at the 12 degree lean that crosses first and frames the
   Ink band (brand book, Goal slab: an Ink slab with a Rani leading stripe). */
.hf-hud .hf-goal__sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8%;
  right: -8%;
  background: var(--rani-pink);
  transform: skewX(var(--slant));
  animation: hf-hud-sweep 0.3s cubic-bezier(0.7, 0, 0.2, 1) backwards;
}

.hf-hud .hf-goal__band {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(14px, 2.4vh, 26px) 24px clamp(14px, 2.4vh, 24px);
  background: color-mix(in srgb, var(--ink) 95%, transparent);
  overflow: hidden;
  animation: hf-hud-clip-in 0.3s 0.08s cubic-bezier(0.7, 0, 0.2, 1) backwards;
}

/* The T! mark rides at the band's end, quietly. */
.hf-hud .hf-goal__mark {
  position: absolute;
  right: max(4%, 18px);
  top: 50%;
  width: calc(var(--word) * 0.9);
  height: calc(var(--word) * 0.9);
  transform: translateY(-50%);
  background: var(--logo-mark) center / contain no-repeat;
  opacity: 0.1;
}

.hf-hud .hf-goal__stage {
  position: relative;
  height: calc(var(--word) * 0.98);
  min-width: 60%;
  display: grid;
  place-items: center;
}

.hf-hud .hf-goal__word,
.hf-hud .hf-goal__score {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* The shout: Baloo Da 2, the lead word in Marigold and the other script in Chalk,
   each closed with the drawn wedge-and-ball "!" (the ball is Rani). */
.hf-hud .hf-goal__word {
  align-items: baseline;
  gap: 0.3em;
  font-family: var(--font-shout);
  font-weight: 800;
  font-size: var(--word);
  line-height: 1;
  letter-spacing: 0.01em;
  transition: opacity 0.2s ease, transform 0.24s var(--ease-out);
}

.hf-hud .hf-goal__lead,
.hf-hud .hf-goal__alt {
  display: inline-flex;
  align-items: baseline;
}

.hf-hud .hf-goal__lead {
  color: var(--accent);
}

.hf-hud .hf-goal__alt {
  font-size: 0.56em;
  color: var(--paper);
  animation: hf-hud-fade-in 0.3s 0.5s ease backwards;
}

/* Bangla leads in BN mode: গোল! sits a little smaller (the script stands taller). */
.hf-hud .hf-goal.is-bn .hf-goal__word {
  font-size: calc(var(--word) * 0.84);
}

.hf-hud .hf-goal.is-bn .hf-goal__alt {
  font-size: 0.6em;
}

.hf-hud .hf-goal__ch {
  display: inline-block;
  animation: hf-hud-slam 0.28s calc(0.18s + var(--i, 0) * 0.045s) cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* The "!" stamps down after the word with a two-frame shake (the one overshoot the
   HUD allows: a celebration). */
.hf-hud .hf-goal__lead .hf-bang {
  transform-origin: 50% 100%;
  animation: hf-hud-stamp 0.36s 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}

.hf-hud .hf-goal__score {
  gap: calc(var(--word) * 0.16);
  opacity: 0;
  transform: translateY(24%);
  transition: opacity 0.22s ease, transform 0.26s var(--ease-out);
}

.hf-hud .hf-goal__code {
  display: flex;
  align-items: center;
  gap: calc(var(--word) * 0.08);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: calc(var(--word) * 0.34);
  line-height: 1;
  letter-spacing: 0.06em;
}

.hf-hud .hf-goal__code i {
  width: calc(var(--word) * 0.06);
  height: calc(var(--word) * 0.42);
}

.hf-hud .hf-goal__n {
  min-width: 0.7em;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: calc(var(--word) * 0.78);
  line-height: 0.8;
  text-align: center;
  color: var(--muted);
}

/* The new goal lights Marigold: the score that just changed is "now". */
.hf-hud .hf-goal__n.is-hit {
  color: var(--accent);
}

.hf-hud .hf-goal__dash {
  width: calc(var(--word) * 0.16);
  height: calc(var(--word) * 0.05);
  background: var(--muted);
}

.hf-hud .hf-goal.is-score .hf-goal__word {
  opacity: 0;
  transform: translateY(-30%) scale(0.96);
}

.hf-hud .hf-goal.is-score .hf-goal__score {
  opacity: 1;
  transform: none;
}

.hf-hud .hf-goal.is-score .hf-goal__n.is-hit {
  animation: hf-hud-hit 0.42s 0.12s var(--ease-out) backwards;
}

/* The scorer card: number in the team color, name, assist, minute. */
.hf-hud .hf-goal__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(12px, 2vh, 20px);
  padding-top: clamp(10px, 1.6vh, 16px);
  border-top: 1px solid var(--hair);
  animation: hf-hud-rise 0.26s 0.6s var(--ease-out) backwards;
}

.hf-hud .hf-goal__num {
  display: grid;
  place-items: center;
  min-width: 56px;
  height: 56px;
  padding: 0 6px;
  background: var(--team);
  color: var(--team-on);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 20%, transparent);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
}

.hf-hud .hf-goal__who {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hf-hud .hf-goal__kicker,
.hf-hud .hf-goal__assist {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: var(--label-tracking);
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}

/* The scorer's full real name in capitals, the shirt-name part (<b>) in full Chalk. */
.hf-hud .hf-goal__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: var(--display-stretch);
  font-size: 32px;
  line-height: 1;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
}

.hf-hud .hf-goal__name b {
  font-weight: var(--display-weight);
  color: var(--paper);
}

.hf-hud .hf-goal__name.is-long {
  font-size: 26px;
}

.hf-hud .hf-goal__min {
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-left: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--hair);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
}

.hf-hud .hf-goal__card.is-plain {
  gap: 0;
}

.hf-hud .hf-goal__sub {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Held under a replay: gone, and its animations restart when it returns. */
.hf-hud .hf-goal.is-held {
  display: none;
}

/* Back from the replay, the score beat enters without the GOAL slam. */
.hf-hud .hf-goal.is-score .hf-goal__ch {
  animation: none;
}

.hf-hud .hf-goal.is-out .hf-goal__sweep {
  animation: hf-hud-sweep-out 0.34s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

.hf-hud .hf-goal.is-out .hf-goal__band {
  animation: hf-hud-clip-out 0.3s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

/* ------------------------------------------------------------ banners (half / full) */

.hf-hud .hf-hud__banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 44%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
}

.hf-hud .hf-ban {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 var(--edge);
}

.hf-hud .hf-ban__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: min(540px, 100%);
  padding: 20px calc(40px + var(--cut)) 22px;
  text-align: center;
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  animation: hf-hud-clip-in 0.32s cubic-bezier(0.7, 0, 0.2, 1) backwards;
}

.hf-hud .hf-ban__panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--accent);
}

.hf-hud .hf-ban__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-num);
  font-weight: var(--label-weight);
  font-size: 13px;
  letter-spacing: var(--label-tracking);
  color: var(--muted);
  animation: hf-hud-fade-in 0.24s 0.2s ease backwards;
}

.hf-hud .hf-ban__kmark {
  width: 16px;
  height: 16px;
  background: var(--logo-mark) center / contain no-repeat;
}

.hf-hud .hf-ban__title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: clamp(42px, 7vw, 76px);
  line-height: 0.95;
  letter-spacing: var(--display-tracking);
  white-space: nowrap;
  animation: hf-hud-rise 0.28s 0.14s var(--ease-out) backwards;
}

.hf-hud .hf-ban__rule {
  width: 56px;
  height: 4px;
  margin-top: 14px;
  background: var(--accent);
  animation: hf-hud-grow 0.26s 0.26s var(--ease-out) backwards;
}

.hf-hud .hf-ban__sub {
  margin-top: 12px;
  animation: hf-hud-rise 0.28s 0.32s var(--ease-out) backwards;
}

.hf-hud .hf-ban__subtext {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(20px, 2.8vw, 30px);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.hf-hud .hf-ban.is-out .hf-ban__panel {
  animation: hf-hud-clip-out 0.36s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

/* ------------------------------------------------------------ half-time stats panel */

.hf-hud .hf-hud__stats {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(var(--st) + var(--edge)) calc(var(--sr) + var(--edge)) calc(var(--sb) + var(--edge)) calc(var(--sl) + var(--edge));
}

.hf-hud .hf-hud__stats:empty {
  display: none;
}

.hf-hud .hf-st {
  position: relative;
  width: min(600px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 16px;
  /* Near-solid: the pitch and earlier graphics must not show through the numbers. */
  background: color-mix(in srgb, var(--ink) 97%, transparent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  clip-path: polygon(0 0, calc(100% - var(--kick-l)) 0, 100% var(--kick-l), 100% 100%, 0 100%);
  overflow: hidden;
  animation: hf-hud-pop 0.28s var(--ease-out) backwards;
}

.hf-hud .hf-st::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--accent);
  transform-origin: left center;
  animation: hf-hud-grow 0.4s 0.1s var(--ease-out) backwards;
}

.hf-hud .hf-st.is-out {
  animation: hf-hud-fade-out 0.32s ease-in forwards;
}

.hf-hud .hf-st__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}

.hf-hud .hf-st__mark {
  flex: none;
  width: 22px;
  height: 22px;
  background: var(--logo-mark) center / contain no-repeat;
}

.hf-hud .hf-st__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 24px;
  line-height: 1;
  letter-spacing: var(--display-tracking);
  white-space: nowrap;
  transform: skewX(var(--slant));
  transform-origin: 0 100%;
}

.hf-hud .hf-st__venue {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  font-family: var(--font-num);
  font-weight: var(--label-weight);
  font-size: 12px;
  letter-spacing: var(--label-tracking);
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hf-hud .hf-st__teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.hf-hud .hf-st__team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hf-hud .hf-st__team--away {
  justify-content: flex-end;
}

.hf-hud .hf-st__team i {
  flex: none;
  width: 6px;
  height: 28px;
}

.hf-hud .hf-st__team--home i { background: var(--home); }
.hf-hud .hf-st__team--away i { background: var(--away); }

.hf-hud .hf-st__team b {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 32px;
  line-height: 0.9;
  letter-spacing: 0.06em;
}

/* The score chip as on the bug: Ink on Marigold, on the slab. */
.hf-hud .hf-st__score {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  background: var(--accent);
  color: var(--on-accent);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.hf-hud .hf-st__score b {
  min-width: 0.6em;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  text-align: center;
}

.hf-hud .hf-st__score i {
  width: 10px;
  height: 3px;
  background: var(--on-accent);
}

.hf-hud .hf-st__rows {
  display: grid;
}

/* One stat per 40 px row on the 8 px grid: [value][bar][label][bar][value]. Each bar
   fills from its own value inward by that side's share, so a number always sits
   against its bar; hairlines keep the rows apart. */
.hf-hud .hf-st__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 120px minmax(0, 1fr) 56px;
  align-items: center;
  column-gap: 8px;
  height: 40px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 7%, transparent);
  animation: hf-hud-rise 0.24s calc(0.16s + var(--i, 0) * 0.04s) var(--ease-out) backwards;
}

.hf-hud .hf-st__row:first-child {
  border-top: 0;
}

/* Values hug their bars: the home figure ends where its bar starts, and the away one
   starts where its bar ends. */
.hf-hud .hf-st__v {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}

.hf-hud .hf-st__v--home {
  text-align: right;
}

.hf-hud .hf-st__row.is-home .hf-st__v--home,
.hf-hud .hf-st__row.is-away .hf-st__v--away,
.hf-hud .hf-st__row:not(.is-home):not(.is-away) .hf-st__v {
  color: var(--paper);
}

.hf-hud .hf-st__label {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  line-height: 1;
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The track runs the full width; the fill is the side's share, in its kit color. */
.hf-hud .hf-st__bar {
  position: relative;
  display: block;
  height: 8px;
  background: color-mix(in srgb, var(--paper) 10%, transparent);
}

.hf-hud .hf-st__bar b {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 3px;
  animation: hf-hud-grow 0.42s calc(0.26s + var(--i, 0) * 0.05s) var(--ease-out) backwards;
}

.hf-hud .hf-st__bar--home b {
  left: 0;
  width: calc(var(--h) * 100%);
  background: var(--home-bar, var(--paper));
  transform-origin: left center;
}

.hf-hud .hf-st__bar--away b {
  right: 0;
  width: calc(var(--a) * 100%);
  background: var(--away-bar, var(--muted));
  transform-origin: right center;
}

.hf-hud .hf-st__bar b.is-zero {
  display: none;
}

/* Card rows keep the real card colors (the only place yellow and red appear). */
.hf-hud .hf-st__row.is-yellow .hf-st__bar b {
  background: var(--yellow-card);
}

.hf-hud .hf-st__row.is-red .hf-st__bar b {
  background: var(--red-card);
}

/* "Match stats by ই-ঠিকানা" (SPONSOR.md): the lead-in in the UI type, never in
   capitals, then the drawn Bangla lockup at its 22 px minimum. */
.hf-hud .hf-st__sponsor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  white-space: nowrap;
  animation: hf-hud-fade-in 0.3s 0.5s ease backwards;
}

.hf-hud .hf-st__art {
  display: block;
  width: auto;
  height: 22px;
}

.hf-hud.hf-hud--compact .hf-st__sponsor { padding-top: 8px; }

.hf-hud .hf-st__foot {
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--label-tracking);
  color: var(--muted);
  text-align: center;
  animation: hf-hud-fade-in 0.3s 0.6s ease backwards;
}

.hf-hud.hf-hud--compact .hf-st__foot { padding-top: 8px; font-size: 10px; }

/* ------------------------------------------------------------ card graphic */

.hf-hud .hf-hud__card {
  position: absolute;
  left: calc(var(--sl) + var(--edge));
  bottom: calc(var(--sb) + var(--edge));
}

.hf-hud.hf-hud--stack .hf-hud__card {
  position: relative;
  left: auto;
  bottom: auto;
}

.hf-hud .hf-hud__card:empty {
  display: none;
}

.hf-hud .hf-cardg {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 280px;
  max-width: min(460px, 46vw);
  height: 72px;
  padding: 0 calc(22px + var(--cut) * 1.4) 0 16px;
  background: var(--plate);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut) * 1.4) 100%, 0 100%);
  box-shadow: inset 4px 0 0 var(--yellow-card);
  animation: hf-hud-reveal 0.28s var(--ease-out) backwards;
}

.hf-hud .hf-cardg--red {
  box-shadow: inset 4px 0 0 var(--red-card);
}

.hf-hud .hf-cardg__cards {
  position: relative;
  flex: none;
  width: 34px;
  height: 46px;
  perspective: 300px;
}

.hf-hud .hf-cardg.is-second .hf-cardg__cards {
  width: 48px;
}

/* The card itself, held up and flipped toward the camera. */
.hf-hud .hf-cardg__c {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 44px;
  background: var(--yellow-card);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  transform: rotate(-7deg);
  animation: hf-hud-flip 0.36s 0.16s var(--ease-out) backwards;
}

.hf-hud .hf-cardg__c--red {
  background: var(--red-card);
}

.hf-hud .hf-cardg.is-second .hf-cardg__c--red {
  left: 14px;
  transform: rotate(6deg);
  animation-delay: 0.42s;
}

.hf-hud .hf-cardg__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hf-hud .hf-cardg__label {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--label-tracking);
  line-height: 1;
  color: var(--yellow-card);
  white-space: nowrap;
}

.hf-hud .hf-cardg--red .hf-cardg__label {
  color: var(--danger);
}

/* The booked player's full real name, the shirt-name part heavier. */
.hf-hud .hf-cardg__name {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: var(--display-stretch);
  font-size: 21px;
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

.hf-hud .hf-cardg__last {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}

.hf-hud .hf-cardg__last b {
  font-weight: var(--display-weight);
  color: var(--paper);
}

.hf-hud .hf-cardg__num {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 4px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
}

.hf-hud .hf-cardg__team {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-num);
  font-weight: var(--label-weight);
  font-size: 12px;
  letter-spacing: var(--label-tracking);
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}

.hf-hud .hf-cardg__team i {
  width: 4px;
  height: 11px;
  background: var(--kit, var(--paper));
}

.hf-hud .hf-cardg.is-out {
  animation: hf-hud-fade-out 0.3s ease-in forwards;
}

/* Compact: the card graphic slims to a row in the stack. */
.hf-hud.hf-hud--compact .hf-cardg {
  min-width: 0;
  height: 44px;
  gap: 10px;
  padding: 0 calc(14px + var(--cut)) 0 10px;
}

.hf-hud.hf-hud--compact .hf-cardg__cards { width: 22px; height: 30px; }
.hf-hud.hf-hud--compact .hf-cardg.is-second .hf-cardg__cards { width: 32px; }
.hf-hud.hf-hud--compact .hf-cardg__c { width: 20px; height: 28px; }
.hf-hud.hf-hud--compact .hf-cardg.is-second .hf-cardg__c--red { left: 10px; }
.hf-hud.hf-hud--compact .hf-cardg__body { gap: 4px; }
.hf-hud.hf-hud--compact .hf-cardg__label { font-size: 10px; }
.hf-hud.hf-hud--compact .hf-cardg { max-width: 100%; }
.hf-hud.hf-hud--compact .hf-cardg__name { font-size: 15px; gap: 6px; }
.hf-hud.hf-hud--compact .hf-cardg__num { min-width: 18px; height: 16px; font-size: 11px; }
.hf-hud.hf-hud--compact .hf-cardg__team { display: none; }

/* ------------------------------------------------------------ power bar */

.hf-hud .hf-hud__power {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sb) + var(--edge) + var(--radar-h) + 16px);
  transform: translate(-50%, 6px);
  opacity: 0;
  transition: opacity 0.2s ease 0.15s, transform 0.2s ease 0.15s;
}

.hf-hud .hf-hud__power.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity 0.08s ease, transform 0.14s var(--ease-out);
}

.hf-hud .hf-pw {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding: 0 calc(14px + var(--cut)) 0 calc(10px + var(--cut));
  background: var(--plate);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}

.hf-hud .hf-pw__label {
  min-width: 4.6em;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: var(--label-tracking);
}

/* Slanted segments that fill in Marigold; past 85% (the over-hit zone) the fill
   turns Rani (brand book, Shot power). */
.hf-hud .hf-pw__track {
  position: relative;
  width: clamp(150px, 20vw, 240px);
  height: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper) 14%, transparent);
  transform: skewX(var(--slant));
}

.hf-hud .hf-pw__fill {
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform-origin: left center;
  transform: scaleX(0);
}

.hf-hud .hf-hud__power[data-kind='shoot'] .hf-pw__fill {
  background: var(--accent);
}

/* Segment gaps every 10%. */
.hf-hud .hf-pw__track::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 3px), var(--plate-solid) calc(10% - 3px) 10%);
}

/* Over-hit zone for shots: error grows past 85%. */
.hf-hud .hf-pw__risk {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 85%;
  width: 2px;
  background: var(--rani-pink);
}

.hf-hud .hf-hud__power:not([data-kind='shoot']) .hf-pw__risk { display: none; }

.hf-hud .hf-hud__power.is-risk .hf-pw__fill {
  background: var(--rani-pink);
}

.hf-hud .hf-hud__power.is-risk .hf-pw__label {
  color: var(--rani-pink);
}

/* ------------------------------------------------------------ aim widget */

.hf-hud .hf-hud__aim {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sb) + var(--edge) + var(--radar-h) + 16px);
  transform: translate(-50%, 6px);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.hf-hud .hf-hud__aim.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity 0.16s ease, transform 0.22s var(--ease-out);
}

.hf-hud .hf-aim {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px calc(16px + var(--cut)) 12px calc(14px + var(--cut));
  background: var(--plate);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}

/* A goal mouth seen from the ball: posts and bar in paper, a faint net. */
.hf-hud .hf-aim__goal {
  position: relative;
  flex: none;
  width: 128px;
  height: 43px;
  border: 3px solid var(--paper);
  border-bottom: 0;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--paper) 10%, transparent) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--paper) 10%, transparent) 0 1px, transparent 1px 8px);
}

/* Grass line under the mouth. */
.hf-hud .hf-aim__goal::after {
  content: '';
  position: absolute;
  left: -14px;
  right: -14px;
  bottom: -2px;
  height: 2px;
  background: color-mix(in srgb, var(--paper) 36%, transparent);
}

/* The reticle: a round target, since it marks a point rather than a panel. */
.hf-hud .hf-aim__dot {
  --x: 0;
  --y: 0;
  position: absolute;
  z-index: 1;
  left: calc(50% + var(--x) * 50%);
  bottom: calc(var(--y) * 100%);
  width: 12px;
  height: 12px;
  margin: 0 0 -6px -6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent);
}

.hf-hud .hf-aim.is-over .hf-aim__dot {
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px color-mix(in srgb, var(--danger) 30%, transparent);
}

/* The user keeper's pick: the chosen half lights up, the top for a high dive. */
.hf-hud .hf-aim__dive {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.hf-hud .hf-aim[data-side='left'] .hf-aim__dive { left: 0; opacity: 1; }
.hf-hud .hf-aim[data-side='right'] .hf-aim__dive { right: 0; opacity: 1; }
.hf-hud .hf-aim.is-high .hf-aim__dive { bottom: 45%; }

.hf-hud .hf-aim__arrow {
  display: none;
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  border-radius: 50%;
}

.hf-hud .hf-aim__arrow i {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 0;
  height: 0;
  margin-left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 16px solid var(--paper);
}

.hf-hud .hf-aim__arrow i::after {
  content: '';
  position: absolute;
  left: -1.5px;
  top: 15px;
  width: 3px;
  height: 10px;
  background: var(--paper);
}

.hf-hud .hf-aim[data-kind='pass'] .hf-aim__goal,
.hf-hud .hf-aim[data-kind='save'] .hf-aim__dot,
.hf-hud .hf-aim[data-kind='save'] .hf-aim__meter,
.hf-hud .hf-aim[data-kind='pass'] .hf-aim__meter {
  display: none;
}

.hf-hud .hf-aim[data-kind='pass'] .hf-aim__arrow {
  display: block;
}

.hf-hud .hf-aim__side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
}

.hf-hud .hf-aim__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hf-hud .hf-aim__kind {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 18px;
  line-height: 1;
  letter-spacing: var(--display-tracking);
}

.hf-hud .hf-aim__curl {
  padding: 3px 6px 2px;
  border: 1px solid color-mix(in srgb, var(--paper) 34%, transparent);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--label-tracking);
  color: var(--muted);
}

.hf-hud .hf-aim[data-kind='penalty'] .hf-aim__curl,
.hf-hud .hf-aim[data-kind='save'] .hf-aim__curl,
.hf-hud .hf-aim[data-kind='pass'] .hf-aim__curl {
  display: none;
}

.hf-hud .hf-aim.is-curl .hf-aim__curl {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.hf-hud .hf-aim__meter {
  position: relative;
  height: 6px;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper) 14%, transparent);
}

.hf-hud .hf-aim__fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
}

.hf-hud .hf-aim__risk {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 85%;
  width: 2px;
  background: var(--paper);
}

.hf-hud .hf-aim.is-risk .hf-aim__fill {
  background: var(--danger);
}

.hf-hud .hf-aim__hints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 6px;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
  white-space: nowrap;
}

.hf-hud .hf-aim__hints b {
  padding: 2px 5px 1px;
  border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
  font-weight: 700;
  color: var(--paper);
  letter-spacing: 0.06em;
}

/* Penalties are framed from behind the spot with the ball in the lower third:
   on desktop the aim widget drops into the radar's place, below the ball. */
.hf-hud.has-spot-aim:not(.hf-hud--touch) .hf-hud__aim {
  bottom: calc(var(--sb) + var(--edge));
}

.hf-hud.hf-hud--compact .hf-aim { gap: 12px; padding: 9px calc(12px + var(--cut)) 9px calc(10px + var(--cut)); }
.hf-hud.hf-hud--compact .hf-aim__goal { width: 96px; height: 32px; }
/* Long touch hints wrap to a second line instead of widening the widget. */
.hf-hud.hf-hud--compact .hf-aim__side { min-width: 128px; max-width: 168px; gap: 6px; }
.hf-hud.hf-hud--compact .hf-aim__hints { white-space: normal; gap: 4px 5px; font-size: 10px; letter-spacing: 0.08em; }
.hf-hud.hf-hud--compact .hf-aim__hints b { white-space: nowrap; }
.hf-hud.hf-hud--compact .hf-aim__kind { font-size: 15px; }
.hf-hud.hf-hud--compact .hf-aim__arrow { width: 38px; height: 38px; }
.hf-hud.hf-hud--compact .hf-pw { height: 28px; }
.hf-hud.hf-hud--compact .hf-pw__track { width: 150px; }

/* ------------------------------------------------------------ radar */

.hf-hud .hf-hud__radar {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sb) + var(--edge));
  width: var(--radar-w);
  transform: translateX(-50%);
  transition: opacity 0.22s ease;
}

.hf-hud.no-radar .hf-hud__radar {
  display: none;
}

.hf-hud .hf-radar {
  position: relative;
  overflow: hidden;
  opacity: var(--radar-alpha);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 16%, transparent);
}

/* Accent hairline across the top edge. */
.hf-hud .hf-radar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--accent);
}

.hf-hud .hf-radar__cv {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 113 / 76;
}

.hf-hud .hf-radar__cam {
  position: absolute;
  left: calc(100% + 8px);
  bottom: 0;
  padding: 5px 9px 4px;
  border-left: 2px solid var(--accent);
  background: var(--plate);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.hf-hud .hf-radar__cam.is-on {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------ replay */

.hf-hud .hf-hud__replay {
  position: absolute;
  top: calc(var(--st) + var(--edge));
  right: calc(var(--sr) + var(--edge));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hf-hud.is-replay .hf-hud__replay {
  opacity: 1;
  transform: none;
  transition: opacity 0.22s ease 0.2s, transform 0.26s var(--ease-out) 0.2s;
}

.hf-hud .hf-rp {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--bug-h);
  padding: 0 calc(14px + var(--cut)) 0 calc(10px + var(--cut));
  background: var(--plate-solid);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}

.hf-hud .hf-rp__mark {
  flex: none;
  width: calc(var(--bug-h) * 0.62);
  height: calc(var(--bug-h) * 0.62);
  background: var(--logo-mark) center / contain no-repeat;
}

.hf-hud.is-replay .hf-rp__mark {
  animation: hf-hud-spin-in 0.42s 0.22s var(--ease-out) backwards;
}

.hf-hud .hf-rp__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hf-hud .hf-rp__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: calc(var(--bug-h) * 0.52);
  line-height: 1;
  letter-spacing: var(--display-tracking);
}

/* A Rani tally light that blinks: a replay is a big moment, like LIVE. */
.hf-hud .hf-rp__title::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rani-pink);
}

.hf-hud.is-replay .hf-rp__title::before {
  animation: hf-hud-tally 1s steps(2, jump-none) infinite;
}

.hf-hud .hf-rp__sub {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--label-tracking);
  color: var(--muted);
}

.hf-hud .hf-rp__sub:empty {
  display: none;
}

/* The sponsor's credit, on its own small line under the bug so it never crowds
   REPLAY: the lead-in in the UI type (never upper-cased), then the drawn lockup at
   its minimum size (Latin 16 px, Bangla 22 px tall). */
.hf-hud .hf-rp__by {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px calc(10px + var(--cut) * 0.5) 4px 10px;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  white-space: nowrap;
}

.hf-hud .hf-rp__by:empty {
  display: none;
}

/* Bangla never under 13 px (the sponsor's typography guide). */
.hf-hud .hf-rp__lead:lang(bn) {
  font-size: 13px;
  font-weight: 600;
}

.hf-hud .hf-rp__art {
  display: block;
  width: auto;
  height: 22px;
}

.hf-hud .hf-rp__art.is-latin {
  height: 16px;
}

.hf-hud .hf-rp__bar {
  width: 100%;
  height: 3px;
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  overflow: hidden;
}

.hf-hud .hf-rp__bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
}

.hf-hud .hf-rp__skip {
  padding: 4px 8px 3px;
  background: color-mix(in srgb, var(--ink) 60%, transparent);
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--label-tracking);
  color: var(--paper);
}

.hf-hud.hf-hud--compact .hf-rp__body { gap: 2px; }
.hf-hud.hf-hud--compact .hf-rp__sub { font-size: 10px; }

/* Letterbox: thin cinema bars frame the replay. */
.hf-hud .hf-hud__lb {
  position: absolute;
  left: 0;
  right: 0;
  height: 6vh;
  background: var(--plate-solid);
  transition: transform 0.3s var(--ease-out);
}

.hf-hud .hf-hud__lb--top {
  top: 0;
  transform: translateY(-100%);
}

.hf-hud .hf-hud__lb--bot {
  bottom: 0;
  transform: translateY(100%);
}

.hf-hud.is-replay .hf-hud__lb {
  transform: none;
}

/* The sting: an ink panel stamps the T! mark across the screen between live and replay. */
.hf-hud .hf-hud__wipe {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: var(--plate-solid);
  transform: translateX(-101%);
  visibility: hidden;
}

/* A Marigold edge leads the sting. */
.hf-hud .hf-hud__wipe::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 10px;
  background: var(--accent);
}

.hf-hud .hf-wipe__mark {
  width: clamp(80px, 16vmin, 160px);
  height: clamp(80px, 16vmin, 160px);
  background: var(--logo-mark) center / contain no-repeat;
}

.hf-hud .hf-hud__wipe.is-on {
  visibility: visible;
  animation: hf-hud-sting 0.62s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* ------------------------------------------------------------ line-ups */

.hf-hud .hf-hud__lineups {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(var(--st) + 10px) calc(var(--sr) + 12px) calc(var(--sb) + 10px) calc(var(--sl) + 12px);
}

.hf-hud .hf-hud__lineups:empty {
  display: none;
}

.hf-hud .hf-lu {
  position: relative;
  width: min(780px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px 14px;
  background: color-mix(in srgb, var(--ink) 93%, transparent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  clip-path: polygon(0 0, calc(100% - var(--kick-l)) 0, 100% var(--kick-l), 100% 100%, 0 100%);
  overflow: hidden;
  animation: hf-hud-pop 0.3s var(--ease-out) backwards;
}

.hf-hud .hf-lu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--accent);
}

.hf-hud .hf-lu.is-out {
  animation: hf-hud-fade-out 0.4s ease-in forwards;
}

.hf-hud .hf-lu__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}

.hf-hud .hf-lu__mark {
  flex: none;
  width: 28px;
  height: 28px;
  background: var(--logo-mark) center / contain no-repeat;
}

.hf-hud .hf-lu__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: clamp(20px, 2.8vw, 28px);
  line-height: 1;
  letter-spacing: var(--display-tracking);
  transform: skewX(var(--slant));
  transform-origin: 0 100%;
}

.hf-hud .hf-lu__venue {
  margin-left: auto;
  font-family: var(--font-num);
  font-weight: var(--label-weight);
  font-size: 12px;
  letter-spacing: var(--label-tracking);
  color: var(--muted);
  white-space: nowrap;
}

.hf-hud .hf-lu__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  min-height: 0;
}

.hf-hud .hf-lu__team {
  min-width: 0;
}

.hf-hud .hf-lu__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.hf-hud .hf-lu__kit {
  flex: none;
  width: 6px;
  height: 30px;
  background: linear-gradient(180deg, var(--kit) 0 64%, var(--kit2) 64% 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 24%, transparent);
}

.hf-hud .hf-lu__code {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 32px;
  line-height: 0.88;
  letter-spacing: 0.04em;
}

.hf-hud .hf-lu__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

.hf-hud .hf-lu__meta span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.hf-hud .hf-lu__form {
  color: var(--muted);
}

.hf-hud .hf-lu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.hf-hud .hf-lu__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  padding: 2px 4px 2px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 6%, transparent);
  animation: hf-hud-slide 0.26s calc(0.12s + var(--i, 0) * 0.03s) var(--ease-out) backwards;
}

.hf-hud .hf-lu__team--away .hf-lu__list li {
  animation-name: hf-hud-slide-r;
}

.hf-hud .hf-lu__num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 20px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
}

/* The full real name: given names in the UI face, the shirt-name part in the
   display face and capitals (<b>, from hud.js), so both read at a glance. */
.hf-hud .hf-lu__name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hf-hud .hf-lu__name b {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--paper);
}

.hf-hud .hf-lu__pos {
  flex: none;
  min-width: 34px;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-align: right;
}

.hf-hud .hf-lu__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  font-family: var(--font-num);
  font-weight: var(--label-weight);
  font-size: 12px;
  letter-spacing: var(--label-tracking);
  color: var(--graphite);
}

/* The drawn TAKKAR! wordmark (never retyped), at its 96 px minimum width or more. */
.hf-hud .hf-lu__word {
  display: block;
  width: auto;
  height: 16px;
}

/* The pager only shows where the sides take turns (short screens, below). */
.hf-hud .hf-lu__pager {
  display: none;
}

/* Touch screens: the card hangs under the pause chip, clear of the thumbs below. */
.hf-hud.hf-hud--touch .hf-hud__lineups {
  place-items: start center;
  padding-top: calc(var(--st) + 64px);
}

/* Short screens (landscape phones): one side at a time, home then away, in a card
   that sits under the pause chip and between the joystick and the buttons. Each
   eleven runs in two columns of six; the pager's accent line times the beat. */
.hf-hud.hf-hud--short .hf-hud__lineups {
  place-items: start center;
  padding: calc(var(--st) + 56px) calc(var(--sr) + 12px) 0 calc(var(--sl) + 12px);
}

.hf-hud.hf-hud--short .hf-lu {
  width: min(480px, calc(100% - 330px));
  min-width: min(300px, 100%);
  gap: 8px;
  padding: 12px 16px 10px;
  background: color-mix(in srgb, var(--ink) 95%, transparent);
  clip-path: polygon(0 0, calc(100% - var(--kick-m)) 0, 100% var(--kick-m), 100% 100%, 0 100%);
}

.hf-hud.hf-hud--short .hf-lu__top { gap: 8px; padding-bottom: 8px; }
.hf-hud.hf-hud--short .hf-lu__mark { width: 16px; height: 16px; }
.hf-hud.hf-hud--short .hf-lu__title { font-size: 16px; }
.hf-hud.hf-hud--short .hf-lu__venue,
.hf-hud.hf-hud--short .hf-lu__foot { display: none; }

.hf-hud.hf-hud--short .hf-lu__pager {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.hf-hud .hf-lu__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--muted);
  transition: color 0.2s ease;
}

.hf-hud .hf-lu__tab i {
  width: 3px;
  height: 10px;
  background: var(--kit, var(--paper));
}

/* Track and fill of the beat line under each tab. */
.hf-hud .hf-lu__tab::before,
.hf-hud .hf-lu__tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: color-mix(in srgb, var(--paper) 16%, transparent);
}

.hf-hud .hf-lu__tab::after {
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.hf-hud .hf-lu:not(.is-second) .hf-lu__tab--home,
.hf-hud .hf-lu.is-second .hf-lu__tab--away {
  color: var(--paper);
}

.hf-hud .hf-lu:not(.is-second) .hf-lu__tab--home::after,
.hf-hud .hf-lu.is-second .hf-lu__tab--away::after {
  animation: hf-hud-beat var(--beat, 3s) linear forwards;
}

.hf-hud .hf-lu.is-second .hf-lu__tab--home::after {
  transform: none;
  background: color-mix(in srgb, var(--paper) 44%, transparent);
}

.hf-hud.hf-hud--short .hf-lu__cols { display: block; }

.hf-hud.hf-hud--short .hf-lu:not(.is-second) .hf-lu__team--away,
.hf-hud.hf-hud--short .hf-lu.is-second .hf-lu__team--home {
  display: none;
}

/* Each side's turn starts with its head wiping in and its names sliding after. */
.hf-hud.hf-hud--short .hf-lu__head {
  gap: 8px;
  margin-bottom: 8px;
  animation: hf-hud-reveal 0.24s var(--ease-out) backwards;
}

.hf-hud.hf-hud--short .hf-lu__kit { width: 4px; height: 24px; }
.hf-hud.hf-hud--short .hf-lu__code { font-size: 26px; }
.hf-hud.hf-hud--short .hf-lu__meta { gap: 3px; font-size: 11px; letter-spacing: 0.1em; }

.hf-hud.hf-hud--short .hf-lu__list {
  grid-template-rows: repeat(6, 20px);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0 16px;
}

.hf-hud.hf-hud--short .hf-lu__list li {
  min-height: 0;
  height: 20px;
  gap: 8px;
  padding: 0;
  animation-duration: 0.22s;
  animation-delay: calc(0.08s + var(--i, 0) * 0.025s);
}

.hf-hud.hf-hud--short .hf-lu__num { width: 20px; height: 16px; font-size: 12px; }
.hf-hud.hf-hud--short .hf-lu__name { font-size: 12px; }
.hf-hud.hf-hud--short .hf-lu__name b { font-size: 13px; }
.hf-hud.hf-hud--short .hf-lu__pos { min-width: 28px; font-size: 11px; letter-spacing: 0.1em; }

/* ------------------------------------------------------------ shootout */

.hf-hud .hf-hud__shootout {
  position: absolute;
  top: calc(var(--st) + var(--edge));
  left: 50%;
  transform: translateX(-50%);
}

.hf-hud .hf-so {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 14px 10px;
  background: var(--plate-solid);
  box-shadow: var(--shadow-s);
  animation: hf-hud-drop 0.26s var(--ease-out) backwards;
}

.hf-hud .hf-so__title {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--label-tracking);
  color: var(--muted);
}

.hf-hud .hf-so__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 6px;
  border-left: 2px solid transparent;
}

.hf-hud .hf-so__row.is-next {
  border-left-color: var(--accent);
}

.hf-hud .hf-so__kit {
  width: 4px;
  height: 14px;
  background: var(--kit, var(--paper));
}

.hf-hud .hf-so__code {
  min-width: 42px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: var(--display-tracking);
}

.hf-hud .hf-so__dots {
  display: flex;
  gap: 4px;
}

.hf-hud .hf-so__dots i {
  width: 11px;
  height: 11px;
  border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
}

.hf-hud .hf-so__dots i.is-goal {
  border-color: var(--paper);
  background: var(--paper);
}

.hf-hud .hf-so__dots i.is-miss {
  border-color: var(--danger);
  background: var(--danger);
}

.hf-hud .hf-so__score {
  min-width: 16px;
  margin-left: 4px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 20px;
  text-align: right;
}

.hf-hud.hf-hud--compact .hf-so { gap: 3px; padding: 6px 10px 7px; }
.hf-hud.hf-hud--compact .hf-so__title { font-size: 10px; }
.hf-hud.hf-hud--compact .hf-so__row { gap: 8px; padding-left: 5px; }
.hf-hud.hf-hud--compact .hf-so__kit { height: 11px; width: 3px; }
.hf-hud.hf-hud--compact .hf-so__code { min-width: 32px; font-size: 13px; }
.hf-hud.hf-hud--compact .hf-so__dots { gap: 3px; }
.hf-hud.hf-hud--compact .hf-so__dots i { width: 9px; height: 9px; }
.hf-hud.hf-hud--compact .hf-so__score { font-size: 15px; }

/* No clock in a shootout: the tracker carries the score that matters. */
.hf-hud.has-shootout .hf-sb__clock,
.hf-hud.has-shootout .hf-sb__added,
.hf-hud.has-shootout .hf-sb__progress {
  display: none;
}

/* ------------------------------------------------------------ touch placement */
/* The bottom corners belong to the joystick and the buttons, the top center to the
   pause button: the radar goes top right, the overlays sit under the pause strip, and
   the power bar and aim widget sit in the gap between the thumbs. */

.hf-hud.hf-hud--touch .hf-hud__radar {
  left: auto;
  right: calc(var(--sr) + var(--edge));
  top: calc(var(--st) + var(--edge));
  bottom: auto;
  transform: none;
}

.hf-hud.hf-hud--touch .hf-radar__cam {
  left: auto;
  right: 0;
  top: calc(100% + 6px);
  bottom: auto;
}

.hf-hud.hf-hud--touch .hf-hud__power,
.hf-hud.hf-hud--touch .hf-hud__aim {
  bottom: calc(var(--sb) + 18px);
}

/* The arc beside the player replaces the bar on touch screens. */
.hf-hud.hf-hud--touch.has-arc .hf-hud__power {
  opacity: 0;
  transition: none;
}

.hf-hud.hf-hud--touch .hf-hud__shootout {
  left: auto;
  right: calc(var(--sr) + var(--edge));
  transform: none;
}

.hf-hud.hf-hud--compact .hf-hud__info,
.hf-hud.hf-hud--compact .hf-hud__call {
  top: calc(var(--st) + 58px);
}

.hf-hud.hf-hud--compact .hf-info b { font-size: 18px; }
.hf-hud.hf-hud--compact .hf-info span { font-size: 10px; }
.hf-hud.hf-hud--compact .hf-info__body { padding: 8px 0 7px; gap: 4px; }
.hf-hud.hf-hud--compact .hf-info__bar { width: 5px; margin-right: 10px; }
.hf-hud.hf-hud--compact .hf-call__body { padding: 7px 0 8px; gap: 4px; }
.hf-hud.hf-hud--compact .hf-call:not(.hf-call--penalty) .hf-call__bar { width: 6px; margin-right: 12px; }
.hf-hud.hf-hud--compact .hf-call__kicker { font-size: 10px; }
.hf-hud.hf-hud--compact .hf-call__title { font-size: 26px; }
.hf-hud.hf-hud--compact .hf-call__sub { font-size: 10px; }
.hf-hud.hf-hud--compact .hf-call--penalty .hf-call__title { font-size: 52px; }
.hf-hud.hf-hud--compact .hf-call--advantage .hf-call__title { font-size: 20px; }
.hf-hud.hf-hud--compact .hf-call--penalty .hf-call__body { padding: 9px 0 10px; gap: 6px; }

/* Compact goal graphic. */
.hf-hud.hf-hud--compact .hf-goal { --word: clamp(56px, min(13vw, 22vh), 120px); }
.hf-hud.hf-hud--compact .hf-goal__card { gap: 10px; }
.hf-hud.hf-hud--compact .hf-goal__num { min-width: 34px; height: 34px; font-size: 18px; }
.hf-hud.hf-hud--compact .hf-goal__name { font-size: 19px; }
.hf-hud.hf-hud--compact .hf-goal__min { font-size: 19px; padding-left: 10px; }
.hf-hud.hf-hud--compact .hf-goal__kicker,
.hf-hud.hf-hud--compact .hf-goal__assist { font-size: 10px; }
.hf-hud.hf-hud--compact .hf-goal__sub { font-size: 15px; }

/* Compact banners and stats. */
.hf-hud.hf-hud--compact .hf-ban__panel { padding: 14px calc(26px + var(--cut)) 16px; min-width: min(420px, 100%); }
.hf-hud.hf-hud--compact .hf-ban__title { font-size: 44px; margin-top: 8px; }
.hf-hud.hf-hud--compact .hf-ban__rule { margin-top: 10px; }
.hf-hud.hf-hud--compact .hf-ban__sub { margin-top: 8px; }
.hf-hud.hf-hud--compact .hf-ban__subtext { font-size: 17px; }
.hf-hud.hf-hud--compact .hf-ban__kicker { font-size: 10px; }

/* Phones: 32 px rows, 22 px values and 11 px labels, so seven stats fit under the pause
   chip and above the bottom edge of a 390 px screen. */
.hf-hud.hf-hud--compact .hf-st { width: min(520px, 100%); gap: 8px; padding: 12px 16px 8px; }
.hf-hud.hf-hud--compact .hf-st__head { padding-bottom: 8px; }
.hf-hud.hf-hud--compact .hf-st__mark { width: 16px; height: 16px; }
.hf-hud.hf-hud--compact .hf-st__title { font-size: 18px; }
.hf-hud.hf-hud--compact .hf-st__venue { font-size: 10px; }
.hf-hud.hf-hud--compact .hf-st__team b { font-size: 22px; }
.hf-hud.hf-hud--compact .hf-st__team i { height: 20px; width: 4px; }
.hf-hud.hf-hud--compact .hf-st__score { height: 32px; padding: 0 12px; gap: 8px; }
.hf-hud.hf-hud--compact .hf-st__score b { font-size: 22px; }
.hf-hud.hf-hud--compact .hf-st__row { grid-template-columns: 48px minmax(0, 1fr) 112px minmax(0, 1fr) 48px; height: 32px; }
.hf-hud.hf-hud--compact .hf-st__v { font-size: 22px; }
.hf-hud.hf-hud--compact .hf-st__label { font-size: 11px; letter-spacing: 0.1em; }
.hf-hud.hf-hud--compact .hf-st__bar { height: 6px; }

/* Big desktop screens: the broadcast package one step larger. */
@media (min-width: 1280px) and (min-height: 760px) {
  .hf-hud:not(.hf-hud--compact) {
    --edge: 20px;
    --cut: 12px;
    --bug-h: 46px;
    --bug-code: 21px;
    --bug-goals: 28px;
    --bug-time: 20px;
    --bug-label: 11px;
    --kit-w: 6px;
    --line-h: 30px;
    --line-size: 13px;
  }

  .hf-hud:not(.hf-hud--compact) .hf-wl__chip { height: 24px; bottom: 9px; }
  .hf-hud:not(.hf-hud--compact) .hf-wl__num { min-width: 26px; font-size: 14px; }
  .hf-hud:not(.hf-hud--compact) .hf-wl__name { font-size: 13px; padding: 0 10px 0 8px; }
  .hf-hud:not(.hf-hud--compact) .hf-wl__ptr { left: -7px; border-left-width: 7px; border-right-width: 7px; border-top-width: 9px; }
  .hf-hud:not(.hf-hud--compact) .hf-tag { height: 66px; min-width: 260px; }
  .hf-hud:not(.hf-hud--compact) .hf-tag__num { min-width: 62px; font-size: 32px; }
  .hf-hud:not(.hf-hud--compact) .hf-tag__name { font-size: 20px; }
  .hf-hud:not(.hf-hud--compact) .hf-aim__goal { width: 150px; height: 50px; }
  .hf-hud:not(.hf-hud--compact) .hf-aim__side { min-width: 170px; }
  .hf-hud:not(.hf-hud--compact) .hf-aim__kind { font-size: 20px; }
  .hf-hud:not(.hf-hud--compact) .hf-aim__hints { font-size: 10px; }
  .hf-hud:not(.hf-hud--compact) .hf-cardg { height: 80px; min-width: 300px; }
  .hf-hud:not(.hf-hud--compact) .hf-cardg__name { font-size: 24px; }
  .hf-hud:not(.hf-hud--compact) .hf-call:not(.hf-call--penalty):not(.hf-call--advantage) .hf-call__title { font-size: 42px; }
  .hf-hud:not(.hf-hud--compact) .hf-info b { font-size: 28px; }
  .hf-hud:not(.hf-hud--compact) .hf-st { width: 640px; }
  /* The line-ups card reads from the sofa: bigger names on 28 px rows. */
  .hf-hud:not(.hf-hud--compact) .hf-lu { width: 860px; gap: 16px; padding: 24px 28px 16px; }
  .hf-hud:not(.hf-hud--compact) .hf-lu__title { font-size: 32px; }
  .hf-hud:not(.hf-hud--compact) .hf-lu__mark { width: 32px; height: 32px; }
  .hf-hud:not(.hf-hud--compact) .hf-lu__venue { font-size: 11px; }
  .hf-hud:not(.hf-hud--compact) .hf-lu__cols { gap: 32px; }
  .hf-hud:not(.hf-hud--compact) .hf-lu__code { font-size: 34px; }
  .hf-hud:not(.hf-hud--compact) .hf-lu__kit { height: 34px; }
  .hf-hud:not(.hf-hud--compact) .hf-lu__meta { font-size: 11px; }
  .hf-hud:not(.hf-hud--compact) .hf-lu__list li { min-height: 28px; gap: 12px; }
  .hf-hud:not(.hf-hud--compact) .hf-lu__num { width: 28px; height: 22px; font-size: 14px; }
  .hf-hud:not(.hf-hud--compact) .hf-lu__name { font-size: 15px; }
  .hf-hud:not(.hf-hud--compact) .hf-lu__name b { font-size: 17px; }
  .hf-hud:not(.hf-hud--compact) .hf-lu__pos { min-width: 40px; font-size: 11px; }
  .hf-hud:not(.hf-hud--compact) .hf-lu__foot { font-size: 11px; }
}

/* Short touch screens: the stats panel stays in the gap between the joystick and
   the button cluster, which reach up past the middle of a landscape phone. */
@media (max-height: 540px) {
  .hf-hud.hf-hud--touch .hf-hud__stats {
    place-items: start center;
    padding-top: calc(var(--st) + 56px);
    padding-left: calc(var(--sl) + 176px);
    padding-right: calc(var(--sr) + 216px);
  }

  /* No height to spare for a footer: the sponsor's credit takes the head row's right
     end instead (the venue is on the banners either side of the break). */
  .hf-hud .hf-st__venue {
    display: none;
  }

  .hf-hud .hf-st__sponsor {
    position: absolute;
    top: 10px;
    right: calc(var(--kick-l) + 8px);
    padding: 0;
    border: 0;
  }
}

/* The smallest landscape phones (360 px tall): 28 px rows keep all seven stats on screen. */
@media (max-height: 380px) {
  .hf-hud.hf-hud--compact .hf-st__row { grid-template-columns: 44px minmax(0, 1fr) 104px minmax(0, 1fr) 44px; column-gap: 6px; height: 28px; }
}

/* Roomy touch screens (tablets): compact placement, closer to desktop sizes. */
@media (min-width: 1000px) and (min-height: 700px) {
  .hf-hud.hf-hud--compact {
    --edge: 16px;
    --cut: 9px;
    --bug-h: 40px;
    --bug-code: 19px;
    --bug-goals: 25px;
    --bug-time: 18px;
    --bug-label: 10px;
    --kit-w: 5px;
    --line-h: 28px;
    --line-size: 12px;
    --label-tracking: 0.16em;
  }

  .hf-hud.hf-hud--compact .hf-tag__num { font-size: 15px; }
  .hf-hud.hf-hud--compact .hf-tag__name { font-size: 14px; }
  /* A tablet's chip has room for the full name again. */
  .hf-hud.hf-hud--compact .hf-tag__first,
  .hf-hud.hf-hud--compact .hf-tag__last { display: inline; }
  .hf-hud.hf-hud--compact .hf-tag__first:empty { display: none; }
  .hf-hud.hf-hud--compact .hf-tag__shirt { display: none; }
  .hf-hud.hf-hud--compact .hf-tag__meta { font-size: 10px; }
  .hf-hud.hf-hud--compact .hf-tag__bar { width: 56px; height: 4px; }
  .hf-hud.hf-hud--compact .hf-wl__chip { height: 22px; bottom: 8px; }
  .hf-hud.hf-hud--compact .hf-wl__num { min-width: 24px; font-size: 13px; }
  .hf-hud.hf-hud--compact .hf-wl__name { font-size: 12px; padding: 0 9px 0 8px; }
  .hf-hud.hf-hud--compact .hf-cardg { height: 60px; gap: 14px; }
  .hf-hud.hf-hud--compact .hf-cardg__cards { width: 30px; height: 40px; }
  .hf-hud.hf-hud--compact .hf-cardg__c { width: 28px; height: 38px; }
  .hf-hud.hf-hud--compact .hf-cardg__name { font-size: 19px; }
  .hf-hud.hf-hud--compact .hf-cardg__team { display: flex; }
  .hf-hud.hf-hud--compact .hf-call:not(.hf-call--penalty):not(.hf-call--advantage) .hf-call__title { font-size: 34px; }
  .hf-hud.hf-hud--compact .hf-call--penalty .hf-call__title { font-size: 80px; }
  .hf-hud.hf-hud--compact .hf-info b { font-size: 22px; }
  .hf-hud.hf-hud--compact .hf-st { width: min(600px, 100%); gap: 16px; padding: 20px 24px 16px; }
  .hf-hud.hf-hud--compact .hf-st__head { padding-bottom: 12px; }
  .hf-hud.hf-hud--compact .hf-st__mark { width: 22px; height: 22px; }
  .hf-hud.hf-hud--compact .hf-st__title { font-size: 24px; }
  .hf-hud.hf-hud--compact .hf-st__venue { font-size: 11px; }
  .hf-hud.hf-hud--compact .hf-st__team b { font-size: 28px; }
  .hf-hud.hf-hud--compact .hf-st__team i { height: 26px; width: 6px; }
  .hf-hud.hf-hud--compact .hf-st__score { height: 44px; padding: 0 16px; gap: 10px; }
  .hf-hud.hf-hud--compact .hf-st__score b { font-size: 28px; }
  .hf-hud.hf-hud--compact .hf-st__row { grid-template-columns: 56px minmax(0, 1fr) 120px minmax(0, 1fr) 56px; height: 40px; }
  .hf-hud.hf-hud--compact .hf-st__v { font-size: 24px; }
  .hf-hud.hf-hud--compact .hf-st__label { font-size: 12px; letter-spacing: 0.12em; }
  .hf-hud.hf-hud--compact .hf-st__bar { height: 8px; }
  .hf-hud.hf-hud--compact .hf-aim__goal { width: 128px; height: 43px; }
  .hf-hud.hf-hud--compact .hf-aim__kind { font-size: 18px; }

  .hf-hud.hf-hud--compact .hf-hud__info,
  .hf-hud.hf-hud--compact .hf-hud__call {
    top: calc(var(--st) + 12%);
  }
}

/* ------------------------------------------------------------ narrow screens */

@media (max-width: 720px) {
  /* Keep the bottom-centre radar clear of the player tag. */
  .hf-hud:not(.hf-hud--touch) .hf-hud__radar {
    left: auto;
    right: calc(var(--sr) + var(--edge));
    transform: none;
  }

  .hf-hud:not(.hf-hud--touch) .hf-radar__cam {
    left: auto;
    right: 0;
    bottom: calc(100% + 6px);
  }

  .hf-hud .hf-lu { padding: 14px 14px 10px; gap: 10px; }
  .hf-hud .hf-lu__cols { gap: 14px; }
  .hf-hud .hf-lu__venue { display: none; }
}

@media (max-width: 600px) {
  .hf-hud .hf-lu__code { font-size: 22px; }
  .hf-hud .hf-lu__list li { min-height: 20px; gap: 7px; }
  .hf-hud .hf-lu__num { width: 21px; height: 17px; font-size: 11px; }
  .hf-hud .hf-lu__name { font-size: 12px; }
  .hf-hud .hf-lu__pos { min-width: 28px; font-size: 10px; letter-spacing: 0.1em; }
  .hf-hud .hf-lu__meta { font-size: 10px; letter-spacing: 0.1em; }
}

/* Portrait phones (the game asks for landscape, but never break): the pause button
   moves to the top-right corner (css/controls.css), so the radar and replay bug drop
   below it. */
@media (max-width: 520px) {
  .hf-hud .hf-hud__stack { max-width: calc(100% - 64px - var(--sl) - var(--edge)); }
  .hf-hud.hf-hud--touch .hf-hud__radar { top: calc(var(--st) + var(--edge) + 46px); }
  .hf-hud .hf-hud__replay { top: calc(var(--st) + var(--edge) + 46px); }
  .hf-hud.hf-hud--touch .hf-hud__power,
  .hf-hud.hf-hud--touch .hf-hud__aim { bottom: calc(var(--sb) + 214px); }
  .hf-hud.hf-hud--touch .hf-hud__shootout { top: calc(var(--st) + var(--edge) + 46px); }
  .hf-hud .hf-call__title { font-size: 26px; }
}

/* Short landscape screens: a line-ups card that fits 11 rows in 360 px. */
@media (max-height: 480px) {
  .hf-hud .hf-lu { padding: 12px 14px 8px; gap: 8px; }
  .hf-hud .hf-lu__top { padding-bottom: 8px; }
  .hf-hud .hf-lu__mark { width: 22px; height: 22px; }
  .hf-hud .hf-lu__head { margin-bottom: 4px; }
  .hf-hud .hf-lu__kit { height: 22px; }
  .hf-hud .hf-lu__code { font-size: 20px; }
  .hf-hud .hf-lu__list { gap: 0; }
  .hf-hud .hf-lu__list li { min-height: 18px; padding: 1px 4px 1px 0; }
  .hf-hud .hf-lu__num { height: 15px; font-size: 10px; }
  .hf-hud .hf-lu__name { font-size: 11px; }
  .hf-hud .hf-lu__name b { font-size: 12px; }
  .hf-hud .hf-lu__foot { display: none; }
  .hf-hud .hf-hud__lb { height: 5vh; }
}

/* ------------------------------------------------------------ who steps aside */

/* One rule for everything that yields to a bigger moment. */
.hf-hud.is-replay .hf-hud__world,
.hf-hud.is-replay .hf-hud__tag,
.hf-hud.is-replay .hf-hud__radar,
.hf-hud.is-replay .hf-hud__power,
.hf-hud.is-replay .hf-hud__aim,
.hf-hud.is-replay .hf-hud__ticker,
.hf-hud.is-replay .hf-hud__info,
.hf-hud.is-replay .hf-hud__call,
.hf-hud.is-replay .hf-hud__card,
.hf-hud.has-lineups .hf-hud__world,
.hf-hud.has-lineups .hf-hud__tag,
.hf-hud.has-lineups .hf-hud__radar,
.hf-hud.has-lineups .hf-hud__stack,
.hf-hud.has-lineups .hf-hud__info,
.hf-hud.has-goal .hf-hud__world,
.hf-hud.has-goal .hf-hud__ticker,
.hf-hud.has-goal .hf-hud__info,
.hf-hud.has-goal .hf-hud__call,
.hf-hud.has-goal .hf-hud__power,
.hf-hud.has-goal .hf-hud__aim,
.hf-hud.has-goal .hf-hud__banner,
.hf-hud.has-stats .hf-hud__world,
.hf-hud.has-stats .hf-hud__radar,
.hf-hud.has-stats .hf-hud__replay,
.hf-hud.has-stats .hf-hud__goal,
.hf-hud.has-stats .hf-sb__event,
.hf-hud.has-stats .hf-hud__banner,
.hf-hud.has-stats .hf-hud__info,
.hf-hud.has-stats .hf-hud__call,
.hf-hud.has-stats .hf-hud__ticker,
.hf-hud.has-stats .hf-hud__tag,
.hf-hud.has-stats .hf-hud__card,
.hf-hud.has-stats .hf-hud__power,
.hf-hud.has-stats .hf-hud__aim,
.hf-hud.has-banner .hf-hud__info,
.hf-hud.has-banner .hf-hud__call,
.hf-hud.has-banner .hf-hud__world,
.hf-hud.has-aim .hf-hud__power,
.hf-hud.has-spot-aim .hf-hud__radar,
.hf-hud.has-spot-aim .hf-hud__world,
.hf-hud.has-card:not(.hf-hud--stack) .hf-hud__tag,
.hf-hud.hf-hud--stack.has-card .hf-hud__ticker,
.hf-hud.hf-hud--compact.has-call .hf-hud__ticker,
.hf-hud.hf-hud--compact.has-info .hf-hud__ticker,
.hf-hud.hf-hud--compact.has-pen-call .hf-hud__tag,
.hf-hud.hf-hud--compact.has-pen-call .hf-hud__card,
.hf-hud.hf-hud--compact.has-pen-call .hf-sb__event,
.hf-hud.hf-hud--compact.has-pen-call .hf-hud__radar,
.hf-hud.has-pen-call .hf-hud__world,
.hf-hud.has-shootout .hf-hud__ticker,
.hf-hud.has-shootout .hf-hud__radar,
.hf-hud.has-shootout .hf-hud__world {
  opacity: 0 !important;
}

/* In the stack, hidden pieces also give their space back. */
.hf-hud.is-replay.hf-hud--stack .hf-hud__tag,
.hf-hud.is-replay.hf-hud--stack .hf-hud__card,
.hf-hud.has-stats.hf-hud--stack .hf-hud__tag,
.hf-hud.has-stats.hf-hud--stack .hf-hud__card {
  display: none;
}

/* ------------------------------------------------------------ keyframes */

@keyframes hf-hud-drop {
  from { opacity: 0; transform: translateY(-8px); }
}

@keyframes hf-hud-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@keyframes hf-hud-strap {
  from { opacity: 0; transform: translateX(-18px); }
}

@keyframes hf-hud-reveal {
  from { opacity: 0; transform: translateX(-12px); }
}

@keyframes hf-hud-slide {
  from { opacity: 0; transform: translateX(-16px); }
}

@keyframes hf-hud-slide-r {
  from { opacity: 0; transform: translateX(16px); }
}

@keyframes hf-hud-board {
  from { opacity: 0; transform: translateX(-60%); }
}

@keyframes hf-hud-band-in {
  from { opacity: 0; transform: scaleY(0.2); }
}

@keyframes hf-hud-sweep {
  from { transform: translateX(-115%) skewX(var(--slant)); }
  to { transform: skewX(var(--slant)); }
}

@keyframes hf-hud-sweep-out {
  from { transform: skewX(var(--slant)); }
  to { transform: translateX(115%) skewX(var(--slant)); }
}

@keyframes hf-hud-clip-in {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes hf-hud-clip-out {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 0 0 100%); opacity: 0.6; }
}

@keyframes hf-hud-grow {
  from { transform: scaleX(0); }
}

@keyframes hf-hud-grow-y {
  from { transform: scaleY(0); }
}

@keyframes hf-hud-slam {
  0% { opacity: 0; transform: translateY(0.3em) scale(1.2); }
  60% { opacity: 1; transform: translateY(-0.02em) scale(0.98); }
  100% { opacity: 1; transform: none; }
}

@keyframes hf-hud-hit {
  0% { transform: scale(1.35); color: var(--rani-pink); }
  100% { transform: none; }
}

/* The drawn "!" lands: too big, a two-frame shake, then still. */
@keyframes hf-hud-stamp {
  0% { opacity: 0; transform: translateY(-0.2em) scale(1.7); }
  55% { opacity: 1; transform: scale(0.94); }
  70% { transform: translateX(-0.03em); }
  85% { transform: translateX(0.03em); }
  100% { transform: none; }
}

@keyframes hf-hud-flip {
  from { opacity: 0; transform: rotateY(90deg) rotate(-7deg) translateY(8px); }
}

@keyframes hf-hud-rise {
  from { opacity: 0; transform: translateY(10px); }
}

@keyframes hf-hud-fade-in {
  from { opacity: 0; }
}

@keyframes hf-hud-fade-out {
  to { opacity: 0; }
}

@keyframes hf-hud-flash {
  0%, 55% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes hf-hud-flash-ink {
  0%, 55% { color: var(--on-rani); }
  100% { color: var(--on-accent); }
}

@keyframes hf-hud-flash-team {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}

@keyframes hf-hud-flash-home-on {
  0%, 50% { color: var(--home-on); }
}

@keyframes hf-hud-flash-away-on {
  0%, 50% { color: var(--away-on); }
}

@keyframes hf-hud-nudge {
  from { transform: translateY(-2px); }
  to { transform: translateY(1px); }
}

@keyframes hf-hud-spin-in {
  from { opacity: 0; transform: rotate(-90deg) scale(0.6); }
}

@keyframes hf-hud-beat {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes hf-hud-tally {
  0% { opacity: 1; }
  100% { opacity: 0.25; }
}

/* In from the left, holding over the cut, out to the right. */
@keyframes hf-hud-sting {
  0% { transform: translateX(-101%); }
  42% { transform: translateX(0); }
  58% { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .hf-hud .hf-ban *,
  .hf-hud .hf-call *,
  .hf-hud .hf-cardg *,
  .hf-hud .hf-lu *,
  .hf-hud .hf-goal *,
  .hf-hud .hf-st *,
  .hf-hud .hf-st::before,
  .hf-hud .hf-tick,
  .hf-hud .hf-so,
  .hf-hud .hf-sb__added,
  .hf-hud .hf-rp__mark,
  .hf-hud .hf-rp__title::before,
  .hf-hud .hf-wl__ptr,
  .hf-hud .hf-hud__info.is-on .hf-info,
  .hf-hud .hf-lu__tab::after {
    animation: none !important;
  }

  .hf-hud .hf-lu:not(.is-second) .hf-lu__tab--home::after,
  .hf-hud .hf-lu.is-second .hf-lu__tab--away::after {
    transform: none;
  }

  .hf-hud .hf-ban,
  .hf-hud .hf-call,
  .hf-hud .hf-cardg,
  .hf-hud .hf-lu,
  .hf-hud .hf-goal,
  .hf-hud .hf-st {
    animation: hf-hud-fade-in 0.24s ease backwards;
  }

  .hf-hud .hf-ban.is-out,
  .hf-hud .hf-call.is-out,
  .hf-hud .hf-cardg.is-out,
  .hf-hud .hf-lu.is-out,
  .hf-hud .hf-goal.is-out,
  .hf-hud .hf-st.is-out {
    animation: hf-hud-fade-out 0.3s ease forwards;
  }

  .hf-hud .hf-sb__event.is-on {
    animation: hf-hud-fade-in 0.24s ease backwards;
  }

  .hf-hud .hf-sb__event.is-out {
    animation: hf-hud-fade-out 0.3s ease forwards;
  }

  .hf-hud .hf-goal__word,
  .hf-hud .hf-goal__score,
  .hf-hud .hf-goal.is-score .hf-goal__word {
    transform: none;
  }

  .hf-hud .hf-hud__wipe.is-on {
    animation: hf-hud-fade-in 0.12s ease reverse;
    visibility: hidden;
  }

  .hf-hud .hf-hud__power,
  .hf-hud .hf-hud__power.is-on,
  .hf-hud .hf-hud__aim,
  .hf-hud .hf-hud__aim.is-on,
  .hf-hud .hf-hud__tag,
  .hf-hud .hf-radar__cam,
  .hf-hud .hf-hud__replay,
  .hf-hud .hf-hud__lb,
  .hf-hud .hf-tick {
    transition-property: opacity;
  }

  .hf-hud .hf-hud__power,
  .hf-hud .hf-hud__power.is-on,
  .hf-hud .hf-hud__aim,
  .hf-hud .hf-hud__aim.is-on {
    transform: translate(-50%, 0);
  }

  .hf-hud .hf-hud__tag.is-empty,
  .hf-hud .hf-radar__cam,
  .hf-hud .hf-hud__replay {
    transform: none;
  }
}