/* =============================================================================
   New Trivia — modo "La Torre"                                         v1.0.0
   -----------------------------------------------------------------------------
   Arriba el cartel con la pregunta, en el medio la obra (cielo, torre, plano
   punteado de la meta y la grúa) y abajo el acopio con los bloques. En
   pantallas anchas: la obra a la izquierda y cartel + acopio a la derecha.
   ============================================================================= */

.tv-modo--torre {
    --escena-ancho: 64em;
    --escena-alto: 50em;
    max-width: var(--escena-ancho);
    max-height: var(--escena-alto);
    gap: .55em;

    --tr-amarillo: #f6b81a;
    --tr-amarillo-2: #c98a00;
    --tr-tinta: #2a2116;
}

.tr-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .55em;
    transition: opacity .2s;
}
.tv-modo--torre.es-sale .tr-cuerpo { opacity: .35; }

/* ---------- Cartel ---------- */
.tr-cartel {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .7em;
    padding: .7em .9em;
    border-radius: .7em;
    color: var(--tr-tinta);
    background:
        repeating-linear-gradient(-45deg, #2a2116 0 .5em, var(--tr-amarillo) .5em 1em) top / 100% .32em no-repeat,
        linear-gradient(180deg, #fffaf0, #f3ead6);
    padding-top: .95em;
    box-shadow: 0 .22em 0 #a98a52, 0 .45em 1em rgba(0, 0, 0, .3);
}
.tr-cartel__foto {
    flex: 0 0 auto;
    height: 4.4em;
    max-width: 30%;
    width: auto;
    object-fit: contain;
    border-radius: .35em;
    cursor: zoom-in;
}
.tr-cartel__textos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .45em; }
.tr-cartel__pregunta { margin: 0; font-size: 1.1em; font-weight: 800; line-height: 1.22; text-wrap: balance; }
.tr-cartel__pregunta.es-largo  { font-size: .98em; }
.tr-cartel__pregunta.es-xlargo { font-size: .88em; text-wrap: pretty; }
.tr-reloj { height: .38em; border-radius: 1em; background: rgba(0, 0, 0, .12); overflow: hidden; }
.tr-reloj__barra { height: 100%; background: linear-gradient(90deg, #f6b81a, #ffd966); transform-origin: left center; }
.tr-reloj.es-poco .tr-reloj__barra { background: linear-gradient(90deg, #ff9f43, #ef4444); }
.tr-reloj.es-libre { display: none; }

/* ---------- La obra ---------- */
.tr-obra {
    position: relative;
    flex: 1 1 auto;
    min-height: 9em;
    border-radius: .8em;
    overflow: hidden;
    background: linear-gradient(180deg, #8fd0ff 0%, #c9ecff 70%, #eaf8ff 100%);
    box-shadow: inset 0 0 0 .2em rgba(255, 255, 255, .25), 0 .6em 1.4em rgba(0, 0, 0, .35);
}
.tr-obra.es-mal { animation: tr-sacude .4s ease-out .35s; }
@keyframes tr-sacude { 25% { transform: translateX(-.25em); } 60% { transform: translateX(.2em); } }

.tr-nube {
    position: absolute;
    width: 5em; height: 1.6em;
    border-radius: 1em;
    background: rgba(255, 255, 255, .85);
    filter: blur(.5px);
    animation: tr-nube 38s linear infinite;
}
.tr-nube::before, .tr-nube::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
}
.tr-nube::before { width: 2.2em; height: 2.2em; left: .8em; top: -1em; }
.tr-nube::after  { width: 1.6em; height: 1.6em; left: 2.5em; top: -.6em; }
.tr-nube--1 { top: 3.4em; left: -6em; animation-delay: -12s; }
.tr-nube--2 { top: 6.5em; left: -6em; transform: scale(.7); animation-duration: 52s; animation-delay: -26s; opacity: .8; }
@keyframes tr-nube { to { left: 110%; } }

/* El mundo (suelo, plano y torre) baja cuando la torre ya no entra */
.tr-mundo {
    position: absolute;
    inset: 0;
    transition: transform .6s var(--curva);
}
.tr-suelo {
    position: absolute;
    left: -1em; right: -1em;
    bottom: -40em;                 /* sigue para abajo cuando la cámara sube */
    height: calc(40em + 1.3em);
    background:
        linear-gradient(180deg, #6fbf4b 0 .3em, #a47b52 .3em 1.3em, #7d5a3a 1.3em);
}

/* Plano punteado: la torre que se podría construir con todas bien */
.tr-plano {
    position: absolute;
    bottom: 1.3em;
    left: calc(var(--xt) - var(--ancho) / 2);
    width: var(--ancho);
    border: 2px dashed rgba(30, 64, 120, .45);
    border-bottom: 0;
    border-radius: .3em .3em 0 0;
    background:
        repeating-linear-gradient(0deg, transparent 0 calc(var(--piso) - 1px), rgba(30, 64, 120, .2) calc(var(--piso) - 1px) var(--piso)),
        rgba(255, 255, 255, .22);
    box-sizing: border-box;
}
.tr-plano__meta {
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-bottom: .2em;
    transform: translateX(-50%);
    padding: .1em .5em;
    border-radius: 1em;
    font-size: .72em;
    font-weight: 900;
    white-space: nowrap;
    color: #1e3a6b;
    background: rgba(255, 255, 255, .85);
}

/* La torre: los pisos se apilan de abajo hacia arriba */
.tr-torre {
    position: absolute;
    bottom: 1.3em;
    left: calc(var(--xt) - var(--ancho) / 2);
    width: var(--ancho);
    display: flex;
    flex-direction: column-reverse;
}
.tr-piso {
    position: relative;
    flex: 0 0 auto;
    height: var(--piso);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .35em;
    overflow: hidden;
    border-radius: .18em;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .16)),
        var(--c);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.tr-piso.es-nuevo { animation: tr-clac .55s var(--resorte); transform-origin: center bottom; }
@keyframes tr-clac {
    0%   { transform: translateY(-.6em) scaleY(1.1); }
    55%  { transform: translateY(0) scale(1.06, .82); }
    100% { transform: none; }
}
.tr-piso__texto {
    max-width: 100%;
    padding: .05em .45em;
    border-radius: .3em;
    font-size: .74em;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--tr-tinta);
    background: rgba(255, 255, 255, .86);
}
.tr-piso__texto b { color: #7a5a00; }
.tr-piso__texto { display: inline-flex; align-items: center; gap: .3em; }
.tr-piso__dice { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tr-piso__foto { height: 1.25em; width: 1.25em; object-fit: cover; border-radius: .2em; flex: 0 0 auto; }
/* Pisos finos (muchas preguntas): solo ventanitas */
.tr-torre.es-fina .tr-piso__texto { display: none; }
.tr-torre.es-fina .tr-piso {
    background:
        repeating-linear-gradient(90deg, transparent 0 .45em, rgba(255, 255, 210, .75) .45em .85em, transparent .85em 1.3em) center / 100% 45% no-repeat,
        var(--c);
}

/* ---------- La grúa ---------- */
.tr-mastil {
    position: absolute;
    top: .7em;
    bottom: 1.3em;
    left: calc(var(--xg) - .6em);
    width: 1.2em;
    border-left: .2em solid var(--tr-amarillo);
    border-right: .2em solid var(--tr-amarillo);
    background:
        repeating-linear-gradient(45deg, transparent 0 .55em, var(--tr-amarillo-2) .55em .7em),
        repeating-linear-gradient(-45deg, transparent 0 .55em, var(--tr-amarillo-2) .55em .7em);
    box-sizing: border-box;
}
.tr-pluma {
    position: absolute;
    top: 1.25em;
    height: .8em;
    border-top: .18em solid var(--tr-amarillo);
    border-bottom: .18em solid var(--tr-amarillo);
    background: repeating-linear-gradient(60deg, transparent 0 .5em, var(--tr-amarillo-2) .5em .64em);
    box-sizing: border-box;
}
.tr-contrapeso {
    position: absolute;
    top: 1.95em;
    left: calc(var(--xg) + .9em);
    width: 1.5em;
    height: 1.1em;
    border-radius: .15em;
    background: linear-gradient(180deg, #9aa3ad, #6b7480);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.tr-cabina {
    position: absolute;
    top: 2.05em;
    left: calc(var(--xg) - 1.75em);
    width: 1.15em;
    height: 1.05em;
    border-radius: .2em .2em .1em .1em;
    background:
        linear-gradient(180deg, #bfe6ff 0 55%, transparent 55%) .15em .15em / .85em .75em no-repeat,
        var(--tr-amarillo);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.tr-mastil::before {
    /* la punta de la torre de la grúa */
    content: "";
    position: absolute;
    left: 50%;
    top: -.7em;
    width: 0; height: 0;
    margin-left: -.6em;
    border-left: .6em solid transparent;
    border-right: .6em solid transparent;
    border-bottom: .7em solid var(--tr-amarillo);
}

.tr-carro {
    position: absolute;
    z-index: 3;
    top: 2.05em;
    width: 1.5em;
    height: .5em;
    margin-left: -.75em;
    border-radius: .12em;
    background: #3a3f47;
    box-shadow: 0 .1em .2em rgba(0, 0, 0, .35);
    transition: left .7s var(--curva);
}
.tr-colgante {
    position: absolute;
    top: 100%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
}
.tr-cuerda {
    width: 2px;
    background: #2b2b2b;
    transition: height .55s var(--curva);
}
.tr-carro.es-quieto, .tr-carro.es-quieto .tr-cuerda { transition: none; }
.tr-gancho {
    width: .7em;
    height: .85em;
    border: .16em solid #4a4f57;
    border-top-color: transparent;
    border-radius: 0 0 .5em .5em;
    box-sizing: border-box;
}

/* La carga (el bloque elegido) colgando del gancho */
.tr-carga {
    width: var(--ancho);
    height: var(--carga);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35em;
    padding: 0 .4em;
    overflow: hidden;
    border-radius: .2em;
    color: var(--tr-tinta);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .16)),
        var(--c, #f6b81a);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .28), 0 .3em .5em rgba(0, 0, 0, .25);
    opacity: 0;
    box-sizing: border-box;
}
.tr-carga.es-visible { opacity: 1; }
.tr-carga__letra {
    flex: 0 0 auto;
    min-width: 1.3em; height: 1.3em;
    display: grid; place-items: center;
    border-radius: .25em;
    font-size: .78em;
    font-weight: 900;
    color: #fff;
    background: rgba(0, 0, 0, .45);
}
.tr-carga__foto { flex: 0 0 auto; height: 80%; aspect-ratio: 1; object-fit: cover; border-radius: .2em; }
.tr-carga__texto {
    min-width: 0;
    padding: .05em .4em;
    border-radius: .3em;
    font-size: .74em;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(255, 255, 255, .86);
}
/* No encaja: se tambalea y se cae de costado */
.tr-carga.es-cae { animation: tr-cae 1.15s ease-in forwards; transform-origin: 20% 100%; }
@keyframes tr-cae {
    0%   { transform: none; }
    12%  { transform: rotate(-6deg); }
    24%  { transform: rotate(5deg); }
    36%  { transform: rotate(-4deg); }
    48%  { transform: rotate(0); opacity: 1; }
    100% { transform: translate(calc(var(--ancho) * .9), 14em) rotate(70deg); opacity: 0; }
}

/* El clon que vuela del acopio al gancho */
.tr-vuelo {
    position: absolute;
    z-index: 9;
    border-radius: .5em;
    background: var(--c, #f6b81a);
    box-shadow: 0 .5em 1em rgba(0, 0, 0, .35);
    transform-origin: center center;
    transition: transform .43s var(--curva), opacity .43s;
    pointer-events: none;
}

.tr-altura {
    position: absolute;
    z-index: 4;
    left: .5em;
    top: .5em;
    padding: .2em .6em;
    border-radius: 1em;
    font-size: .8em;
    font-weight: 800;
    color: var(--tr-tinta);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 .1em .3em rgba(0, 0, 0, .2);
    font-variant-numeric: tabular-nums;
}
.tr-altura b { font-size: 1.15em; color: #b45309; }
.tr-obra.es-ok .tr-altura { animation: tr-suma .5s var(--resorte) .3s; }
@keyframes tr-suma { 50% { transform: scale(1.18); } }
.tr-ayuda {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: .15em;
    transform: translateX(-50%);
    padding: .1em .6em;
    border-radius: 1em;
    font-size: .72em;
    font-weight: 800;
    white-space: nowrap;
    color: #fff;
    background: rgba(0, 0, 0, .35);
}
.tr-ayuda:empty { display: none; }

/* ---------- Acopio: los bloques-respuesta ---------- */
.tr-acopio {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 46%;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5em;
    padding: .15em .1em .3em;
}
.tr-bloque {
    position: relative;
    min-height: 3.3em;
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .45em .6em .45em .5em;
    border-radius: .55em;
    text-align: left;
    color: var(--tr-tinta);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .8)),
        var(--c);
    box-shadow: inset .38em 0 0 var(--c), 0 .24em 0 rgba(0, 0, 0, .28), 0 .35em .7em rgba(0, 0, 0, .25);
    transition: transform .15s, opacity .25s, filter .25s;
    animation: tr-llega .35s var(--resorte) both;
    animation-delay: calc(var(--i) * 45ms);
}
@keyframes tr-llega { from { opacity: 0; transform: translateY(.6em); } }
.tr-bloque:hover:not(:disabled) { transform: translateY(-.12em); }
.tr-bloque:active:not(:disabled) { transform: translateY(.1em); }
.tr-bloque:focus-visible { outline: .16em solid var(--acento-2); outline-offset: .14em; }
.tr-bloque:disabled { cursor: default; }
.tr-bloque.con-lupa { padding-right: 2.6em; }
.tr-bloque .tv-lupita { right: .4em; top: 50%; bottom: auto; margin-top: -.85em; width: 1.7em; height: 1.7em; }
.tr-bloque__letra {
    flex: 0 0 auto;
    min-width: 1.55em; height: 1.55em;
    display: grid; place-items: center;
    border-radius: .3em;
    font-size: .85em;
    font-weight: 900;
    color: #fff;
    background: var(--c);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.tr-bloque__foto { flex: 0 0 auto; width: 2.5em; height: 2.5em; object-fit: cover; border-radius: .3em; }
.tr-bloque__texto {
    min-width: 0;
    font-size: .95em;
    font-weight: 800;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.tr-bloque.es-elegido { opacity: .45; transform: scale(.96); }
.tr-bloque.es-apagado { opacity: .38; filter: saturate(.4); }
.tr-bloque.es-era {
    opacity: 1;
    filter: none;
    box-shadow: inset .38em 0 0 #16a34a, 0 0 0 .2em #16a34a, 0 0 1em rgba(22, 163, 74, .55);
    animation: tr-brilla 1s ease-in-out 2;
}
@keyframes tr-brilla { 50% { transform: scale(1.03); } }

/* ---------- Resultado ---------- */
.tr-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: var(--tr-tinta);
    background: #fffaf0;
    box-shadow: 0 -.4em 1.6em rgba(0, 0, 0, .45);
    transform: translateY(115%);
    visibility: hidden;
    transition: transform .45s var(--curva), visibility 0s .45s;
}
.tr-resultado.es-activo { transform: none; visibility: visible; transition: transform .45s var(--curva); }
.tr-resultado__titulo { font-size: 1.12em; font-weight: 900; }
.tr-resultado.es-ok .tr-resultado__titulo { color: #166534; }
.tr-resultado.es-mal .tr-resultado__titulo { color: #9a3412; }
.tr-resultado__linea { font-size: .92em; }
.tr-resultado__linea b { color: #166534; }
.tr-resultado__nota {
    padding: .4em .65em;
    border-left: .22em solid var(--tr-amarillo);
    border-radius: 0 .35em .35em 0;
    font-size: .88em;
    line-height: 1.3;
    background: #fff4d6;
}
.tr-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);
}

/* ---------- Pantallas anchas: obra a la izquierda ---------- */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
    .tr-cuerpo {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas: "obra cartel" "obra acopio";
        gap: .7em;
    }
    .tr-obra   { grid-area: obra; }
    .tr-cartel { grid-area: cartel; }
    .tr-acopio { grid-area: acopio; max-height: none; align-content: start; grid-template-columns: minmax(0, 1fr); }
    .tr-cartel__pregunta { font-size: 1.25em; }
    .tr-bloque { min-height: 3.4em; font-size: 1.05em; }
    .tr-resultado { left: auto; width: min(30em, 48%); }
}
@media (min-width: 900px) and (min-aspect-ratio: 1/1) and (max-height: 640px) {
    .tr-acopio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Muy bajito */
@media (max-height: 470px) {
    .tv-modo--torre { padding: .45em .6em; gap: .35em; }
    .tr-cuerpo { gap: .35em; }
    .tr-cartel { padding: .55em .6em .4em; }
    .tr-cartel__pregunta { font-size: .9em; }
    .tr-cartel__foto { height: 2.6em; }
    .tr-obra { min-height: 7em; }
    .tr-acopio { gap: .35em; max-height: 42%; }
    .tr-bloque { min-height: 2.5em; padding-top: .3em; padding-bottom: .3em; }
    .tr-bloque__foto { width: 1.9em; height: 1.9em; }
    .tr-bloque__texto { font-size: .85em; -webkit-line-clamp: 2; }
    .tr-ayuda { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tr-nube, .tr-piso.es-nuevo, .tr-carga.es-cae, .tr-bloque, .tr-bloque.es-era, .tr-obra.es-mal, .tr-obra.es-ok .tr-altura { animation: none !important; }
    .tr-carga.es-cae { opacity: 0; }
    .tr-mundo, .tr-carro, .tr-cuerda, .tr-resultado { transition: none; }
}