/* TAKKAR! shell: document base, loading screen and every front-end screen, in the
   TAKKAR! brand (brand-book/index.html): Raat Ink surfaces, Chalk text, Genda
   Marigold for "you and now" (the primary action, focus, selection, progress) and
   Rani pink only for the ball and the big moments (LIVE, VS, GOAL). The UI language
   is the slab and the kick cut: buttons, tabs, tags and rails lean forward 12 degrees
   with upright text inside (a clip-path parallelogram, so the text never slants),
   hero buttons, cards and panels take the 45 degree kick cut on the top-right corner,
   and Latin display titles lean with them (Bangla stays upright). Type: Anek Bangla
   display, Hind Siliguri UI, Barlow Condensed numbers, Baloo Da 2 only for shouts.
   Colours, fonts and shapes come from the token sheet (css/tokens.css). The 3D
   attract match keeps running behind the menus, so screens are ink panels over a
   scrim. No backdrop blur: phones come first. Layout runs on an 8 px grid; phones in
   landscape (844x390, 740x360) get their own compact sizes from the max-height:
   520px block near the end. */

/* ------------------------------------------------------------ document */

/* Phone type floor: labels never drop under 11 px, meta 11 px, body 13 px.
   (Lead: these belong in css/tokens.css next to --label-size.) */
:root {
  --label-size-phone: 11px;
  --label-tracking-phone: 0.12em;
  --meta-size-phone: 11px;
  --body-size-phone: 13px;
  /* The slab: a parallelogram leaning forward 12 degrees, cut with clip-path so the
     text inside stays upright. --lean is the horizontal run over the slab's height
     (tan 12 x height): 10 px for a 48 px control, 5 px for a 24 px tag. The shapes
     below resolve here, on :root, so a --lean set lower down does not reshape them. */
  --lean: 10px;
  --lean-s: 5px;
  --slab: polygon(var(--lean) 0, 100% 0, calc(100% - var(--lean)) 100%, 0 100%);
  --slab-s: polygon(var(--lean-s) 0, 100% 0, calc(100% - var(--lean-s)) 100%, 0 100%);
  /* The slab with the kick cut on its top-right corner: hero and primary buttons. */
  --slab-kick: polygon(var(--lean) 0, calc(100% - var(--kick-m)) 0, calc(100% - var(--kick-m) * 0.21) var(--kick-m), calc(100% - var(--lean)) 100%, 0 100%);
  /* Cards and panels: upright, with the kick cut (small, medium, large). */
  --kick-card-s: polygon(0 0, calc(100% - var(--kick-s)) 0, 100% var(--kick-s), 100% 100%, 0 100%);
  --kick-card: polygon(0 0, calc(100% - var(--kick-m)) 0, 100% var(--kick-m), 100% 100%, 0 100%);
  --kick-card-l: polygon(0 0, calc(100% - var(--kick-l)) 0, 100% var(--kick-l), 100% 100%, 0 100%);
}

/* Bangla is never upper-cased, tracked or slanted (brand book, Type). */
:lang(bn) {
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* The game owns every gesture: no pull-to-refresh, rubber banding or double-tap zoom. */
  overscroll-behavior: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#game {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
  background: var(--ink);
}

html.hf-playing #game {
  cursor: none;
}

#hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

#touch {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

#menus {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

/* A menu over a match takes the HUD and the touch buttons away completely:
   nothing of the broadcast graphics bleeds through a pause or report screen.
   Opacity, not visibility: HUD parts set their own visibility. */
html.hf-menu-open #hud,
html.hf-menu-open #touch {
  opacity: 0;
  pointer-events: none;
}

button {
  font: inherit;
  color: inherit;
  border-radius: 0;
}

/* The drawn exclamation (wedge and ball) that closes every shout: GOAL!, গোল!. */
.hf-bang {
  display: inline-block;
  flex: none;
  width: 0.353em;
  height: 0.72em;
  margin-left: 0.05em;
  overflow: visible;
  vertical-align: baseline;
}

.hf-bang__wedge { fill: currentColor; }
.hf-bang__ball { fill: var(--rani-pink); }

/* The sponsor tag (ই-ঠিকানা): a lead-in in the UI's type, then the drawn lockup
   at no less than its 22 px minimum, then optional text. Never upper-cased. */
.hf-sponsor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--muted);
}

.hf-sponsor__art {
  display: block;
  flex: none;
  width: auto;
  height: 22px;
}

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

img {
  -webkit-user-drag: none;
}

/* ------------------------------------------------------------ brand lockup */

/* The T! mark, the TAKKAR! wordmark (the hero sticker on the title screen) and the
   Bangla wordmark are drawn files, never typed; the SAFF Special chip sits beside the
   Bangla wordmark. --u is the lockup's unit size. */
.hf-lockup {
  --u: 64px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.28);
  line-height: 1;
}

.hf-lockup--stack {
  flex-direction: column;
  gap: calc(var(--u) * 0.3);
  text-align: center;
}

.hf-lockup__mark {
  display: block;
  flex: none;
  width: calc(var(--u) * 1.45);
  height: calc(var(--u) * 1.45);
  object-fit: contain;
}

.hf-lockup--stack .hf-lockup__mark {
  width: calc(var(--u) * 1.9);
  height: calc(var(--u) * 1.9);
}

.hf-lockup__words {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 0.16);
  min-width: 0;
}

.hf-lockup--stack .hf-lockup__words {
  align-items: center;
}

/* The flat wordmark is 1200 x 195; the sticker (keyline and hard drop) 1200 x 226. */
.hf-lockup__word {
  display: block;
  width: calc(var(--u) * 5.3);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1200 / 195;
}

.hf-lockup__word.is-sticker {
  width: calc(var(--u) * 6.6);
  aspect-ratio: 1200 / 226;
}

.hf-lockup__row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.3);
}

/* টক্কর! at a fraction of the Latin wordmark: the same name, never retyped. */
.hf-lockup__bn {
  display: block;
  width: auto;
  height: max(28px, calc(var(--u) * 0.72));
  aspect-ratio: 1200 / 518;
}

/* The edition chip: a small Chalk slab with Ink type (SAFF is a descriptor only). */
.hf-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px 4px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: var(--label-size);
  line-height: 1;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: var(--slab-s);
}

/* ------------------------------------------------------------ loading */

#loading {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--ink);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
}

#loading.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#loading[hidden] {
  display: none;
}

.hf-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(520px, 100%);
  text-align: center;
}

/* Only the T! mark: a dim copy, and a bright copy that fills from the bottom with
   the real loading progress (--p, set by main.js). */
.hf-loading__marks {
  position: relative;
  display: block;
  width: clamp(96px, 24vmin, 168px);
  aspect-ratio: 1;
  animation: hf-rise 0.6s var(--ease-out) backwards;
}

.hf-loading__mark {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hf-loading__mark--dim {
  opacity: 0.16;
}

.hf-loading__mark--fill {
  clip-path: inset(calc((1 - var(--p, 0.04)) * 100%) 0 0 0);
  transition: clip-path 0.4s var(--ease-out);
}

/* Without the fill copy (an older index.html), the single mark breathes. */
.hf-loading > .hf-loading__mark {
  position: static;
  width: clamp(96px, 24vmin, 168px);
  height: auto;
  animation: hf-rise 0.6s var(--ease-out) backwards, hf-mark-breathe 1.8s ease-in-out 0.6s infinite;
}

#loading.is-done .hf-loading__marks {
  animation: hf-mark-out 0.45s var(--ease-out) forwards;
}

@keyframes hf-mark-breathe {
  50% { opacity: 0.55; }
}

@keyframes hf-mark-out {
  to { opacity: 0; transform: scale(1.08); }
}

/* Progress text is for screen readers only; it becomes visible if loading fails. */
.hf-loading__text {
  margin: 0;
  min-height: 1.3em;
  font-family: var(--font-ui);
  font-weight: var(--label-weight);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--paper);
}

#loading:not(.is-error) .hf-loading__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hf-loading__noscript {
  margin: 0;
  font-size: 15px;
  color: var(--paper);
}

#loading.is-error .hf-loading__mark--fill {
  clip-path: inset(100% 0 0 0);
}

#loading.is-error .hf-loading__text {
  max-width: 44ch;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
  user-select: text;
  -webkit-user-select: text;
}

/* ------------------------------------------------------------ rotate (portrait touch devices) */

/* Phones and tablets play in landscape only. src/ui/orientation.js shows this card
   over everything, the loading screen included, while a touch device is upright. */
.hf-rotate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* The broadcast stinger's angled stripes, at rest behind the card. */
.hf-rotate::before,
.hf-rotate::after {
  content: '';
  position: absolute;
  left: -20%;
  right: -20%;
  pointer-events: none;
  transform: skewY(-12deg);
}

.hf-rotate::before {
  top: 80%;
  height: 40%;
  background: var(--night-2);
}

.hf-rotate::after {
  top: 79%;
  height: 4px;
  background: var(--accent);
}

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

.hf-rotate__in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(440px, 100%);
  animation: hf-rise 0.5s var(--ease-out) backwards;
}

.hf-rotate__mark {
  display: block;
  width: clamp(56px, 16vw, 84px);
  aspect-ratio: 1;
  margin-bottom: clamp(16px, 4vh, 40px);
  background: var(--logo-mark) center / contain no-repeat;
}

/* A square stage, so the phone has room to turn on its side. */
.hf-rotate__stage {
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  /* Nothing sits under the phone any more, so no gap below it. */
  margin-bottom: 0;
}

/* Phone outline: a Chalk frame with a speaker slot. Its screen shows a pitch as an
   ink panel with Chalk lines (never grass green) that only reads right on its side. */
.hf-rotate__phone {
  position: relative;
  display: block;
  width: 60px;
  height: 104px;
  border: 3px solid var(--paper);
  border-radius: 8px;
  animation: hf-rotate-turn 3.2s var(--ease-out) infinite;
}

.hf-rotate__phone::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 4px;
  width: 14px;
  height: 3px;
  background: var(--paper);
  transform: translateX(-50%);
}

.hf-rotate__phone i {
  position: absolute;
  inset: 12px 4px;
  background:
    linear-gradient(color-mix(in srgb, var(--paper) 70%, transparent), color-mix(in srgb, var(--paper) 70%, transparent)) center / 100% 1px no-repeat,
    var(--ink-4);
}

.hf-rotate__phone i::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 1px solid color-mix(in srgb, var(--paper) 70%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.hf-rotate__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: clamp(30px, 9vw, 52px);
  line-height: 1;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  text-wrap: balance;
  transform: skewX(var(--slant));
}

.hf-rotate__text {
  margin: 16px 0 0;
  max-width: 32ch;
  font-family: var(--font-ui);
  font-weight: var(--label-weight);
  font-size: var(--label-size);
  line-height: 1.5;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--muted);
}

/* Upright: the touch controls step aside (visibility keeps their layout measurable). */
html.hf-rotate-on #touch,
html.hf-rotate-on #touch .hf-touch {
  visibility: hidden;
  pointer-events: none;
}

@keyframes hf-rotate-turn {
  0%, 16% { transform: rotate(0deg); opacity: 1; }
  44%, 82% { transform: rotate(-90deg); opacity: 1; }
  94% { transform: rotate(-90deg); opacity: 0; }
  95% { transform: rotate(0deg); opacity: 0; }
  100% { transform: rotate(0deg); opacity: 1; }
}

/* ------------------------------------------------------------ menu shell */

.hf-menu {
  /* Shell sizes on the 8 px grid; the phone block below tightens them. */
  --gx-l: max(32px, env(safe-area-inset-left));
  --gx-r: max(32px, env(safe-area-inset-right));
  --gy-t: max(24px, env(safe-area-inset-top));
  --gy-b: max(16px, env(safe-area-inset-bottom));
  --gap: 16px;
  --top-h: 64px;
  --btm-h: 64px;
  --tap: 48px;
  --h1: 40px;
  --cut: 16px;
  --line-2: color-mix(in srgb, var(--paper) 22%, transparent);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  font-family: var(--font-ui);
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  transition: opacity 0.2s var(--ease-out), visibility 0s linear 0.2s;
}

.hf-menu.is-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s var(--ease-out);
}

/* Scrims keep text legible over the live 3D scene. */
.hf-menu__shade {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  transition: background 0.28s var(--ease-out);
}

.hf-menu--title .hf-menu__shade {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 70%, transparent) 0%, color-mix(in srgb, var(--ink) 35%, transparent) 40%, color-mix(in srgb, var(--ink) 82%, transparent) 100%);
}

.hf-menu--main .hf-menu__shade {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 90%, transparent) 0%, color-mix(in srgb, var(--ink) 72%, transparent) 55%, color-mix(in srgb, var(--ink) 60%, transparent) 100%);
}

/* Full-page screens over a match are near-opaque: no pitch noise behind numbers. */
.hf-menu--pause .hf-menu__shade,
.hf-menu--halftime .hf-menu__shade,
.hf-menu--fulltime .hf-menu__shade,
.hf-menu--versus .hf-menu__shade,
.hf-menu--champion .hf-menu__shade {
  background: color-mix(in srgb, var(--ink) 95%, transparent);
}

.hf-menu--pause .hf-menu__shade {
  background: color-mix(in srgb, var(--ink) 90%, transparent);
}

.hf-menu__stage {
  position: absolute;
  inset: 0;
}

.hf-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gy-t) var(--gx-r) var(--gy-b) var(--gx-l);
}

.hf-screen.is-entering > * {
  animation: hf-screen-in 0.22s var(--ease-bounce) backwards;
}

.hf-screen.is-entering > :nth-child(2) { animation-delay: 0.04s; }
.hf-screen.is-entering > :nth-child(3) { animation-delay: 0.08s; }

.hf-menu :focus {
  outline: none;
}

/* Keyboard and gamepad focus: a Marigold ring drawn inside the box, so angled
   clip-path shapes show it too (slab controls light up Marigold instead, below). */
.hf-menu--kbd :is(button, [data-nav]):focus {
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 1px var(--accent);
}

/* Panels and cards: raised ink with the kick cut on the top-right corner. */
.hf-menu .hf-panel {
  background: color-mix(in srgb, var(--ink-2) 92%, transparent);
  border: 1px solid var(--line);
  clip-path: var(--kick-card-l);
}

.hf-menu .hf-label,
.hf-menu .hf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: var(--label-weight);
  font-size: var(--label-size);
  line-height: 1.2;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--muted);
}

/* Screen titles: Anek Bangla display, upper-case Latin leaning forward 12 degrees
   from the baseline (the slab's angle). */
.hf-menu .hf-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: var(--h1);
  line-height: 1;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 0.2em;
  transform: skewX(var(--slant));
  transform-origin: 0 100%;
}

/* "You and now": a Marigold dot that pulses, never blinks hard. */
.hf-menu .hf-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: hf-blink 1.6s steps(2, jump-none) infinite;
}

.hf-menu .hf-ico {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
}

.hf-menu .hf-scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--paper) 24%, transparent) transparent;
}

.hf-menu .hf-scroll::-webkit-scrollbar {
  width: 4px;
}

.hf-menu .hf-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--paper) 24%, transparent);
}

.hf-menu .hf-empty {
  margin: 0;
  padding: 16px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

/* ------------------------------------------------------------ frame: top bar */

.hf-menu .hf-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: var(--top-h);
}

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

.hf-menu .hf-top__right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}

.hf-menu .hf-top--center {
  justify-content: center;
  text-align: center;
}

.hf-menu .hf-top--center .hf-top__titles {
  align-items: center;
  margin-left: auto;
}

.hf-menu .hf-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  height: var(--tap);
  min-width: calc(var(--tap) + var(--lean));
  padding: 0 calc(14px + var(--lean)) 0 calc(10px + var(--lean));
  border: 0;
  background: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  cursor: pointer;
  clip-path: var(--slab);
  transition: background var(--dur-fast) var(--ease-out);
}

.hf-menu .hf-back:active {
  background: var(--ink-4);
}

/* Tags: small slabs. The "you" tag is Marigold, the others raised ink. */
.hf-menu .hf-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 calc(8px + var(--lean-s));
  border: 0;
  background: var(--ink-4);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper);
  clip-path: var(--slab-s);
}

.hf-menu .hf-tag .hf-ico {
  width: 14px;
  height: 14px;
}

.hf-menu .hf-tag--you {
  background: var(--accent);
  color: var(--on-accent);
}

.hf-menu .hf-tag--ghost {
  height: 32px;
  padding: 0 calc(12px + var(--lean-s));
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
}

/* ------------------------------------------------------------ frame: bottom bar */

.hf-menu .hf-btm {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: var(--btm-h);
}

.hf-menu .hf-btm__hints {
  display: none;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.hf-menu--kbd .hf-btm__hints {
  display: flex;
}

.hf-menu .hf-btm__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.hf-menu .hf-btm__actions:empty {
  display: none;
}

.hf-menu .hf-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Glyphs: keyboard keys by default, gamepad buttons in pad mode. */
.hf-menu .hf-g {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--line-2);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--paper);
}

.hf-menu .hf-g[data-g='a']::before { content: 'Enter'; }
.hf-menu .hf-g[data-g='b']::before { content: 'Esc'; }
.hf-menu .hf-g[data-g='lb']::before { content: 'Q / E'; }
.hf-menu .hf-g[data-g='start']::before { content: 'P'; }

