/* =============================================================================
   Twilight Imperium 4th Edition — Setup & Reference Utility
   Styled after the TI4 rulebooks (Learn to Play, Rules Reference, Prophecy of Kings, Thunder's Edge,
   Twilight Codex): warm parchment interior pages framed by deep-space bands with a stepped, glowing
   cyan edge; extended geometric caps in rulebook blue (#005fad, #005b87 sampled from LtP p.6 / RR p.11);
   Times-style body text; four-point-star bullets; chamfered panels; "Key Concept" callouts (LtP p.11);
   fiction-page frames (LtP pp.2–3) for the teaching script; hex system tiles for numbers.
   ============================================================================= */

:root {
  /* deep space — cover art and the interior pages' top/bottom bands (sampled) */
  --space-950: #000d24;
  --space-900: #00163a;
  --space-800: #001e45;
  --space-700: #003858;
  --cyan:      #18a3d1;          /* band edge (sampled) */
  --cyan-hi:   #7fdcff;          /* edge highlight / focus on dark */
  /* parchment — interior page radial glow (sampled #fffcf1 → #fff2dd → #fad39e) */
  --parch-hi:  #fffcf1;
  --parch:     #fff2dd;
  --parch-2:   #fde6c0;
  --parch-edge:#fad39e;
  --paper:     #fffaf0;          /* cards on the parchment */
  --paper-hi:  #fffdf8;
  /* ink */
  --ink:       #231f20;          /* body text (sampled) */
  --ink-2:     #4a443c;          /* secondary text */
  --navy:      #0b2240;          /* step labels, card titles */
  --navy-2:    #0b2a5b;          /* bold terms */
  --ti-blue:   #005fad;          /* LtP headline blue (sampled) */
  --rr-blue:   #005b87;          /* Rules Reference topic blue (sampled) */
  --line:      #6b7890;          /* control borders (≥3:1 on parchment) */
  --line-soft: #d9c4a0;          /* table rules */
  /* Key Concept callout (LtP p.11, sampled) */
  --kc-red:    #ed1c24;
  --kc-ink:    #b3121b;
  --kc-fill:   #fffad4;
  /* fiction page (LtP pp.2–3) */
  --ice:       #eef5fc;
  --ice-2:     #dbe8f6;
  --ice-ink:   #14213a;

  --f-display: "Saira", "Eurostile", "Microgramma", "Arial Narrow", sans-serif;
  --f-body: "Source Serif 4", "Times New Roman", Times, Georgia, serif;
  --chamfer: 10px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  background:
    radial-gradient(ellipse 58% 700px at 50% 240px, rgba(255, 253, 244, 0.9), rgba(255, 253, 244, 0) 72%),
    linear-gradient(90deg, var(--parch-edge) 0%, var(--parch-2) 10%, var(--parch) 24%, var(--parch-hi) 50%, var(--parch) 76%, var(--parch-2) 90%, var(--parch-edge) 100%);
  background-color: var(--parch);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  font-optical-sizing: auto;
  min-height: 100vh;
}

img { max-width: 100%; }
a { color: var(--ti-blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--kc-ink); }
em { font-style: italic; }

