/* ============================================================================
   FIGHTCARD.LIVE — 2026 UI REFRESH · SPECTATOR APP
   The fan-facing pages (body.fx-ui.fx-app): fight card, live fight, fighters,
   leaderboard, stats, home, public pages and login. Mood: fight-night broadcast —
   condensed display type for names and numbers, corner colours, light that
   comes from the cage. Accent = the event's own app colour (--fx-accent).
   ============================================================================ */

/* ─── Chrome: top bar + floating dock (layers over polish.css) ─────────── */
body.fx-ui.fx-app #header-bar,
body.fx-ui.fx-admin #header-bar {
  background-color: color-mix(in srgb, var(--fx-topbar) 70%, transparent) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid var(--fx-line) !important;
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .9) !important;
}
body.fx-ui #header-bar a, body.fx-ui #header-bar i { color: var(--fx-ink) !important; }

body.fx-ui #footer-bar {
  background-color: color-mix(in srgb, var(--fx-bottombar) 74%, transparent) !important;
  -webkit-backdrop-filter: blur(26px) saturate(180%) !important;
  backdrop-filter: blur(26px) saturate(180%) !important;
}
body.fx-ui.fcl-floating-nav #footer-bar {
  left: 14px !important; right: 14px !important;
  border-radius: 24px !important;
  border: 0 !important;
  box-shadow: 0 0 0 1px var(--fx-line-strong), 0 1px 0 rgba(255, 255, 255, .07) inset,
              0 22px 44px -16px rgba(0, 0, 0, .9), 0 6px 14px -8px rgba(0, 0, 0, .6) !important;
}
@media (min-width: 640px) {
  body.fx-ui.fcl-floating-nav:not(.fcl-nav-scroll) #footer-bar {
    left: 50% !important; right: auto !important;
    width: min(560px, calc(100% - 28px)) !important;
    transform: translateX(-50%);
  }
}
body.fx-ui #footer-bar a { color: var(--fx-muted) !important; }
body.fx-ui #footer-bar a span { font-weight: 560 !important; letter-spacing: -.005em; font-size: 10.5px !important; }
body.fx-ui #footer-bar a i { transition: transform .35s var(--fx-ease-spring), color .2s ease !important; }
body.fx-ui #footer-bar a.active-nav,
body.fx-ui #footer-bar a.active-nav span,
body.fx-ui #footer-bar a.active-nav i { color: var(--fx-ink) !important; }
body.fx-ui #footer-bar a.active-nav i { transform: translateY(-1px) scale(1.06); color: var(--fx-accent) !important; filter: drop-shadow(0 4px 10px var(--fx-accent-glow)); }
body.fx-ui #footer-bar .fcl-nav-pill {
  top: 7px !important;
  height: calc(100% - 14px) !important;
  border-radius: 17px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 16px -8px rgba(0, 0, 0, .7);
}
body.fx-ui.fcl-nav-scroll #footer-bar::before { background: linear-gradient(to right, color-mix(in srgb, var(--fx-bottombar) 90%, transparent) 20%, transparent) !important; }
body.fx-ui.fcl-nav-scroll #footer-bar::after  { background: linear-gradient(to left,  color-mix(in srgb, var(--fx-bottombar) 90%, transparent) 20%, transparent) !important; }

/* Side menu (burger): glass sheet */
body.fx-ui #menu-sidebar, body.fx-ui .menu-box-left {
  background: color-mix(in srgb, var(--fx-surface) 94%, transparent) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: none !important;
}
/* Shadow only while open: the closed menu sits just off-screen to the left, and a
   shadow on it bleeds in as a dark band along the left edge of every page. */
