/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   All @media rules extracted from style.css, merged by breakpoint and
   ordered mobile-first (min-width ascending, then max-width descending).
   Load AFTER style.css and BEFORE account.css/info.css to keep the cascade.
   ========================================================================== */

   @media (min-width: 480px) {
    .sl-game-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  
  @media (min-width: 640px) {
    .vip-page-section {
      padding: 5rem 0 7rem;
    }
  
    .vip-page-container {
      gap: 14px;
    }
  
    .vip-hero-card {
      flex-direction: row;
      align-items: center;
      padding: 18px 20px;
      gap: 18px;
    }
  
    .vip-hero-main {
      text-align: left;
    }
  
    .vip-hero-levels {
      flex-direction: row;
      align-items: flex-end;
      gap: 16px;
    }
  
    .vip-hero-progress-wrap {
      flex: 1;
    }
  
    .vip-hero-xp-row {
      justify-content: flex-start;
    }
  
    .vip-hero-reward {
      width: auto;
      flex-direction: column;
      text-align: center;
      max-width: 130px;
      padding: 12px 10px;
    }
  
    .vip-hero-reward-text {
      font-size: 10px;
      line-height: 1.35;
    }
  
    .vip-grid {
      grid-template-columns: 1fr 1fr;
    }
  
    .page-referral .ref-page-section {
      padding: 5rem 0 7rem;
    }
  
    .ref-page-container {
      gap: 10px;
    }
  
    .ref-earn-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  
    .ref-reward-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  
    .ref-page-title {
      font-size: 26px;
    }
  
    .page-p2e .p2e-page-section {
      padding: 5rem 0 7rem;
    }
  }
  
  @media (min-width: 760px) {
    .rp-rebate-grid {
      grid-template-columns: 1.4fr 1fr;
    }
  
    .rp-stats {
      grid-template-columns: repeat(4, 1fr);
    }
  
    .rp-commission {
      grid-template-columns: 1.3fr 1fr;
    }
  
    .fw-stage {
      grid-template-columns: 60% auto;
      justify-items: stretch;
      gap: 28px;
    }
  
    .fw-brand {
      order: 0;
    }
  
    .fw-wheel-area {
      width: min(360px, 42vw);
    }
  
    .fw-winner-list {
      grid-template-columns: 1fr 1fr;
    }
  }
  
  @media (min-width: 768px) {
    .sl-game-grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }
  
  @media (min-width: 900px) {
    .mobile-only {
      display: none !important;
    }
  
    .desktop-only {
      display: block !important;
    }
  
    /* Flex variant — use class="desktop-only-flex" when block breaks layout */
    .desktop-only-flex {
      display: flex !important;
    }
  
    /* Restore flex for inherently-flex elements */
    .desktop-only.nav-item,
    .desktop-only.header-right,
    .desktop-only.header-left {
      display: flex !important;
    }
  
    .mobile-only-flex {
      display: none !important;
    }
  
    .sl-game-grid {
      grid-template-columns: repeat(8, 1fr);
      gap: 14px;
    }
  
    .sl-game-name {
      font-size: 12px;
      padding: 10px 12px;
    }
  
    .sl-banner-slide {
      height: 38vh;
      min-height: 200px;
      max-height: 320px;
    }
  
    .sl-promo-title {
      font-size: 28px;
    }
  
    .sl-promo-text {
      font-size: 14px;
    }
  
    .sl-search-wrap {
      width: 180px;
    }
  
    .sl-provider-btn {
      padding: 10px 16px;
      font-size: 11px;
    }
  
    /* -- App shell: lock viewport, no scroll -- */
    .app {
      overflow: hidden;
    }
  
    .center-content {
      position: absolute;
      inset: 0;
      padding: 0;
      overflow: visible;
    }
  
    /* Slots page layout */
    .slx-content {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 80px 20px 120px;
      overflow-y: auto;
      overflow-x: hidden;
    }
  
    /* -- Header -- */
    .hamburger .app-icon--menu {
      font-size: 1.375rem;
    }
  
    .top-header {
      padding: 16px 24px;
      gap: 12px;
    }
  
    .wallet-pill {
      padding: 10px 18px;
      gap: 8px;
    }
  
    .wallet-icon {
      width: 28px;
      height: 28px;
    }
  
    .wallet-icon .wallet-coin-icon {
      font-size: 0.95rem;
    }
  
    .wallet-caret-icon {
      font-size: 0.75rem;
    }
  
    .wallet-amount {
      font-size: 16px;
    }
  
    .wallet-dropdown-panel {
      min-width: 280px;
      max-height: 480px;
    }
  
    .header-right {
      gap: 14px;
    }
  
    .auth-btn {
      padding: 10px 22px;
      font-size: 13px;
      gap: 8px;
      border-radius: 32px;
    }
  
    .auth-btn .app-icon {
      font-size: 0.9375rem;
    }
  
    /* -- Logo -- */
    .brand-logo {
      top: 30px;
    }
  
    .logo-emblem .app-icon--logo-brand {
      font-size: 2.5rem;
    }
  
    .logo-holdem {
      font-size: 42px;
    }
  
    .logo-hub {
      font-size: 18px;
      letter-spacing: 10px;
    }
  
    /* -- Dealer -- */
    .dealer-stage {
      top: 80px;
      height: auto;
      bottom: 160px;
    }
  
    .dealer-img {
      max-width: 100%;
      max-height: 600px;
    }
  
    .dealer-img.placeholder {
      width: 340px;
      height: 280px;
    }
  
    .card-mini {
      width: 36px;
      height: 46px;
      font-size: 13px;
    }
  
    .suit {
      font-size: 10px;
    }
  
    .cards-row {
      gap: 8px;
    }
  
    .casino-table {
      margin-top: -30px;
    }
  
    .table-surface {
      height: 28px;
    }
  
    /* -- Tab Content Section: absolute overlay holding the tab swiper.
                                                                                                      Replaces the absolute .dashboard-layer overlay for index.html. The
                                                                                                      legacy absolute .dashboard-layer rule below still applies on pages
                                                                                                      that haven't been migrated to the tab-content swiper yet. -- */
    .tab-content-section {
      position: absolute;
      top: 80px;
      bottom: 220px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 40px);
      max-width: 100%;
      z-index: 6;
      margin-top: 0;
      pointer-events: none;
    }
  
    /* Extends the content area down to sit just above the category nav */
    .tab-content-section--extended {
      bottom: 130px;
    }
  
    .tab-content-section .tab-content-swiper,
    .tab-content-section .tab-content-swiper>.swiper-wrapper,
    .tab-content-section .tab-content-swiper>.swiper-wrapper>.swiper-slide {
      height: 100%;
      pointer-events: auto;
    }
  
    .tab-content-section .tab-content-swiper>.swiper-wrapper>.swiper-slide.tab-pane {
      width: 100%;
    }
  
    /* -- Dashboard layer: legacy absolute overlay (used by index-afterlogin.html
                                                                                                      and any other page where it sits directly inside .center-content) -- */
    .dashboard-layer {
      position: absolute;
      top: 80px;
      left: 20px;
      right: 20px;
      bottom: 115px;
      display: grid;
      grid-template-columns: 20% auto 20%;
      gap: 12px;
      padding-bottom: 12px;
      /* overflow-y: auto; */
      z-index: 6;
      pointer-events: none;
    }
  
    .dashboard-left {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 0;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
      pointer-events: auto;
    }
  
    .dashboard-left::-webkit-scrollbar {
      display: none;
    }
  
  
    /* When the dashboard layer lives inside the tab-pane swiper slide
                                                                                                      (index.html), drop the absolute positioning so the slide can size it. */
    .tab-pane[data-pane="0"] .dashboard-layer {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      bottom: auto;
      width: 100%;
      height: 100%;
    }
  
    .dashboard-layer>*,
    .dashboard-layer .info-grid,
    .dashboard-layer .glass-card {
      pointer-events: auto;
    }
  
    .tab-pane[data-pane="1"],
    .tab-pane[data-pane="2"],
    .tab-pane[data-pane="3"],
    .tab-pane[data-pane="4"],
    .tab-pane[data-pane="5"],
    .tab-pane[data-pane="6"],
    .tab-pane[data-pane="7"],
    .tab-pane[data-pane="8"] {
      display: block;
      overflow: hidden;
    }
  
    .slots-tab {
      padding: 16px 20px;
      height: 100%;
    }
  
    .slots-prov-grid {
      grid-template-columns: repeat(10, minmax(0, 1fr));
      gap: 10px;
    }
  
    .slots-tab-header h3 {
      font-size: 16px;
    }
  
    .tab-placeholder {
      max-width: 480px;
      width: min(80%, 480px);
      margin: 10px;
      padding: 48px 32px;
      min-height: 280px;
    }
  
    .tab-placeholder-icon {
      width: 150px;
      height: 150px;
      font-size: 2.25rem;
      margin-top: -35%;
    }
  
    .tab-placeholder h3 {
      font-size: 20px;
    }
  
    .tab-placeholder p {
      font-size: 13px;
    }
  
    .info-grid {
      display: contents;
    }
  
    /* -- Glass Card -- */
    .glass-card {
      padding: 10px;
      border-radius: 20px;
    }
  
    .card-header-row {
      margin-bottom: 8px;
    }
  
    .card-header-row h3 {
      font-size: 14px;
      letter-spacing: 1px;
    }
  
    .view-all {
      font-size: 12px;
    }
  
    /* -- Check-in Bonus (desktop) -- */
    .checkin-node-dot {
      width: 38px;
      height: 38px;
      font-size: 16px;
    }
  
    .checkin-node--jackpot .checkin-node-dot {
      width: 44px;
      height: 44px;
      font-size: 18px;
    }
  
    .checkin-node-val {
      font-size: 12px;
    }
  
    .checkin-node-day {
      font-size: 8.5px;
    }
  
    .checkin-node-btn,
    .checkin-claim-btn {
      font-size: 8px;
    }
  
    .progress-label {
      font-size: 12px;
    }
  
    .reward-row {
      font-size: 12px;
      gap: 6px;
    }
  
    .gem-icon {
      font-size: 14px;
    }
  
    .gem-amount {
      font-size: 12px;
    }
  
    .claim-btn {
      padding: 5px 16px;
      font-size: 12px;
    }
  
    .timer {
      font-size: 11px;
      padding: 3px 10px;
    }
  
    /* -- VIP Dragon -- */
  
    .vip-dragon h3 {
      margin-bottom: 8px;
      font-size: 14px;
    }
  
    .vip-body {
      gap: 12px;
    }
  
    .vip-level {
      font-size: 13px;
    }
  
    .vip-xp {
      font-size: 11px;
    }
  
    .dragon-placeholder {
      width: 90px;
      height: 90px;
      border-radius: 12px;
    }
  
    .vip-bar {
      height: 8px;
      margin-bottom: 8px;
    }
  
    /* -- Top Games -- */
    .top-games {
      overflow: hidden;
      flex-shrink: 1;
      min-height: 0;
    }
  
    .game-card {
      width: 80px;
    }
  
    .game-thumb {
      width: 80px;
      height: 100px;
    }
  
    .game-card p {
      font-size: 10px;
    }
  
    .badge {
      font-size: 9px;
      padding: 2px 6px;
    }
  
    /* -- Live Wins (desktop compact) -- */
    .live-wins {
      overflow: hidden;
      flex-shrink: 1;
      min-height: 0;
    }
  
    .live-wins.glass-card {
      padding: 10px;
    }
  
    .lxtx-section {
      padding: 6px 8px;
    }
  
    .lxtx-section-title {
      font-size: 10px;
      margin-bottom: 4px;
      padding-bottom: 3px;
    }
  
    .lxtx-list {
      gap: 2px;
    }
  
    .lxtx-rank {
      width: 16px;
      height: 16px;
      font-size: 9px;
    }
  
    .lxtx-user {
      font-size: 10px;
    }
  
    .lxtx-amount {
      font-size: 10px;
    }
  
    .lxtx-row {
      padding: 2px 0;
      gap: 6px;
    }
  
    .amount {
      font-size: 13px;
    }
  
    /* -- Category Nav: max 800px centered (desktop); active state on button -- */
    .category-nav-section {
      position: absolute;
      bottom: 130px;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      z-index: 7;
      padding-top: 0;
      width: min(900px, calc(100vw - 40px));
      max-width: 900px;
    }
  
    .category-nav-section .container {
      width: 100%;
      max-width: none;
      margin: 0;
      padding-left: 0;
      padding-right: 0;
    }
  
    .category-nav {
      position: relative;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      align-items: stretch;
      gap: 0;
      width: 100%;
      max-width: none;
      margin-inline: 0;
      padding: 0;
      min-height: 76px;
      border-radius: var(--category-nav-radius);
      background:
        linear-gradient(180deg,
          rgba(255, 255, 255, 0.12) 0%,
          rgba(255, 255, 255, 0.03) 100%),
        linear-gradient(145deg,
          rgba(72, 48, 118, 0.78) 0%,
          rgba(42, 28, 78, 0.88) 55%,
          rgba(32, 18, 62, 0.92) 100%);
      backdrop-filter: blur(var(--liq-blur-heavy));
      -webkit-backdrop-filter: blur(var(--liq-blur-heavy));
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow:
        var(--liq-shadow),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 0 28px rgba(105, 255, 241, 0.1),
        0 0 40px rgba(255, 140, 100, 0.08);
      overflow: visible;
    }
  
    .category-nav::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 42%;
      border-radius: inherit;
      background: radial-gradient(ellipse 90% 120% at 50% 0%,
          rgba(255, 255, 255, 0.14) 0%,
          transparent 65%);
      pointer-events: none;
      z-index: 0;
    }
  
    /* Swiper-driven category strip (index.html): the .category-tabs-swiper
                                                                                                      wrapper carries the glass background and clipping, while the inner
                                                                                                      .category-nav becomes the flex swiper-wrapper. The non-swiper grid
                                                                                                      layout above is preserved for pages still using the old structure. */
    .category-tabs-swiper {
      position: relative;
      border-radius: var(--category-nav-radius);
      background:
        linear-gradient(180deg,
          rgba(255, 255, 255, 0.12) 0%,
          rgba(255, 255, 255, 0.03) 100%),
        linear-gradient(145deg,
          rgba(72, 48, 118, 0.78) 0%,
          rgba(42, 28, 78, 0.88) 55%,
          rgba(32, 18, 62, 0.92) 100%);
      backdrop-filter: blur(var(--liq-blur-heavy));
      -webkit-backdrop-filter: blur(var(--liq-blur-heavy));
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow:
        var(--liq-shadow),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 0 28px rgba(105, 255, 241, 0.1),
        0 0 40px rgba(255, 140, 100, 0.08);
      overflow: hidden;
      padding: 0;
    }
  
    .category-tabs-swiper::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 42%;
      border-radius: inherit;
      background: radial-gradient(ellipse 90% 120% at 50% 0%,
          rgba(255, 255, 255, 0.14) 0%,
          transparent 65%);
      pointer-events: none;
      z-index: 1;
    }
  
    .category-tabs-swiper .category-nav {
      display: flex;
      grid-template-columns: none;
      align-items: stretch;
      background: none;
      border: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-radius: 0;
      overflow: visible;
      min-height: 76px;
    }
  
    .category-tabs-swiper .category-nav::before {
      display: none;
    }
  
    .category-tabs-swiper .cat-btn.swiper-slide {
      flex: 1 1 0;
      min-width: 0;
      width: auto;
      background: transparent;
    }
  
    .category-nav>.cat-btn {
      position: relative;
      z-index: 1;
      width: 100%;
      overflow: hidden;
      border-radius: 0;
    }
  
    .category-nav .cat-btn {
      padding: 0;
      border-radius: 0;
      min-height: 76px;
      align-self: stretch;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  
    .category-nav .cat-btn.active {
      background: linear-gradient(180deg,
          rgba(255, 255, 255, 0.22) 0%,
          rgba(255, 255, 255, 0.1) 55%,
          rgba(255, 255, 255, 0.06) 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
      border-radius: 0;
    }
  
    .category-nav>.cat-btn:first-child.active {
      border-top-left-radius: var(--category-nav-radius);
      border-bottom-left-radius: var(--category-nav-radius);
    }
  
    .category-nav>.cat-btn:last-child.active {
      border-top-right-radius: var(--category-nav-radius);
      border-bottom-right-radius: var(--category-nav-radius);
    }
  
    .category-nav .cat-btn.active .cat-btn-inner::before,
    .category-nav .cat-btn.active .cat-btn-inner::after {
      display: none;
    }
  
    .category-nav>.cat-btn:first-child {
      border-top-left-radius: var(--category-nav-radius);
      border-bottom-left-radius: var(--category-nav-radius);
    }
  
    .category-nav>.cat-btn:last-child {
      border-top-right-radius: var(--category-nav-radius);
      border-bottom-right-radius: var(--category-nav-radius);
    }
  
    .cat-btn-label {
      font-size: 10px;
      letter-spacing: 0.65px;
    }
  
    .cat-btn .cat-btn-icon {
      font-size: 2rem;
    }

    .cat-btn .cat-btn-icon-img {
      width: 38px;
      height: 38px;
    }
  
    /* -- Bottom Nav -- */
    .bottom-nav {
      bottom: 16px;
      left: 20px;
      right: 20px;
      height: 86px;
      border-radius: 28px;
      /* padding: 0 24px; */
    }
  
    /* desktop-only block/flex already handled in the utility section above */
  
    .nav-item {
      font-size: 12px;
      padding: 8px 12px;
      gap: 5px;
    }
  
    .nav-item .nav-icon {
      font-size: 1.5rem;
    }

    .nav-item .nav-icon-img {
      width: 40px;
      height: 40px;
    }
  
    .deposit-btn .deposit-icon {
      font-size: 1.75rem;
    }

    .deposit-btn .nav-icon-img {
      width: 42px;
      height: 42px;
    }
  
    .deposit-btn {
      width: 122px;
      min-height: 105px;
      gap: 15px;
    }
  
    .deposit-item {
      bottom: 10px;
      padding: 0;
    }
  
    .promo-page-section {
      padding: 5rem 2rem 7rem;
    }
  
    .promo-page-title {
      font-size: 34px;
    }
  
    .promo-nav {
      width: 44px;
      height: 44px;
      font-size: 16px;
    }
  
    .promo-nav--prev {
      left: -22px;
    }
  
    .promo-nav--next {
      right: -22px;
    }
  
    .page-vip .center-content {
      position: absolute;
      inset: 0;
      overflow-y: auto;
      overflow-x: hidden;
    }
  
    .vip-page-section {
      padding: 5rem 0 7rem;
    }
  
    .rp-main-grid {
      grid-template-columns: 1fr 1.35fr;
      align-items: start;
    }
  
    .page-referral .center-content {
      position: absolute;
      inset: 0;
      overflow-y: auto;
      overflow-x: hidden;
    }
  
    .ref-top-grid {
      grid-template-columns: 1fr 1.5fr 1fr;
      align-items: stretch;
    }
  
    .ref-mid-grid {
      grid-template-columns: 1fr 1.4fr;
      align-items: stretch;
    }
  
    .ref-card {
      display: flex;
      flex-direction: column;
    }
  
    .ref-card--earnings .ref-earn-grid,
    .ref-card--rewards .ref-reward-grid {
      flex: 1;
    }
  
    .page-p2e .center-content {
      position: absolute;
      inset: 0;
      overflow-y: auto;
      overflow-x: hidden;
    }
  
    /* Content is shorter than the viewport — center it vertically */
    .page-p2e .p2e-page-section {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .page-p2e .p2e-page-container {
      width: 100%;
      max-width: none;
      height: 500px;
      min-height: 500px;
      max-height: 500px;
      margin-inline: 0;
    }

    .page-p2e .p2e-panel {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }

    .page-p2e .p2e-header {
      flex: 0 0 auto;
    }

    .page-p2e .p2e-carousel,
    .page-p2e .ms-carousel,
    .page-p2e .fw-stage,
    .page-p2e .ci-days {
      flex: 1 1 auto;
      min-height: 0;
    }

    .page-p2e .p2e-card-reward {
      margin: 8px 10px;
      padding: 7px;
    }

    .page-p2e .p2e-card-stats {
      padding-bottom: 8px;
    }

    .page-p2e .p2e-progress {
      margin-bottom: 8px;
    }

    .page-p2e .p2e-view-btn {
      padding-block: 8px;
      margin-bottom: 10px;
    }

    .page-p2e .p2e-pagination {
      margin-top: 8px;
    }

    .page-p2e .ms-carousel {
      align-items: stretch;
    }

    .page-p2e .ms-swiper {
      position: relative;
      box-sizing: border-box;
      height: 100%;
      min-height: 0;
      padding-bottom: 22px;
    }

    .page-p2e .ms-swiper .swiper-wrapper {
      height: 100% !important;
      min-height: 0;
    }

    .page-p2e .ms-swiper .swiper-slide {
      min-height: 0;
    }

    .page-p2e .ms-card {
      height: 100%;
      min-height: 0;
      overflow: hidden;
      gap: 3px;
      padding: 10px 10px 9px;
    }

    .page-p2e .ms-card-tag {
      top: 8px;
      left: 8px;
      width: 24px;
      height: 24px;
      font-size: 11px;
    }

    .page-p2e .ms-card-title {
      margin-top: 0;
      font-size: 11px;
      line-height: 1.15;
    }

    .page-p2e .ms-card-reward {
      font-size: 17px;
    }

    .page-p2e .ms-card-art {
      height: clamp(50px, 5vw, 64px);
    }

    .page-p2e .ms-card-art img {
      max-width: clamp(58px, 5.5vw, 72px);
    }

    .page-p2e .ms-card-art-icon {
      font-size: 34px;
    }

    .page-p2e .ms-card-btn {
      min-height: 30px;
      padding: 6px 10px;
      font-size: 12px;
    }

    .page-p2e .ms-pagination {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      margin-top: 0;
    }

    .page-redemption .redempt-carousel {
      margin-block: auto;
    }
  
    .p2e-page-section .p2e-panel {
      padding: 2rem 15px;
    }
  
    .p2e-nav--prev {
      left: -16px;
    }
  
    .p2e-nav--next {
      right: -16px;
    }
  
    /* Float centered above the bottom nav — matches index .category-nav-section */
    .event-cat-nav-section {
      position: fixed;
      bottom: 130px;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      z-index: 7;
      margin-top: 0;
      width: min(900px, calc(100vw - 40px));
      max-width: 900px;
    }
  
    /* Clear the floating nav so content isn't hidden behind it */
    .page-p2e .p2e-page-section {
      padding-bottom: 15rem;
    }
  
    .event-cat-nav {
      overflow: hidden;
    }
  
    .event-cat-nav .cat-btn {
      flex: 1 1 0;
      min-width: 0;
      min-height: 76px;
      padding: 0;
      align-self: stretch;
    }
  
    .event-cat-nav .cat-btn.active {
      border-radius: 0;
    }
  
    .event-cat-nav .cat-btn:first-child.active {
      border-top-left-radius: var(--category-nav-radius);
      border-bottom-left-radius: var(--category-nav-radius);
    }
  
    .event-cat-nav .cat-btn:last-child.active {
      border-top-right-radius: var(--category-nav-radius);
      border-bottom-right-radius: var(--category-nav-radius);
    }
  
    .account-cat-nav {
      overflow: hidden;
    }
  
    .account-cat-nav .cat-btn {
      flex: 1 1 0;
      min-width: 0;
      min-height: 84px;
    }
  
    .account-cat-nav .cat-btn.active {
      border-radius: 0;
    }
  
    .account-cat-nav .cat-btn:first-child.active {
      border-top-left-radius: var(--category-nav-radius);
      border-bottom-left-radius: var(--category-nav-radius);
    }
  
    .account-cat-nav .cat-btn:last-child.active {
      border-top-right-radius: var(--category-nav-radius);
      border-bottom-right-radius: var(--category-nav-radius);
    }
  
    .page-deposit .app {
      overflow: hidden;
    }
  
    .page-deposit .center-content {
      position: absolute;
      inset: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 5.5rem 2rem 7rem;
    }
  
    .deposit-layout {
      grid-template-columns: 1.6fr 1fr;
    }
  
    .deposit-methods {
      grid-template-columns: repeat(4, 1fr);
    }
  
    .deposit-method {
      flex-direction: column;
      text-align: center;
      gap: 5px;
      padding: 10px;
    }
  
    .deposit-banks {
      grid-template-columns: repeat(3, 1fr);
    }
  
    .page-deposit .deposit-page-container {
      height: 100%;
      min-height: 0;
    }
  
    .page-deposit .deposit-page-head {
      flex: 0 0 auto;
    }
  
    /* Fill the space below the page head so member pages use the same
       standardised box as the info pages (cards fill the height instead of
       floating centred). Tall content overflows and the page scrolls. */
    .deposit-page-container>.deposit-layout,
    .deposit-page-container>.deposit-main,
    .deposit-page-container>.acct-layout {
      flex: 1 1 auto;
      min-height: 0;
    }

    /* The single grid row fills the layout height so its columns stretch to
       the bottom of the box (instead of sitting at content height). */
    .deposit-page-container>.deposit-layout,
    .deposit-page-container>.acct-layout {
      grid-template-rows: minmax(0, 1fr);
      align-items: stretch;
    }

    /* Main card + sidebar both reach the bottom of the box. The sidebar's last
       card grows to fill its column so there is no transparent gap. */
    .deposit-page-container>.deposit-layout>.deposit-main,
    .deposit-page-container>.deposit-layout>.deposit-side {
      min-height: 0;
      align-self: stretch;
    }

    .deposit-page-container>.deposit-layout>.deposit-side>*:last-child {
      flex: 1 1 auto;
    }

    /* Profile: account.css pins the grid to align-items:start, so force the
       two form cards to stretch and fill the box like the other pages. */
    .page-profile .deposit-page-container>.acct-layout.prf-grid {
      align-items: stretch;
    }
  
    /* A layout holding a single panel (referral, inbox, pending) should span
         the full width instead of sitting in the 1.6fr column with empty space. */
    .deposit-layout:has(> .deposit-main:only-child) {
      grid-template-columns: 1fr;
    }
  
    /* Inbox: keep the card height within the viewport; overflowing messages
         scroll inside the list instead of pushing the card past the container
         (into the bottom nav). The toolbar stays fixed; the message list scrolls. */
    .page-inbox .inbox-list {
      max-height: calc(100dvh - 23rem);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    }
  
    .page-inbox .inbox-list::-webkit-scrollbar {
      width: 6px;
    }
  
    .page-inbox .inbox-list::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.18);
      border-radius: 3px;
    }
  
    /* History: same as the inbox — keep the card within the viewport and let the
       transaction table scroll vertically inside instead of pushing the card past
       the container. (The wrap already scrolls horizontally.) */
    .page-history .p2e-table-wrap {
      max-height: calc(100dvh - 24rem);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
  
    .transfer-wallets {
      grid-template-columns: repeat(3, 1fr);
    }
  
    .fw-wheel-area {
      width: min(300px, 35vw, 100%);
      margin: 0 auto;
    }

    .page-p2e .fw-stage {
      align-items: center;
      overflow: hidden;
    }

    .page-p2e .fw-pointer {
      top: -2px;
      font-size: 30px;
    }
  
    .fw-winner-list {
      grid-template-columns: repeat(4, 1fr);
    }
  
    .ci-days {
      grid-auto-flow: row;
      grid-template-columns: repeat(7, 1fr);
      grid-auto-columns: auto;
      overflow: visible;
    }
  }
  
  @media (min-width: 992px) {
    .vip-landscape {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }
  
    .vip-landscape-left {
      flex: 0 0 290px;
      display: flex;
      flex-direction: column;
    }
  
    .vip-landscape-right {
      flex: 1 1 auto;
      min-width: 0;
    }
  
    /* compact the left column */
    .vip-level-card {
      padding: 14px;
      gap: 8px;
    }
  
    .vip-level-card-label {
      font-size: 10px;
    }
  
    .vip-level-badge {
      width: 84px;
      height: 84px;
    }
  
    .vip-level-name {
      font-size: 18px;
    }
  
    .vip-level-btn {
      padding: 7px 18px;
    }
  
    .vip-steps {
      padding: 12px 14px;
      gap: 10px;
    }
  
    .vip-step-icon {
      width: 26px;
      height: 26px;
      font-size: 12px;
    }
  
    .vip-step-text {
      font-size: 10px;
    }
  
    .vip-next {
      padding: 12px 14px;
    }
  
    .vip-next-badge {
      width: 36px;
      height: 36px;
    }
  
    .vip-next-label {
      font-size: 10px;
    }
  
    .vip-next-foot {
      margin-top: 10px;
    }
  
    .vip-next-req {
      font-size: 11px;
    }
  
    /* compact the table so every row fits without vertical scroll */
    .vip-cmp-table {
      font-size: 11px;
      min-width: 0;
    }
  
    .vip-cmp-table thead th {
      padding: 9px 6px;
    }
  
    .vip-cmp-corner {
      padding-left: 12px;
      font-size: 12px;
    }
  
    .vip-cmp-badge {
      width: 30px;
      height: 30px;
      margin-bottom: 3px;
    }
  
    .vip-cmp-name {
      font-size: 10px;
    }
  
    .vip-cmp-table tbody th[scope="row"] {
      padding: 10px;
      font-size: 11px;
    }
  
    .vip-cmp-table tbody td {
      padding: 6px;
    }
  
    .vip-cmp-section th {
      padding: 10px !important;
      font-size: 10px !important;
    }
  }
  
  @media (min-width: 1024px) {
    .vip-page-section {
      padding: 5.5rem 0 7rem;
    }
  
    .vip-hero-badge {
      width: 84px;
      height: 84px;
    }
  
    .vip-hero-title {
      font-size: 26px;
    }
  
    .vip-grid {
      grid-template-columns: repeat(4, 1fr);
      align-items: stretch;
    }
  
    .vip-card {
      display: flex;
      flex-direction: column;
    }
  
    .vip-benefits-list,
    .vip-task-list,
    .vip-tier-list {
      flex: 1;
    }
  
    .vip-summary-bar {
      flex-wrap: nowrap;
      justify-content: space-around;
    }
  
    .page-referral .ref-page-section {
      padding: 5.5rem 0 7rem;
    }
  
    .ref-page-title {
      font-size: 28px;
    }
  
    .page-p2e .p2e-page-section {
      padding: 5.5rem 0 15rem;
    }
  
    .p2e-title {
      font-size: 26px;
    }
  }

  @media (min-width: 1441px) {
    .page-p2e .p2e-page-container {
      height: 550px;
      min-height: 550px;
      max-height: 550px;
    }

    .page-p2e .ms-card {
      gap: 4px;
      padding: 12px 12px 10px;
    }

    .page-p2e .ms-card-art {
      height: clamp(62px, 5vw, 78px);
    }

    .page-p2e .ms-card-art img {
      max-width: clamp(70px, 5.5vw, 86px);
    }

    .page-p2e .ms-card-reward {
      font-size: 18px;
    }

    .page-p2e .fw-wheel-area {
      width: min(340px, 35vw, 100%);
    }
  }
  
  @media (min-width: 1100px) {
    .slx-layout {
      grid-template-columns: 18% 1fr;
    }
  
    .slx-games-grid {
      grid-template-columns: repeat(10, 1fr);
    }
  
    .slx-banner-text h1 {
      font-size: 24px;
    }
  
    .slx-banner-art {
      height: 120px;
    }
  }
  
  @media (min-width: 1200px) {
    .promo-page-title {
      font-size: 38px;
    }
  
    .vip-hero-title {
      font-size: 28px;
    }
  
    .vip-hero-value {
      font-size: 20px;
    }
  }
  
  @media (min-width: 1280px) {
    .page-referral .ref-page-container {
      padding-inline: 28px;
    }
  }
  
  @media (max-width: 899.98px) {
    .top-header {
      transition: background 0.25s ease, backdrop-filter 0.25s ease,
        box-shadow 0.25s ease, border-color 0.25s ease;
      border-bottom: 1px solid transparent;
    }
  
    .top-header.scrolled {
      background: rgba(20, 12, 40, 0.55);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom-color: rgba(255, 255, 255, 0.12);
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    }
  }
  
  @media (max-width: 899px) {
    .category-nav-section {
      /* width: 100vw; */
      max-width: 100vw;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      z-index: 7;
      margin-left: 0;
      margin-right: 0;
    }
  
    .category-nav-section .container {
      max-width: none;
      width: 100%;
      padding-left: 0;
      padding-right: 0;
    }
  
    .category-tabs-swiper {
      padding: 6px 12px;
      background: linear-gradient(180deg,
          rgba(255, 255, 255, 0.10) 0%,
          rgba(255, 255, 255, 0.03) 100%);
      border-top: 1px solid rgba(255, 255, 255, 0.10);
      border-bottom: 1px solid rgba(255, 255, 255, 0.10);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
  
    .category-tabs-swiper .cat-btn.swiper-slide {
      padding: 8px 4px;
      border-radius: 14px;
      transition: background 0.2s ease;
    }
  
    .category-tabs-swiper .cat-btn.swiper-slide.active {
      background: linear-gradient(180deg,
          rgba(255, 255, 255, 0.22) 0%,
          rgba(255, 255, 255, 0.06) 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
    }
  
    .category-tabs-swiper .cat-btn.swiper-slide+.cat-btn.swiper-slide::before {
      display: none;
    }
  
    .sl-banner-wrap {
      width: calc(100% + 2rem);
      margin-left: -1rem;
      margin-right: -1rem;
      border-radius: 0;
      border-left: none;
      border-right: none;
    }
  
    .event-cat-nav .cat-btn {
      flex: 0 0 auto;
      min-width: 70px;
    }
  
    /* Show the event category nav above the P2E panel on mobile */
    .p2e-page-container>.container {
      order: -1;
      padding: 0;
    }
  
    .event-cat-nav-section {
      margin-top: 0;
      margin-bottom: 16px;
    }
  
    .account-cat-nav .cat-btn {
      flex: 0 0 auto;
      min-width: 72px;
    }
  }
  
  @media (max-width: 860px) {
    .slx-layout {
      grid-template-columns: 170px 1fr;
      gap: 10px;
    }
  
    .slx-games-grid {
      grid-template-columns: repeat(6, 1fr);
    }
  
    .slx-banner-text h1 {
      font-size: 16px;
    }
  
    .slx-banner-art {
      height: 80px;
    }
  }
  
  @media (max-width: 640px) {
    .redempt-grid {
      gap: 0;
      padding: 0;
    }

    .redempt-item {
      margin-top: 56px;
      padding-top: 30px;
    }

    .redempt-item img {
      max-width: 112px;
      top: -56px;
    }

    .redempt-points {
      font-size: 22px;
      margin-top: 38px;
    }

    .redempt-min {
      font-size: 13px;
    }

    .redempt-claim-btn {
      padding: 9px 22px;
      font-size: 16px;
    }
  }

  @media (max-width: 600px) {
    .smh-mobile-hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px 10px;
      border-bottom: 1px solid rgba(155, 92, 255, 0.15);
      background: rgba(255, 255, 255, 0.04);
      flex-shrink: 0;
    }
  
    .smh-mobile-hdr-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }
  
    .slx-content {
      padding: 80px 10px 105px;
    }
  
    .slx-layout {
      grid-template-columns: 1fr;
    }
  
    .slx-sidebar {
      max-height: none;
      overflow: visible;
    }
  
    .slx-filter-grid {
      grid-template-columns: repeat(4, 1fr);
      max-height: 128px;
      overflow: hidden;
      transition: max-height 0.35s ease;
    }
  
    .slx-filter-grid.expanded {
      max-height: 1200px;
    }
  
    .slx-filter-expand-btn {
      display: flex;
    }
  
    .slx-banner-art {
      display: none;
    }
  
    .slx-banner-text h1 {
      font-size: 15px;
    }
  
    .slx-games-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }
  
    .info-grid {
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 559px) {
    .ms-nav {
      display: none;
    }
  }
  
  @media (max-width: 400px) {
    .redempt-grid {
      gap: 0;
    }
  }

  @media (max-width: 520px) {
    .page-home .center-content {
      padding-top: 20rem;
    }
  
    .hero-bg {
      background: url(../img/background/bg-desktop.webp) no-repeat top center;
      background-size: cover;
    }
  }
  
  @media (max-width: 480px) {
    .acct-dropup-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  @media (max-width: 380px) {
    .top-header.scrolled {
      border: 1px solid rgba(255, 255, 255, 0.12);
      width: 100%;
    }
  
    /* -- Header -- */
    .top-header {
      top: 0;
      left: 0px;
      right: 12px;
      padding: 0;
    }
  
    .wallet-pill {
      padding: 5px 8px;
      gap: 5px;
    }
  
    .wallet-amount {
      font-size: 12px;
    }
  
    .wallet-icon {
      width: 20px;
      height: 20px;
      font-size: 10px;
    }
  
    .wallet-caret-icon {
      font-size: 0.625rem;
    }
  
    .header-right {
      gap: 4px;
    }
  
    .auth-btn {
      padding: 6px 10px;
      font-size: 11px;
      gap: 4px;
    }
  
    .auth-btn .app-icon {
      font-size: 0.6875rem;
    }
  
    .reg-step-num {
      width: 30px;
      height: 30px;
      font-size: 12px;
    }
  
    .reg-step-label {
      font-size: 9px;
    }
  
    .reg-step-line {
      margin-top: 15px;
      min-width: 14px;
    }
  
    .otp-input {
      width: 38px !important;
      height: 44px;
      font-size: 18px;
    }
  
    .reg-btn {
      padding: 12px;
      font-size: 13px;
    }
  
    /* -- Logo -- */
    .brand-logo {
      top: 58px;
    }
  
    .logo-holdem {
      font-size: 28px;
    }
  
    .logo-hub {
      font-size: 13px;
      letter-spacing: 6px;
    }
  
    /* -- Dealer -- */
    .dealer-stage {
      top: 120px;
      height: 200px;
    }
  
    .dealer-img.placeholder {
      width: 200px;
      height: 150px;
    }
  
    /* -- Dashboard -- */
    .dashboard-layer {
      padding-left: 0;
      padding-right: 0;
    }
  
    /* -- Cards & Grid -- */
    .glass-card {
      padding: 10px;
      margin-bottom: 15px;
    }
  
    .info-grid {
      gap: 8px;
    }
  
    .card-header-row h3 {
      font-size: 11px;
    }
  
    /* -- Bottom Nav -- */
    .bottom-nav {
      left: 12px;
      right: 12px;
      bottom: 12px;
      height: 70px;
    }
  
    .deposit-btn {
      width: 85px;
      height: 100px;
    }
  
    .deposit-btn .deposit-icon {
      font-size: 1.75rem;
    }
  
    .deposit-btn span {
      font-size: 10px;
    }
  
    .deposit-item {
      bottom: 0;
    }
  
    .nav-item {
      font-size: 9px;
    }
  }
  
  @media (max-width: 375px) {
  
    /* Tighten the top header so hamburger + logo + auth buttons fit on one row */
    .top-header {
      padding: 12px 10px;
      gap: 6px;
      width: 100%;
    }
  
    .header-left {
      grid-gap: 6px;
      gap: 6px;
      min-width: 0;
    }
  
    .header-right {
      gap: 6px;
    }
  
    .logo-img {
      max-width: 110px;
    }
  
    .hamburger {
      padding: 4px;
      max-height: 42px;
    }
  
    /* Compact auth buttons; keep them readable but stop the row from overflowing */
    .auth-btn {
      padding: 7px 10px;
      font-size: 11px;
      gap: 4px;
      letter-spacing: 0.2px;
    }
  
    .auth-btn .app-icon {
      font-size: 0.75rem;
    }
  }
  
  @media (max-width: 340px) {
    .auth-btn span {
      display: none;
    }
  
    .auth-btn {
      padding: 8px;
      border-radius: 50%;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
  
    .checkin-claim-btn,
    .checkin-node--jackpot .checkin-node-dot {
      animation: none;
    }
  }

  /* ========================================================================
     Figma amendment: shared color/background pass
     Layout, content, links, and interaction behavior intentionally unchanged.
     ======================================================================== */

  /* Side menu / sidebar surfaces */
  .side-menu--hub {
    background: var(--figma-side-menu-bg) !important;
    border-right-color: var(--figma-surface-border);
    box-shadow: var(--figma-violet-glow), inset -1px 0 0 rgba(255, 255, 255, 0.10);
  }

  .side-menu--hub .smh-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.70);
    background: linear-gradient(117deg, rgba(216, 172, 250, 0.47) -75.39%, rgba(255, 255, 255, 0.00) 104.01%);
    box-shadow: 0 0 9.7px 4px rgba(196, 130, 247, 0.30) inset;
    backdrop-filter: blur(21px);
  }

  .side-menu--hub .smh-banner,
  .side-menu--hub .smh-promo-card {
    background: var(--figma-side-card-bg) !important;
    border-color: var(--figma-surface-border);
  }

  /* Figma "Main Blur Effect" glass — invite banner, wallet/account links, status bar */
  .side-menu--hub .smh-invite-banner,
  .side-menu--hub .smh-link,
  .side-menu--hub .smh-status-bar {
    border-radius: 10px !important;
    border: 1px solid rgb(255 255 255 / 23%) !important;
    background: linear-gradient(113deg, rgba(255, 255, 255, 0.47) 0%, rgba(255, 255, 255, 0.00) 110.84%) !important;
    -webkit-backdrop-filter: blur(21px) !important;
    backdrop-filter: blur(21px) !important;
  }

  /* ============ Figma node 63:3021 — game hub (exact) ============ */
  .side-menu--hub .smh-hub {
    background:
      radial-gradient(ellipse 58% 42% at 50% 40%, rgba(255, 255, 255, 0.18) 0%, rgba(144, 0, 255, 0) 62%),
      linear-gradient(180deg, rgba(177, 89, 245, 0.47) 0%, rgba(63, 19, 97, 0.20) 100%) !important;
    border: 1px solid rgba(216, 172, 250, 0.85) !important;
    border-radius: 20px !important;
    -webkit-backdrop-filter: blur(21px) !important;
    backdrop-filter: blur(21px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 24px rgba(177, 89, 245, 0.22) !important;
  }

  /* Outer game circles: linear #4e1779 -> #9d2ff2, lavender ring */
  .side-menu--hub .smh-hub-icon {
    background: linear-gradient(180deg, #4e1779 0%, #9d2ff2 100%) !important;
    border: 1px solid #d8acfa !important;
    box-shadow: 0 0 10px rgba(157, 47, 242, 0.60), inset 0 2px 3px rgba(255, 255, 255, 0.30) !important;
  }

  /* Center HOME: #c482f7 -> #7e26c1 -> #1f0930, purple glow (was gold) */
  .side-menu--hub .smh-hub-icon--home {
    background: linear-gradient(180deg, #c482f7 0%, #7e26c1 34%, #1f0930 100%) !important;
    border: 1px solid #d8acfa !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.50), 0 0 22px rgba(157, 47, 242, 0.65), inset 0 2px 3px rgba(255, 255, 255, 0.45) !important;
    animation: none !important;
  }

  /* Dashed radial connectors: lavender #c482f7 */
  .smh-hub-lines line,
  .smh-hub-lines g { stroke: rgba(196, 130, 247, 0.85) !important; }

  /* RECENT pill: violet gradient, #b159f5 ring, lavender text */
  .side-menu--hub .smh-hub-recent {
    background: linear-gradient(180deg, #7e26c1 0%, #1f0930 100%) !important;
    border: 1px solid #b159f5 !important;
    color: #d8acfa !important;
  }
  .side-menu--hub .smh-hub-recent::before,
  .side-menu--hub .smh-hub-recent::after { display: none !important; }
  .side-menu--hub .smh-hub-recent i {
    color: #d8acfa !important;
    text-shadow: none !important;
  }

  /* Figma node 63:2973 — unify all icon tiles to one violet palette
     (overrides the per-tile rainbow colors set inline / by modifier classes) */
  .side-menu--hub .smh-hub-item {--hub-color: #9d2ff2 !important;}
  .side-menu--hub .smh-hub-item--center { --hub-color: #c482f7 !important; }
  .side-menu--hub .smh-link { --link-color: #b159f5 !important; }
  .side-menu--hub .smh-promo-card {
    --promo-color-a: #b159f5 !important;
    --promo-color-b: #7e26c1 !important;
  }

  .nav-item:hover {
    background: var(--figma-nav-hover-bg);
  }

  .deposit-btn {
    background: var(--figma-nav-active-bg) !important;
    border-color: var(--figma-surface-border);
    box-shadow: var(--figma-violet-glow), inset 0 2px 4px rgba(255, 255, 255, 0.34);
  }

  /* Product/provider cards */
  .slx-game-card,
  .slots-prov-card {
    background: var(--figma-product-card-bg) !important;
    border: 1px solid var(--figma-surface-border);
    box-shadow: 0 8px 20px rgba(23, 4, 58, 0.42);
  }

  .slx-game-card:hover,
  .slots-prov-card:hover {
    border-color: rgba(245, 222, 255, 0.72);
    box-shadow: var(--figma-violet-glow), 0 10px 24px rgba(23, 4, 58, 0.48);
  }

  .slx-game-overlay {
    background: var(--figma-product-overlay) !important;
  }

  /* Shared category navigation backgrounds */
  .category-tabs-swiper,
  .category-nav,
  .event-cat-nav {
    background: var(--figma-category-bg) !important;
    border-color: var(--figma-surface-border) !important;
    box-shadow: var(--figma-violet-glow), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  }

  /* Inner nav stays transparent inside the swiper wrapper (the wrapper carries
     the glass panel) — avoids a double-layered background/border. */
  .category-tabs-swiper .category-nav {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .category-nav .cat-btn.active,
  .event-cat-nav .cat-btn.active {
    background: var(--figma-category-active-bg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 0 18px rgba(202, 129, 255, 0.22) !important;
  }

  /* Dashboard banner and shared glass-card surfaces */
  .dash-banner-swiper {
    background: var(--figma-side-card-bg) !important;
    border: 1px solid var(--figma-surface-border);
    box-shadow: var(--figma-violet-glow), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  }

  .dash-banner-slide,
  .dash-banner-slide--1,
  .dash-banner-slide--2,
  .dash-banner-slide--3,
  .dash-banner-slide--4,
  .dash-banner-slide--image {
    background: var(--figma-side-card-bg) !important;
  }

  .dash-banner-slide--image::before {
    /* Figma node 63:2838 — magenta overlay fading to reveal the art */
    background:
      linear-gradient(90deg,
        rgba(177, 89, 245, 1) 0%,
        rgba(126, 38, 193, 0.55) 44%,
        transparent 74%) !important;
  }

  .glass-card {
    background: var(--figma-side-card-bg) !important;
    border-color: var(--figma-surface-border);
    box-shadow: var(--figma-violet-glow), inset 0 1px 1px rgba(255, 255, 255, 0.24);
  }

  /* Live wins, VIP dragon, Top games — match the bottom-nav glass treatment */
  .live-wins.glass-card,
  .vip-dragon.glass-card,
  .top-games.glass-card {
    background: linear-gradient(113deg, rgba(216, 172, 250, 0.47) 0%, rgba(255, 255, 255, 0.00) 110.84%) !important;
    border: 1px solid rgba(255, 255, 255, 0.41) !important;
    box-shadow: 0 0 9.7px 4px rgba(196, 130, 247, 0.30) inset !important;
    -webkit-backdrop-filter: blur(21px) !important;
    backdrop-filter: blur(21px) !important;
  }

  /* Check-in bonus: node 63:2731 violet/magenta + warm-gold palette */
  .checkin-bonus.glass-card {
    background: var(--figma-checkin-bg) !important;
    border-color: var(--figma-checkin-border) !important;
    box-shadow: 0 0 22px rgba(126, 38, 193, 0.30), inset 0 1px 1px rgba(255, 255, 255, 0.22);
  }

  .checkin-bonus .checkin-cal-icon {
    color: #ffffff;
    background: linear-gradient(135deg, #7e26c1 0%, #1f0930 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: 0 2px 8px rgba(20, 6, 40, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  .checkin-bonus .checkin-title-row h3 {
    background: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  .checkin-bonus .checkin-subtitle {
    color: rgba(255, 255, 255, 0.78) !important;
  }

  .checkin-bonus .checkin-streak-row {
    background: rgba(31, 9, 48, 0.80) !important;
    border-color: rgba(177, 89, 245, 1) !important;
  }

  .checkin-bonus .checkin-track-rail {
    background: linear-gradient(90deg, rgba(177, 89, 245, 1) 0%, rgba(31, 9, 48, 1) 100%) !important;
  }

  .checkin-bonus .checkin-node-day {
    color: #d8acfa !important;
  }

  .checkin-bonus .checkin-node--claimed .checkin-node-day {
    color: #ffffff !important;
  }

  .checkin-bonus .checkin-node--claimed .checkin-node-dot {
    background: #9d2ff2 !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 12px rgba(157, 47, 242, 0.75), 0 0 22px rgba(210, 130, 255, 0.35) !important;
    color: #ffffff !important;
  }

  .checkin-bonus .checkin-node--claimed .checkin-node-btn {
    color: #ffffff !important;
    background: #9d2ff2 !important;
    box-shadow: 0 2px 6px rgba(120, 30, 190, 0.50) !important;
  }

  .checkin-bonus .checkin-node--locked .checkin-node-dot {
    background: rgba(31, 9, 48, 0.80) !important;
    border-color: rgba(177, 89, 245, 1) !important;
    color: #7e26c1 !important;
  }

  .checkin-bonus .checkin-node--ms .checkin-node-dot {
    border-color: rgba(177, 89, 245, 1) !important;
    color: #7e26c1 !important;
  }

  .checkin-bonus .checkin-node--jackpot .checkin-node-dot {
    background:
      radial-gradient(ellipse 70% 45% at 50% 22%, rgba(255, 245, 190, 0.6) 0%, transparent 60%),
      #ffba00 !important;
    border-color: #fdd55b !important;
    box-shadow: 0 0 16px rgba(255, 190, 40, 0.64), 0 0 32px rgba(255, 130, 22, 0.28) !important;
    color: #5a2e00 !important;
  }

  .checkin-bonus .checkin-node-val {
    color: #d8acfa !important;
  }

  .checkin-bonus .checkin-node--claimed .checkin-node-val {
    color: #ffffff !important;
  }

  .checkin-bonus .checkin-node--jackpot .checkin-node-val {
    color: #ffc300 !important;
  }

  .checkin-bonus .checkin-claim-btn {
    color: #5a2e00 !important;
    background: var(--figma-checkin-gold) !important;
    border-color: rgba(255, 247, 5, 0.50) !important;
    box-shadow: 0 2px 8px rgba(255, 177, 32, 0.42) !important;
  }

  .checkin-bonus .checkin-node-ms-tag {
    color: #d290ff !important;
    background: rgba(31, 9, 48, 0.80) !important;
    border-color: rgba(177, 89, 245, 1) !important;
  }

  /* Dashboard banner arrangement: match the framed copy panel in the mockup. */
  .dash-banner-slide--image .banner-promo-copy--dash {
    left: 18px;
    max-width: 50%;
    padding: 13px 15px;
    gap: 5px;
    box-sizing: border-box;
    align-items: flex-start;
  }

  .dash-banner-slide--image .banner-promo-copy--dash .banner-promo-kicker {
    min-height: 18px;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.47) 0%, rgba(255, 255, 255, 0) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
  }

  .dash-banner-slide--image .banner-promo-copy--dash strong {
    font-size: 17px;
    line-height: 1.08;
    white-space: nowrap;
  }

  .dash-banner-slide--image .banner-promo-copy--dash small {
    color: rgba(255, 255, 255, 0.84);
  }

  .dash-banner-slide--image .banner-promo-copy--dash .dash-banner-btn {
    margin-top: 5px;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    color: #7e26c1;
    background: linear-gradient(135deg, #faf0f9 0%, #ebd5fc 100%) !important;
    box-shadow: 0 3px 12px rgba(45, 6, 92, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.62);
  }

  .dash-banner-slide--image .banner-promo-copy--dash .dash-banner-btn:hover {
    box-shadow: 0 5px 16px rgba(45, 6, 92, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }