/* =============================================================================
   New Trivia — sistema visual                                          v1.1.0
   -----------------------------------------------------------------------------
   Sin plantillas de PNG: todo el diseño sale de variables CSS.

   Idea central del layout: el juego NO se estira a cualquier proporción.
   Hay un "escenario" centrado con tamaño máximo, y la escala tipográfica
   crece con el espacio disponible. Así se ve bien en el contenedor de la
   plataforma (480x600 y 320x400), en un celular alto y en pantalla completa
   de escritorio, sin huecos ni apretujones.
   ============================================================================= */

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Transparente porque dentro del iframe el fondo lo pinta la plataforma. */
    background: transparent;
}

/* ---------- A pantalla completa, sin iframe ----------
   Acá no hay contenedor que pinte nada detrás, así que la página se pinta
   sola: si no, al hacer rebote con el dedo aparece una franja blanca. El
   color es el mismo tono oscuro del degradado del tema. */
html.es-suelto, html.es-suelto body {
    background: #140d33;
    /* dvh sigue a la barra del navegador en el celular; el 100% de arriba
       queda como respaldo para los que no lo soportan. */
    height: 100dvh;
    overscroll-behavior: none;
}
html.es-suelto body { -webkit-tap-highlight-color: transparent; }

/* El tema claro no puede quedar con la franja oscura. */
html.es-suelto:has(.tv[data-tema="papel"]),
html.es-suelto:has(.tv[data-tema="papel"]) body { background: #dfe4f0; }

/* Muesca y barra de gestos: el juego no se mete abajo de ellas. */
html.es-suelto .tv {
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* A pantalla completa en el celular no hay cabecera ni marco de la plataforma
   compitiendo por el alto, así que el escenario se estira un poco más y deja
   menos aire muerto arriba y abajo. */
@media (max-width: 620px) {
    html.es-suelto .tv { --escena-alto: 48em; }
}
button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }
img { display: block; max-width: 100%; }

/* =============================================================================
   Temas
   ============================================================================= */
.tv {
    /* unidad base: de esto depende todo lo demás */
    --u: clamp(13px, 2.9vmin, 17px);

    /* tamaño máximo del escenario, en unidades: a partir de acá se centra */
    --escena-ancho: 34em;
    --escena-alto:  44em;

    --radio:       1.1em;
    --radio-chico: .7em;
    --borde:       rgba(255, 255, 255, .14);
    --ok:          #22c55e;
    --ok-suave:    rgba(34, 197, 94, .18);
    --mal:         #f43f5e;
    --mal-suave:   rgba(244, 63, 94, .18);
    --tinta:       #f7f8fc;
    --tinta-2:     rgba(247, 248, 252, .68);
    --vidrio:      rgba(255, 255, 255, .10);
    --vidrio-2:    rgba(255, 255, 255, .16);
    --sombra:      0 .5em 1.4em rgba(0, 0, 0, .3);
    --curva:       cubic-bezier(.22, 1, .36, 1);
    --resorte:     cubic-bezier(.34, 1.56, .64, 1);
}

/* Aurora — violeta profundo (tema por defecto) */
.tv[data-tema="aurora"] { --fondo-1: #2a1a5e; --fondo-2: #140d33; --acento: #a78bfa; --acento-2: #f0abfc; }
/* Océano */
.tv[data-tema="oceano"] { --fondo-1: #0c3a55; --fondo-2: #071d2e; --acento: #38bdf8; --acento-2: #5eead4; }
/* Menta */
.tv[data-tema="menta"]  { --fondo-1: #0d4436; --fondo-2: #06231c; --acento: #34d399; --acento-2: #a3e635; }
/* Solar */
.tv[data-tema="solar"]  { --fondo-1: #5c3210; --fondo-2: #2a1607; --acento: #fbbf24; --acento-2: #fb923c; }
/* Coral */
.tv[data-tema="coral"]  { --fondo-1: #5b1230; --fondo-2: #2b0817; --acento: #fb7185; --acento-2: #fda4af; }
/* Papel — claro, para proyectores y aulas con mucha luz */
.tv[data-tema="papel"] {
    --fondo-1: #eef1f8;
    --fondo-2: #dfe4f0;
    --acento:  #4f46e5;
    --acento-2:#0ea5e9;
    --tinta:   #16192b;
    --tinta-2: rgba(22, 25, 43, .62);
    --borde:   rgba(22, 25, 43, .12);
    --vidrio:  rgba(255, 255, 255, .72);
    --vidrio-2:rgba(255, 255, 255, .92);
    --sombra:  0 .5em 1.4em rgba(22, 25, 43, .14);
}

/* =============================================================================
   Lienzo
   ============================================================================= */
.tv {
    position: relative;
    width: 100%;
    height: 100%;
    /* `clip` en vez de `hidden`: las manchas de luz del fondo sobresalen por
       abajo y por la derecha, y con `hidden` eso convierte al contenedor en
       scrolleable. Al enfocar el primer botón, el navegador lo scrolleaba y
       TODO el juego quedaba corrido (medido: 104 px a la izquierda y 119 hacia
       arriba en escritorio). `clip` recorta igual pero no permite scroll.
       El `hidden` queda primero como respaldo para navegadores viejos, donde
       además el motor devuelve el scroll a cero. */
    overflow: hidden;
    overflow: clip;
    font-size: var(--u);
    font-family: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    color: var(--tinta);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    background: linear-gradient(160deg, var(--fondo-1), var(--fondo-2));
}

/* Imagen de entorno del juego */
.tv__fondo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.tv__velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, .13), transparent 60%),
        linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .45));
}
.tv[data-tema="papel"] .tv__velo {
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, .8), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .1));
}

