/* ============================================================
   闪电先锋 · 深色电涌主题
   PRD 7.2：极简（深色高对比极简）、字号大、按钮大
   设计主张：Signal Glitch —— 把 Stroop 颜色冲突做成"电路短路"
   ============================================================ */

:root {
  /* 色板（权威源；JS 也从这里读取）—— 浅色主题 */
  --ln-bg:        #ffffff;
  --ln-surface:   #f6f7f9;
  --ln-border:    rgba(10, 14, 26, 0.10);
  --ln-border-strong: rgba(10, 14, 26, 0.22);
  --ln-text:      #0a0e1a;
  --ln-text-dim:  #5a6478;
  --ln-text-mute: #6b7688;

  /* 压在实色块上的前景色。
     原实现复用 var(--ln-bg) 当前景色用；浅色下 --ln-bg 变白会导致
     "白底白字"（主按钮 / 答题按钮 active / 最高分横幅全部不可见）。 */
  --ln-on-accent: #ffffff;

  /* 深色蒙层内的前景色（倒计时遮罩、弹窗遮罩上的文字） */
  --ln-overlay-text: #e8ecf4;
  --ln-overlay-text-dim: #9aa4bb;

  /* 主按钮：白底页面上用近黑实心块作最强行动点 */
  --ln-btn-primary-bg: var(--ln-text);
  --ln-btn-primary-fg: var(--ln-on-accent);
  --ln-btn-primary-border: var(--ln-text);

  /* 控件滑块（设置开关） */
  --ln-control-thumb: var(--ln-text-dim);

  /* 游戏色（与 JS 中 COLORS 一致）
     白底可读性：红 4.98:1 / 蓝 5.75:1 / 绿 5.13:1，全部 ≥ 3:1（large text 阈值） */
  --ln-red:    #d32f2f;
  --ln-blue:   #1565c0;
  --ln-green:  #2e7d32;

  /* 黄色分两支，因为「纯黄」和「白底高对比」在色彩学上无法兼得：
     纯黄 #ffcc00 色相 48°、鲜亮正黄，但对白底只有 1.51:1。 */
  --ln-yellow:       #ffcc00;   /* 鲜黄：280px 主字（面积大可感知）、深色遮罩上的倒计时环、实心色段 */

  /* 深黄：凡是「压着文字」或「小字号」的地方必须用它，否则会读不清。
     色相 58°（比纯黄更偏正黄）、对白底 4.50:1。
     用在：白字实色块（刷新最高分横幅 / 按钮按下态）、14px 小字（规则区色块）、
           模式卡描边与选中色条、答题按钮 ✗ 图标。 */
  --ln-yellow-deep:  #7d7a12;

  /* 字体 */
  --ln-font-display: 'JetBrains Mono', 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  --ln-font-body:    'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* 间距 & 圆角（替代 14px / 24px 圆角色块） */
  --ln-radius-sm: 4px;
  --ln-radius:    6px;
  --ln-radius-pill: 999px;
}

.lightning-page {
  background: var(--ln-bg);
  min-height: 100vh;
  color: var(--ln-text);
  font-family: var(--ln-font-body);
  position: relative;
  overflow-x: hidden;
}
/* 整页扫描线纹理（极淡，不抢内容） */
.lightning-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(10, 14, 26, 0.015) 3px,
    rgba(10, 14, 26, 0.015) 4px
  );
  z-index: 0;
}
/* 必须保留 position: relative（不设 z-index）：
   - 有了 relative，本容器与整页扫描线 .lightning-page::before 同属「z-index:0/auto
     的定位后代」绘制层，按树序先后绘制 → ::before 在前、内容在后，扫描线仍在内容之下。
   - 但**不能**给 z-index：一旦赋值就生成层叠上下文，把内部 .ln-result-newbest 的
     z-index:100 困在局部上下文里，真实层级退化为 1 < 顶栏 .topbar 的 90，
     「刷新历史最高分」横幅会被顶栏整条盖住（elementFromPoint 命中的是 nav-item）。
   不设 z-index 时本容器不生成层叠上下文，横幅的 100 得以在根上下文与顶栏 90 正常比较。 */
.ln-shell { position: relative; }

