:root {
  --bg: #0f1115;
  --surface: #171a21;
  --surface-2: #1e232d;
  --surface-alt: #1a1f2a;
  --text: #e6e8ee;
  --muted: #9aa3b2;
  --border: #2a3140;
  --border-alt: #323a4c;
  --accent: #7aa2ff;
  --accent-dim: #3d5a99;
  --quote-bg: #141820;
  --quote-border: #3d5a99;
  --link: #8ec7ff;
  --shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.25);
  --radius: 12px;
  --max: 46rem;
  --font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
          Georgia, "Times New Roman", serif;
  --ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f4ef;
    --surface: #fffdf8;
    --surface-2: #f0ebe2;
    --surface-alt: #f3efe6;
    --text: #1c1b19;
    --muted: #5c5a55;
    --border: #e2dcd0;
    --border-alt: #d5cec0;
    --accent: #2b4d9b;
    --accent-dim: #a8b8d9;
    --quote-bg: #f3efe6;
    --quote-border: #2b4d9b;
    --link: #1a4fbf;
    --shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(40,30,10,0.06);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.05rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.site-header, .site-footer {
  font-family: var(--ui);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.site-footer { border-top: 1px solid var(--border); border-bottom: 0; margin-top: 3rem; }
.site-header .inner, .site-footer .inner, main {
  max-width: calc(var(--max) + 4rem);
  margin: 0 auto;
  padding: 1rem 1.25rem;
}
.site-header .inner {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem;
  align-items: baseline; justify-content: space-between;
}
.brand { font-weight: 700; letter-spacing: 0.02em; color: var(--text); }
.brand span { color: var(--accent); }
.crumbs { color: var(--muted); font-size: 0.9rem; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--link); }
.meta-bar {
  font-family: var(--ui);
  color: var(--muted);
  font-size: 0.9rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
  margin: 0.25rem 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.meta-bar strong { color: var(--text); font-weight: 600; }
h1 {
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1.25;
  margin: 0.5rem 0 0.75rem;
  letter-spacing: -0.01em;
}
h2 { font-size: 1.15rem; margin: 0; font-family: var(--ui); }
.lead { color: var(--muted); font-family: var(--ui); font-size: 0.95rem; }
.post {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.35rem 1.25rem;
  margin: 1.25rem 0;
}
/* Zebra posts — break up the continuous blob */
.post.post-alt {
  background: var(--surface-alt, var(--surface-2));
  border-color: var(--border-alt, var(--border));
}
.post-head {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--ui);
}
.post-who {
  display: flex; align-items: center; gap: 0.7rem; min-width: 0;
}
.post-who h2 {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem;
  min-width: 0;
}
/* Per-user ornate dragon mark (color hashed from author name) */
.dragon-mark {
  --dragon: hsl(var(--dragon-hue, 210) 58% 58%);
  --dragon-deep: hsl(var(--dragon-hue, 210) 52% 38%);
  --dragon-glow: hsl(var(--dragon-hue, 210) 70% 70% / 0.35);
  flex: 0 0 auto;
  width: 2.55rem; height: 2.55rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 35% 30%, var(--dragon-glow), transparent 55%),
    linear-gradient(145deg, var(--surface-2), var(--surface));
  border: 1px solid color-mix(in srgb, var(--dragon) 45%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--dragon) 18%, transparent),
    0 2px 8px rgba(0,0,0,0.18);
}
.dragon-mark svg {
  width: 1.55rem; height: 1.55rem;
  display: block;
}
.dragon-mark .scale-a { fill: var(--dragon); }
.dragon-mark .scale-b { fill: var(--dragon-deep); }
.dragon-mark .line {
  fill: none;
  stroke: var(--dragon-deep);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}
