/* ===================================================================
   MIDNIGHT AURORA — full visual redesign
   -------------------------------------------------------------------
   Loaded after the compiled bundles, so it restyles the whole app
   without touching the Vue source (which isn't in the deployment).

   Three ideas carry the whole look:

     1. AURORA        a slow violet/blue/teal wash behind everything,
                      so the black never reads as flat
     2. GLASS + EDGE  surfaces are translucent with a lit gradient
                      border, which is what sells depth on a dark UI
     3. ONE LIGHT     every raised thing is lit from above with the
                      same recipe, so the site feels like one object

   Scope is colour, depth, type and motion. Nothing is repositioned —
   the markup belongs to the compiled app, and moving it here would
   break on their next build.
   =================================================================== */

:root{
  /* ---- base: deep ocean navy, not neutral black ---- */
  --t-void:      #030814;
  --t-bg:        #061024;
  --t-bg-2:      #0a1a33;

  /* ---- panels: navy glass with a cyan-lit edge ---- */
  --t-glass:     rgba(13,32,64,.72);
  --t-glass-2:   rgba(20,46,88,.8);
  --t-glass-hi:  rgba(30,66,124,.88);

  /* ---- text ---- */
  --t-txt:       #eaf4ff;
  --t-dim:       #8fb3d9;
  --t-faint:     #5578a6;

  /* ---- neon accents ---- */
  --t-cyan:      #22d3ee;
  --t-cyan-2:    #0891b2;
  --t-magenta:   #ff3ea5;
  --t-magenta-2: #c31d7c;

  /* violet/blue/teal kept as aliases so existing rules keep working */
  --t-violet:    #22d3ee;
  --t-violet-2:  #0891b2;
  --t-blue:      #38bdf8;
  --t-blue-2:    #0284c7;
  --t-teal:      #2fd8c0;
  --t-teal-2:    #14a894;

  /* ---- money + game semantics ---- */
  --t-gold:      #ffc861;
  --t-gold-2:    #e39b1a;
  --t-red:       #ff4f66;
  --t-red-2:     #d81e3c;
  --t-green:     #25d190;
  --t-green-2:   #10a26c;

  /* ---- one light source ---- */
  --t-lip:      0 1px 0 rgba(255,255,255,.13) inset;
  --t-floor:    0 -16px 30px -14px rgba(0,0,0,.6) inset;
  --t-cast:     0 16px 32px -16px rgba(0,0,0,.9);
  --t-cast-lg:  0 26px 52px -20px rgba(0,0,0,.95);
  --t-halo:     0 0 30px -8px rgba(34,211,238,.45);
  --t-halo-mag: 0 0 32px -8px rgba(255,62,165,.55);

  --t-r-sm: 11px;
  --t-r:    17px;
  --t-r-lg: 23px;

  --t-ease: cubic-bezier(.22,.8,.3,1);
}

/* ===================================================================
   0. THE APP'S OWN THEME VARIABLES
   -------------------------------------------------------------------
   The app ships a real theme system -- ~50 custom properties on :root --
   and it is built for a LIGHT UI: white panels, near-black text, a teal
   brand. Everything downstream, including every Vant component, derives
   from these.

   Repainting individual selectors on top of that was always going to
   leave gaps, which is exactly why patches of the old teal and white
   kept showing through. Retargeting the variables themselves recolours
   the site at its source, including screens I cannot reach without
   logging in.
   =================================================================== */
