/* Adivina · una casa de noche que se va iluminando letra a letra hasta prenderse entera (CLÁSICOS IC v0.1) */
.cl-adivina {
  --cl-fondo: #0e1430; --cl-acento: #ffd76a; --cl-acento-sombra: #b98f1c; --cl-papel: #fff8e6; --cl-tinta: #1d1b38;
  --cl-suave: rgba(255,255,255,.09); --cl-borde: rgba(255,224,150,.3); --cl-titulo-color: #ffe9a8;
}
.cl-adivina .cl-fondo {
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 28% 9%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 47% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 78% 26%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 88% 8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 34%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 6% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 44%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 55% 5%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #0b1029 0%, #18225a 55%, #2a2c6e 80%, #1b2a3f 80.5%, #121c2a 100%);
}
.cl-adivina .cl-logo { background-image: url('logo.svg'); }
.cl-adivina.cl-escena-adobe .cl-logo, .cl-adivina.cl-escena-casita .cl-logo { background-image: url('../arte/casa-prendida.webp'); }   /* arte de Franco (19 oct); logo.svg queda para la galería */
.cl-adivina .cl-nombre { text-shadow: 0 0 18px rgba(255,215,106,.55), 0 3px 0 #0b1029; }
.cl-adivina .ad { background: transparent; }
.cl-adivina .ad-top { background: rgba(8,12,34,.55); border-bottom-color: rgba(255,215,106,.22); }
.cl-adivina .ad-globo { background: #fff8e6; color: #1d1b38; }
.cl-adivina .ad-contador { color: #ffd76a; }
/* la barra de luz se vuelve la casa (la barra queda escondida: la casa la lee) */
.cl-adivina .ad-luz { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.cl-ad-casa { width: auto; height: clamp(64px, 22vmin, 180px); flex: 0 0 auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.cl-ad-casa .ven { fill: #2b2f52; transition: fill .35s ease, filter .35s ease; }
.cl-ad-casa .ven.luz { fill: #ffd76a; filter: url(#clAdBrillo); }
.cl-ad-casa .humo { opacity: 0; }
.cl-ad-casa.entera .humo { opacity: .8; animation: cl-ad-humo 2.4s ease-in-out infinite; }
.cl-ad-casa.entera .techo { fill: #6b3d58; }
.cl-ad-casa.entera { animation: cl-ad-late 1s ease; }
@keyframes cl-ad-late { 40% { transform: scale(1.08); } }
@keyframes cl-ad-humo { 0% { transform: translateY(0); opacity: .7; } 100% { transform: translateY(-14px); opacity: 0; } }
.cl-adivina .ad-hueco { border-bottom-color: rgba(255,224,150,.6); text-shadow: 0 0 10px rgba(255,215,106,.4); }
.cl-adivina .ad-hueco.lleno { color: #ffe9a8; border-bottom-color: #ffd76a; }
.cl-adivina .ad-pista-txt { background: rgba(255,248,230,.1); }
/* las letras: ventanitas cálidas */
.cl-adivina .ad-tecla { background: linear-gradient(180deg, #fff3cf, #f2d58c); color: #1d1b38; box-shadow: 0 4px 0 #8a6a1e, 0 0 0 1px rgba(0,0,0,.08); }
.cl-adivina .ad-tecla.esta { background: #ffd76a; color: #1d1b38; box-shadow: 0 0 14px rgba(255,215,106,.85); }
.cl-adivina .ad-tecla.no { background: rgba(255,255,255,.07); color: rgba(255,255,255,.35); box-shadow: none; }
.cl-adivina .ad-ayuda { background: rgba(255,215,106,.14); border-color: rgba(255,215,106,.6); }
@media (prefers-reduced-motion: reduce) { .cl-ad-casa, .cl-ad-casa.entera .humo { animation: none; } .cl-ad-casa .ven { transition: none; } }

/* CLÁSICOS IC v0.2 · el cielo con vida: la luna cruza despacio y las luciérnagas titilan cerca del piso */
.cl-adivina .cl-fondo { overflow: hidden; }
.cl-ad-luna { position: absolute; top: 9%; left: -8%; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fffbe6 55%, #f3e6b0 100%);
  box-shadow: 0 0 30px 10px rgba(255,247,209,.35); animation: cl-ad-luna 140s linear infinite; animation-delay: -95s; }
@keyframes cl-ad-luna { 0% { transform: translate(0, 18px); } 50% { transform: translate(56vw, -6px); } 100% { transform: translate(112vw, 18px); } }
.cl-ad-luci { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #e9ff8a; box-shadow: 0 0 10px 4px rgba(214,255,110,.55); opacity: 0;
  animation: cl-ad-luci 5.5s ease-in-out infinite; }
@keyframes cl-ad-luci { 0%, 100% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .9; } 50% { opacity: .2; transform: translate(14px, -10px); } 70% { opacity: .85; transform: translate(4px, -18px); } }
/* las casas de casa */
.cl-ad-adobe .ven, .cl-ad-madera .ven, .cl-ad-balcon .ven { fill: #2b2f52; }
.cl-ad-adobe .ven.luz, .cl-ad-madera .ven.luz, .cl-ad-balcon .ven.luz { fill: #ffd76a; }
.cl-ad-adobe.entera .techo { fill: #b44a2a; } .cl-ad-balcon.entera .techo { fill: #a83a5c; } .cl-ad-madera.entera .techo { fill: #6c7290; }
/* la tarjeta del final: la casa prendida */
.cl-ad-tarjeta { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(120% 120% at 70% 0%, #2a2c6e, #0e1430 70%); }
.cl-ad-fin { height: 92% !important; animation: cl-ad-late 1.4s ease .3s; }
@media (prefers-reduced-motion: reduce) { .cl-ad-luna, .cl-ad-luci { animation: none; } .cl-ad-luna { left: 76%; } .cl-ad-luci { opacity: .6; } }
.cl-calma .cl-ad-luna { left: 76%; } .cl-calma .cl-ad-luci { opacity: .5; }

/* la casa de Franco (arte de verdad, 19 oct): dos imágenes, la prendida aparece con la palabra */
.cl-ad-arte { position: relative; aspect-ratio: 1; }
.cl-ad-arte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.cl-ad-arte .cl-ad-prendida { opacity: var(--luz, 0); transition: opacity .45s ease, filter .45s ease; }
.cl-ad-arte.entera .cl-ad-prendida { opacity: 1; filter: drop-shadow(0 0 14px rgba(255,215,106,.85)); }
@media (prefers-reduced-motion: reduce) { .cl-ad-arte .cl-ad-prendida { transition: none; } }
.cl-calma .cl-ad-arte .cl-ad-prendida { transition: none; }
#cDibujo .cl-ad-arte { height: 100%; width: auto; max-height: 100%; }