/* Reset basic margins and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

.logo {
    width: 300px; /* Cambia este valor al tamaño que prefieras */
    height: auto; /* Mantiene la proporción de la imagen */
}

/* Styling for the body and basic layout */
body {
    font-family: Arial, sans-serif;
    background-color: #2c3e50;
    color: #ecf0f1;
    text-align: center;
    padding: 20px;
}

/* Header Styles */
header {
    margin: 0 auto 30px auto; /* Esto centrará el header */
    width: 760px; /* Igualar el ancho de la ventana del juego */
    padding: 12px;
    border-radius: 10px;
}

header h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

nav ul {
    list-style: none;
    background-color: #1b1000;
    padding: 10px 0;
    border-radius: 5px;
}

nav ul li {
    display: inline-block;
    margin: 0 15px;
}

nav ul li a {
    text-decoration: none;
    color: #ecf0f1;
    font-size: 1.2em;
}

nav ul li a:hover {
    color: #3498db;
}

/* Game Frame */
.game-frame {
    margin: 0 auto;
    width: 960px;
    height: 540px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-placeholder {
    width: 960px;
    height: 540px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5em;
}

/* General section styling for background images */
section {
    position: relative; /* To allow positioning of the pseudo-element */
    margin: 50px 0;
    padding: 20px; /* Add padding for text readability */
}

section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* Place it behind the text */
    opacity: 0; /* Start as invisible */
    transition: opacity 0.5s ease; /* Smooth transition */
}

/* Background for About Us section */
#about-us::before {
    background-size: cover;
    background-position: center;
    opacity: 0.5; /* Adjust the opacity */
}

.about-us-image {
    width: 100px; /* Ajustar el tamaño de la imagen */
    height: 100px; /* Asegurar que sea cuadrada */
    border-radius: 50%; /* Hacerla circular */
    object-fit: cover; /* Ajustar el contenido dentro del círculo */
    border: 3px solid #fff; /* Opcional: Agregar un borde blanco */
}

/* ===============================
   FONDO NEGRO POR SECCIÓN
   =============================== */

/* Aplica un fondo negro translúcido a toda la sección */
#game-description,
#how-to-play {
  background: rgba(0, 0, 0, 0.55);
  border-radius: 16px;
  padding: 40px 30px;
  margin: 60px auto;
  width: min(1200px, 95%);
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Mejora el título dentro del bloque */
#game-description h2,
#how-to-play h2 {
  color: #fff;
  font-size: 2.2rem;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  margin-bottom: 28px;
  position: relative;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

#game-description h2::after,
#how-to-play h2::after {
  content: "";
  display: block;
  height: 2px;
  width: 60%;
  margin: 8px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
}

/* Transition for when section is in view */
section:hover::before {
    opacity: 0.7; /* Opacity when hovered */
}

/* Títulos de sección más “pro”, con subrayado tenue */
section h2 {
  font-size: 2rem;
  letter-spacing: .3px;
  margin: 28px auto 18px;
  position: relative;
  width: fit-content;
}

section p {
    font-size: 1.2em;
    line-height: 1.6;
    width: auto;
    margin: 0 auto;
}

/* How To Play Instructions */
.instruction-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Stacks the instructions vertically */
}

.instruction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 25px auto;
  max-width: 1100px;
  gap: 20px;
  /* fondo eliminado (antes tenía negro semitransparente) */
  background: transparent;
  border: none;
  box-shadow: none;
}

.instruction.reverse {
  flex-direction: row-reverse;
}

/* Texto */
.instruction-text {
  width: 55%;
  text-align: left;
}


/* Texto */
.instruction-text {
  width: 55%;
  text-align: left;
}

.instruction-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #f1f1f1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  margin: 0;
  padding: 10px 0;
}

/* Footer */
footer {
    margin-top: 30px;
    font-size: 1em;
}

footer p {
    color: #bdc3c7;
}

:root {
  --bg-url: none;
  --bg-dim: 100vmax;           /* el lado del cuadrado = mayor dimensión del viewport */
}

/* Quitamos el background visual directo del body (lo usaremos como lienzo oscuro) */
body#page-body {
  background-color: #1b1000;
  background-image: none !important;  /* por si el JS existente lo ponía */
  position: relative;
  overflow-x: hidden;
}

/* Capa fija que centra un CUADRADO que escala con el viewport */
body#page-body::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--bg-dim);
  aspect-ratio: 1 / 1;              /* siempre cuadrado */
  transform: translate(-50%, -50%);
  background-image: var(--bg-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;         /* sin recortar ni deformar */
  opacity: 0.9;                     /* controla presencia del arte */
  z-index: -1;                      /* detrás del contenido */
  pointer-events: none;
  transition: background-image 300ms ease, opacity 300ms ease;
  background-size: cover;      /* llena el cuadrado sin deformar (puede recortar) */
}

/* Oscurecido sutil global para legibilidad del contenido */
body#page-body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(transparent 30%, rgba(27,16,0,.55) 70%);
  z-index: -2;
  pointer-events: none;
}

/* Accesibilidad: si el usuario prefiere menos animación */
@media (prefers-reduced-motion: reduce) {
  body#page-body::before { transition: none; }
}

/* ===== Ajustes responsive mínimos y no intrusivos ===== */

/* Header y marco del juego conservan tu layout, pero adaptan ancho en pantallas pequeñas */
header {
  width: min(760px, 100%);
  padding: 12px;
}

.game-frame {
  max-width: 83%;               /* pero nunca más de 700px */
  aspect-ratio: 16 / 9;
  margin: 0 auto;                 /* centra el div horizontalmente */
  display: block;
}

/* El placeholder interno hereda el tamaño del marco */
.game-placeholder, #game-placeholder {
  width: 100%;
  height: 100%;
}

/* Texto más legible sobre fondos oscuros */
section p {
  text-shadow: 0 1px 2px rgba(27,16,0,.55);
}

/* Imágenes de instrucciones: borde más suave y responsivo */
.instruction-image {
  width: 48%;
  height: auto;
  border: 4px solid #1b1000;
  border-radius: 8px;
}

/* En móviles, apilar imagen y texto para mejor lectura */
@media (max-width: 900px) {
  .instruction,
  .instruction.reverse {
    flex-direction: column !important;
    gap: 12px;
  }
  .instruction-image,
  .instruction-text {
    width: 100%;
  }
  section p {
    width: 90%;
  }
}

.game-frame canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}