.hf-menu--pad .hf-g {
  min-width: 22px;
  width: 22px;
  padding: 0;
  border-radius: 50%;
  font-size: 11px;
}

.hf-menu--pad .hf-g[data-g='a'] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.hf-menu--pad .hf-g[data-g='a']::before { content: 'A'; }
.hf-menu--pad .hf-g[data-g='b']::before { content: 'B'; }
.hf-menu--pad .hf-g[data-g='lb'] { width: auto; padding: 0 6px; border-radius: 0; }
.hf-menu--pad .hf-g[data-g='lb']::before { content: 'LB RB'; }
.hf-menu--pad .hf-g[data-g='start'] { width: auto; padding: 0 6px; border-radius: 0; }
.hf-menu--pad .hf-g[data-g='start']::before { content: 'Start'; }

/* ------------------------------------------------------------ buttons */

/* Buttons are slabs (48 px hit area). Secondary: raised ink with a hairline.
   Primary: Marigold with Ink type, the kick cut and an arrow; it pops a little on
   hover (the menus' street bounce). Focus lights a slab Marigold. */
.hf-menu .hf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: var(--tap);
  min-width: 120px;
  padding: 0 calc(20px + var(--lean));
  border: 0;
  background: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  clip-path: var(--slab);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform 0.2s var(--ease-bounce);
}

.hf-menu .hf-btn .hf-ico {
  width: 18px;
  height: 18px;
}

.hf-menu .hf-btn:active {
  transform: translateY(1px);
}

/* Two classes: outranks the token sheet's remap of .hf-btn (html .hf-menu .hf-btn). */
.hf-menu .hf-btn.hf-btn--primary {
  min-width: 168px;
  padding: 0 calc(26px + var(--lean)) 0 calc(20px + var(--lean));
  background: var(--accent);
  box-shadow: none;
  color: var(--on-accent);
  font-size: 16px;
  clip-path: var(--slab-kick);
}

.hf-menu .hf-btn__arrow {
  transition: transform 0.18s var(--ease-out);
}

/* Focused, the primary button turns Chalk: it is already the lit thing. */
.hf-menu--kbd .hf-btn--primary:focus {
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
}

.hf-menu--kbd .hf-btn:not(.hf-btn--primary):focus {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

.hf-menu--kbd .hf-btn--primary:focus .hf-btn__arrow {
  transform: translateX(4px);
}

.hf-menu .hf-btn--ghost {
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
}

/* Destructive actions stay Chalk and carry the warning glyph: red belongs to red cards. */
.hf-menu .hf-btn--warn {
  color: var(--paper);
}

.hf-menu .hf-btn--warn .hf-ico {
  width: 16px;
  height: 16px;
}

.hf-menu .hf-btn--block {
  width: 100%;
}

.hf-menu .hf-btn.is-armed {
  background: var(--paper);
  box-shadow: none;
  color: var(--ink);
  animation: hf-armed 0.9s ease-in-out infinite;
}

.hf-menu .hf-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (hover: hover) {
  .hf-menu .hf-btn:hover:not(:disabled) {
    background: var(--ink-4);
  }

  .hf-menu .hf-btn.hf-btn--primary:hover:not(:disabled) {
    background: var(--accent);
    transform: scale(1.04);
  }

  .hf-menu .hf-btn--primary:hover .hf-btn__arrow {
    transform: translateX(4px);
  }

  .hf-menu .hf-back:hover {
    background: var(--ink-4);
  }
}

/* ------------------------------------------------------------ form controls */

/* Segmented: equal slab columns that may shrink, the chosen one in Chalk. */
.hf-menu .hf-seg {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}

.hf-menu .hf-seg__opt {
  height: var(--tap);
  min-width: 0;
  padding: 0 calc(6px + var(--lean));
  border: 0;
  background: var(--ink-3);
  color: var(--muted);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  clip-path: var(--slab);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/* Bangla option labels (বাংলা): the UI face, never tracked or capitalised. */
.hf-menu .hf-seg__opt:lang(bn),
.hf-menu .hf-step__value b:lang(bn),
.hf-menu .hf-cyc__value:lang(bn) {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.hf-menu .hf-seg__opt.is-on {
  background: var(--paper);
  color: var(--ink);
}

.hf-menu--kbd .hf-seg__opt:focus {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

/* Toggle switch: a slab track and knob; on is Marigold with an Ink knob. */
.hf-menu .hf-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: var(--tap);
  padding: 0 calc(4px + var(--lean)) 0 calc(10px + var(--lean));
  border: 0;
  background: var(--ink-3);
  cursor: pointer;
  clip-path: var(--slab);
}

.hf-menu .hf-toggle__text {
  min-width: 26px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-menu .hf-toggle__track {
  position: relative;
  display: block;
  width: 52px;
  height: 28px;
  background: var(--ink-4);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  transition: background 0.18s var(--ease-out);
}

.hf-menu .hf-toggle__track i {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  background: var(--muted);
  transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.hf-menu .hf-toggle.is-on .hf-toggle__track {
  background: var(--accent);
}

.hf-menu .hf-toggle.is-on .hf-toggle__track i {
  transform: translateX(24px);
  background: var(--on-accent);
}

.hf-menu--kbd .hf-toggle:focus {
  background: var(--ink-4);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.hf-menu .hf-toggle.is-on .hf-toggle__text {
  color: var(--paper);
}

/* Slider: a native range input restyled; --v is the fill (set by menus.js). */
.hf-menu .hf-slider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.hf-menu .hf-range {
  flex: 1;
  min-width: 0;
  height: var(--tap);
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-x;
  -webkit-appearance: none;
  appearance: none;
}

.hf-menu .hf-range::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(90deg, var(--accent) 0 var(--v), var(--ink-4) var(--v) 100%);
}

.hf-menu .hf-range::-moz-range-track {
  height: 6px;
  background: linear-gradient(90deg, var(--accent) 0 var(--v), var(--ink-4) var(--v) 100%);
}

.hf-menu .hf-range::-webkit-slider-thumb {
  width: 20px;
  height: 24px;
  margin-top: -9px;
  border: 0;
  background: var(--paper);
  -webkit-appearance: none;
  appearance: none;
}

.hf-menu .hf-range::-moz-range-thumb {
  width: 20px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: var(--paper);
}

.hf-menu--kbd .hf-range:focus {
  box-shadow: none;
}

.hf-menu--kbd .hf-range:focus::-webkit-slider-thumb {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

.hf-menu--kbd .hf-range:focus::-moz-range-thumb {
  background: var(--accent);
}

.hf-menu .hf-slider__val {
  flex: none;
  min-width: 44px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 16px;
  text-align: right;
}

/* Cycler: label, value and position pips; each press steps to the next value. */
.hf-menu .hf-cyc {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 12px;
  row-gap: 4px;
  min-width: 140px;
  height: var(--tap);
  padding: 0 calc(10px + var(--lean));
  border: 0;
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: left;
  cursor: pointer;
  clip-path: var(--slab);
  transition: background var(--dur-fast) var(--ease-out);
}

.hf-menu .hf-cyc__label {
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-menu .hf-cyc__value {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hf-menu .hf-cyc__pips {
  display: flex;
  align-items: center;
  gap: 3px;
}

.hf-menu .hf-cyc__pips i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-4);
}

.hf-menu .hf-cyc__pips i.is-on {
  background: var(--accent);
}

/* Stepper: the team switcher's ◀ VALUE ▶ for settings with many options.
   Hidden until the segments run out of room (see the narrow-screen block). */
.hf-menu .hf-step {
  display: none;
  grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap);
  gap: 4px;
  width: 232px;
  max-width: 100%;
}

.hf-menu .hf-step__arrow {
  display: grid;
  place-items: center;
  height: var(--tap);
  padding: 0;
  border: 0;
  background: var(--ink-3);
  color: var(--muted);
  cursor: pointer;
  clip-path: var(--slab);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.hf-menu .hf-step__arrow:active {
  color: var(--paper);
  background: var(--ink-4);
}

.hf-menu .hf-step__value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  height: var(--tap);
  padding: 0 calc(8px + var(--lean));
  border: 0;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  clip-path: var(--slab);
}

.hf-menu .hf-step__value b {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hf-menu .hf-step__value .hf-cyc__pips i {
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}

.hf-menu .hf-step__value .hf-cyc__pips i.is-on {
  background: var(--accent);
}

.hf-menu--kbd .hf-step__value:focus {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

.hf-menu--kbd .hf-step__value:focus .hf-cyc__pips i {
  background: color-mix(in srgb, var(--on-accent) 25%, transparent);
}

.hf-menu--kbd .hf-step__value:focus .hf-cyc__pips i.is-on {
  background: var(--on-accent);
}

@media (hover: hover) {
  .hf-menu .hf-cyc:hover,
  .hf-menu .hf-seg__opt:hover:not(.is-on),
  .hf-menu .hf-toggle:hover,
  .hf-menu .hf-step__arrow:hover {
    background: var(--ink-4);
    color: var(--paper);
  }
}

/* Tabs: one lit thing. Labels on an ink slab track; the active one turns Chalk
   with a Marigold dot under it (brand book, UI language). */
.hf-menu .hf-tabs {
  display: flex;
  gap: 2px;
  padding: 0 var(--lean);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  clip-path: var(--slab);
}

.hf-menu .hf-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--tap);
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.hf-menu .hf-tab .hf-ico {
  width: 16px;
  height: 16px;
}

.hf-menu .hf-tab.is-on {
  color: var(--paper);
}

.hf-menu .hf-tab::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform var(--dur-mid) var(--ease-bounce);
}

.hf-menu .hf-tab.is-on::after {
  transform: scale(1);
}

.hf-menu--kbd .hf-tab:focus {
  color: var(--accent);
  box-shadow: none;
}

/* Rail: vertical slab tabs with an icon; the active one carries a Marigold edge. */
.hf-menu .hf-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hf-menu .hf-rail__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--tap);
  padding: 0 calc(12px + var(--lean)) 0 calc(14px + var(--lean));
  border: 0;
  background: var(--night-2);
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  clip-path: var(--slab);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/* The leading edge follows the slab's lean. */
.hf-menu .hf-rail__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--lean) + 5px);
  background: var(--accent);
  clip-path: polygon(var(--lean) 0, 100% 0, 5px 100%, 0 100%);
  transform: scaleY(0);
  transition: transform 0.2s var(--ease-out);
}

.hf-menu .hf-rail__item.is-on {
  background: var(--ink-3);
  color: var(--paper);
}

.hf-menu--kbd .hf-rail__item:focus {
  background: var(--ink-4);
  color: var(--accent);
  box-shadow: none;
}

.hf-menu .hf-rail__item.is-on::before {
  transform: scaleY(1);
}

.hf-menu .hf-rail__item.hf-rail__item--primary {
  background: var(--accent);
  color: var(--on-accent);
  clip-path: var(--slab-kick);
}

.hf-menu--kbd .hf-rail__item.hf-rail__item--primary:focus {
  background: var(--paper);
  color: var(--ink);
}

@media (hover: hover) {
  .hf-menu .hf-rail__item:not(.hf-rail__item--primary):hover {
    color: var(--paper);
    background: var(--ink-3);
  }
}

/* ------------------------------------------------------------ kits (CSS drawn) */

.hf-menu .hf-kit {
  --kit-w: 64px;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--kit-w);
  height: calc(var(--kit-w) * 1.18);
  vertical-align: middle;
}

.hf-menu .hf-kit--xs { --kit-w: 16px; }
.hf-menu .hf-kit--sm { --kit-w: 28px; }
.hf-menu .hf-kit--lg { --kit-w: 78px; }

.hf-menu .hf-kit__shirt {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 80%;
  background: var(--k1);
  clip-path: polygon(34% 0, 41% 5%, 50% 8%, 59% 5%, 66% 0, 86% 7%, 100% 31%, 83% 42%, 78% 35%, 78% 100%, 22% 100%, 22% 35%, 17% 42%, 0 31%, 14% 7%);
}

.hf-menu .hf-kit__shirt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 12%, transparent), transparent 40%, transparent 70%, rgba(0, 0, 0, 0.18));
}

.hf-menu .hf-kit__collar {
  position: absolute;
  z-index: 1;
  left: 33%;
  top: 0;
  width: 34%;
  height: 13%;
  background: var(--k2);
  clip-path: polygon(0 0, 22% 0, 50% 58%, 78% 0, 100% 0, 50% 100%);
}

.hf-menu .hf-kit__num {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 33%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--kit-w) * 0.3);
  line-height: 1;
  text-align: center;
  color: var(--kt);
}

.hf-menu .hf-kit--xs .hf-kit__num,
.hf-menu .hf-kit--sm .hf-kit__num {
  display: none;
}

.hf-menu .hf-kit__shorts {
  position: absolute;
  left: 23%;
  top: 79%;
  width: 54%;
  height: 21%;
  background: var(--ks);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 57% 100%, 50% 42%, 43% 100%, 0 100%);
}

.hf-menu .hf-kit--sash .hf-kit__shirt {
  background: linear-gradient(128deg, var(--k1) 0 37%, var(--k2) 37% 55%, var(--k1) 55% 100%);
}

.hf-menu .hf-kit--hoops .hf-kit__shirt {
  background: repeating-linear-gradient(180deg, var(--k1) 0 13%, var(--k2) 13% 24%);
}

.hf-menu .hf-kit--stripes .hf-kit__shirt {
  background: repeating-linear-gradient(90deg, var(--k1) 0 11%, var(--k2) 11% 20%);
}

.hf-menu .hf-kit--halves .hf-kit__shirt {
  background: linear-gradient(90deg, var(--k1) 0 50%, var(--k2) 50% 100%);
}

.hf-menu .hf-kit--sleeves .hf-kit__shirt {
  background:
    linear-gradient(90deg, var(--k2) 0 23%, transparent 23% 77%, var(--k2) 77% 100%) 0 0 / 100% 43% no-repeat,
    var(--k1);
}

/* ------------------------------------------------------------ nation badge */

/* A shield cut from the team's two colours with the code over an ink band. */
.hf-menu .hf-badge {
  --bw: 48px;
  position: relative;
  display: inline-grid;
  place-items: end center;
  flex: none;
  width: var(--bw);
  height: calc(var(--bw) * 1.16);
  background: var(--t1);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
  vertical-align: middle;
}

.hf-menu .hf-badge i {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0 46%, var(--t2) 46% 64%, transparent 64%);
}

.hf-menu .hf-badge.hf-badge > b {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 30%;
  padding: 2px 0 1px;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--bw) * 0.27);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--paper);
}

.hf-menu .hf-badge--xs { --bw: 18px; }
.hf-menu .hf-badge.hf-badge--xs > b,
.hf-menu .hf-badge.hf-badge--sm > b { display: none; }
.hf-menu .hf-badge--sm { --bw: 28px; }
.hf-menu .hf-badge--lg { --bw: 72px; }

/* ------------------------------------------------------------ stars */

.hf-menu .hf-stars {
  display: inline-flex;
  gap: 2px;
}

.hf-menu .hf-stars i {
  width: 11px;
  height: 11px;
  background: linear-gradient(90deg, var(--paper) var(--f), color-mix(in srgb, var(--paper) 20%, transparent) var(--f));
  clip-path: polygon(50% 0, 61.5% 35%, 98% 35%, 68.5% 57%, 79.5% 92%, 50% 71%, 20.5% 92%, 31.5% 57%, 2% 35%, 38.5% 35%);
}

/* ------------------------------------------------------------ bars */

.hf-menu .hf-bar {
  display: grid;
  grid-template-columns: 36px 1fr 28px;
  align-items: center;
  gap: 8px;
}

.hf-menu .hf-bar__label {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.hf-menu .hf-bar__track {
  position: relative;
  height: 6px;
  background: var(--ink-4);
}

.hf-menu .hf-bar__track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  background: var(--paper);
  transform-origin: left center;
  animation: hf-grow 0.5s var(--ease-out) backwards;
}

.hf-menu .hf-bar__val {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  text-align: right;
}

/* ------------------------------------------------------------ player cards */

/* FUT-style card: rating and position top left, nation, a big shirt number
   watermark, the full real name and club. Tiers: Chalk (elite), raised ink (rare
   and common). The kick cut takes the top-right corner. */
.hf-menu .hf-pc {
  --pc-bg: var(--ink-3);
  --pc-fg: var(--paper);
  --pc-dim: var(--muted);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  overflow: hidden;
  background: var(--pc-bg);
  color: var(--pc-fg);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.hf-menu .hf-pc--elite {
  --pc-bg: var(--paper);
  --pc-fg: var(--ink);
  --pc-dim: var(--graphite);
}

.hf-menu .hf-pc--common {
  --pc-bg: var(--ink-3);
  --pc-dim: var(--muted);
}

/* The nation's colour as a thin edge: identity without a crest. */
.hf-menu .hf-pc::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--t1) 0 60%, var(--t2) 60% 100%);
}

.hf-menu .hf-pc__top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 8px;
}

