@charset "utf-8";

/* ==========================================================================
   基础 / rem 根值
   设计稿宽 375px，1rem = 100px，px 值除以 100 即为 rem
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 26.66667vw; /* 375 * 26.66667% = 100px */
  -webkit-text-size-adjust: 100%;
}

/* 宽屏下锁定 2 倍尺寸，避免页面被无限拉伸 */
@media screen and (min-width: 750px) {
  html {
    font-size: 200px;
  }
}

body {
  background: #3d0f7d;
  font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: .14rem;
  color: #3b2b57;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  border: 0;
}

p {
  word-break: break-word;
}

/* ==========================================================================
   页面容器
   ========================================================================== */
.page {
  position: relative;
  width: 3.75rem;
  margin: 0 auto;
  padding-bottom: .2rem;
  overflow: hidden;
  background: linear-gradient(180deg, #4b1596 0%, #6423b6 22%, #7b2ec9 48%, #5d1ba8 78%, #3d0f7d 100%);
}

.page__fade {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: .86rem;
  background: linear-gradient(180deg, rgba(45, 12, 90, 0) 0%, rgba(45, 12, 90, .86) 50%, rgba(38, 8, 78, .97) 100%);
}

/* 顶部主视觉 */
.hero {
  position: relative;
  width: 3.75rem;
  height: 2.27rem;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__fade {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: .6rem;
  background: linear-gradient(180deg, rgba(84, 26, 161, 0) 0%, #541aa1 100%);
}

/* 内容区：设计稿 top 200，主视觉高 227，故上移 27 */
.main {
  position: relative;
  width: 3.55rem;
  margin: -.27rem auto 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

/* ==========================================================================
   卡片通用
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .1rem;
  border-radius: .2rem;
  background: #fdf9ff;
}

.card--03 {
  gap: .2rem;
  padding: .1rem .1rem .2rem;
}

.card--05 {
  gap: .2rem;
}

.card--04 {
  display: block;
  border-radius: .165rem;
}

/* 序号胶囊标题 */
.pill {
  display: flex;
  align-items: center;
  width: fit-content;
  height: .36rem;
  padding: 0 .11rem 0 .1rem;
  border-radius: 1rem;
}

.pill--w200 {
  width: 2rem;
}

.pill--violet {
  background: linear-gradient(90deg, #6d28d9 0%, #a855f7 100%);
}

.pill--green {
  background: linear-gradient(90deg, #047857 0%, #22c55e 100%);
}

.pill--rose {
  background: linear-gradient(90deg, #be123c 0%, #f43f5e 100%);
}

.pill__no {
  margin-right: .1rem;
  font-size: .18rem;
  font-weight: 600;
  line-height: .25rem;
}

.pill--violet .pill__no {
  color: #ffd76a;
}

.pill--green .pill__no {
  color: #eaffd0;
}

.pill--rose .pill__no {
  color: #ffe08a;
}

.pill__name {
  font-size: .16rem;
  font-weight: 600;
  line-height: .22rem;
  color: #fff;
  white-space: nowrap;
}

.pill__sub {
  margin-left: .08rem;
  font-size: .11rem;
  line-height: .15rem;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
}

.pill--green .pill__sub {
  color: rgba(255, 255, 255, .85);
}

/* 卡片说明文案 */
.card__lead {
  font-size: .14rem;
  color: #3b2b57;
}

.card__lead p {
  line-height: .24rem;
}

/* 行内大号数字不参与行框计算，避免撑高所在行 */
.card__lead b {
  font-size: .16rem;
  font-weight: 600;
  line-height: 1;
  color: #e11d48;
}

.card__lead--inline {
  line-height: .22rem;
  white-space: nowrap;
}

.card__tip {
  font-size: .14rem;
  font-weight: 600;
  line-height: .2rem;
  color: #047857;
  white-space: nowrap;
}

/* 圆点条目 */
.dot {
  flex: none;
  width: .07rem;
  height: .07rem;
  margin-right: .1rem;
  border-radius: 50%;
  background: #7c3aed;
}

.bullet {
  display: flex;
  align-items: center;
  font-size: .14rem;
  line-height: .2rem;
  color: #3b2b57;
  white-space: nowrap;
}

/* ==========================================================================
   01 每日拍摄奖励 —— 日间场 / 夜间场（左右并排）
   ========================================================================== */
.panels {
  display: flex;
  gap: .1rem;
}

.panel {
  position: relative;
  width: 1.62rem;
  height: 2rem;
  border-radius: .14rem;
}

.panel--day {
  background: linear-gradient(180deg, #fff7e8 0%, #ffeed4 100%);
  box-shadow: inset 0 0 0 .01rem #ffd9a1;
}

.panel--night {
  background: #ede4fe;
  box-shadow: inset 0 0 0 .01rem #cdb6f5;
}

.panel__head {
  position: absolute;
  left: .06rem;
  top: .1rem;
  display: flex;
  align-items: center;
  height: .17rem;
}

.panel__icon {
  position: relative;
  flex: none;
  width: .12rem;
  height: .12rem;
  margin-right: .04rem;
  overflow: hidden;
}

.panel__title,
.panel__time {
  font-size: .12rem;
  font-weight: 600;
  line-height: .17rem;
  white-space: nowrap;
}

.panel__time {
  margin-left: .04rem;
}

.panel--day .panel__title {
  color: #b45309;
}

.panel--day .panel__time {
  color: #f97316;
}

.panel--night .panel__title {
  color: #5b21b6;
}

.panel--night .panel__time {
  color: #7c3aed;
}

.panel__desc {
  position: absolute;
  left: .06rem;
  top: .32rem;
  width: 1.44rem;
  font-size: .12rem;
  line-height: .17rem;
  color: #5b4630;
  white-space: nowrap;
}

.panel__desc b {
  font-weight: 600;
  color: #e11d48;
}

.reward {
  position: absolute;
  left: .06rem;
  top: .8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  width: 1.42rem;
  height: 1.1rem;
  padding: .1rem 0;
  border-radius: .1rem;
  background: #fff;
}

.reward__icon {
  position: relative;
  flex: none;
  width: .6rem;
  height: .6rem;
  overflow: hidden;
}

.reward__label {
  font-size: .14rem;
  font-weight: 600;
  line-height: .2rem;
  color: #2b1a56;
  white-space: nowrap;
}

.reward__label em {
  margin-left: .04rem;
  font-style: normal;
  color: #ff3b54;
}

/* ==========================================================================
   02 连续开播奖励
   ========================================================================== */
.streak {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  width: 3.35rem;
}

.streak__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: .5rem;
  padding: .12rem .1rem .1rem;
  border-radius: .14rem;
  background: #f2fbf5;
  box-shadow: inset 0 0 0 .01rem #bfe8cd;
}

.streak__cond {
  display: flex;
  align-items: center;
}

.streak__days {
  font-size: .14rem;
  line-height: .22rem;
  color: #256b45;
  white-space: nowrap;
}

.streak__days b {
  margin: 0 .02rem;
  font-size: .16rem;
  font-weight: 600;
  line-height: 1;
  color: #16a34a;
}

.streak__note {
  margin-left: .1rem;
  font-size: .11rem;
  line-height: .15rem;
  color: #5a7a68;
  white-space: nowrap;
}

.streak__prize {
  display: flex;
  align-items: center;
}

.streak__num {
  font-size: .2rem;
  font-weight: 600;
  line-height: .28rem;
  color: #e11d48;
}

.streak__unit {
  margin-left: .06rem;
  font-size: .11rem;
  line-height: .15rem;
  color: #7a5a2a;
  white-space: nowrap;
}

/* 玩币图标 */
.coin {
  position: relative;
  flex: none;
  width: .18rem;
  height: .18rem;
  margin-left: .06rem;
}

.coin__outer {
  position: absolute;
  left: 0;
  top: 0;
  width: .18rem;
  height: .18rem;
}

.coin__inner {
  position: absolute;
  left: .02rem;
  top: .02rem;
  width: .14rem;
  height: .14rem;
}

.coin__w {
  position: absolute;
  left: .045rem;
  top: .0355rem;
  width: .09rem;
  font-size: .0855rem;
  font-style: normal;
  font-weight: 600;
  line-height: .12rem;
  text-align: center;
  color: #c6720a;
}

/* ==========================================================================
   03 优质回放曝光
   ========================================================================== */
.replay {
  display: flex;
  align-items: center;
  gap: .2rem;
}

.badge {
  position: relative;
  flex: none;
  width: .68rem;
  height: .68rem;
}

.badge__base {
  position: absolute;
  left: 0;
  top: 0;
  width: .68rem;
  height: .68rem;
}

.badge__ring {
  position: absolute;
  left: -.015rem;
  top: -.015rem;
  width: .71rem;
  height: .71rem;
}

.badge__top,
.badge__num {
  position: absolute;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  color: #7a3d00;
}

.badge__top {
  left: .235rem;
  top: .18rem;
  width: .21rem;
  font-size: .1rem;
  line-height: .14rem;
}

.badge__num {
  left: .225rem;
  top: .26rem;
  width: .23rem;
  font-size: .22rem;
  line-height: .31rem;
}

.replay__text {
  width: 2.24rem;
  font-size: .14rem;
  color: #3b2b57;
}

.replay__text p {
  line-height: .2rem;
}

.replay__text p + p {
  margin-top: .04rem;
}

.metrics {
  display: flex;
  justify-content: space-between;
  width: 3.35rem;
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .08rem;
  width: .6rem;
  height: .58rem;
  border-radius: .14rem;
  background: #f6f2ff;
}

.metric__icon {
  position: relative;
  width: .18rem;
  height: .18rem;
}

.metric__name {
  font-size: .095rem;
  font-weight: 600;
  line-height: .13rem;
  color: #5b3be8;
  white-space: nowrap;
}

/* ==========================================================================
   04 有效直播要求
   ========================================================================== */
.card--04 .pill {
  margin-bottom: .2rem;
}

.bans {
  display: flex;
  flex-direction: column;
  gap: .06rem;
  width: 3.35rem;
  margin-bottom: .1rem;
}

.bans__row {
  display: flex;
  gap: .06rem;
}

.ban {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .08rem;
  padding: .1rem 0;
  border-radius: .14rem;
  background: #fff5f6;
  box-shadow: inset 0 0 0 .01rem #ffd6dc;
}

.ban__icon {
  width: .29rem;
  height: .29rem;
}

.ban__name {
  font-size: .11rem;
  line-height: .15rem;
  color: #b3253a;
  white-space: nowrap;
}

.warn {
  position: relative;
  width: 3.35rem;
  height: .72rem;
  border-radius: .14rem;
  background: #fff1f4;
  box-shadow: inset 0 0 0 .01rem #f9c3ce;
}

.warn__mark {
  position: absolute;
  left: .1332rem;
  top: .12rem;
  width: .2459rem;
  height: .24rem;
}

.warn__mark img {
  width: 100%;
  height: 100%;
}

.warn__mark i {
  position: absolute;
  left: 0;
  top: .008rem;
  width: 100%;
  font-size: .16rem;
  font-style: normal;
  font-weight: 600;
  line-height: .22rem;
  text-align: center;
  color: #fff;
}

.warn__text {
  position: absolute;
  left: .4815rem;
  top: .14rem;
  width: 2.725rem;
  font-size: .14rem;
  color: #8a2338;
}

.warn__text p {
  line-height: .2rem;
}

.warn__text p + p {
  margin-top: .04rem;
}

/* ==========================================================================
   05 其他说明
   ========================================================================== */
.notes {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  width: 3.35rem;
}

.note {
  display: flex;
  align-items: flex-start;
}

.note .dot {
  margin-top: .07rem;
}

.note span {
  width: 3.18rem;
  font-size: .14rem;
  line-height: .2rem;
  color: #3b2b57;
}

.card__deco {
  position: absolute;
  left: 3.15rem;
  top: 3.175rem;
  width: .44rem;
  height: .3885rem;
  object-fit: cover;
}

/* ==========================================================================
   底部：文案 + 参与按钮
   ========================================================================== */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
}

.footer__text {
  width: 100%;
  font-size: .16rem;
  font-weight: 600;
  line-height: .22rem;
  text-align: center;
  color: #ffe6a6;
}

.footer__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  width: 100%;
  height: .58rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, #ffe07a 0%, #ffb020 50%, #f08a08 100%);
  font-size: .2rem;
  font-weight: 600;
  line-height: .28rem;
  color: #7a2a00;
  text-decoration: none;
}

.footer__arrow {
  flex: none;
  width: .13rem;
  height: .16rem;
}

/* ==========================================================================
   图标定位（尺寸与偏移取自设计稿）
   ========================================================================== */
.ico {
  position: absolute;
}

.ico--sun {
  left: 0;
  top: 0;
  width: .12rem;
  height: .12rem;
}

.ico--moon {
  left: .0198rem;
  top: .01rem;
  width: .0804rem;
  height: .1rem;
}

.ico--wwsd {
  left: 7.29%;
  top: 15.27%;
  width: 83.33%;
  height: 69.45%;
}

.ico--rocket {
  left: 14.17%;
  top: 5%;
  width: 72.7%;
  height: 89.58%;
}

.ico--hot {
  left: .03rem;
  top: .02rem;
  width: .12rem;
  height: .145rem;
}

.ico--view {
  left: .004rem;
  top: .03rem;
  width: .18rem;
  height: .12rem;
}

.ico--interact {
  left: .003rem;
  top: .003rem;
  width: .18rem;
  height: .167rem;
}

.ico--quality {
  left: .02rem;
  top: 0;
  width: .14rem;
  height: .18rem;
}

.ico--complete {
  left: .0056rem;
  top: .015rem;
  width: .16875rem;
  height: .15rem;
}