.dragon-mark .eye { fill: #f4f0e6; }
.dragon-mark .pupil { fill: var(--dragon-deep); }
@media (prefers-color-scheme: light) {
  .dragon-mark {
    --dragon: hsl(var(--dragon-hue, 210) 52% 42%);
    --dragon-deep: hsl(var(--dragon-hue, 210) 48% 28%);
    --dragon-glow: hsl(var(--dragon-hue, 210) 60% 50% / 0.22);
  }
}
.post-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6rem; height: 1.6rem; padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  margin-right: 0.15rem;
}
.post.post-alt .post-num {
  background: var(--surface);
}
.post-meta { color: var(--muted); font-size: 0.85rem; }
.post-body { word-wrap: break-word; overflow-wrap: anywhere; }
.post-body p { margin: 0.7em 0; }
.post-body p:first-child { margin-top: 0; }
.post-body p:last-child { margin-bottom: 0; }
.post-body img {
  max-width: 100%; height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
  margin: 0.75rem 0;
  background: var(--surface-2);
}
.post-body blockquote {
  margin: 0.9rem 0;
  padding: 0.65rem 0.9rem 0.75rem;
  border-left: 3px solid var(--quote-border);
  background: var(--quote-bg);
  border-radius: 0 8px 8px 0;
  color: var(--text);
  font-size: 0.97em;
}
.post-body blockquote p { margin: 0.4em 0; }
.post-body blockquote p:first-child { margin-top: 0; }
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body blockquote .quote-cite {
  display: block;
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 0.45rem;
  letter-spacing: 0.01em;
}
.post-body blockquote .quote-cite strong { color: inherit; font-weight: 700; }
.post-body strong { font-weight: 700; }
.post-body em { font-style: italic; }
.post-body code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--surface-2);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.post-body hr {
  border: 0; border-top: 1px solid var(--border); margin: 1.2rem 0;
}
.post-body ul, .post-body ol { padding-left: 1.4rem; }
.toc {
  font-family: var(--ui);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.5rem;
}
.toc summary {
  cursor: pointer; font-weight: 600; color: var(--text);
}
.toc ol {
  margin: 0.6rem 0 0; padding-left: 1.25rem;
  columns: 2; column-gap: 1.5rem;
  font-size: 0.9rem;
}
@media (max-width: 640px) { .toc ol { columns: 1; } }
.toc a { color: var(--muted); }
.toc a:hover { color: var(--link); }
.index-list { list-style: none; padding: 0; margin: 0; font-family: var(--ui); }
.index-list li {
  border-bottom: 1px solid var(--border);
}
/* Row link only — not nested participant / meta links */
.index-list > li > a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  padding: 0.85rem 0.15rem;
  color: var(--text);
  text-decoration: none;
}
.index-list > li > a.has-fighters {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
  align-items: center;
}
.index-list > li > a:hover { background: var(--surface); }
.index-list .title { font-weight: 600; }
.index-list .fighters {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.35;
  min-width: 0;
}
.index-list .sub { color: var(--muted); font-size: 0.85rem; grid-column: 1 / -1; }
.index-list .stat {
  color: var(--muted); font-size: 0.85rem; white-space: nowrap; align-self: center;
}
@media (max-width: 720px) {
  .index-list > li > a.has-fighters {
    grid-template-columns: 1fr auto;
  }
  .index-list > li > a.has-fighters .fighters {
    grid-column: 1 / -1;
    order: 3;
  }
  .index-list > li > a.has-fighters .stat { order: 2; }
}
/* Character fight lists grouped by year / edition */
.char-year-group {
  margin: 0.65rem 0 1.1rem;
}
.char-year-group:first-child { margin-top: 0.25rem; }
.char-year-head {
  font-family: var(--ui);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 0.35rem;
  padding: 0.2rem 0;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border);
}
.year-section.gtb-section .char-year-head,
.char-year-head.gtb {
  color: #e8a54b;
}
.season-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.85rem;
  font-family: var(--ui);
  margin: 1.25rem 0 2rem;
}
.season-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.season-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-1px);
  text-decoration: none;
}
.season-card .name { font-weight: 700; display: block; margin-bottom: 0.25rem; }
.season-card .stat { color: var(--muted); font-size: 0.85rem; }
/* Central hub: year jump bar + year sections with full thread lists */
.year-nav {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  font-family: var(--ui);
  margin: 1.25rem 0 1.75rem;
  position: sticky; top: 0; z-index: 5;
  padding: 0.65rem 0;
  background: linear-gradient(var(--bg) 70%, transparent);
}
.year-nav a {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.year-nav a:hover {
  border-color: var(--accent-dim);
  color: var(--link);
  text-decoration: none;
}
.year-nav a .nav-count {
  font-weight: 500; color: var(--muted); font-size: 0.78rem;
}
.year-nav a.nav-levi {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.year-section {
  margin: 2.25rem 0 2.75rem;
  scroll-margin-top: 3.5rem;
}
.year-section > header {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  align-items: baseline; justify-content: space-between;
  margin-bottom: 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
}
.year-section h2 {
  font-family: var(--ui);
  font-size: 1.45rem;
  margin: 0;
  letter-spacing: -0.01em;
}
.year-section .year-meta {
  font-family: var(--ui);
  color: var(--muted);
  font-size: 0.9rem;
}
.year-section .year-meta a { color: var(--muted); }
.year-section.levi-section > header {
  border-bottom-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.year-section.levi-section h2 { color: var(--accent); }
.year-section.gtb-section > header {
  border-bottom-color: color-mix(in srgb, #e8a54b 40%, var(--border));
}
.year-section.gtb-section h2 { color: #e8a54b; }
.year-nav a.nav-gtb {
  border-color: color-mix(in srgb, #e8a54b 40%, var(--border));
  background: color-mix(in srgb, #e8a54b 12%, var(--surface));
}
.year-nav a.is-active, .crumbs a.is-active {
  border-color: var(--accent-dim);
  color: var(--link);
}
.az-nav a, .az-nav span {
  min-width: 1.6rem;
  justify-content: center;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}
.letter-head {
  font-family: var(--ui);
  font-size: 1.25rem;
  margin: 1.75rem 0 0.5rem;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.25rem;
}
.hub-note {
  font-family: var(--ui);
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 1rem;
}

/* HoH archive hub */
.hoh-hub-intro {
  text-align: center;
}
.hoh-hub-intro .lead,
.hoh-hub-intro .hub-note {
  margin-left: auto;
  margin-right: auto;
}
.hoh-hub-intro .season-grid {
  width: 100%;
}
.hoh-hub-intro .season-card {
  text-align: center;
}
.hoh-hub-intro .year-nav {
  justify-content: center;
}
.leviathan-hero {
  margin: 1.6rem 0 2.25rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.leviathan-hero img {
  display: block;
  width: 100%;
  height: clamp(18rem, 46vw, 40rem);
  object-fit: cover;
  object-position: center;
}
.muted { color: var(--muted); }
.aka {
  color: #8ec7ff;
  font-weight: 500;
}
@media (prefers-color-scheme: light) {
  .aka { color: #2a6fd6; }
}
/* Fight list participants */
.participants {
  font-family: var(--ui);
  font-size: 0.88rem;
  margin: 0.2rem 0 0.55rem 0.15rem;
  line-height: 1.45;
  color: var(--muted);
}
.participants-label {
  color: var(--text);
  font-weight: 700;
  margin-right: 0.25rem;
}
.participant {
  color: #8ec7ff;
  font-weight: 500;
  text-decoration: none;
}
a.participant:hover {
  text-decoration: underline;
  color: #b6dcff;
}
.participant-sep { color: var(--muted); }
.participants-more {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #8ec7ff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.participants-more:hover {
  color: #b6dcff;
}
.participants-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
@media (prefers-color-scheme: light) {
  .participant { color: #2a6fd6; }
  a.participant:hover { color: #1a4fa8; }
  .participants-more { color: #2a6fd6; }
  .participants-more:hover { color: #1a4fa8; }
}
/* Short per-fight summary under participants */
.fight-summary {
  font-family: var(--ui);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0.15rem 0 0.65rem 0.15rem;
  max-width: 48rem;
  font-style: italic;
}
.fight-summary-banner {
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  margin: 0 0 1.1rem;
  max-width: 48rem;
  box-shadow: var(--shadow);
}
.fight-summary-banner .label {
  display: inline;
  font-weight: 700;
  font-style: normal;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  margin: 0 0.35rem 0 0;
}
.fight-summary-banner .blurb {
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
}
/* Official winner under fight description: white WINNER: + bold gold name */
.fight-winner {
  display: block;
  font-family: var(--ui);
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0.85rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
  color: var(--text);
}
.fight-summary + .fight-winner,
.fight-summary-banner .fight-winner {
  margin-top: 0.85rem;
  padding-top: 0.55rem;
}
.fight-winner .winner-label {
  font-weight: 700;
  font-style: normal;
  color: #ffffff;
  letter-spacing: 0.04em;
  margin-right: 0.4rem;
}
.fight-winner .winner-name,
.fight-winner strong.winner-name {
  font-weight: 700;
  font-style: normal;
  color: #d4a84b;
  text-shadow: 0 0 12px rgba(212, 168, 75, 0.28);
}
@media (prefers-color-scheme: light) {
  .fight-winner .winner-label { color: #1c1b19; }
  .fight-winner .winner-name,
  .fight-winner strong.winner-name {
    color: #a67c1a;
    text-shadow: none;
  }
}
/* Meta bar: match gold bold winner name (not accent blue) */
.meta-bar .winner-known { color: var(--text); }
.meta-bar .winner-known strong { color: #ffffff; font-weight: 700; }
.meta-bar .winner-known .winner-name {
  color: #d4a84b;
  font-weight: 700;
}
@media (prefers-color-scheme: light) {
  .meta-bar .winner-known strong { color: #1c1b19; }
  .meta-bar .winner-known .winner-name { color: #a67c1a; }
}
/* Character W / L / ? record tallies */
.char-record {
  font-family: var(--ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 0.85em;
  font-weight: 500;
  margin-left: 0.35rem;
  vertical-align: middle;
}
.char-record .rec-w { color: #d4a84b; font-weight: 700; }
.char-record .rec-l { color: var(--muted); font-weight: 600; }
.char-record .rec-u { color: var(--muted); font-weight: 600; opacity: 0.85; }
.char-record .rec-sep { color: var(--muted); opacity: 0.7; margin: 0 0.12em; }
.index-list .title .char-record {
  font-size: 0.8em;
  margin-left: 0.4rem;
}
@media (prefers-color-scheme: light) {
  .char-record .rec-w { color: #a67c1a; }
}
/* Category prev/next (always fixed, all pages) */
.scroll-jump {
  position: fixed;
  right: 1rem;
  bottom: 1.25rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  pointer-events: none;
}
.scroll-jump button {
  pointer-events: auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  font-family: var(--ui);
  opacity: 0.95;
}
.scroll-jump button:hover:not(:disabled) {
  border-color: var(--accent-dim);
  color: var(--link);
  opacity: 1;
}
.scroll-jump button:disabled {
  opacity: 0.35;
  cursor: default;
}
.scroll-jump button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 520px) {
  .scroll-jump { right: 0.65rem; bottom: 0.85rem; }
  .scroll-jump button { width: 2.4rem; height: 2.4rem; }
}
.warnings {
  font-family: var(--ui);
  background: #3a2418;
  color: #ffd8b5;
  border: 1px solid #6a3d20;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}
@media (prefers-color-scheme: light) {
  .warnings { background: #fff4e8; color: #5a2e0c; border-color: #e6c49a; }
}