/* =============================================================================
   New Trivia — modo "Salto de Rana"                                    v1.0.0
   -----------------------------------------------------------------------------
   Un río visto desde arriba: orilla de pasto abajo (la rana), orilla de
   enfrente arriba, y en el medio el agua con los nenúfares que flotan.
   ============================================================================= */

.tv-modo--rana {
    --escena-ancho: 58em;
    --escena-alto: 48em;
    max-width: var(--escena-ancho);
    max-height: var(--escena-alto);
    gap: .6em;

    --rn-agua-1: #3fb6d9;
    --rn-agua-2: #1e7fb0;
    --rn-pasto:  #7cc95a;
    --rn-pasto-2:#4e9a3a;
    --rn-hoja-1: #a6e57f;
    --rn-hoja-2: #5fbf4a;
    --rn-tinta:  #173d10;
}

.rn-cartel {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .7em;
    padding: .75em .95em;
    border-radius: .7em;
    color: #1f2a1a;
    background: linear-gradient(180deg, #fffdf2, #eef7dc);
    box-shadow: 0 .22em 0 #6f9a4a, 0 .45em 1em rgba(0, 0, 0, .3);
}
.rn-cartel__foto { flex: 0 0 auto; max-height: 4.6em; max-width: 30%; width: auto; object-fit: contain; border-radius: .35em; cursor: zoom-in; }
.rn-cartel__textos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .45em; }
.rn-cartel__pregunta { margin: 0; font-size: 1.12em; font-weight: 800; line-height: 1.22; text-wrap: balance; }
.rn-cartel__pregunta.es-largo  { font-size: .98em; }
.rn-cartel__pregunta.es-xlargo { font-size: .88em; text-wrap: pretty; }
.rn-reloj { height: .38em; border-radius: 1em; background: rgba(0, 0, 0, .1); overflow: hidden; }
.rn-reloj__barra { height: 100%; background: linear-gradient(90deg, #3fb6d9, #7be0ff); transform-origin: left center; }
.rn-reloj.es-poco .rn-reloj__barra { background: linear-gradient(90deg, #ff9f43, #ef4444); }
.rn-reloj.es-libre { display: none; }

/* ---------- El río ---------- */
.rn-rio {
    position: relative;
    flex: 1 1 auto;
    min-height: 12em;
    display: flex;
    flex-direction: column;
    border-radius: .9em;
    overflow: hidden;
    background:
        repeating-linear-gradient(100deg, rgba(255, 255, 255, .0) 0 2.2em, rgba(255, 255, 255, .12) 2.2em 2.35em, rgba(255, 255, 255, 0) 2.35em 4.6em),
        linear-gradient(180deg, var(--rn-agua-1), var(--rn-agua-2));
    background-size: 9em 100%, 100% 100%;
    animation: rn-corriente 6s linear infinite;
    box-shadow: inset 0 0 0 .2em rgba(255, 255, 255, .15), 0 .6em 1.4em rgba(0, 0, 0, .35);
    transition: opacity .25s;
}
@keyframes rn-corriente { to { background-position: 9em 0, 0 0; } }
.tv-modo--rana.es-sale .rn-rio { opacity: .3; }

.rn-orilla {
    flex: 0 0 auto;
    position: relative;
    height: 2.4em;
    background:
        radial-gradient(circle at 20% 40%, rgba(255, 255, 255, .25) 0 .2em, transparent .25em) 0 0 / 2.4em 1.6em,
        linear-gradient(180deg, var(--rn-pasto), var(--rn-pasto-2));
}
.rn-orilla--lejos { border-bottom: .3em solid #c9b07a; }
.rn-orilla--lejos::after {
    /* juncos y una flor de loto en la orilla de enfrente */
    content: "🌾   🪷      🌾    🌸   🌾";
    position: absolute;
    left: .6em; right: .6em; bottom: .1em;
    font-size: 1.1em;
    letter-spacing: .4em;
    white-space: nowrap;
    overflow: hidden;
    opacity: .9;
}
.rn-orilla--cerca { height: 4.4em; border-top: .3em solid #c9b07a; }

.rn-carriles {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.rn-carril { position: relative; height: 5em; }

/* ---------- Nenúfares ---------- */
.rn-hoja {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -1.9em;
    min-width: 6.5em;
    max-width: 13em;
    min-height: 3.8em;
    display: flex;
    align-items: center;
    gap: .4em;
    padding: .45em 1.3em .45em .8em;
    border-radius: 50%;
    color: var(--rn-tinta);
    background: radial-gradient(ellipse at 40% 35%, var(--rn-hoja-1), var(--rn-hoja-2) 75%);
    box-shadow: inset 0 0 0 .14em #3f8f35, 0 .35em .5em rgba(0, 30, 60, .35);
    text-align: left;
    will-change: transform;
    cursor: pointer;
    outline: none;
}
/* Las nervaduras del nenúfar */
.rn-hoja::before {
    content: "";
    position: absolute;
    inset: .5em 1em;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .16) 0 2deg, transparent 2deg 30deg);
    pointer-events: none;
}
.rn-hoja:hover { filter: brightness(1.06); }
.rn-hoja:focus-visible { box-shadow: inset 0 0 0 .14em #3f8f35, 0 0 0 .2em #fff, 0 .35em .5em rgba(0, 30, 60, .35); }
.rn-hoja__letra {
    flex: 0 0 auto;
    width: 1.45em; height: 1.45em;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: .78em;
    font-weight: 900;
    color: #fff;
    background: #2e7d32;
}
.rn-hoja__texto { font-size: .95em; font-weight: 800; line-height: 1.15; overflow-wrap: break-word; min-width: 0; }
.rn-hoja__texto.es-largo { font-size: .8em; }
.rn-hoja__foto { width: 2.8em; height: 2.8em; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.rn-hoja--imagen { min-height: 4.2em; }

.rn-hoja.es-buena { box-shadow: inset 0 0 0 .14em #3f8f35, 0 0 0 .22em #fff59d, 0 0 1.4em rgba(255, 245, 157, .8); }
.rn-hoja.es-hunde { animation: rn-hunde 1s ease-in forwards; }
@keyframes rn-hunde {
    30%  { filter: brightness(.8); }
    100% { opacity: .15; filter: brightness(.6) hue-rotate(40deg); margin-top: -1.4em; scale: .85; }
}
.rn-hoja.es-era { box-shadow: inset 0 0 0 .14em #3f8f35, 0 0 0 .22em #fff59d, 0 0 1.4em rgba(255, 245, 157, .8); animation: rn-brilla 1s ease-in-out 3; }
@keyframes rn-brilla { 50% { box-shadow: inset 0 0 0 .14em #3f8f35, 0 0 0 .32em #fff59d, 0 0 2em rgba(255, 245, 157, 1); } }
.rn-hoja:disabled { cursor: default; }

/* ---------- La rana ---------- */
.rn-rana {
    position: absolute;
    left: 50%;
    bottom: .5em;
    z-index: 4;
    width: 3.8em;
    height: 3.4em;
    margin-left: -1.9em;
    pointer-events: none;
    transition: transform .7s var(--curva);
}
.rn-rana svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 .2em .15em rgba(0, 0, 0, .3)); }
.rn-rana.es-saltando { transition: none; animation: rn-salto .48s cubic-bezier(.3, .1, .4, 1) forwards; }
@keyframes rn-salto {
    0%   { transform: translate(0, 0) scale(1, .85); }
    50%  { transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5 - 2.5em)) scale(1.18); }
    100% { transform: translate(var(--dx), var(--dy)) scale(1); }
}
.rn-rana.es-cae { transition: none; }
.rn-rana.es-cae svg { animation: rn-cae .8s ease-in forwards; }
@keyframes rn-cae {
    40%  { transform: scale(.9); }
    100% { transform: scale(.55) translateY(.4em); opacity: .15; filter: hue-rotate(60deg); }
}
.rn-rana.es-cae::after {
    /* las ondas del chapuzón */
    content: "";
    position: absolute;
    left: 50%; top: 60%;
    width: 1em; height: .5em;
    margin: -.25em 0 0 -.5em;
    border-radius: 50%;
    border: .15em solid rgba(255, 255, 255, .85);
    animation: rn-onda .9s .25s ease-out forwards;
    opacity: 0;
}
@keyframes rn-onda { 0% { opacity: 1; } 100% { opacity: 0; width: 6em; height: 2.4em; margin: -1.2em 0 0 -3em; } }
.rn-rana.es-vuelve { transition: transform .8s ease-in-out; }
.rn-rana.es-vuelve svg { animation: rn-nada .8s ease-out forwards; }
@keyframes rn-nada { from { opacity: .2; transform: scale(.6); } to { opacity: 1; transform: none; } }
.rn-rana.es-cruza svg { animation: rn-cruza .7s cubic-bezier(.3, .1, .4, 1) forwards; }
@keyframes rn-cruza {
    50%  { transform: translateY(-3em) scale(1.15); }
    100% { transform: translateY(-9em) scale(.75); opacity: 0; }
}
.rn-rana.es-dormida::after {
    content: "z z z";
    position: absolute;
    right: -1.2em; top: -.8em;
    font-size: .8em;
    font-weight: 900;
    color: #fff;
    animation: rn-zzz 1.2s ease-in-out infinite;
}
@keyframes rn-zzz { 50% { transform: translateY(-.3em); opacity: .6; } }

.rn-ayuda {
    position: absolute;
    left: 50%;
    bottom: 3.95em;
    transform: translateX(-50%);
    z-index: 3;
    padding: .15em .7em;
    border-radius: 1em;
    font-size: .74em;
    font-weight: 800;
    white-space: nowrap;
    color: #fff;
    background: rgba(0, 40, 60, .45);
    pointer-events: none;
}

/* ---------- Resultado ---------- */
.rn-resultado {
    position: absolute;
    left: .6em; right: .6em; bottom: .6em;
    z-index: 7;
    max-height: 70%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: .45em;
    padding: .9em 1em;
    border-radius: .8em;
    color: #1f2a1a;
    background: #fbfff4;
    box-shadow: 0 -.4em 1.6em rgba(0, 0, 0, .4);
    transform: translateY(115%);
    visibility: hidden;
    transition: transform .45s var(--curva), visibility 0s .45s;
}
.rn-resultado.es-activo { transform: none; visibility: visible; transition: transform .45s var(--curva); }
.rn-resultado__titulo { font-size: 1.12em; font-weight: 900; }
.rn-resultado.es-ok .rn-resultado__titulo { color: #2e7d32; }
.rn-resultado.es-mal .rn-resultado__titulo { color: #1e6aa0; }
.rn-resultado__linea { font-size: .92em; }
.rn-resultado__linea b { color: #2e7d32; }
.rn-resultado__nota {
    padding: .4em .65em;
    border-left: .22em solid var(--rn-agua-1);
    border-radius: 0 .35em .35em 0;
    font-size: .88em;
    line-height: 1.3;
    background: #eaf8fd;
}
.rn-resultado__seguir {
    margin-top: .2em;
    min-height: 2.8em;
    border-radius: .7em;
    font-weight: 900;
    color: #14121f;
    background: linear-gradient(180deg, var(--acento-2), var(--acento));
    box-shadow: 0 .24em 0 rgba(0, 0, 0, .25);
}

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
    .rn-cartel__pregunta { font-size: 1.3em; }
    .rn-resultado { left: auto; width: min(30em, 60%); }
    .rn-hoja { max-width: 17em; font-size: 1.1em; }
    .rn-carril { height: 6em; }
}
@media (max-width: 420px) {
    .rn-hoja { min-width: 5.6em; max-width: 10.5em; padding: .4em 1.1em .4em .6em; }
    .rn-hoja__texto { font-size: .88em; }
}
@media (max-height: 470px) {
    .tv-modo--rana { padding: .45em .6em; gap: .35em; }
    .rn-cartel { padding: .4em .6em; }
    .rn-cartel__pregunta { font-size: .9em; }
    .rn-orilla { height: 1.2em; }
    .rn-orilla--lejos::after { display: none; }
    .rn-orilla--cerca { height: 3.2em; }
    .rn-carril { height: 3.8em; }
    .rn-hoja { min-height: 3em; margin-top: -1.5em; }
    .rn-ayuda { display: none; }
    .rn-rana { width: 3em; height: 2.7em; margin-left: -1.5em; bottom: .3em; }
}
@media (prefers-reduced-motion: reduce) {
    .rn-rio, .rn-hoja.es-hunde, .rn-hoja.es-era, .rn-rana.es-saltando, .rn-rana.es-cae svg,
    .rn-rana.es-vuelve svg, .rn-rana.es-cruza svg, .rn-rana.es-dormida::after, .rn-rana.es-cae::after { animation: none !important; }
    .rn-rana { transition: none; }
    .rn-resultado { transition: none; }
}

/* Lupa: ver la respuesta en grande (no salta) */
.rn-hoja .tv-lupita { right: -.35em; top: -.45em; bottom: auto; width: 1.6em; height: 1.6em; font-size: .9em; }
/* Textos larguísimos: tres renglones en la hoja; el resto se lee con la lupa */
.rn-hoja.con-lupa .rn-hoja__texto {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}