@font-face { font-family: "title"; src: url(../font/title-heavy.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "title"; src: url(../font/title-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --u: min(calc(100vw / 390), calc(100svh / 780));
  --serif: "title", "PingFang SC", "Microsoft YaHei", sans-serif;
  --accent: #ff3d9a;
  --accent2: #ffe15a;
  --g2: #8b2fd6;
  --deep: #1f0620;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0410; color: #fff; -webkit-text-size-adjust: 100%; }
img { display: block; }

body[data-channel="drama"] { --accent: #9a6bff; --accent2: #ffd36b; --g2: #3a1f7a; --deep: #120726; }
body[data-channel="video"] { --accent: #ff2d55; --accent2: #ffb03a; --g2: #7a1020; --deep: #16060a; }

.bg { position: fixed; inset: -14%; z-index: 0; background: 0 50% / 100% auto; transform: rotate(-8deg); filter: saturate(.85) brightness(.7); }
.bg-wash { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,2,12,.6) 0, rgba(6,2,12,.2) 34%, rgba(6,2,12,.94) 100%),
    linear-gradient(115deg, color-mix(in srgb, var(--g2) 72%, transparent) 0, transparent 58%),
    rgba(9,3,16,.4); }
.hero { position: fixed; z-index: 2; top: 0; right: calc(-26 * var(--u)); height: calc(430 * var(--u)); width: auto; object-fit: contain; object-position: top center;
  -webkit-mask-image: linear-gradient(to left, #000 42%, transparent 92%), linear-gradient(to bottom, #000 56%, transparent 97%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, #000 42%, transparent 92%), linear-gradient(to bottom, #000 56%, transparent 97%); mask-composite: intersect; }
.hero[hidden] { display: none; }

.kv { position: relative; z-index: 4; height: 100%; width: 100%; }

.topbar { position: absolute; top: calc(18 * var(--u)); left: calc(18 * var(--u)); right: calc(18 * var(--u)); }
.logo { display: inline-flex; align-items: center; gap: calc(9 * var(--u)); }
.logo i { font-style: normal; display: inline-flex; align-items: center; gap: calc(9 * var(--u)); font: 700 calc(14 * var(--u)) / 1 var(--serif); letter-spacing: .06em; color: rgba(255,255,255,.94); text-shadow: 0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.6); }
.logo i::before { content: ""; width: calc(4 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(2 * var(--u)); background: linear-gradient(var(--accent), var(--accent2)); box-shadow: 0 0 calc(10 * var(--u)) var(--accent); }

.slogan { position: absolute; left: calc(26 * var(--u)); right: calc(26 * var(--u)); top: calc(286 * var(--u)); }
.tag { margin: 0 0 calc(14 * var(--u)); display: inline-block; padding: calc(5 * var(--u)) calc(13 * var(--u)); border-radius: calc(4 * var(--u));
  font: 700 calc(12 * var(--u)) / 1 var(--serif); letter-spacing: .05em; color: #fff; background: linear-gradient(100deg, var(--accent), var(--g2)); box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.4); }
.slogan h1 { margin: 0; display: flex; flex-direction: column; gap: calc(5 * var(--u)); font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 800; line-height: 1.04; }
.slogan h1 span { display: inline-block; width: fit-content; }
.l1 { font-size: calc(36 * var(--u)); font-weight: 700; color: rgba(255,255,255,.86); letter-spacing: .03em; text-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.65); }
.l2 { position: relative; font-size: calc(58 * var(--u)); font-weight: 800; color: #fff; letter-spacing: .01em; text-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.65); }
.l2::after { content: ""; position: absolute; left: 0; bottom: calc(-12 * var(--u)); width: calc(70 * var(--u)); height: calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.tags { list-style: none; margin: calc(30 * var(--u)) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.tags li { padding: calc(5 * var(--u)) calc(11 * var(--u)); border-radius: calc(5 * var(--u)); border: calc(1.4 * var(--u)) solid var(--accent2);
  color: var(--accent2); background: rgba(0,0,0,.42); font: 700 calc(12 * var(--u)) / 1 var(--serif); letter-spacing: .02em; }

.dl { position: absolute; left: 50%; bottom: calc(42 * var(--u)); transform: translateX(-50%); width: calc(300 * var(--u)); display: flex; flex-direction: column; align-items: center; }
.sub { margin: 0 0 calc(12 * var(--u)); font: 700 calc(13 * var(--u)) / 1 var(--serif); letter-spacing: .04em; color: var(--accent2); text-shadow: 0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.6); }
.badge { position: relative; display: block; width: calc(256 * var(--u)); height: calc(62 * var(--u)); border-radius: calc(31 * var(--u));
  background: linear-gradient(100deg, var(--accent), var(--g2)); color: #fff; text-decoration: none;
  box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) color-mix(in srgb, var(--accent) 48%, transparent), inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.35);
  transition: transform .15s, filter .15s; }
.badge[hidden] { display: none; }
.badge:active { transform: scale(.97); filter: brightness(1.08); }
.badge-icon { position: absolute; left: calc(30 * var(--u)); top: 50%; width: calc(27 * var(--u)); height: calc(27 * var(--u)); margin-top: calc(-13.5 * var(--u)); }
.badge-text { position: absolute; left: calc(70 * var(--u)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: calc(2 * var(--u)); white-space: nowrap; }
.badge-text small { font: 700 calc(10 * var(--u)) / 1 var(--serif); color: rgba(255,255,255,.9); }
.badge-text b { font: 900 calc(16 * var(--u)) / 1 var(--serif); color: #fff; letter-spacing: .03em; }
.badge.is-long .badge-text b { font-size: calc(13.5 * var(--u)); }
.web-link { padding: calc(11 * var(--u)) 0 0; text-align: center; font-size: calc(12 * var(--u)); color: rgba(255,255,255,.88); text-decoration: underline; text-underline-offset: 2px; text-shadow: 0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.6); }
.web-link[hidden] { display: none; }
.trust { margin: calc(16 * var(--u)) 0 0; display: flex; gap: calc(18 * var(--u)); }
.trust span { position: relative; font-size: calc(11 * var(--u)); color: rgba(255,255,255,.72); }
.trust span + span::before { content: ""; position: absolute; left: calc(-9 * var(--u)); top: 50%; width: calc(3 * var(--u)); height: calc(3 * var(--u)); margin-top: calc(-1.5 * var(--u)); border-radius: 50%; background: rgba(255,255,255,.4); }

.badge-qr { display: none; }

.play { display: none; }
.reel { display: none; }
body[data-channel="video"] .reel { display: flex; justify-content: center; gap: calc(12 * var(--u)); position: absolute; z-index: 4; left: calc(26 * var(--u)); right: calc(26 * var(--u)); top: calc(536 * var(--u)); }
body[data-channel="video"] .reel span { position: relative; width: calc(104 * var(--u)); aspect-ratio: 16 / 9; border-radius: calc(9 * var(--u)); overflow: hidden; border: calc(1 * var(--u)) solid rgba(255,255,255,.16); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.5); }
body[data-channel="video"] .reel img { width: 100%; height: 100%; object-fit: cover; }
body[data-channel="video"] .reel span::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin: calc(-11 * var(--u)); border-radius: 50%; background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255,255,255,.85); }
body[data-channel="video"] .reel span::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: calc(12.2 * var(--u)); height: calc(12.2 * var(--u)); margin: calc(-6.1 * var(--u)) 0 0 calc(-4.7 * var(--u)); background: url(../img/icon/play.svg) center / contain no-repeat; }

body[data-channel="video"]::before, body[data-channel="video"]::after {
  content: ""; position: fixed; left: 0; right: 0; height: calc(20 * var(--u)); z-index: 5; pointer-events: none;
  background: #16151a url(../img/texture/film-strip.webp) center / auto calc(14.65 * var(--u)) repeat-x;
}
body[data-channel="video"]::before { top: 0; }
body[data-channel="video"]::after { bottom: 0; }

body[data-channel="video"] .bg { background-image: url(../img/theme/video/bg.jpg); filter: saturate(.6) brightness(.5) blur(calc(1 * var(--u))); }
body[data-channel="video"] .hero {
  top: calc(96 * var(--u)); right: auto; left: 50%; transform: translateX(-50%);
  width: calc(318 * var(--u)); height: calc(182 * var(--u)); object-fit: cover; object-position: center 28%;
  border-radius: calc(14 * var(--u)); border: calc(1.5 * var(--u)) solid rgba(255,255,255,.14);
  box-shadow: 0 calc(16 * var(--u)) calc(44 * var(--u)) rgba(0,0,0,.7), 0 0 0 calc(5 * var(--u)) rgba(0,0,0,.4);
  -webkit-mask-image: none; mask-image: none;
}
body[data-channel="video"] .play {
  display: grid; place-items: center; position: absolute; z-index: 4; top: calc(187 * var(--u)); left: 50%;
  width: calc(66 * var(--u)); height: calc(66 * var(--u)); margin: calc(-33 * var(--u)); border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--g2)); box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.6), 0 0 0 calc(7 * var(--u)) color-mix(in srgb, var(--accent) 22%, transparent), inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.4);
}
body[data-channel="video"] .play img { width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin-left: calc(6 * var(--u)); }
body[data-channel="video"] .slogan { top: calc(330 * var(--u)); left: calc(26 * var(--u)); right: calc(26 * var(--u)); text-align: center; }
body[data-channel="video"] .tag { margin-bottom: calc(16 * var(--u)); }
body[data-channel="video"] .slogan h1 { align-items: center; }
body[data-channel="video"] .l2::after { left: 50%; transform: translateX(-50%); }
body[data-channel="video"] .tags { justify-content: center; }

