@import url('genx.css');
/* GenX-DOS — the document design language, in ONE place.
   Everything you READ on this site is set from here: the controls pages, the
   hundred-odd gamedocs and the wiki. It is the landing page's language applied
   to prose — the same Michroma amber headings, the same rule running off the
   end of a section label, the same serif body on the dark CRT ground.

   It existed twice before this. The controls sheet and the wiki sheet were
   parallel implementations of the same idea that had drifted apart: section
   headings at .85rem in one and 1rem in the other, table headers green in one
   and amber in the other, and two different paragraph rhythms. Nothing chose
   those differences; they accumulated.

   The controls sheet is the version kept, because it is the one that follows
   the landing page — its h2 is the landing page's .sec-label, rule and all.

   What is NOT here is layout: the page frame, the sidebar, the search box, the
   home bar. Those differ per page type for real reasons and stay with their
   own sheet. Tables are shared only as far as their look; a controls table is
   a two-column key/action grid and a wiki table is prose, so the column
   behaviour stays local too. */

*{box-sizing:border-box}
html{background:var(--crt);scroll-behavior:smooth}
/* Mono, at the landing page's size and rhythm. The docs had been set in
   IBM Plex Serif — a second voice nothing else on the site spoke. Everything
   the reader meets now uses the one face the landing page does. */
body{margin:0;background:var(--crt);color:var(--paper);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased}

h1{font-family:'Michroma',sans-serif;color:var(--amber);margin:0;font-size:1.5rem;font-weight:400;letter-spacing:.01em;line-height:1.2}
/* A smaller h1 rather than a tracked-out uppercase label: uppercase Michroma
   at label size sets an uneven line, the caps being drawn to different heights
   and the wide tracking spacing them apart. Same face, case and tracking as the
   page title, one step down in size. */
h2{font-family:'Michroma',sans-serif;color:var(--amber);font-size:1.1rem;font-weight:400;letter-spacing:.01em;line-height:1.2;
  display:flex;align-items:center;gap:1rem;margin:2.3rem 0 .9rem}
h2::after{content:"";flex:1;height:1px;background:var(--line)}
/* Subheadings are the landing page's card headings: mono, amber, at reading
   size rather than shrunk into a label. h2 stays the section rule above them,
   so the two do different jobs instead of competing. */
h3{font-family:'IBM Plex Mono',monospace;color:var(--amber);font-size:1.02rem;font-weight:600;
  letter-spacing:.01em;margin:1.7rem 0 .7rem}
h4{font-family:'IBM Plex Mono',monospace;color:var(--paper);font-size:.86rem;font-weight:600;
  letter-spacing:.01em;margin:1.3rem 0 .4rem}

/* Body copy, set as the landing page sets it: a shade back from --paper so
   that bold and links carry the emphasis rather than every sentence. */
/* Justified: the left edge was already flush, so this squares off the right.
   It behaves in a monospace face, where every character is the same width and
   the only thing a line can stretch is its spaces -- there is no letter-fitting
   to go wrong. Hyphenation is on so a long word breaks rather than opening a
   river of white down the paragraph. */
p,li{font-size:.92rem;line-height:1.6;color:var(--prose)}
/* Justification is for prose only, and named by the two frames prose lives in
   -- a page body and a wiki article. Applied to every li it also reached the
   wiki's sidebar, where it stretched a two-word navigation item across the
   full column. */
p,.wrap li,.content li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
p{margin:.7rem 0}
p.intro{color:var(--paper);font-size:1.05rem;line-height:1.6}
.sub{font-family:'IBM Plex Mono',monospace;color:var(--dim);font-size:.8rem;margin:.3rem 0 0;letter-spacing:.02em}
strong{color:var(--paper);font-weight:600}
em{font-style:italic;color:var(--paper)}

table{width:100%;border-collapse:collapse;margin:.6rem 0 1.5rem;font-size:.92rem}
th,td{text-align:left;padding:.46rem 1rem .46rem 0;vertical-align:top;border-bottom:1px solid var(--line)}
th{font-family:'IBM Plex Mono',monospace;color:var(--green);font-weight:600;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;padding-bottom:.55rem}

