/* ================================================================
   Memotest — cartas con flip 3D con cuerpo, dorso enmarcado, par
   acertado con brillo del color de su dueño y error que se vuelve a
   dar vuelta con un timing agradable.
   Se carga DESPUÉS de style.css.
   ================================================================ */

.mm-screen { gap: 12px; }

/* ---- marcador ---- */

.mm-screen .vs-bar {
  width: 100%;
  justify-content: center;
  font-size: 1rem;
}

.mm-screen .vs-bar .player-you,
.mm-screen .vs-bar .player-opp {
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 800;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-screen .vs-bar .player-you {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.22), rgba(251, 191, 36, 0.10));
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.45);
}

.mm-screen .vs-bar .player-opp {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.22), rgba(56, 189, 248, 0.10));
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.45);
}

#mm-pairs {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mm-screen .turn-status {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  font-size: 0.95rem;
}

/* ---- la mesa ---- */

.mm-grid {
  gap: 9px;
  padding: 10px;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(134, 239, 172, 0.09), rgba(0, 0, 0, 0) 65%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 24px rgba(0, 0, 0, 0.30),
    0 8px 20px rgba(0, 0, 0, 0.26);
}

/* ---- la carta ---- */

.mm-card {
  perspective: 900px;
  /* la sombra vive en el .mm-inner: en el contenedor se aplanaría al girar */
}

.mm-inner {
  transform-style: preserve-3d;
  /* un pelín de rebote al final del giro: se siente más "carta" */
  transition: transform 0.42s cubic-bezier(0.34, 1.25, 0.5, 1);
  border-radius: 12px;
  will-change: transform;
}

.mm-card.up .mm-inner { transform: rotateY(180deg); }

/* al tocarla, la carta se levanta un toque antes de girar */
.mm-card:not(.matched):active .mm-inner { transform: scale(0.95); }
.mm-card.up:not(.matched):active .mm-inner { transform: rotateY(180deg) scale(0.95); }

.mm-face { border-radius: 12px; }

/* dorso: la filigrana de img/memo/back.svg dentro de un marco con relieve */
.mm-back {
  background:
    url('img/memo/back.svg') center / 100% 100% no-repeat,
    linear-gradient(160deg, #1c1c1c, #050505);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    inset 0 -3px 6px rgba(0, 0, 0, 0.6),
    0 3px 8px rgba(0, 0, 0, 0.45);
}

.mm-front {
  background: linear-gradient(155deg, #ffffff 0%, #f1f5f9 55%, #dbe2ea 100%);
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 42, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -4px 8px rgba(15, 23, 42, 0.14),
    0 3px 8px rgba(0, 0, 0, 0.4);
  color: #0f172a;
  font-weight: 800;
}

/* ---- par acertado ---- */

.mm-card.matched .mm-inner { transition: transform 0.42s cubic-bezier(0.34, 1.25, 0.5, 1); }

/* el par recién ganado destella una vez y queda con el color de su dueño */
.mm-card.matched .mm-front {
  opacity: 1;
  animation: mm-matched 0.75s ease-out 1;
}

@keyframes mm-matched {
  0%   { transform: rotateY(180deg) scale(1); }
  35%  { transform: rotateY(180deg) scale(1.09); }
  100% { transform: rotateY(180deg) scale(1); }
}

/* el dueño se marca con marco + brillo (dorado vos, celeste el rival) */
.mm-card.mine .mm-front {
  outline: none;
  box-shadow:
    inset 0 0 0 3px #fbbf24,
    inset 0 0 14px rgba(251, 191, 36, 0.35),
    inset 0 -4px 8px rgba(15, 23, 42, 0.12),
    0 0 16px rgba(251, 191, 36, 0.5);
}

.mm-card.theirs .mm-front {
  outline: none;
  box-shadow:
    inset 0 0 0 3px #38bdf8,
    inset 0 0 14px rgba(56, 189, 248, 0.35),
    inset 0 -4px 8px rgba(15, 23, 42, 0.12),
    0 0 16px rgba(56, 189, 248, 0.5);
}

/* esquina con la marca del dueño: el par no se distingue solo por color */
.mm-card.mine .mm-front::after,
.mm-card.theirs .mm-front::after {
  position: absolute;
  top: 3px;
  left: 4px;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.mm-card.mine .mm-front::after { content: '★'; color: #b45309; }
.mm-card.theirs .mm-front::after { content: '◆'; color: #0369a1; }

.mm-card.matched { cursor: default; }

.mm-img {
  width: 76%;
  height: 76%;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.25));
}

@media (max-width: 360px) {
  .mm-grid { gap: 7px; padding: 7px; }
  .mm-face, .mm-inner { border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-inner { transition: transform 0.18s linear; }
  .mm-card.matched .mm-front { animation: none; }
}