@charset "UTF-8";
/* ==========================================================================
   CASINO — MODERN THEME LAYER
   Premium dark (#111722) + green accent design system.

   Loaded AFTER main.css. This file re-themes and modernises the template
   without rewriting its markup or behaviour. Existing class names are
   preserved; only presentation is upgraded.

   CONTENTS
   01. Design tokens
   02. Base, typography & scrollbars
   03. Focus & accessibility
   04. Header
   05. Sidebar (+ collapsible behaviour)
   06. Buttons
   07. Game cards
   08. Game page (stage, breadcrumb, specs)
   09. Forms & inputs
   10. Surfaces, tables & misc
   11. Toasts & tooltips
   12. Motion
   13. Responsive
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* ---- Neutral ramp, built around the mandated #111722 ---- */
  --cs-bg-deep: #0b0f17;   /* behind everything, scrims */
  --cs-bg: #111722;        /* PRIMARY app background */
  --cs-surface-1: #161e2b; /* raised: cards, panels */
  --cs-surface-2: #1c2534; /* raised: hover, inputs */
  --cs-surface-3: #232e40; /* raised: pressed, active rows */
  --cs-border: #222c3c;    /* default hairline */
  --cs-border-strong: #2d3849;

  /* ---- Text ---- */
  --cs-text: #f2f6fa;      /* 16.4:1 on --cs-bg */
  --cs-text-secondary: #a8b4c6; /* 8.6:1 */
  --cs-text-muted: #7d8aa0;     /* 5.2:1 — still AA for body text */

  /* ---- Green accent ramp ---- */
  --cs-green-300: #5be0a5;
  --cs-green-400: #2ed694;
  --cs-green: #19c37d;     /* PRIMARY accent — 7.9:1 on --cs-bg */
  --cs-green-600: #12a167;
  --cs-green-700: #0c7f51;
  --cs-on-green: #06170f;  /* 9.1:1 on --cs-green */

  --cs-green-soft: rgba(25, 195, 125, 0.12);
  --cs-green-softer: rgba(25, 195, 125, 0.06);
  --cs-green-line: rgba(25, 195, 125, 0.32);
  --cs-green-glow: rgba(25, 195, 125, 0.28);
  --cs-green-grad: linear-gradient(135deg, #211cf382 0%, #00ff3e 100%);

  /* ---- Semantic (kept minimal & purposeful) ---- */
  --cs-danger: #f2555a;
  --cs-warning: #e0a32e;

  /* ---- Radii ---- */
  --cs-r-sm: 8px;
  --cs-r: 12px;
  --cs-r-lg: 16px;
  --cs-r-xl: 20px;
  --cs-r-pill: 999px;

  /* ---- Elevation (consistent scale, no ad-hoc shadows) ---- */
  --cs-e1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --cs-e2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --cs-e3: 0 12px 32px rgba(0, 0, 0, 0.55);
  --cs-e4: 0 24px 64px rgba(0, 0, 0, 0.65);

  /* ---- Spacing (density 7 — standard/dense) ---- */
  --cs-sp-1: 4px;
  --cs-sp-2: 8px;
  --cs-sp-3: 12px;
  --cs-sp-4: 16px;
  --cs-sp-5: 24px;
  --cs-sp-6: 32px;
  --cs-sp-7: 48px;

  /* ---- Motion tokens ---- */
  --cs-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --cs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cs-t-fast: 140ms;
  --cs-t: 220ms;
  --cs-t-slow: 320ms;

  /* ---- Layout ---- */
  --cs-sidebar-w: 270px;
  --cs-sidebar-w-collapsed: 76px;
  --cs-header-h: 80px;
  --cs-z-tooltip: 10050;
  --cs-z-modal: 10060;
  --cs-z-toast: 10070;

  /* ======================================================================
     Remap the template's original palette variables.
     main.css references these throughout, so overriding them re-themes
     every existing component in one place.
     ====================================================================== */
  --base: var(--cs-green);
  --title: var(--cs-on-green);
  --theme: var(--cs-green-400);
  --theme-one: var(--cs-green-300);
  --button: var(--cs-green);
  --box-bg: var(--cs-surface-1);
  --srh: var(--cs-surface-2);
  --section-bg: var(--cs-bg);
  --section-bg-two: var(--cs-bg-deep);
  --body: var(--cs-bg);
  --chat-bg: var(--cs-surface-1);
  --box-three: var(--cs-surface-2);
  --text-pra: var(--cs-text-secondary);
  --bg: var(--cs-bg);
  --white: #fff;
  --hover-bg: var(--cs-surface-2);
  --Breadcumnd: var(--cs-surface-1);
  --icon-bg: var(--cs-surface-2);
  --lightwaight: var(--cs-green-400);
  --box-two: var(--cs-bg);
  --border: var(--cs-border);
  --form-bg: var(--cs-surface-1);
  --footer: var(--cs-bg-deep);
  --pragraph: var(--cs-text-muted);
  --prev: var(--cs-surface-2);
  --next: var(--cs-surface-3);
  --ratting: var(--cs-warning);
  --tabe-bg: var(--cs-surface-1);
  --video-bg: var(--cs-surface-1);
  --focus: var(--cs-green-400);
  --gradian-bg: var(--cs-green-grad);
  --gradian-text: var(--cs-green-grad);

  /* main.css leaks `background-clip:text` onto :root — neutralise it. */
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

/* ==========================================================================
   02. BASE, TYPOGRAPHY & SCROLLBARS
   ========================================================================== */

body {
  background-color: var(--cs-bg);
  color: var(--cs-text-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* guard against horizontal scroll */
}

h1, h2, h3, h4, h5, h6,
.banner-content h1, .banner-content h2, .banner-content h3 {
  color: var(--cs-text);
  letter-spacing: -0.015em;
}

p, li, span, label, td {
  color: inherit;
}

a {
  transition: color var(--cs-t-fast) var(--cs-ease);
}

a:hover {
  color: var(--cs-green-400);
}

/* Everything clickable gets a pointer — template misses many. */
a, button, [role="button"], .cmn--btn, .border-btn,
.casino-demo-items, .dashboard-active, .cs-icon-btn,
.nice-select, .custom__number, summary {
  cursor: pointer;
}

/* Thin, on-brand scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--cs-surface-3) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--cs-surface-3);
  border-radius: var(--cs-r-pill);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--cs-green-700);
}

/* The sidebar hides its scrollbar entirely in main.css — give it a slim one. */
.left-site-menu ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* Selection */
::selection {
  background: var(--cs-green);
  color: var(--cs-on-green);
}

/* --- Preloader ---------------------------------------------------------
   The template's 3D box spinner is replaced by the brand loader. Done in
   CSS rather than markup so all pages pick it up without edits: the
   original .boxes element is hidden and the animation is painted on its
   full-screen parent. */
.boxes-bg {
  background-color: var(--cs-bg);
  background-image: url("../img/loader/loader.gif");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 220px 220px;
  /* The GIF is a fully opaque black square (GIF has no real alpha), which
     would otherwise show as a hard box on the navy backdrop. Screening it
     against the background colour maps its pure black to exactly
     --cs-bg, so the plate disappears with no re-encoding. */
  background-blend-mode: screen;
}

.boxes-bg .boxes {
  display: none;
}

@media screen and (max-width: 575px) {
  .boxes-bg {
    background-size: 168px 168px;
  }
}

/* A GIF can't be paused from CSS, so swap in a still frame instead. */
@media (prefers-reduced-motion: reduce) {
  .boxes-bg {
    background-image: url("../img/loader/loader-static.png");
  }
}

/* ==========================================================================
   03. FOCUS & ACCESSIBILITY
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--cs-green-400);
  outline-offset: 2px;
  border-radius: var(--cs-r-sm);
}

/* Never leave a keyboard user without an indicator. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cs-green-400);
  outline-offset: 2px;
}

.cs-skip-link {
  position: absolute;
  left: var(--cs-sp-4);
  top: -100px;
  z-index: var(--cs-z-toast);
  padding: 10px 18px;
  border-radius: var(--cs-r-sm);
  background: var(--cs-green);
  color: var(--cs-on-green);
  font-weight: 700;
  transition: top var(--cs-t) var(--cs-ease);
}

.cs-skip-link:focus {
  top: var(--cs-sp-3);
  color: var(--cs-on-green);
}

.cs-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   04. HEADER
   ========================================================================== */

.header-top {
  height: var(--cs-header-h);
  padding: 0 var(--cs-sp-5);
  display: flex;
  align-items: center;
  background-color: rgba(17, 23, 34, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cs-border);
  box-shadow: var(--cs-e1);
}

.header-top-wrapper {
  width: 100%;
  gap: var(--cs-sp-4);
  flex-wrap: nowrap;
}

.header-top-wrapper .logo {
  max-width: 156px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* The lockup has a real alpha channel, so it composites normally and
   works on any background — no blend-mode trickery. */
.header-top-wrapper .logo img {
  object-fit: contain;
}

/* --- Left cluster: sidebar toggle sits before the logo --- */
.cs-header-left {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-3);
  flex-shrink: 0;
}

/* --- Generic icon button used across header, cards and game window --- */
.cs-icon-btn {
  --cs-icon-btn-size: 42px;
  width: var(--cs-icon-btn-size);
  height: var(--cs-icon-btn-size);
  min-width: var(--cs-icon-btn-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-r-sm);
  border: 1px solid var(--cs-border);
  background: var(--cs-surface-1);
  color: var(--cs-text-secondary);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  position: relative;
  transition: background var(--cs-t-fast) var(--cs-ease),
              color var(--cs-t-fast) var(--cs-ease),
              border-color var(--cs-t-fast) var(--cs-ease);
}

.cs-icon-btn:hover {
  background: var(--cs-surface-2);
  border-color: var(--cs-border-strong);
  color: var(--cs-text);
}

.cs-icon-btn:active {
  background: var(--cs-surface-3);
}

.cs-icon-btn[aria-pressed="true"],
.cs-icon-btn.is-active {
  background: var(--cs-green-soft);
  border-color: var(--cs-green-line);
  color: var(--cs-green-400);
}

/* Notification / badge dot */
.cs-badge-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cs-green);
  box-shadow: 0 0 0 2px var(--cs-surface-1);
}