/* visible keyboard focus everywhere (≥3:1 on parchment and on the dark bands) */
:focus-visible { outline: 3px solid var(--ti-blue); outline-offset: 3px; }
.mast :focus-visible, .footer :focus-visible { outline-color: var(--cyan-hi); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* =============================================================================
   MASTHEAD — the cover's logo band over deep space, the Rules Reference cover's
   custodian planet in its orbit rings, and the interior pages' stepped cyan edge
   ============================================================================= */
.mast {
  --sx: 47%;              /* where the edge steps down */
  --sh: 34px;             /* how far it steps */
  position: relative;
  color: #eef4ff;
  padding-bottom: var(--sh);
  overflow-x: hidden;     /* fallback */
  overflow-x: clip;       /* clips the planet's rings without clipping the edge glow */
}
.mast-sky {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--sx) + var(--sh)) 100%, var(--sx) calc(100% - var(--sh)), 0 calc(100% - var(--sh)));
  background:
    /* orbit lines (the covers' thin cyan arcs) */
    radial-gradient(circle at 8% 170%, transparent 0 469px, rgba(95, 190, 240, 0.32) 470px 471.5px, transparent 473px),
    radial-gradient(circle at 58% -60%, transparent 0 329px, rgba(95, 190, 240, 0.26) 330px 331.5px, transparent 333px),
    linear-gradient(162deg, transparent 0 61%, rgba(95, 190, 240, 0.22) 61% calc(61% + 1.5px), transparent calc(61% + 1.5px)),
    /* nebula glow */
    radial-gradient(ellipse 42% 120% at 24% 70%, rgba(33, 102, 196, 0.42), transparent 70%),
    radial-gradient(ellipse 30% 90% at 86% 40%, rgba(58, 128, 220, 0.34), transparent 72%),
    linear-gradient(180deg, #000c24 0%, var(--space-900) 48%, #002252 100%);
}
/* starfield */
.mast-sky::before, .footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.85;
  background-image:
    radial-gradient(1.3px 1.3px at 12px 18px, #fff, transparent),
    radial-gradient(1px 1px at 64px 92px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.6px 1.6px at 131px 41px, #dff4ff, transparent),
    radial-gradient(1px 1px at 173px 136px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.2px 1.2px at 222px 77px, #fff, transparent),
    radial-gradient(1px 1px at 38px 161px, rgba(200, 230, 255, 0.8), transparent),
    radial-gradient(1.4px 1.4px at 97px 208px, #fff, transparent),
    radial-gradient(1px 1px at 251px 196px, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 190px 12px, rgba(255, 255, 255, 0.7), transparent);
  background-size: 270px 230px;
}
.mast-inner {
  position: relative;
  max-width: 980px; margin: 0 auto;
  padding: 44px 22px 34px;
  min-height: 286px;
  display: flex; flex-direction: column; justify-content: center;
}
.mast-title { margin: 0; font-weight: 400; max-width: min(600px, calc(100% - 290px)); position: relative; z-index: 1; }
.mast-logo {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 0 22px rgba(255, 110, 20, 0.28));
}
.mast-sub {
  display: block;
  margin-top: 14px;
  font-family: var(--f-display); font-stretch: 125%; font-weight: 700;
  font-size: clamp(1.25rem, 0.9rem + 1.3vw, 1.75rem);
  line-height: 1.15; letter-spacing: 0.05em; text-transform: uppercase;
  color: #fff9ef;
  text-shadow: 0 0 2px rgba(255, 200, 140, 0.9), 0 0 12px rgba(255, 128, 32, 0.75), 0 0 26px rgba(255, 90, 0, 0.35);
}
/* the fine white line under the cover subtitle, fading right */
.mast-sub::after {
  content: ""; display: block; height: 1.5px; margin-top: 12px; width: min(560px, 100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(160, 220, 255, 0.55) 55%, transparent);
  box-shadow: 0 0 8px rgba(120, 200, 255, 0.5);
}
.mast-kicker {
  position: relative; z-index: 1;
  margin-top: 13px;
  font-family: var(--f-display); font-stretch: 125%; font-weight: 600;
  font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase;
  color: #ffcf73;
}
/* the planet emblem */
.mast-emblem {
  position: absolute; right: -26px; top: 50%;
  width: 330px; height: 330px; margin-top: -165px;
  color: #8cc8ff;
  pointer-events: none;
}
.mast-planet {
  position: absolute; left: 16.667%; top: 16.667%; width: 66.667%; height: auto;
  border-radius: 50%;
  filter: drop-shadow(0 0 18px rgba(255, 110, 160, 0.35)) drop-shadow(0 0 40px rgba(60, 140, 255, 0.35));
}
.mast-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* the stepped, glowing cyan edge between the band and the parchment */
.mast-edge { position: absolute; left: 0; right: 0; bottom: 0; height: var(--sh); pointer-events: none; }
.mast-edge i, .mast-edge b, .foot-edge i, .foot-edge b {
  position: absolute; height: 2px;
  background: #aeeaff;
  box-shadow: 0 0 3px 1px rgba(24, 163, 209, 0.95), 0 0 14px 3px rgba(24, 163, 209, 0.5);
}
.mast-edge i:first-child { left: 0; width: var(--sx); top: -1px; }
.mast-edge b { left: var(--sx); top: -1px; width: calc(var(--sh) * 1.41421); transform-origin: 0 50%; transform: rotate(45deg); }
.mast-edge i:last-child { left: calc(var(--sx) + var(--sh)); right: 0; bottom: -1px; }

/* =============================================================================
   LAYOUT
   ============================================================================= */
main { max-width: 980px; margin: 0 auto; padding: 18px 22px 40px; position: relative; }

.intro { max-width: 75ch; margin: 18px 0 6px; }
.tagline { font-size: 17.5px; }
.tagline em { color: var(--rr-blue); }
.toplinks { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.toplinks .hint { color: var(--ink-2); font-style: italic; font-size: 16px; }

/* chamfered dark button (the rulebooks' dark UI plates) — Faction Reference link, teaching button */
.btn-link, #teachBtn {
  --edge: var(--cyan);
  --fill: linear-gradient(180deg, #0a3170 0%, var(--space-900) 100%);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 8px 22px 8px 20px;
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700;
  font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #ffffff; text-decoration: none;
  background: none; border: 0; cursor: pointer;
}
.btn-link::before, .btn-link::after, #teachBtn::before, #teachBtn::after {
  content: ""; position: absolute; z-index: -1;
}
.btn-link::before, #teachBtn::before {
  inset: 0; background: var(--edge);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.btn-link::after, #teachBtn::after {
  inset: 2px; background: var(--fill);
  clip-path: polygon(11.2px 0, 100% 0, 100% calc(100% - 11.2px), calc(100% - 11.2px) 100%, 0 100%, 0 11.2px);
}
.btn-link:hover, #teachBtn:hover { --edge: var(--cyan-hi); color: #fff; }
.btn-link:hover::after, #teachBtn:hover::after { background: linear-gradient(180deg, #0d3d86 0%, #03224f 100%); }

/* =============================================================================
   SECTION HEADINGS — the rulebooks' big blue extended caps ("OBJECT OF THE GAME", LtP p.4)
   ============================================================================= */
.sec { position: relative; }
.sec + .sec { margin-top: 64px; }
/* the glowing light-blue rule the Learn to Play uses between setup steps */
.sec + .sec::before {
  content: ""; display: block; height: 2px; margin: 0 0 40px;
  background: linear-gradient(90deg, transparent, rgba(24, 163, 209, 0.55) 12%, #e9f8ff 50%, rgba(24, 163, 209, 0.55) 88%, transparent);
  box-shadow: 0 0 10px rgba(24, 163, 209, 0.4);
}
.sec h2 {
  font-family: var(--f-display); font-stretch: 125%; font-weight: 700;
  font-size: clamp(1.6rem, 1.05rem + 2vw, 2.35rem);
  line-height: 1.08; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--ti-blue);
  margin: 34px 0 8px;
}
.sec-cfg h2 { margin-top: 30px; }
.sec-note { max-width: 75ch; color: var(--ink-2); font-size: 16.5px; margin-bottom: 18px; }

/* =============================================================================
   CONFIGURATOR — "The Council Chamber"
   ============================================================================= */
.cfg { display: flex; flex-direction: column; gap: 26px; }
.cfg-label {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700;
  font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 11px;
}
.cfg-label::before {
  content: ""; flex: 0 0 auto; width: 12px; height: 12px; align-self: center;
  background: var(--i-star) center / contain no-repeat;
}
.cfg-label .hint {
  font-family: var(--f-body); font-stretch: normal; font-weight: 400; font-style: italic;
  font-size: 15.5px; letter-spacing: 0; text-transform: none; color: var(--ink-2);
}

/* ---- shared chamfered control: an edge layer (::before) and a fill layer (::after) ---- */
.chip, .mode-btn, .mod, .mod-choice, .teach-copy {
  --edge: var(--line);
  --fill: var(--paper);
  --bw: 1.5px;
  --cut: var(--chamfer);
  position: relative; isolation: isolate;
  border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--ink); text-align: left;
  transition: color 0.15s;
}
.chip::before, .mode-btn::before, .mod::before, .mod-choice::before, .teach-copy::before,
.chip::after, .mode-btn::after, .mod::after, .mod-choice::after, .teach-copy::after {
  content: ""; position: absolute; z-index: -1;
  transition: background 0.15s;
}
.chip::before, .mode-btn::before, .mod::before, .mod-choice::before, .teach-copy::before {
  inset: 0; background: var(--edge);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.chip::after, .mode-btn::after, .mod::after, .mod-choice::after, .teach-copy::after {
  inset: var(--bw); background: var(--fill);
  clip-path: polygon(calc(var(--cut) - var(--bw) * 0.414) 0, 100% 0, 100% calc(100% - var(--cut) + var(--bw) * 0.414), calc(100% - var(--cut) + var(--bw) * 0.414) 100%, 0 100%, 0 calc(var(--cut) - var(--bw) * 0.414));
}
.chip:hover, .mode-btn:hover, .mod:hover, .mod-choice:hover, .teach-copy:hover { --edge: var(--ti-blue); --fill: var(--paper-hi); }

/* ---- "Sets in play" chips — a check box, then a dark plate when the set is on the table ---- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: 54px; padding: 7px 18px 8px 14px;
  color: var(--navy);
}
.chip b {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700;
  font-size: 15px; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase;
}
.chip b::before {
  content: ""; flex: 0 0 auto; width: 16px; height: 16px;
  border: 2px solid var(--line); background: var(--paper-hi);
}
.chip span {
  padding-left: 25px;
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 500;
  font-size: 13px; letter-spacing: 0.1em; color: #525c6b;
}
.chip.on {
  --edge: var(--cyan);
  --fill: linear-gradient(180deg, #0b3471 0%, var(--space-900) 100%);
  --bw: 2px;
  color: #ffffff;
}
.chip.on:hover { --edge: var(--cyan-hi); --fill: linear-gradient(180deg, #0e3f86 0%, #03224f 100%); }
.chip.on b::before { border-color: var(--cyan-hi); background: var(--cyan-hi) var(--i-check) center / 13px no-repeat; }
.chip.on span { color: #b9e4ff; }
.chip.lock { cursor: default; }
.chip.lock span::after { content: " · always in play"; letter-spacing: 0.04em; }
.chip.off { --edge: #9c917e; --fill: #efe4d1; color: #5f584e; cursor: not-allowed; }

/* ---- mode / scenario and galaxy cards — a hex "radio", then a dark plate when chosen ---- */
.mode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 12px; }
.mode-btn {
  --cut: 14px;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
  min-height: 72px; padding: 13px 16px 14px;
}
.mode-btn b {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700;
  font-size: 15.5px; line-height: 1.25; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 6px;
}
.mode-btn b::before {
  content: ""; flex: 0 0 auto; width: 19px; height: 17px; margin-top: 1px;
  background: var(--i-hex-off) center / contain no-repeat;
}
.mode-btn span { display: block; font-size: 16px; line-height: 1.45; color: var(--ink); }
.mode-btn .why {
  margin-top: 8px; padding-top: 7px; border-top: 1px dashed #c9b690;
  font-style: italic; font-size: 15px; color: #7a2a08;
}
.mode-btn.on {
  --edge: var(--cyan);
  --fill: linear-gradient(170deg, #0b3471 0%, var(--space-900) 70%);
  --bw: 2px;
  color: #ffffff;
}
.mode-btn.on:hover { --edge: var(--cyan-hi); --fill: linear-gradient(170deg, #0e3f86 0%, #03224f 70%); }
.mode-btn.on b { color: #ffffff; }
.mode-btn.on b::before { background-image: var(--i-hex-on); }
.mode-btn.on span { color: #dfeafa; }
.mode-btn.off { --edge: #9c917e; --fill: #efe4d1; cursor: not-allowed; }

/* a selected mode or option supplies the map: the galaxy builds step back */
#galaxy .galaxy-note { grid-column: 1 / -1; margin: 0 0 2px; }
#galaxy.superseded .mode-btn { --edge: #a99f8e; --fill: #f3eadb; }
#galaxy.superseded .mode-btn b, #galaxy.superseded .mode-btn span { color: #4f4a43; }
#galaxy.superseded .mode-btn:hover { --edge: var(--ti-blue); }
#galaxy.superseded .mode-btn.on { --edge: #6b7890; --fill: #dde3ec; --bw: 2px; }
#galaxy.superseded .mode-btn.on b::before { background-image: var(--i-hex-muted-on); }

/* ---- player count — hex system tiles ---- */
.pbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.pbtn {
  --edge: var(--line);
  --fill: var(--paper);
  --bw: 2px;
  position: relative; isolation: isolate;
  width: 60px; height: 52px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700; font-size: 21px; line-height: 1;
  color: var(--navy);
}
.pbtn::before, .pbtn::after {
  content: ""; position: absolute; z-index: -1;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  transition: background 0.15s;
}
.pbtn::before { inset: 0; background: var(--edge); }
.pbtn::after { inset: var(--bw) calc(var(--bw) * 1.3); background: var(--fill); }
.pbtn:hover { --edge: var(--ti-blue); --fill: var(--paper-hi); }
.pbtn.on {
  --edge: var(--cyan-hi);
  --fill: linear-gradient(180deg, #0b3471, var(--space-900));
  --bw: 3px;
  color: #ffffff;
}
.pbtn.on:hover { --fill: linear-gradient(180deg, #0e3f86, #03224f); }
.pbtn.off, .pbtn:disabled { --edge: #9c917e; --fill: #efe4d1; color: #6b6358; cursor: not-allowed; }
.pbtn.off:hover, .pbtn:disabled:hover { --edge: #9c917e; --fill: #efe4d1; }

/* ---- options & variants — check boxes on light cards ---- */
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-items: start; }
.mod {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
  width: 100%; min-height: 64px; padding: 12px 16px 13px;
}
.mod-name {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700;
  font-size: 15px; line-height: 1.25; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 5px;
}
.mod-name::before {
  content: ""; flex: 0 0 auto; width: 17px; height: 17px; margin-top: 0;
  border: 2px solid var(--line); background: var(--paper-hi);
}
.mod-sum { display: block; font-size: 16px; line-height: 1.45; color: var(--ink); }
.mod.on { --edge: var(--ti-blue); --fill: linear-gradient(180deg, #e7f2fc, #d8e8f7); --bw: 2.5px; }
.mod.on .mod-name::before { border-color: var(--ti-blue); background: var(--ti-blue) var(--i-check-w) center / 14px no-repeat; }
.mod.off { --edge: #9c917e; --fill: #efe4d1; cursor: not-allowed; }

/* a one-of choice list under an option that is on */
.mod-wrap { display: flex; flex-direction: column; gap: 0; }
.mod-wrap .mod { --cut: var(--chamfer); }
.mod-choices {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: -2px 0 0; padding: 10px 10px 10px 14px;
  background: rgba(216, 232, 247, 0.55);
  border-left: 2.5px solid var(--ti-blue);
}
.mod-choice {
  --cut: 7px;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 6px 13px 6px 11px;
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 600;
  font-size: 14px; line-height: 1.2; letter-spacing: 0.02em;
  color: var(--navy);
}
.mod-choice.on { --edge: var(--cyan); --fill: linear-gradient(180deg, #0b3471, var(--space-900)); --bw: 2px; color: #ffffff; }
.mod-choice.on:hover { --edge: var(--cyan-hi); --fill: linear-gradient(180deg, #0e3f86, #03224f); }
/* the chosen one also carries a check glyph (on its fill layer) */
.mod-choice.on { padding-left: 31px; }
.mod-choice.on::after { background: var(--i-check-cyan) 9px 50% / 14px 14px no-repeat, var(--fill); }

/* =============================================================================
   SETUP — Learn to Play step layout: hex-tile numbers, extended-caps step names,
   glowing separators, four-point-star bullets
   ============================================================================= */
.teach-bar { margin: 6px 0 22px; }
#teachBtn { font-size: 15.5px; min-height: 48px; padding: 8px 24px 8px 20px; }
#teachBtn[aria-expanded="true"] { --edge: var(--cyan-hi); --fill: linear-gradient(180deg, #d9f3ff, #b5e3fb); color: var(--space-900); }
#teachBtn[aria-expanded="true"]:hover::after { background: linear-gradient(180deg, #e8f8ff, #c4eafd); }

.phase { margin-top: 34px; }
.phase:first-child { margin-top: 8px; }
.phase-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-stretch: 125%; font-weight: 700;
  font-size: 19px; line-height: 1.2; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--rr-blue);
  padding-bottom: 7px; margin-bottom: 4px;
  border-bottom: 2px solid var(--rr-blue);
}

.step {
  position: relative;
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px;
  padding: 20px 0 18px;
}
.step + .step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, rgba(24, 163, 209, 0.15), rgba(126, 206, 245, 0.85) 8%, #eefaff 45%, rgba(126, 206, 245, 0.85) 85%, transparent);
  box-shadow: 0 0 6px rgba(24, 163, 209, 0.35);
}
/* hex system-tile step number */
.step-num {
  position: relative; isolation: isolate;
  width: 48px; height: 42px; margin-top: -2px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700; font-size: 18px; line-height: 1;
  color: #ffffff;
  background: var(--cyan);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.step-num::before {
  content: ""; position: absolute; inset: 2.5px 3px; z-index: -1;
  background: linear-gradient(180deg, #0b3471, var(--space-900));
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.step-body { min-width: 0; }
.step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
.step-head h4 {
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700;
  font-size: 17px; line-height: 1.3; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--navy);
}
.step-text { max-width: 75ch; }

/* ---- source tag pills: which box a step comes from (hex-ended labels, as on the PoK p.6 diagram;
        each carries its set's identifier icon so they differ by more than colour) ---- */
.tag {
  --tag-bg: var(--ti-blue);
  --tag-edge: var(--tag-bg);
  --tag-fg: #ffffff;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center;
  min-height: 25px; padding: 4px 13px 4px 32px;
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 600; font-style: normal;
  font-size: 13px; line-height: 1.15; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tag-fg); white-space: nowrap;
  vertical-align: middle;
}
.tag::before, .tag::after { content: ""; position: absolute; z-index: -1; }
.tag::before {
  inset: 0; background: var(--tag-edge);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
}
.tag::after {
  inset: 1.5px;
  background: var(--tag-icon, none) 10px 50% / 14px 14px no-repeat, var(--tag-bg);
  clip-path: polygon(8.4px 0, calc(100% - 8.4px) 0, 100% 50%, calc(100% - 8.4px) 100%, 8.4px 100%, 0 50%);
}
.tag-base  { --tag-bg: #005fad; --tag-fg: #ffffff; }
.tag-pok   { --tag-bg: #8f1d33; --tag-fg: #ffffff; }
.tag-codex { --tag-bg: #121a24; --tag-edge: #39b8e8; --tag-fg: #e8f6ff; }
.tag-te    { --tag-bg: #f3b21b; --tag-edge: #b57f00; --tag-fg: #231500; }
.tag-mode  { --tag-bg: #6b2380; --tag-fg: #ffffff; }
.tag-ltp   { --tag-bg: #17693c; --tag-fg: #ffffff; }
.tag-faq   { --tag-bg: #ffffff; --tag-edge: #0b2a5b; --tag-fg: #0b2a5b; }
.tag-mod   { --tag-bg: #fff4ec; --tag-edge: #ed1c24; --tag-fg: #b3121b; }

/* ---- citations — styled like the Rules Reference's "RELATED TOPICS:" line ---- */
.src-line {
  margin-top: 12px;
  font-family: var(--f-body); font-size: 15px; line-height: 1.45;
  color: var(--ink-2);
}
.src-line::before {
  content: "Source";
  margin-right: 8px;
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700;
  font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--rr-blue);
}

/* =============================================================================
   RICH TEXT — steps, reference, teaching script
   ============================================================================= */
.step-text p, .ref-body p, .teach-panel p { margin: 0 0 10px; }
.step-text p:last-child, .ref-body p:last-child { margin-bottom: 0; }
.step-text b, .ref-body b, .teach-panel b, .rhint b { font-weight: 700; color: var(--navy-2); }
.step-text i, .ref-body i, .teach-panel i { font-style: italic; }

.step-text ul, .ref-body ul, .teach-panel ul { list-style: none; margin: 6px 0 10px; padding-left: 26px; }
.step-text ol, .ref-body ol, .teach-panel ol { margin: 6px 0 10px; padding-left: 30px; }
.step-text li, .ref-body li, .teach-panel li { position: relative; margin-bottom: 6px; }
.step-text ul > li::before, .ref-body ul > li::before, .teach-panel ul > li::before {
  content: ""; position: absolute; left: -22px; top: 0.52em;
  width: 12px; height: 12px;
  background: var(--i-star-navy) center / contain no-repeat;
}
.step-text ul ul > li::before, .ref-body ul ul > li::before, .teach-panel ul ul > li::before,
.step-text ol ul > li::before, .ref-body ol ul > li::before {
  background-image: var(--i-star-o);
}
.step-text ol > li::marker, .ref-body ol > li::marker, .teach-panel ol > li::marker {
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700; font-size: 0.92em; color: var(--navy);
}
.step-text ul > li.note::before, .ref-body ul > li.note::before { display: none; }

/* Key Concept callout (LtP p.11): cream-yellow box, thin red frame, both top corners cut */
.note {
  margin: 12px 0; padding: 2px 6px 2px 6px;
  border: 12px solid transparent;
  border-image: var(--f-note) 12 fill / 12px stretch;
  font-size: 16.5px; color: var(--ink);
}
.note.faq { border-image-source: var(--f-note-faq); }
.note.flag { border-image-source: var(--f-note-flag); }
li.note { list-style: none; margin: 10px 0 10px -26px; }
.ref-body dd.note { border-width: 12px; border-style: solid; border-color: transparent; padding: 2px 6px; margin: 10px 0; } /* longhands: the border shorthand would reset the .note border-image frame */

.table-wrap {
  overflow-x: auto; max-width: 100%; margin: 10px 0 14px; -webkit-overflow-scrolling: touch;
  /* scroll shadows: a soft navy edge shows only while more of the table is off-screen */
  background:
    linear-gradient(90deg, #fffcf4 35%, rgba(255, 252, 244, 0)) 0 0 / 30px 100% no-repeat local,
    linear-gradient(270deg, #fffcf4 35%, rgba(255, 252, 244, 0)) 100% 0 / 30px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 22, 58, 0.3), rgba(0, 22, 58, 0)) 0 0 / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 22, 58, 0.3), rgba(0, 22, 58, 0)) 100% 0 / 14px 100% no-repeat scroll,
    #fffcf4;
}
.step-text table, .ref-body table {
  border-collapse: collapse; width: 100%;
  font-size: 16px; line-height: 1.4;
  background: rgba(255, 253, 247, 0.7);
  margin: 10px 0 14px;
}
.table-wrap table { margin: 0; background: transparent; }
.step-text th, .ref-body th {
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700;
  font-size: 13.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: #ffffff; background: var(--space-800);
  text-align: left; padding: 8px 10px; vertical-align: bottom;
}
.step-text td, .ref-body td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; text-align: left; }
.step-text tbody tr:nth-child(even) td, .ref-body tbody tr:nth-child(even) td { background: rgba(250, 222, 170, 0.22); }
.ref-body tr.here td { background: #dcf0fb; font-weight: 700; color: var(--navy); box-shadow: inset 0 1px 0 var(--cyan), inset 0 -1px 0 var(--cyan); }
.ref-body tr.here td:first-child { box-shadow: inset 4px 0 0 var(--cyan), inset 0 1px 0 var(--cyan), inset 0 -1px 0 var(--cyan); }
.unit-stats td:nth-child(n+2):nth-child(-n+5), .unit-stats th:nth-child(n+2):nth-child(-n+5) { text-align: center; white-space: nowrap; }

.ref-body dl { margin: 6px 0 10px; }
.ref-body dt {
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700;
  font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--navy); margin-top: 12px;
}
.ref-body dd { margin: 3px 0 6px 0; padding-left: 14px; border-left: 2px solid #d8c29a; }
.ref-body .errata-card {
  margin: 8px 0 12px; padding: 9px 14px 10px;
  background: rgba(255, 253, 247, 0.75);
  border-left: 3px solid var(--kc-red);
}
.ref-body .errata-card b {
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700;
  font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy);
}
.ref-body q, .step-text q { font-style: italic; }
.sub { color: var(--ink-2); font-style: italic; }
span.sub { font-size: 15px; }

/* Codex preset maps (inline SVG hex diagrams that use currentColor) */
.cx-map { color: var(--navy); }
.cx-map-legend { color: var(--ink-2); }
.cx-map-legend small { font-size: 14.5px; line-height: 1.45; }
.cx-maptext { margin: 8px 0 4px; }
.cx-maptext > summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 600; font-size: 15px;
  color: var(--rr-blue); list-style: none;
}
.cx-maptext > summary::-webkit-details-marker { display: none; }
.cx-maptext > summary::before {
  content: ""; width: 14px; height: 14px; background: var(--i-chev) center / contain no-repeat;
  transform: rotate(-90deg); transition: transform 0.15s;
}
.cx-maptext[open] > summary::before { transform: none; }

/* =============================================================================
   TEACHING SCRIPT — the Learn to Play fiction pages: a pale ice-blue sheet in a glowing,
   chamfered cyan frame over deep space (LtP pp.2–3)
   ============================================================================= */
.teach-panel {
  margin: 0 0 30px;
  padding: 0 10px 6px;
  border: 36px solid transparent;
  border-image: var(--f-teach) 36 fill / 36px stretch;
  color: var(--ice-ink);
}
.teach-panel[hidden] { display: none; }
.teach-top {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1.5px solid rgba(0, 95, 173, 0.35);
}
.teach-top h3 {
  font-family: var(--f-display); font-stretch: 125%; font-weight: 700;
  font-size: 19px; line-height: 1.25; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ti-blue);
}
.teach-copy {
  --edge: var(--ti-blue);
  --fill: #ffffff;
  --cut: 8px;
  min-height: 42px; padding: 7px 16px;
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700;
  font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy);
}
.teach-copy:hover { --edge: var(--space-900); --fill: #eaf6ff; }
.teach-note { font-style: italic; font-size: 16px; color: #33415a; margin-bottom: 6px; max-width: 75ch; }
.teach-panel h4 {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 22px 0 7px;
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700;
  font-size: 16px; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--navy);
}
.teach-panel h4::before {
  content: ""; flex: 0 0 auto; width: 12px; height: 12px; margin-top: 4.5px;
  background: var(--i-star) center / contain no-repeat;
}
.teach-panel p, .teach-panel ul, .teach-panel ol { max-width: 75ch; }
.teach-panel p { font-size: 17px; line-height: 1.62; }
.teach-panel b { color: #002d63; }

/* =============================================================================
   RULES REFERENCE — Rules Reference glossary topics: blue headings on a rule line
   ============================================================================= */
#reference { margin-top: 8px; }
.ref { margin: 0; }
.ref > summary {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 12px 42px 11px 6px;
  cursor: pointer; list-style: none;
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 600;
  font-size: 17.5px; line-height: 1.3; letter-spacing: 0.01em;
  color: var(--rr-blue);
  border-bottom: 1.5px solid rgba(0, 91, 135, 0.4);
  transition: background 0.15s, color 0.15s;
}
.ref > summary::-webkit-details-marker { display: none; }
.ref > summary::before {
  content: ""; flex: 0 0 auto; width: 19px; height: 17px;
  background: var(--i-hex-ref) center / contain no-repeat;
}
.ref > summary::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background: var(--i-chev) center / contain no-repeat;
  transform: rotate(-90deg); transition: transform 0.2s;
}
.ref > summary:hover { background: rgba(255, 255, 255, 0.55); color: #003f63; }
.ref[open] > summary { border-bottom: 2px solid var(--rr-blue); color: #003f63; font-weight: 700; }
.ref[open] > summary::before { background-image: var(--i-hex-ref-open); }
.ref[open] > summary::after { transform: none; }
.ref > summary .tag { margin-left: 2px; }
.ref-body {
  padding: 16px 18px 20px 37px;
  background: linear-gradient(180deg, rgba(255, 253, 246, 0.82), rgba(255, 250, 238, 0.55));
  border-bottom: 1.5px solid rgba(0, 91, 135, 0.4);
}
.ref-body > * { max-width: 75ch; }
.ref-body > .table-wrap, .ref-body > table, .ref-body > svg { max-width: 100%; }
.ref-body h4 {
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700;
  font-size: 15.5px; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--navy);
  margin: 18px 0 6px;
}
.ref-body h4:first-child { margin-top: 2px; }
.ref-body .src-line { margin-top: 14px; }
/* rulebook icons (css/icons.css, icons standard v1): keep an inline icon on the same line as the word it illustrates */
.ic-nb { white-space: nowrap; }

/* =============================================================================
   SEARCH
   ============================================================================= */
.rsearch-wrap { margin: 4px 0 16px; }
.rsearch-wrap, #rresults { max-width: 46rem; }
#rsearch {
  width: 100%; min-height: 52px;
  padding: 12px 16px 12px 48px;
  font-family: var(--f-body); font-size: 17px; color: var(--ink);
  background: var(--i-lens) 15px 50% / 21px 21px no-repeat, var(--paper-hi);
  border: 2px solid var(--line); border-radius: 0;
  box-shadow: inset 0 1px 3px rgba(35, 31, 32, 0.12);
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s;
}
#rsearch:hover { border-color: var(--ti-blue); }
#rsearch:focus { border-color: var(--ti-blue); outline: none; }
#rsearch:focus-visible { outline: 3px solid var(--ti-blue); outline-offset: 2px; }
#rsearch::placeholder { color: #5f5a52; font-style: italic; opacity: 1; }
#rsearch::-webkit-search-cancel-button { cursor: pointer; }

.rhint { color: var(--ink-2); font-style: italic; margin: 4px 0 10px; }
.rhit {
  position: relative;
  margin-bottom: 10px; padding: 11px 16px 12px 18px;
  background: rgba(255, 253, 247, 0.8);
  border-left: 4px solid var(--ti-blue);
  box-shadow: 0 1px 0 rgba(0, 91, 135, 0.15);
}
.rhit-src {
  font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700;
  font-size: 13.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--rr-blue); margin-bottom: 4px;
}
.rhit-src .rhit-page { font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--ink-2); }
.rhit-text { max-width: 75ch; font-size: 16px; line-height: 1.55; color: var(--ink); }
.rhit-text mark { background: #ffe07a; color: var(--ink); padding: 0 2px; box-shadow: 0 0 0 1px #e9b600; }

/* =============================================================================
   FOOTER — the interior pages' bottom band
   ============================================================================= */
.footer {
  position: relative;
  margin-top: 72px;
  padding: 48px 24px 34px;
  color: #dbe6f6;
  background:
    radial-gradient(circle at 92% -40%, transparent 0 259px, rgba(95, 190, 240, 0.28) 260px 261.5px, transparent 263px),
    radial-gradient(ellipse 40% 140% at 70% 100%, rgba(33, 102, 196, 0.35), transparent 70%),
    linear-gradient(180deg, var(--space-800), var(--space-950));
  clip-path: polygon(0 0, 56px 0, 78px 22px, 100% 22px, 100% 100%, 0 100%);
}
.footer p {
  position: relative;
  max-width: 820px; margin: 0 auto;
  font-size: 15px; line-height: 1.6; text-align: center;
}
.footer a { color: #8fe0ff; }
.footer a:hover { color: #ffffff; }
.foot-edge { position: absolute; left: 0; right: 0; top: 0; height: 22px; pointer-events: none; }
.foot-edge i:first-child { left: 0; width: 56px; top: 0; }
.foot-edge b { left: 56px; top: 0; width: 31.11px; transform-origin: 0 50%; transform: rotate(45deg); }
.foot-edge i:last-child { left: 78px; right: 0; top: 21px; }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 900px) {
  .mast-emblem { width: 270px; height: 270px; margin-top: -135px; right: -30px; }
  .mast-title { max-width: calc(100% - 220px); }
  .mast-inner { min-height: 250px; }
}
@media (max-width: 700px) {
  body { font-size: 16.5px; }
  .mast { --sx: 44%; --sh: 18px; }
  .mast-inner { min-height: 0; padding: 18px 16px 20px; }
  .mast-title { max-width: none; }
  .mast-sub { margin-top: 12px; font-size: 16px; line-height: 1.2; letter-spacing: 0.03em; padding-right: 136px; }
  .mast-sub::after { margin-top: 10px; }
  .mast-kicker { font-size: 13px; line-height: 1.55; letter-spacing: 0.12em; padding-right: 136px; }
  .mast-kicker span { display: block; }
  /* the planet sits under the logo, beside the subtitle (logo height = 15.52% of its width) */
  .mast-emblem { width: 156px; height: 156px; right: -18px; top: calc(10px + (100vw - 32px) * 0.1552); margin-top: 0; opacity: 1; }
  .mast-rings path[opacity=".45"] { display: none; }

  main { padding: 10px 16px 30px; }
  .intro { margin-top: 10px; }
  .tagline { font-size: 16.5px; }
  .sec + .sec { margin-top: 48px; }
  .sec + .sec::before { margin-bottom: 30px; }
  .sec h2 { margin-top: 26px; }

  .mode-grid, .mods { grid-template-columns: 1fr; }
  .chip { min-height: 50px; padding: 6px 14px 7px 12px; }
  .pbtns { gap: 6px; }
  .pbtn { width: 52px; height: 46px; font-size: 19px; }

  .step { grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; padding: 18px 0 16px; }
  .step-num { width: 38px; height: 33px; font-size: 16px; }
  .step-head { gap: 6px 10px; }
  .step-head h4 { font-size: 16px; }
  .phase-title { font-size: 17px; }
  .step-text ul, .ref-body ul, .teach-panel ul { padding-left: 22px; }
  .step-text ul > li::before, .ref-body ul > li::before, .teach-panel ul > li::before { left: -19px; width: 11px; height: 11px; }

  .teach-panel { border-width: 24px; border-image-width: 24px; padding: 0 2px 4px; margin-left: -8px; margin-right: -8px; }
  .teach-top h3 { font-size: 17px; }

  .ref > summary { font-size: 16.5px; padding: 11px 36px 10px 2px; gap: 10px; }
  .ref-body { padding: 14px 12px 18px 14px; }
  .step-text table, .ref-body table { font-size: 15.5px; }
  .step-text th, .ref-body th { padding: 7px 7px; }
  .step-text td, .ref-body td { padding: 6px 7px; }
  /* 4+ column tables would squeeze their text columns to ~14 characters: give them room and let the
     wrapper scroll sideways (the scroll shadows show there is more) */
  .table-wrap table:has(tr > :nth-child(4)) { min-width: 31rem; }
  li.note { margin-left: -22px; }

  .footer { padding: 42px 18px 28px; }
}
@media (max-width: 380px) {
  .pbtn { width: 48px; height: 42px; font-size: 18px; }
  .mast-sub { font-size: 1.02rem; }
}

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

@media print {
  .mast-sky, .mast-edge, .mast-emblem, .foot-edge { display: none; }
  .mast { color: var(--ink); }
  .footer { color: var(--ink); background: none; clip-path: none; }
}

/* =============================================================================
   ICONS & FRAMES (SVG data URIs).
   Tag icons are the rulebooks' own expansion identifiers, traced as vectors from TE p.4 (Thunder's Edge,
   Twilight Codex) and PoK p.6 (Prophecy of Kings); the rest are small drawn glyphs.
   ============================================================================= */
.tag-base { --tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 2.8h11l5.3 9.2-5.3 9.2h-11L1.2 12z' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='2.7' fill='%23ffffff'/%3E%3C/svg%3E"); }
.tag-pok { --tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 36'%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='27' height='36'%3E%3Cpath d='M18.26 1.09L16.48 10.77L13.3 2.46L10.07 10.93L8.18 1.12L1.11 22.76L8.77 27.68L13.3 35.41L17.83 27.68L25.5 22.76L18.26 1.09' fill='%23fff'/%3E%3Cpath d='M16.17 26.09L13.3 31.14L10.44 26.09L3.75 21.85L7.81 8.12L9 20.92L13.3 24.31L17.61 20.92L18.7 8.12L22.86 21.85L16.17 26.09' fill='%23000'/%3E%3Cpath d='M13.3 7.73L10.87 15.38L11.17 18.96L13.3 21.05L15.44 18.96L15.74 15.38L13.3 7.73' fill='%23000'/%3E%3C/mask%3E%3Crect width='27' height='36' fill='%23ffffff' mask='url(%23m)'/%3E%3C/svg%3E"); }
.tag-codex { --tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 36'%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='27' height='36'%3E%3Cpath d='M5.15 5.95H21.35V29.93H5.15Z' fill='%23fff'/%3E%3Cpath d='M13.25 34.72C13.15 34.72 13.05 34.7 12.96 34.64L6.04 30.64C5.86 30.54 5.75 30.35 5.75 30.15L5.75 22.15C5.75 21.95 5.86 21.76 6.04 21.65L11.22 18.66L11.22 18.48C9.88 17.74 9.03 16.33 9.03 14.78C9.03 12.46 10.92 10.56 13.25 10.56C15.58 10.56 17.47 12.46 17.47 14.78C17.47 16.33 16.62 17.74 15.28 18.48L15.28 20.68C15.28 20.88 15.17 21.07 15 21.17L9.82 24.17L9.82 28.13L13.25 30.11L16.68 28.13L16.69 22.15C16.69 21.94 16.8 21.75 16.98 21.65L21.06 19.29L21.06 10.28L13.25 5.77L5.44 10.28L5.44 17.63C5.44 17.84 5.33 18.03 5.15 18.13L2.23 19.77C2.14 19.82 2.05 19.85 1.95 19.85C1.85 19.85 1.75 19.82 1.66 19.77C1.48 19.66 1.38 19.47 1.38 19.27L1.38 8.26C1.38 8.06 1.48 7.86 1.66 7.76L12.96 1.24C13.05 1.19 13.15 1.16 13.25 1.16C13.35 1.16 13.45 1.19 13.54 1.24L24.84 7.76C25.01 7.86 25.12 8.06 25.12 8.26L25.12 21.31C25.12 21.51 25.01 21.7 24.84 21.81L20.75 24.17L20.75 30.15C20.75 30.35 20.64 30.54 20.46 30.64L13.54 34.64C13.45 34.7 13.35 34.72 13.25 34.72' fill='%23fff'/%3E%3Cpath d='M13.25 0.59C13.05 0.59 12.85 0.64 12.67 0.74L1.38 7.26C1.02 7.47 0.8 7.85 0.8 8.26L0.8 19.27C0.8 19.68 1.02 20.06 1.37 20.26C1.55 20.37 1.75 20.42 1.95 20.42C2.14 20.42 2.34 20.37 2.51 20.27L5.43 18.63C5.79 18.43 6.02 18.05 6.02 17.63L6.02 10.61L13.25 6.43L20.48 10.61L20.48 18.96L16.69 21.15C16.33 21.36 16.11 21.74 16.11 22.15L16.11 25.52L16.11 27.8L13.25 29.45L10.39 27.8L10.39 24.5L15.28 21.67C15.64 21.47 15.86 21.09 15.86 20.68L15.86 18.81C17.21 17.93 18.05 16.43 18.05 14.78C18.05 12.14 15.89 9.99 13.25 9.99C10.61 9.99 8.45 12.14 8.45 14.78C8.45 16.27 9.14 17.65 10.27 18.54L5.75 21.15C5.39 21.36 5.17 21.74 5.17 22.15L5.17 30.15C5.17 30.56 5.39 30.94 5.75 31.14L12.67 35.14C12.85 35.25 13.05 35.3 13.25 35.3C13.45 35.3 13.65 35.25 13.83 35.14L20.75 31.14C21.11 30.94 21.33 30.56 21.33 30.15L21.33 24.5L25.12 22.3C25.48 22.1 25.7 21.72 25.7 21.31L25.7 8.26C25.7 7.85 25.48 7.47 25.12 7.26L13.83 0.74C13.65 0.64 13.45 0.59 13.25 0.59M13.25 1.74L24.55 8.26L24.55 21.31L20.17 23.83L20.17 30.15L13.25 34.15L6.33 30.15L6.33 22.15L11.79 18.99L11.79 18.12C10.51 17.56 9.6 16.28 9.6 14.78C9.6 12.77 11.24 11.14 13.25 11.14C15.26 11.14 16.9 12.77 16.9 14.78C16.9 16.28 15.99 17.56 14.71 18.12L14.71 20.68L9.24 23.83L9.24 28.46L13.25 30.78L17.26 28.46L17.26 25.52L17.26 22.15L21.63 19.62L21.63 9.94L13.25 5.1L4.87 9.94L4.87 17.63L1.95 19.27L1.95 8.26L13.25 1.74' fill='%23fff'/%3E%3Cpath d='M11.53 2.73L1.95 8.26L1.95 19.32L4.87 17.63L4.87 9.94L11.53 6.1L11.53 2.73' fill='%23000'/%3E%3Cpath d='M14.98 2.73L14.98 6.1L21.63 9.94L21.63 17.63L24.55 19.32L24.55 8.26L14.98 2.73' fill='%23000'/%3E%3Cpath d='M16.9 14.78C16.9 12.77 15.26 11.14 13.25 11.14C11.24 11.14 9.61 12.77 9.61 14.78C9.61 16.28 10.5 17.56 11.79 18.12L11.79 18.99L6.32 22.15L6.32 30.15L11.53 33.15L11.53 29.78L9.24 28.46L9.24 23.83L14.71 20.68L14.71 18.12C16 17.56 16.9 16.28 16.9 14.78' fill='%23000'/%3E%3Cpath d='M17.26 22.15L17.26 25.52L17.26 28.46L14.98 29.78L14.98 33.15L20.18 30.15L20.18 23.83L22.83 22.3L19.91 20.62L17.26 22.15' fill='%23000'/%3E%3C/mask%3E%3Crect width='27' height='36' fill='%238fe0ff' mask='url(%23m)'/%3E%3C/svg%3E"); }
.tag-te { --tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='32' height='32'%3E%3Cpath d='M16.25 30.37C8.49 30.37 2.18 24.05 2.18 16.29C2.18 8.53 8.49 2.22 16.25 2.22C24.01 2.22 30.32 8.53 30.32 16.29C30.32 24.05 24.01 30.37 16.25 30.37' fill='%23fff'/%3E%3Cpath d='M16.25 1.35C8.01 1.35 1.31 8.05 1.31 16.29C1.31 24.53 8.01 31.23 16.25 31.23C24.49 31.23 31.19 24.53 31.19 16.29C31.19 8.05 24.49 1.35 16.25 1.35M16.25 3.08C23.55 3.08 29.46 9 29.46 16.29C29.46 23.59 23.55 29.5 16.25 29.5C8.95 29.5 3.04 23.59 3.04 16.29C3.04 9 8.95 3.08 16.25 3.08' fill='%23fff'/%3E%3Cpath d='M27.29 9.03C26.97 9.27 26.74 9.45 26.74 9.45L15.94 17.77L24.71 18.09L11.6 28.65C16.3 30.42 21.81 29.42 25.59 25.63C30.1 21.12 30.67 14.16 27.29 9.03' fill='%23000'/%3E%3Cpath d='M16.66 20.62L7.38 21.12C8.64 19.9 15.55 13.14 19.95 8.85C16.72 9 13.55 9.15 12.21 9.22C12.21 9.22 16.81 4.6 18.19 3.22C14.2 2.64 9.98 3.88 6.91 6.95C1.75 12.11 1.75 20.47 6.91 25.63C7.62 26.34 8.4 26.91 9.21 27.42L16.66 20.62' fill='%23000'/%3E%3C/mask%3E%3Crect width='32' height='32' fill='%23231500' mask='url(%23m)'/%3E%3C/svg%3E"); }
.tag-mode { --tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5l2.9 8.6 8.6 2.9-8.6 2.9L12 23.5l-2.9-8.6L.5 12l8.6-2.9z' fill='%23ffffff'/%3E%3C/svg%3E"); }
.tag-ltp { --tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.3' fill='none' stroke='%23ffffff' stroke-width='2.4'/%3E%3Cpath d='M9.2 8.6L13 6.6V18' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tag-faq { --tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.3' fill='none' stroke='%230b2a5b' stroke-width='2.4'/%3E%3Cpath d='M8.8 9.3a3.3 3.3 0 1 1 4.6 3c-.9.4-1.4 1-1.4 2v.6' fill='none' stroke='%230b2a5b' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='18' r='1.5' fill='%230b2a5b'/%3E%3C/svg%3E"); }
.tag-mod { --tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1.5' y='6' width='21' height='12' rx='6' fill='none' stroke='%23b3121b' stroke-width='2.4'/%3E%3Ccircle cx='16.4' cy='12' r='3.4' fill='%23b3121b'/%3E%3C/svg%3E"); }
:root {
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.3l3.1 3.1 6.5-6.7' fill='none' stroke='%2300163a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-check-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.3l3.1 3.1 6.5-6.7' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-check-cyan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.3l3.1 3.1 6.5-6.7' fill='none' stroke='%237fdcff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-lens: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.8' fill='none' stroke='%23005b87' stroke-width='2.4'/%3E%3Cpath d='M15 15l6.5 6.5' stroke='%23005b87' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5l2.9 8.6 8.6 2.9-8.6 2.9L12 23.5l-2.9-8.6L.5 12l8.6-2.9z' fill='%23005fad'/%3E%3C/svg%3E");
  --i-star-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5l2.9 8.6 8.6 2.9-8.6 2.9L12 23.5l-2.9-8.6L.5 12l8.6-2.9z' fill='%230b2a5b'/%3E%3C/svg%3E");
  --i-star-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.2 6.6 6.6 2.2-6.6 2.2L12 20.8l-2.2-6.6L3.2 12l6.6-2.2z' fill='none' stroke='%230b2a5b' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-hex-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M6.3 1.2h11.4l5.7 9.3-5.7 9.3H6.3L.6 10.5z' fill='%23fffdf7' stroke='%234f5d75' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-hex-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M6.3 1.2h11.4l5.7 9.3-5.7 9.3H6.3L.6 10.5z' fill='%237fdcff' stroke='%237fdcff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9.2 6.4h5.6l2.7 4.1-2.7 4.1H9.2l-2.7-4.1z' fill='%2300163a'/%3E%3C/svg%3E");
  --i-hex-ref: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M6.3 1.2h11.4l5.7 9.3-5.7 9.3H6.3L.6 10.5z' fill='none' stroke='%23005b87' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-hex-muted-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M6.3 1.2h11.4l5.7 9.3-5.7 9.3H6.3L.6 10.5z' fill='%23dde3ec' stroke='%234f5d75' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9.2 6.4h5.6l2.7 4.1-2.7 4.1H9.2l-2.7-4.1z' fill='%234f5d75'/%3E%3C/svg%3E");
  --i-hex-ref-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M6.3 1.2h11.4l5.7 9.3-5.7 9.3H6.3L.6 10.5z' fill='%23005b87' stroke='%23005b87' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9.2 6.4h5.6l2.7 4.1-2.7 4.1H9.2l-2.7-4.1z' fill='%23fff2dd'/%3E%3C/svg%3E");
  --i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.2L8 9.8l3.5-3.6' fill='none' stroke='%23005b87' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --f-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M10.10 1.10L25.90 1.10L34.90 10.10L34.90 34.90L34.90 34.90L1.10 34.90L1.10 34.90L1.10 10.10Z' fill='%23fffad4'/%3E%3Cpath d='M10.10 1.10L25.90 1.10L34.90 10.10L34.90 34.90L34.90 34.90L1.10 34.90L1.10 34.90L1.10 10.10Z' fill='none' stroke='%23ed1c24' stroke-width='1.8'/%3E%3C/svg%3E");
  --f-note-faq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M10.10 1.10L25.90 1.10L34.90 10.10L34.90 34.90L34.90 34.90L1.10 34.90L1.10 34.90L1.10 10.10Z' fill='%23eef5fc'/%3E%3Cpath d='M10.10 1.10L25.90 1.10L34.90 10.10L34.90 34.90L34.90 34.90L1.10 34.90L1.10 34.90L1.10 10.10Z' fill='none' stroke='%23005fad' stroke-width='1.8'/%3E%3C/svg%3E");
  --f-note-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M10.30 1.30L25.70 1.30L34.70 10.30L34.70 34.70L34.70 34.70L1.30 34.70L1.30 34.70L1.30 10.30Z' fill='%23fff0ea'/%3E%3Cpath d='M10.30 1.30L25.70 1.30L34.70 10.30L34.70 34.70L34.70 34.70L1.30 34.70L1.30 34.70L1.30 10.30Z' fill='none' stroke='%23b3121b' stroke-width='2.2'/%3E%3C/svg%3E");
  --f-teach: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M21.73 0.00L96.00 0.00L96.00 0.00L96.00 74.27L74.27 96.00L0.00 96.00L0.00 96.00L0.00 21.73Z' fill='%2300163a'/%3E%3Cpath d='M27.00 9.00L87.00 9.00L87.00 9.00L87.00 69.00L69.00 87.00L9.00 87.00L9.00 87.00L9.00 27.00Z' fill='none' stroke='%2318a3d1' stroke-opacity='0.16' stroke-width='8'/%3E%3Cpath d='M27.00 9.00L87.00 9.00L87.00 9.00L87.00 69.00L69.00 87.00L9.00 87.00L9.00 87.00L9.00 27.00Z' fill='none' stroke='%2318a3d1' stroke-opacity='0.26' stroke-width='5'/%3E%3Cpath d='M27.00 9.00L87.00 9.00L87.00 9.00L87.00 69.00L69.00 87.00L9.00 87.00L9.00 87.00L9.00 27.00Z' fill='none' stroke='%2318a3d1' stroke-opacity='0.45' stroke-width='3'/%3E%3Cpath d='M29.05 12.50L83.50 12.50L83.50 12.50L83.50 66.95L66.95 83.50L12.50 83.50L12.50 83.50L12.50 29.05Z' fill='%23eef5fc' stroke='%235d98d6' stroke-width='5'/%3E%3Cpath d='M27.00 9.00L87.00 9.00L87.00 9.00L87.00 69.00L69.00 87.00L9.00 87.00L9.00 87.00L9.00 27.00Z' fill='none' stroke='%239ae8ff' stroke-width='2'/%3E%3C/svg%3E");
}

/* Components glossary (css/components.css) and rulebook search (css/search.css): tokens from this page's
   palette. --comp-fig is the median corner colour of the crops (the LtP/PoK/TE parchment); --comp-line is
   --line (3.16:1 on --parch-edge). */
#components, .aid-srch {
  --comp-surface: var(--paper); --comp-fig: #ffecd2; --comp-ink: var(--ink); --comp-muted: var(--ink-2);
  --comp-line: var(--line); --comp-accent: var(--ti-blue); --comp-accent-ink: #ffffff;
  --comp-head-font: var(--f-display); --comp-radius: 0px;
}