/* =====================================================================
   Betarama "Grand Marquee" redesign (owner, 28 Oct 2026)
   Ivory and cream canvas, vermilion and oxblood, small brass accents;
   a modern paper theatre. The games stay dark, as an oxblood stage
   inside the cream theatre.
   Loaded LAST by layouts/betarama_io.html.erb, after style.css,
   responsive.css, sportsbook.css, page sheets and the generated
   marquee-palette.css, and every rule is scoped to body.btr-marquee so
   it only ever applies on Betarama. Base rules first, @media blocks at
   the end (max-width odd, min-width even).
   ===================================================================== */

:root {
  --mq-cream: #f6efe2;
  --mq-paper: #fbf7ef;
  --mq-raised: #f0e6d5;
  --mq-rule: #e0d2bb;
  --mq-rule-strong: #cbb795;
  --mq-ink: #2a1a17;
  --mq-ink-2: #5c4a40;
  --mq-muted: #7a6758;
  --mq-red: #a3121f;
  --mq-red-hover: #8a0e19;
  --mq-red-soft: rgba(163, 18, 31, 0.08);
  --mq-oxblood: #6e0f17;
  --mq-brass: #b8893b;
  --mq-brass-text: #8a6420;
  --mq-ivory: #fbf7ef;
  --mq-stage: #210d0f;
  --mq-stage-deep: #16090a;
  --mq-display: 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif;
  --mq-serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --mq-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --mq-head-h: 76px;
  --mq-rail-w: 232px;
}

/* ---------------------------------------------------------------------
   Dark look (owner, 29 Oct 2026: "casino sites are rarely light coloured,
   so that might annoy people unless there was a light/dark version").
   body.mq-dark is set when the visitor chose dark (site_theme cookie,
   SiteRedesignHelper#redesign_theme_dark?); the site's re-coloured sheets
   then come from the dark set (theme marquee-dark). The rules in this
   sheet read these tokens, so flipping them gives the dark Box office:
   oxblood-black paper, ivory type, a brighter red that reads on dark.
   --------------------------------------------------------------------- */
.btr-marquee.mq-dark {
  --mq-cream: #170b0d;
  --mq-paper: #211013;
  --mq-raised: #2b1619;
  --mq-rule: #3f2328;
  --mq-rule-strong: #5c353b;
  --mq-ink: #f4eadc;
  --mq-ink-2: #dacbb8;
  --mq-muted: #ad9a8c;
  --mq-red: #e0424f;
  --mq-red-hover: #ec5d69;
  --mq-red-soft: rgba(224, 66, 79, 0.14);
  --mq-brass-text: #e0b866;

  /* The older Betarama tokens the site's sheets paint with (set to cream on body.btr-marquee above), dark again. */
  --brand-orange: #d22f40;
  --brand-beige: #f4eadc;
  --dark-bg-main: #170b0d;
  --dark-bg-alt: #211013;
  --dark-bg-header: #1c0e10;
  --soft-white: #f4eadc;
  --gray-text: #ad9a8c;
  --btr-orange: #d22f40;
  --btr-orange-bright: #e0424f;
  --btr-beige: #f4eadc;
  --btr-brown: #170b0d;
  --btr-brown-alt: #211013;
  --btr-line: #3f2328;
  --btr-soft: #f4eadc;
  --btr-dim: #ad9a8c;

  --bs-primary: #d22f40;
  --bs-primary-rgb: 210, 47, 64;
  --bs-link-color: #e0424f;
  --bs-link-color-rgb: 224, 66, 79;
  --bs-link-hover-color: #ec5d69;
  --bs-link-hover-color-rgb: 236, 93, 105;
  --bs-body-bg: #170b0d;
  --bs-body-color: #f4eadc;
  --bs-border-color: #3f2328;
  --bs-emphasis-color: #f4eadc;
  --bs-secondary-color: #dacbb8;
}

/* ---------------------------------------------------------------------
   Menu colours: the folding side menu shared by the three redesigned
   sites (public/css/site_redesign/rail.css) reads these, in Box office paper, ink and red.
   --------------------------------------------------------------------- */
.btr-marquee {
  --lb-panel: var(--mq-paper);
  --lb-panel-2: var(--mq-raised);
  --lb-rule: var(--mq-rule);
  --lb-text: var(--mq-ink);
  --lb-text-2: var(--mq-ink-2);
  --lb-accent: var(--mq-red);
  --lb-accent-line: rgba(163, 18, 31, 0.4);
}

/* Old Betarama tokens re-pointed at the Grand Marquee palette. --btr-* / --brand-* / --dark-* paint the chrome in
   style.css; --ml-* is the per-site game palette every Original reads, and stays dark: the oxblood stage. --ml-info
   carries white text on game buttons, so it is a vermilion that keeps white text readable. */

body.btr-marquee {
  --brand-orange: #a3121f;
  --brand-beige: #2a1a17;
  --dark-bg-main: #f6efe2;
  --dark-bg-alt: #fbf7ef;
  --dark-bg-header: #fbf7ef;
  --soft-white: #2a1a17;
  --gray-text: #7a6758;
  --btr-orange: #a3121f;
  --btr-orange-bright: #c0262d;
  --btr-beige: #2a1a17;
  --btr-brown: #f6efe2;
  --btr-brown-alt: #fbf7ef;
  --btr-line: #e0d2bb;
  --btr-soft: #2a1a17;
  --btr-dim: #7a6758;

  --ml-bg-deepest: #16090a;
  --ml-bg-primary: #210d0f;
  --ml-bg-elevated: #2e1215;
  --ml-bg-deepest-rgb: 22, 9, 10;
  --ml-bg-primary-rgb: 33, 13, 15;
  --ml-border-primary: #4a2024;
  --ml-border-subtle: #5e2b30;
  --ml-border-primary-rgb: 74, 32, 36;
  --ml-text-muted: #9c8578;
  --ml-text-secondary: #c4b2a4;
  --ml-text-tertiary: #e0d3c6;
  --ml-text-primary: #f0e6da;
  --ml-text-bright: #fbf7ef;
  --ml-info: #b3202b;
  --ml-info-dark: #8d0f19;
  --ml-info-light: #d2434d;
  --ml-info-rgb: 179, 32, 43;
  --ml-bg-panel-deep: #3a161a;
  --ml-bg-panel-deeper: #210d0f;
  --ml-font-body: 'Inter', sans-serif;

  --bs-primary: #a3121f;
  --bs-primary-rgb: 163, 18, 31;
  --bs-link-color: #a3121f;
  --bs-link-color-rgb: 163, 18, 31;
  --bs-link-hover-color: #8a0e19;
  --bs-link-hover-color-rgb: 138, 14, 25;
  --bs-body-bg: #f6efe2;
  --bs-body-color: #2a1a17;
  --bs-border-color: #e0d2bb;
  --bs-emphasis-color: #2a1a17;
  --bs-secondary-color: #5c4a40;
}

html:has(body.btr-marquee) {
  background-color: #f6efe2;
}

/* The dark look's page colour (the tokens live on body, so the html element names it). */
html:has(body.btr-marquee.mq-dark) {
  background-color: #170b0d;
}

/* ---------------------------------------------------------------------
   1. Page canvas and type
   --------------------------------------------------------------------- */

body.btr-marquee,
.btr-marquee .main-wrpper {
  background: var(--mq-cream);
  color: var(--mq-ink);
  font-family: var(--mq-body);
}

.btr-marquee .main-content-wrp,
.btr-marquee .main-content-wrp-sports {
  background-color: var(--mq-cream);
}

.btr-marquee ::selection {
  background: var(--mq-red);
  color: var(--mq-ivory);
}

.btr-marquee a:focus-visible,
.btr-marquee button:focus-visible {
  outline: 2px solid var(--mq-red);
  outline-offset: 2px;
}

.btr-marquee .scrollbar-thin,
.btr-marquee.scrollbar-thin {
  scrollbar-color: #cbb795 transparent;
}

/* ---------------------------------------------------------------------
   2. Buttons
   --------------------------------------------------------------------- */

.btr-marquee .btn-main,
.btr-marquee .btn-theme {
  background: var(--mq-red);
  border-color: var(--mq-red);
  color: var(--mq-ivory);
  box-shadow: none;
  text-shadow: none;
}

.btr-marquee .btn-main:hover,
.btr-marquee .btn-theme:hover {
  background: var(--mq-red-hover);
  border-color: var(--mq-red-hover);
  color: var(--mq-ivory);
}

.btr-marquee .btn-main,
.btr-marquee .btn-theme {
  background-image: none;
  border-radius: 6px;
}

.btr-marquee .btn-outline {
  background: transparent;
  border: 1.5px solid var(--mq-red);
  color: var(--mq-red);
  border-radius: 6px;
}

.btr-marquee .btn-outline:hover {
  background: var(--mq-red-soft);
  color: var(--mq-red-hover);
}

.btr-marquee .btn-primary {
  --bs-btn-bg: #a3121f;
  --bs-btn-border-color: #a3121f;
  --bs-btn-color: #fbf7ef;
  --bs-btn-hover-bg: #8a0e19;
  --bs-btn-hover-border-color: #8a0e19;
  --bs-btn-hover-color: #fbf7ef;
  --bs-btn-active-bg: #6e0f17;
  --bs-btn-active-border-color: #6e0f17;
  --bs-btn-active-color: #fbf7ef;
}

.btr-marquee .nav-pills {
  --bs-nav-pills-link-active-bg: #a3121f;
  --bs-nav-pills-link-active-color: #fbf7ef;
}

/* ---------------------------------------------------------------------
   3. Header - centred masthead: menu, wordmark, menu + account
   --------------------------------------------------------------------- */

.btr-marquee .main-wrpper > header {
  background: var(--mq-paper);
  border-bottom: 1px solid var(--mq-rule);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.btr-marquee .mq-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mq-red);
  font-family: var(--mq-display);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.btr-marquee .mq-wordmark-mark {
  width: 34px;
  height: 30px;
  fill: currentColor;
  flex: 0 0 auto;
}

.btr-marquee .mq-wordmark-mark .mq-wordmark-stripe {
  fill: none;
  stroke: var(--mq-paper);
  stroke-width: 1.4;
}

