@charset "UTF-8";

/**
 * Desktop layout override for SUPER PARI
 * Applies at min-width: 769px only - mobile unchanged
 */

@media screen and (min-width: 769px) {
  /* Scope all overrides under #app for higher specificity over Vue scoped styles */
  /* Main app container - expand from 10rem to full desktop width */
  #app {
    width: 100% !important;
    max-width: 1280px !important;
    min-height: 100vh;
  }

  /* Body - match app background to reduce grey sides */
  html,
  body {
    background-color: var(--bg_color_L1, #0d0d0d) !important;
  }

  /* Bottom tabbar - span full content width */
  .tabbar__container {
    width: 100% !important;
    max-width: 1280px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Fixed navbar/header */
  .navbar-fixed {
    width: 100% !important;
    max-width: 1280px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Popups - slightly wider on desktop */
  .van-popup.van-popup--bottom,
  .van-popup.van-popup--center {
    max-width: 512px !important;
  }

  /* Game grids - force GRID layout (page-home-other uses flex by default) */
  /* #app prefix ensures we override Vue scoped [data-v-*] styles */
  #app .lottery .container,
  #app .popular .container,
  #app .fish .container,
  #app .sport .container,
  #app .video .container,
  #app .chess .container {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 0.24rem !important;
  }

  /* Constrain image/card sizes in lottery, popular, fish, sport, video, chess */
  #app .lottery .container img,
  #app .popular .container img,
  #app .popular .container > div,
  #app .fish .container img,
  #app .sport .container img,
  #app .video .container img,
  #app .chess .container img {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 140px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  #app .popular .container > div {
    min-width: 0 !important;
  }

  /* Platform recommendation & Popular sections (hot_container) – 6 columns, smaller cards */
  #app .hot_container .platform .list,
  #app .hot_container .popular .list,
  #app .hot_container .pupularAll .list {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-gap: 0.24rem !important;
  }

  #app .hot_container .platform .list > div,
  #app .hot_container .popular .list > div,
  #app .hot_container .pupularAll .list > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #app .hot_container .platform .list .item,
  #app .hot_container .popular .list .item,
  #app .hot_container .pupularAll .list .item {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    max-width: 160px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #app .hot_container .platform .list .item img,
  #app .hot_container .popular .list .item img,
  #app .hot_container .pupularAll .list .item img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  /* Game list grid (AllGames / home grid) – more columns */
  #app .gameListGrid__container-wrapper {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  #app .gameListGrid__container-wrapper__item {
    width: 100% !important;
    max-width: 160px !important;
    height: auto !important;
    aspect-ratio: 16/10 !important;
  }

  #app .gameListGrid__container-wrapper__item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Min game / fishing grid – more columns */
  #app .minGame_container {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  #app .minGame_container .onlineGamesItem {
    width: 100% !important;
    max-width: 140px !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    margin: 0 auto !important;
  }

  #app .minGame_container .onlineGamesItem .fish_img,
  #app .minGame_container .onlineGamesItem .min_game_img {
    width: 100% !important;
    height: auto !important;
    max-height: 140px !important;
  }

  /* Other game containers – more columns, smaller images */
  #app .onlineGamesItem__container {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  #app .onlineGamesItem__container .item,
  #app .onlineGamesItem__container .item .gameImg {
    width: 100% !important;
    max-width: 160px !important;
    height: auto !important;
    aspect-ratio: 3/4 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #app .gamesList__container-list {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  #app .slot_list .slot_item .slot_img_box {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  #app .slot_list .slot_item .slot_img_box img {
    width: 100% !important;
    max-width: 140px !important;
    height: auto !important;
  }

  #app .slotsPic,
  #app [data-v-175e7d51] .slotsPic {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  #app .slotsPic img,
  #app [data-v-175e7d51] .slotsPic img {
    width: 100% !important;
    max-width: 140px !important;
    height: auto !important;
  }

  /* Platform/Recharge tabcard - more columns */
  #app .Recharge__container-tabcard {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  /* Fish game list – 6 columns, smaller cards */
  #app .fish_game .fish_list {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
  }

  #app .fish_game .fish_list .onlineGamesItem,
  #app .all_game .onlineGamesItem {
    width: 100% !important;
    max-width: 140px !important;
    height: auto !important;
  }

  #app .all_game {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  /* Skeleton loading – match desktop grid */
  #app .skeleton_hot .hot_list {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  /* Notice bar - full width of app */
  .noticeBar__container {
    width: 100% !important;
    max-width: 1280px !important;
  }
}