/* =============================================================================
   Con imagen de entorno: la legibilidad no depende de la foto
   -----------------------------------------------------------------------------
   Una foto clara, oscura o con mucho detalle no puede dejar ilegible el juego.
   Cuando hay imagen de fondo, el velo se refuerza y los textos se apoyan en
   superficies opacas. El tema "papel" tiene su propia versión, en claro.
   ============================================================================= */
.tv.es-con-fondo .tv__velo {
    background: linear-gradient(180deg, rgba(8, 6, 20, .38), rgba(8, 6, 20, .72));
}
.tv[data-tema="papel"].es-con-fondo .tv__velo {
    background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .84));
}

/* Enunciado sobre una placa, para que no compita con el dibujo de atrás */
.tv.es-con-fondo .tv-pregunta__texto {
    background: rgba(10, 8, 25, .55);
    padding: .4em .75em;
    border-radius: .6em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-shadow: 0 .08em .35em rgba(0, 0, 0, .55);
}
.tv[data-tema="papel"].es-con-fondo .tv-pregunta__texto {
    background: rgba(255, 255, 255, .88);
    color: #16192b;
    text-shadow: none;
}

/* Tarjetas de respuesta: opacas de verdad */
.tv.es-con-fondo .tv-resp {
    background: rgba(12, 10, 28, .62);
    border-color: rgba(255, 255, 255, .28);
}
.tv[data-tema="papel"].es-con-fondo .tv-resp {
    background: rgba(255, 255, 255, .93);
    border-color: rgba(22, 25, 43, .16);
}
.tv.es-con-fondo .tv-resp.es-correcta   { background: rgba(21, 90, 52, .82); }
.tv.es-con-fondo .tv-resp.es-incorrecta { background: rgba(110, 24, 46, .82); }
.tv[data-tema="papel"].es-con-fondo .tv-resp.es-correcta   { background: rgba(214, 250, 226, .96); }
.tv[data-tema="papel"].es-con-fondo .tv-resp.es-incorrecta { background: rgba(254, 226, 232, .96); }

/* Barra, devolución y paneles del cierre */
.tv.es-con-fondo .tv-barra__paso,
.tv.es-con-fondo .tv-icono,
.tv.es-con-fondo .tv-chip,
.tv.es-con-fondo .tv-devolucion,
.tv.es-con-fondo .tv-stat,
.tv.es-con-fondo .tv-revision__item,
.tv.es-con-fondo .tv-tiempo {
    background: rgba(12, 10, 28, .62);
    border-color: rgba(255, 255, 255, .26);
}
.tv[data-tema="papel"].es-con-fondo .tv-barra__paso,
.tv[data-tema="papel"].es-con-fondo .tv-icono,
.tv[data-tema="papel"].es-con-fondo .tv-chip,
.tv[data-tema="papel"].es-con-fondo .tv-devolucion,
.tv[data-tema="papel"].es-con-fondo .tv-stat,
.tv[data-tema="papel"].es-con-fondo .tv-revision__item,
.tv[data-tema="papel"].es-con-fondo .tv-tiempo {
    background: rgba(255, 255, 255, .93);
    border-color: rgba(22, 25, 43, .14);
}

/* El puntaje va suelto: sobre una foto necesita su propia pastilla */
.tv.es-con-fondo .tv-barra__puntos {
    padding: .2em .65em;
    border-radius: 2em;
    background: rgba(12, 10, 28, .62);
    border: 1px solid rgba(255, 255, 255, .26);
}
.tv[data-tema="papel"].es-con-fondo .tv-barra__puntos {
    background: rgba(255, 255, 255, .93);
    border-color: rgba(22, 25, 43, .14);
}