body.fx-ui #menu-sidebar.menu-active, body.fx-ui .menu-box-left.menu-active {
  box-shadow: 30px 0 80px -30px rgba(0, 0, 0, .9) !important;
}
body.fx-ui #menu-sidebar .card-style { background: var(--fx-surface-2) !important; box-shadow: 0 0 0 1px var(--fx-line) !important; animation: none; }
body.fx-ui #menu-sidebar .list-custom-small a { border-color: var(--fx-line) !important; color: var(--fx-ink-2) !important; }
body.fx-ui .menu-hider { background: rgba(4, 5, 8, .55) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ─── Shared spectator type ─────────────────────────────────────────────── */
body.fx-ui.fx-app .card.card-style { margin-left: 12px; margin-right: 12px; border-radius: 24px !important; }
body.fx-ui.fx-app .card.card-style h1 { font-family: var(--fx-display); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); line-height: 1; }

/* ─── Fight card ────────────────────────────────────────────────────────── */
/* Meta pills: readable, quiet, never at 25% opacity. */
body.fx-ui .fight-tags .badge,
body.fx-ui .fight-tags .badge.opacity-25 {
  opacity: 1 !important;
  background: rgba(255, 255, 255, .045) !important;
  color: var(--fx-muted) !important;
  box-shadow: inset 0 0 0 1px var(--fx-line-strong) !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: .55em 1em !important;
}
body.fx-ui .fight-tags.fight-tags-dim .badge { opacity: .55 !important; }

/* Scheduled start time: broadcast numerals */
body.fx-ui .fight-header .font-50.opacity-25 {
  opacity: 1 !important;
  font-family: var(--fx-display);
  font-weight: 700 !important;
  font-size: 44px !important;
  letter-spacing: .02em;
  line-height: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .14));
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}

/* LIVE NOW: a pill with a breathing dot */
body.fx-ui .fight-header .badge.bg-danger:not(.font-26) {
  background: var(--fx-red) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 8px 24px -6px color-mix(in srgb, var(--fx-red) 70%, transparent) !important;
  font-size: 12px !important; letter-spacing: .14em !important; padding: .6em 1.1em .6em 2.2em !important;
  position: relative;
}
body.fx-ui .fight-header .badge.bg-danger:not(.font-26)::before {
  content: ""; position: absolute; left: .95em; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: #fff; animation: fx-live-dot 1.4s ease-in-out infinite;
}
@keyframes fx-live-dot { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 50% { opacity: .55; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); } }

/* The live bout: a slow light running round the card instead of a red outline. */
body.fx-ui .card.card-style.active-fight {
  border: 0 !important;
  animation: fx-rise .55s var(--fx-ease) both !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-red) 40%, transparent), 0 30px 70px -30px color-mix(in srgb, var(--fx-red) 55%, transparent) !important;
  isolation: isolate;
}
@property --fx-spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
body.fx-ui .card.card-style.active-fight::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; z-index: 2; pointer-events: none;
  background: conic-gradient(from var(--fx-spin), transparent 0 62%, color-mix(in srgb, var(--fx-red) 80%, #fff) 78%, var(--fx-accent) 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: fx-spin 3.6s linear infinite;
}
@keyframes fx-spin { to { --fx-spin: 360deg; } }
body.fx-ui .card.card-style.active-fight::before {
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--fx-red) 14%, transparent), transparent 70%);
}

/* Fighter cut-outs (the "Fighter cut-outs" extra): small transparent WebP portraits, so
   the light really sits behind the fighter. Only rendered when a cut-out exists
   (img.fx-cut); every other portrait keeps the plain treatment below. */
/* The light is the <img>'s own background: a transparent image paints its background
   behind the picture, so the light can never land on the fighter or on nearby text. */
body.fx-ui img.fx-cut {
  border-radius: 0 !important; box-shadow: none !important;
  background:
    radial-gradient(52% 46% at 50% 44%, color-mix(in srgb, var(--fx-glow-1) var(--fx-glow-strength), transparent), transparent 74%),
    radial-gradient(46% 12% at 50% 97%, rgba(255, 255, 255, .07), transparent 70%) !important;
  transition: background .5s ease;
}
body.fx-ui td:last-child > .fighter-card img.fx-cut,
body.fx-ui .text-center:last-child > img.fx-cut {
  background:
    radial-gradient(52% 46% at 50% 44%, color-mix(in srgb, var(--fx-glow-2) var(--fx-glow-strength), transparent), transparent 74%),
    radial-gradient(46% 12% at 50% 97%, rgba(255, 255, 255, .07), transparent 70%) !important;
}
/* The beaten fighter's light goes out with him. */
body.fx-ui .fighter-card.opacity-25 img.fx-cut { background: none !important; }

