/* Sopa de letras. El tamaño de la sopa se calcula en tv.js (una vez por ronda). Las palabras
   encontradas se marcan con una pastilla del color de quien la encontró. Solo transform y opacity. */
.sp { background: #ECEEFF; color: var(--tg-ink); }
.sp p, .sp ul { margin: 0; padding: 0; list-style: none; }
.sp-centro { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.sp-tablero { position: relative; background: #fff; border-radius: .6rem; flex: none; }
.sp-marcas, .sp-letras { position: absolute; inset: 0; }
.sp-letras { display: grid; }
.sp-letras span { display: flex; align-items: center; justify-content: center; font-weight: var(--tg-w-strong); line-height: 1; }
.sp-marca { position: absolute; }
.sp-marca__tinta { display: block; width: 100%; height: 100%; border-radius: 999px; background: var(--c); opacity: .5; transform-origin: left center; animation: sp-traza .4s var(--tg-ease) both; }
@keyframes sp-traza { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sp-marca--falta .sp-marca__tinta { background: transparent; border: .12rem dashed var(--c); opacity: 1; box-sizing: border-box; }

/* Infantil: sopa pequeña a la izquierda; lista con dibujos a la derecha */
.sp--nino .sp-tablero { border: .15rem solid #C9CDF5; }
.sp-lado { width: 19rem; flex: none; display: flex; flex-direction: column; justify-content: center; gap: .8rem; }
.sp-ronda { font-size: 1.3rem; font-weight: var(--tg-w-strong); }
.sp--nino .sp-lista { display: flex; flex-direction: column; gap: .5rem; }
.sp--nino .sp-pal { display: flex; align-items: center; gap: .7rem; background: #fff; border-radius: 1rem; padding: .35rem .8rem; font-size: 1.5rem; font-weight: var(--tg-w-medium); border: .15rem solid transparent; }
.sp-pal__e { font-size: 2.2rem; line-height: 1; }
.sp-pal .cl-ficha { margin-left: auto; }
.sp--nino .sp-pal--hecha { border-color: var(--c); }
.sp-pal--hecha .sp-pal__t { text-decoration: line-through; }
.sp--nino .sp-pal--hecha .sp-pal__t { opacity: .5; }
.sp--nino .sp-pal--falta { border-color: #8A8FB8; border-style: dashed; }

/* Adulto: la sopa ocupa toda la tele; la lista en una franja abajo */
.sp--adulto { display: flex; flex-direction: column; gap: .4rem; padding: .4rem .6rem .5rem; box-sizing: border-box; }
.sp-pie { flex: none; display: flex; align-items: center; gap: .8rem; }
.sp--adulto .sp-ronda { font-size: 1rem; white-space: nowrap; color: var(--tg-muted); }
.sp--adulto .sp-lista { flex: 1; display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.sp--adulto .sp-pal { display: flex; align-items: center; gap: .3rem; font-size: 1.05rem; font-weight: var(--tg-w-strong); padding: .1rem .6rem; border-radius: 999px; background: #fff; }
.sp--adulto .sp-pal--hecha { background: var(--c); color: var(--ct, #fff); }
.sp--adulto .sp-pal--falta { background: transparent; border: .1rem dashed #8A8FB8; }