:root {
  --posit-92-accent: #ff5555;
  --posit-92-dark-accent: #aa0000;

  --overlay-width: 640px;
  --overlay-height: 400px;
}

body {
  background: black;
  margin: 0;
  padding: 0;
}

#play-overlay {
  position: absolute;
  margin: auto;
  inset: 0;
  width: var(--overlay-width);
  height: var(--overlay-height);

  background: inherit;
}

#play-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image: repeating-linear-gradient(
    to bottom,
    rgb(223, 223, 223, 0.2) 0px,  /* #dfdfdf */
    rgb(223, 223, 223, 0.2) 2px,
    transparent 2px,
    transparent 6px
  );
}

#play-overlay > button {
  position: absolute;
  margin: auto;
  inset: 0;

  font-size: 32px;
  color: white;
  cursor: pointer;

  /* Warm Flame from https://webgradients.com/ */
  /* background-image: linear-gradient(45deg, #ff9a9e, #fad0c4); */

  background: transparent;
  border: 1px solid var(--posit-92-dark-accent);
  box-sizing: border-box;
}

@keyframes yellow-neon {
  0% { filter: drop-shadow(0 0 12px #FFFF55) }
  50% { filter: drop-shadow(0 0 20px #FFFF55) }
  100% { filter: drop-shadow(0 0 12px #FFFF55) }
}

@keyframes white-neon {
  0% { filter: drop-shadow(0 0 6px white) }
  50% { filter: drop-shadow(0 0 14px white) }
  100% { filter: drop-shadow(0 0 6px white) }
}

#play-overlay > button > img {
  image-rendering: pixelated;
  
  filter: drop-shadow(0 0 12px #FFFF55);
  will-change: filter;
  animation: yellow-neon 3.0s ease-in-out infinite;
  transition: filter 0.2s ease-out;

  transform: scale(2);
  transition: transform 0.2s ease-out;
}

#play-overlay > button:hover > img {
  animation: white-neon 2.4s ease-in-out infinite;
  transform: scale(2.1)
}


#game {
  image-rendering: pixelated;
  scale: 2;
  transform-origin: top left;
  border: none;
}

#game:focus {
  outline: none
}

/* Use this for fullscreen */
#game.scale-fit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  scale: 1;
}

#game.scale-stretch {
  width: 100vw;
  height: 100vh;
  object-fit: fill;
  scale: 1;
}


#loading-overlay {
  position: absolute;
  margin: auto;
  inset: 0;
  width: var(--overlay-width);
  height: var(--overlay-height);

  color: white;
  opacity: 1.0;

  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#loading-overlay.hidden {
  opacity: 0.0;
  pointer-events: none;
}

#loading-overlay > div {
  width: fit-content;
  height: fit-content;
}