/* One screen, one face, sixteen colours. The grid is 8 x 16 px and every size on this page is a
   whole number of cells, so the ROM bitmap lands on the pixel it was drawn for. */

@font-face {
  font-family: "Web437";
  src: url("/fonts/web437-ibm-vga-8x16.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  /* the grid everything is measured in */
  --cell: 8px;
  --row: 16px;
  --size-label: 16px;
  --size-value: 16px;
  --size-mast: 32px;
  --gap-1: 8px;
  --gap-2: 16px;
  --gap-3: 24px;
  --gap-4: 32px;
  --gap-6: 48px;

  /* The roles, four of them, and nothing outside this list is used for text (his review of
     2026-10-28: "шесть цветов текста без системы"). The rest of the EGA ramp below is GRAPHIC
     only: the zone, its fringe and the land under the markers. */
  --ink-label: #a8a8a8;      /* 6.6:1 on black: labels, headings of columns, notes */
  --ink-value: #ffffff;      /* 21:1    : every figure and name the page is about */
  --ink-live: #54fcfc;       /* 15.5:1  : a live reading, a live status, a link */
  --ink-wait: #fcfc54;       /* 17:1    : held, pending, not launched yet */
  --ink-burn: #fc5454;       /* 6.3:1   : a burn, and ground the service gave up */
  --k: #000000;
  --b: #0000a8;
  --g: #00a800;
  --c: #00a8a8;
  --r: #a80000;
  --m: #a800a8;
  --n: #a85400;
  --w: #a8a8a8;
  --d: #545454;
  --B: #5454fc;
  --G: #54fc54;
  --C: #54fcfc;
  --R: #fc5454;
  --M: #fc54fc;
  --Y: #fcfc54;
  --W: #ffffff;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--k);
  color: var(--w);
  font-family: "Web437", "Courier New", monospace;
  font-size: 16px;
  line-height: 16px;
  font-synthesis: none;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
  -webkit-text-size-adjust: 100%;
}

#screen {
  margin: 0;
  padding: var(--gap-4) 0 var(--gap-6);
  width: 1056px;
  max-width: calc(100vw - 32px);
}

/* ---------------------------------------------------------------- masthead */

.mast { margin-bottom: 16px; }

.mast-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.mast-row.small { margin-top: 16px; }

.mast h1,
.mast p {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
}

.x2 {
  font-size: 32px;
  line-height: 32px;
  letter-spacing: 0;
}

.mast .rule {
  margin-top: 16px;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
  color: var(--w);
}

/* its box characters are filled in by the paint, so the rule is exactly as wide as the screen */
.mast .rule { white-space: pre; }

/* ---------------------------------------------------------------- the grid */

.pane,
.band {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.pane.one,
.band.one { flex-direction: column; }

.band { margin-top: 16px; }

.blk {
  position: relative;
  flex: 0 0 auto;
}

.ln {
  display: block;
  white-space: pre;
  height: 16px;
  line-height: 16px;
  font-size: 16px;
  font-family: inherit;
  letter-spacing: 0;
}

a.ln,
button.ln {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  text-decoration: none;
  width: 100%;
  cursor: pointer;
  font: inherit;
}

/* A row of a DOS menu answers in one colour, which is the clearest "this is pressable" a text
   screen has. Focus adds the ring on top of it. */
.ln.act { transition: color 0.12s steps(2, jump-none); }
.ln.act:hover i,
.ln.act:focus-visible i { color: var(--ink-live); }
.ln.act:focus-visible {
  outline: 2px solid var(--ink-live);
  outline-offset: 0;
}
.ln.act:active { transform: translate(1px, 1px); }

.f-k { color: var(--k); }
.f-b { color: var(--b); }
.f-g { color: var(--g); }
.f-c { color: var(--c); }
.f-r { color: var(--r); }
.f-m { color: var(--m); }
.f-n { color: var(--n); }
.f-w { color: var(--ink-label); }
.f-d { color: var(--d); }
.f-B { color: var(--B); }
.f-G { color: var(--G); }
.f-C { color: var(--ink-live); }
.f-R { color: var(--ink-burn); }
.f-M { color: var(--M); }
.f-Y { color: var(--ink-wait); }
.f-W { color: var(--ink-value); }

/* The fringe the zone has grown since the index was last marked: the one thing on the screen that
   moves on its own, because it is the thing the whole coin is waiting for. */
.plate .f-B { animation: fringe 1.8s steps(2, jump-none) infinite; }

@keyframes fringe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}

/* The screen draws itself in, the way a board paints one down a 2400 baud line. */
#screen.painting .ln {
  animation: arrive 0.26s steps(1, end) backwards;
  animation-delay: calc(var(--i, 0) * 14ms);
}

@keyframes arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .plate .f-B { animation: none; }
  #screen.painting .ln { animation: none; }
  .ln.act:active { transform: none; }
}

/* ---------------------------------------------------------------- keys */

.tall { display: flex; align-items: stretch; }
.edge { flex: 0 0 auto; }

.keys {
  flex: 1 1 auto;
  display: grid;
  gap: var(--gap-2);
  padding: 0 var(--gap-2);
  align-items: stretch;
}

/* One grid for both rows, so Copy is exactly one key wide at every width and never a banner */
.keys.four,
.keys.one { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .keys.four,
  .keys.one { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .keys.four,
  .keys.one { grid-template-columns: minmax(0, 1fr); }
}

.key {
  /* one row, edge to edge, every key the same width and the same shadow: a row of keys of five
     widths reads as a row that failed to lay out */
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 16px 24px;
  background: var(--b);
  color: var(--W);
  border: 0;
  font: inherit;
  line-height: 16px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--gap-1) var(--gap-1) 0 var(--d);
  margin-bottom: var(--gap-1);
}

.key:hover { background: #1414c8; }
.key:focus-visible { outline: 2px solid var(--C); outline-offset: 2px; }
.key:active { transform: translate(var(--gap-1), var(--gap-1)); box-shadow: 0 0 0 var(--d); }

.key img { display: block; width: 16px; height: 16px; }

.key.off,
.key[disabled] {
  background: #000040;
  color: var(--ink-label);
  cursor: default;
  box-shadow: var(--gap-1) var(--gap-1) 0 var(--d);
}

.key.off img,
.key[disabled] img { opacity: 0.74; }

.key.off:active,
.key[disabled]:active { transform: none; box-shadow: var(--gap-1) var(--gap-1) 0 var(--d); }

.mint { user-select: all; }

/* ---------------------------------------------------------------- the wallet field */

.field-row {
  position: absolute;
  display: flex;
  gap: 16px;
  align-items: center;
}

.field-row input {
  height: 48px;
  padding: 16px;
  background: #000030;
  color: var(--W);
  border: 0;
  outline: 2px solid var(--d);
  font: inherit;
  font-size: 16px;
  line-height: 16px;
  min-width: 0;
  width: 376px;
  max-width: 100%;
}

.field-row input:focus-visible { outline: 2px solid var(--C); }
.field-row input::placeholder { color: var(--w); opacity: 1; }

.ns {
  display: block;
  margin: 32px 0 0;
  max-width: 1024px;
  white-space: normal;
  line-height: 24px;
}

@media (max-width: 900px) {
  #screen { padding: 24px 0 40px; }
  .mast-row { flex-wrap: wrap; gap: 8px; }
  .field-row { position: static; margin-top: 8px; flex-wrap: wrap; }
  .field-row input { width: 100%; }
}