/* ===== 通用容器 ===== */
.ln-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

/* ===== 视图切换 ===== */
.ln-view { display: block; }
.ln-view[hidden] { display: none; }

/* ===== 首页 ===== */
.ln-home { text-align: left; }

/* —— 电涌条（替代原来的浅灰 eyebrow 胶囊） —— */
.ln-bolt-bar {
  display: flex;
  align-items: center;
  height: 4px;
  width: 100%;
  margin-bottom: 28px;
  border-radius: var(--ln-radius-pill);
  overflow: hidden;
  background: rgba(10, 14, 26, 0.05);
}
.ln-bolt-bar__seg {
  flex: 1;
  height: 100%;
  opacity: 0.85;
}
.ln-bolt-bar__seg--r { background: var(--ln-red); }
.ln-bolt-bar__seg--b { background: var(--ln-blue); }
.ln-bolt-bar__seg--g { background: var(--ln-green); }
.ln-bolt-bar__seg--y { background: var(--ln-yellow); }
.ln-bolt-bar__spark {
  position: relative;
  height: 4px;
  width: 24px;
  margin-left: -24px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  filter: blur(0.5px);
  animation: ln-bolt 3s linear infinite;
}
@keyframes ln-bolt {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(calc(100vw + 24px)); }
}

/* —— Hero 区 —— */
.ln-hero { margin-bottom: 36px; }
.ln-hero-title {
  font-family: var(--ln-font-body);
  font-size: 96px;
  font-weight: 900;
  margin: 0 0 8px;
  color: var(--ln-text);
  letter-spacing: -0.04em;
  line-height: 1;
  position: relative;
  display: inline-block;
}
/* 标题下方的电涌下划线：4px 高，颜色在 4 游戏中跳动 */
.ln-hero-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 14px;
  background: var(--ln-red);
  animation: ln-bolt-color 6s steps(4, end) infinite;
}
@keyframes ln-bolt-color {
  0%, 25%      { background: var(--ln-red); }
  25.01%, 50%  { background: var(--ln-blue); }
  50.01%, 75%  { background: var(--ln-green); }
  75.01%, 100% { background: var(--ln-yellow); }
}
.ln-hero-sub {
  font-family: var(--ln-font-display);
  font-size: 13px;
  color: var(--ln-text-dim);
  margin: 18px 0 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* —— 模式选择（卡片式：每种模式一个独立卡片容器） ——
   原来是无边框 tab 列表（gap:0 + 底部 1px 分隔线 + 4px 下划线选中态），
   两个模式之间几乎没有视觉边界，区分度弱。改为卡片后每张卡自带
   边框 / 底色 / 圆角，选中态用「主题色描边 + 主题色底纹 + 底部色条」三重强化。 */
.ln-mode-picker {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin: 30px 0 34px;
  /* overflow-x: auto 时，另一轴的 visible 会被计算成 auto（CSS 规范），
     卡片描边/圆角会溢出容器下沿 → scrollHeight 多出 1~2px → 右侧冒出竖向滚动条。
     显式声明 overflow-y: hidden 消掉它，横向滚动（窄屏放不下两张卡）仍保留。 */
  overflow-x: auto;
  overflow-y: hidden;
}
/* 每种模式一个强调色，选中态统一消费 --ln-mode-accent
   计时模式的 data-mode 形如 "time:60" / "time:90"（时长编进标识），
   所以用 ^= 前缀匹配，新增时长无需再改 CSS。 */
.ln-mode[data-mode^="time"] { --ln-mode-accent: var(--ln-blue); }
.ln-mode[data-mode="count"]  { --ln-mode-accent: var(--ln-yellow-deep); }
.ln-mode {
  position: relative;
  /* flex-basis: 0 让三张卡从 0 开始等比增长 → 等宽卡片；
     若用 auto 则按内容宽度分配，会出现不等宽的错位观感。
     min-width 兜底：窄屏时各自不低于 200px，触发容器横向滚动。 */
  flex: 1 1 0;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--ln-text-dim);
  padding: 18px 20px 20px;
  background: var(--ln-surface);
  border: 1px solid var(--ln-border);
  border-radius: var(--ln-radius);
  /* 让底部色条跟随圆角裁切，避免与卡片圆角打架 */
  overflow: hidden;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
/* 选中态色条：贴在卡片底边内侧 */
.ln-mode::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: transparent;
  transition: background 0.12s ease;
}
.ln-mode:hover { color: var(--ln-text); border-color: var(--ln-border-strong); }
.ln-mode.is-active {
  color: var(--ln-text);
  border-color: var(--ln-mode-accent);
  /* 主题色 7% 淡淡铺底：既区别于未选中的灰卡，也区别于纯白页面底 */
  background: color-mix(in srgb, var(--ln-mode-accent) 7%, var(--ln-bg));
}
.ln-mode.is-active::after { background: var(--ln-mode-accent); }
/* outline-offset 取负值：焦点环画在卡片内侧，不会被容器的 overflow 裁掉 */
.ln-mode:focus-visible {
  outline: 2px solid var(--ln-mode-accent);
  outline-offset: -3px;
}
.ln-mode-name {
  font-family: var(--ln-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ln-mode-desc {
  font-size: 14px;
  color: var(--ln-text-mute);
  line-height: 1.4;
}
.ln-mode.is-active .ln-mode-desc { color: var(--ln-text-dim); }

.ln-home-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 24px 0 12px;
}

/* —— 按钮：方角 6px，hover 白色电涌 —— */
.ln-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--ln-radius);
  font-family: var(--ln-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.08s ease, color 0.08s ease, border-color 0.12s ease;
  border: 1px solid transparent;
  user-select: none;
  -webkit-user-select: none;
}
.ln-btn-primary {
  background: var(--ln-btn-primary-bg);
  color: var(--ln-btn-primary-fg);
  border-color: var(--ln-btn-primary-border);
}
.ln-btn-primary:hover { background: var(--ln-green); color: var(--ln-on-accent); border-color: var(--ln-green); }
.ln-btn-primary:active { background: var(--ln-yellow-deep); border-color: var(--ln-yellow-deep); }
.ln-btn-ghost {
  background: transparent;
  color: var(--ln-text-dim);
  border-color: var(--ln-border);
  padding: 6px 0;
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.ln-btn-ghost:hover { color: var(--ln-text); border-color: var(--ln-border-strong); }
.ln-btn-ghost-sm {
  background: transparent;
  color: var(--ln-text-dim);
  border-color: var(--ln-border);
  padding: 6px 12px;
  font-size: 12px;
}
.ln-btn-ghost-sm:hover { color: var(--ln-text); border-color: var(--ln-border-strong); }

/* —— 历史最高：等宽读数面板 —— */
.ln-best {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 28px;
  border: 1px solid var(--ln-border);
  border-radius: var(--ln-radius);
  background: var(--ln-surface);
}
.ln-best__cell {
  padding: 22px 24px;
  border-right: 1px solid var(--ln-border);
}
.ln-best__cell:last-child { border-right: 0; }
.ln-best__label {
  font-family: var(--ln-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ln-text-mute);
  margin-bottom: 10px;
}
.ln-best__value {
  font-family: var(--ln-font-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--ln-text);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ln-best__unit {
  font-family: var(--ln-font-display);
  font-size: 14px;
  color: var(--ln-text-dim);
  margin-left: 6px;
  letter-spacing: 0.05em;
}
@media (max-width: 520px) {
  .ln-best__value { font-size: 36px; }
}

/* ===== 对局页 ===== */

/* —— HUD：三个等宽读数格 + 中间时间进度条 —— */
.ln-play-top {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: stretch;
  gap: 0;
  margin-bottom: 28px;
  border: 1px solid var(--ln-border);
  border-radius: var(--ln-radius);
  background: var(--ln-surface);
  overflow: hidden;
}
.ln-stat {
  background: transparent;
  border: 0;
  padding: 14px 18px;
  font-family: var(--ln-font-display);
  color: var(--ln-text);
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--ln-border);
}
.ln-stat:last-of-type { border-right: 0; }
.ln-stat__label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ln-text-mute);
  margin-bottom: 6px;
}
.ln-stat__value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ln-progress-cell {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 200px;
  border-right: 1px solid var(--ln-border);
}
.ln-progress-cell__label {
  font-family: var(--ln-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ln-text-mute);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.ln-progress-cell__label b { color: var(--ln-text); font-weight: 700; }
.ln-progress-cell__bar {
  position: relative;
  height: 4px;
  background: rgba(10, 14, 26, 0.08);
  border-radius: var(--ln-radius-pill);
  overflow: hidden;
}
.ln-progress-cell__fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: var(--ln-blue);
  transform-origin: left;
  transition: transform 0.12s linear, background 0.2s ease;
}
.ln-progress-cell__fill.is-warn { background: var(--ln-red); animation: ln-pulse-warn 0.6s ease infinite; }
@keyframes ln-pulse-warn {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.ln-play-top__exit {
  align-self: center;
  padding: 0 18px;
  border-left: 1px solid var(--ln-border);
}

/* +10 上飘动效 */
.ln-float {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ln-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--ln-green);
  pointer-events: none;
  opacity: 0;
  animation: ln-float-up 0.7s ease forwards;
}
@keyframes ln-float-up {
  0%   { opacity: 0; transform: translate(-50%, -10%); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -160%); }
}

