/* Estilos de layout y disposición */

/* Contenedor principal del juego */
#game-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: Jersey, Arial, sans-serif;
}

#game-screen {
  z-index: 3;
  position: relative;
  width: 100%;
  height: 100%;
  border: 20px solid rgba(0, 0, 0, 1);
  border-radius: 50px;
  box-shadow: 0 0 20px rgba(120, 255, 160, 0.9),
    inset 0 0 50px rgba(0, 0, 0, 0.7);
  filter: brightness(1.2) contrast(1.2) saturate(1.2);
  animation: flicker 0.15s infinite;
  overflow: hidden;
}

/* Scanlines para efecto retro CRT */
#game-screen::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 4px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.7;
}

/* Curvatura de la pantalla con efecto cóncavo*/
#game-screen::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, transparent 60%, rgba(0, 0, 0, 0.3) 140%);
  pointer-events: none;
  z-index: 1;
}

/* Animación de parpadeo sutil */
@keyframes flicker {
  0% {
    opacity: 0.97;
  }
  3% {
    opacity: 0.99;
  }
  5% {
    opacity: 0.96;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 0.99;
  }
  30% {
    opacity: 0.97;
  }
  70% {
    opacity: 0.99;
  }
  80% {
    opacity: 0.98;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0.99;
  }
}
/* Clase para contenedor con dimensiones específicas */
.game-container-sized {
  margin: auto;
  font-family: Jersey, Arial, sans-serif;
}

/* Clase para canvas con dimensiones específicas */
.canvas-sized {
  position: absolute;
  top: 0;
  left: 0;
}