/* =============================================================================
   Terraforming Mars — Setup & Reference Utility
   Styled after the Terraforming Mars rulebooks (TMRULESFINAL.pdf and the expansion leaflets):
   · cream pages framed in oxide maroon, laid on the Martian surface          (every interior page)
   · Prototype-style capitals over a thick maroon rule                         (page titles, p.2–16)
   · notched-corner sidebars with a round science badge                        (“A Terraformed Mars”, p.3–4)
   · the cover's bands: terrain / the terraformed planet / the title on Valles Marineris, cream rails between
   · step numbers as terraform-rating track cells, player counts as VP coins, hex-tile markers
   Fonts: Russo One ≈ Prototype (headings), Crimson Pro ≈ Minion Pro (body), Source Sans 3 ≈ Myriad Pro (labels).
   ============================================================================= */

:root {
  /* sampled from the rendered rulebook pages */
  --paper:     #f3e7dc;   /* page panel (p.3 #f1e4d9 … #f3e7dc) */
  --paper-2:   #fbf6f0;   /* cards laid on the panel */
  --paper-3:   #eadacb;   /* table heads, stripes */
  --peach:     #fde2c6;   /* sidebar fill (p.3 #fce0c4) */
  --peach-2:   #fdefe1;   /* the long-read teaching panel */
  --oxide:     #5f231c;   /* page frame and heading rule (p.3 #5f221b) */
  --oxide-2:   #74301f;
  --ink:       #1a0f0b;   /* text (the rulebook prints black) */
  --ink-2:     #45302a;   /* secondary text */
  --ink-3:     #6a4b3f;   /* hints and meta */
  --line:      #8b5a48;   /* control borders */
  --line-soft: #dcc6b4;   /* decorative hairlines */
  --tr:        #f08a22;   /* TR track cell (board #f08820) */
  --tr-dk:     #8a3f0e;
  --tr-ink:    #2a1004;
  --focus:     #1a5f96;   /* ocean-tile blue focus ring */
  --cream:     #fbeedb;   /* the cover logo's cream (#f8e8d0) */
  --space:     #040203;

  --f-display: "Russo One", "Arial Black", "Segoe UI", sans-serif;
  --f-body:    "Crimson Pro", "Minion Pro", Georgia, "Times New Roman", serif;
  --f-ui:      "Source Sans 3", "Myriad Pro", "Segoe UI", Arial, sans-serif;

  /* notched frames (9-slice border-images) and badges, drawn from the rulebook's sidebars */
  --fr-light: url("data:image/svg+xml,%3Csvg width='36' height='36' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpolygon points='5,0 31,0 31,5 36,5 36,31 31,31 31,36 5,36 5,31 0,31 0,5 5,5' fill='%23fbf6f0'/%3E%3Cpolygon points='6,1 30,1 30,6 35,6 35,30 30,30 30,35 6,35 6,30 1,30 1,6 6,6' fill='none' stroke='%238b5a48' stroke-width='2'/%3E%3C/svg%3E");
  --fr-hover: url("data:image/svg+xml,%3Csvg width='36' height='36' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpolygon points='5,0 31,0 31,5 36,5 36,31 31,31 31,36 5,36 5,31 0,31 0,5 5,5' fill='%23fffaf5'/%3E%3Cpolygon points='6,1 30,1 30,6 35,6 35,30 30,30 30,35 6,35 6,30 1,30 1,6 6,6' fill='none' stroke='%235f231c' stroke-width='2'/%3E%3C/svg%3E");
  --fr-on: url("data:image/svg+xml,%3Csvg width='36' height='36' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpolygon points='5,0 31,0 31,5 36,5 36,31 31,31 31,36 5,36 5,31 0,31 0,5 5,5' fill='%235f231c'/%3E%3Cpolygon points='6,1 30,1 30,6 35,6 35,30 30,30 30,35 6,35 6,30 1,30 1,6 6,6' fill='none' stroke='%232a0c07' stroke-width='2'/%3E%3C/svg%3E");
  --fr-on-hov: url("data:image/svg+xml,%3Csvg width='36' height='36' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpolygon points='5,0 31,0 31,5 36,5 36,31 31,31 31,36 5,36 5,31 0,31 0,5 5,5' fill='%2374301f'/%3E%3Cpolygon points='6,1 30,1 30,6 35,6 35,30 30,30 30,35 6,35 6,30 1,30 1,6 6,6' fill='none' stroke='%232a0c07' stroke-width='2'/%3E%3C/svg%3E");
  --fr-peach: url("data:image/svg+xml,%3Csvg width='36' height='36' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpolygon points='5,0 31,0 31,5 36,5 36,31 31,31 31,36 5,36 5,31 0,31 0,5 5,5' fill='%23fde2c6'/%3E%3Cpolygon points='6.5,1.5 29.5,1.5 29.5,6.5 34.5,6.5 34.5,29.5 29.5,29.5 29.5,34.5 6.5,34.5 6.5,29.5 1.5,29.5 1.5,6.5 6.5,6.5' fill='none' stroke='%235f231c' stroke-width='3'/%3E%3C/svg%3E");
  --fr-off: url("data:image/svg+xml,%3Csvg width='36' height='36' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpolygon points='5,0 31,0 31,5 36,5 36,31 31,31 31,36 5,36 5,31 0,31 0,5 5,5' fill='%23eee2d6'/%3E%3Cpolygon points='5.75,0.75 30.25,0.75 30.25,5.75 35.25,5.75 35.25,30.25 30.25,30.25 30.25,35.25 5.75,35.25 5.75,30.25 0.75,30.25 0.75,5.75 5.75,5.75' fill='none' stroke='%238a6e5c' stroke-width='1.5' stroke-dasharray='3 2.5'/%3E%3C/svg%3E");
  --fr-input: url("data:image/svg+xml,%3Csvg width='36' height='36' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpolygon points='5,0 31,0 31,5 36,5 36,31 31,31 31,36 5,36 5,31 0,31 0,5 5,5' fill='%23fffaf4'/%3E%3Cpolygon points='6,1 30,1 30,6 35,6 35,30 30,30 30,35 6,35 6,30 1,30 1,6 6,6' fill='none' stroke='%238b5a48' stroke-width='2'/%3E%3C/svg%3E");
  --fr-callout: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpolygon points='7,0 41,0 41,7 48,7 48,41 41,41 41,48 7,48 7,41 0,41 0,7 7,7' fill='%23fde2c6'/%3E%3Cpolygon points='12,5 36,5 36,12 43,12 43,36 36,36 36,43 12,43 12,36 5,36 5,12 12,12' fill='none' stroke='%23a8876f' stroke-width='1'/%3E%3Cpolygon points='8.25,1.25 39.75,1.25 39.75,8.25 46.75,8.25 46.75,39.75 39.75,39.75 39.75,46.75 8.25,46.75 8.25,39.75 1.25,39.75 1.25,8.25 8.25,8.25' fill='none' stroke='%232b1d18' stroke-width='2.5'/%3E%3C/svg%3E");
  --fr-teach: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpolygon points='7,0 41,0 41,7 48,7 48,41 41,41 41,48 7,48 7,41 0,41 0,7 7,7' fill='%23fdefe1'/%3E%3Cpolygon points='12,5 36,5 36,12 43,12 43,36 36,36 36,43 12,43 12,36 5,36 5,12 12,12' fill='none' stroke='%23b39480' stroke-width='1'/%3E%3Cpolygon points='8.25,1.25 39.75,1.25 39.75,8.25 46.75,8.25 46.75,39.75 39.75,39.75 39.75,46.75 8.25,46.75 8.25,39.75 1.25,39.75 1.25,8.25 8.25,8.25' fill='none' stroke='%232b1d18' stroke-width='2.5'/%3E%3C/svg%3E");
  --fr-flag: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpolygon points='7,0 41,0 41,7 48,7 48,41 41,41 41,48 7,48 7,41 0,41 0,7 7,7' fill='%23fde2c6'/%3E%3Cpolygon points='12,5 36,5 36,12 43,12 43,36 36,36 36,43 12,43 12,36 5,36 5,12 12,12' fill='none' stroke='%23c98a7e' stroke-width='1'/%3E%3Cpolygon points='8.25,1.25 39.75,1.25 39.75,8.25 46.75,8.25 46.75,39.75 39.75,39.75 39.75,46.75 8.25,46.75 8.25,39.75 1.25,39.75 1.25,8.25 8.25,8.25' fill='none' stroke='%239b1f16' stroke-width='2.5'/%3E%3C/svg%3E");
  --fr-plate: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpolygon points='7,0 41,0 41,7 48,7 48,41 41,41 41,48 7,48 7,41 0,41 0,7 7,7' fill='%23f3e7dc'/%3E%3Cpolygon points='13,6 35,6 35,13 42,13 42,35 35,35 35,42 13,42 13,35 6,35 6,13 13,13' fill='none' stroke='%23b58a74' stroke-width='1'/%3E%3Cpolygon points='8.5,1.5 39.5,1.5 39.5,8.5 46.5,8.5 46.5,39.5 39.5,39.5 39.5,46.5 8.5,46.5 8.5,39.5 1.5,39.5 1.5,8.5 8.5,8.5' fill='none' stroke='%235f231c' stroke-width='3'/%3E%3C/svg%3E");
  --ico-hex-closed: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12.00,1.40 21.18,6.70 21.18,17.30 12.00,22.60 2.82,17.30 2.82,6.70' fill='%23fbf6f0' stroke='%235f231c' stroke-width='2'/%3E%3Cpath d='M7.5 12h9' stroke='%235f231c' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M12 7.5v9' stroke='%235f231c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --ico-hex-hover: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12.00,1.40 21.18,6.70 21.18,17.30 12.00,22.60 2.82,17.30 2.82,6.70' fill='%23fde2c6' stroke='%235f231c' stroke-width='2'/%3E%3Cpath d='M7.5 12h9' stroke='%235f231c' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M12 7.5v9' stroke='%235f231c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --ico-hex-open: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12.00,1.40 21.18,6.70 21.18,17.30 12.00,22.60 2.82,17.30 2.82,6.70' fill='%231f6aa0' stroke='%230e3a5c' stroke-width='2'/%3E%3Cpath d='M7.5 12h9' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --ico-atom: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.5' stop-color='%23c9c9c9'/%3E%3Cstop offset='1' stop-color='%238e8e8e'/%3E%3C/linearGradient%3E%3CradialGradient id='f' cx='.4' cy='.35' r='.7'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23dedede'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='19' fill='url(%23r)' stroke='%233a3a3a' stroke-width='1.2'/%3E%3Ccircle cx='20' cy='20' r='14.5' fill='url(%23f)' stroke='%236f6f6f' stroke-width='.8'/%3E%3Cg fill='none' stroke='%232f2f2f' stroke-width='1.5'%3E%3Cellipse cx='20' cy='20' rx='10.5' ry='4.2'/%3E%3Cellipse cx='20' cy='20' rx='10.5' ry='4.2' transform='rotate(60 20 20)'/%3E%3Cellipse cx='20' cy='20' rx='10.5' ry='4.2' transform='rotate(-60 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='2.2' fill='%232f2f2f'/%3E%3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.5' stop-color='%23c9c9c9'/%3E%3Cstop offset='1' stop-color='%238e8e8e'/%3E%3C/linearGradient%3E%3CradialGradient id='f' cx='.4' cy='.35' r='.7'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23dedede'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='19' fill='url(%23r)' stroke='%233a3a3a' stroke-width='1.2'/%3E%3Ccircle cx='20' cy='20' r='14.5' fill='url(%23f)' stroke='%236f6f6f' stroke-width='.8'/%3E%3Cpath d='M13.2 20.6l4.4 4.4 9.4-10' fill='none' stroke='%235f231c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-flag: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.5' stop-color='%23c9c9c9'/%3E%3Cstop offset='1' stop-color='%23b0776f'/%3E%3C/linearGradient%3E%3CradialGradient id='f' cx='.4' cy='.35' r='.7'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23dedede'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='19' fill='url(%23r)' stroke='%233a3a3a' stroke-width='1.2'/%3E%3Ccircle cx='20' cy='20' r='14.5' fill='url(%23f)' stroke='%236f6f6f' stroke-width='.8'/%3E%3Cpath d='M20 11.5v10' stroke='%239b1f16' stroke-width='3.6' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='27.6' r='2.3' fill='%239b1f16'/%3E%3C/svg%3E");
  --ico-search: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f231c' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E");
  --ico-tick: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.2 10.4l3.7 3.7 7.9-8.4' fill='none' stroke='%23fbeedb' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-book: url("data:image/svg+xml,%3Csvg width='24' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M12 4.2C9.6 2.4 6.4 1.9 2 2.4v13.4c4.4-.5 7.6 0 10 1.8 2.4-1.8 5.6-2.3 10-1.8V2.4c-4.4-.5-7.6 0-10 1.8z' fill='%23fbf6f0' stroke='%235f231c' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 4.2v13.4' stroke='%235f231c' stroke-width='1.6'/%3E%3C/svg%3E");
  --ico-map: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12.00,1.80 20.83,6.90 20.83,17.10 12.00,22.20 3.17,17.10 3.17,6.90' fill='%23e9b98c' stroke='%235f231c' stroke-width='1.8'/%3E%3Cpolygon points='12.00,6.80 16.50,9.40 16.50,14.60 12.00,17.20 7.50,14.60 7.50,9.40' fill='%231f6aa0'/%3E%3C/svg%3E");
  --ico-map-on: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12.00,1.80 20.83,6.90 20.83,17.10 12.00,22.20 3.17,17.10 3.17,6.90' fill='%233f7a2a' stroke='%231f3d14' stroke-width='1.8'/%3E%3Cpolygon points='12.00,6.80 16.50,9.40 16.50,14.60 12.00,17.20 7.50,14.60 7.50,9.40' fill='%239fd37c'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { font-size: 112.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100vh;
  /* under the fixed surface below: the same terrain tiled, for full-page captures and print previews */
  background: linear-gradient(rgba(48, 16, 6, 0.32), rgba(48, 16, 6, 0.32)), url(../images/mars-terrain.webp) center top / 1600px auto repeat, #7a4329;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
}

/* the Martian surface: fixed behind every page, like the rulebook's page backgrounds */
.mars-bg {
  position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(40, 12, 4, 0) 40%, rgba(40, 12, 4, 0.42) 100%),
    linear-gradient(180deg, rgba(48, 16, 6, 0.18), rgba(48, 16, 6, 0.3)),
    url(../images/mars-terrain.webp) center / cover no-repeat,
    #a86a44;
}

