@charset "utf-8";

/* ============================================================================
   多语言 —— 移动端
   1) 语言切换：导航栏地球图标（右侧三个图标「音乐 · 语言 · 分享」的中间），点开列出站点支持的语言
   2) 海外语言版式：<html lang> 不是 zh 时生效。英文设计稿只画了 PC（Figma 155:345），
      移动端英文切图按「中文 PC → 手机」同一比例由英文 PC 切图缩出，落点对齐中文手机版同一位置的中线；
      社媒 / 底部信息与 PC 同口径整组替换。所有尺寸写成 calc(设计px * var(--u))。
   ========================================================================== */

/* 切语言换图期间：新语言的图没就绪前先藏起来，免得旧图被塞进新尺寸的框里变形（见业务 JS 的 guardLocaleSwap） */
img.is-locale-swapping { visibility: hidden; }

/* ── 语言切换 ───────────────────────────────────────────────────────────── */
/* 导航右侧三个图标按「音乐 · 语言 · 分享」排。落位按**图形可见范围**的中心对齐，不按各自切图的外框：
   地球切图四周各有 1px 透明边，照外框摆会比音乐 / 分享高 1、左 0.5。
   音乐可见中心 (544, 44)、分享 (687, 44)，所以地球可见中心取 (615.5, 44) —— 纵向与两侧齐平、横向正在两者正中。 */