.hf-menu .hf-pc__ovr {
  font-family: var(--font-num);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.hf-menu .hf-pc__pos,
.hf-menu .hf-pc__nat {
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hf-menu .hf-pc__nat {
  color: var(--pc-dim);
}

.hf-menu .hf-pc__cap {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: var(--accent);
  color: var(--on-accent);
  font-style: normal;
  font-weight: 800;
  font-size: 11px;
}

.hf-menu .hf-pc__num {
  position: absolute;
  right: 10px;
  top: 20%;
  font-family: var(--font-num);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: currentColor;
  opacity: 0.1;
  pointer-events: none;
}

/* The full name may take two lines (and a step down in size when long) rather
   than lose letters to an ellipsis. */
.hf-menu .hf-pc__name {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.hf-menu .hf-pc__club {
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pc-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hf-menu .hf-pc__label {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  padding: 4px 22px 4px 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Large: the hero card on bigger screens, FUT style. Rating, position and flag
   stack top left over the ghost shirt number; the name sits on a rule with the
   club under it, and six attributes close the card. Sized to its content. */
.hf-menu .hf-pc--lg {
  width: 192px;
  grid-template-rows: auto auto auto auto;
  padding: 16px 16px 16px 20px;
}

.hf-menu .hf-pc--lg .hf-pc__top {
  grid-template-columns: auto;
  justify-items: start;
  row-gap: 4px;
}

.hf-menu .hf-pc--lg .hf-pc__ovr { font-size: 52px; }
.hf-menu .hf-pc--lg .hf-pc__pos { font-size: 14px; }

.hf-menu .hf-pc--lg .hf-pc__nat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
}

.hf-menu .hf-pc--lg .hf-pc__num { font-size: 112px; top: 12px; right: 12px; }

.hf-menu .hf-pc--lg .hf-pc__name {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 2px solid currentColor;
  font-size: 24px;
}

.hf-menu .hf-pc--lg .hf-pc__name.is-long {
  font-size: 20px;
}

.hf-menu .hf-pc--lg .hf-pc__club {
  margin-top: 4px;
}

/* FUT attributes: value then label, two columns. */
.hf-menu .hf-pc__attrs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
}

.hf-menu .hf-pc--elite .hf-pc__attrs {
  border-top-color: color-mix(in srgb, var(--ink) 14%, transparent);
}

.hf-menu .hf-pc__attrs i {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--pc-dim);
}

.hf-menu .hf-pc__attrs b {
  min-width: 20px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--pc-fg);
}

/* Plate: the same card laid out flat, for phones and pick previews. */
.hf-menu .hf-pc--plate {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  min-height: 56px;
  padding: 8px 18px 8px 12px;
}

.hf-menu .hf-pc--plate .hf-pc__top {
  grid-row: 1 / 3;
  grid-template-columns: auto;
  justify-items: center;
}

.hf-menu .hf-pc--plate .hf-pc__ovr { font-size: 26px; }
.hf-menu .hf-pc--plate .hf-pc__pos { font-size: 10px; margin-top: 2px; }
.hf-menu .hf-pc--plate .hf-pc__nat,
.hf-menu .hf-pc--plate .hf-pc__cap { display: none; }
.hf-menu .hf-pc--plate .hf-pc__num { font-size: 56px; top: 4px; right: 12px; }
.hf-menu .hf-pc--plate .hf-pc__name { font-size: 16px; align-self: end; }
.hf-menu .hf-pc--plate .hf-pc__name.is-long { font-size: 13px; }
.hf-menu .hf-pc--plate .hf-pc__club { font-size: 10px; align-self: start; }
.hf-menu .hf-pc--plate .hf-pc__label { top: auto; bottom: 0; padding: 2px 18px 2px 6px; font-size: 10px; }
/* A labelled plate keeps its text above the label strip along the bottom edge. */
.hf-menu .hf-pc--plate:has(.hf-pc__label) { height: auto; min-height: 56px; padding-bottom: 20px; }

/* ------------------------------------------------------------ title */

.hf-menu .hf-screen--title {
  gap: 0;
}

.hf-menu .hf-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  cursor: pointer;
}

.hf-menu .hf-title__top,
.hf-menu .hf-title__foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.hf-menu .hf-title__top .hf-label {
  color: color-mix(in srgb, var(--paper) 72%, transparent);
}

/* The tagline under the lockup: English leaning like every Latin display line,
   the Bangla upright in Marigold under it. */
.hf-menu .hf-title__tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: calc(clamp(24px, 6vh, 48px) * -0.5) 0 0;
  text-align: center;
  animation: hf-fade-in 0.6s ease 0.3s backwards;
}

.hf-menu .hf-title__tag-en {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: clamp(18px, 2.6vh, 26px);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: skewX(var(--slant));
}

.hf-menu .hf-title__tag-bn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(15px, 2.2vh, 20px);
  line-height: 1.3;
  color: var(--accent);
}

.hf-menu .hf-title__center {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 6vh, 48px);
}

/* An ink pool behind the lockup and the prompt: the bright pitch never shows through the type. */
.hf-menu .hf-title__scrim {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(1200px, 150%);
  height: 130%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ink) 62%, transparent) 0, color-mix(in srgb, var(--ink) 55%, transparent) 50%, transparent 100%);
  pointer-events: none;
}

.hf-menu .hf-title .hf-lockup {
  --u: clamp(36px, min(7vw, 10.5vh), 84px);
  animation: hf-rise 0.7s var(--ease-out) backwards;
}

/* The prompt: a Marigold slab with the kick cut, the ball-dot pulsing on it. */
.hf-menu .hf-press {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 calc(26px + var(--lean));
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: var(--slab-kick);
  animation: hf-fade-in 0.6s ease 0.4s backwards;
}

.hf-menu .hf-press i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rani-pink);
  animation: hf-beat 1.4s var(--ease-out) infinite;
}

/* A Chalk underline that sweeps in: the broadcast stinger in miniature. */
.hf-menu .hf-press::after {
  content: '';
  position: absolute;
  left: calc(26px + var(--lean));
  right: calc(26px + var(--lean));
  bottom: 9px;
  height: 2px;
  background: var(--on-accent);
  opacity: 0.4;
  transform-origin: left center;
  animation: hf-grow 0.7s var(--ease-out) 0.7s backwards;
}

.hf-menu .hf-press:focus {
  box-shadow: none;
}

.hf-menu .hf-title__foot {
  font-weight: var(--label-weight);
  font-size: var(--label-size);
  line-height: 1.4;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------ main menu hub */

.hf-menu .hf-screen--main {
  padding-bottom: 0;
}

.hf-menu .hf-brandbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hf-menu .hf-brandbar__mark {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.hf-menu .hf-brandbar__word {
  display: block;
  width: auto;
  height: 26px;
}

/* TAKKAR! | টক্কর: the horizontal lockup sits a little taller for the Bangla. */
.hf-menu .hf-brandbar__word.is-lockup {
  height: 30px;
}

.hf-menu .hf-live {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding-right: calc(14px + var(--lean));
  border: 0;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  clip-path: var(--slab);
  transition: opacity 0.3s var(--ease-out);
}

.hf-menu .hf-live.is-empty {
  opacity: 0;
}

/* LIVE is a big moment: Rani, with Ink type. */
.hf-menu .hf-live__tag {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 calc(10px + var(--lean)) 0 calc(8px + var(--lean));
  background: var(--rani-pink);
  color: var(--on-rani);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  clip-path: var(--slab);
}

.hf-menu .hf-live__tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--on-rani);
  animation: hf-blink 1.4s steps(2, jump-none) infinite;
}

.hf-menu .hf-live__line {
  font-family: var(--font-num);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.hf-menu .hf-live__score {
  padding: 2px 6px;
  background: var(--paper);
  color: var(--ink);
}

.hf-menu .hf-live__clock {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.hf-menu .hf-hub {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--gap);
}

/* Hero tile: the big PLAY entry with the 3D featured player. */
.hf-menu .hf-hero {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--ink-2);
  text-align: left;
  cursor: pointer;
  clip-path: var(--kick-card-l);
  animation: hf-hero-in 0.4s var(--ease-bounce) backwards;
}

/* The big cropped T! watermark at 4% (brand book, Menus). */
.hf-menu .hf-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--logo-mark) right -6% center / auto 128% no-repeat;
  opacity: 0.045;
}

/* A slab in the nation's colour behind the player, and a Marigold edge, both at the 12 degree lean. */
.hf-menu .hf-hero::before,
.hf-menu .hf-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -10%;
  bottom: -10%;
  transform: skewX(var(--slant));
  pointer-events: none;
  transition: background 0.4s var(--ease-out);
}

.hf-menu .hf-hero::before {
  right: 10%;
  width: 34%;
  background: var(--t1);
  opacity: 0.2;
}

.hf-menu .hf-hero::after {
  right: calc(10% + 34% + 10px);
  width: 6px;
  background: var(--accent);
}

.hf-menu .hf-hero__stage {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  bottom: 0;
  width: 58%;
}

.hf-menu .hf-hero__copy {
  position: absolute;
  z-index: 2;
  left: 40px;
  top: 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 48%;
  pointer-events: none;
}

.hf-menu .hf-hero__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: clamp(56px, 6vw, 96px);
  line-height: 0.88;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  transform: skewX(var(--slant));
  transform-origin: 0 100%;
}

.hf-menu .hf-hero__sub {
  max-width: 28ch;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

/* The hero button: Marigold slab with the kick cut. Ink type on it, never Chalk. */
.hf-menu .hf-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 calc(26px + var(--lean)) 0 calc(18px + var(--lean));
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  clip-path: var(--slab-kick);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform 0.2s var(--ease-bounce);
}

.hf-menu .hf-hero__cta .hf-ico {
  transition: transform 0.18s var(--ease-out);
}

.hf-menu--kbd .hf-hero:focus .hf-hero__cta {
  background: var(--paper);
  color: var(--ink);
}

.hf-menu--kbd .hf-hero:focus .hf-hero__cta .hf-ico {
  transform: translateX(4px);
}

.hf-menu--kbd .hf-hero:focus {
  box-shadow: inset 0 0 0 3px var(--accent);
}

@media (hover: hover) {
  .hf-menu .hf-hero:hover .hf-hero__cta {
    transform: scale(1.04);
  }
}

.hf-menu .hf-hero__feature {
  position: absolute;
  z-index: 2;
  left: 40px;
  bottom: 40px;
  pointer-events: none;
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}

.hf-menu .hf-hero__feature.is-out {
  opacity: 0;
  transform: translateY(8px);
}

.hf-menu .hf-hero__feature .hf-pc--plate {
  display: none;
}

/* Tiles: icon, heavy leaning title, a line under it, an arrow; the kick cut. */
.hf-menu .hf-hub__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--gap);
  min-height: 0;
}

.hf-menu .hf-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink-2) 92%, transparent);
  text-align: left;
  cursor: pointer;
  clip-path: var(--kick-card);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  animation: hf-tile-in 0.32s var(--ease-bounce) backwards;
}

.hf-menu .hf-hub__grid > :nth-child(2) { animation-delay: 0.04s; }
.hf-menu .hf-hub__grid > :nth-child(3) { animation-delay: 0.08s; }
.hf-menu .hf-hub__grid > :nth-child(4) { animation-delay: 0.12s; }

.hf-menu .hf-tile__art {
  position: absolute;
  right: -6%;
  bottom: -10%;
  width: 62%;
  max-width: 220px;
  aspect-ratio: 1;
  opacity: 0.06;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out), transform 0.3s var(--ease-out);
}

.hf-menu .hf-tile__art .hf-ico {
  width: 100%;
  height: 100%;
  stroke-width: 1.2;
}

.hf-menu--kbd .hf-tile:focus .hf-tile__art {
  opacity: 0.12;
  transform: translateX(-6px);
}

/* The silver trophy stands on the cup tile, clear of the arrow corner. */
.hf-menu .hf-tile__trophy {
  position: absolute;
  right: calc(6% + 40px);
  top: calc(50% + 12px);
  width: 120px;
  height: 152px;
  transform: translateY(-50%) scale(1.15);
  transform-origin: right center;
  pointer-events: none;
}

.hf-menu .hf-tile__trophy .hf-trophy {
  transform: none;
  animation: none;
}

.hf-menu .hf-tile__trophy::before {
  content: '';
  position: absolute;
  left: -30%;
  right: -30%;
  top: 10%;
  bottom: -10%;
  background: var(--accent);
  opacity: 0.16;
  transform: skewX(var(--slant));
}

.hf-menu .hf-tile__ico {
  position: absolute;
  left: 20px;
  top: 20px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--ink-4);
  transition: background 0.15s var(--ease-out);
}

.hf-menu .hf-tile__ico .hf-ico {
  width: 22px;
  height: 22px;
}

.hf-menu .hf-tile__title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transform: skewX(var(--slant));
  transform-origin: 0 100%;
}

.hf-menu .hf-tile__sub {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}

.hf-menu .hf-tile__arrow {
  position: absolute;
  z-index: 3;
  right: 24px;
  top: 30px;
  opacity: 0.45;
  transition: transform 0.18s var(--ease-out), opacity 0.18s var(--ease-out);
}

.hf-menu .hf-tile__flag {
  padding: 4px 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-num);
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  clip-path: var(--slab-s);
}

/* Selected: raised ink, a Marigold hairline and a Marigold icon cell (one lit thing). */
.hf-menu--kbd .hf-tile:focus,
.hf-menu .hf-tile:active {
  border-color: var(--accent);
  background: var(--ink-3);
  box-shadow: none;
}

.hf-menu--kbd .hf-tile:focus .hf-tile__ico,
.hf-menu .hf-tile:active .hf-tile__ico {
  background: var(--accent);
  color: var(--on-accent);
}

.hf-menu--kbd .hf-tile:focus .hf-tile__arrow {
  opacity: 1;
  transform: translateX(4px);
}

@media (hover: hover) {
  .hf-menu .hf-tile:hover {
    border-color: var(--line-2);
    background: var(--ink-3);
  }

  .hf-menu .hf-tile:hover .hf-tile__arrow {
    opacity: 1;
    transform: translateX(4px);
  }

  .hf-menu .hf-tile:hover .hf-tile__art {
    opacity: 0.12;
    transform: translateX(-6px);
  }
}

/* The primary tile is Marigold with Ink type (two classes: outranks the token
   sheet's remap of .hf-tile). Focused, it turns Chalk. */
.hf-menu .hf-tile.hf-tile--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.hf-menu .hf-tile--primary .hf-tile__sub {
  color: color-mix(in srgb, var(--on-accent) 72%, transparent);
}

.hf-menu .hf-tile--primary .hf-tile__ico {
  background: var(--on-accent);
  color: var(--accent);
}

.hf-menu--kbd .hf-tile.hf-tile--primary:focus {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.hf-menu--kbd .hf-tile--primary:focus .hf-tile__sub {
  color: var(--graphite);
}

.hf-menu .hf-tile--cup {
  grid-column: 1 / -1;
}

/* Live tiles: what each tile leads to, between the icon and the title.
   Only where the tiles are tall enough (tablets and desktops). */
.hf-menu .hf-tile__live {
  position: relative;
  display: none;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 64px 0 auto;
}

.hf-menu .hf-tile__board {
  position: relative;
  display: block;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1.6;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  background:
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--paper) 3%, transparent) 0 12.5%, transparent 12.5% 25%),
    var(--ink-2);
}

.hf-menu .hf-tile__board::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 30%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.hf-menu .hf-tile__board::after {
  content: '';
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: -1px;
  height: 22%;
  border: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
}

.hf-menu .hf-tile__board i {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--paper);
  box-shadow: inset 0 -2px 0 var(--t1);
  transform: translate(-50%, -50%);
}

.hf-menu .hf-tile__board i.is-gk {
  background: var(--steel);
}

.hf-menu .hf-tile__kv {
  font-family: var(--font-num);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.hf-menu .hf-tile__kv > span:not(.hf-tag) {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.hf-menu .hf-tile__kv .hf-tag {
  height: 20px;
  padding: 0 6px;
  font-size: 10px;
}

.hf-menu .hf-tile__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 8px;
  row-gap: 2px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-menu .hf-tile__row b {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--paper);
}

.hf-menu .hf-tile__dev {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hf-menu .hf-tile__dev i {
  width: 8px;
  height: 8px;
  background: var(--muted);
}

.hf-menu .hf-tile__dev.is-on i {
  background: var(--accent);
  animation: hf-blink 1.6s steps(2, jump-none) infinite;
}

.hf-menu .hf-tile__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.hf-menu .hf-tile__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The in-match key chip: paper, ink letter, the angled corner. */
.hf-menu .hf-tile__key b {
  font-family: var(--font-num);
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0;
  clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
}

@media (min-height: 600px) and (min-width: 900px) {
  .hf-menu .hf-tile__live {
    display: flex;
  }

  /* Live tiles stack in flow: icon, the live rows, then the title and its line.
     Nothing is absolutely placed over the rows, so however short the tile gets the
     rows never slide under the icon (the old Settings tile put its gear over
     "Difficulty Normal" at 1600x900); they give up height and fade out at the
     bottom of their own box instead. The big ghost icon steps aside for them. */
  .hf-menu .hf-tile--live {
    justify-content: flex-start;
  }

  .hf-menu .hf-tile--live .hf-tile__ico {
    position: relative;
    left: auto;
    top: auto;
    flex: none;
  }

  .hf-menu .hf-tile--live .hf-tile__live {
    flex: 1 1 auto;
    min-height: 0;
    margin: 14px 0 10px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent);
  }

  .hf-menu .hf-tile--live .hf-tile__title,
  .hf-menu .hf-tile--live .hf-tile__sub {
    flex: none;
  }

  .hf-menu .hf-tile--live .hf-tile__art {
    display: none;
  }
}

.hf-menu .hf-cuptile {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hf-menu .hf-cuptile__label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-menu .hf-cuptile__fx {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 22px;
}

.hf-menu .hf-cuptile__fx i {
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
}

.hf-menu .hf-cuptile__codes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hf-menu .hf-cuptile__note {
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
}

/* News ticker: full bleed along the bottom, a broadcast crawl. */
.hf-menu .hf-ticker {
  flex: none;
  display: flex;
  align-items: stretch;
  height: calc(40px + env(safe-area-inset-bottom));
  margin: 0 calc(-1 * var(--gx-r)) 0 calc(-1 * var(--gx-l));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  overflow: hidden;
}

.hf-menu .hf-ticker__tag {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px 0 var(--gx-l);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--lean) * 0.8) 100%, 0 100%);
}

