/* ============================================================
   Lovable-inspired design system for 布袋戏知识库
   - Cream paper background (#f7f4ed)
   - Charcoal text (#1c1c1c) with opacity-based grays
   - Borders > shadows
   - Humanist typeface (Inter + Noto Sans SC fallback)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600&display=swap');

/* ---------- CSS variable overrides (Material theme) ---------- */
:root,
[data-md-color-scheme="default"] {
  --md-default-bg-color: #f7f4ed;
  --md-default-fg-color: #1c1c1c;
  --md-default-fg-color--light: rgba(28, 28, 28, 0.82);
  --md-default-fg-color--lighter: rgba(28, 28, 28, 0.4);
  --md-default-fg-color--lightest: rgba(28, 28, 28, 0.04);

  --md-primary-fg-color: #f7f4ed;
  --md-primary-fg-color--light: #fcfbf8;
  --md-primary-fg-color--dark: #ebe7dd;
  --md-primary-bg-color: #1c1c1c;
  --md-primary-bg-color--light: rgba(28, 28, 28, 0.82);

  --md-accent-fg-color: #1c1c1c;
  --md-accent-fg-color--transparent: rgba(28, 28, 28, 0.1);
  --md-accent-bg-color: #fcfbf8;

  --md-typeset-color: #1c1c1c;
  --md-typeset-a-color: #1c1c1c;
  --md-typeset-mark-color: rgba(28, 28, 28, 0.1);

  --md-code-bg-color: #eceae4;
  --md-code-fg-color: #1c1c1c;

  --md-typeset-table-color: #eceae4;
  --md-footer-bg-color: #1c1c1c;
  --md-footer-bg-color--dark: rgba(28, 28, 28, 0.95);
  --md-footer-fg-color: #fcfbf8;
  --md-footer-fg-color--light: rgba(252, 251, 248, 0.7);
  --md-footer-fg-color--lighter: rgba(252, 251, 248, 0.45);

  /* Custom tokens */
  --bdx-cream: #f7f4ed;
  --bdx-cream-light: #fcfbf8;
  --bdx-charcoal: #1c1c1c;
  --bdx-offwhite: #fcfbf8;
  --bdx-border: #eceae4;
  --bdx-border-strong: rgba(28, 28, 28, 0.4);
  --bdx-muted: #5f5f5d;

  --bdx-button-shadow:
    rgba(255, 255, 255, 0.2) 0px 0.5px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px inset,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;

  --bdx-focus-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

/* Dark scheme tweaks (keep humanist, just invert) */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #1c1c1c;
  --md-default-fg-color: #f7f4ed;
  --md-default-fg-color--light: rgba(247, 244, 237, 0.82);
  --md-default-fg-color--lighter: rgba(247, 244, 237, 0.4);
  --md-default-fg-color--lightest: rgba(247, 244, 237, 0.06);

  --md-primary-fg-color: #1c1c1c;
  --md-primary-fg-color--light: rgba(28, 28, 28, 0.85);
  --md-primary-fg-color--dark: #0d0d0d;
  --md-primary-bg-color: #f7f4ed;

  --md-accent-fg-color: #f7f4ed;
  --md-typeset-a-color: #f7f4ed;

  --md-code-bg-color: rgba(247, 244, 237, 0.08);
  --md-code-fg-color: #f7f4ed;
  --md-typeset-table-color: rgba(247, 244, 237, 0.15);

  --bdx-cream: #1c1c1c;
  --bdx-cream-light: #2a2a2a;
  --bdx-charcoal: #f7f4ed;
  --bdx-offwhite: #1c1c1c;
  --bdx-border: rgba(247, 244, 237, 0.12);
  --bdx-border-strong: rgba(247, 244, 237, 0.4);
  --bdx-muted: rgba(247, 244, 237, 0.6);
}

/* ---------- Typography ---------- */
body,
.md-typeset,
.md-header,
.md-tabs,
.md-nav,
.md-search,
.md-footer,
input,
button {
  font-family: 'Inter', 'Noto Sans SC', ui-sans-serif, system-ui, -apple-system,
    'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-feature-settings: "ss01", "cv11";
}

