/* ==========================================================================
   PLIXWIN – home page v2 (teal theme)
   Active when <html> has the class "hv2" (set in index.html).
   · every game row (Originals, Trending, Slots, Live casino, Sports) uses the
     same tile size: 8 per row on a wide screen, fewer as the row gets
     narrower, 3 + a peek on phones (like pigmo.com)
   · every section has the same title row: icon + title on the left,
     View All + joined arrows on the right, 14px above the tiles
   · sections are spaced evenly (36px desktop / 28px phones)
   · lobby bar: search + categories in one row above the games
     ========================================================================== */

/* ---------------------------------------------------------------- page rhythm */
html.hv2[data-theme="teal"] body.home-mode .app-shell { gap: 36px !important; --hv-pad: 32px; }
html.hv2[data-theme="teal"] body.home-mode .app-shell > * { margin-top: 0 !important; margin-bottom: 0 !important; }
html.hv2[data-theme="teal"] body.home-mode #pxWelcome { order: 1 !important; }
html.hv2[data-theme="teal"] body.home-mode .px-cat-cards { order: 2 !important; }
html.hv2[data-theme="teal"] body.home-mode .hv-lobby { order: 3 !important; }
html.hv2[data-theme="teal"] body.home-mode #sectionOriginals { order: 4 !important; }
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches { order: 5 !important; }
html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners { order: 6 !important; }
html.hv2[data-theme="teal"] body.home-mode #sectionHotSlots { order: 7 !important; }
html.hv2[data-theme="teal"] body.home-mode #sectionTopHits { order: 8 !important; }
html.hv2[data-theme="teal"] body.home-mode #pxRandomGame { order: 9 !important; }
html.hv2[data-theme="teal"] body.home-mode #sectionLiveCasino { order: 10 !important; }
html.hv2[data-theme="teal"] body.home-mode #sectionSportsGames { order: 11 !important; }
html.hv2[data-theme="teal"] body.home-mode #pxHomeProviders { order: 12 !important; }
html.hv2[data-theme="teal"] body.home-mode #pxBets { order: 13 !important; }
@media (max-width: 900px) {
  html.hv2[data-theme="teal"] body.home-mode .app-shell { gap: 28px !important; --hv-pad: 16px; padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---------------------------------------------------------------- lobby bar */
html.hv2 body:not(.home-mode) .hv-lobby { display: contents; }
html.hv2[data-theme="teal"] body.home-mode .hv-lobby { display: flex; align-items: stretch; gap: 12px; min-width: 0; }
html.hv2[data-theme="teal"] body.home-mode .hv-lobby .search-providers-bar {
  display: flex !important; flex: 0 1 360px; min-width: 220px; margin: 0 !important; padding: 0 !important; order: 0 !important;
  width: auto !important; max-width: none !important; background: none !important; border: 0 !important; box-shadow: none !important; gap: 0 !important;
}
html.hv2[data-theme="teal"] body.home-mode .hv-lobby .providers-dropdown-btn { display: none !important; }
html.hv2[data-theme="teal"] body.home-mode .hv-lobby .search-box-field {
  flex: 1 1 auto; display: flex !important; align-items: center; gap: 10px; height: 48px !important; margin: 0 !important; padding: 0 16px !important;
  border-radius: 10px !important; background: #061A24 !important; border: 1px solid #0D2531 !important; box-shadow: none !important; cursor: pointer; color: #86A4B6;
}
html.hv2[data-theme="teal"] body.home-mode .hv-lobby .search-box-field svg { width: 18px; height: 18px; flex: none; color: #86A4B6; }
html.hv2[data-theme="teal"] body.home-mode .hv-lobby .search-box-field input {
  flex: 1; min-width: 0; height: 100% !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
  color: #FFFFFF !important; font: 600 14px/1 'Manrope', system-ui, sans-serif !important; cursor: pointer; outline: 0;
}
html.hv2[data-theme="teal"] body.home-mode .hv-lobby .search-box-field input::placeholder { color: #86A4B6; opacity: 1; }
html.hv2[data-theme="teal"] body.home-mode .hv-lobby .search-box-field:hover { border-color: #12384A !important; }
html.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar {
  display: flex !important; flex: 1 1 auto; align-items: center; gap: 4px !important; min-width: 0; height: 48px !important; margin: 0 !important; padding: 4px !important;
  order: 0 !important; position: static !important; width: auto !important; max-width: none !important; box-sizing: border-box !important;
  border-radius: 10px !important; background: #061A24 !important; border: 1px solid #0D2531 !important; box-shadow: none !important;
  overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none;
}
html.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar::-webkit-scrollbar { display: none; }
html.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item {
  flex: none !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; height: 38px !important; margin: 0 !important; padding: 0 14px !important;
  border: 0 !important; border-radius: 8px !important; background: none !important; box-shadow: none !important;
  color: #B9CBD6 !important; font: 700 14px/1 'Manrope', system-ui, sans-serif !important; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s;
}
html.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item:hover { color: #FFFFFF !important; background: rgba(255, 255, 255, .04) !important; }
html.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item.active { background: #0D2937 !important; color: #FFFFFF !important; }
html.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item .cat-pill-ico,
html.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item svg { width: 20px !important; height: 20px !important; flex: none; margin: 0 !important; }
@media (max-width: 900px) {
  html.hv2[data-theme="teal"] body.home-mode .hv-lobby .search-providers-bar { display: none !important; }   /* phones: Search is in the bottom bar */
  html.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar { height: 46px !important; }
  html.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item { height: 36px !important; padding: 0 12px !important; font-size: 13.5px !important; }
}

/* ---------------------------------------------------------------- section title rows (all the same) */
html.hv2[data-theme="teal"] body.home-mode .hv-rail { container-type: inline-size; min-width: 0; width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; }
html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-header-line,
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-head,
html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .lwx-head,
html.hv2[data-theme="teal"] body.home-mode #pxHomeProviders .px-sec-head,
html.hv2[data-theme="teal"] body.home-mode #pxBets .px-sec-head {
  display: flex !important; align-items: center !important; gap: 12px !important; min-height: 36px !important; height: auto !important;
  margin: 0 0 12px !important; padding: 0 !important; border: 0 !important;
}
html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-title-box,
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-title,
html.hv2[data-theme="teal"] body.home-mode .px-sec-title {
  display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0; margin: 0 !important; padding: 0 !important;
}
html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-title-box > span:not(.tl-ttl-ic):not(.rail-icon-star),
html.hv2[data-theme="teal"] body.home-mode .hv-rail .reference-home-title,
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-title > span,
html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .lwx-head h2,
html.hv2[data-theme="teal"] body.home-mode .px-sec-title h2 {
  margin: 0 !important; font: 800 18px/1.2 'Manrope', system-ui, sans-serif !important; letter-spacing: -.01em !important; color: #FFFFFF !important; white-space: nowrap;
}
html.hv2[data-theme="teal"] body.home-mode .hv-rail .tl-ttl-ic .tl-ic,
html.hv2[data-theme="teal"] body.home-mode .hv-rail .tl-ttl-ic .tl-duo,
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-title .tl-duo,
html.hv2[data-theme="teal"] body.home-mode .px-sec-title .tl-ttl-ic .tl-ic,
html.hv2[data-theme="teal"] body.home-mode .px-sec-title .tl-ttl-ic .tl-duo,
html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .hv-ic svg { width: 24px !important; height: 24px !important; }
html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .hv-ic { display: grid; place-items: center; color: #00B175; flex: none; }
html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .hv-ic .du-g { fill: #00B175; }
html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .hv-ic .du-o { fill: none; stroke: #DCE6EC; }
html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .lwx-head { justify-content: flex-start !important; }
html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .lwx-live {
  order: 2; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px;
  background: rgba(16, 201, 138, .12); color: #10C98A; font-size: 11.5px; letter-spacing: .06em;
}
html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .lwx-live .lwx-dot { width: 6px; height: 6px; }
html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .lwx-live .lwx-dot::after { inset: -3px; }

/* right side: View All + joined arrows (pigmo style) */
html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-actions-box,
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-tools,
html.hv2[data-theme="teal"] body.home-mode .px-sec-actions { margin-left: auto !important; display: flex !important; align-items: center !important; gap: 8px !important; }
html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-see-all-action,
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-all,
html.hv2[data-theme="teal"] body.home-mode .px-sec-actions .px-viewall {
  order: 0 !important; display: inline-flex !important; align-items: center !important; height: 36px !important; padding: 0 16px !important; margin: 0 !important;
  border: 0 !important; border-radius: 8px !important; background: #0D2937 !important; color: #FFFFFF !important; box-shadow: none !important;
  font: 800 13px/1 'Manrope', system-ui, sans-serif !important; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: background .15s;
}
html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-see-all-action:hover,
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-all:hover,
html.hv2[data-theme="teal"] body.home-mode .px-sec-actions .px-viewall:hover { background: #12384A !important; }
html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-nav-buttons,
html.hv2[data-theme="teal"] body.home-mode .px-sec-actions .px-arrows { order: 1 !important; display: flex !important; gap: 0 !important; }
html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-nav-circle,
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-arrow,
html.hv2[data-theme="teal"] body.home-mode .px-sec-actions .px-arrows button {
  width: 38px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; display: grid !important; place-items: center !important;
  border: 1px solid #0D2531 !important; border-radius: 0 !important; background: #061A24 !important; color: #FFFFFF !important; box-shadow: none !important; cursor: pointer;
}
html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-nav-circle:first-child,
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-arrow[data-dir="-1"],
html.hv2[data-theme="teal"] body.home-mode .px-sec-actions .px-arrows button:first-child { border-radius: 8px 0 0 8px !important; }
html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-nav-circle:last-child,
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-arrow[data-dir="1"],
html.hv2[data-theme="teal"] body.home-mode .px-sec-actions .px-arrows button:last-child { border-radius: 0 8px 8px 0 !important; border-left: 0 !important; }
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-arrow[data-dir="1"] { margin-left: -8px !important; }
html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-nav-circle:hover,
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-arrow:hover,
html.hv2[data-theme="teal"] body.home-mode .px-sec-actions .px-arrows button:hover { background: #0D2937 !important; }
html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-nav-circle:disabled,
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-arrow:disabled { opacity: .45; cursor: default; background: #061A24 !important; }
html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-nav-circle .tl-ic,
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-arrow svg { width: 14px !important; height: 14px !important; }
@media (max-width: 900px) {
  html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-header-line,
  html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-head,
  html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .lwx-head,
  html.hv2[data-theme="teal"] body.home-mode #pxHomeProviders .px-sec-head,
  html.hv2[data-theme="teal"] body.home-mode #pxBets .px-sec-head { min-height: 32px !important; margin-bottom: 12px !important; }
  html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-title-box > span:not(.tl-ttl-ic):not(.rail-icon-star),
  html.hv2[data-theme="teal"] body.home-mode .hv-rail .reference-home-title,
  html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-title > span,
  html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .lwx-head h2,
  html.hv2[data-theme="teal"] body.home-mode .px-sec-title h2 { font-size: 16px !important; }
  html.hv2[data-theme="teal"] body.home-mode .hv-rail .tl-ttl-ic .tl-ic,
  html.hv2[data-theme="teal"] body.home-mode .hv-rail .tl-ttl-ic .tl-duo,
  html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-title .tl-duo,
  html.hv2[data-theme="teal"] body.home-mode .px-sec-title .tl-ttl-ic .tl-duo,
  html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .hv-ic svg { width: 21px !important; height: 21px !important; }
  html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-nav-buttons,
  html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-arrow,
  html.hv2[data-theme="teal"] body.home-mode .px-sec-actions .px-arrows { display: none !important; }
  html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-see-all-action,
  html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-all,
  html.hv2[data-theme="teal"] body.home-mode .px-sec-actions .px-viewall { height: 32px !important; padding: 0 12px !important; font-size: 12.5px !important; }
}

/* ---------------------------------------------------------------- game rows: one tile size everywhere */
html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track,
html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) #sportsGamesRail.hv-track {
  --hv-cols: 3.15; --hv-gap: 8px;
  display: flex !important; flex-wrap: nowrap !important; gap: var(--hv-gap) !important; grid-auto-columns: auto !important;
  width: auto !important; max-width: none !important; margin: -6px 0 0 !important; padding: 6px 0 2px !important;
  overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; scroll-padding: 0 !important;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track::-webkit-scrollbar { display: none; }
html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track > *,
html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) #sportsGamesRail.hv-track > * {
  flex: 0 0 calc((100% + var(--hv-gap)) / var(--hv-cols) - var(--hv-gap)) !important;
  width: calc((100% + var(--hv-gap)) / var(--hv-cols) - var(--hv-gap)) !important;
  min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; scroll-snap-align: start;
}
@container (min-width: 540px) {
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track, html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) #sportsGamesRail.hv-track { --hv-cols: 4; --hv-gap: 10px; }
}
@container (min-width: 680px) {
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track, html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) #sportsGamesRail.hv-track { --hv-cols: 5; }
}
@container (min-width: 820px) {
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track, html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) #sportsGamesRail.hv-track { --hv-cols: 6; }
}
@container (min-width: 960px) {
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track, html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) #sportsGamesRail.hv-track { --hv-cols: 7; }
}
@container (min-width: 1120px) {
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track, html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) #sportsGamesRail.hv-track { --hv-cols: 8; }
}
/* phones: the row runs to the screen edge so the next tile peeks in */
@container (max-width: 539.98px) {
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track,
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) #sportsGamesRail.hv-track,
  html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-track { margin-right: calc(-1 * var(--hv-pad, 16px)) !important; padding-right: var(--hv-pad, 16px) !important; }
}

/* every tile: same 3:4 picture, same corners */
html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track .game-card,
html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track .pxt-tile {
  display: block !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: none !important; box-shadow: none !important;
  transition: transform .2s ease !important; aspect-ratio: auto;
}
html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track .pxt-tile { aspect-ratio: 3 / 4 !important; }
html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track .game-thumb-box {
  position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important;
  aspect-ratio: 3 / 4 !important; margin: 0 !important; border-radius: 10px !important; overflow: hidden !important; background: #061A24 !important;
}
html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track .game-thumb-img {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important;
}
html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track .game-card-info { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track .game-card:hover,
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track .pxt-tile:hover { transform: translateY(-4px) !important; }
}
html.hv2[data-theme="teal"] body.home-mode .hv-empty { padding: 24px 0; color: #86A4B6; font: 600 14px 'Manrope', sans-serif; }

/* ---------------------------------------------------------------- Live Winners: same left edge as the rows */
html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .lwx-rows {
  margin: 0 !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 48px), transparent);
}
html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .lwx-row { margin: -8px 0 !important; padding: 8px 0 !important; }
html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .lwx-track { padding: 0 !important; }

/* ==========================================================================
   v3 (9 Oct)
   ========================================================================== */
/* EXCLUSIVE tag on every Plixwin Original */
html.hv2[data-theme="teal"] .px-original-card .game-thumb-box { position: relative !important; }
html.hv2[data-theme="teal"] .px-original-card .game-thumb-box::after {
  content: "EXCLUSIVE"; position: absolute; z-index: 3; top: 8px; left: 8px; display: block;
  padding: 4px 7px 3px; border-radius: 6px; background: #00B175; color: #00140C;
  font: 800 9.5px/1 'Manrope', system-ui, sans-serif; letter-spacing: .06em; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
@media (max-width: 540px) {
  html.hv2[data-theme="teal"] .px-original-card .game-thumb-box::after { top: 6px; left: 6px; padding: 3px 5px 2px; font-size: 8px; border-radius: 5px; }
}

/* Sports row: exactly the 8 sports (View All is in the title row) */
html.hv2[data-theme="teal"] body.home-mode #sportsGamesRail .pxt-all { display: none !important; }

/* page with every Plixwin Original (#originals) */
.hv-origall { display: none; }
html.hv2[data-theme="teal"] body.hv-orig-page .app-shell > *:not(#pxOrigAll) { display: none !important; }
html.hv2[data-theme="teal"] body.hv-orig-page #pxOrigAll { display: block !important; order: 0 !important; container-type: inline-size; }
.hv-oa-head { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.hv-oa-back {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; margin-right: 4px; padding: 0; cursor: pointer;
  border: 1px solid #0D2531; border-radius: 9px; background: #061A24; color: #FFFFFF; transition: background .15s;
}
.hv-oa-back:hover { background: #0D2937; }
.hv-oa-back svg { width: 16px; height: 16px; }
.hv-oa-head .tl-ttl-ic { display: grid; place-items: center; }
.hv-oa-head .tl-duo { width: 26px !important; height: 26px !important; }
.hv-oa-head h1 { margin: 0; font: 800 24px/1.15 'Manrope', system-ui, sans-serif; letter-spacing: -.015em; color: #FFFFFF; }
.hv-oa-count { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; background: rgba(0, 177, 117, .14); color: #10C98A; font: 800 12px/1 'Manrope', sans-serif; }
.hv-oa-sub { margin: 10px 0 20px; color: #86A4B6; font: 600 14px/1.5 'Manrope', system-ui, sans-serif; }
.hv-oa-grid { --oa-cols: 3; --oa-gap: 8px; display: grid; grid-template-columns: repeat(var(--oa-cols), minmax(0, 1fr)); gap: 14px var(--oa-gap); }
@container (min-width: 540px) { .hv-oa-grid { --oa-cols: 4; --oa-gap: 12px; } }
@container (min-width: 680px) { .hv-oa-grid { --oa-cols: 5; } }
@container (min-width: 820px) { .hv-oa-grid { --oa-cols: 6; } }
@container (min-width: 960px) { .hv-oa-grid { --oa-cols: 7; } }
@container (min-width: 1120px) { .hv-oa-grid { --oa-cols: 8; } }
html.hv2[data-theme="teal"] .hv-oa-grid .game-card {
  display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 10px !important; background: none !important; box-shadow: none !important; transition: transform .2s ease !important;
}
html.hv2[data-theme="teal"] .hv-oa-grid .game-thumb-box {
  position: relative !important; display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 3 / 4 !important;
  border-radius: 10px !important; overflow: hidden !important; background: #061A24 !important;
}
html.hv2[data-theme="teal"] .hv-oa-grid .game-thumb-img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
@media (hover: hover) and (pointer: fine) { html.hv2[data-theme="teal"] .hv-oa-grid .game-card:hover { transform: translateY(-4px) !important; } }
@media (max-width: 900px) {
  .hv-oa-head h1 { font-size: 20px; }
  .hv-oa-sub { font-size: 13px; margin: 8px 0 16px; }
}

  html.hv2[data-theme="teal"] body.home-mode .hv-find { order: 3; flex: 1 0 100%; height: 42px; margin-left: 0; border-radius: 10px; font-size: 13.5px; }
  html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-header-line:has(.hv-find) .rail-actions-box { margin-left: auto !important; }
  html.hv2[data-theme="teal"] .px-more .px-more-btn { height: 44px !important; min-width: 0; width: 100%; max-width: 320px; }
}

html.hv2[data-theme="teal"] body.home-mode #sectionSportsGames #sportsGamesRail.hv-track > .pxt-tile.pxt-all { display: none !important; }
@container (min-width: 1120px) { .hv-oa-grid { --oa-gap: 16px; row-gap: 16px; } }

/* desktop: Stake-like spacing between the tiles */
@container (min-width: 1120px) {
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track,
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) #sportsGamesRail.hv-track { --hv-gap: 16px; }
}
html.hv2[data-theme="teal"] body.home-mode .hv-rail .rail-header-line,
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-head,
html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .lwx-head { margin-bottom: 14px !important; }

/* Load more on the casino / live pages: only one button until it has been used */
html.hv2 .px-more .px-less-btn[hidden], html.hv2 .px-more .px-more-btn[hidden] { display: none !important; }

/* Load more / Show less on the casino and live pages: just text between the lines */
html.hv2[data-theme="teal"] .px-more .px-more-btn,
html.hv2[data-theme="teal"] .px-more .px-less-btn {
  background: transparent !important; border: 0 !important; box-shadow: none !important; outline-offset: 3px;
  padding: 0 10px !important; height: 36px !important; color: #C9D6DE !important; transition: color .15s !important;
}
html.hv2[data-theme="teal"] .px-more .px-more-btn:hover,
html.hv2[data-theme="teal"] .px-more .px-less-btn:hover { background: transparent !important; color: #FFFFFF !important; }
html.hv2[data-theme="teal"] .px-more .px-more-btn svg { color: #00B175 !important; }

/* profile menu (account button): lighter, in the site's teal colours */
html.hv2 .pxa-pmenu.pxm-menu { background: #0B2230 !important; border: 1px solid #16394A !important; box-shadow: 0 22px 50px -16px rgba(0, 6, 10, .85) !important; }
html.hv2 .pxm-menu .pxa-pm-user { border-bottom-color: #16394A !important; }
html.hv2 .pxm-menu .pxa-pm-line { background: #16394A !important; }
html.hv2 .pxm-menu .pxa-pm-item { color: #EAF2F5 !important; }
html.hv2 .pxm-menu .pxa-pm-item .px-ic-svg { color: #8FB0C0 !important; }
html.hv2 .pxm-menu .pxa-pm-item:hover, html.hv2 .pxm-menu .pxa-pm-item:focus-visible { background: #12384A !important; }
html.hv2 .pxm-menu .pxa-pm-item:hover .px-ic-svg { color: #FFFFFF !important; }
html.hv2 .pxm-menu .pxa-pm-item.is-logout:hover { background: rgba(255, 100, 100, .12) !important; color: #FF9A9A !important; }
html.hv2 .pxm-menu .pxa-pm-item.is-logout:hover .px-ic-svg { color: #FF9A9A !important; }

/* ==========================================================================
   Sharper tiles (9 Oct): smaller corners (6px, like Stake) and slightly
   narrower game pictures (a little more space between them)
   ========================================================================== */
html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track .game-card,
html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track .pxt-tile,
html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track .game-thumb-box,
html.hv2[data-theme="teal"] .hv-oa-grid .game-card,
html.hv2[data-theme="teal"] .hv-oa-grid .game-thumb-box { border-radius: 6px !important; }
html.hv2[data-theme="teal"] .px-original-card .game-thumb-box::after { border-radius: 4px; }
@container (min-width: 1120px) {
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track,
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) #sportsGamesRail.hv-track { --hv-gap: 20px; }
  .hv-oa-grid { --oa-gap: 20px; }
}
@container (max-width: 539.98px) {
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track,
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) #sportsGamesRail.hv-track { --hv-gap: 10px; }
}
/* the same sharper corners on the Casino / Slots / Live casino pages */
html.hv2[data-theme="teal"] .px-sec .game-card, html.hv2[data-theme="teal"] .px-sec .game-thumb-box,
html.hv2[data-theme="teal"] #searchModalGrid .game-card, html.hv2[data-theme="teal"] #searchModalGrid .game-thumb-box { border-radius: 6px !important; }

/* tiles a little wider, less space between them (9 Oct, after the sharper-tile update) */
html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track,
html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) #sportsGamesRail.hv-track { --hv-gap: 8px !important; }
@container (min-width: 540px) {
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track,
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) #sportsGamesRail.hv-track { --hv-gap: 10px !important; }
  .hv-oa-grid { --oa-gap: 10px; }
}
@container (min-width: 1120px) {
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track,
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) #sportsGamesRail.hv-track { --hv-gap: 12px !important; }
  .hv-oa-grid { --oa-gap: 12px; }
}

/* ==========================================================================
   Sharp corners everywhere (9 Oct): Top matches cards, Live Winners,
   Slots page banners - 6px corners, 12px between pictures (like the game tiles)
   ========================================================================== */
/* Top matches */
html.hv2 #pxTopMatches .spx-card { border-radius: 6px !important; }
html.hv2 #pxTopMatches .spx-odd, html.hv2 #pxTopMatches .spx-more { border-radius: 5px !important; }
html.hv2 #pxTopMatches .spx-score b, html.hv2 #pxTopMatches .spx-live { border-radius: 4px !important; }
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-track { gap: 12px !important; }
@media (max-width: 700px) { html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-track { gap: 8px !important; } }
/* Live Winners */
html.hv2 #pxLiveWinners .lwx-card { border-radius: 6px !important; }
html.hv2 #pxLiveWinners .lwx-thumb { border-radius: 4px !important; }
html.hv2 #pxLiveWinners .lwx-track { gap: 10px !important; }
@media (max-width: 900px) { html.hv2 #pxLiveWinners .lwx-track { gap: 8px !important; } }
/* Slots page banners (Dino, Dragon Tower, ...) */
html.hv2[data-theme="teal"] .px-gbanner { border-radius: 6px !important; }
html.hv2[data-theme="teal"] .px-gbanners-track { gap: 12px !important; grid-auto-columns: calc((100% - 24px) / 3) !important; }
@media (max-width: 1023px) { html.hv2[data-theme="teal"] .px-gbanners-track { grid-auto-columns: calc((100% - 12px) / 2) !important; } }
@media (max-width: 700px) { html.hv2[data-theme="teal"] .px-gbanners-track { grid-auto-columns: 92% !important; gap: 8px !important; } }

/* Live Winners glow (9 Oct): softer and cleaner - a light wash of the game's colour from the
   bottom-left corner and a thin line along the bottom that fades out, no heavy blur */
html.hv2 #pxLiveWinners .lwx-card { background: #0A1820 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important; }
html.hv2 #pxLiveWinners .lwx-card::before {
  height: 100% !important;
  background: radial-gradient(130% 110% at 0% 100%, rgba(var(--glow), .20) 0%, rgba(var(--glow), .07) 45%, rgba(var(--glow), 0) 75%) !important;
}
html.hv2 #pxLiveWinners .lwx-card::after {
  left: 0 !important; width: 100% !important; height: 1.5px !important;
  background: linear-gradient(90deg, rgba(var(--glow), .9) 0%, rgba(var(--glow), .45) 45%, rgba(var(--glow), 0) 85%) !important;
  box-shadow: 0 0 4px 0 rgba(var(--glow), .35) !important;
}

/* "8 live" (Top matches) and "LIVE" (Live Winners): just the dot and the text, no box */
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-live-count,
html.hv2[data-theme="teal"] body.home-mode #pxLiveWinners .lwx-live { background: none !important; box-shadow: none !important; padding: 0 !important; height: auto !important; }
html.hv2[data-theme="teal"] body.home-mode #pxTopMatches .spx-live-count { margin-left: 4px !important; }