/*
 * BB-15 / I05-STATES — the icon state system.
 *
 * Every rule is scoped under the template attribute, so an icon rendered
 * outside a Bluebet surface gets no Bluebet styling at all.
 *
 * The states are the ones I05 lists: default, hover, active, focus, disabled,
 * loading and error. `disabled` deliberately changes OPACITY AND CURSOR, not
 * only colour — I05 says explicitly that disabled must not be the only cue for
 * an unavailable action, and a low-contrast grey that a colourblind reader
 * cannot separate from muted text is exactly that failure.
 */

[data-bb-template='bluebet-v1'] .bbt-icon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
  color: inherit;
}

/* Hover and active are driven by the PARENT control, never by the glyph
   itself, so an icon inside a disabled button cannot light up. */
[data-bb-template='bluebet-v1'] .bbt-icon--hover {
  color: var(--bbt-cyan);
}

[data-bb-template='bluebet-v1'] .bbt-icon--active {
  color: var(--bbt-cyan);
}

[data-bb-template='bluebet-v1'] .bbt-icon--focus {
  color: var(--bbt-cyan);
}

[data-bb-template='bluebet-v1'] .bbt-icon--disabled {
  color: var(--bbt-text-muted);
  opacity: 0.55;
}

[data-bb-template='bluebet-v1'] .bbt-icon--error {
  color: var(--bbt-negative-text);
}

[data-bb-template='bluebet-v1'] .bbt-icon--loading {
  color: var(--bbt-cyan);
  animation: bbt-icon-spin 900ms linear infinite;
}

/* Keyframe identifiers are document-global even when the consuming selector
   is scoped. Keep every template-owned animation on the unique `bbt-` prefix. */
@keyframes bbt-icon-spin {
  to {
    transform: rotate(360deg);
  }
}

/* The accessibility baseline asks that motion respects a reduced-motion
   preference and that legibility never depends on the animation. A spinner
   that stops still has to read as "busy", so it pulses opacity instead of
   freezing into an ordinary static glyph. */
@media (prefers-reduced-motion: reduce) {
  [data-bb-template='bluebet-v1'] .bbt-icon--loading {
    animation: bbt-icon-pulse 1.6s ease-in-out infinite;
  }

  @keyframes bbt-icon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
  }
}

/* ---- Icon-only control ------------------------------------------- */

[data-bb-template='bluebet-v1'] .bbt-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The accessibility baseline asks for touch targets that are reliable and
     spaced away from high-value actions. The glyph can be 14px; the target
     never is. */
  min-inline-size: var(--bbt-touch-target-min);
  min-block-size: var(--bbt-touch-target-min);
  padding: var(--bbt-space-2);
  border: 0;
  border-radius: var(--bbt-radius-sm);
  background: transparent;
  color: var(--bbt-text);
  cursor: pointer;
}

[data-bb-template='bluebet-v1'] .bbt-icon-button:hover:not(:disabled) {
  color: var(--bbt-cyan);
  background: var(--bbt-cyan-08);
}

[data-bb-template='bluebet-v1'] .bbt-icon-button:focus-visible {
  outline: var(--bbt-focus-width) solid var(--bbt-focus-ring);
  outline-offset: var(--bbt-focus-offset);
}

[data-bb-template='bluebet-v1'] .bbt-icon-button:disabled {
  color: var(--bbt-text-muted);
  opacity: 0.55;
  cursor: not-allowed;
}

/* The reason an unavailable control is unavailable. Visually attached to the
   control it explains; never display:none, because a screen reader cannot
   read what is not rendered. */
[data-bb-template='bluebet-v1'] .bbt-icon-button__reason {
  display: block;
  -webkit-margin-before: var(--bbt-space-1);
          margin-block-start: var(--bbt-space-1);
  color: var(--bbt-text-muted);
  font-family: var(--bbt-font-content);
  font-size: 12px;
  line-height: 1.4;
}

/*
 * Global component styles.
 *
 * Everything is scoped under `[data-bb-template='bluebet-v1']` and every value
 * is a `--bbt-` token. The gate fails on a raw hex or a raw font stack here.
 *
 * RESPONSIVE POSITION
 *
 * The two breakpoints are 768px and 1200px, declared as tokens and repeated
 * as literals in the media queries below because CSS custom properties cannot
 * be used in a media condition. `scripts/bluebet-template.check.js` asserts
 * the literals match the tokens, so the two cannot drift.
 *
 * There is no tablet or mobile reference anywhere in the source document —
 * DEW C03 records that, and the build handoff asks for these variants to be
 * flagged as PROPOSED rather than presented as source-provided. Every
 * decision below the desktop breakpoint is this build's proposal and is
 * listed in `proposals.ts` for owner approval.
 */

/* ================================================================== *
 * Shell
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-shell {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  background: var(--bbt-bg);
  color: var(--bbt-text);
}

[data-bb-template='bluebet-v1'] .bbt-shell__body {
  display: flex;
  flex: 1 1 auto;
  min-block-size: 0;
}

[data-bb-template='bluebet-v1'] .bbt-shell__main {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: var(--bbt-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-10);
}

/* ================================================================== *
 * Header
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-header {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-4);
  min-block-size: var(--bbt-header-height);
  padding-inline: var(--bbt-space-4);
  background: var(--bbt-bg);
  -webkit-border-after: var(--bbt-border-hairline) solid var(--bbt-divider);
          border-block-end: var(--bbt-border-hairline) solid var(--bbt-divider);
  position: -webkit-sticky;
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
}

/*
 * Both header groups must be able to SHRINK.
 *
 * `flex: 0 0 auto` on the logo group plus a fixed-width cluster overflowed the
 * viewport by 2px at 375px, which made the whole page body scroll sideways —
 * measured in the browser, not inferred. A flex item defaults to
 * `min-width: auto`, so it refuses to shrink below its content even when the
 * row has run out of room; `min-inline-size: 0` is what lets it give way.
 */
[data-bb-template='bluebet-v1'] .bbt-header__start {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-2);
  flex: 0 1 auto;
  min-inline-size: 0;
}

[data-bb-template='bluebet-v1'] .bbt-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--bbt-space-2);
  color: var(--bbt-text);
  text-decoration: none;
}

[data-bb-template='bluebet-v1'] .bbt-header__logo-mark {
  inline-size: 26px;
  block-size: 26px;
  border-radius: var(--bbt-radius-sm);
  background: linear-gradient(135deg, var(--bbt-cyan) 0%, var(--bbt-blue) 100%);
}

[data-bb-template='bluebet-v1'] .bbt-header__logo-text {
  font-family: var(--bbt-font-display);
  font-size: 26px;
  letter-spacing: 0.04em;
  /* The brand word is the first thing allowed to give way when the row is
     tight. It truncates rather than pushing the balance off screen. */
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-bb-template='bluebet-v1'] .bbt-header__nav {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  justify-content: center;
}

[data-bb-template='bluebet-v1'] .bbt-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-bb-template='bluebet-v1'] .bbt-header__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--bbt-space-2);
  min-block-size: var(--bbt-touch-target-min);
  padding-inline: var(--bbt-space-2);
  color: var(--bbt-text);
  text-decoration: none;
  white-space: nowrap;
  -webkit-border-after: var(--bbt-border-accent) solid transparent;
          border-block-end: var(--bbt-border-accent) solid transparent;
}

/* I08-ACTIVE — an underline AND the cyan. Remove the colour and the bar
   still says which tab is current. */
[data-bb-template='bluebet-v1'] .bbt-header__tab.is-active {
  color: var(--bbt-cyan);
  border-block-end-color: var(--bbt-cyan);
}

[data-bb-template='bluebet-v1'] .bbt-header__cluster {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-3);
  flex: 0 1 auto;
  min-inline-size: 0;
}

/* S07's seam requirement: a narrow width must not make the cluster overlap the
   tabs. It cannot overlap now because it shrinks instead, and the balance is
   the last thing to give way. */
[data-bb-template='bluebet-v1'] .bbt-header__balance {
  min-inline-size: 0;
}

[data-bb-template='bluebet-v1'] .bbt-button.bbt-header__access {
  min-block-size: 40px;
  padding-inline: var(--bbt-space-6);
}

/* §1.7 P7 — the balance sits INSIDE a subtle dark frame and is bold white,
   contained rather than giant. */
[data-bb-template='bluebet-v1'] .bbt-header__balance {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-2);
  margin: 0;
  padding: var(--bbt-space-2) var(--bbt-space-4);
  background: var(--bbt-surface);
  border: var(--bbt-border-hairline) solid var(--bbt-cyan-30);
  border-radius: var(--bbt-radius-md);
  white-space: nowrap;
}

[data-bb-template='bluebet-v1'] .bbt-header__balance-label {
  font-size: 12px;
  color: var(--bbt-text-muted);
}

[data-bb-template='bluebet-v1'] .bbt-header__balance-amount {
  font-size: 17px;
}

/* §1.7 P6/P7 — glassmorphic profile pill. */
[data-bb-template='bluebet-v1'] .bbt-header__profile {
  display: inline-flex;
  align-items: center;
  gap: var(--bbt-space-1);
  min-block-size: var(--bbt-touch-target-min);
  padding: var(--bbt-space-1) var(--bbt-space-3);
  background: var(--bbt-glass);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: var(--bbt-border-hairline) solid var(--bbt-cyan-30);
  border-radius: var(--bbt-radius-pill);
  color: var(--bbt-text);
  cursor: pointer;
}

[data-bb-template='bluebet-v1'] .bbt-header__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  background: var(--bbt-surface-raised);
  border: var(--bbt-border-hairline) solid var(--bbt-cyan-30);
}

