/* =============================================================================
   New Memory — sistema visual                                          v1.0.0
   -----------------------------------------------------------------------------
   Sin plantillas de PNG: cartas, dorsos, tablero y paneles salen de variables
   CSS. Los seis temas son los mismos de New Trivia, así un docente que ya
   eligió "océano" para su trivia encuentra el mismo clima acá.

   El tablero NO tiene una grilla fija: motor.js calcula cuántas columnas
   entran según la cantidad de cartas y el espacio disponible, y pasa el
   tamaño de carta en --carta-w / --carta-h.
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overflow: clip;               /* hidden se puede desplazar al enfocar; clip no */
    background: transparent;      /* en el iframe, el fondo lo pinta la plataforma */
    overscroll-behavior: none;
}
html.es-suelto, html.es-suelto body {
    background: #140d33;
    height: 100dvh;
    overscroll-behavior: none;
}
html.es-suelto body { -webkit-tap-highlight-color: transparent; }
html.es-suelto:has(.nm[data-tema="papel"]),
html.es-suelto:has(.nm[data-tema="papel"]) body { background: #dfe4f0; }
html.es-suelto .nm {
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; padding: 0; }
img { display: block; max-width: 100%; }

.nm-oculto {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* =============================================================================
   Temas
   ============================================================================= */
.nm {
    --u: clamp(13px, 2.6vmin, 17px);
    --escena-ancho: 72em;
    --escena-alto:  60em;
    --radio:       1.1em;
    --radio-chico: .7em;
    --borde:       rgba(255, 255, 255, .14);
    --ok:          #22c55e;
    --mal:         #f43f5e;
    --oro:         #facc15;
    --tinta:       #f7f8fc;
    --tinta-2:     rgba(247, 248, 252, .68);
    --vidrio:      rgba(255, 255, 255, .10);
    --vidrio-2:    rgba(255, 255, 255, .16);
    --sombra:      0 .5em 1.4em rgba(0, 0, 0, .3);
    --curva:       cubic-bezier(.22, 1, .36, 1);
    --resorte:     cubic-bezier(.34, 1.56, .64, 1);
    /* Cara de las cartas: siempre clara, para que cualquier imagen se lea */
    --cara:        #fdfdff;
    --cara-tinta:  #1c1d2e;
}
.nm[data-tema="aurora"] { --fondo-1: #2a1a5e; --fondo-2: #140d33; --acento: #a78bfa; --acento-2: #f0abfc; }
.nm[data-tema="oceano"] { --fondo-1: #0c3a55; --fondo-2: #071d2e; --acento: #38bdf8; --acento-2: #5eead4; }
.nm[data-tema="menta"]  { --fondo-1: #0d4436; --fondo-2: #06231c; --acento: #34d399; --acento-2: #a3e635; }
.nm[data-tema="solar"]  { --fondo-1: #5c3210; --fondo-2: #2a1607; --acento: #fbbf24; --acento-2: #fb923c; }
.nm[data-tema="coral"]  { --fondo-1: #5b1230; --fondo-2: #2b0817; --acento: #fb7185; --acento-2: #fda4af; }
.nm[data-tema="papel"] {
    --fondo-1: #eef1f8;
    --fondo-2: #dfe4f0;
    --acento:  #4f46e5;
    --acento-2:#0ea5e9;
    --tinta:   #16192b;
    --tinta-2: rgba(22, 25, 43, .62);
    --borde:   rgba(22, 25, 43, .12);
    --vidrio:  rgba(255, 255, 255, .72);
    --vidrio-2:rgba(255, 255, 255, .92);
    --sombra:  0 .5em 1.4em rgba(22, 25, 43, .14);
}

/* =============================================================================
   Lienzo
   ============================================================================= */
.nm {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow: clip;      /* recorta sin volverse scrolleable (ver LEEME de New Trivia) */
    font-size: var(--u);
    font-family: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    color: var(--tinta);
    -webkit-user-select: none;
    user-select: none;
    /* Toques rápidos: sin zoom por doble toque ni menú al mantener apretado */
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(160deg, var(--fondo-1), var(--fondo-2));
}
.nm img { -webkit-user-drag: none; user-drag: none; }
.nm__fondo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.nm__velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--fondo-2);
}
.nm[data-tema="papel"] .nm__velo { background: #fff; }

.nm__aura {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .45;
    pointer-events: none;
}
.nm__aura--1 {
    width: 28em; height: 28em; left: -9em; top: -11em;
    background: radial-gradient(circle, var(--acento), transparent 68%);
    animation: nm-flota-1 18s ease-in-out infinite;
}
.nm__aura--2 {
    width: 24em; height: 24em; right: -8em; bottom: -9em;
    background: radial-gradient(circle, var(--acento-2), transparent 68%);
    animation: nm-flota-2 22s ease-in-out infinite;
}
@keyframes nm-flota-1 { 50% { transform: translate3d(3em, 2.4em, 0) scale(1.14); } }
@keyframes nm-flota-2 { 50% { transform: translate3d(-2.6em, -2em, 0) scale(1.1); } }
.nm[data-tema="papel"] .nm__aura { opacity: .26; }

.nm__fogonazo {
    position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
}
.nm__fogonazo.es-ok {
    background: radial-gradient(70% 50% at 50% 100%, var(--ok), transparent 70%);
    animation: nm-fogonazo .55s ease-out;
}
.nm__fogonazo.es-mal {
    background: radial-gradient(90% 70% at 50% 50%, transparent 55%, var(--mal));
    animation: nm-fogonazo .45s ease-out;
}
@keyframes nm-fogonazo { 18% { opacity: .45; } 100% { opacity: 0; } }

/* =============================================================================
   Escenario
   ============================================================================= */
.nm__pantalla {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: var(--escena-ancho);
    max-height: var(--escena-alto);
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 1em;
    gap: .7em;
    opacity: 0;
}
.nm__pantalla.es-activa { animation: nm-entra .35s var(--curva) both; }
@keyframes nm-entra {
    from { opacity: 0; transform: translateY(.8em); }
    to   { opacity: 1; transform: none; }
}

/* Esquinas de la plataforma: menú arriba a la derecha, pantalla completa
   abajo a la izquierda. Empotrado, el juego no pone nada ahí. */
.nm.es-con-chrome .nm-barra { margin-right: 2.6em; }
.nm.es-con-chrome .nm-juego { padding-bottom: 2.4em; }
.nm.es-con-chrome .nm-intro__caja,
.nm.es-con-chrome .nm-portada__caja { margin-bottom: 1.6em; }

/* =============================================================================
   Piezas comunes
   ============================================================================= */
.nm-chip {
    display: inline-flex; align-items: center; gap: .35em;
    padding: .4em .85em;
    border-radius: 2em;
    background: var(--vidrio);
    border: 1px solid var(--borde);
    font-size: .8em; font-weight: 700;
    white-space: nowrap;
}
.nm-boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 3em;
    padding: .75em 2em;
    border-radius: var(--radio);
    font-weight: 800; font-size: 1.05em;
    color: #14121f;
    background: linear-gradient(180deg, var(--acento-2), var(--acento));
    box-shadow: 0 .28em 0 0 rgba(0, 0, 0, .26), var(--sombra);
    transition: transform .12s var(--curva), filter .15s, box-shadow .12s;
}
.nm-boton:hover  { filter: brightness(1.07); transform: translateY(-.1em); }
.nm-boton:active { transform: translateY(.18em); box-shadow: 0 .1em 0 0 rgba(0, 0, 0, .26); }
.nm-boton:disabled { opacity: .5; cursor: default; transform: none; }
.nm-boton:focus-visible, .nm-icono:focus-visible, .nm-carta:focus-visible {
    outline: .2em solid var(--acento-2);
    outline-offset: .2em;
}
.nm[data-tema="papel"] .nm-boton { color: #fff; }

.nm-iconos { display: inline-flex; gap: .4em; }
.nm-icono {
    width: 2.4em; height: 2.4em;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--vidrio);
    border: 1px solid var(--borde);
    transition: background .15s;
}
.nm-icono svg { width: 1.2em; height: 1.2em; }
.nm-icono:hover { background: var(--vidrio-2); }
.nm-icono.es-activo { background: var(--acento); color: #14121f; border-color: transparent; }

/* =============================================================================
   Portada, presentación de ronda, resultado y final
   (comparten la "caja" centrada de lectura cómoda)
   ============================================================================= */
.nm-portada, .nm-intro, .nm-final { justify-content: center; align-items: center; text-align: center; }
.nm-portada__caja, .nm-intro__caja {
    width: 100%;
    max-width: 30em;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex; flex-direction: column; align-items: center;
    gap: .9em;
    padding: .4em;
}
.nm-portada__caja::-webkit-scrollbar, .nm-intro__caja::-webkit-scrollbar { display: none; }
.nm-portada__caja > *, .nm-intro__caja > * { animation: nm-sube .5s var(--curva) both; }
.nm-portada__caja > :nth-child(2), .nm-intro__caja > :nth-child(2) { animation-delay: .05s; }
.nm-portada__caja > :nth-child(3), .nm-intro__caja > :nth-child(3) { animation-delay: .1s; }
.nm-portada__caja > :nth-child(4), .nm-intro__caja > :nth-child(4) { animation-delay: .15s; }
.nm-portada__caja > :nth-child(n+5), .nm-intro__caja > :nth-child(n+5) { animation-delay: .2s; }
@keyframes nm-sube { from { opacity: 0; transform: translateY(1em); } to { opacity: 1; transform: none; } }

.nm-portada__marca, .nm-intro__paso {
    font-size: .72em; letter-spacing: .2em; text-transform: uppercase;
    color: var(--acento); font-weight: 800;
}
.nm-portada__titulo, .nm-intro__titulo {
    margin: 0;
    font-size: 2.1em; line-height: 1.1; font-weight: 800; letter-spacing: -.02em;
    text-wrap: balance;
}
.nm-intro__titulo { font-size: 1.8em; }
.nm-portada__sub, .nm-intro__texto {
    margin: 0; color: var(--tinta-2); font-size: 1em; line-height: 1.45; max-width: 26em; text-wrap: pretty;
}
.nm-intro__modo { font-size: .85em; font-weight: 700; color: var(--tinta-2); margin-top: -.5em; }
.nm-intro__icono { font-size: 3em; line-height: 1; animation: nm-late 2.4s ease-in-out infinite; }
@keyframes nm-late { 50% { transform: scale(1.08) rotate(-4deg); } }
.nm-portada__datos { display: flex; flex-wrap: wrap; justify-content: center; gap: .45em; }
.nm-portada__alias {
    width: 100%; max-width: 16em;
    padding: .75em 1em;
    border-radius: var(--radio-chico);
    border: 1px solid var(--borde);
    background: var(--vidrio-2);
    color: var(--tinta);
    font: inherit; font-size: .95em; font-weight: 700;
    text-align: center;
    outline: none;
    -webkit-user-select: text; user-select: text;
}
.nm-portada__alias::placeholder { color: var(--tinta-2); font-weight: 600; }
.nm-portada__alias:focus { border-color: var(--acento); }

/* Abanico de cartas de la portada */
.nm-abanico { position: relative; width: 7.5em; height: 5.6em; margin-bottom: .3em; }
.nm-abanico__carta {
    position: absolute; left: 50%; bottom: 0;
    width: 3.6em; height: 4.8em;
    margin-left: -1.8em;
    border-radius: .55em;
    overflow: hidden;
    box-shadow: var(--sombra);
    transform-origin: 50% 120%;
    animation: nm-abre .7s var(--resorte) both;
}
.nm-abanico__carta .nm-carta__dorso { position: absolute; inset: 0; transform: none; }
.nm-abanico__carta .nm-carta__simbolo { font-size: 1.5em; width: 1.7em; height: 1.7em; }
.nm-abanico__carta:nth-child(1) { --giro: -18deg; }
.nm-abanico__carta:nth-child(2) { --giro: 0deg; animation-delay: .06s; }
.nm-abanico__carta:nth-child(3) { --giro: 18deg; animation-delay: .12s; }
@keyframes nm-abre { from { transform: rotate(0) translateY(.6em); opacity: 0; } to { transform: rotate(var(--giro)); opacity: 1; } }

/* Lista de rondas (portada y final) */
.nm-rutas {
    list-style: none; margin: 0; padding: 0;
    width: 100%; max-width: 22em;
    display: flex; flex-direction: column; gap: .35em;
    counter-reset: ruta;
}
.nm-ruta {
    display: flex; align-items: center; gap: .6em;
    padding: .45em .8em;
    border-radius: var(--radio-chico);
    background: var(--vidrio);
    border: 1px solid var(--borde);
    font-size: .88em; text-align: left;
    animation: nm-sube .45s var(--curva) both;
    counter-increment: ruta;
}
.nm-ruta::before { content: counter(ruta); font-weight: 800; color: var(--acento); min-width: 1em; }
.nm-ruta__icono { font-size: 1.1em; }
.nm-ruta__nombre { flex: 1 1 auto; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-ruta__pares { color: var(--tinta-2); font-weight: 700; font-size: .9em; white-space: nowrap; }
.nm-ruta__estrellas { display: inline-flex; gap: .1em; }
.nm-mini-estrella { width: 1em; height: 1em; color: var(--vidrio-2); }
.nm-mini-estrella.es-ganada { color: var(--oro); }

/* Resultado de ronda */
.nm-estrellas { display: flex; gap: .4em; }
.nm-estrella { width: 3em; height: 3em; color: var(--vidrio-2); }
.nm-estrella:nth-child(2) { transform: translateY(-.5em); width: 3.5em; height: 3.5em; }
.nm-estrella.es-ganada { color: var(--oro); animation: nm-estrella .55s var(--resorte) both; filter: drop-shadow(0 .2em .4em rgba(0,0,0,.25)); }
@keyframes nm-estrella { from { transform: scale(0) rotate(-40deg); } }
.nm-estrella:nth-child(2).es-ganada { animation-name: nm-estrella-2; }
@keyframes nm-estrella-2 { from { transform: translateY(-.5em) scale(0) rotate(-40deg); } to { transform: translateY(-.5em); } }
.nm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45em; width: 100%; max-width: 26em; }
.nm-stat {
    display: flex; flex-direction: column; align-items: center; gap: .1em;
    padding: .6em .3em;
    border-radius: var(--radio-chico);
    background: var(--vidrio);
    border: 1px solid var(--borde);
}
.nm-stat__valor { font-size: 1.25em; font-weight: 800; font-variant-numeric: tabular-nums; }
.nm-stat__rotulo { font-size: .7em; font-weight: 700; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 380px) { .nm-stats { grid-template-columns: repeat(2, 1fr); } }

/* Anillo del final */
.nm-anillo {
    --p: 0;
    width: 8.5em; height: 8.5em;
    border-radius: 50%;
    display: grid; place-items: center;
    background:
        radial-gradient(closest-side, var(--fondo-2) 78%, transparent 79%),
        conic-gradient(var(--acento) calc(var(--p) * 1%), var(--vidrio) 0);
    box-shadow: var(--sombra);
}
.nm-anillo.es-aprobado {
    background:
        radial-gradient(closest-side, var(--fondo-2) 78%, transparent 79%),
        conic-gradient(var(--ok) calc(var(--p) * 1%), var(--vidrio) 0);
}
.nm[data-tema="papel"] .nm-anillo { background:
        radial-gradient(closest-side, #fff 78%, transparent 79%),
        conic-gradient(var(--acento) calc(var(--p) * 1%), rgba(22,25,43,.08) 0); }
.nm[data-tema="papel"] .nm-anillo.es-aprobado { background:
        radial-gradient(closest-side, #fff 78%, transparent 79%),
        conic-gradient(var(--ok) calc(var(--p) * 1%), rgba(22,25,43,.08) 0); }
.nm-anillo__num { font-size: 2em; font-weight: 800; font-variant-numeric: tabular-nums; }

/* =============================================================================
   Juego: barra + tablero
   ============================================================================= */
.nm-juego { gap: .6em; padding: .7em; }
.nm-barra {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: .6em;
    padding: .35em .45em .35em .7em;
    border-radius: 2em;
    background: var(--vidrio);
    border: 1px solid var(--borde);
}
.nm-barra__izq, .nm-barra__der { display: flex; align-items: center; gap: .55em; min-width: 0; }
.nm-barra__izq { flex: 1 1 auto; }
.nm-barra__paso { font-weight: 800; font-size: .85em; color: var(--acento); white-space: nowrap; }
.nm-progreso {
    flex: 1 1 auto; max-width: 12em; min-width: 3em;
    height: .55em; border-radius: 1em;
    background: var(--vidrio-2);
    overflow: hidden;
}
.nm-progreso__relleno {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--acento), var(--acento-2));
    border-radius: inherit;
    transition: width .5s var(--curva);
}
.nm-progreso__texto { font-weight: 800; font-size: .85em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nm-reloj {
    display: inline-flex; align-items: center; gap: .3em;
    font-weight: 800; font-variant-numeric: tabular-nums;
}
.nm-reloj svg { width: 1.15em; height: 1.15em; }
.nm-reloj.es-urgente { color: var(--mal); animation: nm-late-reloj .9s ease-in-out infinite; }
@keyframes nm-late-reloj { 50% { transform: scale(1.12); } }
.nm-vidas { display: inline-flex; gap: .12em; color: var(--mal); }
.nm-vida svg { width: 1.15em; height: 1.15em; display: block; }
.nm-vida.es-perdida { color: var(--vidrio-2); animation: nm-pierde .5s var(--curva); }
@keyframes nm-pierde { 30% { transform: scale(1.5); color: var(--mal); } }
.nm-puntos {
    font-weight: 800; font-variant-numeric: tabular-nums;
    padding: .2em .65em; border-radius: 1em;
    background: var(--vidrio-2);
    min-width: 3em; text-align: center;
}
.nm-puntos.es-saltando { animation: nm-salta .3s var(--resorte); }
@keyframes nm-salta { 50% { transform: scale(1.18); } }
@media (max-width: 420px) {
    .nm-barra .nm-iconos .nm-icono:nth-child(2) { display: none; }
    .nm-progreso { display: none; }
}

.nm-tablero {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    gap: var(--gap, 10px);
    justify-content: center;
    align-content: center;
    perspective: 1100px;
}

/* =============================================================================
   La carta
   ============================================================================= */
.nm-carta {
    position: relative;
    width: var(--carta-w, 6em);
    height: var(--carta-h, 6em);
    border-radius: calc(var(--carta-w, 6em) * .1);
    animation: nm-reparte .45s var(--resorte) both;
    animation-delay: calc(var(--i, 0) * 22ms);
}
@keyframes nm-reparte { from { opacity: 0; transform: translateY(1.2em) scale(.7) rotate(-6deg); } }
.nm-carta__cuerpo {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    transition: transform .42s var(--curva);
    border-radius: inherit;
}
.nm-carta:not(.es-vuelta):not(.es-hallada):hover .nm-carta__cuerpo { transform: translateY(-.15em) rotateX(6deg); }
.nm-carta.es-vuelta .nm-carta__cuerpo,
.nm-carta.es-hallada .nm-carta__cuerpo { transform: rotateY(180deg); }

.nm-carta__dorso, .nm-carta__frente {
    position: absolute; inset: 0;
    border-radius: inherit;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
}

/* --- Dorso: el patrón sale de los colores del tema --- */
.nm-carta__dorso {
    display: grid; place-items: center;
    background-color: var(--acento);
    border: .14em solid rgba(255, 255, 255, .55);
    box-shadow: 0 .25em .6em rgba(0, 0, 0, .28), inset 0 0 0 .3em rgba(0, 0, 0, .08);
}
.nm-carta__dorso.es-con-imagen { background-size: cover; background-position: center; }
.nm[data-dorso="rombos"] .nm-carta__dorso:not(.es-con-imagen) {
    background-image: conic-gradient(from 45deg, var(--acento-2) 25%, var(--acento) 0 50%, var(--acento-2) 0 75%, var(--acento) 0);
    background-size: 1.5em 1.5em;
}
.nm[data-dorso="zigzag"] .nm-carta__dorso:not(.es-con-imagen) {
    background-image:
        linear-gradient(135deg, var(--acento-2) 25%, transparent 25%),
        linear-gradient(225deg, var(--acento-2) 25%, transparent 25%),
        linear-gradient(45deg,  var(--acento-2) 25%, transparent 25%),
        linear-gradient(315deg, var(--acento-2) 25%, var(--acento) 25%);
    background-size: 1.6em 1.6em;
    background-position: .8em 0, .8em 0, 0 0, 0 0;
}
.nm[data-dorso="puntos"] .nm-carta__dorso:not(.es-con-imagen) {
    background-image: radial-gradient(var(--acento-2) 22%, transparent 24%),
                      radial-gradient(var(--acento-2) 22%, transparent 24%);
    background-size: 1.3em 1.3em;
    background-position: 0 0, .65em .65em;
}
.nm[data-dorso="rayas"] .nm-carta__dorso:not(.es-con-imagen) {
    background-image: repeating-linear-gradient(45deg, var(--acento) 0 .5em, var(--acento-2) .5em 1em);
}
.nm[data-dorso="cuadros"] .nm-carta__dorso:not(.es-con-imagen) {
    background-image: conic-gradient(var(--acento-2) 25%, var(--acento) 0 50%, var(--acento-2) 0 75%, var(--acento) 0);
    background-size: 1.4em 1.4em;
}
.nm[data-dorso="ondas"] .nm-carta__dorso:not(.es-con-imagen) {
    background-image:
        radial-gradient(circle at 100% 50%, transparent 20%, var(--acento-2) 21%, var(--acento-2) 34%, transparent 35%, transparent),
        radial-gradient(circle at 0 50%, transparent 20%, var(--acento-2) 21%, var(--acento-2) 34%, transparent 35%, transparent);
    background-size: 1.6em 2.2em;
    background-position: 0 0, .8em 1.1em;
}
.nm[data-dorso="liso"] .nm-carta__dorso:not(.es-con-imagen) {
    background-image: linear-gradient(150deg, var(--acento-2), var(--acento));
}
.nm-carta__simbolo {
    width: 1.9em; height: 1.9em;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #1c1d2e;
    font-weight: 900;
    font-size: calc(var(--carta-w, 6em) * .2);
    line-height: 1;
    box-shadow: 0 .1em .3em rgba(0, 0, 0, .25);
}

/* --- Frente --- */
.nm-carta__frente {
    transform: rotateY(180deg);
    background: var(--cara);
    color: var(--cara-tinta);
    border: .14em solid rgba(255, 255, 255, .9);
    box-shadow: 0 .25em .6em rgba(0, 0, 0, .25);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 6%;
    gap: 4%;
}
/* En relación, cada lado tiene su color de borde: ayuda a ver que se unen cosas distintas */
.nm-carta__frente[data-lado="a"] { box-shadow: 0 .25em .6em rgba(0,0,0,.25), inset 0 -.32em 0 var(--acento); }
.nm-carta__frente[data-lado="b"] { box-shadow: 0 .25em .6em rgba(0,0,0,.25), inset 0 -.32em 0 var(--acento-2); }

.nm-carta__img {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    object-fit: contain;
    pointer-events: none;
}
.nm-carta__frente.es-solo-imagen { padding: 5%; }
.nm-carta__texto {
    display: block;
    max-width: 100%;
    text-align: center;
    font-weight: 800;
    line-height: 1.12;
    overflow-wrap: normal;      /* primero se achica la letra (motor.js)... */
    text-wrap: balance;
}
.nm-carta__texto.es-partir { overflow-wrap: anywhere; }   /* ...y solo si no alcanza, se parte */
.nm-carta__frente.es-mixta .nm-carta__texto { flex: 0 0 auto; font-weight: 800; }
.nm-carta__texto--falta { font-size: .7em; color: #8a8ca0; font-weight: 700; }

/* --- Estados --- */
.nm-carta.es-vuelta, .nm-carta.es-hallada { cursor: default; }
.nm-carta.es-error .nm-carta__cuerpo { animation: nm-sacude .42s ease-in-out; }
@keyframes nm-sacude {
    0%, 100% { transform: rotateY(180deg); }
    25% { transform: rotateY(180deg) translateX(-.35em) rotate(-2deg); }
    75% { transform: rotateY(180deg) translateX(.35em) rotate(2deg); }
}
.nm-carta.es-error .nm-carta__frente { border-color: var(--mal); }
.nm-carta.es-hallada .nm-carta__frente {
    border-color: var(--ok);
    animation: nm-hallada .5s var(--resorte);
}
@keyframes nm-hallada { 40% { transform: rotateY(180deg) scale(1.08); } }
.nm-carta.es-hallada::after {
    content: "✓";
    position: absolute;
    right: -.35em; top: -.35em;
    width: 1.5em; height: 1.5em;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ok);
    color: #fff;
    font-weight: 900; font-size: .8em;
    box-shadow: 0 .15em .4em rgba(0, 0, 0, .3);
    animation: nm-estrella .4s var(--resorte) both;
    z-index: 3;
}
.nm-carta.es-revelada .nm-carta__frente { opacity: .75; border-color: var(--tinta-2); }
.nm-carta.es-vistazo .nm-carta__frente { border-color: var(--acento-2); }

/* Chispas al encontrar una pareja */
.nm-chispas { position: absolute; left: 50%; top: 50%; z-index: 4; pointer-events: none; }
.nm-chispa {
    position: absolute; width: .45em; height: .45em; border-radius: 50%;
    animation: nm-chispa .8s var(--curva) forwards;
}
@keyframes nm-chispa { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

.nm-suma {
    position: absolute; z-index: 8; pointer-events: none;
    transform: translate(-50%, 0);
    font-weight: 900; font-size: 1.3em;
    color: var(--oro);
    text-shadow: 0 .1em .3em rgba(0, 0, 0, .5);
    animation: nm-suma 1.05s var(--curva) forwards;
}
@keyframes nm-suma { to { transform: translate(-50%, -2.6em); opacity: 0; } }

/* Aviso de pareja: abajo, sin tapar el tablero ni frenar el juego */
.nm-aviso {
    position: absolute;
    left: 50%; bottom: 1em;
    z-index: 7;
    max-width: min(28em, calc(100% - 2em));
    display: flex; flex-direction: column; align-items: center; gap: .2em;
    padding: .65em 1.2em;
    border-radius: var(--radio);
    background: rgba(12, 10, 28, .9);
    color: #fff;
    text-align: center;
    box-shadow: var(--sombra);
    transform: translate(-50%, 160%);
    opacity: 0;
    transition: transform .35s var(--resorte), opacity .25s;
    pointer-events: none;
}
.nm[data-tema="papel"] .nm-aviso { background: rgba(255, 255, 255, .97); color: var(--tinta); border: 1px solid var(--borde); }
.nm-aviso.es-visible { transform: translate(-50%, 0); opacity: 1; }
.nm-aviso__titulo { font-weight: 900; font-size: 1.1em; }
.nm-aviso__info { font-size: .88em; line-height: 1.35; opacity: .9; }

/* Cuenta regresiva del modo Vistazo */
.nm-cuenta {
    position: absolute; left: 50%; top: .55em; z-index: 7;
    transform: translate(-50%, 0);
    display: flex; flex-direction: row; align-items: center; gap: .7em;
    padding: .35em 1.3em;
    border-radius: var(--radio);
    background: rgba(12, 10, 28, .82);
    color: #fff;
    box-shadow: var(--sombra);
    pointer-events: none;
    animation: nm-entra-cuenta .4s var(--resorte) both;
}
.nm-cuenta.es-saliendo { animation: nm-sale-cuenta .3s ease-in forwards; }
@keyframes nm-entra-cuenta { from { transform: translate(-50%, -.6em) scale(.8); opacity: 0; } }
@keyframes nm-sale-cuenta { to { transform: translate(-50%, -.6em) scale(.8); opacity: 0; } }
.nm-cuenta__texto { font-weight: 800; letter-spacing: .05em; }
.nm-cuenta__num { font-size: 1.7em; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }

/* Lluvia de papelitos del final */
.nm-lluvia { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.nm-papelito {
    position: absolute; top: -1em;
    width: .55em; height: .9em; border-radius: .12em;
    animation: nm-cae linear forwards;
}
@keyframes nm-cae { to { transform: translateY(110vh) rotate(var(--giro)); } }

/* =============================================================================
   Legibilidad con foto de fondo
   ============================================================================= */
.nm.es-con-fondo .nm-barra,
.nm.es-con-fondo .nm-chip,
.nm.es-con-fondo .nm-ruta,
.nm.es-con-fondo .nm-stat,
.nm.es-con-fondo .nm-icono { background: rgba(12, 10, 28, .72); border-color: rgba(255,255,255,.18); }
.nm.es-con-fondo[data-tema="papel"] .nm-barra,
.nm.es-con-fondo[data-tema="papel"] .nm-chip,
.nm.es-con-fondo[data-tema="papel"] .nm-ruta,
.nm.es-con-fondo[data-tema="papel"] .nm-stat,
.nm.es-con-fondo[data-tema="papel"] .nm-icono { background: rgba(255, 255, 255, .92); }
.nm.es-con-fondo .nm-portada__titulo,
.nm.es-con-fondo .nm-intro__titulo,
.nm.es-con-fondo .nm-portada__sub,
.nm.es-con-fondo .nm-intro__texto { text-shadow: 0 .08em .5em rgba(0, 0, 0, .55); }
.nm.es-con-fondo[data-tema="papel"] .nm-portada__titulo,
.nm.es-con-fondo[data-tema="papel"] .nm-intro__titulo,
.nm.es-con-fondo[data-tema="papel"] .nm-portada__sub,
.nm.es-con-fondo[data-tema="papel"] .nm-intro__texto { text-shadow: 0 0 .5em #fff, 0 0 .2em #fff; }
.nm.es-con-fondo .nm-intro__texto, .nm.es-con-fondo .nm-portada__sub { color: var(--tinta); }

/* =============================================================================
   Menos movimiento
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .nm *, .nm *::before, .nm *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* =============================================================================
   v1.1 — Juice: cuenta regresiva, carteles, sellos, temblor, tiempo
   ============================================================================= */
.nm-barra { position: relative; overflow: hidden; }
.nm-barra__tiempo {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: .22em;
    background: linear-gradient(90deg, var(--acento), var(--acento-2));
    transform-origin: left center;
    transition: transform .2s linear, background .3s;
}
.nm-barra__tiempo.es-urgente { background: var(--mal); }

.nm-regresiva {
    position: absolute; inset: 0; z-index: 8;
    display: grid; place-items: center;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .28), transparent 60%);
}
.nm-regresiva__num {
    width: 1.5em; height: 1.5em;
    display: grid; place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(12, 10, 28, .88) 55%, rgba(12, 10, 28, .6));
    box-shadow: 0 0 0 .06em rgba(255, 255, 255, .25), 0 .2em .6em rgba(0, 0, 0, .4);
    font-size: 6em; font-weight: 900; line-height: 1;
    color: #fff;
    text-shadow: 0 .06em 0 rgba(0, 0, 0, .25), 0 .15em .5em rgba(0, 0, 0, .45);
    animation: nm-regresiva .43s var(--resorte) both;
}
.nm-regresiva__num.es-ya {
    width: auto; height: auto; padding: .1em .45em; border-radius: .4em;
    background: none; box-shadow: none;
    filter: drop-shadow(0 .06em .2em rgba(0, 0, 0, .5));
    font-size: 4.6em;
    background: linear-gradient(180deg, #fff, var(--acento-2));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: nm-ya .5s var(--resorte) both;
}
@keyframes nm-regresiva { 0% { transform: scale(2.2); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1); opacity: .95; } }
@keyframes nm-ya { 0% { transform: scale(.4) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.15) rotate(3deg); opacity: 1; } 100% { transform: scale(1); } }

.nm-cartel {
    position: absolute; left: 50%; top: 42%; z-index: 9;
    transform: translate(-50%, -50%);
    padding: .35em .9em;
    border-radius: 1em;
    font-size: 1.9em; font-weight: 900; white-space: nowrap;
    color: #1c1d2e;
    background: linear-gradient(180deg, #fff6c9, var(--oro));
    box-shadow: 0 .2em 0 rgba(0, 0, 0, .2), 0 .5em 1.5em rgba(0, 0, 0, .35);
    pointer-events: none;
    animation: nm-cartel 1.25s var(--curva) forwards;
}
@keyframes nm-cartel {
    0%   { transform: translate(-50%, -50%) scale(.3) rotate(-10deg); opacity: 0; }
    18%  { transform: translate(-50%, -50%) scale(1.12) rotate(2deg); opacity: 1; }
    30%  { transform: translate(-50%, -50%) scale(1) rotate(0); }
    75%  { opacity: 1; }
    100% { transform: translate(-50%, -120%) scale(.9); opacity: 0; }
}

.nm-sello {
    display: inline-block;
    padding: .25em .9em;
    border: .16em solid var(--oro);
    border-radius: .5em;
    color: var(--oro);
    font-weight: 900; font-size: 1.25em; letter-spacing: .06em; text-transform: uppercase;
    transform: rotate(-6deg);
    animation: nm-sello .55s .35s var(--resorte) both;
}
.nm-sello--record { border-color: var(--acento-2); color: var(--acento-2); text-transform: none; letter-spacing: 0; }
.nm[data-tema="papel"] .nm-sello { color: #b45309; border-color: #d97706; }
@keyframes nm-sello { from { transform: rotate(-6deg) scale(2.6); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: 1; } }

.nm-tablero.es-temblor { animation: nm-temblor .32s ease-in-out; }
@keyframes nm-temblor {
    20% { transform: translateX(-.25em); } 40% { transform: translateX(.22em); }
    60% { transform: translateX(-.15em); } 80% { transform: translateX(.08em); }
}

/* Las parejas encontradas se aquietan: lo que falta resalta solo */
.nm-carta.es-hallada .nm-carta__cuerpo { transform: rotateY(180deg) scale(.93); }
.nm-carta.es-hallada .nm-carta__frente {
    box-shadow: 0 0 0 .14em var(--ok), 0 0 1.2em rgba(34, 197, 94, .45);
}

/* Relación a la vista */
.nm-carta.es-elegida .nm-carta__cuerpo { transform: rotateY(180deg) translateY(-.18em) scale(1.04); }
.nm-carta.es-elegida .nm-carta__frente {
    border-color: var(--acento-2);
    box-shadow: 0 0 0 .2em var(--acento-2), 0 .7em 1.4em rgba(0, 0, 0, .35);
}
.nm-carta.es-vuelta:not(.es-hallada):not(.es-elegida):not(.es-error):hover .nm-carta__cuerpo { transform: rotateY(180deg) translateY(-.12em); }
.nm-juego.es-a-la-vista .nm-carta:not(.es-hallada):not(.es-revelada) { cursor: pointer; }