@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Gelasio:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Eczar:wght@400;500;600;700;800&family=Teko:wght@400;500;600;700&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap);
/* ==========================================================================
   PF2e Scribe Editor — UI Chrome
   ========================================================================== */

/* ── Editor wrapper ────────────────────────────────────────────────── */

.pf2-scribe-editor {
  display: flex;
  flex-direction: column;
  border: 1px solid #2d2d2d;
  border-radius: 8px;
  overflow: hidden;
  background: #1e1e1e;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  height: 700px;
  min-height: 400px;
}

/* ── Toolbar ───────────────────────────────────────────────────────── */

.pf2-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 10px;
  background: #252526;
  border-bottom: 1px solid #3c3c3c;
  align-items: center;
}

.pf2-toolbar-group {
  display: flex;
  gap: 2px;
  padding-right: 8px;
  border-right: 1px solid #3c3c3c;
  margin-right: 4px;
}

.pf2-toolbar-group:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

.pf2-toolbar button {
  background: transparent;
  color: #cccccc;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.3;
  white-space: nowrap;
}

.pf2-toolbar button:hover {
  background: #3c3c3c;
  border-color: #555;
  color: #ffffff;
}

.pf2-toolbar button:active {
  background: #505050;
}

/* ── Split pane ────────────────────────────────────────────────────── */

.pf2-split-pane {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.pf2-split-pane.pf2-resizing {
  user-select: none;
  cursor: col-resize;
}

.pf2-editor-pane {
  width: 50%;
  overflow: auto;
  background: #1e1e1e;
  border-right: 1px solid #3c3c3c;
}

.pf2-editor-pane .cm-editor {
  height: 100%;
}

.pf2-resizer {
  width: 6px;
  cursor: col-resize;
  background: #2d2d2d;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s;
}

.pf2-resizer:hover,
.pf2-resizing .pf2-resizer {
  background: #015c4d;
}

.pf2-resizer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 30px;
  background: #555;
  border-radius: 1px;
}

.pf2-resizer:hover::after {
  background: #ccc;
}

.pf2-preview-pane {
  width: 50%;
  overflow: auto;
  background: #e8e0d0;
  padding: 20px;
}

/* ── Status bar ────────────────────────────────────────────────────── */

.pf2-status-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 4px 12px;
  background: #007acc;
  color: #ffffff;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  border-top: 1px solid #3c3c3c;
}

.pf2-word-count {
  font-weight: 600;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .pf2-scribe-editor {
    height: auto;
    min-height: 600px;
  }

  .pf2-split-pane {
    flex-direction: column;
  }

  .pf2-editor-pane,
  .pf2-preview-pane {
    width: 100% !important;
    height: 50%;
  }

  .pf2-resizer {
    display: none;
  }

  .pf2-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .pf2-toolbar-group {
    flex-shrink: 0;
  }
}

/* ==========================================================================
   PF2e Scribe — Rendering CSS
   Direct port of scribe.pf2.tools/app/app.css + their PF2e Remaster theme.
   Colors taken from #result selectors in the live Scribe site.
   ========================================================================== */

/* ── Document base ─────────────────────────────────────────────────── */

.pf2-document {
  font-family: 'Open Sans', sans-serif;
  font-size: 10.4pt;
  line-height: 1;
  color: #1a1209;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.pf2-document * {
  line-height: 1;
  box-sizing: border-box;
}

/* ── Page (Scribe uses .page with bg-paper + flex flex-wrap) ──────── */

.pf2-page {
  background: #f4eee0;
  background-image:
    radial-gradient(ellipse at top left, rgba(255,255,255,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(180, 160, 120, 0.12) 0%, transparent 50%);
  max-width: 210mm;
  padding: 5.25rem 5.5rem;
  margin: 0 auto 0.5rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #d8c384;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Top decorative bar */
.pf2-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #5D0000;
}

/* ── Watermark (top of page, italic gray) ─────────────────────────── */

.pf2-watermark {
  position: absolute;
  font-family: 'Times New Roman', Times, serif;
  top: 0.5rem;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.4);
  font-style: italic;
  pointer-events: none;
  z-index: 1;
}

/* ── Title banner (Scribe: gold text on dark red, gold border) ────── */

.pf2-title-banner {
  position: absolute;
  top: 1.5rem;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 1;
}

.pf2-title-banner h1 {
  display: inline-block;
  font-family: 'Eczar', 'Gelasio', serif;
  font-weight: bold;
  font-variant: small-caps;
  text-align: center;
  padding: 0.25rem 1.5rem;
  background: #5D0000;
  color: #D8C384;
  border: 0.2rem solid #D8C384;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 1.2;
}

