/* ─────────────────────────────────────────────────────────────
   Slime Colony — Rulebook styles
   Page size: 9.5in × 8.5in (landscape squarish, Wingspan/Everdell feel)
   Browser view: pages stacked with drop shadow so it's obvious
     where a page break falls. Iterate freely, then File → Print → PDF.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Palette (mirrors css/site.css so the book stays in-family) */
  --paper:      #F4F0E8;        /* cream page */
  --paper-2:    #EDE6D6;        /* slightly warmer cream, for panels */
  --paper-3:    #E4D9C0;        /* deeper cream, for chips / dividers */
  --ink:        #3A3028;        /* dark warm brown, body text */
  --ink-soft:   #6B5D4E;        /* secondary text */
  --ink-mute:   #9A8C7A;
  --line:       #C9BCA6;        /* hairline */
  --shadow:     rgba(58,48,40,0.15);

  --navy:       #1A1A2E;        /* cover ground */
  --navy-2:     #232342;
  --gold:       #D9B96A;
  --gold-2:     #C79E4A;

  --ember:      #D48A5A;
  --dew:        #5A8AA0;
  --moss:       #7A9A5A;
  --pebble:     #8B7DAA;

  --ap:         #5A8AA0;        /* AP chip = swarm blue */

  --page-w:     9.5in;
  --page-h:     8.5in;
  --marg-x:     0.55in;
  --marg-y:     0.5in;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: #2A2A3E;
  font-family: 'Fredoka', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Browser-view frame ─── */
body {
  padding: 40px 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* ─── The page ─── */
.page {
  width: var(--page-w);
  height: var(--page-h);
  background: var(--paper);
  color: var(--ink);
  padding: var(--marg-y) var(--marg-x);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  page-break-after: always;
  break-after: page;
}

.page.cover  { background: var(--navy); color: #F0F0E0; padding: 0; }

/* Running head / folio (page footer) */
.page > .folio {
  position: absolute;
  bottom: 0.28in;
  left: var(--marg-x);
  right: var(--marg-x);
  display: flex;
  justify-content: space-between;
  color: var(--ink-mute);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.page.cover > .folio { display: none; }

/* ─── Typography ─── */
h1, h2, h3, h4, h5 { font-weight: 700; color: var(--ink); line-height: 1.15; }
h1 { font-size: 34px; letter-spacing: 1px; }
h2 { font-size: 22px; letter-spacing: 0.5px; margin-bottom: 8px; }
h3 { font-size: 16px; letter-spacing: 0.5px; }
h4 { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); }

p, li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
p { margin-bottom: 8px; }
p strong, li strong { color: var(--ink); font-weight: 600; }
ul, ol { padding-left: 18px; margin-bottom: 10px; }
li { margin-bottom: 3px; }

.lead {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 14px;
}

.chap-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--ink-mute);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}

.rule { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }

/* ─── Cover page ─── */
.cover-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.7in;
  text-align: center;
  position: relative;
}
.cover-inner .kicker {
  color: rgba(217,185,106,0.65);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 22px;
}
.cover-inner .edition {
  position: absolute;
  bottom: 0.35in;
  left: 0;
  right: 0;
  color: rgba(217,185,106,0.35);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
}
.cover-inner h1 {
  font-size: 78px;
  letter-spacing: 6px;
  color: #F4F0E8;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 14px;
}
.cover-inner .sub {
  color: #C9BCA6;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 40px;
}
.cover-inner .players {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-top: 1px solid rgba(217,185,106,0.35);
  border-bottom: 1px solid rgba(217,185,106,0.35);
  padding: 10px 24px;
}
.cover-inner .players span + span::before {
  content: "·";
  margin: 0 12px;
  color: rgba(217,185,106,0.5);
}
.cover-slimes {
  display: flex;
  gap: 22px;
  margin: 36px 0 32px;
  align-items: flex-end;
}
.cover-slimes img { width: 62px; height: 62px; }
.cover-hero {
  margin: 30px 0 26px;
  width: 220px;
  height: auto;
  opacity: 0.96;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.45));
}
.cover-inner .footer-note {
  position: absolute;
  bottom: 0.55in;
  left: 0;
  right: 0;
  color: rgba(217,185,106,0.5);
  font-size: 10px;
  letter-spacing: 2px;
  text-align: center;
}

/* ─── Chapter opener (accent bar) ─── */
.chapter-head {
  border-left: 6px solid var(--gold);
  padding-left: 14px;
  margin-bottom: 18px;
}
.chapter-head .chap-num {
  display: block;
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--ink-mute);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}
.chapter-head h1 { font-size: 30px; letter-spacing: 0.5px; margin-bottom: 2px; }
.chapter-head .sub { color: var(--ink-soft); font-size: 13px; font-style: italic; }