/* ================================================================== *
 * Sidebar
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-sidebar {
  flex: 0 0 var(--bbt-sidebar-width);
  inline-size: var(--bbt-sidebar-width);
  padding: var(--bbt-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-6);
  -webkit-border-end: var(--bbt-border-hairline) solid var(--bbt-divider);
          border-inline-end: var(--bbt-border-hairline) solid var(--bbt-divider);
  overflow-y: auto;
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__scrim {
  display: none;
}

/* §1.6 — INVITA Y GANA, blue gradient, above everything. */
[data-bb-template='bluebet-v1'] .bbt-sidebar__invite {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-1);
  padding: var(--bbt-space-4);
  border-radius: var(--bbt-radius-lg);
  background: linear-gradient(135deg, var(--bbt-blue) 0%, var(--bbt-blue-active) 100%);
  color: var(--bbt-text);
  text-decoration: none;
  overflow: hidden;
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__invite-title {
  font-size: 22px;
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__invite-body {
  font-size: 13px;
  max-inline-size: 22ch;
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__invite .bbt-icon {
  position: absolute;
  inset-block-start: var(--bbt-space-3);
  inset-inline-end: var(--bbt-space-3);
  opacity: 0.9;
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__group-title {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-2);
  margin: 0 0 var(--bbt-space-3);
  font-size: 15px;
  color: var(--bbt-text);
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__winner-list,
[data-bb-template='bluebet-v1'] .bbt-sidebar__list,
[data-bb-template='bluebet-v1'] .bbt-sidebar__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__winner-list {
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-2);
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__winner {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-3);
  padding: var(--bbt-space-2);
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
  border-radius: var(--bbt-radius-md);
  background: var(--bbt-surface);
}

/* §1.7 P1 — 2px cyan border on the winner thumbnails. */
[data-bb-template='bluebet-v1'] .bbt-sidebar__winner-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  flex: 0 0 auto;
  overflow: hidden;
  border: var(--bbt-border-accent) solid var(--bbt-cyan);
  border-radius: var(--bbt-radius-sm);
  background: var(--bbt-surface-raised);
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__winner-thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__winner-thumb-fallback {
  font-family: var(--bbt-font-display);
  font-size: 18px;
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__winner-body {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__winner-user {
  font-size: 13px;
  color: var(--bbt-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* §1.7 P1 — subtle cyan, NORMAL weight. Not a giant bold number. */
[data-bb-template='bluebet-v1'] .bbt-sidebar__winner-amount {
  font-weight: 400;
  font-size: 14px;
  color: var(--bbt-cyan);
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__winner-game {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__winners-state {
  margin: 0;
  color: var(--bbt-text-muted);
  font-size: 13px;
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__item,
[data-bb-template='bluebet-v1'] .bbt-sidebar__subitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--bbt-space-3);
  inline-size: 100%;
  min-block-size: var(--bbt-touch-target-min);
  padding-inline: var(--bbt-space-3);
  border: 0;
  border-radius: var(--bbt-radius-sm);
  background: transparent;
  color: var(--bbt-text);
  text-decoration: none;
  text-align: start;
  cursor: pointer;
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__item:hover,
[data-bb-template='bluebet-v1'] .bbt-sidebar__subitem:hover {
  background: var(--bbt-cyan-06);
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__item.is-active,
[data-bb-template='bluebet-v1'] .bbt-sidebar__subitem.is-active,
[data-bb-template='bluebet-v1'] .bbt-sidebar__item.is-active-parent {
  color: var(--bbt-cyan);
  background: var(--bbt-cyan-08);
}

/* The brand's language control.
   It moved into the shell when the shell took over the chrome: the CMS sidebar
   that used to carry it no longer renders on a live Bluebet route, and a repair
   that removed the reader's only way to change language would not be a repair.
   Styled from the same tokens as every sibling control so it reads as part of
   the sidebar rather than as a transplant. */
[data-bb-template='bluebet-v1'] .bbt-sidebar__language {
  padding-inline: var(--bbt-space-3);
  padding-block: var(--bbt-space-3);
  -webkit-border-before: var(--bbt-border-hairline) solid var(--bbt-divider);
          border-block-start: var(--bbt-border-hairline) solid var(--bbt-divider);
  -webkit-margin-before: var(--bbt-space-4);
          margin-block-start: var(--bbt-space-4);
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__language select {
  inline-size: 100%;
  min-block-size: var(--bbt-touch-target-min);
  padding-inline: var(--bbt-space-3);
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
  border-radius: var(--bbt-radius-md);
  background: var(--bbt-surface);
  color: var(--bbt-text);
  font-family: var(--bbt-font-content);
  font-size: 14px;
  cursor: pointer;
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__language select:focus-visible {
  outline: 2px solid var(--bbt-focus-ring);
  outline-offset: 2px;
}

/* The active edge marker is a glyph pinned to the leading edge, so the cue
   survives losing every colour. */
[data-bb-template='bluebet-v1'] .bbt-sidebar__marker {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--bbt-cyan);
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__group {
  justify-content: flex-start;
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__group .bbt-icon:last-child {
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}

[data-bb-template='bluebet-v1'] .bbt-sidebar__sublist {
  -webkit-padding-start: var(--bbt-space-5);
          padding-inline-start: var(--bbt-space-5);
}

/* ================================================================== *
 * Filter bar — Screen 3, canonical for the whole application
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-filter-bar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: var(--bbt-space-4);
  gap: var(--bbt-space-4);
  align-items: end;
}

[data-bb-template='bluebet-v1'] .bbt-filter-bar__control {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-1);
  min-inline-size: 0;
}

/* §1.7 P3 — small uppercase label in light grey above, selected value below
   in bold white. */
[data-bb-template='bluebet-v1'] .bbt-filter-bar__label {
  font-family: var(--bbt-font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bbt-text-muted);
}

[data-bb-template='bluebet-v1'] .bbt-filter-bar__value {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-3);
  inline-size: 100%;
  min-block-size: var(--bbt-touch-target-min);
  padding-inline: var(--bbt-space-4);
  background: var(--bbt-surface);
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
  border-radius: var(--bbt-radius-md);
  color: var(--bbt-text);
  cursor: pointer;
}

[data-bb-template='bluebet-v1'] .bbt-filter-bar__trigger {
  justify-content: space-between;
}

[data-bb-template='bluebet-v1'] .bbt-filter-bar__selected {
  font-family: var(--bbt-font-content);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-bb-template='bluebet-v1'] .bbt-filter-bar__input,
[data-bb-template='bluebet-v1'] .bbt-filter-bar__select {
  flex: 1 1 auto;
  min-inline-size: 0;
  background: transparent;
  border: 0;
  color: var(--bbt-text);
  font-family: var(--bbt-font-content);
  font-weight: 700;
  font-size: 15px;
}

[data-bb-template='bluebet-v1'] .bbt-filter-bar__input:focus,
[data-bb-template='bluebet-v1'] .bbt-filter-bar__select:focus {
  outline: none;
}

[data-bb-template='bluebet-v1'] .bbt-filter-bar__input::placeholder {
  color: var(--bbt-text-muted);
  font-weight: 400;
}

/* §1.7 P3 — dim backdrop behind the open dropdown. */
[data-bb-template='bluebet-v1'] .bbt-filter-bar__backdrop {
  position: fixed;
  inset: 0;
  background: var(--bbt-scrim);
  z-index: 40;
}

/* §1.7 P3 — cyan top border on the panel. */
[data-bb-template='bluebet-v1'] .bbt-filter-bar__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--bbt-space-2));
  inset-inline: 0;
  z-index: 41;
  max-block-size: 320px;
  overflow-y: auto;
  background: var(--bbt-surface);
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
  -webkit-border-before: var(--bbt-border-accent) solid var(--bbt-cyan);
          border-block-start: var(--bbt-border-accent) solid var(--bbt-cyan);
  border-radius: var(--bbt-radius-md);
  box-shadow: var(--bbt-elevation-2);
}

[data-bb-template='bluebet-v1'] .bbt-filter-bar__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-bb-template='bluebet-v1'] .bbt-filter-bar__row {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-3);
  inline-size: 100%;
  min-block-size: var(--bbt-touch-target-min);
  padding-inline: var(--bbt-space-4);
  border: 0;
  -webkit-border-after: var(--bbt-border-hairline) solid var(--bbt-divider);
          border-block-end: var(--bbt-border-hairline) solid var(--bbt-divider);
  background: transparent;
  color: var(--bbt-text);
  text-align: start;
  cursor: pointer;
}

[data-bb-template='bluebet-v1'] .bbt-filter-bar__row:hover {
  background: var(--bbt-cyan-06);
}

[data-bb-template='bluebet-v1'] .bbt-filter-bar__row.is-selected {
  color: var(--bbt-cyan);
}

[data-bb-template='bluebet-v1'] .bbt-filter-bar__row-name {
  flex: 1 1 auto;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  /* S03's negative case names a long provider name. It ellipsises rather than
     pushing the check mark out of the row. */
  white-space: nowrap;
}

[data-bb-template='bluebet-v1'] .bbt-filter-bar__row-icon {
  display: inline-flex;
  inline-size: 32px;
  justify-content: center;
}

/* ================================================================== *
 * Game card
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-game-card {
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-2);
  min-inline-size: 0;
}

[data-bb-template='bluebet-v1'] .bbt-game-card__art {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--bbt-radius-md);
  background: var(--bbt-surface);
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
}

[data-bb-template='bluebet-v1'] .bbt-game-card__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

[data-bb-template='bluebet-v1'] .bbt-game-card__image-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bbt-font-display);
  font-size: 32px;
  color: var(--bbt-text-muted);
}

/* §1.6 — dark overlay with a centred blue JUGAR.
   C11 — hover is not enough. `:focus-within` covers the keyboard, and
   `.is-touch-active` covers the tap. All three reveal the same overlay. */
[data-bb-template='bluebet-v1'] .bbt-game-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bbt-space-2);
  padding: var(--bbt-space-3);
  background: var(--bbt-card-hover-overlay);
  opacity: 0;
  transition: opacity 140ms ease;
}

[data-bb-template='bluebet-v1'] .bbt-game-card:hover .bbt-game-card__overlay,
[data-bb-template='bluebet-v1'] .bbt-game-card:focus-within .bbt-game-card__overlay,
[data-bb-template='bluebet-v1'] .bbt-game-card.is-touch-active .bbt-game-card__overlay {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-bb-template='bluebet-v1'] .bbt-game-card__overlay {
    transition: none;
  }
}

[data-bb-template='bluebet-v1'] .bbt-game-card__corner {
  position: absolute;
  inset-block-start: var(--bbt-space-1);
  inset-inline-end: var(--bbt-space-1);
}

[data-bb-template='bluebet-v1'] .bbt-game-card__foot {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-1);
  min-inline-size: 0;
}

[data-bb-template='bluebet-v1'] .bbt-game-card__name {
  margin: 0;
  flex: 1 1 auto;
  min-inline-size: 0;
  font-family: var(--bbt-font-content);
  font-weight: 400;
  font-size: 14px;
  /* S01's negative case names a long game name. Two lines, then clamp — the
     name is never the only meaning, because the provider is beneath it. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-bb-template='bluebet-v1'] .bbt-game-card__provider {
  margin: 0;
  font-size: 12px;
}

/* ================================================================== *
 * Modal
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bbt-space-4);
}

[data-bb-template='bluebet-v1'] .bbt-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--bbt-scrim);
}

/* §1.7 P2/P9 — 1px cyan border with a very subtle outer glow. §1.7 P6 is
   explicit that it must not shout, so the glow token is deliberately weak. */
[data-bb-template='bluebet-v1'] .bbt-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  max-inline-size: 100%;
  max-block-size: 100%;
  overflow: auto;
  background: var(--bbt-surface);
  border: var(--bbt-border-hairline) solid var(--bbt-cyan);
  border-radius: var(--bbt-radius-lg);
  box-shadow: var(--bbt-elevation-3), var(--bbt-glow-subtle);
}

[data-bb-template='bluebet-v1'] .bbt-modal__panel--auth {
  inline-size: 860px;
}

[data-bb-template='bluebet-v1'] .bbt-modal__panel--confirm {
  inline-size: 440px;
  flex-direction: column;
}

[data-bb-template='bluebet-v1'] .bbt-modal__visual {
  flex: 0 0 45%;
  background: linear-gradient(160deg, var(--bbt-blue-active) 0%, var(--bbt-bg) 100%);
}

[data-bb-template='bluebet-v1'] .bbt-modal__content {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-4);
  padding: var(--bbt-space-6);
}

[data-bb-template='bluebet-v1'] .bbt-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bbt-space-4);
}

