/* DOG OF WAR. One printed sheet in two inks.
   Every proportion here is a share of the 1120 px column, measured off art/ref/poster.jpg:
   frame rule 0.54% of the width, rail 5.2%, stripe pitch 2.2%, dot 6.7%, hatch pitch 4%. */

@font-face {
  font-family: "Nippo";
  src: url("../fonts/Nippo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nippo";
  src: url("../fonts/Nippo-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Krypton";
  src: url("../fonts/MonaspaceKrypton-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #cbf528;          /* the acid ink, 47.9% of his sheet */
  --ink-hot: #dcff52;      /* the hot pass, highlights only */
  --ink-mid: #9cbd1f;      /* 9.3:1 on the field: labels */
  --ink-dim: #6f8a16;      /* 5.1:1 on the field: rules, disabled, separators */
  --field: #060904;        /* the black, 52.1% of his sheet */
  --field-soft: #0d1206;   /* the black inside a green plate's shadowless hollow */

  --page: 1120px;
  --gutter: 24px;
  --rule: 6px;             /* 0.54% of the column, rounded to the pixel grid */
  --rail: 104px;            /* his 5.2% is 58 px; widened so a key can carry a number and a state */
  --pitch: 24px;           /* stripe pitch, his 2.2% of the width */
  --dot: 76px;             /* his 6.7% of the width */
  --slant: 56px;           /* the one diagonal on the sheet */

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --fig-h: 504px;          /* the figure box: every plate is the same canvas, so this is the dog */
  --rec-h: 340px;          /* the record keeps this height on every stage, so the panel never jumps */

  --t-label: 16px;
  --t-body: 17px;
  --t-row: 16px;
  --t-value: 20px;
  --t-mid: 26px;
  --t-head: 34px;
  --t-display: 40px;
}

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

/* a link takes the ink of the block it is printed on, never the browser's blue */
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--ink-hot); outline-offset: 2px; }

html { background: var(--field); }

body {
  background: var(--field);
  color: var(--ink);
  font-family: "Nippo", "Trebuchet MS", sans-serif;
  font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  padding: 14px;                       /* his black margin, 1.36% of the width */
  overflow-x: hidden;
}

/* the press grain, drawn once as a tile and multiplied over the whole sheet */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../img/grain.png");
  background-size: 180px 180px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 50;
}

.sheet {
  max-width: calc(var(--page) + 2 * var(--rule));
  margin: 0 auto;
  border: var(--rule) solid var(--ink);
  background: var(--field);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s4);
}

.band { position: relative; }

/* ---------- type roles ------------------------------------------------- */
.mono { font-family: "Krypton", "Consolas", monospace; font-weight: 500; }
.lab {
  font-family: "Krypton", "Consolas", monospace;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.caps { text-transform: uppercase; letter-spacing: 0.01em; }
.val { font-family: "Krypton", monospace; font-size: var(--t-value); color: var(--ink); }
.dim { color: var(--ink-dim); }

/* ---------- 1. masthead ------------------------------------------------- */
.masthead {
  background: var(--ink);
  color: var(--field);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s4) var(--s6);
  min-height: 56px;
}
.masthead h1 {
  font-size: var(--t-mid);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.ident {
  font-family: "Krypton", monospace;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--field);
  text-align: right;
}

/* ---------- 2. premise panel -------------------------------------------- */
.premise {
  border: var(--rule) solid var(--ink);
  padding: var(--s5) var(--s6) var(--s5) var(--s6);
}
.premise p {
  font-size: var(--t-head);
  font-weight: 700;
  line-height: 1.16;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

/* ---------- 3. the hero: rail + plate + modifications ------------------- */
.hero {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) 320px;
  gap: var(--s4);
  align-items: stretch;
}