body {
  background-color: var(--bdx-cream);
  color: var(--bdx-charcoal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.md-typeset {
  font-size: 0.85rem; /* 16px equivalent */
  line-height: 1.65;
  color: rgba(28, 28, 28, 0.83);
}

[data-md-color-scheme="slate"] .md-typeset {
  color: rgba(247, 244, 237, 0.83);
}

.md-typeset h1 {
  font-weight: 600;
  font-size: 2.0rem;
  line-height: 1.10;
  letter-spacing: -0.9px;
  color: var(--bdx-charcoal);
  margin: 0 0 1.5rem;
}

.md-typeset h2 {
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.4px;
  color: var(--bdx-charcoal);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bdx-border);
}

.md-typeset h3 {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.2px;
  color: var(--bdx-charcoal);
  margin-top: 1.75rem;
}

.md-typeset h4 {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--bdx-charcoal);
}

.md-typeset p {
  margin: 0.6em 0;
}

/* ---------- Header (top bar) ---------- */
.md-header {
  background-color: var(--bdx-cream);
  color: var(--bdx-charcoal);
  border-bottom: 1px solid var(--bdx-border);
  box-shadow: none;
}

[data-md-color-scheme="slate"] .md-header {
  background-color: var(--bdx-cream);
  border-bottom: 1px solid var(--bdx-border);
}

.md-header[data-md-state="shadow"] {
  box-shadow: none;
}

.md-header__title {
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--bdx-charcoal);
  font-size: 0.92rem;
}

.md-header__topic {
  color: var(--bdx-charcoal);
}

.md-header__button {
  color: var(--bdx-charcoal);
}

/* ---------- Tabs nav (under header) ---------- */
.md-tabs {
  background-color: var(--bdx-cream);
  color: var(--bdx-charcoal);
  border-bottom: 1px solid var(--bdx-border);
}

.md-tabs__link {
  color: var(--bdx-charcoal);
  opacity: 0.6;
  font-weight: 500;
  font-size: 0.78rem;
  margin-top: 0.7rem;
  transition: opacity 0.15s;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  color: var(--bdx-charcoal);
  opacity: 1;
}

/* ---------- Sidebar ---------- */
.md-sidebar {
  background-color: var(--bdx-cream);
}

.md-sidebar__scrollwrap {
  background-color: var(--bdx-cream);
}

.md-nav {
  font-size: 0.74rem;
}

.md-nav__title {
  font-weight: 600;
  color: var(--bdx-charcoal);
  background-color: var(--bdx-cream);
}

.md-nav__item {
  padding: 0;
}

.md-nav__link {
  color: rgba(28, 28, 28, 0.78);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  margin: 1px 0;
  transition: background-color 0.15s, color 0.15s;
}

[data-md-color-scheme="slate"] .md-nav__link {
  color: rgba(247, 244, 237, 0.78);
}

.md-nav__link:hover,
.md-nav__link:focus {
  color: var(--bdx-charcoal);
  background-color: rgba(28, 28, 28, 0.04);
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  background-color: rgba(247, 244, 237, 0.06);
}

.md-nav__link--active,
.md-nav__link--active:hover {
  color: var(--bdx-charcoal);
  font-weight: 500;
  background-color: rgba(28, 28, 28, 0.06);
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  background-color: rgba(247, 244, 237, 0.1);
}

/* TOC right sidebar */
.md-nav--secondary .md-nav__title {
  background-color: transparent;
  box-shadow: none;
}

/* ---------- Search ---------- */
.md-search__form {
  background-color: rgba(28, 28, 28, 0.04);
  border-radius: 8px;
  border: 1px solid var(--bdx-border);
}

.md-search__form:hover,
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: var(--bdx-cream-light);
  border-color: var(--bdx-border-strong);
}

.md-search__input {
  color: var(--bdx-charcoal);
}

.md-search__input::placeholder,
.md-search__icon[for="__search"] {
  color: var(--bdx-muted);
}

.md-search-result__meta {
  background-color: var(--bdx-cream);
  color: var(--bdx-muted);
}

.md-search-result__article {
  background-color: var(--bdx-cream);
}