/* No light behind the plain portraits: they are opaque JPGs on the card colour, and
   any blend trick tints the fighter's own dark areas (hair, shadows, shorts).
   Real light behind the fighter needs small transparent cut-outs (round 2). */

/* Corner colour under the name, like a broadcast lower third. Only when the event
   has set both corner colours (Event settings); the token block then provides
   --fx-corner-1/2 and flips --fx-corner-show to block. */
body.fx-ui .fighter-card .fighter-name-block::after {
  content: ""; display: var(--fx-corner-show, none); width: 72%; max-width: 150px; height: 3px; border-radius: 3px; margin: 10px auto 2px;
  background: linear-gradient(90deg, transparent, var(--fx-corner-1) 18%, var(--fx-corner-1) 82%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--fx-corner-1) 55%, transparent);
}
body.fx-ui td:last-child > .fighter-card .fighter-name-block::after {
  background: linear-gradient(90deg, transparent, var(--fx-corner-2) 18%, var(--fx-corner-2) 82%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--fx-corner-2) 55%, transparent);
}
body.fx-ui .fighter-card .fighter-name-block.text-muted::after { opacity: .25; }
body.fx-ui .fighter-card .fighter-image img { transition: transform .5s var(--fx-ease); }
body.fx-ui .fighter-card .fighter-image:hover img { transform: scale(1.025); }
/* The loser recedes rather than vanishing */
body.fx-ui .fighter-card.opacity-25 { opacity: .38 !important; filter: grayscale(.85); transition: opacity .4s ease, filter .4s ease; }

/* Names: small tracked first name, big condensed surname */
body.fx-ui .fighter-name-block .fighter-firstname {
  display: block;
  font-family: var(--fx-font) !important;
  font-size: 12.5px !important;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fx-muted);
  margin-bottom: 2px;
}
body.fx-ui .fighter-name-block .fighter-lastname {
  display: block;
  font-family: var(--fx-display) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: .92;
  letter-spacing: .004em;
  color: var(--fx-ink);
}
@media (max-width: 420px) { body.fx-ui .fighter-name-block .fighter-lastname { font-size: 27px !important; } }
/* No mid-word breaks (the soft hyphens in the markup split "Klompenburg" as "Klo-mpenburg"):
   only spaces wrap, and fx-motion.js fits the size to the longest word. */
body.fx-ui .fighter-name-block .fighter-lastname { hyphens: none !important; -webkit-hyphens: none !important; overflow-wrap: normal !important; word-break: normal !important; }
body.fx-ui .fighter-nickname { color: var(--fx-muted) !important; font-size: 13px; }
body.fx-ui .fighter-card .stat-label { color: var(--fx-muted) !important; font-size: 13px !important; }
body.fx-ui .fighter-meta-flag { border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }

/* WINNER plate: glass, green edge, method underneath */
body.fx-ui .fighter-image > .position-absolute.rounded-s[style*="40, 167, 69"] {
  left: 10% !important; right: 10% !important;
  background: color-mix(in srgb, var(--fx-green) 26%, rgba(8, 10, 14, .55)) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-green) 55%, transparent), 0 10px 26px -10px color-mix(in srgb, var(--fx-green) 60%, transparent);
  padding: 6px 4px !important;
  animation: fx-pop .6s var(--fx-ease-spring) both;
}
body.fx-ui .fighter-image > .position-absolute.rounded-s[style*="40, 167, 69"] > div > div:first-child {
  font-family: var(--fx-display); font-size: 17px; letter-spacing: .12em; line-height: 1;
}
@keyframes fx-pop { from { opacity: 0; transform: translateY(6px) scale(.92); } }
body.fx-ui .pick-indicator {
  left: 8% !important; right: 8% !important;
  border-radius: 12px !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 10px 24px -10px rgba(0, 0, 0, .7);
  font-weight: 700; letter-spacing: .08em;
}

