/* Estilos compartidos por todas las páginas de quiz de Recreo.
   Antes esto estaba copiado y pegado dentro de cada archivo HTML —
   ahora vive en un solo lugar. Un quiz nuevo solo necesita:
   1. <link rel="stylesheet" href="../assets/css/quiz.css">
   2. Opcionalmente, sobreescribir --quiz-accent si no quiere usar canela
      (ej. perro.html usa --sage: <style>:root{--quiz-accent:var(--sage);}</style>)
*/

:root{
  --quiz-accent: var(--cinnamon);
}

/* --- Pantalla de introducción --- */
.intro{ text-align:center; padding: 10px 0 6px; }
.intro.hidden{ display:none; }
.intro-icon{ font-size:40px; margin-bottom:6px; }
.intro h1{ font-family:'Fraunces', serif; font-weight:600; font-size:24px; line-height:1.3; margin:0 0 16px; }
.intro-desc{
  font-family:'Work Sans', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(42,24,16,0.75);
  max-width: 480px;
  margin: 0 auto 16px;
  text-align: left;
}
.intro-meta{ font-size:13px; color:rgba(42,24,16,0.55); margin: 0 0 22px; }
.intro .btn{ padding: 13px 32px; }

/* --- Barra de progreso --- */
.progress-row{ display:flex; align-items:center; gap:14px; margin-bottom:30px; }
.cup{ width:34px; height:34px; flex-shrink:0; }
.progress-track{ flex:1; height:6px; border-radius:4px; background:var(--foam); overflow:hidden; }
.progress-fill{ height:100%; background:var(--quiz-accent); border-radius:4px; transition:width .4s ease; }
.progress-label{ font-size:13px; color:rgba(42,24,16,0.55); white-space:nowrap; }

/* --- Pregunta y opciones --- */
.quiz-card h1{ font-family:'Fraunces', serif; font-weight:600; font-size:24px; line-height:1.3; margin:0 0 26px; }
.options{ display:flex; flex-direction:column; gap:10px; }
.option{
  text-align:left; padding:15px 18px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--paper); font-family:'Work Sans', sans-serif; font-size:15px; color:var(--espresso);
  cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.option:hover:not(:disabled){ border-color:var(--quiz-accent); background:#fff; }
.option:disabled{ cursor:default; }
.option.correct{ border-color:var(--sage); background:rgba(107,115,83,0.14); font-weight:600; }
.option.incorrect{ border-color:#B33A3A; background:rgba(179,58,58,0.10); }

/* --- Display de trivia: imagen (banderas) o texto (capitales, y lo que siga) --- */
.trivia-display{ margin-bottom: 22px; }
.trivia-display img{
  width: 180px;
  max-width: 100%;
  border-radius: 6px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: block;
}
.trivia-display .country-name{
  display: block;
  padding: 22px 24px;
  background: var(--foam);
  border-radius: 10px;
  text-align: center;
  font-family:'Fraunces', serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--espresso);
}
/* --- Difficulty selector (reusable for future leveled quizzes) --- */
.trivia-display svg{
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
}

/* --- Difficulty selector (reusable for any future quiz with levels) --- */
.difficulty-select{ display:flex; flex-direction:column; gap:10px; }
.difficulty-btn{
  text-align:left;
  padding:16px 18px;
  border-radius:12px;
  border:1.5px solid var(--line);
  background:var(--paper);
  cursor:pointer;
  font-family:'Work Sans', sans-serif;
  display:flex;
  flex-direction:column;
  gap:3px;
  transition:border-color .15s ease, background .15s ease;
}
.difficulty-btn:hover{ border-color:var(--quiz-accent, var(--cinnamon)); background:#fff; }
.difficulty-btn strong{ font-size:15.5px; color:var(--espresso); }
.difficulty-btn span{ font-size:13px; color:rgba(42,24,16,0.6); }
.difficulty-select p{
  font-size: 15px;
  color: rgba(42,24,16,0.65);
  margin: 0 0 18px;
}
.difficulty-options{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.difficulty-btn{
  text-align:left;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-family:'Work Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--espresso);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.difficulty-btn:hover{ background: #fff; }
.difficulty-btn[data-level="facil"]:hover{ border-color: #4a8f5c; }
.difficulty-btn[data-level="medio"]:hover{ border-color: #c99a2e; }
.difficulty-btn[data-level="dificil"]:hover{ border-color: #c0453a; }
.difficulty-btn[data-level="dios"]:hover{ border-color: #1a1a1a; }
.level-tag{
  display:inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.level-tag.facil{ background: rgba(74,143,92,0.14); color: #3a7249; }
.level-tag.medio{ background: rgba(201,154,46,0.16); color: #96741f; }
.level-tag.dificil{ background: rgba(192,69,58,0.14); color: #a1382e; }
.level-tag.dios{ background: rgba(26,26,26,0.1); color: #1a1a1a; }

/* --- Caja de dato de contexto (trivia) --- */
.fact-box{
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--foam);
  border: 1px solid var(--line);
}
.fact-text{
  font-family:'Work Sans', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(42,24,16,0.8);
  margin: 0 0 14px;
}
.fact-box .btn{ width: 100%; text-align: center; }

/* --- Pantalla de resultado --- */
.result{ display:none; }
.result.active{ display:block; }
.quiz.hidden{ display:none; }
.hidden{ display:none !important; }

.result-eyebrow{ font-size:14px; color:var(--sage); margin-bottom:6px; }
.result-score{ font-family:'Fraunces', serif; font-weight:700; font-size:44px; color:var(--quiz-accent); margin:0 0 4px; }
.result-title{ font-family:'Fraunces', serif; font-weight:700; font-size:30px; margin:0 0 14px; color:var(--quiz-accent); }
.result-desc{ font-size:15.5px; line-height:1.65; color:rgba(42,24,16,0.85); margin-bottom:24px; }

/* --- Compartir --- */
.share-label{ font-size:13px; color:rgba(42,24,16,0.55); margin-bottom:8px; }
.share-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.share-btn{
  font-family:'Work Sans', sans-serif; font-size:13.5px; font-weight:600;
  padding:9px 14px; border-radius:9px; border:1.5px solid var(--line);
  background:#fff; cursor:pointer; color:var(--espresso);
}
.share-btn:hover{ border-color: var(--quiz-accent); }
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 10px; }

/* --- Quiz relacionado --- */
.related{ max-width:540px; margin:20px auto; padding:0 4px; }
.related p{ font-size:13px; color:rgba(42,24,16,0.55); margin:0 0 8px; }
.related a{ font-size:14.5px; font-weight:600; text-decoration:none; color:var(--quiz-accent); }