/* Carrying a number instead of just being a dot. min-width with auto height
   keeps "9" a circle and lets "99+" grow into a pill, rather than a fixed
   width that would clip the third character. */
.cs-badge-dot--count {
  top: 1px;
  right: 1px;
  width: auto;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5484d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cs-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--cs-r-pill);
  background: var(--cs-green);
  color: var(--cs-on-green);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* --- Right cluster: wallet, deposit, notifications, profile.
   These are injected as <li>s into the template's existing social list so
   the header's flex layout keeps working. --- */
.header-top-wrapper .header-top-social {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-2);
  margin-left: auto;
  flex-shrink: 0;
}

/* NOTE: deliberately no `display` here. main.css hides these items below
   1199px, and setting display on all of them would override that and push
   the header off-screen on mobile. The ul's align-items handles alignment. */
.header-top-wrapper .header-top-social > li {
  align-items: center;
}

/* Wallet / balance */
.cs-wallet {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-3);
  height: 44px;
  padding: 0 var(--cs-sp-2) 0 var(--cs-sp-4);
  border-radius: var(--cs-r-sm);
  border: 1px solid var(--cs-border);
  background: var(--cs-surface-1);
}

.cs-wallet-amount {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.cs-wallet-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-text-muted);
}

.cs-wallet-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--cs-green-400);
  /* tabular figures stop the balance jittering as it updates */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.cs-deposit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 var(--cs-sp-4);
  border: none;
  border-radius: var(--cs-r-sm);
  background: var(--cs-green-grad);
  color: var(--cs-on-green);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: filter var(--cs-t-fast) var(--cs-ease),
              transform var(--cs-t-fast) var(--cs-ease),
              box-shadow var(--cs-t-fast) var(--cs-ease);
}

.cs-deposit-btn:hover {
  color: var(--cs-on-green);
  filter: brightness(1.08);
  box-shadow: 0 0 0 3px var(--cs-green-soft);
}

.cs-deposit-btn:active {
  transform: scale(0.97);
}

/* Profile */
.cs-profile {
  position: relative;
}

.cs-profile-trigger {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-2);
  height: 44px;
  padding: 0 var(--cs-sp-2);
  border-radius: var(--cs-r-sm);
  border: 1px solid var(--cs-border);
  background: var(--cs-surface-1);
  color: var(--cs-text-secondary);
  transition: background var(--cs-t-fast) var(--cs-ease);
}

.cs-profile-trigger:hover {
  background: var(--cs-surface-2);
  color: var(--cs-text);
}

.cs-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cs-green-grad);
  color: var(--cs-on-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.cs-profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 214px;
  padding: var(--cs-sp-2);
  border-radius: var(--cs-r);
  border: 1px solid var(--cs-border);
  background: var(--cs-surface-1);
  box-shadow: var(--cs-e3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--cs-t-fast) var(--cs-ease),
              transform var(--cs-t-fast) var(--cs-ease),
              visibility var(--cs-t-fast);
}

.cs-profile.is-open .cs-profile-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cs-profile-menu a,
.cs-profile-menu button {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-3);
  width: 100%;
  padding: 10px var(--cs-sp-3);
  border: none;
  border-radius: var(--cs-r-sm);
  background: none;
  color: var(--cs-text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background var(--cs-t-fast) var(--cs-ease),
              color var(--cs-t-fast) var(--cs-ease);
}

.cs-profile-menu a:hover,
.cs-profile-menu button:hover {
  background: var(--cs-surface-2);
  color: var(--cs-text);
}

.cs-profile-menu a i,
.cs-profile-menu button i {
  width: 16px;
  color: var(--cs-text-muted);
}

.cs-menu-sep {
  height: 1px;
  margin: var(--cs-sp-2) var(--cs-sp-3);
  background: var(--cs-border);
}

.cs-profile-menu .cs-danger-item:hover {
  color: var(--cs-danger);
}

.cs-profile-menu .cs-danger-item:hover i {
  color: var(--cs-danger);
}

/* Auth-state switching: guest sees log in / sign up, player sees wallet. */
body[data-cs-auth="guest"] .cs-player-only {
  display: none !important;
}

body[data-cs-auth="player"] .btn-top-group {
  display: none !important;
}

/* Header search + nav */
.header-top-wrapper .middle-referral ul li form input {
  background: var(--cs-surface-1);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-sm);
  color: var(--cs-text);
  transition: border-color var(--cs-t-fast) var(--cs-ease),
              box-shadow var(--cs-t-fast) var(--cs-ease);
}

.header-top-wrapper .middle-referral ul li form input:focus {
  border-color: var(--cs-green-line);
  box-shadow: 0 0 0 3px var(--cs-green-soft);
  outline: none;
}

.header-top-wrapper .middle-referral ul li a:hover {
  color: var(--cs-green-400);
}

.header-top-wrapper .middle-referral ul li:first-child {
  border-right-color: var(--cs-border);
}

.header-top-social .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--cs-r-sm);
  transition: background var(--cs-t-fast) var(--cs-ease);
}

.header-top-social .icon:hover {
  background: var(--cs-surface-2);
}

/* ==========================================================================
   05. SIDEBAR
   ========================================================================== */
/* --- Shell ------------------------------------------------------------- */

.left-site-menu {
  background-color: var(--cs-bg);
}

.left-site-menu .left-box {
  width: var(--cs-sidebar-w);
  background-color: var(--cs-bg);
  border-right: 1px solid var(--cs-border);
  top: var(--cs-header-h);
  transition: width var(--cs-t-slow) var(--cs-ease-out);
  will-change: width;
}

.left-site-menu .left-box .header {
  background: transparent;
}

.left-site-menu .custom-scroll-animated {
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: var(--cs-sp-5);
}

.cs-side {
  display: flex;
  flex-direction: column;
  gap: var(--cs-sp-4);
  padding: var(--cs-sp-3);
}

/* --- Header collapse toggle (lives in the header, drives this sidebar) -- */

.cs-sidebar-toggle {
  --cs-icon-btn-size: 42px;
}

.cs-sidebar-toggle .cs-bars {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  position: relative;
  transition: background var(--cs-t-fast) var(--cs-ease);
}

.cs-sidebar-toggle .cs-bars::before,
.cs-sidebar-toggle .cs-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--cs-t) var(--cs-ease), width var(--cs-t) var(--cs-ease);
}

.cs-sidebar-toggle .cs-bars::before {
  top: -6px;
}

.cs-sidebar-toggle .cs-bars::after {
  top: 6px;
}

.cs-sidebar-toggle:hover .cs-bars::before {
  width: 12px;
}

.cs-sidebar-toggle:hover .cs-bars::after {
  width: 14px;
}

/* --- Casino / Sport segmented switcher ---------------------------------
   A real segmented control: one sliding thumb behind two tab buttons, so
   the transition reads as movement rather than two states blinking. */

.cs-seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 4px;
  border-radius: var(--cs-r);
  background: var(--cs-surface-1);
  border: 1px solid var(--cs-border);
  isolation: isolate;
}

.cs-seg-thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 4px;
  width: calc(50% - 5px);
  height: calc(100% - 8px);
  border-radius: 9px;
  background: var(--cs-green-soft);
  border: 1px solid var(--cs-green-line);
  transition: transform var(--cs-t) var(--cs-ease-out),
              width var(--cs-t) var(--cs-ease-out),
              height var(--cs-t) var(--cs-ease-out);
}

.cs-seg[data-cs-active="sport"] .cs-seg-thumb {
  transform: translateX(calc(100% + 3px));
}

.cs-seg-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 6px;
  border: 0;
  background: none;
  border-radius: 9px;
  color: var(--cs-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--cs-t-fast) var(--cs-ease);
}

.cs-seg-btn i {
  font-size: 13px;
  transition: transform var(--cs-t-fast) var(--cs-ease);
}

.cs-seg-btn:hover {
  color: var(--cs-text-secondary);
}

.cs-seg-btn[aria-selected="true"] {
  color: var(--cs-green-300);
}

.cs-seg-btn[aria-selected="true"] i {
  transform: scale(1.06);
}

/* --- Nav groups --------------------------------------------------------- */

.cs-nav-group + .cs-nav-group {
  margin-top: var(--cs-sp-4);
  padding-top: var(--cs-sp-4);
  border-top: 1px solid var(--cs-border);
}

.cs-nav-title {
  margin: 0 0 6px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-text-muted);
  white-space: nowrap;
}

.cs-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  background: none;
  border-radius: var(--cs-r-sm);
  color: var(--cs-text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  transition: background var(--cs-t-fast) var(--cs-ease),
              color var(--cs-t-fast) var(--cs-ease);
}

.cs-nav-item:hover {
  background: var(--cs-surface-1);
  color: var(--cs-text);
}

.cs-nav-item:active {
  background: var(--cs-surface-2);
}

.cs-nav-ico {
  width: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--cs-text-muted);
  transition: color var(--cs-t-fast) var(--cs-ease),
              transform var(--cs-t-fast) var(--cs-ease);
}

.cs-nav-item:hover .cs-nav-ico {
  color: var(--cs-green-400);
  transform: translateX(1px);
}

.cs-nav-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Current page: bar + tint + weight, never colour alone */
.cs-nav-item[aria-current="page"] {
  background: var(--cs-green-soft);
  color: var(--cs-green-300);
  font-weight: 700;
}