.btr-marquee .main-wrpper > header .mobile-logo a,
.btr-marquee .mobile-header .logo-img {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.btr-marquee .main-wrpper > header .head_links .head_links_list a,
.btr-marquee .main-wrpper > header .head_links .head_links_list_mob a,
.btr-marquee .mobile-header .head_links .head_links_list a,
.btr-marquee .mobile-header .head_links .head_links_list_mob a {
  color: var(--mq-ink);
  font-family: var(--mq-body); /* the serif read wrong in the top bar (owner, 3 Nov 2026) */
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  position: relative;
  background: transparent;
}

.btr-marquee .main-wrpper > header .head_links_list a:hover,
.btr-marquee .main-wrpper > header .head_links_list_mob a:hover {
  color: var(--mq-red);
}

.btr-marquee .main-wrpper > header .head_links_list a.active,
.btr-marquee .main-wrpper > header .head_links_list_mob a.active,
.btr-marquee .mobile-header .head_links a.active {
  color: var(--mq-red);
  background: transparent;
}

.btr-marquee .main-wrpper > header .head_links_list a.active::after,
.btr-marquee .main-wrpper > header .head_links_list_mob a.active::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -6px;
  height: 2px;
  background: var(--mq-red);
}

.btr-marquee .btr-nav-label,
.btr-marquee .main-wrpper > header .head_links .btr-nav-label,
body.btr-marquee .mobile-header .head_links .btr-nav-label {
  color: inherit;
  font-family: var(--mq-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.btr-marquee .pm-nav-new {
  background: var(--mq-red);
  color: var(--mq-ivory);
  border-radius: 3px;
}

.btr-marquee .main-wrpper > header .btn-outline,
.btr-marquee .main-wrpper > header .btn-theme {
  min-height: 42px;
  padding: 0 22px;
  font-family: var(--mq-serif);
  font-size: 16px;
}

.btr-marquee .main-wrpper > header .btn-outline {
  border-color: transparent;
  color: var(--mq-ink);
}

.btr-marquee .main-wrpper > header .btn-outline:hover {
  border-color: var(--mq-rule-strong);
  background: transparent;
  color: var(--mq-red);
}

.btr-marquee .main-wrpper > header .currency-balance,
.btr-marquee .main-wrpper > header .navlinks-header ul.headlinks li .dropdown-toggle {
  background: var(--mq-cream);
  border: 1px solid var(--mq-rule);
  border-radius: 6px;
  color: var(--mq-ink);
}

.btr-marquee .main-wrpper > header .dropdown-menu,
.btr-marquee .mobile-header .dropdown-menu {
  background: var(--mq-paper);
  border: 1px solid var(--mq-rule-strong);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(42, 26, 23, 0.16);
}

.btr-marquee .main-wrpper > header .dropdown-item,
.btr-marquee .mobile-header .dropdown-item {
  color: var(--mq-ink-2);
}

.btr-marquee .main-wrpper > header .dropdown-item:hover,
.btr-marquee .main-wrpper > header .dropdown-item:focus,
.btr-marquee .mobile-header .dropdown-item:hover {
  background: var(--mq-raised);
  color: var(--mq-ink);
}

.btr-marquee .mobile-header {
  background: var(--mq-paper);
  border-bottom: 1px solid var(--mq-rule);
}

.btr-marquee .mobile-header .mq-wordmark {
  font-size: 32px;
  gap: 7px;
}

.btr-marquee .mobile-header .mq-wordmark-mark {
  width: 26px;
  height: 23px;
}

/* Headers inside the page (the fairness page header, SEO game heroes, game-terms heads) are not the site masthead, but
   style.css styles every header element as the fixed masthead (position: fixed, height, 240px left padding), which
   squashed them or pinned them over the masthead. Zero specificity, so their own class rules still win. */

:where(body.btr-marquee .main-wrpper > *) header {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  height: auto;
  padding: 0;
  z-index: auto;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
}

/* ---------------------------------------------------------------------
   4. Section rail (the old sidebar)
   --------------------------------------------------------------------- */

.btr-marquee aside.sidebar {
  background: var(--mq-paper);
  border-right: 1px solid var(--mq-rule);
  box-shadow: none;
}

.btr-marquee .logobox {
  background: var(--mq-paper);
}

.btr-marquee .sidebar-menus ul li a,
.btr-marquee .sidebar-menus ul li a span {
  color: var(--mq-ink-2);
  font-family: var(--mq-body);
}

.btr-marquee .sidebar-menus ul li a:hover,
.btr-marquee .sidebar-menus ul li a:hover span,
.btr-marquee .sidebar-menus ul li.active a,
.btr-marquee .sidebar-menus ul li.active a span {
  color: var(--mq-ink);
}

.btr-marquee .sidebar-menus ul li a:before {
  background: transparent;
}

.btr-marquee .sidebar-menus ul li.active a,
.btr-marquee .sidebar-menus ul li a:hover {
  background: var(--mq-cream);
}

.btr-marquee .sidebar-menus ul li:after {
  background: var(--mq-red);
  box-shadow: none;
  border-radius: 0;
  left: 0;
  right: auto;
  width: 3px;
}

/* The rail icons were drawn light for a dark rail; on paper they print in ink. */

.btr-marquee .sidebar-menus ul li a img {
  filter: brightness(0) saturate(0);
  opacity: 0.55;
}

.btr-marquee .sidebar-menus ul li.active a img,
.btr-marquee .sidebar-menus ul li a:hover img {
  opacity: 0.9;
}

/* Font icons in the same menus (Tip a Player, Rewards) take the pictures' ink, not the Classic grey. */
.btr-marquee .sidebar-menus ul li a i.sidebar-menu-icon {
  color: #000;
  opacity: 0.55;
}

.btr-marquee .sidebar-menus ul li.active a i.sidebar-menu-icon,
.btr-marquee .sidebar-menus ul li a:hover i.sidebar-menu-icon {
  opacity: 0.9;
}

/* The dark look inked the same icons black on its dark panels (pictures and font icons alike, found 3 Nov 2026):
   there they are white at the same strengths. */
.btr-marquee.mq-dark .sidebar-menus ul li a img {
  filter: brightness(0) saturate(0) invert(1);
}

.btr-marquee.mq-dark .sidebar-menus ul li a i.sidebar-menu-icon {
  color: #fff;
}

.btr-marquee .navsports h2 {
  color: var(--mq-muted);
  font-family: var(--mq-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.btr-marquee .card_sidebar {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--mq-rule);
  border-radius: 0;
  padding-top: 10px;
}

.btr-marquee .card_sidebar a.pm_menu_cta,
.btr-marquee .sidebar-menus .card_sidebar li.active a.pm_menu_cta,
.btr-marquee .sidebar-menus .card_sidebar li a.pm_menu_cta:hover {
  background: var(--mq-red);
  border-radius: 6px;
}

.btr-marquee .card_sidebar a.pm_menu_cta span,
.btr-marquee .sidebar-menus ul li a.pm_menu_cta span {
  color: var(--mq-ivory);
}

.btr-marquee .card_sidebar a.pm_menu_cta img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* ---------------------------------------------------------------------
   5. Homepage - compact paper theatre hero
   --------------------------------------------------------------------- */

.btr-marquee .btr-home {
  padding-top: 0;
}

/* ---------------------------------------------------------------------
   9. Shared homepage pieces (leaderboard, rows, IM ring, about)
   --------------------------------------------------------------------- */

.btr-marquee .wic-home-lb {
  max-width: none;
  padding: 0;
  margin: 0 0 48px;
  font-family: var(--mq-body);
}

.btr-marquee .wic-home-lb__header {
  background: var(--mq-red);
  background-image: none;
  border-radius: 8px 8px 0 0;
  padding: 18px 26px 14px;
}

.btr-marquee .wic-home-lb__title {
  color: var(--mq-ivory);
  font-family: var(--mq-display);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.btr-marquee .wic-home-lb__subtitle {
  color: #f3d9b8;
}

.btr-marquee .wic-home-lb__final {
  background: var(--mq-brass);
  color: var(--mq-ink);
}

.btr-marquee .wic-home-lb__podium {
  background: var(--mq-paper);
  border: 1px solid var(--mq-rule);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 30px 26px 22px;
}

/* The leaderboard folds away and starts open (owner, 3 Nov 2026, as on EvoJacks). The chevron points up while open. */
.btr-marquee .wic-home-lb--collapsible .wic-home-lb__header {
  position: relative;
  padding-right: 72px;
}

.btr-marquee .wic-home-lb__toggle {
  position: absolute;
  top: 50%;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  background: transparent;
  color: var(--mq-ivory);
  cursor: pointer;
}

.btr-marquee .wic-home-lb__toggle::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(2px) rotate(225deg);
  transition: transform 0.2s ease;
}

.btr-marquee .wic-home-lb__toggle.collapsed::before {
  transform: translateY(-2px) rotate(45deg);
}

.btr-marquee .wic-home-lb__toggle:hover,
.btr-marquee .wic-home-lb__toggle:focus-visible {
  border-color: var(--mq-brass);
  color: var(--mq-brass);
}

.btr-marquee .wic-home-lb__header:has(.wic-home-lb__toggle.collapsed) {
  border-radius: 8px;
}

/* Hot Prediction Markets: the heading with a View all link to the markets page, like the Originals shelf. */
.btr-marquee .pm-hot-markets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
}

.btr-marquee .pm-hot-markets-head h2 {
  margin: 0;
}

.btr-marquee .pm-hot-markets-all {
  flex-shrink: 0;
  color: var(--mq-muted);
  font-family: var(--mq-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.btr-marquee .pm-hot-markets-all:hover,
.btr-marquee .pm-hot-markets-all:focus-visible {
  color: var(--mq-red);
}

.btr-marquee .wic-home-lb__card,
.btr-marquee .wic-home-lb__card--2,
.btr-marquee .wic-home-lb__card--3 {
  background: var(--mq-cream);
  border: 1px solid var(--mq-rule-strong);
  border-radius: 6px;
  box-shadow: none;
}

.btr-marquee .wic-home-lb__card--1 {
  background: #fff;
  border: 2px solid var(--mq-red);
  box-shadow: 0 10px 26px rgba(163, 18, 31, 0.12);
}

.btr-marquee .wic-home-lb__rank:not(.wic-home-lb__rank--illustrated) {
  border: 2px solid var(--mq-paper);
  background: #cfc6b8;
  color: var(--mq-ink);
}

.btr-marquee .wic-home-lb__card--1 .wic-home-lb__rank:not(.wic-home-lb__rank--illustrated) {
  background: var(--mq-red);
  color: var(--mq-ivory);
  box-shadow: none;
}

.btr-marquee .wic-home-lb__card--3 .wic-home-lb__rank:not(.wic-home-lb__rank--illustrated) {
  background: #c49a6c;
  color: var(--mq-ink);
}

.btr-marquee .wic-home-lb__name,
.btr-marquee .wic-home-lb__wagered strong {
  color: var(--mq-ink);
}

.btr-marquee .wic-home-lb__card--1 .wic-home-lb__name,
.btr-marquee .wic-home-lb__card--1 .wic-home-lb__prize strong {
  color: var(--mq-red);
}

.btr-marquee .wic-home-lb__card--2 .wic-home-lb__prize strong {
  color: var(--mq-ink-2);
}

.btr-marquee .wic-home-lb__card--3 .wic-home-lb__prize strong {
  color: #8a5a2b;
}

.btr-marquee .wic-home-lb__wagered span,
.btr-marquee .wic-home-lb__prize span {
  color: var(--mq-muted);
}

.btr-marquee .category-row h2 {
  color: var(--mq-red);
  font-family: var(--mq-display);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.btr-marquee .category-row h2::before {
  display: none;
}

.btr-marquee .category-row,
.btr-marquee .category-row.slick-originals-row {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.btr-marquee .about-block,
.btr-marquee .btr-about-block {
  background: var(--mq-paper);
  border: 1px solid var(--mq-rule);
  border-radius: 8px;
  padding: 24px 28px 8px; /* the Classic block has no border, so it had no inner padding (owner, 3 Nov 2026) */
}

.btr-marquee .btr-about-section {
  background: var(--mq-cream);
}

.btr-marquee .btr-about-block .accordion-item,
.btr-marquee .btr-about-block .accordion-button {
  background: transparent;
  color: var(--mq-ink);
  box-shadow: none;
}

.btr-marquee .btr-about-block h2 {
  color: var(--mq-red);
  font-family: var(--mq-display);
  font-weight: 400;
  font-size: 40px;
}

.btr-marquee .btr-about-block p {
  color: var(--mq-ink-2);
}

.btr-marquee .btr-about-block p span {
  color: var(--mq-red);
}

.btr-marquee .cookies-eu {
  background: var(--mq-paper);
  border-top: 1px solid var(--mq-rule-strong);
  color: var(--mq-ink);
}

/* ---------------------------------------------------------------------
   10. Inner pages
   --------------------------------------------------------------------- */

.btr-marquee .new_banner {
  background: var(--mq-paper);
  background-image: none;
  border: 1px solid var(--mq-rule);
  border-top: 4px solid var(--mq-red);
  border-radius: 8px;
  box-shadow: none;
}

.btr-marquee .new_banner h1,
.btr-marquee .new_banner_headding h1 {
  color: var(--mq-red);
  font-family: var(--mq-display);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Low specificity on purpose (:where), so every red display heading above still wins. */

.btr-marquee :where(.main-content-wrp) :where(h1, h2, h3) {
  color: var(--mq-ink);
}

.btr-marquee .form-control,
.btr-marquee .form-select {
  background-color: #fff;
  border-color: var(--mq-rule-strong);
  color: var(--mq-ink);
}

.btr-marquee .form-control:focus,
.btr-marquee .form-select:focus {
  border-color: var(--mq-red);
  box-shadow: 0 0 0 3px var(--mq-red-soft);
}

.btr-marquee .form-control::placeholder {
  color: var(--mq-muted);
}

.btr-marquee .modal-content {
  background: var(--mq-paper);
  border: 1px solid var(--mq-rule-strong);
  border-radius: 8px;
  color: var(--mq-ink);
}

.btr-marquee .btn-close-white {
  filter: none;
}

/* On the dark look the white close button stays white (it was black on the dark search pop-up; owner, 4 Nov 2026). */
.btr-marquee.mq-dark .btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.btr-marquee .alert-info {
  --bs-alert-border-color: rgba(163, 18, 31, 0.3);
  background: var(--mq-red-soft);
  border-color: rgba(163, 18, 31, 0.3);
  color: var(--mq-ink);
}

/* Cream pages that read the game tokens (the Originals lobby, the fairness page, SEO content pages) get the light
   version of them; inside a game the dark stage values above still apply. */

.btr-marquee .originals-landing,
.btr-marquee .fairness-page,
.btr-marquee .content-page {
  --ml-bg-deepest: #f6efe2;
  --ml-bg-primary: #fbf7ef;
  --ml-bg-elevated: #f0e6d5;
  --ml-bg-deepest-rgb: 246, 239, 226;
  --ml-bg-primary-rgb: 251, 247, 239;
  --ml-border-primary: #e0d2bb;
  --ml-border-subtle: #cbb795;
  --ml-border-primary-rgb: 224, 210, 187;
  --ml-text-muted: #7a6758;
  --ml-text-secondary: #5c4a40;
  --ml-text-tertiary: #4a3a33;
  --ml-text-primary: #2a1a17;
  --ml-text-bright: #2a1a17;
  --ml-bg-panel-deep: #fbf7ef;
  --ml-bg-panel-deeper: #f0e6d5;
}

/* The dark look: the banner arrows and pause button sit on a dark disc, so their ink-coloured icons (ivory in the
   dark look) stay readable. */
.btr-marquee.mq-dark .rd-hero-nav,
.btr-marquee.mq-dark .rd-hero-pause {
  background: rgba(33, 16, 19, 0.85);
}

/* The dark look keeps those pages on the dark stage values. */

.btr-marquee.mq-dark .originals-landing,
.btr-marquee.mq-dark .fairness-page,
.btr-marquee.mq-dark .content-page {
  --ml-bg-deepest: #16090a;
  --ml-bg-primary: #210d0f;
  --ml-bg-elevated: #2e1215;
  --ml-bg-deepest-rgb: 22, 9, 10;
  --ml-bg-primary-rgb: 33, 13, 15;
  --ml-border-primary: #4a2024;
  --ml-border-subtle: #5e2b30;
  --ml-border-primary-rgb: 74, 32, 36;
  --ml-text-muted: #ad9a8c;
  --ml-text-secondary: #c4b2a4;
  --ml-text-tertiary: #e0d3c6;
  --ml-text-primary: #f0e6da;
  --ml-text-bright: #fbf7ef;
  --ml-bg-panel-deep: #3a161a;
  --ml-bg-panel-deeper: #210d0f;
}

/* SEO content (game, provider, category, Millionaire Mode and biggest-wins pages) is stored with its own light-on-dark
   colours, so it is re-coloured by class here, one class deeper than the stored rules. */

.btr-marquee .content-page .content-section,
.btr-marquee .content-page .content-section p,
.btr-marquee .content-page .content-section li,
.btr-marquee .content-page .seo-description p,
.btr-marquee .content-page .seo-crypto-section p,
.btr-marquee .content-page .seo-games-list li,
.btr-marquee .content-page .faq-item p,
.btr-marquee .content-page .info-card p,
.btr-marquee .content-page .paytable td,
.btr-marquee .content-page .wins-table td,
.btr-marquee .content-page .wins-table td time,
.btr-marquee .content-page .related-game-card span,
.btr-marquee .content-page .game-hero p {
  color: var(--mq-ink-2);
}

.btr-marquee .content-page h1,
.btr-marquee .content-page h2,
.btr-marquee .content-page h3,
.btr-marquee .content-page .faq-item h3,
.btr-marquee .content-page .info-card h3 {
  color: var(--mq-ink);
}

.btr-marquee .content-page .game-hero h1 {
  color: var(--mq-red);
  font-family: var(--mq-display);
  font-weight: 400;
}

.btr-marquee .content-page .faq-section .faq-item,
.btr-marquee .content-page .stats-grid .stat-card,
.btr-marquee .content-page .content-section .info-card,
.btr-marquee .content-page .content-section .wins-table-wrapper {
  background: var(--mq-paper);
  border-color: var(--mq-rule);
}

.btr-marquee .content-page .game-hero {
  background: var(--mq-paper);
  border: 1px solid var(--mq-rule);
}

.btr-marquee .content-page .game-hero .cta-button,
.btr-marquee .content-page .seo-play-section .game-cta-button {
  background: var(--mq-red);
  border-color: var(--mq-red);
  color: var(--mq-ivory);
}

.btr-marquee .content-page .content-page-freshness time,
.btr-marquee .content-page .game-hero .game-hero-subtitle {
  color: var(--mq-muted);
}

.btr-marquee .content-page .wins-table .payout-amount {
  color: #1d7a45;
}

.btr-marquee .content-page .highlight-box {
  border-color: rgba(163, 18, 31, 0.25);
  background: var(--mq-red-soft);
}

/* Sportsbook v2 reads its own variables. */

body.btr-marquee {
  --panel-bg: #fbf7ef;
  --brand-accent: #a3121f;
}

.btr-marquee .sb2,
.btr-marquee .sb-mybets-v2,
.btr-marquee .sb2-side {
  --sb2-panel: #fbf7ef;
  --sb2-line: rgba(42, 26, 23, 0.12);
  --sb2-accent: #a3121f;
}

.btr-marquee .sb2-side {
  color: var(--mq-ink-2);
}

/* The dark look: the sportsbook's own panels go dark too. */
body.btr-marquee.mq-dark {
  --panel-bg: #211013;
  --brand-accent: #d22f40;
}

.btr-marquee.mq-dark .sb2,
.btr-marquee.mq-dark .sb-mybets-v2,
.btr-marquee.mq-dark .sb2-side {
  --sb2-panel: #211013;
  --sb2-line: rgba(244, 234, 220, 0.12);
  --sb2-accent: #e0424f;
}

/* Odds and ends where a new background needed its text changed too. */

.btr-marquee .extrabox #loadMoreGamesBtn.btn-themes {
  color: var(--mq-red);
}

.btr-marquee .form-group label.text-white,
.btr-marquee .form-group .text-white {
  color: var(--mq-ink) !important;
}

.btr-marquee .btr-ring-card .btr-ring-card-flag {
  color: var(--mq-ivory);
}

/* Cream, not green, on the red panel (owner, 3 Nov 2026: "Clashes with the red background"); the link keeps brass. */
.btr-marquee .site-token-strip .site-token-strip-perks {
  color: var(--mq-ink);
}

.btr-marquee .card.border-success {
  background: var(--mq-paper);
  color: var(--mq-ink);
}

.btr-marquee .card .card-text a {
  color: var(--mq-red);
}

/* Instant Millionaire game switcher in the rail (instant_game_v1.css draws it in purple). */

.btr-marquee .millionaire-games-submenu .millionaire_submenu_option:after {
  background: var(--mq-red);
  box-shadow: none;
}

.btr-marquee .millionaire-games-submenu .millionaire_game_option {
  color: var(--mq-ink-2);
}

.btr-marquee .millionaire-games-submenu .millionaire_game_option:before {
  background: var(--mq-red-soft);
}

.btr-marquee .millionaire-games-submenu .millionaire_submenu_option.active .millionaire_game_option,
.btr-marquee .millionaire-games-submenu .millionaire_game_option:hover {
  color: var(--mq-ink);
}

.btr-marquee .millionaire-games-submenu .millionaire_submenu_option.active .millionaire_game_option i,
.btr-marquee .millionaire-games-submenu .millionaire_game_option:hover i {
  color: var(--mq-red);
}

/* Header account buttons: style.css styles them by id. */

body.btr-marquee .main-wrpper > header #signUpBtn,
body.btr-marquee .mobile-header #signUpBtn {
  background: var(--mq-red);
  border-color: var(--mq-red);
  color: var(--mq-ivory);
  border-radius: 6px;
}

/* Signed-in cluster: the bell and the deposit button were drawn white for a dark header. */

.btr-marquee .main-wrpper > header .bi-bell-fill,
.btr-marquee .mobile-header .bi-bell-fill {
  color: var(--mq-ink-2);
}

body.btr-marquee .navlinks-header ul.headlinks li button.user-info,
body.btr-marquee .mobile-header .header-block ul.mobile-account-actions li button.btn-enter.user-info,
body.btr-marquee .mobile-header button.user-info {
  background: var(--mq-red);
  border-color: var(--mq-red);
  color: var(--mq-ivory);
}

body.btr-marquee .main-wrpper > header #logInOutBtn {
  border-color: var(--mq-rule-strong);
  color: var(--mq-ink);
  border-radius: 6px;
}

/* The rail's tent icons are pictures, not line icons: grey them rather than flatten them to ink. */

.btr-marquee .sidebar-menus ul li a img[src$=".png"] {
  filter: grayscale(1) brightness(0.7);
  opacity: 0.8;
}

/* Staking page: its tables and notes carry their own dark colours, partly as inline style attributes in the stored
   copy, which only !important can override - kept to inline-styled elements inside .staking-info. */

.btr-marquee .staking-info [style*="background"] {
  background: var(--mq-paper) !important;
}

.btr-marquee .staking-info [style*="color"] {
  color: var(--mq-ink-2) !important;
}

.btr-marquee .card_sidebar .leaderboard_button_btr span,
.btr-marquee a.leaderboard_button_btr span {
  color: var(--mq-red);
}

.btr-marquee .sb2-slip__oddspref .sb2-slip__oddspref-text {
  color: var(--mq-muted);
}

.btr-marquee .staking-info div,
.btr-marquee .staking-info .staking-example tr,
.btr-marquee .staking-info .staking-example td {
  background: var(--mq-paper);
  border-color: var(--mq-rule);
  color: var(--mq-ink);
}

.btr-marquee .staking-info p,
.btr-marquee .staking-howitworks p {
  color: var(--mq-ink-2);
}

.btr-marquee .content-page .stat-card .stat-value {
  color: var(--mq-red);
}

.btr-marquee .card {
  --bs-card-bg: #fbf7ef;
  --bs-card-color: #2a1a17;
  --bs-card-border-color: #e0d2bb;
}

.btr-marquee .vip-tier-hero-head .vip-tier-buy {
  background: var(--mq-red);
  color: var(--mq-ivory);
}

.btr-marquee .fairness-win-card-header .fairness-win-amount {
  color: var(--mq-brass-text);
}

.btr-marquee .pmtr-invite,
.btr-marquee #track-record .pmtr-invite {
  color: var(--mq-ink-2);
}

.btr-marquee .pmtr-invite .pmtr-join-link,
.btr-marquee .input-box i.fa-clone,
.btr-marquee .input-box i.fa-clone::before,
.btr-marquee .copy-text i.fa-clone::before {
  color: var(--mq-red);
}

.btr-marquee .pm-history-table .pm-history-state-settled {
  color: #1d7a45;
}

.btr-marquee .pm-guide-col.pm-guide-good h2 {
  color: #1d7a45;
}

/* The sign-up / sign-in modal drew the old logo icon behind the form. */

body.btr-marquee #accountActionsModal .modal-content {
  background-image: none;
}

body.btr-marquee #accountActionsModal .nav-link.btn-enter.active,
body.btr-marquee #accountActionsModal .btn.btn-primary {
  color: var(--mq-ivory);
}

.btr-marquee #accountActionsModal .form-control {
  border-color: var(--mq-rule-strong);
}