.hf-menu .hf-ticker__tag .hf-ico {
  width: 14px;
  height: 14px;
}

.hf-menu .hf-ticker__track {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 32px), transparent 100%);
}

.hf-menu .hf-ticker__run {
  display: inline-flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  animation: hf-ticker var(--dur, 60s) linear infinite;
}

.hf-menu .hf-ticker__dup {
  display: inline-flex;
  align-items: center;
}

.hf-menu .hf-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding-left: 24px;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Marigold garland beads between the items. */
.hf-menu .hf-ticker__item::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ------------------------------------------------------------ team select */

.hf-menu .hf-ts {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr) minmax(0, 1fr);
  gap: var(--gap);
}

.hf-menu .hf-side {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink-2) 94%, transparent);
  touch-action: pan-y;
  clip-path: var(--kick-card-l);
}

.hf-menu .hf-side::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--t1, var(--paper)) 0 68%, var(--t2, var(--steel)) 68% 100%);
}

.hf-menu .hf-side--away {
  animation: hf-from-right 0.32s var(--ease-out) backwards;
}

.hf-menu .hf-side--home {
  animation: hf-from-left 0.32s var(--ease-out) backwards;
}

.hf-menu .hf-side.is-swap > :not(.hf-side__head) {
  animation: hf-swap 0.24s var(--ease-out) backwards;
}