.cs-nav-item[aria-current="page"] .cs-nav-ico {
  color: var(--cs-green);
}

.cs-nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--cs-green);
}

.cs-nav-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--cs-r-pill);
  background: var(--cs-green-soft);
  border: 1px solid var(--cs-green-line);
  color: var(--cs-green-300);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cs-nav-badge.is-muted {
  background: var(--cs-surface-2);
  border-color: var(--cs-border-strong);
  color: var(--cs-text-muted);
}

/* Something waiting to be claimed.

   Red rather than the green used everywhere else on this site: green here
   means "this is our accent", and a player scanning the menu needs this one to
   read as "there is something for you" at a glance. Not uppercase and not
   letter-spaced like the word badges — it is a number, and those rules make
   digits look like a label. */
.cs-nav-badge.is-claim {
  /* Measured, not picked. A lighter red looked better against the sidebar but
     left the white digit at 3.9:1, under the 4.5 small text needs — and the
     digit is the whole message. This is 4.86:1 for the number, with a lighter
     border so the badge still reads as a shape against the panel (3.7:1,
     above the 3:1 a UI element needs). */
  background: #d92a30;
  border-color: #e5484d;
  color: #ffffff;
  min-width: 20px;
  padding: 2px 6px;
  text-align: center;
  letter-spacing: 0;
  /* Digits that change should not resize the badge around them. */
  font-variant-numeric: tabular-nums;
}

/* Panel swap between Casino and Sport */
.cs-nav-panel {
  animation: cs-panel-in var(--cs-t-slow) var(--cs-ease-out);
}

@keyframes cs-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* --- Sidebar footer ----------------------------------------------------- */

.cs-side-foot {
  margin-top: var(--cs-sp-3);
  padding-top: var(--cs-sp-4);
  border-top: 1px solid var(--cs-border);
  display: flex;
  align-items: center;
  gap: var(--cs-sp-3);
  flex-wrap: wrap;
  padding-left: 10px;
  padding-right: 10px;
}

.cs-side-foot a {
  color: var(--cs-text-muted);
  font-size: 12px;
}

.cs-side-foot a:hover {
  color: var(--cs-green-400);
}

.cs-side-lang {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: var(--cs-r-sm);
  border: 1px solid var(--cs-border);
  background: var(--cs-surface-1);
  color: var(--cs-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.cs-side-lang img {
  width: 16px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
}

/* --- COLLAPSED STATE (desktop only) ------------------------------------
   Set on <html> before first paint and mirrored onto <body>, so a plain
   ancestor selector matches either. */

@media screen and (min-width: 1200px) {
  .cs-sidebar-collapsed .left-site-menu .left-box {
    width: var(--cs-sidebar-w-collapsed);
  }

  .cs-sidebar-collapsed .cs-side {
    padding: var(--cs-sp-3) 8px;
  }

  /* Switcher stacks vertically so it still fits — and stays reachable,
     which the brief calls for explicitly. */
  .cs-sidebar-collapsed .cs-seg {
    grid-template-columns: 1fr;
  }

  .cs-sidebar-collapsed .cs-seg-btn {
    min-height: 38px;
    gap: 0;
  }

  .cs-sidebar-collapsed .cs-seg-btn span {
    display: none;
  }

  .cs-sidebar-collapsed .cs-seg-btn i {
    font-size: 15px;
  }

  .cs-sidebar-collapsed .cs-seg-thumb {
    width: calc(100% - 8px);
    height: calc(50% - 5px);
  }

  .cs-sidebar-collapsed .cs-seg[data-cs-active="sport"] .cs-seg-thumb {
    transform: translateY(calc(100% + 3px));
  }

  /* Items become icon-only */
  .cs-sidebar-collapsed .cs-nav-text,
  .cs-sidebar-collapsed .cs-nav-badge,
  .cs-sidebar-collapsed .cs-nav-title,
  .cs-sidebar-collapsed .cs-side-foot {
    position: absolute;
    width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }

  /* ...except a claim badge, which becomes a dot on the icon.

     Hiding it with the rest would mean a player who keeps the sidebar
     collapsed — the default on a tablet — never learns there is anything to
     collect. The number cannot fit in the rail, so what survives is the fact
     that there IS something. */
  .cs-sidebar-collapsed .cs-nav-badge.is-claim {
    position: absolute;
    top: 6px;
    left: 50%;
    margin-left: 5px;
    width: 9px;
    height: 9px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    opacity: 1;
    overflow: hidden;
    /* The digit itself is pushed out of a 9px circle rather than removed, so
       the accessible name survives for a screen reader. */
    text-indent: -999px;
  }

  .cs-sidebar-collapsed .cs-nav-item {
    position: relative;
  }

  .cs-sidebar-collapsed .cs-nav-item {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .cs-sidebar-collapsed .cs-nav-item[aria-current="page"]::before {
    left: -8px;
  }

  .cs-sidebar-collapsed .cs-nav-group + .cs-nav-group {
    margin-top: var(--cs-sp-3);
    padding-top: var(--cs-sp-3);
  }
}

/* --- Mobile drawer ------------------------------------------------------ */

@media screen and (max-width: 1199px) {
  .left-site-menu {
    box-shadow: var(--cs-e4);
  }

  .left-site-menu .left-box .header {
    background: var(--cs-bg);
  }

  /* The drawer's close button is absolutely positioned top-right by the
     template, so reserve a row for it — otherwise it sits on top of the
     Casino/Sport switcher. */
  .cs-side {
    padding-top: 50px;
  }

  .cross-icon {
    background: var(--cs-surface-2);
    border: 1px solid var(--cs-border);
    color: var(--cs-text);
    width: 36px;
    height: 36px;
  }

  .cross-icon i {
    font-size: 18px;
  }

  .ov-dsh.active {
    background: rgba(11, 15, 23, 0.72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
}

/* ==========================================================================
   06. BUTTONS
   ========================================================================== */

.cmn--btn {
  border-radius: var(--cs-r-sm);
  padding: 12px 22px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--cs-on-green);
  background: var(--cs-green-grad);
  border: none;
  overflow: hidden;
  transition: filter var(--cs-t-fast) var(--cs-ease),
              transform var(--cs-t-fast) var(--cs-ease),
              box-shadow var(--cs-t-fast) var(--cs-ease);
}

/* main.css paints the fill with ::before/::after — fold them into the base. */
.cmn--btn::before,
.cmn--btn::after {
  display: none;
}

.cmn--btn span {
  color: var(--cs-on-green);
  position: relative;
  z-index: 1;
}

.cmn--btn:hover {
  filter: brightness(1.09);
  box-shadow: 0 6px 20px var(--cs-green-glow);
}

.cmn--btn:hover span {
  color: var(--cs-on-green);
}

.cmn--btn:active {
  transform: scale(0.975);
  filter: brightness(0.96);
}

.cmn--btn[disabled],
.cmn--btn.is-loading {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.3);
}

/* Secondary / outline */
.border-btn {
  border-radius: var(--cs-r-sm);
  padding: 12px 22px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: var(--cs-text);
  background: transparent;
  border: 1px solid var(--cs-border-strong);
  overflow: hidden;
  transition: border-color var(--cs-t-fast) var(--cs-ease),
              background var(--cs-t-fast) var(--cs-ease),
              color var(--cs-t-fast) var(--cs-ease);
}

.border-btn::before,
.border-btn::after {
  display: none;
}

.border-btn span {
  color: inherit;
  position: relative;
  z-index: 1;
}

.border-btn:hover {
  border-color: var(--cs-green-line);
  background: var(--cs-green-soft);
  color: var(--cs-green-300);
}

.border-btn:active {
  transform: scale(0.975);
}

/* Inline spinner for async actions */
.cs-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  animation: cs-spin 700ms linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes cs-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   07. GAME CARDS
   ========================================================================== */

.casino-demo-items {
  border-radius: var(--cs-r);
  overflow: hidden;
  background: var(--cs-surface-1);
  border: 1px solid var(--cs-border);
  transition: transform var(--cs-t) var(--cs-ease-out),
              border-color var(--cs-t) var(--cs-ease),
              box-shadow var(--cs-t) var(--cs-ease);
}

.casino-demo-items:hover {
  transform: translateY(-4px);
  border-color: var(--cs-green-line);
  box-shadow: var(--cs-e3), 0 0 0 1px var(--cs-green-softer);
}

/* Media area — fixed ratio stops layout shift while images load. */
.cs-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cs-surface-2);
}

.casino-demo-items img {
  border-radius: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--cs-t-slow) var(--cs-ease-out);
}

.casino-demo-items:hover img {
  transform: scale(1.06);
}

/* Hover overlay with the Play / Demo actions */
.casino-demo-items .casino-overlay {
  border-radius: 0;
  background: linear-gradient(180deg, rgba(11, 15, 23, 0) 0%, rgba(11, 15, 23, 0.55) 45%, rgba(11, 15, 23, 0.92) 100%);
  align-items: center;
  bottom: 0;
  opacity: 0;
  transition: opacity var(--cs-t) var(--cs-ease);
}

.casino-demo-items:hover .casino-overlay,
.casino-demo-items:focus-within .casino-overlay {
  bottom: 0;
  opacity: 1;
  border-radius: 0;
}

.casino-demo-items .casino-overlay .cmn-grp {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-2);
}

.casino-demo-items .casino-overlay .cmn-grp .cmn--btn {
  padding: 10px 20px;
  margin: 0;
  color: var(--cs-on-green);
  transform: translateY(8px);
  transition: transform var(--cs-t) var(--cs-ease-out),
              filter var(--cs-t-fast) var(--cs-ease);
}

