/*
  Este archivo contiene los estilos para el fondo y el contenedor del juego.
*/

:root {
    /* Colores representativos de la marca Sura */
    --sura-azul:  #2D6DF6;
    --sura-naranja: #FFFFFF;
  }
  
  html {
    height: 100%;
  }
  
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%; /* Asegura que el cuerpo ocupe al menos toda la altura de la pantalla */
  
    /* Estilos del fondo */
    background: linear-gradient(135deg, var(--sura-azul), var(--sura-naranja));
    background-repeat: no-repeat;
    background-attachment: fixed;
  
    /* Usamos Flexbox para centrar el contenedor del juego vertical y horizontalmente */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem; /* Añade un pequeño espacio en los bordes para pantallas pequeñas */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
  }
  
  /*
    Contenedor principal del juego.
    Aquí está la lógica para la responsividad.
  */
  #game-container {
    /* 1. Ocupará el 100% del ancho disponible... */
    width: 100%; 
    
    /* 2. ...pero NUNCA será más grande que 960px. */
    max-width: 960px;
  
    /* 3. ¡LA CLAVE! Mantiene la proporción de 960x600 sin importar el tamaño. */
    aspect-ratio: 960 / 600;
  
    /* Estilos visuales */
    background-color: #000; /* Fondo negro para el área del juego */
    box-shadow: 0 50px 50px rgba(136, 139, 141, 1); /* Sombra para darle profundidad */
    border-radius: 8px; /* Bordes ligeramente redondeados */
    overflow: hidden; /* Oculta cualquier cosa que se salga del contenedor */
    position: relative; /* Necesario para posicionar el contenido del marcador de posición */
  }
  
  
  /* Estilos para el marcador de posición.
    Puedes ELIMINAR esta sección cuando integres tu juego real.
  */
  .placeholder-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: sans-serif;
    text-align: center;
    border: 2px dashed #888B8D;
    box-sizing: border-box;
  }