/* =========================================================
   GAMES.CSS — Estilos Maestros para Minijuegos
   ========================================================= */

:root {
  --game-gold: #d4af37;
  --game-bg-dark: rgba(5, 8, 20, 0.95);
  --game-overlay: rgba(0, 0, 0, 0.85);
  --game-correct: #4ade80;
  --game-wrong: #f87171;
}

/* --- SCROLLBARS UNIFICADOS (Estilo Scenario) --- */
/* Aplicamos el estilo exacto del menú lateral a las cajas de los juegos */
.game-card::-webkit-scrollbar,
.story-content-box::-webkit-scrollbar,
.adventure-text-area::-webkit-scrollbar {
    width: 3px;
}

.game-card::-webkit-scrollbar-track,
.story-content-box::-webkit-scrollbar-track,
.adventure-text-area::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
}

.game-card::-webkit-scrollbar-thumb,
.story-content-box::-webkit-scrollbar-thumb,
.adventure-text-area::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #d4af37, #1a1a1a); 
    border-radius: 10px; 
}

/* Firefox Support */
.game-card,
.story-content-box, 
.adventure-text-area {
  scrollbar-width: thin;
  scrollbar-color: var(--game-gold) transparent;
}


/* --- OVERLAY GENERAL (MODAL) --- */
.game-overlay {
  display: none; 
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--game-overlay); 
  backdrop-filter: blur(8px);
  z-index: 1000; 
  align-items: center;
  justify-content: center;
  animation: fadeInGame 0.3s ease;
}

.game-overlay.show { display: flex; }

@keyframes fadeInGame {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- TARJETA DE JUEGO --- */
.game-card {
  width: 90%;
  max-width: 500px;
  background: radial-gradient(circle at top, #1a2035, #050814);
  border: 1px solid var(--game-gold);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 0 50px rgba(212, 175, 55, 0.15);
  position: relative;
  text-align: center;
  max-height: 90vh;
  overflow-y: auto; 
}

.game-close-btn {
  position: absolute;
  top: 10px; right: 15px;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  opacity: 0.6;
}
.game-close-btn:hover { opacity: 1; color: var(--game-gold); }

/* --- 1. RELATOS DE CLIO --- */
.story-icon {
  font-size: 40px;
  margin-bottom: 15px;
  filter: drop-shadow(0 0 10px rgba(212,175,55,0.5));
}

.story-content-box {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
  text-align: left;
  min-height: 200px;
  max-height: 400px; 
  overflow-y: auto; 
  display: block;
}

.story-text {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #e6e0d4;
  font-style: italic;
}

/* --- 2. QUIZ / TRIVIA --- */
.quiz-progress {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--game-gold);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.quiz-question {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: #fff;
  margin-bottom: 25px;
  line-height: 1.4;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-option-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 15px;
  border-radius: 8px;
  color: #ddd;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  position: relative;
}

.quiz-option-btn:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--game-gold);
  color: #fff;
}

.quiz-option-btn.correct {
  background: rgba(74, 222, 128, 0.2) !important;
  border-color: var(--game-correct) !important;
  color: var(--game-correct) !important;
}

.quiz-option-btn.wrong {
  background: rgba(248, 113, 113, 0.2) !important;
  border-color: var(--game-wrong) !important;
  color: var(--game-wrong) !important;
  opacity: 0.6;
}

