/* JMUD custom site styles */

/* ====================================================================
   Theme palette — dried-blood is the brand accent; secondary palette is
   cool grey (replaces the earlier bronze). Navbar/footer stay dark in
   both modes for brand identity; only the body content flips.
   ==================================================================== */

html {
  /* Brand — same in both modes */
  --jmud-blood:        #a83838;
  --jmud-blood-hi:     #c84a4a;
  --jmud-blood-deep:   #7a2424;
  --jmud-stroke:       #3a1212;

  /* Chrome — navbar / footer stay dark in both modes */
  --jmud-frame:        #0d0f12;
  --jmud-frame-text:   #d0d0d0;
  --jmud-frame-link-hi:#ffffff;
  --jmud-frame-border: #4a4a4a;

  /* Light mode (default) */
  --jmud-bg:           #f4f1ea;     /* warm parchment */
  --jmud-surface:      #ffffff;     /* card */
  --jmud-surface-2:    #ebe8df;     /* card header / striped row */
  --jmud-border:       #c4c0b6;     /* light warm grey */
  --jmud-border-hi:    #6a6a6a;     /* mid grey */
  --jmud-text:         #2a241c;     /* dark warm-charcoal */
  --jmud-muted:        #6a655c;
  --jmud-link:         #4a4a4a;
  --jmud-link-hi:      #1a1a1a;
  --jmud-accent:       #7a2424;     /* deep dried-blood for headings (AA on parchment) */
  --jmud-accent-hi:    #a83838;
  --jmud-emphasis:     #5a3018;     /* lede strong, list emphasis */
  --jmud-vignette:     rgba(0, 0, 0, 0.04);
  --jmud-stripe:       rgba(0, 0, 0, 0.025);
  --jmud-code-bg:      #ebe8df;
  --jmud-code-text:    #2a241c;
  --jmud-alert-info:   #e6ecf2;
  --jmud-alert-info-bd:#9aa6b0;
  --jmud-alert-ok:     #e6efe0;
  --jmud-alert-ok-bd:  #8aa878;
  --jmud-alert-warn:   #f4ecd2;
  --jmud-alert-warn-bd:#b89c50;
  --jmud-alert-warn-tx:#5a4a18;
  --jmud-alert-danger: #f4dada;
  --jmud-alert-danger-bd: var(--jmud-blood);
  --jmud-alert-danger-tx: #5a1818;
}

html.dark-mode {
  --jmud-bg:           #16181a;     /* cool near-black */
  --jmud-surface:      #20242a;     /* lifted charcoal */
  --jmud-surface-2:    #2a2e34;
  --jmud-border:       #3a3e44;
  --jmud-border-hi:    #6a6e74;
  --jmud-text:         #d0d0d0;
  --jmud-muted:        #888c90;
  --jmud-link:         #b8b8b8;
  --jmud-link-hi:      #f0f0f0;
  --jmud-accent:       #c84a4a;     /* brighter dried-blood for headings on dark */
  --jmud-accent-hi:    #d85a5a;
  --jmud-emphasis:     #c0c0c0;
  --jmud-vignette:     rgba(255, 255, 255, 0.03);
  --jmud-stripe:       rgba(255, 255, 255, 0.03);
  --jmud-code-bg:      #0f1115;
  --jmud-code-text:    #d8d8d8;
  --jmud-alert-info:   #1c2530;
  --jmud-alert-info-bd:#3a4452;
  --jmud-alert-ok:     #1d2a1c;
  --jmud-alert-ok-bd:  #3a5a2a;
  --jmud-alert-ok-tx:  #c8e0b8;
  --jmud-alert-warn:   #2a2418;
  --jmud-alert-warn-bd:#6a6a6a;
  --jmud-alert-warn-tx:#d8d0b0;
  --jmud-alert-danger: #2a1414;
  --jmud-alert-danger-bd: var(--jmud-blood);
  --jmud-alert-danger-tx: #e8b8b8;
}

/* ---------- Brand wordmark in navbar ---------- */
.jmud-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.25rem 1rem;
  text-decoration: none;
}
.jmud-brand:hover { text-decoration: none; }
.jmud-logo {
  height: 50px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.jmud-slogan {
  display: block;
  margin-top: 0.15rem;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--jmud-frame-text);
  opacity: 0.7;
  font-size: 0.78rem;
  text-align: center;
}
@media (max-width: 575px) {
  .jmud-logo { height: 38px; }
  .jmud-slogan { font-size: 0.7rem; }
}

