/* =====================================================================
   EvoJacks "Signal" redesign (owner, 28 Oct 2026)
   Charcoal, off-white and acid lime; precise sports-editorial type.
   Loaded LAST by layouts/evojacks_com.html.erb, after style.css,
   responsive.css, sportsbook.css and page sheets, and every rule is
   scoped to body.ej-signal so it only ever applies on EvoJacks.
   Base rules first, @media blocks at the end of each section
   (max-width odd, min-width even).
   ===================================================================== */

:root {
  --sig-bg: #0b0c0d;
  --sig-bg-2: #101113;
  --sig-panel: #151719;
  --sig-panel-2: #1b1d20;
  --sig-panel-3: #23262a;
  --sig-rule: rgba(255, 255, 255, 0.11);
  --sig-rule-strong: rgba(255, 255, 255, 0.22);
  --sig-text: #f3f4ef;
  --sig-text-2: #d4d6cf;
  --sig-muted: #a2a69e;
  --sig-dim: #73776f;
  --sig-lime: #d4ff3a;
  --sig-lime-hover: #e3ff75;
  --sig-lime-soft: rgba(212, 255, 58, 0.12);
  --sig-lime-line: rgba(212, 255, 58, 0.45);
  --sig-ink: #0b0c0d;
  --sig-red: #ff5a4e;
  --sig-green: #6fe08f;
  --sig-display: 'Inter Tight', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --sig-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --sig-head-h: 72px;
  --sig-rail-w: 232px;
  --sig-radius: 4px;
}

/* ---------------------------------------------------------------------
   Menu colours: the folding side menu shared by the three redesigned
   sites (public/css/site_redesign/rail.css) reads these, in Signal charcoal and acid lime.
   --------------------------------------------------------------------- */
.ej-signal {
  --lb-panel: var(--sig-panel);
  --lb-panel-2: var(--sig-panel-2);
  --lb-rule: var(--sig-rule);
  --lb-text: var(--sig-text);
  --lb-text-2: var(--sig-text-2);
  --lb-accent: var(--sig-lime);
  --lb-accent-line: var(--sig-lime-line);
}

/* Old EvoJacks tokens re-pointed at the Signal palette. --evo-* paints the homepage pieces in style.css;
   --ml-* is the per-site game palette every Original reads (millionaire_shared.css sets the defaults, each
   site overrides them on body). --ml-info carries white text on game buttons, so it is a deep lime that keeps
   white text readable (4.7:1), not the acid lime used for chrome. */

body.ej-signal {
  --evo-ink: #0b0c0d;
  --evo-felt: #121416;
  --evo-felt-raised: #1a1c1f;
  --evo-line: #2a2d31;
  --evo-blue: #d4ff3a;
  --evo-blue-bright: #d4ff3a;
  --evo-text-dim: #a2a69e;

  --ml-bg-deepest: #0b0c0d;
  --ml-bg-primary: #131517;
  --ml-bg-elevated: #1b1d20;
  --ml-bg-deepest-rgb: 11, 12, 13;
  --ml-bg-primary-rgb: 19, 21, 23;
  --ml-border-primary: #2a2d31;
  --ml-border-subtle: #3a3d42;
  --ml-border-primary-rgb: 42, 45, 49;
  --ml-text-muted: #7a7e76;
  --ml-text-secondary: #a2a69e;
  --ml-text-tertiary: #c9cbc4;
  --ml-text-primary: #e4e6df;
  --ml-text-bright: #f7f8f3;
  --ml-info: #557f00;
  --ml-info-dark: #456800;
  --ml-info-light: #7fb310;
  --ml-info-rgb: 85, 127, 0;
  --ml-bg-panel-deep: #1d2023;
  --ml-bg-panel-deeper: #121416;
  --ml-font-body: 'Inter', sans-serif;
}

html:has(body.ej-signal) {
  background-color: #0b0c0d;
}

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

body.ej-signal,
.ej-signal .main-wrpper {
  background: var(--sig-bg);
  color: var(--sig-text);
  font-family: var(--sig-body);
}

.ej-signal .main-content-wrp,
.ej-signal .main-content-wrp-sports {
  background-color: var(--sig-bg);
}

.ej-signal h1,
.ej-signal h2,
.ej-signal h3 {
  font-family: var(--sig-display);
  letter-spacing: -0.01em;
}

.ej-signal ::selection {
  background: var(--sig-lime);
  color: var(--sig-ink);
}

.ej-signal a:focus-visible,
.ej-signal button:focus-visible {
  outline: 2px solid var(--sig-lime);
  outline-offset: 2px;
}

.ej-signal .scrollbar-thin,
.ej-signal.scrollbar-thin {
  scrollbar-color: #3a3d42 transparent;
}

/* ---------------------------------------------------------------------
   2. Buttons (shared .btn-main / .btn-theme / .btn-outline)
   --------------------------------------------------------------------- */

.ej-signal .btn-main,
.ej-signal .btn-theme {
  background: var(--sig-lime);
  border-color: var(--sig-lime);
  color: var(--sig-ink);
  box-shadow: none;
}

.ej-signal .btn-main:hover,
.ej-signal .btn-theme:hover {
  background: var(--sig-lime-hover);
  border-color: var(--sig-lime-hover);
  color: var(--sig-ink);
}

.ej-signal .btn-main,
.ej-signal .btn-theme {
  background-image: none;
  border-radius: 2px;
  font-weight: 600;
  text-shadow: none;
}

.ej-signal .btn-outline {
  background: transparent;
  border: 1px solid var(--sig-rule-strong);
  color: var(--sig-text);
  border-radius: 2px;
}

.ej-signal .btn-outline:hover {
  border-color: var(--sig-text);
  background: rgba(255, 255, 255, 0.04);
  color: var(--sig-text);
}

/* ---------------------------------------------------------------------
   3. Header (desktop) - slim full-width bar: wordmark, nav, account
   --------------------------------------------------------------------- */

.ej-signal .main-wrpper > header {
  background: rgba(11, 12, 13, 0.94);
  border-bottom: 1px solid var(--sig-rule);
  box-shadow: none;
}

.ej-signal .sig-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--sig-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--sig-text);
  white-space: nowrap;
}

.ej-signal .sig-wordmark-mark {
  width: 0.78em;
  height: 0.78em;
  margin-top: -0.12em;
  /* The spade is lime, as in the site icon (owner, 4 Nov 2026: "I like the lime spade. Let's use that" - "yes" to the
     lettering too). */
  fill: var(--sig-lime);
}

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