@media (min-width: 1024px) {
  body[data-channel="video"] .bg { background-image: url(../img/theme/video/bg-wide.jpg); }
  body[data-channel="video"]::before, body[data-channel="video"]::after { height: calc(26 * var(--u)); background-size: auto calc(19.05 * var(--u)); }
  body[data-channel="video"] .hero { top: 50%; left: auto; right: calc(70 * var(--u)); transform: translateY(-50%); width: calc(640 * var(--u)); height: calc(360 * var(--u)); }
  body[data-channel="video"] .play { top: 50%; left: auto; right: calc(348 * var(--u)); margin: 0; transform: translateY(-50%); width: calc(84 * var(--u)); height: calc(84 * var(--u)); }
  body[data-channel="video"] .play img { width: calc(39 * var(--u)); height: calc(39 * var(--u)); margin-left: calc(6 * var(--u)); }
  body[data-channel="video"] .slogan { top: calc(138 * var(--u)); left: calc(84 * var(--u)); right: auto; text-align: left; }
  body[data-channel="video"] .slogan h1 { align-items: flex-start; }
  body[data-channel="video"] .tags { justify-content: flex-start; }
  body[data-channel="video"] .reel { display: none; }
}

@media (min-width: 1024px) {
  :root { --u: min(calc(100vw / 1280), calc(100svh / 720)); }
  .bg { inset: -10%; transform: rotate(-6deg); background-size: calc(800% / 9) auto; }
  .bg-wash { background:
    linear-gradient(90deg, rgba(6,2,12,.92) 0, rgba(6,2,12,.5) 38%, transparent 62%),
    linear-gradient(180deg, transparent 55%, rgba(6,2,12,.9) 100%),
    linear-gradient(115deg, color-mix(in srgb, var(--g2) 60%, transparent) 0, transparent 55%),
    rgba(9,3,16,.35); }
  .hero { top: 50%; right: calc(40 * var(--u)); height: calc(680 * var(--u)); transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(to left, #000 60%, transparent 98%), linear-gradient(to bottom, #000 72%, transparent 99%); mask-image: linear-gradient(to left, #000 60%, transparent 98%), linear-gradient(to bottom, #000 72%, transparent 99%); }
  .topbar { top: calc(30 * var(--u)); left: calc(54 * var(--u)); right: calc(54 * var(--u)); }
  .logo img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
  .logo i { font-size: calc(18 * var(--u)); }
  .slogan { left: calc(84 * var(--u)); right: auto; top: calc(138 * var(--u)); max-width: calc(600 * var(--u)); }
  .tag { font-size: calc(15 * var(--u)); padding: calc(6 * var(--u)) calc(16 * var(--u)); }
  .l1 { font-size: calc(52 * var(--u)); }
  .l2 { font-size: calc(84 * var(--u)); }
  .tags { margin-top: calc(22 * var(--u)); gap: calc(11 * var(--u)); }
  .tags li { font-size: calc(15 * var(--u)); padding: calc(6 * var(--u)) calc(15 * var(--u)); }
  .dl { left: calc(84 * var(--u)); right: auto; bottom: auto; top: calc(430 * var(--u)); transform: none; align-items: flex-start; width: auto; }
  .sub { font-size: calc(15 * var(--u)); margin-bottom: calc(13 * var(--u)); }
  .badge { width: calc(290 * var(--u)); height: calc(70 * var(--u)); border-radius: calc(35 * var(--u)); }
  .badge-icon { left: calc(34 * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin-top: calc(-15 * var(--u)); }
  .badge-text { left: calc(78 * var(--u)); }
  .badge-text small { font-size: calc(12 * var(--u)); }
  .badge-text b { font-size: calc(19 * var(--u)); }
  .badge-qr { display: flex; height: auto; margin-top: calc(13 * var(--u)); padding: calc(12 * var(--u)); background: rgba(255,255,255,.95); align-items: center; gap: calc(13 * var(--u)); border-radius: calc(14 * var(--u)); }
  .badge-qr .qr { width: calc(80 * var(--u)); height: calc(80 * var(--u)); border-radius: calc(6 * var(--u)); }
  .badge-qr .badge-text { position: static; transform: none; }
  .badge-qr .badge-text small { color: #444; font-size: calc(13 * var(--u)); }
  .badge-qr .badge-text b { color: var(--deep); font-size: calc(20 * var(--u)); }
  .web-link { align-self: flex-start; padding: calc(10 * var(--u)) 0 0 calc(4 * var(--u)); }
  .trust { margin-top: calc(14 * var(--u)); gap: calc(20 * var(--u)); }
  .trust span { font-size: calc(12.5 * var(--u)); }
}

.deck { display: none; }
.deck span { position: absolute; top: 0; left: 50%; border-radius: calc(12 * var(--u)); overflow: hidden; border: calc(2 * var(--u)) solid rgba(255,255,255,.2); box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(0,0,0,.6); }
.deck span img { width: 100%; height: 100%; object-fit: cover; }

body[data-channel="drama"] .bg { background-image: url(../img/theme/drama/bg.jpg); filter: saturate(.85) brightness(.58); }
body[data-channel="drama"] .deck { display: block; position: absolute; z-index: 2; left: 50%; top: calc(70 * var(--u)); width: calc(300 * var(--u)); height: calc(250 * var(--u)); transform: translateX(-50%); }
body[data-channel="drama"] .deck::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 150%; height: 135%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--accent) 12%, transparent) 55%, transparent 74%); }
body[data-channel="drama"] .deck span:nth-child(1) { width: calc(136 * var(--u)); height: calc(181 * var(--u)); margin-left: calc(-150 * var(--u)); top: calc(30 * var(--u)); transform: rotate(-11deg); z-index: 1; filter: brightness(.6); }
body[data-channel="drama"] .deck span:nth-child(2) { width: calc(170 * var(--u)); height: calc(226 * var(--u)); margin-left: calc(-85 * var(--u)); z-index: 3; }
body[data-channel="drama"] .deck span:nth-child(3) { width: calc(136 * var(--u)); height: calc(181 * var(--u)); margin-left: calc(14 * var(--u)); top: calc(30 * var(--u)); transform: rotate(11deg); z-index: 1; filter: brightness(.6); }
body[data-channel="drama"] .play { display: grid; place-items: center; position: absolute; z-index: 4; top: calc(183 * var(--u)); left: 50%; width: calc(60 * var(--u)); height: calc(60 * var(--u)); margin: calc(-30 * var(--u)); border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--g2)); box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(0,0,0,.6), 0 0 0 calc(6 * var(--u)) color-mix(in srgb, var(--accent) 24%, transparent), inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.4); }
body[data-channel="drama"] .play img { width: calc(27 * var(--u)); height: calc(27 * var(--u)); margin-left: calc(4.5 * var(--u)); }
body[data-channel="drama"] .slogan { top: calc(346 * var(--u)); left: calc(26 * var(--u)); right: calc(26 * var(--u)); text-align: center; }
body[data-channel="drama"] .slogan h1 { align-items: center; }
body[data-channel="drama"] .l2::after { left: 50%; transform: translateX(-50%); }
body[data-channel="drama"] .tags { justify-content: center; }