/* Títulos y números que van sueltos sobre la foto */
.tv.es-con-fondo .tv-portada__titulo,
.tv.es-con-fondo .tv-final__frase,
.tv.es-con-fondo .tv-final__sub,
.tv.es-con-fondo .tv-anillo__num {
    text-shadow: 0 .1em .4em rgba(0, 0, 0, .6);
}
.tv[data-tema="papel"].es-con-fondo .tv-portada__titulo,
.tv[data-tema="papel"].es-con-fondo .tv-final__frase,
.tv[data-tema="papel"].es-con-fondo .tv-final__sub,
.tv[data-tema="papel"].es-con-fondo .tv-anillo__num {
    text-shadow: 0 0 .5em rgba(255, 255, 255, .95), 0 0 1em rgba(255, 255, 255, .8);
}
/* En pantalla ancha el escenario ya es un panel: se lo hace opaco */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
    .tv.es-con-fondo .tv__pantalla { background: rgba(10, 8, 24, .5); }
    .tv[data-tema="papel"].es-con-fondo .tv__pantalla { background: rgba(255, 255, 255, .78); }
}

/* Manchas de luz que respiran: dan profundidad sin costar casi nada */
.tv__aura {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .5;
    pointer-events: none;
    will-change: transform;
}
.tv__aura--1 {
    width: 26em; height: 26em;
    left: -8em; top: -10em;
    background: radial-gradient(circle, var(--acento), transparent 68%);
    animation: tv-flota-1 18s ease-in-out infinite;
}
.tv__aura--2 {
    width: 22em; height: 22em;
    right: -7em; bottom: -8em;
    background: radial-gradient(circle, var(--acento-2), transparent 68%);
    animation: tv-flota-2 22s ease-in-out infinite;
}
@keyframes tv-flota-1 {
    50% { transform: translate3d(3em, 2.4em, 0) scale(1.14); }
}
@keyframes tv-flota-2 {
    50% { transform: translate3d(-2.6em, -2em, 0) scale(1.1); }
}
.tv[data-tema="papel"] .tv__aura { opacity: .28; }

/* Destello de acierto / error sobre toda la pantalla */
.tv__fogonazo {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
}
.tv__fogonazo.es-ok {
    background: radial-gradient(70% 50% at 50% 100%, var(--ok), transparent 70%);
    animation: tv-fogonazo .55s ease-out;
}
.tv__fogonazo.es-mal {
    background: radial-gradient(90% 70% at 50% 50%, transparent 55%, var(--mal));
    animation: tv-fogonazo .45s ease-out;
}
@keyframes tv-fogonazo {
    0%   { opacity: 0; }
    18%  { opacity: .5; }
    100% { opacity: 0; }
}

/* =============================================================================
   Escenario: centrado y con tope. Nada de estirarse hasta el infinito.
   ============================================================================= */
.tv__pantalla {
    position: absolute;
    inset: 0;
    margin: auto;                        /* centra cuando hay tope */
    max-width: var(--escena-ancho);
    max-height: var(--escena-alto);
    z-index: 2;
    display: none;
    flex-direction: column;
    padding: 1em;
    gap: .8em;
}
.tv__pantalla.es-activa { display: flex; animation: tv-entra .35s var(--curva) both; }

@keyframes tv-entra {
    from { opacity: 0; transform: translateY(.8em); }
    to   { opacity: 1; transform: none; }
}

/* =============================================================================
   Portada
   ============================================================================= */
.tv-portada {
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1em;
}
.tv-portada__marca {
    font-size: .72em;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--acento);
    font-weight: 800;
    animation: tv-sube-suave .5s var(--curva) both;
}
.tv-portada__titulo {
    margin: 0;
    font-size: 2.1em;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.02em;
    text-wrap: balance;
    animation: tv-sube-suave .5s .06s var(--curva) both;
}
.tv-portada__datos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45em;
    animation: tv-sube-suave .5s .12s var(--curva) both;
}
@keyframes tv-sube-suave {
    from { opacity: 0; transform: translateY(1em); }
    to   { opacity: 1; transform: none; }
}
.tv-chip {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .4em .85em;
    border-radius: 2em;
    background: var(--vidrio);
    border: 1px solid var(--borde);
    font-size: .8em;
    font-weight: 700;
    white-space: nowrap;
}
.tv-portada__alias {
    width: 100%;
    max-width: 16em;
    padding: .75em 1em;
    border-radius: var(--radio-chico);
    border: 1px solid var(--borde);
    background: var(--vidrio-2);
    color: var(--tinta);
    font-size: .95em;
    font-weight: 700;
    text-align: center;
    outline: none;
    animation: tv-sube-suave .5s .18s var(--curva) both;
}
.tv-portada__alias::placeholder { color: var(--tinta-2); font-weight: 600; }
.tv-portada__alias:focus { border-color: var(--acento); box-shadow: 0 0 0 .2em rgba(255, 255, 255, .12); }
.tv-portada .tv-boton { animation: tv-sube-suave .5s .24s var(--curva) both; }