kbd{font-family:'IBM Plex Mono',monospace;background:var(--panel);border:1px solid var(--line);
  color:var(--amber);padding:1px 7px;border-radius:4px;font-size:.86em;box-shadow:0 1px 0 rgba(0,0,0,.5)}

.note{color:var(--dim);font-style:italic;margin-top:1.7rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.9rem}
.note-plain{color:var(--dim);font-style:italic;margin:.3rem 0 1rem;font-size:.9rem}

ul,ol{margin:0 0 1.15rem 1.4rem}
li{margin:.32rem 0}
li::marker{color:var(--amber)}
ul ul,ol ol,ul ol,ol ul{margin-bottom:.2rem}
hr{border:0;border-top:1px solid var(--line);margin:2.1rem 0}
blockquote{border-left:2px solid var(--green);background:var(--panel);
  padding:.65rem 1rem;margin:0 0 1.15rem;border-radius:0 4px 4px 0}
blockquote p:last-child{margin:0}

code{font-family:'IBM Plex Mono',monospace;font-size:.85em;color:var(--amber);
  background:rgba(255,176,0,.10);padding:.08em .36em;border-radius:3px;word-break:break-word}
pre{background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:1rem 1.1rem;margin:0 0 1.25rem;overflow-x:auto}
pre code{color:var(--paper);background:none;padding:0;font-size:.8rem;line-height:1.55;word-break:normal}

/* ---------------------------------------------------------------------------
   The controls pages and the gamedocs: their page frame. Folded in from a
   third sheet so a document loads one stylesheet and not two. The wiki keeps
   its own, because a sidebar, a search box and a hit list are a lot of rules
   that no other page has any use for.
   --------------------------------------------------------------------------- */
/* home bar (every controls/gamedoc page links back to /) */
.gx-home{display:block;padding:.8rem 1.5rem;border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.14em;color:var(--dim);text-decoration:none}
.gx-home b{font-family:'Michroma',sans-serif;color:var(--amber);letter-spacing:.2em;font-weight:400;font-size:.78rem;margin-left:.5rem}
.gx-home:hover{color:var(--amber)}

.wrap{max-width:760px;margin:0 auto;padding:2.6rem 1.5rem 4rem}
.head{border-bottom:1px solid var(--line);padding-bottom:1.1rem;margin-bottom:1.9rem}
.system{font-family:'IBM Plex Mono',monospace;color:var(--green);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.55rem}
/* A controls table is a key/action grid: the first columns shrink to their
   content and the last one takes the rest. Scoped to .wrap, the frame those
   pages use, so it cannot reach a wiki table, which is prose and needs every
   column free. */
.wrap td{white-space:nowrap;width:1%}
.wrap td:first-child{color:var(--paper)}
.wrap td:last-child{color:var(--paper);white-space:normal;width:auto}

body.acorn kbd{display:inline-block;vertical-align:middle;transform:scaleY(0.95)}
body.acorn kbd.fkey{font-style:italic}
body.acorn kbd.fkey sub{font-style:normal}
body.acorn kbd.dual{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;padding:1px 6px}
body.acorn kbd.dual span{display:block;font-size:.78em}
body.acorn kbd.dual span:first-child{margin-bottom:1px}

/* --- cross-links between a game's page and its machine's page ---------
   Set like .system and .footer rather than as body prose: these are
   navigation, not something to read, so they take the mono/uppercase/
   letter-spaced treatment the page already uses for metadata. */
.gx-crosslink{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 1.9rem}

/* The game list on a controls page. A bulleted list of ten titles reads as
   an afterthought; a mono grid reads like the menu the player came from. */
.gx-gamelist{list-style:none;margin:.7rem 0 1.6rem;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.5rem 1.5rem}
.gx-gamelist li{margin:0}
.gx-gamelist a{font-family:'IBM Plex Mono',monospace;font-size:.84rem}

.caveat{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--amber);
  color:var(--paper);padding:.8rem 1rem;margin:1.2rem 0;border-radius:0 4px 4px 0;font-size:.92rem}
.caveat strong{color:var(--amber)}

.footer{font-family:'IBM Plex Mono',monospace;color:var(--dim);font-size:.7rem;margin-top:2.8rem;padding-top:1.1rem;
  border-top:1px solid var(--line);text-align:center;letter-spacing:.04em}