/* ── Page numbers ──────────────────────────────────────────────────── */

.pf2-pagenum {
  position: absolute;
  bottom: 1.5rem;
  right: 2rem;
  font-family: 'Times New Roman', Times, serif;
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.5);
  font-style: italic;
  font-weight: bold;
}

/* ── Column layout (CORE: flex: 1 columns wrap automatically) ─────── */

.pf2-column {
  flex: 1;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  min-width: 0;
}

.pf2-column .pf2-column:first-of-type { padding-left: 0; }
.pf2-column .pf2-column:last-of-type { padding-right: 0; }

/* Scribe puts a faint vertical divider between adjacent columns */
.pf2-column + .pf2-column {
  border-left: 1px solid rgba(216, 195, 132, 0.4);
}

.pf2-content {
  width: 100%;
}

/* w-100 spacer used by / breaks to force a row break in flex-wrap */
.pf2-document .w-100 {
  width: 100%;
  flex-basis: 100%;
}

/* Block callouts span the whole page width */
.pf2-block {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}

/* ── Spacing rules (port from app.css *+selector chain) ───────────── */

.pf2-document *+p,
.pf2-document *+h1,
.pf2-document *+h2,
.pf2-document *+h3,
.pf2-document *+h4,
.pf2-document *+h5,
.pf2-document *+h6,
.pf2-document *+table,
.pf2-document *+hr,
.pf2-document *+.pf2-block {
  margin-top: 0.5rem !important;
}

.pf2-document *+ul {
  margin-top: 0 !important;
}

.pf2-document p {
  margin: 0;
  line-height: 1.4;
  text-align: justify;
}

.pf2-document li {
  line-height: 1.4;
  text-align: justify;
}

/* ── Headings (port of Scribe's .page h1...h6 + .content h1...h6) ── */

.pf2-page h1,
.pf2-page h2,
.pf2-page h3,
.pf2-page h4,
.pf2-page h5,
.pf2-page h6 {
  font-family: 'Eczar', 'Gelasio', serif;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1;
  margin: 0;
}

/* Content area headings (Scribe theme colors) */
.pf2-content h1 {
  font-size: 1.75rem;
  color: #002564;
  font-variant: small-caps;
  font-weight: bold;
}

.pf2-content h2 {
  font-size: 1.4rem;
  color: #5D0000;
  font-family: 'Teko', sans-serif;
  font-weight: 700;
  font-variant: small-caps;
}

.pf2-content h3 {
  font-variant: small-caps;
  font-size: 1.3rem;
  color: #A76652;
  font-family: 'Teko', sans-serif;
  font-weight: 700;
}

.pf2-content h4 {
  background: #002564;
  color: #EDE3C7;
  position: relative;
  font-size: 1.1rem;
  padding: 0.3rem 0 0.25rem 0.5rem;
  border-radius: 0.75rem 0.75rem 0 0;
  letter-spacing: 0.75px;
  font-family: 'Teko', sans-serif;
  font-weight: 700;
  font-variant: small-caps;
}

.pf2-content h4::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 1.9rem;
  background: transparent;
  width: 100%;
  display: block;
  border-bottom: 1px solid #002564;
}

.pf2-content h5 {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  font-family: 'Teko', sans-serif;
}

/* Generic page text uses serif body font */
.pf2-content p,
.pf2-content li {
  font-family: 'Gelasio', serif;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ── HEAD block ────────────────────────────────────────────────────── */

.pf2-head {
  padding: 0;
  color: #5D0000 !important;
}

.pf2-head h1,
.pf2-head h3 {
  text-align: center;
  font-size: 2.25rem;
  font-variant: small-caps;
  font-weight: bold;
  color: #5D0000;
  width: 100%;
  margin-bottom: -0.5rem;
}

.pf2-head h2,
.pf2-head h4 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: -0.25rem !important;
  width: 100%;
  color: #5D0000;
  font-variant: small-caps;
  font-weight: bold;
}

.pf2-head p {
  font-family: 'Gelasio', serif;
  font-size: 1.2rem;
  font-style: italic;
  text-align: center;
  width: 100%;
  margin: 0.25rem 1rem !important;
  color: #5D0000;
  line-height: 1.3;
}

.pf2-head hr {
  background: #5D0000 !important;
  border-top-color: #5D0000 !important;
  border-bottom-color: #5D0000 !important;
  opacity: 1;
  border: none;
  border-top: 2px solid #5D0000;
  margin: 0.5rem 0 !important;
  width: 100%;
}

/* ── INFO block (dark red box, white text) ─────────────────────────── */

