/* Nuzlocke, built on DESIGN-NOTES.md: two inks and one dither, one 4 px block, the night is the page.
   Nothing here is a colour, a gradient, a blur or a rounded corner. A shade is a checkerboard. */

@font-face { font-family: Galmuri; src: url("/fonts/Galmuri11.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Galmuri; src: url("/fonts/Galmuri11-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: GalmuriSmall; src: url("/fonts/Galmuri9.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ground: #000000;          /* the night: 75 to 85 percent of every screen in his art */
  --ink: #ffffff;             /* outlines, type, anything lit */
  --ink-dim: #b4b4b4;         /* type that steps back. 10.4:1 on the ground */
  --block: 4px;               /* one pixel of this page */

  /* the only sizes on this page: 2x, 3x, 4x and 6x of the face's own 11 px grid */
  --t-body: 22px;
  --t-val: 33px;
  --t-head: 44px;
  --t-word: 66px;

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

  --col: 1440px;              /* the page uses the window, it is not a narrow strip */
  --gutter: 48px;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Galmuri, GalmuriSmall, monospace;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: none;          /* Chrome's LCD filter smears a bitmap face */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  overflow-x: hidden;
}

img { display: block; image-rendering: pixelated; }

a { color: var(--ink); }

h1, h2, h3, p, dl, dd, dt, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

::selection { background: var(--ink); color: var(--ground); }

:focus-visible { outline: var(--block) solid var(--ink); outline-offset: var(--block); }


/* ------------------------------------------------------------------- rules
   One dotted rule, drawn from the grid, hung under (or over) a row. Never a border and never a
   background: a divider must not turn its row into a plate. */

.ruled { position: relative; }
.ruled::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--block);
  background: url("/img/bit/rule.png") repeat-x left top;
  pointer-events: none;
}
.ruled-top::after { bottom: auto; top: 0; }

.panel-head, .burn-row, .facts dt, .facts dd, .sc-head, .sc-table th, .sc-table td,
.sc-row, .sc-card, .bar { position: relative; }
.panel-head::after, .burn-row::after, .facts dt::after, .facts dd::after, .sc-head::after,
.sc-table th::after, .sc-table td::after, .sc-row::after, .sc-card::after, .bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--block);
  background: url("/img/bit/rule.png") repeat-x left top;
  pointer-events: none;
}
.meter + .meter { position: relative; }
.meter + .meter::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--block);
  background: url("/img/bit/rule.png") repeat-x left top;
}

/* ------------------------------------------------------------------ the band
   His banner's composition: the name stands in empty night on the left, the unit and its light
   fill the right. The picture is never stretched: it sits at its own size, pinned to the right. */

.band {
  position: relative;
  min-height: 432px;
  background: var(--ground);
  overflow: hidden;
}

.band-art {
  position: absolute;
  inset: 0;
  background-image: url("/img/bit/band-c.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 1080px auto;   /* 3x of the picture's own 360 px: whole number, square blocks */
  image-rendering: pixelated;
}

/* The name stands in his banner's clear sky, and on the page's own left line: the same column the
   premise, the keys and every plate below it start from. */
.band-words {
  position: absolute;
  top: 136px;
  left: 0;
  right: 0;
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.band-words > * { max-width: 600px; }

.wordmark {
  font-size: var(--t-word);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--s6);       /* the name and its ticker are two things, not one block */
}

/* quieter than the name on purpose: same face, body size, normal weight */
.ticker {
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.lede { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s4) var(--s8); max-width: 1040px; }
.premise { flex: 1 1 520px; font-size: var(--t-body); line-height: 1.5; max-width: 760px; }

.state { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-body); font-weight: 700; white-space: nowrap; }
.lamp { width: 20px; height: 20px; flex: 0 0 auto; }

/* ------------------------------------------------------------------ the page */

.page {
  max-width: var(--col);
  margin: 0 auto;
  padding: var(--s8) var(--gutter) 96px;
  display: grid;
  gap: var(--s12);
}

/* --------------------------------------------------------------------- tabs
   Seven keys of one width and one height. The lit one is white, the way a lit thing is white
   everywhere else on this page. */

.tabs {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s3);
}