/* =============================================================================
   Botones
   ============================================================================= */
.tv-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 3em;
    padding: .75em 1.8em;
    border-radius: var(--radio);
    font-weight: 800;
    font-size: 1.05em;
    color: #14121f;
    background: linear-gradient(180deg, var(--acento-2), var(--acento));
    box-shadow: 0 .28em 0 0 rgba(0, 0, 0, .26), var(--sombra);
    transition: transform .12s var(--curva), filter .15s, box-shadow .12s;
}
.tv-boton:hover  { filter: brightness(1.07); transform: translateY(-.1em); }
.tv-boton:active { transform: translateY(.18em); box-shadow: 0 .1em 0 0 rgba(0, 0, 0, .26); }
.tv-boton:disabled { opacity: .45; cursor: default; transform: none; }
.tv-boton--fantasma {
    color: var(--tinta);
    background: var(--vidrio);
    border: 1px solid var(--borde);
    box-shadow: none;
    font-weight: 700;
}

/* =============================================================================
   Barra superior
   ============================================================================= */
.tv-barra {
    display: flex;
    align-items: center;
    gap: .5em;
    flex: 0 0 auto;
}
.tv-barra__paso {
    font-size: .82em;
    font-weight: 800;
    padding: .32em .75em;
    border-radius: 2em;
    background: var(--vidrio);
    border: 1px solid var(--borde);
    font-variant-numeric: tabular-nums;
}
.tv-barra__sep { flex: 1; }
.tv-barra__puntos {
    font-size: 1.05em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--acento);
    transition: transform .2s var(--resorte);
}
.tv-barra__puntos.es-saltando { transform: scale(1.22); }
.tv-barra__combo {
    display: inline-flex;
    align-items: center;
    gap: .2em;
    font-size: .78em;
    font-weight: 800;
    padding: .3em .65em;
    border-radius: 2em;
    background: var(--ok-suave);
    color: var(--ok);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .2s, transform .3s var(--resorte);
}
.tv-barra__combo.es-visible { opacity: 1; transform: none; }
.tv-barra__combo.es-nuevo   { animation: tv-combo .5s var(--resorte); }
@keyframes tv-combo {
    0%   { transform: scale(.6) rotate(-8deg); }
    60%  { transform: scale(1.25) rotate(4deg); }
    100% { transform: none; }
}
.tv-icono {
    width: 2.1em;
    height: 2.1em;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--vidrio);
    border: 1px solid var(--borde);
    color: var(--tinta);
    transition: background .15s, transform .12s;
}
.tv-icono:hover  { background: var(--vidrio-2); }
.tv-icono:active { transform: scale(.92); }
.tv-icono svg { width: 1.05em; height: 1.05em; display: block; }
/* Encendido (lectura en voz alta activa) */
.tv-icono.es-encendido {
    background: var(--acento);
    border-color: var(--acento);
    color: #14121f;
}
.tv-iconos { display: flex; align-items: center; gap: .35em; flex: 0 0 auto; }
.tv-portada__iconos { justify-content: center; margin-top: .2em; }

/* Tiempo */
.tv-tiempo {
    position: relative;
    height: .45em;
    border-radius: 1em;
    background: var(--vidrio);
    overflow: hidden;
    flex: 0 0 auto;
}
.tv-tiempo__barra {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    border-radius: 1em;
    background: linear-gradient(90deg, var(--acento-2), var(--acento));
}
.tv-tiempo.es-poco .tv-tiempo__barra { background: linear-gradient(90deg, #fbbf24, var(--mal)); }
.tv-tiempo.es-poco { animation: tv-pulso 1s ease-in-out infinite; }
@keyframes tv-pulso { 50% { opacity: .5; } }

/* =============================================================================
   Escena (se vuelve a armar en cada pregunta: así las animaciones se repiten)
   ============================================================================= */
.tv-escena {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .8em;
}
.tv-escena.es-saliendo { animation: tv-sale .18s ease-in forwards; }
@keyframes tv-sale {
    to { opacity: 0; transform: translateX(-1.5em); }
}

/* Pregunta */
.tv-pregunta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .7em;
    min-height: 0;
    overflow: hidden;   /* nunca se monta sobre las respuestas */
    animation: tv-preg-entra .45s var(--curva) both;
}
@keyframes tv-preg-entra {
    from { opacity: 0; transform: translateY(1.2em) scale(.97); }
    to   { opacity: 1; transform: none; }
}
/* El marco manda el alto; la imagen se acomoda adentro conservando su
   proporción. Así una figura vertical entra entera, igual que una apaisada. */
.tv-pregunta__marco {
    position: relative;
    /* se encoge cuando falta alto, en vez de empujar al resto */
    flex: 0 1 auto;
    min-height: 2.5em;
    max-height: 11em;
    max-width: 100%;
    display: flex;
    justify-content: center;
    cursor: zoom-in;
    transition: transform .15s var(--curva);
}
.tv-pregunta__marco:hover { transform: scale(1.03); }

.tv-pregunta__imagen {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radio-chico);
    box-shadow: var(--sombra);
}