/* —— 刺激区（去边框 / 280px / 等高线背景 / 色带） —— */
.ln-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0 36px;
  min-height: 380px;
  overflow: hidden;
}
/* 等高线同心多边形（仅舞台区） */
.ln-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-radial-gradient(
      circle at center,
      transparent 0,
      transparent 36px,
      rgba(10, 14, 26, 0.04) 36px,
      rgba(10, 14, 26, 0.04) 37px
    );
  opacity: 0.6;
  transition: transform 0.4s ease;
  animation: ln-stage-drift 8s linear infinite;
  pointer-events: none;
}
@keyframes ln-stage-drift {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.ln-card {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  position: relative;
  transition: none;
}
.ln-word {
  font-size: 280px;
  font-weight: 900;
  line-height: 1;
  font-family: var(--ln-font-body);
  user-select: none;
  -webkit-user-select: none;
  letter-spacing: -0.05em;
  color: var(--ln-text); /* 默认白，由 JS 写入字色 */
}
/* 原 .ln-word::after 色带（字下方 2px、宽 80%、background: currentColor）已移除：
   它用 currentColor 跟随字色，在白底上与 280px 主文字贴合，观感上像一道横杠压住字脚。
   连同 @keyframes ln-bolt-color 之外的引用一并清掉，避免留死规则。 */
/* 答对：字色 → 白色饱和 → 字色 */
.ln-card.is-correct .ln-word {
  animation: ln-hit 0.18s ease;
}
@keyframes ln-hit {
  0%   { filter: brightness(1) saturate(1); }
  50%  { filter: brightness(1.8) saturate(1.4); }
  100% { filter: brightness(1) saturate(1); }
}
/* 答错：字色 → 白色 → 字色 + 扫描线划过 */
.ln-card.is-wrong {
  position: relative;
}
.ln-card.is-wrong .ln-word { animation: ln-fault 0.24s ease; }
.ln-card.is-wrong::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ln-red), transparent);
  animation: ln-scan 0.24s ease;
  pointer-events: none;
}
@keyframes ln-fault {
  0%   { color: var(--ln-red); }
  50%  { color: var(--ln-text); }
  100% { color: var(--ln-red); }
}
@keyframes ln-scan {
  0%   { transform: translateY(-30px); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(30px); opacity: 0; }
}
@media (max-width: 520px) {
  .ln-word { font-size: 200px; }
  .ln-stage { min-height: 300px; }
}

