/* ════════════════════════════════════════════════════════════════
   VaultOS Casino — Client Space  v2.0
   Dark premium aesthetic · Gold accent · Casino identity
   Font: DM Sans (matches admin dashboard)
════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 14px; }

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --bg:         #09090c;
  --bg1:        #0d0e13;
  --bg2:        #111318;
  --bg3:        #16181f;
  --bg4:        #1c1f2b;
  --bg5:        #222637;

  --border:     rgba(255,255,255,.06);
  --border2:    rgba(255,255,255,.10);
  --border3:    rgba(255,255,255,.15);

  /* Gold accent — casino identity */
  --gold:       #f4b942;
  --gold-dark:  #c9901a;
  --gold-lt:    rgba(244,185,66,.12);
  --gold-glow:  rgba(244,185,66,.30);
  --gold2:      #fcd27a;
  
  /* ubett.me button colors */
  --ubett-green: #1a7051;
  --ubett-blue:  #52668c;
  --ubett-btn-text: #f8fbff;
  --ubett-btn-border: rgba(255,255,255,.18);

  /* Green — positive / wins */
  --green:      #10b981;
  --green-lt:   rgba(16,185,129,.12);
  --green2:     #34d399;

  /* Red */
  --red:        #f43f5e;
  --red-lt:     rgba(244,63,94,.12);
  --red2:       #fb7185;

  /* Purple accent (secondary — matches admin) */
  --accent:     #6366f1;
  --accent-lt:  rgba(99,102,241,.12);
  --accent2:    #a78bfa;

  /* Live badge */
  --live:       #ef4444;

  /* Text */
  --text:       #e8eaf0;
  --text2:      #9199b0;
  --text3:      #5c6480;
  --text4:      #3e4460;

  --font:       'DM Sans', system-ui, sans-serif;
  --mono:       'DM Mono', monospace;

  --r:          6px;
  --r-sm:       8px;
  --r-md:       12px;
  --r-lg:       16px;
  --r-xl:       20px;

  --sh:         0 1px 4px rgba(0,0,0,.4);
  --sh-md:      0 4px 16px rgba(0,0,0,.5);
  --sh-lg:      0 12px 40px rgba(0,0,0,.65);
  --sh-glow:    0 0 32px var(--gold-glow);

  --nav-h:      56px;
  --sub-h:      44px;
  --sb-w:       230px;
  --bs-w:       272px;
  --t:          140ms ease;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a  { text-decoration: none; color: inherit; cursor: pointer; }
button { font-family: inherit; cursor: pointer; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg5); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text4); }

/* ══════════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════════ */
.navbar {
  position: sticky; top: 0; z-index: 600;
  height: var(--nav-h);
  background: #171c2c(240 0% 78% / 0.616);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 12px;
  gap: 0;
}

/* Logo */
.nav-logo {
  font-size: 18px; font-weight: 800; color: var(--text);
  letter-spacing: -.4px; padding: 0 20px 0 8px;
  white-space: nowrap; flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.nav-logo-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #171c2c;
  box-shadow: 0 3px 12px var(--gold-glow);
  flex-shrink: 0;
}
.nav-logo-dot { display: none; } /* legacy compat */

/* Nav links */
.nav-links { display: flex; height: 100%; flex: 1; min-width: 0; overflow-x: auto; }
.nav-links::-webkit-scrollbar { height: 0; }

.nl {
  display: flex; align-items: center; height: 100%;
  padding: 0 16px; font-size: 13px; font-weight: 500;
  color: var(--text2); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t);
  cursor: pointer; gap: 5px;
}
.nl:hover  { background: rgba(255,255,255,.04); color: var(--text); }
.nl.active { color: var(--gold); border-bottom-color: var(--gold); background: rgba(244,185,66,.05); }

.nl-live-dot {
  display: inline-block; width: 6px; height: 6px;
  background: var(--live); border-radius: 50%;
  animation: blink 1.4s infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.nl-count {
  background: rgba(244,63,94,.2); color: #fca5a5;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 99px;
}

/* Nav right */
.nav-right {
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px; flex-shrink: 0; height: 100%;
  border-left: 1px solid var(--border);
  margin-left: auto;
}

/* Balance pill */
.balance {
  background: var(--gold-lt);
  border: 1px solid rgba(244,185,66,.22);
  border-radius: var(--r-sm);
  padding: 5px 12px; font-size: 13px;
  font-weight: 700; color: var(--gold);
  font-family: var(--mono);
  display: flex; align-items: center; gap: 6px;
}
.balance-label {
  font-size: 10px; font-weight: 600;
  color: var(--text3); text-transform: uppercase;
  letter-spacing: .06em; font-family: var(--font);
}

/* ══════════════════════════════════════════════════════════════
   SPORT CATEGORY STRIP
══════════════════════════════════════════════════════════════ */
.subnav {
  position: sticky; top: var(--nav-h); z-index: 500;
  height: var(--sub-h);
  background: var(--bg1);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 12px; gap: 4px;
  overflow-x: auto;
}
.subnav::-webkit-scrollbar { height: 0; }

.sport-pill {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 99px;
  font-size: 12px; font-weight: 600; color: var(--text2);
  background: transparent; border: 1px solid var(--border);
  white-space: nowrap; flex-shrink: 0; cursor: pointer;
  transition: all var(--t);
}
.sport-pill:hover  { background: var(--bg4); color: var(--text); border-color: var(--border2); }
.sport-pill.active { background: var(--gold-lt); color: var(--gold); border-color: rgba(244,185,66,.3); }
.sport-pill-icon   { font-size: 13px; }

/* ══════════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════════ */
.layout {
  display: flex;
  min-height: calc(100vh - var(--nav-h) - var(--sub-h));
}

/* ══════════════════════════════════════════════════════════════
   LEFT SIDEBAR
══════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sb-w); flex-shrink: 0;
  background: var(--bg1);
  border-right: 1px solid var(--border);
  min-height: calc(100vh - var(--nav-h) - var(--sub-h));
  position: sticky;
  top: calc(var(--nav-h) + var(--sub-h));
  height: calc(100vh - var(--nav-h) - var(--sub-h));
  overflow-y: auto;
}

.sidebar-section { border-bottom: 1px solid var(--border); }

.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  font-size: 11px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .08em;
  cursor: pointer; transition: background var(--t);
}
.sidebar-header:hover { background: var(--bg3); }

.sidebar-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  font-size: 12px; font-weight: 500; color: var(--text2);
  cursor: pointer; transition: background var(--t), color var(--t);
}
.sidebar-item:hover { background: var(--bg3); color: var(--text); }
.sidebar-item.active {
  background: var(--gold-lt); color: var(--gold); font-weight: 600;
  border-left: 2px solid var(--gold);
}
.sidebar-item-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.sidebar-item-icon { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; }
.sidebar-item-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-item-count {
  background: var(--bg4); color: var(--text3);
  font-size: 10px; font-weight: 600; font-family: var(--mono);
  padding: 1px 6px; border-radius: 99px;
}
.sidebar-item.active .sidebar-item-count { background: rgba(244,185,66,.18); color: var(--gold); }

/* Live items in sidebar */
.sidebar-live-item {
  padding: 8px 14px; cursor: pointer;
  transition: background var(--t);
  border-left: 2px solid transparent;
}
.sidebar-live-item:hover { background: var(--bg3); border-left-color: var(--live); }
.sli-teams { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.sli-meta  { display: flex; align-items: center; gap: 8px; }
.sli-live  {
  font-size: 9px; font-weight: 800; color: #fff; background: var(--live);
  padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: .06em;
}
.sli-score { font-size: 12px; font-weight: 700; color: var(--gold); font-family: var(--mono); }
.sli-min   { font-size: 11px; color: var(--text3); }

/* ══════════════════════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════════════════════ */
.main {
  flex: 1; min-width: 0;
  padding: 18px 20px;
  overflow-x: hidden;
}
.page {
  display: none;
  opacity: 0;
  visibility: hidden;
}
.page.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#page-home.active {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   BETSLIP
══════════════════════════════════════════════════════════════ */
.betslip-col {
  width: var(--bs-w); flex-shrink: 0;
  position: sticky;
  top: calc(var(--nav-h) + var(--sub-h));
  height: calc(100vh - var(--nav-h) - var(--sub-h));
  overflow-y: auto;
  padding: 12px;
  background: var(--bg1);
  border-left: 1px solid var(--border);
}
.betslip {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.betslip-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  font-size: 13px; font-weight: 700; color: var(--text);
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.betslip-count {
  background: var(--gold); color: #000;
  font-size: 11px; font-weight: 800;
  width: 20px; height: 20px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.betslip-empty  { padding: 28px 14px; text-align: center; color: var(--text3); font-size: 13px; }
.betslip-empty-icon { font-size: 28px; display: block; margin-bottom: 8px; opacity: .4; }

.betslip-item   {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.betslip-item-remove {
  position: absolute; top: 8px; right: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  border: none; background: var(--bg5); color: var(--text3);
  font-size: 10px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--t);
}
.betslip-item-remove:hover { background: var(--red-lt); color: var(--red2); }
.betslip-match     { font-size: 12px; font-weight: 600; color: var(--text); padding-right: 20px; }
.betslip-selection { font-size: 11px; color: var(--text3); margin-top: 2px; }
.betslip-odd       { font-size: 14px; font-weight: 700; color: var(--gold); margin-top: 4px; font-family: var(--mono); }
.betslip-stake     { margin-top: 6px; }
.betslip-stake input {
  width: 100%;
  background: var(--bg4); border: 1px solid var(--border2);
  color: var(--text); border-radius: var(--r-sm);
  padding: 6px 10px; font-size: 13px; font-family: var(--mono);
  outline: none; transition: border-color var(--t);
}
.betslip-stake input:focus { border-color: var(--gold); background: var(--bg3); }
.betslip-footer    {
  padding: 12px; background: var(--bg3);
  border-top: 1px solid var(--border);
}
.betslip-total     { display: flex; justify-content: space-between; font-size: 11px; color: var(--text3); margin-bottom: 5px; }
.betslip-win       { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.betslip-win-val   { color: var(--green2); font-family: var(--mono); }
.betslip-btn {
  width: 100%; padding: 10px;
  background: var(--gold); color: #000;
  border: none; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 800; letter-spacing: .01em;
  transition: all var(--t); box-shadow: 0 3px 12px var(--gold-glow);
}
.betslip-btn:hover    { background: var(--gold2); transform: translateY(-1px); }
.betslip-btn:disabled { background: var(--bg5); color: var(--text3); cursor: not-allowed; box-shadow: none; transform: none; }

/* ══════════════════════════════════════════════════════════════
   HERO CAROUSEL
══════════════════════════════════════════════════════════════ */
.hp-carousel {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  margin-bottom: 18px;
  border: 1px solid var(--border);
}
.hp-carousel-track {
  display: flex;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}

.hp-slide {
  flex: 0 0 100%;
  min-height: 220px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center;
  border-radius: var(--r-lg);
}
.hp-slide-bg {
  position: absolute; inset: 0;
  border-radius: inherit;
}
.hp-slide-shape {
  position: absolute; border-radius: 50%; opacity: .12;
}
.hp-slide-shape--1 { width: 300px; height: 300px; top: -80px; right: -60px; background: rgba(255,255,255,.6); }
.hp-slide-shape--2 { width: 200px; height: 200px; bottom: -60px; right: 120px; background: rgba(255,255,255,.3); }

.hp-slide-content {
  position: relative; z-index: 2;
  padding: 28px 32px; max-width: 500px;
}
.hp-slide-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.7); margin-bottom: 10px;
}
.hp-slide-title {
  font-size: 30px; font-weight: 800; color: #fff;
  letter-spacing: -.5px; line-height: 1.15;
  margin-bottom: 8px;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.hp-slide-sub { font-size: 12px; color: rgba(255,255,255,.65); margin-bottom: 18px; }

.hp-slide-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hp-slide-btn {
  padding: 9px 20px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700; border: none; cursor: pointer;
  transition: all var(--t); white-space: nowrap;
}
.hp-slide-btn--primary { background: var(--gold); color: #000; box-shadow: 0 3px 12px var(--gold-glow); }
.hp-slide-btn--primary:hover { background: var(--gold2); transform: translateY(-1px); }
.hp-slide-btn--white  { background: #fff; color: #000; }
.hp-slide-btn--white:hover { background: #f0f0f0; transform: translateY(-1px); }
.hp-slide-btn--outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.hp-slide-btn--outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.hp-slide-odds {
  display: flex; gap: 6px;
}
.hp-odd-item {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-sm); padding: 5px 10px;
  cursor: pointer; transition: all var(--t); min-width: 48px;
}
.hp-odd-item:hover { background: rgba(244,185,66,.2); border-color: var(--gold); }
.hp-odd-lbl { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.6); text-transform: uppercase; }
.hp-odd-val { font-size: 14px; font-weight: 800; color: var(--gold); font-family: var(--mono); }

/* Score box */
.hp-slide-score-box {
  position: absolute; right: 28px; top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-md); padding: 16px 20px;
  text-align: center; backdrop-filter: blur(8px);
  z-index: 2;
}
.hp-score-team { font-size: 14px; font-weight: 800; color: #fff; }
.hp-score-vs   { font-size: 11px; color: rgba(255,255,255,.45); margin: 6px 0; font-weight: 700; }
.hp-slide-score-box--bonus .hp-bonus-amount {
  font-size: 36px; font-weight: 900; color: var(--gold);
  font-family: var(--mono); text-shadow: 0 0 24px var(--gold-glow);
}
.hp-slide-score-box--bonus .hp-bonus-label {
  font-size: 11px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .06em;
}

/* Arrows */
.hp-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--t); z-index: 5;
  backdrop-filter: blur(6px);
}
.hp-carousel-arrow:hover { background: rgba(0,0,0,.75); border-color: rgba(255,255,255,.35); }
.hp-carousel-arrow--prev { left: 10px; }
.hp-carousel-arrow--next { right: 10px; }

/* Dots */
.hp-carousel-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 5;
}
.hp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.35); cursor: pointer; transition: all var(--t);
}
.hp-dot.active { background: var(--gold); width: 18px; border-radius: 99px; }

/* ══════════════════════════════════════════════════════════════
   CATEGORY CARDS (HPC)
══════════════════════════════════════════════════════════════ */
.hpc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.hpc-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--border2);
  transition: transform .2s ease, border-color .15s;
  aspect-ratio: 16/9;
}
.hpc-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.hpc-card:hover .hpc-shine { opacity: 1; }
.hpc-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .3s ease;
}
.hpc-card:hover .hpc-img { transform: scale(1.05); }
.hpc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.65) 100%);
}
.hpc-overlay--purple { background: linear-gradient(160deg, rgba(99,102,241,.3) 0%, rgba(0,0,0,.75) 100%); }
.hpc-overlay--orange { background: linear-gradient(160deg, rgba(234,88,12,.3) 0%, rgba(0,0,0,.75) 100%); }
.hpc-body {
  position: absolute; bottom: 12px; left: 12px; right: 12px; z-index: 2;
}
.hpc-badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 99px;
  font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 5px;
}
.hpc-badge--green  { background: var(--green-lt); color: var(--green2); border: 1px solid rgba(16,185,129,.3); }
.hpc-badge--gold   { background: var(--gold-lt);  color: var(--gold);   border: 1px solid rgba(244,185,66,.3); }
.hpc-badge--red    { background: var(--red-lt);   color: var(--red2);   border: 1px solid rgba(244,63,94,.3); }
.hpc-badge--orange { background: rgba(234,88,12,.15); color: #fb923c; border: 1px solid rgba(234,88,12,.3); }
.hpc-title { font-size: 16px; font-weight: 800; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.hpc-sub   { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 2px; }
.hpc-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 50%);
  opacity: 0; transition: opacity .2s;
}

/* ══════════════════════════════════════════════════════════════
   SECTION HEADERS
══════════════════════════════════════════════════════════════ */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.sh-title {
  font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.2px;
}
.sh-link {
  font-size: 12px; color: var(--gold); font-weight: 600; cursor: pointer;
  transition: color var(--t);
}
.sh-link:hover { color: var(--gold2); }

