/* BetInc on BetConstruct turnkey — Mobile CSS, Plum night (owner, 2026-11-01).
   Same variable remap as the Web CSS (keep the two blocks identical);
   below it, only what the mobile app renders differently. The bone site this
   replaces is tagged live-before-plum-2026-11-01. */

html {
  /* grounds */
  --b: 28, 17, 23 !important;            /* plum #1c1117 */
  --b-hover: 38, 25, 32 !important;      /* raised #261920 */
  --b-sc: 244, 238, 231 !important;      /* ink #f4eee7 */
  --header: 28, 17, 23 !important;
  --header-hover: 38, 25, 32 !important;
  --header-sc: 244, 238, 231 !important;
  --menu: 28, 17, 23 !important;
  --menu-hover: 38, 25, 32 !important;
  --menu-sc: 244, 238, 231 !important;
  --tab-navigation: 28, 17, 23 !important;
  --tab-navigation-hover: 38, 25, 32 !important;
  --tab-navigation-sc: 244, 238, 231 !important;
  --neutral: 244, 238, 231 !important;   /* BC's text ink, used with alpha */
  --neutral-sc: 28, 17, 23 !important;

  /* the action: Rose AA fill, white ink (4.7:1), the ladder DARKENS on hover */
  --hero: 230, 0, 88 !important;         /* Rose AA     #e60058 */
  --hero-hover: 200, 0, 77 !important;   /* #c8004d, white 5.9:1 */
  --hero-sc: 255, 255, 255 !important;
  --brand: 230, 0, 88 !important;
  --brand-hover: 200, 0, 77 !important;
  --brand-sc: 255, 255, 255 !important;
  --tab-navigation-new-hero: 230, 0, 88 !important;
  --tab-navigation-new-hero-hover: 200, 0, 77 !important;
  --tab-navigation-new-hero-sc: 255, 255, 255 !important;

  /* BC's action colours: the form submit (.btn.a-color), accept buttons, switches,
     checkboxes, links, progress fills. They follow Register (setting 1), as the
     form's Sign in button does on the settings page. */
  --accent: 230, 0, 88 !important;
  --accent-hover: 200, 0, 77 !important;
  --accent-sc: 255, 255, 255 !important;
  --secondary: 230, 0, 88 !important;
  --secondary-hover: 200, 0, 77 !important;
  --secondary-sc: 255, 255, 255 !important;
  --oc-1: 230, 0, 88 !important;
  --oc-1-hover: 200, 0, 77 !important;
  --oc-1-sc: 255, 255, 255 !important;
  --oc-2: 255, 92, 149 !important;       /* odds, scores, tertiary links: #ff5c95, 6.3:1 on plum */
  --oc-2-hover: 255, 122, 169 !important;
  --oc-2-sc: 28, 17, 23 !important;      /* plum ink on it as a fill (betslip pill, filled tab), 6.3:1 */
  --oc-3: 255, 107, 94 !important;       /* error on plum #ff6b5e */
  --oc-3-sc: 28, 17, 23 !important;

  /* status: lighter on plum (6.6 and 8.3:1), plum ink when used as a fill */
  --success: 76, 195, 138 !important;    /* #4cc38a */
  --success-sc: 28, 17, 23 !important;
  --error: 255, 107, 94 !important;      /* #ff6b5e */
  --error-sc: 28, 17, 23 !important;

  --border-radius: 8px !important;
  --font-family: Roboto, system-ui, sans-serif !important;
}

/* ==== PLUM NIGHT: one plum surface, as the bone site had one bone surface;
   hairlines and spacing carry the structure. The ramp on plum #1c1117:
   text #f4eee7 16.0, muted #cfc5ba 10.8, faint #b3a89c 7.9, edge #85797d 4.4,
   chip edge #6a5d63 2.9, hairline #3a3035 1.45; raised #261920 for fields and
   the bottom bar. The choices are the settings page's
   (mockups/plum-settings-2026-11-01.html): logo=light reg=r chip=i menu=i sep=a
   sw=1 sc=a8998a tile=d fixes=bar.banner.small.forms. */