.btr-marquee .foot-logo .mq-wordmark {
  font-size: 40px;
  margin-bottom: 10px;
}

/* The 18+ badge is white type on a gradient ring, drawn for a dark footer. */

.btr-marquee .eighteen_plus {
  filter: brightness(0);
  opacity: 0.75;
}

/* Notification cards carry inline dark styles in the view; on the two notification pages only, those are put back
   onto paper (only !important beats an inline style). */

.btr-marquee#notifications_index .card[style],
.btr-marquee#notifications_show .card[style] {
  background: var(--mq-paper) !important;
  border-color: var(--mq-rule) !important;
}

.btr-marquee#notifications_index .card [style*="color"],
.btr-marquee#notifications_show .card [style*="color"] {
  color: var(--mq-ink-2) !important;
}

.btr-marquee#notifications_index .card .card-title[style*="color"],
.btr-marquee#notifications_show .card .card-title[style*="color"] {
  color: var(--mq-ink) !important;
}

/* The deposit QR is drawn white on transparent for a dark page (cashier/_coinpayments_payment_partial); on cream it
   needs its own ink tile, quiet zone included, or a scanner cannot read it. */

.btr-marquee .qr-img figure {
  display: inline-block;
  padding: 16px;
  border-radius: 8px;
  background: var(--mq-ink);
}