.pf2-info {
  background: #5D0000 !important;
  color: #fff !important;
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin: 0.5rem 0;
  font-family: 'Open Sans', sans-serif;
  display: flex;
  flex-wrap: wrap;
}

.pf2-info p,
.pf2-info h2,
.pf2-info li {
  font-size: 0.925rem;
  color: #fff;
}

.pf2-info h1 {
  font-size: 2.5rem;
  text-align: center;
  color: #fff !important;
  font-variant: small-caps;
  font-weight: bold;
  margin-bottom: -0.5rem !important;
  width: 100%;
}

.pf2-info h2 {
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.5;
  margin-bottom: -0.5rem !important;
  white-space: nowrap;
  font-family: 'Teko', 'Open Sans', sans-serif;
}

.pf2-info h3 {
  text-align: center;
  font-size: 1.25rem;
  font-kerning: none;
  margin-top: -0.5rem;
  color: #D8C384 !important;
  font-variant: small-caps;
  font-weight: bold;
  margin-bottom: -0.5rem !important;
  width: 100%;
}

.pf2-info h4 {
  font-weight: normal;
  font-size: 1.4rem;
  text-align: center;
  font-family: 'Gelasio', serif;
  color: #fff;
}

.pf2-info h6 {
  font-weight: normal;
  font-size: 1.4rem;
  text-align: left;
  font-family: 'Gelasio', serif;
  color: #fff;
}

.pf2-info h5 {
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.5;
  margin-bottom: -0.5rem !important;
  font-family: 'Teko', 'Open Sans', sans-serif;
}

.pf2-info em {
  font-size: 1rem;
  font-weight: normal;
  font-family: 'Gelasio', serif;
}

.pf2-info hr {
  background: #980000 !important;
  border-top-color: #980000 !important;
  border-bottom-color: #980000 !important;
  opacity: 1;
}

.pf2-info a {
  color: #f5d0a0;
}

/* ── NOTE block (parchment callout) ────────────────────────────────── */

.pf2-note {
  background: #D1C7B1 !important;
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin: 0.5rem 0;
  font-family: 'Open Sans', sans-serif;
}

.pf2-note p,
.pf2-note li {
  font-size: 0.925rem;
}

.pf2-note h1,
.pf2-note h2,
.pf2-note h3,
.pf2-note h4,
.pf2-note h5,
.pf2-note h6 {
  text-align: center;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: -0.5rem;
  font-family: 'Open Sans', sans-serif;
  color: #000 !important;
  width: 100%;
}

.pf2-note h1 {
  text-transform: uppercase;
  font-size: 1.25rem;
}

/* ── ITEM block (stat blocks, feats) ───────────────────────────────── */

.pf2-item {
  margin: 0.5rem 0;
}

.pf2-item h1,
.pf2-item h2 {
  text-transform: uppercase;
  font-size: 1.4rem;
  padding-top: 0.1rem;
  font-family: 'Teko', sans-serif;
  color: #000;
}

.pf2-item h2 {
  text-align: right;
  float: right;
  margin-top: -1.45rem !important;
  color: #000;
}

.pf2-item h3 {
  text-transform: uppercase;
  line-height: 1.5;
  margin-top: 0.25rem !important;
  margin-bottom: -0.5rem;
  white-space: nowrap;
  font-family: 'Teko', sans-serif;
  color: #000;
}

.pf2-item h4,
.pf2-item h5,
.pf2-item h6 {
  text-transform: uppercase;
  line-height: 1.5;
  margin-bottom: -0.5rem;
  white-space: nowrap;
  font-family: 'Open Sans', sans-serif;
  color: #000;
}

.pf2-item hr {
  margin: 0 !important;
  border: none;
  border-top: 1px solid #5D0000;
}

.pf2-item *+p {
  margin: 0 !important;
}

.pf2-item p.pf2-hang+p.pf2-hang {
  margin: 0 !important;
}

.pf2-item p+p {
  margin-top: 1rem !important;
}

.pf2-item p {
  font-size: 0.925rem;
  font-family: 'Open Sans', sans-serif;
}

/* ── RULES block (parchment with subtle bg) ───────────────────────── */

.pf2-rules {
  background: #F0E8D3 !important;
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin: 0.5rem 0;
  font-family: 'Open Sans', sans-serif;
}

.pf2-rules h1,
.pf2-rules h2 {
  font-weight: bold;
  margin-bottom: -0.5rem;
  line-height: 1.5;
  font-family: 'Open Sans', sans-serif;
  color: #1a1209;
  font-variant: normal;
  text-transform: none;
  font-size: 1rem;
}

.pf2-rules h2 {
  text-align: center;
}

