/*
   BULLS EXCHANGE — VMEXCH-ALIGNED TENANT SKIN
   The exchange engine, dimensions and states are shared with Wynbook. This
   file changes presentation only: VM Exchange's plum / black / champagne
   system, Bulls typography and the casino treatment.
*/
:root {
  color-scheme: light;

  --bx-plum: #383140;
  --bx-plum-raised: #484050;
  --bx-plum-muted: #5b5262;
  --bx-black: #000000;
  --bx-champagne: #d3ad68;
  --bx-champagne-hot: #e2c587;
  --bx-champagne-deep: #80602a;
  --bx-page: #eef1f4;
  --bx-surface: #ffffff;
  --bx-line: #c9d0d8;
  --bx-muted: #6d7681;
  --bx-text: #141b25;

  --kx-firn: var(--bx-page);
  --kx-snow: var(--bx-surface);
  --kx-drift: #f6f5f7;
  --kx-ice: #e6e4e8;
  --kx-line: var(--bx-line);
  --kx-line-2: #aeb7c1;

  --kx-ink: var(--bx-plum);
  --kx-ink-2: var(--bx-plum-raised);
  --kx-ink-3: var(--bx-black);
  --kx-ink-line: rgba(255, 255, 255, .14);
  --kx-on-ink: #ffffff;
  --kx-on-ink-2: #d9d2dc;

  --kx-text: var(--bx-text);
  --kx-slate: var(--bx-muted);
  --kx-mist: #8d949d;

  /* Dark champagne remains accessible as text on white; the exact VM gold is
     reserved for fills, strokes and text on plum/black surfaces. */
  --kx-gentian: #8a672d;
  --kx-gentian-deep: #674716;
  --kx-gentian-bright: #9b7432;
  --kx-gentian-tint: #f5ecdd;
  --kx-gentian-ice: var(--bx-champagne);
  --kx-gentian-14: rgba(211, 173, 104, .18);
  --kx-gentian-28: rgba(211, 173, 104, .34);

  --kx-live: #c12e43;
  --kx-live-tint: #fae9ed;
  --kx-rise: #087f5b;
  --kx-rise-tint: #dff4ec;
  --kx-fall: #b42337;
  --kx-fall-tint: #f9e3e6;
  --kx-suspend: #737983;
  --kx-suspend-bg: #e8e9ec;
  --kx-suspend-veil: rgba(238, 241, 244, .72);

  /* Back/lay are an exchange convention and match VM Exchange exactly. */
  --bf-back: #72bbef;
  --bf-back-hov: #58ace8;
  --bf-back-2: #a9d5f3;
  --bf-back-3: #d7ecfa;
  --bf-back-press: #459edc;
  --bf-lay: #faa9ba;
  --bf-lay-hov: #f38ea4;
  --bf-lay-2: #fac8d3;
  --bf-lay-3: #fde4ea;
  --bf-lay-press: #eb7c96;
  --bf-ink: #141b25;
  --bf-ink-soft: rgba(20, 27, 37, .65);

  --kx-sans: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --kx-cond: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --kx-r-card: 5px;
  --kx-e1: 0 1px 2px rgba(20, 27, 37, .07), 0 0 0 1px var(--kx-line);
  --kx-e2: 0 4px 14px rgba(56, 49, 64, .12), 0 0 0 1px var(--kx-line);
  --kx-e3: 0 18px 46px rgba(20, 16, 24, .24);

  --k-void: var(--kx-firn);
  --k-void-85: rgba(238, 241, 244, .88);
  --k-basalt: var(--kx-snow);
  --k-basalt-hi: var(--kx-drift);
  --k-gold: var(--kx-gentian);
  --k-gold-high: var(--kx-gentian-bright);
  --k-gold-deep: var(--kx-gentian-deep);
  --k-gold-06: var(--kx-drift);
  --k-gold-12: var(--kx-gentian-tint);
  --k-gold-25: var(--kx-gentian-14);
  --k-gold-45: var(--kx-gentian-28);
  --k-snow: var(--kx-text);
  --k-stone: var(--kx-slate);
  --k-stone-dim: var(--kx-mist);
  --k-ruby: var(--kx-live);
  --k-ruby-hi: var(--kx-live);
  --k-lapis: var(--bf-back);
  --k-lapis-hi: #286c9d;
  --k-crystal: var(--kx-ice);
}

html,
body,
.kx-app { background: var(--bx-page); color: var(--bx-text); }

::selection { background: var(--bx-champagne); color: var(--bx-black); }
:focus-visible { outline-color: var(--bx-champagne); }

