:root {
  --cyan: #22D3EE;
  --purple: #A78BFA;
  --white: #FFFFFF;
  --body: #C7CEE8;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  background: #05070F;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

/* ================= 固定顶部菜单 ================= */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 64px; display: flex; align-items: center; justify-content: center;
  background: rgba(5,7,15,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.navbar .nav-inner {
  width: 1200px; display: flex; align-items: center; gap: 8px;
}
.navbar .nav-logo {
  margin-right: auto; display: flex; align-items: center;
  text-decoration: none; cursor: pointer;
}
/* logo 图片：圆角约为边长的 22%（接近苹果 App 图标曲率） */
.navbar .nav-logo img {
  width: 42px; height: 42px; border-radius: 22%; display: block;
}
.navbar a.nav-link {
  padding: 8px 14px; font-size: 13px; color: var(--body);
  text-decoration: none; border-radius: 99px; transition: all .25s;
  white-space: nowrap; cursor: pointer;
}
.navbar a.nav-link:hover { color: var(--white); background: rgba(255,255,255,.07); }
/* 当前板块选中态（与整屏翻页 / 滚动位置联动，由 JS 切换 .on） */
.navbar a.nav-link.on {
  color: var(--white);
  background: linear-gradient(90deg, rgba(34,211,238,.18), rgba(167,139,250,.18));
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.35);
}

/* 板块锚点偏移：避免被固定菜单遮挡 */
.section { scroll-margin-top: 64px; }

/* ================= fullPage 整屏翻页（桌面端） ================= */
@media (min-width: 821px) {
  html, body { height: 100%; overflow: hidden; }
  .pager { transition: transform .9s cubic-bezier(.77, 0, .18, 1); will-change: transform; }
  .pager > .banner, .pager > .section { height: 100vh; min-height: 0; }
}
/* 矮屏适配：等比缩小手机模型与大标题，避免裁切 */
@media (min-width: 821px) and (max-height: 840px) {
  .pager .phone-wrap { transform: translateY(-50%) scale(.76); }
  .pager .title { font-size: 60px; line-height: 80px; }
  .pager .subtitle { top: calc(24% + 96px); }
  .pager .desc { top: calc(24% + 142px); }
  .pager .chips { top: calc(24% + 280px); }
  .pager .live-tech { top: calc(24% + 226px); }
  .pager .lt-item { padding: 7px 12px; }
  .pager .lt-num { font-size: 16px; }
}

/* 右侧圆点导航 */
.pager-dots {
  position: fixed; right: 24px; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 14px;
}
.pager-dots .pd {
  width: 8px; height: 8px; border-radius: 99px;
  background: rgba(255,255,255,.28); cursor: pointer; position: relative;
  transition: all .3s;
}
.pager-dots .pd:hover { background: rgba(255,255,255,.65); }
.pager-dots .pd.on { height: 24px; background: linear-gradient(180deg, #22D3EE, #A78BFA); }
.pager-dots .pd .pd-tip {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--white); white-space: nowrap;
  background: rgba(10,14,36,.88); padding: 5px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.pager-dots .pd:hover .pd-tip { opacity: 1; }
@media (max-width: 820px) { .pager-dots { display: none; } }

/* ================= Banner · App 下载首屏 ================= */
.banner {
  position: relative; width: 100%; height: 100vh; min-height: 680px;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse 100% 80% at 50% 120%, #1A1440 0%, #0A0E24 60%, #05070F 100%);
}
.banner .b-glow {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%,-50%);
  width: 900px; height: 700px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(124,58,237,.22), rgba(34,211,238,.08) 55%, transparent);
}
.banner .b-title {
  position: relative; font-size: 72px; font-weight: 800; letter-spacing: 6px;
  background: linear-gradient(90deg, #22D3EE, #A78BFA 60%, #F472B6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.banner .b-sub {
  position: relative; margin-top: 18px; font-size: 20px; color: var(--white); font-weight: 600;
  letter-spacing: 1px;
}
.banner .b-desc {
  position: relative; margin-top: 12px; font-size: 14px; color: var(--body);
}
/* Android 扫码下载弹窗 */
.qr-mask {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(3,5,12,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.qr-mask.show { display: flex; }
.qr-box {
  background: #fff; border-radius: 20px; padding: 28px 32px 24px;
  text-align: center; color: #1a2332;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  animation: qrIn .3s ease;
}
@keyframes qrIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.qr-box img { width: 200px; height: 200px; margin: 0 auto; display: block; }
.qr-box .qr-title { margin-top: 16px; font-size: 15px; font-weight: 700; }
.qr-box .qr-tip { margin-top: 6px; font-size: 12px; color: #5b6b7f; }
/* 微信浏览器提示弹窗的说明文字与复制按钮（复用 qr-box 白卡） */
.qr-box .wx-tip { margin-top: 12px; font-size: 14px; line-height: 1.9; color: #1a2332; }
.qr-box .wx-tip b { color: #e8720f; }
.qr-box .wx-tip-sub { margin-top: 8px; font-size: 12px; color: #5b6b7f; }
.qr-box .wx-copy { width: 200px; margin: 16px auto 0; height: 44px; }

/* 下载区标题 */
.banner .b-dl-title {
  position: relative; margin-top: 40px;
  font-size: 26px; font-weight: 800; letter-spacing: 3px; color: var(--white);
}
.banner .b-dl-sub {
  position: relative; margin-top: 8px;
  font-size: 13px; color: rgba(199,206,232,.6); letter-spacing: 1px;
}

/* 平台卡片（深色透明玻璃卡，融入暗色背景；按钮保留品牌橙） */
.banner .download-grid {
  position: relative; margin-top: 26px;
  width: min(1120px, calc(100% - 48px));
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.dl-card {
  position: relative; border: 1px solid rgba(255,255,255,.14); border-radius: 18px;
  padding: 30px 20px 24px; text-align: center;
  background: rgba(255,255,255,.05); color: var(--white);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
}
.dl-card:hover {
  transform: translateY(-4px); background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.3); box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.dl-card-active { border-color: #ff8a2c; box-shadow: 0 14px 36px rgba(255,138,44,.18); }
.dl-badge {
  display: none; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: #ff8a2c; color: #fff; font-size: 12px; line-height: 1;
  padding: 5px 14px; border-radius: 999px; letter-spacing: 1px;
}
.dl-card-active .dl-badge { display: block; }
/* 图标：无底色，CSS 滤镜统一刷成白色（brightness(0) 压黑 → invert 反白） */
.dl-icon {
  width: 44px; height: 44px; margin: 0 auto; object-fit: contain; display: block;
  filter: brightness(0) invert(1);
}
.dl-card h3 { margin-top: 14px; font-size: 19px; color: #fff; }
.dl-ver { margin-top: 6px; font-size: 12.5px; color: rgba(199,206,232,.65); min-height: 18px; }
.dl-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 100%; height: 52px; margin-top: 16px; padding: 0 10px;
  border: none; border-radius: 12px; background: #ff8a2c; color: #fff;
  font-size: 14.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background .2s, color .2s; position: relative; text-decoration: none;
}
.dl-btn:hover { background: #e8720f; }
.dl-btn + .dl-btn { margin-top: 10px; }
.dl-btn-ghost { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.dl-btn-ghost:hover { background: #ff8a2c; color: #fff; }
.dl-btn-sub { font-size: 11.5px; font-weight: 400; opacity: .75; }
.dl-chip-badge {
  display: none; position: absolute; top: -8px; right: -6px;
  background: #f04438; color: #fff; font-size: 11px; line-height: 1;
  padding: 4px 9px; border-radius: 999px; border: 2px solid rgba(10,14,36,.9);
}
.dl-chip-badge.show { display: block; }

/* 手机端点电脑版下载的提示气泡（JS 动态创建，仅移动端出现），屏幕正中 */
.dl-toast {
  position: fixed; left: 50%; top: 50%; z-index: 210;
  transform: translate(-50%, -50%) scale(.92);
  max-width: 84vw; padding: 16px 26px; border-radius: 14px;
  background: rgba(15,23,52,.95); border: 1px solid rgba(34,211,238,.45);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  color: var(--white); font-size: 14px; line-height: 1.7; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.dl-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 矮屏适配：压缩首屏下载区，避免 100vh 裁切 */
@media (min-width: 821px) and (max-height: 900px) {
  .banner .b-title { font-size: 48px; letter-spacing: 4px; }
  .banner .b-sub { margin-top: 10px; font-size: 16px; }
  .banner .b-desc { margin-top: 8px; font-size: 13px; }
  .banner .b-dl-title { margin-top: 24px; font-size: 20px; }
  .banner .download-grid { margin-top: 16px; }
  .dl-card { padding: 20px 16px 16px; }
  .dl-icon { width: 34px; height: 34px; }
  .dl-card h3 { margin-top: 8px; font-size: 16px; }
  .dl-ver { font-size: 12px; }
  .dl-btn { height: 42px; margin-top: 10px; font-size: 13.5px; }
  .dl-btn + .dl-btn { margin-top: 8px; }
  .banner .b-hint { display: none; }
}
.banner .b-hint {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(199,206,232,.5); letter-spacing: 2px;
}
.banner .b-hint::after {
  content: ''; width: 1px; height: 34px;
  background: linear-gradient(180deg, rgba(199,206,232,.5), transparent);
  animation: hintDrop 1.8s ease-in-out infinite;
}
@keyframes hintDrop {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ================= 通栏板块：整屏（100vh），内容垂直居中 ================= */
.section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: linear-gradient(125deg, #0A0E24 0%, #131B40 100%);
}

/* 背景装饰（通栏） */
.glow-tl, .glow-br {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.glow-tl {
  width: 520px; height: 420px; left: -160px; top: -180px;
  background: radial-gradient(closest-side, rgba(124,58,237,.25), transparent);
}
.glow-br {
  width: 460px; height: 360px; right: -160px; bottom: -142px;
  background: radial-gradient(closest-side, rgba(34,211,238,.2), transparent);
}
/* 全幅声波条 */
.wave {
  position: absolute; left: 0; right: 0; bottom: 60px;
  height: 80px; display: flex; align-items: center; justify-content: center;
  gap: 11px; pointer-events: none;
}
.wave span {
  width: 7px; border-radius: 99px; background: var(--cyan);
  animation: wavePulse 1.6s ease-in-out infinite;
}
@keyframes wavePulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.65); }
}
/* 内容区基准线 */
.gridline {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,.04); pointer-events: none;
}

/* ================= 内容区：1200 居中 ================= */
.inner {
  position: relative;
  width: 1200px; height: 100%;
  margin: 0 auto;
}

/* 左侧文案 */
.title {
  position: absolute; left: 72px; top: 24%;
  font-size: 84px; font-weight: 800; letter-spacing: 4px; line-height: 110px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.subtitle {
  position: absolute; left: 80px; top: calc(24% + 130px);
  font-size: 22px; font-weight: 700; color: var(--white);
}
.desc {
  position: absolute; left: 80px; top: calc(24% + 182px); width: 460px;
  font-size: 14px; line-height: 1.9; color: var(--body);
}

/* ================= 功能按钮（与截图联动） ================= */
.chips { position: absolute; left: 80px; top: calc(24% + 330px); display: flex; gap: 16px; }
.chip {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 18px;
  font-size: 13px; color: var(--white);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 99px;
  cursor: pointer; user-select: none;
  transition: all .3s ease;
}
.chip svg { width: 14px; height: 14px; flex: none; transition: inherit; }
/* hover：浮起 + 泛光 */
.chip:hover {
  transform: translateY(-2px);
  background: rgba(34,211,238,.12);
  border-color: rgba(34,211,238,.6);
  box-shadow: 0 6px 20px rgba(34,211,238,.25);
}
/* active：当前展示屏对应的按钮（霓虹高亮） */
.chip.active {
  background: rgba(34,211,238,.16);
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(34,211,238,.35), inset 0 0 10px rgba(34,211,238,.1);
}
.chip:nth-child(2):hover {
  background: rgba(167,139,250,.12);
  border-color: rgba(167,139,250,.6);
  box-shadow: 0 6px 20px rgba(167,139,250,.25);
}
.chip:nth-child(2).active {
  background: rgba(167,139,250,.16);
  border-color: var(--purple);
  box-shadow: 0 0 18px rgba(167,139,250,.35), inset 0 0 10px rgba(167,139,250,.1);
}

/* ================= 右侧手机样机 ================= */
.phone-wrap { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); width: 400px; height: 720px; }
.phone-glow {
  position: absolute; left: -38px; top: 70px; width: 460px; height: 580px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(34,211,238,.18), rgba(124,58,237,.1) 60%, transparent);
}
.phone {
  position: absolute; left: 34px; top: 30px; width: 304px; height: 660px;
  border-radius: 54px;
  background: linear-gradient(115deg, #4A5160 0%, #22262F 50%, #3A4049 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.screen {
  position: absolute; left: 9px; top: 9px; width: 286px; height: 642px;
  border-radius: 45px; overflow: hidden; background: #000;
}
/* —— 轮播截图：替换 img/ 下的同名文件即可 —— */
.slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity .6s ease;
}
.slide.active { opacity: 1; }

.island {
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  width: 88px; height: 22px; border-radius: 99px; background: #0A0A0A; z-index: 3;
}
.glare {
  position: absolute; left: 9px; top: 9px; width: 286px; height: 642px;
  border-radius: 45px; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 35%, transparent 60%);
}
.btn {
  position: absolute; width: 4px; border-radius: 99px; background: #3A4049;
}
.btn-vol-up   { left: -4px;  top: 150px; height: 48px; }
.btn-vol-down { left: -4px;  top: 212px; height: 48px; }
.btn-power    { right: -4px; top: 180px; height: 70px; }

/* ================= HUD 浮动标签（随截图联动显示） ================= */
.hud {
  position: absolute; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px;
  font-size: 13px; color: var(--white); white-space: nowrap;
  background: rgba(15,23,52,.9);
  border-radius: 13px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.hud.show { opacity: 1; transform: translateY(0); }
.hud svg { width: 16px; height: 16px; flex: none; }
.hud1 {
  left: -66px; top: 108px;
  border: 1px solid rgba(34,211,238,.5);
  box-shadow: 0 4px 16px rgba(34,211,238,.2);
}
.hud1 .hl { color: var(--cyan); font-weight: 700; }
.hud2 {
  right: -26px; bottom: 30px;
  border: 1px solid rgba(167,139,250,.5);
  box-shadow: 0 4px 16px rgba(167,139,250,.2);
}
.hud2 .hl { color: var(--purple); font-weight: 700; }

/* ================= H5 手机端（竖排布局） ================= */
@media (max-width: 820px) {
  .section { height: auto; min-height: 100vh; overflow: hidden; padding: 56px 20px 90px; scroll-margin-top: 56px; }
  /* banner 内容远超一屏，必须放开固定 100vh 高度，否则下载卡片被 overflow 裁掉 */
  .banner { height: auto; min-height: 100vh; padding: 80px 20px 100px; }
  .banner .b-hint { display: none; }
  .banner .b-title { font-size: min(44px, 11.5vw); letter-spacing: 2px; }
  .banner .b-sub { font-size: 16px; }
  .banner .b-dl-title { margin-top: 40px; font-size: 22px; }
  .banner .download-grid { grid-template-columns: 1fr; max-width: 420px; margin-top: 22px; }
  .navbar { height: 56px; }
  .navbar .nav-inner { width: 100%; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
  .navbar .nav-inner::-webkit-scrollbar { display: none; }
  /* logo 钉在最左、不跟着横向滚动，链接区可左右滑 */
  .navbar .nav-logo {
    flex: none; position: sticky; left: 0; z-index: 2; margin-right: 2px;
    padding-right: 14px;
    background: linear-gradient(90deg, rgba(5,7,15,.98) 72%, rgba(5,7,15,0));
  }
  .navbar a.nav-link { padding: 7px 10px; font-size: 12px; }
  /* 直播：横屏手机缩放适配 */
  .phone-wrap--live, .section--live .phone-wrap { width: 100%; height: 360px; }
  .section--live .phone-land { transform: translate(-50%,-50%) scale(.62); }
  .chalk { display: none; }
  .inner { width: 100%; height: auto; }

  /* 文案全部改为静态流式排列，居中
     .live-tech 用 .inner 前缀提高优先级：桌面端直播区块样式写在本媒体查询之后，
     同优先级后写的会赢，会把 position 抢回 absolute 导致被手机挡住 */
  .title, .subtitle, .desc, .chips, .inner .live-tech { position: static; width: 100%; }
  .title {
    font-size: clamp(44px, 13vw, 64px);
    line-height: 1.15; text-align: center; letter-spacing: 2px;
  }
  .subtitle { font-size: 17px; text-align: center; margin-top: 14px; }
  .desc {
    max-width: 520px; margin: 14px auto 0;
    font-size: 13px; text-align: center;
  }
  .chips { justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
  .inner .live-tech { justify-content: center; flex-wrap: wrap; margin-top: 18px; }

  /* 手机样机改为文档流，居中
     高度必须 ≥ .phone 的 660px，否则手机底部溢出、盖住后面的内容
     注意：transform 必须显式写 none 覆盖桌面端的 translateY(-50%)，否则手机上移盖住文案 */
  .phone-wrap {
    position: relative; right: auto; left: auto; top: auto;
    width: 340px; height: 660px; margin: 36px auto 0;
    transform: none;
  }
  .phone-glow { left: -30px; top: 40px; width: 400px; height: 500px; }
  .phone { left: 34px; top: 0; }

  /* HUD 收进手机两侧，避免溢出屏幕 */
  .hud1 { left: 0; right: auto; top: 64px; }
  .hud2 { right: 0; left: auto; bottom: 44px; }

  /* 左置手机板块（作业/单词/更多）：桌面端 left:28px 和 HUD 左右互换的规则
     写在本媒体查询之后，这里用更高优先级拉回移动端布局，否则手机偏移、HUD 溢出屏幕 */
  .inner .phone-wrap--left { left: auto; }
  .inner .phone-wrap--left .hud1 { left: auto; right: 0; }
  .inner .phone-wrap--left .hud2 { right: auto; left: 0; }
  /* 作业「老师点评」HUD 例外：保持右下角 */
  .section--homework .phone-wrap--left .hud2--homework { left: auto; right: 0; }

  /* 更多玩法：DOM 里手机在文案之前，移动端改为 标题 → tab/详情 → 手机 的顺序 */
  .inner--more { display: flex; flex-direction: column; }
  .inner--more .phone-wrap { order: 10; }

  .wave { bottom: 20px; opacity: .5; }
  .gridline { display: none; }
  /* 作业板块的红笔批注在桌面端落在空白处，移动端竖排布局会正好压在文案/手机上，隐藏 */
  .section--homework .redmark { display: none; }
  /* 移动端普通滚动 + 板块边界轻吸附（proximity：内容超一屏时不强制卡住） */
  html { scroll-snap-type: y proximity; }
  .pager > .banner, .pager > .section { scroll-snap-align: start; }
}
@media (max-width: 380px) {
  .hud { font-size: 12px; height: 38px; padding: 0 12px; }
  /* 窄屏：手机整体等比缩小，避免左右被裁（scale 不改布局高度，底部留白可接受） */
  .phone-wrap { transform: scale(.88); transform-origin: top center; }
}

/* ================================================================
   板块二 · 单词闯关（镜像版：手机在左，文案在右，深蓝海域主题）
   ================================================================ */
.section--word {
  background: linear-gradient(160deg, #04122E 0%, #0A2A5C 55%, #0D3670 100%);
}
.section--word .glow-tl {
  background: radial-gradient(closest-side, rgba(96,165,250,.16), transparent);
}
.section--word .glow-br {
  background: radial-gradient(closest-side, rgba(56,189,248,.14), transparent);
}

/* ═══ 深海等高线 ═══ */
.contour { position: absolute; pointer-events: none; }
.contour svg { display: block; }
.contour--tl { left: -40px; top: 40px; }
.contour--br { right: -30px; bottom: -50px; transform: rotate(180deg); }

/* ═══ 关卡路线：S 形蜿蜒的星星路径（还原 App 内的关卡地图） ═══ */
.trail {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 100%; pointer-events: none;
}
.trail .trail-line { stroke-dasharray: 4 16; stroke-linecap: round; }
.trail-star {
  fill: rgba(125,211,252,.16); stroke: rgba(125,211,252,.45); stroke-width: 1.5;
}
.trail-star--gold {
  fill: rgba(251,191,36,.25); stroke: #FBBF24;
  filter: drop-shadow(0 0 8px rgba(251,191,36,.6));
}
.trail-node {
  position: absolute; border-radius: 50%;
}
.trail-node--start {
  left: calc(50% - 620px); bottom: 84px;
  width: 10px; height: 10px; background: #FBBF24;
  box-shadow: 0 0 12px rgba(251,191,36,.7);
}
.trail-node--start::after {
  content: ''; position: absolute; inset: -6px;
  border: 1px solid rgba(251,191,36,.4); border-radius: 50%;
  animation: nodePing 2.4s ease-out infinite;
}
@keyframes nodePing {
  0%   { transform: scale(.6); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ═══ 上浮气泡 ═══ */
.bubble {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(147,197,253,.35);
  background: radial-gradient(circle at 32% 30%, rgba(191,219,254,.35), rgba(96,165,250,.06) 65%);
  animation: bubbleRise 9s ease-in infinite;
}
@keyframes bubbleRise {
  0%   { transform: translateY(0) scale(.8); opacity: 0; }
  12%  { opacity: .85; }
  85%  { opacity: .5; }
  100% { transform: translateY(-460px) scale(1.15); opacity: 0; }
}

/* ═══ 闪烁星光 ✦ ═══ */
.spark {
  position: absolute; color: #BAE6FD; pointer-events: none;
  animation: sparkFloat 4s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(125,211,252,.8);
}
@keyframes sparkFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: .9; }
  50%      { transform: translateY(-14px) rotate(45deg); opacity: .4; }
}

/* 文案组移到右侧 */
.inner--word .title    { left: 640px; right: 72px; }
.inner--word .subtitle { left: 648px; right: 80px; }
.inner--word .desc     { left: 648px; right: 80px; width: auto; }
.inner--word .chips    { left: 648px; }

/* 手机移到左侧（镜像：hud 方位左右互换，按钮贴右缘） */
.phone-wrap--left { right: auto; left: 28px; }
.phone-wrap--left .hud1 { left: auto; right: -66px; }
.phone-wrap--left .hud2 { right: auto; left: -26px; }

/* 海蓝→金标题渐变（金色呼应起点大星星），按钮为天空蓝 */
.title--amber {
  background: linear-gradient(90deg, #7DD3FC, #FBBF24);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.chips--amber .chip:hover,
.chips--amber .chip.active {
  background: rgba(56,189,248,.14);
  border-color: #38BDF8;
  box-shadow: 0 0 18px rgba(56,189,248,.3), inset 0 0 10px rgba(56,189,248,.08);
}
.chips--amber .chip:nth-child(2):hover,
.chips--amber .chip:nth-child(2).active {
  background: rgba(125,211,252,.14);
  border-color: #7DD3FC;
  box-shadow: 0 0 18px rgba(125,211,252,.3), inset 0 0 10px rgba(125,211,252,.08);
}

/* HUD：hud1 金色（起点大星星/关卡），hud2 天蓝 */
.hud1--amber {
  border-color: rgba(251,191,36,.5) !important;
  box-shadow: 0 4px 16px rgba(251,191,36,.2) !important;
}
.hud1--amber .hl { color: #FBBF24 !important; }
.hud2--amber {
  border-color: rgba(56,189,248,.5) !important;
  box-shadow: 0 4px 16px rgba(56,189,248,.2) !important;
}
.hud2--amber .hl { color: #38BDF8 !important; }

/* ================================================================
   板块三 · 智能错题本（手机在右，多语言错题文字墙 · 琥珀暖橙主题）
   ================================================================ */
.section--mistake {
  background: linear-gradient(140deg, #12081F 0%, #241033 55%, #160A26 100%);
}
.section--mistake .glow-tl {
  background: radial-gradient(closest-side, rgba(251,146,60,.13), transparent);
}
.section--mistake .glow-br {
  background: radial-gradient(closest-side, rgba(167,139,250,.14), transparent);
}

/* ═══ 多语言错题文字墙：散落各处的真实错题片段，缓缓漂移 ═══ */
.word-field { position: absolute; inset: 0; pointer-events: none; }
.word-frag {
  position: absolute; white-space: nowrap;
  font-family: "PingFang SC", "Hiragino Sans", "Noto Sans JP", "Noto Sans KR", "Microsoft YaHei", sans-serif;
  color: #E9D5FF; opacity: .1;
  animation: fragDrift 14s ease-in-out infinite;
}
.word-frag .frag-tag {
  font-style: normal; font-size: .78em;
  padding: 1px 8px; margin-right: 8px; border-radius: 99px;
  border: 1px solid currentColor; opacity: .85;
  vertical-align: 1px;
}
/* 不同语言给不同的微色差，近看有层次 */
.word-frag--jp { color: #FDE68A; }
.word-frag--kr { color: #DDD6FE; }
.word-frag--ru { color: #FECACA; }
.word-frag--es { color: #FED7AA; }
.word-frag--fr { color: #E9D5FF; }
@keyframes fragDrift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* 标题与按钮配色（琥珀橙 → 暖金） */
.title--mistake {
  background: linear-gradient(90deg, #FB923C, #FDE68A);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.chips--mistake .chip:hover,
.chips--mistake .chip.active {
  background: rgba(251,146,60,.14);
  border-color: #FB923C;
  box-shadow: 0 0 18px rgba(251,146,60,.3), inset 0 0 10px rgba(251,146,60,.08);
}
.chips--mistake .chip:nth-child(2):hover,
.chips--mistake .chip:nth-child(2).active {
  background: rgba(253,224,171,.12);
  border-color: #FDE68A;
  box-shadow: 0 0 18px rgba(253,224,171,.25), inset 0 0 10px rgba(253,224,171,.08);
}

/* HUD：hud1 暖金（错因解析），hud2 橙（同类题强化） */
.hud1--mistake {
  border-color: rgba(253,224,171,.5) !important;
  box-shadow: 0 4px 16px rgba(253,224,171,.18) !important;
}
.hud1--mistake .hl { color: #FDE68A !important; }
.hud2--mistake {
  border-color: rgba(251,146,60,.5) !important;
  box-shadow: 0 4px 16px rgba(251,146,60,.2) !important;
}
.hud2--mistake .hl { color: #FB923C !important; }
/* ================================================================
   板块四 · 声音剧场（唱歌 × 配音，手机在左，文案在右）
   ================================================================ */
.section--theater {
  background: radial-gradient(ellipse 120% 90% at 50% 110%, #1E0B2E 0%, #12081F 55%, #0B0714 100%);
}
/* 左右氛围：左紫蓝、右粉玫红，中央汇合 */
.half {
  position: absolute; top: 0; bottom: 0; width: 55%; pointer-events: none;
}
.half--sing {
  left: 0;
  background: linear-gradient(100deg, rgba(76,29,149,.4), transparent 75%);
}
.half--dub {
  right: 0;
  background: linear-gradient(260deg, rgba(131,24,67,.38), transparent 75%);
}
/* 标题渐变（紫 → 粉） */
.title--theater {
  background: linear-gradient(90deg, #C4B5FD, #FDA4AF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── 更多玩法：左侧竖排 tab 列表 + 右侧详情（手机在左，文案在右） ── */
.inner--more .title    { left: 640px; right: 72px; }
.inner--more .subtitle { left: 648px; right: 80px; }
.more-body {
  position: absolute; left: 648px; right: 48px; top: calc(24% + 180px);
  display: flex; gap: 26px; align-items: flex-start;
}
/* 竖排 tab */
.mtabs { display: flex; flex-direction: column; gap: 10px; width: 178px; flex: none; }
.mtab {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 14px; text-align: left; font-family: inherit;
  color: var(--body); background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
  cursor: pointer; user-select: none;
  transition: all .3s ease;
}
.mtab-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--white); transition: inherit; }
.mtab-head svg { width: 15px; height: 15px; flex: none; }
.mtab-head .mtab-kana { width: 15px; font-size: 15px; font-weight: 800; line-height: 1; text-align: center; flex: none; }
.mtab-intro { font-size: 11.5px; opacity: .7; }
.mtab:hover { transform: translateX(4px); background: rgba(255,255,255,.08); }
.mtab.active {
  background: rgba(255,255,255,.09);
  border-color: var(--mc, var(--cyan));
  box-shadow: 0 6px 20px rgba(0,0,0,.35), inset 0 0 14px rgba(255,255,255,.04);
}
.mtab.active .mtab-head { color: var(--mc, var(--cyan)); }
.mtab.active .mtab-head svg { fill: var(--mc, var(--cyan)); }
/* 详情文案（随 tab 淡入淡出） */
.more-detail { flex: 1; min-width: 0; padding-top: 2px; }
.md-title { font-size: 28px; font-weight: 800; letter-spacing: 1px; color: var(--white); transition: opacity .25s ease; }
.md-desc  { margin-top: 12px; font-size: 14px; line-height: 2; color: var(--body); transition: opacity .25s ease; }
.md-fade  { opacity: 0; }

/* ═══ 背景漂浮：音符、歌词气泡（左）/ 播放键、台词气泡（右） ═══ */
.note-float {
  position: absolute; pointer-events: none;
  animation: noteDrift 10s ease-in-out infinite;
}
@keyframes noteDrift {
  0%, 100% { transform: translateY(0) rotate(-4deg); opacity: .55; }
  50%      { transform: translateY(-22px) rotate(5deg); opacity: .2; }
}
.lyric-bubble {
  position: absolute; padding: 6px 14px; pointer-events: none;
  font-size: 12px; white-space: nowrap;
  animation: noteDrift 12s ease-in-out infinite;
}
.lyric-bubble--sing {
  color: rgba(221,214,254,.7);
  background: rgba(139,92,246,.1); border: 1px solid rgba(167,139,250,.26);
  border-radius: 99px 99px 99px 6px;
}
.lyric-bubble--dub {
  color: rgba(254,205,211,.7);
  background: rgba(244,114,182,.09); border: 1px solid rgba(244,114,182,.26);
  border-radius: 99px 99px 6px 99px;
}

/* ═══ H5：隐藏漂浮装饰 ═══ */
@media (max-width: 820px) {
  .section--theater .note-float, .section--theater .lyric-bubble { display: none; }
  /* 更多玩法：tab 变横排滑动，详情居中 */
  .more-body { position: static; width: 100%; flex-direction: column; gap: 16px; margin-top: 26px; }
  .mtabs { flex-direction: row; width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .mtabs::-webkit-scrollbar { display: none; }
  .mtab { flex: 1 0 auto; min-width: 118px; padding: 10px 12px; }
  .mtab:hover { transform: none; }
  .md-title { font-size: 22px; text-align: center; }
  .md-desc  { text-align: center; max-width: 520px; margin-left: auto; margin-right: auto; }
}
/* ================================================================
   板块 · 真人直播教学（横屏手机在右，视频直播间）
   ================================================================ */
.section--live {
  background: linear-gradient(130deg, #071C18 0%, #0D2B26 55%, #081F1B 100%);
}
.section--live .glow-tl {
  background: radial-gradient(closest-side, rgba(45,212,191,.14), transparent);
}
.section--live .glow-br {
  background: radial-gradient(closest-side, rgba(52,211,153,.12), transparent);
}

/* 粉笔板书：隐约的语法结构，呼应"课堂" */
.chalk {
  position: absolute; pointer-events: none; white-space: nowrap;
  font-family: "Hiragino Sans", "PingFang SC", "Noto Sans JP", sans-serif;
  color: rgba(153,246,228,.09); font-style: italic;
  animation: fragDrift 16s ease-in-out infinite;
}

/* 横屏手机 */
.phone-land {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 560px; height: 312px;
  border-radius: 36px;
  background: linear-gradient(115deg, #4A5160 0%, #22262F 50%, #3A4049 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
}
.phone-land .pl-screen {
  position: absolute; left: 8px; top: 8px; right: 8px; bottom: 8px;
  border-radius: 28px; overflow: hidden; background: #000;
}
.phone-land .pl-screen video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  position: relative; z-index: 1;
}
.phone-land .pl-island {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 70px; border-radius: 99px; background: #0A0A0A; z-index: 3;
}
.phone-land .pl-glare {
  position: absolute; left: 8px; top: 8px; right: 8px; bottom: 8px;
  border-radius: 28px; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, transparent 45%);
}

/* 文字互动视频没在播时显示的播放按钮（默认隐藏，JS 按 video.paused 切换） */
.pl-play {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,14,36,.72); border: 1.5px solid rgba(255,255,255,.55);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  cursor: pointer;
}
.pl-play svg { width: 22px; height: 22px; margin-left: 3px; }
.pl-play.show { display: flex; }

/* 互动浮层（视频上的 overlays，按按钮切换） */
.live-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .5s; }
.live-overlay.show { opacity: 1; }
/* 文字互动层：弹幕式问答 —— 从底部每 2s 冒出一条，升到顶部渐隐，20s 一轮与视频同步 */
.qa-panel { position: absolute; inset: 0; }
.qa-row {
  position: absolute; left: 14px; bottom: 10px;
  max-width: 280px; padding: 7px 12px; border-radius: 12px;
  font-size: 12px; line-height: 1.6; color: #CCFBF1; white-space: nowrap;
  background: rgba(7,28,24,.85); border: 1px solid rgba(45,212,191,.3);
  opacity: 0;
  animation: qaRise 20s linear infinite;
}
.qa-row:nth-child(1)  { animation-delay: 0s; }
.qa-row:nth-child(2)  { animation-delay: 2s; }
.qa-row:nth-child(3)  { animation-delay: 4s; }
.qa-row:nth-child(4)  { animation-delay: 6s; }
.qa-row:nth-child(5)  { animation-delay: 8s; }
.qa-row:nth-child(6)  { animation-delay: 10s; }
.qa-row:nth-child(7)  { animation-delay: 12s; }
.qa-row:nth-child(8)  { animation-delay: 14s; }
.qa-row:nth-child(9)  { animation-delay: 16s; }
.qa-row:nth-child(10) { animation-delay: 18s; }
@keyframes qaRise {
  0%   { transform: translateY(0); opacity: 0; }        /* 底部冒出 */
  2%   { opacity: 1; }
  42%  { opacity: 1; }
  50%  { transform: translateY(-220px); opacity: 0; }   /* 到顶部渐隐 */
  100% { transform: translateY(-220px); opacity: 0; }   /* 后半程隐藏，凑满 20s 一轮 */
}
/* 连麦层 */
.mic-panel {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 128px; padding: 12px; border-radius: 14px;
  background: rgba(7,28,24,.88); border: 1px solid rgba(45,212,191,.45);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  display: flex; flex-direction: column; gap: 10px;
}
.mic-row { display: flex; align-items: center; gap: 8px; }
.mic-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #071C18;
}
.mic-name { font-size: 11px; color: #CCFBF1; }
.mic-eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; margin-left: auto; }
.mic-eq i { width: 3px; background: #2DD4BF; border-radius: 2px; animation: eqBounce .9s ease-in-out infinite; }
@keyframes eqBounce { 0%,100% { height: 4px; } 50% { height: 14px; } }
.mic-tag {
  align-self: flex-start; padding: 2px 8px; border-radius: 6px;
  background: rgba(45,212,191,.18); font-size: 10px; color: #5EEAD4;
}

/* 直播：技术优势指标 */
.live-tech {
  position: absolute; left: 80px; top: calc(24% + 286px);
  display: flex; gap: 12px;
}
.lt-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px; border-radius: 12px;
  background: rgba(45,212,191,.07); border: 1px solid rgba(45,212,191,.22);
}
.lt-num {
  font-size: 20px; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(90deg, #2DD4BF, #86EFAC);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lt-label { font-size: 11px; color: var(--body); white-space: nowrap; }

/* 直播板块按钮（青绿）：下移避让技术优势行 */
.chips--live { top: calc(24% + 378px); }
.chips--live .chip:hover,
.chips--live .chip.active {
  background: rgba(45,212,191,.14); border-color: #2DD4BF;
  box-shadow: 0 0 18px rgba(45,212,191,.3), inset 0 0 10px rgba(45,212,191,.08);
}
.hud--live {
  border-color: rgba(45,212,191,.5) !important;
  box-shadow: 0 4px 16px rgba(45,212,191,.2) !important;
}
.hud--live .hl { color: #2DD4BF !important; }
.title--live {
  background: linear-gradient(90deg, #2DD4BF, #86EFAC);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ================================================================
   板块 · 作业（手机在左，深棕作业本 + 红笔批注）
   ================================================================ */
.section--homework {
  background: linear-gradient(135deg, #1B120A 0%, #2A1B0E 55%, #170F08 100%);
}
.section--homework .glow-tl {
  background: radial-gradient(closest-side, rgba(248,113,113,.1), transparent);
}
.section--homework .glow-br {
  background: radial-gradient(closest-side, rgba(251,191,36,.1), transparent);
}

/* 方格稿纸暗纹 */
.gridpaper {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(253,230,138,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(253,230,138,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 75%);
}

/* 红笔批注（手写感） */
.redmark {
  position: absolute; pointer-events: none; white-space: nowrap;
  font-family: "PingFang SC", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-weight: 700; font-style: italic;
  color: rgba(248,113,113,.5);
  text-shadow: 0 0 12px rgba(248,113,113,.25);
  animation: noteDrift 11s ease-in-out infinite;
}
.redmark--circle {
  width: 120px; height: 60px;
  border: 2.5px solid rgba(248,113,113,.45); border-radius: 50%;
  filter: drop-shadow(0 0 8px rgba(248,113,113,.2));
}

.title--homework {
  background: linear-gradient(90deg, #FBBF24, #F87171);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.chips--homework .chip:hover,
.chips--homework .chip.active {
  background: rgba(251,191,36,.13); border-color: #FBBF24;
  box-shadow: 0 0 18px rgba(251,191,36,.28), inset 0 0 10px rgba(251,191,36,.08);
}
.chips--homework .chip:nth-child(n+2):hover,
.chips--homework .chip:nth-child(n+2).active {
  background: rgba(248,113,113,.13); border-color: #F87171;
  box-shadow: 0 0 18px rgba(248,113,113,.28), inset 0 0 10px rgba(248,113,113,.08);
}
.hud1--homework {
  border-color: rgba(251,191,36,.5) !important;
  box-shadow: 0 4px 16px rgba(251,191,36,.2) !important;
}
.hud1--homework .hl { color: #FBBF24 !important; }
.hud2--homework {
  border-color: rgba(248,113,113,.5) !important;
  box-shadow: 0 4px 16px rgba(248,113,113,.2) !important;
}
.hud2--homework .hl { color: #F87171 !important; }
/* 老师点评 HUD 固定在手机右下角（覆盖 phone-wrap--left 把 hud2 挪到左侧的规则） */
.phone-wrap--left .hud2--homework { left: auto; right: -26px; }