/* —— 判定区：左右分屏全宽条 —— */
.ln-choices {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  height: 96px;
  border: 1px solid var(--ln-border);
  border-radius: var(--ln-radius);
  overflow: hidden;
  background: var(--ln-surface);
}
/* 必须显式落位（grid-area），不能只写 grid-column:
   ::before 是盒树里的首个子项，自动放置游标会先被它带到第 2 列，
   随后「一致」被挤到 (1,3)、「不一致」被挤到 (2,1)，
   而本容器 height 固定 + overflow:hidden → 第 2 行的「不一致」被整条裁掉看不见。 */
.ln-choices::before {
  content: '';
  grid-area: 1 / 2;
  background: var(--ln-border-strong);
}
.ln-choice-match { grid-area: 1 / 1; }
.ln-choice-diff  { grid-area: 1 / 3; }
.ln-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 16px;
  font-family: var(--ln-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  user-select: none;
  -webkit-user-select: none;
  background: transparent;
  color: var(--ln-text-dim);
  transition: background 0.08s ease, color 0.08s ease;
}
.ln-choice:hover { color: var(--ln-text); }
.ln-choice:active { background: rgba(10, 14, 26, 0.06); }
.ln-choice-match:active { background: var(--ln-green); color: var(--ln-on-accent); }
.ln-choice-diff:active  { background: var(--ln-yellow-deep); color: var(--ln-on-accent); }
.ln-choice-ico {
  font-family: var(--ln-font-body);
  font-size: 22px;
  font-weight: 900;
}
.ln-choice-match .ln-choice-ico { color: var(--ln-green); }
.ln-choice-diff  .ln-choice-ico { color: var(--ln-yellow-deep); }
.ln-choice:active .ln-choice-ico { color: inherit; }
@media (max-width: 520px) {
  .ln-choices { height: 80px; }
  .ln-choice  { font-size: 15px; letter-spacing: 0.1em; }
}

