/* La Sopa · letras de madera sobre una mesa; la palabra encontrada queda dibujada como un trazo de luz (CLÁSICOS IC v0.1) */
.cl-la-sopa {
  --cl-fondo: #5a3a22; --cl-acento: #ffcf5c; --cl-acento-sombra: #b9852a; --cl-papel: #fff6e3; --cl-tinta: #3a2414;
  --cl-suave: rgba(255,240,215,.14); --cl-borde: rgba(255,226,180,.35); --cl-titulo-color: #fff1d6;
  --cl-titulo: "Baloo 2", Georgia, serif;
}
/* la mesa: vetas de madera en capas, con luz de lámpara arriba */
.cl-la-sopa .cl-fondo {
  background:
    radial-gradient(90% 70% at 50% 18%, rgba(255,214,150,.35), transparent 65%),
    repeating-linear-gradient(92deg, rgba(0,0,0,.06) 0 2px, transparent 2px 9px, rgba(255,255,255,.035) 9px 11px, transparent 11px 23px),
    repeating-linear-gradient(88deg, rgba(60,30,10,.18) 0 1px, transparent 1px 47px),
    linear-gradient(180deg, #7a5233 0%, #5a3a22 55%, #3f2716 100%);
}
.cl-la-sopa .cl-logo { background-image: url('../arte/fichas.webp'); }   /* arte de Franco (19 oct); logo.svg queda para la galería */
.cl-la-sopa .cl-nombre { text-shadow: 0 3px 0 #3a2414, 0 0 24px rgba(255,207,92,.35); }
/* el juego, sobre la misma mesa */
.cl-la-sopa .sp { background: transparent; }
.cl-la-sopa .sp-top { background: rgba(40,22,10,.55); border-bottom-color: rgba(255,207,92,.25); }
.cl-la-sopa .sp-globo { background: #fff6e3; color: #3a2414; }
.cl-la-sopa .sp-contador { color: #ffcf5c; }
.cl-la-sopa .sp-mesa { position: relative; }
.cl-la-sopa .sp-grilla { background: linear-gradient(180deg, #8a5c35, #6e4527); box-shadow: 0 10px 0 #3f2716, inset 0 2px 0 rgba(255,255,255,.18); gap: 4px; padding: 8px; }
/* cada letra, una ficha de madera con relieve */
.cl-la-sopa .sp-celda {
  background: linear-gradient(160deg, #f4d9a8 0%, #e2b97a 55%, #cf9f5d 100%); color: #3a2414; border-radius: 9px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(120,70,30,.35), 0 2px 0 rgba(0,0,0,.25);
  font-family: "Baloo 2", Georgia, serif; transition: transform .12s ease;
}
.cl-la-sopa .sp-celda.sel { background: linear-gradient(160deg, #fff1c9, #ffd57a); color: #3a2414; transform: translateY(-2px) scale(1.04); box-shadow: 0 0 0 3px #fff3c4, 0 4px 10px rgba(0,0,0,.35); }
.cl-la-sopa .sp-celda.hallada { background: linear-gradient(160deg, #fff4d6, #f3cf8a); color: #6b3d00; }
.cl-la-sopa .sp-celda.no { background: linear-gradient(160deg, #e7b7a0, #cf8f75); color: #3a2414; animation: cl-sopa-no .3s ease; }
@keyframes cl-sopa-no { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.cl-la-sopa .sp-lista { gap: 8px; }
.cl-la-sopa .sp-pal { background: #fff6e3; color: #3a2414; border-color: rgba(58,36,20,.15); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.cl-la-sopa .sp-pal.hallada { background: linear-gradient(90deg, #ffe7a3, #ffcf5c); color: #3a2414; }
.cl-la-sopa .sp-ayuda { background: rgba(255,207,92,.18); border-color: rgba(255,207,92,.7); }
/* el trazo de luz */
.cl-sopa-luz { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 3; }
.cl-sopa-luz line { stroke-linecap: round; }
.cl-sopa-luz .halo { stroke: rgba(255,214,120,.55); filter: blur(6px); }
.cl-sopa-luz .nucleo { stroke: rgba(255,252,236,.95); }
.cl-sopa-luz .nueva { animation: cl-sopa-traza .7s ease-out both; }
@keyframes cl-sopa-traza { from { stroke-dashoffset: var(--largo); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .cl-sopa-luz .nueva, .cl-la-sopa .sp-celda.no { animation: none; } .cl-la-sopa .sp-celda { transition: none; } }

/* CLÁSICOS IC v0.2 · el fondo con vida: la luz de una ventana que pasa despacio por la mesa */
.cl-la-sopa .cl-fondo { overflow: hidden; }
.cl-sopa-ventana { position: absolute; top: -20%; left: -40%; width: 70%; height: 140%; pointer-events: none; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,236,190,.16) 20%, rgba(255,236,190,.08) 32%, transparent 34%, transparent 40%, rgba(255,236,190,.14) 42%, rgba(255,236,190,.06) 60%, transparent);
  animation: cl-sopa-ventana 38s ease-in-out infinite alternate; }
@keyframes cl-sopa-ventana { from { transform: translateX(0) rotate(18deg); } to { transform: translateX(110%) rotate(18deg); } }
/* el mantel de cuadros de casa (Nicaragua y México): asoma por los bordes de la mesa */
.cl-escena-mantel .cl-fondo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 15%; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg, rgba(200,40,40,.55) 0 18px, transparent 18px 36px), repeating-linear-gradient(0deg, rgba(200,40,40,.55) 0 18px, rgba(255,255,255,.75) 18px 36px);
  -webkit-mask: linear-gradient(180deg, transparent, #000 40%); mask: linear-gradient(180deg, transparent, #000 40%); }
.cl-lugar-mx.cl-escena-mantel .cl-fondo::after { background: repeating-linear-gradient(90deg, rgba(20,140,110,.5) 0 18px, transparent 18px 36px), repeating-linear-gradient(0deg, rgba(20,140,110,.5) 0 18px, rgba(255,255,255,.75) 18px 36px); }
/* el tema de la sopa */
.cl-sopa-tema { position: absolute; z-index: 4; top: -15px; left: 50%; transform: translateX(-50%); padding: 3px 14px; box-shadow: 0 3px 0 #b9852a; border-radius: 999px; background: #ffcf5c; color: #3a2414; font-weight: 800; font-size: 18px; white-space: nowrap; }
/* el dibujito que sube */
.cl-sopa-sube { position: fixed; z-index: 21; font-size: 52px; line-height: 1; margin: -26px 0 0 -26px; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
  animation: cl-sopa-sube 1.25s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes cl-sopa-sube { 0% { transform: scale(.3); opacity: 0; } 25% { transform: translateY(-10px) scale(1.15); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-90px) scale(.9); opacity: 0; } }
/* la tarjeta del final: los dibujitos en una tablita */
.cl-sopa-tarjeta { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px; box-sizing: border-box;
  background: linear-gradient(160deg, #e2b97a, #cf9f5d); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -4px 0 rgba(120,70,30,.35); }
.cl-sopa-tarjeta span { font-size: clamp(32px, 6vh, 46px); line-height: 1; animation: cl-sopa-salta .7s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes cl-sopa-salta { from { transform: translateY(20px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cl-sopa-ventana, .cl-sopa-tarjeta span { animation: none; } .cl-sopa-sube { display: none; } }
/* arte de Franco (19 oct): cada letra sobre la ficha de madera caramelo (lo elegido, lo hallado y lo que no va siguen con su color) */
.cl-la-sopa .sp-celda:not(.sel):not(.hallada):not(.no) { background: url('../arte/ficha.webp') center / 100% 100% no-repeat; box-shadow: none; }