/* Homepage Layout Override - Casino Red (#7B0F0F / #8E1414) - Upstart style like image */

/* Override CSS variables - app uses these everywhere */
:root {
  --main-color: #8E1414 !important;
  --main_gradient-color: linear-gradient(90deg, #8E1414 0%, #7B0F0F 100%) !important;
  --main_gradient-color2: linear-gradient(180deg, #8E1414 0%, #7B0F0F 100%) !important;
  --bg_color_L1: #7B0F0F !important;
  --bg_color_L2: rgba(0, 0, 0, 0.25) !important;
  --bg_color_L3: #8E1414 !important;
  --text_color_L1: #fff !important;
  --text_color_L2: rgba(255, 255, 255, 0.9) !important;
  --text_color_L4: #fff !important;
}

/* Main Red background (#7B0F0F - Dark Maroon / Casino Red) */
body, html, #app,
#app .content,
.content[data-v-f4c030dd],
[class*="content"][data-v-f4c030dd] {
  background-color: #7B0F0F !important;
  background: #7B0F0F !important;
}

/* Lottery/Activity page - Image 2 style: white bg, 2-col card grid */
.content[data-v-f4c030dd],
#app .content[data-v-f4c030dd] {
  background: #fff !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.35rem !important;
  padding: 0.4rem !important;
  border-radius: 12px !important;
  margin: 0.35rem !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}
/* Header/title spans full width in grid */
.content[data-v-f4c030dd] > *:first-child {
  grid-column: 1 / -1 !important;
}
.content-item[data-v-f4c030dd] {
  background: linear-gradient(135deg, #4A90E2 0%, #E91E8C 50%, #FF6B6B 100%) !important;
  color: #fff !important;
  border-radius: 14px !important;
  min-height: 2rem !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  padding: 0.4rem !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  overflow: hidden !important;
  position: relative !important;
}
.content-item[data-v-f4c030dd]:nth-child(2) {
  background: linear-gradient(135deg, #E91E8C 0%, #9C27B0 50%, #673AB7 100%) !important;
}
.content-item[data-v-f4c030dd]:nth-child(3) {
  background: linear-gradient(135deg, #00BFA5 0%, #1DE9B6 50%, #69F0AE 100%) !important;
}
.content-item[data-v-f4c030dd]:nth-child(4) {
  background: linear-gradient(135deg, #FF9800 0%, #FF5722 100%) !important;
}
.content-item[data-v-f4c030dd] img,
.content-item[data-v-f4c030dd] span,
.content-item[data-v-f4c030dd] h4,
.content-item[data-v-f4c030dd] h3 {
  color: #fff !important;
}
/* Lottery page header - dark text on white (image 2 style) */
.content[data-v-f4c030dd] .title,
.content[data-v-f4c030dd] [class*="title"] {
  background: transparent !important;
  color: #1E2637 !important;
}

/* Homepage main content - hot AND lottery sections (same style) */
.hot_container,
.hot_container [data-v-d06787cb],
[class*="lottery_container"],
[class*="lotteryContainer"],
[class*="lottery"] {
  background-color: #7B0F0F !important;
  color: #fff !important;
}

/* ========== LOTTERY SECTION - Image 2 style (97CLUB): white bg, 3-card grid ========== */
/* Lottery section wrapper - white/light background like image 2 */
#app [class*="lottery"]:not([class*="lotteryActivity"]):not([class*="lotteryDetail"]),
#app [class*="Lottery"],
[class*="lottery_container"],
[class*="lotteryContainer"],
.hot_container [class*="lottery"] {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 0.4rem !important;
  margin: 0.35rem !important;
  margin-bottom: 0.5rem !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

/* Lottery section header - "Lottery" + icon + description (image 2 style) */
[class*="lottery"] .title:not(.platform .title):not(.popular .title),
[class*="lottery"] [class*="title"]:first-of-type {
  background: transparent !important;
  color: #1E2637 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0.25rem 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
[class*="lottery"] .title span,
[class*="lottery"] [class*="title"] span {
  color: #1E2637 !important;
  font-weight: 700 !important;
  font-size: 0.4rem !important;
}
/* Lottery description text - gray, below heading */
[class*="lottery"] p,
[class*="lottery"] [class*="desc"],
[class*="lottery"] [class*="tip"] {
  color: #768096 !important;
  font-size: 0.28rem !important;
  margin: 0.15rem 0 0.3rem !important;
  line-height: 1.4 !important;
}

/* Lottery cards grid - 2 columns (2 top, 1 below) like image 2 */
#app [class*="lottery"] [class*="lotterySlot"],
#app [class*="lottery"] .lotterySlotItem,
[class*="lottery_container"] [class*="lotterySlot"],
[class*="lotteryContainer"] [class*="lotterySlot"],
[class*="lottery"] [class*="lotterySlotItem"] {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.35rem !important;
}

/* Lottery section - WIN GO / K3 / 5D big cards - vibrant gradients, rounded */
#app .lotterySlotItem,
#app [class*="lotterySlot"]:not([class*="lotterySlotItem"]) > *,
.lotterySlotItem,
[class*="lotterySlotItem"] {
  background: var(--main_gradient-color) !important;
  background: linear-gradient(135deg, #4A90E2 0%, #E91E8C 50%, #FF6B6B 100%) !important;
  border-radius: 14px !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  min-height: 2rem !important;
  overflow: hidden !important;
}
/* Allow card-specific gradients - 2nd card pink/purple, 3rd green/teal */
#app .lotterySlotItem:nth-child(2),
[class*="lotterySlotItem"]:nth-child(2) {
  background: linear-gradient(135deg, #E91E8C 0%, #9C27B0 50%, #673AB7 100%) !important;
}
#app .lotterySlotItem:nth-child(3),
[class*="lotterySlotItem"]:nth-child(3) {
  background: linear-gradient(135deg, #00BFA5 0%, #1DE9B6 50%, #69F0AE 100%) !important;
}
#app .lotterySlotItem span,
#app .lotterySlotItem h4,
#app .lotterySlotItem h3,
.lotterySlotItem span,
.lotterySlotItem h4,
[class*="lotterySlot"] span,
[class*="lotterySlot"] h4 {
  color: #fff !important;
}
/* HOT / NEW badge - top-left on lottery cards */
#app .lotterySlotItem [class*="badge"],
#app .lotterySlotItem [class*="hot"],
#app .lotterySlotItem [class*="new"],
[class*="lotterySlotItem"] [class*="badge"] {
  background: #FF5722 !important;
  color: #fff !important;
  font-size: 0.2rem !important;
  padding: 0.08rem 0.25rem !important;
  border-radius: 6px !important;
  position: absolute !important;
  top: 0.2rem !important;
  left: 0.2rem !important;
}

/* ========== LOTTERY - Exact Hot-style: dark bg, 4×3 grid ========== */
.lottery {
  background: #7B0F0F !important;
  border-radius: 12px !important;
  padding: 0.4rem !important;
  margin: 0.35rem !important;
  margin-bottom: 0.5rem !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
}

/* Hot-style header - white text */
.lottery .hot-title-container {
  margin-bottom: 0.3rem !important;
  background: rgba(0,0,0,0.2) !important;
  padding: 0.3rem 0.35rem !important;
  border-radius: 8px !important;
}
.lottery .hot-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 !important;
}
.lottery .title-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
}
.lottery .title-icon {
  width: 0.5rem !important;
  height: 0.5rem !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1);
}
.lottery .title-icon-box {
  display: flex !important;
  align-items: center !important;
  gap: 0.15rem !important;
}
.lottery .title-text {
  font-size: 0.4rem !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.lottery .all-game-num {
  background: #8E1414 !important;
  color: #fff !important;
  font-size: 0.24rem !important;
  padding: 0.05rem 0.2rem !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}
.lottery .more-button {
  display: flex !important;
  align-items: center !important;
  gap: 0.1rem !important;
  color: #fff !important;
  font-size: 0.28rem !important;
  cursor: pointer !important;
  font-weight: 500 !important;
}
.lottery .more-icon .van-icon-arrow {
  font-size: 0.2rem !important;
  color: #fff !important;
}

/* Game grid - 4 per row, 3 rows (like lobbyItem style) */
.lottery .game-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.26rem !important;
}
.lottery .game-item {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  aspect-ratio: 1 !important;
  background: rgba(0,0,0,0.3) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.lottery .instance--y {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}
.lottery .lazy-image-wrapper {
  position: absolute !important;
  inset: 0 !important;
}
.lottery .lazy-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  vertical-align: middle !important;
}
/* Provider badge - top-left (like Hot) */
.lottery .frame-2036 {
  position: absolute !important;
  top: 0.15rem !important;
  left: 0.15rem !important;
  right: auto !important;
  bottom: auto !important;
}
.lottery .pg {
  background: rgba(0,0,0,0.65) !important;
  color: #fff !important;
  font-size: 0.2rem !important;
  padding: 0.08rem 0.22rem !important;
  border-radius: 5px !important;
  display: inline-block !important;
  font-weight: 600 !important;
}
/* Game title - bottom (like Hot) */
.lottery .game-title {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0.25rem 0.2rem 0.15rem !important;
  background: linear-gradient(transparent, rgba(0,0,0,0.85)) !important;
  color: #fff !important;
  font-size: 0.26rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Heart icon - top right with dark circle (like Hot) */
.lottery .like-0 {
  position: absolute !important;
  top: 0.15rem !important;
  right: 0.15rem !important;
  width: 0.4rem !important;
  height: 0.4rem !important;
  background: rgba(0,0,0,0.5) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.06rem !important;
}
.lottery .like-img {
  width: 0.22rem !important;
  height: 0.22rem !important;
  object-fit: contain !important;
}

/* Header Red (#8E1414) - navbar + section title bars like Hot */
#app .navbar,
#app [class*="navbar__content"],
#app .navbar-fixed,
#app [class*="navbar-fixed"] {
  background: #8E1414 !important;
  background-color: #8E1414 !important;
  color: #fff !important;
}

/* Section title bars - Header Red, flex layout like Hot (name | count | Game Lobby >) */
.hot_container .platform .title,
.hot_container .popular .title,
[class*="platform"] .title,
[class*="popular"] .title,
[class*="lottery"] .title,
[class*="lottery"] [class*="title"] {
  background: #8E1414 !important;
  color: #fff !important;
  padding: 0.3rem 0.5rem !important;
  margin: -0.35rem -0.35rem 0.21rem -0.35rem !important;
  border-radius: 8px 8px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

/* Platform/Recommended/Lottery sections - Hot section style cards */
.hot_container .platform,
.hot_container .popular,
[class*="platform"],
[class*="popular"],
[class*="lottery"] .platform,
[class*="lottery"] .popular,
[class*="lottery"] [class*="platform"],
[class*="lottery"] [class*="popular"] {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 8px;
  padding: 0.35rem !important;
  margin-bottom: 0.4rem !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Section titles - white, bold (Hot/Lottery header text) */
.hot_container .title span,
[class*="title"] span,
[class*="lottery"] .title span {
  color: #fff !important;
  font-weight: 600 !important;
}

/* Count badge - rounded, dark red bg, white border (like Hot "152") */
.hot_container .title [class*="badge"],
.hot_container .title [class*="count"],
[class*="platform"] .title [class*="badge"],
[class*="popular"] .title [class*="badge"],
[class*="lottery"] .title [class*="badge"] {
  background: #7B0F0F !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 6px !important;
  padding: 0.1rem 0.35rem !important;
  font-size: 0.28rem !important;
}

/* Game Lobby / More link - white "Game Lobby >" style (Hot + Lottery) */
.hot_container .title a,
[class*="more"],
[class*="lottery"] .title a,
[class*="lottery"] [class*="more"] {
  color: #fff !important;
  font-size: 0.28rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

/* Game grid - 4 columns like image (Hot + Lottery + all sections) */
.hot_container .platform > div,
.hot_container .popular > div,
[class*="platform"] > div,
[class*="popular"] > div,
[class*="lottery"] .platform > div,
[class*="lottery"] .popular > div,
.hot_container [class*="game"],
[class*="lottery"] [class*="game"],
[class*="lottery"] [class*="platform"] > div,
[class*="lottery"] [class*="popular"] > div {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.28rem !important;
}

/* Game tile cards - rounded, dark bg (Hot + Lottery) */
.hot_container img,
[class*="lottery"] img,
.hot_container [class*="game"] img,
[class*="lottery"] [class*="game"] img {
  border-radius: 8px;
  width: 100% !important;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Game tile wrapper - upstart style: dark card, shadow, rounded (Hot + Lottery) */
.hot_container [class*="game"] > div,
.hot_container [class*="game"] > a,
[class*="lottery"] [class*="game"] > div,
[class*="lottery"] [class*="game"] > a,
.hot_container .platform > div > div,
.hot_container .platform > div > a,
.hot_container .popular > div > div,
.hot_container .popular > div > a,
[class*="platform"] > div > div,
[class*="platform"] > div > a,
[class*="popular"] > div > div,
[class*="popular"] > div > a,
[class*="lottery"] .platform > div > div,
[class*="lottery"] .platform > div > a,
[class*="lottery"] .popular > div > div,
[class*="lottery"] .popular > div > a {
  background: rgba(0, 0, 0, 0.4) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
}

/* Game title at bottom of tile - white text */
.hot_container [class*="game"] [class*="title"],
[class*="lottery"] [class*="game"] [class*="title"],
.hot_container .platform [class*="name"],
.hot_container .popular [class*="name"],
[class*="lottery"] [class*="name"] {
  color: #fff !important;
  font-size: 0.28rem !important;
  font-weight: 600 !important;
}

/* Heart/favorite icon - white, top-right */
.hot_container [class*="heart"],
.hot_container [class*="favorite"],
[class*="lottery"] [class*="heart"],
[class*="lottery"] [class*="favorite"],
.hot_container svg[class*="heart"],
[class*="lottery"] svg[class*="heart"] {
  color: #fff !important;
  fill: #fff !important;
}

/* Top-left brand badge (SPRIBE, JILI, PG, LOTTERY, etc.) on game tiles */
.hot_container .platform > div [class*="badge"],
.hot_container .popular > div [class*="badge"],
.hot_container [class*="game"] > * [class*="badge"],
[class*="lottery"] [class*="game"] > * [class*="badge"],
[class*="lottery"] .platform > div [class*="badge"],
[class*="lottery"] .popular > div [class*="badge"] {
  background: rgba(0, 0, 0, 0.65) !important;
  color: #fff !important;
  font-size: 0.2rem !important;
  padding: 0.08rem 0.22rem !important;
  border-radius: 5px !important;
}

/* Winner list, Leader board sections */
[class*="winner"],
[class*="leader"],
[class*="payout"] {
  background: rgba(40, 20, 20, 0.9) !important;
  color: #fff !important;
  border-radius: 8px;
  padding: 0.4rem !important;
  margin-bottom: 0.4rem !important;
  border: 1px solid rgba(232, 90, 0, 0.2);
}

/* Tab bar / Bottom nav - Header Red #8E1414 like image */
[class*="tabbar"],
.tabbar__container,
#app .tabbar__container {
  background: #8E1414 !important;
  background-color: #8E1414 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
}

.tabbar__container-item,
[class*="tabbar"] [class*="item"] {
  color: rgba(255, 255, 255, 0.9) !important;
}

.tabbar__container-item.active,
[class*="tabbar"] [class*="active"] {
  color: #fff !important;
  font-weight: 600 !important;
}

/* ========== LOBBY ITEM - van-swipe to static grid: 4 per row, 3 rows, NO swipe ========== */
.lobbyItem .van-swipe,
.lobbyItem .my-swipe {
  overflow: visible !important;
}
.lobbyItem .van-swipe__track {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.26rem !important;
  transform: none !important;
  width: 100% !important;
  flex-wrap: wrap !important;
}
.lobbyItem .van-swipe-item {
  width: auto !important;
  display: contents !important;
}
.lobbyItem .van-swipe-item .b {
  display: contents !important;
}
.lobbyItem .van-swipe-item .b > img {
  aspect-ratio: 1 !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
  background: rgba(0,0,0,0.05) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Scrollable game rows */
[class*="scroll"],
[class*="swipe"] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}