/* ---------- Welcome card / hero ---------- */
.jmud-welcome {
  font-family: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', 'Times New Roman', serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 3.2rem;
  line-height: 1.1;
  margin-top: 0.5rem;
  margin-bottom: 0.4rem;
  /* Vertical dried-blood gradient on the lettering — same in both modes */
  background: linear-gradient(to bottom, var(--jmud-blood-hi) 0%, var(--jmud-blood-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.5px var(--jmud-stroke);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.jmud-welcome::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 2px;
  margin: 0.65rem auto 0;
  background: linear-gradient(to right, transparent, var(--jmud-border-hi), transparent);
}
@media (max-width: 575px) {
  .jmud-welcome { font-size: 2.2rem; letter-spacing: 0.08em; }
}

.jmud-lede {
  font-size: 1.25rem;
  line-height: 1.65;
  max-width: 40rem;
  margin: 0 auto 1.75rem;
  letter-spacing: 0.01em;
  color: var(--jmud-text);
}
.jmud-lede strong {
  color: var(--jmud-emphasis);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.jmud-cta { margin: 1.5rem 0 0.5rem; }

/* ---------- "Play in the Browser" button ---------- */
/* Lettering matches WELCOME TO JMUD: dried-blood gradient on the text
   itself (background-clip: text). The plate flips with mode. */
a.playbutton.jmud-playbutton {
  display: inline-block;
  font-family: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.9rem 2.5rem;
  border-radius: 4px;
  background: linear-gradient(to bottom, var(--jmud-blood-hi) 0%, var(--jmud-blood-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.5px var(--jmud-stroke);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  background-color: var(--jmud-surface);
  border: 1px solid var(--jmud-border-hi);
  box-shadow:
    0 0 0 1px rgba(58, 18, 18, 0.4) inset,
    0 3px 10px rgba(0, 0, 0, 0.18);
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
html.dark-mode a.playbutton.jmud-playbutton {
  box-shadow:
    0 0 0 1px rgba(58, 18, 18, 0.6) inset,
    0 3px 10px rgba(0, 0, 0, 0.55);
}
a.playbutton.jmud-playbutton:hover,
a.playbutton.jmud-playbutton:focus {
  background: linear-gradient(to bottom, #d85a5a 0%, #8b2828 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-color: var(--jmud-surface-2);
  border-color: var(--jmud-blood);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(58, 18, 18, 0.5) inset,
    0 0 18px rgba(200, 74, 74, 0.25),
    0 5px 14px rgba(0, 0, 0, 0.35);
  text-decoration: none;
}
a.playbutton.jmud-playbutton:active {
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(58, 18, 18, 0.5) inset,
    0 2px 6px rgba(0, 0, 0, 0.35);
}

/* ---------- Theme toggle button ---------- */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--jmud-frame-border);
  border-radius: 4px;
  color: var(--jmud-frame-text) !important;
  padding: 0.25rem 0.6rem;
  margin: 0 0.25rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover,
.theme-toggle:focus {
  color: var(--jmud-frame-link-hi) !important;
  border-color: var(--jmud-frame-link-hi);
  text-decoration: none;
}

/* ====================================================================
   Character sheet (PHB 2024 pp. 34-35 layout)
   The parchment is a layer above the page background; bronze-bordered
   boxes float on top of the parchment.
   ==================================================================== */

/* Local palette — parchment stays warm in dark mode too (it's a sheet
   of paper sitting on the desk; the desk changes, the paper doesn't). */
.phb-stage {
  --phb-paper:        #efe4cc;
  --phb-paper-dark:   #d9c79a;
  --phb-ink:          #2a1d10;
  --phb-ink-soft:     #5a4326;
  --phb-ink-faint:    #8a6f48;
  --phb-bronze:       #8a6a36;
  --phb-bronze-deep:  #5a4322;
  --phb-bronze-hi:    #b08a4a;
  --phb-blood:        #7a2424;
  --phb-rule:         #b39965;
  --phb-shadow:       rgba(40, 25, 10, 0.25);

  padding: 2rem 1rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.phb-sheet {
  position: relative;
  width: 100%;
  max-width: 70rem;
  padding: 2.25rem 2rem 2.5rem;
  color: var(--phb-ink);
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Georgia', serif;
  line-height: 1.35;

  /* Parchment: layered radial tints + SVG noise for paper grain. The
     image is a tiny inline data URI so we stay self-hosted. */
  background-color: var(--phb-paper);
  background-image:
    radial-gradient(ellipse at 18% 12%, rgba(255, 240, 200, 0.55), transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(120, 80, 30, 0.18), transparent 60%),
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(80, 50, 15, 0.18) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0 0.10  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: auto, auto, auto, 180px 180px;
  border: 1px solid var(--phb-bronze-deep);
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(120, 90, 40, 0.3) inset,
    0 1px 0 rgba(255, 240, 210, 0.5) inset,
    0 12px 30px var(--phb-shadow),
    0 4px 10px rgba(0, 0, 0, 0.18);
}

/* Faint inner border ruled in bronze to echo the printed sheet */
.phb-sheet::before {
  content: "";
  position: absolute;
  inset: 0.6rem;
  border: 1px solid var(--phb-rule);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0.55;
}

/* ----- shared field/box atoms ----- */
.phb-field-label {
  font-family: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--phb-ink-faint);
  text-align: center;
  margin-top: 0.25rem;
}
.phb-field-value {
  font-size: 1rem;
  text-align: center;
  color: var(--phb-ink);
  min-height: 1.3em;
}
.phb-field {
  border-bottom: 1px solid var(--phb-bronze);
  padding: 0.35rem 0.5rem 0.2rem;
  display: flex;
  flex-direction: column-reverse;
}

.phb-box {
  border: 1px solid var(--phb-bronze);
  border-radius: 3px;
  background: rgba(255, 245, 220, 0.35);
  padding: 0.6rem 0.75rem 0.7rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 1px 0 rgba(255, 250, 230, 0.6) inset;
}
.phb-box--tall { min-height: 9rem; }
.phb-box-title {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--phb-blood);
  text-align: center;
  border-bottom: 1px solid var(--phb-rule);
  padding-bottom: 0.25rem;
  margin-bottom: 0.45rem;
}
.phb-empty {
  color: var(--phb-ink-faint);
  text-align: center;
  font-style: italic;
  padding: 0.5rem 0;
}
/* ----- character list (card grid) ----- */
.jmud-roster-blurb {
  color: #b8a980;
  font-size: 0.92rem;
  margin: 0 0 1.2rem;
  padding: 0.7rem 0.95rem;
  border-left: 3px solid var(--jmud-blood);
  background: rgba(168, 56, 56, 0.06);
  border-radius: 4px;
}
.jmud-roster-blurb code {
  color: var(--jmud-blood-hi);
  background: rgba(0,0,0,0.25);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  font-size: 0.88em;
}
.jmud-roster-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.jmud-view-toggle {
  display: inline-flex;
  border: 1px solid var(--jmud-stroke);
  border-radius: 4px;
  overflow: hidden;
}
.jmud-view-btn {
  background: transparent;
  color: #b8a980;
  border: 0;
  padding: 0.35rem 0.9rem;
  font-family: 'Cinzel', 'Trajan Pro', serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.jmud-view-btn:not(:last-child) {
  border-right: 1px solid var(--jmud-stroke);
}
.jmud-view-btn:hover {
  color: var(--jmud-blood-hi);
}
.jmud-view-btn[aria-pressed="true"] {
  background: var(--jmud-blood-deep);
  color: #fff;
}

/* show/hide views by mode */
.is-grid .jmud-view-list { display: none; }
.is-list .jmud-view-grid { display: none; }

/* ----- list-view table ----- */
.jmud-char-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.4rem 0 0.5rem;
  font-size: 0.95rem;
}
.jmud-char-table thead th {
  text-align: left;
  padding: 0.5rem 0.7rem;
  font-family: 'Cinzel', 'Trajan Pro', serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--jmud-blood);
  border-bottom: 1px solid var(--jmud-stroke);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.jmud-char-table thead th[data-sort]::after {
  content: " ↕";
  opacity: 0.35;
  font-size: 0.85em;
}
.jmud-char-table thead th.is-sorted-asc::after  { content: " ▲"; opacity: 1; }
.jmud-char-table thead th.is-sorted-desc::after { content: " ▼"; opacity: 1; }
.jmud-char-table tbody td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid rgba(0,0,0,0.18);
  color: #d8cfa8;
}
.jmud-char-table tbody tr:hover td {
  background: rgba(168, 56, 56, 0.06);
}
.jmud-char-table tbody td a {
  color: var(--jmud-blood-hi);
  text-decoration: none;
  font-weight: 600;
}
.jmud-char-table tbody td a:hover { text-decoration: underline; }

.jmud-roster-heading {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1rem;
  color: var(--jmud-blood);
  margin: 1.2rem 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--jmud-stroke);
}

.jmud-char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.1rem;
  margin-top: 0.5rem;
}
.jmud-char-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.75rem 0.85rem;
  background: linear-gradient(180deg, #2a1d1d 0%, #1a1212 100%);
  border: 1px solid var(--jmud-stroke);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.jmud-char-card:hover,
.jmud-char-card:focus {
  transform: translateY(-2px);
  border-color: var(--jmud-blood);
  box-shadow: 0 6px 14px rgba(168, 56, 56, 0.25);
  text-decoration: none;
}
.jmud-char-crest {
  width: 70px;
  height: 84px;
  margin-bottom: 0.55rem;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}
.jmud-char-name {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--jmud-blood-hi);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.15rem;
}
.jmud-char-class {
  font-size: 0.85rem;
  color: #d8cfa8;
  text-align: center;
}
.jmud-char-race {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a6f48;
  margin-top: 0.2rem;
}

.phb-box-subtitle {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--phb-blood);
  border-top: 1px solid var(--phb-rule);
  margin-top: 0.55rem;
  padding-top: 0.35rem;
  margin-bottom: 0.35rem;
}

/* ----- header ----- */
.phb-header {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--phb-bronze);
}
.phb-header-name {
  border: 2px solid var(--phb-bronze-deep);
  border-radius: 3px;
  padding: 0.4rem 1rem 0.5rem;
  background: rgba(255, 245, 220, 0.4);
  margin-bottom: 0.6rem;
}
.phb-charname {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  font-weight: 900;
  font-size: 1.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--phb-blood);
}
.phb-header-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem 1rem;
}