.ej-signal .main-wrpper > header .head_links_list a,
.ej-signal .main-wrpper > header .head_links_list_mob a {
  color: var(--sig-text-2);
  font-family: var(--sig-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.ej-signal .main-wrpper > header .head_links_list a:hover,
.ej-signal .main-wrpper > header .head_links_list_mob a:hover {
  color: var(--sig-text);
}

.ej-signal .main-wrpper > header .head_links_list a.active,
.ej-signal .main-wrpper > header .head_links_list_mob a.active {
  color: var(--sig-text);
}

.ej-signal .pm-nav-new {
  background: var(--sig-lime);
  color: var(--sig-ink);
  border-radius: 2px;
  font-weight: 700;
}

.ej-signal .main-wrpper > header .btn-outline,
.ej-signal .main-wrpper > header .btn-theme {
  min-height: 40px;
  padding: 0 22px;
  font-size: 15px;
}

.ej-signal .main-wrpper > header .currency-balance,
.ej-signal .main-wrpper > header .navlinks-header ul.headlinks li .dropdown-toggle {
  background: var(--sig-panel);
  border: 1px solid var(--sig-rule);
  border-radius: 2px;
  color: var(--sig-text);
}

.ej-signal .main-wrpper > header .dropdown-menu,
.ej-signal .mobile-header .dropdown-menu {
  background: var(--sig-panel);
  border: 1px solid var(--sig-rule-strong);
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.ej-signal .main-wrpper > header .dropdown-item,
.ej-signal .mobile-header .dropdown-item {
  color: var(--sig-text-2);
}

.ej-signal .main-wrpper > header .dropdown-item:hover,
.ej-signal .main-wrpper > header .dropdown-item:focus,
.ej-signal .mobile-header .dropdown-item:hover {
  background: var(--sig-panel-3);
  color: var(--sig-text);
}

/* 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.ej-signal .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) and phone header
   --------------------------------------------------------------------- */

.ej-signal aside.sidebar {
  background: var(--sig-bg);
  border-right: 1px solid var(--sig-rule);
  box-shadow: none;
}

.ej-signal .logobox {
  background: var(--sig-bg);
}

.ej-signal .sidebar-menus ul li a,
.ej-signal .sidebar-menus ul li a span {
  color: var(--sig-text-2);
  font-family: var(--sig-body);
}

.ej-signal .sidebar-menus ul li a:hover,
.ej-signal .sidebar-menus ul li a:hover span,
.ej-signal .sidebar-menus ul li.active a,
.ej-signal .sidebar-menus ul li.active a span {
  color: var(--sig-text);
}

.ej-signal .sidebar-menus ul li a:before {
  background: transparent;
}

.ej-signal .sidebar-menus ul li.active a,
.ej-signal .sidebar-menus ul li a:hover {
  background: var(--sig-panel);
}

.ej-signal .sidebar-menus ul li:after,
.ej-signal#sports_index .sidebar-menus ul li:after,
.ej-signal#sports_show .sidebar-menus ul li:after,
.ej-signal#matches_show .sidebar-menus ul li:after {
  background: var(--sig-lime);
  box-shadow: none;
  border-radius: 0;
  left: 0;
  right: auto;
  width: 2px;
}

.ej-signal .sidebar-menus ul li a img {
  filter: grayscale(1) brightness(1.45);
  opacity: 0.8;
}

.ej-signal .sidebar-menus ul li.active a img,
.ej-signal .sidebar-menus ul li a:hover img {
  filter: grayscale(1) brightness(2);
  opacity: 1;
}

/* Font icons in the same menus (Tip a Player, Rewards) take the pictures' white, not the Classic grey
   (owner, 3 Nov 2026: "greyer than the other icons"). */
.ej-signal .sidebar-menus ul li a i.sidebar-menu-icon {
  color: #fff;
  opacity: 0.8;
}

.ej-signal .sidebar-menus ul li.active a i.sidebar-menu-icon,
.ej-signal .sidebar-menus ul li a:hover i.sidebar-menu-icon {
  opacity: 1;
}

/* The sportsbook's sport list in the 232px rail: a size that keeps most names on one line (owner, 3 Nov 2026: "the sports
   font is pretty big and taking up to 3 lines"). */
.ej-signal .sb2-side .sb2-side__sport-link {
  font-size: 13px;
}

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

.ej-signal .card_sidebar {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--sig-rule);
  border-radius: 0;
  padding-top: 10px;
}

.ej-signal .mobile-header {
  background: rgba(11, 12, 13, 0.96);
  border-bottom: 1px solid var(--sig-rule);
}

.ej-signal .mobile-header .sig-wordmark {
  font-size: 22px;
}

/* ---------------------------------------------------------------------
   5. Homepage - hero
   --------------------------------------------------------------------- */

.ej-signal .evo-home {
  padding-top: 0;
}

/* ---------------------------------------------------------------------
   9. Homepage width
   --------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------
   9b. Shared homepage pieces restyled (leaderboard, rows, IM cards, about)
   --------------------------------------------------------------------- */

.ej-signal .main-wrpper > header .btn-theme,
.ej-signal .main-wrpper > header #signUpBtn,
.ej-signal .mobile-header .btn-theme {
  color: var(--sig-ink);
}

.ej-signal .wic-home-lb {
  max-width: none;
  padding: 0;
  margin: 0 0 48px;
  font-family: var(--sig-body);
}

.ej-signal .wic-home-lb__header {
  background: var(--sig-bg-2);
  background-image: none;
  border: 1px solid var(--sig-rule);
  border-bottom: 0;
  border-radius: 0;
  padding: 22px 26px 6px;
  text-align: left;
}

.ej-signal .wic-home-lb__title {
  font-family: var(--sig-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--sig-text);
}

.ej-signal .wic-home-lb__subtitle {
  margin-top: 6px;
  color: var(--sig-lime);
  font-size: 11px;
  letter-spacing: 0.18em;
}

.ej-signal .wic-home-lb__final {
  background: var(--sig-lime);
  color: var(--sig-ink);
  border-radius: 2px;
}

.ej-signal .wic-home-lb__podium {
  background: var(--sig-bg-2);
  border: 1px solid var(--sig-rule);
  border-top: 0;
  border-radius: 0;
  padding: 30px 26px 22px;
  gap: 14px;
}

.ej-signal .wic-home-lb__card,
.ej-signal .wic-home-lb__card--2,
.ej-signal .wic-home-lb__card--3 {
  background: var(--sig-panel);
  border: 1px solid var(--sig-rule-strong);
  border-radius: 2px;
  box-shadow: none;
}

.ej-signal .wic-home-lb__card--1 {
  border-color: var(--sig-lime);
  box-shadow: 0 0 0 1px var(--sig-lime-line);
}

.ej-signal .wic-home-lb__rank:not(.wic-home-lb__rank--illustrated) {
  border-radius: 2px;
  border: 0;
  background: #c9cbc4;
  color: var(--sig-ink);
}

.ej-signal .wic-home-lb__card--1 .wic-home-lb__rank:not(.wic-home-lb__rank--illustrated) {
  background: var(--sig-lime);
  box-shadow: none;
}

.ej-signal .wic-home-lb__card--2 .wic-home-lb__rank:not(.wic-home-lb__rank--illustrated) {
  background: #d6d8d2;
}

.ej-signal .wic-home-lb__card--3 .wic-home-lb__rank:not(.wic-home-lb__rank--illustrated) {
  background: #a88b6c;
  color: var(--sig-ink);
}

.ej-signal .wic-home-lb__name,
.ej-signal .wic-home-lb__wagered strong {
  color: var(--sig-text);
  font-family: var(--sig-display);
}

.ej-signal .wic-home-lb__card--1 .wic-home-lb__name,
.ej-signal .wic-home-lb__card--1 .wic-home-lb__prize strong {
  color: var(--sig-lime);
}

.ej-signal .wic-home-lb__card--2 .wic-home-lb__prize strong {
  color: var(--sig-text-2);
}

.ej-signal .wic-home-lb__card--3 .wic-home-lb__prize strong {
  color: #c9a988;
}

.ej-signal .wic-home-lb__wagered span,
.ej-signal .wic-home-lb__prize span {
  color: var(--sig-muted);
}

.ej-signal .wic-home-lb__btn {
  border-radius: 2px;
}

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

.ej-signal .wic-home-lb__toggle {
  position: absolute;
  top: 22px;
  right: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--sig-rule);
  border-radius: 2px;
  background: var(--sig-panel);
  color: var(--sig-text);
  cursor: pointer;
}