.md-search-result__article:hover,
[data-md-state="active"].md-search-result__link {
  background-color: rgba(28, 28, 28, 0.04);
}

/* ---------- Links ---------- */
.md-typeset a {
  color: var(--bdx-charcoal);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(28, 28, 28, 0.4);
  transition: text-decoration-color 0.15s;
}

[data-md-color-scheme="slate"] .md-typeset a {
  color: var(--bdx-charcoal);
  text-decoration-color: rgba(247, 244, 237, 0.4);
}

.md-typeset a:hover {
  text-decoration-color: var(--bdx-charcoal);
}

/* ---------- Code ---------- */
.md-typeset code {
  background-color: rgba(28, 28, 28, 0.06);
  color: var(--bdx-charcoal);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.85em;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-md-color-scheme="slate"] .md-typeset code {
  background-color: rgba(247, 244, 237, 0.08);
}

.md-typeset pre > code {
  background-color: transparent;
  padding: 0;
}

.md-typeset pre {
  border: 1px solid var(--bdx-border);
  border-radius: 8px;
}

/* ---------- Tables ---------- */
.md-typeset table:not([class]) {
  background-color: var(--bdx-cream);
  border: 1px solid var(--bdx-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  background-color: rgba(28, 28, 28, 0.03);
  color: var(--bdx-charcoal);
  font-weight: 600;
  border: none;
  border-bottom: 1px solid var(--bdx-border);
}

.md-typeset table:not([class]) td {
  border: none;
  border-bottom: 1px solid var(--bdx-border);
}

.md-typeset table:not([class]) tr:last-child td {
  border-bottom: none;
}

/* ---------- Blockquote ---------- */
.md-typeset blockquote {
  border-left: 2px solid var(--bdx-border-strong);
  color: rgba(28, 28, 28, 0.78);
  padding-left: 1em;
  margin-left: 0;
}

[data-md-color-scheme="slate"] .md-typeset blockquote {
  color: rgba(247, 244, 237, 0.78);
}

/* ---------- HR ---------- */
.md-typeset hr {
  border-color: var(--bdx-border);
  margin: 2rem 0;
}

/* ---------- Buttons (.md-button) ---------- */
.md-typeset .md-button {
  background-color: var(--bdx-charcoal);
  color: var(--bdx-offwhite);
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-weight: 500;
  font-size: 0.85rem;
  text-decoration: none;
  box-shadow: var(--bdx-button-shadow);
  transition: opacity 0.15s, box-shadow 0.15s;
}

.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  opacity: 0.85;
  background-color: var(--bdx-charcoal);
  color: var(--bdx-offwhite);
  box-shadow: var(--bdx-button-shadow), var(--bdx-focus-shadow);
}

.md-typeset .md-button--secondary {
  background-color: transparent;
  color: var(--bdx-charcoal);
  border: 1px solid var(--bdx-border-strong);
  box-shadow: none;
}

.md-typeset .md-button--secondary:hover {
  background-color: rgba(28, 28, 28, 0.04);
  color: var(--bdx-charcoal);
  border-color: var(--bdx-charcoal);
  box-shadow: var(--bdx-focus-shadow);
}

/* ---------- Footer ---------- */
.md-footer {
  background-color: var(--bdx-charcoal);
}

.md-footer-meta {
  background-color: rgba(28, 28, 28, 0.95);
  font-size: 0.7rem;
}

.md-footer-meta__inner {
  padding: 0.6rem 0.8rem;
}

.md-footer__inner {
  padding: 1rem 0.8rem;
}

/* ---------- Page content ---------- */
.md-grid {
  max-width: 76rem;
}

.md-content {
  padding-top: 1rem;
}

.md-content__inner {
  margin: 0 1rem 1.5rem;
  padding-top: 0.5rem;
}

/* Edit button (top-right pencil icon) */
.md-content__button {
  color: var(--bdx-muted);
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0.45;
  transition: opacity 0.15s, color 0.15s;
}

.md-content__button:hover {
  color: var(--bdx-charcoal);
  opacity: 1;
  background-color: transparent !important;
}

.md-content__button svg {
  background-color: transparent !important;
}