.rail { display: flex; flex-direction: column; gap: var(--s2); }
.key {
  flex: 1 1 0;
  min-height: 64px;
  border: 3px solid var(--ink-dim);
  background: var(--field);
  color: var(--ink-mid);
  font-family: "Krypton", monospace;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--s2) var(--s1);
  cursor: pointer;
}
.key b { font-size: var(--t-value); font-weight: 500; line-height: 1; }
.key span { font-size: 16px; line-height: 1; }
.key[data-state="counted"] { border-color: var(--ink); color: var(--ink); }
.key[aria-pressed="true"] { background: var(--ink); color: var(--field); border-color: var(--ink); }
.key:hover { border-color: var(--ink-hot); color: var(--ink-hot); }
.key[aria-pressed="true"]:hover { color: var(--field); background: var(--ink-hot); }
.key:focus-visible { outline: 3px solid var(--ink-hot); outline-offset: 3px; }

.plate {
  position: relative;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: minmax(0, 1fr);   /* the column never grows past the plate itself */
  gap: var(--s4);
  align-content: start;
  padding: var(--s6) calc(var(--slant) + var(--s6)) var(--s6) var(--s6);
  overflow: hidden;
  container-type: inline-size;   /* so the figure can be as tall as the plate is wide */
}
.plate-col { display: flex; flex-direction: row; align-items: center; gap: var(--s5); }
.numeral {
  font-size: 140px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--field);
  padding-top: 10px;
}
.plate .figure {
  display: block;
  width: 100%;
  /* the canvas every plate leaves tools/ink.mjs on is square to the pixel, so the figure is as
     tall as the plate is wide until it reaches its own ceiling: one size for all six stages */
  height: min(var(--fig-h), 100cqw);
  align-self: start;
  object-fit: contain;
  object-position: center bottom;
}
.plate .stamp {
  background: var(--field);
  color: var(--ink);
  font-family: "Krypton", monospace;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 20px;
  align-self: center;
  white-space: nowrap;   /* the stamp is one line on every stage, whatever it says */
}

.mods { display: flex; flex-direction: column; gap: var(--s2); }
.mod {
  flex: 0 0 auto;
  padding: 18px 30px;
  font-size: var(--t-mid);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.mod.on { background: var(--ink); color: var(--field); }
.mod.off { border: 3px solid var(--ink-dim); color: var(--ink-dim); }
.record {
  margin-top: auto;
  background: var(--ink);
  color: var(--field);
  padding: var(--s4) var(--s5);
  display: grid;
  gap: var(--s1);
  align-content: start;
  min-height: var(--rec-h);
}
.record .row { display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; }
.record .row span:first-child { font-family: "Krypton", monospace; font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--field); opacity: 0.72; }
.record .row span:last-child { font-family: "Krypton", monospace; font-size: var(--t-row); text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* ---------- 4. the gauge ------------------------------------------------ */
.gauge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--s4);
  align-items: stretch;
}
.bars {
  position: relative;
  background: var(--field);
  border: 3px solid var(--ink-dim);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s4);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  padding-right: calc(var(--slant) + var(--s5));
}
.bars .ruleset { display: flex; flex-direction: column; gap: 8px; }
.bars .line { height: 20px; background: var(--ink-dim); position: relative; overflow: hidden; }
.bars .line i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); transition: width 0.6s ease-out; }
.bars .ticks { display: flex; justify-content: space-between; }
.bars .ticks span { font-family: "Krypton", monospace; font-size: var(--t-label); color: var(--ink-mid); letter-spacing: 0.06em; }

.readout { display: flex; flex-direction: column; justify-content: center; gap: var(--s2); border: 3px solid var(--ink-dim); padding: var(--s5) var(--s6); }
.readout .big {
  font-family: "Krypton", monospace;
  font-size: var(--t-display);
  line-height: 1.05;
  color: var(--ink-hot);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.readout .sub { font-family: "Krypton", monospace; font-size: var(--t-row); color: var(--ink-mid); }
.readout .big.dim { color: var(--ink-dim); }

/* ---------- 5. a band head ---------------------------------------------- */
.head {
  background: var(--ink);
  color: var(--field);
  padding: var(--s4) 28px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
}
.head h2 { font-size: var(--t-mid); font-weight: 700; text-transform: uppercase; line-height: 1.15; letter-spacing: -0.005em; }
.head .note { font-family: "Krypton", monospace; font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; text-align: right; }

.body-box { border: 3px solid var(--ink-dim); border-top: 0; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s5); }

