@font-face {
  font-family: "IBM VGA";
  src: url("../fonts/Web437_IBM_VGA_8x16.woff") format("woff");
  font-display: block;
}

:root {
  --fs: 16px;          /* set by JS to fit 80x25 in the viewport */
  --stretch: 1.2;      /* VGA text mode is 720x400 shown on a 4:3 tube */
  --c0: #000000; --c1: #0000aa; --c2: #00aa00; --c3: #00aaaa;
  --c4: #aa0000; --c5: #aa00aa; --c6: #aa5500; --c7: #aaaaaa;
  --c8: #555555; --c9: #5555ff; --c10: #55ff55; --c11: #55ffff;
  --c12: #ff5555; --c13: #ff55ff; --c14: #ffff55; --c15: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: var(--c7);
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "IBM VGA", "Courier New", monospace;
  -webkit-text-size-adjust: 100%;
}

#crt {
  position: relative;
  width: calc(var(--fs) * 40);
  height: calc(var(--fs) * 25 * var(--stretch));
  background: #000;
  cursor: text;
  touch-action: manipulation;
}

#screen {
  position: absolute;
  inset: 0 auto auto 0;
  width: calc(var(--fs) * 40);
  height: calc(var(--fs) * 25);
  transform-origin: 0 0;
  transform: scaleY(var(--stretch));
  font-size: var(--fs);
  line-height: 1;
  white-space: pre;
  user-select: none;
  -webkit-user-select: none;
  text-shadow: 0 0 calc(var(--fs) * 0.25) currentColor;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

#screen .r { height: 1em; overflow: hidden; }

/* scanlines + vignette */
#crt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.22) 3px, rgba(0,0,0,0) 4px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%);
  z-index: 3;
}

#crt.off #screen { opacity: 0; transition: opacity .15s; }
#crt.flash::before {
  content: "";
  position: absolute; inset: 0;
  background: #fff;
  animation: crt-on .35s ease-out forwards;
  z-index: 4;
  pointer-events: none;
}
@keyframes crt-on {
  0%   { opacity: .9; transform: scale(1, .004); }
  40%  { opacity: .6; transform: scale(1, .004); }
  70%  { opacity: .3; transform: scale(1, 1); }
  100% { opacity: 0; transform: scale(1, 1); }
}

/* 16 colour CGA palette */
.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)}
.b0{background:var(--c0)} .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)}
.b8{background:var(--c8)} .b9{background:var(--c9)} .b10{background:var(--c10)} .b11{background:var(--c11)}
.b12{background:var(--c12)} .b13{background:var(--c13)} .b14{background:var(--c14)} .b15{background:var(--c15)}
.bl { animation: blink 1.07s steps(1) infinite; }
.lnk { cursor: pointer; }
.u { text-decoration: underline; text-underline-offset: .15em; }
.lnk:hover { filter: brightness(1.4); }

/* DOS underscore cursor */
.cur { position: relative; }
.cur::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: .06em;
  height: .13em;
  background: currentColor;
  animation: blink .53s steps(1) infinite;
}
.cur.blk::after { top: 0; bottom: 0; height: auto; opacity: .85; }
@keyframes blink { 50% { opacity: 0; } }

/* Hidden keyboard capture: on top of the screen so taps focus it on mobile */
#kbd {
  position: absolute;
  left: 0; bottom: 0;
  width: 1px; height: 1px;
  opacity: 0;
  border: 0; padding: 0; margin: 0;
  resize: none;
  font-size: 16px; /* stops iOS zooming on focus */
  color: transparent;
  background: transparent;
  caret-color: transparent;
}

/* MS-DOS Editor text area, positioned over the grid by JS */
#editor {
  position: absolute;
  z-index: 2;
  /* columns 1-78, rows 2-22 of the grid */
  left: calc(var(--fs) * 0.5);
  top: calc(var(--fs) * 2 * var(--stretch));
  width: calc(var(--fs) * 39);
  height: calc(var(--fs) * 21);
  transform-origin: 0 0;
  transform: scaleY(var(--stretch));
  scrollbar-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  resize: none;
  background: var(--c1);
  color: var(--c7);
  caret-color: var(--c15);
  font-family: inherit;
  font-size: var(--fs);
  line-height: 1;
  white-space: pre;
  overflow: auto;
  tab-size: 8;
  text-shadow: 0 0 calc(var(--fs) * 0.25) currentColor;
  -webkit-font-smoothing: none;
}
#editor::-webkit-scrollbar { display: none; }
#editor[hidden] { display: none; }
#editor::selection { background: var(--c7); color: var(--c1); }

/* The bit of beige plastic under the tube */
#bezel {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0 4px;
  font: 10px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .08em;
  color: #6b6b6b;
  user-select: none;
  -webkit-user-select: none;
}
.led {
  width: 7px; height: 7px; border-radius: 50%;
  background: #1c1c1c;
  box-shadow: inset 0 0 1px #000;
}
.led-label { margin-right: 10px; }
#led-power.on { background: #3cff5a; box-shadow: 0 0 6px #3cff5a; }
#led-hdd.on { background: #ffb400; box-shadow: 0 0 6px #ffb400; }
.led.on-turbo { background: #ffb400; box-shadow: 0 0 5px #ffb400; }
#reset {
  margin-left: 4px;
  font: inherit;
  letter-spacing: inherit;
  color: #8a8a8a;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 3px;
  padding: 4px 8px;
  cursor: pointer;
}
#reset:hover { color: #ddd; border-color: #555; }
#reset:focus-visible { outline: 1px solid #aaa; }

#rotate { display: none; margin: 14px 16px 0; font: 11px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: #555; text-align: center; }
@media (orientation: portrait) and (max-width: 600px) { #rotate { display: block; } }

.noscript { font-size: 16px; padding: 16px; color: var(--c7); }
.noscript a { color: var(--c11); }