* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #190704;
}

a {
  text-decoration: none;
  color: #fff;
}

.desktop {
  display: none;
}

/* 设计稿 360 x 760。--u 为一个设计稿像素的实际长度，横向按稿等比铺满；
   纵向由中段 .mb-stage 吸收视口高度差，保证任意机型单屏不滚动。 */
.wrap-body {
  --u: calc(min(100vw, 750px) / 360);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 750px;
  height: 100%;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background-color: #190704;
  color: #fff;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 整页背景轮播：slide-1 ~ slide-4 铺满，UI 叠在上面 */
.mb-swiper {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mb-swiper .swiper-wrapper,
.mb-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

.mb-swiper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 顶部压暗 */
.wrap-body::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  height: calc(54.15 * var(--u));
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* 顶部品牌区 */
.mb-header {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  height: calc(66.081 * var(--u));
  box-sizing: content-box;
  padding-top: env(safe-area-inset-top, 0px);
}

.mb-header > * {
  position: absolute;
}

.mb-logo {
  left: calc(12 * var(--u));
  top: calc(15 * var(--u));
  width: calc(48.52 * var(--u));
  height: calc(47.97 * var(--u));
}

.mb-brand-name {
  left: calc(69.42 * var(--u));
  top: calc(20.06 * var(--u));
  font-size: calc(17.155 * var(--u));
  line-height: calc(21 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}

.mb-brand-slogan {
  left: calc(69.42 * var(--u));
  top: calc(43.52 * var(--u));
  font-size: calc(12.866 * var(--u));
  line-height: calc(18 * var(--u));
  opacity: 0.7;
  white-space: nowrap;
}

/* 右上角商务 / TG 入口 */
.mb-pill {
  display: block;
  top: calc(27 * var(--u));
  width: calc(58.723 * var(--u));
  height: calc(23 * var(--u));
}

.mb-pill img {
  display: block;
  width: 100%;
  height: 100%;
}

.mb-pill-biz {
  left: calc(224 * var(--u));
}

.mb-pill-tg {
  left: calc(288.597 * var(--u));
}

/* 主标题与副标语 */
.mb-intro {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  height: calc(171.919 * var(--u));
  pointer-events: none;
}

.mb-intro > * {
  position: absolute;
}

/* 稿中标题艺术字按 300 x 198 放置，只露出中间 126.86 的一条 */
.mb-title {
  left: calc(29.02 * var(--u));
  top: 0;
  width: calc(300 * var(--u));
  height: calc(126.838 * var(--u));
  overflow: hidden;
  pointer-events: none;
}

.mb-title img {
  position: absolute;
  left: 0;
  top: calc(-27.85 * var(--u));
  width: calc(300 * var(--u));
  height: calc(198 * var(--u));
  display: block;
}

.mb-slogan {
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}

.mb-slogan-1 {
  left: calc(77 * var(--u));
  top: calc(137.92 * var(--u));
}

.mb-slogan-2 {
  left: calc(94 * var(--u));
  top: calc(156.92 * var(--u));
}

/* 人像 + 分类卡。视口高度的盈亏全部由这一段吸收。 */
.mb-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  margin: calc(11 * var(--u)) 0 calc(11.61 * var(--u));
  pointer-events: none;
}

.mb-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(187.39 * var(--u));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 62.97%, #000 100%);
  pointer-events: none;
}

.mb-cards {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(108.56 * var(--u));
  pointer-events: auto;
}

/* 四张卡连同角标一起是整图；点击切背景，选中态有过渡 */
.mb-card {
  position: absolute;
  bottom: 0;
  width: calc(81.42 * var(--u));
  height: calc(108.56 * var(--u));
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  border: calc(1.5 * var(--u)) solid transparent;
  border-radius: calc(6 * var(--u));
  transition: border-color 0.35s ease;
}

.mb-card.is-active {
  border-color: #ffb200;
}

.mb-card:active {
  opacity: 0.92;
}

.mb-card-drama {
  left: calc(9 * var(--u));
}

.mb-card-video {
  left: calc(98.83 * var(--u));
}

.mb-card-anime {
  left: calc(187.82 * var(--u));
}

.mb-card-novel {
  left: calc(276.81 * var(--u));
}

/* 底部下载栏 */
.mb-footer {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  height: calc(80 * var(--u));
  box-sizing: content-box;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #130e0b;
}

.mb-dl {
  position: absolute;
  top: calc(10 * var(--u));
  width: calc(164 * var(--u));
  height: calc(36 * var(--u));
}

.mb-dl img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mb-dl-ios {
  left: calc(11 * var(--u));
}

.mb-dl-and {
  left: calc(185 * var(--u));
}

.set-up-tip {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(53 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(17 * var(--u));
  text-align: center;
  color: #fff;
}