.tab, .key, .sc-btn {
  font: inherit;
  font-size: var(--t-body);
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  min-height: 56px;
  padding: var(--s2) var(--s4);
  border: 12px solid transparent;
  border-image: url("/img/bit/key.png") 12 repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
}

.tab:hover, .key:hover, .sc-btn:hover { border-image-source: url("/img/bit/key-hi.png"); }

.tab:active, .key:not([aria-disabled="true"]):active, .sc-btn:not(:disabled):active,
.tab.is-on, .sc-btn.is-on {
  border-image-source: url("/img/bit/key-on.png");
  background: var(--ink);
  color: var(--ground);
}

.tab[disabled], .key[disabled], .sc-btn[disabled], .key[aria-disabled="true"] {
  color: var(--ink-dim);
  cursor: not-allowed;
}
.key[aria-disabled="true"] img, .key[disabled] img { opacity: 0.55; }

/* ------------------------------------------------------------------ console */

.console {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--s8);
  align-items: start;
}

/* the screen is the unit's own bezel, nine-sliced off the generated plate */
.screen {
  min-width: 0;
  min-height: 560px;
  border: 24px solid transparent;
  border-image: url("/img/bit/plate.png") 24 repeat;
  padding: var(--s12) var(--s8) var(--s8);
  background: var(--ground);
}

.screen-inner { min-height: 100%; }

/* one panel holds every reading, so the page has no grid of little boxes */
.meters {
  border: 24px solid transparent;
  border-image: url("/img/bit/plate.png") 24 repeat;
  padding: var(--s8);
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}

.meter { display: grid; gap: var(--s1); }
.meter + .meter { padding-top: var(--s6); }

.meter-key { font-size: var(--t-body); color: var(--ink-dim); }
.meter-val { font-size: var(--t-val); font-weight: 700; line-height: 1.2; }
.meter-note { font-size: var(--t-body); color: var(--ink-dim); line-height: 1.5; }
.meter-lamp { display: flex; align-items: center; gap: var(--s3); }
.unit-sol { font-size: var(--t-body); color: var(--ink-dim); margin-left: var(--s2); }

.dial { width: 128px; height: 128px; margin: var(--s2) 0; }

/* ------------------------------------------------------------------- panels */

.row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s8);
  align-items: stretch;
}

.panel-wide { gap: var(--s6); }

.panel {
  min-width: 0;
  border: 24px solid transparent;
  border-image: url("/img/bit/plate.png") 24 repeat;
  padding: var(--s8);
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}

.panel-head {
  display: flex;
  flex-wrap: wrap;                /* the note drops under the title rather than off the plate */
  align-items: baseline;
  gap: var(--s2) var(--s4);
  padding-bottom: var(--s3);
}
.panel-note { margin-left: auto; }
.panel-head-mid { margin-top: var(--s2); }
.panel-title { font-size: var(--t-val); font-weight: 700; line-height: 1.2; }
.panel-note { font-size: var(--t-body); color: var(--ink-dim); }

.mint {
  font-size: var(--t-body);
  line-height: 1.5;
  overflow-wrap: anywhere;
  user-select: all;
  color: var(--ink);
}

/* one row of equal keys, the copy key across the top of them */
.keys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); }
.key img { width: 24px; height: 24px; flex: 0 0 auto; }
.key span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.feedback { font-size: var(--t-body); color: var(--ink); min-height: 33px; }
.feedback.is-bad { color: var(--ink-dim); }

.burns { display: grid; gap: var(--s2); }
.burn-row { display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--t-body); padding-bottom: var(--s2); }
.burn-row span:last-of-type { color: var(--ink-dim); text-align: right; }
.hw-label { font-size: var(--t-body); color: var(--ink-dim); }

.fine { font-size: var(--t-body); color: var(--ink-dim); line-height: 1.5; }
.burns { margin-top: var(--s2); }

/* the unit's plate: one fixed label column, every value starting on the same line */
.facts { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: var(--s6); row-gap: 0; }
.facts dt, .facts dd {
  font-size: var(--t-body);
  line-height: 1.5;
  padding: var(--s3) 0;
}
.facts dt { color: var(--ink-dim); }
.facts dd { color: var(--ink); }