/* =============================================================================
   Header: the rulebook cover
   ============================================================================= */
.topbar {
  position: relative; z-index: 1;
  padding: 7px 0 9px;
  /* the cream rails between the cover bands */
  background:
    repeating-linear-gradient(112deg, rgba(222, 150, 92, 0) 0 46px, rgba(222, 150, 92, 0.22) 46px 49px, rgba(222, 150, 92, 0) 49px 131px),
    linear-gradient(97deg, #fbe8d2 0%, #f1d0ae 20%, #fae4ca 38%, #eec7a2 56%, #f9e1c5 74%, #f0cdab 88%, #fbe7d0 100%);
  box-shadow: 0 6px 20px rgba(24, 6, 2, 0.55);
}
.band { position: relative; }
.band + .band { margin-top: 7px; }
/* terrain bands: stepped edges with a dark outline, as on the covers */
.band-rim, .band-title { filter: drop-shadow(0 1px 0 #4a1e10) drop-shadow(0 -1px 0 #4a1e10); }
.band-in {
  --s: 8px;
  position: relative;
  clip-path: polygon(0 var(--s), 12% var(--s), calc(12% + var(--s)) 0, calc(36% - var(--s)) 0, 36% var(--s),
    63% var(--s), calc(63% + var(--s)) 0, calc(88% - var(--s)) 0, 88% var(--s), 100% var(--s),
    100% calc(100% - var(--s)), 80% calc(100% - var(--s)), calc(80% - var(--s)) 100%, calc(56% + var(--s)) 100%,
    56% calc(100% - var(--s)), 30% calc(100% - var(--s)), calc(30% - var(--s)) 100%, calc(8% + var(--s)) 100%,
    8% calc(100% - var(--s)), 0 calc(100% - var(--s)));
}
.band-rim .band-in { height: 24px; background: url(../images/mars-terrain.webp) 70% 8% / 1600px auto, #b87a50; }

.band-space {
  height: 176px; overflow: hidden;
  display: flex; justify-content: center; align-items: stretch;
  border-top: 1px solid #4a1e10; border-bottom: 1px solid #4a1e10;
  background:
    radial-gradient(1px 1px at 22px 34px, #fff, transparent),
    radial-gradient(1px 1px at 131px 91px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.4px 1.4px at 203px 22px, #fff, transparent),
    radial-gradient(1px 1px at 280px 140px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 76px 150px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.2px 1.2px at 341px 66px, rgba(255, 244, 230, 0.9), transparent),
    radial-gradient(ellipse 34% 90% at 90% 60%, rgba(96, 28, 14, 0.38), transparent 70%),
    radial-gradient(ellipse 30% 80% at 8% 30%, rgba(60, 22, 40, 0.3), transparent 70%),
    var(--space);
  background-size: 380px 176px, 380px 176px, 380px 176px, 380px 176px, 380px 176px, 380px 176px, 100% 100%, 100% 100%;
}
.planet {
  display: block; height: 100%; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}

.band-title .band-in {
  --s: 9px;
  padding: 30px 20px 32px;
  text-align: center;
  background:
    radial-gradient(ellipse 48% 82% at 50% 54%, rgba(30, 9, 3, 0.78), rgba(30, 9, 3, 0.6) 70%, rgba(30, 9, 3, 0.36)),
    url(../images/mars-terrain.webp) 0 41% / 1600px auto,
    #8a5234;
}
.emblem {
  position: absolute; top: 50%; left: 5%; width: 158px; height: 158px; transform: translateY(-50%);
  color: rgba(34, 8, 2, 0.42);
}
.kicker, .brand-sub {
  position: relative;
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5);
}
.kicker { font-size: 0.78rem; letter-spacing: 0.42em; padding-left: 0.42em; margin-bottom: 12px; text-wrap: balance; }
.brand-title {
  position: relative;
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.6rem, 9.2vw, 2.65rem); line-height: 1; letter-spacing: 0.04em;
}
.brand-title span {
  display: block;
  color: var(--cream);
  background: linear-gradient(180deg, #fffaf2 0%, #fcecdc 46%, #f4d8b8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* the logo's extruded edge */
  filter: drop-shadow(1px 1px 0 #7d4526) drop-shadow(1px 1px 0 #683a1f) drop-shadow(1px 1px 0 #532d17) drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.6));
}
.bt-2 { font-size: 1.45em; letter-spacing: 0.07em; margin-top: 0.04em; }
.brand-sub { font-size: 0.8rem; letter-spacing: 0.3em; padding-left: 0.3em; margin-top: 16px; }

/* the announcement: rulebook p.2's framed painting over an italic proclamation */
.announce {
  position: relative; z-index: 2;
  width: min(1000px, calc(100% - 28px));
  margin: -16px auto 34px;
  display: grid; grid-template-columns: minmax(0, 310px) minmax(0, 1fr); gap: 26px; align-items: center;
  padding: 18px 30px 18px 18px;
  background: var(--paper);
  border: 5px solid var(--oxide); border-radius: 18px;
  box-shadow: 0 12px 28px rgba(30, 8, 2, 0.5);
}
.announce-art { margin: 0; }
.announce-art img {
  display: block; width: 100%; height: auto;
  border: 3px solid #2b1d18;
  box-shadow: 3px 5px 9px rgba(0, 0, 0, 0.45);
}
.tagline {
  font-style: italic; font-size: 1.08rem; line-height: 1.55; color: var(--ink-2);
  text-align: center; max-width: 62ch; margin: 0 auto;
  text-wrap: pretty;
}

/* =============================================================================
   Pages (sections)
   ============================================================================= */
main {
  position: relative; z-index: 1;
  max-width: 1000px; margin: 0 auto; padding: 0 14px 20px;
  counter-reset: page;
}
.page {
  position: relative;
  counter-increment: page;
  margin: 0 0 46px;
  padding: 30px 40px 44px;
  /* the rulebook's paper carries a faint relief of the Martian surface */
  background: linear-gradient(rgba(243, 231, 220, 0.93), rgba(243, 231, 220, 0.93)), url(../images/mars-terrain.webp) 50% 30% / 1600px auto, var(--paper);
  border: 5px solid var(--oxide);
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(30, 8, 2, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
/* the rulebook's page-number tab, straddling the bottom frame */
.page::after {
  content: counter(page);
  content: counter(page) / "";
  position: absolute; left: 50%; bottom: -19px; transform: translateX(-50%);
  min-width: 36px; height: 32px; padding: 0 8px;
  font: 400 1rem/28px var(--f-display); color: #111; text-align: center;
  background: linear-gradient(180deg, #ffffff, #e4e4e4);
  border: 2px solid #2b1d18; border-radius: 6px;
  box-shadow: 0 0 0 5px var(--oxide), 0 4px 8px rgba(0, 0, 0, 0.4);
}

.page > h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.45rem, 3.1vw, 2.05rem); line-height: 1.15;
  letter-spacing: 0.18em; padding-left: 0.18em;
  text-transform: uppercase; text-align: center;
  color: #120805;
}
.page > h2::after {
  content: ""; display: block;
  width: min(100%, 760px); height: 6px; margin: 12px auto 0;
  background: var(--oxide);
}
.sec-note {
  max-width: 64ch; margin: 14px auto 24px;
  text-align: center; font-style: italic; font-size: 1rem; color: var(--ink-2);
  text-wrap: pretty;
}

/* =============================================================================
   Mission briefing (configurator)
   ============================================================================= */
.cfg { display: grid; gap: 28px; }
.cfg-row { min-width: 0; }
.cfg-label {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  margin-bottom: 12px;
  font: 700 0.9rem/1.3 var(--f-ui); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--oxide);
}
.cfg-label::before {           /* a terraform-rating track cell */
  content: ""; flex: none; align-self: center;
  width: 13px; height: 13px; border-radius: 3px;
  background: var(--tr); border: 2px solid var(--tr-dk);
}
.cfg-label .hint {
  font: italic 400 1rem/1.35 var(--f-body); letter-spacing: 0; text-transform: none;
  color: var(--ink-3);
}

/* sets in play: notched plates, dark when in play */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: 56px; padding: 7px 16px 8px 14px;
  text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: transparent;
  border: 2px solid transparent;
  border-image: var(--fr-light) 12 fill / 12px / 0 stretch;
}
.chip b { font: 400 0.98rem/1.2 var(--f-display); letter-spacing: 0.01em; }
.chip span { margin-top: 3px; font: 600 0.8rem/1.25 var(--f-ui); letter-spacing: 0.03em; color: var(--ink-3); }
.chip:hover { border-image-source: var(--fr-hover); }
.chip.on { color: var(--cream); border-image-source: var(--fr-on); }
.chip.on:hover { border-image-source: var(--fr-on-hov); }
.chip.on span { color: #f2cfb1; }
.chip.on b::before { content: "✓ "; }
.chip.lock { cursor: default; }
.chip.lock:hover { border-image-source: var(--fr-on); }
.chip.off, .chip[disabled] { cursor: not-allowed; color: var(--ink-3); border-image-source: var(--fr-off); }

/* way to play & maps: sidebar-style cards; the chosen one turns peach and takes the badge */
.mode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr)); gap: 16px 14px; }
.mode-btn {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; min-width: 0;
  min-height: 64px; padding: 13px 18px 14px;
  text-align: left; font: inherit; color: var(--ink-2); cursor: pointer;
  background: transparent;
  border: 2px solid transparent;
  border-image: var(--fr-light) 12 fill / 12px / 0 stretch;
}
.mode-btn b { display: block; margin-bottom: 5px; padding-right: 30px; font: 400 1.05rem/1.25 var(--f-display); color: var(--ink); }
.mode-btn span { display: block; font-size: 1rem; line-height: 1.42; }
.mode-btn .why { margin-top: 7px; font-style: italic; color: var(--oxide); }
.mode-btn:hover { border-image-source: var(--fr-hover); }
.mode-btn.on { color: var(--ink); border-image-source: var(--fr-peach); }
.mode-btn.on::after {
  content: ""; position: absolute; top: -13px; right: 12px;
  width: 34px; height: 34px;
  background: var(--ico-check) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}
.mode-btn.off { cursor: not-allowed; color: var(--ink-3); border-image-source: var(--fr-off); }
.mode-btn.off b { color: var(--ink-3); }
.mode-btn.off .why { color: var(--ink-3); }
/* maps get a hex: an ocean in an empty area, a greenery once chosen */
.map-btn b { display: flex; align-items: center; gap: 8px; }
.map-btn b::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--ico-map) center / contain no-repeat; }
.map-btn.on b::before { background-image: var(--ico-map-on); }

/* players: victory-point coins; the chosen count is struck in bronze */
.pbtns { display: flex; flex-wrap: wrap; gap: 12px; }
.pbtn {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  font: 400 1.25rem/1 var(--f-display); color: var(--ink); cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #fffdf9 0 52%, #f1e2d2 100%);
  border: 2px solid var(--line);
  box-shadow: inset 0 0 0 3px #fff8ef, inset 0 0 0 4px rgba(139, 90, 72, 0.3);
}
.pbtn:hover { border-color: var(--oxide); }
.pbtn.on {
  color: #160904;
  background: radial-gradient(circle at 36% 30%, #ffe8c4 0%, #ecb574 36%, #cf8a45 64%, #93552a 100%);
  border: 3px solid #3b140c;
  box-shadow: inset 0 0 0 2px rgba(255, 232, 196, 0.7), 0 3px 7px rgba(60, 20, 5, 0.4);
  text-shadow: 0 1px 0 rgba(255, 240, 214, 0.6);
}
.pbtn.off, .pbtn[disabled] {
  cursor: not-allowed; color: var(--ink-3);
  background: transparent; border: 2px dashed #8a6e5c; box-shadow: none;
}

/* options & variants: notched cards with a checkbox */
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr)); gap: 12px; align-items: start; }
.mod {
  position: relative; display: block; width: 100%; min-width: 0;
  padding: 12px 16px 13px 50px;
  text-align: left; font: inherit; color: var(--ink-2); cursor: pointer;
  background: transparent;
  border: 2px solid transparent;
  border-image: var(--fr-light) 12 fill / 12px / 0 stretch;
}
.mod::before {
  content: ""; position: absolute; left: 16px; top: 14px;
  width: 22px; height: 22px; border-radius: 3px;
  border: 2px solid var(--oxide); background: #fffdf9;
}
.mod:hover { border-image-source: var(--fr-hover); }
.mod.on { color: var(--ink); border-image-source: var(--fr-peach); }
.mod.on::before { background: var(--oxide) var(--ico-tick) center / 16px no-repeat; }
.mod.lock { cursor: default; }
.mod.lock::before { border-style: dashed; }
.mod-name { display: block; margin-bottom: 3px; font: 700 1.02rem/1.3 var(--f-ui); color: var(--ink); }
.mod-lock { font: italic 400 0.95rem var(--f-body); color: var(--ink-3); }
.mod-sum { display: block; font-size: 1rem; line-height: 1.42; }
.mod-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mod-wrap .mod { flex: 0 0 auto; }
.mod-choices { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 14px; }
.mod-choice {
  position: relative;
  min-height: 42px; padding: 8px 15px 8px 36px;
  font: 600 0.92rem/1.2 var(--f-ui); color: var(--ink); cursor: pointer;
  background: #fffaf4; border: 2px solid var(--line); border-radius: 999px;
}
.mod-choice::before {
  content: ""; position: absolute; left: 12px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  border: 2px solid var(--oxide); background: #fff;
}
.mod-choice:hover { border-color: var(--oxide); }
.mod-choice.on { background: var(--peach); border-color: var(--oxide); box-shadow: inset 0 0 0 1px var(--oxide); }
.mod-choice.on::before { background: radial-gradient(circle, var(--oxide) 0 42%, #fff 47%); }

/* =============================================================================
   Setup steps
   ============================================================================= */
.teach-bar { display: flex; justify-content: center; margin: -4px 0 22px; }
#teachBtn {
  min-height: 50px; padding: 12px 24px;
  font: 700 1.02rem/1.2 var(--f-ui); letter-spacing: 0.02em; color: var(--cream); cursor: pointer;
  background: transparent;
  border: 2px solid transparent;
  border-image: var(--fr-on) 12 fill / 12px / 0 stretch;
}
#teachBtn:hover { border-image-source: var(--fr-on-hov); }
#teachBtn[aria-expanded="true"] { color: var(--ink); border-image-source: var(--fr-peach); }

.phase { margin-top: 30px; }
.phase:first-child { margin-top: 6px; }
.phase-title {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 14px;
  font: 400 1.3rem/1.25 var(--f-display); color: var(--ink);
}
.phase-title::after { content: ""; flex: 1; height: 3px; background: var(--oxide); }

.step {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px;
  margin-bottom: 12px; padding: 16px 20px 16px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(60, 20, 8, 0.1);
}
/* the step number as a cell of the board's terraform-rating track */
.step-num {
  width: 44px; height: 44px; margin-top: 1px;
  display: grid; place-items: center;
  font: 400 1.2rem/1 var(--f-display); color: var(--tr-ink);
  background: linear-gradient(180deg, #f9a445 0%, var(--tr) 55%, #e27514 100%);
  border: 2px solid var(--tr-dk); border-radius: 7px;
  box-shadow: inset 0 0 0 2px rgba(255, 216, 156, 0.55), 0 1px 0 rgba(0, 0, 0, 0.2);
}
.step-body { min-width: 0; }
.step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 6px; }
.step-head h4 { font: 700 1.22rem/1.3 var(--f-body); color: var(--ink); }
.step-text { max-width: 68ch; }
.step-text > p { margin: 4px 0; }

/* lists: hex-tile bullets */
.step-text ul, .ref-body ul, .teach-panel ul { list-style: none; margin: 6px 0 8px; }
.step-text ul > li, .ref-body ul > li, .teach-panel ul > li { position: relative; padding-left: 22px; margin-bottom: 5px; }
.step-text ul > li::before, .ref-body ul > li::before, .teach-panel ul > li::before {
  content: ""; position: absolute; left: 3px; top: 0.56em;
  width: 10px; height: 11px;
  background: var(--oxide);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.step-text ul ul > li::before, .ref-body ul ul > li::before, .teach-panel ul ul > li::before { background: var(--tr-dk); width: 8px; height: 9px; top: 0.62em; }
.step-text ol, .ref-body ol, .teach-panel ol { margin: 6px 0 8px 1.6em; }
.step-text ol > li, .ref-body ol > li, .teach-panel ol > li { margin-bottom: 5px; padding-left: 4px; }
.step-text ol > li::marker, .ref-body ol > li::marker, .teach-panel ol > li::marker { font: 700 0.92em var(--f-ui); color: var(--oxide); }
.step-text b, .ref-body b, .teach-panel b { color: var(--oxide); font-weight: 700; }
.step-text i { color: var(--ink-2); }

/* the rulebook's italic example text */
.inline-note, .step-text p.inline-note, .ref-body p.inline-note {
  margin: 8px 0 6px; padding-left: 12px;
  font-style: italic; font-size: 1rem; color: var(--ink-2);
  border-left: 3px solid #e3b48b;
}

/* citations */
.src-line {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 10px;
  font: 600 0.84rem/1.4 var(--f-ui); letter-spacing: 0.02em; color: #6b3a2a;
}
.src-line::before {
  content: ""; flex: none; align-self: center;
  width: 19px; height: 16px;
  background: var(--ico-book) center / contain no-repeat;
}

/* source tags: one colour per box */
.tag {
  display: inline-block; vertical-align: 0.12em;
  padding: 3px 8px 2px; border-radius: 3px; border: 1px solid transparent;
  font: 700 0.74rem/1.25 var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.tag-base     { background: #5f231c; color: #fbeede; }
.tag-venus    { background: #f1c84b; color: #3a2700; border-color: #b8901c; }
.tag-prelude  { background: #7a2c67; color: #ffffff; }
.tag-prelude2 { background: #a63c7c; color: #ffffff; }
.tag-colonies { background: #3c418e; color: #ffffff; }
.tag-turmoil  { background: #0f6868; color: #ffffff; }
.tag-map      { background: #a34d17; color: #ffffff; }
.tag-he       { background: #3f6b2c; color: #ffffff; }
.tag-av       { background: #a34d17; color: #ffffff; }
.tag-uc       { background: #6d3f1c; color: #ffffff; }
.tag-ma       { background: #f6e7c3; color: #4a3300; border-color: #a8832e; }
.tag-automa   { background: #4a5462; color: #ffffff; }
.tag-solo     { background: #1a5f96; color: #ffffff; }
.tag-variant  { background: #fffaf4; color: #8f2217; border: 1px dashed #8f2217; }
.tag-faq      { background: #2b1d18; color: #fbeede; }

/* sidebar callouts (rulebook p.3–4): notched double frame, round science badge */
.note {
  position: relative;
  margin: 12px 0 18px; padding: 16px 56px 16px 20px;
  border: 2px solid transparent;
  border-image: var(--fr-callout) 16 fill / 16px / 0 stretch;
}
.note::after {
  content: ""; position: absolute; top: -14px; right: 16px;
  width: 36px; height: 36px;
  background: var(--ico-atom) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}
.note.flag { border-image-source: var(--fr-flag); }
.note.flag::after { background-image: var(--ico-flag); }

/* =============================================================================
   Teaching script
   ============================================================================= */
.teach-panel {
  position: relative;
  margin: 8px 0 30px; padding: 28px 34px 26px;
  border: 2px solid transparent;
  border-image: var(--fr-teach) 16 fill / 16px / 0 stretch;
}
.teach-panel::before {
  content: ""; position: absolute; top: -18px; right: 28px;
  width: 42px; height: 42px;
  background: var(--ico-atom) center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}
.teach-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 8px; padding-right: 40px; }
.teach-top h3 { font: 400 1.28rem/1.25 var(--f-display); color: var(--ink); }
.teach-copy {
  min-height: 44px; padding: 9px 16px;
  font: 700 0.95rem/1.2 var(--f-ui); color: var(--ink); cursor: pointer;
  background: transparent;
  border: 2px solid transparent;
  border-image: var(--fr-light) 12 fill / 12px / 0 stretch;
}
.teach-copy:hover { border-image-source: var(--fr-hover); }
.teach-note {
  margin-bottom: 14px; padding-bottom: 12px;
  font-style: italic; font-size: 1rem; color: var(--ink-2);
  border-bottom: 2px dashed #c9a58b;
}
.teach-panel h4 { margin: 20px 0 6px; font: 400 1.08rem/1.3 var(--f-display); color: var(--oxide); }
.teach-panel p, .teach-panel ul, .teach-panel ol { max-width: 68ch; }
.teach-panel p { margin-bottom: 10px; text-wrap: pretty; }

/* =============================================================================
   Rules reference
   ============================================================================= */
.ref {
  margin-bottom: 10px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(60, 20, 8, 0.1);
}
.ref > summary {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 12px;
  min-height: 54px; padding: 12px 18px 12px 14px;
  list-style: none; cursor: pointer;
  font: 400 1.08rem/1.3 var(--f-display); color: var(--ink);
  border-radius: 8px;
}
.ref > summary::-webkit-details-marker { display: none; }
.ref > summary::before {
  content: ""; flex: none;
  width: 26px; height: 26px;
  background: var(--ico-hex-closed) center / contain no-repeat;
}
.ref > summary:hover { color: var(--oxide); }
.ref > summary:hover::before { background-image: var(--ico-hex-hover); }
.ref[open] > summary { border-bottom: 3px solid var(--oxide); border-radius: 8px 8px 0 0; }
.ref[open] > summary::before { background-image: var(--ico-hex-open); }
.ref-body { padding: 16px 22px 20px; }
.ref-body > p, .ref-body > ul, .ref-body > ol, .ref-body > h4 { max-width: 68ch; }
.ref-body h4 { margin: 18px 0 6px; font: 400 1.04rem/1.3 var(--f-display); color: var(--oxide); }
.ref-body h4:first-child { margin-top: 0; }
.ref-body p { margin-bottom: 10px; text-wrap: pretty; }
.ref-body i { color: var(--ink-2); }
ul.cols { columns: 2 280px; column-gap: 30px; }
ul.cols > li { break-inside: avoid; }

/* tables */
.rtable, .tbl {
  width: 100%; margin: 8px 0 14px;
  border-collapse: collapse;
  font-size: 0.95rem; line-height: 1.45;
  background: #fffdf9;
}
.rtable thead th, .tbl thead th {
  padding: 9px 10px 8px; vertical-align: bottom; text-align: left;
  font: 700 0.76rem/1.25 var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); background: var(--paper-3);
  border-bottom: 3px solid var(--oxide);
}
.rtable td, .rtable tbody th, .tbl td, .tbl tbody th {
  padding: 8px 10px; vertical-align: top; text-align: left;
  border-bottom: 1px solid #e2cfbf;
}
.rtable tbody th, .tbl tbody th { font-weight: 700; color: var(--ink); }
.rtable tbody th { white-space: nowrap; }
.rtable tbody tr:nth-child(even), .tbl tbody tr:nth-child(even) { background: rgba(234, 218, 203, 0.4); }
.rtable .tag { margin-left: 4px; }
.tbl-wrap { overflow-x: auto; margin: 8px 0 14px; -webkit-overflow-scrolling: touch; }
.tbl-wrap .tbl { margin: 0; }
.tbl td ul { margin: 0; }
.tbl tr.is-current th, .tbl tr.is-current td { background: var(--peach); }
.tbl tr.is-current th { box-shadow: inset 5px 0 0 var(--oxide); }

/* =============================================================================
   Rulebook search
   ============================================================================= */
.rsearch-wrap { position: relative; margin: 0 0 16px; }
.rsearch-wrap::before {
  content: ""; position: absolute; z-index: 1; left: 17px; top: 50%;
  width: 22px; height: 22px; margin-top: -11px;
  background: var(--ico-search) center / contain no-repeat;
  pointer-events: none;
}
#rsearch {
  width: 100%; min-height: 56px; padding: 12px 18px 12px 52px;
  font: 400 1.05rem/1.3 var(--f-body); color: var(--ink);
  background: transparent;
  border: 2px solid transparent; border-radius: 0;
  border-image: var(--fr-input) 12 fill / 12px / 0 stretch;
  -webkit-appearance: none; appearance: none;
}
#rsearch:hover { border-image-source: var(--fr-hover); }
#rsearch:focus { outline: 3px solid var(--focus); outline-offset: 3px; border-image-source: var(--fr-hover); }
#rsearch::placeholder { color: var(--ink-3); opacity: 1; font-style: italic; }

.rhint { margin: 2px 0 12px; font-style: italic; color: var(--ink-2); }
.rhit {
  margin-bottom: 10px; padding: 12px 18px 13px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft); border-left: 5px solid var(--oxide); border-radius: 6px;
}
.rhit-src { margin-bottom: 5px; font: 700 0.84rem/1.3 var(--f-ui); letter-spacing: 0.07em; text-transform: uppercase; color: var(--oxide); }
.rhit-page { font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); }
.rhit-text { max-width: 80ch; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.rhit-text mark { padding: 0 2px; border-radius: 2px; background: #f6d23e; color: var(--ink); box-shadow: inset 0 0 0 1px #d2a318; }

/* =============================================================================
   Components glossary (css/components.css) and rulebook search (css/search.css) — tokens from this
   page's palette
   ============================================================================= */
#components, .aid-srch {
  --comp-surface: var(--paper-2);
  --comp-fig: #e3dfce;
  --comp-ink: var(--ink);
  --comp-muted: #5a3d31;
  --comp-line: var(--line);
  --comp-accent: var(--oxide);
  --comp-accent-ink: #fbeede;
  --comp-head-font: "Russo One", "Arial Black", sans-serif;
  --comp-radius: 8px;
  font-synthesis-weight: none;
}

/* =============================================================================
   Footer: the back cover's credits plate
   ============================================================================= */
.footer {
  position: relative; z-index: 1;
  width: min(860px, calc(100% - 28px));
  margin: 0 auto 44px; padding: 22px 34px 24px;
  text-align: center; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2);
  border: 2px solid transparent;
  border-image: var(--fr-plate) 16 fill / 16px / 0 stretch;
  filter: drop-shadow(0 10px 18px rgba(30, 8, 2, 0.45));
}

/* =============================================================================
   Focus, motion, small screens
   ============================================================================= */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ref > summary:focus-visible { outline-offset: 2px; }

@media (max-width: 760px) {
  .emblem { display: none; }
  .announce { grid-template-columns: 1fr; padding: 16px 18px; }
  .announce-art { display: none; }
}

@media (max-width: 640px) {
  .band + .band { margin-top: 5px; }
  .topbar { padding: 5px 0 7px; }
  .band-in { --s: 5px; }
  .band-rim .band-in { height: 14px; }
  .band-space { height: 112px; background-size: 260px 112px, 260px 112px, 260px 112px, 260px 112px, 260px 112px, 260px 112px, 100% 100%, 100% 100%; }
  .band-title .band-in { --s: 6px; padding: 18px 12px 20px; background-size: auto, 940px auto; background-position: 0 0, 22% 42%; }
  .kicker { font-size: 0.75rem; letter-spacing: 0.13em; padding-left: 0.13em; margin-bottom: 8px; }
  .brand-sub { font-size: 0.75rem; letter-spacing: 0.2em; padding-left: 0.2em; margin-top: 10px; }
  .announce { width: calc(100% - 16px); margin: -12px auto 26px; border-width: 4px; border-radius: 14px; }
  .tagline { font-size: 1rem; }

  main { padding: 0 8px 12px; }
  .page { padding: 22px 14px 36px; margin-bottom: 40px; border-width: 4px; border-radius: 14px; }
  .page::after { box-shadow: 0 0 0 4px var(--oxide), 0 4px 8px rgba(0, 0, 0, 0.4); bottom: -18px; }
  .page > h2 { letter-spacing: 0.12em; padding-left: 0.12em; }
  .page > h2::after { height: 5px; margin-top: 10px; }
  .sec-note { text-align: left; margin: 12px 0 20px; }

  .cfg { gap: 24px; }
  .chips { gap: 8px; }
  .chip { flex: 1 1 auto; min-height: 52px; padding: 6px 12px 7px 11px; }
  .mode-grid { gap: 14px; }
  .mod-choices { padding-left: 6px; }

  /* steps: the track cell moves up beside the title to give the text the full width */
  .step { grid-template-columns: 38px minmax(0, 1fr); gap: 4px 12px; padding: 12px 12px 13px; }
  .step-body { display: contents; }
  .step-num { grid-row: 1; grid-column: 1; width: 38px; height: 38px; font-size: 1.05rem; margin-top: 0; }
  .step-head { grid-row: 1; grid-column: 2; align-self: center; margin-bottom: 0; }
  .step-text, .src-line { grid-column: 1 / -1; }
  .step-text { margin-top: 6px; }
  .step-head h4 { font-size: 1.15rem; }

  .teach-panel { padding: 26px 16px 20px; }
  .teach-panel::before { right: 16px; }
  .ref > summary { padding: 11px 12px 11px 10px; font-size: 1.02rem; }
  .ref-body { padding: 14px 13px 16px; }
  .rtable, .tbl { font-size: 0.9rem; }
  .rtable td, .rtable tbody th, .tbl td, .tbl tbody th { padding: 7px 6px; }
  .rtable thead th, .tbl thead th { padding: 8px 6px 7px; letter-spacing: 0.05em; }
  .rtable tbody th { white-space: normal; }
  .rhit { padding: 11px 13px 12px; }
  .footer { width: calc(100% - 16px); padding: 18px 18px 20px; }
}

/* very narrow phones (≤ 360px): let long words hyphenate or break rather than widen the page */
@media (max-width: 360px) {
  .ref > summary, .step-head h4, .mode-btn b, .chip b { overflow-wrap: anywhere; }
  .rtable td, .rtable th, .tbl td, .tbl th { hyphens: auto; overflow-wrap: anywhere; }
  .page { padding-left: 11px; padding-right: 11px; }
}

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

@media (forced-colors: active) {
  .brand-title span { -webkit-text-fill-color: CanvasText; background: none; filter: none; }
  .chip, .mode-btn, .mod, #teachBtn, .teach-copy, #rsearch, .note, .teach-panel, .footer { border: 2px solid CanvasText; border-image: none; }
  .chip.on, .mode-btn.on, .mod.on { border-width: 4px; }
}

@media print {
  .mars-bg, .band-space, .band-rim, .emblem, .announce-art, .teach-bar { display: none; }
  body, .topbar { background: #fff; }
  .page { box-shadow: none; break-inside: auto; }
}

/* MarsBot board table: a tag icon stays on one line with its tag's first word (plain inline, so the text keeps one baseline) */
.tm-nowrap { white-space: nowrap; }