/* ----- 3-column body ----- */
.phb-body {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) {
  .phb-body { grid-template-columns: 1fr; }
}

/* ----- ability score blocks (left column top) ----- */
.phb-abilities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.phb-ability {
  border: 2px solid var(--phb-bronze-deep);
  border-radius: 6px;
  background: rgba(255, 245, 220, 0.55);
  padding: 0.4rem 0.3rem 0.85rem;
  text-align: center;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(255, 250, 230, 0.6) inset,
    0 2px 4px rgba(60, 40, 15, 0.12);
}
.phb-ability-code {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--phb-ink-soft);
}
.phb-ability-score {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 0.15rem;
  color: var(--phb-blood);
  font-family: 'Cinzel', 'Trajan Pro', serif;
}
.phb-ability-mod {
  position: absolute;
  bottom: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--phb-paper);
  border: 2px solid var(--phb-bronze-deep);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--phb-ink);
  font-family: 'Cinzel', 'Trajan Pro', serif;
  box-shadow: 0 1px 2px rgba(60, 40, 15, 0.2);
}

/* ----- line-list (saves, skills, passives) ----- */
.phb-line-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.78rem;
}
.phb-line-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid rgba(176, 138, 74, 0.3);
}
.phb-line-list li:last-child { border-bottom: none; }
.phb-line-mod {
  font-weight: 700;
  width: 1.8rem;
  text-align: center;
  font-family: 'Cinzel', 'Trajan Pro', serif;
  color: var(--phb-blood);
}
/* span variant fills remaining space; anchor variant stays text-width
   so its border-bottom matches the .phb-tip styling used elsewhere. */
