/* ===== Thorpe Tracker — styled after the printed pamphlet =====
   Monochrome letterpress: black ink on cream paper, blackletter display
   headings (UnifrakturCook) and an antique serif body (IM Fell English). */

@font-face {
  font-family: 'UnifrakturCook'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/unifrakturcook-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IM Fell English'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/imfellenglish-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IM Fell English'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/imfellenglish-400-italic.woff2') format('woff2');
}

:root {
  --paper:   #ece2c9;
  --paper-2: #f4ecd6;
  --panel:   #f3ebd4;
  --ink:     #211a10;
  --ink-soft:#5c5039;
  --rule:    rgba(33, 26, 16, .34);
  --rule-strong: #211a10;
  --good:    #3f5a2c;
  --bad:     #7c2b18;
  --hard-shadow: rgba(33, 26, 16, .55);
  --blackletter: 'UnifrakturCook', 'UnifrakturCook Web', 'Luminari', fantasy;
  --serif: 'IM Fell English', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --radius: 4px;
  font-size: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #15110a;
    --paper-2: #1d1710;
    --panel:   #1f1810;
    --ink:     #eadfc4;
    --ink-soft:#a6987a;
    --rule:    rgba(234, 223, 196, .26);
    --rule-strong: #eadfc4;
    --good:    #8aad63;
    --bad:     #d98368;
    --hard-shadow: rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  --paper:#15110a; --paper-2:#1d1710; --panel:#1f1810; --ink:#eadfc4; --ink-soft:#a6987a;
  --rule:rgba(234,223,196,.26); --rule-strong:#eadfc4; --good:#8aad63; --bad:#d98368; --hard-shadow:rgba(0,0,0,.6);
}
:root[data-theme="light"] {
  --paper:#ece2c9; --paper-2:#f4ecd6; --panel:#f3ebd4; --ink:#211a10; --ink-soft:#5c5039;
  --rule:rgba(33,26,16,.34); --rule-strong:#211a10; --good:#3f5a2c; --bad:#7c2b18; --hard-shadow:rgba(33,26,16,.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background-color: var(--paper);
  /* faint paper grain + vignette */
  background-image:
    radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(33,26,16,.06) 100%),
    repeating-linear-gradient(0deg, rgba(33,26,16,.015) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(33,26,16,.015) 0 2px, transparent 2px 4px);
  line-height: 1.5;
  min-height: 100vh;
  font-size: 1.06rem;
}
/* Dark paper grain — via OS preference and via an explicit data-theme override. */
@media (prefers-color-scheme: dark) {
  body { background-image:
    radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,.35) 100%),
    repeating-linear-gradient(0deg, rgba(234,223,196,.02) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(234,223,196,.02) 0 2px, transparent 2px 4px); }
}
:root[data-theme="dark"] body { background-image:
  radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,.35) 100%),
  repeating-linear-gradient(0deg, rgba(234,223,196,.02) 0 2px, transparent 2px 4px),
  repeating-linear-gradient(90deg, rgba(234,223,196,.02) 0 2px, transparent 2px 4px); }
:root[data-theme="light"] body { background-image:
  radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(33,26,16,.06) 100%),
  repeating-linear-gradient(0deg, rgba(33,26,16,.015) 0 2px, transparent 2px 4px),
  repeating-linear-gradient(90deg, rgba(33,26,16,.015) 0 2px, transparent 2px 4px); }

/* Blackletter for all display headings */
h1, h2, h3 { font-family: var(--serif); }
.blackletter, .brand .title { font-family: var(--blackletter); }

/* Double-rule helper used under headings (thick line + thin line) */
.doublerule { position: relative; border-bottom: 2.5px solid var(--rule-strong); padding-bottom: .35rem; }
.doublerule::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--rule-strong); }

/* ---------- Top bar ---------- */
header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper-2);
  border-bottom: 3px double var(--rule-strong);
}
.topbar {
  max-width: 1240px; margin: 0 auto; padding: .5rem 1rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; gap: .6rem; }