/* VS mark */
body.fx-ui img[src$="icons/vs.png"] { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .8)); opacity: .9; }
body.fx-ui span.fw-bold.opacity-25[style*="VS"], body.fx-ui td.position-relative span.fw-bold.opacity-25 {
  opacity: .5 !important; font-family: var(--fx-display); font-style: italic; font-weight: 800 !important; letter-spacing: .04em;
  color: var(--fx-ink) !important;
}

/* Tale of the tape: centred labels, mirrored values */
body.fx-ui .fighter-stats-tot { margin-top: 10px; }
body.fx-ui .fighter-stats-row {
  border-color: var(--fx-line) !important;
  position: relative;
}
body.fx-ui .fighter-stats-label {
  font-size: 10.5px !important;
  font-weight: 650 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--fx-faint) !important;
}
body.fx-ui [class*="fighter-stats-value-"] {
  font-family: var(--fx-display) !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--fx-ink);
}

/* Crowd prediction rings */
body.fx-ui [id^="f1-progress-"] svg, body.fx-ui [id^="f2-progress-"] svg { overflow: visible; }
body.fx-ui [id^="f1-progress-"] svg path:first-child, body.fx-ui [id^="f2-progress-"] svg path:first-child { stroke: rgba(255, 255, 255, .06) !important; }
body.fx-ui [id^="f1-progress-"] svg path:last-child, body.fx-ui [id^="f2-progress-"] svg path:last-child { stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(47, 209, 122, .35)); }
body.fx-ui .fc-pct { font-family: var(--fx-display) !important; font-weight: 700 !important; letter-spacing: .01em; }

/* Fight card intro (fx-motion.js): only cards that start below the fold are armed, so
   nothing you are already looking at ever blinks. The armed state hides them; .fx-in plays
   the entrance: card rises, fighters slide in from their own corner, VS lands, bar fills. */
body.fx-ui.fx-app .card.card-style.fx-armed { opacity: 0; transform: translateY(26px); animation: none !important; }
body.fx-ui.fx-app .card.card-style.fx-in { animation: fx-card-in .7s var(--fx-ease) both !important; }
@keyframes fx-card-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
body.fx-ui.fx-app .card.fx-in td:first-child > .fighter-card .fighter-image { animation: fx-from-left .8s .12s var(--fx-ease) both; }
body.fx-ui.fx-app .card.fx-in td:last-child > .fighter-card .fighter-image { animation: fx-from-right .8s .12s var(--fx-ease) both; }
@keyframes fx-from-left  { from { opacity: 0; transform: translateX(-34px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fx-from-right { from { opacity: 0; transform: translateX(34px) scale(.96); } to { opacity: 1; transform: none; } }
body.fx-ui.fx-app .card.fx-in .fighter-name-block { animation: fx-name-up .6s .3s var(--fx-ease) both; }
@keyframes fx-name-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.fx-ui.fx-app .card.fx-in td.position-relative > .position-absolute > * { animation: fx-vs-land .55s .38s var(--fx-ease-spring) both; }
@keyframes fx-vs-land { from { opacity: 0; transform: scale(1.8); } to { transform: none; } }
body.fx-ui.fx-app .card.fx-in .fx-crowd-bar > span { animation: fx-bar-grow 1.1s .45s var(--fx-ease) both; transform-origin: left center; }
body.fx-ui.fx-app .card.fx-in .fx-crowd-bar > .fx-crowd-f2 { transform-origin: right center; }
@keyframes fx-bar-grow { from { transform: scaleX(0); } to { transform: none; } }
/* Header: the progress line draws itself once. */
body.fx-ui .fx-hero .fx-hero-track > span { animation: fx-bar-grow 1.2s .25s var(--fx-ease) both; transform-origin: left center; }
body.fx-ui .fx-hero .fx-hero-title { animation: fx-name-up .7s .08s var(--fx-ease) both; }

/* Pick saved: the plate springs in, the chosen portrait gets a ring of light. */
body.fx-ui .pick-indicator.fx-pick-pop { animation: fx-pick-pop .7s var(--fx-ease-spring) both; }
@keyframes fx-pick-pop { 0% { opacity: 0; transform: translateY(14px) scale(.7); } 60% { opacity: 1; } 100% { transform: none; } }
/* The light behind the picked fighter flares up: a radial pulse behind the portrait (it
   shows around a cut-out; behind an opaque JPG it simply stays hidden), plus a small lift. */
body.fx-ui .fighter-card.fx-picked .fighter-image { isolation: isolate; }
body.fx-ui .fighter-card.fx-picked .fighter-image::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: -18%; right: -18%; top: -6%; bottom: 0;
  background: radial-gradient(50% 48% at 50% 46%, color-mix(in srgb, var(--fx-accent) 70%, transparent), transparent 72%);
  animation: fx-pick-flare 1.3s var(--fx-ease) both;
}
@keyframes fx-pick-flare { 0% { opacity: 0; transform: scale(.7); } 30% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.15); } }
body.fx-ui .fighter-card.fx-picked .fighter-image img { animation: fx-pick-lift 1.1s var(--fx-ease-spring) both; }
@keyframes fx-pick-lift { 0% { transform: none; } 35% { transform: translateY(-4px) scale(1.04); } 100% { transform: none; } }
body.fx-ui .fighter-card.fx-not-picked .fighter-image img { animation: fx-step-back .9s var(--fx-ease) both; }
@keyframes fx-step-back { 40% { opacity: .55; transform: scale(.97); } 100% { opacity: 1; transform: none; } }

