/* =====================================================
   JUEGOS DIARIOS — portada, Palabra del día y Sopa de letras.
   Se carga además de sec-participa.css (cabecera .pa-hero,
   chips y caja de entrar). Clases con el prefijo .jg-
   ===================================================== */

:root {
    --jg-verde: #5B8A3C;      /* acierto: el verde del pendón, algo apagado */
    --jg-oro:   #D9A13B;      /* está, pero en otro sitio */
    --jg-gris:  #8A8174;      /* no está */
}

/* Iconos propios de cada juego */
.jg-ico { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.12em; }
.jg-ico .v, .jg-ico .v rect { fill: var(--jg-verde); }
.jg-ico .a { fill: var(--jg-oro); }
.jg-ico .g, .jg-ico .g rect { fill: currentColor; opacity: .35; }

/* ---------- Portada ---------- */
.jg { padding-top: clamp(2.5rem, 5vw, 4rem); }

.jg-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}
.jg-tarjeta {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: start;
    padding: 1.5rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    background: var(--blanco);
    color: var(--texto);
    text-decoration: none;
    box-shadow: var(--sombra);
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .2s;
}
.jg-tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); border-color: var(--texto-suave); }
.jg-tarjeta-icono {
    display: grid;
    place-items: center;
    width: 4.2rem; height: 4.2rem;
    border-radius: var(--radio);
    background: var(--tinta);
    color: #fff;
    font-size: 2.3rem;
}
.jg-tarjeta-txt { display: flex; flex-direction: column; gap: .3rem; }
.jg-tarjeta-txt strong { font-family: var(--fuente-display); font-weight: 400; font-size: 1.7rem; line-height: 1.05; letter-spacing: -0.02em; }
.jg-tarjeta-txt > span:last-child { color: var(--texto-med); font-size: .95rem; }
.jg-tarjeta-num { font-family: var(--fuente-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teja); }
.jg-tarjeta-estado {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .7rem 1rem;
    border-radius: var(--radio);
    background: var(--teja);
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
}
.jg-tarjeta-estado.jg-estado--jugando { background: var(--tinta); }
.jg-tarjeta-estado.jg-estado--ganada,
.jg-tarjeta-estado.jg-estado--completa { background: #EAF3DE; color: #3B6D11; }
.jg-tarjeta-estado.jg-estado--perdida { background: var(--crema); color: var(--texto-med); }

.jg-aviso { display: flex; gap: .5rem; align-items: center; margin-bottom: 2rem; }
.jg-entrar { margin-bottom: 2.5rem; }

/* Ranking */
.jg-ranking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 900px) { .jg-ranking-layout { grid-template-columns: minmax(0, 1fr); } }
.jg-ranking-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; }
.jg-ranking-cab h2 { font-family: var(--fuente-display); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1; letter-spacing: -0.02em; }
.jg-periodos { display: flex; margin: 0; }
.jg-filtro-juego { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 1.2rem 0 1rem; font-size: .88rem; }
.jg-filtro-juego a { color: var(--texto-suave); text-decoration: none; padding-bottom: .15rem; border-bottom: 2px solid transparent; }
.jg-filtro-juego a:hover { color: var(--texto); }
.jg-filtro-juego a.active { color: var(--texto); border-color: var(--teja); font-weight: 600; }