.lang-switch { left: calc(595.5 * var(--u)); top: calc(24 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); z-index: 3; }
.lang-switch__btn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.lang-switch__btn img { width: 100%; height: 100%; }
.lang-switch__btn:active img { transform: scale(.9); }
.lang-switch__menu {
  position: absolute;
  right: calc(-24 * var(--u)); top: calc(56 * var(--u));
  min-width: calc(210 * var(--u));
  margin: 0;
  padding: calc(10 * var(--u)) 0;
  list-style: none;
  background: #fffaf3;
  border-radius: calc(18 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(4, 0, 0, .18);
}
.lang-switch__item {
  padding: calc(14 * var(--u)) calc(28 * var(--u));
  font-size: calc(26 * var(--u));
  line-height: calc(36 * var(--u));
  color: #774940;
  white-space: nowrap;
}
.lang-switch__item:active { background: #fbeee4; }
.lang-switch__item.is-active { color: #e14e7c; }

/* ── 导航 logo：英文字标比中文的更方 ────────────────────────────────────── */
html:not([lang|="zh"]) .m-nav__logo { top: calc(6 * var(--u)); width: calc(122 * var(--u)); height: calc(70 * var(--u)); }

/* ── 分享面板：海外版整组换成 6 个海外平台（面板同一张底图，间距放宽） ───── */
/* 社媒中英文统一用这 6 个海外平台：国内渠道与它们的二维码卡一起收起 */
.m-share__item:not(.is-global),
.m-qr { display: none; }
.m-share__item.is-global { display: block; }
/* 6 个图标在面板里上下留白对称（面板 95~671） */
/* 自上而下的顺序与全站一致：YouTube → Discord → TikTok → X → Instagram → Facebook
   尺寸按新切图原大（YouTube 是扁的 45×33），6 个图标中心在同一条竖线（690.5）上、上下间距统一 90 */
.m-share__item--youtube   { left: calc(668 * var(--u));   top: calc(135.5 * var(--u)); width: calc(45 * var(--u)); height: calc(33 * var(--u)); }
.m-share__item--discord   { left: calc(671.5 * var(--u)); top: calc(223 * var(--u));   width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
.m-share__item--tiktok    { left: calc(671 * var(--u));   top: calc(312.5 * var(--u)); width: calc(39 * var(--u)); height: calc(39 * var(--u)); }
.m-share__item--twitter   { left: calc(671 * var(--u));   top: calc(402.5 * var(--u)); width: calc(39 * var(--u)); height: calc(39 * var(--u)); }
.m-share__item--instagram { left: calc(671 * var(--u));   top: calc(493 * var(--u));   width: calc(39 * var(--u)); height: calc(38 * var(--u)); }
.m-share__item--facebook  { left: calc(671.5 * var(--u)); top: calc(583 * var(--u));   width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
/* 两态：平时粉色，手指按下时换成深粉那张（原有的按下缩小照旧） */
.m-share__item.is-global .m-share__on { position: absolute; left: 0; top: 0; opacity: 0; }
.m-share__item.is-global:active .m-share__on { opacity: 1; }
.m-share__item.is-global:active img:not(.m-share__on) { opacity: 0; }

/* ── 首屏：英文标语一整条（按钮落点与中文版同一处，不再单独覆盖） ─────────── */
/* 英文标语放大到距屏幕左右各 20（710 宽），竖向中心保持在原来的 266.5 */
html:not([lang|="zh"]) .m-hero__slogan { left: calc(20 * var(--u)); top: calc(186 * var(--u)); width: calc(710 * var(--u)); height: calc(161 * var(--u)); }
/* 英文版预约按钮按业务方要求与中文版同位同大小（沿用 home_mobile.css 的 129 / 1145.5 / 492×128）：
   英文切图本身只有 385×101，会被放大约 28%，两者宽高比几乎一致（3.81 : 3.84），不会变形。 */

/* ── 成功态：说明文案换英文（会换行），国内渠道整组换成 6 个海外平台；
      容器收窄到只能容下 3 个，图标自然排成两行三列 ─────────────────── */
html:not([lang|="zh"]) .rsv__card--done .rsv__title { width: calc(480 * var(--u)); height: calc(47 * var(--u)); }
html:not([lang|="zh"]) .rsv__note-1 { white-space: normal; line-height: 1.45; }
/* 英文提示比中文长得多，两侧虚线会压到文字两端，与 PC 英文版一样不显示虚线 */
html:not([lang|="zh"]) .rsv__dash { display: none; }
.rsv__social:not(.is-global) { display: none; }
.rsv__social.is-global { display: block; }
/* 面板贴着导航栏底边（导航高 91）后，这 6 个图标跟着整体上移 4，保持它们在面板里的原有位置 */
.rsv__socials { width: calc(300 * var(--u)); }
.rsv__social.is-global { width: calc(80 * var(--u)); height: calc(80 * var(--u)); }
/* 手机版弹窗用自己的一套切图（约 61 见方，YouTube 71×52 是扁的）：统一放大到原来 80 的视觉大小，
   格子仍是 80×80（排版两行三列不变），图在格子里居中、按各自比例显示，不再把 YouTube 压成正方形 */
.rsv__card .rsv__social.is-global > img { position: absolute; inset: 0; margin: auto; }
.rsv__card .rsv__social--youtube > img { width: calc(93.1 * var(--u)); height: calc(68.2 * var(--u)); }
.rsv__card .rsv__social--discord > img { width: calc(78.7 * var(--u)); height: calc(80 * var(--u)); }
/* 两态：平时浅青，手指按下时换成深青那张（原有的按下缩小照旧） */
.rsv__social.is-global .rsv__social-on { opacity: 0; }
.rsv__social.is-global:active .rsv__social-on { opacity: 1; }
.rsv__social.is-global:active img:not(.rsv__social-on) { opacity: 0; }

/* ── 预约弹窗表单态：英文标题是一行扁长切图，按设计 402×50 落位（Figma 164:501） ── */
html:not([lang|="zh"]) .rsv__card--form .rsv__title { left: calc(189 * var(--u)); top: calc(89 * var(--u)); width: calc(402 * var(--u)); height: calc(50 * var(--u)); }

/* ── 带字切图在英文版的尺寸 / 落点（与中文手机版同一中线） ─────────────── */
html:not([lang|="zh"]) .m-s1__title { left: calc(86.5 * var(--u)); top: calc(111.5 * var(--u)); width: calc(596 * var(--u)); height: calc(107 * var(--u)); }
html:not([lang|="zh"]) .m-s2__title { left: calc(30 * var(--u));   top: calc(111 * var(--u));   width: calc(690 * var(--u)); height: calc(144 * var(--u)); }
html:not([lang|="zh"]) .m-s3__title { left: calc(81.5 * var(--u)); top: calc(145 * var(--u));   width: calc(602 * var(--u)); height: calc(113 * var(--u)); }
/* 第 5 屏英文标题用手机专用切图 626×115：横向在屏幕居中，底边与原位置对齐（291），蓝色底条照样压在视频相框上沿 */
html:not([lang|="zh"]) .m-s4__title { left: calc(62 * var(--u)); top: calc(176 * var(--u)); width: calc(626 * var(--u)); height: calc(115 * var(--u)); }

/* ── 第 5 屏分类栏：英文「Announcement」更长，后两项右移，选中胶囊不压到「News」 ── */
html:not([lang|="zh"]) .m-s4__tab--news   { left: calc(290 * var(--u)); }
html:not([lang|="zh"]) .m-s4__tab--notice { left: calc(446 * var(--u)); }

/* ── 整页高度：海外版页脚只有字标 + 一行链接，页脚收到 420（内容到 300，底部留 120） ── */

/* ── 底部信息：海外版只有发行方字标 + 条款链接一行 ─────────────────────── */
/* 页脚中英文共用这一版（发行方字标 + 条款链接）；国内版那组信息整组不再展示 */
.m-s5__global { display: block; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.m-s5__info { display: none; }
.m-s5__global-logo { position: absolute; left: calc(247 * var(--u)); top: calc(129 * var(--u)); width: calc(256 * var(--u)); height: calc(100 * var(--u)); }
.m-s5__global-links {
  position: absolute;
  left: calc(375 * var(--u)); top: calc(262 * var(--u));
  transform: translateX(-50%);
  font-size: calc(22 * var(--u));
  line-height: calc(38 * var(--u));
  color: #bebebe;
  white-space: pre;
  pointer-events: auto;
}
.m-s5__global-links a:active { opacity: .7; }
/* 与中文版底部信息同样整块从正下方升起（同一段位移与缓动） */
.m-anim .m-s5__global:not(.is-in) { transform: translateY(calc(72 * var(--u))); }
.m-anim .m-s5__global { transition: opacity .56s var(--ease-out), transform .72s var(--ease-out); }

/* ── 资讯弹框（手机居中弹窗，Figma 171:540）：英文分类按设计稿位置排，Announcement 选中时换长底框 ── */
/* 三个英文分类都按设计稿（Figma 171:540）落位：文字中心 Latest 162.5 / News 286.5 / Announcement 447（面板内坐标）。
   原先只挪了 Announcement，Latest、News 还停在中文版的位置（偏右 39），News 与 Announcement 首尾贴在一起、
   选中 Announcement 时长底框还盖住 News 的后半截。选中底框（124 宽）跟着分类中心走：Latest 100.5、News 224.5 */
html:not([lang|="zh"]) .nsheet__tab--latest { left: calc(162.5 * var(--u)); }
html:not([lang|="zh"]) .nsheet__tab--news   { left: calc(286.5 * var(--u)); }
html:not([lang|="zh"]) .nsheet__tab--notice { left: calc(447 * var(--u)); }
html:not([lang|="zh"]) .nsheet__pill { left: calc(100.5 * var(--u)); }
html:not([lang|="zh"]) .nsheet__panel[data-active="1"] .nsheet__pill { left: calc(224.5 * var(--u)); }
html:not([lang|="zh"]) .nsheet__panel[data-active="2"] .nsheet__pill { opacity: 0; }
html:not([lang|="zh"]) .nsheet__panel[data-active="2"] .nsheet__pill--long { opacity: 1; }
/* 长底框比短的宽 79，左缘要往回收，才和英文那颗 Announcement 对齐 */
html:not([lang|="zh"]) .nsheet__panel[data-active="2"] .nsheet__pill { left: calc(345 * var(--u)); }

/* ── 预约弹窗：英文协议勾选文案带年龄声明后折三行，沿用中文的 30.456 行高会压到「立即预约」按钮（顶在 444），
      英文单独收到 20 行高：三行 60，与中文两行（61）基本同高，居中后上下各留约 16；勾选框按 20 的行高在第一行里居中 ── */
html:not([lang|="zh"]) .rsv__card--form .rsv__agree { line-height: calc(20 * var(--u)); }
html:not([lang|="zh"]) .rsv__card--form .rsv__check { margin-top: calc(0.5 * var(--u)); }