/* Pista de "tocá para agrandar". Discreta, pero visible sobre cualquier foto. */
.tv-pregunta__lupa {
    position: absolute;
    right: .35em;
    bottom: .35em;
    width: 1.5em;
    height: 1.5em;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .78em;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}
.tv-pregunta__texto {
    margin: 0;
    font-size: 1.45em;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    letter-spacing: -.015em;
    text-wrap: balance;
    text-shadow: 0 .08em .3em rgba(0, 0, 0, .3);
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}
.tv[data-tema="papel"] .tv-pregunta__texto { text-shadow: none; }
.tv-pregunta__texto.es-largo  { font-size: 1.18em; }
.tv-pregunta__texto.es-xlargo { font-size: 1em; }

/* =============================================================================
   Respuestas
   ============================================================================= */
.tv-respuestas {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: .55em;
    min-height: 0;
}
.tv-respuestas.es-doble    { grid-template-columns: 1fr 1fr; }
.tv-respuestas.es-imagenes {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;      /* las tarjetas reparten el alto disponible */
    flex: 1 1 auto;
}
/* Si son impares, la última ocupa el ancho completo: no queda un hueco */
.tv-respuestas.es-doble > .tv-resp:last-child:nth-child(odd),
.tv-respuestas.es-imagenes > .tv-resp:last-child:nth-child(odd) { grid-column: span 2; }

/* Cuando las respuestas son imágenes, ellas mandan: el enunciado cede lugar */
.tv-escena--imagenes .tv-pregunta { flex: 0 1 auto; }
.tv-escena--imagenes .tv-pregunta__marco { max-height: 8em; }

.tv-resp {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7em;
    width: 100%;
    min-height: 3.2em;
    padding: .7em .9em;
    text-align: left;
    border-radius: var(--radio);
    background: var(--vidrio-2);
    border: 1px solid var(--borde);
    color: var(--tinta);
    font-weight: 700;
    font-size: 1em;
    line-height: 1.2;
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .14s var(--curva), background .18s, border-color .18s,
                opacity .25s, box-shadow .18s;
    animation: tv-resp-entra .4s var(--curva) both;
    animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}
@keyframes tv-resp-entra {
    from { opacity: 0; transform: translateY(1.1em); }
    to   { opacity: 1; transform: none; }
}
.tv-resp:hover:not(:disabled) {
    transform: translateY(-.14em);
    border-color: var(--acento);
    box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .28);
}
.tv-resp:active:not(:disabled) { transform: scale(.985); }

/* Brillo que barre la tarjeta al pasar el mouse */
.tv-resp::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform .55s var(--curva);
    pointer-events: none;
}
.tv-resp:hover:not(:disabled)::after { transform: translateX(120%); }

