/* ── Fighter grid card ──────────────────────────────────────────────────────
   The Top Trumps card reduced to what survives a 190px column. Kept in its own
   file rather than added to event-page.css so the index can be worked on
   without touching the stylesheet every event page also loads.

   Two systems, on two channels, exactly as on the full card:
     --fc-accent  the fighting style   (rose striker, sky wrestler,
                                        green grappler, platinum all-rounder)
     .t1 … .t5    how far he got       (frame and corner; gold is a champion)
   ─────────────────────────────────────────────────────────────────────────── */

.event-tel .fi-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.9rem;
}

/* auto-fill with a 190px minimum gives ONE column on a phone, where the old
   160px row gave two — a full-width card per row turns the index into a very
   long scroll. Below the breakpoint the count is fixed at two rather than
   lowering the minimum, so the cards fill the width instead of leaving a
   ragged margin. */


.event-tel .fc {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
  border-radius: 10px;
  background:
    radial-gradient(120% 70% at 50% 104%, color-mix(in srgb, var(--fc-accent) 22%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, #0b1219 0%, #070a0e 48%, #05080b 100%);
  transition: transform .16s ease, box-shadow .16s ease;
}

/*
 * The frame, drawn as an overlay rather than as a box-shadow on the card.
 *
 * An inset box-shadow paints BELOW descendant content, and two things on this
 * card are full-bleed and end up opaque: the fade at the foot of the portrait,
 * and the accent readout bar. Both painted straight over the left and right of
 * the frame, so a champion's gold border washed out across the bottom of the
 * photograph and again behind the readout.
 *
 * Above everything, and inert, so it changes nothing but what you see.
 */
.event-tel .fc::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #ffffff10;
}
.event-tel .fc:hover { transform: translateY(-2px); }
.event-tel .fc:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; }

/* the cage mesh, very faint, so the black is never flat */
.event-tel .fc::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image:
    repeating-linear-gradient(58deg, #fff 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-58deg, #fff 0 1px, transparent 1px 14px);
}

/* ── tier: frame and corner ─────────────────────────────────────────────────
   --fc-flag is separate from --fc-frame because tier 1 carries no border at
   all and still has to be able to state what it is. */