.quiz-result-icon { font-size: 50px; margin-bottom: 10px; }
.quiz-score-circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 3px solid var(--game-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: bold;
  color: #fff;
  margin: 0 auto 20px auto;
  box-shadow: 0 0 20px rgba(212,175,55,0.2);
}
.quiz-feedback-msg { font-size: 14px; color: #ccc; margin-bottom: 25px; line-height: 1.5; }

/* --- 3. WHAT IF (ESPECULACIÓN AVANZADA) --- */
.wif-container { display: flex; flex-direction: column; gap: 15px; text-align: left; }
.wif-card-btn { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; }
.wif-card-btn:hover { background: rgba(212, 175, 55, 0.1); border-color: var(--game-gold); transform: translateX(5px); }
.wif-card-title { font-family: 'Cinzel', serif; font-size: 14px; color: var(--game-gold); margin-bottom: 5px; }
.wif-card-desc { font-family: 'Inter', sans-serif; font-size: 12px; color: #ccc; line-height: 1.4; }

/* Vista Detallada del What If */
.wif-detail-view { display: none; animation: fadeInGame 0.4s ease; text-align: left; }
.wif-detail-header { font-family: 'Cinzel', serif; font-size: 18px; color: var(--game-gold); margin-bottom: 20px; text-align: center; border-bottom: 1px solid rgba(212,175,55,0.3); padding-bottom: 10px; }

/* Secciones internas */
.wif-section-box { margin-bottom: 20px; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6; color: #e6e0d4; }
.wif-intro { font-style: italic; color: #aaa; border-left: 2px solid #aaa; padding-left: 10px; margin-bottom: 20px; }
.wif-explanation { background: rgba(255,255,255,0.03); padding: 15px; border-radius: 8px; }
.wif-justification { border: 1px dashed var(--game-gold); padding: 15px; border-radius: 8px; background: rgba(212,175,55,0.05); margin-top: 20px; font-size: 13px; }

/* Listas dentro del What If */
.wif-section-box ul { margin-left: 20px; margin-top: 5px; margin-bottom: 10px; }
.wif-section-box li { margin-bottom: 5px; color: #ccc; }
.wif-strong { color: var(--game-gold); font-weight: bold; display: block; margin-top: 15px; margin-bottom: 5px; }


/* --- 4. SUPERVIVENCIA (ADVENTURE) - CORREGIDO --- */
.adventure-container { 
  display: flex; 
  flex-direction: column; 
  height: 100%; 
  /* CAMBIO CLAVE: Usamos flex-start para pegar todo arriba */
  justify-content: flex-start; 
  gap: 20px;
  overflow: hidden; /* Evita que los botones se salgan del modal */
}

.adventure-text-area { 
  /* CAMBIO CLAVE: flex: 0 1 auto permite que crezca según contenido, 
     pero si es muy grande, se encoje (shrink) y hace scroll */
  flex: 0 1 auto; 
  overflow-y: auto; 
  margin-bottom: 0;
  padding-right: 10px; 
  text-align: left; 
}

.adventure-log {
  margin-bottom: 25px; /* Un poco más de espacio entre párrafos */
  padding: 20px;       /* Más aire interno */
  background: rgba(255, 255, 255, 0.03); /* Fondo muy sutil */
  border-left: 2px solid var(--game-gold); 
  border-radius: 0 8px 8px 0; 
  animation: slideInRight 0.5s ease;

  /* --- TIPOGRAFÍA COPIADA DE SCENARIO.CSS (.sc-body) --- */
  font-family: 'Inter', sans-serif;
  font-weight: 300; 
  font-size: 15px;    /* Un punto más grande para lectura cómoda */
  color: #e6e0d4;     /* El color "blanco hueso" elegante */
  line-height: 1.8;   /* Buen espaciado entre líneas */
  letter-spacing: 0.03em;
  text-align: left;
}


/* El estilo para el log final (verde) se mantiene igual, solo ajustamos colores si hace falta */
.adventure-log.final {
  border-left: 2px solid #4ade80; 
  background: rgba(74, 222, 128, 0.05);
}

.adventure-options { 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
  flex-shrink: 0; /* Asegura que los botones nunca se aplasten */
}

.adventure-btn {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), transparent);
  border: 1px solid var(--game-gold); padding: 15px; color: #fff; text-align: left;
  cursor: pointer; font-family: 'Cinzel', serif; font-size: 13px; transition: all 0.3s; position: relative;
}
.adventure-btn:hover { background: var(--game-gold); color: #000; padding-left: 25px; }
.adventure-btn::before { content: "➤"; position: absolute; left: 5px; opacity: 0; transition: 0.3s; }
.adventure-btn:hover::before { opacity: 1; left: 10px; }
@keyframes slideInRight { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

/* --- BOTONES DE NAVEGACIÓN COMPARTIDOS --- */
.game-nav-group { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.game-btn {
  flex: 1; padding: 10px; border-radius: 6px; cursor: pointer; font-family: 'Cinzel', serif;
  font-size: 12px; text-transform: uppercase; border: 1px solid var(--game-gold); transition: 0.3s;
}
.game-btn.primary { background: var(--game-gold); color: #000; font-weight: bold; }
.game-btn.primary:hover { box-shadow: 0 0 15px rgba(212, 175, 55, 0.5); }
.game-btn.secondary { background: transparent; color: var(--game-gold); }
.game-btn.secondary:hover { background: rgba(212, 175, 55, 0.1); }