/* eight cells of one size, each caption under its own badge */
.badges { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s3); }
.badge-cell { display: grid; justify-items: center; gap: var(--s2); }
.badge-cell img { width: 48px; height: 48px; }
.badge-cell span { font-size: var(--t-body); color: var(--ink-dim); }
.badge-cell.is-on span { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------ what the screen prints */

.sc-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8) var(--s6);
  padding-bottom: var(--s4);
}
.sc-pair { flex: 1 1 160px; display: grid; gap: var(--s1); min-width: 0; }
.sc-key { font-size: var(--t-body); color: var(--ink-dim); }
.sc-val { font-size: var(--t-val); font-weight: 700; line-height: 1.2; white-space: nowrap; }

.sc-title { font-size: var(--t-val); font-weight: 700; line-height: 1.2; margin: var(--s8) 0 var(--s3); }
.sc-head + .sc-title { margin-top: var(--s6); }
.sc-note { font-size: var(--t-body); line-height: 1.5; max-width: 76ch; }
.sc-table + .sc-note, .sc-grid + .sc-note { margin-top: var(--s6); }
.sc-dim { color: var(--ink-dim); }

.sc-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: var(--t-body); }
.sc-table th:first-child, .sc-table td:first-child { width: 56px; }
.sc-table th.num, .sc-table td.num { width: 128px; }
.sc-table th {
  text-align: left;
  font-weight: 400;
  color: var(--ink-dim);
  padding: var(--s2) var(--s3);
}
.sc-table td {
  padding: var(--s3);
  line-height: 1.5;
  vertical-align: middle;
}
.sc-table .num, .sc-table th.num { text-align: right; }
.sc-table col.c-slot { width: 64px; }
.sc-table tr.is-lit td { background-color: transparent; }
.sc-slotnum { display: none; }
.sc-nick { font-weight: 700; }
.sc-up { color: var(--ink); font-weight: 700; }
.sc-down { color: var(--ink-dim); }
.sc-empty td { color: var(--ink-dim); }

/* an explicit empty state, so six blank rows never read as a broken table */
.sc-blank {
  display: grid;
  justify-items: center;
  gap: var(--s4);
  padding: var(--s12) var(--s8);
  border: 24px solid transparent;
  border-image: url("/img/bit/plate.png") 24 repeat;
  text-align: center;
}
.sc-blank img { width: 96px; height: 116px; }
.sc-blank p { font-size: var(--t-body); color: var(--ink-dim); max-width: 48ch; }
.sc-blank b { display: block; font-size: var(--t-val); color: var(--ink); line-height: 1.2; }

/* the gauge is cut out of the screen's own glyphs: lit ticks over a dotted track */
.bar {
  display: inline-flex;
  gap: var(--s1);
  min-width: 96px;
  padding-bottom: var(--s1);
  font-weight: 700;
}
.bar i { font-style: normal; color: var(--ink); }
.bar u { text-decoration: none; visibility: hidden; }

.sc-list { display: grid; gap: 0; }
.sc-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--s6);
  padding: var(--s3) 0;
}
.sc-time { font-size: var(--t-body); color: var(--ink-dim); }
.sc-text { font-size: var(--t-body); line-height: 1.5; }
.sc-text b { font-weight: 700; }

.sc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s8); }
.sc-grid > .sc-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

.sc-card {
  display: grid;
  gap: var(--s2);
  padding: var(--s4) 0;
}
.sc-card h3 { font-size: var(--t-val); font-weight: 700; line-height: 1.2; }
.sc-card p { font-size: var(--t-body); line-height: 1.5; }
.sc-card .sc-key { font-size: var(--t-body); color: var(--ink-dim); }

/* the graveyard is a field of stones, so every fallen coin gets one */
.sc-stones .sc-card { grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--s6); align-items: start; }
/* the field the stones stand in closes the list, so the graveyard is a place and not a table */
.sc-stones::after {
  content: "";
  grid-column: 1 / -1;
  height: 40px;
  margin-top: var(--s6);
  background: url("/img/bit/grass.png") repeat-x left bottom;
  image-rendering: pixelated;
}
.sc-stones .sc-card:last-child::after { content: none; }

.sc-stones .sc-card::before {
  content: "";
  grid-row: 1 / 4;
  width: 96px;
  height: 116px;
  background: url("/img/bit/stone.png") no-repeat center / 96px 116px;
  image-rendering: pixelated;
}