[data-bb-template='bluebet-v1'] .bbt-modal__title {
  margin: 0;
  font-family: var(--bbt-font-content);
  font-weight: 700;
  font-size: 21px;
}

[data-bb-template='bluebet-v1'] .bbt-modal__description {
  margin: 0;
  color: var(--bbt-text-muted);
  font-size: 14px;
}

/* ================================================================== *
 * Auth modal
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-auth__artwork {
  block-size: 100%;
  min-block-size: 420px;
  background:
    radial-gradient(circle at 30% 30%, var(--bbt-cyan-35) 0%, transparent 55%),
    linear-gradient(160deg, var(--bbt-blue) 0%, var(--bbt-bg) 100%);
}

/* §1.7 P2 — pill tabs; active is a white pill with dark text, inactive is
   transparent with white text. */
[data-bb-template='bluebet-v1'] .bbt-auth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--bbt-space-2);
  gap: var(--bbt-space-2);
}

[data-bb-template='bluebet-v1'] .bbt-auth__tab {
  min-block-size: var(--bbt-touch-target-min);
  padding-inline: var(--bbt-space-4);
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
  border-radius: var(--bbt-radius-pill);
  background: transparent;
  color: var(--bbt-text);
  font-size: 17px;
  cursor: pointer;
}

[data-bb-template='bluebet-v1'] .bbt-auth__tab.is-active {
  background: var(--bbt-text);
  color: var(--bbt-bg);
  border-color: var(--bbt-text);
}

[data-bb-template='bluebet-v1'] .bbt-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-4);
}

[data-bb-template='bluebet-v1'] .bbt-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bbt-space-4);
  flex-wrap: wrap;
}

[data-bb-template='bluebet-v1'] .bbt-auth__checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--bbt-space-2);
  font-size: 14px;
  cursor: pointer;
}

[data-bb-template='bluebet-v1'] .bbt-auth__checkbox input {
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--bbt-cyan);
  flex: 0 0 auto;
}

[data-bb-template='bluebet-v1'] .bbt-auth__link {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--bbt-cyan);
  font-family: var(--bbt-font-content);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

[data-bb-template='bluebet-v1'] .bbt-auth__switch {
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: var(--bbt-text-muted);
}

[data-bb-template='bluebet-v1'] .bbt-auth__error {
  margin: 0;
  display: flex;
  gap: var(--bbt-space-2);
  padding: var(--bbt-space-3);
  border: var(--bbt-border-hairline) solid var(--bbt-negative);
  border-radius: var(--bbt-radius-sm);
  color: var(--bbt-negative-text);
  font-size: 14px;
}

[data-bb-template='bluebet-v1'] .bbt-auth__promo {
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-1);
  padding: var(--bbt-space-4);
  border: var(--bbt-border-hairline) solid var(--bbt-cyan);
  border-radius: var(--bbt-radius-md);
  background: var(--bbt-surface-raised);
}

[data-bb-template='bluebet-v1'] .bbt-auth__promo-kicker {
  margin: 0;
  color: var(--bbt-cyan);
}

[data-bb-template='bluebet-v1'] .bbt-auth__promo-headline {
  margin: 0;
  font-size: 24px;
}

[data-bb-template='bluebet-v1'] .bbt-auth__promo-body {
  margin: 0;
  font-size: 13px;
  color: var(--bbt-text-muted);
}

[data-bb-template='bluebet-v1'] .bbt-auth__collapsible {
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-2);
  align-items: flex-start;
}

[data-bb-template='bluebet-v1'] .bbt-auth__collapsible > div {
  inline-size: 100%;
}

/* ================================================================== *
 * Profile overlay
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-profile__scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
}

[data-bb-template='bluebet-v1'] .bbt-profile {
  position: fixed;
  z-index: 46;
  inset-block-start: calc(var(--bbt-header-height) + var(--bbt-space-2));
  inset-inline-end: var(--bbt-space-4);
  inline-size: var(--bbt-profile-dropdown-width);
  max-block-size: calc(100vh - var(--bbt-header-height) - var(--bbt-space-6));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-3);
  padding: var(--bbt-space-4);
  /* §1.7 P6 — frosted glass, strong blur, translucent navy fill. */
  background: var(--bbt-glass);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: var(--bbt-border-hairline) solid var(--bbt-cyan-30);
  border-radius: var(--bbt-radius-lg);
  box-shadow: var(--bbt-elevation-2), var(--bbt-glow-subtle);
}

/* §1.7 P6 — cyan triangular pointer on the top edge, aimed at the pill. */
[data-bb-template='bluebet-v1'] .bbt-profile__pointer {
  position: absolute;
  inset-block-start: -7px;
  inset-inline-end: var(--bbt-space-6);
  inline-size: 12px;
  block-size: 7px;
  background: var(--bbt-cyan);
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
          clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

[data-bb-template='bluebet-v1'] .bbt-profile__identity {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-3);
}

[data-bb-template='bluebet-v1'] .bbt-profile__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: var(--bbt-surface-raised);
  border: var(--bbt-border-hairline) solid var(--bbt-cyan);
}

[data-bb-template='bluebet-v1'] .bbt-profile__name {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-family: var(--bbt-font-content);
  font-weight: 700;
  /* S06's negative case names a long username. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-bb-template='bluebet-v1'] .bbt-profile__tier {
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-1);
}

[data-bb-template='bluebet-v1'] .bbt-profile__tier-badge {
  align-self: flex-start;
  padding: var(--bbt-space-1) var(--bbt-space-3);
  border: var(--bbt-border-hairline) solid var(--bbt-cyan);
  border-radius: var(--bbt-radius-pill);
  color: var(--bbt-cyan);
}

[data-bb-template='bluebet-v1'] .bbt-profile__tier-bar {
  inline-size: 100%;
  block-size: 6px;
  accent-color: var(--bbt-cyan);
}

[data-bb-template='bluebet-v1'] .bbt-profile__tier-caption {
  font-size: 12px;
  color: var(--bbt-text-muted);
}

[data-bb-template='bluebet-v1'] .bbt-profile__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-1);
}

[data-bb-template='bluebet-v1'] .bbt-profile__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--bbt-space-3);
  min-block-size: var(--bbt-touch-target-min);
  padding-inline: var(--bbt-space-3);
  -webkit-border-start: var(--bbt-border-accent) solid transparent;
          border-inline-start: var(--bbt-border-accent) solid transparent;
  border-radius: var(--bbt-radius-sm);
  color: var(--bbt-text);
  text-decoration: none;
}

[data-bb-template='bluebet-v1'] .bbt-profile__item:hover {
  border-inline-start-color: var(--bbt-cyan);
  background: var(--bbt-cyan-08);
}

[data-bb-template='bluebet-v1'] .bbt-profile__item-label {
  flex: 1 1 auto;
}

[data-bb-template='bluebet-v1'] .bbt-profile__dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--bbt-cyan);
}

[data-bb-template='bluebet-v1'] .bbt-profile__promo {
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-2);
  padding: var(--bbt-space-3);
  border: var(--bbt-border-hairline) solid var(--bbt-cyan-30);
  border-radius: var(--bbt-radius-md);
  background: var(--bbt-surface);
}

[data-bb-template='bluebet-v1'] .bbt-profile__promo-label {
  color: var(--bbt-text-muted);
}

[data-bb-template='bluebet-v1'] .bbt-profile__logout {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-3);
  min-block-size: var(--bbt-touch-target-min);
  padding-inline: var(--bbt-space-3);
  border: 0;
  -webkit-border-before: var(--bbt-border-hairline) solid var(--bbt-divider);
          border-block-start: var(--bbt-border-hairline) solid var(--bbt-divider);
  background: transparent;
  color: var(--bbt-negative-text);
  font-family: var(--bbt-font-content);
  font-size: 15px;
  cursor: pointer;
}

/* ================================================================== *
 * Account tabs
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-account-tabs {
  -webkit-border-after: var(--bbt-border-hairline) solid var(--bbt-divider);
          border-block-end: var(--bbt-border-hairline) solid var(--bbt-divider);
}

[data-bb-template='bluebet-v1'] .bbt-account-tabs__list {
  display: flex;
  gap: var(--bbt-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

[data-bb-template='bluebet-v1'] .bbt-account-tabs__tab {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--bbt-touch-target-min);
  font-size: 17px;
  color: var(--bbt-text-muted);
  text-decoration: none;
  white-space: nowrap;
  /* §1.7 P10 — 2px cyan underline on the active tab. */
  -webkit-border-after: var(--bbt-border-accent) solid transparent;
          border-block-end: var(--bbt-border-accent) solid transparent;
}

[data-bb-template='bluebet-v1'] .bbt-account-tabs__tab.is-active {
  color: var(--bbt-text);
  border-block-end-color: var(--bbt-cyan);
}

