/**
 * MAAN.WIN OFFICIAL THEME - EXACT PIXEL PERFECT FIX (v11)
 */

:root {
  --main-color: #FA7519 !important;
  --main_gradient-color: linear-gradient(180deg, #FFA033 0%, #FA7519 100%) !important;
  --main_gradient-color2: linear-gradient(180deg, #FFA033 0%, #FA7519 100%) !important;
  --light-main_gradient-color: linear-gradient(180deg, #FFAF2D 0%, #F97316 100%) !important;
  --light-main-color: #FA7519 !important;
  --sheet_nva_color: #FA7519 !important;
  --bgDark-2: #FA7519 !important;
  --van-primary-color: #FA7519 !important;
  --primary-color: #FA7519 !important;
  --game-head-bg: linear-gradient(180deg, #FFAF2D 0%, #FA7519 100%) !important;
}

@media screen and (min-width: 501px) {
  html, body {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    background-color: #9195a3 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
  }
  #app {
    width: 10rem !important;
    max-width: 10rem !important;
    min-height: 100vh !important;
    height: fit-content !important;
    margin: 0 auto !important;
    background-color: #0F1421 !important;
    position: relative !important;
    overflow-x: hidden !important;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.45) !important;
  }
}

@media screen and (max-width: 500px) {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #0F1421 !important;
    color: #FFFFFF !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    overflow-x: hidden !important;
  }
  #app {
    width: 100% !important;
    min-height: 100vh !important;
    background-color: #0F1421 !important;
    position: relative !important;
    overflow-x: hidden !important;
  }
}

/* ==========================================================================
   TOP HEADER NAVBAR - PURE SOLID DARK #12192A, ZERO ORANGE LEAK!
   ========================================================================== */
.lottery-info,
#app .lottery-info {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

.lottery-info .bg,
#app .lottery-info .bg {
  display: none !important;
}