/* ══════════════════════════════════════════════════════════════
   GAMES GRID
══════════════════════════════════════════════════════════════ */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.game-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden; cursor: pointer;
  transition: transform .18s ease, border-color .15s, box-shadow .18s;
  position: relative;
}
.game-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(244,185,66,.2);
}
.game-card-img {
  width: 100%; aspect-ratio: 4/3;
  background: var(--bg4);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; overflow: hidden;
}
.game-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-card-body { padding: 9px 10px; }
.game-card-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.game-card-provider { font-size: 10px; color: var(--text3); margin-top: 2px; }
.game-card-badge {
  position: absolute; top: 7px; left: 7px;
  background: var(--gold); color: #000;
  font-size: 8px; font-weight: 800; padding: 2px 6px;
  border-radius: 99px; text-transform: uppercase; letter-spacing: .06em;
}
.game-card-badge.hot  { background: var(--red);   color: #fff; }
.game-card-badge.new  { background: var(--accent); color: #fff; }
.game-card-badge.live {
  background: var(--live); color: #fff;
  display: flex; align-items: center; gap: 3px;
}
.game-card-badge.live::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: #fff; animation: blink 1.2s infinite;
}
.game-card-play-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.7); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
  border-radius: var(--r-md);
}
.game-card:hover .game-card-play-overlay { opacity: 1; }
.game-card-play-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; border: none;
  box-shadow: 0 4px 16px var(--gold-glow);
  transform: scale(.85); transition: transform .15s;
}
.game-card:hover .game-card-play-btn { transform: scale(1); }

/* ══════════════════════════════════════════════════════════════
   LIVE GRID
══════════════════════════════════════════════════════════════ */
.live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.live-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden; cursor: pointer;
  transition: transform .18s, border-color .15s, box-shadow .18s;
}
.live-card:hover {
  transform: translateY(-3px);
  border-color: var(--red2);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.live-card-img {
  width: 100%; aspect-ratio: 16/9;
  background: var(--bg4);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; position: relative;
}
.live-card-img img { width: 100%; height: 100%; object-fit: cover; }
.live-badge-pill {
  position: absolute; top: 7px; left: 7px;
  background: var(--live); color: #fff;
  font-size: 9px; font-weight: 800; padding: 2px 7px;
  border-radius: 99px; text-transform: uppercase;
  display: flex; align-items: center; gap: 4px;
}
.live-badge-pill::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: #fff; animation: blink 1.2s infinite;
}
.live-players-badge {
  position: absolute; top: 7px; right: 7px;
  background: rgba(0,0,0,.6); color: rgba(255,255,255,.8);
  font-size: 9px; font-weight: 600; padding: 2px 7px;
  border-radius: 99px; backdrop-filter: blur(4px);
}
.live-card-body  { padding: 10px 12px; }
.live-card-name  { font-size: 13px; font-weight: 700; color: var(--text); }
.live-card-provider { font-size: 11px; color: var(--text3); margin-top: 2px; }
.live-card-limits   { font-size: 10px; color: var(--text4); margin-top: 5px; font-family: var(--mono); }

/* ══════════════════════════════════════════════════════════════
   CATEGORY CHIPS
══════════════════════════════════════════════════════════════ */
.cat-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.cat-chip {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 99px;
  font-size: 12px; font-weight: 600; color: var(--text2);
  background: var(--bg3); border: 1px solid var(--border);
  cursor: pointer; transition: all var(--t);
}
.cat-chip:hover { background: var(--bg4); color: var(--text); border-color: var(--border2); }
.cat-chip.active { background: var(--gold-lt); color: var(--gold); border-color: rgba(244,185,66,.3); }

/* ══════════════════════════════════════════════════════════════
   PROMOS
══════════════════════════════════════════════════════════════ */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 14px; }
.promo-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color .15s, transform .18s;
}
.promo-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.promo-img {
  width: 100%; height: 140px;
  background: linear-gradient(135deg, var(--bg4), var(--bg5));
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; position: relative;
}
.promo-body { padding: 14px 16px; }
.promo-badge {
  display: inline-flex; padding: 2px 8px; border-radius: 99px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  background: var(--gold-lt); color: var(--gold);
  border: 1px solid rgba(244,185,66,.25);
  margin-bottom: 7px;
}
.promo-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.promo-desc  { font-size: 12px; color: var(--text3); line-height: 1.5; }
.promo-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-top: 1px solid var(--border);
}
.promo-terms { font-size: 10px; color: var(--text4); }

/* ══════════════════════════════════════════════════════════════
   SPORTS / MATCHES
══════════════════════════════════════════════════════════════ */
.sports-wrap { max-width: 860px; }
.sports-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.sport-tab {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 99px;
  font-size: 12px; font-weight: 600; color: var(--text2);
  background: var(--bg3); border: 1px solid var(--border);
  cursor: pointer; transition: all var(--t);
}
.sport-tab:hover { background: var(--bg4); color: var(--text); }
.sport-tab.active { background: var(--gold-lt); color: var(--gold); border-color: rgba(244,185,66,.3); }

.match-group { margin-bottom: 18px; }
.match-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--bg2); border: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--text2);
  margin-bottom: 6px;
}
.match-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r-sm); margin-bottom: 4px;
  overflow: hidden; transition: border-color var(--t);
}
.match-card:hover { border-color: var(--border2); }
.match-row {
  display: flex; align-items: center;
  padding: 10px 12px; gap: 10px;
}
.match-teams { flex: 1; min-width: 0; }
.match-time  { font-size: 10px; color: var(--text4); font-family: var(--mono); margin-bottom: 2px; }
.match-team  { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 2px; }
.match-live-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 800; color: var(--live);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px;
}
.match-live-badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--live); animation: blink 1.2s infinite;
}
.match-odds { display: flex; gap: 4px; flex-shrink: 0; }
.match-odd  {
  display: flex; flex-direction: column; align-items: center;
  min-width: 52px; padding: 5px 6px;
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer; transition: all var(--t);
}
.match-odd:hover   { background: var(--gold-lt); border-color: var(--gold); }
.match-odd.active  { background: var(--gold); border-color: var(--gold); }
.match-odd.active .mo-label { color: rgba(0,0,0,.6); }
.match-odd.active .mo-val   { color: #000; }
.mo-label { font-size: 9px; color: var(--text3); text-transform: uppercase; font-weight: 600; }
.mo-val   { font-size: 13px; font-weight: 800; color: var(--gold); font-family: var(--mono); }
.match-odd.active .mo-val { color: #000; }

/* ══════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════ */
.btn-outline {
  padding: 7px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--border2);
  background: transparent; color: var(--text2);
  font-size: 13px; font-weight: 600;
  transition: all var(--t); cursor: pointer;
}
.btn-outline:hover { background: var(--bg3); color: var(--text); border-color: var(--border3); }

.btn-primary {
  padding: 7px 16px; border-radius: var(--r-sm);
  border: none;
  background: var(--gold); color: #000;
  font-size: 13px; font-weight: 700;
  transition: all var(--t); cursor: pointer;
  box-shadow: 0 2px 8px var(--gold-glow);
}
.btn-primary:hover { background: var(--gold2); transform: translateY(-1px); }

.btn-green {
  padding: 9px 20px; border-radius: var(--r-sm);
  border: none; background: var(--green); color: #fff;
  font-size: 13px; font-weight: 700;
  transition: all var(--t); cursor: pointer;
}
.btn-green:hover { background: #0ea272; transform: translateY(-1px); }

.btn-green.full { width: 100%; text-align: center; }

/* ══════════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════════ */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.75); backdrop-filter: blur(5px);
  z-index: 900; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--r-xl); width: 100%; max-width: 400px;
  box-shadow: var(--sh-lg);
  animation: modalIn .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
  font-size: 15px; font-weight: 700; color: var(--text);
}
.modal-close {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: transparent;
  color: var(--text3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t); font-size: 13px;
}
.modal-close:hover { background: var(--bg3); color: var(--text); }

.modal-body { padding: 20px; }
.modal-foot {
  padding: 12px 20px; border-top: 1px solid var(--border);
  text-align: center; font-size: 12px; color: var(--text3);
}
.modal-foot a { color: var(--gold); cursor: pointer; font-weight: 600; }
.modal-foot a:hover { color: var(--gold2); }

/* Forms inside modals */
.form-group  { margin-bottom: 14px; }
.form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text2); margin-bottom: 5px;
}
.form-group input, .form-group select {
  width: 100%;
  background: var(--bg3); border: 1.5px solid var(--border2);
  color: var(--text); border-radius: var(--r-sm);
  padding: 9px 12px; font-size: 13px; font-family: var(--font);
  outline: none; transition: border-color var(--t), box-shadow var(--t);
}
.form-group input::placeholder { color: var(--text4); }
.form-group input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-lt);
}

/* ══════════════════════════════════════════════════════════════
   USER MENU (logged-in nav)
══════════════════════════════════════════════════════════════ */
.user-menu {
  position: relative; display: flex; align-items: center; gap: 8px;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold-lt); border: 2px solid rgba(244,185,66,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--gold);
  cursor: pointer; transition: border-color var(--t);
}
.user-avatar:hover { border-color: var(--gold); }

/* ══════════════════════════════════════════════════════════════
   TOAST / NOTIFICATION
══════════════════════════════════════════════════════════════ */
#casino-toast {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 9999; border-radius: var(--r-md);
  padding: 12px 18px; font-size: 13px; font-weight: 600;
  box-shadow: var(--sh-lg); max-width: 300px;
  font-family: var(--font);
}

/* ══════════════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════════════ */
.page-btn {
  padding: 6px 12px; border-radius: var(--r-sm);
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text2); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all var(--t);
}
.page-btn:hover   { background: var(--bg4); color: var(--text); }
.page-btn.active  { background: var(--gold-lt); color: var(--gold); border-color: rgba(244,185,66,.3); }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--bg1); border-top: 1px solid var(--border);
  padding: 20px 24px; text-align: center;
  font-size: 12px; color: var(--text3); line-height: 1.7;
}
.site-footer a { color: var(--text3); margin: 0 8px; cursor: pointer; transition: color var(--t); }
.site-footer a:hover { color: var(--gold); }

/* ══════════════════════════════════════════════════════════════
   MISC UTILITIES
══════════════════════════════════════════════════════════════ */
.mono  { font-family: var(--mono); }
.text-gold { color: var(--gold); }
.text-green { color: var(--green2); }
.text-red   { color: var(--red2); }
.text-muted { color: var(--text3); }

/* Responsive */
@media (max-width: 1100px) {
  .betslip-col { display: none; }
}
@media (max-width: 900px) {
  .hpc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sidebar { display: none; }
  :root { --sub-h: 0px; }
  .subnav { display: none; }
  .hpc-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .main { padding: 12px; }
  .hp-slide-score-box { display: none; }
  .hp-slide-title { font-size: 22px; }
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
}
@media (max-width: 480px) {
  .hpc-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-slide-content { padding: 20px; }
  .hp-slide-title { font-size: 19px; }
}

/* Legacy compat (keeps existing JS working) */
.bg2  { background: var(--bg2); }
.bg3  { background: var(--bg3); }
.radius { border-radius: var(--r); }
.radius { border-radius: var(--r); }
select#casino-provider-select,
input#casino-search {
  background: var(--bg3) !important;
  border: 1px solid var(--border2) !important;
  color: var(--text) !important;
  border-radius: var(--r-sm) !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  font-family: var(--font) !important;
  outline: none !important;
  transition: border-color var(--t) !important;
}
select#casino-provider-select:focus,
input#casino-search:focus {
  border-color: var(--gold) !important;
}

/* ══════════════════════════════════════════════════════════════
   PROVIDER VIEW — Casino & Live Casino pages (matches screenshot)
══════════════════════════════════════════════════════════════ */

/* ── Banner ─────────────────────────────────────────────────── */
.pv-banner {
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  position: relative;
}
.pv-banner-slide {
  min-height: 160px;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 24px 28px;
}
.pv-banner-shapes { position: absolute; inset: 0; pointer-events: none; }
.pv-shape {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.pv-shape-1 { width: 260px; height: 260px; top: -80px; right: -40px; }
.pv-shape-2 { width: 160px; height: 160px; bottom: -60px; right: 100px; background: rgba(255,255,255,.04); }
.pv-banner-content { position: relative; z-index: 2; }
.pv-banner-label {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.55);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px;
}
.pv-banner-title {
  font-size: 24px; font-weight: 800; color: #fff;
  letter-spacing: -.4px; margin-bottom: 5px;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.pv-banner-sub { font-size: 12px; color: rgba(255,255,255,.5); }
.pv-banner-dots {
  position: absolute; bottom: 12px; left: 28px;
  display: flex; gap: 5px;
}
.pv-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.3); cursor: pointer;
}
.pv-dot.active { background: var(--gold); width: 16px; border-radius: 99px; }

/* ── Search bar ─────────────────────────────────────────────── */
.pv-search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 14px;
  flex-wrap: wrap;
}
.pv-type-chips {
  display: flex; gap: 6px; flex-wrap: wrap; flex: 1;
}
/* override chip style for type chips */
.pv-type-chips .chip,
.pv-type-chips .cat-chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 99px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--border2);
  background: var(--bg3); color: var(--text2);
  transition: all var(--t); white-space: nowrap;
}
.pv-type-chips .chip:hover,
.pv-type-chips .cat-chip:hover   { background: var(--bg4); color: var(--text); }
.pv-type-chips .chip.active,
.pv-type-chips .cat-chip.active  {
  background: var(--gold); color: #000;
  border-color: var(--gold); font-weight: 800;
  box-shadow: 0 2px 8px var(--gold-glow);
}

.pv-search-wrap {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.pv-search-input-wrap {
  position: relative; display: flex; align-items: center;
}
.pv-search-icon {
  position: absolute; left: 10px;
  width: 14px; height: 14px; color: var(--text3);
  pointer-events: none;
}
.pv-search-input {
  background: var(--bg2);
  border: 1.5px solid var(--border2);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 9px 12px 9px 32px;
  font-size: 13px; font-family: var(--font);
  outline: none; width: 220px;
  transition: border-color var(--t), box-shadow var(--t);
}
.pv-search-input::placeholder { color: var(--text4); }
.pv-search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-lt);
}
.pv-search-btn {
  padding: 9px 18px;
  background: var(--gold); color: #000;
  border: none; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 800;
  letter-spacing: .04em; cursor: pointer;
  white-space: nowrap;
  transition: all var(--t);
  box-shadow: 0 2px 8px var(--gold-glow);
}
.pv-search-btn:hover { background: var(--gold2); transform: translateY(-1px); }

/* ── Provider logo chips ─────────────────────────────────────── */
.pv-provider-chips {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.pv-pchip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 14px; border-radius: var(--r-sm);
  background: var(--bg2); border: 1px solid var(--border2);
  cursor: pointer; transition: all var(--t);
  min-width: 80px; height: 36px;
}
.pv-pchip:hover  { background: var(--bg3); border-color: var(--border3); }
.pv-pchip.active { background: var(--gold-lt); border-color: rgba(244,185,66,.35); }
.pv-pchip-label {
  font-size: 12px; font-weight: 700; color: var(--text2);
  white-space: nowrap; transition: color var(--t);
}
.pv-pchip.active .pv-pchip-label { color: var(--gold); }
.pv-pchip-img {
  max-height: 20px; max-width: 80px;
  object-fit: contain; filter: brightness(.6) saturate(.5);
  transition: filter var(--t);
}
.pv-pchip:hover  .pv-pchip-img { filter: brightness(.9) saturate(.8); }
.pv-pchip.active .pv-pchip-img { filter: brightness(1.1) saturate(1); }

/* ── Provider section rows ───────────────────────────────────── */
.pv-section { margin-bottom: 28px; }

.pv-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 12px;
}
.pv-section-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pv-section-letter {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--bg3); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--text2);
  flex-shrink: 0;
}
.pv-section-name {
  font-size: 20px; font-weight: 800; color: var(--text);
  letter-spacing: -.3px; white-space: nowrap;
}
.pv-section-divider {
  flex: 1; height: 1px; background: var(--border); min-width: 20px;
}
.pv-section-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pv-tous-btn {
  font-size: 12px; font-weight: 600; color: var(--text2);
  background: transparent; border: none; cursor: pointer;
  transition: color var(--t); padding: 2px 6px;
  white-space: nowrap;
}
.pv-tous-btn:hover { color: var(--gold); }
.pv-nav-btn {
  width: 26px; height: 26px; border-radius: var(--r-xs);
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text2); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--t); flex-shrink: 0;
}
.pv-nav-btn:hover { background: var(--bg4); color: var(--text); border-color: var(--border3); }