span.phb-line-name { flex: 1; }
a.phb-tip.phb-line-name { /* inherit default .phb-tip border + colors */ }
.phb-line-abi {
  color: var(--phb-ink-faint);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  margin-left: auto;
}
.phb-line-list--compact li { padding: 0.2rem 0; font-size: 0.85rem; }

/* proficiency pip (open circle / filled / expertise ring) */
.phb-pip {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 1.5px solid var(--phb-bronze);
  background: transparent;
  flex-shrink: 0;
}
.phb-pip.is-prof  { background: var(--phb-bronze-deep); }
.phb-pip.is-expert {
  background: var(--phb-blood);
  border-color: var(--phb-blood);
  box-shadow: 0 0 0 2px var(--phb-paper), 0 0 0 3px var(--phb-bronze-deep);
}

/* ----- middle column: stat row + HP block + spells ----- */
.phb-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.phb-stat {
  border: 2px solid var(--phb-bronze-deep);
  border-radius: 6px;
  background: rgba(255, 245, 220, 0.55);
  padding: 0.45rem 0.3rem 0.5rem;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(255, 250, 230, 0.6) inset;
}
.phb-stat-value {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: var(--phb-blood);
}
.phb-stat-label {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6rem;
  color: var(--phb-ink-faint);
  margin-top: 0.3rem;
}
.phb-stat--small .phb-stat-value { font-size: 1.2rem; }

