/* Full home-page skin based only on the supplied visual reference.
   Existing Vue components, APIs and click handlers remain unchanged. */
body {
  background: #9195a3 !important;
}

/* Keep the four home floating actions on the right edge of the app canvas. */
:root {
  --tw-float-right: 0.2rem;
}

#app .content.bluehome {
  min-height: 100vh;
  padding: 0 0.34667rem 3.7rem !important;
  gap: 0.13333rem;
  background: #222 !important;
  color: #fff;
  font-family: "Roboto", "Inter", Arial, sans-serif !important;
}

/* Reference-sized hero header. */
.content.bluehome > .navbar,
.content.bluehome > .navbar .navbar__content {
  height: 2.34667rem !important;
}

.content.bluehome > .navbar .navbar-fixed {
  background: #3f3f3f !important;
}

.content.bluehome > .navbar .navbar__content-left {
  left: 0 !important;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 0.32rem;
}

.content.bluehome > .navbar .navbar__content-left > img {
  width: 3.35rem !important;
  height: 0.92rem;
  object-fit: cover;
  object-position: center 50%;
}

.content.bluehome .tw-home-header-meta {
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
}

.content.bluehome .tw-home-header-welcome {
  display: inline !important;
  color: #d9ac4f;
  font-size: 0.3rem;
  font-weight: 500;
}

.content.bluehome > .navbar .content__right {
  flex-direction: column;
  gap: 0.16rem;
}

.content.bluehome > .navbar .content__right > .message {
  display: none !important;
}

.content.bluehome > .navbar .content__right > * {
  width: 3.25rem;
  min-width: 3.25rem;
  height: 0.92rem;
  flex-direction: row;
  gap: 0.12rem;
  border-radius: 0.24rem;
  background: linear-gradient(#f6e3a3, #d2a753);
  color: #292d2e;
}

.content.bluehome > .navbar .content__right svg,
.content.bluehome .tw-home-customer-icon {
  width: 0.58rem !important;
  height: 0.58rem !important;
  border-color: #292d2e;
  color: #292d2e !important;
}

.content.bluehome .tw-home-customer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
}

.content.bluehome .tw-home-customer-icon svg {
  width: 0.58rem !important;
  height: 0.58rem !important;
  fill: none;
  stroke: #292d2e !important;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.content.bluehome .tw-home-header-label {
  width: 1.95rem;
  color: #292d2e;
  font-size: 0.29rem;
  font-weight: 500;
  white-space: normal;
}

/* Banner and announcements. */
.content.bluehome .swiper_box {
  padding: 0 !important;
  margin-top: 0.28rem;
}

.content.bluehome .swiper_box .my-swipe,
.content.bluehome #banner {
  height: 4.26667rem !important;
}

.content.bluehome .swiper_box img,
.content.bluehome #banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.26667rem !important;
}

.content.bluehome .noticeBar__container {
  min-height: 0.9rem;
  margin: 0.18rem 0 0;
  padding: 0 0.18rem;
  border-radius: 0.16rem;
  background: transparent !important;
  color: #fff !important;
}

.content.bluehome .noticeBar__container-body {
  color: #fff !important;
  font-size: 0.31rem;
}

/* Balance/member strip from the reference. */
.content.bluehome .balance {
  height: 0.8rem !important;
  margin: 0.1rem 0 0.24rem;
  padding: 0.13rem 0.27rem !important;
  border-radius: 0.13rem !important;
  background: linear-gradient(#f6e3a3, #d2a753) !important;
  color: #292929 !important;
}

/* Main six-category menu. */
.content.bluehome .game_menu {
  width: 100%;
  padding-top: 0.4rem;
}

.content.bluehome .game_menu .menu_box1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.content.bluehome .game_menu .menu_box1 > div {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30.5%;
  height: 2.74667rem;
  border-radius: 0.26667rem;
  background: url('/reference-assets/hot-bg.png') center/100% 100% no-repeat !important;
  overflow: visible;
}

.content.bluehome .game_menu .menu_box1 > div:first-child {
  width: 36%;
}

.content.bluehome .game_menu .menu_box1 img {
  width: 88% !important;
  height: 2.16rem !important;
  margin-top: -0.5rem;
  margin-bottom: 0.12rem;
  object-fit: contain;
}

.content.bluehome .game_menu .menu_box1 span {
  width: 100%;
  padding-left: 0.25rem;
  color: #333 !important;
  font-size: 0.37rem;
  font-weight: 700;
  text-align: left;
}

.content.bluehome .game_menu .menu_box2 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2.77333rem;
  margin-bottom: 0.4rem;
  border-radius: 0.26667rem;
  background: url('/reference-assets/third-bg.png') center/100% 100% no-repeat !important;
}