.tv-resp__letra {
    flex: 0 0 auto;
    width: 1.9em;
    height: 1.9em;
    display: grid;
    place-items: center;
    border-radius: .55em;
    background: rgba(0, 0, 0, .22);
    border: 1px solid var(--borde);
    font-size: .85em;
    font-weight: 800;
}
.tv[data-tema="papel"] .tv-resp__letra { background: rgba(22, 25, 43, .08); }
.tv-resp__texto {
    flex: 1 1 auto;
    min-width: 0;
    /* Una palabra larguísima no debe empujar la tarjeta ni salirse de ella */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
.tv-resp__texto.es-largo { font-size: .88em; line-height: 1.25; }
.tv-resp__falta { color: var(--tinta-2); font-style: italic; font-weight: 600; }
.tv-resp__marca {
    flex: 0 0 auto;
    font-size: 1.15em;
    opacity: 0;
    transform: scale(.4);
    transition: opacity .2s, transform .35s var(--resorte);
}

/* Respuestas con imagen */
.tv-resp--imagen {
    flex-direction: column;
    justify-content: center;
    gap: .4em;
    padding: .55em;
    text-align: center;
}
.tv-resp--imagen .tv-resp__letra { position: absolute; top: .45em; left: .45em; z-index: 2; }
.tv-resp--imagen .tv-resp__marca { position: absolute; top: .45em; right: .45em; z-index: 2; }
.tv-resp__foto {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    object-fit: contain;   /* la imagen se ve entera: nunca se recorta */
    border-radius: var(--radio-chico);
    background: rgba(0, 0, 0, .2);
}
.tv-resp--imagen .tv-resp__texto { flex: 0 0 auto; font-size: .88em; }

/* Estados */
.tv-resp.es-correcta {
    background: var(--ok-suave);
    border-color: var(--ok);
    box-shadow: 0 0 0 .12em var(--ok) inset, 0 0 1.6em rgba(34, 197, 94, .45);
}
.tv-resp.es-incorrecta {
    background: var(--mal-suave);
    border-color: var(--mal);
    box-shadow: 0 0 0 .12em var(--mal) inset;
}
.tv-resp.es-correcta .tv-resp__marca,
.tv-resp.es-incorrecta .tv-resp__marca { opacity: 1; transform: none; }
.tv-resp.es-apagada { opacity: .34; filter: saturate(.5); }
.tv-resp:disabled { cursor: default; }
.tv-resp.es-correcta   { animation: tv-acierto .5s var(--resorte); }
.tv-resp.es-incorrecta { animation: tv-error .4s ease-in-out; }
@keyframes tv-acierto {
    30% { transform: scale(1.04); }
    60% { transform: scale(.995); }
}
@keyframes tv-error {
    20%, 60% { transform: translateX(-.4em); }
    40%, 80% { transform: translateX(.4em); }
}

/* Confeti que sale de la tarjeta correcta */
.tv-chispas {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    overflow: hidden;
}
.tv-chispas i {
    position: absolute;
    width: .5em;
    height: .5em;
    border-radius: .1em;
    animation: tv-chispa .9s ease-out forwards;
}
@keyframes tv-chispa {
    0%   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4) rotate(320deg); }
}

/* =============================================================================
   Devolución
   ============================================================================= */
.tv-pie { flex: 0 0 auto; min-height: 3.2em; display: flex; align-items: center; }

.tv-devolucion {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .8em;
    padding: .7em .9em;
    border-radius: var(--radio);
    background: var(--vidrio-2);
    border: 1px solid var(--borde);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: tv-sube .35s var(--resorte) both;
}
@keyframes tv-sube {
    from { opacity: 0; transform: translateY(1.2em); }
    to   { opacity: 1; transform: none; }
}
.tv-devolucion.es-ok  { border-color: var(--ok); }
.tv-devolucion.es-mal { border-color: var(--mal); }
.tv-devolucion__icono { font-size: 1.6em; line-height: 1; flex: 0 0 auto; animation: tv-icono-pop .45s var(--resorte) both; }
@keyframes tv-icono-pop {
    from { transform: scale(.2) rotate(-25deg); }
    to   { transform: none; }
}
.tv-devolucion__cuerpo { flex: 1 1 auto; min-width: 0; }
.tv-devolucion__titulo { font-size: .98em; font-weight: 800; }
.tv-devolucion.es-ok  .tv-devolucion__titulo { color: var(--ok); }
.tv-devolucion.es-mal .tv-devolucion__titulo { color: var(--mal); }
.tv-devolucion__nota {
    font-size: .84em;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tinta-2);
    margin-top: .15em;
    max-height: 4.4em;
    overflow-y: auto;
}
.tv-devolucion__seguir {
    flex: 0 0 auto;
    width: 2.6em;
    height: 2.6em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.1em;
    font-weight: 800;
    color: #14121f;
    background: linear-gradient(180deg, var(--acento-2), var(--acento));
    box-shadow: 0 .2em .6em rgba(0, 0, 0, .3);
    animation: tv-late 1.4s ease-in-out infinite;
}
.tv-devolucion__seguir:active { transform: scale(.92); }
@keyframes tv-late {
    50% { transform: scale(1.09); box-shadow: 0 .3em .9em rgba(0, 0, 0, .35); }
}

/* Puntos que suben al acertar */
.tv-suma {
    position: absolute;
    z-index: 8;
    font-size: 1.3em;
    font-weight: 800;
    color: var(--ok);
    text-shadow: 0 .1em .4em rgba(0, 0, 0, .5);
    pointer-events: none;
    animation: tv-sube-punto 1.1s var(--curva) forwards;
}
@keyframes tv-sube-punto {
    0%   { opacity: 0; transform: translateY(.8em) scale(.7); }
    22%  { opacity: 1; transform: translateY(0) scale(1.15); }
    100% { opacity: 0; transform: translateY(-2.4em) scale(1); }
}

/* =============================================================================
   Pantalla final
   ============================================================================= */