.phb-hp-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.phb-hp-current {
  border: 2px solid var(--phb-bronze-deep);
  border-radius: 6px;
  background: rgba(255, 240, 210, 0.55);
  padding: 0.5rem 0.5rem 0.7rem;
  text-align: center;
}
.phb-hp-numbers {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--phb-blood);
  margin-top: 0.15rem;
}
.phb-hp-slash {
  margin: 0 0.3rem;
  color: var(--phb-ink-faint);
  font-weight: 400;
}
.phb-hp-side {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.phb-hp-row {
  border: 1px solid var(--phb-bronze);
  border-radius: 4px;
  background: rgba(255, 245, 220, 0.35);
  padding: 0.3rem 0.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.phb-death { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; }
.phb-death-label { color: var(--phb-ink-faint); margin: 0 0.2rem; }
.phb-pip--success { border-color: #4a6a3a; }
.phb-pip--success.is-on { background: #6a8f4a; border-color: #6a8f4a; }
.phb-pip--fail { border-color: #7a2424; }
.phb-pip--fail.is-on { background: #a83838; border-color: #7a2424; }
.phb-pip--inspiration {
  width: 1.2rem;
  height: 1.2rem;
  border-width: 2px;
  border-color: var(--phb-bronze-deep);
}

.phb-equipped {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
}
.phb-equipped li {
  padding: 0.15rem 0;
  border-bottom: 1px dotted rgba(140, 100, 50, 0.25);
}
.phb-equipped li:last-child { border-bottom: none; }

.phb-spell-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.phb-slots .phb-field-label { text-align: left; margin-bottom: 0.3rem; }
.phb-slots-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.phb-slot {
  border: 1.5px solid var(--phb-bronze-deep);
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  background: rgba(255, 245, 220, 0.6);
  text-align: center;
  min-width: 2.4rem;
}
.phb-slot-level {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--phb-ink-faint);
}
.phb-slot-count {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--phb-blood);
}
.phb-spell-list {
  font-size: 0.82rem;
}
.phb-spell-grp { margin-top: 0.4rem; }
.phb-spell-grp-label {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.65rem;
  color: var(--phb-ink-soft);
  margin-bottom: 0.1rem;
}

/* ----- right column ----- */
.phb-inspiration {
  display: flex;
  justify-content: center;
  padding: 0.4rem 0;
}
.phb-trait-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
}
.phb-trait-list li {
  padding: 0.2rem 0;
  border-bottom: 1px dotted rgba(140, 100, 50, 0.25);
}
.phb-trait-list li:last-child { border-bottom: none; }

/* In dark mode the parchment colors stay the same — paper does not flip.
   But the body glow around the sheet should sit nicely on the dark bg. */
html.dark-mode .phb-sheet {
  box-shadow:
    0 0 0 1px rgba(120, 90, 40, 0.3) inset,
    0 1px 0 rgba(255, 240, 210, 0.5) inset,
    0 12px 40px rgba(0, 0, 0, 0.6),
    0 4px 14px rgba(0, 0, 0, 0.4);
}

/* ====================================================================
   Character sheet — PAGE 2 (PHB 2024 p. 35)
   ==================================================================== */

.phb-sheet--page2 { margin-top: 1.75rem; }

.phb-page2-header {
  border-bottom: 2px solid var(--phb-bronze);
  padding-bottom: 0.65rem;
  margin-bottom: 1rem;
  text-align: center;
}
.phb-page2-name {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--phb-blood);
}
.phb-page2-sub {
  font-size: 0.85rem;
  color: var(--phb-ink-soft);
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
}

.phb-p2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 900px) {
  .phb-p2-grid { grid-template-columns: 1fr; }
}

.phb-p2-cell { display: flex; flex-direction: column; }
.phb-p2-cell .phb-box { flex: 0 0 auto; }
.phb-p2-cell .phb-box--tall { min-height: 11rem; }

.phb-p2-bottom {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}
@media (max-width: 900px) {
  .phb-p2-bottom { grid-template-columns: 1fr; }
}

/* ----- portrait crest ----- */
.phb-portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
}
.phb-crest {
  height: 9rem;
  width: auto;
  filter: drop-shadow(0 2px 3px rgba(60, 40, 15, 0.3));
}

.phb-id-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem 0.5rem;
}
.phb-field--wide { margin-top: 0.4rem; }
.phb-field--split {
  flex-direction: row;
  gap: 0.5rem;
  padding: 0;
  border-bottom: none;
}
.phb-field--split > div {
  flex: 1;
  display: flex;
  flex-direction: column-reverse;
  min-width: 0;
  border-bottom: 1px solid var(--phb-bronze);
  padding: 0.35rem 0.5rem 0.2rem;
}

/* ----- senses ----- */
.phb-senses {
  font-size: 0.9rem;
  padding: 0.2rem 0.1rem;
}

/* ----- attack table ----- */
.phb-attacks {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.phb-attacks th,
.phb-attacks td {
  text-align: left;
  padding: 0.18rem 0.35rem;
  border-bottom: 1px solid rgba(176, 138, 74, 0.4);
  vertical-align: middle;
}
.phb-attacks th {
  font-family: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', serif;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--phb-bronze);
  border-bottom: 1px solid var(--phb-bronze);
}
.phb-attack-mod { text-align: center; font-variant-numeric: tabular-nums; width: 3em; }
.phb-attack-dmg { text-align: right; font-variant-numeric: tabular-nums; }
.phb-attack-notes {
  display: inline-block;
  margin-left: 0.3rem;
  color: var(--phb-bronze);
  font-style: italic;
  font-size: 0.75rem;
}

/* ----- class resources ----- */
.phb-resources {
  list-style: none;
  margin: 0;
  padding: 0;
}
.phb-resources li {
  padding: 0.2rem 0;
  border-bottom: 1px solid rgba(176, 138, 74, 0.3);
}
.phb-resources li:last-child { border-bottom: none; }
.phb-resource-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.phb-resource-label {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.phb-resource-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.phb-resource-sub {
  font-size: 0.7rem;
  color: var(--phb-bronze);
  font-style: italic;
}

/* ----- attunement pips ----- */
.phb-attune {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.1rem;
}
.phb-pip--attune {
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid var(--phb-bronze);
  border-radius: 50%;
  display: inline-block;
  background: transparent;
}
.phb-pip--attune.is-on {
  background: var(--phb-blood);
  border-color: var(--phb-blood);
}
.phb-attune-label {
  margin-left: 0.4rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--phb-bronze);
}

/* ----- prose / blank lines ----- */
.phb-prose {
  font-size: 0.9rem;
  color: var(--phb-ink);
  min-height: 6rem;
  padding: 0.3rem 0.1rem;
}
.phb-prose--short { min-height: 3rem; }
.phb-prose--blank {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 1.45rem,
    rgba(140, 100, 50, 0.28) 1.45rem,
    rgba(140, 100, 50, 0.28) calc(1.45rem + 1px)
  );
  background-position: 0 1.4rem;
}