.content.bluehome .game_menu .menu_box2 > div {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 33.333%;
}

.content.bluehome .game_menu .menu_box2 img {
  width: 2.66667rem !important;
  height: 2.13333rem !important;
  object-fit: contain;
}

.content.bluehome .game_menu .menu_box2 span {
  color: #333 !important;
  font-size: 0.34rem;
  font-weight: 600;
}

.content.bluehome .game_menu .menu_box2 .live_menu::before,
.content.bluehome .game_menu .menu_box2 .live_menu::after {
  content: "";
  position: absolute;
  top: 0.27rem;
  width: 1px;
  height: 1.81rem;
  background: linear-gradient(#af8122, #ebc370);
}

.content.bluehome .game_menu .menu_box2 .live_menu::before { left: 0; }
.content.bluehome .game_menu .menu_box2 .live_menu::after { right: 0; }

.content.bluehome .game_menu .menu_box3 {
  display: flex;
  justify-content: space-between;
}

.content.bluehome .game_menu .menu_box3 > div {
  display: flex;
  width: 48%;
  height: 2.26667rem;
  border-radius: 0.26667rem;
  background: url('/reference-assets/bottom-bg.png') center/100% 100% no-repeat !important;
}

.content.bluehome .game_menu .menu_box3 img {
  width: 2.65rem !important;
  height: 2.1rem !important;
  object-fit: contain;
}

.content.bluehome .game_menu .menu_box3 span {
  margin: 0.94rem 0.3rem 0 0;
  color: #333 !important;
  font-size: 0.36rem;
  font-weight: 700;
}

/* Dark gold game cards. */
.content.bluehome .lottery_container-tab {
  width: 100%;
  overflow-x: auto;
  background: #3a3a3a !important;
  color: #a6a9ae;
}

.content.bluehome .lottery_container-tab li.active {
  color: #8f5206 !important;
  background: linear-gradient(#f6e3a3, #d2a753) !important;
}

.content.bluehome .lottery_container-list,
.content.bluehome .gamesList__container-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.27rem;
}

.content.bluehome .gamesList__container-list__item {
  overflow: hidden;
  border-radius: 0.26667rem !important;
  background: #3a3a3a !important;
}

/* Restore the original yellow-gold Lottery cards. */
.content.bluehome .lotterySlotItem {
  overflow: hidden;
  border-radius: 0.53333rem !important;
  background: linear-gradient(180deg, #fae59f 0%, #c4933f 100%) !important;
  box-shadow: 0 0.08rem 0.18rem rgba(0, 0, 0, 0.16) !important;
}

.content.bluehome .lotterySlotItem > span,
.content.bluehome .lotterySlotItem > h4 {
  color: #8f5206 !important;
}

.content.bluehome .gamesList__container-title,
.content.bluehome .luckyWinners__container > h1,
.content.bluehome .dailyProfitRank .title {
  position: relative;
  color: #f6dc88 !important;
  font-size: 0.46rem !important;
  font-weight: 600 !important;
}

/* Winning Information: style only. Data/rotation/events stay in Vue. */
.content.bluehome .luckyWinners__container {
  margin-top: 0.5rem;
}

.content.bluehome .luckyWinners__container-wrapper {
  height: 8.66667rem;
  overflow: hidden;
}

.content.bluehome .luckyWinners__container-wrapper__item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 1.6rem;
  margin-bottom: 0.13333rem;
  padding: 0.26667rem 0.24rem;
  border-radius: 0.13333rem;
  background: #292929 !important;
}

.content.bluehome .luckyWinners__container-wrapper__item-img img,
.content.bluehome .dailyProfitRank__content-topThree__item > div:first-of-type > img,
.content.bluehome .dailyProfitRank__content-list__item img {
  border-radius: 50%;
  object-fit: cover;
}

.content.bluehome .luckyWinners__container-wrapper__item-img img,
.content.bluehome .luckyWinners__container-wrapper__item-winType img,
.content.bluehome .dailyProfitRank__content-topThree__item > div:first-of-type > img,
.content.bluehome .dailyProfitRank__content-list__item img {
  object-fit: cover !important;
}

/* Match the reference PWA button and its separate three-icon right rail. */
#app .btn[data-v-b3bd7e49] {
  display: flex !important;
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 2.4rem !important;
  width: 4.85333rem !important;
  height: 1.06667rem !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
  opacity: 1 !important;
}