@media (min-width: 1024px) {
  body[data-channel="drama"] .bg { background-image: url(../img/theme/drama/bg-wide.jpg); }
  body[data-channel="drama"] .deck { left: auto; right: calc(150 * var(--u)); top: 50%; transform: translateY(-50%); width: calc(420 * var(--u)); height: calc(360 * var(--u)); }
  body[data-channel="drama"] .deck span:nth-child(2) { width: calc(250 * var(--u)); height: calc(333 * var(--u)); margin-left: calc(-125 * var(--u)); top: calc(14 * var(--u)); }
  body[data-channel="drama"] .deck span:nth-child(1) { width: calc(190 * var(--u)); height: calc(253 * var(--u)); margin-left: calc(-222 * var(--u)); top: calc(54 * var(--u)); }
  body[data-channel="drama"] .deck span:nth-child(3) { width: calc(190 * var(--u)); height: calc(253 * var(--u)); margin-left: calc(32 * var(--u)); top: calc(54 * var(--u)); }
  body[data-channel="drama"] .play { top: 50%; left: auto; right: calc(322 * var(--u)); margin: 0; transform: translateY(-50%); width: calc(78 * var(--u)); height: calc(78 * var(--u)); }
  body[data-channel="drama"] .play img { width: calc(36.5 * var(--u)); height: calc(36.5 * var(--u)); margin-left: calc(6.5 * var(--u)); }
  body[data-channel="drama"] .slogan { top: calc(138 * var(--u)); left: calc(84 * var(--u)); right: auto; text-align: left; }
  body[data-channel="drama"] .slogan h1 { align-items: flex-start; }
  body[data-channel="drama"] .l2::after { left: 0; transform: none; }
  body[data-channel="drama"] .tags { justify-content: flex-start; }
}