.pf2-rules p,
.pf2-rules li {
  font-size: 0.925rem;
  font-family: 'Open Sans', sans-serif;
}

/* ── SAMPLE block ──────────────────────────────────────────────────── */

.pf2-sample {
  background: #EAE3D8 !important;
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin: 0.5rem 0;
  font-family: 'Open Sans', sans-serif;
}

.pf2-sample h1 {
  text-align: center;
  font-weight: bold;
  margin-bottom: -0.5rem;
  font-family: 'Open Sans', sans-serif;
}

/* ── MATH block (formula box) ─────────────────────────────────────── */

.pf2-math {
  background: #EAE3D8 !important;
  border-top: 2px solid #E0C9C0 !important;
  border-bottom: 2px solid #E0C9C0 !important;
  padding: 0.5rem;
  margin: 0.5rem 0;
}

.pf2-math p,
.pf2-math h1,
.pf2-math h2,
.pf2-math h3,
.pf2-math h4,
.pf2-math h5,
.pf2-math h6 {
  font-weight: bold;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-style: italic;
}

/* ── h2 with ordinal suffix split (e.g. "More Text 4th") ──────────── */
/* Scribe detects h2 lines ending with an ordinal number (1st, 2nd, 4th, 20th)
   and splits them so the title is on the left and the ordinal on the right. */

.pf2-h2-split {
  display: flex;
  align-items: baseline;
}

.pf2-h2-split h2 {
  margin: 0;
}

.pf2-h2-split .pf2-ordinal {
  margin-left: auto;
}

/* ── LEFT and RIGHT sidebars ───────────────────────────────────────── */
/* These are placed as siblings of .pf2-content inside a .pf2-column.
   They float left/right at 33% width so the adjacent content text wraps
   around them. Matches Scribe's .left / .right CSS exactly. */

.pf2-document .pf2-left,
.pf2-document .pf2-right {
  display: block;
  width: 33%;
  margin: 0.5rem 0;
  color: #5D0000 !important;
}

.pf2-document .pf2-left {
  float: left;
  padding-right: 0.5rem;
  margin-right: 0.5rem;
  border-right: 1px solid #5D0000 !important;
}

.pf2-document .pf2-right {
  float: right;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
  border-left: 1px solid #5D0000 !important;
}

/* The inner column inside a left/right block fills its container */
.pf2-left > .pf2-column,
.pf2-right > .pf2-column {
  display: block;
  flex: none;
  padding: 0;
  width: 100%;
}

/* Clear floats so they don't bleed into neighboring content */
.pf2-column::after {
  content: "";
  display: table;
  clear: both;
}

.pf2-left h1,
.pf2-right h1 {
  font-size: 1.25rem;
  line-height: 1.2;
  font-family: 'Teko', sans-serif;
  font-variant: small-caps;
  font-weight: bold;
  color: #5D0000;
}

.pf2-left h2,
.pf2-right h2 {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: bold;
  margin: 0 0 0.1rem;
  color: #5D0000;
}

.pf2-left h3,
.pf2-right h3 {
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: bold;
  font-family: 'Teko', sans-serif;
  color: #5D0000;
  margin-top: 0 !important;
  padding-top: 0.2em;
}

.pf2-left p,
.pf2-left h2,
.pf2-left h3 {
  text-align: right;
  line-height: 1.2;
}

.pf2-left h1 {
  text-align: right;
}

.pf2-left p,
.pf2-right p {
  margin-bottom: 0.15rem;
  line-height: 1.2;
  font-size: 0.9rem;
  font-family: 'Open Sans', sans-serif;
}

.pf2-left ul,
.pf2-left ol,
.pf2-left li,
.pf2-right ul,
.pf2-right ol,
.pf2-right li {
  list-style: none;
  padding: 0;
  line-height: 1.2;
  font-family: 'Open Sans', sans-serif;
}

.pf2-left li {
  text-align: right;
  padding-right: 0.5em;
  text-indent: -0.5em;
}

.pf2-right li {
  padding-left: 0.5em;
  text-indent: -0.5em;
}

.pf2-right *+p,
.pf2-right *+ul,
.pf2-right *+h1,
.pf2-left *+p,
.pf2-left *+ul,
.pf2-left *+h1 {
  margin-top: 0 !important;
}

.pf2-right p+h1,
.pf2-right p+h3,
.pf2-left p+h1,
.pf2-left p+h3,
.pf2-right ul+h1,
.pf2-right ul+h3,
.pf2-left ul+h1,
.pf2-left ul+h3 {
  margin-top: 1em !important;
}

/* ── Hanging indent (lines starting with **bold**) ────────────────── */