.ej-signal .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;
}

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

.ej-signal .wic-home-lb__toggle:hover,
.ej-signal .wic-home-lb__toggle:focus-visible {
  border-color: var(--sig-lime-line);
  color: var(--sig-lime);
}

.ej-signal .wic-home-lb__header:has(.wic-home-lb__toggle.collapsed) {
  border-bottom: 1px solid var(--sig-rule);
  padding-bottom: 22px;
}

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

.ej-signal .pm-hot-markets-head h2 {
  margin: 0;
}

.ej-signal .pm-hot-markets-all {
  flex-shrink: 0;
  color: var(--sig-text-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.ej-signal .pm-hot-markets-all:hover,
.ej-signal .pm-hot-markets-all:focus-visible {
  color: var(--sig-lime);
}

.ej-signal .category-row h2 {
  font-family: var(--sig-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sig-text);
}

.ej-signal .category-row h2::before {
  background: var(--sig-lime);
  border-radius: 0;
}

.ej-signal .evo-originals-flagship .category-row,
.ej-signal .category-row.slick-originals-row {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--sig-rule);
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.ej-signal .evo-im-strip {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 56px;
}

.ej-signal .evo-im-strip-head h2 {
  color: var(--sig-text);
  font-family: var(--sig-display);
}

.ej-signal .evo-im-strip-head p {
  color: var(--sig-muted);
}

.ej-signal .evo-im-card {
  background: var(--sig-bg-2);
  border: 1px solid var(--sig-rule);
  border-radius: 2px;
}

.ej-signal .evo-im-card:hover {
  border-color: var(--sig-lime-line);
  background: var(--sig-panel);
}

.ej-signal .evo-im-card-name {
  color: var(--sig-text);
  font-family: var(--sig-display);
}

.ej-signal .evo-im-card-line {
  color: var(--sig-muted);
}

.ej-signal .evo-im-card-cta {
  color: var(--sig-lime);
}

.ej-signal .evo-about-section {
  background: var(--sig-bg);
}

.ej-signal .evo-about-block {
  background: var(--sig-bg-2);
  border: 1px solid var(--sig-rule);
  border-radius: 0;
}

.ej-signal .evo-about-block .accordion-item,
.ej-signal .evo-about-block .accordion-button {
  background: transparent;
  color: var(--sig-text);
  box-shadow: none;
}

.ej-signal .evo-about-block h2 {
  font-family: var(--sig-display);
  color: var(--sig-text);
}

.ej-signal .evo-about-block p {
  color: var(--sig-text-2);
}

.ej-signal .evo-about-block p span,
.ej-signal .evo-about-lead {
  color: var(--sig-lime);
}

.ej-signal .evo-about-closing {
  border-color: var(--sig-lime-line);
}

.ej-signal .cookies-eu {
  background: var(--sig-panel);
  border-top: 1px solid var(--sig-rule-strong);
  color: var(--sig-text);
}

.ej-signal .token-copy-btn i {
  color: var(--sig-lime);
}

/* ---------------------------------------------------------------------
   11. Inner pages. The generated signal-palette.css re-colours everything the
   site sheets and shared sheets hard-code; these are the pieces it cannot
   reach (Bootstrap's own variables, SEO content stored with the page copy)
   and the places where a new colour needed its text changed too.
   --------------------------------------------------------------------- */

body.ej-signal {
  --bs-primary: #d4ff3a;
  --bs-primary-rgb: 212, 255, 58;
  --bs-link-color: #d4ff3a;
  --bs-link-color-rgb: 212, 255, 58;
  --bs-link-hover-color: #e3ff75;
  --bs-link-hover-color-rgb: 227, 255, 117;
  --bs-body-bg: #0b0c0d;
  --bs-body-color: #f3f4ef;
  --bs-border-color: rgba(255, 255, 255, 0.11);
}

/* Bootstrap paints tooltip text in the body background, which is black here, on its black tooltip: the header's
   "Wallet" tooltip was black on black (owner, 3 Nov 2026). */
.ej-signal .tooltip {
  --bs-tooltip-color: #f3f4ef;
  --bs-tooltip-bg: #000;
}

.ej-signal .btn-primary {
  --bs-btn-bg: #d4ff3a;
  --bs-btn-border-color: #d4ff3a;
  --bs-btn-color: #0b0c0d;
  --bs-btn-hover-bg: #e3ff75;
  --bs-btn-hover-border-color: #e3ff75;
  --bs-btn-hover-color: #0b0c0d;
  --bs-btn-active-bg: #c2ec2c;
  --bs-btn-active-border-color: #c2ec2c;
  --bs-btn-active-color: #0b0c0d;
}

.ej-signal .nav-pills {
  --bs-nav-pills-link-active-bg: #d4ff3a;
  --bs-nav-pills-link-active-color: #0b0c0d;
}

.ej-signal .nav-link.btn-bonus,
.ej-signal .nav-link.btn-bonus.active {
  background: var(--sig-lime);
  border-color: var(--sig-lime);
  color: var(--sig-ink);
}

.ej-signal .alert-info {
  --bs-alert-border-color: rgba(212, 255, 58, 0.45);
  background: var(--sig-lime-soft);
  border-color: var(--sig-lime-line);
  color: var(--sig-text);
}

.ej-signal .alert-info strong {
  color: var(--sig-text);
}

/* SEO content blocks (game, provider, Millionaire Mode and biggest-wins pages) carry their own colours in the
   stored copy, so they are re-coloured by class here. */

.ej-signal .faq-section .faq-item,
.ej-signal .stats-grid .stat-card,
.ej-signal .content-section .info-card,
.ej-signal .content-section .wins-table-wrapper {
  background: var(--sig-bg-2);
  border-color: var(--sig-rule);
}

.ej-signal .content-page .game-hero {
  background: linear-gradient(135deg, var(--sig-panel) 0%, var(--sig-bg) 100%);
  border-color: var(--sig-rule);
}

.ej-signal .game-hero .cta-button,
.ej-signal .seo-play-section .game-cta-button {
  background: var(--sig-lime);
  color: var(--sig-ink);
  border-color: var(--sig-lime);
}

.ej-signal .content-section .highlight-box {
  border-color: var(--sig-lime-line);
  background: var(--sig-lime-soft);
}

.ej-signal .related-games .provider-heading-link,
.ej-signal .card-text a,
.ej-signal .small a,
.ej-signal .pm-tips-guide a,
.ej-signal .pmtr-invite .pmtr-join-link {
  color: var(--sig-lime);
}

.ej-signal .extrabox #loadMoreGamesBtn.btn-themes {
  color: var(--sig-text);
}

.ej-signal .nav-item #most-recent-wins-tab.nav-link.active,
.ej-signal .nav-tabs .nav-link.active {
  background: var(--sig-lime);
  border-color: var(--sig-lime);
  color: var(--sig-ink);
}

.ej-signal .instant_millionaire .trigger-toggle,
.ej-signal .millionaire-trigger-stack .btn-stats,
.ej-signal .tip-button-holder .tip-jar-toggle-button {
  background: var(--sig-panel-3);
  border-color: var(--sig-rule-strong);
  color: var(--sig-text);
}

/* instant_game_v1.css paints this button with !important, so the override has to match it. */

.ej-signal .millionaire-trigger-stack .btn-stats {
  background: var(--sig-panel-3) !important;
  border-color: var(--sig-rule-strong) !important;
  color: var(--sig-text) !important;
}

/* Rewards calendar amount pill and the history pages' Filter button: their fill and text come from different rules. */

.ej-signal #reward-amount-button {
  color: var(--sig-ink);
}