/* Live updates (extra "live"): a bout that just changed glows once. */
body.fx-ui .card.card-style.fx-flash { animation: fx-flash 2.4s var(--fx-ease) both !important; }
@keyframes fx-flash {
  0%   { box-shadow: 0 0 0 1px var(--fx-accent-line), 0 0 0 0 var(--fx-accent-glow); }
  25%  { box-shadow: 0 0 0 2px var(--fx-accent), 0 0 40px 4px var(--fx-accent-glow); }
  100% { box-shadow: var(--fx-shadow-2); }
}

/* Fight card header (extra "hero") */
body.fx-ui .fx-hero {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 12px 18px; border-radius: 24px; min-height: 150px;
  background: linear-gradient(160deg, var(--fx-surface-3), var(--fx-surface));
  box-shadow: var(--fx-shadow-2);
  animation: fx-rise .55s var(--fx-ease) both;
}
body.fx-ui .fx-hero-bg {
  position: absolute; inset: -20px; z-index: -2;
  background-size: cover; background-position: center 30%;
  filter: blur(18px) saturate(1.3); opacity: .5; transform: scale(1.1);
}
body.fx-ui .fx-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7, 8, 11, .35) 0%, rgba(7, 8, 11, .82) 70%, var(--fx-surface) 100%);
}
body.fx-ui .fx-hero-body { padding: 26px 22px 20px; display: grid; gap: 8px; }
body.fx-ui .fx-hero-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-accent-hi); }
body.fx-ui .fx-hero-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 999px; background: var(--fx-red); color: #fff; letter-spacing: .12em; }
body.fx-ui .fx-hero-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: fx-live-dot 1.4s ease-in-out infinite; }
body.fx-ui .fx-hero-title {
  margin: 0 !important; font-family: var(--fx-display) !important; font-weight: 800 !important; text-transform: uppercase;
  font-size: clamp(2rem, 1.3rem + 3.6vw, 3.2rem) !important; line-height: .92 !important; letter-spacing: .005em !important;
  color: var(--fx-ink) !important; text-wrap: balance;
}
body.fx-ui .fx-hero-venue { color: var(--fx-ink-2); font-size: 14px; }
body.fx-ui .fx-hero-venue i { color: var(--fx-muted); margin-right: 4px; }
body.fx-ui .fx-hero-progress { display: grid; gap: 7px; margin-top: 8px; }
body.fx-ui .fx-hero-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
body.fx-ui .fx-hero-track > span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--fx-accent), var(--fx-accent-hi)); box-shadow: 0 0 12px var(--fx-accent-glow); transition: width .9s var(--fx-ease); }
body.fx-ui .fx-hero-count { font-size: 13px; color: var(--fx-muted); }
body.fx-ui .fx-hero-count b { color: var(--fx-ink); font-family: var(--fx-display); font-size: 17px; font-weight: 800; }

