:root {
  --hhgj-home-bg: #050403;
  --hhgj-home-panel: #12100b;
  --hhgj-home-panel-2: #1b150d;
  --hhgj-home-gold: #f5c96a;
  --hhgj-home-gold-2: #d59b35;
  --hhgj-home-text: #fff7df;
  --hhgj-home-muted: #d8c68f;
  --hhgj-home-line: rgba(245, 201, 106, .28);
}

html:has(#app .hallPage),
body:has(#app .hallPage),
body:has(#app .hallPage) #app {
  background: var(--hhgj-home-bg) !important;
  color: var(--hhgj-home-text) !important;
}

#app .hallPage {
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 50% 0, rgba(245, 201, 106, .12), transparent 2.5rem),
    linear-gradient(180deg, #090705 0%, #050403 42%, #020202 100%) !important;
  color: var(--hhgj-home-text) !important;
  overflow-x: hidden !important;
}

#app .hallPage .hall-head,
#app .hallPage .head_area {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  z-index: 660 !important;
  width: min(100vw, 750px) !important;
  max-width: 750px !important;
  height: .98rem !important;
  padding: 0 .28rem !important;
  display: grid !important;
  grid-template-columns: 2.04rem minmax(0, 1fr) 2.58rem !important;
  align-items: center !important;
  column-gap: .1rem !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, rgba(16, 13, 8, .9), rgba(5, 4, 3, .78)) !important;
  border-bottom: 1px solid rgba(245, 201, 106, .26) !important;
  box-shadow: 0 .08rem .22rem rgba(0, 0, 0, .38), inset 0 -1px 0 rgba(255, 237, 171, .05) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

#app .hallPage .hall-head .top_logo,
#app .hallPage .head_area .top_logo {
  grid-column: 1 !important;
  align-self: center !important;
  justify-self: start !important;
  display: block !important;
  width: 1.72rem !important;
  height: .54rem !important;
  max-width: 1.72rem !important;
  max-height: .54rem !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 .12rem rgba(245, 201, 106, .24)) !important;
  -webkit-filter: drop-shadow(0 0 .12rem rgba(245, 201, 106, .24)) !important;
}

#app .hallPage .hall-head .accounts-head-text,
#app .hallPage .head_area .accounts-head-text,
#app .hallPage .head_area .head_text {
  position: static !important;
  grid-column: 2 !important;
  justify-self: center !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: .98rem !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  background: transparent !important;
  color: var(--hhgj-home-text) !important;
  -webkit-text-fill-color: var(--hhgj-home-text) !important;
  font-size: .38rem !important;
  font-weight: 900 !important;
  line-height: .98rem !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 0 .16rem rgba(245, 201, 106, .28), 0 1px 0 rgba(0, 0, 0, .72) !important;
  pointer-events: none !important;
}

#app .hallPage .download-link,
#app .hallPage .right_menu a[href*="download"],
#app .hallPage .right_menu .download-link {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 2.38rem !important;
  height: .58rem !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#app .hallPage .download-link img,
#app .hallPage .right_menu a[href*="download"] img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#app .hallPage .maincontent {
  width: 100% !important;
  min-height: 100vh !important;
  padding: 1.06rem 0 calc(1.78rem + env(safe-area-inset-bottom)) !important;
  background: transparent !important;
  overflow-x: hidden !important;
}

#app .hallPage .hallinner,
#app .hallPage .van-pull-refresh,
#app .hallPage .van-pull-refresh__track,
#app .hallPage .toppart {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  transform: none !important;
}

#app .hallPage .toppart {
  position: relative !important;
  padding: .14rem .22rem 0 !important;
}

#app .hallPage .outerbox {
  width: 100% !important;
  max-width: 100% !important;
  height: 3.72rem !important;
  margin: 0 0 .18rem !important;
  border: 1px solid rgba(245, 201, 106, .28) !important;
  border-radius: .16rem !important;
  background: #090806 !important;
  box-shadow: 0 .18rem .44rem rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 236, 164, .08) !important;
  overflow: hidden !important;
}