/* ---------- 6. the token block (inside the kennel head) ----------------- */
.token { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.token .mint {
  flex: 1 1 420px;
  min-width: 0;
  background: var(--field);
  color: var(--ink);
  border: 3px solid var(--ink);
  font-family: "Krypton", monospace;
  font-size: var(--t-row);
  padding: var(--s3) var(--s4);
  overflow-wrap: anywhere;
  user-select: all;
}
.token .mint.empty { color: var(--ink-dim); border-color: var(--ink-dim); user-select: none; }
.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0 22px;
  border: 3px solid var(--ink);
  background: var(--ink);
  color: var(--field);
  font-family: "Krypton", monospace;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--ink-hot); border-color: var(--ink-hot); }
.btn:active { transform: translateY(2px); }
.btn:focus-visible { outline: 3px solid var(--ink-hot); outline-offset: 3px; }
.btn[aria-disabled="true"] { background: transparent; color: var(--ink-dim); border-color: var(--ink-dim); cursor: default; opacity: 0.74; }
.btn[aria-disabled="true"]:hover { background: transparent; border-color: var(--ink-dim); }
.btn[aria-disabled="true"]:active { transform: none; }
.btn img { width: 22px; height: 22px; display: block; }
.btn.ghost { background: var(--field); color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--field); border-color: var(--ink-hot); color: var(--ink-hot); }
.btn.ghost[aria-disabled="true"] { background: var(--field); }
.btn.ghost[aria-disabled="true"] img { opacity: 0.74; }

.links { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------- 7. the three dots ------------------------------------------- */
.split { display: flex; gap: var(--s5); flex-wrap: wrap; align-items: flex-start; }
.share { display: flex; flex-direction: column; align-items: center; gap: var(--s2); width: var(--dot); }
.disc {
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--ink);
  color: var(--field);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Krypton", monospace;
  font-size: var(--t-value);
}
.share .lab { text-align: center; color: var(--ink-mid); font-size: var(--t-label); }
.split .text { flex: 1 1 320px; min-width: 0; font-size: var(--t-body); }

/* ---------- 8. tables --------------------------------------------------- */
.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td {
  text-align: left;
  padding: var(--s3) var(--s4);
  font-family: "Krypton", monospace;
  font-size: var(--t-row);
  border-bottom: 2px solid var(--ink-dim);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.grid th { color: var(--ink-mid); letter-spacing: 0.08em; text-transform: uppercase; border-bottom-width: 3px; }
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid tr:last-child td { border-bottom: 0; }
.grid a { color: var(--ink); }
.empty-row td { color: var(--ink-dim); }

/* ---------- 9. the stage ladder ----------------------------------------- */
.ladder { display: flex; flex-direction: column; gap: var(--s2); }
.step {
  display: grid;
  grid-template-columns: 90px 160px minmax(0, 1fr) 150px 190px;
  gap: var(--s4);
  align-items: center;
  padding: var(--s4) var(--s5);
  border: 3px solid var(--ink-dim);
  font-family: "Krypton", monospace;
  font-size: var(--t-row);
}
.step .no { font-size: var(--t-value); }
.step .mod-name { font-family: "Nippo", sans-serif; font-weight: 700; font-size: var(--t-value); text-transform: uppercase; letter-spacing: 0; }
.step.done { background: var(--ink); color: var(--field); border-color: var(--ink); }
.step.done a { color: var(--field); }
.step .state { text-align: right; letter-spacing: 0.06em; text-transform: uppercase; }
.step .state a { text-transform: none; letter-spacing: 0; }

/* ---------- 10. the burn band ------------------------------------------- */
.hatch {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--ink) 0 17px,
    var(--field) 17px 30px
  );
  border: 3px solid var(--ink);
  min-height: 120px;
}
.burn-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s5); align-items: stretch; }

