/* Estructura de los juegos del motor común (js/juegos.js). La estética va en el tema.css de cada temática. */

/* Clásico */
.tabla-scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px 8px; }
.tabla-clasico { display: grid; grid-template-columns: 1.7fr repeat(var(--cols, 6), 1fr); gap: 6px; min-width: calc(180px + var(--cols, 6) * 108px); }
.tabla-clasico .cab { font-size: 11px; font-weight: 700; color: var(--suave); text-align: center; text-transform: uppercase; letter-spacing: .5px; padding-bottom: 4px; border-bottom: 2px solid var(--borde); }
.tabla-clasico .fila { display: contents; }
.celda { min-height: 70px; padding: 6px; border-radius: 10px; display: grid; place-items: center; text-align: center; font-weight: 700; font-size: 13px; line-height: 1.2; }
.celda.ok { background: var(--ok); color: var(--sobre-ok); }
.celda.casi { background: var(--casi); color: var(--sobre-casi); }
.celda.mal { background: var(--mal); color: var(--sobre-mal); }
.celda.pj { display: flex; gap: 8px; justify-content: flex-start; background: var(--surface); border: 2px solid var(--borde); color: var(--texto); text-align: left; }
.celda.pj.ok { border-color: var(--ok); }
.celda.pj img { width: 54px; height: 60px; object-fit: cover; object-position: top; border-radius: 8px; flex-shrink: 0; background: var(--surface-2); }
.fila.nueva .celda { animation: girar .45s both; animation-delay: calc(var(--i, 0) * .16s); }
.leyenda { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 12px; color: var(--suave); margin: -8px 0 16px; }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }

/* Adivinar */
.escena { margin-bottom: 16px; }
.pistas { display: grid; gap: 8px; margin-bottom: 16px; }
.pista { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px dashed var(--borde); font-size: 14px; }
.pista b { color: var(--suave); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; min-width: 96px; }
.pista.bloqueada { color: var(--suave); font-style: italic; }
.intentos { list-style: none; display: grid; gap: 6px; margin-top: 16px; }
.intentos li { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 10px; font-weight: 600; background: var(--mal); color: var(--sobre-mal); }
.intentos li.ok { background: var(--ok); color: var(--sobre-ok); }
.intentos li img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; object-position: top; background: var(--surface-2); }
.silueta { display: grid; place-items: center; height: 300px; border-radius: 16px; overflow: hidden; }
.silueta img { max-height: 92%; max-width: 80%; object-fit: contain; filter: brightness(0); transition: filter .8s; }
.silueta.revelada img { filter: none; }
.solucion { display: flex; gap: 14px; align-items: center; text-align: left; }
.solucion img { width: 84px; height: 96px; object-fit: cover; object-position: top; border-radius: 10px; flex-shrink: 0; }
.solucion b { font: 26px/1 var(--font-d); display: block; }

/* Pixelado: la imagen entera, pixelada; gana nitidez con cada fallo */
.pixel { position: relative; height: 320px; border-radius: 16px; overflow: hidden; background: var(--surface-2); }
.pixel canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }