/*
   BULLS EXCHANGE — SPORTSBOOK SCREENS
   ---------------------------------------------------------------------------
   The trading floor: coupon, in-play, single-sport boards and event detail.
   Mirrors wynbook structure exactly; this file only changes presentation.

   Density levers (the shared engine reads these):
     --kx-cw      odds cell width      --kx-cell-h  odds cell height
     --kx-gap     grid gap             --kx-crest   crest diameter
   Spec: docs/design/bulls-premium-light.md
*/

:root {
  --kx-cell-h: 44px;
  --kx-gap: 4px;
  --kx-r-cell: 6px;
  --kx-crest: 22px;
  --bx-gutter: 10px;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.kx-main {
  padding-inline: var(--bx-gutter);
  padding-block: 12px 24px;
  background: var(--bx-canvas);
}
.kx-shell { gap: 12px; align-items: start; }
.kx-shell.kx-shell--no-nav { grid-template-columns: minmax(0, 1fr); }

/* Event routes and board screens own the full content width. */
.kx-shell.kx-shell--no-nav:has(.kx-event),
.kx-shell.kx-shell--no-nav:has(.kx-boardhead) { grid-template-columns: minmax(0, 1fr); }
.kx-shell.kx-shell--no-nav:has(.kx-event) > .kx-main,
.kx-shell.kx-shell--no-nav:has(.kx-boardhead) > .kx-main { grid-column: 1 / -1; }

.kx-main:has(> .kx-boardhead) { display: flex; flex-direction: column; gap: 12px; }
.kx-main:has(> .kx-boardhead) > .kx-panel { margin: 0; }

/* --------------------------------------------------------------------------
   Section heads — a label and a count. Never a banner.
   -------------------------------------------------------------------------- */
.kx-sectionhead,
.bx-marketboard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  margin: 4px 0 8px;
  padding: 0 2px;
}
.kx-sectionhead > div,
.bx-marketboard__head > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.kx-sectionhead h2,
.bx-marketboard__head h2 {
  margin: 0;
  color: var(--bx-ink-3);
  font-family: var(--kx-cond);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kx-sectionhead__eyebrow,
.bx-marketboard__head .kx-sectionhead__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--bx-live);
  font-family: var(--kx-cond);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kx-sectionhead__meta,
.bx-marketboard__count {
  color: var(--bx-ink-3);
  font-family: var(--kx-cond);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .02em;
}

/* Board masthead (in-play / single sport) */
.kx-boardhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  background: none;
}
.kx-boardhead::before { display: none; }
.kx-boardhead__kicker {
  color: var(--bx-live);
  font-family: var(--kx-cond);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kx-boardhead h1 {
  margin: 1px 0 0;
  color: var(--bx-ink);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.kx-boardhead__stats {
  display: flex;
  align-items: center;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
  color: var(--bx-ink-3);
  font-family: var(--kx-cond);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kx-boardhead__stats > span {
  min-height: 0;
  padding: 0 10px;
  color: var(--bx-ink-3);
  font: 600 .69rem var(--kx-cond);
  letter-spacing: .08em;
}
.kx-boardhead__stats > span + span { border-left: 1px solid var(--bx-line); }
.kx-boardhead__stats > span:last-child { padding-right: 0; }
.kx-boardhead__stats b { color: var(--bx-ink); font-weight: 700; }
.kx-boardhead__stats i { background: var(--bx-live); }
.kx-boardhead__pulse { display: none; }

/* --------------------------------------------------------------------------
   In-play strip
   -------------------------------------------------------------------------- */
.kx-liveboard {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.kx-liveboard .kx-livestrip { margin: 0; padding: 0 0 2px; }
.kx-livestrip {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0 2px 2px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.kx-livestrip::-webkit-scrollbar { display: none; }

.kx-liveboard .kx-livecard,
.kx-livestrip .kx-livecard,
.kx-livecard {
  flex: 0 0 auto;
  width: 176px;
  min-width: 176px;
  border-top: 1px solid var(--bx-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px 8px;
  border: 1px solid var(--bx-line);
  border-radius: var(--r-card);
  background: var(--bx-panel);
  box-shadow: none;
  scroll-snap-align: start;
  transition: background-color .12s linear, border-color .12s linear;
}
.kx-livecard::before { display: none; }
.kx-livecard:hover,
.kx-livecard.is-active { border-color: var(--bx-line-2); background: var(--bx-panel-2); box-shadow: none; transform: none; }

.kx-livecard__meta { display: flex; align-items: center; gap: 5px; min-width: 0; }
.kx-livecard__live { display: inline-flex; }
.kx-livecard__live .k-live__dot { width: 6px; height: 6px; }
.kx-livecard__meta .kx-sport-ico { width: 13px; height: 13px; opacity: .5; }
.kx-livecard__competition {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bx-ink-3);
  font-family: var(--kx-cond);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.kx-livecard__body { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 4px; }
.kx-livecard__row { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0; }
.kx-livecard__team {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bx-ink);
  font-size: .78rem;
  font-weight: 500;
}
.kx-livecard .kx-crest { --kx-crest: 18px; }
.kx-livecard__odds {
  flex: 0 0 auto;
  min-width: 46px;
  padding: 3px 5px;
  border-radius: var(--r-cell);
  background: var(--bf-back);
  color: var(--bf-ink);
  font-family: var(--kx-cond);
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
}
.kx-livecard__odds.is-empty { background: var(--bx-raised); color: var(--bx-ink-3); }
.kx-livecard__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--bx-line);
}
.kx-livecard__mkt,
.kx-livecard__score {
  color: var(--bx-ink-3);
  font-family: var(--kx-cond);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kx-livecard__more { display: inline-flex; color: var(--bx-ink-3); }
.kx-livecard:hover .kx-livecard__more { color: var(--bx-ink-2); }
.kx-livecard .kx-crest { background-color: transparent; box-shadow: none; }

/* --------------------------------------------------------------------------
   Market board
   -------------------------------------------------------------------------- */
.bx-marketboard { margin: 0; padding: 0; border: 0; background: none; }
.bx-marketboard__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.bx-marketboard__footer { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.bx-marketboard__more,
.bx-marketboard__less {
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--bx-line);
  border-radius: var(--r-cell);
  background: var(--bx-panel);
  color: var(--bx-ink-2);
  font-family: var(--kx-cond);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background-color .12s linear, border-color .12s linear;
}
.bx-marketboard__more b { color: var(--bx-gold); }
.bx-marketboard__more:hover,
.bx-marketboard__less:hover { border-color: var(--bx-line-2); background: var(--bx-panel-2); color: var(--bx-ink); }

/* --------------------------------------------------------------------------
   Competition panels (single sport / in-play grouping)
   -------------------------------------------------------------------------- */
.kx-panel { overflow: hidden; }
.kx-comp-head { padding-inline: 12px; }
.kx-comp__cards { display: grid; gap: 8px; padding: 8px; background: var(--bx-canvas); }

/* --------------------------------------------------------------------------
   Match card — the coupon unit (2 pills per runner)
   -------------------------------------------------------------------------- */
.kx-mc {
  --kx-cw: 74px;
  --kx-crest: 26px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bx-line);
  border-radius: var(--r-card);
  background: var(--bx-panel);
  box-shadow: none;
  transition: border-color .12s linear;
}
.kx-mc { box-shadow: 0 1px 2px rgba(18, 20, 26, .04), 0 12px 26px -20px rgba(18, 20, 26, .5); }
/* Each card carries its home team's colour on the edge — twelve cards in a
   column then read as twelve matches, not as one grey table. */
.kx-mc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: color-mix(in srgb, var(--home-crest, #cfd5de) 62%, transparent);
}
.kx-mc__head .kx-sport-ico {
  flex: none;
  width: 15px;
  height: 15px;
  background-color: var(--sport-accent, var(--bx-ink-3));
}
.kx-mc:hover { transform: none; border-color: var(--bx-line-2); box-shadow: 0 1px 2px rgba(18, 20, 26, .05), 0 14px 30px -20px rgba(18, 20, 26, .6); }

.kx-mc__head {
  min-height: 32px;
  padding: 0 10px;
  border-bottom: 1px solid var(--bx-line);
  background: var(--bx-panel-2);
  gap: 8px;
}
.kx-mc__comp {
  max-width: 52%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bx-ink-2);
  font-family: var(--kx-cond);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.kx-mc__actions { display: inline-flex; align-items: center; gap: 2px; }
.kx-event-action {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--bx-ink-3);
  transition: color .12s linear, background-color .12s linear;
}
.kx-event-action:hover { background: var(--bx-raised); color: var(--bx-ink-2); }
.kx-event-action.is-active,
.kx-favorite.is-active { color: var(--bx-gold); }
.kx-stream-entry.is-ready { color: var(--bx-ink-2); }

.kx-mc__badge {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bx-raised);
  color: var(--bx-ink-3);
  font-family: var(--kx-cond);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kx-mc__status { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; }
.kx-mc__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bx-raised);
  color: var(--bx-ink-2);
  font-family: var(--kx-cond);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kx-mc__chip--live { background: var(--kx-live-tint); color: var(--bx-live); }
.kx-mc__chip--live .kx-mc__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bx-live); }
.kx-mc__depth { color: var(--bx-ink-3); font-family: var(--kx-cond); font-size: .64rem; font-weight: 600; }

.kx-mc__cols {
  min-height: 20px;
  padding: 5px 10px 2px;
  border-bottom: 1px solid var(--bx-line);
  background: var(--bx-panel);
}
.kx-mc__col { font-family: var(--kx-cond); font-size: .56rem; font-weight: 700; letter-spacing: .13em; color: var(--bx-ink-3); }
.kx-mc__col::before { width: 5px; height: 5px; border-radius: 2px; }

.kx-mc__body { padding: 0 10px 6px; }
.kx-mc__runner { min-height: 48px; padding-block: 4px; }
.kx-mc__runner:hover { background: var(--bx-panel-2); }
.kx-mc__runner + .kx-mc__runner::before { left: 0; right: 0; background: var(--bx-line); }
.kx-mc__team {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "crest name tag" "crest score score";
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
}
.kx-mc__team > .kx-crest { grid-area: crest; }
.kx-mc__name { grid-area: name; }
.kx-mc__tag { grid-area: tag; justify-self: start; }
.kx-mc__score { grid-area: score; justify-self: start; }
.kx-mc__name {
  color: var(--bx-ink);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: -.002em;
}
.kx-mc__tag {
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--bx-raised);
  color: var(--bx-ink-2);
  font-family: var(--kx-cond);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.kx-mc__score {
  flex: none;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bx-panel-2);
  border: 1px solid var(--bx-line);
  color: var(--bx-ink-2);
  font-family: var(--kx-cond);
  font-size: .68rem;
  font-weight: 600;
}
.kx-mc__score.is-bat { border-color: rgba(12, 124, 85, .3); background: var(--kx-rise-tint); color: var(--bx-rise); }
.kx-mc__draw-disc { border: 1px dashed var(--bx-line-2); background: var(--bx-panel-2); color: var(--bx-ink-3); }

/* --------------------------------------------------------------------------
   Odds cells — the product. Colour is the only thing that ever changes.
   -------------------------------------------------------------------------- */
.kx-odds {
  min-height: var(--kx-cell-h);
  border: 0;
  border-radius: var(--r-cell);
  background: var(--bf-back);
  transition: background-color .1s linear, box-shadow .18s linear;
}
.kx-odds__p {
  color: var(--bf-ink);
  font-family: var(--kx-cond);
  font-size: .94rem;
  font-weight: 700;
  line-height: 1;
}
.kx-odds__d {
  min-height: 11px;
  color: var(--bf-ink-soft);
  font-family: var(--kx-cond);
  font-size: .625rem;
  font-weight: 500;
  line-height: 1.1;
}
.kx-odds--lay { background: var(--bf-lay); }
.kx-odds--b2 { background: var(--bf-back-2); }
.kx-odds--b3 { background: var(--bf-back-3); }
.kx-odds--l2 { background: var(--bf-lay-2); }
.kx-odds--l3 { background: var(--bf-lay-3); }
.kx-odds--b2 .kx-odds__p,
.kx-odds--b3 .kx-odds__p,
.kx-odds--l2 .kx-odds__p,
.kx-odds--l3 .kx-odds__p { font-size: .82rem; font-weight: 600; }

.kx-odds--empty,
.kx-odds.is-suspended {
  background: var(--bx-raised);
  color: var(--bx-ink-3);
}
.kx-odds--empty .kx-odds__p,
.kx-odds.is-suspended .kx-odds__p { color: var(--bx-ink-3); font-weight: 600; }
.kx-odds--empty .kx-odds__d { display: none; }

@media (hover: hover) and (pointer: fine) {
  .kx-odds:hover { background: var(--bf-back-hov); }
  .kx-odds--lay:hover { background: var(--bf-lay-hov); }
  .kx-odds--empty:hover,
  .kx-odds.is-suspended:hover { background: var(--bx-raised); cursor: default; }
}
.kx-odds:active { background: var(--bf-back-press); }
.kx-odds--lay:active { background: var(--bf-lay-press); }
.kx-odds.is-selected { box-shadow: inset 0 0 0 2px var(--bx-ink); }

/* Price change: colour only, never geometry. */
.kx-odds.is-shorten { box-shadow: inset 0 0 0 2px var(--bx-rise); }
.kx-odds.is-drift { box-shadow: inset 0 0 0 2px var(--bx-fall); }

/* Crests read as content, not as chrome. */
.kx-crest { background-color: var(--bx-panel-2); box-shadow: inset 0 0 0 1px var(--bx-line); }
.kx-crest--flag img { object-fit: contain; }
.kx-crest--kcl img { object-fit: cover; }
.kx-crest__fb { color: var(--bx-ink-2); font-family: var(--kx-cond); font-weight: 700; }

/* --------------------------------------------------------------------------
   Event detail
   -------------------------------------------------------------------------- */