/* ================================================================== *
 * Live chat
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-live-chat {
  position: fixed;
  z-index: 50;
  inset-block-end: var(--bbt-space-6);
  inset-inline-end: var(--bbt-space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 56px;
  block-size: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--bbt-blue);
  color: var(--bbt-text);
  box-shadow: var(--bbt-elevation-2);
  cursor: pointer;
}

/* C16 — when the screen already owns that corner, the bubble lifts clear
   instead of covering the control. */
[data-bb-template='bluebet-v1'] .bbt-live-chat[data-bbt-collision-risk='pagination'],
[data-bb-template='bluebet-v1'] .bbt-live-chat[data-bbt-collision-risk='carousel'],
[data-bb-template='bluebet-v1'] .bbt-live-chat[data-bbt-collision-risk='wallet-actions'] {
  inset-block-end: calc(var(--bbt-space-6) + 72px);
}

[data-bb-template='bluebet-v1'] .bbt-live-chat__badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  min-inline-size: 20px;
  block-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bbt-radius-pill);
  background: var(--bbt-cyan);
  color: var(--bbt-bg);
  font-family: var(--bbt-font-content);
  font-weight: 700;
  font-size: 11px;
}

/* ================================================================== *
 * TABLET — below 1200px. PROPOSED: no tablet reference exists.
 * ================================================================== */

@media (max-width: 1199px) {
  /* The exact 768px seam otherwise exceeds the viewport by 2px on anonymous
     screens: the access button is the last rigid item in the header row. */
  [data-bb-template='bluebet-v1'] .bbt-header {
    padding-inline: var(--bbt-space-3);
  }

  [data-bb-template='bluebet-v1'] .bbt-button.bbt-header__access {
    padding-inline: var(--bbt-space-2);
  }

  [data-bb-template='bluebet-v1'] .bbt-sidebar {
    flex-basis: 200px;
    inline-size: 200px;
  }

  [data-bb-template='bluebet-v1'] .bbt-header__nav-list {
    gap: var(--bbt-space-4);
  }

  [data-bb-template='bluebet-v1'] .bbt-modal__panel--auth {
    inline-size: 100%;
    max-inline-size: 720px;
  }

  [data-bb-template='bluebet-v1'] .bbt-filter-bar {
    grid-template-columns: 1fr 1fr;
  }

  [data-bb-template='bluebet-v1'] .bbt-filter-bar__control--search {
    grid-column: 1 / -1;
  }
}

/* ================================================================== *
 * MOBILE — below 768px. PROPOSED: no mobile reference exists.
 * ================================================================== */

@media (max-width: 767px) {
  /* R01's seam requirement: never desktop nav and mobile nav at once. The
     centre nav leaves the header entirely and the sidebar becomes a drawer. */
  [data-bb-template='bluebet-v1'] .bbt-header__nav {
    display: none;
  }

  [data-bb-template='bluebet-v1'] .bbt-header {
    gap: var(--bbt-space-2);
    padding-inline: var(--bbt-space-3);
  }

  [data-bb-template='bluebet-v1'] .bbt-header__gift {
    display: none;
  }

  [data-bb-template='bluebet-v1'] .bbt-header__balance {
    padding: var(--bbt-space-1) var(--bbt-space-2);
  }

  [data-bb-template='bluebet-v1'] .bbt-header__balance-amount {
    font-size: 14px;
  }

  [data-bb-template='bluebet-v1'] .bbt-header__logo-text {
    font-size: 20px;
  }

  [data-bb-template='bluebet-v1'] .bbt-button.bbt-header__access {
    padding-inline: var(--bbt-space-3);
    font-size: 15px;
  }

  /* The sidebar becomes an off-canvas drawer. It is still in the document and
     still keyboard reachable; it is translated off screen, not removed. */
  [data-bb-template='bluebet-v1'] .bbt-sidebar {
    position: fixed;
    z-index: 55;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: min(300px, 84vw);
    flex-basis: auto;
    transform: translateX(-102%);
    transition: transform 180ms ease;
    background: var(--bbt-bg);
  }

  [data-bb-template='bluebet-v1'] .bbt-sidebar.is-open {
    transform: translateX(0);
  }

  [data-bb-template='bluebet-v1'] .bbt-sidebar__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 54;
    background: var(--bbt-scrim);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-bb-template='bluebet-v1'] .bbt-sidebar {
      transition: none;
    }
  }

  [data-bb-template='bluebet-v1'] .bbt-shell__main {
    padding: var(--bbt-space-4);
    gap: var(--bbt-space-8);
  }

  [data-bb-template='bluebet-v1'] .bbt-filter-bar {
    grid-template-columns: 1fr;
  }

  /* R03's seam requirement: an auth modal must never become an unusably
     narrow two-column layout, and submit, terms and close must stay visible.
     The decorative column is dropped and the modal goes full-bleed. */
  [data-bb-template='bluebet-v1'] .bbt-modal {
    padding: 0;
    align-items: stretch;
  }

  [data-bb-template='bluebet-v1'] .bbt-modal__panel {
    inline-size: 100%;
    max-block-size: 100vh;
    border-radius: 0;
    border-inline: 0;
  }

  [data-bb-template='bluebet-v1'] .bbt-modal__visual {
    display: none;
  }

  /* §1.7 P6 — the mobile side panel is retained rather than becoming a
     dropdown. It is the same component; only the geometry changes. */
  [data-bb-template='bluebet-v1'] .bbt-profile {
    inset: 0 0 0 auto;
    inline-size: min(340px, 90vw);
    max-block-size: 100vh;
    border-radius: 0;
    -webkit-border-end: 0;
            border-inline-end: 0;
  }

  [data-bb-template='bluebet-v1'] .bbt-profile__pointer {
    display: none;
  }

  [data-bb-template='bluebet-v1'] .bbt-live-chat {
    inline-size: 48px;
    block-size: 48px;
    inset-block-end: var(--bbt-space-4);
    inset-inline-end: var(--bbt-space-4);
  }
}

/*
 * BB-12 — Bluebet template tokens.
 *
 * READ THIS BEFORE EDITING.
 *
 * Every value below is restated from `tokens.ts`, which is the source of
 * truth. `scripts/bluebet-template.check.js` parses this file and fails if a
 * single declaration disagrees with the TypeScript table, so editing one
 * without the other breaks the build rather than shipping a drift.
 *
 * Nothing here is declared on `:root`, and that is the point. The existing
 * `public/rsd_home_styles/bluebet.css` is loaded as the DEFAULT V1 theme for
 * every non-suertecita frontend domain (src/app/layout.tsx), which is exactly
 * how a Bluebet colour reaches a brand that never asked for one. These tokens
 * live under one attribute selector, so a page that does not carry
 * `data-bb-template="bluebet-v1"` inherits nothing at all.
 *
 * The `--bbt-` prefix is also deliberate. The legacy sheet owns `--bb-`;
 * a separate namespace means the two can coexist without one silently
 * winning over the other.
 */

[data-bb-template='bluebet-v1'] {
  /* ---- Colour ---------------------------------------------------- */
  --bbt-blue: #1556AB;
  --bbt-cyan: #5BD0FF;
  --bbt-bg: #0A1828;
  --bbt-surface: #0F1A2E;
  --bbt-divider: #2A3140;
  --bbt-text: #FFFFFF;
  --bbt-text-muted: #9CA3AF;
  --bbt-success: #22C55E;
  --bbt-warning: #F59E0B;
  --bbt-negative: #E63946;
  --bbt-negative-text: #FF6B75;
  --bbt-blue-hover: #1A6FD4;
  --bbt-blue-active: #0E3D7A;
  --bbt-surface-raised: #152136;
  --bbt-cyan-30: rgba(91, 208, 255, 0.30);
  --bbt-cyan-06: rgba(91, 208, 255, 0.06);
  --bbt-cyan-08: rgba(91, 208, 255, 0.08);
  --bbt-cyan-35: rgba(91, 208, 255, 0.35);
  --bbt-success-16: rgba(34, 197, 94, 0.16);
  --bbt-negative-12: rgba(230, 57, 70, 0.12);
  --bbt-glass: rgba(10, 24, 40, 0.55);
  --bbt-scrim: rgba(4, 10, 18, 0.72);
  --bbt-card-hover-overlay: rgba(4, 10, 18, 0.66);
  --bbt-focus-ring: #5BD0FF;

  /* ---- Typography ------------------------------------------------ *
   * The two families are free on Google Fonts per §1.6, but neither
   * binary is in this repository. Both stacks therefore carry a real
   * fallback so the layout never collapses to a serif default, and the
   * missing files are reported as a blocker for final visual sign-off.
   */
  --bbt-font-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', 'Haettenschweiler', system-ui, sans-serif;
  --bbt-font-content: 'Inter', 'Open Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---- Space (4px scale) ----------------------------------------- */
  --bbt-space-1: 4px;
  --bbt-space-2: 8px;
  --bbt-space-3: 12px;
  --bbt-space-4: 16px;
  --bbt-space-5: 20px;
  --bbt-space-6: 24px;
  --bbt-space-8: 32px;
  --bbt-space-10: 40px;
  --bbt-space-12: 48px;

  /* ---- Radius ---------------------------------------------------- */
  --bbt-radius-sm: 6px;
  --bbt-radius-md: 8px;
  --bbt-radius-lg: 12px;
  --bbt-radius-pill: 999px;

  /* ---- Border ---------------------------------------------------- */
  --bbt-border-hairline: 1px;
  --bbt-border-accent: 2px;
  --bbt-border-dropdown-max: 2px;

  /* ---- Elevation ------------------------------------------------- */
  --bbt-elevation-1: 0 1px 2px rgba(4, 10, 18, 0.45);
  --bbt-elevation-2: 0 8px 24px rgba(4, 10, 18, 0.55);
  --bbt-elevation-3: 0 24px 64px rgba(4, 10, 18, 0.65);
  --bbt-glow-subtle: 0 0 12px rgba(91, 208, 255, 0.18);

  /* ---- Focus ----------------------------------------------------- */
  --bbt-focus-width: 2px;
  --bbt-focus-offset: 2px;

  /* ---- Icon sizing (BB-15 / I04-SIZES) --------------------------- */
  --bbt-icon-status: 14px;
  --bbt-icon-card-label: 16px;
  --bbt-icon-sidebar: 18px;
  --bbt-icon-form: 20px;
  --bbt-icon-nav: 22px;
  --bbt-icon-header: 24px;
  --bbt-icon-feature: 32px;

  /* ---- Breakpoints (recorded, not inferred from the 1400px canvas) */
  --bbt-bp-tablet: 768px;
  --bbt-bp-desktop: 1200px;

  /* ---- Layout ---------------------------------------------------- */
  --bbt-profile-dropdown-width: 280px;
  --bbt-account-heading-size: 24px;
  --bbt-wallet-amount-size: 36px;
  --bbt-card-label-size: 14px;
  --bbt-sidebar-width: 248px;
  --bbt-header-height: 72px;
  --bbt-touch-target-min: 44px;
}