.tv-final { justify-content: flex-start; overflow: hidden; }
.tv-final__cabecera {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35em;
    flex: 0 0 auto;
}
.tv-anillo {
    position: relative;
    width: 8em;
    height: 8em;
    flex: 0 0 auto;
    animation: tv-anillo-entra .6s var(--resorte) both;
}
@keyframes tv-anillo-entra {
    from { opacity: 0; transform: scale(.72); }
    to   { opacity: 1; transform: none; }
}
.tv-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tv-anillo__pista { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 9; }
.tv[data-tema="papel"] .tv-anillo__pista { stroke: rgba(22, 25, 43, .12); }
.tv-anillo__valor {
    fill: none;
    stroke: url(#tv-grad);
    stroke-width: 9;
    stroke-linecap: round;
    transition: stroke-dasharray 1.1s var(--curva);
}
.tv-anillo__texto { position: absolute; inset: 0; display: grid; place-items: center; }
.tv-anillo__num {
    font-size: 1.95em;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tv-final__frase { font-size: 1.3em; font-weight: 800; text-align: center; animation: tv-sube-suave .5s .25s var(--curva) both; }
.tv-final__sub   { font-size: .86em; color: var(--tinta-2); font-weight: 600; text-align: center; animation: tv-sube-suave .5s .32s var(--curva) both; }

.tv-final__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .4em;
    flex: 0 0 auto;
    margin-top: .3em;
}
.tv-stat {
    padding: .55em .2em;
    border-radius: var(--radio-chico);
    background: var(--vidrio);
    border: 1px solid var(--borde);
    text-align: center;
    animation: tv-sube-suave .45s var(--curva) both;
    animation-delay: calc(var(--i, 0) * 70ms + 380ms);
}
.tv-stat__valor  { font-size: 1.2em; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tv-stat__rotulo { font-size: .64em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }

.tv-revision {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .35em;
    margin-top: .3em;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}
.tv-revision__item {
    display: flex;
    gap: .55em;
    align-items: flex-start;
    padding: .55em .7em;
    border-radius: var(--radio-chico);
    background: var(--vidrio);
    border: 1px solid var(--borde);
    text-align: left;
    width: 100%;
    animation: tv-sube-suave .4s var(--curva) both;
    animation-delay: calc(var(--i, 0) * 45ms + 520ms);
}
.tv-revision__marca    { flex: 0 0 auto; font-size: 1em; line-height: 1.3; }
.tv-revision__cuerpo   { flex: 1 1 auto; min-width: 0; }
.tv-revision__pregunta { font-size: .86em; font-weight: 700; line-height: 1.25; }
.tv-revision__detalle  { font-size: .76em; font-weight: 600; color: var(--tinta-2); margin-top: .15em; line-height: 1.3; }
.tv-revision__detalle b { color: var(--ok); font-weight: 800; }

.tv-final__acciones { display: flex; gap: .45em; flex: 0 0 auto; padding-top: .3em; }
.tv-final__acciones .tv-boton { flex: 1 1 auto; animation: tv-sube-suave .45s .6s var(--curva) both; }

/* Lluvia de confeti del cierre */
.tv-lluvia { position: absolute; inset: 0; z-index: 7; overflow: hidden; pointer-events: none; }
.tv-lluvia i {
    position: absolute;
    top: -1.2em;
    width: .5em;
    height: .9em;
    border-radius: .1em;
    animation: tv-cae linear forwards;
}
@keyframes tv-cae {
    to { transform: translateY(115vh) rotate(680deg); opacity: .15; }
}

/* =============================================================================
   Imagen ampliada
   ============================================================================= */
.tv-lupa {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: none;
    place-items: center;
    padding: 1.2em;
    background: rgba(0, 0, 0, .85);
    cursor: zoom-out;
}
.tv-lupa.es-activa { display: grid; animation: tv-entra .25s var(--curva) both; }
.tv-lupa img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radio-chico); }

/* =============================================================================
   Cargando / aviso
   ============================================================================= */
.tv-cargando { justify-content: center; align-items: center; gap: .8em; }
.tv-cargando__aro {
    width: 2.8em;
    height: 2.8em;
    border-radius: 50%;
    border: .3em solid var(--vidrio);
    border-top-color: var(--acento);
    animation: tv-gira .9s linear infinite;
}
@keyframes tv-gira { to { transform: rotate(360deg); } }
.tv-cargando__texto { font-size: .88em; color: var(--tinta-2); font-weight: 700; }

.tv-aviso { justify-content: center; align-items: center; text-align: center; gap: .7em; }

/* =============================================================================
   Empotrado en la plataforma
   -----------------------------------------------------------------------------
   El contenedor del juego pone su botón de menú arriba a la derecha y el de
   pantalla completa abajo a la izquierda. El juego les deja esas esquinas para
   que no se tapen entre sí.
   ============================================================================= */
