/* PLUGGING — page + screen frame. OWNER: engine agent.
   gfx.js sizes the canvas in device pixels and sets --bz (bezel width, only when
   the window has room to spare) and --rad (screen corner radius) on #crt.
   Scanlines are drawn in-canvas when P.settings.crt is on; #scan is glass only. */
:root { color-scheme: dark; }
html, body {
  margin: 0; width: 100%; height: 100%; background: #000; overflow: hidden;
  overscroll-behavior: none;
}
body {
  display: flex; align-items: center; justify-content: center;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; touch-action: none;
}
#crt {
  --bz: 0px; --rad: 0px;
  position: relative; flex: none; line-height: 0;
  padding: var(--bz);
  border-radius: calc(var(--rad) + var(--bz) * 0.45);
}
#screen {
  display: block; border-radius: var(--rad); cursor: default; touch-action: none; outline: none;
  image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated;
}
#scan {
  position: absolute; inset: var(--bz); pointer-events: none; border-radius: var(--rad);
}
/* Subtle monitor bezel, only in space the screen could not use anyway. */
#crt.bezel {
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 55%),
    linear-gradient(#1d1b29, #14131d 55%, #0d0c14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    0 0 0 1px #05050a,
    0 24px 60px rgba(0, 0, 0, 0.7);
}
#crt.bezel #scan {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
/* With CRT on: faint glass glare and a deeper inner shadow. */
#crt.crt #scan {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 38%);
  box-shadow: inset 0 0 calc(var(--rad) * 3 + 14px) rgba(0, 0, 0, 0.55);
}