.ej-signal .casino-filter-form .btn-filter,
.ej-signal .filter-group-btn .btn.btn-primary {
  background: var(--sig-lime);
  border-color: var(--sig-lime);
  color: var(--sig-ink);
}

/* manual_entry.css sets this button's text with !important, so the override has to match it. */

.ej-signal .manual-selection-actions .btn.btn-warning {
  background: transparent;
  border-color: var(--sig-lime);
  color: var(--sig-lime) !important;
}

.ej-signal .sidebar-menus .pm-nav-new {
  color: var(--sig-ink);
}

.ej-signal .ml-themed-page .alert-info {
  background: var(--sig-lime-soft);
  border-color: var(--sig-lime-line);
}

.ej-signal .chathub-container .chathub-widget {
  --primary-color: #d4ff3a;
  background: var(--sig-panel);
  border-color: var(--sig-rule);
}

.ej-signal .card_sidebar a.pm_menu_cta,
.ej-signal .sidebar-menus .card_sidebar li.active a.pm_menu_cta,
.ej-signal .sidebar-menus .card_sidebar li a.pm_menu_cta:hover {
  background: var(--sig-lime);
  border-radius: 2px;
}

.ej-signal .card_sidebar a.pm_menu_cta span,
.ej-signal .sidebar-menus ul li a.pm_menu_cta span {
  color: var(--sig-ink);
}

.ej-signal .intl-tel-input .selected-dial-code {
  color: var(--sig-text-2);
}

.ej-signal .rps-arena .rps-vs-label {
  color: var(--sig-muted);
}

.ej-signal .header_tier_chip .header_medal,
.ej-signal .profile-vip-card .profile-vip-emoji {
  color: inherit;
}

.ej-signal .input-box i.fa-clone,
.ej-signal .input-box i.fa-clone::before,
.ej-signal .copy-text i.fa-clone,
.ej-signal .copy-text i.fa-clone::before {
  color: var(--sig-lime);
}

.ej-signal .form-control,
.ej-signal .form-select {
  background-color: var(--sig-bg-2);
  border-color: var(--sig-rule-strong);
  color: var(--sig-text);
}

.ej-signal .form-control:focus,
.ej-signal .form-select:focus {
  border-color: var(--sig-lime-line);
  box-shadow: 0 0 0 3px var(--sig-lime-soft);
}

.ej-signal .form-control::placeholder {
  color: var(--sig-dim);
}

.ej-signal .modal-content {
  background: var(--sig-panel);
  border: 1px solid var(--sig-rule-strong);
  border-radius: 4px;
}

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

.ej-signal .millionaire-games-submenu .millionaire_submenu_option:after {
  background: var(--sig-lime);
  box-shadow: none;
}

.ej-signal .millionaire-games-submenu .millionaire_game_option:before {
  background: var(--sig-panel-3);
}

.ej-signal .millionaire-games-submenu .millionaire_submenu_option.active .millionaire_game_option i,
.ej-signal .millionaire-games-submenu .millionaire_game_option:hover i {
  color: var(--sig-lime);
}

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

body.ej-signal #accountActionsModal .modal-content {
  background-image: none;
}

body.ej-signal #accountActionsModal .nav-link.btn-enter.active {
  color: var(--sig-ink);
}

.ej-signal .foot-logo .sig-wordmark {
  font-size: 30px;
  margin-bottom: 10px;
}

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

.ej-signal .tab-pane [style*="#ff4c00"] {
  color: var(--sig-lime) !important;
}

/* The generic page header (FAQ, notifications, leaderboard, account pages). */

.ej-signal .new_banner {
  background: var(--sig-bg-2);
  background-image: none;
  border: 1px solid var(--sig-rule);
  border-left: 3px solid var(--sig-lime);
  border-radius: 0;
  box-shadow: none;
}

.ej-signal .new_banner h1,
.ej-signal .new_banner_headding h1 {
  color: var(--sig-text);
  font-family: var(--sig-display);
  font-weight: 800;
  letter-spacing: -0.03em;
}

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

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

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

.ej-signal .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. */

.ej-signal .slick-hot-row .slick-track,
.ej-signal .slick-featured-row .slick-track,
.ej-signal .slick-last-played-row .slick-track,
.ej-signal .originals-games-row .slick-track,
.ej-signal .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.ej-signal .main-wrpper > header #logInOutBtn:hover,
body.ej-signal .mobile-header #logInOutBtn:hover,
body.ej-signal #logInOutBtn:hover {
  color: var(--sig-ink);
}

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

/* Casino currency selector "in use" card and the legacy match header: their text pieces set their own colours. */

.ej-signal #casino_currency_modal .currently_in_use_box .withdt h3,
.ej-signal #casino_currency_modal .currently_in_use_box .withdt h6,
.ej-signal #casino_currency_modal .currently_in_use_box .balance_box,
.ej-signal #casino_currency_modal .currently_in_use_box .currently_in_use,
.ej-signal .bet-leftbox .teamnmbx h3,
.ej-signal .bet-leftbox .scornm h4 {
  color: var(--sig-ink);
}

/* The in-use currency card keeps its lime fill on hover (the generic card hover would turn it into a dark tint). */

.ej-signal #casino_currency_modal .withdraw-inbox.currently_in_use_box:hover {
  background: linear-gradient(111deg, var(--sig-lime) 10.81%, #a8cf20 100.23%);
}

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

.ej-signal #lottohistory .lotto_sort_buttons.active {
  color: var(--sig-ink) !important;
}

/* Empty-state button icons inherit the button text instead of the faint decorative icon colour. */

.ej-signal .no-results-message .btn i {
  color: inherit;
}

/* Sportsbook v2 reads its own variables: graphite panels, lime accent. */

body.ej-signal {
  --panel-bg: var(--sig-panel);
  --brand-accent: var(--sig-lime);
}

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

.ej-signal .sb2-odd.is-selected,
.ej-signal .sb2-mkt__odd.is-selected,
.ej-signal .sb2-side__navlink.is-active,
.ej-signal .sb2-rail__navlink.is-active {
  background: var(--sig-lime-soft);
}

.ej-signal .sb2-featured {
  border-color: rgba(212, 255, 58, 0.22);
  background: linear-gradient(180deg, rgba(212, 255, 58, 0.05), rgba(212, 255, 58, 0));
}

.ej-signal .sb2-wc__outright {
  border-color: rgba(212, 255, 58, 0.3);
  background: linear-gradient(90deg, rgba(212, 255, 58, 0.1), rgba(212, 255, 58, 0.02));
}

.ej-signal .sb2-strip__icon {
  filter: brightness(0) saturate(100%) invert(93%) sepia(43%) saturate(1352%) hue-rotate(15deg) brightness(104%) contrast(103%);
}

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