/*
 * NOT DECLARED HERE, ON PURPOSE:
 *
 *   --bbt-section-heading-size    "~60% of the current size"      §1.7 P1
 *   --bbt-live-slider-top-gap     "~60% of the current gap"       §1.7 P5
 *   --bbt-live-slider-bottom-gap  "approximately double"          §1.7 P5
 *
 * Each is stated relative to the live front end and no one has measured the
 * live front end. Sixty percent of an unmeasured number is not a number, and
 * the mockups are AI vision boards that §1.3 forbids measuring. They are
 * listed in `PENDING_BASELINE_TOKENS` and the gate fails if a component ever
 * references one, so an estimate cannot quietly become a token.
 */

/*
 * Bluebet template base — typography roles and the primitives every component
 * builds on.
 *
 * Two rules hold everywhere in this file:
 *
 *  1. Every selector is scoped under `[data-bb-template='bluebet-v1']`. A
 *     brand without that attribute is untouched, which is how "preserve every
 *     non-Bluebet brand" becomes a property of the CSS rather than a promise.
 *
 *  2. No literal colour, font stack or spacing value appears below. Everything
 *     is a `--bbt-` custom property, so the token table is the only place a
 *     value can change. `scripts/bluebet-template.check.js` fails on a raw hex
 *     in any template stylesheet.
 */

/* ------------------------------------------------------------------ *
 * Template root
 * ------------------------------------------------------------------ */

[data-bb-template='bluebet-v1'] {
  background: var(--bbt-bg);
  color: var(--bbt-text);
  font-family: var(--bbt-font-content);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[data-bb-template='bluebet-v1'] *,
[data-bb-template='bluebet-v1'] *::before,
[data-bb-template='bluebet-v1'] *::after {
  box-sizing: border-box;
}

/* One focus treatment for the whole system. The accessibility baseline asks
   for an indicator that stays visible on navy AND on cyan, so it is a solid
   ring with an offset rather than a colour swap. */
[data-bb-template='bluebet-v1'] :focus-visible {
  outline: var(--bbt-focus-width) solid var(--bbt-focus-ring);
  outline-offset: var(--bbt-focus-offset);
  border-radius: var(--bbt-radius-sm);
}

/* Read but not seen. Never `display: none` — a screen reader cannot read what
   is not rendered. */
[data-bb-template='bluebet-v1'] .bbt-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard users need a way past the header and sidebar. */
[data-bb-template='bluebet-v1'] .bbt-skip-link {
  position: absolute;
  inset-block-start: var(--bbt-space-2);
  inset-inline-start: var(--bbt-space-2);
  z-index: 100;
  padding: var(--bbt-space-3) var(--bbt-space-4);
  background: var(--bbt-blue);
  color: var(--bbt-text);
  border-radius: var(--bbt-radius-md);
  transform: translateY(-200%);
}

[data-bb-template='bluebet-v1'] .bbt-skip-link:focus {
  transform: translateY(0);
}

/* ------------------------------------------------------------------ *
 * Typography roles — mg-0823 §1.6, one class per table row
 * ------------------------------------------------------------------ */

[data-bb-template='bluebet-v1'] .bbt-type-button-primary {
  font-family: var(--bbt-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

[data-bb-template='bluebet-v1'] .bbt-type-section-heading {
  font-family: var(--bbt-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-bb-template='bluebet-v1'] .bbt-type-account-subtab {
  font-family: var(--bbt-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-bb-template='bluebet-v1'] .bbt-type-card-label {
  font-family: var(--bbt-font-display);
  font-weight: 400;
  font-size: var(--bbt-card-label-size);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-bb-template='bluebet-v1'] .bbt-type-status-pill {
  font-family: var(--bbt-font-display);
  font-weight: 400;
  font-size: var(--bbt-card-label-size);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

[data-bb-template='bluebet-v1'] .bbt-type-filter-pill {
  font-family: var(--bbt-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-bb-template='bluebet-v1'] .bbt-type-header-tab {
  font-family: var(--bbt-font-content);
  font-weight: 700;
  font-style: italic;
}

[data-bb-template='bluebet-v1'] .bbt-type-sidebar-item {
  font-family: var(--bbt-font-content);
  font-weight: 600;
  font-style: italic;
}

/* §1.6 is explicit that numbers are upright: "los números no van en itálica".
   `font-variant-numeric: tabular-nums` is added so a column of balances lines
   up, which is the whole reason the history table is readable. */
[data-bb-template='bluebet-v1'] .bbt-type-balance {
  font-family: var(--bbt-font-content);
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

[data-bb-template='bluebet-v1'] .bbt-type-page-heading {
  font-family: var(--bbt-font-content);
  font-weight: 700;
  font-style: normal;
  font-size: var(--bbt-account-heading-size);
  line-height: 1.25;
}

[data-bb-template='bluebet-v1'] .bbt-type-casino-submenu {
  font-family: var(--bbt-font-content);
  font-weight: 600;
  font-style: normal;
}

[data-bb-template='bluebet-v1'] .bbt-type-winner-game-name {
  font-family: var(--bbt-font-content);
  font-weight: 200;
  color: var(--bbt-text-muted);
}

[data-bb-template='bluebet-v1'] .bbt-type-body {
  font-family: var(--bbt-font-content);
  font-weight: 400;
}

/* ------------------------------------------------------------------ *
 * Buttons
 * ------------------------------------------------------------------ */

[data-bb-template='bluebet-v1'] .bbt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bbt-space-2);
  min-block-size: var(--bbt-touch-target-min);
  padding: var(--bbt-space-3) var(--bbt-space-5);
  border: var(--bbt-border-hairline) solid transparent;
  border-radius: var(--bbt-radius-md);
  font-family: var(--bbt-font-display);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}

[data-bb-template='bluebet-v1'] .bbt-button--primary {
  background: var(--bbt-blue);
  color: var(--bbt-text);
}

[data-bb-template='bluebet-v1'] .bbt-button--primary:hover:not(:disabled) {
  background: var(--bbt-blue-hover);
}

[data-bb-template='bluebet-v1'] .bbt-button--primary:active:not(:disabled) {
  background: var(--bbt-blue-active);
}

[data-bb-template='bluebet-v1'] .bbt-button--secondary {
  background: transparent;
  border-color: var(--bbt-cyan-30);
  color: var(--bbt-text);
}

[data-bb-template='bluebet-v1'] .bbt-button--secondary:hover:not(:disabled) {
  border-color: var(--bbt-cyan);
}

/* §1.7 P9 leaves the destructive colour as an owner decision, so the
   destructive variant differs from primary by BORDER and LABEL, not by a red
   fill nobody approved. DEW C06 records the open question. */
[data-bb-template='bluebet-v1'] .bbt-button--destructive {
  background: transparent;
  border-color: var(--bbt-negative);
  color: var(--bbt-negative-text);
}

[data-bb-template='bluebet-v1'] .bbt-button--destructive:hover:not(:disabled) {
  background: var(--bbt-negative-12);
}

[data-bb-template='bluebet-v1'] .bbt-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* The reason a disabled control is disabled. Rendered, never hidden. */
[data-bb-template='bluebet-v1'] .bbt-unavailable-reason {
  display: block;
  -webkit-margin-before: var(--bbt-space-2);
          margin-block-start: var(--bbt-space-2);
  color: var(--bbt-text-muted);
  font-family: var(--bbt-font-content);
  font-size: 13px;
  line-height: 1.4;
}

/* ------------------------------------------------------------------ *
 * Status pill — colour, word and glyph together
 * ------------------------------------------------------------------ */

[data-bb-template='bluebet-v1'] .bbt-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--bbt-space-1);
  padding: var(--bbt-space-1) var(--bbt-space-3);
  border: var(--bbt-border-hairline) solid currentColor;
  border-radius: var(--bbt-radius-pill);
  font-family: var(--bbt-font-display);
  font-size: var(--bbt-card-label-size);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

[data-bb-template='bluebet-v1'] .bbt-status-pill--verified { color: var(--bbt-success); }
[data-bb-template='bluebet-v1'] .bbt-status-pill--pending { color: var(--bbt-warning); }
[data-bb-template='bluebet-v1'] .bbt-status-pill--failed { color: var(--bbt-negative-text); }
[data-bb-template='bluebet-v1'] .bbt-status-pill--neutral { color: var(--bbt-text-muted); }
[data-bb-template='bluebet-v1'] .bbt-status-pill--positive { color: var(--bbt-success); }
[data-bb-template='bluebet-v1'] .bbt-status-pill--negative { color: var(--bbt-text-muted); }

/* ------------------------------------------------------------------ *
 * Surface states
 * ------------------------------------------------------------------ */

[data-bb-template='bluebet-v1'] .bbt-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bbt-space-3);
  padding: var(--bbt-space-10) var(--bbt-space-5);
  text-align: center;
  color: var(--bbt-text-muted);
}

[data-bb-template='bluebet-v1'] .bbt-state__heading {
  font-family: var(--bbt-font-content);
  font-weight: 700;
  font-size: 17px;
  color: var(--bbt-text);
}

[data-bb-template='bluebet-v1'] .bbt-state__body {
  font-family: var(--bbt-font-content);
  font-size: 14px;
  max-inline-size: 44ch;
}

[data-bb-template='bluebet-v1'] .bbt-state--error .bbt-state__heading {
  color: var(--bbt-negative-text);
}

/* ------------------------------------------------------------------ *
 * Card
 * ------------------------------------------------------------------ */

[data-bb-template='bluebet-v1'] .bbt-card {
  background: var(--bbt-surface);
  border: var(--bbt-border-hairline) solid var(--bbt-cyan-30);
  border-radius: var(--bbt-radius-lg);
  padding: var(--bbt-space-6);
  box-shadow: var(--bbt-elevation-1);
}

/* ------------------------------------------------------------------ *
 * Form field
 * ------------------------------------------------------------------ */

[data-bb-template='bluebet-v1'] .bbt-field {
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-2);
}

[data-bb-template='bluebet-v1'] .bbt-field__label {
  font-family: var(--bbt-font-content);
  font-size: 13px;
  color: var(--bbt-text-muted);
}

/* A required field is marked with a word, not only an asterisk. §1.4 asks for
   the required marking to be consistent, and an asterisk alone is a symbol
   whose meaning has to be learned. */
[data-bb-template='bluebet-v1'] .bbt-field__required {
  color: var(--bbt-cyan);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-bb-template='bluebet-v1'] .bbt-field__control {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-2);
  min-block-size: var(--bbt-touch-target-min);
  padding: 0 var(--bbt-space-4);
  background: var(--bbt-bg);
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
  border-radius: var(--bbt-radius-sm);
  color: var(--bbt-text);
}

[data-bb-template='bluebet-v1'] .bbt-field__control:focus-within {
  border-color: var(--bbt-cyan);
}

[data-bb-template='bluebet-v1'] .bbt-field__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  background: transparent;
  border: 0;
  color: var(--bbt-text);
  font-family: var(--bbt-font-content);
  font-size: 15px;
}