/* ----- proficiency grid ----- */
.phb-prof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
}
.phb-label-left {
  text-align: left;
  margin-bottom: 0.15rem;
}
.phb-prof-value {
  border-bottom: 1px solid var(--phb-bronze);
  padding: 0.2rem 0.1rem;
  min-height: 1.4em;
  color: var(--phb-ink);
}

/* ----- spell grimoire (bottom of page 2) ----- */
.phb-spell-grimoire {
  margin-top: 1rem;
  border-top: 2px solid var(--phb-bronze);
  padding-top: 0.85rem;
}
.phb-grimoire-title {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--phb-blood);
  text-align: center;
  margin-bottom: 0.6rem;
}
.phb-grimoire-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
}
.phb-grimoire-col {
  border: 1px solid var(--phb-bronze);
  border-radius: 3px;
  background: rgba(255, 245, 220, 0.35);
  padding: 0.5rem 0.6rem 0.6rem;
}
.phb-grimoire-col-label {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
  color: var(--phb-blood);
  border-bottom: 1px solid var(--phb-rule);
  padding-bottom: 0.2rem;
  margin-bottom: 0.35rem;
  text-align: center;
}
.phb-grimoire-spells {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
}
.phb-grimoire-spells li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.12rem 0;
}
.phb-grimoire-name { flex: 1; }
.phb-pip--prep {
  border-color: var(--phb-bronze-deep);
  width: 0.65rem;
  height: 0.65rem;
}
.phb-pip--prep.is-on {
  background: var(--phb-blood);
  border-color: var(--phb-blood);
}
.phb-pip--prep.is-locked.is-on {
  background: var(--phb-bronze-deep);
  border-color: var(--phb-bronze-deep);
}
.phb-grimoire-legend {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--phb-ink-faint);
  text-align: center;
}
.phb-grimoire-legend .phb-pip { vertical-align: middle; margin: 0 0.15rem; }

/* ====================================================================
   Character sheet — PAGE 3 (Spellcasting; casters only)
   ==================================================================== */

.phb-sheet--page3 { margin-top: 1.75rem; }
.phb-p3-stats {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.phb-p3-stats .phb-stat { min-width: 7rem; }
.phb-p3-slots {
  flex: 1;
  min-width: 14rem;
  border: 1px solid var(--phb-bronze);
  border-radius: 3px;
  background: rgba(255, 245, 220, 0.35);
  padding: 0.45rem 0.7rem 0.5rem;
}
.phb-sheet--page3 .phb-spell-grimoire {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

/* ---------- Roadmap page ---------- */
.roadmap-page {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1rem 0.5rem 3rem;
  line-height: 1.6;
}
.roadmap-page h1 {
  font-family: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', 'Times New Roman', serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 2.4rem;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}
.roadmap-page h2 {
  font-family: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', 'Times New Roman', serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.6rem;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--jmud-border);
}
.roadmap-page h3 {
  font-size: 1.2rem;
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}
.roadmap-page h2[id],
.roadmap-page h3[id] {
  scroll-margin-top: 1rem;
}
.roadmap-page .heading-anchor {
  display: inline-block;
  margin-left: 0.4rem;
  color: var(--phb-bronze, #8a6a36);
  text-decoration: none;
  font-weight: normal;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
}
.roadmap-page h2:hover .heading-anchor,
.roadmap-page h3:hover .heading-anchor,
.roadmap-page .heading-anchor:focus,
.roadmap-page .heading-anchor.copied {
  opacity: 1;
}
.roadmap-page .heading-anchor:hover {
  text-decoration: none;
  color: var(--jmud-blood, #a83838);
}
.roadmap-page .heading-anchor.copied::after {
  content: " copied";
  font-size: 0.75em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}
.roadmap-page hr {
  margin: 2rem 0;
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--jmud-border), transparent);
}
.roadmap-page p { margin-bottom: 0.8rem; }
.roadmap-page code {
  font-size: 0.9em;
  padding: 0.05em 0.35em;
  border-radius: 3px;
}
.roadmap-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 0.5rem 0;
}
.roadmap-list li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.6rem;
  border-bottom: 1px dashed var(--jmud-border);
}
.roadmap-list li:last-child { border-bottom: none; }
.roadmap-list li::before {
  position: absolute;
  left: 0;
  top: 0.45rem;
  font-family: 'Cinzel', 'Trajan Pro', serif;
  width: 1.2rem;
  text-align: center;
}
.roadmap-list li.task.task-open::before {
  content: "☐";
  color: var(--jmud-muted);
}
.roadmap-list li.task.task-done::before {
  content: "☑";
  color: var(--jmud-accent);
}
.roadmap-list li:not(.task)::before {
  content: "•";
  color: var(--jmud-border-hi);
  top: 0.35rem;
}
.roadmap-list li strong:first-child {
  color: var(--jmud-emphasis);
  letter-spacing: 0.02em;
}

/* ====================================================================
   Body / chrome rules — driven by the var palette above so they apply
   to both modes.
   ==================================================================== */

html body {
  background-color: var(--jmud-bg);
  color: var(--jmud-text);
}

/* Subtle vignette */
html body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at top, var(--jmud-vignette), transparent 60%);
  z-index: 0;
}
html .main-content,
html .navbar,
html .footer {
  position: relative;
  z-index: 1;
}