#app .float {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.08rem !important;
  position: fixed !important;
  right: var(--tw-float-right) !important;
  bottom: 4rem !important;
  transform: none !important;
  z-index: 1000 !important;
  touch-action: none;
  pointer-events: none !important;
}

#app .float .float-entry {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  width: 1.49333rem !important;
  height: 1.49333rem !important;
  flex: 0 0 1.49333rem !important;
  margin: 0 !important;
  border-radius: 50% !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#app .float .rewardCenter {
  background: url('/reference-assets/float-reward.png') center/cover no-repeat !important;
}

#app .float .turntable-lottery {
  background: url('/reference-assets/float-turntable.png') center/cover no-repeat !important;
}

#app .float .big-turntable {
  background: url('/reference-assets/float-big-turntable.png') center/cover no-repeat !important;
}

/* Native component CSS teleports/fixes entries independently. Pin each one to
   the right edge of the 10rem app canvas so the rail cannot split apart. */
#app .rewardCenter,
#app .turntable-lottery,
#app .big-turntable {
  display: block !important;
  position: fixed !important;
  left: auto !important;
  right: var(--tw-float-right) !important;
  width: 1.49333rem !important;
  height: 1.49333rem !important;
  margin: 0 !important;
  border-radius: 50% !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000 !important;
}

#app .rewardCenter {
  bottom: 7.16rem !important;
  background: url('/reference-assets/float-reward.png') center/cover no-repeat !important;
}

#app .turntable-lottery {
  bottom: 5.58rem !important;
  background: url('/reference-assets/float-turntable.png') center/cover no-repeat !important;
}

#app .big-turntable {
  display: block !important;
  bottom: 4rem !important;
  background: url('/reference-assets/float-big-turntable.png') center/cover no-repeat !important;
}

/* Keep the native gold bot as a fourth entry below the three reference icons. */
#app:has(.content.bluehome) .customer[data-v-715dd0f6],
#app:has(.content.bluehome) #customerId {
  display: block !important;
  position: fixed !important;
  left: auto !important;
  right: var(--tw-float-right) !important;
  bottom: 2.42rem !important;
  width: 1.49333rem !important;
  height: 1.49333rem !important;
  margin: 0 !important;
  border-radius: 50% !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* Gift floating icon: bonus collection dialog. */
.tw-bonus-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1.1rem 0.85rem 1.75rem;
  background: rgba(0, 0, 0, 0.72);
}

.tw-bonus-dialog {
  position: relative;
  width: min(8.3rem, calc(100vw - 1.2rem));
  max-height: min(11rem, calc(100vh - 2.8rem));
  padding: 0.35rem 0 0.27rem;
  border: 0.025rem solid rgba(247, 199, 90, 0.35);
  border-radius: 0.22rem;
  background:
    radial-gradient(circle at 90% 0, rgba(251, 198, 71, 0.2), transparent 34%),
    #242424;
  box-shadow: 0 0.28rem 0.8rem rgba(0, 0, 0, 0.5);
  overflow: visible;
}

