/* =============================================
   唐川单词缘 · H5 样式
   移动优先 · 响应式 · 现代清爽
   ============================================= */

/* ---- 变量 ---- */
:root {
  --primary: #2563eb;
  --primary-light: #3b82f6;
  --primary-dark: #1d4ed8;
  --text: #1e293b;
  --text-secondary: #64748b;
  --text-light: #94a3b8;
  --bg: #f8fafc;
  --card: #ffffff;
  --border: #e2e8f0;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
  --lh: 1.5em;  /* 1行字高基准 */

  /* 成绩色阶（清淡）：得分 {90,80,70,60,50-} = {红,黄,绿,青,蓝} */
  --c50: #eff6ff;   /* 50分及以下 蓝 */
  --c50-bd: #bfdbfe;
  --c60: #ecfeff;   /* 60分 青 */
  --c60-bd: #a5f3fc;
  --c70: #f0fdf4;   /* 70分 绿 */
  --c70-bd: #bbf7d0;
  --c80: #fffbeb;   /* 80分 黄 */
  --c80-bd: #fde68a;
  --c90: #fef2f2;   /* 90分 红 */
  --c90-bd: #fecaca;
  --c0: #f1f5f9;    /* 灰：未通过(<50) */
  --c0-bd: #e2e8f0;

  --ok: #16a34a;
  --err: #dc2626;
  --to: #6b7280;
}

/* ---- 重置 ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; border: none; outline: none; background: none; font-size: inherit; }
button:disabled { cursor: default; opacity: 0.5; }
a { color: var(--primary); text-decoration: none; }

/* ---- 页面系统 ---- */
.page { display: none; }
.page.on { display: block; }

/* ---- 通用组件 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 600;
  transition: all 0.15s;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:active { background: var(--primary-dark); }
.btn-ghost { background: transparent; border: none; box-shadow: none; color: var(--text-secondary); }
.btn-ghost:active { color: var(--text); }
.btn-block { width: 100%; }

.page-title {
  font-size: 20px; font-weight: 700; text-align: center;
  padding: 16px 0;
}
.page-foot { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }

/* ---- 首页 ---- */
.home-head { padding: 16px; background: var(--card); border-bottom: 1px solid var(--border); }
.app-title { font-size: 22px; font-weight: 800; text-align: center; color: var(--primary); }
.ver { font-size: 12px; font-weight: 400; color: var(--text-light); margin-left: 4px; }

.stat-bar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 0 8px; }
.stat { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.stat .k { font-size: 10px; color: var(--text-secondary); }
.stat .v { font-size: 18px; font-weight: 700; color: var(--text); }

.action-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0; }
.action-row .btn { flex: 1; min-width: 60px; font-size: 13px; padding: 8px 10px; }
.action-row-top .btn, .action-row-bottom .btn { flex: 1; min-width: 72px; }
.action-row-bottom { margin-top: 0; }

/* 首页【闯关nn】当前关卡序号 */
.lvl-no { font-weight: 800; margin-left: 2px; }

/* 难度切换（并入首页第二行按钮行） */
.diff-switch {
  display: flex;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px; padding: 2px;
  flex: 1; min-width: 72px;
}
.diff-opt {
  flex: 1;
  padding: 5px 12px; border-radius: 18px;
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary); transition: all 0.15s;
  white-space: nowrap;
}
.diff-opt.active { background: var(--primary); color: #fff; }
.diff-opt:active { transform: scale(0.96); }

/* combo 标签行：两行 5+4（小学/初中/高中/大四/考研｜小初/小初高/高大/大研） */
.combo-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  padding: 8px 0 0;
}
.combo-tab {
  flex: 0 0 calc(20% - 4px);   /* 第一行 5 个，各占 20% */
  max-width: calc(20% - 4px);
  padding: 4px 2px; border-radius: 20px;
  font-size: 12px; font-weight: 500;
  text-align: center; white-space: nowrap;
  background: var(--bg); color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: all 0.15s;
  cursor: pointer;
}
/* 第二行 4 个，各占 25% */
.combo-tab:nth-child(n+6) {
  flex-basis: calc(25% - 4px);
  max-width: calc(25% - 4px);
}
.combo-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.combo-tab:active { transform: scale(0.95); }