/* ─── Two-column layout for interior pages ─── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  height: 100%;
}
.two-col.tight { gap: 16px; }
.two-col .col { display: flex; flex-direction: column; gap: 10px; }

.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* ─── Callouts & sidebars ─── */
.callout {
  background: var(--paper-2);
  border-left: 4px solid var(--dew);
  border-radius: 0 6px 6px 0;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 12.5px;
  color: var(--ink);
}
.callout.tip     { border-left-color: var(--moss); }
.callout.warn    { border-left-color: var(--ember); }
.callout.gotcha  { border-left-color: var(--ember); background: rgba(212,138,90,0.10); }
.callout.example { border-left-color: var(--gold); background: rgba(217,185,106,0.14); }
.callout.core    { border-left-color: var(--pebble); background: rgba(139,125,170,0.10); }
.callout h4 {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--ink);
  margin-bottom: 4px;
}
.callout p, .callout li { font-size: 12px; color: var(--ink); }
.callout ul { padding-left: 16px; margin: 4px 0 0; }

/* ─── Phase tag chips ─── */
.phase-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #F4F0E8;
  vertical-align: 1px;
  white-space: nowrap;
}
.phase-tag.emerge { background: #D48A5A; }
.phase-tag.mush   { background: #7A9A5A; }
.phase-tag.swarm  { background: #5A8AA0; }
.phase-tag.settle { background: #8B7DAA; }

.ap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--ap);
  color: #F4F0E8;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  vertical-align: 1px;
}
.ap.free { background: var(--ink-mute); }

/* ─── Inline icons ─── */
.icon,
.slm {
  display: inline-block;
  vertical-align: -0.18em;
  height: 1.05em;
  width: auto;
}
.slm { height: 1.35em; vertical-align: -0.32em; }
.icon.lg, .slm.lg { height: 1.6em; vertical-align: -0.4em; }
.icon.xl, .slm.xl { height: 2.2em; vertical-align: -0.55em; }

/* ─── Typed-icon wrapper (matches player-mat convention) ─── */
/* A base icon (slime, tile, resource) with a small colored resource
   sup-type badge in the top-left corner, indicating "of this type". */
.typed {
  display: inline-block;
  position: relative;
  vertical-align: -0.32em;
  margin: 0 1px;
}
.typed > .icon,
.typed > .slm { display: block; vertical-align: baseline; }
.typed .sup {
  position: absolute;
  top: -12%;
  left: -12%;
  height: 55%;
  width: auto;
  z-index: 2;
  pointer-events: none;
}
.typed .sup-r {
  position: absolute;
  top: -12%;
  right: -12%;
  height: 55%;
  width: auto;
  z-index: 2;
}

/* Slime + dissolve X overlay */
.dissolve-wrap {
  display: inline-block;
  position: relative;
  vertical-align: -0.32em;
}
.dissolve-wrap .dissolve-x {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  opacity: 0.9;
  z-index: 3;
  pointer-events: none;
}

/* Colored disc halo for slime hero images (cover, spotlight) */
.slime-halo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 4px;
}
.slime-halo.ember  { background: rgba(212,138,90,0.35); }
.slime-halo.dew    { background: rgba(90,138,160,0.40); }
.slime-halo.moss   { background: rgba(122,154,90,0.35); }
.slime-halo.pebble { background: rgba(139,125,170,0.40); }

/* ─── Icon legend rows ─── */
.legend {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px 14px;
  align-items: center;
  margin: 6px 0;
}
.legend .lg-glyph {
  height: 32px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.legend .lg-glyph img { height: 28px; width: auto; }
.legend .lg-text { font-size: 12px; color: var(--ink); }
.legend .lg-text b { color: var(--ink); }
.legend .lg-text .k { color: var(--ink-soft); }

/* Compact real-component visual samples for What's in the Box.
   Each variant sets a fixed-size wrapper and scales the inner scene so
   the real <player-token>/<dungeon-tile>/<slime-chit>/<rite-card> fits. */
.wib-viz {
  display: inline-block;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
}
.wib-viz .mini-scene-inner {
  display: block;
  position: relative;
  transform-origin: top left;
}
.wib-viz.wib-token {
  width: 32px; height: 32px;
}
.wib-viz.wib-token .mini-scene-inner {
  width: 1in; height: 1in; transform: scale(0.333);
}
.wib-viz.wib-chit {
  width: 22px; height: 22px;
}
.wib-viz.wib-chit .mini-scene-inner {
  width: 0.5in; height: 0.5in; transform: scale(0.458);
}
.wib-viz.wib-tile {
  width: 44px; height: 44px;
}
.wib-viz.wib-tile .mini-scene-inner {
  width: 3in; height: 3in; transform: scale(0.153);
}
.wib-viz.wib-card {
  width: 54px; height: 38px;
  /* Small padding + no clip so the card's rounded corners don't get
     shaved off by overflow:hidden. */
  overflow: visible;
}
.wib-viz.wib-card .mini-scene-inner {
  width: 2.4in; height: 1.6in; transform: scale(0.212);
}

/* CSS-drawn resource cube — an isometric-ish 3D block. Uses a
   diagonal gradient overlay + top-left/bottom-right bevel edges +
   drop shadow to sell "solid colored acrylic block seen from above". */
.wib-cube {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  position: relative;
  vertical-align: middle;
  /* Solid color is set per data-type below via background-color. The
     gradient stacks on TOP of the color to shade the visible faces. */
  background-image: linear-gradient(140deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.15) 22%,
    transparent 45%,
    rgba(0,0,0,0.18) 75%,
    rgba(0,0,0,0.30) 100%);
  border-top:    1px solid rgba(255,255,255,0.45);
  border-left:   1px solid rgba(255,255,255,0.30);
  border-right:  1px solid rgba(0,0,0,0.45);
  border-bottom: 1px solid rgba(0,0,0,0.45);
  box-shadow:
    0 2px 3px rgba(0,0,0,0.30),
    inset 0 0 0 0.5px rgba(0,0,0,0.15);
}
.wib-cube[data-type="ember"]  { background-color: #D48A8A; }
.wib-cube[data-type="dew"]    { background-color: #7BA7CC; }
.wib-cube[data-type="moss"]   { background-color: #7FB87F; }
.wib-cube[data-type="pebble"] { background-color: #A688BF; }

/* Dormant marker: same cube shape as resources but clear/uncolored
   (a frosted piece of translucent acrylic). The 3D-face gradient is
   applied on top of a neutral off-white base. */
.wib-cube[data-type="dormant"] {
  background-color: rgba(230, 233, 236, 0.55);
  border-top:    1px solid rgba(255,255,255,0.85);
  border-left:   1px solid rgba(255,255,255,0.60);
  border-right:  1px solid rgba(0,0,0,0.20);
  border-bottom: 1px solid rgba(0,0,0,0.20);
}

/* Multi-icon legend — wider glyph column that fits 4 side-by-side
   examples (used on Icon Language to demo all four resource types). */
.legend.mul {
  grid-template-columns: 116px 1fr;
  gap: 6px 12px;
}
.legend.mul .lg-glyph {
  width: 116px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
.legend.mul .lg-glyph img.icon { height: 22px; }
.legend.mul .lg-glyph img.slm { height: 26px; }
.legend.mul .lg-glyph .typed {
  display: inline-block;
  position: relative;
  margin: 0;
  vertical-align: baseline;
  line-height: 0;
}
.legend.mul .lg-glyph .typed > .icon,
.legend.mul .lg-glyph .typed > .slm { display: block; height: 26px; }
/* Explicit pixel sup so it doesn't collapse to 0 when the flex context
   robs the parent of a resolved height. */
.legend.mul .lg-glyph .typed > .sup {
  position: absolute;
  top: -4px;
  left: -4px;
  height: 15px;
  width: auto;
  z-index: 2;
  pointer-events: none;
}
.legend.mul .lg-glyph .dissolve-wrap { height: 26px; }
.legend.mul .lg-glyph .dissolve-wrap > .slm { height: 26px; }

/* Compact WIB legend — matches .legend but with a bigger visual column
   so tile/card samples fit. */
.legend.wib {
  grid-template-columns: 96px 1fr;
  gap: 5px 10px;
  margin: 3px 0 8px;
}
.legend.wib .lg-glyph {
  width: 96px;
  height: 44px;
}
.legend.wib .lg-text { font-size: 11px; line-height: 1.35; }

/* Lock the sample sizes so flexbox can't squish them into rectangles. */
.legend.wib .lg-glyph .wib-cube,
.legend.wib .lg-glyph .wib-viz,
.legend.wib .lg-glyph > span { flex-shrink: 0; }

/* ─── Action rows (Swarm action table) ─── */
.action {
  display: grid;
  grid-template-columns: 56px 110px 1fr;
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.action:last-child { border-bottom: 0; }
.action .a-cost { padding-top: 1px; }
.action .a-name {
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
}
.action .a-desc { font-size: 12px; color: var(--ink-soft); }
.action .a-desc .gotcha {
  display: block;
  margin-top: 3px;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-mute);
}

/* ─── Setup steps ─── */
.step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.step:last-child { border-bottom: 0; }
.step .n {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.step h3 { font-size: 13px; margin-bottom: 2px; }
.step p { font-size: 12px; margin-bottom: 0; }
.step ul { padding-left: 16px; margin-top: 4px; }
.step li { font-size: 12px; }

/* ─── Grid diagram (setup) ─── */
.diagram {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  text-align: center;
  margin: 8px 0;
}
.diagram .grid {
  display: inline-grid;
  gap: 3px;
  padding: 6px;
  background: var(--paper-3);
  border-radius: 4px;
}
.diagram .cell {
  width: 32px; height: 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--ink-mute);
  font-weight: 600;
}
.diagram .cell.well {
  background: var(--gold);
  border-color: var(--gold-2);
  color: var(--navy);
}
.diagram .cell.face-down { background: var(--paper-3); }
.diagram .cap { display: block; margin-top: 6px; font-size: 10px; color: var(--ink-mute); letter-spacing: 1.5px; text-transform: uppercase; }

/* ─── Phase card block (round overview) ─── */
.phase-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--paper-2);
  position: relative;
}
.phase-card .lbl {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.phase-card h3 { font-size: 14px; margin-bottom: 4px; }
.phase-card p { font-size: 11.5px; margin-bottom: 4px; }
.phase-card ul { padding-left: 14px; margin: 0; }
.phase-card li { font-size: 11px; margin-bottom: 2px; }

/* ─── Tier / stats table ─── */
table.stats {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 6px 0 10px;
}
table.stats th, table.stats td {
  border-bottom: 1px solid var(--line);
  padding: 5px 7px;
  text-align: left;
}
table.stats th {
  background: var(--paper-2);
  color: var(--ink);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
table.stats td.c, table.stats th.c { text-align: center; }
table.stats tr:last-child td { border-bottom: 0; }

/* ─── Q&A ─── */
.qa { margin-bottom: 10px; }
.qa .q {
  color: var(--ink);
  font-weight: 700;
  font-size: 12.5px;
  margin-bottom: 3px;
}
.qa .q::before {
  content: "Q ";
  color: var(--gold-2);
  font-weight: 700;
  letter-spacing: 1px;
}
.qa .a { font-size: 12px; color: var(--ink-soft); }
.qa .a::before {
  content: "A ";
  color: var(--dew);
  font-weight: 700;
  letter-spacing: 1px;
}

/* ─── Kicker headers (small section labels) ─── */
.kicker-hd {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--ink-mute);
  text-transform: uppercase;
  font-weight: 600;
  margin: 10px 0 4px;
}

/* ─── Numbered list with round number circles ─── */
.numbered { list-style: none; padding-left: 0; }
.numbered li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--ink);
}
.numbered li::before {
  content: counter(li-numbered);
  counter-increment: li-numbered;
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  background: var(--dew);
  color: #F4F0E8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.numbered { counter-reset: li-numbered; }

/* ─── Setup page layout (Flamecraft-style: graphic on top, steps below) ─── */
.setup-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.setup-page .setup-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.setup-page .setup-title h1 { font-size: 24px; letter-spacing: 0.5px; margin: 0; }
.setup-page .setup-title .sub { color: var(--ink-soft); font-size: 12px; font-style: italic; }

/* Mini-scene container: sized in book inches, holds a scaled inner box
   at physical-inch coordinates. Real dungeon-tile / player-mat / card-back
   components render at their true physical size and are scaled down.
   Transparent — no border/background — so the graphic sits directly on
   the page like a hand-drawn diagram. */
.mini-scene {
  position: relative;
  overflow: hidden;
  background: transparent;
  margin: 0 auto;
}
.mini-scene-inner {
  position: relative;
  transform-origin: top left;
}
/* Absolute-positioned children of .mini-scene-inner are placed in inches. */
.mini-scene-inner > * { position: absolute; }

/* Overlay pin layer sits on top of the scaled scene; pin positions use
   percentages of the .mini-scene box so they track any scale changes. */
.mini-scene .pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}
.mini-scene .pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: #F4E9C6;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 3px 8px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.15);
  border: 2.5px solid var(--gold);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

/* Steps row (bottom of a setup page). Each step is a small card with a
   number badge, a short title, and one line of description. */
.setup-steps {
  display: grid;
  gap: 8px;
}
.setup-steps.cols-4 { grid-template-columns: repeat(4, 1fr); }
.setup-steps.cols-3 { grid-template-columns: repeat(3, 1fr); }
.setup-steps.cols-2 { grid-template-columns: repeat(2, 1fr); }
.setup-step {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px 8px;
  background: var(--paper-2);
  border-radius: 5px;
}
.setup-step .n {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-2);
  color: var(--paper);
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.setup-step h4 {
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--ink);
  text-transform: none;
  margin-bottom: 1px;
}
.setup-step p {
  font-size: 10.5px;
  line-height: 1.35;
  margin: 0;
  color: var(--ink-soft);
}
.setup-step b { color: var(--ink); }

/* Mini-scene deck-count caption (inside the scene). */
.mini-deck-cap {
  font-family: 'Fredoka', sans-serif;
  color: var(--ink);
  font-weight: 700;
  text-align: center;
  line-height: 1.05;
}
.mini-deck-cap .label {
  display: block;
  font-size: 0.16in;
  color: var(--ink-mute);
  font-weight: 500;
  letter-spacing: 0.03in;
  text-transform: uppercase;
  margin-top: 0.03in;
}

/* Small pile-shadow rectangles behind a stack (reuses scene.html idea). */
.book-pile-shadow {
  background: rgba(0,0,0,0.10);
  border-radius: 0.1in;
}

/* Row labels ("Nodes", "Springs", "Resources", "Chits") on the LEFT
   of a supply row, sized in physical inches so they scale with the
   rest of the scene. Font sized to fit the longest label ("Resources")
   inside the 1.8in label column with right-padding. */
.mini-row-label {
  font-family: 'Fredoka', sans-serif;
  color: var(--ink);
  font-size: 0.30in;
  font-weight: 700;
  letter-spacing: 0.015in;
  text-align: right;
  padding-right: 0.15in;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 3.25in;
}
/* Column labels (Ember, Dew, Moss, Pebble, Caverns) above the reserves. */
.mini-col-label {
  font-family: 'Fredoka', sans-serif;
  color: var(--ink-soft);
  font-size: 0.24in;
  font-weight: 600;
  text-align: center;
}

/* Resource cube pile inside a mini-scene (4-3-1 pyramid, ~1.5×1.25in). */
.mini-res-pile {
  position: relative;
  width: 1.5in;
  height: 1.25in;
}
.mini-res-pile .cube {
  position: absolute;
  width: 0.48in;
  height: 0.48in;
  border-radius: 0.04in;
  border: 1px solid rgba(0,0,0,0.28);
  box-shadow: 0 0.02in 0.05in rgba(0,0,0,0.18), inset 0 0.5mm 0 rgba(255,255,255,0.28);
}
.mini-res-pile[data-type="ember"]  .cube { background: #D48A8A; }
.mini-res-pile[data-type="dew"]    .cube { background: #7BA7CC; }
.mini-res-pile[data-type="moss"]   .cube { background: #7FB87F; }
.mini-res-pile[data-type="pebble"] .cube { background: #A688BF; }
.mini-res-pile .cube:nth-child(1) { bottom: 0;      left: 0in;    }
.mini-res-pile .cube:nth-child(2) { bottom: 0;      left: 0.34in; }
.mini-res-pile .cube:nth-child(3) { bottom: 0;      left: 0.68in; }
.mini-res-pile .cube:nth-child(4) { bottom: 0;      left: 1.02in; }
.mini-res-pile .cube:nth-child(5) { bottom: 0.34in; left: 0.17in; }
.mini-res-pile .cube:nth-child(6) { bottom: 0.34in; left: 0.51in; }
.mini-res-pile .cube:nth-child(7) { bottom: 0.34in; left: 0.85in; }
.mini-res-pile .cube:nth-child(8) { bottom: 0.68in; left: 0.51in; }

.mini-dormant-pile {
  position: relative;
  width: 1.5in;
  height: 1.25in;
}
.mini-dormant-pile .marker {
  position: absolute;
  width: 0.56in;
  height: 0.56in;
  border-radius: 50%;
  border: 1.5px solid #989083;
  background: radial-gradient(circle at 35% 30%,
              rgba(255,255,255,0.85) 0%,
              rgba(220,216,210,0.55) 40%,
              rgba(180,176,168,0.40) 100%);
  box-shadow: 0 0.02in 0.05in rgba(0,0,0,0.15);
}
.mini-dormant-pile .marker:nth-child(1) { bottom: 0;      left: 0in;    }
.mini-dormant-pile .marker:nth-child(2) { bottom: 0;      left: 0.47in; }
.mini-dormant-pile .marker:nth-child(3) { bottom: 0;      left: 0.94in; }
.mini-dormant-pile .marker:nth-child(4) { bottom: 0.34in; left: 0.24in; }
.mini-dormant-pile .marker:nth-child(5) { bottom: 0.34in; left: 0.70in; }
.mini-dormant-pile .marker:nth-child(6) { bottom: 0.68in; left: 0.47in; }

/* Book chit pile — compact sample of per-type slime chits (Droplet ×3,
   Big ×1, King, Queen), sized in physical inches so it scales with the
   rest of the mini-scene. */
.book-chit-pile {
  position: relative;
  width:  2.5in;
  height: 0.9in;
}
.book-chit-pile > slime-chit { position: absolute; display: block; }
.book-chit-pile .cp-d1 { left: 0.05in; top: 0.35in; }
.book-chit-pile .cp-d2 { left: 0.55in; top: 0.35in; }
.book-chit-pile .cp-d3 { left: 1.05in; top: 0.35in; }
.book-chit-pile .cp-b1 { left: 1.55in; top: 0.28in; }
.book-chit-pile .cp-k  { left: 0.30in; top: 0.00in; }
.book-chit-pile .cp-q  { left: 0.85in; top: 0.00in; }

/* A cell in the mini-scene 5×5 grid — a positioned parent so its
   dungeon-tile / card-back child sits flat and any absolute-positioned
   starting-droplet tokens anchor to the cell (not the mini-scene root). */
.mini-cell {
  position: relative;
  width: 3.25in;
  height: 3.25in;
}
.mini-cell > dungeon-tile,
.mini-cell > card-back {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* Player-token and slime-chit overlays on a dungeon-tile cell inside the
   mini-scene. Mirrors scene.html conventions so 4 starting droplets sit
   in the top half of the tile, each with a chit on top. */
.mini-cell-token,
.mini-cell-chit {
  position: absolute !important;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
}
.mini-cell-chit { z-index: 6; }
.mini-cell-token--well-1,
.mini-cell-chit--well-1  { left: calc(50% - 0.65in); top: calc(50% - 0.90in); }
.mini-cell-token--well-2,
.mini-cell-chit--well-2  { left: calc(50% + 0.65in); top: calc(50% - 0.90in); }
.mini-cell-token--well-3,
.mini-cell-chit--well-3  { left: calc(50% - 0.65in); top: calc(50% + 0.35in); }
.mini-cell-token--well-4,
.mini-cell-chit--well-4  { left: calc(50% + 0.65in); top: calc(50% + 0.35in); }

/* Mat tokens injected inside the player-mat's own .slime-zone slots.
   Copied from scene.html so mats look identical whether shown in the
   scene tool or the rulebook. */
.mat-token {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  z-index: 5;
  pointer-events: none;
}
.mat-token--big   { transform: translate(-50%, -65%); }
.mat-token--royal { transform: translate(-50%, -55%); }

/* ─── Player Token + Slime Chit anatomy visual (Setup — Colony page) ─── */
/* Uses real <player-token> and <slime-chit> components scaled down inside
   .mini-scene wrappers, laid out as: Token + Chit = Slime (equation-style)
   with an "after Mutate" example on a second row. */
.anatomy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 4px;
}
.anatomy-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.anatomy-op {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-mute);
  align-self: center;
  padding: 0 2px;
}
.anatomy-label {
  font-size: 10px;
  color: var(--ink-soft);
  text-align: center;
  max-width: 72px;
  line-height: 1.2;
}
.anatomy-label b { color: var(--ink); }
.anatomy-stack {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 54px;
}
.anatomy-chit-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.anatomy-below {
  border-top: 1px dashed var(--line);
  padding-top: 6px;
  margin-top: 6px;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
}
.anatomy-note {
  font-size: 10.5px;
  color: var(--ink);
  max-width: 165px;
  line-height: 1.3;
  flex-shrink: 0;
}
.anatomy-note b { color: var(--ink); }
.anatomy-below .anatomy-step { gap: 2px; }
.anatomy-below .anatomy-label {
  font-size: 9.5px;
  max-width: 58px;
}
/* In the below row, the stacks are 44px (matching the smaller token
   size used there). Override the default 54px stack so the chit
   overlay centers on the actual token, not on empty space. */
.anatomy-below .anatomy-stack {
  width: 44px;
  height: 44px;
}
/* Curved SVG arrow — a shallow arc from the Slime Chit (right) to the
   Player Token (left). Aligned near the top of the row so the arrow's
   own vertical center lines up with the token image (not the step's
   label-inclusive center). */
.anatomy-arrow {
  width: 50px;
  height: 24px;
  align-self: flex-start;
  margin-top: 16px;
  overflow: visible;
  flex-shrink: 0;
}

/* ─── Legacy token-viz (kept for any inline anatomy elsewhere) ─── */
.token-viz-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.token-viz {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--paper);
  border-radius: 6px;
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink);
}
.token-viz .stack {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.token-viz .stack .tk {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.4);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.token-viz .stack .tk[data-color="red"]    { background: #D48A8A; }
.token-viz .stack .tk[data-color="blue"]   { background: #7BA7CC; }
.token-viz .stack .tk[data-color="green"]  { background: #7FB87F; }
.token-viz .stack .tk[data-color="purple"] { background: #A688BF; }
.token-viz .stack .ch {
  position: absolute;
  top: 22%; left: 22%;
  width: 56%; height: 56%;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 1px 2px rgba(0,0,0,0.25);
}
.token-viz .stack .ch[data-type="ember"]  { background: #D48A5A; }
.token-viz .stack .ch[data-type="dew"]    { background: #5A8AA0; }
.token-viz .stack .ch[data-type="moss"]   { background: #7A9A5A; }
.token-viz .stack .ch[data-type="pebble"] { background: #8B7DAA; }
.token-viz b { color: var(--ink); }

/* Force mat's slot to be a positioning parent (matches scene.html so the
   .slot-res cube can center inside instead of escaping to the mat root). */
player-mat .slime-zone .slot { position: relative; }
.slot-res {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72%;
  height: 72%;
  border-radius: 0.4mm;
  border: 1px solid rgba(0,0,0,0.28);
  box-shadow:
    0 0.02in 0.05in rgba(0,0,0,0.18),
    inset 0 0.5mm 0 rgba(255,255,255,0.28);
}
.slot-res[data-type="ember"]  { background: #D48A8A; }
.slot-res[data-type="dew"]    { background: #7BA7CC; }
.slot-res[data-type="moss"]   { background: #7FB87F; }
.slot-res[data-type="pebble"] { background: #A688BF; }

/* ─── Phase-flow (Round at a Glance — vertical steps, mat-style) ─── */
.phase-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phase-flow-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: start;
  padding: 7px 10px 8px;
  background: var(--paper-2);
  border-radius: 6px;
  border-left: 4px solid var(--line);
}
.phase-flow-row.emerge { border-left-color: #D48A5A; }
.phase-flow-row.mush   { border-left-color: #7A9A5A; }
.phase-flow-row.swarm  { border-left-color: #5A8AA0; }
.phase-flow-row.settle { border-left-color: #8B7DAA; }
.phase-flow-row .phase-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-top: 2px;
}
.phase-flow-row .phase-slot .phase-tag { font-size: 9px; padding: 2px 6px; }
.phase-flow-row .phase-slot .n { color: var(--ink-mute); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.phase-flow-row .phase-body h3 {
  font-size: 13px;
  margin-bottom: 2px;
  color: var(--ink);
}
.phase-flow-row .phase-body .sub { color: var(--ink-mute); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.phase-flow-row .phase-body ol,
.phase-flow-row .phase-body ul {
  padding-left: 16px;
  margin: 4px 0 0;
}
.phase-flow-row .phase-body li {
  font-size: 11.5px;
  margin-bottom: 2px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.phase-flow-row .phase-body li b { color: var(--ink); }

/* ─── Sample-round walkthrough (Round at a Glance right column) ─── */
.walk {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 6px;
}
.walk h4 {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--ink);
  margin-bottom: 6px;
}
.walk .walk-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--line);
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.35;
}
.walk .walk-row:last-child { border-bottom: 0; }
.walk .walk-row .when {
  color: var(--ink);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.5px;
}
.walk .walk-row b { color: var(--ink); }

/* ─── Type themes strip (Core Concepts) ─── */
.type-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.type-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  background: var(--paper-2);
  border-left: 4px solid var(--line);
  border-radius: 0 6px 6px 0;
  padding: 6px 10px;
}
.type-row.ember  { border-left-color: var(--ember); }
.type-row.dew    { border-left-color: var(--dew); }
.type-row.moss   { border-left-color: var(--moss); }
.type-row.pebble { border-left-color: var(--pebble); }
.type-row .icon { height: 24px; }
.type-row > div { font-size: 12px; color: var(--ink); }
.type-row em { color: var(--ink-soft); font-style: italic; }

/* ─── Quick Reference back page cells ─── */
.qr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.qr-cell {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
}
.qr-cell h4 {
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.qr-cell ul { padding-left: 14px; margin: 0; }
.qr-cell li { font-size: 11px; margin-bottom: 2px; color: var(--ink-soft); }
.qr-cell li b { color: var(--ink); }

/* ─── Table of contents ─── */
.toc-list {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  columns: 2;
  column-gap: 24px;
}
.toc-list li {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--line);
  font-size: 12px;
  color: var(--ink);
  break-inside: avoid;
}
.toc-list li .pg { color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.toc-list li.section {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-2);
  font-weight: 700;
  border-bottom: 0;
  margin-top: 8px;
}
.toc-list li.section:first-child { margin-top: 0; }

/* ─── Print ─── */
@page {
  size: 9.5in 8.5in;
  margin: 0;
}
@media print {
  html, body { background: white; padding: 0; }
  body { display: block; gap: 0; }
  .page {
    box-shadow: none;
    width: 9.5in;
    height: 8.5in;
    page-break-after: always;
    break-after: page;
  }
  .page:last-child { page-break-after: auto; }
  .no-print { display: none !important; }
}

/* ─── Tutorial Mode — setup-style board diagrams ─── */
.board-diagram {
  display: grid;
  gap: 3px;
  margin: 6px 0 4px;
}
.board-diagram.g2 {
  grid-template-columns: repeat(2, 1fr);
  width: 1.35in;
}
.board-diagram.g2.lg {
  width: 1.65in;
}
.board-diagram > div {
  aspect-ratio: 1;
  background: rgba(90, 138, 160, 0.15);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: var(--ink-soft);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: center;
  padding: 10px 3px 3px;
  position: relative;
  line-height: 1.1;
  min-height: 0;
  box-sizing: border-box;
}
.board-diagram > div .coord {
  position: absolute;
  left: 3px;
  top: 2px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink-mute);
  line-height: 1;
}
.board-diagram > div.fd {
  background: #C9BCA6;
  color: #6B5D4E;
}
.board-diagram > div.node-ember {
  background: rgba(212, 138, 90, 0.35);
  color: #6E3C3C;
}
.board-diagram > div.node-moss {
  background: rgba(122, 154, 90, 0.35);
  color: #3A6238;
}
.board-diagram > div.spring-ember {
  background: rgba(212, 138, 90, 0.55);
  color: #3A3028;
}
.board-diagram > div.spring-moss {
  background: rgba(122, 154, 90, 0.55);
  color: #3A3028;
}
.board-diagram > div.cavern {
  background: rgba(90, 138, 160, 0.28);
  color: #2D5A7E;
}
.board-diagram > div .tile-name {
  font-size: 7.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.15;
  flex: 0 0 auto;
  max-width: 100%;
}
.board-diagram > div .tile-sub {
  font-size: 7px;
  font-weight: 500;
  opacity: 0.85;
  flex: 0 0 auto;
  margin-top: 1px;
}
.board-diagram > div .tile-face {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  margin-top: 2px;
  flex: 0 0 auto;
}
/* Loose resource cubes on a tile */
.board-diagram > div .res-pile {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  align-content: center;
  flex: 0 0 auto;
  max-width: 28px;
  margin-top: 3px;
}
.board-diagram > div .res-cube,
.res-cube {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  border: 1px solid rgba(0, 0, 0, 0.28);
  box-shadow:
    0 0.5px 1px rgba(0, 0, 0, 0.15),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.3);
  vertical-align: -1px;
  flex: 0 0 auto;
}
.res-cube[data-type="ember"]  { background: #D48A8A; }
.res-cube[data-type="dew"]    { background: #7BA7CC; }
.res-cube[data-type="moss"]   { background: #7FB87F; }
.res-cube[data-type="pebble"] { background: #A688BF; }
/* Slime cluster — centered in remaining space; 2-wide by default,
   3-wide when 5+ chips (avoids a clipped third row). */
.board-diagram > div .slimes {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex: 1 1 auto;
  width: 100%;
  max-width: 38px; /* two 16px circles + gap */
  margin-top: 2px;
  min-height: 0;
}
.board-diagram > div .slimes:has(.tut-s:nth-child(5)) {
  max-width: 57px; /* three 16px circles + gaps */
}
.board-diagram > div .slimes .tut-s {
  flex: 0 0 auto;
}
.tut-s {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--navy);
  color: #F4F0E8;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  vertical-align: middle;
}
.tut-s.ember { background: #C45A3A; color: #F4F0E8; }
.tut-s.dew { background: var(--dew); color: #F4F0E8; }
.tut-s.moss { background: var(--moss); color: #F4F0E8; }
.tut-s.pebble { background: var(--pebble); color: #F4F0E8; }

/* Compact tutorial action lists (replaces numbered .step blocks) */
.tut-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.tut-steps > li {
  position: relative;
  padding: 0 0 6px 12px;
  margin: 0 0 6px;
  border-bottom: 1px dashed var(--line);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.tut-steps > li:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.tut-steps > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.tut-steps > li > b:first-child,
.tut-steps > li .act {
  display: block;
  color: var(--ink);
  font-weight: 700;
  font-size: 12.5px;
  margin-bottom: 1px;
  line-height: 1.35;
}
.tut-steps .ap { margin-right: 2px; }
.diagram-caption {
  font-size: 10.5px;
  color: var(--ink-soft);
  margin-bottom: 8px;
  max-width: 2.4in;
}
.tut-key {
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.tut-key b { color: var(--ink); }
.tut-colony-table .res-cube { margin-right: 2px; }
.tut-colony-table .res-cube:last-child { margin-right: 0; }
table.stats.tut-locate {
  margin: 0 0 8px;
  font-size: 11px;
}
table.stats.tut-locate th,
table.stats.tut-locate td {
  padding: 3px 6px;
}
table.stats.tut-locate td:first-child {
  width: 38%;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ─── Browser-only helpers ─── */
.print-bar {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 100;
  display: flex;
  gap: 8px;
}
.print-bar button {
  background: var(--gold);
  color: var(--navy);
  border: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.print-bar button:hover { background: var(--gold-2); }

/* ═══ Card Clarifications (YAML-driven) ═══════════════════════════════════
   Two pages rendered from the `clarifications:` arrays in content.yaml by
   fillCardClarifications() in book/index.html. Content flows through 3
   balanced columns; each card is a bold name + its rulings underneath.
   Card blocks never break across a column.                              */
.cardclar {
  columns: 3;
  column-gap: 14px;
  column-rule: 1px solid var(--rule, rgba(60,40,20,0.14));
  font-size: 9.5px;
  line-height: 1.38;
}
.cardclar .cc-loading { color: var(--ink-mute); font-style: italic; }

/* Section header (Springs by type / Caverns / Ripple Effects / Rites).
   `column-span: none` keeps them inline in the flow so the columns stay
   balanced rather than resetting at every header. */
.cardclar .cc-group {
  break-after: avoid;
  break-inside: avoid;
  margin: 0 0 3px;
  padding-bottom: 2px;
  border-bottom: 1.5px solid var(--ink-mute);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cardclar .cc-group:not(:first-child) { margin-top: 9px; }

.cardclar .cc-card {
  break-inside: avoid;
  margin-bottom: 6px;
}
.cardclar .cc-name {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1px;
}
.cardclar .cc-name .icon-inline { margin-right: 2px; }

.cardclar .cc-list {
  margin: 0;
  padding-left: 11px;
  list-style: none;
}
.cardclar .cc-list li {
  position: relative;
  margin-bottom: 1px;
  color: var(--ink-soft);
}
.cardclar .cc-list li::before {
  content: "·";
  position: absolute;
  left: -8px;
  font-weight: 700;
  color: var(--ink-mute);
}

/* renderPlaceholders() emits the print-sheet class names, which the rest of
   the book does not use (hand-written pages use .icon / .slm / .typed).
   Map them onto the book's inline-icon sizing here. */
.cardclar .icon-inline  { display: inline-block; width: 1em;    height: 1em;    vertical-align: -0.15em; }
.cardclar .slime-inline { display: inline-block; width: 1.3em;  height: 1.3em;  vertical-align: -0.3em; }
.cardclar .big-inline   { display: inline-block; width: 1.7em;  height: 1.7em;  vertical-align: -0.4em; }
.cardclar .type-sup     { width: 0.65em; height: 0.65em; vertical-align: super; margin-right: -2px; }
.cardclar .type-sup-r   { width: 0.65em; height: 0.65em; position: absolute; top: -0.2em; right: -0.4em; }
.cardclar .dormant-sup  { width: 0.7em;  height: 0.7em;  vertical-align: super; margin-left: -3px; }
.cardclar .leyline-icon { width: 0.9em;  height: 0.9em; }
.cardclar .typed-icon   { display: inline-flex; align-items: center; line-height: 1; }
.cardclar .num-icon     { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.cardclar .phase-tag    { font-size: 7.5px; padding: 0 3px; }