/* ===== 3 秒倒计时（环形进度 + 颜色映射） ===== */
.ln-countdown {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 50;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ln-countdown[hidden] { display: none; }
.ln-countdown-ring {
  position: relative;
  width: 240px;
  height: 240px;
}
.ln-countdown-ring svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.ln-countdown-ring__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 4;
}
.ln-countdown-ring__fill {
  fill: none;
  stroke-width: 4;
  stroke-linecap: butt;
  transition: stroke 0.2s ease, stroke-dashoffset 0.18s linear;
}
.ln-countdown-ring__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ln-font-display);
  font-size: 96px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ln-overlay-text);
}
.ln-countdown-ring__num--go {
  font-size: 64px;
  letter-spacing: 0.1em;
}
.ln-countdown-hint {
  font-family: var(--ln-font-display);
  font-size: 12px;
  color: var(--ln-overlay-text-dim);
  margin-top: 28px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ln-countdown-skip {
  margin-top: 24px;
  padding: 8px 18px;
  background: transparent;
  border: 1px solid var(--ln-border-strong);
  color: var(--ln-overlay-text-dim);
  border-radius: var(--ln-radius);
  font-family: var(--ln-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
  user-select: none;
  -webkit-user-select: none;
}
.ln-countdown-skip:hover { color: var(--ln-overlay-text); border-color: var(--ln-overlay-text); }

/* ===== 结算页 ===== */
.ln-result { text-align: left; }
.ln-result-title {
  font-family: var(--ln-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ln-text-dim);
  margin: 0 0 28px;
}
.ln-result-score {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.ln-result-score__num {
  font-family: var(--ln-font-display);
  font-size: 144px;
  font-weight: 700;
  line-height: 1;
  color: var(--ln-text);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.ln-result-score__max {
  font-family: var(--ln-font-display);
  font-size: 14px;
  color: var(--ln-text-mute);
  letter-spacing: 0.08em;
}
.ln-result-score__bar {
  position: relative;
  height: 2px;
  width: 200px;
  background: rgba(10, 14, 26, 0.08);
  border-radius: var(--ln-radius-pill);
  overflow: hidden;
}
.ln-result-score__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--ln-green);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.6s ease;
}
.ln-result-mode {
  font-family: var(--ln-font-display);
  font-size: 11px;
  color: var(--ln-text-mute);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 14px 0 28px;
}
.ln-result-card {
  border: 1px solid var(--ln-border);
  border-radius: var(--ln-radius);
  background: var(--ln-surface);
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.ln-result-stat {
  padding: 22px 18px;
  border-right: 1px solid var(--ln-border);
  text-align: left;
}
.ln-result-stat:last-child { border-right: 0; }
.ln-result-stat__label {
  display: block;
  font-family: var(--ln-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ln-text-mute);
  margin-bottom: 10px;
}
.ln-result-stat__value {
  display: block;
  font-family: var(--ln-font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--ln-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ln-result-stat__unit {
  font-family: var(--ln-font-display);
  font-size: 12px;
  color: var(--ln-text-dim);
  margin-left: 4px;
  letter-spacing: 0.05em;
}
@media (max-width: 520px) {
  .ln-result-score__num { font-size: 96px; }
  .ln-result-card { grid-template-columns: 1fr; }
  .ln-result-stat { border-right: 0; border-bottom: 1px solid var(--ln-border); }
  .ln-result-stat:last-child { border-bottom: 0; }
}
.ln-result-newbest {
  position: fixed;
  top: 0; left: 0; right: 0;
  margin: 0;
  padding: 10px 16px;
  text-align: center;
  font-family: var(--ln-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ln-on-accent);
  background: var(--ln-yellow-deep);
  transform: translateY(-100%);
  animation: ln-newbest 1.6s ease forwards;
  pointer-events: none;
  z-index: 100;
}
@keyframes ln-newbest {
  0%   { transform: translateY(-100%); }
  10%  { transform: translateY(0); }
  80%  { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
/* ===== 结算页：汇总 + 逐题明细 =====
   明细为高密度表格（不用卡片流），限高滚动以兼容计时模式 40~80+ 行。 */
.ln-result-extra { margin-bottom: 28px; }
.ln-result-extra[hidden] { display: none; }

/* —— 汇总条 —— */
.ln-sum {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ln-border);
  border-radius: var(--ln-radius);
  background: var(--ln-surface);
  overflow: hidden;
  margin-bottom: 14px;
}
.ln-sum[hidden] { display: none; }
.ln-sum-cell {
  padding: 14px 16px;
  border-right: 1px solid var(--ln-border);
}
.ln-sum-cell:last-child { border-right: 0; }
.ln-sum-label {
  display: block;
  font-family: var(--ln-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ln-text-mute);
  margin-bottom: 6px;
}
.ln-sum-value {
  font-family: var(--ln-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ln-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ln-sum-unit {
  font-size: 11px;
  font-weight: 500;
  color: var(--ln-text-dim);
  margin-left: 4px;
}

/* —— 明细表 —— */
.ln-detail {
  border: 1px solid var(--ln-border);
  border-radius: var(--ln-radius);
  background: var(--ln-surface);
  overflow: hidden;
}
.ln-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ln-border);
}
.ln-detail-title {
  font-family: var(--ln-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ln-text-dim);
}
.ln-detail-title b { color: var(--ln-text); font-weight: 700; }
.ln-detail-toggle {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--ln-border-strong);
  border-radius: var(--ln-radius-sm);
  font-family: var(--ln-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ln-text-dim);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.ln-detail-toggle:hover { color: var(--ln-text); border-color: var(--ln-text-dim); }
.ln-detail-scroll {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ln-detail-scroll[hidden] { display: none; }
.ln-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ln-detail-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ln-surface);
  border-bottom: 1px solid var(--ln-border-strong);
  padding: 8px 12px;
  text-align: left;
  font-family: var(--ln-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ln-text-mute);
  white-space: nowrap;
}
.ln-detail-table th:first-child,
.ln-detail-table td:first-child { padding-left: 16px; width: 44px; }
.ln-detail-table th:last-child,
.ln-detail-table td:last-child { padding-right: 16px; text-align: right; }
.ln-tr td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--ln-border);
  color: var(--ln-text-dim);
  white-space: nowrap;
}
.ln-tr:last-child td { border-bottom: 0; }
/* 对/错行左侧色条 */
.ln-tr td:first-child { border-left: 3px solid transparent; }
.ln-tr.is-ok td:first-child { border-left-color: var(--ln-green); }
.ln-tr.is-no td:first-child { border-left-color: var(--ln-red); }
.ln-tr.is-no { background: color-mix(in srgb, var(--ln-red) 5%, var(--ln-surface)); }
.ln-tr:hover td { background: rgba(10, 14, 26, 0.04); }
.ln-tr:hover.is-no td { background: color-mix(in srgb, var(--ln-red) 9%, var(--ln-surface)); }
.ln-td-num {
  font-family: var(--ln-font-display);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ln-td-word { color: var(--ln-text) !important; font-weight: 600; }
/* 「题目」列的色块：直观还原 Stroop 字色冲突 */
.ln-chip {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-left: 7px;
  vertical-align: middle;
  border: 1px solid var(--ln-border-strong);
}
.ln-td-choice.is-ok { color: var(--ln-green); }
.ln-td-choice.is-no { color: var(--ln-red); }
.ln-td-num.is-gain { color: var(--ln-green); font-weight: 700; }
.ln-td-num.is-zero { color: var(--ln-text-mute); }

/* ===== 历史回看（首页） ===== */
.ln-history {
  position: relative;
  border: 1px solid var(--ln-border);
  border-radius: var(--ln-radius);
  background: var(--ln-surface);
  overflow: hidden;
  margin: 0 0 28px;
}
/* 与配置卡一致的标题左侧色条 */
.ln-history::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--ln-green);
}
.ln-history[hidden] { display: none; }
.ln-history-list { display: block; }
.ln-history-item { border-bottom: 1px solid var(--ln-border); }
.ln-history-item:last-child { border-bottom: 0; }
.ln-history-summary {
  display: grid;
  grid-template-columns: 104px 1fr auto auto 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  color: var(--ln-text-dim);
  transition: background 0.12s ease, color 0.12s ease;
}
.ln-history-summary:hover { background: rgba(10, 14, 26, 0.04); color: var(--ln-text); }
.ln-h-time { font-family: var(--ln-font-display); font-size: 12px; color: var(--ln-text-mute); }
.ln-h-mode { color: var(--ln-text); }
.ln-h-score,
.ln-h-acc { font-family: var(--ln-font-display); font-variant-numeric: tabular-nums; }
.ln-h-score { font-weight: 700; color: var(--ln-text); }
.ln-h-arrow { transition: transform 0.15s ease; text-align: center; }
.ln-history-item.is-open .ln-h-arrow { transform: rotate(180deg); }
.ln-history-item.is-open > .ln-history-summary { background: rgba(10, 14, 26, 0.04); }
.ln-history-detail { border-top: 1px solid var(--ln-border); }
.ln-history-detail .ln-detail-scroll { max-height: 300px; }

@media (max-width: 720px) {
  .ln-sum { grid-template-columns: repeat(2, 1fr); }
  .ln-sum-cell:nth-child(2n) { border-right: 0; }
  .ln-history-summary { grid-template-columns: 1fr auto 18px; row-gap: 4px; }
  .ln-h-acc { display: none; }
}

.ln-result-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ===== 配置区（游戏规则 + 设置，内嵌平铺） =====
   原本是「游戏规则」「设置」两个按钮 + 各自的 fixed 弹窗。
   现改为直接嵌在首页流里：删除按钮与弹窗，内容平铺展示，
   样式沿用弹窗的卡片语言（surface 底 + 描边 + 圆角 + 标题左侧色条），
   但不再有遮罩 / 毛玻璃 / 居中浮层。 */
.ln-config {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
  align-items: start;
  margin: 4px 0 28px;
}
.ln-config-card {
  position: relative;
  background: var(--ln-surface);
  border: 1px solid var(--ln-border);
  border-radius: var(--ln-radius);
  overflow: hidden;
}
/* 标题左侧色条（沿用弹窗做法） */
.ln-config-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--ln-blue);
}
.ln-config-card--settings::before { background: var(--ln-yellow); }
.ln-config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px 24px;
  border-bottom: 1px solid var(--ln-border);
}
.ln-config-title {
  margin: 0;
  font-family: var(--ln-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ln-text);
}
.ln-config-body {
  padding: 18px 24px 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ln-text-dim);
}
.ln-config-body p { margin: 0 0 10px; }
.ln-config-body p:last-child { margin-bottom: 0; }
.ln-config-body b { color: var(--ln-text); font-weight: 600; }
/* 规则区的颜色词示例：色值统一走 token，避免在 HTML 里再硬编码一份导致主题漂移 */
.ln-config-body .ln-sw-r { color: var(--ln-red); }
.ln-config-body .ln-sw-b { color: var(--ln-blue); }
.ln-config-body .ln-sw-g { color: var(--ln-green); }
.ln-config-body .ln-sw-y { color: var(--ln-yellow-deep); }
/* 判定图标沿用答题按钮的配色，和对局页保持一致 */
.ln-config-body .ln-ic-ok { color: var(--ln-green); font-weight: 900; }
.ln-config-body .ln-ic-no { color: var(--ln-yellow-deep); font-weight: 900; }
.ln-config-hint {
  color: var(--ln-text-mute);
  font-size: 12px;
  margin-top: 12px;
  font-family: var(--ln-font-display);
  letter-spacing: 0.08em;
}
.ln-config-body ul { margin: 10px 0 12px; padding-left: 20px; }
.ln-config-body li { margin: 5px 0; list-style: disc; }
.ln-config-body li::marker { color: var(--ln-text-mute); }
@media (max-width: 720px) {
  .ln-config { grid-template-columns: 1fr; }
}