/* ---------- 11. how it works -------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.stepcard { border: 3px solid var(--ink-dim); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.stepcard .n { font-family: "Krypton", monospace; font-size: var(--t-value); color: var(--ink-mid); }
.stepcard h3 { font-size: var(--t-value); font-weight: 700; text-transform: uppercase; line-height: 1.2; }
.stepcard p { font-size: var(--t-body); line-height: 1.5; }

.rulebox { border: 3px solid var(--ink-dim); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.rulebox p { font-size: var(--t-body); max-width: 72ch; }

/* the clone ladder: one stripe per doubling after the fifth line, in the sheet own stripe grammar */
.clones { display: flex; flex-direction: column; gap: 10px; }
.clone-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: var(--s4); align-items: center; }
.clone-row i { display: block; height: 18px; background: var(--ink-dim); clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
.clone-row.on i { background: var(--ink); }
.clone-row span { font-family: "Krypton", monospace; font-size: var(--t-row); color: var(--ink-mid); text-align: right; letter-spacing: 0.06em; }
.clone-row.on span { color: var(--ink); }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- responsive: 1366 and down ----------------------------------- */
@media (max-width: 1180px) {
  :root { --t-display: 36px; --t-head: 30px; --rec-h: 300px; }
  .hero { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .mods { grid-column: 1 / -1; }
  .gauge { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { grid-template-columns: 74px minmax(0, 1fr) 150px; row-gap: var(--s2); }
  .step .mcap, .step .state { grid-column: 2 / -1; }
}

@media (max-width: 700px) {
  :root { --t-display: 32px; --t-head: 21px; --t-mid: 21px; --slant: 24px; --dot: 70px; --fig-h: 300px; --rec-h: 340px; }
  body { padding: 8px; }
  .sheet { padding: var(--s3); gap: var(--s3); border-width: 4px; }
  .masthead { flex-direction: column; align-items: flex-start; gap: var(--s1); padding: var(--s4) var(--s5); }
  .ident { text-align: left; }
  .premise { padding: var(--s5); border-width: 4px; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
  .key { min-height: 60px; padding: var(--s3) var(--s3); }
  .plate { padding: var(--s5) calc(var(--slant) + var(--s5)) var(--s5) var(--s6); }
  .plate-col { gap: var(--s4); }
  .numeral { font-size: 64px; line-height: 1; padding-top: 10px; }   /* the glyph box runs above the line box */
  .head { flex-direction: column; align-items: flex-start; gap: var(--s1); padding: var(--s4) var(--s5); }
  .head .note { text-align: left; }
  .body-box { padding: var(--s4); gap: var(--s4); }
  .mod { padding: 15px 24px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: minmax(0, 1fr); row-gap: var(--s2); padding: var(--s4) var(--s5); }
  .step .state { text-align: left; }
  .burn-grid { grid-template-columns: minmax(0, 1fr); }
  .grid th, .grid td { padding: 10px var(--s4); }
  .readout { padding: var(--s5) var(--s6); }
  .bars { padding: var(--s5); padding-right: calc(var(--slant) + var(--s5)); }
  /* 390 is drawn, not squeezed: a six column ledger becomes one block per record */
  .scroller table thead { display: none; }
  .scroller table tr { display: block; border-bottom: 3px solid var(--ink-dim); padding: 10px 0; }
  .scroller table tr:last-child { border-bottom: 0; }
  .scroller table td { display: block; border: 0; padding: 6px var(--s4); text-align: left; }
  .scroller table td::before { content: attr(data-label); display: block; color: var(--ink-mid); text-transform: uppercase; letter-spacing: 0.08em; }
  .scroller table td > span { display: block; min-width: 0; overflow-wrap: anywhere; text-align: left; }
  .scroller table td.num, .scroller table td.num > span { text-align: left; }
  .scroller table .empty-row td::before { content: none; }
  .token .mint { flex: 1 1 100%; }
}

/* 320: the narrowest phone. The number and the stamp stand one over the other, on every stage */
@media (max-width: 360px) {
  .plate-col { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .plate .stamp { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}