/* ESTILOS PARA LA PÁGINA GAMECARD         */
/* 
 * Este archivo contiene los estilos específicos para la página del juego .
 * Incluye el diseño de:
 * - Área principal del juego donde se desarrolla 
 * - Marcador de puntuaciones 
 * - Botones interactivos 
 * - Pantalla de juego con placeholder
 * - Instrucciones y consejos para el usuario
 */

/* CONTENEDORES PRINCIPALES DEL JUEGO */

/* Estilo común para el área de juego y el marcador */
#game-area, #scoreboard {
  margin-top: 2rem;            /* Espacio superior para separar del contenido anterior */
  background-color: #111;      
  border: 1px solid #222;      
  border-radius: 12px;        
  padding: 1.5rem;             /* Espacio interno en todos los lados */
}

/* BOTÓN PRINCIPAL DEL JUEGO */

/* Botón para iniciar el juego */
#start-btn {
  background-color: #1e90ff;   
  color: #fff;                 
  border: none;               
  padding: 0.8rem 1.5rem;    
  cursor: pointer;             /* Cursor de mano para indicar que es clickeable */
  font-weight: 600;            
  margin-top: 1rem;            
  transition: background 0.3s ease; 
}

/* Efecto hover del botón de inicio */
#start-btn:hover { 
  background-color: #005fcc;   
}

/* PANTALLA DEL JUEGO */

/* Área donde se desarrollará el juego */
.game-screen {
  background-color: #000;      
  border: 1px solid #333;     
  border-radius: 8px;         
  padding: 2rem;             
  margin-top: 1rem;            /* Espacio arriba para separar del título */
  min-height: 200px;           /* Altura mínima para reservar espacio visual */
  display: flex;              
  align-items: center;        
  justify-content: center;    
}

/* TEXTO DE INSTRUCCIONES */

/* Estilo para consejos e instrucciones del juego */
.instructions {
  color: #b5b5b5;           
  font-size: 0.9rem;        
  margin-top: 0.5rem;         
}

/* ===========================================================
   GAMECARD.CSS — Estilos visuales y animaciones del mini-juego
   Celeste & Blanca Space · Módulo GameCard
   =========================================================== */

/* === Layout general === */
body {
  background-color: #000;
  color: #fff;
  font-family: "Inter", sans-serif;
}

#game-area {
  margin-top: 2rem;
  background: radial-gradient(circle at center, #0a0a0a 0%, #000 100%);
  border: 1px solid #0a3a5a;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 0 20px rgba(0, 160, 255, 0.15);
}

/* === Barra de estado === */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 30, 60, 0.3);
  border: 1px solid rgba(0, 120, 255, 0.3);
  border-radius: 10px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
}

/* === Cartas === */
.card {
  background: #0a0a0a;
  border: 1px solid rgba(0, 160, 255, 0.3);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.card-info {
  padding: 0.6rem 0.8rem;
}

.card-info h3,
.card-info h4 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: #6cf;
}

.card-info p {
  font-size: 0.8rem;
  color: #ccc;
}

/* === Meteoro principal === */
.meteor-zone {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

.meteor-card {
  width: 200px;
  box-shadow: 0 0 15px rgba(0, 150, 255, 0.2);
  transition: all 0.3s ease;
}

.meteor-card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(0, 180, 255, 0.4);
}

/* === Grid de defensas === */
.defense-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.defense-card {
  cursor: pointer;
}

.defense-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 10px rgba(0, 180, 255, 0.4);
}

/* === Selección === */
.selected {
  border-color: #00bfff;
  box-shadow: 0 0 15px rgba(0, 200, 255, 0.6);
  transform: translateY(-4px);
}

/* === Botones === */
.controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.btn {
  background-color: #004b7c;
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn:hover:not(.disabled) {
  background-color: #0079d0;
  transform: translateY(-2px);
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hidden {
  display: none;
}

/* === Resultados === */
.result-text {
  text-align: center;
  font-size: 1rem;
  color: #6cf;
  min-height: 1.5rem;
  margin-top: 0.5rem;
}

/* === Animaciones === */
@keyframes shake {
  0% { transform: translate(0); }
  25% { transform: translate(-5px, 0); }
  50% { transform: translate(5px, 0); }
  75% { transform: translate(-5px, 0); }
  100% { transform: translate(0); }
}

@keyframes explode {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(0,200,255,0.8); }
  50% { transform: scale(1.3); box-shadow: 0 0 60px rgba(0,200,255,0.9); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(0,200,255,0); }
}

.shake {
  animation: shake 0.4s ease;
}

.explode {
  animation: explode 0.8s ease;
}