.casino-demo-items .casino-overlay .cmn-grp .border-btn {
  padding: 10px 18px;
  margin: 0;
  background: rgba(11, 15, 23, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transform: translateY(8px);
  transition: transform var(--cs-t) var(--cs-ease-out) 40ms,
              border-color var(--cs-t-fast) var(--cs-ease);
}

.casino-demo-items .casino-overlay .cmn-grp .border-btn::before {
  display: none;
}

.casino-demo-items:hover .casino-overlay .cmn-grp .cmn--btn,
.casino-demo-items:hover .casino-overlay .cmn-grp .border-btn,
.casino-demo-items:focus-within .casino-overlay .cmn-grp .cmn--btn,
.casino-demo-items:focus-within .casino-overlay .cmn-grp .border-btn {
  transform: translateY(0);
}

/* Favourite button */
.cs-fav-btn {
  position: absolute;
  top: var(--cs-sp-2);
  right: var(--cs-sp-2);
  z-index: 3;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(11, 15, 23, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--cs-text-secondary);
  font-size: 14px;
  padding: 0;
  transition: color var(--cs-t-fast) var(--cs-ease),
              background var(--cs-t-fast) var(--cs-ease),
              transform var(--cs-t-fast) var(--cs-ease);
}

/* Keep the tap target at 44px without growing the visual circle. */
.cs-fav-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
}

.cs-fav-btn:hover {
  background: rgba(11, 15, 23, 0.85);
  color: var(--cs-green-300);
}

.cs-fav-btn[aria-pressed="true"] {
  color: var(--cs-green);
  border-color: var(--cs-green-line);
}

.cs-fav-btn.cs-pop {
  animation: cs-pop var(--cs-t-slow) var(--cs-ease-out);
}

@keyframes cs-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* Category chip */
.cs-card-tag {
  position: absolute;
  top: var(--cs-sp-2);
  left: var(--cs-sp-2);
  z-index: 3;
  padding: 4px 10px;
  border-radius: var(--cs-r-pill);
  background: rgba(11, 15, 23, 0.66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--cs-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Caption bar under the artwork */
.cs-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-sp-2);
  padding: var(--cs-sp-3);
  border-top: 1px solid var(--cs-border);
  background: var(--cs-surface-1);
}

.cs-card-text {
  min-width: 0; /* lets the text actually shrink instead of overflowing */
}

.cs-card-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--cs-text);
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cs-card-provider {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--cs-text-muted);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.cs-card-play {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  height: 32px;
  padding: 0 var(--cs-sp-3);
  border: 1px solid var(--cs-green-line);
  border-radius: var(--cs-r-sm);
  background: var(--cs-green-soft);
  color: var(--cs-green-300);
  font-size: 12px;
  font-weight: 700;
  transition: background var(--cs-t-fast) var(--cs-ease),
              color var(--cs-t-fast) var(--cs-ease);
}

.cs-card-play:hover {
  background: var(--cs-green);
  color: var(--cs-on-green);
}

.cs-card-play i {
  transition: transform var(--cs-t-fast) var(--cs-ease);
}

.cs-card-play:hover i {
  transform: translateX(2px);
}

/* ==========================================================================
   08. GAME PAGE

   The game opens as a real, linkable page (game.html?provider=X&game=Y),
   not an overlay — so it can be deep-linked, shared, bookmarked and
   handled by the browser's own back button.
   ========================================================================== */

.cs-game-page {
  padding: var(--cs-sp-5) 0 var(--cs-sp-6);
}

/* --- Breadcrumb --- */
.cs-game-crumbs {
  margin-bottom: var(--cs-sp-4);
}

.cs-game-crumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cs-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.cs-game-crumbs a {
  color: var(--cs-text-muted);
}

.cs-game-crumbs a:hover {
  color: var(--cs-green-400);
}

.cs-crumb-sep {
  display: inline-flex;
  font-size: 9px;
  color: var(--cs-text-muted);
  opacity: 0.6;
}

.cs-crumb-game {
  color: var(--cs-text);
  font-weight: 600;
}

/* --- The stage --- */
.cs-game-stage {
  display: flex;
  flex-direction: column;
  border-radius: var(--cs-r-lg);
  border: 1px solid var(--cs-border-strong);
  background: var(--cs-bg);
  box-shadow: var(--cs-e3);
  overflow: hidden;
}

/* Title bar */
.cs-game-bar {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-3);
  padding: var(--cs-sp-3) var(--cs-sp-4);
  border-bottom: 1px solid var(--cs-border);
  background: var(--cs-surface-1);
  flex-shrink: 0;
}

.cs-game-id {
  min-width: 0;
  flex: 1;
}

.cs-game-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--cs-text);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.cs-game-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--cs-text-muted);
}

.cs-game-meta .cs-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.cs-game-actions {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-2);
  flex-shrink: 0;
}

.cs-game-actions .cs-icon-btn {
  --cs-icon-btn-size: 38px;
}

.cs-game-actions .cs-close:hover {
  border-color: var(--cs-danger);
  color: var(--cs-danger);
}

/* Playfield */
.cs-game-area {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--cs-bg-deep);
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.cs-game-area iframe,
.cs-game-area video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Loading state while the game boots */
.cs-game-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cs-sp-3);
  background: var(--cs-bg-deep);
  color: var(--cs-text-muted);
  font-size: 13px;
  transition: opacity var(--cs-t) var(--cs-ease);
}

.cs-game-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.cs-game-loader .cs-spinner {
  width: 28px;
  height: 28px;
  border-width: 3px;
  border-color: var(--cs-surface-3);
  border-top-color: var(--cs-green);
}

/* Footer controls */
.cs-game-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-sp-3);
  padding: var(--cs-sp-3) var(--cs-sp-4);
  border-top: 1px solid var(--cs-border);
  background: var(--cs-surface-1);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cs-game-stat {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-2);
  font-size: 12px;
  color: var(--cs-text-muted);
}

.cs-game-stat strong {
  color: var(--cs-green-400);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.cs-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cs-green);
  box-shadow: 0 0 0 3px var(--cs-green-soft);
  animation: cs-pulse 2s var(--cs-ease) infinite;
}

@keyframes cs-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.cs-game-foot-actions {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-4);
  flex-wrap: wrap;
}

.cs-game-deposit {
  min-height: 36px;
  padding: 8px 18px;
  font-size: 14px;
}

/* Fullscreen — the stage itself goes fullscreen, so the toolbar and
   controls stay available while playing. */
.cs-game-stage:fullscreen {
  border-radius: 0;
  border: 0;
  height: 100%;
}

.cs-game-stage:fullscreen .cs-game-area {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
}

/* --- About / specs panel below the stage --- */
.cs-game-about {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--cs-sp-5);
  margin-top: var(--cs-sp-5);
  padding: var(--cs-sp-5);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r);
  background: var(--cs-surface-1);
}

.cs-game-about h2 {
  margin: 0 0 var(--cs-sp-3);
  font-size: 17px;
  font-weight: 700;
}

.cs-game-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--cs-text-secondary);
  max-width: 68ch; /* keeps the measure readable on wide screens */
}

.cs-game-specs {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--cs-border);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-sm);
  overflow: hidden;
}

.cs-game-specs > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-sp-3);
  padding: 10px var(--cs-sp-3);
  background: var(--cs-surface-1);
}

.cs-game-specs dt {
  font-size: 12px;
  color: var(--cs-text-muted);
  font-weight: 500;
}

.cs-game-specs dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--cs-text);
  text-align: right;
  overflow-wrap: anywhere;
}

/* Error state when no game source is configured */
.cs-game-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cs-sp-3);
  text-align: center;
  padding: var(--cs-sp-5);
  color: var(--cs-text-secondary);
}

.cs-game-error i {
  font-size: 26px;
  color: var(--cs-text-muted);
}

.cs-game-error h3 {
  margin: 0;
  font-size: 16px;
  color: var(--cs-text);
}

.cs-game-error p {
  margin: 0;
  font-size: 13px;
  color: var(--cs-text-muted);
  max-width: 46ch;
}

/* ==========================================================================
   08b. MOBILE BOTTOM NAVIGATION

   Five top-level destinations with a raised centre action, per Material's
   bottom-nav guidance (max 5, icon + label, current item marked by more
   than colour). Replaces the template's own .app-section bar.
   Desktop keeps the sidebar, so this only exists below 1200px.
   ========================================================================== */

.cs-bottom-nav {
  display: none;
}