#app .hallPage .noticecontent {
  position: relative !important;
  z-index: 4 !important;
  width: calc(100% - .08rem) !important;
  height: .72rem !important;
  margin: 0 auto .22rem !important;
  padding: 0 .22rem !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid rgba(245, 201, 106, .34) !important;
  border-radius: .16rem !important;
  background: linear-gradient(180deg, rgba(34, 27, 14, .9), rgba(10, 8, 5, .88)) !important;
  box-shadow: 0 .1rem .22rem rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 237, 171, .08) !important;
  overflow: hidden !important;
}

#app .hallPage .noticecontent > img {
  flex: 0 0 .34rem !important;
  width: .34rem !important;
  height: .34rem !important;
  margin: 0 .16rem 0 0 !important;
  filter: brightness(0) saturate(100%) invert(83%) sepia(52%) saturate(640%) hue-rotate(355deg) brightness(105%) contrast(97%) drop-shadow(0 0 .1rem rgba(245, 201, 106, .42)) !important;
  -webkit-filter: brightness(0) saturate(100%) invert(83%) sepia(52%) saturate(640%) hue-rotate(355deg) brightness(105%) contrast(97%) drop-shadow(0 0 .1rem rgba(245, 201, 106, .42)) !important;
}

#app .hallPage .noticecontent .noticect,
#app .hallPage .noticecontent .van-notice-bar,
#app .hallPage .noticecontent .van-notice-bar__wrap,
#app .hallPage .noticecontent .van-notice-bar__content,
#app .hallPage .noticecontent span {
  background: transparent !important;
  color: #f0d89a !important;
  -webkit-text-fill-color: #f0d89a !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55) !important;
}

#app .hallPage .centerArea {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 2.02rem !important;
  height: auto !important;
  margin: 0 0 .34rem !important;
  padding: .16rem !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1.7fr) !important;
  gap: .14rem !important;
  align-items: stretch !important;
  border: 1px solid rgba(245, 201, 106, .32) !important;
  border-radius: .16rem !important;
  background: linear-gradient(145deg, rgba(29, 23, 13, .96), rgba(8, 7, 5, .98)) !important;
  box-shadow: 0 .18rem .44rem rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 238, 182, .08) !important;
}

#app .hallPage .centerArea .left_content,
#app .hallPage .centerArea .loginbtn {
  border: 1px solid rgba(245, 201, 106, .34) !important;
  border-radius: .14rem !important;
  background:
    radial-gradient(circle at 20% 12%, rgba(245, 201, 106, .24), transparent 46%),
    linear-gradient(145deg, rgba(60, 47, 22, .88), rgba(15, 12, 7, .96) 64%, rgba(7, 7, 5, .98)) !important;
}

#app .hallPage .centerArea,
#app .hallPage .centerArea *,
#app .hallPage .hall,
#app .hallPage .hall * {
  border-color: rgba(245, 201, 106, .28) !important;
}

#app .hallPage .centerArea .right_item_span,
#app .hallPage .centerArea .logindd1,
#app .hallPage .centerArea .toptit {
  color: var(--hhgj-home-muted) !important;
  -webkit-text-fill-color: var(--hhgj-home-muted) !important;
}

#app .hallPage .gamenavs.short {
  position: relative !important;
  width: auto !important;
  max-width: calc(100% - .44rem) !important;
  min-height: 3.18rem !important;
  height: auto !important;
  margin: .74rem .22rem .08rem !important;
  padding: .24rem !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: .18rem !important;
  border: 1px solid rgba(245, 201, 106, .28) !important;
  border-radius: .16rem !important;
  background: linear-gradient(180deg, rgba(18, 15, 10, .98), rgba(7, 6, 5, .98)) !important;
  box-shadow: 0 .14rem .34rem rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 238, 178, .06) !important;
  overflow: visible !important;
}

#app .hallPage .gamenavs.short:before {
  content: "游戏分类" !important;
  position: absolute !important;
  left: 0 !important;
  top: -.5rem !important;
  color: var(--hhgj-home-gold) !important;
  font-size: .24rem !important;
  font-weight: 900 !important;
  line-height: .32rem !important;
  text-shadow: 0 0 .16rem rgba(245, 201, 106, .28) !important;
}