[data-bb-template='bluebet-v1'] .bbt-field__input::placeholder {
  color: var(--bbt-text-muted);
}

[data-bb-template='bluebet-v1'] .bbt-field__input:focus {
  outline: none;
}

/* An error is a word and a glyph, never a red border alone. */
[data-bb-template='bluebet-v1'] .bbt-field--invalid .bbt-field__control {
  border-color: var(--bbt-negative);
}

[data-bb-template='bluebet-v1'] .bbt-field__error {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-1);
  color: var(--bbt-negative-text);
  font-family: var(--bbt-font-content);
  font-size: 13px;
}

/* ------------------------------------------------------------------ *
 * Section heading
 * ------------------------------------------------------------------ */

[data-bb-template='bluebet-v1'] .bbt-section {
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-4);
}

[data-bb-template='bluebet-v1'] .bbt-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bbt-space-4);
}

[data-bb-template='bluebet-v1'] .bbt-section__title {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-2);
  /*
   * NO font-size HERE, AND THAT IS DELIBERATE.
   *
   * §1.7 Pantalla 1 asks for section headings at "~60% del tamaño actual".
   * Nobody has measured the current size, §1.3 forbids measuring the mockup,
   * and 60% of an unmeasured number is not a number. The heading inherits
   * until `--bbt-section-heading-size` is frozen from a real measurement. See
   * PENDING_BASELINE_TOKENS.
   */
  font-family: var(--bbt-font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bbt-text);
}

/*
 * Screen-local layout.
 *
 * Everything here is composition: grids, rails, tables and the few
 * screen-specific blocks the ownership map lists under `ownsLocal`. No screen
 * restyles a global component; if a rule below targets a `bbt-header__`,
 * `bbt-sidebar__`, `bbt-filter-bar__`, `bbt-modal__` or `bbt-account-tabs__`
 * class, the gate fails, because that is what a screen-local fork looks like.
 *
 * Same two rules as everywhere else: scoped under the template attribute, and
 * every value is a token.
 */

/* ================================================================== *
 * Shared layout
 * ================================================================== */

/* A horizontally scrolling row of cards. The scroll container is the rail
   itself, so the page body never scrolls sideways. */
[data-bb-template='bluebet-v1'] .bbt-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  grid-gap: var(--bbt-space-4);
  gap: var(--bbt-space-4);
  overflow-x: auto;
  -webkit-padding-after: var(--bbt-space-2);
          padding-block-end: var(--bbt-space-2);
  scroll-snap-type: x proximity;
}

[data-bb-template='bluebet-v1'] .bbt-rail > * {
  scroll-snap-align: start;
}

[data-bb-template='bluebet-v1'] .bbt-grid {
  display: grid;
  grid-gap: var(--bbt-space-4);
  gap: var(--bbt-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-bb-template='bluebet-v1'] .bbt-grid--games {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* §1.7 P13 — two rows of six on desktop. */
[data-bb-template='bluebet-v1'] .bbt-grid--providers {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* §1.7 P14 — 3 x 2 on desktop. */
[data-bb-template='bluebet-v1'] .bbt-grid--promotions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-bb-template='bluebet-v1'] .bbt-grid--balances {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-bb-template='bluebet-v1'] .bbt-section__link {
  color: var(--bbt-text-muted);
  font-family: var(--bbt-font-content);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

[data-bb-template='bluebet-v1'] .bbt-section__link:hover {
  color: var(--bbt-cyan);
  text-decoration: underline;
}

[data-bb-template='bluebet-v1'] .bbt-screen-note {
  margin: 0;
  color: var(--bbt-text-muted);
  font-family: var(--bbt-font-content);
  font-size: 14px;
}

[data-bb-template='bluebet-v1'] .bbt-result-summary {
  margin: 0;
  color: var(--bbt-text-muted);
  font-family: var(--bbt-font-content);
  font-size: 14px;
}

/* Long emails, long game names and long operation strings all wrap rather
   than clipping. Several negative cases name exactly this. */
[data-bb-template='bluebet-v1'] .bbt-wrap-anywhere {
  overflow-wrap: anywhere;
}

/* ================================================================== *
 * Pills
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bbt-space-2);
}

[data-bb-template='bluebet-v1'] .bbt-pill {
  min-block-size: var(--bbt-touch-target-min);
  padding-inline: var(--bbt-space-4);
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
  border-radius: var(--bbt-radius-pill);
  background: transparent;
  color: var(--bbt-text);
  font-size: 15px;
  cursor: pointer;
}

/* Selected carries a border weight AND the colour, so the state survives
   losing every trace of cyan. */
[data-bb-template='bluebet-v1'] .bbt-pill.is-active {
  border-width: var(--bbt-border-accent);
  border-color: var(--bbt-cyan);
  color: var(--bbt-cyan);
}

/* ================================================================== *
 * S05 — the live slider
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-live-slider {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--bbt-space-4);
  gap: var(--bbt-space-4);
}

[data-bb-template='bluebet-v1'] .bbt-live-slider__banner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--bbt-space-1);
  min-block-size: 200px;
  padding: var(--bbt-space-6);
  border-radius: var(--bbt-radius-lg);
  background: linear-gradient(120deg, var(--bbt-blue) 0%, var(--bbt-bg) 100%);
  color: var(--bbt-text);
  text-decoration: none;
}

[data-bb-template='bluebet-v1'] .bbt-live-slider__headline {
  font-size: 30px;
}

[data-bb-template='bluebet-v1'] .bbt-live-slider__body {
  font-size: 14px;
  color: var(--bbt-text-muted);
}

/* ================================================================== *
 * S07 — the cluster bench
 * ================================================================== */

/*
 * Wide tables scroll inside their own container, never the page.
 *
 * R1 shipped `.bbt-cluster-table` at `inline-size: 100%` with no scroll parent.
 * A table's used width is at least its minimum content width, and each row here
 * carries a rendered header cluster — a balance pill plus a profile pill — so
 * five columns cannot fit 390px. Measured on S07 at 390px: documentElement
 * scrollWidth 570 against clientWidth 390. The whole page scrolled sideways.
 *
 * `inline-size: 100%` was the trap: it reads as "never wider than its parent"
 * and means nothing once minimum content width exceeds it. The containment has
 * to be on a wrapper that can actually scroll, which is the same idiom
 * `.bbt-history-table-wrap` already uses.
 *
 * Nothing is hidden and nothing is moved: every column is still reachable, and
 * the fixed chat control keeps its position.
 */
[data-bb-template='bluebet-v1'] .bbt-table-scroll {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  /* A scroll container that can be reached and driven from the keyboard. */
  scrollbar-width: thin;
}

[data-bb-template='bluebet-v1'] .bbt-cluster-table {
  inline-size: 100%;
  /*
   * `min-inline-size: 0` is the line that actually contains this table, and it
   * was found by measurement rather than reasoning.
   *
   * The wrapper above was already a correct scroll container — 358px wide with
   * overflow-x: auto — and the table still widened the whole document to
   * 547px against a 390px viewport. A table's AUTOMATIC minimum size is its
   * min-content width, and that minimum propagates out through the scroll
   * container to the initial containing block, which Chrome then widens. An
   * intermediate `inline-size: max-content` made it worse by pinning the table
   * at 745px.
   *
   * Measured, at 390px, on this page:
   *   inline-size: max-content            scrollWidth 547  (overflow 157px)
   *   inline-size: 100%; min-inline-size: 640px   scrollWidth 442
   *   inline-size: 100%; min-inline-size: 0       scrollWidth 390  <- this
   *
   * The table still renders 561px wide inside the 358px scroller, so no column
   * is lost and nothing is hidden; only the propagation stops.
   */
  min-inline-size: 0;
  border-collapse: collapse;
  font-family: var(--bbt-font-content);
  font-size: 14px;
}

[data-bb-template='bluebet-v1'] .bbt-cluster-table th,
[data-bb-template='bluebet-v1'] .bbt-cluster-table td {
  padding: var(--bbt-space-3);
  -webkit-border-after: var(--bbt-border-hairline) solid var(--bbt-divider);
          border-block-end: var(--bbt-border-hairline) solid var(--bbt-divider);
  text-align: start;
  vertical-align: middle;
}

[data-bb-template='bluebet-v1'] .bbt-cluster-bench {
  display: inline-flex;
  padding: var(--bbt-space-2);
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
  border-radius: var(--bbt-radius-md);
  background: var(--bbt-bg);
}

[data-bb-template='bluebet-v1'] .bbt-cluster-cases {
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-bb-template='bluebet-v1'] .bbt-cluster-cases li {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-4);
  flex-wrap: wrap;
}

/* ================================================================== *
 * S08 — the field contract table
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-field-contract {
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-3);
}

[data-bb-template='bluebet-v1'] .bbt-field-contract__authority {
  color: var(--bbt-text-muted);
  font-size: 13px;
  max-inline-size: 60ch;
}

/* ================================================================== *
 * S09 — the logout actions
 * ================================================================== */

/* §1.7 P9 — CANCELAR and CERRAR SESIÓN at the same size. Equal grid columns
   is what makes that structural rather than a matter of matching padding. */
[data-bb-template='bluebet-v1'] .bbt-logout__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--bbt-space-3);
  gap: var(--bbt-space-3);
}