/* Game terms: a note carries an inline old-orange colour (only !important beats an inline style). */

.btr-marquee .tab-pane [style*="#ff4c00"] {
  color: var(--mq-red) !important;
}

/* History pages colour losses from JavaScript with an inline pale pink drawn for a dark page (users/casino_history,
   transaction_records/history, referral_campaigns/index); only !important beats an inline style. */

.btr-marquee [style*="rgb(255, 143, 143)"],
.btr-marquee [style*="#ff8f8f"] {
  color: var(--mq-red) !important;
}

.btr-marquee .sidebar-menus .pm-nav-new {
  color: var(--mq-ivory);
}

/* Rewards calendar amount pill: its fill and text come from different rules. */

.btr-marquee #reward-amount-button {
  color: var(--mq-ivory);
}

/* Header icons that carry Bootstrap's text-white (subscriptions) and the white favourites star were drawn for a dark
   header and dark tiles. */

.btr-marquee .main-wrpper > header .bi-arrow-repeat,
.btr-marquee .mobile-header .bi-arrow-repeat {
  color: var(--mq-ink-2) !important;
}

.btr-marquee img[src*="favrite-ic-white"] {
  filter: brightness(0.3);
}

/* The "i" chip sits on the game artwork, so it keeps its dark backing. */

.btr-marquee .casino-game-image-wrapper .game-info-link {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}

/* The games: an oxblood stage inside the cream theatre. */

.btr-marquee .millionaire-container,
.btr-marquee .instant_millionaire,
.btr-marquee .main-content-wrp-million .slots-wrapper {
  background: var(--mq-stage);
  border-radius: 10px;
  color: var(--ml-text-primary);
}

.btr-marquee .millionaire-container {
  padding: 12px;
}

/* SEO "Play <game>" call to action: a link that now has a fill, so it gets a button's shape. */

.btr-marquee .seo-play-section .game-cta-button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}

/* Empty rail boxes (a section with nothing to list) drew a stray rule line. */

.btr-marquee .sidebar-menus .card_sidebar:not(:has(li, a)) {
  display: none;
}

/* style.css fixes these game rows at 180px. Without the homepage sidebar the tiles are wider, so the picture alone filled
   the row and the titles were cut off (and at 768-1199 they were cut in half on every site). The row grows to fit. */

.btr-marquee .slick-hot-row .slick-track,
.btr-marquee .slick-featured-row .slick-track,
.btr-marquee .slick-last-played-row .slick-track,
.btr-marquee .originals-games-row .slick-track,
.btr-marquee .slick-originals-row .slick-track {
  height: auto;
}

/* Accent fills whose text colour comes from a different rule (so the generator cannot pair them): the signed-out
   Sign In button on hover, Originals icon discs, the lotto syndicate dropdown, the wallet buttons and the legacy
   sports and account panels. Text on the accent reads as it should. */

body.btr-marquee .main-wrpper > header #logInOutBtn:hover,
body.btr-marquee .mobile-header #logInOutBtn:hover,
body.btr-marquee #logInOutBtn:hover {
  color: var(--mq-ivory);
}

.btr-marquee .originals-game-icon i,
.btr-marquee .select-items div:hover,
.btr-marquee .select-items .same-as-selected,
.btr-marquee .wickedbet-form .btn-group ul li a:hover,
.btr-marquee .odds-button:hover .odds-value,
.btr-marquee .withdraw-lst-row li.active a,
.btr-marquee .currently_in_use_box,
.btr-marquee .bet-leftbox,
.btr-marquee .quality-box {
  color: var(--mq-ivory);
}

/* The tile "i" chip keeps its hover state over the artwork. */

.btr-marquee .casino-game-image-wrapper .game-info-link:hover {
  background: #fff;
  color: var(--mq-ink);
}

/* Legacy match header: the team names set their own colour. */

.btr-marquee .bet-leftbox .teamnmbx h3,
.btr-marquee .bet-leftbox .scornm h4 {
  color: var(--mq-ivory);
}

/* Sportsbook v2 text on the vermilion accent (the source sheet writes dark text for its gold accent). */

.btr-marquee .sb2__slip #place_bet_button .btn-main,
.btr-marquee .sb2__slip #click_to_place_bet,
.btr-marquee .sb-mybets-v2 .bets-history-pills-btn.active,
.btr-marquee .sb2-match__tab.is-active .sb2-match__tab-count,
.btr-marquee .sb2-mybets__pill.is-active,
.btr-marquee .sb2-strip__badge,
.btr-marquee .sb2__tab-badge {
  color: var(--mq-ivory);
}

/* Lottery History tabs: the page rule forces a colour with !important, which the active red pill cannot carry. */

.btr-marquee #lottohistory .lotto_sort_buttons.active {
  color: var(--mq-ivory) !important;
}

/* Empty states use Bootstrap's text-white-50, invisible on cream. */

.btr-marquee .no-results-message p.text-white-50 {
  color: var(--mq-ink-2) !important;
}

.btr-marquee .no-results-message i.text-white-50 {
  color: rgba(42, 26, 23, 0.4) !important;
}

.btr-marquee .no-results-message .btn i {
  color: inherit;
}

/* Instant Million chat toggle sits in the cream masthead. */

.btr-marquee .right-panel-toggle-button {
  color: var(--mq-ink);
}

/* Instant Million live wins feed: the bottom fade sits on the dark stage panel, not on cream. */

.btr-marquee .live-wins-section .livelist:after {
  background: linear-gradient(180deg, rgba(22, 9, 10, 0) 0%, var(--mq-stage) 100%);
}

/* Instant Million chat widget and the results info alert: stage colours instead of the stock navy and blue. */