#app .hallPage .gamenavs.short > .gamenav,
#app .hallPage .gamenavs.short > [class*="gamenav"],
#app .hallPage .gamenavs.short > [data-hhgj-category-label] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 1.42rem !important;
  min-height: 1.42rem !important;
  max-height: 1.42rem !important;
  margin: 0 !important;
  padding: .16rem .12rem !important;
  border: 1px solid rgba(245, 201, 106, .18) !important;
  border-radius: .14rem !important;
  background: rgba(245, 201, 106, .06) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}

#app .hallPage .gamenavs.short > .gamenav:before,
#app .hallPage .gamenavs.short > [class*="gamenav"]:before,
#app .hallPage .gamenavs.short > [data-hhgj-category-label]:before {
  content: "" !important;
  display: block !important;
  position: static !important;
  flex: 0 0 1.02rem !important;
  width: 1.02rem !important;
  height: 1.02rem !important;
  min-width: 1.02rem !important;
  max-width: 1.02rem !important;
  min-height: 1.02rem !important;
  max-height: 1.02rem !important;
  margin: 0 !important;
  transform: none !important;
  background-color: transparent !important;
  background-image: var(--hhgj-category-icon) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

#app .hallPage .gamenavs.short > [data-hhgj-category-label]:after {
  content: attr(data-hhgj-category-label) !important;
  position: static !important;
  min-width: 0 !important;
  margin-left: .04rem !important;
  padding: 0 !important;
  transform: none !important;
  color: #ffe39a !important;
  font-size: .23rem !important;
  font-weight: 900 !important;
  line-height: .3rem !important;
  text-align: left !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55) !important;
}

body:has(#app .hallPage) .van-tabbar,
body:has(#app .hallPage) .van-hairline--top-bottom.van-tabbar.van-tabbar--fixed {
  left: 50% !important;
  width: 100% !important;
  max-width: 750px !important;
  height: calc(1.36rem + env(safe-area-inset-bottom)) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  transform: translateX(-50%) !important;
  border-top: 1px solid rgba(245, 201, 106, .24) !important;
  border-radius: .18rem .18rem 0 0 !important;
  background: rgba(7, 6, 5, .96) !important;
  box-shadow: 0 -.16rem .36rem rgba(0, 0, 0, .5) !important;
}

body:has(#app .hallPage) .van-tabbar-item {
  color: var(--hhgj-home-muted) !important;
  -webkit-text-fill-color: var(--hhgj-home-muted) !important;
  font-size: .22rem !important;
  font-weight: 900 !important;
  background: transparent !important;
}

body:has(#app .hallPage) .van-tabbar-item--active {
  color: var(--hhgj-home-gold) !important;
  -webkit-text-fill-color: var(--hhgj-home-gold) !important;
  background: linear-gradient(180deg, rgba(245, 201, 106, .14), rgba(245, 201, 106, .04)) !important;
}

body:has(#app .hallPage) .van-button--info,
body:has(#app .hallPage) [style*="#9231f5"],
body:has(#app .hallPage) [style*="rgb(146, 49, 245)"] {
  border-color: var(--hhgj-home-line) !important;
  background-color: var(--hhgj-home-panel) !important;
  color: var(--hhgj-home-text) !important;
  -webkit-text-fill-color: var(--hhgj-home-text) !important;
}

@media (max-width: 380px) {
  #app .hallPage .hall-head,
  #app .hallPage .head_area {
    grid-template-columns: 1.82rem minmax(0, 1fr) 2.34rem !important;
    padding: 0 .2rem !important;
  }

  #app .hallPage .hall-head .top_logo,
  #app .hallPage .head_area .top_logo {
    width: 1.58rem !important;
  }

  #app .hallPage .download-link,
  #app .hallPage .right_menu a[href*="download"],
  #app .hallPage .right_menu .download-link {
    width: 2.2rem !important;
  }
}