/* ── Horizontal game scroll row ──────────────────────────────── */
.pv-row-wrap { position: relative; }
.pv-games-row {
  display: flex; gap: 10px;
  overflow-x: auto; scroll-behavior: smooth;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pv-games-row::-webkit-scrollbar { height: 0; }

/* Game cards in horizontal rows — taller aspect ratio like screenshot */
.pv-games-row .game-card {
  flex: 0 0 112px; width: 112px;
  border-radius: var(--r-md);
}
.pv-games-row .game-card .game-thumb-wrap {
  height: 150px !important;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.pv-games-row .game-card .game-info {
  padding: 7px 8px 8px;
}
.pv-games-row .game-card .game-name { font-size: 11px; }
.pv-games-row .game-card .game-prov { font-size: 10px; }

/* Skeleton rows */
.pv-skeleton-card {
  flex: 0 0 112px; width: 112px; height: 185px;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%);
  background-size: 200% 100%;
  animation: pv-shimmer 1.5s infinite;
}
@keyframes pv-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Scroll fade edges */
.pv-row-wrap::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 6px;
  width: 40px; pointer-events: none;
  background: linear-gradient(to left, var(--bg), transparent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* ── Search results grid (full width when searching) ─────────── */
.pv-search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

/* ── Empty / loading state ───────────────────────────────────── */
.pv-empty {
  text-align: center; padding: 48px 24px;
  color: var(--text3);
}
.pv-empty-icon  { font-size: 36px; opacity: .4; margin-bottom: 10px; }
.pv-empty-title { font-size: 14px; font-weight: 600; color: var(--text2); }

@media (max-width: 600px) {
  .pv-search-bar { flex-direction: column; align-items: flex-start; }
  .pv-search-wrap { width: 100%; }
  .pv-search-input { width: 100%; }
  .pv-section-name { font-size: 16px; }
  .pv-games-row .game-card { flex: 0 0 95px; width: 95px; }
  .pv-games-row .game-card .game-thumb-wrap { height: 130px !important; }
}

/* ══════════════════════════════════════════════════════════════
   GAME CARD — gc (portrait, used in all game grids)
══════════════════════════════════════════════════════════════ */
.gc {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s ease, border-color .15s, box-shadow .18s;
  position: relative;
  flex-shrink: 0;
}
.gc:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(244,185,66,.2);
}
/* Row variant — fixed width for horizontal scroll */
.gc--row { width: 120px; flex: 0 0 120px; }

/* Thumbnail */
.gc-thumb {
  position: relative;
  width: 100%; aspect-ratio: 3/4;
  background: var(--bg4);
  overflow: hidden;
}
.gc--row .gc-thumb { aspect-ratio: 3/4; }

.gc-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .3s ease;
}
.gc:hover .gc-thumb img { transform: scale(1.06); }

.gc-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 800; color: var(--gold);
  background: linear-gradient(135deg, var(--bg3), var(--bg4));
}

/* Badges */
.gc-badge {
  position: absolute; top: 7px; left: 7px;
  font-size: 8px; font-weight: 800;
  padding: 2px 6px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: .06em;
  z-index: 3;
}
.gc-badge--hot  { background: var(--red);   color: #fff; }
.gc-badge--new  { background: var(--accent); color: #fff; }
.gc-badge--demo {
  top: auto; bottom: 7px; left: auto; right: 7px;
  background: var(--green-lt); color: var(--green2);
  border: 1px solid rgba(16,185,129,.3);
}

/* Hover overlay */
.gc-overlay {
  position: absolute; inset: 0; z-index: 4;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  opacity: 0; transition: opacity .15s ease;
}
.gc:hover .gc-overlay { opacity: 1; }

.gc-play-btn {
  padding: 7px 20px; border-radius: 99px;
  background: var(--gold); color: #000;
  border: none; font-size: 12px; font-weight: 800;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 14px var(--gold-glow);
  transform: translateY(4px);
  transition: transform .15s ease, box-shadow .15s;
}
.gc:hover .gc-play-btn { transform: translateY(0); }
.gc-play-btn:hover { box-shadow: 0 6px 20px var(--gold-glow); }

.gc-demo-btn {
  padding: 5px 14px; border-radius: 99px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background .12s;
}
.gc-demo-btn:hover { background: rgba(255,255,255,.2); }

/* Info section */
.gc-info {
  padding: 8px 10px 10px;
}
.gc-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 3px;
}
.gc-prov {
  font-size: 10px; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gc-rtp {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text3); margin-top: 4px;
}

/* ── Skeleton ────────────────────────────────────────────── */
.gc-skel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  flex-shrink: 0;
}
.gc-skel--row { width: 120px; flex: 0 0 120px; }
.gc-skel-thumb {
  width: 100%; aspect-ratio: 3/4;
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%);
  background-size: 200% 100%;
  animation: gc-shimmer 1.5s infinite;
}
.gc-skel-body { padding: 8px 10px; }
.gc-skel-line {
  height: 10px; border-radius: 4px;
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: gc-shimmer 1.5s infinite;
  margin-bottom: 6px;
}
.gc-skel-line--short { width: 60%; margin-bottom: 0; }
@keyframes gc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Error ─────────────────────────────────────────────── */
.gc-error {
  color: var(--red2); font-size: 13px;
  padding: 20px; grid-column: 1/-1;
}

/* ══════════════════════════════════════════════════════════════
   LIVE CARD — lc
══════════════════════════════════════════════════════════════ */
.lc {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden; cursor: pointer;
  transition: transform .18s, border-color .15s, box-shadow .18s;
  position: relative; flex-shrink: 0;
}
.lc:hover {
  transform: translateY(-3px);
  border-color: var(--red2);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
/* Row variant */
.pv-games-row .lc { width: 180px; flex: 0 0 180px; }

.lc-thumb {
  position: relative;
  width: 100%; aspect-ratio: 16/9;
  background: var(--bg4); overflow: hidden;
}
.pv-games-row .lc .lc-thumb { aspect-ratio: 16/9; }
.lc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lc-live-badge {
  position: absolute; top: 7px; left: 7px;
  background: var(--live); color: #fff;
  font-size: 9px; font-weight: 800;
  padding: 2px 8px; border-radius: 99px;
  display: flex; align-items: center; gap: 4px;
  text-transform: uppercase; z-index: 3;
}
.lc-live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #fff; animation: blink 1.2s infinite;
}
.lc-players {
  position: absolute; top: 7px; right: 7px;
  background: rgba(0,0,0,.6);
  color: rgba(255,255,255,.8);
  font-size: 9px; font-weight: 600;
  padding: 2px 7px; border-radius: 99px;
  backdrop-filter: blur(4px);
}
.lc-overlay {
  position: absolute; inset: 0; z-index: 4;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.lc:hover .lc-overlay { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   FLAT GRID (search results & filtered by provider)
══════════════════════════════════════════════════════════════ */
.pv-flat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* Pagination */
.pv-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 20px; flex-wrap: wrap;
}
.pv-page-btn {
  padding: 7px 18px; border-radius: var(--r-sm);
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text2); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all var(--t);
}
.pv-page-btn:hover:not(:disabled) { background: var(--bg4); color: var(--text); }
.pv-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.pv-page-info { font-size: 12px; color: var(--text3); }

/* ══════════════════════════════════════════════════════════════
   HOME page game grid
══════════════════════════════════════════════════════════════ */
#home-slots, #home-live {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

/* ══════════════════════════════════════════════════════════════
   LIVE GRID (home page)
══════════════════════════════════════════════════════════════ */
#home-live {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Override old pv-games-row game-card sizing to use gc--row */
.pv-games-row .gc { width: 120px; flex: 0 0 120px; }
.pv-games-row .gc .gc-thumb { aspect-ratio: 3/4; }
.pv-games-row .lc { width: 180px; flex: 0 0 180px; }
.pv-games-row .lc .lc-thumb { aspect-ratio: 16/9; }

/* Remove conflicting old skeleton card */
.pv-skeleton-card { display: none !important; }

@media (max-width: 600px) {
  .pv-flat-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  #home-slots { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  #home-live  { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .pv-games-row .gc { width: 100px; flex: 0 0 100px; }
  .pv-games-row .lc { width: 150px; flex: 0 0 150px; }
}

/* ══════════════════════════════════════════════════════════════
   PROVIDERS BAR (homepage logo strip)
══════════════════════════════════════════════════════════════ */
.providers-bar {
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 20px 24px;
  margin: 24px 0;
}
.providers-bar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 14px;
}
.providers-bar-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
.pb-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
  min-width: 80px;
}
.pb-logo:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-1px);
}
.pb-logo img {
  height: 18px;
  max-width: 90px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .65;
  transition: opacity .15s;
}
.pb-logo:hover img { opacity: 1; }
.pb-text {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}

/* ── Provider chip logos ── */
.pv-pchip { 
  display: flex; 
  align-items: center; 
  gap: 6px; 
}
.pv-pchip-logo {
  height: 14px;
  max-width: 56px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .7;
}
.pv-pchip.active .pv-pchip-logo { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   CASINO LAYOUT — sidebar + content
══════════════════════════════════════════════════════════════ */
.casino-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  min-height: 600px;
}
.casino-content {
  flex: 1;
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════════
   PROVIDERS SIDEBAR
══════════════════════════════════════════════════════════════ */
.providers-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #111827;
  border: 1px solid rgba(251,191,36,.12);
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: 70px;
  max-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px rgba(251,191,36,.06), 0 4px 24px rgba(0,0,0,.4);
  transition: box-shadow .3s;
}
.providers-sidebar:hover {
  box-shadow: 0 0 0 1px rgba(251,191,36,.18), 0 4px 32px rgba(251,191,36,.07);
}

/* Header */
.psb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  background: linear-gradient(135deg, #1a2234 0%, #111827 100%);
  border-bottom: 1px solid rgba(251,191,36,.12);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.psb-header:hover { background: #1e2a3d; }
.psb-header-left { display: flex; align-items: center; gap: 8px; }
.psb-icon { width: 16px; height: 16px; color: #fbbf24; }
.psb-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fbbf24;
}
.psb-arrow {
  width: 12px; height: 12px;
  color: rgba(251,191,36,.5);
  transition: transform .25s ease;
}
.psb-arrow.collapsed { transform: rotate(-90deg); }

/* Body */
.psb-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  transition: max-height .3s ease;
}
.psb-body.collapsed { max-height: 0 !important; }

/* ALL row */
.psb-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .15s;
  flex-shrink: 0;
}
.psb-all:hover { background: rgba(251,191,36,.07); }
.psb-all.active { background: rgba(251,191,36,.1); }
.psb-all-left {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.psb-all.active .psb-all-left { color: #fbbf24; }
.psb-all-count {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  padding: 2px 7px;
  border-radius: 10px;
}
.psb-all.active .psb-all-count {
  color: #fbbf24;
  background: rgba(251,191,36,.15);
}

/* Search */
.psb-search-wrap {
  position: relative;
  padding: 10px 10px 6px;
  flex-shrink: 0;
}
.psb-search {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  padding: 7px 10px 7px 30px;
  font-size: 12px;
  color: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s;
}
.psb-search::placeholder { color: rgba(255,255,255,.25); }
.psb-search:focus { border-color: rgba(251,191,36,.4); }

/* Scrollable list */
.psb-list {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(251,191,36,.2) transparent;
}
.psb-list::-webkit-scrollbar { width: 4px; }
.psb-list::-webkit-scrollbar-track { background: transparent; }
.psb-list::-webkit-scrollbar-thumb {
  background: rgba(251,191,36,.2);
  border-radius: 4px;
}
.psb-list::-webkit-scrollbar-thumb:hover { background: rgba(251,191,36,.4); }

/* Provider item */
.psb-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s, border-left-color .15s;
  border-left: 2px solid transparent;
  position: relative;
}
.psb-item:hover {
  background: rgba(251,191,36,.06);
  border-left-color: rgba(251,191,36,.3);
}
.psb-item.active {
  background: rgba(251,191,36,.1);
  border-left-color: #fbbf24;
}

/* Logo container */
.psb-logo-wrap {
  width: 44px;
  height: 28px;
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background .15s, border-color .15s;
}
.psb-item:hover .psb-logo-wrap,
.psb-item.active .psb-logo-wrap {
  background: rgba(251,191,36,.1);
  border-color: rgba(251,191,36,.25);
}
.psb-logo-wrap img {
  width: 36px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .55;
  transition: opacity .15s;
}
.psb-item:hover .psb-logo-wrap img,
.psb-item.active .psb-logo-wrap img { opacity: .9; }
.psb-logo-fallback {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  text-align: center;
  line-height: 1.2;
  padding: 2px;
}

/* Skeleton loading */
.psb-skel {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.04);
}
.psb-skel-logo {
  width: 44px; height: 28px; flex-shrink: 0;
  background: rgba(255,255,255,.06);
  border-radius: 6px;
  animation: psb-pulse 1.4s ease-in-out infinite;
}
.psb-skel-text {
  flex: 1; height: 10px;
  background: rgba(255,255,255,.06);
  border-radius: 4px;
  animation: psb-pulse 1.4s ease-in-out infinite;
}
.psb-skel-text:nth-child(3) { width: 40%; height: 8px; }
@keyframes psb-pulse {
  0%,100% { opacity: .4; }
  50%      { opacity: .8; }
}

/* Provider info */
.psb-info { flex: 1; min-width: 0; }
.psb-name {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  transition: color .15s;
}
.psb-item:hover .psb-name,
.psb-item.active .psb-name { color: #fff; }
.psb-count {
  font-size: 10px;
  color: rgba(255,255,255,.3);
  margin-top: 1px;
}
.psb-item.active .psb-count { color: rgba(251,191,36,.6); }

/* Checkbox */
.psb-check {
  width: 16px; height: 16px;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, transform .15s;
}
.psb-item.active .psb-check {
  background: #fbbf24;
  border-color: #fbbf24;
  transform: scale(1.1);
}
.psb-check-tick {
  width: 8px; height: 8px;
  display: none;
}
.psb-item.active .psb-check-tick { display: block; }

/* HOT badge */
.psb-hot {
  position: absolute;
  top: 4px; right: 28px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: #fff;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 14px;
}

/* Mobile */
@media (max-width: 768px) {
  .casino-layout { flex-direction: column; }
  .providers-sidebar {
    width: 100%;
    position: static;
    max-height: none;
  }
  .psb-body { max-height: none; }
  .psb-list { max-height: 200px; }
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT MODES — casino vs sports
══════════════════════════════════════════════════════════════ */

/* Default layout (sports): sidebar + main + betslip */
.layout {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  gap: 0;
  min-height: calc(100vh - 56px);
  align-items: flex-start;
}

/* Casino layout: no sports sidebar, no betslip → full width content */
.layout--casino {
  grid-template-columns: 1fr !important;
}
.layout--casino .sidebar,
.layout--casino .betslip-col { display: none !important; }

/* Sports layout: full 3-col */
.layout--sports {
  grid-template-columns: 220px 1fr 280px !important;
}

/* Casino main content padding */
.layout--casino .main {
  padding: 0;
  max-width: 100%;
}

/* Make casino-layout use available width */
.layout--casino .casino-layout {
  padding: 16px 20px 24px;
  gap: 18px;
}

/* Providers sidebar in casino mode: narrower, more room for games */
.layout--casino .providers-sidebar {
  width: 200px;
}

/* Expand game grid in casino mode */
.layout--casino .casino-content {
  flex: 1;
  min-width: 0;
}

/* Game cards — bigger in casino-only mode */
.layout--casino .pv-game-card,
.layout--casino .game-card {
  min-width: 160px;
}

@media (max-width: 1024px) {
  .layout--casino .providers-sidebar { width: 180px; }
}
@media (max-width: 768px) {
  .layout { grid-template-columns: 1fr !important; }
  .layout .sidebar,
  .layout .betslip-col { display: none !important; }
  .layout--sports .sidebar { display: flex !important; }
}

/* ══════════════════════════════════════════════════════════════
   LIVE CASINO HERO
══════════════════════════════════════════════════════════════ */
.live-hero {
  margin-bottom: 20px;
}
.live-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.3);
  color: #f87171;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.live-dot-pulse {
  display: inline-block;
  width: 7px; height: 7px;
  background: #ef4444;
  border-radius: 50%;
  animation: livepulse 1.4s ease-in-out infinite;
}
@keyframes livepulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(1.3); }
}
.live-hero-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 900px) { .live-hero-cards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px) { .live-hero-cards { grid-template-columns: 1fr 1fr; } }