.jg-tabla { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.jg-fila {
    display: grid;
    grid-template-columns: 2.2rem 2.25rem minmax(0, 1fr) auto auto;
    gap: .9rem;
    align-items: center;
    padding: .7rem .5rem;
    border-bottom: 1px solid var(--borde);
}
.jg-pos { font-family: var(--fuente-display); font-size: 1.35rem; text-align: center; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.jg-fila--oro .jg-pos    { color: #B8860B; }
.jg-fila--plata .jg-pos  { color: #7D8590; }
.jg-fila--bronce .jg-pos { color: #A0522D; }
.jg-fila--oro .jg-pos::after { content: '★'; font-size: .7em; margin-left: .1em; vertical-align: .3em; }
.jg-avatar {
    display: grid;
    place-items: center;
    width: 2.25rem; height: 2.25rem;
    border-radius: 50%;
    background: var(--verde);
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
}
.jg-avatar--1 { background: var(--teja); }
.jg-avatar--2 { background: #6F5B3E; }
.jg-avatar--3 { background: #2E6DA4; }
.jg-avatar--4 { background: #8A6D1F; }
.jg-avatar--5 { background: #5B4A6E; }
.jg-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jg-nombre small { font-weight: 400; color: var(--teja); }
.jg-partidas { font-size: .8rem; color: var(--texto-suave); white-space: nowrap; }
.jg-puntos { font-family: var(--fuente-mono); font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jg-puntos small { font-weight: 400; color: var(--texto-suave); font-size: .72rem; }
.jg-fila--yo { background: #FFF8E8; border-radius: var(--radio); }
.jg-tabla-sep { text-align: center; color: var(--texto-suave); padding: .3rem; letter-spacing: .3em; }
@media (max-width: 520px) {
    .jg-fila { grid-template-columns: 1.8rem 2rem minmax(0, 1fr) auto; gap: .6rem; }
    .jg-partidas { display: none; }
}
.jg-vacio { display: flex; gap: .5rem; align-items: center; padding: 1.5rem 0; color: var(--texto-suave); }
.jg-vacio .ti { font-size: 1.4rem; color: var(--oro); }

.jg-reglas {
    padding: 1.6rem;
    border-radius: var(--radio-lg);
    background: var(--crema);
}
.jg-reglas h3 { font-family: var(--fuente-display); font-weight: 400; font-size: 1.6rem; margin-bottom: 1rem; }
.jg-reglas dt { display: flex; align-items: center; gap: .5rem; font-weight: 600; margin-top: 1rem; }
.jg-reglas dd { margin: .3rem 0 0; font-size: .9rem; color: var(--texto-med); }
.jg-reglas-pie { margin-top: 1.4rem; font-size: .82rem; color: var(--texto-suave); }
.jg-reglas-pie a { color: var(--teja); }

/* ---------- Cabecera de cada juego ---------- */
.jg-juego-cab {
    background: var(--tinta);
    color: #fff;
    border-bottom: 5px solid;
    border-image: var(--pendon-bandas) 1;
    padding: 1.1rem 0;
}
.jg-juego-cab-in { display: flex; align-items: center; gap: 1rem; }
.jg-juego-cab h1 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: var(--fuente-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 4vw, 2rem);
    letter-spacing: -0.02em;
    text-align: center;
}
.jg-juego-cab h1 em { color: var(--oro); }
.jg-num { font-family: var(--fuente-mono); font-size: .8rem; color: rgba(255,255,255,.55); letter-spacing: .08em; }
.jg-volver { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255,255,255,.75); text-decoration: none; font-size: .9rem; min-width: 5.5rem; }
.jg-volver:hover { color: #fff; }
.jg-volver-pie { text-align: center; margin: 1.5rem 0 0; }

/* Ventana para confirmar (JG.confirmar) */
.jg-modal-fondo { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; background: rgba(20, 26, 23, .55); animation: jg-modal-fondo .15s ease-out; }
.jg-modal { width: min(100%, 24rem); padding: 1.5rem; border-radius: 14px; background: var(--blanco); box-shadow: 0 20px 50px rgba(0,0,0,.3); text-align: center; animation: jg-modal .18s ease-out; }
.jg-modal-tit { margin: 0 0 .5rem; font: 600 1.35rem/1.25 var(--fuente-titulos, Georgia, serif); color: var(--tinta); }
.jg-modal-txt { margin: 0 0 1.3rem; font-size: .95rem; color: var(--texto-med); line-height: 1.5; }
.jg-modal-botones { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
@keyframes jg-modal-fondo { from { opacity: 0; } }
@keyframes jg-modal { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.jg-volver-pie .btn { gap: .4rem; }
.jg-ayuda-btn { min-width: 5.5rem; text-align: right; background: none; border: 0; color: rgba(255,255,255,.75); font-size: 1.6rem; cursor: pointer; }
.jg-ayuda-btn:hover { color: #fff; }
.jg-reloj { min-width: 5.5rem; text-align: right; font-family: var(--fuente-mono); font-size: 1rem; color: var(--oro); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
    .jg-volver { min-width: 0; font-size: .85rem; }
    .jg-volver .ti { font-size: 1.2rem; }
    .jg-ayuda-btn, .jg-reloj { min-width: 0; }
    .jg-num { display: none; }
}

.jg-juego { padding: 1.5rem 0 4rem; background: var(--papel); }
.jg-juego-in { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; position: relative; }

/* Aviso flotante ("Faltan letras", "¡CASA!") */
.jg-aviso-flotante {
    position: fixed;
    top: 6.5rem;
    left: 50%;
    z-index: 50;
    transform: translate(-50%, -10px);
    padding: .65rem 1.1rem;
    border-radius: var(--radio);
    background: var(--tinta);
    color: #fff;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .3s var(--ease-out);
}
.jg-aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Palabra del día ---------- */
.jg-tablero { display: grid; gap: .4rem; }
.jg-fila-letras { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.jg-casilla {
    display: grid;
    place-items: center;
    width: clamp(3rem, 15vw, 3.8rem);
    aspect-ratio: 1;
    border: 2px solid var(--borde);
    border-radius: 6px;
    background: var(--blanco);
    font-family: var(--fuente-ui);
    font-weight: 700;
    font-size: clamp(1.5rem, 7vw, 2rem);
    text-transform: uppercase;
    color: var(--texto);
    user-select: none;
}
.jg-casilla.llena { border-color: var(--texto-suave); animation: jg-pulso .12s ease-out; }
.jg-c0, .jg-c1, .jg-c2 { color: #fff; border-color: transparent !important; }
.jg-c0 { background: var(--jg-gris) !important; }
.jg-c1 { background: var(--jg-oro) !important; }
.jg-c2 { background: var(--jg-verde) !important; }
.jg-casilla.gira { animation: jg-gira .5s ease-in-out both; }
.jg-fila-letras.sacude, .jg-rejilla.sacude { animation: jg-sacude .4s; }
@keyframes jg-pulso { 50% { transform: scale(1.08); } }
@keyframes jg-gira { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes jg-sacude { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) {
    .jg-casilla.gira, .jg-casilla.llena, .sacude { animation: none !important; }
}

.jg-teclado { display: flex; flex-direction: column; gap: .4rem; width: 100%; max-width: 32rem; }
.jg-teclado[hidden] { display: none; }
.jg-teclado-fila { display: flex; gap: .3rem; justify-content: center; }
.jg-tecla {
    flex: 1 1 0;
    min-width: 0;
    height: 3.5rem;
    border: 0;
    border-radius: 6px;
    background: var(--crema-med);
    color: var(--texto);
    font: 600 1.05rem var(--fuente-ui);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.jg-tecla:active { transform: scale(.95); }
.jg-tecla--ancha { flex-grow: 1.6; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.jg-tecla--ancha .ti { font-size: 1.4rem; }

.jg-final {
    width: 100%;
    max-width: 30rem;
    padding: 1.5rem;
    border-radius: var(--radio-lg);
    background: var(--blanco);
    border: 1px solid var(--borde);
    box-shadow: var(--sombra);
    text-align: center;
}
.jg-final-tit { font-family: var(--fuente-display); font-size: 1.9rem; line-height: 1.1; }
.jg-final-sol { margin-top: .5rem; color: var(--texto-med); }
.jg-final-sol a { font-weight: 700; color: var(--teja); letter-spacing: .08em; }
.jg-final-pts { margin-top: .4rem; font-family: var(--fuente-mono); font-weight: 600; color: #3B6D11; }
.jg-final-pts:empty { display: none; }
.jg-final-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.2rem; }
.jg-final-acciones .btn { gap: .45rem; }
.jg-final-manana { margin-top: 1.1rem; font-size: .88rem; color: var(--texto-suave); }
.jg-final-manana strong { font-family: var(--fuente-mono); color: var(--texto); }

.jg-nota { max-width: 34rem; font-size: .85rem; color: var(--texto-med); text-align: center; }
.jg-nota .ti { color: var(--teja); }
.jg-nota a { color: var(--teja); font-weight: 600; }

.jg-podio { width: 100%; max-width: 34rem; margin-top: 1rem; }
.jg-podio-cab { display: flex; justify-content: space-between; align-items: baseline; }
.jg-podio-cab a { font-size: .85rem; color: var(--teja); text-decoration: none; }
.jg-podio .jg-vacio { justify-content: center; padding: 1rem 0; font-size: .9rem; }

/* Ventana de ayuda */
.jg-dialogo {
    max-width: min(30rem, calc(100% - 2rem));
    margin: auto;
    padding: 1.8rem;
    border: 0;
    border-radius: var(--radio-lg);
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
}
.jg-dialogo::backdrop { background: rgba(22,28,25,.6); }
.jg-dialogo h2 { font-family: var(--fuente-display); font-weight: 400; font-size: 1.8rem; margin-bottom: .8rem; }
.jg-dialogo p { margin: .6rem 0; color: var(--texto-med); font-size: .95rem; }
.jg-dialogo-cerrar { position: absolute; top: .8rem; right: .8rem; background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: var(--texto-suave); }
.jg-ejemplo { list-style: none; padding: 0; margin: .8rem 0; display: grid; gap: .5rem; }
.jg-ejemplo li { display: flex; align-items: center; gap: .7rem; font-size: .9rem; }
.jg-ejemplo .jg-casilla { width: 2.4rem; font-size: 1.2rem; flex-shrink: 0; }

/* ---------- Sopa de letras ---------- */
.jg-sopa-in {
    display: grid;
    grid-template-columns: minmax(0, 36rem) minmax(0, 18rem);
    justify-content: center;
    gap: 2rem;
    align-items: start;
    position: relative;
}
@media (max-width: 860px) { .jg-sopa-in { grid-template-columns: minmax(0, 36rem); } }
.jg-sopa-tablero {
    position: relative;
    width: 100%;
    padding: .5rem;
    border-radius: var(--radio-lg);
    background: var(--blanco);
    border: 1px solid var(--borde);
    box-shadow: var(--sombra);
}
.jg-rejilla {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(var(--lado), 1fr);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}
.jg-letra {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    font-family: var(--fuente-ui);
    font-weight: 600;
    font-size: clamp(.95rem, 4.2vw, 1.45rem);
    color: var(--texto);
    border-radius: 50%;
    transition: color .15s;
}
.jg-letra.hallada { color: var(--tinta); }
.jg-letra.marcando { color: #fff; }
.jg-letra.ancla { background: var(--teja); color: #fff; }
.jg-trazos {
    position: absolute;
    inset: .5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    z-index: 1;
    pointer-events: none;
}
.jg-trazo { stroke-width: .78; stroke-linecap: round; fill: none; opacity: .45; }
.jg-trazo--sel { stroke: var(--teja); opacity: .85; }
.jg-trazo--0 { stroke: var(--jg-verde); }
.jg-trazo--1 { stroke: var(--jg-oro); }
.jg-trazo--2 { stroke: #2E6DA4; }
.jg-trazo--3 { stroke: #C0392B; }
.jg-trazo--4 { stroke: #8E44AD; }
.jg-trazo--5 { stroke: #16A085; }

.jg-sopa-lado { display: flex; flex-direction: column; gap: 1.2rem; }
.jg-sopa-ayuda { font-size: .88rem; color: var(--texto-med); }
.jg-sopa-ayuda[hidden] { display: none; }
.jg-sopa-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem 1rem;
}
.jg-sopa-lista li {
    font-family: var(--fuente-mono);
    font-weight: 600;
    letter-spacing: .08em;
    padding: .45rem .7rem;
    border-radius: var(--radio);
    background: var(--blanco);
    border: 1px solid var(--borde);
}
.jg-sopa-lista li.hallada { background: #EAF3DE; border-color: #C0DD97; }
.jg-sopa-lista li.hallada a { color: #3B6D11; text-decoration: line-through; text-decoration-thickness: 2px; }
.jg-sopa-lado .jg-final { padding: 1.2rem; }
.jg-sopa-lado .jg-nota { text-align: left; }
.jg-juego > .container > .jg-podio { margin: 2.5rem auto 0; }

/* ---------- Portada: grupos ---------- */
.jg .jg-grupo-tit {
    font-family: var(--fuente-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--teja);
    margin: 0 0 .9rem;
}
.jg-tarjetas + .jg-grupo-tit { margin-top: -1rem; }
.jg-tarjetas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.jg-tarjeta { padding: 1.2rem; gap: .9rem 1rem; }
.jg-tarjeta-icono { width: 3.4rem; height: 3.4rem; font-size: 1.9rem; }
.jg-tarjeta-txt strong { font-size: 1.4rem; }
.jg-tarjeta-txt > span:last-child { font-size: .88rem; }
.jg-tarjeta-estado { padding: .6rem .9rem; font-size: .9rem; }
.jg-final-foto { margin-top: .6rem; font-size: .85rem; color: var(--texto-suave); }
.jg-nota--suave { color: var(--texto-suave); }

/* ---------- Sudoku ---------- */
.jg-niveles { display: flex; gap: .3rem; padding: .25rem; border-radius: 100px; background: var(--crema-med); }
.jg-niveles a { padding: .4rem 1rem; border-radius: 100px; color: var(--texto-med); text-decoration: none; font-size: .9rem; font-weight: 500; }
.jg-niveles a.active { background: var(--tinta); color: #fff; }
.jg-sudoku-ayudas { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.jg-sudoku-ayudas[hidden] { display: none; }
.jg-sudoku-ayudas-tit { font-family: var(--fuente-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teja); }
.jg-sudoku-ayudas .jg-niveles button { padding: .35rem .85rem; border: 0; border-radius: 100px; background: none; color: var(--texto-med); font: 500 .85rem var(--fuente-ui); cursor: pointer; }
.jg-sudoku-ayudas .jg-niveles button.active { background: var(--tinta); color: #fff; }
.jg-sudoku-ayudas .jg-niveles small { font-family: var(--fuente-mono); font-size: .72rem; opacity: .75; }
.jg-sudoku-ayudas-txt { margin: 0; font-size: .8rem; color: var(--texto-suave); text-align: center; }
.jg-sudoku-rellenar { gap: .35rem; padding: .35rem .8rem; font-size: .85rem; }
.jg-sudoku-reiniciar { margin: 0; text-align: center; }
.jg-sudoku-reiniciar .btn { gap: .35rem; padding: .35rem .8rem; font-size: .85rem; }
.jg-sudoku-rellenar small { font-family: var(--fuente-mono); font-size: .72rem; opacity: .75; }
.jg-sudoku-rejilla {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    width: min(100%, 30rem);
    border: 2.5px solid var(--tinta);
    border-radius: 6px;
    overflow: hidden;
    background: var(--blanco);
}
.jg-sk {
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    background: var(--blanco);
    font: 500 clamp(1.1rem, 5.5vw, 1.6rem) var(--fuente-ui);
    color: var(--teja-osc);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.jg-sk:nth-child(9n) { border-right: 0; }
.jg-sk:nth-child(n+73) { border-bottom: 0; }
.jg-sk.borde-d { border-right: 2px solid var(--tinta); }
.jg-sk.borde-b { border-bottom: 2px solid var(--tinta); }
.jg-sk.fija { color: var(--tinta); font-weight: 700; }
.jg-sk.zona { background: #F5F0E6; }
/* Filas, columnas y cuadros donde ya está el número elegido: un solo tono translúcido */
.jg-sk.sombra { box-shadow: inset 0 0 0 100vmax rgba(180, 71, 43, .13); }
.jg-sk.igual { background: #EAD9B5; }
.jg-sk.sel { background: #F2C98A; }
.jg-sk.mal { color: #C0392B; background: #FBE3E0; }
.jg-sudoku-rejilla.resuelto .jg-sk { background: #EEF5E6; color: #2F5A12; }
.jg-notas { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; padding: 6%; }
.jg-notas i { font-style: normal; font-size: clamp(.5rem, 2vw, .62rem); line-height: 1; display: grid; place-items: center; color: var(--texto-suave); }
.jg-sudoku-teclas { display: grid; grid-template-columns: repeat(9, 1fr) auto auto; gap: .35rem; width: min(100%, 34rem); }
.jg-sudoku-teclas[hidden] { display: none; }
.jg-sudoku-teclas .jg-tecla { height: 3.2rem; font-size: 1.25rem; }
.jg-sudoku-teclas .jg-tecla.agotado { opacity: .3; }
.jg-sudoku-teclas .jg-tecla.elegido { background: #EAD9B5; box-shadow: inset 0 0 0 2px var(--teja); }
.jg-tecla--icono { padding: 0 .8rem; font-size: .85rem !important; display: inline-flex; align-items: center; gap: .3rem; }
.jg-tecla--icono .ti { font-size: 1.25rem; }
.jg-tecla.activo { background: var(--tinta); color: #fff; }
@media (max-width: 560px) {
    .jg-sudoku-teclas { grid-template-columns: repeat(6, 1fr); }
    .jg-tecla--icono { justify-content: center; }
    .jg-tecla--icono[data-notas] { grid-column: span 2; }
}

/* ---------- Kriss Kross ---------- */
.jg-kk-in {
    display: grid;
    grid-template-columns: minmax(0, 34rem) minmax(0, 18rem);
    justify-content: center;
    gap: 2rem;
    align-items: start;
    position: relative;
}
@media (max-width: 860px) { .jg-kk-in { grid-template-columns: minmax(0, 34rem); } }
.jg-kk-tablero { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.jg-kk-rejilla {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    width: min(100%, calc(var(--cols) * 2.6rem));
    gap: 2px;
}
.jg-kk-c {
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    border: 1.5px solid var(--texto-suave);
    border-radius: 4px;
    background: var(--blanco);
    font: 700 clamp(.8rem, 3.6vw, 1.2rem) var(--fuente-ui);
    color: var(--tinta);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.jg-kk-c.vacia { border: 0; background: none; cursor: default; }
.jg-kk-c.zona { background: #F5EBD6; }
.jg-kk-c.sel { background: #F2C98A; border-color: var(--teja); }
.jg-kk-rejilla.sacude { animation: jg-sacude .4s; }
.jg-teclado--kk { max-width: 30rem; }
.jg-teclado--kk .jg-tecla { height: 3rem; }
.jg-kk-lista { display: grid; gap: .8rem; }
.jg-kk-n { font-family: var(--fuente-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teja); }
.jg-kk-grupo ul { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.jg-kk-grupo li { font-family: var(--fuente-mono); font-weight: 600; letter-spacing: .06em; }
.jg-kk-grupo li.puesta { color: var(--texto-suave); text-decoration: line-through; text-decoration-color: var(--jg-verde); text-decoration-thickness: 2px; }
.jg-kk-lado { display: flex; flex-direction: column; gap: 1.2rem; }

/* ---------- Puzle y deslizante ---------- */
.jg-puzle-in {
    display: grid;
    grid-template-columns: minmax(0, 32rem) minmax(0, 20rem);
    justify-content: center;
    gap: 2rem;
    align-items: start;
    position: relative;
}
@media (max-width: 860px) { .jg-puzle-in { grid-template-columns: minmax(0, 32rem); } }
.jg-puzle-tablero { display: flex; flex-direction: column; gap: .7rem; align-items: center; }
.jg-puzle-lado { display: flex; flex-direction: column; gap: 1.2rem; }
.jg-puzle-marco {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--lado), 1fr);
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--crema-med);
    box-shadow: var(--sombra);
}
.jg-puzle-marco.con-guia::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--img) center/cover;
    opacity: .22;
    filter: grayscale(1);
    pointer-events: none;
}
.jg-pz-hueco { position: relative; outline: 1px dashed rgba(29,36,32,.18); outline-offset: -1px; }
.jg-pz-hueco.lleno { outline: 0; background-image: var(--img); background-size: calc(var(--lado) * 100%); }
.jg-pz-hueco.encaja { animation: jg-pulso .25s ease-out; }
.jg-pz-hueco.sacude { animation: jg-sacude .35s; }
.jg-puzle-marco.completo .jg-pz-hueco { outline: 0; }
.jg-puzle-guia { display: inline-flex; gap: .4rem; align-items: center; font-size: .85rem; color: var(--texto-med); cursor: pointer; }
.jg-puzle-guia[hidden] { display: none; }
.jg-puzle-bandeja {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .45rem;
    touch-action: none;
}
.jg-puzle-bandeja[hidden] { display: none; }
.jg-pz-pieza, .jg-pz-fantasma {
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background-image: var(--img);
    background-size: calc(var(--lado) * 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    cursor: grab;
    touch-action: none;
}
.jg-pz-pieza.elegida { outline: 3px solid var(--teja); outline-offset: 2px; }
.jg-pz-pieza[hidden] { display: none; }
.jg-pz-fantasma {
    position: fixed;
    z-index: 100;
    pointer-events: none;
    cursor: grabbing;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    --lado: 4;
}
@media (max-width: 860px) { .jg-puzle-bandeja { grid-template-columns: repeat(8, 1fr); } }

.jg-desl-marco {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radio);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--sombra);
}
/* Al resolverlo se ve la foto entera, también la pieza del hueco */
.jg-desl-marco::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--img) center / 100% 100%;
    opacity: 0;
    transition: opacity .6s ease-out .2s;
    pointer-events: none;
}
.jg-desl-marco.completo::after { opacity: 1; }
.jg-desl-ficha {
    position: absolute;
    top: 0; left: 0;
    width: calc(100% / var(--lado));
    height: calc(100% / var(--lado));
    padding: 0;
    border: 1px solid #fff;
    background-image: var(--img);
    background-size: calc(var(--lado) * 100%);
    cursor: pointer;
    transition: transform .14s ease-out;
    -webkit-tap-highlight-color: transparent;
}
.jg-desl-marco.completo .jg-desl-ficha { border-color: transparent; }
.jg-desl-cuenta { font-family: var(--fuente-mono); font-size: .85rem; color: var(--texto-med); }
.jg-desl-modelo { display: flex; align-items: center; gap: .8rem; margin: 0; }
.jg-desl-modelo[hidden] { display: none; }
.jg-desl-modelo img { width: 6rem; height: 6rem; border-radius: var(--radio); box-shadow: var(--sombra); }
.jg-desl-modelo figcaption { font-size: .85rem; color: var(--texto-suave); }
@media (prefers-reduced-motion: reduce) { .jg-desl-ficha { transition: none; } }

/* ---------- Marcadores (2048, caramelos, buscaminas...) ---------- */
.jg-marcadores { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: .6rem; }
.jg-marcador {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 6.5rem; padding: .45rem 1rem;
    border-radius: var(--radio); background: var(--tinta); color: #fff;
}
.jg-marcador span { font-family: var(--fuente-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.jg-marcador strong { font-family: var(--fuente-mono); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.jg-marcadores .btn { gap: .4rem; }
.jg-marcadores .btn[hidden] { display: none; }
.jg-modo.activo { background: var(--tinta); color: #fff; }

/* ---------- 2048 ---------- */
.jg-2048-tablero {
    position: relative;
    width: min(100%, 26rem);
    aspect-ratio: 1;
    border-radius: var(--radio-lg);
    background: #BDB2A0;
    touch-action: none;
    user-select: none;
    outline: none;
}
.jg-2048-capa { position: absolute; inset: 3%; --hueco: 3%; --celda: calc((100% - (var(--lado) - 1) * var(--hueco)) / var(--lado)); }
.jg-2048-fondo { display: grid; grid-template-columns: repeat(var(--lado), 1fr); grid-template-rows: repeat(var(--lado), 1fr); gap: var(--hueco); width: 100%; height: 100%; }
.jg-2048-fondo span { border-radius: 6px; background: rgba(251,248,242,.45); }
.jg-2048-ficha {
    position: absolute;
    top: calc(var(--f) * (var(--celda) + var(--hueco)));
    left: calc(var(--c) * (var(--celda) + var(--hueco)));
    width: var(--celda);
    height: var(--celda);
    display: grid; place-items: center;
    border-radius: 6px;
    font: 700 clamp(1.3rem, 7vw, 2.1rem) var(--fuente-ui);
    background: var(--papel); color: var(--tinta);
}
.jg-2048-ficha.nace { animation: jg-nace .18s ease-out; }
.jg-2048-ficha.junta { animation: jg-pulso .18s ease-out; }
@keyframes jg-nace { from { transform: scale(.2); opacity: 0; } }
.jg-2048-ficha.v4    { background: #EFE3C8; }
.jg-2048-ficha.v8    { background: #E9B98A; color: #fff; }
.jg-2048-ficha.v16   { background: #E39A63; color: #fff; }
.jg-2048-ficha.v32   { background: #D9774A; color: #fff; }
.jg-2048-ficha.v64   { background: var(--teja); color: #fff; }
.jg-2048-ficha.v128  { background: #E2C26A; color: #fff; font-size: clamp(1.1rem, 6vw, 1.8rem); }
.jg-2048-ficha.v256  { background: #D9A13B; color: #fff; font-size: clamp(1.1rem, 6vw, 1.8rem); }
.jg-2048-ficha.v512  { background: #B8862B; color: #fff; font-size: clamp(1.1rem, 6vw, 1.8rem); }
.jg-2048-ficha.v1024 { background: var(--verde-claro); color: #fff; font-size: clamp(.95rem, 5vw, 1.5rem); }
.jg-2048-ficha.v2048 { background: var(--verde); color: #fff; font-size: clamp(.95rem, 5vw, 1.5rem); box-shadow: 0 0 0 3px var(--oro); }
.jg-2048-ficha.v4096 { background: var(--tinta); color: var(--oro); font-size: clamp(.95rem, 5vw, 1.5rem); }
.jg-2048-tablero.completo { opacity: .75; }

/* ---------- Cuadros numéricos ---------- */
.jg-cn-rejilla {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    justify-items: center;
    gap: .25rem;
    width: min(100%, 24rem);
}
.jg-cn-c {
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid var(--texto-suave);
    border-radius: 8px;
    background: var(--blanco);
    font: 600 clamp(1.4rem, 7vw, 2rem) var(--fuente-ui);
    color: var(--teja-osc);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.jg-cn-c.fija { color: var(--tinta); font-weight: 800; background: var(--crema-med); border-color: transparent; cursor: default; }
.jg-cn-c.sel { background: #F2C98A; border-color: var(--teja); }
.jg-cn-op { font: 600 clamp(1.1rem, 5vw, 1.5rem) var(--fuente-ui); color: var(--texto-suave); }
.jg-cn-res {
    min-width: 2.4em;
    padding: .15em .3em;
    border-radius: 6px;
    background: var(--tinta);
    color: var(--oro);
    font: 700 clamp(1rem, 4.6vw, 1.35rem) var(--fuente-mono);
    text-align: center;
}
.jg-cn-rejilla.resuelto .jg-cn-c { background: #EEF5E6; color: #2F5A12; border-color: #C0DD97; }
.jg-cn-rejilla.sacude { animation: jg-sacude .4s; }
.jg-cn-teclas { grid-template-columns: repeat(10, 1fr); width: min(100%, 30rem); }
@media (max-width: 560px) { .jg-cn-teclas { grid-template-columns: repeat(5, 1fr); } }

/* ---------- Caramelos ---------- */
.jg-cara-tablero {
    display: grid;
    grid-template-columns: repeat(var(--lado), 1fr);
    gap: 3px;
    width: min(100%, 30rem);
    padding: .5rem;
    border-radius: var(--radio-lg);
    background: var(--tinta);
    touch-action: none;
    user-select: none;
}
.jg-cara {
    aspect-ratio: 1;
    display: grid; place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.jg-cara span { width: 76%; height: 76%; transition: transform .2s, opacity .2s; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.35); }
/* Cada color con su forma, para distinguirlos también sin color */
.jg-cara.c0 span { background: #D2462E; border-radius: 50%; }
.jg-cara.c1 span { background: #E8B33E; border-radius: 6px; transform: rotate(45deg) scale(.82); }
.jg-cara.c2 span { background: #5B8A3C; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
.jg-cara.c3 span { background: #2E6DA4; border-radius: 6px; }
.jg-cara.c4 span { background: #7B4F9E; clip-path: polygon(50% 4%, 96% 92%, 4% 92%); box-shadow: none; }
.jg-cara.c5 span { background: #E07AA0; border-radius: 50% 50% 12px 12px; }
.jg-cara.elegido { background: rgba(217,161,59,.45); }
.jg-cara.sale span { transform: scale(0) !important; opacity: 0; }
.jg-cara.cae span { animation: jg-cae .23s ease-in; }
.jg-cara.c1.cae span { animation: none; }
@keyframes jg-cae { from { transform: translateY(-60%); opacity: .3; } }
.jg-cara.sacude { animation: jg-sacude .3s; }
.jg-cara-tablero.completo { opacity: .7; }

/* ---------- Buscaminas ---------- */
.jg-minas-tablero {
    display: grid;
    grid-template-columns: repeat(var(--lado), 1fr);
    gap: 3px;
    width: min(100%, 28rem);
    padding: .45rem;
    border-radius: var(--radio-lg);
    background: #6F8A5F;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.jg-mina {
    aspect-ratio: 1;
    display: grid; place-items: center;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: #A8C08A;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.15);
    font: 700 clamp(.95rem, 4.6vw, 1.35rem) var(--fuente-ui);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.jg-mina:hover { background: #B6CC9A; }
.jg-mina.abierta { background: #EFE7D6; box-shadow: none; cursor: default; }
.jg-mina.n1 { color: #2E6DA4; } .jg-mina.n2 { color: #3B6D11; } .jg-mina.n3 { color: #C0392B; }
.jg-mina.n4 { color: #5B4A6E; } .jg-mina.n5 { color: #8E3520; } .jg-mina.n6 { color: #16A085; }
.jg-mina.n7, .jg-mina.n8 { color: var(--tinta); }
.jg-mina.bandera { color: var(--teja); }
.jg-mina.pisada { background: #C0392B; color: #fff; box-shadow: none; }
.jg-mina.mina-vista { background: #EFE7D6; color: var(--tinta); box-shadow: none; }
.jg-mina .ti { font-size: 1.15em; }
.jg-minas-tablero.sacude { animation: jg-sacude .4s; }
.jg-vidas { display: flex; gap: .15rem; font-size: 1.1rem !important; color: rgba(255,255,255,.35); }
.jg-vidas .llena { color: #E07A6A; }

/* ---------- Memory ---------- */
.jg-memory-tablero {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .55rem;
    width: min(100%, 26rem);
}
@media (min-width: 700px) { .jg-memory-tablero { grid-template-columns: repeat(5, 1fr); width: min(100%, 34rem); } }
.jg-carta {
    position: relative;
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 0;
    background: none;
    perspective: 600px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.jg-carta-dorso, .jg-carta-cara {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    border-radius: var(--radio);
    backface-visibility: hidden;
    transition: transform .35s var(--ease-out);
    box-shadow: var(--sombra);
}
.jg-carta-dorso { background: var(--tinta); border: 3px solid var(--oro); background-image: var(--pendon-bandas); background-size: 100% 12%; background-repeat: no-repeat; background-position: center; }
.jg-carta-cara { background: var(--blanco); transform: rotateY(180deg); font-size: clamp(1.8rem, 9vw, 2.6rem); color: var(--teja); border: 2px solid var(--borde); }
.jg-carta.vuelta .jg-carta-dorso { transform: rotateY(-180deg); }
.jg-carta.vuelta .jg-carta-cara { transform: rotateY(0); }
.jg-carta.hecha .jg-carta-cara { background: #EEF5E6; color: var(--verde); border-color: #C0DD97; }
@media (prefers-reduced-motion: reduce) { .jg-carta-dorso, .jg-carta-cara { transition: none; } }

/* ---------- Ordena colores ---------- */
.jg-tubos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem .8rem;
    width: min(100%, 36rem);
    padding: 1rem 0;
}
.jg-tubo {
    display: flex;
    flex-direction: column-reverse;
    gap: 3px;
    width: 3.1rem;
    padding: 4px 4px 6px;
    border: 3px solid var(--texto-suave);
    border-top: 0;
    border-radius: 0 0 1.6rem 1.6rem;
    background: rgba(255,255,255,.7);
    cursor: pointer;
    transition: transform .15s;
    -webkit-tap-highlight-color: transparent;
}
.jg-tubo span { height: 2.2rem; border-radius: 4px; }
.jg-tubo span:first-child { border-radius: 4px 4px 1.3rem 1.3rem; }
.jg-tubo.elegido { transform: translateY(-.8rem); border-color: var(--teja); }
.jg-tubo.lleno { border-color: var(--jg-verde); }
.jg-tubo.sacude { animation: jg-sacude .35s; }
.jg-gota.g0 { background: #D2462E; } .jg-gota.g1 { background: #E8B33E; } .jg-gota.g2 { background: #5B8A3C; }
.jg-gota.g3 { background: #2E6DA4; } .jg-gota.g4 { background: #7B4F9E; } .jg-gota.g5 { background: #E07AA0; }
.jg-gota.g6 { background: #2BA59A; }
@media (max-width: 420px) { .jg-tubo { width: 2.6rem; } .jg-tubo span { height: 1.9rem; } }

/* ---------- Anagramas ---------- */
.jg-ana-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; width: min(100%, 34rem); }
.jg-ana {
    display: grid; gap: .7rem;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    padding: 1rem;
    border-radius: var(--radio-lg);
    background: var(--blanco);
    border: 1px solid var(--borde);
    box-shadow: var(--sombra);
}
.jg-ana-fichas { display: flex; flex-wrap: wrap; gap: .3rem; }
.jg-ana-ficha {
    display: grid; place-items: center;
    width: clamp(1.9rem, 8.4vw, 2.4rem); height: clamp(1.9rem, 8.4vw, 2.4rem);
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: var(--tinta);
    color: #fff;
    font: 700 1.2rem var(--fuente-ui);
    cursor: pointer;
}
button.jg-ana-ficha:active { transform: scale(.94); }
.jg-ana--ok .jg-ana-ficha, .jg-ana--pasada .jg-ana-ficha { background: var(--crema-med); color: var(--texto-suave); width: 1.9rem; height: 1.9rem; font-size: .95rem; cursor: default; }
.jg-ana-form { display: flex; gap: .4rem; }
.jg-ana-form input {
    flex: 1; min-width: 0;
    padding: .55rem .8rem;
    border: 1.5px solid var(--borde);
    border-radius: var(--radio);
    font: 600 1.1rem var(--fuente-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.jg-ana-form input:focus { outline: 2px solid var(--teja); border-color: transparent; }
.jg-ana-form .btn { padding: .5rem .75rem; flex-shrink: 0; }
@media (max-width: 480px) {
    .jg-ana-form { flex-wrap: wrap; }
    .jg-ana-form input { flex-basis: 100%; }
    .jg-ana-form .btn { flex: 1; justify-content: center; }
}
.jg-ana-sol { display: flex; align-items: center; gap: .5rem; font-family: var(--fuente-mono); font-weight: 600; letter-spacing: .08em; }
.jg-ana-sol a { color: var(--texto); }
.jg-ana-sol span { margin-left: auto; color: #3B6D11; }
.jg-ana--ok .jg-ana-sol .ti { color: var(--jg-verde); font-size: 1.3rem; }
.jg-ana--pasada .jg-ana-sol, .jg-ana--pasada .jg-ana-sol span { color: var(--texto-suave); }
.jg-ana.sacude { animation: jg-sacude .4s; }

/* ---------- Rueda de palabras ---------- */
.jg-rueda-in {
    display: grid;
    grid-template-columns: minmax(0, 26rem) minmax(0, 22rem);
    justify-content: center;
    gap: 2rem;
    align-items: start;
    position: relative;
}
@media (max-width: 860px) { .jg-rueda-in { grid-template-columns: minmax(0, 26rem); } }
.jg-rueda-juego { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.jg-rueda-palabra {
    display: flex; justify-content: center; gap: .15rem;
    min-height: 2.6rem;
    font: 700 1.8rem var(--fuente-ui);
    letter-spacing: .06em;
}
.jg-rueda-palabra .c { color: var(--teja); }
.jg-rueda-palabra em { font: 400 1rem var(--fuente-ui); color: var(--texto-suave); align-self: center; }
.jg-rueda-palabra.sacude { animation: jg-sacude .4s; }
.jg-rueda-circulo {
    position: relative;
    width: min(100%, 19rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--tinta);
    box-shadow: var(--sombra);
}
.jg-rueda-letra {
    position: absolute;
    top: 50%; left: 50%;
    width: 22%; aspect-ratio: 1;
    margin: -11% 0 0 -11%;
    border: 0;
    border-radius: 50%;
    background: var(--papel);
    color: var(--tinta);
    font: 700 clamp(1.3rem, 6vw, 1.8rem) var(--fuente-ui);
    transform: rotate(var(--a)) translateY(-145%) rotate(calc(-1 * var(--a)));
    cursor: pointer;
    transition: background .15s, opacity .15s;
    -webkit-tap-highlight-color: transparent;
}
.jg-rueda-centro { width: 28%; margin: -14% 0 0 -14%; transform: none; background: var(--teja); color: #fff; font-size: clamp(1.6rem, 7vw, 2.2rem); }
.jg-rueda-letra.usada { opacity: .3; }
.jg-rueda-botones { display: flex; gap: .5rem; }
.jg-rueda-botones .btn { gap: .4rem; }
.jg-rueda-lado { display: flex; flex-direction: column; gap: 1rem; }
.jg-rueda-lado .jg-marcadores { justify-content: flex-start; }
.jg-rueda-lado .jg-nota { text-align: left; }
.jg-rueda-nueve { display: flex; gap: .45rem; align-items: center; font-size: .9rem; color: var(--texto-med); }
.jg-rueda-nueve .ti { color: var(--texto-suave); font-size: 1.2rem; }
.jg-rueda-nueve.hecha { color: #3B6D11; font-weight: 600; }
.jg-rueda-nueve.hecha .ti { color: var(--oro); }
.jg-rueda-compartir { align-self: flex-start; gap: .4rem; }
.jg-rueda-halladas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.jg-rueda-halladas li a {
    display: inline-block;
    padding: .25rem .55rem;
    border-radius: 6px;
    background: #EAF3DE;
    color: #3B6D11;
    font: 600 .85rem var(--fuente-mono);
    letter-spacing: .06em;
    text-decoration: none;
}
.jg-rueda-halladas li.nueve a { background: var(--oro); color: var(--tinta); }
.jg-rueda-ayer { font-size: .88rem; color: var(--texto-med); }
.jg-rueda-ayer summary { cursor: pointer; font-weight: 600; color: var(--teja); }
.jg-rueda-ayer p { margin-top: .5rem; }
.jg-rueda-ayer a { color: var(--teja); }
.jg-rueda-ayer-lista { font-size: .82rem; color: var(--texto-suave); }

/* ---------- Minicríptico ---------- */
.jg-cr-tarjeta {
    width: 100%;
    max-width: 40rem;
    padding: clamp(1.2rem, 4vw, 2rem);
    border-radius: 14px;
    background: var(--blanco);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
}
.jg-cr-pista { margin: 0; font: 700 clamp(1.25rem, 5vw, 1.75rem)/1.55 var(--fuente-titulos, Georgia, serif); text-align: center; color: var(--tinta); }
.jg-cr-n { font: 400 .8rem var(--fuente-ui); color: var(--texto-suave); vertical-align: super; white-space: nowrap; }
.jg-cr-rejilla {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    width: min(100%, calc(var(--cols) * 3.4rem));
    gap: 3px;
}
.jg-cr-rejilla.sacude { animation: jg-sacude .4s; }
.jg-cr-c {
    position: relative;
    aspect-ratio: 1 / 1.1;
    min-width: 0;
    padding: 0;
    border: 2px solid var(--texto-med);
    border-radius: 5px;
    background: var(--blanco);
    color: var(--tinta);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.jg-cr-c b { font: 700 clamp(.95rem, 5vw, 1.4rem) var(--fuente-mono); }
.jg-cr-c.sel { border-color: #2E5FB8; box-shadow: inset 0 0 0 1px #2E5FB8; background: #F2F5FD; }
.jg-cr-c.destapada b { color: #2E5FB8; }
.jg-cr-c.mal b { color: #B3261E; }
.jg-cr-c.mal::after { content: ''; position: absolute; inset: auto 0 0 auto; border: 5px solid transparent; border-right-color: #B3261E; border-bottom-color: #B3261E; }
.jg-cr-c.bien { background: #E5F2E8; border-color: #2F7D4A; cursor: default; }
.jg-cr-expl { margin: 0; max-width: 32rem; font-size: .95rem; color: var(--texto-med); text-align: center; }
.jg-cr-firma { margin: 0; font-size: .8rem; color: var(--texto-suave); }
.jg-mk { padding: 0 .1em; border-radius: 3px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.jg-mk--d { color: #2E5FB8; background: #E6ECFA; }
.jg-mk--i { color: #B4472B; background: #FBEAE4; }
.jg-mk--m { color: #2F7D4A; background: #E5F2E8; }
.jg-cr-ayudas { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; max-width: 40rem; }
.jg-cr-ayudas[hidden] { display: none; }
.jg-cr-ayudas .btn { gap: .35rem; padding: .4rem .7rem; font-size: .85rem; }
.jg-cr-ayudas .btn:disabled { opacity: .4; cursor: default; }
.jg-cr-rendirse { color: var(--texto-med); }
.jg-cr-como { max-width: 34rem; font-size: .88rem; color: var(--texto-med); }
.jg-cr-como[hidden] { display: none; }
.jg-cr-como summary { cursor: pointer; font-weight: 600; color: var(--teja); }
.jg-cr-como p { margin: .5rem 0 0; }
.jg-cr-vacio { max-width: 30rem; margin: 2rem auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.jg-cr-vacio > .ti { font-size: 2.6rem; color: var(--teja); }

/* ---------- Mahjong ---------- */
.jg-mj-marco { container-type: inline-size; width: min(100%, 34rem); }
.jg-mj-tablero {
    --tw: calc(100cqw / (var(--ancho) + var(--capas) * .2 + .15));
    --th: calc(var(--tw) * 1.3);
    --off: calc(var(--tw) * .2);
    position: relative;
    height: calc(var(--alto) * var(--th) + var(--capas) * var(--off) + var(--tw) * .1);
    transition: opacity .2s;
}
.jg-mj-tablero.barajando { opacity: .3; }
.jg-mj-f {
    position: absolute;
    left: calc(var(--x) * var(--tw) + (var(--capas) - var(--z)) * var(--off));
    top: calc(var(--y) * var(--th) + (var(--capas) - var(--z)) * var(--off));
    width: calc(var(--tw) - 1px);
    height: calc(var(--th) - 1px);
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #D6C9A8;
    border-radius: calc(var(--tw) * .16);
    background: linear-gradient(160deg, #FFFDF7, #F3EBD8);
    box-shadow: calc(var(--tw) * .06) calc(var(--tw) * .07) 0 #CDBB92, calc(var(--tw) * .08) calc(var(--tw) * .1) calc(var(--tw) * .12) rgba(40, 30, 10, .28);
    font-size: calc(var(--tw) * .56);
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, transform .15s;
}
.jg-mj-f[hidden] { display: none; }
/* Las capas de abajo, algo más oscuras para que se vea la pirámide */
.jg-mj-f.z0 { background: linear-gradient(160deg, #F1E8D2, #E2D5B4); }
.jg-mj-f.z1 { background: linear-gradient(160deg, #FBF5E7, #EEE3C8); }
.jg-mj-f.z1, .jg-mj-f.z2 { box-shadow: calc(var(--tw) * .08) calc(var(--tw) * .1) 0 #BFA977, calc(var(--tw) * .14) calc(var(--tw) * .18) calc(var(--tw) * .16) rgba(40, 30, 10, .4); }
.jg-mj-f.c0 { color: var(--teja); }
.jg-mj-f.c1 { color: var(--verde); }
.jg-mj-f.c2 { color: #2E4F6B; }
.jg-mj-f.c3 { color: #A8740F; }
.jg-mj-f.sel { background: #F8DE8E; border-color: #C89B2C; transform: translateY(-2px); }
.jg-mj-f.pista { background: #DCEFC8; border-color: #8DBB5E; animation: jg-mj-pista 1s ease-in-out 3; }
@keyframes jg-mj-pista { 50% { transform: translateY(-3px); } }
.jg-mj-f.sacude { animation: jg-sacude .35s; }
@media (prefers-reduced-motion: reduce) { .jg-mj-f, .jg-mj-tablero { transition: none; } .jg-mj-f.pista { animation: none; } }

/* ---------- Crucigrama ---------- */
.jg-cg-in {
    display: grid;
    grid-template-columns: minmax(0, 34rem) minmax(0, 22rem);
    justify-content: center;
    gap: 2rem;
    align-items: start;
    position: relative;
}
@media (max-width: 900px) { .jg-cg-in { grid-template-columns: minmax(0, 34rem); } }
.jg-cg-tablero { display: flex; flex-direction: column; gap: .9rem; align-items: center; }
.jg-cg-rejilla {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    width: min(100%, calc(var(--cols) * 2.7rem));
}
.jg-cg-rejilla.sacude { animation: jg-sacude .4s; }
.jg-cg-c {
    position: relative;
    aspect-ratio: 1;
    min-width: 0;
    margin: 0 -1px -1px 0;
    padding: 0;
    border: 1px solid var(--tinta);
    background: var(--blanco);
    color: var(--tinta);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.jg-cg-c.negra { border-color: transparent; background: none; cursor: default; }
.jg-cg-c small { position: absolute; top: 1px; left: 2px; font: 600 clamp(.45rem, 1.8vw, .62rem) var(--fuente-ui); line-height: 1; color: var(--texto-med); }
.jg-cg-c b { font: 700 clamp(.8rem, 4.2vw, 1.25rem) var(--fuente-ui); }
.jg-cg-c.zona { background: #F5EBD6; }
.jg-cg-c.sel { background: #F2C98A; }
.jg-cg-c.destapada b { color: #2E6FA8; }
.jg-cg-c.mal b { color: #B3261E; }
.jg-cg-c.mal::after { content: ''; position: absolute; inset: auto 0 0 auto; border: 4px solid transparent; border-right-color: #B3261E; border-bottom-color: #B3261E; }
.jg-cg-barra {
    display: flex;
    align-items: center;
    gap: .3rem;
    width: 100%;
    padding: .4rem;
    border-radius: 8px;
    background: #F5EBD6;
}
.jg-cg-barra[hidden] { display: none; }
.jg-cg-barra-txt { flex: 1; margin: 0; min-height: 2.6em; display: flex; align-items: center; gap: .5rem; font-size: .98rem; line-height: 1.3; }
.jg-cg-barra-txt strong { font-family: var(--fuente-mono); color: var(--teja); }
.jg-cg-flecha { border: 0; background: none; padding: .3rem; font-size: 1.3rem; color: var(--teja); cursor: pointer; }
.jg-cg-n { color: var(--texto-suave); white-space: nowrap; }
.jg-cg-lado { display: flex; flex-direction: column; gap: 1.2rem; }
.jg-cg-lado [hidden] { display: none; }
.jg-cg-pistas { display: grid; gap: 1rem; }
.jg-cg-grupo h2 { margin: 0 0 .4rem; font-family: var(--fuente-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teja); }
.jg-cg-grupo ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.jg-cg-grupo li { display: flex; gap: .55rem; padding: .3rem .5rem; border-radius: 6px; font-size: .93rem; line-height: 1.35; cursor: pointer; }
.jg-cg-grupo li.activa { background: #F5EBD6; }
.jg-cg-grupo li.llena { color: var(--texto-suave); }
.jg-cg-grupo li > span:last-child { display: flex; flex-direction: column; gap: .15rem; }
.jg-cg-num { min-width: 1.4rem; font-weight: 700; color: var(--teja); }
.jg-cg-resp { font: 700 .85rem var(--fuente-mono); letter-spacing: .08em; color: #3B6D11; }
.jg-cr-ayudas small { font-family: var(--fuente-mono); font-size: .72rem; opacity: .75; }