/* Navbar — always dark frame (chrome stays consistent across modes) */
html .navbar {
  background-color: var(--jmud-frame);
  border-top: 1px solid var(--jmud-frame-border);
  border-bottom: 1px solid var(--jmud-frame-border);
}
html .navbar .navbar-brand .media-body {
  color: var(--jmud-blood-hi);
  letter-spacing: 0.04em;
}
html .navbar .navbar-brand small {
  color: var(--jmud-frame-text);
  opacity: 0.7;
  font-style: italic;
  letter-spacing: 0.02em;
}
html .navbar .nav-link {
  color: var(--jmud-frame-text) !important;
}
html .navbar .nav-link:hover,
html .navbar .nav-link:focus {
  color: var(--jmud-frame-link-hi) !important;
}

/* Footer — same dark frame as navbar */
html .footer {
  background-color: var(--jmud-frame);
  border-top: 1px solid var(--jmud-frame-border);
}
html .footer .text-muted {
  color: var(--jmud-frame-text) !important;
  opacity: 0.65;
}
html .footer a.footer-credit {
  color: var(--jmud-frame-text);
  opacity: 0.85;
  text-decoration: underline;
  text-decoration-color: var(--jmud-frame-border);
}
html .footer a.footer-credit:hover {
  color: var(--jmud-frame-link-hi);
  opacity: 1;
  text-decoration-color: var(--jmud-frame-link-hi);
}

/* Headings — dried-blood gradient + Cinzel uppercase on h1/h2 (the
   carved-stone treatment from the homepage WELCOME hero, applied
   site-wide so every page title reads the same regardless of which
   template renders it). h3+ stay as flat body text. */
html h1,
html h2 {
  font-family: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', 'Times New Roman', serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: linear-gradient(to bottom, var(--jmud-blood-hi) 0%, var(--jmud-blood-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.5px var(--jmud-stroke);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
html h3,
html h4,
html h5,
html h6 {
  color: var(--jmud-text);
}

/* Links */
html a {
  color: var(--jmud-link);
}
html a:hover {
  color: var(--jmud-link-hi);
}

/* Cards / list-groups */
html .card,
html .list-group-item {
  background-color: var(--jmud-surface);
  border-color: var(--jmud-border);
  color: var(--jmud-text);
}
html .card-header,
html .card-footer {
  background-color: var(--jmud-surface-2);
  border-color: var(--jmud-border);
  color: var(--jmud-text);
}

html .text-muted {
  color: var(--jmud-muted) !important;
}

html hr {
  border-top-color: var(--jmud-border);
}

/* Pagination — Bootstrap default ships white pages + bright blue
   active; retint to the JMUD palette in both modes. */
html .pagination .page-link {
  background-color: var(--jmud-surface);
  border-color: var(--jmud-border);
  color: var(--jmud-link);
}
html .pagination .page-link:hover,
html .pagination .page-link:focus {
  background-color: var(--jmud-surface-2);
  border-color: var(--jmud-border-hi);
  color: var(--jmud-link-hi);
  box-shadow: none;
}
html .pagination .page-item.active .page-link {
  background-color: var(--jmud-blood-deep);
  border-color: var(--jmud-blood);
  color: #f5e9c8;
}
html .pagination .page-item.disabled .page-link {
  background-color: var(--jmud-surface);
  border-color: var(--jmud-border);
  color: var(--jmud-muted);
}

/* Tables */
html .table {
  color: var(--jmud-text);
}
html .table thead th,
html .table td,
html .table th {
  border-color: var(--jmud-border);
}
html .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--jmud-stripe);
}

/* Dropdowns */
html .dropdown-menu {
  background-color: var(--jmud-surface);
  border-color: var(--jmud-border);
}
html .dropdown-item {
  color: var(--jmud-text);
}
html .dropdown-item:hover,
html .dropdown-item:focus {
  background-color: var(--jmud-surface-2);
  color: var(--jmud-link-hi);
}
html .dropdown-divider {
  border-top-color: var(--jmud-border);
}

/* Forms */
html .form-control {
  background-color: var(--jmud-surface);
  border-color: var(--jmud-border);
  color: var(--jmud-text);
}
html .form-control:focus {
  background-color: var(--jmud-surface);
  color: var(--jmud-text);
  border-color: var(--jmud-border-hi);
  box-shadow: 0 0 0 0.2rem rgba(120, 120, 120, 0.25);
}
html .form-control::placeholder {
  color: var(--jmud-muted);
}