.btr-marquee .chathub-container .chathub-widget {
  --primary-color: var(--mq-red);
  background: var(--mq-stage);
  border-color: rgba(184, 137, 59, 0.3);
}

.btr-marquee .ml-themed-page .alert-info {
  background: rgba(184, 137, 59, 0.12);
  border-color: rgba(184, 137, 59, 0.35);
}

/* Originals game bar: the Grand Marquee wordmark in place of the old logo image (that image is per-site and not in git). */

.btr-marquee .millionaire-header-logo img {
  display: none;
}

.btr-marquee .millionaire-header-logo::after {
  content: 'Betarama';
  padding-left: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26'%3E%3Cg fill='%23b8893b'%3E%3Cpath d='M15 1.5l1.6 2.2-1.6.9V4z'/%3E%3Cpath d='M15 4.6L2.5 13.4h25z'/%3E%3Cpath d='M4 14.6h22v9.9H18.6V18a3.6 3.6 0 0 0-7.2 0v6.5H4z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23210d0f' stroke-width='1.4' d='M8.6 14.6v9.9M21.4 14.6v9.9'/%3E%3C/svg%3E") no-repeat left center / 27px 23px;
  color: var(--mq-ivory);
  font-family: var(--mq-display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Instant Million chat: the gem's casino theme paints navy panels inside the widget; the gold accents stay. */

.btr-marquee .chathub-container .chathub-messages,
.btr-marquee .chathub-container .chathub-message-input {
  background: var(--mq-stage-deep);
}

.btr-marquee .chathub-container .chathub-input-container {
  background: var(--mq-stage);
}

/* Sportsbook v2: the gold washes and the gold strip icons follow the vermilion accent. */

.btr-marquee .sb2-odd.is-selected,
.btr-marquee .sb2-mkt__odd.is-selected,
.btr-marquee .sb2-side__navlink.is-active,
.btr-marquee .sb2-rail__navlink.is-active {
  background: var(--mq-red-soft);
}

.btr-marquee .sb2-featured {
  border-color: rgba(163, 18, 31, 0.2);
  background: linear-gradient(180deg, rgba(163, 18, 31, 0.05), rgba(163, 18, 31, 0));
}

.btr-marquee .sb2-wc__outright {
  border-color: rgba(163, 18, 31, 0.25);
  background: linear-gradient(90deg, rgba(163, 18, 31, 0.08), rgba(163, 18, 31, 0.02));
}

.btr-marquee .sb2-strip__icon {
  filter: brightness(0) saturate(100%) invert(12%) sepia(89%) saturate(4430%) hue-rotate(345deg) brightness(83%) contrast(101%);
}

/* Section header that replaces the old per-language banner images (shared/_redesign_page_banner). */

.btr-marquee .rd-page-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 200px;
  margin: 8px 0 28px;
  overflow: hidden;
  border-radius: 8px;
  background: #f4ead8;
  border: 1px solid var(--mq-rule);
}

.btr-marquee .rd-page-banner-title {
  margin: 0 0 10px;
  color: var(--mq-red);
  font-family: var(--mq-display);
  font-size: 58px;
  font-weight: 400;
  line-height: 0.95;
}

.btr-marquee .rd-page-banner-sub {
  margin: 0;
  color: var(--mq-ink-2);
  font-size: 16px;
}

/* ---------------------------------------------------------------------
   11. Homepage width
   --------------------------------------------------------------------- */

.btr-marquee#users_land .home-wrapper > .container {
  max-width: 1480px;
}

/* ---------------------------------------------------------------------
   Homepage hero carousel (shared/_redesign_hero_carousel; owner, 28 Oct 2026):
   the hero first, then the banners set in admin. Every slide is as tall as the
   hero; the carousel takes over the hero's side margins so nothing is clipped.
   --------------------------------------------------------------------- */

.btr-marquee .rd-hero-carousel {
  position: relative;
}

.btr-marquee .rd-hero-slides:not(.slick-initialized) > .rd-hero-slide + .rd-hero-slide {
  display: none;
}

.btr-marquee .rd-hero-slides.slick-initialized .slick-track {
  display: flex;
}

.btr-marquee .rd-hero-slides.slick-initialized .slick-slide {
  float: none;
  height: auto;
}

.btr-marquee .rd-hero-banner {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  background: #f4ead8;
}

/* The art never sets the height: the hero does, and every banner fills it. */

.btr-marquee .rd-hero-banner-art {
  position: absolute;
  inset: 0;
  display: block;
}

.btr-marquee .rd-hero-banner-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.btr-marquee .rd-hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.btr-marquee .rd-hero-dots li {
  margin: 0;
}

.btr-marquee .rd-hero-dots button {
  display: block;
  width: 22px;
  height: 24px;
  padding: 10px 0;
  border: 0;
  border-radius: 2px;
  background: rgba(42, 26, 23, 0.25);
  background-clip: content-box;
  font-size: 0;
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.btr-marquee .rd-hero-dots .slick-active button {
  width: 34px;
  background-color: var(--mq-red);
}

.btr-marquee .rd-hero-dots button:focus-visible {
  outline: 2px solid var(--mq-red);
  outline-offset: 2px;
}

.btr-marquee .rd-hero-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0 0 3px;
  border: 1px solid var(--mq-rule-strong);
  border-radius: 50%;
  background: rgba(251, 247, 239, 0.85);
  color: var(--mq-ink);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btr-marquee .rd-hero-carousel:hover .rd-hero-nav,
.btr-marquee .rd-hero-nav:focus-visible {
  opacity: 1;
}

.btr-marquee .rd-hero-nav:hover {
  border-color: var(--mq-red);
  color: var(--mq-red);
}

/* Pause / play (WCAG 2.2.2): two bars while playing, a triangle while paused. */

.btr-marquee .rd-hero-pause {
  position: absolute;
  right: 16px;
  bottom: 12px;
  z-index: 3;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--mq-rule-strong);
  border-radius: 50%;
  background: rgba(251, 247, 239, 0.85);
  cursor: pointer;
}

.btr-marquee .rd-hero-pause::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 10px;
  border-left: 3px solid var(--mq-ink);
  border-right: 3px solid var(--mq-ink);
  transform: translate(-50%, -50%);
}

.btr-marquee .rd-hero-pause--paused::before {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--mq-ink);
  border-right: 0;
  transform: translate(-35%, -50%);
}

.btr-marquee .rd-hero-pause:hover,
.btr-marquee .rd-hero-pause:focus-visible {
  border-color: var(--mq-red);
}

.btr-marquee .rd-hero-nav--prev {
  left: 16px;
}

.btr-marquee .rd-hero-nav--next {
  right: 16px;
}

/* ---------------------------------------------------------------------
   12. Responsive
   --------------------------------------------------------------------- */

@media (min-width: 768px) {
  .btr-marquee .main-wrpper > header .desktop_head_container > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 24px;
  }

  .btr-marquee .main-wrpper > header #headleft {
    justify-content: flex-start;
    min-width: 0;
  }


  .btr-marquee .main-wrpper > header .mq-masthead-logo {
    display: flex;
    justify-content: center;
    margin: 0;
  }

  .btr-marquee .main-wrpper > header #headright {
    justify-content: flex-end;
    min-width: 0;
  }

  .btr-marquee .main-wrpper > header .mq-nav-left,
  .btr-marquee .main-wrpper > header .mq-nav-right {
    margin: 0;
    gap: 4px;
    flex-wrap: nowrap;
  }
}

@media (min-width: 1200px) {
  .btr-marquee .main-wrpper > header {
    height: var(--mq-head-h);
    padding: 0 32px;
    display: flex;
    align-items: center;
  }

  .btr-marquee .main-wrpper > header .desktop_head_container {
    padding: 0;
  }

  .btr-marquee aside.sidebar {
    top: var(--mq-head-h);
    min-height: calc(100% - var(--mq-head-h));
    width: var(--mq-rail-w);
  }

  .btr-marquee .logobox,
  .btr-marquee aside.sidebar .navsports .card-rw,
  .btr-marquee .sidebarbtn {
    display: none;
  }

  .btr-marquee .sidebar-menus {
    height: calc(100vh - var(--mq-head-h));
    padding: 0 0 90px; /* no gap above the first entry (owner, 3 Nov 2026) */
  }

  .btr-marquee .main-content-wrp,
  .btr-marquee .main-content-wrp-sports {
    padding-top: var(--mq-head-h);
    padding-left: calc(var(--mq-rail-w) + 16px);
  }

  /* The footer clears the rail by the rail's own width (the Classic sheet gives it the Classic menu's 240px), and
     sits flush on the homepage, which has no rail (owner, 3 Nov 2026: "The footer looks shifted over to the right"). */
  .btr-marquee .main-wrpper > footer {
    margin-left: calc(var(--mq-rail-w) + 16px);
  }

  .btr-marquee#users_land .main-wrpper > footer {
    margin-left: 0;
  }

  /* The folding side menu (public/css/site_redesign/rail.css). */
  /* The side menu's fold button sits at the left end of the top bar (owner, 3 Nov 2026; the slot is styled in
     site_redesign/rail.css). The homepage has no side menu, so it shows no button there. */
  .btr-marquee#users_land .main-wrpper > header .lb-rail-toggle-slot {
    display: none;
  }

  /* With the fold button in the top bar, the folded rail is the icons only (owner, 3 Nov 2026); at 56px a classic
     scroll bar pushed the icons off centre, so the folded rail hides it and still scrolls by wheel. */
  .btr-marquee.lb-rail-collapsed {
    --mq-rail-w: 56px;
  }

  .btr-marquee.lb-rail-collapsed aside.sidebar .sidebar-menus {
    scrollbar-width: none;
  }

  /* The homepage has no side menu (Codex's "Box office" design): the masthead navigation carries it. */
  .btr-marquee#users_land aside.sidebar {
    display: none;
  }

  .btr-marquee#users_land .main-content-wrp {
    padding-left: 0;
    padding-right: 0;
  }

  .btr-marquee#users_land .home-wrapper > .container {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (min-width: 1440px) {
  /* Signed in, the wordmark sits left, then the menu, then the account cluster - at every width from 1440 up, so it
     is in the same place on every page and at every window size (owner, 4 Nov 2026: "Why is the logo in a different
     place to every other page?"; it had moved to the centre from 1600px). Visitors keep the centred masthead. */

  .btr-marquee .main-wrpper > header.mq-signed-in .desktop_head_container > .row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .btr-marquee .main-wrpper > header.mq-signed-in .mq-masthead-logo {
    order: -1;
    justify-content: flex-start;
  }

  .btr-marquee .main-wrpper > header.mq-signed-in .mq-wordmark {
    font-size: 38px;
  }

  .btr-marquee .main-wrpper > header.mq-signed-in .head_links .btr-nav-label {
    font-size: 15px;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  /* Signed in at these widths the menu gets its own row under the wordmark and account cluster, so nothing is cut
     off; the page offset grows with it. */

  body.btr-marquee:has(.main-wrpper > header.mq-signed-in) {
    --mq-head-h: 124px;
  }

  .btr-marquee .main-wrpper > header.mq-signed-in .desktop_head_container > .row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 72px 44px;
    row-gap: 0;
  }

  .btr-marquee .main-wrpper > header.mq-signed-in .mq-masthead-logo {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
  }

  .btr-marquee .main-wrpper > header.mq-signed-in #headright {
    grid-column: 2;
    grid-row: 1;
  }

  .btr-marquee .main-wrpper > header.mq-signed-in #headleft {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    border-top: 1px solid var(--mq-rule);
  }

  .btr-marquee .main-wrpper > header.mq-signed-in .mq-wordmark {
    font-size: 38px;
  }

  /* Visitors keep the centred masthead; it just tightens. */

  .btr-marquee .main-wrpper > header:not(.mq-signed-in) .head_links .head_links_list a {
    padding: 0 7px;
  }

  .btr-marquee .main-wrpper > header:not(.mq-signed-in) .head_links .btr-nav-label {
    font-size: 15px;
  }

  .btr-marquee .main-wrpper > header .mq-wordmark {
    font-size: 38px;
  }

  .btr-marquee .main-wrpper > header #logInOutBtn,
  .btr-marquee .main-wrpper > header #signUpBtn {
    white-space: nowrap;
    padding: 0 14px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* Too narrow for the full masthead: wordmark left, the first half of the menu, the account cluster; the rest of the
     menu is in the slide-out rail. */

  .btr-marquee .main-wrpper > header .desktop_head_container > .row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .btr-marquee .main-wrpper > header .mq-masthead-logo {
    order: -1;
    justify-content: flex-start;
  }

  /* Clip sideways only, and pad the box upwards so the mask still covers the "New" badge that sits above the links. */

  .btr-marquee .main-wrpper > header #headleft {
    overflow-x: clip;
    overflow-y: visible;
    padding-top: 14px;
    margin-top: -14px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }

  .btr-marquee .main-wrpper > header .mq-nav-right {
    display: none !important;
  }

  /* Signed in, the account cluster leaves no room for a menu at these widths; the slide-out rail carries it. */

  .btr-marquee .main-wrpper > header.mq-signed-in #headleft {
    visibility: hidden;
  }
}