.live-hero-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16/9;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .2s, box-shadow .2s;
}
.live-hero-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(251,191,36,.18);
  border-color: rgba(251,191,36,.3);
}
.live-hero-card-bg {
  position: absolute; inset: 0;
}
.live-hero-card-body {
  position: relative; z-index: 1;
  padding: 14px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.live-hero-card-icon {
  font-size: 28px;
  position: absolute;
  top: 10px; right: 12px;
  opacity: .6;
}
.live-hero-card-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
  line-height: 1.3;
}
.live-hero-card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255,255,255,.6);
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════
   CX LAYOUT — Premium Casino Layout System
══════════════════════════════════════════════════════════════ */
.cx-layout {
  display: flex;
  gap: 14px;
  padding: 16px 18px 32px;
  align-items: flex-start;
  min-height: calc(100vh - var(--nav-h) - 40px);
}

/* ── Sidebar ── */
.cx-sidebar {
  width: 194px;
  flex-shrink: 0;
  background: var(--bg2);
  border: 1px solid rgba(244,185,66,.1);
  border-radius: var(--r-md);
  overflow: hidden;
  position: sticky;
  top: calc(var(--nav-h) + 12px);
  max-height: calc(100vh - var(--nav-h) - 28px);
  display: flex;
  flex-direction: column;
  transition: border-color .2s, box-shadow .2s;
}
.cx-sidebar:hover {
  border-color: rgba(244,185,66,.2);
  box-shadow: 0 0 0 1px rgba(244,185,66,.06), 0 8px 32px rgba(0,0,0,.5);
}
.cx-sb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 13px;
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%);
  border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none; flex-shrink: 0;
}
.cx-sb-head:hover { background: var(--bg3); }
.cx-sb-head-l { display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold); }
.cx-sb-arrow { width: 11px; height: 11px; color: rgba(244,185,66,.45);
  transition: transform .22s ease; }
.cx-sb-arrow.open { transform: rotate(180deg); }
.cx-sb-body { display: flex; flex-direction: column; flex: 1; overflow: hidden;
  transition: max-height .28s ease; }
.cx-sb-body.closed { max-height: 0 !important; }

/* ALL row */
.cx-sb-all {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 13px; cursor: pointer; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  transition: background .15s, color .15s;
}
.cx-sb-all:hover { background: rgba(244,185,66,.06); color: rgba(255,255,255,.8); }
.cx-sb-all--active { color: var(--gold); background: rgba(244,185,66,.08); }
.cx-sb-cnt {
  font-size: 10px; font-weight: 600; padding: 2px 6px;
  background: rgba(255,255,255,.06); border-radius: 9px;
  color: rgba(255,255,255,.3);
}
.cx-sb-all--active .cx-sb-cnt { color: var(--gold); background: rgba(244,185,66,.15); }

/* Search */
.cx-sb-search-wrap { position: relative; padding: 8px 9px 5px; flex-shrink: 0; }
.cx-sb-search {
  width: 100%; background: rgba(255,255,255,.04);
  border: 1px solid var(--border2); border-radius: 7px;
  padding: 6px 9px 6px 27px; font-size: 11.5px; color: var(--text);
  outline: none; box-sizing: border-box; transition: border-color .18s;
}
.cx-sb-search::placeholder { color: var(--text4); }
.cx-sb-search:focus { border-color: rgba(244,185,66,.35); }

/* Provider list */
.cx-sb-list {
  overflow-y: auto; flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(244,185,66,.15) transparent;
}
.cx-sb-list::-webkit-scrollbar { width: 3px; }
.cx-sb-list::-webkit-scrollbar-thumb { background: rgba(244,185,66,.18); border-radius: 3px; }

/* Provider item */
.cx-pv-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; cursor: pointer; position: relative;
  border-bottom: 1px solid rgba(255,255,255,.03);
  border-left: 2px solid transparent;
  transition: background .13s, border-left-color .13s;
}
.cx-pv-item:hover { background: rgba(244,185,66,.05); border-left-color: rgba(244,185,66,.25); }
.cx-pv-item.active { background: rgba(244,185,66,.09); border-left-color: var(--gold); }
.cx-pv-logo {
  width: 40px; height: 25px; flex-shrink: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 5px; display: flex; align-items: center;
  justify-content: center; overflow: hidden;
  transition: background .13s, border-color .13s;
}
.cx-pv-item:hover .cx-pv-logo,
.cx-pv-item.active .cx-pv-logo { background: rgba(244,185,66,.1); border-color: rgba(244,185,66,.22); }
.cx-pv-logo img {
  width: 34px; height: 20px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .5; transition: opacity .13s;
}
.cx-pv-item:hover .cx-pv-logo img,
.cx-pv-item.active .cx-pv-logo img { opacity: .9; }
.cx-pv-fb { font-size: 8px; font-weight: 700; color: rgba(255,255,255,.35); text-align: center; }
.cx-pv-info { flex: 1; min-width: 0; }
.cx-pv-name {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.65);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .13s;
}
.cx-pv-item:hover .cx-pv-name,
.cx-pv-item.active .cx-pv-name { color: var(--text); }
.cx-pv-cnt { font-size: 9.5px; color: var(--text4); margin-top: 1px; }
.cx-pv-check {
  width: 14px; height: 14px; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.15); border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  transition: background .13s, border-color .13s, transform .13s;
}
.cx-pv-item.active .cx-pv-check {
  background: var(--gold); border-color: var(--gold); transform: scale(1.1);
}
.cx-pv-check svg { display: none; }
.cx-pv-item.active .cx-pv-check svg { display: block; }
.cx-pv-hot {
  position: absolute; top: 4px; right: 22px;
  font-size: 7.5px; font-weight: 800; letter-spacing: .05em;
  background: linear-gradient(135deg,#f97316,#ef4444);
  color: #fff; padding: 1px 4px; border-radius: 3px;
}
/* Skeleton */
.cx-pv-skel {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; border-bottom: 1px solid rgba(255,255,255,.03);
}
.cx-pv-skel-logo { width: 40px; height: 25px; flex-shrink: 0;
  background: var(--bg4); border-radius: 5px; animation: cxpulse 1.4s infinite; }
.cx-pv-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cx-pv-skel-line { height: 9px; background: var(--bg4); border-radius: 3px; animation: cxpulse 1.4s infinite; }
.cx-pv-skel-line:last-child { width: 50%; }
@keyframes cxpulse { 0%,100%{opacity:.35} 50%{opacity:.7} }

/* ── Main content ── */
.cx-main { flex: 1; min-width: 0; }

/* Category chips */
.cx-cats {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; padding: 0 0 14px;
}
.cx-cat {
  background: var(--bg2); border: 1px solid var(--border2);
  color: var(--text2); border-radius: 20px;
  padding: 6px 13px; font-size: 12px; font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.cx-cat:hover { background: var(--bg3); color: var(--text); border-color: var(--border3); }
.cx-cat.active {
  background: rgba(244,185,66,.12); border-color: rgba(244,185,66,.35);
  color: var(--gold);
}
.cx-search-inline-wrap { position: relative; margin-left: auto; }
.cx-search-inline {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 20px; padding: 6px 12px 6px 28px;
  font-size: 12px; color: var(--text); outline: none; width: 170px;
  transition: border-color .18s, width .2s;
}
.cx-search-inline::placeholder { color: var(--text4); }
.cx-search-inline:focus { border-color: rgba(244,185,66,.35); width: 210px; }

/* ══════════════════════════════════════════════════════════════
   GAME SECTIONS
══════════════════════════════════════════════════════════════ */
.cx-section { margin-bottom: 28px; }
.cx-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cx-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--text);
}
.cx-section-title span { font-size: 18px; }
.cx-section-more {
  font-size: 11.5px; font-weight: 600; color: var(--gold);
  opacity: .7; cursor: pointer; transition: opacity .15s;
}
.cx-section-more:hover { opacity: 1; }

/* Game grid */
.cx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}
.cx-grid--lg { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.cx-grid--sm { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

/* Game card */
.cx-card {
  position: relative; border-radius: var(--r-md);
  overflow: hidden; cursor: pointer;
  background: var(--bg2);
  border: 1px solid var(--border);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  aspect-ratio: 3/4;
}
.cx-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 0 0 1px rgba(244,185,66,.2);
  border-color: rgba(244,185,66,.25);
  z-index: 2;
}
.cx-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .22s ease;
  background: var(--bg3);
}
.cx-card:hover .cx-card-img { transform: scale(1.06); }
.cx-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.9) 100%);
  opacity: 0; transition: opacity .18s;
  display: flex; flex-direction: column;
  justify-content: flex-end; padding: 10px;
}
.cx-card:hover .cx-card-overlay { opacity: 1; }
.cx-card-play {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.7);
  width: 44px; height: 44px;
  background: rgba(244,185,66,.9);
  border-radius: 50%;
  transition: transform .18s ease, opacity .18s;
  opacity: 0;
}
.cx-card:hover .cx-card-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.cx-card-play svg { width: 18px; height: 18px; color: #000; }
.cx-card-title {
  font-size: 11.5px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-card-provider { font-size: 10px; color: rgba(255,255,255,.5); margin-top: 2px; }
.cx-card-rtp {
  position: absolute; top: 7px; left: 7px;
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  background: rgba(16,185,129,.85); color: #fff;
  padding: 2px 5px; border-radius: 4px;
}
.cx-card-hot {
  position: absolute; top: 7px; right: 7px;
  font-size: 9px; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(135deg,#f97316,#ef4444); color: #fff;
  padding: 2px 5px; border-radius: 4px;
}
.cx-card-new {
  position: absolute; top: 7px; right: 7px;
  font-size: 9px; font-weight: 800;
  background: rgba(99,102,241,.9); color: #fff;
  padding: 2px 5px; border-radius: 4px;
}
/* Skeleton card */
.cx-card-skel {
  aspect-ratio: 3/4; border-radius: var(--r-md);
  background: var(--bg2); border: 1px solid var(--border);
  animation: cxpulse 1.4s infinite;
}

/* ══════════════════════════════════════════════════════════════
   LIVE CASINO
══════════════════════════════════════════════════════════════ */
.cx-live-hero {
  margin-bottom: 22px;
}
.cx-live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(239,68,68,.13); border: 1px solid rgba(239,68,68,.28);
  color: #f87171; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  padding: 4px 10px; border-radius: 20px; margin-bottom: 12px;
}
.cx-live-dot {
  width: 7px; height: 7px; background: var(--live); border-radius: 50%;
  animation: livepulse2 1.4s ease-in-out infinite;
}
@keyframes livepulse2 { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(1.35)} }
.cx-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.cx-live-card {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  cursor: pointer; aspect-ratio: 16/10;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.cx-live-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.65), 0 0 0 1px rgba(244,185,66,.28);
  border-color: rgba(244,185,66,.3);
}
.cx-live-card-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .22s;
}
.cx-live-card:hover .cx-live-card-bg { transform: scale(1.05); }
.cx-live-card-dim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.72) 100%);
}
.cx-live-card-body {
  position: relative; z-index: 1; padding: 12px;
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
}
.cx-live-card-top {
  position: absolute; top: 8px; left: 8px; right: 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.cx-live-tag {
  display: flex; align-items: center; gap: 4px;
  background: rgba(239,68,68,.85); border-radius: 4px;
  font-size: 9px; font-weight: 800; letter-spacing: .08em;
  color: #fff; padding: 2px 6px;
}
.cx-live-players {
  font-size: 10px; color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.45); padding: 2px 7px;
  border-radius: 4px; display: flex; align-items: center; gap: 4px;
}
.cx-live-card-name {
  font-size: 13.5px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.6); line-height: 1.3;
}
.cx-live-card-provider { font-size: 10.5px; color: rgba(255,255,255,.5); margin-top: 3px; }
.cx-live-card-limits {
  font-size: 9.5px; color: var(--gold); margin-top: 5px; font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   FEATURED BANNER (Casino hero strip)
══════════════════════════════════════════════════════════════ */
.cx-featured {
  margin-bottom: 22px;
  border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(135deg, #0f172a 0%, #1a1040 50%, #0f172a 100%);
  border: 1px solid rgba(244,185,66,.12);
  padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: relative;
}
.cx-featured::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(244,185,66,.07) 0%, transparent 60%);
  pointer-events: none;
}
.cx-featured-text { position: relative; z-index: 1; }
.cx-featured-label {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.cx-featured-title {
  font-size: 22px; font-weight: 800; color: var(--text);
  line-height: 1.2; margin-bottom: 8px;
}
.cx-featured-title span { color: var(--gold); }
.cx-featured-sub { font-size: 13px; color: var(--text2); margin-bottom: 16px; }
.cx-featured-btns { display: flex; gap: 8px; }
.cx-featured-btn {
  padding: 9px 20px; border-radius: 8px; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.cx-featured-btn--gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: #000; border: none;
}
.cx-featured-btn--gold:hover { box-shadow: 0 4px 20px rgba(244,185,66,.4); transform: translateY(-1px); }
.cx-featured-btn--ghost {
  background: transparent; color: var(--text2);
  border: 1px solid var(--border2);
}
.cx-featured-btn--ghost:hover { border-color: var(--border3); color: var(--text); }
.cx-featured-icons {
  position: relative; z-index: 1;
  display: flex; gap: 8px; align-items: center; flex-shrink: 0;
}
.cx-featured-icon { font-size: 36px; opacity: .8; animation: float 3s ease-in-out infinite; }
.cx-featured-icon:nth-child(2) { animation-delay: .5s; font-size: 28px; }
.cx-featured-icon:nth-child(3) { animation-delay: 1s; font-size: 32px; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* Stats strip */
.cx-stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 10px; margin-bottom: 22px;
}
.cx-stat {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 12px 14px;
  text-align: center; transition: border-color .15s;
}
.cx-stat:hover { border-color: rgba(244,185,66,.18); }
.cx-stat-val { font-size: 17px; font-weight: 800; color: var(--gold); }
.cx-stat-lbl { font-size: 10.5px; color: var(--text3); margin-top: 2px; }

@media (max-width: 1024px) {
  .cx-layout { padding: 12px 12px 24px; }
  .cx-sidebar { width: 175px; }
  .cx-grid { grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); }
  .cx-live-grid { grid-template-columns: repeat(auto-fill,minmax(175px,1fr)); }
  .cx-stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .cx-layout { flex-direction: column; padding: 10px 10px 20px; }
  .cx-sidebar { width: 100%; position: static; max-height: none; }
  .cx-sb-body { max-height: none; }
  .cx-sb-list { max-height: 200px; }
  .cx-grid { grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); gap: 8px; }
  .cx-live-grid { grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); }
  .cx-featured { flex-direction: column; text-align: center; }
  .cx-featured-btns { justify-content: center; }
  .cx-featured-icons { display: none; }
  .cx-stats { grid-template-columns: repeat(2,1fr); }
}

/* ══════════════════════════════════════════════════════════════
   HERO SLIDER
══════════════════════════════════════════════════════════════ */
.cx-hero-wrap {
  margin-bottom: 16px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.cx-hero-slider {
  position: relative;
  height: 190px;
  overflow: hidden;
  border-radius: 14px;
}
.cx-hero-slides {
  display: flex;
  height: 100%;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.cx-hero-slide {
  min-width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 32px;
}
.cx-hero-slide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.cx-hero-slide-dim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.3) 60%, transparent 100%);
}
.cx-hero-slide-content {
  position: relative; z-index: 1;
  max-width: 340px;
}
.cx-hero-slide-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold);
  background: rgba(244,185,66,.12); border: 1px solid rgba(244,185,66,.25);
  border-radius: 4px; padding: 3px 8px; margin-bottom: 8px;
}
.cx-hero-slide-title {
  font-size: 22px; font-weight: 900; color: #fff;
  line-height: 1.15; margin-bottom: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.cx-hero-slide-title em { color: var(--gold); font-style: normal; }
.cx-hero-slide-sub {
  font-size: 12.5px; color: rgba(255,255,255,.65);
  margin-bottom: 14px; line-height: 1.4;
}
.cx-hero-slide-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark,#e6a800) 100%);
  color: #000; font-size: 12.5px; font-weight: 800;
  padding: 9px 20px; border-radius: 8px; border: none;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.cx-hero-slide-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(244,185,66,.45);
}
/* Slide image area */
.cx-hero-slide-art {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 45%; display: flex; align-items: center; justify-content: flex-end;
  padding-right: 24px; z-index: 1;
}
.cx-hero-slide-art-emoji {
  font-size: 80px;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,.5));
  animation: heroFloat 3s ease-in-out infinite;
}
@keyframes heroFloat { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-10px) rotate(3deg)} }

