/* =============================================================================
   New Trivia — modo "El Baldazo"                                       v1.0.0
   -----------------------------------------------------------------------------
   Un patio con tendedero: las respuestas cuelgan de sogas de colores con
   broches de madera, y arriba el balde que se va llenando sobre Tito.
   Humor de patio, nada de peligro: lo peor que pasa es mojarse.
   ============================================================================= */

.tv-modo--baldazo {
    --escena-ancho: 62em;
    --escena-alto: 48em;
    max-width: var(--escena-ancho);
    max-height: var(--escena-alto);
    gap: .7em;

    --bd-cielo-1:  #bfe7ff;
    --bd-cielo-2:  #e9f7ff;
    --bd-pared:    #f6e7c8;
    --bd-madera:   #b07a45;
    --bd-madera-2: #7a4f28;
    --bd-papel:    #fffaf0;
    --bd-tinta:    #26303a;
    --bd-tinta-2:  #5d6b78;
    --bd-agua:     #3aa0e6;
    --bd-ok:       #22a35a;
}

.bd-mesa {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .7em;
}

/* ---------- La consigna (la pregunta) ---------- */
.bd-manual {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: .4em;
    padding: .85em 1em .8em;
    border-radius: .55em;
    color: var(--bd-tinta);
    background: var(--bd-papel);
    box-shadow: 0 .25em 0 rgba(0, 0, 0, .18), 0 .5em 1.2em rgba(0, 0, 0, .3);
    animation: bd-entra .4s var(--curva) both;
}
@keyframes bd-entra { from { opacity: 0; transform: translateY(.6em); } }
.bd-manual__rotulo {
    align-self: flex-start;
    padding: .14em .6em;
    border-radius: 1em;
    font-size: .62em;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background: var(--bd-agua);
}
.bd-manual__foto {
    max-height: 8em;
    max-width: 100%;
    width: auto;
    align-self: center;
    object-fit: contain;
    border-radius: .3em;
    box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0, 0, 0, .25);
    cursor: zoom-in;
}
.bd-manual__pregunta {
    margin: 0;
    font-size: 1.2em;
    font-weight: 800;
    line-height: 1.22;
    text-wrap: balance;
}
.bd-manual__pregunta.es-largo  { font-size: 1.05em; }
.bd-manual__pregunta.es-xlargo { font-size: .93em; text-wrap: pretty; }
.bd-manual__regla { margin: 0; font-size: .78em; font-weight: 700; color: var(--bd-tinta-2); }