@media screen and (max-width: 1199px) {
  /* The template's own bottom bar would stack under ours. */
  .app-section {
    display: none !important;
  }

  .cs-bottom-nav {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    padding: 0 10px calc(8px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
  }

  .cs-bnav-bar {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2px;
    height: 66px;
    padding: 0 4px;
    border-radius: 26px;
    background: var(--cs-surface-1);
    border: 1px solid var(--cs-border);
    box-shadow: var(--cs-e3);
    pointer-events: auto;
  }

  /* Green glow seam under the bar */
  .cs-bnav-bar::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -3px;
    height: 3px;
    border-radius: var(--cs-r-pill);
    background: linear-gradient(90deg, transparent, var(--cs-green), transparent);
    box-shadow: 0 0 14px 2px var(--cs-green-glow);
    opacity: 0.9;
  }

  /* --- Standard item --- */
  .cs-bnav-item {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 2px 8px;
    border: 0;
    background: none;
    border-radius: var(--cs-r);
    color: var(--cs-text-secondary);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    transition: color var(--cs-t-fast) var(--cs-ease),
                background var(--cs-t-fast) var(--cs-ease);
  }

  .cs-bnav-item:active {
    background: var(--cs-surface-2);
  }

  .cs-bnav-ico {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .cs-bnav-ico img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }

  /* Lift the supplied artwork slightly off the dark bar */
  .cs-bnav-item .cs-bnav-ico img {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
  }

  .cs-bnav-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Current destination: colour + weight + a marker dot, never colour alone */
  .cs-bnav-item[aria-current="page"] {
    color: var(--cs-green-300);
    font-weight: 700;
  }

  /* Material-style active indicator: a pill behind the icon. A shape, not
     just a hue, so the current item survives colour-blindness and
     greyscale. */
  .cs-bnav-item[aria-current="page"] .cs-bnav-ico::before {
    content: "";
    position: absolute;
    inset: -4px -13px;
    border-radius: var(--cs-r-pill);
    background: var(--cs-green-soft);
    border: 1px solid var(--cs-green-line);
  }

  /* --- Raised centre action --- */
  .cs-bnav-center {
    flex: 0 0 84px;
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  /* Notch: a disc of page background that reads as a cut-out in the bar */
  .cs-bnav-notch {
    position: absolute;
    z-index: 1;
    top: -33px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--cs-bg);
    pointer-events: none;
  }

  /* The Rami artwork already contains the flames, disc, cards and
     wordmark, so the FAB draws nothing itself — it is just a hit area
     around the image. The image is taller than the disc it contains, so
     it is offset upward to let the flames escape the bar. */
  .cs-bnav-fab {
    position: absolute;
    z-index: 3;
    top: -58px;
    left: 50%;
    transform: translateX(-50%);
    width: 122px;
    height: 122px;
    display: block;
    text-decoration: none;
    transition: transform var(--cs-t-fast) var(--cs-ease);
  }

  .cs-bnav-fab-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(255, 120, 0, 0.35));
    animation: cs-flicker 1.9s var(--cs-ease) infinite;
    transform-origin: 50% 62%;
  }

  .cs-bnav-fab:active {
    transform: translateX(-50%) scale(0.95);
  }

  /* The glow breathes rather than the artwork jumping — the flames are
     baked into the bitmap, so scaling it would read as a wobble. */
  @keyframes cs-flicker {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 120, 0, 0.35)); }
    50%      { filter: drop-shadow(0 0 18px rgba(255, 145, 0, 0.55)); }
  }

  /* Keep content and the footer clear of the fixed bar */
  .body-middle {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }

  /* Toasts must not sit under the bar */
  .cs-toast-region {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }

}

/* Very narrow phones: drop to icon-first sizing so 5 slots still fit */
@media screen and (max-width: 359px) {
  .cs-bnav-bar {
    height: 62px;
  }

  .cs-bnav-item {
    font-size: 10px;
  }

  .cs-bnav-ico {
    width: 26px;
    height: 26px;
  }

  .cs-bnav-center {
    flex: 0 0 74px;
  }

  .cs-bnav-fab {
    width: 106px;
    height: 106px;
    top: -50px;
  }

  .cs-bnav-notch {
    width: 80px;
    height: 80px;
    top: -28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-bnav-fab-img {
    animation: none;
  }
}

/* ==========================================================================
   09. FORMS & INPUTS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea,
select {
  background: var(--cs-surface-1);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-sm);
  color: var(--cs-text);
  min-height: 44px; /* comfortable tap target */
  transition: border-color var(--cs-t-fast) var(--cs-ease),
              box-shadow var(--cs-t-fast) var(--cs-ease);
}

input::placeholder,
textarea::placeholder {
  color: var(--cs-text-muted);
  opacity: 1;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--cs-green-line);
  box-shadow: 0 0 0 3px var(--cs-green-soft);
  outline: none;
}

input[disabled],
textarea[disabled],
select[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

label {
  color: var(--cs-text-secondary);
  font-weight: 500;
}

/* nice-select dropdown */
.nice-select {
  background: var(--cs-surface-1) !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-r-sm) !important;
  color: var(--cs-text) !important;
}

.nice-select .list {
  background: var(--cs-surface-1);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r);
  box-shadow: var(--cs-e3);
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
  background: var(--cs-surface-2);
  color: var(--cs-text);
}

/* Form error / helper text */
.cs-field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--cs-danger);
}

.cs-field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--cs-text-muted);
}

/* ==========================================================================
   10. SURFACES, TABLES & MISC
   ========================================================================== */

/* The old hand-built hero and Rami promo slides used to be styled here:
   background images, copy padding, and ::before scrims to keep text
   readable over the artwork.

   All of it is gone. The hero is a carousel of three finished banners now
   (see .cs-hero), each a linked image carrying its own headline and call to
   action — there is no overlaid copy left to make readable. The scrims were
   actively harmful once those banners arrived: they darkened the artwork on
   every screen under 991px, and the background-image rules were pulling
   betvimo-hero.jpg and betvimo-hero-mobile.jpg on every home page load, both
   of them invisible behind the <img>.

   .cs-slide-link went with them; nothing uses it. img/banner/betvimo-hero*
   and img/banner/rami-promo* are now unreferenced. */

.breadcumnd-banner {
  background-color: var(--cs-surface-1);
  border-bottom: 1px solid var(--cs-border);
}

.breadcumnd-content h1 {
  color: var(--cs-text);
}

.search-provider-wrapper {
  background-color: var(--cs-surface-1);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r);
  gap: var(--cs-sp-4);
  flex-wrap: wrap;
}

/* Generic panel/card surfaces used across the template */
.popup-container,
.custom-model-inner,
.pop-up-content-wrap {
  background: var(--cs-surface-1);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-lg);
  box-shadow: var(--cs-e3);
}

/* Wide data tables must scroll inside their own container. The template
   clips them with .body-middle{overflow:hidden}, which silently cut the
   right-hand columns off on mobile with no way to reach them. */
div.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

div.table-wrapper > table {
  min-width: 560px;
}

table {
  color: var(--cs-text-secondary);
}

table th {
  color: var(--cs-text);
  font-weight: 600;
}

table td,
table th {
  border-color: var(--cs-border) !important;
}

/* Numeric columns shouldn't jitter */
table td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Owl carousel nav */
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
  background: var(--cs-surface-1) !important;
  border: 1px solid var(--cs-border) !important;
  color: var(--cs-text-secondary) !important;
  border-radius: var(--cs-r-sm) !important;
  transition: background var(--cs-t-fast) var(--cs-ease),
              color var(--cs-t-fast) var(--cs-ease),
              border-color var(--cs-t-fast) var(--cs-ease);
}

.owl-nav button.owl-prev:hover,
.owl-nav button.owl-next:hover {
  background: var(--cs-green-soft) !important;
  border-color: var(--cs-green-line) !important;
  color: var(--cs-green-300) !important;
}

.owl-dots .owl-dot span {
  background: var(--cs-surface-3) !important;
  transition: background var(--cs-t-fast) var(--cs-ease),
              width var(--cs-t-fast) var(--cs-ease);
}

.owl-dots .owl-dot.active span {
  background: var(--cs-green) !important;
}

/* Empty state */
.cs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cs-sp-3);
  padding: var(--cs-sp-7) var(--cs-sp-4);
  border: 1px dashed var(--cs-border-strong);
  border-radius: var(--cs-r);
  background: var(--cs-surface-1);
  text-align: center;
}

.cs-empty i {
  font-size: 28px;
  color: var(--cs-text-muted);
}

.cs-empty h4 {
  font-size: 16px;
  margin: 0;
}

.cs-empty p {
  margin: 0;
  font-size: 14px;
  color: var(--cs-text-muted);
}

/* ==========================================================================
   11. TOASTS & TOOLTIPS
   ========================================================================== */

.cs-toast-region {
  position: fixed;
  right: var(--cs-sp-5);
  bottom: var(--cs-sp-5);
  z-index: var(--cs-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--cs-sp-2);
  pointer-events: none;
}

.cs-toast {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-3);
  min-width: 240px;
  max-width: min(360px, calc(100vw - 32px));
  padding: var(--cs-sp-3) var(--cs-sp-4);
  border-radius: var(--cs-r);
  border: 1px solid var(--cs-border-strong);
  background: var(--cs-surface-1);
  color: var(--cs-text);
  font-size: 14px;
  box-shadow: var(--cs-e3);
  pointer-events: auto;
  animation: cs-toast-in var(--cs-t-slow) var(--cs-ease-out);
}

.cs-toast.is-leaving {
  animation: cs-toast-out var(--cs-t) var(--cs-ease) forwards;
}

.cs-toast i {
  color: var(--cs-green);
  flex-shrink: 0;
}

@keyframes cs-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cs-toast-out {
  to { opacity: 0; transform: translateY(8px); }
}

/* Sidebar tooltips — positioned fixed by JS so the scroll container
   can't clip them. */
.cs-tooltip {
  position: fixed;
  z-index: var(--cs-z-tooltip);
  padding: 7px 11px;
  border-radius: var(--cs-r-sm);
  border: 1px solid var(--cs-border-strong);
  background: var(--cs-surface-2);
  color: var(--cs-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--cs-e2);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--cs-t-fast) var(--cs-ease),
              transform var(--cs-t-fast) var(--cs-ease);
}

.cs-tooltip.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   12. MOTION
   ========================================================================== */

/* Scroll/load reveal — final state is the default so content is readable
   even if JS never runs. */
.cs-reveal {
  opacity: 0;
  transform: translateY(14px);
}

.cs-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--cs-t-slow) var(--cs-ease-out),
              transform var(--cs-t-slow) var(--cs-ease-out);
}

/* Respect the user's motion preference across everything above. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .cs-reveal {
    opacity: 1;
    transform: none;
  }

  .casino-demo-items:hover {
    transform: none;
  }

  .casino-demo-items:hover img {
    transform: none;
  }
}

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */

/* Large desktop.
   The header now carries a wallet, notifications and a profile menu on top
   of the template's original row, which overflowed between roughly 1200
   and 1600px and clipped the profile. Shed the least important items
   first: the decorative social links (they are repeated in the footer),
   then the oversized search field. */
@media screen and (min-width: 1200px) and (max-width: 1599px) {
  .header-top-wrapper .header-top-social > li:not(.cs-player-only):not(.btn-top-group) {
    display: none;
  }
}

