/* ==========================================================================
   VEER.GAME THEME - 100% PIXEL-PERFECT REPLICA OF VEERGAME22.COM
   Exact colors, gradients, countdown digits, navbar and component styles
   ========================================================================== */

:root {
  --main-color: #20D374 !important;
  --main_gradient-color: linear-gradient(130deg, #C5BC0C 0%, #94B20B 33%, #20D374 66%, #0CBAC5 100%) !important;
  --main_gradient-color2: linear-gradient(180deg, #0CC551 0%, #088538 100%) !important;
  --light-main_gradient-color: var(--main_gradient-color) !important;
  --text_white: #fff !important;
  --light-bg_white: #fff !important;
  --light-main-color: var(--main-color) !important;
  --norm_red-color: #FB5B5B !important;
  --norm_green-color: #18B660 !important;
  --norm_secondary-color: #FEAA57 !important;
  --norm_Purple-color: #C86EFF !important;
  --norm_bule-color: #6EA8F4 !important;
  --button_dis_color: linear-gradient(90deg, #898a91 15.38%, #57585d 98.73%) !important;
  --text_color_L1: #FFFFFF !important;
  --text_color_L2: #D7D7D7 !important;
  --text_color_L3: #93939D !important;
  --text_color_L4: #1A1A2C !important;
  --bg_color_L1: #111217 !important;
  --bg_color_L2: #25272A !important;
  --bg_color_L3: #05012B !important;
  --Dividing-line_color: #374963 !important;
  --sheet_nva_color: #20D374 !important;
  --sheet_detail_bg_color: #374963 !important;
  --card_bg_color: rgba(3, 59, 59, .2) !important;
  --card_border_color: #0B4846 !important;
  --pop_bg-color: linear-gradient(180deg, #13BF77 13.44%, #4CCC77 86.56%) !important;
  --icon2: rgba(7, 221, 209, .3) !important;
  --tab1: #21D9CC !important;
  --tab2: #3BAF4C !important;
  --Secondary_red_color: #FD565C !important;
  --Secondary_green_color: #40AD72 !important;
  --darkBg: #25272A !important;
  --darkLight2: #25272A !important;
}

/* ==========================================================================
   Desktop / Viewport Background - Official Slate Grey (#9195a3)
   ========================================================================== */
html,
body {
  background-color: #9195a3 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  color: #ffffff !important;
}

/* App Container - Exactly 10rem mobile column centered, dark #111217 */
#app {
  width: 10rem !important;
  max-width: 10rem !important;
  min-height: 100vh !important;
  background-color: #111217 !important;
  margin: 0 auto !important;
  position: relative !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.4) !important;
  overflow-x: hidden !important;
}

.videowingo,
.lottery-container,
.WinTrx__C,
.lottery-info {
  background-color: #111217 !important;
  color: #ffffff !important;
}

/* Remove purple header arch gradient */
.lottery-info .bg,
.Wallet__C:before {
  display: none !important;
}

/* ==========================================================================
   Top Navbar - #25272A matching VeerGame, centered in 10rem container on desktop
   ========================================================================== */
.navbar,
.navbar.main,
.navbar.lottery {
  background: #25272A !important;
  background-color: #25272A !important;
  background-image: none !important;
  height: 1.22667rem !important;
  border: none !important;
  box-shadow: none !important;
}

.navbar-fixed,
#app .navbar.main .navbar-fixed,
#app .navbar.lottery .navbar-fixed,
#app .navbar-fixed,
.navbar.lottery .navbar-fixed,
.van-nav-bar {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  -webkit-transform: translateX(-50%) !important;
  transform: translateX(-50%) !important;
  width: 10rem !important;
  max-width: 10rem !important;
  background: #25272A !important;
  background-color: #25272A !important;
  background-image: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  height: 1.22667rem !important;
  z-index: 101 !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 500px) {
  html,
  body {
    background-color: #111217 !important;
  }
  #app {
    width: 100% !important;
    max-width: 100% !important;
  }
  .navbar-fixed,
  #app .navbar.main .navbar-fixed,
  #app .navbar.lottery .navbar-fixed,
  #app .navbar-fixed,
  .navbar.lottery .navbar-fixed,
  .van-nav-bar {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
  }
}

.navbar__content {
  position: relative !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  height: 1.22667rem !important;
  color: #ffffff !important;
}

.navbar__content-left {
  position: absolute !important;
  left: 0.32rem !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  height: 100% !important;
  top: 0 !important;
}

.navbar__content-left .van-icon,
.navbar-fixed .van-icon,
.van-nav-bar .van-icon {
  color: #ffffff !important;
  font-size: 0.48rem !important;
}

.navbar__content-center {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  height: 100% !important;
}

.navbar__content-center .headLogo,
.headLogo,
.WinGo__C-head-logo {
  width: 2.98667rem !important;
  height: 1.12rem !important;
  background-image: url("/assets/png/veer_logo.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  display: block !important;
}

.navbar__content-center img,
.navbar-fixed img,
.navbar img,
.WinTrx__C-head-logo img {
  height: 0.85rem !important;
  max-height: 0.85rem !important;
  object-fit: contain !important;
}

.navbar__content-right {
  position: absolute !important;
  right: 0.32rem !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
  align-items: center !important;
}

.navbar__content-right svg,
.navbar__content-right .van-icon {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ==========================================================================
   Green / Violet / Red Bet Buttons (.Betting__C-head)
   ========================================================================== */
.Betting__C-head {
  height: 0.93333rem !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-pack: justify !important;
  -webkit-justify-content: space-between !important;
  justify-content: space-between !important;
}

.Betting__C-head > div {
  width: calc((100% - 0.8rem) / 3) !important;
  height: 0.93333rem !important;
  line-height: 0.93333rem !important;
  font-weight: 500 !important;
  font-size: 0.37333rem !important;
  color: #ffffff !important;
  text-align: center !important;
}

.Betting__C-head-green {
  background: var(--norm_green-color, #18B660) !important;
  border-radius: 0 0.26667rem !important;
  box-shadow: 0 0.10667rem 0.21333rem rgba(24, 182, 96, 0.2) !important;
}

.Betting__C-head-violet {
  background: var(--norm_Purple-color, #C86EFF) !important;
  border-radius: 0.13333rem !important;
  box-shadow: 0 0.10667rem 0.21333rem rgba(200, 110, 255, 0.2) !important;
}

.Betting__C-head-red {
  background: var(--norm_red-color, #FB5B5B) !important;
  border-radius: 0.26667rem 0 !important;
  box-shadow: 0 0.10667rem 0.21333rem rgba(251, 91, 91, 0.2) !important;
}

/* Wallet Card */
.Wallet__C-balance {
  background-color: #25272A !important;
  background-image: url("/assets/png/walletbg-BG2A3qTx.png") !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

.Wallet__C-balance-l3 > div:first-child {
  background: linear-gradient(90deg, #ff5353 0%, #f84545 100%) !important;
  color: #ffffff !important;
}

.Wallet__C-balance-l3 > div:last-child {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
}

/* Notice Bar & Detail Button */
#app .noticeBar__container,
.noticeBar__container,
.lottery-notice {
  background-color: #25272A !important;
  border-radius: 99rem !important;
}

#app .noticeBar__container button,
.noticeBar__container button,
.hotIcon {
  border-radius: 0.53333rem !important;
  border: 0.02667rem solid #20D374 !important;
  background: linear-gradient(180deg, #0CC551 0%, #088538 100%) !important;
  color: #ffffff !important;
}

/* Interval Tabs (WinGo 30s, 1m, 3m, 5m) - Exact VeerGame single pill */
.GameList__C {
  background: #05012B !important;
  border-radius: 0.26667rem !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  border: none !important;
  box-shadow: none !important;
}

.GameList__C-item,
.timer-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.GameList__C-item > div,
.timer-card .card-title {
  color: #92A8E3 !important;
  font-weight: 500 !important;
}

.GameList__C-item.active,
.timer-card.active {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
  border-radius: 0.26667rem !important;
  border: none !important;
  box-shadow: none !important;
}

.GameList__C-item.active > div,
.timer-card.active .card-title {
  color: #064e3b !important;
  font-weight: 700 !important;
}

/* Ticket Banner (.TimeLeft__C) */
.TimeLeft__C {
  background-image: url("/assets/png/wingoissue-DWDPoPa5.png") !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

/* 5-Second Countdown Overlay */
.Betting__C-mark {
  background: rgba(0, 0, 0, 0.6) !important;
}

.Betting__C-mark > div {
  background-color: #05012B !important;
  color: #20D374 !important;
  font-weight: 700 !important;
  border-radius: 0.4rem !important;
}

/* Betting Section */
.Betting__C {
  background: #25272A !important;
}

.Betting__C-multiple-r.active {
  background: #20D374 !important;
  color: #ffffff !important;
}

/* History Tabs */
.RecordNav__C > div {
  background: #25272A !important;
  color: #D7D7D7 !important;
}

.RecordNav__C > div.active,
.history .nav > .nav-container > div.active {
  background: linear-gradient(90deg, #84cc16 0%, #10b981 100%) !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* History Table Header - Solid #20D374 to match VeerGame */
.GameRecord__C-head,
.record-head,
.t_head,
.t-head {
  background: #20D374 !important;
  background-color: #20D374 !important;
  background-image: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.GameRecord__C-body,
.record-body,
.t-b1,
.t-b2 {
  background: #25272A !important;
  color: #ffffff !important;
}

/* Pagination */
.GameRecord__C-foot-next,
.record-foot-next,
.t-foot-next {
  background: #20D374 !important;
  color: #ffffff !important;
}

.GameRecord__C-foot-previous,
.record-foot-previous,
.t-foot-previous {
  background: #111217 !important;
  color: #93939D !important;
}