/* ==========================================================================
 * common.css —— 课程包公共框架样式（第三课 · 全新视觉体系「星际思维探险」）
 * --------------------------------------------------------------------------
 * 设计定位：面向 3-6 年级儿童 + 家长的高品质教育产品视觉
 *   · 入口大厅：深空星夜 + 极光渐变 + 玻璃拟态卡片（探索感、仪式感）
 *   · 模块内页：晨雾浅色画布 + 悬浮白卡 + 糖果色交互（清晰、专注、友好）
 *   · 全站圆角、柔和投影、即时微动效，兼顾 PC / 平板 / 手机竖屏
 *
 * 本文件只放视觉变量与公共组件样式，禁止写入任何单一模块的私有样式。
 * core.js 通过 class 名创建/查找以下结构，禁止改名（见文末清单）。
 * ========================================================================== */

/* ================================================================
 * 1. 设计变量
 * ================================================================ */
:root {
  /* 浅色画布（模块内页） */
  --paper: #F4F6FB;
  --paper-2: #EAEEF7;
  --card-bg: #FFFFFF;

  /* 深空（入口大厅）—— 第 01 课「午夜启程」（16 课色彩总表第 1 行） */
  --space-1: #0A0E24;
  --space-2: #1B2A5E;
  --space-3: #0F1E3A;

  /* 墨色文字 */
  --ink: #23233C;
  --ink-soft: #5B5B76;
  --ink-faint: #9B9BB4;

  /* 强调色（极光色系） */
  --violet: #6C5CE7;          /* 主色 · 星紫 */
  --violet-deep: #5A4BD1;
  --violet-lt: #A89BFF;
  --teal: #0FB5AE;            /* 辅助 · 青碧 */
  --teal-lt: #5FE0DB;
  --coral: #FF6B6B;           /* 点缀 · 珊瑚 */
  --gold: #F5B301;            /* 勋章 · 鎏金 */
  --gold-deep: #D89A00;
  --gold-lt: #FFD75E;
  --green: #22C55E;           /* 正确 */
  --red: #F43F5E;             /* 错误 */
  --sky: #38BDF8;

  /* 渐变 */
  --grad-primary: linear-gradient(135deg, #7C6CF0 0%, #5A4BD1 100%);
  --grad-aurora: linear-gradient(90deg, #7DD3FC 0%, #C4B5FD 50%, #F9A8D4 100%);
  --grad-gold: radial-gradient(circle at 32% 28%, #FFE9A8 0%, #F5B301 52%, #C98A00 100%);
  --grad-progress: linear-gradient(90deg, #5FE0DB, #7C6CF0);

  /* 字体 */
  --font-title: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI',
    'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-sans: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI',
    'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-num: 'DIN Alternate', 'Bahnschrift', 'PingFang SC', sans-serif;

  /* 圆角 / 投影 */
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-card: 0 8px 24px -8px rgba(35, 35, 60, .14), 0 2px 6px rgba(35, 35, 60, .06);
  --shadow-lg: 0 24px 48px -16px rgba(35, 35, 60, .25);
  --shadow-glow: 0 0 0 4px rgba(108, 92, 231, .16);
  --shadow-violet: 0 10px 24px -8px rgba(108, 92, 231, .55);
}

/* ================================================================
 * 2. 基础重置
 * ================================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden; /* 单屏无滚动 */
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ================================================================
 * 3. 页面画布
 * ================================================================ */

/* 3.1 入口大厅：深空星夜 */
body.nav-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 20px 12px;
  color: #F2F1FA;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 68%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 14%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 42%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 78%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 88%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 5% 82%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 60%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(ellipse 60% 45% at 85% -5%, rgba(108, 92, 231, .45), transparent 70%),
    radial-gradient(ellipse 55% 40% at 8% 105%, rgba(15, 181, 174, .35), transparent 70%),
    linear-gradient(158deg in oklch, var(--space-1) 0%, var(--space-2) 52%, var(--space-3) 100%);
  background-repeat: no-repeat;
}

/* 漂浮极光光斑 */
body.nav-page::before,
body.nav-page::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
body.nav-page::before {
  width: 380px; height: 380px;
  top: -120px; right: -100px;
  background: rgba(124, 108, 240, .38);
  animation: drift 14s ease-in-out infinite alternate;
}
body.nav-page::after {
  width: 320px; height: 320px;
  bottom: -110px; left: -90px;
  background: rgba(15, 181, 174, .3);
  animation: drift 18s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-36px, 30px) scale(1.12); }
}

/* 3.2 模块内页：晨雾浅色画布（带细点纹理） */
body:not(.nav-page) {
  height: 100%;
  background:
    radial-gradient(rgba(108, 92, 231, .07) 1.2px, transparent 1.3px),
    linear-gradient(170deg, #F8FAFE 0%, var(--paper) 55%, var(--paper-2) 100%);
  background-size: 26px 26px, 100% 100%;
}
body:not(.nav-page)::before,
body:not(.nav-page)::after { display: none; }

/* ================================================================
 * 4. 入口大厅组件
 * ================================================================ */

/* 顶栏：标题相对整条导航栏真正水平居中 */
.nav-header {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0 2px;
}
.nav-version {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: rgba(242, 241, 250, .55);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .5px;
}
.nav-title {
  font-family: var(--font-title);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #FFFFFF;
  text-shadow: 0 4px 24px rgba(108, 92, 231, .5);
}
.nav-title .accent {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.nav-actions {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
}
.nav-replay-btn {
  font-size: 15px;
  font-weight: 700;
  color: #F2F1FA;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: 9px 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.nav-replay-btn:hover {
  background: rgba(255, 255, 255, .18);
  box-shadow: 0 0 20px rgba(125, 211, 252, .35);
}
.nav-replay-btn:active { transform: scale(.94); }

.nav-diff-btn {
  font-size: 15px;
  font-weight: 700;
  color: #F2F1FA;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: 9px 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.nav-diff-btn:hover {
  background: rgba(255, 255, 255, .18);
  box-shadow: 0 0 20px rgba(125, 211, 252, .35);
}
.nav-diff-btn:active { transform: scale(.94); }

/* 开场讲课视频遮罩 */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease;
}
.intro-overlay.is-show {
  opacity: 1;
  visibility: visible;
}
.intro-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.intro-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .2s ease;
}
.intro-close:hover { background: rgba(255, 255, 255, .3); }
.intro-unmute {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
}
.intro-unmute.is-show {
  opacity: 1;
  visibility: visible;
}

/* 筛选页签 */
.filter-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 6px;
  margin: 18px 0 20px;
  padding: 6px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.filter-tabs .tab {
  min-width: 84px;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  color: rgba(242, 241, 250, .72);
  transition: all .18s ease;
}
.filter-tabs .tab:hover { color: #FFFFFF; }
.filter-tabs .tab.is-on {
  color: #FFFFFF;
  background: var(--grad-primary);
  box-shadow: var(--shadow-violet);
}

/* 下载面板 */
.download-panel { padding: 20px 0; }
.download-panel .download-list { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 480px; margin: 0 auto; }
.download-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 251, 240, .9);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all .18s ease;
}
.download-item:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .28);
  transform: translateY(-2px);
}

