/* ==========================================================================
   PLIXWIN – teal theme (main look)
   Loaded last, only when the teal theme is on. The colour-mapped copies of the
   site stylesheets in /teal/ handle colours; this file sets the new layout:
   Stake-style sidebar + header, one home banner, flat clean surfaces,
   Stake-size game tiles and a Gamdom-style phone bar.
   Palette: #00141F bg · #001A27 chrome · #002734 surface · #28628A lines ·
            #00B175 green · #FD9001 orange accent · #FFFFFF text
   ========================================================================== */
html[data-theme="teal"] {
  /* one dark colour for page, header and sidebar; flat, no glow */
  --tl-bg: #000D14; --tl-side: #000D14; --tl-sf: #061A24; --tl-sf2: #09212D; --tl-sf3: #0D2937;
  --tl-line: #0B1C25; --tl-field: #03131B; --tl-fieldline: #0D2531; --tl-icon: #6F8FA3;
  --tl-green: #00B175; --tl-green-h: #00C482; --tl-orange: #FD9001; --tl-muted: #86A4B6; --tl-on: #000D14;
  --tl-glow: 0 0 0 0 transparent; --tl-press: 0 0 0 0 transparent;
  --tl-ease: cubic-bezier(.2, .7, .2, 1); --tl-sbw: 248px; --tl-hdh: 68px;
  background: var(--tl-bg);
  color-scheme: dark;
}
html[data-theme="teal"] body { background: var(--tl-bg) !important; color: #FFFFFF; -webkit-font-smoothing: antialiased; }
html[data-theme="teal"] body,
html[data-theme="teal"] body *:not(svg):not(path) { font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif !important; }
html[data-theme="teal"] .tl-ic { width: 20px; height: 20px; fill: currentColor; flex: none; display: block; }
html[data-theme="teal"] .tl-ic .tl-cut { fill: var(--tl-sf); }
html[data-theme="teal"] ::selection { background: rgba(0, 177, 117, .35); }
html[data-theme="teal"] :is(button, a, [tabindex]):focus-visible { outline: 2px solid var(--tl-green) !important; outline-offset: 2px; }
html[data-theme="teal"] .pxa-auth-poster { object-position: 50% 50% !important; }

/* ---------- opening screen (animation lives inline in index.html) ---------- */
html[data-theme="teal"] .plx { background: var(--tl-bg) !important; }
html[data-theme="teal"] .plx-bar { background: var(--tl-sf) !important; }
html[data-theme="teal"] .plx-bar i { background: var(--tl-green) !important; box-shadow: none !important; }

/* ---------- desktop frame: sidebar on the left, header beside it ---------- */
@media (min-width: 901px) {
  html[data-theme="teal"] body.nav-compact { --tl-sbw: 76px; }
  html[data-theme="teal"] .site-sidebar.gold-sidebar {
    width: var(--tl-sbw) !important; background: var(--tl-bg) !important; border: 0 !important; border-right: 1px solid var(--tl-line) !important; box-shadow: none !important;
    display: flex !important; flex-direction: column !important; transition: width .22s var(--tl-ease) !important;
  }
  html[data-theme="teal"] .top-header {
    margin-left: var(--tl-sbw) !important; width: auto !important; height: var(--tl-hdh) !important; min-height: var(--tl-hdh) !important;
    padding: 0 32px !important; background: var(--tl-bg) !important; border: 0 !important;
    box-shadow: none !important; transition: margin-left .22s var(--tl-ease) !important;
    position: relative !important; top: auto !important;
  }
  html[data-theme="teal"] .app-shell,
  html[data-theme="teal"] .app-footer { margin-left: var(--tl-sbw) !important; width: auto !important; transition: margin-left .22s var(--tl-ease) !important; }
  html[data-theme="teal"] .top-header .top-nav-tabs { display: none !important; }
  html[data-theme="teal"] .tl-bbar { display: none !important; }
}

/* ---------- sidebar ---------- */
html[data-theme="teal"] .navigation-collapse,
html[data-theme="teal"] .gold-account, html[data-theme="teal"] .gold-daily,
html[data-theme="teal"] .gold-label, html[data-theme="teal"] .gold-sidebar-bottom,
html[data-theme="teal"] #navigationScroll > .sidebar-item:not(.tl-item) { display: none !important; }
html[data-theme="teal"] body:not(.has-player) .sidebar-logout { display: none !important; }

html[data-theme="teal"] .tl-sb-top { flex: none; height: var(--tl-hdh); display: flex; align-items: center; gap: 8px; padding: 0 12px; position: relative; z-index: 2; box-shadow: none; background: var(--tl-bg); }
html[data-theme="teal"] .tl-ham { width: 40px; height: 40px; flex: none; border: 0; border-radius: 10px; background: none; color: #FFFFFF; display: grid; place-items: center; cursor: pointer; }
html[data-theme="teal"] .tl-ham:hover { background: var(--tl-sf); }
html[data-theme="teal"] .tl-seg { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-width: 0; }
html[data-theme="teal"] .tl-seg button { height: 40px; border: 0; border-radius: 9px; background: var(--tl-sf); color: #FFFFFF; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .2s var(--tl-ease); min-width: 0; padding: 0 6px; }
html[data-theme="teal"] .tl-seg button .tl-ic { width: 17px; height: 17px; color: var(--tl-green); }
html[data-theme="teal"] .tl-seg button:hover { background: var(--tl-sf3); }
html[data-theme="teal"] .tl-seg button.is-on { background: var(--tl-green); color: var(--tl-on); box-shadow: var(--tl-press), var(--tl-glow); }
html[data-theme="teal"] .tl-seg button.is-on .tl-ic { color: var(--tl-on); }

html[data-theme="teal"] .gold-sidebar .navigation-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 12px 20px !important; background: transparent !important; scrollbar-width: none; }
html[data-theme="teal"] .gold-sidebar .navigation-scroll::-webkit-scrollbar { display: none; }
html[data-theme="teal"] .tl-nav { display: flex; flex-direction: column; min-height: 100%; }
html[data-theme="teal"] .tl-pnl { background: var(--tl-sf); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
html[data-theme="teal"] .tl-pnl.is-folded > .tl-item { display: none !important; }
html[data-theme="teal"] .gold-sidebar .sidebar-item.tl-item,
html[data-theme="teal"] .tl-grp {
  display: flex !important; align-items: center !important; gap: 14px !important; width: 100% !important; height: 40px !important; min-height: 40px !important;
  padding: 0 12px !important; margin: 0 !important; border: 0 !important; border-radius: 10px !important; background: transparent !important;
  color: var(--tl-muted) !important; font-size: 14px !important; font-weight: 600 !important; text-align: left; cursor: pointer; box-shadow: none !important;
  justify-content: flex-start !important; transition: background .2s var(--tl-ease), color .2s var(--tl-ease) !important;
}
html[data-theme="teal"] .gold-sidebar .sidebar-item.tl-item .tl-ic { width: 20px !important; height: 20px !important; color: var(--tl-icon); transition: color .2s var(--tl-ease); }
html[data-theme="teal"] .gold-sidebar .sidebar-item.tl-item span { display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme="teal"] .gold-sidebar .sidebar-item.tl-item:hover { background: var(--tl-sf2) !important; color: #FFFFFF !important; }
html[data-theme="teal"] .gold-sidebar .sidebar-item.tl-item:hover .tl-ic { color: #FFFFFF; }
html[data-theme="teal"] .gold-sidebar .sidebar-item.tl-item.active { background: var(--tl-sf3) !important; color: #FFFFFF !important; }
html[data-theme="teal"] .gold-sidebar .sidebar-item.tl-item.active .tl-ic { color: var(--tl-green); }
html[data-theme="teal"] .gold-sidebar .sidebar-item.tl-item::before,
html[data-theme="teal"] .gold-sidebar .sidebar-item.tl-item::after { display: none !important; }
html[data-theme="teal"] .tl-grp { color: #FFFFFF !important; font-weight: 700 !important; }
html[data-theme="teal"] .tl-grp .tl-ic { color: var(--tl-green); }
html[data-theme="teal"] .tl-cv { width: 12px !important; height: 12px !important; margin-left: auto; color: var(--tl-icon) !important; transition: transform .2s var(--tl-ease); }
html[data-theme="teal"] .tl-pnl.is-folded .tl-grp .tl-cv { transform: rotate(-90deg); }
html[data-theme="teal"] .tl-tag { margin-left: auto; height: 20px; padding: 0 7px; border-radius: 6px; background: rgba(0, 177, 117, .16); color: var(--tl-green); font-size: 11px; font-weight: 800; font-style: normal; display: inline-flex; align-items: center; }
html[data-theme="teal"] .tl-lang { margin-top: auto; height: 44px; width: 100%; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--tl-sf); color: #FFFFFF; font-size: 14px; font-weight: 700; cursor: pointer; }
html[data-theme="teal"] .tl-lang:hover { background: var(--tl-sf3); }
html[data-theme="teal"] .tl-lang > .tl-ic:first-child { width: 18px; height: 18px; color: var(--tl-icon); }
html[data-theme="teal"] .tl-lang i { color: #1C4558; font-style: normal; }
html[data-theme="teal"] .tl-lang small { font-size: 13px; color: var(--tl-muted); font-weight: 700; }
html[data-theme="teal"] .tl-lang .tl-cv { color: var(--tl-green) !important; }
html[data-theme="teal"] .tl-sb-foot { margin: 14px 4px 0; font-size: 12px; color: var(--tl-muted); }
html[data-theme="teal"] .tl-sb-foot b { color: #FFFFFF; }

/* folded (icons only) */
@media (min-width: 901px) {
  html[data-theme="teal"] body.nav-compact .tl-seg,
  html[data-theme="teal"] body.nav-compact .tl-nav span,
  html[data-theme="teal"] body.nav-compact .gold-sidebar .sidebar-item.tl-item span,
  html[data-theme="teal"] body.nav-compact .tl-nav .tl-cv,
  html[data-theme="teal"] body.nav-compact .tl-tag,
  html[data-theme="teal"] body.nav-compact .tl-lang i,
  html[data-theme="teal"] body.nav-compact .tl-lang small,
  html[data-theme="teal"] body.nav-compact .tl-sb-foot { display: none !important; }
  html[data-theme="teal"] body.nav-compact .tl-sb-top { justify-content: center; padding: 0; }
  html[data-theme="teal"] body.nav-compact .gold-sidebar .navigation-scroll { padding: 16px 10px !important; }
  html[data-theme="teal"] body.nav-compact .tl-pnl { padding: 4px; }
  html[data-theme="teal"] body.nav-compact .gold-sidebar .sidebar-item.tl-item,
  html[data-theme="teal"] body.nav-compact .tl-grp,
  html[data-theme="teal"] body.nav-compact .tl-lang { justify-content: center !important; padding: 0 !important; gap: 0 !important; }
}

/* ---------- header ---------- */
html[data-theme="teal"] .top-header .brand-logo-img { height: 34px !important; width: auto !important; max-width: none !important; filter: none !important; }
html[data-theme="teal"] .top-header .header-left { gap: 10px; }
html[data-theme="teal"] .header-right { gap: 10px !important; }
html[data-theme="teal"] .wallet-pill.px-wallet { background: var(--tl-sf) !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important; padding: 4px !important; }
html[data-theme="teal"] .wallet-balance-box { background: transparent !important; border: 0 !important; color: #FFFFFF !important; }
html[data-theme="teal"] .wallet-balance-amount, html[data-theme="teal"] #headerBalanceVal { color: #FFFFFF !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; }
html[data-theme="teal"] .px-cur-badge { background: rgba(0, 177, 117, .16) !important; color: var(--tl-green) !important; border: 0 !important; }
html[data-theme="teal"] .wallet-currency-sym { color: var(--tl-green) !important; }
html[data-theme="teal"] .btn-header-deposit,
html[data-theme="teal"] .btn-header-register {
  background: var(--tl-green) !important; color: var(--tl-on) !important; border: 0 !important; border-radius: 10px !important;
  font-weight: 800 !important; box-shadow: var(--tl-press), var(--tl-glow) !important; background-image: none !important; text-shadow: none !important;
}
html[data-theme="teal"] .btn-header-deposit:hover,
html[data-theme="teal"] .btn-header-register:hover { background: var(--tl-green-h) !important; }
html[data-theme="teal"] .btn-header-deposit svg, html[data-theme="teal"] .btn-header-deposit .px-dep-ico { color: var(--tl-on) !important; fill: none; }
html[data-theme="teal"] .btn-header-login { background: var(--tl-sf) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 10px !important; font-weight: 700 !important; box-shadow: none !important; background-image: none !important; }
html[data-theme="teal"] .btn-header-login:hover { background: var(--tl-sf3) !important; }
html[data-theme="teal"] .header-notification-btn,
html[data-theme="teal"] .header-account-btn,
html[data-theme="teal"] .btn-search-trigger { background: transparent !important; border: 0 !important; color: var(--tl-icon) !important; border-radius: 10px !important; box-shadow: none !important; }
html[data-theme="teal"] .header-notification-btn:hover,
html[data-theme="teal"] .header-account-btn:hover,
html[data-theme="teal"] .btn-search-trigger:hover { background: var(--tl-sf) !important; color: #FFFFFF !important; }
html[data-theme="teal"] .user-profile-pill { background: var(--tl-sf) !important; border: 0 !important; }
html[data-theme="teal"] .user-avatar-circle, html[data-theme="teal"] .px-avatar { filter: grayscale(1); }

/* ---------- home: one banner ---------- */
html[data-theme="teal"] .px-home-hero,
html[data-theme="teal"] .reference-jackpot { display: none !important; }
html[data-theme="teal"] .tl-hero { position: relative; height: 300px; border-radius: 16px; overflow: hidden; background: var(--tl-bg); margin: 0 0 8px; }
html[data-theme="teal"] body:not(.home-mode) .tl-hero { display: none; }
html[data-theme="teal"] .tl-hero picture, html[data-theme="teal"] .tl-hero img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html[data-theme="teal"] .tl-hero img { object-fit: cover; object-position: 72% 50%; }
html[data-theme="teal"] .tl-hero-tx { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); max-width: 42%; }
html[data-theme="teal"] .tl-eb { display: inline-flex; align-items: center; gap: 6px; color: var(--tl-green); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
html[data-theme="teal"] .tl-eb .tl-ic { width: 14px; height: 14px; }
html[data-theme="teal"] .tl-hero h1 { margin: 12px 0; font-family: 'Unbounded', 'Manrope', sans-serif !important; font-weight: 700; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; color: #FFFFFF; letter-spacing: -.01em; }
html[data-theme="teal"] .tl-hero h1 span { color: var(--tl-green); font-family: inherit !important; }
html[data-theme="teal"] .tl-hero p { margin: 0 0 24px; font-size: 15px; line-height: 1.6; font-weight: 500; color: #FFFFFF; max-width: 420px; }
html[data-theme="teal"] .tl-hero-a { display: flex; gap: 10px; flex-wrap: wrap; }
html[data-theme="teal"] .tl-btn { height: 40px; padding: 0 20px; border: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 800; cursor: pointer; transition: background .2s var(--tl-ease), transform .15s var(--tl-ease); }
html[data-theme="teal"] .tl-btn:active { transform: translateY(1px); }
html[data-theme="teal"] .tl-btn .tl-ic { width: 16px; height: 16px; }
html[data-theme="teal"] .tl-btn-g { background: var(--tl-green); color: var(--tl-on); box-shadow: var(--tl-press), var(--tl-glow); }
html[data-theme="teal"] .tl-btn-g:hover { background: var(--tl-green-h); }
html[data-theme="teal"] .tl-btn-s { background: var(--tl-sf); color: #FFFFFF; }
html[data-theme="teal"] .tl-btn-s:hover { background: var(--tl-sf3); }
html[data-theme="teal"] .tl-btn-lg { height: 48px; padding: 0 26px; font-size: 15px; border-radius: 12px; }

/* ---------- category tabs + search ---------- */
html[data-theme="teal"] .category-pills-bar { gap: 6px !important; }
html[data-theme="teal"] .cat-pill-item {
  height: 40px !important; padding: 0 14px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important;
  color: var(--tl-muted) !important; font-weight: 700 !important; font-size: 14px !important; box-shadow: none !important; background-image: none !important;
}
html[data-theme="teal"] .cat-pill-item .cat-pill-ico, html[data-theme="teal"] .cat-pill-item svg { width: 18px !important; height: 18px !important; color: var(--tl-icon) !important; fill: currentColor !important; }
html[data-theme="teal"] .cat-pill-item:hover { background: var(--tl-sf) !important; color: #FFFFFF !important; }
html[data-theme="teal"] .cat-pill-item.active { background: var(--tl-sf) !important; color: #FFFFFF !important; }
html[data-theme="teal"] .cat-pill-item.active svg { color: var(--tl-green) !important; }
html[data-theme="teal"] .cat-pill-item .tl-cut { fill: var(--tl-bg); }
html[data-theme="teal"] .cat-pill-item.active .tl-cut, html[data-theme="teal"] .cat-pill-item:hover .tl-cut { fill: var(--tl-sf); }
html[data-theme="teal"] .search-box-field {
  height: 44px !important; border-radius: 8px !important; background: var(--tl-field) !important; border: 1px solid var(--tl-fieldline) !important; box-shadow: none !important; color: var(--tl-icon) !important;
}
html[data-theme="teal"] .search-box-field input { color: #FFFFFF !important; font-weight: 600 !important; }
html[data-theme="teal"] .search-box-field input::placeholder { color: var(--tl-icon) !important; }
html[data-theme="teal"] .providers-dropdown-btn {
  height: 44px !important; border-radius: 8px !important; background: var(--tl-field) !important; border: 1px solid var(--tl-fieldline) !important; color: #FFFFFF !important; box-shadow: none !important; font-weight: 700 !important;
}
html[data-theme="teal"] .providers-dropdown-btn .tl-ic { width: 18px; height: 18px; color: var(--tl-icon); }
html[data-theme="teal"] .providers-dropdown-btn > svg:last-child { color: var(--tl-green) !important; }
html[data-theme="teal"] .navigation-provider-menu { background: var(--tl-sf) !important; border: 1px solid var(--tl-fieldline) !important; box-shadow: 0 16px 40px rgba(0, 8, 14, .6) !important; }

/* ---------- section headers ---------- */
html[data-theme="teal"] .rail-header-line { align-items: center !important; margin-bottom: 16px !important; min-height: 40px; }
html[data-theme="teal"] .rail-title-box { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 21px !important; font-weight: 800 !important; color: #FFFFFF !important; }
html[data-theme="teal"] .rail-title-box span, html[data-theme="teal"] .reference-home-title, html[data-theme="teal"] .reference-casino-title { font-size: 21px !important; font-weight: 800 !important; color: #FFFFFF !important; letter-spacing: -.005em; }
html[data-theme="teal"] .rail-title-box .tl-ttl-ic, html[data-theme="teal"] .tl-ttl-ic { display: grid !important; place-items: center; color: var(--tl-green) !important; background: none !important; width: auto !important; height: auto !important; border: 0 !important; }
html[data-theme="teal"] .tl-ttl-ic .tl-ic { width: 24px; height: 24px; }
html[data-theme="teal"] .rail-actions-box { display: flex !important; align-items: center !important; gap: 10px !important; }
html[data-theme="teal"] .rail-see-all-action {
  height: 38px !important; padding: 0 20px !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important;
  background: var(--tl-green) !important; color: var(--tl-on) !important; font-size: 14px !important; font-weight: 800 !important; border: 0 !important;
  box-shadow: var(--tl-press), var(--tl-glow) !important; text-decoration: none !important;
}
html[data-theme="teal"] .rail-see-all-action:hover { background: var(--tl-green-h) !important; }
html[data-theme="teal"] .rail-nav-buttons, html[data-theme="teal"] .home-mode #sectionTopHits .rail-nav-buttons { display: flex !important; gap: 8px !important; order: -1; }
html[data-theme="teal"] .rail-nav-circle,
html[data-theme="teal"] .px-arrows button {
  width: 38px !important; height: 38px !important; border-radius: 8px !important; background: var(--tl-field) !important; border: 1px solid var(--tl-fieldline) !important;
  color: var(--tl-green) !important; display: grid !important; place-items: center !important; box-shadow: none !important; padding: 0 !important;
}
html[data-theme="teal"] .rail-nav-circle:hover, html[data-theme="teal"] .px-arrows button:hover { background: var(--tl-sf) !important; }
html[data-theme="teal"] .rail-nav-circle .tl-ic, html[data-theme="teal"] .px-arrows button .tl-ic { width: 14px; height: 14px; }
html[data-theme="teal"] .px-sec-head { margin-bottom: 16px !important; }
html[data-theme="teal"] .px-sec-title { display: flex !important; align-items: center !important; gap: 10px !important; }
html[data-theme="teal"] .px-sec-title h2 { font-size: 21px !important; font-weight: 800 !important; color: #FFFFFF !important; }

/* ---------- game tiles: picture only, one size (Stake style) ---------- */
html[data-theme="teal"] .game-card, html[data-theme="teal"] .app-shell #topHitsRail .game-card { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 10px !important; transition: transform .22s var(--tl-ease) !important; }
html[data-theme="teal"] .game-card:hover { transform: translateY(-4px) !important; }
html[data-theme="teal"] .game-card::before, html[data-theme="teal"] .game-card::after { display: none !important; content: none !important; }
html[data-theme="teal"] .game-card .game-card-info { display: none !important; }
html[data-theme="teal"] .game-thumb-box { border-radius: 10px !important; overflow: hidden !important; border: 0 !important; box-shadow: none !important; background: var(--tl-sf2) !important; aspect-ratio: 3 / 4; width: 100% !important; height: auto !important; margin: 0 !important; }
html[data-theme="teal"] .game-thumb-img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; transform: none !important; }
html[data-theme="teal"] .game-card:hover .game-thumb-img { transform: none !important; filter: none !important; }
html[data-theme="teal"] .card-hover-overlay { background: rgba(0, 13, 20, .88) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-theme="teal"] .btn-card-play-circle { width: 52px !important; height: 52px !important; border-radius: 14px !important; background: var(--tl-green) !important; color: var(--tl-on) !important; border: 0 !important; box-shadow: var(--tl-press), var(--tl-glow) !important; }
html[data-theme="teal"] .btn-card-play-circle svg { fill: var(--tl-on) !important; width: 20px !important; height: 20px !important; }
html[data-theme="teal"] .game-thumb-fallback { background: var(--tl-sf2) !important; color: var(--tl-muted) !important; }

/* rails use the shared --rail-columns grid maths from catalog-theme.css */
html[data-theme="teal"] .app-shell .game-rail-section,
html[data-theme="teal"] .app-shell #sectionTopHits,
html[data-theme="teal"] .home-mode #sectionTopHits { --rail-columns: 6 !important; --rail-gap: 16px !important; }
html[data-theme="teal"] .home-mode #topHitsRail .game-card:nth-child(n+5) { display: flex !important; }
@media (min-width: 901px) and (max-width: 1180px) {
  html[data-theme="teal"] .app-shell .game-rail-section,
  html[data-theme="teal"] .app-shell #sectionTopHits,
  html[data-theme="teal"] .home-mode #sectionTopHits { --rail-columns: 5 !important; }
}
@media (max-width: 900px) {
  html[data-theme="teal"] .app-shell .game-rail-section,
  html[data-theme="teal"] .app-shell #sectionTopHits,
  html[data-theme="teal"] .home-mode #sectionTopHits { --rail-columns: 3.15 !important; --rail-gap: 8px !important; }
}
@media (min-width: 901px) {
  html[data-theme="teal"] .app-shell { padding: 28px 32px 64px !important; max-width: none !important; }
  html[data-theme="teal"] .games-rail-scroll { gap: 16px !important; scroll-padding: 0; }
  html[data-theme="teal"] .games-rail-scroll > .game-card { flex: 0 0 calc((100% - 80px) / 6) !important; width: calc((100% - 80px) / 6) !important; min-width: 0 !important; max-width: none !important; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  html[data-theme="teal"] .tl-hero p, html[data-theme="teal"] .tl-hero .tl-btn-s { display: none; }
  html[data-theme="teal"] .tl-hero-tx { max-width: 50%; left: 32px; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  html[data-theme="teal"] .games-rail-scroll > .game-card { flex-basis: calc((100% - 64px) / 5) !important; width: calc((100% - 64px) / 5) !important; }
}
html[data-theme="teal"] #mainGamesGrid, html[data-theme="teal"] .games-grid, html[data-theme="teal"] #searchModalGrid { gap: 16px !important; }

/* ---------- casino + live pages (lobby-pages.js) ---------- */
html[data-theme="teal"] .px-toolbar { gap: 14px !important; }
html[data-theme="teal"] .px-search,
html[data-theme="teal"] .px-prov-btn { height: 44px !important; border-radius: 8px !important; background: var(--tl-field) !important; border: 1px solid var(--tl-fieldline) !important; box-shadow: none !important; }
html[data-theme="teal"] .px-search:focus-within, html[data-theme="teal"] .px-prov-btn:hover, html[data-theme="teal"] .px-prov-btn[aria-expanded="true"] { border-color: rgba(0, 177, 117, .55) !important; }
html[data-theme="teal"] .px-search svg { color: var(--tl-icon) !important; }
html[data-theme="teal"] .px-search input { color: #FFFFFF !important; font-weight: 600 !important; }
html[data-theme="teal"] .px-search input::placeholder { color: var(--tl-icon) !important; }
html[data-theme="teal"] .px-search-clear { color: var(--tl-green) !important; }
html[data-theme="teal"] .px-prov-btn { color: #FFFFFF !important; }
html[data-theme="teal"] .px-prov-btn > .tl-ic { width: 18px; height: 18px; color: var(--tl-icon); }
html[data-theme="teal"] .px-prov-btn .px-caret { color: var(--tl-green) !important; }
html[data-theme="teal"] .px-prov-menu { background: var(--tl-sf) !important; border: 1px solid var(--tl-fieldline) !important; box-shadow: 0 16px 40px rgba(0, 8, 14, .6) !important; backdrop-filter: none !important; }
html[data-theme="teal"] .px-chips { gap: 6px !important; }
html[data-theme="teal"] .px-chip {
  height: 40px !important; padding: 0 14px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; background-image: none !important;
  color: var(--tl-muted) !important; font-weight: 700 !important; box-shadow: none !important;
}
html[data-theme="teal"] .px-chip svg { width: 18px !important; height: 18px !important; color: var(--tl-icon) !important; fill: currentColor !important; }
html[data-theme="teal"] .px-chip .tl-cut { fill: var(--tl-bg) !important; }
html[data-theme="teal"] .px-chip:hover, html[data-theme="teal"] .px-chip.is-active { background: var(--tl-sf) !important; color: #FFFFFF !important; }
html[data-theme="teal"] .px-chip:hover .tl-cut, html[data-theme="teal"] .px-chip.is-active .tl-cut { fill: var(--tl-sf) !important; }
html[data-theme="teal"] .px-chip.is-active svg { color: var(--tl-green) !important; }
html[data-theme="teal"] .px-sec-title h2 { font-family: 'Manrope', sans-serif !important; letter-spacing: -.005em !important; }
html[data-theme="teal"] .px-sec-title .tl-logo-ic { width: 40px !important; height: 40px !important; border-radius: 10px !important; background: var(--tl-sf) !important; border: 0 !important; }
html[data-theme="teal"] .px-viewall {
  height: 38px !important; padding: 0 20px !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important;
  background: var(--tl-green) !important; color: var(--tl-on) !important; font-size: 14px !important; font-weight: 800 !important; box-shadow: var(--tl-press), var(--tl-glow) !important;
}
html[data-theme="teal"] .px-viewall:hover { background: var(--tl-green-h) !important; color: var(--tl-on) !important; }
html[data-theme="teal"] .px-sec-actions { gap: 10px !important; }
html[data-theme="teal"] .px-sec-actions .px-arrows { order: -1; gap: 8px !important; }
html[data-theme="teal"] .px-arrows button:disabled { opacity: .4 !important; }
html[data-theme="teal"] .px-sec { --px-cols: 6 !important; --px-gap: 16px !important; }
html[data-theme="teal"] .px-sec.is-grid .px-track { row-gap: 16px !important; }
html[data-theme="teal"] .px-more-line { background: linear-gradient(90deg, transparent, #0C3443 55%, rgba(0, 177, 117, .45)) !important; }
html[data-theme="teal"] .px-more-line.is-end { background: linear-gradient(270deg, transparent, #0C3443 55%, rgba(0, 177, 117, .45)) !important; }
html[data-theme="teal"] .px-more-btn, html[data-theme="teal"] .px-less-btn { height: 40px !important; border-radius: 10px !important; border: 0 !important; background: var(--tl-sf) !important; background-image: none !important; color: #FFFFFF !important; font-weight: 800 !important; box-shadow: none !important; }
html[data-theme="teal"] .px-more-btn:hover:not(:disabled), html[data-theme="teal"] .px-less-btn:hover { background: var(--tl-sf3) !important; color: var(--tl-green) !important; transform: none !important; }
html[data-theme="teal"] .px-more-bar i { background: var(--tl-green) !important; }
html[data-theme="teal"] .px-skel-card, html[data-theme="teal"] .px-skel { background: var(--tl-sf) !important; border-radius: 10px !important; }
html[data-theme="teal"] .px-empty { color: var(--tl-muted) !important; }
@media (min-width: 901px) and (max-width: 1180px) { html[data-theme="teal"] .px-sec { --px-cols: 5 !important; } }
@media (max-width: 900px) {
  html[data-theme="teal"] .px-sec { --px-cols: 3 !important; --px-gap: 8px !important; }
  html[data-theme="teal"] .px-sec:not(.is-grid) .px-track > .game-card { flex-basis: calc((100% - 16px) / 3.15) !important; width: calc((100% - 16px) / 3.15) !important; }
  html[data-theme="teal"] .px-viewall { height: 32px !important; padding: 0 14px !important; font-size: 13px !important; }
  html[data-theme="teal"] .px-sec-title .tl-logo-ic { width: 34px !important; height: 34px !important; }
}

/* ---------- providers + latest bets ---------- */
html[data-theme="teal"] .px-ptile { background: var(--tl-sf) !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; }
html[data-theme="teal"] .px-ptile:hover { background: var(--tl-sf3) !important; }
html[data-theme="teal"] .px-ptile img { filter: none !important; opacity: 1 !important; }
html[data-theme="teal"] .px-bets-table { background: var(--tl-sf) !important; border: 0 !important; border-radius: 16px !important; overflow: hidden; box-shadow: none !important; }
html[data-theme="teal"] .px-bets-row { border-color: #0A3442 !important; }
html[data-theme="teal"] .px-bets-row.is-head { background: var(--tl-sf) !important; color: var(--tl-muted) !important; }
html[data-theme="teal"] .px-c-num.is-win { color: var(--tl-green) !important; }
html[data-theme="teal"] .px-bets-dot { background: var(--tl-green) !important; box-shadow: none !important; }


/* ---------- footer ---------- */
html[data-theme="teal"] .app-footer { background: var(--tl-bg) !important; border-top: 1px solid var(--tl-line) !important; }
html[data-theme="teal"] .pxf-brand img { height: 30px !important; width: auto !important; filter: none !important; }
html[data-theme="teal"] .pxf-col h5 { color: #FFFFFF !important; }
html[data-theme="teal"] .pxf-col button, html[data-theme="teal"] .pxf-col a { color: var(--tl-muted) !important; }
html[data-theme="teal"] .pxf-col button:hover, html[data-theme="teal"] .pxf-col a:hover { color: #FFFFFF !important; }

/* ---------- phone ---------- */
@media (max-width: 900px) {
  html[data-theme="teal"] #mobileNavigationSlot { display: none !important; }
  html[data-theme="teal"] .mobile-menu-toggle { display: none !important; }
  html[data-theme="teal"] body .mobile-nav-backdrop { background: rgba(0, 10, 16, .72) !important; }
  html[data-theme="teal"] .top-header { background: var(--tl-bg) !important; border: 0 !important; box-shadow: none !important; height: 60px !important; min-height: 60px !important; padding: 0 14px !important; position: relative !important; top: auto !important; }
  html[data-theme="teal"] .top-header .brand-logo-img { height: 28px !important; }
  html[data-theme="teal"] body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
  html[data-theme="teal"] .site-sidebar.gold-sidebar { background: var(--tl-bg) !important; width: min(320px, 88vw) !important; border-right: 1px solid var(--tl-line) !important; }
  html[data-theme="teal"] .tl-sb-top { padding-top: env(safe-area-inset-top, 0px); }
  html[data-theme="teal"] .tl-ham { display: none; }
  html[data-theme="teal"] .gold-sidebar .navigation-scroll { padding: 16px 14px calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
  html[data-theme="teal"] .gold-sidebar .sidebar-item.tl-item, html[data-theme="teal"] .tl-grp { height: 44px !important; min-height: 44px !important; font-size: 15px !important; }
  html[data-theme="teal"] .tl-hero { height: auto; aspect-ratio: 2 / 1; border-radius: 14px; }
  html[data-theme="teal"] .tl-hero img { object-position: 100% 50%; }
  html[data-theme="teal"] .tl-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000D14 0%, rgba(0, 13, 20, .85) 34%, rgba(0, 13, 20, 0) 60%); }
  html[data-theme="teal"] .tl-hero-tx { left: 16px; max-width: 54%; z-index: 1; }
  html[data-theme="teal"] .tl-hero h1 { font-size: 21px; margin: 8px 0 12px; }
  html[data-theme="teal"] .tl-hero p, html[data-theme="teal"] .tl-hero .tl-btn-s { display: none; }
  html[data-theme="teal"] .tl-hero .tl-btn-lg { height: 38px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
  html[data-theme="teal"] .tl-eb { font-size: 10px; }
  html[data-theme="teal"] .rail-title-box, html[data-theme="teal"] .rail-title-box span, html[data-theme="teal"] .reference-home-title, html[data-theme="teal"] .px-sec-title h2 { font-size: 17px !important; }
  html[data-theme="teal"] .tl-ttl-ic .tl-ic { width: 21px; height: 21px; }
  html[data-theme="teal"] .rail-nav-buttons, html[data-theme="teal"] .home-mode #sectionTopHits .rail-nav-buttons, html[data-theme="teal"] .px-arrows { display: none !important; }
  html[data-theme="teal"] .rail-see-all-action { height: 32px !important; padding: 0 14px !important; font-size: 13px !important; }
  html[data-theme="teal"] .games-rail-scroll { gap: 8px !important; }
  html[data-theme="teal"] .games-rail-scroll > .game-card { flex: 0 0 calc((100% - 16px) / 3.15) !important; width: calc((100% - 16px) / 3.15) !important; min-width: 0 !important; }
}

/* Gamdom-style bottom bar */
html[data-theme="teal"] .tl-bbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 245; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  height: calc(68px + env(safe-area-inset-bottom, 0px)); padding: 0 4px env(safe-area-inset-bottom, 0px);
  background: var(--tl-bg); border-top: 1px solid var(--tl-line);
}
html[data-theme="teal"] .tl-bbar button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--tl-muted); font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 0; min-width: 0; -webkit-tap-highlight-color: transparent; }
html[data-theme="teal"] .tl-bbar .tl-ic { width: 24px; height: 24px; color: var(--tl-muted); }
html[data-theme="teal"] .tl-bbar .tl-cut { fill: var(--tl-side); }
html[data-theme="teal"] .tl-bbar button.is-on { color: #FFFFFF; }
html[data-theme="teal"] .tl-bbar button.is-on .tl-ic { color: var(--tl-green); filter: none; }
html[data-theme="teal"] .tl-bbar button:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="teal"] *, html[data-theme="teal"] *::before, html[data-theme="teal"] *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- no glow anywhere (flat look) ---------- */
html[data-theme="teal"] .btn-header-deposit, html[data-theme="teal"] .btn-header-register,
html[data-theme="teal"] .rail-see-all-action, html[data-theme="teal"] .px-viewall,
html[data-theme="teal"] .btn-card-play-circle, html[data-theme="teal"] .tl-btn-g,
html[data-theme="teal"] .tl-seg button.is-on, html[data-theme="teal"] .wallet-pill.px-wallet,
html[data-theme="teal"] .pxa-auth-card button, html[data-theme="teal"] .pxa-auth-card .pxa-btn { box-shadow: none !important; text-shadow: none !important; filter: none !important; }

/* ---------- home: search + providers in the "Top games right now" row (desktop) ---------- */
html[data-theme="teal"] .rail-header-line { display: flex !important; gap: 12px !important; }
html[data-theme="teal"] .rail-header-line > .rail-title-box { flex: none; }
html[data-theme="teal"] .search-providers-bar.tl-inline-search { order: 0 !important; margin: 0 0 0 auto !important; flex: 0 1 420px; min-width: 220px; display: flex !important; gap: 10px !important; }
html[data-theme="teal"] .tl-inline-search .search-box-field { flex: 1; min-width: 0; height: 40px !important; }
html[data-theme="teal"] .tl-inline-search .providers-dropdown-btn { height: 40px !important; flex: none; }
html[data-theme="teal"] .rail-header-line:has(.tl-inline-search) .rail-actions-box { margin-left: 0 !important; }
@media (min-width: 901px) and (max-width: 1280px) {
  html[data-theme="teal"] .home-mode #sectionTopHits .rail-header-line:has(.tl-inline-search) .rail-nav-buttons { display: none !important; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  html[data-theme="teal"] .tl-inline-search .provider-button-label { display: none; }
}
/* phones: search bar sits under the banner, above "Top games right now" */
@media (max-width: 900px) {
  html[data-theme="teal"] .home-mode .search-providers-bar { order: 0 !important; margin-top: 0 !important; }
}

/* ==========================================================================
   v3 – Stake-style frame (user request 4 Oct)
   · header sticky again, same colour as the page, nav tabs inside it
     (Lobby · Slots · Live casino · Sports); category pills row hidden on desktop
   · content max 1500px wide, centred; header lines up with it
   · Stake tile sizes: 8 per row on a 1500px row (~171px), fewer on smaller screens,
     exactly 3 per row on phones
   · phones: P mark only, balance centred, bell + account on the right;
     Lobby/Slots/Live row sits under the banner; search row removed (Search is in the bottom bar)
   ========================================================================== */
html[data-theme="teal"] body { --tl-cols: 5; --tl-gap: 16px; }
@media (min-width: 901px) {
  html[data-theme="teal"] body { --tl-pad: max(32px, calc((100vw - var(--tl-sbw) - 1500px) / 2)); }
  html[data-theme="teal"] .app-shell { padding: 24px var(--tl-pad) 64px !important; }
  html[data-theme="teal"] .app-footer .pxf-wrap, html[data-theme="teal"] .app-footer > div:first-child { max-width: 1500px; margin-left: auto !important; margin-right: auto !important; }
  html[data-theme="teal"] .top-header {
    position: sticky !important; top: 0 !important; z-index: 120 !important;
    padding: 0 var(--tl-pad) !important; background: var(--tl-bg) !important; box-shadow: none !important;
    display: flex !important; align-items: center !important; gap: 28px !important;
  }
  html[data-theme="teal"] .top-header .top-nav-tabs { display: flex !important; align-items: center; gap: 4px !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; flex: 1 1 auto; min-width: 0; }
  html[data-theme="teal"] .top-header .header-right { margin-left: auto !important; }
  html[data-theme="teal"] #categoryPillsBar { display: none !important; }
  /* columns by available width (sidebar open 248px / folded 76px, 32px side padding) */
  html[data-theme="teal"] body { --tl-cols: 5; }
}
@media (min-width: 1212px) { html[data-theme="teal"] body { --tl-cols: 6; } }
@media (min-width: 1412px) { html[data-theme="teal"] body { --tl-cols: 7; } }
@media (min-width: 1612px) { html[data-theme="teal"] body { --tl-cols: 8; } }
@media (min-width: 1040px) { html[data-theme="teal"] body.nav-compact { --tl-cols: 6; } }
@media (min-width: 1240px) { html[data-theme="teal"] body.nav-compact { --tl-cols: 7; } }
@media (min-width: 1440px) { html[data-theme="teal"] body.nav-compact { --tl-cols: 8; } }
@media (max-width: 900px) { html[data-theme="teal"] body, html[data-theme="teal"] body.nav-compact { --tl-cols: 3; --tl-gap: 8px; } }

html[data-theme="teal"] .app-shell .game-rail-section,
html[data-theme="teal"] .app-shell #sectionTopHits,
html[data-theme="teal"] .home-mode #sectionTopHits { --rail-columns: var(--tl-cols) !important; --rail-gap: var(--tl-gap) !important; }
html[data-theme="teal"] .px-sec { --px-cols: var(--tl-cols) !important; --px-gap: var(--tl-gap) !important; }
html[data-theme="teal"] .app-shell .games-rail-scroll { gap: var(--tl-gap) !important; }
html[data-theme="teal"] .app-shell .games-rail-scroll > .game-card,
html[data-theme="teal"] .px-sec:not(.is-grid) .px-track > .game-card {
  flex: 0 0 calc((100% - (var(--tl-cols) - 1) * var(--tl-gap)) / var(--tl-cols)) !important;
  width: calc((100% - (var(--tl-cols) - 1) * var(--tl-gap)) / var(--tl-cols)) !important;
  min-width: 0 !important; max-width: none !important;
}
html[data-theme="teal"] #mainGamesGrid, html[data-theme="teal"] .games-grid, html[data-theme="teal"] #searchModalGrid { gap: var(--tl-gap) !important; }
html[data-theme="teal"] .game-thumb-box { border-radius: 8px !important; }
html[data-theme="teal"] .game-card { border-radius: 8px !important; }

/* banner keeps the image's own shape as the row gets wider */
@media (min-width: 901px) {
  html[data-theme="teal"] .tl-hero { height: auto !important; aspect-ratio: 3.76 / 1; min-height: 250px; max-height: 400px; }
}

/* header nav tabs */
html[data-theme="teal"] .top-nav-tabs .top-tab-item {
  height: 40px !important; padding: 0 14px !important; border: 0 !important; border-radius: 10px !important;
  background: transparent !important; background-image: none !important; box-shadow: none !important;
  color: var(--tl-muted) !important; font-weight: 700 !important; font-size: 14px !important;
  display: inline-flex !important; align-items: center !important; gap: 8px !important; cursor: pointer; white-space: nowrap;
}
html[data-theme="teal"] .top-nav-tabs .top-tab-item .nav-tab-ico { display: none !important; }
html[data-theme="teal"] .top-nav-tabs .top-tab-item .tl-ic { width: 18px; height: 18px; color: var(--tl-icon); }
html[data-theme="teal"] .top-nav-tabs .top-tab-item:hover { background: var(--tl-sf) !important; color: #FFFFFF !important; }
html[data-theme="teal"] .top-nav-tabs .top-tab-item.active { background: var(--tl-sf) !important; color: #FFFFFF !important; }
html[data-theme="teal"] .top-nav-tabs .top-tab-item.active .tl-ic { color: var(--tl-green); }
html[data-theme="teal"] .top-nav-tabs .top-tab-item::before, html[data-theme="teal"] .top-nav-tabs .top-tab-item::after { display: none !important; }

/* Game shows / Table games left out of the quick row (still in the sidebar) */
html[data-theme="teal"] #categoryPillsBar .cat-pill-item[data-pill-cat="shows"],
html[data-theme="teal"] #categoryPillsBar .cat-pill-item[data-pill-cat="table"] { display: none !important; }

/* header mark (phones) */
html[data-theme="teal"] .tl-mark { display: none; }

@media (max-width: 900px) {
  html[data-theme="teal"] .top-header { position: sticky !important; top: 0 !important; z-index: 120 !important; }
  html[data-theme="teal"] .top-header .brand-logo-img { display: none !important; }
  html[data-theme="teal"] .tl-mark { display: block; height: 34px; width: 34px; }
  html[data-theme="teal"] .top-header .header-right { flex: 1 1 auto; justify-content: flex-end; gap: 4px !important; }
  html[data-theme="teal"] .top-header .wallet-pill.px-wallet { position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0 !important; }
  html[data-theme="teal"] .top-header .header-notification-btn { display: grid !important; }
  /* home: Lobby/Slots/Live row under the banner, no search row */
  html[data-theme="teal"] .home-mode .search-providers-bar { display: none !important; }
  html[data-theme="teal"] .home-mode #categoryPillsBar { order: 0 !important; margin-top: 0 !important; }
  html[data-theme="teal"] #categoryPillsBar { box-sizing: border-box !important; width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; overflow-x: auto !important; scrollbar-width: none; }
  html[data-theme="teal"] .app-shell { padding-left: 12px !important; padding-right: 12px !important; }
}
html[data-theme="teal"] .px-view[data-view="casino"] .px-chip[data-chip="shows"],
html[data-theme="teal"] .px-view[data-view="casino"] .px-chip[data-chip="table"] { display: none !important; }

/* ==========================================================================
   v4 – Pigmo-style frame (user request 6 Oct)
   · content max 1200px wide (1248px with 24px side padding), centred;
     with the sidebar folded the extra width stays empty dark page on both sides
   · every rail uses one tile size: 8 per row with 8px gaps on desktop,
     fewer on narrower screens, 3 per row on phones (the 4th peeks in)
   · new "Originals" rail (Plixwin's own games, /originals/...)
   ========================================================================== */
@media (min-width: 901px) {
  html[data-theme="teal"] body { --tl-pad: max(24px, calc((100vw - var(--tl-sbw) - 1200px) / 2)); }
  html[data-theme="teal"] .app-footer .pxf-wrap, html[data-theme="teal"] .app-footer > div:first-child { max-width: 1200px; }
}
/* columns: sidebar open (248px) */
html[data-theme="teal"] body { --tl-cols: 5; --tl-gap: 8px; }
@media (min-width: 1080px) { html[data-theme="teal"] body { --tl-cols: 6; } }
@media (min-width: 1180px) { html[data-theme="teal"] body { --tl-cols: 7; } }
@media (min-width: 1300px) { html[data-theme="teal"] body { --tl-cols: 8; } }
/* columns: sidebar folded (76px) */
html[data-theme="teal"] body.nav-compact { --tl-cols: 6; }
@media (min-width: 1010px) { html[data-theme="teal"] body.nav-compact { --tl-cols: 7; } }
@media (min-width: 1130px) { html[data-theme="teal"] body.nav-compact { --tl-cols: 8; } }
/* phones: 3 tiles, 8px gaps, 16px page edge; the rail runs to the screen edge so the next tile peeks in */
@media (max-width: 900px) {
  html[data-theme="teal"] body, html[data-theme="teal"] body.nav-compact { --tl-cols: 3; --tl-gap: 8px; }
  html[data-theme="teal"] .app-shell { padding-left: 16px !important; padding-right: 16px !important; }
  html[data-theme="teal"] .app-shell .games-rail-scroll { width: auto !important; max-width: none !important; margin-right: -16px !important; padding-right: 16px !important; scroll-padding-left: 0 !important; }
}
html[data-theme="teal"] .game-card, html[data-theme="teal"] .game-thumb-box { border-radius: 8px !important; }
html[data-theme="teal"] #mainGamesGrid, html[data-theme="teal"] .games-grid, html[data-theme="teal"] #searchModalGrid { gap: var(--tl-gap) !important; }

/* Originals rail */
body.home-mode #sectionOriginals, body.casino-mode #sectionOriginals { order: 1; }
html[data-theme="teal"] a.game-card.px-original-card { display: flex !important; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; }
html[data-theme="teal"] .px-original-card .game-thumb-img { display: block; }
html[data-theme="teal"] #sectionOriginals a.rail-see-all-action { text-decoration: none; display: inline-flex; align-items: center; }

/* ==========================================================================
   v5 – home (user request 6 Oct)
   · Casino (teal) + Sports (grey) picture cards under the banner, title only, no animation
   · Plixwin Originals first, then Trending now, then a clean Live wins strip
   · "View All" buttons: dark pill, white text
   ========================================================================== */
.px-cat-cards, .px-wins { display: none; }
html[data-theme="teal"] body.home-mode .px-cat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
html[data-theme="teal"] .px-cat-card {
  position: relative; display: block; width: 100%; aspect-ratio: 3.2 / 1; min-height: 170px; padding: 0; border: 0; border-radius: 18px; overflow: hidden;
  cursor: pointer; text-align: left; color: #FFFFFF; font: inherit; isolation: isolate;
}
html[data-theme="teal"] .px-cat-card::before { content: ""; position: absolute; inset: 0; z-index: -2; }
html[data-theme="teal"] .px-cat-card::after { content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; right: -18%; top: -55%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0)); }
html[data-theme="teal"] .px-cat-card.is-casino::before { background: linear-gradient(135deg, #3BE38A 0%, #12C46F 45%, #00A866 100%); }
html[data-theme="teal"] .px-cat-card.is-sports::before { background: linear-gradient(135deg, #5DB3FF 0%, #3B8FF6 50%, #2A6FE0 100%); }
html[data-theme="teal"] .px-cat-tx { position: absolute; left: 28px; top: 24px; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
html[data-theme="teal"] .px-cat-tx strong { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.02em; line-height: 1; }
html[data-theme="teal"] .px-cat-tx small { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .85); }
html[data-theme="teal"] .px-cat-btn { position: absolute; left: 28px; bottom: 24px; z-index: 1; height: 36px; padding: 0 16px; border-radius: 10px; display: inline-flex; align-items: center;
  background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); font-size: 13px; font-weight: 800; color: #FFFFFF; }
html[data-theme="teal"] .px-cat-card img { position: absolute; z-index: -1; right: 2%; top: 50%; transform: translateY(-50%); height: 112%; width: auto; max-width: 60%; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .22)); pointer-events: none; }
html[data-theme="teal"] .px-cat-card:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
/* desktop only: the corner glow scaled with the wide card and washed it out white – keep it small and soft; show the whole picture */
@media (min-width: 901px) {
  html[data-theme="teal"] .px-cat-card::after { width: 34%; right: -6%; top: -45%; background: radial-gradient(closest-side, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); }
  html[data-theme="teal"] .px-cat-card img { height: 94%; right: 3%; }
}
@media (max-width: 900px) {
  html[data-theme="teal"] body.home-mode .px-cat-cards { gap: 10px; }
  html[data-theme="teal"] .px-cat-card { aspect-ratio: 1.55 / 1; min-height: 0; border-radius: 14px; }
  html[data-theme="teal"] .px-cat-tx { left: 12px; top: 12px; gap: 3px; }
  html[data-theme="teal"] .px-cat-tx strong { font-size: 20px; }
  html[data-theme="teal"] .px-cat-tx small { font-size: 10.5px; }
  html[data-theme="teal"] .px-cat-btn { left: 12px; bottom: 11px; height: 26px; padding: 0 10px; border-radius: 7px; font-size: 11px; }
  html[data-theme="teal"] .px-cat-card img { right: -14%; top: auto; bottom: -6%; transform: none; height: 70%; max-width: 66%; }
}

/* order: Originals first, then Trending now, then live wins */
body.home-mode #sectionOriginals, body.casino-mode #sectionOriginals { order: 0; }
body.home-mode .px-wins { order: 1; }
@media (min-width: 901px) and (max-width: 1280px) {
  html[data-theme="teal"] .home-mode #sectionOriginals .rail-header-line:has(.tl-inline-search) .rail-nav-buttons { display: none !important; }
  html[data-theme="teal"] .home-mode #sectionTopHits .rail-nav-buttons { display: flex !important; }
}

/* View All: dark pill */
html[data-theme="teal"] .rail-see-all-action, html[data-theme="teal"] .px-viewall {
  height: 34px !important; padding: 0 14px !important; border-radius: 9px !important; border: 0 !important;
  background: #18242C !important; color: #FFFFFF !important; font-size: 13px !important; font-weight: 800 !important;
  box-shadow: none !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important;
}
html[data-theme="teal"] .rail-see-all-action:hover, html[data-theme="teal"] .px-viewall:hover { background: #213139 !important; color: #FFFFFF !important; }

/* live wins strip */
html[data-theme="teal"] body.home-mode .px-wins:not([hidden]) { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 6px 0 16px; border-radius: 12px; background: var(--tl-sf); overflow: hidden; }
html[data-theme="teal"] .px-wins-lbl { flex: none; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: #FFFFFF; }
html[data-theme="teal"] .px-wins-lbl i { width: 8px; height: 8px; border-radius: 50%; background: var(--tl-green); animation: pxPing 1.8s infinite; }
@keyframes pxPing { 0% { box-shadow: 0 0 0 0 rgba(0, 177, 117, .55); } 70% { box-shadow: 0 0 0 8px rgba(0, 177, 117, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 177, 117, 0); } }
html[data-theme="teal"] .px-wins-track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 40px), transparent); }
html[data-theme="teal"] .px-wins-row { display: flex; width: max-content; }
html[data-theme="teal"] .px-wins-row.is-moving { animation: pxMarquee 60s linear infinite; }
html[data-theme="teal"] .px-wins:hover .px-wins-row { animation-play-state: paused; }
@keyframes pxMarquee { to { transform: translateX(-50%); } }
html[data-theme="teal"] .px-win { display: flex; align-items: baseline; gap: 8px; padding: 0 18px; border-left: 1px solid rgba(150, 196, 214, .14); white-space: nowrap; font-size: 13px; }
html[data-theme="teal"] .px-win b { font-weight: 800; color: #FFFFFF; }
html[data-theme="teal"] .px-win span { color: var(--tl-muted); font-weight: 600; }
html[data-theme="teal"] .px-win em { font-style: normal; font-weight: 800; color: var(--tl-green); }
@media (prefers-reduced-motion: reduce) { html[data-theme="teal"] .px-wins-row.is-moving { animation: none; } }

/* ==========================================================================
   v6 – guest welcome banner (Stake-style, 6 Oct)
   · only for visitors who are not logged in (body.has-player hides it)
   · if a saved login exists it stays hidden until the profile check finishes
   · desktop: painted art with a centred sign-up box; phone: art on top, box below
   ========================================================================== */
.px-welcome { display: none; }
html[data-theme="teal"] body.home-mode:not(.has-player) .px-welcome { display: block; }
html[data-theme="teal"].px-has-token:not(.px-auth-ready) .px-welcome { display: none !important; }
html[data-theme="teal"] body.home-mode:not(.has-player) .px-welcome ~ .tl-hero { display: none !important; }
html[data-theme="teal"].px-has-token:not(.px-auth-ready) body.home-mode .px-welcome ~ .tl-hero { display: block !important; }

html[data-theme="teal"] .px-welcome { position: relative; overflow: hidden; border-radius: 16px; background: #071A22; margin: 0 0 8px; }
html[data-theme="teal"] .px-welcome-art { display: block; position: relative; aspect-ratio: 1000 / 484; overflow: hidden; }
html[data-theme="teal"] .px-welcome-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
html[data-theme="teal"] .px-welcome-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 26, 34, 0) 58%, #071A22 100%); }
html[data-theme="teal"] .px-welcome-box { position: relative; z-index: 2; padding: 4px 18px 22px; text-align: center; }
html[data-theme="teal"] .px-welcome-box h1 { margin: 0; font-family: 'Manrope', sans-serif !important; font-size: 24px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: #FFFFFF; }
html[data-theme="teal"] .px-welcome-box h1 em { font-style: normal; color: #2EE39A; }
html[data-theme="teal"] .px-welcome-box p { margin: 6px 0 16px; color: #B3C7D1; font-size: 13.5px; font-weight: 700; }
html[data-theme="teal"] .px-welcome-reg { display: block; width: 100%; height: 50px; border: 0; border-radius: 10px; background: var(--tl-green, #00B175); color: var(--tl-on, #00170E); font: 800 16px/1 'Manrope', sans-serif; cursor: pointer; box-shadow: 0 8px 22px rgba(0, 177, 117, .28); transition: filter .2s; }
html[data-theme="teal"] .px-welcome-reg:hover { filter: brightness(1.08); }
html[data-theme="teal"] .px-welcome-or { margin: 14px 0 10px; color: #8AA2AE; font-size: 13px; font-weight: 700; }
html[data-theme="teal"] .px-welcome-google { position: relative; display: flex; justify-content: center; min-height: 46px; }
html[data-theme="teal"] #pxWelcomeGoogle { display: none; }
html[data-theme="teal"] .px-welcome-google.is-ready #pxWelcomeGoogle { display: flex; justify-content: center; width: 100%; }
html[data-theme="teal"] .px-welcome-google.is-ready .px-welcome-gbtn { display: none; }
html[data-theme="teal"] .px-welcome-gbtn { width: 100%; height: 46px; border: 0; border-radius: 10px; background: #1A3C4B; color: #FFFFFF; display: flex; align-items: center; justify-content: center; gap: 10px; font: 800 14.5px/1 'Manrope', sans-serif; cursor: pointer; transition: background .2s; }
html[data-theme="teal"] .px-welcome-gbtn:hover { background: #22495A; }
html[data-theme="teal"] .px-welcome-gbtn svg { width: 20px; height: 20px; }
html[data-theme="teal"] .px-welcome-have { margin-top: 14px; color: #8AA2AE; font-size: 13px; font-weight: 600; }
html[data-theme="teal"] .px-welcome-have button { border: 0; background: none; padding: 0; color: #2EE39A; font: inherit; font-weight: 800; cursor: pointer; }
@media (min-width: 901px) {
  html[data-theme="teal"] .px-welcome { height: clamp(440px, 40vw, 520px); }
  html[data-theme="teal"] .px-welcome-art { position: absolute; inset: 0; aspect-ratio: auto; }
  html[data-theme="teal"] .px-welcome-art img { object-position: center 8%; }
  html[data-theme="teal"] .px-welcome-art::after { background: linear-gradient(180deg, rgba(7, 26, 34, 0) 34%, rgba(7, 26, 34, .6) 62%, rgba(7, 26, 34, .94) 100%); }
  html[data-theme="teal"] .px-welcome-box { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 420px; padding: 0; }
  html[data-theme="teal"] .px-welcome-box h1 { font-size: 34px; text-shadow: 0 4px 22px rgba(0, 0, 0, .55); }
  html[data-theme="teal"] .px-welcome-box p { text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
}
/* login / sign-up window: green game-cover poster ("Play. Win. Repeat.") */
html[data-theme="teal"] .pxa-auth-pic { display: block; width: 100%; height: 100%; }
html[data-theme="teal"] .pxa-auth-poster { object-position: 50% 30% !important; }
@media (max-width: 900px) { html[data-theme="teal"] .pxa-auth-poster { object-position: 50% 0 !important; } }
html[data-theme="teal"] .pxa-auth-card .pxa-auth-art { background: #00A46B !important; }
html[data-theme="teal"] .pxa-auth-card .pxa-auth-art::after { display: none !important; }

/* phones: lighter shade on the welcome picture */
@media (max-width: 900px) {
  html[data-theme="teal"] .px-welcome-art::after { background: linear-gradient(180deg, rgba(7, 26, 34, 0) 82%, rgba(7, 26, 34, .85) 100%); }
  html[data-theme="teal"] .px-welcome-box { padding-top: 14px; }
}

/* ==========================================================================
   v7 – clean header for visitors (logged out): logo · search · Log in · Sign up
   after log in / sign up the normal header (balance, deposit, bell, account) returns
   ========================================================================== */
.px-search-lbl { display: none; }
html[data-theme="teal"]:is(:not(.px-has-token), .px-auth-ready) body:not(.has-player) .header-right .wallet-pill,
html[data-theme="teal"]:is(:not(.px-has-token), .px-auth-ready) body:not(.has-player) .header-right .header-notification-btn,
html[data-theme="teal"]:is(:not(.px-has-token), .px-auth-ready) body:not(.has-player) .header-right .header-account-btn { display: none !important; }
html[data-theme="teal"]:is(:not(.px-has-token), .px-auth-ready) body:not(.has-player) .header-right .guest-auth-actions { display: flex !important; align-items: center; gap: 8px; }
html[data-theme="teal"]:is(:not(.px-has-token), .px-auth-ready) body:not(.has-player) .guest-auth-actions .btn-header-login,
html[data-theme="teal"]:is(:not(.px-has-token), .px-auth-ready) body:not(.has-player) .guest-auth-actions .btn-header-register {
  display: inline-flex !important; align-items: center; justify-content: center; height: 40px !important; padding: 0 18px !important; border-radius: 10px !important;
  font: 800 14px/1 'Manrope', sans-serif !important; white-space: nowrap; border: 0 !important; box-shadow: none !important;
}
html[data-theme="teal"]:is(:not(.px-has-token), .px-auth-ready) body:not(.has-player) .guest-auth-actions .btn-header-login { background: #1A3C4B !important; color: #FFFFFF !important; }
html[data-theme="teal"]:is(:not(.px-has-token), .px-auth-ready) body:not(.has-player) .guest-auth-actions .btn-header-register { background: var(--tl-green) !important; color: var(--tl-on) !important; }
@media (min-width: 901px) {
  html[data-theme="teal"]:is(:not(.px-has-token), .px-auth-ready) body:not(.has-player) .top-header .top-nav-tabs { display: none !important; }
  html[data-theme="teal"]:is(:not(.px-has-token), .px-auth-ready) body:not(.has-player) .top-header .header-right { flex: 1 1 auto; margin-left: 8px !important; }
  html[data-theme="teal"]:is(:not(.px-has-token), .px-auth-ready) body:not(.has-player) .header-right .btn-search-trigger {
    display: flex !important; order: -1; margin-right: auto !important; width: min(340px, 34vw) !important; height: 40px !important; padding: 0 14px !important; gap: 10px;
    justify-content: flex-start !important; align-items: center; border-radius: 10px !important; background: var(--tl-sf) !important; border: 1px solid rgba(150, 196, 214, .1) !important; color: var(--tl-muted) !important;
  }
  html[data-theme="teal"]:is(:not(.px-has-token), .px-auth-ready) body:not(.has-player) .btn-search-trigger .px-search-lbl { display: inline; font: 600 14px/1 'Manrope', sans-serif; }
}
@media (max-width: 900px) {
  html[data-theme="teal"]:is(:not(.px-has-token), .px-auth-ready) body:not(.has-player) .guest-auth-actions .btn-header-login,
  html[data-theme="teal"]:is(:not(.px-has-token), .px-auth-ready) body:not(.has-player) .guest-auth-actions .btn-header-register { height: 38px !important; padding: 0 14px !important; font-size: 13.5px !important; }
}

/* ==========================================================================
   v8 – phones (6 Oct): welcome banner like desktop (text on the picture, light shade);
   login window: full green "Play. Win. Repeat." card on top, no dark shade
   ========================================================================== */
@media (max-width: 900px) {
  html[data-theme="teal"] .px-welcome { min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; }
  html[data-theme="teal"] body.home-mode:not(.has-player) .px-welcome { display: flex; }
  html[data-theme="teal"] .px-welcome-art { position: absolute; inset: 0; aspect-ratio: auto; }
  html[data-theme="teal"] .px-welcome-art img { object-position: center top; }
  html[data-theme="teal"] .px-welcome-art::after { background: linear-gradient(180deg, rgba(7, 26, 34, 0) 48%, rgba(7, 26, 34, .45) 66%, rgba(7, 26, 34, .82) 100%); }
  html[data-theme="teal"] .px-welcome-box { padding: 0 16px 18px; }
  html[data-theme="teal"] .px-welcome-box h1 { font-size: 26px; text-shadow: 0 3px 16px rgba(0, 0, 0, .6); }
  html[data-theme="teal"] .px-welcome-box p { margin: 6px 0 14px; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); color: #DDE9EE; }
  html[data-theme="teal"] .px-welcome-or { color: #C3D3DA; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
  html[data-theme="teal"] .px-welcome-gbtn { background: rgba(19, 48, 61, .9); }
  html[data-theme="teal"] .px-welcome-have { color: #C3D3DA; }

  html[data-theme="teal"] .pxa-auth-card .pxa-auth-art { height: auto !important; aspect-ratio: 1020 / 600; flex: none; }
  html[data-theme="teal"] .pxa-auth-card .pxa-auth-art::after, html[data-theme="teal"] .pxa-auth-card .pxa-auth-art::before { display: none !important; background: none !important; }
  html[data-theme="teal"] .pxa-auth-poster { object-fit: cover; object-position: center !important; }
}

/* ==========================================================================
   v6 – home promo cards (user request 6 Oct)
   qzino-style row: gradient card, title, short text, button, square 3D icon.
   Card 336 x 188 ratio · radius 12 · gap 16 · 3 per row on desktop, 2 on
   tablet, 1 per view (swipe) on phones · dots under the row.
   ========================================================================== */
.px-promos { display: none; }
html[data-theme="teal"] body.home-mode .px-promos { display: block; position: relative; margin: 0; container-type: inline-size; }
html[data-theme="teal"] .px-promos-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
html[data-theme="teal"] .px-promos-track::-webkit-scrollbar { display: none; }
@container (min-width: 560px) { html[data-theme="teal"] .px-promos-track { grid-auto-columns: calc((100% - 16px) / 2); } }
@container (min-width: 880px) { html[data-theme="teal"] .px-promos-track { grid-auto-columns: calc((100% - 32px) / 3); } }

html[data-theme="teal"] .px-promo-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%;
  aspect-ratio: 336 / 188; min-height: 172px; margin: 0; padding: 20px; border: 0; border-radius: 12px; overflow: hidden; isolation: isolate;
  scroll-snap-align: start; cursor: pointer; text-align: left; text-decoration: none; color: #FFFFFF; font: inherit;
  background: linear-gradient(90deg, var(--pp-a) 0%, var(--pp-b) 48%, var(--pp-c) 100%);
}
html[data-theme="teal"] .px-promo-card::before {
  content: ""; position: absolute; z-index: -1; right: -12%; top: 50%; width: 72%; aspect-ratio: 1; transform: translateY(-50%);
  background: radial-gradient(closest-side, var(--pp-glow), transparent 72%); opacity: .5; pointer-events: none;
}
html[data-theme="teal"] .px-promo-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); pointer-events: none; }
html[data-theme="teal"] .px-promo-tx { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; max-width: 56%; }
html[data-theme="teal"] .px-promo-tx strong { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; color: #FFFFFF; }
html[data-theme="teal"] .px-promo-tx small { font-size: 12.5px; line-height: 1.45; font-weight: 600; color: rgba(240, 245, 248, .86); }
html[data-theme="teal"] .px-promo-btn {
  position: relative; z-index: 1; margin-top: auto; height: 36px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center;
  background: #0E1820; color: #EEF2F6; font-size: 14px; font-weight: 700; transition: background .2s var(--tl-ease), transform .15s var(--tl-ease);
}
html[data-theme="teal"] .px-promo-card img {
  position: absolute; z-index: 0; right: 20px; top: 50%; transform: translateY(-50%); height: 64%; width: auto; aspect-ratio: 1; max-width: 40%;
  object-fit: contain; border-radius: 16px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5), 0 12px 26px rgba(0, 0, 0, .38);
  transition: transform .25s var(--tl-ease); pointer-events: none;
}
@media (hover: hover) {
  html[data-theme="teal"] .px-promo-card:hover .px-promo-btn { background: #172631; transform: translateY(-1px); }
  html[data-theme="teal"] .px-promo-card:hover img { transform: translateY(-50%) scale(1.04) rotate(-1.5deg); }
}
html[data-theme="teal"] .px-promo-card:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

html[data-theme="teal"] .px-promo-card.is-mines     { --pp-a: #1F2130; --pp-b: #3A2244; --pp-c: #D4157C; --pp-glow: #FF3D9A; }
html[data-theme="teal"] .px-promo-card.is-boss      { --pp-a: #211F1C; --pp-b: #4A3418; --pp-c: #E09A12; --pp-glow: #FFC23D; }
html[data-theme="teal"] .px-promo-card.is-dino      { --pp-a: #1A1F30; --pp-b: #1F2F5C; --pp-c: #2F5FD0; --pp-glow: #FF8A3D; }
html[data-theme="teal"] .px-promo-card.is-wingo     { --pp-a: #1D1C2E; --pp-b: #33235E; --pp-c: #7A2FD6; --pp-glow: #A35CFF; }
html[data-theme="teal"] .px-promo-card.is-blackjack { --pp-a: #221C1E; --pp-b: #4A1C22; --pp-c: #C8202E; --pp-glow: #FF4A55; }
html[data-theme="teal"] .px-promo-card.is-affiliate { --pp-a: #18242A; --pp-b: #164A4A; --pp-c: #0FA892; --pp-glow: #FF8A3D; }

html[data-theme="teal"] .px-promos-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
html[data-theme="teal"] .px-promos-dots:empty { display: none; }
html[data-theme="teal"] .px-promos-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .22); cursor: pointer; transition: width .25s var(--tl-ease), background .25s var(--tl-ease); }
html[data-theme="teal"] .px-promos-dots button.is-on { width: 22px; background: var(--tl-green); }

@media (max-width: 600px) {
  html[data-theme="teal"] .px-promo-card { padding: 16px; min-height: 0; }
  html[data-theme="teal"] .px-promo-tx strong { font-size: 20px; }
  html[data-theme="teal"] .px-promo-tx small { font-size: 12px; }
  html[data-theme="teal"] .px-promo-btn { height: 34px; padding: 0 13px; font-size: 13.5px; }
  html[data-theme="teal"] .px-promo-card img { right: 16px; height: 66%; }
}


/* ==========================================================================
   v7 – game banners slider (Dragon Tower, Drop the Cop, Dino, Win Go – 16:9, 6 Oct)
   · Shuffle-style: 3 per view on desktop, 2 on tablets, 1 per swipe on phones · dots underneath
   · the old "Spin the best slots" banner and the promo-cards row were removed
   ========================================================================== */
.px-gbanners { display: none; }
/* game banners: Slots page only (moved into the casino view by theme-teal.js), not on the home page */
html[data-theme="teal"] body.px-slots-page .px-view[data-view="casino"] .px-gbanners { display: block; margin: 0 0 20px; }
html[data-theme="teal"] .px-gbanners-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
html[data-theme="teal"] .px-gbanners-track::-webkit-scrollbar { display: none; }
html[data-theme="teal"] .px-gbanner { display: block; position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #071A22; scroll-snap-align: start; }
html[data-theme="teal"] .px-gbanner picture, html[data-theme="teal"] .px-gbanner img { display: block; width: 100%; height: 100%; }
html[data-theme="teal"] button.px-gbanner { width: 100%; padding: 0; border: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; }
html[data-theme="teal"] .px-gbanner img { object-fit: cover; transition: transform .35s var(--tl-ease, ease); }
@media (hover: hover) { html[data-theme="teal"] .px-gbanner:hover img { transform: scale(1.025); } }
html[data-theme="teal"] .px-gbanners-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
html[data-theme="teal"] .px-gbanners-dots:empty { display: none; }
html[data-theme="teal"] .px-gbanners-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .22); cursor: pointer; transition: width .25s var(--tl-ease, ease), background .25s var(--tl-ease, ease); }
html[data-theme="teal"] .px-gbanners-dots button.is-on { width: 22px; background: var(--tl-green); }
@media (max-width: 1023px) {
  html[data-theme="teal"] .px-gbanners-track { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 700px) {
  html[data-theme="teal"] .px-gbanners-track { grid-auto-columns: 92%; gap: 10px; }
  html[data-theme="teal"] .px-gbanner { border-radius: 14px; }
}


/* ==========================================================================
   v6 Casino Sports picture cards (user request 7 Oct)
   same 777 slot + sports balls, softer art, Sports now indigo
   desktop: wide picture; phones (2 small cards side by side): own crop
   ========================================================================== */
html[data-theme="teal"] .px-cat-card img, html[data-theme="teal"] .px-cat-card::after { display: none; }
html[data-theme="teal"] .px-cat-card { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); }
html[data-theme="teal"] .px-cat-card.is-casino::before { background: linear-gradient(90deg, rgba(0, 0, 0, .20), rgba(0, 0, 0, 0) 55%), url(/img/cards/home-casino-bg.webp?v=1) right center / cover no-repeat, #0D8A60; }
html[data-theme="teal"] .px-cat-card.is-sports::before { background: linear-gradient(90deg, rgba(0, 0, 0, .20), rgba(0, 0, 0, 0) 55%), url(/img/cards/home-sports-bg.webp?v=1) right center / cover no-repeat, #4436B0; }
html[data-theme="teal"] .px-cat-tx strong { text-shadow: 0 2px 10px rgba(0, 0, 0, .20); }
html[data-theme="teal"] .px-cat-btn { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 900px) {
  html[data-theme="teal"] .px-cat-card.is-casino::before { background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 60%), url(/img/cards/home-casino-bg-m.webp?v=1) right bottom / cover no-repeat, #0D8A60; }
  html[data-theme="teal"] .px-cat-card.is-sports::before { background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 60%), url(/img/cards/home-sports-bg-m.webp?v=1) right bottom / cover no-repeat, #4436B0; }
}


/* ==========================================================================
   v7 Casino Sports 3D cards (user request 7 Oct)
   picture on top, dark bar below with icon + name + arrow (like Stake),
   Plixwin dark + teal green; overrides the v5/v6 card styles
   ========================================================================== */
html[data-theme="teal"] .px-cat-card { aspect-ratio: 1.9 / 1; min-height: 0; border-radius: 16px; background: #0F222C; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
html[data-theme="teal"] .px-cat-card img, html[data-theme="teal"] .px-cat-tx small, html[data-theme="teal"] .px-cat-btn { display: none; }
html[data-theme="teal"] .px-cat-card::before { inset: 0 0 56px 0; z-index: -1; background: #0B1A22 center / cover no-repeat; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); transition: filter .25s ease; }
html[data-theme="teal"] .px-cat-card.is-casino::before { background: url(/img/cards/home-casino-3d.webp?v=1) center / cover no-repeat, #0B1A22; }
html[data-theme="teal"] .px-cat-card.is-sports::before { background: url(/img/cards/home-sports-3d.webp?v=1) center / cover no-repeat, #0B1A22; }
html[data-theme="teal"] .px-cat-card::after { display: block; content: ""; position: absolute; z-index: 1; inset: auto 20px 18px auto; width: 20px; height: 20px; aspect-ratio: auto; border-radius: 0; transition: transform .2s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA6B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-theme="teal"] .px-cat-tx { left: 20px; right: 56px; top: auto; bottom: 0; height: 56px; flex-direction: row; align-items: center; gap: 0; }
html[data-theme="teal"] .px-cat-tx strong { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; letter-spacing: 0; line-height: 1; text-shadow: none; }
html[data-theme="teal"] .px-cat-tx strong::before { content: ""; flex: none; width: 20px; height: 20px; background: center / contain no-repeat; }
html[data-theme="teal"] .px-cat-card.is-casino .px-cat-tx strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='4.5' fill='%2310C98A'/%3E%3Cg fill='%230B1A22'%3E%3Ccircle cx='7.8' cy='7.8' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='16.2' cy='16.2' r='1.8'/%3E%3C/g%3E%3C/svg%3E"); }
html[data-theme="teal"] .px-cat-card.is-sports .px-cat-tx strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%2310C98A'/%3E%3Cpath d='M12 7.4l3.5 2.5-1.3 4.1H9.8L8.5 9.9z' fill='%230B1A22'/%3E%3Cpath d='M12 7.4V2.4M15.5 9.9l4.5-1.6M14.2 14l2.8 4M9.8 14L7 18M8.5 9.9L4 8.3' stroke='%230B1A22' stroke-width='1.5'/%3E%3C/svg%3E"); }
html[data-theme="teal"] .px-cat-card:hover::before { filter: brightness(1.08) saturate(1.05); }
html[data-theme="teal"] .px-cat-card:hover::after { transform: translateX(3px); filter: brightness(1.5); }
@media (max-width: 900px) {
  html[data-theme="teal"] .px-cat-card { aspect-ratio: 1.12 / 1; border-radius: 12px; }
  html[data-theme="teal"] .px-cat-card::before { inset: 0 0 40px 0; }
  html[data-theme="teal"] .px-cat-card.is-casino::before { background: url(/img/cards/home-casino-3d-m.webp?v=1) center / cover no-repeat, #0B1A22; }
  html[data-theme="teal"] .px-cat-card.is-sports::before { background: url(/img/cards/home-sports-3d-m.webp?v=1) center / cover no-repeat, #0B1A22; }
  html[data-theme="teal"] .px-cat-card::after { inset: auto 11px 12px auto; width: 16px; height: 16px; }
  html[data-theme="teal"] .px-cat-tx { left: 12px; right: 34px; height: 40px; }
  html[data-theme="teal"] .px-cat-tx strong { font-size: 14px; gap: 7px; }
  html[data-theme="teal"] .px-cat-tx strong::before { width: 16px; height: 16px; }
}


/* ==========================================================================
   v8 Casino Sports Stake-style cards (user request 7 Oct)
   picture on top, dark bar below with icon + name + arrow (like Stake),
   Plixwin dark + teal green; overrides the v5/v6/v7 card styles; casino = Thunder Zeus cover + Plixwin game tiles
   ========================================================================== */
html[data-theme="teal"] .px-cat-card { aspect-ratio: 1.9 / 1; min-height: 0; border-radius: 16px; background: #0F222C; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
html[data-theme="teal"] .px-cat-card img, html[data-theme="teal"] .px-cat-tx small, html[data-theme="teal"] .px-cat-btn { display: none; }
html[data-theme="teal"] .px-cat-card::before { inset: 0 0 56px 0; z-index: -1; background: #0B1A22 center / cover no-repeat; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); transition: filter .25s ease; }
html[data-theme="teal"] .px-cat-card.is-casino::before { background: url(/img/cards/home-casino-tiles.webp?v=1) center / cover no-repeat, #0B1A22; }
html[data-theme="teal"] .px-cat-card.is-sports::before { background: url(/img/cards/home-sports-stadium.webp?v=1) center / cover no-repeat, #0B1A22; }
html[data-theme="teal"] .px-cat-card::after { display: block; content: ""; position: absolute; z-index: 1; inset: auto 20px 18px auto; width: 20px; height: 20px; aspect-ratio: auto; border-radius: 0; transition: transform .2s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA6B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-theme="teal"] .px-cat-tx { left: 20px; right: 56px; top: auto; bottom: 0; height: 56px; flex-direction: row; align-items: center; gap: 0; }
html[data-theme="teal"] .px-cat-tx strong { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; letter-spacing: 0; line-height: 1; text-shadow: none; }
html[data-theme="teal"] .px-cat-tx strong::before { content: ""; flex: none; width: 20px; height: 20px; background: center / contain no-repeat; }
html[data-theme="teal"] .px-cat-card.is-casino .px-cat-tx strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='4.5' fill='%2310C98A'/%3E%3Cg fill='%230B1A22'%3E%3Ccircle cx='7.8' cy='7.8' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='16.2' cy='16.2' r='1.8'/%3E%3C/g%3E%3C/svg%3E"); }
html[data-theme="teal"] .px-cat-card.is-sports .px-cat-tx strong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%2310C98A'/%3E%3Cpath d='M12 7.4l3.5 2.5-1.3 4.1H9.8L8.5 9.9z' fill='%230B1A22'/%3E%3Cpath d='M12 7.4V2.4M15.5 9.9l4.5-1.6M14.2 14l2.8 4M9.8 14L7 18M8.5 9.9L4 8.3' stroke='%230B1A22' stroke-width='1.5'/%3E%3C/svg%3E"); }
html[data-theme="teal"] .px-cat-card:hover::before { filter: brightness(1.08) saturate(1.05); }
html[data-theme="teal"] .px-cat-card:hover::after { transform: translateX(3px); filter: brightness(1.5); }
@media (max-width: 900px) {
  html[data-theme="teal"] .px-cat-card { aspect-ratio: 1.12 / 1; border-radius: 12px; }
  html[data-theme="teal"] .px-cat-card::before { inset: 0 0 40px 0; }
  html[data-theme="teal"] .px-cat-card.is-casino::before { background: url(/img/cards/home-casino-tiles-m.webp?v=1) center / cover no-repeat, #0B1A22; }
  html[data-theme="teal"] .px-cat-card.is-sports::before { background: url(/img/cards/home-sports-stadium-m.webp?v=1) center / cover no-repeat, #0B1A22; }
  html[data-theme="teal"] .px-cat-card::after { inset: auto 11px 12px auto; width: 16px; height: 16px; }
  html[data-theme="teal"] .px-cat-tx { left: 12px; right: 34px; height: 40px; }
  html[data-theme="teal"] .px-cat-tx strong { font-size: 14px; gap: 7px; }
  html[data-theme="teal"] .px-cat-tx strong::before { width: 16px; height: 16px; }
}


/* ==========================================================================
   v11 Casino Sports cards (user request 7 Oct): same buttons in the same place, ball re-framed
   shorter cards on desktop, no name bar (picture fills the card); Sports = dark green basketball with a centred
   headline, line and button; casino = Thunder Zeus cover + game tiles.
   Overrides the v5-v8 card styles.
   ========================================================================== */
html[data-theme="teal"] .px-cat-card { container-type: inline-size; aspect-ratio: 2.6 / 1; min-height: 0; border-radius: 16px; background: #0F222C; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
html[data-theme="teal"] .px-cat-card img, html[data-theme="teal"] .px-cat-tx, html[data-theme="teal"] .px-cat-btn { display: none; }
html[data-theme="teal"] .px-cat-card::before { inset: 0; z-index: -1; border-radius: 0; box-shadow: none; transform: none; transition: filter .25s ease; }
html[data-theme="teal"] .px-cat-card.is-casino::before { background: url(/img/cards/home-casino-tiles-v9.webp?v=1) center / cover no-repeat, #0B1A22; }
html[data-theme="teal"] .px-cat-card.is-sports::before { background: url(/img/cards/home-sports-bball.webp?v=1) center bottom / cover no-repeat, #06130F; }
html[data-theme="teal"] .px-cat-card::after { display: none; }
html[data-theme="teal"] .px-cat-card:hover::before { filter: brightness(1.08) saturate(1.05); }

/* Sports: centred headline + line + pill button over the picture */
html[data-theme="teal"] .px-cat-card.is-sports .px-cat-btn {
  display: inline-flex; position: absolute; z-index: 1; left: 50%; top: 17cqi; bottom: auto; transform: translateX(-50%);
  height: clamp(28px, 4.6cqi, 36px); padding: 0 clamp(14px, 2.6cqi, 22px); border-radius: 999px; white-space: nowrap;
  font-size: clamp(11px, 1.8cqi, 14px); font-weight: 700; color: #FFFFFF;
  background: rgba(16, 201, 138, .16); box-shadow: inset 0 0 0 1px rgba(16, 201, 138, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-theme="teal"] .px-cat-card.is-sports .px-cat-btn::before,
html[data-theme="teal"] .px-cat-card.is-sports .px-cat-btn::after { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; pointer-events: none; }
html[data-theme="teal"] .px-cat-card.is-sports .px-cat-btn::before { content: "Best Sports Betting Online"; bottom: calc(100% + 5.6cqi);
  font-family: 'Unbounded', 'Manrope', sans-serif; font-weight: 700; font-size: clamp(15px, 3cqi, 24px); line-height: 1.15; letter-spacing: -.01em; color: #FFFFFF; }
html[data-theme="teal"] .px-cat-card.is-sports .px-cat-btn::after { content: "Cricket, football and 30+ sports with live odds"; bottom: calc(100% + 1.9cqi);
  font-size: clamp(11px, 1.75cqi, 13.5px); font-weight: 500; line-height: 1.3; color: rgba(222, 236, 232, .72); }

@media (max-width: 900px) {
  html[data-theme="teal"] .px-cat-card { aspect-ratio: 1.12 / 1; border-radius: 12px; }
  html[data-theme="teal"] .px-cat-card.is-casino::before { background: url(/img/cards/home-casino-tiles-v9-m.webp?v=1) center / cover no-repeat, #0B1A22; }
  html[data-theme="teal"] .px-cat-card.is-sports::before { background: url(/img/cards/home-sports-bball-m.webp?v=1) center 75% / cover no-repeat, #06130F; }
  /* small phone card: headline + button only */
  html[data-theme="teal"] .px-cat-card.is-sports .px-cat-btn { top: auto; bottom: 22cqi; height: 24px; padding: 0 12px; font-size: 10.5px; }
  html[data-theme="teal"] .px-cat-card.is-sports .px-cat-btn::before { content: "Best Sports\A Betting Online"; white-space: pre; font-size: clamp(12px, 7.4cqi, 16px); bottom: calc(100% + 5cqi); text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
  html[data-theme="teal"] .px-cat-card.is-sports .px-cat-btn::after { display: none; }
}

/* Casino: "Spin Now" pill button centred under the front cover */
html[data-theme="teal"] .px-cat-card.is-casino::after { display: block; content: ""; position: absolute; inset: auto 0 0 0; height: 34%; z-index: 0; width: auto; aspect-ratio: auto; border-radius: 0;
  background: linear-gradient(180deg, rgba(8, 18, 24, 0), rgba(8, 18, 24, .85)); pointer-events: none; }
html[data-theme="teal"] .px-cat-card.is-casino .px-cat-btn {
  display: inline-flex; position: absolute; z-index: 1; left: 50%; top: auto; bottom: 3.2cqi; transform: translateX(-50%);
  height: clamp(28px, 4.6cqi, 36px); padding: 0 clamp(16px, 3cqi, 26px); border-radius: 999px; white-space: nowrap;
  font-size: clamp(11px, 1.8cqi, 14px); font-weight: 800; color: #04140D; background: #10C98A; box-shadow: 0 6px 18px rgba(16, 201, 138, .35); }
html[data-theme="teal"] .px-cat-card.is-casino:hover .px-cat-btn { filter: brightness(1.08); }
@media (max-width: 900px) {
  html[data-theme="teal"] .px-cat-card.is-casino .px-cat-btn { bottom: 5cqi; height: 24px; padding: 0 14px; font-size: 10.5px; }
}

/* both buttons: same size, same Plixwin teal style ("Casino" / "Sports") */
html[data-theme="teal"] .px-cat-card.is-casino .px-cat-btn, html[data-theme="teal"] .px-cat-card.is-sports .px-cat-btn {
  box-sizing: border-box; justify-content: center; width: clamp(104px, 17cqi, 132px); height: clamp(30px, 4.8cqi, 38px); padding: 0; border-radius: 999px;
  font-family: 'Manrope', sans-serif; font-size: clamp(12px, 1.9cqi, 15px); font-weight: 800; letter-spacing: 0; color: #04140D;
  background: #10C98A; box-shadow: 0 6px 18px rgba(16, 201, 138, .30); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="teal"] .px-cat-card.is-casino:hover .px-cat-btn, html[data-theme="teal"] .px-cat-card.is-sports:hover .px-cat-btn { filter: brightness(1.08); }
@media (max-width: 900px) {
  html[data-theme="teal"] .px-cat-card.is-casino .px-cat-btn, html[data-theme="teal"] .px-cat-card.is-sports .px-cat-btn { width: 78px; padding: 0; height: 26px; font-size: 11px; }
}

/* Sports: button sits exactly where the Casino button is (bottom centre),
   headline + line move to the top, ball fills the middle, same bottom fade */
html[data-theme="teal"] .px-cat-card.is-sports::after { display: block; content: ""; position: absolute; inset: auto 0 0 0; height: 34%; z-index: 0; width: auto; aspect-ratio: auto; border-radius: 0;
  background: linear-gradient(180deg, rgba(4, 14, 11, 0), rgba(4, 14, 11, .85)); pointer-events: none; }
html[data-theme="teal"] .px-cat-card.is-sports::before { background: url(/img/cards/home-sports-bball.webp?v=1) center 85% / 122% auto no-repeat, #06130F; }
html[data-theme="teal"] .px-cat-card.is-sports .px-cat-btn { top: auto; bottom: 3.2cqi; }
html[data-theme="teal"] .px-cat-card.is-sports .px-cat-btn::before { bottom: auto; top: calc(5cqi - 38.46cqi + 3.2cqi + clamp(30px, 4.8cqi, 38px)); text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
html[data-theme="teal"] .px-cat-card.is-sports .px-cat-btn::after { bottom: auto; top: calc(9.6cqi - 38.46cqi + 3.2cqi + clamp(30px, 4.8cqi, 38px)); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
@media (max-width: 900px) {
  html[data-theme="teal"] .px-cat-card.is-sports::before { background: url(/img/cards/home-sports-bball-m.webp?v=1) center 80% / cover no-repeat, #06130F; }
  html[data-theme="teal"] .px-cat-card.is-sports .px-cat-btn { top: auto; bottom: 5cqi; }
  html[data-theme="teal"] .px-cat-card.is-sports .px-cat-btn::before { bottom: auto; top: calc(8cqi - 89.29cqi + 5cqi + 26px); }
}


/* ==========================================================================
   header v1 (user request 7 Oct): Stake-style balance box
   balance + coin + caret | square green wallet button joined on the right,
   then bold solid account and bell icons; flat, no glow
   ========================================================================== */
html[data-theme="teal"] header .header-right .wallet-pill.px-wallet { height: 44px !important; min-height: 44px !important; padding: 0 !important; gap: 0 !important; border-radius: 10px !important; overflow: hidden;
  background: var(--tl-sf2) !important; border: 0 !important; box-shadow: none !important; filter: none !important; order: 0; }
html[data-theme="teal"] header .header-right .px-wallet .wallet-balance-box { height: 100% !important; gap: 8px !important; padding: 0 12px 0 16px !important; border-radius: 0 !important; background: transparent !important; }
html[data-theme="teal"] header .header-right .px-wallet .wallet-balance-box:hover,
html[data-theme="teal"] header .header-right .px-wallet .wallet-balance-box[aria-expanded="true"] { background: rgba(255, 255, 255, .04) !important; }
html[data-theme="teal"] header .header-right .px-wallet .wallet-balance-amount,
html[data-theme="teal"] header .header-right .px-wallet #headerBalanceVal { font-size: 15px !important; font-weight: 700 !important; color: #FFFFFF !important; letter-spacing: 0 !important; }
html[data-theme="teal"] header .header-right .px-wallet .px-cur-badge { display: inline-grid !important; place-items: center; width: 18px !important; height: 18px !important; min-width: 18px; padding: 0 !important; border-radius: 50% !important;
  background: var(--tl-green) !important; border: 0 !important; box-shadow: none !important; }
html[data-theme="teal"] header .header-right .px-wallet .wallet-currency-sym { color: #FFFFFF !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; }
html[data-theme="teal"] header .header-right .px-wallet .wallet-caret { width: 16px !important; height: 16px !important; stroke: #FFFFFF !important; stroke-width: 2.6 !important; fill: none !important; opacity: 1 !important; }
html[data-theme="teal"] header .header-right .px-wallet .btn-header-deposit { width: 48px !important; min-width: 48px !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; gap: 0 !important;
  border-radius: 0 !important; background: var(--tl-green) !important; background-image: none !important; color: var(--tl-on) !important; box-shadow: none !important; filter: none !important; text-shadow: none !important; }
html[data-theme="teal"] header .header-right .px-wallet .btn-header-deposit:hover { background: var(--tl-green-h) !important; }
html[data-theme="teal"] header .header-right .px-wallet .btn-header-deposit span { display: none !important; }
html[data-theme="teal"] header .header-right .px-wallet .btn-header-deposit .px-dep-ico { display: block !important; width: 20px !important; height: 20px !important; color: var(--tl-on) !important; fill: currentColor !important; stroke: none !important; }

/* bold solid icons, Stake order: wallet, account, bell */
html[data-theme="teal"] header .header-right .header-account-btn { order: 1; }
html[data-theme="teal"] header .header-right .header-notification-btn { order: 2; }
html[data-theme="teal"] header .header-right .btn-search-trigger { order: 3; }
html[data-theme="teal"] header .header-right .header-account-btn,
html[data-theme="teal"] header .header-right .header-notification-btn { position: relative; display: grid; place-items: center; width: 40px !important; height: 40px !important; padding: 0 !important;
  background: transparent !important; color: #B4C2CA !important; box-shadow: none !important; filter: none !important; }
html[data-theme="teal"] header .header-right .header-account-btn > svg,
html[data-theme="teal"] header .header-right .header-notification-btn > svg { display: none !important; }
html[data-theme="teal"] header .header-right .header-account-btn::before,
html[data-theme="teal"] header .header-right .header-notification-btn::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--px-ico) center / contain no-repeat; mask: var(--px-ico) center / contain no-repeat; }
html[data-theme="teal"] header .header-right .header-account-btn { --px-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.4' r='4.6'/%3E%3Cpath d='M3.2 20.6C3.2 15.9 7.1 13 12 13s8.8 2.9 8.8 7.6c0 .5-.4.9-.9.9H4.1c-.5 0-.9-.4-.9-.9z'/%3E%3C/svg%3E"); }
html[data-theme="teal"] header .header-right .header-notification-btn { --px-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c-.9 0-1.6.7-1.6 1.6v.7A6.6 6.6 0 0 0 5.4 11v4.1l-1.7 2.5c-.4.6 0 1.4.8 1.4h15c.8 0 1.2-.8.8-1.4l-1.7-2.5V11a6.6 6.6 0 0 0-5-6.5v-.7c0-.9-.7-1.6-1.6-1.6z'/%3E%3Cpath d='M9.2 20.2h5.6a2.8 2.8 0 0 1-5.6 0z'/%3E%3C/svg%3E"); }
html[data-theme="teal"] header .header-right .header-account-btn:hover,
html[data-theme="teal"] header .header-right .header-notification-btn:hover,
html[data-theme="teal"] header .header-right .header-notification-btn[aria-expanded="true"] { background: transparent !important; color: #FFFFFF !important; }
html[data-theme="teal"] header .header-right .header-notification-btn .pxa-bell-badge { box-shadow: none !important; }

@media (max-width: 900px) {
  html[data-theme="teal"] header .header-right .wallet-pill.px-wallet { height: 40px !important; min-height: 40px !important; }
  html[data-theme="teal"] header .header-right .px-wallet .wallet-balance-box { gap: 7px !important; padding: 0 10px 0 13px !important; }
  html[data-theme="teal"] header .header-right .px-wallet #headerBalanceVal { font-size: 14px !important; }
  html[data-theme="teal"] header .header-right .px-wallet .btn-header-deposit { width: 44px !important; min-width: 44px !important; }
  html[data-theme="teal"] header .header-right .header-account-btn,
  html[data-theme="teal"] header .header-right .header-notification-btn { width: 36px !important; height: 36px !important; }
}


/* ==========================================================================
   live winners v6 (7 Oct): one endless row of equal-size win cards (square game
   picture, game, player, coin + amount), Poppins italic. Dark flat cards with a
   solid line along the bottom edge in each game picture's main colour, with a
   soft glow of that colour above it - no glass or gloss.
   ========================================================================== */
html[data-theme="teal"] .px-wins { display: none !important; }
.lwx[hidden], body.casino-mode .lwx, body.sports-mode .lwx, body.px-mode .lwx { display: none !important; }
html[data-theme="teal"] .lwx { order: 0; }
.lwx { position: relative; margin: 0 0 4px; font-family: 'Manrope', system-ui, sans-serif; color: #FFFFFF; }
.lwx-head { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.lwx-head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: #FFFFFF; }
.lwx-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .06em; line-height: 1; color: #10C98A; }
.lwx-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #10C98A; }
.lwx-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid #10C98A; animation: lwxPing 2s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes lwxPing { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }

.lwx-rows { overflow: hidden; margin: 0 -2px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.lwx-row { overflow: hidden; padding: 10px 0 14px; margin: -8px 0 -8px; }
.lwx-track { display: flex; gap: 8px; width: max-content; padding: 0 2px; }
.lwx-track.is-moving { will-change: transform; animation: lwxSlide var(--dur, 60s) linear infinite; }
/* pause on mouse hover only (a tap on a phone must never leave the row stopped) */
@media (hover: hover) and (pointer: fine) { .lwx-rows:hover .lwx-track { animation-play-state: paused; } }
@keyframes lwxSlide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* every card the same size; the name is cut with … when it is long */
.lwx-card { --glow: 0, 177, 117; position: relative; isolation: isolate; overflow: hidden; flex: none; display: flex; align-items: center; gap: 10px; width: 196px; height: 56px;
  padding: 6px 12px 6px 6px; margin: 0; border: 0; border-radius: 12px; background: #0B1820; color: inherit; font: inherit; text-align: left; cursor: default;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055); transition: transform .25s ease; }
/* the game picture's main colour (set by the script; Plixwin green until known):
   a solid line along the bottom edge, and above it a soft glow of the same colour */
.lwx-card::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 100%; pointer-events: none;
  background: radial-gradient(70% 100% at 20% 100%, rgba(var(--glow), .6) 0%, rgba(var(--glow), .24) 42%, rgba(var(--glow), 0) 80%); }
/* a solid line of the same colour along the bottom edge, fading out to the right */
.lwx-card::after { content: ""; position: absolute; z-index: 1; left: 0; bottom: 0; width: 80%; height: 2.5px; pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--glow)) 0%, rgb(var(--glow)) 30%, rgba(var(--glow), 0) 100%);
  box-shadow: 0 0 8px 0 rgba(var(--glow), .7); }
.lwx-card.is-link { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .lwx-card:hover { transform: translateY(-2px); } }
.lwx-card:focus-visible { outline: 2px solid #10C98A; outline-offset: 2px; }
.lwx-thumb { position: relative; z-index: 2; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: #0D2937; }
.lwx-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.lwx-thumb b { font-size: 11px; font-weight: 800; color: #10C98A; }
.lwx-info { position: relative; z-index: 2; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; font-family: 'Poppins', 'Manrope', system-ui, sans-serif; }
.lwx-game { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 600; font-style: italic; line-height: 1.3; color: #FFFFFF; }
.lwx-user { display: inline-flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; font-weight: 600; font-style: normal; line-height: 1.3; color: #8EA3AE; white-space: nowrap; }
.lwx-user .px-i-spy { width: 12px; height: 12px; flex: none; stroke: #8EA3AE; }
.lwx-win { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11.5px; font-weight: 600; font-style: italic; line-height: 1; color: #FFFFFF; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lwx-coin { flex: none; display: grid; place-items: center; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; background: #00B175; color: #FFFFFF; font-family: 'Manrope', sans-serif; font-style: normal; font-size: 8.5px; font-weight: 800; }
.lwx-card.is-fresh { animation: lwxFresh 1s ease-out; }
@keyframes lwxFresh { 0% { opacity: .15; } 100% { opacity: 1; } }

@media (max-width: 900px) {
  .lwx-head { margin-bottom: 10px; }
  .lwx-head h2 { font-size: 17px; }
  .lwx-live { font-size: 11px; }
  .lwx-rows { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
  .lwx-card { width: 164px; height: 50px; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 11px; }
  .lwx-thumb { width: 40px; height: 40px; border-radius: 8px; }
  .lwx-game { font-size: 10.5px; }
  .lwx-win { font-size: 10.5px; }
  .lwx-coin { min-width: 13px; height: 13px; font-size: 8px; }
  .lwx-user { font-size: 9px; }
  .lwx-track { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .lwx-track.is-moving, .lwx-dot::after, .lwx-card.is-fresh { animation: none !important; } }
/* live winners v6 end */

/* ---------- two-tone category icons (green front + grey back), v13 ---------- */
html[data-theme="teal"] .tl-duo { --du-s: #00B175; --du-f: #B4EFD4; --du-g: #C3D3DA; --du-gd: #8AA2AE; fill: none !important; stroke: none !important; overflow: visible; }
html[data-theme="teal"] .tl-duo .du-o { fill: var(--du-f) !important; stroke: var(--du-s) !important; }
html[data-theme="teal"] .tl-duo .du-s { fill: var(--du-s) !important; stroke: none !important; }
html[data-theme="teal"] .tl-duo .du-sj { fill: var(--du-s) !important; stroke: var(--du-s) !important; }
html[data-theme="teal"] .tl-duo .du-ln { fill: none !important; stroke: var(--du-s) !important; }
html[data-theme="teal"] .tl-duo .du-g { fill: var(--du-g) !important; stroke: none !important; }
html[data-theme="teal"] .tl-duo .du-gk { fill: none !important; stroke: var(--du-g) !important; }
html[data-theme="teal"] .tl-duo .du-gd { fill: var(--du-gd) !important; stroke: none !important; }
html[data-theme="teal"] .tl-duo .du-w { fill: #FFFFFF !important; stroke: none !important; opacity: .85; }
/* sizes: tabs and chips 20px, section titles 26px (23px on phones) */
html[data-theme="teal"] .top-nav-tabs .top-tab-item .tl-duo,
html[data-theme="teal"] .px-chip svg.tl-duo,
html[data-theme="teal"] .cat-pill-item svg.tl-duo { width: 20px !important; height: 20px !important; }
html[data-theme="teal"] .tl-ttl-ic .tl-duo { width: 26px !important; height: 26px !important; }
@media (max-width: 900px) { html[data-theme="teal"] .tl-ttl-ic .tl-duo { width: 23px !important; height: 23px !important; } }

/* ---------- search icon: one clean line magnifier everywhere (v16) ---------- */
html[data-theme="teal"] svg.tl-search-ic, html[data-theme="teal"] svg.tl-search-ic * { fill: none !important; stroke: currentColor !important; }
html[data-theme="teal"] .btn-search-trigger svg.tl-search-ic { width: 19px !important; height: 19px !important; }
html[data-theme="teal"] .tl-bbar svg.tl-search-ic { stroke-width: 2.3; }
html[data-theme="teal"] .px-search svg.tl-search-ic { width: 18px !important; height: 18px !important; flex: none; }

/* ---------- sports page: full-width sportsbook on the dark page (no light frame) ---------- */
html[data-theme="teal"] body[data-px="sports"] .app-shell { background: var(--tl-bg) !important; padding: 0 !important; }
html[data-theme="teal"] body[data-px="sports"] .px-sports { background: var(--tl-bg) !important; }

/* ---------- sports page: app-like, the sportsbook fills the screen (no page scroll, no footer) ---------- */
html[data-theme="teal"]:has(body[data-px="sports"]), html[data-theme="teal"] body[data-px="sports"] { overflow: hidden !important; overscroll-behavior: none; }
html[data-theme="teal"] body[data-px="sports"] footer.app-footer { display: none !important; }
html[data-theme="teal"] body[data-px="sports"] .px-sports-note { padding: 8px 16px !important; font-size: 12.5px !important; background: var(--tl-sf) !important; border-bottom: 1px solid var(--tl-line) !important; color: var(--tl-muted) !important; }
html[data-theme="teal"] body[data-px="sports"] .px-sports-note b { color: #FFFFFF !important; }
@media (max-width: 900px) {
  html[data-theme="teal"] body[data-px="sports"] .px-sports-note { flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; padding: 6px 10px 6px 12px !important; font-size: 12px !important; line-height: 1.3; }
  html[data-theme="teal"] body[data-px="sports"] .px-sports-note > span:first-child { min-width: 0; flex: 1 1 auto; }
  html[data-theme="teal"] body[data-px="sports"] .px-sports-note .px-sports-actions { gap: 6px !important; flex: none !important; margin-left: auto !important; width: auto !important; }
  html[data-theme="teal"] body[data-px="sports"] .px-sports-note button { height: 28px !important; padding: 0 10px !important; font-size: 11.5px !important; }
}

/* ==========================================================================
   Fast start (8 Oct)
   - Live Winners: placeholder cards (same size as the real ones) hold the
     row's place until the wins arrive, so the rows below never jump.
   - Desktop home: the search bar lives in the Originals title row; it is not
     shown in its old place for a moment before it moves there.
   ========================================================================== */
.lwx-skel .lwx-card { pointer-events: none; }
.lwx-skel .lwx-card::before, .lwx-skel .lwx-card::after { display: none; }
.lwx-skel .lwx-thumb { background: rgba(255, 255, 255, .07); }
.lwx-skel .lwx-game, .lwx-skel .lwx-user, .lwx-skel .lwx-win { display: block; color: transparent; border-radius: 4px; background: rgba(255, 255, 255, .07); }
.lwx-skel .lwx-game { width: 82%; }
.lwx-skel .lwx-user { width: 48%; margin-top: 3px; }
.lwx-skel .lwx-win { width: 60%; margin-top: 3px; }
@media (min-width: 901px) {
  html[data-theme="teal"] body.home-mode .search-providers-bar:not(.tl-inline-search) { display: none !important; }
}