/* Dots + arrows */
.cx-hero-controls {
  position: absolute; bottom: 10px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  z-index: 10;
}
.cx-hero-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.3); cursor: pointer;
  transition: background .2s, width .2s;
}
.cx-hero-dot.active { background: var(--gold); width: 18px; border-radius: 3px; }
.cx-hero-prev, .cx-hero-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.1);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s; z-index: 10; font-size: 14px;
}
.cx-hero-prev { left: 10px; }
.cx-hero-next { right: 10px; }
.cx-hero-prev:hover, .cx-hero-next:hover { background: rgba(244,185,66,.3); }

/* ══════════════════════════════════════════════════════════════
   TRENDING / WINNERS CAROUSEL
══════════════════════════════════════════════════════════════ */
.cx-trending-wrap { margin-bottom: 18px; }
.cx-trending-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.cx-trending-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: var(--text);
}
.cx-trending-title .cx-t-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); animation: cxpulse 1.4s infinite;
}
.cx-trending-scroll {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: none;
}
.cx-trending-scroll::-webkit-scrollbar { display: none; }
.cx-trending-card {
  flex-shrink: 0;
  width: 110px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden; cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  position: relative;
}
.cx-trending-card:hover {
  transform: translateY(-3px);
  border-color: rgba(244,185,66,.3);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.cx-trending-card-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  background: var(--bg3);
  display: block;
}
.cx-trending-card-body {
  padding: 7px 8px 8px;
}
.cx-trending-card-title {
  font-size: 10.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-trending-card-win {
  font-size: 10px; color: #10b981; font-weight: 700; margin-top: 2px;
}
.cx-trending-card-rank {
  position: absolute; top: 6px; left: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,.7); border: 1px solid rgba(244,185,66,.4);
  font-size: 9px; font-weight: 800; color: var(--gold);
  display: flex; align-items: center; justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   IMPROVED GAME CARDS
══════════════════════════════════════════════════════════════ */
.cx-card {
  background: var(--bg2);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.cx-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.75) 100%);
  pointer-events: none;
  opacity: 1;
}
.cx-card-overlay { z-index: 2; }
.cx-card-play { z-index: 3; }
/* Bottom label always slightly visible */
.cx-card-title {
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}

