.lobyMainComponent {
    --Text-primaryNoneBg: var(--base-black);
    --Surface-bgSecondary15: var(--opacity-15b);
    --Text-prizeHolder: var(--highlight-100);
    --Border-rgb60: var(--highlight-60);
    --Icon-disabled: var(--neutral-800);
  }
  
  @media (prefers-color-scheme: dark) {
    .lobyMainComponent {
      --Text-primaryNoneBg: var(--base-white);
      --Surface-bgSecondary15: var(--opacity-15w);
      --Text-prizeHolder: var(--highlight-100);
      --Border-rgb60: var(--highlight-60);
      --Icon-disabled: var(--neutral-800);
    }
  }
  
  .lobyMainComponent {
      display: flex;
      flex-direction: column;
      width: 100%;
      overflow-x: hidden;
      gap: 0;
    }
    
    .lobyMainComponent .mainContent {
      display: flex;
      flex-direction: column;
    }
    
    .lobyMainComponent .accountContentArea{
      width: 100%;
    }


    .lobyMainComponent .slotSection {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 0.5rem;
    }
    
    .lobyMainComponent .clubSection {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
    
    .lobyMainComponent .sliderContainer {
      position: relative;
      width: 100%;
      overflow: hidden; 
      height: auto;
      min-height: 12rem;
      display: flex;
      justify-content: center;
      padding: 0;         
    }
    
    
    .lobyMainComponent .sliderTrack {
        display: flex;
        transition: transform 0.4s ease;
        will-change: transform;
        position: relative;
    }
    
    .lobyMainComponent .slideItem {
      flex: 0 0 auto;
      transition: transform 0.3s ease, opacity 0.3s ease;
      opacity: 0.3;
      transform: scale(0.7);
      pointer-events: auto; 
      cursor: pointer;
    }
    
    .lobyMainComponent .slideItem.active {
      transform: scale(1);
      opacity: 1;
      pointer-events: auto;
      cursor: default;
    }
    
    .lobyMainComponent .slideItem.side {
      transform: scale(0.80);
      opacity: 0.9;
      pointer-events: auto;
      cursor: pointer;
    }
    
    .lobyMainComponent .slideItem.hidden {
      transform: scale(0.7);
      opacity: 0.3;
      pointer-events: auto;
      cursor: pointer;
    }
    
    .lobyMainComponent .cardWrapper {
      width: min(15rem, 60vw);
      max-width: 60vw;
    }
    
    .lobyMainComponent .clubActions {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      padding: 0.5rem 0 1rem;
    }

    .lobyMainComponent .clubBtn {
        border: min(0.063rem, 1px) solid var(--Text-prizeHolder);
    }


    .lobyMainComponent .bannersSection {
      width: 100%;
      padding: 1rem;
      display: flex;
      justify-content: center;
      margin-top: 2.44rem;
    }
    
    .lobyMainComponent .bannersComponent {
      position: relative;
      width: 100%;
      max-width: 23rem;
    }
    
    .lobyMainComponent .bannerContainer {
      position: relative;
      width: 100%;
      height: 10.625rem;
      overflow: hidden;
      border-radius: 0.75rem;
    }
    
    .lobyMainComponent .bannerTrack {
      display: flex;
      transition: transform 0.5s ease-in-out;
      height: 100%;
      width: 100%;
    }
    
    .lobyMainComponent .bannerSlide {
      flex: 0 0 100%;
      height: 100%;
      width: 100%;
    }
    
    .lobyMainComponent .bannerImg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .lobyMainComponent .header{
        margin-bottom: 0.75rem;
    }

    .lobyMainComponent .header img{
        margin: 0 auto;
    }

    .lobyMainComponent .header .menu{
      width: 0.5rem;
    }

    .lobyMainComponent .header .menu::after{
      font-size: 1.5rem;
      height: 1.75rem;
    }