/* =====================================================================
   EL RETO DE LA NOCHE (reto.php). js/reto.js enseña una de las tres
   pantallas de .reto ([data-portada], [data-juego], [data-final]) y pone
   las clases de estado: .reto--prisa en los últimos 5 segundos, y en las
   opciones .reto__opcion--bien / --mal / --elegida al contestar. Los colores
   salen de --acento, así que los temas de temporada también tiñen el reto.
   Sin JavaScript se ve la portada con su aviso.
   ===================================================================== */

.reto-pagina { padding-block: 24px 8px; }

/* ----- Cabecera ----- */
.reto__cabecera { display: flex; align-items: center; gap: 20px; max-width: 720px; margin-bottom: 24px; }
.reto__icono svg { width: 72px; height: 72px; flex: none; }
.icono-reto { color: var(--acento); }
.reto__cabecera h1 {
    margin-block: 4px 10px;
    font-size: clamp(2rem, 5vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    padding-bottom: .1em;
    background: linear-gradient(100deg, var(--texto) 30%, var(--acento) 75%, color-mix(in srgb, var(--acento) 55%, #fff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.reto__cabecera p { margin-bottom: 0; }
@media (max-width: 559px) {
    .reto__icono { display: none; }
}

/* ----- La tarjeta del juego ----- */
.reto { max-width: 720px; padding: clamp(20px, 4vw, 32px); }
.reto__reglas { margin: 0 0 16px; padding-left: 1.2em; color: var(--texto-suave); }
.reto__reglas li { margin-bottom: 6px; }
.reto__puntos { color: var(--texto); }
.reto__sin-puntos { margin-bottom: 16px; }
.reto .mayor-edad { margin-bottom: 16px; }
.reto__empezar { min-width: 220px; }

/* ----- Una pregunta ----- */
.reto__marcador { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--texto-suave); font-size: .9rem; }
.reto__resultados { letter-spacing: .15em; font-size: .95rem; }
.reto__reloj { height: 6px; margin-top: 12px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.reto__reloj-barra { display: block; height: 100%; background: var(--acento); transform-origin: left center; }
.reto__segundos { margin: 6px 0 0; text-align: right; color: var(--texto-suave); font-size: .85rem; font-variant-numeric: tabular-nums; }
.reto--prisa .reto__reloj-barra { background: var(--error); }
.reto--prisa .reto__segundos { color: var(--error); }

.reto__imagen {
    display: grid;
    place-items: center;
    width: min(100%, 280px);
    aspect-ratio: 1;
    margin: 16px auto 0;
    padding: 12px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
}
.reto__imagen img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radio-pequeno); }

.reto__pregunta { margin: 20px 0 16px; font-size: clamp(1.2rem, 3.4vw, 1.5rem); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.reto__pregunta:focus { outline: none; }

.reto__opciones { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) {
    .reto__opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.reto__opcion {
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-pequeno);
    background: var(--fondo-elevado);
    color: var(--texto);
    font: inherit;
    font-weight: 500;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: border-color var(--transicion), background-color var(--transicion), transform var(--transicion);
}
.reto__opcion:hover:not(:disabled) { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, var(--fondo-elevado)); }
.reto__opcion:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.reto__opcion:disabled { cursor: default; }
.reto__opcion--elegida { border-color: var(--acento); }
.reto__opcion--bien { border-color: var(--exito); background: color-mix(in srgb, var(--exito) 18%, var(--fondo-elevado)); }
.reto__opcion--mal { border-color: var(--error); background: color-mix(in srgb, var(--error) 16%, var(--fondo-elevado)); }
@media (prefers-reduced-motion: no-preference) {
    .reto__opcion--bien { animation: reto-acierto .5s ease; }
    .reto__opcion--mal { animation: reto-fallo .4s ease; }
}
@keyframes reto-acierto { 50% { transform: scale(1.03); } }
@keyframes reto-fallo { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.reto__aviso { min-height: 1.5em; margin: 14px 0 0; font-weight: 600; }
.reto__aviso--bien { color: var(--exito); }
.reto__aviso--mal { color: var(--error); }
.reto__enlace { margin: 6px 0 0; font-size: .9rem; }

/* ----- El final ----- */
.reto__cuadricula { margin: 0; font-size: clamp(1.8rem, 7vw, 2.6rem); letter-spacing: .1em; line-height: 1.2; }
.reto .reto__titulo-final { margin: 8px 0 4px; color: var(--texto); font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; text-transform: none; }
.reto__titulo-final:focus { outline: none; }
.reto__puntos-final { margin: 0 0 8px; color: var(--acento); font-weight: 600; }
.reto__puntos-final:empty { display: none; }
.reto__compartir { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 16px; }
.reto__siguiente { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.reto__repaso { display: grid; gap: 10px; margin: 20px 0; padding: 0; list-style: none; }
.reto__repaso li { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio-pequeno); background: var(--fondo-elevado); }
.reto__marca { flex: none; width: 1.4em; font-weight: 700; text-align: center; }
.reto__repaso--bien .reto__marca { color: var(--exito); }
.reto__repaso--mal .reto__marca { color: var(--error); }
.reto__repaso-texto { color: var(--texto-suave); }
.reto__repaso-texto strong { display: block; margin-bottom: 2px; color: var(--texto); font-weight: 600; }

/* ----- Cómo funciona ----- */
.reto__como { max-width: 720px; margin-top: 32px; }
.reto__como h2 { margin-bottom: 8px; }