/* ---------- Admonitions ---------- */
.md-typeset .admonition,
.md-typeset details {
  background-color: var(--bdx-cream-light);
  border: 1px solid var(--bdx-border);
  border-left: 3px solid var(--bdx-border-strong);
  border-radius: 8px;
  box-shadow: none;
  font-size: 0.78rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: rgba(28, 28, 28, 0.04);
  font-weight: 600;
  color: var(--bdx-charcoal);
}

/* ---------- Scrollbar ---------- */
.md-sidebar__scrollwrap::-webkit-scrollbar,
.md-search-result::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb,
.md-search-result::-webkit-scrollbar-thumb {
  background-color: rgba(28, 28, 28, 0.2);
  border-radius: 3px;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
  background-color: rgba(28, 28, 28, 0.35);
}

/* ============================================================
   Index page custom components
   Faction-themed visual identity:
     霹雳 (Pili)     — crimson    #a92330
     金光 (Jinguang) — gold       #a87b1f
     东离 (Dongli)   — slate blue #2a3856
   ============================================================ */

:root {
  --bdx-pili: #a92330;
  --bdx-pili-soft: #fef0ef;
  --bdx-pili-bg: linear-gradient(135deg, #fff5f3 0%, #fde8e6 100%);

  --bdx-jinguang: #a87b1f;
  --bdx-jinguang-soft: #faf3e0;
  --bdx-jinguang-bg: linear-gradient(135deg, #fdf8e9 0%, #f5e9c4 100%);

  --bdx-dongli: #2a3856;
  --bdx-dongli-soft: #e9ecf3;
  --bdx-dongli-bg: linear-gradient(135deg, #f0f2f8 0%, #dde2ee 100%);
}

[data-md-color-scheme="slate"] {
  --bdx-pili-soft: rgba(169, 35, 48, 0.15);
  --bdx-pili-bg: linear-gradient(135deg, rgba(169, 35, 48, 0.18) 0%, rgba(169, 35, 48, 0.08) 100%);
  --bdx-jinguang-soft: rgba(168, 123, 31, 0.15);
  --bdx-jinguang-bg: linear-gradient(135deg, rgba(168, 123, 31, 0.18) 0%, rgba(168, 123, 31, 0.08) 100%);
  --bdx-dongli-soft: rgba(140, 160, 200, 0.15);
  --bdx-dongli-bg: linear-gradient(135deg, rgba(140, 160, 200, 0.18) 0%, rgba(140, 160, 200, 0.08) 100%);
  --bdx-pili: #e26f7b;
  --bdx-jinguang: #d6a851;
  --bdx-dongli: #9aa9c8;
}

/* (旧规则会把所有页面的 H1 隐藏，已删除；首页本身没有自动 H1) */

/* ---------- Hero ---------- */
.bdx-hero {
  position: relative;
  margin: -0.5rem -1rem 2rem;
  padding: 3rem 1.5rem 2.8rem;
  border-radius: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--bdx-border);
  background: var(--bdx-cream);
}

.bdx-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 对称分布的三色光晕（红/金/蓝），中央汇聚 */
  background:
    radial-gradient(ellipse 45% 60% at 25% 50%, rgba(169, 35, 48, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 35% 55% at 50% 50%, rgba(168, 123, 31, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 45% 60% at 75% 50%, rgba(42, 56, 86, 0.10) 0%, transparent 65%);
}

[data-md-color-scheme="slate"] .bdx-hero__bg {
  background:
    radial-gradient(ellipse 45% 60% at 25% 50%, rgba(226, 111, 123, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 35% 55% at 50% 50%, rgba(214, 168, 81, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 45% 60% at 75% 50%, rgba(154, 169, 200, 0.18) 0%, transparent 65%);
}

.bdx-hero__inner {
  position: relative;
  max-width: 50rem;
  margin: 0 auto;
  text-align: center;
  /* 用 flex 列把每一项垂直居中堆叠，水平 align-items center */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bdx-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bdx-muted);
  margin: 0 auto 0.7rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--bdx-border);
  border-radius: 9999px;
  background-color: var(--bdx-cream-light);
}

.bdx-hero__title {
  font-size: 3.6rem;
  line-height: 1.05;
  letter-spacing: -1.5px;
  font-weight: 600;
  margin: 0 0 0.9rem;
  color: var(--bdx-charcoal);
  background: linear-gradient(120deg,
    var(--bdx-pili) 0%,
    var(--bdx-pili) 28%,
    var(--bdx-jinguang) 38%,
    var(--bdx-jinguang) 62%,
    var(--bdx-dongli) 72%,
    var(--bdx-dongli) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.bdx-hero__lede {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(28, 28, 28, 0.7);
  max-width: 36rem;
  margin: 0 0 1.5rem;
  text-align: center;
  /* 在 flex column 父容器里 align-items: center 已自动居中块；
     这里再保险一次：宽度自适应内容 + auto margin */
  width: auto;
  align-self: center;
}

[data-md-color-scheme="slate"] .bdx-hero__lede {
  color: rgba(247, 244, 237, 0.75);
}

.bdx-hero__stats {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  background-color: var(--bdx-cream-light);
  border: 1px solid var(--bdx-border);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}

.bdx-stat {
  padding: 0.9rem 1.6rem;
  text-align: center;
  border-right: 1px solid var(--bdx-border);
  min-width: 5.5rem;
}

.bdx-stat:last-child {
  border-right: none;
}

.bdx-stat strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.6px;
  color: var(--bdx-charcoal);
  line-height: 1.05;
}

.bdx-stat span {
  display: block;
  font-size: 0.72rem;
  color: var(--bdx-muted);
  margin-top: 0.2rem;
  letter-spacing: 0.05em;
}

/* ---------- Faction grid ---------- */
.bdx-factions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0 -0.5rem 3rem;
  padding: 0 0.5rem;
}

.md-typeset .bdx-faction {
  position: relative;
  display: block;
  background-color: var(--bdx-cream-light);
  border: 1px solid var(--bdx-border);
  border-radius: 14px;
  padding: 1.6rem 1.5rem 1.4rem;
  color: var(--bdx-charcoal);
  overflow: hidden;
  transition: border-color 0.18s;
}

.md-typeset .bdx-faction:hover {
  border-color: var(--bdx-border-strong);
}

.bdx-faction__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.bdx-faction--pili     .bdx-faction__bar { background: var(--bdx-pili); }
.bdx-faction--jinguang .bdx-faction__bar { background: var(--bdx-jinguang); }
.bdx-faction--dongli   .bdx-faction__bar { background: var(--bdx-dongli); }

.bdx-faction--pili     { background: var(--bdx-pili-bg); }
.bdx-faction--jinguang { background: var(--bdx-jinguang-bg); }
.bdx-faction--dongli   { background: var(--bdx-dongli-bg); }

.bdx-faction__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

.bdx-faction__year {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--bdx-muted);
  letter-spacing: 0.04em;
}

.bdx-faction__count {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1;
}

.bdx-faction--pili     .bdx-faction__count { color: var(--bdx-pili); }
.bdx-faction--jinguang .bdx-faction__count { color: var(--bdx-jinguang); }
.bdx-faction--dongli   .bdx-faction__count { color: var(--bdx-dongli); }

.md-typeset .bdx-faction__name {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.4px;
  margin: 0 0 0.2rem;
  color: var(--bdx-charcoal);
  border-bottom: none;
  padding-bottom: 0;
}

.md-typeset .bdx-faction__name a {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}

.md-typeset .bdx-faction__name a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.bdx-faction--pili     .bdx-faction__name a:hover { text-decoration-color: var(--bdx-pili); }
.bdx-faction--jinguang .bdx-faction__name a:hover { text-decoration-color: var(--bdx-jinguang); }
.bdx-faction--dongli   .bdx-faction__name a:hover { text-decoration-color: var(--bdx-dongli); }

.md-typeset .bdx-faction__sub {
  font-size: 0.78rem;
  color: var(--bdx-muted);
  margin: 0 0 0.85rem;
  font-weight: 400;
}

.md-typeset .bdx-faction__desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(28, 28, 28, 0.78);
  margin: 0 0 1.1rem;
  min-height: 4em;
}

[data-md-color-scheme="slate"] .md-typeset .bdx-faction__desc {
  color: rgba(247, 244, 237, 0.78);
}

.md-typeset .bdx-faction__chips {
  list-style: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: flex-start;
}

.md-typeset .bdx-faction__chips li {
  list-style: none !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.md-typeset .bdx-faction__chips li::before,
.md-typeset .bdx-faction__chips li::marker {
  content: none !important;
  display: none !important;
}

.md-typeset .bdx-faction__chips li a {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.22rem 0.7rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(28, 28, 28, 0.08);
  color: var(--bdx-charcoal);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.md-typeset .bdx-faction__chips li a:hover {
  background-color: rgba(255, 255, 255, 1);
  border-color: rgba(28, 28, 28, 0.25);
  text-decoration: none;
}

[data-md-color-scheme="slate"] .md-typeset .bdx-faction__chips li a {
  background-color: rgba(247, 244, 237, 0.06);
  border-color: rgba(247, 244, 237, 0.12);
  color: var(--bdx-charcoal);
}

[data-md-color-scheme="slate"] .md-typeset .bdx-faction__chips li a:hover {
  background-color: rgba(247, 244, 237, 0.12);
  border-color: rgba(247, 244, 237, 0.3);
}

.md-typeset .bdx-faction__chips .bdx-chip-more a {
  background-color: transparent !important;
  border: none !important;
  font-weight: 500;
  padding: 0.22rem 0.4rem;
}

.bdx-faction--pili     .bdx-chip-more a { color: var(--bdx-pili); }
.bdx-faction--jinguang .bdx-chip-more a { color: var(--bdx-jinguang); }
.bdx-faction--dongli   .bdx-chip-more a { color: var(--bdx-dongli); }

.md-typeset .bdx-faction__chips .bdx-chip-more a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* ---------- Info section ---------- */
.bdx-info {
  margin: 0 0 2.5rem;
  padding-top: 1rem;
}

.md-typeset .bdx-info h2 {
  font-size: 1.1rem;
  letter-spacing: -0.2px;
  border-bottom: 1px solid var(--bdx-border);
  padding-bottom: 0.45rem;
  margin-top: 2rem;
}

.bdx-info table {
  font-size: 0.82rem;
}

/* ---------- Footer note ---------- */
.bdx-foot {
  margin: 3rem -1rem 0;
  padding: 1.5rem 1rem;
  border-top: 1px solid var(--bdx-border);
  font-size: 0.74rem;
  color: var(--bdx-muted);
  text-align: center;
  line-height: 1.7;
}

.bdx-foot a {
  color: var(--bdx-charcoal);
  text-decoration: underline;
  text-decoration-color: rgba(28, 28, 28, 0.4);
}

[data-md-color-scheme="slate"] .bdx-foot a {
  color: var(--bdx-charcoal);
  text-decoration-color: rgba(247, 244, 237, 0.4);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .bdx-factions {
    grid-template-columns: 1fr;
  }
  .bdx-hero__title {
    font-size: 3rem;
    letter-spacing: -1.2px;
  }
}

@media (max-width: 600px) {
  .bdx-hero {
    margin: -0.5rem -1rem 2rem;
    padding: 2.5rem 1rem 2.5rem;
  }
  .bdx-hero__title {
    font-size: 2.2rem;
    letter-spacing: -0.8px;
  }
  .bdx-hero__lede {
    font-size: 0.92rem;
  }
  .bdx-stat {
    padding: 0.7rem 1rem;
    min-width: 4.5rem;
  }
  .bdx-stat strong {
    font-size: 1.25rem;
  }
  .md-typeset .bdx-faction__name {
    font-size: 1.3rem;
  }
}

/* ============================================================
   Character page typography (pili K-V structure, hex swatches)
   ============================================================ */

/* Hex color swatch inline */
.bdx-swatch {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  vertical-align: -0.13em;
  margin-right: 0.35em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

[data-md-color-scheme="slate"] .bdx-swatch {
  border-color: rgba(255, 255, 255, 0.25);
}

/* Faction landing page (index.md) - tile grid for character categories */
.bdx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.md-typeset .bdx-tile {
  background-color: var(--bdx-cream-light);
  border: 1px solid var(--bdx-border);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  font-size: 0.85rem;
  line-height: 1.85;
}

.md-typeset .bdx-tile p {
  margin: 0;
}

.md-typeset .bdx-tile p:first-child strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--bdx-muted);
  font-weight: 500;
  margin-bottom: 0.5rem;
  text-transform: none;
}

.md-typeset .bdx-tile a {
  color: var(--bdx-charcoal);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding: 0.05rem 0;
  transition: border-color 0.15s, color 0.15s;
}

.md-typeset .bdx-tile a:hover {
  color: var(--bdx-pili);
  border-bottom-color: var(--bdx-pili);
}

[data-md-color-scheme="slate"] .md-typeset .bdx-tile a {
  color: var(--bdx-charcoal);
}

/* Character page: tighter spacing for K-V style content */
.md-content__inner article > p > strong:first-child:last-child,
.md-content__inner article > p:has(> strong:only-child) {
  /* Standalone bold key paragraph: lighter weight + reduced spacing */
  margin-top: 1rem;
  margin-bottom: 0.2rem;
}

.md-content__inner article > p > strong {
  color: var(--bdx-muted);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

/* Tighter paragraph spacing on character pages (multi short K-V values) */
.md-content__inner article > p {
  margin: 0.4em 0;
}

/* Restore wider spacing around H2 to keep sections readable */
.md-content__inner article > h2 {
  margin-top: 2.5rem;
}

/* Source separator (=== rule lines) */
.md-typeset hr,
.md-typeset p > strong:only-child + br {
  /* The 80-char === lines remain as <hr> equivalent via setext fallback */
}

/* ============================================================
   补充来源段（## 【补充来源:XX】 / ## 同一角色别名文档合并）
   降权显示：略小、灰一些、上下加 hr 间隔
   ============================================================ */
.md-typeset h2:has(+ * ),
.md-typeset h2 {
  /* default kept */
}

/* 紧跟 === 分隔条之后的 H2 视为补充来源块的开始 */
.md-typeset h2 a[href^="http"],
.md-typeset h2:contains("补充来源"),
.md-typeset h2:contains("同一角色别名") {
  font-size: 1rem;
}

/* 简单做法：含【】的 H2 按补充来源样式 */
.md-typeset h2 {
  /* keep default for normal H2 */
}

/* JS 不能改时用 attribute selector */
[id*="补充来源"], [id*="同一角色别名"], [id*="suppl"] {
  font-size: 1rem !important;
  color: var(--bdx-muted) !important;
  font-weight: 500 !important;
  border-bottom-style: dashed !important;
  margin-top: 2rem !important;
}

/* ============================================================
   角色 Infobox（overrides/partials/infobox.html 渲染）
   读 YAML frontmatter，浮动在正文右上角
   ============================================================ */
.bdx-infobox {
  float: right;
  width: 17rem;
  max-width: 45%;
  margin: 0.2rem 0 1rem 1.5rem;
  border: 1px solid var(--bdx-border);
  border-radius: 10px;
  background-color: var(--bdx-cream-light);
  padding: 0.7rem 0.9rem 0.8rem;
  font-size: 0.74rem;
  line-height: 1.5;
}

.bdx-infobox__title {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.2px;
  text-align: center;
  color: var(--bdx-charcoal);
  padding-bottom: 0.5rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--bdx-border);
}

.bdx-infobox table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.bdx-infobox th,
.bdx-infobox td {
  text-align: left;
  vertical-align: top;
  padding: 0.2rem 0;
  border: none;
}

.bdx-infobox th {
  width: 4.2em;
  white-space: nowrap;
  padding-right: 0.6rem;
  color: var(--bdx-muted);
  font-weight: 500;
}

.bdx-infobox td {
  color: rgba(28, 28, 28, 0.83);
  word-break: break-word;
}

[data-md-color-scheme="slate"] .bdx-infobox td {
  color: rgba(247, 244, 237, 0.83);
}

/* 窄屏：取消浮动，铺满 */
@media screen and (max-width: 44.9em) {
  .bdx-infobox {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1.2rem 0;
  }
}