/* ===== Estilos de las páginas individuales de proyectos ===== */

/* Estilos generales */
body {
  font-family: Arial, sans-serif;
  background-color: #222;
  color: white;
  text-align: center;
  margin: 0;
  padding: 20px;
}

/* Botón de regresar */
.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #444;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.back-button:hover {
  background-color: #666;
}

/* Contenedor principal */
.game-container {
  max-width: 900px;
  margin: auto;
  background-color: #333;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Logo del juego */
.game-logo {
  width: 100%;
  max-width: 500px;
}

/* Sinopsis */
.game-synopsis {
  font-size: 1.2em;
  margin-bottom: 20px;
}

/* Tráiler */
.trailer-container iframe {
  width: 100%;
  max-width: 800px;
  height: 450px;
  border-radius: 10px;
}

/* Botones de compra */
.buy-buttons {
  margin: 20px 0;
}

.buy-buttons a {
  text-decoration: none;
}

/* Estilos comunes de todos los botones */
.steam-button,
.itch-button,
.playstore-button,
.appstore-button,
.github-button,
.web-button {
  display: inline-block;
  padding: 10px 15px;
  margin: 10px;
  font-size: 1.1em;
  color: white;
  border: 2px solid;
  border-radius: 5px;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Botón de Steam */
.steam-button {
  background-color: #1b2838;
  border-color: #66c0f4;
}

.steam-button:hover {
  background-color: #66c0f4;
  color: #1b2838;
}

/* Botón de Itch.io */
.itch-button {
  background-color: #490017;
  border-color: #ff8080;
}

.itch-button:hover {
  background-color: #ff8080;
  color: #490017;
}

/* Botón de Google Play */
.playstore-button {
  background-color: #073a21;
  border-color: #34a853;
}

.playstore-button:hover {
  background-color: #34a853;
  color: #073a21;
}

/* Botón de App Store (iOS) */
.appstore-button {
  background-color: #181f45;
  border-color: #1953c0;
}

.appstore-button:hover {
  background-color: #1953c0;
  color: #181f45;
}

/* Botón de GitHub */
.github-button {
  background-color: #24292e;
  border-color: #6e7681;
}

.github-button:hover {
  background-color: #6e7681;
  color: #24292e;
}

/* Botón de Página Web */
.web-button {
  background-color: #005f73;
  border-color: #94d2bd;
}

.web-button:hover {
  background-color: #94d2bd;
  color: #005f73;
}

/* Información del juego */
.game-info, .game-story, .game-features {
  text-align: left;
  max-width: 700px;
  margin: 30px auto;
}

.game-info ul, .game-features ul {
  list-style: none;
  padding-left: 0;
}

.game-info ul li, .game-features ul li {
  margin-bottom: 10px;
}

/* Galería de imágenes */
.game-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.game-gallery img {
  width: 30%;
  max-width: 200px;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* Efecto de ampliación al pasar el cursor */
.game-gallery img:hover {
  transform: scale(1.2);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
  .game-gallery img {
    width: 45%;
  }
}

@media (max-width: 480px) {
  .game-gallery img {
    width: 100%;
  }
}