/* Gregory DOS (gdos.js): the GUI powers off; a 5151 (amber or green) or 5153 colour monitor takes the whole page. */
body.gdos-on > :not(#gdos) { visibility: hidden !important; }
#gdos { position: fixed; inset: 0; z-index: 2147483000; background: #060504; display: grid; place-items: center; --glow: 255, 176, 0; user-select: none; }
#gdos[data-monitor="green"] { --glow: 60, 255, 90; }
#gdos[data-monitor="cga"] { --glow: 150, 160, 200; background: #0b0a09; }

.gdos-tube { position: relative; overflow: hidden; border-radius: 3.2% / 4.2%; background: #0b0907;
  box-shadow: 0 0 0 9px #1b1915, 0 0 0 11px #2b2823, 0 0 70px rgba(var(--glow), .10), inset 0 0 40px rgba(0, 0, 0, .9); }
#gdos[data-monitor="cga"] .gdos-tube { background: #101012; box-shadow: 0 0 0 9px #b9b2a1, 0 0 0 11px #8f8878, inset 0 0 40px rgba(0, 0, 0, .9); }

/* the raster: overscan around it, as on a real tube; non-square pixels stretched to 4:3 */
.gdos-screen, .gdos-ghost { position: absolute; left: 3.5%; top: 3%; width: 93%; height: 94%; image-rendering: pixelated; }
.gdos-screen { filter: drop-shadow(0 0 1.2px rgba(var(--glow), .95)) drop-shadow(0 0 7px rgba(var(--glow), .42)); }
.gdos-ghost { opacity: 0; filter: blur(.6px); }
#gdos[data-monitor="cga"] .gdos-screen { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35)) blur(.25px); }

.gdos-scan { position: absolute; inset: 3% 3.5%; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) * .62), rgba(0, 0, 0, .32) calc(var(--line) * .62), rgba(0, 0, 0, .32) var(--line)); }
#gdos[data-monitor="cga"] .gdos-scan { background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) * .5), rgba(0, 0, 0, .55) calc(var(--line) * .5), rgba(0, 0, 0, .55) var(--line)); }
.gdos-glass { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 55%, rgba(0, 0, 0, .55) 100%),
              linear-gradient(155deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 38%); }

/* power: a bright line opens into the picture; leaving collapses it to a line, then a dot */
#gdos.gdos-off .gdos-tube { transform: scale(1, .006); filter: brightness(2.5); }
#gdos.gdos-warm .gdos-tube { transition: transform .5s cubic-bezier(.2, .9, .25, 1), filter 1.4s ease-out; }
#gdos.gdos-poweroff .gdos-tube { animation: gdos-off .8s ease-in forwards; }
@keyframes gdos-off { 0% { transform: scale(1, 1); } 45% { transform: scale(1, .006); filter: brightness(2.5); } 80% { transform: scale(.004, .006); opacity: 1; } 100% { transform: scale(0, 0); opacity: 0; } }
#gdos.gdos-poweroff { transition: background .3s .6s; background: transparent; }
@media (prefers-reduced-motion: reduce) { #gdos.gdos-warm .gdos-tube { transition: none; } #gdos.gdos-poweroff .gdos-tube { animation-duration: .01s; } }

.gdos-kbd { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; resize: none; }

/* the switch on the desk */
.gdos-sw { position: absolute; bottom: 4px; right: 12px; display: flex; gap: 5px; opacity: .55; transition: opacity .2s; }
.gdos-sw:hover { opacity: 1; }
.gdos-sw button { font: 600 9px/1 ui-monospace, monospace; letter-spacing: .08em; color: #6d675a; background: #15130f; border: 1px solid #2d2921;
  padding: 3px 7px; border-radius: 2px; cursor: pointer; }
.gdos-sw button.on { color: rgb(var(--glow)); border-color: rgba(var(--glow), .45); }