/* ============================================================
   游戏机制（GI Mechanics）— Wiki 子页面专属样式
   依赖全局 style.css 的 CSS 变量（--text-primary 等）
   设计风格：深色 + 液态玻璃 + KaTeX 深色覆盖
   ============================================================ */

/* ----------------------------------------------------------
   1. KaTeX 深色主题覆盖
   ---------------------------------------------------------- */
.katex {
  color: var(--text-primary);
  font-size: 1.05em;
}

.katex .mord,
.katex .mbin,
.katex .mrel,
.katex .mopen,
.katex .mclose,
.katex .mpunct,
.katex .minner,
.katex .mord.text,
.katex .text .mord {
  color: inherit;
}

/* KaTeX 分数内部字体大小保持一致 */
.katex .mfrac {
  font-size: 1em;
}

/* KaTeX 错误回退 */
.katex--error {
  color: #ff6b6b !important;
}

/* ----------------------------------------------------------
   2. 主内容容器（宽屏自适应，两侧仅留少量空隙）
   ---------------------------------------------------------- */
.wiki-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--navbar-height) + 1.5rem) 2rem 4rem;
  min-height: 100vh;
  max-width: 100%;
  margin: 0 auto;
}

/* ----------------------------------------------------------
   3. 内容标签导航栏
   ---------------------------------------------------------- */
.wiki-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.4rem;
  margin-bottom: 2rem;
  border-radius: var(--radius-md);
}

.wiki-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast),
    background var(--transition-fast);
  user-select: none;
}

.wiki-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.wiki-tab.active {
  color: var(--accent);
  background: rgba(110, 168, 254, 0.12);
}

.wiki-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------
   4. 标签面板
   ---------------------------------------------------------- */
.wiki-panels {
  width: 100%;
  max-width: 100%;
}

.wiki-panel {
  display: none;
  width: 100%;
}

.wiki-panel.active {
  display: block;
}

/* 未实现面板占位 */
.wiki-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 2rem;
  text-align: center;
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.wiki-placeholder i {
  font-size: 2.5rem;
  color: var(--text-tertiary);
}

/* ----------------------------------------------------------
   5. 大板块标题
   ---------------------------------------------------------- */
.wiki-section {
  margin-bottom: 2rem;
}

.wiki-section-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  padding-left: 0.5rem;
  border-left: 3px solid var(--accent);
}

/* ----------------------------------------------------------
   6. Wiki 玻璃卡片
   ---------------------------------------------------------- */
.wiki-card {
  padding: 1.5rem 1.75rem;
  margin-bottom: 1rem;
}

.wiki-card:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25),
    var(--glass-inner-shadow);
  transform: translateY(-2px);
}

.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

/* 卡片内非标题文字统一白色 */
.wiki-card {
  color: #ffffff;
}

/* ----------------------------------------------------------
   7. 语义公式行（总伤算法，非 KaTeX）
   ---------------------------------------------------------- */
.formula-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem;
  font-size: 1.05rem;
  font-family: "Noto Sans SC", "KaTeX_Main", "Times New Roman", serif;
  line-height: 2.0;
  padding: 0.75rem 0.75rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0;
  margin: 0.35rem 0;
}

.formula-label {
  color: #ffffff;
}

.formula-op {
  color: #ffffff;
  margin: 0 0.1rem;
}

/* ----------------------------------------------------------
   8. 可点击乘区引用（虚线边框包裹）
   ---------------------------------------------------------- */
.multiplier-ref {
  color: #ffffff;
  cursor: pointer;
  font-weight: 500;
  border: 1px dashed var(--accent);
  transition: color var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    opacity var(--transition-fast);
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
}

.multiplier-ref:hover {
  color: #ffffff;
  border-color: var(--accent-hover);
  background: rgba(110, 168, 254, 0.1);
}

.multiplier-ref.expanded {
  color: #ffffff;
  background: rgba(110, 168, 254, 0.15);
  border-style: solid;
}

/* 锚点链接（角色等级系数） */
.ref-link {
  color: var(--accent);
  border-bottom: 1px dashed var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.ref-link:hover {
  color: var(--accent-hover);
}

/* ----------------------------------------------------------
   9. 乘区展开容器（淡入淡出动画）
   ---------------------------------------------------------- */
.multiplier-expand {
  max-height: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s ease,
    margin 0.25s ease,
    padding 0.25s ease;
  margin: 0;
  padding: 0 1rem;
  border-left: 2px solid var(--accent);
  background: rgba(110, 168, 254, 0.04);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.95rem;
  color: #ffffff;
  pointer-events: none;
}

.multiplier-expand.open {
  opacity: 1;
  margin: 0.75rem 0 0.5rem 0;
  padding: 1rem 1rem 1rem 1.25rem;
  pointer-events: auto;
}

.multiplier-expand .expand-title {
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.multiplier-expand .expand-subtitle {
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.multiplier-expand .expand-note {
  color: #ffffff;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  line-height: 1.65;
}

/* ----------------------------------------------------------
   10. KaTeX 公式容器
   ---------------------------------------------------------- */
.formula-katex {
  padding: 0.5rem 0;
  overflow-x: auto;
}

.formula-katex .katex-display {
  margin: 0.5rem 0;
}

/* ----------------------------------------------------------
   11. 公式注解（统一白色文字 + 图标前缀）
   ---------------------------------------------------------- */
.formula-note {
  font-size: 0.85rem;
  color: #ffffff;
  line-height: 1.65;
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--glass-border);
}

/* 所有注解前自动添加 info 图标 */
.formula-note::before {
  content: "\f05a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 0.35rem;
  color: var(--accent);
  font-size: 0.85em;
}

/* 展开内容中的注解也添加图标 */
.expand-note::before {
  content: "\f05a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 0.35rem;
  color: var(--accent);
  font-size: 0.85em;
}

/* ----------------------------------------------------------
   12. 响应式表格
   ---------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0.75rem 0;
}

.wiki-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.5;
}

.wiki-table th,
.wiki-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--glass-border);
  white-space: nowrap;
}

.wiki-table thead th {
  color: var(--accent);
  font-weight: 600;
  background: rgba(110, 168, 254, 0.06);
  position: sticky;
  top: 0;
}

.wiki-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* 等级系数双栏表（横向连续排列） */
.level-table th,
.level-table td {
  text-align: center;
}

.level-table td:first-child,
.level-table td:nth-child(3) {
  color: var(--text-secondary);
  font-weight: 500;
  width: 60px;
}

.level-table td:nth-child(2),
.level-table td:nth-child(4) {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* 双栏分隔线 */
.level-table td:nth-child(2) {
  border-right: 1px solid var(--glass-border);
}

.level-table thead th:nth-child(2) {
  border-right: 1px solid var(--glass-border);
}

/* ----------------------------------------------------------
   13. 附录折叠面板 + 动画
   ---------------------------------------------------------- */
.wiki-appendix {
  margin-top: 2rem;
}

.wiki-details {
  /* 继承 .glass 样式 */
}

/* details 内容包装器 — 用于动画 */
.wiki-details .table-scroll {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0;
  padding: 0 1.5rem;
}

.wiki-details[open] .table-scroll {
  max-height: 4000px;
  margin: 0;
  padding: 0 1.5rem 1.5rem;
}

.wiki-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.wiki-summary::-webkit-details-marker {
  display: none;
}

.wiki-summary::marker {
  display: none;
  content: "";
}

.wiki-summary .summary-hint {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-left: auto;
}

.wiki-summary i {
  color: var(--accent);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.wiki-details[open] .wiki-summary i {
  transform: rotate(90deg);
}

/* ----------------------------------------------------------
   14. 精通乘区子分区
   ---------------------------------------------------------- */
.em-sub {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--glass-border);
}

.em-sub:last-child {
  border-bottom: none;
}

.em-sub h4 {
  font-size: 0.95rem;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

/* ----------------------------------------------------------
   15. 内嵌公式行
   ---------------------------------------------------------- */
.formula-inline-katex {
  display: inline-flex;
  align-items: center;
  padding: 0 0.1rem;
}

/* ----------------------------------------------------------
   16. 页脚覆写：取消固定定位，跟随内容流
   ---------------------------------------------------------- */
.site-footer {
  position: static;
  margin-top: 3rem;
  padding: 1.5rem;
}

/* ----------------------------------------------------------
   17. 乘区公式（Section B）金色主题
   ---------------------------------------------------------- */
.section-gold .wiki-section-title {
  border-left-color: #d4a853;
}

.section-gold .card-title {
  color: #d4a853;
}

.section-gold .formula-line {
  border-left-color: #d4a853;
}

.section-gold .formula-note::before {
  color: #d4a853;
}

.section-gold .expand-note::before {
  color: #d4a853;
}

.section-gold .multiplier-expand {
  border-left-color: #d4a853;
}

.section-gold .multiplier-expand .expand-title {
  color: #d4a853;
}

.section-gold .wiki-table thead th {
  color: #d4a853;
}

.section-gold .multiplier-ref {
  color: #ffffff;
  border-color: #d4a853;
}

.section-gold .multiplier-ref:hover {
  color: #ffffff;
  border-color: #e0c070;
  background: rgba(212, 168, 83, 0.1);
}

.section-gold .multiplier-ref.expanded {
  color: #ffffff;
  background: rgba(212, 168, 83, 0.15);
}

/* ----------------------------------------------------------
   18. 响应式：平板端 (768px - 1024px)
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .wiki-main {
    padding: calc(var(--navbar-height) + 1rem) 1.25rem 3rem;
    max-width: 100%;
  }

  .wiki-panels {
    max-width: 100%;
  }

  .wiki-card {
    padding: 1.25rem;
  }

  .wiki-tab {
    font-size: 0.85rem;
    padding: 0.45rem 0.85rem;
  }

  .card-title {
    font-size: 1rem;
  }

  .wiki-section-title {
    font-size: 1.25rem;
  }

  .formula-line {
    font-size: 1rem;
  }
}

/* ----------------------------------------------------------
   19. 响应式：手机端 (< 768px)
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  /* 手机端降低根字号，避免整体过大（180% → 150%） */
  html {
    font-size: 24px;
  }

  .wiki-main {
    padding: 2rem 0.75rem 3rem;
  }

  .wiki-tabs {
    gap: 0.15rem;
    padding: 0.3rem;
    margin-bottom: 1.5rem;
  }

  .wiki-tab {
    font-size: 0.8rem;
    padding: 0.4rem 0.7rem;
    gap: 0.25rem;
  }

  .wiki-tab i {
    font-size: 0.75rem;
  }

  .wiki-card {
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
  }

  .wiki-section-title {
    font-size: 1.2rem;
  }

  .card-title {
    font-size: 0.85rem;
  }

  .formula-line {
    font-size: 0.82rem;
    line-height: 1.7;
  }

  .formula-note {
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .multiplier-expand {
    font-size: 0.82rem;
  }

  .multiplier-expand .expand-note {
    font-size: 0.78rem;
  }

  .wiki-summary {
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
  }

  .wiki-placeholder {
    padding: 2.25rem 1.5rem;
  }

  .wiki-table {
    font-size: 0.8rem;
  }

  /* 手机端页脚跟随内容流（防止重叠） */
  .site-footer {
    position: static !important;
    flex-direction: column;
    gap: 0.15rem;
  }

  .site-footer span:first-child::after {
    content: none;
  }
}

/* ----------------------------------------------------------
   20. 响应式：小屏手机 (< 400px)
   ---------------------------------------------------------- */
@media (max-width: 400px) {
  html {
    font-size: 22px;
  }

  .wiki-tab {
    font-size: 0.72rem;
    padding: 0.35rem 0.55rem;
  }

  .wiki-tab i {
    display: none;
  }

  .formula-line {
    font-size: 0.76rem;
  }

  .formula-note {
    font-size: 0.72rem;
  }

  .wiki-card {
    padding: 0.85rem;
  }

  .card-title {
    font-size: 0.8rem;
  }
}

/* ============================================================
   21. 附着与产球 — 元素颜色类（移植自 input.html）
   ============================================================ */
/* 火元素 */
.element-fire-weak   { color: #ff6b6b; font-weight: 600; }
.element-fire-strong { color: #e00;    font-weight: 600; }
.element-fire-super  { color: #8b0000; font-weight: 600; }

/* 水元素 */
.element-water-weak   { color: #4dabf7; font-weight: 600; }
.element-water-strong { color: #06c;    font-weight: 600; }
.element-water-super  { color: #003d7a; font-weight: 600; }

/* 雷元素 */
.element-thunder-weak   { color: #b197fc; font-weight: 600; }
.element-thunder-strong { color: #7950f2; font-weight: 600; }
.element-thunder-super  { color: #4c1d95; font-weight: 600; }

/* 冰元素 */
.element-ice-weak   { color: #a5f3fc; font-weight: 600; }
.element-ice-strong { color: #22d3ee; font-weight: 600; }
.element-ice-super  { color: #0891b2; font-weight: 600; }

/* 风元素 */
.element-wind-weak   { color: #a7f3d0; font-weight: 600; }
.element-wind-strong { color: #34d399; font-weight: 600; }
.element-wind-super  { color: #059669; font-weight: 600; }

/* 岩元素 */
.element-rock-weak   { color: #fde047; font-weight: 600; }
.element-rock-strong { color: #eab308; font-weight: 600; }
.element-rock-super  { color: #a16207; font-weight: 600; }

/* 草元素 */
.element-grass-weak   { color: #86efac; font-weight: 600; }
.element-grass-medium { color: #4ade80; font-weight: 600; }
.element-grass-strong { color: #16a34a; font-weight: 600; }
.element-grass-super  { color: #14532d; font-weight: 600; }

/* ============================================================
   22. 附着与产球 — 筛选栏 & 工具条
   ============================================================ */

/* 元素筛选栏 */
.aura-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}

.aura-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
  user-select: none;
}

.aura-filter-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.aura-filter-btn.active {
  color: #ffffff;
  background: rgba(110, 168, 254, 0.15);
  border-color: var(--accent);
}

.aura-filter-btn img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* 工具条 */
.aura-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.aura-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast),
    background var(--transition-fast);
  user-select: none;
  white-space: nowrap;
}

.aura-toggle-btn:hover {
  color: var(--text-primary);
  background: var(--glass-bg-hover);
}

.aura-toggle-btn i {
  transition: transform 0.25s ease;
}

.aura-toggle-btn.expanded i {
  transform: rotate(180deg);
}

/* 搜索栏 */
.aura-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  flex: 1;
  min-width: 180px;
  max-width: 360px;
}

.aura-search i {
  color: var(--text-tertiary);
  flex-shrink: 0;
  font-size: 0.85rem;
}

.aura-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text-primary);
  min-width: 0;
}

.aura-search input::placeholder {
  color: var(--text-tertiary);
}

/* ============================================================
   23. 附着与产球 — 角色卡片
   ============================================================ */

.aura-chars {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 角色卡片（默认折叠，使用 <details>） */
.aura-char-card {
  padding: 0;
  overflow: hidden;
}

.aura-char-card .char-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.aura-char-card .char-summary::-webkit-details-marker {
  display: none;
}

.aura-char-card .char-summary::marker {
  display: none;
  content: "";
}

.aura-char-card .char-summary i {
  color: var(--accent);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.aura-char-card[open] .char-summary i {
  transform: rotate(90deg);
}

/* 搜索高亮匹配 */
.aura-char-card.highlight {
  box-shadow: 0 0 0 2px var(--accent);
  border-color: var(--accent);
}

/* 角色技能表容器 */
.aura-char-card .table-scroll {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
}

.aura-char-table {
  width: 100%;
  min-width: 800px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* 列宽分配：技能 20% / 元素量 18% / 附着规则 18% / 产球 12% / 备注 20% / 抗打断 12% */
.aura-char-table th:nth-child(1),
.aura-char-table td:nth-child(1) { width: 20%; }

.aura-char-table th:nth-child(2),
.aura-char-table td:nth-child(2) { width: 18%; }

.aura-char-table th:nth-child(3),
.aura-char-table td:nth-child(3) { width: 18%; }

.aura-char-table th:nth-child(4),
.aura-char-table td:nth-child(4) { width: 12%; }

.aura-char-table th:nth-child(5),
.aura-char-table td:nth-child(5) { width: 20%; }

.aura-char-table th:nth-child(6),
.aura-char-table td:nth-child(6) { width: 12%; }

.aura-char-table th,
.aura-char-table td {
  padding: 0.45rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid var(--glass-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aura-char-table thead th {
  color: var(--accent);
  font-weight: 600;
  background: rgba(110, 168, 254, 0.06);
  position: sticky;
  top: 0;
  font-size: 0.82rem;
}

.aura-char-table tbody td {
  color: #ffffff;
}

.aura-char-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* 空数据显示 */
.aura-char-table td:empty::after,
.aura-char-table td[data-empty]::after {
  content: "\2014";
  color: var(--text-tertiary);
}

/* ============================================================
   24. 附着与产球 — 响应式
   ============================================================ */
@media (max-width: 768px) {
  .aura-filter {
    gap: 0.2rem;
    padding: 0.4rem 0.5rem;
  }

  .aura-filter-btn {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    gap: 0.2rem;
  }

  .aura-filter-btn img {
    width: 22px;
    height: 22px;
  }

  .aura-toolbar {
    gap: 0.5rem;
  }

  .aura-toggle-btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
  }

  .aura-search {
    padding: 0.35rem 0.65rem;
    max-width: 100%;
  }

  .aura-search input {
    font-size: 0.8rem;
  }

  .aura-char-card .char-summary {
    font-size: 0.9rem;
    padding: 0.7rem 1rem;
  }

  .aura-char-table {
    font-size: 0.78rem;
  }

  .aura-char-table th,
  .aura-char-table td {
    padding: 0.35rem 0.5rem;
  }

  /* 仅表体单元格允许换行，表头保持单行 */
  .aura-char-table tbody td {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-all;
  }
}

@media (max-width: 400px) {
  .aura-filter-btn span {
    display: none;
  }

  .aura-filter-btn {
    padding: 0.35rem;
  }

  .aura-filter-btn img {
    width: 26px;
    height: 26px;
  }

  .aura-char-table {
    font-size: 0.72rem;
  }
}

/* ============================================================
   25. 页面贡献者卡片
   ============================================================ */

.contributors {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  margin-bottom: 1.25rem;
  align-self: flex-start;
  width: auto;
}

.contributors-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.contributors-label i {
  color: var(--accent);
  margin-right: 0.25rem;
}

/* 头像容器（负责 3D 透视） */
.contributor-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.3s ease-out;
  transform-style: preserve-3d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.contributor-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

/* 昵称 Tooltip */
.contributor-avatar .avatar-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.contributor-avatar .avatar-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.85);
}

.contributor-avatar .avatar-tooltip.show {
  opacity: 1;
}

/* ============================================================
   26. 元素筛选按钮 — 专属边框色（激活态）
   ============================================================ */

.aura-filter-btn[data-element="fire"].active    { border-color: #FF9999; }
.aura-filter-btn[data-element="water"].active   { border-color: #80C0FF; }
.aura-filter-btn[data-element="thunder"].active { border-color: #FFACFF; }
.aura-filter-btn[data-element="ice"].active     { border-color: #99FFFF; }
.aura-filter-btn[data-element="wind"].active    { border-color: #80FFD7; }
.aura-filter-btn[data-element="rock"].active    { border-color: #FFE699; }
.aura-filter-btn[data-element="grass"].active   { border-color: #99FF88; }

/* ============================================================
   27. 元素分组切换
   ============================================================ */

.aura-element-group {
  /* 简洁切换，无过渡动画 */
}

/* 容器平滑过渡 */
#aura-chars {
  transition: min-height 0.2s ease;
}

@media (max-width: 768px) {
  .contributors-label {
    font-size: 0.78rem;
  }
  .contributor-avatar {
    width: 30px;
    height: 30px;
  }
}

/* ============================================================
   28. 充能计算器样式
   ============================================================ */

/* 贡献者一行：昵称 + 反馈说明 */
.ec-contrib-name {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}
.contributors-hint {
  flex: 1 1 100%;
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-tertiary);
}
.contributors-hint b { color: var(--accent); }

/* 布局：上排「配置信息」与「计算结果」并排且等高，
   中排是占满整行的吸收表，下排是高级设置 */
.ec-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  grid-template-areas:
    "config result"
    "absorb absorb"
    "adv adv";
  align-items: stretch;
  gap: 1rem;
  width: 100%;
}
.ec-config-col {
  grid-area: config;
  min-width: 0;
  display: flex;
}
/* 撑满所在网格区域，从而与右侧结果卡片等高 */
.ec-config-col > .wiki-card { flex: 1 1 auto; }
.ec-absorb {
  grid-area: absorb;
  min-width: 0;
}
.ec-adv {
  grid-area: adv;
  min-width: 0;
}

/* ---------- 微粒 / 晶球吸收表格 ---------- */
.ec-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -0.2rem;
  padding: 0 0.2rem;
}
.ec-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
}
.ec-table th,
.ec-table td {
  padding: 0.45rem 0.5rem;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--glass-border);
}
.ec-table thead th {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.ec-table .ec-th-group { border-bottom: 1px solid var(--glass-border-hover); }
.ec-table .ec-th-particle { color: #9CC7FF; }
.ec-table .ec-th-orb { color: #FFD780; }
/* 首列（吸收类型）：不给 sticky、也不用不透明底色 ——
   否则会与卡片的液态玻璃质感割裂，看起来像一条黑色边框 */
.ec-table tbody th[scope="row"] {
  text-align: left;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
}
.ec-table tbody tr:last-child th,
.ec-table tbody tr:last-child td { border-bottom: 0; }

/* 表格里的数字输入 */
.ec-table input[type="number"] {
  width: 4.6rem;
  padding: 0.3rem 0.35rem;
  text-align: center;
  font-family: inherit;
  font-size: 0.82rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.ec-table input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(110, 168, 254, 0.1);
}

/* 去掉数字框的原生上下箭头（12 个框都带箭头会很乱） */
.ec-table input[type="number"],
.ec-field-ctrl input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.ec-table input[type="number"]::-webkit-outer-spin-button,
.ec-table input[type="number"]::-webkit-inner-spin-button,
.ec-field-ctrl input[type="number"]::-webkit-outer-spin-button,
.ec-field-ctrl input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ec-note {
  margin: 0.6rem 0 0;
  font-size: 0.72rem;
  color: var(--text-tertiary);
}

/* ---------- 配置信息 / 高级设置的字段 ---------- */
.ec-config {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1rem;
}
/* 带滑动条的两项（所需能量、元素充能效率）各占一整行 */
.ec-config .ec-field-slider { grid-column: 1 / -1; }

.ec-adv-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem 1.4rem;
}
.ec-adv-body .ec-field-slider { grid-column: 1 / -1; }

.ec-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 0;
}
.ec-field-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.ec-field-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}
.ec-field-ctrl input[type="number"],
.ec-field-ctrl select {
  width: 6rem;
  padding: 0.32rem 0.5rem;
  font-family: inherit;
  font-size: 0.82rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.ec-field-ctrl input[type="number"]:focus,
.ec-field-ctrl select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(110, 168, 254, 0.1);
}
.ec-field-ctrl select option {
  background: #14161f;
  color: #fff;
}
.ec-unit {
  flex-shrink: 0;
  font-size: 0.74rem;
  color: var(--text-tertiary);
}

/* ---------- 吸收表里输入框右侧的上下按钮 ---------- */
.ec-spin {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.ec-spin-btns {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}
.ec-spin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 0.86rem;
  padding: 0;
  font-size: 0.48rem;
  line-height: 1;
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.ec-spin-btn:hover {
  color: #fff;
  background: rgba(110, 168, 254, 0.2);
  border-color: var(--accent);
}
.ec-spin-btn:active { transform: scale(0.92); }

/* 「标签 + 输入框」一行、滑动条在下方（所需能量 / 元素充能效率） */
.ec-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.ec-field-slider { display: block; }
/* 「期望风格」是标签在滑块上方，另外两项的标签在 .ec-field-row 里 */
.ec-field-slider > .ec-field-label {
  display: block;
  margin-bottom: 0.4rem;
}
.ec-field-row .ec-field-label {
  display: inline;
  margin-bottom: 0;
}
.ec-field-slider input[type="range"] {
  width: 100%;
  margin: 0.5rem 0 0;
  accent-color: var(--accent);
}
.ec-slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  font-size: 0.7rem;
  color: var(--text-tertiary);
}
.ec-slider-value {
  margin-top: 0.35rem;
  text-align: center;
  font-size: 0.78rem;
  color: #fff;
}

/* ---------- 右侧结果卡片 ---------- */
.ec-result {
  grid-area: result;
  min-width: 0;
  display: flex;
}
/* 撑满所在网格区域，从而与左侧配置信息等高 */
.ec-result-card {
  flex: 1 1 auto;
  padding: 1rem 1.1rem;
}
.ec-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.ec-result-head .card-title { margin-bottom: 0; }
.ec-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.55rem;
  font-family: inherit;
  font-size: 0.7rem;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.ec-reset:hover {
  color: #fff;
  border-color: var(--glass-border-hover);
}

/* 达标 / 未达标状态条 */
.ec-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.85rem 0;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}
.ec-result-card.is-pass .ec-status {
  color: #7BD88F;
  background: rgba(80, 200, 120, 0.14);
  border-color: rgba(80, 200, 120, 0.4);
}
.ec-result-card.is-fail .ec-status {
  color: #FF8A8A;
  background: rgba(255, 100, 100, 0.13);
  border-color: rgba(255, 100, 100, 0.38);
}

/* 结果行 */
.ec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--glass-border);
}
.ec-row-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.ec-row-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}
.ec-result-card.is-pass .ec-row:last-of-type .ec-row-value { color: #7BD88F; }
.ec-result-card.is-fail .ec-row:last-of-type .ec-row-value { color: #FF8A8A; }

/* 恢复进度条 */
.ec-bar {
  height: 0.4rem;
  margin-top: 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.ec-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width var(--transition-normal), background var(--transition-fast);
}
.ec-result-card.is-pass .ec-bar-fill { background: #7BD88F; }
.ec-result-card.is-fail .ec-bar-fill { background: #FF8A8A; }

/* ============================================================
   29. 充能计算 — 响应式
   ============================================================ */

/* 窄屏：改成单列纵向，结果卡片吸顶 */
@media (max-width: 1024px) {
  .ec-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "result"
      "config"
      "absorb"
      "adv";
  }
  .ec-result {
    position: sticky;
    top: var(--navbar-height, 60px);
    z-index: 5;
  }
  .ec-result-card { padding: 0.85rem 0.95rem; }
}

/* 手机端：吸收表改为卡片式（每个输入项自带标签），彻底不需要横向拖动 */
@media (max-width: 768px) {
  .ec-config,
  .ec-adv-body { grid-template-columns: minmax(0, 1fr); }

  .ec-table-scroll { overflow-x: visible; }
  .ec-table,
  .ec-table tbody,
  .ec-table tr,
  .ec-table th,
  .ec-table td { display: block; width: 100%; }
  .ec-table thead { display: none; }

  .ec-table tr {
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
  }
  .ec-table tr:last-child { margin-bottom: 0; padding-bottom: 0; }
  .ec-table tbody th[scope="row"] {
    padding: 0 0 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    border-bottom: 1px solid var(--glass-border);
  }
  .ec-table td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 0;
    text-align: left;
  }
  .ec-table td::before {
    content: attr(data-label);
    font-size: 0.76rem;
    color: var(--text-secondary);
  }
  .ec-spin { width: 100%; }
  .ec-spin input[type="number"] {
    flex: 1 1 auto;
    width: 100%;
    padding: 0.3rem 0.35rem;
    font-size: 0.78rem;
  }

  .ec-status { padding: 0.5rem 0.6rem; font-size: 0.9rem; }
  .ec-row-value { font-size: 0.88rem; }
  .contributors-hint { font-size: 0.7rem; }
}

@media (max-width: 400px) {
  .ec-spin input[type="number"] { font-size: 0.72rem; }
  .ec-field-ctrl input[type="number"],
  .ec-field-ctrl select { width: 5.2rem; font-size: 0.76rem; }
}

/* ----------------------------------------------------------
   附着与产球角色表格：保证每格内容完整可读
   表头字号适当减小以确保完整显示，单元格内容改为换行显示，
   不再用省略号截断。
   ---------------------------------------------------------- */
.aura-char-table {
  min-width: 820px;
}

.aura-char-table thead th {
  font-size: 0.74rem;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-overflow: clip;
  padding: 0.4rem 0.5rem;
}

.aura-char-table tbody td {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.45;
  padding: 0.45rem 0.5rem;
  vertical-align: top;
}