/* Crowd bar (extra "crowdbar"): one split bar, corner colours when the event has them,
   otherwise the event accent against slate. */
body.fx-ui .fx-crowd-row > td { padding: 14px 4px 6px !important; border: 0 !important; }
body.fx-ui .fx-crowd { margin: 0 28px; --c1: var(--fx-bar-1, var(--fx-accent)); --c2: var(--fx-bar-2, color-mix(in srgb, var(--fx-accent) 30%, #9aa1ad)); display: grid; gap: 8px; }
body.fx-ui .fx-crowd-label { font-size: 10.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--fx-faint); text-align: center; }
body.fx-ui .fx-crowd-bar { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .05); }
body.fx-ui .fx-crowd-bar > span { display: block; height: 100%; min-width: 3px; transition: width .9s var(--fx-ease), opacity .4s ease, filter .4s ease; }
body.fx-ui .fx-crowd-f1 { background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 70%, #000), var(--c1)); border-radius: 999px 0 0 999px; box-shadow: 0 0 14px -2px color-mix(in srgb, var(--c1) 60%, transparent); }
body.fx-ui .fx-crowd-f2 { background: linear-gradient(90deg, var(--c2), color-mix(in srgb, var(--c2) 70%, #000)); border-radius: 0 999px 999px 0; box-shadow: 0 0 14px -2px color-mix(in srgb, var(--c2) 60%, transparent); }
body.fx-ui .fx-crowd-bar > span.is-lost { opacity: .35; filter: grayscale(.7); box-shadow: none; }
body.fx-ui .fx-crowd-nums { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
/* Number on top, name underneath, each side owning half the width: a long name wraps
   onto a second line instead of being cut off or pushing into the other side. */
body.fx-ui .fx-crowd-nums span {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 50%;
  font-size: 11.5px; line-height: 1.25; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fx-muted); overflow-wrap: normal; word-break: normal;
}
body.fx-ui .fx-crowd-nums .fx-crowd-n1 { align-items: flex-start; text-align: left; }
body.fx-ui .fx-crowd-nums .fx-crowd-n2 { align-items: flex-end; text-align: right; flex-direction: column-reverse; }
body.fx-ui .fx-crowd-nums b { font-family: var(--fx-display); font-size: 24px; line-height: 1; font-weight: 800; color: var(--fx-ink); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
body.fx-ui .fx-crowd-nums .is-lost { opacity: .45; }

/* PICK WINNER */
body.fx-ui .fighter-card ~ .ps-3 .large-button,
body.fx-ui [data-action="pick-winner"] {
  height: 46px !important; font-size: 13px !important; letter-spacing: .07em !important; font-weight: 750 !important;
  padding-left: 10px !important; padding-right: 10px !important; white-space: nowrap;
  border-radius: 14px !important;
}

/* "Jump to current fight" and other floating pills */
body.fx-ui .jump-to-current, body.fx-ui [class*="jump-current"] {
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-radius: 999px !important; box-shadow: var(--fx-shadow-3) !important;
}

/* ─── Home: live widget + event banner ──────────────────────────────────── */
body.fx-ui .live-fight-card { border-radius: 22px !important; overflow: hidden; }
body.fx-ui .fighter-image-fade { -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
body.fx-ui.fx-app .card.card-style > img.rounded,
body.fx-ui.fx-app .card.card-style img.w-100.rounded-m,
body.fx-ui.fx-app .card.card-style img.img-fluid { border-radius: 18px !important; }

/* The legacy coloured alert() box (icon block + text) */
body.fx-ui .alert.rounded-s, body.fx-ui a > .alert { overflow: hidden; }
body.fx-ui .alert .bg-yellow-dark, body.fx-ui .alert .bg-red-dark, body.fx-ui .alert .bg-green-dark, body.fx-ui .alert .bg-blue-dark { background: rgba(255, 255, 255, .06) !important; }

/* ─── Fighters list / profile ───────────────────────────────────────────── */
body.fx-ui .fps-item, body.fx-ui .stat-box, body.fx-ui .fighter-stat-box {
  background: linear-gradient(180deg, var(--fx-surface-3), var(--fx-surface-2)) !important;
  border: 0 !important; border-radius: 16px !important;
  box-shadow: 0 0 0 1px var(--fx-line-strong), 0 1px 0 rgba(255, 255, 255, .05) inset !important;
}
body.fx-ui .fps-value { font-family: var(--fx-display) !important; font-weight: 700 !important; color: var(--fx-ink) !important; }
body.fx-ui .fps-label { color: var(--fx-muted) !important; letter-spacing: .12em; font-size: 11px !important; font-weight: 600; }
body.fx-ui.fx-app .font-40.fw-bold, body.fx-ui.fx-app .font-50.fw-bold { font-family: var(--fx-display); letter-spacing: .01em; }

/* Search buttons and similar outlined full-width actions */
body.fx-ui.fx-app .btn.btn-full, body.fx-ui.fx-app .btn-border {
  border-radius: 16px !important; border-color: var(--fx-line-strong) !important; background: rgba(255, 255, 255, .025) !important;
}

/* ─── Leaderboard & Stats ───────────────────────────────────────────────── */
body.fx-ui .cs-card, body.fx-ui .cs-stat {
  background: linear-gradient(180deg, var(--fx-surface-2), var(--fx-surface)) !important;
  border: 0 !important; border-radius: 18px !important;
  box-shadow: 0 0 0 1px var(--fx-line-strong), 0 1px 0 rgba(255, 255, 255, .05) inset !important;
}
body.fx-ui .cs-stat-num { font-family: var(--fx-display) !important; font-weight: 800 !important; letter-spacing: .005em; color: var(--fx-ink) !important; }
body.fx-ui .cs-stat-label { color: var(--fx-muted) !important; letter-spacing: .12em; font-weight: 600; }
body.fx-ui .cs-section-title { font-family: var(--fx-display) !important; text-transform: uppercase; font-weight: 800 !important; letter-spacing: .01em; }
body.fx-ui .cs-list-row { border-color: var(--fx-line) !important; }
body.fx-ui .cs-list-count { font-variant-numeric: tabular-nums; }
body.fx-ui.fx-app .list-group-item { background: transparent !important; border-color: var(--fx-line) !important; color: var(--fx-ink-2) !important; }
body.fx-ui.fx-app .badge.rounded-pill.bg-secondary { min-width: 30px; }

/* ─── Login / public ────────────────────────────────────────────────────── */
body.fx-ui .staff-login-panel {
  background: color-mix(in srgb, var(--fx-surface) 88%, transparent) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  border: 0 !important; border-radius: 26px !important;
  box-shadow: var(--fx-shadow-3), 0 40px 120px -40px var(--fx-accent-glow) !important;
  animation: fx-rise .6s var(--fx-ease) both;
}
body.fx-ui.staff-login-page { background-image:
  radial-gradient(800px 500px at 50% -10%, color-mix(in srgb, var(--fx-accent) 16%, transparent), transparent 65%),
  radial-gradient(600px 400px at 100% 100%, rgba(70, 110, 255, .08), transparent 60%) !important; }
body.fx-ui .fcl-input-wrap input, body.fx-ui .fcl-input-wrap-no-toggle input { padding-left: 42px !important; height: 50px; }
body.fx-ui .staff-login-event-select { height: 50px; }

/* Countdown on spectator pages */
body.fx-ui.fx-app .tick { font-family: var(--fx-display); }