:root{
  /* ---- brand: teal -> neon cyan ---- */
  --main-color:                  #22d3ee !important;
  --main-color-rgb:              34, 211, 238 !important;
  --main_gradient-color:         linear-gradient(90deg,  #22d3ee 0%, #0891b2 100%) !important;
  --main_gradient-color2:        linear-gradient(180deg, #22d3ee 0%, #0891b2 100%) !important;
  --light-main-color:            #22d3ee !important;
  --light-main_gradient-color:   linear-gradient(90deg,  #22d3ee 0%, #0891b2 100%) !important;
  --sheet_nva_color:             #22d3ee !important;
  --pop_bg-color:                linear-gradient(180deg, #133157 0%, #071328 68%) !important;

  /* ---- surfaces: light -> deep navy glass ---- */
  --bg_color_L1:                 #061024 !important;   /* page */
  --bg_color_L2:                 #0f2647 !important;   /* panels */
  --bg_color_L3:                 #0a1a33 !important;   /* insets */
  --light-bg_white:              #0f2647 !important;
  --sheet_detail_bg_color:       #0a1a33 !important;
  --Dividing-line_color:         rgba(34,211,238,.2) !important;

  /* ---- text: dark-on-light -> light-on-dark ---- */
  --text_color_L1:               #f0f4ff !important;
  --text_color_L2:               #94a2c0 !important;
  --text_color_L3:               #6f7d9b !important;
  --text_color_L4:               #ffffff !important;
  --text_white:                  #ffffff !important;

  /* ---- semantics: kept meaningful, moved onto the palette ---- */
  --norm_red-color:              #ff4f66 !important;
  --norm_green-color:            #25d190 !important;
  --norm_secondary-color:        #ffc861 !important;
  --norm_Purple-color:           #c08bff !important;
  --norm_bule-color:             #6ea8f4 !important;
  --Secondary_red_color:         #ff4f66 !important;
  --Secondary_green_color:       #25d190 !important;
  --Secondary_Color1:            rgba(255,79,102,.16) !important;
  --Secondary_Color2:            rgba(37,209,144,.16) !important;
  --Secondary_moto_Color8:       rgba(34,211,238,.16) !important;
  --Secondary_moto_Color9:       #22d3ee !important;
  --iconSecondary:               rgba(34,211,238,.34) !important;
  --button_dis_color:            linear-gradient(90deg, #16304f 15%, #1c3a5e 99%) !important;

  /* ---- vant: these already derive from the above, but a few
          hardcode light values of their own ---- */
  --van-background:              #061024 !important;
  --van-background-2:            #0f2647 !important;
  --van-cell-background:         transparent !important;
  --van-cell-border-color:       rgba(34,211,238,.14) !important;
  --van-border-color:            rgba(34,211,238,.14) !important;
  --van-active-color:            rgba(34,211,238,.12) !important;
  --van-gray-1:                  #0a1a33 !important;
  --van-gray-2:                  #0f2647 !important;
  --van-gray-3:                  #26314f !important;
  --van-gray-8:                  #94a2c0 !important;
  --van-nav-bar-background:      transparent !important;
  --van-nav-bar-title-text-color:#f0f4ff !important;
  --van-nav-bar-icon-color:      #f0f4ff !important;
  --van-tabs-default-color:      #22d3ee !important;
  --van-tab-text-color:          #94a2c0 !important;
  --van-tab-active-text-color:   #f0f4ff !important;
  --van-tabs-bottom-bar-color:   #22d3ee !important;
  --van-dialog-background:       #0f2647 !important;
  --van-picker-background:       #0f2647 !important;
  --van-field-input-text-color:  #f0f4ff !important;
  --van-field-placeholder-text-color: #5d6b88 !important;
}

/* ===================================================================
   1. AURORA BACKGROUND
   Three offset radial washes. Fixed, so it never scrolls and never
   repaints on scroll — cheap even on low-end Android.
   =================================================================== */
html, body, #app, .cg-default{
  background: var(--t-bg) !important;
  color: var(--t-txt) !important;
}
body::before{
  content:"";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 42% at 18% -6%,  rgba(34,211,238,.26), transparent 62%),
    radial-gradient(52% 38% at 88% 8%,   rgba(77,139,255,.22),  transparent 60%),
    radial-gradient(64% 46% at 50% 104%, rgba(47,216,192,.14),  transparent 64%);
  animation: t-drift 26s var(--t-ease) infinite alternate;
}
@keyframes t-drift{
  0%   { transform: translate3d(0,0,0)      scale(1);    opacity:.9 }
  100% { transform: translate3d(0,-2.5%,0)  scale(1.06); opacity:1  }
}
#app{ position: relative; z-index: 1 }

/* ===================================================================
   2. TYPOGRAPHY
   =================================================================== */
body, button, input, select, textarea{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
.title, .head, .header, h1, h2, h3,
[class*="__title"], [class*="-title"], [class*="head-top"]{
  letter-spacing: -.015em !important;
  color: var(--t-txt) !important;
}
.info, .explain, .rule, .note, .lab, .tip, [class*="_tip"], [class*="-time"]{
  color: var(--t-dim) !important;
}
/* numbers should never jitter as they tick */
.amount, [class*="amount"], [class*="balance"], [class*="money"],
[class*="commiss"], [class*="TL__C-num"], [class*="num"]{
  font-variant-numeric: tabular-nums !important;
}

/* ===================================================================
   3. GLASS SURFACE SYSTEM
   The gradient border is what makes a translucent panel read as a
   solid edge rather than a flat wash.
   =================================================================== */
.box, .container, .content, .list, .con, .contentBox,
.vip-content-card, .strategy-card, .strategy-content,
.moto-card-info, .moto-items, .activity-wrapper, .active-box,
.active-container, .lottery-container, .all_container, .all_game,
.allGames__container, .allGames__container-list,
.c2cDetail__C, .c2cDetail__CO, .laundry-page_container, .Laundry-page,
.rechargeh__container, .Recharge__container-intro,
.TeamReportDetail__C, .TeamReportDetail__C-body, .TeamReportDetail__C-head,
.MyGameRecordList__C-detail-line, .content-item,
[class*="card"], [class*="__container"], [class*="_box"], [class*="-box"]{
  position: relative;
  background:
    linear-gradient(168deg, var(--t-glass-2) 0%, var(--t-glass) 72%) !important;
  backdrop-filter: blur(14px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.25) !important;
  border: 1px solid transparent !important;
  border-radius: var(--t-r) !important;
  box-shadow: var(--t-lip), var(--t-floor), var(--t-cast) !important;
}
/* lit gradient edge, brightest at the top-left where the light is */
.box::before, .container::before, .vip-content-card::before,
.strategy-card::before, .active-box::before, .content-item::before,
.allGames__container::before, .TeamReportDetail__C::before,
[class*="card"]::before{
  content:"";
  position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(150deg,
              rgba(34,211,238,.55), rgba(77,139,255,.22) 42%,
              rgba(255,255,255,.04) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ===================================================================
   4. CHROME — navbar and tab bar
   =================================================================== */
.navbar, .navbar-fixed{
  background: linear-gradient(180deg,
              rgba(24,32,56,.9), rgba(11,16,29,.82)) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: var(--t-lip), 0 10px 26px -14px rgba(0,0,0,.95) !important;
  border-bottom: 1px solid rgba(34,211,238,.16) !important;
}
.navbar__content-title{ font-weight: 700 !important }

.tabbar, [class*="tabbar__container"]{
  background: linear-gradient(180deg,
              rgba(20,27,48,.86), rgba(7,10,19,.96)) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  background-image: none !important;   /* drop the old bitmap tab bar */
  box-shadow: 0 -1px 0 rgba(255,255,255,.09) inset,
              0 -16px 34px -18px rgba(0,0,0,.98) !important;
  border-top: 1px solid rgba(34,211,238,.14) !important;
}
.tabbar__container-item{
  color: var(--t-faint) !important;
  transition: color .2s var(--t-ease), transform .2s var(--t-ease) !important;
}
.tabbar__container-item.active,
.tabbar__container-item[class*="active"]{
  color: var(--t-violet) !important;
  transform: translateY(-3px);
}
.tabbar__container-item.active img,
.tabbar__container-item[class*="active"] img{
  filter: drop-shadow(0 0 10px rgba(34,211,238,.75));
}

/* ===================================================================
   5. BUTTONS
   =================================================================== */
.btn, .van-button, .c2c_btn, .close_btn,
[class*="head-top-btn"], button[class*="btn"]{
  border: 0 !important;
  border-radius: var(--t-r-sm) !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
  box-shadow: 0 2px 0 rgba(255,255,255,.24) inset,
              0 10px 20px -10px rgba(0,0,0,.95) !important;
  transition: transform .15s var(--t-ease), filter .15s var(--t-ease) !important;
}
.btn:active, .van-button:active, button[class*="btn"]:active{
  transform: translateY(2px) scale(.985);
  filter: brightness(.94);
}
.van-button--primary, .btn.primary, .btn-primary{
  background: linear-gradient(160deg, var(--t-violet), var(--t-violet-2)) !important;
  color: #fff !important;
  box-shadow: 0 2px 0 rgba(255,255,255,.28) inset,
              0 12px 26px -12px rgba(109,51,214,.9),
              var(--t-halo) !important;
}
.van-button--danger, .btn.red{
  background: linear-gradient(160deg, var(--t-red), var(--t-red-2)) !important;
  color: #fff !important;
}
.van-button--success{
  background: linear-gradient(160deg, var(--t-green), var(--t-green-2)) !important;
  color: #fff !important;
}
.van-button--default{
  background: linear-gradient(160deg, var(--t-glass-hi), var(--t-glass)) !important;
  color: var(--t-txt) !important;
  border: 1px solid rgba(34,211,238,.24) !important;
}
.van-button--disabled, .disabled{
  filter: grayscale(.55) brightness(.62);
  box-shadow: none !important;
}

/* ===================================================================
   6. MONEY
   =================================================================== */
.amount, [class*="amount"], [class*="balance"], [class*="money"],
[class*="commiss"], .winning{
  color: var(--t-gold) !important;
  text-shadow: 0 0 22px rgba(255,200,97,.35);
  font-weight: 700 !important;
}

/* ===================================================================
   7. GAME SCREENS
   =================================================================== */
/* countdown digits — machined blocks */
[class*="TL__C-num"], [class*="TL__C-l3"], .TimeLeft__C-num{
  background: linear-gradient(180deg, var(--t-glass-hi), rgba(14,20,36,.95)) !important;
  border: 1px solid rgba(34,211,238,.26) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset,
              0 6px 12px -6px #000 !important;
  border-radius: 8px !important;
  color: var(--t-txt) !important;
  font-weight: 700 !important;
}

/* bet pads — spherical, with a real press */
.bet, .numList > *, .Betting__C-numC > *,
[class*="bet-container"] button, [class*="Betting__C"] button{
  border-radius: 50% !important;
  box-shadow: 0 3px 0 -1px rgba(255,255,255,.45) inset,
              0 -10px 18px -6px rgba(0,0,0,.68) inset,
              0 8px 17px -8px rgba(0,0,0,.9) !important;
  transition: transform .16s var(--t-ease), filter .16s var(--t-ease) !important;
}
.bet:active, .numList > *:active,
[class*="Betting__C"] button:active{
  transform: translateY(3px) scale(.955);
  filter: brightness(1.06);
}

/* result balls */
[class*="lottery-note-result"] > *, [class*="result"] [class*="ball"]{
  box-shadow: 0 2px 0 -1px rgba(255,255,255,.45) inset,
              0 5px 10px -4px #000 !important;
}

/* the win moment */
[class*="WinningTip"]{
  background: linear-gradient(168deg, rgba(48,38,86,.95), rgba(15,20,38,.97)) !important;
  border-radius: var(--t-r-lg) !important;
  box-shadow: var(--t-lip), var(--t-cast-lg),
              0 0 90px -22px rgba(255,200,97,.55) !important;
}

/* game tiles on home */
.all_slot, .fish, .fun-tab-item, .allGame{
  border-radius: var(--t-r) !important;
  overflow: hidden;
  transition: transform .2s var(--t-ease) !important;
}
.all_slot:active, .fish:active{ transform: scale(.97) }
.fun-tab-item__wrap, .fun-tab-bar-wrap{
  background: linear-gradient(160deg, var(--t-glass-2), var(--t-glass)) !important;
  border-radius: var(--t-r-sm) !important;
  box-shadow: var(--t-lip), var(--t-cast) !important;
}
.fun-tab-item__badge{
  background: linear-gradient(160deg, var(--t-red), var(--t-red-2)) !important;
  box-shadow: 0 0 14px -3px var(--t-red) !important;
}

/* ===================================================================
   8. PROMOTION TABLES
   =================================================================== */
.TeamReportDetail__C-body-grade-th{
  background: rgba(34,211,238,.14) !important;
  color: var(--t-dim) !important;
  font-weight: 650 !important;
}
.TeamReportDetail__C-body-grade-tr{
  border-bottom: 1px solid rgba(34,211,238,.1) !important;
}
.TeamReportDetail__C-body-grade-tr:nth-child(even){
  background: rgba(255,255,255,.018) !important;
}

/* ===================================================================
   9. VANT COMPONENTS
   =================================================================== */
.van-popup{
  background: linear-gradient(168deg, rgba(32,42,72,.97), rgba(12,17,31,.98)) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  color: var(--t-txt) !important;
  box-shadow: var(--t-cast-lg) !important;
}
.van-popup--bottom{ border-radius: var(--t-r-lg) var(--t-r-lg) 0 0 !important }
.van-popup--center{ border-radius: var(--t-r-lg) !important }
.van-overlay{ background: rgba(3,5,11,.72) !important; backdrop-filter: blur(3px) }

.van-toast{
  background: rgba(24,32,56,.96) !important;
  color: var(--t-txt) !important;
  border: 1px solid rgba(34,211,238,.26) !important;
  border-radius: var(--t-r-sm) !important;
  box-shadow: var(--t-cast) !important;
}
.van-skeleton-paragraph, .van-skeleton-title, .van-skeleton-avatar{
  background: linear-gradient(90deg,
    rgba(30,40,68,.7) 25%, rgba(56,72,116,.85) 50%, rgba(30,40,68,.7) 75%) !important;
  background-size: 200% 100% !important;
  border-radius: 7px !important;
}

/* search bars */
.ar-searchbar, .ar-searchbar__selector, .ar-searchbar-type{
  background: rgba(14,20,36,.8) !important;
  border: 1px solid rgba(34,211,238,.2) !important;
  border-radius: var(--t-r-sm) !important;
  color: var(--t-txt) !important;
  box-shadow: 0 3px 10px -5px #000 inset !important;
}
input, textarea, select{
  background: rgba(10,15,28,.85) !important;
  border: 1px solid rgba(34,211,238,.2) !important;
  border-radius: var(--t-r-sm) !important;
  color: var(--t-txt) !important;
}
input:focus, textarea:focus{
  outline: none !important;
  border-color: var(--t-violet) !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.18) !important;
}
::placeholder{ color: var(--t-faint) !important }

/* ===================================================================
   10. PROGRESS + BANNERS
   =================================================================== */
.progress, [class*="progress"]{
  background: rgba(8,12,22,.9) !important;
  border-radius: 99px !important;
  box-shadow: 0 2px 7px -2px #000 inset !important;
  overflow: hidden;
}
.progress > *, [class*="progress"] > *{
  background: linear-gradient(90deg, var(--t-violet), var(--t-blue), var(--t-teal)) !important;
  box-shadow: 0 0 16px -2px var(--t-violet);
}
.banner, [class*="banner"]{
  border-radius: var(--t-r) !important;
  overflow: hidden;
  box-shadow: var(--t-cast) !important;
}

/* ===================================================================
   11. FAIRNESS BADGE (injected by theme-3d.js)
   =================================================================== */
.t-fairbadge{
  position: fixed; right: 12px; bottom: 78px; z-index: 900;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 20px;
  background: rgba(37,209,144,.13);
  border: 1px solid rgba(37,209,144,.34);
  color: var(--t-green); font-size: 12px; font-weight: 650;
  text-decoration: none;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.95);
  backdrop-filter: blur(10px);
}
.t-fairbadge i{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--t-green); box-shadow: 0 0 9px var(--t-green);
  font-style: normal;
}

/* ===================================================================
   11b. LEFTOVERS THE VARIABLES DON'T REACH
   Colours the compiled CSS hardcodes instead of reading from :root.
   Each one was found by auditing computed styles on the running site.
   =================================================================== */

/* -- Wingo / lottery result colours -------------------------------- */
/* red #fd565c, green #47ba7c, violet #ec4cdf -- kept semantic, moved
   onto the palette, and given the same sphere treatment as the bet pads */
.lottery-container .green_bg,
.record-origin-I.green,
.t-b2-Num-item.action1,
[class*="green_bg"]{
  background: linear-gradient(160deg, var(--t-green), var(--t-green-2)) !important;
  color: #fff !important;
}
.lottery-container .red_bg,
.record-origin-I.red,
.t-b2-Num-item.action2,
[class*="red_bg"]{
  background: linear-gradient(160deg, var(--t-red), var(--t-red-2)) !important;
  color: #fff !important;
}
.record-origin-I.violet,
.t-b2-Num-item.action0,
.t-b2-Num-item.action5,
[class*="violet"]{
  background: linear-gradient(160deg, var(--t-violet), var(--t-violet-2)) !important;
  color: #fff !important;
}
.record-body .mixedColor5{
  background: linear-gradient(160deg, var(--t-green) 48%, var(--t-violet) 52%) !important;
}
.record-origin-I, .t-b2-Num-item{
  box-shadow: 0 2px 0 -1px rgba(255,255,255,.42) inset,
              0 5px 11px -5px rgba(0,0,0,.85) !important;
}
/* win/loss text and odds chips */
.win-p, .win-odds, [class*="win-p"], [class*="win-odds"]{
  background: rgba(37,209,144,.16) !important;
  color: var(--t-green) !important;
  border: 1px solid rgba(37,209,144,.3) !important;
}

/* -- stray white panels -------------------------------------------- */
.dropdown, .dropdown__list, .fun-tabs, .tabs,
[class*="dropdown"], [class*="__list"]{
  background: linear-gradient(168deg, var(--t-glass-2), var(--t-glass)) !important;
  color: var(--t-txt) !important;
  border: 1px solid rgba(34,211,238,.18) !important;
  border-radius: var(--t-r-sm) !important;
  box-shadow: var(--t-cast) !important;
}
.dropdown__list-item.active, .tab_item.tab_active{
  background: rgba(34,211,238,.2) !important;
  color: var(--t-violet) !important;
}
.fun-tabs__active-line{
  background: linear-gradient(90deg, var(--t-violet), var(--t-blue)) !important;
  box-shadow: 0 0 12px -2px var(--t-violet) !important;
}
.hotIcon{
  background: linear-gradient(160deg, var(--t-red), var(--t-red-2)) !important;
}

/* -- loading splash shapes ----------------------------------------- */
.shape-1{ background: var(--t-violet) !important }
.shape-2{ background: var(--t-blue)   !important }
.shape-3{ background: var(--t-teal)   !important }
.shape-4{ background: var(--t-gold)   !important }
.ar-loading-view{ background: rgba(5,7,14,.72) !important }

/* -- payment / deposit icons ---------------------------------------
   These are brand logos drawn for white backgrounds (Paytm, UPI, USDT).
   On a dark page they lose their edges and read as smudges. A light chip
   behind each one keeps the brand legible without recolouring the logo,
   which is what a payment mark has to stay. */
.Recharge__container-tabcard__items img,
.Recharge__content-quickInfo__item img,
[class*="Recharge__"] [class*="tabcard"] img,
[class*="pay"] img[src*="logo"],
[class*="channel"] img,
[class*="Recharge"] .van-image img{
  background: #fff !important;
  border-radius: 8px !important;
  padding: 4px !important;
  box-shadow: 0 3px 8px -3px rgba(0,0,0,.7) !important;
}
/* the tiles those icons sit in */
.Recharge__container-tabcard__items,
.Recharge__content-quickInfo__item,
.Recharge__container-paymoney__money-list_,
.Recharge__content-paymoney__money-list__i{
  background: linear-gradient(160deg, var(--t-glass-2), var(--t-glass)) !important;
  border: 1px solid rgba(34,211,238,.18) !important;
  border-radius: var(--t-r-sm) !important;
  color: var(--t-txt) !important;
  box-shadow: var(--t-lip), var(--t-cast) !important;
}
/* the selected payment method / amount */
.Recharge__container-tabcard__items.active,
.Recharge__content-paymoney__money-list__i.active,
[class*="money-list"] .active{
  background: linear-gradient(160deg, rgba(34,211,238,.34), rgba(109,51,214,.22)) !important;
  border-color: var(--t-violet) !important;
  box-shadow: var(--t-lip), var(--t-halo) !important;
}

/* -- unstyled links -------------------------------------------------
   Content coming from the database (announcements, support text) carries
   bare <a> tags, which fall back to the browser's default #0000EE --
   unreadable on this background. */
a:not([class]), a[class=""]{
  color: var(--t-blue) !important;
  text-decoration-color: rgba(77,139,255,.45);
}

/* -- app-download banner --------------------------------------------
   Ships with its own Tailwind-ish palette (#111827 / #f59e0b / #e5e7eb)
   that belongs to no other part of the site. */
.fw-banner-popup{
  background: linear-gradient(168deg, var(--t-glass-2), rgba(11,16,29,.96)) !important;
  border: 1px solid rgba(34,211,238,.22) !important;
  border-radius: var(--t-r) !important;
  color: var(--t-txt) !important;
  box-shadow: var(--t-cast-lg) !important;
  backdrop-filter: blur(14px) !important;
}
.fw-banner-popup-primary{
  background: linear-gradient(160deg, var(--t-violet), var(--t-violet-2)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 2px 0 rgba(255,255,255,.24) inset, var(--t-halo) !important;
}
.fw-banner-popup-secondary{
  background: rgba(255,255,255,.07) !important;
  color: var(--t-dim) !important;
  border: 1px solid rgba(34,211,238,.2) !important;
}

/* -- baked-in artwork ----------------------------------------------
   winning_bg / kBg / changlong_bg are webp files carrying the old teal.
   They cannot be recoloured, only shifted -- this rotates them toward
   the violet end so they stop fighting everything around them. */
[style*="winning_bg"], [style*="kBg"], [style*="changlong_bg"],
[class*="winning"] [style*="url("]{
  filter: hue-rotate(275deg) saturate(.85) !important;
}

/* -- vendor logos stay untouched ------------------------------------
   Third-party game providers' marks are theirs; recolouring them would
   misrepresent the brand. They only get a chip so they stay readable. */
img[src*="vendorlogo"]{
  background: rgba(255,255,255,.9) !important;
  border-radius: 7px !important;
  padding: 3px !important;
}

/* ===================================================================
   11c. NEON ARCADE DETAILS
   Matching the reference: cyan is the resting state, magenta marks
   what is currently selected. Two colours doing two jobs is what keeps
   a neon UI readable instead of noisy.
   =================================================================== */

/* -- selected states glow magenta ----------------------------------- */
.tabbar__container-item.active,
.tabbar__container-item[class*="active"]{
  color: var(--t-magenta) !important;
}
.tabbar__container-item.active img,
.tabbar__container-item[class*="active"] img{
  filter: drop-shadow(0 0 10px rgba(255,62,165,.85)) !important;
}
.fun-tab-item.active, .fun-tab-item[class*="active"],
.tab_item.tab_active, .dropdown__list-item.active,
.allGames__container-tabBar .active{
  background: linear-gradient(160deg, rgba(255,62,165,.24), rgba(195,29,124,.14)) !important;
  border: 1px solid var(--t-magenta) !important;
  color: #fff !important;
  box-shadow: var(--t-halo-mag), 0 2px 0 rgba(255,255,255,.16) inset !important;
}
.fun-tabs__active-line{
  background: linear-gradient(90deg, var(--t-magenta), var(--t-cyan)) !important;
  box-shadow: 0 0 12px -1px var(--t-magenta) !important;
}

/* -- resting icons and labels are cyan ------------------------------ */
.fun-tab-item, .allGames__container-tabBar > *{
  color: var(--t-cyan) !important;
}
.van-icon, [class*="icon"]:not([class*="hotIcon"]){
  color: var(--t-cyan);
}

/* -- panels get a visible lit edge, not just a shadow --------------- */
.box, .container, .allGames__container, .fun-tab-bar-wrap,
.active-box, .content-item, [class*="card"], [class*="__container"]{
  border: 1px solid rgba(34,211,238,.26) !important;
  box-shadow: var(--t-lip), var(--t-floor), var(--t-cast),
              0 0 22px -14px rgba(34,211,238,.6) !important;
}

/* ===================================================================
   11d. ONE BOX PER THING
   -------------------------------------------------------------------
   The panel selectors above match by substring, so they also hit the
   inner wrappers the app nests inside every card -- an outline around
   the card, another around its body, another around the label inside
   that. 133 of 138 bordered elements sat inside another bordered one.

   A panel should be a single object. Only the outermost one in any
   chain keeps its frame; everything nested inside becomes plain
   content. Selected states are exempt, because their outline is
   meaning rather than decoration.
   =================================================================== */
:is(.box, .container, .content, .list, .con, .contentBox,
    .vip-content-card, .strategy-card, .strategy-content,
    .moto-card-info, .moto-items, .activity-wrapper, .active-box,
    .active-container, .lottery-container, .all_container, .all_game,
    .allGames__container, .allGames__container-list, .fun-tabs,
    .fun-tab-bar-wrap, .c2cDetail__C, .c2cDetail__CO,
    .laundry-page_container, .Laundry-page, .rechargeh__container,
    .Recharge__container-intro, .TeamReportDetail__C,
    .TeamReportDetail__C-body, .TeamReportDetail__C-head,
    .MyGameRecordList__C-detail-line, .content-item,
    [class*="card"], [class*="__container"], [class*="_box"], [class*="-box"])
  :is(.box, .container, .content, .list, .con, .contentBox,
      .vip-content-card, .strategy-card, .strategy-content,
      .moto-card-info, .moto-items, .activity-wrapper, .active-box,
      .active-container, .lottery-container, .all_container, .all_game,
      .allGames__container, .allGames__container-list, .fun-tabs,
      .fun-tab-bar-wrap, .c2cDetail__C, .c2cDetail__CO,
      .laundry-page_container, .Laundry-page, .rechargeh__container,
      .Recharge__container-intro, .TeamReportDetail__C,
      .TeamReportDetail__C-body, .TeamReportDetail__C-head,
      .MyGameRecordList__C-detail-line, .content-item,
      .dropdown, .noticeBar__container, .van-notice-bar, .swiper_box,
      [class*="card"], [class*="__container"], [class*="_box"], [class*="-box"],
      [class*="dropdown"], [class*="__list"], [class*="notice"]
  ):not(.active):not([class*="active"]):not(.tab_active):not(button):not(input):not(.van-button):not([class*="btn"]):not([class*="Btn"]):not([class*="register"]){
  /* Controls are exempt: a button that loses its fill and border stops
     looking pressable, which is worse than the extra outline. */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* the gradient edge is drawn by ::before, so that has to go too */
:is(.box, .container, .content, [class*="card"], [class*="__container"],
    [class*="_box"], [class*="-box"])
  :is(.box, .container, .content, [class*="card"], [class*="__container"],
      [class*="_box"], [class*="-box"])::before{
  display: none !important;
}

/* -- specific double-frames the generic rule cannot see -------------
   These pairs nest a chip inside a chip. The outer one carries the
   frame; the inner is just its text. */
.win-odds .win-p, [class*="win-odds"] [class*="win-p"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.profit__list .profit__list-item,
.profit__list-item .profit__list-item__info,
[class*="profit__list"] [class*="__list-item"],
[class*="__list-item"] [class*="__info"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* rows still need separating, just with a line rather than a box */
.profit__list .profit__list-item,
[class*="profit__list"] > *{
  border-bottom: 1px solid rgba(34,211,238,.1) !important;
}
.profit__list > *:last-child{ border-bottom: 0 !important }

/* a selected tab gets one outline, not one inside another */
.fun-tab-item.active .tab_item,
.fun-tab-item[class*="active"] .tab_item,
.fun-tab-item .tab_item.tab_active{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* -- bottom nav: one frame around the bar, none on the items -------- */
.tabbar__container-item,
[class*="tabbar__container"] > *{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* the selected tab is marked by its glow, not by a box */
.tabbar__container-item.active,
.tabbar__container-item[class*="active"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: 0 0 14px rgba(255,62,165,.8);
}

/* -- category tabs: plain until selected ---------------------------- */
.fun-tab-item, .fun-tab-item__wrap, .tab_item{
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.fun-tab-item.active, .fun-tab-item[class*="active"],
.fun-tab-item:has(.tab_active), .tab_item.tab_active{
  background: linear-gradient(160deg, rgba(255,62,165,.2), rgba(195,29,124,.1)) !important;
  border: 1px solid var(--t-magenta) !important;
  box-shadow: var(--t-halo-mag) !important;
}
/* one frame around the row that holds them */
.fun-tabs, .fun-tab-bar-wrap, .allGames__container-tabBar{
  background: linear-gradient(168deg, var(--t-glass-2), var(--t-glass)) !important;
  border: 1px solid rgba(34,211,238,.24) !important;
  border-radius: var(--t-r) !important;
  box-shadow: var(--t-lip), var(--t-cast) !important;
}

/* -- game tiles: gold frame on navy, like the reference ------------- */
.all_slot, .allGame, .fish,
[class*="game"] [class*="item"] > img{
  border: 1.5px solid rgba(255,200,97,.55) !important;
  border-radius: var(--t-r) !important;
  box-shadow: 0 0 0 1px rgba(34,211,238,.18),
              var(--t-cast),
              0 0 26px -16px rgba(255,200,97,.7) !important;
}

/* -- announcement strip is a pill, not a bar ------------------------ */
[class*="notice"], [class*="marquee"], .van-notice-bar{
  background: linear-gradient(160deg, var(--t-glass-2), var(--t-glass)) !important;
  border: 1px solid rgba(34,211,238,.3) !important;
  border-radius: 999px !important;
  color: var(--t-txt) !important;
  box-shadow: var(--t-lip), var(--t-cast) !important;
}
/* its call-to-action stays green — it is the one "go" affordance here */
[class*="notice"] button, .van-notice-bar button,
[class*="notice"] [class*="btn"]{
  background: linear-gradient(160deg, var(--t-green), var(--t-green-2)) !important;
  border-radius: 999px !important;
  color: #fff !important;
  box-shadow: 0 2px 0 rgba(255,255,255,.24) inset,
              0 0 18px -6px rgba(37,209,144,.8) !important;
}

/* -- floating side actions (gift, wheel, telegram) ------------------ */
[class*="float"] img, [class*="suspend"] img, [class*="sidebar"] img{
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.8))
          drop-shadow(0 0 14px rgba(34,211,238,.35)) !important;
}

/* icons are glyphs, not panels -- they never need a frame */
.van-icon, .van-badge__wrapper, [class*="van-icon"]{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ===================================================================
   11e. GAME SURFACES, DEEPER
   -------------------------------------------------------------------
   The bet pads are the thing a player touches hundreds of times a
   session, so they carry the most modelling: a rim lit from above, a
   shaded underside, a coloured bounce onto the surface below, and a
   specular highlight that sits slightly off-centre so the sphere reads
   as lit from one direction rather than glowing on its own.
   =================================================================== */

/* -- bet pads: real spheres ----------------------------------------- */
.bet, .numList > *, .Betting__C-numC > *,
[class*="bet-container"] button, [class*="Betting__C"] button,
.t-b2-Num-item, .record-origin-I{
  position: relative;
  border-radius: 50% !important;
  border: 0 !important;
  box-shadow:
    0 4px 0 -1px rgba(255,255,255,.5) inset,      /* top rim */
    0 -12px 20px -6px rgba(0,0,0,.72) inset,      /* underside */
    0 10px 20px -9px rgba(0,0,0,.9),              /* cast */
    0 6px 20px -10px currentColor !important;     /* colour bounce */
  transition: transform .16s var(--t-ease),
              filter .16s var(--t-ease),
              box-shadow .16s var(--t-ease) !important;
}
/* specular highlight, offset so the light has a direction */
.bet::after, .numList > *::after, .t-b2-Num-item::after,
[class*="Betting__C"] button::after{
  content: "";
  position: absolute; left: 21%; top: 11%;
  width: 36%; height: 27%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  filter: blur(1px);
  pointer-events: none;
}
.bet:active, .numList > *:active, .t-b2-Num-item:active,
[class*="Betting__C"] button:active{
  transform: translateY(4px) scale(.94);
  filter: brightness(1.08);
  box-shadow:
    0 2px 0 -1px rgba(255,255,255,.4) inset,
    0 -8px 14px -6px rgba(0,0,0,.75) inset,
    0 4px 9px -6px rgba(0,0,0,.9) !important;
}
/* a chosen pad lifts off the board */
.bet.active, .numList > *.active, .t-b2-Num-item.active,
.t-b2-Num-item[class*="action"].selected{
  transform: translateY(-4px) scale(1.05);
  box-shadow:
    0 4px 0 -1px rgba(255,255,255,.55) inset,
    0 -12px 20px -6px rgba(0,0,0,.7) inset,
    0 16px 26px -10px rgba(0,0,0,.95),
    0 0 0 2px var(--t-gold),
    0 0 22px -4px var(--t-gold) !important;
}

/* -- colour/size chips: pressed plastic ------------------------------ */
.t-b1-l.lottery .t-b1-l-n > div,
[class*="bet-container"] [class*="chip"],
[class*="Betting"] [class*="amount"] > *{
  border-radius: var(--t-r-sm) !important;
  box-shadow: 0 2px 0 rgba(255,255,255,.28) inset,
              0 -6px 12px -6px rgba(0,0,0,.6) inset,
              0 9px 18px -9px rgba(0,0,0,.92) !important;
  transition: transform .14s var(--t-ease) !important;
}
.t-b1-l.lottery .t-b1-l-n > div:active{ transform: translateY(2px) }

/* -- countdown: milled metal ----------------------------------------- */
[class*="TL__C-num"], [class*="TL__C-l3"], .TimeLeft__C-num{
  background: linear-gradient(180deg,
              rgba(46,86,148,.95) 0%, rgba(10,22,44,.98) 62%) !important;
  border: 1px solid rgba(34,211,238,.32) !important;
  border-radius: 9px !important;
  color: #fff !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.7);
  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 -6px 12px -6px rgba(0,0,0,.8) inset,
    0 7px 14px -7px rgba(0,0,0,.95),
    0 0 18px -8px rgba(34,211,238,.7) !important;
}

/* -- the game board itself ------------------------------------------- */
.lottery-container, [class*="bet-container"]{
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(34,211,238,.14), transparent 62%),
    linear-gradient(168deg, var(--t-glass-2) 0%, var(--t-glass) 72%) !important;
  box-shadow: var(--t-lip), var(--t-floor), var(--t-cast-lg),
              0 0 34px -20px rgba(34,211,238,.8) !important;
}

/* -- result history balls -------------------------------------------- */
[class*="lottery-note-result"] > *, [class*="record-body"] [class*="Color"]{
  box-shadow: 0 3px 0 -1px rgba(255,255,255,.48) inset,
              0 -7px 12px -5px rgba(0,0,0,.6) inset,
              0 6px 12px -6px rgba(0,0,0,.9) !important;
}

/* ===================================================================
   11f. NEON — GLOW AND WEIGHT
   -------------------------------------------------------------------
   Layout is untouched. What changes is how lit everything reads.

   Glow is rationed on purpose: a halo on every element cancels itself
   out and the screen turns to fog. Here it marks three things only --
   what is interactive, what is selected, and what is money. Body copy
   gets weight instead of light, so it stays crisp.
   =================================================================== */

/* -- weight: everything a step heavier ------------------------------ */
body, div, span, p, li, td, th, label, a, button, input, select{
  font-weight: 600 !important;
}
.title, .head, .header, h1, h2, h3, h4,
[class*="__title"], [class*="-title"], [class*="head-top"],
[class*="name"], [class*="Name"]{
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}
.info, .explain, .rule, .note, .tip, [class*="_tip"], [class*="-time"],
.van-notice-bar__content{
  font-weight: 500 !important;   /* secondary copy stays lighter, or the
                                    hierarchy flattens and nothing leads */
}
/* numbers carry the most weight -- they are what players actually read */
.amount, [class*="amount"], [class*="balance"], [class*="money"],
[class*="commiss"], [class*="TL__C-num"], .bet, .numList > *,
.t-b2-Num-item, .record-origin-I, [class*="lottery-note-result"] > *{
  font-weight: 900 !important;
}

/* -- glow 1: interactive things ------------------------------------- */
.van-icon, [class*="van-icon"], .tabbar__container-item,
.fun-tab-item, .allGames__container-tabBar > *{
  text-shadow: 0 0 12px rgba(34,211,238,.55);
}
.tabbar__container-item img, .fun-tab-item img,
[class*="icon"] img, .van-image img[src*="icon"]{
  filter: drop-shadow(0 0 8px rgba(34,211,238,.5));
}

/* -- glow 2: the selected thing, in magenta ------------------------- */
.tabbar__container-item.active,
.tabbar__container-item[class*="active"]{
  text-shadow: 0 0 16px rgba(255,62,165,.95),
               0 0 34px rgba(255,62,165,.5) !important;
}
.tabbar__container-item.active img,
.tabbar__container-item[class*="active"] img{
  filter: drop-shadow(0 0 12px rgba(255,62,165,.95))
          drop-shadow(0 0 26px rgba(255,62,165,.45)) !important;
}
.fun-tab-item.active, .fun-tab-item[class*="active"],
.tab_item.tab_active, .dropdown__list-item.active{
  text-shadow: 0 0 14px rgba(255,62,165,.85) !important;
  box-shadow: var(--t-halo-mag),
              0 0 0 1px rgba(255,62,165,.5),
              0 2px 0 rgba(255,255,255,.18) inset !important;
}

/* -- glow 3: money ---------------------------------------------------- */
.amount, [class*="amount"], [class*="balance"], [class*="money"],
[class*="commiss"], .winning{
  text-shadow: 0 0 18px rgba(255,200,97,.65),
               0 0 40px rgba(255,200,97,.28) !important;
}

/* -- headings get a whisper of light, not a halo --------------------- */
.title, .head, .header, h1, h2, h3,
[class*="__title"], [class*="-title"]{
  text-shadow: 0 0 20px rgba(140,200,255,.3);
}

/* -- panels: the edge itself lights up ------------------------------- */
.box, .container, .allGames__container, .fun-tab-bar-wrap,
.active-box, .content-item, .lottery-container,
[class*="card"], [class*="__container"]{
  border-color: rgba(34,211,238,.4) !important;
  box-shadow: var(--t-lip), var(--t-floor), var(--t-cast),
              0 0 0 1px rgba(34,211,238,.1),
              0 0 26px -12px rgba(34,211,238,.75) !important;
}

/* -- buttons burn a little brighter ---------------------------------- */
.van-button--primary, .btn.primary, .btn-primary{
  box-shadow: 0 2px 0 rgba(255,255,255,.3) inset,
              0 12px 26px -12px rgba(8,145,178,.9),
              0 0 26px -6px rgba(34,211,238,.75) !important;
  text-shadow: 0 0 12px rgba(255,255,255,.5);
}
.van-button--success, [class*="notice"] button{
  box-shadow: 0 2px 0 rgba(255,255,255,.28) inset,
              0 0 24px -6px rgba(37,209,144,.85) !important;
}

/* -- bet pads glow in their own colour -------------------------------- */
.bet, .numList > *, .t-b2-Num-item, .record-origin-I,
[class*="Betting__C"] button{
  text-shadow: 0 2px 4px rgba(0,0,0,.6) !important;
}
.bet.active, .numList > *.active, .t-b2-Num-item.active{
  text-shadow: 0 0 14px rgba(255,255,255,.9),
               0 2px 4px rgba(0,0,0,.6) !important;
}

/* -- countdown pulses in the last seconds ----------------------------- */
[class*="TL__C-num"]{
  text-shadow: 0 0 14px rgba(34,211,238,.8), 0 2px 4px rgba(0,0,0,.7) !important;
}

/* -- the aurora sits a touch brighter under all this ------------------ */
body::before{
  background:
    radial-gradient(58% 42% at 18% -6%,  rgba(34,211,238,.34), transparent 62%),
    radial-gradient(52% 38% at 88% 8%,   rgba(255,62,165,.20), transparent 60%),
    radial-gradient(64% 46% at 50% 104%, rgba(56,189,248,.20), transparent 64%) !important;
}

/* ===================================================================
   12. MOTION PREFERENCES
   Someone who gets motion sick should not have to feel the aurora.
   =================================================================== */
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none !important }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Older Android WebViews without backdrop-filter get solid panels
   instead of glass, so nothing turns into an unreadable smear. */
@supports not (backdrop-filter: blur(4px)){
  .box, .container, .van-popup, .navbar, [class*="tabbar__container"],
  [class*="card"], [class*="__container"]{
    background: linear-gradient(168deg, #1d2740, #141c30) !important;
  }
}




/* OLD_OVERRIDE */
.WinningTip__C-body,
.winning-body.isWin,
.winning.winBg,
.WinningTip__C-body[data-v-baa1fbd1],
.WinningTip__C-body[data-v-ad929f00],
.WinningTip__C-body[data-v-e05c7c66] {
    background-image: url('/assets/png/missningBg-c1f02bcd.webp') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    min-height: 8rem !important;
}

.WinningTip__C-body.isL,
.winning-body.noWin,
.winning.failBg,
.WinningTip__C-body.isL[data-v-baa1fbd1],
.WinningTip__C-body.isL[data-v-ad929f00],
.WinningTip__C-body.isL[data-v-e05c7c66] {
    background-image: url('/assets/png/missningLBg-ca049a47.webp') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    min-height: 8rem !important;
}


/* WINGO PERIOD TIMER CLEAN BACKGROUND FIX */
.FDTL__C, [class*='FDTL__C'] {
    background-image: none !important;
    background-color: #0e192c !important;
}


/* ELEGANT WIN / LOSS POPUP MODAL OVERRIDES */
.WinningTip__C-body,
.winning-body.isWin,
.winning.winBg,
.WinningTip__C-body[data-v-baa1fbd1],
.WinningTip__C-body[data-v-ad929f00],
.WinningTip__C-body[data-v-e05c7c66] {
    background-image: url('/assets/png/missningBg-c1f02bcd.webp') !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    background-color: #121c2e !important;
    border-radius: 0.4rem !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}

.WinningTip__C-body.isL,
.winning-body.noWin,
.winning.failBg,
.WinningTip__C-body.isL[data-v-baa1fbd1],
.WinningTip__C-body.isL[data-v-ad929f00],
.WinningTip__C-body.isL[data-v-e05c7c66] {
    background-image: url('/assets/png/missningLBg-ca049a47.webp') !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    background-color: #121c2e !important;
    border-radius: 0.4rem !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}


/* FORCE CLEAN PLAIN DARK BACKGROUND ON ALL GAME TIMER & PERIOD CONTAINERS */
.FDTL__C,
[class*='FDTL__C'],
.GameHeader,
.Game-Header,
[class*='GameHeader'],
[class*='Game-Header'],
.period-container,
div[class*='game_header'],
div[class*='Game_Header'] {
    background-image: none !important;
    background: #0e192c !important;
}