.tv.es-empotrado .tv-barra { padding-right: 3.6em; }
.tv.es-empotrado .tv-pie   { padding-left: 3.4em; }
@media (max-height: 470px) {
    .tv.es-empotrado .tv-barra { padding-right: 2.6em; }
    .tv.es-empotrado .tv-pie   { padding-left: 2.6em; }
}
/* En pantalla ancha el escenario ya está centrado y lejos de las esquinas */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
    .tv.es-empotrado .tv-barra { padding-right: 0; }
    .tv.es-empotrado .tv-pie   { padding-left: 0; }
}

/* =============================================================================
   Adaptaciones por tamaño de lienzo
   -----------------------------------------------------------------------------
   Tres escalones: compacto (contenedor chico de la plataforma), celular alto
   y pantalla ancha. En todos, el escenario se centra y no se desborda.
   ============================================================================= */

/* --- Compacto: el contenedor de 320x400 de la plataforma --- */
@media (max-height: 470px) {
    .tv {
        --u: clamp(12px, 3.1vmin, 15px);
        --escena-alto: 34em;
    }
    .tv__pantalla { padding: .7em; gap: .55em; }
    .tv-escena { gap: .55em; }
    .tv-pregunta__marco { max-height: 6.5em; }
    .tv-pregunta__texto { font-size: 1.2em; }
    .tv-pregunta__texto.es-largo { font-size: 1.02em; }
    .tv-portada__titulo { font-size: 1.6em; }
    .tv-anillo { width: 5.6em; height: 5.6em; }
    .tv-resp { min-height: 2.6em; padding: .55em .75em; }
    .tv-pie { min-height: 2.8em; }
}

/* --- Celular alto: sobra alto, falta ancho --- */
@media (max-width: 560px) and (min-height: 600px) {
    .tv {
        --u: clamp(14px, calc(1.15vh + 1.1vw), 20px);
        --escena-ancho: 30em;
        --escena-alto: 42em;
    }
    .tv__pantalla { padding: 1.15em; }
    .tv-escena { gap: 1.1em; }
    .tv-resp { min-height: 3.5em; }
    .tv-pregunta__marco { max-height: 12em; }
}

/* --- Pantalla ancha (escritorio, pantalla completa): dos columnas --- */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
    .tv {
        --u: clamp(15px, calc(1.15vh + 0.35vw), 23px);
        --escena-ancho: 58em;
        --escena-alto: 40em;
    }
    /* En pantalla grande el escenario se lee como una pieza, no como un vacío */
    .tv__pantalla {
        padding: 1.4em 1.6em;
        border-radius: 1.8em;
        background: rgba(255, 255, 255, .045);
        border: 1px solid var(--borde);
        box-shadow: 0 2em 5em rgba(0, 0, 0, .35);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
    .tv[data-tema="papel"] .tv__pantalla { background: rgba(255, 255, 255, .5); }

    /* La escena se parte: enunciado a la izquierda, respuestas a la derecha */
    .tv-escena {
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        align-items: center;
        gap: 1.6em;
    }
    .tv-pregunta {
        height: 100%;
        justify-content: center;
        gap: 1em;
    }
    .tv-pregunta__marco { max-height: 15em; }
    .tv-pregunta__texto  { font-size: 1.75em; }
    .tv-pregunta__texto.es-largo  { font-size: 1.4em; }
    .tv-pregunta__texto.es-xlargo { font-size: 1.15em; }

    .tv-respuestas            { align-content: center; }
    .tv-respuestas.es-doble   { grid-template-columns: 1fr; }   /* una columna, más grandes */
    .tv-respuestas.es-imagenes{ grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; align-self: stretch; }
    .tv-resp { min-height: 3.6em; font-size: 1.05em; }

    .tv-portada__titulo  { font-size: 2.6em; }
    .tv-anillo           { width: 9em; height: 9em; }
    .tv-final__stats     { grid-template-columns: repeat(4, 1fr); }
    .tv-revision         { grid-template-columns: 1fr 1fr; display: grid; align-content: start; gap: .45em; }
    .tv-revision__pregunta { font-size: .92em; }
    .tv-final__acciones .tv-boton { max-width: 20em; margin: 0 auto; }
}

/* --- Apaisado bajo (celular acostado): todo más chato --- */
@media (max-height: 520px) and (min-aspect-ratio: 3/2) {
    .tv { --u: clamp(12px, 2.6vmin, 16px); --escena-ancho: 52em; --escena-alto: 30em; }
    .tv-escena { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1em; }
    .tv-pregunta__marco { max-height: 8em; }
    .tv-pregunta__texto { font-size: 1.3em; }
    .tv-respuestas.es-doble { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .tv__aura, .tv-chispas, .tv-lluvia { display: none; }
}