@media screen and (max-width: 1599px) {
  .header-top-wrapper .middle-referral ul li form {
    width: 260px;
  }
}

@media screen and (max-width: 1399px) {
  .cs-wallet {
    padding-left: var(--cs-sp-3);
  }

  .header-top-wrapper .middle-referral ul li:not(:last-child) {
    margin-right: 16px;
  }
}

/* Tablet / small laptop */
@media screen and (max-width: 1199px) {
  .header-top {
    padding: 0 var(--cs-sp-4);
  }

  .header-top-wrapper .header-top-social {
    gap: var(--cs-sp-2);
  }

  /* main.css hides EVERY header-social item below 1199px. The decorative
     social icons can stay hidden, but the wallet, deposit and profile are
     primary controls — bring those back, scoped to the current auth state
     so they don't fight the guest/player rules above. */
  body[data-cs-auth="player"] .header-top-social > li.cs-player-only,
  body[data-cs-auth="guest"] .header-top-social > li.btn-top-group {
    display: flex !important;
  }

  /* The bell, without the data-cs-auth guard the two rules above carry.
     That attribute is written by casino-bridge.js, so a rule depending on it
     leaves the bell hidden until the script runs — and hidden for good if it
     fails. The bell is only RENDERED for a signed-in player, so the server has
     already made that decision and the CSS does not need to make it again. */
  .header-top-wrapper .header-top-social > li.notif-dd {
    display: flex !important;
    /* Never shrink: it is a 40px tap target in a flex row that gets tight on a
       small phone, and a squeezed bell is as unusable as a hidden one. */
    flex: 0 0 auto;
  }

  /* The toggle drives the off-canvas drawer at this size. */
  .cs-sidebar-toggle {
    display: inline-flex;
  }
}

@media screen and (max-width: 991px) {
  .cs-wallet-label {
    display: none;
  }

  .cs-wallet {
    height: 42px;
    gap: var(--cs-sp-2);
  }
}

/* Mobile */
@media screen and (max-width: 767px) {
  :root {
    --cs-header-h: 64px;
  }

  .header-top {
    padding: 0 var(--cs-sp-3);
  }

  .header-top-wrapper {
    gap: var(--cs-sp-2);
  }

  .header-top-wrapper .logo {
    max-width: 112px;
  }

  /* Collapse the wallet to the essential number + deposit action. */
  .cs-wallet {
    padding: 0 4px 0 var(--cs-sp-3);
    gap: var(--cs-sp-2);
  }

  .cs-wallet-value {
    font-size: 14px;
  }

  .cs-deposit-btn span {
    display: none;
  }

  .cs-deposit-btn {
    padding: 0 12px;
  }

  .cs-profile-trigger .cs-profile-name,
  .cs-profile-trigger .fa-chevron-down {
    display: none;
  }

  .cs-game-page {
    padding: var(--cs-sp-4) 0 var(--cs-sp-5);
  }

  /* Let the playfield use the full width on phones. */
  .cs-game-stage {
    border-radius: var(--cs-r);
  }

  .cs-game-foot {
    justify-content: center;
    gap: var(--cs-sp-3);
  }

  .cs-game-foot-actions {
    justify-content: center;
    gap: var(--cs-sp-3);
  }

  .cs-game-about {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cs-sp-4);
    padding: var(--cs-sp-4);
  }

  .cs-toast-region {
    right: var(--cs-sp-3);
    left: var(--cs-sp-3);
    bottom: var(--cs-sp-3);
  }

  .cs-toast {
    max-width: none;
  }

  .cs-card-body {
    padding: 10px;
  }

  .cs-card-title {
    font-size: 13px;
  }
}

@media screen and (max-width: 575px) {
  /* The bell used to be hidden here, to let the wallet, deposit and profile
     win the space contest, on the grounds that notifications stayed
     "reachable from the profile menu". They did not: no notifications entry
     was ever added to that menu, so on a phone they were unreachable
     entirely — which is the whole of the bug.

     It stays. The ~20px it needs is taken back below from the logo, the gaps
     and the icon buttons, none of which is load-bearing. */
  body[data-cs-auth="player"] .header-top-social > li.cs-notif-item {
    display: flex !important;
    flex: 0 0 auto;
  }

  /* Fit toggle + logo + wallet + bell + profile inside 360px without
     clipping. Every value below is part of that budget. */
  .header-top {
    padding: 0 8px;
  }

  .header-top-wrapper {
    gap: 4px;
  }

  .header-top-wrapper .logo {
    /* 68 rather than 76: at 360px — the commonest Android width here — the
       last 8px of the profile avatar was landing outside the viewport. */
    max-width: 68px;
  }

  .cs-header-left {
    gap: 4px;
  }

  .header-top-wrapper .header-top-social {
    gap: 4px;
  }

  .cs-sidebar-toggle {
    --cs-icon-btn-size: 36px;
  }

  /* The bell matches the toggle rather than keeping the desktop size. */
  .cs-notif-item .cs-icon-btn {
    width: 36px;
    height: 36px;
  }

  /* Phone order: logo, balance, profile, bell.

     Done with `order` rather than by moving anything. The bell is injected
     before the wallet by the theme script and the panel's <li> is then
     relocated next to it by the bridge; reordering in JS would mean editing
     that sequence in two files and would still leave the desktop arrangement
     to put back. One number here moves only what is drawn, only on phones.

     Everything else stays at the default 0 and keeps its DOM order, so the
     wallet lands before the profile without needing a selector of its own —
     which matters because those two <li>s carry no distinguishing class, and
     :has() is not something to depend on for a header. */
  .header-top-wrapper .header-top-social > li.cs-notif-item,
  .header-top-wrapper .header-top-social > li.notif-dd {
    order: 1;
  }

  .cs-wallet {
    height: 40px;
    padding: 0 4px 0 8px;
    gap: 4px;
  }

  .cs-wallet-value {
    font-size: 13px;
  }

  .cs-deposit-btn {
    height: 32px;
    padding: 0 8px;
  }

  /* The header now has to hold six things and one of them has to give. The
     currency word gives: this site prices everything in TND and says so on
     the wallet page, so "1,420.50" alone loses nothing, while dropping the
     bell, the deposit button or the profile would each lose a control.

     One breakpoint rather than two. Hiding it only below 430 left 431-575 —
     a 480px phone — with the currency back in and the avatar hard against the
     right edge. Phones lose the word; 576px and up has room for it. */
  .cs-wallet-cur {
    display: none;
  }

  .cs-profile-trigger {
    height: 40px;
    padding: 0 4px;
    gap: 0;
  }

  .cs-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .cs-game-bar {
    padding: 10px var(--cs-sp-3);
  }

  .cs-game-actions .cs-icon-btn {
    --cs-icon-btn-size: 36px;
  }

  /* Two-up game grid stays comfortable at 375px */
  .cs-card-play span {
    display: none;
  }

  .cs-card-play {
    padding: 0 10px;
  }
}


/* ==========================================================================
   Games catalog + in-site game frame
   --------------------------------------------------------------------------
   Everything here is scoped to a catalog class or to a container the
   template already owns, so it cannot reach a page that has no catalog.

   This file never loads on Rammi routes (see layouts/app.blade.php), so
   none of it can affect the game.
   ========================================================================== */

/* --- Tile ---------------------------------------------------------------- */

/* The caption lives here, OUTSIDE .casino-demo-items. That element is
   overflow:hidden with a height:100% overlay, so a caption inside it would
   stretch the overlay past the artwork and be covered on hover. */
.game-tile {
  display: flex;
  flex-direction: column;
}

/* The catalog's artwork comes from many providers at different sizes. Without
   a fixed ratio the tiles in a row end up different heights and the grid goes
   ragged - the template never hit this because its images were hand-cropped. */
.game-tile .casino-demo-items img,
.game-tile .game-tile-fallback {
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  display: block;
}

.game-tile .casino-demo-items > a {
  display: block;
  line-height: 0;
}

/* A single Play button. The template's rule carries margin:0 5px 30px 0 for
   a two-button row, and that stray right margin pushes a lone button off
   centre. The bottom margin is kept - it lifts the button off the edge. */
.game-tile .casino-overlay .cmn-grp {
  display: flex;
  justify-content: center;
  width: 100%;
}

.game-tile .casino-overlay .cmn-grp .cmn--btn {
  margin-right: 0;
  margin-left: 0;
}

.game-tile-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 10px;
  min-height: 2.6em;          /* two lines, so captions align across a row */
  font-size: 13px;
  line-height: 1.3;
  color: var(--white, #fff);
  text-decoration: none;
  transition: color 0.2s;
}

