/* =============================================================================
   New Trivia — modo "Las Puertas"                                      v1.0.0
   -----------------------------------------------------------------------------
   El salón de un castillo dibujado en canvas. Alrededor, en HTML: el cartel
   con la pregunta, el globo con la respuesta completa de la puerta donde
   está Tito y los controles táctiles.
   ============================================================================= */

.tv-modo--puertas {
    --escena-ancho: 64em;
    --escena-alto: 50em;
    max-width: var(--escena-ancho);
    max-height: var(--escena-alto);
    gap: .55em;
}
.tv-modo--puertas.es-entra .pt-escenario { animation: pt-iris .45s var(--curva) both; }
@keyframes pt-iris { from { clip-path: circle(0% at 10% 90%); } to { clip-path: circle(150% at 10% 90%); } }
.tv-modo--puertas.es-sale .pt-escenario { opacity: .3; transition: opacity .2s; }

/* ---------- Cartel con la pregunta ---------- */
.pt-cartel {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .7em;
    padding: .7em .9em;
    border-radius: .7em;
    color: #2b2116;
    background: linear-gradient(180deg, #fff6dc, #f1dfb2);
    box-shadow: 0 .22em 0 #a07a45, 0 .45em 1em rgba(0, 0, 0, .3);
}
.pt-cartel__foto {
    flex: 0 0 auto;
    height: 4.6em;          /* alto fijo: el cartel no cambia de tamaño cuando carga la imagen */
    max-height: 4.6em;
    max-width: 30%;
    width: auto;
    object-fit: contain;
    border-radius: .35em;
    cursor: zoom-in;
}
.pt-cartel__textos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .45em; }
.pt-cartel__pregunta { margin: 0; font-size: 1.1em; font-weight: 800; line-height: 1.22; text-wrap: balance; }
.pt-cartel__pregunta.es-largo  { font-size: .98em; }
.pt-cartel__pregunta.es-xlargo { font-size: .88em; text-wrap: pretty; }
.pt-estrellas {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: .2em .6em;
    border-radius: 1em;
    font-size: .8em;
    font-weight: 900;
    color: #7a5a00;
    background: #ffe27a;
    font-variant-numeric: tabular-nums;
}
.pt-estrellas.es-suma { animation: pt-suma .4s var(--resorte); }
@keyframes pt-suma { 50% { transform: scale(1.3); } }

