/* «Elige rival»: caras de los personajes del duelo rápido
   (assets/game/modules/rivalFaces.js). Hoja propia, enlazada desde el lobby
   (/duelos) y la página del duelo (/duelo/{id}): el soft-nav reinyecta los
   <link rel="stylesheet"> del documento destino.

   Animación sutil y barata: solo transform/opacity sobre piezas pequeñas.
   El cabeceo va solo en la cara grande (.rf-live); en las tarjetas basta el
   parpadeo, que es casi todo el tiempo un fotograma quieto. */

.rf {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.rf .rf-eyes {
    transform-box: fill-box;
    transform-origin: center;
    animation: rf-blink 5.6s infinite;
}

/* Cada personaje parpadea a su ritmo: en el lobby no parpadean todos a la vez. */
.rf--tito .rf-eyes { animation-duration: 4.3s; animation-delay: -1.1s; }
.rf--paco .rf-eyes { animation-duration: 6.2s; animation-delay: -2.4s; }
.rf--lucia .rf-eyes { animation-duration: 5.1s; animation-delay: -3.3s; }
.rf--mateo .rf-eyes { animation-duration: 4.8s; animation-delay: -.6s; }
.rf--amara .rf-eyes { animation-duration: 5.9s; animation-delay: -4.2s; }
.rf--profesor .rf-eyes { animation-duration: 7s; animation-delay: -1.8s; }
.rf--vega .rf-eyes { animation-duration: 6.6s; animation-delay: -5s; }

@keyframes rf-blink {
    0%, 93%, 100% { transform: scaleY(1); }
    95.5% { transform: scaleY(.08); }
}

/* Cara grande (cabecera del duelo, resultados): cabeceo y detalles vivos. */
.rf-live .rf-head {
    transform-box: view-box;
    transform-origin: 60px 96px;
    animation: rf-tilt 6.5s ease-in-out infinite;
}
.rf-live.rf--tito .rf-head { animation-duration: 4.6s; }
.rf-live.rf--profesor .rf-head { animation-duration: 8s; }

@keyframes rf-tilt {
    0%, 100% { transform: rotate(-2.2deg); }
    50% { transform: rotate(2.2deg); }
}

.rf-live .rf-float {
    animation: rf-float 3.2s ease-in-out infinite;
}

@keyframes rf-float {
    0%, 100% { transform: translateY(0); opacity: .95; }
    50% { transform: translateY(-5px); opacity: .55; }
}

.rf-live .rf-twinkle {
    transform-box: fill-box;
    transform-origin: center;
    animation: rf-twinkle 2.6s ease-in-out infinite;
}
.rf-live .rf-twinkle--b { animation-delay: -.9s; }
.rf-live .rf-twinkle--c { animation-delay: -1.7s; }

@keyframes rf-twinkle {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.45); opacity: .5; }
}

.rf-live .rf-glint {
    animation: rf-glint 5s ease-in-out infinite;
}

@keyframes rf-glint {
    0%, 70%, 100% { opacity: 0; }
    80% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .rf .rf-eyes,
    .rf-live .rf-head,
    .rf-live .rf-float,
    .rf-live .rf-twinkle,
    .rf-live .rf-glint {
        animation: none;
    }
    .rf-live .rf-glint { opacity: .8; }
}

/* ── Dificultad: tres puntos + etiqueta ──────────────────────────────────── */

.rv-diff {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.rv-dots { display: inline-flex; gap: 3px; }
.rv-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .25;
}
.rv-dot.on { opacity: 1; }
.rv-diff--1 { color: #22c55e; }
.rv-diff--2 { color: #f59e0b; }
.rv-diff--3 { color: #f43f5e; }

/* La cabecera del duelo sigue al tema (en los claros va sobre blanco); las
   tarjetas del lobby son siempre oscuras y conservan los tonos vivos. */
body.theme-light .duel-rival .rv-diff--1 { color: #15803d; }
body.theme-light .duel-rival .rv-diff--2 { color: #b45309; }
body.theme-light .duel-rival .rv-diff--3 { color: #be123c; }

/* ── Cabecera del rival en la página del duelo ───────────────────────────── */

.duel-rival {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 480px;
    margin: 8px auto 0;
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: 18px;
    background: rgba(15, 23, 42, .55);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #f8fafc;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.duel-rival[hidden] { display: none; }

.duel-rival-face {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.duel-rival-face--emoji {
    display: grid;
    place-items: center;
    font-size: 2.6rem;
    background: radial-gradient(circle at 35% 25%, #a5b4fc, #4338ca);
}

.duel-rival-body { min-width: 0; flex: 1 1 auto; }
.duel-rival-top {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.duel-rival-name {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.2;
}
.duel-rival-quote {
    position: relative;
    margin: 6px 0 0;
    padding: 6px 10px;
    border-radius: 12px 12px 12px 4px;
    background: rgba(255, 255, 255, .1);
    font-size: .84rem;
    font-style: italic;
    line-height: 1.35;
}
.duel-rival-quote:empty { display: none; }
.duel-rival-prize {
    margin: 6px 0 0;
    font-size: .78rem;
    opacity: .8;
}
.duel-rival-prize:empty { display: none; }

body.theme-light .duel-rival {
    background: rgba(255, 255, 255, .85);
    border-color: rgba(15, 23, 42, .1);
    color: #0f172a;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .08);
}
body.theme-light .duel-rival-quote {
    background: rgba(99, 102, 241, .1);
}

/* En resultados la cara preside la tarjeta. */
.result-rival {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
}
.result-rival[hidden] { display: none; }
.result-rival-face {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
.result-rival-line {
    margin: 0;
    max-width: 30ch;
    font-size: .92rem;
    font-style: italic;
    text-align: center;
    opacity: .85;
}
.result-rival-line:empty { display: none; }

/* Oct-2026: con la cara delante, la pantalla «Ronda N» se hacía tan larga que
   «Empezar ronda» quedaba bajo la barra inferior. La cabecera del rival va
   compacta (64 px), la tarjeta pierde el escudo y el relleno sobrante, y el botón
   se queda pegado abajo, siempre a la vista. */
body:has(#duel-rival:not([hidden])) #section-ready { padding: 16px 18px !important; margin-top: 10px !important; }
body:has(#duel-rival:not([hidden])) #section-ready > div:first-child { display: none; }
#duel-start-btn {
    position: sticky;
    bottom: calc(64px + 12px + env(safe-area-inset-bottom));
    z-index: 2;
}

/* Salir del duelo: vuelta a «Mis duelos» fuera de la ronda. */
.duel-exit {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 480px;
    margin: 8px auto 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    opacity: .8;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
}
.duel-exit .ic { width: 16px; height: 16px; }
.duel-exit[hidden] { display: none; }
body.theme-light .duel-exit { background: rgba(15, 23, 42, .05); border-color: rgba(15, 23, 42, .1); }