/* ===== 年级下拉框 (替代原 combo-tabs) ===== */
.grade-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}
.grade-label {
  font-size: 14px;
  color: #555;
  white-space: nowrap;
}
.combo-select {
  flex: 1;
  padding: 10px 14px;
  font-size: 15px;
  border: 1.5px solid var(--primary, #4a7cf7);
  border-radius: 10px;
  background: #fff;
  color: #333;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234a7cf7' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.combo-select:focus {
  outline: none;
  border-color: var(--primary, #4a7cf7);
  box-shadow: 0 0 0 3px rgba(74,124,247,0.15);
}
.combo-select option {
  padding: 10px;
  font-size: 15px;
}


/* 关卡矩阵 */
.lvl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 16px;
}
.lvl-btn {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px; border-radius: var(--radius-sm);
  background: var(--c0); border: 1px solid var(--c0-bd);
  font-size: 12px; line-height: 1.3;
  cursor: pointer; transition: all 0.1s;
  border: 1px solid transparent;
  min-height: 48px;
}
.lvl-btn:active { transform: scale(0.95); opacity: 0.8; }
.lvl-btn .lvl-name { font-weight: 700; font-size: 13px; color: var(--text); }
.lvl-btn .lvl-score { font-size: 10px; color: var(--text-secondary); }
.lvl-btn.s94  { background: var(--c90);  border-color: var(--c90-bd); }  /* 红 ≥94 */
.lvl-btn.s88  { background: var(--c80);  border-color: var(--c80-bd); }  /* 黄 ≥88 */
.lvl-btn.s82  { background: var(--c70);  border-color: var(--c70-bd); }  /* 绿 ≥82 */
.lvl-btn.s76  { background: var(--c60);  border-color: var(--c60-bd); }  /* 青 ≥76 */
.lvl-btn.s70  { background: var(--c50);  border-color: var(--c50-bd); }  /* 蓝 ≥70 */
.lvl-btn.s0   { background: var(--c0);   border-color: var(--c0-bd); }
.lvl-btn.locked { opacity: 0.45; cursor: default; }
.lvl-btn.locked:active { transform: none; opacity: 0.45; }

/* 下一关进度 */
.next-bar { padding: 8px 16px 16px; text-align: center; font-size: 13px; color: var(--text-secondary); }
.next-bar .next-progress { display: flex; align-items: center; gap: 8px; justify-content: center; }
.next-bar .next-bar-track { flex: 1; max-width: 200px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.next-bar .next-bar-fill { height: 100%; background: var(--primary); border-radius: 2px; transition: width 0.3s; }

/* ---- 选年级 ---- */
#page-grade { padding: 16px; }
.grade-list { display: flex; flex-direction: column; gap: 10px; }
.grade-btn {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow);
  cursor: pointer; transition: all 0.1s;
}
.grade-btn:active { transform: scale(0.98); box-shadow: var(--shadow-lg); }
.grade-btn .gb-name { font-weight: 700; font-size: 16px; }
.grade-btn .gb-meta { font-size: 12px; color: var(--text-secondary); }
.grade-btn .gb-diff { font-size: 12px; color: var(--primary); font-weight: 600; }

/* ---- 预习 ---- */
#page-preview.on { display: flex; flex-direction: column; min-height: 100vh; }
#page-preview { padding: 16px; }
.preview-head { margin-bottom: 12px; }
.pv-meta { display: flex; gap: 16px; justify-content: center; font-size: 13px; color: var(--text-secondary); }
.pv-list { flex: 1; overflow-y: auto; padding-bottom: 12px; }

.pv-left {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pv-score {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  font-size: 14px;
  font-weight: normal !important;
  text-align: center;
  min-width: 32px;
  padding: 2px 10px;
  border-radius: 6px;
  color: #222 !important;
  font-style: normal !important;
}







.pv-actions { gap: 8px; }

/* ---- 闯关 ---- */
#page-game { min-height: 100vh; }
#stage {
  display: flex; flex-direction: column;
  min-height: 100vh; padding: 0;
  position: relative;
  background: var(--bg);
}
.stage-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.stage-back { font-size: 14px; color: var(--primary); font-weight: 500; }
.p-progress { font-size: 14px; font-weight: 600; color: var(--text); }
.timer { font-size: 14px; font-weight: 600; color: var(--primary); }

/* ---- 双进度条：上条=当前单词答题超时（从左向右），下条=本关单词完成率 ---- */
.progress-stack {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 16px 4px;
  background: var(--card);
}
.pg-row {
  height: 14px; width: 100%;
  border-radius: 7px;
  background: #e5e7eb;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.pg-fill {
  height: 100%; width: 0%;
  border-radius: 7px;
  transition: width 0.15s ease-out;
}
.pg-time-fill { background: linear-gradient(90deg, #fbbf24, #d97706); }   /* 超时：金黄色 */
.pg-word-fill { background: linear-gradient(90deg, #4ade80, #16a34a); }    /* 完成率：绿色 */

/* 中间内容区：单词与 A/B 选项整体居中 */
.stage-mid {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 16px 0 24px;
}

#word {
  display: none;
  align-items: center;
  justify-content: flex-start;  /* 居左 */
  font-size: clamp(40px, 10vw, 64px);
  font-weight: 600;
  padding: 20px 8px;          /* 左边距8px ≈ 32rpx */
  min-height: 30vh;
  color: var(--text);
  transition: opacity 0.1s;
  background: transparent;
  width: 100%;
  margin-top: -0.125em;            /* 向上偏移 = 字符高度/8 */
}
#word.show { display: flex; }
#word span {
  display: inline-block;
  text-align: left;
}
#word .root, #word b { font-weight: 800; color: #c0392b; text-decoration: underline; text-decoration-color: #c0392b; text-underline-offset: 4px; }

.opt {
  flex: 0 0 auto;
  position: relative;                 /* 为右侧对错符号定位 */
  display: flex; align-items: center; justify-content: flex-start;  /* 左对齐 */
  padding: 8px 20px;
  margin: 0 16px;
  border-radius: var(--radius);
  background: var(--card);
  border: 2px solid var(--border);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.12s;
  font-size: 18px;
  line-height: 1.5;
  min-height: calc(var(--lh) * 5);    /* 按钮高度 5 行字 */
  text-align: left;
}
/* A、B 两按钮中间距离 2 行字；文字：A 内容向下对齐（贴底）、B 内容向上对齐（贴顶） */
#optA { margin-bottom: calc(var(--lh) * 2); align-items: flex-end; }
#optB { align-items: flex-start; }
.opt:active { transform: scale(0.97); border-color: var(--primary); }
.opt.ok { border-color: var(--ok); background: #f0fdf4; }
.opt.no { border-color: var(--err); background: #fef2f2; }
.opt.to { border-color: var(--to); background: #f3f4f6; }
.opt .opt-tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-weight: 700; font-size: 14px; margin-right: 12px; flex-shrink: 0;
}
.opt.no .opt-tag { background: var(--err); }
.opt.to .opt-tag { background: var(--to); }
.opt .opt-text { flex: 1; text-align: left; }  /* 文字横向左对齐 */
.opt.hide { display: none; }

/* 对错反馈符号：√绿 / ×红，右对齐在被选项右侧、字号更大 */
.opt .fb-mark {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}
.opt .fb-mark.ok { color: var(--ok); }
.opt .fb-mark.no { color: var(--err); }

/* 底部反馈气泡与操作提示：仅保留选项上的 √/× 符号，不再显示屏幕下方提醒 */
#fb { display: none; }
#game-hint { display: none; }

/* ---- 结果 ---- */
#page-result { padding: 16px; }
.rs-stats { display: flex; justify-content: center; gap: 24px; margin: 12px 0 20px; }
.rs-stat { display: flex; flex-direction: column; align-items: center; }
.rs-stat .k { font-size: 12px; color: var(--text-secondary); }
.rs-stat .v { font-size: 24px; font-weight: 700; color: var(--text); }
.rs-sub { font-size: 15px; font-weight: 600; margin: 12px 0 8px; color: var(--text-secondary); }
.rs-list { display: flex; flex-direction: column; margin-bottom: 16px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; list-style: none; counter-reset: none; }
.rs-actions { gap: 8px; flex-direction: row; flex-wrap: wrap; }
.rs-actions .btn { flex: 1; min-width: 80px; }
.rs-last-tip { text-align: center; font-size: 13px; color: var(--text-light); padding: 8px; }

/* ---- 单词得分柱状图 ---- */
.chart {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 10px 8px;
  margin-bottom: 12px; box-shadow: var(--shadow);
  overflow-x: auto;
}
.chart-title {
  font-size: 13px; font-weight: 700; text-align: center;
  color: var(--text); margin-bottom: 6px;
}
.chart-inner { min-width: 220px; }
.chart-body {
  position: relative; height: 150px;
  display: flex; align-items: flex-end;
  gap: 2px; padding: 14px 0 0;
  border-bottom: 1px solid var(--border);
}
.chart-grid {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
}
.chart-grid i {
  border-top: 1px dashed var(--border);
  position: relative; height: 0;
}
.chart-grid i::after {
  content: attr(data-y);
  position: absolute; top: -7px; left: 2px;
  font-size: 8px; color: var(--text-light);
  font-style: normal;
}
.chart-bar {
  flex: 1 1 0; min-width: 3px;
  position: relative; border-radius: 2px 2px 0 0;
  transition: height 0.3s;
}
/* 柱状图颜色按得分：{90,80,70,60,50-}={红,黄,绿,青,蓝} 清淡色 */
.chart-bar.s94 { background: var(--c90-bd); }  /* 红 ≥94 */
.chart-bar.s88 { background: var(--c80-bd); }  /* 黄 ≥88 */
.chart-bar.s82 { background: var(--c70-bd); }  /* 绿 ≥82 */
.chart-bar.s76 { background: var(--c60-bd); }  /* 青 ≥76 */
.chart-bar.s70 { background: var(--c50-bd); }  /* 蓝 >=70 */
.chart-bar.s0  { background: var(--c0-bd); }
.chart-bar .bar-val {
  position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%);
  font-size: 8px; font-weight: 700; line-height: 1;
  white-space: nowrap;
  color: var(--text-secondary);
}
.chart-bar.s94 .bar-val { color: #dc2626; }
.chart-bar.s88 .bar-val { color: #d97706; }
.chart-bar.s82 .bar-val { color: var(--ok); }
.chart-bar.s76 .bar-val { color: #0891b2; }
.chart-bar.s70 .bar-val { color: var(--primary); }
.chart-x {
  display: flex;
  font-size: 9px; color: var(--text-light);
  padding: 3px 2px 0;
}
.chart-x span {
  flex: 1 1 0;
  text-align: center;
}
.chart-stats {
  display: flex; justify-content: center; gap: 16px;
  font-size: 12px; color: var(--text-secondary);
  border-top: 1px solid var(--border); margin-top: 8px; padding-top: 6px;
}
.chart-stats b { color: var(--text); }

/* ---- 体力不足弹层 ---- */
#page-ad {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: none; align-items: center; justify-content: center;
  z-index: 100;
}
#page-ad.on { display: flex; }
.ad-card {
  background: var(--card); border-radius: var(--radius);
  padding: 24px; width: 86%; max-width: 320px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.ad-card h3 { font-size: 18px; margin-bottom: 8px; }
.ad-left { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; }
.ad-card .btn { margin-top: 8px; }

/* ---- Toast ---- */
#toast {
  position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%);
  padding: 10px 24px; border-radius: 20px;
  background: rgba(0,0,0,0.8); color: #fff;
  font-size: 14px; font-weight: 500;
  z-index: 200;
  opacity: 0; transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  white-space: nowrap; max-width: 90%;
}
#toast.show { opacity: 1; }

/* ---- Loading ---- */
#loading {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.9);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  z-index: 300;
}
#loading.on { display: flex; }
.loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border); border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading-text { margin-top: 12px; font-size: 14px; color: var(--text-secondary); }

/* ---- 响应式 ---- */
@media (max-width: 360px) {
  .lvl-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 10px; }
  .lvl-btn { font-size: 11px; padding: 6px 2px; min-height: 40px; }
  .lvl-btn .lvl-name { font-size: 12px; }
  .stat-bar { gap: 4px; }
  .stat { min-width: 48px; }
  .stat .v { font-size: 16px; }
  .action-row .btn { font-size: 12px; padding: 6px 8px; }
}

@media (min-width: 600px) {
  .lvl-grid { grid-template-columns: repeat(4, 1fr); max-width: 600px; margin: 0 auto; }
  #stage { max-width: 480px; margin: 0 auto; }
  #page-home { max-width: 600px; margin: 0 auto; }
  #page-result { max-width: 480px; margin: 0 auto; }
  .ad-card { max-width: 360px; }
}

/* ---- 触摸优化：A/B 大按钮 ---- */
@media (pointer: coarse) {
  .opt { padding: 12px 20px; font-size: 20px; min-height: calc(var(--lh) * 5); }
  #word { font-size: clamp(48px, 11vw, 72px); }
}

/* ---- 单词背景色类（闯关页 #word 无背景；预览/结果页保留背景） ---- */
.ula, .pv-word .ula, .rs-html .ula { background: #ffe2e2; }
.ulb, .pv-word .ulb, .rs-html .ulb { background: #fff384; }
.ulc, .pv-word .ulc, .rs-html .ulc { background: #ccff88; }
.uld, .pv-word .uld, .rs-html .uld { background: #a0ffff; }
.ule, .pv-word .ule, .rs-html .ule { background: #ccddff; }
.ulf, .pv-word .ulf, .rs-html .ulf { background: #bbccee; }
.ulg, .pv-word .ulg, .rs-html .ulg { background: #eeeedd; }
.ulaa, .pv-word .ulaa, .rs-html .ulaa { background: #ffddef; }
.ulbb, .pv-word .ulbb, .rs-html .ulbb { background: #fff2aa; }
.ulcc, .pv-word .ulcc, .rs-html .ulcc { background: #ccff88; }
.uldd, .pv-word .uldd, .rs-html .uldd { background: #a0ffff; }
.ulee, .pv-word .ulee, .rs-html .ulee { background: #ccddff; }
.ulff, .pv-word .ulff, .rs-html .ulff { background: #bbccee; }
.ulgg, .pv-word .ulgg, .rs-html .ulgg { background: #eeeedd; }

/* ==================== 分享弹窗 ==================== */
.modal {
  position: fixed; inset: 0;
  display: none;
  z-index: 999;
}
.modal.on { display: flex; align-items: center; justify-content: center; }
.modal-mask {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.modal-body {
  position: relative;
  background: var(--card-bg);
  border-radius: 20px;
  width: 92%; max-width: 380px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-tab {
  flex: 1;
  padding: 14px 0;
  text-align: center;
  font-size: 15px;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
}
.modal-tab.on {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.modal-pane {
  display: none;
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}
.modal-pane.on { display: block; }
.modal-actions {
  display: flex; gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-actions .btn { flex: 1; }

/* 文字分享 */
.share-text-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-all;
  margin-bottom: 12px;
}

/* ===== 截图分享卡片 ===== */
.share-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 14px;
  font-family: -apple-system, system-ui, sans-serif;
}
.sc-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.sc-brand { font-size: 11px; color: #94a3b8; letter-spacing: 2px; }
.sc-title { font-size: 16px; font-weight: bold; color: #fff; }

.sc-stats {
  text-align: center;
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 12px;
}
.sc-stat-big {
  font-size: 56px; font-weight: 900;
  color: #fbbf24;
  line-height: 1;
  letter-spacing: -2px;
}
.sc-stat-row {
  display: flex; justify-content: center; gap: 24px;
  margin-top: 8px;
  font-size: 12px; color: #cbd5e1;
}
.sc-stat-row .sc-val { color: #fff; font-weight: 600; margin-left: 4px; }

.sc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
}
.sc-word {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
}
.sc-word .w-sc {
  font-weight: 700;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 11px;
  min-width: 22px; text-align: center;
}
.sc-word.c90 .w-sc { background: #dc2626; color: #fff; }
.sc-word.c80 .w-sc { background: #d97706; color: #fff; }
.sc-word.c70 .w-sc { background: #16a34a; color: #fff; }
.sc-word.c60 .w-sc { background: #0891b2; color: #fff; }
.sc-word.c50 .w-sc { background: #2563eb; color: #fff; }
.sc-word.c0 .w-sc { background: #64748b; color: #fff; }

.sc-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.sc-qr {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
}
.sc-qr canvas {
  width: 100px; height: 100px;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
}
.sc-qr-tip {
  font-size: 10px; color: #94a3b8;
}
.sc-url {
  flex: 1;
  text-align: right;
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.5;
  word-break: break-all;
  padding-left: 10px;
}

/* 统一表格：闯关结果 + 磨单词预览 */

/* ===== 统一单词成绩表：三种闯关模式 × 两个时点 =====
   Excel 数据条风格：6色分级实体填充 + 固定宽 + 数字叠层
   两端对齐：左=单词+汉译竖排，右=数据条 */

/* 行容器：flex row，两端对齐 */
.rs-word,
.pv-word {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  padding: 0;
  border-bottom: 1px solid #e5e5e5;
  font-size: 13px;
  line-height: 1.2;
  box-sizing: border-box;
  background: transparent !important;
}
.rs-word:last-child { border-bottom: none; }

/* 左半区：单词 + 汉译 竖排 */
.rs-word .rs-left,
.pv-word .rs-left {
  flex: 1;
  min-width: 0;
  padding: 3px 10px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
  overflow: hidden;
  text-align: left;
  background: transparent !important;
}

/* 单词显示：词根 <b>/.root 加粗，非词根不加粗 */
.rs-word .rs-html,
.pv-word .rs-html {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--text-primary);
}
.rs-word .rs-html .root,
.rs-word .rs-html b,
.pv-word .rs-html .root,
.pv-word .rs-html b {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 2px;
}

/* 汉译换行 */
.rs-word .rs-def,
.pv-word .rs-def {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: #000000;
  font-weight: normal;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 兼容旧 .wdef 嵌在 .rs-html 内 */
.rs-word .rs-html .wdef,
.pv-word .rs-html .wdef {
  display: block;
  font-size: 12px;
  color: #000000;
  margin-top: 1px;
  font-weight: normal;
}

/* Excel 数据条容器：固定宽 80px */
.rs-word .rs-score,
.pv-word .rs-score {
  flex-shrink: 0;
  width: 36px;
  height: auto;
  min-height: 26px;
  position: relative;
  background-color: #ffffff;
  border-left: 1px solid #e5e5e5;
  overflow: hidden;
  font-family: 'Consolas', 'Courier New', monospace;
}

/* 彩色实体填充条 */
.rs-word .rs-score-bar,
.pv-word .rs-score-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  opacity: 0.85;
}

/* 数字叠层：黑色不加粗 */
.rs-word .rs-score-text,
.pv-word .rs-score-text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 26px;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
}
.rs-list, .pv-list {
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
}  /* 闯新关占位 */


/* 强制清除列表序号标记 */
.rs-list *, .rs-list *::marker, .rs-list *::-webkit-list-marker { display: none !important; list-style: none !important; }