.hf-menu .hf-side__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hf-menu .hf-side__idx {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-menu .hf-spin {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: stretch;
  gap: 4px;
}

.hf-menu .hf-spin__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: var(--ink-3);
  color: var(--muted);
  cursor: pointer;
  clip-path: var(--slab);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.hf-menu .hf-spin__arrow:active {
  color: var(--paper);
  background: var(--ink-4);
}

.hf-menu .hf-spin__team {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 68px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  text-align: left;
  cursor: pointer;
}

.hf-menu--kbd .hf-spin__team:focus {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

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

/* A nation's name never truncates: it scales with the screen and may take two lines. */
.hf-menu .hf-spin__name b {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: clamp(16px, 2.1vw, 24px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: normal;
}

.hf-menu .hf-spin__custom {
  display: none;
  color: var(--paper);
}

/* The coach gets his own line where there is room (hidden on narrow screens below). */
.hf-menu .hf-spin__coach {
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.hf-menu .hf-spin__meta {
  font-weight: 600;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (hover: hover) {
  .hf-menu .hf-spin__arrow:hover {
    color: var(--paper);
    background: var(--ink-4);
  }

  .hf-menu .hf-spin__team:hover,
  .hf-menu .hf-kitbtn:hover {
    border-color: var(--line-2);
  }
}

.hf-menu .hf-side__ovr {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.hf-menu .hf-side__ovr b {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 44px;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.hf-menu .hf-side__ovr > span {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.hf-menu .hf-side__ovr .hf-stars {
  margin-left: auto;
  align-self: center;
}

/* The crest sits in the switcher; phones move it here to give the name the room. */
.hf-menu .hf-side__ovr .hf-badge {
  display: none;
  align-self: center;
}

.hf-menu .hf-side__bars {
  display: grid;
  gap: 8px;
}

.hf-menu .hf-side__keys ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

/* Key players: rating and position on top, the full name across the whole cell
   (up to two lines; long names a step smaller instead of an ellipsis). */
.hf-menu .hf-side__keys li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  column-gap: 6px;
  row-gap: 3px;
  align-items: baseline;
  padding: 6px 8px 7px;
  background: var(--ink-3);
  clip-path: var(--kick-card-s);
}

.hf-menu .hf-side__keys li b {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

.hf-menu .hf-side__keys li span {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hf-menu .hf-side__keys li span small {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  font-size: 12px;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

.hf-menu .hf-side__keys li i {
  font-family: var(--font-num);
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.hf-menu .hf-side__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.hf-menu .hf-form {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 120px;
  max-height: 260px;
  border: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  background:
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--paper) 2.5%, transparent) 0 12.5%, transparent 12.5% 25%),
    var(--ink-2);
}

.hf-menu .hf-form > i {
  position: absolute;
  display: block;
}

.hf-menu .hf-form__box {
  left: 22%;
  right: 22%;
  bottom: -1px;
  height: 22%;
  border: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
}

.hf-menu .hf-form__circle {
  left: 50%;
  top: 0;
  width: 26%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.hf-menu .hf-form .hf-form__dot {
  font-family: var(--font-num);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--paper);
  color: var(--ink);
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 -3px 0 var(--t1);
  animation: hf-pop 0.3s var(--ease-out) backwards;
}

.hf-menu .hf-form .hf-form__dot.is-gk {
  background: var(--steel);
}

.hf-menu .hf-form .hf-form__dot.is-cap {
  box-shadow: inset 0 -3px 0 var(--accent);
}

.hf-menu .hf-side__kits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}

.hf-menu .hf-kitbtn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--tap);
  padding: 0 calc(10px + var(--lean));
  border: 0;
  background: var(--ink-3);
  color: var(--muted);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: var(--slab);
}

.hf-menu .hf-kitbtn .hf-kit {
  --kit-w: 22px;
}

.hf-menu .hf-kitbtn.is-on {
  background: var(--ink-4);
  color: var(--paper);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.hf-menu--kbd .hf-kitbtn:focus {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

/* The stage between the panels: the two captains on a lit floor. */
.hf-menu .hf-ts__stage {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.hf-menu .hf-ts__show {
  position: absolute;
  inset: 0;
}

/* VS is a big moment: an Ink disc with a Rani ring and Marigold shout type. */
.hf-menu .hf-ts__vs {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 30%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--accent);
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 7px var(--rani-pink);
  font-family: var(--font-shout);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hf-menu .hf-ts__foot {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
}

.hf-menu .hf-ts--cup .hf-ts__foot {
  justify-content: center;
}

.hf-menu .hf-side--info {
  justify-content: flex-start;
  gap: 16px;
}

.hf-menu .hf-side__headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 32px;
  line-height: 1;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  transform: skewX(var(--slant));
  transform-origin: 0 100%;
}

.hf-menu .hf-steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.hf-menu .hf-steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  counter-increment: step;
}

.hf-menu .hf-steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  height: 32px;
  background: var(--ink-4);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  clip-path: var(--slab-s);
}

.hf-menu .hf-steps b {
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
}

.hf-menu .hf-steps span {
  font-size: 12px;
  color: var(--muted);
}

.hf-menu .hf-btm__opts {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.hf-menu .hf-btm .hf-btn--go {
  min-width: 220px;
  height: 56px;
  font-size: 19px;
}

/* ------------------------------------------------------------ squads */

.hf-menu .hf-sq {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--gap);
}

.hf-menu .hf-sq__spin {
  display: grid;
  grid-template-columns: 44px auto 44px;
  gap: 4px;
}

.hf-menu .hf-spin__team--sm {
  height: var(--tap);
  gap: 10px;
}

.hf-menu .hf-spin__team--sm > b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
}

.hf-menu .hf-sq__pitch {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

/* A monochrome tactics board: mown stripes and chalk lines, own half, attacking up. */
.hf-menu .hf-pitch {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  background:
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--paper) 2.8%, transparent) 0 12.5%, transparent 12.5% 25%),
    var(--ink-2);
}

.hf-menu .hf-pitch i {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
}

.hf-menu .hf-pitch__half {
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  border-width: 1px 0 0 !important;
}

.hf-menu .hf-pitch__circle {
  left: 50%;
  top: 0;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.hf-menu .hf-pitch__box {
  left: 20%;
  right: 20%;
  bottom: -1px;
  height: 24%;
}

.hf-menu .hf-pitch__six {
  left: 36%;
  right: 36%;
  bottom: -1px;
  height: 9%;
}

/* Starter card. menus.js places each one in px (pitchLayout.js keeps a gap
   between every pair), so the card's own size is the only input. The art is a
   pseudo-element with the cut corner, so the button can grow its hit area past
   the art without the clip-path cutting it off. */
.hf-menu .hf-mini {
  --mini-bg: var(--ink-3);
  position: absolute;
  z-index: 1;
  isolation: isolate;
  display: grid;
  align-content: center;
  gap: 3px;
  width: clamp(96px, 9vw, 124px);
  min-height: 52px;
  padding: 7px 10px 7px 12px;
  border: 0;
  background: none;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.18s var(--ease-out);
}

.hf-menu .hf-mini::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--mini-bg);
  box-shadow: inset 3px 0 0 var(--t1);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: background 0.15s var(--ease-out);
}

/* A forgiving hit area 4 px past the art (cards keep 8 px apart). */
.hf-menu .hf-mini::before {
  content: '';
  position: absolute;
  inset: -4px;
}

.hf-menu .hf-mini--elite {
  --mini-bg: var(--paper);
  color: var(--ink);
}

.hf-menu .hf-mini--common {
  --mini-bg: var(--ink-3);
}

.hf-menu .hf-mini__top {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.hf-menu .hf-mini__top b {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1;
}

.hf-menu .hf-mini__top span {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.hf-menu .hf-mini__cap {
  display: inline-grid;
  place-items: center;
  align-self: center;
  width: 15px;
  height: 15px;
  background: var(--accent);
  color: var(--on-accent);
  font-style: normal;
  font-weight: 800;
  font-size: 10px;
}

.hf-menu .hf-mini__nat {
  margin-left: auto;
  align-self: center;
  padding: 1px 3px;
  border: 1px solid currentColor;
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

.hf-menu .hf-mini__name {
  position: relative;
  min-width: 0;
  font-weight: 800;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The shirt number as a ghost numeral in the corner, behind the text. */
.hf-menu .hf-mini__num {
  position: absolute;
  right: 6px;
  bottom: 3px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 30px;
  line-height: 0.8;
  letter-spacing: -0.04em;
  opacity: 0.14;
  pointer-events: none;
}

/* The picked player is the lit thing: Marigold with Ink type. */
.hf-menu .hf-mini.is-picked,
.hf-menu .hf-benchp.is-picked {
  z-index: 2;
  background: var(--accent);
  color: var(--on-accent);
}

.hf-menu .hf-mini.is-picked {
  --mini-bg: var(--accent);
  background: none;
  transform: translate(-50%, -50%) scale(1.06);
}

.hf-menu .hf-mini.is-picked .hf-mini__cap {
  background: var(--on-accent);
  color: var(--accent);
}

/* Keyboard and pad focus: the art layer would cover an inset ring, so the card
   takes an outline just outside its edge. */
.hf-menu--kbd .hf-mini:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}

/* Touch screens: a card is never shorter than a thumb. */
@media (pointer: coarse) {
  .hf-menu .hf-mini {
    min-height: 44px;
  }
}

.hf-menu .hf-sq__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

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

.hf-menu .hf-cyc--wide {
  min-width: 168px;
}

.hf-menu .hf-sq__ovr {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.hf-menu .hf-sq__ovr b {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
}

.hf-menu .hf-sq__ovr span {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.hf-menu .hf-sq__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

.hf-menu .hf-sq__meta > span:first-child {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The picked player: a flat plate; wide screens grow it into a card with attributes. */
.hf-menu .hf-sq__pick {
  animation: hf-swap 0.2s var(--ease-out) backwards;
}

.hf-menu .hf-pick {
  --pc-fg: var(--paper);
  --pc-dim: var(--muted);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 56px;
  padding: 8px 12px 8px 16px;
  background: var(--ink-3);
  box-shadow: inset 4px 0 0 var(--t1);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.hf-menu .hf-pick--elite {
  --pc-fg: var(--ink);
  --pc-dim: var(--graphite);
  background: var(--paper);
  color: var(--ink);
}

.hf-menu .hf-pick--common {
  background: var(--ink-3);
}

.hf-menu .hf-pick__ovr {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.hf-menu .hf-pick__ovr b {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 26px;
  line-height: 0.9;
}

.hf-menu .hf-pick__ovr span {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.hf-menu .hf-pick__ovr .hf-badge {
  display: none;
}

.hf-menu .hf-pick__id {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* The picked player's full real name: two lines before it would ever truncate. */
.hf-menu .hf-pick__name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 18px;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.hf-menu .hf-pick__cap {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 10px;
}

.hf-menu .hf-pick__club {
  min-width: 0;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pc-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hf-menu .hf-pick__tag {
  align-self: start;
  padding: 4px calc(8px + var(--lean-s));
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 12px;
  clip-path: var(--slab-s);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hf-menu .hf-pick__tag.is-bench {
  background: var(--ink-4);
  color: var(--paper);
}

.hf-menu .hf-pick .hf-pc__attrs {
  display: none;
}

@media (min-width: 1000px) and (min-height: 600px) {
  .hf-menu .hf-pick {
    grid-template-rows: auto auto;
    row-gap: 4px;
    padding: 16px 18px 16px 22px;
  }

  .hf-menu .hf-pick__ovr {
    grid-row: 1 / 3;
    align-self: start;
    gap: 4px;
    padding-right: 4px;
  }

  .hf-menu .hf-pick__ovr b {
    font-family: var(--font-num);
    font-size: 44px;
  }

  .hf-menu .hf-pick__ovr span {
    font-size: 13px;
  }

  .hf-menu .hf-pick__ovr .hf-badge {
    display: inline-grid;
  }

  .hf-menu .hf-pick__name {
    font-size: 26px;
  }

  .hf-menu .hf-pick__name.is-long {
    font-size: 21px;
  }

  .hf-menu .hf-pick__club {
    font-size: 12px;
  }

  /* Six attributes with a bar each, in three columns. */
  .hf-menu .hf-pick .hf-pc__attrs {
    display: grid;
    grid-column: 2 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 16px;
    margin-top: 10px;
    padding-top: 12px;
  }

  .hf-menu .hf-pick .hf-pc__attrs i {
    position: relative;
    padding-bottom: 6px;
  }

  .hf-menu .hf-pick .hf-pc__attrs i::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--v);
    height: 2px;
    background: currentColor;
    opacity: 0.6;
  }

  .hf-menu .hf-pick--elite .hf-pc__attrs i::after {
    background: var(--ink);
  }
}

.hf-menu .hf-sq__benchhead {
  display: flex;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.hf-menu .hf-sq__bench {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 6px;
  padding-right: 4px;
}

.hf-menu .hf-benchp {
  display: grid;
  grid-template-columns: 30px 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 12px 6px 10px;
  border: 0;
  background: var(--ink-2);
  text-align: left;
  cursor: pointer;
}

.hf-menu .hf-benchp__ovr {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 18px;
}

.hf-menu .hf-benchp__pos {
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Bench rows carry the full real name (sentence case reads longer names better)
   with the club under it. */
.hf-menu .hf-benchp__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.hf-menu .hf-benchp__name small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hf-menu .hf-benchp__name small {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-menu .hf-benchp__num {
  font-family: var(--font-num);
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
}

.hf-menu .hf-benchp.is-picked .hf-benchp__pos,
.hf-menu .hf-benchp.is-picked small,
.hf-menu .hf-benchp.is-picked .hf-benchp__num {
  color: color-mix(in srgb, var(--on-accent) 75%, transparent);
}

@media (hover: hover) {
  .hf-menu .hf-mini:hover:not(.is-picked) {
    transform: translate(-50%, -50%) scale(1.04);
  }

  .hf-menu .hf-benchp:hover:not(.is-picked) {
    background: var(--ink-3);
  }
}

.hf-menu .hf-sq__hint {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-menu .hf-sq__hint.is-warn {
  color: var(--warn);
  animation: hf-nudge 0.3s var(--ease-out);
}

/* ------------------------------------------------------------ versus */

.hf-menu .hf-screen--versus {
  overflow: hidden;
}

/* The card splits at 12 degrees: each nation's colours stay inside its own half,
   the frame stays ink and the stripe between them is Rani (brand book, Menus). The
   halves sink into ink at the bottom so the referee line and the tip stay legible. */
.hf-menu .hf-screen--versus > * {
  position: relative;
  z-index: 1;
}

.hf-menu .hf-screen--versus > .hf-vs__bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hf-menu .hf-vs__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 55%, transparent) 0, transparent 22%, transparent 58%, var(--ink) 92%);
}

.hf-menu .hf-vs__half {
  position: absolute;
  top: -10%;
  bottom: -10%;
  width: 58%;
  opacity: 0.42;
  transform: skewX(var(--slant));
  animation: hf-slide-l 0.42s var(--ease-out) backwards;
}

.hf-menu .hf-vs__half--home {
  left: -8%;
  background: linear-gradient(160deg, var(--t1) 0 68%, var(--t2) 68% 100%);
}

.hf-menu .hf-vs__half--away {
  right: -8%;
  background: linear-gradient(200deg, var(--t1) 0 68%, var(--t2) 68% 100%);
  animation-name: hf-slide-r;
}

.hf-menu .hf-vs__stripe {
  position: absolute;
  left: 50%;
  top: -10%;
  bottom: -10%;
  width: 14px;
  margin-left: -7px;
  background: var(--rani-pink);
  transform: skewX(var(--slant));
}

/* The sponsor credit sits small under the venue (never crowding the title). */
.hf-menu .hf-vs__sponsor {
  margin-top: 6px;
  align-self: center;
  padding: 5px 12px;
  background: color-mix(in srgb, var(--ink) 80%, transparent);
}

.hf-menu .hf-vs {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--gap);
}

.hf-menu .hf-vs__team {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  animation: hf-from-left 0.42s var(--ease-out) 0.1s backwards;
}

.hf-menu .hf-vs__team--away {
  align-items: flex-end;
  text-align: right;
  animation-name: hf-from-right;
}

.hf-menu .hf-vs__name {
  max-width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: 75%;
  font-size: clamp(32px, 4.6vw, 72px);
  line-height: 0.95;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 18px color-mix(in srgb, var(--ink) 60%, transparent);
}

/* The Bangla name under it: upright, in the UI face (never leaned or capitalised). */
.hf-menu .hf-vs__name small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-stretch: normal;
  font-size: clamp(15px, 1.6vw, 22px);
  line-height: 1.3;
  color: color-mix(in srgb, var(--paper) 88%, transparent);
}

.hf-menu .hf-vs__meta {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-menu .hf-vs__meta b {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 20px;
  color: var(--paper);
}

/* Crest and kit together: the shirt belongs to the team. */
.hf-menu .hf-vs__crest {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.hf-menu .hf-vs__team--away .hf-vs__crest {
  flex-direction: row-reverse;
}

.hf-menu .hf-vs__coach {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.hf-menu .hf-vs__stage {
  position: relative;
  align-self: stretch;
  min-height: 0;
}

/* The two players stand on the Rani stripe; VS is an Ink disc with a Rani ring
   and Marigold shout type, high on the stage, so it never covers a face or an arm. */
.hf-menu .hf-vs__show {
  position: absolute;
  z-index: 1;
  inset: 0;
}

.hf-menu .hf-vs__vs {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 9%;
  display: grid;
  place-items: center;
  width: clamp(56px, 7vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 5px var(--ink), 0 0 0 9px var(--rani-pink);
  font-family: var(--font-shout);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1;
  color: var(--accent);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: hf-vs-pop 0.5s var(--ease-bounce) 0.25s backwards;
}

.hf-menu .hf-vs__foot {
  align-items: flex-end;
}

.hf-menu .hf-vs__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.hf-menu .hf-vs__ref {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-menu .hf-vs__ref .hf-ico {
  width: 16px;
  height: 16px;
}

.hf-menu .hf-vs__ref b {
  color: var(--paper);
}

.hf-menu .hf-vs__tip {
  max-width: 64ch;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.hf-menu .hf-vs__tip b {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 9px;
  background: var(--ink-4);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  vertical-align: 1px;
  clip-path: var(--slab-s);
}

.hf-menu .hf-vs__load {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: 260px;
}

.hf-menu .hf-vs__status {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hf-menu .hf-vs__bar {
  position: relative;
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  background: var(--ink-4);
  clip-path: polygon(1.5px 0, 100% 0, calc(100% - 1.5px) 100%, 0 100%);
}

.hf-menu .hf-vs__bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: var(--accent);
  animation: hf-indeterminate 1.1s var(--ease-out) infinite;
}

.hf-menu .hf-vs__load.is-ready .hf-vs__bar i {
  width: 100%;
  animation: none;
}

.hf-menu .hf-vs__load.is-ready .hf-vs__status {
  animation: hf-pulse 1.6s ease-in-out infinite;
}

/* ------------------------------------------------------------ settings */

.hf-menu .hf-split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--gap);
  width: 100%;
  max-width: 1180px;
}

.hf-menu .hf-split__panel {
  align-self: start;
  max-height: 100%;
  min-height: 0;
  padding: 8px 24px;
}

.hf-menu .is-swap {
  animation: hf-swap 0.22s var(--ease-out);
}

.hf-menu .hf-rows {
  display: flex;
  flex-direction: column;
}

.hf-menu .hf-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.hf-menu .hf-row:last-child {
  border-bottom: 0;
}

.hf-menu .hf-row__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.hf-menu .hf-row__label {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hf-menu .hf-row__hint {
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}

.hf-menu .hf-row__control {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.hf-menu .hf-row__control .hf-seg {
  width: 100%;
}

.hf-menu .hf-voice {
  margin-top: 6px;
  color: var(--muted);
}

/* Narrow screens: the coach drops out of the team switcher (it is on the VS card),
   so the nation's name keeps its room. */
@media (max-width: 900px), (max-height: 520px) {
  .hf-menu .hf-spin__coach {
    display: none;
  }
}

/* Narrow screens: the control column takes the room it needs and the label wraps,
   tracking tightens, and four-option rows switch to the stepper. */
@media (max-width: 900px), (max-height: 520px) {
  .hf-menu .hf-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hf-menu .hf-seg__opt {
    padding: 0 12px;
    letter-spacing: 0.06em;
    text-overflow: clip;
  }

  .hf-menu .hf-row--many .hf-seg {
    display: none;
  }

  .hf-menu .hf-row--many .hf-step {
    display: grid;
  }

  .hf-menu .hf-row--range .hf-row__control {
    width: 220px;
  }
}

.hf-menu .hf-voice.is-on {
  border-color: var(--accent);
  color: var(--paper);
}

.hf-menu .hf-panel__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 8px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-menu .hf-panel__title .hf-ico {
  width: 16px;
  height: 16px;
}

/* ------------------------------------------------------------ controls */

.hf-menu .hf-ctl {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--gap);
}

.hf-menu .hf-ctl__diagram {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px 24px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Centred while it fits, scrollable (never clipped at the top) when it doesn't. */
.hf-menu .hf-ctl__diagram > :first-child {
  margin-top: auto;
}

.hf-menu .hf-ctl__diagram > :last-child {
  margin-bottom: auto;
}

.hf-menu .hf-diag {
  position: relative;
  width: 100%;
  max-height: 100%;
}

.hf-menu .hf-diag--pad {
  aspect-ratio: 960 / 400;
}

.hf-menu .hf-diag--keys {
  aspect-ratio: 800 / 330;
}

.hf-menu .hf-diag__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hf-menu .hf-diag__body {
  fill: var(--ink-3);
  stroke: color-mix(in srgb, var(--paper) 55%, transparent);
  stroke-width: 2;
  stroke-linejoin: miter;
}

.hf-menu .hf-diag__part {
  fill: var(--ink-4);
  stroke: color-mix(in srgb, var(--paper) 28%, transparent);
  stroke-width: 1.5;
}

.hf-menu .hf-diag__part.is-on {
  fill: var(--ink-3);
  stroke: var(--paper);
}

.hf-menu .hf-diag__stick circle {
  fill: var(--ink-4);
  stroke: color-mix(in srgb, var(--paper) 25%, transparent);
  stroke-width: 1.5;
}

.hf-menu .hf-diag__stick.is-on circle {
  stroke: var(--paper);
}

.hf-menu .hf-diag__stick.is-on circle + circle {
  fill: var(--ink-4);
}

.hf-menu .hf-diag__btn circle {
  fill: var(--ink-4);
  stroke: color-mix(in srgb, var(--paper) 25%, transparent);
  stroke-width: 1.5;
}

.hf-menu .hf-diag__btn text {
  fill: var(--muted);
  font: 800 14px var(--font-ui);
  text-anchor: middle;
}

.hf-menu .hf-diag__btn.is-on circle {
  fill: var(--paper);
  stroke: none;
}

.hf-menu .hf-diag__btn.is-on text {
  fill: var(--ink);
}

.hf-menu .hf-diag__lead {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
}

.hf-menu .hf-diag__lbl {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
  transform: translate(-100%, -50%);
  text-align: right;
  white-space: nowrap;
}

.hf-menu .hf-diag__lbl--r {
  transform: translate(0, -50%);
  text-align: left;
}

.hf-menu .hf-diag__lbl--c {
  align-items: center;
  transform: translate(-50%, -50%);
  text-align: center;
}

.hf-menu .hf-diag__lbl b {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hf-menu .hf-diag__lbl span {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-menu .hf-diag__lbl.is-dim {
  opacity: 0.45;
}

.hf-menu .hf-diag__key rect {
  fill: var(--ink-3);
  stroke: color-mix(in srgb, var(--paper) 16%, transparent);
  stroke-width: 1.5;
}

.hf-menu .hf-diag__key text {
  fill: var(--muted);
  font: 700 18px var(--font-num);
  text-anchor: middle;
}

.hf-menu .hf-diag__key.is-on rect {
  fill: var(--paper);
  stroke: none;
}

.hf-menu .hf-diag__key.is-on text {
  fill: var(--ink);
}

.hf-menu .hf-diag__key.is-move rect {
  fill: var(--accent);
}

.hf-menu .hf-diag__key.is-move text {
  fill: var(--on-accent);
}

.hf-menu .hf-diag__legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.hf-menu .hf-diag__legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
}

.hf-menu .hf-diag__legend b {
  flex: none;
  min-width: 72px;
  padding: 4px 6px;
  background: var(--ink-4);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: center;
}

.hf-menu .hf-diag__phone {
  fill: none;
  stroke: color-mix(in srgb, var(--paper) 60%, transparent);
  stroke-width: 3;
}

.hf-menu .hf-diag__screen {
  fill: var(--ink-2);
}

/* Touch diagram: the in-match buttons on an 844 x 390 phone, same places, sizes,
   icons and key chips (diagrams.js reads the controls.css numbers). */
.hf-menu .hf-diag--touch {
  aspect-ratio: 892 / 422;
  container-type: inline-size;
}

.hf-menu .hf-tdiag__pitch {
  fill: none;
  stroke: color-mix(in srgb, var(--paper) 8%, transparent);
  stroke-width: 2;
}

.hf-menu .hf-tdiag__hud {
  fill: color-mix(in srgb, var(--paper) 4%, transparent);
  stroke: color-mix(in srgb, var(--paper) 12%, transparent);
  stroke-width: 1.5;
}

.hf-menu .hf-tdiag__pause path {
  fill: color-mix(in srgb, var(--ink) 60%, transparent);
  stroke: color-mix(in srgb, var(--paper) 60%, transparent);
  stroke-width: 1.5;
}

.hf-menu .hf-tdiag__pause rect {
  fill: var(--paper);
}

.hf-menu .hf-tdiag__base {
  fill: color-mix(in srgb, var(--ink) 40%, transparent);
  stroke: color-mix(in srgb, var(--paper) 42%, transparent);
  stroke-width: 2;
}

.hf-menu .hf-tdiag__chev {
  fill: color-mix(in srgb, var(--paper) 50%, transparent);
}

.hf-menu .hf-tdiag__knob {
  fill: color-mix(in srgb, var(--paper) 22%, transparent);
  stroke: color-mix(in srgb, var(--paper) 70%, transparent);
  stroke-width: 2;
}

.hf-menu .hf-tdiag__disc {
  fill: color-mix(in srgb, var(--ink) 55%, transparent);
  stroke: color-mix(in srgb, var(--paper) 62%, transparent);
  stroke-width: 2;
}

.hf-menu .hf-tdiag__btn--b .hf-tdiag__disc {
  fill: color-mix(in srgb, var(--ink) 70%, transparent);
  stroke: color-mix(in srgb, var(--paper) 92%, transparent);
  stroke-width: 2.5;
}

.hf-menu .hf-tdiag__ico {
  color: var(--paper);
  fill: none;
  stroke: var(--paper);
  stroke-width: 2.2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* As in game (css/controls.css): the shoot button's ball is the Rani dot. */
.hf-menu .hf-tdiag__ico path[d^="M1.5 21V3h21v18"] ~ circle {
  fill: var(--rani-pink);
  stroke: var(--rani-pink);
}

.hf-menu .hf-tdiag__ico path[d^="M1.5 21V3h21v18"] ~ circle + path {
  fill: var(--ink);
}

/* The button words show only when the diagram is big enough for 10 px type. */
.hf-menu .hf-tdiag__word {
  display: none;
  fill: var(--paper);
  font: 800 12px var(--font-ui);
  letter-spacing: 0.1em;
  text-anchor: middle;
}

/* SPRINT is the smallest disc: its word steps down to stay inside the rim. */
.hf-menu .hf-tdiag__word.is-sm {
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

@container (min-width: 760px) {
  .hf-menu .hf-tdiag__word {
    display: inline;
  }
}

.hf-menu .hf-tdiag__chip path {
  fill: var(--paper);
}

.hf-menu .hf-tdiag__chip text {
  fill: var(--ink);
  font: 900 11px var(--font-display);
  text-anchor: middle;
}

/* The legend fills the empty middle of the screen, like a tutorial overlay. */
.hf-menu .hf-tdiag__legend {
  position: absolute;
  z-index: 1;
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hf-menu .hf-tdiag__legend li {
  display: contents;
}

.hf-menu .hf-tdiag__legend li > span,
.hf-menu .hf-tdiag__legend li > em {
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hf-menu .hf-tdiag__legend li > em {
  color: var(--muted);
}

.hf-menu .hf-tdiag__head > span,
.hf-menu .hf-tdiag__head > em {
  font-weight: 700;
  font-size: 10px;
  color: var(--muted);
}

.hf-menu .hf-tdiag__key {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  font-size: 11px;
  clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
}

.hf-menu .hf-tdiag__key.is-sprint {
  background: transparent;
  color: var(--paper);
  clip-path: none;
}

.hf-menu .hf-tdiag__key svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.hf-menu .hf-ctl__guide {
  display: grid;
  align-content: start;
  gap: 8px;
  padding-right: 4px;
}

.hf-menu .hf-guide__card {
  padding: 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink-2) 92%, transparent);
}

.hf-menu .hf-guide__title {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hf-menu .hf-guide__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hf-menu .hf-guide__list li {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.35;
}

.hf-menu .hf-guide__list b {
  padding: 2px 6px;
  background: var(--ink-4);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ pause */

.hf-menu .hf-screen--pause {
  justify-content: center;
}

.hf-menu .hf-pz {
  flex: 0 1 auto;
  height: min(100%, 620px);
  min-height: 0;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--gap);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.hf-menu .hf-pz__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  animation: hf-from-left 0.26s var(--ease-out) backwards;
}

.hf-menu .hf-pz__score {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hf-menu .hf-pz__team {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
}

.hf-menu .hf-pz__goals {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
}

.hf-menu .hf-pz__goals i {
  font-style: normal;
  color: var(--graphite);
}

.hf-menu .hf-pz__clock {
  font-family: var(--font-num);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-menu .hf-pz__side .hf-rail {
  margin-top: 4px;
}

/* Solid surfaces: the pitch never tints the pause menu. */
.hf-menu .hf-pz__panel {
  min-height: 0;
  padding: 12px 24px 16px;
  background: var(--night-2);
}

/* Big screens: the block sits in the middle and the panel is as tall as its content. */
@media (min-width: 1000px) and (min-height: 521px) {
  .hf-menu .hf-pz {
    height: auto;
    max-height: 100%;
    align-items: start;
  }

  .hf-menu .hf-pz__panel {
    max-height: calc(100dvh - 2 * var(--gy-t) - 96px);
  }
}

.hf-menu .hf-pz__facts {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px;
}

.hf-menu .hf-pz__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hf-menu .hf-pz__diagram {
  max-width: 760px;
  margin: 8px auto 0;
}

.hf-menu .hf-pz__quit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.hf-menu .hf-choice {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  padding: 16px 20px;
  border: 1px solid var(--line-2);
  background: var(--ink-2);
  text-align: left;
  cursor: pointer;
  clip-path: var(--kick-card);
}

.hf-menu .hf-choice .hf-ico {
  width: 28px;
  height: 28px;
}

.hf-menu .hf-choice > span {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hf-menu .hf-choice b {
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
}

.hf-menu .hf-choice small {
  font-size: 13px;
  color: var(--muted);
}

.hf-menu .hf-confirm__box .hf-eyebrow .hf-ico {
  width: 14px;
  height: 14px;
}

.hf-menu .hf-choice small {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hf-menu .hf-choice small .hf-ico {
  width: 14px;
  height: 14px;
}

@media (hover: hover) {
  .hf-menu .hf-choice:hover {
    border-color: var(--paper);
  }
}

.hf-menu:not(.hf-menu--kbd) .hf-screen--pause .hf-btm {
  display: none;
}

.hf-menu .hf-screen--pause .hf-btm {
  min-height: 0;
}

/* Confirmation: a real dialog over the panel. */
.hf-menu .hf-confirm {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--ink) 76%, transparent);
  animation: hf-fade-in 0.16s var(--ease-out);
}

.hf-menu .hf-confirm__box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(460px, 100%);
  padding: 24px;
  border: 1px solid var(--line-2);
  border-top: 4px solid var(--accent);
  background: var(--ink-2);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  clip-path: var(--kick-card-l);
  animation: hf-pop 0.2s var(--ease-bounce);
}

.hf-menu .hf-confirm__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  text-transform: uppercase;
}

.hf-menu .hf-confirm__text {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.hf-menu .hf-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* ------------------------------------------------------------ stats, timeline, ratings */

/* Possession strip: both shares big over one split bar, the leading side in paper. */
.hf-menu .hf-poss {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 6px;
  margin: 4px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.hf-menu .hf-poss__team {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.hf-menu .hf-poss__team--away {
  justify-content: flex-end;
}

.hf-menu .hf-poss__label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--label-tracking);
  text-align: center;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-menu .hf-poss__v {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 34px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--muted);
}

.hf-menu .hf-poss__v small {
  margin-left: 2px;
  font-size: 0.5em;
  letter-spacing: 0;
}

.hf-menu .hf-poss__v--away {
  text-align: right;
}

.hf-menu .hf-poss.is-home .hf-poss__v:not(.hf-poss__v--away),
.hf-menu .hf-poss.is-away .hf-poss__v--away,
.hf-menu .hf-poss:not(.is-home):not(.is-away) .hf-poss__v {
  color: var(--paper);
}

.hf-menu .hf-poss__bar {
  display: flex;
  gap: 3px;
  height: 8px;
}

.hf-menu .hf-poss__bar i {
  display: block;
  min-width: 2px;
  background: var(--steel);
}

.hf-menu .hf-poss__bar i:first-child {
  flex: 0 0 calc(var(--h) - 1.5px);
  background: var(--paper);
  transform-origin: left center;
  animation: hf-grow 0.5s var(--ease-out) backwards;
}

.hf-menu .hf-poss__bar i:last-child {
  flex: 1;
  transform-origin: right center;
  animation: hf-grow 0.5s var(--ease-out) backwards;
}

.hf-menu .hf-cmp {
  display: grid;
  gap: 10px;
}

.hf-menu .hf-cmp__row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr) 52px;
  grid-template-rows: auto 4px;
  align-items: center;
  column-gap: 2px;
  row-gap: 6px;
}

.hf-menu .hf-cmp__v {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 16px;
  color: var(--muted);
}

.hf-menu .hf-cmp__v--away {
  grid-column: 4;
  text-align: right;
}

.hf-menu .hf-cmp__row.is-home .hf-cmp__v:not(.hf-cmp__v--away),
.hf-menu .hf-cmp__row.is-away .hf-cmp__v--away,
.hf-menu .hf-cmp__row:not(.is-home):not(.is-away) .hf-cmp__v {
  color: var(--paper);
}

.hf-menu .hf-cmp__label {
  grid-column: 2 / 4;
  grid-row: 1;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.hf-menu .hf-cmp__bar {
  position: relative;
  grid-row: 2;
  grid-column: 1 / 3;
  height: 4px;
  background: var(--ink-4);
}

.hf-menu .hf-cmp__bar--away {
  grid-column: 3 / 5;
}

.hf-menu .hf-cmp__bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--w);
  background: var(--paper);
  transform-origin: right center;
  animation: hf-grow 0.5s var(--ease-out) backwards;
}

.hf-menu .hf-cmp__bar--away i {
  left: 0;
  right: auto;
  background: var(--steel);
  transform-origin: left center;
}

.hf-menu .hf-tl {
  position: relative;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hf-menu .hf-tl::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.hf-menu .hf-tl__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
  animation: hf-swap 0.3s var(--ease-out) backwards;
}

.hf-menu .hf-tl__min {
  font-family: var(--font-num);
  position: relative;
  z-index: 1;
  justify-self: center;
  padding: 3px 6px;
  background: var(--ink-4);
  font-weight: 700;
  font-size: 12px;
}

.hf-menu .hf-tl__h,
.hf-menu .hf-tl__a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hf-menu .hf-tl__h {
  flex-direction: row-reverse;
  padding-right: 8px;
  text-align: right;
}

.hf-menu .hf-tl__a {
  padding-left: 8px;
}

.hf-menu .hf-tl__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hf-menu .hf-tl__who small {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.hf-menu .hf-tl__who em {
  font-style: normal;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 1px 4px;
  background: var(--ink-4);
}

.hf-menu .hf-ev {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
}

/* Goals: a match ball. Own goals: the same ball in graphite, with the OG tag. */
.hf-menu .hf-ev--goal {
  width: 16px;
  height: 16px;
  overflow: visible;
}

.hf-menu .hf-ev__ball { fill: var(--paper); }
.hf-menu .hf-ev__panel { fill: var(--ink); }

.hf-menu .hf-ev__seam {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
}

.hf-menu .hf-ev--og .hf-ev__ball { fill: var(--steel); }

.hf-menu .hf-ev--yellow,
.hf-menu .hf-ev--red,
.hf-menu .hf-ev--second {
  width: 10px;
  height: 14px;
}

.hf-menu .hf-ev--yellow { background: var(--warn); }
.hf-menu .hf-ev--red { background: var(--danger); }
.hf-menu .hf-ev--second { background: linear-gradient(135deg, var(--warn) 0 50%, var(--danger) 50% 100%); }

.hf-menu .hf-rt__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.hf-menu .hf-rt__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hf-menu .hf-rt ol {
  display: grid;
  gap: 2px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.hf-menu .hf-rt li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 30px 42px;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 2px 4px;
}

.hf-menu .hf-rt li:nth-child(odd) {
  background: color-mix(in srgb, var(--paper) 3%, transparent);
}

.hf-menu .hf-rt__num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 11px;
  text-align: right;
  color: var(--muted);
}

/* Full real names in sentence case, one line each: when the column is short of
   room the given names take the ellipsis and the surname stays whole. */
.hf-menu .hf-rt__name {
  display: flex;
  align-items: center;
  gap: 0.3em;
  min-width: 0;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

.hf-menu .hf-rt__given {
  flex: 0 1 auto;
  min-width: 1.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
}

.hf-menu .hf-rt__last {
  flex: none;
}

.hf-menu .hf-rt__motm {
  display: inline-grid;
  color: var(--accent);
}

.hf-menu .hf-rt__motm .hf-ico {
  width: 14px;
  height: 14px;
  fill: var(--accent);
}

.hf-menu .hf-rt__pos {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.hf-menu .hf-rt__val {
  font-family: var(--font-num);
  padding: 4px 0;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  clip-path: var(--slab-s);
}

.hf-menu .hf-rt__val.is-top { background: var(--paper); color: var(--ink); }
.hf-menu .hf-rt__val.is-good { background: var(--ink-3); }
.hf-menu .hf-rt__val.is-ok { background: var(--ink-4); color: var(--paper); }
.hf-menu .hf-rt__val.is-low { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); }

/* ------------------------------------------------------------ match report (half and full time) */

.hf-menu .hf-rp__hero {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--gap);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  animation: hf-rise 0.36s var(--ease-out) backwards;
}

.hf-menu .hf-rp__outcome {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.hf-menu .hf-rp__outcome .hf-h1 {
  --h1: 52px;
  max-width: 100%;
}

.hf-menu .hf-rp__hero.is-win .hf-rp__outcome::after {
  content: '';
  width: 64px;
  height: 4px;
  background: var(--accent);
  transform-origin: left center;
  animation: hf-grow 0.5s var(--ease-out) 0.2s backwards;
}

.hf-menu .hf-rp__hero.is-loss .hf-h1 {
  color: var(--muted);
}

.hf-menu .hf-rp__note {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hf-menu .hf-rp__score {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hf-menu .hf-rp__team {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hf-menu .hf-rp__team--away {
  flex-direction: row-reverse;
  text-align: right;
}

.hf-menu .hf-rp__tname {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hf-menu .hf-rp__tname b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
}

.hf-menu .hf-rp__tname small {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.hf-menu .hf-rp__goals {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hf-menu .hf-rp__goals b {
  display: grid;
  place-items: center;
  min-width: 68px;
  height: 84px;
  padding: 0 10px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 68px;
  line-height: 1;
  letter-spacing: -0.04em;
  animation: hf-pop 0.36s var(--ease-out) 0.12s backwards;
}

.hf-menu .hf-rp__goals i {
  width: 14px;
  height: 4px;
  background: var(--muted);
}

.hf-menu .hf-rp__tabs {
  justify-self: end;
}

/* Panels are as tall as their content (scrolling inside when they outgrow the screen). */
.hf-menu .hf-rp {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1.2fr);
  align-items: start;
  gap: var(--gap);
}

.hf-menu .hf-rp__panel {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
  min-height: 0;
  max-height: 100%;
}

.hf-menu .hf-rp__card {
  flex: 0 1 auto;
  min-height: 0;
  padding: 4px 20px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--paper) 24%, transparent) transparent;
}

.hf-menu .hf-rp__legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--paper);
}

.hf-menu .hf-rp__legend i {
  width: 10px;
  height: 10px;
  margin-left: 6px;
}

.hf-menu .hf-rp__legend .is-home { background: var(--paper); }
.hf-menu .hf-rp__legend .is-away { background: var(--steel); }

.hf-menu .hf-motm {
  position: relative;
  isolation: isolate;
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  height: 240px;
  overflow: hidden;
  animation: hf-rise 0.4s var(--ease-out) 0.15s backwards;
}

.hf-menu .hf-motm::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 8%;
  top: -10%;
  bottom: -10%;
  width: 30%;
  background: var(--t1);
  opacity: 0.22;
  transform: skewX(var(--slant));
}

.hf-menu .hf-motm__stage {
  position: relative;
  min-height: 0;
}

.hf-menu .hf-motm__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 16px 16px 16px 0;
}

.hf-menu .hf-motm__rating {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 56px;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

/* The man of the match by his full real name: two lines before an ellipsis. */
.hf-menu .hf-motm__name {
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.hf-menu .hf-motm__name.is-long {
  font-size: 20px;
}

/* "Match stats by ই-ঠিকানা" under the half-time stats (SPONSOR.md). */
.hf-menu .hf-rp__sponsor {
  display: flex;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.hf-menu .hf-motm__team {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-menu .hf-motm__stats {
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
}

.hf-menu .hf-ht__count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--ink-4);
}

.hf-menu .hf-ht__count i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  animation: hf-countdown var(--secs) linear forwards;
}

/* Big screens show the three report panels at once; smaller ones use the tabs. */
@media (min-width: 1280px) and (min-height: 761px) {
  .hf-menu .hf-rp__tabs,
  .hf-menu .hf-rp__glance {
    display: none;
  }
}

@media (max-width: 1279px), (max-height: 760px) {
  .hf-menu .hf-rp {
    grid-template-columns: minmax(0, 1fr);
  }

  .hf-menu .hf-rp__panel {
    display: none;
  }

  .hf-menu .hf-rp[data-tab='summary'] .hf-rp__panel--summary,
  .hf-menu .hf-rp[data-tab='stats'] .hf-rp__panel--stats,
  .hf-menu .hf-rp[data-tab='ratings'] .hf-rp__panel--ratings {
    display: flex;
    animation: hf-swap 0.22s var(--ease-out);
  }

  /* Summary keeps the full height: the man of the match stands in the 3D stage. */
  .hf-menu .hf-rp__panel--summary {
    flex-direction: row;
    align-self: stretch;
  }

  .hf-menu .hf-rp__panel--summary .hf-motm {
    flex: 0 0 46%;
    height: auto;
  }

  .hf-menu .hf-rp__panel--summary .hf-rp__glance {
    flex: 0 0 46%;
  }

  .hf-menu .hf-rp__panel--summary .hf-rp__tl {
    flex: 1 1 0;
  }

  .hf-menu .hf-rp__panel--stats .hf-cmp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
  }
}

/* ------------------------------------------------------------ SAFF Cup */

.hf-menu .hf-cup {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: var(--gap);
}

.hf-menu .hf-cup__side,
.hf-menu .hf-cup__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding-right: 4px;
}

.hf-menu .hf-fx {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-top: 4px solid var(--accent);
}

.hf-menu .hf-fx.is-out {
  border-top-color: var(--line-2);
}

.hf-menu .hf-fx__stage {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.hf-menu .hf-fx__stage b {
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
}

.hf-menu .hf-fx__teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

/* Both sides stack the same rows from the top, so crest, code and tag line up. */
.hf-menu .hf-fx__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.hf-menu .hf-fx__code {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
}

.hf-menu .hf-fx__name {
  max-width: 100%;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hf-menu .hf-fx__team .hf-tag {
  height: 20px;
  font-style: normal;
}

.hf-menu .hf-fx__vs {
  align-self: center;
  font-family: var(--font-shout);
  font-weight: 800;
  font-size: 22px;
  color: var(--accent);
}

.hf-menu .hf-fx__meta {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.hf-menu .hf-fx__out {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hf-menu .hf-fx__out p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.hf-menu .hf-group {
  padding: 12px 16px;
}

.hf-menu .hf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.hf-menu .hf-table caption {
  padding-bottom: 8px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
}

.hf-menu .hf-table th {
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-menu .hf-table td {
  font-family: var(--font-num);
  padding: 7px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 6%, transparent);
  font-weight: 700;
  text-align: center;
}

.hf-menu .hf-table .hf-table__team {
  text-align: left;
  white-space: nowrap;
}

.hf-menu .hf-table__team .hf-badge {
  margin-right: 8px;
}

.hf-menu .hf-table__team > b {
  margin-right: 8px;
  font-weight: 800;
}

.hf-menu .hf-table__team > span {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--muted);
}

.hf-menu .hf-table__pts {
  font-weight: 800;
}

.hf-menu .hf-table tbody tr:nth-child(2) td {
  border-bottom: 1px solid var(--line-2);
}

.hf-menu .hf-table tr.is-user td {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.hf-menu .hf-table tr.is-user .hf-table__pos {
  box-shadow: inset 3px 0 0 var(--accent);
}

.hf-menu .hf-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.hf-menu .hf-legend i {
  width: 16px;
  height: 2px;
  background: var(--line-2);
}

.hf-menu .hf-bracket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 16px;
  padding: 16px;
}

.hf-menu .hf-bracket__col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.hf-menu .hf-tie {
  border: 1px solid var(--line);
  background: var(--ink-2);
}

.hf-menu .hf-tie__row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
}

.hf-menu .hf-tie__row + .hf-tie__row {
  border-top: 1px solid var(--line);
}

.hf-menu .hf-tie__code {
  font-weight: 800;
  font-size: 13px;
}

.hf-menu .hf-tie__score {
  font-family: var(--font-num);
  margin-left: auto;
  font-weight: 700;
  font-size: 14px;
}

.hf-menu .hf-tie__score small {
  margin-left: 4px;
  font-weight: 600;
  font-size: 10px;
  color: var(--muted);
}

.hf-menu .hf-tie__row.is-lose {
  opacity: 0.5;
}

.hf-menu .hf-tie__row.is-user {
  box-shadow: inset 3px 0 0 var(--accent);
}

.hf-menu .hf-tie.is-tbd .hf-tie__code {
  color: var(--muted);
}

.hf-menu .hf-bracket__champ {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border: 1px solid var(--line-2);
}

.hf-menu .hf-bracket__champ > b {
  font-weight: 800;
  font-size: 18px;
}

.hf-menu .hf-bracket__champ .hf-ico {
  width: 28px;
  height: 28px;
}

.hf-menu .hf-results {
  padding: 16px;
}

.hf-menu .hf-results ul {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.hf-menu .hf-results li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--ink-2);
}

.hf-menu .hf-results li.is-user {
  box-shadow: inset 3px 0 0 var(--accent);
}

.hf-menu .hf-res__team {
  font-weight: 800;
  font-size: 13px;
}

.hf-menu .hf-res__team--away {
  text-align: right;
}

.hf-menu .hf-res__score {
  font-family: var(--font-num);
  padding: 2px 8px;
  background: var(--ink-4);
  font-weight: 700;
  font-size: 14px;
}

.hf-menu .hf-results small {
  grid-column: 1 / -1;
  font-size: 11px;
  text-align: center;
  color: var(--muted);
}

.hf-menu .hf-entry {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--gap);
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.hf-menu .hf-entry__team {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  overflow: hidden;
}

.hf-menu .hf-entry__team::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--t1) 0 68%, var(--t2) 68% 100%);
}

.hf-menu .hf-entry__team > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hf-menu .hf-entry__name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 36px;
  line-height: 1;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  transform: skewX(var(--slant));
  transform-origin: 0 100%;
}

.hf-menu .hf-entry__team > div > span:last-child {
  font-size: 13px;
  color: var(--muted);
}

.hf-menu .hf-entry__tiles {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
}

/* Champion. */
.hf-menu .hf-champ {
  position: relative;
  isolation: isolate;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
}

.hf-menu .hf-champ::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 30%;
  top: -10%;
  bottom: -10%;
  width: 22%;
  background: var(--t1);
  opacity: 0.18;
  transform: skewX(var(--slant));
}

.hf-menu .hf-champ__mark {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--logo-mark) center / contain no-repeat;
  opacity: 0.04;
}

.hf-menu .hf-champ__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.hf-menu .hf-champ__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: clamp(44px, 8vw, 104px);
  line-height: 0.92;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  transform: skewX(var(--slant));
  transform-origin: 0 100%;
  animation: hf-slide-up 0.6s var(--ease-bounce) 0.15s backwards;
}

.hf-menu .hf-champ__badge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hf-menu .hf-champ__final {
  margin: 0;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hf-menu .hf-champ__you {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.hf-menu .hf-champ.is-user .hf-champ__you {
  color: var(--paper);
  font-weight: 700;
}

/* A flat silver trophy: paper, stone and steel blocks, no shine. */
.hf-menu .hf-trophy {
  position: relative;
  display: block;
  flex: none;
  width: 120px;
  height: 152px;
  transform: scale(1.4);
  animation: hf-trophy-in 0.7s var(--ease-out) backwards;
}

.hf-menu .hf-trophy i {
  position: absolute;
  display: block;
}

.hf-menu .hf-trophy__bowl {
  left: 20px;
  top: 0;
  width: 80px;
  height: 80px;
  border-radius: 0 0 50% 50% / 0 0 72% 72%;
  background: linear-gradient(90deg, var(--stone) 0 50%, var(--paper) 50% 100%);
}

.hf-menu .hf-trophy__handle {
  top: 10px;
  width: 34px;
  height: 46px;
  border: 7px solid var(--stone);
  border-radius: 50%;
}

.hf-menu .hf-trophy__handle--l {
  left: 2px;
  border-right-color: transparent;
}

.hf-menu .hf-trophy__handle--r {
  right: 2px;
  border-left-color: transparent;
}

.hf-menu .hf-trophy__stem {
  left: 51px;
  top: 76px;
  width: 18px;
  height: 42px;
  background: var(--steel);
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}

.hf-menu .hf-trophy__base {
  left: 24px;
  bottom: 4px;
  width: 72px;
  height: 32px;
  background: var(--night-2);
  box-shadow: inset 0 3px 0 var(--paper), inset 0 -3px 0 var(--accent);
}

/* ------------------------------------------------------------ 3D showcase */

/* Soft edges: the studio floor light never ends in a hard line at the canvas edge. */
.hf-showcase {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(0deg, transparent 0, #000 10%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(0deg, transparent 0, #000 10%);
  mask-composite: intersect;
  cursor: grab;
  touch-action: pan-y;
  opacity: 1;
  transition: opacity 0.16s var(--ease-out);
  animation: hf-fade-in 0.4s var(--ease-out);
}

.hf-showcase:active {
  cursor: grabbing;
}

.hf-showcase.is-swapping {
  opacity: 0;
}

/* ------------------------------------------------------------ broadcast stinger */

/* A Marigold edge leads an ink wipe across the screen at the 12 degree lean and
   the T! mark stamps the centre (the ball is the Rani dot); the next screen is
   swapped in underneath while it covers. */
.hf-sting {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.hf-sting.is-in,
.hf-sting.is-out {
  visibility: visible;
  pointer-events: auto;
}

.hf-sting__edge,
.hf-sting__ink {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -30%;
  width: 160%;
  transform: translateX(-110%) skewX(var(--slant));
}

.hf-sting__edge {
  background: var(--accent);
}

.hf-sting__ink {
  background: var(--ink);
}

.hf-sting__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(64px, 14vmin, 120px);
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
}

.hf-sting.is-in .hf-sting__edge {
  animation: hf-sting-in 0.24s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

.hf-sting.is-in .hf-sting__ink {
  animation: hf-sting-in 0.21s cubic-bezier(0.7, 0, 0.3, 1) 0.03s forwards;
}

.hf-sting.is-in .hf-sting__mark {
  animation: hf-sting-mark 0.18s var(--ease-out) 0.08s forwards;
}

.hf-sting.is-out .hf-sting__ink {
  transform: translateX(0) skewX(var(--slant));
  animation: hf-sting-out 0.26s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

.hf-sting.is-out .hf-sting__edge {
  transform: translateX(0) skewX(var(--slant));
  animation: hf-sting-out 0.26s cubic-bezier(0.7, 0, 0.3, 1) 0.04s forwards;
}

.hf-sting.is-out .hf-sting__mark {
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: hf-sting-mark-out 0.14s ease-in forwards;
}

/* ------------------------------------------------------------ responsive: tablets */

@media (max-width: 1279px) {
  .hf-menu {
    --gx-l: max(24px, env(safe-area-inset-left));
    --gx-r: max(24px, env(safe-area-inset-right));
    --h1: 34px;
  }

  .hf-menu .hf-hero__title {
    font-size: clamp(48px, 6vw, 80px);
  }

  .hf-menu .hf-split {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .hf-menu .hf-pz {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .hf-menu .hf-btm .hf-btm__hints {
    display: none;
  }
}

/* ------------------------------------------------------------ responsive: phones in landscape */

@media (max-height: 520px) {
  .hf-menu {
    --gx-l: max(16px, env(safe-area-inset-left));
    --gx-r: max(16px, env(safe-area-inset-right));
    --gy-t: max(12px, env(safe-area-inset-top));
    --gy-b: max(10px, env(safe-area-inset-bottom));
    --gap: 8px;
    --top-h: 44px;
    --btm-h: 48px;
    --tap: 44px;
    --h1: 22px;
    --cut: 12px;
  }

  .hf-menu .hf-top__titles {
    gap: 3px;
  }

  .hf-menu .hf-eyebrow,
  .hf-menu .hf-label {
    font-size: var(--label-size-phone);
    letter-spacing: var(--label-tracking-phone);
  }

  .hf-menu .hf-tag {
    font-size: var(--label-size-phone);
    letter-spacing: var(--label-tracking-phone);
  }

  .hf-menu .hf-back {
    width: 44px;
    padding: 0;
  }

  .hf-menu .hf-back span {
    display: none;
  }

  .hf-menu .hf-tag--ghost {
    height: 30px;
    padding: 0 10px;
  }

  .hf-menu .hf-btn {
    gap: 8px;
    min-width: 0;
    padding: 0 16px;
    font-size: 12px;
    letter-spacing: 0.12em;
  }

  .hf-menu .hf-btn--primary {
    min-width: 132px;
    padding: 0 26px 0 18px;
  }

  .hf-menu .hf-btm__hints {
    display: none !important;
  }

  .hf-menu .hf-tab {
    padding: 0 12px;
    font-size: 11px;
  }

  .hf-menu .hf-rail__item {
    gap: 10px;
    padding: 0 12px;
    font-size: 12px;
  }

  .hf-menu .hf-rail__item .hf-ico {
    width: 18px;
    height: 18px;
  }

  .hf-menu .hf-seg__opt {
    font-size: 11px;
  }

  .hf-menu .hf-cyc {
    min-width: 116px;
    padding: 0 10px;
    row-gap: 3px;
  }

  .hf-menu .hf-cyc__value {
    font-size: 12px;
  }

  .hf-menu .hf-cyc__label {
    font-size: 10px;
    letter-spacing: var(--label-tracking-phone);
  }

  .hf-menu .hf-badge--md { --bw: 38px; }
  .hf-menu .hf-badge--lg { --bw: 52px; }

  /* Title */
  .hf-menu .hf-title .hf-lockup {
    --u: clamp(26px, 8.5vh, 40px);
  }

  .hf-menu .hf-press {
    height: 44px;
    font-size: 12px;
  }

  .hf-menu .hf-title__foot {
    font-size: 10px;
    letter-spacing: var(--label-tracking-phone);
  }

  /* Hub */
  .hf-menu .hf-brandbar__mark {
    width: 32px;
    height: 32px;
  }

  .hf-menu .hf-brandbar__word {
    height: 18px;
  }

  .hf-menu .hf-brandbar .hf-chip {
    padding: 4px 6px 3px;
    font-size: 10px;
    letter-spacing: var(--label-tracking-phone);
  }

  .hf-menu .hf-live {
    height: 32px;
    gap: 8px;
    padding-right: 10px;
  }

  .hf-menu .hf-live__line {
    font-family: var(--font-num);
    font-size: 13px;
  }

  .hf-menu .hf-live__clock {
    font-family: var(--font-num);
    font-size: 11px;
  }

  .hf-menu .hf-hub {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  }

  .hf-menu .hf-hero {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
  }

  .hf-menu .hf-hero__copy {
    left: 16px;
    top: 16px;
    gap: 8px;
    max-width: 52%;
  }

  .hf-menu .hf-hero__title {
    font-size: clamp(30px, 9.4vh, 40px);
  }

  .hf-menu .hf-hero__sub {
    font-size: 11px;
    line-height: 1.35;
  }

  .hf-menu .hf-hero__cta {
    height: 40px;
    padding: 0 24px 0 14px;
    font-size: 11px;
  }

  .hf-menu .hf-hero__stage {
    width: 56%;
  }

  .hf-menu .hf-hero__feature {
    left: 12px;
    bottom: 12px;
  }

  .hf-menu .hf-hero__feature .hf-pc--lg {
    display: none;
  }

  .hf-menu .hf-hero__feature .hf-pc--plate {
    display: grid;
    width: 196px;
  }

  .hf-menu .hf-hub__grid {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }

  .hf-menu .hf-tile {
    gap: 4px;
    padding: 12px;
  }

  .hf-menu .hf-tile__ico {
    left: 12px;
    top: 12px;
    width: 32px;
    height: 32px;
  }

  .hf-menu .hf-tile__ico .hf-ico {
    width: 18px;
    height: 18px;
  }

  .hf-menu .hf-tile__title {
    font-size: 16px;
  }

  .hf-menu .hf-tile__sub {
    font-size: 11px;
  }

  .hf-menu .hf-tile__arrow {
    right: 12px;
    top: 18px;
  }

  .hf-menu .hf-tile--cup {
    padding-left: 56px;
    justify-content: center;
  }

  /* Low in the tile and off the right edge: the arrow corner and the copy stay clear. */
  .hf-menu .hf-tile__trophy {
    right: calc(3% + 4px);
    top: calc(50% + 20px);
    transform: translateY(-50%) scale(0.56);
  }

  .hf-menu .hf-tile__art {
    width: 70%;
    right: -14%;
    bottom: -14%;
  }

  .hf-menu .hf-tile--cup .hf-tile__ico {
    top: 50%;
    transform: translateY(-50%);
  }

  .hf-menu .hf-cuptile {
    gap: 4px;
    max-width: calc(100% - 72px);
  }

  .hf-menu .hf-cuptile__fx {
    font-family: var(--font-num);
    font-size: 17px;
  }

  .hf-menu .hf-cuptile__label,
  .hf-menu .hf-cuptile__note {
    font-size: var(--meta-size-phone);
  }

  .hf-menu .hf-ticker {
    height: calc(30px + env(safe-area-inset-bottom));
  }

  .hf-menu .hf-ticker__tag {
    padding-right: 20px;
    font-size: 11px;
  }

  .hf-menu .hf-ticker__item {
    font-size: 11px;
  }

  /* Team select */
  .hf-menu .hf-ts {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.84fr) minmax(0, 1fr);
  }

  .hf-menu .hf-side {
    gap: 6px;
    padding: 10px 10px 8px;
  }

  /* The stage tags already say YOU and CPU: the head row goes to give the XI room
     (a custom XI shows in the switcher instead). */
  .hf-menu .hf-side__head {
    display: none;
  }

  .hf-menu .hf-spin__custom {
    display: inline;
  }

  .hf-menu .hf-side__idx {
    font-family: var(--font-num);
    font-size: var(--meta-size-phone);
  }

  /* The switcher keeps 44 px arrows; the crest moves to the rating row so the name has room. */
  .hf-menu .hf-spin {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .hf-menu .hf-spin__arrow {
    width: 44px;
  }

  .hf-menu .hf-spin__team {
    height: 48px;
    gap: 8px;
    padding: 0 10px;
  }

  .hf-menu .hf-spin__team:not(.hf-spin__team--sm) .hf-badge {
    display: none;
  }

  .hf-menu .hf-side__ovr .hf-badge {
    display: inline-grid;
  }

  .hf-menu .hf-spin__name {
    gap: 3px;
  }

  .hf-menu .hf-spin__meta {
    font-size: var(--meta-size-phone);
  }

  .hf-menu .hf-side__ovr b {
    font-family: var(--font-num);
    font-size: 26px;
  }

  .hf-menu .hf-side__ovr > span {
    font-size: 10px;
  }

  .hf-menu .hf-side__bars {
    gap: 3px;
  }

  .hf-menu .hf-bar {
    grid-template-columns: 30px 1fr 22px;
    gap: 6px;
  }

  .hf-menu .hf-bar__label {
    font-size: 10px;
    letter-spacing: var(--label-tracking-phone);
  }

  .hf-menu .hf-bar__track {
    height: 4px;
  }

  .hf-menu .hf-bar__val {
    font-family: var(--font-num);
    font-size: 12px;
  }

  .hf-menu .hf-side__keys .hf-eyebrow,
  .hf-menu .hf-side__form {
    display: none;
  }

  .hf-menu .hf-side__keys ol {
    margin: 0;
  }

  .hf-menu .hf-side__keys li {
    padding: 3px 6px;
    column-gap: 5px;
    row-gap: 1px;
  }

  .hf-menu .hf-side__keys li b {
    font-size: 14px;
  }

  .hf-menu .hf-side__keys li span {
    font-size: 12px;
  }

  .hf-menu .hf-side__keys li span small {
    font-size: 11px;
  }

  .hf-menu .hf-side__keys li i {
    font-size: 10px;
  }

  .hf-menu .hf-kitbtn {
    gap: 6px;
    padding: 0 8px;
    font-size: 11px;
  }

  .hf-menu .hf-kitbtn .hf-kit {
    --kit-w: 18px;
  }

  .hf-menu .hf-ts__vs {
    top: 22%;
    width: 44px;
    height: 44px;
    font-size: 19px;
    box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--rani-pink);
  }

  .hf-menu .hf-ts__foot {
    bottom: 0;
  }

  .hf-menu .hf-ts__foot .hf-tag {
    height: 22px;
    font-size: 10px;
  }

  .hf-menu .hf-side__headline {
    font-size: 20px;
  }

  .hf-menu .hf-steps {
    gap: 6px;
  }

  .hf-menu .hf-steps li {
    grid-template-columns: 24px 1fr;
    column-gap: 8px;
  }

  .hf-menu .hf-steps li::before {
    height: 24px;
    font-size: 10px;
  }

  .hf-menu .hf-steps b {
    font-size: 12px;
  }

  .hf-menu .hf-steps span {
    font-size: var(--meta-size-phone);
  }

  .hf-menu .hf-btm .hf-btn--go {
    min-width: 168px;
    height: 48px;
    font-size: 13px;
  }

  /* Squads */
  .hf-menu .hf-sq {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  }

  .hf-menu .hf-spin__team--sm > b {
    font-size: 15px;
  }

  /* Starter cards: two lines, OVR + position over the name, at least a thumb tall. */
  .hf-menu .hf-mini {
    width: clamp(80px, 11vw, 96px);
    min-height: 44px;
    gap: 1px;
    padding: 4px 4px 4px 8px;
  }

  .hf-menu .hf-mini::after {
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
  }

  .hf-menu .hf-mini__top {
    gap: 4px;
  }

  .hf-menu .hf-mini__top b {
    font-family: var(--font-num);
    font-size: 15px;
  }

  .hf-menu .hf-mini__top span {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .hf-menu .hf-mini__nat {
    display: none;
  }

  .hf-menu .hf-mini__cap {
    width: 13px;
    height: 13px;
  }

  .hf-menu .hf-mini__name {
    font-size: 11px;
    letter-spacing: -0.01em;
  }

  .hf-menu .hf-mini__num {
    font-family: var(--font-num);
    right: 4px;
    bottom: 2px;
    font-size: 22px;
  }

  /* The board takes the full height on the left; the actions move under the bench. */
  .hf-menu .hf-screen--squads {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .hf-menu .hf-screen--squads > .hf-top {
    grid-column: 1 / -1;
  }

  .hf-menu .hf-screen--squads .hf-sq {
    display: contents;
  }

  .hf-menu .hf-screen--squads .hf-sq__pitch {
    grid-column: 1;
    grid-row: 2 / 4;
  }

  .hf-menu .hf-screen--squads .hf-sq__side {
    grid-column: 2;
    grid-row: 2;
  }

  .hf-menu .hf-screen--squads > .hf-btm {
    grid-column: 2;
    grid-row: 3;
    flex-wrap: wrap;
    row-gap: 6px;
    min-height: 0;
  }

  .hf-menu .hf-screen--squads .hf-sq__hint {
    flex: 1 0 100%;
  }

  .hf-menu .hf-screen--squads .hf-btm__actions {
    width: 100%;
  }

  .hf-menu .hf-screen--squads .hf-btm__actions .hf-btn {
    flex: 1;
  }

  .hf-menu .hf-sq__side {
    gap: 6px;
  }

  .hf-menu .hf-sq__info {
    gap: 8px;
  }

  .hf-menu .hf-cyc--wide {
    min-width: 116px;
  }

  .hf-menu .hf-sq__ovr b {
    font-family: var(--font-num);
    font-size: 22px;
  }

  .hf-menu .hf-sq__meta {
    font-size: var(--meta-size-phone);
    gap: 3px;
  }

  .hf-menu .hf-sq__meta .hf-tag {
    height: 20px;
    font-size: 10px;
  }

  .hf-menu .hf-pick {
    min-height: 48px;
    padding: 6px 10px 6px 14px;
  }

  .hf-menu .hf-pick__ovr b {
    font-family: var(--font-num);
    font-size: 20px;
  }

  .hf-menu .hf-pick__ovr span {
    font-size: 10px;
  }

  .hf-menu .hf-pick__name,
  .hf-menu .hf-pick__name.is-long {
    font-size: 15px;
  }

  .hf-menu .hf-pick__tag {
    padding: 3px 6px;
    font-size: 10px;
  }

  .hf-menu .hf-sq__bench {
    gap: 4px;
  }

  /* The shirt number goes on phones so a name never truncates. */
  .hf-menu .hf-benchp {
    grid-template-columns: 22px 24px minmax(0, 1fr);
    gap: 6px;
    min-height: 44px;
    padding: 4px 8px 4px 8px;
  }

  .hf-menu .hf-benchp__num {
    font-family: var(--font-num);
    display: none;
  }

  .hf-menu .hf-benchp__ovr {
    font-family: var(--font-num);
    font-size: 15px;
  }

  .hf-menu .hf-benchp__pos {
    font-size: 10px;
  }

  .hf-menu .hf-benchp__name {
    font-size: 11px;
    gap: 1px;
  }

  .hf-menu .hf-benchp__name small {
    font-size: 10px;
  }

  .hf-menu .hf-benchp__num {
    font-family: var(--font-num);
    font-size: 11px;
  }

  .hf-menu .hf-sq__hint {
    font-size: var(--label-size-phone);
  }

  /* Versus */
  .hf-menu .hf-vs__team {
    gap: 6px;
  }

  .hf-menu .hf-vs__name {
    font-size: 26px;
  }

  .hf-menu .hf-vs__meta {
    font-size: var(--meta-size-phone);
  }

  .hf-menu .hf-vs__meta b {
    font-family: var(--font-num);
    font-size: 15px;
  }

  .hf-menu .hf-vs__crest {
    gap: 8px;
  }

  .hf-menu .hf-vs__crest .hf-kit {
    --kit-w: 22px;
  }

  .hf-menu .hf-vs__coach {
    font-size: var(--meta-size-phone);
  }

  /* No room above the players under the sponsor line: VS drops between them, at
     their hands, on the Rani stripe. */
  .hf-menu .hf-vs__vs {
    top: 54%;
    width: 42px;
    font-size: 19px;
    box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--rani-pink);
  }

  .hf-menu .hf-vs__name small {
    margin-top: 3px;
    font-size: 13px;
  }

  .hf-menu .hf-vs__sponsor {
    margin-top: 3px;
    padding: 3px 10px;
  }

  .hf-menu .hf-vs__info {
    gap: 4px;
  }

  .hf-menu .hf-vs__ref {
    font-size: var(--meta-size-phone);
  }

  .hf-menu .hf-vs__tip {
    font-size: 12px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hf-menu .hf-vs__tip b {
    font-size: 10px;
  }

  .hf-menu .hf-vs__load {
    width: 200px;
    gap: 6px;
  }

  .hf-menu .hf-vs__status {
    font-size: var(--label-size-phone);
  }

  /* Settings */
  .hf-menu .hf-split {
    grid-template-columns: 168px minmax(0, 1fr);
  }

  .hf-menu .hf-split__panel {
    padding: 0 16px;
  }

  .hf-menu .hf-row {
    gap: 16px;
    padding: 8px 0;
  }

  .hf-menu .hf-row__label {
    font-size: 13px;
  }

  .hf-menu .hf-row__hint {
    font-size: 11px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hf-menu .hf-voice {
    height: 22px;
    margin-top: 2px;
    font-size: 10px;
  }

  .hf-menu .hf-panel__title {
    margin: 8px 0 4px;
    font-size: var(--label-size-phone);
  }

  /* Controls */
  .hf-menu .hf-ctl {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }

  .hf-menu .hf-ctl__diagram {
    padding: 8px 12px;
  }

  .hf-menu .hf-diag__lbl {
    padding: 0 4px;
  }

  .hf-menu .hf-diag__lbl b {
    font-size: 11px;
  }

  .hf-menu .hf-diag__lbl span {
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  .hf-menu .hf-diag--keys {
    max-width: 360px;
    margin-inline: auto;
  }

  .hf-menu .hf-diag__legend {
    gap: 3px 10px;
    margin-top: 8px;
  }

  .hf-menu .hf-diag__legend li {
    font-size: 11px;
    gap: 6px;
  }

  .hf-menu .hf-diag__legend b {
    min-width: 56px;
    padding: 2px 4px;
    font-size: 10px;
  }

  .hf-menu .hf-tdiag__legend {
    gap: 4px 10px;
  }

  .hf-menu .hf-tdiag__legend li > span,
  .hf-menu .hf-tdiag__legend li > em {
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .hf-menu .hf-tdiag__key {
    width: 18px;
    height: 18px;
  }

  .hf-menu .hf-guide__card {
    padding: 10px 12px;
  }

  .hf-menu .hf-guide__title {
    margin-bottom: 6px;
    font-size: var(--label-size-phone);
  }

  .hf-menu .hf-guide__list {
    gap: 5px;
  }

  .hf-menu .hf-guide__list li {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 8px;
    font-size: 12px;
  }

  .hf-menu .hf-guide__list b {
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  /* Pause */
  .hf-menu .hf-pz {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .hf-menu .hf-pz__side {
    gap: 8px;
  }

  .hf-menu .hf-pz__team {
    gap: 6px;
    font-size: 15px;
  }

  .hf-menu .hf-pz__goals {
    font-family: var(--font-num);
    padding: 3px 8px;
    font-size: 20px;
  }

  .hf-menu .hf-pz__clock {
    font-family: var(--font-num);
    font-size: var(--meta-size-phone);
  }

  .hf-menu .hf-pz__side .hf-rail {
    margin-top: 0;
    gap: 3px;
  }

  .hf-menu .hf-pz__panel {
    padding: 4px 16px 10px;
  }

  .hf-menu .hf-pz__facts {
    gap: 16px;
  }

  .hf-menu .hf-pz__diagram {
    max-width: 480px;
    margin-top: 0;
  }

  .hf-menu .hf-choice {
    min-height: 72px;
    gap: 12px;
    padding: 12px 14px;
  }

  .hf-menu .hf-choice b {
    font-size: 14px;
  }

  .hf-menu .hf-choice small {
    font-size: 11px;
  }

  .hf-menu .hf-confirm__box {
    padding: 16px;
  }

  .hf-menu .hf-confirm__title {
    font-size: 22px;
  }

  /* Stats, timeline and ratings */
  .hf-menu .hf-cmp {
    gap: 6px;
  }

  .hf-menu .hf-cmp__row {
    grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) 40px;
    row-gap: 3px;
  }

  .hf-menu .hf-cmp__v {
    font-family: var(--font-num);
    font-size: 13px;
  }

  .hf-menu .hf-cmp__label {
    font-size: 10px;
    letter-spacing: var(--label-tracking-phone);
  }

  .hf-menu .hf-poss {
    column-gap: 10px;
    row-gap: 4px;
    margin: 2px 0 8px;
    padding-bottom: 8px;
  }

  .hf-menu .hf-poss__v {
    font-family: var(--font-num);
    font-size: 22px;
  }

  .hf-menu .hf-poss__team {
    font-size: 12px;
  }

  .hf-menu .hf-poss__bar {
    height: 6px;
  }

  .hf-menu .hf-cmp__bar {
    height: 3px;
  }

  .hf-menu .hf-tl__row {
    min-height: 26px;
  }

  .hf-menu .hf-tl__who {
    font-size: 11px;
  }

  .hf-menu .hf-tl__min {
    font-family: var(--font-num);
    font-size: 11px;
  }

  .hf-menu .hf-rt li {
    grid-template-columns: 18px minmax(0, 1fr) 28px 36px;
    gap: 6px;
    min-height: 24px;
  }

  .hf-menu .hf-rt__name {
    font-size: 11px;
  }

  .hf-menu .hf-rt__val {
    font-family: var(--font-num);
    padding: 2px 0;
    font-size: 11px;
  }

  .hf-menu .hf-rt__head {
    padding-bottom: 4px;
    font-size: var(--label-size-phone);
  }

  /* Report */
  .hf-menu .hf-rp__hero {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding-bottom: 8px;
  }

  .hf-menu .hf-rp__outcome {
    gap: 4px;
  }

  .hf-menu .hf-rp__outcome .hf-h1 {
    --h1: 24px;
  }

  .hf-menu .hf-rp__hero.is-win .hf-rp__outcome::after {
    width: 40px;
    height: 3px;
  }

  .hf-menu .hf-rp__note {
    font-size: 10px;
  }

  .hf-menu .hf-rp__score {
    gap: 10px;
  }

  .hf-menu .hf-rp__team {
    gap: 6px;
  }

  .hf-menu .hf-rp__team .hf-badge {
    --bw: 26px;
  }

  .hf-menu .hf-rp__team .hf-badge.hf-badge > b {
    display: none;
  }

  .hf-menu .hf-rp__tname b {
    font-size: 18px;
  }

  .hf-menu .hf-rp__tname small {
    display: none;
  }

  .hf-menu .hf-rp__goals b {
    font-family: var(--font-num);
    min-width: 40px;
    height: 46px;
    padding: 0 6px;
    font-size: 38px;
  }

  .hf-menu .hf-rp__goals i {
    width: 8px;
    height: 3px;
  }

  .hf-menu .hf-rp__card {
    padding: 0 12px 8px;
  }

  .hf-menu .hf-motm__rating {
    font-family: var(--font-num);
    font-size: 36px;
  }

  .hf-menu .hf-motm__name,
  .hf-menu .hf-motm__name.is-long {
    font-size: 16px;
  }

  .hf-menu .hf-motm__info {
    gap: 5px;
    padding: 10px 10px 10px 0;
  }

  .hf-menu .hf-motm__team,
  .hf-menu .hf-motm__stats {
    font-size: var(--meta-size-phone);
  }

  .hf-menu .hf-motm .hf-tag {
    height: 22px;
    font-size: 10px;
  }

  .hf-menu .hf-rp__panel--stats .hf-cmp {
    column-gap: 24px;
  }

  /* SAFF Cup */
  .hf-menu .hf-cup {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  }

  .hf-menu .hf-fx {
    gap: 8px;
    padding: 12px;
  }

  .hf-menu .hf-fx__stage b {
    font-size: 14px;
  }

  .hf-menu .hf-fx__team {
    gap: 3px;
  }

  .hf-menu .hf-fx__code {
    font-family: var(--font-num);
    font-size: 16px;
  }

  .hf-menu .hf-fx__name {
    display: none;
  }

  .hf-menu .hf-fx__team .hf-kit {
    --kit-w: 22px;
  }

  .hf-menu .hf-fx__team .hf-tag {
    height: 20px;
    font-size: 10px;
  }

  .hf-menu .hf-fx__meta {
    font-size: var(--meta-size-phone);
  }

  .hf-menu .hf-group {
    padding: 8px 10px;
  }

  .hf-menu .hf-table {
    font-size: 11px;
  }

  .hf-menu .hf-table td {
    font-family: var(--font-num);
    padding: 4px 3px;
  }

  .hf-menu .hf-table__team > span,
  .hf-menu .hf-table__opt {
    display: none;
  }

  .hf-menu .hf-bracket {
    gap: 8px;
    padding: 10px;
  }

  .hf-menu .hf-tie__row {
    height: 26px;
  }

  .hf-menu .hf-results {
    padding: 10px;
  }

  .hf-menu .hf-entry__team {
    gap: 12px;
    padding: 16px;
  }

  .hf-menu .hf-entry__name {
    font-size: 24px;
  }

  /* Champion */
  .hf-menu .hf-champ {
    gap: 40px;
  }

  .hf-menu .hf-trophy {
    transform: scale(0.95);
  }

  .hf-menu .hf-champ__name {
    font-size: 44px;
  }

  .hf-menu .hf-champ__final,
  .hf-menu .hf-champ__you {
    font-size: 12px;
  }
}

/* The smallest landscape phones (740x360 and below): trim what can go. */
@media (max-height: 380px) {
  .hf-menu {
    --top-h: 40px;
    --btm-h: 44px;
    --h1: 20px;
  }

  .hf-menu .hf-side__keys,
  .hf-menu .hf-hero__sub {
    display: none;
  }

  .hf-menu .hf-hero__title {
    font-size: 30px;
  }

  .hf-menu .hf-tile__sub {
    display: none;
  }

  .hf-menu .hf-ticker {
    height: calc(28px + env(safe-area-inset-bottom));
  }

  .hf-menu .hf-side__ovr b {
    font-family: var(--font-num);
    font-size: 22px;
  }

  .hf-menu .hf-row {
    padding: 6px 0;
  }

  .hf-menu .hf-row__hint {
    -webkit-line-clamp: 1;
  }

  .hf-menu .hf-guide__card:nth-child(n + 3) {
    display: none;
  }

  .hf-menu .hf-pz__clock {
    font-family: var(--font-num);
    display: none;
  }

  .hf-menu .hf-diag--keys {
    max-width: 300px;
  }

  /* The narrowest cards: a long shirt name steps down to the 10 px floor instead of truncating. */
  .hf-menu .hf-mini.is-long .hf-mini__name {
    font-size: 10px;
  }
}

@media (max-height: 520px) and (max-width: 760px) {
  .hf-menu .hf-cyc {
    min-width: 100px;
  }

  .hf-menu .hf-btm .hf-btn--go {
    min-width: 140px;
  }

  .hf-menu .hf-hero__feature .hf-pc--plate {
    width: 172px;
  }

  .hf-menu .hf-split {
    grid-template-columns: 148px minmax(0, 1fr);
  }

  .hf-menu .hf-pz {
    grid-template-columns: 196px minmax(0, 1fr);
  }

  .hf-menu .hf-rp__tabs .hf-tab {
    padding: 0 8px;
  }
}

/* Upright desktop windows (phones show the rotate card instead): one column that scrolls. */
@media (max-width: 760px) and (min-height: 521px) {
  .hf-menu .hf-screen:not(.hf-screen--title) {
    overflow-y: auto;
    touch-action: pan-y;
  }

  .hf-menu .hf-hub,
  .hf-menu .hf-ts,
  .hf-menu .hf-sq,
  .hf-menu .hf-vs,
  .hf-menu .hf-split,
  .hf-menu .hf-ctl,
  .hf-menu .hf-pz,
  .hf-menu .hf-cup,
  .hf-menu .hf-entry {
    flex: none;
    grid-template-columns: minmax(0, 1fr);
  }

  .hf-menu .hf-hero {
    min-height: 420px;
  }

  .hf-menu .hf-ts__stage,
  .hf-menu .hf-vs__stage,
  .hf-menu .hf-sq__pitch {
    min-height: 320px;
  }

  .hf-menu .hf-btm,
  .hf-menu .hf-btm__opts {
    flex-wrap: wrap;
  }

  .hf-menu .hf-rp__hero {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
}

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

@keyframes hf-screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

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

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

@keyframes hf-from-left {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: none; }
}

@keyframes hf-from-right {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}

/* Slides that keep the element's own transform (the leaning VS halves and titles). */
@keyframes hf-slide-l {
  from { opacity: 0; translate: -48px 0; }
}

@keyframes hf-slide-up {
  from { opacity: 0; translate: 0 12px; }
}

@keyframes hf-slide-r {
  from { opacity: 0; translate: 48px 0; }
}

@keyframes hf-swap {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes hf-hero-in {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: none; }
}

@keyframes hf-tile-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes hf-pop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

@keyframes hf-vs-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes hf-trophy-in {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

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

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

@keyframes hf-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@keyframes hf-beat {
  0%, 60%, 100% { transform: scale(1); }
  25% { transform: scale(1.4); }
}

@keyframes hf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@keyframes hf-armed {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}

@keyframes hf-nudge {
  0%, 100% { transform: none; }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes hf-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes hf-indeterminate {
  from { transform: translateX(-100%); }
  to { transform: translateX(260%); }
}

@keyframes hf-sting-in {
  from { transform: translateX(-110%) skewX(var(--slant)); }
  to { transform: translateX(0) skewX(var(--slant)); }
}

@keyframes hf-sting-out {
  from { transform: translateX(0) skewX(var(--slant)); }
  to { transform: translateX(110%) skewX(var(--slant)); }
}

/* The T! stamps down: a touch too big, then it lands (a menu-side celebration). */
@keyframes hf-sting-mark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(0.96); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes hf-sting-mark-out {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hf-menu *,
  .hf-menu *::before,
  .hf-menu *::after,
  .hf-showcase,
  #loading,
  #loading * {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* The crawl stops: the first headlines simply sit there. */
  .hf-menu .hf-ticker__dup {
    display: none;
  }

  .hf-sting {
    display: none;
  }

  /* No turning: the phone simply rests on its side, the way to hold it. */
  .hf-rotate__in,
  .hf-rotate__phone {
    animation: none;
  }

  .hf-rotate__phone {
    transform: rotate(-90deg);
  }
}