/* ---------- El patio ---------- */
.bd-patio {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .35em;
    padding: .6em .7em .55em;
    border-radius: .9em;
    color: var(--bd-tinta);
    background:
        linear-gradient(180deg, var(--bd-cielo-1), var(--bd-cielo-2) 38%, var(--bd-pared) 38.2%, #efd9ad);
    box-shadow: inset 0 0 0 .22em rgba(255, 255, 255, .6), 0 .8em 1.8em rgba(0, 0, 0, .35);
    overflow: hidden;
    animation: bd-entra .45s .05s var(--curva) both;
}

.bd-escena {
    position: relative;
    flex: 0 0 auto;
    min-height: 5.5em;
    height: 30%;
    max-height: 12em;
    display: flex;
    justify-content: center;
}
.bd-dibujo { height: 100%; width: auto; max-width: 100%; overflow: visible; }
.bd-viga { fill: var(--bd-madera); stroke: var(--bd-madera-2); stroke-width: 1.5; }
.bd-canilla { fill: none; stroke: #8a9aa8; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.bd-gotita { fill: var(--bd-agua); animation: bd-gotea 1.1s ease-in infinite; }
@keyframes bd-gotea { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(26px); opacity: 1; } 100% { transform: translateY(28px); opacity: 0; } }
.bd-soga {
    stroke-width: 2.6;
    stroke-linecap: round;
    transition: opacity .35s, stroke-dashoffset .35s;
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
}
.bd-soga.es-cortada { stroke-dashoffset: 60; opacity: .15; }
.bd-balde { transform-box: view-box; transform-origin: 120px 52px; transition: transform .25s; }
.bd-patio.es-mojado .bd-balde { transform-origin: 120px 79px; }
.bd-asa { fill: none; stroke: #6b7782; stroke-width: 2.4; }
.bd-cuerpo { fill: #c9d4dd; stroke: #6b7782; stroke-width: 2; }
.bd-agua { fill: var(--bd-agua); opacity: .85; transition: y .3s linear; }
.bd-borde { stroke: #6b7782; stroke-width: 3; stroke-linecap: round; }
.bd-aro { stroke: #9aa7b2; stroke-width: 1.4; fill: none; }
.bd-chorro { fill: var(--bd-agua); opacity: 0; }
.bd-pj__cuerpo { fill: #ffc94d; stroke: #d99a1c; stroke-width: 1.5; }
.bd-pj__ojo { fill: #2b2b33; }
.bd-pj__brillo { fill: #fff; }
.bd-pj__boca { fill: none; stroke: #2b2b33; stroke-width: 2; stroke-linecap: round; }
.bd-pj__risa, .bd-pj__mueca { fill: none; stroke: #2b2b33; stroke-width: 2; stroke-linecap: round; opacity: 0; }
.bd-pj__gotas { fill: #8fd0ff; stroke: #3aa0e6; stroke-width: .8; opacity: 0; }

/* Poco tiempo: el balde tiembla y Tito pone cara de preocupado */
.bd-patio.es-poco .bd-balde { animation: bd-tiembla .5s ease-in-out infinite; }
@keyframes bd-tiembla { 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
.bd-patio.es-poco .bd-pj__boca { opacity: 0; }
.bd-patio.es-poco .bd-pj__mueca { opacity: 1; }

/* Se salvó */
.bd-patio.es-salvado .bd-balde { animation: bd-hamaca 1.2s ease-in-out 2; }
@keyframes bd-hamaca { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.bd-patio.es-salvado .bd-pj__boca, .bd-patio.es-salvado .bd-pj__mueca { opacity: 0; }
.bd-patio.es-salvado .bd-pj__risa { opacity: 1; }
.bd-patio.es-salvado .bd-pj { animation: bd-salta .5s ease-out 2; transform-box: fill-box; transform-origin: center bottom; }
@keyframes bd-salta { 40% { transform: translateY(-6px) scale(1.04, .96); } }
.bd-patio.es-salvado .bd-estado { color: var(--bd-ok); }

/* Baldazo */
.bd-patio.es-mojado .bd-balde { transform: translate(0, 14px) rotate(168deg); transition: transform .45s cubic-bezier(.5, -.3, .6, 1.3); animation: none; }
.bd-patio.es-mojado .bd-chorro { animation: bd-chorro .9s .3s ease-out both; }
@keyframes bd-chorro { 0% { opacity: 0; } 20% { opacity: .9; } 100% { opacity: 0; } }
.bd-patio.es-mojado .bd-pj__cuerpo { fill: #b9dcf5; stroke: #3aa0e6; transition: fill .3s .5s, stroke .3s .5s; }
.bd-patio.es-mojado .bd-pj__gotas { opacity: 1; transition: opacity .3s .6s; }
.bd-patio.es-mojado .bd-pj__boca, .bd-patio.es-mojado .bd-pj__risa { opacity: 0; }
.bd-patio.es-mojado .bd-pj__mueca { opacity: 1; }
.bd-patio.es-mojado .bd-estado { color: #1c6fb0; }

.bd-marcador {
    position: absolute;
    right: .1em;
    top: .1em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1em;
}
.bd-visor {
    padding: .12em .55em;
    border-radius: 1em;
    font-size: .9em;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: var(--bd-agua);
}
.bd-visor:empty { display: none; }
.bd-patio.es-poco .bd-visor { background: #e05a2a; }
.bd-estado { font-size: .95em; font-weight: 900; color: var(--bd-tinta); }

/* ---------- El tendedero ---------- */
.bd-cables {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* "safe": si no entran todas, se ordenan desde arriba y se puede deslizar,
       en vez de encimarse */
    justify-content: safe center;
    gap: .3em;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.bd-cable {
    position: relative;
    /* Cada soga mide lo que necesita su etiqueta: así no se pisan */
    flex: 0 0 auto;
    min-height: 2.8em;
    padding-block: .1em .35em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.6em;
    border-radius: .4em;
    cursor: pointer;
    outline: none;
    transition: background .15s;
    animation: bd-soga-entra .4s var(--curva) both;
    animation-delay: calc(.1s + var(--i, 0) * 60ms);
}
@keyframes bd-soga-entra { from { opacity: 0; transform: translateX(-.6em); } }
.bd-cable:hover:not(:disabled) { background: rgba(255, 255, 255, .35); }
.bd-cable:focus-visible { box-shadow: 0 0 0 .16em var(--bd-agua); }
.bd-cable:disabled { cursor: default; }

/* Postes de madera */
.bd-borne {
    position: absolute;
    top: 50%;
    width: .7em; height: 1.9em;
    margin-top: -.95em;
    border-radius: .2em;
    background: linear-gradient(90deg, #c08a52, var(--bd-madera) 50%, var(--bd-madera-2));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    z-index: 2;
}
.bd-borne--izq { left: .4em; }
.bd-borne--der { right: .4em; }

.bd-hilo {
    position: absolute;
    left: .9em; right: .9em;
    top: 50%;
    height: .42em;
    margin-top: -.21em;
    z-index: 1;
}
.bd-hilo__mitad {
    position: absolute;
    top: 0; bottom: 0;
    border-radius: .21em;
    background:
        repeating-linear-gradient(120deg, rgba(255, 255, 255, .35) 0 .18em, transparent .18em .36em),
        linear-gradient(180deg, var(--luz), var(--color) 55%, rgba(0, 0, 0, .35)),
        var(--color);
    box-shadow: 0 .15em .15em rgba(0, 0, 0, .25);
    transition: transform .55s cubic-bezier(.3, 1.6, .5, 1), width .2s;
}
.bd-hilo__mitad--izq { left: 0; width: 50%; transform-origin: left center; }
.bd-hilo__mitad--der { right: 0; width: 50%; transform-origin: right center; }
.bd-cable.es-cortado .bd-hilo__mitad--izq { width: calc(var(--corte) - .3em); transform: rotate(12deg); }
.bd-cable.es-cortado .bd-hilo__mitad--der { width: calc(100% - var(--corte) - .3em); transform: rotate(-12deg); }

/* Etiqueta colgada con un broche */
.bd-etiqueta {
    position: relative;
    z-index: 3;
    max-width: 82%;
    display: inline-flex;
    align-items: center;
    gap: .45em;
    margin-top: .9em;
    padding: .32em .7em .32em .4em;
    border-radius: .3em;
    color: var(--bd-tinta);
    background: #fff;
    box-shadow: 0 .15em .3em rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .06);
    text-align: left;
    transform-origin: 50% -.9em;
    transition: opacity .3s, transform .5s var(--curva), filter .3s;
}
/* El broche de madera */
.bd-etiqueta::before {
    content: "";
    position: absolute;
    left: 50%; top: -1.05em;
    width: .42em; height: 1.25em;
    margin-left: -.21em;
    border-radius: .12em;
    background: linear-gradient(90deg, #e2b783, #c99258);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.bd-etiqueta__letra {
    flex: 0 0 auto;
    min-width: 1.35em; height: 1.35em;
    display: grid; place-items: center;
    border-radius: .25em;
    font-size: .78em;
    font-weight: 900;
    color: #fff;
    background: var(--color);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
.bd-etiqueta__texto {
    font-size: .95em;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
    /* Hasta tres renglones; el resto se lee con la lupa */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.bd-etiqueta.con-lupa { padding-right: 2.1em; }
.bd-etiqueta .tv-lupita { right: .25em; bottom: 50%; margin-bottom: -.95em; width: 1.7em; height: 1.7em; }
.bd-etiqueta__texto.es-largo { font-size: .82em; }
.bd-etiqueta__foto { height: 2.6em; width: 2.6em; object-fit: cover; border-radius: .25em; }
.bd-cables.es-imagenes .bd-etiqueta__foto { height: 3.5em; width: 3.5em; }
/* Soga cortada: la etiqueta se cae al pasto */
.bd-cable.es-cortado .bd-etiqueta {
    opacity: .45;
    transform: translateY(.6em) rotate(-6deg);
    filter: grayscale(.85);
}
.bd-cable.es-cortado .bd-etiqueta__texto { text-decoration: line-through; text-decoration-thickness: .12em; }
.bd-cable.es-era .bd-etiqueta { opacity: 1; filter: none; box-shadow: 0 0 0 .18em var(--bd-ok), 0 0 1em rgba(34, 163, 90, .45); }

.bd-chispa { position: absolute; top: 50%; width: 0; height: 0; z-index: 4; pointer-events: none; }
.bd-chispa i {
    position: absolute;
    left: -2px; top: -2px;
    width: 5px; height: 2px;
    border-radius: 1px;
    background: var(--color, #999);
    animation: bd-hilacha .5s ease-out forwards;
}
@keyframes bd-hilacha { to { transform: translate(var(--dx), var(--dy)) rotate(80deg); opacity: 0; } }

.bd-pie { display: flex; justify-content: center; }
.bd-quedan { font-size: .74em; font-weight: 800; color: var(--bd-tinta-2); }

/* ---------- Splash sobre toda la pantalla ---------- */
.bd-flash {
    position: absolute;
    inset: -2em;
    z-index: 8;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .7) 0 1.2em, transparent 1.3em),
        radial-gradient(circle at 70% 35%, rgba(255, 255, 255, .6) 0 .8em, transparent .9em),
        linear-gradient(180deg, rgba(58, 160, 230, .75), rgba(58, 160, 230, .35));
}
.bd-flash.es-activo { animation: bd-ola 1.1s .35s ease-out both; }
@keyframes bd-ola {
    0%   { opacity: 0; transform: translateY(-40%); }
    25%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(15%); }
}
.tv-modo--baldazo.es-splash .bd-mesa { animation: bd-sacudon .5s .3s ease-out; }
@keyframes bd-sacudon { 30% { transform: translateY(.3em); } 60% { transform: translateY(-.15em); } }
.tv-modo--baldazo.es-sale .bd-mesa { opacity: .3; transition: opacity .18s; }

/* ---------- Resultado ---------- */
.bd-resultado {
    position: absolute;
    left: .6em; right: .6em; bottom: .6em;
    z-index: 9;
    max-height: 70%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: .45em;
    padding: .9em 1em;
    border-radius: .8em;
    color: var(--bd-tinta);
    background: var(--bd-papel);
    box-shadow: 0 -.4em 1.6em rgba(0, 0, 0, .35);
    transform: translateY(115%);
    visibility: hidden;
    transition: transform .45s var(--curva), visibility 0s .45s;
}
.bd-resultado.es-activo { transform: none; visibility: visible; transition: transform .45s var(--curva); }
.bd-resultado__titulo { font-size: 1.15em; font-weight: 900; }
.bd-resultado.es-ok .bd-resultado__titulo { color: #166534; }
.bd-resultado.es-mal .bd-resultado__titulo { color: #1c5f99; }
.bd-resultado__linea { font-size: .92em; }
.bd-resultado__linea b { color: #166534; }
.bd-resultado__nota {
    padding: .4em .65em;
    border-left: .22em solid var(--bd-agua);
    border-radius: 0 .35em .35em 0;
    font-size: .88em;
    line-height: 1.3;
    background: #eef7fd;
}
.bd-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);
}

/* ---------- Tamaños ---------- */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
    .bd-mesa { flex-direction: row; align-items: stretch; gap: 1.2em; }
    .bd-manual { flex: 0 0 36%; align-self: center; padding: 1.4em 1.5em 1.5em; }
    .bd-manual__pregunta { font-size: 1.45em; }
    .bd-manual__pregunta.es-largo { font-size: 1.22em; }
    .bd-manual__pregunta.es-xlargo { font-size: 1.05em; }
    .bd-manual__foto { max-height: 13em; }
    .bd-patio { flex: 1 1 auto; }
    .bd-resultado { left: auto; width: min(30em, 60%); }
}
@media (max-height: 470px) {
    .tv-modo--baldazo { gap: .4em; padding: .5em .7em; }
    .bd-mesa { gap: .4em; }
    .bd-manual { padding: .5em .7em; gap: .25em; }
    .bd-manual__rotulo, .bd-manual__regla, .bd-pie { display: none; }
    .bd-manual__pregunta { font-size: 1em; }
    .bd-manual__foto { max-height: 4em; }
    .bd-patio { padding: .4em .5em; gap: .2em; }
    .bd-escena { min-height: 4.2em; height: 28%; }
    .bd-cable { min-height: 2.4em; }
    .bd-etiqueta { margin-top: .7em; }
}
@media (prefers-reduced-motion: reduce) {
    .bd-manual, .bd-patio, .bd-cable, .bd-gotita, .bd-patio.es-poco .bd-balde,
    .bd-patio.es-salvado .bd-balde, .bd-patio.es-salvado .bd-pj, .bd-patio.es-mojado .bd-chorro { animation: none !important; }
    .bd-hilo__mitad, .bd-etiqueta, .bd-resultado, .bd-balde { transition: none; }
}
/* Volcado: el agua ya cayó sobre Tito */
.bd-patio.es-mojado .bd-agua { opacity: 0; transition: opacity .2s .45s; }

/* Celular: miniaturas un poco más chicas para que entren más sogas */
@media (max-width: 600px) {
    .bd-cables.es-imagenes .bd-etiqueta__foto { height: 2.8em; width: 2.8em; }
    .bd-etiqueta { max-width: 88%; }
}

/* Celular parado: la consigna con la imagen al costado, para dejarle lugar a las sogas */
@media (max-width: 600px) {
    .bd-manual {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "rot rot" "foto preg" "foto regla";
        column-gap: .7em;
        row-gap: .3em;
        align-items: start;
        padding: .7em .8em;
    }
    .bd-manual__rotulo { grid-area: rot; }
    .bd-manual__foto { grid-area: foto; max-height: 5.2em; max-width: 6.5em; align-self: center; }
    .bd-manual__pregunta { grid-area: preg; font-size: 1.05em; }
    .bd-manual__regla { grid-area: regla; font-size: .72em; }
    .bd-escena { min-height: 4.8em; height: 22%; }
}