/* The whole machine is one canvas (#screen) drawn through WebGL (js/gl.js). The few DOM layers
   here are the tube: a dark bezel, corner shading, scanlines, a soft bulge and glass highlights. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: "VT323", Consolas, "Courier New", monospace;
  user-select: none;
  cursor: default;
}

.crt {
  position: fixed;
  inset: 1.5vmin;
  background: radial-gradient(ellipse 120% 100% at 50% 50%, #0c0608, #060305 55%, #020001 90%, #000);
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
}

/* The canvas covers the whole window above the bezel layers: the tube look (bend, rounded
   dark frame, scanlines, vignette) comes from the shader alone. The CSS layers below only show
   when WebGL is missing. */
#screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  background: #000;
  outline: none;
  touch-action: none;
  z-index: 200;
}

/* corner shading and the bezel's inner shadow */
.crt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 60% 70% at 0% 0%, rgba(0, 0, 0, .85) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 100% 0%, rgba(0, 0, 0, .85) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(0, 0, 0, .85) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 100% 100%, rgba(0, 0, 0, .85) 0%, transparent 55%);
  box-shadow: inset 0 0 180px 60px rgba(0, 0, 0, .9), inset 0 0 40px 4px #000;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 40;
}

/* scanlines, fading out toward the edges */
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(to bottom, #0000 0px 2px, #00000073 3px 4px);
  pointer-events: none;
  z-index: 25;
  mix-blend-mode: multiply;
  opacity: .85;
  -webkit-mask-image: radial-gradient(ellipse 100% 95% at 50% 50%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 95% at 50% 50%, #000 60%, transparent 100%);
}

.crt-bulge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 35;
  background:
    radial-gradient(ellipse 80% 65% at 50% 45%, rgba(255, 220, 160, .05) 0%, transparent 60%),
    radial-gradient(ellipse 95% 80% at 50% 55%, transparent 65%, rgba(0, 0, 0, .35) 92%, rgba(0, 0, 0, .55) 100%);
  mix-blend-mode: overlay;
}

.crt-glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 30;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 45% at 22% -8%, rgba(255, 255, 255, .07) 0%, transparent 65%),
    radial-gradient(ellipse 60% 55% at 78% 112%, rgba(255, 200, 150, .025) 0%, transparent 60%);
}

.crt.no-fx::before, .crt.no-fx::after, .crt.no-fx .crt-bulge, .crt.no-fx .crt-glass { display: none; }

#keys {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  resize: none;
  font-size: 16px;
}