.brand .title {
  font-family: var(--blackletter);
  font-size: 2.5rem; line-height: 1; font-weight: 700; color: var(--ink);
}
.brand .sub { color: var(--ink-soft); font-style: italic; font-size: .9rem; }
.village-block { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.village-name {
  font-size: 1.2rem; font-weight: 700; color: var(--ink);
  background: transparent; border: none; border-bottom: 1px solid var(--rule);
  font-family: var(--blackletter); min-width: 8ch; padding: .1rem .2rem;
}
.village-name:focus { outline: none; border-bottom-color: var(--ink); }
.weekpill {
  background: var(--ink); color: var(--paper-2); border-radius: 2px;
  padding: .2rem .7rem; font-weight: 700; display: inline-flex; gap: .4rem; align-items: center;
  letter-spacing: .3px;
}
.weekpill small { font-weight: 400; opacity: .85; }

/* Slim credit bar that links to the footer CTA */
.topcredit-bar {
  background: var(--paper-2); border-bottom: 1px solid var(--rule);
  text-align: center; font-size: .82rem; font-style: italic; padding: .25rem 1rem;
}
.topcredit-bar a { color: var(--ink-soft); text-decoration: none; }
.topcredit-bar a:hover { color: var(--ink); text-decoration: underline; }
.topcredit-bar a b { font-style: normal; color: var(--ink); }

/* Resource ribbon */
.ribbon { background: var(--paper); border-bottom: 1px solid var(--rule); }
.ribbon-inner {
  max-width: 1240px; margin: 0 auto; padding: .4rem 1rem;
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch;
}
.res {
  display: flex; align-items: center; gap: .35rem;
  background: var(--panel); border: 1.5px solid var(--rule-strong);
  border-radius: 2px; padding: .2rem .5rem; min-width: 92px;
}
.res .ico { font-size: 1.1rem; width: 1.3rem; text-align: center; }
.res .lab { font-size: .66rem; text-transform: uppercase; color: var(--ink-soft); letter-spacing: .6px; }
.res .val { font-weight: 700; font-size: 1.1rem; margin-left: auto; }
.res.warn { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad) inset; }

