/* The ANSI text-mode theme. The page is drawn with characters only, in four windows 48 cells wide (public/ansi.js): the tool bar (#ansi-bar,
   1 row), the display view (#ansi-view, 24 rows, or 96 by 48 half-size cells in hi-res), the command line (#ansi-cmd, 3 rows) and the
   virtual input (#ansi-keys, 24 rows). In a landscape window there is no virtual input and the remaining width is the Klam code (#ansi-code).
   There are no borders, shadows, outlines, radii, icons or pictures: a frame is box-drawing characters, a pressed key is a cell background, a cursor is a block character.
   The palette is the 16 CGA/VGA text-mode colours. Words are set only in pairs that pass 4.5:1 on black, or white on blue.
   Font: IBM VGA 8x16 by VileR (Ultimate Oldschool PC Font Pack, int10h.org), CC BY-SA 4.0, shipped unmodified with its licence in public/fonts/ansiapps/. */

@font-face { font-family: "ansiapps VGA"; font-style: normal; font-weight: 400; font-display: block; src: url("/fonts/ansiapps/WebPlus_IBM_VGA_8x16.woff") format("woff"); }

:root {
  color-scheme: dark;
  --dos-0: #000000; --dos-1: #0000aa; --dos-2: #00aa00; --dos-3: #00aaaa; --dos-4: #aa0000; --dos-5: #aa00aa; --dos-6: #aa5500; --dos-7: #aaaaaa;
  --dos-8: #555555; --dos-9: #5555ff; --dos-10: #55ff55; --dos-11: #55ffff; --dos-12: #ff5555; --dos-13: #ff55ff; --dos-14: #ffff55; --dos-15: #ffffff;
  --cell: 8px; --row: 16px; /* one character cell: 8 by 16 */
}
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }

/* One size, one weight: a bitmap font is crisp only at its own size, and has no bold. */
body { font-family: "ansiapps VGA", ui-monospace, monospace; font-size: 16px; font-weight: 400; line-height: var(--row); letter-spacing: 0; color: var(--dos-7); font-synthesis: none; -webkit-font-smoothing: none; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; }

/* The windows: absolutely placed by public/app.js (layoutFor), each an overflow-hidden frame around a scaled .inner. Nothing scrolls. */
#stage { position: relative; width: 100%; height: 100%; }
.win { position: absolute; margin: 0; padding: 0; overflow: hidden; background: #000; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
.win[hidden] { display: none; }
.inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; white-space: pre; margin: 0; padding: 0; font: inherit; font-size: 16px; line-height: var(--row); color: var(--dos-7); }
.inner span { font: inherit; font-size: 16px; line-height: var(--row); }
*:focus, *:focus-visible { outline: 0; box-shadow: none; }

/* The static splash (index.html) shows until app.js draws the first screen, and carries any load error: never a blank page. */
#splash { position: absolute; inset: 0; margin: 0; padding: 16px; white-space: pre-wrap; color: var(--dos-14); background: #000; }
#splash.done { display: none; }
#splash a { color: var(--dos-11); } /* the not-found page's way home (public/404.html), underlined so colour is not the only cue */

/* The screen is aria-hidden; this is the same news for a screen reader, kept in the document and clipped to nothing. */
#sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The foreground and background classes the screens' spans use (public/ansi.js screenHtml). */
.f0 { color: var(--dos-0) } .f1 { color: var(--dos-1) } .f2 { color: var(--dos-2) } .f3 { color: var(--dos-3) }
.f4 { color: var(--dos-4) } .f5 { color: var(--dos-5) } .f6 { color: var(--dos-6) } .f7 { color: var(--dos-7) }
.f8 { color: var(--dos-8) } .f9 { color: var(--dos-9) } .f10 { color: var(--dos-10) } .f11 { color: var(--dos-11) }
.f12 { color: var(--dos-12) } .f13 { color: var(--dos-13) } .f14 { color: var(--dos-14) } .f15 { color: var(--dos-15) }
.b0 { background: var(--dos-0) } .b1 { background: var(--dos-1) } .b2 { background: var(--dos-2) } .b3 { background: var(--dos-3) }
.b4 { background: var(--dos-4) } .b5 { background: var(--dos-5) } .b6 { background: var(--dos-6) } .b7 { background: var(--dos-7) }
.b8 { background: var(--dos-8) } .b9 { background: var(--dos-9) } .b10 { background: var(--dos-10) } .b11 { background: var(--dos-11) }
.b12 { background: var(--dos-12) } .b13 { background: var(--dos-13) } .b14 { background: var(--dos-14) } .b15 { background: var(--dos-15) }