/* IBM VGA 8x16 from the Ultimate Oldschool PC Font Pack by VileR, CC BY-SA 4.0. */
@font-face {
  font-family: 'VGA';
  src: url('../fonts/WebPlus_IBM_VGA_8x16.woff') format('woff');
  font-display: block;
}

:root {
  color-scheme: dark;
  /* CGA/EGA text-mode colours, indexed in ANSI SGR order (30 + n). */
  --c0: #000000; --c1: #aa0000; --c2: #00aa00; --c3: #aa5500;
  --c4: #0000aa; --c5: #aa00aa; --c6: #00aaaa; --c7: #aaaaaa;
  --c8: #555555; --c9: #ff5555; --c10: #55ff55; --c11: #ffff55;
  --c12: #5555ff; --c13: #ff55ff; --c14: #55ffff; --c15: #ffffff;

  --room: #07080a;
  --tube: #060807;

  /* Screen is 80x25 cells of 0.5em x 1em, plus tube padding (2.2em x 1.5em). */
  --fs: min((100vw - 16px) / 42.2, (100dvh - 16px) / 26.5);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 40%, #161a20 0%, var(--room) 70%) fixed,
    var(--room);
  color: var(--c7);
}

/* ---------------------------------------------------------------- monitor */

.crt { position: relative; }

.screen {
  position: relative;
  overflow: hidden;
  font: var(--fs) / 1 'VGA', monospace;
  padding: 0.9em 1.1em 0.6em;
  border-radius: 1.4em / 1.8em;
  background: radial-gradient(ellipse at 50% 45%, #0e1311 0%, var(--tube) 65%, #010201 100%);
  box-shadow:
    inset 0 0 2.5em 0.6em rgba(0, 0, 0, 0.9),
    inset 0 0 0.3em rgba(0, 0, 0, 0.9);
  cursor: default;
  user-select: text;
}

/* Scanlines. */
.screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0.3) 2px,
    rgba(0, 0, 0, 0.3) 3px
  );
}

/* Vignette and a little glare on the glass. */
.screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 35%);
}

.tube {
  position: relative;
  z-index: 1;
}

/* Bell. */
.screen.flash .tube { animation: bell 0.18s ease-out; }
@keyframes bell {
  0% { filter: brightness(1.8); }
  100% { filter: brightness(1); }
}

/* ---------------------------------------------------------------- terminal */

.term, .status {
  width: 40em; /* 80 columns of 0.5em */
  white-space: pre;
  font-kerning: none;
  font-variant-ligatures: none;
}
.row { height: 1em; overflow: hidden; }
.row:empty::before { content: ' '; }

.status {
  height: 1em;
  margin-top: 0.1em;
  background: var(--c6);
  color: var(--c0);
}

.term a { color: inherit; text-decoration: none; }
.term a.hot { cursor: pointer; }
.term a:hover span { background-color: rgba(85, 255, 255, 0.14); }
.term a:not(.hot):hover span { text-decoration: underline; text-underline-offset: 0.15em; }
.term a:focus-visible { outline: 1px dashed var(--c14); outline-offset: 0; }

/* DOS underline cursor. */
.cur { box-shadow: inset 0 -0.16em 0 currentColor; animation: cursor 1.06s steps(1) infinite; }
@keyframes cursor { 50% { box-shadow: none; } }

.bl { animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { color: transparent; } }

.f0 { color: var(--c0); } .f1 { color: var(--c1); } .f2 { color: var(--c2); } .f3 { color: var(--c3); }
.f4 { color: var(--c4); } .f5 { color: var(--c5); } .f6 { color: var(--c6); } .f7 { color: var(--c7); }
.f8 { color: var(--c8); } .f9 { color: var(--c9); } .f10 { color: var(--c10); } .f11 { color: var(--c11); }
.f12 { color: var(--c12); } .f13 { color: var(--c13); } .f14 { color: var(--c14); } .f15 { color: var(--c15); }
/* Background 0 is left transparent so the tube shows through. */
.b1 { background: var(--c1); } .b2 { background: var(--c2); } .b3 { background: var(--c3); }
.b4 { background: var(--c4); } .b5 { background: var(--c5); } .b6 { background: var(--c6); }
.b7 { background: var(--c7); }

/* Off-screen input that summons the soft keyboard on touch devices. */
#kbd {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  font-size: 16px; /* stops iOS zooming in on focus */
}

noscript {
  font: 16px/1.5 'VGA', monospace;
  color: var(--c7);
  padding: 2em;
}
noscript a { color: var(--c14); }