/* ================================================================== *
 * S10 — the account card grid
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--bbt-space-4);
  gap: var(--bbt-space-4);
  align-items: start;
}

[data-bb-template='bluebet-v1'] .bbt-account-card__head {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-3);
  -webkit-margin-after: var(--bbt-space-3);
          margin-block-end: var(--bbt-space-3);
}

[data-bb-template='bluebet-v1'] .bbt-account-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--bbt-radius-md);
  background: var(--bbt-surface-raised);
  color: var(--bbt-cyan);
}

[data-bb-template='bluebet-v1'] .bbt-account-card__title {
  margin: 0;
  flex: 1 1 auto;
}

[data-bb-template='bluebet-v1'] .bbt-account-card__rows {
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-2);
  margin: 0;
}

[data-bb-template='bluebet-v1'] .bbt-account-card__row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  grid-gap: var(--bbt-space-3);
  gap: var(--bbt-space-3);
}

[data-bb-template='bluebet-v1'] .bbt-account-card__row-label {
  color: var(--bbt-text-muted);
  font-size: 14px;
}

[data-bb-template='bluebet-v1'] .bbt-account-card__row-value {
  margin: 0;
  font-family: var(--bbt-font-content);
  font-weight: 700;
  font-size: 14px;
}

[data-bb-template='bluebet-v1'] .bbt-account-card__row-value.is-muted {
  font-weight: 400;
  color: var(--bbt-text-muted);
}

[data-bb-template='bluebet-v1'] .bbt-account-card__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bbt-space-4);
  flex-wrap: wrap;
}

[data-bb-template='bluebet-v1'] .bbt-account-card__value {
  font-family: var(--bbt-font-content);
  font-size: 15px;
}

[data-bb-template='bluebet-v1'] .bbt-account-card__value--muted {
  color: var(--bbt-text-muted);
  font-size: 14px;
}

[data-bb-template='bluebet-v1'] .bbt-account-card__figure {
  margin: 0;
  font-size: 28px;
}

[data-bb-template='bluebet-v1'] .bbt-account-exclusion {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bbt-space-3);
  padding: var(--bbt-space-6);
  border: var(--bbt-border-hairline) solid var(--bbt-negative);
  border-radius: var(--bbt-radius-lg);
  background: var(--bbt-surface);
}

[data-bb-template='bluebet-v1'] .bbt-account-exclusion__title {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-2);
  margin: 0;
  color: var(--bbt-negative-text);
}

[data-bb-template='bluebet-v1'] .bbt-account-exclusion__body {
  margin: 0;
  color: var(--bbt-text-muted);
  font-size: 14px;
}

/* ================================================================== *
 * S11 — the game frame
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-game-frame {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--bbt-radius-lg);
  overflow: hidden;
  background: var(--bbt-surface);
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
}

[data-bb-template='bluebet-v1'] .bbt-game-frame.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 70;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
}

[data-bb-template='bluebet-v1'] .bbt-game-frame__iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
}

[data-bb-template='bluebet-v1'] .bbt-game-info {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-4);
  flex-wrap: wrap;
  padding: var(--bbt-space-4);
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
  border-radius: var(--bbt-radius-lg);
  background: var(--bbt-surface);
}

[data-bb-template='bluebet-v1'] .bbt-game-info__names {
  min-inline-size: 0;
}

[data-bb-template='bluebet-v1'] .bbt-game-info__title {
  margin: 0;
}

[data-bb-template='bluebet-v1'] .bbt-game-info__provider {
  margin: 0;
  font-size: 14px;
}

[data-bb-template='bluebet-v1'] .bbt-game-info__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bbt-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-bb-template='bluebet-v1'] .bbt-game-info__tag {
  padding: var(--bbt-space-1) var(--bbt-space-3);
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
  border-radius: var(--bbt-radius-pill);
  font-size: 13px;
  color: var(--bbt-text-muted);
}

[data-bb-template='bluebet-v1'] .bbt-game-info__specs {
  display: flex;
  gap: var(--bbt-space-6);
  margin: 0;
}

[data-bb-template='bluebet-v1'] .bbt-game-info__specs dt {
  font-family: var(--bbt-font-display);
  font-size: var(--bbt-card-label-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bbt-text-muted);
}

[data-bb-template='bluebet-v1'] .bbt-game-info__specs dd {
  margin: 0;
  font-family: var(--bbt-font-content);
  font-weight: 700;
}

[data-bb-template='bluebet-v1'] .bbt-game-info__actions {
  display: flex;
  gap: var(--bbt-space-1);
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}

[data-bb-template='bluebet-v1'] .bbt-game-prose {
  margin: 0;
  max-inline-size: 72ch;
  color: var(--bbt-text-muted);
  font-family: var(--bbt-font-content);
  font-size: 15px;
}

/* ================================================================== *
 * S12 — history
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-history-filters {
  display: flex;
  align-items: flex-end;
  gap: var(--bbt-space-3);
  flex-wrap: wrap;
  padding: var(--bbt-space-4);
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
  border-radius: var(--bbt-radius-lg);
  background: var(--bbt-surface);
}

[data-bb-template='bluebet-v1'] .bbt-history-filters .bbt-field {
  min-inline-size: 160px;
  flex: 1 1 160px;
}

[data-bb-template='bluebet-v1'] .bbt-history-filters__more {
  display: inline-flex;
  align-items: center;
  gap: var(--bbt-space-1);
  min-block-size: var(--bbt-touch-target-min);
}

/* The table scrolls inside its own container, never the page body. */
[data-bb-template='bluebet-v1'] .bbt-history-table-wrap {
  overflow-x: auto;
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
  border-radius: var(--bbt-radius-lg);
}

[data-bb-template='bluebet-v1'] .bbt-history-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--bbt-font-content);
  font-size: 14px;
}

[data-bb-template='bluebet-v1'] .bbt-history-table th,
[data-bb-template='bluebet-v1'] .bbt-history-table td {
  padding: var(--bbt-space-3) var(--bbt-space-4);
  text-align: start;
  -webkit-border-after: var(--bbt-border-hairline) solid var(--bbt-divider);
          border-block-end: var(--bbt-border-hairline) solid var(--bbt-divider);
  white-space: nowrap;
}

[data-bb-template='bluebet-v1'] .bbt-history-table thead th {
  font-family: var(--bbt-font-display);
  font-size: var(--bbt-card-label-size);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bbt-text-muted);
  background: var(--bbt-surface);
}

[data-bb-template='bluebet-v1'] .bbt-tx-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--bbt-space-1);
  padding: var(--bbt-space-1) var(--bbt-space-3);
  border-radius: var(--bbt-radius-pill);
  font-size: 13px;
}

[data-bb-template='bluebet-v1'] .bbt-tx-pill--premio {
  background: var(--bbt-success-16);
  color: var(--bbt-success);
}

[data-bb-template='bluebet-v1'] .bbt-tx-pill--apuesta,
[data-bb-template='bluebet-v1'] .bbt-tx-pill--deposito,
[data-bb-template='bluebet-v1'] .bbt-tx-pill--retiro,
[data-bb-template='bluebet-v1'] .bbt-tx-pill--bono,
[data-bb-template='bluebet-v1'] .bbt-tx-pill--giro-gratis {
  background: var(--bbt-surface-raised);
  color: var(--bbt-text-muted);
}

/* The sign is already in the text. The colour is a second cue, not the cue. */
[data-bb-template='bluebet-v1'] .bbt-amount--positive { color: var(--bbt-success); }
[data-bb-template='bluebet-v1'] .bbt-amount--negative { color: var(--bbt-negative-text); }
[data-bb-template='bluebet-v1'] .bbt-amount--zero { color: var(--bbt-text-muted); }

/* The mobile card list is hidden until the mobile breakpoint. */
[data-bb-template='bluebet-v1'] .bbt-history-cards {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-bb-template='bluebet-v1'] .bbt-history-card {
  padding: var(--bbt-space-4);
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
  border-radius: var(--bbt-radius-lg);
  background: var(--bbt-surface);
}

[data-bb-template='bluebet-v1'] .bbt-history-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: var(--bbt-space-1) var(--bbt-space-4);
  gap: var(--bbt-space-1) var(--bbt-space-4);
  margin: 0;
}

[data-bb-template='bluebet-v1'] .bbt-history-card dl > div {
  display: contents;
}

[data-bb-template='bluebet-v1'] .bbt-history-card dt {
  font-family: var(--bbt-font-display);
  font-size: var(--bbt-card-label-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bbt-text-muted);
}

[data-bb-template='bluebet-v1'] .bbt-history-card dd {
  margin: 0;
  font-family: var(--bbt-font-content);
  font-size: 14px;
}

[data-bb-template='bluebet-v1'] .bbt-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bbt-space-4);
  flex-wrap: wrap;
}

[data-bb-template='bluebet-v1'] .bbt-pagination__size {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-2);
  color: var(--bbt-text-muted);
  font-family: var(--bbt-font-content);
  font-size: 14px;
}

[data-bb-template='bluebet-v1'] .bbt-pagination__size select {
  min-block-size: 36px;
  padding-inline: var(--bbt-space-2);
  background: var(--bbt-surface);
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
  border-radius: var(--bbt-radius-sm);
}

[data-bb-template='bluebet-v1'] .bbt-pagination__count {
  margin: 0;
  color: var(--bbt-text-muted);
  font-family: var(--bbt-font-content);
  font-size: 14px;
}

/* ================================================================== *
 * S14 — promotion cards
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-promo-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--bbt-border-hairline) solid var(--bbt-divider);
  border-radius: var(--bbt-radius-lg);
  background: var(--bbt-surface);
}

/* §1.7 P14 — 60% cover, 40% content. */
[data-bb-template='bluebet-v1'] .bbt-promo-card__cover {
  position: relative;
  flex: 0 0 60%;
  min-block-size: 180px;
  display: flex;
  align-items: center;
  padding: var(--bbt-space-5);
  background: linear-gradient(140deg, var(--bbt-blue-active) 0%, var(--bbt-bg) 100%);
}

[data-bb-template='bluebet-v1'] .bbt-promo-card__hook {
  margin: 0;
  max-inline-size: 60%;
  font-size: 30px;
  color: var(--bbt-cyan);
}

[data-bb-template='bluebet-v1'] .bbt-promo-card__cta {
  position: absolute;
  inset-block-end: var(--bbt-space-4);
  inset-inline-end: var(--bbt-space-4);
  text-decoration: none;
}

[data-bb-template='bluebet-v1'] .bbt-promo-card__body {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  gap: var(--bbt-space-2);
  padding: var(--bbt-space-4);
}