@media (max-width: 1199px) {
  /* The closed slide-out rail sits off screen but its shadow showed as a grey strip down the cream page edge. */

  .btr-marquee aside.sidebar:not(.show-sidebar) {
    box-shadow: none;
  }

  .btr-marquee .main-wrpper > header .mq-wordmark {
    font-size: 36px;
  }
}

@media (max-width: 767px) {
  .btr-marquee .rd-page-banner {
    min-height: 0;
    align-items: flex-end;
  }

  .btr-marquee .rd-page-banner-title {
    font-size: 40px;
  }

  .btr-marquee .mobile-header .head_links {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }

  .btr-marquee .mobile-header .head_links::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 767px) {
  /* Phones: the wordmark sits at the left at its own width, so the account buttons and menu keep the rest of the row. */

  .btr-marquee .main-wrpper > header .mq-masthead-logo {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .btr-marquee .main-wrpper > header #headright {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 479px) {
  /* Phones: the mark alone, as before the redesign, so the menu keeps its room beside the account buttons. */

  .btr-marquee .mobile-header .mq-wordmark,
  .btr-marquee .main-wrpper > header .mq-wordmark {
    font-size: 0;
    gap: 0;
  }

  .btr-marquee .mobile-header .mq-wordmark-mark,
  .btr-marquee .main-wrpper > header .mq-wordmark-mark {
    width: 32px;
    height: 28px;
  }
}

/* Homepage hero carousel: the hero's side margins move to the carousel; on phones the dots sit under the slides (the
   hero's buttons are at its foot), swiping replaces the arrows, and a banner with no phone version is shown whole. */

@media (max-width: 767px) {
  .btr-marquee .rd-hero-carousel {
    margin: 0 -12px;
  }

  .btr-marquee .rd-hero-dots {
    position: static;
    padding-top: 4px;
  }

  .btr-marquee .rd-hero-nav {
    display: none !important;
  }

  .btr-marquee .rd-hero-pause {
    top: auto;
    bottom: 0;
    right: 12px;
  }

  .btr-marquee .rd-hero-slide--no-phone .rd-hero-banner-art img {
    object-fit: contain;
  }
}

/* ---------------------------------------------------------------------
   Betarama homepage: Codex's "Box office" design (owner, 29 Oct 2026).
   A wide rotating banner (4:1 on desktop, square on phones, so a banner
   always shows whole), a ticket-stub leaderboard band, the hot markets,
   a slim Originals shelf, then the slots beside a live-tables column.
   Partials: shared/_site_landbtr and _btr_home_*.
   --------------------------------------------------------------------- */

.btr-marquee .mq-home {
  padding-top: 22px;
}

.btr-marquee .mq-home .rd-hero-carousel {
  margin: 0 0 16px;
}

.btr-marquee .mq-banner-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 4 / 1;
  padding: 0 6%;
  border: 1px solid var(--mq-rule-strong);
  background: radial-gradient(120% 160% at 88% 50%, #5a1820 0%, var(--mq-oxblood) 45%, var(--mq-stage-deep) 100%);
  color: var(--mq-ivory);
  text-decoration: none;
}

.btr-marquee .mq-banner-slide:hover,
.btr-marquee .mq-banner-slide:focus-visible {
  color: var(--mq-ivory);
}





/* The first slide is a picture (owner's pick, 4 Nov 2026): the same 4:1 box (1:1 on phones) as before, filled edge
   to edge by the desktop or the square phone version, like the admin banners. */
.btr-marquee .mq-banner-slide--picture {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #210d0f;
}

.btr-marquee .mq-banner-picture,
.btr-marquee .mq-banner-picture img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.btr-marquee .mq-banner-picture img {
  object-fit: cover;
}

/* The words over the picture are admin's Hero Text (owner, 4 Nov 2026: "I want to be able to change the text in
   admin"). They are sized in units of the slide's own width, so they scale with the picture as if drawn into it:
   the left third on desktop, the top on phones, where the picture leaves room. Long text wraps and is cut at two
   lines (one title line on phones) rather than spilling onto the games. Cream on the picture's red in both looks. */
.btr-marquee .mq-banner-slide--picture {
  container-type: inline-size;
}

.btr-marquee .mq-banner-words {
  position: absolute;
  left: 3.9cqw;
  top: 50%;
  width: 28cqw; /* stops short of the First Strike tile, which starts at 32.8% */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35cqw;
  color: #f6efe2;
  font-family: var(--mq-body);
}

.btr-marquee .mq-banner-kicker {
  color: #e0b866;
  font-size: max(10px, 1cqw);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.btr-marquee .mq-banner-big {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--mq-display);
  font-size: 6.6cqw;
  hyphens: manual;
  overflow-wrap: normal;
  word-break: keep-all;
  font-weight: 400;
  line-height: 0.92;
  text-transform: uppercase;
}

.btr-marquee .mq-banner-big-accent {
  color: #e0b866;
}

.btr-marquee .mq-banner-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: max(12px, 1.25cqw);
  line-height: 1.3;
  opacity: 0.92;
}

.btr-marquee .mq-banner-cta {
  margin-top: 0.8cqw;
  padding: 0.65cqw 1.35cqw;
  background: #b8893b;
  color: #210d0f;
  font-size: max(11px, 1.15cqw);
  font-weight: 700;
}

.btr-marquee .mq-banner-slide--picture:hover .mq-banner-cta,
.btr-marquee .mq-banner-slide--picture:focus-visible .mq-banner-cta {
  background: #e0b866;
}

@media (max-width: 767px) {
  .btr-marquee .mq-banner-words {
    left: 4.4cqw;
    right: 4.4cqw;
    top: 4.6cqw;
    width: auto;
    transform: none;
    align-items: center;
    gap: 0.8cqw;
    text-align: center;
  }

  .btr-marquee .mq-banner-kicker {
    font-size: 2.2cqw;
  }

  .btr-marquee .mq-banner-big {
    -webkit-line-clamp: 1;
    font-size: 12.4cqw;
  }

  .btr-marquee .mq-banner-line {
    -webkit-line-clamp: 2;
    font-size: 2.9cqw;
  }

  .btr-marquee .mq-banner-cta {
    margin-top: 0;
    padding: 0;
    background: none;
    color: #f6efe2;
    font-size: 2.9cqw;
  }
}

/* The winner's card: room for its rank badge above the name, and ink on its white face in the dark look too (the
   dark look's --mq-ink is cream, which vanished on white). */
.btr-marquee .wic-home-lb__podium .wic-home-lb__card--1 {
  padding-top: 22px;
}

.btr-marquee.mq-dark .wic-home-lb__card--1 .wic-home-lb__name,
.btr-marquee.mq-dark .wic-home-lb__card--1 .wic-home-lb__wagered strong {
  color: #a3121f;
}

.btr-marquee.mq-dark .wic-home-lb__card--1 .wic-home-lb__wagered span,
.btr-marquee.mq-dark .wic-home-lb__card--1 .wic-home-lb__prize span {
  color: #7a6758;
}

/* A shorter leaderboard, so the Originals are in view without scrolling (owner, 4 Nov 2026: "The whole leaderboard
   area takes up too much space"). Same podium, tighter everywhere. */
.btr-marquee .wic-home-lb {
  margin: 0 0 26px;
}

.btr-marquee .wic-home-lb__header {
  padding: 10px 26px 8px;
}

.btr-marquee .wic-home-lb__title {
  font-size: 28px;
}

.btr-marquee .wic-home-lb__subtitle {
  margin-top: 0;
  font-size: 10px;
}

.btr-marquee .wic-home-lb__toggle {
  width: 30px;
  height: 30px;
  margin-top: -15px;
}

.btr-marquee .wic-home-lb__podium {
  padding: 20px 18px 12px;
  gap: 14px;
}

.btr-marquee .wic-home-lb__card {
  padding: 18px 10px 8px;
}

.btr-marquee .wic-home-lb__name {
  margin: 0 0 2px;
  font-size: 13px;
}

.btr-marquee .wic-home-lb__wagered strong {
  font-size: 15px;
}

.btr-marquee .wic-home-lb__wagered span,
.btr-marquee .wic-home-lb__prize span {
  font-size: 9px;
}

.btr-marquee .wic-home-lb__prize {
  margin-top: 4px;
  padding-top: 4px;
}

.btr-marquee .wic-home-lb__prize strong {
  font-size: 14px;
}

