/*
  Underspire kit: tokens.
  Fonts, colour, type, spacing and the page ground. Grey basalt, aged brass, heat, turquoise light. This file
  and the three beside it (frame.css, components.css, responsive.css) are loaded by the forum and by
  the game site, so a change here is a change to both. Everything is plain CSS served from our own host.
*/

/* The pixel face is the voice of the game: names, labels, menus, what the game itself prints. It is
   an 8 by 16 bitmap face, so it is set at 16 pixels or a whole multiple of it. */
@font-face {
  font-family: "Px437 IBM VGA 8x16";
  src: url("fonts/Px437_IBM_VGA_8x16.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* basalt, darkest to lightest */
  --basalt-0: #0d0d0d;
  --basalt-1: #141413;
  --basalt-2: #1b1a19;
  --basalt-3: #212120;
  --basalt-4: #2b2a29;
  --basalt-5: #383735;
  --paper: #272625;

  /* text */
  --ink: #e8e0ce;
  --ink-dim: #c6bca5;
  --ink-faint: #b2a995;

  /* brass */
  --brass-hi: #f0d8a4;
  --brass: #d5b174;
  --brass-mid: #a98650;
  --brass-lo: #6f5a37;
  --brass-deep: #3d311e;

  /* light */
  --arc: #97d9d1;
  --arc-dim: #4a8f88;
  --ember: #f0a24a;
  /* heat: the one colour that moves. A key under the pointer, the current page, a primary
     key, a post you were sent to. Text on a heat fill is --heat-ink. */
  --heat-1: #b9301a;
  --heat-2: #ff7418;
  --heat-3: #ffa93d;
  --heat-4: #ffd37e;
  --heat-5: #fff2cf;
  --heat-ink: #180b03;
  --heat-fill: linear-gradient(var(--heat-4), var(--heat-3) 50%, var(--heat-2));
  --ember-hi: #ffd68f;
  --ember-deep: #8a4a14;
  --rust: #ffb39c;
  --rust-bg: #3a2a22;
  --ok: #a6dbae;

  /* Two voices. The pixel face speaks for the game and for every name and label. Everything that is
     read in sentences is set in the plain sans that every game and forum of the early 2000s read
     in: wide, open and large in the x-height, so it holds at fifteen pixels. */
  --pixel: "Px437 IBM VGA 8x16", ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --read: Verdana, "DejaVu Sans", Tahoma, Geneva, sans-serif;
  --display: var(--pixel);
  --head: var(--read);
  --body: var(--read);
  --ui: var(--read);
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

  --rule: #0d0d0c;
  --lift: inset 0 1px 0 #ffffff12, 0 6px 12px #0008;

  /* The skin: a raised plate (a key, a chip) and a sunken well (a field, a screen). Each is a black
     line of 2 pixels with a lit edge and a dark edge of 2 pixels inside it. */
  --bev-hi: #d0ae70;
  --bev-lo: #3a2c16;
  --well-hi: #5c4a2e;
  --well-lo: #15110c;
  --plate-a: #5a4a30;
  --plate-b: #473a24;

  /* a rectangle with its four corners cut in two steps, as a pixel would cut them */
  --s: 3px;
  --step: polygon(
    0 calc(var(--s) * 2), var(--s) calc(var(--s) * 2), var(--s) var(--s), calc(var(--s) * 2) var(--s), calc(var(--s) * 2) 0,
    calc(100% - var(--s) * 2) 0, calc(100% - var(--s) * 2) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(var(--s) * 2), 100% calc(var(--s) * 2),
    100% calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s) * 2) calc(100% - var(--s)), calc(100% - var(--s) * 2) 100%,
    calc(var(--s) * 2) 100%, calc(var(--s) * 2) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - var(--s) * 2), 0 calc(100% - var(--s) * 2)
  );
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; scrollbar-color: #9a7b4d #151514; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--basalt-0);
  color: var(--ink);
  font: 400 .9375rem/1.7 var(--body);
  caret-color: var(--arc);
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
}
::selection { background: var(--brass); color: #191918; }
img, svg { max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
a { color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--brass-hi); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--arc); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: .75rem; top: -6rem; z-index: 50; padding: .8rem 1rem; background: var(--brass); color: #191918; font: 700 .875rem var(--ui); }
.skip:focus { top: .75rem; }
.muted { color: var(--ink-faint); }
.meta { font: .8125rem/1.45 var(--ui); color: var(--ink-faint); }
.meta a { color: var(--ink-dim); }
.linkline { margin-top: .6rem; font: .8125rem/1.5 var(--ui); }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.icon.flip { transform: scaleX(-1); }