/* Brand chrome */
.kx-appbar {
  border-bottom-color: rgba(211, 173, 104, .44);
  background: var(--bx-plum);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .18);
}

.kx-appbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bx-champagne), transparent);
  opacity: .5;
  pointer-events: none;
}

.kx-appbar__brandmark {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28), 0 0 18px rgba(211, 173, 104, .08);
}

.kx-appbar__brandmark img { width: 32px; height: 32px; }
.kx-appbar__brand .k-wordmark {
  color: #f5dfaa;
  font-family: var(--kx-cond);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: .095em;
  line-height: .82;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(211, 173, 104, .08);
}
.kx-appbar__brand .k-wordmark em {
  display: block;
  margin-top: 4px;
  color: #e8e2ea;
  font-size: .46em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .32em;
}

.kx-tab { color: #d7d0da; }
.kx-tab:hover,
.kx-tab.is-active,
.kx-tab[aria-current="page"] { color: #fff; border-bottom-color: var(--bx-champagne); }
.kx-tab__badge { background: var(--bx-champagne); color: var(--bx-black); }

.kx-search,
.kx-lang,
.kx-user,
.kx-avatar { border-color: rgba(255, 255, 255, .17); background: rgba(0, 0, 0, .16); }
.kx-search__input,
.kx-search__ico,
.kx-search__clear { color: #fff; }
.kx-search__input::placeholder { color: rgba(255, 255, 255, .62); }

.kx-place,
.kx-btn-deposit,
.kxa-cta,
.kc-cta {
  border-color: var(--bx-champagne-deep);
  background: linear-gradient(180deg, var(--bx-champagne-hot), var(--bx-champagne));
  color: var(--bx-black);
  text-shadow: none;
  box-shadow: inset 0 1px rgba(255, 255, 255, .38);
}
.kx-place:hover,
.kx-btn-deposit:hover,
.kxa-cta:hover,
.kc-cta:hover { background: var(--bx-champagne-hot); color: var(--bx-black); }

/* Sports navigation and exchange */
.kx-filter { border-bottom-color: #222; background: var(--bx-black); }
.kx-filter .kx-chip {
  border-color: #514958;
  background: #1d1920;
  color: #ded8e1;
}
.kx-filter .kx-chip .kx-chip__n { color: #bdb5c1; }
.kx-filter .kx-chip:hover,
.kx-filter .kx-chip.is-active {
  border-color: var(--bx-champagne);
  background: var(--bx-plum);
  color: #fff;
}
.kx-filter .kx-chip:hover .kx-chip__n,
.kx-filter .kx-chip.is-active .kx-chip__n { color: #f4dfa8; }
.kx-filter .kx-chip--live:hover,
.kx-filter .kx-chip--live.is-active {
  border-color: #e25164;
  background: #3c2027;
  color: #ffb9c3;
}
.kx-filter .kx-chip.is-active::after { background: var(--bx-champagne); }

.kx-nav { border-right-color: var(--bx-line); background: #dedfe2; }
.kx-nav__title { background: var(--bx-plum); color: #fff; }
.kx-nav__item { border-bottom-color: #c7c9cd; color: #29242e; }
.kx-nav__item:hover { background: #f0edf2; }
.kx-nav__item.is-active { border-left-color: var(--bx-champagne-deep); background: #fff; color: var(--bx-plum); }
.kx-nav__item.is-active .kx-nav__n { background: var(--bx-plum); color: #fff; }

.kx-comp-head,
.kx-group__head,
.kx-market__head { background: var(--bx-black); }
.kx-comp-head:hover,
.kx-group__head:hover { background: var(--bx-plum); }
.kx-comp-head .kx-node,
.kx-group.is-open > .kx-group__head .kx-node { background: var(--bx-champagne); }

.kx-market,
.kx-panel,
.kx-livecard,
.kx-slip { border-color: var(--bx-line); border-radius: 4px; background: #fff; }
.kx-crow:hover,
.kx-fancyrow:hover { background: #f6f4f7; }
.kx-market__minmax,
.kx-market__matched { color: #d8d0dc; }

.kx-livecard.is-active { border-color: var(--bx-plum); box-shadow: 0 0 0 1px var(--bx-plum); }
.kx-event__head,
.kx-scoreboard,
.kx-stream__head { background: var(--bx-plum); }

.kx-suspveil {
  border: 1px solid rgba(56, 49, 64, .22);
  background: rgba(238, 241, 244, .9);
  color: var(--bx-plum);
  letter-spacing: .08em;
}
.kx-suspveil--ball { background: rgba(245, 236, 221, .94); color: #674716; }

/* Betslip: a compact plum ticket with the same placement contract. */
.kx-slip { box-shadow: 0 7px 22px rgba(56, 49, 64, .12); }
.kx-slip__head { border-bottom-color: rgba(211, 173, 104, .32); background: var(--bx-plum); }
.kx-slip__count { background: var(--bx-champagne); color: var(--bx-black); }
.kx-slip__collapse { color: var(--bx-champagne); }
.kx-slip__tab.is-active { color: var(--bx-plum); border-bottom-color: var(--bx-champagne-deep); }
.kx-oneclick.is-active,
.kx-quick:hover,
.kx-amount.is-active { background: #f5ecdd; color: #674716; }
.kx-slip__foot { border-top-color: var(--bx-line); background: #f5f3f6; }
.kx-slipbar { border-top-color: var(--bx-champagne); background: var(--bx-plum); color: #fff; }
.kx-slipbar__count { background: var(--bx-champagne); color: var(--bx-black); }

/* Account and money screens */
.kxa-acct,
.kxa-panel,
.kxa-modal,
.kx-modal { border-color: var(--bx-line); background: #fff; }
.kxa-ledger,
.kxa-modal__head,
.kxa-idcard { background: var(--bx-plum); color: #fff; }
.kxa-stat__lab,
.kxa-idcard__sub,
.kxa-idcard__since { color: #d9d2dc; }
.kxa-stat__val,
.kxa-modal__title { color: var(--bx-champagne); }
.kxa-tab.is-active { color: var(--bx-plum); border-bottom-color: var(--bx-champagne-deep); }
.kxa-input:focus { border-color: var(--bx-champagne-deep); box-shadow: 0 0 0 3px rgba(211, 173, 104, .18); }

/* Casino lobby and the four owned game surfaces. Game art remains Wynbook's. */
.kc-switch { border-bottom-color: var(--bx-line); background: #fff; }
.kc-switch__tab { color: var(--bx-muted); }
.kc-switch__tab:hover,
.kc-switch__tab.is-active { color: var(--bx-plum); border-bottom-color: var(--bx-champagne); }
.kc-screen { background: var(--bx-page); }
.kc-gamehead,
.kc-lhead { border-color: rgba(211, 173, 104, .26); background: var(--bx-plum); color: #fff; }
.kc-gamehead__name,
.kc-lhead__name { color: #fff; }
.kc-gamehead__name em,
.kc-gamehead__meta b,
.kc-lhead__n { color: var(--bx-champagne); }
.kc-toolbar,
.kc-ctl,
.kc-avside,
.kc-phase,
.kc-feltbox { border-color: var(--bx-line); background: #fff; }
.kc-pot {
  border-color: rgba(211, 173, 104, .48);
  background: linear-gradient(115deg, var(--bx-black), var(--bx-plum));
}
.kc-pot__lab,
.kc-pot__amt { color: var(--bx-champagne); }
.kc-arch,
.kc-tile {
  border-color: rgba(211, 173, 104, .3);
  background: linear-gradient(145deg, #211c24, #09080a 62%);
  color: #fff;
  box-shadow: 0 7px 20px rgba(20, 16, 24, .2);
}
.kc-arch:hover,
.kc-tile:hover { border-color: var(--bx-champagne); box-shadow: 0 12px 27px rgba(20, 16, 24, .28); }
.kc-arch__name,
.kc-tile__name { color: #fff; }
.kc-arch__kind,
.kc-tile__kind,
.kc-tile__stakes { color: #bfb7c3; }
.kc-arch__stat b,
.kc-tile__glyph { color: var(--bx-champagne); }
.kc-stage,
.kc-boardbox,
.kc-gaugebox,
.kc-wheelbox { border-color: rgba(211, 173, 104, .28); background: #0b090c; }

@media (max-width: 940px) {
  .kx-appbar { min-height: 50px; }
  .kx-appbar__brandmark { width: 28px; height: 28px; }
  .kx-appbar__brandmark img { width: 28px; height: 28px; }
  .kx-appbar__brand .k-wordmark { font-size: .86rem; letter-spacing: .07em; }
  .kx-appbar__brand .k-wordmark em { font-size: .47em; letter-spacing: .23em; }
  .kx-bottomnav { border-top-color: rgba(211, 173, 104, .34); background: var(--bx-plum); }
  .kx-bnav { color: #cfc8d2; }
  .kx-bnav.is-active,
  .kx-bnav:hover { color: var(--bx-champagne); }
  .kx-bnav.is-active::before { background: var(--bx-champagne); }
  .kx-market,
  .kx-panel,
  .kx-slip { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kx-appbar::after { opacity: .35; }
}