.ej-signal .millionaire-header-logo img {
  display: none;
}

.ej-signal .millionaire-header-logo::after {
  content: 'EvoJacks';
  padding-right: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d4ff3a' d='M12 2C9 6.5 4 9.2 4 13.2c0 2.6 2 4.3 4.2 4.3 1.3 0 2.4-.5 3.1-1.3-.3 1.9-1.1 3.6-2.6 4.8h6.6c-1.5-1.2-2.3-2.9-2.6-4.8.7.8 1.8 1.3 3.1 1.3 2.2 0 4.2-1.7 4.2-4.3C20 9.2 15 6.5 12 2z'/%3E%3C/svg%3E") no-repeat right 1px top 45% / 17px 17px;
  color: var(--sig-text);
  font-family: var(--sig-display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}

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

.ej-signal .chathub-container .chathub-messages {
  background: var(--sig-bg-2);
}

.ej-signal .chathub-container .chathub-input-container {
  background: var(--sig-panel);
}

.ej-signal .chathub-container .chathub-message-input {
  background: var(--sig-bg);
}

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

.ej-signal .rd-page-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 200px;
  margin: 8px 0 28px;
  overflow: hidden;
  border: 1px solid var(--sig-rule);
  background: var(--sig-bg-2);
}

.ej-signal .rd-page-banner-title {
  margin: 0 0 10px;
  font-family: var(--sig-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sig-text);
}

.ej-signal .rd-page-banner-sub {
  margin: 0;
  color: var(--sig-text-2);
  font-size: 16px;
}

/* ---------------------------------------------------------------------
   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.
   --------------------------------------------------------------------- */

.ej-signal .rd-hero-carousel {
  position: relative;
}

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

.ej-signal .rd-hero-slides.slick-initialized .slick-track {
  display: flex;
}

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

.ej-signal .rd-hero-banner {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  background: var(--sig-bg);
}

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

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

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

.ej-signal .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;
}

.ej-signal .rd-hero-dots li {
  margin: 0;
}

.ej-signal .rd-hero-dots button {
  display: block;
  width: 22px;
  height: 24px;
  padding: 10px 0;
  border: 0;
  border-radius: 2px;
  background: rgba(243, 244, 239, 0.35);
  background-clip: content-box;
  font-size: 0;
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.ej-signal .rd-hero-dots .slick-active button {
  width: 34px;
  background-color: var(--sig-lime);
}

.ej-signal .rd-hero-dots button:focus-visible {
  outline: 2px solid var(--sig-lime);
  outline-offset: 2px;
}

.ej-signal .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(--sig-rule);
  border-radius: 50%;
  background: rgba(11, 12, 13, 0.6);
  color: var(--sig-text);
  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;
}

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

.ej-signal .rd-hero-nav:hover {
  border-color: var(--sig-lime);
  color: var(--sig-lime);
}

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

.ej-signal .rd-hero-pause {
  position: absolute;
  right: 16px;
  bottom: 12px;
  z-index: 3;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--sig-rule);
  border-radius: 50%;
  background: rgba(11, 12, 13, 0.6);
  cursor: pointer;
}

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

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

.ej-signal .rd-hero-pause:hover,
.ej-signal .rd-hero-pause:focus-visible {
  border-color: var(--sig-lime);
}

.ej-signal .rd-hero-nav--prev {
  left: 16px;
}

.ej-signal .rd-hero-nav--next {
  right: 16px;
}

/* ---------------------------------------------------------------------
   10. Responsive
   --------------------------------------------------------------------- */

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

  .ej-signal .main-wrpper > header .desktop_head_container {
    padding: 0;
  }

  .ej-signal .main-wrpper > header .mobile-logo {
    display: flex;
    align-items: center;
    margin: 0 40px 0 0;
  }

  .ej-signal .main-wrpper > header #headleft {
    justify-content: flex-start;
  }

  /* The side menu's fold button, left of the logo (owner, 3 Nov 2026): the slot is styled in site_redesign/rail.css. */

  .ej-signal .main-wrpper > header .head_links {
    margin: 0 auto;
    gap: 6px;
  }

  .ej-signal aside.sidebar {
    top: var(--sig-head-h);
    min-height: calc(100% - var(--sig-head-h));
    width: var(--sig-rail-w);
  }

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

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

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

  /* The footer clears the rail by the rail's own width - the Classic sheet gives it the Classic menu's 240px, which
     left a gap beside the folded rail (found with Betarama's footer, 3 Nov 2026). */
  .ej-signal .main-wrpper > footer {
    margin-left: calc(var(--sig-rail-w) + 16px);
  }

  /* The folding side menu (public/css/site_redesign/rail.css). */
  /* With the fold button in the header, the folded rail is the icons only (owner, 3 Nov 2026). */
  .ej-signal.lb-rail-collapsed {
    --sig-rail-w: 56px;
  }

  /* At 56px a classic scroll bar (about 15px) pushed the icons off centre; the folded rail still scrolls by wheel. */
  .ej-signal.lb-rail-collapsed aside.sidebar .sidebar-menus {
    scrollbar-width: none;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* Signed in, the account cluster leaves no room for the menu at these widths (it ran off the edge before the
     redesign too); the slide-out rail carries it. */

  .ej-signal .main-wrpper > header.sig-signed-in .head_links {
    display: none !important;
  }
}

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

  .ej-signal .rd-page-banner-title {
    font-size: 28px;
  }

  .ej-signal .rd-page-banner-sub {
    font-size: 14px;
  }

  .ej-signal .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);
  }

  .ej-signal .mobile-header .head_links::-webkit-scrollbar {
    display: none;
  }
}

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

  .ej-signal .mobile-header .sig-wordmark {
    font-size: 0;
    gap: 0;
  }

  .ej-signal .mobile-header .sig-wordmark-mark {
    width: 28px;
    height: 28px;
    margin: 0;
  }
}

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

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

  .ej-signal .rd-hero-dots {
    position: static;
    padding-top: 4px;
  }

  .ej-signal .rd-hero-nav {
    display: none !important;
  }

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

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

/* ---------------------------------------------------------------------
   EvoJacks homepage: the "Signal" concept of 26 Oct 2026 (owner, 3 Nov
   2026: "I prefer this one"). The wide hero - headline left, the chrome
   spade and the banners right - then the product bar, the leaderboard
   podium, the hot markets, the Originals ribbon, the casino browser, the
   Prediction Markets doors full width. Partials:
   shared/_site_landevo_redesign, _evo_signal_* and _evo_home_*.
   --------------------------------------------------------------------- */

.ej-signal .ej-home {
  padding-top: 12px;
}

/* The hero: two columns, copy and art, 430px tall; it is the first slide
   of the homepage carousel and sets the height the banner slides fill. */

.ej-signal .ej-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  min-height: 430px;
  overflow: hidden;
  border-radius: var(--sig-radius);
  background: var(--sig-bg-2);
}

.ej-signal .ej-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 32px 48px 44px;
}