.navbar,
.nav-bar,
.van-nav-bar,
.navbar-fixed,
.navbar.main,
.navbar.main .navbar-fixed,
.lottery-info .navbar,
.lottery-info .navbar-fixed,
.lottery-info .main,
.WinGo__C-head,
.headLogo-box,
.c-row.c-row-middle-center.navbar__content,
.WinTrx__C-head {
  background-color: #12192A !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  height: 1.22667rem !important;
  line-height: 1.22667rem !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 999 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar__content {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 1.22667rem !important;
  width: 100% !important;
  padding: 0 0.32rem !important;
}

.navbar__content-left,
.navbar-left {
  position: absolute !important;
  left: 0.32rem !important;
  top: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
}

.navbar__content-left .van-icon,
.navbar .van-icon {
  color: #FFFFFF !important;
  font-size: 0.52rem !important;
  display: block !important;
  visibility: visible !important;
}

.navbar__content-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.navbar__content-center .headLogo,
.headLogo {
  width: 2.98667rem !important;
  height: 0.95rem !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  display: block !important;
  margin: 0 auto !important;
}

.navbar__content-right,
.lottery-info .more {
  position: absolute !important;
  right: 0.32rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
  z-index: 10 !important;
}

/* ==========================================================================
   TOP ORANGE BACKDROP - STARTS DIRECTLY BELOW NAVBAR!
   ========================================================================== */
.lottery-info::before,
#app .WinGo__C::before,
#app .videowingo::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 1.22667rem !important; /* EXACTLY below navbar */
  left: 0 !important;
  width: 100% !important;
  height: 8.6rem !important;
  background: linear-gradient(180deg, #FFAF2D 0%, #FA7519 100%) !important;
  border-radius: 0 0 0.8rem 0.8rem !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.videowingo,
.WinGo__C {
  position: relative !important;
}

/* Ensure children sit above the backdrop */
.WinGo__C > div,
.WinGo__C .Wallet__C,
.WinGo__C .GameList__C,
.WinGo__C .TimeLeft__C,
.WinGo__C .Betting__C,
.WinGo__C .RecordNav__C,
.WinGo__C .GameRecord__C,
.lottery-info .Wallet__C,
.lottery-info .timer-cards {
  position: relative !important;
  z-index: 1 !important;
}

/* ==========================================================================
   WALLET CARD (DARK NAVY #19253F)
   ========================================================================== */
.Wallet__C,
#app .Wallet__C {
  position: relative !important;
  z-index: 1 !important;
  padding: 0.32rem 0.34667rem 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.Wallet__C::before {
  display: none !important;
  content: none !important;
}

.Wallet__C-balance {
  background-color: #19253F !important;
  background-image: none !important;
  border-radius: 0.28rem !important;
  padding: 0.36rem 0.4rem 0.32rem !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
  position: relative !important;
  z-index: 1 !important;
}

.Wallet__C-balance-l1,
.Wallet__C-balance-l1 > div {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.48rem !important;
}

.Wallet__C-balance-l2 {
  color: #8C99A8 !important;
  font-size: 0.32rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.12rem !important;
  margin-top: 0.12rem !important;
}

.Wallet__C-balance-l2 svg,
.Wallet__C-balance-l2 img,
.Wallet__C-balance-l2 .van-icon {
  color: #10B981 !important;
  fill: #10B981 !important;
}

.Wallet__C-balance-l3 {
  margin-top: 0.36rem !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 0.32rem !important;
}

.Wallet__C-balance-l3 > div:first-child,
.Wallet__C-balance-l3 button:first-child,
.Wallet__C-balance-l3 .van-button:first-child {
  background: linear-gradient(180deg, #FF6F61 0%, #FA4C4C 100%) !important;
  border-radius: 99rem !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.37333rem !important;
  height: 0.96rem !important;
  line-height: 0.96rem !important;
  border: none !important;
  flex: 1 !important;
  text-align: center !important;
}

.Wallet__C-balance-l3 > div:last-child,
.Wallet__C-balance-l3 button:last-child,
.Wallet__C-balance-l3 .van-button:last-child {
  background: linear-gradient(180deg, #26D07C 0%, #18B660 100%) !important;
  border-radius: 99rem !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.37333rem !important;
  height: 0.96rem !important;
  line-height: 0.96rem !important;
  border: none !important;
  flex: 1 !important;
  text-align: center !important;
}

/* ==========================================================================
   NOTICE BAR (HIDDEN ON WINGO)
   ========================================================================== */
.WinGo__C .noticeBar__container,
.WinGo__C .van-notice-bar,
.lottery-info .lottery-notice,
.videowingo .noticeBar__container,
.lottery-notice {
  display: none !important;
}

/* ==========================================================================
   DURATION TABS (WinGo 30sec, 1Min, 3Min, 5Min)
   CONTAINER: #19253F
   ACTIVE TAB: #2E3C4E (DARK SLATE NAVY with Green Clock) - NEVER ORANGE BOX!
   ========================================================================== */
.GameList__C,
#app .GameList__C,
.timer-cards,
#app .timer-cards {
  width: calc(100% - 0.69333rem) !important;
  margin: 0.28rem auto 0 !important;
  background: #19253F !important;
  border-radius: 0.28rem !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  position: relative !important;
  z-index: 1 !important;
}

.GameList__C-item,
.timer-card {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0.21333rem !important;
}

.GameList__C-item.active,
.timer-card.active,
.timer-cards-item.active {
  background: #2E3C4E !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0.21333rem !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
}

.GameList__C-item.active > div,
.timer-card.active .card-title,
.timer-card.active .card-duration {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.timer-card .card-title,
.timer-card .card-duration {
  color: #8C99A8 !important;
}

.GameList__C-item.active svg,
.GameList__C-item.active .van-icon,
.GameList__C-item.active img {
  color: #18B660 !important;
  filter: drop-shadow(0 0 5px rgba(24, 182, 96, 0.7)) !important;
}

/* ==========================================================================
   TICKET BANNER (.TimeLeft__C)
   ========================================================================== */
.TimeLeft__C,
#app .TimeLeft__C {
  width: calc(100% - 0.69333rem) !important;
  margin: 0.32rem auto 0 !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  border-radius: 0.28rem !important;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.25) !important;
  position: relative !important;
  z-index: 1 !important;
}

.TimeLeft__C-name,
.TimeLeft__C-text {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.TimeLeft__C-id,
.TimeLeft__C .TimeLeft__C-id,
#app .TimeLeft__C-id {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  letter-spacing: 0.01rem !important;
}

.TimeLeft__C-rule {
  border: 0.02667rem solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 99rem !important;
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.1) !important;
  font-weight: 600 !important;
}

.TimeLeft__C-rule svg {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}

.TimeLeft__C-time > div {
  background: #FFFFFF !important;
  color: #FB5B5B !important;
  font-weight: 700 !important;
  clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 15%) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

.TimeLeft__C-time > div:nth-child(3) {
  background: transparent !important;
  color: #FB5B5B !important;
  font-weight: 700 !important;
  clip-path: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   BETTING GRID (.Betting__C) & BUTTONS
   ========================================================================== */
.Betting__C,
#app .Betting__C,
.Betting__C[data-v-d7ba5957] {
  width: calc(100% - 0.69333rem) !important;
  margin: 0.32rem auto 0 !important;
  background: #19253F !important;
  border-radius: 0.28rem !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  position: relative !important;
  z-index: 1 !important;
  height: auto !important;
  min-height: 7.6rem !important;
  padding-bottom: 0.35rem !important;
  overflow: visible !important;
}

/* Green, Violet, Red 3D Buttons */
.Betting__C-btn .Betting__C-btn-item:first-child,
.Betting__C-btn > div:first-child,
.Betting__C-head-green {
  background: #18B660 !important;
  border-radius: 0.24rem 0.08rem 0.08rem 0.24rem !important;
  box-shadow: 0 4px 0 #118345 !important;
  color: #FFFFFF !important;
}

.Betting__C-btn .Betting__C-btn-item:nth-child(2),
.Betting__C-btn > div:nth-child(2),
.Betting__C-head-violet {
  background: #B659FE !important;
  border-radius: 0.08rem !important;
  box-shadow: 0 4px 0 #8b3dc8 !important;
  color: #FFFFFF !important;
}

.Betting__C-btn .Betting__C-btn-item:last-child,
.Betting__C-btn > div:last-child,
.Betting__C-head-red {
  background: #FB5B5B !important;
  border-radius: 0.08rem 0.24rem 0.24rem 0.08rem !important;
  box-shadow: 0 4px 0 #c73c3c !important;
  color: #FFFFFF !important;
}

/* Multiplier Random Button: Dark navy with Red Outline & Red Text */
.Betting__C-multiple,
.Betting__C-multiple[data-v-d7ba5957],
.Betting__C-multiplier {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0.28rem auto 0 !important;
  padding: 0 0.15rem !important;
  height: 0.85rem !important;
}

.Betting__C-multiple-l,
.Betting__C-multiple-l[data-v-d7ba5957],
.Betting__C-multiplier .van-button:first-child,
.Betting__C-multiplier > div:first-child,
.Betting__C-multiplier-item:first-child,
.Betting__C-btn-box > div:first-child,
.Betting__C .random-btn {
  background: #19253F !important;
  border: 1px solid #FB5B5B !important;
  color: #FB5B5B !important;
  border-radius: 0.16rem !important;
  font-weight: 600 !important;
  font-size: 0.32rem !important;
  height: 0.78rem !important;
  line-height: 0.78rem !important;
  padding: 0 0.24rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Multipliers (X1, X5, X10, X20, X50, X100): Dark navy with Grey text - NEVER GREEN! */
.Betting__C-multiple-r,
.Betting__C-multiple-r[data-v-d7ba5957],
.Betting__C-multiple-r.active,
.Betting__C-multiple-r.active[data-v-d7ba5957],
.Betting__C-multiplier > div:not(:first-child),
.Betting__C-multiplier-item:not(:first-child) {
  background: #151F34 !important;
  color: #8C99A8 !important;
  border-radius: 0.12rem !important;
  border: none !important;
  font-size: 0.32rem !important;
  height: 0.78rem !important;
  line-height: 0.78rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 0.18rem !important;
}

/* Big & Small Pill Buttons */
.Betting__C-foot,
.Betting__C .Betting__C-foot,
.Betting__C-foot[data-v-d7ba5957] {
  display: flex !important;
  gap: 0 !important;
  margin: 0.28rem auto 0 !important;
  padding: 0 0.15rem !important;
  width: 100% !important;
  height: 0.96rem !important;
}

/* Big Button: Left Pill Half */
.Betting__C-foot-b,
.Betting__C-foot > div:first-child,
.Betting__C-foot button:first-child {
  flex: 1 !important;
  border-radius: 99rem 0 0 99rem !important;
  background: linear-gradient(180deg, #FFA033 0%, #FA7519 100%) !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.44rem !important;
  height: 0.96rem !important;
  line-height: 0.96rem !important;
  text-align: center !important;
  border: none !important;
}

/* Small Button: Right Pill Half */
.Betting__C-foot-s,
.Betting__C-foot > div:last-child,
.Betting__C-foot button:last-child {
  flex: 1 !important;
  border-radius: 0 99rem 99rem 0 !important;
  background: linear-gradient(180deg, #6EA8F4 0%, #4A90E2 100%) !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.44rem !important;
  height: 0.96rem !important;
  line-height: 0.96rem !important;
  text-align: center !important;
  border: none !important;
}

/* ==========================================================================
   GAME HISTORY SECTION & TABLE
   ========================================================================== */
.RecordNav__C,
#app .RecordNav__C {
  width: calc(100% - 0.69333rem) !important;
  margin: 0.32rem auto 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
}

.RecordNav__C > div,
#app .RecordNav__C > div {
  background: #19253F !important;
  color: #8C99A8 !important;
  border-radius: 0.2rem !important;
  padding: 0.2rem 0.35rem !important;
  font-size: 0.36rem !important;
  font-weight: 600 !important;
  text-align: center !important;
}

/* Selected History Tab (Game history): Bold White Text! */
.RecordNav__C > div.active,
#app .RecordNav__C > div.active,
.RecordNav__C > div:first-child {
  background: linear-gradient(180deg, #FFA033 0%, #FA7519 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 0.2rem !important;
  box-shadow: 0 2px 6px rgba(250, 117, 25, 0.3) !important;
}

.RecordNav__C > div.active *,
.RecordNav__C > div:first-child * {
  color: #FFFFFF !important;
}

/* History Table */
.GameRecord__C,
#app .GameRecord__C {
  width: calc(100% - 0.69333rem) !important;
  margin: 0.28rem auto 0 !important;
  background: #19253F !important;
  border-radius: 0.28rem !important;
  overflow: hidden !important;
}

.GameRecord__C-head,
#app .GameRecord__C-head,
.GameRecord__C thead tr {
  background: linear-gradient(90deg, #FFA033 0%, #FA7519 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 0.24rem 0.24rem 0 0 !important;
}

.van-pagination__item--next,
.van-pagination__item--prev,
.pagination .btn-next,
.van-pagination__item button {
  color: #FA7519 !important;
}

.van-pagination__item--active {
  background: #FA7519 !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   Bottom Navigation Bar
   ========================================================================== */
.tabbar,
.van-tabbar,
.tabbar__container {
  background-color: #12192A !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.tabbar-item,
.van-tabbar-item {
  color: #8C99A8 !important;
}

.tabbar-item.active,
.van-tabbar-item--active {
  color: #FA7519 !important;
}

.nav > .nav-container > div.active,
.nav > .nav-container > div.active[data-v-d7ba5957],
.nav > .nav-container > div.active *,
.nav > .nav-container > div:first-child,
.RecordNav__C > div.active,
.RecordNav__C > div.active *,
.RecordNav__C > div:first-child,
.RecordNav__C > div:first-child * {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}