/*
   BULLS EXCHANGE — "TRADING FLOOR" TENANT SKIN
   ---------------------------------------------------------------------------
   The exchange engine, dimensions, markets and states are shared with Wynbook.
   This file changes presentation only.

   Thesis: the product is a live market, so the design is a professional trading
   terminal that happens to be beautiful. Light canvas, plum-black chrome, one
   champagne accent, hairlines instead of shadows, and the Betfair back/lay pair
   left at full strength because they are the product.

   Spec: docs/design/bulls-premium-light.md
*/

:root {
  color-scheme: light;

  /* Surfaces */
  --bx-canvas: #f1f3f6;
  --bx-panel: #ffffff;
  --bx-panel-2: #f7f8fa;
  --bx-raised: #edeff3;
  --bx-line: #e3e6ec;
  --bx-line-2: #cfd5de;
  --bx-chrome: #17131d;
  --bx-chrome-2: #241e2c;
  --bx-chrome-line: rgba(255, 255, 255, .1);

  /* Ink */
  --bx-ink: #12141a;
  --bx-ink-2: #555b69;
  --bx-ink-3: #626875;   /* AA on every surface it lands on: white 5.6, canvas 5.0, raised 4.9 */
  --bx-on-chrome: #f4f2f6;
  --bx-on-chrome-2: #b3abbc;

  /* Brand + state */
  --bx-plum: #383140;
  --bx-gold: #946a24;
  --bx-gold-on-dark: #d3ad68;
  --bx-gold-cta: #c79441;
  --bx-gold-cta-hi: #d9a955;
  --bx-live: #d91e42;
  --bx-rise: #0c7c55;
  --bx-fall: #c22239;
  --bx-focus: #2c6fd6;

  /* Radius + elevation */
  --r-panel: 10px;
  --r-card: 8px;
  --r-cell: 6px;
  --r-chip: 6px;
  --r-pill: 999px;
  --e-sheet: 0 -8px 32px rgba(15, 17, 22, .16);
  --e-modal: 0 24px 64px rgba(15, 17, 22, .24);
  --e-pop: 0 8px 24px rgba(15, 17, 22, .14);

  /* ---- Base-stylesheet aliases: remap the shared engine to the new skin ---- */
  --kx-firn: var(--bx-canvas);
  --kx-snow: var(--bx-panel);
  --kx-drift: var(--bx-panel-2);
  --kx-ice: var(--bx-raised);
  --kx-line: var(--bx-line);
  --kx-line-2: var(--bx-line-2);

  --kx-ink: var(--bx-chrome);
  --kx-ink-2: var(--bx-chrome-2);
  --kx-ink-3: #0e0b12;
  --kx-ink-line: var(--bx-chrome-line);
  --kx-on-ink: var(--bx-on-chrome);
  --kx-on-ink-2: var(--bx-on-chrome-2);

  --kx-text: var(--bx-ink);
  --kx-slate: var(--bx-ink-2);
  --kx-mist: var(--bx-ink-3);

  --kx-gentian: var(--bx-gold);
  --kx-gentian-deep: #7d5a20;
  --kx-gentian-bright: var(--bx-gold-cta);
  --kx-gentian-tint: #f6efe2;
  --kx-gentian-ice: var(--bx-gold-on-dark);
  --kx-gentian-14: rgba(148, 106, 36, .16);
  --kx-gentian-28: rgba(148, 106, 36, .3);

  --kx-live: var(--bx-live);
  --kx-live-tint: #fdeaee;
  --kx-rise: var(--bx-rise);
  --kx-rise-tint: #e4f4ed;
  --kx-fall: var(--bx-fall);
  --kx-fall-tint: #fbe8ea;
  --kx-suspend: var(--bx-ink-3);
  --kx-suspend-bg: var(--bx-raised);
  --kx-suspend-veil: rgba(241, 243, 246, .82);

  /* Exchange cells — an exchange convention, never restyled. */
  --bf-back: #72bbef;
  --bf-back-hov: #8fcbf3;
  --bf-back-2: #a9d5f3;
  --bf-back-3: #d7ecfa;
  --bf-back-press: #4fa6e2;
  --bf-lay: #faa9ba;
  --bf-lay-hov: #ffc0cd;
  --bf-lay-2: #fac8d3;
  --bf-lay-3: #fde4ea;
  --bf-lay-press: #ef8da3;
  --bf-ink: #0e1116;
  --bf-ink-soft: rgba(14, 17, 22, .66);

  --kx-sans: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --kx-cond: "IBM Plex Sans Condensed", "IBM Plex Sans", "Arial Narrow", sans-serif;
  --kx-r-card: var(--r-card);
  --kx-e1: 0 0 0 1px var(--bx-line);
  --kx-e2: 0 0 0 1px var(--bx-line);
  --kx-e3: var(--e-pop);

  --k-void: var(--bx-canvas);
  --k-void-85: rgba(241, 243, 246, .9);
  --k-basalt: var(--bx-panel);
  --k-basalt-hi: var(--bx-panel-2);
  --k-gold: var(--bx-gold);
  --k-gold-high: var(--bx-gold-cta);
  --k-gold-deep: #7d5a20;
  --k-gold-06: var(--bx-panel-2);
  --k-gold-12: var(--bx-line);
  --k-gold-25: var(--kx-gentian-14);
  --k-gold-45: var(--kx-gentian-28);
  --k-snow: var(--bx-ink);
  --k-stone: var(--bx-ink-2);
  --k-stone-dim: var(--bx-ink-3);
  --k-ruby: var(--bx-live);
  --k-ruby-hi: var(--bx-live);
  --k-lapis: var(--bf-back);
  --k-lapis-hi: #2f7fb8;
  --k-crystal: var(--bx-raised);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html,
body,
.kx-app {
  background: var(--bx-canvas);
  color: var(--bx-ink);
  font-family: var(--kx-sans);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

::selection { background: var(--kx-gentian-14); color: var(--bx-ink); }

:focus-visible {
  outline: 3px solid var(--bx-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.k-fig,
.kx-odds__p,
.kx-odds__d { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.kx-appbar {
  min-height: 52px;
  border-bottom: 0;
  background: linear-gradient(180deg, #241e2c, #17131d);
  box-shadow: none;
  overflow: hidden;
}
/* Brand texture, not a picture: the arena grain sits at 5% under the chrome. */
.kx-appbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/v2/texture-arena.webp") center / cover;
  opacity: .05;
  pointer-events: none;
}
/* The emblem is the brand's presence in the shell, not decoration on content. */
.kx-appbar::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: -18px;
  width: 132px;
  height: 132px;
  transform: translateY(-50%);
  background: url("../assets/v2/bull-emblem.webp") center / contain no-repeat;
  opacity: .09;
  pointer-events: none;
}
.kx-appbar > * { position: relative; z-index: 1; }
@media (max-width: 560px) { .kx-appbar::after { display: none; } }
.kx-appbar__primary { min-height: 52px; gap: 10px; }

.kx-appbar__brand { gap: 9px; }
.kx-appbar__brandmark {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
}
.kx-appbar__brandmark img { width: 30px; height: 30px; }

.kx-appbar__brand .k-wordmark {
  color: var(--bx-on-chrome);
  font-family: var(--kx-cond);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;
}
.kx-appbar__brand .k-wordmark em {
  display: block;
  margin-top: 3px;
  color: var(--bx-on-chrome-2);
  font-family: var(--kx-cond);
  font-size: .58em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .28em;
}

.kx-appbar__tabs { gap: 2px; }
.kx-tab {
  color: var(--bx-on-chrome-2);
  font-family: var(--kx-cond);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  border-bottom: 2px solid transparent;
}
.kx-tab:hover { color: var(--bx-on-chrome); border-bottom-color: transparent; }
.kx-tab.is-active,
.kx-tab[aria-current="page"] {
  color: var(--bx-on-chrome);
  border-bottom-color: var(--bx-gold-on-dark);
}
.kx-tab__badge {
  border-radius: var(--r-chip);
  background: var(--bx-gold-on-dark);
  color: var(--bx-chrome);
  font-family: var(--kx-cond);
  font-weight: 700;
}

/* Search, language, session controls share one 34px chrome-control shape. */
.kx-search,
.kx-lang__trigger,
.kx-search-mobtrig,
.kx-user,
.kx-avatar {
  min-height: 34px;
  border: 1px solid var(--bx-chrome-line);
  border-radius: var(--r-cell);
  background: var(--bx-chrome-2);
  color: var(--bx-on-chrome);
  box-shadow: none;
}
.kx-search { padding-inline: 8px; }
.kx-search__input,
.kx-search__ico,
.kx-search__clear { color: var(--bx-on-chrome); font-size: .82rem; }
.kx-search__input::placeholder { color: var(--bx-on-chrome-2); }
.kx-search-mobtrig { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.kx-lang__trigger { padding-inline: 9px; font-family: var(--kx-cond); font-size: .74rem; font-weight: 700; letter-spacing: .08em; }
.kx-lang__panel,
.kx-search__panel {
  border: 1px solid var(--bx-line);
  border-radius: var(--r-card);
  background: var(--bx-panel);
  color: var(--bx-ink);
  box-shadow: var(--e-pop);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.kx-place,
.kx-btn-deposit,
.kxa-cta,
.kc-cta {
  border: 1px solid transparent;
  border-radius: var(--r-cell);
  background: var(--bx-gold-cta);
  color: #17131d;
  font-family: var(--kx-cond);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: none;
  transition: background .12s linear;
}
.kx-place:hover,
.kx-btn-deposit:hover,
.kxa-cta:hover,
.kc-cta:hover { background: var(--bx-gold-cta-hi); }
.kx-btn-deposit { min-height: 34px; padding-inline: 12px; }

.kxa-btn-signin {
  min-height: 34px;
  padding-inline: 12px;
  border: 1px solid var(--bx-chrome-line);
  border-radius: var(--r-cell);
  background: transparent;
  color: var(--bx-on-chrome);
  font-family: var(--kx-cond);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kxa-btn-signin:hover { background: var(--bx-chrome-2); }

/* --------------------------------------------------------------------------
   Sport rail
   -------------------------------------------------------------------------- */
.kx-filter {
  min-height: 46px;
  border-bottom: 1px solid rgba(211, 173, 104, .3);
  background: linear-gradient(180deg, #17131d, #14111a);
  padding-inline: 4px;
}
.kx-filter .kx-chip {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bx-on-chrome-2);
  font-family: var(--kx-cond);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  position: relative;
}
.kx-filter .kx-chip .kx-chip__n {
  color: var(--bx-on-chrome-2);
  font-size: .72rem;
  font-weight: 500;
}
.kx-filter .kx-chip .kx-sport-ico { width: 17px; height: 17px; background-color: var(--sport-accent, currentColor); opacity: .9; }
.kx-filter .kx-chip:hover { background: rgba(255, 255, 255, .06); color: var(--bx-on-chrome); }
.kx-filter .kx-chip.is-active {
  background: transparent;
  color: var(--bx-on-chrome);
}
.kx-filter .kx-chip.is-active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  background: var(--bx-gold-on-dark);
  border-radius: 2px 2px 0 0;
}
.kx-filter .kx-chip.is-active .kx-chip__n { color: var(--bx-gold-on-dark); }
.kx-filter .kx-chip.is-active .kx-sport-ico { opacity: 1; }
.kx-filter .kx-chip--live { color: var(--bx-on-chrome); }
.kx-filter .kx-chip--live .kx-chip__n { color: #ff6b83; font-weight: 700; }
.kx-filter .kx-chip--live:hover,
.kx-filter .kx-chip--live.is-active { background: rgba(255, 255, 255, .06); color: var(--bx-on-chrome); }
.kx-filter .kx-chip--live.is-active::after { background: #ff6b83; }
.k-live__dot { background: var(--bx-live); }

/* --------------------------------------------------------------------------
   Competition rail (desktop) + shell
   -------------------------------------------------------------------------- */
.kx-nav {
  border-right: 1px solid var(--bx-line);
  background: var(--bx-panel);
}
.kx-nav__title {
  background: var(--bx-panel-2);
  border-bottom: 1px solid var(--bx-line);
  color: var(--bx-ink-3);
  font-family: var(--kx-cond);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kx-nav__item {
  border-bottom: 1px solid var(--bx-line);
  color: var(--bx-ink-2);
  font-size: .82rem;
}
.kx-nav__item:hover { background: var(--bx-panel-2); color: var(--bx-ink); }
.kx-nav__item.is-active {
  border-left: 2px solid var(--bx-gold);
  background: var(--bx-panel-2);
  color: var(--bx-ink);
  font-weight: 600;
}
.kx-nav__n,
.kx-nav__item.is-active .kx-nav__n {
  border-radius: var(--r-chip);
  background: var(--bx-raised);
  color: var(--bx-ink-2);
  font-family: var(--kx-cond);
  font-size: .7rem;
}

/* --------------------------------------------------------------------------
   Panels + market chrome
   -------------------------------------------------------------------------- */
.kx-panel,
.kx-market,
.kx-livecard,
.kx-slip {
  border: 1px solid var(--bx-line);
  border-radius: var(--r-card);
  background: var(--bx-panel);
  box-shadow: none;
}
.kx-crow:hover,
.kx-fancyrow:hover { background: var(--bx-panel-2); }
.kx-market__minmax,
.kx-market__matched { color: var(--bx-ink-3); font-family: var(--kx-cond); font-size: .7rem; }

.kx-comp-head,
.kx-group__head,
.kx-market__head {
  min-height: 40px;
  border-bottom: 1px solid var(--bx-line);
  background: var(--bx-panel-2);
  color: var(--bx-ink);
}
.kx-comp-head:hover,
.kx-group__head:hover { background: var(--bx-raised); }
.kx-comp-head .kx-node,
.kx-group__head .kx-node {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--bx-gold);
  box-shadow: none;
  transform: none;
}
.kx-serif-label,
.kx-comp-head h2,
.kx-group__name {
  color: var(--bx-ink);
  font-family: var(--kx-cond);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.kx-comp-head__n,
.kx-group__meta {
  border-radius: var(--r-chip);
  background: var(--bx-raised);
  color: var(--bx-ink-2);
  font-family: var(--kx-cond);
  font-size: .7rem;
  font-weight: 600;
}

.kx-suspveil {
  border: 1px solid var(--bx-line);
  background: var(--kx-suspend-veil);
  color: var(--bx-ink-2);
  font-family: var(--kx-cond);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.kx-suspveil--ball { background: rgba(246, 239, 226, .92); color: #7d5a20; }

/* --------------------------------------------------------------------------
   Betslip
   -------------------------------------------------------------------------- */
.kx-slip {
  border-color: var(--bx-line);
  box-shadow: none;
}
.kx-slip__head,
.kx-slip__head .kx-slip__title {
  color: var(--bx-ink);
}
.kx-slip__head {
  min-height: 44px;
  border-bottom: 1px solid var(--bx-line);
  background: var(--bx-panel-2);
  font-family: var(--kx-cond);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kx-slip__count {
  border-radius: var(--r-chip);
  background: var(--bx-ink);
  color: var(--bx-panel);
  font-family: var(--kx-cond);
  font-weight: 700;
}
.kx-slip__collapse { color: var(--bx-ink-2); }
.kx-slip__tab {
  color: var(--bx-ink-3);
  font-family: var(--kx-cond);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.kx-slip__tab.is-active { color: var(--bx-ink); border-bottom-color: var(--bx-gold); }
.kx-oneclick.is-active,
.kx-quick:hover,
.kx-amount.is-active {
  border-color: var(--kx-gentian-28);
  background: var(--kx-gentian-tint);
  color: #7d5a20;
}
.kx-slip__foot { border-top: 1px solid var(--bx-line); background: var(--bx-panel-2); }

.kx-slipbar {
  min-height: 52px;
  border-top: 1px solid var(--bx-chrome-line);
  background: var(--bx-chrome);
  color: var(--bx-on-chrome);
}
.kx-slipbar__count {
  border-radius: var(--r-chip);
  background: var(--bx-gold-on-dark);
  color: var(--bx-chrome);
  font-family: var(--kx-cond);
  font-weight: 700;
}
.kx-slipbar__t { font-family: var(--kx-cond); font-size: .8rem; font-weight: 600; letter-spacing: .04em; }
.kx-slipbar__s { color: var(--bx-on-chrome-2); font-size: .72rem; }

/* --------------------------------------------------------------------------
   Account + money
   -------------------------------------------------------------------------- */
.kxa-acct,
.kxa-panel,
.kxa-modal,
.kx-modal {
  border: 1px solid var(--bx-line);
  border-radius: var(--r-panel);
  background: var(--bx-panel);
  box-shadow: none;
}
.kx-modal,
.kxa-modal { box-shadow: var(--e-modal); }
.kxa-ledger,
.kxa-modal__head {
  background: var(--bx-panel-2);
  border-bottom: 1px solid var(--bx-line);
  color: var(--bx-ink);
}
.kxa-idcard {
  border: 1px solid var(--bx-chrome-line);
  background: var(--bx-chrome);
  color: var(--bx-on-chrome);
}
.kxa-stat__lab,
.kxa-idcard__sub,
.kxa-idcard__since { color: var(--bx-on-chrome-2); font-family: var(--kx-cond); }
.kxa-stat__val {
  color: var(--bx-ink);
  font-family: var(--kx-cond);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kxa-idcard .kxa-stat__val { color: var(--bx-gold-on-dark); }
.kxa-modal__title { color: var(--bx-ink); font-weight: 600; }
.kxa-tab {
  color: var(--bx-ink-3);
  font-family: var(--kx-cond);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.kxa-tab.is-active { color: var(--bx-ink); border-bottom-color: var(--bx-gold); }
.kxa-input,
.kx-input,
input[type="text"].kxa-input,
input[type="number"].kxa-input {
  min-height: 44px;
  border: 1px solid var(--bx-line);
  border-radius: var(--r-cell);
  background: var(--bx-panel);
  color: var(--bx-ink);
  font-size: .88rem;
}
.kxa-input:focus,
.kx-input:focus {
  border-color: var(--bx-focus);
  box-shadow: 0 0 0 3px rgba(44, 111, 214, .18);
  outline: none;
}
.kxa-label { color: var(--bx-ink-2); font-family: var(--kx-cond); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Bottom nav (mobile) + compact chrome
   -------------------------------------------------------------------------- */
@media (max-width: 940px) {
  .kx-appbar { min-height: 52px; }
  .kx-appbar__primary { min-height: 52px; }
  .kx-appbar__brandmark img { width: 28px; height: 28px; }
  .kx-appbar__brand .k-wordmark { font-size: .78rem; letter-spacing: .09em; }
  .kx-appbar__brand .k-wordmark em { font-size: .55em; letter-spacing: .24em; }

  .kx-bottomnav {
    border-top: 1px solid var(--bx-chrome-line);
    background: var(--bx-chrome);
  }
  .kx-bnav {
    color: var(--bx-on-chrome-2);
    font-family: var(--kx-cond);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .kx-bnav.is-active,
  .kx-bnav:hover { color: var(--bx-on-chrome); }
  .kx-bnav.is-active::before { background: var(--bx-gold-on-dark); }
  .kx-bnav__badge {
    background: var(--bx-live);
    color: #fff;
    font-family: var(--kx-cond);
    font-weight: 700;
  }
}

/* --------------------------------------------------------------------------
   Toasts, mobile search, dialogs
   -------------------------------------------------------------------------- */
.k365-toasts {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
  top: auto;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: max-content;
  max-width: min(92vw, 420px);
  padding: 0;
  pointer-events: none;
}
.k365-toasts > * {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--bx-chrome-line);
  border-radius: var(--r-pill);
  background: var(--bx-chrome);
  color: var(--bx-on-chrome);
  font-size: .82rem;
  font-weight: 500;
  box-shadow: var(--e-pop);
  animation: bx-toast-in .16s ease-out;
}
@keyframes bx-toast-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.kx-msearch { background: var(--bx-canvas); }
.kx-msearch__bar {
  border-bottom: 1px solid var(--bx-line);
  background: var(--bx-panel);
}
.kx-msearch__input {
  min-height: 44px;
  color: var(--bx-ink);
  font-size: .95rem;
}
.kx-msearch__input::placeholder { color: var(--bx-ink-3); }
.kx-msearch__cancel {
  color: var(--bx-ink-2);
  font-family: var(--kx-cond);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Casino — the sportsbook floor is light; the casino is its night counterpart
   (this mirrors wynbook, whose casino is a separate dark room). The lobby lives
   in bulls-casino-v2.css; this block carries the shared chrome and the game
   screens so every casino surface reads as one room.
   -------------------------------------------------------------------------- */
.k365-casino-mode .kx-app,
.k365-casino-mode .kc-screen { background: #0f0d13; color: #f4f2f6; }

.kc-switch {
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: #14111a;
}
.kc-switch__tab {
  color: #a9a2b2;
  font-family: var(--kx-cond);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.kc-switch__tab:hover { color: #f4f2f6; }
.kc-switch__tab.is-active { color: #f4f2f6; border-bottom-color: var(--bx-gold-on-dark); }

.k365-casino-mode .kc-gamehead,
.k365-casino-mode .kc-lhead,
.k365-casino-mode .kc-ctl,
.k365-casino-mode .kc-avside,
.k365-casino-mode .kc-phase,
.k365-casino-mode .kc-recent,
.k365-casino-mode .kc-roundlog {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r-card);
  background: #17141c;
  color: #f4f2f6;
}
.k365-casino-mode .kc-gamehead__name,
.k365-casino-mode .kc-lhead__name { color: #f4f2f6; }
.k365-casino-mode .kc-gamehead__name em,
.k365-casino-mode .kc-gamehead__meta b,
.k365-casino-mode .kc-lhead__n,
.k365-casino-mode .kc-stat__val { color: var(--bx-gold-on-dark); }
.k365-casino-mode .kc-ctl__lab,
.k365-casino-mode .kc-stat__lab,
.k365-casino-mode .kc-hist__lab { color: #a9a2b2; }

/* The felt is the game: table surfaces stay the deepest layer. */
.k365-casino-mode .kc-stage,
.k365-casino-mode .kc-boardbox,
.k365-casino-mode .kc-gaugebox,
.k365-casino-mode .kc-wheelbox,
.k365-casino-mode .kc-feltbox {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-card);
  background: #0b0910;
}
.k365-casino-mode .kc-pot {
  border: 1px solid rgba(211, 173, 104, .28);
  border-radius: var(--r-card);
  background: #17141c;
}
.k365-casino-mode .kc-pot__lab { color: #a9a2b2; }
.k365-casino-mode .kc-pot__amt { color: var(--bx-gold-on-dark); font-variant-numeric: tabular-nums; }
.k365-casino-mode .kc-cta {
  background: var(--bx-gold-cta);
  color: #17131d;
}
.k365-casino-mode .kc-cta:hover { background: var(--bx-gold-cta-hi); }
.k365-casino-mode .k365-input,
.k365-casino-mode .kc-search {
  border-color: rgba(255, 255, 255, .12);
  background: #201b28;
  color: #f4f2f6;
}

/* --------------------------------------------------------------------------
   Motion discipline
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Runtime scaffolding — auth, account stubs, toasts, dialogs.
   These selectors are also declared inline in app.html, so they are scoped to
   body.k365-runtime here to win on specificity rather than by source order.
   -------------------------------------------------------------------------- */
body.k365-runtime .k365-screen {
  min-height: 0;
  max-width: 480px;
  margin: 24px auto;
  padding: 24px 20px 28px;
  border: 1px solid var(--bx-line);
  border-radius: var(--r-panel);
  background: var(--bx-panel);
}
body.k365-runtime .k365-screen__head { gap: 6px; }
body.k365-runtime .k365-screen .k-eyebrow,
body.k365-runtime .k365-screen .k-kicker {
  color: var(--bx-ink-3);
  font-family: var(--kx-cond);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.k365-runtime .k365-screen .k-title {
  margin: 0;
  color: var(--bx-ink);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.015em;
}
body.k365-runtime .k365-screen .k-lede { margin: 0; color: var(--bx-ink-2); font-size: .9rem; line-height: 1.5; }
body.k365-runtime .k365-screen__actions { margin-top: 18px; gap: 10px; }

body.k365-runtime .k365-form {
  gap: 14px;
  max-width: none;
  margin-top: 20px;
  padding: 0;
  border: 0;
  background: none;
}
body.k365-runtime .k365-form label,
body.k365-runtime .k365-stake-label {
  gap: 6px;
  color: var(--bx-ink-2);
  font-family: var(--kx-cond);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.k365-runtime .k365-input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--bx-line);
  border-radius: var(--r-cell);
  background: var(--bx-panel);
  color: var(--bx-ink);
  font-family: var(--kx-sans);
  font-size: .9rem;
  letter-spacing: normal;
  text-transform: none;
}
body.k365-runtime .k365-input:focus {
  border-color: var(--bx-focus);
  box-shadow: 0 0 0 3px rgba(44, 111, 214, .18);
  outline: none;
}
body.k365-runtime .k365-form__foot { color: var(--bx-ink-2); font-size: .82rem; }
body.k365-runtime .k365-account-summary { background: var(--bx-line); border: 1px solid var(--bx-line); border-radius: var(--r-card); overflow: hidden; }
body.k365-runtime .k365-account-summary div { background: var(--bx-panel); }
body.k365-runtime .k365-account-summary dt { color: var(--bx-ink-2); }
body.k365-runtime .k365-account-summary dd { color: var(--bx-ink); font-variant-numeric: tabular-nums; }

/* Buttons — the kailash base ships a blue/gold gradient; replace it outright. */
.k-btn {
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-cell);
  font-family: var(--kx-cond);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  transition: background-color .12s linear, border-color .12s linear;
}
.k-btn--gold {
  border-color: transparent;
  background: var(--bx-gold-cta);
  color: #17131d;
  box-shadow: none;
}
.k-btn--gold:hover { background: var(--bx-gold-cta-hi); filter: none; transform: none; box-shadow: none; }
.k-btn--gold:active { filter: none; transform: none; }
.k-btn--ghost {
  border-color: var(--bx-line);
  background: var(--bx-panel);
  color: var(--bx-ink);
}
.k-btn--ghost:hover { border-color: var(--bx-line-2); background: var(--bx-panel-2); }

body.k365-runtime .k365-count {
  border-radius: var(--r-chip);
  background: var(--bx-ink);
  color: var(--bx-panel);
  font-family: var(--kx-cond);
}
body.k365-runtime .k365-flag {
  border: 1px solid var(--bx-line);
  border-radius: var(--r-chip);
  background: var(--bx-panel);
  color: var(--bx-ink-2);
  font-family: var(--kx-cond);
}
body.k365-runtime .k365-flag--danger { border-color: var(--bx-fall); color: var(--bx-fall); }

/* Toast: one pill, bottom centre, above the nav. */
body.k365-runtime .k365-toasts {
  top: auto;
  right: auto;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(92vw, 420px);
}
body.k365-runtime .k365-toast {
  padding: 11px 16px;
  border: 1px solid var(--bx-chrome-line);
  border-radius: var(--r-pill);
  background: var(--bx-chrome);
  color: var(--bx-on-chrome);
  font-size: .84rem;
  box-shadow: var(--e-pop);
}
body.k365-runtime .k365-toast--success { border-color: rgba(211, 173, 104, .5); }
body.k365-runtime .k365-toast--error { border-color: var(--bx-fall); }
body.k365-runtime .k365-toast.is-leaving { transform: translateY(4px); }

body.k365-runtime .k365-modal,
body.k365-runtime .kx-runtime-dialog {
  border: 1px solid var(--bx-line);
  border-radius: var(--r-panel);
  background: var(--bx-panel);
  color: var(--bx-ink);
  box-shadow: var(--e-modal);
}
body.k365-runtime .k365-modal::backdrop,
body.k365-runtime .kx-runtime-dialog::backdrop {
  background: rgba(18, 20, 26, .55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.k365-runtime .k365-modal__body,
body.k365-runtime .kx-runtime-modal-copy { color: var(--bx-ink-2); }

@media (min-width: 941px) {
  body.k365-runtime .k365-screen { margin: 32px auto; padding: 32px 28px 36px; }
}

/* --------------------------------------------------------------------------
   Auth + account modals
   -------------------------------------------------------------------------- */
.kxa-modal__sub { color: var(--bx-ink-2); }
/* The shared runtime prints a decorative line-and-diamond above modal titles.
   Bulls shows its own mark there instead. */
.kxa-crest {
  width: 34px;
  height: 34px;
  background: url("../assets/bulls-mark.svg") center / contain no-repeat;
}
.kxa-crest__line,
.kxa-crest__node { display: none; }
.kxa-modal__x {
  width: 32px;
  height: 32px;
  border-radius: var(--r-chip);
  color: var(--bx-ink-3);
  background: transparent;
}
.kxa-modal__x:hover { background: var(--bx-raised); color: var(--bx-ink); }
.kxa-modal__foot { border-top: 1px solid var(--bx-line); background: var(--bx-panel-2); }

/* --------------------------------------------------------------------------
   Spot illustrations
   One generated line-art set, shipped as currentColor CSS masks so a single
   asset is correct on the light floor and in the dark casino, and so the art
   can never drift off-palette.
   -------------------------------------------------------------------------- */
.bx-spot {
  display: block;
  width: 76px;
  height: 76px;
  background: currentColor;
  color: var(--bx-ink-3);
  opacity: .48;
  -webkit-mask: var(--bx-spot) center / contain no-repeat;
  mask: var(--bx-spot) center / contain no-repeat;
}
.bx-spot[data-spot="betslip"] { --bx-spot: url("../assets/spot/empty-betslip.webp"); }
.bx-spot[data-spot="favourites"] { --bx-spot: url("../assets/spot/empty-favourites.webp"); }
.bx-spot[data-spot="search"] { --bx-spot: url("../assets/spot/empty-search.webp"); }
".bx-spot[data-spot="signpost"] { --bx-spot: url("../assets/spot/error-404.webp"); }
.bx-spot[data-spot="deposit"] { --bx-spot: url("../assets/spot/deposit.webp"); }
.bx-spot[data-spot="withdraw"] { --bx-spot: url("../assets/spot/withdraw.webp"); }
.bx-spot[data-spot="kyc"] { --bx-spot: url("../assets/spot/kyc.webp"); }
.bx-spot[data-spot="offline"] { --bx-spot: url("../assets/spot/error-offline.webp"); }
.bx-spot--screen { width: 92px; height: 92px; margin-bottom: 18px; }

/* The runtime prints screen content after the header; the mark belongs above it. */
body.k365-runtime .k365-screen { display: flex; flex-direction: column; }
body.k365-runtime .k365-screen > .bx-spot--screen { order: -1; }

/* --------------------------------------------------------------------------
   Live Casino dock — the sticky band above the tab bar
   ---------------------------------------------------------------------------
   wynbook's `.cas-dock` reskinned (tenants mirror this promo). Reading bottom
   to top: the shipped roulette still bleeds in from the RIGHT; the muted loop
   of the wheel between spins is masked over it so motion never reaches the
   type; a left-weighted plum scrim keeps the copy on solid chrome; the
   champagne ENTER pill sits over the darkest part of the art. The whole
   surface is the tap target, the pill is the affordance, and the only other
   motion is the live dot.
   -------------------------------------------------------------------------- */
.bx-cas-dock {
  --cas-plum: #241a2d;
  --cas-plum-deep: #120d17;
  --cas-brass: 211, 173, 104;
  position: fixed;
  z-index: 140;
  left: max(8px, env(safe-area-inset-left, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: calc(56px + 8px + env(safe-area-inset-bottom, 0px));
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  border: 1px solid rgba(var(--cas-brass), .34);
  border-radius: 14px;
  background: var(--cas-plum-deep);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  isolation: isolate;
  overflow: hidden;
  contain: layout paint;
}
.bx-cas-dock[hidden] { display: none; }

/* the still — back layer, right-anchored */
.bx-cas-dock__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: center right / cover no-repeat url("../assets/art/casino-table.webp"), var(--cas-plum-deep);
  pointer-events: none;
}
/* The wheel is the live element: an original top-down plate, turned by CSS at a
   pace that reads as "between spins". A rotating still is seamless by
   definition — no video, no decode, nothing to hydrate. */
.bx-cas-dock__wheel {
  position: absolute;
  /* Under the scrim: the wheel belongs to the table art, not to the controls,
     so the ENTER pill always sits on clean ground above it. */
  z-index: 1;
  top: 50%;
  right: -12px;
  width: 104px;
  height: 104px;
  margin-top: -52px;
  border: 5px solid #c7a35e;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #d7bd80 0 8%, #5a1022 8.5% 14%, transparent 14.5%),
    radial-gradient(circle at center, transparent 0 54%, rgba(218, 188, 124, .9) 54.5% 58%, transparent 58.5%),
    repeating-conic-gradient(from -4.86deg, #7f1730 0 9.73deg, #17131a 9.73deg 19.46deg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .42), inset 0 0 0 2px rgba(255, 255, 255, .14);
  pointer-events: none;
  animation: bx-cas-spin 26s linear infinite;
}
.bx-cas-dock.is-paused .bx-cas-dock__wheel { animation-play-state: paused; }
@keyframes bx-cas-spin { to { transform: rotate(360deg); } }
/* legibility scrim (left-weighted) + table vignette — over art, under content */
.bx-cas-dock::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, transparent 30%, transparent 68%, rgba(0, 0, 0, .4) 100%),
    linear-gradient(90deg, rgba(18, 13, 23, .98) 0%, rgba(18, 13, 23, .96) 30%, rgba(18, 13, 23, .78) 48%, rgba(18, 13, 23, .2) 70%, rgba(18, 13, 23, .1) 86%, rgba(18, 13, 23, .5) 100%);
}
.bx-cas-dock__hit { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.bx-cas-dock__mark,
.bx-cas-dock__copy { position: relative; z-index: 4; pointer-events: none; }

/* medallion — a ceramic chip: champagne rim, plum face, edge spots */
.bx-cas-dock__mark {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--cas-brass), .85);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #3a2c46 0%, var(--cas-plum) 58%, #150f1b 100%);
  color: var(--bx-gold-on-dark);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .05), inset 0 -4px 8px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .45);
}
.bx-cas-dock__mark::before {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(var(--cas-brass), .6) 0 6deg, transparent 6deg 60deg);
  -webkit-mask: radial-gradient(circle, transparent 13px, #000 13px, #000 16px, transparent 16px);
  mask: radial-gradient(circle, transparent 13px, #000 13px, #000 16px, transparent 16px);
}

.bx-cas-dock__copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.bx-cas-dock__copy > b {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #f7f5f9;
  font-family: var(--kx-cond);
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}
.bx-cas-dock__copy small {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: rgba(244, 242, 246, .72);
  font-size: .69rem;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}
.bx-cas-dock__copy small > span { overflow: hidden; text-overflow: ellipsis; }
/* On the narrowest phones the meta line keeps the two things that must be
   there — who deals, and 18+ — and drops the rest rather than ellipsing it. */
@media (max-width: 412px) {
  .bx-cas-dock__plr,
  .bx-cas-dock__rule--plr { display: none; }
}
.bx-cas-dock__copy small b { color: #f7f5f9; font-weight: 700; font-style: normal; }
.bx-cas-dock__rule { flex: none; color: rgba(244, 242, 246, .38); }
.bx-cas-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff7a90;
  box-shadow: 0 0 0 3px rgba(255, 122, 144, .26);
  font-style: normal;
}

.bx-cas-dock__pause {
  position: relative;
  z-index: 5;
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(12, 8, 16, .78);
  color: rgba(244, 242, 246, .78);
}
.bx-cas-dock__pause:hover { color: #f7f5f9; border-color: rgba(var(--cas-brass), .5); }

.bx-cas-dock__open {
  position: relative;
  z-index: 5;
  flex: none;
  min-width: 78px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  border-radius: 9px;
  background: var(--bx-gold-cta);
  color: #17131d;
  font-family: var(--kx-cond);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(18, 13, 23, .55), 0 3px 10px rgba(0, 0, 0, .4);
}
.bx-cas-dock__open:hover { background: var(--bx-gold-cta-hi); }

/* the board must be able to scroll clear of the band */
body:has(#k365-cas-dock:not([hidden])) .kx-main { padding-bottom: 96px; }

@media (prefers-reduced-motion: reduce) {
  .bx-cas-dock__wheel { animation: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .bx-cas-dot { animation: bx-cas-pulse 1.6s ease-in-out infinite; }
  .bx-cas-dock:active { transform: scale(.995); }
}
@keyframes bx-cas-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* Desktop has no tab bar: the band becomes a corner card. */
@media (min-width: 941px) {
  .bx-cas-dock {
    left: auto;
    right: 20px;
    bottom: 20px;
    width: 360px;
    min-height: 72px;
  }
  body:has(#k365-cas-dock:not([hidden])) .kx-main { padding-bottom: 40px; }
}