.ej-signal .ej-hero-title {
  margin: 0 0 18px;
  color: var(--sig-text);
  font-family: var(--sig-display);
  font-size: clamp(44px, 4.8vw, 72px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.ej-signal .ej-hero-title-accent {
  display: block;
  color: var(--sig-lime);
}

.ej-signal .ej-hero-sub {
  margin: 0 0 22px;
  color: var(--sig-text-2);
  font-size: 20px;
  line-height: 1.3;
}

.ej-signal .ej-hero-offer {
  align-self: flex-start;
  margin: -6px 0 20px;
  padding: 6px 12px;
  border: 1px solid var(--sig-lime-line);
  border-radius: var(--sig-radius);
  color: var(--sig-lime);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ej-signal .ej-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ej-signal .ej-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid var(--sig-lime);
  border-radius: var(--sig-radius);
  background: var(--sig-lime);
  color: var(--sig-ink);
  font-family: var(--sig-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.ej-signal .ej-hero-btn:hover,
.ej-signal .ej-hero-btn:focus-visible {
  background: var(--sig-lime-hover);
  border-color: var(--sig-lime-hover);
  color: var(--sig-ink);
}

.ej-signal .ej-hero-btn--ghost {
  border-color: var(--sig-rule-strong);
  background: transparent;
  color: var(--sig-text);
}

.ej-signal .ej-hero-btn--ghost:hover,
.ej-signal .ej-hero-btn--ghost:focus-visible {
  border-color: var(--sig-lime-line);
  background: transparent;
  color: var(--sig-text);
}

.ej-signal .ej-hero-proof {
  margin: 22px 0 0;
  color: var(--sig-muted);
  font-size: 13px;
}

/* The art panel rotates - the spade, then the admin banners - while the copy stays (owner, 3 Nov 2026). The carousel
   fills the panel, so every slide is the panel's size; the hero's copy column sets the height. */

.ej-signal .ej-hero-art {
  position: relative;
  min-height: 100%;
}

.ej-signal .ej-hero-art .rd-hero-carousel {
  position: absolute;
  inset: 0 0 30px 0; /* a strip under the pictures for the dots, the arrows and the pause button */
  margin: 0;
}

/* With no banner showing the spade stands alone and fills the panel, strip included. */

.ej-signal .ej-hero-art > .ej-hero-spade {
  position: absolute;
  inset: 0;
  margin: 0;
}

.ej-signal .ej-hero-art .rd-hero-slides,
.ej-signal .ej-hero-art .slick-list,
.ej-signal .ej-hero-art .slick-track,
.ej-signal .ej-hero-art .rd-hero-slide,
.ej-signal .ej-hero-art .rd-hero-slides.slick-initialized .slick-slide > div,
.ej-signal .ej-hero-art .ej-hero-spade {
  height: 100%;
}

.ej-signal .ej-hero-spade {
  position: relative;
}

.ej-signal .ej-hero-spade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% center;
}

/* The spade fades into the copy side, as in the picture, instead of meeting it on a hard edge. The banners are cards
   and keep their own edge. */

.ej-signal .ej-hero-spade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--sig-bg-2) 0%, rgba(16, 17, 19, 0) 24%);
  pointer-events: none;
}

/* The EvoJacks banners are drawn landscape at the panel's shape (1528 x 840 for 764 x 420), so they fill it. */

.ej-signal .ej-hero-art .rd-hero-banner {
  background: var(--sig-bg-2);
}

/* A banner that is not the panel's shape (an older tall one still in the database) shows whole rather than cropped. */

.ej-signal .ej-hero-art .rd-hero-banner-art img {
  object-fit: contain;
}

/* The dots, the arrows and the pause button sit in the strip under the pictures, never on a banner. */

.ej-signal .ej-hero-art .rd-hero-dots {
  left: 36px;
  right: auto;
  bottom: -22px;
  justify-content: flex-start;
}

.ej-signal .ej-hero-art .rd-hero-nav {
  top: auto;
  bottom: -30px;
  width: 30px;
  height: 30px;
  padding: 0 0 2px;
  font-size: 22px;
  opacity: 1;
  transform: none;
}

.ej-signal .ej-hero-art .rd-hero-nav--prev {
  left: auto;
  right: 84px;
}

.ej-signal .ej-hero-art .rd-hero-nav--next {
  right: 42px;
}

.ej-signal .ej-hero-art .rd-hero-pause {
  right: 0;
  bottom: -30px;
}

/* The product bar: one tab per product, the promoted links as chips. */

.ej-signal .ej-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  margin: 0 0 26px;
  border-bottom: 1px solid var(--sig-rule);
}