[data-bb-template='bluebet-v1'] .bbt-promo-card__title {
  margin: 0;
  font-family: var(--bbt-font-content);
  font-weight: 700;
  font-size: 17px;
}

[data-bb-template='bluebet-v1'] .bbt-promo-card__text {
  margin: 0;
  color: var(--bbt-text-muted);
  font-size: 14px;
}

[data-bb-template='bluebet-v1'] .bbt-promo-card__terms {
  display: flex;
  align-items: center;
  gap: var(--bbt-space-1);
  margin: 0;
  -webkit-margin-before: auto;
          margin-block-start: auto;
}

/* ================================================================== *
 * S15 — wallet
 * ================================================================== */

[data-bb-template='bluebet-v1'] .bbt-wallet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bbt-space-4);
  flex-wrap: wrap;
}

[data-bb-template='bluebet-v1'] .bbt-wallet-head__actions {
  display: flex;
  align-items: flex-start;
  gap: var(--bbt-space-3);
  flex-wrap: wrap;
}

[data-bb-template='bluebet-v1'] .bbt-balance-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bbt-space-3);
}

[data-bb-template='bluebet-v1'] .bbt-balance-card__head h2 {
  margin: 0;
  color: var(--bbt-text-muted);
}

[data-bb-template='bluebet-v1'] .bbt-balance-card__icon {
  color: var(--bbt-cyan);
}

/* §1.7 P15 — the amount at about 36px. */
[data-bb-template='bluebet-v1'] .bbt-balance-card__amount {
  margin: var(--bbt-space-3) 0 0;
  font-size: var(--bbt-wallet-amount-size);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

[data-bb-template='bluebet-v1'] .bbt-wallet-breakdown__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bbt-space-3);
  inline-size: 100%;
  min-block-size: var(--bbt-touch-target-min);
  border: 0;
  background: transparent;
  color: var(--bbt-text);
  cursor: pointer;
}

[data-bb-template='bluebet-v1'] .bbt-wallet-breakdown__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bbt-space-4);
  padding-block: var(--bbt-space-2);
  -webkit-border-before: var(--bbt-border-hairline) solid var(--bbt-divider);
          border-block-start: var(--bbt-border-hairline) solid var(--bbt-divider);
  font-family: var(--bbt-font-content);
  font-size: 14px;
}

[data-bb-template='bluebet-v1'] .bbt-wallet-breakdown__row dt {
  color: var(--bbt-text-muted);
}

[data-bb-template='bluebet-v1'] .bbt-wallet-breakdown__row dd {
  margin: 0;
}

[data-bb-template='bluebet-v1'] .bbt-wallet-breakdown__inactive {
  color: var(--bbt-warning);
  font-size: 13px;
}

[data-bb-template='bluebet-v1'] .bbt-wallet-bonus-tabs {
  display: flex;
  gap: var(--bbt-space-5);
  margin-block: var(--bbt-space-4);
  overflow-x: auto;
  -webkit-border-after: var(--bbt-border-hairline) solid var(--bbt-divider);
          border-block-end: var(--bbt-border-hairline) solid var(--bbt-divider);
}

[data-bb-template='bluebet-v1'] .bbt-wallet-bonus-tab {
  min-block-size: var(--bbt-touch-target-min);
  border: 0;
  -webkit-border-after: var(--bbt-border-accent) solid transparent;
          border-block-end: var(--bbt-border-accent) solid transparent;
  background: transparent;
  color: var(--bbt-text-muted);
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
}

[data-bb-template='bluebet-v1'] .bbt-wallet-bonus-tab.is-active {
  color: var(--bbt-text);
  border-block-end-color: var(--bbt-cyan);
}

/* ================================================================== *
 * TABLET — below 1200px. PROPOSED.
 * ================================================================== */

@media (max-width: 1199px) {
  [data-bb-template='bluebet-v1'] .bbt-grid--games,
  [data-bb-template='bluebet-v1'] .bbt-grid--providers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  [data-bb-template='bluebet-v1'] .bbt-grid--promotions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-bb-template='bluebet-v1'] .bbt-account-grid {
    grid-template-columns: 1fr;
  }

  [data-bb-template='bluebet-v1'] .bbt-game-info__actions {
    -webkit-margin-start: 0;
            margin-inline-start: 0;
  }
}

/* ================================================================== *
 * MOBILE — below 768px. PROPOSED.
 * ================================================================== */

@media (max-width: 767px) {
  [data-bb-template='bluebet-v1'] .bbt-grid--games {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* R05's seam requirement: never a square wordmark. Two landscape cards per
     row keeps the 16/9 ratio intact instead of squeezing toward a square. */
  [data-bb-template='bluebet-v1'] .bbt-grid--providers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-bb-template='bluebet-v1'] .bbt-grid--promotions,
  [data-bb-template='bluebet-v1'] .bbt-grid--balances {
    grid-template-columns: 1fr;
  }

  [data-bb-template='bluebet-v1'] .bbt-live-slider {
    grid-template-columns: 1fr;
  }

  [data-bb-template='bluebet-v1'] .bbt-rail {
    grid-auto-columns: minmax(140px, 45%);
  }

  /*
   * S12's mobile requirement is that all SEVEN facts stay available with no
   * clipping and no inaccessible scroll. A sideways-scrolling table hides
   * columns behind a gesture, so the table is replaced outright by the
   * labelled card list — same seven facts, no horizontal scroll.
   */
  [data-bb-template='bluebet-v1'] .bbt-history-table-wrap {
    display: none;
  }

  [data-bb-template='bluebet-v1'] .bbt-history-cards {
    display: flex;
    flex-direction: column;
    gap: var(--bbt-space-3);
  }

  [data-bb-template='bluebet-v1'] .bbt-promo-card__hook {
    font-size: 24px;
    max-inline-size: 100%;
  }

  [data-bb-template='bluebet-v1'] .bbt-promo-card__cta {
    position: static;
    align-self: flex-start;
    -webkit-margin-before: var(--bbt-space-3);
            margin-block-start: var(--bbt-space-3);
  }

  [data-bb-template='bluebet-v1'] .bbt-promo-card__cover {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  [data-bb-template='bluebet-v1'] .bbt-logout__actions {
    grid-template-columns: 1fr;
  }

  [data-bb-template='bluebet-v1'] .bbt-account-card__row {
    grid-template-columns: 1fr auto;
  }

  [data-bb-template='bluebet-v1'] .bbt-account-card__row-value {
    grid-column: 1 / 2;
  }
}

/*
 * Provider wordmark presentation.
 *
 * §1.7 Pantalla 13 is specific and the specificity is the requirement: the
 * cards must be LANDSCAPE, wider than tall, because provider wordmarks are
 * horizontal lockups. A square or portrait card forces a horizontal wordmark
 * to shrink until it is unreadable, which is the current defect.
 *
 * Nothing here sets `filter`, `mix-blend-mode` or any colour on the image.
 * Recolouring or monochroming an official mark is forbidden by both §1.7 P13
 * and BB-15 I09.
 */

[data-bb-template='bluebet-v1'] .bbt-provider-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bbt-space-2);
  border: var(--bbt-border-hairline) solid var(--bbt-cyan-30);
  border-radius: var(--bbt-radius-lg);
  background: var(--bbt-surface);
  color: var(--bbt-text);
  text-align: center;
  cursor: default;
}

[data-bb-template='bluebet-v1'] button.bbt-provider-mark {
  cursor: pointer;
}

/* Landscape by aspect ratio, not by a fixed height, so the shape survives
   every column count the grid reflows to. */
[data-bb-template='bluebet-v1'] .bbt-provider-mark--card {
  aspect-ratio: 16 / 9;
  padding: var(--bbt-space-4);
}

[data-bb-template='bluebet-v1'] .bbt-provider-mark--row {
  flex-direction: row;
  aspect-ratio: auto;
  inline-size: 32px;
  block-size: 32px;
  padding: var(--bbt-space-1);
  border-radius: var(--bbt-radius-sm);
}

[data-bb-template='bluebet-v1'] .bbt-provider-mark--inline {
  flex-direction: row;
  aspect-ratio: auto;
  padding: var(--bbt-space-2) var(--bbt-space-3);
  border-radius: var(--bbt-radius-pill);
}

[data-bb-template='bluebet-v1'] .bbt-provider-mark__art {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 0;
  flex: 1 1 auto;
}

[data-bb-template='bluebet-v1'] .bbt-provider-mark__image {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}

/* The text fallback. It has to read as a wordmark stand-in, not as an error,
   because for a provider with no licensed asset this IS the shipped state. */
[data-bb-template='bluebet-v1'] .bbt-provider-mark__fallback {
  font-family: var(--bbt-font-display);
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bbt-text);
  overflow-wrap: anywhere;
}

[data-bb-template='bluebet-v1'] .bbt-provider-mark--row .bbt-provider-mark__fallback,
[data-bb-template='bluebet-v1'] .bbt-provider-mark--inline .bbt-provider-mark__fallback {
  font-size: 12px;
  letter-spacing: 0.04em;
}

[data-bb-template='bluebet-v1'] .bbt-provider-mark__name {
  font-family: var(--bbt-font-content);
  font-size: 13px;
  color: var(--bbt-text-muted);
  /* A long wordmark must wrap rather than clip. S13's negative case names
     "long wordmark" explicitly. */
  overflow-wrap: anywhere;
}

/* I08-ACTIVE — selected carries a border weight change AND a check mark, so
   removing every trace of cyan still leaves the state readable. */
[data-bb-template='bluebet-v1'] .bbt-provider-mark.is-selected {
  border-width: var(--bbt-border-accent);
  border-color: var(--bbt-cyan);
  box-shadow: var(--bbt-glow-subtle);
}

[data-bb-template='bluebet-v1'] .bbt-provider-mark.is-selected::after {
  content: '✓';
  position: absolute;
  inset-block-start: var(--bbt-space-2);
  inset-inline-end: var(--bbt-space-2);
  font-size: 14px;
  line-height: 1;
}

[data-bb-template='bluebet-v1'] .bbt-provider-mark--card {
  position: relative;
}

[data-bb-template='bluebet-v1'] .bbt-provider-mark:focus-visible {
  outline: var(--bbt-focus-width) solid var(--bbt-focus-ring);
  outline-offset: var(--bbt-focus-offset);
}

/* Used wherever a name must be read but not seen. Never `display: none`. */
[data-bb-template='bluebet-v1'] .bbt-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}