/* Scoped presentation for the four-choice game screen. */
#app .lottery[data-v-c31cda44] {
  background-color: #f7f6f8;
}

#app .lottery .van-nav-bar,
#app .lottery .top[data-v-c31cda44] {
  background: linear-gradient(115deg, rgba(143, 55, 124, .91), rgba(91, 57, 143, .89));
}

#app .lottery .top[data-v-c31cda44] {
  padding: 14px 12px 12px;
}

#app .lottery .top .qs[data-v-c31cda44] {
  gap: 8px;
  padding-bottom: 12px;
}

#app .lottery .top .qs>div[data-v-c31cda44] {
  min-width: 0;
  gap: 10px;
}

#app .lottery .top .qs>div .ico[data-v-c31cda44] {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 6px;
}

#app .lottery .top .qs>div .ico img[data-v-c31cda44] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#app .lottery .top .qs>div h1[data-v-c31cda44] {
  min-width: 0;
  padding-left: 0;
  font-size: 16px;
  white-space: nowrap;
}

#app .lottery .top .qs>span[data-v-c31cda44] {
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 5px;
  background: rgba(255, 255, 255, .12);
  color: #ffe29a;
  white-space: nowrap;
}

#app .lottery .top .number[data-v-c31cda44] {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(0, 1.7fr);
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .27);
  border-radius: 6px;
  background: rgba(255, 255, 255, .17);
}

#app .lottery .top .number .left .ball p[data-v-c31cda44] {
  width: auto;
  height: auto;
  line-height: 1.35;
}

#app .lottery .top .number .right[data-v-c31cda44] {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 8px;
  border-radius: 5px;
  box-shadow: 0 2px 7px rgba(56, 27, 73, .1);
}

#app .lottery .top .number .right[data-v-c31cda44]:before {
  display: none;
}

#app .lottery .top .number .right .res[data-v-c31cda44] {
  gap: 5px;
}

#app .lottery .top .number .right .res span[data-v-c31cda44] {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-right: 0;
  background: #a65d98;
  font-size: 13px;
  font-weight: 700;
}

#app .lottery .lottery-content[data-v-c31cda44] {
  background: #f7f6f8;
}

#app .lottery .lottery-content .right .ball[data-v-c31cda44] {
  padding-top: 20px;
  padding-right: 14px;
  padding-left: 14px;
}

#app .lottery .lottery-content .right .ball>div:has(>.idx0) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#app .lottery .lottery-content .right .ball>div .idx0[data-v-c31cda44] {
  width: 100%;
  min-width: 0;
  height: 96px;
  margin: 0;
  border: 1px solid #ebe5ed;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(52, 35, 60, .07);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#app .lottery .lottery-content .right .ball>div .idx0 p[data-v-c31cda44] {
  color: #b34773;
  font-size: 25px;
  line-height: 1;
}

#app .lottery .lottery-content .right .ball>div .idx0.active[data-v-c31cda44] {
  border-color: #ad4c83;
  background: #ad4c83;
  box-shadow: 0 4px 12px rgba(133, 56, 107, .22);
}

#app .lottery .lottery-content .right .ball>div .idx0.active p[data-v-c31cda44] {
  color: #fff;
}

#app .lottery .foot[data-v-c31cda44] {
  left: 50%;
  width: 100%;
  max-width: 500px;
  height: 60px;
  padding: 0 16px;
  justify-content: space-between;
  transform: translateX(-50%);
  border-top: 1px solid #e9e5eb;
  box-shadow: 0 -3px 12px rgba(52, 35, 60, .07);
}

#app .lottery .foot p[data-v-c31cda44] {
  color: #51485a;
}

#app .lottery .foot a[data-v-c31cda44] {
  padding: 9px 20px;
  border-radius: 6px;
  background: #ad4c83;
  box-shadow: 0 2px 7px rgba(133, 56, 107, .17);
}

@media (hover: hover) {
  #app .lottery .lottery-content .right .ball>div .idx0:hover {
    transform: translateY(-2px);
    border-color: #d98cb5;
    box-shadow: 0 5px 13px rgba(52, 35, 60, .12);
  }
}

@media (max-width: 359px) {
  #app .lottery .top .qs>div[data-v-c31cda44] {
    gap: 6px;
  }

  #app .lottery .top .qs>div h1[data-v-c31cda44] {
    font-size: 14px;
  }

  #app .lottery .top .qs>span[data-v-c31cda44],
  #app .lottery .top .qs>span span[data-v-c31cda44] {
    font-size: 11px !important;
  }

  #app .lottery .top .qs>span span[data-v-c31cda44] {
    margin-right: 4px !important;
  }

  #app .lottery .top .number[data-v-c31cda44] {
    gap: 7px;
    padding: 8px;
  }

  #app .lottery .top .number .right .res span[data-v-c31cda44] {
    flex-basis: 29px;
    width: 29px;
    height: 29px;
  }
}