/* ---- links drawn in the action colour: BC colours links and text buttons with
   --hero / --oc-1, which must stay Rose AA for the white-text fills; as text on
   plum that is 3.95:1, so these take the light rose (6.3:1). Before the section
   headings, whose "+N" links keep their own colour. */
.ds-link.ds-link-color--primary, .ds-link.ds-link-color--secondary,
.ds-btn.ds-btn-appearance--text.ds-btn-variant--primary, .ds-btn.ds-btn-appearance--text.ds-btn-variant--secondary,
.sdr-inner-html-bc a, .content a, .btn.a-outline.a-color { color: #ff5c95 !important; }

/* ---- header: page-coloured, a hairline under it and under the switcher row */
.header-bc { background: #1c1117 !important; position: relative; box-shadow: 0 1px 0 #3a3035; }

/* ---- product switcher: BC's text nav row becomes the reference's icon tiles
   (ui-design.md §40, phone "icons" layout): 24px line glyph over an 11px bold
   label, muted at rest, a burgundy tile for the current product. BC
   renders no icon on this row, so each glyph is a CSS mask keyed on the link's
   href; the paths are Venturi's own (packages/features/casino/src/nav.ts). */
/* The content below is pushed down by --mobile-header-navigation-height, which
   BC's script sets INLINE on <html> (40px, its text row). The tile row is 64px:
   6 + 53 + 5. BC's own rule still zeroes it, on the layout element, for pages
   with no nav row, and a descendant's value wins over this one. */
html { --mobile-header-navigation-height: 64px !important; }
.hdr-navigation-scrollable-bc, .hdr-navigation-scrollable-content {
  background: #1c1117 !important;
  height: auto !important;
}
.hdr-navigation-scrollable-bc {
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 #3a3035;
  padding: 2px 8px 0 !important;
}
/* The row scrolls sideways, which clips vertically too, so the active tile's
   glow gets its room inside the scroller: 2 + 4 + 53 + 5 + 0 = the same 64. */
.hdr-navigation-scrollable-content { gap: 4px; padding: 4px 4px 5px !important; }
.hdr-navigation-link-bc {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 96px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-width: 62px;
  height: auto !important;
  padding: 6px 4px 5px !important;
  border: 0 !important;
  border-radius: 8px;
  box-shadow: none !important;
  background: transparent !important;
  color: #cfc5ba !important;
  text-transform: none !important;
}
.hdr-navigation-link-bc .nav-menu-title { font-size: 11px !important; font-weight: 700; line-height: 1.15; letter-spacing: 0 !important; text-align: center; }
/* BC draws its own ::before highlight on the active link (full width, 5% ink);
   every geometry property is forced so the glyph survives on the active tile. */
.hdr-navigation-link-bc::before, .hdr-navigation-link-bc.active::before {
  content: "";
  position: static !important; inset: auto !important; transform: none !important; opacity: 1 !important; border-radius: 0 !important;
  flex: 0 0 24px;
  width: 24px !important; height: 24px !important;
  background: currentColor !important;
  -webkit-mask: var(--ic) center / 24px 24px no-repeat;
  mask: var(--ic) center / 24px 24px no-repeat;
}
.hdr-navigation-link-bc.active {
  background: #720039 !important; color: #ffffff !important;
  /* no rose edge or glow (owner, 2026-11-01): the fill alone marks it */
  box-shadow: none !important;
}
.hdr-navigation-link-bc:not(.active):active { background: rgba(244, 238, 231, 0.08) !important; }
.hdr-navigation-link-bc[href*="/casino/slots"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 3C9.5 6.5 5 8.5 5 12.5A4 4 0 0 0 11 16l-1 5h4l-1-5a4 4 0 0 0 6-3.5C18.9 8.5 14.5 6.5 12 3z'/%3E%3C/svg%3E"); }
.hdr-navigation-link-bc[href*="/games"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='8' width='18' height='9' rx='4.2'/%3E%3Cpath d='M8 12.5h2.4M9.2 11.3v2.4M15.4 11.6h.01M17.2 13.3h.01'/%3E%3C/svg%3E"); }
.hdr-navigation-link-bc[href*="/live-casino"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M10.5 9l4.5 3-4.5 3z'/%3E%3C/svg%3E"); }
.hdr-navigation-link-bc[href*="/promotions"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M20 12v8H4v-8M2 7.5h20V12H2zM12 7.5v12M12 7.5S10.5 3.5 7.5 3.5 4 7.5 4 7.5M12 7.5s1.5-4 4.5-4 3.5 4 3.5 4'/%3E%3C/svg%3E"); }
.hdr-navigation-link-bc[href*="/tournaments"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0z'/%3E%3Cpath d='M8 6H5a3 3 0 0 0 3 3.5M16 6h3a3 3 0 0 1-3 3.5M12 13v3M9 20h6M10 16h4v4h-4z'/%3E%3C/svg%3E"); }
.hdr-navigation-link-bc[href*="/jackpot"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v9M9.5 10a2.5 2 0 0 1 5 0c0 2.5-5 1.5-5 4a2.5 2 0 0 0 5 0'/%3E%3C/svg%3E"); }

/* Product pages (Casino, Games, ...) add a SUB-row (Home / Tournaments /
   Jackpots) after the main row in the same holder; BC positions the main row
   absolutely UNDER the 35px sub-row, which hid it while both were 40px. The
   reference keeps its switcher on every page, so the two rows stack: tiles
   (64) over the sub-row as text tabs (40, the Thread under the active one, no
   glyphs), and the reserved height is 104 on those pages. */
.hdr-navigation-scrollable-bc:has(~ .hdr-navigation-scrollable-bc) { position: relative !important; top: auto !important; transform: none !important; }
.hdr-navigation-scrollable-bc-holder:has(> .hdr-navigation-scrollable-bc ~ .hdr-navigation-scrollable-bc) { height: auto !important; display: flex; flex-direction: column; }
.layout-bc.has-sub-navigation { --mobile-header-navigation-height: 104px !important; }
/* For ~2s after entering a product page (and when BC re-reveals the header) it
   sets .header-bc-active: the sub-row is pushed down translateY(40px) and the
   content padded 2 x the variable, then it slides the sub-row up over the main
   row (0.24s). Stacked, both states must look the same, so the transform goes
   and the expanded state's variable is halved: 2 x 52 = the same 104. Without
   this the sub-row loaded 40px low and snapped up, and the content jumped. */
.hdr-navigation-scrollable-bc ~ .hdr-navigation-scrollable-bc { transform: none !important; transition: none !important; }
.layout-bc.has-sub-navigation.header-bc-active { --mobile-header-navigation-height: 52px !important; }
.hdr-navigation-scrollable-bc ~ .hdr-navigation-scrollable-bc { height: 40px !important; padding: 0 4px !important; }
.hdr-navigation-scrollable-bc ~ .hdr-navigation-scrollable-bc .hdr-navigation-scrollable-content { gap: 0; height: 100% !important; }
.hdr-navigation-scrollable-bc ~ .hdr-navigation-scrollable-bc .hdr-navigation-link-bc {
  position: relative; flex-direction: row; justify-content: center; min-width: 0; max-width: none;
  height: 100% !important; padding: 0 12px !important; border-radius: 0; background: transparent !important; color: #cfc5ba !important;
}
.hdr-navigation-scrollable-bc ~ .hdr-navigation-scrollable-bc .hdr-navigation-link-bc::before { display: none !important; }
.hdr-navigation-scrollable-bc ~ .hdr-navigation-scrollable-bc .nav-menu-title { font-size: 14px !important; font-weight: 500 !important; }
.hdr-navigation-scrollable-bc ~ .hdr-navigation-scrollable-bc .hdr-navigation-link-bc.active { color: #f4eee7 !important; background: transparent !important; box-shadow: none !important; }
.hdr-navigation-scrollable-bc ~ .hdr-navigation-scrollable-bc .hdr-navigation-link-bc.active .nav-menu-title { font-weight: 600 !important; }
.hdr-navigation-scrollable-bc ~ .hdr-navigation-scrollable-bc .hdr-navigation-link-bc.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #720039, #ff0062 50%, #720039);
}

/* ---- logo: the brand logo for dark (light lettering, rose dot) carries the
   reference's home button beside the wordmark
   (tools/build-logo.py, 4th colour), so it is drawn at the reference's height,
   23px, with BC's width cap lifted; the whole image links home, as BC's logo does.
   The width is explicit (115 = 23 x 360/72, the image's ratio): on desktop BC's
   flex sizing resolved width:auto to 75px and squeezed the image. Rebuild the
   logo at another ratio and this number changes with it. */
.hdr-logo-bc { height: 23px !important; width: 115px !important; min-width: 115px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
.logo-container .logo, a.logo { display: flex !important; align-items: center !important; width: auto !important; }

/* ---- buttons: sentence case; 36px is the most the 49px header holds */
.hdr-user-bc { gap: 6px; }
.hdr-user-bc .btn {
  height: 36px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.btn.register { background: #e60058 !important; color: #ffffff !important; border: 1px solid #e60058 !important; border-radius: 8px !important; font-weight: 600; }   /* setting 1: Rose AA */
.btn.sign-in {
  background: transparent !important;
  color: #f4eee7 !important;
  border: 1px solid #85797d !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 600;
}

/* ---- section headings: 19px semibold, "All ›" in burgundy (the links fix is
   off in the chosen settings), and the separator under the full row: 1px
   taupe, fading at both ends. Mobile's heading is .sectionTitleText, not
   desktop's .typography-heading. */
.sectionTitle { position: relative; align-items: center; height: auto !important; max-height: none !important; padding: 0 12px 10px !important; margin-bottom: 12px !important; }
.sectionTitle::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #a8998a 18%, #a8998a 82%, transparent);
}
.sectionTitle .sectionTitleText, .sectionTitle .typography-heading {
  font-size: 19px !important; font-weight: 600 !important; line-height: 1.2 !important; color: #f4eee7 !important;
  height: auto !important; overflow: visible !important;
}
.sectionTitle .ds-link, .sectionTitle .ds-link .link__label { color: #720039 !important; font-size: 13px !important; font-weight: 700 !important; }
.sectionTitle .ds-link .link__icon { color: #720039 !important; }

/* ---- filter chips: on the page, an edge one step stronger than the hairline,
   8px corners; selected is a plain burgundy fill (the soft halo's rose edge and
   glow removed, owner 2026-11-01), a selection rather than a call to action */
.ds-chip {
  background: transparent !important;
  border: 1px solid #6a5d63 !important;
  border-radius: 8px !important;
  color: #cfc5ba !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.ds-chip--selected {
  background: #720039 !important;
  border-color: #720039 !important;   /* the fill's own colour: no rose edge, */
  color: #ffffff !important;
  box-shadow: none !important;        /* and no glow (owner, 2026-11-01) */
}
/* the chip row scrolls sideways, which clips vertically too: room for the glow */
.casinoGamesWidgetChipWrapper { padding: 4px 4px 10px; }
.ds-chip * { color: inherit !important; }

/* ---- game tiles (no hover lift on touch): the rim light, drawn inside the tile
   on its unused ::after (taps pass through). A drop shadow can't show here:
   .casinoGameItemContent is the tile's size with overflow hidden. */
.casinoGameItem, .casinoGameImageV2Holder, .casinoGameImageV2 { border-radius: 8px !important; }
.casinoGameItem { border: 0; overflow: hidden; }
.casinoGameItem::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -18px 18px -14px rgba(0, 0, 0, 0.45);
}

/* ---- hero, with a light hairline: the banner's dark edge ran into the page.
   NOT .product-banner-bc: overflow:hidden there stops its lazy images loading */
.slider-bc .swiper { border-radius: 12px !important; overflow: hidden; border: 1px solid rgba(244, 238, 231, 0.18); }

/* ---- bottom tab bar: the reference's floating bar. Inset 8px, rounded
   12/12/8/8, a raised translucent surface with blur and a light edge; the
   active item in Register's accent (#ff5c95, 6.3:1). */
.tab-navigation-w-bc {
  left: 8px !important; right: 8px !important; bottom: 4px !important;
  width: auto !important;
  height: auto !important;          /* BC fixes 53px; padding inside it crushed the labels to 2px */
  padding: 5px 4px 6px !important;
  background: rgba(37, 25, 32, 0.94) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(244, 238, 231, 0.14) !important;
  border-radius: 12px 12px 8px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30), 0 24px 56px rgba(0, 0, 0, 0.45);
}
.tab-nav-item-bc { height: auto !important; padding: 2px !important; color: #b3a89c !important; background: transparent !important; box-shadow: none !important; }
.tab-nav-item-bc .tab-nav-title-bc { font-size: 11px !important; font-weight: 600 !important; }
.tab-nav-item-bc.active { color: #ff5c95 !important; }

/* ---- footer: left-aligned two-column groups under small-caps headings,
   hairline above, as the reference's site-foot */
.footerContainerWrapper { background: #1c1117 !important; border-top: 1px solid #3a3035; }
.footerLinkCols { display: grid !important; grid-template-columns: 1fr 1fr; align-items: start !important; gap: 18px 20px; padding: 0 14px; }
.layout-bottom-holder-bc { padding-bottom: 12px; }   /* clear of the floating bar */
.footerLinkCol { margin: 0 !important; padding: 0 !important; }
.footerLinkColTitle { justify-content: flex-start !important; text-align: left !important; margin: 0 0 8px !important; }
.footerLinkColTitle .footerLinkColText {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.12em; text-transform: uppercase; color: #cfc5ba !important;
}
.footerLinkColLinks { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 7px; }
.footerLinkColEl { border: 0 !important; padding: 0 !important; margin: 0 !important; }
.footerLinkColEl::before, .footerLinkColEl::after { display: none !important; }
.footerLinkColEl .footerLinkColText { font-size: 13px !important; color: #b3a89c !important; }
.footerCopyrights { font-size: 11px !important; text-align: left !important; padding: 0 14px; }
.footerWarningAge { color: #cfc5ba !important; border-color: #cfc5ba !important; }   /* the 18+ mark */

/* ---- faint text: BC's 40-60% alpha ink; each takes a fixed ink from the ramp */
.footerCopyrights { color: #b3a89c !important; }
.infoTime, .casinoTopWinnersWidgetNoData, .sg-n-text-row-1-bc,
.form-control-title-bc { color: #cfc5ba !important; }

/* ---- form fields: a raised field with the control edge (4.4:1; a field's
   edge needs 3:1 to read as one), and a light focus ring */
.form-control-input-bc { background: #261920 !important; border: 1px solid #85797d !important; }
.form-control-input-bc:focus-within { outline: 2px solid #f4eee7; outline-offset: 2px; }

/* ---- payments strip: absent, not empty. BetConstruct renders the PAYMENTS
   heading even with no methods configured; it returns when one is added. */
.sliderGroup:has(.horizontalSliderRow:empty) { display: none; }

/* ---- scroll-to-top: BC centres a 56px grey disc 90px up, over the content (odds,
   the footer copyright). Here it is a 40px raised control at the right, 12px above
   the floating bar (which ends 57px up). BC still decides when it shows
   (.nav-floating-btn-hide on its holder). */
.layout-bc .nav-floating-btn {
  position: fixed !important; top: auto !important; left: auto !important; right: 12px !important; bottom: 70px !important;
  width: 40px !important; height: 40px !important; min-width: 0 !important; padding: 0 !important;
  background: rgba(37, 25, 32, 0.94) !important; color: #cfc5ba !important;
  border: 1px solid rgba(244, 238, 231, 0.14) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30), 0 12px 32px rgba(0, 0, 0, 0.40);
}

/* ---- the sports widget gets a frame: a hairline card with its own heading and
   separator, so it reads as a new section rather than starting cold after the
   casino rows (feedback on live, 2026-10-28). BC renders it with no title. */
.sp-new-top-matches {
  background: #1c1117 !important; border: 1px solid #3a3035; border-radius: 12px;
  margin: 24px 8px 8px !important; padding-top: 12px; overflow: hidden;
}
.sp-new-top-matches::before {
  content: "Top matches"; display: block; padding: 0 14px 10px; margin-bottom: 4px;
  font-size: 19px; font-weight: 600; line-height: 1.2; color: #f4eee7;
  background: linear-gradient(90deg, transparent, #a8998a 18%, #a8998a 82%, transparent) left bottom / 100% 1px no-repeat;
}