.event-tel .fc.t1 { --fc-frame: transparent; --fc-flag: #3a4653; --fc-ink: #cbd5e1; }
.event-tel .fc.t2 { --fc-frame: #2a3642;    --fc-flag: #55677c; --fc-ink: #0b1016; }
.event-tel .fc.t3 { --fc-frame: #5a6b7d;    --fc-flag: #93a7bb; --fc-ink: #0b1016; }
.event-tel .fc.t4 { --fc-frame: #c8d4e0;    --fc-flag: #c8d4e0; --fc-ink: #0b1016; }
.event-tel .fc.t5 { --fc-frame: #f2c14e;    --fc-flag: #f2c14e; --fc-ink: #0b1016; }

.event-tel .fc.t2::after, .event-tel .fc.t3::after,
.event-tel .fc.t4::after, .event-tel .fc.t5::after {
  box-shadow: inset 0 0 0 2px var(--fc-frame);
}
/* The champion's glow stays BEHIND the content — it is meant to bloom out of
   the card, not to sit on top of the photograph. Only the crisp ring moved. */
.event-tel .fc.t5 { box-shadow: inset 0 0 22px -10px #f2c14e88; }

.event-tel .fc-corner {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px; z-index: 3;
  background: var(--fc-flag);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.event-tel .fc-tier {
  position: absolute; top: 3px; right: 6px; z-index: 4;
  font-size: 13px; font-weight: 800; line-height: 1; color: var(--fc-ink);
}

/* ── the figure ─────────────────────────────────────────────────────────── */
.event-tel .fc-figure {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
  overflow: hidden;
}
.event-tel .fc-sig {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 92%; height: 92%; z-index: 1; mix-blend-mode: screen;
}
/* Anchored to the TOP. UFC art is framed head to toe, so scaling from the
   bottom pushes heads off the card — the same fault the full card had. */
.event-tel .fc-art {
  position: absolute; left: 50%; top: 4%; transform: translateX(-50%);
  height: 112%; width: auto; z-index: 2;
  object-fit: contain; object-position: top;
  filter: drop-shadow(0 10px 18px #000b);
}
/* the silhouette is a flat outline, so it is dimmed rather than shadowed */
.event-tel .fc-nofoto .fc-art { opacity: .34; filter: none; height: 96%; top: 7%; }

.event-tel .fc-figure::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, #06090d 96%);
}

/* ── the words ──────────────────────────────────────────────────────────── */
.event-tel .fc-name {
  position: relative; z-index: 4; margin: -0.5rem 0 0;
  padding: 0 0.7rem; font-size: 0.98rem; font-weight: 800; line-height: 1.12;
  letter-spacing: -0.01em; color: #f4f7fa;
  /* two lines, then ellipsis. A long name must not push the archetype out of
     the card — Elizeu Zaleski dos Santos is 25 characters. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The readout: what the grid is ordered by, and this fighter's value for it.
   The loudest thing on the card below the portrait, because it is the one part
   that changes when the reader changes the sort — and the accent it is painted
   in is still the style family, so the bar carries both. */
.event-tel .fc-readout {
  position: relative; z-index: 4; margin-top: 0.35rem;
  padding: 0.3rem 0.35rem; background: var(--fc-accent); color: #05080b;
  font-size: 0.63rem; font-weight: 800; letter-spacing: 0.02em;
  text-align: center; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Division and flag on the left, record on the right — the two facts that were
   on the old index row, kept because the card replaced that row rather than
   sitting beside it. margin-top:auto pins the pair to the bottom, so a
   two-line name does not leave one card's footer floating above its neighbour's. */
.event-tel .fc-div {
  position: relative; z-index: 4; margin-top: auto;
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.7rem 0.6rem;
  font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: #8b9aa8;
}
.event-tel .fc-where {
  display: flex; align-items: center; gap: 0.32rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.event-tel .fc-flag {
  width: 15px; height: 11px; flex: none; object-fit: cover;
  border-radius: 2px; box-shadow: 0 0 0 1px #ffffff1f;
}
.event-tel .fc-rec {
  margin-left: auto; flex: none;
  color: #b6c4d2; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .event-tel .fc { transition: none; }
  .event-tel .fc:hover { transform: none; }
}

/* ── the tier filter ───────────────────────────────────────────────────────
   Lives here rather than with the other filter styles because it is painted in
   the tier palette above — a chip and the frame of the card it selects have to
   be the same colour, and that only stays true if they are the same lines. */

.event-tel .fi-tierset { border: 0; margin: 0; padding: 0; min-width: 0; }
.event-tel .fi-tierset > legend { padding: 0; margin-bottom: 0.3rem; float: left; }
.event-tel .fi-chips { clear: both; display: flex; flex-wrap: wrap; gap: 0.3rem; }

.event-tel .fi-chip {
  --chip: #55677c;
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.55rem 0.3rem 0.4rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--chip) 45%, transparent);
  background: color-mix(in srgb, var(--chip) 9%, transparent);
  color: #8b9aa8; cursor: pointer; user-select: none;
  font-size: 0.72rem; line-height: 1;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.event-tel .fi-chip:hover { border-color: var(--chip); color: #dbe4ec; }

/* The box itself is hidden but still focusable, so the chip is keyboard
   operable and the focus ring lands on the chip rather than nowhere. */
.event-tel .fi-chip input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  margin: 0; pointer-events: none;
}
.event-tel .fi-chip:focus-within { outline: 2px solid var(--chip); outline-offset: 2px; }

.event-tel .fi-chip-n {
  display: inline-grid; place-items: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: color-mix(in srgb, var(--chip) 26%, transparent);
  font-size: 0.66rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.event-tel .fi-chip-l { letter-spacing: 0.02em; }

/* Checked: the chip fills with the tier's own colour, so the bar reads as a
   key to the frames in the grid below it. */
.event-tel .fi-chip:has(input:checked) {
  background: var(--chip); border-color: var(--chip); color: #0b1016;
}
.event-tel .fi-chip:has(input:checked) .fi-chip-n {
  background: #0b101633; color: #0b1016;
}
/* Tier 1's colour is darker than the page, so it inverts: pale ink on the
   fill, rather than near-black on near-black. */
.event-tel .fi-chip-t1:has(input:checked) { color: #dbe4ec; }
.event-tel .fi-chip-t1:has(input:checked) .fi-chip-n { color: #dbe4ec; }

.event-tel .fi-chip-t5 { --chip: #f2c14e; }
.event-tel .fi-chip-t4 { --chip: #c8d4e0; }
.event-tel .fi-chip-t3 { --chip: #93a7bb; }
.event-tel .fi-chip-t2 { --chip: #55677c; }
.event-tel .fi-chip-t1 { --chip: #3a4653; }

@media (prefers-reduced-motion: reduce) {
  .event-tel .fi-chip { transition: none; }
}

/* ══ the card panel, on a fighter's own page ══════════════════════════════
   The same card opened out: identity on the left, the shape in the middle,
   the numbers on the right. Shares the tier palette and the bar ramp with the
   grid card above — a fighter's frame must be the same gold in both places,
   and that only stays true if it is the same stylesheet. */

.event-tel .fcp {
  position: relative; margin: 0 0 1.6rem; padding: 0;
  background:
    radial-gradient(90% 120% at 14% 0%, color-mix(in srgb, var(--fc-accent) 13%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #0a1017 0%, #070a0e 100%);
  border-top: 1px solid #ffffff12; border-bottom: 1px solid #ffffff12;
}
/* The tier's colour as a hairline along the top, the panel's equivalent of the
   card frame — a full border would fight the page's own edges. */
.event-tel .fcp::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--fc-frame, transparent);
}
.event-tel .fcp.t1 { --fc-frame: #3a4653; --fc-ink: #cbd5e1; }
.event-tel .fcp.t2 { --fc-frame: #55677c; --fc-ink: #0b1016; }
.event-tel .fcp.t3 { --fc-frame: #93a7bb; --fc-ink: #0b1016; }
.event-tel .fcp.t4 { --fc-frame: #c8d4e0; --fc-ink: #0b1016; }
.event-tel .fcp.t5 { --fc-frame: #f2c14e; --fc-ink: #0b1016; }

.event-tel .fcp-inner {
  display: grid; grid-template-columns: minmax(180px, 15rem) minmax(0, 20rem) minmax(0, 1fr);
  gap: 1.6rem 2rem; align-items: center;
  max-width: 78rem; margin: 0 auto; padding: 1.6rem 1.5rem 1.4rem;
}

/* ── identity ─────────────────────────────────────────────────────────── */
.event-tel .fcp-tier {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.34rem; margin: 0;
}
.event-tel .fcp-tier-k {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: #7e8f9e;
}
/* Same size as the word before it, so the line reads as one label rather than
   a numeral with an explanation attached. The tier's colour is the only thing
   that sets it apart, which is also the only thing that needs to. */
.event-tel .fcp-tier-n {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.15em;
  color: var(--fc-frame); font-variant-numeric: tabular-nums;
}
/* One size for the whole line, so "Tier 5 “Champion”" reads as a single
   label. Title case inside the quotes is the only thing separating the name
   from the two uppercase words before it, which is enough — it is a name being
   quoted, not another piece of the label. */
.event-tel .fcp-tier-w {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  color: #dbe4ec; white-space: nowrap;
}
.event-tel .fcp-arch {
  margin: 0.7rem 0 0; padding: 0.38rem 0.6rem;
  background: var(--fc-accent); color: #05080b;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; text-align: center; border-radius: 3px;
}
.event-tel .fcp-note {
  margin: 0.7rem 0 0; font-size: 0.7rem; line-height: 1.45; color: #71818f;
}
.event-tel .fcp-note a { color: #93a7bb; }

/* ── the shape ────────────────────────────────────────────────────────── */
.event-tel .fcp-graph { display: flex; justify-content: center; }
.event-tel .fcp-oct { width: 100%; max-width: 19rem; height: auto; display: block; }
.event-tel .fcp-axis {
  font-size: 3.1px; font-weight: 300; letter-spacing: 0.09px;
  fill: #8b9aa8; fill-opacity: 0.72;
}

/* ── the bars ─────────────────────────────────────────────────────────── */
.event-tel .fcp-bars { display: flex; flex-direction: column; gap: 0.52rem; }
.event-tel .fcp-row {
  display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) 7.8rem;
  align-items: center; gap: 0.7rem;
}
.event-tel .fcp-lab {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #9fb0c0;
}
.event-tel .fcp-rail {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; height: 13px;
}
.event-tel .fcp-seg {
  border-radius: 3px; background: #18222d; box-shadow: inset 0 0 0 1px #ffffff0f;
}
.event-tel .fcp-seg.on { box-shadow: none; }
/* Only the top band lifts off the page, and only its last two blocks. */
.event-tel .fcp-row.top .fcp-seg.on:nth-child(9)  { box-shadow: 0 0 7px -2px var(--tip); }
.event-tel .fcp-row.top .fcp-seg.on:nth-child(10) { box-shadow: 0 0 11px -1px var(--tip); }

.event-tel .fcp-num { text-align: right; line-height: 1.1; }
.event-tel .fcp-pct {
  display: block; font-size: 1.05rem; font-weight: 800;
  color: var(--tip); font-variant-numeric: tabular-nums;
}
/* The unit, not just the number. A bar at 97 with nothing beside it is a
   horoscope; this is the line that says what was actually counted. */
.event-tel .fcp-raw {
  display: block; margin-top: 1px; font-size: 0.6rem; color: #71818f;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── the tally ────────────────────────────────────────────────────────── */
.event-tel .fcp-tally {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  max-width: 78rem; margin: 0 auto; padding: 0.75rem 1.5rem 0.9rem;
  border-top: 1px solid #ffffff0f;
  font-size: 0.74rem; color: #8b9aa8; letter-spacing: 0.03em;
}
.event-tel .fcp-tally b {
  color: #eef3f8; font-weight: 700; font-variant-numeric: tabular-nums;
}

@media (max-width: 940px) {
  .event-tel .fcp-inner { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .event-tel .fcp-id { display: flex; flex-wrap: wrap; gap: 0.6rem 1.1rem; align-items: center; }
  .event-tel .fcp-arch { margin-top: 0; }
  .event-tel .fcp-note { flex: 1 0 100%; }

  .event-tel .fcp-oct { max-width: 15rem; }
}
@media (max-width: 560px) {
  .event-tel .fcp-inner { padding: 1.2rem 1rem; }
  .event-tel .fcp-row { grid-template-columns: 4.6rem minmax(0, 1fr) 6.6rem; gap: 0.45rem; }
  .event-tel .fcp-lab { font-size: 0.64rem; letter-spacing: 0.03em; }
  .event-tel .fcp-raw { font-size: 0.55rem; }
}

/* ══ card for card, on a predictions page ═════════════════════════════════
   Two cards played against each other. Deliberately quiet: this page argues a
   prediction elsewhere on the same row, and a stat comparison is not one, so
   nothing here uses the pick styling or competes with the winner call. */

.event-tel .h2h {
  margin: 0.9rem 0 0; padding: 0.9rem 1rem 0.8rem;
  border-top: 1px solid #ffffff10;
  display: flex; flex-direction: column; gap: 0.3rem;
}

.event-tel .h2h-heads {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 0.6rem; align-items: center; margin-bottom: 0.5rem;
}
.event-tel .h2h-side { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.event-tel .h2h-side.blue { text-align: right; }
.event-tel .h2h-arch {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--c);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.event-tel .h2h-tier {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em;
  color: #7e8f9e; white-space: nowrap;
}
.event-tel .h2h-title {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #5d6878;
}

/* Bars grow OUTWARD from the centre label, so the longer side is the stronger
   side without reading either number. */
.event-tel .h2h-row {
  display: grid; grid-template-columns: 1.7rem 1fr 6.4rem 1fr 1.7rem;
  gap: 0.4rem; align-items: center;
}
.event-tel .h2h-track { height: 9px; border-radius: 3px; background: #ffffff08; display: flex; }
.event-tel .h2h-track.red { justify-content: flex-end; }
.event-tel .h2h-bar {
  height: 100%; border-radius: 3px; background: var(--c);
  opacity: 0.28; transition: opacity .14s ease;
}
/* The category is WON, so it is lit and the other side is left dim. */
.event-tel .h2h-bar.win { opacity: 1; }

.event-tel .h2h-lab {
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: #7e8f9e; text-align: center;
}
.event-tel .h2h-n {
  font-family: var(--mono); font-size: 0.68rem; font-variant-numeric: tabular-nums;
  color: #5d6878; text-align: center;
}
.event-tel .h2h-row .h2h-n:last-child { text-align: center; }
.event-tel .h2h-n.win { color: #dbe4ec; font-weight: 700; }

.event-tel .h2h-tally {
  margin: 0.55rem 0 0; text-align: center;
  font-size: 0.7rem; color: #8b9aa8;
}
.event-tel .h2h-tally b { color: #eef3f8; font-weight: 700; }
.event-tel .h2h-caveat {
  display: block; margin-top: 0.15rem;
  font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.06em;
  color: #5d6878;
}

/* Said once, quietly, rather than left as an unexplained gap on some bouts. */
.event-tel .h2h-none {
  margin: 0.8rem 0 0; padding-top: 0.7rem; border-top: 1px solid #ffffff10;
  text-align: center; font-size: 0.66rem; color: #5d6878;
}

@media (max-width: 620px) {
  .event-tel .h2h { padding: 0.8rem 0.6rem 0.7rem; }
  .event-tel .h2h-row { grid-template-columns: 1.5rem 1fr 4.6rem 1fr 1.5rem; gap: 0.25rem; }
  .event-tel .h2h-lab { font-size: 0.5rem; letter-spacing: 0.02em; }
  .event-tel .h2h-n { font-size: 0.6rem; }
  .event-tel .h2h-arch { font-size: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .event-tel .h2h-bar { transition: none; }
}

/* ══ the KO and SUB badges, on a fighter's page ═══════════════════════════
   The same object as the card's, at hero size. The octagon shape is declared
   once as --oct and used by both, so the two cannot end up different shapes —
   and it is built the same way, as stacked clipped boxes rather than a border,
   because a clip-path cannot carry a border that follows the clip.

   Placed in the gap above the name. The hero is bottom-aligned against a tall
   portrait, so that space exists on every fighter page whether or not anything
   is put in it. */

.event-tel .fighter-badges {
  display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1.1rem; pointer-events: none;
}

/* The form mark, at hero scale.
   The MARKUP is shared with the printed card — same component, same triangle,
   same filter — but the STYLING cannot be: .fx-streak's base rules live in
   full-card.css, and this page does not load it. The first attempt inherited
   nothing, so the SVG took its intrinsic size and the three label lines flowed
   out of the mark and printed across the eyebrow under it.

   These rules are therefore complete in themselves rather than an override of
   something else. Exactly the trap the KO and SUB badges fell into, for
   exactly the same reason. */
.event-tel .fighter-badges .fx-streak {
  position: relative; display: block; flex: none;
  width: 74px; height: 84px; pointer-events: none;
  filter: drop-shadow(0 6px 12px #000a) drop-shadow(0 0 14px #ff7a0055);
}
.event-tel .fighter-badges .fx-streak.fx-cold {
  filter: drop-shadow(0 6px 12px #000a) drop-shadow(0 0 14px #7fc4e855);
}
.event-tel .fighter-badges .fx-streak svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.event-tel .fighter-badges .fx-streak .fx-sk {
  position: absolute; left: 0; right: 0; bottom: 17px;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.event-tel .fighter-badges .fx-streak.fx-cold .fx-sk { bottom: auto; top: 19px; }
.event-tel .fighter-badges .fx-streak .fx-sk i {
  font-style: normal; font-weight: 800; font-size: 6px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #3a1400; opacity: 0.86;
}
.event-tel .fighter-badges .fx-streak .fx-sk b {
  font-family: var(--disp); font-weight: 900; font-size: 22px;
  line-height: 0.92; color: #3a1400; margin: 1px 0;
}
.event-tel .fighter-badges .fx-streak.fx-cold .fx-sk i,
.event-tel .fighter-badges .fx-streak.fx-cold .fx-sk b { color: #0d2634; }
.event-tel .fighter-badges .fx-streak.fx-cold .fx-sk b { font-size: 19px; }

.event-tel .fbadge {
  --oct: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  position: relative; width: 78px; height: 78px; flex: none;
  background: var(--bc); clip-path: var(--oct);
  filter: drop-shadow(0 8px 18px #000a);
}
.event-tel .fbadge > i {
  position: absolute; inset: 2px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #080c11f2; clip-path: var(--oct); font-style: normal;
}
/* The thin line painted inside the cage wall. Neutral, not --bc: the outer
   wall already carries the finish colour, and repeating it 5px in made the
   badge read as two concentric rings of the same thing. Grey lets the wall be
   the colour and the line be structure. */
.event-tel .fbadge > i::before {
  content: ""; position: absolute; inset: 5px; background: var(--ink-dim, #8b96a8);
  opacity: 0.45; clip-path: var(--oct);
}
/* The fill inside the ring. Opaque, unlike the band around it: these badges
   overlay the portrait on narrow screens, and at 95% alpha the grey took a
   tint from whatever sat behind it — over a blown highlight the KO label fell
   to 4.10:1, under the 4.5 it needs at 9.6px. Solid holds 4.68 wherever the
   badge lands. That is also why .none's ink was lifted to #7b8b9d; on this
   grey the old #6b7c8e read 3.99. */
.event-tel .fbadge > i::after {
  content: ""; position: absolute; inset: 6px; background: #171c25; clip-path: var(--oct);
}
.event-tel .fbadge b, .event-tel .fbadge span { position: relative; z-index: 2; }
.event-tel .fbadge b {
  font-size: 1.7rem; font-weight: 800; line-height: 0.86; color: var(--bc);
  font-variant-numeric: tabular-nums;
}
.event-tel .fbadge span {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em;
  color: var(--bc); margin-top: 2px;
}
/* The same tokens the result flashes use, so a KO badge and a KO corner are
   never two different colours on one page. */
.event-tel .fbadge.ko  { --bc: var(--ko, #ff2d55); }
.event-tel .fbadge.sub { --bc: var(--sub, #a6db3d); }
/* A fighter with none of a finish still gets the badge, greyed. Hiding it
   would make the pair mean different things on different pages. */
.event-tel .fbadge.none { --bc: #3b4a5c; }
.event-tel .fbadge.none b, .event-tel .fbadge.none span { color: #7b8b9d; }

/* Below this the hero stacks, so there is no gap above the name to sit in —
   the badges are lifted onto the foot of the portrait instead, which is the
   one piece of the layout with room to spare. A negative margin rather than
   absolute positioning, so they stay in the flow and cannot land on top of a
   portrait that turned out shorter than expected. */
@media (max-width: 720px) {
  .event-tel .fighter-badges {
    margin: -3.4rem 0 0.9rem; position: relative; z-index: 3;
  }
  .event-tel .fbadge { width: 64px; height: 64px; }
  .event-tel .fbadge b { font-size: 1.35rem; }
  .event-tel .fbadge span { font-size: 0.55rem; }
}

/* ── narrow screens ────────────────────────────────────────────────────────
   LAST in the file on purpose. Every rule here has the same specificity as the
   one it overrides — .event-tel .fc-div beats nothing — so source order is the
   only thing deciding, and sitting higher up it lost every collision silently
   while matchMedia cheerfully reported the query as matching. */
@media (max-width: 439px) {
  .event-tel .fi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  /* Two columns puts the card at 167px, where the footer runs out of room:
     "Light Heavyweight" overflowed by 23px and three women's divisions by 5 to
     16. Bought back from tracking, padding and the flag rather than from the
     type alone, so the line stays the same size it reads at elsewhere. */
  .event-tel .fc-div {
    padding: 0.4rem 0.38rem 0.55rem;
    gap: 0.28rem;
    font-size: 0.58rem;
    letter-spacing: 0.01em;
  }
  .event-tel .fc-where { gap: 0.26rem; }
  .event-tel .fc-flag { width: 13px; height: 9px; }
}