body[data-channel="comic"] .bg { background-image: url(../img/theme/comic/bg.jpg); filter: saturate(.95) brightness(.58); }
body[data-channel="comic"] .slogan::before { content: ""; position: absolute; z-index: -1; left: calc(-30 * var(--u)); right: calc(-30 * var(--u)); top: calc(-40 * var(--u)); bottom: calc(-30 * var(--u)); background: radial-gradient(closest-side, rgba(10,3,14,.74), rgba(10,3,14,.3) 60%, transparent 82%); }
body[data-channel="comic"] .slogan { top: calc(300 * var(--u)); left: calc(26 * var(--u)); right: calc(26 * var(--u)); text-align: center; }
body[data-channel="comic"] .slogan h1 { align-items: center; }
body[data-channel="comic"] .l2::after { left: 50%; transform: translateX(-50%); }
body[data-channel="comic"] .tags { justify-content: center; }

@media (min-width: 1024px) {
  body[data-channel="comic"] .bg { background-image: url(../img/theme/comic/bg-wide.jpg); }
  body[data-channel="comic"] .slogan { top: calc(138 * var(--u)); left: calc(84 * var(--u)); right: auto; text-align: left; }
  body[data-channel="comic"] .slogan h1 { align-items: flex-start; }
  body[data-channel="comic"] .l2::after { left: 0; transform: none; }
  body[data-channel="comic"] .tags { justify-content: flex-start; }
}

.sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.6); }
.sheet[hidden] { display: none; }
.sheet-panel { width: 100%; max-width: 480px; background: #fff; color: #222; border-radius: 18px 18px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { .sheet { align-items: center; } .sheet-panel { border-radius: 18px; } }
.sheet-panel h2 { margin: 0 0 12px; font: 900 19px/1.3 var(--serif); color: var(--accent); }
.sheet-panel b { color: var(--accent); }
.sheet-panel .steps { margin: 0; padding-left: 20px; line-height: 1.9; font-size: 15px; }
.sheet-panel .note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: #888; }
.link-box { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: #f2f2f4; font-size: 13px; word-break: break-all; color: #555; }
.sheet-copy { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 4px; padding: 9px 18px; border: 0; border-radius: 22px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; }
.sheet-copy img { width: 16px; height: 16px; }
.sheet-close { display: block; width: 100%; margin-top: 16px; padding: 13px; border: 0; border-radius: 12px; background: #f0f0f2; color: #333; font-size: 15px; font-weight: 700; }

.toast { position: fixed; z-index: 30; left: 50%; bottom: 22%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; max-width: 80vw; padding: 11px 18px; border-radius: 24px; background: rgba(0,0,0,.84); color: #fff; font-size: 14px; }
.toast[hidden] { display: none; }
.toast img { width: 18px; height: 18px; }