.sc-steps { display: grid; gap: var(--s6); }
.sc-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s6); align-items: start; }
.sc-step b { font-size: var(--t-head); font-weight: 700; line-height: 1; color: var(--ink); }
.sc-step p { font-size: var(--t-body); line-height: 1.5; }

/* a row of options closes edge to edge whatever the count: a key grows into the slack */
.sc-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s4); }
.sc-actions .sc-btn { flex: 1 1 200px; min-width: 200px; }

/* ------------------------------------------------------------------- widths */

@media (max-width: 1439px) {
  :root { --t-word: 55px; }
  .band-words { top: 120px; }
}

/* below this the screen takes the whole column: a seven column table cannot live in 500 px */
@media (max-width: 1279px) {
  .console { grid-template-columns: minmax(0, 1fr); }
  .screen { min-height: 520px; padding: var(--s8) var(--s6) var(--s6); }
  .facts { grid-template-columns: 160px minmax(0, 1fr); }
  .meters { flex-direction: row; flex-wrap: wrap; gap: var(--s6) var(--s8); align-items: start; }
  .meter { flex: 1 1 200px; }
  .meter + .meter { padding-top: 0; background: none; }
  .sc-table th.num, .sc-table td.num { width: 112px; }
}

@media (max-width: 1023px) {
  :root { --t-word: 44px; --t-head: 33px; --gutter: 32px; }

  /* the picture stops being a backdrop and becomes a block of its own, at 2x of its own pixels */
  .band { min-height: 0; display: flex; flex-direction: column-reverse; }
  .band-words { position: static; top: auto; width: 100%; margin: 0; padding: var(--s12) var(--gutter) var(--s8); }
  .band-words > * { max-width: 100%; }
  .band-art {
    position: relative;
    inset: auto;
    width: 100%;
    height: 266px;
    background-position: center bottom;
    background-size: 720px auto;
  }

  .tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tab:last-child { grid-column: span 2; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .sc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* a seven column table needs about 900 px of column: under that it folds into labelled lines */
@media (max-width: 899px) {
  .sc-table th:first-child, .sc-table td:first-child, .sc-table th.num, .sc-table td.num { width: auto; }

  /* the table folds into labelled lines, which is the only honest table on a phone */
  .sc-table, .sc-table tbody, .sc-table tr, .sc-table td { display: block; width: 100%; }
  .sc-table thead { display: none; }
  .sc-table tr { padding: var(--s3) 0; }
  .sc-table td { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s1) 0; text-align: left; }
  .sc-table td::after { content: none; }
  .sc-table tr { position: relative; }
  .sc-table tr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--block); background: url("/img/bit/rule.png") repeat-x left top; }
  .sc-table td.num { text-align: left; }
  .sc-table td::before { content: attr(data-label); color: var(--ink-dim); }
  .sc-table td[colspan] { display: block; }
  .sc-slotnum { display: none; }
}

/* under 760 the picture drops to its own pixels rather than to a fraction of them */
@media (max-width: 759px) {
  .band-art { height: 133px; background-size: 360px auto; }
}

@media (max-width: 767px) {
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab:last-child { grid-column: span 2; }
  .keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sc-row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .sc-step { grid-template-columns: 48px minmax(0, 1fr); gap: var(--s4); }
}

/* the phone: the face drops to its 9 px grid, two sizes instead of four */
@media (max-width: 519px) {
  :root {
    --t-body: 18px; --t-val: 27px; --t-head: 27px; --t-word: 36px;
    --gutter: 20px;
  }
  body { font-family: GalmuriSmall, Galmuri, monospace; }
  .page { padding: var(--s8) var(--gutter) var(--s12); gap: var(--s8); }
  /* the frame keeps its own pixels on a phone too: only the padding inside it gives way */
  .screen { padding: var(--s6) var(--s4) var(--s4); min-height: 560px; }
  .panel, .meters, .sc-blank { padding: var(--s4); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { padding-bottom: 0; background: none; }
  .facts dd { padding-top: var(--s1); }
  .badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .badge-cell img { width: 40px; height: 40px; }
  .dial { width: 120px; height: 120px; }

  .keys { grid-template-columns: minmax(0, 1fr); }
  .sc-btn { min-width: 0; width: 100%; }
}

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