.tw-bonus-dialog h2 {
  display: flex;
  align-items: center;
  height: 1.25rem;
  margin: 0;
  padding: 0 0.43rem;
  color: #f4c95d;
  font-size: 0.62rem;
  font-weight: 700;
  text-align: left;
}

.tw-bonus-list {
  max-height: min(8.8rem, calc(100vh - 5rem));
  padding: 0 0.32rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d6a934 #2f2f2f;
}

.tw-bonus-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  min-height: 1.23rem;
  box-sizing: border-box;
  padding: 0.22rem 0.27rem;
  border-radius: 0.21rem;
  background: #303030;
}

.tw-bonus-item + .tw-bonus-item { margin-top: 0.14rem; }

.tw-bonus-info {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.07rem;
  color: #dedede;
  font-size: 0.31rem;
}

.tw-bonus-info strong {
  display: flex;
  align-items: center;
  color: #ffb451;
  font-size: 0.4rem;
  line-height: 0.52rem;
}

.tw-bonus-info i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.48rem;
  height: 0.48rem;
  margin-right: 0.2rem;
  flex: 0 0 0.48rem;
  border: 0.025rem solid #fff091;
  border-radius: 50%;
  background: linear-gradient(#ffe760, #f29308);
  color: #fff4a3;
  font-size: 0.27rem;
  font-style: normal;
  box-shadow: inset 0 -0.05rem 0.08rem #d97400;
}

.tw-bonus-check {
  min-width: 1.62rem;
  height: 0.8rem;
  padding: 0 0.2rem;
  border: 0;
  border-radius: 0.67rem;
  background: linear-gradient(180deg, #ffe89b, #dba63c);
  color: #4b3815;
  font-size: 0.32rem;
  font-weight: 600;
}

.tw-bonus-close {
  position: absolute;
  left: 50%;
  bottom: -1.05rem;
  width: 0.8rem;
  height: 0.8rem;
  padding: 0;
  border: 0.035rem solid #fff;
  border-radius: 50%;
  background: rgba(31, 31, 31, 0.92);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 0.62rem;
  font-weight: 300;
  line-height: 0.7rem;
  text-align: center;
  cursor: pointer;
}

/* Wingo result table: keep the columns compact but improve readability. */
#app .GameRecord__C-body > .van-row > .van-col:nth-child(1),
#app .GameRecord__C-body > .van-row > .van-col:nth-child(3) {
  font-size: 0.32rem !important;
  font-weight: 500 !important;
}

.content.bluehome .luckyWinners__container-wrapper__item-info h1 {
  color: #a6a9ae !important;
}

.content.bluehome .luckyWinners__container-wrapper__item-winAmount h1 {
  color: #fae59f !important;
}

/* Today's earnings chart. */
.content.bluehome .dailyProfitRank {
  margin-top: 0.53rem;
  color: #fff;
}

.content.bluehome .dailyProfitRank__content-topThree {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  width: 100%;
  height: 3.33333rem;
  background: url('/reference-assets/earnings-stage.png') center/100% 100% no-repeat !important;
}

.content.bluehome .dailyProfitRank__content-topThree__item.rank-1 .rank-border { background: url('/reference-assets/earnings-border-1.png') center/100% 100% no-repeat !important; }
.content.bluehome .dailyProfitRank__content-topThree__item.rank-2 .rank-border { background: url('/reference-assets/earnings-border-2.png') center/100% 100% no-repeat !important; }
.content.bluehome .dailyProfitRank__content-topThree__item.rank-3 .rank-border { background: url('/reference-assets/earnings-border-3.png') center/100% 100% no-repeat !important; }
.content.bluehome .dailyProfitRank__content-topThree__item.rank-1 .rank-crown { background-image: url('/reference-assets/earnings-crown-1.png') !important; }
.content.bluehome .dailyProfitRank__content-topThree__item.rank-2 .rank-crown { background-image: url('/reference-assets/earnings-crown-2.png') !important; }
.content.bluehome .dailyProfitRank__content-topThree__item.rank-3 .rank-crown { background-image: url('/reference-assets/earnings-crown-3.png') !important; }
.content.bluehome .dailyProfitRank__content-topThree__item.rank-1 .rank-place { background-image: url('/reference-assets/earnings-place-1.png') !important; }
.content.bluehome .dailyProfitRank__content-topThree__item.rank-2 .rank-place { background-image: url('/reference-assets/earnings-place-2.png') !important; }
.content.bluehome .dailyProfitRank__content-topThree__item.rank-3 .rank-place { background-image: url('/reference-assets/earnings-place-3.png') !important; }