.ej-signal .ej-strip-tabs {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.ej-signal .ej-strip-tabs::-webkit-scrollbar {
  display: none;
}

.ej-signal .ej-strip-tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 9px;
  padding: 16px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--sig-text-2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.ej-signal .ej-strip-tab svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ej-signal .ej-strip-tab:hover,
.ej-signal .ej-strip-tab:focus-visible {
  color: var(--sig-text);
}

.ej-signal .ej-strip-tab--active {
  border-bottom-color: var(--sig-lime);
  color: var(--sig-text);
}

.ej-signal .ej-strip-chips {
  display: flex;
  flex: none;
  gap: 8px;
  margin-left: auto;
  padding: 10px 0;
}

.ej-signal .ej-strip-chip {
  padding: 6px 10px;
  border: 1px solid var(--sig-rule);
  border-radius: var(--sig-radius);
  background: var(--sig-panel);
  color: var(--sig-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.ej-signal .ej-strip-chip:hover,
.ej-signal .ej-strip-chip:focus-visible {
  border-color: var(--sig-lime-line);
  color: var(--sig-text);
}

.ej-signal .ej-browser {
  margin: 0 0 12px;
}

/* The Prediction Markets doors, full width (owner, 3 Nov 2026). */

.ej-signal .ej-feature {
  margin: 8px 0 36px;
  padding-top: 28px;
  border-top: 1px solid var(--sig-rule);
}

.ej-signal .ej-feature-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.ej-signal .ej-feature-title {
  margin: 0;
  color: var(--sig-text);
  font-family: var(--sig-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.ej-signal .ej-feature-all {
  color: var(--sig-lime);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.ej-signal .ej-door-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ej-signal .ej-door {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--sig-rule);
  border-radius: var(--sig-radius);
  background: var(--sig-panel);
  color: var(--sig-text);
  text-decoration: none;
}

.ej-signal .ej-door:hover,
.ej-signal .ej-door:focus-visible {
  border-color: var(--sig-lime-line);
  color: var(--sig-text);
}

.ej-signal .ej-door-img {
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
}

.ej-signal .ej-door-text {
  display: grid;
  gap: 4px;
}

.ej-signal .ej-door-title {
  font-family: var(--sig-display);
  font-size: 17px;
  font-weight: 700;
}

.ej-signal .ej-door-line {
  color: var(--sig-muted);
  font-size: 13px;
  line-height: 1.35;
}

.ej-signal .ej-door-go {
  color: var(--sig-muted);
  font-size: 24px;
  line-height: 1;
  text-align: right;
}

.ej-signal .ej-browser-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ej-signal .ej-browser-title {
  margin: 0;
  color: var(--sig-text);
  font-family: var(--sig-display);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.ej-signal .ej-browser-all {
  color: var(--sig-lime);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.ej-signal .ej-browser-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ej-signal .ej-browser-search {
  display: inline-flex;
  flex: 1 1 220px;
  align-items: center;
  gap: 10px;
  max-width: 340px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--sig-rule-strong);
  border-radius: 20px;
  background: var(--sig-bg-2);
  color: var(--sig-muted);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.ej-signal .ej-browser-search svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.ej-signal .ej-browser-search:hover,
.ej-signal .ej-browser-search:focus-visible {
  border-color: var(--sig-lime-line);
  color: var(--sig-text);
}

.ej-signal .ej-browser-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ej-signal .ej-browser-tab {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--sig-rule);
  border-radius: 17px;
  background: transparent;
  color: var(--sig-text-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.ej-signal .ej-browser-tab:hover {
  border-color: var(--sig-rule-strong);
  color: var(--sig-text);
}

.ej-signal .ej-browser-tab[aria-selected="true"] {
  border-color: var(--sig-lime);
  background: var(--sig-lime);
  color: var(--sig-ink);
}

.ej-signal .ej-browser-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 14px;
}

.ej-signal .ej-browser-panel[hidden] {
  display: none;
}

.ej-signal .ej-browser-panel .casino-game-block {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.ej-signal .ej-browser-panel .casino-game-image-wrapper img.casino_game_preview_thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 245 / 140;
  object-fit: cover;
}

.ej-signal .ej-ribbon {
  margin: 0 0 32px;
  padding-top: 22px;
  border-top: 1px solid var(--sig-rule);
}

.ej-signal .ej-ribbon-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ej-signal .ej-ribbon-title {
  margin: 0;
  color: var(--sig-text);
  font-family: var(--sig-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ej-signal .ej-ribbon-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ej-signal .ej-ribbon-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sig-text-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.ej-signal .ej-ribbon-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0 0 2px;
  border: 1px solid var(--sig-rule);
  border-radius: 2px;
  background: var(--sig-panel);
  color: var(--sig-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ej-signal .ej-ribbon-arrow:hover,
.ej-signal .ej-ribbon-arrow:focus-visible {
  border-color: var(--sig-lime-line);
  color: var(--sig-lime);
}

.ej-signal .ej-ribbon-arrow:disabled {
  border-color: var(--sig-rule);
  color: var(--sig-text);
  opacity: 0.35;
  cursor: default;
}

.ej-signal .ej-ribbon-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.ej-signal .ej-ribbon-card {
  position: relative;
  display: flex;
  align-items: center;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--sig-rule);
  border-radius: var(--sig-radius);
  background: var(--sig-panel);
  color: var(--sig-text);
  text-decoration: none;
  scroll-snap-align: start;
}

.ej-signal .ej-ribbon-card:hover,
.ej-signal .ej-ribbon-card:focus-visible {
  border-color: var(--sig-lime-line);
  color: var(--sig-text);
}

.ej-signal .ej-ribbon-name {
  position: relative;
  z-index: 1;
  max-width: 55%;
  padding: 0 6px 0 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
}

.ej-signal .ej-ribbon-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 35%);
}

@media (max-width: 1439px) {
  /* Seven tabs and four chips do not share a row below 1440; the chips are in the side menu. With the side menu open
     at 1440-1600 the chips wrap to a right-aligned second row under the tabs. */
  .ej-signal .ej-strip-chips {
    display: none;
  }
}

@media (max-width: 991px) {
  .ej-signal .ej-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 380px;
  }

  .ej-signal .ej-hero-copy {
    padding: 36px 24px 36px 28px;
  }
}

@media (max-width: 767px) {
  .ej-signal .ej-home {
    padding-top: 12px;
  }

  .ej-signal .ej-browser-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }

  .ej-signal .ej-browser-title {
    font-size: 28px;
  }

  .ej-signal .ej-browser-search {
    max-width: none;
  }

  .ej-signal .ej-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .ej-signal .ej-hero-art {
    order: -1;
    min-height: 0;
  }

  .ej-signal .ej-hero-spade img {
    object-position: 55% center;
  }

  .ej-signal .ej-hero-spade::after {
    content: none;
  }

  /* On a phone the panel flows: 240px of picture, the dots under it, so a banner's own button is never covered. */

  .ej-signal .ej-hero-art .rd-hero-carousel,
  .ej-signal .ej-hero-art > .ej-hero-spade {
    position: relative;
    inset: auto;
    margin: 0;
  }

  .ej-signal .ej-hero-art .rd-hero-slides {
    height: auto; /* the slides and, under them, the dots */
  }

  .ej-signal .ej-hero-art .slick-list,
  .ej-signal .ej-hero-art .slick-track,
  .ej-signal .ej-hero-art .rd-hero-slide,
  .ej-signal .ej-hero-art .rd-hero-slides.slick-initialized .slick-slide > div,
  .ej-signal .ej-hero-art .ej-hero-spade {
    height: 240px;
  }

  .ej-signal .ej-hero-art .rd-hero-dots {
    position: static;
    justify-content: center;
    padding: 10px 0 2px;
  }

  .ej-signal .ej-hero-art .rd-hero-pause {
    top: 8px;
    right: 8px;
    bottom: auto;
  }

  .ej-signal .ej-hero-copy {
    padding: 24px 18px 28px;
  }

  .ej-signal .ej-hero-title {
    font-size: 40px;
  }

  .ej-signal .ej-hero-sub {
    font-size: 17px;
  }

  .ej-signal .ej-hero-btn {
    padding: 12px 18px;
    font-size: 15px;
  }

  .ej-signal .ej-strip {
    margin: 0 -12px 20px;
    padding: 0 12px;
  }

  .ej-signal .ej-strip-tab {
    padding: 14px 12px;
  }

  .ej-signal .ej-feature-title {
    font-size: 26px;
  }

  .ej-signal .ej-door-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .ej-signal .ej-ribbon-arrow {
    display: none;
  }

  .ej-signal .ej-ribbon-track {
    grid-auto-columns: 70%;
  }
}

/* ---------------------------------------------------------------------
   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.
   --------------------------------------------------------------------- */

.ej-signal .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(--sig-rule);
  background: none;
}

.ej-signal .rd-page-banner-title {
  margin: 0 0 6px;
  font-family: var(--sig-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--sig-text);
}

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

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

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

.ej-signal .rd-hero-nav--prev {
  left: auto;
  right: 92px;
}

.ej-signal .rd-hero-nav--next {
  right: 54px;
}

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

/* ---------------------------------------------------------------------
   One shading for every icon in the rail (owner, 4 Nov 2026, found on Betarama and checked here: the favourites
   heart in colour, the active trophy in lime, the other trophies and the bell dimmer than the rest). Pictures and
   font icons alike are white silhouettes at .8; the row under the pointer or the page you are on at 1. 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).
   --------------------------------------------------------------------- */
/* 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.ej-signal.ej-signal.ej-signal[data-site] aside.sidebar :is(a, button) img {
  filter: grayscale(1) brightness(1.45) !important;
  opacity: 0.8 !important;
}

body.ej-signal.ej-signal.ej-signal[data-site] aside.sidebar :is(a, button) i {
  filter: none !important;
  color: #fff !important;
  opacity: 0.8 !important;
}

body.ej-signal.ej-signal.ej-signal.ej-signal[data-site] aside.sidebar :is(a, button):hover img,
body.ej-signal.ej-signal.ej-signal.ej-signal[data-site] aside.sidebar li.active :is(a, button) img,
body.ej-signal.ej-signal.ej-signal.ej-signal[data-site] aside.sidebar :is(a, button).active img {
  filter: grayscale(1) brightness(2) !important;
  opacity: 1 !important;
}

body.ej-signal.ej-signal.ej-signal.ej-signal[data-site] aside.sidebar :is(a, button):hover i,
body.ej-signal.ej-signal.ej-signal.ej-signal[data-site] aside.sidebar li.active :is(a, button) i,
body.ej-signal.ej-signal.ej-signal.ej-signal[data-site] aside.sidebar :is(a, button).active i,
body.ej-signal.ej-signal.ej-signal.ej-signal[data-site] aside.sidebar a.is-active i {
  opacity: 1 !important;
}

/* Propose a Market: its picture is drawn in dark strokes. Open, ink on the lime pill; folded (no pill), a white
   silhouette like every other row - the rail's grayscale left it dark on dark (Codex). */
body.ej-signal.ej-signal.ej-signal.ej-signal[data-site]:not(.lb-rail-collapsed) aside.sidebar a.pm_menu_cta img {
  filter: brightness(0) !important;
  opacity: 1 !important;
}

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

/* Footer: no box behind the logo (owner, 4 Nov 2026: "Evojacks doesn't need a .foot-logo background colour either"). */
.ej-signal .foot-logo {
  background: transparent;
}

/* A shorter leaderboard, and the leaderboard page link in the header instead of a button row under the podium
   (owner, 4 Nov 2026, on Betarama: "takes up too much space" / "could be a link in the header area"; "Are you making
   the changes on evojacks too?"). Same podium, tighter; the title keeps its place on the left. */
.ej-signal .wic-home-lb {
  margin: 0 0 28px;
}

.ej-signal .wic-home-lb__header {
  padding: 14px 26px 4px;
}

.ej-signal .wic-home-lb--collapsible .wic-home-lb__header {
  padding-right: 250px;
}

.ej-signal .wic-home-lb__toggle {
  top: 12px;
}

.ej-signal .wic-home-lb__header-link {
  position: absolute;
  top: 20px;
  right: 72px;
  color: var(--sig-text);
  font-family: var(--sig-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid currentColor;
}

.ej-signal .wic-home-lb__header-link:hover,
.ej-signal .wic-home-lb__header-link:focus-visible {
  color: var(--sig-accent, var(--sig-lime));
}

.ej-signal .wic-home-lb__podium {
  padding: 22px 20px 14px;
}

.ej-signal .wic-home-lb__card {
  padding: 18px 10px 8px;
}

.ej-signal .wic-home-lb__podium .wic-home-lb__card--1 {
  padding-top: 22px;
}

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

.ej-signal .wic-home-lb__wagered strong {
  font-size: 15px;
}

.ej-signal .wic-home-lb__prize {
  margin-top: 4px;
  padding-top: 4px;
}

.ej-signal .wic-home-lb__prize strong {
  font-size: 14px;
}

@media (max-width: 767px) {
  .ej-signal .wic-home-lb--collapsible .wic-home-lb__header {
    padding-right: 60px;
  }

  .ej-signal .wic-home-lb__header-link {
    position: static;
    display: inline-block;
    margin: 4px 0 8px;
  }
}

/* ---------------------------------------------------------------------
   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 black, 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.
   --------------------------------------------------------------------- */

.ej-signal nav.launcher_base,
.ej-signal #collapseContainer,
.ej-signal .collapse-content,
.ej-signal .collapse-content .card.bg-default-site {
  background-color: var(--sig-bg);
}

.ej-signal nav.launcher_base {
  border-top: 1px solid var(--sig-rule);
  --bs-navbar-color: var(--sig-muted);
  --bs-navbar-hover-color: var(--sig-text);
  --bs-navbar-active-color: var(--sig-text);
}

.ej-signal .collapse-content {
  border-top: 1px solid var(--sig-rule);
}

.ej-signal .collapse-content .card.text-light {
  color: var(--sig-text) !important;
}

.ej-signal .launcher_base .nav-item a,
.ej-signal .launcher_base button.gm-btn span {
  color: var(--sig-muted);
  font-family: var(--sig-body);
}

.ej-signal .launcher_base .nav-item a:hover,
.ej-signal .launcher_base button.gm-btn:hover span {
  color: var(--sig-text);
}

.ej-signal .launcher_base button.gm-btn span.remove-fav-icon {
  color: var(--sig-lime);
}

.ej-signal .launcher_base :is(a, button) img {
  filter: brightness(0) saturate(0) invert(1);
  opacity: 0.7;
}

.ej-signal .launcher_base :is(a, button):hover img,
.ej-signal .launcher_base .remove-fav-icon img {
  opacity: 1;
}

.ej-signal .collapse-content .search_bar img {
  filter: brightness(0) saturate(0) invert(1);
  opacity: 0.7;
}

.ej-signal #recentWinnersLink:hover {
  color: var(--sig-text);
}

.ej-signal .launcher_logo {
  display: flex;
  align-items: center;
}

.ej-signal .launcher_logo .sig-wordmark {
  font-size: 26px;
}

.ej-signal .bet_decoration_header .sig-wordmark {
  margin: 0 12px;
  font-size: 24px;
}

/* 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). */

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

.ej-signal .bet_decoration_header stop {
  stop-color: var(--sig-lime);
}

.ej-signal .restricted_overlay {
  background: rgba(11, 12, 13, 0.86);
}

.ej-signal .restricted_overlay button img {
  filter: brightness(0) saturate(0) invert(1);
  opacity: 0.7;
}

/* 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.) */
.ej-signal #recentWinnersContent .live-updatebox {
  max-width: 1100px;
  margin: 0 auto;
  font-family: var(--sig-body);
}

.ej-signal #recentWinnersContent .winners_table table {
  table-layout: fixed;
}

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

.ej-signal #recentWinnersContent .winners_table th.game_name_list {
  width: 42%;
}

.ej-signal #recentWinnersContent .winners_table th.game_name_user {
  width: 22%;
}