/* 模块卡片网格 */
.module-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  flex: 1;
  align-content: start;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  overflow-y: auto;
  padding: 4px 4px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}
.module-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 14px 34px -12px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  animation: cardIn .5s cubic-bezier(.2, .9, .3, 1.2) backwards;
}
.module-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(108,92,231,.25), rgba(15,181,174,.2));
}
.module-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.module-cover--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
}
.module-bar {
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, #7DD3FC, #C4B5FD);
}
.module-card[data-type='micro'] .module-bar { background: linear-gradient(90deg, #5FE0DB, #0FB5AE); }
.module-card[data-type='game']  .module-bar { background: linear-gradient(90deg, #A89BFF, #6C5CE7); }
.module-card[data-type='quest'] .module-bar { background: linear-gradient(90deg, #FFB3B3, #FF6B6B); }
.module-info {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px 14px;
}
.module-cover .chip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.module-cover .chip-type-micro { color: #FFFFFF; background: rgba(15, 181, 174, .45); }
.module-cover .chip-type-game  { color: #FFFFFF; background: rgba(108, 92, 231, .45); }
.module-cover .chip-type-quest { color: #FFFFFF; background: rgba(255, 107, 107, .45); }
/* 新课卡片：极光发光（仅 isNew 卡片，制造「新内容在发光」的引导） */
.module-card.has-new {
  border-color: rgba(168, 155, 255, .6);
  animation: cardIn .5s cubic-bezier(.2, .9, .3, 1.2) backwards,
    newCardGlow 2.6s ease-in-out .6s infinite;
}
@keyframes newCardGlow {
  0%, 100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
      0 14px 34px -12px rgba(0, 0, 0, .55),
      0 0 18px rgba(124, 108, 240, .35);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
      0 14px 34px -12px rgba(0, 0, 0, .55),
      0 0 34px rgba(168, 155, 255, .65);
  }
}
.module-card:nth-child(2) { animation-delay: .06s; }
.module-card:nth-child(3) { animation-delay: .12s; }
.module-card:nth-child(4) { animation-delay: .18s; }
.module-card:nth-child(5) { animation-delay: .24s; }
.module-card:nth-child(6) { animation-delay: .3s; }
.module-card:nth-child(7) { animation-delay: .36s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(26px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.module-card:hover, .module-card:focus-visible {
  transform: translateY(-7px);
  border-color: rgba(125, 211, 252, .55);
  box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .55), 0 0 28px rgba(125, 211, 252, .28);
  outline: none;
}
.module-card:hover .module-cover img { transform: scale(1.06); }
.module-card:active { transform: translateY(-2px) scale(.98); }
.module-cover--fallback .module-icon {
  font-size: 56px;
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .4));
  transition: transform .25s ease;
}
.module-card:hover .module-cover--fallback .module-icon { transform: scale(1.12) rotate(-6deg); }
.module-name {
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: .5px;
  line-height: 1.3;
  text-align: center;
}
.module-meta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* 徽章 chip */
.chip {
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: .5px;
}
.chip-type-micro { color: #0B3D3A; background: linear-gradient(135deg, #7EE8E2, #3ED6CE); }
.chip-type-game  { color: #2E1E6B; background: linear-gradient(135deg, #C4B5FD, #A89BFF); }
.chip-type-quest { color: #5B1F1F; background: linear-gradient(135deg, #FFB3B3, #FF8E8E); }
.chip-diff {
  color: rgba(242, 241, 250, .85);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
}
.chip-new {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: 12px;
  font-weight: 800;
  color: #FFFFFF;
  padding: 4px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF8E8E, var(--coral));
  box-shadow: 0 4px 14px rgba(255, 107, 107, .55);
  animation: newPulse 1.6s ease-in-out infinite;
}
@keyframes newPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.nav-foot {
  position: relative;
  z-index: 1;
  padding: 12px 0 6px;
  font-size: 13.5px;
  color: rgba(242, 241, 250, .5);
  letter-spacing: .5px;
  text-align: center;
}
.nav-foot a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.nav-foot a:hover,
.nav-foot a:active,
.nav-foot a:focus,
.nav-foot a:visited {
  color: inherit;
  text-decoration: none;
}

/* ================================================================
 * 5. 按钮
 * ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 34px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  user-select: none;
}
.btn-primary {
  color: #FFFFFF;
  background: var(--grad-primary);
  box-shadow: var(--shadow-violet), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(3px) scale(.97); box-shadow: 0 4px 10px -4px rgba(108, 92, 231, .5); }
.btn-secondary {
  color: var(--violet-deep);
  background: transparent;
  border: 2px solid rgba(108, 92, 231, .5);
}
.btn-secondary:hover { background: rgba(108, 92, 231, .08); }
.btn-secondary:active { transform: translateY(3px) scale(.97); }
.btn-gold {
  color: #5C3D00;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
  box-shadow: 0 10px 24px -8px rgba(245, 179, 1, .6), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn-gold:active { transform: translateY(3px) scale(.97); }

/* ================================================================
 * 6. 模块内页布局（.module-* 系列）
 * ================================================================ */
.module-root {
  height: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 26px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.module-head { text-align: center; flex-shrink: 0; }
.module-title {
  font-family: var(--font-title);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--ink);
}
.module-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 5px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: var(--grad-aurora);
}
.module-hint {
  display: inline-block;
  margin-top: 10px;
  font-size: 16.5px;
  color: var(--ink-soft);
}
.module-stage {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.module-foot {
  flex-shrink: 0;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ================================================================
 * 7. 答题选项（通用）
 * ================================================================ */
.opt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(460px, 90vw);
}
.opt-btn {
  min-height: 72px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 2.5px solid #E3E7F4;
  box-shadow: 0 4px 0 #E3E7F4, var(--shadow-card);
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.opt-btn:hover {
  border-color: var(--violet-lt);
  transform: translateY(-3px);
  box-shadow: 0 7px 0 #E3E7F4, 0 16px 28px -10px rgba(108, 92, 231, .35);
}
.opt-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #E3E7F4; }
.opt-btn.correct {
  background: linear-gradient(135deg, #4ADE80, var(--green));
  border-color: var(--green);
  color: #FFFFFF;
  animation: bounceIn .45s ease;
}
.opt-btn.wrong {
  background: #FFF1F3;
  border-color: var(--red);
  color: var(--red);
  animation: shake .4s ease;
}
@keyframes bounceIn {
  0% { transform: scale(1); } 40% { transform: scale(1.12); }
  70% { transform: scale(.96); } 100% { transform: scale(1); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); } 50% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
}

/* 3D 舞台（备用通用类） */
.stage3d {
  width: min(520px, 92vw);
  height: min(340px, 44vh);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #FFFFFF, #EEF1FA);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* ================================================================
 * 8. 弹层（难度 / 结算页共用，core.js 生成）
 * ================================================================ */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(18, 16, 44, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-box {
  width: min(430px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 34px 30px 30px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.modal-box.pop-in { animation: popIn .28s cubic-bezier(.2, .9, .3, 1.25); }
.modal-mask.pop-out .modal-box { animation: popOut .19s ease forwards; }
.modal-mask.pop-out { animation: maskOut .19s ease forwards; }
@keyframes popIn {
  from { opacity: 0; transform: translateY(30px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes popOut { to { opacity: 0; transform: translateY(16px) scale(.94); } }
@keyframes maskOut { to { background: rgba(18, 16, 44, 0); } }

.modal-title {
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--ink);
}
.modal-sub {
  margin-top: 6px;
  font-size: 16px;
  color: var(--ink-soft);
}

/* 难度选择 */
.diff-list {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.diff-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: #F6F7FC;
  border: 2.5px solid transparent;
  transition: all .16s ease;
}
.diff-item:hover { border-color: var(--violet-lt); transform: translateX(4px); }
.diff-item:active { transform: scale(.98); }
.diff-item.is-cur {
  background: linear-gradient(135deg, rgba(108, 92, 231, .12), rgba(15, 181, 174, .1));
  border-color: var(--violet);
  box-shadow: var(--shadow-glow);
}
.diff-item .diff-label {
  font-size: 21px;
  font-weight: 800;
  font-family: var(--font-title);
  color: var(--ink);
}
.diff-item.is-cur .diff-label { color: var(--violet-deep); }
.diff-item .diff-desc { font-size: 14.5px; color: var(--ink-soft); }

/* 结算页 */
.result-score {
  margin-top: 14px;
  font-family: var(--font-num);
  font-size: 52px;
  font-weight: 800;
  color: var(--violet-deep);
  line-height: 1.1;
}
.result-score small { font-size: 20px; color: var(--ink-faint); font-weight: 600; }
.result-rate {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--teal);
}
.result-eva {
  margin-top: 12px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.result-medal-note {
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--gold-deep);
}
.result-actions {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 勋章 */
.medal {
  width: 118px;
  height: 118px;
  margin: 18px auto 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-gold);
  border: 5px solid rgba(255, 241, 196, .9);
  box-shadow:
    0 0 0 6px rgba(245, 179, 1, .25),
    0 14px 34px -8px rgba(245, 179, 1, .6),
    inset 0 -8px 18px rgba(140, 90, 0, .35);
  animation: medalGlow 1.8s ease-in-out infinite;
}
.medal .medal-icon {
  font-size: 54px;
  filter: drop-shadow(0 3px 6px rgba(120, 70, 0, .45));
}
.medal.is-silver {
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #C9CEDA 55%, #98A0B3 100%);
  border-color: rgba(240, 243, 250, .9);
  box-shadow: 0 0 0 6px rgba(160, 168, 185, .3), 0 14px 30px -8px rgba(140, 148, 168, .6);
  animation: none;
}
.medal.is-bronze {
  background: radial-gradient(circle at 32% 28%, #F2C9A8 0%, #C08A5A 55%, #96633A 100%);
  border-color: rgba(243, 214, 188, .9);
  box-shadow: 0 0 0 6px rgba(180, 128, 82, .28), 0 14px 30px -8px rgba(150, 99, 58, .55);
  animation: none;
  filter: saturate(.8) brightness(.94);
}
.medal.popped { animation: medalPop .55s cubic-bezier(.2, .9, .3, 1.4), medalGlow 1.8s ease-in-out .55s infinite; }
.medal.is-silver.popped, .medal.is-bronze.popped { animation: medalPop .55s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes medalPop {
  0% { transform: scale(0) rotate(-30deg); }
  70% { transform: scale(1.18) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes medalGlow {
  0%, 100% { box-shadow: 0 0 0 6px rgba(245, 179, 1, .25), 0 14px 34px -8px rgba(245, 179, 1, .6), inset 0 -8px 18px rgba(140, 90, 0, .35); }
  50% { box-shadow: 0 0 0 10px rgba(245, 179, 1, .12), 0 14px 44px -4px rgba(245, 179, 1, .8), inset 0 -8px 18px rgba(140, 90, 0, .35); }
}

/* ================================================================
 * 9. 顶部胶囊进度条（core.js 生成）
 * ================================================================ */
.progress-wrap {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
}
.progress-wrap.pulse { animation: progressPulse .3s ease; }
@keyframes progressPulse {
  0% { transform: translateX(-50%) scale(1); }
  40% { transform: translateX(-50%) scale(1.06); }
  100% { transform: translateX(-50%) scale(1); }
}
.progress-bar {
  width: min(180px, 34vw);
  height: 14px;
  border-radius: 999px;
  background: #E7EAF5;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--grad-progress);
  box-shadow: 0 0 12px rgba(95, 224, 219, .7);
  transition: width .35s cubic-bezier(.2, .8, .3, 1);
}
.progress-text {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 800;
  color: var(--violet-deep);
  min-width: 44px;
  text-align: center;
}

/* ================================================================
 * 10. 对/错反馈 + 轻提示 + 粒子（core.js 生成）
 * ================================================================ */
.fb-badge {
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 95;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 58px;
  font-weight: 900;
  color: #FFFFFF;
  pointer-events: none;
}
.fb-badge.fb-correct {
  background: linear-gradient(135deg, #4ADE80, var(--green));
  box-shadow: 0 0 0 10px rgba(34, 197, 94, .2), 0 18px 40px -10px rgba(34, 197, 94, .7);
  animation: fbBounce .5s cubic-bezier(.2, .9, .3, 1.4);
}
.fb-badge.fb-error {
  background: linear-gradient(135deg, #FB7185, var(--red));
  box-shadow: 0 0 0 10px rgba(244, 63, 94, .18), 0 18px 40px -10px rgba(244, 63, 94, .65);
  animation: shake .42s ease;
}
.fb-badge.fade-out { animation: fbFade .32s ease forwards; }
@keyframes fbBounce {
  0% { transform: translate(-50%, -50%) scale(0); }
  60% { transform: translate(-50%, -50%) scale(1.16); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes fbFade {
  to { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
}

.toast {
  position: fixed;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  z-index: 96;
  max-width: 88vw;
  padding: 12px 24px;
  border-radius: 999px;
  background: rgba(35, 35, 60, .88);
  color: #F2F1FA;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .5px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.particle {
  position: fixed;
  z-index: 94;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  animation: particleFly .9s cubic-bezier(.1, .8, .4, 1) forwards;
}
@keyframes particleFly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -120px)) scale(.3); }
}

/* ================================================================
 * 11. 响应式（平板 / 手机竖屏）
 * ================================================================ */
@media (max-width: 768px) {
  .nav-title { font-size: 25px; letter-spacing: 2px; }
  .module-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .module-icon { font-size: 44px; }
  .module-name { font-size: 16.5px; }
  .module-title { font-size: 25px; }
  .modal-box { padding: 28px 22px 24px; }
}

@media (max-width: 480px) {
  body.nav-page { padding: 14px 12px 8px; }
  .nav-header { padding-top: 2px; }
  .nav-title { font-size: 21px; letter-spacing: 1px; }
  .nav-version { display: none; }
  .nav-diff-btn { font-size: 13px; padding: 7px 13px; }
  .filter-tabs { margin: 12px 0 14px; padding: 5px; gap: 4px; }
  .filter-tabs .tab { min-width: 0; flex: 1; padding: 9px 10px; font-size: 15px; }
  .module-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .module-card { padding: 22px 10px 16px; gap: 8px; border-radius: 20px; }
  .module-icon { font-size: 40px; }
  .module-name { font-size: 15px; }
  .chip { font-size: 11.5px; padding: 3px 9px; }
  .module-root { padding: 60px 14px 14px; gap: 12px; }
  .module-title { font-size: 22px; }
  .module-hint { font-size: 15px; }
  .btn { min-height: 48px; padding: 0 26px; font-size: 16.5px; }
  .opt-btn { min-height: 64px; font-size: 20px; }
  .result-score { font-size: 42px; }
  .medal { width: 100px; height: 100px; }
  .medal .medal-icon { font-size: 46px; }
  .toast { font-size: 14.5px; bottom: 30px; }
}

/* ==========================================================================
 * 附：core.js 依赖的 class 清单（禁止改名，只能在其基础上复用/扩展）
 *   弹层：.modal-mask .modal-box .pop-in .pop-out .modal-title .modal-sub
 *         .diff-list .diff-item .is-cur .diff-label .diff-desc
 *         .result-score .result-rate .result-eva .result-medal-note .result-actions
 *         .medal .popped .is-silver .is-bronze .medal-icon
 *   进度：.progress-wrap .pulse .progress-bar .progress-fill .progress-text
 *   反馈：.fb-badge .fb-correct .fb-error .fade-out / .toast .show / .particle
 * ========================================================================== */

/* ==========================================================================
 * 附 2：旧模块兼容层（本课早期模块按「国风水墨」变量命名编写，
 *       这里把旧变量映射到「星际思维探险」新色系，模块私有 CSS 无需改动）
 * ========================================================================== */
:root {
  /* 旧强调色 → 新极光色系 */
  --cinnabar: #FF6B6B;            /* 旧朱砂红 → 珊瑚 */
  --cinnabar-lt: #FF8E8E;
  --cinnabar-dk: #D64545;
  --blue: #6C5CE7;                /* 旧藏蓝 → 星紫 */
  --blue-lt: #A89BFF;
  --blue-dk: #5A4BD1;
  --gold-dk: #D89A00;             /* 旧深金 → 鎏金深色 */

  /* 旧标题衬线字体（模块内 var(--font-serif) 沿用） */
  --font-serif: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
}

/* 旧 .serif 工具类（模块注入的 result-score 使用） */
.serif { font-family: var(--font-serif); }

/* 3D 舞台画布（three.js 渲染的 canvas 铺满容器） */
.stage3d canvas { display: block; width: 100% !important; height: 100% !important; }