/* ---------- Layout ---------- */
main { max-width: 1240px; margin: 0 auto; padding: 1rem; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.card {
  background: var(--panel);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 -1px var(--rule);
  padding: .9rem 1.1rem 1rem; min-width: 0;
}
.card h2 {
  margin: 0 0 .7rem; font-size: 1.5rem; color: var(--ink);
  font-family: var(--blackletter); font-weight: 700; letter-spacing: .5px;
  text-align: center;
  border-bottom: 2.5px solid var(--rule-strong); padding-bottom: .4rem;
  position: relative; display: flex; align-items: baseline; justify-content: center; gap: .5rem; flex-wrap: wrap;
}
.card h2::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--rule-strong); }
.card h2 .flair { font-family: var(--serif); font-size: .8rem; color: var(--ink-soft); font-weight: 400; font-style: italic; letter-spacing: 0; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
@media (max-width: 980px) {
  .span-3,.span-4,.span-5,.span-6,.span-7,.span-8 { grid-column: span 12; }
}

/* ---------- Steppers / numbers ---------- */
.stat-row { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; border-bottom: 1px dotted var(--rule); }
.stat-row:last-child { border-bottom: none; }
.stat-row .name { display: flex; align-items: center; gap: .4rem; flex: 1; }
.stat-row .name .ico { font-size: 1.15rem; }
.stepper { display: inline-flex; align-items: center; gap: .2rem; }
.stepper input {
  width: 3.6rem; text-align: center; font-weight: 700; font-size: 1.05rem;
  background: var(--paper-2); border: 1.5px solid var(--rule-strong); border-radius: 2px; padding: .2rem; color: var(--ink);
  font-family: var(--serif);
}

/* Woodcut / letterpress buttons */
button {
  font-family: var(--serif); cursor: pointer; color: var(--ink);
  background: var(--paper-2);
  border: 1.5px solid var(--rule-strong); border-radius: 2px; padding: .32rem .65rem;
  font-size: .95rem; font-weight: 700; letter-spacing: .2px;
  box-shadow: 2px 2px 0 -0.5px var(--rule-strong);
  transition: transform .04s, box-shadow .08s, background .08s;
}
button:hover { background: var(--paper); }
button:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 var(--rule-strong); }
button.mini { padding: .08rem .4rem; font-weight: 700; line-height: 1.2; box-shadow: 1px 1px 0 -0.5px var(--rule-strong); font-size: .85rem; }
button.primary { background: var(--ink); color: var(--paper-2); border-color: var(--ink); }
button.primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
button.good { background: var(--good); color: #f4ecd6; border-color: var(--good); }
button.danger { background: var(--bad); color: #f4ecd6; border-color: var(--bad); }
button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
button.tab { border-radius: 2px 2px 0 0; }

/* Villager status chips */
.vstatus { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.chip {
  border: 1.5px solid var(--rule-strong); border-radius: 2px; padding: .12rem .55rem;
  font-size: .82rem; background: var(--paper-2); display: inline-flex; gap: .3rem; align-items: center;
}
.chip b { font-size: .9rem; }
.chip.hurt { border-color: var(--bad); color: var(--bad); }

/* ---------- Tasks ---------- */
.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.task {
  border: 1.5px solid var(--rule-strong); border-radius: 2px; padding: .5rem .6rem; background: var(--paper-2);
  display: flex; flex-direction: column; gap: .35rem;
}
.task h3 { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: .35rem; font-weight: 700; }
.task .req { font-size: .72rem; color: var(--ink-soft); font-style: italic; }
.task .assign { display: flex; align-items: center; gap: .3rem; }
.task .assign input { width: 3rem; }
.task .result { font-size: .85rem; min-height: 1.2em; color: var(--ink-soft); }
.dice { display: inline-flex; gap: .2rem; flex-wrap: wrap; }
.die {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem;
  background: var(--paper-2); color: var(--ink); border: 1.5px solid var(--rule-strong); border-radius: 2px; font-weight: 700; font-size: .9rem;
}
.die.crit { background: var(--ink); color: var(--paper-2); }
.die.bad { background: var(--bad); color: #f4ecd6; border-color: var(--bad); }

/* ---------- Buildings / Leaders tiles ---------- */
.tile-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:.55rem; margin-bottom:.3rem; }
.tile {
  border:1.5px solid var(--rule-strong); border-radius:2px; background:var(--paper-2);
  padding:.5rem .6rem; display:flex; flex-direction:column; gap:.28rem;
}
.tile h3 { margin:0; font-size:1.04rem; font-weight:700; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; line-height:1.15; }
.tile .tile-cost { font-size:.78rem; font-weight:700; font-style:italic; color:var(--ink); }
.tile .tile-desc { font-size:.82rem; color:var(--ink-soft); flex:1; }
.tile .req { font-size:.74rem; font-style:italic; color:var(--bad); }
.tile .tile-foot { margin-top:.15rem; display:flex; gap:.35rem; align-items:center; }
.tile .tile-foot > button:first-child:not(.mini) { flex:1; }
.tile.built { background:var(--panel); border-left:4px solid var(--good); }
.tile.locked { opacity:.65; }
.tile.feast { border-width:2.5px; }
.tile.feast.built { border-color:var(--good); }

/* ---------- Buildings / Leaders lists (legacy) ---------- */
.itemlist { display: flex; flex-direction: column; gap: .4rem; }
.item {
  border: 1.5px solid var(--rule-strong); border-radius: 2px; padding: .5rem .6rem; background: var(--paper-2);
  display: flex; gap: .6rem; align-items: flex-start;
}
.item.built { background: var(--panel); border-left: 4px solid var(--good); }
.item .body { flex: 1; min-width: 0; }
.item .body h3 { margin: 0 0 .1rem; font-size: 1.05rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-weight: 700; }
.item .cost { font-size: .8rem; color: var(--ink); font-weight: 700; font-style: italic; }
.item .desc { font-size: .86rem; color: var(--ink-soft); }
.item .tag { font-size: .64rem; text-transform: uppercase; letter-spacing: .5px; background: var(--panel); border:1.5px solid var(--rule-strong); border-radius: 2px; padding: 0 .3rem; color: var(--ink-soft); }
.item .actions { display: flex; flex-direction: column; gap: .25rem; align-items: stretch; }
.built-badge { color: var(--good); font-weight: 700; font-size: .82rem; }
.cat-head {
  font-weight: 700; color: var(--ink); font-size: .78rem; text-transform: uppercase; letter-spacing: 1.5px;
  margin: .6rem 0 .2rem; padding-bottom: .15rem; border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
}

/* ---------- Encounter ---------- */
.enc-box { border:1.5px solid var(--rule-strong); border-radius:2px; padding:.6rem; background:var(--paper-2); }
.enc-title { font-size:1.35rem; font-weight:700; font-family: var(--blackletter); }
.enc-title.hostile { color: var(--bad); }
.enc-title.ongoing { color: var(--ink); }
.enc-title.friendly { color: var(--good); }
.enc-title.quiet { color: var(--ink-soft); }
.enc-meta { font-size:.86rem; color:var(--ink-soft); margin:.2rem 0; }
.enc-outcome { margin:.3rem 0; }
.enc-outcome em { color: var(--ink-soft); }
.defense-line { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-top:.4rem; padding-top:.4rem; border-top:1px dotted var(--rule); }
.badge { display:inline-block; background:var(--ink); color:var(--paper-2); border-radius:2px; padding:.05rem .4rem; font-weight:700; font-size:.9rem; }
.badge.good { background: var(--good); color:#f4ecd6; } .badge.bad { background: var(--bad); color:#f4ecd6; }

/* ---------- Statuses / effects ---------- */
.effects { display:flex; flex-wrap:wrap; gap:.4rem; }
.effect { border:1.5px solid var(--rule-strong); background: var(--panel); border-radius:2px; padding:.12rem .55rem; font-size:.82rem; display:inline-flex; gap:.4rem; align-items:center; }
.effect button { padding:0 .3rem; line-height:1.2; box-shadow:none; }

/* ---------- Emergency ---------- */
.emergency { display:grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap:.5rem; }
.measure { border:1.5px solid var(--rule-strong); border-radius:2px; padding:.5rem; background:var(--paper-2); }
.measure.used { opacity:.6; background: repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 7px, var(--panel) 7px, var(--panel) 14px); }
.measure h3 { margin:0 0 .2rem; font-size:1rem; font-weight:700; }
.measure p { margin:0 0 .4rem; font-size:.82rem; color:var(--ink-soft); }

/* ---------- Log ---------- */
.log { max-height: 340px; overflow:auto; font-size:.9rem; }
.log-entry { padding:.35rem .1rem; border-bottom:1px dotted var(--rule); }
.log-entry .wk { font-weight:700; color:var(--ink); margin-right:.4rem; font-variant:small-caps; }
.log-entry.roll { color: var(--ink-soft); }
.log-entry.gain b { color: var(--good); }
.log-entry.loss b { color: var(--bad); }

/* ---------- Reference tables (pamphlet: borderless, ruled header) ---------- */
details.ref { border:1.5px solid var(--rule-strong); border-radius:2px; background:var(--paper-2); margin-bottom:.6rem; }
details.ref > summary { cursor:pointer; padding:.5rem .7rem; font-weight:700; color:var(--ink); font-size:1.05rem; }
details.ref[open] > summary { border-bottom:1.5px solid var(--rule-strong); }
.ref-body { padding:.6rem .7rem; overflow-x:auto; }
table.ref-table { border-collapse: collapse; width:100%; font-size:.88rem; }
table.ref-table th, table.ref-table td { border:none; padding:.28rem .5rem; text-align:left; vertical-align:top; }
table.ref-table thead th { border-bottom:2px solid var(--rule-strong); font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:.78rem; }
table.ref-table tbody tr { border-bottom:1px solid var(--rule); }
table.ref-table tbody tr:last-child { border-bottom:none; }

/* ---------- Footer / toolbar ---------- */
.toolbar { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.toolbar .spacer { flex:1; }
footer { max-width:1240px; margin:0 auto; padding:1rem; color:var(--ink-soft); font-size:.85rem; text-align:center; }
footer a { color: var(--ink); }
.savenote { font-size:.78rem; color:var(--ink-soft); font-style:italic; }

/* Credit / support-the-creator callout */
.credit {
  max-width:620px; margin:1rem auto 0; padding:.9rem 1.1rem;
  border:2px solid var(--rule-strong); border-radius:3px; background:var(--panel);
  box-shadow:3px 3px 0 -1px var(--rule); color:var(--ink);
}
.credit p { margin:.35rem 0; }
.credit .credit-link {
  display:inline-block; margin-top:.2rem; padding:.4rem .8rem; font-weight:700;
  color:var(--paper-2); background:var(--ink); border:1.5px solid var(--ink); border-radius:2px;
  text-decoration:none; box-shadow:2px 2px 0 -0.5px var(--rule-strong);
}
.credit .credit-link:hover { background:var(--ink-soft); border-color:var(--ink-soft); }
.credit .fineprint { font-size:.72rem; font-style:italic; color:var(--ink-soft); margin-top:.6rem; }

/* ---------- Modal ---------- */
.modal-back { position:fixed; inset:0; background:rgba(20,15,7,.6); display:grid; place-items:center; z-index:100; padding:1rem; }
.modal { background:var(--panel); border:2.5px solid var(--rule-strong); border-radius:3px; max-width:560px; width:100%; box-shadow:6px 6px 0 -1px var(--hard-shadow); max-height:88vh; overflow:auto; }
.modal .m-head { padding:.7rem 1rem; border-bottom:2.5px solid var(--rule-strong); font-weight:700; color:var(--ink); font-size:1.4rem; font-family:var(--blackletter); text-align:center; }
.modal .m-body { padding:1rem; }
.modal .m-foot { padding:.7rem 1rem; border-top:1.5px solid var(--rule-strong); display:flex; gap:.5rem; justify-content:flex-end; }
.hidden { display:none !important; }
.dice-inputs { display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; }
.die-input {
  width:2.6rem; text-align:center; font-weight:700; font-size:1.1rem; font-family:var(--serif);
  background:var(--paper-2); border:1.5px solid var(--rule-strong); border-radius:2px; padding:.3rem .2rem; color:var(--ink);
}
.die-input:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 2px var(--rule); }
#diceModeBtn { font-weight:700; }

/* ---------- Village scene (SVG woodcut) ---------- */
.village-scene { width:100%; overflow:hidden; margin-top:.3rem; }
.village-scene svg { width:100%; height:auto; display:block; }
.vk-ink   { fill: var(--ink); }
.vk-cut   { fill: var(--panel); }
.vk-bad   { fill: var(--bad); }
.vk-smoke { fill: var(--ink-soft); opacity:.5; }
.vk-line  { stroke: var(--ink); stroke-width:2; fill:none; }
.vk-stroke{ stroke: var(--ink); stroke-width:2; fill:none; stroke-linecap:round; }
.vk-label { fill: var(--ink-soft); font-family: var(--serif); font-size:12px; font-style:italic; }

/* Resource picker (button per Resource) */
.res-choices { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:.5rem; margin-top:.6rem; }
.res-choice { display:flex; align-items:center; gap:.5rem; justify-content:flex-start; padding:.55rem .7rem; font-size:1.05rem; }
.res-choice .ico { font-size:1.35rem; filter:grayscale(100%); }
label.inl { display:flex; align-items:center; gap:.4rem; margin:.3rem 0; }
select, input[type=number], input[type=text] { font-family:var(--serif); color:var(--ink); background:var(--paper-2); border:1.5px solid var(--rule-strong); border-radius:2px; padding:.25rem .4rem; }

/* Win banner — a proclamation */
.win {
  text-align:center; padding:1rem; background:var(--ink); color:var(--paper-2);
  border:2.5px solid var(--rule-strong); border-radius:3px; font-size:1.4rem; font-weight:700;
  font-family:var(--blackletter); letter-spacing:.5px;
}

.help { color: var(--ink-soft); font-size:.86rem; margin:.2rem 0 .6rem; font-style:italic; }
.setup-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media (max-width:520px){ .setup-grid{ grid-template-columns:1fr; } }

/* ---------- Workforce meter ---------- */
.workforce {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  border:1.5px solid var(--rule-strong); border-radius:2px; padding:.35rem .6rem; background:var(--paper-2);
  font-size:.92rem;
}
.workforce b { color:var(--good); font-size:1.1rem; }
.workforce.spent { border-color:var(--bad); }
.workforce.spent b { color:var(--bad); }
.workforce button { margin-left:auto; }

/* ---------- Phase stepper (a printed banner of phases) ---------- */
.phasebar-card { padding:.5rem .6rem; }
.phasebar { display:flex; align-items:center; gap:.25rem; overflow-x:auto; }
.phase-step {
  display:flex; align-items:center; gap:.45rem; flex:1 1 0; min-width:max-content;
  justify-content:center; padding:.5rem .7rem; border-radius:2px;
  border:1.5px solid var(--rule-strong); background:var(--paper-2); color:var(--ink-soft);
  font-family:var(--serif); font-size:1.05rem; white-space:nowrap; box-shadow:2px 2px 0 -0.5px var(--rule-strong);
}
.phase-step .pnum {
  display:inline-grid; place-items:center; width:1.55rem; height:1.55rem; border-radius:50%;
  border:1.5px solid var(--rule-strong); font-weight:700; font-size:.85rem; background:var(--panel);
}
.phase-step .pname { font-weight:700; font-size:1.1rem; }
.phase-step.active { border-color:var(--ink); color:var(--paper-2); background:var(--ink); }
.phase-step.active .pnum { background:var(--paper-2); color:var(--ink); border-color:var(--paper-2); }
.phase-step.done { color:var(--ink); border-color:var(--good); }
.phase-step.done .pnum { background:var(--good); color:#f4ecd6; border-color:var(--good); }
.phase-step.todo { opacity:.65; }
.phase-step:disabled { cursor:not-allowed; opacity:.4; box-shadow:none; }
.phase-step:active { transform:none; }
.phase-sep { color:var(--ink-soft); font-size:1.2rem; flex:0 0 auto; }

.phase-foot {
  display:flex; align-items:center; gap:.5rem; margin-top:1rem; padding-top:.7rem;
  border-top:3px double var(--rule-strong);
}
.phase-foot .spacer { flex:1; }
.phase-foot .primary { font-size:1.05rem; padding:.5rem 1.1rem; }

.sidecol { display:flex; flex-direction:column; gap:1rem; }
.upkeep-opts { display:flex; flex-direction:column; gap:.15rem; margin:.4rem 0; }

/* Desaturate decorative emoji toward the pamphlet's black woodcut ink.
   (Text is already ink, so graying these leaves letters unchanged.) */
.res .ico, .stat-row .name, .task h3, .item .body h3, .measure h3,
.weekpill, .phase-step .pname, .workforce > span:first-child, .modal .m-head,
button, summary, .cat-head, .card h2, .effect, .win {
  filter: grayscale(100%);
}
/* Keep meaningful colour where it aids play. */
.badge.good, .badge.bad, .built-badge, .die.bad, .chip.hurt, .res.warn,
button.good, button.danger, button.primary { filter: none; }