.btr-marquee .wic-home-lb__cta {
  margin-top: 6px;
}

.btr-marquee .wic-home-lb__btn {
  padding: 6px 14px;
  font-size: 11px;
}

.btr-marquee .mq-home .rd-hero-slides.slick-initialized .slick-slide > div,
.btr-marquee .mq-home .rd-hero-slide {
  height: 100%;
}

.btr-marquee .mq-ticket {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  padding: 12px 26px;
  border: 1px dashed var(--mq-rule-strong);
  border-radius: 4px;
  background: var(--mq-paper);
  color: var(--mq-ink);
  text-decoration: none;
}

.btr-marquee .mq-ticket::before,
.btr-marquee .mq-ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mq-cream);
  transform: translateY(-50%);
}

.btr-marquee .mq-ticket::before {
  left: -10px;
}

.btr-marquee .mq-ticket::after {
  right: -10px;
}

.btr-marquee .mq-ticket:hover,
.btr-marquee .mq-ticket:focus-visible {
  border-color: var(--mq-red);
  color: var(--mq-ink);
}

.btr-marquee .mq-ticket-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--mq-red);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btr-marquee .mq-ticket-title {
  color: var(--mq-red);
  font-family: var(--mq-display);
  font-size: 28px;
  line-height: 1;
  text-transform: uppercase;
}

.btr-marquee .mq-ticket-link {
  margin-left: auto;
  color: var(--mq-red);
  font-weight: 600;
}

.btr-marquee .mq-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--mq-red);
}

.btr-marquee .mq-section-title {
  margin: 0;
  color: var(--mq-red);
  font-family: var(--mq-display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.btr-marquee .mq-section-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btr-marquee .mq-section-all {
  color: var(--mq-ink-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.btr-marquee .mq-section-all:hover {
  color: var(--mq-red);
}

.btr-marquee .mq-search {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--mq-rule-strong);
  border-radius: 16px;
  background: var(--mq-paper);
  color: var(--mq-ink-2);
  font-size: 13px;
  cursor: pointer;
}

.btr-marquee .mq-search:hover,
.btr-marquee .mq-search:focus-visible {
  border-color: var(--mq-red);
  color: var(--mq-ink);
}

.btr-marquee .mq-arrow {
  width: 30px;
  height: 30px;
  padding: 0 0 2px;
  border: 1px solid var(--mq-rule-strong);
  background: var(--mq-paper);
  color: var(--mq-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.btr-marquee .mq-arrow:hover,
.btr-marquee .mq-arrow:focus-visible {
  border-color: var(--mq-red);
  color: var(--mq-red);
}

.btr-marquee .mq-arrow:disabled {
  border-color: var(--mq-rule);
  color: var(--mq-ink);
  opacity: 0.35;
  cursor: default;
}

.btr-marquee .mq-shelf {
  margin: 0 0 30px;
}

.btr-marquee .mq-shelf-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(160px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.btr-marquee .mq-shelf-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--mq-rule-strong);
  background: var(--mq-stage);
  color: var(--mq-ivory);
  text-decoration: none;
  scroll-snap-align: start;
}

.btr-marquee .mq-shelf-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.btr-marquee .mq-shelf-name {
  display: block;
  padding: 7px 10px 8px;
  background: var(--mq-stage);
  font-family: var(--mq-display);
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
}

.btr-marquee .mq-shelf-card:hover,
.btr-marquee .mq-shelf-card:focus-visible {
  border-color: var(--mq-red);
  color: var(--mq-ivory);
}

.btr-marquee .mq-floor {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: 26px;
  margin: 0 0 32px;
}

.btr-marquee .mq-floor--no-live {
  grid-template-columns: minmax(0, 1fr);
}

.btr-marquee .mq-floor-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px 12px;
}

.btr-marquee .mq-floor-live-list {
  display: grid;
  gap: 14px;
}

.btr-marquee .mq-floor .casino-game-block {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.btr-marquee .mq-floor .casino-game-image-wrapper img.casino_game_preview_thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 245 / 140;
  object-fit: cover;
}

/* Prediction Markets, Sports and Lotto doors under the slots, filling the column beside the live tables
   (owner, 3 Nov 2026). The slots section is a column so the doors can take whatever height is left. */
.btr-marquee .mq-floor-slots {
  display: flex;
  flex-direction: column;
}

.btr-marquee .mq-doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  flex: 1 0 auto;
  margin-top: 26px;
}

.btr-marquee .mq-doors--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.btr-marquee .mq-doors--1 {
  grid-template-columns: minmax(0, 1fr);
}

.btr-marquee .mq-door {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  padding: 22px 48px 22px 22px;
  background: var(--mq-paper);
  border: 1px solid var(--mq-rule);
  border-radius: 8px;
  color: var(--mq-ink);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.btr-marquee .mq-door:hover,
.btr-marquee .mq-door:focus-visible {
  border-color: var(--mq-red);
  color: var(--mq-ink);
  text-decoration: none;
}

.btr-marquee .mq-door-eyebrow {
  color: var(--mq-brass-text);
  font-family: var(--mq-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.btr-marquee .mq-door-title {
  color: var(--mq-red);
  font-family: var(--mq-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.btr-marquee .mq-door-line {
  color: var(--mq-muted);
  font-family: var(--mq-body);
  font-size: 14px;
  line-height: 1.45;
}

.btr-marquee .mq-door-go {
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--mq-red);
  font-size: 30px;
  line-height: 1;
}

@media (max-width: 767px) {
  .btr-marquee .mq-doors,
  .btr-marquee .mq-doors--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1199px) {
  .btr-marquee .mq-floor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .btr-marquee .mq-floor {
    grid-template-columns: minmax(0, 1fr);
  }

  .btr-marquee .mq-floor-live-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* two live tables since 4 Nov 2026 */
  }
}

@media (max-width: 767px) {
  .btr-marquee .mq-home {
    padding-top: 12px;
  }

  .btr-marquee .mq-banner-slide {
    aspect-ratio: 1 / 1;
    padding: 0 8%;
  }

  .btr-marquee .mq-ticket {
    padding: 10px 18px;
  }

  .btr-marquee .mq-ticket-title {
    font-size: 22px;
  }

  .btr-marquee .mq-ticket-link {
    display: none;
  }

  .btr-marquee .mq-section-title {
    font-size: 28px;
  }

  .btr-marquee .mq-arrow {
    display: none;
  }

  .btr-marquee .mq-shelf-track {
    grid-auto-columns: 42%;
  }

  .btr-marquee .mq-floor-grid,
  .btr-marquee .mq-floor-live-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------
   Real product, not generated art (owner, 28 Oct 2026: "I don't want it
   looking like an AI generated site" - the wording and the template look;
   real product imagery). Section headers are plain headings
   (shared/_redesign_page_banner); the homepage is the shared lobby
   (public/css/site_redesign/rail.css). Last in the sheet so it settles
   the header rules above.
   --------------------------------------------------------------------- */

.btr-marquee .rd-page-banner {
  display: block;
  min-height: 0;
  margin: 6px 0 22px;
  padding: 0 0 16px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--mq-rule);
  background: none;
}

.btr-marquee .rd-page-banner-title {
  margin: 0 0 6px;
  font-family: var(--mq-display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--mq-ink);
}

.btr-marquee .rd-page-banner-sub {
  margin: 0;
  max-width: none;
  color: var(--mq-muted);
  font-size: 15px;
}

/* Carousel arrows sit with the pause button at the bottom right, clear of the hero copy and the game tiles. */

.btr-marquee .rd-hero-nav {
  top: auto;
  bottom: 12px;
  width: 30px;
  height: 30px;
  padding: 0 0 2px;
  font-size: 20px;
  opacity: 1;
  transform: none;
}

.btr-marquee .rd-hero-nav--prev {
  left: auto;
  right: 92px;
}

.btr-marquee .rd-hero-nav--next {
  right: 54px;
}

@media (max-width: 767px) {
  .btr-marquee .rd-page-banner-title {
    font-size: 28px;
  }
}

/* The light / dark switch in the masthead (shared/_redesign_theme_switch). */
.btr-marquee .rd-theme-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 10px;
  padding: 0;
  border: 1px solid var(--mq-rule-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--mq-ink);
  cursor: pointer;
}

.btr-marquee .rd-theme-switch svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btr-marquee .rd-theme-switch:hover,
.btr-marquee .rd-theme-switch:focus-visible {
  border-color: var(--mq-red);
  color: var(--mq-red);
}

.btr-marquee .rd-theme-footer {
  display: none;
}

@media (max-width: 991px) {
  /* No room in the phone and tablet masthead: the switch sits at the top of the footer instead. */
  .btr-marquee header .rd-theme-switch,
  .btr-marquee .mobile-header .rd-theme-switch {
    display: none;
  }

  .btr-marquee .rd-theme-footer {
    display: flex;
    justify-content: center;
    padding: 18px 0 6px;
  }
}

/* ---------------------------------------------------------------------
   One shading for every icon in the rail (owner, 4 Nov 2026: the favourites heart in purple, the active trophy in
   red, the other trophies and the bell dimmer than the rest, a red pill in the folded rail). Pictures and font icons
   alike are ink silhouettes on the light look and white on the dark look, at .55; the row under the pointer or the
   page you are on at .9. The Classic sheets paint the active picture in colour with a glow through #page selectors,
   so these carry !important. The Propose a Market pill keeps its white icon while the rail is open; folded, the pill
   goes (site_redesign/rail.css) and the icon takes the same shading as the rest.
   --------------------------------------------------------------------- */
/* The Classic copy's active rule is `body[data-site] .sidebar-menus ul li.active a img { ... !important }`, so these
   repeat the body class to outrank it; the Millionaire game entries are buttons, hence :is(a, button). */
body.btr-marquee.btr-marquee.btr-marquee[data-site] aside.sidebar :is(a, button) img {
  filter: brightness(0) saturate(0) !important;
  opacity: 0.55 !important;
}

body.btr-marquee.btr-marquee.btr-marquee[data-site] aside.sidebar :is(a, button) i {
  filter: none !important;
  color: #000 !important;
  opacity: 0.55 !important;
}

body.btr-marquee.btr-marquee.btr-marquee.mq-dark[data-site] aside.sidebar :is(a, button) img {
  filter: brightness(0) saturate(0) invert(1) !important;
}

body.btr-marquee.btr-marquee.btr-marquee.mq-dark[data-site] aside.sidebar :is(a, button) i {
  color: #fff !important;
}

body.btr-marquee.btr-marquee.btr-marquee.btr-marquee[data-site] aside.sidebar :is(a, button):hover :is(img, i),
body.btr-marquee.btr-marquee.btr-marquee.btr-marquee[data-site] aside.sidebar li.active :is(a, button) :is(img, i),
body.btr-marquee.btr-marquee.btr-marquee.btr-marquee[data-site] aside.sidebar :is(a, button).active :is(img, i),
body.btr-marquee.btr-marquee.btr-marquee.btr-marquee[data-site] aside.sidebar a.is-active i {
  opacity: 0.9 !important;
}

body.btr-marquee.btr-marquee.btr-marquee.btr-marquee[data-site]:not(.lb-rail-collapsed) aside.sidebar a.pm_menu_cta img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.9 !important;
}

/* Footer: no box behind the logo (owner, 4 Nov 2026: "The .foot-logo doesn't need a background colour"), and the
   18+ badge, drawn white on a ring, stays white on the dark look (it was inked black and vanished). */
.btr-marquee .foot-logo {
  background: transparent;
}

.btr-marquee.mq-dark .eighteen_plus {
  filter: none;
  opacity: 0.85;
}

/* The leaderboard page link lives in the red band, left of the fold button, instead of a button row under the podium
   (owner, 4 Nov 2026: "could be a link in the header area instead of taking up room"). The band's padding stays
   symmetric so the title keeps its centre. */
.btr-marquee .wic-home-lb--collapsible .wic-home-lb__header {
  padding-left: 230px;
  padding-right: 230px;
}

.btr-marquee .wic-home-lb__header-link {
  position: absolute;
  top: 50%;
  right: 66px;
  transform: translateY(-50%);
  color: var(--mq-ivory);
  font-family: var(--mq-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.btr-marquee .wic-home-lb__header-link:hover,
.btr-marquee .wic-home-lb__header-link:focus-visible {
  color: var(--mq-brass);
  border-color: var(--mq-brass);
}

@media (max-width: 767px) {
  .btr-marquee .wic-home-lb--collapsible .wic-home-lb__header {
    padding-left: 16px;
    padding-right: 60px;
  }

  .btr-marquee .wic-home-lb__header-link {
    position: static;
    display: inline-block;
    margin-top: 6px;
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   Game page bottom bar, bet cards, region pop-up (owner, 4 Nov 2026: "It's the old blue, and the old logo ... The old
   logos need to be replaced wherever they are used on the new redesigns"). The bar and its Search and Recent Winners
   panels take the page's paper, the wordmark replaces the old logo picture (SiteRedesignHelper#redesign_wordmark),
   and the bar's icons - pictures drawn in the old blues - take one shade like the rail's.
   --------------------------------------------------------------------- */

.btr-marquee nav.launcher_base,
.btr-marquee #collapseContainer,
.btr-marquee .collapse-content,
.btr-marquee .collapse-content .card.bg-default-site {
  background-color: var(--mq-paper);
}

.btr-marquee nav.launcher_base {
  border-top: 1px solid var(--mq-rule);
  --bs-navbar-color: var(--mq-muted);
  --bs-navbar-hover-color: var(--mq-ink);
  --bs-navbar-active-color: var(--mq-ink);
}

.btr-marquee .collapse-content {
  border-top: 1px solid var(--mq-rule);
}

.btr-marquee .collapse-content .card.text-light {
  color: var(--mq-ink) !important;
}

.btr-marquee .launcher_base .nav-item a,
.btr-marquee .launcher_base button.gm-btn span {
  color: var(--mq-muted);
  font-family: var(--mq-body);
}

.btr-marquee .launcher_base .nav-item a:hover,
.btr-marquee .launcher_base button.gm-btn:hover span {
  color: var(--mq-ink);
}

.btr-marquee .launcher_base button.gm-btn span.remove-fav-icon {
  color: var(--mq-red);
}

.btr-marquee .launcher_base :is(a, button) img {
  filter: brightness(0) saturate(0);
  opacity: 0.55;
}

.btr-marquee.mq-dark .launcher_base :is(a, button) img {
  filter: brightness(0) saturate(0) invert(1);
}

.btr-marquee .launcher_base :is(a, button):hover img,
.btr-marquee .launcher_base .remove-fav-icon img {
  opacity: 0.9;
}

.btr-marquee .collapse-content .search_bar img {
  filter: brightness(0) saturate(0);
  opacity: 0.55;
}

.btr-marquee.mq-dark .collapse-content .search_bar img {
  filter: brightness(0) saturate(0) invert(1);
}

.btr-marquee #recentWinnersLink:hover {
  color: var(--mq-ink);
}

.btr-marquee .launcher_logo {
  display: flex;
  align-items: center;
}

.btr-marquee .launcher_logo .mq-wordmark {
  gap: 7px;
  font-size: 32px;
}

.btr-marquee .launcher_logo .mq-wordmark-mark {
  width: 27px;
  height: 24px;
}

.btr-marquee .bet_decoration_header .mq-wordmark {
  gap: 6px;
  margin: 0 12px;
  font-size: 28px;
}

.btr-marquee .bet_decoration_header .mq-wordmark-mark {
  width: 23px;
  height: 20px;
}

/* The site's own sheets put the old logo behind the bet, deposit, message and rakeback pop-ups (as Casino Co's
   sheet already clears). */

.btr-marquee #betModal .modal-content,
.btr-marquee #depositModal .modal-content,
.btr-marquee #messageModal .modal-content,
.btr-marquee #tokenBoostClaimModal .modal-content,
.btr-marquee .rewards .modal-content {
  background-image: none;
}

.btr-marquee .bet_decoration_header stop {
  stop-color: var(--mq-red);
}

.btr-marquee .restricted_overlay {
  background: rgba(22, 9, 10, 0.86);
}

.btr-marquee .restricted_overlay button img {
  filter: brightness(0) saturate(0);
  opacity: 0.55;
}

.btr-marquee.mq-dark .restricted_overlay button img {
  filter: brightness(0) saturate(0) invert(1);
}

/* Recent Winners on the game page (owner, 4 Nov 2026: "The Recent Winners layout is poor and the font sizes are all over
   the place. Also, on the main game screen, the Recent Winners font is 'thinner' than the other 3 bottom links"): one
   type scale (headings 12px, every cell 13px), columns sized to what they hold, a readable width. (The bar link's thin look came
   from a style block in the launcher view, removed at the source.) */
.btr-marquee #recentWinnersContent .live-updatebox {
  max-width: 1100px;
  margin: 0 auto;
  font-family: var(--mq-body);
}

.btr-marquee #recentWinnersContent .winners_table table {
  table-layout: fixed;
}

.btr-marquee #recentWinnersContent .winners_table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--mq-rule);
  color: var(--mq-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left !important;
  text-transform: uppercase;
}

.btr-marquee #recentWinnersContent .winners_table th.game_name_list {
  width: 42%;
}

.btr-marquee #recentWinnersContent .winners_table th.game_name_user {
  width: 22%;
}

.btr-marquee #recentWinnersContent .winners_table th.game_name_provider {
  width: 18%;
}

.btr-marquee #recentWinnersContent .winners_table th.game_name_amount {
  width: 18%;
  text-align: right !important;
}

.btr-marquee #recentWinnersContent .winners_table td {
  padding: 8px 12px;
  vertical-align: middle;
}