.content.bluehome .dailyProfitRank__content-topThree__item > div:last-of-type .rank-crown {
  position: relative;
  top: -0.33333rem;
  left: -0.25333rem;
  display: block;
  width: 1.14667rem;
  height: 1.10667rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.content.bluehome .dailyProfitRank__content-topThree__item > div:last-of-type .rank-place {
  display: block;
  width: 1.78667rem;
  height: 0.42667rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.content.bluehome .dailyProfitRank__content-list {
  display: flex;
  flex-direction: column;
  gap: 0.21rem;
}

.content.bluehome .dailyProfitRank__content-list__item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 1.36rem;
  padding: 0.15rem 0.25rem 0.15rem 0.44rem;
  border-radius: 0.13rem;
  background: #292929 !important;
}

.content.bluehome .dailyProfitRank__content-list__item .right-box {
  margin-left: auto;
  padding: 0.14rem 0.2rem;
  border-radius: 9rem;
  background: linear-gradient(#f6e59f, #c4933f) !important;
  color: #292929 !important;
}

/* Rounded reference bottom navigation. */
#app .tabbar__container {
  min-height: 1.73rem;
  padding-bottom: 0.13rem;
  border-radius: 0.67rem 0.67rem 0 0;
  background: #292929 !important;
  box-shadow: 0 -0.08rem 0.25rem rgba(0, 0, 0, 0.25);
}

/* Self-contained account avatar picker (the production Avatar route is absent). */
.tw-avatar-page {
  position: fixed;
  inset: 0;
  z-index: 5000;
  width: min(100%, 10rem);
  margin: 0 auto;
  overflow-y: auto;
  background: #242424;
  color: #f5f3f0;
}

.tw-avatar-page header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1rem 1fr 1.1rem;
  align-items: center;
  height: 1.25rem;
  background: #333332;
}

.tw-avatar-page h2 {
  grid-column: 2;
  margin: 0;
  font-size: 0.48rem;
  font-weight: 500;
  text-align: center;
}

.tw-avatar-back {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 0.9rem;
}

.tw-avatar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
  padding: 0.42rem;
}

.tw-avatar-option {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 0.06rem solid transparent;
  border-radius: 0.28rem;
  background: #333;
}

.tw-avatar-option img { width: 100%; height: 100%; object-fit: cover; }
.tw-avatar-option.selected { border-color: #d9ac4f; }
.tw-avatar-option.selected::after {
  content: '✓';
  position: absolute;
  right: 0.08rem;
  bottom: 0.08rem;
  display: grid;
  place-items: center;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #d9ac4f;
  color: #fff;
}

.tw-avatar-status {
  min-height: 0.8rem;
  padding: 0 0.4rem 0.35rem;
  color: #f6dc88;
  font-size: 0.34rem;
  text-align: center;
}

#app .tabbar__container-item {
  color: #bfbfbf;
}

#app .tabbar__container-item.active:not(:nth-of-type(3)) {
  color: #ddb96b !important;
}

@media (max-width: 500px) {
  .content.bluehome > .navbar .navbar__content-left > img {
    width: 3rem !important;
    height: 0.86rem;
    object-fit: cover;
  }

  .content.bluehome > .navbar .content__right > * {
    width: 2.75rem;
    min-width: 2.75rem;
  }

  .content.bluehome .tw-home-header-label {
    width: 1.65rem;
    font-size: 0.25rem;
  }
}