/* Alerts */
html .alert-info {
  background-color: var(--jmud-alert-info);
  border-color: var(--jmud-alert-info-bd);
  color: var(--jmud-text);
}
html .alert-success {
  background-color: var(--jmud-alert-ok);
  border-color: var(--jmud-alert-ok-bd);
  color: var(--jmud-text);
}
html.dark-mode .alert-success { color: var(--jmud-alert-ok-tx); }

html .alert-warning {
  background-color: var(--jmud-alert-warn);
  border-color: var(--jmud-alert-warn-bd);
  color: var(--jmud-alert-warn-tx);
}
html .alert-danger {
  background-color: var(--jmud-alert-danger);
  border-color: var(--jmud-alert-danger-bd);
  color: var(--jmud-alert-danger-tx);
}

/* Code / pre */
html pre,
html code {
  background-color: var(--jmud-code-bg);
  color: var(--jmud-code-text);
  border: 1px solid var(--jmud-border);
}

/* Buttons */
html .btn-primary {
  background-color: var(--jmud-border-hi);
  border-color: var(--jmud-border-hi);
  color: var(--jmud-bg);
}
html .btn-primary:hover {
  background-color: var(--jmud-link-hi);
  border-color: var(--jmud-link-hi);
  color: var(--jmud-bg);
}
html .btn-danger {
  background-color: var(--jmud-blood);
  border-color: var(--jmud-blood);
  color: #fff;
}
html .btn-danger:hover {
  background-color: var(--jmud-blood-hi);
  border-color: var(--jmud-blood-hi);
  color: #fff;
}

/* Generic playbutton (when used without jmud-playbutton modifier) */
html a.playbutton {
  background: linear-gradient(to bottom, var(--jmud-border-hi) 5%, var(--jmud-border) 100%);
  background-color: var(--jmud-border);
  border: 1px solid var(--jmud-border-hi);
  color: var(--jmud-bg);
  box-shadow: 0 1px 10px 5px rgba(0, 0, 0, 0.1);
}
html a.playbutton:hover {
  background: linear-gradient(to bottom, var(--jmud-border) 5%, var(--jmud-border-hi) 100%);
  background-color: var(--jmud-border-hi);
  color: var(--jmud-bg);
}

.stats-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 0.5rem 3rem;
  line-height: 1.6;
}
.stats-page h1 {
  font-family: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', 'Times New Roman', serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 2.4rem;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}
.stats-page h2 {
  font-family: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', 'Times New Roman', serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.6rem;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--jmud-border);
}
.stats-page .stats-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.25rem 0 0.5rem;
  border-bottom: 1px solid var(--jmud-border);
  padding-bottom: 0.5rem;
}
.stats-page .stats-tab {
  font-family: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', 'Times New Roman', serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  padding: 0.45rem 0.9rem;
  background: transparent;
  color: var(--jmud-fg-dim, #cfc6b8);
  border: 1px solid var(--jmud-border);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.stats-page .stats-tab:hover {
  color: var(--jmud-fg, #f0e6d2);
  border-color: var(--jmud-border-hi, #b08a4a);
}
.stats-page .stats-tab.is-active {
  background: var(--jmud-blood, #7a2424);
  color: var(--jmud-fg, #f0e6d2);
  border-color: var(--jmud-blood, #7a2424);
}
.stats-page .grafana-embed {
  width: 100%;
  height: 85vh;
  min-height: 600px;
  margin: 0.75rem 0 2rem;
  border: 1px solid var(--jmud-border);
  background: var(--jmud-bg);
}
.stats-page .grafana-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ----- Sheet click-to-reveal tooltip cards (sheet_tooltip.js) ----- */
.phb-tip {
  color: var(--jmud-accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--jmud-accent);
  cursor: help;
}
.phb-tip:hover,
.phb-tip:focus {
  color: var(--jmud-accent-hi);
  border-bottom-style: solid;
}
.phb-tip-card[hidden] { display: none; }
.phb-tip-card {
  position: absolute;
  z-index: 1000;
  max-width: 360px;
  min-width: 220px;
  padding: 12px 14px 12px 14px;
  background: var(--jmud-surface);
  color: var(--jmud-text);
  border: 1px solid var(--jmud-border-hi);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  font-size: 0.9rem;
  line-height: 1.45;
}
.phb-tip-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--jmud-muted);
  cursor: pointer;
  padding: 2px 6px;
}
.phb-tip-close:hover { color: var(--jmud-accent); }
.phb-tip-name {
  font-weight: 700;
  color: var(--jmud-accent);
  font-size: 1rem;
  margin-right: 18px;
  margin-bottom: 4px;
}
.phb-tip-meta,
.phb-tip-classes,
.phb-tip-mechanics {
  font-size: 0.8rem;
  color: var(--jmud-muted);
  margin-bottom: 2px;
}
.phb-tip-mechanics { color: var(--jmud-emphasis); }
.phb-tip-desc {
  margin-top: 8px;
  white-space: pre-wrap;
}