/* ===== 开关 ===== */
.ln-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
}
.ln-toggle-label {
  font-size: 14px;
  color: var(--ln-text);
}
.ln-toggle input { display: none; }
.ln-toggle-switch {
  position: relative;
  width: 56px;
  height: 2px;
  background: var(--ln-border-strong);
  border-radius: var(--ln-radius-pill);
  transition: background 0.2s;
  flex-shrink: 0;
  margin-right: 12px;
}
.ln-toggle-switch::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 12px;
  height: 12px;
  background: var(--ln-control-thumb);
  border-radius: 50%;
  transform: translate(50%, -50%);
  transition: right 0.2s ease, background 0.2s ease;
}
.ln-toggle input:checked + .ln-toggle-switch {
  background: var(--ln-green);
}
.ln-toggle input:checked + .ln-toggle-switch::after {
  right: 100%;
  background: var(--ln-green);
  box-shadow: 0 0 8px rgba(46, 125, 50, 0.45);
}

/* ============================================================
   可访问性：前庭敏感用户动画适配
   - 移除 transform 装饰动画（电涌 / 答对脉冲 / 答错扫描 / 弹窗上滑 / +10 上飘 / 阶段背景旋转 / 标题电涌下划线变色）
   - 保留颜色/不透明度过渡（border / background / opacity / color）
   - 保留功能必需动画：
       * HUD 时间进度条（信息呈现）
       * 倒计时 SVG dashoffset 收缩（信息呈现）
       * 结算页分数进度条（信息呈现）
       * 开关 / 弹窗上滑的小幅位移（用很短的过渡）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* 1. 答对字色脉冲 — 关闭 */
  .ln-card.is-correct .ln-word { animation: none; }
  @keyframes ln-hit { from, to { filter: none; } }

  /* 2. 答错扫描线 — 关闭 */
  .ln-card.is-wrong::after,
  .ln-card.is-wrong .ln-word { animation: none; }
  @keyframes ln-fault { from, to { color: var(--ln-red); } }
  @keyframes ln-scan { from, to { transform: none; opacity: 0; } }

  /* 3. 刺激区背景多边形旋转 — 关闭 */
  .ln-stage::before { animation: none; }
  @keyframes ln-stage-drift { from, to { transform: none; } }

  /* 4. +10 上飘 — 立即消失，无位移 */
  .ln-float { display: none; }
  @keyframes ln-float-up { from, to { opacity: 0; transform: none; } }

  /* 5. "刷新最高分"对角线划过 — 改为静态 */
  .ln-result-newbest { animation: none; transform: translateY(0); }
  @keyframes ln-newbest { from, to { transform: none; } }

  /* 6. 顶部电涌条 + 标题电涌下划线颜色循环 — 关闭颜色变化 */
  .ln-bolt-bar__spark { animation: none; }
  .ln-hero-title::after { animation: none; }
  @keyframes ln-bolt { from, to { transform: none; } }
  @keyframes ln-bolt-color { from, to { background: var(--ln-red); } }

  /* 7. 全局保险：所有 animation 缩到 0.01ms（保留进度条 / SVG 收缩 / 开关） */
  *,
  *::before,
  *::after {
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}