.btr-marquee #recentWinnersContent .winners_table td :is(h3, h4, .provider_title, .table_amount) {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.btr-marquee #recentWinnersContent .winners_table td.game_name_list h3 {
  font-weight: 600;
}

/* The rows carry Bootstrap's text-white (an !important white): on Betarama's light look the panel is cream, so the game
   names vanished. Every cell takes the page's own text colour instead. */
.btr-marquee #recentWinnersContent .winners_table td .text-white {
  color: var(--mq-ink) !important;
}

.btr-marquee #recentWinnersContent .winners_table td.game_name_amount .live-rep {
  justify-content: flex-end;
}

.btr-marquee #recentWinnersContent .winners_table .live-img img {
  width: 44px;
  height: 30px;
  border-radius: 4px;
  object-fit: cover;
}

/* The slide-out menu as phones get it (owner, 4 Nov 2026: "There's a big space at the top, which needs to go. The
   spacing between the icons and the text is poor"). A phone is served this menu at every width, inside a second
   .sidebar-menus, so the Classic 75px top padding applied twice and the pictures had no room after them. */
.btr-marquee aside.sidebar .sidebar-menus .sidebar-menus {
  padding-top: 0;
}

.btr-marquee aside.sidebar .sidebar-menus .sidebar-menus .tab-content > .card_sidebar:first-child {
  border-top: 0;
}

.btr-marquee aside.sidebar .sidebar-menus .sidebar-menus .card_sidebar li > a > img,
.btr-marquee aside.sidebar .sidebar-menus .sidebar-menus .card_sidebar li > a > i:first-child {
  width: 24px;
  min-width: 24px;
  margin-right: 15px;
}

/* Sports My Bets cards (owner, 4 Nov 2026, checklist F1: "could this layout be improved?"). One card stretched across
   the whole sportsbook column put every label a screen's width from its amount, and the two fixed 209px lines left the
   logo off centre (the standalone settled list draws the lines straight in .bet_decoration_header, the shared card
   inside .bet_decoration_header_inner). The lines now run the card's width either side of the logo, and on wide
   screens the cards sit in a grid. */
.btr-marquee .match-box .bet_decoration_header {
  margin: 18px 0 12px;
}

.btr-marquee .match-box :is(.bet_decoration_header, .bet_decoration_header_inner):has(> svg) {
  justify-content: center;
}

.btr-marquee .match-box :is(.bet_decoration_header, .bet_decoration_header_inner):has(> svg) > svg {
  display: none;
}

.btr-marquee .match-box :is(.bet_decoration_header, .bet_decoration_header_inner):has(> svg)::before,
.btr-marquee .match-box :is(.bet_decoration_header, .bet_decoration_header_inner):has(> svg)::after {
  content: '';
  flex: 1 1 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mq-red));
  opacity: 0.5;
}

.btr-marquee .match-box :is(.bet_decoration_header, .bet_decoration_header_inner):has(> svg)::after {
  background: linear-gradient(90deg, var(--mq-red), transparent);
}

.btr-marquee .sb2-mybets .match-box .event_header {
  color: var(--mq-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.btr-marquee .sb2-mybets .match-box :is(.bet_id_number, .bet_overall_status, .bet_history_stake, .bet_history_est_payout) {
  margin-top: 8px;
  font-size: 13px;
}

@media (max-width: 767px) {
  /* The menu starts under the 64px phone header, not 20px below it. */
  .btr-marquee aside.sidebar {
    padding-top: 64px;
  }
}

@media (min-width: 992px) {
  .btr-marquee .sb2-mybets__pane:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 14px;
    align-items: start;
  }

  .btr-marquee .sb2-mybets__pane > .match-box {
    margin: 0;
  }

  .btr-marquee .sb2-mybets__pane > :not(.match-box) {
    grid-column: 1 / -1;
  }
}