:root {
  color-scheme: dark;
  background: #000;
  /* Johnny Castaway is running in Windows 3.1 at 640x480 VGA. */
  --screensaver-width-from-height: 133.333333vh;
  --screensaver-height-from-width: 75vw;
}

* {
  box-sizing: border-box;
}

html,
body,
#screensaver-viewport {
  width: 100%;
  height: 100%;
}

html,
body {
  margin: 0;
  overflow: hidden;
  background: #000;
}

#screensaver-viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
}

#app {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: min(100vw, var(--screensaver-width-from-height)) !important;
  height: min(100vh, var(--screensaver-height-from-width)) !important;
  overflow: hidden;
  transform: translate(-50%, -50%) !important;
  background: #000;
  pointer-events: none;
}


#app .window,
#app .emulator-root,
#app canvas {
  width: 100% !important;
  height: 100% !important;
}

#app canvas {
  image-rendering: pixelated;
}

#app .sidebar,
#app .sidebar-thin,
#app .frame,
#app .emulator-loading-pre-1,
#app .emulator-loading-pre-2,
#app .emulator-loader {
  display: none !important;
}

.control-button {
  position: fixed;
  top: 14px;
  z-index: 20;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.52);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
}

#mute-button {
  right: 62px;
}

#fullscreen-button {
  right: 14px;
}

body.pointer-active .control-button,
.control-button:focus-visible {
  opacity: 0.82;
  pointer-events: auto;
  transform: translateY(0);
}

body.pointer-active .control-button:hover,
.control-button:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.78);
}

.control-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.control-button svg {
  position: absolute;
  inset: 8px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

#mute-button .icon-muted,
#mute-button.is-muted .icon-unmuted {
  display: none;
}

#mute-button.is-muted .icon-muted {
  display: block;
}