.pt-reloj { height: .38em; border-radius: 1em; background: rgba(0, 0, 0, .12); overflow: hidden; }
.pt-reloj__barra { height: 100%; background: linear-gradient(90deg, #7b5cff, #b39dff); transform-origin: left center; }
.pt-reloj.es-poco .pt-reloj__barra { background: linear-gradient(90deg, #ff9f43, #ef4444); }
.pt-reloj.es-libre { display: none; }

/* ---------- Escenario ---------- */
.pt-escenario {
    position: relative;
    flex: 1 1 auto;
    min-height: 9em;
    border-radius: .8em;
    overflow: hidden;
    background: #3a2f52;
    box-shadow: inset 0 0 0 .2em rgba(255, 255, 255, .08), 0 .6em 1.4em rgba(0, 0, 0, .4);
    touch-action: none;
}
.pt-lienzo { position: absolute; left: 0; top: 0; display: block; image-rendering: auto; }

/* Globo con la respuesta completa, sobre la puerta donde está Tito */
.pt-globo {
    position: absolute;
    z-index: 3;
    width: max-content;
    max-width: min(18em, 88%);
    display: none;
    align-items: center;
    gap: .45em;
    padding: .45em .6em;
    border-radius: .6em;
    color: #2b2116;
    background: #fffbe8;
    box-shadow: 0 0 0 .14em #ffd84a, 0 .35em .8em rgba(0, 0, 0, .4);
    text-align: left;
    transform: translate(calc(-50% + var(--corrimiento, 0px)), -100%);
}
.pt-globo__ver { display: flex; align-items: center; gap: .45em; min-width: 0; cursor: zoom-in; }
.pt-globo.es-visible { display: flex; animation: pt-globo .2s var(--resorte); }
.pt-globo.es-abajo { transform: translate(calc(-50% + var(--corrimiento, 0px)), 0); }
@keyframes pt-globo { from { opacity: 0; scale: .85; } }
.pt-globo__letra {
    flex: 0 0 auto;
    min-width: 1.4em; height: 1.4em;
    display: grid; place-items: center;
    border-radius: .3em;
    font-size: .8em;
    font-weight: 900;
    color: #fff;
}
.pt-globo__foto { width: 2.6em; height: 2.6em; object-fit: cover; border-radius: .3em; }
.pt-globo__texto { font-size: .92em; font-weight: 800; line-height: 1.2; overflow-wrap: break-word; min-width: 0; }
.pt-globo__accion {
    flex: 0 0 auto;
    min-height: 2.2em;
    padding: .3em .7em;
    border-radius: .5em;
    font-size: .8em;
    font-weight: 900;
    color: #fff;
    background: #2e9d5b;
    white-space: nowrap;
}

/* ---------- Controles ---------- */
.pt-controles {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .6em;
}
.pt-controles__grupo { display: flex; gap: .45em; }
.pt-control {
    min-width: 3.2em;
    min-height: 3em;
    border-radius: .8em;
    font-weight: 900;
    font-size: 1em;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 .2em 0 rgba(0, 0, 0, .35);
    -webkit-touch-callout: none;
    touch-action: none;
    user-select: none;
}
.pt-control.es-apretado, .pt-control:active { transform: translateY(.12em); background: rgba(255, 255, 255, .26); }
.pt-control--entrar {
    flex: 1 1 auto;
    color: #102a19;
    background: linear-gradient(180deg, #b8ffcf, #3fbf6f);
    box-shadow: 0 .22em 0 #217a43;
}
.pt-control--entrar:disabled { opacity: .35; cursor: default; filter: saturate(.3); }
.pt-control--saltar {
    min-width: 5em;
    color: #2a1f00;
    background: linear-gradient(180deg, #fff1a8, #ffcb2e);
    box-shadow: 0 .22em 0 #a07a00;
}
.pt-teclas {
    flex: 0 0 auto;
    text-align: center;
    font-size: .74em;
    font-weight: 700;
    color: var(--tinta-2);
}
/* Con mouse y teclado, los controles grandes no hacen falta: queda la ayuda */
@media (hover: hover) and (pointer: fine) {
    .pt-control { min-height: 2.4em; font-size: .9em; }
}
@media (hover: none), (pointer: coarse) {
    .pt-teclas { display: none; }
}

/* ---------- Resultado ---------- */
.pt-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: #2b2116;
    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;
}
.pt-resultado.es-activo { transform: none; visibility: visible; transition: transform .45s var(--curva); }
.pt-resultado__titulo { font-size: 1.12em; font-weight: 900; }
.pt-resultado.es-ok .pt-resultado__titulo { color: #166534; }
.pt-resultado.es-mal .pt-resultado__titulo { color: #9f1d12; }
.pt-resultado__linea { font-size: .92em; }
.pt-resultado__linea b { color: #166534; }
.pt-resultado__nota {
    padding: .4em .65em;
    border-left: .22em solid #7b5cff;
    border-radius: 0 .35em .35em 0;
    font-size: .88em;
    line-height: 1.3;
    background: #f3efff;
}
.pt-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) {
    .pt-cartel__pregunta { font-size: 1.3em; }
    .pt-resultado { left: auto; width: min(30em, 60%); }
}
@media (max-height: 470px) {
    .tv-modo--puertas { padding: .45em .6em; gap: .35em; }
    .pt-cartel { padding: .4em .6em; }
    .pt-cartel__pregunta { font-size: .9em; }
    .pt-cartel__foto { max-height: 2.6em; }
    .pt-control { min-height: 2.3em; min-width: 2.6em; }
    .pt-teclas { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tv-modo--puertas.es-entra .pt-escenario, .pt-globo.es-visible, .pt-estrellas.es-suma { animation: none; }
    .pt-resultado { transition: none; }
}

@media (max-height: 470px) {
    .pt-cartel__foto { height: 2.6em; }
}