.game-tile-name:hover,
.game-tile-name:focus {
  color: var(--base, #19C37D);
}

/* Shown instead of <img> when the provider gave us no banner. */
.game-tile .game-tile-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  background: linear-gradient(140deg, rgba(25, 195, 125, 0.18), rgba(17, 23, 34, 0.9));
  color: var(--white, #fff);
}

/* --- Filters, sorting, empty states -------------------------------------- */

/* The template's search trigger was a <div>; it is a <button> now so the form
   can be submitted from the keyboard. Strip the UA button chrome. */
.right-search button.search {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

.section-wrapper .left-title a.shortby {
  cursor: pointer;
  text-decoration: none;
}

.section-wrapper .left-title a.shortby.active {
  color: var(--base, #19C37D);
}

.catalog-empty {
  padding: 40px 0;
  text-align: center;
  opacity: 0.7;
}

/* Laravel's paginator, sitting in the template's .more-btn slot. */
.catalog-pagination .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalog-pagination .page-link {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white, #fff);
  text-decoration: none;
}

.catalog-pagination .active .page-link {
  background: var(--base, #19C37D);
  color: #06120c;
}

.catalog-pagination .disabled .page-link {
  opacity: 0.4;
  pointer-events: none;
}

/* --- In-site game frame --------------------------------------------------- */

.game-frame-page {
  padding-block: 24px 48px;
}

.game-frame-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.game-frame-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--white, #fff);
  text-decoration: none;
  white-space: nowrap;
}

.game-frame-back:hover {
  background: rgba(255, 255, 255, 0.13);
  color: var(--white, #fff);
}

.game-frame-title {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  /* Both halves are required. min-width:0 alone is not enough: a flex item
     defaults to min-width:auto AND to its content size, so a long game name
     in a nowrap <strong> sized the item past the viewport and scrolled the
     whole page sideways. flex-shrink lets it give way; min-width:0 lets the
     ellipsis actually engage. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

.game-frame-title strong {
  font-size: 16px;
  color: var(--white, #fff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-frame-title span {
  font-size: 12px;
  opacity: 0.6;
}

.game-frame-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.game-frame-balance {
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(25, 195, 125, 0.12);
  color: var(--base, #19C37D);
  font-weight: 600;
  font-variant-numeric: tabular-nums;   /* stops digits jittering as it polls */
  white-space: nowrap;
}

.game-frame-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--white, #fff);
  cursor: pointer;
}

.game-frame-btn:hover {
  background: rgba(255, 255, 255, 0.13);
}

/* 16:9 with a floor, so a tall slot is not squeezed into a letterbox on a
   laptop and a phone still gets a usable height. */
.game-frame-shell {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 460px;
  border-radius: 12px;
  overflow: hidden;
  background: #0b0f17;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.game-frame-shell:fullscreen {
  aspect-ratio: auto;
  min-height: 0;
  border-radius: 0;
  width: 100%;
  height: 100%;
}

.game-frame-shell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.game-frame-note {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  opacity: 0.55;
}

.game-frame-note a {
  color: var(--base, #19C37D);
}

@media (max-width: 767px) {
  /* Taller than 16:9 so the game is usable, but sized against the viewport
     rather than a fixed 520px: on a short phone that was most of the screen
     and pushed everything else off the bottom. max-height keeps it honest
     when the aspect ratio would otherwise win. */
  .game-frame-shell {
    aspect-ratio: 3 / 4;
    min-height: 320px;
    max-height: calc(100dvh - 190px);
  }

  /* A LIVE table needs every pixel of height it can get on a phone.

     Evolution lays its mobile UI out vertically — the stream at the top, then
     the chips, the bet spots and the history — so the 190px this reserves for
     the toolbar and the note below it came straight out of the controls. A slot
     is a single fixed canvas and does not care; a live table is why players
     could see the dealer and not the buttons.

     Height rather than an aspect ratio, because the ratio is what was doing the
     squeezing: the stream letterboxes itself inside whatever it is given. */
  .game-frame-shell--live {
    aspect-ratio: auto;
    height: calc(100dvh - 132px);
    max-height: none;
    min-height: 420px;
  }

  /* The bar stacks: Back on its own line, then the title, then the actions.
     Each row is full width so nothing can push the page sideways. */
  .game-frame-bar {
    gap: 10px;
  }

  .game-frame-title {
    flex: 1 1 100%;
    order: -1;
  }

  .game-frame-actions {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
}


/* --- Catalog on phones ----------------------------------------------------
   Three tiles per row (see grid.blade.php). At ~375px that leaves each tile
   around 106px wide, so the caption, the overlay button and the gutters all
   have to come down or the tiles overflow their column. */
@media (max-width: 575.98px) {
  /* Bootstrap gutters are 1rem by default; two of them eat 10% of the row. */
  .all-games-wrapper .row,
  .casino-demo .row,
  .pool-section .row {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.75rem;
  }

  .game-tile-name {
    margin-top: 6px;
    font-size: 11px;
    min-height: 2.4em;
  }

  .game-tile .game-tile-fallback {
    padding: 6px;
    font-size: 10px;
  }

  /* The template's button is padded for a full-width card and its 30px
     bottom margin is taller than the whole tile at this size. */
  .game-tile .casino-overlay .cmn-grp .cmn--btn {
    padding: 5px 10px 6px;
    margin-bottom: 8px;
    font-size: 11px;
  }

  /* Owl shows three tiles per screen on phones too, so the rails match the
     grid rather than switching layout as you scroll down the page. */
  .live-slider-1 .game-tile-name,
  .casino-demo-wrapper .game-tile-name {
    font-size: 11px;
  }
}

/* --- Full-bleed lobby frame ----------------------------------------------
   A sportsbook or live-casino lobby is a whole application with its own
   navigation and bet slip. Boxed into a centred 16:9 container it is
   unusable, so it takes the full content area and the full height of the
   screen.

   This stays inside .body-middle, which is a flex sibling of .left-site-menu,
   so the site header and the left menu keep their space — the frame fills
   only what is left, rather than covering the chrome. */
/* No toolbar on a lobby, so the frame sits directly under the site header. */
.game-frame-page--full {
  padding-block: 8px 10px;
}

.game-frame-fluid {
  width: 100%;
  padding-inline: 12px;
}

/* Kept for the fallback case where a lobby is rendered with a toolbar. */
/* Kept for the fallback case where a lobby is rendered with a toolbar. */
.game-frame-page--full .game-frame-bar {
  margin-bottom: 10px;
}

/* JS sets an exact height by measuring the element; this is the fallback
   and the value used before that runs. 150px approximates the header plus
   the bar above the frame. */
.game-frame-shell--full {
  aspect-ratio: auto;
  height: calc(100dvh - 150px);
  min-height: 480px;
  border-radius: 10px;
}

@media (max-width: 767px) {
  /* The mobile bottom nav sits over the page, so leave room for it. */
  .game-frame-shell--full {
    min-height: 420px;
  }

  .game-frame-fluid {
    padding-inline: 8px;
  }

  .game-frame-page--full .game-frame-bar {
    gap: 8px;
  }

  /* On a phone the title competes with Back and the balance for one row. */
  .game-frame-page--full .game-frame-title strong {
    font-size: 14px;
  }
}

/* --- Breadcrumb banner ----------------------------------------------------
   The trail and page title are part of the artwork. The accessible trail
   sits in a visually-hidden <nav> in the partial, so the image is purely
   decorative and carries an empty alt. */
.breadcrumb-banner {
  width: 100%;
  line-height: 0;          /* kills the inline-image descender gap */
}

.breadcrumb-banner picture,
.breadcrumb-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Catalog filters ------------------------------------------------------
   Search on its own row, provider and sort side by side beneath it. */
.catalog-filters {
  padding-block: 24px 8px;
}

.catalog-filters-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.catalog-search {
  position: relative;
  width: 100%;
}

.catalog-search input {
  width: 100%;
  height: 48px;
  padding: 0 52px 0 18px;
  border: 1px solid var(--cs-border, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  background: var(--cs-surface, rgba(255, 255, 255, 0.04));
  color: var(--white, #fff);
  font-size: 14px;
}

.catalog-search input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.catalog-search input:focus {
  outline: none;
  border-color: var(--base, #19C37D);
}

.catalog-search-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0 10px 10px 0;
  background: none;
  color: var(--base, #19C37D);
  cursor: pointer;
}

.catalog-selects {
  display: flex;
  gap: 12px;
}

/* Equal halves, and min-width:0 so a long provider name cannot push the
   row wider than the screen. */
.catalog-select {
  flex: 1 1 0;
  min-width: 0;
}

/* nice-select replaces the <select> with a div of this class; style both so
   the control looks the same whether or not the plugin has run. */
.catalog-select select,
.catalog-select .nice-select {
  width: 100%;
  height: 48px;
  line-height: 46px;
  padding: 0 38px 0 16px;
  border: 1px solid var(--cs-border, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  background-color: var(--cs-surface, rgba(255, 255, 255, 0.04));
  color: var(--white, #fff);
  font-size: 14px;
}

.catalog-select .nice-select .list {
  width: 100%;
  max-height: 320px;
  overflow-y: auto;        /* 25 providers do not fit on a phone */
}

@media (min-width: 768px) {
  /* Wide enough for one row: search takes the space, the two dropdowns keep
     a fixed share so they do not stretch to half the screen each. */
  .catalog-filters-form {
    flex-direction: row;
    align-items: center;
  }

  .catalog-search {
    flex: 1 1 auto;
  }

  .catalog-selects {
    flex: 0 0 auto;
  }

  .catalog-select {
    flex: 0 0 200px;
  }
}

@media (max-width: 767px) {
  /* At 2.67:1 the banner is only ~140px tall on a phone and the baked text
     shrinks with it. Cropping to 16:9 and anchoring left zooms in by half
     again, keeping the trail and title legible while the slot machine on
     the right takes the crop. */
  .breadcrumb-banner img {
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 22% center;
    object-position: 22% center;
  }

  .catalog-filters {
    padding-block: 16px 4px;
  }
}

/* --- Bet history ----------------------------------------------------------
   Built from the ledger and grouped into rounds, so one spin is one row.

   There is deliberately no totals bar: the page shows what each bet did, not
   a running lifetime figure. .is-up / .is-down are kept - the per-row Net
   still uses them. */
.is-up { color: var(--base, #19C37D); }
.is-down { color: #ff6b6b; }

.bet-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.bet-filters .catalog-select {
  flex: 0 0 220px;
}

/* The table is the one thing allowed to scroll sideways, in its own box,
   so the page body never does. */
.bet-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--cs-border, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
}

.bet-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.bet-table th,
.bet-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--cs-border, rgba(255, 255, 255, 0.08));
}

.bet-table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.55;
  font-weight: 600;
}

.bet-table tbody tr:last-child td {
  border-bottom: 0;
}

.bet-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bet-table .when {
  white-space: nowrap;
  opacity: 0.6;
  font-size: 13px;
}

.bet-game {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bet-game img {
  width: 44px;
  height: 33px;               /* 4:3, matching the catalog tiles */
  object-fit: cover;
  border-radius: 5px;
  flex: 0 0 auto;
}

.bet-game span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bet-game strong {
  font-size: 14px;
  color: var(--white, #fff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bet-game small {
  font-size: 12px;
  opacity: 0.55;
}

@media (max-width: 767px) {
  .bet-filters {
    flex-direction: column;
  }

  .bet-filters .catalog-select {
    flex: 1 1 auto;
  }
}

/* The jackpot banner in the Activity screen row.

   The template sizes these cards with width:100%; height:100% and no
   object-fit, so an image whose ratio differs from its neighbours' is
   simply stretched. This banner is 2.50:1 against the card's ~2.78:1, so
   it crops instead of distorting. */
.jackpot-card a,
.jackpot-card picture {
  display: block;
  height: 100%;
  line-height: 0;
}

.jackpot-card img {
  -o-object-fit: cover;
  object-fit: cover;
}

/* The row is one card on a phone, where a 2.5:1 strip is very short. */
@media (max-width: 575px) {
  .jackpot-card img {
    min-height: 140px;
  }
}

/* The running figure over the jackpot artwork.

   Anchored to the bottom rather than centred: the artwork's own JACKPOT
   lockup occupies the middle, and a number on top of it would be unreadable
   over gold-on-gold. The gradient is local to this strip, not a full-card
   overlay like the template's .screen-overlay. */
.jackpot-card {
  position: relative;
}

.jackpot-amount {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 26px 12px 12px;
  /* Darker than it needs to be for the type alone: the artwork behind is
     bright gold, and green on gold without this is hard to read. */
  background: linear-gradient(180deg, rgba(8, 11, 17, 0) 0%, rgba(8, 11, 17, 0.92) 65%);
  line-height: 1;
  pointer-events: none;   /* the whole card is the link */
}

.jackpot-value {
  font-size: clamp(20px, 3.2vw, 34px);
  font-weight: 800;
  /* The site accent, not a bespoke gold. A brighter tint than --cs-green
     itself, because this sits on the artwork's dark gold rather than on the
     page background the token was contrast-checked against. */
  color: #2EE6A0;
  /* tabular-nums is the point: without it every digit change shifts the
     width and the whole figure jitters sideways as it counts. */
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
  letter-spacing: -0.01em;
}

.jackpot-currency {
  font-size: clamp(11px, 1.3vw, 15px);
  font-weight: 700;
  color: #2EE6A0;
  opacity: 0.85;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

@media (max-width: 575px) {
  .jackpot-amount {
    padding: 18px 10px 8px;
  }
}

/* --- Big Win / Win of the Month cards -------------------------------------
   The artwork is portrait and already carries its own headline, so these do
   not use the template's .screen-overlay: that is a full-height gradient
   with centred content, and it washed the image out. The figures sit in a
   strip at the bottom instead, matching the jackpot card beside them. */
.win-card {
  position: relative;
}

.win-card a,
.win-card picture {
  display: block;
  height: 100%;
  line-height: 0;
}

.win-card img {
  -o-object-fit: cover;
  object-fit: cover;
  /* Top, not centre: the crop already sits on the lockup, and when the row
     forces a shorter box it is the podium and coins at the bottom that can
     go, never the wording. */
  -o-object-position: top center;
  object-position: top center;

  /* 1.25, derived not guessed. These sit either side of the jackpot, which
     is 2.5:1 at twice their width — so its height is 0.8 x their width, and
     a 1.25 ratio makes all three the same height with nothing stretched.

     Without this they took their source ratio of 1.32 and, wherever the row
     put them at the same width as the jackpot, stood nearly twice as tall
     as it did and dragged the whole row up with them. */
  aspect-ratio: 1.25 / 1;
  height: auto;
}

/* The template gives .screen-items height:100% so its children fill a
   stretched column. These cards size themselves from the ratio above, so
   that would fight it. */
.win-card,
.jackpot-card {
  height: auto;
}

.jackpot-card img {
  aspect-ratio: 2.5 / 1;
  height: auto;
}

.win-card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 12px;
  text-align: center;
  background: linear-gradient(180deg, rgba(8, 11, 17, 0) 0%, rgba(8, 11, 17, 0.92) 62%);
  line-height: 1.25;
  pointer-events: none;   /* the whole card is the link */
}

.win-card-caption h5 {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
}

.win-card-caption h3 {
  margin: 0 0 2px;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.win-card-caption p {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.win-card-caption p span {
  opacity: 0.6;
}

@media (max-width: 575px) {
  .win-card-caption {
    padding: 20px 10px 10px;
  }

  .win-card img {
    min-height: 150px;
  }
}

/* --- Home hero carousel ---------------------------------------------------
   Three branded banners, each carrying its own headline and call to action
   in the artwork. A slide is a linked image; nothing is overlaid.

   .cs-hero scopes every rule here so the template's own .banner-wrapper
   styling, which positions text over a background, cannot apply. */
.cs-hero .banner-items {
  position: relative;
  /* The template gave slides a fixed min-height for its text layout. These
     are images, so the ratio decides the height. */
  min-height: 0;
  padding: 0;
  background: none;
}

.cs-hero .banner-items a,
.cs-hero .banner-items picture {
  display: block;
  line-height: 0;
}

.cs-hero .banner-items img {
  width: 100%;
  height: auto;
  display: block;
  /* Matches the exported files. Declared so the space is reserved before the
     image arrives — otherwise the whole page jumps as the hero loads. */
  aspect-ratio: 2.5 / 1;
  -o-object-fit: cover;
  object-fit: cover;
}

/* Owl's arrows sit over the artwork's own call-to-action button on some
   slides, so they are pulled to the edges and softened. */
.cs-hero .owl-nav button.owl-prev,
.cs-hero .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(8, 11, 17, 0.55) !important;
  color: #fff !important;
  opacity: 0;
  transition: opacity 0.25s;
}

.cs-hero:hover .owl-nav button.owl-prev,
.cs-hero:hover .owl-nav button.owl-next {
  opacity: 1;
}

.cs-hero .owl-nav button.owl-prev { left: 12px; }
.cs-hero .owl-nav button.owl-next { right: 12px; }

.cs-hero .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
}

.cs-hero .owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.4);
}

.cs-hero .owl-dots .owl-dot.active span {
  width: 22px;
  border-radius: 4px;
  background: var(--base, #19C37D);
}

/* --- The hero on small screens -------------------------------------------
   At 2.5:1 a 375px screen gives a 150px strip and the artwork's own text
   renders at 0.23x — legible on a desktop, not on a phone.

   All three banners put their logo, headline and call to action in the left
   ~45%, with the photo subject on the right. So the box gets taller and the
   image is anchored LEFT: the right side takes the crop, and the message
   roughly doubles in size.

     4/3 at 375px -> 281px tall, text at 0.44x, shows the left 53%
     16/9 at 576px -> 324px tall, text at 0.51x, shows the left 71%

   object-position must stay at the left edge. Anything further in starts
   cutting the Rummy banner's 401 / 71 panel, which reaches ~48%. */
@media (max-width: 767px) {
  .cs-hero .banner-items img {
    aspect-ratio: 16 / 9;
    -o-object-position: left center;
    object-position: left center;
  }
}

@media (max-width: 575px) {
  .cs-hero .banner-items img {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 767px) {
  /* Arrows are a pointer affordance; on touch the dots and the swipe do the
     work, and the arrows only cover the artwork. */
  .cs-hero .owl-nav {
    display: none;
  }

  .cs-hero .owl-dots {
    bottom: 6px;
  }

  .cs-hero .owl-dots .owl-dot span {
    width: 6px;
    height: 6px;
  }
}

/* --- Immersive pages ------------------------------------------------------
   A sportsbook or live-casino lobby is a whole application embedded in the
   page. It gets the screen: top bar stays, sidebar starts collapsed to its
   icon rail, footer is gone.

   The sidebar is COLLAPSED, not removed. The rail and its toggle are still
   there, so a player can open the menu and leave — a lobby with no way out
   is a trap. */
.cs-immersive .body-middle {
  /* The template pads the bottom for a footer that is not here. */
  padding-bottom: 0;
}

.cs-immersive .game-frame-page--full {
  padding-block: 6px 0;
}

/* The JS sizes the shell by measuring, and with the footer gone there is
   more to take. This is the fallback before it runs. */
.cs-immersive .game-frame-shell--full {
  height: calc(100dvh - 104px);
  border-radius: 8px;
}

@media (max-width: 767px) {
  /* The bottom nav goes on a lobby. It floats over the page, and a
     sportsbook puts its own tabs and bet slip along the bottom edge — two
     fixed bars stacked, one of them covering the other's controls.

     Safe to hide because the top bar's menu button still opens the
     off-canvas drawer on mobile, so the player is not stranded in the
     lobby with no way out. This is the ONLY place it is hidden; every
     other page keeps it. */
  .cs-immersive .cs-bottom-nav {
    display: none;
  }

  /* Only the top bar left to clear, so the frame takes more than it did
     when the nav was reserving space.

     The 900px floor is deliberate and is NOT "fit the viewport": it is
     taller than most phones (an iPhone 14 is 844px), so the page scrolls.
     That is the point. A sportsbook laid out inside a 700px frame scrolls
     INTERNALLY, and a scrollable iframe inside a scrollable page is
     miserable on touch — the wrong one moves. Giving the frame more height
     than the screen lets the provider lay out in full and hands the
     scrolling back to the page, where a thumb expects it. */
  .cs-immersive .game-frame-shell--full {
    height: calc(100dvh - 96px);
    min-height: 900px;
  }
}