/* ══════════════════════════════════════════════════════════════
   IMPROVED LIVE CARDS
══════════════════════════════════════════════════════════════ */
.cx-live-card {
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.cx-live-card::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(255,255,255,.04) 0%, transparent 60%);
}
.cx-live-card-body { z-index: 1; }
/* Animated player count */
.cx-live-players-pulse {
  display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: #10b981;
  animation: cxpulse 1.4s infinite;
  margin-right: 3px;
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT SPACING FIXES
══════════════════════════════════════════════════════════════ */
.cx-layout { padding: 14px 16px 28px; }
.cx-main { min-width: 0; }
/* Remove the plain stats strip — replaced by hero slider stats */
.cx-stats { margin-bottom: 16px; }

/* ══════════════════════════════════════════════════════════════
   GOOAL THEME OVERRIDES
   Dark navy starfield · Sports-gold identity · ubett.me style
══════════════════════════════════════════════════════════════ */

/* ── Body: starfield background ── */
body {
  background: #060a12 url('../img/cas-bg.gif') center top / cover fixed;
  min-height: 100vh;
}
.layout { background: transparent; }
.main   { background: transparent; }

/* ── Design token overrides ── */
:root {
  --bg:   #060a12;
  --bg1:  #080d18;
  --bg2:  #0c1220;
  --bg3:  #101828;
  --bg4:  #162035;
  --gold: #f5c400;
  --gold-dark: #c9a000;
}

/* ── NAVBAR ── */
.navbar {
  background: linear-gradient(180deg, #0a0f1e 0%, rgba(8,12,24,.97) 100%);
  border-bottom: 2px solid #f5c400;
  backdrop-filter: blur(10px);
  padding: 0 20px;
  height: 58px;
}
.nav-logo { padding: 0; }
.nav-logo-img {
  height: 38px; width: auto; object-fit: contain;
  display: block;
}
.nav-links .nl {
  color: rgba(255,255,255,.75);
  font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.nav-links .nl:hover  { color: #f5c400; background: rgba(245,196,0,.08); }
.nav-links .nl.active { color: #f5c400; }
.btn-outline-gooal {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.85);
  padding: 7px 18px; border-radius: 6px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-outline-gooal:hover { border-color: #f5c400; color: #f5c400; }
.btn-register-gooal {
  background: #f5c400;
  border: none; color: #000;
  padding: 7px 18px; border-radius: 6px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn-register-gooal:hover { background: #ffd840; transform: translateY(-1px); }

/* ── BANNER (Gooal numbered style) ── */
.gooal-banner-wrap {
  margin-bottom: 14px;
  position: relative;
}
.gooal-banner-slider {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: 200px;
  border: 1px solid rgba(245,196,0,.2);
}
.gooal-slides {
  display: flex; height: 100%;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.gooal-slide {
  min-width: 100%; height: 100%;
  position: relative;
  display: flex; align-items: center;
  padding: 0 28px;
  overflow: hidden;
}
.gooal-slide-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.gooal-slide-dim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.3) 60%, transparent 100%);
}
.gooal-slide-content {
  position: relative; z-index: 2; max-width: 300px;
}
.gooal-slide-label {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #f5c400;
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 6px;
}
.live-dot-g {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444; display: inline-block;
  animation: livepulse2 1.4s infinite;
}
.gooal-slide-title {
  font-size: 26px; font-weight: 900;
  color: #fff; line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  margin-bottom: 6px; text-transform: uppercase;
}
.gooal-slide-title span { color: #f5c400; }
.gooal-slide-sub {
  font-size: 12px; color: rgba(255,255,255,.65);
  margin-bottom: 14px;
}
.gooal-slide-btn {
  background: linear-gradient(135deg, #f5c400 0%, #c9a000 100%);
  color: #000; border: none;
  padding: 8px 20px; border-radius: 6px;
  font-size: 12.5px; font-weight: 800;
  cursor: pointer; text-transform: uppercase;
  letter-spacing: .05em;
  transition: transform .15s, box-shadow .15s;
}
.gooal-slide-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245,196,0,.4);
}
.gooal-slide-art {
  position: absolute; right: 28px; top: 50%;
  transform: translateY(-50%);
  font-size: 90px; z-index: 1; opacity: .7;
  animation: heroFloat 3s ease-in-out infinite;
}
/* Numbered tabs */
.gooal-tabs {
  position: absolute; top: 10px; left: 10px;
  display: flex; gap: 4px; z-index: 10;
}
.gooal-tab {
  width: 26px; height: 26px; border-radius: 5px;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.7);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
}
.gooal-tab.active {
  background: #f5c400; border-color: #f5c400; color: #000;
}
.gooal-tab:hover { border-color: #f5c400; }
.gooal-close {
  position: absolute; top: 8px; right: 10px; z-index: 10;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.7); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
}
.gooal-close:hover { background: rgba(255,0,0,.4); }

/* ── CATEGORY PILLS (ubett style) ── */
.cx-cats {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.cx-cats::-webkit-scrollbar { display: none; }
.cx-cat {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.65);
  border-radius: 20px;
  padding: 5px 14px; font-size: 12px; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.cx-cat:hover {
  border-color: #f5c400; color: #f5c400;
  background: rgba(245,196,0,.07);
}
.cx-cat.active {
  background: rgba(245,196,0,.15);
  border-color: #f5c400; color: #f5c400;
}

/* ── PROVIDER SIDEBAR (ubett style) ── */
.cx-sidebar {
  background: rgba(10,15,30,.92);
  border: 1px solid rgba(245,196,0,.15);
  width: 188px;
}
.cx-sb-head { background: rgba(245,196,0,.08); border-bottom-color: rgba(245,196,0,.15); }
.cx-sb-head-l { color: #f5c400; }
.cx-sb-search { background: rgba(255,255,255,.04); color: #fff; }
.cx-sb-all--active { color: #f5c400; background: rgba(245,196,0,.07); }
.cx-pv-item.active { background: rgba(245,196,0,.07); border-left-color: #f5c400; }
.cx-pv-item.active .cx-pv-check { background: #f5c400; border-color: #f5c400; }

/* ── GAME CARDS (ubett/gooal style: title on TOP) ── */
.cx-card {
  aspect-ratio: unset;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: #0c1220;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cx-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245,196,0,.3);
  box-shadow: 0 8px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(245,196,0,.15);
}
/* Title on TOP like gooal/ubett */
.cx-card-inner {
  display: flex; flex-direction: column;
}
.cx-card-top-title {
  padding: 8px 10px 6px;
  font-size: 11.5px; font-weight: 700;
  color: rgba(255,255,255,.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: #0c1220;
  line-height: 1.2;
}
.cx-card-thumb-wrap {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3;
}
.cx-card-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .2s;
}
.cx-card:hover .cx-card-img { transform: scale(1.07); }
.cx-card::after { display: none; } /* remove old gradient */
.cx-card-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; opacity: 0;
  transition: opacity .15s;
}
.cx-card:hover .cx-card-overlay { opacity: 1; }
.cx-card-play {
  position: static;
  transform: none !important;
  opacity: 1 !important;
  width: 40px; height: 40px;
  background: rgba(245,196,0,.9);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cx-card-play svg { color: #000; width: 16px; height: 16px; }
.cx-card-overlay-title {
  font-size: 11px; color: rgba(255,255,255,.8); font-weight: 600;
  text-align: center; padding: 0 8px;
}
/* Badges */
.cx-card-rtp  { top: 5px; left: 5px; font-size: 8.5px; }
.cx-card-hot  { top: 5px; right: 5px; font-size: 8.5px; }
.cx-card-new  { top: 5px; right: 5px; font-size: 8.5px; }

/* ── GAME SECTIONS ── */
.cx-section { margin-bottom: 20px; }
.cx-section-head { margin-bottom: 10px; }
.cx-section-title {
  font-size: 14px; font-weight: 700;
  color: #fff; gap: 6px;
}
.cx-section-title span { color: #f5c400; }
.cx-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.cx-grid--lg { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
.cx-grid--sm { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); }

/* ── LIVE CARDS (gooal style) ── */
.cx-live-card {
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  aspect-ratio: 16/9;
}
.cx-live-card:hover { border-color: rgba(245,196,0,.35); }

/* ── STATS STRIP ── */
.cx-stats {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px; padding: 10px 14px;
}
.cx-stat-val { color: #f5c400; font-size: 16px; }
.cx-stat-lbl { font-size: 10px; }

/* ── LAYOUT ── */
.cx-layout { padding: 12px 14px 24px; gap: 12px; }

/* ── TRENDING ── */
.cx-trending-card {
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: #0c1220;
}
.cx-trending-card:hover { border-color: rgba(245,196,0,.3); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(245,196,0,.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(245,196,0,.4); }

@media (max-width:768px) {
  .navbar { padding: 0 12px; }
  .nav-logo-img { height: 30px; }
  .gooal-banner-slider { height: 150px; }
  .gooal-slide-title { font-size: 18px; }
  .gooal-slide-art { display: none; }
  .cx-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════
   GOOAL HOMEPAGE — exact reference layout
══════════════════════════════════════════════════════════════ */
.gooal-home {
  padding: 10px 10px 30px;
  max-width: 480px;       /* mobile-first: centered on desktop */
  margin: 0 auto;
}

/* ── Sportsbook Banner ── */
.gh-sportsbook-banner {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 4px;
  cursor: pointer;
  border: 1px solid rgba(245,196,0,.2);
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.gh-banner-gif {
  width: 100%; display: block;
  /* No max-height: it capped the banner at 220px, which silently defeated the
     aspect-ratio set further down — widening the container grew the box but
     not the picture, so the image cropped harder the wider the screen got. */
  object-fit: cover;
}
.gh-banner-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4) 100%);
}

/* ── LIVE / PREMATCH buttons ── */
.gh-action-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 6px 0;
}
.gh-btn-live {
  background: #1a9e3f;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 0;
  font-size: 15px; font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow: 0 4px 16px rgba(34,197,94,.35);
  transition: transform .12s, box-shadow .12s;
}
.gh-btn-live:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(34,197,94,.45);
}
.gh-live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff;
  animation: livepulse2 1.2s ease-in-out infinite;
  display: inline-block; flex-shrink: 0;
}
.gh-btn-prematch {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 0;
  font-size: 15px; font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(59,130,246,.35);
  transition: transform .12s, box-shadow .12s;
}
.gh-btn-prematch:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(59,130,246,.45);
}

/* ── Promo Banner ── */
.gh-promo-banner {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin: 6px 0;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.gh-promo-gif {
  width: 100%; display: block;
  /* Same cap, same consequence as .gh-banner-gif above — removed so the
     aspect-ratio governs and the banner scales instead of cropping. */
  object-fit: cover;
}
.gh-promo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.3) 0%, transparent 60%);
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 8px;
}
.gh-promo-tag {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 10px; font-weight: 800;
  letter-spacing: .08em;
  padding: 3px 8px; border-radius: 4px;
  text-transform: uppercase;
  transform: rotate(0deg);
  box-shadow: 0 2px 8px rgba(239,68,68,.5);
}

/* ── Cards Grid ── */
.gh-cards-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 6px;
  margin: 6px 0 12px;
}
.gh-cards-stack {
  display: flex; flex-direction: column; gap: 6px;
}

/* Card base */
.gh-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
  transition: transform .15s, box-shadow .15s;
  display: flex; align-items: flex-end; justify-content: flex-start;
}
.gh-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.6); }
.gh-card-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.gh-card-dim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.75) 100%);
}
.gh-card-label {
  position: relative; z-index: 2;
  padding: 10px 12px;
  font-size: 15px; font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
  letter-spacing: .03em;
}

/* Big Live Casino card */
.gh-card--big {
  min-height: 160px;
  background: #1a0a30;
}
.gh-card--big .gh-card-label {
  font-size: 16px;
  background: linear-gradient(90deg, rgba(0,0,0,.7) 0%, transparent 100%);
  width: 100%; padding: 10px 14px;
}

/* Casino card — orange */
.gh-card--casino {
  min-height: 75px;
  background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
  border-color: rgba(234,88,12,.4);
  box-shadow: 0 2px 12px rgba(234,88,12,.3);
  justify-content: center; align-items: center;
}
.gh-card--casino .gh-card-label {
  font-size: 16px; padding: 0; text-align: center;
}

/* Provider card — blue */
.gh-card--provider {
  min-height: 75px;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  border-color: rgba(37,99,235,.4);
  box-shadow: 0 2px 12px rgba(37,99,235,.3);
  justify-content: center; align-items: center;
}
.gh-card--provider .gh-card-label {
  font-size: 16px; padding: 0; text-align: center;
}

/* ── Section headers ── */
.gh-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 14px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.gh-section-title {
  font-size: 14px; font-weight: 700; color: #fff;
}
.gh-section-link {
  font-size: 12px; color: #f5c400; cursor: pointer; font-weight: 600;
  transition: opacity .15s;
}
.gh-section-link:hover { opacity: .75; }

/* ══════════════════════════════════════════════════════════════
   GOOAL SIGN IN MODAL — exact reference screenshot
══════════════════════════════════════════════════════════════ */
.gooal-modal {
  background: #1a1030;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  max-width: 420px;
  width: 90%;
}
.gooal-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #2d1060 0%, #1a0a40 100%);
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.gooal-modal-title {
  font-size: 16px; font-weight: 700; color: #fff;
}
.gooal-modal-close {
  width: 28px; height: 28px;
  background: #ef4444; border: none;
  color: #fff; font-size: 14px; font-weight: 700;
  border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.gooal-modal-close:hover { background: #dc2626; }
.gooal-modal-body {
  padding: 24px 20px 20px;
  background: #14102a;
}
.gooal-form-group { margin-bottom: 16px; }
.gooal-label {
  display: block;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75);
  margin-bottom: 6px;
}
.gooal-input {
  width: 100%;
  background: #d4d4d4;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  padding: 11px 14px;
  font-size: 14px; color: #111;
  outline: none;
  transition: border-color .15s;
}
.gooal-input::placeholder { color: #666; }
.gooal-input:focus { border-color: #f5c400; background: #e8e8e8; }
.gooal-forgot {
  font-size: 13px; color: rgba(255,255,255,.6);
  cursor: pointer; text-decoration: underline;
  transition: color .15s;
}
.gooal-forgot:hover { color: #f5c400; }
.gooal-modal-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 20px;
}
.gooal-btn-close {
  background: #ef4444;
  border: none; color: #fff;
  padding: 10px 24px; border-radius: 6px;
  font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.gooal-btn-close:hover { background: #dc2626; }
.gooal-btn-signin {
  background: #22c55e;
  border: none; color: #fff;
  padding: 10px 24px; border-radius: 6px;
  font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background .15s, box-shadow .15s;
}
.gooal-btn-signin:hover {
  background: #16a34a;
  box-shadow: 0 4px 14px rgba(34,197,94,.4);
}

/* ── Full-width homepage on mobile ── */
@media (max-width: 520px) {
  .gooal-home { padding: 0 2px 16px; max-width: 100%; gap: 6px; }
  .gh-banner-gif { height: 150px; }
  .gh-promo-gif  { height: 80px; }
  .gh-btn-live, .gh-btn-prematch { height: 40px; font-size: 14px; }
  .gh-card--big  { min-height: 130px; }
  .gh-card--casino, .gh-card--provider { height: 60px; }
}

/* ── Desktop: center the gooal home ── */
@media (min-width: 769px) {
  .gooal-home {
    max-width: 540px;
    padding: 16px 0 40px;
  }
  .layout--casino .main,
  .main { display: flex; flex-direction: column; align-items: center; }
  #page-home { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   UBETT CASINO / LIVE CASINO — exact reference design
══════════════════════════════════════════════════════════════ */
.ubett-page {
  padding: 10px 10px 0;
  background: radial-gradient(circle at top, rgba(34,197,94,.12), transparent 28%),
              radial-gradient(circle at 80% 12%, rgba(245,196,0,.1), transparent 18%),
              linear-gradient(180deg, #07121f 0%, #05131f 30%, #02101d 100%);
}

/* ── BANNER SLIDER ── */
.ubett-slider-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  min-height: 200px !important;
  height: 220px !important;
  overflow: hidden;
  border-radius: 16px;
  background: #08121f !important;
  border: 1px solid rgba(245,196,0,.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}
/* Strong enforcement: ensure slider track and slides preserve 100% height inside the wrapper */
.ubett-track-wrap, .ubett-track, .ubett-slide {
  height: 100% !important;
  min-height: 0 !important;
}
.ubett-slider-wrap .ubett-slide-img, .ubett-track-wrap .ubett-slide-img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
  border: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.ubett-track-wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border-radius: 14px;
  background: transparent !important;
}
.ubett-track {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
  transition: transform .42s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.ubett-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  background: transparent !important;
  overflow: hidden;
}
@media (max-width: 480px) {
  .ubett-slider-wrap { padding: 0 6px; min-height: 170px; height: 170px; }
  .ubett-track-wrap { padding: 0; }
  .ubett-slide { padding: 0; }
  .ubett-slide-img { object-position: center center !important; }
}
.ubett-track-wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent !important;
}
.ubett-track {
  display: flex;

  align-items: stretch;
  transition: transform .42s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.ubett-slide {
  flex: 0 0 100%; /* ensure each slide is exactly wrapper width */
  width: 100%;
  box-sizing: border-box;
  min-height: 100%;
  background: transparent !important;
}
.ubett-slide-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: transparent !important;
  border: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Ensure slider images are not constrained by generic max-height rules used elsewhere */
.ubett-slider-wrap .ubett-slide-img,
.ubett-track-wrap .ubett-slide-img {
  max-height: none !important;
  height: 100% !important;
  background: transparent !important;
}

.ubett-slider-wrap,
.ubett-track-wrap,
.ubett-track,
.ubett-slide,
.ubett-slide-img,
.ubett-slide-img::before,
.ubett-slide-img::after,
.ubett-track-wrap::before,
.ubett-track-wrap::after,
.ubett-slide::before,
.ubett-slide::after {
  background: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Numbered tabs — top-left over slider */
.ubett-tabs {
  position: absolute;
  top: 10px; left: 10px;
  display: flex; gap: 5px;
  z-index: 20;
}
.ubett-tab {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.72);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .18s;
}
.ubett-tab.active {
  background: #0f9b6b;
  border-color: #22c55e;
  color: #fff;
  box-shadow: 0 0 18px rgba(34,197,94,.24);
}
.ubett-tab:hover:not(.active) {
  border-color: rgba(34,197,94,.45);
  color: #fff;
}

/* ── CATEGORY BAR ── */
.ubett-cats-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(3,13,29,.86);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 6px 10px;
  min-height: 52px;
  position: sticky;
  top: 58px;
  z-index: 32;
  backdrop-filter: blur(10px);
}
.ubett-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 46px;
}

.ubett-search-btn {
  background: linear-gradient(135deg, var(--ubett-blue), #0b3c72);
  border: 1px solid var(--ubett-btn-border);
  color: var(--ubett-btn-text);
  width: 46px; height: 46px;
  border-radius: 16px;
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .18s, background .18s, border-color .18s, box-shadow .18s;
  box-shadow: 0 8px 18px rgba(18,75,156,.16);
}
.ubett-search-btn:hover {
  background: linear-gradient(135deg, #2f5da8, #1c8fe8);
  border-color: rgba(255,255,255,.34);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(46,110,255,.25);
}

.ubett-btn {
  border-radius: 16px;
  font-weight: 700;
  border: 1px solid var(--ubett-btn-border);
  transition: transform .18s, background .18s, border-color .18s, box-shadow .18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ubett-btn--green {
  background: linear-gradient(135deg, var(--ubett-green), #25a46c);
  color: #fff;
  box-shadow: 0 8px 18px rgba(26,112,81,.18);
}
.ubett-btn--green:hover {
  background: linear-gradient(135deg, #24a16d, var(--ubett-green));
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(26,112,81,.25);
}
.ubett-btn--blue {
  background: linear-gradient(135deg, var(--ubett-blue), #0b3c72);
  color: var(--ubett-btn-text);
  box-shadow: 0 8px 18px rgba(18,75,156,.16);
}
.ubett-btn--blue:hover {
  background: linear-gradient(135deg, #2f5da8, #1c8fe8);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(46,110,255,.25);
}

.ubett-search-wrap .ubett-game-search {
  width: 0;
  opacity: 0;
  padding: 0;
  border-color: rgba(255,255,255,0);
  background: rgba(255,255,255,0);
  color: #fff;
  pointer-events: none;
  transition: width .28s ease, opacity .2s ease, padding .2s ease, background .2s ease, border-color .2s ease;
}

.ubett-search-wrap.active {
  min-width: 180px;
}

.ubett-search-wrap.active .ubett-game-search {
  width: 180px;
  opacity: 1;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  pointer-events: auto;
}

.ubett-search-wrap.active .ubett-game-search:focus {
  border-color: rgba(34,197,94,.95);
  box-shadow: 0 0 18px rgba(34,197,94,.15);
}
.ubett-cats-scroll {
  display: flex;
  overflow-x: auto;
  flex: 1;
  gap: 8px;
  scrollbar-width: none;
  padding: 0 0 0 2px;
}
.ubett-cats-scroll::-webkit-scrollbar { display: none; }
.ubett-cat {
  background: linear-gradient(120deg, rgba(24, 46, 78, 0.95), rgba(9, 28, 58, 0.95));
  background-size: 220% 220%;
  border: 1.5px solid rgba(168,85,247,.70);
  color: rgba(255,255,255,.85);
  border-radius: 12px;              /* rounded rectangles, not full pills */
  padding: 8px 18px;
  font-size: 13px; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: transform .18s, color .18s, background .18s;
  /* Same 8s period as the active pill's hue-spin, so the idle borders and
     the active fill stay in phase instead of drifting apart. */
  animation: ubett-cat-glow 6s ease infinite,
             ubett-border-cycle 8s linear infinite;
}
.ubett-cat:hover {
  border-color: rgba(34,118,175,.65);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(34,118,175,.18);
}
.ubett-cat.active {
  background: linear-gradient(120deg, #ff5ac7, #21d07a, #4b7df4);
  background-size: 220% 220%;
  border-color: rgba(255,255,255,.35);
  color: #fff;
  box-shadow: 0 0 22px rgba(255,90,199,.24), 0 0 18px rgba(33,208,122,.18);
  /* Pan the gradient AND rotate its hues. Panning alone only slid the same
     three colours back and forth; the rotation is what makes the fill
     actually travel through the spectrum. */
  animation: ubett-cat-active 5s ease infinite,
             ubett-hue-spin 8s linear infinite;
}
.ubett-cat-num {
  background: rgba(255,255,255,.09);
  color: #fff;
  font-size: 10px; font-weight: 800;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

@keyframes ubett-cat-glow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes ubett-cat-active {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ══ Scrolling ══════════════════════════════════════════════════
   Three separate problems, three fixes:

   1. The horizontal chip rows hid their scrollbar entirely
      (scrollbar-width: none), so on desktop there was no signal that more
      categories existed off-screen — users simply never found them. A slim
      always-visible bar restores the affordance without the chrome of a
      full-size one.

   2. Scroll chaining: flicking to the end of a chip row handed the gesture
      to the page, which then jumped. overscroll-behavior stops it there.

   3. Snapping: chips now settle aligned to the left edge instead of resting
      half-cut, which is what made the rows feel unfinished on touch. */
.ubett-cats-scroll,
.ubett-pv-chips {
  scrollbar-width: thin;
  scrollbar-color: rgba(34,197,94,.45) transparent;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;   /* momentum on older iOS */
  scroll-padding-left: 10px;
}
.ubett-cats-scroll > *,
.ubett-pv-chips > * { scroll-snap-align: start; }

.ubett-cats-scroll::-webkit-scrollbar,
.ubett-pv-chips::-webkit-scrollbar { height: 4px; }
.ubett-cats-scroll::-webkit-scrollbar-track,
.ubett-pv-chips::-webkit-scrollbar-track { background: transparent; }
.ubett-cats-scroll::-webkit-scrollbar-thumb,
.ubett-pv-chips::-webkit-scrollbar-thumb {
  background: rgba(34,197,94,.45);
  border-radius: 4px;
}
.ubett-cats-scroll::-webkit-scrollbar-thumb:hover,
.ubett-pv-chips::-webkit-scrollbar-thumb:hover { background: rgba(34,197,94,.75); }

/* Anchors and "back to top" glide instead of teleporting — but only for users
   who have not asked the OS to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ══ Rotating gradient border + hover sheen ═════════════════════
   The ring is a conic-gradient on a ::before that is physically rotated,
   rather than an animated `from <angle>`. Animating the angle needs
   @property, which silently no-ops on browsers that lack it — the border
   would simply sit still. transform: rotate() is hardware-composited and
   works everywhere.

   The element gets `isolation: isolate` so the negative z-indexes below stay
   trapped inside the button instead of sliding under the page background. */
.gh-btn-live,
.gh-btn-prematch {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.gh-btn-live::before,
.gh-btn-prematch::before {
  content: '';
  position: absolute;
  /* Oversized and centred so the square gradient still covers the button's
     corners through a full turn. */
  width: 260%; aspect-ratio: 1;
  top: 50%; left: 50%;
  translate: -50% -50%;
  background: conic-gradient(#22c55e, #38bdf8, #a855f7, #ec4899, #f59e0b, #22c55e);
  animation: gh-ring-spin 5s linear infinite;
  z-index: -2;
}

/* Solid fill that leaves only a 2px rim of the gradient showing, and carries
   the hover sheen as a second background layer — both pseudo-elements are
   already spoken for, so the highlight rides along here rather than needing
   a third box. Sliding background-position costs nothing at rest. */
.gh-btn-live::after,
.gh-btn-prematch::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 6px;
  z-index: -1;
  background-image: linear-gradient(115deg,
      transparent 42%, rgba(255,255,255,.30) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 165% 0;   /* parked off the right edge */
  background-repeat: no-repeat;
  transition: background-position .6s ease, background-color .15s;
}
.gh-btn-live::after     { background-color: #1a7051; }
.gh-btn-prematch::after { background-color: #2834c2; }

.gh-btn-live:hover::after,
.gh-btn-prematch:hover::after { background-position: -65% 0; }

.gh-btn-live:hover::after     { background-color: #1e8560; }
.gh-btn-prematch:hover::after { background-color: #3140d8; }

@keyframes gh-ring-spin { to { rotate: 360deg; } }

.gh-btn-live:hover,
.gh-btn-prematch:hover {
  transform: translateY(-1px);
  filter: none;                 /* the ring already supplies the emphasis */
}

/* Label and the live dot must sit above both pseudo-elements. */
.gh-btn-live > *,
.gh-btn-prematch > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .gh-btn-live::before,
  .gh-btn-prematch::before { animation: none; }
}

/* ══ Animated colour cycle ══════════════════════════════════════
   The reference UI does not merely pan a fixed gradient — the hues
   themselves travel (magenta → orange → green → violet and round again),
   with the idle pill borders shifting in step with the active pill's fill.
   Two mechanisms, because they need different treatment:

   hue-spin rotates every hue in the element. It is safe on the active pill
   because its label is pure white, and white is achromatic — hue-rotate
   cannot tint it. Applying the same filter to an idle pill WOULD drag its
   grey text off-colour, so those cycle border-color by keyframe instead. */
@keyframes ubett-hue-spin {
  to { filter: hue-rotate(360deg); }
}

@keyframes ubett-border-cycle {
  0%   { border-color: rgba(168, 85,247,.70); box-shadow: 0 0 12px rgba(168, 85,247,.26); }
  25%  { border-color: rgba(236, 72,153,.70); box-shadow: 0 0 12px rgba(236, 72,153,.26); }
  50%  { border-color: rgba(245,158, 11,.70); box-shadow: 0 0 12px rgba(245,158, 11,.26); }
  75%  { border-color: rgba( 34,197, 94,.70); box-shadow: 0 0 12px rgba( 34,197, 94,.26); }
  100% { border-color: rgba(168, 85,247,.70); box-shadow: 0 0 12px rgba(168, 85,247,.26); }
}

/* Respect users who ask the OS to stop motion — a permanently cycling
   border is exactly the kind of thing that setting exists for. */
@media (prefers-reduced-motion: reduce) {
  .ubett-cat,
  .ubett-cat.active,
  .ubett-pv-chip,
  .ubett-card { animation: none !important; }
}
/* keep default input hidden behind the search icon until activated */
.ubett-game-search {
  width: 0;
  opacity: 0;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: #fff;
  outline: none;
  min-width: 0;
  flex-shrink: 0;
  pointer-events: none;
  transition: width .28s ease, opacity .2s ease, padding .2s ease, background .2s ease, border-color .2s ease, box-shadow .18s;
}
.ubett-game-search::placeholder { color: rgba(255,255,255,.4); }
.ubett-search-wrap.active .ubett-game-search {
  width: 180px;
  opacity: 1;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  pointer-events: auto;
}
.ubett-search-wrap.active .ubett-game-search:focus {
  border-color: rgba(34,197,94,.95);
  box-shadow: 0 0 18px rgba(34,197,94,.18);
  background: rgba(255,255,255,.08);
}

/* ── PROVIDER FILTER BAR ── */
.ubett-provider-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #080d18;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ubett-provider-gold-line {
  position: absolute;
  left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, #f5c400 30%, #f5c400 70%, transparent 100%);
  pointer-events: none;
  opacity: .6;
}
.ubett-provider-center {
  position: relative; z-index: 2;
  display: flex; justify-content: center;
  flex: 1;
}
.ubett-provider-toggle {
  display: flex; align-items: center; gap: 8px;
  background: #ffd94f;
  border: 1px solid rgba(252,197,74,.9);
  color: #09131d;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(255,217,79,.25);
  transition: box-shadow .18s, transform .18s;
  white-space: nowrap;
}
.ubett-provider-toggle:hover { box-shadow: 0 0 24px rgba(255,217,79,.35); transform: translateY(-1px); }
.ubett-pv-arrow { transition: transform .2s; }
.ubett-pv-arrow.open { transform: rotate(180deg); }
.ubett-clear-btn {
  background: #ee2937;
  border: none; color: #fff;
  padding: 6px 16px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s, transform .15s;
  position: relative; z-index: 2;
}
.ubett-clear-btn:hover { background: #c81d2d; transform: translateY(-1px); }

/* ── PROVIDER CHIPS ── */
.ubett-pv-chips {
  display: flex;
  overflow-x: auto;
  gap: 6px;
  padding: 8px 10px;
  background: #080d18;
  border-bottom: 1px solid rgba(255,255,255,.06);
  scrollbar-width: thin;
  scrollbar-color: rgba(245,196,0,.2) transparent;
}
.ubett-pv-chips::-webkit-scrollbar { height: 3px; }
.ubett-pv-chips::-webkit-scrollbar-thumb { background: rgba(245,196,0,.2); border-radius: 3px; }
.ubett-pv-chip {
  background: rgba(5,20,34,.72);
  /* .2 alpha was effectively invisible against the dark panel; the reference
     shows a clearly drawn teal outline on every provider chip. */
  border: 1.5px solid rgba(16,185,129,.55);
  color: rgba(255,255,255,.78);
  border-radius: 12px;
  padding: 7px 18px;
  font-size: 12px; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
  cursor: pointer;
  transition: all .18s;
}
.ubett-pv-chip:hover {
  border-color: rgba(34,197,94,.6);
  color: #fff;
  background: rgba(34,197,94,.12);
}
.ubett-pv-chip.active {
  background: linear-gradient(135deg, rgba(34,197,94,.24), rgba(16,185,129,.12));
  border-color: #16a34a;
  color: #fff;
  box-shadow: 0 0 14px rgba(34,197,94,.22);
}

/* ── GAME GRID — title on top, image below ── */
.ubett-grid {
  display: grid;
  /* 150px packed 3 columns into a phone-width viewport, which truncated most
     titles to "Gates of Oly…". ubett.me keeps 2 columns at that width; 180px
     is the threshold that produces the same break. */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 12px 12px 32px;
  background: transparent;
}
.ubett-card {
  background: linear-gradient(180deg,#081324,#081d30);
  /* Teal outline, matching the provider chips: in the reference every game
     tile is clearly bounded rather than melting into the starfield. */
  border: 1px solid rgba(16,185,129,.45);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.ubett-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34,197,94,.85);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
}
.ubett-card-title {
  padding: 12px 12px 10px;
  text-align: center;              /* ubett.me centres its card titles */
  font-size: 13px; font-weight: 800;
  color: #fdfdfd;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid rgba(255,255,255,.07);
  /* ubett.me's game cards carry a neutral dark title bar; the green gradient
     competed with the LIVE button and the Register button for the same accent. */
  background: linear-gradient(180deg,#18203a,#121829);
  line-height: 1.2;
  position: relative;
}
/* The gold star was a ::after pseudo-element — decorative only, since a
   pseudo-element cannot receive a click; favourites are handled by the filter
   pill above the grid. It ate the right third of every title bar, which is
   what forced titles to truncate. ubett.me has no star and centres its titles. */
.ubett-card-thumb {
  position: relative;
  /* 3:2 — the reference serves its game art at 300x200, so a 4:3 box cropped
     every thumbnail slightly top and bottom. */
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #08121f;
}
/* Applied by ubettImgFallback() when the artwork 404s. --ph-hue is set
   per-card from the title, so the grid reads as varied rather than as a
   wall of identical empty tiles. */
.ubett-thumb--noimg {
  background:
    radial-gradient(120% 90% at 30% 15%,
      hsl(var(--ph-hue, 210) 42% 26%) 0%,
      hsl(var(--ph-hue, 210) 40% 14%) 55%,
      #08121f 100%);
}
.ubett-thumb--noimg::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round'><rect x='3' y='5' width='18' height='14' rx='2.5'/><circle cx='8.5' cy='12' r='2'/><circle cx='15.5' cy='12' r='2'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34px 34px;
  opacity: .22;
}
.ubett-card-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .25s ease;
  background: #0f1728;
}
.ubett-card:hover .ubett-card-img { transform: scale(1.06); }
.ubett-card-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  opacity: 0; transition: opacity .15s;
}
.ubett-card:hover .ubett-card-overlay { opacity: 1; }
/* Hover highlight, matching the reference: the title bar turns green and a
   red call-to-action appears over the artwork. The green says "this tile is
   live"; the red is the only warm colour on the page, so the eye lands on the
   one thing worth clicking. */
.ubett-card:hover .ubett-card-title {
  background: linear-gradient(180deg, #17794f, #0f5c3b);
  color: #fff;
}
.ubett-card-play {
  min-width: 44px; height: 40px;
  padding: 0 18px;
  background: #e5342a;
  color: #fff;
  border-radius: 20px;
  font-size: 13px; font-weight: 800;
  letter-spacing: .03em;
  box-shadow: 0 6px 18px rgba(229,52,42,.45);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ubett-card-play svg { color: #fff; }
.ubett-card-play::after { content: 'Play'; }
.ubett-card-provider {
  font-size: 11px; color: rgba(255,255,255,.82); font-weight: 700;
}
.ubett-card-badge {
  position: absolute; top: 10px; right: 10px;
  font-size: 9px; font-weight: 800;
  padding: 4px 7px; border-radius: 5px; color: #fff;
}
.ubett-card-badge--hot { background: linear-gradient(135deg,#f97316,#ef4444); }
.ubett-card-badge--new { background: #6366f1; }
.ubett-card-badge--rtp { background: #10b981; }

/* Skeleton */
.ubett-card-skel {
  background: #0d1525;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  overflow: hidden;
  animation: cxpulse 1.4s infinite;
}
.ubett-card-skel-title { height: 30px; background: #101828; }
.ubett-card-skel-img { aspect-ratio: 4/3; background: #141e30; }

/* Empty / no results */
.ubett-empty {
  grid-column: 1/-1;
  padding: 60px 20px;
  text-align: center;
  color: rgba(255,255,255,.3);
}
.ubett-empty-icon { font-size: 40px; margin-bottom: 10px; }
.ubett-empty-txt { font-size: 14px; }

/* ── Responsive ── */
@media (max-width: 600px) {
  /* Fixed 2 columns rather than auto-fill: a 120px minimum packed 3-4 cards
     across a phone and truncated nearly every title. ubett.me shows exactly
     two on any phone width, and a fixed count cannot drift with the viewport. */
  /* Moderate density: 10px reads as deliberate separation where 6px looked
     like the cards were touching by accident, and costs one card row over a
     typical scroll. */
  .ubett-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px 10px 28px; }
  .ubett-slide-img { max-height: 180px; }
  .ubett-cats-bar { top: 52px; }

  .ubett-search-btn {
    color: #1a7051;
    padding: 0 5px !important;
    border-right: 0 solid #172b3e;
    height: 35px !important;
    line-height: 33px !important;
  }

  .ubett-search-wrap.active {
    min-width: 180px;
  }
}
@media (min-width: 1200px) {
  /* 165px produced 7-8 columns on a 1440px screen — tiles small enough that
     titles crowd and the artwork stops reading. 200px settles at 6. */
  .ubett-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
  .ubett-slide-img { max-height: 280px; }
}

/* ══════════════════════════════════════════════════════════════
   GOOAL HOMEPAGE v3 — EXACT screenshot match
══════════════════════════════════════════════════════════════ */

/* ── Navbar ── */
.gooal-nav {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 10px;
  background: #071120 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.gooal-nav-logo { cursor: pointer; display: flex; align-items: center; }
.nav-logo-img   { height: 38px; width: auto; object-fit: contain; display: block; }

.gooal-nav-right {
  display: flex; align-items: center; gap: 6px;
}
.gooal-nav-icon {
  background: none; border: none;
  color: rgba(255,255,255,.6);
  padding: 4px; cursor: pointer;
  transition: color .15s;
  display: flex; align-items: center;
}
.gooal-nav-icon:hover { color: rgba(255,255,255,.95); }

/* Sign in button — exact screenshot: dark border, white text */
.gooal-signin-btn {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.45);
  color: rgba(255,255,255,.9);
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.gooal-signin-btn:hover {
  border-color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.06);
}

/* ── Homepage wrapper ── */
.gooal-home {
  padding: 0 4px 16px;
  max-width: 500px;
  margin: 0 auto;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── 1. Sportsbook banner ── */
.gh-sportsbook-banner {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  margin: 0;
  border: 2px solid #00cfff;
  box-shadow: 0 0 18px rgba(0,207,255,.25), 0 4px 20px rgba(0,0,0,.5);
  display: block;
  flex-shrink: 0;
}
.gh-banner-gif {
  width: 100%;
  display: block;
  /* The source gif is 400x200 (ratio 2:1). A fixed 170px height forced a ~2.95
     ratio, so object-fit:cover cropped a third of the image vertically and cut
     off the "And more..." line. Locking the box to the image's own ratio shows
     it whole at any width, like ubett.me does. */
  aspect-ratio: 2 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
}

/* ── 2. LIVE / PREMATCH buttons ── */
.gh-action-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0;
  border-radius: 6px;
  overflow: visible;
  border: none;
}
/* LIVE and PREMATCH are a matched pair: on ubett.me they are identical
   rectangles differing only in colour. They had drifted apart on six
   properties (height 48 vs 44, radius 8 vs 6, font-size 15 vs 16, weight
   800 vs 700, letter-spacing, and one of them forcing Arial), which is why
   they rendered at different sizes side by side.
   Everything shared now lives in this one rule; each button only sets its
   own background below. */
.gh-btn-live,
.gh-btn-prematch {
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 8px;
  color: #fff;                      /* was #bbbbbb — grey text on saturated fills reads as disabled */
  font-family: inherit;             /* one of the two hard-coded Arial */
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: none;                 /* ubett.me's buttons are flat, no coloured glow */
  transition: filter .12s, transform .12s;
}

.gh-btn-live:hover,
.gh-btn-prematch:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

.gh-btn-live {
  background: #1a7051;
}
.gh-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; flex-shrink: 0;
  animation: livepulse2 1.2s ease-in-out infinite;
}
.gh-btn-prematch {
  background: #2834c2;
}

/* ── 3. Sport Boost promo banner ── */
.gh-promo-banner {
  position: relative;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  flex-shrink: 0;
}
.gh-promo-gif {
  width: 100%;
  display: block;
  /* Same problem as the hero: the file is 975x300 (ratio 3.25) but a fixed
     90px height squeezed it to ~5.6, clipping "SPORT BOOST" at the top and
     "BOOST YOUR WINNINGS" at the bottom. */
  aspect-ratio: 975 / 300;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}
/* NEW GAME tag */
.gh-promo-newtag {
  position: absolute;
  top: 0; right: 0;
  background: #ff3d3d;
  color: #fff;
  font-size: 9px; font-weight: 900;
  text-transform: uppercase;
  line-height: 1.15;
  padding: 5px 7px;
  text-align: center;
  min-width: 46px;
  border-radius: 0 8px 0 8px;
  box-shadow: -2px 2px 6px rgba(0,0,0,.4);
}

/* ── 4. Bottom cards grid ── */
.gh-cards-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 6px;
  margin: 0;
}
.gh-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Card base */
.gh-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.09);
  transition: transform .14s;
  display: flex;
  align-items: flex-end;
}
.gh-card:hover { transform: translateY(-2px); }

.gh-card-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.gh-card-dim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.75) 100%);
}

/* Live Casino label — red footer bar like reference */
.gh-card-label {
  position: relative; z-index: 2;
  width: 100%;
  /* The card is a flex column whose image is absolutely positioned, so the
     label — the only in-flow child — landed at the top and covered the
     artwork. ubett.me sits it along the bottom edge instead. */
  margin-top: auto;
  font-family: 'Times New Roman', Times, serif;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  letter-spacing: .01em;
}

/* Big Live Casino card */
.gh-card--big {
  min-height: 145px;
  background: #0d1a2a;
  flex-direction: column;
  align-items: stretch;
}
.gh-card--big .gh-card-label {
  background: #8b0000;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Was margin:0, which pinned the label to the top of the flex column and
     covered the artwork — while border-radius below still rounded its BOTTOM
     corners, showing it was always meant to sit at the foot of the card.
     auto on top pushes it down, matching ubett.me. */
  margin-top: auto;
  padding: 0;
  border-radius: 0 0 8px 8px;
}

/* Orange Casino card */
.gh-card--casino {
  height: 68px;
  background: linear-gradient(180deg, #c56f10 0%, #b45c00 100%);
  border-color: rgba(197,111,16,.4);
  box-shadow: 0 2px 12px rgba(180,92,0,.35);
  justify-content: center;
  align-items: center;
}
.gh-card--casino .gh-card-label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  padding: 0;
  background: none;
  height: auto;
  border-radius: 0;
}

/* Blue Amatic card */
.gh-card--provider {
  height: 68px;
  background: linear-gradient(180deg, #3568ff 0%, #234dcc 100%);
  border-color: rgba(53,104,255,.4);
  box-shadow: 0 2px 12px rgba(35,77,204,.35);
  justify-content: center;
  align-items: center;
}
.gh-card--provider .gh-card-label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  padding: 0;
  background: none;
  height: auto;
  border-radius: 0;
}

/* ══════════════════════════════════════════════════════════════
   GOOAL SIGN IN MODAL — exact ubett.me style (Sign in screenshot)
══════════════════════════════════════════════════════════════ */
.gooal-modal {
  background: #1a1030 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  padding: 0 !important;
  overflow: hidden !important;
  max-width: 400px !important;
  width: calc(100% - 32px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.8) !important;
}
.gooal-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #2e1264 0%, #1a0a40 100%);
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.gooal-modal-title {
  font-size: 15px; font-weight: 700; color: #fff;
}
.gooal-modal-close {
  width: 26px; height: 26px;
  background: #dc2626; border: none; color: #fff;
  font-size: 13px; font-weight: 800;
  border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.gooal-modal-close:hover { background: #b91c1c; }
.gooal-modal-body { padding: 20px 18px 18px; background: #130f28; }
.gooal-form-group { margin-bottom: 14px; }
.gooal-label {
  display: block; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.8); margin-bottom: 5px;
}
.gooal-input {
  width: 100%; background: #d1d5db;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px; padding: 10px 13px;
  font-size: 13.5px; color: #111; outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}
.gooal-input::placeholder { color: #6b7280; }
.gooal-input:focus { border-color: #7c3aed; background: #e5e7eb; }
.gooal-forgot {
  display: block; text-align: center;
  font-size: 12.5px; color: rgba(255,255,255,.5);
  cursor: pointer; text-decoration: underline;
  margin: 12px 0 0;
  transition: color .15s;
}
.gooal-forgot:hover { color: #f5c400; }
.gooal-modal-actions {
  display: flex; justify-content: flex-end;
  gap: 8px; margin-top: 18px;
}
.gooal-btn-close {
  background: #dc2626; border: none; color: #fff;
  padding: 9px 22px; border-radius: 6px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.gooal-btn-close:hover { background: #b91c1c; }
.gooal-btn-signin {
  background: #16a34a; border: none; color: #fff;
  padding: 9px 22px; border-radius: 6px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.gooal-btn-signin:hover {
  background: #15803d;
  box-shadow: 0 4px 14px rgba(22,163,74,.4);
}

/* ── Responsive ── */
@media (max-width: 520px) {
  .gooal-home { max-width: 100%; }
  .gh-banner-gif { max-height: 170px; }
  .gh-promo-gif  { max-height: 90px; }
  .gh-card--big  { min-height: 140px; }
  .gh-card--casino, .gh-card--provider { min-height: 68px; }
  .gh-btn-live, .gh-btn-prematch { font-size: 13.5px; padding: 12px 0; }
}
@media (min-width: 768px) {
  .gooal-home { padding: 0 0 20px; }
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT FIX — full width on all pages
══════════════════════════════════════════════════════════════ */

/* Reset any old 3-column grid — use simple block layout */
.layout {
  display: block !important;
  width: 100%;
}
.main {
  display: block !important;
  width: 100%;
}

/* Hide sports sidebar always except sports/inplay */
.sidebar { display: none !important; }
.betslip-col { display: none !important; }

/* Home page — centered max-width container */
.gooal-home {
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 8px 40px;
}

/* ── Responsive: let the home column grow with the viewport ──────
   It was hard-capped at 520px at every width, so on a 1440px desktop the
   whole page sat as a narrow strip marooned in black while the header
   stretched edge to edge — the site read as unfinished.
   Every block inside uses aspect-ratio, so widening the container scales
   the artwork proportionally with no cropping. The steps stay conservative:
   past ~950px a banner becomes more billboard than interface. */
@media (min-width: 768px)  { .gooal-home { max-width: 900px;  padding: 14px 12px 44px; gap: 12px; } }
@media (min-width: 1024px) { .gooal-home { max-width: 1200px; gap: 14px; } }
@media (min-width: 1400px) { .gooal-home { max-width: 1400px; gap: 14px; padding: 16px 20px 48px; } }

/* The hero keeps the source file's 2:1 ratio on phones, where that is exactly
   the artwork's shape and nothing is lost. Held at 2:1 across a 1400px column
   it would stand 700px tall — a banner taller than most laptop viewports, and
   the rest of the page pushed below the fold. Widening the ratio as the screen
   grows trades a little top-and-bottom crop for a banner that stays a banner. */
   The ratios stay gentle because this particular banner is mostly type —
   "SPORTSBOOK / FOOTBALL / BASKETBALL / TENNIS" runs top to bottom, so every
   degree of extra width eats a line. object-position pulls the visible window
   toward the top, where the headline sits, rather than cropping it evenly at
   both ends. */
@media (min-width: 768px)  { .gh-banner-gif { aspect-ratio: 2.3 / 1; object-position: center 28%; } }
@media (min-width: 1024px) { .gh-banner-gif { aspect-ratio: 2.7 / 1; object-position: center 26%; } }
@media (min-width: 1400px) { .gh-banner-gif { aspect-ratio: 3.0 / 1; object-position: center 24%; } }

/* Controls and tiles keep phone proportions as the column grows, which leaves
   46px buttons and 3.6:1 tiles stranded under a 460px-tall banner. Scale them
   with the breakpoints so the page reads as one composition at every width. */
@media (min-width: 768px) {
  .gh-btn-live, .gh-btn-prematch { height: 52px; font-size: 15.5px; }
  .gh-card--big { min-height: 200px; }
  .gh-card--casino, .gh-card--provider { min-height: 94px; }
  .gh-card--big .gh-card-label { height: 52px; font-size: 26px; }
  .gh-card--casino .gh-card-label,
  .gh-card--provider .gh-card-label { font-size: 20px; }
}
@media (min-width: 1024px) {
  .gh-btn-live, .gh-btn-prematch { height: 58px; font-size: 17px; letter-spacing: .08em; }
  .gh-card--big { min-height: 250px; }
  .gh-card--casino, .gh-card--provider { min-height: 120px; }
  .gh-card--big .gh-card-label { height: 58px; font-size: 30px; }
  .gh-card--casino .gh-card-label,
  .gh-card--provider .gh-card-label { font-size: 23px; }
}

/* Casino/Live pages — full width */
.ubett-page {
  width: 100%;
  max-width: 100%;
}

/* Navbar fix */
.gooal-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 52px !important;
  padding: 0 14px !important;
  background: #080c1a !important;
  border-bottom: 1.5px solid rgba(255,255,255,.08) !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Push content below fixed navbar */
body { padding-top: 52px; }
.layout { min-height: calc(100vh - 52px); }

/* Hide old nav-links if they exist */
.nav-links { display: none !important; }
.nl { display: none !important; }

/* Remove providers bar and footer clutter */
.providers-bar { display: none; }

/* ══════════════════════════════════════════════════════════════
   NAV BUTTONS — ubett.me exact design colors and styles
══════════════════════════════════════════════════════════════ */
/* ══ AUTH PAIR WRAPPER — zero gap, flush together ══ */
.gooal-auth-pair {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 34px;
}

/* ══ SIGN IN — #52668c (dark gray-blue) exact ubett.me style ══ */
.gooal-login-btn {
  background: #171c2c;
  border: 1px solid #1a7051;
  border-right: none;
  color: #fff;                     /* was #bbbbbb — grey label read as a disabled button */
  padding: 0 16px;
  height: 34px;
  border-radius: 6px 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter .12s, background .12s, transform .12s;
  line-height: 1;
  text-align: center;
}
.gooal-login-btn:hover {
  /* #5b7697 was a blue-grey belonging to no other part of the palette and
     flashed on hover. Tinting toward the green border keeps the pair coherent. */
  background: #1e2740;
  border-color: #228f6a;
}

/* ══ REGISTER — #1a7051 (dark green) exact ubett.me style ══ */
.gooal-register-btn {
  background: #1a7051;
  border: 1px solid #1a7051;
  color: #fff;                     /* matches .gooal-login-btn — the pair must read as one control */
  padding: 0 16px;
  height: 34px;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter .12s, background .12s, transform .12s;
  line-height: 1;
  text-align: center;
}
.gooal-register-btn:hover {
  filter: brightness(1.1);
  background: #1d8056;
}

/* ══════════════════════════════════════════════════════════════
   BRIGHTER STARFIELD BACKGROUND — matches screenshot 2
   More vivid blue, lighter navy, sharper stars
══════════════════════════════════════════════════════════════ */
body {
  background:
    url('../img/cas-bg.gif') center top / cover fixed,
    radial-gradient(ellipse at 50% 0%, #0d2255 0%, #060c1f 60%, #020812 100%) !important;
  background-blend-mode: screen !important;
}

/* Boost brightness of the starfield gif */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(30,80,200,.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(20,60,180,.2) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(10,40,140,.15) 0%, transparent 70%);
  pointer-events: none;
}

/* Make pages transparent to show bg */
.layout, .main, .ubett-page, .gooal-home,
#page-home, #page-casino, #page-live,
#page-sports, #page-promo {
  background: transparent !important;
}

/* Navbar stays dark */
.gooal-nav {
  background: rgba(6,10,22,.96) !important;
  backdrop-filter: blur(8px) !important;
}

/* Casino/live content areas — subtle dark card backgrounds */
.ubett-cats-bar   { background: rgba(5,10,25,.88) !important; }
.ubett-provider-bar { background: rgba(5,10,25,.88) !important; }
.ubett-pv-chips   { background: rgba(5,10,25,.85) !important; }


/* ══════════════════════════════════════════════════════════════
   HOME PAGE BACKGROUND — scoped exclusively to #page-home
   Matches Screenshot B: clean dark charcoal, zero stars/glow
   ALL other pages remain completely unchanged
══════════════════════════════════════════════════════════════ */

/* Shield div: hidden by default, covers starfield only on home */
#home-bg-shield {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(160deg,
    #0f1318 0%,
    #111519 40%,
    #0d1015 70%,
    #0a0d11 100%
  );
  pointer-events: none;
}

/* Activate shield ONLY when home page is active */
body:has(#page-home.active) #home-bg-shield {
  display: block;
}

/* Home content sits above the shield */
#page-home.active {
  position: relative;
  z-index: 1;
}

/* Kill blue glow radial overlays on home page only */
body:has(#page-home.active)::before {
  opacity: 0 !important;
}

/* Home container stays transparent */
body:has(#page-home.active) .gooal-home {
  background: transparent !important;
}

/* Navbar above shield */
body:has(#page-home.active) .gooal-nav {
  position: relative;
  z-index: 10;
}


/* ══════════════════════════════════════════════════════════════
   SPORTSBOOK BANNER SLIDER — scoped to .gh-slider-root
   Does NOT affect any other component
══════════════════════════════════════════════════════════════ */

/* Container — inherits border-radius/shadow from .gh-sportsbook-banner */
.gh-slider-root {
  position: relative;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.gh-slider-root:active { cursor: grabbing; }

/* Track — horizontal flex, no-wrap, GPU-accelerated slides */
.gh-slider-track {
  display: flex;
  width: 100%;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Individual slide */
.gh-slide {
  min-width: 100%;
  width: 100%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Image inside slide */
.gh-slide-img {
  width: 100%;
  height: 210px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Dots */
.gh-slider-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 10;
}
.gh-slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s, width 0.25s;
}
.gh-slider-dot.active {
  background: #2ecc9a;
  border-color: #2ecc9a;
  width: 18px;
  border-radius: 4px;
  transform: none;
}

/* Arrow buttons */
.gh-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  width: 28px;
  height: 36px;
  border-radius: 4px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  padding: 0;
}
.gh-slider-root:hover .gh-slider-arrow { opacity: 1; }
.gh-slider-arrow:hover { background: rgba(46,204,154,0.55); }
.gh-slider-prev { left: 6px; }
.gh-slider-next { right: 6px; }

/* Responsive heights */
@media (max-width: 480px) {
  .gh-slide-img { height: 160px; }
}
@media (min-width: 768px) {
  .gh-slide-img { height: 240px; }
}


/* ══════════════════════════════════════════════════════════════
   CASINO & LIVE PAGE BANNER SLIDER
   Scoped to .ubett-track[data-slider]
══════════════════════════════════════════════════════════════ */

/* Override ubett-track when it's a slider root */
.ubett-track.gh-slider-root {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.ubett-track.gh-slider-root:active { cursor: grabbing; }

/* Inner flex track */
.ubett-slider-track-inner {
  display: flex;
  width: 100%;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Each slide inside inner track */
.ubett-slider-track-inner .ubett-slide {
  min-width: 100%;
  width: 100%;
  flex-shrink: 0;
}

/* Images */
.ubett-slider-track-inner .ubett-slide-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Slider height is controlled by .ubett-slider-wrap; responsive heights handled there */


/* ══════════════════════════════════════════════════════════════
   SPORTS PAGE BANNER SLIDER (LIVE + PREMATCH)
   Fixed mobile: slides use JS pixel widths, no flex collapse
══════════════════════════════════════════════════════════════ */
.sp-slider-root {
  position: relative;
  overflow: hidden;          /* clips the sliding track */
  border-radius: 8px;
  margin: 8px 8px 6px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* box-sizing so padding never adds width */
  box-sizing: border-box;
  /* take full available width minus margin */
  width: calc(100% - 16px);
  max-width: 100%;
  display: block;
}
.sp-slider-root:active { cursor: grabbing; }

/* Track — JS sets pixel width & translateX */
.sp-slider-track {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
  /* width set by JS = slideW * total */
}

/* Slides — JS sets exact pixel width */
.sp-slide {
  flex: 0 0 auto;
  overflow: hidden;
  box-sizing: border-box;
  /* width injected by JS */
}

.sp-slide-img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Dots */
.sp-slider-dots {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 10;
  pointer-events: none;
}
.sp-slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.55);
  cursor: pointer;
  pointer-events: all;
  transition: background .25s, width .25s;
}
.sp-slider-dot.active {
  background: #22d3a6;
  border-color: #22d3a6;
  width: 18px;
  border-radius: 4px;
}

/* Arrows — show on hover */
.sp-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  width: 30px;
  height: 38px;
  border-radius: 4px;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s, background .2s;
  padding: 0;
}
.sp-slider-root:hover .sp-slider-arrow { opacity: 1; }
.sp-slider-arrow:hover { background: rgba(34,211,166,.55); }
.sp-slider-prev { left: 6px; }
.sp-slider-next { right: 6px; }

/* ── Responsive heights ── */
@media (max-width: 480px) {
  .sp-slider-root { width: calc(100% - 8px); margin: 6px 4px; }
  .sp-slide-img   { height: 150px; }
}
@media (min-width: 481px) and (max-width: 767px) {
  .sp-slide-img { height: 175px; }
}
@media (min-width: 768px) {
  .sp-slide-img { height: 240px; }
}


/* ══════════════════════════════════════════════════════════════
   CASINO & LIVE CASINO PAGE BANNER SLIDER
   Uses pixel-width JS measurement — no mobile split bug
   Scoped entirely to .pg-slider-root
══════════════════════════════════════════════════════════════ */
.pg-slider-root {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(0,207,255,.3);
  box-shadow: 0 0 16px rgba(0,207,255,.15), 0 4px 20px rgba(0,0,0,.5);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  margin-bottom: 2px;
}
.pg-slider-root:active { cursor: grabbing; }

.pg-slider-track {
  display: flex;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
}

.pg-slide {
  flex: 0 0 auto;
  overflow: hidden;
}

.pg-slide-img {
  width: 100%;
  height: 200px;
  display: block;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Dots */
.pg-slider-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 10;
}
.pg-slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.5);
  cursor: pointer;
  transition: background .25s, width .25s;
}
.pg-slider-dot.active {
  background: #22d3a6;
  border-color: #22d3a6;
  width: 18px;
  border-radius: 4px;
}

/* Arrows */
.pg-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  width: 28px;
  height: 36px;
  border-radius: 4px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s, background .2s;
  padding: 0;
}
.pg-slider-root:hover .pg-slider-arrow { opacity: 1; }
.pg-slider-arrow:hover { background: rgba(34,211,166,.5); }
.pg-slider-prev { left: 6px; }
.pg-slider-next { right: 6px; }

@media (max-width: 480px) {
  .pg-slide-img { height: 155px; }
}
@media (min-width: 768px) {
  .pg-slide-img { height: 240px; }
}


/* ══════════════════════════════════════════════════════════════
   ALTENAR SPORTSBOOK — FULL LAYOUT FIX
   Forces the sports page to take full width on all devices
   and eliminates sidebar / betslip / grid conflicts
══════════════════════════════════════════════════════════════ */

/* When sports page is active: collapse grid to 1 col, hide sidebars */
body:has(#page-sports.active) .layout {
  display: block !important;
  width: 100% !important;
}
body:has(#page-sports.active) .sidebar,
body:has(#page-sports.active) .betslip-col {
  display: none !important;
}
body:has(#page-sports.active) .main {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Sports page itself */
#page-sports {
  width: 100%;
  box-sizing: border-box;
}

/* Altenar wrapper — full-width column */
.altenar-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Banner slider inside sports — full width */
.altenar-wrap .sp-slider-root {
  width: 100% !important;
  margin: 0 0 0 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box;
}

/* Altenar SDK frame */
.altenar-frame {
  width: 100%;
  min-height: 70vh;
  flex: 1;
  position: relative;
  background: transparent;
  box-sizing: border-box;
}
.altenar-frame.frame-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* SDK iframe / rendered widget: full width */
#bia-sports-frame,
#bia-sports-frame > *,
#bia-sports-frame iframe {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 70vh !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Loading indicator */
.altenar-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 300px;
  color: rgba(255,255,255,.55);
  font-size: 14px;
  letter-spacing: .02em;
}
.altenar-loading.hidden { display: none !important; }

.altenar-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid rgba(255,255,255,.12);
  border-top-color: #22d3a6;
  border-radius: 50%;
  animation: altenar-spin 0.85s linear infinite;
}
@keyframes altenar-spin { to { transform: rotate(360deg); } }

/* Error state */
.altenar-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  color: #f87171;
  font-size: 14px;
  text-align: center;
  padding: 24px;
}
.altenar-error button {
  margin-top: 10px;
  padding: 9px 22px;
  background: #22d3a6;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

/* ── Mobile: full width, no gutters ── */
@media (max-width: 768px) {
  .altenar-wrap { padding: 0; }
  .altenar-frame,
  #bia-sports-frame,
  #bia-sports-frame > *,
  #bia-sports-frame iframe {
    min-height: 80vh !important;
  }
  .altenar-wrap .sp-slider-root {
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
}

/* ── Desktop: add small padding so SDK doesn't touch edges ── */
@media (min-width: 769px) {
  .altenar-wrap {
    padding: 0 12px 16px;
  }
  .altenar-wrap .sp-slider-root {
    border-radius: 8px !important;
    margin: 8px 0 6px !important;
    width: 100% !important;
  }
}

/* Balance flash animation when updated by sportsbook */
.balance-flash {
  animation: balFlash 0.5s ease;
}
@keyframes balFlash {
  0%   { color: #22d3a6; }
  100% { color: inherit; }
}