/* =============================================================================
   Sid Meier's Civilization: The Board Game — Setup & Reference Utility
   Theme: the core "Rules of Play" book (Fantasy Flight Games, 2010).
   - Paper: the rulebook's parchment with faint drafting sketches and burnt side
     edges (FAQ v2.0 p.1 page background), light base, black Times-style text.
   - Headings: Fell Type small caps (the book's FRFellTypeVAL-SC) -> IM Fell English SC.
   - Logo, numerals, "Rules of Play" caption: Trajan Pro Bold -> Cinzel 700.
   - Framed boxes: the carved rope band with star bosses (Core p.7, p.8, p.14).
   - Tables: maroon #800000 header row, cream #fff8e0 / white rows (Core p.14).
   - Step numbers: white discs ringed in red, as on the Setup Diagram (Core p.9).
   - Player buttons: the bronze page-number medallion (every page foot).
   ============================================================================= */

:root {
  /* paper (sampled: page centre #f2e7cf, darkest texture speck #dac8a9) */
  --paper:     #f2e7cf;
  --paper-lo:  #dac8a9;   /* worst case under text — every text pair is checked on it */
  --panel:     #fbf5e6;   /* inside framed boxes, cards */
  --cream:     #fff8e0;   /* table rows (Core p.14) */
  --white:     #fffdf6;

  /* ink */
  --ink:   #1e160e;
  --ink-2: #45372a;
  --ink-3: #5a4632;       /* citations, hints: 5.4:1 on the darkest paper */

  /* rulebook accents */
  --maroon:   #800000;    /* table header band */
  --maroon-2: #5e0000;
  --marker:   #c0181b;    /* red rings on the setup diagram */
  --bronze:   #7a5c33;    /* control borders: >= 3:1 on paper */
  --bronze-hi:#d7b373;
  --bronze-lo:#5a4630;
  --iron:     #4a3f35;    /* the frame band */
  --rule:     #c9b28a;    /* hairlines */
  --on-dark:  #fff4dc;

  --measure: 70ch;
  --f-text: "PT Serif", "Times New Roman", Times, Georgia, serif;
  --f-head: "IM Fell English SC", "Times New Roman", Georgia, serif;
  --f-cap:  "Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 106.25%; scroll-behavior: smooth; }   /* 17px */
body {
  color: var(--ink);
  background: var(--paper) url("../images/parchment.webp") center top / 100% auto repeat-y;
  font-family: var(--f-text); font-size: 1rem; line-height: 1.6;
  min-height: 100vh; overflow-x: hidden; -webkit-text-size-adjust: 100%;
}
:focus-visible { outline: 3px solid var(--maroon); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; }

/* ---- ornaments ------------------------------------------------------------- */
/* the rulebook's framed box: rope band + star bosses, as a 9-slice. The band runs down the middle of the
   border strip, so the panel fill is inset by half the strip and the rope covers its edge. */
:root { --fw: 26px; }
.sec-cfg, .teach-panel {
  border: var(--fw) solid transparent;
  border-image: url("../images/frame.webp") 72 round;
  background: linear-gradient(var(--fill), var(--fill)) center / calc(100% - var(--fw)) calc(100% - var(--fw)) no-repeat border-box;
}

/* ---- header ---------------------------------------------------------------- */
.topbar { padding: 22px 20px 6px; }
.hero { max-width: 1060px; margin: 0 auto; }
.hero-frame { position: relative; height: clamp(250px, 33vw, 410px); }
.hero-frame::after {           /* the frame, drawn over the art */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: var(--fw) solid transparent; border-image: url("../images/frame.webp") 72 round;
}
.hero-art {
  position: absolute; inset: calc(var(--fw) / 2); width: calc(100% - var(--fw)); height: calc(100% - var(--fw)); max-width: none;
  object-fit: cover; object-position: 50% 24%; z-index: 0; background: #9c958f;
}
.hero-frame::before {          /* scrims: light haze behind the logo, dark floor under the caption */
  content: ""; position: absolute; inset: calc(var(--fw) / 2); z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 52% 46% at 50% 20%, rgba(250, 244, 230, 0.55), rgba(250, 244, 230, 0) 72%),
    linear-gradient(to bottom, rgba(20, 13, 6, 0) 46%, rgba(20, 13, 6, 0.62) 70%, rgba(20, 13, 6, 0.9) 100%);
}
.hero-title {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(var(--fw) + 6px) 18px calc(var(--fw) + 8px); text-align: center;
}
.brand-title { margin: 0; line-height: 0; width: min(640px, 86%); }
.brand-logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 3px rgba(30, 18, 6, 0.55)); }
.brand-sub {
  font-family: var(--f-cap); font-weight: 700; color: #fffaf0;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem); letter-spacing: 0.1em; line-height: 1.2;
  text-shadow: 0 1px 2px #000, 0 0 12px rgba(0, 0, 0, 0.75);
}
.hero-copy { max-width: 760px; margin: 14px auto 0; padding: 0 8px; text-align: center; }
.tagline { color: var(--ink-2); font-style: italic; font-size: 1.04rem; line-height: 1.55; }
.tagline .tag-lead { display: block; }
.tagline .tag-hook { display: block; margin-top: 8px; color: var(--ink); }
.tagline .tag-hook::before, .tagline .tag-hook::after { content: "\2014"; margin: 0 0.45em; color: var(--bronze); font-style: normal; }