.kx-stream {
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--bx-line);
  border-radius: var(--r-panel);
  background: var(--bx-panel);
}
.kx-stream { border-color: rgba(211, 173, 104, .24); background: #14111a; }
.kx-stream__head {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, #241d2e, #191320);
  color: #f7f5f9;
  font-family: var(--kx-cond);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kx-stream__live {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--bx-live);
}
.kx-stream__live .k-live__dot { width: 7px; height: 7px; background: var(--bx-live); }
.kx-stream__live .k-live__dot::after { border-color: var(--bx-live); }
.kx-stream__feed,
.kx-stream__action { color: rgba(244, 242, 246, .62); font-size: .68rem; font-weight: 600; }
.kx-stream__chev { color: rgba(244, 242, 246, .62); }
.kx-stream__title { color: #f7f5f9; }
.kx-stream__live { color: #ff8a9e; }
.kx-stream__live .k-live__dot { background: #ff6b83; }
.kx-stream__live .k-live__dot::after { border-color: #ff6b83; }
.kx-stream__body { background: #0d0b11; }

.kx-match.kx-event {
  overflow: hidden;
  border: 1px solid var(--bx-line);
  border-radius: var(--r-panel);
  background: var(--bx-panel);
}
.kx-event__crumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--bx-line);
  background: var(--bx-panel-2);
}
.kx-event__crumb-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bx-ink-2);
  font-family: var(--kx-cond);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.kx-livebadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--kx-live-tint);
  color: var(--bx-live);
  font-family: var(--kx-cond);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Scoreboard */
.kx-sbc { border: 0; border-radius: 0; background: var(--bx-panel); }
.kx-sbc__line { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.kx-sbc__side { flex: 1 1 0; min-width: 0; gap: 6px; }
.kx-sbc__nm { flex: 0 1 auto; min-width: 2.6em; color: var(--bx-ink-2); font-family: var(--kx-cond); font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.kx-sbc__sc { color: var(--bx-ink); font-family: var(--kx-cond); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kx-sbc__ov { color: var(--bx-ink-3); font-family: var(--kx-cond); font-size: .72rem; font-style: normal; font-weight: 500; }
.kx-sbc__side.is-batting .kx-sbc__sc { color: var(--bx-rise); }
/* The base tints the batting side gold; gold on white fails contrast, so the
   green score carries the signal and the name stays ink. */
.kx-sbc__side.is-batting .kx-sbc__nm { color: var(--bx-ink-2); }
.kx-sbc__mid { color: var(--bx-ink-3); }
.kx-sbc__mid b { color: var(--bx-ink-3); font-family: var(--kx-cond); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.kx-sbc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 8px 12px;
  border-top: 1px solid var(--bx-line);
  background: var(--bx-panel-2);
  color: var(--bx-ink-2);
  font-size: .78rem;
}
.kx-sbc__meta em { color: var(--bx-ink-3); }
.kx-sbc__rate b { color: var(--bx-ink); font-family: var(--kx-cond); font-weight: 700; }
.kx-sbc__ctx b { color: var(--bx-ink); font-weight: 500; }
.kx-sbc__balls i,
.kx-cricket-balls i { background: var(--bx-raised); color: var(--bx-ink-2); }
.cricket-live-scoreboard.is-ball-running { border-color: rgba(217, 30, 66, .45); box-shadow: inset 3px 0 0 var(--bx-live); }
.kx-sbc__rate { color: var(--bx-ink-2); font-family: var(--kx-cond); font-size: .74rem; font-weight: 600; letter-spacing: .04em; }
.kx-sbc__rate em { color: var(--bx-ink); font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.kx-sbc__ctx { color: var(--bx-ink-2); font-size: .78rem; }
.kx-event__meta { color: var(--bx-ink-3); font-family: var(--kx-cond); font-size: .7rem; padding: 0 12px 12px; }
.kx-event__meta b { color: var(--bx-ink); font-weight: 700; }

/* Market navigation */
.kx-mkt-nav { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 12px 0; }
.kx-mkt-search { width: 100%; flex-basis: auto; }
.kx-mkt-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--bx-line);
  border-radius: var(--r-cell);
  background: var(--bx-panel);
}
.kx-mkt-search__icon { color: var(--bx-ink-3); display: inline-flex; }
.kx-mkt-search__input { flex: 1; border: 0; background: none; color: var(--bx-ink); font-size: .88rem; }
.kx-mkt-search__input::placeholder { color: var(--bx-ink-3); }
.kx-mkt-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.kx-mkt-tabs::-webkit-scrollbar { display: none; }
.kx-mkt-tab {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--bx-line);
  border-radius: var(--r-cell);
  background: var(--bx-panel);
  color: var(--bx-ink-2);
  font-family: var(--kx-cond);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .05em;
}
.kx-mkt-tab__n { color: var(--bx-ink-3); font-size: .68rem; font-weight: 500; }
.kx-mkt-tab:hover { background: var(--bx-panel-2); color: var(--bx-ink); }
.kx-mkt-tab.is-active {
  border-color: var(--bx-ink);
  background: var(--bx-ink);
  color: var(--bx-panel);
}
.kx-mkt-tab.is-active .kx-mkt-tab__n { color: rgba(255, 255, 255, .7); }

/* Market groups + the exchange ladder */
.kx-group {
  overflow: hidden;
  margin-bottom: 8px;
  border: 1px solid var(--bx-line);
  border-radius: var(--r-card);
  background: var(--bx-panel);
  box-shadow: none;
}
.kx-group__head { min-height: 40px; padding-inline: 12px; background: var(--bx-panel-2); }
.kx-xhead,
.kx-bmhead {
  min-height: 26px;
  padding-inline: 12px;
  border-bottom: 1px solid var(--bx-line);
  background: var(--bx-panel);
}
.kx-xhead__side {
  color: var(--bx-ink-3);
  font-family: var(--kx-cond);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.kx-xhead__side--back { color: #2f7fb8; }
.kx-xhead__side--lay { color: #b8536b; }
.kx-xrow,
.kx-bmrow {
  min-height: 56px;
  padding-inline: 12px;
  background: var(--bx-panel);
  border-top: 1px solid var(--bx-line);
}
.kx-xrow:hover,
.kx-bmrow:hover { background: var(--bx-panel-2); }
.kx-xrow__name { color: var(--bx-ink); font-size: .875rem; font-weight: 500; }
.kx-xrow__pos { color: var(--bx-ink-3); font-family: var(--kx-cond); font-size: .68rem; }

.kx-suspveil--hard { background: rgba(241, 243, 246, .9); }
.kx-suspveil__copy strong { color: var(--bx-ink-2); font-family: var(--kx-cond); font-size: .68rem; letter-spacing: .12em; }
.kx-suspveil__copy small { color: var(--bx-ink-3); font-size: .62rem; letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   Empty + loading states
   -------------------------------------------------------------------------- */
.kx-mkt-empty,
.kx-slip__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 20px;
  text-align: center;
}
.kx-slip__empty svg { width: 44px; height: 44px; color: var(--bx-ink-3); opacity: .6; }
.kx-slip__empty-t { color: var(--bx-ink); font-size: .94rem; font-weight: 600; }
.kx-slip__empty-s { color: var(--bx-ink-2); font-size: .82rem; }

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 941px) {
  :root { --bx-gutter: 20px; }
  /* Line length is a design decision: the board stops growing past 90rem. */
  .kx-shell { max-width: 90rem; margin-inline: auto; }
  /* The slip rail is sized by its content, so an empty slip returns its column
     to the board instead of leaving 336px of dead space. */
  .kx-app .kx-shell { grid-template-columns: var(--kx-rail-w) minmax(0, 1fr) auto; }
  .kx-app .kx-shell.kx-shell--no-nav { grid-template-columns: minmax(0, 1fr) auto; }
  .kx-app .kx-shell > .kx-slip { width: var(--kx-slip-w); max-width: var(--kx-slip-w); }
  .kx-main { padding-block: 16px 40px; }
  .kx-mc { --kx-cw: 78px; }
  .bx-marketboard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kx-livecard { width: 212px; }
  .kx-sectionhead,
  .bx-marketboard__head { min-height: 36px; }
  .kx-boardhead h1 { font-size: 1.2rem; }
  .kx-xrow,
  .kx-bmrow { min-height: 52px; }
}

@media (min-width: 1560px) {
  .bx-marketboard__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  /* The scoreline is the one place where 390px genuinely runs out of room, so
     the duplicated bits go first: the overs repeat in the meta row beneath, and
     the centre LIVE label repeats the badge in the header above. What is left —
     crest, team, score — is what a scoreboard is for. */
  .kx-sbc__ov { display: none; }
  .bx-eventhead .kx-sbc__mid { display: none; }
  .bx-eventhead .kx-sbc__nm { min-width: 0; font-size: .68rem; }
  .kx-sbc__line { gap: 6px; padding: 10px; }
}

/* --------------------------------------------------------------------------
   Featured live match
   The deepest live market on the board, given the scale it deserves. Real
   crests, the two teams' own colours, and the ordinary odds cells — which is
   why it stays a presentation of the board rather than a second product.
   -------------------------------------------------------------------------- */
.bx-featured {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 0 12px;
  border: 1px solid rgba(211, 173, 104, .24);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, #241d2e, #14111a);
}
/* The sport's own brand art sits on the right, faded into the plum so the
   scoreline always wins the contrast fight. */
.bx-featured__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* The art is composed with its subject right of centre and empty plum on the
     left, so it is framed from 74% and faded out before the scoreline. */
  background-position: 74% 45%;
  background-size: cover;
  opacity: .85;
  -webkit-mask-image: linear-gradient(90deg, transparent 6%, #000 52%);
  mask-image: linear-gradient(90deg, transparent 6%, #000 52%);
  pointer-events: none;
}
.bx-featured__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--home-crest, #4a3f57) 72%, transparent), transparent 55%),
    radial-gradient(120% 160% at 100% 100%, color-mix(in srgb, var(--away-crest, #4a3f57) 60%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(20, 17, 26, .25), rgba(20, 17, 26, .82));
  pointer-events: none;
}
.bx-featured__body,
.bx-featured__odds { position: relative; z-index: 2; }

.bx-featured__body {
  display: block;
  width: 100%;
  padding: 12px 12px 2px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.bx-featured__meta { display: flex; align-items: center; gap: 7px; min-width: 0; }
.bx-featured .kx-sport-ico { width: 15px; height: 15px; background-color: var(--sport-accent, var(--bx-gold-on-dark)); }
.bx-featured__comp {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(244, 242, 246, .74);
  font-family: var(--kx-cond);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.bx-featured .kx-mc__chip { background: rgba(255, 255, 255, .12); color: #f4f2f6; }
.bx-featured .kx-mc__chip--live { background: rgba(255, 107, 131, .18); color: #ff8a9e; }
.bx-featured .kx-mc__chip--live .kx-mc__dot { background: #ff6b83; }

.bx-featured__teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.bx-featured__side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bx-featured__side--away { flex-direction: row-reverse; }
.bx-featured__side .kx-crest {
  --kx-crest: 44px;
  flex: none;
  background-color: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.bx-featured__nm { display: grid; gap: 2px; min-width: 0; }
.bx-featured__side--away .bx-featured__nm { text-align: right; }
.bx-featured__nm b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #f7f5f9;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.15;
}
.bx-featured__nm em {
  color: rgba(244, 242, 246, .68);
  font-family: var(--kx-cond);
  font-size: .72rem;
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bx-featured__vs {
  color: rgba(244, 242, 246, .38);
  font-family: var(--kx-cond);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bx-featured__odds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
}
.bx-featured__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kx-gap); }
.bx-featured .kx-odds { min-height: 46px; }
.bx-featured .kx-odds--empty { background: rgba(255, 255, 255, .09); }
.bx-featured .kx-odds--empty .kx-odds__p { color: rgba(244, 242, 246, .55); }

/* --------------------------------------------------------------------------
   Live casino entry (wynbook carries the same band inside its coupon flow)
   -------------------------------------------------------------------------- */
.bx-casino-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 96px;
  margin-top: 14px;
  padding: 0 14px;
  overflow: hidden;
  border: 1px solid rgba(211, 173, 104, .3);
  border-radius: var(--r-card);
  background: #17131d;
  text-decoration: none;
}
.bx-casino-strip img {
  position: absolute;
  inset: 0 0 0 auto;
  width: 64%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.bx-casino-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #17131d 38%, rgba(23, 19, 29, .58) 70%, rgba(23, 19, 29, .12));
}
.bx-casino-strip__copy,
.bx-casino-strip__cta { position: relative; z-index: 1; }
.bx-casino-strip__copy { display: grid; gap: 3px; }
.bx-casino-strip__copy small {
  color: var(--bx-gold-on-dark);
  font-family: var(--kx-cond);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.bx-casino-strip__copy strong { color: #f4f2f6; font-size: .92rem; font-weight: 600; }
.bx-casino-strip__cta {
  margin-left: auto;
  padding: 9px 14px;
  border-radius: var(--r-cell);
  background: var(--bx-gold-cta);
  color: #17131d;
  font-family: var(--kx-cond);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 941px) {
  .bx-featured__side .kx-crest { --kx-crest: 52px; }
  .bx-featured__nm b { font-size: 1.08rem; }
  .bx-featured__body { padding: 16px 16px 4px; }
  .bx-featured__odds { padding: 16px; gap: 16px; }
  .bx-casino-strip { height: 110px; }
}

/* --------------------------------------------------------------------------
   Single-sport board banner
   -------------------------------------------------------------------------- */
.kx-boardhead--art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 116px;
  padding: 16px 14px;
  border: 1px solid rgba(211, 173, 104, .24);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, #241d2e, #14111a);
}
.kx-boardhead--art::before {
  content: "";
  display: block;                 /* the plain board head resets ::before to none */
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--board-art) 76% 45% / cover no-repeat;
  opacity: .9;
}
.kx-boardhead--art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #191320 24%, rgba(25, 19, 32, .88) 54%, rgba(25, 19, 32, .42));
}
/* Negative z-index would paint the art behind the card's own background. */
.kx-boardhead--art > * { position: relative; z-index: 2; }
.kx-boardhead--art .kx-boardhead__kicker { color: var(--sport-accent, var(--bx-gold-on-dark)); }
.kx-boardhead--art h1 { color: #f7f5f9; font-size: 1.5rem; letter-spacing: -.02em; }
.kx-boardhead--art .kx-boardhead__stats { color: rgba(244, 242, 246, .68); }
.kx-boardhead--art .kx-boardhead__stats > span { color: rgba(244, 242, 246, .7); }
.kx-boardhead--art .kx-boardhead__stats > span + span { border-left-color: rgba(255, 255, 255, .16); }
.kx-boardhead--art .kx-boardhead__stats b { color: #f7f5f9; }

@media (min-width: 941px) {
  .kx-boardhead--art { min-height: 132px; padding: 22px 24px; }
  .kx-boardhead--art h1 { font-size: 1.9rem; }
}

/* In-play has no single sport to picture, so it carries the brand pattern. */
.kx-boardhead--pattern {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 96px;
  padding: 14px;
  border: 1px solid rgba(211, 173, 104, .24);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, #241d2e, #14111a);
}
.kx-boardhead--pattern::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assets/art/pattern-horns.webp") center / 260px repeat;
  opacity: .3;
}
.kx-boardhead--pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #191320 18%, rgba(25, 19, 32, .74));
}
.kx-boardhead--pattern > * { position: relative; z-index: 2; }
.kx-boardhead--pattern .kx-boardhead__kicker { color: #ff6b83; }
.kx-boardhead--pattern h1 { color: #f7f5f9; font-size: 1.5rem; letter-spacing: -.02em; }
.kx-boardhead--pattern .kx-boardhead__stats > span { color: rgba(244, 242, 246, .7); }
.kx-boardhead--pattern .kx-boardhead__stats > span + span { border-left-color: rgba(255, 255, 255, .16); }
.kx-boardhead--pattern .kx-boardhead__stats b { color: #f7f5f9; }

/* --------------------------------------------------------------------------
   Event header — the hero of the detail screen
   Same grammar as the featured band: the sport's plate, a wash from the two
   teams' colours, and the scoreline at hero scale. Everything below it (market
   nav, ladders) stays on the light board where the prices live.
   -------------------------------------------------------------------------- */
.bx-eventhead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(211, 173, 104, .24);
  border-radius: var(--r-panel);
  background: linear-gradient(180deg, #241d2e, #14111a);
}
.bx-eventhead__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: 78% 42%;
  background-size: cover;
  opacity: .8;
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 54%);
  mask-image: linear-gradient(90deg, transparent 4%, #000 54%);
  pointer-events: none;
}
.bx-eventhead__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(115% 150% at 0% 0%, color-mix(in srgb, var(--home-crest, #4a3f57) 68%, transparent), transparent 56%),
    radial-gradient(115% 150% at 100% 100%, color-mix(in srgb, var(--away-crest, #4a3f57) 56%, transparent), transparent 56%),
    linear-gradient(180deg, rgba(20, 17, 26, .34), rgba(20, 17, 26, .88));
  pointer-events: none;
}
.bx-eventhead > .kx-event__crumb,
.bx-eventhead > .kx-sbc,
.bx-eventhead > .kx-event__face,
.bx-eventhead > .kx-event__meta { position: relative; z-index: 2; background: transparent; }
.bx-eventhead > .kx-event__crumb { border-bottom-color: rgba(255, 255, 255, .12); }

.bx-eventhead .kx-event__crumb-name { color: rgba(244, 242, 246, .76); }
.bx-eventhead .kx-event-action { color: rgba(244, 242, 246, .66); }
.bx-eventhead .kx-event-action:hover { background: rgba(255, 255, 255, .1); color: #f7f5f9; }
.bx-eventhead .kx-event-action.is-active,
.bx-eventhead .kx-favorite.is-active { color: var(--bx-gold-on-dark); }
.bx-eventhead .kx-livebadge { background: rgba(255, 107, 131, .18); color: #ff8a9e; }
.bx-eventhead .kx-livebadge .k-live__dot { background: #ff6b83; }

.bx-eventhead .kx-sbc__side .kx-crest { --kx-crest: 30px; }
.bx-eventhead .kx-crest {
  background-color: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.bx-eventhead .kx-crest__fb { color: rgba(244, 242, 246, .8); }
.bx-eventhead .kx-sbc__nm { color: rgba(244, 242, 246, .72); }
.bx-eventhead .kx-sbc__sc { color: #f7f5f9; font-size: 1.12rem; }
.bx-eventhead .kx-sbc__nm { min-width: 4.2em; }
.bx-eventhead .kx-sbc__ov { color: rgba(244, 242, 246, .6); }
.bx-eventhead .kx-sbc__side.is-batting .kx-sbc__sc { color: #6ee7a8; }
.bx-eventhead .kx-sbc__side.is-batting .kx-sbc__nm { color: rgba(244, 242, 246, .8); }
.bx-eventhead .kx-sbc__mid,
.bx-eventhead .kx-sbc__mid b { color: rgba(244, 242, 246, .5); }
.bx-eventhead .kx-sbc__meta {
  border-top-color: rgba(255, 255, 255, .1);
  /* a graded veil, not a grey slab pasted over the plate */
  background: linear-gradient(180deg, rgba(11, 8, 15, .5), rgba(11, 8, 15, .82));
  color: rgba(244, 242, 246, .78);
}
.bx-eventhead .kx-sbc__meta em { color: rgba(244, 242, 246, .55); }
.bx-eventhead .kx-sbc__rate b,
.bx-eventhead .kx-sbc__ctx b { color: #f7f5f9; }
.bx-eventhead .kx-sbc__balls i,
.bx-eventhead .kx-cricket-balls i { background: rgba(255, 255, 255, .12); color: #f7f5f9; }
.bx-eventhead .kx-event__meta { color: rgba(244, 242, 246, .6); }
.bx-eventhead .kx-event__meta b { color: #f7f5f9; }
.bx-eventhead .kx-event__name,
.bx-eventhead .kx-event__team { color: #f7f5f9; }
.bx-eventhead .kx-event__vs { color: rgba(244, 242, 246, .45); }

@media (min-width: 941px) {
  .bx-eventhead .kx-sbc__side .kx-crest { --kx-crest: 36px; }
  .bx-eventhead .kx-sbc__sc { font-size: 1.5rem; }
}

/* Live score strip — maximum three readable rows on every sport.
   Team artwork belongs in the fixture list; the live score itself is a dense,
   high-contrast instrument panel that never competes with a photograph. */
.bx-eventhead__art { display: none; }
.bx-eventhead__wash {
  background:
    radial-gradient(75% 160% at 0% 0%, rgba(188, 54, 82, .2), transparent 62%),
    linear-gradient(112deg, #221729, #17131d 62%, #211a29);
}
.bx-eventhead [data-kx-scoreboard] {
  position: relative;
  z-index: 2;
  max-height: 92px;
  overflow: hidden;
  background: rgba(9, 7, 12, .42);
  color: #fff;
}
.bx-eventhead .kx-sbc__line { min-height: 44px; padding: 6px 11px; }
.bx-eventhead .kx-sbc__meta {
  min-height: 28px;
  max-height: 34px;
  padding: 5px 11px;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}
.bx-eventhead .kx-sbc__ctx {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bx-eventhead .kx-scoreboard__head {
  min-height: 27px;
  padding: 4px 11px;
  border-bottom-color: rgba(255, 255, 255, .1);
  background: rgba(8, 6, 11, .34);
  color: rgba(255, 255, 255, .78);
}
.bx-eventhead .tennis-score-header { display: none; }
.bx-eventhead .tennis-score-row { min-height: 31px; color: #fff; }
.bx-eventhead .tennis-score-row + .tennis-score-row { border-top-color: rgba(255, 255, 255, .1); }
.bx-eventhead .tennis-player-cell b,
.bx-eventhead .tennis-set-cell,
.bx-eventhead .tennis-point-cell { color: #fff; }
.bx-eventhead .tennis-set-cell.is-current,
.bx-eventhead .tennis-point-cell { color: #ffe3a3; }
.bx-eventhead .kx-football-scoreline { min-height: 54px; padding: 6px 11px; }
.bx-eventhead .kx-football-side b,
.bx-eventhead .football-score-core strong { color: #fff; }

@media (max-width: 620px) {
  .bx-eventhead [data-kx-scoreboard] { max-height: 84px; }
  .bx-eventhead .kx-sbc__line { min-height: 41px; padding: 5px 8px; }
  .bx-eventhead .kx-sbc__meta { min-height: 26px; max-height: 31px; padding: 4px 8px; }
  .bx-eventhead .kx-sbc__ctx:nth-of-type(n+2) { display: none; }
  .bx-eventhead .kx-scoreboard__head { min-height: 25px; padding: 3px 8px; }
  .bx-eventhead .tennis-score-row { min-height: 29px; }
  .bx-eventhead .kx-football-scoreline { min-height: 51px; padding: 5px 8px; }
}