/* ENUK Esports Hub
 * -----------------------------------------------------------------------------
 * Written against the theme's design tokens, always with the theme's own literal
 * fallback next to them:
 *
 *     background: #151a1e;
 *     background: var(--surface-surface-surface-2, #151a1e);
 *
 * That double declaration is not belt-and-braces, it is required. ENUK enqueues a
 * DIFFERENT CSS bundle per template, and the bundles are what define the tokens —
 * so a block placed on a template whose bundle we have not seen still has to look
 * right. See STRATEGY.md §5.
 *
 * Nothing here styles a theme class. `.enuk-head` only adds the "more" link the
 * theme's section head has no slot for; the head itself is the theme's.
 * -------------------------------------------------------------------------- */

.enuk-block {
  margin: 0 0 40px;
  margin: 0 0 var(--Spacing-5x, 40px);
  color: #fff;
  color: var(--text-text-primary, #fff);
  font-family: "Open Sans", sans-serif;
  font-family: var(--font-family-body, "Open Sans"), sans-serif;
}
.enuk-block:last-child { margin-bottom: 0; }

/* ⚠ NEUTRALISE THE HOST CONTEXT'S LINK STYLING.
 *
 * Our blocks are dropped inside `.single-post-content` / `.common-content`, where
 * the theme styles every descendant `a` as teal-and-underlined body copy. A match
 * tile IS an <a>, so without this the team names, the event name and the SCORES
 * all render underlined and teal — seen in QA, and it reads as broken rather than
 * as a link.
 *
 * !important is the right tool here and not laziness: we are overriding an unknown
 * number of host rules across article, page, category and widget contexts, several
 * of which are more specific than anything we can write without guessing at their
 * selectors. Scoped tightly to .enuk-block so it can never leak into the site. */
.enuk-block a,
.enuk-block a:hover,
.enuk-block a:focus { text-decoration: none !important; }
.enuk-block a.enuk-match,
.enuk-block a.enuk-match:hover { color: inherit !important; }

/* Every OTHER anchor in the layer needs the same treatment, for the same reason.
 * Missing one is not subtle: on /rankings/{game}/ the team names in the table
 * rendered teal-on-dark like body links while the identical table in a category
 * widget rendered white, because the two host templates load different bundles.
 * Colour is declared per component here so that can't drift again. */
.enuk-block .enuk-table a          { color: inherit !important; }
.enuk-block .enuk-table a:hover,
.enuk-block .enuk-table a:focus    { color: #68f8dc !important; color: var(--text-text-link, #68f8dc) !important; }
.enuk-block a.enuk-link            { color: inherit !important; }
.enuk-block a.enuk-link:hover      { color: #68f8dc !important; color: var(--text-text-link, #68f8dc) !important; }
/* Chips live OUTSIDE .enuk-block — they are page-level navigation, not part of a
 * block — so every rule above missed them and they rendered underlined on every
 * hub page, and teal on /rankings/{game}/. Keyed on their own container instead.
 * A reminder that "scope everything to .enuk-block" is only safe if everything we
 * render is actually inside one. */
.enuk-chips a.enuk-chip,
.enuk-chips a.enuk-chip:hover,
.enuk-chips a.enuk-chip:focus      { text-decoration: none !important; }
.enuk-chips a.enuk-chip            { color: #d9dce0 !important; color: var(--text-text-secondary, #d9dce0) !important; }
.enuk-chips a.enuk-chip:hover,
.enuk-chips a.enuk-chip:focus,
.enuk-chips a.enuk-chip.is-on      { color: #fff !important; color: var(--text-text-primary, #fff) !important; }
.enuk-block .enuk-side__name,
.enuk-block .enuk-score,
.enuk-block .enuk-odd,
.enuk-block .enuk-match__top { color: inherit; }

/* Every numeric value in the layer. One rule, applied everywhere a number is
 * printed — tabular figures so columns of odds and scores line up. */
.enuk-num,
.enuk-score,
.enuk-odd,
.enuk-rating,
.enuk-pc {
  font-family: Poppins, sans-serif;
  font-family: var(--font-family-title, Poppins), sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- section head --------------------------------------------------------
 * The markup is the theme's (`.sub-inter-title` + `.sub-inter-line-mb`), but the
 * theme only sizes `h2` and `h5` inside it. Our blocks emit h3 or h4 depending on
 * the heading level around them, and those fall through to the HOST's heading
 * scale — inside an article that meant a 48px "Upcoming matches" headline sitting
 * on top of a data block. So the head is laid out and sized here explicitly.
 *
 * Flex rather than the absolute positioning this used to use: the "more" link was
 * being clipped at the right edge in article context, and a flex row cannot do
 * that regardless of what the host does to positioning. */
/* `.enuk-block` prefix, again for load order: the theme also styles
 * `.sub-inter-title` — which our head carries by design, to inherit the site's
 * section-head treatment — and one of its rules sets `display: inline-block`.
 * Same specificity, later in the cascade, so it won: measured `display:
 * inline-block` with the heading at `width: 800px`, which pushed the "more" link
 * onto its own line. */
.enuk-block .enuk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 20px;
}
/* ⚠ The extra `.enuk-block` on these selectors, and the !important on font-size,
 * are both load-order defences and neither is optional.
 *
 * The theme enqueues its per-template bundles in the FOOTER (`load_styles_after_body`
 * in app/setup.php), while our stylesheet goes in the head. So `app-post.css` is
 * parsed AFTER hub.css and wins every specificity TIE — which is why a plain
 * `.enuk-head h3` lost to the article template's `h3` rule and rendered a 48px
 * headline inside a data block. Raising specificity fixes the tie; !important on
 * the size covers the host rules that are more specific still. */
.enuk-block .enuk-head h2,
.enuk-block .enuk-head h3,
.enuk-block .enuk-head h4 {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: Poppins, sans-serif;
  font-family: var(--font-family-title, Poppins), sans-serif;
  font-size: 22px !important;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
  color: var(--text-text-primary, #fff);
}
.enuk-block .enuk-head__more {
  flex: 0 0 auto;
  /* When the head wraps (narrow sidebars), keep the link on the right rather
     than letting space-between strand it on the left of its own row. */
  margin-left: auto;
  font-size: 13px;
  font-size: var(--font-size-xs, 13px);
  font-weight: 600;
  white-space: nowrap;
  color: #68f8dc !important;
  color: var(--text-text-link, #68f8dc) !important;
}
/* The theme's gradient rule: force it onto its own row under the heading. */
.enuk-block .enuk-head .sub-inter-line-mb { flex: 0 0 100%; margin: 10px 0 0; }
@media (max-width: 599px) {
  .enuk-block .enuk-head h2,
  .enuk-block .enuk-head h3,
  .enuk-block .enuk-head h4 { font-size: 19px !important; }
}

/* ---- title chips --------------------------------------------------------- */
.enuk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  gap: var(--Spacing-1x, 8px);
  margin: 0 0 24px;
  margin: 0 0 var(--Spacing-3x, 24px);
  padding: 0;
  list-style: none;
}
.enuk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border-radius: var(--corners-shape-small, 8px);
  background: #22272b;
  background: var(--action-action-secondary, #22272b);
  color: #d9dce0;
  color: var(--text-text-secondary, #d9dce0);
  font-size: 13px;
  font-size: var(--font-size-xs, 13px);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  border: 1px solid transparent;
}
.enuk-chip:hover,
.enuk-chip:focus {
  color: #fff;
  border-color: #20f4cb;
  border-color: var(--accent-accent-1, #20f4cb);
}
.enuk-chip.is-on {
  background: #0c6755;
  background: var(--accent-accent-2, #0c6755);
  color: #fff;
}
.enuk-chip__n {
  font-family: Poppins, sans-serif;
  font-family: var(--font-family-title, Poppins), sans-serif;
  font-variant-numeric: tabular-nums;
  opacity: .75;
}

/* ---- match board ---------------------------------------------------------
 * Column count follows the CONTAINER, not the viewport, and that distinction is
 * the whole point. The same board renders in a 320px sidebar, a 800px article
 * column and a 1320px homepage band — a viewport media query gets two of those
 * three wrong. Seen in QA: one column stretched across 1320px put the team name
 * and its score a thousand pixels apart with nothing in between.
 *
 * auto-fill + minmax gives 1 column in the sidebar, 2 in the article column, 3
 * across the homepage, with no classes to keep in sync. `min(100%, 380px)` stops
 * the track from ever exceeding a narrow container, which would overflow it. */
.enuk-board {
  display: grid;
  gap: 8px;
  gap: var(--Spacing-1x, 8px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  align-items: start;
}

.enuk-match {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  border-radius: var(--corners-shape-small, 8px);
  background: #151a1e;
  background: var(--surface-surface-surface-2, #151a1e);
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .06);
  transition: border-color .2s ease;
}
a.enuk-match:hover,
a.enuk-match:focus {
  border-color: #20f4cb;
  border-color: var(--accent-accent-1, #20f4cb);
}

.enuk-match__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 10px;
  font-size: var(--font-size-xxs, 10px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a0afbf;
  color: var(--text-text-subtle, #a0afbf);
}
.enuk-match__event {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.enuk-match__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}
.enuk-side {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.enuk-side__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-size: var(--font-size-s, 15px);
  font-weight: 600;
}
/* A losing side in a settled match is de-emphasised, never struck through —
 * struck-through team names read as "cancelled", not "lost". */
.enuk-match__row.is-lost .enuk-side__name { color: #a0afbf; color: var(--text-text-subtle, #a0afbf); font-weight: 400; }

.enuk-crest {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 4px;
  background: #22272b;
  background: var(--action-action-secondary, #22272b);
}
.enuk-crest--txt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Poppins, sans-serif;
  font-family: var(--font-family-title, Poppins), sans-serif;
  font-size: 8px;
  font-weight: 700;
  color: #a0afbf;
  color: var(--text-text-subtle, #a0afbf);
  letter-spacing: .02em;
}

.enuk-score { font-size: 17px; font-size: var(--font-size-sm, 17px); min-width: 20px; text-align: right; }
.enuk-odd {
  display: inline-block;
  min-width: 46px;
  padding: 4px 8px;
  text-align: center;
  border-radius: 4px;
  background: #22272b;
  background: var(--action-action-secondary, #22272b);
  font-size: 13px;
  font-size: var(--font-size-xs, 13px);
}
.enuk-odd.is-best {
  background: #0c6755;
  background: var(--accent-accent-2, #0c6755);
  color: #fff;
}
.enuk-odd--none { color: #a0afbf; color: var(--text-text-subtle, #a0afbf); background: transparent; }

/* ---- hydration toggles ---------------------------------------------------
 * ⚠ REQUIRED, not defensive. includes/live.php turns cells on and off with the
 * `hidden` attribute, and the UA rule that implements it (`[hidden]{display:none}`)
 * is UA-origin — so ANY author rule setting `display` beats it. `.enuk-pill`,
 * `.enuk-odd` and `.enuk-crest--txt` all set one, which means without this rule
 * the toggles silently do nothing and a hydrated tile reads "Live · Final" with
 * a price beside the score.
 *
 * Scoped to `[data-enuk-match]` so it cannot reach any other markup on the page.
 * The same declaration is ALSO printed inline next to the hydration script,
 * because the whole point of that script is to work on a page a CSS optimiser has
 * already been through. Keep the two in step.
 * ------------------------------------------------------------------------- */
[data-enuk-match] [hidden],
[data-enuk-match][hidden] { display: none !important; }

/* ---- status pills -------------------------------------------------------- */
.enuk-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: Poppins, sans-serif;
  font-family: var(--font-family-title, Poppins), sans-serif;
  font-size: 10px;
  font-size: var(--font-size-xxs, 10px);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: #22272b;
  background: var(--action-action-secondary, #22272b);
  color: #d9dce0;
  color: var(--text-text-secondary, #d9dce0);
}
.enuk-pill--live { background: #20f4cb; background: var(--accent-accent-1, #20f4cb); color: #0e1319; color: var(--text-text-contrast, #0e1319); }
.enuk-pill--live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: enuk-blink 1.6s ease-in-out infinite;
}
@keyframes enuk-blink { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .enuk-pill--live::before { animation: none } }

/* ---- win-probability bar ------------------------------------------------- */
.enuk-prob { margin-top: 10px; }
.enuk-prob__bar {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: #22272b;
  background: var(--action-action-secondary, #22272b);
}
.enuk-prob__a { background: #20f4cb; background: var(--accent-accent-1, #20f4cb); }
.enuk-prob__b { background: #0c6755; background: var(--accent-accent-2, #0c6755); }
.enuk-prob__legend {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 10px;
  font-size: var(--font-size-xxs, 10px);
  color: #a0afbf;
  color: var(--text-text-subtle, #a0afbf);
}

/* ---- tables (rankings, odds) --------------------------------------------- */
/* Wide tables scroll INSIDE their own container. A table that widens the page
 * body creates a horizontal scrollbar on every phone. */
.enuk-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.enuk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-size: var(--font-size-s, 15px);
  background: #151a1e;
  background: var(--surface-surface-surface-2, #151a1e);
  border-radius: 8px;
  border-radius: var(--corners-shape-small, 8px);
  overflow: hidden;
}
.enuk-table th,
.enuk-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  vertical-align: middle;
}
.enuk-table tr:last-child td { border-bottom: 0; }
.enuk-table th {
  font-family: Poppins, sans-serif;
  font-family: var(--font-family-title, Poppins), sans-serif;
  font-size: 10px;
  font-size: var(--font-size-xxs, 10px);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a0afbf;
  color: var(--text-text-subtle, #a0afbf);
  white-space: nowrap;
}
.enuk-table td.enuk-t-num,
.enuk-table th.enuk-t-num { text-align: right; white-space: nowrap; }
.enuk-table a { color: inherit; text-decoration: none; }
.enuk-table a:hover { color: #68f8dc; color: var(--text-text-link, #68f8dc); }
.enuk-rank-n {
  font-family: Poppins, sans-serif;
  font-family: var(--font-family-title, Poppins), sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #a0afbf;
  color: var(--text-text-subtle, #a0afbf);
  width: 1%;
}
.enuk-table tr:nth-child(-n+3) .enuk-rank-n { color: #20f4cb; color: var(--accent-accent-1, #20f4cb); }
.enuk-teamcell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.enuk-teamcell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enuk-wl { color: #a0afbf; color: var(--text-text-subtle, #a0afbf); font-size: 13px; font-size: var(--font-size-xs, 13px); }

/* Shed columns rather than make the reader swipe.
 *
 * .enuk-tablewrap keeps a wide table from ever widening the PAGE — verified, no
 * horizontal page scroll at 390px anywhere — but "contained" is not the same as
 * "usable": a ranking table measured 640px inside a 358px column, so two of its
 * five columns were only reachable by dragging. The secondary columns are
 * supporting detail, so on a narrow screen they simply go, and rank / team /
 * rating (the reason anyone opened the table) always fit. */
@media (max-width: 700px) {
  .enuk-table .enuk-c-opt { display: none; }
}

/* ⚠ W–L IS NOT AN OPTIONAL COLUMN. It used to be dropped under 480px along with
 * Played and Peak, which is why "Top Valorant teams" showed rank / team / rating
 * and nothing else on a phone. Reported twice (QA and Kevin, 2026-08-26) and both
 * were right: a record is the one number that says whether a rating was earned
 * this season or is a leftover, and the ranking table is mostly read on a phone.
 *
 * It fits — it just has to be paid for out of the numeric columns rather than out
 * of the team name, which is what the block below does. Verified at 320/360/390:
 * no horizontal page scroll and no scroll inside .enuk-tablewrap. */

/* Even with the optional columns gone, one long team name ("Team Heretics
 * Academy") sets the column's minimum width and pushes the table past the
 * viewport again — the name cell is nowrap so it cannot give. On narrow screens
 * the name gets a hard cap and truncates, which is the one thing in the row that
 * degrades gracefully: a clipped name is still recognisable, a rating pushed
 * off-screen is not. */
/* ⚠ `table-layout: fixed` is what actually does it, and the reason is easy to get
 * wrong: under the default `auto` layout a `max-width` on a <td> is only a
 * SUGGESTION — the algorithm sizes columns from their content, so capping the team
 * cell changed nothing and the table still measured 419px inside a 374px column.
 * Fixed layout makes the declared widths binding and lets the existing ellipsis
 * rules truncate, so the table can never be wider than its container. */
@media (max-width: 700px) {
  .enuk-table { table-layout: fixed; width: 100%; }
  .enuk-table th,
  .enuk-table td { padding: 9px 8px; }
  .enuk-table th { white-space: normal; letter-spacing: .02em; }
  .enuk-table th:first-child,
  .enuk-table td:first-child { width: 26px; }
  .enuk-table th.enuk-t-num,
  .enuk-table td.enuk-t-num { width: 76px; }
  .enuk-teamcell { max-width: 100%; min-width: 0; }
  .enuk-teamcell span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* "W–L" must not break across the en dash and turn a 10px header into two
     lines; the column is sized for one. */
  .enuk-table th.enuk-c-wl { white-space: nowrap; }
}

/* Phones: buy the W–L column out of the numeric columns and the cell padding,
 * never out of the team name — a clipped name is still recognisable, a rating
 * pushed off-screen is not. 22 + 58 + 58 leaves ~200px of a 358px container for
 * rank + team, which fits "Team Heretics Academy" to an ellipsis and everything
 * shorter in full. */
@media (max-width: 520px) {
  .enuk-table th,
  .enuk-table td { padding: 9px 6px; }
  .enuk-table th:first-child,
  .enuk-table td:first-child { width: 22px; }
  .enuk-table th.enuk-t-num,
  .enuk-table td.enuk-t-num { width: 58px; }
  .enuk-teamcell { gap: 7px; }
  .enuk-wl { font-size: 12px; }
}

/* ---- stat tiles ---------------------------------------------------------- */
.enuk-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  gap: var(--Spacing-1x, 8px);
  margin: 0 0 24px;
}
@media (min-width: 700px) { .enuk-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.enuk-stat {
  padding: 14px;
  border-radius: 8px;
  border-radius: var(--corners-shape-small, 8px);
  background: #151a1e;
  background: var(--surface-surface-surface-2, #151a1e);
  border: 1px solid rgba(255, 255, 255, .06);
}
.enuk-stat__v {
  display: block;
  font-family: Poppins, sans-serif;
  font-family: var(--font-family-title, Poppins), sans-serif;
  font-size: 26px;
  font-size: var(--font-size-4xl, 26px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: #20f4cb;
  color: var(--accent-accent-1, #20f4cb);
}
.enuk-stat__k {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-size: var(--font-size-xxs, 10px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a0afbf;
  color: var(--text-text-subtle, #a0afbf);
}

/* ---- hub page hero ------------------------------------------------------- */
.enuk-hero { margin: 0 0 32px; }
.enuk-hero h1 {
  margin: 0 0 8px;
  font-family: Poppins, sans-serif;
  font-family: var(--font-family-title, Poppins), sans-serif;
  font-size: 28px;
  font-size: var(--font-size-2xl, 28px);
  font-weight: 700;
  line-height: 1.2;
}
.enuk-hero p {
  margin: 0;
  max-width: 70ch;
  color: #d9dce0;
  color: var(--text-text-secondary, #d9dce0);
  font-size: 15px;
  font-size: var(--font-size-s, 15px);
  line-height: 1.6;
}

/* ---- editorial link-outs ------------------------------------------------- */
.enuk-links { display: grid; gap: 8px; }
.enuk-link {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  border-radius: var(--corners-shape-small, 8px);
  background: #151a1e;
  background: var(--surface-surface-surface-2, #151a1e);
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  font-size: var(--font-size-s, 15px);
  line-height: 1.35;
}
.enuk-link:hover { color: #68f8dc; color: var(--text-text-link, #68f8dc); }
/* THE LABEL TAKES THE SLACK, so the date lands on the right edge.
 *
 * Without `flex:1` the title shrank to its own text width and the date sat glued
 * to the end of it — a ragged column of dates floating mid-row, different on
 * every line, which is what QA flagged on the tournament lists and the news
 * rails. `margin-left:auto` is belt to that braces: it puts the date on the right
 * even if a caller ever emits a label that is not a <span>. */
.enuk-link > span {
  flex: 1 1 auto;
  min-width: 0;
}
.enuk-link time {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 8px;
  font-size: 10px;
  font-size: var(--font-size-xxs, 10px);
  color: #a0afbf;
  color: var(--text-text-subtle, #a0afbf);
  white-space: nowrap;
  /* The rows are read as a column of dates; tabular figures keep them from
     jittering against each other. */
  font-variant-numeric: tabular-nums;
}

/* ---- footnotes ----------------------------------------------------------- */
.enuk-stamp,
.enuk-rg {
  margin: 12px 0 0;
  font-size: 10px;
  font-size: var(--font-size-xxs, 10px);
  line-height: 1.5;
  color: #a0afbf;
  color: var(--text-text-subtle, #a0afbf);
}
.enuk-rg a { color: #68f8dc; color: var(--text-text-link, #68f8dc); }

.enuk-empty {
  padding: 20px;
  border-radius: 8px;
  border-radius: var(--corners-shape-small, 8px);
  background: #151a1e;
  background: var(--surface-surface-surface-2, #151a1e);
  color: #a0afbf;
  color: var(--text-text-subtle, #a0afbf);
  font-size: 15px;
  font-size: var(--font-size-s, 15px);
  text-align: center;
}

/* ---- in-article rail ------------------------------------------------------
 * The auto-injected block on 5,000+ existing articles. Deliberately quieter than
 * a hub block: it is a guest inside someone's article, not the point of the page.
 * -------------------------------------------------------------------------- */
.enuk-rail { margin: 32px 0; clear: both; }
.enuk-rail .enuk-board { gap: 6px; }

/* Narrow placements (sidebars) tighten up. Container queries would be the exact
 * tool; this is the width at which the theme's own sidebar sits, and the grid
 * above already handles the column count, so a viewport query is enough here. */
@media (max-width: 1100px) {
  .enuk-widget .enuk-match { padding: 10px 12px; }
}
.enuk-widget .enuk-crest { flex-basis: 20px; width: 20px; height: 20px; }

/* ---------------------------------------------------------------------------
 * Partner bookmaker cell (includes/commercial.php)
 *
 * Only ever rendered on rows the BM remap claimed. An unmapped row is plain
 * text and gets none of this, which is deliberate — the visual difference
 * between "an operator we work with" and "a book we compare" should survive
 * someone reading the table quickly.
 * ------------------------------------------------------------------------ */
.enuk-book {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.enuk-book:hover { color: #68f8dc; color: var(--text-text-link, #68f8dc); }
.enuk-bklogo {
  width: 20px;
  height: 20px;
  flex: none;
  object-fit: contain;
  border-radius: 3px;
  background: #fff;
}

/* ---------------------------------------------------------------------------
 * Live matches bar (includes/header-bar.php)
 *
 * ⚠ IT IS A BLOCK INSIDE THE HEADER'S BOX, NOT A FULL-BLEED STRIP.
 * The theme's header is not edge-to-edge — `.header` carries
 * `padding:16px 16px 0`, dropping to `4px 4px 0` under 1024px, and everything
 * you see in it lives inside that inset. A full-width bar under it therefore
 * overhangs the nav on both sides and reads as a different site furniture.
 * So the OUTER `.enuk-bar` reproduces the header's own horizontal padding and
 * stays transparent; the visible surface is `.enuk-bar__in` inside it, which
 * lands exactly on the header's left and right edges.
 *
 * The theme compiles literals with the custom property as an enhancement
 * (`background:#151a1e;background:var(--…,#151a1e)`) and so do we. Token names
 * here are the ones the theme ACTUALLY defines — `--surface-surface-surface-2`
 * really does have "surface" three times, and `--action-action-secondary` is the
 * chip/rule colour. An earlier version of this block invented
 * `--surface-surface-2` and `--text-text-1`, which are not defined anywhere:
 * every one of them silently fell through to the literal, so it LOOKED correct
 * and tracked nothing. Check a token exists before relying on it.
 *
 * Layout: the fixtures scroll, the controls do not. `.enuk-bar__scroll` is the
 * only overflow container, so "All matches" and the close button stay pinned
 * while a long fixture list slides under them — with one flat overflow row they
 * scrolled away on a phone and the bar looked broken.
 * ------------------------------------------------------------------------ */
.enuk-bar {
  /* Mirrors `.header { padding:16px 16px 0 }`, but as a gap BELOW the header
     rather than above it. Change these two together. */
  padding: 8px 16px 0;
  background: transparent;
}
@media only screen and (max-width: 1023px) {
  .enuk-bar { padding: 6px 4px 0; }
}

.enuk-bar__in {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 12px;
  border-radius: 8px;
  border-radius: var(--corners-shape-small, 8px);
  background: #151a1e;
  background: var(--surface-surface-surface-2, #151a1e);
  border: 1px solid #22272b;
  border: 1px solid var(--action-action-secondary, #22272b);
  font-family: 'Open Sans', system-ui, sans-serif;
  font-family: var(--font-family-body, 'Open Sans'), system-ui, sans-serif;
  min-width: 0;
}

.enuk-bar__scroll {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;                 /* without this the flex item refuses to shrink
                                   and the row pushes the controls off instead
                                   of scrolling */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.enuk-bar__scroll::-webkit-scrollbar { display: none; }

.enuk-bar__lbl {
  flex: none;
  font-family: Poppins, system-ui, sans-serif;
  font-family: var(--font-family-title, Poppins), system-ui, sans-serif;
  font-weight: 700;
  font-size: 10px;
  font-size: var(--font-size-xxs, 10px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #20f4cb;
  color: var(--accent-accent-1, #20f4cb);
}

.enuk-bar__m {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-size: var(--font-size-xs, 13px);
  line-height: 1.2;
  color: #d9dce0;
  color: var(--text-text-secondary, #d9dce0);
  text-decoration: none;
  white-space: nowrap;
}
.enuk-bar__m:hover,
.enuk-bar__m:focus { color: #68f8dc; color: var(--text-text-link, #68f8dc); }

.enuk-bar__s {
  font-family: Poppins, system-ui, sans-serif;
  font-family: var(--font-family-title, Poppins), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #fff;
  color: var(--text-text-primary, #fff);
}

.enuk-bar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff4d4f;
  flex: none;
}

.enuk-bar__all {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: #20f4cb;
  color: var(--accent-accent-1, #20f4cb);
  text-decoration: none;
  padding-left: 10px;
  border-left: 1px solid #22272b;
  border-left: 1px solid var(--action-action-secondary, #22272b);
}
.enuk-bar__all:hover { color: #68f8dc; color: var(--text-text-link, #68f8dc); }

.enuk-bar__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #a0afbf;
  color: var(--text-text-subtle, #a0afbf);
  cursor: pointer;
}
.enuk-bar__x:hover {
  background: #22272b;
  background: var(--action-action-secondary, #22272b);
  color: #fff;
  color: var(--text-text-primary, #fff);
}
.enuk-bar__x:focus-visible {
  outline: 2px solid #20f4cb;
  outline: 2px solid var(--accent-accent-1, #20f4cb);
  outline-offset: 1px;
}

/* Phones: the label is the first thing to go — "Live now" is already implied by
   the red dots — and "All matches" shortens to its chevron, so the fixtures keep
   as much of a narrow screen as possible. */
@media only screen and (max-width: 600px) {
  .enuk-bar__in { gap: 8px; padding: 5px 6px 5px 10px; }
  .enuk-bar__scroll { gap: 14px; }
  .enuk-bar__m { font-size: 12.5px; }
  .enuk-bar__all-l { display: none; }
  .enuk-bar__all { padding-left: 8px; font-size: 15px; line-height: 1; }
}