/* ---- layout + section headings ------------------------------------------- */
main { max-width: 900px; margin: 0 auto; padding: 8px 24px 40px; }
.sec { margin-top: 56px; }
.sec:first-child { margin-top: 26px; }
section h2 {
  font-family: var(--f-head); font-weight: 400; color: var(--ink);
  font-size: clamp(1.85rem, 3.6vw, 2.35rem); line-height: 1.1; letter-spacing: 0.01em;
  margin: 0 0 4px;
}
section h2::after {            /* the frame's rope band with a boss at each end */
  content: ""; display: block; height: 20px; margin-top: 6px;
  background:
    url("../images/boss.webp") left center / 20px 20px no-repeat,
    url("../images/boss.webp") right center / 20px 20px no-repeat,
    url("../images/rope.webp") left center / auto 9px repeat-x;
  background-origin: content-box;
}
.sec-note { color: var(--ink-2); font-style: italic; margin: 10px 0 20px; max-width: var(--measure); }

/* ---- configurator: a framed box, like "Civilization Sheet Breakdown" ------- */
.sec-cfg { --fill: rgba(251, 245, 230, 0.86); padding: 14px 26px 26px; }
.sec-cfg h2 { text-align: center; }
.sec-cfg h2::after { display: none; }
.sec-cfg .sec-note { text-align: center; margin: 6px auto 22px; }
.cfg { display: flex; flex-direction: column; gap: 24px; }
.cfg-label {
  display: block; margin-bottom: 9px;
  font-family: var(--f-head); font-weight: 400; font-size: 1.32rem; line-height: 1.25; color: var(--ink);
}
.cfg-label .hint { font-family: var(--f-text); font-weight: 400; font-style: italic; font-size: 0.94rem; color: var(--ink-3); }

.chips, .mods, .pbtns, .civ-row { display: flex; flex-wrap: wrap; gap: 10px; }
.civ-groups { display: flex; flex-direction: column; gap: 14px; }
.civ-set { font-family: var(--f-cap); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 6px; }

.chip, .mod, .civ {
  position: relative; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--bronze); border-radius: 3px;
  box-shadow: 0 1px 0 rgba(90, 70, 48, 0.25);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.chip:hover, .mod:hover, .civ:hover { border-color: var(--maroon); box-shadow: 0 0 0 1px var(--maroon); background: #fffaf0; }
.chip.on, .mod.on, .civ.on {
  background: var(--maroon); border-color: var(--maroon-2); color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 244, 220, 0.85), 0 1px 0 rgba(60, 0, 0, 0.4);
}
.chip.on::after, .mod.on::after, .civ.on::after {   /* selected state beyond colour: a check mark */
  content: "\2713"; position: absolute; top: 5px; right: 9px; font-weight: 700; font-size: 0.95rem; line-height: 1; color: #fff;
}
.chip.on:hover, .mod.on:hover, .civ.on:hover { background: var(--maroon-2); box-shadow: inset 0 0 0 2px rgba(255, 244, 220, 0.85), 0 0 0 1px var(--maroon-2); }
.chip.lock, .mod.lock { cursor: default; }
.chip.off, .mod.off, .civ.off { cursor: not-allowed; background: rgba(255, 253, 246, 0.45); border-style: dashed; color: var(--ink-3); box-shadow: none; }
.chip.off:hover, .mod.off:hover, .civ.off:hover { border-color: var(--bronze); box-shadow: none; background: rgba(255, 253, 246, 0.45); }
.chip.lock.on:hover, .mod.lock.on:hover { background: var(--maroon); box-shadow: inset 0 0 0 2px rgba(255, 244, 220, 0.85), 0 1px 0 rgba(60, 0, 0, 0.4); }