.pf2-hang {
  /* padding-left: 1em;
  text-indent: -1em; */
}

.pf2-info .pf2-hang {
  padding-left: 0;
  text-indent: 0;
}

/* ── Tables (Scribe theme: dark red header, alternating cream rows) ─ */

.pf2-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.25rem 0;
}

.pf2-page thead tr th {
  padding: 0.25rem;
  font-size: 0.9rem;
  font-weight: bold;
  background: #5D0000 !important;
  color: #fff !important;
  font-family: 'Open Sans', sans-serif;
  text-align: left;
  letter-spacing: 0.04em;
}

.pf2-page tbody tr td {
  padding: 0.25rem;
  font-size: 0.9rem;
  font-family: 'Open Sans', sans-serif;
}

.pf2-page tbody tr:nth-child(odd) {
  background: #EDE3C7 !important;
}

.pf2-page tbody tr:nth-child(even) {
  background: #F4EEE0 !important;
}

.pf2-tfoot {
  padding: 0.25rem;
  font-size: 0.85rem;
  font-style: italic;
  font-family: 'Open Sans', sans-serif;
  background: #E6D8B0 !important;
  color: #6a4a2e;
}

/* ── HR ────────────────────────────────────────────────────────────── */

.pf2-document hr {
  border: none;
  border-top: 1px solid #5D0000;
  margin: 0.5rem 0;
  height: 0;
  opacity: 1;
}

/* ── Lists ─────────────────────────────────────────────────────────── */

.pf2-document ul {
  margin: 0 0 0.25rem;
  padding-left: 1.5rem;
}

.pf2-document ol {
  margin: 0 0 0.25rem;
  padding-left: 1.5rem;
}

.pf2-document li {
  margin-bottom: 0.1rem;
}

/* ── Inline ────────────────────────────────────────────────────────── */

.pf2-document strong {
  font-weight: bold;
  color: #1a1209;
}

.pf2-document em {
  font-style: italic;
}

.pf2-document a {
  color: rgb(172, 13, 74) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pf2-document a:hover {
  color: rgb(211, 126, 14) !important;
}

.pf2-document code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  background: rgba(122, 40, 24, 0.08);
  padding: 1px 4px;
  border-radius: 2px;
}

/* ── Action icons (Scribe's PNG icons) ─────────────────────────────── */
/* Scribe uses class="text-img" with these specific dimensions. */

.pf2-action-icon {
  display: inline-block;
  max-height: 0.85em;
  width: auto;
  vertical-align: -0.15em;
  margin-top: -0.25em;
  filter: none !important;
  mix-blend-mode: normal;
}

/* ── Trait badges (Scribe colors from the official theme) ─────────── */

.pf2-traits {
  display: inline-block;
  background: #d8c384 !important;
  padding: 0 0.125rem;
  margin: 0.25rem 0;
  line-height: 1;
}

.pf-trait {
  display: inline-block;
  padding: 0.25rem 0.5rem 0.1rem 0.5rem;
  font-weight: bold;
  line-height: 1;
  text-transform: uppercase;
  font-size: 0.8rem;
  border-width: 0.15rem;
  border-style: solid;
  border-right-width: 0.1rem;
  border-left-width: 0.1rem;
  text-align: center;
  font-kerning: none;
  background: #5d0000 !important;
  color: #fff !important;
  border-color: #d8c384 !important;
  font-family: 'Teko', sans-serif !important;
  letter-spacing: 0.04em;
}

.pf-trait-uncommon {
  background: #98503c !important;
}

.pf-trait-rare {
  background: #002564 !important;
}

.pf-trait-unique {
  background: #54166d !important;
}

.pf-trait-size {
  background: #3a7a58 !important;
}

.pf-trait-align {
  background: #566193 !important;
}

.pf-trait-type {
  background: #004316 !important;
}

/* ── Sticky notes ──────────────────────────────────────────────────── */

.pf2-sticky {
  background: #fff8b0;
  border: 1px solid #d4c87a;
  padding: 8px 12px;
  font-family: 'Caveat', 'Comic Sans MS', cursive;
  font-size: 11pt;
  color: #3a2e0a;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
  transform: rotate(-1deg);
  max-width: 200px;
  z-index: 10;
}

/* ── Images ────────────────────────────────────────────────────────── */

.pf2-page img {
  max-width: 100%;
  mix-blend-mode: multiply;
}

.pf2-page .pf2-info img {
  mix-blend-mode: normal;
}

/* ── Page break in print ───────────────────────────────────────────── */

@media print {
  .pf2-page + .pf2-page {
    page-break-before: always;
  }
}