/* ============================================================
   Game Mechanics (GI Mechanics) — Wiki subpage styles
   Depends on the CSS variables from the global style.css (--text-primary, etc.)
   Design style: dark + liquid glass + KaTeX dark overrides
   ============================================================ */

/* ----------------------------------------------------------
   1. KaTeX dark theme overrides
   ---------------------------------------------------------- */
.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;
}

/* Keep the font size consistent inside KaTeX fractions */
.katex .mfrac {
  font-size: 1em;
}

/* KaTeX error fallback */
.katex--error {
  color: #ff6b6b !important;
}

/* ----------------------------------------------------------
   2. Main content container (fluid on wide screens, only a small gap on both sides)
   ---------------------------------------------------------- */
.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. Content tab navigation bar
   ---------------------------------------------------------- */
.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. Tab panels
   ---------------------------------------------------------- */
.wiki-panels {
  width: 100%;
  max-width: 100%;
}

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

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

/* Placeholder for unimplemented panels */
.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. Major section titles
   ---------------------------------------------------------- */
.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 glass card
   ---------------------------------------------------------- */
.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;
}

/* Non-heading text inside cards is uniformly white */
.wiki-card {
  color: #ffffff;
}

/* ----------------------------------------------------------
   7. Semantic formula line (total damage formula, not KaTeX)
   ---------------------------------------------------------- */
.formula-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem;
  font-size: 1.05rem;
  font-family: "Noto Sans", "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. Clickable multiplier reference (wrapped in a dashed border)
   ---------------------------------------------------------- */
.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;
}

/* Anchor links (character level multiplier) */
.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 container (fade-in/fade-out animation)
   ---------------------------------------------------------- */
.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 container
   ---------------------------------------------------------- */
.formula-katex {
  padding: 0.5rem 0;
  overflow-x: auto;
}

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

/* ----------------------------------------------------------
   11. Formula notes (uniform white text + icon prefix)
   ---------------------------------------------------------- */
.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);
}

/* Automatically add an info icon before every note */
.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;
}

/* Notes inside expandable content also get the icon */
.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. Responsive tables
   ---------------------------------------------------------- */
.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 multiplier two-column table (continuous horizontal layout) */
.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;
}

/* Two-column divider */
.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. Appendix collapsible panel + animation
   ---------------------------------------------------------- */
.wiki-appendix {
  margin-top: 2rem;
}

.wiki-details {
  /* Inherits the .glass styles */
}

/* details content wrapper — used for the animation */
.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. Mastery multiplier sub-sections
   ---------------------------------------------------------- */
.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. Inline formula line
   ---------------------------------------------------------- */
.formula-inline-katex {
  display: inline-flex;
  align-items: center;
  padding: 0 0.1rem;
}

/* ----------------------------------------------------------
   16. Footer override: remove fixed positioning, follow the content flow
   ---------------------------------------------------------- */
.site-footer {
  position: static;
  margin-top: 3rem;
  padding: 1.5rem;
}

/* ----------------------------------------------------------
   17. Multiplier formulas (Section B) gold theme
   ---------------------------------------------------------- */
.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. Responsive: tablet (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. Responsive: mobile (< 768px)
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  /* Reduce the root font size on mobile to keep everything from getting too large (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;
  }

  /* Footer follows the content flow on mobile (prevents overlap) */
  .site-footer {
    position: static !important;
    flex-direction: column;
    gap: 0.15rem;
  }

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

/* ----------------------------------------------------------
   20. Responsive: small mobile (< 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. Aura & particle generation — element color classes (ported from input.html)
   ============================================================ */
/* Pyro */
.element-fire-weak   { color: #ff6b6b; font-weight: 600; }
.element-fire-strong { color: #e00;    font-weight: 600; }
.element-fire-super  { color: #8b0000; font-weight: 600; }

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

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

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

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

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

/* Dendro */
.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 & particle generation — filter bar & toolbar
   ============================================================ */

/* Element filter bar */
.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;
}

/* Toolbar */
.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);
}

/* Search bar */
.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 & particle generation — character cards
   ============================================================ */

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

/* Character card (collapsed by default, uses <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);
}

/* Search highlight match */
.aura-char-card.highlight {
  box-shadow: 0 0 0 2px var(--accent);
  border-color: var(--accent);
}

/* Character skill table container */
.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;
}

/* Column widths: Skill 20% / Aura 18% / Attachment rule 18% / Particles 12% / Notes 20% / Interruption resistance 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);
}

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

/* ============================================================
   24. Aura & particle generation — responsive
   ============================================================ */
@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;
  }

  /* Only body cells may wrap; header cells stay on a single line */
  .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. Page contributors card
   ============================================================ */

.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;
}

/* Avatar container (responsible for the 3D perspective) */
.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%;
}

/* Nickname 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. Element filter buttons — dedicated border colors (active state)
   ============================================================ */

.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. Element group switching
   ============================================================ */

.aura-element-group {
  /* Plain switching, no transition animation */
}

/* Smooth transition for the container */
#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. Energy recharge calculator styles
   ============================================================ */

/* Contributors row: nickname + feedback note */
.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); }

/* Layout: the top row puts "Configuration" and "Results" side by side at equal height,
   the middle row is the absorption table spanning the full width, and the bottom row is the advanced settings */
.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;
}
/* Fill the enclosing grid area so it matches the height of the results card on the right */
.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;
}

/* ---------- Particle / orb absorption table ---------- */
.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; }
/* First column (absorption type): no sticky and no opaque background —
   otherwise it clashes with the card's liquid glass feel and looks like a black border */
.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; }

/* Number inputs inside the table */
.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);
}

/* Remove the native up/down spinners from number inputs (spinners on all 12 boxes would be messy) */
.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);
}

/* ---------- Fields for Configuration / Advanced settings ---------- */
.ec-config {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1rem;
}
/* The two slider entries (Energy Required, Energy Recharge) each take a full row */
.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);
}

/* ---------- Up/down buttons to the right of the inputs in the absorption table ---------- */
.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); }

/* "Label + input" on one row with the slider below (Energy Required / Energy Recharge) */
.ec-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.ec-field-slider { display: block; }
/* "Expected style" keeps its label above the slider; the other two keep their labels inside .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;
}

/* ---------- Results card on the right ---------- */
.ec-result {
  grid-area: result;
  min-width: 0;
  display: flex;
}
/* Fill the enclosing grid area so it matches the height of the configuration block on the left */
.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);
}

/* Pass / fail status bar */
.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);
}

/* Result rows */
.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; }

/* Recharge progress bar */
.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. Energy recharge — responsive
   ============================================================ */

/* Narrow screens: switch to a single vertical column with the results card sticking to the top */
@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; }
}

/* Mobile: the absorption table becomes card-style (each input carries its own label), so horizontal dragging is no longer needed */
@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 character table — keep every cell fully readable
   Headers use a smaller font so they always fit, and cells wrap
   instead of being clipped with an ellipsis.
   ---------------------------------------------------------- */
.aura-char-table {
  min-width: 860px;
}

.aura-char-table thead th {
  font-size: 0.7rem;
  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;
}