/* sets owned: each box gets its own rulebook icon (F&F scales, W&W sword and quill) */
.chip { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; min-height: 54px; padding: 7px 32px 7px 12px; }
.chip::before {   /* black silhouettes from the rulebooks; inverted to white on the selected (maroon) chip */
  content: ""; grid-row: 1 / span 2; width: 26px; height: 30px;
  background: url("../images/icons/ff-expansion-icon.webp") center / contain no-repeat;
}
.chip:first-child::before { display: none; }
.chip:nth-child(3)::before { background-image: url("../images/icons/ww-expansion-icon.webp"); width: 32px; }
.chip.on::before { filter: invert(1); }
.chip:first-child { grid-template-columns: 1fr; }
.chip b { font-weight: 700; font-size: 1.04rem; line-height: 1.25; }
.chip span { font-size: 0.82rem; color: var(--ink-3); }
.chip.on span { color: #f6e3cf; }

.civ { min-height: 44px; padding: 8px 30px 8px 14px; font-weight: 700; }
.civ small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--ink-3); }
.civ.on small { color: #f6e3cf; }

/* player count: the bronze page-number medallion */
.pbtn {
  width: 50px; height: 50px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer;
  font-family: var(--f-cap); font-weight: 700; font-size: 1.25rem; line-height: 1; color: var(--ink);
  background: radial-gradient(circle at 50% 38%, #fffdf6 0 55%, #f1e3c4 100%);
  border: 3px solid var(--bronze);
  box-shadow: inset 0 0 0 2px var(--bronze-hi), 0 1px 2px rgba(60, 40, 20, 0.35);
}
.pbtn:hover { border-color: var(--maroon); }
.pbtn.off:hover { border-color: var(--bronze); }
.pbtn.on {
  background: var(--maroon); color: #fff; border-color: var(--bronze-lo);
  box-shadow: inset 0 0 0 3px var(--bronze-hi), inset 0 0 0 5px var(--maroon-2), 0 0 0 2px var(--bronze-hi), 0 2px 4px rgba(60, 20, 10, 0.45);
}
.pbtn.off { cursor: not-allowed; background: rgba(255, 253, 246, 0.45); color: var(--ink-3); border: 2px dashed var(--bronze); box-shadow: none; font-weight: 700; }

.mod { flex: 1 1 260px; padding: 11px 32px 13px 14px; color: var(--ink-2); }
.mod-name { display: block; font-family: var(--f-head); font-size: 1.22rem; line-height: 1.25; color: var(--ink); margin-bottom: 3px; }
.mod-sum { display: block; font-size: 0.95rem; line-height: 1.5; }
.mod-set { display: inline-block; margin-left: 8px; font-family: var(--f-text); font-size: 0.8rem; font-style: italic; color: var(--ink-3); }
.mod.on { color: #fbeee0; }
.mod.on .mod-name, .mod.on .mod-set { color: #fff; }

/* ---- setup steps ----------------------------------------------------------- */
.teach-bar { margin: 4px 0 24px; }
.phase { margin-top: 30px; }
.phase:first-child { margin-top: 8px; }
.phase-title {   /* the maroon header band of the rulebook's tables */
  font-family: var(--f-head); font-weight: 400; font-size: 1.38rem; line-height: 1.25; letter-spacing: 0.01em;
  color: var(--on-dark); background: var(--maroon); padding: 7px 16px 6px;
  border-top: 3px solid var(--iron); border-bottom: 3px solid var(--iron);
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, 0.25);
}
.step { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 14px; padding: 18px 0 16px; border-bottom: 1px dotted var(--bronze); }
.step:last-child { border-bottom: 0; }
.step-num {   /* the setup diagram's numbered markers: white disc, red ring */
  width: 42px; height: 42px; margin-left: 4px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-cap); font-weight: 700; font-size: 1.05rem; line-height: 1; color: #120c06;
  background: #fffdf8; border: 3.5px solid var(--marker);
  box-shadow: 0 0 0 1.5px #fffdf8, 0 1px 3px rgba(60, 20, 10, 0.45);
  font-variant-numeric: lining-nums;
}
.step-body { min-width: 0; }
.step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 5px; padding-top: 4px; }
.step-head h4 { font-family: var(--f-head); font-weight: 400; font-size: 1.36rem; line-height: 1.22; color: var(--ink); }
.step-text { max-width: var(--measure); }
.step-text p { margin-bottom: 7px; }
.step-text ul, .step-text ol { margin: 4px 0 4px 1.25em; }
.step-text li { margin-bottom: 4px; padding-left: 3px; }
.step-text li::marker { color: var(--maroon); }
.step-text b { font-weight: 700; }
.inline-note { margin-top: 7px; font-size: 0.95rem; color: var(--ink-2); font-style: italic; }

/* source pills: which box a step comes from */
.tag {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-family: var(--f-cap); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.05em; line-height: 1.3;
  padding: 3px 9px 2px; border-radius: 2px; border: 1px solid transparent;
}
.tag-core { background: var(--maroon); color: #fff; }
.tag-ff   { background: #6b4710; color: #fff; }
.tag-ww   { background: #23415f; color: #fff; }
.tag-faq  { background: var(--cream); color: #2b2520; border: 1.5px solid #2b2520; }
.tag-var  { background: #3f5a24; color: #fff; }
.tag-ff::before, .tag-ww::before {
  content: ""; width: 14px; height: 15px; flex: none; filter: invert(1);
  background: url("../images/icons/ff-expansion-icon.webp") center / contain no-repeat;
}
.tag-ww::before { width: 17px; background-image: url("../images/icons/ww-expansion-icon.webp"); }
.tag-faq::before { content: "?"; font-family: var(--f-text); font-size: 0.95em; }
.tag-var::before { content: "\2726"; font-size: 0.9em; }

.src-line { margin-top: 9px; font-size: 0.88rem; font-style: italic; color: var(--ink-3); }
.src-line::before { content: "Source: "; font-style: normal; font-weight: 700; font-family: var(--f-text); }

/* map layouts (setup step: build the map) — home tiles face up, neutral tiles face down */
.map-wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin: 10px 0 8px; padding: 12px; background: rgba(255, 248, 224, 0.75); border: 1px solid var(--rule); }
.map-grid { display: grid; gap: 3px; }
.map-grid .t { width: 38px; height: 38px; border-radius: 2px; display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; line-height: 1; }
.map-grid .t.h { background: linear-gradient(135deg, #e3eecd, #cfe2b4); border: 2px solid #3d6b2a; color: #1d3b12; }
.map-grid .t.n { background: radial-gradient(circle at 50% 50%, #e2c393 0 30%, #cfa66d 75%, #c49a62 100%); border: 1.5px solid #7a5426; color: #3d260e; }
.map-grid .t.x { background: transparent; }
.map-grid.half .t { width: 31px; height: 31px; font-size: 0.85rem; }   /* five-player map: half-tile rows and columns */
.map-grid .t.hole { width: auto; height: auto; border: 2px dashed var(--bronze); background: transparent; border-radius: 2px; }
.map-legend { font-size: 0.95rem; color: var(--ink-2); max-width: 36ch; list-style: none; }
.map-legend li { margin-bottom: 4px; }

/* reference tables (Core p.14: maroon header row, cream and white rows) */
.tbl-wrap { overflow-x: auto; margin: 8px 0 14px; border: 1.5px solid var(--iron); }
table.ref-tbl { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
table.ref-tbl th, table.ref-tbl td { border: 1px solid #b9a27a; padding: 7px 10px; text-align: left; vertical-align: top; }
table.ref-tbl th { background: var(--maroon); color: var(--on-dark); font-family: var(--f-head); font-weight: 400; font-size: 1.12rem; line-height: 1.25; border-color: #5e0000; }
table.ref-tbl td { background: var(--white); }
table.ref-tbl tr:nth-child(even) td { background: var(--cream); }

.callout { background: rgba(255, 248, 224, 0.92); border: 1px solid var(--rule); border-left: 5px solid var(--maroon); padding: 9px 14px; margin: 10px 0 14px; }
.callout p:last-child { margin-bottom: 0; }

/* ---- teaching script ------------------------------------------------------- */
#teachBtn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 9px 22px 8px; cursor: pointer;
  font-family: var(--f-head); font-weight: 400; font-size: 1.28rem; line-height: 1.2; color: var(--on-dark);
  background: var(--maroon); border: 2px solid var(--iron); border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--bronze-hi), 0 2px 3px rgba(60, 20, 10, 0.35);
}
#teachBtn:hover { background: var(--maroon-2); }
#teachBtn[aria-expanded="true"] { background: var(--maroon-2); box-shadow: inset 0 0 0 2px var(--bronze-hi), inset 0 3px 6px rgba(0, 0, 0, 0.35); }
.teach-panel { --fill: rgba(251, 245, 230, 0.92); max-width: calc(var(--measure) + 100px); padding: 6px 24px 22px; margin: 0 0 30px; }
.teach-panel[hidden] { display: none; }
.teach-top { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 0 10px; border-bottom: 2px solid var(--maroon); }
.teach-top h3 { font-family: var(--f-head); font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.teach-copy { min-height: 44px; padding: 8px 16px; background: var(--white); color: var(--maroon); border: 2px solid var(--maroon); border-radius: 3px; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.95rem; }
.teach-copy:hover { background: var(--maroon); color: #fff; }
.teach-note { font-style: italic; color: var(--ink-2); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dotted var(--bronze); }
.teach-panel h4 { font-family: var(--f-head); font-weight: 400; font-size: 1.3rem; line-height: 1.25; color: var(--maroon); margin: 18px 0 6px; }
.teach-panel p { margin-bottom: 10px; }
.teach-panel ul { margin: 4px 0 12px 1.25em; }
.teach-panel li { margin-bottom: 5px; padding-left: 2px; }
.teach-panel li::marker { color: var(--maroon); }

/* ---- reference ------------------------------------------------------------- */
#reference { margin-top: 6px; border-top: 1.5px solid var(--iron); }
.ref { border-bottom: 1px solid var(--rule); }
.ref summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 10px 8px 9px;
  font-family: var(--f-head); font-weight: 400; font-size: 1.32rem; line-height: 1.22; color: var(--ink);
}
.ref summary::-webkit-details-marker { display: none; }
.ref summary::after {          /* a small bronze medallion with + / − */
  content: "+"; flex: none; margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-text); font-weight: 700; font-size: 1.2rem; line-height: 1;
  color: var(--ink); background: radial-gradient(circle at 50% 38%, #fffdf6 0 55%, #f1e3c4 100%);
  border: 2px solid var(--bronze); box-shadow: inset 0 0 0 1.5px var(--bronze-hi);
}
.ref summary:hover { background: rgba(255, 248, 224, 0.7); }
.ref summary:hover::after { border-color: var(--maroon); }
.ref[open] { background: rgba(255, 250, 236, 0.72); box-shadow: inset 4px 0 0 var(--maroon); }
.ref[open] > summary { border-bottom: 1px dotted var(--bronze); }
.ref[open] summary::after { content: "\2212"; background: var(--maroon); color: #fff; border-color: var(--bronze-lo); }
.ref-body { padding: 8px 14px 22px 18px; max-width: calc(var(--measure) + 40px); }
.ref-body h4 { font-family: var(--f-head); font-weight: 400; font-size: 1.26rem; line-height: 1.25; color: var(--maroon); margin: 18px 0 5px; }
.ref-body h4:first-child { margin-top: 8px; }
.ref-body p { margin-bottom: 9px; }
.ref-body ul, .ref-body ol { margin: 4px 0 12px 1.3em; }
.ref-body li { margin-bottom: 5px; padding-left: 3px; }
.ref-body li::marker { color: var(--maroon); }
.ref-body b { font-weight: 700; }

/* ---- search ---------------------------------------------------------------- */
.rsearch-wrap { margin-bottom: 18px; }
.rsearch-wrap, #rresults { max-width: calc(var(--measure) + 60px); }
#rsearch {
  width: 100%; min-height: 52px; padding: 12px 16px; font: inherit; font-size: 1.04rem; color: var(--ink);
  background: var(--white); border: 2px solid var(--bronze); border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(60, 40, 20, 0.18);
  -webkit-appearance: none; appearance: none;
}
#rsearch:focus { outline: 3px solid var(--maroon); outline-offset: 2px; border-color: var(--maroon); }
#rsearch::placeholder { color: var(--ink-3); font-style: italic; opacity: 1; }
#rsearch::-webkit-search-cancel-button {   /* the clear button, in the page's maroon rather than the browser's blue */
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 4l10 10M14 4L4 14' stroke='%23800000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
.rhint { color: var(--ink-2); font-style: italic; }
.rhit { background: var(--panel); border: 1px solid var(--rule); border-left: 4px solid var(--maroon); border-radius: 2px; padding: 12px 16px; margin-bottom: 10px; }
.rhit-src { font-weight: 700; font-size: 0.88rem; color: var(--maroon); margin-bottom: 4px; }
.rhit-text { font-size: 0.97rem; line-height: 1.55; }
.rhit-text mark, .aid-srch mark { background: #f3cf72; color: var(--ink); padding: 0 2px; border-radius: 2px; }

/* ---- footer ---------------------------------------------------------------- */
.footer { margin-top: 34px; padding: 0 24px 44px; text-align: center; color: var(--ink-2); font-style: italic; font-size: 0.95rem; }
.footer::before {
  content: ""; display: block; max-width: 900px; height: 20px; margin: 0 auto 22px;
  background:
    url("../images/boss.webp") center / 20px 20px no-repeat,
    url("../images/rope.webp") left center / auto 9px repeat-x;
}
.footer p { max-width: 68ch; margin: 0 auto; }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 1000px) {
  body { background-size: 1200px auto; }
}
@media (max-width: 640px) {
  body { background-size: 1100px auto; }
  .topbar { padding: 10px 8px 0; }
  :root { --fw: 20px; }
  .hero-frame { height: 212px; }
  .hero-art { object-position: 30% 22%; }
  .hero-title { padding: calc(var(--fw) + 6px) calc(var(--fw) + 4px) calc(var(--fw) + 4px); }
  .brand-title { width: 100%; }
  .brand-sub { font-size: 1.05rem; letter-spacing: 0.07em; }
  .hero-copy { margin-top: 10px; padding: 0 8px; }
  .tagline { font-size: 0.97rem; line-height: 1.5; }
  .tagline .tag-hook { margin-top: 6px; }
  .sec:first-child { margin-top: 20px; }
  .tagline .tag-hook::before, .tagline .tag-hook::after { content: none; }
  .mod-set { display: block; margin: 1px 0 0; }
  main { padding: 4px 16px 30px; }
  .sec { margin-top: 44px; }
  .sec-cfg { margin-left: -8px; margin-right: -8px; padding: 8px 6px 18px; }
  .cfg-label { font-size: 1.24rem; }
  .mod { flex-basis: 100%; }
  .step { grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; padding: 16px 0 14px; }
  .step-num { width: 38px; height: 38px; margin-left: 0; font-size: 0.98rem; }
  .step-head h4 { font-size: 1.28rem; }
  .teach-panel { margin-left: -8px; margin-right: -8px; padding: 2px 8px 16px; }
  .teach-top h3 { font-size: 1.32rem; }
  .ref summary { font-size: 1.24rem; padding: 10px 4px 9px 8px; }
  .ref-body { padding: 6px 6px 18px 12px; }
  .map-wrap { padding: 10px 8px; }
  .map-grid .t { width: 32px; height: 32px; }
  .footer { padding: 0 16px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Components glossary and rulebook search (css/components.css, css/search.css): the page palette */
#components, .aid-srch {
  --comp-surface: var(--panel); --comp-fig: #efe3c9; --comp-ink: var(--ink); --comp-muted: var(--ink-2);
  --comp-line: var(--bronze); --comp-accent: var(--maroon); --comp-accent-ink: #ffffff;
  --comp-head-font: var(--f-head); --comp-radius: 3px;
}

/* Rulebook icons: keep an inline icon on the same line as the word it labels */
.ic-nb { white-space: nowrap; }
/* the tech-card icon summary (Core p.32) crops part of a card: show it larger so it can be read */
ul.aid-icons.ic-lg { --aid-ic-size: 56px; }
/* an icon row nested in a bullet */
.ref-body li > .aid-icon-row { margin: 6px 0 4px; }