.ej-signal #recentWinnersContent .winners_table th.game_name_provider {
  width: 18%;
}

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

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

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

.ej-signal #recentWinnersContent .winners_table td.game_name_list h3 {
  font-weight: 600;
}

/* The rows carry Bootstrap's text-white (an !important white): on a light panel the game
   names vanished. Every cell takes the page's own text colour instead. */
.ej-signal #recentWinnersContent .winners_table td .text-white {
  color: var(--sig-text) !important;
}

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

.ej-signal #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. */
.ej-signal aside.sidebar .sidebar-menus .sidebar-menus {
  padding-top: 0;
}

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

.ej-signal aside.sidebar .sidebar-menus .sidebar-menus .card_sidebar li > a > img,
.ej-signal 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. */
.ej-signal .match-box .bet_decoration_header {
  margin: 18px 0 12px;
}

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

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

.ej-signal .match-box :is(.bet_decoration_header, .bet_decoration_header_inner):has(> svg)::before,
.ej-signal .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(--sig-lime));
  opacity: 0.5;
}

.ej-signal .match-box :is(.bet_decoration_header, .bet_decoration_header_inner):has(> svg)::after {
  background: linear-gradient(90deg, var(--sig-lime), transparent);
}

.ej-signal .sb2-mybets .match-box .event_header {
  color: var(--sig-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.ej-signal .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. */
  .ej-signal aside.sidebar {
    padding-top: 64px;
  }
}

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

  .ej-signal .sb2-mybets__pane > .match-box {
    margin: 0;
  }

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